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,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "NavSubItem", {
enumerable: true,
get: function() {
return NavSubItem;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useNavSubItem = require("./useNavSubItem");
const _renderNavSubItem = require("./renderNavSubItem");
const _useNavSubItemStylesstyles = require("./useNavSubItemStyles.styles");
const NavSubItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useNavSubItem.useNavSubItem_unstable)(props, ref);
(0, _useNavSubItemStylesstyles.useNavSubItemStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavSubItemStyles_unstable')(state);
return (0, _renderNavSubItem.renderNavSubItem_unstable)(state);
});
NavSubItem.displayName = 'NavSubItem';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSubItem/NavSubItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavSubItem_unstable } from './useNavSubItem';\nimport { renderNavSubItem_unstable } from './renderNavSubItem';\nimport { useNavSubItemStyles_unstable } from './useNavSubItemStyles.styles';\nimport type { NavSubItemProps } from './NavSubItem.types';\n\n/**\n * NavSubItem component - a sub-item within a navigation structure.\n */\nexport const NavSubItem: ForwardRefComponent<NavSubItemProps> = React.forwardRef((props, ref) => {\n const state = useNavSubItem_unstable(props, ref);\n\n useNavSubItemStyles_unstable(state);\n useCustomStyleHook_unstable('useNavSubItemStyles_unstable')(state);\n\n return renderNavSubItem_unstable(state);\n});\n\nNavSubItem.displayName = 'NavSubItem';\n"],"names":["React","useCustomStyleHook_unstable","useNavSubItem_unstable","renderNavSubItem_unstable","useNavSubItemStyles_unstable","NavSubItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;+BAEvC,kBAAkB;kCACf,qBAAqB;2CAClB,+BAA+B;AAMrE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQP,qCAAAA,EAAuBK,OAAOC;QAE5CJ,uDAAAA,EAA6BK;QAC7BR,gDAAAA,EAA4B,gCAAgCQ;IAE5D,WAAON,2CAAAA,EAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering NavSubItem
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSubItem/NavSubItem.types.ts"],"sourcesContent":["import { NavItemValue } from '../NavContext.types';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { NavDensity } from '../Nav/Nav.types';\n\nexport type NavSubItemSlots = {\n root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n};\n\n/**\n * NavSubItem Props\n */\nexport type NavSubItemProps = ComponentProps<NavSubItemSlots> & {\n href?: string;\n /**\n * The value that identifies this NavSubItem when selected.\n */\n value: NavItemValue;\n};\n\n/**\n * State used in rendering NavSubItem\n */\nexport type NavSubItemState = ComponentState<NavSubItemSlots> &\n Pick<NavSubItemProps, 'value'> & {\n /**\n * If this NavSubItem is selected\n */\n selected: boolean;\n /**\n * The density of the NavItem\n *\n * @default 'medium'\n */\n density: NavDensity;\n };\n"],"names":[],"mappings":"AAqBA;;CAEC,GACD,WAYI"}

View File

@@ -0,0 +1,31 @@
"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, {
NavSubItem: function() {
return _NavSubItem.NavSubItem;
},
navSubItemClassNames: function() {
return _useNavSubItemStylesstyles.navSubItemClassNames;
},
renderNavSubItem_unstable: function() {
return _renderNavSubItem.renderNavSubItem_unstable;
},
useNavSubItemStyles_unstable: function() {
return _useNavSubItemStylesstyles.useNavSubItemStyles_unstable;
},
useNavSubItem_unstable: function() {
return _useNavSubItem.useNavSubItem_unstable;
}
});
const _NavSubItem = require("./NavSubItem");
const _renderNavSubItem = require("./renderNavSubItem");
const _useNavSubItem = require("./useNavSubItem");
const _useNavSubItemStylesstyles = require("./useNavSubItemStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSubItem/index.ts"],"sourcesContent":["export { NavSubItem } from './NavSubItem';\nexport type { NavSubItemSlots, NavSubItemProps, NavSubItemState } from './NavSubItem.types';\nexport { renderNavSubItem_unstable } from './renderNavSubItem';\nexport { useNavSubItem_unstable } from './useNavSubItem';\nexport { useNavSubItemStyles_unstable, navSubItemClassNames } from './useNavSubItemStyles.styles';\n"],"names":["NavSubItem","renderNavSubItem_unstable","useNavSubItem_unstable","useNavSubItemStyles_unstable","navSubItemClassNames"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAIoBI,+CAAoB;;;eAFlDH,2CAAyB;;;eAEzBE,uDAA4B;;;eAD5BD,qCAAsB;;;4BAHJ,eAAe;kCAEA,qBAAqB;+BACxB,kBAAkB;2CACU,+BAA+B"}

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderNavSubItem_unstable", {
enumerable: true,
get: function() {
return renderNavSubItem_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderNavSubItem_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSubItem/renderNavSubItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { NavSubItemState, NavSubItemSlots } from './NavSubItem.types';\n\n/**\n * Render the final JSX of NavSubItem\n */\nexport const renderNavSubItem_unstable = (state: NavSubItemState): JSXElement => {\n assertSlots<NavSubItemSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderNavSubItem_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAQjD,MAAMC,4BAA4B,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,73 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useNavSubItem_unstable", {
enumerable: true,
get: function() {
return useNavSubItem_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reactaria = require("@fluentui/react-aria");
const _NavContext = require("../NavContext");
const _NavCategoryContext = require("../NavCategoryContext");
const useNavSubItem_unstable = (props, ref)=>{
const { onClick, value: subItemValue, as, href } = props;
const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = (0, _NavContext.useNavContext_unstable)();
const { value: parentCategoryValue } = (0, _NavCategoryContext.useNavCategoryContext_unstable)();
const rootElementType = as || (href ? 'a' : 'button');
const selected = selectedValue === subItemValue;
const innerRef = _react.useRef(null);
const onNavSubItemClick = (0, _reactutilities.useEventCallback)((event)=>{
onClick === null || onClick === void 0 ? void 0 : onClick(event);
if (!event.defaultPrevented && (0, _reactutilities.isHTMLElement)(event.target)) {
onSelect(event, {
type: 'click',
event,
value: subItemValue,
categoryValue: parentCategoryValue
});
}
});
const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(rootElementType, (0, _reactaria.useARIAButtonProps)(rootElementType, {
'aria-current': selected ? 'page' : 'false',
...props
})), {
elementType: rootElementType,
defaultProps: {
ref: ref,
type: rootElementType
}
});
root.onClick = onNavSubItemClick;
_react.useEffect(()=>{
onRegister({
value: subItemValue,
ref: innerRef
});
return ()=>{
onUnregister({
value: subItemValue,
ref: innerRef
});
};
}, [
onRegister,
onUnregister,
innerRef,
subItemValue
]);
return {
components: {
root: rootElementType
},
root,
selected,
value: subItemValue,
density
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSubItem/useNavSubItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useNavContext_unstable } from '../NavContext';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { NavSubItemProps, NavSubItemState } from './NavSubItem.types';\n\n/**\n * Create the state required to render NavSubItem.\n *\n * The returned state can be modified with hooks such as useNavSubItemStyles_unstable,\n * before being passed to renderNavSubItem_unstable.\n *\n * @param props - props from this instance of NavSubItem\n * @param ref - reference to root HTMLButtonElement of NavSubItem\n */\nexport const useNavSubItem_unstable = (\n props: NavSubItemProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavSubItemState => {\n const { onClick, value: subItemValue, as, href } = props;\n\n const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = useNavContext_unstable();\n\n const { value: parentCategoryValue } = useNavCategoryContext_unstable();\n\n const rootElementType = as || (href ? 'a' : 'button');\n\n const selected = selectedValue === subItemValue;\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const onNavSubItemClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n onClick?.(event);\n\n if (!event.defaultPrevented && isHTMLElement(event.target)) {\n onSelect(event, { type: 'click', event, value: subItemValue, categoryValue: parentCategoryValue });\n }\n });\n\n const root = slot.always<ARIAButtonSlotProps<'a'>>(\n getIntrinsicElementProps(\n rootElementType,\n useARIAButtonProps(rootElementType, {\n 'aria-current': selected ? 'page' : 'false',\n ...props,\n }),\n ),\n {\n elementType: rootElementType,\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n type: rootElementType,\n },\n },\n );\n\n root.onClick = onNavSubItemClick;\n\n React.useEffect(() => {\n onRegister({\n value: subItemValue,\n ref: innerRef,\n });\n\n return () => {\n onUnregister({ value: subItemValue, ref: innerRef });\n };\n }, [onRegister, onUnregister, innerRef, subItemValue]);\n\n return {\n components: {\n root: rootElementType,\n },\n root,\n selected,\n value: subItemValue,\n density,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","isHTMLElement","useARIAButtonProps","useNavContext_unstable","useNavCategoryContext_unstable","useNavSubItem_unstable","props","ref","onClick","value","subItemValue","as","href","selectedValue","onRegister","onUnregister","onSelect","density","parentCategoryValue","rootElementType","selected","innerRef","useRef","onNavSubItemClick","event","defaultPrevented","target","type","categoryValue","root","always","elementType","defaultProps","useEffect","components"],"mappings":"AAAA;;;;;+BAoBaQ;;;;;;;iEAlBU,QAAQ;gCACiD,4BAA4B;2BACzE,uBAAuB;4BACnB,gBAAgB;oCACR,wBAAwB;AAchE,+BAA+B,CACpCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,OAAOC,YAAY,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGN;IAEnD,MAAM,EAAEO,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,EAAE,OAAGd,kCAAAA;IAElF,MAAM,EAAEM,OAAOS,mBAAmB,EAAE,OAAGd,kDAAAA;IAEvC,MAAMe,kBAAkBR,MAAOC,QAAO,MAAM,QAAA,CAAO;IAEnD,MAAMQ,WAAWP,kBAAkBH;IAEnC,MAAMW,WAAWxB,OAAMyB,MAAM,CAAc;IAE3C,MAAMC,wBAAyDvB,gCAAAA,EAAiBwB,CAAAA;QAC9EhB,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUgB;QAEV,IAAI,CAACA,MAAMC,gBAAgB,QAAIxB,6BAAAA,EAAcuB,MAAME,MAAM,GAAG;YAC1DV,SAASQ,OAAO;gBAAEG,MAAM;gBAASH;gBAAOf,OAAOC;gBAAckB,eAAeV;YAAoB;QAClG;IACF;IAEA,MAAMW,OAAO9B,oBAAAA,CAAK+B,MAAM,KACtBhC,wCAAAA,EACEqB,qBACAjB,6BAAAA,EAAmBiB,iBAAiB;QAClC,gBAAgBC,WAAW,SAAS;QACpC,GAAGd,KAAK;IACV,KAEF;QACEyB,aAAaZ;QACba,cAAc;YACZzB,KAAKA;YACLoB,MAAMR;QACR;IACF;IAGFU,KAAKrB,OAAO,GAAGe;IAEf1B,OAAMoC,SAAS,CAAC;QACdnB,WAAW;YACTL,OAAOC;YACPH,KAAKc;QACP;QAEA,OAAO;YACLN,aAAa;gBAAEN,OAAOC;gBAAcH,KAAKc;YAAS;QACpD;IACF,GAAG;QAACP;QAAYC;QAAcM;QAAUX;KAAa;IAErD,OAAO;QACLwB,YAAY;YACVL,MAAMV;QACR;QACAU;QACAT;QACAX,OAAOC;QACPO;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,55 @@
'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, {
navSubItemClassNames: function() {
return navSubItemClassNames;
},
useNavSubItemStyles_unstable: function() {
return useNavSubItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
const navSubItemClassNames = {
root: 'fui-NavSubItem'
};
/**
* Styles for the content slot (children)
*/ const useNavSubItemSpecificStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
B1hrpyx: "fqo71ku"
},
smallBase: {
B1hrpyx: "f17f9sv1"
},
selectedIndicator: {
rjyhj6: "f1f74g36"
}
}, {
d: [
".fqo71ku{-webkit-padding-start:46px;padding-inline-start:46px;}",
".f17f9sv1{-webkit-padding-start:40px;padding-inline-start:40px;}",
".f1f74g36::after{-webkit-margin-start:-52px;margin-inline-start:-52px;}"
]
});
const useNavSubItemStyles_unstable = (state)=>{
'use no memo';
const rootDefaultClassName = (0, _sharedNavStylesstyles.useRootDefaultClassName)();
const smallStyles = (0, _sharedNavStylesstyles.useSmallStyles)();
const contentStyles = (0, _sharedNavStylesstyles.useContentStyles)();
const indicatorStyles = (0, _sharedNavStylesstyles.useIndicatorStyles)();
const navSubItemSpecificStyles = useNavSubItemSpecificStyles();
const { selected, density } = state;
const isSmallDensity = density === 'small';
state.root.className = (0, _react.mergeClasses)(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useNavSubItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navSubItemClassNames = {\n root: 'fui-NavSubItem'\n};\n/**\n * Styles for the content slot (children)\n */ const useNavSubItemSpecificStyles = makeStyles({\n base: {\n paddingInlineStart: '46px'\n },\n smallBase: {\n paddingInlineStart: '40px'\n },\n selectedIndicator: {\n '::after': {\n marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`\n }\n }\n});\n/**\n * Apply styling to the NavSubItem slots based on the state\n */ export const useNavSubItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootDefaultClassName = useRootDefaultClassName();\n const smallStyles = useSmallStyles();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n const { selected, density } = state;\n const isSmallDensity = density === 'small';\n state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","B1hrpyx","smallBase","selectedIndicator","rjyhj6","d","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCO,oBAAoB;;;gCAoBY;eAA5BS;;;uBAtBwB,gBAAgB;uCACoD,2BAA2B;AACjI,6BAA6B;IAChCR,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,2BAA2B,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAU,IAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,SAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;IAAAE,iBAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAYvC,CAAC;AAGS,qCAAsCE,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,oBAAoB,OAAGb,8CAAuB,CAAC,CAAC;IACtD,MAAMc,WAAW,OAAGb,qCAAc,CAAC,CAAC;IACpC,MAAMc,aAAa,OAAGjB,uCAAgB,CAAC,CAAC;IACxC,MAAMkB,eAAe,GAAGjB,6CAAkB,CAAC,CAAC;IAC5C,MAAMkB,wBAAwB,GAAGb,2BAA2B,CAAC,CAAC;IAC9D,MAAM,EAAEc,QAAQ,EAAEC,OAAAA,EAAS,GAAGP,KAAK;IACnC,MAAMQ,cAAc,GAAGD,OAAO,KAAK,OAAO;IAC1CP,KAAK,CAACT,IAAI,CAACkB,SAAS,OAAGzB,mBAAY,EAACM,oBAAoB,CAACC,IAAI,EAAEU,oBAAoB,EAAEO,cAAc,IAAIN,WAAW,CAACX,IAAI,EAAEiB,cAAc,IAAIH,wBAAwB,CAACV,SAAS,EAAEU,wBAAwB,CAACZ,IAAI,EAAEa,QAAQ,IAAIF,eAAe,CAACX,IAAI,EAAEa,QAAQ,IAAIH,aAAa,CAACG,QAAQ,EAAEA,QAAQ,IAAID,wBAAwB,CAACT,iBAAiB,EAAEI,KAAK,CAACT,IAAI,CAACkB,SAAS,CAAC;IACjW,OAAOT,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,51 @@
'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, {
navSubItemClassNames: function() {
return navSubItemClassNames;
},
useNavSubItemStyles_unstable: function() {
return useNavSubItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
const navSubItemClassNames = {
root: 'fui-NavSubItem'
};
/**
* Styles for the content slot (children)
*/ const useNavSubItemSpecificStyles = (0, _react.makeStyles)({
base: {
paddingInlineStart: '46px'
},
smallBase: {
paddingInlineStart: '40px'
},
selectedIndicator: {
'::after': {
marginInlineStart: `-${_sharedNavStylesstyles.navItemTokens.indicatorOffset + 36}px`
}
}
});
const useNavSubItemStyles_unstable = (state)=>{
'use no memo';
const rootDefaultClassName = (0, _sharedNavStylesstyles.useRootDefaultClassName)();
const smallStyles = (0, _sharedNavStylesstyles.useSmallStyles)();
const contentStyles = (0, _sharedNavStylesstyles.useContentStyles)();
const indicatorStyles = (0, _sharedNavStylesstyles.useIndicatorStyles)();
const navSubItemSpecificStyles = useNavSubItemSpecificStyles();
const { selected, density } = state;
const isSmallDensity = density === 'small';
state.root.className = (0, _react.mergeClasses)(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSubItem/useNavSubItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport {\n navItemTokens,\n useContentStyles,\n useIndicatorStyles,\n useRootDefaultClassName,\n useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemSlots, NavSubItemState } from './NavSubItem.types';\n\nexport const navSubItemClassNames: SlotClassNames<NavSubItemSlots> = {\n root: 'fui-NavSubItem',\n};\n/**\n * Styles for the content slot (children)\n */\nconst useNavSubItemSpecificStyles = makeStyles({\n base: {\n paddingInlineStart: '46px',\n },\n smallBase: {\n paddingInlineStart: '40px',\n },\n selectedIndicator: {\n '::after': {\n marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`,\n },\n },\n});\n\n/**\n * Apply styling to the NavSubItem slots based on the state\n */\nexport const useNavSubItemStyles_unstable = (state: NavSubItemState): NavSubItemState => {\n 'use no memo';\n\n const rootDefaultClassName = useRootDefaultClassName();\n const smallStyles = useSmallStyles();\n const contentStyles = useContentStyles();\n const indicatorStyles = useIndicatorStyles();\n const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n\n const { selected, density } = state;\n const isSmallDensity = density === 'small';\n\n state.root.className = mergeClasses(\n navSubItemClassNames.root,\n rootDefaultClassName,\n isSmallDensity && smallStyles.root,\n isSmallDensity && navSubItemSpecificStyles.smallBase,\n navSubItemSpecificStyles.base,\n selected && indicatorStyles.base,\n selected && contentStyles.selected,\n selected && navSubItemSpecificStyles.selectedIndicator,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","paddingInlineStart","smallBase","selectedIndicator","marginInlineStart","indicatorOffset","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"mappings":"AAAA;;;;;;;;;;;;IAcaO,oBAAAA;;;gCAuBAS;eAAAA;;;uBAnC4B,iBAAiB;uCAOnD,4BAA4B;AAK5B,6BAA8D;IACnER,MAAM;AACR,EAAE;AACF;;CAEC,GACD,MAAMC,kCAA8BT,iBAAAA,EAAW;IAC7CU,MAAM;QACJC,oBAAoB;IACtB;IACAC,WAAW;QACTD,oBAAoB;IACtB;IACAE,mBAAmB;QACjB,WAAW;YACTC,mBAAmB,CAAC,CAAC,EAAEZ,oCAAAA,CAAca,eAAe,GAAG,GAAG,EAAE,CAAC;QAC/D;IACF;AACF;AAKO,qCAAqC,CAACE;IAC3C;IAEA,MAAMC,2BAAuBb,8CAAAA;IAC7B,MAAMc,kBAAcb,qCAAAA;IACpB,MAAMc,oBAAgBjB,uCAAAA;IACtB,MAAMkB,sBAAkBjB,yCAAAA;IACxB,MAAMkB,2BAA2Bb;IAEjC,MAAM,EAAEc,QAAQ,EAAEC,OAAO,EAAE,GAAGP;IAC9B,MAAMQ,iBAAiBD,YAAY;IAEnCP,MAAMT,IAAI,CAACkB,SAAS,OAAGzB,mBAAAA,EACrBM,qBAAqBC,IAAI,EACzBU,sBACAO,kBAAkBN,YAAYX,IAAI,EAClCiB,kBAAkBH,yBAAyBV,SAAS,EACpDU,yBAAyBZ,IAAI,EAC7Ba,YAAYF,gBAAgBX,IAAI,EAChCa,YAAYH,cAAcG,QAAQ,EAClCA,YAAYD,yBAAyBT,iBAAiB,EACtDI,MAAMT,IAAI,CAACkB,SAAS;IAGtB,OAAOT;AACT,EAAE"}