@fluentui/react-tree 9.0.0-beta.9 → 9.0.0

package/lib/FlatTree.js

@@ -0,0 +1 @@
+export * from './components/FlatTree/index';

package/lib/FlatTree.js.map

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

package/lib/Tree.js

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

package/lib/Tree.js.map

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

package/lib/TreeItem.js

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

package/lib/TreeItem.js.map

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

package/lib/TreeItemLayout.js

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

package/lib/TreeItemLayout.js.map

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

package/lib/TreeItemPersonaLayout.js

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

package/lib/TreeItemPersonaLayout.js.map

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

package/lib/components/FlatTree/FlatTree.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useFlatTree_unstable } from './useFlatTree';
+import { useFlatTreeStyles_unstable } from './useFlatTreeStyles.styles';
+import { useFlatTreeContextValues_unstable } from './useFlatTreeContextValues';
+import { renderFlatTree_unstable } from './renderFlatTree';
+/**
+ * The `FlatTree` component is a variation of the `Tree` component that deals with a flattened data structure.
+ *
+ * It should be used on cases where more complex interactions with a Tree is required.
+ * On simple scenarios it is advised to simply use a nested structure instead.
+ */ export const FlatTree = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useFlatTree_unstable(props, ref);
+    const contextValues = useFlatTreeContextValues_unstable(state);
+    useFlatTreeStyles_unstable(state);
+    return renderFlatTree_unstable(state, contextValues);
+});
+FlatTree.displayName = 'FlatTree';

package/lib/components/FlatTree/FlatTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FlatTree.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FlatTreeProps } from './FlatTree.types';\nimport { useFlatTree_unstable } from './useFlatTree';\nimport { useFlatTreeStyles_unstable } from './useFlatTreeStyles.styles';\nimport { useFlatTreeContextValues_unstable } from './useFlatTreeContextValues';\nimport { renderFlatTree_unstable } from './renderFlatTree';\n\n/**\n * The `FlatTree` component is a variation of the `Tree` component that deals with a flattened data structure.\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport const FlatTree: ForwardRefComponent<FlatTreeProps> = React.forwardRef((props, ref) => {\n  const state = useFlatTree_unstable(props, ref);\n  const contextValues = useFlatTreeContextValues_unstable(state);\n  useFlatTreeStyles_unstable(state);\n  return renderFlatTree_unstable(state, contextValues);\n});\n\nFlatTree.displayName = 'FlatTree';\n"],"names":["React","useFlatTree_unstable","useFlatTreeStyles_unstable","useFlatTreeContextValues_unstable","renderFlatTree_unstable","FlatTree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,0BAA0B,QAAQ,6BAA6B;AACxE,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,uBAAuB,QAAQ,mBAAmB;AAE3D;;;;;CAKC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC3F,MAAMC,QAAQR,qBAAqBM,OAAOC;IAC1C,MAAME,gBAAgBP,kCAAkCM;IACxDP,2BAA2BO;IAC3B,OAAOL,wBAAwBK,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib/components/FlatTree/FlatTree.types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["FlatTree.types.ts"],"sourcesContent":["import type { ComponentProps, SelectionMode } from '@fluentui/react-utilities';\nimport type {\n  TreeSlots,\n  TreeState,\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeSelectionValue,\n} from '../Tree/index';\nimport type { TreeItemValue } from '../TreeItem/index';\n\nexport { TreeSlots as FlatTreeSlots, TreeState as FlatTreeState };\n\nexport type FlatTreeProps = 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   * 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"],"names":[],"mappings":"AAAA,WAiFE"}

package/lib/components/FlatTree/index.js

@@ -0,0 +1,7 @@
+export * from './FlatTree';
+export * from './FlatTree.types';
+export * from './useHeadlessFlatTree';
+export * from './useFlatTree';
+export * from './useFlatTreeStyles.styles';
+export * from './useFlatTreeContextValues';
+export * from './renderFlatTree';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './FlatTree';\nexport * from './FlatTree.types';\nexport * from './useHeadlessFlatTree';\nexport * from './useFlatTree';\nexport * from './useFlatTreeStyles.styles';\nexport * from './useFlatTreeContextValues';\nexport * from './renderFlatTree';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,wBAAwB;AACtC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B;AAC3C,cAAc,6BAA6B;AAC3C,cAAc,mBAAmB"}

package/lib/components/FlatTree/renderFlatTree.js

@@ -0,0 +1,2 @@
+import { renderTree_unstable } from '../../Tree';
+export const renderFlatTree_unstable = renderTree_unstable;

package/lib/components/FlatTree/renderFlatTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderFlatTree.ts"],"sourcesContent":["import { TreeContextValues, renderTree_unstable } from '../../Tree';\nimport type { FlatTreeState } from './FlatTree.types';\n\nexport const renderFlatTree_unstable: (state: FlatTreeState, contextValues: TreeContextValues) => JSX.Element =\n  renderTree_unstable;\n"],"names":["renderTree_unstable","renderFlatTree_unstable"],"mappings":"AAAA,SAA4BA,mBAAmB,QAAQ,aAAa;AAGpE,OAAO,MAAMC,0BACXD,oBAAoB"}

package/lib/components/FlatTree/useFlatControllableCheckedItems.js

@@ -0,0 +1,76 @@
+import { useControllableState } from '@fluentui/react-utilities';
+import { ImmutableMap } from '../../utils/ImmutableMap';
+import * as React from 'react';
+import { createCheckedItems } from '../../utils/createCheckedItems';
+export function useFlatControllableCheckedItems(props, headlessTree) {
+    return useControllableState({
+        initialState: ImmutableMap.empty,
+        state: React.useMemo(()=>props.selectionMode ? props.checkedItems && createCheckedItems(props.checkedItems) : undefined, [
+            props.checkedItems,
+            props.selectionMode
+        ]),
+        defaultState: ()=>initializeCheckedItems(props, headlessTree)
+    });
+}
+export function createNextFlatCheckedItems(data, previousCheckedItems, headlessTree) {
+    if (data.selectionMode === 'single') {
+        return ImmutableMap.create([
+            [
+                data.value,
+                data.checked
+            ]
+        ]);
+    }
+    const treeItem = headlessTree.get(data.value);
+    if (!treeItem) {
+        if (process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.error(`useHeadlessFlatTree: tree item ${data.value} not found`);
+        }
+        return previousCheckedItems;
+    }
+    const nextCheckedItems = new Map(previousCheckedItems);
+    for (const children of headlessTree.subtree(data.value)){
+        nextCheckedItems.set(children.value, data.checked);
+    }
+    nextCheckedItems.set(data.value, data.checked);
+    let isAncestorsMixed = false;
+    for (const parent of headlessTree.ancestors(treeItem.value)){
+        // if one parent is mixed, all ancestors are mixed
+        if (isAncestorsMixed) {
+            nextCheckedItems.set(parent.value, 'mixed');
+            continue;
+        }
+        const checkedChildren = [];
+        for (const child of headlessTree.children(parent.value)){
+            var _nextCheckedItems_get;
+            if (((_nextCheckedItems_get = nextCheckedItems.get(child.value)) !== null && _nextCheckedItems_get !== void 0 ? _nextCheckedItems_get : false) === data.checked) {
+                checkedChildren.push(child);
+            }
+        }
+        if (checkedChildren.length === parent.childrenValues.length) {
+            nextCheckedItems.set(parent.value, data.checked);
+        } else {
+            // if one parent is mixed, all ancestors are mixed
+            isAncestorsMixed = true;
+            nextCheckedItems.set(parent.value, 'mixed');
+        }
+    }
+    return ImmutableMap.dangerouslyCreate_unstable(nextCheckedItems);
+}
+function initializeCheckedItems(props, headlessTree) {
+    if (!props.selectionMode) {
+        return ImmutableMap.empty;
+    }
+    let state = createCheckedItems(props.defaultCheckedItems);
+    if (props.selectionMode === 'multiselect') {
+        for (const [value, checked] of state){
+            state = createNextFlatCheckedItems({
+                value,
+                checked,
+                selectionMode: props.selectionMode
+            }, state, headlessTree);
+        }
+    }
+    return state;
+}

package/lib/components/FlatTree/useFlatControllableCheckedItems.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useFlatControllableCheckedItems.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport { TreeItemValue } from '../../TreeItem';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport * as React from 'react';\nimport type { HeadlessTree, HeadlessTreeItemProps } from '../../utils/createHeadlessTree';\nimport { createCheckedItems } from '../../utils/createCheckedItems';\nimport type { TreeCheckedChangeData } from '../Tree/Tree.types';\nimport { HeadlessFlatTreeOptions } from './useHeadlessFlatTree';\n\nexport function useFlatControllableCheckedItems<Props extends HeadlessTreeItemProps>(\n  props: Pick<HeadlessFlatTreeOptions, 'checkedItems' | 'defaultCheckedItems' | 'selectionMode'>,\n  headlessTree: HeadlessTree<Props>,\n) {\n  return useControllableState({\n    initialState: ImmutableMap.empty,\n    state: React.useMemo(\n      () => (props.selectionMode ? props.checkedItems && createCheckedItems(props.checkedItems) : undefined),\n      [props.checkedItems, props.selectionMode],\n    ),\n    defaultState: () => initializeCheckedItems(props, headlessTree),\n  });\n}\n\nexport function createNextFlatCheckedItems(\n  data: Pick<TreeCheckedChangeData, 'value' | 'checked' | 'selectionMode'>,\n  previousCheckedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>,\n  headlessTree: HeadlessTree<HeadlessTreeItemProps>,\n): ImmutableMap<TreeItemValue, 'mixed' | boolean> {\n  if (data.selectionMode === 'single') {\n    return ImmutableMap.create([[data.value, data.checked]]);\n  }\n  const treeItem = headlessTree.get(data.value);\n  if (!treeItem) {\n    if (process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line no-console\n      console.error(`useHeadlessFlatTree: tree item ${data.value} not found`);\n    }\n    return previousCheckedItems;\n  }\n  const nextCheckedItems = new Map(previousCheckedItems);\n  for (const children of headlessTree.subtree(data.value)) {\n    nextCheckedItems.set(children.value, data.checked);\n  }\n  nextCheckedItems.set(data.value, data.checked);\n\n  let isAncestorsMixed = false;\n  for (const parent of headlessTree.ancestors(treeItem.value)) {\n    // if one parent is mixed, all ancestors are mixed\n    if (isAncestorsMixed) {\n      nextCheckedItems.set(parent.value, 'mixed');\n      continue;\n    }\n    const checkedChildren = [];\n    for (const child of headlessTree.children(parent.value)) {\n      if ((nextCheckedItems.get(child.value) ?? false) === data.checked) {\n        checkedChildren.push(child);\n      }\n    }\n    if (checkedChildren.length === parent.childrenValues.length) {\n      nextCheckedItems.set(parent.value, data.checked);\n    } else {\n      // if one parent is mixed, all ancestors are mixed\n      isAncestorsMixed = true;\n      nextCheckedItems.set(parent.value, 'mixed');\n    }\n  }\n  return ImmutableMap.dangerouslyCreate_unstable(nextCheckedItems);\n}\n\nfunction initializeCheckedItems(\n  props: Pick<HeadlessFlatTreeOptions, 'selectionMode' | 'defaultCheckedItems'>,\n  headlessTree: HeadlessTree<HeadlessTreeItemProps>,\n) {\n  if (!props.selectionMode) {\n    return ImmutableMap.empty;\n  }\n  let state = createCheckedItems(props.defaultCheckedItems);\n  if (props.selectionMode === 'multiselect') {\n    for (const [value, checked] of state) {\n      state = createNextFlatCheckedItems({ value, checked, selectionMode: props.selectionMode }, state, headlessTree);\n    }\n  }\n  return state;\n}\n"],"names":["useControllableState","ImmutableMap","React","createCheckedItems","useFlatControllableCheckedItems","props","headlessTree","initialState","empty","state","useMemo","selectionMode","checkedItems","undefined","defaultState","initializeCheckedItems","createNextFlatCheckedItems","data","previousCheckedItems","create","value","checked","treeItem","get","process","env","NODE_ENV","console","error","nextCheckedItems","Map","children","subtree","set","isAncestorsMixed","parent","ancestors","checkedChildren","child","push","length","childrenValues","dangerouslyCreate_unstable","defaultCheckedItems"],"mappings":"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"}

package/lib/components/FlatTree/useFlatTree.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { useRootTree } from '../../hooks/useRootTree';
+export const useFlatTree_unstable = useRootTree;

package/lib/components/FlatTree/useFlatTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = useRootTree;\n"],"names":["React","useRootTree","useFlatTree_unstable"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AAGtD,OAAO,MAAMC,uBAA6FD,YAAY"}

package/lib/components/FlatTree/useFlatTreeContextValues.js

@@ -0,0 +1,2 @@
+import { useTreeContextValues_unstable } from '../../Tree';
+export const useFlatTreeContextValues_unstable = useTreeContextValues_unstable;

package/lib/components/FlatTree/useFlatTreeContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useFlatTreeContextValues.ts"],"sourcesContent":["import { TreeContextValues, useTreeContextValues_unstable } from '../../Tree';\nimport type { FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTreeContextValues_unstable: (state: FlatTreeState) => TreeContextValues =\n  useTreeContextValues_unstable;\n"],"names":["useTreeContextValues_unstable","useFlatTreeContextValues_unstable"],"mappings":"AAAA,SAA4BA,6BAA6B,QAAQ,aAAa;AAG9E,OAAO,MAAMC,oCACXD,8BAA8B"}

package/lib/components/FlatTree/useFlatTreeNavigation.js

@@ -0,0 +1,74 @@
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { useEventCallback } from '@fluentui/react-utilities';
+import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';
+import { treeDataTypes } from '../../utils/tokens';
+import { treeItemFilter } from '../../utils/treeItemFilter';
+import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
+import { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../../utils/getTreeItemValueFromElement';
+export function useFlatTreeNavigation(virtualTree) {
+    const { targetDocument  } = useFluent_unstable();
+    const { rove , initialize  } = useRovingTabIndex(treeItemFilter);
+    function getNextElement(data, walker) {
+        if (!targetDocument) {
+            return null;
+        }
+        switch(data.type){
+            case treeDataTypes.Click:
+                return data.target;
+            case treeDataTypes.TypeAhead:
+                walker.currentElement = data.target;
+                return nextTypeAheadElement(walker, data.event.key);
+            case treeDataTypes.ArrowLeft:
+                return parentElement(virtualTree, data.target, walker);
+            case treeDataTypes.ArrowRight:
+                walker.currentElement = data.target;
+                return firstChild(data.target, walker);
+            case treeDataTypes.End:
+                walker.currentElement = walker.root;
+                return walker.lastChild();
+            case treeDataTypes.Home:
+                walker.currentElement = walker.root;
+                return walker.firstChild();
+            case treeDataTypes.ArrowDown:
+                walker.currentElement = data.target;
+                return walker.nextElement();
+            case treeDataTypes.ArrowUp:
+                walker.currentElement = data.target;
+                return walker.previousElement();
+        }
+    }
+    const navigate = useEventCallback((data, walker)=>{
+        const nextElement = getNextElement(data, walker);
+        if (nextElement) {
+            rove(nextElement);
+        }
+    });
+    return {
+        navigate,
+        initialize
+    };
+}
+function firstChild(target, treeWalker) {
+    const nextElement = treeWalker.nextElement();
+    if (!nextElement) {
+        return null;
+    }
+    const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');
+    const nextElementAriaLevel = nextElement.getAttribute('aria-level');
+    const targetAriaLevel = target.getAttribute('aria-level');
+    if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {
+        return nextElement;
+    }
+    return null;
+}
+function parentElement(virtualTreeItems, target, treeWalker) {
+    const value = getTreeItemValueFromElement(target);
+    if (value === null) {
+        return null;
+    }
+    const virtualTreeItem = virtualTreeItems.get(value);
+    if (virtualTreeItem === null || virtualTreeItem === void 0 ? void 0 : virtualTreeItem.parentValue) {
+        return treeWalker.root.querySelector(`[${dataTreeItemValueAttrName}="${virtualTreeItem.parentValue}"]`);
+    }
+    return null;
+}

package/lib/components/FlatTree/useFlatTreeNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useFlatTreeNavigation.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../../Tree';\nimport { HeadlessTree, HeadlessTreeItemProps } from '../../utils/createHeadlessTree';\nimport { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';\nimport { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../../utils/getTreeItemValueFromElement';\nimport { HTMLElementWalker } from '../../utils/createHTMLElementWalker';\n\nexport function useFlatTreeNavigation<Props extends HeadlessTreeItemProps>(virtualTree: HeadlessTree<Props>) {\n  const { targetDocument } = useFluent_unstable();\n  const { rove, initialize } = useRovingTabIndex(treeItemFilter);\n\n  function getNextElement(data: TreeNavigationData_unstable, walker: HTMLElementWalker) {\n    if (!targetDocument) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walker.currentElement = data.target;\n        return nextTypeAheadElement(walker, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        return parentElement(virtualTree, data.target, walker);\n      case treeDataTypes.ArrowRight:\n        walker.currentElement = data.target;\n        return firstChild(data.target, walker);\n      case treeDataTypes.End:\n        walker.currentElement = walker.root;\n        return walker.lastChild();\n      case treeDataTypes.Home:\n        walker.currentElement = walker.root;\n        return walker.firstChild();\n      case treeDataTypes.ArrowDown:\n        walker.currentElement = data.target;\n        return walker.nextElement();\n      case treeDataTypes.ArrowUp:\n        walker.currentElement = data.target;\n        return walker.previousElement();\n    }\n  }\n  const navigate = useEventCallback((data: TreeNavigationData_unstable, walker: HTMLElementWalker) => {\n    const nextElement = getNextElement(data, walker);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return { navigate, initialize } as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(\n  virtualTreeItems: HeadlessTree<HeadlessTreeItemProps>,\n  target: HTMLElement,\n  treeWalker: HTMLElementWalker,\n) {\n  const value = getTreeItemValueFromElement(target);\n  if (value === null) {\n    return null;\n  }\n  const virtualTreeItem = virtualTreeItems.get(value);\n  if (virtualTreeItem?.parentValue) {\n    return treeWalker.root.querySelector<HTMLElement>(\n      `[${dataTreeItemValueAttrName}=\"${virtualTreeItem.parentValue}\"]`,\n    );\n  }\n  return null;\n}\n"],"names":["useFluent_unstable","useEventCallback","nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","dataTreeItemValueAttrName","getTreeItemValueFromElement","useFlatTreeNavigation","virtualTree","targetDocument","rove","initialize","getNextElement","data","walker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChild","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","virtualTreeItems","value","virtualTreeItem","get","parentValue","querySelector"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,gBAAgB,QAAQ,4BAA4B;AAG7D,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,iBAAiB,QAAQ,kCAAkC;AACpE,SAASC,yBAAyB,EAAEC,2BAA2B,QAAQ,0CAA0C;AAGjH,OAAO,SAASC,sBAA2DC,WAAgC,EAAE;IAC3G,MAAM,EAAEC,eAAc,EAAE,GAAGV;IAC3B,MAAM,EAAEW,KAAI,EAAEC,WAAU,EAAE,GAAGP,kBAAkBD;IAE/C,SAASS,eAAeC,IAAiC,EAAEC,MAAyB,EAAE;QACpF,IAAI,CAACL,gBAAgB;YACnB,OAAO,IAAI;QACb,CAAC;QACD,OAAQI,KAAKE,IAAI;YACf,KAAKb,cAAcc,KAAK;gBACtB,OAAOH,KAAKI,MAAM;YACpB,KAAKf,cAAcgB,SAAS;gBAC1BJ,OAAOK,cAAc,GAAGN,KAAKI,MAAM;gBACnC,OAAOhB,qBAAqBa,QAAQD,KAAKO,KAAK,CAACC,GAAG;YACpD,KAAKnB,cAAcoB,SAAS;gBAC1B,OAAOC,cAAcf,aAAaK,KAAKI,MAAM,EAAEH;YACjD,KAAKZ,cAAcsB,UAAU;gBAC3BV,OAAOK,cAAc,GAAGN,KAAKI,MAAM;gBACnC,OAAOQ,WAAWZ,KAAKI,MAAM,EAAEH;YACjC,KAAKZ,cAAcwB,GAAG;gBACpBZ,OAAOK,cAAc,GAAGL,OAAOa,IAAI;gBACnC,OAAOb,OAAOc,SAAS;YACzB,KAAK1B,cAAc2B,IAAI;gBACrBf,OAAOK,cAAc,GAAGL,OAAOa,IAAI;gBACnC,OAAOb,OAAOW,UAAU;YAC1B,KAAKvB,cAAc4B,SAAS;gBAC1BhB,OAAOK,cAAc,GAAGN,KAAKI,MAAM;gBACnC,OAAOH,OAAOiB,WAAW;YAC3B,KAAK7B,cAAc8B,OAAO;gBACxBlB,OAAOK,cAAc,GAAGN,KAAKI,MAAM;gBACnC,OAAOH,OAAOmB,eAAe;QACjC;IACF;IACA,MAAMC,WAAWlC,iBAAiB,CAACa,MAAmCC,SAA8B;QAClG,MAAMiB,cAAcnB,eAAeC,MAAMC;QACzC,IAAIiB,aAAa;YACfrB,KAAKqB;QACP,CAAC;IACH;IACA,OAAO;QAAEG;QAAUvB;IAAW;AAChC,CAAC;AAED,SAASc,WAAWR,MAAmB,EAAEkB,UAA6B,EAAsB;IAC1F,MAAMJ,cAAcI,WAAWJ,WAAW;IAC1C,IAAI,CAACA,aAAa;QAChB,OAAO,IAAI;IACb,CAAC;IACD,MAAMK,0BAA0BL,YAAYM,YAAY,CAAC;IACzD,MAAMC,uBAAuBP,YAAYM,YAAY,CAAC;IACtD,MAAME,kBAAkBtB,OAAOoB,YAAY,CAAC;IAC5C,IAAID,4BAA4B,OAAOI,OAAOF,0BAA0BE,OAAOD,mBAAmB,GAAG;QACnG,OAAOR;IACT,CAAC;IACD,OAAO,IAAI;AACb;AAEA,SAASR,cACPkB,gBAAqD,EACrDxB,MAAmB,EACnBkB,UAA6B,EAC7B;IACA,MAAMO,QAAQpC,4BAA4BW;IAC1C,IAAIyB,UAAU,IAAI,EAAE;QAClB,OAAO,IAAI;IACb,CAAC;IACD,MAAMC,kBAAkBF,iBAAiBG,GAAG,CAACF;IAC7C,IAAIC,4BAAAA,6BAAAA,KAAAA,IAAAA,gBAAiBE,WAAW,EAAE;QAChC,OAAOV,WAAWR,IAAI,CAACmB,aAAa,CAClC,CAAC,CAAC,EAAEzC,0BAA0B,EAAE,EAAEsC,gBAAgBE,WAAW,CAAC,EAAE,CAAC;IAErE,CAAC;IACD,OAAO,IAAI;AACb"}

package/lib/components/FlatTree/useFlatTreeStyles.styles.js

@@ -0,0 +1,20 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const flatTreeClassNames = {
+  root: 'fui-FlatTree'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Belr9w4: "f1j0q4x9"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}"]
+});
+export const useFlatTreeStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useFlatTreeStyles.styles.js.map

package/lib/components/FlatTree/useFlatTreeStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","flatTreeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","d","useFlatTreeStyles_unstable","state","styles","className"],"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n    root: 'fui-FlatTree'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    }\n});\nexport const useFlatTreeStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMjB,CAAC;AACF,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EAC/C,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACP,IAAI,CAACS,SAAS,GAAGZ,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEQ,MAAM,CAACR,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACS,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/FlatTree/useHeadlessFlatTree.js

@@ -0,0 +1,124 @@
+import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { createHeadlessTree } from '../../utils/createHeadlessTree';
+import { treeDataTypes } from '../../utils/tokens';
+import { useFlatTreeNavigation } from './useFlatTreeNavigation';
+import { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';
+import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
+import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';
+import { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';
+import { treeItemFilter } from '../../utils/treeItemFilter';
+/**
+ * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
+ * in multiple scenarios including virtualization.
+ *
+ * !!A flat tree is an unofficial spec for tree!!
+ *
+ * It should be used on cases where more complex interactions with a Tree is required.
+ * On simple scenarios it is advised to simply use a nested structure instead.
+ *
+ * @param props - a list of tree items
+ * @param options - in case control over the internal openItems is required
+ */ export function useHeadlessFlatTree_unstable(props, options = {}) {
+    const headlessTree = React.useMemo(()=>createHeadlessTree(props), [
+        props
+    ]);
+    const [openItems, setOpenItems] = useControllableOpenItems(options);
+    const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);
+    const { initialize , navigate  } = useFlatTreeNavigation(headlessTree);
+    const walkerRef = React.useRef();
+    const initializeWalker = React.useCallback((root)=>{
+        if (root) {
+            walkerRef.current = createHTMLElementWalker(root, treeItemFilter);
+            initialize(walkerRef.current);
+        }
+    }, [
+        initialize
+    ]);
+    const treeRef = React.useRef(null);
+    const handleOpenChange = useEventCallback((event, data)=>{
+        var _options_onOpenChange;
+        const nextOpenItems = createNextOpenItems(data, openItems);
+        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, {
+            ...data,
+            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()
+        });
+        setOpenItems(nextOpenItems);
+    });
+    const handleCheckedChange = useEventCallback((event, data)=>{
+        var _options_onCheckedChange;
+        const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);
+        (_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, {
+            ...data,
+            checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()
+        });
+        setCheckedItems(nextCheckedItems);
+    });
+    const handleNavigation = useEventCallback((event, data)=>{
+        var _options_onNavigation;
+        (_options_onNavigation = options.onNavigation) === null || _options_onNavigation === void 0 ? void 0 : _options_onNavigation.call(options, event, data);
+        if (walkerRef.current) {
+            navigate(data, walkerRef.current);
+        }
+    });
+    const getNextNavigableItem = useEventCallback((visibleItems, data)=>{
+        const item = headlessTree.get(data.value);
+        if (item) {
+            switch(data.type){
+                case treeDataTypes.TypeAhead:
+                    return item;
+                case treeDataTypes.ArrowLeft:
+                    return headlessTree.get(item.parentValue);
+                case treeDataTypes.ArrowRight:
+                    return visibleItems[item.index + 1];
+                case treeDataTypes.End:
+                    return visibleItems[visibleItems.length - 1];
+                case treeDataTypes.Home:
+                    return visibleItems[0];
+                case treeDataTypes.ArrowDown:
+                    return visibleItems[item.index + 1];
+                case treeDataTypes.ArrowUp:
+                    return visibleItems[item.index - 1];
+            }
+        }
+    });
+    const getElementFromItem = React.useCallback((item)=>{
+        var _treeRef_current;
+        return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}="${item.value}"]`);
+    }, []);
+    const ref = useMergedRefs(treeRef, initializeWalker);
+    const getTreeProps = React.useCallback(()=>({
+            ref,
+            openItems,
+            selectionMode: options.selectionMode,
+            checkedItems,
+            onOpenChange: handleOpenChange,
+            onCheckedChange: handleCheckedChange,
+            onNavigation: handleNavigation
+        }), // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        openItems,
+        checkedItems
+    ]);
+    const items = React.useCallback(()=>headlessTree.visibleItems(openItems), [
+        openItems,
+        headlessTree
+    ]);
+    return React.useMemo(()=>({
+            navigate: (data)=>{
+                if (walkerRef.current) {
+                    navigate(data, walkerRef.current);
+                }
+            },
+            getTreeProps,
+            getNextNavigableItem,
+            getElementFromItem,
+            items
+        }), [
+        navigate,
+        getTreeProps,
+        getNextNavigableItem,
+        getElementFromItem,
+        items
+    ]);
+}

package/lib/components/FlatTree/useHeadlessFlatTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useHeadlessFlatTree.ts"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { HeadlessTreeItem, HeadlessTreeItemProps, createHeadlessTree } from '../../utils/createHeadlessTree';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport type { TreeItemValue } from '../../TreeItem';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';\nimport { FlatTreeProps } from './FlatTree.types';\nimport {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree/Tree.types';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\n\nexport type HeadlessFlatTreeItemProps = HeadlessTreeItemProps;\nexport type HeadlessFlatTreeItem<Props extends HeadlessFlatTreeItemProps> = HeadlessTreeItem<Props>;\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type HeadlessFlatTree<Props extends HeadlessFlatTreeItemProps> = {\n  /**\n   * returns the properties required for the Tree component to work properly.\n   * That includes:\n   * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n   */\n  getTreeProps(): Required<\n    Pick<FlatTreeProps, 'openItems' | 'onOpenChange' | 'onNavigation' | 'checkedItems' | 'onCheckedChange'>\n  > & {\n    ref: React.Ref<HTMLDivElement>;\n    openItems: ImmutableSet<TreeItemValue>;\n  };\n  /**\n   * internal method used to react to an `onNavigation` event.\n   * This method ensures proper navigation on keyboard and mouse interaction.\n   * In case of virtualization it might be required to cancel default provided `onNavigation`\n   * event and then call this method manually.\n   *\n   * @example\n   * ```ts\n   * // react-window\n   * const handleNavigation = (event, data) => {\n   *   event.preventDefault();\n   *   const nextItem = tree.getNextNavigableItem(data);\n   *   // scroll to item using virtualization scroll mechanism\n   *   if (nextItem && tree.getElementFromItem(nextItem)) {\n   *     listRef.current.scrollToItem(nextItem.index);\n   *   }\n   *   // wait for scrolling to happen and then invoke navigate method\n   *   requestAnimationFrame(() => {\n   *     tree.navigate(data);\n   *   });\n   * };\n   *```\n   */\n  navigate(data: TreeNavigationData_unstable): void;\n  /**\n   * returns next item to be focused on a navigation.\n   * This method is provided to decouple the element that needs to be focused from\n   *  the action of focusing it itself.\n   *\n   * On the case of TypeAhead navigation this method returns the current item.\n   */\n  getNextNavigableItem(\n    visibleItems: HeadlessTreeItem<Props>[],\n    data: TreeNavigationData_unstable,\n  ): HeadlessTreeItem<Props> | undefined;\n  /**\n   * similar to getElementById but for FlatTreeItems\n   */\n  getElementFromItem(item: HeadlessTreeItem<Props>): HTMLElement | null;\n  /**\n   * an iterable containing all visually available flat tree items\n   */\n  items(): IterableIterator<HeadlessTreeItem<Props>>;\n};\n\nexport type HeadlessFlatTreeOptions = Pick<\n  FlatTreeProps,\n  'onOpenChange' | 'onNavigation' | 'selectionMode' | 'onCheckedChange'\n> &\n  Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems'> & {\n    defaultCheckedItems?: TreeProps['checkedItems'];\n  };\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param props - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(\n  props: Props[],\n  options: HeadlessFlatTreeOptions = {},\n): HeadlessFlatTree<Props> {\n  const headlessTree = React.useMemo(() => createHeadlessTree(props), [props]);\n  const [openItems, setOpenItems] = useControllableOpenItems(options);\n  const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);\n  const { initialize, navigate } = useFlatTreeNavigation(headlessTree);\n  const walkerRef = React.useRef<HTMLElementWalker>();\n  const initializeWalker = React.useCallback(\n    (root: HTMLElement | null) => {\n      if (root) {\n        walkerRef.current = createHTMLElementWalker(root, treeItemFilter);\n        initialize(walkerRef.current);\n      }\n    },\n    [initialize],\n  );\n\n  const treeRef = React.useRef<HTMLDivElement>(null);\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    options.onOpenChange?.(event, {\n      ...data,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n    setOpenItems(nextOpenItems);\n  });\n\n  const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n    const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);\n    options.onCheckedChange?.(event, {\n      ...data,\n      checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable(),\n    });\n    setCheckedItems(nextCheckedItems);\n  });\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      options.onNavigation?.(event, data);\n      if (walkerRef.current) {\n        navigate(data, walkerRef.current);\n      }\n    },\n  );\n\n  const getNextNavigableItem = useEventCallback(\n    (visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable) => {\n      const item = headlessTree.get(data.value);\n      if (item) {\n        switch (data.type) {\n          case treeDataTypes.TypeAhead:\n            return item;\n          case treeDataTypes.ArrowLeft:\n            return headlessTree.get(item.parentValue!);\n          case treeDataTypes.ArrowRight:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.End:\n            return visibleItems[visibleItems.length - 1];\n          case treeDataTypes.Home:\n            return visibleItems[0];\n          case treeDataTypes.ArrowDown:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.ArrowUp:\n            return visibleItems[item.index - 1];\n        }\n      }\n    },\n  );\n\n  const getElementFromItem = React.useCallback((item: HeadlessTreeItem<Props>) => {\n    return treeRef.current?.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`) as HTMLElement | null;\n  }, []);\n\n  const ref = useMergedRefs<HTMLDivElement>(treeRef, initializeWalker);\n\n  const getTreeProps = React.useCallback(\n    () => ({\n      ref,\n      openItems,\n      selectionMode: options.selectionMode,\n      checkedItems,\n      onOpenChange: handleOpenChange,\n      onCheckedChange: handleCheckedChange,\n      onNavigation: handleNavigation,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [openItems, checkedItems],\n  );\n\n  const items = React.useCallback(() => headlessTree.visibleItems(openItems), [openItems, headlessTree]);\n\n  return React.useMemo<HeadlessFlatTree<Props>>(\n    () => ({\n      navigate: data => {\n        if (walkerRef.current) {\n          navigate(data, walkerRef.current);\n        }\n      },\n      getTreeProps,\n      getNextNavigableItem,\n      getElementFromItem,\n      items,\n    }),\n    [navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items],\n  );\n}\n"],"names":["useEventCallback","useMergedRefs","React","createHeadlessTree","treeDataTypes","useFlatTreeNavigation","createNextOpenItems","useControllableOpenItems","dataTreeItemValueAttrName","createNextFlatCheckedItems","useFlatControllableCheckedItems","createHTMLElementWalker","treeItemFilter","useHeadlessFlatTree_unstable","props","options","headlessTree","useMemo","openItems","setOpenItems","checkedItems","setCheckedItems","initialize","navigate","walkerRef","useRef","initializeWalker","useCallback","root","current","treeRef","handleOpenChange","event","data","nextOpenItems","onOpenChange","dangerouslyGetInternalSet_unstable","handleCheckedChange","nextCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","onNavigation","getNextNavigableItem","visibleItems","item","get","value","type","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","querySelector","ref","getTreeProps","selectionMode","items"],"mappings":"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"}

package/lib/components/Tree/Tree.js

@@ -1,21 +1,15 @@
 import * as React from 'react';
 import { useTree_unstable } from './useTree';
-import { renderTree_unstable } from './renderTree';
-import { useTreeStyles_unstable } from './useTreeStyles';
 import { useTreeContextValues_unstable } from './useTreeContextValues';
+import { useTreeStyles_unstable } from './useTreeStyles.styles';
+import { renderTree_unstable } from './renderTree';
 /**
- * A tree view widget presents a hierarchical list.
- * Any item in the hierarchy may have child items,
- * and items that have children may be expanded or collapsed to show or hide the children.
- * For example, in a file system navigator that uses a tree view to display folders and files,
- * an item representing a folder can be expanded to reveal the contents of the folder,
- * which may be files, folders, or both.
- */
-export const Tree = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useTree_unstable(props, ref);
-  useTreeStyles_unstable(state);
-  const contextValues = useTreeContextValues_unstable(state);
-  return renderTree_unstable(state, contextValues);
+ * The `Tree` component renders nested items in a hierarchical structure.
+ * Use it with `TreeItem` component and layouts components `TreeItemLayout` or `TreeItemPersonaLayout`.
+ */ export const Tree = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTree_unstable(props, ref);
+    const contextValues = useTreeContextValues_unstable(state);
+    useTreeStyles_unstable(state);
+    return renderTree_unstable(state, contextValues);
 });
 Tree.displayName = 'Tree';
-//# sourceMappingURL=Tree.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useTree_unstable","renderTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTree_unstable } from './useTree';\nimport { renderTree_unstable } from './renderTree';\nimport { useTreeStyles_unstable } from './useTreeStyles';\nimport type { TreeProps } from './Tree.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeContextValues_unstable } from './useTreeContextValues';\n\n/**\n * A tree view widget presents a hierarchical list.\n * Any item in the hierarchy may have child items,\n * and items that have children may be expanded or collapsed to show or hide the children.\n * For example, in a file system navigator that uses a tree view to display folders and files,\n * an item representing a folder can be expanded to reveal the contents of the folder,\n * which may be files, folders, or both.\n */\nexport const Tree: ForwardRefComponent<TreeProps> = React.forwardRef((props, ref) => {\n  const state = useTree_unstable(props, ref);\n  useTreeStyles_unstable(state);\n  const contextValues = useTreeContextValues_unstable(state);\n  return renderTree_unstable(state, contextValues);\n});\n\nTree.displayName = 'Tree';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,mBAAmB,QAAQ;AACpC,SAASC,sBAAsB,QAAQ;AAGvC,SAASC,6BAA6B,QAAQ;AAE9C;;;;;;;;AAQA,OAAO,MAAMC,IAAA,gBAAuCL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACnF,MAAMC,KAAA,GAAQR,gBAAA,CAAiBM,KAAA,EAAOC,GAAA;EACtCL,sBAAA,CAAuBM,KAAA;EACvB,MAAMC,aAAA,GAAgBN,6BAAA,CAA8BK,KAAA;EACpD,OAAOP,mBAAA,CAAoBO,KAAA,EAAOC,aAAA;AACpC;AAEAL,IAAA,CAAKM,WAAW,GAAG"}
+{"version":3,"sources":["Tree.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTree_unstable } from './useTree';\nimport type { TreeProps } from './Tree.types';\nimport { useTreeContextValues_unstable } from './useTreeContextValues';\nimport { useTreeStyles_unstable } from './useTreeStyles.styles';\nimport { renderTree_unstable } from './renderTree';\n\n/**\n * The `Tree` component renders nested items in a hierarchical structure.\n * Use it with `TreeItem` component and layouts components `TreeItemLayout` or `TreeItemPersonaLayout`.\n */\nexport const Tree: ForwardRefComponent<TreeProps> = React.forwardRef((props, ref) => {\n  const state = useTree_unstable(props, ref);\n  const contextValues = useTreeContextValues_unstable(state);\n  useTreeStyles_unstable(state);\n  return renderTree_unstable(state, contextValues);\n});\n\nTree.displayName = 'Tree';\n"],"names":["React","useTree_unstable","useTreeContextValues_unstable","useTreeStyles_unstable","renderTree_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,sBAAsB,QAAQ,yBAAyB;AAChE,SAASC,mBAAmB,QAAQ,eAAe;AAEnD;;;CAGC,GACD,OAAO,MAAMC,qBAAuCL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnF,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtC,MAAME,gBAAgBR,8BAA8BO;IACpDN,uBAAuBM;IACvB,OAAOL,oBAAoBK,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

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

@@ -1,2 +1 @@
-import * as React from 'react';
-//# sourceMappingURL=Tree.types.js.map
+export { };

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

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

package/lib/components/Tree/index.js

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

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

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

package/lib/components/Tree/renderTree.js

@@ -1,13 +1,9 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { assertSlots } from '@fluentui/react-utilities';
 import { TreeProvider } from '../../contexts';
-export const renderTree_unstable = (state, contextValues) => {
-  const {
-    slots,
-    slotProps
-  } = getSlots(state);
-  return /*#__PURE__*/React.createElement(TreeProvider, {
-    value: contextValues.tree
-  }, /*#__PURE__*/React.createElement(slots.root, slotProps.root, slotProps.root.children));
+export const renderTree_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(TreeProvider, {
+        value: contextValues.tree
+    }, state.open && /*#__PURE__*/ createElement(state.root, null, state.root.children));
 };
-//# sourceMappingURL=renderTree.js.map