@fluentui/react-nav 9.3.24 → 9.4.0

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

@@ -31,8 +31,10 @@ const useNavItemStyles_unstable = (state)=>{
     const indicatorStyles = (0, _sharedNavStylesstyles.useIndicatorStyles)();
     const iconStyles = (0, _sharedNavStylesstyles.useIconStyles)();
     const { selected, density } = state;
+    // eslint-disable-next-line react-hooks/immutability
     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) {
+        // eslint-disable-next-line react-hooks/immutability
         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.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavItem/useNavItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport {\n  useContentStyles,\n  useIconStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavItemSlots, NavItemState } from './NavItem.types';\nexport const navItemClassNames: SlotClassNames<NavItemSlots> = {\n  root: 'fui-NavItem',\n  icon: 'fui-NavItem__icon',\n};\n\n/**\n * Apply styling to the NavItem slots based on the state\n */\nexport const useNavItemStyles_unstable = (state: NavItemState): NavItemState => {\n  'use no memo';\n\n  const rootDefaultClassName = useRootDefaultClassName();\n  const smallStyles = useSmallStyles();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const iconStyles = useIconStyles();\n\n  const { selected, density } = state;\n\n  state.root.className = mergeClasses(\n    navItemClassNames.root,\n    rootDefaultClassName,\n    density === 'small' && smallStyles.root,\n    selected && indicatorStyles.base,\n    selected && contentStyles.selected,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      navItemClassNames.icon,\n      iconStyles.base,\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["mergeClasses","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navItemClassNames","root","icon","useNavItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","iconStyles","selected","density","className","base"],"mappings":"AAAA;;;;;;;;;;;;IAaaM,iBAAAA;;;6BAQAG;;;;uBAnBgB,iBAAiB;uCAOvC,4BAA4B;AAI5B,0BAAwD;IAC7DF,MAAM;IACNC,MAAM;AACR,EAAE;AAKK,MAAMC,4BAA4B,CAACC;IACxC;IAEA,MAAMC,2BAAuBP,8CAAAA;IAC7B,MAAMQ,kBAAcP,qCAAAA;IACpB,MAAMQ,oBAAgBZ,uCAAAA;IACtB,MAAMa,sBAAkBX,yCAAAA;IACxB,MAAMY,iBAAab,oCAAAA;IAEnB,MAAM,EAAEc,QAAQ,EAAEC,OAAO,EAAE,GAAGP;IAE9BA,MAAMH,IAAI,CAACW,SAAS,OAAGlB,mBAAAA,EACrBM,kBAAkBC,IAAI,EACtBI,sBACAM,YAAY,WAAWL,YAAYL,IAAI,EACvCS,YAAYF,gBAAgBK,IAAI,EAChCH,YAAYH,cAAcG,QAAQ,EAClCN,MAAMH,IAAI,CAACW,SAAS;IAGtB,IAAIR,MAAMF,IAAI,EAAE;QACdE,MAAMF,IAAI,CAACU,SAAS,OAAGlB,mBAAAA,EACrBM,kBAAkBE,IAAI,EACtBO,WAAWI,IAAI,EACfH,YAAYD,WAAWC,QAAQ,EAC/BN,MAAMF,IAAI,CAACU,SAAS;IAExB;IAEA,OAAOR;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavItem/useNavItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport {\n  useContentStyles,\n  useIconStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavItemSlots, NavItemState } from './NavItem.types';\nexport const navItemClassNames: SlotClassNames<NavItemSlots> = {\n  root: 'fui-NavItem',\n  icon: 'fui-NavItem__icon',\n};\n\n/**\n * Apply styling to the NavItem slots based on the state\n */\nexport const useNavItemStyles_unstable = (state: NavItemState): NavItemState => {\n  'use no memo';\n\n  const rootDefaultClassName = useRootDefaultClassName();\n  const smallStyles = useSmallStyles();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const iconStyles = useIconStyles();\n\n  const { selected, density } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    navItemClassNames.root,\n    rootDefaultClassName,\n    density === 'small' && smallStyles.root,\n    selected && indicatorStyles.base,\n    selected && contentStyles.selected,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(\n      navItemClassNames.icon,\n      iconStyles.base,\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["mergeClasses","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navItemClassNames","root","icon","useNavItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","iconStyles","selected","density","className","base"],"mappings":"AAAA;;;;;;;;;;;;IAaaM,iBAAAA;;;IAQAG,yBAAAA;;;;uBAnBgB,iBAAiB;uCAOvC,4BAA4B;AAI5B,0BAAwD;IAC7DF,MAAM;IACNC,MAAM;AACR,EAAE;AAKK,kCAAkC,CAACE;IACxC;IAEA,MAAMC,2BAAuBP,8CAAAA;IAC7B,MAAMQ,kBAAcP,qCAAAA;IACpB,MAAMQ,oBAAgBZ,uCAAAA;IACtB,MAAMa,sBAAkBX,yCAAAA;IACxB,MAAMY,iBAAab,oCAAAA;IAEnB,MAAM,EAAEc,QAAQ,EAAEC,OAAO,EAAE,GAAGP;IAE9B,oDAAoD;IACpDA,MAAMH,IAAI,CAACW,SAAS,OAAGlB,mBAAAA,EACrBM,kBAAkBC,IAAI,EACtBI,sBACAM,YAAY,WAAWL,YAAYL,IAAI,EACvCS,YAAYF,gBAAgBK,IAAI,EAChCH,YAAYH,cAAcG,QAAQ,EAClCN,MAAMH,IAAI,CAACW,SAAS;IAGtB,IAAIR,MAAMF,IAAI,EAAE;QACd,oDAAoD;QACpDE,MAAMF,IAAI,CAACU,SAAS,OAAGlB,mBAAAA,EACrBM,kBAAkBE,IAAI,EACtBO,WAAWI,IAAI,EACfH,YAAYD,WAAWC,QAAQ,EAC/BN,MAAMF,IAAI,CAACU,SAAS;IAExB;IAEA,OAAOR;AACT,EAAE"}

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

@@ -52,6 +52,7 @@ const navSectionHeaderClassNames = {
 const useNavSectionHeaderStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navSectionHeaderClassNames.root, styles.root, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useNavSectionHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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":["__styles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","Jyy4pa","Bo78w4l","Cgygva","yil37a","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useNavSectionHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,0BAA0B;;;IActBa,kCAAkC;;;;uBAhBV,gBAAgB;AAElD,mCAAmC;IACtCZ,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAMrB,CAAC;AAGS,4CAA4CE,KAAK,IAAG;IAC3D,aAAa;IACb,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;IAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,OAAGlB,mBAAY,EAACE,0BAA0B,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;IACvG,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useNavSectionHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","Jyy4pa","Bo78w4l","Cgygva","yil37a","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useNavSectionHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,0BAA0B;;;IActBa,kCAAkC;;;;uBAhBV,gBAAgB;AAElD,mCAAmC;IACtCZ,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAMrB,CAAC;AAGS,4CAA4CE,KAAK,IAAG;IAC3D,aAAa;IACb,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAY,KAAK,CAACb,IAAI,CAACe,SAAS,OAAGlB,mBAAY,EAACE,0BAA0B,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;IACvG,OAAOF,KAAK;AAChB,CAAC"}

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

@@ -34,6 +34,7 @@ const navSectionHeaderClassNames = {
 const useNavSectionHeaderStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navSectionHeaderClassNames.root, styles.root, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSectionHeader/useNavSectionHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderSlots, NavSectionHeaderState } from './NavSectionHeader.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const navSectionHeaderClassNames: SlotClassNames<NavSectionHeaderSlots> = {\n  root: 'fui-NavSectionHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    marginInlineStart: `10px`,\n    marginBlock: '8px',\n    ...typographyStyles.caption1Strong,\n  },\n});\n\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */\nexport const useNavSectionHeaderStyles_unstable = (state: NavSectionHeaderState): NavSectionHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","marginInlineStart","marginBlock","caption1Strong","useNavSectionHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,0BAAAA;;;IAkBAM,kCAAAA;;;;uBAvB4B,iBAAiB;4BAGzB,wBAAwB;AAElD,mCAA0E;IAC/EL,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,qBAAAA,EAAW;IAC3BI,MAAM;QACJE,mBAAmB,CAAC,IAAI,CAAC;QACzBC,aAAa;QACb,GAAGL,4BAAAA,CAAiBM,cAAc;IACpC;AACF;AAKO,2CAA2C,CAACE;IACjD;IAEA,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,OAAGX,mBAAAA,EAAaE,2BAA2BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAEtG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavSectionHeader/useNavSectionHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderSlots, NavSectionHeaderState } from './NavSectionHeader.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const navSectionHeaderClassNames: SlotClassNames<NavSectionHeaderSlots> = {\n  root: 'fui-NavSectionHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    marginInlineStart: `10px`,\n    marginBlock: '8px',\n    ...typographyStyles.caption1Strong,\n  },\n});\n\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */\nexport const useNavSectionHeaderStyles_unstable = (state: NavSectionHeaderState): NavSectionHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","marginInlineStart","marginBlock","caption1Strong","useNavSectionHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,0BAAAA;;;IAkBAM,kCAAAA;;;;uBAvB4B,iBAAiB;4BAGzB,wBAAwB;AAElD,mCAA0E;IAC/EL,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,qBAAAA,EAAW;IAC3BI,MAAM;QACJE,mBAAmB,CAAC,IAAI,CAAC;QACzBC,aAAa;QACb,GAAGL,4BAAAA,CAAiBM,cAAc;IACpC;AACF;AAKO,2CAA2C,CAACE;IACjD;IAEA,MAAMC,SAASN;IACf,oDAAoD;IACpDK,MAAMN,IAAI,CAACQ,SAAS,OAAGX,mBAAAA,EAAaE,2BAA2BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAEtG,OAAOF;AACT,EAAE"}

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

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

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

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

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

@@ -18,6 +18,9 @@ _export(exports, {
     renderNavSubItem_unstable: function() {
         return _renderNavSubItem.renderNavSubItem_unstable;
     },
+    useNavSubItemBase_unstable: function() {
+        return _useNavSubItem.useNavSubItemBase_unstable;
+    },
     useNavSubItemStyles_unstable: function() {
         return _useNavSubItemStylesstyles.useNavSubItemStyles_unstable;
     },

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

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

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

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useNavSubItem_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useNavSubItemBase_unstable: function() {
+        return useNavSubItemBase_unstable;
+    },
+    useNavSubItem_unstable: function() {
         return useNavSubItem_unstable;
     }
 });
@@ -16,8 +24,16 @@ const _reactaria = require("@fluentui/react-aria");
 const _NavContext = require("../NavContext");
 const _NavCategoryContext = require("../NavCategoryContext");
 const useNavSubItem_unstable = (props, ref)=>{
+    const { density = 'medium' } = (0, _NavContext.useNavContext_unstable)();
+    const state = useNavSubItemBase_unstable(props, ref);
+    return {
+        ...state,
+        density
+    };
+};
+const useNavSubItemBase_unstable = (props, ref)=>{
     const { onClick, value: subItemValue, as, href } = props;
-    const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = (0, _NavContext.useNavContext_unstable)();
+    const { selectedValue, onRegister, onUnregister, onSelect } = (0, _NavContext.useNavContext_unstable)();
     const { value: parentCategoryValue } = (0, _NavCategoryContext.useNavCategoryContext_unstable)();
     const rootElementType = as || (href ? 'a' : 'button');
     const selected = selectedValue === subItemValue;
@@ -67,7 +83,6 @@ const useNavSubItem_unstable = (props, ref)=>{
         },
         root,
         selected,
-        value: subItemValue,
-        density
+        value: subItemValue
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItem/useNavSubItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useNavContext_unstable } from '../NavContext';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { NavSubItemProps, NavSubItemState } from './NavSubItem.types';\n\n/**\n * Create the state required to render NavSubItem.\n *\n * The returned state can be modified with hooks such as useNavSubItemStyles_unstable,\n * before being passed to renderNavSubItem_unstable.\n *\n * @param props - props from this instance of NavSubItem\n * @param ref - reference to root HTMLButtonElement of NavSubItem\n */\nexport const useNavSubItem_unstable = (\n  props: NavSubItemProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavSubItemState => {\n  const { onClick, value: subItemValue, as, href } = props;\n\n  const { selectedValue, onRegister, onUnregister, onSelect, density = 'medium' } = useNavContext_unstable();\n\n  const { value: parentCategoryValue } = useNavCategoryContext_unstable();\n\n  const rootElementType = as || (href ? 'a' : 'button');\n\n  const selected = selectedValue === subItemValue;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const onNavSubItemClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      onSelect(event, { type: 'click', event, value: subItemValue, categoryValue: parentCategoryValue });\n    }\n  });\n\n  const root = slot.always<ARIAButtonSlotProps<'a'>>(\n    getIntrinsicElementProps(\n      rootElementType,\n      useARIAButtonProps(rootElementType, {\n        'aria-current': selected ? 'page' : 'false',\n        ...props,\n      }),\n    ),\n    {\n      elementType: rootElementType,\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        type: rootElementType,\n      },\n    },\n  );\n\n  root.onClick = onNavSubItemClick;\n\n  React.useEffect(() => {\n    onRegister({\n      value: subItemValue,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value: subItemValue, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, subItemValue]);\n\n  return {\n    components: {\n      root: rootElementType,\n    },\n    root,\n    selected,\n    value: subItemValue,\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","isHTMLElement","useARIAButtonProps","useNavContext_unstable","useNavCategoryContext_unstable","useNavSubItem_unstable","props","ref","onClick","value","subItemValue","as","href","selectedValue","onRegister","onUnregister","onSelect","density","parentCategoryValue","rootElementType","selected","innerRef","useRef","onNavSubItemClick","event","defaultPrevented","target","type","categoryValue","root","always","elementType","defaultProps","useEffect","components"],"mappings":"AAAA;;;;;+BAoBaQ;;;;;;;iEAlBU,QAAQ;gCACiD,4BAA4B;2BACzE,uBAAuB;4BACnB,gBAAgB;oCACR,wBAAwB;AAchE,+BAA+B,CACpCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,OAAOC,YAAY,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGN;IAEnD,MAAM,EAAEO,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,EAAE,OAAGd,kCAAAA;IAElF,MAAM,EAAEM,OAAOS,mBAAmB,EAAE,OAAGd,kDAAAA;IAEvC,MAAMe,kBAAkBR,MAAOC,QAAO,MAAM,QAAA,CAAO;IAEnD,MAAMQ,WAAWP,kBAAkBH;IAEnC,MAAMW,WAAWxB,OAAMyB,MAAM,CAAc;IAE3C,MAAMC,wBAAyDvB,gCAAAA,EAAiBwB,CAAAA;QAC9EhB,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUgB;QAEV,IAAI,CAACA,MAAMC,gBAAgB,QAAIxB,6BAAAA,EAAcuB,MAAME,MAAM,GAAG;YAC1DV,SAASQ,OAAO;gBAAEG,MAAM;gBAASH;gBAAOf,OAAOC;gBAAckB,eAAeV;YAAoB;QAClG;IACF;IAEA,MAAMW,OAAO9B,oBAAAA,CAAK+B,MAAM,KACtBhC,wCAAAA,EACEqB,qBACAjB,6BAAAA,EAAmBiB,iBAAiB;QAClC,gBAAgBC,WAAW,SAAS;QACpC,GAAGd,KAAK;IACV,KAEF;QACEyB,aAAaZ;QACba,cAAc;YACZzB,KAAKA;YACLoB,MAAMR;QACR;IACF;IAGFU,KAAKrB,OAAO,GAAGe;IAEf1B,OAAMoC,SAAS,CAAC;QACdnB,WAAW;YACTL,OAAOC;YACPH,KAAKc;QACP;QAEA,OAAO;YACLN,aAAa;gBAAEN,OAAOC;gBAAcH,KAAKc;YAAS;QACpD;IACF,GAAG;QAACP;QAAYC;QAAcM;QAAUX;KAAa;IAErD,OAAO;QACLwB,YAAY;YACVL,MAAMV;QACR;QACAU;QACAT;QACAX,OAAOC;QACPO;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavSubItem/useNavSubItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { useNavContext_unstable } from '../NavContext';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { NavSubItemBaseProps, NavSubItemBaseState, 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 { density = 'medium' } = useNavContext_unstable();\n  const state = useNavSubItemBase_unstable(props, ref);\n\n  return {\n    ...state,\n    density,\n  };\n};\n\n/**\n * Base state used in rendering NavSubItem, excluding any design-related properties such as `density`.\n *\n * @param props - props from this instance of NavSubItem\n * @param ref - reference to root HTMLButtonElement of NavSubItem\n * @returns - The base state of NavSubItem\n */\nexport const useNavSubItemBase_unstable = (\n  props: NavSubItemBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): NavSubItemBaseState => {\n  const { onClick, value: subItemValue, as, href } = props;\n\n  const { selectedValue, onRegister, onUnregister, onSelect } = 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  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","isHTMLElement","useARIAButtonProps","useNavContext_unstable","useNavCategoryContext_unstable","useNavSubItem_unstable","props","ref","density","state","useNavSubItemBase_unstable","onClick","value","subItemValue","as","href","selectedValue","onRegister","onUnregister","onSelect","parentCategoryValue","rootElementType","selected","innerRef","useRef","onNavSubItemClick","event","defaultPrevented","target","type","categoryValue","root","always","elementType","defaultProps","useEffect","components"],"mappings":"AAAA;;;;;;;;;;;;8BAwCaa;eAAAA;;IApBAL,sBAAAA;;;;;iEAlBU,QAAQ;gCACiD,4BAA4B;2BACzE,uBAAuB;4BACnB,gBAAgB;oCACR,wBAAwB;AAchE,+BAA+B,CACpCC,OACAC;IAEA,MAAM,EAAEC,UAAU,QAAQ,EAAE,OAAGL,kCAAAA;IAC/B,MAAMM,QAAQC,2BAA2BJ,OAAOC;IAEhD,OAAO;QACL,GAAGE,KAAK;QACRD;IACF;AACF,EAAE;AASK,mCAAmC,CACxCF,OACAC;IAEA,MAAM,EAAEI,OAAO,EAAEC,OAAOC,YAAY,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGT;IAEnD,MAAM,EAAEU,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,QAAQ,EAAE,OAAGhB,kCAAAA;IAE9D,MAAM,EAAES,OAAOQ,mBAAmB,EAAE,OAAGhB,kDAAAA;IAEvC,MAAMiB,kBAAkBP,MAAOC,CAAAA,OAAO,MAAM,QAAA,CAAO;IAEnD,MAAMO,WAAWN,kBAAkBH;IAEnC,MAAMU,WAAW1B,OAAM2B,MAAM,CAAc;IAE3C,MAAMC,wBAAyDzB,gCAAAA,EAAiB0B,CAAAA;QAC9Ef,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUe;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAI1B,iCAAAA,EAAcyB,MAAME,MAAM,GAAG;YAC1DT,SAASO,OAAO;gBAAEG,MAAM;gBAASH;gBAAOd,OAAOC;gBAAciB,eAAeV;YAAoB;QAClG;IACF;IAEA,MAAMW,OAAOhC,oBAAAA,CAAKiC,MAAM,KACtBlC,wCAAAA,EACEuB,qBACAnB,6BAAAA,EAAmBmB,iBAAiB;QAClC,gBAAgBC,WAAW,SAAS;QACpC,GAAGhB,KAAK;IACV,KAEF;QACE2B,aAAaZ;QACba,cAAc;YACZ3B,KAAKA;YACLsB,MAAMR;QACR;IACF;IAGFU,KAAKpB,OAAO,GAAGc;IAEf5B,OAAMsC,SAAS,CAAC;QACdlB,WAAW;YACTL,OAAOC;YACPN,KAAKgB;QACP;QAEA,OAAO;YACLL,aAAa;gBAAEN,OAAOC;gBAAcN,KAAKgB;YAAS;QACpD;IACF,GAAG;QAACN;QAAYC;QAAcK;QAAUV;KAAa;IAErD,OAAO;QACLuB,YAAY;YACVL,MAAMV;QACR;QACAU;QACAT;QACAV,OAAOC;IACT;AACF,EAAE"}

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

@@ -50,6 +50,7 @@ const useNavSubItemStyles_unstable = (state)=>{
     const navSubItemSpecificStyles = useNavSubItemSpecificStyles();
     const { selected, density } = state;
     const isSmallDensity = density === 'small';
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
     return state;
 };

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

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

package/lib-commonjs/components/NavSubItem/useNavSubItemStyles.styles.raw.js

@@ -46,6 +46,7 @@ const useNavSubItemStyles_unstable = (state)=>{
     const navSubItemSpecificStyles = useNavSubItemSpecificStyles();
     const { selected, density } = state;
     const isSmallDensity = density === 'small';
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
     return state;
 };

package/lib-commonjs/components/NavSubItem/useNavSubItemStyles.styles.raw.js.map

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { NavDensity } from '../Nav/Nav.types';\n\n/**\n * Context value for NavSubItemGroup\n */\nexport type NavSubItemGroupCollapseMotionParams = {\n  /**\n   * The number of items in the NavSubItemGroup\n   */\n  items?: number;\n\n  /**\n   * The density of the NavItem\n   */\n  density?: NavDensity;\n};\n\nexport type NavSubItemGroupSlots = {\n  /**\n   * The root element\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Collapse motion slot\n   */\n  collapseMotion?: Slot<PresenceMotionSlotProps<NavSubItemGroupCollapseMotionParams>>;\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":[],"mappings":"AAoCA;;CAEC,GACD,WAKE"}
+{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { NavDensity } from '../Nav/Nav.types';\n\n/**\n * Context value for NavSubItemGroup\n */\nexport type NavSubItemGroupCollapseMotionParams = {\n  /**\n   * The number of items in the NavSubItemGroup\n   */\n  items?: number;\n\n  /**\n   * The density of the NavItem\n   */\n  density?: NavDensity;\n};\n\nexport type NavSubItemGroupSlots = {\n  /**\n   * The root element\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Collapse motion slot\n   */\n  collapseMotion?: Slot<PresenceMotionSlotProps<NavSubItemGroupCollapseMotionParams>>;\n};\n\nexport type NavSubItemGroupBaseSlots = Omit<NavSubItemGroupSlots, 'collapseMotion'>;\n\n/**\n * NavSubItemGroup Props\n */\nexport type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;\n\nexport type NavSubItemGroupBaseProps = ComponentProps<NavSubItemGroupBaseSlots>;\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\nexport type NavSubItemGroupBaseState = ComponentState<NavSubItemGroupBaseSlots> & Pick<NavSubItemGroupState, 'open'>;\n"],"names":[],"mappings":""}

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

@@ -18,6 +18,9 @@ _export(exports, {
     renderNavSubItemGroup_unstable: function() {
         return _renderNavSubItemGroup.renderNavSubItemGroup_unstable;
     },
+    useNavSubItemGroupBase_unstable: function() {
+        return _useNavSubItemGroup.useNavSubItemGroupBase_unstable;
+    },
     useNavSubItemGroupStyles_unstable: function() {
         return _useNavSubItemGroupStylesstyles.useNavSubItemGroupStyles_unstable;
     },

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItemGroup/index.ts"],"sourcesContent":["export { NavSubItemGroup } from './NavSubItemGroup';\nexport type { NavSubItemGroupSlots, NavSubItemGroupProps, NavSubItemGroupState } from './NavSubItemGroup.types';\nexport { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';\nexport { useNavSubItemGroup_unstable } from './useNavSubItemGroup';\nexport { useNavSubItemGroupStyles_unstable, navSubItemGroupClassNames } from './useNavSubItemGroupStyles.styles';\n"],"names":["NavSubItemGroup","renderNavSubItemGroup_unstable","useNavSubItemGroup_unstable","useNavSubItemGroupStyles_unstable","navSubItemGroupClassNames"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAIoBI,yDAAyB;;;eAF5DH,qDAA8B;;;eAE9BE,iEAAiC;;;eADjCD,+CAA2B;;;iCAHJ,oBAAoB;uCAEL,0BAA0B;oCAC7B,uBAAuB;gDACU,oCAAoC"}
+{"version":3,"sources":["../src/components/NavSubItemGroup/index.ts"],"sourcesContent":["export { NavSubItemGroup } from './NavSubItemGroup';\nexport type {\n  NavSubItemGroupSlots,\n  NavSubItemGroupProps,\n  NavSubItemGroupState,\n  NavSubItemGroupBaseSlots,\n  NavSubItemGroupBaseProps,\n  NavSubItemGroupBaseState,\n} from './NavSubItemGroup.types';\nexport { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';\nexport { useNavSubItemGroup_unstable, useNavSubItemGroupBase_unstable } from './useNavSubItemGroup';\nexport { useNavSubItemGroupStyles_unstable, navSubItemGroupClassNames } from './useNavSubItemGroupStyles.styles';\n"],"names":["NavSubItemGroup","renderNavSubItemGroup_unstable","useNavSubItemGroup_unstable","useNavSubItemGroupBase_unstable","useNavSubItemGroupStyles_unstable","navSubItemGroupClassNames"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAWoBK,yDAAyB;;;eAF5DJ,qDAA8B;;;eACDE,mDAA+B;;;eAC5DC,iEAAiC;;;eADjCF,+CAA2B;;;iCAVJ,oBAAoB;uCASL,0BAA0B;oCACI,uBAAuB;gDACvB,oCAAoC"}

package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroup.js

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useNavSubItemGroup_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useNavSubItemGroupBase_unstable: function() {
+        return useNavSubItemGroupBase_unstable;
+    },
+    useNavSubItemGroup_unstable: function() {
         return useNavSubItemGroup_unstable;
     }
 });
@@ -14,25 +22,35 @@ const _reactmotion = require("@fluentui/react-motion");
 const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
 const _NavCategoryContext = require("../NavCategoryContext");
 const useNavSubItemGroup_unstable = (props, ref)=>{
+    const state = useNavSubItemGroupBase_unstable(props, ref);
+    return {
+        ...state,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            collapseMotion: _reactmotioncomponentspreview.Collapse
+        },
+        collapseMotion: (0, _reactmotion.presenceMotionSlot)(props.collapseMotion, {
+            elementType: _reactmotioncomponentspreview.Collapse,
+            defaultProps: {
+                visible: state.open,
+                unmountOnExit: true
+            }
+        })
+    };
+};
+const useNavSubItemGroupBase_unstable = (props, ref)=>{
     const { open } = (0, _NavCategoryContext.useNavCategoryContext_unstable)();
     return {
         open,
         components: {
-            root: 'div',
-            collapseMotion: _reactmotioncomponentspreview.Collapse
+            root: 'div'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
             ...props,
             ref
         }), {
             elementType: 'div'
-        }),
-        collapseMotion: (0, _reactmotion.presenceMotionSlot)(props.collapseMotion, {
-            elementType: _reactmotioncomponentspreview.Collapse,
-            defaultProps: {
-                visible: open,
-                unmountOnExit: true
-            }
         })
     };
 };

package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\n\nimport type { NavSubItemGroupProps, NavSubItemGroupState } from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\n/**\n * Create the state required to render NavSubItemGroup.\n *\n * The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n *\n * @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n  props: NavSubItemGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n  const { open } = useNavCategoryContext_unstable();\n\n  return {\n    open,\n    components: {\n      root: 'div',\n      collapseMotion: Collapse,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref,\n      }),\n      { elementType: 'div' },\n    ),\n\n    collapseMotion: presenceMotionSlot(props.collapseMotion, {\n      elementType: Collapse,\n      defaultProps: {\n        visible: open,\n        unmountOnExit: true,\n      },\n    }),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","presenceMotionSlot","Collapse","useNavCategoryContext_unstable","useNavSubItemGroup_unstable","props","ref","open","components","root","collapseMotion","always","elementType","defaultProps","visible","unmountOnExit"],"mappings":"AAAA;;;;;+BAmBaK;;;;;;gCAhBkC,4BAA4B;6BACxC,yBAAyB;8CACnC,4CAA4C;oCAGtB,wBAAwB;AAWhE,oCAAoC,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,OAAGJ,kDAAAA;IAEjB,OAAO;QACLI;QACAC,YAAY;YACVC,MAAM;YACNC,gBAAgBR,sCAAAA;QAClB;QAEAO,MAAMT,oBAAAA,CAAKW,MAAM,KACfZ,wCAAAA,EAAyB,OAAO;YAC9B,GAAGM,KAAK;YACRC;QACF,IACA;YAAEM,aAAa;QAAM;QAGvBF,oBAAgBT,+BAAAA,EAAmBI,MAAMK,cAAc,EAAE;YACvDE,aAAaV,sCAAAA;YACbW,cAAc;gBACZC,SAASP;gBACTQ,eAAe;YACjB;QACF;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\n\nimport type {\n  NavSubItemGroupBaseProps,\n  NavSubItemGroupBaseState,\n  NavSubItemGroupProps,\n  NavSubItemGroupState,\n} from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\n/**\n * Create the state required to render NavSubItemGroup.\n *\n * The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n *\n * @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n  props: NavSubItemGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n  const state = useNavSubItemGroupBase_unstable(props, ref);\n\n  return {\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      collapseMotion: Collapse,\n    },\n    collapseMotion: presenceMotionSlot(props.collapseMotion, {\n      elementType: Collapse,\n      defaultProps: {\n        visible: state.open,\n        unmountOnExit: true,\n      },\n    }),\n  };\n};\n\n/**\n * The base state used in rendering NavSubItemGroup, excluding any design-related properties such as motion props.\n *\n * @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n * @returns - The base state of NavSubItemGroup\n */\nexport const useNavSubItemGroupBase_unstable = (\n  props: NavSubItemGroupBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupBaseState => {\n  const { open } = useNavCategoryContext_unstable();\n\n  return {\n    open,\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","presenceMotionSlot","Collapse","useNavCategoryContext_unstable","useNavSubItemGroup_unstable","props","ref","state","useNavSubItemGroupBase_unstable","components","collapseMotion","elementType","defaultProps","visible","open","unmountOnExit","root","always"],"mappings":"AAAA;;;;;;;;;;;;IAsDaS,+BAAAA;;;+BA9BAJ;;;;gCArBkC,4BAA4B;6BACxC,yBAAyB;8CACnC,4CAA4C;oCAQtB,wBAAwB;AAWhE,MAAMA,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,QAAQC,gCAAgCH,OAAOC;IAErD,OAAO;QACL,GAAGC,KAAK;QACRE,YAAY;YACV,4DAA4D;YAC5D,GAAGF,MAAME,UAAU;YACnBC,gBAAgBR,sCAAAA;QAClB;QACAQ,oBAAgBT,+BAAAA,EAAmBI,MAAMK,cAAc,EAAE;YACvDC,aAAaT,sCAAAA;YACbU,cAAc;gBACZC,SAASN,MAAMO,IAAI;gBACnBC,eAAe;YACjB;QACF;IACF;AACF,EAAE;AASK,wCAAwC,CAC7CV,OACAC;IAEA,MAAM,EAAEQ,IAAI,EAAE,OAAGX,kDAAAA;IAEjB,OAAO;QACLW;QACAL,YAAY;YACVO,MAAM;QACR;QAEAA,MAAMhB,oBAAAA,CAAKiB,MAAM,KACflB,wCAAAA,EAAyB,OAAO;YAC9B,GAAGM,KAAK;YACRC;QACF,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js

@@ -46,6 +46,7 @@ const navSubItemGroupClassNames = {
 const useNavSubItemGroupStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navSubItemGroupClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n    root: 'fui-NavSubItemGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        flexShrink: 0,\n        transform: 'translateZ(0)',\n        overflow: 'hidden'\n    }\n});\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","Bnnss6s","Bz10aip","B68tc82","Bmxbyg5","Bpg54ce","d","p","useNavSubItemGroupStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,yBAAyB;;;qCAcY;eAAjCU;;;uBAfwB,gBAAgB;AAClD,kCAAkC;IACrCT,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAMrB,CAAC;AAGS,2CAA2CE,KAAK,IAAG;IAC1D,aAAa;IACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;IAC1BS,KAAK,CAACV,IAAI,CAACY,SAAS,OAAGd,mBAAY,EAACC,yBAAyB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;IACtG,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n    root: 'fui-NavSubItemGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        flexShrink: 0,\n        transform: 'translateZ(0)',\n        overflow: 'hidden'\n    }\n});\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","Bnnss6s","Bz10aip","B68tc82","Bmxbyg5","Bpg54ce","d","p","useNavSubItemGroupStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,yBAAyB;;;qCAcY;eAAjCU;;;uBAfwB,gBAAgB;AAClD,kCAAkC;IACrCT,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAMrB,CAAC;AAGS,2CAA2CE,KAAK,IAAG;IAC1D,aAAa;IACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAS,KAAK,CAACV,IAAI,CAACY,SAAS,OAAGd,mBAAY,EAACC,yBAAyB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;IACtG,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.raw.js

@@ -33,6 +33,7 @@ const navSubItemGroupClassNames = {
 const useNavSubItemGroupStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(navSubItemGroupClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupSlots, NavSubItemGroupState } from './NavSubItemGroup.types';\n\nexport const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>> = {\n  root: 'fui-NavSubItemGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    flexShrink: 0,\n    transform: 'translateZ(0)',\n    overflow: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */\nexport const useNavSubItemGroupStyles_unstable = (state: NavSubItemGroupState): NavSubItemGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navSubItemGroupClassNames","root","useStyles","flexShrink","transform","overflow","useNavSubItemGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;6BAMaE;;;qCAkBAM;;;;uBAtB4B,iBAAiB;AAInD,MAAMN,4BAA0F;IACrGC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,YAAY;QACZC,WAAW;QACXC,UAAU;IACZ;AACF;AAKO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASN;IAEfK,MAAMN,IAAI,CAACQ,SAAS,OAAGV,mBAAAA,EAAaC,0BAA0BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAErG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupSlots, NavSubItemGroupState } from './NavSubItemGroup.types';\n\nexport const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>> = {\n  root: 'fui-NavSubItemGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    flexShrink: 0,\n    transform: 'translateZ(0)',\n    overflow: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */\nexport const useNavSubItemGroupStyles_unstable = (state: NavSubItemGroupState): NavSubItemGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navSubItemGroupClassNames","root","useStyles","flexShrink","transform","overflow","useNavSubItemGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,yBAAAA;;;qCAkBAM;eAAAA;;;uBAtB4B,iBAAiB;AAInD,kCAAgG;IACrGL,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,YAAY;QACZC,WAAW;QACXC,UAAU;IACZ;AACF;AAKO,0CAA0C,CAACE;IAChD;IAEA,MAAMC,SAASN;IAEf,oDAAoD;IACpDK,MAAMN,IAAI,CAACQ,SAAS,OAAGV,mBAAAA,EAAaC,0BAA0BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAErG,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.js

@@ -183,17 +183,22 @@ const useSplitNavItemStyles_unstable = (state)=>{
     'use no memo';
     const splitNavItemStyles = useSplitNaveItemStyles();
     const sharedRootClassNames = (0, _sharedNavStylesstyles.useRootDefaultClassName)();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);
     if (state.navItem) {
+        // eslint-disable-next-line react-hooks/immutability
         state.navItem.className = (0, _react.mergeClasses)(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
     }
     if (state.actionButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.actionButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
     }
     if (state.toggleButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.toggleButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
     }
     if (state.menuButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.menuButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
     }
     return state;

package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSplitNavItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { motionTokens } from '@fluentui/react-motion';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const splitNavItemClassNames = {\n    root: 'fui-SplitNavItem',\n    navItem: 'fui-SplitNavItem__navItem',\n    actionButton: 'fui-SplitNavItem__actionButton',\n    toggleButton: 'fui-SplitNavItem__toggleButton',\n    menuButton: 'fui-SplitNavItem__menuButton',\n    /**\n   * Tooltips don't have a class name prop, so this is just to satisfy the linter.\n   */ actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',\n    toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',\n    menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip'\n};\n// Don't use makeResetStyles here because the sub components call it once and\n// This links says that makeResetStyles should only be called once per element\n// https://griffel.js.org/react/api/make-reset-styles/#limitations\nconst { actionButton, toggleButton, menuButton } = splitNavItemClassNames;\nconst buttonHoverStyles = {\n    [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {\n        opacity: 1,\n        pointerEvents: 'auto'\n    }\n};\n/**\n * Styles for the root slot\n */ const useSplitNaveItemStyles = makeStyles({\n    baseRoot: {\n        display: 'flex',\n        gap: 'unset',\n        alignItems: 'stretch',\n        padding: 'unset',\n        textAlign: 'unset',\n        backgroundColor: navItemTokens.backgroundColor,\n        ...navItemTokens.transitionTokens,\n        ':hover': {\n            backgroundColor: navItemTokens.backgroundColorHover,\n            ...buttonHoverStyles\n        },\n        ':focus-within': buttonHoverStyles,\n        ':active': {\n            backgroundColor: navItemTokens.backgroundColorPressed\n        }\n    },\n    baseNavItem: {\n        // styles that we want to disagree with the default on\n        display: 'flex',\n        textTransform: 'none',\n        alignSelf: 'stretch',\n        textAlign: 'left',\n        position: 'relative',\n        justifyContent: 'start',\n        gap: tokens.spacingVerticalL,\n        backgroundColor: 'transparent'\n    },\n    baseSecondary: {\n        minWidth: '28px',\n        paddingInlineEnd: '12px',\n        paddingInlineStart: '5px',\n        paddingBlockStart: '5px',\n        alignItems: 'start'\n    },\n    baseMedium: {\n        paddingBlockStart: '9px'\n    },\n    baseLarge: {\n        paddingBlockStart: '12px'\n    },\n    hoverAction: {\n        opacity: 0,\n        pointerEvents: 'none',\n        transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,\n        willChange: 'opacity'\n    }\n});\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */ export const useSplitNavItemStyles_unstable = (state)=>{\n    'use no memo';\n    const splitNavItemStyles = useSplitNaveItemStyles();\n    const sharedRootClassNames = useRootDefaultClassName();\n    state.root.className = mergeClasses(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);\n    if (state.navItem) {\n        state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);\n    }\n    if (state.actionButton) {\n        state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);\n    }\n    if (state.toggleButton) {\n        state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);\n    }\n    if (state.menuButton) {\n        state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","motionTokens","navItemTokens","useRootDefaultClassName","splitNavItemClassNames","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","baseRoot","mc9l5x","i8kkvl","Belr9w4","rmohyg","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","De3pzq","B3o57yi","Bkqvd7p","Bmy1vo4","Jwef8y","xwko9w","mcc9px","B02v5zz","i4x37a","ecr2s2","baseNavItem","B9bfxx9","qb2dma","qhf8xq","Brf1p80","baseSecondary","Bf4jedk","Bnt446c","B1hrpyx","rjzwhg","baseMedium","baseLarge","hoverAction","abs64n","Bkecrkj","Bn62ygk","Cwk7ip","Bi2q7bf","Es3by","d","p","h","w","a","useSplitNavItemStyles_unstable","state","splitNavItemStyles","sharedRootClassNames","className","density"],"mappings":"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"}
+{"version":3,"sources":["useSplitNavItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { motionTokens } from '@fluentui/react-motion';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const splitNavItemClassNames = {\n    root: 'fui-SplitNavItem',\n    navItem: 'fui-SplitNavItem__navItem',\n    actionButton: 'fui-SplitNavItem__actionButton',\n    toggleButton: 'fui-SplitNavItem__toggleButton',\n    menuButton: 'fui-SplitNavItem__menuButton',\n    /**\n   * Tooltips don't have a class name prop, so this is just to satisfy the linter.\n   */ actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',\n    toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',\n    menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip'\n};\n// Don't use makeResetStyles here because the sub components call it once and\n// This links says that makeResetStyles should only be called once per element\n// https://griffel.js.org/react/api/make-reset-styles/#limitations\nconst { actionButton, toggleButton, menuButton } = splitNavItemClassNames;\nconst buttonHoverStyles = {\n    [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {\n        opacity: 1,\n        pointerEvents: 'auto'\n    }\n};\n/**\n * Styles for the root slot\n */ const useSplitNaveItemStyles = makeStyles({\n    baseRoot: {\n        display: 'flex',\n        gap: 'unset',\n        alignItems: 'stretch',\n        padding: 'unset',\n        textAlign: 'unset',\n        backgroundColor: navItemTokens.backgroundColor,\n        ...navItemTokens.transitionTokens,\n        ':hover': {\n            backgroundColor: navItemTokens.backgroundColorHover,\n            ...buttonHoverStyles\n        },\n        ':focus-within': buttonHoverStyles,\n        ':active': {\n            backgroundColor: navItemTokens.backgroundColorPressed\n        }\n    },\n    baseNavItem: {\n        // styles that we want to disagree with the default on\n        display: 'flex',\n        textTransform: 'none',\n        alignSelf: 'stretch',\n        textAlign: 'left',\n        position: 'relative',\n        justifyContent: 'start',\n        gap: tokens.spacingVerticalL,\n        backgroundColor: 'transparent'\n    },\n    baseSecondary: {\n        minWidth: '28px',\n        paddingInlineEnd: '12px',\n        paddingInlineStart: '5px',\n        paddingBlockStart: '5px',\n        alignItems: 'start'\n    },\n    baseMedium: {\n        paddingBlockStart: '9px'\n    },\n    baseLarge: {\n        paddingBlockStart: '12px'\n    },\n    hoverAction: {\n        opacity: 0,\n        pointerEvents: 'none',\n        transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,\n        willChange: 'opacity'\n    }\n});\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */ export const useSplitNavItemStyles_unstable = (state)=>{\n    'use no memo';\n    const splitNavItemStyles = useSplitNaveItemStyles();\n    const sharedRootClassNames = useRootDefaultClassName();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);\n    if (state.navItem) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);\n    }\n    if (state.actionButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);\n    }\n    if (state.toggleButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);\n    }\n    if (state.menuButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","motionTokens","navItemTokens","useRootDefaultClassName","splitNavItemClassNames","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","baseRoot","mc9l5x","i8kkvl","Belr9w4","rmohyg","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","De3pzq","B3o57yi","Bkqvd7p","Bmy1vo4","Jwef8y","xwko9w","mcc9px","B02v5zz","i4x37a","ecr2s2","baseNavItem","B9bfxx9","qb2dma","qhf8xq","Brf1p80","baseSecondary","Bf4jedk","Bnt446c","B1hrpyx","rjzwhg","baseMedium","baseLarge","hoverAction","abs64n","Bkecrkj","Bn62ygk","Cwk7ip","Bi2q7bf","Es3by","d","p","h","w","a","useSplitNavItemStyles_unstable","state","splitNavItemStyles","sharedRootClassNames","className","density"],"mappings":"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"}

package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.raw.js

@@ -98,17 +98,22 @@ const useSplitNavItemStyles_unstable = (state)=>{
     'use no memo';
     const splitNavItemStyles = useSplitNaveItemStyles();
     const sharedRootClassNames = (0, _sharedNavStylesstyles.useRootDefaultClassName)();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);
     if (state.navItem) {
+        // eslint-disable-next-line react-hooks/immutability
         state.navItem.className = (0, _react.mergeClasses)(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
     }
     if (state.actionButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.actionButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
     }
     if (state.toggleButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.toggleButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
     }
     if (state.menuButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.menuButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
     }
     return state;

package/lib-commonjs/components/SplitNavItem/useSplitNavItemStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SplitNavItem/useSplitNavItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { motionTokens } from '@fluentui/react-motion';\n\nimport type { SplitNavItemSlots, SplitNavItemState } from './SplitNavItem.types';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const splitNavItemClassNames: SlotClassNames<SplitNavItemSlots> = {\n  root: 'fui-SplitNavItem',\n  navItem: 'fui-SplitNavItem__navItem',\n  actionButton: 'fui-SplitNavItem__actionButton',\n  toggleButton: 'fui-SplitNavItem__toggleButton',\n  menuButton: 'fui-SplitNavItem__menuButton',\n  /**\n   * Tooltips don't have a class name prop, so this is just to satisfy the linter.\n   */\n  actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',\n  toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',\n  menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip',\n};\n// Don't use makeResetStyles here because the sub components call it once and\n// This links says that makeResetStyles should only be called once per element\n// https://griffel.js.org/react/api/make-reset-styles/#limitations\n\nconst { actionButton, toggleButton, menuButton } = splitNavItemClassNames;\nconst buttonHoverStyles = {\n  [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {\n    opacity: 1,\n    pointerEvents: 'auto',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useSplitNaveItemStyles = makeStyles({\n  baseRoot: {\n    display: 'flex',\n    gap: 'unset',\n    alignItems: 'stretch',\n    padding: 'unset',\n    textAlign: 'unset',\n    backgroundColor: navItemTokens.backgroundColor,\n    ...navItemTokens.transitionTokens,\n\n    ':hover': {\n      backgroundColor: navItemTokens.backgroundColorHover,\n      ...buttonHoverStyles,\n    },\n\n    ':focus-within': buttonHoverStyles,\n\n    ':active': {\n      backgroundColor: navItemTokens.backgroundColorPressed,\n    },\n  },\n  baseNavItem: {\n    // styles that we want to disagree with the default on\n    display: 'flex',\n    textTransform: 'none',\n    alignSelf: 'stretch',\n    textAlign: 'left',\n    position: 'relative',\n    justifyContent: 'start',\n    gap: tokens.spacingVerticalL,\n    backgroundColor: 'transparent',\n  },\n  baseSecondary: {\n    minWidth: '28px',\n    paddingInlineEnd: '12px',\n    paddingInlineStart: '5px',\n    paddingBlockStart: '5px',\n    alignItems: 'start',\n  },\n  baseMedium: {\n    paddingBlockStart: '9px',\n  },\n\n  baseLarge: {\n    paddingBlockStart: '12px',\n  },\n\n  hoverAction: {\n    opacity: 0,\n    pointerEvents: 'none',\n    transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,\n    willChange: 'opacity',\n  },\n});\n\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */\nexport const useSplitNavItemStyles_unstable = (state: SplitNavItemState): SplitNavItemState => {\n  'use no memo';\n\n  const splitNavItemStyles = useSplitNaveItemStyles();\n  const sharedRootClassNames = useRootDefaultClassName();\n\n  state.root.className = mergeClasses(\n    splitNavItemClassNames.root,\n    sharedRootClassNames,\n    splitNavItemStyles.baseRoot,\n    state.root.className,\n  );\n\n  if (state.navItem) {\n    state.navItem.className = mergeClasses(\n      splitNavItemClassNames.navItem,\n      splitNavItemStyles.baseNavItem,\n      state.navItem.className,\n    );\n  }\n\n  if (state.actionButton) {\n    state.actionButton.className = mergeClasses(\n      splitNavItemClassNames.actionButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.actionButton.className,\n    );\n  }\n\n  if (state.toggleButton) {\n    state.toggleButton.className = mergeClasses(\n      splitNavItemClassNames.toggleButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.toggleButton.className,\n    );\n  }\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      splitNavItemClassNames.menuButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.menuButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","motionTokens","navItemTokens","useRootDefaultClassName","splitNavItemClassNames","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","baseRoot","display","gap","alignItems","padding","textAlign","backgroundColor","transitionTokens","backgroundColorHover","backgroundColorPressed","baseNavItem","textTransform","alignSelf","position","justifyContent","spacingVerticalL","baseSecondary","minWidth","paddingInlineEnd","paddingInlineStart","paddingBlockStart","baseMedium","baseLarge","hoverAction","transition","durationFast","curveEasyEase","willChange","useSplitNavItemStyles_unstable","state","splitNavItemStyles","sharedRootClassNames","className","density"],"mappings":"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"}
+{"version":3,"sources":["../src/components/SplitNavItem/useSplitNavItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { motionTokens } from '@fluentui/react-motion';\n\nimport type { SplitNavItemSlots, SplitNavItemState } from './SplitNavItem.types';\nimport { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const splitNavItemClassNames: SlotClassNames<SplitNavItemSlots> = {\n  root: 'fui-SplitNavItem',\n  navItem: 'fui-SplitNavItem__navItem',\n  actionButton: 'fui-SplitNavItem__actionButton',\n  toggleButton: 'fui-SplitNavItem__toggleButton',\n  menuButton: 'fui-SplitNavItem__menuButton',\n  /**\n   * Tooltips don't have a class name prop, so this is just to satisfy the linter.\n   */\n  actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',\n  toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',\n  menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip',\n};\n// Don't use makeResetStyles here because the sub components call it once and\n// This links says that makeResetStyles should only be called once per element\n// https://griffel.js.org/react/api/make-reset-styles/#limitations\n\nconst { actionButton, toggleButton, menuButton } = splitNavItemClassNames;\nconst buttonHoverStyles = {\n  [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {\n    opacity: 1,\n    pointerEvents: 'auto',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useSplitNaveItemStyles = makeStyles({\n  baseRoot: {\n    display: 'flex',\n    gap: 'unset',\n    alignItems: 'stretch',\n    padding: 'unset',\n    textAlign: 'unset',\n    backgroundColor: navItemTokens.backgroundColor,\n    ...navItemTokens.transitionTokens,\n\n    ':hover': {\n      backgroundColor: navItemTokens.backgroundColorHover,\n      ...buttonHoverStyles,\n    },\n\n    ':focus-within': buttonHoverStyles,\n\n    ':active': {\n      backgroundColor: navItemTokens.backgroundColorPressed,\n    },\n  },\n  baseNavItem: {\n    // styles that we want to disagree with the default on\n    display: 'flex',\n    textTransform: 'none',\n    alignSelf: 'stretch',\n    textAlign: 'left',\n    position: 'relative',\n    justifyContent: 'start',\n    gap: tokens.spacingVerticalL,\n    backgroundColor: 'transparent',\n  },\n  baseSecondary: {\n    minWidth: '28px',\n    paddingInlineEnd: '12px',\n    paddingInlineStart: '5px',\n    paddingBlockStart: '5px',\n    alignItems: 'start',\n  },\n  baseMedium: {\n    paddingBlockStart: '9px',\n  },\n\n  baseLarge: {\n    paddingBlockStart: '12px',\n  },\n\n  hoverAction: {\n    opacity: 0,\n    pointerEvents: 'none',\n    transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,\n    willChange: 'opacity',\n  },\n});\n\n/**\n * Apply styling to the SplitNavItem slots based on the state\n */\nexport const useSplitNavItemStyles_unstable = (state: SplitNavItemState): SplitNavItemState => {\n  'use no memo';\n\n  const splitNavItemStyles = useSplitNaveItemStyles();\n  const sharedRootClassNames = useRootDefaultClassName();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    splitNavItemClassNames.root,\n    sharedRootClassNames,\n    splitNavItemStyles.baseRoot,\n    state.root.className,\n  );\n\n  if (state.navItem) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.navItem.className = mergeClasses(\n      splitNavItemClassNames.navItem,\n      splitNavItemStyles.baseNavItem,\n      state.navItem.className,\n    );\n  }\n\n  if (state.actionButton) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.actionButton.className = mergeClasses(\n      splitNavItemClassNames.actionButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.actionButton.className,\n    );\n  }\n\n  if (state.toggleButton) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.toggleButton.className = mergeClasses(\n      splitNavItemClassNames.toggleButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.toggleButton.className,\n    );\n  }\n\n  if (state.menuButton) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.menuButton.className = mergeClasses(\n      splitNavItemClassNames.menuButton,\n      splitNavItemStyles.baseSecondary,\n      splitNavItemStyles.hoverAction,\n      state.density === 'medium' && splitNavItemStyles.baseMedium,\n      state.menuButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","motionTokens","navItemTokens","useRootDefaultClassName","splitNavItemClassNames","root","navItem","actionButton","toggleButton","menuButton","actionButtonTooltip","toggleButtonTooltip","menuButtonTooltip","buttonHoverStyles","opacity","pointerEvents","useSplitNaveItemStyles","baseRoot","display","gap","alignItems","padding","textAlign","backgroundColor","transitionTokens","backgroundColorHover","backgroundColorPressed","baseNavItem","textTransform","alignSelf","position","justifyContent","spacingVerticalL","baseSecondary","minWidth","paddingInlineEnd","paddingInlineStart","paddingBlockStart","baseMedium","baseLarge","hoverAction","transition","durationFast","curveEasyEase","willChange","useSplitNavItemStyles_unstable","state","splitNavItemStyles","sharedRootClassNames","className","density"],"mappings":"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"}