@fluentui/react-nav 9.1.2 → 9.2.0

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @fluentui/react-nav
 
-This log was last generated on Wed, 18 Jun 2025 17:29:27 GMT and should not be manually modified.
+This log was last generated on Thu, 26 Jun 2025 14:07:52 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.2.0)
+
+Thu, 26 Jun 2025 14:07:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.1.3..@fluentui/react-nav_v9.2.0)
+
+### Minor changes
+
+- feat: add motion to nav components ([PR #34632](https://github.com/microsoft/fluentui/pull/34632) by marcosvmmoura@gmail.com)
+- Bump @fluentui/react-aria to v9.15.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
+- Bump @fluentui/react-button to v9.5.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
+- Bump @fluentui/react-divider to v9.3.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
+- Bump @fluentui/react-drawer to v9.8.4 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
+- Bump @fluentui/react-motion to v9.9.0 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
+- Bump @fluentui/react-tabster to v9.25.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
+- Bump @fluentui/react-tooltip to v9.7.4 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
+- Bump @fluentui/react-utilities to v9.22.0 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
+
+### Patches
+
+- fix: only display actions on hover ([PR #34634](https://github.com/microsoft/fluentui/pull/34634) by marcosvmmoura@gmail.com)
+
+## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.1.3)
+
+Mon, 23 Jun 2025 15:49:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.1.2..@fluentui/react-nav_v9.1.3)
+
+### Patches
+
+- Bump @fluentui/react-tooltip to v9.7.3 ([PR #34677](https://github.com/microsoft/fluentui/pull/34677) by beachball)
+- Bump @fluentui/react-drawer to v9.8.3 ([PR #34677](https://github.com/microsoft/fluentui/pull/34677) by beachball)
+
 ## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.1.2)
 
-Wed, 18 Jun 2025 17:29:27 GMT 
+Wed, 18 Jun 2025 17:33:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.1.1..@fluentui/react-nav_v9.1.2)
 
 ### Patches

package/dist/index.d.ts

@@ -26,6 +26,7 @@ import { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { InlineDrawerSlots } from '@fluentui/react-drawer';
 import { MenuButtonProps } from '@fluentui/react-button';
+import { PresenceMotionSlotProps } from '@fluentui/react-motion';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
@@ -178,6 +179,10 @@ export declare type NavCategoryItemSlots = {
      * Expand icon slot rendered after the content to indicate an open and closed state.
      */
     expandIcon: NonNullable<Slot<'span'>>;
+    /**
+     * Expand icon motion slot.
+     */
+    expandIconMotion?: Slot<PresenceMotionSlotProps>;
 };
 
 /**
@@ -548,7 +553,21 @@ export declare const navSubItemClassNames: SlotClassNames<NavSubItemSlots>;
  */
 export declare const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps>;
 
-export declare const navSubItemGroupClassNames: SlotClassNames<NavSubItemGroupSlots>;
+export declare const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>>;
+
+/**
+ * Context value for NavSubItemGroup
+ */
+declare type NavSubItemGroupCollapseMotionParams = {
+    /**
+     * The number of items in the NavSubItemGroup
+     */
+    items?: number;
+    /**
+     * The density of the NavItem
+     */
+    density?: NavDensity;
+};
 
 /**
  * NavSubItemGroup Props
@@ -556,7 +575,14 @@ export declare const navSubItemGroupClassNames: SlotClassNames<NavSubItemGroupSl
 export declare type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;
 
 export declare type NavSubItemGroupSlots = {
+    /**
+     * The root element
+     */
     root: NonNullable<Slot<'div'>>;
+    /**
+     * Collapse motion slot
+     */
+    collapseMotion?: Slot<PresenceMotionSlotProps<NavSubItemGroupCollapseMotionParams>>;
 };
 
 /**
@@ -657,7 +683,7 @@ export declare const renderNavSubItem_unstable: (state: NavSubItemState) => JSX.
 /**
  * Render the final JSX of NavSubItemGroup
  */
-export declare const renderNavSubItemGroup_unstable: (state: NavSubItemGroupState) => JSX.Element | null;
+export declare const renderNavSubItemGroup_unstable: (state: NavSubItemGroupState) => JSX.Element;
 
 /**
  * Render the final JSX of SplitNavItem

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/NavCategoryItem.types.ts"],"sourcesContent":["import { NavDensity } from '../Nav/Nav.types';\nimport { NavCategoryItemContextValue } from '../NavCategoryItemContext';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type NavCategoryItemContextValues = {\n  navCategoryItem: NavCategoryItemContextValue;\n};\n\nexport type NavCategoryItemSlots = {\n  /**\n   * The root element\n   */\n  root: NonNullable<Slot<'button'>>;\n\n  /**\n   * Icon that renders before the content.\n   * Should be specific to each Category\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Expand icon slot rendered after the content to indicate an open and closed state.\n   */\n  expandIcon: NonNullable<Slot<'span'>>;\n};\n\n/**\n * navCategoryItem Props\n */\nexport type NavCategoryItemProps = ComponentProps<Partial<NavCategoryItemSlots>>;\n\n/**\n * State used in rendering NavCategoryItem\n */\nexport type NavCategoryItemState = ComponentState<NavCategoryItemSlots> &\n  NavCategoryItemContextValue & {\n    /**\n     * If this navCategoryItem is selected\n     */\n    selected: boolean;\n    /**\n     * The density of the NavItem\n     *\n     * @default 'medium'\n     */\n    density: NavDensity;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA+BA;;CAEC,GACD,WAYI"}
+{"version":3,"sources":["../src/components/NavCategoryItem/NavCategoryItem.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { NavDensity } from '../Nav/Nav.types';\nimport type { NavCategoryItemContextValue } from '../NavCategoryItemContext';\n\nexport type NavCategoryItemContextValues = {\n  navCategoryItem: NavCategoryItemContextValue;\n};\n\nexport type NavCategoryItemSlots = {\n  /**\n   * The root element\n   */\n  root: NonNullable<Slot<'button'>>;\n\n  /**\n   * Icon that renders before the content.\n   * Should be specific to each Category\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Expand icon slot rendered after the content to indicate an open and closed state.\n   */\n  expandIcon: NonNullable<Slot<'span'>>;\n\n  /**\n   * Expand icon motion slot.\n   */\n  expandIconMotion?: Slot<PresenceMotionSlotProps>;\n};\n\n/**\n * navCategoryItem Props\n */\nexport type NavCategoryItemProps = ComponentProps<Partial<NavCategoryItemSlots>>;\n\n/**\n * State used in rendering NavCategoryItem\n */\nexport type NavCategoryItemState = ComponentState<NavCategoryItemSlots> &\n  NavCategoryItemContextValue & {\n    /**\n     * If this navCategoryItem is selected\n     */\n    selected: boolean;\n    /**\n     * The density of the NavItem\n     *\n     * @default 'medium'\n     */\n    density: NavDensity;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAqCA;;CAEC,GACD,WAYI"}

package/lib/components/NavCategoryItem/renderNavCategoryItem.js

@@ -1,6 +1,18 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 import { NavCategoryItemProvider } from '../NavCategoryItemContext';
+const getExpandIcon = (state)=>{
+    assertSlots(state);
+    if (!state.expandIcon) {
+        return null;
+    }
+    if (!state.expandIconMotion) {
+        return /*#__PURE__*/ _jsx(state.expandIcon, {});
+    }
+    return /*#__PURE__*/ _jsx(state.expandIconMotion, {
+        children: /*#__PURE__*/ _jsx(state.expandIcon, {})
+    });
+};
 /**
  * Render the final JSX of NavCategoryItem
  */ export const renderNavCategoryItem_unstable = (state, contextValues)=>{
@@ -11,7 +23,7 @@ import { NavCategoryItemProvider } from '../NavCategoryItemContext';
             children: [
                 state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
                 state.root.children,
-                state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})
+                getExpandIcon(state)
             ]
         })
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/renderNavCategoryItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { NavCategoryItemState, NavCategoryItemSlots, NavCategoryItemContextValues } from './NavCategoryItem.types';\nimport { NavCategoryItemProvider } from '../NavCategoryItemContext';\n\n/**\n * Render the final JSX of NavCategoryItem\n */\nexport const renderNavCategoryItem_unstable = (\n  state: NavCategoryItemState,\n  contextValues: NavCategoryItemContextValues,\n) => {\n  assertSlots<NavCategoryItemSlots>(state);\n\n  return (\n    <NavCategoryItemProvider value={contextValues.navCategoryItem}>\n      <state.root>\n        {state.icon && <state.icon />}\n        {state.root.children}\n        {state.expandIcon && <state.expandIcon />}\n      </state.root>\n    </NavCategoryItemProvider>\n  );\n};\n"],"names":["assertSlots","NavCategoryItemProvider","renderNavCategoryItem_unstable","state","contextValues","value","navCategoryItem","root","icon","children","expandIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,uBAAuB,QAAQ,4BAA4B;AAEpE;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEAJ,YAAkCG;IAElC,qBACE,KAACF;QAAwBI,OAAOD,cAAcE,eAAe;kBAC3D,cAAA,MAACH,MAAMI,IAAI;;gBACRJ,MAAMK,IAAI,kBAAI,KAACL,MAAMK,IAAI;gBACzBL,MAAMI,IAAI,CAACE,QAAQ;gBACnBN,MAAMO,UAAU,kBAAI,KAACP,MAAMO,UAAU;;;;AAI9C,EAAE"}
+{"version":3,"sources":["../src/components/NavCategoryItem/renderNavCategoryItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { NavCategoryItemState, NavCategoryItemSlots, NavCategoryItemContextValues } from './NavCategoryItem.types';\nimport { NavCategoryItemProvider } from '../NavCategoryItemContext';\n\nconst getExpandIcon = (state: NavCategoryItemState) => {\n  assertSlots<NavCategoryItemSlots>(state);\n\n  if (!state.expandIcon) {\n    return null;\n  }\n\n  if (!state.expandIconMotion) {\n    return <state.expandIcon />;\n  }\n\n  return (\n    <state.expandIconMotion>\n      <state.expandIcon />\n    </state.expandIconMotion>\n  );\n};\n\n/**\n * Render the final JSX of NavCategoryItem\n */\nexport const renderNavCategoryItem_unstable = (\n  state: NavCategoryItemState,\n  contextValues: NavCategoryItemContextValues,\n) => {\n  assertSlots<NavCategoryItemSlots>(state);\n\n  return (\n    <NavCategoryItemProvider value={contextValues.navCategoryItem}>\n      <state.root>\n        {state.icon && <state.icon />}\n        {state.root.children}\n        {getExpandIcon(state)}\n      </state.root>\n    </NavCategoryItemProvider>\n  );\n};\n"],"names":["assertSlots","NavCategoryItemProvider","getExpandIcon","state","expandIcon","expandIconMotion","renderNavCategoryItem_unstable","contextValues","value","navCategoryItem","root","icon","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,uBAAuB,QAAQ,4BAA4B;AAEpE,MAAMC,gBAAgB,CAACC;IACrBH,YAAkCG;IAElC,IAAI,CAACA,MAAMC,UAAU,EAAE;QACrB,OAAO;IACT;IAEA,IAAI,CAACD,MAAME,gBAAgB,EAAE;QAC3B,qBAAO,KAACF,MAAMC,UAAU;IAC1B;IAEA,qBACE,KAACD,MAAME,gBAAgB;kBACrB,cAAA,KAACF,MAAMC,UAAU;;AAGvB;AAEA;;CAEC,GACD,OAAO,MAAME,iCAAiC,CAC5CH,OACAI;IAEAP,YAAkCG;IAElC,qBACE,KAACF;QAAwBO,OAAOD,cAAcE,eAAe;kBAC3D,cAAA,MAACN,MAAMO,IAAI;;gBACRP,MAAMQ,IAAI,kBAAI,KAACR,MAAMQ,IAAI;gBACzBR,MAAMO,IAAI,CAACE,QAAQ;gBACnBV,cAAcC;;;;AAIvB,EAAE"}

package/lib/components/NavCategoryItem/useNavCategoryItem.js

@@ -1,8 +1,35 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';
-import { ChevronRight20Regular } from '@fluentui/react-icons';
+import { ChevronDown20Regular } from '@fluentui/react-icons';
+import { createPresenceComponent, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';
 import { useNavCategoryContext_unstable } from '../NavCategoryContext';
 import { useNavContext_unstable } from '../NavContext';
+const ExpandIconMotion = createPresenceComponent(()=>{
+    const keyframes = [
+        {
+            transform: 'rotate(0deg) translate3D(0, 0, 0)'
+        },
+        {
+            transform: 'rotate(180deg) translate3D(0, 0, 0)'
+        }
+    ];
+    const duration = motionTokens.durationFast;
+    const easing = motionTokens.curveEasyEase;
+    return {
+        enter: {
+            keyframes,
+            duration,
+            easing
+        },
+        exit: {
+            keyframes: [
+                ...keyframes
+            ].reverse(),
+            duration,
+            easing
+        }
+    };
+});
 /**
  * Create the state required to render NavCategoryItem.
  *
@@ -32,7 +59,8 @@ import { useNavContext_unstable } from '../NavContext';
         components: {
             root: 'button',
             icon: 'span',
-            expandIcon: 'span'
+            expandIcon: 'span',
+            expandIconMotion: ExpandIconMotion
         },
         root: slot.always(getIntrinsicElementProps('button', {
             ref,
@@ -45,11 +73,17 @@ import { useNavContext_unstable } from '../NavContext';
         }),
         expandIcon: slot.always(expandIcon, {
             defaultProps: {
-                children: /*#__PURE__*/ React.createElement(ChevronRight20Regular, null),
+                children: /*#__PURE__*/ React.createElement(ChevronDown20Regular, null),
                 'aria-hidden': true
             },
             elementType: 'span'
         }),
+        expandIconMotion: presenceMotionSlot(props.expandIconMotion, {
+            elementType: ExpandIconMotion,
+            defaultProps: {
+                visible: open
+            }
+        }),
         icon: slot.optional(icon, {
             elementType: 'span'
         }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronRight20Regular } from '@fluentui/react-icons';\nimport { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\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    },\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: <ChevronRight20Regular />,\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    }),\n    icon: slot.optional(icon, {\n      elementType: 'span',\n    }),\n    density,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","ChevronRight20Regular","useNavCategoryContext_unstable","useNavContext_unstable","useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","onRequestNavCategoryItemToggle","selectedCategoryValue","density","onNavCategoryItemClick","event","type","categoryValue","selected","validAriaCurrent","components","root","always","elementType","defaultProps","children","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC7G,SAASC,qBAAqB,QAAQ,wBAAwB;AAE9D,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGT;IAExB,MAAM,EAAEU,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,GAAGX;IAEtF,MAAMY,yBAAyBf,iBAC7BF,eAAeS,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;QACd;QACAc,MAAMvB,KAAKwB,MAAM,CACf1B,yBAAyB,UAAU;YACjCS;YACA,gBAAgBc;YAChB,iBAAiBV;YACjB,GAAGL,KAAK;YACRE,SAASQ;QACX,IACA;YAAES,aAAa;QAAS;QAE1BhB,YAAYT,KAAKwB,MAAM,CAACf,YAAY;YAClCiB,cAAc;gBACZC,wBAAU,oBAACzB;gBACX,eAAe;YACjB;YACAuB,aAAa;QACf;QACAf,MAAMV,KAAK4B,QAAQ,CAAClB,MAAM;YACxBe,aAAa;QACf;QACAV;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavCategoryItem/useNavCategoryItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDown20Regular } from '@fluentui/react-icons';\nimport { createPresenceComponent, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';\n\nimport type { NavCategoryItemProps, NavCategoryItemState } from './NavCategoryItem.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\nimport { useNavContext_unstable } from '../NavContext';\n\nconst ExpandIconMotion = createPresenceComponent(() => {\n  const keyframes: Keyframe[] = [\n    {\n      transform: 'rotate(0deg) translate3D(0, 0, 0)',\n    },\n    {\n      transform: 'rotate(180deg) translate3D(0, 0, 0)',\n    },\n  ];\n  const duration = motionTokens.durationFast;\n  const easing = motionTokens.curveEasyEase;\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing,\n    },\n  };\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","createPresenceComponent","motionTokens","presenceMotionSlot","useNavCategoryContext_unstable","useNavContext_unstable","ExpandIconMotion","keyframes","transform","duration","durationFast","easing","curveEasyEase","enter","exit","reverse","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC7G,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,uBAAuB,EAAEC,YAAY,EAAEC,kBAAkB,QAAQ,yBAAyB;AAGnG,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD,MAAMC,mBAAmBL,wBAAwB;IAC/C,MAAMM,YAAwB;QAC5B;YACEC,WAAW;QACb;QACA;YACEA,WAAW;QACb;KACD;IACD,MAAMC,WAAWP,aAAaQ,YAAY;IAC1C,MAAMC,SAAST,aAAaU,aAAa;IAEzC,OAAO;QACLC,OAAO;YACLN;YACAE;YACAE;QACF;QACAG,MAAM;YACJP,WAAW;mBAAIA;aAAU,CAACQ,OAAO;YACjCN;YACAE;QACF;IACF;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMK,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGnB;IAExB,MAAM,EAAEoB,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,GAAGrB;IAEtF,MAAMsB,yBAAyB5B,iBAC7BF,eAAesB,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,kBAAkB7B;QACpB;QACA4B,MAAMpC,KAAKsC,MAAM,CACfxC,yBAAyB,UAAU;YACjCsB;YACA,gBAAgBc;YAChB,iBAAiBV;YACjB,GAAGL,KAAK;YACRE,SAASQ;QACX,IACA;YAAEU,aAAa;QAAS;QAE1BjB,YAAYtB,KAAKsC,MAAM,CAAChB,YAAY;YAClCkB,cAAc;gBACZC,wBAAU,oBAACvC;gBACX,eAAe;YACjB;YACAqC,aAAa;QACf;QACAF,kBAAkBhC,mBAAmBc,MAAMkB,gBAAgB,EAAE;YAC3DE,aAAa/B;YACbgC,cAAc;gBACZE,SAASlB;YACX;QACF;QACAD,MAAMvB,KAAK2C,QAAQ,CAACpB,MAAM;YACxBgB,aAAa;QACf;QACAX;IACF;AACF,EAAE"}

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

@@ -4,7 +4,8 @@ import { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClas
 export const navCategoryItemClassNames = {
   root: 'fui-NavCategoryItem',
   icon: 'fui-NavCategoryItem__icon',
-  expandIcon: 'fui-NavCategoryItem__expandIcon'
+  expandIcon: 'fui-NavCategoryItem__expandIcon',
+  expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'
 };
 const useExpandIconStyles = /*#__PURE__*/__styles({
   base: {

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","useExpandIconStyles","base","Jyy4pa","Bqenvij","open","Bz10aip","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useRootStyles","a9b677","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","density","className"],"sources":["useNavCategoryItem.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navCategoryItemClassNames = {\n    root: 'fui-NavCategoryItem',\n    icon: 'fui-NavCategoryItem__icon',\n    expandIcon: 'fui-NavCategoryItem__expandIcon'\n};\nconst useExpandIconStyles = makeStyles({\n    base: {\n        marginInlineStart: 'auto',\n        height: '20px'\n    },\n    open: {\n        transform: 'rotate(90deg)'\n    },\n    selected: typographyStyles.body1Strong\n});\n/**\n * Styles for the root slot\n */ export const useRootStyles = makeStyles({\n    base: {\n        width: '100%'\n    }\n});\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */ export const useNavCategoryItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const smallStyles = useSmallStyles();\n    const defaultRootClassName = useRootDefaultClassName();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const { selected, open, density } = state;\n    state.root.className = mergeClasses(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);\n    state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.open && expandIconStyles.open, state.expandIcon.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,IAAI,EAAE,2BAA2B;EACjCC,UAAU,EAAE;AAChB,CAAC;AACD,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAa,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAS3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,gBAAGxB,QAAA;EAAAa,IAAA;IAAAY,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAIhC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMG,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,UAAU,GAAGJ,aAAa,CAAC,CAAC;EAClC,MAAMK,WAAW,GAAGtB,cAAc,CAAC,CAAC;EACpC,MAAMuB,oBAAoB,GAAGxB,uBAAuB,CAAC,CAAC;EACtD,MAAMyB,aAAa,GAAG5B,gBAAgB,CAAC,CAAC;EACxC,MAAM6B,eAAe,GAAG3B,kBAAkB,CAAC,CAAC;EAC5C,MAAM4B,UAAU,GAAG7B,aAAa,CAAC,CAAC;EAClC,MAAM8B,gBAAgB,GAAGtB,mBAAmB,CAAC,CAAC;EAC9C,MAAM;IAAEM,QAAQ;IAAEF,IAAI;IAAEmB;EAAQ,CAAC,GAAGR,KAAK;EACzCA,KAAK,CAAClB,IAAI,CAAC2B,SAAS,GAAGnC,YAAY,CAACO,yBAAyB,CAACC,IAAI,EAAEqB,oBAAoB,EAAEF,UAAU,CAACf,IAAI,EAAEsB,OAAO,KAAK,OAAO,IAAIN,WAAW,CAACpB,IAAI,EAAES,QAAQ,IAAIF,IAAI,KAAK,KAAK,IAAIgB,eAAe,CAACnB,IAAI,EAAEK,QAAQ,IAAIF,IAAI,KAAK,KAAK,IAAIe,aAAa,CAACb,QAAQ,EAAES,KAAK,CAAClB,IAAI,CAAC2B,SAAS,CAAC;EACnRT,KAAK,CAAChB,UAAU,CAACyB,SAAS,GAAGnC,YAAY,CAACO,yBAAyB,CAACG,UAAU,EAAEuB,gBAAgB,CAACrB,IAAI,EAAEc,KAAK,CAACX,IAAI,IAAIkB,gBAAgB,CAAClB,IAAI,EAAEW,KAAK,CAAChB,UAAU,CAACyB,SAAS,CAAC;EACvK,IAAIT,KAAK,CAACjB,IAAI,EAAE;IACZiB,KAAK,CAACjB,IAAI,CAAC0B,SAAS,GAAGnC,YAAY,CAACO,yBAAyB,CAACE,IAAI,EAAEuB,UAAU,CAACpB,IAAI,EAAEK,QAAQ,IAAIe,UAAU,CAACf,QAAQ,EAAES,KAAK,CAACjB,IAAI,CAAC0B,SAAS,CAAC;EAC/I;EACA,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","typographyStyles","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navCategoryItemClassNames","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","base","Jyy4pa","Bqenvij","open","Bz10aip","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useRootStyles","a9b677","useNavCategoryItemStyles_unstable","state","rootStyles","smallStyles","defaultRootClassName","contentStyles","indicatorStyles","iconStyles","expandIconStyles","density","className"],"sources":["useNavCategoryItem.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { useContentStyles, useIconStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navCategoryItemClassNames = {\n    root: 'fui-NavCategoryItem',\n    icon: 'fui-NavCategoryItem__icon',\n    expandIcon: 'fui-NavCategoryItem__expandIcon',\n    expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'\n};\nconst useExpandIconStyles = makeStyles({\n    base: {\n        marginInlineStart: 'auto',\n        height: '20px'\n    },\n    open: {\n        transform: 'rotate(90deg)'\n    },\n    selected: typographyStyles.body1Strong\n});\n/**\n * Styles for the root slot\n */ export const useRootStyles = makeStyles({\n    base: {\n        width: '100%'\n    }\n});\n/**\n * Apply styling to the NavCategoryItem slots based on the state\n */ export const useNavCategoryItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const smallStyles = useSmallStyles();\n    const defaultRootClassName = useRootDefaultClassName();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const iconStyles = useIconStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const { selected, open, density } = state;\n    state.root.className = mergeClasses(navCategoryItemClassNames.root, defaultRootClassName, rootStyles.base, density === 'small' && smallStyles.root, selected && open === false && indicatorStyles.base, selected && open === false && contentStyles.selected, state.root.className);\n    state.expandIcon.className = mergeClasses(navCategoryItemClassNames.expandIcon, expandIconStyles.base, state.open && expandIconStyles.open, state.expandIcon.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(navCategoryItemClassNames.icon, iconStyles.base, selected && iconStyles.selected, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,IAAI,EAAE,2BAA2B;EACjCC,UAAU,EAAE,iCAAiC;EAC7CC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAc,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAS3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,gBAAGzB,QAAA;EAAAc,IAAA;IAAAY,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAIhC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMG,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,UAAU,GAAGJ,aAAa,CAAC,CAAC;EAClC,MAAMK,WAAW,GAAGvB,cAAc,CAAC,CAAC;EACpC,MAAMwB,oBAAoB,GAAGzB,uBAAuB,CAAC,CAAC;EACtD,MAAM0B,aAAa,GAAG7B,gBAAgB,CAAC,CAAC;EACxC,MAAM8B,eAAe,GAAG5B,kBAAkB,CAAC,CAAC;EAC5C,MAAM6B,UAAU,GAAG9B,aAAa,CAAC,CAAC;EAClC,MAAM+B,gBAAgB,GAAGtB,mBAAmB,CAAC,CAAC;EAC9C,MAAM;IAAEM,QAAQ;IAAEF,IAAI;IAAEmB;EAAQ,CAAC,GAAGR,KAAK;EACzCA,KAAK,CAACnB,IAAI,CAAC4B,SAAS,GAAGpC,YAAY,CAACO,yBAAyB,CAACC,IAAI,EAAEsB,oBAAoB,EAAEF,UAAU,CAACf,IAAI,EAAEsB,OAAO,KAAK,OAAO,IAAIN,WAAW,CAACrB,IAAI,EAAEU,QAAQ,IAAIF,IAAI,KAAK,KAAK,IAAIgB,eAAe,CAACnB,IAAI,EAAEK,QAAQ,IAAIF,IAAI,KAAK,KAAK,IAAIe,aAAa,CAACb,QAAQ,EAAES,KAAK,CAACnB,IAAI,CAAC4B,SAAS,CAAC;EACnRT,KAAK,CAACjB,UAAU,CAAC0B,SAAS,GAAGpC,YAAY,CAACO,yBAAyB,CAACG,UAAU,EAAEwB,gBAAgB,CAACrB,IAAI,EAAEc,KAAK,CAACX,IAAI,IAAIkB,gBAAgB,CAAClB,IAAI,EAAEW,KAAK,CAACjB,UAAU,CAAC0B,SAAS,CAAC;EACvK,IAAIT,KAAK,CAAClB,IAAI,EAAE;IACZkB,KAAK,CAAClB,IAAI,CAAC2B,SAAS,GAAGpC,YAAY,CAACO,yBAAyB,CAACE,IAAI,EAAEwB,UAAU,CAACpB,IAAI,EAAEK,QAAQ,IAAIe,UAAU,CAACf,QAAQ,EAAES,KAAK,CAAClB,IAAI,CAAC2B,SAAS,CAAC;EAC/I;EACA,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -34,6 +34,7 @@ export const useNavSubItemStyles_unstable = state => {
     selected,
     density
   } = state;
-  state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, density === 'small' && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
+  const isSmallDensity = density === 'small';
+  state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","B1hrpyx","smallBase","selectedIndicator","rjyhj6","d","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","className"],"sources":["useNavSubItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navSubItemClassNames = {\n    root: 'fui-NavSubItem'\n};\n/**\n * Styles for the content slot (children)\n */ const useNavSubItemSpecificStyles = makeStyles({\n    base: {\n        paddingInlineStart: '46px'\n    },\n    smallBase: {\n        paddingInlineStart: '40px'\n    },\n    selectedIndicator: {\n        '::after': {\n            marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`\n        }\n    }\n});\n/**\n * Apply styling to the NavSubItem slots based on the state\n */ export const useNavSubItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const smallStyles = useSmallStyles();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n    const { selected, density } = state;\n    state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, density === 'small' && smallStyles.root, density === 'small' && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,2BAA2B,gBAAGT,QAAA;EAAAU,IAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAD,OAAA;EAAA;EAAAE,iBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAYvC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EACtD,MAAMc,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpC,MAAMc,aAAa,GAAGjB,gBAAgB,CAAC,CAAC;EACxC,MAAMkB,eAAe,GAAGjB,kBAAkB,CAAC,CAAC;EAC5C,MAAMkB,wBAAwB,GAAGb,2BAA2B,CAAC,CAAC;EAC9D,MAAM;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,GAAGP,KAAK;EACnCA,KAAK,CAACT,IAAI,CAACiB,SAAS,GAAGxB,YAAY,CAACM,oBAAoB,CAACC,IAAI,EAAEU,oBAAoB,EAAEM,OAAO,KAAK,OAAO,IAAIL,WAAW,CAACX,IAAI,EAAEgB,OAAO,KAAK,OAAO,IAAIF,wBAAwB,CAACV,SAAS,EAAEU,wBAAwB,CAACZ,IAAI,EAAEa,QAAQ,IAAIF,eAAe,CAACX,IAAI,EAAEa,QAAQ,IAAIH,aAAa,CAACG,QAAQ,EAAEA,QAAQ,IAAID,wBAAwB,CAACT,iBAAiB,EAAEI,KAAK,CAACT,IAAI,CAACiB,SAAS,CAAC;EAC3W,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","navItemTokens","useContentStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","navSubItemClassNames","root","useNavSubItemSpecificStyles","base","B1hrpyx","smallBase","selectedIndicator","rjyhj6","d","useNavSubItemStyles_unstable","state","rootDefaultClassName","smallStyles","contentStyles","indicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className"],"sources":["useNavSubItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens, useContentStyles, useIndicatorStyles, useRootDefaultClassName, useSmallStyles } from '../sharedNavStyles.styles';\nexport const navSubItemClassNames = {\n    root: 'fui-NavSubItem'\n};\n/**\n * Styles for the content slot (children)\n */ const useNavSubItemSpecificStyles = makeStyles({\n    base: {\n        paddingInlineStart: '46px'\n    },\n    smallBase: {\n        paddingInlineStart: '40px'\n    },\n    selectedIndicator: {\n        '::after': {\n            marginInlineStart: `-${navItemTokens.indicatorOffset + 36}px`\n        }\n    }\n});\n/**\n * Apply styling to the NavSubItem slots based on the state\n */ export const useNavSubItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootDefaultClassName = useRootDefaultClassName();\n    const smallStyles = useSmallStyles();\n    const contentStyles = useContentStyles();\n    const indicatorStyles = useIndicatorStyles();\n    const navSubItemSpecificStyles = useNavSubItemSpecificStyles();\n    const { selected, density } = state;\n    const isSmallDensity = density === 'small';\n    state.root.className = mergeClasses(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,kBAAkB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,2BAA2B;AACxI,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,2BAA2B,gBAAGT,QAAA;EAAAU,IAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAD,OAAA;EAAA;EAAAE,iBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAYvC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EACtD,MAAMc,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpC,MAAMc,aAAa,GAAGjB,gBAAgB,CAAC,CAAC;EACxC,MAAMkB,eAAe,GAAGjB,kBAAkB,CAAC,CAAC;EAC5C,MAAMkB,wBAAwB,GAAGb,2BAA2B,CAAC,CAAC;EAC9D,MAAM;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,GAAGP,KAAK;EACnC,MAAMQ,cAAc,GAAGD,OAAO,KAAK,OAAO;EAC1CP,KAAK,CAACT,IAAI,CAACkB,SAAS,GAAGzB,YAAY,CAACM,oBAAoB,CAACC,IAAI,EAAEU,oBAAoB,EAAEO,cAAc,IAAIN,WAAW,CAACX,IAAI,EAAEiB,cAAc,IAAIH,wBAAwB,CAACV,SAAS,EAAEU,wBAAwB,CAACZ,IAAI,EAAEa,QAAQ,IAAIF,eAAe,CAACX,IAAI,EAAEa,QAAQ,IAAIH,aAAa,CAACG,QAAQ,EAAEA,QAAQ,IAAID,wBAAwB,CAACT,iBAAiB,EAAEI,KAAK,CAACT,IAAI,CAACkB,SAAS,CAAC;EACjW,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}

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

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

package/lib/components/NavSubItemGroup/renderNavSubItemGroup.js

@@ -4,7 +4,7 @@ import { assertSlots } from '@fluentui/react-utilities';
  * Render the final JSX of NavSubItemGroup
  */ export const renderNavSubItemGroup_unstable = (state)=>{
     assertSlots(state);
-    return state.open ? /*#__PURE__*/ _jsx(state.root, {
-        children: state.root.children
-    }) : null;
+    return state.collapseMotion ? /*#__PURE__*/ _jsx(state.collapseMotion, {
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    }) : /*#__PURE__*/ _jsx(state.root, {});
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItemGroup/renderNavSubItemGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupState, NavSubItemGroupSlots } from './NavSubItemGroup.types';\n\n/**\n * Render the final JSX of NavSubItemGroup\n */\nexport const renderNavSubItemGroup_unstable = (state: NavSubItemGroupState) => {\n  assertSlots<NavSubItemGroupSlots>(state);\n\n  return state.open ? <state.root>{state.root.children}</state.root> : null;\n};\n"],"names":["assertSlots","renderNavSubItemGroup_unstable","state","open","root","children"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,OAAOA,MAAMC,IAAI,iBAAG,KAACD,MAAME,IAAI;kBAAEF,MAAME,IAAI,CAACC,QAAQ;SAAiB;AACvE,EAAE"}
+{"version":3,"sources":["../src/components/NavSubItemGroup/renderNavSubItemGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupState, NavSubItemGroupSlots } from './NavSubItemGroup.types';\n\n/**\n * Render the final JSX of NavSubItemGroup\n */\nexport const renderNavSubItemGroup_unstable = (state: NavSubItemGroupState) => {\n  assertSlots<NavSubItemGroupSlots>(state);\n\n  return state.collapseMotion ? (\n    <state.collapseMotion>\n      <state.root />\n    </state.collapseMotion>\n  ) : (\n    <state.root />\n  );\n};\n"],"names":["assertSlots","renderNavSubItemGroup_unstable","state","collapseMotion","root"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,OAAOA,MAAMC,cAAc,iBACzB,KAACD,MAAMC,cAAc;kBACnB,cAAA,KAACD,MAAME,IAAI;uBAGb,KAACF,MAAME,IAAI;AAEf,EAAE"}

package/lib/components/NavSubItemGroup/useNavSubItemGroup.js

@@ -1,6 +1,44 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { createPresenceComponent, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';
 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.
  *
@@ -11,19 +49,27 @@ import { useNavCategoryContext_unstable } from '../NavCategoryContext';
  * @param ref - reference to root HTMLDivElement of NavSubItemGroup
  */ export const useNavSubItemGroup_unstable = (props, ref)=>{
     const { open } = useNavCategoryContext_unstable();
-    // copied over from accordion. todo - figure out how to handle.
-    // const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });
-    // const navigation = useAccordionContext_unstable(ctx => ctx.navigation);
+    const { density } = useNavContext_unstable();
     return {
         open,
         components: {
-            root: 'div'
+            root: 'div',
+            collapseMotion: NavGroupMotion
         },
         root: slot.always(getIntrinsicElementProps('div', {
             ...props,
             ref
         }), {
             elementType: 'div'
+        }),
+        collapseMotion: presenceMotionSlot(props.collapseMotion, {
+            elementType: NavGroupMotion,
+            defaultProps: {
+                visible: open,
+                unmountOnExit: true,
+                items: React.Children.count(props.children),
+                density
+            }
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\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  // copied over from accordion. todo - figure out how to handle.\n  // const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n  // const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n  return {\n    open,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useNavCategoryContext_unstable","useNavSubItemGroup_unstable","props","ref","open","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,8BAA8B,QAAQ,wBAAwB;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGJ;IAEjB,+DAA+D;IAC/D,0FAA0F;IAC1F,0EAA0E;IAE1E,OAAO;QACLI;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9B,GAAGI,KAAK;YACRC;QACF,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["import * 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,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,CAAC,EAAEJ,OAAO,EAAE,CAAC;YACxBA,QAAQ,CAAC,EAAEA,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"}

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

@@ -6,8 +6,17 @@ export const navSubItemGroupClassNames = {
  * Styles for the root slot
  */
 const useStyles = /*#__PURE__*/__styles({
-  root: {}
-}, {});
+  root: {
+    Bz10aip: "f1yj8dow",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp"
+  }
+}, {
+  d: [".f1yj8dow{transform:translateZ(0);}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }]]
+});
 /**
  * Apply styling to the NavSubItemGroup slots based on the state
  */
@@ -16,7 +25,5 @@ export const useNavSubItemGroupStyles_unstable = state => {
 
   const styles = useStyles();
   state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);
-  // TODO Add class names to slots, for example:
-  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","useNavSubItemGroupStyles_unstable","state","styles","className"],"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["import { 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    }\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    // TODO Add class names to slots, for example:\n    // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n    return state;\n};\n"],"mappings":"AAAA,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;AAAA,KAGrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAME,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEI,MAAM,CAACJ,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACtG;EACA;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","Bz10aip","B68tc82","Bmxbyg5","Bpg54ce","d","p","useNavSubItemGroupStyles_unstable","state","styles","className"],"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["import { 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,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":[]}

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

@@ -1,6 +1,7 @@
 import { __styles, mergeClasses } from '@griffel/react';
-import { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';
 import { tokens } from '@fluentui/react-theme';
+import { motionTokens } from '@fluentui/react-motion';
+import { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';
 export const splitNavItemClassNames = {
   root: 'fui-SplitNavItem',
   navItem: 'fui-SplitNavItem__navItem',
@@ -17,6 +18,17 @@ export const splitNavItemClassNames = {
 // Don't use makeResetStyles here because the sub components call it once and
 // This links says that makeResetStyles should only be called once per element
 // https://griffel.js.org/react/api/make-reset-styles/#limitations
+const {
+  actionButton,
+  toggleButton,
+  menuButton
+} = splitNavItemClassNames;
+const buttonHoverStyles = {
+  [`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {
+    opacity: 1,
+    pointerEvents: 'auto'
+  }
+};
 /**
  * Styles for the root slot
  */
@@ -38,6 +50,10 @@ const useSplitNaveItemStyles = /*#__PURE__*/__styles({
     Bkqvd7p: "f1e9ux7i",
     Bmy1vo4: "f1xfaukr",
     Jwef8y: "f11oyicx",
+    xwko9w: "f8z0t4e",
+    mcc9px: "f9ueil3",
+    B02v5zz: "f1g2hb8n",
+    i4x37a: "fpq6je",
     ecr2s2: "f9fof1w"
   },
   baseNavItem: {
@@ -61,6 +77,20 @@ const useSplitNaveItemStyles = /*#__PURE__*/__styles({
   },
   baseMedium: {
     rjzwhg: "fjtod8q"
+  },
+  baseLarge: {
+    rjzwhg: "f16gijt3"
+  },
+  hoverAction: {
+    abs64n: "fk73vx1",
+    Bkecrkj: "f1aehjj5",
+    Bn62ygk: 0,
+    Cwk7ip: 0,
+    B3o57yi: 0,
+    Bmy1vo4: 0,
+    Bkqvd7p: 0,
+    Bi2q7bf: ["fr12795", "fcl876f"],
+    Es3by: "f1gqqdtu"
   }
 }, {
   d: [".f22iagw{display:flex;}", [".fx80lhs{gap:unset;}", {
@@ -69,8 +99,13 @@ const useSplitNaveItemStyles = /*#__PURE__*/__styles({
     p: -1
   }], ".fgusgyc{text-align:unset;}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".fnsygzv{transition-duration:var(--durationFaster);}", ".f1e9ux7i{transition-timing-function:var(--curveLinear);}", ".f1xfaukr{transition-property:background;}", ".f1cxpek8{text-transform:none;}", ".f1ub7u0d{align-self:stretch;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f10pi13n{position:relative;}", ".f1s9ku6b{justify-content:start;}", [".f1u2hskj{gap:var(--spacingVerticalL);}", {
     p: -1
-  }], ".f3rmtva{background-color:transparent;}", ".f107v6xj{min-width:28px;}", ".f1y335lp{-webkit-padding-end:12px;padding-inline-end:12px;}", ".f12pses1{-webkit-padding-start:5px;padding-inline-start:5px;}", ".fibmr9j{padding-block-start:5px;}", ".f1s2louj{align-items:start;}", ".fjtod8q{padding-block-start:9px;}"],
-  h: [".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}"],
+  }], ".f3rmtva{background-color:transparent;}", ".f107v6xj{min-width:28px;}", ".f1y335lp{-webkit-padding-end:12px;padding-inline-end:12px;}", ".f12pses1{-webkit-padding-start:5px;padding-inline-start:5px;}", ".fibmr9j{padding-block-start:5px;}", ".f1s2louj{align-items:start;}", ".fjtod8q{padding-block-start:9px;}", ".f16gijt3{padding-block-start:12px;}", ".fk73vx1{opacity:0;}", ".f1aehjj5{pointer-events:none;}", [".fr12795{transition:opacity 150ms cubic-bezier(0.33,0,0.67,1);}", {
+    p: -1
+  }], [".fcl876f{transition:opacity 150ms cubic-bezier(0.33, 0, 0.67, 1);}", {
+    p: -1
+  }], ".f1gqqdtu{will-change:opacity;}"],
+  h: [".f11oyicx:hover{background-color:var(--colorNeutralBackground4Hover);}", ".f8z0t4e:hover .fui-SplitNavItem__actionButton,.f8z0t4e:hover .fui-SplitNavItem__toggleButton,.f8z0t4e:hover .fui-SplitNavItem__menuButton{opacity:1;}", ".f9ueil3:hover .fui-SplitNavItem__actionButton,.f9ueil3:hover .fui-SplitNavItem__toggleButton,.f9ueil3:hover .fui-SplitNavItem__menuButton{pointer-events:auto;}"],
+  w: [".f1g2hb8n:focus-within .fui-SplitNavItem__actionButton,.f1g2hb8n:focus-within .fui-SplitNavItem__toggleButton,.f1g2hb8n:focus-within .fui-SplitNavItem__menuButton{opacity:1;}", ".fpq6je:focus-within .fui-SplitNavItem__actionButton,.fpq6je:focus-within .fui-SplitNavItem__toggleButton,.fpq6je:focus-within .fui-SplitNavItem__menuButton{pointer-events:auto;}"],
   a: [".f9fof1w:active{background-color:var(--colorNeutralBackground4Pressed);}"]
 });
 /**
@@ -86,13 +121,13 @@ export const useSplitNavItemStyles_unstable = state => {
     state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
   }
   if (state.actionButton) {
-    state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
+    state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
   }
   if (state.toggleButton) {
-    state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
+    state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
   }
   if (state.menuButton) {
-    state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
+    state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
   }
   return state;
 };