@fluentui/react-tree 9.0.0-beta.20 → 9.0.0-beta.22

package/dist/index.d.ts

@@ -21,9 +21,8 @@ import { ProviderProps } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { SlotRenderFunction } from '@fluentui/react-utilities';
 
-declare type FlattenedTreeItem<Props extends TreeItemProps<unknown>> = FlatTreeItemProps<NonNullable<Props['value']>> & Props;
+declare type FlattenedTreeItem<Props extends TreeItemProps> = FlatTreeItemProps & Props;
 
 /**
  * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`
@@ -65,7 +64,7 @@ declare type FlattenedTreeItem<Props extends TreeItemProps<unknown>> = FlatTreeI
  * ]);
  * ```
  */
-export declare const flattenTree_unstable: <Props extends TreeItemProps<unknown>>(items: NestedTreeItem<Props>[]) => FlattenedTreeItem<Props>[];
+export declare const flattenTree_unstable: <Props extends TreeItemProps>(items: NestedTreeItem<Props>[]) => FlattenedTreeItem<Props>[];
 
 /**
  * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -77,13 +76,13 @@ export declare const flattenTree_unstable: <Props extends TreeItemProps<unknown>
  *
  * On simple scenarios it is advised to simply use a nested structure instead.
  */
-export declare type FlatTree<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {
+export declare type FlatTree<Props extends FlatTreeItemProps = FlatTreeItemProps> = {
     /**
      * returns the properties required for the Tree component to work properly.
      * That includes:
      * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`
      */
-    getTreeProps(): FlatTreeProps<Props['value']>;
+    getTreeProps(): FlatTreeProps;
     /**
      * internal method used to react to an `onNavigation` event.
      * This method ensures proper navigation on keyboard and mouse interaction.
@@ -97,7 +96,7 @@ export declare type FlatTree<Props extends FlatTreeItemProps<unknown> = FlatTree
      *   event.preventDefault();
      *   const nextItem = tree.getNextNavigableItem(data);
      *   // scroll to item using virtualization scroll mechanism
-     *   if (nextItem && document.getElementById(nextItem.id)) {
+     *   if (nextItem && tree.getElementFromItem(nextItem)) {
      *     listRef.current.scrollToItem(nextItem.index);
      *   }
      *   // wait for scrolling to happen and then invoke navigate method
@@ -107,7 +106,7 @@ export declare type FlatTree<Props extends FlatTreeItemProps<unknown> = FlatTree
      * };
      *```
      */
-    navigate(data: TreeNavigationData_unstable<Props['value']>): void;
+    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
@@ -115,7 +114,11 @@ export declare type FlatTree<Props extends FlatTreeItemProps<unknown> = FlatTree
      *
      * On the case of TypeAhead navigation this method returns the current item.
      */
-    getNextNavigableItem(visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable<Props['value']>): FlatTreeItem<Props> | undefined;
+    getNextNavigableItem(visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable): FlatTreeItem<Props> | undefined;
+    /**
+     * similar to getElementById but for FlatTreeItems
+     */
+    getElementFromItem(item: FlatTreeItem<Props>): HTMLElement | null;
     /**
      * an iterable containing all visually available flat tree items
      */
@@ -126,31 +129,25 @@ export declare type FlatTree<Props extends FlatTreeItemProps<unknown> = FlatTree
  * The item that is returned by `useFlatTree`, it represents a wrapper around the properties provided to
  * `useFlatTree` but with extra information that might be useful on flat tree scenarios
  */
-export declare type FlatTreeItem<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {
+export declare type FlatTreeItem<Props extends FlatTreeItemProps = FlatTreeItemProps> = {
     index: number;
     level: number;
     childrenSize: number;
-    value: Props['value'];
-    parentValue: Props['parentValue'];
-    /**
-     * A reference to the element that will render the `TreeItem`,
-     * this is necessary for nodes with parents (to ensure child to parent navigation),
-     * if a node has no parent then this reference will be null.
-     */
-    ref: React_2.RefObject<HTMLDivElement>;
-    getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> & Omit<Props, 'parentValue'>;
+    value: TreeItemValue;
+    parentValue: TreeItemValue | undefined;
+    getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> & Omit<Props, 'parentId'>;
 };
 
-export declare type FlatTreeItemProps<Value = string> = Omit<TreeItemProps<Value>, 'itemType'> & Partial<Pick<TreeItemProps<Value>, 'itemType'>> & {
-    value: Value;
-    parentValue?: Value;
+export declare type FlatTreeItemProps = Omit<TreeItemProps, 'itemType'> & Partial<Pick<TreeItemProps, 'itemType'>> & {
+    value: TreeItemValue;
+    parentValue?: TreeItemValue;
 };
 
-declare type FlatTreeOptions<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = Pick<TreeProps<Props['value']>, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>;
+declare type FlatTreeOptions = Pick<TreeProps, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>;
 
-export declare type FlatTreeProps<Value = string> = Required<Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>> & {
+export declare type FlatTreeProps = Required<Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>> & {
     ref: React_2.Ref<HTMLDivElement>;
-    openItems: ImmutableSet<Value>;
+    openItems: ImmutableSet<string>;
 };
 
 declare interface ImmutableSet<Value> {
@@ -179,7 +176,7 @@ declare interface ImmutableSet<Value> {
     [Symbol.iterator](): IterableIterator<Value>;
 }
 
-export declare type NestedTreeItem<Props extends TreeItemProps<unknown>> = Omit<Props, 'subtree' | 'itemType'> & {
+export declare type NestedTreeItem<Props extends TreeItemProps> = Omit<Props, 'subtree' | 'itemType'> & {
     subtree?: NestedTreeItem<Props>[];
 };
 
@@ -192,11 +189,6 @@ export declare const renderTree_unstable: (state: TreeState, contextValues: Tree
  */
 export declare const renderTreeItem_unstable: (state: TreeItemState, contextValues: TreeItemContextValues) => JSX.Element;
 
-/**
- * Render the final JSX of TreeItemAside
- */
-export declare const renderTreeItemAside_unstable: (state: TreeItemAsideState) => JSX.Element | null;
-
 /**
  * Render the final JSX of TreeItemLayout
  */
@@ -215,22 +207,7 @@ export declare const renderTreeItemPersonaLayout_unstable: (state: TreeItemPerso
  * an item representing a folder can be expanded to reveal the contents of the folder,
  * which may be files, folders, or both.
  */
-export declare const Tree: React_2.ForwardRefExoticComponent<Omit<TreeSlots, "root"> & Omit<{
-    as?: "div" | undefined;
-} & Pick<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React_2.RefObject<HTMLDivElement> | null | undefined;
-} & {
-    children?: React_2.ReactNode | SlotRenderFunction<Pick<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React_2.RefObject<HTMLDivElement> | null | undefined;
-    }>;
-}, "ref"> & {
-    appearance?: "transparent" | "subtle" | "subtle-alpha" | undefined;
-    size?: "small" | "medium" | undefined;
-    openItems?: Iterable<string> | undefined;
-    defaultOpenItems?: Iterable<string> | undefined;
-    onOpenChange?(event: React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement, MouseEvent>, data: TreeOpenChangeData<string>): void;
-    onNavigation_unstable?(event: React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement, MouseEvent>, data: TreeNavigationData_unstable<string>): void;
-} & React_2.RefAttributes<HTMLDivElement>> & (<Value = string>(props: TreeProps<Value>) => JSX.Element);
+export declare const Tree: ForwardRefComponent<TreeProps>;
 
 export declare const treeClassNames: SlotClassNames<TreeSlots>;
 
@@ -242,7 +219,7 @@ export declare type TreeContextValue = {
     /**
      * requests root Tree component to respond to some tree item event,
      */
-    requestTreeResponse(request: TreeItemRequest<unknown>): void;
+    requestTreeResponse(request: TreeItemRequest): void;
 };
 
 declare type TreeContextValues = {
@@ -261,58 +238,7 @@ declare type TreeContextValues = {
  * 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: React_2.ForwardRefExoticComponent<Omit<Partial<TreeItemSlots>, "root"> & Omit<{
-    as?: "div" | undefined;
-} & Pick<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React_2.RefObject<HTMLDivElement> | null | undefined;
-} & {
-    children?: React_2.ReactNode | SlotRenderFunction<Pick<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React_2.RefObject<HTMLDivElement> | null | undefined;
-    }>;
-} & {
-    style?: TreeItemCSSProperties | undefined;
-}, "ref"> & {
-    value?: string | undefined;
-    itemType: TreeItemType;
-} & React_2.RefAttributes<HTMLDivElement>> & (<Value = string>(props: TreeItemProps<Value>) => JSX.Element);
-
-/**
- * TreeItemAside component - represents a custom set of actionable elements that will be visible when a certain
- * `TreeItem` is currently "active".
- */
-export declare const TreeItemAside: ForwardRefComponent<TreeItemAsideProps>;
-
-export declare const treeItemAsideClassNames: SlotClassNames<TreeItemAsideSlots>;
-
-/**
- * TreeItemAside Props
- */
-export declare type TreeItemAsideProps = ComponentProps<TreeItemAsideSlots> & {
-    /**
-     * boolean indicating if the aside content should behave as "actions"
-     *
-     * 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?: boolean;
-    /**
-     * Forces visibility of the aside content, even if they're actions
-     */
-    visible?: true;
-};
-
-export declare type TreeItemAsideSlots = {
-    root: Slot<'div'>;
-};
-
-/**
- * State used in rendering TreeItemAside
- */
-export declare type TreeItemAsideState = ComponentState<TreeItemAsideSlots> & {
-    actions: boolean;
-    visible: boolean;
-    buttonContextValue: ButtonContextValue;
-};
+export declare const TreeItem: ForwardRefComponent<TreeItemProps>;
 
 export declare const treeItemClassNames: SlotClassNames<TreeItemSlots>;
 
@@ -323,8 +249,8 @@ declare type TreeItemContextValue = {
     expandIconRef: React_2.Ref<HTMLDivElement>;
     layoutRef: React_2.Ref<HTMLDivElement>;
     subtreeRef: React_2.Ref<HTMLDivElement>;
-    value: unknown;
     itemType: TreeItemType;
+    value: string;
     open: boolean;
 };
 
@@ -353,10 +279,9 @@ export declare type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutS
 export declare type TreeItemLayoutSlots = {
     root: Slot<'div'>;
     /**
-     * Expand icon slot,
-     * by default renders a chevron icon to indicate opening and closing
+     * Content. Children of the root slot are automatically rendered here
      */
-    expandIcon?: Slot<'div'>;
+    content: NonNullable<Slot<'div'>>;
     /**
      * Icon slot that renders right before main content
      */
@@ -365,12 +290,30 @@ export declare type TreeItemLayoutSlots = {
      * 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?: 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?: Slot<ExtractSlotProps<Slot<'div'> & {
+        /**
+         * Forces visibility of the aside/action content
+         */
+        visible?: boolean;
+    }>>;
 };
 
 /**
  * State used in rendering TreeItemLayout
  */
-export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots>;
+export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {
+    buttonContextValue: ButtonContextValue;
+};
 
 export declare const treeItemLevelToken: "--fluent-TreeItem--level";
 
@@ -392,29 +335,20 @@ declare type TreeItemPersonaLayoutContextValues = {
  */
 export declare type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;
 
-export declare type TreeItemPersonaLayoutSlots = {
+export declare type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon'> & {
     root: NonNullable<Slot<'div'>>;
-    /**
-     * Expand icon slot,
-     * by default renders a chevron icon to indicate opening and closing
-     */
-    expandIcon?: Slot<'div'>;
     /**
      * Avatar to display.
      */
     media: NonNullable<Slot<'div'>>;
     /**
-     * Main text. Children of the root slot are automatically rendered here
+     * Content. Children of the root slot are automatically rendered here
      */
-    main: NonNullable<Slot<'div'>>;
+    content: NonNullable<Slot<'div'>>;
     /**
-     * Secondary text that describes or complements the main text
+     * Secondary text that describes or complements the content
      */
     description?: Slot<'div'>;
-    /**
-     * A layout wrapper for the main and description slots
-     */
-    content: NonNullable<Slot<'div'>>;
 };
 
 /**
@@ -422,21 +356,22 @@ export declare type TreeItemPersonaLayoutSlots = {
  */
 export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {
     avatarSize: AvatarSize;
+    buttonContextValue: ButtonContextValue;
 };
 
 /**
  * TreeItem Props
  */
-export declare type TreeItemProps<Value = string> = ComponentProps<Partial<TreeItemSlots>> & {
-    value?: Value;
+export declare type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {
     itemType: TreeItemType;
+    value?: TreeItemValue;
 };
 
 export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | undefined> & React_2.FC<React_2.ProviderProps<TreeItemContextValue | undefined>>;
 
-declare type TreeItemRequest<Value> = {
+declare type TreeItemRequest = {
     itemType: TreeItemType;
-} & (OmitWithoutExpanding<TreeOpenChangeData<Value>, 'open' | 'target'> | OmitWithoutExpanding<TreeNavigationData_unstable<Value>, 'target'>);
+} & (OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'target'> | OmitWithoutExpanding<TreeNavigationData_unstable, 'target'>);
 
 export declare type TreeItemSlots = {
     root: Slot<ExtractSlotProps<Slot<'div'> & {
@@ -454,9 +389,11 @@ export declare type TreeItemState = ComponentState<TreeItemSlots> & TreeItemCont
 
 declare type TreeItemType = 'leaf' | 'branch';
 
-export declare type TreeNavigationData_unstable<Value = string> = {
-    value: Value;
+declare type TreeItemValue = string | number;
+
+export declare type TreeNavigationData_unstable = {
     target: HTMLElement;
+    value: string;
 } & ({
     event: React_2.MouseEvent<HTMLElement>;
     type: 'Click';
@@ -485,9 +422,9 @@ export declare type TreeNavigationData_unstable<Value = string> = {
 
 export declare type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];
 
-export declare type TreeOpenChangeData<Value = string> = {
+export declare type TreeOpenChangeData = {
     open: boolean;
-    value: Value;
+    value: string;
 } & ({
     event: React_2.MouseEvent<HTMLElement>;
     target: HTMLElement;
@@ -512,7 +449,7 @@ export declare type TreeOpenChangeData<Value = string> = {
 
 export declare type TreeOpenChangeEvent = TreeOpenChangeData['event'];
 
-export declare type TreeProps<Value = string> = ComponentProps<TreeSlots> & {
+export declare type TreeProps = ComponentProps<TreeSlots> & {
     /**
      * A tree item can have various appearances:
      * - 'subtle' (default): The default tree item styles.
@@ -531,13 +468,13 @@ export declare type TreeProps<Value = string> = ComponentProps<TreeSlots> & {
      * Controls the state of the open tree items.
      * These property is ignored for subtrees.
      */
-    openItems?: Iterable<Value>;
+    openItems?: Iterable<string>;
     /**
      * This refers to a list of ids of opened tree items.
      * Default value for the uncontrolled state of open tree items.
      * These property is ignored for subtrees.
      */
-    defaultOpenItems?: Iterable<Value>;
+    defaultOpenItems?: Iterable<string>;
     /**
      * Callback fired when the component changes value from open state.
      * These property is ignored for subtrees.
@@ -546,7 +483,7 @@ export declare type TreeProps<Value = string> = ComponentProps<TreeSlots> & {
      * @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<Value>): void;
+    onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;
     /**
      * Callback fired when navigation happens inside the component.
      * These property is ignored for subtrees.
@@ -556,7 +493,7 @@ export declare type TreeProps<Value = string> = ComponentProps<TreeSlots> & {
      * @param event - a React's Synthetic event
      * @param data - A data object with relevant information,
      */
-    onNavigation_unstable?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable<Value>): void;
+    onNavigation_unstable?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;
 };
 
 export declare const TreeProvider: Provider<TreeContextValue | undefined> & FC<ProviderProps<TreeContextValue | undefined>>;
@@ -584,7 +521,7 @@ export declare type TreeState = ComponentState<TreeSlots> & TreeContextValue & {
  * @param flatTreeItemProps - a list of tree items
  * @param options - in case control over the internal openItems is required
  */
-export declare function useFlatTree_unstable<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps>(flatTreeItemProps: Props[], options?: FlatTreeOptions<Props>): FlatTree<Props>;
+export declare function useFlatTree_unstable<Props extends FlatTreeItemProps = FlatTreeItemProps>(flatTreeItemProps: Props[], options?: FlatTreeOptions): FlatTree<Props>;
 
 /**
  * Create the state required to render Tree.
@@ -610,26 +547,12 @@ export declare function useTreeContextValues_unstable(state: TreeState): TreeCon
  * @param props - props from this instance of TreeItem
  * @param ref - reference to root HTMLElement of TreeItem
  */
-export declare function useTreeItem_unstable<Value = string>(props: TreeItemProps<Value>, ref: React_2.Ref<HTMLDivElement>): TreeItemState;
-
-/**
- * Create the state required to render TreeItemAside.
- *
- * The returned state can be modified with hooks such as useTreeItemAsideStyles_unstable,
- * before being passed to renderTreeItemAside_unstable.
- *
- * @param props - props from this instance of TreeItemAside
- * @param ref - reference to root HTMLElement of TreeItemAside
- */
-export declare const useTreeItemAside_unstable: (props: TreeItemAsideProps, ref: React_2.Ref<HTMLElement>) => TreeItemAsideState;
-
-/**
- * Apply styling to the TreeItemAside slots based on the state
- */
-export declare const useTreeItemAsideStyles_unstable: (state: TreeItemAsideState) => TreeItemAsideState;
+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: Pick<TreeItemState, keyof TreeItemContextValue>): TreeItemContextValues;
+
 /**
  * Create the state required to render TreeItemLayout.
  *

package/lib/components/Tree/Tree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tree.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTree_unstable } from './useTree';\nimport { renderTree_unstable } from './renderTree';\nimport { useTreeStyles_unstable } from './useTreeStyles.styles';\nimport type { TreeProps } from './Tree.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeContextValues_unstable } from './useTreeContextValues';\n\n/**\n * A tree view widget presents a hierarchical list.\n * Any item in the hierarchy may have child items,\n * and items that have children may be expanded or collapsed to show or hide the children.\n * For example, in a file system navigator that uses a tree view to display folders and files,\n * an item representing a folder can be expanded to reveal the contents of the folder,\n * which may be files, folders, or both.\n */\nexport const Tree = React.forwardRef((props, ref) => {\n  const state = useTree_unstable(props, ref);\n  useTreeStyles_unstable(state);\n  const contextValues = useTreeContextValues_unstable(state);\n  return renderTree_unstable(state, contextValues);\n}) as ForwardRefComponent<TreeProps> & (<Value = string>(props: TreeProps<Value>) => JSX.Element);\n\nTree.displayName = 'Tree';\n"],"names":["React","useTree_unstable","renderTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAGhE,SAASC,6BAA6B,QAAQ,yBAAyB;AAEvE;;;;;;;CAOC,GACD,OAAO,MAAMC,qBAAOL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnD,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtCL,uBAAuBM;IACvB,MAAMC,gBAAgBN,8BAA8BK;IACpD,OAAOP,oBAAoBO,OAAOC;AACpC,GAAkG;AAElGL,KAAKM,WAAW,GAAG"}
+{"version":3,"sources":["Tree.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTree_unstable } from './useTree';\nimport { renderTree_unstable } from './renderTree';\nimport { useTreeStyles_unstable } from './useTreeStyles.styles';\nimport type { TreeProps } from './Tree.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeContextValues_unstable } from './useTreeContextValues';\n\n/**\n * A tree view widget presents a hierarchical list.\n * Any item in the hierarchy may have child items,\n * and items that have children may be expanded or collapsed to show or hide the children.\n * For example, in a file system navigator that uses a tree view to display folders and files,\n * an item representing a folder can be expanded to reveal the contents of the folder,\n * which may be files, folders, or both.\n */\nexport const Tree: ForwardRefComponent<TreeProps> = React.forwardRef((props, ref) => {\n  const state = useTree_unstable(props, ref);\n  useTreeStyles_unstable(state);\n  const contextValues = useTreeContextValues_unstable(state);\n  return renderTree_unstable(state, contextValues);\n});\n\nTree.displayName = 'Tree';\n"],"names":["React","useTree_unstable","renderTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAGhE,SAASC,6BAA6B,QAAQ,yBAAyB;AAEvE;;;;;;;CAOC,GACD,OAAO,MAAMC,qBAAuCL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnF,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtCL,uBAAuBM;IACvB,MAAMC,gBAAgBN,8BAA8BK;IACpD,OAAOP,oBAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

package/lib/components/Tree/Tree.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TreeContextValue } from '../../contexts/treeContext';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable<Value = string> = { value: Value; target: HTMLElement } & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData<Value = string> = { open: boolean; value: Value } & (\n  | {\n      event: React.MouseEvent<HTMLElement>;\n      target: HTMLElement;\n      type: 'ExpandIconClick';\n    }\n  | {\n      event: React.MouseEvent<HTMLElement>;\n      target: HTMLElement;\n      type: 'Click';\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof Enter;\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof ArrowRight;\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof ArrowLeft;\n    }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type TreeProps<Value = string> = ComponentProps<TreeSlots> & {\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<Value>;\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Default value for the uncontrolled state of open tree items.\n   * These property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<Value>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData<Value>): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  onNavigation_unstable?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable<Value>): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TreeContextValue } from '../../contexts/treeContext';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = { target: HTMLElement; value: string } & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = { open: boolean; value: string } & (\n  | {\n      event: React.MouseEvent<HTMLElement>;\n      target: HTMLElement;\n      type: 'ExpandIconClick';\n    }\n  | {\n      event: React.MouseEvent<HTMLElement>;\n      target: HTMLElement;\n      type: 'Click';\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof Enter;\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof ArrowRight;\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof ArrowLeft;\n    }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<string>;\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Default value for the uncontrolled state of open tree items.\n   * These property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<string>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  onNavigation_unstable?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Tree/useRootTree.js

@@ -49,7 +49,7 @@ import { treeDataTypes } from '../../utils/tokens';
             });
         });
     };
-    const handleTreeItemKeyDown = ({ event , value , type , itemType  })=>{
+    const handleTreeItemKeyDown = ({ event , type , value , itemType  })=>{
         const open = openItems.has(value);
         switch(type){
             case treeDataTypes.ArrowRight:

package/lib/components/Tree/useRootTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeOpenChangeData, TreeProps, TreeState, TreeNavigationData_unstable } from './Tree.types';\nimport { useNestedTreeNavigation, useOpenItemsState } from '../../hooks';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { TreeItemRequest } from '../../contexts/index';\n\n/**\n * Create the state required to render the root level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport function useRootTree<Value = string>(props: TreeProps<Value>, ref: React.Ref<HTMLElement>): TreeState {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium' } = props;\n\n  const [openItems, updateOpenItems] = useOpenItemsState(props);\n  const [navigate, navigationRef] = useNestedTreeNavigation();\n\n  const requestOpenChange = (data: TreeOpenChangeData<Value>) => {\n    props.onOpenChange?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    return updateOpenItems(data);\n  };\n\n  const requestNavigation = (data: TreeNavigationData_unstable<Value>) => {\n    props.onNavigation_unstable?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    navigate(data);\n    if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {\n      data.event.preventDefault();\n    }\n  };\n\n  const handleTreeItemClick = ({\n    event,\n    value,\n    itemType,\n    type,\n  }: Extract<TreeItemRequest<Value>, { type: 'Click' | 'ExpandIconClick' }>) => {\n    ReactDOM.unstable_batchedUpdates(() => {\n      requestOpenChange({\n        event,\n        value,\n        open: itemType === 'branch' && !openItems.has(value),\n        type,\n        target: event.currentTarget,\n      });\n      requestNavigation({ event, value, target: event.currentTarget, type: treeDataTypes.Click });\n    });\n  };\n\n  const handleTreeItemKeyDown = ({\n    event,\n    value,\n    type,\n    itemType,\n  }: Exclude<TreeItemRequest<Value>, { type: 'Click' | 'ExpandIconClick' }>) => {\n    const open = openItems.has(value);\n    switch (type) {\n      case treeDataTypes.ArrowRight:\n        if (itemType === 'leaf') {\n          return;\n        }\n        if (!open) {\n          return requestOpenChange({\n            event,\n            value,\n            open: true,\n            type: treeDataTypes.ArrowRight,\n            target: event.currentTarget,\n          });\n        }\n        return requestNavigation({ event, value, type, target: event.currentTarget });\n      case treeDataTypes.Enter:\n        return requestOpenChange({\n          event,\n          value,\n          open: itemType === 'branch' && !open,\n          type: treeDataTypes.Enter,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft:\n        if (open && itemType === 'branch') {\n          return requestOpenChange({\n            event,\n            value,\n            open: false,\n            type: treeDataTypes.ArrowLeft,\n            target: event.currentTarget,\n          });\n        }\n        return requestNavigation({ event, value, target: event.currentTarget, type: treeDataTypes.ArrowLeft });\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.TypeAhead:\n        return requestNavigation({ event, value, type, target: event.currentTarget });\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest<Value>) => {\n    switch (request.event.type) {\n      case 'click':\n        // casting is required here as we're narrowing down the event to only click events\n        return handleTreeItemClick(request as Extract<TreeItemRequest<Value>, { type: 'Click' | 'ExpandIconClick' }>);\n      case 'keydown':\n        // casting is required here as we're narrowing down the event to only keyboard events\n        return handleTreeItemKeyDown(request as Exclude<TreeItemRequest<Value>, { type: 'Click' | 'ExpandIconClick' }>);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    requestTreeResponse,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(navigationRef, ref),\n      role: 'tree',\n      ...props,\n    }),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n    }\n  }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useEventCallback","useMergedRefs","useNestedTreeNavigation","useOpenItemsState","treeDataTypes","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","openItems","updateOpenItems","navigate","navigationRef","requestOpenChange","data","onOpenChange","event","isDefaultPrevented","requestNavigation","onNavigation_unstable","type","ArrowDown","ArrowUp","preventDefault","handleTreeItemClick","value","itemType","unstable_batchedUpdates","open","has","target","currentTarget","Click","handleTreeItemKeyDown","ArrowRight","Enter","ArrowLeft","End","Home","TypeAhead","requestTreeResponse","request","components","root","level","role","process","env","NODE_ENV","console","warn"],"mappings":"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"}
+{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeOpenChangeData, TreeProps, TreeState, TreeNavigationData_unstable } from './Tree.types';\nimport { useNestedTreeNavigation, useOpenItemsState } from '../../hooks';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { TreeItemRequest } from '../../contexts/index';\n\n/**\n * Create the state required to render the root level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport function useRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium' } = props;\n\n  const [openItems, updateOpenItems] = useOpenItemsState(props);\n  const [navigate, navigationRef] = useNestedTreeNavigation();\n\n  const requestOpenChange = (data: TreeOpenChangeData) => {\n    props.onOpenChange?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    return updateOpenItems(data);\n  };\n\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation_unstable?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    navigate(data);\n    if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {\n      data.event.preventDefault();\n    }\n  };\n\n  const handleTreeItemClick = ({\n    event,\n    value,\n    itemType,\n    type,\n  }: Extract<TreeItemRequest, { type: 'Click' | 'ExpandIconClick' }>) => {\n    ReactDOM.unstable_batchedUpdates(() => {\n      requestOpenChange({\n        event,\n        value,\n        open: itemType === 'branch' && !openItems.has(value),\n        type,\n        target: event.currentTarget,\n      });\n      requestNavigation({ event, value, target: event.currentTarget, type: treeDataTypes.Click });\n    });\n  };\n\n  const handleTreeItemKeyDown = ({\n    event,\n    type,\n    value,\n    itemType,\n  }: Exclude<TreeItemRequest, { type: 'Click' | 'ExpandIconClick' }>) => {\n    const open = openItems.has(value);\n    switch (type) {\n      case treeDataTypes.ArrowRight:\n        if (itemType === 'leaf') {\n          return;\n        }\n        if (!open) {\n          return requestOpenChange({\n            event,\n            value,\n            open: true,\n            type: treeDataTypes.ArrowRight,\n            target: event.currentTarget,\n          });\n        }\n        return requestNavigation({ event, value, type, target: event.currentTarget });\n      case treeDataTypes.Enter:\n        return requestOpenChange({\n          event,\n          value,\n          open: itemType === 'branch' && !open,\n          type: treeDataTypes.Enter,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft:\n        if (open && itemType === 'branch') {\n          return requestOpenChange({\n            event,\n            value,\n            open: false,\n            type: treeDataTypes.ArrowLeft,\n            target: event.currentTarget,\n          });\n        }\n        return requestNavigation({ event, value, target: event.currentTarget, type: treeDataTypes.ArrowLeft });\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.TypeAhead:\n        return requestNavigation({ event, value, type, target: event.currentTarget });\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.event.type) {\n      case 'click':\n        // casting is required here as we're narrowing down the event to only click events\n        return handleTreeItemClick(request as Extract<TreeItemRequest, { type: 'Click' | 'ExpandIconClick' }>);\n      case 'keydown':\n        // casting is required here as we're narrowing down the event to only keyboard events\n        return handleTreeItemKeyDown(request as Exclude<TreeItemRequest, { type: 'Click' | 'ExpandIconClick' }>);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    requestTreeResponse,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(navigationRef, ref),\n      role: 'tree',\n      ...props,\n    }),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n    }\n  }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useEventCallback","useMergedRefs","useNestedTreeNavigation","useOpenItemsState","treeDataTypes","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","openItems","updateOpenItems","navigate","navigationRef","requestOpenChange","data","onOpenChange","event","isDefaultPrevented","requestNavigation","onNavigation_unstable","type","ArrowDown","ArrowUp","preventDefault","handleTreeItemClick","value","itemType","unstable_batchedUpdates","open","has","target","currentTarget","Click","handleTreeItemKeyDown","ArrowRight","Enter","ArrowLeft","End","Home","TypeAhead","requestTreeResponse","request","components","root","level","role","process","env","NODE_ENV","console","warn"],"mappings":"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"}

package/lib/components/TreeItem/TreeItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles.styles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nested child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem = React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n}) as ForwardRefComponent<TreeItemProps> & (<Value = string>(props: TreeItemProps<Value>) => JSX.Element);\n\nTreeItem.displayName = 'TreeItem';\n"],"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,iCAAiC,QAAQ,6BAA6B;AAE/E;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,yBAAWL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACvD,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAC3B,MAAMC,gBAAgBN,kCAAkCK;IACxD,OAAOP,wBAAwBO,OAAOC;AACxC,GAA0G;AAE1GL,SAASM,WAAW,GAAG"}
+{"version":3,"sources":["TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles.styles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nested child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem: ForwardRefComponent<TreeItemProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n});\n\nTreeItem.displayName = 'TreeItem';\n"],"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,iCAAiC,QAAQ,6BAA6B;AAE/E;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC3F,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAC3B,MAAMC,gBAAgBN,kCAAkCK;IACxD,OAAOP,wBAAwBO,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib/components/TreeItem/TreeItem.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n};\n\nexport type TreeItemContextValues = { treeItem: TreeItemContextValue };\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps<Value = string> = ComponentProps<Partial<TreeItemSlots>> & {\n  value?: Value;\n  itemType: TreeItemType;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> &\n  TreeItemContextValue & {\n    level: number;\n    itemType: TreeItemType;\n  };\n"],"names":["React"],"mappings":"AAGA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n};\n\nexport type TreeItemValue = string | number;\n\nexport type TreeItemContextValues = { treeItem: TreeItemContextValue };\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  itemType: TreeItemType;\n  value?: TreeItemValue;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> &\n  TreeItemContextValue & {\n    level: number;\n    itemType: TreeItemType;\n  };\n"],"names":["React"],"mappings":"AAGA,YAAYA,WAAW,QAAQ"}

package/lib/components/TreeItem/index.js

@@ -3,3 +3,4 @@ export * from './TreeItem.types';
 export * from './renderTreeItem';
 export * from './useTreeItem';
 export * from './useTreeItemStyles.styles';
+export * from './useTreeItemContextValues';

package/lib/components/TreeItem/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles.styles';\nexport * from './useTreeItemContextValues';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B;AAC3C,cAAc,6BAA6B"}

package/lib/components/TreeItem/useTreeItem.js

@@ -4,6 +4,7 @@ import { useEventCallback } from '@fluentui/react-utilities';
 import { elementContains } from '@fluentui/react-portal';
 import { useTreeContext_unstable } from '../../contexts/index';
 import { treeDataTypes } from '../../utils/tokens';
+import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
 /**
  * Create the state required to render TreeItem.
  *
@@ -13,9 +14,10 @@ import { treeDataTypes } from '../../utils/tokens';
  * @param props - props from this instance of TreeItem
  * @param ref - reference to root HTMLElement of TreeItem
  */ export function useTreeItem_unstable(props, ref) {
+    var _props_value;
     const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);
-    const id = useId('fui-TreeItem-', props.id);
-    const { onClick , onKeyDown , as ='div' , value =id , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;
+    const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
+    const { onClick , onKeyDown , as ='div' , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
     const [isActionsVisible, setActionsVisible] = React.useState(false);
     const [isAsideVisible, setAsideVisible] = React.useState(true);
@@ -66,8 +68,8 @@ import { treeDataTypes } from '../../utils/tokens';
             case treeDataTypes.ArrowRight:
                 return requestTreeResponse({
                     event,
-                    itemType,
                     value,
+                    itemType,
                     type: event.key
                 });
         }
@@ -75,8 +77,8 @@ import { treeDataTypes } from '../../utils/tokens';
         if (isTypeAheadCharacter) {
             requestTreeResponse({
                 event,
-                itemType,
                 value,
+                itemType,
                 type: treeDataTypes.TypeAhead
             });
         }
@@ -114,11 +116,11 @@ import { treeDataTypes } from '../../utils/tokens';
         root: getNativeElementProps(as, {
             tabIndex: -1,
             ...rest,
-            id,
             ref,
+            role: 'treeitem',
             'aria-level': level,
+            [dataTreeItemValueAttrName]: value,
             'aria-expanded': itemType === 'branch' ? open : undefined,
-            role: 'treeitem',
             onClick: handleClick,
             onKeyDown: handleKeyDown,
             onMouseOver: handleActionsVisible,