@fluentui/react-tree 9.16.1 → 9.16.3

package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FlatTree/useFlatTreeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { FlatTreeSlots, FlatTreeState } from './FlatTree.types';\n\nexport const flatTreeClassNames: SlotClassNames<Omit<FlatTreeSlots, 'collapseMotion'>> = {\n  root: 'fui-FlatTree',\n};\n\nconst useBaseStyles = makeResetStyles({\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: tokens.spacingVerticalXXS,\n});\n\nexport const useFlatTreeStyles_unstable = (state: FlatTreeState): FlatTreeState => {\n  'use no memo';\n\n  const baseStyles = useBaseStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","flatTreeClassNames","root","useBaseStyles","display","flexDirection","rowGap","spacingVerticalXXS","useFlatTreeStyles_unstable","state","baseStyles","className"],"mappings":"AAAA;;;;;;;;;;;;sBAOaG;;;8BAUAO;;;;uBAfiC,iBAAiB;4BAExC,wBAAwB;AAGxC,MAAMP,qBAA4E;IACvFC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAgBL,sBAAAA,EAAgB;IACpCM,SAAS;IACTC,eAAe;IACfC,QAAQN,kBAAAA,CAAOO,kBAAkB;AACnC;AAEO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,aAAaP;IACnB,oDAAoD;IACpDM,MAAMP,IAAI,CAACS,SAAS,OAAGZ,mBAAAA,EAAaE,mBAAmBC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAC7F,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/FlatTree/useFlatTreeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { FlatTreeSlots, FlatTreeState } from './FlatTree.types';\n\nexport const flatTreeClassNames: SlotClassNames<Omit<FlatTreeSlots, 'collapseMotion'>> = {\n  root: 'fui-FlatTree',\n};\n\nconst useBaseStyles = makeResetStyles({\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: tokens.spacingVerticalXXS,\n});\n\nexport const useFlatTreeStyles_unstable = (state: FlatTreeState): FlatTreeState => {\n  const baseStyles = useBaseStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","flatTreeClassNames","root","useBaseStyles","display","flexDirection","rowGap","spacingVerticalXXS","useFlatTreeStyles_unstable","state","baseStyles","className"],"mappings":"AAAA;;;;;;;;;;;;sBAOaG;;;8BAUAO;;;;uBAfiC,iBAAiB;4BAExC,wBAAwB;AAGxC,MAAMP,qBAA4E;IACvFC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAgBL,sBAAAA,EAAgB;IACpCM,SAAS;IACTC,eAAe;IACfC,QAAQN,kBAAAA,CAAOO,kBAAkB;AACnC;AAEO,MAAMC,6BAA6B,CAACC;IACzC,MAAMC,aAAaP;IACnB,oDAAoD;IACpDM,MAAMP,IAAI,CAACS,SAAS,OAAGZ,mBAAAA,EAAaE,mBAAmBC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAC7F,OAAOF;AACT,EAAE"}

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

@@ -21,7 +21,6 @@ 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), [
         props
     ]);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FlatTree/useHeadlessFlatTree.ts"],"sourcesContent":["'use client';\n\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { HeadlessTreeItem, HeadlessTreeItemProps } from '../../utils/createHeadlessTree';\nimport { 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 type { FlatTreeProps } from './FlatTree.types';\nimport type {\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":["useEventCallback","useMergedRefs","React","createHeadlessTree","treeDataTypes","useFlatTreeNavigation","createNextOpenItems","useControllableOpenItems","dataTreeItemValueAttrName","ImmutableSet","createNextFlatCheckedItems","useFlatControllableCheckedItems","ImmutableMap","useHeadlessFlatTree_unstable","props","options","headlessTree","useMemo","openItems","setOpenItems","checkedItems","setCheckedItems","navigation","treeRef","useRef","handleOpenChange","event","data","nextOpenItems","onOpenChange","dangerouslyGetInternalSet","handleCheckedChange","nextCheckedItems","onCheckedChange","dangerouslyGetInternalMap","getNextNavigableItem","visibleItems","item","get","value","type","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","useCallback","current","querySelector","ref","rootRef","getTreeProps","selectionMode","onNavigation","noop","items","getItem","navigate"],"mappings":"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"}
+{"version":3,"sources":["../src/components/FlatTree/useHeadlessFlatTree.ts"],"sourcesContent":["'use client';\n\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { HeadlessTreeItem, HeadlessTreeItemProps } from '../../utils/createHeadlessTree';\nimport { 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 type { FlatTreeProps } from './FlatTree.types';\nimport type {\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  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":["useEventCallback","useMergedRefs","React","createHeadlessTree","treeDataTypes","useFlatTreeNavigation","createNextOpenItems","useControllableOpenItems","dataTreeItemValueAttrName","ImmutableSet","createNextFlatCheckedItems","useFlatControllableCheckedItems","ImmutableMap","useHeadlessFlatTree_unstable","props","options","headlessTree","useMemo","openItems","setOpenItems","checkedItems","setCheckedItems","navigation","treeRef","useRef","handleOpenChange","event","data","nextOpenItems","onOpenChange","dangerouslyGetInternalSet","handleCheckedChange","nextCheckedItems","onCheckedChange","dangerouslyGetInternalMap","getNextNavigableItem","visibleItems","item","get","value","type","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","useCallback","current","querySelector","ref","rootRef","getTreeProps","selectionMode","onNavigation","noop","items","getItem","navigate"],"mappings":"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"}

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

@@ -22,7 +22,6 @@ 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;
     // as level is static, this doesn't break rule of hooks
     // and if this becomes an issue later on, this can be easily converted
@@ -30,7 +29,7 @@ const useTree_unstable = (props, ref)=>{
     return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);
 };
 function useNestedRootTree(props, ref) {
-    'use no memo';
+    'use no memo'; // justified: compiler would optimize useNestedRootTree — manual opt-out to preserve runtime behavior
     const [openItems, setOpenItems] = (0, _useControllableOpenItems.useControllableOpenItems)(props);
     const checkedItems = (0, _useNestedControllableCheckedItems.useNestedCheckedItems)(props);
     const navigation = (0, _useTreeNavigation.useTreeNavigation)(props.navigationMode);
@@ -70,7 +69,6 @@ function useNestedRootTree(props, ref) {
     });
 }
 function useNestedSubtree(props, ref) {
-    'use no memo';
     if (process.env.NODE_ENV === 'development') {
         // this doesn't break rule of hooks, as environment is a static value
         // eslint-disable-next-line react-hooks/rules-of-hooks

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tree/useTree.ts"],"sourcesContent":["'use client';\n\nimport * 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(props.navigationMode);\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    {\n      treeType: 'nested',\n      forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n    } 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":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","createNextNestedCheckedItems","useNestedCheckedItems","SubtreeContext","useRootTree","useSubtree","useTreeNavigation","useTreeContext_unstable","ImmutableSet","ImmutableMap","useTree_unstable","props","ref","isRoot","useContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","checkedItems","navigation","navigationMode","Object","assign","onOpenChange","event","data","nextOpenItems","dangerouslyGetInternalSet","onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","nextCheckedItems","dangerouslyGetInternalMap","treeRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","ctx","Error"],"mappings":"AAAA;;;;;+BAeac;;;;;;;iEAbU,QAAQ;gCACiB,4BAA4B;0CAEd,uCAAuC;mDACjC,sCAAsC;gCAC3E,gCAAgC;6BACnC,0BAA0B;4BAC3B,yBAAyB;mCAClB,gCAAgC;6BAC1B,6BAA6B;8BACxC,2BAA2B;8BAC3B,2BAA2B;AAEjD,yBAAyB,CAACC,OAAkBC;IACjD;IAEA,MAAMC,SAASjB,OAAMkB,UAAU,CAACX,8BAAAA,MAAoBY;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,kBAAkBL,OAAOC,OAAOK,iBAAiBN,OAAOC;AAC1E,EAAE;AAEF,SAASI,kBAAkBL,KAAgB,EAAEC,GAA2B;IACtE;IAEA,MAAM,CAACM,WAAWC,aAAa,OAAGnB,kDAAAA,EAAyBW;IAC3D,MAAMS,mBAAelB,wDAAAA,EAAsBS;IAC3C,MAAMU,iBAAaf,oCAAAA,EAAkBK,MAAMW,cAAc;IAEzD,OAAOC,OAAOC,MAAM,KAClBpB,wBAAAA,EACE;QACE,GAAGO,KAAK;QACRO;QACAE;QACAK,kBAAc5B,gCAAAA,EAAiB,CAAC6B,OAAOC;gBAErChB;YADA,MAAMiB,oBAAgB7B,6CAAAA,EAAoB4B,MAAMT;aAChDP,sBAAAA,MAAMc,YAAAA,AAAY,MAAA,QAAlBd,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBe,OAAO;gBAC1B,GAAGC,IAAI;gBACPT,WAAWV,0BAAAA,CAAaqB,yBAAyB,CAACD;YACpD;YACAT,aAAaS;QACf;QACAE,kBAAcjC,gCAAAA,EAAiB,CAAC6B,OAAOC;gBACrChB;aAAAA,sBAAAA,MAAMmB,YAAAA,AAAY,MAAA,QAAlBnB,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBe,OAAOC;YAC5B,IAAI,CAACD,MAAMK,kBAAkB,IAAI;gBAC/BV,WAAWW,QAAQ,CAACL,MAAM;oBACxBM,eAAeN,KAAKO,iBAAiB;gBACvC;YACF;QACF;QACAC,qBAAiBtC,gCAAAA,EAAiB,CAAC6B,OAAOC;gBAExChB;YADA,MAAMyB,uBAAmBnC,+DAAAA,EAA6B0B,MAAMP;aAC5DT,yBAAAA,MAAMwB,eAAe,AAAfA,MAAe,QAArBxB,2BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,uBAAAA,IAAAA,CAAAA,OAAwBe,OAAO;gBAC7B,GAAGC,IAAI;gBACPP,cAAcX,0BAAAA,CAAa4B,yBAAyB,CAACD;YACvD;QACF;IACF,OACAtC,6BAAAA,EAAcc,KAAKS,WAAWiB,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2BnB,WAAWmB,yBAAyB;IACjE;AAEJ;AAEA,SAASvB,iBAAiBN,KAAgB,EAAEC,GAA2B;IACrE;IAEA,IAAI6B,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,qEAAqE;QACrE,sDAAsD;QACtD,MAAMJ,eAAWhC,oCAAAA,EAAwBqC,CAAAA,MAAOA,IAAIL,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACvB,MAAM,IAAIM,MAA2B,CAAC;;mEAItC,CAAC;QACH;IACF;IACA,WAAOxC,sBAAAA,EAAWM,OAAOC;AAC3B"}
+{"version":3,"sources":["../src/components/Tree/useTree.ts"],"sourcesContent":["'use client';\n\nimport * 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  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'; // justified: compiler would optimize useNestedRootTree — manual opt-out to preserve runtime behavior\n\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n  const checkedItems = useNestedCheckedItems(props);\n  const navigation = useTreeNavigation(props.navigationMode);\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    {\n      treeType: 'nested',\n      forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n    } as const,\n  );\n}\n\nfunction useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  if (process.env.NODE_ENV === 'development') {\n    // this doesn't break rule of hooks, as environment is a static value\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n    if (treeType === 'flat') {\n      throw new Error(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useTree]:\n        Subtrees are not allowed in a FlatTree!\n        You cannot use a <Tree> component inside of a <FlatTree> component!\n      `);\n    }\n  }\n  return useSubtree(props, ref);\n}\n"],"names":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","createNextNestedCheckedItems","useNestedCheckedItems","SubtreeContext","useRootTree","useSubtree","useTreeNavigation","useTreeContext_unstable","ImmutableSet","ImmutableMap","useTree_unstable","props","ref","isRoot","useContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","checkedItems","navigation","navigationMode","Object","assign","onOpenChange","event","data","nextOpenItems","dangerouslyGetInternalSet","onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","nextCheckedItems","dangerouslyGetInternalMap","treeRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","ctx","Error"],"mappings":"AAAA;;;;;+BAeac;;;;;;;iEAbU,QAAQ;gCACiB,4BAA4B;0CAEd,uCAAuC;mDACjC,sCAAsC;gCAC3E,gCAAgC;6BACnC,0BAA0B;4BAC3B,yBAAyB;mCAClB,gCAAgC;6BAC1B,6BAA6B;8BACxC,2BAA2B;8BAC3B,2BAA2B;AAEjD,yBAAyB,CAACC,OAAkBC;IACjD,MAAMC,SAASjB,OAAMkB,UAAU,CAACX,8BAAAA,MAAoBY;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,kBAAkBL,OAAOC,OAAOK,iBAAiBN,OAAOC;AAC1E,EAAE;AAEF,SAASI,kBAAkBL,KAAgB,EAAEC,GAA2B;IACtE,eAAe,qGAAqG;IAEpH,MAAM,CAACM,WAAWC,aAAa,OAAGnB,kDAAAA,EAAyBW;IAC3D,MAAMS,mBAAelB,wDAAAA,EAAsBS;IAC3C,MAAMU,aAAaf,wCAAAA,EAAkBK,MAAMW,cAAc;IAEzD,OAAOC,OAAOC,MAAM,KAClBpB,wBAAAA,EACE;QACE,GAAGO,KAAK;QACRO;QACAE;QACAK,cAAc5B,oCAAAA,EAAiB,CAAC6B,OAAOC;gBAErChB;YADA,MAAMiB,oBAAgB7B,6CAAAA,EAAoB4B,MAAMT;aAChDP,sBAAAA,MAAMc,YAAAA,AAAY,MAAA,QAAlBd,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBe,OAAO;gBAC1B,GAAGC,IAAI;gBACPT,WAAWV,0BAAAA,CAAaqB,yBAAyB,CAACD;YACpD;YACAT,aAAaS;QACf;QACAE,kBAAcjC,gCAAAA,EAAiB,CAAC6B,OAAOC;gBACrChB;YAAAA,uBAAAA,MAAMmB,YAAAA,AAAY,MAAA,QAAlBnB,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBe,OAAOC;YAC5B,IAAI,CAACD,MAAMK,kBAAkB,IAAI;gBAC/BV,WAAWW,QAAQ,CAACL,MAAM;oBACxBM,eAAeN,KAAKO,iBAAiB;gBACvC;YACF;QACF;QACAC,qBAAiBtC,gCAAAA,EAAiB,CAAC6B,OAAOC;gBAExChB;YADA,MAAMyB,uBAAmBnC,+DAAAA,EAA6B0B,MAAMP;aAC5DT,yBAAAA,MAAMwB,eAAAA,AAAe,MAAA,QAArBxB,2BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,uBAAAA,IAAAA,CAAAA,OAAwBe,OAAO;gBAC7B,GAAGC,IAAI;gBACPP,cAAcX,0BAAAA,CAAa4B,yBAAyB,CAACD;YACvD;QACF;IACF,OACAtC,6BAAAA,EAAcc,KAAKS,WAAWiB,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2BnB,WAAWmB,yBAAyB;IACjE;AAEJ;AAEA,SAASvB,iBAAiBN,KAAgB,EAAEC,GAA2B;IACrE,IAAI6B,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,qEAAqE;QACrE,sDAAsD;QACtD,MAAMJ,eAAWhC,oCAAAA,EAAwBqC,CAAAA,MAAOA,IAAIL,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACvB,MAAM,IAAIM,MAA2B,CAAC;;mEAItC,CAAC;QACH;IACF;IACA,WAAOxC,sBAAAA,EAAWM,OAAOC;AAC3B"}

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

@@ -12,7 +12,6 @@ Object.defineProperty(exports, "useTreeContextValues_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useTreeContextValues_unstable(state) {
-    'use no memo';
     if (state.contextType === 'root') {
         const { openItems, level, contextType, treeType, checkedItems, selectionMode, navigationMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
         // contextType is statically determined by the context

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tree/useTreeContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TreeContextValue } from '../../contexts';\nimport type { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  'use no memo';\n\n  if (state.contextType === 'root') {\n    const {\n      openItems,\n      level,\n      contextType,\n      treeType,\n      checkedItems,\n      selectionMode,\n      navigationMode,\n      appearance,\n      size,\n      requestTreeResponse,\n      forceUpdateRovingTabIndex,\n    } = state;\n    // contextType is statically determined by the context\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const tree = React.useMemo<TreeContextValue>(\n      () => ({\n        treeType,\n        size,\n        openItems,\n        appearance,\n        checkedItems,\n        selectionMode,\n        navigationMode,\n        contextType,\n        level,\n        requestTreeResponse,\n        forceUpdateRovingTabIndex,\n      }),\n      [\n        treeType,\n        size,\n        openItems,\n        appearance,\n        checkedItems,\n        selectionMode,\n        navigationMode,\n        contextType,\n        level,\n        requestTreeResponse,\n        forceUpdateRovingTabIndex,\n      ],\n    );\n\n    return { tree };\n  }\n  return {\n    // contextType is statically determined by the context\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    tree: React.useMemo(() => ({ level: state.level, contextType: 'subtree' }), [state.level]),\n  };\n}\n"],"names":["React","useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","navigationMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree","useMemo"],"mappings":"AAAA;;;;;+BAMgBC;;;;;;;iEAJO,QAAQ;AAIxB,uCAAuCC,KAAgB;IAC5D;IAEA,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAChC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLF,WAAW,EACXG,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGX;QACJ,sDAAsD;QACtD,sDAAsD;QACtD,MAAMY,OAAOd,OAAMe,OAAO,CACxB,IAAO,CAAA;gBACLT;gBACAK;gBACAP;gBACAM;gBACAH;gBACAC;gBACAC;gBACAN;gBACAE;gBACAO;gBACAC;aACF,CAAA,EACA;YACEP;YACAK;YACAP;YACAM;YACAH;YACAC;YACAC;YACAN;YACAE;YACAO;YACAC;SACD;QAGH,OAAO;YAAEC;QAAK;IAChB;IACA,OAAO;QACL,sDAAsD;QACtD,sDAAsD;QACtDA,MAAMd,OAAMe,OAAO,CAAC,IAAO,CAAA;gBAAEV,OAAOH,MAAMG,KAAK;gBAAEF,aAAa;aAAU,CAAA,EAAI;YAACD,MAAMG,KAAK;SAAC;IAC3F;AACF"}
+{"version":3,"sources":["../src/components/Tree/useTreeContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TreeContextValue } from '../../contexts';\nimport type { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  if (state.contextType === 'root') {\n    const {\n      openItems,\n      level,\n      contextType,\n      treeType,\n      checkedItems,\n      selectionMode,\n      navigationMode,\n      appearance,\n      size,\n      requestTreeResponse,\n      forceUpdateRovingTabIndex,\n    } = state;\n    // contextType is statically determined by the context\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const tree = React.useMemo<TreeContextValue>(\n      () => ({\n        treeType,\n        size,\n        openItems,\n        appearance,\n        checkedItems,\n        selectionMode,\n        navigationMode,\n        contextType,\n        level,\n        requestTreeResponse,\n        forceUpdateRovingTabIndex,\n      }),\n      [\n        treeType,\n        size,\n        openItems,\n        appearance,\n        checkedItems,\n        selectionMode,\n        navigationMode,\n        contextType,\n        level,\n        requestTreeResponse,\n        forceUpdateRovingTabIndex,\n      ],\n    );\n\n    return { tree };\n  }\n  return {\n    // contextType is statically determined by the context\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    tree: React.useMemo(() => ({ level: state.level, contextType: 'subtree' }), [state.level]),\n  };\n}\n"],"names":["React","useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","navigationMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree","useMemo"],"mappings":"AAAA;;;;;+BAMgBC;;;;;;;iEAJO,QAAQ;AAIxB,uCAAuCC,KAAgB;IAC5D,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAChC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLF,WAAW,EACXG,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGX;QACJ,sDAAsD;QACtD,sDAAsD;QACtD,MAAMY,OAAOd,OAAMe,OAAO,CACxB,IAAO,CAAA;gBACLT;gBACAK;gBACAP;gBACAM;gBACAH;gBACAC;gBACAC;gBACAN;gBACAE;gBACAO;gBACAC;aACF,CAAA,EACA;YACEP;YACAK;YACAP;YACAM;YACAH;YACAC;YACAC;YACAN;YACAE;YACAO;YACAC;SACD;QAGH,OAAO;YAAEC;QAAK;IAChB;IACA,OAAO;QACL,sDAAsD;QACtD,sDAAsD;QACtDA,MAAMd,OAAMe,OAAO,CAAC,IAAO,CAAA;gBAAEV,OAAOH,MAAMG,KAAK;gBAAEF,aAAa;aAAU,CAAA,EAAI;YAACD,MAAMG,KAAK;SAAC;IAC3F;AACF"}

package/lib-commonjs/components/Tree/useTreeStyles.styles.js

@@ -34,7 +34,6 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useTreeStyles_unstable = (state)=>{
-    'use no memo';
     const baseStyles = useBaseStyles();
     const styles = useStyles();
     const isSubTree = state.level > 1;

package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n    root: 'fui-Tree'\n};\nconst useBaseStyles = makeResetStyles({\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS\n});\nconst useStyles = makeStyles({\n    subtree: {\n        paddingTop: tokens.spacingVerticalXXS\n    }\n});\nexport const useTreeStyles_unstable = (state)=>{\n    'use no memo';\n    const baseStyles = useBaseStyles();\n    const styles = useStyles();\n    const isSubTree = state.level > 1;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","useStyles","subtree","z8tnut","d","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCI,cAAc;;;0BAaQ;;;;uBAfuB,gBAAgB;AAEnE,uBAAuB;IAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGN,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIrB,CAAC;AACF,MAAMO,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAO,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AACK,MAAMC,0BAA0BC,KAAK,IAAG;IAC3C,aAAa;IACb,MAAMC,UAAU,GAAGP,aAAa,CAAC,CAAC;IAClC,MAAMQ,MAAM,GAAGP,SAAS,CAAC,CAAC;IAC1B,MAAMQ,SAAS,GAAGH,KAAK,CAACI,KAAK,GAAG,CAAC;IACjC,oDAAA;IACAJ,KAAK,CAACP,IAAI,CAACY,SAAS,OAAGf,mBAAY,EAACE,cAAc,CAACC,IAAI,EAAEQ,UAAU,EAAEE,SAAS,IAAID,MAAM,CAACN,OAAO,EAAEI,KAAK,CAACP,IAAI,CAACY,SAAS,CAAC;IACvH,OAAOL,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useTreeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n    root: 'fui-Tree'\n};\nconst useBaseStyles = makeResetStyles({\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS\n});\nconst useStyles = makeStyles({\n    subtree: {\n        paddingTop: tokens.spacingVerticalXXS\n    }\n});\nexport const useTreeStyles_unstable = (state)=>{\n    const baseStyles = useBaseStyles();\n    const styles = useStyles();\n    const isSubTree = state.level > 1;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","useStyles","subtree","z8tnut","d","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCI,cAAc;;;0BAaQ;;;;uBAfuB,gBAAgB;AAEnE,uBAAuB;IAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGN,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIrB,CAAC;AACF,MAAMO,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAO,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AACK,MAAMC,0BAA0BC,KAAK,IAAG;IAC3C,MAAMC,UAAU,GAAGP,aAAa,CAAC,CAAC;IAClC,MAAMQ,MAAM,GAAGP,SAAS,CAAC,CAAC;IAC1B,MAAMQ,SAAS,GAAGH,KAAK,CAACI,KAAK,GAAG,CAAC;IACjC,oDAAA;IACAJ,KAAK,CAACP,IAAI,CAACY,SAAS,OAAGf,mBAAY,EAACE,cAAc,CAACC,IAAI,EAAEQ,UAAU,EAAEE,SAAS,IAAID,MAAM,CAACN,OAAO,EAAEI,KAAK,CAACP,IAAI,CAACY,SAAS,CAAC;IACvH,OAAOL,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/Tree/useTreeStyles.styles.raw.js

@@ -33,7 +33,6 @@ const useStyles = (0, _react.makeStyles)({
     }
 });
 const useTreeStyles_unstable = (state)=>{
-    'use no memo';
     const baseStyles = useBaseStyles();
     const styles = useStyles();
     const isSubTree = state.level > 1;

package/lib-commonjs/components/Tree/useTreeStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tree/useTreeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeSlots, TreeState } from './Tree.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const treeClassNames: SlotClassNames<Omit<TreeSlots, 'collapseMotion'>> = {\n  root: 'fui-Tree',\n};\n\nconst useBaseStyles = makeResetStyles({\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: tokens.spacingVerticalXXS,\n});\n\nconst useStyles = makeStyles({\n  subtree: {\n    paddingTop: tokens.spacingVerticalXXS,\n  },\n});\n\nexport const useTreeStyles_unstable = (state: TreeState): TreeState => {\n  'use no memo';\n\n  const baseStyles = useBaseStyles();\n  const styles = useStyles();\n  const isSubTree = state.level > 1;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    treeClassNames.root,\n    baseStyles,\n    isSubTree && styles.subtree,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","display","flexDirection","rowGap","spacingVerticalXXS","useStyles","subtree","paddingTop","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,cAAAA;;;0BAgBAU;;;;uBArB6C,iBAAiB;4BAGpD,wBAAwB;AAExC,uBAA0E;IAC/ET,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAgBN,sBAAAA,EAAgB;IACpCO,SAAS;IACTC,eAAe;IACfC,QAAQN,kBAAAA,CAAOO,kBAAkB;AACnC;AAEA,MAAMC,gBAAYV,iBAAAA,EAAW;IAC3BW,SAAS;QACPC,YAAYV,kBAAAA,CAAOO,kBAAkB;IACvC;AACF;AAEO,MAAMI,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaV;IACnB,MAAMW,SAASN;IACf,MAAMO,YAAYH,MAAMI,KAAK,GAAG;IAEhC,oDAAoD;IACpDJ,MAAMV,IAAI,CAACe,SAAS,OAAGlB,mBAAAA,EACrBE,eAAeC,IAAI,EACnBW,YACAE,aAAaD,OAAOL,OAAO,EAC3BG,MAAMV,IAAI,CAACe,SAAS;IAEtB,OAAOL;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Tree/useTreeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeSlots, TreeState } from './Tree.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const treeClassNames: SlotClassNames<Omit<TreeSlots, 'collapseMotion'>> = {\n  root: 'fui-Tree',\n};\n\nconst useBaseStyles = makeResetStyles({\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: tokens.spacingVerticalXXS,\n});\n\nconst useStyles = makeStyles({\n  subtree: {\n    paddingTop: tokens.spacingVerticalXXS,\n  },\n});\n\nexport const useTreeStyles_unstable = (state: TreeState): TreeState => {\n  const baseStyles = useBaseStyles();\n  const styles = useStyles();\n  const isSubTree = state.level > 1;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    treeClassNames.root,\n    baseStyles,\n    isSubTree && styles.subtree,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","display","flexDirection","rowGap","spacingVerticalXXS","useStyles","subtree","paddingTop","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,cAAAA;;;0BAgBAU;;;;uBArB6C,iBAAiB;4BAGpD,wBAAwB;AAExC,uBAA0E;IAC/ET,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAgBN,sBAAAA,EAAgB;IACpCO,SAAS;IACTC,eAAe;IACfC,QAAQN,kBAAAA,CAAOO,kBAAkB;AACnC;AAEA,MAAMC,gBAAYV,iBAAAA,EAAW;IAC3BW,SAAS;QACPC,YAAYV,kBAAAA,CAAOO,kBAAkB;IACvC;AACF;AAEO,MAAMI,yBAAyB,CAACC;IACrC,MAAMC,aAAaV;IACnB,MAAMW,SAASN;IACf,MAAMO,YAAYH,MAAMI,KAAK,GAAG;IAEhC,oDAAoD;IACpDJ,MAAMV,IAAI,CAACe,SAAS,OAAGlB,mBAAAA,EACrBE,eAAeC,IAAI,EACnBW,YACAE,aAAaD,OAAOL,OAAO,EAC3BG,MAAMV,IAAI,CAACe,SAAS;IAEtB,OAAOL;AACT,EAAE"}

package/lib-commonjs/components/TreeItem/useTreeItem.js

@@ -20,7 +20,6 @@ const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromEl
 const _reactcontextselector = require("@fluentui/react-context-selector");
 const _Tree = require("../../Tree");
 function useTreeItem_unstable(props, ref) {
-    'use no memo';
     const treeType = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.treeType);
     if (treeType === 'flat') {
         warnIfNoProperPropsFlatTreeItem(props);

package/lib-commonjs/components/TreeItem/useTreeItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItem/useTreeItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport {\n  getIntrinsicElementProps,\n  useId,\n  useEventCallback,\n  slot,\n  elementContains,\n  useMergedRefs,\n  isHTMLElement,\n} from '@fluentui/react-utilities';\nimport type { TreeItemProps, TreeItemState, TreeItemValue } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport {\n  useTreeContext_unstable,\n  useSubtreeContext_unstable,\n  useTreeItemContext_unstable,\n  TreeContext,\n} from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { treeClassNames } from '../../Tree';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  'use no memo';\n\n  const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n  if (treeType === 'flat') {\n    warnIfNoProperPropsFlatTreeItem(props);\n  }\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n  const navigationMode = useTreeContext_unstable(ctx => ctx.navigationMode ?? 'tree');\n  const forceUpdateRovingTabIndex = useTreeContext_unstable(ctx => ctx.forceUpdateRovingTabIndex);\n  const { level: contextLevel } = useSubtreeContext_unstable();\n  const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n  // note, if the value is not externally provided,\n  // then selection and expansion will not work properly\n  const internalValue = useId('fuiTreeItemValue-');\n  const value: TreeItemValue = props.value ?? internalValue;\n\n  const {\n    onClick,\n    onKeyDown,\n    onChange,\n    as = 'div',\n    itemType = 'leaf',\n    'aria-level': level = contextLevel,\n    'aria-selected': ariaSelected,\n    'aria-expanded': ariaExpanded,\n    ...rest\n  } = props;\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n  const selectionRef = React.useRef<HTMLInputElement>(null);\n  const treeItemRef = React.useRef<HTMLDivElement>(null);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // This is acceptable since the NODE_ENV will not change during runtime\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const hasTreeContext = useHasParentContext(TreeContext);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (hasTreeContext) {\n        return;\n      }\n\n      if (treeItemRef.current?.querySelector(`.${treeClassNames.root}`)) {\n        // eslint-disable-next-line no-console\n        console.error(/** #__DE-INDENT__ */ `\n          @fluentui/react-tree [useTreeItem]:\n          <TreeItem> should be declared inside a <Tree> component.\n        `);\n      }\n    }, [hasTreeContext]);\n  }\n\n  React.useEffect(() => {\n    // When the tree item is mounted, we might need to update the roving tab index\n    // in edge cases where the tree is empty and then populated\n    forceUpdateRovingTabIndex?.();\n    const treeItem = treeItemRef.current;\n    return () => {\n      // When the tree item is unmounted, we need to update the roving tab index\n      // if the tree item is the current tab indexed item\n      if (treeItem && treeItem.tabIndex === 0) {\n        forceUpdateRovingTabIndex?.();\n      }\n    };\n  }, [forceUpdateRovingTabIndex]);\n\n  const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n  const getNextOpen = () => (itemType === 'branch' ? !open : open);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    const isEventFromActions = () => actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n\n    const isEventFromSubtree = () => subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n\n    const isEventFromSelection = () => selectionRef.current?.contains(event.target as Node);\n\n    const isEventFromExpandIcon = expandIconRef.current?.contains(event.target as Node);\n\n    if (isEventFromActions() || isEventFromSubtree() || isEventFromSelection()) {\n      return;\n    } else if (!isEventFromExpandIcon) {\n      onClick?.(event);\n    }\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n\n    ReactDOM.unstable_batchedUpdates(() => {\n      const data = {\n        event,\n        value,\n        open: getNextOpen(),\n        target: event.currentTarget,\n        type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n      } as const;\n      if (itemType !== 'leaf') {\n        props.onOpenChange?.(event, data);\n        requestTreeResponse({\n          ...data,\n          itemType,\n          requestType: 'open',\n        });\n      }\n      requestTreeResponse({\n        ...data,\n        itemType,\n        parentValue,\n        requestType: 'navigate',\n        type: treeDataTypes.Click,\n      });\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.isDefaultPrevented() || !treeItemRef.current) {\n      return;\n    }\n    const isEventFromTreeItem = event.currentTarget === event.target;\n    const isEventFromActions = actionsRef.current && actionsRef.current.contains(event.target as Node);\n\n    switch (event.key) {\n      case Space: {\n        if (!isEventFromTreeItem) {\n          return;\n        }\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          // Prevents the page from scrolling down when the spacebar is pressed\n          event.preventDefault();\n        }\n        return;\n      }\n      case treeDataTypes.Enter: {\n        if (!isEventFromTreeItem) {\n          return;\n        }\n        return event.currentTarget.click();\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp: {\n        if (!isEventFromTreeItem && !isEventFromActions) {\n          return;\n        }\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      }\n      case treeDataTypes.ArrowDown: {\n        if (!isEventFromTreeItem && !isEventFromActions) {\n          return;\n        }\n        if (isEventFromActions && (!isHTMLElement(event.target) || event.target.hasAttribute('aria-haspopup'))) {\n          return;\n        }\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      }\n      case treeDataTypes.ArrowLeft: {\n        // arrow left with alt key is reserved for history navigation\n        if (event.altKey) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: getNextOpen(),\n          type: event.key,\n          itemType,\n          parentValue,\n          target: event.currentTarget,\n        } as const;\n\n        if (isEventFromActions && navigationMode === 'treegrid') {\n          requestTreeResponse({ ...data, requestType: 'navigate' });\n          return;\n        }\n        if (!isEventFromTreeItem) {\n          return;\n        }\n        // do not navigate to parent if the item is on the top level\n        if (level === 1 && !open) {\n          return;\n        }\n        if (open) {\n          props.onOpenChange?.(event, data);\n        }\n        requestTreeResponse({ ...data, requestType: open ? 'open' : 'navigate' });\n        return;\n      }\n      case treeDataTypes.ArrowRight: {\n        // Ignore keyboard events that do not originate from the current tree item.\n        if (!isEventFromTreeItem) {\n          return;\n        }\n        // arrow right with alt key is reserved for history navigation\n        if (event.altKey) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: getNextOpen(),\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n\n        if (itemType === 'branch' && !open) {\n          props.onOpenChange?.(event, data);\n          requestTreeResponse({ ...data, itemType, requestType: 'open' });\n        } else {\n          requestTreeResponse({ ...data, itemType, parentValue, requestType: 'navigate' });\n        }\n        return;\n      }\n    }\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (!isEventFromTreeItem) {\n      return;\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({\n        requestType: 'navigate',\n        event,\n        target: event.currentTarget,\n        value,\n        itemType,\n        type: treeDataTypes.TypeAhead,\n        parentValue,\n      });\n    }\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    requestTreeResponse({\n      requestType: 'selection',\n      event,\n      value,\n      itemType,\n      type: 'Change',\n      target: event.currentTarget,\n      checked: checked === 'mixed' ? true : !checked,\n    });\n  });\n\n  return {\n    value,\n    open,\n    checked,\n    subtreeRef,\n    layoutRef,\n    selectionRef,\n    expandIconRef,\n    treeItemRef,\n    actionsRef,\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n    isAsideVisible: false,\n    // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n    isActionsVisible: false,\n    root: slot.always(\n      getIntrinsicElementProps(as, {\n        tabIndex: -1,\n        [dataTreeItemValueAttrName]: value,\n        role: 'treeitem',\n        ...rest,\n        ref: useMergedRefs(ref, treeItemRef),\n        'aria-level': level,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        'aria-selected': ariaSelected !== undefined ? ariaSelected : selectionMode === 'single' ? !!checked : undefined,\n        'aria-expanded': ariaExpanded !== undefined ? ariaExpanded : itemType === 'branch' ? open : undefined,\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onChange: handleChange,\n      } as const),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n  props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      props['aria-posinset'] === undefined ||\n      props['aria-setsize'] === undefined ||\n      props['aria-level'] === undefined ||\n      (props.parentValue === undefined && props['aria-level'] !== 1)\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(/** #__DE-INDENT__ */ `\n        @fluentui/react-tree [${useTreeItem_unstable.name}]:\n        A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n        and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n        - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n        - \"aria-setsize\": the number of siblings in this level of the tree.\n        - \"aria-level\": the current level of the treeitem.\n        - \"parentValue\": the \"value\" property of the parent item of this item.\n      `);\n    }\n  }\n}\n"],"names":["React","ReactDOM","getIntrinsicElementProps","useId","useEventCallback","slot","elementContains","useMergedRefs","isHTMLElement","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","TreeContext","dataTreeItemValueAttrName","useHasParentContext","treeClassNames","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","navigationMode","forceUpdateRovingTabIndex","level","contextLevel","parentValue","value","internalValue","onClick","onKeyDown","onChange","as","itemType","ariaSelected","ariaExpanded","rest","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","process","env","NODE_ENV","hasTreeContext","useEffect","current","querySelector","root","console","error","treeItem","tabIndex","open","openItems","has","getNextOpen","selectionMode","checked","checkedItems","get","handleClick","event","isEventFromActions","target","isEventFromSubtree","isEventFromSelection","contains","isEventFromExpandIcon","isDefaultPrevented","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","isEventFromTreeItem","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","hasAttribute","ArrowLeft","altKey","ArrowRight","isTypeAheadCharacter","length","match","ctrlKey","metaKey","TypeAhead","handleChange","components","isAsideVisible","isActionsVisible","always","role","undefined","elementType","name"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TreeItem/useTreeItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport {\n  getIntrinsicElementProps,\n  useId,\n  useEventCallback,\n  slot,\n  elementContains,\n  useMergedRefs,\n  isHTMLElement,\n} from '@fluentui/react-utilities';\nimport type { TreeItemProps, TreeItemState, TreeItemValue } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport {\n  useTreeContext_unstable,\n  useSubtreeContext_unstable,\n  useTreeItemContext_unstable,\n  TreeContext,\n} from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { treeClassNames } from '../../Tree';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n  if (treeType === 'flat') {\n    warnIfNoProperPropsFlatTreeItem(props);\n  }\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n  const navigationMode = useTreeContext_unstable(ctx => ctx.navigationMode ?? 'tree');\n  const forceUpdateRovingTabIndex = useTreeContext_unstable(ctx => ctx.forceUpdateRovingTabIndex);\n  const { level: contextLevel } = useSubtreeContext_unstable();\n  const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n  // note, if the value is not externally provided,\n  // then selection and expansion will not work properly\n  const internalValue = useId('fuiTreeItemValue-');\n  const value: TreeItemValue = props.value ?? internalValue;\n\n  const {\n    onClick,\n    onKeyDown,\n    onChange,\n    as = 'div',\n    itemType = 'leaf',\n    'aria-level': level = contextLevel,\n    'aria-selected': ariaSelected,\n    'aria-expanded': ariaExpanded,\n    ...rest\n  } = props;\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n  const selectionRef = React.useRef<HTMLInputElement>(null);\n  const treeItemRef = React.useRef<HTMLDivElement>(null);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // This is acceptable since the NODE_ENV will not change during runtime\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const hasTreeContext = useHasParentContext(TreeContext);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (hasTreeContext) {\n        return;\n      }\n\n      if (treeItemRef.current?.querySelector(`.${treeClassNames.root}`)) {\n        // eslint-disable-next-line no-console\n        console.error(/** #__DE-INDENT__ */ `\n          @fluentui/react-tree [useTreeItem]:\n          <TreeItem> should be declared inside a <Tree> component.\n        `);\n      }\n    }, [hasTreeContext]);\n  }\n\n  React.useEffect(() => {\n    // When the tree item is mounted, we might need to update the roving tab index\n    // in edge cases where the tree is empty and then populated\n    forceUpdateRovingTabIndex?.();\n    const treeItem = treeItemRef.current;\n    return () => {\n      // When the tree item is unmounted, we need to update the roving tab index\n      // if the tree item is the current tab indexed item\n      if (treeItem && treeItem.tabIndex === 0) {\n        forceUpdateRovingTabIndex?.();\n      }\n    };\n  }, [forceUpdateRovingTabIndex]);\n\n  const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n  const getNextOpen = () => (itemType === 'branch' ? !open : open);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    const isEventFromActions = () => actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n\n    const isEventFromSubtree = () => subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n\n    const isEventFromSelection = () => selectionRef.current?.contains(event.target as Node);\n\n    const isEventFromExpandIcon = expandIconRef.current?.contains(event.target as Node);\n\n    if (isEventFromActions() || isEventFromSubtree() || isEventFromSelection()) {\n      return;\n    } else if (!isEventFromExpandIcon) {\n      onClick?.(event);\n    }\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n\n    ReactDOM.unstable_batchedUpdates(() => {\n      const data = {\n        event,\n        value,\n        open: getNextOpen(),\n        target: event.currentTarget,\n        type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n      } as const;\n      if (itemType !== 'leaf') {\n        props.onOpenChange?.(event, data);\n        requestTreeResponse({\n          ...data,\n          itemType,\n          requestType: 'open',\n        });\n      }\n      requestTreeResponse({\n        ...data,\n        itemType,\n        parentValue,\n        requestType: 'navigate',\n        type: treeDataTypes.Click,\n      });\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.isDefaultPrevented() || !treeItemRef.current) {\n      return;\n    }\n    const isEventFromTreeItem = event.currentTarget === event.target;\n    const isEventFromActions = actionsRef.current && actionsRef.current.contains(event.target as Node);\n\n    switch (event.key) {\n      case Space: {\n        if (!isEventFromTreeItem) {\n          return;\n        }\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          // Prevents the page from scrolling down when the spacebar is pressed\n          event.preventDefault();\n        }\n        return;\n      }\n      case treeDataTypes.Enter: {\n        if (!isEventFromTreeItem) {\n          return;\n        }\n        return event.currentTarget.click();\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp: {\n        if (!isEventFromTreeItem && !isEventFromActions) {\n          return;\n        }\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      }\n      case treeDataTypes.ArrowDown: {\n        if (!isEventFromTreeItem && !isEventFromActions) {\n          return;\n        }\n        if (isEventFromActions && (!isHTMLElement(event.target) || event.target.hasAttribute('aria-haspopup'))) {\n          return;\n        }\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      }\n      case treeDataTypes.ArrowLeft: {\n        // arrow left with alt key is reserved for history navigation\n        if (event.altKey) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: getNextOpen(),\n          type: event.key,\n          itemType,\n          parentValue,\n          target: event.currentTarget,\n        } as const;\n\n        if (isEventFromActions && navigationMode === 'treegrid') {\n          requestTreeResponse({ ...data, requestType: 'navigate' });\n          return;\n        }\n        if (!isEventFromTreeItem) {\n          return;\n        }\n        // do not navigate to parent if the item is on the top level\n        if (level === 1 && !open) {\n          return;\n        }\n        if (open) {\n          props.onOpenChange?.(event, data);\n        }\n        requestTreeResponse({ ...data, requestType: open ? 'open' : 'navigate' });\n        return;\n      }\n      case treeDataTypes.ArrowRight: {\n        // Ignore keyboard events that do not originate from the current tree item.\n        if (!isEventFromTreeItem) {\n          return;\n        }\n        // arrow right with alt key is reserved for history navigation\n        if (event.altKey) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: getNextOpen(),\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n\n        if (itemType === 'branch' && !open) {\n          props.onOpenChange?.(event, data);\n          requestTreeResponse({ ...data, itemType, requestType: 'open' });\n        } else {\n          requestTreeResponse({ ...data, itemType, parentValue, requestType: 'navigate' });\n        }\n        return;\n      }\n    }\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (!isEventFromTreeItem) {\n      return;\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({\n        requestType: 'navigate',\n        event,\n        target: event.currentTarget,\n        value,\n        itemType,\n        type: treeDataTypes.TypeAhead,\n        parentValue,\n      });\n    }\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    requestTreeResponse({\n      requestType: 'selection',\n      event,\n      value,\n      itemType,\n      type: 'Change',\n      target: event.currentTarget,\n      checked: checked === 'mixed' ? true : !checked,\n    });\n  });\n\n  return {\n    value,\n    open,\n    checked,\n    subtreeRef,\n    layoutRef,\n    selectionRef,\n    expandIconRef,\n    treeItemRef,\n    actionsRef,\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n    isAsideVisible: false,\n    // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n    isActionsVisible: false,\n    root: slot.always(\n      getIntrinsicElementProps(as, {\n        tabIndex: -1,\n        [dataTreeItemValueAttrName]: value,\n        role: 'treeitem',\n        ...rest,\n        ref: useMergedRefs(ref, treeItemRef),\n        'aria-level': level,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        'aria-selected': ariaSelected !== undefined ? ariaSelected : selectionMode === 'single' ? !!checked : undefined,\n        'aria-expanded': ariaExpanded !== undefined ? ariaExpanded : itemType === 'branch' ? open : undefined,\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onChange: handleChange,\n      } as const),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n  props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      props['aria-posinset'] === undefined ||\n      props['aria-setsize'] === undefined ||\n      props['aria-level'] === undefined ||\n      (props.parentValue === undefined && props['aria-level'] !== 1)\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(/** #__DE-INDENT__ */ `\n        @fluentui/react-tree [${useTreeItem_unstable.name}]:\n        A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n        and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n        - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n        - \"aria-setsize\": the number of siblings in this level of the tree.\n        - \"aria-level\": the current level of the treeitem.\n        - \"parentValue\": the \"value\" property of the parent item of this item.\n      `);\n    }\n  }\n}\n"],"names":["React","ReactDOM","getIntrinsicElementProps","useId","useEventCallback","slot","elementContains","useMergedRefs","isHTMLElement","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","TreeContext","dataTreeItemValueAttrName","useHasParentContext","treeClassNames","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","navigationMode","forceUpdateRovingTabIndex","level","contextLevel","parentValue","value","internalValue","onClick","onKeyDown","onChange","as","itemType","ariaSelected","ariaExpanded","rest","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","process","env","NODE_ENV","hasTreeContext","useEffect","current","querySelector","root","console","error","treeItem","tabIndex","open","openItems","has","getNextOpen","selectionMode","checked","checkedItems","get","handleClick","event","isEventFromActions","target","isEventFromSubtree","isEventFromSelection","contains","isEventFromExpandIcon","isDefaultPrevented","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","isEventFromTreeItem","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","hasAttribute","ArrowLeft","altKey","ArrowRight","isTypeAheadCharacter","length","match","ctrlKey","metaKey","TypeAhead","handleChange","components","isAsideVisible","isActionsVisible","always","role","undefined","elementType","name"],"mappings":"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"}

package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js

@@ -78,7 +78,6 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useTreeItemStyles_unstable = (state)=>{
-    'use no memo';
     const baseStyles = useBaseStyles();
     const styles = useStyles();
     const { level } = state;

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\nexport const treeItemClassNames = {\n    root: 'fui-TreeItem'\n};\nconst useBaseStyles = makeResetStyles({\n    position: 'relative',\n    cursor: 'pointer',\n    display: 'flex',\n    flexDirection: 'column',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    paddingRight: tokens.spacingHorizontalNone,\n    // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n    ':focus': {\n        outlineStyle: 'none'\n    },\n    ':focus-visible': {\n        outlineStyle: 'none'\n    },\n    // This adds the focus outline for the TreeItemLayout element\n    ...createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusMedium,\n        outlineColor: tokens.colorStrokeFocus2,\n        outlineRadius: tokens.borderRadiusMedium,\n        // FIXME: tokens.strokeWidthThick causes some weird bugs\n        outlineWidth: '2px',\n        outlineStyle: 'solid'\n    }, {\n        customizeSelector: (selector)=>`${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`\n    })\n});\nconst useStyles = makeStyles({\n    ...Object.fromEntries(Array.from({\n        length: 10\n    }, (_, index)=>[\n            `level${index + 1}`,\n            {\n                [treeItemLevelToken]: index + 1\n            }\n        ]))\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n    'use no memo';\n    const baseStyles = useBaseStyles();\n    const styles = useStyles();\n    const { level } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);\n    // For levels beyond the statically generated classes (> 10), fall back to an\n    // inline style that sets the indentation CSS variable dynamically. This avoids\n    // generating an unbounded number of atomic classes while still supporting\n    // arbitrarily deep trees. User-provided inline styles take precedence.\n    if (!isStaticallyDefinedLevel(level)) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.root.style = {\n            [treeItemLevelToken]: level,\n            ...state.root.style\n        };\n    }\n    return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n    return level >= 1 && level <= 10;\n}\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","useStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel","style"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAOCQ,kBAAkB;;;8BA2CY;;;;uBAjDe,gBAAgB;wBAGvC,oBAAoB;AAGhD,2BAA2B;IAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGV,oBAAA,EAAA,YAAA,WAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CA2BrB,CAAC;AACF,MAAMW,SAAS,GAAA,WAAA,OAAGV,eAAA,EAAA;IAAAW,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAF,MAAA,EAAA;IAAA;IAAAG,MAAA,EAAA;QAAAH,MAAA,EAAA;IAAA;IAAAI,MAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;IAAAK,MAAA,EAAA;QAAAL,MAAA,EAAA;IAAA;IAAAM,MAAA,EAAA;QAAAN,MAAA,EAAA;IAAA;IAAAO,MAAA,EAAA;QAAAP,MAAA,EAAA;IAAA;IAAAQ,MAAA,EAAA;QAAAR,MAAA,EAAA;IAAA;IAAAS,OAAA,EAAA;QAAAT,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAU,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,MAAMC,8BAA8BC,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,UAAU,GAAGhB,aAAa,CAAC,CAAC;IAClC,MAAMiB,MAAM,GAAGhB,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEiB,KAAAA,EAAO,GAAGH,KAAK;IACvB,oDAAA;IACAA,KAAK,CAAChB,IAAI,CAACoB,SAAS,OAAG3B,mBAAY,EAACM,kBAAkB,CAACC,IAAI,EAAEiB,UAAU,EAAEI,wBAAwB,CAACF,KAAK,CAAC,IAAID,MAAM,CAAC,CAAA,KAAA,EAAQC,KAAK,EAAE,CAAC,EAAEH,KAAK,CAAChB,IAAI,CAACoB,SAAS,CAAC;IAC1J,6EAAA;IACA,+EAAA;IACA,0EAAA;IACA,uEAAA;IACA,IAAI,CAACC,wBAAwB,CAACF,KAAK,CAAC,EAAE;QAClC,oDAAA;QACAH,KAAK,CAAChB,IAAI,CAACsB,KAAK,GAAG;YACf,CAAC1B,0BAAkB,CAAA,EAAGuB,KAAK;YAC3B,GAAGH,KAAK,CAAChB,IAAI,CAACsB,KAAAA;QAClB,CAAC;IACL;IACA,OAAON,KAAK;AAChB,CAAC;AACD,SAASK,wBAAwBA,CAACF,KAAK,EAAE;IACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC"}
+{"version":3,"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\nexport const treeItemClassNames = {\n    root: 'fui-TreeItem'\n};\nconst useBaseStyles = makeResetStyles({\n    position: 'relative',\n    cursor: 'pointer',\n    display: 'flex',\n    flexDirection: 'column',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    paddingRight: tokens.spacingHorizontalNone,\n    // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n    ':focus': {\n        outlineStyle: 'none'\n    },\n    ':focus-visible': {\n        outlineStyle: 'none'\n    },\n    // This adds the focus outline for the TreeItemLayout element\n    ...createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusMedium,\n        outlineColor: tokens.colorStrokeFocus2,\n        outlineRadius: tokens.borderRadiusMedium,\n        // FIXME: tokens.strokeWidthThick causes some weird bugs\n        outlineWidth: '2px',\n        outlineStyle: 'solid'\n    }, {\n        customizeSelector: (selector)=>`${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`\n    })\n});\nconst useStyles = makeStyles({\n    ...Object.fromEntries(Array.from({\n        length: 10\n    }, (_, index)=>[\n            `level${index + 1}`,\n            {\n                [treeItemLevelToken]: index + 1\n            }\n        ]))\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n    const baseStyles = useBaseStyles();\n    const styles = useStyles();\n    const { level } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);\n    // For levels beyond the statically generated classes (> 10), fall back to an\n    // inline style that sets the indentation CSS variable dynamically. This avoids\n    // generating an unbounded number of atomic classes while still supporting\n    // arbitrarily deep trees. User-provided inline styles take precedence.\n    if (!isStaticallyDefinedLevel(level)) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.root.style = {\n            [treeItemLevelToken]: level,\n            ...state.root.style\n        };\n    }\n    return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n    return level >= 1 && level <= 10;\n}\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","useStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel","style"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAOCQ,kBAAkB;;;8BA2CY;;;;uBAjDe,gBAAgB;wBAGvC,oBAAoB;AAGhD,2BAA2B;IAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGV,oBAAA,EAAA,YAAA,WAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CA2BrB,CAAC;AACF,MAAMW,SAAS,GAAA,WAAA,OAAGV,eAAA,EAAA;IAAAW,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAF,MAAA,EAAA;IAAA;IAAAG,MAAA,EAAA;QAAAH,MAAA,EAAA;IAAA;IAAAI,MAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;IAAAK,MAAA,EAAA;QAAAL,MAAA,EAAA;IAAA;IAAAM,MAAA,EAAA;QAAAN,MAAA,EAAA;IAAA;IAAAO,MAAA,EAAA;QAAAP,MAAA,EAAA;IAAA;IAAAQ,MAAA,EAAA;QAAAR,MAAA,EAAA;IAAA;IAAAS,OAAA,EAAA;QAAAT,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAU,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,MAAMC,8BAA8BC,KAAK,IAAG;IACnD,MAAMC,UAAU,GAAGhB,aAAa,CAAC,CAAC;IAClC,MAAMiB,MAAM,GAAGhB,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEiB,KAAAA,EAAO,GAAGH,KAAK;IACvB,oDAAA;IACAA,KAAK,CAAChB,IAAI,CAACoB,SAAS,OAAG3B,mBAAY,EAACM,kBAAkB,CAACC,IAAI,EAAEiB,UAAU,EAAEI,wBAAwB,CAACF,KAAK,CAAC,IAAID,MAAM,CAAC,CAAA,KAAA,EAAQC,KAAK,EAAE,CAAC,EAAEH,KAAK,CAAChB,IAAI,CAACoB,SAAS,CAAC;IAC1J,6EAAA;IACA,+EAAA;IACA,0EAAA;IACA,uEAAA;IACA,IAAI,CAACC,wBAAwB,CAACF,KAAK,CAAC,EAAE;QAClC,oDAAA;QACAH,KAAK,CAAChB,IAAI,CAACsB,KAAK,GAAG;YACf,CAAC1B,0BAAkB,CAAA,EAAGuB,KAAK;YAC3B,GAAGH,KAAK,CAAChB,IAAI,CAACsB,KAAAA;QAClB,CAAC;IACL;IACA,OAAON,KAAK;AAChB,CAAC;AACD,SAASK,wBAAwBA,CAACF,KAAK,EAAE;IACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC"}

package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.raw.js

@@ -65,7 +65,6 @@ const useStyles = (0, _react.makeStyles)({
         ]))
 });
 const useTreeItemStyles_unstable = (state)=>{
-    'use no memo';
     const baseStyles = useBaseStyles();
     const styles = useStyles();
     const { level } = state;

package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItem/useTreeItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { GriffelStyle } from '@griffel/react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\n\nexport const treeItemClassNames: SlotClassNames<TreeItemSlots> = {\n  root: 'fui-TreeItem',\n};\n\nconst useBaseStyles = makeResetStyles({\n  position: 'relative',\n  cursor: 'pointer',\n  display: 'flex',\n  flexDirection: 'column',\n  boxSizing: 'border-box',\n  backgroundColor: tokens.colorSubtleBackground,\n  color: tokens.colorNeutralForeground2,\n  paddingRight: tokens.spacingHorizontalNone,\n  // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n  ':focus': {\n    outlineStyle: 'none',\n  },\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  // This adds the focus outline for the TreeItemLayout element\n  ...createCustomFocusIndicatorStyle(\n    {\n      borderRadius: tokens.borderRadiusMedium,\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n    },\n    {\n      customizeSelector: selector =>\n        `${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`,\n    },\n  ),\n});\n\ntype StaticLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\ntype StaticLevelProperty = `level${StaticLevel}`;\n\nconst useStyles = makeStyles({\n  ...(Object.fromEntries(\n    Array.from<never, [StaticLevelProperty, TreeItemCSSProperties]>({ length: 10 }, (_, index) => [\n      `level${(index + 1) as StaticLevel}`,\n      { [treeItemLevelToken]: index + 1 },\n    ]),\n  ) as Record<StaticLevelProperty, GriffelStyle>),\n});\n\n/**\n * Apply styling to the TreeItem slots based on the state\n */\nexport const useTreeItemStyles_unstable = (state: TreeItemState): TreeItemState => {\n  'use no memo';\n\n  const baseStyles = useBaseStyles();\n  const styles = useStyles();\n\n  const { level } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    treeItemClassNames.root,\n    baseStyles,\n    isStaticallyDefinedLevel(level) && styles[`level${level}` as StaticLevelProperty],\n    state.root.className,\n  );\n\n  // For levels beyond the statically generated classes (> 10), fall back to an\n  // inline style that sets the indentation CSS variable dynamically. This avoids\n  // generating an unbounded number of atomic classes while still supporting\n  // arbitrarily deep trees. User-provided inline styles take precedence.\n  if (!isStaticallyDefinedLevel(level)) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.style = {\n      [treeItemLevelToken]: level,\n      ...state.root.style,\n    };\n  }\n\n  return state;\n};\n\nfunction isStaticallyDefinedLevel(level: number): level is StaticLevel {\n  return level >= 1 && level <= 10;\n}\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","position","cursor","display","flexDirection","boxSizing","backgroundColor","colorSubtleBackground","color","colorNeutralForeground2","paddingRight","spacingHorizontalNone","outlineStyle","borderRadius","borderRadiusMedium","outlineColor","colorStrokeFocus2","outlineRadius","outlineWidth","customizeSelector","selector","useStyles","Object","fromEntries","Array","from","length","_","index","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel","style"],"mappings":"AAAA;;;;;;;;;;;;IAYaQ,kBAAAA;;;IAoDA+B,0BAAAA;;;;uBA7D6C,iBAAiB;4BAGpD,wBAAwB;8BACC,0BAA0B;wBACvC,qBAAqB;+CACf,mDAAmD;sDAC5C,iEAAiE;AAE1G,2BAA0D;IAC/D9B,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAgBV,sBAAAA,EAAgB;IACpCW,UAAU;IACVC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,iBAAiBb,kBAAAA,CAAOc,qBAAqB;IAC7CC,OAAOf,kBAAAA,CAAOgB,uBAAuB;IACrCC,cAAcjB,kBAAAA,CAAOkB,qBAAqB;IAC1C,iHAAiH;IACjH,UAAU;QACRC,cAAc;IAChB;IACA,kBAAkB;QAChBA,cAAc;IAChB;IACA,6DAA6D;IAC7D,OAAGlB,6CAAAA,EACD;QACEmB,cAAcpB,kBAAAA,CAAOqB,kBAAkB;QACvCC,cAActB,kBAAAA,CAAOuB,iBAAiB;QACtCC,eAAexB,kBAAAA,CAAOqB,kBAAkB;QACxC,wDAAwD;QACxDI,cAAc;QACdN,cAAc;IAChB,GACA;QACEO,mBAAmBC,CAAAA,WACjB,GAAGA,SAAS,IAAI,EAAExB,uDAAAA,CAAyBG,IAAI,CAAC,EAAE,EAAEqB,SAAS,IAAI,EAAEvB,qEAAAA,CAAgCE,IAAI,EAAE;IAC7G,EACD;AACH;AAKA,MAAMsB,gBAAY9B,iBAAAA,EAAW;IAC3B,GAAI+B,OAAOC,WAAW,CACpBC,MAAMC,IAAI,CAAsD;QAAEC,QAAQ;IAAG,GAAG,CAACC,GAAGC,QAAU;YAC5F,CAAC,KAAK,EAAGA,QAAQ,GAAmB;YACpC;gBAAE,CAACjC,0BAAAA,CAAmB,EAAEiC,QAAQ;YAAE;SACnC,EACF;AACH;AAKO,mCAAmC,CAACE;IACzC;IAEA,MAAMC,aAAa/B;IACnB,MAAMgC,SAASX;IAEf,MAAM,EAAEY,KAAK,EAAE,GAAGH;IAElB,oDAAoD;IACpDA,MAAM/B,IAAI,CAACmC,SAAS,OAAG1C,mBAAAA,EACrBM,mBAAmBC,IAAI,EACvBgC,YACAI,yBAAyBF,UAAUD,MAAM,CAAC,CAAC,KAAK,EAAEC,OAAO,CAAwB,EACjFH,MAAM/B,IAAI,CAACmC,SAAS;IAGtB,6EAA6E;IAC7E,+EAA+E;IAC/E,0EAA0E;IAC1E,uEAAuE;IACvE,IAAI,CAACC,yBAAyBF,QAAQ;QACpC,oDAAoD;QACpDH,MAAM/B,IAAI,CAACqC,KAAK,GAAG;YACjB,CAACzC,0BAAAA,CAAmB,EAAEsC;YACtB,GAAGH,MAAM/B,IAAI,CAACqC,KAAK;QACrB;IACF;IAEA,OAAON;AACT,EAAE;AAEF,SAASK,yBAAyBF,KAAa;IAC7C,OAAOA,SAAS,KAAKA,SAAS;AAChC"}
+{"version":3,"sources":["../src/components/TreeItem/useTreeItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { GriffelStyle } from '@griffel/react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\n\nexport const treeItemClassNames: SlotClassNames<TreeItemSlots> = {\n  root: 'fui-TreeItem',\n};\n\nconst useBaseStyles = makeResetStyles({\n  position: 'relative',\n  cursor: 'pointer',\n  display: 'flex',\n  flexDirection: 'column',\n  boxSizing: 'border-box',\n  backgroundColor: tokens.colorSubtleBackground,\n  color: tokens.colorNeutralForeground2,\n  paddingRight: tokens.spacingHorizontalNone,\n  // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n  ':focus': {\n    outlineStyle: 'none',\n  },\n  ':focus-visible': {\n    outlineStyle: 'none',\n  },\n  // This adds the focus outline for the TreeItemLayout element\n  ...createCustomFocusIndicatorStyle(\n    {\n      borderRadius: tokens.borderRadiusMedium,\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n    },\n    {\n      customizeSelector: selector =>\n        `${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`,\n    },\n  ),\n});\n\ntype StaticLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\ntype StaticLevelProperty = `level${StaticLevel}`;\n\nconst useStyles = makeStyles({\n  ...(Object.fromEntries(\n    Array.from<never, [StaticLevelProperty, TreeItemCSSProperties]>({ length: 10 }, (_, index) => [\n      `level${(index + 1) as StaticLevel}`,\n      { [treeItemLevelToken]: index + 1 },\n    ]),\n  ) as Record<StaticLevelProperty, GriffelStyle>),\n});\n\n/**\n * Apply styling to the TreeItem slots based on the state\n */\nexport const useTreeItemStyles_unstable = (state: TreeItemState): TreeItemState => {\n  const baseStyles = useBaseStyles();\n  const styles = useStyles();\n\n  const { level } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    treeItemClassNames.root,\n    baseStyles,\n    isStaticallyDefinedLevel(level) && styles[`level${level}` as StaticLevelProperty],\n    state.root.className,\n  );\n\n  // For levels beyond the statically generated classes (> 10), fall back to an\n  // inline style that sets the indentation CSS variable dynamically. This avoids\n  // generating an unbounded number of atomic classes while still supporting\n  // arbitrarily deep trees. User-provided inline styles take precedence.\n  if (!isStaticallyDefinedLevel(level)) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.style = {\n      [treeItemLevelToken]: level,\n      ...state.root.style,\n    };\n  }\n\n  return state;\n};\n\nfunction isStaticallyDefinedLevel(level: number): level is StaticLevel {\n  return level >= 1 && level <= 10;\n}\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","position","cursor","display","flexDirection","boxSizing","backgroundColor","colorSubtleBackground","color","colorNeutralForeground2","paddingRight","spacingHorizontalNone","outlineStyle","borderRadius","borderRadiusMedium","outlineColor","colorStrokeFocus2","outlineRadius","outlineWidth","customizeSelector","selector","useStyles","Object","fromEntries","Array","from","length","_","index","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel","style"],"mappings":"AAAA;;;;;;;;;;;;IAYaQ,kBAAAA;;;IAoDA+B,0BAAAA;;;;uBA7D6C,iBAAiB;4BAGpD,wBAAwB;8BACC,0BAA0B;wBACvC,qBAAqB;+CACf,mDAAmD;sDAC5C,iEAAiE;AAE1G,2BAA0D;IAC/D9B,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAgBV,sBAAAA,EAAgB;IACpCW,UAAU;IACVC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,iBAAiBb,kBAAAA,CAAOc,qBAAqB;IAC7CC,OAAOf,kBAAAA,CAAOgB,uBAAuB;IACrCC,cAAcjB,kBAAAA,CAAOkB,qBAAqB;IAC1C,iHAAiH;IACjH,UAAU;QACRC,cAAc;IAChB;IACA,kBAAkB;QAChBA,cAAc;IAChB;IACA,6DAA6D;IAC7D,OAAGlB,6CAAAA,EACD;QACEmB,cAAcpB,kBAAAA,CAAOqB,kBAAkB;QACvCC,cAActB,kBAAAA,CAAOuB,iBAAiB;QACtCC,eAAexB,kBAAAA,CAAOqB,kBAAkB;QACxC,wDAAwD;QACxDI,cAAc;QACdN,cAAc;IAChB,GACA;QACEO,mBAAmBC,CAAAA,WACjB,GAAGA,SAAS,IAAI,EAAExB,uDAAAA,CAAyBG,IAAI,CAAC,EAAE,EAAEqB,SAAS,IAAI,EAAEvB,qEAAAA,CAAgCE,IAAI,EAAE;IAC7G,EACD;AACH;AAKA,MAAMsB,gBAAY9B,iBAAAA,EAAW;IAC3B,GAAI+B,OAAOC,WAAW,CACpBC,MAAMC,IAAI,CAAsD;QAAEC,QAAQ;IAAG,GAAG,CAACC,GAAGC,QAAU;YAC5F,CAAC,KAAK,EAAGA,QAAQ,GAAmB;YACpC;gBAAE,CAACjC,0BAAAA,CAAmB,EAAEiC,QAAQ;YAAE;SACnC,EACF;AACH;AAKO,mCAAmC,CAACE;IACzC,MAAMC,aAAa/B;IACnB,MAAMgC,SAASX;IAEf,MAAM,EAAEY,KAAK,EAAE,GAAGH;IAElB,oDAAoD;IACpDA,MAAM/B,IAAI,CAACmC,SAAS,OAAG1C,mBAAAA,EACrBM,mBAAmBC,IAAI,EACvBgC,YACAI,yBAAyBF,UAAUD,MAAM,CAAC,CAAC,KAAK,EAAEC,OAAO,CAAwB,EACjFH,MAAM/B,IAAI,CAACmC,SAAS;IAGtB,6EAA6E;IAC7E,+EAA+E;IAC/E,0EAA0E;IAC1E,uEAAuE;IACvE,IAAI,CAACC,yBAAyBF,QAAQ;QACpC,oDAAoD;QACpDH,MAAM/B,IAAI,CAACqC,KAAK,GAAG;YACjB,CAACzC,0BAAAA,CAAmB,EAAEsC;YACtB,GAAGH,MAAM/B,IAAI,CAACqC,KAAK;QACrB;IACF;IAEA,OAAON;AACT,EAAE;AAEF,SAASK,yBAAyBF,KAAa;IAC7C,OAAOA,SAAS,KAAKA,SAAS;AAChC"}

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js

@@ -19,7 +19,6 @@ const _TreeItemChevron = require("../TreeItemChevron");
 const _reacttabster = require("@fluentui/react-tabster");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const useTreeItemLayout_unstable = (props, ref)=>{
-    'use no memo';
     const { main, iconAfter, iconBefore } = props;
     const layoutRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.layoutRef);
     const selectionMode = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.selectionMode);

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItemLayout/useTreeItemLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  isResolvedShorthand,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  elementContains,\n  useControllableState,\n} from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type {\n  TreeItemLayoutActionSlotProps,\n  TreeItemLayoutActionVisibilityChangeData,\n  TreeItemLayoutProps,\n  TreeItemLayoutState,\n} from './TreeItemLayout.types';\nimport type { CheckboxProps } from '@fluentui/react-checkbox';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport type { RadioProps } from '@fluentui/react-radio';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup, useIsNavigatingWithKeyboard } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  'use no memo';\n\n  const { main, iconAfter, iconBefore } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const navigationMode = useTreeContext_unstable(ctx => ctx.navigationMode ?? 'tree');\n\n  const [isActionsVisibleFromProps, onActionVisibilityChange]: [\n    TreeItemLayoutActionSlotProps['visible'],\n    TreeItemLayoutActionSlotProps['onVisibilityChange'],\n  ] = isResolvedShorthand(props.actions)\n    ? // .visible .onVisibilityChange prop should not be propagated to the DOM\n      [props.actions.visible, props.actions.onVisibilityChange]\n    : [undefined, undefined];\n\n  const [isActionsVisible, setIsActionsVisible] = useControllableState({\n    state: isActionsVisibleFromProps,\n    initialState: false,\n  });\n\n  const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n  const actionsRefInternal = React.useRef<HTMLDivElement>(null);\n  const treeItemRef = useTreeItemContext_unstable(ctx => ctx.treeItemRef);\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n  const checked = useTreeItemContext_unstable(ctx => ctx.checked);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n  // eslint-disable-next-line react-hooks/refs\n  assertIsRefObject(treeItemRef);\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n  // eslint-disable-next-line react-hooks/refs\n  assertIsRefObject(subtreeRef);\n\n  const setActionsVisibleIfNotFromSubtree = React.useCallback(\n    (event: MouseEvent | FocusEvent) => {\n      const isTargetFromSubtree = Boolean(\n        subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n      );\n      if (!isTargetFromSubtree) {\n        onActionVisibilityChange?.(event, {\n          visible: true,\n          event,\n          type: event.type,\n        } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n        if (event.defaultPrevented) {\n          return;\n        }\n        setIsActionsVisible(true);\n      }\n    },\n    [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\n  );\n\n  const { targetDocument } = useFluent();\n  const isNavigatingWithKeyboard = useIsNavigatingWithKeyboard();\n\n  const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n    (event: FocusEvent | MouseEvent) => {\n      const isRelatedTargetFromActions = () =>\n        Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget as Node));\n      const isRelatedTargetFromTreeItem = () =>\n        Boolean(treeItemRef.current && elementContains(treeItemRef.current, event.relatedTarget as Node));\n      const isTargetFromActions = () => Boolean(actionsRefInternal.current?.contains(event.target as Node));\n      if (isRelatedTargetFromActions()) {\n        onActionVisibilityChange?.(event, {\n          visible: true,\n          event,\n          type: event.type,\n        } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n        if (event.defaultPrevented) {\n          return;\n        }\n        setIsActionsVisible(true);\n        return;\n      }\n      if (isTargetFromActions() && isRelatedTargetFromTreeItem()) {\n        return;\n      }\n      // when a mouseout event happens during keyboard interaction\n      // we should not hide the actions if the activeElement is the treeitem or an action\n      // as the focus on the treeitem takes precedence over the mouseout event\n      if (\n        event.type === 'mouseout' &&\n        isNavigatingWithKeyboard() &&\n        (targetDocument?.activeElement === treeItemRef.current ||\n          elementContains(actionsRefInternal.current, targetDocument?.activeElement as Node))\n      ) {\n        return;\n      }\n      onActionVisibilityChange?.(event, {\n        visible: false,\n        event,\n        type: event.type,\n      } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n      if (event.defaultPrevented) {\n        return;\n      }\n      setIsActionsVisible(false);\n    },\n    [setIsActionsVisible, onActionVisibilityChange, treeItemRef, isNavigatingWithKeyboard, targetDocument],\n  );\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: isBranch,\n    defaultProps: {\n      children: <TreeItemChevron />,\n      'aria-hidden': true,\n    },\n    elementType: 'div',\n  });\n  const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconRefs;\n  }\n  const arrowNavigationProps = useArrowNavigationGroup({ circular: navigationMode === 'tree', axis: 'horizontal' });\n  const actions = isActionsVisible\n    ? slot.optional(props.actions, {\n        defaultProps: { ...arrowNavigationProps, role: 'toolbar' },\n        elementType: 'div',\n      })\n    : undefined;\n  delete actions?.visible;\n  delete actions?.onVisibilityChange;\n\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef, actionsRefInternal);\n  const handleActionsBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n    if (isResolvedShorthand(props.actions)) {\n      props.actions.onBlur?.(event);\n    }\n    const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget as Node));\n    onActionVisibilityChange?.(event, {\n      visible: isRelatedTargetFromActions,\n      event,\n      type: event.type,\n    } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n    setIsActionsVisible(isRelatedTargetFromActions);\n  });\n  if (actions) {\n    actions.ref = actionsRefs;\n    actions.onBlur = handleActionsBlur;\n  }\n\n  const hasActions = Boolean(props.actions);\n\n  React.useEffect(() => {\n    if (treeItemRef.current && hasActions) {\n      const treeItemElement = treeItemRef.current;\n\n      const handleMouseOver = setActionsVisibleIfNotFromSubtree;\n      const handleMouseOut = setActionsInvisibleIfNotFromSubtree;\n      const handleFocus = setActionsVisibleIfNotFromSubtree;\n      const handleBlur = setActionsInvisibleIfNotFromSubtree;\n\n      treeItemElement.addEventListener('mouseover', handleMouseOver);\n      treeItemElement.addEventListener('mouseout', handleMouseOut);\n      treeItemElement.addEventListener('focus', handleFocus);\n      treeItemElement.addEventListener('blur', handleBlur);\n\n      return () => {\n        treeItemElement.removeEventListener('mouseover', handleMouseOver);\n        treeItemElement.removeEventListener('mouseout', handleMouseOut);\n        treeItemElement.removeEventListener('focus', handleFocus);\n        treeItemElement.removeEventListener('blur', handleBlur);\n      };\n    }\n  }, [hasActions, treeItemRef, setActionsVisibleIfNotFromSubtree, setActionsInvisibleIfNotFromSubtree]);\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      main: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    buttonContextValue: { size: 'small' },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\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, layoutRef) as React.Ref<HTMLDivElement>,\n      }),\n      {\n        elementType: 'div',\n      },\n    ),\n    iconBefore: slot.optional(iconBefore, { elementType: 'div' }),\n    main: slot.always(main, { elementType: 'div' }),\n    iconAfter: slot.optional(iconAfter, { elementType: 'div' }),\n    aside: !isActionsVisible ? slot.optional(props.aside, { elementType: 'div' }) : undefined,\n    actions,\n    expandIcon,\n    selector: slot.optional(props.selector, {\n      renderByDefault: selectionMode !== 'none',\n      defaultProps: {\n        checked,\n        tabIndex: -1,\n        'aria-hidden': true,\n        ref: selectionRef,\n        // casting here to a union between checkbox and radio\n        // since ref is not present on the selector signature\n        // FIXME: look into Slot type to see if we can make this work\n      } as CheckboxProps | RadioProps,\n      elementType: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<\n        CheckboxProps | RadioProps\n      >,\n    }),\n  };\n};\n\nfunction assertIsRefObject<Value>(ref?: React.Ref<Value>): asserts ref is React.RefObject<Value> {\n  if (process.env.NODE_ENV !== 'production') {\n    if (typeof ref !== 'object' || ref === null || !('current' in ref)) {\n      throw new Error(`\n        @fluentui/react-tree [${useTreeItemLayout_unstable.name}]:\n        Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.\n      `);\n    }\n  }\n}\n"],"names":["React","getIntrinsicElementProps","isResolvedShorthand","useMergedRefs","slot","useEventCallback","elementContains","useControllableState","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useArrowNavigationGroup","useIsNavigatingWithKeyboard","useFluent_unstable","useFluent","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","ctx","selectionMode","navigationMode","isActionsVisibleFromProps","onActionVisibilityChange","actions","visible","onVisibilityChange","undefined","isActionsVisible","setIsActionsVisible","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","target","type","defaultPrevented","targetDocument","isNavigatingWithKeyboard","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","isRelatedTargetFromTreeItem","isTargetFromActions","contains","activeElement","expandIcon","optional","renderByDefault","defaultProps","children","elementType","expandIconRefs","arrowNavigationProps","circular","axis","role","actionsRefs","handleActionsBlur","onBlur","currentTarget","hasActions","useEffect","treeItemElement","handleMouseOver","handleMouseOut","handleFocus","handleBlur","addEventListener","removeEventListener","components","root","aside","selector","buttonContextValue","size","always","tabIndex","process","env","NODE_ENV","Error","name"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TreeItemLayout/useTreeItemLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  isResolvedShorthand,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  elementContains,\n  useControllableState,\n} from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type {\n  TreeItemLayoutActionSlotProps,\n  TreeItemLayoutActionVisibilityChangeData,\n  TreeItemLayoutProps,\n  TreeItemLayoutState,\n} from './TreeItemLayout.types';\nimport type { CheckboxProps } from '@fluentui/react-checkbox';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport type { RadioProps } from '@fluentui/react-radio';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup, useIsNavigatingWithKeyboard } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  const { main, iconAfter, iconBefore } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const navigationMode = useTreeContext_unstable(ctx => ctx.navigationMode ?? 'tree');\n\n  const [isActionsVisibleFromProps, onActionVisibilityChange]: [\n    TreeItemLayoutActionSlotProps['visible'],\n    TreeItemLayoutActionSlotProps['onVisibilityChange'],\n  ] = isResolvedShorthand(props.actions)\n    ? // .visible .onVisibilityChange prop should not be propagated to the DOM\n      [props.actions.visible, props.actions.onVisibilityChange]\n    : [undefined, undefined];\n\n  const [isActionsVisible, setIsActionsVisible] = useControllableState({\n    state: isActionsVisibleFromProps,\n    initialState: false,\n  });\n\n  const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n  const actionsRefInternal = React.useRef<HTMLDivElement>(null);\n  const treeItemRef = useTreeItemContext_unstable(ctx => ctx.treeItemRef);\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n  const checked = useTreeItemContext_unstable(ctx => ctx.checked);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n  // eslint-disable-next-line react-hooks/refs\n  assertIsRefObject(treeItemRef);\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n  // eslint-disable-next-line react-hooks/refs\n  assertIsRefObject(subtreeRef);\n\n  const setActionsVisibleIfNotFromSubtree = React.useCallback(\n    (event: MouseEvent | FocusEvent) => {\n      const isTargetFromSubtree = Boolean(\n        subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n      );\n      if (!isTargetFromSubtree) {\n        onActionVisibilityChange?.(event, {\n          visible: true,\n          event,\n          type: event.type,\n        } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n        if (event.defaultPrevented) {\n          return;\n        }\n        setIsActionsVisible(true);\n      }\n    },\n    [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\n  );\n\n  const { targetDocument } = useFluent();\n  const isNavigatingWithKeyboard = useIsNavigatingWithKeyboard();\n\n  const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n    (event: FocusEvent | MouseEvent) => {\n      const isRelatedTargetFromActions = () =>\n        Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget as Node));\n      const isRelatedTargetFromTreeItem = () =>\n        Boolean(treeItemRef.current && elementContains(treeItemRef.current, event.relatedTarget as Node));\n      const isTargetFromActions = () => Boolean(actionsRefInternal.current?.contains(event.target as Node));\n      if (isRelatedTargetFromActions()) {\n        onActionVisibilityChange?.(event, {\n          visible: true,\n          event,\n          type: event.type,\n        } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n        if (event.defaultPrevented) {\n          return;\n        }\n        setIsActionsVisible(true);\n        return;\n      }\n      if (isTargetFromActions() && isRelatedTargetFromTreeItem()) {\n        return;\n      }\n      // when a mouseout event happens during keyboard interaction\n      // we should not hide the actions if the activeElement is the treeitem or an action\n      // as the focus on the treeitem takes precedence over the mouseout event\n      if (\n        event.type === 'mouseout' &&\n        isNavigatingWithKeyboard() &&\n        (targetDocument?.activeElement === treeItemRef.current ||\n          elementContains(actionsRefInternal.current, targetDocument?.activeElement as Node))\n      ) {\n        return;\n      }\n      onActionVisibilityChange?.(event, {\n        visible: false,\n        event,\n        type: event.type,\n      } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n      if (event.defaultPrevented) {\n        return;\n      }\n      setIsActionsVisible(false);\n    },\n    [setIsActionsVisible, onActionVisibilityChange, treeItemRef, isNavigatingWithKeyboard, targetDocument],\n  );\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: isBranch,\n    defaultProps: {\n      children: <TreeItemChevron />,\n      'aria-hidden': true,\n    },\n    elementType: 'div',\n  });\n  const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconRefs;\n  }\n  const arrowNavigationProps = useArrowNavigationGroup({ circular: navigationMode === 'tree', axis: 'horizontal' });\n  const actions = isActionsVisible\n    ? slot.optional(props.actions, {\n        defaultProps: { ...arrowNavigationProps, role: 'toolbar' },\n        elementType: 'div',\n      })\n    : undefined;\n  delete actions?.visible;\n  delete actions?.onVisibilityChange;\n\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef, actionsRefInternal);\n  const handleActionsBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n    if (isResolvedShorthand(props.actions)) {\n      props.actions.onBlur?.(event);\n    }\n    const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget as Node));\n    onActionVisibilityChange?.(event, {\n      visible: isRelatedTargetFromActions,\n      event,\n      type: event.type,\n    } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n    setIsActionsVisible(isRelatedTargetFromActions);\n  });\n  if (actions) {\n    actions.ref = actionsRefs;\n    actions.onBlur = handleActionsBlur;\n  }\n\n  const hasActions = Boolean(props.actions);\n\n  React.useEffect(() => {\n    if (treeItemRef.current && hasActions) {\n      const treeItemElement = treeItemRef.current;\n\n      const handleMouseOver = setActionsVisibleIfNotFromSubtree;\n      const handleMouseOut = setActionsInvisibleIfNotFromSubtree;\n      const handleFocus = setActionsVisibleIfNotFromSubtree;\n      const handleBlur = setActionsInvisibleIfNotFromSubtree;\n\n      treeItemElement.addEventListener('mouseover', handleMouseOver);\n      treeItemElement.addEventListener('mouseout', handleMouseOut);\n      treeItemElement.addEventListener('focus', handleFocus);\n      treeItemElement.addEventListener('blur', handleBlur);\n\n      return () => {\n        treeItemElement.removeEventListener('mouseover', handleMouseOver);\n        treeItemElement.removeEventListener('mouseout', handleMouseOut);\n        treeItemElement.removeEventListener('focus', handleFocus);\n        treeItemElement.removeEventListener('blur', handleBlur);\n      };\n    }\n  }, [hasActions, treeItemRef, setActionsVisibleIfNotFromSubtree, setActionsInvisibleIfNotFromSubtree]);\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      main: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    buttonContextValue: { size: 'small' },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\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, layoutRef) as React.Ref<HTMLDivElement>,\n      }),\n      {\n        elementType: 'div',\n      },\n    ),\n    iconBefore: slot.optional(iconBefore, { elementType: 'div' }),\n    main: slot.always(main, { elementType: 'div' }),\n    iconAfter: slot.optional(iconAfter, { elementType: 'div' }),\n    aside: !isActionsVisible ? slot.optional(props.aside, { elementType: 'div' }) : undefined,\n    actions,\n    expandIcon,\n    selector: slot.optional(props.selector, {\n      renderByDefault: selectionMode !== 'none',\n      defaultProps: {\n        checked,\n        tabIndex: -1,\n        'aria-hidden': true,\n        ref: selectionRef,\n        // casting here to a union between checkbox and radio\n        // since ref is not present on the selector signature\n        // FIXME: look into Slot type to see if we can make this work\n      } as CheckboxProps | RadioProps,\n      elementType: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<\n        CheckboxProps | RadioProps\n      >,\n    }),\n  };\n};\n\nfunction assertIsRefObject<Value>(ref?: React.Ref<Value>): asserts ref is React.RefObject<Value> {\n  if (process.env.NODE_ENV !== 'production') {\n    if (typeof ref !== 'object' || ref === null || !('current' in ref)) {\n      throw new Error(`\n        @fluentui/react-tree [${useTreeItemLayout_unstable.name}]:\n        Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.\n      `);\n    }\n  }\n}\n"],"names":["React","getIntrinsicElementProps","isResolvedShorthand","useMergedRefs","slot","useEventCallback","elementContains","useControllableState","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useArrowNavigationGroup","useIsNavigatingWithKeyboard","useFluent_unstable","useFluent","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","ctx","selectionMode","navigationMode","isActionsVisibleFromProps","onActionVisibilityChange","actions","visible","onVisibilityChange","undefined","isActionsVisible","setIsActionsVisible","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","target","type","defaultPrevented","targetDocument","isNavigatingWithKeyboard","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","isRelatedTargetFromTreeItem","isTargetFromActions","contains","activeElement","expandIcon","optional","renderByDefault","defaultProps","children","elementType","expandIconRefs","arrowNavigationProps","circular","axis","role","actionsRefs","handleActionsBlur","onBlur","currentTarget","hasActions","useEffect","treeItemElement","handleMouseOver","handleMouseOut","handleFocus","handleBlur","addEventListener","removeEventListener","components","root","aside","selector","buttonContextValue","size","always","tabIndex","process","env","NODE_ENV","Error","name"],"mappings":"AAAA;;;;;+BAoCaiB;;;;;;;iEAlCU,QAAQ;gCASxB,4BAA4B;0BACkC,iBAAiB;+BAQ7D,2BAA2B;4BAE9B,wBAAwB;iCACd,qBAAqB;8BACgB,0BAA0B;qCAC/C,kCAAkC;AAW3E,mCAAmC,CACxCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAAGJ;IAExC,MAAMK,YAAYf,yCAAAA,EAA4BgB,CAAAA,MAAOA,IAAID,SAAS;IAClE,MAAME,oBAAgBhB,iCAAAA,EAAwBe,CAAAA,MAAOA,IAAIC,aAAa;IACtE,MAAMC,qBAAiBjB,iCAAAA,EAAwBe,CAAAA;YAAOA;eAAAA,uBAAAA,IAAIE,cAAAA,AAAc,MAAA,QAAlBF,wBAAAA,KAAAA,IAAAA,sBAAsB;;IAE5E,MAAM,CAACG,2BAA2BC,yBAAyB,OAGvD1B,mCAAAA,EAAoBgB,MAAMW,OAAO,IAEjC;QAACX,MAAMW,OAAO,CAACC,OAAO;QAAEZ,MAAMW,OAAO,CAACE,kBAAkB;KAAC,GACzD;QAACC;QAAWA;KAAU;IAE1B,MAAM,CAACC,kBAAkBC,oBAAoB,OAAG3B,oCAAAA,EAAqB;QACnE4B,OAAOR;QACPS,cAAc;IAChB;IAEA,MAAMC,mBAAe7B,qCAAAA,EAA4BgB,CAAAA,MAAOA,IAAIa,YAAY;IACxE,MAAMC,oBAAgB9B,qCAAAA,EAA4BgB,CAAAA,MAAOA,IAAIc,aAAa;IAC1E,MAAMC,iBAAa/B,qCAAAA,EAA4BgB,CAAAA,MAAOA,IAAIe,UAAU;IACpE,MAAMC,qBAAqBxC,OAAMyC,MAAM,CAAiB;IACxD,MAAMC,kBAAclC,qCAAAA,EAA4BgB,CAAAA,MAAOA,IAAIkB,WAAW;IACtE,MAAMC,iBAAanC,qCAAAA,EAA4BgB,CAAAA,MAAOA,IAAImB,UAAU;IACpE,MAAMC,UAAUpC,yCAAAA,EAA4BgB,CAAAA,MAAOA,IAAIoB,OAAO;IAC9D,MAAMC,eAAWrC,qCAAAA,EAA4BgB,CAAAA,MAAOA,IAAIsB,QAAQ,KAAK;IAErE,gHAAgH;IAChH,4CAA4C;IAC5CC,kBAAkBL;IAClB,gHAAgH;IAChH,4CAA4C;IAC5CK,kBAAkBJ;IAElB,MAAMK,oCAAoChD,OAAMiD,WAAW,CACzD,CAACC;QACC,MAAMC,sBAAsBC,QAC1BT,WAAWU,OAAO,IAAI/C,mCAAAA,EAAgBqC,WAAWU,OAAO,EAAEH,MAAMI,MAAM;QAExE,IAAI,CAACH,qBAAqB;YACxBvB,6BAAAA,QAAAA,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAA2BsB,OAAO;gBAChCpB,SAAS;gBACToB;gBACAK,MAAML,MAAMK,IAAI;YAClB;YACA,IAAIL,MAAMM,gBAAgB,EAAE;gBAC1B;YACF;YACAtB,oBAAoB;QACtB;IACF,GACA;QAACS;QAAYT;QAAqBN;KAAyB;IAG7D,MAAM,EAAE6B,cAAc,EAAE,OAAGzC,uCAAAA;IAC3B,MAAM0C,+BAA2B5C,yCAAAA;IAEjC,MAAM6C,sCAAsC3D,OAAMiD,WAAW,CAC3D,CAACC;QACC,MAAMU,6BAA6B,IACjCR,QAAQZ,mBAAmBa,OAAO,QAAI/C,+BAAAA,EAAgBkC,mBAAmBa,OAAO,EAAEH,MAAMW,aAAa;QACvG,MAAMC,8BAA8B,IAClCV,QAAQV,YAAYW,OAAO,IAAI/C,mCAAAA,EAAgBoC,YAAYW,OAAO,EAAEH,MAAMW,aAAa;QACzF,MAAME,sBAAsB;gBAAcvB;mBAARY,QAAAA,CAAQZ,8BAAAA,mBAAmBa,OAAAA,AAAO,MAAA,QAA1Bb,gCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,4BAA4BwB,QAAQ,CAACd,MAAMI,MAAM;;QAC3F,IAAIM,8BAA8B;YAChChC,6BAAAA,QAAAA,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAA2BsB,OAAO;gBAChCpB,SAAS;gBACToB;gBACAK,MAAML,MAAMK,IAAI;YAClB;YACA,IAAIL,MAAMM,gBAAgB,EAAE;gBAC1B;YACF;YACAtB,oBAAoB;YACpB;QACF;QACA,IAAI6B,yBAAyBD,+BAA+B;YAC1D;QACF;QACA,4DAA4D;QAC5D,mFAAmF;QACnF,wEAAwE;QACxE,IACEZ,MAAMK,IAAI,KAAK,cACfG,8BACCD,CAAAA,CAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBQ,aAAAA,AAAa,MAAKvB,YAAYW,OAAO,QACpD/C,+BAAAA,EAAgBkC,mBAAmBa,OAAO,EAAEI,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBQ,cAAa,CAAQ,EACnF;YACA;QACF;QACArC,6BAAAA,QAAAA,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAA2BsB,OAAO;YAChCpB,SAAS;YACToB;YACAK,MAAML,MAAMK,IAAI;QAClB;QACA,IAAIL,MAAMM,gBAAgB,EAAE;YAC1B;QACF;QACAtB,oBAAoB;IACtB,GACA;QAACA;QAAqBN;QAA0Bc;QAAagB;QAA0BD;KAAe;IAGxG,MAAMS,aAAa9D,oBAAAA,CAAK+D,QAAQ,CAACjD,MAAMgD,UAAU,EAAE;QACjDE,iBAAiBvB;QACjBwB,cAAc;YACZC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAAC1D,gCAAAA,EAAAA;YACX,eAAe;QACjB;QACA2D,aAAa;IACf;IACA,MAAMC,qBAAiBrE,6BAAAA,EAAc+D,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAY/C,GAAG,EAAEmB;IACtD,IAAI4B,YAAY;QACdA,WAAW/C,GAAG,GAAGqD;IACnB;IACA,MAAMC,2BAAuB5D,qCAAAA,EAAwB;QAAE6D,UAAUhD,mBAAmB;QAAQiD,MAAM;IAAa;IAC/G,MAAM9C,UAAUI,mBACZ7B,oBAAAA,CAAK+D,QAAQ,CAACjD,MAAMW,OAAO,EAAE;QAC3BwC,cAAc;YAAE,GAAGI,oBAAoB;YAAEG,MAAM;QAAU;QACzDL,aAAa;IACf,KACAvC;IACGH,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,OAAAA,OAAAA,QAASC,OAAO;IAChBD,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,OAAAA,OAAAA,QAASE,kBAAkB;IAElC,MAAM8C,cAAc1E,iCAAAA,EAAc0B,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASV,GAAG,EAAEoB,YAAYC;IAC5D,MAAMsC,wBAAoBzE,gCAAAA,EAAiB,CAAC6C;QAC1C,IAAIhD,uCAAAA,EAAoBgB,MAAMW,OAAO,GAAG;gBACtCX,uBAAAA;aAAAA,wBAAAA,CAAAA,iBAAAA,MAAMW,OAAO,AAAPA,EAAQkD,MAAAA,AAAM,MAAA,QAApB7D,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAAA,IAAAA,CAAAA,gBAAuBgC;QACzB;QACA,MAAMU,6BAA6BR,YAAQ9C,+BAAAA,EAAgB4C,MAAM8B,aAAa,EAAE9B,MAAMW,aAAa;QACnGjC,6BAAAA,QAAAA,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAA2BsB,OAAO;YAChCpB,SAAS8B;YACTV;YACAK,MAAML,MAAMK,IAAI;QAClB;QACArB,oBAAoB0B;IACtB;IACA,IAAI/B,SAAS;QACXA,QAAQV,GAAG,GAAG0D;QACdhD,QAAQkD,MAAM,GAAGD;IACnB;IAEA,MAAMG,aAAa7B,QAAQlC,MAAMW,OAAO;IAExC7B,OAAMkF,SAAS,CAAC;QACd,IAAIxC,YAAYW,OAAO,IAAI4B,YAAY;YACrC,MAAME,kBAAkBzC,YAAYW,OAAO;YAE3C,MAAM+B,kBAAkBpC;YACxB,MAAMqC,iBAAiB1B;YACvB,MAAM2B,cAActC;YACpB,MAAMuC,aAAa5B;YAEnBwB,gBAAgBK,gBAAgB,CAAC,aAAaJ;YAC9CD,gBAAgBK,gBAAgB,CAAC,YAAYH;YAC7CF,gBAAgBK,gBAAgB,CAAC,SAASF;YAC1CH,gBAAgBK,gBAAgB,CAAC,QAAQD;YAEzC,OAAO;gBACLJ,gBAAgBM,mBAAmB,CAAC,aAAaL;gBACjDD,gBAAgBM,mBAAmB,CAAC,YAAYJ;gBAChDF,gBAAgBM,mBAAmB,CAAC,SAASH;gBAC7CH,gBAAgBM,mBAAmB,CAAC,QAAQF;YAC9C;QACF;IACF,GAAG;QAACN;QAAYvC;QAAaM;QAAmCW;KAAoC;IAEpG,OAAO;QACL+B,YAAY;YACVC,MAAM;YACNzB,YAAY;YACZ5C,YAAY;YACZF,MAAM;YACNC,WAAW;YACXQ,SAAS;YACT+D,OAAO;YACP,qDAAqD;YACrDC,UAAWpE,kBAAkB,gBAAgBf,uBAAAA,GAAWC,iBAAAA;QAC1D;QACAmF,oBAAoB;YAAEC,MAAM;QAAQ;QACpCJ,MAAMvF,oBAAAA,CAAK4F,MAAM,KACf/F,wCAAAA,EAAyB,OAAO;YAC9B,GAAGiB,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKhB,iCAAAA,EAAcgB,KAAKI;QAC1B,IACA;YACEgD,aAAa;QACf;QAEFjD,YAAYlB,oBAAAA,CAAK+D,QAAQ,CAAC7C,YAAY;YAAEiD,aAAa;QAAM;QAC3DnD,MAAMhB,oBAAAA,CAAK4F,MAAM,CAAC5E,MAAM;YAAEmD,aAAa;QAAM;QAC7ClD,WAAWjB,oBAAAA,CAAK+D,QAAQ,CAAC9C,WAAW;YAAEkD,aAAa;QAAM;QACzDqB,OAAO,CAAC3D,mBAAmB7B,oBAAAA,CAAK+D,QAAQ,CAACjD,MAAM0E,KAAK,EAAE;YAAErB,aAAa;QAAM,KAAKvC;QAChFH;QACAqC;QACA2B,UAAUzF,oBAAAA,CAAK+D,QAAQ,CAACjD,MAAM2E,QAAQ,EAAE;YACtCzB,iBAAiB3C,kBAAkB;YACnC4C,cAAc;gBACZzB;gBACAqD,UAAU,CAAC;gBACX,eAAe;gBACf9E,KAAKkB;YAIP;YACAkC,aAAc9C,kBAAkB,gBAAgBf,uBAAAA,GAAWC,iBAAAA;QAG7D;IACF;AACF,EAAE;AAEF,SAASoC,kBAAyB5B,GAAsB;IACtD,IAAI+E,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOjF,QAAQ,YAAYA,QAAQ,QAAQ,CAAE,CAAA,aAAaA,GAAAA,CAAE,EAAI;YAClE,MAAM,IAAIkF,MAAM,CAAC;8BACO,EAAEpF,2BAA2BqF,IAAI,CAAC;;MAE1D,CAAC;QACH;IACF;AACF"}

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js

@@ -169,7 +169,6 @@ const useIconAfterStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useTreeItemLayoutStyles_unstable = (state)=>{
-    'use no memo';
     const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;
     const rootStyles = useRootStyles();
     const rootBaseStyles = useRootBaseStyles();