Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1,26 @@
'use client';
"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';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TabList/TabList.tsx"],"sourcesContent":["'use client';\n\nimport * 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":["React","useTabList_unstable","renderTabList_unstable","useTabListStyles_unstable","useTabListContextValues_unstable","useCustomStyleHook_unstable","TabList","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4BACK,eAAe;+BACZ,kBAAkB;wCACf,4BAA4B;yCAGrB,4BAA4B;qCACjC,kCAAkC;AAKvE,MAAMM,UAAAA,WAAAA,GAA6CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQT,+BAAAA,EAAoBO,OAAOC;IACzC,MAAME,oBAAgBP,yDAAAA,EAAiCM;QAEvDP,iDAAAA,EAA0BO;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOR,qCAAAA,EAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}

View File

@@ -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"));

View File

@@ -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 | null>;\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 TabListBaseProps = Omit<TabListProps, 'appearance' | 'size' | 'reserveSelectedTabSpace'>;\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\nexport type TabListBaseState = Omit<TabListState, 'appearance' | 'size' | 'reserveSelectedTabSpace'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,46 @@
'use client';
"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));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TabList/TabListContext.ts"],"sourcesContent":["'use client';\n\nimport { 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":["createContext","useContextSelector","tabListContextDefaultValue","appearance","reserveSelectedTabSpace","selectTabOnFocus","disabled","selectedValue","undefined","onRegister","onUnregister","onSelect","getRegisteredTabs","registeredTabs","size","vertical","TabListContext","TabListProvider","Provider","useTabListContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;kBA8BagB;;;mBAIAC;;;8BACAE;;;;sCAjCqC,mCAAmC;AAIrF,MAAMjB,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,MAAMC,qBAA+ChB,mCAAAA,EAC1DQ,WACgC;AAE3B,MAAMS,kBAAkBD,eAAeE,QAAQ,CAAC;AAChD,MAAMC,6BAA6B,CAAIC,eAC5CnB,wCAAAA,EAAmBe,gBAAgB,CAACK,MAAMnB,0BAA0B,GAAKkB,SAASC,MAAM"}

View File

@@ -0,0 +1,51 @@
"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;
},
useTabListA11yBehavior_unstable: function() {
return _useTabList.useTabListA11yBehavior_unstable;
},
useTabListBase_unstable: function() {
return _useTabList.useTabListBase_unstable;
},
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");

View File

@@ -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 TabListBaseProps,\n TabListProps,\n TabListSlots,\n TabListBaseState,\n TabListState,\n TabRegisterData,\n} from './TabList.types';\nexport { TabListContext, TabListProvider, useTabListContext_unstable } from './TabListContext';\nexport { renderTabList_unstable } from './renderTabList';\nexport { useTabList_unstable, useTabListBase_unstable, useTabListA11yBehavior_unstable } from './useTabList';\nexport { useTabListContextValues_unstable } from './useTabListContextValues';\nexport { tabListClassNames, useTabListStyles_unstable } from './useTabListStyles.styles';\n"],"names":["TabList","TabListContext","TabListProvider","useTabListContext_unstable","renderTabList_unstable","useTabList_unstable","useTabListBase_unstable","useTabListA11yBehavior_unstable","useTabListContextValues_unstable","tabListClassNames","useTabListStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;+BAAO;;;eAePC,8BAAc;;;eAAEC,+BAAe;;;eAC/BE,qCAAsB;;;eAGtBK,yCAAiB;;;eAF6BF,2CAA+B;;;eAAxDD,mCAAuB;;;eAC5CE,yDAAgC;;;eAHCL,0CAA0B;;;eAIxCO,iDAAyB;;IAF5CL;8CAAmB;;;yBAjBJ,YAAY;gCAewC,mBAAmB;+BACxD,kBAAkB;4BACqC,eAAe;yCAC5D,4BAA4B;wCAChB,4BAA4B"}

View File

@@ -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
})
});
};

View File

@@ -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 { JSXElement } from '@fluentui/react-utilities';\nimport type { TabListBaseState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListBaseState, contextValues: TabListContextValues): JSXElement => {\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":["assertSlots","TabListProvider","renderTabList_unstable","state","contextValues","root","value","tabList","children"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCACrB,4BAA4B;gCAGxB,mBAAmB;AAK5C,+BAA+B,CAACC,OAAyBC;QAC9DJ,2BAAAA,EAA0BG;IAE1B,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACJ,+BAAAA,EAAAA;YAAgBK,OAAOF,cAAcG,OAAO;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAGzE,EAAE"}

View File

@@ -0,0 +1,122 @@
'use client';
"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, {
useTabListA11yBehavior_unstable: function() {
return useTabListA11yBehavior_unstable;
},
useTabListBase_unstable: function() {
return useTabListBase_unstable;
},
useTabList_unstable: 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, size = 'medium' } = props;
const state = useTabListBase_unstable(props, ref);
const focusAttributes = useTabListA11yBehavior_unstable({
vertical: state.vertical
});
return {
...state,
root: {
...focusAttributes,
...state.root
},
appearance,
reserveSelectedTabSpace,
size
};
};
const useTabListBase_unstable = (props, ref)=>{
const { disabled = false, onTabSelect, selectTabOnFocus = false, vertical = false, selectedValue: controlledSelectedValue, defaultSelectedValue, ...rest } = props;
const innerRef = _react.useRef(null);
const [selectedValue, setSelectedValue] = (0, _reactutilities.useControllableState)({
state: controlledSelectedValue,
defaultState: 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)=>{
const key = JSON.stringify(data.value);
if (!key && process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line no-console
console.error([
`[@fluentui/react-tabs] The value "${data.value}" cannot be serialized to JSON string.`,
'Tab component requires serializable values.',
'Please provide a primitive value (string, number, boolean),',
`or a plain object/array that doesn't contain functions, symbols, or circular references.`
].join(' '));
}
registeredTabs.current[key] = 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({
ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
role: 'tablist',
'aria-orientation': vertical ? 'vertical' : 'horizontal',
...rest
}, {
elementType: 'div'
}),
disabled,
selectTabOnFocus,
selectedValue,
onRegister,
onUnregister,
onSelect,
getRegisteredTabs,
vertical
};
};
const useTabListA11yBehavior_unstable = ({ vertical })=>{
return (0, _reacttabster.useArrowNavigationGroup)({
circular: true,
axis: vertical ? 'vertical' : 'horizontal',
memorizeCurrent: false,
// eslint-disable-next-line @typescript-eslint/naming-convention
unstable_hasDefault: true
});
};

File diff suppressed because one or more lines are too long

View File

@@ -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
};
}

View File

@@ -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"],"mappings":";;;;+BAEgBA;;;;;;AAAT,0CAA0CC,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"}

View File

@@ -0,0 +1,82 @@
'use client';
"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;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useTabListStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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":["__styles","mergeClasses","tokens","tabListClassNames","root","useStyles","mc9l5x","Beiy3e4","Bnnss6s","Eh141a","qhf8xq","horizontal","Bt984gj","vertical","roundedSmall","i8kkvl","Belr9w4","rmohyg","rounded","d","p","useTabListStyles_unstable","state","appearance","size","styles","isRounded","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,iBAAiB;;;6BA8BY;eAAzBkB;;;uBAhCwB,gBAAgB;AAElD,0BAA0B;IAC7BjB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,UAAA,EAAA;QAAAC,OAAA,EAAA;QAAAL,OAAA,EAAA;IAAA;IAAAM,QAAA,EAAA;QAAAD,OAAA,EAAA;QAAAL,OAAA,EAAA;IAAA;IAAAO,YAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,mCAAmCE,KAAK,IAAG;IAClD,aAAa;IACb,MAAM,EAAEC,UAAU,EAAEV,QAAQ,EAAEW,IAAAA,EAAM,GAAGF,KAAK;IAC5C,MAAMG,MAAM,GAAGpB,SAAS,CAAC,CAAC;IAC1B,MAAMqB,SAAS,GAAGH,UAAU,KAAK,iBAAiB,IAAIA,UAAU,KAAK,iBAAiB;IACtFD,KAAK,CAAClB,IAAI,CAACuB,SAAS,GAAG1B,uBAAY,EAACE,iBAAiB,CAACC,IAAI,EAAEqB,MAAM,CAACrB,IAAI,EAAES,QAAQ,GAAGY,MAAM,CAACZ,QAAQ,GAAGY,MAAM,CAACd,UAAU,EAAEe,SAAS,KAAKF,IAAI,KAAK,OAAO,GAAGC,MAAM,CAACX,YAAY,GAAGW,MAAM,CAACP,OAAAA,AAAO,CAAC,EAAEI,KAAK,CAAClB,IAAI,CAACuB,SAAS,CAAC;IACtN,OAAOL,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,57 @@
'use client';
"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 _reacttheme = require("@fluentui/react-theme");
const tabListClassNames = {
root: 'fui-TabList'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
display: 'flex',
flexDirection: 'row',
flexShrink: 0,
flexWrap: 'nowrap',
position: 'relative'
},
horizontal: {
alignItems: 'stretch',
flexDirection: 'row'
},
vertical: {
alignItems: 'stretch',
flexDirection: 'column'
},
roundedSmall: {
gap: _reacttheme.tokens.spacingHorizontalSNudge
},
rounded: {
gap: _reacttheme.tokens.spacingHorizontalS
}
});
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;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TabList/useTabListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n root: 'fui-TabList',\n};\n\n/**\n * Styles for the root slot\n */\nconst 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/**\n * Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n 'use no memo';\n\n const { appearance, vertical, size } = state;\n\n const styles = useStyles();\n\n const isRounded = appearance === 'subtle-circular' || appearance === 'filled-circular';\n\n state.root.className = mergeClasses(\n tabListClassNames.root,\n styles.root,\n vertical ? styles.vertical : styles.horizontal,\n isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded),\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tabListClassNames","root","useStyles","display","flexDirection","flexShrink","flexWrap","position","horizontal","alignItems","vertical","roundedSmall","gap","spacingHorizontalSNudge","rounded","spacingHorizontalS","useTabListStyles_unstable","state","appearance","size","styles","isRounded","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,iBAAAA;;;6BAkCAgB;eAAAA;;;uBAtC4B,iBAAiB;4BACnC,wBAAwB;AAGxC,0BAAwD;IAC7Df,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,UAAU;QACVC,UAAU;IACZ;IACAC,YAAY;QACVC,YAAY;QACZL,eAAe;IACjB;IACAM,UAAU;QACRD,YAAY;QACZL,eAAe;IACjB;IACAO,cAAc;QACZC,KAAKb,kBAAAA,CAAOc,uBAAuB;IACrC;IACAC,SAAS;QACPF,KAAKb,kBAAAA,CAAOgB,kBAAkB;IAChC;AACF;AAKO,kCAAkC,CAACE;IACxC;IAEA,MAAM,EAAEC,UAAU,EAAER,QAAQ,EAAES,IAAI,EAAE,GAAGF;IAEvC,MAAMG,SAASlB;IAEf,MAAMmB,YAAYH,eAAe,qBAAqBA,eAAe;IAErED,MAAMhB,IAAI,CAACqB,SAAS,OAAGxB,mBAAAA,EACrBE,kBAAkBC,IAAI,EACtBmB,OAAOnB,IAAI,EACXS,WAAWU,OAAOV,QAAQ,GAAGU,OAAOZ,UAAU,EAC9Ca,aAAcF,CAAAA,SAAS,UAAUC,OAAOT,YAAY,GAAGS,OAAON,OAAAA,AAAM,GACpEG,MAAMhB,IAAI,CAACqB,SAAS;IAGtB,OAAOL;AACT,EAAE"}