@fluentui/react-nav 9.3.16 → 9.3.18

package/CHANGELOG.md

@@ -1,12 +1,49 @@
 # Change Log - @fluentui/react-nav
 
-This log was last generated on Wed, 17 Dec 2025 18:06:04 GMT and should not be manually modified.
+This log was last generated on Thu, 12 Feb 2026 10:42:48 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.3.18)
+
+Thu, 12 Feb 2026 10:42:48 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:06:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.3.16..@fluentui/react-nav_v9.3.17)
+
+### Patches
+
+- fix(react-nav): update Rotate param from "fromAngle" to "outAngle" ([PR #35592](https://github.com/microsoft/fluentui/pull/35592) by robertpenner@microsoft.com)
+- Bump @fluentui/react-aria to v9.17.8 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-button to v9.8.0 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.14 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-divider to v9.6.0 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-drawer to v9.11.2 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-motion to v9.11.6 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.0 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-tabster to v9.26.12 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-tooltip to v9.9.0 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+
 ## [9.3.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.3.16)
 
-Wed, 17 Dec 2025 18:06:04 GMT 
+Wed, 17 Dec 2025 18:10:11 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.3.15..@fluentui/react-nav_v9.3.16)
 
 ### Patches

package/dist/index.d.ts

@@ -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/NavCategoryItem/useNavCategoryItem.js

@@ -10,8 +10,8 @@ const ExpandIconMotion = createPresenceComponentVariant(Rotate, {
     duration: motionTokens.durationFast,
     easing: motionTokens.curveEasyEase,
     animateOpacity: false,
-    fromAngle: 0,
-    toAngle: 180
+    outAngle: 0,
+    inAngle: 180
 });
 /**
  * Create the state required to render NavCategoryItem.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDown20Regular } from '@fluentui/react-icons';\nimport { createPresenceComponentVariant, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\nimport { Rotate } from '@fluentui/react-motion-components-preview';\n\nconst ExpandIconMotion = createPresenceComponentVariant(Rotate, {\n  duration: motionTokens.durationFast,\n  easing: motionTokens.curveEasyEase,\n  animateOpacity: false, // Don't fade out the icon\n  fromAngle: 0,\n  toAngle: 180,\n});\n\n/**\n * Create the state required to render NavCategoryItem.\n *\n * The returned state can be modified with hooks such as useNavCategoryItemStyles,\n * before being passed to renderNavCategoryItem.\n *\n * @param props - props from this instance of NavCategoryItem\n * @param ref - reference to root HTMLButtonElement of NavCategoryItem\n */\nexport const useNavCategoryItem_unstable = (\n  props: NavCategoryItemProps,\n  ref: React.Ref<HTMLButtonElement>,\n): NavCategoryItemState => {\n  const { onClick, expandIcon, icon } = props;\n\n  const { open, value } = useNavCategoryContext_unstable();\n\n  const { onRequestNavCategoryItemToggle, selectedCategoryValue, density = 'medium' } = useNavContext_unstable();\n\n  const onNavCategoryItemClick = useEventCallback(\n    mergeCallbacks(onClick, event =>\n      onRequestNavCategoryItemToggle(event, { type: 'click', event, value: '', categoryValue: value }),\n    ),\n  );\n\n  // don't fill the icon when it's open\n  const selected = selectedCategoryValue === value && !open;\n  // there's more than 2 possible values for aria-current, but this is the only one that's used in this component\n  const validAriaCurrent: 'page' | 'false' = selected && !open ? 'page' : 'false';\n\n  return {\n    open,\n    value,\n    selected,\n    components: {\n      root: 'button',\n      icon: 'span',\n      expandIcon: 'span',\n      expandIconMotion: ExpandIconMotion,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        'aria-current': validAriaCurrent,\n        'aria-expanded': open,\n        ...props,\n        onClick: onNavCategoryItemClick,\n      }),\n      { elementType: 'button' },\n    ),\n    expandIcon: slot.always(expandIcon, {\n      defaultProps: {\n        children: <ChevronDown20Regular />,\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    expandIconMotion: presenceMotionSlot(props.expandIconMotion, {\n      elementType: ExpandIconMotion,\n      defaultProps: {\n        visible: open,\n      },\n    }),\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","ChevronDown20Regular","createPresenceComponentVariant","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","Rotate","ExpandIconMotion","duration","durationFast","easing","curveEasyEase","animateOpacity","fromAngle","toAngle","useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","onRequestNavCategoryItemToggle","selectedCategoryValue","density","onNavCategoryItemClick","event","type","categoryValue","selected","validAriaCurrent","components","root","expandIconMotion","always","elementType","defaultProps","children","visible","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC7G,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,8BAA8B,EAAEC,YAAY,EAAEC,kBAAkB,QAAQ,yBAAyB;AAG1G,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,sBAAsB,QAAQ,gBAAgB;AACvD,SAASC,MAAM,QAAQ,4CAA4C;AAEnE,MAAMC,mBAAmBN,+BAA+BK,QAAQ;IAC9DE,UAAUN,aAAaO,YAAY;IACnCC,QAAQR,aAAaS,aAAa;IAClCC,gBAAgB;IAChBC,WAAW;IACXC,SAAS;AACX;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGlB;IAExB,MAAM,EAAEmB,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,GAAGpB;IAEtF,MAAMqB,yBAAyB3B,iBAC7BF,eAAeqB,SAASS,CAAAA,QACtBJ,+BAA+BI,OAAO;YAAEC,MAAM;YAASD;YAAOL,OAAO;YAAIO,eAAeP;QAAM;IAIlG,qCAAqC;IACrC,MAAMQ,WAAWN,0BAA0BF,SAAS,CAACD;IACrD,+GAA+G;IAC/G,MAAMU,mBAAqCD,YAAY,CAACT,OAAO,SAAS;IAExE,OAAO;QACLA;QACAC;QACAQ;QACAE,YAAY;YACVC,MAAM;YACNb,MAAM;YACND,YAAY;YACZe,kBAAkB3B;QACpB;QACA0B,MAAMnC,KAAKqC,MAAM,CACfvC,yBAAyB,UAAU;YACjCqB;YACA,gBAAgBc;YAChB,iBAAiBV;YACjB,GAAGL,KAAK;YACRE,SAASQ;QACX,IACA;YAAEU,aAAa;QAAS;QAE1BjB,YAAYrB,KAAKqC,MAAM,CAAChB,YAAY;YAClCkB,cAAc;gBACZC,wBAAU,oBAACtC;gBACX,eAAe;YACjB;YACAoC,aAAa;QACf;QACAF,kBAAkB/B,mBAAmBa,MAAMkB,gBAAgB,EAAE;YAC3DE,aAAa7B;YACb8B,cAAc;gBACZE,SAASlB;YACX;QACF;QACAD,MAAMtB,KAAK0C,QAAQ,CAACpB,MAAM;YACxBgB,aAAa;QACf;QACAX;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDown20Regular } from '@fluentui/react-icons';\nimport { createPresenceComponentVariant, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\nimport { Rotate } from '@fluentui/react-motion-components-preview';\n\nconst ExpandIconMotion = createPresenceComponentVariant(Rotate, {\n  duration: motionTokens.durationFast,\n  easing: motionTokens.curveEasyEase,\n  animateOpacity: false, // Don't fade out the icon\n  outAngle: 0,\n  inAngle: 180,\n});\n\n/**\n * Create the state required to render NavCategoryItem.\n *\n * The returned state can be modified with hooks such as useNavCategoryItemStyles,\n * before being passed to renderNavCategoryItem.\n *\n * @param props - props from this instance of NavCategoryItem\n * @param ref - reference to root HTMLButtonElement of NavCategoryItem\n */\nexport const useNavCategoryItem_unstable = (\n  props: NavCategoryItemProps,\n  ref: React.Ref<HTMLButtonElement>,\n): NavCategoryItemState => {\n  const { onClick, expandIcon, icon } = props;\n\n  const { open, value } = useNavCategoryContext_unstable();\n\n  const { onRequestNavCategoryItemToggle, selectedCategoryValue, density = 'medium' } = useNavContext_unstable();\n\n  const onNavCategoryItemClick = useEventCallback(\n    mergeCallbacks(onClick, event =>\n      onRequestNavCategoryItemToggle(event, { type: 'click', event, value: '', categoryValue: value }),\n    ),\n  );\n\n  // don't fill the icon when it's open\n  const selected = selectedCategoryValue === value && !open;\n  // there's more than 2 possible values for aria-current, but this is the only one that's used in this component\n  const validAriaCurrent: 'page' | 'false' = selected && !open ? 'page' : 'false';\n\n  return {\n    open,\n    value,\n    selected,\n    components: {\n      root: 'button',\n      icon: 'span',\n      expandIcon: 'span',\n      expandIconMotion: ExpandIconMotion,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        'aria-current': validAriaCurrent,\n        'aria-expanded': open,\n        ...props,\n        onClick: onNavCategoryItemClick,\n      }),\n      { elementType: 'button' },\n    ),\n    expandIcon: slot.always(expandIcon, {\n      defaultProps: {\n        children: <ChevronDown20Regular />,\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    expandIconMotion: presenceMotionSlot(props.expandIconMotion, {\n      elementType: ExpandIconMotion,\n      defaultProps: {\n        visible: open,\n      },\n    }),\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","ChevronDown20Regular","createPresenceComponentVariant","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","Rotate","ExpandIconMotion","duration","durationFast","easing","curveEasyEase","animateOpacity","outAngle","inAngle","useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","onRequestNavCategoryItemToggle","selectedCategoryValue","density","onNavCategoryItemClick","event","type","categoryValue","selected","validAriaCurrent","components","root","expandIconMotion","always","elementType","defaultProps","children","visible","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC7G,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,8BAA8B,EAAEC,YAAY,EAAEC,kBAAkB,QAAQ,yBAAyB;AAG1G,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,sBAAsB,QAAQ,gBAAgB;AACvD,SAASC,MAAM,QAAQ,4CAA4C;AAEnE,MAAMC,mBAAmBN,+BAA+BK,QAAQ;IAC9DE,UAAUN,aAAaO,YAAY;IACnCC,QAAQR,aAAaS,aAAa;IAClCC,gBAAgB;IAChBC,UAAU;IACVC,SAAS;AACX;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGlB;IAExB,MAAM,EAAEmB,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,GAAGpB;IAEtF,MAAMqB,yBAAyB3B,iBAC7BF,eAAeqB,SAASS,CAAAA,QACtBJ,+BAA+BI,OAAO;YAAEC,MAAM;YAASD;YAAOL,OAAO;YAAIO,eAAeP;QAAM;IAIlG,qCAAqC;IACrC,MAAMQ,WAAWN,0BAA0BF,SAAS,CAACD;IACrD,+GAA+G;IAC/G,MAAMU,mBAAqCD,YAAY,CAACT,OAAO,SAAS;IAExE,OAAO;QACLA;QACAC;QACAQ;QACAE,YAAY;YACVC,MAAM;YACNb,MAAM;YACND,YAAY;YACZe,kBAAkB3B;QACpB;QACA0B,MAAMnC,KAAKqC,MAAM,CACfvC,yBAAyB,UAAU;YACjCqB;YACA,gBAAgBc;YAChB,iBAAiBV;YACjB,GAAGL,KAAK;YACRE,SAASQ;QACX,IACA;YAAEU,aAAa;QAAS;QAE1BjB,YAAYrB,KAAKqC,MAAM,CAAChB,YAAY;YAClCkB,cAAc;gBACZC,wBAAU,oBAACtC;gBACX,eAAe;YACjB;YACAoC,aAAa;QACf;QACAF,kBAAkB/B,mBAAmBa,MAAMkB,gBAAgB,EAAE;YAC3DE,aAAa7B;YACb8B,cAAc;gBACZE,SAASlB;YACX;QACF;QACAD,MAAMtB,KAAK0C,QAAQ,CAACpB,MAAM;YACxBgB,aAAa;QACf;QACAX;IACF;AACF,EAAE"}

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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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":[]}
+{"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

@@ -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

@@ -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"}
+{"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-commonjs/components/NavCategoryItem/useNavCategoryItem.js

@@ -21,8 +21,8 @@ const ExpandIconMotion = (0, _reactmotion.createPresenceComponentVariant)(_react
     duration: _reactmotion.motionTokens.durationFast,
     easing: _reactmotion.motionTokens.curveEasyEase,
     animateOpacity: false,
-    fromAngle: 0,
-    toAngle: 180
+    outAngle: 0,
+    inAngle: 180
 });
 const useNavCategoryItem_unstable = (props, ref)=>{
     const { onClick, expandIcon, icon } = props;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDown20Regular } from '@fluentui/react-icons';\nimport { createPresenceComponentVariant, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\nimport { Rotate } from '@fluentui/react-motion-components-preview';\n\nconst ExpandIconMotion = createPresenceComponentVariant(Rotate, {\n  duration: motionTokens.durationFast,\n  easing: motionTokens.curveEasyEase,\n  animateOpacity: false, // Don't fade out the icon\n  fromAngle: 0,\n  toAngle: 180,\n});\n\n/**\n * Create the state required to render NavCategoryItem.\n *\n * The returned state can be modified with hooks such as useNavCategoryItemStyles,\n * before being passed to renderNavCategoryItem.\n *\n * @param props - props from this instance of NavCategoryItem\n * @param ref - reference to root HTMLButtonElement of NavCategoryItem\n */\nexport const useNavCategoryItem_unstable = (\n  props: NavCategoryItemProps,\n  ref: React.Ref<HTMLButtonElement>,\n): NavCategoryItemState => {\n  const { onClick, expandIcon, icon } = props;\n\n  const { open, value } = useNavCategoryContext_unstable();\n\n  const { onRequestNavCategoryItemToggle, selectedCategoryValue, density = 'medium' } = useNavContext_unstable();\n\n  const onNavCategoryItemClick = useEventCallback(\n    mergeCallbacks(onClick, event =>\n      onRequestNavCategoryItemToggle(event, { type: 'click', event, value: '', categoryValue: value }),\n    ),\n  );\n\n  // don't fill the icon when it's open\n  const selected = selectedCategoryValue === value && !open;\n  // there's more than 2 possible values for aria-current, but this is the only one that's used in this component\n  const validAriaCurrent: 'page' | 'false' = selected && !open ? 'page' : 'false';\n\n  return {\n    open,\n    value,\n    selected,\n    components: {\n      root: 'button',\n      icon: 'span',\n      expandIcon: 'span',\n      expandIconMotion: ExpandIconMotion,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        'aria-current': validAriaCurrent,\n        'aria-expanded': open,\n        ...props,\n        onClick: onNavCategoryItemClick,\n      }),\n      { elementType: 'button' },\n    ),\n    expandIcon: slot.always(expandIcon, {\n      defaultProps: {\n        children: <ChevronDown20Regular />,\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    expandIconMotion: presenceMotionSlot(props.expandIconMotion, {\n      elementType: ExpandIconMotion,\n      defaultProps: {\n        visible: open,\n      },\n    }),\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","ChevronDown20Regular","createPresenceComponentVariant","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","Rotate","ExpandIconMotion","duration","durationFast","easing","curveEasyEase","animateOpacity","fromAngle","toAngle","useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","onRequestNavCategoryItemToggle","selectedCategoryValue","density","onNavCategoryItemClick","event","type","categoryValue","selected","validAriaCurrent","components","root","expandIconMotion","always","elementType","defaultProps","children","visible","optional"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACkD,4BAA4B;4BACxE,wBAAwB;6BACoB,yBAAyB;oCAG3D,wBAAwB;4BAChC,gBAAgB;8CAChC,4CAA4C;AAEnE,MAAMY,uBAAmBN,2CAAAA,EAA+BK,oCAAAA,EAAQ;IAC9DE,UAAUN,yBAAAA,CAAaO,YAAY;IACnCC,QAAQR,yBAAAA,CAAaS,aAAa;IAClCC,gBAAgB;IAChBC,WAAW;IACXC,SAAS;AACX;AAWO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,OAAGlB,kDAAAA;IAExB,MAAM,EAAEmB,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,OAAGpB,kCAAAA;IAEtF,MAAMqB,6BAAyB3B,gCAAAA,MAC7BF,8BAAAA,EAAeqB,SAASS,CAAAA,QACtBJ,+BAA+BI,OAAO;YAAEC,MAAM;YAASD;YAAOL,OAAO;YAAIO,eAAeP;QAAM;IAIlG,qCAAqC;IACrC,MAAMQ,WAAWN,0BAA0BF,SAAS,CAACD;IACrD,+GAA+G;IAC/G,MAAMU,mBAAqCD,YAAY,CAACT,OAAO,SAAS;IAExE,OAAO;QACLA;QACAC;QACAQ;QACAE,YAAY;YACVC,MAAM;YACNb,MAAM;YACND,YAAY;YACZe,kBAAkB3B;QACpB;QACA0B,MAAMnC,oBAAAA,CAAKqC,MAAM,KACfvC,wCAAAA,EAAyB,UAAU;YACjCqB;YACA,gBAAgBc;YAChB,iBAAiBV;YACjB,GAAGL,KAAK;YACRE,SAASQ;QACX,IACA;YAAEU,aAAa;QAAS;QAE1BjB,YAAYrB,oBAAAA,CAAKqC,MAAM,CAAChB,YAAY;YAClCkB,cAAc;gBACZC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACtC,gCAAAA,EAAAA;gBACX,eAAe;YACjB;YACAoC,aAAa;QACf;QACAF,sBAAkB/B,+BAAAA,EAAmBa,MAAMkB,gBAAgB,EAAE;YAC3DE,aAAa7B;YACb8B,cAAc;gBACZE,SAASlB;YACX;QACF;QACAD,MAAMtB,oBAAAA,CAAK0C,QAAQ,CAACpB,MAAM;YACxBgB,aAAa;QACf;QACAX;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDown20Regular } from '@fluentui/react-icons';\nimport { createPresenceComponentVariant, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\nimport { Rotate } from '@fluentui/react-motion-components-preview';\n\nconst ExpandIconMotion = createPresenceComponentVariant(Rotate, {\n  duration: motionTokens.durationFast,\n  easing: motionTokens.curveEasyEase,\n  animateOpacity: false, // Don't fade out the icon\n  outAngle: 0,\n  inAngle: 180,\n});\n\n/**\n * Create the state required to render NavCategoryItem.\n *\n * The returned state can be modified with hooks such as useNavCategoryItemStyles,\n * before being passed to renderNavCategoryItem.\n *\n * @param props - props from this instance of NavCategoryItem\n * @param ref - reference to root HTMLButtonElement of NavCategoryItem\n */\nexport const useNavCategoryItem_unstable = (\n  props: NavCategoryItemProps,\n  ref: React.Ref<HTMLButtonElement>,\n): NavCategoryItemState => {\n  const { onClick, expandIcon, icon } = props;\n\n  const { open, value } = useNavCategoryContext_unstable();\n\n  const { onRequestNavCategoryItemToggle, selectedCategoryValue, density = 'medium' } = useNavContext_unstable();\n\n  const onNavCategoryItemClick = useEventCallback(\n    mergeCallbacks(onClick, event =>\n      onRequestNavCategoryItemToggle(event, { type: 'click', event, value: '', categoryValue: value }),\n    ),\n  );\n\n  // don't fill the icon when it's open\n  const selected = selectedCategoryValue === value && !open;\n  // there's more than 2 possible values for aria-current, but this is the only one that's used in this component\n  const validAriaCurrent: 'page' | 'false' = selected && !open ? 'page' : 'false';\n\n  return {\n    open,\n    value,\n    selected,\n    components: {\n      root: 'button',\n      icon: 'span',\n      expandIcon: 'span',\n      expandIconMotion: ExpandIconMotion,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        'aria-current': validAriaCurrent,\n        'aria-expanded': open,\n        ...props,\n        onClick: onNavCategoryItemClick,\n      }),\n      { elementType: 'button' },\n    ),\n    expandIcon: slot.always(expandIcon, {\n      defaultProps: {\n        children: <ChevronDown20Regular />,\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    expandIconMotion: presenceMotionSlot(props.expandIconMotion, {\n      elementType: ExpandIconMotion,\n      defaultProps: {\n        visible: open,\n      },\n    }),\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","ChevronDown20Regular","createPresenceComponentVariant","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","Rotate","ExpandIconMotion","duration","durationFast","easing","curveEasyEase","animateOpacity","outAngle","inAngle","useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","onRequestNavCategoryItemToggle","selectedCategoryValue","density","onNavCategoryItemClick","event","type","categoryValue","selected","validAriaCurrent","components","root","expandIconMotion","always","elementType","defaultProps","children","visible","optional"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACkD,4BAA4B;4BACxE,wBAAwB;6BACoB,yBAAyB;oCAG3D,wBAAwB;4BAChC,gBAAgB;8CAChC,4CAA4C;AAEnE,MAAMY,uBAAmBN,2CAAAA,EAA+BK,oCAAAA,EAAQ;IAC9DE,UAAUN,yBAAAA,CAAaO,YAAY;IACnCC,QAAQR,yBAAAA,CAAaS,aAAa;IAClCC,gBAAgB;IAChBC,UAAU;IACVC,SAAS;AACX;AAWO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,OAAGlB,kDAAAA;IAExB,MAAM,EAAEmB,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,OAAGpB,kCAAAA;IAEtF,MAAMqB,6BAAyB3B,gCAAAA,MAC7BF,8BAAAA,EAAeqB,SAASS,CAAAA,QACtBJ,+BAA+BI,OAAO;YAAEC,MAAM;YAASD;YAAOL,OAAO;YAAIO,eAAeP;QAAM;IAIlG,qCAAqC;IACrC,MAAMQ,WAAWN,0BAA0BF,SAAS,CAACD;IACrD,+GAA+G;IAC/G,MAAMU,mBAAqCD,YAAY,CAACT,OAAO,SAAS;IAExE,OAAO;QACLA;QACAC;QACAQ;QACAE,YAAY;YACVC,MAAM;YACNb,MAAM;YACND,YAAY;YACZe,kBAAkB3B;QACpB;QACA0B,MAAMnC,oBAAAA,CAAKqC,MAAM,KACfvC,wCAAAA,EAAyB,UAAU;YACjCqB;YACA,gBAAgBc;YAChB,iBAAiBV;YACjB,GAAGL,KAAK;YACRE,SAASQ;QACX,IACA;YAAEU,aAAa;QAAS;QAE1BjB,YAAYrB,oBAAAA,CAAKqC,MAAM,CAAChB,YAAY;YAClCkB,cAAc;gBACZC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACtC,gCAAAA,EAAAA;gBACX,eAAe;YACjB;YACAoC,aAAa;QACf;QACAF,sBAAkB/B,+BAAAA,EAAmBa,MAAMkB,gBAAgB,EAAE;YAC3DE,aAAa7B;YACb8B,cAAc;gBACZE,SAASlB;YACX;QACF;QACAD,MAAMtB,oBAAAA,CAAK0C,QAAQ,CAACpB,MAAM;YACxBgB,aAAa;QACf;QACAX;IACF;AACF,EAAE"}

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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-nav",
-  "version": "9.3.16",
+  "version": "9.3.18",
   "description": "New fluentui react package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -11,27 +11,21 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "*",
-    "@fluentui/scripts-api-extractor": "*"
-  },
   "dependencies": {
-    "@fluentui/react-aria": "^9.17.7",
-    "@fluentui/react-button": "^9.7.1",
-    "@fluentui/react-context-selector": "^9.2.13",
-    "@fluentui/react-divider": "^9.5.1",
-    "@fluentui/react-drawer": "^9.11.1",
+    "@fluentui/react-aria": "^9.17.9",
+    "@fluentui/react-button": "^9.8.1",
+    "@fluentui/react-context-selector": "^9.2.14",
+    "@fluentui/react-divider": "^9.6.1",
+    "@fluentui/react-drawer": "^9.11.3",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.3.4",
-    "@fluentui/react-motion": "^9.11.5",
-    "@fluentui/react-motion-components-preview": "^0.14.2",
-    "@fluentui/react-shared-contexts": "^9.26.0",
-    "@fluentui/react-tabster": "^9.26.11",
-    "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-tooltip": "^9.8.12",
-    "@fluentui/react-utilities": "^9.26.0",
+    "@fluentui/react-jsx-runtime": "^9.4.0",
+    "@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-theme": "^9.2.1",
+    "@fluentui/react-tooltip": "^9.9.1",
+    "@fluentui/react-utilities": "^9.26.1",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },