@fluentui/react-nav 9.1.0 → 9.1.2

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # Change Log - @fluentui/react-nav
 
-This log was last generated on Thu, 12 Jun 2025 09:39:14 GMT and should not be manually modified.
+This log was last generated on Wed, 18 Jun 2025 17:29:27 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.1.2)
+
+Wed, 18 Jun 2025 17:29:27 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:39:14 GMT 
+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

package/dist/index.d.ts

@@ -33,7 +33,7 @@ import { ToggleButtonProps } from '@fluentui/react-button';
 import type { TooltipProps } from '@fluentui/react-tooltip';
 
 /**
- * AppItem component - TODO: add more docs
+ * AppItem component - Application item in the navigation menu.
  */
 export declare const AppItem: ForwardRefComponent<AppItemProps>;
 
@@ -70,7 +70,7 @@ export declare type AppItemState = ComponentState<AppItemSlots> & {
 };
 
 /**
- * AppItemStatic component - TODO: add more docs
+ * AppItemStatic component - Static application item in the navigation menu.
  */
 export declare const AppItemStatic: ForwardRefComponent<AppItemStaticProps>;
 
@@ -105,7 +105,7 @@ export declare type AppItemStaticState = ComponentState<AppItemStaticSlots> & {
 };
 
 /**
- * Hamburger component - TODO: add more docs
+ * Hamburger component - a button that toggles a menu or navigation drawer.
  */
 export declare const Hamburger: ForwardRefComponent<HamburgerProps>;
 
@@ -127,7 +127,7 @@ export declare type HamburgerState = ButtonState;
 export declare const Nav: ForwardRefComponent<NavProps>;
 
 /**
- * NavCategory component - TODO: add more docs
+ * NavCategory component - a category in the navigation menu that can contain multiple items.
  */
 export declare const NavCategory: ForwardRefComponent<NavCategoryProps>;
 
@@ -270,7 +270,7 @@ export declare type NavContextValues = {
 export declare type NavDensity = 'small' | 'medium';
 
 /**
- * NavDivider component - TODO: add more docs
+ * NavDivider component - a divider used within navigation components to separate items.
  */
 export declare const NavDivider: ForwardRefComponent<NavDividerProps>;
 
@@ -287,7 +287,7 @@ export declare type NavDividerProps = DividerProps;
 export declare type NavDividerState = DividerState;
 
 /**
- * NavDrawer component - TODO: add more docs
+ * NavDrawer component - a component that provides a drawer for navigation items.
  */
 export declare const NavDrawer: ForwardRefComponent<NavDrawerProps>;
 
@@ -380,7 +380,7 @@ export declare type NavDrawerState = DrawerState & NavContextValue & {
 };
 
 /**
- * NavItem component - TODO: add more docs
+ * NavItem component - a single item in the navigation menu.
  */
 export declare const NavItem: ForwardRefComponent<NavItemProps>;
 
@@ -537,14 +537,14 @@ export declare type NavSlots = {
 export declare type NavState = ComponentState<NavSlots> & NavContextValue;
 
 /**
- * NavSubItem component - TODO: add more docs
+ * NavSubItem component - a sub-item within a navigation structure.
  */
 export declare const NavSubItem: ForwardRefComponent<NavSubItemProps>;
 
 export declare const navSubItemClassNames: SlotClassNames<NavSubItemSlots>;
 
 /**
- * NavSubItemGroup component - TODO: add more docs
+ * NavSubItemGroup component - a group of sub-items within a navigation structure.
  */
 export declare const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps>;
 

package/lib/components/AppItem/AppItem.js

@@ -1,20 +1,14 @@
 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 - TODO: add more docs
+ * AppItem component - Application item in the navigation menu.
  */ export const AppItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useAppItem_unstable(props, ref);
     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);
+    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 { 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"}
+{"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"}

package/lib/components/AppItemStatic/AppItemStatic.js

@@ -1,20 +1,14 @@
 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 - TODO: add more docs
+ * AppItemStatic component - Static application item in the navigation menu.
  */ export const AppItemStatic = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useAppItemStatic_unstable(props, ref);
     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);
+    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 { 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"}
+{"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"}

package/lib/components/Hamburger/Hamburger.js

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

package/lib/components/Nav/Nav.js

@@ -1,4 +1,5 @@
 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';
@@ -9,6 +10,7 @@ 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 { 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"}
+{"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"}

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 - TODO: add more docs
+ * NavCategory component - a category in the navigation menu that can contain multiple items.
  */ 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 - 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"}
+{"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"}

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,8 +11,7 @@ import { useNavCategoryItemContextValues_unstable } from '../useNavCategoryItemC
     const state = useNavCategoryItem_unstable(props, ref);
     const contextValues = useNavCategoryItemContextValues_unstable(state);
     useNavCategoryItemStyles_unstable(state);
-    // todo: add custom style hook
-    // useCustomStyleHook_unstable('useNavCategoryItemStyles')(state);
+    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 { 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"}
+{"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"}

package/lib/components/NavDivider/NavDivider.js

@@ -1,15 +1,14 @@
 import * as React from 'react';
+import { renderDivider_unstable } from '@fluentui/react-divider';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useNavDivider_unstable } from './useNavDivider';
 import { useNavDividerStyles_unstable } from './useNavDividerStyles.styles';
-import { renderDivider_unstable } from '@fluentui/react-divider';
 /**
- * NavDivider component - TODO: add more docs
+ * NavDivider component - a divider used within navigation components to separate items.
  */ export const NavDivider = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useNavDivider_unstable(props, ref);
     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);
+    useCustomStyleHook_unstable('useNavDividerStyles_unstable')(state);
     return renderDivider_unstable(state);
 });
 NavDivider.displayName = 'NavDivider';

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

@@ -1 +1 @@
-{"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":["React","useNavDivider_unstable","useNavDividerStyles_unstable","renderDivider_unstable","NavDivider","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAC5E,SAASC,sBAAsB,QAAQ,0BAA0B;AAKjE;;CAEC,GACD,OAAO,MAAMC,2BAAmDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CL,6BAA6BM;IAC7B,8HAA8H;IAC9H,wGAAwG;IACxG,sEAAsE;IACtE,OAAOL,uBAAuBK;AAChC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
+{"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":["React","renderDivider_unstable","useCustomStyleHook_unstable","useNavDivider_unstable","useNavDividerStyles_unstable","NavDivider","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,0BAA0B;AAEjE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQN,uBAAuBI,OAAOC;IAE5CJ,6BAA6BK;IAC7BP,4BAA4B,gCAAgCO;IAE5D,OAAOR,uBAAuBQ;AAChC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

package/lib/components/NavDrawer/NavDrawer.js

@@ -1,18 +1,16 @@
 import * as React from 'react';
-// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useNavDrawer_unstable } from './useNavDrawer';
 import { renderNavDrawer_unstable } from './renderNavDrawer';
 import { useNavDrawerStyles_unstable } from './useNavDrawerStyles.styles';
 import { useNavContextValues_unstable } from '../useNavContextValues';
 /**
- * NavDrawer component - TODO: add more docs
+ * NavDrawer component - a component that provides a drawer for navigation items.
  */ export const NavDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useNavDrawer_unstable(props, ref);
     const contextValues = useNavContextValues_unstable(state);
     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);
+    useCustomStyleHook_unstable('useNavDrawerStyles_unstable')(state);
     return renderNavDrawer_unstable(state, contextValues);
 });
 NavDrawer.displayName = 'NavDrawer';

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

@@ -1 +1 @@
-{"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":["React","useNavDrawer_unstable","renderNavDrawer_unstable","useNavDrawerStyles_unstable","useNavContextValues_unstable","NavDrawer","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,iFAAiF;AACjF,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,8BAA8B;AAC1E,SAASC,4BAA4B,QAAQ,yBAAyB;AAMtE;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,sBAAsBM,OAAOC;IAC3C,MAAME,gBAAgBN,6BAA6BK;IAEnDN,4BAA4BM;IAC5B,8HAA8H;IAC9H,wGAAwG;IACxG,qEAAqE;IACrE,OAAOP,yBAAyBO,OAAOC;AACzC,GAAG;AAEHL,UAAUM,WAAW,GAAG"}
+{"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":["React","useCustomStyleHook_unstable","useNavDrawer_unstable","renderNavDrawer_unstable","useNavDrawerStyles_unstable","useNavContextValues_unstable","NavDrawer","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAG9E,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,8BAA8B;AAC1E,SAASC,4BAA4B,QAAQ,yBAAyB;AAItE;;CAEC,GACD,OAAO,MAAMC,0BAAiDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,sBAAsBM,OAAOC;IAC3C,MAAME,gBAAgBN,6BAA6BK;IAEnDN,4BAA4BM;IAC5BT,4BAA4B,+BAA+BS;IAE3D,OAAOP,yBAAyBO,OAAOC;AACzC,GAAG;AAEHL,UAAUM,WAAW,GAAG"}

package/lib/components/NavDrawerBody/NavDrawerBody.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { renderDrawerBody_unstable } from '@fluentui/react-drawer';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useNavDrawerBody_unstable } from './useNavDrawerBody';
 import { useNavDrawerBodyStyles_unstable } from './useNavDrawerBodyStyles.styles';
 /**
@@ -7,9 +8,7 @@ import { useNavDrawerBodyStyles_unstable } from './useNavDrawerBodyStyles.styles
  */ export const NavDrawerBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useNavDrawerBody_unstable(props, ref);
     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);
+    useCustomStyleHook_unstable('useNavDrawerBodyStyles_unstable')(state);
     return renderDrawerBody_unstable(state);
 });
 NavDrawerBody.displayName = 'NavDrawerBody';

package/lib/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 { 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":["React","renderDrawerBody_unstable","useNavDrawerBody_unstable","useNavDrawerBodyStyles_unstable","NavDrawerBody","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,yBAAyB;AACnE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,+BAA+B,QAAQ,kCAAkC;AAKlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQN,0BAA0BI,OAAOC;IAE/CJ,gCAAgCK;IAChC,8HAA8H;IAC9H,wGAAwG;IACxG,yEAAyE;IACzE,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
+{"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":["React","renderDrawerBody_unstable","useCustomStyleHook_unstable","useNavDrawerBody_unstable","useNavDrawerBodyStyles_unstable","NavDrawerBody","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,yBAAyB;AAEnE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQN,0BAA0BI,OAAOC;IAE/CJ,gCAAgCK;IAChCP,4BAA4B,mCAAmCO;IAE/D,OAAOR,0BAA0BQ;AACnC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

package/lib/components/NavDrawerFooter/NavDrawerFooter.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { renderDrawerFooter_unstable } from '@fluentui/react-drawer';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useNavDrawerFooter_unstable } from './useNavDrawerFooter';
 import { useNavDrawerFooterStyles_unstable } from './useNavDrawerFooterStyles.styles';
 /**
@@ -7,9 +8,7 @@ import { useNavDrawerFooterStyles_unstable } from './useNavDrawerFooterStyles.st
  */ export const NavDrawerFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useNavDrawerFooter_unstable(props, ref);
     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);
+    useCustomStyleHook_unstable('useNavDrawerFooterStyles_unstable')(state);
     return renderDrawerFooter_unstable(state);
 });
 NavDrawerFooter.displayName = 'NavDrawerFooter';

package/lib/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 { 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":["React","renderDrawerFooter_unstable","useNavDrawerFooter_unstable","useNavDrawerFooterStyles_unstable","NavDrawerFooter","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,yBAAyB;AACrE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,iCAAiC,QAAQ,oCAAoC;AAKtF;;CAEC,GACD,OAAO,MAAMC,gCAA6DJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQN,4BAA4BI,OAAOC;IAEjDJ,kCAAkCK;IAClC,8HAA8H;IAC9H,wGAAwG;IACxG,2EAA2E;IAC3E,OAAOP,4BAA4BO;AACrC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
+{"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":["React","renderDrawerFooter_unstable","useCustomStyleHook_unstable","useNavDrawerFooter_unstable","useNavDrawerFooterStyles_unstable","NavDrawerFooter","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,yBAAyB;AAErE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,iCAAiC,QAAQ,oCAAoC;AAGtF;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQN,4BAA4BI,OAAOC;IAEjDJ,kCAAkCK;IAClCP,4BAA4B,qCAAqCO;IAEjE,OAAOR,4BAA4BQ;AACrC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/NavDrawerHeader/NavDrawerHeader.js

@@ -1,15 +1,14 @@
 import * as React from 'react';
-import { useNavDrawerHeader_unstable } from './useNavDrawerHeader';
-import { useNavDrawerHeaderStyles_unstable } from './useNavDrawerHeaderStyles.styles';
 import { renderDrawerHeader_unstable } from '@fluentui/react-drawer';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useNavDrawerHeaderStyles_unstable } from './useNavDrawerHeaderStyles.styles';
+import { useNavDrawerHeader_unstable } from './useNavDrawerHeader';
 /**
  * NavDrawerHeader component
  */ export const NavDrawerHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useNavDrawerHeader_unstable(props, ref);
     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);
+    useCustomStyleHook_unstable('useNavDrawerHeaderStyles_unstable')(state);
     return renderDrawerHeader_unstable(state);
 });
 NavDrawerHeader.displayName = 'NavDrawerHeader';

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

@@ -1 +1 @@
-{"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":["React","useNavDrawerHeader_unstable","useNavDrawerHeaderStyles_unstable","renderDrawerHeader_unstable","NavDrawerHeader","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,iCAAiC,QAAQ,oCAAoC;AACtF,SAASC,2BAA2B,QAAQ,yBAAyB;AAKrE;;CAEC,GACD,OAAO,MAAMC,gCAA6DJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQP,4BAA4BK,OAAOC;IAEjDL,kCAAkCM;IAClC,8HAA8H;IAC9H,wGAAwG;IACxG,2EAA2E;IAC3E,OAAOL,4BAA4BK;AACrC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
+{"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":["React","renderDrawerHeader_unstable","useCustomStyleHook_unstable","useNavDrawerHeaderStyles_unstable","useNavDrawerHeader_unstable","NavDrawerHeader","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,yBAAyB;AACrE,SAASC,2BAA2B,QAAQ,kCAAkC;AAG9E,SAASC,iCAAiC,QAAQ,oCAAoC;AACtF,SAASC,2BAA2B,QAAQ,uBAAuB;AAGnE;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQL,4BAA4BG,OAAOC;IAEjDL,kCAAkCM;IAClCP,4BAA4B,qCAAqCO;IAEjE,OAAOR,4BAA4BQ;AACrC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/NavItem/NavItem.js

@@ -1,16 +1,14 @@
 import * as React from 'react';
-// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useNavItem_unstable } from './useNavItem';
 import { renderNavItem_unstable } from './renderNavItem';
 import { useNavItemStyles_unstable } from './useNavItemStyles.styles';
 /**
- * NavItem component - TODO: add more docs
+ * NavItem component - a single item in the navigation menu.
  */ export const NavItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useNavItem_unstable(props, ref);
     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);
+    useCustomStyleHook_unstable('useNavItemStyles_unstable')(state);
     return renderNavItem_unstable(state);
 });
 NavItem.displayName = 'NavItem';

package/lib/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';\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":["React","useNavItem_unstable","renderNavItem_unstable","useNavItemStyles_unstable","NavItem","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,iFAAiF;AACjF,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;IAC1B,8HAA8H;IAC9H,wGAAwG;IACxG,mEAAmE;IACnE,OAAON,uBAAuBM;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}
+{"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":["React","useCustomStyleHook_unstable","useNavItem_unstable","renderNavItem_unstable","useNavItemStyles_unstable","NavItem","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"}

package/lib/components/NavSectionHeader/NavSectionHeader.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useNavSectionHeader_unstable } from './useNavSectionHeader';
 import { renderNavSectionHeader_unstable } from './renderNavSectionHeader';
 import { useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';
@@ -7,9 +8,7 @@ import { useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.
  */ export const NavSectionHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useNavSectionHeader_unstable(props, ref);
     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);
+    useCustomStyleHook_unstable('useNavSectionHeaderStyles_unstable')(state);
     return renderNavSectionHeader_unstable(state);
 });
 NavSectionHeader.displayName = 'NavSectionHeader';

package/lib/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 { 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":["React","useNavSectionHeader_unstable","renderNavSectionHeader_unstable","useNavSectionHeaderStyles_unstable","NavSectionHeader","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,qCAAqC;AAGxF;;CAEC,GACD,OAAO,MAAMC,iCAA+DJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQP,6BAA6BK,OAAOC;IAElDJ,mCAAmCK;IACnC,8HAA8H;IAC9H,wGAAwG;IACxG,4EAA4E;IAC5E,OAAON,gCAAgCM;AACzC,GAAG;AAEHJ,iBAAiBK,WAAW,GAAG"}
+{"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":["React","useCustomStyleHook_unstable","useNavSectionHeader_unstable","renderNavSectionHeader_unstable","useNavSectionHeaderStyles_unstable","NavSectionHeader","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,qCAAqC;AAGxF;;CAEC,GACD,OAAO,MAAMC,iCAA+DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQP,6BAA6BK,OAAOC;IAElDJ,mCAAmCK;IACnCR,4BAA4B,sCAAsCQ;IAElE,OAAON,gCAAgCM;AACzC,GAAG;AAEHJ,iBAAiBK,WAAW,GAAG"}

package/lib/components/NavSubItem/NavSubItem.js

@@ -1,16 +1,14 @@
 import * as React from 'react';
-// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useNavSubItem_unstable } from './useNavSubItem';
 import { renderNavSubItem_unstable } from './renderNavSubItem';
 import { useNavSubItemStyles_unstable } from './useNavSubItemStyles.styles';
 /**
- * NavSubItem component - TODO: add more docs
+ * NavSubItem component - a sub-item within a navigation structure.
  */ export const NavSubItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useNavSubItem_unstable(props, ref);
     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);
+    useCustomStyleHook_unstable('useNavSubItemStyles_unstable')(state);
     return renderNavSubItem_unstable(state);
 });
 NavSubItem.displayName = 'NavSubItem';

package/lib/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';\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":["React","useNavSubItem_unstable","renderNavSubItem_unstable","useNavSubItemStyles_unstable","NavSubItem","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,iFAAiF;AACjF,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7B,8HAA8H;IAC9H,wGAAwG;IACxG,sEAAsE;IACtE,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
+{"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":["React","useCustomStyleHook_unstable","useNavSubItem_unstable","renderNavSubItem_unstable","useNavSubItemStyles_unstable","NavSubItem","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7BR,4BAA4B,gCAAgCQ;IAE5D,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}