npm - @fluentui/react-nav - Versions diffs - 9.3.17 → 9.3.19 - Mend

@fluentui/react-nav 9.3.17 → 9.3.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,48 @@
 # Change Log - @fluentui/react-nav
-This log was last generated on Thu, 22 Jan 2026 17:01:17 GMT and should not be manually modified.
+This log was last generated on Wed, 25 Feb 2026 13:28:18 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.3.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.3.19)
+Wed, 25 Feb 2026 13:28:18 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.3.18..@fluentui/react-nav_v9.3.19)
+### Patches
+- fix: add  missing "use client" directive to client components and styles ([PR #35719](https://github.com/microsoft/fluentui/pull/35719) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-aria to v9.17.10 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-button to v9.8.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.15 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-divider to v9.6.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-drawer to v9.11.4 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-motion to v9.12.0 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-tabster to v9.26.13 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-tooltip to v9.9.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+## [9.3.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.3.18)
+Thu, 12 Feb 2026 10:46:15 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.3.17..@fluentui/react-nav_v9.3.18)
+### Patches
+- fix: update NavSubItemGroup motion handling and fix styles ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-aria to v9.17.9 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-button to v9.8.1 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-divider to v9.6.1 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-drawer to v9.11.3 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-tooltip to v9.9.1 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
 ## [9.3.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.3.17)
-Thu, 22 Jan 2026 17:01:17 GMT
+Thu, 22 Jan 2026 17:06:33 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.3.16..@fluentui/react-nav_v9.3.17)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -25,7 +25,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { InlineDrawerSlots } from '@fluentui/react-drawer';
 import type { JSXElement } from '@fluentui/react-utilities';
 import { MenuButtonProps } from '@fluentui/react-button';
-import { PresenceMotionSlotProps } from '@fluentui/react-motion';
+import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';

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

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

package/lib/components/NavSubItemGroup/useNavSubItemGroup.js CHANGED Viewed

@@ -1,45 +1,9 @@
 'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import { createPresenceComponent, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';
+import { presenceMotionSlot } from '@fluentui/react-motion';
+import { Collapse } from '@fluentui/react-motion-components-preview';
 import { useNavCategoryContext_unstable } from '../NavCategoryContext';
-import { useNavContext_unstable } from '../NavContext';
-const smallSize = 28; // 28px for small density
-const largeSize = 40; // 40px for large density
-const NavGroupMotion = createPresenceComponent(({ items, density })=>{
-    const isSmallDensity = density === 'small';
-    const height = items ? isSmallDensity ? items * smallSize : items * largeSize : 0;
-    const durationPerItem = isSmallDensity ? 15 : 25; // 15ms per item for small, 25ms for large
-    const keyframes = [
-        {
-            opacity: 0,
-            minHeight: 0,
-            height: 0
-        },
-        {
-            opacity: 1,
-            minHeight: `${height}px`,
-            height: `${height}px`
-        }
-    ];
-    const baseDuration = motionTokens.durationFast + (items || 0) * durationPerItem;
-    const maxDuration = motionTokens.durationUltraSlow;
-    const duration = baseDuration > maxDuration ? maxDuration : baseDuration;
-    return {
-        enter: {
-            keyframes,
-            duration,
-            easing: motionTokens.curveDecelerateMid
-        },
-        exit: {
-            keyframes: [
-                ...keyframes
-            ].reverse(),
-            duration,
-            easing: motionTokens.curveAccelerateMin
-        }
-    };
-});
 /**
  * Create the state required to render NavSubItemGroup.
  *
@@ -50,12 +14,11 @@ const NavGroupMotion = createPresenceComponent(({ items, density })=>{
  * @param ref - reference to root HTMLDivElement of NavSubItemGroup
  */ export const useNavSubItemGroup_unstable = (props, ref)=>{
     const { open } = useNavCategoryContext_unstable();
-    const { density } = useNavContext_unstable();
     return {
         open,
         components: {
             root: 'div',
-            collapseMotion: NavGroupMotion
+            collapseMotion: Collapse
         },
         root: slot.always(getIntrinsicElementProps('div', {
             ...props,
@@ -64,12 +27,10 @@ const NavGroupMotion = createPresenceComponent(({ items, density })=>{
             elementType: 'div'
         }),
         collapseMotion: presenceMotionSlot(props.collapseMotion, {
-            elementType: NavGroupMotion,
+            elementType: Collapse,
             defaultProps: {
                 visible: open,
-                unmountOnExit: true,
-                items: React.Children.count(props.children),
-                density
+                unmountOnExit: true
             }
         })
     };

package/lib/components/NavSubItemGroup/useNavSubItemGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { ~~createPresenceComponent,~~ ~~motionTokens,~~ ~~presenceMotionSlot~~ } from '@fluentui/react-motion';\n\nimport type {~~\n NavSubItemGroupCollapseMotionParams,\n~~ NavSubItemGroupProps~~,\n~~ NavSubItemGroupState~~,\n~~} from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\~~nimport { useNavContext_unstable } from '../NavContext';\~~n\~~nconst smallSize = 28; // 28px for small density\nconst largeSize = 40; // 40px for large density\~~n\nconst NavGroupMotion = createPresenceComponent(({ items, density }: NavSubItemGroupCollapseMotionParams) => {\n const isSmallDensity = density === 'small';\n const height = items ? (isSmallDensity ? items * smallSize : items * largeSize) : 0;\n const durationPerItem = isSmallDensity ? 15 : 25; // 15ms per item for small, 25ms for large\n const keyframes: Keyframe[] = [\n {\n opacity: 0,\n minHeight: 0,\n height: 0,\n },\n {\n opacity: 1,\n minHeight: `${height}px`,\n height: `${height}px`,\n },\n ];\n const baseDuration = motionTokens.durationFast + (items \|\| 0) * durationPerItem;\n const maxDuration = motionTokens.durationUltraSlow;\n const duration = baseDuration > maxDuration ? maxDuration : baseDuration;\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/*\n Create the state required to render NavSubItemGroup.\n \n The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n \n @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n props: NavSubItemGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n const { open } = useNavCategoryContext_unstable();\n ~~const { density } = useNavContext_unstable();\n~~\n return {\n open,\n components: {\n root: 'div',\n collapseMotion: ~~NavGroupMotion~~,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n }),\n { elementType: 'div' },\n ),\n\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: ~~NavGroupMotion~~,\n defaultProps: {\n visible: open,\n unmountOnExit: true,\n ~~items: React.Children.count(props.children),\n density,\n~~ },\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","~~createPresenceComponent~~","~~motionTokens~~","~~presenceMotionSlot","~~useNavCategoryContext_unstable","useNavContext_unstable","smallSize","largeSize","NavGroupMotion","items","density","isSmallDensity","height","durationPerItem","keyframes","opacity","minHeight","baseDuration","durationFast","maxDuration","durationUltraSlow","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","useNavSubItemGroup_unstable","props","ref","open","components","root","collapseMotion","always","elementType","defaultProps","visible","unmountOnExit"~~,"Children","count","children"~~],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,~~uBAAuB,EAAEC,YAAY,EAAEC,~~kBAAkB,QAAQ,yBAAyB;~~AAOnG~~,SAASC,~~8BAA8B~~,QAAQ,~~wBAAwB~~;~~AACvE~~,SAASC,~~sBAAsB~~,QAAQ,~~gBAAgB;AAEvD,MAAMC,YAAY,IAAI,yBAAyB;AAC/C,MAAMC,YAAY,IAAI,yBAAyB;AAE/C,MAAMC,iBAAiBP,~~wBAAwB~~,CAAC,EAAEQ,KAAK,EAAEC,OAAO,EAAuC~~;IACrG,MAAMC,iBAAiBD,YAAY;IACnC,MAAME,SAASH,QAASE,iBAAiBF,QAAQH,YAAYG,QAAQF,YAAa;IAClF,MAAMM,kBAAkBF,iBAAiB,KAAK,IAAI,0CAA0C;IAC5F,MAAMG,YAAwB;QAC5B;YACEC,SAAS;YACTC,WAAW;YACXJ,QAAQ;QACV;QACA;YACEG,SAAS;YACTC,WAAW,GAAGJ,OAAO,EAAE,CAAC;YACxBA,QAAQ,GAAGA,OAAO,EAAE,CAAC;QACvB;KACD;IACD,MAAMK,eAAef,aAAagB,YAAY,GAAG,AAACT,CAAAA,SAAS,CAAA,IAAKI;IAChE,MAAMM,cAAcjB,aAAakB,iBAAiB;IAClD,MAAMC,WAAWJ,eAAeE,cAAcA,cAAcF;IAE5D,OAAO;QACLK,OAAO;YACLR;YACAO;YACAE,QAAQrB,aAAasB,kBAAkB;QACzC;QACAC,MAAM;YACJX,WAAW;mBAAIA;aAAU,CAACY,OAAO;YACjCL;YACAE,QAAQrB,aAAayB,kBAAkB;QACzC;IACF;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,~~GAAG3B~~;~~IACjB~~,~~MAAM,EAAEM,~~OAAO~~,EAAE,GAAGL~~;~~IAEpB,OAAO~~;~~QACL0B;~~QACAC,YAAY;YACVC,MAAM;YACNC,~~gBAAgB1B~~;QAClB;~~QAEAyB~~,~~MAAMjC~~,~~KAAKmC~~,MAAM,~~CACfpC~~,yBAAyB,OAAO;YAC9B,~~GAAG8B~~,KAAK;YACRC;QACF,IACA;YAAEM,aAAa;QAAM;QAGvBF,~~gBAAgB/B~~,~~mBAAmB0B~~,MAAMK,cAAc,EAAE;YACvDE,~~aAAa5B~~;~~YACb6B~~,cAAc;gBACZC,SAASP;gBACTQ,eAAe;~~gBACf9B,OAAOX,MAAM0C,QAAQ,CAACC,KAAK,CAACZ,MAAMa,QAAQ~~;~~gBAC1ChC;YACF;~~QACF;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\n\nimport type { NavSubItemGroupProps, NavSubItemGroupState } from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\n/*\n Create the state required to render NavSubItemGroup.\n \n The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n \n @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n props: NavSubItemGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n const { open } = useNavCategoryContext_unstable();\n\n return {\n open,\n components: {\n root: 'div',\n collapseMotion: Collapse,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n }),\n { elementType: 'div' },\n ),\n\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: Collapse,\n defaultProps: {\n visible: open,\n unmountOnExit: true,\n },\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","presenceMotionSlot","Collapse","useNavCategoryContext_unstable","useNavSubItemGroup_unstable","props","ref","open","components","root","collapseMotion","always","elementType","defaultProps","visible","unmountOnExit"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,QAAQ,QAAQ,4CAA4C;AAGrE,SAASC,8BAA8B,QAAQ,wBAAwB;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGJ;IAEjB,OAAO;QACLI;QACAC,YAAY;YACVC,MAAM;YACNC,gBAAgBR;QAClB;QAEAO,MAAMT,KAAKW,MAAM,CACfZ,yBAAyB,OAAO;YAC9B,GAAGM,KAAK;YACRC;QACF,IACA;YAAEM,aAAa;QAAM;QAGvBF,gBAAgBT,mBAAmBI,MAAMK,cAAc,EAAE;YACvDE,aAAaV;YACbW,cAAc;gBACZC,SAASP;gBACTQ,eAAe;YACjB;QACF;IACF;AACF,EAAE"}

package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js CHANGED Viewed

@@ -9,13 +9,14 @@ export const navSubItemGroupClassNames = {
  */
 const useStyles = /*#__PURE__*/__styles({
   root: {
+    Bnnss6s: "fi64zpg",
     Bz10aip: "f1yj8dow",
     B68tc82: 0,
     Bmxbyg5: 0,
     Bpg54ce: "f1a3p1vp"
   }
 }, {
-  d: [".f1yj8dow{transform:translateZ(0);}", [".f1a3p1vp{overflow:hidden;}", {
+  d: [".fi64zpg{flex-shrink:0;}", ".f1yj8dow{transform:translateZ(0);}", [".f1a3p1vp{overflow:hidden;}", {
     p: -1
   }]]
 });

package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","Bz10aip","B68tc82","Bmxbyg5","Bpg54ce","d","p","useNavSubItemGroupStyles_unstable","state","styles","className"],"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n root: 'fui-NavSubItemGroup'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n transform: 'translateZ(0)',\n overflow: 'hidden'\n }\n});\n/\n Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,~~CAKrB~~,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,~~GAAGT~~,SAAS,CAAC,CAAC;~~EAC1BQ~~,KAAK,~~CAACT~~,IAAI,~~CAACW~~,SAAS,~~GAAGb~~,YAAY,CAACC,yBAAyB,CAACC,IAAI,~~EAAEU~~,MAAM,~~CAACV~~,IAAI,~~EAAES~~,KAAK,~~CAACT~~,IAAI,~~CAACW~~,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","Bnnss6s","Bz10aip","B68tc82","Bmxbyg5","Bpg54ce","d","p","useNavSubItemGroupStyles_unstable","state","styles","className"],"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n root: 'fui-NavSubItemGroup'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n flexShrink: 0,\n transform: 'translateZ(0)',\n overflow: 'hidden'\n }\n});\n/\n Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACV,IAAI,CAACY,SAAS,GAAGd,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.raw.js CHANGED Viewed

@@ -7,6 +7,7 @@ export const navSubItemGroupClassNames = {
  * Styles for the root slot
  */ const useStyles = makeStyles({
     root: {
+        flexShrink: 0,
         transform: 'translateZ(0)',
         overflow: 'hidden'
     }

package/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupSlots, NavSubItemGroupState } from './NavSubItemGroup.types';\n\nexport const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>> = {\n root: 'fui-NavSubItemGroup',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n transform: 'translateZ(0)',\n overflow: 'hidden',\n },\n});\n\n/\n Apply styling to the NavSubItemGroup slots based on the state\n */\nexport const useNavSubItemGroupStyles_unstable = (state: NavSubItemGroupState): NavSubItemGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","navSubItemGroupClassNames","root","useStyles","transform","overflow","useNavSubItemGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,4BAA0F;IACrGC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,WAAW;QACXC,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,~~SAASL~~;~~IAEfI~~,~~MAAML~~,IAAI,~~CAACO~~,SAAS,~~GAAGT~~,aAAaC,0BAA0BC,IAAI,~~EAAEM~~,~~OAAON~~,IAAI,~~EAAEK~~,~~MAAML~~,IAAI,~~CAACO~~,SAAS;IAErG,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupSlots, NavSubItemGroupState } from './NavSubItemGroup.types';\n\nexport const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>> = {\n root: 'fui-NavSubItemGroup',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n flexShrink: 0,\n transform: 'translateZ(0)',\n overflow: 'hidden',\n },\n});\n\n/\n Apply styling to the NavSubItemGroup slots based on the state\n */\nexport const useNavSubItemGroupStyles_unstable = (state: NavSubItemGroupState): NavSubItemGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","navSubItemGroupClassNames","root","useStyles","flexShrink","transform","overflow","useNavSubItemGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,4BAA0F;IACrGC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,YAAY;QACZC,WAAW;QACXC,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASN;IAEfK,MAAMN,IAAI,CAACQ,SAAS,GAAGV,aAAaC,0BAA0BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAErG,OAAOF;AACT,EAAE"}

package/lib/components/sharedNavStyles.styles.js CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { __resetStyles, __styles } from '@griffel/react';

package/lib/components/sharedNavStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","typographyStyles","__resetStyles","__styles","navItemTokens","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","useRootDefaultClassName","useSmallStyles","root","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useContentStyles","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useIndicatorStyles","base","E3zdtr","xr36ep","B67388b","Bitv4sc","Br128sd","rjyhj6","Bjyk6c5","Dlnsje","a2br6o","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","vikyaa","Brlscjf","vvp1qr","t65l24","rc3c53","k","m","useIconStyles","mc9l5x","zoa1oz","sshi5w","Bf4jedk","Bt984gj","Brf1p80","B68tc82","Bmxbyg5","Bpg54ce","B9gejnh","yr4pdu","Bvkmzld","mqdk8l","Gbjhqp","obb2bi","D0sxk3","Esdz9e","Bqil8sh","Bbom3er","djjtid","mz70lj","t6yez3","C9vb3z","ux3ctl","Ba906uv","hndn0g","cw2nnk","Bkztwl0","H8nmoi","ipgedg"],"sources":["sharedNavStyles.styles.js"],"sourcesContent":["~~import~~ { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles } from '@griffel/react';\n// Styles shared by several nav components.\nexport const navItemTokens = {\n defaultDrawerWidth: 260,\n indicatorOffset: 16,\n indicatorWidth: 4,\n indicatorHeight: 20,\n backgroundColor: tokens.colorNeutralBackground4,\n backgroundColorHover: tokens.colorNeutralBackground4Hover,\n backgroundColorPressed: tokens.colorNeutralBackground4Pressed,\n animationTokens: {\n animationDuration: tokens.durationFaster,\n animationFillMode: 'both',\n animationTimingFunction: tokens.curveLinear\n },\n transitionTokens: {\n transitionDuration: tokens.durationFaster,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'background'\n }\n};\n/*\n Styles for the root slot\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n / export const useRootDefaultClassName = makeResetStyles({\n display: 'flex',\n textTransform: 'none',\n position: 'relative',\n justifyContent: 'start',\n alignItems: 'flex-start',\n textAlign: 'left',\n gap: tokens.spacingVerticalL,\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,\n backgroundColor: navItemTokens.backgroundColor,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n textDecorationLine: 'none',\n border: 'none',\n // this element can change between a button and an anchor\n // so we need to reset box sizing to prevent horizontal overflow\n boxSizing: 'border-box',\n cursor: 'pointer',\n transitionDuration: navItemTokens.animationTokens.animationDuration,\n transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,\n transitionProperty: 'background',\n width: '100%',\n ...typographyStyles.body1,\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover\n },\n // Use custom insert focus indicator\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineOffset: `calc(${tokens.strokeWidthThick} -1)`\n }\n});\nexport const useSmallStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`\n }\n});\n/*\n Styles for the content slot (children)\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n / export const useContentStyles = makeStyles({\n selected: typographyStyles.body1Strong\n});\n/\n French fry styles\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n / export const useIndicatorStyles = makeStyles({\n base: {\n '::after': {\n position: 'absolute',\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n background: 'transparent'\n },\n '100%': {\n background: tokens.colorCompoundBrandForeground1\n }\n },\n marginInlineStart: `-${navItemTokens.indicatorOffset}px`,\n backgroundColor: tokens.colorCompoundBrandForeground1,\n height: `${navItemTokens.indicatorHeight}px`,\n width: `${navItemTokens.indicatorWidth}px`,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"'\n },\n '@media (forced-colors: active)': {\n '::after': {\n outline: `solid 2px ${tokens.colorTransparentStroke}`,\n outlineOffset: '-2px'\n }\n }\n }\n});\n/\n Styles for the icon slot\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n * We use the grid trick to stack the filled and regular icons on top of each other\n */ export const useIconStyles = makeStyles({\n base: {\n display: 'grid',\n gridTemplateAreas: 'overlay-area',\n minHeight: '20px',\n minWidth: '20px',\n alignItems: 'top',\n justifyContent: 'center',\n overflow: 'hidden',\n [`& .${iconFilledClassName}`]: {\n gridArea: 'overlay-area',\n color: 'transparent',\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n gridArea: 'overlay-area',\n display: 'inline'\n }\n },\n selected: {\n [`& .${iconFilledClassName}`]: {\n ...navItemTokens.animationTokens,\n display: 'inline',\n animationName: {\n '0%': {\n opacity: 0,\n color: 'transparent'\n },\n '100%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2BrandSelected\n }\n }\n },\n [`& .${iconRegularClassName}`]: {\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2\n },\n '100%': {\n opacity: 0,\n color: 'transparent'\n }\n }\n }\n }\n});\n"],"mappings":"AAAA,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAAAC,aAAA,EAAAC,QAAA,QAA4C,gBAAgB;AAC5D;AACA,OAAO,MAAMC,aAAa,GAAG;EACzBC,kBAAkB,EAAE,GAAG;EACvBC,eAAe,EAAE,EAAE;EACnBC,cAAc,EAAE,CAAC;EACjBC,eAAe,EAAE,EAAE;EACnBC,eAAe,EAAET,MAAM,CAACU,uBAAuB;EAC/CC,oBAAoB,EAAEX,MAAM,CAACY,4BAA4B;EACzDC,sBAAsB,EAAEb,MAAM,CAACc,8BAA8B;EAC7DC,eAAe,EAAE;IACbC,iBAAiB,EAAEhB,MAAM,CAACiB,cAAc;IACxCC,iBAAiB,EAAE,MAAM;IACzBC,uBAAuB,EAAEnB,MAAM,CAACoB;EACpC,CAAC;EACDC,gBAAgB,EAAE;IACdC,kBAAkB,EAAEtB,MAAM,CAACiB,cAAc;IACzCM,wBAAwB,EAAEvB,MAAM,CAACoB,WAAW;IAC5CI,kBAAkB,EAAE;EACxB;AACJ,CAAC;AACD;AACA;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,gBAAGvB,aAAA,w5DA+B1C,CAAC;AACF,OAAO,MAAMwB,cAAc,gBAAGvB,QAAA;EAAAwB,IAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAI7B,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMC,gBAAgB,gBAAGhC,QAAA;EAAAiC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAP,CAAA;AAAA,CAEnC,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMQ,kBAAkB,gBAAGtC,QAAA;EAAAuC,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAA7B,CAAA;IAAAC,CAAA;EAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAA9B,CAAA;IAAA8B,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2BrC,CAAC;AACF;AACA;AACA;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,gBAAG9D,QAAA;EAAAuC,IAAA;IAAAwB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAnD,QAAA;IAAAoD,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAT,MAAA;IAAAU,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAA9D,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAA6B,CAAA;AAAA,CAgDhC,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","typographyStyles","__resetStyles","__styles","navItemTokens","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","useRootDefaultClassName","useSmallStyles","root","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useContentStyles","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useIndicatorStyles","base","E3zdtr","xr36ep","B67388b","Bitv4sc","Br128sd","rjyhj6","Bjyk6c5","Dlnsje","a2br6o","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","vikyaa","Brlscjf","vvp1qr","t65l24","rc3c53","k","m","useIconStyles","mc9l5x","zoa1oz","sshi5w","Bf4jedk","Bt984gj","Brf1p80","B68tc82","Bmxbyg5","Bpg54ce","B9gejnh","yr4pdu","Bvkmzld","mqdk8l","Gbjhqp","obb2bi","D0sxk3","Esdz9e","Bqil8sh","Bbom3er","djjtid","mz70lj","t6yez3","C9vb3z","ux3ctl","Ba906uv","hndn0g","cw2nnk","Bkztwl0","H8nmoi","ipgedg"],"sources":["sharedNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles } from '@griffel/react';\n// Styles shared by several nav components.\nexport const navItemTokens = {\n defaultDrawerWidth: 260,\n indicatorOffset: 16,\n indicatorWidth: 4,\n indicatorHeight: 20,\n backgroundColor: tokens.colorNeutralBackground4,\n backgroundColorHover: tokens.colorNeutralBackground4Hover,\n backgroundColorPressed: tokens.colorNeutralBackground4Pressed,\n animationTokens: {\n animationDuration: tokens.durationFaster,\n animationFillMode: 'both',\n animationTimingFunction: tokens.curveLinear\n },\n transitionTokens: {\n transitionDuration: tokens.durationFaster,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'background'\n }\n};\n/*\n Styles for the root slot\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n / export const useRootDefaultClassName = makeResetStyles({\n display: 'flex',\n textTransform: 'none',\n position: 'relative',\n justifyContent: 'start',\n alignItems: 'flex-start',\n textAlign: 'left',\n gap: tokens.spacingVerticalL,\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,\n backgroundColor: navItemTokens.backgroundColor,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n textDecorationLine: 'none',\n border: 'none',\n // this element can change between a button and an anchor\n // so we need to reset box sizing to prevent horizontal overflow\n boxSizing: 'border-box',\n cursor: 'pointer',\n transitionDuration: navItemTokens.animationTokens.animationDuration,\n transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,\n transitionProperty: 'background',\n width: '100%',\n ...typographyStyles.body1,\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover\n },\n // Use custom insert focus indicator\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineOffset: `calc(${tokens.strokeWidthThick} -1)`\n }\n});\nexport const useSmallStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`\n }\n});\n/*\n Styles for the content slot (children)\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n / export const useContentStyles = makeStyles({\n selected: typographyStyles.body1Strong\n});\n/\n French fry styles\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n / export const useIndicatorStyles = makeStyles({\n base: {\n '::after': {\n position: 'absolute',\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n background: 'transparent'\n },\n '100%': {\n background: tokens.colorCompoundBrandForeground1\n }\n },\n marginInlineStart: `-${navItemTokens.indicatorOffset}px`,\n backgroundColor: tokens.colorCompoundBrandForeground1,\n height: `${navItemTokens.indicatorHeight}px`,\n width: `${navItemTokens.indicatorWidth}px`,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"'\n },\n '@media (forced-colors: active)': {\n '::after': {\n outline: `solid 2px ${tokens.colorTransparentStroke}`,\n outlineOffset: '-2px'\n }\n }\n }\n});\n/\n Styles for the icon slot\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n * We use the grid trick to stack the filled and regular icons on top of each other\n */ export const useIconStyles = makeStyles({\n base: {\n display: 'grid',\n gridTemplateAreas: 'overlay-area',\n minHeight: '20px',\n minWidth: '20px',\n alignItems: 'top',\n justifyContent: 'center',\n overflow: 'hidden',\n [`& .${iconFilledClassName}`]: {\n gridArea: 'overlay-area',\n color: 'transparent',\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n gridArea: 'overlay-area',\n display: 'inline'\n }\n },\n selected: {\n [`& .${iconFilledClassName}`]: {\n ...navItemTokens.animationTokens,\n display: 'inline',\n animationName: {\n '0%': {\n opacity: 0,\n color: 'transparent'\n },\n '100%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2BrandSelected\n }\n }\n },\n [`& .${iconRegularClassName}`]: {\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2\n },\n '100%': {\n opacity: 0,\n color: 'transparent'\n }\n }\n }\n }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAAAC,aAAA,EAAAC,QAAA,QAA4C,gBAAgB;AAC5D;AACA,OAAO,MAAMC,aAAa,GAAG;EACzBC,kBAAkB,EAAE,GAAG;EACvBC,eAAe,EAAE,EAAE;EACnBC,cAAc,EAAE,CAAC;EACjBC,eAAe,EAAE,EAAE;EACnBC,eAAe,EAAET,MAAM,CAACU,uBAAuB;EAC/CC,oBAAoB,EAAEX,MAAM,CAACY,4BAA4B;EACzDC,sBAAsB,EAAEb,MAAM,CAACc,8BAA8B;EAC7DC,eAAe,EAAE;IACbC,iBAAiB,EAAEhB,MAAM,CAACiB,cAAc;IACxCC,iBAAiB,EAAE,MAAM;IACzBC,uBAAuB,EAAEnB,MAAM,CAACoB;EACpC,CAAC;EACDC,gBAAgB,EAAE;IACdC,kBAAkB,EAAEtB,MAAM,CAACiB,cAAc;IACzCM,wBAAwB,EAAEvB,MAAM,CAACoB,WAAW;IAC5CI,kBAAkB,EAAE;EACxB;AACJ,CAAC;AACD;AACA;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,gBAAGvB,aAAA,w5DA+B1C,CAAC;AACF,OAAO,MAAMwB,cAAc,gBAAGvB,QAAA;EAAAwB,IAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAI7B,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMC,gBAAgB,gBAAGhC,QAAA;EAAAiC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAP,CAAA;AAAA,CAEnC,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMQ,kBAAkB,gBAAGtC,QAAA;EAAAuC,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAA7B,CAAA;IAAAC,CAAA;EAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAA9B,CAAA;IAAA8B,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2BrC,CAAC;AACF;AACA;AACA;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,gBAAG9D,QAAA;EAAAuC,IAAA;IAAAwB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAnD,QAAA;IAAAoD,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAT,MAAA;IAAAU,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAA9D,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAA6B,CAAA;AAAA,CAgDhC,CAAC","ignoreList":[]}

package/lib/components/sharedNavStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { makeResetStyles, makeStyles } from '@griffel/react';

package/lib/components/sharedNavStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/sharedNavStyles.styles.ts"],"sourcesContent":["~~import~~ { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles } from '@griffel/react';\n\n// Styles shared by several nav components.\n\nexport const navItemTokens = {\n defaultDrawerWidth: 260,\n indicatorOffset: 16,\n indicatorWidth: 4,\n indicatorHeight: 20,\n backgroundColor: tokens.colorNeutralBackground4,\n backgroundColorHover: tokens.colorNeutralBackground4Hover,\n backgroundColorPressed: tokens.colorNeutralBackground4Pressed,\n animationTokens: {\n animationDuration: tokens.durationFaster,\n animationFillMode: 'both',\n animationTimingFunction: tokens.curveLinear,\n },\n transitionTokens: {\n transitionDuration: tokens.durationFaster,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'background',\n },\n};\n\n/*\n Styles for the root slot\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n /\nexport const useRootDefaultClassName = makeResetStyles({\n display: 'flex',\n textTransform: 'none',\n position: 'relative',\n justifyContent: 'start',\n alignItems: 'flex-start',\n textAlign: 'left',\n gap: tokens.spacingVerticalL,\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,\n backgroundColor: navItemTokens.backgroundColor,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n textDecorationLine: 'none',\n border: 'none',\n // this element can change between a button and an anchor\n // so we need to reset box sizing to prevent horizontal overflow\n boxSizing: 'border-box',\n cursor: 'pointer',\n\n transitionDuration: navItemTokens.animationTokens.animationDuration,\n transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,\n transitionProperty: 'background',\n\n width: '100%',\n ...typographyStyles.body1,\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover,\n },\n\n // Use custom insert focus indicator\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineOffset: `calc(${tokens.strokeWidthThick} -1)`,\n },\n});\n\nexport const useSmallStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`,\n },\n});\n\n/*\n Styles for the content slot (children)\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n /\nexport const useContentStyles = makeStyles({\n selected: typographyStyles.body1Strong,\n});\n\n/\n French fry styles\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n /\nexport const useIndicatorStyles = makeStyles({\n base: {\n '::after': {\n position: 'absolute',\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': { background: 'transparent' },\n '100%': { background: tokens.colorCompoundBrandForeground1 },\n },\n\n marginInlineStart: `-${navItemTokens.indicatorOffset}px`,\n backgroundColor: tokens.colorCompoundBrandForeground1,\n height: `${navItemTokens.indicatorHeight}px`,\n width: `${navItemTokens.indicatorWidth}px`,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"',\n },\n '@media (forced-colors: active)': {\n '::after': {\n outline: `solid 2px ${tokens.colorTransparentStroke}`,\n outlineOffset: '-2px',\n },\n },\n },\n});\n\n/\n Styles for the icon slot\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n * We use the grid trick to stack the filled and regular icons on top of each other\n */\nexport const useIconStyles = makeStyles({\n base: {\n display: 'grid',\n gridTemplateAreas: 'overlay-area',\n minHeight: '20px',\n minWidth: '20px',\n alignItems: 'top',\n justifyContent: 'center',\n overflow: 'hidden',\n [`& .${iconFilledClassName}`]: {\n gridArea: 'overlay-area',\n color: 'transparent',\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n gridArea: 'overlay-area',\n display: 'inline',\n },\n },\n selected: {\n [`& .${iconFilledClassName}`]: {\n ...navItemTokens.animationTokens,\n display: 'inline',\n animationName: {\n '0%': {\n opacity: 0,\n color: 'transparent',\n },\n '100%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n },\n },\n [`& .${iconRegularClassName}`]: {\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2,\n },\n '100%': {\n opacity: 0,\n color: 'transparent',\n },\n },\n },\n },\n});\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","typographyStyles","makeResetStyles","makeStyles","navItemTokens","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","useRootDefaultClassName","display","textTransform","position","justifyContent","alignItems","textAlign","gap","spacingVerticalL","padding","spacingVerticalMNudge","spacingHorizontalS","spacingHorizontalMNudge","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","textDecorationLine","border","boxSizing","cursor","width","body1","outline","strokeWidthThick","colorStrokeFocus2","outlineOffset","useSmallStyles","root","spacingVerticalXS","useContentStyles","selected","body1Strong","useIndicatorStyles","base","animationName","background","colorCompoundBrandForeground1","marginInlineStart","height","borderRadiusCircular","content","colorTransparentStroke","useIconStyles","gridTemplateAreas","minHeight","minWidth","overflow","gridArea","opacity","colorNeutralForeground2BrandSelected"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/sharedNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles } from '@griffel/react';\n\n// Styles shared by several nav components.\n\nexport const navItemTokens = {\n defaultDrawerWidth: 260,\n indicatorOffset: 16,\n indicatorWidth: 4,\n indicatorHeight: 20,\n backgroundColor: tokens.colorNeutralBackground4,\n backgroundColorHover: tokens.colorNeutralBackground4Hover,\n backgroundColorPressed: tokens.colorNeutralBackground4Pressed,\n animationTokens: {\n animationDuration: tokens.durationFaster,\n animationFillMode: 'both',\n animationTimingFunction: tokens.curveLinear,\n },\n transitionTokens: {\n transitionDuration: tokens.durationFaster,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'background',\n },\n};\n\n/*\n Styles for the root slot\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n /\nexport const useRootDefaultClassName = makeResetStyles({\n display: 'flex',\n textTransform: 'none',\n position: 'relative',\n justifyContent: 'start',\n alignItems: 'flex-start',\n textAlign: 'left',\n gap: tokens.spacingVerticalL,\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,\n backgroundColor: navItemTokens.backgroundColor,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n textDecorationLine: 'none',\n border: 'none',\n // this element can change between a button and an anchor\n // so we need to reset box sizing to prevent horizontal overflow\n boxSizing: 'border-box',\n cursor: 'pointer',\n\n transitionDuration: navItemTokens.animationTokens.animationDuration,\n transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,\n transitionProperty: 'background',\n\n width: '100%',\n ...typographyStyles.body1,\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover,\n },\n\n // Use custom insert focus indicator\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineOffset: `calc(${tokens.strokeWidthThick} -1)`,\n },\n});\n\nexport const useSmallStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`,\n },\n});\n\n/*\n Styles for the content slot (children)\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n /\nexport const useContentStyles = makeStyles({\n selected: typographyStyles.body1Strong,\n});\n\n/\n French fry styles\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n /\nexport const useIndicatorStyles = makeStyles({\n base: {\n '::after': {\n position: 'absolute',\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': { background: 'transparent' },\n '100%': { background: tokens.colorCompoundBrandForeground1 },\n },\n\n marginInlineStart: `-${navItemTokens.indicatorOffset}px`,\n backgroundColor: tokens.colorCompoundBrandForeground1,\n height: `${navItemTokens.indicatorHeight}px`,\n width: `${navItemTokens.indicatorWidth}px`,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"',\n },\n '@media (forced-colors: active)': {\n '::after': {\n outline: `solid 2px ${tokens.colorTransparentStroke}`,\n outlineOffset: '-2px',\n },\n },\n },\n});\n\n/\n Styles for the icon slot\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n * We use the grid trick to stack the filled and regular icons on top of each other\n */\nexport const useIconStyles = makeStyles({\n base: {\n display: 'grid',\n gridTemplateAreas: 'overlay-area',\n minHeight: '20px',\n minWidth: '20px',\n alignItems: 'top',\n justifyContent: 'center',\n overflow: 'hidden',\n [`& .${iconFilledClassName}`]: {\n gridArea: 'overlay-area',\n color: 'transparent',\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n gridArea: 'overlay-area',\n display: 'inline',\n },\n },\n selected: {\n [`& .${iconFilledClassName}`]: {\n ...navItemTokens.animationTokens,\n display: 'inline',\n animationName: {\n '0%': {\n opacity: 0,\n color: 'transparent',\n },\n '100%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n },\n },\n [`& .${iconRegularClassName}`]: {\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2,\n },\n '100%': {\n opacity: 0,\n color: 'transparent',\n },\n },\n },\n },\n});\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","typographyStyles","makeResetStyles","makeStyles","navItemTokens","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","useRootDefaultClassName","display","textTransform","position","justifyContent","alignItems","textAlign","gap","spacingVerticalL","padding","spacingVerticalMNudge","spacingHorizontalS","spacingHorizontalMNudge","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","textDecorationLine","border","boxSizing","cursor","width","body1","outline","strokeWidthThick","colorStrokeFocus2","outlineOffset","useSmallStyles","root","spacingVerticalXS","useContentStyles","selected","body1Strong","useIndicatorStyles","base","animationName","background","colorCompoundBrandForeground1","marginInlineStart","height","borderRadiusCircular","content","colorTransparentStroke","useIconStyles","gridTemplateAreas","minHeight","minWidth","overflow","gridArea","opacity","colorNeutralForeground2BrandSelected"],"mappings":"AAAA;AAEA,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,wBAAwB;AAClF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,eAAe,EAAEC,UAAU,QAAQ,iBAAiB;AAE7D,2CAA2C;AAE3C,OAAO,MAAMC,gBAAgB;IAC3BC,oBAAoB;IACpBC,iBAAiB;IACjBC,gBAAgB;IAChBC,iBAAiB;IACjBC,iBAAiBT,OAAOU,uBAAuB;IAC/CC,sBAAsBX,OAAOY,4BAA4B;IACzDC,wBAAwBb,OAAOc,8BAA8B;IAC7DC,iBAAiB;QACfC,mBAAmBhB,OAAOiB,cAAc;QACxCC,mBAAmB;QACnBC,yBAAyBnB,OAAOoB,WAAW;IAC7C;IACAC,kBAAkB;QAChBC,oBAAoBtB,OAAOiB,cAAc;QACzCM,0BAA0BvB,OAAOoB,WAAW;QAC5CI,oBAAoB;IACtB;AACF,EAAE;AAEF;;;CAGC,GACD,OAAO,MAAMC,0BAA0BvB,gBAAgB;IACrDwB,SAAS;IACTC,eAAe;IACfC,UAAU;IACVC,gBAAgB;IAChBC,YAAY;IACZC,WAAW;IACXC,KAAKhC,OAAOiC,gBAAgB;IAC5BC,SAAS,GAAGlC,OAAOmC,qBAAqB,CAAC,CAAC,EAAEnC,OAAOoC,kBAAkB,CAAC,CAAC,EAAEpC,OAAOmC,qBAAqB,CAAC,CAAC,EAAEnC,OAAOqC,uBAAuB,EAAE;IACzI5B,iBAAiBL,cAAcK,eAAe;IAC9C6B,cAActC,OAAOuC,kBAAkB;IACvCC,OAAOxC,OAAOyC,uBAAuB;IACrCC,oBAAoB;IACpBC,QAAQ;IACR,yDAAyD;IACzD,gEAAgE;IAChEC,WAAW;IACXC,QAAQ;IAERvB,oBAAoBlB,cAAcW,eAAe,CAACC,iBAAiB;IACnEO,0BAA0BnB,cAAcW,eAAe,CAACI,uBAAuB;IAC/EK,oBAAoB;IAEpBsB,OAAO;IACP,GAAG7C,iBAAiB8C,KAAK;IACzB,UAAU;QACRtC,iBAAiBL,cAAcO,oBAAoB;IACrD;IAEA,oCAAoC;IACpC,mBAAmB;QACjBqC,SAAS,GAAGhD,OAAOiD,gBAAgB,CAAC,OAAO,EAAEjD,OAAOkD,iBAAiB,EAAE;QACvEC,eAAe,CAAC,KAAK,EAAEnD,OAAOiD,gBAAgB,CAAC,MAAM,CAAC;IACxD;AACF,GAAG;AAEH,OAAO,MAAMG,iBAAiBjD,WAAW;IACvCkD,MAAM;QACJnB,SAAS,GAAGlC,OAAOsD,iBAAiB,CAAC,CAAC,EAAEtD,OAAOoC,kBAAkB,CAAC,CAAC,EAAEpC,OAAOsD,iBAAiB,CAAC,CAAC,EAAEtD,OAAOqC,uBAAuB,EAAE;IACnI;AACF,GAAG;AAEH;;;CAGC,GACD,OAAO,MAAMkB,mBAAmBpD,WAAW;IACzCqD,UAAUvD,iBAAiBwD,WAAW;AACxC,GAAG;AAEH;;;CAGC,GACD,OAAO,MAAMC,qBAAqBvD,WAAW;IAC3CwD,MAAM;QACJ,WAAW;YACT/B,UAAU;YACV,GAAGxB,cAAcW,eAAe;YAChC6C,eAAe;gBACb,MAAM;oBAAEC,YAAY;gBAAc;gBAClC,QAAQ;oBAAEA,YAAY7D,OAAO8D,6BAA6B;gBAAC;YAC7D;YAEAC,mBAAmB,CAAC,CAAC,EAAE3D,cAAcE,eAAe,CAAC,EAAE,CAAC;YACxDG,iBAAiBT,OAAO8D,6BAA6B;YACrDE,QAAQ,GAAG5D,cAAcI,eAAe,CAAC,EAAE,CAAC;YAC5CsC,OAAO,GAAG1C,cAAcG,cAAc,CAAC,EAAE,CAAC;YAC1C+B,cAActC,OAAOiE,oBAAoB;YACzCC,SAAS;QACX;QACA,kCAAkC;YAChC,WAAW;gBACTlB,SAAS,CAAC,UAAU,EAAEhD,OAAOmE,sBAAsB,EAAE;gBACrDhB,eAAe;YACjB;QACF;IACF;AACF,GAAG;AAEH;;;;CAIC,GACD,OAAO,MAAMiB,gBAAgBjE,WAAW;IACtCwD,MAAM;QACJjC,SAAS;QACT2C,mBAAmB;QACnBC,WAAW;QACXC,UAAU;QACVzC,YAAY;QACZD,gBAAgB;QAChB2C,UAAU;QACV,CAAC,CAAC,GAAG,EAAE1E,qBAAqB,CAAC,EAAE;YAC7B2E,UAAU;YACVjC,OAAO;YACPd,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAE3B,sBAAsB,CAAC,EAAE;YAC9B0E,UAAU;YACV/C,SAAS;QACX;IACF;IACA8B,UAAU;QACR,CAAC,CAAC,GAAG,EAAE1D,qBAAqB,CAAC,EAAE;YAC7B,GAAGM,cAAcW,eAAe;YAChCW,SAAS;YACTkC,eAAe;gBACb,MAAM;oBACJc,SAAS;oBACTlC,OAAO;gBACT;gBACA,QAAQ;oBACNkC,SAAS;oBACTlC,OAAOxC,OAAO2E,oCAAoC;gBACpD;YACF;QACF;QACA,CAAC,CAAC,GAAG,EAAE5E,sBAAsB,CAAC,EAAE;YAC9B,GAAGK,cAAcW,eAAe;YAChC6C,eAAe;gBACb,MAAM;oBACJc,SAAS;oBACTlC,OAAOxC,OAAOyC,uBAAuB;gBACvC;gBACA,QAAQ;oBACNiC,SAAS;oBACTlC,OAAO;gBACT;YACF;QACF;IACF;AACF,GAAG"}

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

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

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

@@ -13,52 +13,15 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactmotion = require("@fluentui/react-motion");
+const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
 const _NavCategoryContext = require("../NavCategoryContext");
-const _NavContext = require("../NavContext");
-const smallSize = 28; // 28px for small density
-const largeSize = 40; // 40px for large density
-const NavGroupMotion = (0, _reactmotion.createPresenceComponent)(({ items, density })=>{
-    const isSmallDensity = density === 'small';
-    const height = items ? isSmallDensity ? items * smallSize : items * largeSize : 0;
-    const durationPerItem = isSmallDensity ? 15 : 25; // 15ms per item for small, 25ms for large
-    const keyframes = [
-        {
-            opacity: 0,
-            minHeight: 0,
-            height: 0
-        },
-        {
-            opacity: 1,
-            minHeight: `${height}px`,
-            height: `${height}px`
-        }
-    ];
-    const baseDuration = _reactmotion.motionTokens.durationFast + (items || 0) * durationPerItem;
-    const maxDuration = _reactmotion.motionTokens.durationUltraSlow;
-    const duration = baseDuration > maxDuration ? maxDuration : baseDuration;
-    return {
-        enter: {
-            keyframes,
-            duration,
-            easing: _reactmotion.motionTokens.curveDecelerateMid
-        },
-        exit: {
-            keyframes: [
-                ...keyframes
-            ].reverse(),
-            duration,
-            easing: _reactmotion.motionTokens.curveAccelerateMin
-        }
-    };
-});
 const useNavSubItemGroup_unstable = (props, ref)=>{
     const { open } = (0, _NavCategoryContext.useNavCategoryContext_unstable)();
-    const { density } = (0, _NavContext.useNavContext_unstable)();
     return {
         open,
         components: {
             root: 'div',
-            collapseMotion: NavGroupMotion
+            collapseMotion: _reactmotioncomponentspreview.Collapse
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
             ...props,
@@ -67,12 +30,10 @@ const useNavSubItemGroup_unstable = (props, ref)=>{
             elementType: 'div'
         }),
         collapseMotion: (0, _reactmotion.presenceMotionSlot)(props.collapseMotion, {
-            elementType: NavGroupMotion,
+            elementType: _reactmotioncomponentspreview.Collapse,
             defaultProps: {
                 visible: open,
-                unmountOnExit: true,
-                items: _react.Children.count(props.children),
-                density
+                unmountOnExit: true
             }
         })
     };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { ~~createPresenceComponent,~~ ~~motionTokens,~~ ~~presenceMotionSlot~~ } from '@fluentui/react-motion';\n\nimport type {~~\n NavSubItemGroupCollapseMotionParams,\n~~ NavSubItemGroupProps~~,\n~~ NavSubItemGroupState~~,\n~~} from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\~~nimport { useNavContext_unstable } from '../NavContext';\~~n\~~nconst smallSize = 28; // 28px for small density\nconst largeSize = 40; // 40px for large density\~~n\nconst NavGroupMotion = createPresenceComponent(({ items, density }: NavSubItemGroupCollapseMotionParams) => {\n const isSmallDensity = density === 'small';\n const height = items ? (isSmallDensity ? items * smallSize : items * largeSize) : 0;\n const durationPerItem = isSmallDensity ? 15 : 25; // 15ms per item for small, 25ms for large\n const keyframes: Keyframe[] = [\n {\n opacity: 0,\n minHeight: 0,\n height: 0,\n },\n {\n opacity: 1,\n minHeight: `${height}px`,\n height: `${height}px`,\n },\n ];\n const baseDuration = motionTokens.durationFast + (items \|\| 0) * durationPerItem;\n const maxDuration = motionTokens.durationUltraSlow;\n const duration = baseDuration > maxDuration ? maxDuration : baseDuration;\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/*\n Create the state required to render NavSubItemGroup.\n \n The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n \n @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n props: NavSubItemGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n const { open } = useNavCategoryContext_unstable();\n ~~const { density } = useNavContext_unstable();\n~~\n return {\n open,\n components: {\n root: 'div',\n collapseMotion: ~~NavGroupMotion~~,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n }),\n { elementType: 'div' },\n ),\n\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: ~~NavGroupMotion~~,\n defaultProps: {\n visible: open,\n unmountOnExit: true,\n ~~items: React.Children.count(props.children),\n density,\n~~ },\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","~~createPresenceComponent~~","~~motionTokens~~","~~presenceMotionSlot","~~useNavCategoryContext_unstable","useNavContext_unstable","smallSize","largeSize","NavGroupMotion","items","density","isSmallDensity","height","durationPerItem","keyframes","opacity","minHeight","baseDuration","durationFast","maxDuration","durationUltraSlow","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","useNavSubItemGroup_unstable","props","ref","open","components","root","collapseMotion","always","elementType","defaultProps","visible","unmountOnExit"~~,"Children","count","children"~~],"mappings":"AAAA;;;;;+~~BA4Da8B~~;;;;;;;~~iEA1DU~~,QAAQ;gCACgB,4BAA4B;~~6BACD~~,yBAAyB;~~oCAOpD~~,~~wBAAwB~~;~~4BAChC~~,~~gBAAgB~~;~~AAEvD~~,MAAMtB,YAAY,IAAI,yBAAyB;AAC/C,MAAMC,YAAY,IAAI,yBAAyB;AAE/C,MAAMC,qBAAiBP,oCAAAA,EAAwB,CAAC,EAAEQ,KAAK,EAAEC,OAAO,EAAuC;IACrG,MAAMC,iBAAiBD,YAAY;IACnC,MAAME,SAASH,QAASE,iBAAiBF,QAAQH,YAAYG,QAAQF,YAAa;IAClF,MAAMM,kBAAkBF,iBAAiB,KAAK,IAAI,0CAA0C;IAC5F,MAAMG,YAAwB;QAC5B;YACEC,SAAS;YACTC,WAAW;YACXJ,QAAQ;QACV;QACA;YACEG,SAAS;YACTC,WAAW,GAAGJ,OAAO,EAAE,CAAC;YACxBA,QAAQ,GAAGA,OAAO,EAAE,CAAC;QACvB;KACD;IACD,MAAMK,eAAef,yBAAAA,CAAagB,YAAY,GAAIT,CAAAA,UAAS,CAAA,GAAKI;IAChE,MAAMM,cAAcjB,yBAAAA,CAAakB,iBAAiB;IAClD,MAAMC,WAAWJ,eAAeE,cAAcA,cAAcF;IAE5D,OAAO;QACLK,OAAO;YACLR;YACAO;YACAE,QAAQrB,yBAAAA,CAAasB,kBAAkB;QACzC;QACAC,MAAM;YACJX,WAAW;mBAAIA;aAAU,CAACY,OAAO;YACjCL;YACAE,QAAQrB,yBAAAA,CAAayB,kBAAkB;QACzC;IACF;AACF;AAWO,oCAAoC,~~CACzCE~~,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,~~GAAG3B~~,~~sDAAAA~~;~~IACjB~~,~~MAAM,EAAEM,~~OAAO~~,EAAE,OAAGL,kCAAAA~~;~~IAEpB,OAAO~~;~~QACL0B;~~QACAC,YAAY;YACVC,MAAM;YACNC,~~gBAAgB1B~~;QAClB;~~QAEAyB~~,~~MAAMjC~~,oBAAAA,~~CAAKmC~~,MAAM,~~KACfpC~~,wCAAAA,EAAyB,OAAO;YAC9B,~~GAAG8B~~,KAAK;YACRC;QACF,IACA;YAAEM,aAAa;QAAM;QAGvBF,~~oBAAgB/B~~,+BAAAA,~~EAAmB0B~~,MAAMK,cAAc,EAAE;YACvDE,~~aAAa5B~~;~~YACb6B~~,cAAc;gBACZC,SAASP;gBACTQ,eAAe;~~gBACf9B,OAAOX,OAAM0C,QAAQ,CAACC,KAAK,CAACZ,MAAMa,QAAQ~~;~~gBAC1ChC;YACF;~~QACF;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\n\nimport type { NavSubItemGroupProps, NavSubItemGroupState } from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\n/*\n Create the state required to render NavSubItemGroup.\n \n The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n \n @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n props: NavSubItemGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n const { open } = useNavCategoryContext_unstable();\n\n return {\n open,\n components: {\n root: 'div',\n collapseMotion: Collapse,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n }),\n { elementType: 'div' },\n ),\n\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: Collapse,\n defaultProps: {\n visible: open,\n unmountOnExit: true,\n },\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","presenceMotionSlot","Collapse","useNavCategoryContext_unstable","useNavSubItemGroup_unstable","props","ref","open","components","root","collapseMotion","always","elementType","defaultProps","visible","unmountOnExit"],"mappings":"AAAA;;;;;+BAmBaM;;;;;;;iEAjBU,QAAQ;gCACgB,4BAA4B;6BACxC,yBAAyB;8CACnC,4CAA4C;oCAGtB,wBAAwB;AAWhE,oCAAoC,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,OAAGJ,kDAAAA;IAEjB,OAAO;QACLI;QACAC,YAAY;YACVC,MAAM;YACNC,gBAAgBR,sCAAAA;QAClB;QAEAO,MAAMT,oBAAAA,CAAKW,MAAM,KACfZ,wCAAAA,EAAyB,OAAO;YAC9B,GAAGM,KAAK;YACRC;QACF,IACA;YAAEM,aAAa;QAAM;QAGvBF,oBAAgBT,+BAAAA,EAAmBI,MAAMK,cAAc,EAAE;YACvDE,aAAaV,sCAAAA;YACbW,cAAc;gBACZC,SAASP;gBACTQ,eAAe;YACjB;QACF;IACF;AACF,EAAE"}

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

@@ -25,6 +25,7 @@ const navSubItemGroupClassNames = {
  * Styles for the root slot
  */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     root: {
+        Bnnss6s: "fi64zpg",
         Bz10aip: "f1yj8dow",
         B68tc82: 0,
         Bmxbyg5: 0,
@@ -32,6 +33,7 @@ const navSubItemGroupClassNames = {
     }
 }, {
     d: [
+        ".fi64zpg{flex-shrink:0;}",
         ".f1yj8dow{transform:translateZ(0);}",
         [
             ".f1a3p1vp{overflow:hidden;}",

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

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

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

@@ -25,6 +25,7 @@ const navSubItemGroupClassNames = {
  * Styles for the root slot
  */ const useStyles = (0, _react.makeStyles)({
     root: {
+        flexShrink: 0,
         transform: 'translateZ(0)',
         overflow: 'hidden'
     }

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

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

package/lib-commonjs/components/sharedNavStyles.styles.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/sharedNavStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["sharedNavStyles.styles.js"],"sourcesContent":["~~import~~ { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles } from '@griffel/react';\n// Styles shared by several nav components.\nexport const navItemTokens = {\n defaultDrawerWidth: 260,\n indicatorOffset: 16,\n indicatorWidth: 4,\n indicatorHeight: 20,\n backgroundColor: tokens.colorNeutralBackground4,\n backgroundColorHover: tokens.colorNeutralBackground4Hover,\n backgroundColorPressed: tokens.colorNeutralBackground4Pressed,\n animationTokens: {\n animationDuration: tokens.durationFaster,\n animationFillMode: 'both',\n animationTimingFunction: tokens.curveLinear\n },\n transitionTokens: {\n transitionDuration: tokens.durationFaster,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'background'\n }\n};\n/*\n Styles for the root slot\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n / export const useRootDefaultClassName = makeResetStyles({\n display: 'flex',\n textTransform: 'none',\n position: 'relative',\n justifyContent: 'start',\n alignItems: 'flex-start',\n textAlign: 'left',\n gap: tokens.spacingVerticalL,\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,\n backgroundColor: navItemTokens.backgroundColor,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n textDecorationLine: 'none',\n border: 'none',\n // this element can change between a button and an anchor\n // so we need to reset box sizing to prevent horizontal overflow\n boxSizing: 'border-box',\n cursor: 'pointer',\n transitionDuration: navItemTokens.animationTokens.animationDuration,\n transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,\n transitionProperty: 'background',\n width: '100%',\n ...typographyStyles.body1,\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover\n },\n // Use custom insert focus indicator\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineOffset: `calc(${tokens.strokeWidthThick} -1)`\n }\n});\nexport const useSmallStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`\n }\n});\n/*\n Styles for the content slot (children)\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n / export const useContentStyles = makeStyles({\n selected: typographyStyles.body1Strong\n});\n/\n French fry styles\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n / export const useIndicatorStyles = makeStyles({\n base: {\n '::after': {\n position: 'absolute',\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n background: 'transparent'\n },\n '100%': {\n background: tokens.colorCompoundBrandForeground1\n }\n },\n marginInlineStart: `-${navItemTokens.indicatorOffset}px`,\n backgroundColor: tokens.colorCompoundBrandForeground1,\n height: `${navItemTokens.indicatorHeight}px`,\n width: `${navItemTokens.indicatorWidth}px`,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"'\n },\n '@media (forced-colors: active)': {\n '::after': {\n outline: `solid 2px ${tokens.colorTransparentStroke}`,\n outlineOffset: '-2px'\n }\n }\n }\n});\n/\n Styles for the icon slot\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n * We use the grid trick to stack the filled and regular icons on top of each other\n */ export const useIconStyles = makeStyles({\n base: {\n display: 'grid',\n gridTemplateAreas: 'overlay-area',\n minHeight: '20px',\n minWidth: '20px',\n alignItems: 'top',\n justifyContent: 'center',\n overflow: 'hidden',\n [`& .${iconFilledClassName}`]: {\n gridArea: 'overlay-area',\n color: 'transparent',\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n gridArea: 'overlay-area',\n display: 'inline'\n }\n },\n selected: {\n [`& .${iconFilledClassName}`]: {\n ...navItemTokens.animationTokens,\n display: 'inline',\n animationName: {\n '0%': {\n opacity: 0,\n color: 'transparent'\n },\n '100%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2BrandSelected\n }\n }\n },\n [`& .${iconRegularClassName}`]: {\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2\n },\n '100%': {\n opacity: 0,\n color: 'transparent'\n }\n }\n }\n }\n});\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","typographyStyles","__resetStyles","__styles","navItemTokens","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","useRootDefaultClassName","useSmallStyles","root","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useContentStyles","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useIndicatorStyles","base","E3zdtr","xr36ep","B67388b","Bitv4sc","Br128sd","rjyhj6","Bjyk6c5","Dlnsje","a2br6o","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","vikyaa","Brlscjf","vvp1qr","t65l24","rc3c53","k","m","useIconStyles","mc9l5x","zoa1oz","sshi5w","Bf4jedk","Bt984gj","Brf1p80","B68tc82","Bmxbyg5","Bpg54ce","B9gejnh","yr4pdu","Bvkmzld","mqdk8l","Gbjhqp","obb2bi","D0sxk3","Esdz9e","Bqil8sh","Bbom3er","djjtid","mz70lj","t6yez3","C9vb3z","ux3ctl","Ba906uv","hndn0g","cw2nnk","Bkztwl0","H8nmoi","ipgedg"],"mappings":"~~;;;;;;;;;;;iBAI0B;eAAbM;;IA8DI~~+B,gBAAgB;;;iBAsCH;eAAb8B;;sBAhCkB;eAAlBxB;;IA9CAhB,uBAAuB;;;~~kBAgCb;eAAdC;;;4BAzD4B~~,uBAAuB;uBACpB,gBAAgB;AAErD,sBAAsB;IACzBrB,kBAAkB,EAAE,GAAG;IACvBC,eAAe,EAAE,EAAE;IACnBC,cAAc,EAAE,CAAC;IACjBC,eAAe,EAAE,EAAE;IACnBC,eAAe,EAAET,kBAAM,CAACU,uBAAuB;IAC/CC,oBAAoB,EAAEX,kBAAM,CAACY,4BAA4B;IACzDC,sBAAsB,EAAEb,kBAAM,CAACc,8BAA8B;IAC7DC,eAAe,EAAE;QACbC,iBAAiB,EAAEhB,kBAAM,CAACiB,cAAc;QACxCC,iBAAiB,EAAE,MAAM;QACzBC,uBAAuB,EAAEnB,kBAAM,CAACoB,WAAAA;IACpC,CAAC;IACDC,gBAAgB,EAAE;QACdC,kBAAkB,EAAEtB,kBAAM,CAACiB,cAAc;QACzCM,wBAAwB,EAAEvB,kBAAM,CAACoB,WAAW;QAC5CI,kBAAkB,EAAE;IACxB;AACJ,CAAC;AAIU,gCAA6B,WAAA,OAAGtB,oBAAA,EAAA,WAAA,UAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CA+B1C,CAAC;AACK,uBAAoB,WAAA,GAAGC,mBAAA,EAAA;IAAAwB,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAI7B,CAAC;AAIS,yBAAsB,WAAA,~~GAAG~~/B,~~mBAAA~~,EAAA;IAAAiC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAP,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAEnC,CAAC;AAIS,2BAAwB,WAAA,GAAG9B,mBAAA,EAAA;IAAAuC,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAA7B,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;IAAA6B,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAA9B,CAAA,EAAA,CAAA;gBAAA8B,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA2BrC,CAAC;AAKS,sBAAmB,WAAA,GAAG7D,mBAAA,EAAA;IAAAuC,IAAA,EAAA;QAAAwB,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAnD,QAAA,EAAA;QAAAoD,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAT,MAAA,EAAA;QAAAU,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAA9D,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAA6B,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAgDhC,CAAC"}
1	+ {"version":3,"sources":["sharedNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles } from '@griffel/react';\n// Styles shared by several nav components.\nexport const navItemTokens = {\n defaultDrawerWidth: 260,\n indicatorOffset: 16,\n indicatorWidth: 4,\n indicatorHeight: 20,\n backgroundColor: tokens.colorNeutralBackground4,\n backgroundColorHover: tokens.colorNeutralBackground4Hover,\n backgroundColorPressed: tokens.colorNeutralBackground4Pressed,\n animationTokens: {\n animationDuration: tokens.durationFaster,\n animationFillMode: 'both',\n animationTimingFunction: tokens.curveLinear\n },\n transitionTokens: {\n transitionDuration: tokens.durationFaster,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'background'\n }\n};\n/*\n Styles for the root slot\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n / export const useRootDefaultClassName = makeResetStyles({\n display: 'flex',\n textTransform: 'none',\n position: 'relative',\n justifyContent: 'start',\n alignItems: 'flex-start',\n textAlign: 'left',\n gap: tokens.spacingVerticalL,\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,\n backgroundColor: navItemTokens.backgroundColor,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n textDecorationLine: 'none',\n border: 'none',\n // this element can change between a button and an anchor\n // so we need to reset box sizing to prevent horizontal overflow\n boxSizing: 'border-box',\n cursor: 'pointer',\n transitionDuration: navItemTokens.animationTokens.animationDuration,\n transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,\n transitionProperty: 'background',\n width: '100%',\n ...typographyStyles.body1,\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover\n },\n // Use custom insert focus indicator\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineOffset: `calc(${tokens.strokeWidthThick} -1)`\n }\n});\nexport const useSmallStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`\n }\n});\n/*\n Styles for the content slot (children)\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n / export const useContentStyles = makeStyles({\n selected: typographyStyles.body1Strong\n});\n/\n French fry styles\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n / export const useIndicatorStyles = makeStyles({\n base: {\n '::after': {\n position: 'absolute',\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n background: 'transparent'\n },\n '100%': {\n background: tokens.colorCompoundBrandForeground1\n }\n },\n marginInlineStart: `-${navItemTokens.indicatorOffset}px`,\n backgroundColor: tokens.colorCompoundBrandForeground1,\n height: `${navItemTokens.indicatorHeight}px`,\n width: `${navItemTokens.indicatorWidth}px`,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"'\n },\n '@media (forced-colors: active)': {\n '::after': {\n outline: `solid 2px ${tokens.colorTransparentStroke}`,\n outlineOffset: '-2px'\n }\n }\n }\n});\n/\n Styles for the icon slot\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n * We use the grid trick to stack the filled and regular icons on top of each other\n */ export const useIconStyles = makeStyles({\n base: {\n display: 'grid',\n gridTemplateAreas: 'overlay-area',\n minHeight: '20px',\n minWidth: '20px',\n alignItems: 'top',\n justifyContent: 'center',\n overflow: 'hidden',\n [`& .${iconFilledClassName}`]: {\n gridArea: 'overlay-area',\n color: 'transparent',\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n gridArea: 'overlay-area',\n display: 'inline'\n }\n },\n selected: {\n [`& .${iconFilledClassName}`]: {\n ...navItemTokens.animationTokens,\n display: 'inline',\n animationName: {\n '0%': {\n opacity: 0,\n color: 'transparent'\n },\n '100%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2BrandSelected\n }\n }\n },\n [`& .${iconRegularClassName}`]: {\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2\n },\n '100%': {\n opacity: 0,\n color: 'transparent'\n }\n }\n }\n }\n});\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","typographyStyles","__resetStyles","__styles","navItemTokens","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","useRootDefaultClassName","useSmallStyles","root","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useContentStyles","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useIndicatorStyles","base","E3zdtr","xr36ep","B67388b","Bitv4sc","Br128sd","rjyhj6","Bjyk6c5","Dlnsje","a2br6o","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bsft5z2","vikyaa","Brlscjf","vvp1qr","t65l24","rc3c53","k","m","useIconStyles","mc9l5x","zoa1oz","sshi5w","Bf4jedk","Bt984gj","Brf1p80","B68tc82","Bmxbyg5","Bpg54ce","B9gejnh","yr4pdu","Bvkmzld","mqdk8l","Gbjhqp","obb2bi","D0sxk3","Esdz9e","Bqil8sh","Bbom3er","djjtid","mz70lj","t6yez3","C9vb3z","ux3ctl","Ba906uv","hndn0g","cw2nnk","Bkztwl0","H8nmoi","ipgedg"],"mappings":"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"}

package/lib-commonjs/components/sharedNavStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/sharedNavStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/sharedNavStyles.styles.ts"],"sourcesContent":["~~import~~ { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles } from '@griffel/react';\n\n// Styles shared by several nav components.\n\nexport const navItemTokens = {\n defaultDrawerWidth: 260,\n indicatorOffset: 16,\n indicatorWidth: 4,\n indicatorHeight: 20,\n backgroundColor: tokens.colorNeutralBackground4,\n backgroundColorHover: tokens.colorNeutralBackground4Hover,\n backgroundColorPressed: tokens.colorNeutralBackground4Pressed,\n animationTokens: {\n animationDuration: tokens.durationFaster,\n animationFillMode: 'both',\n animationTimingFunction: tokens.curveLinear,\n },\n transitionTokens: {\n transitionDuration: tokens.durationFaster,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'background',\n },\n};\n\n/*\n Styles for the root slot\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n /\nexport const useRootDefaultClassName = makeResetStyles({\n display: 'flex',\n textTransform: 'none',\n position: 'relative',\n justifyContent: 'start',\n alignItems: 'flex-start',\n textAlign: 'left',\n gap: tokens.spacingVerticalL,\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,\n backgroundColor: navItemTokens.backgroundColor,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n textDecorationLine: 'none',\n border: 'none',\n // this element can change between a button and an anchor\n // so we need to reset box sizing to prevent horizontal overflow\n boxSizing: 'border-box',\n cursor: 'pointer',\n\n transitionDuration: navItemTokens.animationTokens.animationDuration,\n transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,\n transitionProperty: 'background',\n\n width: '100%',\n ...typographyStyles.body1,\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover,\n },\n\n // Use custom insert focus indicator\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineOffset: `calc(${tokens.strokeWidthThick} -1)`,\n },\n});\n\nexport const useSmallStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`,\n },\n});\n\n/*\n Styles for the content slot (children)\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n /\nexport const useContentStyles = makeStyles({\n selected: typographyStyles.body1Strong,\n});\n\n/\n French fry styles\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n /\nexport const useIndicatorStyles = makeStyles({\n base: {\n '::after': {\n position: 'absolute',\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': { background: 'transparent' },\n '100%': { background: tokens.colorCompoundBrandForeground1 },\n },\n\n marginInlineStart: `-${navItemTokens.indicatorOffset}px`,\n backgroundColor: tokens.colorCompoundBrandForeground1,\n height: `${navItemTokens.indicatorHeight}px`,\n width: `${navItemTokens.indicatorWidth}px`,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"',\n },\n '@media (forced-colors: active)': {\n '::after': {\n outline: `solid 2px ${tokens.colorTransparentStroke}`,\n outlineOffset: '-2px',\n },\n },\n },\n});\n\n/\n Styles for the icon slot\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n * We use the grid trick to stack the filled and regular icons on top of each other\n */\nexport const useIconStyles = makeStyles({\n base: {\n display: 'grid',\n gridTemplateAreas: 'overlay-area',\n minHeight: '20px',\n minWidth: '20px',\n alignItems: 'top',\n justifyContent: 'center',\n overflow: 'hidden',\n [`& .${iconFilledClassName}`]: {\n gridArea: 'overlay-area',\n color: 'transparent',\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n gridArea: 'overlay-area',\n display: 'inline',\n },\n },\n selected: {\n [`& .${iconFilledClassName}`]: {\n ...navItemTokens.animationTokens,\n display: 'inline',\n animationName: {\n '0%': {\n opacity: 0,\n color: 'transparent',\n },\n '100%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n },\n },\n [`& .${iconRegularClassName}`]: {\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2,\n },\n '100%': {\n opacity: 0,\n color: 'transparent',\n },\n },\n },\n },\n});\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","typographyStyles","makeResetStyles","makeStyles","navItemTokens","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","useRootDefaultClassName","display","textTransform","position","justifyContent","alignItems","textAlign","gap","spacingVerticalL","padding","spacingVerticalMNudge","spacingHorizontalS","spacingHorizontalMNudge","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","textDecorationLine","border","boxSizing","cursor","width","body1","outline","strokeWidthThick","colorStrokeFocus2","outlineOffset","useSmallStyles","root","spacingVerticalXS","useContentStyles","selected","body1Strong","useIndicatorStyles","base","animationName","background","colorCompoundBrandForeground1","marginInlineStart","height","borderRadiusCircular","content","colorTransparentStroke","useIconStyles","gridTemplateAreas","minHeight","minWidth","overflow","gridArea","opacity","colorNeutralForeground2BrandSelected"],"mappings":"~~;;;;;;;;;;;iBAMaM;eAAAA;;~~oBAsEAmD~~;eAAAA;;~~IAuCAa,aAAAA;;;sBA/BAV;;;~~IAtDAjC,uBAAAA~~;;;kBAoCA2B;;;;4BAlE6C,wBAAwB;4BACzC,wBAAwB;uBACrB,iBAAiB;AAItD,sBAAsB;IAC3B/C,oBAAoB;IACpBC,iBAAiB;IACjBC,gBAAgB;IAChBC,iBAAiB;IACjBC,iBAAiBT,kBAAAA,CAAOU,uBAAuB;IAC/CC,sBAAsBX,kBAAAA,CAAOY,4BAA4B;IACzDC,wBAAwBb,kBAAAA,CAAOc,8BAA8B;IAC7DC,iBAAiB;QACfC,mBAAmBhB,kBAAAA,CAAOiB,cAAc;QACxCC,mBAAmB;QACnBC,yBAAyBnB,kBAAAA,CAAOoB,WAAW;IAC7C;IACAC,kBAAkB;QAChBC,oBAAoBtB,kBAAAA,CAAOiB,cAAc;QACzCM,0BAA0BvB,kBAAAA,CAAOoB,WAAW;QAC5CI,oBAAoB;IACtB;AACF,EAAE;AAMK,~~oCAAgCtB~~,sBAAAA,EAAgB;IACrDwB,SAAS;IACTC,eAAe;IACfC,UAAU;IACVC,gBAAgB;IAChBC,YAAY;IACZC,WAAW;IACXC,KAAKhC,kBAAAA,CAAOiC,gBAAgB;IAC5BC,SAAS,GAAGlC,kBAAAA,CAAOmC,qBAAqB,CAAC,CAAC,EAAEnC,kBAAAA,CAAOoC,kBAAkB,CAAC,CAAC,EAAEpC,kBAAAA,CAAOmC,qBAAqB,CAAC,CAAC,EAAEnC,kBAAAA,CAAOqC,uBAAuB,EAAE;IACzI5B,iBAAiBL,cAAcK,eAAe;IAC9C6B,cAActC,kBAAAA,CAAOuC,kBAAkB;IACvCC,OAAOxC,kBAAAA,CAAOyC,uBAAuB;IACrCC,oBAAoB;IACpBC,QAAQ;IACR,yDAAyD;IACzD,gEAAgE;IAChEC,WAAW;IACXC,QAAQ;IAERvB,oBAAoBlB,cAAcW,eAAe,CAACC,iBAAiB;IACnEO,0BAA0BnB,cAAcW,eAAe,CAACI,uBAAuB;IAC/EK,oBAAoB;IAEpBsB,OAAO;IACP,GAAG7C,4BAAAA,CAAiB8C,KAAK;IACzB,UAAU;QACRtC,iBAAiBL,cAAcO,oBAAoB;IACrD;IAEA,oCAAoC;IACpC,mBAAmB;QACjBqC,SAAS,GAAGhD,kBAAAA,CAAOiD,gBAAgB,CAAC,OAAO,EAAEjD,kBAAAA,CAAOkD,iBAAiB,EAAE;QACvEC,eAAe,CAAC,KAAK,EAAEnD,kBAAAA,CAAOiD,gBAAgB,CAAC,MAAM,CAAC;IACxD;AACF,GAAG;AAEI,MAAMG,qBAAiBjD,iBAAAA,EAAW;IACvCkD,MAAM;QACJnB,SAAS,GAAGlC,kBAAAA,CAAOsD,iBAAiB,CAAC,CAAC,EAAEtD,kBAAAA,CAAOoC,kBAAkB,CAAC,CAAC,EAAEpC,kBAAAA,CAAOsD,iBAAiB,CAAC,CAAC,EAAEtD,kBAAAA,CAAOqC,uBAAuB,EAAE;IACnI;AACF,GAAG;AAMI,~~6BAAyBlC~~,iBAAAA,EAAW;IACzCqD,UAAUvD,4BAAAA,CAAiBwD,WAAW;AACxC,GAAG;AAMI,MAAMC,yBAAqBvD,iBAAAA,EAAW;IAC3CwD,MAAM;QACJ,WAAW;YACT/B,UAAU;YACV,GAAGxB,cAAcW,eAAe;YAChC6C,eAAe;gBACb,MAAM;oBAAEC,YAAY;gBAAc;gBAClC,QAAQ;oBAAEA,YAAY7D,kBAAAA,CAAO8D,6BAA6B;gBAAC;YAC7D;YAEAC,mBAAmB,CAAC,CAAC,EAAE3D,cAAcE,eAAe,CAAC,EAAE,CAAC;YACxDG,iBAAiBT,kBAAAA,CAAO8D,6BAA6B;YACrDE,QAAQ,GAAG5D,cAAcI,eAAe,CAAC,EAAE,CAAC;YAC5CsC,OAAO,GAAG1C,cAAcG,cAAc,CAAC,EAAE,CAAC;YAC1C+B,cAActC,kBAAAA,CAAOiE,oBAAoB;YACzCC,SAAS;QACX;QACA,kCAAkC;YAChC,WAAW;gBACTlB,SAAS,CAAC,UAAU,EAAEhD,kBAAAA,CAAOmE,sBAAsB,EAAE;gBACrDhB,eAAe;YACjB;QACF;IACF;AACF,GAAG;AAOI,~~sBAAsBhD~~,~~qBAAAA~~,EAAW;IACtCwD,MAAM;QACJjC,SAAS;QACT2C,mBAAmB;QACnBC,WAAW;QACXC,UAAU;QACVzC,YAAY;QACZD,gBAAgB;QAChB2C,UAAU;QACV,CAAC,CAAC,GAAG,EAAE1E,+BAAAA,EAAqB,CAAC,EAAE;YAC7B2E,UAAU;YACVjC,OAAO;YACPd,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAE3B,gCAAAA,EAAsB,CAAC,EAAE;YAC9B0E,UAAU;YACV/C,SAAS;QACX;IACF;IACA8B,UAAU;QACR,CAAC,CAAC,GAAG,EAAE1D,+BAAAA,EAAqB,CAAC,EAAE;YAC7B,GAAGM,cAAcW,eAAe;YAChCW,SAAS;YACTkC,eAAe;gBACb,MAAM;oBACJc,SAAS;oBACTlC,OAAO;gBACT;gBACA,QAAQ;oBACNkC,SAAS;oBACTlC,OAAOxC,kBAAAA,CAAO2E,oCAAoC;gBACpD;YACF;QACF;QACA,CAAC,CAAC,GAAG,EAAE5E,gCAAAA,EAAsB,CAAC,EAAE;YAC9B,GAAGK,cAAcW,eAAe;YAChC6C,eAAe;gBACb,MAAM;oBACJc,SAAS;oBACTlC,OAAOxC,kBAAAA,CAAOyC,uBAAuB;gBACvC;gBACA,QAAQ;oBACNiC,SAAS;oBACTlC,OAAO;gBACT;YACF;QACF;IACF;AACF,GAAG"}
1	+ {"version":3,"sources":["../src/components/sharedNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles } from '@griffel/react';\n\n// Styles shared by several nav components.\n\nexport const navItemTokens = {\n defaultDrawerWidth: 260,\n indicatorOffset: 16,\n indicatorWidth: 4,\n indicatorHeight: 20,\n backgroundColor: tokens.colorNeutralBackground4,\n backgroundColorHover: tokens.colorNeutralBackground4Hover,\n backgroundColorPressed: tokens.colorNeutralBackground4Pressed,\n animationTokens: {\n animationDuration: tokens.durationFaster,\n animationFillMode: 'both',\n animationTimingFunction: tokens.curveLinear,\n },\n transitionTokens: {\n transitionDuration: tokens.durationFaster,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'background',\n },\n};\n\n/*\n Styles for the root slot\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n /\nexport const useRootDefaultClassName = makeResetStyles({\n display: 'flex',\n textTransform: 'none',\n position: 'relative',\n justifyContent: 'start',\n alignItems: 'flex-start',\n textAlign: 'left',\n gap: tokens.spacingVerticalL,\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,\n backgroundColor: navItemTokens.backgroundColor,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n textDecorationLine: 'none',\n border: 'none',\n // this element can change between a button and an anchor\n // so we need to reset box sizing to prevent horizontal overflow\n boxSizing: 'border-box',\n cursor: 'pointer',\n\n transitionDuration: navItemTokens.animationTokens.animationDuration,\n transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,\n transitionProperty: 'background',\n\n width: '100%',\n ...typographyStyles.body1,\n ':hover': {\n backgroundColor: navItemTokens.backgroundColorHover,\n },\n\n // Use custom insert focus indicator\n '&:focus-visible': {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineOffset: `calc(${tokens.strokeWidthThick} -1)`,\n },\n});\n\nexport const useSmallStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`,\n },\n});\n\n/*\n Styles for the content slot (children)\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n /\nexport const useContentStyles = makeStyles({\n selected: typographyStyles.body1Strong,\n});\n\n/\n French fry styles\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n /\nexport const useIndicatorStyles = makeStyles({\n base: {\n '::after': {\n position: 'absolute',\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': { background: 'transparent' },\n '100%': { background: tokens.colorCompoundBrandForeground1 },\n },\n\n marginInlineStart: `-${navItemTokens.indicatorOffset}px`,\n backgroundColor: tokens.colorCompoundBrandForeground1,\n height: `${navItemTokens.indicatorHeight}px`,\n width: `${navItemTokens.indicatorWidth}px`,\n borderRadius: tokens.borderRadiusCircular,\n content: '\"\"',\n },\n '@media (forced-colors: active)': {\n '::after': {\n outline: `solid 2px ${tokens.colorTransparentStroke}`,\n outlineOffset: '-2px',\n },\n },\n },\n});\n\n/\n Styles for the icon slot\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n * We use the grid trick to stack the filled and regular icons on top of each other\n */\nexport const useIconStyles = makeStyles({\n base: {\n display: 'grid',\n gridTemplateAreas: 'overlay-area',\n minHeight: '20px',\n minWidth: '20px',\n alignItems: 'top',\n justifyContent: 'center',\n overflow: 'hidden',\n [`& .${iconFilledClassName}`]: {\n gridArea: 'overlay-area',\n color: 'transparent',\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n gridArea: 'overlay-area',\n display: 'inline',\n },\n },\n selected: {\n [`& .${iconFilledClassName}`]: {\n ...navItemTokens.animationTokens,\n display: 'inline',\n animationName: {\n '0%': {\n opacity: 0,\n color: 'transparent',\n },\n '100%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n },\n },\n [`& .${iconRegularClassName}`]: {\n ...navItemTokens.animationTokens,\n animationName: {\n '0%': {\n opacity: 1,\n color: tokens.colorNeutralForeground2,\n },\n '100%': {\n opacity: 0,\n color: 'transparent',\n },\n },\n },\n },\n});\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","typographyStyles","makeResetStyles","makeStyles","navItemTokens","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","useRootDefaultClassName","display","textTransform","position","justifyContent","alignItems","textAlign","gap","spacingVerticalL","padding","spacingVerticalMNudge","spacingHorizontalS","spacingHorizontalMNudge","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","textDecorationLine","border","boxSizing","cursor","width","body1","outline","strokeWidthThick","colorStrokeFocus2","outlineOffset","useSmallStyles","root","spacingVerticalXS","useContentStyles","selected","body1Strong","useIndicatorStyles","base","animationName","background","colorCompoundBrandForeground1","marginInlineStart","height","borderRadiusCircular","content","colorTransparentStroke","useIconStyles","gridTemplateAreas","minHeight","minWidth","overflow","gridArea","opacity","colorNeutralForeground2BrandSelected"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-nav",
-  "version": "9.3.17",
+  "version": "9.3.19",
   "description": "New fluentui react package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,20 +12,20 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-aria": "^9.17.8",
-    "@fluentui/react-button": "^9.8.0",
-    "@fluentui/react-context-selector": "^9.2.14",
-    "@fluentui/react-divider": "^9.6.0",
-    "@fluentui/react-drawer": "^9.11.2",
+    "@fluentui/react-aria": "^9.17.10",
+    "@fluentui/react-button": "^9.8.2",
+    "@fluentui/react-context-selector": "^9.2.15",
+    "@fluentui/react-divider": "^9.6.2",
+    "@fluentui/react-drawer": "^9.11.4",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.3.5",
-    "@fluentui/react-motion": "^9.11.6",
-    "@fluentui/react-motion-components-preview": "^0.15.0",
-    "@fluentui/react-shared-contexts": "^9.26.1",
-    "@fluentui/react-tabster": "^9.26.12",
+    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-motion": "^9.12.0",
+    "@fluentui/react-motion-components-preview": "^0.15.1",
+    "@fluentui/react-shared-contexts": "^9.26.2",
+    "@fluentui/react-tabster": "^9.26.13",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-tooltip": "^9.9.0",
-    "@fluentui/react-utilities": "^9.26.1",
+    "@fluentui/react-tooltip": "^9.9.2",
+    "@fluentui/react-utilities": "^9.26.2",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },