@fluentui/react-nav 0.0.0-nightly-20250704-0407.1 → 9.0.0

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

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

@@ -24,8 +24,7 @@ const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
 const navCategoryItemClassNames = {
     root: 'fui-NavCategoryItem',
     icon: 'fui-NavCategoryItem__icon',
-    expandIcon: 'fui-NavCategoryItem__expandIcon',
-    expandIconMotion: 'fui-NavCategoryItem__expandIconMotion'
+    expandIcon: 'fui-NavCategoryItem__expandIcon'
 };
 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    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"}
+{"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"}

package/lib-commonjs/components/NavDivider/NavDivider.js

@@ -10,14 +10,15 @@ Object.defineProperty(exports, "NavDivider", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _reactdivider = require("@fluentui/react-divider");
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useNavDivider = require("./useNavDivider");
 const _useNavDividerStylesstyles = require("./useNavDividerStyles.styles");
+const _reactdivider = require("@fluentui/react-divider");
 const NavDivider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useNavDivider.useNavDivider_unstable)(props, ref);
     (0, _useNavDividerStylesstyles.useNavDividerStyles_unstable)(state);
-    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavDividerStyles_unstable')(state);
+    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+    // useCustomStyleHook_unstable('useNavDividerStyles_unstable')(state);
     return (0, _reactdivider.renderDivider_unstable)(state);
 });
 NavDivider.displayName = 'NavDivider';

package/lib-commonjs/components/NavDivider/NavDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDivider/NavDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavDivider_unstable } from './useNavDivider';\nimport { useNavDividerStyles_unstable } from './useNavDividerStyles.styles';\nimport type { NavDividerProps } from './NavDivider.types';\n\n/**\n * NavDivider component - a divider used within navigation components to separate items.\n */\nexport const NavDivider: ForwardRefComponent<NavDividerProps> = React.forwardRef((props, ref) => {\n  const state = useNavDivider_unstable(props, ref);\n\n  useNavDividerStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDividerStyles_unstable')(state);\n\n  return renderDivider_unstable(state);\n});\n\nNavDivider.displayName = 'NavDivider';\n"],"names":["NavDivider","React","forwardRef","props","ref","state","useNavDivider_unstable","useNavDividerStyles_unstable","useCustomStyleHook_unstable","renderDivider_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;8BACgB;qCAEK;+BAEL;2CACM;AAMtC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7BG,IAAAA,gDAAAA,EAA4B,gCAAgCH;IAE5D,OAAOI,IAAAA,oCAAAA,EAAuBJ;AAChC;AAEAL,WAAWU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavDivider/NavDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useNavDivider_unstable } from './useNavDivider';\nimport { useNavDividerStyles_unstable } from './useNavDividerStyles.styles';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { NavDividerProps } from './NavDivider.types';\n\n/**\n * NavDivider component - TODO: add more docs\n */\nexport const NavDivider: ForwardRefComponent<NavDividerProps> = React.forwardRef((props, ref) => {\n  const state = useNavDivider_unstable(props, ref);\n\n  useNavDividerStyles_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useNavDividerStyles_unstable')(state);\n  return renderDivider_unstable(state);\n});\n\nNavDivider.displayName = 'NavDivider';\n"],"names":["NavDivider","React","forwardRef","props","ref","state","useNavDivider_unstable","useNavDividerStyles_unstable","renderDivider_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;+BACgB;2CACM;8BACN;AAQhC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7B,8HAA8H;IAC9H,wGAAwG;IACxG,sEAAsE;IACtE,OAAOG,IAAAA,oCAAAA,EAAuBH;AAChC;AAEAL,WAAWS,WAAW,GAAG"}

package/lib-commonjs/components/NavDrawer/NavDrawer.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, "NavDrawer", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useNavDrawer = require("./useNavDrawer");
 const _renderNavDrawer = require("./renderNavDrawer");
 const _useNavDrawerStylesstyles = require("./useNavDrawerStyles.styles");
@@ -19,7 +18,9 @@ const NavDrawer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useNavDrawer.useNavDrawer_unstable)(props, ref);
     const contextValues = (0, _useNavContextValues.useNavContextValues_unstable)(state);
     (0, _useNavDrawerStylesstyles.useNavDrawerStyles_unstable)(state);
-    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavDrawerStyles_unstable')(state);
+    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+    // useCustomStyleHook_unstable('useNavDrawerStyles_unstable')(state);
     return (0, _renderNavDrawer.renderNavDrawer_unstable)(state, contextValues);
 });
 NavDrawer.displayName = 'NavDrawer';

package/lib-commonjs/components/NavDrawer/NavDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawer/NavDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { useNavDrawer_unstable } from './useNavDrawer';\nimport { renderNavDrawer_unstable } from './renderNavDrawer';\nimport { useNavDrawerStyles_unstable } from './useNavDrawerStyles.styles';\nimport { useNavContextValues_unstable } from '../useNavContextValues';\nimport { NavState } from '../Nav/Nav.types';\nimport type { NavDrawerProps } from './NavDrawer.types';\n\n/**\n * NavDrawer component - a component that provides a drawer for navigation items.\n */\nexport const NavDrawer: ForwardRefComponent<NavDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawer_unstable(props, ref);\n  const contextValues = useNavContextValues_unstable(state as NavState);\n\n  useNavDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerStyles_unstable')(state);\n\n  return renderNavDrawer_unstable(state, contextValues);\n});\n\nNavDrawer.displayName = 'NavDrawer';\n"],"names":["NavDrawer","React","forwardRef","props","ref","state","useNavDrawer_unstable","contextValues","useNavContextValues_unstable","useNavDrawerStyles_unstable","useCustomStyleHook_unstable","renderNavDrawer_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;qCACqB;8BAGN;iCACG;0CACG;qCACC;AAOtC,MAAMA,YAAAA,WAAAA,GAAiDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQC,IAAAA,mCAAAA,EAAsBH,OAAOC;IAC3C,MAAMG,gBAAgBC,IAAAA,iDAAAA,EAA6BH;IAEnDI,IAAAA,qDAAAA,EAA4BJ;IAC5BK,IAAAA,gDAAAA,EAA4B,+BAA+BL;IAE3D,OAAOM,IAAAA,yCAAAA,EAAyBN,OAAOE;AACzC;AAEAP,UAAUY,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavDrawer/NavDrawer.tsx"],"sourcesContent":["import * as React from 'react';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useNavDrawer_unstable } from './useNavDrawer';\nimport { renderNavDrawer_unstable } from './renderNavDrawer';\nimport { useNavDrawerStyles_unstable } from './useNavDrawerStyles.styles';\nimport { useNavContextValues_unstable } from '../useNavContextValues';\nimport { NavState } from '../Nav/Nav.types';\n\nimport type { NavDrawerProps } from './NavDrawer.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * NavDrawer component - TODO: add more docs\n */\nexport const NavDrawer: ForwardRefComponent<NavDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawer_unstable(props, ref);\n  const contextValues = useNavContextValues_unstable(state as NavState);\n\n  useNavDrawerStyles_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useNavDrawerStyles_unstable')(state);\n  return renderNavDrawer_unstable(state, contextValues);\n});\n\nNavDrawer.displayName = 'NavDrawer';\n"],"names":["NavDrawer","React","forwardRef","props","ref","state","useNavDrawer_unstable","contextValues","useNavContextValues_unstable","useNavDrawerStyles_unstable","renderNavDrawer_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;8BAEe;iCACG;0CACG;qCACC;AAStC,MAAMA,YAAAA,WAAAA,GAAiDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQC,IAAAA,mCAAAA,EAAsBH,OAAOC;IAC3C,MAAMG,gBAAgBC,IAAAA,iDAAAA,EAA6BH;IAEnDI,IAAAA,qDAAAA,EAA4BJ;IAC5B,8HAA8H;IAC9H,wGAAwG;IACxG,qEAAqE;IACrE,OAAOK,IAAAA,yCAAAA,EAAyBL,OAAOE;AACzC;AAEAP,UAAUW,WAAW,GAAG"}

package/lib-commonjs/components/NavDrawerBody/NavDrawerBody.js

@@ -11,13 +11,14 @@ Object.defineProperty(exports, "NavDrawerBody", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactdrawer = require("@fluentui/react-drawer");
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useNavDrawerBody = require("./useNavDrawerBody");
 const _useNavDrawerBodyStylesstyles = require("./useNavDrawerBodyStyles.styles");
 const NavDrawerBody = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useNavDrawerBody.useNavDrawerBody_unstable)(props, ref);
     (0, _useNavDrawerBodyStylesstyles.useNavDrawerBodyStyles_unstable)(state);
-    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavDrawerBodyStyles_unstable')(state);
+    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+    // useCustomStyleHook_unstable('useNavDrawerBodyStyles_unstable')(state);
     return (0, _reactdrawer.renderDrawerBody_unstable)(state);
 });
 NavDrawerBody.displayName = 'NavDrawerBody';

package/lib-commonjs/components/NavDrawerBody/NavDrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerBody/NavDrawerBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderDrawerBody_unstable } from '@fluentui/react-drawer';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavDrawerBody_unstable } from './useNavDrawerBody';\nimport { useNavDrawerBodyStyles_unstable } from './useNavDrawerBodyStyles.styles';\nimport type { NavDrawerBodyProps } from './NavDrawerBody.types';\n\n/**\n * NavDrawerBody component\n */\nexport const NavDrawerBody: ForwardRefComponent<NavDrawerBodyProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawerBody_unstable(props, ref);\n\n  useNavDrawerBodyStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerBodyStyles_unstable')(state);\n\n  return renderDrawerBody_unstable(state);\n});\n\nNavDrawerBody.displayName = 'NavDrawerBody';\n"],"names":["NavDrawerBody","React","forwardRef","props","ref","state","useNavDrawerBody_unstable","useNavDrawerBodyStyles_unstable","useCustomStyleHook_unstable","renderDrawerBody_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;6BACmB;qCAEE;kCAEF;8CACM;AAMzC,MAAMA,gBAAAA,WAAAA,GAAyDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQC,IAAAA,2CAAAA,EAA0BH,OAAOC;IAE/CG,IAAAA,6DAAAA,EAAgCF;IAChCG,IAAAA,gDAAAA,EAA4B,mCAAmCH;IAE/D,OAAOI,IAAAA,sCAAAA,EAA0BJ;AACnC;AAEAL,cAAcU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavDrawerBody/NavDrawerBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderDrawerBody_unstable } from '@fluentui/react-drawer';\nimport { useNavDrawerBody_unstable } from './useNavDrawerBody';\nimport { useNavDrawerBodyStyles_unstable } from './useNavDrawerBodyStyles.styles';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { NavDrawerBodyProps } from './NavDrawerBody.types';\n\n/**\n * NavDrawerBody component\n */\nexport const NavDrawerBody: ForwardRefComponent<NavDrawerBodyProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawerBody_unstable(props, ref);\n\n  useNavDrawerBodyStyles_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useNavDrawerBodyStyles_unstable')(state);\n  return renderDrawerBody_unstable(state);\n});\n\nNavDrawerBody.displayName = 'NavDrawerBody';\n"],"names":["NavDrawerBody","React","forwardRef","props","ref","state","useNavDrawerBody_unstable","useNavDrawerBodyStyles_unstable","renderDrawerBody_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;6BACmB;kCACA;8CACM;AAQzC,MAAMA,gBAAAA,WAAAA,GAAyDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQC,IAAAA,2CAAAA,EAA0BH,OAAOC;IAE/CG,IAAAA,6DAAAA,EAAgCF;IAChC,8HAA8H;IAC9H,wGAAwG;IACxG,yEAAyE;IACzE,OAAOG,IAAAA,sCAAAA,EAA0BH;AACnC;AAEAL,cAAcS,WAAW,GAAG"}

package/lib-commonjs/components/NavDrawerFooter/NavDrawerFooter.js

@@ -11,13 +11,14 @@ Object.defineProperty(exports, "NavDrawerFooter", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactdrawer = require("@fluentui/react-drawer");
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useNavDrawerFooter = require("./useNavDrawerFooter");
 const _useNavDrawerFooterStylesstyles = require("./useNavDrawerFooterStyles.styles");
 const NavDrawerFooter = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useNavDrawerFooter.useNavDrawerFooter_unstable)(props, ref);
     (0, _useNavDrawerFooterStylesstyles.useNavDrawerFooterStyles_unstable)(state);
-    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavDrawerFooterStyles_unstable')(state);
+    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+    // useCustomStyleHook_unstable('useNavDrawerFooterStyles_unstable')(state);
     return (0, _reactdrawer.renderDrawerFooter_unstable)(state);
 });
 NavDrawerFooter.displayName = 'NavDrawerFooter';

package/lib-commonjs/components/NavDrawerFooter/NavDrawerFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerFooter/NavDrawerFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderDrawerFooter_unstable } from '@fluentui/react-drawer';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavDrawerFooter_unstable } from './useNavDrawerFooter';\nimport { useNavDrawerFooterStyles_unstable } from './useNavDrawerFooterStyles.styles';\nimport type { NavDrawerFooterProps } from './NavDrawerFooter.types';\n\n/**\n * NavDrawerFooter component\n */\nexport const NavDrawerFooter: ForwardRefComponent<NavDrawerFooterProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawerFooter_unstable(props, ref);\n\n  useNavDrawerFooterStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerFooterStyles_unstable')(state);\n\n  return renderDrawerFooter_unstable(state);\n});\n\nNavDrawerFooter.displayName = 'NavDrawerFooter';\n"],"names":["NavDrawerFooter","React","forwardRef","props","ref","state","useNavDrawerFooter_unstable","useNavDrawerFooterStyles_unstable","useCustomStyleHook_unstable","renderDrawerFooter_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;6BACqB;qCAEA;oCAEA;gDACM;AAM3C,MAAMA,kBAAAA,WAAAA,GAA6DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQC,IAAAA,+CAAAA,EAA4BH,OAAOC;IAEjDG,IAAAA,iEAAAA,EAAkCF;IAClCG,IAAAA,gDAAAA,EAA4B,qCAAqCH;IAEjE,OAAOI,IAAAA,wCAAAA,EAA4BJ;AACrC;AAEAL,gBAAgBU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavDrawerFooter/NavDrawerFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderDrawerFooter_unstable } from '@fluentui/react-drawer';\nimport { useNavDrawerFooter_unstable } from './useNavDrawerFooter';\nimport { useNavDrawerFooterStyles_unstable } from './useNavDrawerFooterStyles.styles';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { NavDrawerFooterProps } from './NavDrawerFooter.types';\n\n/**\n * NavDrawerFooter component\n */\nexport const NavDrawerFooter: ForwardRefComponent<NavDrawerFooterProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawerFooter_unstable(props, ref);\n\n  useNavDrawerFooterStyles_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useNavDrawerFooterStyles_unstable')(state);\n  return renderDrawerFooter_unstable(state);\n});\n\nNavDrawerFooter.displayName = 'NavDrawerFooter';\n"],"names":["NavDrawerFooter","React","forwardRef","props","ref","state","useNavDrawerFooter_unstable","useNavDrawerFooterStyles_unstable","renderDrawerFooter_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;6BACqB;oCACA;gDACM;AAQ3C,MAAMA,kBAAAA,WAAAA,GAA6DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQC,IAAAA,+CAAAA,EAA4BH,OAAOC;IAEjDG,IAAAA,iEAAAA,EAAkCF;IAClC,8HAA8H;IAC9H,wGAAwG;IACxG,2EAA2E;IAC3E,OAAOG,IAAAA,wCAAAA,EAA4BH;AACrC;AAEAL,gBAAgBS,WAAW,GAAG"}

package/lib-commonjs/components/NavDrawerHeader/NavDrawerHeader.js

@@ -10,14 +10,15 @@ Object.defineProperty(exports, "NavDrawerHeader", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _reactdrawer = require("@fluentui/react-drawer");
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
-const _useNavDrawerHeaderStylesstyles = require("./useNavDrawerHeaderStyles.styles");
 const _useNavDrawerHeader = require("./useNavDrawerHeader");
+const _useNavDrawerHeaderStylesstyles = require("./useNavDrawerHeaderStyles.styles");
+const _reactdrawer = require("@fluentui/react-drawer");
 const NavDrawerHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useNavDrawerHeader.useNavDrawerHeader_unstable)(props, ref);
     (0, _useNavDrawerHeaderStylesstyles.useNavDrawerHeaderStyles_unstable)(state);
-    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavDrawerHeaderStyles_unstable')(state);
+    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+    // useCustomStyleHook_unstable('useNavDrawerHeaderStyles_unstable')(state);
     return (0, _reactdrawer.renderDrawerHeader_unstable)(state);
 });
 NavDrawerHeader.displayName = 'NavDrawerHeader';

package/lib-commonjs/components/NavDrawerHeader/NavDrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavDrawerHeader/NavDrawerHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderDrawerHeader_unstable } from '@fluentui/react-drawer';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { useNavDrawerHeaderStyles_unstable } from './useNavDrawerHeaderStyles.styles';\nimport { useNavDrawerHeader_unstable } from './useNavDrawerHeader';\nimport type { NavDrawerHeaderProps } from './NavDrawerHeader.types';\n\n/**\n * NavDrawerHeader component\n */\nexport const NavDrawerHeader: ForwardRefComponent<NavDrawerHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawerHeader_unstable(props, ref);\n\n  useNavDrawerHeaderStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerHeaderStyles_unstable')(state);\n\n  return renderDrawerHeader_unstable(state);\n});\n\nNavDrawerHeader.displayName = 'NavDrawerHeader';\n"],"names":["NavDrawerHeader","React","forwardRef","props","ref","state","useNavDrawerHeader_unstable","useNavDrawerHeaderStyles_unstable","useCustomStyleHook_unstable","renderDrawerHeader_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;6BACqB;qCACA;gDAGM;oCACN;AAMrC,MAAMA,kBAAAA,WAAAA,GAA6DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQC,IAAAA,+CAAAA,EAA4BH,OAAOC;IAEjDG,IAAAA,iEAAAA,EAAkCF;IAClCG,IAAAA,gDAAAA,EAA4B,qCAAqCH;IAEjE,OAAOI,IAAAA,wCAAAA,EAA4BJ;AACrC;AAEAL,gBAAgBU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavDrawerHeader/NavDrawerHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useNavDrawerHeader_unstable } from './useNavDrawerHeader';\nimport { useNavDrawerHeaderStyles_unstable } from './useNavDrawerHeaderStyles.styles';\nimport { renderDrawerHeader_unstable } from '@fluentui/react-drawer';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { NavDrawerHeaderProps } from './NavDrawerHeader.types';\n\n/**\n * NavDrawerHeader component\n */\nexport const NavDrawerHeader: ForwardRefComponent<NavDrawerHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawerHeader_unstable(props, ref);\n\n  useNavDrawerHeaderStyles_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useNavDrawerHeaderStyles_unstable')(state);\n  return renderDrawerHeader_unstable(state);\n});\n\nNavDrawerHeader.displayName = 'NavDrawerHeader';\n"],"names":["NavDrawerHeader","React","forwardRef","props","ref","state","useNavDrawerHeader_unstable","useNavDrawerHeaderStyles_unstable","renderDrawerHeader_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;oCACqB;gDACM;6BACN;AAQrC,MAAMA,kBAAAA,WAAAA,GAA6DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQC,IAAAA,+CAAAA,EAA4BH,OAAOC;IAEjDG,IAAAA,iEAAAA,EAAkCF;IAClC,8HAA8H;IAC9H,wGAAwG;IACxG,2EAA2E;IAC3E,OAAOG,IAAAA,wCAAAA,EAA4BH;AACrC;AAEAL,gBAAgBS,WAAW,GAAG"}

package/lib-commonjs/components/NavItem/NavItem.js

@@ -10,14 +10,15 @@ Object.defineProperty(exports, "NavItem", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useNavItem = require("./useNavItem");
 const _renderNavItem = require("./renderNavItem");
 const _useNavItemStylesstyles = require("./useNavItemStyles.styles");
 const NavItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useNavItem.useNavItem_unstable)(props, ref);
     (0, _useNavItemStylesstyles.useNavItemStyles_unstable)(state);
-    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavItemStyles_unstable')(state);
+    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+    // useCustomStyleHook_unstable('useNavItemStyles_unstable')(state);
     return (0, _renderNavItem.renderNavItem_unstable)(state);
 });
 NavItem.displayName = 'NavItem';

package/lib-commonjs/components/NavItem/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavItem/NavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavItem_unstable } from './useNavItem';\nimport { renderNavItem_unstable } from './renderNavItem';\nimport { useNavItemStyles_unstable } from './useNavItemStyles.styles';\nimport type { NavItemProps } from './NavItem.types';\n\n/**\n * NavItem component - a single item in the navigation menu.\n */\nexport const NavItem: ForwardRefComponent<NavItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavItem_unstable(props, ref);\n\n  useNavItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavItemStyles_unstable')(state);\n\n  return renderNavItem_unstable(state);\n});\n\nNavItem.displayName = 'NavItem';\n"],"names":["NavItem","React","forwardRef","props","ref","state","useNavItem_unstable","useNavItemStyles_unstable","useCustomStyleHook_unstable","renderNavItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qCAEqB;4BAER;+BACG;wCACG;AAMnC,MAAMA,UAAAA,WAAAA,GAA6CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAoBH,OAAOC;IAEzCG,IAAAA,iDAAAA,EAA0BF;IAC1BG,IAAAA,gDAAAA,EAA4B,6BAA6BH;IAEzD,OAAOI,IAAAA,qCAAAA,EAAuBJ;AAChC;AAEAL,QAAQU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavItem/NavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useNavItem_unstable } from './useNavItem';\nimport { renderNavItem_unstable } from './renderNavItem';\nimport { useNavItemStyles_unstable } from './useNavItemStyles.styles';\nimport type { NavItemProps } from './NavItem.types';\n\n/**\n * NavItem component - TODO: add more docs\n */\nexport const NavItem: ForwardRefComponent<NavItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavItem_unstable(props, ref);\n\n  useNavItemStyles_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useNavItemStyles_unstable')(state);\n  return renderNavItem_unstable(state);\n});\n\nNavItem.displayName = 'NavItem';\n"],"names":["NavItem","React","forwardRef","props","ref","state","useNavItem_unstable","useNavItemStyles_unstable","renderNavItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;4BAGa;+BACG;wCACG;AAMnC,MAAMA,UAAAA,WAAAA,GAA6CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAoBH,OAAOC;IAEzCG,IAAAA,iDAAAA,EAA0BF;IAC1B,8HAA8H;IAC9H,wGAAwG;IACxG,mEAAmE;IACnE,OAAOG,IAAAA,qCAAAA,EAAuBH;AAChC;AAEAL,QAAQS,WAAW,GAAG"}

package/lib-commonjs/components/NavSectionHeader/NavSectionHeader.js

@@ -10,14 +10,15 @@ Object.defineProperty(exports, "NavSectionHeader", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useNavSectionHeader = require("./useNavSectionHeader");
 const _renderNavSectionHeader = require("./renderNavSectionHeader");
 const _useNavSectionHeaderStylesstyles = require("./useNavSectionHeaderStyles.styles");
 const NavSectionHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useNavSectionHeader.useNavSectionHeader_unstable)(props, ref);
     (0, _useNavSectionHeaderStylesstyles.useNavSectionHeaderStyles_unstable)(state);
-    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavSectionHeaderStyles_unstable')(state);
+    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+    // useCustomStyleHook_unstable('useNavSectionHeaderStyles_unstable')(state);
     return (0, _renderNavSectionHeader.renderNavSectionHeader_unstable)(state);
 });
 NavSectionHeader.displayName = 'NavSectionHeader';

package/lib-commonjs/components/NavSectionHeader/NavSectionHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSectionHeader/NavSectionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavSectionHeader_unstable } from './useNavSectionHeader';\nimport { renderNavSectionHeader_unstable } from './renderNavSectionHeader';\nimport { useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';\nimport type { NavSectionHeaderProps } from './NavSectionHeader.types';\n\n/**\n * NavSectionHeader component\n */\nexport const NavSectionHeader: ForwardRefComponent<NavSectionHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useNavSectionHeader_unstable(props, ref);\n\n  useNavSectionHeaderStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavSectionHeaderStyles_unstable')(state);\n\n  return renderNavSectionHeader_unstable(state);\n});\n\nNavSectionHeader.displayName = 'NavSectionHeader';\n"],"names":["NavSectionHeader","React","forwardRef","props","ref","state","useNavSectionHeader_unstable","useNavSectionHeaderStyles_unstable","useCustomStyleHook_unstable","renderNavSectionHeader_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qCAEqB;qCAEC;wCACG;iDACG;AAM5C,MAAMA,mBAAAA,WAAAA,GAA+DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQC,IAAAA,iDAAAA,EAA6BH,OAAOC;IAElDG,IAAAA,mEAAAA,EAAmCF;IACnCG,IAAAA,gDAAAA,EAA4B,sCAAsCH;IAElE,OAAOI,IAAAA,uDAAAA,EAAgCJ;AACzC;AAEAL,iBAAiBU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavSectionHeader/NavSectionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useNavSectionHeader_unstable } from './useNavSectionHeader';\nimport { renderNavSectionHeader_unstable } from './renderNavSectionHeader';\nimport { useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';\nimport type { NavSectionHeaderProps } from './NavSectionHeader.types';\n\n/**\n * NavSectionHeader component\n */\nexport const NavSectionHeader: ForwardRefComponent<NavSectionHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useNavSectionHeader_unstable(props, ref);\n\n  useNavSectionHeaderStyles_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useNavSectionHeaderStyles_unstable')(state);\n  return renderNavSectionHeader_unstable(state);\n});\n\nNavSectionHeader.displayName = 'NavSectionHeader';\n"],"names":["NavSectionHeader","React","forwardRef","props","ref","state","useNavSectionHeader_unstable","useNavSectionHeaderStyles_unstable","renderNavSectionHeader_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;qCAEsB;wCACG;iDACG;AAM5C,MAAMA,mBAAAA,WAAAA,GAA+DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQC,IAAAA,iDAAAA,EAA6BH,OAAOC;IAElDG,IAAAA,mEAAAA,EAAmCF;IACnC,8HAA8H;IAC9H,wGAAwG;IACxG,4EAA4E;IAC5E,OAAOG,IAAAA,uDAAAA,EAAgCH;AACzC;AAEAL,iBAAiBS,WAAW,GAAG"}

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

@@ -10,14 +10,15 @@ Object.defineProperty(exports, "NavSubItem", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useNavSubItem = require("./useNavSubItem");
 const _renderNavSubItem = require("./renderNavSubItem");
 const _useNavSubItemStylesstyles = require("./useNavSubItemStyles.styles");
 const NavSubItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useNavSubItem.useNavSubItem_unstable)(props, ref);
     (0, _useNavSubItemStylesstyles.useNavSubItemStyles_unstable)(state);
-    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavSubItemStyles_unstable')(state);
+    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+    // useCustomStyleHook_unstable('useNavSubItemStyles_unstable')(state);
     return (0, _renderNavSubItem.renderNavSubItem_unstable)(state);
 });
 NavSubItem.displayName = 'NavSubItem';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItem/NavSubItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavSubItem_unstable } from './useNavSubItem';\nimport { renderNavSubItem_unstable } from './renderNavSubItem';\nimport { useNavSubItemStyles_unstable } from './useNavSubItemStyles.styles';\nimport type { NavSubItemProps } from './NavSubItem.types';\n\n/**\n * NavSubItem component - a sub-item within a navigation structure.\n */\nexport const NavSubItem: ForwardRefComponent<NavSubItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavSubItem_unstable(props, ref);\n\n  useNavSubItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavSubItemStyles_unstable')(state);\n\n  return renderNavSubItem_unstable(state);\n});\n\nNavSubItem.displayName = 'NavSubItem';\n"],"names":["NavSubItem","React","forwardRef","props","ref","state","useNavSubItem_unstable","useNavSubItemStyles_unstable","useCustomStyleHook_unstable","renderNavSubItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qCAEqB;+BAEL;kCACG;2CACG;AAMtC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7BG,IAAAA,gDAAAA,EAA4B,gCAAgCH;IAE5D,OAAOI,IAAAA,2CAAAA,EAA0BJ;AACnC;AAEAL,WAAWU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavSubItem/NavSubItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useNavSubItem_unstable } from './useNavSubItem';\nimport { renderNavSubItem_unstable } from './renderNavSubItem';\nimport { useNavSubItemStyles_unstable } from './useNavSubItemStyles.styles';\nimport type { NavSubItemProps } from './NavSubItem.types';\n\n/**\n * NavSubItem component - TODO: add more docs\n */\nexport const NavSubItem: ForwardRefComponent<NavSubItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavSubItem_unstable(props, ref);\n\n  useNavSubItemStyles_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useNavSubItemStyles_unstable')(state);\n  return renderNavSubItem_unstable(state);\n});\n\nNavSubItem.displayName = 'NavSubItem';\n"],"names":["NavSubItem","React","forwardRef","props","ref","state","useNavSubItem_unstable","useNavSubItemStyles_unstable","renderNavSubItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;+BAGgB;kCACG;2CACG;AAMtC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7B,8HAA8H;IAC9H,wGAAwG;IACxG,sEAAsE;IACtE,OAAOG,IAAAA,2CAAAA,EAA0BH;AACnC;AAEAL,WAAWS,WAAW,GAAG"}

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

@@ -48,7 +48,6 @@ const useNavSubItemStyles_unstable = (state)=>{
     const indicatorStyles = (0, _sharedNavStylesstyles.useIndicatorStyles)();
     const navSubItemSpecificStyles = useNavSubItemSpecificStyles();
     const { selected, density } = state;
-    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);
+    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);
     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    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"}
+{"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"}

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

@@ -10,14 +10,15 @@ Object.defineProperty(exports, "NavSubItemGroup", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useNavSubItemGroup = require("./useNavSubItemGroup");
 const _renderNavSubItemGroup = require("./renderNavSubItemGroup");
 const _useNavSubItemGroupStylesstyles = require("./useNavSubItemGroupStyles.styles");
 const NavSubItemGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useNavSubItemGroup.useNavSubItemGroup_unstable)(props, ref);
     (0, _useNavSubItemGroupStylesstyles.useNavSubItemGroupStyles_unstable)(state);
-    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavSubItemGroupStyles_unstable')(state);
+    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
+    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
+    // useCustomStyleHook_unstable('useNavSubItemGroupStyles_unstable')(state);
     return (0, _renderNavSubItemGroup.renderNavSubItemGroup_unstable)(state);
 });
 NavSubItemGroup.displayName = 'NavSubItemGroup';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavSubItemGroup_unstable } from './useNavSubItemGroup';\nimport { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';\nimport { useNavSubItemGroupStyles_unstable } from './useNavSubItemGroupStyles.styles';\nimport type { NavSubItemGroupProps } from './NavSubItemGroup.types';\n\n/**\n * NavSubItemGroup component - a group of sub-items within a navigation structure.\n */\nexport const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps> = React.forwardRef((props, ref) => {\n  const state = useNavSubItemGroup_unstable(props, ref);\n\n  useNavSubItemGroupStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavSubItemGroupStyles_unstable')(state);\n\n  return renderNavSubItemGroup_unstable(state);\n});\n\nNavSubItemGroup.displayName = 'NavSubItemGroup';\n"],"names":["NavSubItemGroup","React","forwardRef","props","ref","state","useNavSubItemGroup_unstable","useNavSubItemGroupStyles_unstable","useCustomStyleHook_unstable","renderNavSubItemGroup_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qCAEqB;oCAEA;uCACG;gDACG;AAM3C,MAAMA,kBAAAA,WAAAA,GAA6DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQC,IAAAA,+CAAAA,EAA4BH,OAAOC;IAEjDG,IAAAA,iEAAAA,EAAkCF;IAClCG,IAAAA,gDAAAA,EAA4B,qCAAqCH;IAEjE,OAAOI,IAAAA,qDAAAA,EAA+BJ;AACxC;AAEAL,gBAAgBU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useNavSubItemGroup_unstable } from './useNavSubItemGroup';\nimport { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';\nimport { useNavSubItemGroupStyles_unstable } from './useNavSubItemGroupStyles.styles';\nimport type { NavSubItemGroupProps } from './NavSubItemGroup.types';\n\n/**\n * NavSubItemGroup component - TODO: add more docs\n */\nexport const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps> = React.forwardRef((props, ref) => {\n  const state = useNavSubItemGroup_unstable(props, ref);\n\n  useNavSubItemGroupStyles_unstable(state);\n  // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n  // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n  // useCustomStyleHook_unstable('useNavSubItemGroupStyles_unstable')(state);\n  return renderNavSubItemGroup_unstable(state);\n});\n\nNavSubItemGroup.displayName = 'NavSubItemGroup';\n"],"names":["NavSubItemGroup","React","forwardRef","props","ref","state","useNavSubItemGroup_unstable","useNavSubItemGroupStyles_unstable","renderNavSubItemGroup_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;oCAGqB;uCACG;gDACG;AAM3C,MAAMA,kBAAAA,WAAAA,GAA6DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQC,IAAAA,+CAAAA,EAA4BH,OAAOC;IAEjDG,IAAAA,iEAAAA,EAAkCF;IAClC,8HAA8H;IAC9H,wGAAwG;IACxG,2EAA2E;IAC3E,OAAOG,IAAAA,qDAAAA,EAA+BH;AACxC;AAEAL,gBAAgBS,WAAW,GAAG"}

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

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

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.collapseMotion ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.collapseMotion, {
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
-    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
+    return state.open ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
+        children: state.root.children
+    }) : null;
 };

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

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

@@ -11,68 +11,22 @@ 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)();
-    const { density } = (0, _NavContext.useNavContext_unstable)();
+    // copied over from accordion. todo - figure out how to handle.
+    // const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });
+    // const navigation = useAccordionContext_unstable(ctx => ctx.navigation);
     return {
         open,
         components: {
-            root: 'div',
-            collapseMotion: NavGroupMotion
+            root: 'div'
         },
         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 { 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"}
+{"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"}

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

@@ -23,26 +23,13 @@ const navSubItemGroupClassNames = {
 /**
  * Styles for the root slot
  */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
-    root: {
-        Bz10aip: "f1yj8dow",
-        B68tc82: 0,
-        Bmxbyg5: 0,
-        Bpg54ce: "f1a3p1vp"
-    }
-}, {
-    d: [
-        ".f1yj8dow{transform:translateZ(0);}",
-        [
-            ".f1a3p1vp{overflow:hidden;}",
-            {
-                p: -1
-            }
-        ]
-    ]
-});
+    root: {}
+}, {});
 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        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"}
+{"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"}