Back to Fluentui

React Nav.Api

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

4.40.2-hotfix217.3 KB
Original Source

API Report File for "@fluentui/react-nav"

Do not edit this file. It is a report generated by API Extractor.

ts

import { ARIAButtonSlotProps } from '@fluentui/react-aria';
import { ButtonProps } from '@fluentui/react-button';
import { ButtonSlots } from '@fluentui/react-button';
import { ButtonState } from '@fluentui/react-button';
import { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { DividerProps } from '@fluentui/react-divider';
import { DividerSlots } from '@fluentui/react-divider';
import type { DividerState } from '@fluentui/react-divider';
import type { DrawerBodyProps } from '@fluentui/react-drawer';
import type { DrawerBodySlots } from '@fluentui/react-drawer';
import type { DrawerBodyState } from '@fluentui/react-drawer';
import type { DrawerFooterProps } from '@fluentui/react-drawer';
import type { DrawerFooterSlots } from '@fluentui/react-drawer';
import type { DrawerFooterState } from '@fluentui/react-drawer';
import type { DrawerHeaderProps } from '@fluentui/react-drawer';
import type { DrawerHeaderSlots } from '@fluentui/react-drawer';
import type { DrawerHeaderState } from '@fluentui/react-drawer';
import { DrawerProps } from '@fluentui/react-drawer';
import { DrawerSlots } from '@fluentui/react-drawer';
import { DrawerState } from '@fluentui/react-drawer';
import type { EventData } from '@fluentui/react-utilities';
import { EventHandler } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { InlineDrawerSlots } from '@fluentui/react-drawer';
import type { JSXElement } from '@fluentui/react-utilities';
import { MenuButtonProps } from '@fluentui/react-button';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import { SlotClassNames } from '@fluentui/react-utilities';
import { ToggleButtonProps } from '@fluentui/react-button';
import type { TooltipProps } from '@fluentui/react-tooltip';

// @public
export const AppItem: ForwardRefComponent<AppItemProps>;

// @public (undocumented)
export const appItemClassNames: SlotClassNames<AppItemSlots>;

// @public
export type AppItemProps = ComponentProps<AppItemSlots> & {
    href?: string;
};

// @public (undocumented)
export type AppItemSlots = {
    root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;
    icon?: Slot<'span'>;
};

// @public
export type AppItemState = ComponentState<AppItemSlots> & {
    density: NavDensity;
};

// @public
export const AppItemStatic: ForwardRefComponent<AppItemStaticProps>;

// @public (undocumented)
export const appItemStaticClassNames: SlotClassNames<AppItemStaticSlots>;

// @public
export type AppItemStaticProps = ComponentProps<AppItemStaticSlots> & {};

// @public (undocumented)
export type AppItemStaticSlots = {
    root: Slot<'div'>;
    icon?: Slot<'span'>;
};

// @public
export type AppItemStaticState = ComponentState<AppItemStaticSlots> & {
    density: NavDensity;
};

// @public
export const Hamburger: ForwardRefComponent<HamburgerProps>;

// @public (undocumented)
export const hamburgerClassNames: SlotClassNames<ButtonSlots>;

// @public
export type HamburgerProps = ButtonProps;

// @public
export type HamburgerState = ButtonState;

// @public
export const Nav: ForwardRefComponent<NavProps>;

// @public
export const NavCategory: ForwardRefComponent<NavCategoryProps>;

// @public (undocumented)
export type NavCategoryContextValues = {
    categoryValue: NavCategoryContextValue;
};

// @public
export const NavCategoryItem: ForwardRefComponent<NavCategoryItemProps>;

// @public (undocumented)
export const navCategoryItemClassNames: SlotClassNames<NavCategoryItemSlots>;

// @public (undocumented)
export type NavCategoryItemContextValues = {
    navCategoryItem: NavCategoryItemContextValue;
};

// @public
export type NavCategoryItemProps = ComponentProps<Partial<NavCategoryItemSlots>>;

// @public (undocumented)
export const NavCategoryItemProvider: React_2.Provider<NavCategoryItemContextValue>;

// @public (undocumented)
export type NavCategoryItemSlots = {
    root: NonNullable<Slot<'button'>>;
    icon?: Slot<'span'>;
    expandIcon: NonNullable<Slot<'span'>>;
    expandIconMotion?: Slot<PresenceMotionSlotProps>;
};

// @public
export type NavCategoryItemState = ComponentState<NavCategoryItemSlots> & NavCategoryItemContextValue & {
    selected: boolean;
    density: NavDensity;
};

// @public
export type NavCategoryProps = {
    value: NavItemValue;
    children?: React_2.ReactNode | null;
};

// @public (undocumented)
export const NavCategoryProvider: React_2.Provider<NavCategoryContextValue>;

// @public
export type NavCategoryState = NavCategoryContextValue & Required<NavCategoryProps>;

// @public (undocumented)
export const navClassNames: SlotClassNames<NavSlots>;

// @public (undocumented)
export type NavContextValue = Pick<NavProps, 'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'density'> & {
    onRegister: RegisterNavItemEventHandler;
    onUnregister: RegisterNavItemEventHandler;
    onSelect: EventHandler<OnNavItemSelectData>;
    getRegisteredNavItems: () => {
        selectedValue?: NavItemValue;
        selectedCategoryValue?: NavItemValue;
        previousSelectedValue?: NavItemValue;
        registeredNavItems: Record<string, NavItemRegisterData>;
    };
    onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData>;
    openCategories: NavItemValue[];
    multiple: boolean;
    tabbable: boolean;
};

// @public
export type NavContextValues = {
    nav: NavContextValue;
};

// @public
export type NavDensity = 'small' | 'medium';

// @public
export const NavDivider: ForwardRefComponent<NavDividerProps>;

// @public (undocumented)
export const navDividerClassNames: SlotClassNames<DividerSlots>;

// @public
export type NavDividerProps = DividerProps;

// @public
export type NavDividerState = DividerState;

// @public
export const NavDrawer: ForwardRefComponent<NavDrawerProps>;

// @public
export const NavDrawerBody: ForwardRefComponent<NavDrawerBodyProps>;

// @public (undocumented)
export const navDrawerBodyClassNames: SlotClassNames<NavDrawerBodySlots>;

// @public
export type NavDrawerBodyProps = DrawerBodyProps;

// @public (undocumented)
export type NavDrawerBodySlots = DrawerBodySlots;

// @public
export type NavDrawerBodyState = DrawerBodyState;

// @public (undocumented)
export const navDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>>;

// @public
export const NavDrawerFooter: ForwardRefComponent<NavDrawerFooterProps>;

// @public (undocumented)
export const navDrawerFooterClassNames: SlotClassNames<NavDrawerFooterSlots>;

// @public
export type NavDrawerFooterProps = DrawerFooterProps;

// @public (undocumented)
export type NavDrawerFooterSlots = DrawerFooterSlots;

// @public
export type NavDrawerFooterState = DrawerFooterState;

// @public
export const NavDrawerHeader: ForwardRefComponent<NavDrawerHeaderProps>;

// @public (undocumented)
export const navDrawerHeaderClassNames: SlotClassNames<NavDrawerHeaderSlots>;

// @public
export type NavDrawerHeaderProps = DrawerHeaderProps;

// @public (undocumented)
export type NavDrawerHeaderSlots = DrawerHeaderSlots;

// @public
export type NavDrawerHeaderState = DrawerHeaderState;

// @public
export type NavDrawerProps = ComponentProps<NavDrawerSlots> & DrawerProps & NavProps & {
    tabbable?: boolean;
};

// @public
export type NavDrawerSlots = DrawerSlots;

// @public
export type NavDrawerState = DrawerState & NavContextValue & {
    size?: 'small' | 'medium' | 'large' | 'full';
};

// @public
export const NavItem: ForwardRefComponent<NavItemProps>;

// @public (undocumented)
export const navItemClassNames: SlotClassNames<NavItemSlots>;

// @public
export type NavItemProps = ComponentProps<NavItemSlots> & {
    href?: string;
    value: NavItemValue;
};

// @public (undocumented)
export type NavItemRegisterData = {
    value: NavItemValue;
    ref: React_2.RefObject<HTMLElement | null>;
};

// @public (undocumented)
export type NavItemSlots = {
    root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;
    icon?: Slot<'span'>;
};

// @public
export type NavItemState = ComponentState<NavItemSlots> & Pick<NavItemProps, 'value'> & {
    selected: boolean;
    density: NavDensity;
};

// @public
export type NavItemValue = string;

// @public
export type NavProps = ComponentProps<NavSlots> & {
    defaultSelectedValue?: NavItemValue;
    defaultSelectedCategoryValue?: NavItemValue;
    defaultOpenCategories?: NavItemValue[];
    openCategories?: NavItemValue[];
    onNavItemSelect?: EventHandler<OnNavItemSelectData>;
    selectedValue?: NavItemValue;
    selectedCategoryValue?: NavItemValue;
    multiple?: boolean;
    onNavCategoryItemToggle?: EventHandler<OnNavItemSelectData>;
    density?: NavDensity;
};

// @public (undocumented)
export const NavProvider: React_2.Provider<NavContextValue | undefined>;

// @public
export const NavSectionHeader: ForwardRefComponent<NavSectionHeaderProps>;

// @public (undocumented)
export const navSectionHeaderClassNames: SlotClassNames<NavSectionHeaderSlots>;

// @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>;

// @public (undocumented)
export type NavSlots = {
    root: NonNullable<Slot<'div'>>;
};

// @public
export type NavState = ComponentState<NavSlots> & NavContextValue;

// @public
export const NavSubItem: ForwardRefComponent<NavSubItemProps>;

// @public (undocumented)
export const navSubItemClassNames: SlotClassNames<NavSubItemSlots>;

// @public
export const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps>;

// @public (undocumented)
export const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>>;

// @public
export type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;

// @public (undocumented)
export type NavSubItemGroupSlots = {
    root: NonNullable<Slot<'div'>>;
    collapseMotion?: Slot<PresenceMotionSlotProps<NavSubItemGroupCollapseMotionParams>>;
};

// @public
export type NavSubItemGroupState = ComponentState<NavSubItemGroupSlots> & {
    open: boolean;
};

// @public
export type NavSubItemProps = ComponentProps<NavSubItemSlots> & {
    href?: string;
    value: NavItemValue;
};

// @public (undocumented)
export type NavSubItemSlots = {
    root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;
};

// @public
export type NavSubItemState = ComponentState<NavSubItemSlots> & Pick<NavSubItemProps, 'value'> & {
    selected: boolean;
    density: NavDensity;
};

// @public (undocumented)
export type OnNavItemSelectData = EventData<'click', React_2.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {
    value: NavItemValue;
    categoryValue?: NavItemValue;
};

// @public (undocumented)
export type RegisterNavItemEventHandler = (data: NavItemRegisterData) => void;

// @public
export const renderAppItem_unstable: (state: AppItemState) => JSXElement;

// @public
export const renderAppItemStatic_unstable: (state: AppItemStaticState) => JSXElement;

// @public (undocumented)
export const renderNav_unstable: (state: NavState, contextValues: NavContextValues) => JSXElement;

// @public
export const renderNavCategory_unstable: (state: NavCategoryState, contextValues: NavCategoryContextValues) => JSXElement;

// @public
export const renderNavCategoryItem_unstable: (state: NavCategoryItemState, contextValues: NavCategoryItemContextValues) => JSXElement;

// @public (undocumented)
export const renderNavDrawer_unstable: (state: NavDrawerState, contextValues: NavContextValues) => JSXElement;

// @public
export const renderNavItem_unstable: (state: NavItemState) => JSXElement;

// @public
export const renderNavSectionHeader_unstable: (state: NavSectionHeaderState) => JSXElement;

// @public
export const renderNavSubItem_unstable: (state: NavSubItemState) => JSXElement;

// @public
export const renderNavSubItemGroup_unstable: (state: NavSubItemGroupState) => JSXElement;

// @public
export const renderSplitNavItem_unstable: (state: SplitNavItemState) => JSXElement;

// @public
export const SplitNavItem: ForwardRefComponent<SplitNavItemProps>;

// @public (undocumented)
export const splitNavItemClassNames: SlotClassNames<SplitNavItemSlots>;

// @public
export type SplitNavItemProps = ComponentProps<SplitNavItemSlots>;

// @public (undocumented)
export type SplitNavItemSlots = {
    root: Slot<'div'>;
    navItem?: NonNullable<Slot<NavItemProps & NavSubItemProps>>;
    actionButton?: Slot<ButtonProps>;
    toggleButton?: Slot<ToggleButtonProps>;
    menuButton?: Slot<MenuButtonProps>;
    actionButtonTooltip?: Slot<TooltipProps>;
    toggleButtonTooltip?: Slot<TooltipProps>;
    menuButtonTooltip?: Slot<TooltipProps>;
};

// @public
export type SplitNavItemState = ComponentState<SplitNavItemSlots> & {
    density: NavDensity;
    isSubNav: boolean;
};

// @public
export const useAppItem_unstable: (props: AppItemProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => AppItemState;

// @public
export const useAppItemStatic_unstable: (props: AppItemStaticProps, ref: React_2.Ref<HTMLDivElement>) => AppItemStaticState;

// @public
export const useAppItemStaticStyles_unstable: (state: AppItemStaticState) => AppItemStaticState;

// @public
export const useAppItemStyles_unstable: (state: AppItemState) => AppItemState;

// @public
export const useHamburger_unstable: (props: HamburgerProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => HamburgerState;

// @public
export const useHamburgerStyles_unstable: (state: HamburgerState) => HamburgerState;

// @public
export const useNav_unstable: (props: NavProps, ref: React_2.Ref<HTMLDivElement>) => NavState;

// @public
export const useNavCategory_unstable: (props: NavCategoryProps, ref: React_2.Ref<HTMLDivElement>) => NavCategoryState;

// @public (undocumented)
export const useNavCategoryContext_unstable: () => NavCategoryContextValue;

// @public (undocumented)
export function useNavCategoryContextValues_unstable(state: NavCategoryState): NavCategoryContextValues;

// @public
export const useNavCategoryItem_unstable: (props: NavCategoryItemProps, ref: React_2.Ref<HTMLButtonElement>) => NavCategoryItemState;

// @public (undocumented)
export const useNavCategoryItemContext_unstable: () => NavCategoryItemContextValue;

// @public (undocumented)
export function useNavCategoryItemContextValues_unstable(state: NavCategoryItemState): NavCategoryItemContextValues;

// @public
export const useNavCategoryItemStyles_unstable: (state: NavCategoryItemState) => NavCategoryItemState;

// @public (undocumented)
export const useNavContext_unstable: () => NavContextValue;

// @public (undocumented)
export function useNavContextValues_unstable(state: NavState): NavContextValues;

// @public
export const useNavDivider_unstable: (props: NavDividerProps, ref: React_2.Ref<HTMLElement>) => NavDividerState;

// @public
export const useNavDividerStyles_unstable: (state: NavDividerState) => NavDividerState;

// @public
export const useNavDrawer_unstable: (props: NavDrawerProps, ref: React_2.Ref<HTMLDivElement>) => NavDrawerState;

// @public
export const useNavDrawerBody_unstable: (props: NavDrawerBodyProps, ref: React_2.Ref<HTMLDivElement>) => NavDrawerBodyState;

// @public
export const useNavDrawerBodyStyles_unstable: (state: NavDrawerBodyState) => NavDrawerBodyState;

// @public
export const useNavDrawerFooter_unstable: (props: NavDrawerFooterProps, ref: React_2.Ref<HTMLElement>) => NavDrawerFooterState;

// @public
export const useNavDrawerFooterStyles_unstable: (state: NavDrawerFooterState) => NavDrawerFooterState;

// @public
export const useNavDrawerHeader_unstable: (props: NavDrawerHeaderProps, ref: React_2.Ref<HTMLElement>) => NavDrawerHeaderState;

// @public
export const useNavDrawerHeaderStyles_unstable: (state: NavDrawerHeaderState) => NavDrawerHeaderState;

// @public
export const useNavDrawerStyles_unstable: (state: NavDrawerState) => NavDrawerState;

// @public
export const useNavItem_unstable: (props: NavItemProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => NavItemState;

// @public
export const useNavItemStyles_unstable: (state: NavItemState) => NavItemState;

// @public
export const useNavSectionHeader_unstable: (props: NavSectionHeaderProps, ref: React_2.Ref<HTMLDivElement>) => NavSectionHeaderState;

// @public
export const useNavSectionHeaderStyles_unstable: (state: NavSectionHeaderState) => NavSectionHeaderState;

// @public
export const useNavStyles_unstable: (state: NavState) => NavState;

// @public
export const useNavSubItem_unstable: (props: NavSubItemProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => NavSubItemState;

// @public
export const useNavSubItemGroup_unstable: (props: NavSubItemGroupProps, ref: React_2.Ref<HTMLDivElement>) => NavSubItemGroupState;

// @public
export const useNavSubItemGroupStyles_unstable: (state: NavSubItemGroupState) => NavSubItemGroupState;

// @public
export const useNavSubItemStyles_unstable: (state: NavSubItemState) => NavSubItemState;

// @public
export const useSplitNavItem_unstable: (props: SplitNavItemProps, ref: React_2.Ref<HTMLDivElement>) => SplitNavItemState;

// @public
export const useSplitNavItemStyles_unstable: (state: SplitNavItemState) => SplitNavItemState;

// (No @packageDocumentation comment for this package)