feat(react-headless-components-preview): add Nav component and stories

change/@fluentui-react-headless-components-preview-00b1aba3-b65a-45fc-b760-cb450c3901da.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add Nav component and stories",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js

@@ -16,6 +16,7 @@ import * as Input from '@fluentui/react-headless-components-preview/input';
 import * as Label from '@fluentui/react-headless-components-preview/label';
 import * as Link from '@fluentui/react-headless-components-preview/link';
 import * as MessageBar from '@fluentui/react-headless-components-preview/message-bar';
+import * as Nav from '@fluentui/react-headless-components-preview/nav';
 import * as ProgressBar from '@fluentui/react-headless-components-preview/progress-bar';
 import * as Persona from '@fluentui/react-headless-components-preview/persona';
 import * as Popover from '@fluentui/react-headless-components-preview/popover';
@@ -55,6 +56,7 @@ console.log({
   Label,
   Link,
   MessageBar,
+  Nav,
   Persona,
   Popover,
   ProgressBar,

packages/react-components/react-headless-components-preview/library/etc/nav.api.md

@@ -0,0 +1,320 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { DividerBaseProps } from '@fluentui/react-divider';
+import { DividerBaseState } from '@fluentui/react-divider';
+import type { DividerSlots as DividerSlots_2 } from '@fluentui/react-divider';
+import { DrawerFooterState } from '@fluentui/react-drawer';
+import { DrawerHeaderState } from '@fluentui/react-drawer';
+import type { EventHandler } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { InlineDrawerBaseProps } from '@fluentui/react-drawer';
+import { InlineDrawerSlots } from '@fluentui/react-drawer';
+import { JSXElement } from '@fluentui/react-utilities';
+import { NavCategoryContextValues } from '@fluentui/react-nav';
+import { NavCategoryItemProvider } from '@fluentui/react-nav';
+import { NavCategoryProps } from '@fluentui/react-nav';
+import { NavCategoryProvider } from '@fluentui/react-nav';
+import { NavCategoryState } from '@fluentui/react-nav';
+import { NavContextValue } from '@fluentui/react-nav';
+import { NavContextValues } from '@fluentui/react-nav';
+import { DrawerBodyProps as NavDrawerBodyProps } from '@fluentui/react-drawer';
+import { DrawerBodySlots as NavDrawerBodySlots } from '@fluentui/react-drawer';
+import { DrawerBodyState as NavDrawerBodyState } from '@fluentui/react-drawer';
+import { DrawerFooterProps as NavDrawerFooterProps } from '@fluentui/react-drawer';
+import { DrawerFooterSlots as NavDrawerFooterSlots } from '@fluentui/react-drawer';
+import { DrawerHeaderProps as NavDrawerHeaderProps } from '@fluentui/react-drawer';
+import { DrawerHeaderSlots as NavDrawerHeaderSlots } from '@fluentui/react-drawer';
+import { NavItemBaseProps as NavItemProps } from '@fluentui/react-nav';
+import { NavItemRegisterData } from '@fluentui/react-nav';
+import { NavItemSlots } from '@fluentui/react-nav';
+import { NavItemBaseState as NavItemState } from '@fluentui/react-nav';
+import { NavItemValue } from '@fluentui/react-nav';
+import { NavBaseProps as NavProps } from '@fluentui/react-nav';
+import { NavProvider } from '@fluentui/react-nav';
+import { NavSlots } from '@fluentui/react-nav';
+import { NavBaseState as NavState } from '@fluentui/react-nav';
+import { NavSubItemBaseProps as NavSubItemProps } from '@fluentui/react-nav';
+import { NavSubItemSlots } from '@fluentui/react-nav';
+import { NavSubItemBaseState as NavSubItemState } from '@fluentui/react-nav';
+import { OnNavItemSelectData } from '@fluentui/react-nav';
+import type { OverlayDrawerProps as OverlayDrawerProps_2 } from '@fluentui/react-drawer';
+import * as React_2 from 'react';
+import { RegisterNavItemEventHandler } from '@fluentui/react-nav';
+import { renderNavCategory_unstable } from '@fluentui/react-nav';
+import type { Slot } from '@fluentui/react-utilities';
+import { useNavBase_unstable as useNav_unstable } from '@fluentui/react-nav';
+import { useNavCategory_unstable } from '@fluentui/react-nav';
+import { useNavCategoryContext_unstable as useNavCategoryContext } from '@fluentui/react-nav';
+import { useNavCategoryContextValues_unstable } from '@fluentui/react-nav';
+import { useNavCategoryItemContext_unstable as useNavCategoryItemContext } from '@fluentui/react-nav';
+import { useNavContext_unstable as useNavContext } from '@fluentui/react-nav';
+import { useNavItemBase_unstable as useNavItem_unstable } from '@fluentui/react-nav';
+import { useNavSubItemBase_unstable as useNavSubItem_unstable } from '@fluentui/react-nav';
+
+// @public
+export const Nav: ForwardRefComponent<NavProps>;
+
+// @public
+export const NavCategory: ForwardRefComponent<NavCategoryProps>;
+
+// @public
+export type NavCategoryContextValue = {
+    open: boolean;
+    value: string;
+};
+
+export { NavCategoryContextValues }
+
+// @public
+export const NavCategoryItem: ForwardRefComponent<NavCategoryItemProps>;
+
+// @public
+export type NavCategoryItemContextValue = {
+    open: boolean;
+    value: string;
+};
+
+// @public (undocumented)
+export type NavCategoryItemContextValues = {
+    navCategoryItem: NavCategoryItemContextValue;
+};
+
+// @public
+export type NavCategoryItemProps = ComponentProps<NavCategoryItemSlots>;
+
+export { NavCategoryItemProvider }
+
+// @public (undocumented)
+export type NavCategoryItemSlots = {
+    root: NonNullable<Slot<'button'>>;
+    icon?: Slot<'span'>;
+    expandIcon?: Slot<'span'>;
+};
+
+// @public
+export type NavCategoryItemState = ComponentState<NavCategoryItemSlots> & NavCategoryItemContextValue & {
+    selected: boolean;
+};
+
+export { NavCategoryProps }
+
+export { NavCategoryProvider }
+
+export { NavCategoryState }
+
+export { NavContextValue }
+
+export { NavContextValues }
+
+// @public
+export const NavDivider: ForwardRefComponent<NavDividerProps>;
+
+// @public
+export type NavDividerProps = Omit<DividerProps, 'vertical'>;
+
+// @public (undocumented)
+export type NavDividerSlots = DividerSlots;
+
+// @public
+export type NavDividerState = DividerState;
+
+// @public
+export const NavDrawer: ForwardRefComponent<NavDrawerProps>;
+
+// @public
+export const NavDrawerBody: ForwardRefComponent<NavDrawerBodyProps>;
+
+export { NavDrawerBodyProps }
+
+export { NavDrawerBodySlots }
+
+export { NavDrawerBodyState }
+
+// @public
+export const NavDrawerFooter: ForwardRefComponent<NavDrawerFooterProps>;
+
+export { NavDrawerFooterProps }
+
+export { NavDrawerFooterSlots }
+
+// @public (undocumented)
+export type NavDrawerFooterState = DrawerFooterState & {
+    root: {
+        'data-scroll-state'?: string;
+    };
+};
+
+// @public
+export const NavDrawerHeader: ForwardRefComponent<NavDrawerHeaderProps>;
+
+export { NavDrawerHeaderProps }
+
+export { NavDrawerHeaderSlots }
+
+// @public (undocumented)
+export type NavDrawerHeaderState = DrawerHeaderState & {
+    root: {
+        'data-scroll-state'?: string;
+    };
+};
+
+// @public
+export type NavDrawerProps = DrawerProps & NavProps;
+
+// @public
+export type NavDrawerState = ComponentState<NavDrawerSlots> & Omit<NavContextValue, 'tabbable'>;
+
+// @public
+export const NavItem: ForwardRefComponent<NavItemProps>;
+
+export { NavItemProps }
+
+export { NavItemRegisterData }
+
+export { NavItemSlots }
+
+export { NavItemState }
+
+export { NavItemValue }
+
+export { NavProps }
+
+export { NavProvider }
+
+// @public
+export const NavSectionHeader: ForwardRefComponent<NavSectionHeaderProps>;
+
+// @public
+export type NavSectionHeaderProps = ComponentProps<NavSectionHeaderSlots>;
+
+// @public (undocumented)
+export type NavSectionHeaderSlots = {
+    root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;
+};
+
+// @public
+export type NavSectionHeaderState = ComponentState<NavSectionHeaderSlots>;
+
+export { NavSlots }
+
+export { NavState }
+
+// @public
+export const NavSubItem: ForwardRefComponent<NavSubItemProps>;
+
+// @public
+export const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps>;
+
+// @public
+export type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;
+
+// @public (undocumented)
+export type NavSubItemGroupSlots = {
+    root: NonNullable<Slot<'div'>>;
+};
+
+// @public
+export type NavSubItemGroupState = ComponentState<NavSubItemGroupSlots> & {
+    open: boolean;
+};
+
+export { NavSubItemProps }
+
+export { NavSubItemSlots }
+
+export { NavSubItemState }
+
+export { OnNavItemSelectData }
+
+export { RegisterNavItemEventHandler }
+
+// @public (undocumented)
+export const renderNav_unstable: (state: NavState, contextValues: NavContextValues) => JSXElement;
+
+export { renderNavCategory_unstable }
+
+// @public
+export const renderNavCategoryItem_unstable: (state: NavCategoryItemState, contextValues: NavCategoryItemContextValues) => JSXElement;
+
+// @public
+export const renderNavDivider_unstable: (state: DividerBaseState) => JSXElement;
+
+// @public (undocumented)
+export const renderNavDrawer_unstable: (state: NavDrawerState, contextValues: NavContextValues) => JSXElement;
+
+// @public
+export const renderNavDrawerBody_unstable: (state: NavDrawerBodyState) => JSXElement;
+
+// @public
+export const renderNavDrawerFooter_unstable: (state: DrawerFooterState) => JSXElement;
+
+// @public
+export const renderNavDrawerHeader_unstable: (state: DrawerHeaderState) => JSXElement;
+
+// @public (undocumented)
+export const renderNavItem_unstable: (state: NavItemState) => JSXElement;
+
+// @public
+export const renderNavSectionHeader_unstable: (state: NavSectionHeaderState) => JSXElement;
+
+// @public (undocumented)
+export const renderNavSubItem_unstable: (state: NavSubItemState) => JSXElement;
+
+// @public
+export const renderNavSubItemGroup_unstable: (state: NavSubItemGroupState) => JSXElement | null;
+
+export { useNav_unstable }
+
+export { useNavCategory_unstable }
+
+export { useNavCategoryContext }
+
+export { useNavCategoryContextValues_unstable }
+
+// @public
+export const useNavCategoryItem_unstable: (props: NavCategoryItemProps, ref: React_2.Ref<HTMLButtonElement>) => NavCategoryItemState;
+
+export { useNavCategoryItemContext }
+
+// @public
+export function useNavCategoryItemContextValues_unstable(state: NavCategoryItemState): NavCategoryItemContextValues;
+
+export { useNavContext }
+
+// @public (undocumented)
+export function useNavContextValues_unstable(state: NavState): NavContextValues;
+
+// @public
+export const useNavDivider_unstable: (props: NavDividerProps, ref: React_2.Ref<HTMLDivElement>) => NavDividerState;
+
+// @public
+export const useNavDrawer_unstable: (props: NavDrawerProps, ref: React_2.Ref<HTMLElement>) => NavDrawerState;
+
+// @public (undocumented)
+export const useNavDrawerBody_unstable: (props: NavDrawerBodyProps, ref: React_2.Ref<HTMLElement>) => NavDrawerBodyState;
+
+// @public
+export const useNavDrawerFooter_unstable: (props: NavDrawerFooterProps, ref: React_2.Ref<HTMLElement>) => NavDrawerFooterState;
+
+// @public
+export const useNavDrawerHeader_unstable: (props: NavDrawerHeaderProps, ref: React_2.Ref<HTMLElement>) => NavDrawerHeaderState;
+
+export { useNavItem_unstable }
+
+// @public
+export const useNavSectionHeader_unstable: (props: NavSectionHeaderProps, ref: React_2.Ref<HTMLDivElement>) => NavSectionHeaderState;
+
+export { useNavSubItem_unstable }
+
+// @public
+export const useNavSubItemGroup_unstable: (props: NavSubItemGroupProps, ref: React_2.Ref<HTMLDivElement>) => NavSubItemGroupState;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/package.json

@@ -37,6 +37,7 @@
     "@fluentui/react-label": "^9.4.1",
     "@fluentui/react-link": "^9.8.1",
     "@fluentui/react-message-bar": "^9.7.0",
+    "@fluentui/react-nav": "^9.3.24",
     "@fluentui/react-persona": "^9.7.3",
     "@fluentui/react-popover": "^9.14.2",
     "@fluentui/react-portal": "^9.8.12",
@@ -178,6 +179,12 @@
       "import": "./lib/message-bar.js",
       "require": "./lib-commonjs/message-bar.js"
     },
+    "./nav": {
+      "types": "./dist/nav.d.ts",
+      "node": "./lib-commonjs/nav.js",
+      "import": "./lib/nav.js",
+      "require": "./lib-commonjs/nav.js"
+    },
     "./persona": {
       "types": "./dist/persona.d.ts",
       "node": "./lib-commonjs/persona.js",