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

package/CHANGELOG.md

@@ -1,128 +1,12 @@
 # Change Log - @fluentui/react-nav
 
-This log was last generated on Fri, 04 Jul 2025 04:23:43 GMT and should not be manually modified.
+This log was last generated on Wed, 11 Jun 2025 22:29:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20250704-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v0.0.0-nightly-20250704-0407.1)
-
-Fri, 04 Jul 2025 04:23:43 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.2.1..@fluentui/react-nav_v0.0.0-nightly-20250704-0407.1)
-
-### Changes
-
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-aria to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
-- Bump @fluentui/react-button to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
-- Bump @fluentui/react-context-selector to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
-- Bump @fluentui/react-divider to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
-- Bump @fluentui/react-drawer to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
-- Bump @fluentui/react-motion to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
-- Bump @fluentui/react-tooltip to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
-
-## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.2.1)
-
-Fri, 27 Jun 2025 13:39:40 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.2.0..@fluentui/react-nav_v9.2.1)
-
-### Patches
-
-- fix: move action button to be the first button ([PR #34718](https://github.com/microsoft/fluentui/pull/34718) by marcosvmmoura@gmail.com)
-- Bump @fluentui/react-aria to v9.15.3 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
-- Bump @fluentui/react-button to v9.5.3 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
-- Bump @fluentui/react-drawer to v9.8.5 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
-- Bump @fluentui/react-tabster to v9.25.3 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
-- Bump @fluentui/react-tooltip to v9.7.5 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
-
-## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.2.0)
-
-Thu, 26 Jun 2025 14:11:54 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.1.3..@fluentui/react-nav_v9.2.0)
-
-### Minor changes
-
-- feat: add motion to nav components ([PR #34632](https://github.com/microsoft/fluentui/pull/34632) by marcosvmmoura@gmail.com)
-- Bump @fluentui/react-aria to v9.15.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
-- Bump @fluentui/react-button to v9.5.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
-- Bump @fluentui/react-context-selector to v9.2.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
-- Bump @fluentui/react-divider to v9.3.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
-- Bump @fluentui/react-drawer to v9.8.4 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.1.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
-- Bump @fluentui/react-motion to v9.9.0 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
-- Bump @fluentui/react-tabster to v9.25.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
-- Bump @fluentui/react-tooltip to v9.7.4 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
-- Bump @fluentui/react-utilities to v9.22.0 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
-
-### Patches
-
-- fix: only display actions on hover ([PR #34634](https://github.com/microsoft/fluentui/pull/34634) by marcosvmmoura@gmail.com)
-
-## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.1.3)
-
-Mon, 23 Jun 2025 15:49:48 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.1.2..@fluentui/react-nav_v9.1.3)
-
-### Patches
-
-- Bump @fluentui/react-tooltip to v9.7.3 ([PR #34677](https://github.com/microsoft/fluentui/pull/34677) by beachball)
-- Bump @fluentui/react-drawer to v9.8.3 ([PR #34677](https://github.com/microsoft/fluentui/pull/34677) by beachball)
-
-## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.1.2)
-
-Wed, 18 Jun 2025 17:33:58 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.1.1..@fluentui/react-nav_v9.1.2)
-
-### Patches
-
-- feat: add support for custom style hooks ([PR #34633](https://github.com/microsoft/fluentui/pull/34633) by marcosvmmoura@gmail.com)
-- Bump @fluentui/react-aria to v9.15.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
-- Bump @fluentui/react-button to v9.5.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
-- Bump @fluentui/react-tooltip to v9.7.2 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
-- Bump @fluentui/react-context-selector to v9.2.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
-- Bump @fluentui/react-divider to v9.3.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
-- Bump @fluentui/react-drawer to v9.8.2 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.1.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.24.0 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
-- Bump @fluentui/react-tabster to v9.25.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
-- Bump @fluentui/react-utilities to v9.21.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
-
-## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.1.1)
-
-Fri, 13 Jun 2025 12:32:53 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.1.0..@fluentui/react-nav_v9.1.1)
-
-### Patches
-
-- Bump @fluentui/react-tooltip to v9.7.1 ([PR #34639](https://github.com/microsoft/fluentui/pull/34639) by beachball)
-- Bump @fluentui/react-drawer to v9.8.1 ([PR #34639](https://github.com/microsoft/fluentui/pull/34639) by beachball)
-
-## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.1.0)
-
-Thu, 12 Jun 2025 09:43:33 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.0.0..@fluentui/react-nav_v9.1.0)
-
-### Minor changes
-
-- Bump @fluentui/react-aria to v9.15.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
-- Bump @fluentui/react-button to v9.5.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
-- Bump @fluentui/react-tooltip to v9.7.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
-- Bump @fluentui/react-context-selector to v9.2.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
-- Bump @fluentui/react-divider to v9.3.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
-- Bump @fluentui/react-drawer to v9.8.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.1.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
-- Bump @fluentui/react-tabster to v9.25.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
-- Bump @fluentui/react-utilities to v9.21.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
-
 ## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.0.0)
 
-Wed, 11 Jun 2025 22:31:57 GMT 
+Wed, 11 Jun 2025 22:29:15 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav-preview_v0.13.9..@fluentui/react-nav_v9.0.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -26,7 +26,6 @@ import { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { InlineDrawerSlots } from '@fluentui/react-drawer';
 import { MenuButtonProps } from '@fluentui/react-button';
-import { PresenceMotionSlotProps } from '@fluentui/react-motion';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
@@ -34,7 +33,7 @@ import { ToggleButtonProps } from '@fluentui/react-button';
 import type { TooltipProps } from '@fluentui/react-tooltip';
 
 /**
- * AppItem component - Application item in the navigation menu.
+ * AppItem component - TODO: add more docs
  */
 export declare const AppItem: ForwardRefComponent<AppItemProps>;
 
@@ -71,7 +70,7 @@ export declare type AppItemState = ComponentState<AppItemSlots> & {
 };
 
 /**
- * AppItemStatic component - Static application item in the navigation menu.
+ * AppItemStatic component - TODO: add more docs
  */
 export declare const AppItemStatic: ForwardRefComponent<AppItemStaticProps>;
 
@@ -106,7 +105,7 @@ export declare type AppItemStaticState = ComponentState<AppItemStaticSlots> & {
 };
 
 /**
- * Hamburger component - a button that toggles a menu or navigation drawer.
+ * Hamburger component - TODO: add more docs
  */
 export declare const Hamburger: ForwardRefComponent<HamburgerProps>;
 
@@ -128,7 +127,7 @@ export declare type HamburgerState = ButtonState;
 export declare const Nav: ForwardRefComponent<NavProps>;
 
 /**
- * NavCategory component - a category in the navigation menu that can contain multiple items.
+ * NavCategory component - TODO: add more docs
  */
 export declare const NavCategory: ForwardRefComponent<NavCategoryProps>;
 
@@ -179,10 +178,6 @@ export declare type NavCategoryItemSlots = {
      * Expand icon slot rendered after the content to indicate an open and closed state.
      */
     expandIcon: NonNullable<Slot<'span'>>;
-    /**
-     * Expand icon motion slot.
-     */
-    expandIconMotion?: Slot<PresenceMotionSlotProps>;
 };
 
 /**
@@ -275,7 +270,7 @@ export declare type NavContextValues = {
 export declare type NavDensity = 'small' | 'medium';
 
 /**
- * NavDivider component - a divider used within navigation components to separate items.
+ * NavDivider component - TODO: add more docs
  */
 export declare const NavDivider: ForwardRefComponent<NavDividerProps>;
 
@@ -292,7 +287,7 @@ export declare type NavDividerProps = DividerProps;
 export declare type NavDividerState = DividerState;
 
 /**
- * NavDrawer component - a component that provides a drawer for navigation items.
+ * NavDrawer component - TODO: add more docs
  */
 export declare const NavDrawer: ForwardRefComponent<NavDrawerProps>;
 
@@ -385,7 +380,7 @@ export declare type NavDrawerState = DrawerState & NavContextValue & {
 };
 
 /**
- * NavItem component - a single item in the navigation menu.
+ * NavItem component - TODO: add more docs
  */
 export declare const NavItem: ForwardRefComponent<NavItemProps>;
 
@@ -542,32 +537,18 @@ export declare type NavSlots = {
 export declare type NavState = ComponentState<NavSlots> & NavContextValue;
 
 /**
- * NavSubItem component - a sub-item within a navigation structure.
+ * NavSubItem component - TODO: add more docs
  */
 export declare const NavSubItem: ForwardRefComponent<NavSubItemProps>;
 
 export declare const navSubItemClassNames: SlotClassNames<NavSubItemSlots>;
 
 /**
- * NavSubItemGroup component - a group of sub-items within a navigation structure.
+ * NavSubItemGroup component - TODO: add more docs
  */
 export declare const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps>;
 
-export declare const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>>;
-
-/**
- * Context value for NavSubItemGroup
- */
-declare type NavSubItemGroupCollapseMotionParams = {
-    /**
-     * The number of items in the NavSubItemGroup
-     */
-    items?: number;
-    /**
-     * The density of the NavItem
-     */
-    density?: NavDensity;
-};
+export declare const navSubItemGroupClassNames: SlotClassNames<NavSubItemGroupSlots>;
 
 /**
  * NavSubItemGroup Props
@@ -575,14 +556,7 @@ declare type NavSubItemGroupCollapseMotionParams = {
 export declare type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;
 
 export declare type NavSubItemGroupSlots = {
-    /**
-     * The root element
-     */
     root: NonNullable<Slot<'div'>>;
-    /**
-     * Collapse motion slot
-     */
-    collapseMotion?: Slot<PresenceMotionSlotProps<NavSubItemGroupCollapseMotionParams>>;
 };
 
 /**
@@ -683,7 +657,7 @@ export declare const renderNavSubItem_unstable: (state: NavSubItemState) => JSX.
 /**
  * Render the final JSX of NavSubItemGroup
  */
-export declare const renderNavSubItemGroup_unstable: (state: NavSubItemGroupState) => JSX.Element;
+export declare const renderNavSubItemGroup_unstable: (state: NavSubItemGroupState) => JSX.Element | null;
 
 /**
  * Render the final JSX of SplitNavItem

package/lib/components/AppItem/AppItem.js

@@ -1,14 +1,20 @@
 import * as React from 'react';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useAppItem_unstable } from './useAppItem';
 import { renderAppItem_unstable } from './renderAppItem';
 import { useAppItemStyles_unstable } from './useAppItemStyles.styles';
 /**
- * AppItem component - Application item in the navigation menu.
+ * AppItem component - TODO: add more docs
  */ export const AppItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useAppItem_unstable(props, ref);
     useAppItemStyles_unstable(state);
-    useCustomStyleHook_unstable('useAppItemStyles_unstable')(state);
+    /**
+   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md
+   *
+   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),
+   *      - uncomment this line
+   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}
+   *      - verify that custom global style override works for your component
+   */ // useCustomStyleHook_unstable('useAppItemStyles_unstable')(state);
     return renderAppItem_unstable(state);
 });
 AppItem.displayName = 'AppItem';

package/lib/components/AppItem/AppItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AppItem/AppItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useAppItem_unstable } from './useAppItem';\nimport { renderAppItem_unstable } from './renderAppItem';\nimport { useAppItemStyles_unstable } from './useAppItemStyles.styles';\nimport type { AppItemProps } from './AppItem.types';\n\n/**\n * AppItem component - Application item in the navigation menu.\n */\nexport const AppItem: ForwardRefComponent<AppItemProps> = React.forwardRef((props, ref) => {\n  const state = useAppItem_unstable(props, ref);\n\n  useAppItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useAppItemStyles_unstable')(state);\n\n  return renderAppItem_unstable(state);\n});\n\nAppItem.displayName = 'AppItem';\n"],"names":["React","useCustomStyleHook_unstable","useAppItem_unstable","renderAppItem_unstable","useAppItemStyles_unstable","AppItem","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE;;CAEC,GACD,OAAO,MAAMC,wBAA6CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQP,oBAAoBK,OAAOC;IAEzCJ,0BAA0BK;IAC1BR,4BAA4B,6BAA6BQ;IAEzD,OAAON,uBAAuBM;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/AppItem/AppItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAppItem_unstable } from './useAppItem';\nimport { renderAppItem_unstable } from './renderAppItem';\nimport { useAppItemStyles_unstable } from './useAppItemStyles.styles';\nimport type { AppItemProps } from './AppItem.types';\n\n/**\n * AppItem component - TODO: add more docs\n */\nexport const AppItem: ForwardRefComponent<AppItemProps> = React.forwardRef((props, ref) => {\n  const state = useAppItem_unstable(props, ref);\n\n  useAppItemStyles_unstable(state);\n\n  /**\n   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md\n   *\n   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),\n   *      - uncomment this line\n   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}\n   *      - verify that custom global style override works for your component\n   */\n  // useCustomStyleHook_unstable('useAppItemStyles_unstable')(state);\n\n  return renderAppItem_unstable(state);\n});\n\nAppItem.displayName = 'AppItem';\n"],"names":["React","useAppItem_unstable","renderAppItem_unstable","useAppItemStyles_unstable","AppItem","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE;;CAEC,GACD,OAAO,MAAMC,wBAA6CJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQP,oBAAoBK,OAAOC;IAEzCJ,0BAA0BK;IAE1B;;;;;;;GAOC,GACD,mEAAmE;IAEnE,OAAON,uBAAuBM;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}

package/lib/components/AppItemStatic/AppItemStatic.js

@@ -1,14 +1,20 @@
 import * as React from 'react';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useAppItemStatic_unstable } from './useAppItemStatic';
 import { renderAppItemStatic_unstable } from './renderAppItemStatic';
 import { useAppItemStaticStyles_unstable } from './useAppItemStaticStyles.styles';
 /**
- * AppItemStatic component - Static application item in the navigation menu.
+ * AppItemStatic component - TODO: add more docs
  */ export const AppItemStatic = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useAppItemStatic_unstable(props, ref);
     useAppItemStaticStyles_unstable(state);
-    useCustomStyleHook_unstable('useAppItemStaticStyles_unstable')(state);
+    /**
+   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md
+   *
+   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),
+   *      - uncomment this line
+   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}
+   *      - verify that custom global style override works for your component
+   */ // useCustomStyleHook_unstable('useAppItemStaticStyles_unstable')(state);
     return renderAppItemStatic_unstable(state);
 });
 AppItemStatic.displayName = 'AppItemStatic';

package/lib/components/AppItemStatic/AppItemStatic.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AppItemStatic/AppItemStatic.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useAppItemStatic_unstable } from './useAppItemStatic';\nimport { renderAppItemStatic_unstable } from './renderAppItemStatic';\nimport { useAppItemStaticStyles_unstable } from './useAppItemStaticStyles.styles';\nimport type { AppItemStaticProps } from './AppItemStatic.types';\n\n/**\n * AppItemStatic component - Static application item in the navigation menu.\n */\nexport const AppItemStatic: ForwardRefComponent<AppItemStaticProps> = React.forwardRef((props, ref) => {\n  const state = useAppItemStatic_unstable(props, ref);\n\n  useAppItemStaticStyles_unstable(state);\n  useCustomStyleHook_unstable('useAppItemStaticStyles_unstable')(state);\n\n  return renderAppItemStatic_unstable(state);\n});\n\nAppItemStatic.displayName = 'AppItemStatic';\n"],"names":["React","useCustomStyleHook_unstable","useAppItemStatic_unstable","renderAppItemStatic_unstable","useAppItemStaticStyles_unstable","AppItemStatic","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAE/CJ,gCAAgCK;IAChCR,4BAA4B,mCAAmCQ;IAE/D,OAAON,6BAA6BM;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/AppItemStatic/AppItemStatic.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAppItemStatic_unstable } from './useAppItemStatic';\nimport { renderAppItemStatic_unstable } from './renderAppItemStatic';\nimport { useAppItemStaticStyles_unstable } from './useAppItemStaticStyles.styles';\nimport type { AppItemStaticProps } from './AppItemStatic.types';\n\n/**\n * AppItemStatic component - TODO: add more docs\n */\nexport const AppItemStatic: ForwardRefComponent<AppItemStaticProps> = React.forwardRef((props, ref) => {\n  const state = useAppItemStatic_unstable(props, ref);\n\n  useAppItemStaticStyles_unstable(state);\n\n  /**\n   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md\n   *\n   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),\n   *      - uncomment this line\n   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}\n   *      - verify that custom global style override works for your component\n   */\n  // useCustomStyleHook_unstable('useAppItemStaticStyles_unstable')(state);\n\n  return renderAppItemStatic_unstable(state);\n});\n\nAppItemStatic.displayName = 'AppItemStatic';\n"],"names":["React","useAppItemStatic_unstable","renderAppItemStatic_unstable","useAppItemStaticStyles_unstable","AppItemStatic","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAE/CJ,gCAAgCK;IAEhC;;;;;;;GAOC,GACD,yEAAyE;IAEzE,OAAON,6BAA6BM;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

package/lib/components/Hamburger/Hamburger.js

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { renderButton_unstable } from '@fluentui/react-button';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useHamburger_unstable } from './useHamburger';
+import { renderButton_unstable } from '@fluentui/react-button';
 import { useHamburgerStyles_unstable } from './useHamburgerStyles.styles';
 /**
- * Hamburger component - a button that toggles a menu or navigation drawer.
+ * Hamburger component - TODO: add more docs
  */ export const Hamburger = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useHamburger_unstable(props, ref);
     useHamburgerStyles_unstable(state);
-    useCustomStyleHook_unstable('useHamburgerStyles_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('useHamburgerStyles_unstable')(state);
     return renderButton_unstable(state);
 });
 Hamburger.displayName = 'Hamburger';

package/lib/components/Hamburger/Hamburger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Hamburger/Hamburger.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable } from '@fluentui/react-button';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useHamburger_unstable } from './useHamburger';\nimport { useHamburgerStyles_unstable } from './useHamburgerStyles.styles';\nimport type { HamburgerProps } from './Hamburger.types';\n\n/**\n * Hamburger component - a button that toggles a menu or navigation drawer.\n */\nexport const Hamburger: ForwardRefComponent<HamburgerProps> = React.forwardRef((props, ref) => {\n  const state = useHamburger_unstable(props, ref);\n\n  useHamburgerStyles_unstable(state);\n  useCustomStyleHook_unstable('useHamburgerStyles_unstable')(state);\n\n  return renderButton_unstable(state);\n}) as ForwardRefComponent<HamburgerProps>;\n\nHamburger.displayName = 'Hamburger';\n"],"names":["React","renderButton_unstable","useCustomStyleHook_unstable","useHamburger_unstable","useHamburgerStyles_unstable","Hamburger","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,2BAA2B,QAAQ,8BAA8B;AAG1E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQN,sBAAsBI,OAAOC;IAE3CJ,4BAA4BK;IAC5BP,4BAA4B,+BAA+BO;IAE3D,OAAOR,sBAAsBQ;AAC/B,GAA0C;AAE1CJ,UAAUK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Hamburger/Hamburger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useHamburger_unstable } from './useHamburger';\nimport { renderButton_unstable } from '@fluentui/react-button';\nimport { useHamburgerStyles_unstable } from './useHamburgerStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { HamburgerProps } from './Hamburger.types';\n\n/**\n * Hamburger component - TODO: add more docs\n */\nexport const Hamburger: ForwardRefComponent<HamburgerProps> = React.forwardRef((props, ref) => {\n  const state = useHamburger_unstable(props, ref);\n\n  useHamburgerStyles_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('useHamburgerStyles_unstable')(state);\n  return renderButton_unstable(state);\n}) as ForwardRefComponent<HamburgerProps>;\n\nHamburger.displayName = 'Hamburger';\n"],"names":["React","useHamburger_unstable","renderButton_unstable","useHamburgerStyles_unstable","Hamburger","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,2BAA2B,QAAQ,8BAA8B;AAI1E;;CAEC,GACD,OAAO,MAAMC,0BAAiDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQP,sBAAsBK,OAAOC;IAE3CJ,4BAA4BK;IAC5B,8HAA8H;IAC9H,wGAAwG;IACxG,qEAAqE;IACrE,OAAON,sBAAsBM;AAC/B,GAA0C;AAE1CJ,UAAUK,WAAW,GAAG"}

package/lib/components/Nav/Nav.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useNav_unstable } from './useNav';
 import { renderNav_unstable } from './renderNav';
 import { useNavStyles_unstable } from './useNavStyles.styles';
@@ -10,7 +9,6 @@ import { useNavContextValues_unstable } from '../useNavContextValues';
     const state = useNav_unstable(props, ref);
     const contextValues = useNavContextValues_unstable(state);
     useNavStyles_unstable(state);
-    useCustomStyleHook_unstable('useHamburgerStyles_unstable')(state);
     return renderNav_unstable(state, contextValues);
 });
 Nav.displayName = 'Nav';

package/lib/components/Nav/Nav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Nav/Nav.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNav_unstable } from './useNav';\nimport { renderNav_unstable } from './renderNav';\nimport { useNavStyles_unstable } from './useNavStyles.styles';\nimport { useNavContextValues_unstable } from '../useNavContextValues';\nimport type { NavProps } from './Nav.types';\n\n/**\n * Nav - A component that provides up to two levels of nesting for navigation.\n */\nexport const Nav: ForwardRefComponent<NavProps> = React.forwardRef((props, ref) => {\n  const state = useNav_unstable(props, ref);\n\n  const contextValues = useNavContextValues_unstable(state);\n\n  useNavStyles_unstable(state);\n  useCustomStyleHook_unstable('useHamburgerStyles_unstable')(state);\n\n  return renderNav_unstable(state, contextValues);\n});\n\nNav.displayName = 'Nav';\n"],"names":["React","useCustomStyleHook_unstable","useNav_unstable","renderNav_unstable","useNavStyles_unstable","useNavContextValues_unstable","Nav","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,eAAe,QAAQ,WAAW;AAC3C,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,4BAA4B,QAAQ,yBAAyB;AAGtE;;CAEC,GACD,OAAO,MAAMC,oBAAqCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACzE,MAAMC,QAAQR,gBAAgBM,OAAOC;IAErC,MAAME,gBAAgBN,6BAA6BK;IAEnDN,sBAAsBM;IACtBT,4BAA4B,+BAA+BS;IAE3D,OAAOP,mBAAmBO,OAAOC;AACnC,GAAG;AAEHL,IAAIM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Nav/Nav.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useNav_unstable } from './useNav';\nimport { renderNav_unstable } from './renderNav';\nimport { useNavStyles_unstable } from './useNavStyles.styles';\nimport { useNavContextValues_unstable } from '../useNavContextValues';\nimport type { NavProps } from './Nav.types';\n\n/**\n * Nav - A component that provides up to two levels of nesting for navigation.\n */\nexport const Nav: ForwardRefComponent<NavProps> = React.forwardRef((props, ref) => {\n  const state = useNav_unstable(props, ref);\n\n  const contextValues = useNavContextValues_unstable(state);\n\n  useNavStyles_unstable(state);\n  return renderNav_unstable(state, contextValues);\n});\n\nNav.displayName = 'Nav';\n"],"names":["React","useNav_unstable","renderNav_unstable","useNavStyles_unstable","useNavContextValues_unstable","Nav","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,WAAW;AAC3C,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,4BAA4B,QAAQ,yBAAyB;AAGtE;;CAEC,GACD,OAAO,MAAMC,oBAAqCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzE,MAAMC,QAAQR,gBAAgBM,OAAOC;IAErC,MAAME,gBAAgBN,6BAA6BK;IAEnDN,sBAAsBM;IACtB,OAAOP,mBAAmBO,OAAOC;AACnC,GAAG;AAEHL,IAAIM,WAAW,GAAG"}

package/lib/components/NavCategory/NavCategory.js

@@ -3,7 +3,7 @@ import { useNavCategory_unstable } from './useNavCategory';
 import { renderNavCategory_unstable } from './renderNavCategory';
 import { useNavCategoryContextValues_unstable } from '../useNavCategoryContextValues_unstable';
 /**
- * NavCategory component - a category in the navigation menu that can contain multiple items.
+ * NavCategory component - TODO: add more docs
  */ export const NavCategory = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useNavCategory_unstable(props, ref);
     const contextValues = useNavCategoryContextValues_unstable(state);

package/lib/components/NavCategory/NavCategory.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategory/NavCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { NavCategoryProps } from './NavCategory.types';\n\nimport { useNavCategory_unstable } from './useNavCategory';\nimport { renderNavCategory_unstable } from './renderNavCategory';\nimport { useNavCategoryContextValues_unstable } from '../useNavCategoryContextValues_unstable';\n\n/**\n * NavCategory component - a category in the navigation menu that can contain multiple items.\n */\nexport const NavCategory: ForwardRefComponent<NavCategoryProps> = React.forwardRef((props, ref) => {\n  const state = useNavCategory_unstable(props, ref);\n  const contextValues = useNavCategoryContextValues_unstable(state);\n\n  return renderNavCategory_unstable(state, contextValues);\n});\n\nNavCategory.displayName = 'NavCategory';\n"],"names":["React","useNavCategory_unstable","renderNavCategory_unstable","useNavCategoryContextValues_unstable","NavCategory","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAK/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,oCAAoC,QAAQ,0CAA0C;AAE/F;;CAEC,GACD,OAAO,MAAMC,4BAAqDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQP,wBAAwBK,OAAOC;IAC7C,MAAME,gBAAgBN,qCAAqCK;IAE3D,OAAON,2BAA2BM,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavCategory/NavCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { NavCategoryProps } from './NavCategory.types';\n\nimport { useNavCategory_unstable } from './useNavCategory';\nimport { renderNavCategory_unstable } from './renderNavCategory';\nimport { useNavCategoryContextValues_unstable } from '../useNavCategoryContextValues_unstable';\n\n/**\n * NavCategory component - TODO: add more docs\n */\nexport const NavCategory: ForwardRefComponent<NavCategoryProps> = React.forwardRef((props, ref) => {\n  const state = useNavCategory_unstable(props, ref);\n  const contextValues = useNavCategoryContextValues_unstable(state);\n\n  return renderNavCategory_unstable(state, contextValues);\n});\n\nNavCategory.displayName = 'NavCategory';\n"],"names":["React","useNavCategory_unstable","renderNavCategory_unstable","useNavCategoryContextValues_unstable","NavCategory","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAK/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,oCAAoC,QAAQ,0CAA0C;AAE/F;;CAEC,GACD,OAAO,MAAMC,4BAAqDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQP,wBAAwBK,OAAOC;IAC7C,MAAME,gBAAgBN,qCAAqCK;IAE3D,OAAON,2BAA2BM,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}

package/lib/components/NavCategory/renderNavCategory.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategory/renderNavCategory.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavCategoryContextValues, NavCategoryProvider } from '../NavCategoryContext';\n\nimport type { NavCategoryState } from './NavCategory.types';\n\n/**\n * Render the final JSX of NavCategory\n */\nexport const renderNavCategory_unstable = (\n  state: NavCategoryState,\n  contextValues: NavCategoryContextValues,\n): // eslint-disable-next-line @typescript-eslint/no-deprecated\nJSX.Element => {\n  return <NavCategoryProvider value={contextValues.categoryValue}>{state.children}</NavCategoryProvider>;\n};\n"],"names":["React","NavCategoryProvider","renderNavCategory_unstable","state","contextValues","value","categoryValue","children"],"rangeMappings":";;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,mBAAmB,QAAQ,wBAAwB;AAItF;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAGA,qBAAO,oBAACH;QAAoBI,OAAOD,cAAcE,aAAa;OAAGH,MAAMI,QAAQ;AACjF,EAAE"}
+{"version":3,"sources":["../src/components/NavCategory/renderNavCategory.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavCategoryContextValues, NavCategoryProvider } from '../NavCategoryContext';\n\nimport type { NavCategoryState } from './NavCategory.types';\n\n/**\n * Render the final JSX of NavCategory\n */\nexport const renderNavCategory_unstable = (state: NavCategoryState, contextValues: NavCategoryContextValues) => {\n  return <NavCategoryProvider value={contextValues.categoryValue}>{state.children}</NavCategoryProvider>;\n};\n"],"names":["React","NavCategoryProvider","renderNavCategory_unstable","state","contextValues","value","categoryValue","children"],"rangeMappings":";;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,mBAAmB,QAAQ,wBAAwB;AAItF;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,OAAyBC;IAClE,qBAAO,oBAACH;QAAoBI,OAAOD,cAAcE,aAAa;OAAGH,MAAMI,QAAQ;AACjF,EAAE"}

package/lib/components/NavCategoryItem/NavCategoryItem.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useNavCategoryItem_unstable } from './useNavCategoryItem';
 import { renderNavCategoryItem_unstable } from './renderNavCategoryItem';
 import { useNavCategoryItemStyles_unstable } from './useNavCategoryItem.styles';
 import { useNavCategoryItemContextValues_unstable } from '../useNavCategoryItemContextValues_unstable';
+// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * A Nav Category Item provides provides a clickable accordion like header that exposes
  * a list of NavSubItems to take users to a new destination.
@@ -11,7 +11,8 @@ import { useNavCategoryItemContextValues_unstable } from '../useNavCategoryItemC
     const state = useNavCategoryItem_unstable(props, ref);
     const contextValues = useNavCategoryItemContextValues_unstable(state);
     useNavCategoryItemStyles_unstable(state);
-    useCustomStyleHook_unstable('useNavCategoryItemStyles')(state);
+    // todo: add custom style hook
+    // useCustomStyleHook_unstable('useNavCategoryItemStyles')(state);
     return renderNavCategoryItem_unstable(state, contextValues);
 });
 NavCategoryItem.displayName = 'NavCategoryItem';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/NavCategoryItem/NavCategoryItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavCategoryItem_unstable } from './useNavCategoryItem';\nimport { renderNavCategoryItem_unstable } from './renderNavCategoryItem';\nimport type { NavCategoryItemProps } from './NavCategoryItem.types';\nimport { useNavCategoryItemStyles_unstable } from './useNavCategoryItem.styles';\nimport { useNavCategoryItemContextValues_unstable } from '../useNavCategoryItemContextValues_unstable';\n\n/**\n * A Nav Category Item provides provides a clickable accordion like header that exposes\n * a list of NavSubItems to take users to a new destination.\n */\nexport const NavCategoryItem: ForwardRefComponent<NavCategoryItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavCategoryItem_unstable(props, ref);\n  const contextValues = useNavCategoryItemContextValues_unstable(state);\n\n  useNavCategoryItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavCategoryItemStyles')(state);\n\n  return renderNavCategoryItem_unstable(state, contextValues);\n});\n\nNavCategoryItem.displayName = 'NavCategoryItem';\n"],"names":["React","useCustomStyleHook_unstable","useNavCategoryItem_unstable","renderNavCategoryItem_unstable","useNavCategoryItemStyles_unstable","useNavCategoryItemContextValues_unstable","NavCategoryItem","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AAEzE,SAASC,iCAAiC,QAAQ,8BAA8B;AAChF,SAASC,wCAAwC,QAAQ,8CAA8C;AAEvG;;;CAGC,GACD,OAAO,MAAMC,gCAA6DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IACjD,MAAME,gBAAgBN,yCAAyCK;IAE/DN,kCAAkCM;IAClCT,4BAA4B,4BAA4BS;IAExD,OAAOP,+BAA+BO,OAAOC;AAC/C,GAAG;AAEHL,gBAAgBM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/NavCategoryItem/NavCategoryItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useNavCategoryItem_unstable } from './useNavCategoryItem';\nimport { renderNavCategoryItem_unstable } from './renderNavCategoryItem';\nimport type { NavCategoryItemProps } from './NavCategoryItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useNavCategoryItemStyles_unstable } from './useNavCategoryItem.styles';\nimport { useNavCategoryItemContextValues_unstable } from '../useNavCategoryItemContextValues_unstable';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A Nav Category Item provides provides a clickable accordion like header that exposes\n * a list of NavSubItems to take users to a new destination.\n */\nexport const NavCategoryItem: ForwardRefComponent<NavCategoryItemProps> = React.forwardRef((props, ref) => {\n  const state = useNavCategoryItem_unstable(props, ref);\n  const contextValues = useNavCategoryItemContextValues_unstable(state);\n\n  useNavCategoryItemStyles_unstable(state);\n\n  // todo: add custom style hook\n  // useCustomStyleHook_unstable('useNavCategoryItemStyles')(state);\n\n  return renderNavCategoryItem_unstable(state, contextValues);\n});\n\nNavCategoryItem.displayName = 'NavCategoryItem';\n"],"names":["React","useNavCategoryItem_unstable","renderNavCategoryItem_unstable","useNavCategoryItemStyles_unstable","useNavCategoryItemContextValues_unstable","NavCategoryItem","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AAGzE,SAASC,iCAAiC,QAAQ,8BAA8B;AAChF,SAASC,wCAAwC,QAAQ,8CAA8C;AACvG,iFAAiF;AAEjF;;;CAGC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IACjD,MAAME,gBAAgBN,yCAAyCK;IAE/DN,kCAAkCM;IAElC,8BAA8B;IAC9B,kEAAkE;IAElE,OAAOP,+BAA+BO,OAAOC;AAC/C,GAAG;AAEHL,gBAAgBM,WAAW,GAAG"}

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

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

package/lib/components/NavCategoryItem/renderNavCategoryItem.js

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

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

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

package/lib/components/NavCategoryItem/useNavCategoryItem.js

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