React Tree.Api

import type { ArrowDown } from '@fluentui/keyboard-keys';
import type { ArrowLeft } from '@fluentui/keyboard-keys';
import type { ArrowRight } from '@fluentui/keyboard-keys';
import type { ArrowUp } from '@fluentui/keyboard-keys';
import type { AvatarContextValue } from '@fluentui/react-avatar';
import type { AvatarSize } from '@fluentui/react-avatar';
import { ButtonContextValue } from '@fluentui/react-button';
import { Checkbox } from '@fluentui/react-checkbox';
import { CheckboxProps } from '@fluentui/react-checkbox';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import { ContextSelector } from '@fluentui/react-context-selector';
import type { DistributiveOmit } from '@fluentui/react-utilities';
import type { End } from '@fluentui/keyboard-keys';
import type { Enter } from '@fluentui/keyboard-keys';
import type { EventData } from '@fluentui/react-utilities';
import type { EventHandler } from '@fluentui/react-utilities';
import type { ExtractSlotProps } from '@fluentui/react-utilities';
import { ForwardRefComponent } from '@fluentui/react-utilities';
import type { Home } from '@fluentui/keyboard-keys';
import type { JSXElement } from '@fluentui/react-utilities';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import { Radio } from '@fluentui/react-radio';
import { RadioProps } from '@fluentui/react-radio';
import * as React_2 from 'react';
import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';

// @public
export const flattenTree_unstable: <Props extends TreeItemProps>(items: FlattenTreeItem<Props>[]) => FlattenedTreeItem<Props>[];

// @public (undocumented)
export type FlattenTreeItem<Props extends TreeItemProps> = Omit<Props, 'subtree' | 'itemType'> & {
    value: TreeItemValue;
    subtree?: FlattenTreeItem<Props>[];
};

// @public
export const FlatTree: ForwardRefComponent<FlatTreeProps>;

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

// @public
export const FlatTreeItem: ForwardRefComponent<FlatTreeItemProps>;

// @public
export type FlatTreeItemProps = TreeItemProps & {
    value: TreeItemValue;
    'aria-level': number;
    'aria-setsize': number;
    'aria-posinset': number;
};

// @public (undocumented)
export type FlatTreeProps = ComponentProps<TreeSlots> & {
    navigationMode?: 'tree' | 'treegrid';
    appearance?: 'subtle' | 'subtle-alpha' | 'transparent';
    size?: 'small' | 'medium';
    openItems?: Iterable<TreeItemValue>;
    onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;
    onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;
    selectionMode?: SelectionMode_2;
    checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;
    onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;
};

// @public (undocumented)
export type FlatTreeSlots = TreeSlots;

// @public (undocumented)
export type FlatTreeState = ComponentState<FlatTreeSlots> & TreeContextValue & {
    open: boolean;
};

// @public
export type HeadlessFlatTree<Props extends HeadlessFlatTreeItemProps> = {
    getTreeProps(): Required<Pick<FlatTreeProps, 'openItems' | 'onOpenChange' | 'onNavigation' | 'checkedItems' | 'onCheckedChange'>> & {
        ref: React_2.Ref<HTMLDivElement>;
        openItems: ImmutableSet<TreeItemValue>;
    };
    navigate(data: TreeNavigationData_unstable): void;
    getNextNavigableItem(visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable): HeadlessTreeItem<Props> | undefined;
    getElementFromItem(item: HeadlessTreeItem<Props>): HTMLElement | null;
    items(): IterableIterator<HeadlessTreeItem<Props>>;
};

// @public (undocumented)
export type HeadlessFlatTreeItem<Props extends HeadlessFlatTreeItemProps> = HeadlessTreeItem<Props>;

// @public (undocumented)
export type HeadlessFlatTreeItemProps = HeadlessTreeItemProps;

// @public (undocumented)
export type HeadlessFlatTreeOptions = Pick<FlatTreeProps, 'onOpenChange' | 'onNavigation' | 'selectionMode' | 'onCheckedChange'> & Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems'> & {
    defaultCheckedItems?: TreeProps['checkedItems'];
};

// @public (undocumented)
export const renderFlatTree_unstable: (state: FlatTreeState, contextValues: FlatTreeContextValues) => JSXElement;

// @public (undocumented)
export const renderTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSXElement;

// @public
export const renderTreeItem_unstable: (state: TreeItemState, contextValues: TreeItemContextValues) => JSXElement;

// @public
export const renderTreeItemLayout_unstable: (state: TreeItemLayoutState) => JSXElement;

// @public
export const renderTreeItemPersonaLayout_unstable: (state: TreeItemPersonaLayoutState, contextValues: TreeItemPersonaLayoutContextValues) => JSXElement;

// @public (undocumented)
export type SubtreeContextValue = {
    contextType: 'subtree';
    level: number;
};

// @public
export const Tree: ForwardRefComponent<TreeProps>;

// @public (undocumented)
export type TreeCheckedChangeData = {
    value: TreeItemValue;
    checkedItems: Map<TreeItemValue, TreeSelectionValue>;
    target: HTMLElement;
    event: React_2.ChangeEvent<HTMLElement>;
    type: 'Change';
} & ({
    selectionMode: 'multiselect';
    checked: MultiSelectValue;
} | {
    selectionMode: 'single';
    checked: SingleSelectValue;
});

// @public (undocumented)
export type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];

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

// @public (undocumented)
export type TreeContextValue = {
    contextType?: 'root';
    level: number;
    treeType: 'nested' | 'flat';
    selectionMode: 'none' | SelectionMode_2;
    appearance: 'subtle' | 'subtle-alpha' | 'transparent';
    size: 'small' | 'medium';
    openItems: ImmutableSet<TreeItemValue>;
    checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;
    requestTreeResponse(request: TreeItemRequest): void;
    forceUpdateRovingTabIndex?(): void;
    navigationMode?: 'tree' | 'treegrid';
};

// @public (undocumented)
export type TreeContextValues = {
    tree: TreeContextValue | SubtreeContextValue;
};

// @public
export const TreeItem: ForwardRefComponent<TreeItemProps>;

// @public (undocumented)
export const treeItemClassNames: SlotClassNames<TreeItemSlots>;

// @public (undocumented)
export type TreeItemContextValue = {
    isActionsVisible: boolean;
    isAsideVisible: boolean;
    selectionRef: React_2.Ref<HTMLInputElement>;
    actionsRef: React_2.Ref<HTMLDivElement>;
    expandIconRef: React_2.Ref<HTMLDivElement>;
    layoutRef: React_2.Ref<HTMLDivElement>;
    subtreeRef: React_2.Ref<HTMLDivElement>;
    treeItemRef?: React_2.RefObject<HTMLDivElement | null>;
    itemType: TreeItemType;
    value: TreeItemValue;
    open: boolean;
    checked: TreeSelectionValue;
};

// @public (undocumented)
export type TreeItemCSSProperties = React_2.CSSProperties & {
    [treeItemLevelToken]?: string | number;
};

// @public
export const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;

// @public (undocumented)
export const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots>;

// @public
export type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;

// @public (undocumented)
export type TreeItemLayoutSlots = {
    root: Slot<'div'>;
    main: NonNullable<Slot<'div'>>;
    iconBefore?: Slot<'div'>;
    iconAfter?: Slot<'div'>;
    expandIcon?: Slot<'div'>;
    aside?: Slot<'div'>;
    actions?: Slot<TreeItemLayoutActionSlotProps>;
    selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;
};

// @public
export type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {
    buttonContextValue: ButtonContextValue;
};

// @public (undocumented)
export const treeItemLevelToken: "--fluent-TreeItem--level";

// @public (undocumented)
export type TreeItemOpenChangeData = {
    open: boolean;
    value: TreeItemValue;
    target: HTMLElement;
} & ({
    event: React_2.MouseEvent<HTMLElement>;
    type: 'ExpandIconClick';
} | {
    event: React_2.MouseEvent<HTMLElement>;
    type: 'Click';
} | {
    event: React_2.KeyboardEvent<HTMLElement>;
    type: typeof Enter;
} | {
    event: React_2.KeyboardEvent<HTMLElement>;
    type: typeof ArrowRight;
} | {
    event: React_2.KeyboardEvent<HTMLElement>;
    type: typeof ArrowLeft;
});

// @public (undocumented)
export type TreeItemOpenChangeEvent = TreeItemOpenChangeData['event'];

// @public
export const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps>;

// @public (undocumented)
export const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots>;

// @public
export type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;

// @public (undocumented)
export type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {
    root: NonNullable<Slot<'div'>>;
    media: NonNullable<Slot<'div'>>;
    main: NonNullable<Slot<'div'>>;
    description?: Slot<'div'>;
};

// @public
export type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {
    avatarSize: AvatarSize;
    buttonContextValue: ButtonContextValue;
};

// @public
export type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {
    itemType: TreeItemType;
    value?: TreeItemValue;
    open?: boolean;
    onOpenChange?: (e: TreeItemOpenChangeEvent, data: TreeItemOpenChangeData) => void;
    parentValue?: TreeItemValue;
};

// @public (undocumented)
export const TreeItemProvider: React_2.Provider<TreeItemContextValue | undefined> & React_2.FC<React_2.ProviderProps<TreeItemContextValue | undefined>>;

// @public (undocumented)
export type TreeItemSlots = {
    root: Slot<ExtractSlotProps<Slot<'div'> & {
        style?: TreeItemCSSProperties;
    }>>;
};

// @public
export type TreeItemState = ComponentState<TreeItemSlots> & TreeItemContextValue & {
    level: number;
    itemType: TreeItemType;
};

// @public (undocumented)
export type TreeItemType = 'leaf' | 'branch';

// @public (undocumented)
export type TreeItemValue = string | number;

// @public (undocumented)
export type TreeNavigationData_unstable = {
    target: HTMLElement;
    value: TreeItemValue;
    parentValue: TreeItemValue | undefined;
} & ({
    event: React_2.MouseEvent<HTMLElement>;
    type: 'Click';
} | {
    event: React_2.KeyboardEvent<HTMLElement>;
    type: 'TypeAhead';
} | {
    event: React_2.KeyboardEvent<HTMLElement>;
    type: typeof ArrowRight;
} | {
    event: React_2.KeyboardEvent<HTMLElement>;
    type: typeof ArrowLeft;
} | {
    event: React_2.KeyboardEvent<HTMLElement>;
    type: typeof ArrowUp;
} | {
    event: React_2.KeyboardEvent<HTMLElement>;
    type: typeof ArrowDown;
} | {
    event: React_2.KeyboardEvent<HTMLElement>;
    type: typeof Home;
} | {
    event: React_2.KeyboardEvent<HTMLElement>;
    type: typeof End;
});

// @public
export type TreeNavigationDataParam = TreeNavigationData_unstable & {
    preventScroll(): void;
    isScrollPrevented(): boolean;
};

// @public (undocumented)
export type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];

// @public (undocumented)
export type TreeNavigationMode = 'tree' | 'treegrid';

// @public (undocumented)
export type TreeOpenChangeData = {
    open: boolean;
    openItems: Set<TreeItemValue>;
    value: TreeItemValue;
    target: HTMLElement;
} & ({
    event: React_2.MouseEvent<HTMLElement>;
    type: 'ExpandIconClick';
} | {
    event: React_2.MouseEvent<HTMLElement>;
    type: 'Click';
}
/**
* @deprecated
* Use `type: 'Click'` instead of Enter,
* an enter press will trigger a click event, which will trigger an open change,
* so there is no need to have a separate type for it.
*/
| {
    event: React_2.KeyboardEvent<HTMLElement>;
    type: typeof Enter;
} | {
    event: React_2.KeyboardEvent<HTMLElement>;
    type: typeof ArrowRight;
} | {
    event: React_2.KeyboardEvent<HTMLElement>;
    type: typeof ArrowLeft;
});

// @public (undocumented)
export type TreeOpenChangeEvent = TreeOpenChangeData['event'];

// @public (undocumented)
export type TreeProps = ComponentProps<TreeSlots> & {
    navigationMode?: TreeNavigationMode;
    appearance?: 'subtle' | 'subtle-alpha' | 'transparent';
    size?: 'small' | 'medium';
    openItems?: Iterable<TreeItemValue>;
    defaultOpenItems?: Iterable<TreeItemValue>;
    onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;
    onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationDataParam): void;
    selectionMode?: SelectionMode_2;
    checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;
    onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;
};

// @public (undocumented)
export const TreeProvider: {
    (props: React_2.ProviderProps<TreeContextValue | SubtreeContextValue>): JSXElement;
    displayName: string;
};

// @public (undocumented)
export const TreeRootReset: (props: TreeRootResetProps) => JSXElement;

// @public (undocumented)
export type TreeSelectionValue = MultiSelectValue | SingleSelectValue;

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

// @public
export type TreeState = ComponentState<TreeSlots> & {
    open: boolean;
} & (TreeContextValue | SubtreeContextValue);

// @public (undocumented)
export const useFlatTree_unstable: (props: FlatTreeProps, ref: React_2.Ref<HTMLElement>) => FlatTreeState;

// @public (undocumented)
export const useFlatTreeContextValues_unstable: (state: FlatTreeState) => FlatTreeContextValues;

// @public (undocumented)
export const useFlatTreeStyles_unstable: (state: FlatTreeState) => FlatTreeState;

// @public
export function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(props: Props[], options?: HeadlessFlatTreeOptions): HeadlessFlatTreeReturn<Props>;

// @public (undocumented)
export const useSubtreeContext_unstable: () => SubtreeContextValue;

// @public (undocumented)
export const useTree_unstable: (props: TreeProps, ref: React_2.Ref<HTMLElement>) => TreeState;

// @public (undocumented)
export const useTreeContext_unstable: <T>(selector: ContextSelector<TreeContextValue, T>) => T;

// @public (undocumented)
export function useTreeContextValues_unstable(state: TreeState): TreeContextValues;

// @public
export function useTreeItem_unstable(props: TreeItemProps, ref: React_2.Ref<HTMLDivElement>): TreeItemState;

// @public (undocumented)
export const useTreeItemContext_unstable: <T>(selector: ContextSelector<TreeItemContextValue, T>) => T;

// @public (undocumented)
export function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues;

// @public
export const useTreeItemLayout_unstable: (props: TreeItemLayoutProps, ref: React_2.Ref<HTMLElement>) => TreeItemLayoutState;

// @public
export const useTreeItemLayoutStyles_unstable: (state: TreeItemLayoutState) => TreeItemLayoutState;

// @public
export const useTreeItemPersonaLayout_unstable: (props: TreeItemPersonaLayoutProps, ref: React_2.Ref<HTMLSpanElement>) => TreeItemPersonaLayoutState;

// @public
export const useTreeItemPersonaLayoutStyles_unstable: (state: TreeItemPersonaLayoutState) => TreeItemPersonaLayoutState;

// @public
export const useTreeItemStyles_unstable: (state: TreeItemState) => TreeItemState;

// @public
export function useTreeNavigation(navigationMode?: TreeNavigationMode): {
    navigate: (data: TreeNavigationData_unstable, focusOptions?: FocusOptions) => HTMLElement | null;
    treeRef: React_2.RefCallback<HTMLElement>;
    forceUpdateRovingTabIndex: () => void;
};

// @public (undocumented)
export const useTreeStyles_unstable: (state: TreeState) => TreeState;

// (No @packageDocumentation comment for this package)