@fluentui/react-tree 9.0.0-beta.11 → 9.0.0-beta.12

package/CHANGELOG.json

@@ -2,7 +2,58 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Mon, 17 Apr 2023 17:50:12 GMT",
+      "date": "Mon, 24 Apr 2023 08:09:19 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.12",
+      "version": "9.0.0-beta.12",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11",
+            "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "acbc5fcb1381e9adcc4e1fa678a374d42a79438b",
+            "comment": "bugfix: fix parent navigation after independency from id"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "4dde6727c7e7fe7fbf6fedb4e1619deddbd3e16a",
+            "comment": "feat: value property over id"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "ab5e8979917780ec8cf6b3b08b3696fc1b7a83f4",
+            "comment": "chore: restructure stories, add separate category for flat tree"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.4.10",
+            "commit": "948b5bf9871303d1742f1b9a17a3bd4006ce2fea"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.10",
+            "commit": "948b5bf9871303d1742f1b9a17a3bd4006ce2fea"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2",
+            "commit": "948b5bf9871303d1742f1b9a17a3bd4006ce2fea"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 17 Apr 2023 17:54:01 GMT",
       "tag": "@fluentui/react-tree_v9.0.0-beta.11",
       "version": "9.0.0-beta.11",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Mon, 17 Apr 2023 17:50:12 GMT and should not be manually modified.
+This log was last generated on Mon, 24 Apr 2023 08:09:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.12)
+
+Mon, 24 Apr 2023 08:09:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.11..@fluentui/react-tree_v9.0.0-beta.12)
+
+### Changes
+
+- bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com)
+- bugfix: fix parent navigation after independency from id ([PR #27642](https://github.com/microsoft/fluentui/pull/27642) by bernardo.sunderhus@gmail.com)
+- feat: value property over id ([PR #27532](https://github.com/microsoft/fluentui/pull/27532) by bernardo.sunderhus@gmail.com)
+- chore: restructure stories, add separate category for flat tree ([PR #27586](https://github.com/microsoft/fluentui/pull/27586) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-avatar to v9.4.10 ([PR #27632](https://github.com/microsoft/fluentui/pull/27632) by beachball)
+- Bump @fluentui/react-button to v9.3.10 ([PR #27632](https://github.com/microsoft/fluentui/pull/27632) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([PR #27632](https://github.com/microsoft/fluentui/pull/27632) by beachball)
+
 ## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.11)
 
-Mon, 17 Apr 2023 17:50:12 GMT 
+Mon, 17 Apr 2023 17:54:01 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.10..@fluentui/react-tree_v9.0.0-beta.11)
 
 ### Changes

package/dist/index.d.ts

@@ -21,6 +21,7 @@ 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';
 
 /**
  * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`
@@ -62,7 +63,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  * ]);
  * ```
  */
-export declare const flattenTree_unstable: (items: NestedTreeItem[]) => FlatTreeItemProps[];
+export declare const flattenTree_unstable: <Value = string>(items: NestedTreeItem<Value>[]) => FlatTreeItemProps<Value>[];
 
 /**
  * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -74,13 +75,13 @@ export declare const flattenTree_unstable: (items: NestedTreeItem[]) => FlatTree
  *
  * On simple scenarios it is advised to simply use a nested structure instead.
  */
-export declare type FlatTree = {
+export declare type FlatTree<Value = string> = {
     /**
      * returns the properties required for the Tree component to work properly.
      * That includes:
      * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`
      */
-    getTreeProps(): FlatTreeProps;
+    getTreeProps(): FlatTreeProps<Value>;
     /**
      * internal method used to react to an `onNavigation` event.
      * This method ensures proper navigation on keyboard and mouse interaction.
@@ -104,7 +105,7 @@ export declare type FlatTree = {
      * };
      *```
      */
-    navigate(data: TreeNavigationData_unstable): void;
+    navigate(data: TreeNavigationData_unstable<Value>): void;
     /**
      * returns next item to be focused on a navigation.
      * This method is provided to decouple the element that needs to be focused from
@@ -112,21 +113,21 @@ export declare type FlatTree = {
      *
      * On the case of TypeAhead navigation this method returns the current item.
      */
-    getNextNavigableItem(visibleItems: FlatTreeItem[], data: TreeNavigationData_unstable): FlatTreeItem | undefined;
+    getNextNavigableItem(visibleItems: FlatTreeItem<Value>[], data: TreeNavigationData_unstable<Value>): FlatTreeItem<Value> | undefined;
     /**
      * an iterable containing all visually available flat tree items
      */
-    items(): IterableIterator<FlatTreeItem>;
+    items(): IterableIterator<FlatTreeItem<Value>>;
 };
 
-export declare type FlatTreeItem = Readonly<MutableFlatTreeItem>;
+export declare type FlatTreeItem<Value = string> = Readonly<MutableFlatTreeItem<Value>>;
 
-export declare type FlatTreeItemProps = TreeItemProps & {
-    id: TreeItemId;
-    parentId?: string;
+export declare type FlatTreeItemProps<Value = string> = Omit<TreeItemProps, 'value'> & {
+    value: Value;
+    parentValue?: Value;
 };
 
-export declare type FlatTreeProps = Required<Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & {
+export declare type FlatTreeProps<Value = string> = Required<Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & {
     ref: React_2.Ref<HTMLDivElement>;
 }>;
 
@@ -161,17 +162,18 @@ declare interface ImmutableSet<Value> {
  * Used internally on createFlatTreeItems and VisibleFlatTreeItemGenerator
  * to ensure required properties when building a FlatTreeITem
  */
-declare type MutableFlatTreeItem = {
-    parentId?: string;
+declare type MutableFlatTreeItem<Value = string> = {
+    parentValue?: Value;
     childrenSize: number;
     index: number;
-    id: string;
+    value: Value;
     level: number;
-    getTreeItemProps(): Required<Pick<TreeItemProps, 'id' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> & TreeItemProps;
+    ref: React_2.RefObject<HTMLDivElement>;
+    getTreeItemProps(): Required<Pick<TreeItemProps<Value>, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> & TreeItemProps<Value>;
 };
 
-export declare type NestedTreeItem = Omit<TreeItemProps, 'subtree'> & {
-    subtree?: NestedTreeItem[];
+export declare type NestedTreeItem<Value = string> = Omit<TreeItemProps<Value>, 'subtree'> & {
+    subtree?: NestedTreeItem<Value>[];
 };
 
 export declare const renderTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSX.Element;
@@ -199,7 +201,22 @@ 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: ForwardRefComponent<TreeProps>;
+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?: "subtle" | "subtle-alpha" | "transparent" | 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 treeClassNames: SlotClassNames<TreeSlots>;
 
@@ -207,12 +224,12 @@ export declare type TreeContextValue = {
     level: number;
     appearance: 'subtle' | 'subtle-alpha' | 'transparent';
     size: 'small' | 'medium';
-    openItems: ImmutableSet<TreeItemId>;
+    openItems: ImmutableSet<unknown>;
     /**
      * Requests dialog main component to update it's internal open state
      */
-    requestOpenChange(data: TreeOpenChangeData): void;
-    requestNavigation(data: TreeNavigationData_unstable): void;
+    requestOpenChange(data: TreeOpenChangeData<unknown>): void;
+    requestNavigation(data: TreeNavigationData_unstable<unknown>): void;
 };
 
 declare type TreeContextValues = {
@@ -228,10 +245,23 @@ declare type TreeContextValues = {
  * 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 nsted child subtree, an expand/collapse control is displayed,
+ * 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 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;
+    leaf?: boolean | undefined;
+} & React_2.RefAttributes<HTMLDivElement>> & (<Value = string>(props: TreeItemProps<Value>) => JSX.Element);
 
 export declare const treeItemClassNames: SlotClassNames<TreeItemSlots>;
 
@@ -248,8 +278,6 @@ declare type TreeItemCSSProperties = React_2.CSSProperties & {
     [treeItemLevelToken]?: string | number;
 };
 
-export declare type TreeItemId = string;
-
 /**
  * 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.
@@ -265,7 +293,7 @@ export declare const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlot
 export declare type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;
 
 export declare type TreeItemLayoutSlots = {
-    root: Slot<'div'>;
+    root: Slot<'span'>;
     /**
      * Icon slot that renders right before main content
      */
@@ -274,6 +302,9 @@ export declare type TreeItemLayoutSlots = {
      * Icon slot that renders right after main content
      */
     iconAfter?: Slot<'span'>;
+    /**
+     * slot that render right after main content and iconAfter
+     */
     aside?: Slot<'span'>;
 };
 
@@ -336,7 +367,8 @@ export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaL
 /**
  * TreeItem Props
  */
-export declare type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {
+export declare type TreeItemProps<Value = string> = ComponentProps<Partial<TreeItemSlots>> & {
+    value?: Value;
     /**
      * If a TreeItem is a leaf, it'll not present the `expandIcon` slot by default.
      * This attribute is used to force the decision if a TreeItem is a leaf or not. By not providing this property
@@ -379,44 +411,40 @@ export declare type TreeItemState = ComponentState<TreeItemSlots> & {
     isActionsVisible: boolean;
 };
 
-export declare type TreeNavigationData_unstable = {
-    event: React_2.MouseEvent<HTMLElement>;
+export declare type TreeNavigationData_unstable<Value = string> = {
+    value: Value;
     target: HTMLElement;
+} & ({
+    event: React_2.MouseEvent<HTMLElement>;
     type: 'Click';
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: 'TypeAhead';
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof ArrowRight;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof ArrowLeft;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof ArrowUp;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof ArrowDown;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof Home;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof End;
-};
+});
 
 export declare type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];
 
-export declare type TreeOpenChangeData = {
+export declare type TreeOpenChangeData<Value = string> = {
     open: boolean;
+    value: Value;
 } & ({
     event: React_2.MouseEvent<HTMLElement>;
     target: HTMLElement;
@@ -441,7 +469,7 @@ export declare type TreeOpenChangeData = {
 
 export declare type TreeOpenChangeEvent = TreeOpenChangeData['event'];
 
-export declare type TreeProps = ComponentProps<TreeSlots> & {
+export declare type TreeProps<Value = string> = ComponentProps<TreeSlots> & {
     /**
      * A tree item can have various appearances:
      * - 'subtle' (default): The default tree item styles.
@@ -460,13 +488,13 @@ export declare type TreeProps = ComponentProps<TreeSlots> & {
      * Controls the state of the open tree items.
      * These property is ignored for subtrees.
      */
-    openItems?: Iterable<TreeItemId>;
+    openItems?: Iterable<Value>;
     /**
      * 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<TreeItemId>;
+    defaultOpenItems?: Iterable<Value>;
     /**
      * Callback fired when the component changes value from open state.
      * These property is ignored for subtrees.
@@ -475,7 +503,7 @@ export declare type TreeProps = 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): void;
+    onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData<Value>): void;
     /**
      * Callback fired when navigation happens inside the component.
      * These property is ignored for subtrees.
@@ -485,7 +513,7 @@ export declare type TreeProps = 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): void;
+    onNavigation_unstable?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable<Value>): void;
 };
 
 export declare const TreeProvider: Provider<TreeContextValue | undefined> & FC<ProviderProps<TreeContextValue | undefined>>;
@@ -511,7 +539,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(flatTreeItemProps: FlatTreeItemProps[], options?: Pick<TreeProps, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>): FlatTree;
+export declare function useFlatTree_unstable<Value = string>(flatTreeItemProps: FlatTreeItemProps<Value>[], options?: Pick<TreeProps<Value>, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>): FlatTree<Value>;
 
 /**
  * Create the state required to render Tree.
@@ -537,7 +565,7 @@ 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 const useTreeItem_unstable: (props: TreeItemProps, ref: React_2.Ref<HTMLDivElement>) => TreeItemState;
+export declare function useTreeItem_unstable<Value = string>(props: TreeItemProps<Value>, ref: React_2.Ref<HTMLDivElement>): TreeItemState;
 
 export declare const useTreeItemContext_unstable: () => TreeItemContextValue;
 

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

@@ -1 +1 @@
-{"version":3,"names":["React","useTree_unstable","renderTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTree_unstable } from './useTree';\nimport { renderTree_unstable } from './renderTree';\nimport { useTreeStyles_unstable } from './useTreeStyles';\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,mBAAmB,QAAQ;AACpC,SAASC,sBAAsB,QAAQ;AAGvC,SAASC,6BAA6B,QAAQ;AAE9C;;;;;;;;AAQA,OAAO,MAAMC,IAAA,gBAAuCL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACnF,MAAMC,KAAA,GAAQR,gBAAA,CAAiBM,KAAA,EAAOC,GAAA;EACtCL,sBAAA,CAAuBM,KAAA;EACvB,MAAMC,aAAA,GAAgBN,6BAAA,CAA8BK,KAAA;EACpD,OAAOP,mBAAA,CAAoBO,KAAA,EAAOC,aAAA;AACpC;AAEAL,IAAA,CAAKM,WAAW,GAAG"}
+{"version":3,"names":["React","useTree_unstable","renderTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTree_unstable } from './useTree';\nimport { renderTree_unstable } from './renderTree';\nimport { useTreeStyles_unstable } from './useTreeStyles';\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,mBAAmB,QAAQ;AACpC,SAASC,sBAAsB,QAAQ;AAGvC,SAASC,6BAA6B,QAAQ;AAE9C;;;;;;;;AAQA,OAAO,MAAMC,IAAA,gBAAOL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACnD,MAAMC,KAAA,GAAQR,gBAAA,CAAiBM,KAAA,EAAOC,GAAA;EACtCL,sBAAA,CAAuBM,KAAA;EACvB,MAAMC,aAAA,GAAgBN,6BAAA,CAA8BK,KAAA;EACpD,OAAOP,mBAAA,CAAoBO,KAAA,EAAOC,aAAA;AACpC;AAEAL,IAAA,CAAKM,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"names":["React"],"sources":["../../../src/components/Tree/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';\nimport { TreeItemId } from '../TreeItem/TreeItem.types';\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable =\n  | { event: React.MouseEvent<HTMLElement>; target: HTMLElement; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof End };\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = { open: boolean } & (\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<TreeItemId>;\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<TreeItemId>;\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> & TreeContextValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
+{"version":3,"names":["React"],"sources":["../../../src/components/Tree/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> & TreeContextValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

package/lib/components/TreeItem/TreeItem.js

@@ -12,7 +12,7 @@ import { useTreeItemContextValues_unstable } from './useTreeItemContextValues';
  * 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 nsted child subtree, an expand/collapse control is displayed,
+ * When a TreeItem has nested child subtree, an expand/collapse control is displayed,
  * allowing the user to show or hide the children.
  */
 export const TreeItem = /*#__PURE__*/React.forwardRef((props, ref) => {

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

@@ -1 +1 @@
-{"version":3,"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/TreeItem/TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\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 nsted 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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAG3C,SAASC,iCAAiC,QAAQ;AAElD;;;;;;;;;;;;AAYA,OAAO,MAAMC,QAAA,gBAA+CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC3F,MAAMC,KAAA,GAAQR,oBAAA,CAAqBM,KAAA,EAAOC,GAAA;EAE1CL,0BAAA,CAA2BM,KAAA;EAC3B,MAAMC,aAAA,GAAgBN,iCAAA,CAAkCK,KAAA;EACxD,OAAOP,uBAAA,CAAwBO,KAAA,EAAOC,aAAA;AACxC;AAEAL,QAAA,CAASM,WAAW,GAAG"}
+{"version":3,"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/TreeItem/TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAG3C,SAASC,iCAAiC,QAAQ;AAElD;;;;;;;;;;;;AAYA,OAAO,MAAMC,QAAA,gBAAWL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvD,MAAMC,KAAA,GAAQR,oBAAA,CAAqBM,KAAA,EAAOC,GAAA;EAE1CL,0BAAA,CAA2BM,KAAA;EAC3B,MAAMC,aAAA,GAAgBN,iCAAA,CAAkCK,KAAA;EACxD,OAAOP,uBAAA,CAAwBO,KAAA,EAAOC,aAAA;AACxC;AAEAL,QAAA,CAASM,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"names":["React"],"sources":["../../../src/components/TreeItem/TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { ButtonContextValue } from '@fluentui/react-button';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\nexport type TreeItemId = string;\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n  content: NonNullable<Slot<'div'>>;\n  subtree?: Slot<'span'>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'span'>;\n  /**\n   * Actions slot that renders on the end of tree item\n   * when the item is hovered/focused\n   */\n  actions?: Slot<'span'>;\n};\n\nexport type TreeItemContextValues = {\n  treeItem: TreeItemContextValue;\n  button: ButtonContextValue;\n};\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  /**\n   * If a TreeItem is a leaf, it'll not present the `expandIcon` slot by default.\n   * This attribute is used to force the decision if a TreeItem is a leaf or not. By not providing this property\n   * this will be inferred by the presence of a subtree as part of the TreeItem children.\n   */\n  leaf?: boolean;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> & {\n  open: boolean;\n  isLeaf: boolean;\n  level: number;\n  /**\n   * By design, a button included on the actions slot should be small\n   */\n  buttonSize: 'small';\n  isActionsVisible: boolean;\n};\n"],"mappings":"AAIA,YAAYA,KAAA,MAAW"}
+{"version":3,"names":["React"],"sources":["../../../src/components/TreeItem/TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { ButtonContextValue } from '@fluentui/react-button';\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 TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n  content: NonNullable<Slot<'div'>>;\n  subtree?: Slot<'span'>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'span'>;\n  /**\n   * Actions slot that renders on the end of tree item\n   * when the item is hovered/focused\n   */\n  actions?: Slot<'span'>;\n};\n\nexport type TreeItemContextValues = {\n  treeItem: TreeItemContextValue;\n  button: ButtonContextValue;\n};\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps<Value = string> = ComponentProps<Partial<TreeItemSlots>> & {\n  value?: Value;\n  /**\n   * If a TreeItem is a leaf, it'll not present the `expandIcon` slot by default.\n   * This attribute is used to force the decision if a TreeItem is a leaf or not. By not providing this property\n   * this will be inferred by the presence of a subtree as part of the TreeItem children.\n   */\n  leaf?: boolean;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> & {\n  open: boolean;\n  isLeaf: boolean;\n  level: number;\n  /**\n   * By design, a button included on the actions slot should be small\n   */\n  buttonSize: 'small';\n  isActionsVisible: boolean;\n};\n"],"mappings":"AAIA,YAAYA,KAAA,MAAW"}

package/lib/components/TreeItem/useTreeItem.js

@@ -18,9 +18,10 @@ import { treeDataTypes } from '../../utils/tokens';
  * @param props - props from this instance of TreeItem
  * @param ref - reference to root HTMLElement of TreeItem
  */
-export const useTreeItem_unstable = (props, ref) => {
+export function useTreeItem_unstable(props, ref) {
   const [children, subtreeChildren] = React.Children.toArray(props.children);
   const contextLevel = useTreeContext_unstable(ctx => ctx.level);
+  const id = useId('fui-TreeItem-', props.id);
   const {
     content,
     subtree,
@@ -31,13 +32,13 @@ export const useTreeItem_unstable = (props, ref) => {
     onClick,
     onKeyDown,
     ['aria-level']: level = contextLevel,
+    value = id,
     ...rest
   } = props;
   const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);
   const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);
-  const id = useId('fui-TreeItem-', props.id);
   const isBranch = !isLeaf;
-  const open = useTreeContext_unstable(ctx => isBranch && ctx.openItems.has(id));
+  const open = useTreeContext_unstable(ctx => isBranch && ctx.openItems.has(value));
   const {
     dir,
     targetDocument
@@ -50,6 +51,7 @@ export const useTreeItem_unstable = (props, ref) => {
     if (!open && isBranch) {
       return requestOpenChange({
         event,
+        value,
         open: true,
         type: treeDataTypes.arrowRight,
         target: event.currentTarget
@@ -58,6 +60,7 @@ export const useTreeItem_unstable = (props, ref) => {
     if (open && isBranch) {
       return requestNavigation({
         event,
+        value,
         type: treeDataTypes.arrowRight,
         target: event.currentTarget
       });
@@ -67,6 +70,7 @@ export const useTreeItem_unstable = (props, ref) => {
     if (open && isBranch) {
       return requestOpenChange({
         event,
+        value,
         open: false,
         type: treeDataTypes.arrowLeft,
         target: event.currentTarget
@@ -75,6 +79,7 @@ export const useTreeItem_unstable = (props, ref) => {
     if (!open && level > 1) {
       return requestNavigation({
         event,
+        value,
         target: event.currentTarget,
         type: treeDataTypes.arrowLeft
       });
@@ -83,6 +88,7 @@ export const useTreeItem_unstable = (props, ref) => {
   const handleEnter = event => {
     requestOpenChange({
       event,
+      value,
       open: isLeaf ? open : !open,
       type: treeDataTypes.enter,
       target: event.currentTarget
@@ -101,12 +107,14 @@ export const useTreeItem_unstable = (props, ref) => {
     const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);
     requestOpenChange({
       event,
+      value,
       open: isLeaf ? open : !open,
       type: isFromExpandIcon ? treeDataTypes.expandIconClick : treeDataTypes.click,
       target: event.currentTarget
     });
     requestNavigation({
       event,
+      value,
       target: event.currentTarget,
       type: treeDataTypes.click
     });
@@ -129,24 +137,28 @@ export const useTreeItem_unstable = (props, ref) => {
       case End:
         return requestNavigation({
           event,
+          value,
           type: treeDataTypes.end,
           target: event.currentTarget
         });
       case Home:
         return requestNavigation({
           event,
+          value,
           type: treeDataTypes.home,
           target: event.currentTarget
         });
       case ArrowUp:
         return requestNavigation({
           event,
+          value,
           type: treeDataTypes.arrowUp,
           target: event.currentTarget
         });
       case ArrowDown:
         return requestNavigation({
           event,
+          value,
           type: treeDataTypes.arrowDown,
           target: event.currentTarget
         });
@@ -155,6 +167,7 @@ export const useTreeItem_unstable = (props, ref) => {
     if (isTypeAheadCharacter) {
       return requestNavigation({
         event,
+        value,
         target: event.currentTarget,
         type: treeDataTypes.typeAhead
       });
@@ -246,5 +259,5 @@ export const useTreeItem_unstable = (props, ref) => {
       }
     })
   };
-};
+}
 //# sourceMappingURL=useTreeItem.js.map