@fluentui/react-nav 9.1.3 → 9.2.0

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

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

package/lib/components/useNavContextValues.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export function useNavContextValues_unstable(state) {
-    const { selectedValue, selectedCategoryValue, onRegister, onUnregister, onSelect, getRegisteredNavItems, onRequestNavCategoryItemToggle, openCategories, multiple, density } = state;
+    const { selectedValue, selectedCategoryValue, onRegister, onUnregister, onSelect, getRegisteredNavItems, onRequestNavCategoryItemToggle, openCategories, multiple, density, onNavItemSelect } = state;
     const navContext = React.useMemo(()=>({
             selectedValue,
             selectedCategoryValue,
@@ -11,7 +11,8 @@ export function useNavContextValues_unstable(state) {
             onRequestNavCategoryItemToggle,
             openCategories,
             multiple,
-            density
+            density,
+            onNavItemSelect
         }), [
         selectedValue,
         selectedCategoryValue,
@@ -22,7 +23,8 @@ export function useNavContextValues_unstable(state) {
         onRequestNavCategoryItemToggle,
         openCategories,
         multiple,
-        density
+        density,
+        onNavItemSelect
     ]);
     return {
         nav: navContext

package/lib/components/useNavContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/useNavContextValues.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue, NavContextValues, NavState } from '../Nav';\n\nexport function useNavContextValues_unstable(state: NavState): NavContextValues {\n  const {\n    selectedValue,\n    selectedCategoryValue,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredNavItems,\n    onRequestNavCategoryItemToggle,\n    openCategories,\n    multiple,\n    density,\n  } = state;\n\n  const navContext = React.useMemo<NavContextValue>(\n    () => ({\n      selectedValue,\n      selectedCategoryValue,\n      onSelect,\n      onRegister,\n      onUnregister,\n      getRegisteredNavItems,\n      onRequestNavCategoryItemToggle,\n      openCategories,\n      multiple,\n      density,\n    }),\n    [\n      selectedValue,\n      selectedCategoryValue,\n      onSelect,\n      onRegister,\n      onUnregister,\n      getRegisteredNavItems,\n      onRequestNavCategoryItemToggle,\n      openCategories,\n      multiple,\n      density,\n    ],\n  );\n\n  return { nav: navContext };\n}\n"],"names":["React","useNavContextValues_unstable","state","selectedValue","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","navContext","useMemo","nav"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,6BAA6BC,KAAe;IAC1D,MAAM,EACJC,aAAa,EACbC,qBAAqB,EACrBC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,qBAAqB,EACrBC,8BAA8B,EAC9BC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACR,GAAGV;IAEJ,MAAMW,aAAab,MAAMc,OAAO,CAC9B,IAAO,CAAA;YACLX;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACET;QACAC;QACAG;QACAF;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEG,KAAKF;IAAW;AAC3B"}
+{"version":3,"sources":["../src/components/useNavContextValues.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue, NavContextValues, NavState } from '../Nav';\n\nexport function useNavContextValues_unstable(state: NavState): NavContextValues {\n  const {\n    selectedValue,\n    selectedCategoryValue,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredNavItems,\n    onRequestNavCategoryItemToggle,\n    openCategories,\n    multiple,\n    density,\n    onNavItemSelect,\n  } = state;\n\n  const navContext = React.useMemo<NavContextValue>(\n    () => ({\n      selectedValue,\n      selectedCategoryValue,\n      onSelect,\n      onRegister,\n      onUnregister,\n      getRegisteredNavItems,\n      onRequestNavCategoryItemToggle,\n      openCategories,\n      multiple,\n      density,\n      onNavItemSelect,\n    }),\n    [\n      selectedValue,\n      selectedCategoryValue,\n      onSelect,\n      onRegister,\n      onUnregister,\n      getRegisteredNavItems,\n      onRequestNavCategoryItemToggle,\n      openCategories,\n      multiple,\n      density,\n      onNavItemSelect,\n    ],\n  );\n\n  return { nav: navContext };\n}\n"],"names":["React","useNavContextValues_unstable","state","selectedValue","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","onNavItemSelect","navContext","useMemo","nav"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,6BAA6BC,KAAe;IAC1D,MAAM,EACJC,aAAa,EACbC,qBAAqB,EACrBC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,qBAAqB,EACrBC,8BAA8B,EAC9BC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,eAAe,EAChB,GAAGX;IAEJ,MAAMY,aAAad,MAAMe,OAAO,CAC9B,IAAO,CAAA;YACLZ;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEV;QACAC;QACAG;QACAF;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEG,KAAKF;IAAW;AAC3B"}

package/lib-commonjs/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"}
+{"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"}

package/lib-commonjs/components/NavCategoryItem/renderNavCategoryItem.js

@@ -11,6 +11,18 @@ Object.defineProperty(exports, "renderNavCategoryItem_unstable", {
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
 const _NavCategoryItemContext = require("../NavCategoryItemContext");
+const getExpandIcon = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    if (!state.expandIcon) {
+        return null;
+    }
+    if (!state.expandIconMotion) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {});
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIconMotion, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {})
+    });
+};
 const renderNavCategoryItem_unstable = (state, contextValues)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_NavCategoryItemContext.NavCategoryItemProvider, {
@@ -19,7 +31,7 @@ const renderNavCategoryItem_unstable = (state, contextValues)=>{
             children: [
                 state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
                 state.root.children,
-                state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {})
+                getExpandIcon(state)
             ]
         })
     });

package/lib-commonjs/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":["renderNavCategoryItem_unstable","state","contextValues","assertSlots","_jsx","NavCategoryItemProvider","value","navCategoryItem","_jsxs","root","icon","children","expandIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;wCAEY;AAKjC,MAAMA,iCAAiC,CAC5CC,OACAC;IAEAC,IAAAA,2BAAAA,EAAkCF;IAElC,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,+CAAAA,EAAAA;QAAwBC,OAAOJ,cAAcK,eAAe;kBAC3D,WAAA,GAAAC,IAAAA,gBAAA,EAACP,MAAMQ,IAAI,EAAA;;gBACRR,MAAMS,IAAI,IAAA,WAAA,GAAIN,IAAAA,eAAA,EAACH,MAAMS,IAAI,EAAA,CAAA;gBACzBT,MAAMQ,IAAI,CAACE,QAAQ;gBACnBV,MAAMW,UAAU,IAAA,WAAA,GAAIR,IAAAA,eAAA,EAACH,MAAMW,UAAU,EAAA,CAAA;;;;AAI9C"}
+{"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":["renderNavCategoryItem_unstable","getExpandIcon","state","assertSlots","expandIcon","expandIconMotion","_jsx","contextValues","NavCategoryItemProvider","value","navCategoryItem","_jsxs","root","icon","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4BaA;;;eAAAA;;;4BA3Bb;gCAE4B;wCAEY;AAExC,MAAMC,gBAAgB,CAACC;IACrBC,IAAAA,2BAAAA,EAAkCD;IAElC,IAAI,CAACA,MAAME,UAAU,EAAE;QACrB,OAAO;IACT;IAEA,IAAI,CAACF,MAAMG,gBAAgB,EAAE;QAC3B,OAAA,WAAA,GAAOC,IAAAA,eAAA,EAACJ,MAAME,UAAU,EAAA,CAAA;IAC1B;IAEA,OAAA,WAAA,GACEE,IAAAA,eAAA,EAACJ,MAAMG,gBAAgB,EAAA;kBACrB,WAAA,GAAAC,IAAAA,eAAA,EAACJ,MAAME,UAAU,EAAA,CAAA;;AAGvB;AAKO,MAAMJ,iCAAiC,CAC5CE,OACAK;IAEAJ,IAAAA,2BAAAA,EAAkCD;IAElC,OAAA,WAAA,GACEI,IAAAA,eAAA,EAACE,+CAAAA,EAAAA;QAAwBC,OAAOF,cAAcG,eAAe;kBAC3D,WAAA,GAAAC,IAAAA,gBAAA,EAACT,MAAMU,IAAI,EAAA;;gBACRV,MAAMW,IAAI,IAAA,WAAA,GAAIP,IAAAA,eAAA,EAACJ,MAAMW,IAAI,EAAA,CAAA;gBACzBX,MAAMU,IAAI,CAACE,QAAQ;gBACnBb,cAAcC;;;;AAIvB"}

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

@@ -12,8 +12,35 @@ 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 _reacticons = require("@fluentui/react-icons");
+const _reactmotion = require("@fluentui/react-motion");
 const _NavCategoryContext = require("../NavCategoryContext");
 const _NavContext = require("../NavContext");
+const ExpandIconMotion = (0, _reactmotion.createPresenceComponent)(()=>{
+    const keyframes = [
+        {
+            transform: 'rotate(0deg) translate3D(0, 0, 0)'
+        },
+        {
+            transform: 'rotate(180deg) translate3D(0, 0, 0)'
+        }
+    ];
+    const duration = _reactmotion.motionTokens.durationFast;
+    const easing = _reactmotion.motionTokens.curveEasyEase;
+    return {
+        enter: {
+            keyframes,
+            duration,
+            easing
+        },
+        exit: {
+            keyframes: [
+                ...keyframes
+            ].reverse(),
+            duration,
+            easing
+        }
+    };
+});
 const useNavCategoryItem_unstable = (props, ref)=>{
     const { onClick, expandIcon, icon } = props;
     const { open, value } = (0, _NavCategoryContext.useNavCategoryContext_unstable)();
@@ -35,7 +62,8 @@ const useNavCategoryItem_unstable = (props, ref)=>{
         components: {
             root: 'button',
             icon: 'span',
-            expandIcon: 'span'
+            expandIcon: 'span',
+            expandIconMotion: ExpandIconMotion
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
             ref,
@@ -48,11 +76,17 @@ const useNavCategoryItem_unstable = (props, ref)=>{
         }),
         expandIcon: _reactutilities.slot.always(expandIcon, {
             defaultProps: {
-                children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronRight20Regular, null),
+                children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDown20Regular, null),
                 'aria-hidden': true
             },
             elementType: 'span'
         }),
+        expandIconMotion: (0, _reactmotion.presenceMotionSlot)(props.expandIconMotion, {
+            elementType: ExpandIconMotion,
+            defaultProps: {
+                visible: open
+            }
+        }),
         icon: _reactutilities.slot.optional(icon, {
             elementType: 'span'
         }),

package/lib-commonjs/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":["useNavCategoryItem_unstable","props","ref","onClick","expandIcon","icon","open","value","useNavCategoryContext_unstable","onRequestNavCategoryItemToggle","selectedCategoryValue","density","useNavContext_unstable","onNavCategoryItemClick","useEventCallback","mergeCallbacks","event","type","categoryValue","selected","validAriaCurrent","components","root","slot","always","getIntrinsicElementProps","elementType","defaultProps","children","React","createElement","ChevronRight20Regular","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCAC0D;4BAC3C;oCAES;4BACR;AAWhC,MAAMA,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGC,IAAAA,kDAAAA;IAExB,MAAM,EAAEC,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,GAAGC,IAAAA,kCAAAA;IAEtF,MAAMC,yBAAyBC,IAAAA,gCAAAA,EAC7BC,IAAAA,8BAAAA,EAAeZ,SAASa,CAAAA,QACtBP,+BAA+BO,OAAO;YAAEC,MAAM;YAASD;YAAOT,OAAO;YAAIW,eAAeX;QAAM;IAIlG,qCAAqC;IACrC,MAAMY,WAAWT,0BAA0BH,SAAS,CAACD;IACrD,+GAA+G;IAC/G,MAAMc,mBAAqCD,YAAY,CAACb,OAAO,SAAS;IAExE,OAAO;QACLA;QACAC;QACAY;QACAE,YAAY;YACVC,MAAM;YACNjB,MAAM;YACND,YAAY;QACd;QACAkB,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,UAAU;YACjCvB;YACA,gBAAgBkB;YAChB,iBAAiBd;YACjB,GAAGL,KAAK;YACRE,SAASU;QACX,IACA;YAAEa,aAAa;QAAS;QAE1BtB,YAAYmB,oBAAAA,CAAKC,MAAM,CAACpB,YAAY;YAClCuB,cAAc;gBACZC,UAAAA,WAAAA,GAAUC,OAAAC,aAAA,CAACC,iCAAAA,EAAAA;gBACX,eAAe;YACjB;YACAL,aAAa;QACf;QACArB,MAAMkB,oBAAAA,CAAKS,QAAQ,CAAC3B,MAAM;YACxBqB,aAAa;QACf;QACAf;IACF;AACF"}
+{"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":["useNavCategoryItem_unstable","ExpandIconMotion","createPresenceComponent","keyframes","transform","duration","motionTokens","durationFast","easing","curveEasyEase","enter","exit","reverse","props","ref","onClick","expandIcon","icon","open","value","useNavCategoryContext_unstable","onRequestNavCategoryItemToggle","selectedCategoryValue","density","useNavContext_unstable","onNavCategoryItemClick","useEventCallback","mergeCallbacks","event","type","categoryValue","selected","validAriaCurrent","components","root","expandIconMotion","slot","always","getIntrinsicElementProps","elementType","defaultProps","children","React","createElement","ChevronDown20Regular","presenceMotionSlot","visible","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4CaA;;;eAAAA;;;;iEA5CU;gCAC0D;4BAC5C;6BACqC;oCAG3B;4BACR;AAEvC,MAAMC,mBAAmBC,IAAAA,oCAAAA,EAAwB;IAC/C,MAAMC,YAAwB;QAC5B;YACEC,WAAW;QACb;QACA;YACEA,WAAW;QACb;KACD;IACD,MAAMC,WAAWC,yBAAAA,CAAaC,YAAY;IAC1C,MAAMC,SAASF,yBAAAA,CAAaG,aAAa;IAEzC,OAAO;QACLC,OAAO;YACLP;YACAE;YACAG;QACF;QACAG,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCP;YACAG;QACF;IACF;AACF;AAWO,MAAMR,8BAA8B,CACzCa,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGJ;IAEtC,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAE,GAAGC,IAAAA,kDAAAA;IAExB,MAAM,EAAEC,8BAA8B,EAAEC,qBAAqB,EAAEC,UAAU,QAAQ,EAAE,GAAGC,IAAAA,kCAAAA;IAEtF,MAAMC,yBAAyBC,IAAAA,gCAAAA,EAC7BC,IAAAA,8BAAAA,EAAeZ,SAASa,CAAAA,QACtBP,+BAA+BO,OAAO;YAAEC,MAAM;YAASD;YAAOT,OAAO;YAAIW,eAAeX;QAAM;IAIlG,qCAAqC;IACrC,MAAMY,WAAWT,0BAA0BH,SAAS,CAACD;IACrD,+GAA+G;IAC/G,MAAMc,mBAAqCD,YAAY,CAACb,OAAO,SAAS;IAExE,OAAO;QACLA;QACAC;QACAY;QACAE,YAAY;YACVC,MAAM;YACNjB,MAAM;YACND,YAAY;YACZmB,kBAAkBlC;QACpB;QACAiC,MAAME,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,UAAU;YACjCxB;YACA,gBAAgBkB;YAChB,iBAAiBd;YACjB,GAAGL,KAAK;YACRE,SAASU;QACX,IACA;YAAEc,aAAa;QAAS;QAE1BvB,YAAYoB,oBAAAA,CAAKC,MAAM,CAACrB,YAAY;YAClCwB,cAAc;gBACZC,UAAAA,WAAAA,GAAUC,OAAAC,aAAA,CAACC,gCAAAA,EAAAA;gBACX,eAAe;YACjB;YACAL,aAAa;QACf;QACAJ,kBAAkBU,IAAAA,+BAAAA,EAAmBhC,MAAMsB,gBAAgB,EAAE;YAC3DI,aAAatC;YACbuC,cAAc;gBACZM,SAAS5B;YACX;QACF;QACAD,MAAMmB,oBAAAA,CAAKW,QAAQ,CAAC9B,MAAM;YACxBsB,aAAa;QACf;QACAhB;IACF;AACF"}

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

@@ -24,7 +24,8 @@ const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
 const navCategoryItemClassNames = {
     root: 'fui-NavCategoryItem',
     icon: 'fui-NavCategoryItem__icon',
-    expandIcon: 'fui-NavCategoryItem__expandIcon'
+    expandIcon: 'fui-NavCategoryItem__expandIcon',
+    expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'
 };
 const useExpandIconStyles = /*#__PURE__*/ (0, _react.__styles)({
     base: {

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["navCategoryItemClassNames","useNavCategoryItemStyles_unstable","useRootStyles","root","icon","expandIcon","useExpandIconStyles","__styles","base","Jyy4pa","Bqenvij","open","Bz10aip","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","a9b677","state","rootStyles","smallStyles","useSmallStyles","defaultRootClassName","useRootDefaultClassName","contentStyles","useContentStyles","indicatorStyles","useIndicatorStyles","iconStyles","useIconStyles","expandIconStyles","density","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,yBAAyB;eAAzBA;;IAwBIC,iCAAiC;eAAjCA;;IAPAC,aAAa;eAAbA;;;uBApBwB;uCAEoE;AACtG,MAAMF,4BAA4B;IACrCG,MAAM;IACNC,MAAM;IACNC,YAAY;AAChB;AACA,MAAMC,sBAAmB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,MAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,UAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAYjB,MAAMhB,gBAAa,WAAA,GAAGK,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAW,QAAA;IAAA;AAAA,GAAA;IAAAD,GAAA;QAAA;KAAA;AAAA;AAOtB,MAAMjB,oCAAqCmB,CAAAA;IAClD;IACA,MAAMC,aAAanB;IACnB,MAAMoB,cAAcC,IAAAA,qCAAc;IAClC,MAAMC,uBAAuBC,IAAAA,8CAAuB;IACpD,MAAMC,gBAAgBC,IAAAA,uCAAgB;IACtC,MAAMC,kBAAkBC,IAAAA,yCAAkB;IAC1C,MAAMC,aAAaC,IAAAA,oCAAa;IAChC,MAAMC,mBAAmB1B;IACzB,MAAM,EAAEO,QAAQ,EAAEF,IAAI,EAAEsB,OAAAA,EAAS,GAAGb;IACpCA,MAAMjB,IAAI,CAAC+B,SAAS,GAAGC,IAAAA,mBAAY,EAACnC,0BAA0BG,IAAI,EAAEqB,sBAAsBH,WAAWb,IAAI,EAAEyB,YAAY,WAAWX,YAAYnB,IAAI,EAAEU,YAAYF,SAAS,SAASiB,gBAAgBpB,IAAI,EAAEK,YAAYF,SAAS,SAASe,cAAcb,QAAQ,EAAEO,MAAMjB,IAAI,CAAC+B,SAAS;IAClRd,MAAMf,UAAU,CAAC6B,SAAS,GAAGC,IAAAA,mBAAY,EAACnC,0BAA0BK,UAAU,EAAE2B,iBAAiBxB,IAAI,EAAEY,MAAMT,IAAI,IAAIqB,iBAAiBrB,IAAI,EAAES,MAAMf,UAAU,CAAC6B,SAAS;IACtK,IAAId,MAAMhB,IAAI,EAAE;QACZgB,MAAMhB,IAAI,CAAC8B,SAAS,GAAGC,IAAAA,mBAAY,EAACnC,0BAA0BI,IAAI,EAAE0B,WAAWtB,IAAI,EAAEK,YAAYiB,WAAWjB,QAAQ,EAAEO,MAAMhB,IAAI,CAAC8B,SAAS;IAC9I;IACA,OAAOd;AACX"}
+{"version":3,"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"],"names":["navCategoryItemClassNames","useNavCategoryItemStyles_unstable","useRootStyles","root","icon","expandIcon","expandIconMotion","useExpandIconStyles","__styles","base","Jyy4pa","Bqenvij","open","Bz10aip","selected","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","a9b677","state","rootStyles","smallStyles","useSmallStyles","defaultRootClassName","useRootDefaultClassName","contentStyles","useContentStyles","indicatorStyles","useIndicatorStyles","iconStyles","useIconStyles","expandIconStyles","density","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,yBAAyB;eAAzBA;;IAyBIC,iCAAiC;eAAjCA;;IAPAC,aAAa;eAAbA;;;uBArBwB;uCAEoE;AACtG,MAAMF,4BAA4B;IACrCG,MAAM;IACNC,MAAM;IACNC,YAAY;IACZC,kBAAkB;AACtB;AACA,MAAMC,sBAAmB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,MAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,UAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAYjB,MAAMjB,gBAAa,WAAA,GAAGM,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAW,QAAA;IAAA;AAAA,GAAA;IAAAD,GAAA;QAAA;KAAA;AAAA;AAOtB,MAAMlB,oCAAqCoB,CAAAA;IAClD;IACA,MAAMC,aAAapB;IACnB,MAAMqB,cAAcC,IAAAA,qCAAc;IAClC,MAAMC,uBAAuBC,IAAAA,8CAAuB;IACpD,MAAMC,gBAAgBC,IAAAA,uCAAgB;IACtC,MAAMC,kBAAkBC,IAAAA,yCAAkB;IAC1C,MAAMC,aAAaC,IAAAA,oCAAa;IAChC,MAAMC,mBAAmB1B;IACzB,MAAM,EAAEO,QAAQ,EAAEF,IAAI,EAAEsB,OAAAA,EAAS,GAAGb;IACpCA,MAAMlB,IAAI,CAACgC,SAAS,GAAGC,IAAAA,mBAAY,EAACpC,0BAA0BG,IAAI,EAAEsB,sBAAsBH,WAAWb,IAAI,EAAEyB,YAAY,WAAWX,YAAYpB,IAAI,EAAEW,YAAYF,SAAS,SAASiB,gBAAgBpB,IAAI,EAAEK,YAAYF,SAAS,SAASe,cAAcb,QAAQ,EAAEO,MAAMlB,IAAI,CAACgC,SAAS;IAClRd,MAAMhB,UAAU,CAAC8B,SAAS,GAAGC,IAAAA,mBAAY,EAACpC,0BAA0BK,UAAU,EAAE4B,iBAAiBxB,IAAI,EAAEY,MAAMT,IAAI,IAAIqB,iBAAiBrB,IAAI,EAAES,MAAMhB,UAAU,CAAC8B,SAAS;IACtK,IAAId,MAAMjB,IAAI,EAAE;QACZiB,MAAMjB,IAAI,CAAC+B,SAAS,GAAGC,IAAAA,mBAAY,EAACpC,0BAA0BI,IAAI,EAAE2B,WAAWtB,IAAI,EAAEK,YAAYiB,WAAWjB,QAAQ,EAAEO,MAAMjB,IAAI,CAAC+B,SAAS;IAC9I;IACA,OAAOd;AACX"}

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

@@ -48,6 +48,7 @@ const useNavSubItemStyles_unstable = (state)=>{
     const indicatorStyles = (0, _sharedNavStylesstyles.useIndicatorStyles)();
     const navSubItemSpecificStyles = useNavSubItemSpecificStyles();
     const { selected, density } = state;
-    state.root.className = (0, _react.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 = (0, _react.mergeClasses)(navSubItemClassNames.root, rootDefaultClassName, isSmallDensity && smallStyles.root, isSmallDensity && navSubItemSpecificStyles.smallBase, navSubItemSpecificStyles.base, selected && indicatorStyles.base, selected && contentStyles.selected, selected && navSubItemSpecificStyles.selectedIndicator, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useNavSubItemStyles.styles.js"],"sourcesContent":["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"],"names":["navSubItemClassNames","useNavSubItemStyles_unstable","root","useNavSubItemSpecificStyles","__styles","base","B1hrpyx","smallBase","selectedIndicator","rjyhj6","d","state","rootDefaultClassName","useRootDefaultClassName","smallStyles","useSmallStyles","contentStyles","useContentStyles","indicatorStyles","useIndicatorStyles","navSubItemSpecificStyles","selected","density","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAoBIC,4BAA4B;eAA5BA;;;uBAtBwB;uCACoE;AACtG,MAAMD,uBAAuB;IAChCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,8BAA2B,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,SAAA;IAAA;IAAAC,WAAA;QAAAD,SAAA;IAAA;IAAAE,mBAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAe7B,MAAMT,+BAAgCU,CAAAA;IAC7C;IACA,MAAMC,uBAAuBC,IAAAA,8CAAuB;IACpD,MAAMC,cAAcC,IAAAA,qCAAc;IAClC,MAAMC,gBAAgBC,IAAAA,uCAAgB;IACtC,MAAMC,kBAAkBC,IAAAA,yCAAkB;IAC1C,MAAMC,2BAA2BjB;IACjC,MAAM,EAAEkB,QAAQ,EAAEC,OAAAA,EAAS,GAAGX;IAC9BA,MAAMT,IAAI,CAACqB,SAAS,GAAGC,IAAAA,mBAAY,EAACxB,qBAAqBE,IAAI,EAAEU,sBAAsBU,YAAY,WAAWR,YAAYZ,IAAI,EAAEoB,YAAY,WAAWF,yBAAyBb,SAAS,EAAEa,yBAAyBf,IAAI,EAAEgB,YAAYH,gBAAgBb,IAAI,EAAEgB,YAAYL,cAAcK,QAAQ,EAAEA,YAAYD,yBAAyBZ,iBAAiB,EAAEG,MAAMT,IAAI,CAACqB,SAAS;IAC1W,OAAOZ;AACX"}
+{"version":3,"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"],"names":["navSubItemClassNames","useNavSubItemStyles_unstable","root","useNavSubItemSpecificStyles","__styles","base","B1hrpyx","smallBase","selectedIndicator","rjyhj6","d","state","rootDefaultClassName","useRootDefaultClassName","smallStyles","useSmallStyles","contentStyles","useContentStyles","indicatorStyles","useIndicatorStyles","navSubItemSpecificStyles","selected","density","isSmallDensity","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAoBIC,4BAA4B;eAA5BA;;;uBAtBwB;uCACoE;AACtG,MAAMD,uBAAuB;IAChCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,8BAA2B,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,SAAA;IAAA;IAAAC,WAAA;QAAAD,SAAA;IAAA;IAAAE,mBAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAe7B,MAAMT,+BAAgCU,CAAAA;IAC7C;IACA,MAAMC,uBAAuBC,IAAAA,8CAAuB;IACpD,MAAMC,cAAcC,IAAAA,qCAAc;IAClC,MAAMC,gBAAgBC,IAAAA,uCAAgB;IACtC,MAAMC,kBAAkBC,IAAAA,yCAAkB;IAC1C,MAAMC,2BAA2BjB;IACjC,MAAM,EAAEkB,QAAQ,EAAEC,OAAAA,EAAS,GAAGX;IAC9B,MAAMY,iBAAiBD,YAAY;IACnCX,MAAMT,IAAI,CAACsB,SAAS,GAAGC,IAAAA,mBAAY,EAACzB,qBAAqBE,IAAI,EAAEU,sBAAsBW,kBAAkBT,YAAYZ,IAAI,EAAEqB,kBAAkBH,yBAAyBb,SAAS,EAAEa,yBAAyBf,IAAI,EAAEgB,YAAYH,gBAAgBb,IAAI,EAAEgB,YAAYL,cAAcK,QAAQ,EAAEA,YAAYD,yBAAyBZ,iBAAiB,EAAEG,MAAMT,IAAI,CAACsB,SAAS;IAChW,OAAOb;AACX"}

package/lib-commonjs/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"}
+{"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"}

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

@@ -12,7 +12,7 @@ const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
 const renderNavSubItemGroup_unstable = (state)=>{
     (0, _reactutilities.assertSlots)(state);
-    return state.open ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
-        children: state.root.children
-    }) : null;
+    return state.collapseMotion ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.collapseMotion, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
 };

package/lib-commonjs/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":["renderNavSubItemGroup_unstable","state","assertSlots","open","_jsx","root","children"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,iCAAiC,CAACC;IAC7CC,IAAAA,2BAAAA,EAAkCD;IAElC,OAAOA,MAAME,IAAI,GAAA,WAAA,GAAGC,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;kBAAEJ,MAAMI,IAAI,CAACC,QAAQ;SAAiB;AACvE"}
+{"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":["renderNavSubItemGroup_unstable","state","assertSlots","collapseMotion","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,iCAAiC,CAACC;IAC7CC,IAAAA,2BAAAA,EAAkCD;IAElC,OAAOA,MAAME,cAAc,GAAA,WAAA,GACzBC,IAAAA,eAAA,EAACH,MAAME,cAAc,EAAA;kBACnB,WAAA,GAAAC,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;uBAGbD,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;AAEf"}

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

@@ -11,22 +11,68 @@ Object.defineProperty(exports, "useNavSubItemGroup_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
+const _reactmotion = require("@fluentui/react-motion");
 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)();
-    // 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 } = (0, _NavContext.useNavContext_unstable)();
     return {
         open,
         components: {
-            root: 'div'
+            root: 'div',
+            collapseMotion: NavGroupMotion
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
             ...props,
             ref
         }), {
             elementType: 'div'
+        }),
+        collapseMotion: (0, _reactmotion.presenceMotionSlot)(props.collapseMotion, {
+            elementType: NavGroupMotion,
+            defaultProps: {
+                visible: open,
+                unmountOnExit: true,
+                items: _react.Children.count(props.children),
+                density
+            }
         })
     };
 };

package/lib-commonjs/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":["useNavSubItemGroup_unstable","props","ref","open","useNavCategoryContext_unstable","components","root","slot","always","getIntrinsicElementProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;gCACwB;oCAEA;AAWxC,MAAMA,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGC,IAAAA,kDAAAA;IAEjB,+DAA+D;IAC/D,0FAA0F;IAC1F,0EAA0E;IAE1E,OAAO;QACLD;QACAE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,GAAGR,KAAK;YACRC;QACF,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF"}
+{"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":["useNavSubItemGroup_unstable","smallSize","largeSize","NavGroupMotion","createPresenceComponent","items","density","isSmallDensity","height","durationPerItem","keyframes","opacity","minHeight","baseDuration","motionTokens","durationFast","maxDuration","durationUltraSlow","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","props","ref","open","useNavCategoryContext_unstable","useNavContext_unstable","components","root","collapseMotion","slot","always","getIntrinsicElementProps","elementType","presenceMotionSlot","defaultProps","visible","unmountOnExit","React","Children","count","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0DaA;;;eAAAA;;;;iEA1DU;gCACwB;6BAC2B;oCAO3B;4BACR;AAEvC,MAAMC,YAAY,IAAI,yBAAyB;AAC/C,MAAMC,YAAY,IAAI,yBAAyB;AAE/C,MAAMC,iBAAiBC,IAAAA,oCAAAA,EAAwB,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAuC;IACrG,MAAMC,iBAAiBD,YAAY;IACnC,MAAME,SAASH,QAASE,iBAAiBF,QAAQJ,YAAYI,QAAQH,YAAa;IAClF,MAAMO,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,eAAeC,yBAAAA,CAAaC,YAAY,GAAG,AAACV,CAAAA,SAAS,CAAA,IAAKI;IAChE,MAAMO,cAAcF,yBAAAA,CAAaG,iBAAiB;IAClD,MAAMC,WAAWL,eAAeG,cAAcA,cAAcH;IAE5D,OAAO;QACLM,OAAO;YACLT;YACAQ;YACAE,QAAQN,yBAAAA,CAAaO,kBAAkB;QACzC;QACAC,MAAM;YACJZ,WAAW;mBAAIA;aAAU,CAACa,OAAO;YACjCL;YACAE,QAAQN,yBAAAA,CAAaU,kBAAkB;QACzC;IACF;AACF;AAWO,MAAMxB,8BAA8B,CACzCyB,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGC,IAAAA,kDAAAA;IACjB,MAAM,EAAEtB,OAAO,EAAE,GAAGuB,IAAAA,kCAAAA;IAEpB,OAAO;QACLF;QACAG,YAAY;YACVC,MAAM;YACNC,gBAAgB7B;QAClB;QAEA4B,MAAME,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,GAAGV,KAAK;YACRC;QACF,IACA;YAAEU,aAAa;QAAM;QAGvBJ,gBAAgBK,IAAAA,+BAAAA,EAAmBZ,MAAMO,cAAc,EAAE;YACvDI,aAAajC;YACbmC,cAAc;gBACZC,SAASZ;gBACTa,eAAe;gBACfnC,OAAOoC,OAAMC,QAAQ,CAACC,KAAK,CAAClB,MAAMmB,QAAQ;gBAC1CtC;YACF;QACF;IACF;AACF"}

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

@@ -23,13 +23,26 @@ const navSubItemGroupClassNames = {
 /**
  * Styles for the root slot
  */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
-    root: {}
-}, {});
+    root: {
+        Bz10aip: "f1yj8dow",
+        B68tc82: 0,
+        Bmxbyg5: 0,
+        Bpg54ce: "f1a3p1vp"
+    }
+}, {
+    d: [
+        ".f1yj8dow{transform:translateZ(0);}",
+        [
+            ".f1a3p1vp{overflow:hidden;}",
+            {
+                p: -1
+            }
+        ]
+    ]
+});
 const useNavSubItemGroupStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
     state.root.className = (0, _react.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-commonjs/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"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"],"names":["navSubItemGroupClassNames","useNavSubItemGroupStyles_unstable","root","useStyles","__styles","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,yBAAyB;eAAzBA;;IAWIC,iCAAiC;eAAjCA;;;uBAZwB;AAClC,MAAMD,4BAA4B;IACrCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA,CAAA;AAAA,GAAA,CAAA;AAMX,MAAMD,oCAAqCI,CAAAA;IAClD;IACA,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,0BAA0BE,IAAI,EAAEI,OAAOJ,IAAI,EAAEG,MAAMH,IAAI,CAACK,SAAS;IACrG,8CAAA;IACA,gFAAA;IACA,OAAOF;AACX"}
+{"version":3,"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"],"names":["navSubItemGroupClassNames","useNavSubItemGroupStyles_unstable","root","useStyles","__styles","Bz10aip","B68tc82","Bmxbyg5","Bpg54ce","d","p","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,yBAAyB;eAAzBA;;IAaIC,iCAAiC;eAAjCA;;;uBAdwB;AAClC,MAAMD,4BAA4B;IACrCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAQX,MAAMT,oCAAqCU,CAAAA;IAClD;IACA,MAAMC,SAAST;IACfQ,MAAMT,IAAI,CAACW,SAAS,GAAGC,IAAAA,mBAAY,EAACd,0BAA0BE,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IACrG,OAAOF;AACX"}

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

@@ -33,6 +33,13 @@ 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
  */ const useSplitNaveItemStyles = /*#__PURE__*/ (0, _react.__styles)({
@@ -53,6 +60,10 @@ const splitNavItemClassNames = {
         Bkqvd7p: "f1e9ux7i",
         Bmy1vo4: "f1xfaukr",
         Jwef8y: "f11oyicx",
+        xwko9w: "f8z0t4e",
+        mcc9px: "f9ueil3",
+        B02v5zz: "f1g2hb8n",
+        i4x37a: "fpq6je",
         ecr2s2: "f9fof1w"
     },
     baseNavItem: {
@@ -79,6 +90,23 @@ const splitNavItemClassNames = {
     },
     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: [
@@ -119,10 +147,32 @@ const splitNavItemClassNames = {
         ".f12pses1{-webkit-padding-start:5px;padding-inline-start:5px;}",
         ".fibmr9j{padding-block-start:5px;}",
         ".f1s2louj{align-items:start;}",
-        ".fjtod8q{padding-block-start:9px;}"
+        ".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);}"
+        ".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);}"
@@ -137,13 +187,13 @@ const useSplitNavItemStyles_unstable = (state)=>{
         state.navItem.className = (0, _react.mergeClasses)(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
     }
     if (state.actionButton) {
-        state.actionButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
+        state.actionButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
     }
     if (state.toggleButton) {
-        state.toggleButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
+        state.toggleButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
     }
     if (state.menuButton) {
-        state.menuButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
+        state.menuButton.className = (0, _react.mergeClasses)(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
     }
     return state;
 };