@fluentui/react-nav 9.3.24 → 9.4.1

package/lib/components/AppItemStatic/useAppItemStaticStyles.styles.js

@@ -22,8 +22,6 @@ const useAppItemStaticStyles = /*#__PURE__*/__styles({
  * Apply styling to the AppItemStatic slots based on the state
  */
 export const useAppItemStaticStyles_unstable = state => {
-  'use no memo';
-
   const rootDefaultClassName = useRootDefaultClassName();
   const iconStyles = useIconStyles();
   const appItemSpecificStyles = useAppItemStyles();
@@ -32,8 +30,10 @@ export const useAppItemStaticStyles_unstable = state => {
     density,
     icon
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(rootDefaultClassName, appItemStaticClassNames.root, appItemSpecificStyles.root, appItemStaticStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);
   }
   return state;

package/lib/components/AppItemStatic/useAppItemStaticStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useAppItemStyles","useIconStyles","useRootDefaultClassName","appItemStaticClassNames","root","icon","useAppItemStaticStyles","Bceei9c","Jwef8y","ecr2s2","d","h","a","useAppItemStaticStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","appItemStaticStyles","density","className","small","absentIconRootAdjustment","base"],"sources":["useAppItemStaticStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const appItemStaticClassNames = {\n    root: 'fui-AppItemStatic',\n    icon: 'fui-AppItemStatic__icon'\n};\nconst useAppItemStaticStyles = makeStyles({\n    root: {\n        cursor: 'default',\n        ':hover': {\n            backgroundColor: 'unset'\n        },\n        ':active': {\n            backgroundColor: 'unset'\n        }\n    }\n});\n/**\n * Apply styling to the AppItemStatic slots based on the state\n */ export const useAppItemStaticStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const iconStyles = useIconStyles();\n    const appItemSpecificStyles = useAppItemStyles();\n    const appItemStaticStyles = useAppItemStaticStyles();\n    const { density, icon } = state;\n    state.root.className = mergeClasses(rootDefaultClassName, appItemStaticClassNames.root, appItemSpecificStyles.root, appItemStaticStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,2BAA2B;AAClF,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,sBAAsB,gBAAGR,QAAA;EAAAM,IAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAU9B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EACtD,MAAMc,UAAU,GAAGf,aAAa,CAAC,CAAC;EAClC,MAAMgB,qBAAqB,GAAGjB,gBAAgB,CAAC,CAAC;EAChD,MAAMkB,mBAAmB,GAAGZ,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEa,OAAO;IAAEd;EAAK,CAAC,GAAGS,KAAK;EAC/BA,KAAK,CAACV,IAAI,CAACgB,SAAS,GAAGrB,YAAY,CAACgB,oBAAoB,EAAEZ,uBAAuB,CAACC,IAAI,EAAEa,qBAAqB,CAACb,IAAI,EAAEc,mBAAmB,CAACd,IAAI,EAAEe,OAAO,KAAK,OAAO,IAAIF,qBAAqB,CAACI,KAAK,EAAE,CAAChB,IAAI,IAAIY,qBAAqB,CAACK,wBAAwB,EAAER,KAAK,CAACV,IAAI,CAACgB,SAAS,CAAC;EAChR,IAAIN,KAAK,CAACT,IAAI,EAAE;IACZS,KAAK,CAACT,IAAI,CAACe,SAAS,GAAGrB,YAAY,CAACI,uBAAuB,CAACE,IAAI,EAAEW,UAAU,CAACO,IAAI,EAAET,KAAK,CAACT,IAAI,CAACe,SAAS,CAAC;EAC5G;EACA,OAAON,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","useAppItemStyles","useIconStyles","useRootDefaultClassName","appItemStaticClassNames","root","icon","useAppItemStaticStyles","Bceei9c","Jwef8y","ecr2s2","d","h","a","useAppItemStaticStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","appItemStaticStyles","density","className","small","absentIconRootAdjustment","base"],"sources":["useAppItemStaticStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\nexport const appItemStaticClassNames = {\n    root: 'fui-AppItemStatic',\n    icon: 'fui-AppItemStatic__icon'\n};\nconst useAppItemStaticStyles = makeStyles({\n    root: {\n        cursor: 'default',\n        ':hover': {\n            backgroundColor: 'unset'\n        },\n        ':active': {\n            backgroundColor: 'unset'\n        }\n    }\n});\n/**\n * Apply styling to the AppItemStatic slots based on the state\n */ export const useAppItemStaticStyles_unstable = (state)=>{\n    const rootDefaultClassName = useRootDefaultClassName();\n    const iconStyles = useIconStyles();\n    const appItemSpecificStyles = useAppItemStyles();\n    const appItemStaticStyles = useAppItemStaticStyles();\n    const { density, icon } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(rootDefaultClassName, appItemStaticClassNames.root, appItemSpecificStyles.root, appItemStaticStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,2BAA2B;AAClF,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,sBAAsB,gBAAGR,QAAA;EAAAM,IAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAU9B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EACtD,MAAMc,UAAU,GAAGf,aAAa,CAAC,CAAC;EAClC,MAAMgB,qBAAqB,GAAGjB,gBAAgB,CAAC,CAAC;EAChD,MAAMkB,mBAAmB,GAAGZ,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEa,OAAO;IAAEd;EAAK,CAAC,GAAGS,KAAK;EAC/B;EACAA,KAAK,CAACV,IAAI,CAACgB,SAAS,GAAGrB,YAAY,CAACgB,oBAAoB,EAAEZ,uBAAuB,CAACC,IAAI,EAAEa,qBAAqB,CAACb,IAAI,EAAEc,mBAAmB,CAACd,IAAI,EAAEe,OAAO,KAAK,OAAO,IAAIF,qBAAqB,CAACI,KAAK,EAAE,CAAChB,IAAI,IAAIY,qBAAqB,CAACK,wBAAwB,EAAER,KAAK,CAACV,IAAI,CAACgB,SAAS,CAAC;EAChR,IAAIN,KAAK,CAACT,IAAI,EAAE;IACZ;IACAS,KAAK,CAACT,IAAI,CAACe,SAAS,GAAGrB,YAAY,CAACI,uBAAuB,CAACE,IAAI,EAAEW,UAAU,CAACO,IAAI,EAAET,KAAK,CAACT,IAAI,CAACe,SAAS,CAAC;EAC5G;EACA,OAAON,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/AppItemStatic/useAppItemStaticStyles.styles.raw.js

@@ -20,14 +20,15 @@ const useAppItemStaticStyles = makeStyles({
 /**
  * Apply styling to the AppItemStatic slots based on the state
  */ export const useAppItemStaticStyles_unstable = (state)=>{
-    'use no memo';
     const rootDefaultClassName = useRootDefaultClassName();
     const iconStyles = useIconStyles();
     const appItemSpecificStyles = useAppItemStyles();
     const appItemStaticStyles = useAppItemStaticStyles();
     const { density, icon } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(rootDefaultClassName, appItemStaticClassNames.root, appItemSpecificStyles.root, appItemStaticStyles.root, density === 'small' && appItemSpecificStyles.small, !icon && appItemSpecificStyles.absentIconRootAdjustment, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);
     }
     return state;

package/lib/components/AppItemStatic/useAppItemStaticStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AppItemStatic/useAppItemStaticStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { AppItemStaticSlots, AppItemStaticState } from './AppItemStatic.types';\nimport { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const appItemStaticClassNames: SlotClassNames<AppItemStaticSlots> = {\n  root: 'fui-AppItemStatic',\n  icon: 'fui-AppItemStatic__icon',\n};\n\nconst useAppItemStaticStyles = makeStyles({\n  root: {\n    cursor: 'default',\n    ':hover': {\n      backgroundColor: 'unset',\n    },\n    ':active': {\n      backgroundColor: 'unset',\n    },\n  },\n});\n\n/**\n * Apply styling to the AppItemStatic slots based on the state\n */\nexport const useAppItemStaticStyles_unstable = (state: AppItemStaticState): AppItemStaticState => {\n  'use no memo';\n\n  const rootDefaultClassName = useRootDefaultClassName();\n  const iconStyles = useIconStyles();\n  const appItemSpecificStyles = useAppItemStyles();\n  const appItemStaticStyles = useAppItemStaticStyles();\n\n  const { density, icon } = state;\n\n  state.root.className = mergeClasses(\n    rootDefaultClassName,\n    appItemStaticClassNames.root,\n    appItemSpecificStyles.root,\n    appItemStaticStyles.root,\n    density === 'small' && appItemSpecificStyles.small,\n    !icon && appItemSpecificStyles.absentIconRootAdjustment,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useAppItemStyles","useIconStyles","useRootDefaultClassName","appItemStaticClassNames","root","icon","useAppItemStaticStyles","cursor","backgroundColor","useAppItemStaticStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","appItemStaticStyles","density","className","small","absentIconRootAdjustment","base"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gBAAgB,QAAQ,qCAAqC;AACtE,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,4BAA4B;AAEnF,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,yBAAyBR,WAAW;IACxCM,MAAM;QACJG,QAAQ;QACR,UAAU;YACRC,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,uBAAuBT;IAC7B,MAAMU,aAAaX;IACnB,MAAMY,wBAAwBb;IAC9B,MAAMc,sBAAsBR;IAE5B,MAAM,EAAES,OAAO,EAAEV,IAAI,EAAE,GAAGK;IAE1BA,MAAMN,IAAI,CAACY,SAAS,GAAGjB,aACrBY,sBACAR,wBAAwBC,IAAI,EAC5BS,sBAAsBT,IAAI,EAC1BU,oBAAoBV,IAAI,EACxBW,YAAY,WAAWF,sBAAsBI,KAAK,EAClD,CAACZ,QAAQQ,sBAAsBK,wBAAwB,EACvDR,MAAMN,IAAI,CAACY,SAAS;IAGtB,IAAIN,MAAML,IAAI,EAAE;QACdK,MAAML,IAAI,CAACW,SAAS,GAAGjB,aAAaI,wBAAwBE,IAAI,EAAEO,WAAWO,IAAI,EAAET,MAAML,IAAI,CAACW,SAAS;IACzG;IAEA,OAAON;AACT,EAAE"}
+{"version":3,"sources":["../src/components/AppItemStatic/useAppItemStaticStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { AppItemStaticSlots, AppItemStaticState } from './AppItemStatic.types';\nimport { useAppItemStyles } from '../AppItem/useAppItemStyles.styles';\nimport { useIconStyles, useRootDefaultClassName } from '../sharedNavStyles.styles';\n\nexport const appItemStaticClassNames: SlotClassNames<AppItemStaticSlots> = {\n  root: 'fui-AppItemStatic',\n  icon: 'fui-AppItemStatic__icon',\n};\n\nconst useAppItemStaticStyles = makeStyles({\n  root: {\n    cursor: 'default',\n    ':hover': {\n      backgroundColor: 'unset',\n    },\n    ':active': {\n      backgroundColor: 'unset',\n    },\n  },\n});\n\n/**\n * Apply styling to the AppItemStatic slots based on the state\n */\nexport const useAppItemStaticStyles_unstable = (state: AppItemStaticState): AppItemStaticState => {\n  const rootDefaultClassName = useRootDefaultClassName();\n  const iconStyles = useIconStyles();\n  const appItemSpecificStyles = useAppItemStyles();\n  const appItemStaticStyles = useAppItemStaticStyles();\n\n  const { density, icon } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    rootDefaultClassName,\n    appItemStaticClassNames.root,\n    appItemSpecificStyles.root,\n    appItemStaticStyles.root,\n    density === 'small' && appItemSpecificStyles.small,\n    !icon && appItemSpecificStyles.absentIconRootAdjustment,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(appItemStaticClassNames.icon, iconStyles.base, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useAppItemStyles","useIconStyles","useRootDefaultClassName","appItemStaticClassNames","root","icon","useAppItemStaticStyles","cursor","backgroundColor","useAppItemStaticStyles_unstable","state","rootDefaultClassName","iconStyles","appItemSpecificStyles","appItemStaticStyles","density","className","small","absentIconRootAdjustment","base"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gBAAgB,QAAQ,qCAAqC;AACtE,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,4BAA4B;AAEnF,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,yBAAyBR,WAAW;IACxCM,MAAM;QACJG,QAAQ;QACR,UAAU;YACRC,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C,MAAMC,uBAAuBT;IAC7B,MAAMU,aAAaX;IACnB,MAAMY,wBAAwBb;IAC9B,MAAMc,sBAAsBR;IAE5B,MAAM,EAAES,OAAO,EAAEV,IAAI,EAAE,GAAGK;IAE1B,oDAAoD;IACpDA,MAAMN,IAAI,CAACY,SAAS,GAAGjB,aACrBY,sBACAR,wBAAwBC,IAAI,EAC5BS,sBAAsBT,IAAI,EAC1BU,oBAAoBV,IAAI,EACxBW,YAAY,WAAWF,sBAAsBI,KAAK,EAClD,CAACZ,QAAQQ,sBAAsBK,wBAAwB,EACvDR,MAAMN,IAAI,CAACY,SAAS;IAGtB,IAAIN,MAAML,IAAI,EAAE;QACd,oDAAoD;QACpDK,MAAML,IAAI,CAACW,SAAS,GAAGjB,aAAaI,wBAAwBE,IAAI,EAAEO,WAAWO,IAAI,EAAET,MAAML,IAAI,CAACW,SAAS;IACzG;IAEA,OAAON;AACT,EAAE"}

package/lib/components/Hamburger/useHamburgerStyles.styles.js

@@ -45,12 +45,12 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the Hamburger slots based on the state
  */
 export const useHamburgerStyles_unstable = state => {
-  'use no memo';
-
   useButtonStyles_unstable(state);
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);
   }
   return state;

package/lib/components/Hamburger/useHamburgerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useButtonStyles_unstable","navItemTokens","hamburgerClassNames","root","icon","useStyles","w71qe1","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Jwef8y","ecr2s2","d","p","h","a","useHamburgerStyles_unstable","state","styles","className"],"sources":["useHamburgerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { navItemTokens } from '../sharedNavStyles.styles';\nexport const hamburgerClassNames = {\n    root: 'fui-Hamburger',\n    icon: 'fui-Hamburger__icon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        textDecorationLine: 'none',\n        backgroundColor: navItemTokens.backgroundColor,\n        border: 'none',\n        ':hover': {\n            backgroundColor: navItemTokens.backgroundColorHover\n        },\n        ':active': {\n            backgroundColor: navItemTokens.backgroundColorPressed\n        }\n    }\n});\n/**\n * Apply styling to the Hamburger slots based on the state\n */ export const useHamburgerStyles_unstable = (state)=>{\n    'use no memo';\n    useButtonStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAK,IAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACbhC,wBAAwB,CAACgC,KAAK,CAAC;EAC/B,MAAMC,MAAM,GAAG5B,SAAS,CAAC,CAAC;EAC1B2B,KAAK,CAAC7B,IAAI,CAAC+B,SAAS,GAAGnC,YAAY,CAACG,mBAAmB,CAACC,IAAI,EAAE8B,MAAM,CAAC9B,IAAI,EAAE6B,KAAK,CAAC7B,IAAI,CAAC+B,SAAS,CAAC;EAChG,IAAIF,KAAK,CAAC5B,IAAI,EAAE;IACZ4B,KAAK,CAAC5B,IAAI,CAAC8B,SAAS,GAAGnC,YAAY,CAACG,mBAAmB,CAACE,IAAI,EAAE4B,KAAK,CAAC5B,IAAI,CAAC8B,SAAS,CAAC;EACvF;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","useButtonStyles_unstable","navItemTokens","hamburgerClassNames","root","icon","useStyles","w71qe1","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Jwef8y","ecr2s2","d","p","h","a","useHamburgerStyles_unstable","state","styles","className"],"sources":["useHamburgerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { navItemTokens } from '../sharedNavStyles.styles';\nexport const hamburgerClassNames = {\n    root: 'fui-Hamburger',\n    icon: 'fui-Hamburger__icon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        textDecorationLine: 'none',\n        backgroundColor: navItemTokens.backgroundColor,\n        border: 'none',\n        ':hover': {\n            backgroundColor: navItemTokens.backgroundColorHover\n        },\n        ':active': {\n            backgroundColor: navItemTokens.backgroundColorPressed\n        }\n    }\n});\n/**\n * Apply styling to the Hamburger slots based on the state\n */ export const useHamburgerStyles_unstable = (state)=>{\n    useButtonStyles_unstable(state);\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAK,IAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EACpDhC,wBAAwB,CAACgC,KAAK,CAAC;EAC/B,MAAMC,MAAM,GAAG5B,SAAS,CAAC,CAAC;EAC1B;EACA2B,KAAK,CAAC7B,IAAI,CAAC+B,SAAS,GAAGnC,YAAY,CAACG,mBAAmB,CAACC,IAAI,EAAE8B,MAAM,CAAC9B,IAAI,EAAE6B,KAAK,CAAC7B,IAAI,CAAC+B,SAAS,CAAC;EAChG,IAAIF,KAAK,CAAC5B,IAAI,EAAE;IACZ;IACA4B,KAAK,CAAC5B,IAAI,CAAC8B,SAAS,GAAGnC,YAAY,CAACG,mBAAmB,CAACE,IAAI,EAAE4B,KAAK,CAAC5B,IAAI,CAAC8B,SAAS,CAAC;EACvF;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/Hamburger/useHamburgerStyles.styles.raw.js

@@ -24,11 +24,12 @@ export const hamburgerClassNames = {
 /**
  * Apply styling to the Hamburger slots based on the state
  */ export const useHamburgerStyles_unstable = (state)=>{
-    'use no memo';
     useButtonStyles_unstable(state);
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);
     }
     return state;

package/lib/components/Hamburger/useHamburgerStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Hamburger/useHamburgerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ButtonSlots } from '@fluentui/react-button';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { HamburgerState } from './Hamburger.types';\nimport { navItemTokens } from '../sharedNavStyles.styles';\n\nexport const hamburgerClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-Hamburger',\n  icon: 'fui-Hamburger__icon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textDecorationLine: 'none',\n    backgroundColor: navItemTokens.backgroundColor,\n    border: 'none',\n    ':hover': {\n      backgroundColor: navItemTokens.backgroundColorHover,\n    },\n    ':active': {\n      backgroundColor: navItemTokens.backgroundColorPressed,\n    },\n  },\n});\n\n/**\n * Apply styling to the Hamburger slots based on the state\n */\nexport const useHamburgerStyles_unstable = (state: HamburgerState): HamburgerState => {\n  'use no memo';\n\n  useButtonStyles_unstable(state);\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","navItemTokens","hamburgerClassNames","root","icon","useStyles","textDecorationLine","backgroundColor","border","backgroundColorHover","backgroundColorPressed","useHamburgerStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,wBAAwB,QAAQ,yBAAyB;AAGlE,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,MAAMC,sBAAmD;IAC9DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BK,MAAM;QACJG,oBAAoB;QACpBC,iBAAiBN,cAAcM,eAAe;QAC9CC,QAAQ;QACR,UAAU;YACRD,iBAAiBN,cAAcQ,oBAAoB;QACrD;QACA,WAAW;YACTF,iBAAiBN,cAAcS,sBAAsB;QACvD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEAZ,yBAAyBY;IACzB,MAAMC,SAASR;IAEfO,MAAMT,IAAI,CAACW,SAAS,GAAGf,aAAaG,oBAAoBC,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAE/F,IAAIF,MAAMR,IAAI,EAAE;QACdQ,MAAMR,IAAI,CAACU,SAAS,GAAGf,aAAaG,oBAAoBE,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IACpF;IAEA,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Hamburger/useHamburgerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ButtonSlots } from '@fluentui/react-button';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { HamburgerState } from './Hamburger.types';\nimport { navItemTokens } from '../sharedNavStyles.styles';\n\nexport const hamburgerClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-Hamburger',\n  icon: 'fui-Hamburger__icon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textDecorationLine: 'none',\n    backgroundColor: navItemTokens.backgroundColor,\n    border: 'none',\n    ':hover': {\n      backgroundColor: navItemTokens.backgroundColorHover,\n    },\n    ':active': {\n      backgroundColor: navItemTokens.backgroundColorPressed,\n    },\n  },\n});\n\n/**\n * Apply styling to the Hamburger slots based on the state\n */\nexport const useHamburgerStyles_unstable = (state: HamburgerState): HamburgerState => {\n  useButtonStyles_unstable(state);\n  const styles = useStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(hamburgerClassNames.root, styles.root, state.root.className);\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(hamburgerClassNames.icon, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","navItemTokens","hamburgerClassNames","root","icon","useStyles","textDecorationLine","backgroundColor","border","backgroundColorHover","backgroundColorPressed","useHamburgerStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,wBAAwB,QAAQ,yBAAyB;AAGlE,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,MAAMC,sBAAmD;IAC9DC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BK,MAAM;QACJG,oBAAoB;QACpBC,iBAAiBN,cAAcM,eAAe;QAC9CC,QAAQ;QACR,UAAU;YACRD,iBAAiBN,cAAcQ,oBAAoB;QACrD;QACA,WAAW;YACTF,iBAAiBN,cAAcS,sBAAsB;QACvD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CZ,yBAAyBY;IACzB,MAAMC,SAASR;IAEf,oDAAoD;IACpDO,MAAMT,IAAI,CAACW,SAAS,GAAGf,aAAaG,oBAAoBC,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAE/F,IAAIF,MAAMR,IAAI,EAAE;QACd,oDAAoD;QACpDQ,MAAMR,IAAI,CAACU,SAAS,GAAGf,aAAaG,oBAAoBE,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IACpF;IAEA,OAAOF;AACT,EAAE"}

package/lib/components/Nav/Nav.types.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Nav/Nav.types.ts"],"sourcesContent":["import type * as React from 'react';\n\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { NavContextValue, NavItemValue } from '../NavContext.types';\n\nexport type NavSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/***\n * Indicates the vertical density of the Nav content.\n * This does not affect horizontal spacing.\n */\nexport type NavDensity = 'small' | 'medium';\n\n/**\n * Nav Props\n */\nexport type NavProps = ComponentProps<NavSlots> & {\n  /**\n   * The value of the navItem to be selected by default.\n   * Typically useful when the selectedValue is uncontrolled.\n   * Mutually exclusive with selectedValue.\n   * Empty string indicates no selection.\n   */\n  defaultSelectedValue?: NavItemValue;\n\n  /**\n   * The value of the navCategory to be selected by default.\n   * Typically useful when the selectedValue is uncontrolled.\n   * Mutually exclusive with selectedValue.\n   * Empty string indicates no selection.\n   */\n  defaultSelectedCategoryValue?: NavItemValue;\n\n  /**\n   * Set of categories that are opened by default.\n   * Typically useful when the openCategories is uncontrolled.\n   */\n  defaultOpenCategories?: NavItemValue[];\n\n  /**\n   * Controls the open categories.\n   * For use in controlled scenarios.\n   */\n  openCategories?: NavItemValue[];\n\n  /**\n   * Raised when a navItem is selected.\n   * If the navItem is child of a category, the categoryValue will be provided\n   */\n  onNavItemSelect?: EventHandler<OnNavItemSelectData>;\n\n  /**\n   * The value of the currently selected navItem.\n   * Mutually exclusive with defaultSelectedValue.\n   * @default undefined\n   */\n  selectedValue?: NavItemValue;\n\n  /**\n   * Indicates a category that has a selected child\n   * Will show the category as selected if it is closed.\n   * @default undefined\n   */\n  selectedCategoryValue?: NavItemValue;\n\n  /**\n   * Indicates if Nav supports multiple open Categories at the same time.\n   * @default true, indicating that multiple categories can be open at the same time.\n   */\n  multiple?: boolean;\n\n  /**\n   * Callback raised when a NavCategoryItem is toggled.\n   */\n  onNavCategoryItemToggle?: EventHandler<OnNavItemSelectData>;\n\n  /**\n   * The vertical density of the Nav and it's children\n   * @default 'medium'\n   */\n  density?: NavDensity;\n};\n\nexport type OnNavItemSelectData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n  /**\n   * The value of the selected navItem.\n   * In the case of a category selection, this will be the value of the selected category.\n   */\n  value: NavItemValue;\n\n  /**\n   * The parent value of the selected navSubItem\n   * Null if not a child of a category\n   */\n  categoryValue?: NavItemValue;\n};\n\n/**\n * State used in rendering Nav\n */\nexport type NavState = ComponentState<NavSlots> & NavContextValue;\n"],"names":[],"mappings":"AAmGA;;CAEC,GACD,WAAkE"}
+{"version":3,"sources":["../src/components/Nav/Nav.types.ts"],"sourcesContent":["import type * as React from 'react';\n\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { NavContextValue, NavItemValue } from '../NavContext.types';\n\nexport type NavSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/***\n * Indicates the vertical density of the Nav content.\n * This does not affect horizontal spacing.\n */\nexport type NavDensity = 'small' | 'medium';\n\n/**\n * Nav Props\n */\nexport type NavProps = ComponentProps<NavSlots> & {\n  /**\n   * The value of the navItem to be selected by default.\n   * Typically useful when the selectedValue is uncontrolled.\n   * Mutually exclusive with selectedValue.\n   * Empty string indicates no selection.\n   */\n  defaultSelectedValue?: NavItemValue;\n\n  /**\n   * The value of the navCategory to be selected by default.\n   * Typically useful when the selectedValue is uncontrolled.\n   * Mutually exclusive with selectedValue.\n   * Empty string indicates no selection.\n   */\n  defaultSelectedCategoryValue?: NavItemValue;\n\n  /**\n   * Set of categories that are opened by default.\n   * Typically useful when the openCategories is uncontrolled.\n   */\n  defaultOpenCategories?: NavItemValue[];\n\n  /**\n   * Controls the open categories.\n   * For use in controlled scenarios.\n   */\n  openCategories?: NavItemValue[];\n\n  /**\n   * Raised when a navItem is selected.\n   * If the navItem is child of a category, the categoryValue will be provided\n   */\n  onNavItemSelect?: EventHandler<OnNavItemSelectData>;\n\n  /**\n   * The value of the currently selected navItem.\n   * Mutually exclusive with defaultSelectedValue.\n   * @default undefined\n   */\n  selectedValue?: NavItemValue;\n\n  /**\n   * Indicates a category that has a selected child\n   * Will show the category as selected if it is closed.\n   * @default undefined\n   */\n  selectedCategoryValue?: NavItemValue;\n\n  /**\n   * Indicates if Nav supports multiple open Categories at the same time.\n   * @default true, indicating that multiple categories can be open at the same time.\n   */\n  multiple?: boolean;\n\n  /**\n   * Callback raised when a NavCategoryItem is toggled.\n   */\n  onNavCategoryItemToggle?: EventHandler<OnNavItemSelectData>;\n\n  /**\n   * The vertical density of the Nav and it's children\n   * @default 'medium'\n   */\n  density?: NavDensity;\n};\n\nexport type NavBaseProps = Omit<NavProps, 'density'>;\n\nexport type OnNavItemSelectData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n  /**\n   * The value of the selected navItem.\n   * In the case of a category selection, this will be the value of the selected category.\n   */\n  value: NavItemValue;\n\n  /**\n   * The parent value of the selected navSubItem\n   * Null if not a child of a category\n   */\n  categoryValue?: NavItemValue;\n};\n\n/**\n * State used in rendering Nav\n */\nexport type NavState = ComponentState<NavSlots> & NavContextValue;\n\nexport type NavBaseState = Omit<NavState, 'density' | 'tabbable'>;\n"],"names":[],"mappings":"AA0GA,WAAkE"}

package/lib/components/Nav/index.js

@@ -1,4 +1,4 @@
 export { Nav } from './Nav';
 export { renderNav_unstable } from './renderNav';
-export { useNav_unstable } from './useNav';
+export { useNav_unstable, useNavBase_unstable } from './useNav';
 export { useNavStyles_unstable, navClassNames } from './useNavStyles.styles';

package/lib/components/Nav/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Nav/index.ts"],"sourcesContent":["export { Nav } from './Nav';\nexport type { NavSlots, NavProps, OnNavItemSelectData, NavState, NavDensity } from './Nav.types';\nexport { renderNav_unstable } from './renderNav';\nexport { useNav_unstable } from './useNav';\nexport { useNavStyles_unstable, navClassNames } from './useNavStyles.styles';\n"],"names":["Nav","renderNav_unstable","useNav_unstable","useNavStyles_unstable","navClassNames"],"mappings":"AAAA,SAASA,GAAG,QAAQ,QAAQ;AAE5B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,eAAe,QAAQ,WAAW;AAC3C,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,wBAAwB"}
+{"version":3,"sources":["../src/components/Nav/index.ts"],"sourcesContent":["export { Nav } from './Nav';\nexport type {\n  NavSlots,\n  NavProps,\n  OnNavItemSelectData,\n  NavState,\n  NavDensity,\n  NavBaseProps,\n  NavBaseState,\n} from './Nav.types';\nexport { renderNav_unstable } from './renderNav';\nexport { useNav_unstable, useNavBase_unstable } from './useNav';\nexport { useNavStyles_unstable, navClassNames } from './useNavStyles.styles';\n"],"names":["Nav","renderNav_unstable","useNav_unstable","useNavBase_unstable","useNavStyles_unstable","navClassNames"],"mappings":"AAAA,SAASA,GAAG,QAAQ,QAAQ;AAU5B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,WAAW;AAChE,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,wBAAwB"}

package/lib/components/Nav/useNav.js

@@ -45,7 +45,16 @@ import { useControllableState, useEventCallback, useMergedRefs, slot, getIntrins
  * @param props - props from this instance of Nav
  * @param ref - reference to root HTMLDivElement of Nav
  */ export const useNav_unstable = (props, ref)=>{
-    const { onNavItemSelect, onNavCategoryItemToggle, multiple = true, density = 'medium', openCategories: controlledOpenCategoryItems, selectedCategoryValue: controlledSelectedCategoryValue, selectedValue: controlledSelectedValue, defaultOpenCategories, defaultSelectedValue, defaultSelectedCategoryValue } = props;
+    const { density = 'medium' } = props;
+    const state = useNavBase_unstable(props, ref);
+    return {
+        ...state,
+        density,
+        tabbable: false
+    };
+};
+export const useNavBase_unstable = (props, ref)=>{
+    const { onNavItemSelect, onNavCategoryItemToggle, multiple = true, openCategories: controlledOpenCategoryItems, selectedCategoryValue: controlledSelectedCategoryValue, selectedValue: controlledSelectedValue, defaultOpenCategories, defaultSelectedValue, defaultSelectedCategoryValue } = props;
     const innerRef = React.useRef(null);
     const [openCategories, setOpenCategories] = useControllableState({
         state: controlledOpenCategoryItems,
@@ -73,12 +82,18 @@ import { useControllableState, useEventCallback, useMergedRefs, slot, getIntrins
     const previousSelectedValue = React.useRef(undefined);
     const currentSelectedCategoryValue = React.useRef(undefined);
     const previousSelectedCategoryValue = React.useRef(undefined);
+    // eslint-disable-next-line react-hooks/refs
     if (currentSelectedValue.current !== selectedValue) {
+        // eslint-disable-next-line react-hooks/refs
         previousSelectedValue.current = currentSelectedValue.current;
+        // eslint-disable-next-line react-hooks/refs
         currentSelectedValue.current = selectedValue;
     }
+    // eslint-disable-next-line react-hooks/refs
     if (currentSelectedCategoryValue.current !== selectedCategoryValue) {
+        // eslint-disable-next-line react-hooks/refs
         previousSelectedCategoryValue.current = currentSelectedCategoryValue.current;
+        // eslint-disable-next-line react-hooks/refs
         currentSelectedCategoryValue.current = selectedCategoryValue;
     }
     // used for NavItems and NavSubItems
@@ -129,8 +144,6 @@ import { useControllableState, useEventCallback, useMergedRefs, slot, getIntrins
         onSelect,
         getRegisteredNavItems,
         onRequestNavCategoryItemToggle,
-        multiple,
-        density,
-        tabbable: false
+        multiple
     };
 };

package/lib/components/Nav/useNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Nav/useNav.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { EventHandler } from '@fluentui/react-utilities';\nimport {\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n  getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport type { NavProps, NavState, OnNavItemSelectData } from './Nav.types';\nimport type { NavItemRegisterData, NavItemValue } from '../NavContext.types';\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenCategories({\n  defaultOpenCategories,\n  multiple,\n}: Pick<NavProps, 'defaultOpenCategories' | 'multiple'>): NavItemValue[] | undefined {\n  if (defaultOpenCategories !== undefined) {\n    if (Array.isArray(defaultOpenCategories)) {\n      return multiple ? defaultOpenCategories : [defaultOpenCategories[0]];\n    }\n    return [defaultOpenCategories];\n  }\n  return undefined;\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Nav supports open categories at the same time\n */\nconst updateOpenCategories = (value: NavItemValue, previousOpenItems: NavItemValue[], multiple: boolean) => {\n  if (multiple) {\n    if (previousOpenItems.includes(value)) {\n      return previousOpenItems.filter(i => i !== value);\n    } else {\n      return [...previousOpenItems, value];\n    }\n  }\n\n  return previousOpenItems[0] === value ? [] : [value];\n};\n\n/**\n * Create the state required to render Nav.\n *\n * The returned state can be modified with hooks such as useNavStyles,\n * before being passed to renderNav.\n *\n * @param props - props from this instance of Nav\n * @param ref - reference to root HTMLDivElement of Nav\n */\nexport const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>): NavState => {\n  const {\n    onNavItemSelect,\n    onNavCategoryItemToggle,\n    multiple = true,\n    density = 'medium',\n    openCategories: controlledOpenCategoryItems,\n    selectedCategoryValue: controlledSelectedCategoryValue,\n    selectedValue: controlledSelectedValue,\n    defaultOpenCategories,\n    defaultSelectedValue,\n    defaultSelectedCategoryValue,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const [openCategories, setOpenCategories] = useControllableState({\n    state: controlledOpenCategoryItems,\n    defaultState: initializeUncontrolledOpenCategories({ defaultOpenCategories, multiple }),\n    initialState: [],\n  });\n\n  const [selectedCategoryValue, setSelectedCategoryValue] = useControllableState({\n    state: controlledSelectedCategoryValue,\n    defaultState: defaultSelectedCategoryValue,\n    initialState: undefined,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: controlledSelectedValue,\n    defaultState: defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the navItem list re-renders.\n  // these refs avoid getRegisteredNavItems changing when selectedValue changes and causing\n  // renders for navItems that have not changed.\n  const currentSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n\n  const currentSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n  const previousSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n\n  if (currentSelectedValue.current !== selectedValue) {\n    previousSelectedValue.current = currentSelectedValue.current;\n    currentSelectedValue.current = selectedValue;\n  }\n\n  if (currentSelectedCategoryValue.current !== selectedCategoryValue) {\n    previousSelectedCategoryValue.current = currentSelectedCategoryValue.current;\n    currentSelectedCategoryValue.current = selectedCategoryValue;\n  }\n\n  // used for NavItems and NavSubItems\n  const onSelect: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n    setSelectedValue(data.value);\n    setSelectedCategoryValue(data.categoryValue ? data.categoryValue : '');\n    onNavItemSelect?.(event, data);\n  });\n\n  // used for NavCategoryItems\n  const onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n    if (data.categoryValue !== undefined) {\n      const nextOpenCategories = updateOpenCategories(data.categoryValue, openCategories ?? [], multiple);\n      onNavCategoryItemToggle?.(event, data);\n      setOpenCategories(nextOpenCategories);\n    }\n  });\n\n  const registeredNavItems = React.useRef<Record<string, NavItemRegisterData>>({});\n\n  const onRegister = React.useCallback((data: NavItemRegisterData) => {\n    registeredNavItems.current[JSON.stringify(data.value)] = data;\n  }, []);\n\n  const onUnregister = React.useCallback((data: NavItemRegisterData) => {\n    delete registeredNavItems.current[JSON.stringify(data.value)];\n  }, []);\n\n  const getRegisteredNavItems = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      selectedCategoryValue: currentSelectedCategoryValue.current,\n      previousSelectedCategoryValue: previousSelectedCategoryValue.current,\n      registeredNavItems: registeredNavItems.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    openCategories,\n    selectedValue,\n    selectedCategoryValue,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredNavItems,\n    onRequestNavCategoryItemToggle,\n    multiple,\n    density,\n    tabbable: false,\n  };\n};\n"],"names":["React","useControllableState","useEventCallback","useMergedRefs","slot","getIntrinsicElementProps","initializeUncontrolledOpenCategories","defaultOpenCategories","multiple","undefined","Array","isArray","updateOpenCategories","value","previousOpenItems","includes","filter","i","useNav_unstable","props","ref","onNavItemSelect","onNavCategoryItemToggle","density","openCategories","controlledOpenCategoryItems","selectedCategoryValue","controlledSelectedCategoryValue","selectedValue","controlledSelectedValue","defaultSelectedValue","defaultSelectedCategoryValue","innerRef","useRef","setOpenCategories","state","defaultState","initialState","setSelectedCategoryValue","setSelectedValue","currentSelectedValue","previousSelectedValue","currentSelectedCategoryValue","previousSelectedCategoryValue","current","onSelect","event","data","categoryValue","onRequestNavCategoryItemToggle","nextOpenCategories","registeredNavItems","onRegister","useCallback","JSON","stringify","onUnregister","getRegisteredNavItems","components","root","always","elementType","tabbable"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Nav/useNav.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { EventHandler } from '@fluentui/react-utilities';\nimport {\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n  getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport type { NavBaseProps, NavBaseState, NavProps, NavState, OnNavItemSelectData } from './Nav.types';\nimport type { NavItemRegisterData, NavItemValue } from '../NavContext.types';\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenCategories({\n  defaultOpenCategories,\n  multiple,\n}: Pick<NavProps, 'defaultOpenCategories' | 'multiple'>): NavItemValue[] | undefined {\n  if (defaultOpenCategories !== undefined) {\n    if (Array.isArray(defaultOpenCategories)) {\n      return multiple ? defaultOpenCategories : [defaultOpenCategories[0]];\n    }\n    return [defaultOpenCategories];\n  }\n  return undefined;\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Nav supports open categories at the same time\n */\nconst updateOpenCategories = (value: NavItemValue, previousOpenItems: NavItemValue[], multiple: boolean) => {\n  if (multiple) {\n    if (previousOpenItems.includes(value)) {\n      return previousOpenItems.filter(i => i !== value);\n    } else {\n      return [...previousOpenItems, value];\n    }\n  }\n\n  return previousOpenItems[0] === value ? [] : [value];\n};\n\n/**\n * Create the state required to render Nav.\n *\n * The returned state can be modified with hooks such as useNavStyles,\n * before being passed to renderNav.\n *\n * @param props - props from this instance of Nav\n * @param ref - reference to root HTMLDivElement of Nav\n */\nexport const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>): NavState => {\n  const { density = 'medium' } = props;\n\n  const state = useNavBase_unstable(props, ref);\n\n  return {\n    ...state,\n    density,\n    tabbable: false,\n  };\n};\n\nexport const useNavBase_unstable = (props: NavBaseProps, ref: React.Ref<HTMLDivElement>): NavBaseState => {\n  const {\n    onNavItemSelect,\n    onNavCategoryItemToggle,\n    multiple = true,\n    openCategories: controlledOpenCategoryItems,\n    selectedCategoryValue: controlledSelectedCategoryValue,\n    selectedValue: controlledSelectedValue,\n    defaultOpenCategories,\n    defaultSelectedValue,\n    defaultSelectedCategoryValue,\n  } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const [openCategories, setOpenCategories] = useControllableState({\n    state: controlledOpenCategoryItems,\n    defaultState: initializeUncontrolledOpenCategories({ defaultOpenCategories, multiple }),\n    initialState: [],\n  });\n\n  const [selectedCategoryValue, setSelectedCategoryValue] = useControllableState({\n    state: controlledSelectedCategoryValue,\n    defaultState: defaultSelectedCategoryValue,\n    initialState: undefined,\n  });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: controlledSelectedValue,\n    defaultState: defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  // considered usePrevious, but it is sensitive to re-renders\n  // this could cause the previous to move to current in the case where the navItem list re-renders.\n  // these refs avoid getRegisteredNavItems changing when selectedValue changes and causing\n  // renders for navItems that have not changed.\n  const currentSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n  const previousSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n\n  const currentSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n  const previousSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n\n  // eslint-disable-next-line react-hooks/refs\n  if (currentSelectedValue.current !== selectedValue) {\n    // eslint-disable-next-line react-hooks/refs\n    previousSelectedValue.current = currentSelectedValue.current;\n    // eslint-disable-next-line react-hooks/refs\n    currentSelectedValue.current = selectedValue;\n  }\n\n  // eslint-disable-next-line react-hooks/refs\n  if (currentSelectedCategoryValue.current !== selectedCategoryValue) {\n    // eslint-disable-next-line react-hooks/refs\n    previousSelectedCategoryValue.current = currentSelectedCategoryValue.current;\n    // eslint-disable-next-line react-hooks/refs\n    currentSelectedCategoryValue.current = selectedCategoryValue;\n  }\n\n  // used for NavItems and NavSubItems\n  const onSelect: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n    setSelectedValue(data.value);\n    setSelectedCategoryValue(data.categoryValue ? data.categoryValue : '');\n    onNavItemSelect?.(event, data);\n  });\n\n  // used for NavCategoryItems\n  const onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n    if (data.categoryValue !== undefined) {\n      const nextOpenCategories = updateOpenCategories(data.categoryValue, openCategories ?? [], multiple);\n      onNavCategoryItemToggle?.(event, data);\n      setOpenCategories(nextOpenCategories);\n    }\n  });\n\n  const registeredNavItems = React.useRef<Record<string, NavItemRegisterData>>({});\n\n  const onRegister = React.useCallback((data: NavItemRegisterData) => {\n    registeredNavItems.current[JSON.stringify(data.value)] = data;\n  }, []);\n\n  const onUnregister = React.useCallback((data: NavItemRegisterData) => {\n    delete registeredNavItems.current[JSON.stringify(data.value)];\n  }, []);\n\n  const getRegisteredNavItems = React.useCallback(() => {\n    return {\n      selectedValue: currentSelectedValue.current,\n      previousSelectedValue: previousSelectedValue.current,\n      selectedCategoryValue: currentSelectedCategoryValue.current,\n      previousSelectedCategoryValue: previousSelectedCategoryValue.current,\n      registeredNavItems: registeredNavItems.current,\n    };\n  }, []);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    openCategories,\n    selectedValue,\n    selectedCategoryValue,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredNavItems,\n    onRequestNavCategoryItemToggle,\n    multiple,\n  };\n};\n"],"names":["React","useControllableState","useEventCallback","useMergedRefs","slot","getIntrinsicElementProps","initializeUncontrolledOpenCategories","defaultOpenCategories","multiple","undefined","Array","isArray","updateOpenCategories","value","previousOpenItems","includes","filter","i","useNav_unstable","props","ref","density","state","useNavBase_unstable","tabbable","onNavItemSelect","onNavCategoryItemToggle","openCategories","controlledOpenCategoryItems","selectedCategoryValue","controlledSelectedCategoryValue","selectedValue","controlledSelectedValue","defaultSelectedValue","defaultSelectedCategoryValue","innerRef","useRef","setOpenCategories","defaultState","initialState","setSelectedCategoryValue","setSelectedValue","currentSelectedValue","previousSelectedValue","currentSelectedCategoryValue","previousSelectedCategoryValue","current","onSelect","event","data","categoryValue","onRequestNavCategoryItemToggle","nextOpenCategories","registeredNavItems","onRegister","useCallback","JSON","stringify","onUnregister","getRegisteredNavItems","components","root","always","elementType"],"mappings":"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"}

package/lib/components/Nav/useNavStyles.styles.js

@@ -19,9 +19,8 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the Nav slots based on the state
  */
 export const useNavStyles_unstable = state => {
-  'use no memo';
-
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);

package/lib/components/Nav/useNavStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","navClassNames","root","useStyles","mc9l5x","Beiy3e4","d","useNavStyles_unstable","state","styles","className"],"sources":["useNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const navClassNames = {\n    root: 'fui-Nav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column'\n    }\n});\n/**\n * Apply styling to the Nav slots based on the state\n */ export const useNavStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);\n    // TODO Add class names to slots, for example:\n    // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,aAAa,GAAG;EACzBC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,qBAAqB,GAAIC,KAAK,IAAG;EAC9C,aAAa;;EACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,aAAa,CAACC,IAAI,EAAEO,MAAM,CAACP,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EAC1F;EACA;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","navClassNames","root","useStyles","mc9l5x","Beiy3e4","d","useNavStyles_unstable","state","styles","className"],"sources":["useNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const navClassNames = {\n    root: 'fui-Nav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column'\n    }\n});\n/**\n * Apply styling to the Nav slots based on the state\n */ export const useNavStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);\n    // TODO Add class names to slots, for example:\n    // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,aAAa,GAAG;EACzBC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,qBAAqB,GAAIC,KAAK,IAAG;EAC9C,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1B;EACAK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,aAAa,CAACC,IAAI,EAAEO,MAAM,CAACP,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EAC1F;EACA;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/Nav/useNavStyles.styles.raw.js

@@ -14,8 +14,8 @@ export const navClassNames = {
 /**
  * Apply styling to the Nav slots based on the state
  */ export const useNavStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);
     // TODO Add class names to slots, for example:
     // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);

package/lib/components/Nav/useNavStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Nav/useNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSlots, NavState } from './Nav.types';\n\nexport const navClassNames: SlotClassNames<NavSlots> = {\n  root: 'fui-Nav',\n  // TODO: add class names for all slots on NavSlots.\n  // Should be of the form `<slotName>: 'fui-Nav__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the Nav slots based on the state\n */\nexport const useNavStyles_unstable = (state: NavState): NavState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);\n\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navClassNames","root","useStyles","display","flexDirection","useNavStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,gBAA0C;IACrDC,MAAM;AAGR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,eAAe;IACjB;AAGF;AAEA;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpC;IAEA,MAAMC,SAASL;IACfI,MAAML,IAAI,CAACO,SAAS,GAAGT,aAAaC,cAAcC,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAEzF,8CAA8C;IAC9C,gFAAgF;IAEhF,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Nav/useNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSlots, NavState } from './Nav.types';\n\nexport const navClassNames: SlotClassNames<NavSlots> = {\n  root: 'fui-Nav',\n  // TODO: add class names for all slots on NavSlots.\n  // Should be of the form `<slotName>: 'fui-Nav__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the Nav slots based on the state\n */\nexport const useNavStyles_unstable = (state: NavState): NavState => {\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(navClassNames.root, styles.root, state.root.className);\n\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navClassNames","root","useStyles","display","flexDirection","useNavStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,gBAA0C;IACrDC,MAAM;AAGR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,eAAe;IACjB;AAGF;AAEA;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpC,MAAMC,SAASL;IACf,oDAAoD;IACpDI,MAAML,IAAI,CAACO,SAAS,GAAGT,aAAaC,cAAcC,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAEzF,8CAA8C;IAC9C,gFAAgF;IAEhF,OAAOF;AACT,EAAE"}

package/lib/components/NavCategoryItem/NavCategoryItem.types.js

@@ -1,3 +1,3 @@
 /**
- * State used in rendering NavCategoryItem
+ * State used in rendering NavCategoryItem, excluding design/animation-specific state.
  */ export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/NavCategoryItem.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';\nimport type { NavCategoryItemContextValue } from '../NavCategoryItemContext';\n\nexport type NavCategoryItemContextValues = {\n  navCategoryItem: NavCategoryItemContextValue;\n};\n\nexport type NavCategoryItemSlots = {\n  /**\n   * The root element\n   */\n  root: NonNullable<Slot<'button'>>;\n\n  /**\n   * Icon that renders before the content.\n   * Should be specific to each Category\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Expand icon slot rendered after the content to indicate an open and closed state.\n   */\n  expandIcon: NonNullable<Slot<'span'>>;\n\n  /**\n   * Expand icon motion slot.\n   */\n  expandIconMotion?: Slot<PresenceMotionSlotProps>;\n};\n\n/**\n * navCategoryItem Props\n */\nexport type NavCategoryItemProps = ComponentProps<Partial<NavCategoryItemSlots>>;\n\n/**\n * State used in rendering NavCategoryItem\n */\nexport type NavCategoryItemState = ComponentState<NavCategoryItemSlots> &\n  NavCategoryItemContextValue & {\n    /**\n     * If this navCategoryItem 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":"AAqCA;;CAEC,GACD,WAYI"}
+{"version":3,"sources":["../src/components/NavCategoryItem/NavCategoryItem.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';\nimport type { NavCategoryItemContextValue } from '../NavCategoryItemContext';\n\nexport type NavCategoryItemContextValues = {\n  navCategoryItem: NavCategoryItemContextValue;\n};\n\nexport type NavCategoryItemSlots = {\n  /**\n   * The root element\n   */\n  root: NonNullable<Slot<'button'>>;\n\n  /**\n   * Icon that renders before the content.\n   * Should be specific to each Category\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Expand icon slot rendered after the content to indicate an open and closed state.\n   */\n  expandIcon: NonNullable<Slot<'span'>>;\n\n  /**\n   * Expand icon motion slot.\n   */\n  expandIconMotion?: Slot<PresenceMotionSlotProps>;\n};\n\n/**\n * Base slots for NavCategoryItem, excluding design/animation-specific slots.\n */\nexport type NavCategoryItemBaseSlots = Omit<NavCategoryItemSlots, 'expandIconMotion'>;\n\n/**\n * navCategoryItem Props\n */\nexport type NavCategoryItemProps = ComponentProps<Partial<NavCategoryItemSlots>>;\n\n/**\n * Base NavCategoryItemProps, excluding design/animation-specific props.\n */\nexport type NavCategoryItemBaseProps = ComponentProps<Partial<NavCategoryItemBaseSlots>>;\n\n/**\n * State used in rendering NavCategoryItem\n */\nexport type NavCategoryItemState = ComponentState<NavCategoryItemSlots> &\n  NavCategoryItemContextValue & {\n    /**\n     * If this navCategoryItem is selected\n     */\n    selected: boolean;\n    /**\n     * The density of the NavItem\n     *\n     * @default 'medium'\n     */\n    density: NavDensity;\n  };\n\n/**\n * State used in rendering NavCategoryItem, excluding design/animation-specific state.\n */\nexport type NavCategoryItemBaseState = ComponentState<NavCategoryItemBaseSlots> &\n  Pick<NavCategoryItemState, 'open' | 'value' | 'selected'>;\n"],"names":[],"mappings":"AAgEA;;CAEC,GACD,WAC4D"}

package/lib/components/NavCategoryItem/index.js

@@ -1,4 +1,4 @@
 export { NavCategoryItem } from './NavCategoryItem';
 export { renderNavCategoryItem_unstable } from './renderNavCategoryItem';
-export { useNavCategoryItem_unstable } from './useNavCategoryItem';
+export { useNavCategoryItem_unstable, useNavCategoryItemBase_unstable } from './useNavCategoryItem';
 export { useNavCategoryItemStyles_unstable, navCategoryItemClassNames } from './useNavCategoryItem.styles';

package/lib/components/NavCategoryItem/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/index.ts"],"sourcesContent":["export { NavCategoryItem } from './NavCategoryItem';\nexport type { NavCategoryItemSlots, NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nexport { renderNavCategoryItem_unstable } from './renderNavCategoryItem';\nexport { useNavCategoryItem_unstable } from './useNavCategoryItem';\nexport { useNavCategoryItemStyles_unstable, navCategoryItemClassNames } from './useNavCategoryItem.styles';\n"],"names":["NavCategoryItem","renderNavCategoryItem_unstable","useNavCategoryItem_unstable","useNavCategoryItemStyles_unstable","navCategoryItemClassNames"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,iCAAiC,EAAEC,yBAAyB,QAAQ,8BAA8B"}
+{"version":3,"sources":["../src/components/NavCategoryItem/index.ts"],"sourcesContent":["export { NavCategoryItem } from './NavCategoryItem';\nexport type {\n  NavCategoryItemSlots,\n  NavCategoryItemProps,\n  NavCategoryItemState,\n  NavCategoryItemBaseProps,\n  NavCategoryItemBaseSlots,\n  NavCategoryItemBaseState,\n} from './NavCategoryItem.types';\nexport { renderNavCategoryItem_unstable } from './renderNavCategoryItem';\nexport { useNavCategoryItem_unstable, useNavCategoryItemBase_unstable } from './useNavCategoryItem';\nexport { useNavCategoryItemStyles_unstable, navCategoryItemClassNames } from './useNavCategoryItem.styles';\n"],"names":["NavCategoryItem","renderNavCategoryItem_unstable","useNavCategoryItem_unstable","useNavCategoryItemBase_unstable","useNavCategoryItemStyles_unstable","navCategoryItemClassNames"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AASpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,EAAEC,+BAA+B,QAAQ,uBAAuB;AACpG,SAASC,iCAAiC,EAAEC,yBAAyB,QAAQ,8BAA8B"}

package/lib/components/NavCategoryItem/useNavCategoryItem.js

@@ -22,9 +22,40 @@ const ExpandIconMotion = createPresenceComponentVariant(Rotate, {
  * @param props - props from this instance of NavCategoryItem
  * @param ref - reference to root HTMLButtonElement of NavCategoryItem
  */ export const useNavCategoryItem_unstable = (props, ref)=>{
+    const { density = 'medium' } = useNavContext_unstable();
+    const state = useNavCategoryItemBase_unstable(props, ref);
+    return {
+        ...state,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            expandIconMotion: ExpandIconMotion
+        },
+        expandIcon: slot.always(props.expandIcon, {
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(ChevronDown20Regular, null),
+                'aria-hidden': true
+            },
+            elementType: 'span'
+        }),
+        expandIconMotion: presenceMotionSlot(props.expandIconMotion, {
+            elementType: ExpandIconMotion,
+            defaultProps: {
+                visible: state.open
+            }
+        }),
+        density
+    };
+};
+/**
+ * Create the base state required to render NavCategoryItem.
+ *
+ * @param props - props from this instance of NavCategoryItem
+ * @param ref - reference to root HTMLButtonElement of NavCategoryItem
+ */ export const useNavCategoryItemBase_unstable = (props, ref)=>{
     const { onClick, expandIcon, icon } = props;
     const { open, value } = useNavCategoryContext_unstable();
-    const { onRequestNavCategoryItemToggle, selectedCategoryValue, density = 'medium' } = useNavContext_unstable();
+    const { onRequestNavCategoryItemToggle, selectedCategoryValue } = useNavContext_unstable();
     const onNavCategoryItemClick = useEventCallback(mergeCallbacks(onClick, (event)=>onRequestNavCategoryItemToggle(event, {
             type: 'click',
             event,
@@ -42,8 +73,7 @@ const ExpandIconMotion = createPresenceComponentVariant(Rotate, {
         components: {
             root: 'button',
             icon: 'span',
-            expandIcon: 'span',
-            expandIconMotion: ExpandIconMotion
+            expandIcon: 'span'
         },
         root: slot.always(getIntrinsicElementProps('button', {
             ref,
@@ -56,20 +86,12 @@ const ExpandIconMotion = createPresenceComponentVariant(Rotate, {
         }),
         expandIcon: slot.always(expandIcon, {
             defaultProps: {
-                children: /*#__PURE__*/ React.createElement(ChevronDown20Regular, null),
                 'aria-hidden': true
             },
             elementType: 'span'
         }),
-        expandIconMotion: presenceMotionSlot(props.expandIconMotion, {
-            elementType: ExpandIconMotion,
-            defaultProps: {
-                visible: open
-            }
-        }),
         icon: slot.optional(icon, {
             elementType: 'span'
-        }),
-        density
+        })
     };
 };

package/lib/components/NavCategoryItem/useNavCategoryItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDown20Regular } from '@fluentui/react-icons';\nimport { createPresenceComponentVariant, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\nimport { Rotate } from '@fluentui/react-motion-components-preview';\n\nconst ExpandIconMotion = createPresenceComponentVariant(Rotate, {\n  duration: motionTokens.durationFast,\n  easing: motionTokens.curveEasyEase,\n  animateOpacity: false, // Don't fade out the icon\n  outAngle: 0,\n  inAngle: 180,\n});\n\n/**\n * Create the state required to render NavCategoryItem.\n *\n * The returned state can be modified with hooks such as useNavCategoryItemStyles,\n * before being passed to renderNavCategoryItem.\n *\n * @param props - props from this instance of NavCategoryItem\n * @param ref - reference to root HTMLButtonElement of NavCategoryItem\n */\nexport const useNavCategoryItem_unstable = (\n  props: NavCategoryItemProps,\n  ref: React.Ref<HTMLButtonElement>,\n): NavCategoryItemState => {\n  const { onClick, expandIcon, icon } = props;\n\n  const { open, value } = useNavCategoryContext_unstable();\n\n  const { onRequestNavCategoryItemToggle, selectedCategoryValue, density = 'medium' } = useNavContext_unstable();\n\n  const onNavCategoryItemClick = useEventCallback(\n    mergeCallbacks(onClick, event =>\n      onRequestNavCategoryItemToggle(event, { type: 'click', event, value: '', categoryValue: value }),\n    ),\n  );\n\n  // don't fill the icon when it's open\n  const selected = selectedCategoryValue === value && !open;\n  // there's more than 2 possible values for aria-current, but this is the only one that's used in this component\n  const validAriaCurrent: 'page' | 'false' = selected && !open ? 'page' : 'false';\n\n  return {\n    open,\n    value,\n    selected,\n    components: {\n      root: 'button',\n      icon: 'span',\n      expandIcon: 'span',\n      expandIconMotion: ExpandIconMotion,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        'aria-current': validAriaCurrent,\n        'aria-expanded': open,\n        ...props,\n        onClick: onNavCategoryItemClick,\n      }),\n      { elementType: 'button' },\n    ),\n    expandIcon: slot.always(expandIcon, {\n      defaultProps: {\n        children: <ChevronDown20Regular />,\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    expandIconMotion: presenceMotionSlot(props.expandIconMotion, {\n      elementType: ExpandIconMotion,\n      defaultProps: {\n        visible: open,\n      },\n    }),\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","ChevronDown20Regular","createPresenceComponentVariant","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","Rotate","ExpandIconMotion","duration","durationFast","easing","curveEasyEase","animateOpacity","outAngle","inAngle","useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","onRequestNavCategoryItemToggle","selectedCategoryValue","density","onNavCategoryItemClick","event","type","categoryValue","selected","validAriaCurrent","components","root","expandIconMotion","always","elementType","defaultProps","children","visible","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC7G,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,8BAA8B,EAAEC,YAAY,EAAEC,kBAAkB,QAAQ,yBAAyB;AAG1G,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,sBAAsB,QAAQ,gBAAgB;AACvD,SAASC,MAAM,QAAQ,4CAA4C;AAEnE,MAAMC,mBAAmBN,+BAA+BK,QAAQ;IAC9DE,UAAUN,aAAaO,YAAY;IACnCC,QAAQR,aAAaS,aAAa;IAClCC,gBAAgB;IAChBC,UAAU;IACVC,SAAS;AACX;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGlB;IAExB,MAAM,EAAEmB,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,GAAGpB;IAEtF,MAAMqB,yBAAyB3B,iBAC7BF,eAAeqB,SAASS,CAAAA,QACtBJ,+BAA+BI,OAAO;YAAEC,MAAM;YAASD;YAAOL,OAAO;YAAIO,eAAeP;QAAM;IAIlG,qCAAqC;IACrC,MAAMQ,WAAWN,0BAA0BF,SAAS,CAACD;IACrD,+GAA+G;IAC/G,MAAMU,mBAAqCD,YAAY,CAACT,OAAO,SAAS;IAExE,OAAO;QACLA;QACAC;QACAQ;QACAE,YAAY;YACVC,MAAM;YACNb,MAAM;YACND,YAAY;YACZe,kBAAkB3B;QACpB;QACA0B,MAAMnC,KAAKqC,MAAM,CACfvC,yBAAyB,UAAU;YACjCqB;YACA,gBAAgBc;YAChB,iBAAiBV;YACjB,GAAGL,KAAK;YACRE,SAASQ;QACX,IACA;YAAEU,aAAa;QAAS;QAE1BjB,YAAYrB,KAAKqC,MAAM,CAAChB,YAAY;YAClCkB,cAAc;gBACZC,wBAAU,oBAACtC;gBACX,eAAe;YACjB;YACAoC,aAAa;QACf;QACAF,kBAAkB/B,mBAAmBa,MAAMkB,gBAAgB,EAAE;YAC3DE,aAAa7B;YACb8B,cAAc;gBACZE,SAASlB;YACX;QACF;QACAD,MAAMtB,KAAK0C,QAAQ,CAACpB,MAAM;YACxBgB,aAAa;QACf;QACAX;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDown20Regular } from '@fluentui/react-icons';\nimport { createPresenceComponentVariant, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type {\n  NavCategoryItemBaseProps,\n  NavCategoryItemBaseState,\n  NavCategoryItemProps,\n  NavCategoryItemState,\n} from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\nimport { Rotate } from '@fluentui/react-motion-components-preview';\n\nconst ExpandIconMotion = createPresenceComponentVariant(Rotate, {\n  duration: motionTokens.durationFast,\n  easing: motionTokens.curveEasyEase,\n  animateOpacity: false, // Don't fade out the icon\n  outAngle: 0,\n  inAngle: 180,\n});\n\n/**\n * Create the state required to render NavCategoryItem.\n *\n * The returned state can be modified with hooks such as useNavCategoryItemStyles,\n * before being passed to renderNavCategoryItem.\n *\n * @param props - props from this instance of NavCategoryItem\n * @param ref - reference to root HTMLButtonElement of NavCategoryItem\n */\nexport const useNavCategoryItem_unstable = (\n  props: NavCategoryItemProps,\n  ref: React.Ref<HTMLButtonElement>,\n): NavCategoryItemState => {\n  const { density = 'medium' } = useNavContext_unstable();\n\n  const state = useNavCategoryItemBase_unstable(props, ref);\n\n  return {\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      expandIconMotion: ExpandIconMotion,\n    },\n    expandIcon: slot.always(props.expandIcon, {\n      defaultProps: {\n        children: <ChevronDown20Regular />,\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    expandIconMotion: presenceMotionSlot(props.expandIconMotion, {\n      elementType: ExpandIconMotion,\n      defaultProps: {\n        visible: state.open,\n      },\n    }),\n    density,\n  };\n};\n\n/**\n * Create the base state required to render NavCategoryItem.\n *\n * @param props - props from this instance of NavCategoryItem\n * @param ref - reference to root HTMLButtonElement of NavCategoryItem\n */\nexport const useNavCategoryItemBase_unstable = (\n  props: NavCategoryItemBaseProps,\n  ref: React.Ref<HTMLButtonElement>,\n): NavCategoryItemBaseState => {\n  const { onClick, expandIcon, icon } = props;\n\n  const { open, value } = useNavCategoryContext_unstable();\n\n  const { onRequestNavCategoryItemToggle, selectedCategoryValue } = useNavContext_unstable();\n\n  const onNavCategoryItemClick = useEventCallback(\n    mergeCallbacks(onClick, event =>\n      onRequestNavCategoryItemToggle(event, { type: 'click', event, value: '', categoryValue: value }),\n    ),\n  );\n\n  // don't fill the icon when it's open\n  const selected = selectedCategoryValue === value && !open;\n  // there's more than 2 possible values for aria-current, but this is the only one that's used in this component\n  const validAriaCurrent: 'page' | 'false' = selected && !open ? 'page' : 'false';\n\n  return {\n    open,\n    value,\n    selected,\n    components: {\n      root: 'button',\n      icon: 'span',\n      expandIcon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        'aria-current': validAriaCurrent,\n        'aria-expanded': open,\n        ...props,\n        onClick: onNavCategoryItemClick,\n      }),\n      { elementType: 'button' },\n    ),\n    expandIcon: slot.always(expandIcon, {\n      defaultProps: {\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","ChevronDown20Regular","createPresenceComponentVariant","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","Rotate","ExpandIconMotion","duration","durationFast","easing","curveEasyEase","animateOpacity","outAngle","inAngle","useNavCategoryItem_unstable","props","ref","density","state","useNavCategoryItemBase_unstable","components","expandIconMotion","expandIcon","always","defaultProps","children","elementType","visible","open","onClick","icon","value","onRequestNavCategoryItemToggle","selectedCategoryValue","onNavCategoryItemClick","event","type","categoryValue","selected","validAriaCurrent","root","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC7G,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,8BAA8B,EAAEC,YAAY,EAAEC,kBAAkB,QAAQ,yBAAyB;AAQ1G,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,sBAAsB,QAAQ,gBAAgB;AACvD,SAASC,MAAM,QAAQ,4CAA4C;AAEnE,MAAMC,mBAAmBN,+BAA+BK,QAAQ;IAC9DE,UAAUN,aAAaO,YAAY;IACnCC,QAAQR,aAAaS,aAAa;IAClCC,gBAAgB;IAChBC,UAAU;IACVC,SAAS;AACX;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,UAAU,QAAQ,EAAE,GAAGb;IAE/B,MAAMc,QAAQC,gCAAgCJ,OAAOC;IAErD,OAAO;QACL,GAAGE,KAAK;QACRE,YAAY;YACV,4DAA4D;YAC5D,GAAGF,MAAME,UAAU;YACnBC,kBAAkBf;QACpB;QACAgB,YAAYzB,KAAK0B,MAAM,CAACR,MAAMO,UAAU,EAAE;YACxCE,cAAc;gBACZC,wBAAU,oBAAC1B;gBACX,eAAe;YACjB;YACA2B,aAAa;QACf;QACAL,kBAAkBnB,mBAAmBa,MAAMM,gBAAgB,EAAE;YAC3DK,aAAapB;YACbkB,cAAc;gBACZG,SAAST,MAAMU,IAAI;YACrB;QACF;QACAX;IACF;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAME,kCAAkC,CAC7CJ,OACAC;IAEA,MAAM,EAAEa,OAAO,EAAEP,UAAU,EAAEQ,IAAI,EAAE,GAAGf;IAEtC,MAAM,EAAEa,IAAI,EAAEG,KAAK,EAAE,GAAG5B;IAExB,MAAM,EAAE6B,8BAA8B,EAAEC,qBAAqB,EAAE,GAAG7B;IAElE,MAAM8B,yBAAyBpC,iBAC7BF,eAAeiC,SAASM,CAAAA,QACtBH,+BAA+BG,OAAO;YAAEC,MAAM;YAASD;YAAOJ,OAAO;YAAIM,eAAeN;QAAM;IAIlG,qCAAqC;IACrC,MAAMO,WAAWL,0BAA0BF,SAAS,CAACH;IACrD,+GAA+G;IAC/G,MAAMW,mBAAqCD,YAAY,CAACV,OAAO,SAAS;IAExE,OAAO;QACLA;QACAG;QACAO;QACAlB,YAAY;YACVoB,MAAM;YACNV,MAAM;YACNR,YAAY;QACd;QACAkB,MAAM3C,KAAK0B,MAAM,CACf5B,yBAAyB,UAAU;YACjCqB;YACA,gBAAgBuB;YAChB,iBAAiBX;YACjB,GAAGb,KAAK;YACRc,SAASK;QACX,IACA;YAAER,aAAa;QAAS;QAE1BJ,YAAYzB,KAAK0B,MAAM,CAACD,YAAY;YAClCE,cAAc;gBACZ,eAAe;YACjB;YACAE,aAAa;QACf;QACAI,MAAMjC,KAAK4C,QAAQ,CAACX,MAAM;YACxBJ,aAAa;QACf;IACF;AACF,EAAE"}

package/lib/components/NavCategoryItem/useNavCategoryItem.styles.js

@@ -37,8 +37,6 @@ export const useRootStyles = /*#__PURE__*/__styles({
  * Apply styling to the NavCategoryItem slots based on the state
  */
 export const useNavCategoryItemStyles_unstable = state => {
-  'use no memo';
-
   const rootStyles = useRootStyles();
   const smallStyles = useSmallStyles();
   const defaultRootClassName = useRootDefaultClassName();
@@ -51,9 +49,12 @@ export const useNavCategoryItemStyles_unstable = state => {
     open,
     density
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);
   }
   return state;

package/lib/components/NavCategoryItem/useNavCategoryItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","base","Jyy4pa","Bqenvij","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useRootStyles","a9b677","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","open","density","className"],"sources":["useNavCategoryItem.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navCategoryItemClassNames = {\n    root: 'fui-NavCategoryItem',\n    icon: 'fui-NavCategoryItem__icon',\n    expandIcon: 'fui-NavCategoryItem__expandIcon',\n    expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'\n};\nconst useExpandIconStyles = makeStyles({\n    base: {\n        marginInlineStart: 'auto',\n        height: '20px'\n    },\n    selected: typographyStyles.body1Strong\n});\n/**\n * Styles for the root slot\n */ export const useRootStyles = makeStyles({\n    base: {\n        width: '100%'\n    }\n});\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */ export const useNavCategoryItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const smallStyles = useSmallStyles();\n    const defaultRootClassName = useRootDefaultClassName();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const { selected, open, density } = state;\n    state.root.className = mergeClasses(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);\n    state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,IAAI,EAAE,2BAA2B;EACjCC,UAAU,EAAE,iCAAiC;EAC7CC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAc,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAM3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,gBAAGvB,QAAA;EAAAc,IAAA;IAAAU,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAIhC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMG,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,UAAU,GAAGJ,aAAa,CAAC,CAAC;EAClC,MAAMK,WAAW,GAAGrB,cAAc,CAAC,CAAC;EACpC,MAAMsB,oBAAoB,GAAGvB,uBAAuB,CAAC,CAAC;EACtD,MAAMwB,aAAa,GAAG3B,gBAAgB,CAAC,CAAC;EACxC,MAAM4B,eAAe,GAAG1B,kBAAkB,CAAC,CAAC;EAC5C,MAAM2B,UAAU,GAAG5B,aAAa,CAAC,CAAC;EAClC,MAAM6B,gBAAgB,GAAGpB,mBAAmB,CAAC,CAAC;EAC9C,MAAM;IAAEI,QAAQ;IAAEiB,IAAI;IAAEC;EAAQ,CAAC,GAAGT,KAAK;EACzCA,KAAK,CAACjB,IAAI,CAAC2B,SAAS,GAAGnC,YAAY,CAACO,yBAAyB,CAACC,IAAI,EAAEoB,oBAAoB,EAAEF,UAAU,CAACb,IAAI,EAAEqB,OAAO,KAAK,OAAO,IAAIP,WAAW,CAACnB,IAAI,EAAEQ,QAAQ,IAAIiB,IAAI,KAAK,KAAK,IAAIH,eAAe,CAACjB,IAAI,EAAEG,QAAQ,IAAIiB,IAAI,KAAK,KAAK,IAAIJ,aAAa,CAACb,QAAQ,EAAES,KAAK,CAACjB,IAAI,CAAC2B,SAAS,CAAC;EACnRV,KAAK,CAACf,UAAU,CAACyB,SAAS,GAAGnC,YAAY,CAACO,yBAAyB,CAACG,UAAU,EAAEsB,gBAAgB,CAACnB,IAAI,EAAEY,KAAK,CAACf,UAAU,CAACyB,SAAS,CAAC;EAClI,IAAIV,KAAK,CAAChB,IAAI,EAAE;IACZgB,KAAK,CAAChB,IAAI,CAAC0B,SAAS,GAAGnC,YAAY,CAACO,yBAAyB,CAACE,IAAI,EAAEsB,UAAU,CAAClB,IAAI,EAAEG,QAAQ,IAAIe,UAAU,CAACf,QAAQ,EAAES,KAAK,CAAChB,IAAI,CAAC0B,SAAS,CAAC;EAC/I;EACA,OAAOV,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","base","Jyy4pa","Bqenvij","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useRootStyles","a9b677","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","open","density","className"],"sources":["useNavCategoryItem.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navCategoryItemClassNames = {\n    root: 'fui-NavCategoryItem',\n    icon: 'fui-NavCategoryItem__icon',\n    expandIcon: 'fui-NavCategoryItem__expandIcon',\n    expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'\n};\nconst useExpandIconStyles = makeStyles({\n    base: {\n        marginInlineStart: 'auto',\n        height: '20px'\n    },\n    selected: typographyStyles.body1Strong\n});\n/**\n * Styles for the root slot\n */ export const useRootStyles = makeStyles({\n    base: {\n        width: '100%'\n    }\n});\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */ export const useNavCategoryItemStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const smallStyles = useSmallStyles();\n    const defaultRootClassName = useRootDefaultClassName();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const { selected, open, density } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,IAAI,EAAE,2BAA2B;EACjCC,UAAU,EAAE,iCAAiC;EAC7CC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAc,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAM3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,gBAAGvB,QAAA;EAAAc,IAAA;IAAAU,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAIhC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMG,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,MAAMC,UAAU,GAAGJ,aAAa,CAAC,CAAC;EAClC,MAAMK,WAAW,GAAGrB,cAAc,CAAC,CAAC;EACpC,MAAMsB,oBAAoB,GAAGvB,uBAAuB,CAAC,CAAC;EACtD,MAAMwB,aAAa,GAAG3B,gBAAgB,CAAC,CAAC;EACxC,MAAM4B,eAAe,GAAG1B,kBAAkB,CAAC,CAAC;EAC5C,MAAM2B,UAAU,GAAG5B,aAAa,CAAC,CAAC;EAClC,MAAM6B,gBAAgB,GAAGpB,mBAAmB,CAAC,CAAC;EAC9C,MAAM;IAAEI,QAAQ;IAAEiB,IAAI;IAAEC;EAAQ,CAAC,GAAGT,KAAK;EACzC;EACAA,KAAK,CAACjB,IAAI,CAAC2B,SAAS,GAAGnC,YAAY,CAACO,yBAAyB,CAACC,IAAI,EAAEoB,oBAAoB,EAAEF,UAAU,CAACb,IAAI,EAAEqB,OAAO,KAAK,OAAO,IAAIP,WAAW,CAACnB,IAAI,EAAEQ,QAAQ,IAAIiB,IAAI,KAAK,KAAK,IAAIH,eAAe,CAACjB,IAAI,EAAEG,QAAQ,IAAIiB,IAAI,KAAK,KAAK,IAAIJ,aAAa,CAACb,QAAQ,EAAES,KAAK,CAACjB,IAAI,CAAC2B,SAAS,CAAC;EACnR;EACAV,KAAK,CAACf,UAAU,CAACyB,SAAS,GAAGnC,YAAY,CAACO,yBAAyB,CAACG,UAAU,EAAEsB,gBAAgB,CAACnB,IAAI,EAAEY,KAAK,CAACf,UAAU,CAACyB,SAAS,CAAC;EAClI,IAAIV,KAAK,CAAChB,IAAI,EAAE;IACZ;IACAgB,KAAK,CAAChB,IAAI,CAAC0B,SAAS,GAAGnC,YAAY,CAACO,yBAAyB,CAACE,IAAI,EAAEsB,UAAU,CAAClB,IAAI,EAAEG,QAAQ,IAAIe,UAAU,CAACf,QAAQ,EAAES,KAAK,CAAChB,IAAI,CAAC0B,SAAS,CAAC;EAC/I;EACA,OAAOV,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/NavCategoryItem/useNavCategoryItem.styles.raw.js

@@ -25,7 +25,6 @@ const useExpandIconStyles = makeStyles({
 /**
  * Apply styling to the NavCategoryItem slots based on the state
  */ export const useNavCategoryItemStyles_unstable = (state)=>{
-    'use no memo';
     const rootStyles = useRootStyles();
     const smallStyles = useSmallStyles();
     const defaultRootClassName = useRootDefaultClassName();
@@ -34,9 +33,12 @@ const useExpandIconStyles = makeStyles({
     const iconStyles = useIconStyles();
     const expandIconStyles = useExpandIconStyles();
     const { selected, open, density } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);
     }
     return state;

package/lib/components/NavCategoryItem/useNavCategoryItem.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport {\n  useContentStyles,\n  useIconStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { NavCategoryItemSlots, NavCategoryItemState } from './NavCategoryItem.types';\n\nexport const navCategoryItemClassNames: SlotClassNames<NavCategoryItemSlots> = {\n  root: 'fui-NavCategoryItem',\n  icon: 'fui-NavCategoryItem__icon',\n  expandIcon: 'fui-NavCategoryItem__expandIcon',\n  expandIconMotion: 'fui-NavCategoryItem__expandIconMotion',\n};\n\nconst useExpandIconStyles = makeStyles({\n  base: {\n    marginInlineStart: 'auto',\n    height: '20px',\n  },\n  selected: typographyStyles.body1Strong,\n});\n\n/**\n * Styles for the root slot\n */\nexport const useRootStyles = makeStyles({\n  base: {\n    width: '100%',\n  },\n});\n\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */\nexport const useNavCategoryItemStyles_unstable = (state: NavCategoryItemState): NavCategoryItemState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const smallStyles = useSmallStyles();\n  const defaultRootClassName = useRootDefaultClassName();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const iconStyles = useIconStyles();\n  const expandIconStyles = useExpandIconStyles();\n\n  const { selected, open, density } = state;\n\n  state.root.className = mergeClasses(\n    navCategoryItemClassNames.root,\n    defaultRootClassName,\n    rootStyles.base,\n    density === 'small' && smallStyles.root,\n    selected && open === false && indicatorStyles.base,\n    selected && open === false && contentStyles.selected,\n    state.root.className,\n  );\n\n  state.expandIcon.className = mergeClasses(\n    navCategoryItemClassNames.expandIcon,\n    expandIconStyles.base,\n    state.expandIcon.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      navCategoryItemClassNames.icon,\n      iconStyles.base,\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","base","marginInlineStart","height","selected","body1Strong","useRootStyles","width","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","open","density","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SACEC,gBAAgB,EAChBC,aAAa,EACbC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAInC,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,MAAM;IACNC,YAAY;IACZC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,sBAAsBb,WAAW;IACrCc,MAAM;QACJC,mBAAmB;QACnBC,QAAQ;IACV;IACAC,UAAUf,iBAAiBgB,WAAW;AACxC;AAEA;;CAEC,GACD,OAAO,MAAMC,gBAAgBnB,WAAW;IACtCc,MAAM;QACJM,OAAO;IACT;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,aAAaJ;IACnB,MAAMK,cAAcjB;IACpB,MAAMkB,uBAAuBnB;IAC7B,MAAMoB,gBAAgBvB;IACtB,MAAMwB,kBAAkBtB;IACxB,MAAMuB,aAAaxB;IACnB,MAAMyB,mBAAmBhB;IAEzB,MAAM,EAAEI,QAAQ,EAAEa,IAAI,EAAEC,OAAO,EAAE,GAAGT;IAEpCA,MAAMb,IAAI,CAACuB,SAAS,GAAG/B,aACrBO,0BAA0BC,IAAI,EAC9BgB,sBACAF,WAAWT,IAAI,EACfiB,YAAY,WAAWP,YAAYf,IAAI,EACvCQ,YAAYa,SAAS,SAASH,gBAAgBb,IAAI,EAClDG,YAAYa,SAAS,SAASJ,cAAcT,QAAQ,EACpDK,MAAMb,IAAI,CAACuB,SAAS;IAGtBV,MAAMX,UAAU,CAACqB,SAAS,GAAG/B,aAC3BO,0BAA0BG,UAAU,EACpCkB,iBAAiBf,IAAI,EACrBQ,MAAMX,UAAU,CAACqB,SAAS;IAG5B,IAAIV,MAAMZ,IAAI,EAAE;QACdY,MAAMZ,IAAI,CAACsB,SAAS,GAAG/B,aACrBO,0BAA0BE,IAAI,EAC9BkB,WAAWd,IAAI,EACfG,YAAYW,WAAWX,QAAQ,EAC/BK,MAAMZ,IAAI,CAACsB,SAAS;IAExB;IAEA,OAAOV;AACT,EAAE"}
+{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport {\n  useContentStyles,\n  useIconStyles,\n  useIndicatorStyles,\n  useRootDefaultClassName,\n  useSmallStyles,\n} from '../sharedNavStyles.styles';\n\nimport type { NavCategoryItemSlots, NavCategoryItemState } from './NavCategoryItem.types';\n\nexport const navCategoryItemClassNames: SlotClassNames<NavCategoryItemSlots> = {\n  root: 'fui-NavCategoryItem',\n  icon: 'fui-NavCategoryItem__icon',\n  expandIcon: 'fui-NavCategoryItem__expandIcon',\n  expandIconMotion: 'fui-NavCategoryItem__expandIconMotion',\n};\n\nconst useExpandIconStyles = makeStyles({\n  base: {\n    marginInlineStart: 'auto',\n    height: '20px',\n  },\n  selected: typographyStyles.body1Strong,\n});\n\n/**\n * Styles for the root slot\n */\nexport const useRootStyles = makeStyles({\n  base: {\n    width: '100%',\n  },\n});\n\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */\nexport const useNavCategoryItemStyles_unstable = (state: NavCategoryItemState): NavCategoryItemState => {\n  const rootStyles = useRootStyles();\n  const smallStyles = useSmallStyles();\n  const defaultRootClassName = useRootDefaultClassName();\n  const contentStyles = useContentStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const iconStyles = useIconStyles();\n  const expandIconStyles = useExpandIconStyles();\n\n  const { selected, open, density } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    navCategoryItemClassNames.root,\n    defaultRootClassName,\n    rootStyles.base,\n    density === 'small' && smallStyles.root,\n    selected && open === false && indicatorStyles.base,\n    selected && open === false && contentStyles.selected,\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.expandIcon.className = mergeClasses(\n    navCategoryItemClassNames.expandIcon,\n    expandIconStyles.base,\n    state.expandIcon.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(\n      navCategoryItemClassNames.icon,\n      iconStyles.base,\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","base","marginInlineStart","height","selected","body1Strong","useRootStyles","width","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","open","density","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SACEC,gBAAgB,EAChBC,aAAa,EACbC,kBAAkB,EAClBC,uBAAuB,EACvBC,cAAc,QACT,4BAA4B;AAInC,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,MAAM;IACNC,YAAY;IACZC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,sBAAsBb,WAAW;IACrCc,MAAM;QACJC,mBAAmB;QACnBC,QAAQ;IACV;IACAC,UAAUf,iBAAiBgB,WAAW;AACxC;AAEA;;CAEC,GACD,OAAO,MAAMC,gBAAgBnB,WAAW;IACtCc,MAAM;QACJM,OAAO;IACT;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD,MAAMC,aAAaJ;IACnB,MAAMK,cAAcjB;IACpB,MAAMkB,uBAAuBnB;IAC7B,MAAMoB,gBAAgBvB;IACtB,MAAMwB,kBAAkBtB;IACxB,MAAMuB,aAAaxB;IACnB,MAAMyB,mBAAmBhB;IAEzB,MAAM,EAAEI,QAAQ,EAAEa,IAAI,EAAEC,OAAO,EAAE,GAAGT;IAEpC,oDAAoD;IACpDA,MAAMb,IAAI,CAACuB,SAAS,GAAG/B,aACrBO,0BAA0BC,IAAI,EAC9BgB,sBACAF,WAAWT,IAAI,EACfiB,YAAY,WAAWP,YAAYf,IAAI,EACvCQ,YAAYa,SAAS,SAASH,gBAAgBb,IAAI,EAClDG,YAAYa,SAAS,SAASJ,cAAcT,QAAQ,EACpDK,MAAMb,IAAI,CAACuB,SAAS;IAGtB,oDAAoD;IACpDV,MAAMX,UAAU,CAACqB,SAAS,GAAG/B,aAC3BO,0BAA0BG,UAAU,EACpCkB,iBAAiBf,IAAI,EACrBQ,MAAMX,UAAU,CAACqB,SAAS;IAG5B,IAAIV,MAAMZ,IAAI,EAAE;QACd,oDAAoD;QACpDY,MAAMZ,IAAI,CAACsB,SAAS,GAAG/B,aACrBO,0BAA0BE,IAAI,EAC9BkB,WAAWd,IAAI,EACfG,YAAYW,WAAWX,QAAQ,EAC/BK,MAAMZ,IAAI,CAACsB,SAAS;IAExB;IAEA,OAAOV;AACT,EAAE"}

package/lib/components/NavDivider/useNavDividerStyles.styles.js

@@ -19,10 +19,10 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the NavDivider slots based on the state
  */
 export const useNavDividerStyles_unstable = state => {
-  'use no memo';
-
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);
   useDividerStyles_unstable(state);
   return state;