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

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { ArrowRight } from '@fluentui/keyboard-keys';
 import { ArrowUp } from '@fluentui/keyboard-keys';
 import type { AvatarContextValue } from '@fluentui/react-avatar';
 import type { AvatarSize } from '@fluentui/react-avatar';
-import type { ButtonContextValue } from '@fluentui/react-button';
+import { ButtonContextValue } from '@fluentui/react-button';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { ContextSelector } from '@fluentui/react-context-selector';
@@ -23,6 +23,8 @@ 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;
+
 /**
  * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`
  * @example
@@ -63,7 +65,7 @@ import { SlotRenderFunction } from '@fluentui/react-utilities';
  * ]);
  * ```
  */
-export declare const flattenTree_unstable: <Value = string>(items: NestedTreeItem<Value>[]) => FlatTreeItemProps<Value>[];
+export declare const flattenTree_unstable: <Props extends TreeItemProps<unknown>>(items: NestedTreeItem<Props>[]) => FlattenedTreeItem<Props>[];
 
 /**
  * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -75,13 +77,13 @@ export declare const flattenTree_unstable: <Value = string>(items: NestedTreeIte
  *
  * On simple scenarios it is advised to simply use a nested structure instead.
  */
-export declare type FlatTree<Value = string> = {
+export declare type FlatTree<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {
     /**
      * returns the properties required for the Tree component to work properly.
      * That includes:
      * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`
      */
-    getTreeProps(): FlatTreeProps<Value>;
+    getTreeProps(): FlatTreeProps<Props['value']>;
     /**
      * internal method used to react to an `onNavigation` event.
      * This method ensures proper navigation on keyboard and mouse interaction.
@@ -105,7 +107,7 @@ export declare type FlatTree<Value = string> = {
      * };
      *```
      */
-    navigate(data: TreeNavigationData_unstable<Value>): void;
+    navigate(data: TreeNavigationData_unstable<Props['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
@@ -113,23 +115,43 @@ export declare type FlatTree<Value = string> = {
      *
      * On the case of TypeAhead navigation this method returns the current item.
      */
-    getNextNavigableItem(visibleItems: FlatTreeItem<Value>[], data: TreeNavigationData_unstable<Value>): FlatTreeItem<Value> | undefined;
+    getNextNavigableItem(visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable<Props['value']>): FlatTreeItem<Props> | undefined;
     /**
      * an iterable containing all visually available flat tree items
      */
-    items(): IterableIterator<FlatTreeItem<Value>>;
+    items(): IterableIterator<FlatTreeItem<Props>>;
 };
 
-export declare type FlatTreeItem<Value = string> = Readonly<MutableFlatTreeItem<Value>>;
+/**
+ * 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> = {
+    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'>;
+};
 
-export declare type FlatTreeItemProps<Value = string> = Omit<TreeItemProps, 'value'> & {
+export declare type FlatTreeItemProps<Value = string> = Omit<TreeItemProps<Value>, 'itemType'> & Partial<Pick<TreeItemProps<Value>, 'itemType'>> & {
     value: Value;
     parentValue?: Value;
 };
 
-export declare type FlatTreeProps<Value = string> = Required<Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & {
+declare type FlatTreeOptions<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = Pick<TreeProps<Props['value']>, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>;
+
+export declare type FlatTreeProps<Value = string> = Required<Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>> & {
     ref: React_2.Ref<HTMLDivElement>;
-}>;
+    openItems: ImmutableSet<Value>;
+};
 
 declare interface ImmutableSet<Value> {
     /**
@@ -157,24 +179,11 @@ declare interface ImmutableSet<Value> {
     [Symbol.iterator](): IterableIterator<Value>;
 }
 
-/**
- * @internal
- * Used internally on createFlatTreeItems and VisibleFlatTreeItemGenerator
- * to ensure required properties when building a FlatTreeITem
- */
-declare type MutableFlatTreeItem<Value = string> = {
-    parentValue?: Value;
-    childrenSize: number;
-    index: number;
-    value: Value;
-    level: number;
-    ref: React_2.RefObject<HTMLDivElement>;
-    getTreeItemProps(): Required<Pick<TreeItemProps<Value>, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> & TreeItemProps<Value>;
+export declare type NestedTreeItem<Props extends TreeItemProps<unknown>> = Omit<Props, 'subtree' | 'itemType'> & {
+    subtree?: NestedTreeItem<Props>[];
 };
 
-export declare type NestedTreeItem<Value = string> = Omit<TreeItemProps<Value>, 'subtree'> & {
-    subtree?: NestedTreeItem<Value>[];
-};
+declare type OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;
 
 export declare const renderTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSX.Element;
 
@@ -183,6 +192,11 @@ 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
  */
@@ -210,7 +224,7 @@ export declare const Tree: React_2.ForwardRefExoticComponent<Omit<TreeSlots, "ro
     ref?: ((instance: HTMLDivElement | null) => void) | React_2.RefObject<HTMLDivElement> | null | undefined;
     }>;
 }, "ref"> & {
-    appearance?: "subtle" | "subtle-alpha" | "transparent" | undefined;
+    appearance?: "transparent" | "subtle" | "subtle-alpha" | undefined;
     size?: "small" | "medium" | undefined;
     openItems?: Iterable<string> | undefined;
     defaultOpenItems?: Iterable<string> | undefined;
@@ -226,10 +240,9 @@ export declare type TreeContextValue = {
     size: 'small' | 'medium';
     openItems: ImmutableSet<unknown>;
     /**
-     * Requests dialog main component to update it's internal open state
+     * requests root Tree component to respond to some tree item event,
      */
-    requestOpenChange(data: TreeOpenChangeData<unknown>): void;
-    requestNavigation(data: TreeNavigationData_unstable<unknown>): void;
+    requestTreeResponse(request: TreeItemRequest<unknown>): void;
 };
 
 declare type TreeContextValues = {
@@ -260,18 +273,63 @@ export declare const TreeItem: React_2.ForwardRefExoticComponent<Omit<Partial<Tr
     style?: TreeItemCSSProperties | undefined;
 }, "ref"> & {
     value?: string | undefined;
-    leaf?: boolean | 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 treeItemClassNames: SlotClassNames<TreeItemSlots>;
 
 declare type TreeItemContextValue = {
     isActionsVisible: boolean;
+    isAsideVisible: boolean;
+    actionsRef: React_2.Ref<HTMLDivElement>;
+    expandIconRef: React_2.Ref<HTMLDivElement>;
+    layoutRef: React_2.Ref<HTMLDivElement>;
+    subtreeRef: React_2.Ref<HTMLDivElement>;
+    value: unknown;
+    itemType: TreeItemType;
+    open: boolean;
 };
 
 declare type TreeItemContextValues = {
     treeItem: TreeItemContextValue;
-    button: ButtonContextValue;
 };
 
 declare type TreeItemCSSProperties = React_2.CSSProperties & {
@@ -293,25 +351,26 @@ export declare const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlot
 export declare type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;
 
 export declare type TreeItemLayoutSlots = {
-    root: Slot<'span'>;
+    root: Slot<'div'>;
     /**
-     * Icon slot that renders right before main content
+     * Expand icon slot,
+     * by default renders a chevron icon to indicate opening and closing
      */
-    iconBefore?: Slot<'span'>;
+    expandIcon?: Slot<'div'>;
     /**
-     * Icon slot that renders right after main content
+     * Icon slot that renders right before main content
      */
-    iconAfter?: Slot<'span'>;
+    iconBefore?: Slot<'div'>;
     /**
-     * slot that render right after main content and iconAfter
+     * Icon slot that renders right after main content
      */
-    aside?: Slot<'span'>;
+    iconAfter?: Slot<'div'>;
 };
 
 /**
  * State used in rendering TreeItemLayout
  */
-export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & TreeItemContextValue;
+export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots>;
 
 export declare const treeItemLevelToken: "--fluent-TreeItem--level";
 
@@ -334,33 +393,34 @@ declare type TreeItemPersonaLayoutContextValues = {
 export declare type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;
 
 export declare type TreeItemPersonaLayoutSlots = {
-    root: Slot<'span'>;
+    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<'span'>>;
+    media: NonNullable<Slot<'div'>>;
     /**
      * Main text. Children of the root slot are automatically rendered here
      */
-    main: Slot<'span'>;
+    main: NonNullable<Slot<'div'>>;
     /**
      * Secondary text that describes or complements the main text
      */
-    description?: Slot<'span'>;
-    /**
-     * aside text that works as extra textual information
-     */
-    aside?: Slot<'span'>;
+    description?: Slot<'div'>;
     /**
      * A layout wrapper for the main and description slots
      */
-    content: Slot<'div'>;
+    content: NonNullable<Slot<'div'>>;
 };
 
 /**
  * State used in rendering TreeItemPersonaLayout
  */
-export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & TreeItemContextValue & {
+export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {
     avatarSize: AvatarSize;
 };
 
@@ -369,48 +429,31 @@ export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaL
  */
 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
-     * this will be inferred by the presence of a subtree as part of the TreeItem children.
-     */
-    leaf?: boolean;
+    itemType: TreeItemType;
 };
 
-export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | undefined>;
+export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | undefined> & React_2.FC<React_2.ProviderProps<TreeItemContextValue | undefined>>;
+
+declare type TreeItemRequest<Value> = {
+    itemType: TreeItemType;
+} & (OmitWithoutExpanding<TreeOpenChangeData<Value>, 'open' | 'target'> | OmitWithoutExpanding<TreeNavigationData_unstable<Value>, 'target'>);
 
 export declare type TreeItemSlots = {
     root: Slot<ExtractSlotProps<Slot<'div'> & {
         style?: TreeItemCSSProperties;
     }>>;
-    content: NonNullable<Slot<'div'>>;
-    subtree?: Slot<'span'>;
-    /**
-     * Expand icon slot,
-     * by default renders a chevron icon to indicate opening and closing
-     */
-    expandIcon?: Slot<'span'>;
-    /**
-     * Actions slot that renders on the end of tree item
-     * when the item is hovered/focused
-     */
-    actions?: Slot<'span'>;
 };
 
 /**
  * State used in rendering TreeItem
  */
-export declare type TreeItemState = ComponentState<TreeItemSlots> & {
-    open: boolean;
-    isLeaf: boolean;
+export declare type TreeItemState = ComponentState<TreeItemSlots> & TreeItemContextValue & {
     level: number;
-    /**
-     * By design, a button included on the actions slot should be small
-     */
-    buttonSize: 'small';
-    isActionsVisible: boolean;
+    itemType: TreeItemType;
 };
 
+declare type TreeItemType = 'leaf' | 'branch';
+
 export declare type TreeNavigationData_unstable<Value = string> = {
     value: Value;
     target: HTMLElement;
@@ -525,7 +568,9 @@ export declare type TreeSlots = {
 /**
  * State used in rendering Tree
  */
-export declare type TreeState = ComponentState<TreeSlots> & TreeContextValue;
+export declare type TreeState = ComponentState<TreeSlots> & TreeContextValue & {
+    open: boolean;
+};
 
 /**
  * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -539,7 +584,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<Value = string>(flatTreeItemProps: FlatTreeItemProps<Value>[], options?: Pick<TreeProps<Value>, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>): FlatTree<Value>;
+export declare function useFlatTree_unstable<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps>(flatTreeItemProps: Props[], options?: FlatTreeOptions<Props>): FlatTree<Props>;
 
 /**
  * Create the state required to render Tree.
@@ -567,7 +612,23 @@ export declare function useTreeContextValues_unstable(state: TreeState): TreeCon
  */
 export declare function useTreeItem_unstable<Value = string>(props: TreeItemProps<Value>, ref: React_2.Ref<HTMLDivElement>): TreeItemState;
 
-export declare const useTreeItemContext_unstable: () => TreeItemContextValue;
+/**
+ * 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 const useTreeItemContext_unstable: <T>(selector: ContextSelector<TreeItemContextValue, T>) => T;
 
 /**
  * Create the state required to render TreeItemLayout.

package/lib/TreeItemAside.js

@@ -0,0 +1,2 @@
+export * from './components/TreeItemAside/index';
+//# sourceMappingURL=TreeItemAside.js.map

package/lib/TreeItemAside.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../src/TreeItemAside.ts"],"sourcesContent":["export * from './components/TreeItemAside/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/components/Tree/Tree.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTree_unstable } from './useTree';
 import { renderTree_unstable } from './renderTree';
-import { useTreeStyles_unstable } from './useTreeStyles';
+import { useTreeStyles_unstable } from './useTreeStyles.styles';
 import { useTreeContextValues_unstable } from './useTreeContextValues';
 /**
  * A tree view widget presents a hierarchical list.

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 = 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"}
+{"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.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"],"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';\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"}
+{"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> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

package/lib/components/Tree/index.js

@@ -2,6 +2,6 @@ export * from './Tree';
 export * from './Tree.types';
 export * from './renderTree';
 export * from './useTree';
-export * from './useTreeStyles';
+export * from './useTreeStyles.styles';
 export * from './useTreeContextValues';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Tree/index.ts"],"sourcesContent":["export * from './Tree';\nexport * from './Tree.types';\nexport * from './renderTree';\nexport * from './useTree';\nexport * from './useTreeStyles';\nexport * from './useTreeContextValues';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/Tree/index.ts"],"sourcesContent":["export * from './Tree';\nexport * from './Tree.types';\nexport * from './renderTree';\nexport * from './useTree';\nexport * from './useTreeStyles.styles';\nexport * from './useTreeContextValues';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/Tree/renderTree.js

@@ -8,6 +8,6 @@ export const renderTree_unstable = (state, contextValues) => {
   } = getSlotsNext(state);
   return /*#__PURE__*/createElement(TreeProvider, {
     value: contextValues.tree
-  }, /*#__PURE__*/createElement(slots.root, slotProps.root, slotProps.root.children));
+  }, state.open && /*#__PURE__*/createElement(slots.root, slotProps.root, slotProps.root.children));
 };
 //# sourceMappingURL=renderTree.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","TreeProvider","renderTree_unstable","state","contextValues","slots","slotProps","value","tree","root","children"],"sources":["../../../src/components/Tree/renderTree.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeState, TreeSlots, TreeContextValues } from './Tree.types';\nimport { TreeProvider } from '../../contexts';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {\n  const { slots, slotProps } = getSlotsNext<TreeSlots>(state);\n\n  return (\n    <TreeProvider value={contextValues.tree}>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n    </TreeProvider>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAE7B,SAASC,YAAY,QAAQ;AAE7B,OAAO,MAAMC,mBAAA,GAAsBA,CAACC,KAAA,EAAkBC,aAAA,KAAqC;EACzF,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAAwBG,KAAA;EAErD,oBACEJ,aAXJ,CAWKE,YAAA;IAAaM,KAAA,EAAOH,aAAA,CAAcI;kBACjCT,aAZN,CAYOM,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI,EAAGH,SAAA,CAAUG,IAAI,CAACC,QAAQ;AAG9D"}
+{"version":3,"names":["createElement","getSlotsNext","TreeProvider","renderTree_unstable","state","contextValues","slots","slotProps","value","tree","open","root","children"],"sources":["../../../src/components/Tree/renderTree.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeState, TreeSlots, TreeContextValues } from './Tree.types';\nimport { TreeProvider } from '../../contexts';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {\n  const { slots, slotProps } = getSlotsNext<TreeSlots>(state);\n  return (\n    <TreeProvider value={contextValues.tree}>\n      {state.open && <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>}\n    </TreeProvider>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAE7B,SAASC,YAAY,QAAQ;AAE7B,OAAO,MAAMC,mBAAA,GAAsBA,CAACC,KAAA,EAAkBC,aAAA,KAAqC;EACzF,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAAwBG,KAAA;EACrD,oBACEJ,aAVJ,CAUKE,YAAA;IAAaM,KAAA,EAAOH,aAAA,CAAcI;KAChCL,KAAA,CAAMM,IAAI,iBAAIV,aAXrB,CAWsBM,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,EAAGJ,SAAA,CAAUI,IAAI,CAACC,QAAQ;AAG7E"}

package/lib/components/Tree/useRootTree.js

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { useNestedTreeNavigation, useOpenItemsState } from '../../hooks';
+import { treeDataTypes } from '../../utils/tokens';
+/**
+ * Create the state required to render the root level Tree.
+ *
+ * @param props - props from this instance of Tree
+ * @param ref - reference to root HTMLElement of Tree
+ */
+export function useRootTree(props, ref) {
+  warnIfNoProperPropsRootTree(props);
+  const {
+    appearance = 'subtle',
+    size = 'medium'
+  } = props;
+  const [openItems, updateOpenItems] = useOpenItemsState(props);
+  const [navigate, navigationRef] = useNestedTreeNavigation();
+  const requestOpenChange = data => {
+    var _props_onOpenChange;
+    (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, data);
+    if (data.event.isDefaultPrevented()) {
+      return;
+    }
+    return updateOpenItems(data);
+  };
+  const requestNavigation = data => {
+    var _props_onNavigation_unstable;
+    (_props_onNavigation_unstable = props.onNavigation_unstable) === null || _props_onNavigation_unstable === void 0 ? void 0 : _props_onNavigation_unstable.call(props, data.event, data);
+    if (data.event.isDefaultPrevented()) {
+      return;
+    }
+    navigate(data);
+    if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {
+      data.event.preventDefault();
+    }
+  };
+  const handleTreeItemClick = ({
+    event,
+    value,
+    itemType,
+    type
+  }) => {
+    ReactDOM.unstable_batchedUpdates(() => {
+      requestOpenChange({
+        event,
+        value,
+        open: itemType === 'branch' && !openItems.has(value),
+        type,
+        target: event.currentTarget
+      });
+      requestNavigation({
+        event,
+        value,
+        target: event.currentTarget,
+        type: treeDataTypes.Click
+      });
+    });
+  };
+  const handleTreeItemKeyDown = ({
+    event,
+    value,
+    type,
+    itemType
+  }) => {
+    const open = openItems.has(value);
+    switch (type) {
+      case treeDataTypes.ArrowRight:
+        if (itemType === 'leaf') {
+          return;
+        }
+        if (!open) {
+          return requestOpenChange({
+            event,
+            value,
+            open: true,
+            type: treeDataTypes.ArrowRight,
+            target: event.currentTarget
+          });
+        }
+        return requestNavigation({
+          event,
+          value,
+          type,
+          target: event.currentTarget
+        });
+      case treeDataTypes.Enter:
+        return requestOpenChange({
+          event,
+          value,
+          open: itemType === 'branch' && !open,
+          type: treeDataTypes.Enter,
+          target: event.currentTarget
+        });
+      case treeDataTypes.ArrowLeft:
+        if (open && itemType === 'branch') {
+          return requestOpenChange({
+            event,
+            value,
+            open: false,
+            type: treeDataTypes.ArrowLeft,
+            target: event.currentTarget
+          });
+        }
+        return requestNavigation({
+          event,
+          value,
+          target: event.currentTarget,
+          type: treeDataTypes.ArrowLeft
+        });
+      case treeDataTypes.End:
+      case treeDataTypes.Home:
+      case treeDataTypes.ArrowUp:
+      case treeDataTypes.ArrowDown:
+      case treeDataTypes.TypeAhead:
+        return requestNavigation({
+          event,
+          value,
+          type,
+          target: event.currentTarget
+        });
+    }
+  };
+  const requestTreeResponse = useEventCallback(request => {
+    switch (request.event.type) {
+      case 'click':
+        // casting is required here as we're narrowing down the event to only click events
+        return handleTreeItemClick(request);
+      case 'keydown':
+        // casting is required here as we're narrowing down the event to only keyboard events
+        return handleTreeItemKeyDown(request);
+    }
+  });
+  return {
+    components: {
+      root: 'div'
+    },
+    open: true,
+    appearance,
+    size,
+    level: 1,
+    openItems,
+    requestTreeResponse,
+    root: getNativeElementProps('div', {
+      ref: useMergedRefs(navigationRef, ref),
+      role: 'tree',
+      ...props
+    })
+  };
+}
+function warnIfNoProperPropsRootTree(props) {
+  if (process.env.NODE_ENV === 'development') {
+    if (!props['aria-label'] && !props['aria-labelledby']) {
+      // eslint-disable-next-line no-console
+      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');
+    }
+  }
+}
+//# sourceMappingURL=useRootTree.js.map