Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TabList", {
enumerable: true,
get: function() {
return TabList;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useTabList = require("./useTabList");
const _renderTabList = require("./renderTabList");
const _useTabListStylesstyles = require("./useTabListStyles.styles");
const _useTabListContextValues = require("./useTabListContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const TabList = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useTabList.useTabList_unstable)(props, ref);
const contextValues = (0, _useTabListContextValues.useTabListContextValues_unstable)(state);
(0, _useTabListStylesstyles.useTabListStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTabListStyles_unstable')(state);
return (0, _renderTabList.renderTabList_unstable)(state, contextValues);
});
TabList.displayName = 'TabList';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TabList/TabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles.styles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues_unstable } from './useTabListContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n const state = useTabList_unstable(props, ref);\n const contextValues = useTabListContextValues_unstable(state);\n\n useTabListStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTabListStyles_unstable')(state);\n\n return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"names":["TabList","React","forwardRef","props","ref","state","useTabList_unstable","contextValues","useTabListContextValues_unstable","useTabListStyles_unstable","useCustomStyleHook_unstable","renderTabList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;4BACa;+BACG;wCACG;yCAGO;qCACL;AAKrC,MAAMA,UAAAA,WAAAA,GAA6CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAoBH,OAAOC;IACzC,MAAMG,gBAAgBC,IAAAA,yDAAAA,EAAiCH;IAEvDI,IAAAA,iDAAAA,EAA0BJ;IAE1BK,IAAAA,gDAAAA,EAA4B,6BAA6BL;IAEzD,OAAOM,IAAAA,qCAAAA,EAAuBN,OAAOE;AACvC;AAEAP,QAAQY,WAAW,GAAG"}
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TabList/TabList.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabValue } from '../Tab/Tab.types';\n\nexport type TabRegisterData = {\n /**\n * The value of the tab.\n */\n value: TabValue;\n\n /**\n * The reference to the tab HTML element.\n */\n ref: React.RefObject<HTMLElement>;\n};\n\nexport type RegisterTabEventHandler = (data: TabRegisterData) => void;\n\nexport type SelectTabData = {\n /**\n * The value of the selected tab.\n */\n value: TabValue;\n};\n\nexport type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E> | React.FocusEvent<E>;\n\nexport type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;\n\nexport type TabListSlots = {\n /**\n * The slot associated with the root element of this tab list.\n */\n root: Slot<'div'>;\n};\n\n/**\n * TabList Props\n */\nexport type TabListProps = ComponentProps<TabListSlots> & {\n /**\n * A tab list can supports 'transparent' and 'subtle' appearance.\n *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n *- 'transparent': No background and border styling\n *- 'subtle-circular': Adds background and border styling\n *- 'filled-circular': Adds background styling\n *\n * The appearance affects each of the contained tabs.\n * @default 'transparent'\n */\n appearance?: 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';\n\n /**\n * Tab size may change between unselected and selected states.\n * The default scenario is a selected tab has bold text.\n *\n * When true, this property requests tabs be the same size whether unselected or selected.\n * @default true\n */\n reserveSelectedTabSpace?: boolean;\n\n /**\n * The value of the tab to be selected by default.\n * Typically useful when the selectedValue is uncontrolled.\n */\n defaultSelectedValue?: TabValue;\n\n /**\n * A tab list can be set to disable interaction.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Raised when a tab is selected.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onTabSelect?: SelectTabEventHandler;\n\n /**\n * When true, focusing a tab will select it.\n * @default false\n */\n selectTabOnFocus?: boolean;\n\n /**\n * The value of the currently selected tab.\n */\n selectedValue?: TabValue;\n\n /**\n * A tab list can be either 'small', 'medium', or 'large' size.\n * The size affects each of the contained tabs.\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * A tab list can arrange its tabs vertically.\n * @default false\n */\n vertical?: boolean;\n};\n\nexport type TabListContextValue = Pick<\n TabListProps,\n 'onTabSelect' | 'selectTabOnFocus' | 'selectedValue' | 'reserveSelectedTabSpace'\n> &\n Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {\n /** A callback to allow a tab to register itself with the tab list. */\n onRegister: RegisterTabEventHandler;\n\n /** A callback to allow a tab to unregister itself with the tab list. */\n onUnregister: RegisterTabEventHandler;\n /**\n * A callback to allow a tab to select itself when pressed.\n */\n onSelect: SelectTabEventHandler;\n /**\n * Gets the registered tab data along with current and previous selected values.\n */\n getRegisteredTabs: () => {\n selectedValue?: TabValue;\n previousSelectedValue?: TabValue;\n registeredTabs: Record<string, TabRegisterData>;\n };\n };\n\n/**\n * Context values used in rendering TabList.\n */\nexport type TabListContextValues = {\n /**\n * The context of the tab list available to each tab.\n */\n tabList: TabListContextValue;\n};\n\n/**\n * State used in rendering TabList.\n */\nexport type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
@@ -0,0 +1,45 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
TabListContext: function() {
return TabListContext;
},
TabListProvider: function() {
return TabListProvider;
},
useTabListContext_unstable: function() {
return useTabListContext_unstable;
}
});
const _reactcontextselector = require("@fluentui/react-context-selector");
const tabListContextDefaultValue = {
appearance: 'transparent',
reserveSelectedTabSpace: true,
selectTabOnFocus: false,
disabled: false,
selectedValue: undefined,
onRegister: ()=>{
/* noop */ },
onUnregister: ()=>{
/* noop */ },
onSelect: ()=>{
/* noop */ },
getRegisteredTabs: ()=>{
return {
registeredTabs: {}
};
},
size: 'medium',
vertical: false
};
const TabListContext = (0, _reactcontextselector.createContext)(undefined);
const TabListProvider = TabListContext.Provider;
const useTabListContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(TabListContext, (ctx = tabListContextDefaultValue)=>selector(ctx));
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TabList/TabListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nconst tabListContextDefaultValue: TabListContextValue = {\n appearance: 'transparent',\n reserveSelectedTabSpace: true,\n selectTabOnFocus: false,\n disabled: false,\n selectedValue: undefined,\n onRegister: () => {\n /* noop */\n },\n onUnregister: () => {\n /* noop */\n },\n onSelect: () => {\n /* noop */\n },\n getRegisteredTabs: () => {\n return {\n registeredTabs: {},\n };\n },\n size: 'medium',\n vertical: false,\n};\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue | undefined>(\n undefined,\n) as Context<TabListContextValue>;\n\nexport const TabListProvider = TabListContext.Provider;\nexport const useTabListContext_unstable = <T>(selector: ContextSelector<TabListContextValue, T>): T =>\n useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));\n"],"names":["TabListContext","TabListProvider","useTabListContext_unstable","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","selectTabOnFocus","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","createContext","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA4BaA,cAAAA;eAAAA;;IAIAC,eAAAA;eAAAA;;IACAC,0BAAAA;eAAAA;;;sCAjCqC;AAIlD,MAAMC,6BAAkD;IACtDC,YAAY;IACZC,yBAAyB;IACzBC,kBAAkB;IAClBC,UAAU;IACVC,eAAeC;IACfC,YAAY;IACV,QAAQ,GACV;IACAC,cAAc;IACZ,QAAQ,GACV;IACAC,UAAU;IACR,QAAQ,GACV;IACAC,mBAAmB;QACjB,OAAO;YACLC,gBAAgB,CAAC;QACnB;IACF;IACAC,MAAM;IACNC,UAAU;AACZ;AAEO,MAAMhB,iBAA+CiB,IAAAA,mCAAAA,EAC1DR;AAGK,MAAMR,kBAAkBD,eAAekB,QAAQ;AAC/C,MAAMhB,6BAA6B,CAAIiB,WAC5CC,IAAAA,wCAAAA,EAAmBpB,gBAAgB,CAACqB,MAAMlB,0BAA0B,GAAKgB,SAASE"}
@@ -0,0 +1,45 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
TabList: function() {
return _TabList.TabList;
},
TabListContext: function() {
return _TabListContext.TabListContext;
},
TabListProvider: function() {
return _TabListContext.TabListProvider;
},
renderTabList_unstable: function() {
return _renderTabList.renderTabList_unstable;
},
tabListClassNames: function() {
return _useTabListStylesstyles.tabListClassNames;
},
useTabListContextValues_unstable: function() {
return _useTabListContextValues.useTabListContextValues_unstable;
},
useTabListContext_unstable: function() {
return _TabListContext.useTabListContext_unstable;
},
useTabListStyles_unstable: function() {
return _useTabListStylesstyles.useTabListStyles_unstable;
},
useTabList_unstable: function() {
return _useTabList.useTabList_unstable;
}
});
const _TabList = require("./TabList");
const _TabListContext = require("./TabListContext");
const _renderTabList = require("./renderTabList");
const _useTabList = require("./useTabList");
const _useTabListContextValues = require("./useTabListContextValues");
const _useTabListStylesstyles = require("./useTabListStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TabList/index.ts"],"sourcesContent":["export { TabList } from './TabList';\nexport type {\n RegisterTabEventHandler,\n SelectTabData,\n SelectTabEvent,\n SelectTabEventHandler,\n TabListContextValue,\n TabListContextValues,\n TabListProps,\n TabListSlots,\n TabListState,\n TabRegisterData,\n} from './TabList.types';\nexport { TabListContext, TabListProvider, useTabListContext_unstable } from './TabListContext';\nexport { renderTabList_unstable } from './renderTabList';\nexport { useTabList_unstable } from './useTabList';\nexport { useTabListContextValues_unstable } from './useTabListContextValues';\nexport { tabListClassNames, useTabListStyles_unstable } from './useTabListStyles.styles';\n"],"names":["TabList","TabListContext","TabListProvider","renderTabList_unstable","tabListClassNames","useTabListContextValues_unstable","useTabListContext_unstable","useTabListStyles_unstable","useTabList_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,OAAO;eAAPA,gBAAO;;IAaPC,cAAc;eAAdA,8BAAc;;IAAEC,eAAe;eAAfA,+BAAe;;IAC/BC,sBAAsB;eAAtBA,qCAAsB;;IAGtBC,iBAAiB;eAAjBA,yCAAiB;;IADjBC,gCAAgC;eAAhCA,yDAAgC;;IAHCC,0BAA0B;eAA1BA,0CAA0B;;IAIxCC,yBAAyB;eAAzBA,iDAAyB;;IAF5CC,mBAAmB;eAAnBA,+BAAmB;;;yBAfJ;gCAaoD;+BACrC;4BACH;yCACa;wCACY"}
@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderTabList_unstable", {
enumerable: true,
get: function() {
return renderTabList_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _TabListContext = require("./TabListContext");
const renderTabList_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TabListContext.TabListProvider, {
value: contextValues.tabList,
children: state.root.children
})
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TabList/renderTabList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n assertSlots<TabListSlots>(state);\n\n return (\n <state.root>\n <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n </state.root>\n );\n};\n"],"names":["renderTabList_unstable","state","contextValues","assertSlots","_jsx","root","TabListProvider","value","tabList","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAC4B;gCAEI;AAKzB,MAAMA,yBAAyB,CAACC,OAAqBC;IAC1DC,IAAAA,2BAAAA,EAA0BF;IAE1B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACE,+BAAAA,EAAAA;YAAgBC,OAAOL,cAAcM,OAAO;sBAAGP,MAAMI,IAAI,CAACI,QAAQ;;;AAGzE"}
@@ -0,0 +1,88 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTabList_unstable", {
enumerable: true,
get: function() {
return useTabList_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reacttabster = require("@fluentui/react-tabster");
const _reactutilities = require("@fluentui/react-utilities");
const useTabList_unstable = (props, ref)=>{
const { appearance = 'transparent', reserveSelectedTabSpace = true, disabled = false, onTabSelect, selectTabOnFocus = false, size = 'medium', vertical = false } = props;
const innerRef = _react.useRef(null);
const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
circular: true,
axis: vertical ? 'vertical' : 'horizontal',
memorizeCurrent: false,
// eslint-disable-next-line @typescript-eslint/naming-convention
unstable_hasDefault: true
});
const [selectedValue, setSelectedValue] = (0, _reactutilities.useControllableState)({
state: props.selectedValue,
defaultState: props.defaultSelectedValue,
initialState: undefined
});
// considered usePrevious, but it is sensitive to re-renders
// this could cause the previous to move to current in the case where the tab list re-renders.
// these refs avoid getRegisteredTabs changing when selectedValue changes and causing
// renders for tabs that have not changed.
const currentSelectedValue = _react.useRef(undefined);
const previousSelectedValue = _react.useRef(undefined);
_react.useEffect(()=>{
previousSelectedValue.current = currentSelectedValue.current;
currentSelectedValue.current = selectedValue;
}, [
selectedValue
]);
const onSelect = (0, _reactutilities.useEventCallback)((event, data)=>{
setSelectedValue(data.value);
onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);
});
const registeredTabs = _react.useRef({});
const onRegister = (0, _reactutilities.useEventCallback)((data)=>{
registeredTabs.current[JSON.stringify(data.value)] = data;
});
const onUnregister = (0, _reactutilities.useEventCallback)((data)=>{
delete registeredTabs.current[JSON.stringify(data.value)];
});
const getRegisteredTabs = _react.useCallback(()=>{
return {
selectedValue: currentSelectedValue.current,
previousSelectedValue: previousSelectedValue.current,
registeredTabs: registeredTabs.current
};
}, []);
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
role: 'tablist',
'aria-orientation': vertical ? 'vertical' : 'horizontal',
...focusAttributes,
...props
}), {
elementType: 'div'
}),
appearance,
reserveSelectedTabSpace,
disabled,
selectTabOnFocus,
selectedValue,
size,
vertical,
onRegister,
onUnregister,
onSelect,
getRegisteredTabs
};
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTabListContextValues_unstable", {
enumerable: true,
get: function() {
return useTabListContextValues_unstable;
}
});
function useTabListContextValues_unstable(state) {
const { appearance, reserveSelectedTabSpace, disabled, selectTabOnFocus, selectedValue: selectedKey, onRegister, onUnregister, onSelect, getRegisteredTabs, size, vertical } = state;
const tabList = {
appearance,
reserveSelectedTabSpace,
disabled,
selectTabOnFocus,
selectedValue: selectedKey,
onSelect,
onRegister,
onUnregister,
getRegisteredTabs,
size,
vertical
};
return {
tabList
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TabList/useTabListContextValues.tsx"],"sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues_unstable(state: TabListState): TabListContextValues {\n const {\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectTabOnFocus,\n selectedValue: selectedKey,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs,\n size,\n vertical,\n } = state;\n\n const tabList: TabListContextValue = {\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectTabOnFocus,\n selectedValue: selectedKey,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredTabs,\n size,\n vertical,\n };\n\n return { tabList };\n}\n"],"names":["useTabListContextValues_unstable","state","appearance","reserveSelectedTabSpace","disabled","selectTabOnFocus","selectedValue","selectedKey","onRegister","onUnregister","onSelect","getRegisteredTabs","size","vertical","tabList"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,iCAAiCC,KAAmB;IAClE,MAAM,EACJC,UAAU,EACVC,uBAAuB,EACvBC,QAAQ,EACRC,gBAAgB,EAChBC,eAAeC,WAAW,EAC1BC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,iBAAiB,EACjBC,IAAI,EACJC,QAAQ,EACT,GAAGZ;IAEJ,MAAMa,UAA+B;QACnCZ;QACAC;QACAC;QACAC;QACAC,eAAeC;QACfG;QACAF;QACAC;QACAE;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAQ;AACnB"}
@@ -0,0 +1,81 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
tabListClassNames: function() {
return tabListClassNames;
},
useTabListStyles_unstable: function() {
return useTabListStyles_unstable;
}
});
const _react = require("@griffel/react");
const tabListClassNames = {
root: 'fui-TabList'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Beiy3e4: "f1063pyq",
Bnnss6s: "fi64zpg",
Eh141a: "flvyvdh",
qhf8xq: "f10pi13n"
},
horizontal: {
Bt984gj: "f1q9h2pe",
Beiy3e4: "f1063pyq"
},
vertical: {
Bt984gj: "f1q9h2pe",
Beiy3e4: "f1vx9l62"
},
roundedSmall: {
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "f1eyhf9v"
},
rounded: {
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "faqewft"
}
}, {
d: [
".f22iagw{display:flex;}",
".f1063pyq{flex-direction:row;}",
".fi64zpg{flex-shrink:0;}",
".flvyvdh{flex-wrap:nowrap;}",
".f10pi13n{position:relative;}",
".f1q9h2pe{align-items:stretch;}",
".f1vx9l62{flex-direction:column;}",
[
".f1eyhf9v{gap:var(--spacingHorizontalSNudge);}",
{
p: -1
}
],
[
".faqewft{gap:var(--spacingHorizontalS);}",
{
p: -1
}
]
]
});
const useTabListStyles_unstable = (state)=>{
'use no memo';
const { appearance, vertical, size } = state;
const styles = useStyles();
const isRounded = appearance === 'subtle-circular' || appearance === 'filled-circular';
state.root.className = (0, _react.mergeClasses)(tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded), state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useTabListStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tabListClassNames = {\n root: 'fui-TabList'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'nowrap',\n position: 'relative'\n },\n horizontal: {\n alignItems: 'stretch',\n flexDirection: 'row'\n },\n vertical: {\n alignItems: 'stretch',\n flexDirection: 'column'\n },\n roundedSmall: {\n gap: tokens.spacingHorizontalSNudge\n },\n rounded: {\n gap: tokens.spacingHorizontalS\n }\n});\n/**\n * Apply styling to the TabList slots based on the state\n */ export const useTabListStyles_unstable = (state)=>{\n 'use no memo';\n const { appearance, vertical, size } = state;\n const styles = useStyles();\n const isRounded = appearance === 'subtle-circular' || appearance === 'filled-circular';\n state.root.className = mergeClasses(tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded), state.root.className);\n return state;\n};\n"],"names":["tabListClassNames","useTabListStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","Bnnss6s","Eh141a","qhf8xq","horizontal","Bt984gj","vertical","roundedSmall","i8kkvl","Belr9w4","rmohyg","rounded","d","p","state","appearance","size","styles","isRounded","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,iBAAiB;eAAjBA;;IA8BIC,yBAAyB;eAAzBA;;;uBAhCwB;AAElC,MAAMD,oBAAoB;IAC7BE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;IAAAC,YAAA;QAAAC,SAAA;QAAAL,SAAA;IAAA;IAAAM,UAAA;QAAAD,SAAA;QAAAL,SAAA;IAAA;IAAAO,cAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,SAAA;QAAAH,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAE,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAyBX,MAAMlB,4BAA6BmB,CAAAA;IAC1C;IACA,MAAM,EAAEC,UAAU,EAAET,QAAQ,EAAEU,IAAAA,EAAM,GAAGF;IACvC,MAAMG,SAASpB;IACf,MAAMqB,YAAYH,eAAe,qBAAqBA,eAAe;IACrED,MAAMlB,IAAI,CAACuB,SAAS,GAAGC,IAAAA,mBAAY,EAAC1B,kBAAkBE,IAAI,EAAEqB,OAAOrB,IAAI,EAAEU,WAAWW,OAAOX,QAAQ,GAAGW,OAAOb,UAAU,EAAEc,aAAcF,CAAAA,SAAS,UAAUC,OAAOV,YAAY,GAAGU,OAAON,OAAO,AAAPA,GAAUG,MAAMlB,IAAI,CAACuB,SAAS;IACrN,OAAOL;AACX"}