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

package/lib/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.js

@@ -0,0 +1,38 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer';
+export const navDrawerHeaderClassNames = {
+  root: 'fui-NavDrawerHeader'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: "f1r2n0t9",
+    B1hrpyx: "f80d8h0",
+    Dbcxam: 0,
+    rjzwhg: 0,
+    Bblux5w: "fesrmp8"
+  }
+}, {
+  d: [[".f1r2n0t9{margin:unset;}", {
+    p: -1
+  }], ".f80d8h0{-webkit-padding-start:14px;padding-inline-start:14px;}", [".fesrmp8{padding-block:5px;}", {
+    p: -1
+  }]]
+});
+/**
+ * Apply styling to the NavDrawerHeader slots based on the state
+ */
+export const useNavDrawerHeaderStyles_unstable = state => {
+  'use no memo';
+
+  useDrawerHeaderStyles_unstable(state);
+  const styles = useStyles();
+  state.root.className = mergeClasses(navDrawerHeaderClassNames.root, styles.root, state.root.className);
+  return state;
+};

package/lib/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","useDrawerHeaderStyles_unstable","navDrawerHeaderClassNames","root","useStyles","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B1hrpyx","Dbcxam","rjzwhg","Bblux5w","d","p","useNavDrawerHeaderStyles_unstable","state","styles","className"],"sources":["useNavDrawerHeaderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerHeaderClassNames = {\n    root: 'fui-NavDrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        margin: 'unset',\n        paddingInlineStart: '14px',\n        paddingBlock: '5px'\n    }\n});\n/**\n * Apply styling to the NavDrawerHeader slots based on the state\n */ export const useNavDrawerHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerHeaderStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACbhB,8BAA8B,CAACgB,KAAK,CAAC;EACrC,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1Ba,KAAK,CAACd,IAAI,CAACgB,SAAS,GAAGnB,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/NavItem/NavItem.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useNavItem_unstable } from './useNavItem';
+import { renderNavItem_unstable } from './renderNavItem';
+import { useNavItemStyles_unstable } from './useNavItemStyles.styles';
+/**
+ * NavItem component - TODO: add more docs
+ */ export const NavItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useNavItem_unstable(props, ref);
+    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 renderNavItem_unstable(state);
+});
+NavItem.displayName = 'NavItem';

package/lib/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":["React","useNavItem_unstable","renderNavItem_unstable","useNavItemStyles_unstable","NavItem","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,iFAAiF;AACjF,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE;;CAEC,GACD,OAAO,MAAMC,wBAA6CJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQP,oBAAoBK,OAAOC;IAEzCJ,0BAA0BK;IAC1B,8HAA8H;IAC9H,wGAAwG;IACxG,mEAAmE;IACnE,OAAON,uBAAuBM;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering NavItem
+ */ export { };

package/lib/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,GACD,WAaI"}

package/lib/components/NavItem/index.js

@@ -0,0 +1,4 @@
+export { NavItem } from './NavItem';
+export { renderNavItem_unstable } from './renderNavItem';
+export { useNavItem_unstable } from './useNavItem';
+export { useNavItemStyles_unstable, navItemClassNames } from './useNavItemStyles.styles';

package/lib/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","renderNavItem_unstable","useNavItem_unstable","useNavItemStyles_unstable","navItemClassNames"],"rangeMappings":";;;","mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,yBAAyB,EAAEC,iBAAiB,QAAQ,4BAA4B"}

package/lib/components/NavItem/renderNavItem.js

@@ -0,0 +1,13 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of NavItem
+ */ export const renderNavItem_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            state.root.children
+        ]
+    });
+};

package/lib/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":["assertSlots","renderNavItem_unstable","state","root","icon","children"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrCF,YAA0BE;IAE1B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,IAAI,kBAAI,KAACF,MAAME,IAAI;YACzBF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

package/lib/components/NavItem/useNavItem.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useEventCallback, isHTMLElement } from '@fluentui/react-utilities';
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import { useNavContext_unstable } from '../NavContext';
+/**
+ * Create the state required to render NavItem.
+ *
+ * The returned state can be modified with hooks such as useNavItemStyles_unstable,
+ * before being passed to renderNavItem_unstable.
+ *
+ * @param props - props from this instance of NavItem
+ * @param ref - reference to root HTMLAnchorElement of NavItem
+ */ export const useNavItem_unstable = (props, ref)=>{
+    const { onClick, value, icon, as, href } = props;
+    const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = useNavContext_unstable();
+    const rootElementType = as || (href ? 'a' : 'button');
+    const selected = selectedValue === value;
+    const innerRef = React.useRef(null);
+    const onNavItemClick = useEventCallback((event)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented && isHTMLElement(event.target)) {
+            onSelect(event, {
+                type: 'click',
+                event,
+                value
+            });
+        }
+    });
+    const root = slot.always(getIntrinsicElementProps(rootElementType, 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: slot.optional(icon, {
+            elementType: 'span'
+        }),
+        selected,
+        value,
+        density
+    };
+};

package/lib/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":["React","getIntrinsicElementProps","slot","useEventCallback","isHTMLElement","useARIAButtonProps","useNavContext_unstable","useNavItem_unstable","props","ref","onClick","value","icon","as","href","selectedValue","onRegister","onUnregister","onSelect","density","rootElementType","selected","innerRef","useRef","onNavItemClick","event","defaultPrevented","target","type","root","always","elementType","defaultProps","useEffect","components","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5G,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,sBAAsB,QAAQ,gBAAgB;AAKvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,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,GAAGb;IAElF,MAAMc,kBAAkBP,MAAOC,CAAAA,OAAO,MAAM,QAAO;IAEnD,MAAMO,WAAWN,kBAAkBJ;IAEnC,MAAMW,WAAWtB,MAAMuB,MAAM,CAAc;IAE3C,MAAMC,iBAAsDrB,iBAAiBsB,CAAAA;QAC3Ef,oBAAAA,8BAAAA,QAAUe;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAItB,cAAcqB,MAAME,MAAM,GAAG;YAC1DT,SAASO,OAAO;gBAAEG,MAAM;gBAASH;gBAAOd;YAAM;QAChD;IACF;IAEA,MAAMkB,OAAO3B,KAAK4B,MAAM,CACtB7B,yBACEmB,iBACAf,mBAAmBe,iBAAiB;QAClC,gBAAgBC,WAAW,SAAS;QACpC,GAAGb,KAAK;IACV,KAEF;QACEuB,aAAaX;QACbY,cAAc;YACZvB,KAAKA;YACLmB,MAAMR;QACR;IACF;IAGFS,KAAKnB,OAAO,GAAGc;IAEfxB,MAAMiC,SAAS,CAAC;QACdjB,WAAW;YACTL;YACAF,KAAKa;QACP;QAEA,OAAO;YACLL,aAAa;gBAAEN;gBAAOF,KAAKa;YAAS;QACtC;IACF,GAAG;QAACN;QAAYC;QAAcK;QAAUX;KAAM;IAE9C,OAAO;QACLuB,YAAY;YAAEL,MAAMT;YAAiBR,MAAM;QAAO;QAClDiB;QACAjB,MAAMV,KAAKiC,QAAQ,CAACvB,MAAM;YACxBmB,aAAa;QACf;QACAV;QACAV;QACAQ;IACF;AACF,EAAE"}

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

@@ -0,0 +1,27 @@
+import { mergeClasses } from '@griffel/react';
+import { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';
+export const navItemClassNames = {
+  root: 'fui-NavItem',
+  icon: 'fui-NavItem__icon'
+};
+/**
+ * Apply styling to the NavItem slots based on the state
+ */
+export const useNavItemStyles_unstable = state => {
+  'use no memo';
+
+  const rootDefaultClassName = useRootDefaultClassName();
+  const smallStyles = useSmallStyles();
+  const contentStyles = useContentStyles();
+  const indicatorStyles = useIndicatorStyles();
+  const iconStyles = useIconStyles();
+  const {
+    selected,
+    density
+  } = state;
+  state.root.className = mergeClasses(navItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, selected && indicatorStyles.base, selected && contentStyles.selected, state.root.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(navItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);
+  }
+  return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"names":["mergeClasses","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navItemClassNames","root","icon","useNavItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","iconStyles","selected","density","className","base"],"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"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE,aAAa;EACnBC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,oBAAoB,GAAGP,uBAAuB,CAAC,CAAC;EACtD,MAAMQ,WAAW,GAAGP,cAAc,CAAC,CAAC;EACpC,MAAMQ,aAAa,GAAGZ,gBAAgB,CAAC,CAAC;EACxC,MAAMa,eAAe,GAAGX,kBAAkB,CAAC,CAAC;EAC5C,MAAMY,UAAU,GAAGb,aAAa,CAAC,CAAC;EAClC,MAAM;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,GAAGP,KAAK;EACnCA,KAAK,CAACH,IAAI,CAACW,SAAS,GAAGlB,YAAY,CAACM,iBAAiB,CAACC,IAAI,EAAEI,oBAAoB,EAAEM,OAAO,KAAK,OAAO,IAAIL,WAAW,CAACL,IAAI,EAAES,QAAQ,IAAIF,eAAe,CAACK,IAAI,EAAEH,QAAQ,IAAIH,aAAa,CAACG,QAAQ,EAAEN,KAAK,CAACH,IAAI,CAACW,SAAS,CAAC;EACtN,IAAIR,KAAK,CAACF,IAAI,EAAE;IACZE,KAAK,CAACF,IAAI,CAACU,SAAS,GAAGlB,YAAY,CAACM,iBAAiB,CAACE,IAAI,EAAEO,UAAU,CAACI,IAAI,EAAEH,QAAQ,IAAID,UAAU,CAACC,QAAQ,EAAEN,KAAK,CAACF,IAAI,CAACU,SAAS,CAAC;EACvI;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/NavSectionHeader/NavSectionHeader.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useNavSectionHeader_unstable } from './useNavSectionHeader';
+import { renderNavSectionHeader_unstable } from './renderNavSectionHeader';
+import { useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';
+/**
+ * NavSectionHeader component
+ */ export const NavSectionHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useNavSectionHeader_unstable(props, ref);
+    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 renderNavSectionHeader_unstable(state);
+});
+NavSectionHeader.displayName = 'NavSectionHeader';

package/lib/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":["React","useNavSectionHeader_unstable","renderNavSectionHeader_unstable","useNavSectionHeaderStyles_unstable","NavSectionHeader","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,qCAAqC;AAGxF;;CAEC,GACD,OAAO,MAAMC,iCAA+DJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQP,6BAA6BK,OAAOC;IAElDJ,mCAAmCK;IACnC,8HAA8H;IAC9H,wGAAwG;IACxG,4EAA4E;IAC5E,OAAON,gCAAgCM;AACzC,GAAG;AAEHJ,iBAAiBK,WAAW,GAAG"}

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

@@ -0,0 +1,4 @@
+/**
+ * State used in rendering NavSectionHeader
+ */ export { }; // TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from NavSectionHeaderProps.
+ // & Required<Pick<NavSectionHeaderProps, 'propName'>>

package/lib/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,GACD,WAA0E,CAC1E,iIAAiI;CACjI,sDAAsD"}

package/lib/components/NavSectionHeader/index.js

@@ -0,0 +1,4 @@
+export { NavSectionHeader } from './NavSectionHeader';
+export { renderNavSectionHeader_unstable } from './renderNavSectionHeader';
+export { useNavSectionHeader_unstable } from './useNavSectionHeader';
+export { navSectionHeaderClassNames, useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';

package/lib/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","renderNavSectionHeader_unstable","useNavSectionHeader_unstable","navSectionHeaderClassNames","useNavSectionHeaderStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,gBAAgB,QAAQ,qBAAqB;AAEtD,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,0BAA0B,EAAEC,kCAAkC,QAAQ,qCAAqC"}

package/lib/components/NavSectionHeader/renderNavSectionHeader.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of NavSectionHeader
+ */ export const renderNavSectionHeader_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

package/lib/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":["assertSlots","renderNavSectionHeader_unstable","state","root"],"rangeMappings":";;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9CF,YAAmCE;IAEnC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/NavSectionHeader/useNavSectionHeader.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render NavSectionHeader.
+ *
+ * The returned state can be modified with hooks such as useNavSectionHeaderStyles_unstable,
+ * before being passed to renderNavSectionHeader_unstable.
+ *
+ * @param props - props from this instance of NavSectionHeader
+ * @param ref - reference to root HTMLDivElement of NavSectionHeader
+ */ export const useNavSectionHeader_unstable = (props, ref)=>{
+    return {
+        components: {
+            root: 'h3'
+        },
+        root: slot.always(getIntrinsicElementProps('h3', {
+            ref,
+            ...props
+        }), {
+            elementType: 'h3'
+        })
+    };
+};

package/lib/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":["React","getIntrinsicElementProps","slot","useNavSectionHeader_unstable","props","ref","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,yBAAyB,MAAM;YAC7BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAK;IAExB;AACF,EAAE"}

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

@@ -0,0 +1,34 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { typographyStyles } from '@fluentui/react-theme';
+export const navSectionHeaderClassNames = {
+  root: 'fui-NavSectionHeader'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__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);}"]
+});
+/**
+ * Apply styling to the NavSectionHeader slots based on the state
+ */
+export const useNavSectionHeaderStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);
+  return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","Jyy4pa","Bo78w4l","Cgygva","yil37a","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useNavSectionHeaderStyles_unstable","state","styles","className"],"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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EAC3D,aAAa;;EACb,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGlB,YAAY,CAACE,0BAA0B,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACvG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/NavSubItem/NavSubItem.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useNavSubItem_unstable } from './useNavSubItem';
+import { renderNavSubItem_unstable } from './renderNavSubItem';
+import { useNavSubItemStyles_unstable } from './useNavSubItemStyles.styles';
+/**
+ * NavSubItem component - TODO: add more docs
+ */ export const NavSubItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useNavSubItem_unstable(props, ref);
+    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 renderNavSubItem_unstable(state);
+});
+NavSubItem.displayName = 'NavSubItem';

package/lib/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":["React","useNavSubItem_unstable","renderNavSubItem_unstable","useNavSubItemStyles_unstable","NavSubItem","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,iFAAiF;AACjF,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7B,8HAA8H;IAC9H,wGAAwG;IACxG,sEAAsE;IACtE,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering NavSubItem
+ */ export { };

package/lib/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,GACD,WAYI"}

package/lib/components/NavSubItem/index.js

@@ -0,0 +1,4 @@
+export { NavSubItem } from './NavSubItem';
+export { renderNavSubItem_unstable } from './renderNavSubItem';
+export { useNavSubItem_unstable } from './useNavSubItem';
+export { useNavSubItemStyles_unstable, navSubItemClassNames } from './useNavSubItemStyles.styles';

package/lib/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","renderNavSubItem_unstable","useNavSubItem_unstable","useNavSubItemStyles_unstable","navSubItemClassNames"],"rangeMappings":";;;","mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,EAAEC,oBAAoB,QAAQ,+BAA+B"}

package/lib/components/NavSubItem/renderNavSubItem.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of NavSubItem
+ */ export const renderNavSubItem_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

package/lib/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":["assertSlots","renderNavSubItem_unstable","state","root"],"rangeMappings":";;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/NavSubItem/useNavSubItem.js

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useEventCallback, isHTMLElement } from '@fluentui/react-utilities';
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import { useNavContext_unstable } from '../NavContext';
+import { useNavCategoryContext_unstable } from '../NavCategoryContext';
+/**
+ * Create the state required to render NavSubItem.
+ *
+ * The returned state can be modified with hooks such as useNavSubItemStyles_unstable,
+ * before being passed to renderNavSubItem_unstable.
+ *
+ * @param props - props from this instance of NavSubItem
+ * @param ref - reference to root HTMLButtonElement of NavSubItem
+ */ export const useNavSubItem_unstable = (props, ref)=>{
+    const { onClick, value: subItemValue, as, href } = props;
+    const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = useNavContext_unstable();
+    const { value: parentCategoryValue } = useNavCategoryContext_unstable();
+    const rootElementType = as || (href ? 'a' : 'button');
+    const selected = selectedValue === subItemValue;
+    const innerRef = React.useRef(null);
+    const onNavSubItemClick = useEventCallback((event)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented && isHTMLElement(event.target)) {
+            onSelect(event, {
+                type: 'click',
+                event,
+                value: subItemValue,
+                categoryValue: parentCategoryValue
+            });
+        }
+    });
+    const root = slot.always(getIntrinsicElementProps(rootElementType, 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
+    };
+};

package/lib/components/NavSubItem/useNavSubItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItem/useNavSubItem.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';\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5G,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,sBAAsB,QAAQ,gBAAgB;AACvD,SAASC,8BAA8B,QAAQ,wBAAwB;AAKvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,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,GAAGd;IAElF,MAAM,EAAEM,OAAOS,mBAAmB,EAAE,GAAGd;IAEvC,MAAMe,kBAAkBR,MAAOC,CAAAA,OAAO,MAAM,QAAO;IAEnD,MAAMQ,WAAWP,kBAAkBH;IAEnC,MAAMW,WAAWxB,MAAMyB,MAAM,CAAc;IAE3C,MAAMC,oBAAyDvB,iBAAiBwB,CAAAA;QAC9EhB,oBAAAA,8BAAAA,QAAUgB;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIxB,cAAcuB,MAAME,MAAM,GAAG;YAC1DV,SAASQ,OAAO;gBAAEG,MAAM;gBAASH;gBAAOf,OAAOC;gBAAckB,eAAeV;YAAoB;QAClG;IACF;IAEA,MAAMW,OAAO9B,KAAK+B,MAAM,CACtBhC,yBACEqB,iBACAjB,mBAAmBiB,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,MAAMoC,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"}

package/lib/components/NavSubItem/useNavSubItemStyles.styles.js

@@ -0,0 +1,39 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';
+export const navSubItemClassNames = {
+  root: 'fui-NavSubItem'
+};
+/**
+ * Styles for the content slot (children)
+ */
+const useNavSubItemSpecificStyles = /*#__PURE__*/__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;}"]
+});
+/**
+ * Apply styling to the NavSubItem slots based on the state
+ */
+export const useNavSubItemStyles_unstable = state => {
+  'use no memo';
+
+  const rootDefaultClassName = useRootDefaultClassName();
+  const smallStyles = useSmallStyles();
+  const contentStyles = useContentStyles();
+  const indicatorStyles = useIndicatorStyles();
+  const navSubItemSpecificStyles = useNavSubItemSpecificStyles();
+  const {
+    selected,
+    density
+  } = state;
+  state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, density === 'small' && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
+  return state;
+};

package/lib/components/NavSubItem/useNavSubItemStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"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","className"],"sources":["useNavSubItemStyles.styles.js"],"sourcesContent":["import { 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    state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, density === 'small' && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,2BAA2B,gBAAGT,QAAA;EAAAU,IAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAD,OAAA;EAAA;EAAAE,iBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAYvC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EACtD,MAAMc,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpC,MAAMc,aAAa,GAAGjB,gBAAgB,CAAC,CAAC;EACxC,MAAMkB,eAAe,GAAGjB,kBAAkB,CAAC,CAAC;EAC5C,MAAMkB,wBAAwB,GAAGb,2BAA2B,CAAC,CAAC;EAC9D,MAAM;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,GAAGP,KAAK;EACnCA,KAAK,CAACT,IAAI,CAACiB,SAAS,GAAGxB,YAAY,CAACM,oBAAoB,CAACC,IAAI,EAAEU,oBAAoB,EAAEM,OAAO,KAAK,OAAO,IAAIL,WAAW,CAACX,IAAI,EAAEgB,OAAO,KAAK,OAAO,IAAIF,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,CAACiB,SAAS,CAAC;EAC3W,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/NavSubItemContext.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+const NavSubItemContext = React.createContext(undefined);
+const NavSubItemContextDefaultValue = {
+    open: false,
+    value: ''
+};
+export const { Provider: NavSubItemProvider } = NavSubItemContext;
+export const useNavSubItemContext_unstable = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(NavSubItemContext)) !== null && _React_useContext !== void 0 ? _React_useContext : NavSubItemContextDefaultValue;
+};

package/lib/components/NavSubItemContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { NavItemValue } from './NavContext.types';\n\n// This context is analogous to AccordionItemContext\n\nexport type NavSubItemContextValue = {\n  open: boolean;\n  value: NavItemValue;\n};\n\nconst NavSubItemContext = React.createContext<NavSubItemContextValue | undefined>(\n  undefined,\n) as React.Context<NavSubItemContextValue>;\n\nconst NavSubItemContextDefaultValue: NavSubItemContextValue = {\n  open: false,\n  value: '',\n};\n\nexport const { Provider: NavSubItemProvider } = NavSubItemContext;\n\nexport const useNavSubItemContext_unstable = () => {\n  return React.useContext(NavSubItemContext) ?? NavSubItemContextDefaultValue;\n};\n"],"names":["React","NavSubItemContext","createContext","undefined","NavSubItemContextDefaultValue","open","value","Provider","NavSubItemProvider","useNavSubItemContext_unstable","useContext"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAU/B,MAAMC,oBAAoBD,MAAME,aAAa,CAC3CC;AAGF,MAAMC,gCAAwD;IAC5DC,MAAM;IACNC,OAAO;AACT;AAEA,OAAO,MAAM,EAAEC,UAAUC,kBAAkB,EAAE,GAAGP,kBAAkB;AAElE,OAAO,MAAMQ,gCAAgC;QACpCT;IAAP,OAAOA,CAAAA,oBAAAA,MAAMU,UAAU,CAACT,gCAAjBD,+BAAAA,oBAAuCI;AAChD,EAAE"}

package/lib/components/NavSubItemGroup/NavSubItemGroup.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useNavSubItemGroup_unstable } from './useNavSubItemGroup';
+import { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';
+import { useNavSubItemGroupStyles_unstable } from './useNavSubItemGroupStyles.styles';
+/**
+ * NavSubItemGroup component - TODO: add more docs
+ */ export const NavSubItemGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useNavSubItemGroup_unstable(props, ref);
+    useNavSubItemGroupStyles_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('useNavSubItemGroupStyles_unstable')(state);
+    return renderNavSubItemGroup_unstable(state);
+});
+NavSubItemGroup.displayName = 'NavSubItemGroup';

package/lib/components/NavSubItemGroup/NavSubItemGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useNavSubItemGroup_unstable } from './useNavSubItemGroup';\nimport { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';\nimport { useNavSubItemGroupStyles_unstable } from './useNavSubItemGroupStyles.styles';\nimport type { NavSubItemGroupProps } from './NavSubItemGroup.types';\n\n/**\n * NavSubItemGroup component - TODO: add more docs\n */\nexport const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps> = React.forwardRef((props, ref) => {\n  const state = useNavSubItemGroup_unstable(props, ref);\n\n  useNavSubItemGroupStyles_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('useNavSubItemGroupStyles_unstable')(state);\n  return renderNavSubItemGroup_unstable(state);\n});\n\nNavSubItemGroup.displayName = 'NavSubItemGroup';\n"],"names":["React","useNavSubItemGroup_unstable","renderNavSubItemGroup_unstable","useNavSubItemGroupStyles_unstable","NavSubItemGroup","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,iFAAiF;AACjF,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAGtF;;CAEC,GACD,OAAO,MAAMC,gCAA6DJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQP,4BAA4BK,OAAOC;IAEjDJ,kCAAkCK;IAClC,8HAA8H;IAC9H,wGAAwG;IACxG,2EAA2E;IAC3E,OAAON,+BAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/NavSubItemGroup/NavSubItemGroup.types.js

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering NavSubItemGroup
+ */ export { };

package/lib/components/NavSubItemGroup/NavSubItemGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type NavSubItemGroupSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * NavSubItemGroup Props\n */\nexport type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;\n\n/**\n * State used in rendering NavSubItemGroup\n */\nexport type NavSubItemGroupState = ComponentState<NavSubItemGroupSlots> & {\n  /**\n   * Internal open state, provided by context.\n   */\n  open: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAWA;;CAEC,GACD,WAKE"}