@fluentui/react-tree 9.5.0 → 9.6.0

package/CHANGELOG.md

@@ -1,12 +1,50 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Mon, 20 May 2024 12:36:44 GMT and should not be manually modified.
+This log was last generated on Thu, 06 Jun 2024 15:22:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.6.0)
+
+Thu, 06 Jun 2024 15:22:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.5.1..@fluentui/react-tree_v9.6.0)
+
+### Minor changes
+
+- feature: preventScroll on navigation ([PR #31577](https://github.com/microsoft/fluentui/pull/31577) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.12.0 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+- Bump @fluentui/react-avatar to v9.6.29 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+- Bump @fluentui/react-button to v9.3.83 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+- Bump @fluentui/react-checkbox to v9.2.28 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.61 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+- Bump @fluentui/react-radio to v9.2.23 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+- Bump @fluentui/react-tabster to v9.21.5 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+- Bump @fluentui/react-utilities to v9.18.10 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.39 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+
+### Patches
+
+- bugfix: ensure roving tab index when children content changes ([PR #31595](https://github.com/microsoft/fluentui/pull/31595) by bernardo.sunderhus@gmail.com)
+- chore: ensure only state or defaultState is provided on useControllableState hook invocation ([PR #31461](https://github.com/microsoft/fluentui/pull/31461) by bernardo.sunderhus@gmail.com)
+
+## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.5.1)
+
+Thu, 23 May 2024 08:02:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.5.0..@fluentui/react-tree_v9.5.1)
+
+### Patches
+
+- chore: replace usage of .shorthands() in styles ([PR #31432](https://github.com/microsoft/fluentui/pull/31432) by olfedias@microsoft.com)
+- Bump @fluentui/react-aria to v9.11.4 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
+- Bump @fluentui/react-avatar to v9.6.28 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
+- Bump @fluentui/react-button to v9.3.82 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
+- Bump @fluentui/react-checkbox to v9.2.27 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
+- Bump @fluentui/react-radio to v9.2.22 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
+- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
+
 ## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.5.0)
 
-Mon, 20 May 2024 12:36:44 GMT 
+Mon, 20 May 2024 12:45:08 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.43..@fluentui/react-tree_v9.5.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -710,6 +710,18 @@ export declare type TreeNavigationData_unstable = {
     type: typeof End;
 });
 
+/**
+ * @internal
+ *
+ * To avoid breaking changes on TreeNavigationData
+ * we are creating a new type that extends the old one
+ * and adds the new methods, and this type will not be exported
+ */
+declare type TreeNavigationDataParam = TreeNavigationData_unstable & {
+    preventScroll(): void;
+    isScrollPrevented(): boolean;
+};
+
 export declare type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];
 
 export declare type TreeOpenChangeData = {
@@ -786,7 +798,7 @@ export declare type TreeProps = ComponentProps<TreeSlots> & {
      * @param event - a React's Synthetic event
      * @param data - A data object with relevant information,
      */
-    onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;
+    onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationDataParam): void;
     /**
      * This refers to the selection mode of the tree.
      * - undefined: No selection can be done.

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

@@ -1 +1 @@
-{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue, SubtreeContextValue } from '../../contexts';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = {\n  target: HTMLElement;\n  value: TreeItemValue;\n  parentValue: TreeItemValue | undefined;\n} & (\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 = {\n  open: boolean;\n  openItems: Set<TreeItemValue>;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  /**\n   * @deprecated\n   * Use `type: 'Click'` instead of Enter,\n   * an enter press will trigger a click event, which will trigger an open change,\n   * so there is no need to have a separate type for it.\n   */\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n  value: TreeItemValue;\n  checkedItems: Map<TreeItemValue, TreeSelectionValue>;\n  target: HTMLElement;\n  event: React.ChangeEvent<HTMLElement>;\n  type: 'Change';\n} & (\n  | {\n      selectionMode: 'multiselect';\n      checked: MultiSelectValue;\n    }\n  | {\n      selectionMode: 'single';\n      checked: SingleSelectValue;\n    }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue | SubtreeContextValue;\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<TreeItemValue>;\n  /**\n   * This refers to a list of ids of default opened items.\n   * This property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<TreeItemValue>;\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  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked 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 checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> & {\n  open: boolean;\n} & (TreeContextValue | SubtreeContextValue);\n"],"names":[],"mappings":"AAAA,WA4J6C"}
+{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue, SubtreeContextValue } from '../../contexts';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = {\n  target: HTMLElement;\n  value: TreeItemValue;\n  parentValue: TreeItemValue | undefined;\n} & (\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 = {\n  open: boolean;\n  openItems: Set<TreeItemValue>;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  /**\n   * @deprecated\n   * Use `type: 'Click'` instead of Enter,\n   * an enter press will trigger a click event, which will trigger an open change,\n   * so there is no need to have a separate type for it.\n   */\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\n/**\n * @internal\n *\n * To avoid breaking changes on TreeNavigationData\n * we are creating a new type that extends the old one\n * and adds the new methods, and this type will not be exported\n */\ntype TreeNavigationDataParam = TreeNavigationData_unstable & {\n  preventScroll(): void;\n  isScrollPrevented(): boolean;\n};\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n  value: TreeItemValue;\n  checkedItems: Map<TreeItemValue, TreeSelectionValue>;\n  target: HTMLElement;\n  event: React.ChangeEvent<HTMLElement>;\n  type: 'Change';\n} & (\n  | {\n      selectionMode: 'multiselect';\n      checked: MultiSelectValue;\n    }\n  | {\n      selectionMode: 'single';\n      checked: SingleSelectValue;\n    }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue | SubtreeContextValue;\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<TreeItemValue>;\n  /**\n   * This refers to a list of ids of default opened items.\n   * This property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<TreeItemValue>;\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  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationDataParam): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked 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 checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> & {\n  open: boolean;\n} & (TreeContextValue | SubtreeContextValue);\n"],"names":[],"mappings":"AAAA,WAwK6C"}

package/lib/components/Tree/useTree.js

@@ -35,7 +35,9 @@ function useNestedRootTree(props, ref) {
             var _props_onNavigation;
             (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);
             if (!event.isDefaultPrevented()) {
-                navigation.navigate(data);
+                navigation.navigate(data, {
+                    preventScroll: data.isScrollPrevented()
+                });
             }
         }),
         onCheckedChange: useEventCallback((event, data)=>{
@@ -46,7 +48,7 @@ function useNestedRootTree(props, ref) {
                 checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()
             });
         })
-    }, useMergedRefs(ref, navigation.rootRef)), {
+    }, useMergedRefs(ref, navigation.treeRef)), {
         treeType: 'nested'
     });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeProps, TreeState } from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { useTreeNavigation } from '../../hooks/useTreeNavigation';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  const isRoot = React.useContext(SubtreeContext) === undefined;\n  // as level is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n  const checkedItems = useNestedCheckedItems(props);\n  const navigation = useTreeNavigation();\n\n  return Object.assign(\n    useRootTree(\n      {\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: useEventCallback((event, data) => {\n          const nextOpenItems = createNextOpenItems(data, openItems);\n          props.onOpenChange?.(event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n          });\n          setOpenItems(nextOpenItems);\n        }),\n        onNavigation: useEventCallback((event, data) => {\n          props.onNavigation?.(event, data);\n          if (!event.isDefaultPrevented()) {\n            navigation.navigate(data);\n          }\n        }),\n        onCheckedChange: useEventCallback((event, data) => {\n          const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n          props.onCheckedChange?.(event, {\n            ...data,\n            checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable(),\n          });\n        }),\n      },\n      useMergedRefs(ref, navigation.rootRef),\n    ),\n    { treeType: 'nested' } as const,\n  );\n}\n\nfunction useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  if (process.env.NODE_ENV === 'development') {\n    // this doesn't break rule of hooks, as environment is a static value\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n    if (treeType === 'flat') {\n      throw new Error(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useTree]:\n        Subtrees are not allowed in a FlatTree!\n        You cannot use a <Tree> component inside of a <FlatTree> component!\n      `);\n    }\n  }\n  return useSubtree(props, ref);\n}\n"],"names":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","createNextNestedCheckedItems","useNestedCheckedItems","SubtreeContext","useRootTree","useSubtree","useTreeNavigation","useTreeContext_unstable","useTree_unstable","props","ref","isRoot","useContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","checkedItems","navigation","Object","assign","onOpenChange","event","data","nextOpenItems","dangerouslyGetInternalSet_unstable","onNavigation","isDefaultPrevented","navigate","onCheckedChange","nextCheckedItems","dangerouslyGetInternalMap_unstable","rootRef","treeType","process","env","NODE_ENV","ctx","Error"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAE5E,SAASC,mBAAmB,EAAEC,wBAAwB,QAAQ,uCAAuC;AACrG,SAASC,4BAA4B,EAAEC,qBAAqB,QAAQ,sCAAsC;AAC1G,SAASC,cAAc,QAAQ,gCAAgC;AAC/D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,uBAAuB,QAAQ,6BAA6B;AAErE,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD,MAAMC,SAASf,MAAMgB,UAAU,CAACT,oBAAoBU;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,kBAAkBL,OAAOC,OAAOK,iBAAiBN,OAAOC;AAC1E,EAAE;AAEF,SAASI,kBAAkBL,KAAgB,EAAEC,GAA2B;IACtE,MAAM,CAACM,WAAWC,aAAa,GAAGjB,yBAAyBS;IAC3D,MAAMS,eAAehB,sBAAsBO;IAC3C,MAAMU,aAAab;IAEnB,OAAOc,OAAOC,MAAM,CAClBjB,YACE;QACE,GAAGK,KAAK;QACRO;QACAE;QACAI,cAAczB,iBAAiB,CAAC0B,OAAOC;gBAErCf;YADA,MAAMgB,gBAAgB1B,oBAAoByB,MAAMR;aAChDP,sBAAAA,MAAMa,YAAY,cAAlBb,0CAAAA,yBAAAA,OAAqBc,OAAO;gBAC1B,GAAGC,IAAI;gBACPR,WAAWS,cAAcC,kCAAkC;YAC7D;YACAT,aAAaQ;QACf;QACAE,cAAc9B,iBAAiB,CAAC0B,OAAOC;gBACrCf;aAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBc,OAAOC;YAC5B,IAAI,CAACD,MAAMK,kBAAkB,IAAI;gBAC/BT,WAAWU,QAAQ,CAACL;YACtB;QACF;QACAM,iBAAiBjC,iBAAiB,CAAC0B,OAAOC;gBAExCf;YADA,MAAMsB,mBAAmB9B,6BAA6BuB,MAAMN;aAC5DT,yBAAAA,MAAMqB,eAAe,cAArBrB,6CAAAA,4BAAAA,OAAwBc,OAAO;gBAC7B,GAAGC,IAAI;gBACPN,cAAca,iBAAiBC,kCAAkC;YACnE;QACF;IACF,GACAlC,cAAcY,KAAKS,WAAWc,OAAO,IAEvC;QAAEC,UAAU;IAAS;AAEzB;AAEA,SAASnB,iBAAiBN,KAAgB,EAAEC,GAA2B;IACrE,IAAIyB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,qEAAqE;QACrE,sDAAsD;QACtD,MAAMH,WAAW3B,wBAAwB+B,CAAAA,MAAOA,IAAIJ,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACvB,MAAM,IAAIK,MAA2B,CAAC;;mEAItC,CAAC;QACH;IACF;IACA,OAAOlC,WAAWI,OAAOC;AAC3B"}
+{"version":3,"sources":["useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeProps, TreeState } from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { useTreeNavigation } from '../../hooks/useTreeNavigation';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  const isRoot = React.useContext(SubtreeContext) === undefined;\n  // as level is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n  const checkedItems = useNestedCheckedItems(props);\n  const navigation = useTreeNavigation();\n\n  return Object.assign(\n    useRootTree(\n      {\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: useEventCallback((event, data) => {\n          const nextOpenItems = createNextOpenItems(data, openItems);\n          props.onOpenChange?.(event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n          });\n          setOpenItems(nextOpenItems);\n        }),\n        onNavigation: useEventCallback((event, data) => {\n          props.onNavigation?.(event, data);\n          if (!event.isDefaultPrevented()) {\n            navigation.navigate(data, {\n              preventScroll: data.isScrollPrevented(),\n            });\n          }\n        }),\n        onCheckedChange: useEventCallback((event, data) => {\n          const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n          props.onCheckedChange?.(event, {\n            ...data,\n            checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable(),\n          });\n        }),\n      },\n      useMergedRefs(ref, navigation.treeRef),\n    ),\n    { treeType: 'nested' } as const,\n  );\n}\n\nfunction useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  if (process.env.NODE_ENV === 'development') {\n    // this doesn't break rule of hooks, as environment is a static value\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n    if (treeType === 'flat') {\n      throw new Error(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useTree]:\n        Subtrees are not allowed in a FlatTree!\n        You cannot use a <Tree> component inside of a <FlatTree> component!\n      `);\n    }\n  }\n  return useSubtree(props, ref);\n}\n"],"names":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","createNextNestedCheckedItems","useNestedCheckedItems","SubtreeContext","useRootTree","useSubtree","useTreeNavigation","useTreeContext_unstable","useTree_unstable","props","ref","isRoot","useContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","checkedItems","navigation","Object","assign","onOpenChange","event","data","nextOpenItems","dangerouslyGetInternalSet_unstable","onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","nextCheckedItems","dangerouslyGetInternalMap_unstable","treeRef","treeType","process","env","NODE_ENV","ctx","Error"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAE5E,SAASC,mBAAmB,EAAEC,wBAAwB,QAAQ,uCAAuC;AACrG,SAASC,4BAA4B,EAAEC,qBAAqB,QAAQ,sCAAsC;AAC1G,SAASC,cAAc,QAAQ,gCAAgC;AAC/D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,uBAAuB,QAAQ,6BAA6B;AAErE,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD,MAAMC,SAASf,MAAMgB,UAAU,CAACT,oBAAoBU;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,kBAAkBL,OAAOC,OAAOK,iBAAiBN,OAAOC;AAC1E,EAAE;AAEF,SAASI,kBAAkBL,KAAgB,EAAEC,GAA2B;IACtE,MAAM,CAACM,WAAWC,aAAa,GAAGjB,yBAAyBS;IAC3D,MAAMS,eAAehB,sBAAsBO;IAC3C,MAAMU,aAAab;IAEnB,OAAOc,OAAOC,MAAM,CAClBjB,YACE;QACE,GAAGK,KAAK;QACRO;QACAE;QACAI,cAAczB,iBAAiB,CAAC0B,OAAOC;gBAErCf;YADA,MAAMgB,gBAAgB1B,oBAAoByB,MAAMR;aAChDP,sBAAAA,MAAMa,YAAY,cAAlBb,0CAAAA,yBAAAA,OAAqBc,OAAO;gBAC1B,GAAGC,IAAI;gBACPR,WAAWS,cAAcC,kCAAkC;YAC7D;YACAT,aAAaQ;QACf;QACAE,cAAc9B,iBAAiB,CAAC0B,OAAOC;gBACrCf;aAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBc,OAAOC;YAC5B,IAAI,CAACD,MAAMK,kBAAkB,IAAI;gBAC/BT,WAAWU,QAAQ,CAACL,MAAM;oBACxBM,eAAeN,KAAKO,iBAAiB;gBACvC;YACF;QACF;QACAC,iBAAiBnC,iBAAiB,CAAC0B,OAAOC;gBAExCf;YADA,MAAMwB,mBAAmBhC,6BAA6BuB,MAAMN;aAC5DT,yBAAAA,MAAMuB,eAAe,cAArBvB,6CAAAA,4BAAAA,OAAwBc,OAAO;gBAC7B,GAAGC,IAAI;gBACPN,cAAce,iBAAiBC,kCAAkC;YACnE;QACF;IACF,GACApC,cAAcY,KAAKS,WAAWgB,OAAO,IAEvC;QAAEC,UAAU;IAAS;AAEzB;AAEA,SAASrB,iBAAiBN,KAAgB,EAAEC,GAA2B;IACrE,IAAI2B,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,qEAAqE;QACrE,sDAAsD;QACtD,MAAMH,WAAW7B,wBAAwBiC,CAAAA,MAAOA,IAAIJ,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACvB,MAAM,IAAIK,MAA2B,CAAC;;mEAItC,CAAC;QACH;IACF;IACA,OAAOpC,WAAWI,OAAOC;AAC3B"}

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","useStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel"],"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\nexport const treeItemClassNames = {\n    root: 'fui-TreeItem'\n};\nconst useBaseStyles = makeResetStyles({\n    position: 'relative',\n    cursor: 'pointer',\n    display: 'flex',\n    flexDirection: 'column',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    paddingRight: tokens.spacingHorizontalNone,\n    // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n    ':focus': {\n        outlineStyle: 'none'\n    },\n    ':focus-visible': {\n        outlineStyle: 'none'\n    },\n    // This adds the focus outline for the TreeItemLayout element\n    ...createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusMedium,\n        outlineColor: tokens.colorStrokeFocus2,\n        outlineRadius: tokens.borderRadiusMedium,\n        // FIXME: tokens.strokeWidthThick causes some weird bugs\n        outlineWidth: '2px',\n        outlineStyle: 'solid'\n    }, {\n        customizeSelector: (selector)=>`${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`\n    })\n});\nconst useStyles = makeStyles({\n    ...Object.fromEntries(Array.from({\n        length: 10\n    }, (_, index)=>[\n            `level${index + 1}`,\n            {\n                [treeItemLevelToken]: index + 1\n            }\n        ]))\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n    const baseStyles = useBaseStyles();\n    const styles = useStyles();\n    const { level } = state;\n    state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);\n    return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n    return level >= 1 && level <= 10;\n}\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,wBAAwB,QAAQ,kDAAkD;AAC3F,SAASC,+BAA+B,QAAQ,gEAAgE;AAChH,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGV,aAAA,4rCA2BrB,CAAC;AACF,MAAMW,SAAS,gBAAGV,QAAA;EAAAW,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,MAAA;IAAAF,MAAA;EAAA;EAAAG,MAAA;IAAAH,MAAA;EAAA;EAAAI,MAAA;IAAAJ,MAAA;EAAA;EAAAK,MAAA;IAAAL,MAAA;EAAA;EAAAM,MAAA;IAAAN,MAAA;EAAA;EAAAO,MAAA;IAAAP,MAAA;EAAA;EAAAQ,MAAA;IAAAR,MAAA;EAAA;EAAAS,OAAA;IAAAT,MAAA;EAAA;AAAA;EAAAU,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAMiB,MAAM,GAAGhB,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEiB;EAAM,CAAC,GAAGH,KAAK;EACvBA,KAAK,CAAChB,IAAI,CAACoB,SAAS,GAAG3B,YAAY,CAACM,kBAAkB,CAACC,IAAI,EAAEiB,UAAU,EAAEI,wBAAwB,CAACF,KAAK,CAAC,IAAID,MAAM,CAAE,QAAOC,KAAM,EAAC,CAAC,EAAEH,KAAK,CAAChB,IAAI,CAACoB,SAAS,CAAC;EAC1J,OAAOJ,KAAK;AAChB,CAAC;AACD,SAASK,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","useStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel"],"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\nexport const treeItemClassNames = {\n    root: 'fui-TreeItem'\n};\nconst useBaseStyles = makeResetStyles({\n    position: 'relative',\n    cursor: 'pointer',\n    display: 'flex',\n    flexDirection: 'column',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    paddingRight: tokens.spacingHorizontalNone,\n    // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n    ':focus': {\n        outlineStyle: 'none'\n    },\n    ':focus-visible': {\n        outlineStyle: 'none'\n    },\n    // This adds the focus outline for the TreeItemLayout element\n    ...createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusMedium,\n        outlineColor: tokens.colorStrokeFocus2,\n        outlineRadius: tokens.borderRadiusMedium,\n        // FIXME: tokens.strokeWidthThick causes some weird bugs\n        outlineWidth: '2px',\n        outlineStyle: 'solid'\n    }, {\n        customizeSelector: (selector)=>`${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`\n    })\n});\nconst useStyles = makeStyles({\n    ...Object.fromEntries(Array.from({\n        length: 10\n    }, (_, index)=>[\n            `level${index + 1}`,\n            {\n                [treeItemLevelToken]: index + 1\n            }\n        ]))\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n    const baseStyles = useBaseStyles();\n    const styles = useStyles();\n    const { level } = state;\n    state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);\n    return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n    return level >= 1 && level <= 10;\n}\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,wBAAwB,QAAQ,kDAAkD;AAC3F,SAASC,+BAA+B,QAAQ,gEAAgE;AAChH,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGV,aAAA,4rCA2BrB,CAAC;AACF,MAAMW,SAAS,gBAAGV,QAAA;EAAAW,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,MAAA;IAAAF,MAAA;EAAA;EAAAG,MAAA;IAAAH,MAAA;EAAA;EAAAI,MAAA;IAAAJ,MAAA;EAAA;EAAAK,MAAA;IAAAL,MAAA;EAAA;EAAAM,MAAA;IAAAN,MAAA;EAAA;EAAAO,MAAA;IAAAP,MAAA;EAAA;EAAAQ,MAAA;IAAAR,MAAA;EAAA;EAAAS,OAAA;IAAAT,MAAA;EAAA;AAAA;EAAAU,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAMiB,MAAM,GAAGhB,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEiB;EAAM,CAAC,GAAGH,KAAK;EACvBA,KAAK,CAAChB,IAAI,CAACoB,SAAS,GAAG3B,YAAY,CAACM,kBAAkB,CAACC,IAAI,EAAEiB,UAAU,EAAEI,wBAAwB,CAACF,KAAK,CAAC,IAAID,MAAM,CAAC,QAAQC,KAAK,EAAE,CAAC,EAAEH,KAAK,CAAChB,IAAI,CAACoB,SAAS,CAAC;EAC1J,OAAOJ,KAAK;AAChB,CAAC;AACD,SAASK,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC","ignoreList":[]}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js

@@ -1,4 +1,4 @@
-import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { treeItemLevelToken } from '../../utils/tokens';
 import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
@@ -33,13 +33,18 @@ const useMediaBaseStyles = /*#__PURE__*/__resetStyles("rkcde6g", "r1e986zr", [".
 const useMainBaseStyles = /*#__PURE__*/__resetStyles("r1qjtz99", "rob5fcp", [".r1qjtz99{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}", ".rob5fcp{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}"]);
 const useMainStyles = /*#__PURE__*/__styles({
   withDescription: {
-    z8tnut: "f1ngh7ph",
-    z189sj: ["f7x41pl", "fruq291"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: ["f1625emv", "f5y9hxg"]
   }
 }, {
-  d: [".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f1qch9an{padding-bottom:0;}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}"]
+  d: [[".f1625emv{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) 0 var(--spacingHorizontalS);}", {
+    p: -1
+  }], [".f5y9hxg{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) 0 var(--spacingHorizontalXS);}", {
+    p: -1
+  }]]
 });
 const useDescriptionBaseStyles = /*#__PURE__*/__resetStyles("r1bnsn1b", "r13x7gq", [".r1bnsn1b{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}", ".r13x7gq{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}"]);
 /**

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","useRootStyles","leaf","uwmqm3","branch","d","useMediaBaseStyles","useMainBaseStyles","useMainStyles","withDescription","z8tnut","z189sj","Byoj8tv","useDescriptionBaseStyles","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","useTreeItemPersonaLayoutStyles_unstable","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","itemType","ctx","className"],"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemPersonaLayoutClassNames = {\n    root: 'fui-TreeItemPersonaLayout',\n    media: 'fui-TreeItemPersonaLayout__media',\n    description: 'fui-TreeItemPersonaLayout__description',\n    main: 'fui-TreeItemPersonaLayout__main',\n    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n    aside: 'fui-TreeItemPersonaLayout__aside',\n    actions: 'fui-TreeItemPersonaLayout__actions',\n    selector: 'fui-TreeItemPersonaLayout__selector'\n};\nconst useRootBaseStyles = makeResetStyles({\n    display: 'grid',\n    gridTemplateRows: '1fr auto',\n    gridTemplateColumns: 'auto auto 1fr auto',\n    gridTemplateAreas: `\n    \"expandIcon media main        aside\"\n    \"expandIcon media description aside\"\n  `,\n    alignItems: 'center',\n    ...typographyStyles.body1,\n    ':active': {\n        color: tokens.colorNeutralForeground2Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    ':hover': {\n        color: tokens.colorNeutralForeground2Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon  for styling\n        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    }\n});\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    leaf: {\n        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    branch: {\n        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n    }\n});\n/**\n * Styles for the expand icon slot\n */ const useMediaBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    width: '32px',\n    height: '32px',\n    gridArea: 'media',\n    padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalXXS}`\n});\nconst useMainBaseStyles = makeResetStyles({\n    gridArea: 'main',\n    padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`\n});\nconst useMainStyles = makeStyles({\n    withDescription: {\n        ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalS)\n    }\n});\nconst useDescriptionBaseStyles = makeResetStyles({\n    gridArea: 'description',\n    ...typographyStyles.caption1,\n    padding: `0 ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`\n});\n/**\n * Styles for the action icon slot\n */ const useActionsBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    position: 'relative',\n    zIndex: 1,\n    gridArea: 'aside',\n    padding: `0 ${tokens.spacingHorizontalS}`\n});\n/**\n * Styles for the action icon slot\n */ const useAsideBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    alignItems: 'center',\n    zIndex: 0,\n    gridArea: 'aside',\n    padding: `0 ${tokens.spacingHorizontalM}`,\n    gap: tokens.spacingHorizontalXS\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: '24px',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3,\n    gridArea: 'expandIcon',\n    flex: `0 0 auto`,\n    padding: `${tokens.spacingVerticalXS} 0`\n});\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */ export const useTreeItemPersonaLayoutStyles_unstable = (state)=>{\n    const rootBaseStyles = useRootBaseStyles();\n    const rootStyles = useRootStyles();\n    const mediaBaseStyles = useMediaBaseStyles();\n    const descriptionBaseStyles = useDescriptionBaseStyles();\n    const actionsBaseStyles = useActionsBaseStyles();\n    const asideBaseStyles = useAsideBaseStyles();\n    const expandIconBaseStyles = useExpandIconBaseStyles();\n    const mainBaseStyles = useMainBaseStyles();\n    const mainStyles = useMainStyles();\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], state.root.className);\n    state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n    if (state.main) {\n        state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);\n    }\n    if (state.description) {\n        state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);\n    }\n    if (state.actions) {\n        state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);\n    }\n    if (state.selector) {\n        state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","useRootStyles","leaf","uwmqm3","branch","d","useMediaBaseStyles","useMainBaseStyles","useMainStyles","withDescription","Byoj8tv","z189sj","z8tnut","B0ocmuz","p","useDescriptionBaseStyles","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","useTreeItemPersonaLayoutStyles_unstable","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","itemType","ctx","className"],"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemPersonaLayoutClassNames = {\n    root: 'fui-TreeItemPersonaLayout',\n    media: 'fui-TreeItemPersonaLayout__media',\n    description: 'fui-TreeItemPersonaLayout__description',\n    main: 'fui-TreeItemPersonaLayout__main',\n    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n    aside: 'fui-TreeItemPersonaLayout__aside',\n    actions: 'fui-TreeItemPersonaLayout__actions',\n    selector: 'fui-TreeItemPersonaLayout__selector'\n};\nconst useRootBaseStyles = makeResetStyles({\n    display: 'grid',\n    gridTemplateRows: '1fr auto',\n    gridTemplateColumns: 'auto auto 1fr auto',\n    gridTemplateAreas: `\n    \"expandIcon media main        aside\"\n    \"expandIcon media description aside\"\n  `,\n    alignItems: 'center',\n    ...typographyStyles.body1,\n    ':active': {\n        color: tokens.colorNeutralForeground2Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    ':hover': {\n        color: tokens.colorNeutralForeground2Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon  for styling\n        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    }\n});\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    leaf: {\n        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    branch: {\n        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n    }\n});\n/**\n * Styles for the expand icon slot\n */ const useMediaBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    width: '32px',\n    height: '32px',\n    gridArea: 'media',\n    padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalXXS}`\n});\nconst useMainBaseStyles = makeResetStyles({\n    gridArea: 'main',\n    padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`\n});\nconst useMainStyles = makeStyles({\n    withDescription: {\n        padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalS}`\n    }\n});\nconst useDescriptionBaseStyles = makeResetStyles({\n    gridArea: 'description',\n    ...typographyStyles.caption1,\n    padding: `0 ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`\n});\n/**\n * Styles for the action icon slot\n */ const useActionsBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    position: 'relative',\n    zIndex: 1,\n    gridArea: 'aside',\n    padding: `0 ${tokens.spacingHorizontalS}`\n});\n/**\n * Styles for the action icon slot\n */ const useAsideBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    alignItems: 'center',\n    zIndex: 0,\n    gridArea: 'aside',\n    padding: `0 ${tokens.spacingHorizontalM}`,\n    gap: tokens.spacingHorizontalXS\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: '24px',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3,\n    gridArea: 'expandIcon',\n    flex: `0 0 auto`,\n    padding: `${tokens.spacingVerticalXS} 0`\n});\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */ export const useTreeItemPersonaLayoutStyles_unstable = (state)=>{\n    const rootBaseStyles = useRootBaseStyles();\n    const rootStyles = useRootStyles();\n    const mediaBaseStyles = useMediaBaseStyles();\n    const descriptionBaseStyles = useDescriptionBaseStyles();\n    const actionsBaseStyles = useActionsBaseStyles();\n    const asideBaseStyles = useAsideBaseStyles();\n    const expandIconBaseStyles = useExpandIconBaseStyles();\n    const mainBaseStyles = useMainBaseStyles();\n    const mainStyles = useMainStyles();\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], state.root.className);\n    state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n    if (state.main) {\n        state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);\n    }\n    if (state.description) {\n        state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);\n    }\n    if (state.actions) {\n        state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);\n    }\n    if (state.selector) {\n        state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/hooks/useControllableOpenItems.js

@@ -9,7 +9,7 @@ import { createOpenItems } from '../utils/createOpenItems';
         state: React.useMemo(()=>props.openItems && createOpenItems(props.openItems), [
             props.openItems
         ]),
-        defaultState: ()=>createOpenItems(props.defaultOpenItems),
+        defaultState: props.defaultOpenItems && (()=>createOpenItems(props.defaultOpenItems)),
         initialState: ImmutableSet.empty
     });
 }

package/lib/hooks/useControllableOpenItems.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useControllableOpenItems.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport type { TreeItemValue } from '../components/TreeItem/TreeItem.types';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { TreeOpenChangeData, TreeProps } from '../Tree';\n\n/**\n * @internal\n */\nexport function useControllableOpenItems(props: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>) {\n  return useControllableState({\n    state: React.useMemo(() => props.openItems && createOpenItems(props.openItems), [props.openItems]),\n    defaultState: () => createOpenItems(props.defaultOpenItems),\n    initialState: ImmutableSet.empty,\n  });\n}\n\n/**\n * @internal\n */\nexport function createNextOpenItems(\n  data: Pick<TreeOpenChangeData, 'value' | 'open'>,\n  previousOpenItems: ImmutableSet<TreeItemValue>,\n): ImmutableSet<TreeItemValue> {\n  if (data.value === null) {\n    return previousOpenItems;\n  }\n  const previousOpenItemsHasId = previousOpenItems.has(data.value);\n  if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n    return previousOpenItems;\n  }\n  const nextOpenItems = ImmutableSet.create(previousOpenItems);\n  return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"names":["useControllableState","React","ImmutableSet","createOpenItems","useControllableOpenItems","props","state","useMemo","openItems","defaultState","defaultOpenItems","initialState","empty","createNextOpenItems","data","previousOpenItems","value","previousOpenItemsHasId","has","open","nextOpenItems","create","add","delete"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,4BAA4B;AACjE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,wBAAwB;AAErD,SAASC,eAAe,QAAQ,2BAA2B;AAG3D;;CAEC,GACD,OAAO,SAASC,yBAAyBC,KAAwD;IAC/F,OAAOL,qBAAqB;QAC1BM,OAAOL,MAAMM,OAAO,CAAC,IAAMF,MAAMG,SAAS,IAAIL,gBAAgBE,MAAMG,SAAS,GAAG;YAACH,MAAMG,SAAS;SAAC;QACjGC,cAAc,IAAMN,gBAAgBE,MAAMK,gBAAgB;QAC1DC,cAAcT,aAAaU,KAAK;IAClC;AACF;AAEA;;CAEC,GACD,OAAO,SAASC,oBACdC,IAAgD,EAChDC,iBAA8C;IAE9C,IAAID,KAAKE,KAAK,KAAK,MAAM;QACvB,OAAOD;IACT;IACA,MAAME,yBAAyBF,kBAAkBG,GAAG,CAACJ,KAAKE,KAAK;IAC/D,IAAIF,KAAKK,IAAI,GAAGF,yBAAyB,CAACA,wBAAwB;QAChE,OAAOF;IACT;IACA,MAAMK,gBAAgBlB,aAAamB,MAAM,CAACN;IAC1C,OAAOD,KAAKK,IAAI,GAAGC,cAAcE,GAAG,CAACR,KAAKE,KAAK,IAAII,cAAcG,MAAM,CAACT,KAAKE,KAAK;AACpF"}
+{"version":3,"sources":["useControllableOpenItems.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport type { TreeItemValue } from '../components/TreeItem/TreeItem.types';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { TreeOpenChangeData, TreeProps } from '../Tree';\n\n/**\n * @internal\n */\nexport function useControllableOpenItems(props: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>) {\n  return useControllableState({\n    state: React.useMemo(() => props.openItems && createOpenItems(props.openItems), [props.openItems]),\n    defaultState: props.defaultOpenItems && (() => createOpenItems(props.defaultOpenItems)),\n    initialState: ImmutableSet.empty,\n  });\n}\n\n/**\n * @internal\n */\nexport function createNextOpenItems(\n  data: Pick<TreeOpenChangeData, 'value' | 'open'>,\n  previousOpenItems: ImmutableSet<TreeItemValue>,\n): ImmutableSet<TreeItemValue> {\n  if (data.value === null) {\n    return previousOpenItems;\n  }\n  const previousOpenItemsHasId = previousOpenItems.has(data.value);\n  if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n    return previousOpenItems;\n  }\n  const nextOpenItems = ImmutableSet.create(previousOpenItems);\n  return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"names":["useControllableState","React","ImmutableSet","createOpenItems","useControllableOpenItems","props","state","useMemo","openItems","defaultState","defaultOpenItems","initialState","empty","createNextOpenItems","data","previousOpenItems","value","previousOpenItemsHasId","has","open","nextOpenItems","create","add","delete"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,4BAA4B;AACjE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,wBAAwB;AAErD,SAASC,eAAe,QAAQ,2BAA2B;AAG3D;;CAEC,GACD,OAAO,SAASC,yBAAyBC,KAAwD;IAC/F,OAAOL,qBAAqB;QAC1BM,OAAOL,MAAMM,OAAO,CAAC,IAAMF,MAAMG,SAAS,IAAIL,gBAAgBE,MAAMG,SAAS,GAAG;YAACH,MAAMG,SAAS;SAAC;QACjGC,cAAcJ,MAAMK,gBAAgB,IAAK,CAAA,IAAMP,gBAAgBE,MAAMK,gBAAgB,CAAA;QACrFC,cAAcT,aAAaU,KAAK;IAClC;AACF;AAEA;;CAEC,GACD,OAAO,SAASC,oBACdC,IAAgD,EAChDC,iBAA8C;IAE9C,IAAID,KAAKE,KAAK,KAAK,MAAM;QACvB,OAAOD;IACT;IACA,MAAME,yBAAyBF,kBAAkBG,GAAG,CAACJ,KAAKE,KAAK;IAC/D,IAAIF,KAAKK,IAAI,GAAGF,yBAAyB,CAACA,wBAAwB;QAChE,OAAOF;IACT;IACA,MAAMK,gBAAgBlB,aAAamB,MAAM,CAACN;IAC1C,OAAOD,KAAKK,IAAI,GAAGC,cAAcE,GAAG,CAACR,KAAKE,KAAK,IAAII,cAAcG,MAAM,CAACT,KAAKE,KAAK;AACpF"}

package/lib/hooks/useRootTree.js

@@ -38,7 +38,14 @@ import { createNextOpenItems } from './useControllableOpenItems';
     };
     const requestNavigation = (request)=>{
         var _props_onNavigation;
-        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, request.event, request);
+        let isScrollPrevented = false;
+        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, request.event, {
+            ...request,
+            preventScroll: ()=>{
+                isScrollPrevented = true;
+            },
+            isScrollPrevented: ()=>isScrollPrevented
+        });
         switch(request.type){
             case treeDataTypes.ArrowDown:
             case treeDataTypes.ArrowUp:

package/lib/hooks/useRootTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TreeCheckedChangeData, TreeProps, TreeState } from '../Tree';\nimport * as React from 'react';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\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(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & TreeContextValue, 'treeType'> {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n\n  const requestOpenChange = (request: Extract<TreeItemRequest, { requestType: 'open' }>) => {\n    props.onOpenChange?.(request.event, {\n      ...request,\n      openItems: createNextOpenItems(request, openItems).dangerouslyGetInternalSet_unstable(),\n    });\n  };\n\n  const requestCheckedChange = (request: Extract<TreeItemRequest, { requestType: 'selection' }>) => {\n    if (selectionMode === 'none') {\n      return;\n    }\n    props.onCheckedChange?.(request.event, {\n      ...request,\n      selectionMode,\n      checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n      // Casting is required here due to selection | multiselection spreading the union problem\n    } as TreeCheckedChangeData);\n  };\n\n  const requestNavigation = (request: Extract<TreeItemRequest, { requestType: 'navigate' }>) => {\n    props.onNavigation?.(request.event, request);\n    switch (request.type) {\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.Home:\n      case treeDataTypes.End:\n        // stop the default behavior of the event\n        // which is to scroll the page\n        request.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.requestType) {\n      case 'navigate':\n        return requestNavigation(request);\n      case 'open':\n        return requestOpenChange(request);\n      case 'selection':\n        return requestCheckedChange(request);\n    }\n  });\n\n  return {\n    components: { root: 'div' },\n    contextType: 'root',\n    selectionMode,\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: 'tree',\n        'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\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(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useRootTree]:\n        Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n      `);\n    }\n  }\n}\n"],"names":["getIntrinsicElementProps","useEventCallback","slot","React","createOpenItems","createCheckedItems","treeDataTypes","createNextOpenItems","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","request","onOpenChange","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","onCheckedChange","dangerouslyGetInternalMap_unstable","requestNavigation","onNavigation","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","requestType","components","root","contextType","open","level","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"AAAA,SAASA,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAE7F,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,6BAA6B;AAEjE;;;;;CAKC,GACD,OAAO,SAASC,YACdC,KAAgB,EAChBC,GAA2B;IAE3BC,4BAA4BF;IAE5B,MAAM,EAAEG,aAAa,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,MAAM,EAAE,GAAGL;IAE3E,MAAMM,YAAYZ,MAAMa,OAAO,CAAC,IAAMZ,gBAAgBK,MAAMM,SAAS,GAAG;QAACN,MAAMM,SAAS;KAAC;IACzF,MAAME,eAAed,MAAMa,OAAO,CAAC,IAAMX,mBAAmBI,MAAMQ,YAAY,GAAG;QAACR,MAAMQ,YAAY;KAAC;IAErG,MAAMC,oBAAoB,CAACC;YACzBV;SAAAA,sBAAAA,MAAMW,YAAY,cAAlBX,0CAAAA,yBAAAA,OAAqBU,QAAQE,KAAK,EAAE;YAClC,GAAGF,OAAO;YACVJ,WAAWR,oBAAoBY,SAASJ,WAAWO,kCAAkC;QACvF;IACF;IAEA,MAAMC,uBAAuB,CAACJ;YAI5BV;QAHA,IAAIK,kBAAkB,QAAQ;YAC5B;QACF;SACAL,yBAAAA,MAAMe,eAAe,cAArBf,6CAAAA,4BAAAA,OAAwBU,QAAQE,KAAK,EAAE;YACrC,GAAGF,OAAO;YACVL;YACAG,cAAcA,aAAaQ,kCAAkC;QAE/D;IACF;IAEA,MAAMC,oBAAoB,CAACP;YACzBV;SAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBU,QAAQE,KAAK,EAAEF;QACpC,OAAQA,QAAQS,IAAI;YAClB,KAAKtB,cAAcuB,SAAS;YAC5B,KAAKvB,cAAcwB,OAAO;YAC1B,KAAKxB,cAAcyB,IAAI;YACvB,KAAKzB,cAAc0B,GAAG;gBACpB,yCAAyC;gBACzC,8BAA8B;gBAC9Bb,QAAQE,KAAK,CAACY,cAAc;QAChC;IACF;IAEA,MAAMC,sBAAsBjC,iBAAiB,CAACkB;QAC5C,OAAQA,QAAQgB,WAAW;YACzB,KAAK;gBACH,OAAOT,kBAAkBP;YAC3B,KAAK;gBACH,OAAOD,kBAAkBC;YAC3B,KAAK;gBACH,OAAOI,qBAAqBJ;QAChC;IACF;IAEA,OAAO;QACLiB,YAAY;YAAEC,MAAM;QAAM;QAC1BC,aAAa;QACbxB;QACAyB,MAAM;QACN3B;QACAC;QACA2B,OAAO;QACPzB;QACAE;QACAiB;QACAG,MAAMnC,KAAKuC,MAAM,CACfzC,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FU,KAAKA;YACLgC,MAAM;YACN,wBAAwB5B,kBAAkB,gBAAgB,OAAO6B;YACjE,GAAGlC,KAAK;QACV,IACA;YAAEmC,aAAa;QAAM;IAEzB;AACF;AAEA,SAASjC,4BAA4BF,KAAwD;IAC3F,IAAIoC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAI,CAACtC,KAAK,CAAC,aAAa,IAAI,CAACA,KAAK,CAAC,kBAAkB,EAAE;YACrD,sCAAsC;YACtCuC,QAAQC,IAAI,CAAsB,CAAC;8EAGnC,CAAC;QACH;IACF;AACF"}
+{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TreeCheckedChangeData, TreeProps, TreeState } from '../Tree';\nimport * as React from 'react';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\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(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & TreeContextValue, 'treeType'> {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n\n  const requestOpenChange = (request: Extract<TreeItemRequest, { requestType: 'open' }>) => {\n    props.onOpenChange?.(request.event, {\n      ...request,\n      openItems: createNextOpenItems(request, openItems).dangerouslyGetInternalSet_unstable(),\n    });\n  };\n\n  const requestCheckedChange = (request: Extract<TreeItemRequest, { requestType: 'selection' }>) => {\n    if (selectionMode === 'none') {\n      return;\n    }\n    props.onCheckedChange?.(request.event, {\n      ...request,\n      selectionMode,\n      checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n      // Casting is required here due to selection | multiselection spreading the union problem\n    } as TreeCheckedChangeData);\n  };\n\n  const requestNavigation = (request: Extract<TreeItemRequest, { requestType: 'navigate' }>) => {\n    let isScrollPrevented = false;\n    props.onNavigation?.(request.event, {\n      ...request,\n      preventScroll: () => {\n        isScrollPrevented = true;\n      },\n      isScrollPrevented: () => isScrollPrevented,\n    });\n    switch (request.type) {\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.Home:\n      case treeDataTypes.End:\n        // stop the default behavior of the event\n        // which is to scroll the page\n        request.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.requestType) {\n      case 'navigate':\n        return requestNavigation(request);\n      case 'open':\n        return requestOpenChange(request);\n      case 'selection':\n        return requestCheckedChange(request);\n    }\n  });\n\n  return {\n    components: { root: 'div' },\n    contextType: 'root',\n    selectionMode,\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: 'tree',\n        'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\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(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useRootTree]:\n        Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n      `);\n    }\n  }\n}\n"],"names":["getIntrinsicElementProps","useEventCallback","slot","React","createOpenItems","createCheckedItems","treeDataTypes","createNextOpenItems","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","request","onOpenChange","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","onCheckedChange","dangerouslyGetInternalMap_unstable","requestNavigation","isScrollPrevented","onNavigation","preventScroll","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","requestType","components","root","contextType","open","level","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"AAAA,SAASA,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAE7F,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,6BAA6B;AAEjE;;;;;CAKC,GACD,OAAO,SAASC,YACdC,KAAgB,EAChBC,GAA2B;IAE3BC,4BAA4BF;IAE5B,MAAM,EAAEG,aAAa,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,MAAM,EAAE,GAAGL;IAE3E,MAAMM,YAAYZ,MAAMa,OAAO,CAAC,IAAMZ,gBAAgBK,MAAMM,SAAS,GAAG;QAACN,MAAMM,SAAS;KAAC;IACzF,MAAME,eAAed,MAAMa,OAAO,CAAC,IAAMX,mBAAmBI,MAAMQ,YAAY,GAAG;QAACR,MAAMQ,YAAY;KAAC;IAErG,MAAMC,oBAAoB,CAACC;YACzBV;SAAAA,sBAAAA,MAAMW,YAAY,cAAlBX,0CAAAA,yBAAAA,OAAqBU,QAAQE,KAAK,EAAE;YAClC,GAAGF,OAAO;YACVJ,WAAWR,oBAAoBY,SAASJ,WAAWO,kCAAkC;QACvF;IACF;IAEA,MAAMC,uBAAuB,CAACJ;YAI5BV;QAHA,IAAIK,kBAAkB,QAAQ;YAC5B;QACF;SACAL,yBAAAA,MAAMe,eAAe,cAArBf,6CAAAA,4BAAAA,OAAwBU,QAAQE,KAAK,EAAE;YACrC,GAAGF,OAAO;YACVL;YACAG,cAAcA,aAAaQ,kCAAkC;QAE/D;IACF;IAEA,MAAMC,oBAAoB,CAACP;YAEzBV;QADA,IAAIkB,oBAAoB;SACxBlB,sBAAAA,MAAMmB,YAAY,cAAlBnB,0CAAAA,yBAAAA,OAAqBU,QAAQE,KAAK,EAAE;YAClC,GAAGF,OAAO;YACVU,eAAe;gBACbF,oBAAoB;YACtB;YACAA,mBAAmB,IAAMA;QAC3B;QACA,OAAQR,QAAQW,IAAI;YAClB,KAAKxB,cAAcyB,SAAS;YAC5B,KAAKzB,cAAc0B,OAAO;YAC1B,KAAK1B,cAAc2B,IAAI;YACvB,KAAK3B,cAAc4B,GAAG;gBACpB,yCAAyC;gBACzC,8BAA8B;gBAC9Bf,QAAQE,KAAK,CAACc,cAAc;QAChC;IACF;IAEA,MAAMC,sBAAsBnC,iBAAiB,CAACkB;QAC5C,OAAQA,QAAQkB,WAAW;YACzB,KAAK;gBACH,OAAOX,kBAAkBP;YAC3B,KAAK;gBACH,OAAOD,kBAAkBC;YAC3B,KAAK;gBACH,OAAOI,qBAAqBJ;QAChC;IACF;IAEA,OAAO;QACLmB,YAAY;YAAEC,MAAM;QAAM;QAC1BC,aAAa;QACb1B;QACA2B,MAAM;QACN7B;QACAC;QACA6B,OAAO;QACP3B;QACAE;QACAmB;QACAG,MAAMrC,KAAKyC,MAAM,CACf3C,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FU,KAAKA;YACLkC,MAAM;YACN,wBAAwB9B,kBAAkB,gBAAgB,OAAO+B;YACjE,GAAGpC,KAAK;QACV,IACA;YAAEqC,aAAa;QAAM;IAEzB;AACF;AAEA,SAASnC,4BAA4BF,KAAwD;IAC3F,IAAIsC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAI,CAACxC,KAAK,CAAC,aAAa,IAAI,CAACA,KAAK,CAAC,kBAAkB,EAAE;YACrD,sCAAsC;YACtCyC,QAAQC,IAAI,CAAsB,CAAC;8EAGnC,CAAC;QACH;IACF;AACF"}

package/lib/hooks/useRovingTabIndexes.js

@@ -2,10 +2,16 @@ import * as React from 'react';
 import { useFocusedElementChange } from '@fluentui/react-tabster';
 import { elementContains } from '@fluentui/react-utilities';
 /**
+ * @internal
  * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
  */ export function useRovingTabIndex() {
-    const currentElementRef = React.useRef();
+    const currentElementRef = React.useRef(null);
     const walkerRef = React.useRef(null);
+    React.useEffect(()=>{
+        if (currentElementRef.current === null && walkerRef.current) {
+            initialize(walkerRef.current);
+        }
+    });
     useFocusedElementChange((element)=>{
         if ((element === null || element === void 0 ? void 0 : element.getAttribute('role')) === 'treeitem' && walkerRef.current && elementContains(walkerRef.current.root, element)) {
             rove(element);
@@ -27,13 +33,13 @@ import { elementContains } from '@fluentui/react-utilities';
             nextElement.tabIndex = -1;
         }
     }, []);
-    const rove = React.useCallback((nextElement)=>{
+    const rove = React.useCallback((nextElement, focusOptions)=>{
         if (!currentElementRef.current) {
             return;
         }
         currentElementRef.current.tabIndex = -1;
         nextElement.tabIndex = 0;
-        nextElement.focus();
+        nextElement.focus(focusOptions);
         currentElementRef.current = nextElement;
     }, []);
     return {

package/lib/hooks/useRovingTabIndexes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRovingTabIndexes.ts"],"sourcesContent":["import * as React from 'react';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\nimport { elementContains } from '@fluentui/react-utilities';\n\n/**\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */\nexport function useRovingTabIndex() {\n  const currentElementRef = React.useRef<HTMLElement>();\n  const walkerRef = React.useRef<HTMLElementWalker | null>(null);\n  useFocusedElementChange(element => {\n    if (\n      element?.getAttribute('role') === 'treeitem' &&\n      walkerRef.current &&\n      elementContains(walkerRef.current.root, element)\n    ) {\n      rove(element);\n    }\n  });\n\n  const initialize = React.useCallback((walker: HTMLElementWalker) => {\n    walkerRef.current = walker;\n    walker.currentElement = walker.root;\n    let tabbableChild = walker.firstChild(element =>\n      element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,\n    );\n    walker.currentElement = walker.root;\n    tabbableChild ??= walker.firstChild();\n    if (!tabbableChild) {\n      return;\n    }\n    tabbableChild.tabIndex = 0;\n    currentElementRef.current = tabbableChild;\n    let nextElement: HTMLElement | null = null;\n    while ((nextElement = walker.nextElement()) && nextElement !== tabbableChild) {\n      nextElement.tabIndex = -1;\n    }\n  }, []);\n  const rove = React.useCallback((nextElement: HTMLElement) => {\n    if (!currentElementRef.current) {\n      return;\n    }\n    currentElementRef.current.tabIndex = -1;\n    nextElement.tabIndex = 0;\n    nextElement.focus();\n    currentElementRef.current = nextElement;\n  }, []);\n\n  return {\n    rove,\n    initialize,\n  };\n}\n"],"names":["React","useFocusedElementChange","elementContains","useRovingTabIndex","currentElementRef","useRef","walkerRef","element","getAttribute","current","root","rove","initialize","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focus"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,eAAe,QAAQ,4BAA4B;AAE5D;;CAEC,GACD,OAAO,SAASC;IACd,MAAMC,oBAAoBJ,MAAMK,MAAM;IACtC,MAAMC,YAAYN,MAAMK,MAAM,CAA2B;IACzDJ,wBAAwBM,CAAAA;QACtB,IACEA,CAAAA,oBAAAA,8BAAAA,QAASC,YAAY,CAAC,aAAY,cAClCF,UAAUG,OAAO,IACjBP,gBAAgBI,UAAUG,OAAO,CAACC,IAAI,EAAEH,UACxC;YACAI,KAAKJ;QACP;IACF;IAEA,MAAMK,aAAaZ,MAAMa,WAAW,CAAC,CAACC;QACpCR,UAAUG,OAAO,GAAGK;QACpBA,OAAOC,cAAc,GAAGD,OAAOJ,IAAI;QACnC,IAAIM,gBAAgBF,OAAOG,UAAU,CAACV,CAAAA,UACpCA,QAAQW,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAE5EP,OAAOC,cAAc,GAAGD,OAAOJ,IAAI;QACnCM,0BAAAA,2BAAAA,gBAAAA,gBAAkBF,OAAOG,UAAU;QACnC,IAAI,CAACD,eAAe;YAClB;QACF;QACAA,cAAcE,QAAQ,GAAG;QACzBd,kBAAkBK,OAAO,GAAGO;QAC5B,IAAIM,cAAkC;QACtC,MAAO,AAACA,CAAAA,cAAcR,OAAOQ,WAAW,EAAC,KAAMA,gBAAgBN,cAAe;YAC5EM,YAAYJ,QAAQ,GAAG,CAAC;QAC1B;IACF,GAAG,EAAE;IACL,MAAMP,OAAOX,MAAMa,WAAW,CAAC,CAACS;QAC9B,IAAI,CAAClB,kBAAkBK,OAAO,EAAE;YAC9B;QACF;QACAL,kBAAkBK,OAAO,CAACS,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYC,KAAK;QACjBnB,kBAAkBK,OAAO,GAAGa;IAC9B,GAAG,EAAE;IAEL,OAAO;QACLX;QACAC;IACF;AACF"}
+{"version":3,"sources":["useRovingTabIndexes.ts"],"sourcesContent":["import * as React from 'react';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\nimport { elementContains } from '@fluentui/react-utilities';\n\n/**\n * @internal\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */\nexport function useRovingTabIndex() {\n  const currentElementRef = React.useRef<HTMLElement | null>(null);\n  const walkerRef = React.useRef<HTMLElementWalker | null>(null);\n\n  React.useEffect(() => {\n    if (currentElementRef.current === null && walkerRef.current) {\n      initialize(walkerRef.current);\n    }\n  });\n\n  useFocusedElementChange(element => {\n    if (\n      element?.getAttribute('role') === 'treeitem' &&\n      walkerRef.current &&\n      elementContains(walkerRef.current.root, element)\n    ) {\n      rove(element);\n    }\n  });\n\n  const initialize = React.useCallback((walker: HTMLElementWalker) => {\n    walkerRef.current = walker;\n    walker.currentElement = walker.root;\n    let tabbableChild = walker.firstChild(element =>\n      element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,\n    );\n    walker.currentElement = walker.root;\n    tabbableChild ??= walker.firstChild();\n    if (!tabbableChild) {\n      return;\n    }\n    tabbableChild.tabIndex = 0;\n    currentElementRef.current = tabbableChild;\n    let nextElement: HTMLElement | null = null;\n    while ((nextElement = walker.nextElement()) && nextElement !== tabbableChild) {\n      nextElement.tabIndex = -1;\n    }\n  }, []);\n  const rove = React.useCallback((nextElement: HTMLElement, focusOptions?: FocusOptions) => {\n    if (!currentElementRef.current) {\n      return;\n    }\n    currentElementRef.current.tabIndex = -1;\n    nextElement.tabIndex = 0;\n    nextElement.focus(focusOptions);\n    currentElementRef.current = nextElement;\n  }, []);\n\n  return {\n    rove,\n    initialize,\n  };\n}\n"],"names":["React","useFocusedElementChange","elementContains","useRovingTabIndex","currentElementRef","useRef","walkerRef","useEffect","current","initialize","element","getAttribute","root","rove","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focusOptions","focus"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,eAAe,QAAQ,4BAA4B;AAE5D;;;CAGC,GACD,OAAO,SAASC;IACd,MAAMC,oBAAoBJ,MAAMK,MAAM,CAAqB;IAC3D,MAAMC,YAAYN,MAAMK,MAAM,CAA2B;IAEzDL,MAAMO,SAAS,CAAC;QACd,IAAIH,kBAAkBI,OAAO,KAAK,QAAQF,UAAUE,OAAO,EAAE;YAC3DC,WAAWH,UAAUE,OAAO;QAC9B;IACF;IAEAP,wBAAwBS,CAAAA;QACtB,IACEA,CAAAA,oBAAAA,8BAAAA,QAASC,YAAY,CAAC,aAAY,cAClCL,UAAUE,OAAO,IACjBN,gBAAgBI,UAAUE,OAAO,CAACI,IAAI,EAAEF,UACxC;YACAG,KAAKH;QACP;IACF;IAEA,MAAMD,aAAaT,MAAMc,WAAW,CAAC,CAACC;QACpCT,UAAUE,OAAO,GAAGO;QACpBA,OAAOC,cAAc,GAAGD,OAAOH,IAAI;QACnC,IAAIK,gBAAgBF,OAAOG,UAAU,CAACR,CAAAA,UACpCA,QAAQS,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAE5EP,OAAOC,cAAc,GAAGD,OAAOH,IAAI;QACnCK,0BAAAA,2BAAAA,gBAAAA,gBAAkBF,OAAOG,UAAU;QACnC,IAAI,CAACD,eAAe;YAClB;QACF;QACAA,cAAcE,QAAQ,GAAG;QACzBf,kBAAkBI,OAAO,GAAGS;QAC5B,IAAIM,cAAkC;QACtC,MAAO,AAACA,CAAAA,cAAcR,OAAOQ,WAAW,EAAC,KAAMA,gBAAgBN,cAAe;YAC5EM,YAAYJ,QAAQ,GAAG,CAAC;QAC1B;IACF,GAAG,EAAE;IACL,MAAMN,OAAOb,MAAMc,WAAW,CAAC,CAACS,aAA0BC;QACxD,IAAI,CAACpB,kBAAkBI,OAAO,EAAE;YAC9B;QACF;QACAJ,kBAAkBI,OAAO,CAACW,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYE,KAAK,CAACD;QAClBpB,kBAAkBI,OAAO,GAAGe;IAC9B,GAAG,EAAE;IAEL,OAAO;QACLV;QACAJ;IACF;AACF"}

package/lib/hooks/useTreeNavigation.js

@@ -4,7 +4,9 @@ import { useRovingTabIndex } from './useRovingTabIndexes';
 import * as React from 'react';
 import { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';
 import { useMergedRefs } from '@fluentui/react-utilities';
-export function useTreeNavigation() {
+/**
+ * @internal
+ */ export function useTreeNavigation() {
     const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();
     const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();
     const rootRefCallback = React.useCallback((root)=>{
@@ -45,15 +47,15 @@ export function useTreeNavigation() {
                 return walkerRef.current.previousElement();
         }
     };
-    function navigate(data) {
+    function navigate(data, focusOptions) {
         const nextElement = getNextElement(data);
         if (nextElement) {
-            rove(nextElement);
+            rove(nextElement, focusOptions);
         }
     }
     return {
         navigate,
-        rootRef: useMergedRefs(walkerRootRef, rootRefCallback)
+        treeRef: useMergedRefs(walkerRootRef, rootRefCallback)
     };
 }
 function lastChildRecursive(walker) {

package/lib/hooks/useTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\nexport function useTreeNavigation() {\n  const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (root && walkerRef.current) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [walkerRef, initializeRovingTabIndex],\n  );\n\n  const getNextElement = (data: TreeNavigationData_unstable) => {\n    if (!walkerRef.current) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walkerRef.current.currentElement = data.target;\n        return nextTypeAheadElement(walkerRef.current, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.parentElement();\n      case treeDataTypes.ArrowRight:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return lastChildRecursive(walkerRef.current);\n      case treeDataTypes.Home:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.ArrowDown:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.nextElement();\n      case treeDataTypes.ArrowUp:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.previousElement();\n    }\n  };\n  function navigate(data: TreeNavigationData_unstable) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  }\n  return { navigate, rootRef: useMergedRefs(walkerRootRef, rootRefCallback) } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n"],"names":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","useTreeNavigation","rove","initialize","initializeRovingTabIndex","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","walker","lastElement","lastChild"],"mappings":"AACA,SAASA,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,iBAAiB,QAAQ,wBAAwB;AAE1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,4BAA4B;AACpE,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,SAASC;IACd,MAAM,EAAEC,IAAI,EAAEC,YAAYC,wBAAwB,EAAE,GAAGP;IACvD,MAAM,EAAEQ,SAAS,EAAEC,SAASC,aAAa,EAAE,GAAGR;IAE9C,MAAMS,kBAAkDV,MAAMW,WAAW,CACvEC,CAAAA;QACE,IAAIA,QAAQL,UAAUM,OAAO,EAAE;YAC7BP,yBAAyBC,UAAUM,OAAO;QAC5C;IACF,GACA;QAACN;QAAWD;KAAyB;IAGvC,MAAMQ,iBAAiB,CAACC;QACtB,IAAI,CAACR,UAAUM,OAAO,EAAE;YACtB,OAAO;QACT;QACA,OAAQE,KAAKC,IAAI;YACf,KAAKlB,cAAcmB,KAAK;gBACtB,OAAOF,KAAKG,MAAM;YACpB,KAAKpB,cAAcqB,SAAS;gBAC1BZ,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOrB,qBAAqBU,UAAUM,OAAO,EAAEE,KAAKM,KAAK,CAACC,GAAG;YAC/D,KAAKxB,cAAcyB,SAAS;gBAC1BhB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACW,aAAa;YACxC,KAAK1B,cAAc2B,UAAU;gBAC3BlB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACa,UAAU;YACrC,KAAK5B,cAAc6B,GAAG;gBACpBpB,UAAUM,OAAO,CAACO,cAAc,GAAGb,UAAUM,OAAO,CAACD,IAAI;gBACzD,OAAOgB,mBAAmBrB,UAAUM,OAAO;YAC7C,KAAKf,cAAc+B,IAAI;gBACrBtB,UAAUM,OAAO,CAACO,cAAc,GAAGb,UAAUM,OAAO,CAACD,IAAI;gBACzD,OAAOL,UAAUM,OAAO,CAACa,UAAU;YACrC,KAAK5B,cAAcgC,SAAS;gBAC1BvB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACkB,WAAW;YACtC,KAAKjC,cAAckC,OAAO;gBACxBzB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACoB,eAAe;QAC5C;IACF;IACA,SAASC,SAASnB,IAAiC;QACjD,MAAMgB,cAAcjB,eAAeC;QACnC,IAAIgB,aAAa;YACf3B,KAAK2B;QACP;IACF;IACA,OAAO;QAAEG;QAAU1B,SAASN,cAAcO,eAAeC;IAAiB;AAC5E;AAEA,SAASkB,mBAAmBO,MAAyB;IACnD,IAAIC,cAAkC;IACtC,IAAIL,cAAkC;IACtC,MAAQA,cAAcI,OAAOE,SAAS,GAAK;QACzCD,cAAcL;IAChB;IACA,OAAOK;AACT"}
+{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport function useTreeNavigation() {\n  const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (root && walkerRef.current) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [walkerRef, initializeRovingTabIndex],\n  );\n\n  const getNextElement = (data: TreeNavigationData_unstable) => {\n    if (!walkerRef.current) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walkerRef.current.currentElement = data.target;\n        return nextTypeAheadElement(walkerRef.current, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.parentElement();\n      case treeDataTypes.ArrowRight:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return lastChildRecursive(walkerRef.current);\n      case treeDataTypes.Home:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.ArrowDown:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.nextElement();\n      case treeDataTypes.ArrowUp:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.previousElement();\n    }\n  };\n  function navigate(data: TreeNavigationData_unstable, focusOptions?: FocusOptions) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement, focusOptions);\n    }\n  }\n  return {\n    navigate,\n    treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\n  } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n"],"names":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","useTreeNavigation","rove","initialize","initializeRovingTabIndex","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","walker","lastElement","lastChild"],"mappings":"AACA,SAASA,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,iBAAiB,QAAQ,wBAAwB;AAE1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,4BAA4B;AACpE,SAASC,aAAa,QAAQ,4BAA4B;AAE1D;;CAEC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,IAAI,EAAEC,YAAYC,wBAAwB,EAAE,GAAGP;IACvD,MAAM,EAAEQ,SAAS,EAAEC,SAASC,aAAa,EAAE,GAAGR;IAE9C,MAAMS,kBAAkDV,MAAMW,WAAW,CACvEC,CAAAA;QACE,IAAIA,QAAQL,UAAUM,OAAO,EAAE;YAC7BP,yBAAyBC,UAAUM,OAAO;QAC5C;IACF,GACA;QAACN;QAAWD;KAAyB;IAGvC,MAAMQ,iBAAiB,CAACC;QACtB,IAAI,CAACR,UAAUM,OAAO,EAAE;YACtB,OAAO;QACT;QACA,OAAQE,KAAKC,IAAI;YACf,KAAKlB,cAAcmB,KAAK;gBACtB,OAAOF,KAAKG,MAAM;YACpB,KAAKpB,cAAcqB,SAAS;gBAC1BZ,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOrB,qBAAqBU,UAAUM,OAAO,EAAEE,KAAKM,KAAK,CAACC,GAAG;YAC/D,KAAKxB,cAAcyB,SAAS;gBAC1BhB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACW,aAAa;YACxC,KAAK1B,cAAc2B,UAAU;gBAC3BlB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACa,UAAU;YACrC,KAAK5B,cAAc6B,GAAG;gBACpBpB,UAAUM,OAAO,CAACO,cAAc,GAAGb,UAAUM,OAAO,CAACD,IAAI;gBACzD,OAAOgB,mBAAmBrB,UAAUM,OAAO;YAC7C,KAAKf,cAAc+B,IAAI;gBACrBtB,UAAUM,OAAO,CAACO,cAAc,GAAGb,UAAUM,OAAO,CAACD,IAAI;gBACzD,OAAOL,UAAUM,OAAO,CAACa,UAAU;YACrC,KAAK5B,cAAcgC,SAAS;gBAC1BvB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACkB,WAAW;YACtC,KAAKjC,cAAckC,OAAO;gBACxBzB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACoB,eAAe;QAC5C;IACF;IACA,SAASC,SAASnB,IAAiC,EAAEoB,YAA2B;QAC9E,MAAMJ,cAAcjB,eAAeC;QACnC,IAAIgB,aAAa;YACf3B,KAAK2B,aAAaI;QACpB;IACF;IACA,OAAO;QACLD;QACAE,SAASlC,cAAcO,eAAeC;IACxC;AACF;AAEA,SAASkB,mBAAmBS,MAAyB;IACnD,IAAIC,cAAkC;IACtC,IAAIP,cAAkC;IACtC,MAAQA,cAAcM,OAAOE,SAAS,GAAK;QACzCD,cAAcP;IAChB;IACA,OAAOO;AACT"}

package/lib-commonjs/components/Tree/useTree.js

@@ -46,7 +46,9 @@ function useNestedRootTree(props, ref) {
             var _props_onNavigation;
             (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);
             if (!event.isDefaultPrevented()) {
-                navigation.navigate(data);
+                navigation.navigate(data, {
+                    preventScroll: data.isScrollPrevented()
+                });
             }
         }),
         onCheckedChange: (0, _reactutilities.useEventCallback)((event, data)=>{
@@ -57,7 +59,7 @@ function useNestedRootTree(props, ref) {
                 checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()
             });
         })
-    }, (0, _reactutilities.useMergedRefs)(ref, navigation.rootRef)), {
+    }, (0, _reactutilities.useMergedRefs)(ref, navigation.treeRef)), {
         treeType: 'nested'
     });
 }

package/lib-commonjs/components/Tree/useTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { useTreeNavigation } from '../../hooks/useTreeNavigation';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nexport const useTree_unstable = (props, ref)=>{\n    const isRoot = React.useContext(SubtreeContext) === undefined;\n    // as level is static, this doesn't break rule of hooks\n    // and if this becomes an issue later on, this can be easily converted\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\nfunction useNestedRootTree(props, ref) {\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const checkedItems = useNestedCheckedItems(props);\n    const navigation = useTreeNavigation();\n    return Object.assign(useRootTree({\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: useEventCallback((event, data)=>{\n            var _props_onOpenChange;\n            const nextOpenItems = createNextOpenItems(data, openItems);\n            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n                ...data,\n                openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n            });\n            setOpenItems(nextOpenItems);\n        }),\n        onNavigation: useEventCallback((event, data)=>{\n            var _props_onNavigation;\n            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n            if (!event.isDefaultPrevented()) {\n                navigation.navigate(data);\n            }\n        }),\n        onCheckedChange: useEventCallback((event, data)=>{\n            var _props_onCheckedChange;\n            const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n            (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {\n                ...data,\n                checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n            });\n        })\n    }, useMergedRefs(ref, navigation.rootRef)), {\n        treeType: 'nested'\n    });\n}\nfunction useNestedSubtree(props, ref) {\n    if (process.env.NODE_ENV === 'development') {\n        // this doesn't break rule of hooks, as environment is a static value\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n        if (treeType === 'flat') {\n            throw new Error(`@fluentui/react-tree [useTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <Tree> component inside of a <FlatTree> component!`);\n        }\n    }\n    return useSubtree(props, ref);\n}\n"],"names":["useTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","useControllableOpenItems","checkedItems","useNestedCheckedItems","navigation","useTreeNavigation","Object","assign","useRootTree","onOpenChange","useEventCallback","event","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","call","dangerouslyGetInternalSet_unstable","onNavigation","_props_onNavigation","isDefaultPrevented","navigate","onCheckedChange","_props_onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","dangerouslyGetInternalMap_unstable","useMergedRefs","rootRef","treeType","process","env","NODE_ENV","useTreeContext_unstable","ctx","Error","useSubtree"],"mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;gCACyB;0CACc;mDACM;gCACrC;6BACH;4BACD;mCACO;6BACM;AACjC,MAAMA,mBAAmB,CAACC,OAAOC;IACpC,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,kBAAkBP,OAAOC,OAAOO,iBAAiBR,OAAOC;AAC5E;AACA,SAASM,kBAAkBP,KAAK,EAAEC,GAAG;IACjC,MAAM,CAACQ,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACX;IAC3D,MAAMY,eAAeC,IAAAA,wDAAqB,EAACb;IAC3C,MAAMc,aAAaC,IAAAA,oCAAiB;IACpC,OAAOC,OAAOC,MAAM,CAACC,IAAAA,wBAAW,EAAC;QAC7B,GAAGlB,KAAK;QACRS;QACAG;QACAO,cAAcC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIC;YACJ,MAAMC,gBAAgBC,IAAAA,6CAAmB,EAACH,MAAMb;YAC/Cc,CAAAA,sBAAsBvB,MAAMmB,YAAY,AAAD,MAAO,QAAQI,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBG,IAAI,CAAC1B,OAAOqB,OAAO;gBACpI,GAAGC,IAAI;gBACPb,WAAWe,cAAcG,kCAAkC;YAC/D;YACAjB,aAAac;QACjB;QACAI,cAAcR,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIO;YACHA,CAAAA,sBAAsB7B,MAAM4B,YAAY,AAAD,MAAO,QAAQC,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBH,IAAI,CAAC1B,OAAOqB,OAAOC;YACxI,IAAI,CAACD,MAAMS,kBAAkB,IAAI;gBAC7BhB,WAAWiB,QAAQ,CAACT;YACxB;QACJ;QACAU,iBAAiBZ,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACtC,IAAIW;YACJ,MAAMC,mBAAmBC,IAAAA,+DAA4B,EAACb,MAAMV;YAC3DqB,CAAAA,yBAAyBjC,MAAMgC,eAAe,AAAD,MAAO,QAAQC,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBP,IAAI,CAAC1B,OAAOqB,OAAO;gBAChJ,GAAGC,IAAI;gBACPV,cAAcsB,iBAAiBE,kCAAkC;YACrE;QACJ;IACJ,GAAGC,IAAAA,6BAAa,EAACpC,KAAKa,WAAWwB,OAAO,IAAI;QACxCC,UAAU;IACd;AACJ;AACA,SAAS/B,iBAAiBR,KAAK,EAAEC,GAAG;IAChC,IAAIuC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,qEAAqE;QACrE,sDAAsD;QACtD,MAAMH,WAAWI,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIL,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACrB,MAAM,IAAIM,MAAM,CAAC;;mEAEsC,CAAC;QAC5D;IACJ;IACA,OAAOC,IAAAA,sBAAU,EAAC9C,OAAOC;AAC7B"}
+{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { useTreeNavigation } from '../../hooks/useTreeNavigation';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nexport const useTree_unstable = (props, ref)=>{\n    const isRoot = React.useContext(SubtreeContext) === undefined;\n    // as level is static, this doesn't break rule of hooks\n    // and if this becomes an issue later on, this can be easily converted\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\nfunction useNestedRootTree(props, ref) {\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const checkedItems = useNestedCheckedItems(props);\n    const navigation = useTreeNavigation();\n    return Object.assign(useRootTree({\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: useEventCallback((event, data)=>{\n            var _props_onOpenChange;\n            const nextOpenItems = createNextOpenItems(data, openItems);\n            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n                ...data,\n                openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n            });\n            setOpenItems(nextOpenItems);\n        }),\n        onNavigation: useEventCallback((event, data)=>{\n            var _props_onNavigation;\n            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n            if (!event.isDefaultPrevented()) {\n                navigation.navigate(data, {\n                    preventScroll: data.isScrollPrevented()\n                });\n            }\n        }),\n        onCheckedChange: useEventCallback((event, data)=>{\n            var _props_onCheckedChange;\n            const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n            (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {\n                ...data,\n                checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n            });\n        })\n    }, useMergedRefs(ref, navigation.treeRef)), {\n        treeType: 'nested'\n    });\n}\nfunction useNestedSubtree(props, ref) {\n    if (process.env.NODE_ENV === 'development') {\n        // this doesn't break rule of hooks, as environment is a static value\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n        if (treeType === 'flat') {\n            throw new Error(`@fluentui/react-tree [useTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <Tree> component inside of a <FlatTree> component!`);\n        }\n    }\n    return useSubtree(props, ref);\n}\n"],"names":["useTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","useControllableOpenItems","checkedItems","useNestedCheckedItems","navigation","useTreeNavigation","Object","assign","useRootTree","onOpenChange","useEventCallback","event","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","call","dangerouslyGetInternalSet_unstable","onNavigation","_props_onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","_props_onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","dangerouslyGetInternalMap_unstable","useMergedRefs","treeRef","treeType","process","env","NODE_ENV","useTreeContext_unstable","ctx","Error","useSubtree"],"mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;gCACyB;0CACc;mDACM;gCACrC;6BACH;4BACD;mCACO;6BACM;AACjC,MAAMA,mBAAmB,CAACC,OAAOC;IACpC,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,kBAAkBP,OAAOC,OAAOO,iBAAiBR,OAAOC;AAC5E;AACA,SAASM,kBAAkBP,KAAK,EAAEC,GAAG;IACjC,MAAM,CAACQ,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACX;IAC3D,MAAMY,eAAeC,IAAAA,wDAAqB,EAACb;IAC3C,MAAMc,aAAaC,IAAAA,oCAAiB;IACpC,OAAOC,OAAOC,MAAM,CAACC,IAAAA,wBAAW,EAAC;QAC7B,GAAGlB,KAAK;QACRS;QACAG;QACAO,cAAcC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIC;YACJ,MAAMC,gBAAgBC,IAAAA,6CAAmB,EAACH,MAAMb;YAC/Cc,CAAAA,sBAAsBvB,MAAMmB,YAAY,AAAD,MAAO,QAAQI,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBG,IAAI,CAAC1B,OAAOqB,OAAO;gBACpI,GAAGC,IAAI;gBACPb,WAAWe,cAAcG,kCAAkC;YAC/D;YACAjB,aAAac;QACjB;QACAI,cAAcR,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIO;YACHA,CAAAA,sBAAsB7B,MAAM4B,YAAY,AAAD,MAAO,QAAQC,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBH,IAAI,CAAC1B,OAAOqB,OAAOC;YACxI,IAAI,CAACD,MAAMS,kBAAkB,IAAI;gBAC7BhB,WAAWiB,QAAQ,CAACT,MAAM;oBACtBU,eAAeV,KAAKW,iBAAiB;gBACzC;YACJ;QACJ;QACAC,iBAAiBd,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACtC,IAAIa;YACJ,MAAMC,mBAAmBC,IAAAA,+DAA4B,EAACf,MAAMV;YAC3DuB,CAAAA,yBAAyBnC,MAAMkC,eAAe,AAAD,MAAO,QAAQC,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBT,IAAI,CAAC1B,OAAOqB,OAAO;gBAChJ,GAAGC,IAAI;gBACPV,cAAcwB,iBAAiBE,kCAAkC;YACrE;QACJ;IACJ,GAAGC,IAAAA,6BAAa,EAACtC,KAAKa,WAAW0B,OAAO,IAAI;QACxCC,UAAU;IACd;AACJ;AACA,SAASjC,iBAAiBR,KAAK,EAAEC,GAAG;IAChC,IAAIyC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,qEAAqE;QACrE,sDAAsD;QACtD,MAAMH,WAAWI,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIL,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACrB,MAAM,IAAIM,MAAM,CAAC;;mEAEsC,CAAC;QAC5D;IACJ;IACA,OAAOC,IAAAA,sBAAU,EAAChD,OAAOC;AAC7B"}

package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js

@@ -70,25 +70,29 @@ const useMainBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1qjtz99", "r
 ]);
 const useMainStyles = /*#__PURE__*/ (0, _react.__styles)({
     withDescription: {
-        z8tnut: "f1ngh7ph",
-        z189sj: [
-            "f7x41pl",
-            "fruq291"
-        ],
-        Byoj8tv: "f1qch9an",
-        uwmqm3: [
-            "f1f5gg8d",
-            "f1vdfbxk"
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: [
+            "f1625emv",
+            "f5y9hxg"
         ]
     }
 }, {
     d: [
-        ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}",
-        ".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
-        ".fruq291{padding-left:var(--spacingHorizontalXS);}",
-        ".f1qch9an{padding-bottom:0;}",
-        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
-        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}"
+        [
+            ".f1625emv{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) 0 var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f5y9hxg{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) 0 var(--spacingHorizontalXS);}",
+            {
+                p: -1
+            }
+        ]
     ]
 });
 const useDescriptionBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1bnsn1b", "r13x7gq", [

package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemPersonaLayoutClassNames = {\n  root: 'fui-TreeItemPersonaLayout',\n  media: 'fui-TreeItemPersonaLayout__media',\n  description: 'fui-TreeItemPersonaLayout__description',\n  main: 'fui-TreeItemPersonaLayout__main',\n  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n  aside: 'fui-TreeItemPersonaLayout__aside',\n  actions: 'fui-TreeItemPersonaLayout__actions',\n  selector: 'fui-TreeItemPersonaLayout__selector'\n};\nconst useRootBaseStyles = /*#__PURE__*/__resetStyles(\"r1r98egg\", null, [\".r1r98egg{display:grid;grid-template-rows:1fr auto;grid-template-columns:auto auto 1fr auto;grid-template-areas:\\\"expandIcon media main        aside\\\" \\\"expandIcon media description aside\\\";align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}\", \".r1r98egg:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}\", \".r1r98egg:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}\", \".r1r98egg:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}\", \".r1r98egg:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}\"]);\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n  leaf: {\n    uwmqm3: [\"f1k1erfc\", \"faevyjx\"]\n  },\n  branch: {\n    uwmqm3: [\"fo100m9\", \"f6yw3pu\"]\n  }\n}, {\n  d: [\".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}\", \".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}\", \".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}\", \".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useMediaBaseStyles = /*#__PURE__*/__resetStyles(\"rkcde6g\", \"r1e986zr\", [\".rkcde6g{display:flex;align-items:center;width:32px;height:32px;grid-area:media;padding:0 var(--spacingHorizontalXS) 0 var(--spacingHorizontalXXS);}\", \".r1e986zr{display:flex;align-items:center;width:32px;height:32px;grid-area:media;padding:0 var(--spacingHorizontalXXS) 0 var(--spacingHorizontalXS);}\"]);\nconst useMainBaseStyles = /*#__PURE__*/__resetStyles(\"r1qjtz99\", \"rob5fcp\", [\".r1qjtz99{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}\", \".rob5fcp{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}\"]);\nconst useMainStyles = /*#__PURE__*/__styles({\n  withDescription: {\n    z8tnut: \"f1ngh7ph\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  }\n}, {\n  d: [\".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f1qch9an{padding-bottom:0;}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\"]\n});\nconst useDescriptionBaseStyles = /*#__PURE__*/__resetStyles(\"r1bnsn1b\", \"r13x7gq\", [\".r1bnsn1b{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}\", \".r13x7gq{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}\"]);\n/**\n * Styles for the action icon slot\n */\nconst useActionsBaseStyles = /*#__PURE__*/__resetStyles(\"rzvs2in\", \"r17h8a29\", [\".rzvs2in{display:flex;margin-left:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}\", \".r17h8a29{display:flex;margin-right:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}\"]);\n/**\n * Styles for the action icon slot\n */\nconst useAsideBaseStyles = /*#__PURE__*/__resetStyles(\"r1825u21\", \"rezy0yk\", [\".r1825u21{display:flex;margin-left:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}\", \".rezy0yk{display:flex;margin-right:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}\"]);\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconBaseStyles = /*#__PURE__*/__resetStyles(\"rn61xvs\", null, [\".rn61xvs{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);grid-area:expandIcon;flex:0 0 auto;padding:var(--spacingVerticalXS) 0;}\"]);\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = state => {\n  const rootBaseStyles = useRootBaseStyles();\n  const rootStyles = useRootStyles();\n  const mediaBaseStyles = useMediaBaseStyles();\n  const descriptionBaseStyles = useDescriptionBaseStyles();\n  const actionsBaseStyles = useActionsBaseStyles();\n  const asideBaseStyles = useAsideBaseStyles();\n  const expandIconBaseStyles = useExpandIconBaseStyles();\n  const mainBaseStyles = useMainBaseStyles();\n  const mainStyles = useMainStyles();\n  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], state.root.className);\n  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n  if (state.main) {\n    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);\n  }\n  if (state.description) {\n    state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);\n  }\n  if (state.actions) {\n    state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);\n  }\n  if (state.aside) {\n    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n  }\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);\n  }\n  if (state.selector) {\n    state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTreeItemPersonaLayoutStyles.styles.js.map"],"names":["treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","__resetStyles","useRootStyles","__styles","leaf","uwmqm3","branch","d","useMediaBaseStyles","useMainBaseStyles","useMainStyles","withDescription","z8tnut","z189sj","Byoj8tv","useDescriptionBaseStyles","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","itemType","useTreeItemContext_unstable","ctx","className","mergeClasses"],"mappings":"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"}
+{"version":3,"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemPersonaLayoutClassNames = {\n  root: 'fui-TreeItemPersonaLayout',\n  media: 'fui-TreeItemPersonaLayout__media',\n  description: 'fui-TreeItemPersonaLayout__description',\n  main: 'fui-TreeItemPersonaLayout__main',\n  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n  aside: 'fui-TreeItemPersonaLayout__aside',\n  actions: 'fui-TreeItemPersonaLayout__actions',\n  selector: 'fui-TreeItemPersonaLayout__selector'\n};\nconst useRootBaseStyles = /*#__PURE__*/__resetStyles(\"r1r98egg\", null, [\".r1r98egg{display:grid;grid-template-rows:1fr auto;grid-template-columns:auto auto 1fr auto;grid-template-areas:\\\"expandIcon media main        aside\\\" \\\"expandIcon media description aside\\\";align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}\", \".r1r98egg:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}\", \".r1r98egg:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}\", \".r1r98egg:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}\", \".r1r98egg:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}\"]);\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n  leaf: {\n    uwmqm3: [\"f1k1erfc\", \"faevyjx\"]\n  },\n  branch: {\n    uwmqm3: [\"fo100m9\", \"f6yw3pu\"]\n  }\n}, {\n  d: [\".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}\", \".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}\", \".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}\", \".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useMediaBaseStyles = /*#__PURE__*/__resetStyles(\"rkcde6g\", \"r1e986zr\", [\".rkcde6g{display:flex;align-items:center;width:32px;height:32px;grid-area:media;padding:0 var(--spacingHorizontalXS) 0 var(--spacingHorizontalXXS);}\", \".r1e986zr{display:flex;align-items:center;width:32px;height:32px;grid-area:media;padding:0 var(--spacingHorizontalXXS) 0 var(--spacingHorizontalXS);}\"]);\nconst useMainBaseStyles = /*#__PURE__*/__resetStyles(\"r1qjtz99\", \"rob5fcp\", [\".r1qjtz99{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}\", \".rob5fcp{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}\"]);\nconst useMainStyles = /*#__PURE__*/__styles({\n  withDescription: {\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: [\"f1625emv\", \"f5y9hxg\"]\n  }\n}, {\n  d: [[\".f1625emv{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) 0 var(--spacingHorizontalS);}\", {\n    p: -1\n  }], [\".f5y9hxg{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) 0 var(--spacingHorizontalXS);}\", {\n    p: -1\n  }]]\n});\nconst useDescriptionBaseStyles = /*#__PURE__*/__resetStyles(\"r1bnsn1b\", \"r13x7gq\", [\".r1bnsn1b{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}\", \".r13x7gq{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}\"]);\n/**\n * Styles for the action icon slot\n */\nconst useActionsBaseStyles = /*#__PURE__*/__resetStyles(\"rzvs2in\", \"r17h8a29\", [\".rzvs2in{display:flex;margin-left:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}\", \".r17h8a29{display:flex;margin-right:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}\"]);\n/**\n * Styles for the action icon slot\n */\nconst useAsideBaseStyles = /*#__PURE__*/__resetStyles(\"r1825u21\", \"rezy0yk\", [\".r1825u21{display:flex;margin-left:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}\", \".rezy0yk{display:flex;margin-right:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}\"]);\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconBaseStyles = /*#__PURE__*/__resetStyles(\"rn61xvs\", null, [\".rn61xvs{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);grid-area:expandIcon;flex:0 0 auto;padding:var(--spacingVerticalXS) 0;}\"]);\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = state => {\n  const rootBaseStyles = useRootBaseStyles();\n  const rootStyles = useRootStyles();\n  const mediaBaseStyles = useMediaBaseStyles();\n  const descriptionBaseStyles = useDescriptionBaseStyles();\n  const actionsBaseStyles = useActionsBaseStyles();\n  const asideBaseStyles = useAsideBaseStyles();\n  const expandIconBaseStyles = useExpandIconBaseStyles();\n  const mainBaseStyles = useMainBaseStyles();\n  const mainStyles = useMainStyles();\n  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], state.root.className);\n  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n  if (state.main) {\n    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);\n  }\n  if (state.description) {\n    state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);\n  }\n  if (state.actions) {\n    state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);\n  }\n  if (state.aside) {\n    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n  }\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);\n  }\n  if (state.selector) {\n    state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTreeItemPersonaLayoutStyles.styles.js.map"],"names":["treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","__resetStyles","useRootStyles","__styles","leaf","uwmqm3","branch","d","useMediaBaseStyles","useMainBaseStyles","useMainStyles","withDescription","Byoj8tv","z189sj","z8tnut","B0ocmuz","p","useDescriptionBaseStyles","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","itemType","useTreeItemContext_unstable","ctx","className","mergeClasses"],"mappings":"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"}

package/lib-commonjs/hooks/useControllableOpenItems.js

@@ -26,7 +26,7 @@ function useControllableOpenItems(props) {
         state: _react.useMemo(()=>props.openItems && (0, _createOpenItems.createOpenItems)(props.openItems), [
             props.openItems
         ]),
-        defaultState: ()=>(0, _createOpenItems.createOpenItems)(props.defaultOpenItems),
+        defaultState: props.defaultOpenItems && (()=>(0, _createOpenItems.createOpenItems)(props.defaultOpenItems)),
         initialState: _ImmutableSet.ImmutableSet.empty
     });
 }

package/lib-commonjs/hooks/useControllableOpenItems.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useControllableOpenItems.js"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { createOpenItems } from '../utils/createOpenItems';\n/**\n * @internal\n */ export function useControllableOpenItems(props) {\n    return useControllableState({\n        state: React.useMemo(()=>props.openItems && createOpenItems(props.openItems), [\n            props.openItems\n        ]),\n        defaultState: ()=>createOpenItems(props.defaultOpenItems),\n        initialState: ImmutableSet.empty\n    });\n}\n/**\n * @internal\n */ export function createNextOpenItems(data, previousOpenItems) {\n    if (data.value === null) {\n        return previousOpenItems;\n    }\n    const previousOpenItemsHasId = previousOpenItems.has(data.value);\n    if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n        return previousOpenItems;\n    }\n    const nextOpenItems = ImmutableSet.create(previousOpenItems);\n    return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"names":["useControllableOpenItems","createNextOpenItems","props","useControllableState","state","React","useMemo","openItems","createOpenItems","defaultState","defaultOpenItems","initialState","ImmutableSet","empty","data","previousOpenItems","value","previousOpenItemsHasId","has","open","nextOpenItems","create","add","delete"],"mappings":";;;;;;;;;;;IAMoBA,wBAAwB;eAAxBA;;IAWAC,mBAAmB;eAAnBA;;;;gCAjBiB;iEACd;8BACM;iCACG;AAGrB,SAASD,yBAAyBE,KAAK;IAC9C,OAAOC,IAAAA,oCAAoB,EAAC;QACxBC,OAAOC,OAAMC,OAAO,CAAC,IAAIJ,MAAMK,SAAS,IAAIC,IAAAA,gCAAe,EAACN,MAAMK,SAAS,GAAG;YAC1EL,MAAMK,SAAS;SAClB;QACDE,cAAc,IAAID,IAAAA,gCAAe,EAACN,MAAMQ,gBAAgB;QACxDC,cAAcC,0BAAY,CAACC,KAAK;IACpC;AACJ;AAGW,SAASZ,oBAAoBa,IAAI,EAAEC,iBAAiB;IAC3D,IAAID,KAAKE,KAAK,KAAK,MAAM;QACrB,OAAOD;IACX;IACA,MAAME,yBAAyBF,kBAAkBG,GAAG,CAACJ,KAAKE,KAAK;IAC/D,IAAIF,KAAKK,IAAI,GAAGF,yBAAyB,CAACA,wBAAwB;QAC9D,OAAOF;IACX;IACA,MAAMK,gBAAgBR,0BAAY,CAACS,MAAM,CAACN;IAC1C,OAAOD,KAAKK,IAAI,GAAGC,cAAcE,GAAG,CAACR,KAAKE,KAAK,IAAII,cAAcG,MAAM,CAACT,KAAKE,KAAK;AACtF"}
+{"version":3,"sources":["useControllableOpenItems.js"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { createOpenItems } from '../utils/createOpenItems';\n/**\n * @internal\n */ export function useControllableOpenItems(props) {\n    return useControllableState({\n        state: React.useMemo(()=>props.openItems && createOpenItems(props.openItems), [\n            props.openItems\n        ]),\n        defaultState: props.defaultOpenItems && (()=>createOpenItems(props.defaultOpenItems)),\n        initialState: ImmutableSet.empty\n    });\n}\n/**\n * @internal\n */ export function createNextOpenItems(data, previousOpenItems) {\n    if (data.value === null) {\n        return previousOpenItems;\n    }\n    const previousOpenItemsHasId = previousOpenItems.has(data.value);\n    if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n        return previousOpenItems;\n    }\n    const nextOpenItems = ImmutableSet.create(previousOpenItems);\n    return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"names":["useControllableOpenItems","createNextOpenItems","props","useControllableState","state","React","useMemo","openItems","createOpenItems","defaultState","defaultOpenItems","initialState","ImmutableSet","empty","data","previousOpenItems","value","previousOpenItemsHasId","has","open","nextOpenItems","create","add","delete"],"mappings":";;;;;;;;;;;IAMoBA,wBAAwB;eAAxBA;;IAWAC,mBAAmB;eAAnBA;;;;gCAjBiB;iEACd;8BACM;iCACG;AAGrB,SAASD,yBAAyBE,KAAK;IAC9C,OAAOC,IAAAA,oCAAoB,EAAC;QACxBC,OAAOC,OAAMC,OAAO,CAAC,IAAIJ,MAAMK,SAAS,IAAIC,IAAAA,gCAAe,EAACN,MAAMK,SAAS,GAAG;YAC1EL,MAAMK,SAAS;SAClB;QACDE,cAAcP,MAAMQ,gBAAgB,IAAK,CAAA,IAAIF,IAAAA,gCAAe,EAACN,MAAMQ,gBAAgB,CAAA;QACnFC,cAAcC,0BAAY,CAACC,KAAK;IACpC;AACJ;AAGW,SAASZ,oBAAoBa,IAAI,EAAEC,iBAAiB;IAC3D,IAAID,KAAKE,KAAK,KAAK,MAAM;QACrB,OAAOD;IACX;IACA,MAAME,yBAAyBF,kBAAkBG,GAAG,CAACJ,KAAKE,KAAK;IAC/D,IAAIF,KAAKK,IAAI,GAAGF,yBAAyB,CAACA,wBAAwB;QAC9D,OAAOF;IACX;IACA,MAAMK,gBAAgBR,0BAAY,CAACS,MAAM,CAACN;IAC1C,OAAOD,KAAKK,IAAI,GAAGC,cAAcE,GAAG,CAACR,KAAKE,KAAK,IAAII,cAAcG,MAAM,CAACT,KAAKE,KAAK;AACtF"}

package/lib-commonjs/hooks/useRootTree.js

@@ -44,7 +44,14 @@ function useRootTree(props, ref) {
     };
     const requestNavigation = (request)=>{
         var _props_onNavigation;
-        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, request.event, request);
+        let isScrollPrevented = false;
+        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, request.event, {
+            ...request,
+            preventScroll: ()=>{
+                isScrollPrevented = true;
+            },
+            isScrollPrevented: ()=>isScrollPrevented
+        });
         switch(request.type){
             case _tokens.treeDataTypes.ArrowDown:
             case _tokens.treeDataTypes.ArrowUp:

package/lib-commonjs/hooks/useRootTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.js"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\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 */ export function useRootTree(props, ref) {\n    warnIfNoProperPropsRootTree(props);\n    const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n    const openItems = React.useMemo(()=>createOpenItems(props.openItems), [\n        props.openItems\n    ]);\n    const checkedItems = React.useMemo(()=>createCheckedItems(props.checkedItems), [\n        props.checkedItems\n    ]);\n    const requestOpenChange = (request)=>{\n        var _props_onOpenChange;\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, request.event, {\n            ...request,\n            openItems: createNextOpenItems(request, openItems).dangerouslyGetInternalSet_unstable()\n        });\n    };\n    const requestCheckedChange = (request)=>{\n        var _props_onCheckedChange;\n        if (selectionMode === 'none') {\n            return;\n        }\n        (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, request.event, {\n            ...request,\n            selectionMode,\n            checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()\n        });\n    };\n    const requestNavigation = (request)=>{\n        var _props_onNavigation;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, request.event, request);\n        switch(request.type){\n            case treeDataTypes.ArrowDown:\n            case treeDataTypes.ArrowUp:\n            case treeDataTypes.Home:\n            case treeDataTypes.End:\n                // stop the default behavior of the event\n                // which is to scroll the page\n                request.event.preventDefault();\n        }\n    };\n    const requestTreeResponse = useEventCallback((request)=>{\n        switch(request.requestType){\n            case 'navigate':\n                return requestNavigation(request);\n            case 'open':\n                return requestOpenChange(request);\n            case 'selection':\n                return requestCheckedChange(request);\n        }\n    });\n    return {\n        components: {\n            root: 'div'\n        },\n        contextType: 'root',\n        selectionMode,\n        open: true,\n        appearance,\n        size,\n        level: 1,\n        openItems,\n        checkedItems,\n        requestTreeResponse,\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref,\n            role: 'tree',\n            'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsRootTree(props) {\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(`@fluentui/react-tree [useRootTree]:\nTree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined`);\n        }\n    }\n}\n"],"names":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","React","useMemo","createOpenItems","checkedItems","createCheckedItems","requestOpenChange","request","_props_onOpenChange","onOpenChange","call","event","createNextOpenItems","dangerouslyGetInternalSet_unstable","requestCheckedChange","_props_onCheckedChange","onCheckedChange","dangerouslyGetInternalMap_unstable","requestNavigation","_props_onNavigation","onNavigation","type","treeDataTypes","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","useEventCallback","requestType","components","root","contextType","open","level","slot","always","getIntrinsicElementProps","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":";;;;+BAWoBA;;;eAAAA;;;;gCAX6C;iEAC1C;iCACS;oCACG;wBACL;0CACM;AAMzB,SAASA,YAAYC,KAAK,EAAEC,GAAG;IACtCC,4BAA4BF;IAC5B,MAAM,EAAEG,aAAa,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,MAAM,EAAE,GAAGL;IAC3E,MAAMM,YAAYC,OAAMC,OAAO,CAAC,IAAIC,IAAAA,gCAAe,EAACT,MAAMM,SAAS,GAAG;QAClEN,MAAMM,SAAS;KAClB;IACD,MAAMI,eAAeH,OAAMC,OAAO,CAAC,IAAIG,IAAAA,sCAAkB,EAACX,MAAMU,YAAY,GAAG;QAC3EV,MAAMU,YAAY;KACrB;IACD,MAAME,oBAAoB,CAACC;QACvB,IAAIC;QACHA,CAAAA,sBAAsBd,MAAMe,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBE,IAAI,CAAChB,OAAOa,QAAQI,KAAK,EAAE;YAC5I,GAAGJ,OAAO;YACVP,WAAWY,IAAAA,6CAAmB,EAACL,SAASP,WAAWa,kCAAkC;QACzF;IACJ;IACA,MAAMC,uBAAuB,CAACP;QAC1B,IAAIQ;QACJ,IAAIhB,kBAAkB,QAAQ;YAC1B;QACJ;QACCgB,CAAAA,yBAAyBrB,MAAMsB,eAAe,AAAD,MAAO,QAAQD,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBL,IAAI,CAAChB,OAAOa,QAAQI,KAAK,EAAE;YACxJ,GAAGJ,OAAO;YACVR;YACAK,cAAcA,aAAaa,kCAAkC;QACjE;IACJ;IACA,MAAMC,oBAAoB,CAACX;QACvB,IAAIY;QACHA,CAAAA,sBAAsBzB,MAAM0B,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBT,IAAI,CAAChB,OAAOa,QAAQI,KAAK,EAAEJ;QAChJ,OAAOA,QAAQc,IAAI;YACf,KAAKC,qBAAa,CAACC,SAAS;YAC5B,KAAKD,qBAAa,CAACE,OAAO;YAC1B,KAAKF,qBAAa,CAACG,IAAI;YACvB,KAAKH,qBAAa,CAACI,GAAG;gBAClB,yCAAyC;gBACzC,8BAA8B;gBAC9BnB,QAAQI,KAAK,CAACgB,cAAc;QACpC;IACJ;IACA,MAAMC,sBAAsBC,IAAAA,gCAAgB,EAAC,CAACtB;QAC1C,OAAOA,QAAQuB,WAAW;YACtB,KAAK;gBACD,OAAOZ,kBAAkBX;YAC7B,KAAK;gBACD,OAAOD,kBAAkBC;YAC7B,KAAK;gBACD,OAAOO,qBAAqBP;QACpC;IACJ;IACA,OAAO;QACHwB,YAAY;YACRC,MAAM;QACV;QACAC,aAAa;QACblC;QACAmC,MAAM;QACNrC;QACAC;QACAqC,OAAO;QACPnC;QACAI;QACAwB;QACAI,MAAMI,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F3C,KAAKA;YACL4C,MAAM;YACN,wBAAwBxC,kBAAkB,gBAAgB,OAAOyC;YACjE,GAAG9C,KAAK;QACZ,IAAI;YACA+C,aAAa;QACjB;IACJ;AACJ;AACA,SAAS7C,4BAA4BF,KAAK;IACtC,IAAIgD,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,IAAI,CAAClD,KAAK,CAAC,aAAa,IAAI,CAACA,KAAK,CAAC,kBAAkB,EAAE;YACnD,sCAAsC;YACtCmD,QAAQC,IAAI,CAAC,CAAC;8EACoD,CAAC;QACvE;IACJ;AACJ"}
+{"version":3,"sources":["useRootTree.js"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\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 */ export function useRootTree(props, ref) {\n    warnIfNoProperPropsRootTree(props);\n    const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n    const openItems = React.useMemo(()=>createOpenItems(props.openItems), [\n        props.openItems\n    ]);\n    const checkedItems = React.useMemo(()=>createCheckedItems(props.checkedItems), [\n        props.checkedItems\n    ]);\n    const requestOpenChange = (request)=>{\n        var _props_onOpenChange;\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, request.event, {\n            ...request,\n            openItems: createNextOpenItems(request, openItems).dangerouslyGetInternalSet_unstable()\n        });\n    };\n    const requestCheckedChange = (request)=>{\n        var _props_onCheckedChange;\n        if (selectionMode === 'none') {\n            return;\n        }\n        (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, request.event, {\n            ...request,\n            selectionMode,\n            checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()\n        });\n    };\n    const requestNavigation = (request)=>{\n        var _props_onNavigation;\n        let isScrollPrevented = false;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, request.event, {\n            ...request,\n            preventScroll: ()=>{\n                isScrollPrevented = true;\n            },\n            isScrollPrevented: ()=>isScrollPrevented\n        });\n        switch(request.type){\n            case treeDataTypes.ArrowDown:\n            case treeDataTypes.ArrowUp:\n            case treeDataTypes.Home:\n            case treeDataTypes.End:\n                // stop the default behavior of the event\n                // which is to scroll the page\n                request.event.preventDefault();\n        }\n    };\n    const requestTreeResponse = useEventCallback((request)=>{\n        switch(request.requestType){\n            case 'navigate':\n                return requestNavigation(request);\n            case 'open':\n                return requestOpenChange(request);\n            case 'selection':\n                return requestCheckedChange(request);\n        }\n    });\n    return {\n        components: {\n            root: 'div'\n        },\n        contextType: 'root',\n        selectionMode,\n        open: true,\n        appearance,\n        size,\n        level: 1,\n        openItems,\n        checkedItems,\n        requestTreeResponse,\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref,\n            role: 'tree',\n            'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsRootTree(props) {\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(`@fluentui/react-tree [useRootTree]:\nTree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined`);\n        }\n    }\n}\n"],"names":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","React","useMemo","createOpenItems","checkedItems","createCheckedItems","requestOpenChange","request","_props_onOpenChange","onOpenChange","call","event","createNextOpenItems","dangerouslyGetInternalSet_unstable","requestCheckedChange","_props_onCheckedChange","onCheckedChange","dangerouslyGetInternalMap_unstable","requestNavigation","_props_onNavigation","isScrollPrevented","onNavigation","preventScroll","type","treeDataTypes","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","useEventCallback","requestType","components","root","contextType","open","level","slot","always","getIntrinsicElementProps","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"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"}

package/lib-commonjs/hooks/useRovingTabIndexes.js

@@ -13,8 +13,13 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reacttabster = require("@fluentui/react-tabster");
 const _reactutilities = require("@fluentui/react-utilities");
 function useRovingTabIndex() {
-    const currentElementRef = _react.useRef();
+    const currentElementRef = _react.useRef(null);
     const walkerRef = _react.useRef(null);
+    _react.useEffect(()=>{
+        if (currentElementRef.current === null && walkerRef.current) {
+            initialize(walkerRef.current);
+        }
+    });
     (0, _reacttabster.useFocusedElementChange)((element)=>{
         if ((element === null || element === void 0 ? void 0 : element.getAttribute('role')) === 'treeitem' && walkerRef.current && (0, _reactutilities.elementContains)(walkerRef.current.root, element)) {
             rove(element);
@@ -36,13 +41,13 @@ function useRovingTabIndex() {
             nextElement.tabIndex = -1;
         }
     }, []);
-    const rove = _react.useCallback((nextElement)=>{
+    const rove = _react.useCallback((nextElement, focusOptions)=>{
         if (!currentElementRef.current) {
             return;
         }
         currentElementRef.current.tabIndex = -1;
         nextElement.tabIndex = 0;
-        nextElement.focus();
+        nextElement.focus(focusOptions);
         currentElementRef.current = nextElement;
     }, []);
     return {

package/lib-commonjs/hooks/useRovingTabIndexes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRovingTabIndexes.js"],"sourcesContent":["import * as React from 'react';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\nimport { elementContains } from '@fluentui/react-utilities';\n/**\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */ export function useRovingTabIndex() {\n    const currentElementRef = React.useRef();\n    const walkerRef = React.useRef(null);\n    useFocusedElementChange((element)=>{\n        if ((element === null || element === void 0 ? void 0 : element.getAttribute('role')) === 'treeitem' && walkerRef.current && elementContains(walkerRef.current.root, element)) {\n            rove(element);\n        }\n    });\n    const initialize = React.useCallback((walker)=>{\n        walkerRef.current = walker;\n        walker.currentElement = walker.root;\n        let tabbableChild = walker.firstChild((element)=>element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP);\n        walker.currentElement = walker.root;\n        tabbableChild !== null && tabbableChild !== void 0 ? tabbableChild : tabbableChild = walker.firstChild();\n        if (!tabbableChild) {\n            return;\n        }\n        tabbableChild.tabIndex = 0;\n        currentElementRef.current = tabbableChild;\n        let nextElement = null;\n        while((nextElement = walker.nextElement()) && nextElement !== tabbableChild){\n            nextElement.tabIndex = -1;\n        }\n    }, []);\n    const rove = React.useCallback((nextElement)=>{\n        if (!currentElementRef.current) {\n            return;\n        }\n        currentElementRef.current.tabIndex = -1;\n        nextElement.tabIndex = 0;\n        nextElement.focus();\n        currentElementRef.current = nextElement;\n    }, []);\n    return {\n        rove,\n        initialize\n    };\n}\n"],"names":["useRovingTabIndex","currentElementRef","React","useRef","walkerRef","useFocusedElementChange","element","getAttribute","current","elementContains","root","rove","initialize","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focus"],"mappings":";;;;+BAKoBA;;;eAAAA;;;;iEALG;8BACiB;gCACR;AAGrB,SAASA;IAChB,MAAMC,oBAAoBC,OAAMC,MAAM;IACtC,MAAMC,YAAYF,OAAMC,MAAM,CAAC;IAC/BE,IAAAA,qCAAuB,EAAC,CAACC;QACrB,IAAI,AAACA,CAAAA,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQC,YAAY,CAAC,OAAM,MAAO,cAAcH,UAAUI,OAAO,IAAIC,IAAAA,+BAAe,EAACL,UAAUI,OAAO,CAACE,IAAI,EAAEJ,UAAU;YAC1KK,KAAKL;QACT;IACJ;IACA,MAAMM,aAAaV,OAAMW,WAAW,CAAC,CAACC;QAClCV,UAAUI,OAAO,GAAGM;QACpBA,OAAOC,cAAc,GAAGD,OAAOJ,IAAI;QACnC,IAAIM,gBAAgBF,OAAOG,UAAU,CAAC,CAACX,UAAUA,QAAQY,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAC3HP,OAAOC,cAAc,GAAGD,OAAOJ,IAAI;QACnCM,kBAAkB,QAAQA,kBAAkB,KAAK,IAAIA,gBAAgBA,gBAAgBF,OAAOG,UAAU;QACtG,IAAI,CAACD,eAAe;YAChB;QACJ;QACAA,cAAcE,QAAQ,GAAG;QACzBjB,kBAAkBO,OAAO,GAAGQ;QAC5B,IAAIM,cAAc;QAClB,MAAM,AAACA,CAAAA,cAAcR,OAAOQ,WAAW,EAAC,KAAMA,gBAAgBN,cAAc;YACxEM,YAAYJ,QAAQ,GAAG,CAAC;QAC5B;IACJ,GAAG,EAAE;IACL,MAAMP,OAAOT,OAAMW,WAAW,CAAC,CAACS;QAC5B,IAAI,CAACrB,kBAAkBO,OAAO,EAAE;YAC5B;QACJ;QACAP,kBAAkBO,OAAO,CAACU,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYC,KAAK;QACjBtB,kBAAkBO,OAAO,GAAGc;IAChC,GAAG,EAAE;IACL,OAAO;QACHX;QACAC;IACJ;AACJ"}
+{"version":3,"sources":["useRovingTabIndexes.js"],"sourcesContent":["import * as React from 'react';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\nimport { elementContains } from '@fluentui/react-utilities';\n/**\n * @internal\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */ export function useRovingTabIndex() {\n    const currentElementRef = React.useRef(null);\n    const walkerRef = React.useRef(null);\n    React.useEffect(()=>{\n        if (currentElementRef.current === null && walkerRef.current) {\n            initialize(walkerRef.current);\n        }\n    });\n    useFocusedElementChange((element)=>{\n        if ((element === null || element === void 0 ? void 0 : element.getAttribute('role')) === 'treeitem' && walkerRef.current && elementContains(walkerRef.current.root, element)) {\n            rove(element);\n        }\n    });\n    const initialize = React.useCallback((walker)=>{\n        walkerRef.current = walker;\n        walker.currentElement = walker.root;\n        let tabbableChild = walker.firstChild((element)=>element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP);\n        walker.currentElement = walker.root;\n        tabbableChild !== null && tabbableChild !== void 0 ? tabbableChild : tabbableChild = walker.firstChild();\n        if (!tabbableChild) {\n            return;\n        }\n        tabbableChild.tabIndex = 0;\n        currentElementRef.current = tabbableChild;\n        let nextElement = null;\n        while((nextElement = walker.nextElement()) && nextElement !== tabbableChild){\n            nextElement.tabIndex = -1;\n        }\n    }, []);\n    const rove = React.useCallback((nextElement, focusOptions)=>{\n        if (!currentElementRef.current) {\n            return;\n        }\n        currentElementRef.current.tabIndex = -1;\n        nextElement.tabIndex = 0;\n        nextElement.focus(focusOptions);\n        currentElementRef.current = nextElement;\n    }, []);\n    return {\n        rove,\n        initialize\n    };\n}\n"],"names":["useRovingTabIndex","currentElementRef","React","useRef","walkerRef","useEffect","current","initialize","useFocusedElementChange","element","getAttribute","elementContains","root","rove","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focusOptions","focus"],"mappings":";;;;+BAMoBA;;;eAAAA;;;;iEANG;8BACiB;gCACR;AAIrB,SAASA;IAChB,MAAMC,oBAAoBC,OAAMC,MAAM,CAAC;IACvC,MAAMC,YAAYF,OAAMC,MAAM,CAAC;IAC/BD,OAAMG,SAAS,CAAC;QACZ,IAAIJ,kBAAkBK,OAAO,KAAK,QAAQF,UAAUE,OAAO,EAAE;YACzDC,WAAWH,UAAUE,OAAO;QAChC;IACJ;IACAE,IAAAA,qCAAuB,EAAC,CAACC;QACrB,IAAI,AAACA,CAAAA,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQC,YAAY,CAAC,OAAM,MAAO,cAAcN,UAAUE,OAAO,IAAIK,IAAAA,+BAAe,EAACP,UAAUE,OAAO,CAACM,IAAI,EAAEH,UAAU;YAC1KI,KAAKJ;QACT;IACJ;IACA,MAAMF,aAAaL,OAAMY,WAAW,CAAC,CAACC;QAClCX,UAAUE,OAAO,GAAGS;QACpBA,OAAOC,cAAc,GAAGD,OAAOH,IAAI;QACnC,IAAIK,gBAAgBF,OAAOG,UAAU,CAAC,CAACT,UAAUA,QAAQU,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAC3HP,OAAOC,cAAc,GAAGD,OAAOH,IAAI;QACnCK,kBAAkB,QAAQA,kBAAkB,KAAK,IAAIA,gBAAgBA,gBAAgBF,OAAOG,UAAU;QACtG,IAAI,CAACD,eAAe;YAChB;QACJ;QACAA,cAAcE,QAAQ,GAAG;QACzBlB,kBAAkBK,OAAO,GAAGW;QAC5B,IAAIM,cAAc;QAClB,MAAM,AAACA,CAAAA,cAAcR,OAAOQ,WAAW,EAAC,KAAMA,gBAAgBN,cAAc;YACxEM,YAAYJ,QAAQ,GAAG,CAAC;QAC5B;IACJ,GAAG,EAAE;IACL,MAAMN,OAAOX,OAAMY,WAAW,CAAC,CAACS,aAAaC;QACzC,IAAI,CAACvB,kBAAkBK,OAAO,EAAE;YAC5B;QACJ;QACAL,kBAAkBK,OAAO,CAACa,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYE,KAAK,CAACD;QAClBvB,kBAAkBK,OAAO,GAAGiB;IAChC,GAAG,EAAE;IACL,OAAO;QACHV;QACAN;IACJ;AACJ"}

package/lib-commonjs/hooks/useTreeNavigation.js

@@ -56,15 +56,15 @@ function useTreeNavigation() {
                 return walkerRef.current.previousElement();
         }
     };
-    function navigate(data) {
+    function navigate(data, focusOptions) {
         const nextElement = getNextElement(data);
         if (nextElement) {
-            rove(nextElement);
+            rove(nextElement, focusOptions);
         }
     }
     return {
         navigate,
-        rootRef: (0, _reactutilities.useMergedRefs)(walkerRootRef, rootRefCallback)
+        treeRef: (0, _reactutilities.useMergedRefs)(walkerRootRef, rootRefCallback)
     };
 }
 function lastChildRecursive(walker) {

package/lib-commonjs/hooks/useTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeNavigation.js"],"sourcesContent":["import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nexport function useTreeNavigation() {\n    const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n    const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n    const rootRefCallback = React.useCallback((root)=>{\n        if (root && walkerRef.current) {\n            initializeRovingTabIndex(walkerRef.current);\n        }\n    }, [\n        walkerRef,\n        initializeRovingTabIndex\n    ]);\n    const getNextElement = (data)=>{\n        if (!walkerRef.current) {\n            return null;\n        }\n        switch(data.type){\n            case treeDataTypes.Click:\n                return data.target;\n            case treeDataTypes.TypeAhead:\n                walkerRef.current.currentElement = data.target;\n                return nextTypeAheadElement(walkerRef.current, data.event.key);\n            case treeDataTypes.ArrowLeft:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.parentElement();\n            case treeDataTypes.ArrowRight:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.firstChild();\n            case treeDataTypes.End:\n                walkerRef.current.currentElement = walkerRef.current.root;\n                return lastChildRecursive(walkerRef.current);\n            case treeDataTypes.Home:\n                walkerRef.current.currentElement = walkerRef.current.root;\n                return walkerRef.current.firstChild();\n            case treeDataTypes.ArrowDown:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.nextElement();\n            case treeDataTypes.ArrowUp:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.previousElement();\n        }\n    };\n    function navigate(data) {\n        const nextElement = getNextElement(data);\n        if (nextElement) {\n            rove(nextElement);\n        }\n    }\n    return {\n        navigate,\n        rootRef: useMergedRefs(walkerRootRef, rootRefCallback)\n    };\n}\nfunction lastChildRecursive(walker) {\n    let lastElement = null;\n    let nextElement = null;\n    while(nextElement = walker.lastChild()){\n        lastElement = nextElement;\n    }\n    return lastElement;\n}\n"],"names":["useTreeNavigation","rove","initialize","initializeRovingTabIndex","useRovingTabIndex","walkerRef","rootRef","walkerRootRef","useHTMLElementWalkerRef","rootRefCallback","React","useCallback","root","current","getNextElement","data","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","useMergedRefs","walker","lastElement","lastChild"],"mappings":";;;;+BAMgBA;;;eAAAA;;;;sCANqB;wBACP;qCACI;iEACX;yCACiB;gCACV;AACvB,SAASA;IACZ,MAAM,EAAEC,IAAI,EAAEC,YAAYC,wBAAwB,EAAE,GAAGC,IAAAA,sCAAiB;IACxE,MAAM,EAAEC,SAAS,EAAEC,SAASC,aAAa,EAAE,GAAGC,IAAAA,gDAAuB;IACrE,MAAMC,kBAAkBC,OAAMC,WAAW,CAAC,CAACC;QACvC,IAAIA,QAAQP,UAAUQ,OAAO,EAAE;YAC3BV,yBAAyBE,UAAUQ,OAAO;QAC9C;IACJ,GAAG;QACCR;QACAF;KACH;IACD,MAAMW,iBAAiB,CAACC;QACpB,IAAI,CAACV,UAAUQ,OAAO,EAAE;YACpB,OAAO;QACX;QACA,OAAOE,KAAKC,IAAI;YACZ,KAAKC,qBAAa,CAACC,KAAK;gBACpB,OAAOH,KAAKI,MAAM;YACtB,KAAKF,qBAAa,CAACG,SAAS;gBACxBf,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOG,IAAAA,0CAAoB,EAACjB,UAAUQ,OAAO,EAAEE,KAAKQ,KAAK,CAACC,GAAG;YACjE,KAAKP,qBAAa,CAACQ,SAAS;gBACxBpB,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACa,aAAa;YAC1C,KAAKT,qBAAa,CAACU,UAAU;gBACzBtB,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACe,UAAU;YACvC,KAAKX,qBAAa,CAACY,GAAG;gBAClBxB,UAAUQ,OAAO,CAACQ,cAAc,GAAGhB,UAAUQ,OAAO,CAACD,IAAI;gBACzD,OAAOkB,mBAAmBzB,UAAUQ,OAAO;YAC/C,KAAKI,qBAAa,CAACc,IAAI;gBACnB1B,UAAUQ,OAAO,CAACQ,cAAc,GAAGhB,UAAUQ,OAAO,CAACD,IAAI;gBACzD,OAAOP,UAAUQ,OAAO,CAACe,UAAU;YACvC,KAAKX,qBAAa,CAACe,SAAS;gBACxB3B,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACoB,WAAW;YACxC,KAAKhB,qBAAa,CAACiB,OAAO;gBACtB7B,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACsB,eAAe;QAChD;IACJ;IACA,SAASC,SAASrB,IAAI;QAClB,MAAMkB,cAAcnB,eAAeC;QACnC,IAAIkB,aAAa;YACbhC,KAAKgC;QACT;IACJ;IACA,OAAO;QACHG;QACA9B,SAAS+B,IAAAA,6BAAa,EAAC9B,eAAeE;IAC1C;AACJ;AACA,SAASqB,mBAAmBQ,MAAM;IAC9B,IAAIC,cAAc;IAClB,IAAIN,cAAc;IAClB,MAAMA,cAAcK,OAAOE,SAAS,GAAG;QACnCD,cAAcN;IAClB;IACA,OAAOM;AACX"}
+{"version":3,"sources":["useTreeNavigation.js"],"sourcesContent":["import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n/**\n * @internal\n */ export function useTreeNavigation() {\n    const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n    const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n    const rootRefCallback = React.useCallback((root)=>{\n        if (root && walkerRef.current) {\n            initializeRovingTabIndex(walkerRef.current);\n        }\n    }, [\n        walkerRef,\n        initializeRovingTabIndex\n    ]);\n    const getNextElement = (data)=>{\n        if (!walkerRef.current) {\n            return null;\n        }\n        switch(data.type){\n            case treeDataTypes.Click:\n                return data.target;\n            case treeDataTypes.TypeAhead:\n                walkerRef.current.currentElement = data.target;\n                return nextTypeAheadElement(walkerRef.current, data.event.key);\n            case treeDataTypes.ArrowLeft:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.parentElement();\n            case treeDataTypes.ArrowRight:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.firstChild();\n            case treeDataTypes.End:\n                walkerRef.current.currentElement = walkerRef.current.root;\n                return lastChildRecursive(walkerRef.current);\n            case treeDataTypes.Home:\n                walkerRef.current.currentElement = walkerRef.current.root;\n                return walkerRef.current.firstChild();\n            case treeDataTypes.ArrowDown:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.nextElement();\n            case treeDataTypes.ArrowUp:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.previousElement();\n        }\n    };\n    function navigate(data, focusOptions) {\n        const nextElement = getNextElement(data);\n        if (nextElement) {\n            rove(nextElement, focusOptions);\n        }\n    }\n    return {\n        navigate,\n        treeRef: useMergedRefs(walkerRootRef, rootRefCallback)\n    };\n}\nfunction lastChildRecursive(walker) {\n    let lastElement = null;\n    let nextElement = null;\n    while(nextElement = walker.lastChild()){\n        lastElement = nextElement;\n    }\n    return lastElement;\n}\n"],"names":["useTreeNavigation","rove","initialize","initializeRovingTabIndex","useRovingTabIndex","walkerRef","rootRef","walkerRootRef","useHTMLElementWalkerRef","rootRefCallback","React","useCallback","root","current","getNextElement","data","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","useMergedRefs","walker","lastElement","lastChild"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;sCARiB;wBACP;qCACI;iEACX;yCACiB;gCACV;AAGnB,SAASA;IAChB,MAAM,EAAEC,IAAI,EAAEC,YAAYC,wBAAwB,EAAE,GAAGC,IAAAA,sCAAiB;IACxE,MAAM,EAAEC,SAAS,EAAEC,SAASC,aAAa,EAAE,GAAGC,IAAAA,gDAAuB;IACrE,MAAMC,kBAAkBC,OAAMC,WAAW,CAAC,CAACC;QACvC,IAAIA,QAAQP,UAAUQ,OAAO,EAAE;YAC3BV,yBAAyBE,UAAUQ,OAAO;QAC9C;IACJ,GAAG;QACCR;QACAF;KACH;IACD,MAAMW,iBAAiB,CAACC;QACpB,IAAI,CAACV,UAAUQ,OAAO,EAAE;YACpB,OAAO;QACX;QACA,OAAOE,KAAKC,IAAI;YACZ,KAAKC,qBAAa,CAACC,KAAK;gBACpB,OAAOH,KAAKI,MAAM;YACtB,KAAKF,qBAAa,CAACG,SAAS;gBACxBf,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOG,IAAAA,0CAAoB,EAACjB,UAAUQ,OAAO,EAAEE,KAAKQ,KAAK,CAACC,GAAG;YACjE,KAAKP,qBAAa,CAACQ,SAAS;gBACxBpB,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACa,aAAa;YAC1C,KAAKT,qBAAa,CAACU,UAAU;gBACzBtB,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACe,UAAU;YACvC,KAAKX,qBAAa,CAACY,GAAG;gBAClBxB,UAAUQ,OAAO,CAACQ,cAAc,GAAGhB,UAAUQ,OAAO,CAACD,IAAI;gBACzD,OAAOkB,mBAAmBzB,UAAUQ,OAAO;YAC/C,KAAKI,qBAAa,CAACc,IAAI;gBACnB1B,UAAUQ,OAAO,CAACQ,cAAc,GAAGhB,UAAUQ,OAAO,CAACD,IAAI;gBACzD,OAAOP,UAAUQ,OAAO,CAACe,UAAU;YACvC,KAAKX,qBAAa,CAACe,SAAS;gBACxB3B,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACoB,WAAW;YACxC,KAAKhB,qBAAa,CAACiB,OAAO;gBACtB7B,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACsB,eAAe;QAChD;IACJ;IACA,SAASC,SAASrB,IAAI,EAAEsB,YAAY;QAChC,MAAMJ,cAAcnB,eAAeC;QACnC,IAAIkB,aAAa;YACbhC,KAAKgC,aAAaI;QACtB;IACJ;IACA,OAAO;QACHD;QACAE,SAASC,IAAAA,6BAAa,EAAChC,eAAeE;IAC1C;AACJ;AACA,SAASqB,mBAAmBU,MAAM;IAC9B,IAAIC,cAAc;IAClB,IAAIR,cAAc;IAClB,MAAMA,cAAcO,OAAOE,SAAS,GAAG;QACnCD,cAAcR;IAClB;IACA,OAAOQ;AACX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.5.0",
+  "version": "9.6.0",
   "description": "Tree component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,18 +37,18 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-aria": "^9.11.3",
-    "@fluentui/react-avatar": "^9.6.27",
-    "@fluentui/react-button": "^9.3.81",
-    "@fluentui/react-checkbox": "^9.2.26",
-    "@fluentui/react-context-selector": "^9.1.60",
+    "@fluentui/react-aria": "^9.12.0",
+    "@fluentui/react-avatar": "^9.6.29",
+    "@fluentui/react-button": "^9.3.83",
+    "@fluentui/react-checkbox": "^9.2.28",
+    "@fluentui/react-context-selector": "^9.1.61",
     "@fluentui/react-icons": "^2.0.239",
-    "@fluentui/react-radio": "^9.2.21",
+    "@fluentui/react-radio": "^9.2.23",
     "@fluentui/react-shared-contexts": "^9.19.0",
-    "@fluentui/react-tabster": "^9.21.3",
+    "@fluentui/react-tabster": "^9.21.5",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.9",
-    "@fluentui/react-jsx-runtime": "^9.0.38",
+    "@fluentui/react-utilities": "^9.18.10",
+    "@fluentui/react-jsx-runtime": "^9.0.39",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },