@fluentui/react-tree 9.7.6 → 9.7.8

package/lib-commonjs/components/FlatTree/useFlatControllableCheckedItems.js

@@ -33,7 +33,7 @@ function useFlatControllableCheckedItems(props, headlessTree) {
 }
 function createNextFlatCheckedItems(data, previousCheckedItems, headlessTree) {
     if (data.selectionMode === 'single') {
-        return _ImmutableMap.ImmutableMap.create([
+        return _ImmutableMap.ImmutableMap.from([
             [
                 data.value,
                 data.checked
@@ -49,40 +49,42 @@ Tree item ${data.value} not found.`);
         }
         return previousCheckedItems;
     }
-    const nextCheckedItems = new Map(previousCheckedItems);
+    let nextCheckedItems = previousCheckedItems;
     for (const children of headlessTree.subtree(data.value)){
-        nextCheckedItems.set(children.value, data.checked);
+        nextCheckedItems = nextCheckedItems.set(children.value, data.checked);
     }
-    nextCheckedItems.set(data.value, data.checked);
+    nextCheckedItems = 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');
+            nextCheckedItems = nextCheckedItems.set(parent.value, 'mixed');
             continue;
         }
-        const checkedChildren = [];
+        let checkedChildrenAmount = 0;
         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 ((nextCheckedItems.get(child.value) || false) === data.checked) {
+                checkedChildrenAmount++;
             }
         }
-        if (checkedChildren.length === parent.childrenValues.length) {
-            nextCheckedItems.set(parent.value, data.checked);
+        // if all children are checked, parent is checked
+        if (checkedChildrenAmount === parent.childrenValues.length) {
+            nextCheckedItems = nextCheckedItems.set(parent.value, data.checked);
         } else {
             // if one parent is mixed, all ancestors are mixed
             isAncestorsMixed = true;
-            nextCheckedItems.set(parent.value, 'mixed');
+            nextCheckedItems = nextCheckedItems.set(parent.value, 'mixed');
         }
     }
-    return _ImmutableMap.ImmutableMap.dangerouslyCreate_unstable(nextCheckedItems);
+    return nextCheckedItems;
 }
 function initializeCheckedItems(props, headlessTree) {
     if (!props.selectionMode) {
         return _ImmutableMap.ImmutableMap.empty;
     }
     let state = (0, _createCheckedItems.createCheckedItems)(props.defaultCheckedItems);
+    // if selectionMode is multiselect, we need to calculate the checked state of all children
+    // and ancestors of the defaultCheckedItems
     if (props.selectionMode === 'multiselect') {
         for (const [value, checked] of state){
             state = createNextFlatCheckedItems({

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

@@ -1 +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: props.defaultCheckedItems ? () => initializeCheckedItems(props, headlessTree) : undefined,\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(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useHeadlessFlatTree]:\n        Tree item ${data.value} not found.\n      `);\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":["createNextFlatCheckedItems","useFlatControllableCheckedItems","props","headlessTree","useControllableState","initialState","ImmutableMap","empty","state","React","useMemo","selectionMode","checkedItems","createCheckedItems","undefined","defaultState","defaultCheckedItems","initializeCheckedItems","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"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: props.defaultCheckedItems ? () => initializeCheckedItems(props, headlessTree) : undefined,\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.from([[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(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useHeadlessFlatTree]:\n        Tree item ${data.value} not found.\n      `);\n    }\n    return previousCheckedItems;\n  }\n  let nextCheckedItems = previousCheckedItems;\n  for (const children of headlessTree.subtree(data.value)) {\n    nextCheckedItems = nextCheckedItems.set(children.value, data.checked);\n  }\n  nextCheckedItems = 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 = nextCheckedItems.set(parent.value, 'mixed');\n      continue;\n    }\n    let checkedChildrenAmount = 0;\n    for (const child of headlessTree.children(parent.value)) {\n      if ((nextCheckedItems.get(child.value) || false) === data.checked) {\n        checkedChildrenAmount++;\n      }\n    }\n    // if all children are checked, parent is checked\n    if (checkedChildrenAmount === parent.childrenValues.length) {\n      nextCheckedItems = nextCheckedItems.set(parent.value, data.checked);\n    } else {\n      // if one parent is mixed, all ancestors are mixed\n      isAncestorsMixed = true;\n      nextCheckedItems = nextCheckedItems.set(parent.value, 'mixed');\n    }\n  }\n  return 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 selectionMode is multiselect, we need to calculate the checked state of all children\n  // and ancestors of the 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":["createNextFlatCheckedItems","useFlatControllableCheckedItems","props","headlessTree","useControllableState","initialState","ImmutableMap","empty","state","React","useMemo","selectionMode","checkedItems","createCheckedItems","undefined","defaultState","defaultCheckedItems","initializeCheckedItems","data","previousCheckedItems","from","value","checked","treeItem","get","process","env","NODE_ENV","console","error","nextCheckedItems","children","subtree","set","isAncestorsMixed","parent","ancestors","checkedChildrenAmount","child","childrenValues","length"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAuBgBA,0BAAAA;eAAAA;;IAdAC,+BAAAA;eAAAA;;;;gCATqB;8BAER;iEACN;oCAEY;AAI5B,SAASA,gCACdC,KAA8F,EAC9FC,YAAiC;IAEjC,OAAOC,IAAAA,oCAAAA,EAAqB;QAC1BC,cAAcC,0BAAAA,CAAaC,KAAK;QAChCC,OAAOC,OAAMC,OAAO,CAClB,IAAOR,MAAMS,aAAa,GAAGT,MAAMU,YAAY,IAAIC,IAAAA,sCAAAA,EAAmBX,MAAMU,YAAY,IAAIE,WAC5F;YAACZ,MAAMU,YAAY;YAAEV,MAAMS,aAAa;SAAC;QAE3CI,cAAcb,MAAMc,mBAAmB,GAAG,IAAMC,uBAAuBf,OAAOC,gBAAgBW;IAChG;AACF;AAEO,SAASd,2BACdkB,IAAwE,EACxEC,oBAAoE,EACpEhB,YAAiD;IAEjD,IAAIe,KAAKP,aAAa,KAAK,UAAU;QACnC,OAAOL,0BAAAA,CAAac,IAAI,CAAC;YAAC;gBAACF,KAAKG,KAAK;gBAAEH,KAAKI,OAAO;aAAC;SAAC;IACvD;IACA,MAAMC,WAAWpB,aAAaqB,GAAG,CAACN,KAAKG,KAAK;IAC5C,IAAI,CAACE,UAAU;QACb,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,sCAAsC;YACtCC,QAAQC,KAAK,CAAsB,CAAC;UAExB,EAAEX,KAAKG,KAAK,CAAC,WACzB,CAAC;QACH;QACA,OAAOF;IACT;IACA,IAAIW,mBAAmBX;IACvB,KAAK,MAAMY,YAAY5B,aAAa6B,OAAO,CAACd,KAAKG,KAAK,EAAG;QACvDS,mBAAmBA,iBAAiBG,GAAG,CAACF,SAASV,KAAK,EAAEH,KAAKI,OAAO;IACtE;IACAQ,mBAAmBA,iBAAiBG,GAAG,CAACf,KAAKG,KAAK,EAAEH,KAAKI,OAAO;IAEhE,IAAIY,mBAAmB;IACvB,KAAK,MAAMC,UAAUhC,aAAaiC,SAAS,CAACb,SAASF,KAAK,EAAG;QAC3D,kDAAkD;QAClD,IAAIa,kBAAkB;YACpBJ,mBAAmBA,iBAAiBG,GAAG,CAACE,OAAOd,KAAK,EAAE;YACtD;QACF;QACA,IAAIgB,wBAAwB;QAC5B,KAAK,MAAMC,SAASnC,aAAa4B,QAAQ,CAACI,OAAOd,KAAK,EAAG;YACvD,IAAI,AAACS,CAAAA,iBAAiBN,GAAG,CAACc,MAAMjB,KAAK,KAAK,KAAA,MAAWH,KAAKI,OAAO,EAAE;gBACjEe;YACF;QACF;QACA,iDAAiD;QACjD,IAAIA,0BAA0BF,OAAOI,cAAc,CAACC,MAAM,EAAE;YAC1DV,mBAAmBA,iBAAiBG,GAAG,CAACE,OAAOd,KAAK,EAAEH,KAAKI,OAAO;QACpE,OAAO;YACL,kDAAkD;YAClDY,mBAAmB;YACnBJ,mBAAmBA,iBAAiBG,GAAG,CAACE,OAAOd,KAAK,EAAE;QACxD;IACF;IACA,OAAOS;AACT;AAEA,SAASb,uBACPf,KAA6E,EAC7EC,YAAiD;IAEjD,IAAI,CAACD,MAAMS,aAAa,EAAE;QACxB,OAAOL,0BAAAA,CAAaC,KAAK;IAC3B;IACA,IAAIC,QAAQK,IAAAA,sCAAAA,EAAmBX,MAAMc,mBAAmB;IACxD,0FAA0F;IAC1F,2CAA2C;IAC3C,IAAId,MAAMS,aAAa,KAAK,eAAe;QACzC,KAAK,MAAM,CAACU,OAAOC,QAAQ,IAAId,MAAO;YACpCA,QAAQR,2BAA2B;gBAAEqB;gBAAOC;gBAASX,eAAeT,MAAMS,aAAa;YAAC,GAAGH,OAAOL;QACpG;IACF;IACA,OAAOK;AACT"}

package/lib-commonjs/components/FlatTree/useHeadlessFlatTree.js

@@ -16,7 +16,9 @@ const _tokens = require("../../utils/tokens");
 const _useFlatTreeNavigation = require("../../hooks/useFlatTreeNavigation");
 const _useControllableOpenItems = require("../../hooks/useControllableOpenItems");
 const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromElement");
+const _ImmutableSet = require("../../utils/ImmutableSet");
 const _useFlatControllableCheckedItems = require("./useFlatControllableCheckedItems");
+const _ImmutableMap = require("../../utils/ImmutableMap");
 function useHeadlessFlatTree_unstable(props, options = {}) {
     'use no memo';
     const headlessTree = _react.useMemo(()=>(0, _createHeadlessTree.createHeadlessTree)(props), [
@@ -31,7 +33,7 @@ function useHeadlessFlatTree_unstable(props, options = {}) {
         const nextOpenItems = (0, _useControllableOpenItems.createNextOpenItems)(data, openItems);
         (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, {
             ...data,
-            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()
+            openItems: _ImmutableSet.ImmutableSet.dangerouslyGetInternalSet(nextOpenItems)
         });
         setOpenItems(nextOpenItems);
     });
@@ -40,7 +42,7 @@ function useHeadlessFlatTree_unstable(props, options = {}) {
         const nextCheckedItems = (0, _useFlatControllableCheckedItems.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()
+            checkedItems: _ImmutableMap.ImmutableMap.dangerouslyGetInternalMap(nextCheckedItems)
         });
         setCheckedItems(nextCheckedItems);
     });

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

@@ -1 +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 '../../hooks/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  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree/Tree.types';\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 * @internal\n */\ntype HeadlessFlatTreeReturn<Props extends HeadlessFlatTreeItemProps> = HeadlessFlatTree<Props> & {\n  getItem(value: TreeItemValue): HeadlessTreeItem<Props> | undefined;\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): HeadlessFlatTreeReturn<Props> {\n  'use no memo';\n\n  const headlessTree = React.useMemo(() => createHeadlessTree(props), [props]);\n  const [openItems, setOpenItems] = useControllableOpenItems(options);\n  const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);\n  const navigation = useFlatTreeNavigation();\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 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, navigation.rootRef);\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: options.onNavigation ?? noop,\n    }),\n    // ref, handleOpenChange - useEventCallback, handleCheckedChange - useEventCallback\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [openItems, checkedItems, options.selectionMode, options.onNavigation],\n  );\n\n  const items = React.useCallback(() => headlessTree.visibleItems(openItems), [openItems, headlessTree]);\n\n  const getItem = React.useCallback((value: TreeItemValue) => headlessTree.get(value), [headlessTree]);\n\n  return React.useMemo<HeadlessFlatTreeReturn<Props>>(\n    () => ({\n      navigate: navigation.navigate,\n      getTreeProps,\n      getNextNavigableItem,\n      getElementFromItem,\n      items,\n      getItem,\n    }),\n    [navigation.navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items, getItem],\n  );\n}\n\n/** @internal */\nfunction noop() {\n  /* noop */\n}\n"],"names":["useHeadlessFlatTree_unstable","props","options","headlessTree","React","useMemo","createHeadlessTree","openItems","setOpenItems","useControllableOpenItems","checkedItems","setCheckedItems","useFlatControllableCheckedItems","navigation","useFlatTreeNavigation","treeRef","useRef","handleOpenChange","useEventCallback","event","data","nextOpenItems","createNextOpenItems","onOpenChange","dangerouslyGetInternalSet_unstable","handleCheckedChange","nextCheckedItems","createNextFlatCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","getNextNavigableItem","visibleItems","item","get","value","type","treeDataTypes","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","useCallback","current","querySelector","dataTreeItemValueAttrName","ref","useMergedRefs","rootRef","getTreeProps","selectionMode","onNavigation","noop","items","getItem","navigate"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"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 '../../hooks/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  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree/Tree.types';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\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 * @internal\n */\ntype HeadlessFlatTreeReturn<Props extends HeadlessFlatTreeItemProps> = HeadlessFlatTree<Props> & {\n  getItem(value: TreeItemValue): HeadlessTreeItem<Props> | undefined;\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): HeadlessFlatTreeReturn<Props> {\n  'use no memo';\n\n  const headlessTree = React.useMemo(() => createHeadlessTree(props), [props]);\n  const [openItems, setOpenItems] = useControllableOpenItems(options);\n  const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);\n  const navigation = useFlatTreeNavigation();\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: ImmutableSet.dangerouslyGetInternalSet(nextOpenItems),\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: ImmutableMap.dangerouslyGetInternalMap(nextCheckedItems),\n    });\n    setCheckedItems(nextCheckedItems);\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, navigation.rootRef);\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: options.onNavigation ?? noop,\n    }),\n    // ref, handleOpenChange - useEventCallback, handleCheckedChange - useEventCallback\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [openItems, checkedItems, options.selectionMode, options.onNavigation],\n  );\n\n  const items = React.useCallback(() => headlessTree.visibleItems(openItems), [openItems, headlessTree]);\n\n  const getItem = React.useCallback((value: TreeItemValue) => headlessTree.get(value), [headlessTree]);\n\n  return React.useMemo<HeadlessFlatTreeReturn<Props>>(\n    () => ({\n      navigate: navigation.navigate,\n      getTreeProps,\n      getNextNavigableItem,\n      getElementFromItem,\n      items,\n      getItem,\n    }),\n    [navigation.navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items, getItem],\n  );\n}\n\n/** @internal */\nfunction noop() {\n  /* noop */\n}\n"],"names":["useHeadlessFlatTree_unstable","props","options","headlessTree","React","useMemo","createHeadlessTree","openItems","setOpenItems","useControllableOpenItems","checkedItems","setCheckedItems","useFlatControllableCheckedItems","navigation","useFlatTreeNavigation","treeRef","useRef","handleOpenChange","useEventCallback","event","data","nextOpenItems","createNextOpenItems","onOpenChange","ImmutableSet","dangerouslyGetInternalSet","handleCheckedChange","nextCheckedItems","createNextFlatCheckedItems","onCheckedChange","ImmutableMap","dangerouslyGetInternalMap","getNextNavigableItem","visibleItems","item","get","value","type","treeDataTypes","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","useCallback","current","querySelector","dataTreeItemValueAttrName","ref","useMergedRefs","rootRef","getTreeProps","selectionMode","onNavigation","noop","items","getItem","navigate"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/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\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":[],"rangeMappings":";;","mappings":"AAmKA;;CAEC"}
+{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\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  collapseMotion?: Slot<PresenceMotionSlotProps>;\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":[],"rangeMappings":";;","mappings":"AAqKA;;CAEC"}

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

@@ -15,8 +15,8 @@ const renderTree_unstable = (state, contextValues)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TreeProvider.TreeProvider, {
         value: contextValues.tree,
-        children: state.open && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
-            children: state.root.children
-        })
+        children: state.collapseMotion ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.collapseMotion, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTree.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TreeContextValues, TreeSlots, TreeState } from '../Tree/Tree.types';\nimport { TreeProvider } from '../TreeProvider';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {\n  assertSlots<TreeSlots>(state);\n  return (\n    <TreeProvider value={contextValues.tree}>\n      {state.open && <state.root>{state.root.children}</state.root>}\n    </TreeProvider>\n  );\n};\n"],"names":["renderTree_unstable","state","contextValues","assertSlots","_jsx","TreeProvider","value","tree","open","root","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BALb;gCAC4B;8BAEC;AAEtB,MAAMA,sBAAsB,CAACC,OAAkBC;IACpDC,IAAAA,2BAAAA,EAAuBF;IACvB,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,0BAAAA,EAAAA;QAAaC,OAAOJ,cAAcK,IAAI;kBACpCN,MAAMO,IAAI,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACH,MAAMQ,IAAI,EAAA;sBAAER,MAAMQ,IAAI,CAACC,QAAQ;;;AAGrD"}
+{"version":3,"sources":["renderTree.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TreeContextValues, TreeSlots, TreeState } from '../Tree/Tree.types';\nimport { TreeProvider } from '../TreeProvider';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {\n  assertSlots<TreeSlots>(state);\n  return (\n    <TreeProvider value={contextValues.tree}>\n      {state.collapseMotion ? (\n        <state.collapseMotion>\n          <state.root />\n        </state.collapseMotion>\n      ) : (\n        <state.root />\n      )}\n    </TreeProvider>\n  );\n};\n"],"names":["renderTree_unstable","state","contextValues","assertSlots","_jsx","TreeProvider","value","tree","collapseMotion","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BALb;gCAC4B;8BAEC;AAEtB,MAAMA,sBAAsB,CAACC,OAAkBC;IACpDC,IAAAA,2BAAAA,EAAuBF;IACvB,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,0BAAAA,EAAAA;QAAaC,OAAOJ,cAAcK,IAAI;kBACpCN,MAAMO,cAAc,GAAA,WAAA,GACnBJ,IAAAA,eAAA,EAACH,MAAMO,cAAc,EAAA;sBACnB,WAAA,GAAAJ,IAAAA,eAAA,EAACH,MAAMQ,IAAI,EAAA,CAAA;2BAGbL,IAAAA,eAAA,EAACH,MAAMQ,IAAI,EAAA,CAAA;;AAInB"}

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

@@ -27,7 +27,7 @@ function useNestedCheckedItems(props) {
 }
 function createNextNestedCheckedItems(data, previousCheckedItems) {
     if (data.selectionMode === 'single') {
-        return _ImmutableMap.ImmutableMap.create([
+        return _ImmutableMap.ImmutableMap.from([
             [
                 data.value,
                 data.checked

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

@@ -1 +1 @@
-{"version":3,"sources":["useNestedControllableCheckedItems.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeCheckedChangeData, TreeProps } from './Tree.types';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { createCheckedItems } from '../../utils/createCheckedItems';\nimport { TreeItemValue } from '../TreeItem/TreeItem.types';\n\nexport function useNestedCheckedItems(props: Pick<TreeProps, 'checkedItems'>) {\n  return React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n}\n\nexport function createNextNestedCheckedItems(\n  data: Pick<TreeCheckedChangeData, 'selectionMode' | 'value' | 'checked'>,\n  previousCheckedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>,\n): ImmutableMap<TreeItemValue, 'mixed' | boolean> {\n  if (data.selectionMode === 'single') {\n    return ImmutableMap.create([[data.value, data.checked]]);\n  }\n  if (data.selectionMode === 'multiselect') {\n    return previousCheckedItems.set(data.value, data.checked);\n  }\n  return previousCheckedItems;\n}\n"],"names":["createNextNestedCheckedItems","useNestedCheckedItems","props","React","useMemo","createCheckedItems","checkedItems","data","previousCheckedItems","selectionMode","ImmutableMap","create","value","checked","set"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUgBA,4BAAAA;eAAAA;;IAJAC,qBAAAA;eAAAA;;;;iEANO;8BAEM;oCACM;AAG5B,SAASA,sBAAsBC,KAAsC;IAC1E,OAAOC,OAAMC,OAAO,CAAC,IAAMC,IAAAA,sCAAAA,EAAmBH,MAAMI,YAAY,GAAG;QAACJ,MAAMI,YAAY;KAAC;AACzF;AAEO,SAASN,6BACdO,IAAwE,EACxEC,oBAAoE;IAEpE,IAAID,KAAKE,aAAa,KAAK,UAAU;QACnC,OAAOC,0BAAAA,CAAaC,MAAM,CAAC;YAAC;gBAACJ,KAAKK,KAAK;gBAAEL,KAAKM,OAAO;aAAC;SAAC;IACzD;IACA,IAAIN,KAAKE,aAAa,KAAK,eAAe;QACxC,OAAOD,qBAAqBM,GAAG,CAACP,KAAKK,KAAK,EAAEL,KAAKM,OAAO;IAC1D;IACA,OAAOL;AACT"}
+{"version":3,"sources":["useNestedControllableCheckedItems.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeCheckedChangeData, TreeProps } from './Tree.types';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { createCheckedItems } from '../../utils/createCheckedItems';\nimport { TreeItemValue } from '../TreeItem/TreeItem.types';\n\nexport function useNestedCheckedItems(props: Pick<TreeProps, 'checkedItems'>) {\n  return React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n}\n\nexport function createNextNestedCheckedItems(\n  data: Pick<TreeCheckedChangeData, 'selectionMode' | 'value' | 'checked'>,\n  previousCheckedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>,\n): ImmutableMap<TreeItemValue, 'mixed' | boolean> {\n  if (data.selectionMode === 'single') {\n    return ImmutableMap.from([[data.value, data.checked]]);\n  }\n  if (data.selectionMode === 'multiselect') {\n    return previousCheckedItems.set(data.value, data.checked);\n  }\n  return previousCheckedItems;\n}\n"],"names":["createNextNestedCheckedItems","useNestedCheckedItems","props","React","useMemo","createCheckedItems","checkedItems","data","previousCheckedItems","selectionMode","ImmutableMap","from","value","checked","set"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUgBA,4BAAAA;eAAAA;;IAJAC,qBAAAA;eAAAA;;;;iEANO;8BAEM;oCACM;AAG5B,SAASA,sBAAsBC,KAAsC;IAC1E,OAAOC,OAAMC,OAAO,CAAC,IAAMC,IAAAA,sCAAAA,EAAmBH,MAAMI,YAAY,GAAG;QAACJ,MAAMI,YAAY;KAAC;AACzF;AAEO,SAASN,6BACdO,IAAwE,EACxEC,oBAAoE;IAEpE,IAAID,KAAKE,aAAa,KAAK,UAAU;QACnC,OAAOC,0BAAAA,CAAaC,IAAI,CAAC;YAAC;gBAACJ,KAAKK,KAAK;gBAAEL,KAAKM,OAAO;aAAC;SAAC;IACvD;IACA,IAAIN,KAAKE,aAAa,KAAK,eAAe;QACxC,OAAOD,qBAAqBM,GAAG,CAACP,KAAKK,KAAK,EAAEL,KAAKM,OAAO;IAC1D;IACA,OAAOL;AACT"}

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

@@ -18,6 +18,8 @@ const _useRootTree = require("../../hooks/useRootTree");
 const _useSubtree = require("../../hooks/useSubtree");
 const _useTreeNavigation = require("../../hooks/useTreeNavigation");
 const _treeContext = require("../../contexts/treeContext");
+const _ImmutableSet = require("../../utils/ImmutableSet");
+const _ImmutableMap = require("../../utils/ImmutableMap");
 const useTree_unstable = (props, ref)=>{
     'use no memo';
     const isRoot = _react.useContext(_subtreeContext.SubtreeContext) === undefined;
@@ -40,7 +42,7 @@ function useNestedRootTree(props, ref) {
             const nextOpenItems = (0, _useControllableOpenItems.createNextOpenItems)(data, openItems);
             (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {
                 ...data,
-                openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()
+                openItems: _ImmutableSet.ImmutableSet.dangerouslyGetInternalSet(nextOpenItems)
             });
             setOpenItems(nextOpenItems);
         }),
@@ -58,7 +60,7 @@ function useNestedRootTree(props, ref) {
             const nextCheckedItems = (0, _useNestedControllableCheckedItems.createNextNestedCheckedItems)(data, checkedItems);
             (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {
                 ...data,
-                checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()
+                checkedItems: _ImmutableMap.ImmutableMap.dangerouslyGetInternalMap(nextCheckedItems)
             });
         })
     }, (0, _reactutilities.useMergedRefs)(ref, navigation.treeRef)), {

package/lib-commonjs/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  'use no memo';\n\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  'use no memo';\n\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  'use no memo';\n\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":["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","nextOpenItems","createNextOpenItems","dangerouslyGetInternalSet_unstable","onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","dangerouslyGetInternalMap_unstable","useMergedRefs","treeRef","treeType","process","env","NODE_ENV","useTreeContext_unstable","ctx","Error","useSubtree"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;gCACyB;0CAEc;mDACM;gCACrC;6BACH;4BACD;mCACO;6BACM;AAEjC,MAAMA,mBAAmB,CAACC,OAAkBC;IACjD;IAEA,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAAA,MAAoBC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,kBAAkBP,OAAOC,OAAOO,iBAAiBR,OAAOC;AAC1E;AAEA,SAASM,kBAAkBP,KAAgB,EAAEC,GAA2B;IACtE;IAEA,MAAM,CAACQ,WAAWC,aAAa,GAAGC,IAAAA,kDAAAA,EAAyBX;IAC3D,MAAMY,eAAeC,IAAAA,wDAAAA,EAAsBb;IAC3C,MAAMc,aAAaC,IAAAA,oCAAAA;IAEnB,OAAOC,OAAOC,MAAM,CAClBC,IAAAA,wBAAAA,EACE;QACE,GAAGlB,KAAK;QACRS;QACAG;QACAO,cAAcC,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBAErCtB;YADA,MAAMuB,gBAAgBC,IAAAA,6CAAAA,EAAoBF,MAAMb;YAChDT,CAAAA,sBAAAA,MAAMmB,YAAY,AAAZA,MAAY,QAAlBnB,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBqB,OAAO;gBAC1B,GAAGC,IAAI;gBACPb,WAAWc,cAAcE,kCAAkC;YAC7D;YACAf,aAAaa;QACf;QACAG,cAAcN,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBACrCtB;YAAAA,CAAAA,sBAAAA,MAAM0B,YAAY,AAAZA,MAAY,QAAlB1B,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBqB,OAAOC;YAC5B,IAAI,CAACD,MAAMM,kBAAkB,IAAI;gBAC/Bb,WAAWc,QAAQ,CAACN,MAAM;oBACxBO,eAAeP,KAAKQ,iBAAiB;gBACvC;YACF;QACF;QACAC,iBAAiBX,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBAExCtB;YADA,MAAMgC,mBAAmBC,IAAAA,+DAAAA,EAA6BX,MAAMV;YAC5DZ,CAAAA,yBAAAA,MAAM+B,eAAe,AAAfA,MAAe,QAArB/B,2BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,uBAAAA,IAAAA,CAAAA,OAAwBqB,OAAO;gBAC7B,GAAGC,IAAI;gBACPV,cAAcoB,iBAAiBE,kCAAkC;YACnE;QACF;IACF,GACAC,IAAAA,6BAAAA,EAAclC,KAAKa,WAAWsB,OAAO,IAEvC;QAAEC,UAAU;IAAS;AAEzB;AAEA,SAAS7B,iBAAiBR,KAAgB,EAAEC,GAA2B;IACrE;IAEA,IAAIqC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,qEAAqE;QACrE,sDAAsD;QACtD,MAAMH,WAAWI,IAAAA,oCAAAA,EAAwBC,CAAAA,MAAOA,IAAIL,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACvB,MAAM,IAAIM,MAA2B,CAAC;;mEAItC,CAAC;QACH;IACF;IACA,OAAOC,IAAAA,sBAAAA,EAAW5C,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';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  'use no memo';\n\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  'use no memo';\n\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: ImmutableSet.dangerouslyGetInternalSet(nextOpenItems),\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: ImmutableMap.dangerouslyGetInternalMap(nextCheckedItems),\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  'use no memo';\n\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":["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","nextOpenItems","createNextOpenItems","ImmutableSet","dangerouslyGetInternalSet","onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","ImmutableMap","dangerouslyGetInternalMap","useMergedRefs","treeRef","treeType","process","env","NODE_ENV","useTreeContext_unstable","ctx","Error","useSubtree"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;gCACyB;0CAEc;mDACM;gCACrC;6BACH;4BACD;mCACO;6BACM;8BACX;8BACA;AAEtB,MAAMA,mBAAmB,CAACC,OAAkBC;IACjD;IAEA,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAAA,MAAoBC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,kBAAkBP,OAAOC,OAAOO,iBAAiBR,OAAOC;AAC1E;AAEA,SAASM,kBAAkBP,KAAgB,EAAEC,GAA2B;IACtE;IAEA,MAAM,CAACQ,WAAWC,aAAa,GAAGC,IAAAA,kDAAAA,EAAyBX;IAC3D,MAAMY,eAAeC,IAAAA,wDAAAA,EAAsBb;IAC3C,MAAMc,aAAaC,IAAAA,oCAAAA;IAEnB,OAAOC,OAAOC,MAAM,CAClBC,IAAAA,wBAAAA,EACE;QACE,GAAGlB,KAAK;QACRS;QACAG;QACAO,cAAcC,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBAErCtB;YADA,MAAMuB,gBAAgBC,IAAAA,6CAAAA,EAAoBF,MAAMb;YAChDT,CAAAA,sBAAAA,MAAMmB,YAAY,AAAZA,MAAY,QAAlBnB,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBqB,OAAO;gBAC1B,GAAGC,IAAI;gBACPb,WAAWgB,0BAAAA,CAAaC,yBAAyB,CAACH;YACpD;YACAb,aAAaa;QACf;QACAI,cAAcP,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBACrCtB;YAAAA,CAAAA,sBAAAA,MAAM2B,YAAY,AAAZA,MAAY,QAAlB3B,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBqB,OAAOC;YAC5B,IAAI,CAACD,MAAMO,kBAAkB,IAAI;gBAC/Bd,WAAWe,QAAQ,CAACP,MAAM;oBACxBQ,eAAeR,KAAKS,iBAAiB;gBACvC;YACF;QACF;QACAC,iBAAiBZ,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBAExCtB;YADA,MAAMiC,mBAAmBC,IAAAA,+DAAAA,EAA6BZ,MAAMV;YAC5DZ,CAAAA,yBAAAA,MAAMgC,eAAe,AAAfA,MAAe,QAArBhC,2BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,uBAAAA,IAAAA,CAAAA,OAAwBqB,OAAO;gBAC7B,GAAGC,IAAI;gBACPV,cAAcuB,0BAAAA,CAAaC,yBAAyB,CAACH;YACvD;QACF;IACF,GACAI,IAAAA,6BAAAA,EAAcpC,KAAKa,WAAWwB,OAAO,IAEvC;QAAEC,UAAU;IAAS;AAEzB;AAEA,SAAS/B,iBAAiBR,KAAgB,EAAEC,GAA2B;IACrE;IAEA,IAAIuC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,qEAAqE;QACrE,sDAAsD;QACtD,MAAMH,WAAWI,IAAAA,oCAAAA,EAAwBC,CAAAA,MAAOA,IAAIL,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACvB,MAAM,IAAIM,MAA2B,CAAC;;mEAItC,CAAC;QACH;IACF;IACA,OAAOC,IAAAA,sBAAAA,EAAW9C,OAAOC;AAC3B"}

package/lib-commonjs/components/TreeItemChevron.js

@@ -12,13 +12,17 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _reacticons = require("@fluentui/react-icons");
+const _reactmotion = require("@fluentui/react-motion");
 const _treeItemContext = require("../contexts/treeItemContext");
 const TreeItemChevron = /*#__PURE__*/ _react.memo(()=>{
     const open = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.open);
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
     const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
     return /*#__PURE__*/ _react.createElement(_reacticons.ChevronRight12Regular, {
-        style: expandIconInlineStyles[expandIconRotation]
+        style: {
+            ...expandIconInlineStyles[expandIconRotation],
+            transition: `transform ${_reactmotion.durations.durationNormal}ms ${_reactmotion.curves.curveEasyEaseMax}`
+        }
     });
 });
 TreeItemChevron.displayName = 'TreeItemChevron';

package/lib-commonjs/components/TreeItemChevron.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TreeItemChevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { useTreeItemContext_unstable } from '../contexts/treeItemContext';\n\nexport const TreeItemChevron = React.memo(() => {\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  const { dir } = useFluent_unstable();\n\n  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n  return <ChevronRight12Regular style={expandIconInlineStyles[expandIconRotation]} />;\n});\nTreeItemChevron.displayName = 'TreeItemChevron';\n\nconst expandIconInlineStyles = {\n  90: { transform: `rotate(90deg)` },\n  0: { transform: `rotate(0deg)` },\n  180: { transform: `rotate(180deg)` },\n} as const;\n"],"names":["TreeItemChevron","React","memo","open","useTreeItemContext_unstable","ctx","dir","useFluent_unstable","expandIconRotation","createElement","ChevronRight12Regular","style","expandIconInlineStyles","displayName","transform"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKaA;;;eAAAA;;;;iEALU;qCACY;4BACG;iCACM;AAErC,MAAMA,kBAAAA,WAAAA,GAAkBC,OAAMC,IAAI,CAAC;IACxC,MAAMC,OAAOC,IAAAA,4CAAAA,EAA4BC,CAAAA,MAAOA,IAAIF,IAAI;IAExD,MAAM,EAAEG,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAEhB,MAAMC,qBAAqBL,OAAO,KAAKG,QAAQ,QAAQ,IAAI;IAC3D,OAAA,WAAA,GAAOL,OAAAQ,aAAA,CAACC,iCAAAA,EAAAA;QAAsBC,OAAOC,sBAAsB,CAACJ,mBAAmB;;AACjF;AACAR,gBAAgBa,WAAW,GAAG;AAE9B,MAAMD,yBAAyB;IAC7B,IAAI;QAAEE,WAAW,CAAC,aAAa,CAAC;IAAC;IACjC,GAAG;QAAEA,WAAW,CAAC,YAAY,CAAC;IAAC;IAC/B,KAAK;QAAEA,WAAW,CAAC,cAAc,CAAC;IAAC;AACrC"}
+{"version":3,"sources":["TreeItemChevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { durations, curves } from '@fluentui/react-motion';\nimport { useTreeItemContext_unstable } from '../contexts/treeItemContext';\n\nexport const TreeItemChevron = React.memo(() => {\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  const { dir } = useFluent_unstable();\n\n  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n  return (\n    <ChevronRight12Regular\n      style={{\n        ...expandIconInlineStyles[expandIconRotation],\n        transition: `transform ${durations.durationNormal}ms ${curves.curveEasyEaseMax}`,\n      }}\n    />\n  );\n});\nTreeItemChevron.displayName = 'TreeItemChevron';\n\nconst expandIconInlineStyles = {\n  90: { transform: `rotate(90deg)` },\n  0: { transform: `rotate(0deg)` },\n  180: { transform: `rotate(180deg)` },\n} as const;\n"],"names":["TreeItemChevron","React","memo","open","useTreeItemContext_unstable","ctx","dir","useFluent_unstable","expandIconRotation","createElement","ChevronRight12Regular","style","expandIconInlineStyles","transition","durations","durationNormal","curves","curveEasyEaseMax","displayName","transform"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;;iEANU;qCACY;4BACG;6BACJ;iCACU;AAErC,MAAMA,kBAAAA,WAAAA,GAAkBC,OAAMC,IAAI,CAAC;IACxC,MAAMC,OAAOC,IAAAA,4CAAAA,EAA4BC,CAAAA,MAAOA,IAAIF,IAAI;IAExD,MAAM,EAAEG,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAEhB,MAAMC,qBAAqBL,OAAO,KAAKG,QAAQ,QAAQ,IAAI;IAC3D,OAAA,WAAA,GACEL,OAAAQ,aAAA,CAACC,iCAAAA,EAAAA;QACCC,OAAO;YACL,GAAGC,sBAAsB,CAACJ,mBAAmB;YAC7CK,YAAY,CAAC,UAAU,EAAEC,sBAAAA,CAAUC,cAAc,CAAC,GAAG,EAAEC,mBAAAA,CAAOC,gBAAgB,CAAC,CAAC;QAClF;;AAGN;AACAjB,gBAAgBkB,WAAW,GAAG;AAE9B,MAAMN,yBAAyB;IAC7B,IAAI;QAAEO,WAAW,CAAC,aAAa,CAAC;IAAC;IACjC,GAAG;QAAEA,WAAW,CAAC,YAAY,CAAC;IAAC;IAC/B,KAAK;QAAEA,WAAW,CAAC,cAAc,CAAC;IAAC;AACrC"}

package/lib-commonjs/hooks/useControllableOpenItems.js

@@ -20,24 +20,15 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _reactutilities = require("@fluentui/react-utilities");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _ImmutableSet = require("../utils/ImmutableSet");
-const _createOpenItems = require("../utils/createOpenItems");
 function useControllableOpenItems(props) {
     return (0, _reactutilities.useControllableState)({
-        state: _react.useMemo(()=>props.openItems && (0, _createOpenItems.createOpenItems)(props.openItems), [
+        state: _react.useMemo(()=>props.openItems && _ImmutableSet.ImmutableSet.from(props.openItems), [
             props.openItems
         ]),
-        defaultState: props.defaultOpenItems && (()=>(0, _createOpenItems.createOpenItems)(props.defaultOpenItems)),
+        defaultState: props.defaultOpenItems && (()=>_ImmutableSet.ImmutableSet.from(props.defaultOpenItems)),
         initialState: _ImmutableSet.ImmutableSet.empty
     });
 }
 function createNextOpenItems(data, previousOpenItems) {
-    if (data.value === null) {
-        return previousOpenItems;
-    }
-    const previousOpenItemsHasId = previousOpenItems.has(data.value);
-    if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {
-        return previousOpenItems;
-    }
-    const nextOpenItems = _ImmutableSet.ImmutableSet.create(previousOpenItems);
-    return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);
+    return data.open ? previousOpenItems.add(data.value) : previousOpenItems.delete(data.value);
 }

package/lib-commonjs/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: 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":["createNextOpenItems","useControllableOpenItems","props","useControllableState","state","React","useMemo","openItems","createOpenItems","defaultState","defaultOpenItems","initialState","ImmutableSet","empty","data","previousOpenItems","value","previousOpenItemsHasId","has","open","nextOpenItems","create","add","delete"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAqBgBA,mBAAAA;eAAAA;;IAXAC,wBAAAA;eAAAA;;;;gCAVqB;iEACd;8BACM;iCAEG;AAMzB,SAASA,yBAAyBC,KAAwD;IAC/F,OAAOC,IAAAA,oCAAAA,EAAqB;QAC1BC,OAAOC,OAAMC,OAAO,CAAC,IAAMJ,MAAMK,SAAS,IAAIC,IAAAA,gCAAAA,EAAgBN,MAAMK,SAAS,GAAG;YAACL,MAAMK,SAAS;SAAC;QACjGE,cAAcP,MAAMQ,gBAAgB,IAAK,CAAA,IAAMF,IAAAA,gCAAAA,EAAgBN,MAAMQ,gBAAgB,CAAA;QACrFC,cAAcC,0BAAAA,CAAaC,KAAK;IAClC;AACF;AAKO,SAASb,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,gBAAgBR,0BAAAA,CAAaS,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 { 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 && ImmutableSet.from(props.openItems), [props.openItems]),\n    defaultState: props.defaultOpenItems && (() => ImmutableSet.from(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  return data.open ? previousOpenItems.add(data.value) : previousOpenItems.delete(data.value);\n}\n"],"names":["createNextOpenItems","useControllableOpenItems","props","useControllableState","state","React","useMemo","openItems","ImmutableSet","from","defaultState","defaultOpenItems","initialState","empty","data","previousOpenItems","open","add","value","delete"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAoBgBA,mBAAAA;eAAAA;;IAXAC,wBAAAA;eAAAA;;;;gCATqB;iEACd;8BACM;AAOtB,SAASA,yBAAyBC,KAAwD;IAC/F,OAAOC,IAAAA,oCAAAA,EAAqB;QAC1BC,OAAOC,OAAMC,OAAO,CAAC,IAAMJ,MAAMK,SAAS,IAAIC,0BAAAA,CAAaC,IAAI,CAACP,MAAMK,SAAS,GAAG;YAACL,MAAMK,SAAS;SAAC;QACnGG,cAAcR,MAAMS,gBAAgB,IAAK,CAAA,IAAMH,0BAAAA,CAAaC,IAAI,CAACP,MAAMS,gBAAgB,CAAA;QACvFC,cAAcJ,0BAAAA,CAAaK,KAAK;IAClC;AACF;AAKO,SAASb,oBACdc,IAAgD,EAChDC,iBAA8C;IAE9C,OAAOD,KAAKE,IAAI,GAAGD,kBAAkBE,GAAG,CAACH,KAAKI,KAAK,IAAIH,kBAAkBI,MAAM,CAACL,KAAKI,KAAK;AAC5F"}

package/lib-commonjs/hooks/useRootTree.js

@@ -11,14 +11,16 @@ Object.defineProperty(exports, "useRootTree", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _reactutilities = require("@fluentui/react-utilities");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _createOpenItems = require("../utils/createOpenItems");
+const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
 const _createCheckedItems = require("../utils/createCheckedItems");
 const _tokens = require("../utils/tokens");
 const _useControllableOpenItems = require("./useControllableOpenItems");
+const _ImmutableSet = require("../utils/ImmutableSet");
+const _ImmutableMap = require("../utils/ImmutableMap");
 function useRootTree(props, ref) {
     warnIfNoProperPropsRootTree(props);
     const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;
-    const openItems = _react.useMemo(()=>(0, _createOpenItems.createOpenItems)(props.openItems), [
+    const openItems = _react.useMemo(()=>_ImmutableSet.ImmutableSet.from(props.openItems), [
         props.openItems
     ]);
     const checkedItems = _react.useMemo(()=>(0, _createCheckedItems.createCheckedItems)(props.checkedItems), [
@@ -28,7 +30,7 @@ function useRootTree(props, ref) {
         var _props_onOpenChange;
         (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, request.event, {
             ...request,
-            openItems: (0, _useControllableOpenItems.createNextOpenItems)(request, openItems).dangerouslyGetInternalSet_unstable()
+            openItems: _ImmutableSet.ImmutableSet.dangerouslyGetInternalSet((0, _useControllableOpenItems.createNextOpenItems)(request, openItems))
         });
     };
     const requestCheckedChange = (request)=>{
@@ -39,7 +41,7 @@ function useRootTree(props, ref) {
         (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, request.event, {
             ...request,
             selectionMode,
-            checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()
+            checkedItems: _ImmutableMap.ImmutableMap.dangerouslyGetInternalMap(checkedItems)
         });
     };
     const requestNavigation = (request)=>{
@@ -74,7 +76,12 @@ function useRootTree(props, ref) {
     });
     return {
         components: {
-            root: 'div'
+            root: 'div',
+            // TODO: remove once React v18 slot API is modified
+            // This is a problem at the moment due to UnknownSlotProps assumption
+            // that `children` property is `ReactNode`, which in this case is not valid
+            // as PresenceComponentProps['children'] is `ReactElement`
+            collapseMotion: _reactmotioncomponentspreview.Collapse
         },
         contextType: 'root',
         selectionMode,
@@ -95,7 +102,8 @@ function useRootTree(props, ref) {
             ...props
         }), {
             elementType: 'div'
-        })
+        }),
+        collapseMotion: undefined
     };
 }
 function warnIfNoProperPropsRootTree(props) {

package/lib-commonjs/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    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":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","React","useMemo","createOpenItems","checkedItems","createCheckedItems","requestOpenChange","request","onOpenChange","event","createNextOpenItems","dangerouslyGetInternalSet_unstable","requestCheckedChange","onCheckedChange","dangerouslyGetInternalMap_unstable","requestNavigation","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"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 { Collapse } from '@fluentui/react-motion-components-preview';\nimport { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\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(() => ImmutableSet.from(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: ImmutableSet.dangerouslyGetInternalSet(createNextOpenItems(request, openItems)),\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: ImmutableMap.dangerouslyGetInternalMap(checkedItems),\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: {\n      root: 'div',\n      // TODO: remove once React v18 slot API is modified\n      // This is a problem at the moment due to UnknownSlotProps assumption\n      // that `children` property is `ReactNode`, which in this case is not valid\n      // as PresenceComponentProps['children'] is `ReactElement`\n      collapseMotion: Collapse as React.FC<PresenceMotionSlotProps>,\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(\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    collapseMotion: undefined,\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":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","React","useMemo","ImmutableSet","from","checkedItems","createCheckedItems","requestOpenChange","request","onOpenChange","event","dangerouslyGetInternalSet","createNextOpenItems","requestCheckedChange","onCheckedChange","ImmutableMap","dangerouslyGetInternalMap","requestNavigation","isScrollPrevented","onNavigation","preventScroll","type","treeDataTypes","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","useEventCallback","requestType","components","root","collapseMotion","Collapse","contextType","open","level","slot","always","getIntrinsicElementProps","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/hooks/useSubtree.js

@@ -12,6 +12,8 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _index = require("../contexts/index");
 const _reactutilities = require("@fluentui/react-utilities");
+const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
+const _reactmotion = require("@fluentui/react-motion");
 function useSubtree(props, ref) {
     const subtreeRef = (0, _index.useTreeItemContext_unstable)((ctx)=>ctx.subtreeRef);
     const { level: parentLevel } = (0, _index.useSubtreeContext_unstable)();
@@ -20,7 +22,12 @@ function useSubtree(props, ref) {
         contextType: 'subtree',
         open,
         components: {
-            root: 'div'
+            root: 'div',
+            // TODO: remove once React v18 slot API is modified
+            // This is a problem at the moment due to UnknownSlotProps assumption
+            // that `children` property is `ReactNode`, which in this case is not valid
+            // as PresenceComponentProps['children'] is `ReactElement`
+            collapseMotion: _reactmotioncomponentspreview.Collapse
         },
         level: parentLevel + 1,
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
@@ -32,6 +39,13 @@ function useSubtree(props, ref) {
             ...props
         }), {
             elementType: 'div'
+        }),
+        collapseMotion: (0, _reactmotion.presenceMotionSlot)(props.collapseMotion, {
+            elementType: _reactmotioncomponentspreview.Collapse,
+            defaultProps: {
+                visible: open,
+                unmountOnExit: true
+            }
         })
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & SubtreeContextValue, 'treeType'> {\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n  const { level: parentLevel } = useSubtreeContext_unstable();\n\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  return {\n    contextType: 'subtree',\n    open,\n    components: {\n      root: 'div',\n    },\n    level: parentLevel + 1,\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: useMergedRefs(ref, subtreeRef) as React.Ref<HTMLDivElement>,\n        role: 'group',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["useSubtree","props","ref","subtreeRef","useTreeItemContext_unstable","ctx","level","parentLevel","useSubtreeContext_unstable","open","contextType","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWgBA;;;eAAAA;;;;iEAXO;uBAEsE;gCAC/B;AAQvD,SAASA,WACdC,KAAgB,EAChBC,GAA2B;IAE3B,MAAMC,aAAaC,IAAAA,kCAAAA,EAA4BC,CAAAA,MAAOA,IAAIF,UAAU;IAEpE,MAAM,EAAEG,OAAOC,WAAW,EAAE,GAAGC,IAAAA,iCAAAA;IAE/B,MAAMC,OAAOL,IAAAA,kCAAAA,EAA4BC,CAAAA,MAAOA,IAAII,IAAI;IAExD,OAAO;QACLC,aAAa;QACbD;QACAE,YAAY;YACVC,MAAM;QACR;QACAN,OAAOC,cAAc;QACrBK,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5Fb,KAAKc,IAAAA,6BAAAA,EAAcd,KAAKC;YACxBc,MAAM;YACN,GAAGhB,KAAK;QACV,IACA;YAAEiB,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { presenceMotionSlot, PresenceMotionSlotProps } from '@fluentui/react-motion';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & SubtreeContextValue, 'treeType'> {\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n  const { level: parentLevel } = useSubtreeContext_unstable();\n\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  return {\n    contextType: 'subtree',\n    open,\n    components: {\n      root: 'div',\n      // TODO: remove once React v18 slot API is modified\n      // This is a problem at the moment due to UnknownSlotProps assumption\n      // that `children` property is `ReactNode`, which in this case is not valid\n      // as PresenceComponentProps['children'] is `ReactElement`\n      collapseMotion: Collapse as React.FC<PresenceMotionSlotProps>,\n    },\n    level: parentLevel + 1,\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: useMergedRefs(ref, subtreeRef) as React.Ref<HTMLDivElement>,\n        role: 'group',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    collapseMotion: presenceMotionSlot(props.collapseMotion, {\n      elementType: Collapse,\n      defaultProps: {\n        visible: open,\n        unmountOnExit: true,\n      },\n    }),\n  };\n}\n"],"names":["useSubtree","props","ref","subtreeRef","useTreeItemContext_unstable","ctx","level","parentLevel","useSubtreeContext_unstable","open","contextType","components","root","collapseMotion","Collapse","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType","presenceMotionSlot","defaultProps","visible","unmountOnExit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAagBA;;;eAAAA;;;;iEAbO;uBAEsE;gCAC/B;8CACrC;6BACmC;AAQrD,SAASA,WACdC,KAAgB,EAChBC,GAA2B;IAE3B,MAAMC,aAAaC,IAAAA,kCAAAA,EAA4BC,CAAAA,MAAOA,IAAIF,UAAU;IAEpE,MAAM,EAAEG,OAAOC,WAAW,EAAE,GAAGC,IAAAA,iCAAAA;IAE/B,MAAMC,OAAOL,IAAAA,kCAAAA,EAA4BC,CAAAA,MAAOA,IAAII,IAAI;IAExD,OAAO;QACLC,aAAa;QACbD;QACAE,YAAY;YACVC,MAAM;YACN,mDAAmD;YACnD,qEAAqE;YACrE,2EAA2E;YAC3E,0DAA0D;YAC1DC,gBAAgBC,sCAAAA;QAClB;QACAR,OAAOC,cAAc;QACrBK,MAAMG,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5Ff,KAAKgB,IAAAA,6BAAAA,EAAchB,KAAKC;YACxBgB,MAAM;YACN,GAAGlB,KAAK;QACV,IACA;YAAEmB,aAAa;QAAM;QAEvBP,gBAAgBQ,IAAAA,+BAAAA,EAAmBpB,MAAMY,cAAc,EAAE;YACvDO,aAAaN,sCAAAA;YACbQ,cAAc;gBACZC,SAASd;gBACTe,eAAe;YACjB;QACF;IACF;AACF"}