Outlook_Addin_LLM/node_modules/@fluentui/react-tree/dist/index.d.ts

910 lines
34 KiB
TypeScript
Raw Permalink Normal View History

/// <reference types="react" />
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 { 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';
declare type FlattenedTreeItem<Props extends TreeItemProps> = HeadlessFlatTreeItemProps & Props;
/**
* Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`
* @example
* ```tsx
* const defaultItems = flattenTree_unstable([
* {
* children: <TreeItemLayout>level 1, item 1</TreeItemLayout>,
* subtree: [
* {
* children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,
* },
* {
* children: <TreeItemLayout>level 2, item 2</TreeItemLayout>,
* },
* {
* children: <TreeItemLayout>level 2, item 3</TreeItemLayout>,
* },
* ],
* },
* {
* children: <TreeItemLayout>level 1, item 2</TreeItemLayout>,
* subtree: [
* {
* children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,
* subtree: [
* {
* children: <TreeItemLayout>level 3, item 1</TreeItemLayout>,
* subtree: [
* {
* children: <TreeItemLayout>level 4, item 1</TreeItemLayout>,
* },
* ],
* },
* ],
* },
* ],
* },
* ]);
* ```
*/
export declare const flattenTree_unstable: <Props extends TreeItemProps>(items: FlattenTreeItem<Props>[]) => FlattenedTreeItem<Props>[];
export declare type FlattenTreeItem<Props extends TreeItemProps> = Omit<Props, 'subtree' | 'itemType'> & {
value: TreeItemValue;
subtree?: FlattenTreeItem<Props>[];
};
/**
* The `FlatTree` component is a variation of the `Tree` component that deals with a flattened data structure.
*
* It should be used on cases where more complex interactions with a Tree is required.
* On simple scenarios it is advised to simply use a nested structure instead.
*/
export declare const FlatTree: ForwardRefComponent<FlatTreeProps>;
export declare const flatTreeClassNames: SlotClassNames<Omit<FlatTreeSlots, 'collapseMotion'>>;
declare type FlatTreeContextValues = {
tree: TreeContextValue;
};
/**
* The `FlatTreeItem` component represents a single item in a flat tree.
*/
export declare const FlatTreeItem: ForwardRefComponent<FlatTreeItemProps>;
/**
* FlatTreeItem Props
*/
export declare type FlatTreeItemProps = TreeItemProps & {
value: TreeItemValue;
'aria-level': number;
'aria-setsize': number;
'aria-posinset': number;
};
export declare type FlatTreeProps = ComponentProps<TreeSlots> & {
/**
* A tree item can have various appearances:
* - 'subtle' (default): The default tree item styles.
* - 'subtle-alpha': Minimizes emphasis on hovered or focused states.
* - 'transparent': Removes background color.
* @default 'subtle'
*/
appearance?: 'subtle' | 'subtle-alpha' | 'transparent';
/**
* Size of the tree item.
* @default 'medium'
*/
size?: 'small' | 'medium';
/**
* This refers to a list of ids of opened tree items.
* Controls the state of the open tree items.
* These property is ignored for subtrees.
*/
openItems?: Iterable<TreeItemValue>;
/**
* Callback fired when the component changes value from open state.
* These property is ignored for subtrees.
*
* @param event - a React's Synthetic event
* @param data - A data object with relevant information,
* such as open value and type of interaction that created the event.
*/
onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;
/**
* Callback fired when navigation happens inside the component.
* These property is ignored for subtrees.
*
* FIXME: This method is not ideal, as navigation should be handled internally by tabster.
*
* @param event - a React's Synthetic event
* @param data - A data object with relevant information,
*/
onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;
/**
* This refers to the selection mode of the tree.
* - undefined: No selection can be done.
* - 'single': Only one tree item can be selected, radio buttons are rendered.
* - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.
*
* @default undefined
*/
selectionMode?: SelectionMode_2;
/**
* This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.
* Controls the state of the checked tree items.
* These property is ignored for subtrees.
*/
checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;
/**
* Callback fired when the component changes value from checked state.
* These property is ignored for subtrees.
*
* @param event - a React's Synthetic event
* @param data - A data object with relevant information,
* such as checked value and type of interaction that created the event.
*/
onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;
};
export declare type FlatTreeSlots = TreeSlots;
export declare type FlatTreeState = ComponentState<FlatTreeSlots> & TreeContextValue & {
open: boolean;
};
/**
* FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
* in multiple scenarios including virtualization.
*
* !!A flat tree is an unofficial spec for tree!!
*
* It should be used on cases where more complex interactions with a Tree is required.
*
* On simple scenarios it is advised to simply use a nested structure instead.
*/
export declare type HeadlessFlatTree<Props extends HeadlessFlatTreeItemProps> = {
/**
* returns the properties required for the Tree component to work properly.
* That includes:
* `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`
*/
getTreeProps(): Required<Pick<FlatTreeProps, 'openItems' | 'onOpenChange' | 'onNavigation' | 'checkedItems' | 'onCheckedChange'>> & {
ref: React_2.Ref<HTMLDivElement>;
openItems: ImmutableSet<TreeItemValue>;
};
/**
* internal method used to react to an `onNavigation` event.
* This method ensures proper navigation on keyboard and mouse interaction.
* In case of virtualization it might be required to cancel default provided `onNavigation`
* event and then call this method manually.
*
* @example
* ```ts
* // react-window
* const handleNavigation = (event, data) => {
* event.preventDefault();
* const nextItem = tree.getNextNavigableItem(data);
* // scroll to item using virtualization scroll mechanism
* if (nextItem && tree.getElementFromItem(nextItem)) {
* listRef.current.scrollToItem(nextItem.index);
* }
* // wait for scrolling to happen and then invoke navigate method
* requestAnimationFrame(() => {
* tree.navigate(data);
* });
* };
*```
*/
navigate(data: TreeNavigationData_unstable): void;
/**
* returns next item to be focused on a navigation.
* This method is provided to decouple the element that needs to be focused from
* the action of focusing it itself.
*
* On the case of TypeAhead navigation this method returns the current item.
*/
getNextNavigableItem(visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable): HeadlessTreeItem<Props> | undefined;
/**
* similar to getElementById but for FlatTreeItems
*/
getElementFromItem(item: HeadlessTreeItem<Props>): HTMLElement | null;
/**
* an iterable containing all visually available flat tree items
*/
items(): IterableIterator<HeadlessTreeItem<Props>>;
};
export declare type HeadlessFlatTreeItem<Props extends HeadlessFlatTreeItemProps> = HeadlessTreeItem<Props>;
export declare type HeadlessFlatTreeItemProps = HeadlessTreeItemProps;
export declare type HeadlessFlatTreeOptions = Pick<FlatTreeProps, 'onOpenChange' | 'onNavigation' | 'selectionMode' | 'onCheckedChange'> & Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems'> & {
defaultCheckedItems?: TreeProps['checkedItems'];
};
/**
* @internal
*/
declare type HeadlessFlatTreeReturn<Props extends HeadlessFlatTreeItemProps> = HeadlessFlatTree<Props> & {
getItem(value: TreeItemValue): HeadlessTreeItem<Props> | undefined;
};
/**
* The item that is returned by `createHeadlessTree`, it represents a wrapper around the properties provided to
* `createHeadlessTree` but with extra information that might be useful on virtual tree scenarios
*/
declare type HeadlessTreeItem<Props extends HeadlessTreeItemProps> = {
level: number;
index: number;
position: number;
childrenValues: TreeItemValue[];
value: TreeItemValue;
parentValue: TreeItemValue | undefined;
itemType: TreeItemType;
getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> & Props;
};
declare type HeadlessTreeItemProps = Omit<TreeItemProps, 'itemType' | 'value'> & {
value: TreeItemValue;
itemType?: TreeItemType;
parentValue?: TreeItemValue;
};
declare class ImmutableMap<Key, Value> implements Iterable<[Key, Value]> {
static empty: ImmutableMap<never, never>;
readonly size: number;
private [internalMapSymbol];
static dangerouslyGetInternalMap<Key, Value>(immutableMap: ImmutableMap<Key, Value>): Map<Key, Value>;
static copy<Key, Value>(immutableMap: ImmutableMap<Key, Value>): ImmutableMap<Key, Value>;
/**
* Creates a new {@link ImmutableMap} from an iterable.
* If the iterable is undefined, {@link ImmutableMap.empty} will be returned.
* If the iterable is already an {@link ImmutableMap}, it will be returned as is no copy will be made.
*/
static from<T extends [unknown, unknown]>(iterable?: Iterable<T>): ImmutableMap<T[0], T[1]>;
/**
* Creates a new {@link ImmutableMap} from an iterable with an auxiliary map function to modify the iterable.
* If the iterable is undefined, {@link ImmutableMap.empty} will be returned.
* If the iterable is already an {@link ImmutableMap}, it will be returned as is no copy will be made.
* The map function will be called for each element in the iterable.
*/
static from<T, U extends [unknown, unknown]>(iterable: Iterable<T> | undefined, mapFn: (value: T) => U): ImmutableMap<U[0], U[1]>;
static [Symbol.hasInstance](instance: unknown): boolean;
/**
* Do not use this constructor directly, use {@link ImmutableMap.from} instead.
* {@link ImmutableMap.from} handles instance verification (which might be problematic on {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof#instanceof_and_multiple_realms | multiple realms}),
* avoid unnecessary copies, supports iterables and ensures that the internal map is never exposed.
*
* _By using this constructor directly, you might end up with a mutable map, as it is not guaranteed that the internal map is not exposed._
*/
constructor(internalMap: Map<Key, Value>);
delete(key: Key): ImmutableMap<Key, Value>;
get(key: Key): Value | undefined;
has(key: Key): boolean;
set(key: Key, value: Value): ImmutableMap<Key, Value>;
[Symbol.iterator](): Iterator<[Key, Value]>;
}
/**
* @public
*
* Small immutable wrapper around the native Set implementation.
* Every operation that would modify the set returns a new copy instance.
*/
declare class ImmutableSet<T> implements Iterable<T> {
static empty: ImmutableSet<never>;
readonly size: number;
private [internalSetSymbol];
static dangerouslyGetInternalSet<Value>(set: ImmutableSet<Value>): Set<Value>;
static copy<T>(immutableSet: ImmutableSet<T>): ImmutableSet<T>;
/**
* Creates a new {@link ImmutableSet} from an iterable.
* If the iterable is undefined, {@link ImmutableSet.empty} will be returned.
* If the iterable is already an {@link ImmutableSet}, it will be returned as is no copy will be made.
*/
static from<Value>(iterable?: Iterable<Value>): ImmutableSet<Value>;
static [Symbol.hasInstance](instance: unknown): boolean;
/**
* Do not use this constructor directly, use {@link ImmutableSet.from} instead.
* {@link ImmutableSet.from} handles instance verification (which might be problematic on {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof#instanceof_and_multiple_realms | multiple realms}),
* avoid unnecessary copies, supports iterables and ensures that the internal set is never exposed.
*
* _By using this constructor directly, you might end up with a mutable set, as it is not guaranteed that the internal set is not exposed._
*/
constructor(internalSet: Set<T>);
add(value: T): ImmutableSet<T>;
delete(value: T): ImmutableSet<T>;
has(value: T): boolean;
[Symbol.iterator](): Iterator<T>;
}
declare const internalMapSymbol: unique symbol;
declare const internalSetSymbol: unique symbol;
declare type MultiSelectValue = NonNullable<CheckboxProps['checked']>;
export declare const renderFlatTree_unstable: (state: FlatTreeState, contextValues: FlatTreeContextValues) => JSX.Element;
export declare const renderTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSX.Element;
/**
* Render the final JSX of TreeItem
*/
export declare const renderTreeItem_unstable: (state: TreeItemState, contextValues: TreeItemContextValues) => JSX.Element;
/**
* Render the final JSX of TreeItemLayout
*/
export declare const renderTreeItemLayout_unstable: (state: TreeItemLayoutState) => JSX.Element;
/**
* Render the final JSX of TreeItemPersonaLayout
*/
export declare const renderTreeItemPersonaLayout_unstable: (state: TreeItemPersonaLayoutState, contextValues: TreeItemPersonaLayoutContextValues) => JSX.Element;
declare type SingleSelectValue = NonNullable<RadioProps['checked']>;
export declare type SubtreeContextValue = {
contextType: 'subtree';
level: number;
};
/**
* The `Tree` component renders nested items in a hierarchical structure.
* Use it with `TreeItem` component and layouts components `TreeItemLayout` or `TreeItemPersonaLayout`.
*/
export declare const Tree: ForwardRefComponent<TreeProps>;
export declare 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;
});
export declare type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];
export declare const treeClassNames: SlotClassNames<Omit<TreeSlots, 'collapseMotion'>>;
export declare 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>;
/**
* requests root Tree component to respond to some tree item event,
*/
requestTreeResponse(request: TreeItemRequest): void;
};
export declare type TreeContextValues = {
tree: TreeContextValue | SubtreeContextValue;
};
/**
* The `TreeItem` component represents a single item in a tree.
* It expects a certain order of children to work properly: the first child should be the node itself,
* and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.
* This order follows the same order as document traversal for the TreeWalker API in JavaScript:
* https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.
* The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,
* which should be used as a direct child of TreeItem.
*
* When a TreeItem has nested child subtree, an expand/collapse control is displayed,
* allowing the user to show or hide the children.
*/
export declare const TreeItem: ForwardRefComponent<TreeItemProps>;
export declare const treeItemClassNames: SlotClassNames<TreeItemSlots>;
export declare type TreeItemContextValue = {
/**
* @deprecated - this value is irrelevant for the tree item
*/
isActionsVisible: boolean;
/**
* @deprecated - this value is irrelevant for the tree item
*/
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>;
itemType: TreeItemType;
value: TreeItemValue;
open: boolean;
checked: TreeSelectionValue;
};
declare type TreeItemContextValues = {
treeItem: TreeItemContextValue;
};
declare type TreeItemCSSProperties = React_2.CSSProperties & {
[treeItemLevelToken]?: string | number;
};
/**
* The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.
* It provides a consistent visual structure for tree items in a `Tree` component.
* This component should only be used as a direct child of `TreeItem`.
*/
export declare const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;
declare type TreeItemLayoutActionSlotProps = ExtractSlotProps<Slot<'div'> & {
/**
* Forces visibility of the aside/action content
*/
visible?: boolean;
onVisibilityChange?: EventHandler<TreeItemLayoutActionVisibilityChangeData>;
}>;
declare type TreeItemLayoutActionVisibilityChangeData = (EventData<'mouseover' | 'mouseout', MouseEvent> | EventData<'focus' | 'blur', FocusEvent> | EventData<'blur', React_2.FocusEvent>) & {
visible: boolean;
};
export declare const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots>;
/**
* TreeItemLayout Props
*/
export declare type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;
export declare type TreeItemLayoutSlots = {
root: Slot<'div'>;
/**
* Content. Children of the root slot are automatically rendered here
*/
main: NonNullable<Slot<'div'>>;
/**
* Icon slot that renders right before main content
*/
iconBefore?: Slot<'div'>;
/**
* Icon slot that renders right after main content
*/
iconAfter?: Slot<'div'>;
/**
* Expand icon slot,
* by default renders a chevron icon to indicate opening and closing
*/
expandIcon?: Slot<'div'>;
/**
* Aside content is normally used to render a badge or other non-actionable content
* It is aria-hidden by default and is only meant to be used as visual aid.
*/
aside?: Slot<'div'>;
/**
* Actionable elements are normally buttons, menus, or other focusable elements.
* Those elements are only visibly available if the given tree item is currently active.
*
* `actions` and `aside` slots are positioned on the exact same spot,
* so they won't be visible at the same time.
* `aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active.
*
* `actions` slot supports a `visible` prop to force visibility of the actions.
*/
actions?: Slot<TreeItemLayoutActionSlotProps>;
selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;
};
/**
* State used in rendering TreeItemLayout
*/
export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {
buttonContextValue: ButtonContextValue;
};
export declare const treeItemLevelToken: "--fluent-TreeItem--level";
export declare 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;
});
export declare type TreeItemOpenChangeEvent = TreeItemOpenChangeData['event'];
/**
* The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.
* It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.
* This component should only be used as a direct child of `TreeItem`.
*/
export declare const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps>;
export declare const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots>;
declare type TreeItemPersonaLayoutContextValues = {
avatar: AvatarContextValue;
};
/**
* TreeItemPersonaLayout Props
*/
export declare type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;
export declare type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {
root: NonNullable<Slot<'div'>>;
/**
* Avatar to display.
*/
media: NonNullable<Slot<'div'>>;
/**
* Content. Children of the root slot are automatically rendered here
*/
main: NonNullable<Slot<'div'>>;
/**
* Secondary text that describes or complements the content
*/
description?: Slot<'div'>;
};
/**
* State used in rendering TreeItemPersonaLayout
*/
export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {
avatarSize: AvatarSize;
buttonContextValue: ButtonContextValue;
};
/**
* TreeItem Props
*/
export declare type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {
/**
* A tree item can be a leaf or a branch
*/
itemType: TreeItemType;
/**
* A tree item should have a well defined value, in case one is not provided by the user by this prop
* one will be inferred internally.
*/
value?: TreeItemValue;
/**
* Whether the tree item is in an open state
*
* This overrides the open value provided by the root tree,
* and ensure control of the visibility of the tree item per tree item.
*
* NOTE: controlling the open state of a tree item will not affect the open state of its children
*/
open?: boolean;
onOpenChange?: (e: TreeItemOpenChangeEvent, data: TreeItemOpenChangeData) => void;
/**
* This property is inferred through context on a nested tree, and required for a flat tree.
*/
parentValue?: TreeItemValue;
};
export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | undefined> & React_2.FC<React_2.ProviderProps<TreeItemContextValue | undefined>>;
declare type TreeItemRequest = {
itemType: TreeItemType;
} & ((DistributiveOmit<TreeOpenChangeData, 'openItems'> & {
requestType: 'open';
}) | (TreeNavigationData_unstable & {
requestType: 'navigate';
}) | (DistributiveOmit<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'> & {
requestType: 'selection';
}));
export declare type TreeItemSlots = {
root: Slot<ExtractSlotProps<Slot<'div'> & {
style?: TreeItemCSSProperties;
}>>;
};
/**
* State used in rendering TreeItem
*/
export declare type TreeItemState = ComponentState<TreeItemSlots> & TreeItemContextValue & {
level: number;
itemType: TreeItemType;
};
export declare type TreeItemType = 'leaf' | 'branch';
export declare type TreeItemValue = string | number;
export declare 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;
});
/**
* @internal
*
* To avoid breaking changes on TreeNavigationData
* we are creating a new type that extends the old one
* and adds the new methods, and this type will not be exported
*/
declare type TreeNavigationDataParam = TreeNavigationData_unstable & {
preventScroll(): void;
isScrollPrevented(): boolean;
};
export declare type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];
export declare 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;
});
export declare type TreeOpenChangeEvent = TreeOpenChangeData['event'];
export declare type TreeProps = ComponentProps<TreeSlots> & {
/**
* A tree item can have various appearances:
* - 'subtle' (default): The default tree item styles.
* - 'subtle-alpha': Minimizes emphasis on hovered or focused states.
* - 'transparent': Removes background color.
* @default 'subtle'
*/
appearance?: 'subtle' | 'subtle-alpha' | 'transparent';
/**
* Size of the tree item.
* @default 'medium'
*/
size?: 'small' | 'medium';
/**
* This refers to a list of ids of opened tree items.
* Controls the state of the open tree items.
* These property is ignored for subtrees.
*/
openItems?: Iterable<TreeItemValue>;
/**
* This refers to a list of ids of default opened items.
* This property is ignored for subtrees.
*/
defaultOpenItems?: Iterable<TreeItemValue>;
/**
* Callback fired when the component changes value from open state.
* These property is ignored for subtrees.
*
* @param event - a React's Synthetic event
* @param data - A data object with relevant information,
* such as open value and type of interaction that created the event.
*/
onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;
/**
* Callback fired when navigation happens inside the component.
* These property is ignored for subtrees.
*
* FIXME: This method is not ideal, as navigation should be handled internally by tabster.
*
* @param event - a React's Synthetic event
* @param data - A data object with relevant information,
*/
onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationDataParam): void;
/**
* This refers to the selection mode of the tree.
* - undefined: No selection can be done.
* - 'single': Only one tree item can be selected, radio buttons are rendered.
* - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.
*
* @default undefined
*/
selectionMode?: SelectionMode_2;
/**
* This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.
* Controls the state of the checked tree items.
* These property is ignored for subtrees.
*/
checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;
/**
* Callback fired when the component changes value from checked state.
* These property is ignored for subtrees.
*
* @param event - a React's Synthetic event
* @param data - A data object with relevant information,
* such as checked value and type of interaction that created the event.
*/
onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;
};
export declare const TreeProvider: {
(props: React_2.ProviderProps<TreeContextValue | SubtreeContextValue>): JSX.Element;
displayName: string;
};
export declare type TreeSelectionValue = MultiSelectValue | SingleSelectValue;
export declare type TreeSlots = {
root: Slot<'div'>;
collapseMotion?: Slot<PresenceMotionSlotProps>;
};
/**
* State used in rendering Tree
*/
export declare type TreeState = ComponentState<TreeSlots> & {
open: boolean;
} & (TreeContextValue | SubtreeContextValue);
export declare const useFlatTree_unstable: (props: FlatTreeProps, ref: React_2.Ref<HTMLElement>) => FlatTreeState;
export declare const useFlatTreeContextValues_unstable: (state: FlatTreeState) => FlatTreeContextValues;
export declare const useFlatTreeStyles_unstable: (state: FlatTreeState) => FlatTreeState;
/**
* this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
* in multiple scenarios including virtualization.
*
* !!A flat tree is an unofficial spec for tree!!
*
* It should be used on cases where more complex interactions with a Tree is required.
* On simple scenarios it is advised to simply use a nested structure instead.
*
* @param props - a list of tree items
* @param options - in case control over the internal openItems is required
*/
export declare function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(props: Props[], options?: HeadlessFlatTreeOptions): HeadlessFlatTreeReturn<Props>;
export declare const useSubtreeContext_unstable: () => SubtreeContextValue;
export declare const useTree_unstable: (props: TreeProps, ref: React_2.Ref<HTMLElement>) => TreeState;
export declare const useTreeContext_unstable: <T>(selector: ContextSelector<TreeContextValue, T>) => T;
export declare function useTreeContextValues_unstable(state: TreeState): TreeContextValues;
/**
* Create the state required to render TreeItem.
*
* The returned state can be modified with hooks such as useTreeItemStyles_unstable,
* before being passed to renderTreeItem_unstable.
*
* @param props - props from this instance of TreeItem
* @param ref - reference to root HTMLElement of TreeItem
*/
export declare function useTreeItem_unstable(props: TreeItemProps, ref: React_2.Ref<HTMLDivElement>): TreeItemState;
export declare const useTreeItemContext_unstable: <T>(selector: ContextSelector<TreeItemContextValue, T>) => T;
export declare function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues;
/**
* Create the state required to render TreeItemLayout.
*
* The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,
* before being passed to renderTreeItemLayout_unstable.
*
* @param props - props from this instance of TreeItemLayout
* @param ref - reference to root HTMLElement of TreeItemLayout
*/
export declare const useTreeItemLayout_unstable: (props: TreeItemLayoutProps, ref: React_2.Ref<HTMLElement>) => TreeItemLayoutState;
/**
* Apply styling to the TreeItemLayout slots based on the state
*/
export declare const useTreeItemLayoutStyles_unstable: (state: TreeItemLayoutState) => TreeItemLayoutState;
/**
* Create the state required to render TreeItemPersonaLayout.
*
* The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,
* before being passed to renderTreeItemPersonaLayout_unstable.
*
* @param props - props from this instance of TreeItemPersonaLayout
* @param ref - reference to root HTMLElement of TreeItemPersonaLayout
*/
export declare const useTreeItemPersonaLayout_unstable: (props: TreeItemPersonaLayoutProps, ref: React_2.Ref<HTMLSpanElement>) => TreeItemPersonaLayoutState;
/**
* Apply styling to the TreeItemPersonaLayout slots based on the state
*/
export declare const useTreeItemPersonaLayoutStyles_unstable: (state: TreeItemPersonaLayoutState) => TreeItemPersonaLayoutState;
/**
* Apply styling to the TreeItem slots based on the state
*/
export declare const useTreeItemStyles_unstable: (state: TreeItemState) => TreeItemState;
export declare const useTreeStyles_unstable: (state: TreeState) => TreeState;
export { }