@fluentui/react-tree 9.4.9 → 9.4.10

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Wed, 01 Nov 2023 12:51:07 GMT",
+      "date": "Wed, 01 Nov 2023 19:15:30 GMT",
+      "tag": "@fluentui/react-tree_v9.4.10",
+      "version": "9.4.10",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "88574cc717e7bffe6f8f0f5fce191350066e7a62",
+            "comment": "chore: stop unnecessary re-rendering when no actions are available"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 01 Nov 2023 12:55:59 GMT",
       "tag": "@fluentui/react-tree_v9.4.9",
       "version": "9.4.9",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Wed, 01 Nov 2023 12:51:07 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Nov 2023 19:15:30 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.10)
+
+Wed, 01 Nov 2023 19:15:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.9..@fluentui/react-tree_v9.4.10)
+
+### Patches
+
+- chore: stop unnecessary re-rendering when no actions are available ([PR #29694](https://github.com/microsoft/fluentui/pull/29694) by bernardo.sunderhus@gmail.com)
+
 ## [9.4.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.9)
 
-Wed, 01 Nov 2023 12:51:07 GMT 
+Wed, 01 Nov 2023 12:55:59 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.8..@fluentui/react-tree_v9.4.9)
 
 ### Patches

package/dist/index.d.ts

@@ -460,13 +460,20 @@ export declare const TreeItem: ForwardRefComponent<TreeItemProps>;
 export declare const treeItemClassNames: SlotClassNames<TreeItemSlots>;
 
 export declare type TreeItemContextValue = {
+    /**
+     * @deprecated - this value is irrelevant for the tree item
+     */
     isActionsVisible: boolean;
+    /**
+     * @deprecated - this value is irrelevant for the tree item
+     */
     isAsideVisible: boolean;
     selectionRef: React_2.Ref<HTMLInputElement>;
     actionsRef: React_2.Ref<HTMLDivElement>;
     expandIconRef: React_2.Ref<HTMLDivElement>;
     layoutRef: React_2.Ref<HTMLDivElement>;
     subtreeRef: React_2.Ref<HTMLDivElement>;
+    treeItemRef?: React_2.RefObject<HTMLDivElement>;
     itemType: TreeItemType;
     value: TreeItemValue;
     open: boolean;

package/lib/components/TreeItem/useTreeItem.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { getIntrinsicElementProps, useId, useMergedRefs, useEventCallback, slot, elementContains } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useId, useEventCallback, slot, elementContains, useMergedRefs } from '@fluentui/react-utilities';
 import { Space } from '@fluentui/keyboard-keys';
 import { treeDataTypes } from '../../utils/tokens';
 import { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';
@@ -30,16 +30,12 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
     var _props_value;
     const value = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : internalValue;
     const { onClick, onKeyDown, onMouseOver, onFocus, onMouseOut, onBlur, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
-    const [isActionsVisible, setActionsVisible] = React.useState(false);
-    const [isAsideVisible, setAsideVisible] = React.useState(true);
-    const handleActionsRef = React.useCallback((actionsElement)=>{
-        setAsideVisible(actionsElement === null);
-    }, []);
     const actionsRef = React.useRef(null);
     const expandIconRef = React.useRef(null);
     const layoutRef = React.useRef(null);
     const subtreeRef = React.useRef(null);
     const selectionRef = React.useRef(null);
+    const treeItemRef = React.useRef(null);
     const open = useTreeContext_unstable((ctx)=>{
         var _props_open;
         return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);
@@ -183,38 +179,6 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             });
         }
     });
-    const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{
-        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));
-        if (!isTargetFromSubtree) {
-            setActionsVisible(true);
-        }
-    }, []);
-    const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{
-        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));
-        const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));
-        if (isRelatedTargetFromActions) {
-            return setActionsVisible(true);
-        }
-        if (!isTargetFromSubtree) {
-            return setActionsVisible(false);
-        }
-    }, []);
-    const handleMouseOver = useEventCallback((event)=>{
-        onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(event);
-        setActionsVisibleIfNotFromSubtree(event);
-    });
-    const handleFocus = useEventCallback((event)=>{
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-        setActionsVisibleIfNotFromSubtree(event);
-    });
-    const handleMouseOut = useEventCallback((event)=>{
-        onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(event);
-        setActionsInvisibleIfNotFromSubtree(event);
-    });
-    const handleBlur = useEventCallback((event)=>{
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-        setActionsInvisibleIfNotFromSubtree(event);
-    });
     const handleChange = useEventCallback((event)=>{
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
         if (event.isDefaultPrevented()) {
@@ -242,19 +206,22 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
         layoutRef,
         selectionRef,
         expandIconRef,
-        actionsRef: useMergedRefs(handleActionsRef, actionsRef),
+        treeItemRef,
+        actionsRef,
         itemType,
         level,
         components: {
             root: 'div'
         },
-        isAsideVisible,
-        isActionsVisible,
+        // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false
+        isAsideVisible: false,
+        // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false
+        isActionsVisible: false,
         root: slot.always(getIntrinsicElementProps(as, {
             tabIndex: -1,
             [dataTreeItemValueAttrName]: value,
             ...rest,
-            ref,
+            ref: useMergedRefs(ref, treeItemRef),
             role: 'treeitem',
             'aria-level': level,
             'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
@@ -265,10 +232,6 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             'aria-expanded': itemType === 'branch' ? open : undefined,
             onClick: handleClick,
             onKeyDown: handleKeyDown,
-            onMouseOver: handleMouseOver,
-            onFocus: handleFocus,
-            onMouseOut: handleMouseOut,
-            onBlur: handleBlur,
             onChange: handleChange
         }), {
             elementType: 'div'

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport {\n  getIntrinsicElementProps,\n  useId,\n  useMergedRefs,\n  useEventCallback,\n  slot,\n  elementContains,\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 { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 { 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    onMouseOver,\n    onFocus,\n    onMouseOut,\n    onBlur,\n    onChange,\n    as = 'div',\n    itemType = 'leaf',\n    'aria-level': level = contextLevel,\n    ...rest\n  } = props;\n\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n    setAsideVisible(actionsElement === null);\n  }, []);\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\n  const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\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    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n    if (isEventFromSelection) {\n      return;\n    }\n    const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n    ReactDOM.unstable_batchedUpdates(() => {\n      const data = {\n        event,\n        value,\n        open: !open,\n        target: event.currentTarget,\n        type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n      } as const;\n      props.onOpenChange?.(event, data);\n      requestTreeResponse({\n        ...data,\n        itemType,\n        requestType: 'open',\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    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case Space:\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      case treeDataTypes.Enter: {\n        return event.currentTarget.click();\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft: {\n        // do not navigate to parent if the item is on the top level\n        if (level === 1 && !open) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'open' : 'navigate',\n        });\n      }\n      case treeDataTypes.ArrowRight:\n        // do not navigate or open if the item is a leaf\n        if (itemType === 'leaf') {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (!open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'navigate' : 'open',\n        });\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 setActionsVisibleIfNotFromSubtree = React.useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  }, []);\n  const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement> | React.FocusEvent<HTMLDivElement>) => {\n      const isTargetFromSubtree = Boolean(\n        subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n      );\n      const isRelatedTargetFromActions = Boolean(\n        actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n      );\n      if (isRelatedTargetFromActions) {\n        return setActionsVisible(true);\n      }\n      if (!isTargetFromSubtree) {\n        return setActionsVisible(false);\n      }\n    },\n    [],\n  );\n\n  const handleMouseOver = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseOver?.(event);\n    setActionsVisibleIfNotFromSubtree(event);\n  });\n\n  const handleFocus = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n    onFocus?.(event);\n    setActionsVisibleIfNotFromSubtree(event);\n  });\n\n  const handleMouseOut = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseOut?.(event);\n    setActionsInvisibleIfNotFromSubtree(event);\n  });\n  const handleBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n    onBlur?.(event);\n    setActionsInvisibleIfNotFromSubtree(event);\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    actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    isAsideVisible,\n    isActionsVisible,\n    root: slot.always(\n      getIntrinsicElementProps(as, {\n        tabIndex: -1,\n        [dataTreeItemValueAttrName]: value,\n        ...rest,\n        ref,\n        role: 'treeitem',\n        'aria-level': level,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        // aria-selected is required according to WAI-ARIA spec\n        // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n        // Casting: when selectionMode is 'single', checked is a boolean\n        'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n        'aria-expanded': itemType === 'branch' ? open : undefined,\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onMouseOver: handleMouseOver,\n        onFocus: handleFocus,\n        onMouseOut: handleMouseOut,\n        onBlur: handleBlur,\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","useMergedRefs","useEventCallback","slot","elementContains","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","parentValue","value","internalValue","onClick","onKeyDown","onMouseOver","onFocus","onMouseOut","onBlur","onChange","as","itemType","rest","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","setActionsVisibleIfNotFromSubtree","isTargetFromSubtree","Boolean","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","handleMouseOver","handleFocus","handleMouseOut","handleBlur","handleChange","components","root","always","tabIndex","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport {\n  getIntrinsicElementProps,\n  useId,\n  useEventCallback,\n  slot,\n  elementContains,\n  useMergedRefs,\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 { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 { 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    onMouseOver,\n    onFocus,\n    onMouseOut,\n    onBlur,\n    onChange,\n    as = 'div',\n    itemType = 'leaf',\n    'aria-level': level = contextLevel,\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  const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\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    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n    if (isEventFromSelection) {\n      return;\n    }\n    const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n    ReactDOM.unstable_batchedUpdates(() => {\n      const data = {\n        event,\n        value,\n        open: !open,\n        target: event.currentTarget,\n        type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n      } as const;\n      props.onOpenChange?.(event, data);\n      requestTreeResponse({\n        ...data,\n        itemType,\n        requestType: 'open',\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    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case Space:\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      case treeDataTypes.Enter: {\n        return event.currentTarget.click();\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft: {\n        // do not navigate to parent if the item is on the top level\n        if (level === 1 && !open) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'open' : 'navigate',\n        });\n      }\n      case treeDataTypes.ArrowRight:\n        // do not navigate or open if the item is a leaf\n        if (itemType === 'leaf') {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (!open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'navigate' : 'open',\n        });\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        ...rest,\n        ref: useMergedRefs(ref, treeItemRef),\n        role: 'treeitem',\n        'aria-level': level,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        // aria-selected is required according to WAI-ARIA spec\n        // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n        // Casting: when selectionMode is 'single', checked is a boolean\n        'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n        'aria-expanded': 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","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","parentValue","value","internalValue","onClick","onKeyDown","onMouseOver","onFocus","onMouseOut","onBlur","onChange","as","itemType","rest","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleChange","components","root","isAsideVisible","isActionsVisible","always","tabIndex","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}

package/lib/components/TreeItem/useTreeItemContextValues.js

@@ -1,5 +1,7 @@
 export function useTreeItemContextValues_unstable(state) {
-    const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, isActionsVisible, isAsideVisible, selectionRef, checked } = state;
+    const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, treeItemRef, // eslint-disable-next-line deprecation/deprecation
+    isActionsVisible, // eslint-disable-next-line deprecation/deprecation
+    isAsideVisible, selectionRef, checked } = state;
     /**
    * This context is created with "@fluentui/react-context-selector",
    * there is no sense to memoize it
@@ -14,6 +16,7 @@ export function useTreeItemContextValues_unstable(state) {
         isActionsVisible,
         isAsideVisible,
         actionsRef,
+        treeItemRef,
         expandIconRef
     };
     return {

package/lib/components/TreeItem/useTreeItemContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n  const {\n    value,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n    expandIconRef,\n    actionsRef,\n    isActionsVisible,\n    isAsideVisible,\n    selectionRef,\n    checked,\n  } = state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const treeItem: TreeItemContextValue = {\n    value,\n    checked,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n    selectionRef,\n    isActionsVisible,\n    isAsideVisible,\n    actionsRef,\n    expandIconRef,\n  };\n\n  return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":"AAGA,OAAO,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,IAAI,EACJC,aAAa,EACbC,UAAU,EACVC,gBAAgB,EAChBC,cAAc,EACdC,YAAY,EACZC,OAAO,EACR,GAAGX;IAEJ;;;GAGC,GACD,MAAMY,WAAiC;QACrCX;QACAU;QACAT;QACAC;QACAC;QACAC;QACAK;QACAF;QACAC;QACAF;QACAD;IACF;IAEA,OAAO;QAAEM;IAAS;AACpB"}
+{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n  const {\n    value,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n    expandIconRef,\n    actionsRef,\n    treeItemRef,\n    // eslint-disable-next-line deprecation/deprecation\n    isActionsVisible,\n    // eslint-disable-next-line deprecation/deprecation\n    isAsideVisible,\n    selectionRef,\n    checked,\n  } = state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const treeItem: TreeItemContextValue = {\n    value,\n    checked,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n    selectionRef,\n    isActionsVisible,\n    isAsideVisible,\n    actionsRef,\n    treeItemRef,\n    expandIconRef,\n  };\n\n  return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","treeItemRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":"AAGA,OAAO,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,IAAI,EACJC,aAAa,EACbC,UAAU,EACVC,WAAW,EACX,mDAAmD;IACnDC,gBAAgB,EAChB,mDAAmD;IACnDC,cAAc,EACdC,YAAY,EACZC,OAAO,EACR,GAAGZ;IAEJ;;;GAGC,GACD,MAAMa,WAAiC;QACrCZ;QACAW;QACAV;QACAC;QACAC;QACAC;QACAM;QACAF;QACAC;QACAH;QACAC;QACAF;IACF;IAEA,OAAO;QAAEO;IAAS;AACpB"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, isResolvedShorthand, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, isResolvedShorthand, useMergedRefs, slot, useEventCallback, elementContains, useControllableState } from '@fluentui/react-utilities';
 import { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { Radio } from '@fluentui/react-radio';
@@ -17,7 +17,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
     const { main, iconAfter, iconBefore } = props;
     const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);
     const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
-    const [isActionsVisibleExternal, actionsShorthand] = isResolvedShorthand(props.actions) ? [
+    const [isActionsVisibleFromProps, actionsShorthand] = isResolvedShorthand(props.actions) ? [
         props.actions.visible,
         {
             ...props.actions,
@@ -27,13 +27,46 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
         undefined,
         props.actions
     ];
-    const isActionsVisible = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible) || isActionsVisibleExternal;
-    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);
+    const [isActionsVisible, setIsActionsVisible] = useControllableState({
+        state: isActionsVisibleFromProps,
+        initialState: false
+    });
     const selectionRef = useTreeItemContext_unstable((ctx)=>ctx.selectionRef);
     const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);
     const actionsRef = useTreeItemContext_unstable((ctx)=>ctx.actionsRef);
+    const actionsRefInternal = React.useRef(null);
+    const treeItemRef = useTreeItemContext_unstable((ctx)=>ctx.treeItemRef);
+    const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);
     const checked = useTreeItemContext_unstable((ctx)=>ctx.checked);
     const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');
+    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change
+    assertIsRefObject(treeItemRef);
+    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change
+    assertIsRefObject(subtreeRef);
+    const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{
+        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));
+        if (!isTargetFromSubtree) {
+            setIsActionsVisible(true);
+        }
+    }, [
+        subtreeRef,
+        setIsActionsVisible
+    ]);
+    const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{
+        const isRelatedTargetFromActions = Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget));
+        if (isRelatedTargetFromActions) {
+            setIsActionsVisible(true);
+            return;
+        }
+        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));
+        if (!isTargetFromSubtree) {
+            setIsActionsVisible(false);
+            return;
+        }
+    }, [
+        subtreeRef,
+        setIsActionsVisible
+    ]);
     const expandIcon = slot.optional(props.expandIcon, {
         renderByDefault: isBranch,
         defaultProps: {
@@ -57,10 +90,45 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
         },
         elementType: 'div'
     }) : undefined;
-    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef);
+    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);
+    const handleActionsBlur = useEventCallback((event)=>{
+        if (isResolvedShorthand(actionsShorthand)) {
+            var _actionsShorthand_onBlur;
+            (_actionsShorthand_onBlur = actionsShorthand.onBlur) === null || _actionsShorthand_onBlur === void 0 ? void 0 : _actionsShorthand_onBlur.call(actionsShorthand, event);
+        }
+        const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget));
+        setIsActionsVisible(isRelatedTargetFromActions);
+    });
     if (actions) {
         actions.ref = actionsRefs;
+        actions.onBlur = handleActionsBlur;
     }
+    const hasActions = Boolean(actionsShorthand);
+    React.useEffect(()=>{
+        if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {
+            const treeItemElement = treeItemRef.current;
+            const handleMouseOver = setActionsVisibleIfNotFromSubtree;
+            const handleMouseOut = setActionsInvisibleIfNotFromSubtree;
+            const handleFocus = setActionsVisibleIfNotFromSubtree;
+            const handleBlur = setActionsInvisibleIfNotFromSubtree;
+            treeItemElement.addEventListener('mouseover', handleMouseOver);
+            treeItemElement.addEventListener('mouseout', handleMouseOut);
+            treeItemElement.addEventListener('focus', handleFocus);
+            treeItemElement.addEventListener('blur', handleBlur);
+            return ()=>{
+                treeItemElement.removeEventListener('mouseover', handleMouseOver);
+                treeItemElement.removeEventListener('mouseout', handleMouseOut);
+                treeItemElement.removeEventListener('focus', handleFocus);
+                treeItemElement.removeEventListener('blur', handleBlur);
+            };
+        }
+    }, [
+        hasActions,
+        treeItemRef,
+        isActionsVisibleFromProps,
+        setActionsVisibleIfNotFromSubtree,
+        setActionsInvisibleIfNotFromSubtree
+    ]);
     return {
         components: {
             root: 'div',
@@ -100,7 +168,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
             },
             elementType: 'div'
         }),
-        aside: isAsideVisible ? slot.optional(props.aside, {
+        aside: !isActionsVisible ? slot.optional(props.aside, {
             defaultProps: {
                 'aria-hidden': true
             },
@@ -120,3 +188,13 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
         })
     };
 };
+function assertIsRefObject(ref) {
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof ref !== 'object' || ref === null || !('current' in ref)) {
+            throw new Error(`
+        @fluentui/react-tree [${useTreeItemLayout_unstable.name}]:
+        Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.
+      `);
+        }
+    }
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  getIntrinsicElementProps,\n  isResolvedShorthand,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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\n  const [isActionsVisibleExternal, actionsShorthand]: [boolean | undefined, TreeItemLayoutSlots['actions']] =\n    isResolvedShorthand(props.actions)\n      ? // .visible prop should not be propagated to the DOM\n        [props.actions.visible, { ...props.actions, visible: undefined }]\n      : [undefined, props.actions];\n\n  const isActionsVisible = useTreeItemContext_unstable(ctx => ctx.isActionsVisible) || isActionsVisibleExternal;\n  const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\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 checked = useTreeItemContext_unstable(ctx => ctx.checked);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\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: true, axis: 'horizontal' });\n  const actions = isActionsVisible\n    ? slot.optional(actionsShorthand, {\n        defaultProps: { ...arrowNavigationProps, role: 'toolbar' } as ExtractSlotProps<TreeItemLayoutSlots['actions']>,\n        elementType: 'div',\n      })\n    : undefined;\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef);\n  if (actions) {\n    actions.ref = actionsRefs;\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, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    main: slot.always(main, { elementType: 'div' }),\n    iconAfter: slot.optional(iconAfter, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    aside: isAsideVisible\n      ? slot.optional(props.aside, { defaultProps: { 'aria-hidden': true }, elementType: 'div' })\n      : 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"],"names":["React","getIntrinsicElementProps","isResolvedShorthand","useMergedRefs","slot","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useArrowNavigationGroup","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","ctx","selectionMode","isActionsVisibleExternal","actionsShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","checked","isBranch","itemType","expandIcon","optional","renderByDefault","defaultProps","children","elementType","expandIconRefs","arrowNavigationProps","circular","axis","role","actionsRefs","components","root","aside","selector","buttonContextValue","size","always","tabIndex"],"mappings":"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"}
+{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * 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 { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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\n  const [isActionsVisibleFromProps, actionsShorthand]: [boolean | undefined, TreeItemLayoutSlots['actions']] =\n    isResolvedShorthand(props.actions)\n      ? // .visible prop should not be propagated to the DOM\n        [props.actions.visible, { ...props.actions, visible: undefined }]\n      : [undefined, props.actions];\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  assertIsRefObject(treeItemRef);\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\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        setIsActionsVisible(true);\n      }\n    },\n    [subtreeRef, setIsActionsVisible],\n  );\n\n  const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n    (event: FocusEvent | MouseEvent) => {\n      const isRelatedTargetFromActions = Boolean(\n        actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget as Node),\n      );\n      if (isRelatedTargetFromActions) {\n        setIsActionsVisible(true);\n        return;\n      }\n      const isTargetFromSubtree = Boolean(\n        subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n      );\n      if (!isTargetFromSubtree) {\n        setIsActionsVisible(false);\n        return;\n      }\n    },\n    [subtreeRef, setIsActionsVisible],\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: true, axis: 'horizontal' });\n  const actions = isActionsVisible\n    ? slot.optional(actionsShorthand, {\n        defaultProps: { ...arrowNavigationProps, role: 'toolbar' },\n        elementType: 'div',\n      })\n    : undefined;\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef, actionsRefInternal);\n  const handleActionsBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n    if (isResolvedShorthand(actionsShorthand)) {\n      actionsShorthand.onBlur?.(event);\n    }\n    const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget as Node));\n    setIsActionsVisible(isRelatedTargetFromActions);\n  });\n  if (actions) {\n    actions.ref = actionsRefs;\n    actions.onBlur = handleActionsBlur;\n  }\n\n  const hasActions = Boolean(actionsShorthand);\n\n  React.useEffect(() => {\n    if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {\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  }, [\n    hasActions,\n    treeItemRef,\n    isActionsVisibleFromProps,\n    setActionsVisibleIfNotFromSubtree,\n    setActionsInvisibleIfNotFromSubtree,\n  ]);\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, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    main: slot.always(main, { elementType: 'div' }),\n    iconAfter: slot.optional(iconAfter, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    aside: !isActionsVisible\n      ? slot.optional(props.aside, { defaultProps: { 'aria-hidden': true }, elementType: 'div' })\n      : 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","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","ctx","selectionMode","isActionsVisibleFromProps","actionsShorthand","actions","visible","undefined","isActionsVisible","setIsActionsVisible","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","target","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","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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"}

package/lib/contexts/treeItemContext.js

@@ -5,6 +5,7 @@ const defaultContextValue = {
     value: headlessTreeRootId,
     selectionRef: React.createRef(),
     layoutRef: React.createRef(),
+    treeItemRef: React.createRef(),
     subtreeRef: React.createRef(),
     actionsRef: React.createRef(),
     expandIconRef: React.createRef(),

package/lib/contexts/treeItemContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { headlessTreeRootId } from '../utils/createHeadlessTree';\nimport { TreeSelectionValue } from '../Tree';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n  isAsideVisible: boolean;\n  selectionRef: React.Ref<HTMLInputElement>;\n  actionsRef: React.Ref<HTMLDivElement>;\n  expandIconRef: React.Ref<HTMLDivElement>;\n  layoutRef: React.Ref<HTMLDivElement>;\n  subtreeRef: React.Ref<HTMLDivElement>;\n  itemType: TreeItemType;\n  value: TreeItemValue;\n  open: boolean;\n  checked: TreeSelectionValue;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: headlessTreeRootId,\n  selectionRef: React.createRef(),\n  layoutRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  isActionsVisible: false,\n  isAsideVisible: false,\n  itemType: 'leaf',\n  open: false,\n  checked: false,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","headlessTreeRootId","defaultContextValue","value","selectionRef","createRef","layoutRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","checked","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAE/G,SAASC,kBAAkB,QAAQ,8BAA8B;AAiBjE,MAAMC,sBAA4C;IAChDC,OAAOF;IACPG,cAAcN,MAAMO,SAAS;IAC7BC,WAAWR,MAAMO,SAAS;IAC1BE,YAAYT,MAAMO,SAAS;IAC3BG,YAAYV,MAAMO,SAAS;IAC3BI,eAAeX,MAAMO,SAAS;IAC9BK,kBAAkB;IAClBC,gBAAgB;IAChBC,UAAU;IACVC,MAAM;IACNC,SAAS;AACX;AAEA,OAAO,MAAMC,kBAA6DhB,cAExEiB,WAAW;AAEb,OAAO,MAAM,EAAEC,UAAUC,gBAAgB,EAAE,GAAGH,gBAAgB;AAC9D,OAAO,MAAMI,8BAA8B,CAAIC,WAC7CpB,mBAAmBe,iBAAiB,CAACM,MAAMnB,mBAAmB,GAAKkB,SAASC,MAAM"}
+{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { headlessTreeRootId } from '../utils/createHeadlessTree';\nimport { TreeSelectionValue } from '../Tree';\n\nexport type TreeItemContextValue = {\n  /**\n   * @deprecated - this value is irrelevant for the tree item\n   */\n  isActionsVisible: boolean;\n  /**\n   * @deprecated - this value is irrelevant for the tree item\n   */\n  isAsideVisible: boolean;\n  selectionRef: React.Ref<HTMLInputElement>;\n  actionsRef: React.Ref<HTMLDivElement>;\n  expandIconRef: React.Ref<HTMLDivElement>;\n  layoutRef: React.Ref<HTMLDivElement>;\n  // FIXME: this should be React.RefObject<HTMLDivElement>,\n  //  but as it would be a breaking change, we need to keep it as is for now\n  subtreeRef: React.Ref<HTMLDivElement>;\n  // FIXME: this is only marked as optional to avoid breaking changes\n  // it should always be provided internally\n  treeItemRef?: React.RefObject<HTMLDivElement>;\n  itemType: TreeItemType;\n  value: TreeItemValue;\n  open: boolean;\n  checked: TreeSelectionValue;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: headlessTreeRootId,\n  selectionRef: React.createRef(),\n  layoutRef: React.createRef(),\n  treeItemRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  isActionsVisible: false,\n  isAsideVisible: false,\n  itemType: 'leaf',\n  open: false,\n  checked: false,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","headlessTreeRootId","defaultContextValue","value","selectionRef","createRef","layoutRef","treeItemRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","checked","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAE/G,SAASC,kBAAkB,QAAQ,8BAA8B;AA4BjE,MAAMC,sBAA4C;IAChDC,OAAOF;IACPG,cAAcN,MAAMO,SAAS;IAC7BC,WAAWR,MAAMO,SAAS;IAC1BE,aAAaT,MAAMO,SAAS;IAC5BG,YAAYV,MAAMO,SAAS;IAC3BI,YAAYX,MAAMO,SAAS;IAC3BK,eAAeZ,MAAMO,SAAS;IAC9BM,kBAAkB;IAClBC,gBAAgB;IAChBC,UAAU;IACVC,MAAM;IACNC,SAAS;AACX;AAEA,OAAO,MAAMC,kBAA6DjB,cAExEkB,WAAW;AAEb,OAAO,MAAM,EAAEC,UAAUC,gBAAgB,EAAE,GAAGH,gBAAgB;AAC9D,OAAO,MAAMI,8BAA8B,CAAIC,WAC7CrB,mBAAmBgB,iBAAiB,CAACM,MAAMpB,mBAAmB,GAAKmB,SAASC,MAAM"}

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

@@ -33,16 +33,12 @@ function useTreeItem_unstable(props, ref) {
     var _props_value;
     const value = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : internalValue;
     const { onClick, onKeyDown, onMouseOver, onFocus, onMouseOut, onBlur, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
-    const [isActionsVisible, setActionsVisible] = _react.useState(false);
-    const [isAsideVisible, setAsideVisible] = _react.useState(true);
-    const handleActionsRef = _react.useCallback((actionsElement)=>{
-        setAsideVisible(actionsElement === null);
-    }, []);
     const actionsRef = _react.useRef(null);
     const expandIconRef = _react.useRef(null);
     const layoutRef = _react.useRef(null);
     const subtreeRef = _react.useRef(null);
     const selectionRef = _react.useRef(null);
+    const treeItemRef = _react.useRef(null);
     const open = (0, _contexts.useTreeContext_unstable)((ctx)=>{
         var _props_open;
         return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);
@@ -186,38 +182,6 @@ function useTreeItem_unstable(props, ref) {
             });
         }
     });
-    const setActionsVisibleIfNotFromSubtree = _react.useCallback((event)=>{
-        const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
-        if (!isTargetFromSubtree) {
-            setActionsVisible(true);
-        }
-    }, []);
-    const setActionsInvisibleIfNotFromSubtree = _react.useCallback((event)=>{
-        const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
-        const isRelatedTargetFromActions = Boolean(actionsRef.current && (0, _reactutilities.elementContains)(actionsRef.current, event.relatedTarget));
-        if (isRelatedTargetFromActions) {
-            return setActionsVisible(true);
-        }
-        if (!isTargetFromSubtree) {
-            return setActionsVisible(false);
-        }
-    }, []);
-    const handleMouseOver = (0, _reactutilities.useEventCallback)((event)=>{
-        onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(event);
-        setActionsVisibleIfNotFromSubtree(event);
-    });
-    const handleFocus = (0, _reactutilities.useEventCallback)((event)=>{
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-        setActionsVisibleIfNotFromSubtree(event);
-    });
-    const handleMouseOut = (0, _reactutilities.useEventCallback)((event)=>{
-        onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(event);
-        setActionsInvisibleIfNotFromSubtree(event);
-    });
-    const handleBlur = (0, _reactutilities.useEventCallback)((event)=>{
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-        setActionsInvisibleIfNotFromSubtree(event);
-    });
     const handleChange = (0, _reactutilities.useEventCallback)((event)=>{
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
         if (event.isDefaultPrevented()) {
@@ -245,19 +209,22 @@ function useTreeItem_unstable(props, ref) {
         layoutRef,
         selectionRef,
         expandIconRef,
-        actionsRef: (0, _reactutilities.useMergedRefs)(handleActionsRef, actionsRef),
+        treeItemRef,
+        actionsRef,
         itemType,
         level,
         components: {
             root: 'div'
         },
-        isAsideVisible,
-        isActionsVisible,
+        // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false
+        isAsideVisible: false,
+        // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false
+        isActionsVisible: false,
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, {
             tabIndex: -1,
             [_getTreeItemValueFromElement.dataTreeItemValueAttrName]: value,
             ...rest,
-            ref,
+            ref: (0, _reactutilities.useMergedRefs)(ref, treeItemRef),
             role: 'treeitem',
             'aria-level': level,
             'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
@@ -268,10 +235,6 @@ function useTreeItem_unstable(props, ref) {
             'aria-expanded': itemType === 'branch' ? open : undefined,
             onClick: handleClick,
             onKeyDown: handleKeyDown,
-            onMouseOver: handleMouseOver,
-            onFocus: handleFocus,
-            onMouseOut: handleMouseOut,
-            onBlur: handleBlur,
             onChange: handleChange
         }), {
             elementType: 'div'

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getIntrinsicElementProps, useId, useMergedRefs, useEventCallback, slot, elementContains } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 */ export function useTreeItem_unstable(props, ref) {\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 { level: contextLevel } = useSubtreeContext_unstable();\n    const parentValue = useTreeItemContext_unstable((ctx)=>{\n        var _props_parentValue;\n        return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _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    var _props_value;\n    const value = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : internalValue;\n    const { onClick, onKeyDown, onMouseOver, onFocus, onMouseOut, onBlur, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n    const [isActionsVisible, setActionsVisible] = React.useState(false);\n    const [isAsideVisible, setAsideVisible] = React.useState(true);\n    const handleActionsRef = React.useCallback((actionsElement)=>{\n        setAsideVisible(actionsElement === null);\n    }, []);\n    const actionsRef = React.useRef(null);\n    const expandIconRef = React.useRef(null);\n    const layoutRef = React.useRef(null);\n    const subtreeRef = React.useRef(null);\n    const selectionRef = React.useRef(null);\n    const open = useTreeContext_unstable((ctx)=>{\n        var _props_open;\n        return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);\n    });\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const checked = useTreeContext_unstable((ctx)=>{\n        var _ctx_checkedItems_get;\n        return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;\n    });\n    const handleClick = useEventCallback((event)=>{\n        onClick === null || onClick === void 0 ? void 0 : onClick(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n        if (isEventFromActions) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n        if (isEventFromSelection) {\n            return;\n        }\n        const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n        ReactDOM.unstable_batchedUpdates(()=>{\n            var _props_onOpenChange;\n            const data = {\n                event,\n                value,\n                open: !open,\n                target: event.currentTarget,\n                type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n            };\n            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n            requestTreeResponse({\n                ...data,\n                itemType,\n                requestType: 'open'\n            });\n            requestTreeResponse({\n                ...data,\n                itemType,\n                parentValue,\n                requestType: 'navigate',\n                type: treeDataTypes.Click\n            });\n        });\n    });\n    const handleKeyDown = useEventCallback((event)=>{\n        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n        // Ignore keyboard events that do not originate from the current tree item.\n        if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n            return;\n        }\n        switch(event.key){\n            case Space:\n                if (selectionMode !== 'none') {\n                    var _selectionRef_current;\n                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n                    // Prevents the page from scrolling down when the spacebar is pressed\n                    event.preventDefault();\n                }\n                return;\n            case treeDataTypes.Enter:\n                {\n                    return event.currentTarget.click();\n                }\n            case treeDataTypes.End:\n            case treeDataTypes.Home:\n            case treeDataTypes.ArrowUp:\n            case treeDataTypes.ArrowDown:\n                return requestTreeResponse({\n                    requestType: 'navigate',\n                    event,\n                    value,\n                    itemType,\n                    parentValue,\n                    type: event.key,\n                    target: event.currentTarget\n                });\n            case treeDataTypes.ArrowLeft:\n                {\n                    // do not navigate to parent if the item is on the top level\n                    if (level === 1 && !open) {\n                        return;\n                    }\n                    const data = {\n                        value,\n                        event,\n                        open: !open,\n                        type: event.key,\n                        target: event.currentTarget\n                    };\n                    if (open) {\n                        var _props_onOpenChange;\n                        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n                    }\n                    return requestTreeResponse({\n                        ...data,\n                        itemType,\n                        parentValue,\n                        requestType: open ? 'open' : 'navigate'\n                    });\n                }\n            case treeDataTypes.ArrowRight:\n                // do not navigate or open if the item is a leaf\n                if (itemType === 'leaf') {\n                    return;\n                }\n                const data = {\n                    value,\n                    event,\n                    open: !open,\n                    type: event.key,\n                    target: event.currentTarget\n                };\n                if (!open) {\n                    var _props_onOpenChange1;\n                    (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);\n                }\n                return requestTreeResponse({\n                    ...data,\n                    itemType,\n                    parentValue,\n                    requestType: open ? 'navigate' : 'open'\n                });\n        }\n        const isTypeAheadCharacter = 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    const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            setActionsVisible(true);\n        }\n    }, []);\n    const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));\n        if (isRelatedTargetFromActions) {\n            return setActionsVisible(true);\n        }\n        if (!isTargetFromSubtree) {\n            return setActionsVisible(false);\n        }\n    }, []);\n    const handleMouseOver = useEventCallback((event)=>{\n        onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(event);\n        setActionsVisibleIfNotFromSubtree(event);\n    });\n    const handleFocus = useEventCallback((event)=>{\n        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n        setActionsVisibleIfNotFromSubtree(event);\n    });\n    const handleMouseOut = useEventCallback((event)=>{\n        onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(event);\n        setActionsInvisibleIfNotFromSubtree(event);\n    });\n    const handleBlur = useEventCallback((event)=>{\n        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n        setActionsInvisibleIfNotFromSubtree(event);\n    });\n    const handleChange = useEventCallback((event)=>{\n        onChange === null || onChange === void 0 ? void 0 : onChange(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\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    return {\n        value,\n        open,\n        checked,\n        subtreeRef,\n        layoutRef,\n        selectionRef,\n        expandIconRef,\n        actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n        itemType,\n        level,\n        components: {\n            root: 'div'\n        },\n        isAsideVisible,\n        isActionsVisible,\n        root: slot.always(getIntrinsicElementProps(as, {\n            tabIndex: -1,\n            [dataTreeItemValueAttrName]: value,\n            ...rest,\n            ref,\n            role: 'treeitem',\n            'aria-level': level,\n            'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n            // aria-selected is required according to WAI-ARIA spec\n            // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n            // Casting: when selectionMode is 'single', checked is a boolean\n            'aria-selected': selectionMode === 'single' ? checked : 'false',\n            'aria-expanded': itemType === 'branch' ? open : undefined,\n            onClick: handleClick,\n            onKeyDown: handleKeyDown,\n            onMouseOver: handleMouseOver,\n            onFocus: handleFocus,\n            onMouseOut: handleMouseOut,\n            onBlur: handleBlur,\n            onChange: handleChange\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsFlatTreeItem(props) {\n    if (process.env.NODE_ENV !== 'production') {\n        if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {\n            // eslint-disable-next-line no-console\n            console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:\nA flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\nand \"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"],"names":["useTreeItem_unstable","props","ref","treeType","useTreeContext_unstable","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","useSubtreeContext_unstable","parentValue","useTreeItemContext_unstable","_props_parentValue","value","internalValue","useId","_props_value","onClick","onKeyDown","onMouseOver","onFocus","onMouseOut","onBlur","onChange","as","itemType","rest","isActionsVisible","setActionsVisible","React","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","_props_open","openItems","has","selectionMode","checked","_ctx_checkedItems_get","checkedItems","get","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","ReactDOM","unstable_batchedUpdates","_props_onOpenChange","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","call","requestType","handleKeyDown","key","Space","_selectionRef_current","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","_props_onOpenChange1","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","setActionsVisibleIfNotFromSubtree","isTargetFromSubtree","Boolean","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","handleMouseOver","handleFocus","handleMouseOut","handleBlur","handleChange","useMergedRefs","components","root","slot","always","getIntrinsicElementProps","tabIndex","dataTreeItemValueAttrName","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getIntrinsicElementProps, useId, useEventCallback, slot, elementContains, useMergedRefs } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 */ export function useTreeItem_unstable(props, ref) {\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 { level: contextLevel } = useSubtreeContext_unstable();\n    const parentValue = useTreeItemContext_unstable((ctx)=>{\n        var _props_parentValue;\n        return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _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    var _props_value;\n    const value = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : internalValue;\n    const { onClick, onKeyDown, onMouseOver, onFocus, onMouseOut, onBlur, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n    const actionsRef = React.useRef(null);\n    const expandIconRef = React.useRef(null);\n    const layoutRef = React.useRef(null);\n    const subtreeRef = React.useRef(null);\n    const selectionRef = React.useRef(null);\n    const treeItemRef = React.useRef(null);\n    const open = useTreeContext_unstable((ctx)=>{\n        var _props_open;\n        return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);\n    });\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const checked = useTreeContext_unstable((ctx)=>{\n        var _ctx_checkedItems_get;\n        return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;\n    });\n    const handleClick = useEventCallback((event)=>{\n        onClick === null || onClick === void 0 ? void 0 : onClick(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n        if (isEventFromActions) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n        if (isEventFromSelection) {\n            return;\n        }\n        const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n        ReactDOM.unstable_batchedUpdates(()=>{\n            var _props_onOpenChange;\n            const data = {\n                event,\n                value,\n                open: !open,\n                target: event.currentTarget,\n                type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n            };\n            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n            requestTreeResponse({\n                ...data,\n                itemType,\n                requestType: 'open'\n            });\n            requestTreeResponse({\n                ...data,\n                itemType,\n                parentValue,\n                requestType: 'navigate',\n                type: treeDataTypes.Click\n            });\n        });\n    });\n    const handleKeyDown = useEventCallback((event)=>{\n        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n        // Ignore keyboard events that do not originate from the current tree item.\n        if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n            return;\n        }\n        switch(event.key){\n            case Space:\n                if (selectionMode !== 'none') {\n                    var _selectionRef_current;\n                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n                    // Prevents the page from scrolling down when the spacebar is pressed\n                    event.preventDefault();\n                }\n                return;\n            case treeDataTypes.Enter:\n                {\n                    return event.currentTarget.click();\n                }\n            case treeDataTypes.End:\n            case treeDataTypes.Home:\n            case treeDataTypes.ArrowUp:\n            case treeDataTypes.ArrowDown:\n                return requestTreeResponse({\n                    requestType: 'navigate',\n                    event,\n                    value,\n                    itemType,\n                    parentValue,\n                    type: event.key,\n                    target: event.currentTarget\n                });\n            case treeDataTypes.ArrowLeft:\n                {\n                    // do not navigate to parent if the item is on the top level\n                    if (level === 1 && !open) {\n                        return;\n                    }\n                    const data = {\n                        value,\n                        event,\n                        open: !open,\n                        type: event.key,\n                        target: event.currentTarget\n                    };\n                    if (open) {\n                        var _props_onOpenChange;\n                        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n                    }\n                    return requestTreeResponse({\n                        ...data,\n                        itemType,\n                        parentValue,\n                        requestType: open ? 'open' : 'navigate'\n                    });\n                }\n            case treeDataTypes.ArrowRight:\n                // do not navigate or open if the item is a leaf\n                if (itemType === 'leaf') {\n                    return;\n                }\n                const data = {\n                    value,\n                    event,\n                    open: !open,\n                    type: event.key,\n                    target: event.currentTarget\n                };\n                if (!open) {\n                    var _props_onOpenChange1;\n                    (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);\n                }\n                return requestTreeResponse({\n                    ...data,\n                    itemType,\n                    parentValue,\n                    requestType: open ? 'navigate' : 'open'\n                });\n        }\n        const isTypeAheadCharacter = 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    const handleChange = useEventCallback((event)=>{\n        onChange === null || onChange === void 0 ? void 0 : onChange(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\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    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(getIntrinsicElementProps(as, {\n            tabIndex: -1,\n            [dataTreeItemValueAttrName]: value,\n            ...rest,\n            ref: useMergedRefs(ref, treeItemRef),\n            role: 'treeitem',\n            'aria-level': level,\n            'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n            // aria-selected is required according to WAI-ARIA spec\n            // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n            // Casting: when selectionMode is 'single', checked is a boolean\n            'aria-selected': selectionMode === 'single' ? checked : 'false',\n            'aria-expanded': itemType === 'branch' ? open : undefined,\n            onClick: handleClick,\n            onKeyDown: handleKeyDown,\n            onChange: handleChange\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsFlatTreeItem(props) {\n    if (process.env.NODE_ENV !== 'production') {\n        if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {\n            // eslint-disable-next-line no-console\n            console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:\nA flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\nand \"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"],"names":["useTreeItem_unstable","props","ref","treeType","useTreeContext_unstable","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","useSubtreeContext_unstable","parentValue","useTreeItemContext_unstable","_props_parentValue","value","internalValue","useId","_props_value","onClick","onKeyDown","onMouseOver","onFocus","onMouseOut","onBlur","onChange","as","itemType","rest","actionsRef","React","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","open","_props_open","openItems","has","selectionMode","checked","_ctx_checkedItems_get","checkedItems","get","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","ReactDOM","unstable_batchedUpdates","_props_onOpenChange","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","call","requestType","handleKeyDown","key","Space","_selectionRef_current","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","_props_onOpenChange1","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleChange","components","root","isAsideVisible","isActionsVisible","slot","always","getIntrinsicElementProps","tabIndex","dataTreeItemValueAttrName","useMergedRefs","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":";;;;+BAeoBA;;;eAAAA;;;;iEAfG;oEACG;gCAC8E;8BAClF;wBACQ;0BACmE;6CACvD;AAS/B,SAASA,qBAAqBC,KAAK,EAAEC,GAAG;IAC/C,MAAMC,WAAWC,IAAAA,iCAAuB,EAAC,CAACC,MAAMA,IAAIF,QAAQ;IAC5D,IAAIA,aAAa,QAAQ;QACrBG,gCAAgCL;IACpC;IACA,MAAMM,sBAAsBH,IAAAA,iCAAuB,EAAC,CAACC,MAAMA,IAAIE,mBAAmB;IAClF,MAAM,EAAEC,OAAOC,YAAY,EAAE,GAAGC,IAAAA,oCAA0B;IAC1D,MAAMC,cAAcC,IAAAA,qCAA2B,EAAC,CAACP;QAC7C,IAAIQ;QACJ,OAAO,AAACA,CAAAA,qBAAqBZ,MAAMU,WAAW,AAAD,MAAO,QAAQE,uBAAuB,KAAK,IAAIA,qBAAqBR,IAAIS,KAAK;IAC9H;IACA,iDAAiD;IACjD,sDAAsD;IACtD,MAAMC,gBAAgBC,IAAAA,qBAAK,EAAC;IAC5B,IAAIC;IACJ,MAAMH,QAAQ,AAACG,CAAAA,eAAehB,MAAMa,KAAK,AAAD,MAAO,QAAQG,iBAAiB,KAAK,IAAIA,eAAeF;IAChG,MAAM,EAAEG,OAAO,EAAEC,SAAS,EAAEC,WAAW,EAAEC,OAAO,EAAEC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAK,KAAK,EAAEC,WAAW,MAAM,EAAE,cAAclB,QAAQC,YAAY,EAAE,GAAGkB,MAAM,GAAG1B;IAC/J,MAAM2B,aAAaC,OAAMC,MAAM,CAAC;IAChC,MAAMC,gBAAgBF,OAAMC,MAAM,CAAC;IACnC,MAAME,YAAYH,OAAMC,MAAM,CAAC;IAC/B,MAAMG,aAAaJ,OAAMC,MAAM,CAAC;IAChC,MAAMI,eAAeL,OAAMC,MAAM,CAAC;IAClC,MAAMK,cAAcN,OAAMC,MAAM,CAAC;IACjC,MAAMM,OAAOhC,IAAAA,iCAAuB,EAAC,CAACC;QAClC,IAAIgC;QACJ,OAAO,AAACA,CAAAA,cAAcpC,MAAMmC,IAAI,AAAD,MAAO,QAAQC,gBAAgB,KAAK,IAAIA,cAAchC,IAAIiC,SAAS,CAACC,GAAG,CAACzB;IAC3G;IACA,MAAM0B,gBAAgBpC,IAAAA,iCAAuB,EAAC,CAACC,MAAMA,IAAImC,aAAa;IACtE,MAAMC,UAAUrC,IAAAA,iCAAuB,EAAC,CAACC;QACrC,IAAIqC;QACJ,OAAO,AAACA,CAAAA,wBAAwBrC,IAAIsC,YAAY,CAACC,GAAG,CAAC9B,MAAK,MAAO,QAAQ4B,0BAA0B,KAAK,IAAIA,wBAAwB;IACxI;IACA,MAAMG,cAAcC,IAAAA,gCAAgB,EAAC,CAACC;QAClC7B,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQ6B;QAC1D,IAAIA,MAAMC,kBAAkB,IAAI;YAC5B;QACJ;QACA,MAAMC,qBAAqBrB,WAAWsB,OAAO,IAAIC,IAAAA,+BAAe,EAACvB,WAAWsB,OAAO,EAAEH,MAAMK,MAAM;QACjG,IAAIH,oBAAoB;YACpB;QACJ;QACA,MAAMI,qBAAqBpB,WAAWiB,OAAO,IAAIC,IAAAA,+BAAe,EAAClB,WAAWiB,OAAO,EAAEH,MAAMK,MAAM;QACjG,IAAIC,oBAAoB;YACpB;QACJ;QACA,MAAMC,uBAAuBpB,aAAagB,OAAO,IAAIC,IAAAA,+BAAe,EAACjB,aAAagB,OAAO,EAAEH,MAAMK,MAAM;QACvG,IAAIE,sBAAsB;YACtB;QACJ;QACA,MAAMC,wBAAwBxB,cAAcmB,OAAO,IAAIC,IAAAA,+BAAe,EAACpB,cAAcmB,OAAO,EAAEH,MAAMK,MAAM;QAC1GI,UAASC,uBAAuB,CAAC;YAC7B,IAAIC;YACJ,MAAMC,OAAO;gBACTZ;gBACAjC;gBACAsB,MAAM,CAACA;gBACPgB,QAAQL,MAAMa,aAAa;gBAC3BC,MAAMN,wBAAwBO,qBAAa,CAACC,eAAe,GAAGD,qBAAa,CAACE,KAAK;YACrF;YACCN,CAAAA,sBAAsBzD,MAAMgE,YAAY,AAAD,MAAO,QAAQP,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBQ,IAAI,CAACjE,OAAO8C,OAAOY;YACxIpD,oBAAoB;gBAChB,GAAGoD,IAAI;gBACPjC;gBACAyC,aAAa;YACjB;YACA5D,oBAAoB;gBAChB,GAAGoD,IAAI;gBACPjC;gBACAf;gBACAwD,aAAa;gBACbN,MAAMC,qBAAa,CAACE,KAAK;YAC7B;QACJ;IACJ;IACA,MAAMI,gBAAgBtB,IAAAA,gCAAgB,EAAC,CAACC;QACpC5B,cAAc,QAAQA,cAAc,KAAK,IAAI,KAAK,IAAIA,UAAU4B;QAChE,2EAA2E;QAC3E,IAAIA,MAAMC,kBAAkB,MAAMD,MAAMa,aAAa,KAAKb,MAAMK,MAAM,EAAE;YACpE;QACJ;QACA,OAAOL,MAAMsB,GAAG;YACZ,KAAKC,mBAAK;gBACN,IAAI9B,kBAAkB,QAAQ;oBAC1B,IAAI+B;oBACHA,CAAAA,wBAAwBrC,aAAagB,OAAO,AAAD,MAAO,QAAQqB,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBC,KAAK;oBAClI,qEAAqE;oBACrEzB,MAAM0B,cAAc;gBACxB;gBACA;YACJ,KAAKX,qBAAa,CAACY,KAAK;gBACpB;oBACI,OAAO3B,MAAMa,aAAa,CAACY,KAAK;gBACpC;YACJ,KAAKV,qBAAa,CAACa,GAAG;YACtB,KAAKb,qBAAa,CAACc,IAAI;YACvB,KAAKd,qBAAa,CAACe,OAAO;YAC1B,KAAKf,qBAAa,CAACgB,SAAS;gBACxB,OAAOvE,oBAAoB;oBACvB4D,aAAa;oBACbpB;oBACAjC;oBACAY;oBACAf;oBACAkD,MAAMd,MAAMsB,GAAG;oBACfjB,QAAQL,MAAMa,aAAa;gBAC/B;YACJ,KAAKE,qBAAa,CAACiB,SAAS;gBACxB;oBACI,4DAA4D;oBAC5D,IAAIvE,UAAU,KAAK,CAAC4B,MAAM;wBACtB;oBACJ;oBACA,MAAMuB,OAAO;wBACT7C;wBACAiC;wBACAX,MAAM,CAACA;wBACPyB,MAAMd,MAAMsB,GAAG;wBACfjB,QAAQL,MAAMa,aAAa;oBAC/B;oBACA,IAAIxB,MAAM;wBACN,IAAIsB;wBACHA,CAAAA,sBAAsBzD,MAAMgE,YAAY,AAAD,MAAO,QAAQP,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBQ,IAAI,CAACjE,OAAO8C,OAAOY;oBAC5I;oBACA,OAAOpD,oBAAoB;wBACvB,GAAGoD,IAAI;wBACPjC;wBACAf;wBACAwD,aAAa/B,OAAO,SAAS;oBACjC;gBACJ;YACJ,KAAK0B,qBAAa,CAACkB,UAAU;gBACzB,gDAAgD;gBAChD,IAAItD,aAAa,QAAQ;oBACrB;gBACJ;gBACA,MAAMiC,OAAO;oBACT7C;oBACAiC;oBACAX,MAAM,CAACA;oBACPyB,MAAMd,MAAMsB,GAAG;oBACfjB,QAAQL,MAAMa,aAAa;gBAC/B;gBACA,IAAI,CAACxB,MAAM;oBACP,IAAI6C;oBACHA,CAAAA,uBAAuBhF,MAAMgE,YAAY,AAAD,MAAO,QAAQgB,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBf,IAAI,CAACjE,OAAO8C,OAAOY;gBAC/I;gBACA,OAAOpD,oBAAoB;oBACvB,GAAGoD,IAAI;oBACPjC;oBACAf;oBACAwD,aAAa/B,OAAO,aAAa;gBACrC;QACR;QACA,MAAM8C,uBAAuBnC,MAAMsB,GAAG,CAACc,MAAM,KAAK,KAAKpC,MAAMsB,GAAG,CAACe,KAAK,CAAC,SAAS,CAACrC,MAAMsC,MAAM,IAAI,CAACtC,MAAMuC,OAAO,IAAI,CAACvC,MAAMwC,OAAO;QACjI,IAAIL,sBAAsB;YACtB3E,oBAAoB;gBAChB4D,aAAa;gBACbpB;gBACAK,QAAQL,MAAMa,aAAa;gBAC3B9C;gBACAY;gBACAmC,MAAMC,qBAAa,CAAC0B,SAAS;gBAC7B7E;YACJ;QACJ;IACJ;IACA,MAAM8E,eAAe3C,IAAAA,gCAAgB,EAAC,CAACC;QACnCvB,aAAa,QAAQA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASuB;QAC7D,IAAIA,MAAMC,kBAAkB,IAAI;YAC5B;QACJ;QACA,MAAMK,qBAAqBpB,WAAWiB,OAAO,IAAIC,IAAAA,+BAAe,EAAClB,WAAWiB,OAAO,EAAEH,MAAMK,MAAM;QACjG,IAAIC,oBAAoB;YACpB;QACJ;QACA9C,oBAAoB;YAChB4D,aAAa;YACbpB;YACAjC;YACAY;YACAmC,MAAM;YACNT,QAAQL,MAAMa,aAAa;YAC3BnB,SAASA,YAAY,UAAU,OAAO,CAACA;QAC3C;IACJ;IACA,OAAO;QACH3B;QACAsB;QACAK;QACAR;QACAD;QACAE;QACAH;QACAI;QACAP;QACAF;QACAlB;QACAkF,YAAY;YACRC,MAAM;QACV;QACA,4HAA4H;QAC5HC,gBAAgB;QAChB,4HAA4H;QAC5HC,kBAAkB;QAClBF,MAAMG,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAACvE,IAAI;YAC3CwE,UAAU,CAAC;YACX,CAACC,sDAAyB,CAAC,EAAEpF;YAC7B,GAAGa,IAAI;YACPzB,KAAKiG,IAAAA,6BAAa,EAACjG,KAAKiC;YACxBiE,MAAM;YACN,cAAc5F;YACd,gBAAgBgC,kBAAkB,gBAAgBC,UAAU4D;YAC5D,uDAAuD;YACvD,+CAA+C;YAC/C,gEAAgE;YAChE,iBAAiB7D,kBAAkB,WAAWC,UAAU;YACxD,iBAAiBf,aAAa,WAAWU,OAAOiE;YAChDnF,SAAS2B;YACT1B,WAAWiD;YACX5C,UAAUiE;QACd,IAAI;YACAa,aAAa;QACjB;IACJ;AACJ;AACA,SAAShG,gCAAgCL,KAAK;IAC1C,IAAIsG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,IAAIxG,KAAK,CAAC,gBAAgB,KAAKoG,aAAapG,KAAK,CAAC,eAAe,KAAKoG,aAAapG,KAAK,CAAC,aAAa,KAAKoG,aAAapG,MAAMU,WAAW,KAAK0F,aAAapG,KAAK,CAAC,aAAa,KAAK,GAAG;YAClL,sCAAsC;YACtCyG,QAAQC,KAAK,CAAC,CAAC,sBAAsB,EAAE3G,qBAAqB4G,IAAI,CAAC;;;;;;;sEAOP,CAAC;QAC/D;IACJ;AACJ"}

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

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "useTreeItemContextValues_unstable", {
     }
 });
 function useTreeItemContextValues_unstable(state) {
-    const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, isActionsVisible, isAsideVisible, selectionRef, checked } = state;
+    const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, treeItemRef, isActionsVisible, isAsideVisible, selectionRef, checked } = state;
     /**
    * This context is created with "@fluentui/react-context-selector",
    * there is no sense to memoize it
@@ -24,6 +24,7 @@ function useTreeItemContextValues_unstable(state) {
         isActionsVisible,
         isAsideVisible,
         actionsRef,
+        treeItemRef,
         expandIconRef
     };
     return {

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemContextValues.js"],"sourcesContent":["export function useTreeItemContextValues_unstable(state) {\n    const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, isActionsVisible, isAsideVisible, selectionRef, checked } = state;\n    /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */ const treeItem = {\n        value,\n        checked,\n        itemType,\n        layoutRef,\n        subtreeRef,\n        open,\n        selectionRef,\n        isActionsVisible,\n        isAsideVisible,\n        actionsRef,\n        expandIconRef\n    };\n    return {\n        treeItem\n    };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,kCAAkCC,KAAK;IACnD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,aAAa,EAAEC,UAAU,EAAEC,gBAAgB,EAAEC,cAAc,EAAEC,YAAY,EAAEC,OAAO,EAAE,GAAGX;IAC7I;;;GAGD,GAAG,MAAMY,WAAW;QACfX;QACAU;QACAT;QACAC;QACAC;QACAC;QACAK;QACAF;QACAC;QACAF;QACAD;IACJ;IACA,OAAO;QACHM;IACJ;AACJ"}
+{"version":3,"sources":["useTreeItemContextValues.js"],"sourcesContent":["export function useTreeItemContextValues_unstable(state) {\n    const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, treeItemRef, // eslint-disable-next-line deprecation/deprecation\n    isActionsVisible, // eslint-disable-next-line deprecation/deprecation\n    isAsideVisible, selectionRef, checked } = state;\n    /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */ const treeItem = {\n        value,\n        checked,\n        itemType,\n        layoutRef,\n        subtreeRef,\n        open,\n        selectionRef,\n        isActionsVisible,\n        isAsideVisible,\n        actionsRef,\n        treeItemRef,\n        expandIconRef\n    };\n    return {\n        treeItem\n    };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","treeItemRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,kCAAkCC,KAAK;IACnD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,aAAa,EAAEC,UAAU,EAAEC,WAAW,EAC5FC,gBAAgB,EAChBC,cAAc,EAAEC,YAAY,EAAEC,OAAO,EAAE,GAAGZ;IAC1C;;;GAGD,GAAG,MAAMa,WAAW;QACfZ;QACAW;QACAV;QACAC;QACAC;QACAC;QACAM;QACAF;QACAC;QACAH;QACAC;QACAF;IACJ;IACA,OAAO;QACHO;IACJ;AACJ"}

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

@@ -20,7 +20,7 @@ const useTreeItemLayout_unstable = (props, ref)=>{
     const { main, iconAfter, iconBefore } = props;
     const layoutRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.layoutRef);
     const selectionMode = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
-    const [isActionsVisibleExternal, actionsShorthand] = (0, _reactutilities.isResolvedShorthand)(props.actions) ? [
+    const [isActionsVisibleFromProps, actionsShorthand] = (0, _reactutilities.isResolvedShorthand)(props.actions) ? [
         props.actions.visible,
         {
             ...props.actions,
@@ -30,13 +30,46 @@ const useTreeItemLayout_unstable = (props, ref)=>{
         undefined,
         props.actions
     ];
-    const isActionsVisible = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.isActionsVisible) || isActionsVisibleExternal;
-    const isAsideVisible = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.isAsideVisible);
+    const [isActionsVisible, setIsActionsVisible] = (0, _reactutilities.useControllableState)({
+        state: isActionsVisibleFromProps,
+        initialState: false
+    });
     const selectionRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.selectionRef);
     const expandIconRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.expandIconRef);
     const actionsRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.actionsRef);
+    const actionsRefInternal = _react.useRef(null);
+    const treeItemRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.treeItemRef);
+    const subtreeRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.subtreeRef);
     const checked = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.checked);
     const isBranch = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.itemType === 'branch');
+    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change
+    assertIsRefObject(treeItemRef);
+    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change
+    assertIsRefObject(subtreeRef);
+    const setActionsVisibleIfNotFromSubtree = _react.useCallback((event)=>{
+        const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
+        if (!isTargetFromSubtree) {
+            setIsActionsVisible(true);
+        }
+    }, [
+        subtreeRef,
+        setIsActionsVisible
+    ]);
+    const setActionsInvisibleIfNotFromSubtree = _react.useCallback((event)=>{
+        const isRelatedTargetFromActions = Boolean(actionsRefInternal.current && (0, _reactutilities.elementContains)(actionsRefInternal.current, event.relatedTarget));
+        if (isRelatedTargetFromActions) {
+            setIsActionsVisible(true);
+            return;
+        }
+        const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
+        if (!isTargetFromSubtree) {
+            setIsActionsVisible(false);
+            return;
+        }
+    }, [
+        subtreeRef,
+        setIsActionsVisible
+    ]);
     const expandIcon = _reactutilities.slot.optional(props.expandIcon, {
         renderByDefault: isBranch,
         defaultProps: {
@@ -60,10 +93,45 @@ const useTreeItemLayout_unstable = (props, ref)=>{
         },
         elementType: 'div'
     }) : undefined;
-    const actionsRefs = (0, _reactutilities.useMergedRefs)(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef);
+    const actionsRefs = (0, _reactutilities.useMergedRefs)(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);
+    const handleActionsBlur = (0, _reactutilities.useEventCallback)((event)=>{
+        if ((0, _reactutilities.isResolvedShorthand)(actionsShorthand)) {
+            var _actionsShorthand_onBlur;
+            (_actionsShorthand_onBlur = actionsShorthand.onBlur) === null || _actionsShorthand_onBlur === void 0 ? void 0 : _actionsShorthand_onBlur.call(actionsShorthand, event);
+        }
+        const isRelatedTargetFromActions = Boolean((0, _reactutilities.elementContains)(event.currentTarget, event.relatedTarget));
+        setIsActionsVisible(isRelatedTargetFromActions);
+    });
     if (actions) {
         actions.ref = actionsRefs;
+        actions.onBlur = handleActionsBlur;
     }
+    const hasActions = Boolean(actionsShorthand);
+    _react.useEffect(()=>{
+        if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {
+            const treeItemElement = treeItemRef.current;
+            const handleMouseOver = setActionsVisibleIfNotFromSubtree;
+            const handleMouseOut = setActionsInvisibleIfNotFromSubtree;
+            const handleFocus = setActionsVisibleIfNotFromSubtree;
+            const handleBlur = setActionsInvisibleIfNotFromSubtree;
+            treeItemElement.addEventListener('mouseover', handleMouseOver);
+            treeItemElement.addEventListener('mouseout', handleMouseOut);
+            treeItemElement.addEventListener('focus', handleFocus);
+            treeItemElement.addEventListener('blur', handleBlur);
+            return ()=>{
+                treeItemElement.removeEventListener('mouseover', handleMouseOver);
+                treeItemElement.removeEventListener('mouseout', handleMouseOut);
+                treeItemElement.removeEventListener('focus', handleFocus);
+                treeItemElement.removeEventListener('blur', handleBlur);
+            };
+        }
+    }, [
+        hasActions,
+        treeItemRef,
+        isActionsVisibleFromProps,
+        setActionsVisibleIfNotFromSubtree,
+        setActionsInvisibleIfNotFromSubtree
+    ]);
     return {
         components: {
             root: 'div',
@@ -103,7 +171,7 @@ const useTreeItemLayout_unstable = (props, ref)=>{
             },
             elementType: 'div'
         }),
-        aside: isAsideVisible ? _reactutilities.slot.optional(props.aside, {
+        aside: !isActionsVisible ? _reactutilities.slot.optional(props.aside, {
             defaultProps: {
                 'aria-hidden': true
             },
@@ -123,3 +191,13 @@ const useTreeItemLayout_unstable = (props, ref)=>{
         })
     };
 };
+function assertIsRefObject(ref) {
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof ref !== 'object' || ref === null || !('current' in ref)) {
+            throw new Error(`
+        @fluentui/react-tree [${useTreeItemLayout_unstable.name}]:
+        Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.
+      `);
+        }
+    }
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, isResolvedShorthand, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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 */ export const useTreeItemLayout_unstable = (props, ref)=>{\n    const { main, iconAfter, iconBefore } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const [isActionsVisibleExternal, actionsShorthand] = isResolvedShorthand(props.actions) ? [\n        props.actions.visible,\n        {\n            ...props.actions,\n            visible: undefined\n        }\n    ] : [\n        undefined,\n        props.actions\n    ];\n    const isActionsVisible = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible) || isActionsVisibleExternal;\n    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);\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 checked = useTreeItemContext_unstable((ctx)=>ctx.checked);\n    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');\n    const expandIcon = slot.optional(props.expandIcon, {\n        renderByDefault: isBranch,\n        defaultProps: {\n            children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n            'aria-hidden': true\n        },\n        elementType: 'div'\n    });\n    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);\n    if (expandIcon) {\n        expandIcon.ref = expandIconRefs;\n    }\n    const arrowNavigationProps = useArrowNavigationGroup({\n        circular: true,\n        axis: 'horizontal'\n    });\n    const actions = isActionsVisible ? slot.optional(actionsShorthand, {\n        defaultProps: {\n            ...arrowNavigationProps,\n            role: 'toolbar'\n        },\n        elementType: 'div'\n    }) : undefined;\n    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef);\n    if (actions) {\n        actions.ref = actionsRefs;\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\n        },\n        buttonContextValue: {\n            size: 'small'\n        },\n        root: slot.always(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)\n        }), {\n            elementType: 'div'\n        }),\n        iconBefore: slot.optional(iconBefore, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        main: slot.always(main, {\n            elementType: 'div'\n        }),\n        iconAfter: slot.optional(iconAfter, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        aside: isAsideVisible ? slot.optional(props.aside, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }) : 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            },\n            elementType: selectionMode === 'multiselect' ? Checkbox : Radio\n        })\n    };\n};\n"],"names":["useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","useTreeItemContext_unstable","ctx","selectionMode","useTreeContext_unstable","isActionsVisibleExternal","actionsShorthand","isResolvedShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","checked","isBranch","itemType","expandIcon","slot","optional","renderByDefault","defaultProps","children","React","createElement","TreeItemChevron","elementType","expandIconRefs","useMergedRefs","arrowNavigationProps","useArrowNavigationGroup","circular","axis","role","actionsRefs","components","root","aside","selector","Checkbox","Radio","buttonContextValue","size","always","getIntrinsicElementProps","tabIndex"],"mappings":"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"}
+{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, isResolvedShorthand, useMergedRefs, slot, useEventCallback, elementContains, useControllableState } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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 */ export const useTreeItemLayout_unstable = (props, ref)=>{\n    const { main, iconAfter, iconBefore } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const [isActionsVisibleFromProps, actionsShorthand] = isResolvedShorthand(props.actions) ? [\n        props.actions.visible,\n        {\n            ...props.actions,\n            visible: undefined\n        }\n    ] : [\n        undefined,\n        props.actions\n    ];\n    const [isActionsVisible, setIsActionsVisible] = useControllableState({\n        state: isActionsVisibleFromProps,\n        initialState: false\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(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    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n    assertIsRefObject(treeItemRef);\n    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n    assertIsRefObject(subtreeRef);\n    const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            setIsActionsVisible(true);\n        }\n    }, [\n        subtreeRef,\n        setIsActionsVisible\n    ]);\n    const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isRelatedTargetFromActions = Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget));\n        if (isRelatedTargetFromActions) {\n            setIsActionsVisible(true);\n            return;\n        }\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            setIsActionsVisible(false);\n            return;\n        }\n    }, [\n        subtreeRef,\n        setIsActionsVisible\n    ]);\n    const expandIcon = slot.optional(props.expandIcon, {\n        renderByDefault: isBranch,\n        defaultProps: {\n            children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n            'aria-hidden': true\n        },\n        elementType: 'div'\n    });\n    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);\n    if (expandIcon) {\n        expandIcon.ref = expandIconRefs;\n    }\n    const arrowNavigationProps = useArrowNavigationGroup({\n        circular: true,\n        axis: 'horizontal'\n    });\n    const actions = isActionsVisible ? slot.optional(actionsShorthand, {\n        defaultProps: {\n            ...arrowNavigationProps,\n            role: 'toolbar'\n        },\n        elementType: 'div'\n    }) : undefined;\n    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);\n    const handleActionsBlur = useEventCallback((event)=>{\n        if (isResolvedShorthand(actionsShorthand)) {\n            var _actionsShorthand_onBlur;\n            (_actionsShorthand_onBlur = actionsShorthand.onBlur) === null || _actionsShorthand_onBlur === void 0 ? void 0 : _actionsShorthand_onBlur.call(actionsShorthand, event);\n        }\n        const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget));\n        setIsActionsVisible(isRelatedTargetFromActions);\n    });\n    if (actions) {\n        actions.ref = actionsRefs;\n        actions.onBlur = handleActionsBlur;\n    }\n    const hasActions = Boolean(actionsShorthand);\n    React.useEffect(()=>{\n        if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {\n            const treeItemElement = treeItemRef.current;\n            const handleMouseOver = setActionsVisibleIfNotFromSubtree;\n            const handleMouseOut = setActionsInvisibleIfNotFromSubtree;\n            const handleFocus = setActionsVisibleIfNotFromSubtree;\n            const handleBlur = setActionsInvisibleIfNotFromSubtree;\n            treeItemElement.addEventListener('mouseover', handleMouseOver);\n            treeItemElement.addEventListener('mouseout', handleMouseOut);\n            treeItemElement.addEventListener('focus', handleFocus);\n            treeItemElement.addEventListener('blur', handleBlur);\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    }, [\n        hasActions,\n        treeItemRef,\n        isActionsVisibleFromProps,\n        setActionsVisibleIfNotFromSubtree,\n        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\n        },\n        buttonContextValue: {\n            size: 'small'\n        },\n        root: slot.always(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)\n        }), {\n            elementType: 'div'\n        }),\n        iconBefore: slot.optional(iconBefore, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        main: slot.always(main, {\n            elementType: 'div'\n        }),\n        iconAfter: slot.optional(iconAfter, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        aside: !isActionsVisible ? slot.optional(props.aside, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }) : 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            },\n            elementType: selectionMode === 'multiselect' ? Checkbox : Radio\n        })\n    };\n};\nfunction assertIsRefObject(ref) {\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":["useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","useTreeItemContext_unstable","ctx","selectionMode","useTreeContext_unstable","isActionsVisibleFromProps","actionsShorthand","isResolvedShorthand","actions","visible","undefined","isActionsVisible","setIsActionsVisible","useControllableState","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","React","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","elementContains","target","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","expandIcon","slot","optional","renderByDefault","defaultProps","children","createElement","TreeItemChevron","elementType","expandIconRefs","useMergedRefs","arrowNavigationProps","useArrowNavigationGroup","circular","axis","role","actionsRefs","handleActionsBlur","useEventCallback","_actionsShorthand_onBlur","onBlur","call","currentTarget","hasActions","useEffect","treeItemElement","handleMouseOver","handleMouseOut","handleFocus","handleBlur","addEventListener","removeEventListener","components","root","aside","selector","Checkbox","Radio","buttonContextValue","size","always","getIntrinsicElementProps","tabIndex","process","env","NODE_ENV","Error","name"],"mappings":"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"}

package/lib-commonjs/contexts/treeItemContext.js

@@ -27,6 +27,7 @@ const defaultContextValue = {
     value: _createHeadlessTree.headlessTreeRootId,
     selectionRef: /*#__PURE__*/ _react.createRef(),
     layoutRef: /*#__PURE__*/ _react.createRef(),
+    treeItemRef: /*#__PURE__*/ _react.createRef(),
     subtreeRef: /*#__PURE__*/ _react.createRef(),
     actionsRef: /*#__PURE__*/ _react.createRef(),
     expandIconRef: /*#__PURE__*/ _react.createRef(),

package/lib-commonjs/contexts/treeItemContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["treeItemContext.js"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { headlessTreeRootId } from '../utils/createHeadlessTree';\nconst defaultContextValue = {\n    value: headlessTreeRootId,\n    selectionRef: React.createRef(),\n    layoutRef: React.createRef(),\n    subtreeRef: React.createRef(),\n    actionsRef: React.createRef(),\n    expandIconRef: React.createRef(),\n    isActionsVisible: false,\n    isAsideVisible: false,\n    itemType: 'leaf',\n    open: false,\n    checked: false\n};\nexport const TreeItemContext = createContext(undefined);\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = (selector)=>useContextSelector(TreeItemContext, (ctx = defaultContextValue)=>selector(ctx));\n"],"names":["TreeItemContext","TreeItemProvider","useTreeItemContext_unstable","defaultContextValue","value","headlessTreeRootId","selectionRef","React","createRef","layoutRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","checked","createContext","undefined","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IAgBaA,eAAe;eAAfA;;IACYC,gBAAgB;eAAhBA;;IACZC,2BAA2B;eAA3BA;;;;iEAlBU;sCAC2B;oCACf;AACnC,MAAMC,sBAAsB;IACxBC,OAAOC,sCAAkB;IACzBC,4BAAcC,OAAMC,SAAS;IAC7BC,yBAAWF,OAAMC,SAAS;IAC1BE,0BAAYH,OAAMC,SAAS;IAC3BG,0BAAYJ,OAAMC,SAAS;IAC3BI,6BAAeL,OAAMC,SAAS;IAC9BK,kBAAkB;IAClBC,gBAAgB;IAChBC,UAAU;IACVC,MAAM;IACNC,SAAS;AACb;AACO,MAAMjB,kBAAkBkB,IAAAA,mCAAa,EAACC;AACtC,MAAM,EAAEC,UAAUnB,gBAAgB,EAAE,GAAGD;AACvC,MAAME,8BAA8B,CAACmB,WAAWC,IAAAA,wCAAkB,EAACtB,iBAAiB,CAACuB,MAAMpB,mBAAmB,GAAGkB,SAASE"}
+{"version":3,"sources":["treeItemContext.js"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { headlessTreeRootId } from '../utils/createHeadlessTree';\nconst defaultContextValue = {\n    value: headlessTreeRootId,\n    selectionRef: React.createRef(),\n    layoutRef: React.createRef(),\n    treeItemRef: React.createRef(),\n    subtreeRef: React.createRef(),\n    actionsRef: React.createRef(),\n    expandIconRef: React.createRef(),\n    isActionsVisible: false,\n    isAsideVisible: false,\n    itemType: 'leaf',\n    open: false,\n    checked: false\n};\nexport const TreeItemContext = createContext(undefined);\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = (selector)=>useContextSelector(TreeItemContext, (ctx = defaultContextValue)=>selector(ctx));\n"],"names":["TreeItemContext","TreeItemProvider","useTreeItemContext_unstable","defaultContextValue","value","headlessTreeRootId","selectionRef","React","createRef","layoutRef","treeItemRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","checked","createContext","undefined","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IAiBaA,eAAe;eAAfA;;IACYC,gBAAgB;eAAhBA;;IACZC,2BAA2B;eAA3BA;;;;iEAnBU;sCAC2B;oCACf;AACnC,MAAMC,sBAAsB;IACxBC,OAAOC,sCAAkB;IACzBC,4BAAcC,OAAMC,SAAS;IAC7BC,yBAAWF,OAAMC,SAAS;IAC1BE,2BAAaH,OAAMC,SAAS;IAC5BG,0BAAYJ,OAAMC,SAAS;IAC3BI,0BAAYL,OAAMC,SAAS;IAC3BK,6BAAeN,OAAMC,SAAS;IAC9BM,kBAAkB;IAClBC,gBAAgB;IAChBC,UAAU;IACVC,MAAM;IACNC,SAAS;AACb;AACO,MAAMlB,kBAAkBmB,IAAAA,mCAAa,EAACC;AACtC,MAAM,EAAEC,UAAUpB,gBAAgB,EAAE,GAAGD;AACvC,MAAME,8BAA8B,CAACoB,WAAWC,IAAAA,wCAAkB,EAACvB,iBAAiB,CAACwB,MAAMrB,mBAAmB,GAAGmB,SAASE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.4.9",
+  "version": "9.4.10",
   "description": "Tree component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",