@fluentui/react-nav 0.0.0-nightly-20250612-0406.1

package/lib-commonjs/components/NavItem/NavItem.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "NavItem", {
+    enumerable: true,
+    get: function() {
+        return NavItem;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useNavItem = require("./useNavItem");
+const _renderNavItem = require("./renderNavItem");
+const _useNavItemStylesstyles = require("./useNavItemStyles.styles");
+const NavItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useNavItem.useNavItem_unstable)(props, ref);
+    (0, _useNavItemStylesstyles.useNavItemStyles_unstable)(state);
+    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+    // useCustomStyleHook_unstable('useNavItemStyles_unstable')(state);
+    return (0, _renderNavItem.renderNavItem_unstable)(state);
+});
+NavItem.displayName = 'NavItem';

package/lib-commonjs/components/NavItem/NavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavItem/NavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useNavItem_unstable } from './useNavItem';\nimport { renderNavItem_unstable } from './renderNavItem';\nimport { useNavItemStyles_unstable } from './useNavItemStyles.styles';\nimport type { NavItemProps } from './NavItem.types';\n\n/**\n * NavItem component - TODO: add more docs\n */\nexport const NavItem: ForwardRefComponent<NavItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavItem_unstable(props, ref);\n\n  useNavItemStyles_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useNavItemStyles_unstable')(state);\n  return renderNavItem_unstable(state);\n});\n\nNavItem.displayName = 'NavItem';\n"],"names":["NavItem","React","forwardRef","props","ref","state","useNavItem_unstable","useNavItemStyles_unstable","renderNavItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;4BAGa;+BACG;wCACG;AAMnC,MAAMA,UAAAA,WAAAA,GAA6CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAoBH,OAAOC;IAEzCG,IAAAA,iDAAAA,EAA0BF;IAC1B,8HAA8H;IAC9H,wGAAwG;IACxG,mEAAmE;IACnE,OAAOG,IAAAA,qCAAAA,EAAuBH;AAChC;AAEAL,QAAQS,WAAW,GAAG"}

package/lib-commonjs/components/NavItem/NavItem.types.js

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

package/lib-commonjs/components/NavItem/NavItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavItem/NavItem.types.ts"],"sourcesContent":["import { NavItemValue } from '../NavContext.types';\nimport { NavDensity } from '../Nav/Nav.types';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type NavItemSlots = {\n  /**\n   * The root element of the NavItem.\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n\n  /**\n   * Icon that renders before the content.\n   */\n  icon?: Slot<'span'>;\n};\n\n/**\n * NavItem Props\n */\nexport type NavItemProps = ComponentProps<NavItemSlots> & {\n  /**\n   * Destination where the nav item points to.\n   */\n  href?: string;\n  /**\n   * The value that identifies this navCategoryItem when selected.\n   */\n  value: NavItemValue;\n};\n\n/**\n * State used in rendering NavItem\n */\nexport type NavItemState = ComponentState<NavItemSlots> &\n  Pick<NavItemProps, 'value'> & {\n    /**\n     * If this navCategoryItem is selected\n     */\n    selected: boolean;\n\n    /**\n     * The density of the NavItem\n     *\n     * @default 'medium'\n     */\n    density: NavDensity;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA+BA;;CAEC"}

package/lib-commonjs/components/NavItem/index.js

@@ -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, {
+    NavItem: function() {
+        return _NavItem.NavItem;
+    },
+    navItemClassNames: function() {
+        return _useNavItemStylesstyles.navItemClassNames;
+    },
+    renderNavItem_unstable: function() {
+        return _renderNavItem.renderNavItem_unstable;
+    },
+    useNavItemStyles_unstable: function() {
+        return _useNavItemStylesstyles.useNavItemStyles_unstable;
+    },
+    useNavItem_unstable: function() {
+        return _useNavItem.useNavItem_unstable;
+    }
+});
+const _NavItem = require("./NavItem");
+const _renderNavItem = require("./renderNavItem");
+const _useNavItem = require("./useNavItem");
+const _useNavItemStylesstyles = require("./useNavItemStyles.styles");

package/lib-commonjs/components/NavItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavItem/index.ts"],"sourcesContent":["export { NavItem } from './NavItem';\nexport type { NavItemSlots, NavItemProps, NavItemState } from './NavItem.types';\nexport { renderNavItem_unstable } from './renderNavItem';\nexport { useNavItem_unstable } from './useNavItem';\nexport { useNavItemStyles_unstable, navItemClassNames } from './useNavItemStyles.styles';\n"],"names":["NavItem","navItemClassNames","renderNavItem_unstable","useNavItemStyles_unstable","useNavItem_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,OAAO;eAAPA,gBAAO;;IAIoBC,iBAAiB;eAAjBA,yCAAiB;;IAF5CC,sBAAsB;eAAtBA,qCAAsB;;IAEtBC,yBAAyB;eAAzBA,iDAAyB;;IADzBC,mBAAmB;eAAnBA,+BAAmB;;;yBAHJ;+BAEe;4BACH;wCACyB"}

package/lib-commonjs/components/NavItem/renderNavItem.js

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

package/lib-commonjs/components/NavItem/renderNavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavItem/renderNavItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { NavItemState, NavItemSlots } from './NavItem.types';\n\n/**\n * Render the final JSX of NavItem\n */\nexport const renderNavItem_unstable = (state: NavItemState) => {\n  assertSlots<NavItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {state.root.children}\n    </state.root>\n  );\n};\n"],"names":["renderNavItem_unstable","state","assertSlots","_jsxs","root","icon","_jsx","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;AAOrB,MAAMA,yBAAyB,CAACC;IACrCC,IAAAA,2BAAAA,EAA0BD;IAE1B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,IAAI,EAAA,CAAA;YACzBJ,MAAMG,IAAI,CAACG,QAAQ;;;AAG1B"}

package/lib-commonjs/components/NavItem/useNavItem.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useNavItem_unstable", {
+    enumerable: true,
+    get: function() {
+        return useNavItem_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 useNavItem_unstable = (props, ref)=>{
+    const { onClick, value, icon, as, href } = props;
+    const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = (0, _NavContext.useNavContext_unstable)();
+    const rootElementType = as || (href ? 'a' : 'button');
+    const selected = selectedValue === value;
+    const innerRef = _react.useRef(null);
+    const onNavItemClick = (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
+            });
+        }
+    });
+    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 = onNavItemClick;
+    _react.useEffect(()=>{
+        onRegister({
+            value,
+            ref: innerRef
+        });
+        return ()=>{
+            onUnregister({
+                value,
+                ref: innerRef
+            });
+        };
+    }, [
+        onRegister,
+        onUnregister,
+        innerRef,
+        value
+    ]);
+    return {
+        components: {
+            root: rootElementType,
+            icon: 'span'
+        },
+        root,
+        icon: _reactutilities.slot.optional(icon, {
+            elementType: 'span'
+        }),
+        selected,
+        value,
+        density
+    };
+};

package/lib-commonjs/components/NavItem/useNavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavItem/useNavItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useNavContext_unstable } from '../NavContext';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { NavItemProps, NavItemState } from './NavItem.types';\n\n/**\n * Create the state required to render NavItem.\n *\n * The returned state can be modified with hooks such as useNavItemStyles_unstable,\n * before being passed to renderNavItem_unstable.\n *\n * @param props - props from this instance of NavItem\n * @param ref - reference to root HTMLAnchorElement of NavItem\n */\nexport const useNavItem_unstable = (\n  props: NavItemProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavItemState => {\n  const { onClick, value, icon, as, href } = props;\n\n  const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = useNavContext_unstable();\n\n  const rootElementType = as || (href ? 'a' : 'button');\n\n  const selected = selectedValue === value;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const onNavItemClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      onSelect(event, { type: 'click', event, value });\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 = onNavItemClick;\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  return {\n    components: { root: rootElementType, icon: 'span' },\n    root,\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    selected,\n    value,\n    density,\n  };\n};\n"],"names":["useNavItem_unstable","props","ref","onClick","value","icon","as","href","selectedValue","onRegister","onUnregister","onSelect","density","useNavContext_unstable","rootElementType","selected","innerRef","React","useRef","onNavItemClick","useEventCallback","event","defaultPrevented","isHTMLElement","target","type","root","slot","always","getIntrinsicElementProps","useARIAButtonProps","elementType","defaultProps","useEffect","components","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;;iEAjBU;gCACyD;2BAC7C;4BACI;AAchC,MAAMA,sBAAsB,CACjCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,IAAI,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGN;IAE3C,MAAM,EAAEO,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,EAAE,GAAGC,IAAAA,kCAAAA;IAElF,MAAMC,kBAAkBR,MAAOC,CAAAA,OAAO,MAAM,QAAA;IAE5C,MAAMQ,WAAWP,kBAAkBJ;IAEnC,MAAMY,WAAWC,OAAMC,MAAM,CAAc;IAE3C,MAAMC,iBAAsDC,IAAAA,gCAAAA,EAAiBC,CAAAA;QAC3ElB,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUkB;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIC,IAAAA,6BAAAA,EAAcF,MAAMG,MAAM,GAAG;YAC1Db,SAASU,OAAO;gBAAEI,MAAM;gBAASJ;gBAAOjB;YAAM;QAChD;IACF;IAEA,MAAMsB,OAAOC,oBAAAA,CAAKC,MAAM,CACtBC,IAAAA,wCAAAA,EACEf,iBACAgB,IAAAA,6BAAAA,EAAmBhB,iBAAiB;QAClC,gBAAgBC,WAAW,SAAS;QACpC,GAAGd,KAAK;IACV,KAEF;QACE8B,aAAajB;QACbkB,cAAc;YACZ9B,KAAKA;YACLuB,MAAMX;QACR;IACF;IAGFY,KAAKvB,OAAO,GAAGgB;IAEfF,OAAMgB,SAAS,CAAC;QACdxB,WAAW;YACTL;YACAF,KAAKc;QACP;QAEA,OAAO;YACLN,aAAa;gBAAEN;gBAAOF,KAAKc;YAAS;QACtC;IACF,GAAG;QAACP;QAAYC;QAAcM;QAAUZ;KAAM;IAE9C,OAAO;QACL8B,YAAY;YAAER,MAAMZ;YAAiBT,MAAM;QAAO;QAClDqB;QACArB,MAAMsB,oBAAAA,CAAKQ,QAAQ,CAAC9B,MAAM;YACxB0B,aAAa;QACf;QACAhB;QACAX;QACAQ;IACF;AACF"}

package/lib-commonjs/components/NavItem/useNavItemStyles.styles.js

@@ -0,0 +1,38 @@
+"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, {
+    navItemClassNames: function() {
+        return navItemClassNames;
+    },
+    useNavItemStyles_unstable: function() {
+        return useNavItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
+const navItemClassNames = {
+    root: 'fui-NavItem',
+    icon: 'fui-NavItem__icon'
+};
+const useNavItemStyles_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 iconStyles = (0, _sharedNavStylesstyles.useIconStyles)();
+    const { selected, density } = state;
+    state.root.className = (0, _react.mergeClasses)(navItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, selected && indicatorStyles.base, selected && contentStyles.selected, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(navItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);
+    }
+    return state;
+};

package/lib-commonjs/components/NavItem/useNavItemStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useNavItemStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navItemClassNames = {\n    root: 'fui-NavItem',\n    icon: 'fui-NavItem__icon'\n};\n/**\n * Apply styling to the NavItem slots based on the state\n */ export const useNavItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const smallStyles = useSmallStyles();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const { selected, density } = state;\n    state.root.className = mergeClasses(navItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, selected && indicatorStyles.base, selected && contentStyles.selected, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(navItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n    }\n    return state;\n};\n"],"names":["navItemClassNames","useNavItemStyles_unstable","root","icon","state","rootDefaultClassName","useRootDefaultClassName","smallStyles","useSmallStyles","contentStyles","useContentStyles","indicatorStyles","useIndicatorStyles","iconStyles","useIconStyles","selected","density","className","mergeClasses","base"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,iBAAiB;eAAjBA;;IAMIC,yBAAyB;eAAzBA;;;uBARY;uCACgF;AACtG,MAAMD,oBAAoB;IAC7BE,MAAM;IACNC,MAAM;AACV;AAGW,MAAMF,4BAA6BG,CAAAA;IAC1C;IACA,MAAMC,uBAAuBC,IAAAA,8CAAuB;IACpD,MAAMC,cAAcC,IAAAA,qCAAc;IAClC,MAAMC,gBAAgBC,IAAAA,uCAAgB;IACtC,MAAMC,kBAAkBC,IAAAA,yCAAkB;IAC1C,MAAMC,aAAaC,IAAAA,oCAAa;IAChC,MAAM,EAAEC,QAAQ,EAAEC,OAAAA,EAAS,GAAGZ;IAC9BA,MAAMF,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,kBAAkBE,IAAI,EAAEG,sBAAsBW,YAAY,WAAWT,YAAYL,IAAI,EAAEa,YAAYJ,gBAAgBQ,IAAI,EAAEJ,YAAYN,cAAcM,QAAQ,EAAEX,MAAMF,IAAI,CAACe,SAAS;IACrN,IAAIb,MAAMD,IAAI,EAAE;QACZC,MAAMD,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,kBAAkBG,IAAI,EAAEU,WAAWM,IAAI,EAAEJ,YAAYF,WAAWE,QAAQ,EAAEX,MAAMD,IAAI,CAACc,SAAS;IACtI;IACA,OAAOb;AACX"}

package/lib-commonjs/components/NavSectionHeader/NavSectionHeader.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "NavSectionHeader", {
+    enumerable: true,
+    get: function() {
+        return NavSectionHeader;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useNavSectionHeader = require("./useNavSectionHeader");
+const _renderNavSectionHeader = require("./renderNavSectionHeader");
+const _useNavSectionHeaderStylesstyles = require("./useNavSectionHeaderStyles.styles");
+const NavSectionHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useNavSectionHeader.useNavSectionHeader_unstable)(props, ref);
+    (0, _useNavSectionHeaderStylesstyles.useNavSectionHeaderStyles_unstable)(state);
+    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+    // useCustomStyleHook_unstable('useNavSectionHeaderStyles_unstable')(state);
+    return (0, _renderNavSectionHeader.renderNavSectionHeader_unstable)(state);
+});
+NavSectionHeader.displayName = 'NavSectionHeader';

package/lib-commonjs/components/NavSectionHeader/NavSectionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSectionHeader/NavSectionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useNavSectionHeader_unstable } from './useNavSectionHeader';\nimport { renderNavSectionHeader_unstable } from './renderNavSectionHeader';\nimport { useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';\nimport type { NavSectionHeaderProps } from './NavSectionHeader.types';\n\n/**\n * NavSectionHeader component\n */\nexport const NavSectionHeader: ForwardRefComponent<NavSectionHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useNavSectionHeader_unstable(props, ref);\n\n  useNavSectionHeaderStyles_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useNavSectionHeaderStyles_unstable')(state);\n  return renderNavSectionHeader_unstable(state);\n});\n\nNavSectionHeader.displayName = 'NavSectionHeader';\n"],"names":["NavSectionHeader","React","forwardRef","props","ref","state","useNavSectionHeader_unstable","useNavSectionHeaderStyles_unstable","renderNavSectionHeader_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;qCAEsB;wCACG;iDACG;AAM5C,MAAMA,mBAAAA,WAAAA,GAA+DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQC,IAAAA,iDAAAA,EAA6BH,OAAOC;IAElDG,IAAAA,mEAAAA,EAAmCF;IACnC,8HAA8H;IAC9H,wGAAwG;IACxG,4EAA4E;IAC5E,OAAOG,IAAAA,uDAAAA,EAAgCH;AACzC;AAEAL,iBAAiBS,WAAW,GAAG"}

package/lib-commonjs/components/NavSectionHeader/NavSectionHeader.types.js

@@ -0,0 +1,8 @@
+/**
+ * State used in rendering NavSectionHeader
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+ // TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from NavSectionHeaderProps.
+ // & Required<Pick<NavSectionHeaderProps, 'propName'>>

package/lib-commonjs/components/NavSectionHeader/NavSectionHeader.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSectionHeader/NavSectionHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type NavSectionHeaderSlots = {\n  root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;\n};\n\n/**\n * NavSectionHeader Props\n */\nexport type NavSectionHeaderProps = ComponentProps<NavSectionHeaderSlots>;\n\n/**\n * State used in rendering NavSectionHeader\n */\nexport type NavSectionHeaderState = ComponentState<NavSectionHeaderSlots>;\n// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from NavSectionHeaderProps.\n// & Required<Pick<NavSectionHeaderProps, 'propName'>>\n"],"names":[],"rangeMappings":";;;;;;;","mappings":"AAWA;;CAEC;;;;CAED,iIAAiI;CACjI,sDAAsD"}

package/lib-commonjs/components/NavSectionHeader/index.js

@@ -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, {
+    NavSectionHeader: function() {
+        return _NavSectionHeader.NavSectionHeader;
+    },
+    navSectionHeaderClassNames: function() {
+        return _useNavSectionHeaderStylesstyles.navSectionHeaderClassNames;
+    },
+    renderNavSectionHeader_unstable: function() {
+        return _renderNavSectionHeader.renderNavSectionHeader_unstable;
+    },
+    useNavSectionHeaderStyles_unstable: function() {
+        return _useNavSectionHeaderStylesstyles.useNavSectionHeaderStyles_unstable;
+    },
+    useNavSectionHeader_unstable: function() {
+        return _useNavSectionHeader.useNavSectionHeader_unstable;
+    }
+});
+const _NavSectionHeader = require("./NavSectionHeader");
+const _renderNavSectionHeader = require("./renderNavSectionHeader");
+const _useNavSectionHeader = require("./useNavSectionHeader");
+const _useNavSectionHeaderStylesstyles = require("./useNavSectionHeaderStyles.styles");

package/lib-commonjs/components/NavSectionHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSectionHeader/index.ts"],"sourcesContent":["export { NavSectionHeader } from './NavSectionHeader';\nexport type { NavSectionHeaderProps, NavSectionHeaderSlots, NavSectionHeaderState } from './NavSectionHeader.types';\nexport { renderNavSectionHeader_unstable } from './renderNavSectionHeader';\nexport { useNavSectionHeader_unstable } from './useNavSectionHeader';\nexport { navSectionHeaderClassNames, useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';\n"],"names":["NavSectionHeader","navSectionHeaderClassNames","renderNavSectionHeader_unstable","useNavSectionHeaderStyles_unstable","useNavSectionHeader_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,gBAAgB;eAAhBA,kCAAgB;;IAIhBC,0BAA0B;eAA1BA,2DAA0B;;IAF1BC,+BAA+B;eAA/BA,uDAA+B;;IAEHC,kCAAkC;eAAlCA,mEAAkC;;IAD9DC,4BAA4B;eAA5BA,iDAA4B;;;kCAHJ;wCAEe;qCACH;iDACkC"}

package/lib-commonjs/components/NavSectionHeader/renderNavSectionHeader.js

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

package/lib-commonjs/components/NavSectionHeader/renderNavSectionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSectionHeader/renderNavSectionHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderState, NavSectionHeaderSlots } from './NavSectionHeader.types';\n\n/**\n * Render the final JSX of NavSectionHeader\n */\nexport const renderNavSectionHeader_unstable = (state: NavSectionHeaderState) => {\n  assertSlots<NavSectionHeaderSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["renderNavSectionHeader_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,kCAAkC,CAACC;IAC9CC,IAAAA,2BAAAA,EAAmCD;IAEnC,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}

package/lib-commonjs/components/NavSectionHeader/useNavSectionHeader.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useNavSectionHeader_unstable", {
+    enumerable: true,
+    get: function() {
+        return useNavSectionHeader_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 useNavSectionHeader_unstable = (props, ref)=>{
+    return {
+        components: {
+            root: 'h3'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('h3', {
+            ref,
+            ...props
+        }), {
+            elementType: 'h3'
+        })
+    };
+};

package/lib-commonjs/components/NavSectionHeader/useNavSectionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSectionHeader/useNavSectionHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderProps, NavSectionHeaderState } from './NavSectionHeader.types';\n\n/**\n * Create the state required to render NavSectionHeader.\n *\n * The returned state can be modified with hooks such as useNavSectionHeaderStyles_unstable,\n * before being passed to renderNavSectionHeader_unstable.\n *\n * @param props - props from this instance of NavSectionHeader\n * @param ref - reference to root HTMLDivElement of NavSectionHeader\n */\nexport const useNavSectionHeader_unstable = (\n  props: NavSectionHeaderProps,\n  ref: React.Ref<HTMLDivElement>,\n): NavSectionHeaderState => {\n  return {\n    components: {\n      root: 'h3',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('h3', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'h3' },\n    ),\n  };\n};\n"],"names":["useNavSectionHeader_unstable","props","ref","components","root","slot","always","getIntrinsicElementProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;gCACwB;AAYxC,MAAMA,+BAA+B,CAC1CC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,MAAM;YAC7BL;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAK;IAExB;AACF"}

package/lib-commonjs/components/NavSectionHeader/useNavSectionHeaderStyles.styles.js

@@ -0,0 +1,56 @@
+"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, {
+    navSectionHeaderClassNames: function() {
+        return navSectionHeaderClassNames;
+    },
+    useNavSectionHeaderStyles_unstable: function() {
+        return useNavSectionHeaderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const navSectionHeaderClassNames = {
+    root: 'fui-NavSectionHeader'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Jyy4pa: "f1gr6hdk",
+        Bo78w4l: 0,
+        Cgygva: 0,
+        yil37a: "f1ulrxyd",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "fwrc4pm"
+    }
+}, {
+    d: [
+        ".f1gr6hdk{-webkit-margin-start:10px;margin-inline-start:10px;}",
+        [
+            ".f1ulrxyd{margin-block:8px;}",
+            {
+                p: -1
+            }
+        ],
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}"
+    ]
+});
+const useNavSectionHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(navSectionHeaderClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib-commonjs/components/NavSectionHeader/useNavSectionHeaderStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useNavSectionHeaderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const navSectionHeaderClassNames = {\n    root: 'fui-NavSectionHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        marginInlineStart: `10px`,\n        marginBlock: '8px',\n        ...typographyStyles.caption1Strong\n    }\n});\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */ export const useNavSectionHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["navSectionHeaderClassNames","useNavSectionHeaderStyles_unstable","root","useStyles","__styles","Jyy4pa","Bo78w4l","Cgygva","yil37a","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,0BAA0B;eAA1BA;;IAcIC,kCAAkC;eAAlCA;;;uBAhBwB;AAElC,MAAMD,6BAA6B;IACtCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AASX,MAAMb,qCAAsCc,CAAAA;IACnD;IACA,MAAMC,SAASb;IACfY,MAAMb,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,2BAA2BE,IAAI,EAAEc,OAAOd,IAAI,EAAEa,MAAMb,IAAI,CAACe,SAAS;IACtG,OAAOF;AACX"}

package/lib-commonjs/components/NavSubItem/NavSubItem.js

@@ -0,0 +1,24 @@
+"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 _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);
+    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+    // useCustomStyleHook_unstable('useNavSubItemStyles_unstable')(state);
+    return (0, _renderNavSubItem.renderNavSubItem_unstable)(state);
+});
+NavSubItem.displayName = 'NavSubItem';

package/lib-commonjs/components/NavSubItem/NavSubItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItem/NavSubItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 - TODO: add more docs\n */\nexport const NavSubItem: ForwardRefComponent<NavSubItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavSubItem_unstable(props, ref);\n\n  useNavSubItemStyles_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useNavSubItemStyles_unstable')(state);\n  return renderNavSubItem_unstable(state);\n});\n\nNavSubItem.displayName = 'NavSubItem';\n"],"names":["NavSubItem","React","forwardRef","props","ref","state","useNavSubItem_unstable","useNavSubItemStyles_unstable","renderNavSubItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;+BAGgB;kCACG;2CACG;AAMtC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7B,8HAA8H;IAC9H,wGAAwG;IACxG,sEAAsE;IACtE,OAAOG,IAAAA,2CAAAA,EAA0BH;AACnC;AAEAL,WAAWS,WAAW,GAAG"}

package/lib-commonjs/components/NavSubItem/NavSubItem.types.js

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

package/lib-commonjs/components/NavSubItem/NavSubItem.types.js.map

@@ -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":[],"rangeMappings":";;","mappings":"AAqBA;;CAEC"}

package/lib-commonjs/components/NavSubItem/index.js

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

package/lib-commonjs/components/NavSubItem/index.js.map

@@ -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","navSubItemClassNames","renderNavSubItem_unstable","useNavSubItemStyles_unstable","useNavSubItem_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,UAAU;eAAVA,sBAAU;;IAIoBC,oBAAoB;eAApBA,+CAAoB;;IAFlDC,yBAAyB;eAAzBA,2CAAyB;;IAEzBC,4BAA4B;eAA5BA,uDAA4B;;IAD5BC,sBAAsB;eAAtBA,qCAAsB;;;4BAHJ;kCAEe;+BACH;2CAC4B"}

package/lib-commonjs/components/NavSubItem/renderNavSubItem.js

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

package/lib-commonjs/components/NavSubItem/renderNavSubItem.js.map

@@ -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';\n\nimport type { NavSubItemState, NavSubItemSlots } from './NavSubItem.types';\n\n/**\n * Render the final JSX of NavSubItem\n */\nexport const renderNavSubItem_unstable = (state: NavSubItemState) => {\n  assertSlots<NavSubItemSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["renderNavSubItem_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;AAOrB,MAAMA,4BAA4B,CAACC;IACxCC,IAAAA,2BAAAA,EAA6BD;IAE7B,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}

package/lib-commonjs/components/NavSubItem/useNavSubItem.js

@@ -0,0 +1,72 @@
+"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
+    };
+};