@fluentui/react-tree 9.4.9 → 9.4.11

package/CHANGELOG.json

@@ -2,7 +2,37 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Wed, 01 Nov 2023 12:51:07 GMT",
+      "date": "Thu, 02 Nov 2023 17:38:20 GMT",
+      "tag": "@fluentui/react-tree_v9.4.11",
+      "version": "9.4.11",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "9b59f49f035e556aab24cfd8ad8da429815db061",
+            "comment": "chore: throws if FlatTree is used as a subtree"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 01 Nov 2023 19:15:55 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,30 @@
 # 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 Thu, 02 Nov 2023 17:38:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.11)
+
+Thu, 02 Nov 2023 17:38:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.10..@fluentui/react-tree_v9.4.11)
+
+### Patches
+
+- chore: throws if FlatTree is used as a subtree ([PR #29729](https://github.com/microsoft/fluentui/pull/29729) by bernardo.sunderhus@gmail.com)
+
+## [9.4.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.10)
+
+Wed, 01 Nov 2023 19:15:55 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/FlatTree/useFlatTree.js

@@ -4,8 +4,7 @@ import { useFlatTreeNavigation } from './useFlatTreeNavigation';
 import { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 import { treeItemFilter } from '../../utils/treeItemFilter';
-import { slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
-import { useTreeContext_unstable } from '../../contexts/treeContext';
+import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { useSubtree } from '../../hooks/useSubtree';
 import { ImmutableSet } from '../../utils/ImmutableSet';
 import { ImmutableMap } from '../../utils/ImmutableMap';
@@ -47,15 +46,9 @@ function useRootFlatTree(props, ref) {
 }
 function useSubFlatTree(props, ref) {
     if (process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.error(`@fluentui/react-tree [useFlatTree]:
+        throw new Error(`@fluentui/react-tree [useFlatTree]:
 Subtrees are not allowed in a FlatTree!
-You cannot use a <FlatTree> component inside of another <FlatTree> component.`);
-    }
-    if (useTreeContext_unstable((ctx)=>ctx.treeType) === 'nested' && process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.error(`@fluentui/react-tree [useFlatTree]:
-Error: <FlatTree> component cannot be used inside of a nested <Tree> component and vice versa.`);
+You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!`);
     }
     return {
         ...useSubtree(props, ref),
@@ -70,13 +63,7 @@ Error: <FlatTree> component cannot be used inside of a nested <Tree> component a
         appearance: 'subtle',
         size: 'medium',
         // ------ defaultTreeContextValue
-        open: false,
-        components: {
-            root: React.Fragment
-        },
-        root: slot.always(props, {
-            elementType: React.Fragment
-        })
+        open: false
     };
 }
 function noop() {

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

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeNavigationData_unstable, TreeNavigationEvent_unstable } from '../Tree/Tree.types';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = (\n  props,\n  ref,\n) => {\n  const isRoot = React.useContext(SubtreeContext) === undefined;\n  // as level is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\n\nfunction useRootFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  const { navigate, initialize } = useFlatTreeNavigation();\n  const walkerRef = React.useRef<HTMLElementWalker>();\n  const { targetDocument } = useFluent_unstable();\n\n  const initializeWalker = React.useCallback(\n    (root: HTMLElement | null) => {\n      if (root && targetDocument) {\n        walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n        initialize(walkerRef.current);\n      }\n    },\n    [initialize, targetDocument],\n  );\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      props.onNavigation?.(event, data);\n      if (walkerRef.current && !event.isDefaultPrevented()) {\n        navigate(data, walkerRef.current);\n      }\n    },\n  );\n\n  return {\n    treeType: 'flat',\n    ...useRootTree({ ...props, onNavigation: handleNavigation }, useMergedRefs(ref, initializeWalker)),\n  };\n}\n\nfunction useSubFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  if (process.env.NODE_ENV === 'development') {\n    // eslint-disable-next-line no-console\n    console.error(/* #__DE-INDENT__ */ `\n      @fluentui/react-tree [useFlatTree]:\n      Subtrees are not allowed in a FlatTree!\n      You cannot use a <FlatTree> component inside of another <FlatTree> component.\n    `);\n  }\n  if (useTreeContext_unstable(ctx => ctx.treeType) === 'nested' && process.env.NODE_ENV === 'development') {\n    // eslint-disable-next-line no-console\n    console.error(/* #__DE-INDENT__ */ `\n      @fluentui/react-tree [useFlatTree]:\n      Error: <FlatTree> component cannot be used inside of a nested <Tree> component and vice versa.\n    `);\n  }\n  return {\n    ...useSubtree(props, ref),\n    // ------ defaultTreeContextValue\n    level: 0,\n    contextType: 'root',\n    treeType: 'nested',\n    selectionMode: 'none',\n    openItems: ImmutableSet.empty,\n    checkedItems: ImmutableMap.empty,\n    requestTreeResponse: noop,\n    appearance: 'subtle',\n    size: 'medium',\n    // ------ defaultTreeContextValue\n    open: false,\n    components: { root: React.Fragment },\n    root: slot.always(props, { elementType: React.Fragment }),\n  };\n}\n\nfunction noop() {\n  /* do nothing */\n}\n"],"names":["React","useRootTree","useFlatTreeNavigation","createHTMLElementWalker","useFluent_unstable","treeItemFilter","slot","useEventCallback","useMergedRefs","useTreeContext_unstable","useSubtree","ImmutableSet","ImmutableMap","SubtreeContext","useFlatTree_unstable","props","ref","isRoot","useContext","undefined","useRootFlatTree","useSubFlatTree","navigate","initialize","walkerRef","useRef","targetDocument","initializeWalker","useCallback","root","current","handleNavigation","event","data","onNavigation","isDefaultPrevented","treeType","process","env","NODE_ENV","console","error","ctx","level","contextType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","open","components","Fragment","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAA4BC,uBAAuB,QAAQ,sCAAsC;AACjG,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAElF,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,gCAAgC;AAE/D,OAAO,MAAMC,uBAA6F,CACxGC,OACAC;IAEA,MAAMC,SAASjB,MAAMkB,UAAU,CAACL,oBAAoBM;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,gBAAgBL,OAAOC,OAAOK,eAAeN,OAAOC;AACtE,EAAE;AAEF,SAASI,gBAAgBL,KAAoB,EAAEC,GAA2B;IACxE,MAAM,EAAEM,QAAQ,EAAEC,UAAU,EAAE,GAAGrB;IACjC,MAAMsB,YAAYxB,MAAMyB,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGtB;IAE3B,MAAMuB,mBAAmB3B,MAAM4B,WAAW,CACxC,CAACC;QACC,IAAIA,QAAQH,gBAAgB;YAC1BF,UAAUM,OAAO,GAAG3B,wBAAwB0B,MAAMH,gBAAgBrB;YAClEkB,WAAWC,UAAUM,OAAO;QAC9B;IACF,GACA;QAACP;QAAYG;KAAe;IAG9B,MAAMK,mBAAmBxB,iBACvB,CAACyB,OAAqCC;YACpClB;SAAAA,sBAAAA,MAAMmB,YAAY,cAAlBnB,0CAAAA,yBAAAA,OAAqBiB,OAAOC;QAC5B,IAAIT,UAAUM,OAAO,IAAI,CAACE,MAAMG,kBAAkB,IAAI;YACpDb,SAASW,MAAMT,UAAUM,OAAO;QAClC;IACF;IAGF,OAAO;QACLM,UAAU;QACV,GAAGnC,YAAY;YAAE,GAAGc,KAAK;YAAEmB,cAAcH;QAAiB,GAAGvB,cAAcQ,KAAKW,kBAAkB;IACpG;AACF;AAEA,SAASN,eAAeN,KAAoB,EAAEC,GAA2B;IACvE,IAAIqB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,sCAAsC;QACtCC,QAAQC,KAAK,CAAsB,CAAC;;6EAIpC,CAAC;IACH;IACA,IAAIhC,wBAAwBiC,CAAAA,MAAOA,IAAIN,QAAQ,MAAM,YAAYC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACvG,sCAAsC;QACtCC,QAAQC,KAAK,CAAsB,CAAC;8FAGpC,CAAC;IACH;IACA,OAAO;QACL,GAAG/B,WAAWK,OAAOC,IAAI;QACzB,iCAAiC;QACjC2B,OAAO;QACPC,aAAa;QACbR,UAAU;QACVS,eAAe;QACfC,WAAWnC,aAAaoC,KAAK;QAC7BC,cAAcpC,aAAamC,KAAK;QAChCE,qBAAqBC;QACrBC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;QACNC,YAAY;YAAEzB,MAAM7B,MAAMuD,QAAQ;QAAC;QACnC1B,MAAMvB,KAAKkD,MAAM,CAACzC,OAAO;YAAE0C,aAAazD,MAAMuD,QAAQ;QAAC;IACzD;AACF;AAEA,SAASL;AACP,cAAc,GAChB"}
+{"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeNavigationData_unstable, TreeNavigationEvent_unstable } from '../Tree/Tree.types';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = (\n  props,\n  ref,\n) => {\n  const isRoot = React.useContext(SubtreeContext) === undefined;\n  // as level is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\n\nfunction useRootFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  const { navigate, initialize } = useFlatTreeNavigation();\n  const walkerRef = React.useRef<HTMLElementWalker>();\n  const { targetDocument } = useFluent_unstable();\n\n  const initializeWalker = React.useCallback(\n    (root: HTMLElement | null) => {\n      if (root && targetDocument) {\n        walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n        initialize(walkerRef.current);\n      }\n    },\n    [initialize, targetDocument],\n  );\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      props.onNavigation?.(event, data);\n      if (walkerRef.current && !event.isDefaultPrevented()) {\n        navigate(data, walkerRef.current);\n      }\n    },\n  );\n\n  return {\n    treeType: 'flat',\n    ...useRootTree({ ...props, onNavigation: handleNavigation }, useMergedRefs(ref, initializeWalker)),\n  };\n}\n\nfunction useSubFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  if (process.env.NODE_ENV === 'development') {\n    throw new Error(/* #__DE-INDENT__ */ `\n      @fluentui/react-tree [useFlatTree]:\n      Subtrees are not allowed in a FlatTree!\n      You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!\n    `);\n  }\n  return {\n    ...useSubtree(props, ref),\n    // ------ defaultTreeContextValue\n    level: 0,\n    contextType: 'root',\n    treeType: 'nested',\n    selectionMode: 'none',\n    openItems: ImmutableSet.empty,\n    checkedItems: ImmutableMap.empty,\n    requestTreeResponse: noop,\n    appearance: 'subtle',\n    size: 'medium',\n    // ------ defaultTreeContextValue\n    open: false,\n  };\n}\n\nfunction noop() {\n  /* do nothing */\n}\n"],"names":["React","useRootTree","useFlatTreeNavigation","createHTMLElementWalker","useFluent_unstable","treeItemFilter","useEventCallback","useMergedRefs","useSubtree","ImmutableSet","ImmutableMap","SubtreeContext","useFlatTree_unstable","props","ref","isRoot","useContext","undefined","useRootFlatTree","useSubFlatTree","navigate","initialize","walkerRef","useRef","targetDocument","initializeWalker","useCallback","root","current","handleNavigation","event","data","onNavigation","isDefaultPrevented","treeType","process","env","NODE_ENV","Error","level","contextType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","open"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAA4BC,uBAAuB,QAAQ,sCAAsC;AACjG,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAE5E,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,gCAAgC;AAE/D,OAAO,MAAMC,uBAA6F,CACxGC,OACAC;IAEA,MAAMC,SAASf,MAAMgB,UAAU,CAACL,oBAAoBM;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,gBAAgBL,OAAOC,OAAOK,eAAeN,OAAOC;AACtE,EAAE;AAEF,SAASI,gBAAgBL,KAAoB,EAAEC,GAA2B;IACxE,MAAM,EAAEM,QAAQ,EAAEC,UAAU,EAAE,GAAGnB;IACjC,MAAMoB,YAAYtB,MAAMuB,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGpB;IAE3B,MAAMqB,mBAAmBzB,MAAM0B,WAAW,CACxC,CAACC;QACC,IAAIA,QAAQH,gBAAgB;YAC1BF,UAAUM,OAAO,GAAGzB,wBAAwBwB,MAAMH,gBAAgBnB;YAClEgB,WAAWC,UAAUM,OAAO;QAC9B;IACF,GACA;QAACP;QAAYG;KAAe;IAG9B,MAAMK,mBAAmBvB,iBACvB,CAACwB,OAAqCC;YACpClB;SAAAA,sBAAAA,MAAMmB,YAAY,cAAlBnB,0CAAAA,yBAAAA,OAAqBiB,OAAOC;QAC5B,IAAIT,UAAUM,OAAO,IAAI,CAACE,MAAMG,kBAAkB,IAAI;YACpDb,SAASW,MAAMT,UAAUM,OAAO;QAClC;IACF;IAGF,OAAO;QACLM,UAAU;QACV,GAAGjC,YAAY;YAAE,GAAGY,KAAK;YAAEmB,cAAcH;QAAiB,GAAGtB,cAAcO,KAAKW,kBAAkB;IACpG;AACF;AAEA,SAASN,eAAeN,KAAoB,EAAEC,GAA2B;IACvE,IAAIqB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAM,IAAIC,MAA2B,CAAC;;0FAItC,CAAC;IACH;IACA,OAAO;QACL,GAAG9B,WAAWK,OAAOC,IAAI;QACzB,iCAAiC;QACjCyB,OAAO;QACPC,aAAa;QACbN,UAAU;QACVO,eAAe;QACfC,WAAWjC,aAAakC,KAAK;QAC7BC,cAAclC,aAAaiC,KAAK;QAChCE,qBAAqBC;QACrBC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACR;AACF;AAEA,SAASH;AACP,cAAc,GAChB"}

package/lib/components/Tree/useTree.js

@@ -71,10 +71,15 @@ function useNestedRootTree(props, ref) {
     };
 }
 function useNestedSubtree(props, ref) {
-    if (useTreeContext_unstable((ctx)=>ctx.treeType) === 'flat' && process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.error(`@fluentui/react-tree [useTree]:
-Error: <Tree> component cannot be used inside of a nested <FlatTree> component and vice versa.`);
+    if (process.env.NODE_ENV === 'development') {
+        // this doesn't break rule of hooks, as environment is a static value
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);
+        if (treeType === 'flat') {
+            throw new Error(`@fluentui/react-tree [useTree]:
+Subtrees are not allowed in a FlatTree!
+You cannot use a <Tree> component inside of a <FlatTree> component!`);
+        }
     }
     return useSubtree(props, ref);
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeState,\n} from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useTreeNavigation } from './useTreeNavigation';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  const isRoot = React.useContext(SubtreeContext) === undefined;\n  // as level is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n  const checkedItems = useNestedCheckedItems(props);\n  const { navigate, initialize } = useTreeNavigation();\n  const walkerRef = React.useRef<HTMLElementWalker>();\n  const { targetDocument } = useFluent_unstable();\n\n  const initializeWalker = React.useCallback(\n    (root: HTMLElement | null) => {\n      if (root && targetDocument) {\n        walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n        initialize(walkerRef.current);\n      }\n    },\n    [initialize, targetDocument],\n  );\n\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    props.onOpenChange?.(event, {\n      ...data,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n    setOpenItems(nextOpenItems);\n  });\n\n  const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n    if (walkerRef.current) {\n      const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n      props.onCheckedChange?.(event, {\n        ...data,\n        checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable(),\n      });\n    }\n  });\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      props.onNavigation?.(event, data);\n      if (walkerRef.current && !event.isDefaultPrevented()) {\n        navigate(data, walkerRef.current);\n      }\n    },\n  );\n\n  return {\n    treeType: 'nested',\n    ...useRootTree(\n      {\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: handleOpenChange,\n        onNavigation: handleNavigation,\n        onCheckedChange: handleCheckedChange,\n      },\n      useMergedRefs(ref, initializeWalker),\n    ),\n  };\n}\n\nfunction useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  if (useTreeContext_unstable(ctx => ctx.treeType) === 'flat' && process.env.NODE_ENV === 'development') {\n    // eslint-disable-next-line no-console\n    console.error(/* #__DE-INDENT__ */ `\n      @fluentui/react-tree [useTree]:\n      Error: <Tree> component cannot be used inside of a nested <FlatTree> component and vice versa.\n    `);\n  }\n  return useSubtree(props, ref);\n}\n"],"names":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","createNextNestedCheckedItems","useNestedCheckedItems","SubtreeContext","useRootTree","useSubtree","createHTMLElementWalker","treeItemFilter","useTreeNavigation","useFluent_unstable","useTreeContext_unstable","useTree_unstable","props","ref","isRoot","useContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","checkedItems","navigate","initialize","walkerRef","useRef","targetDocument","initializeWalker","useCallback","root","current","handleOpenChange","event","data","nextOpenItems","onOpenChange","dangerouslyGetInternalSet_unstable","handleCheckedChange","nextCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","onNavigation","isDefaultPrevented","treeType","ctx","process","env","NODE_ENV","console","error"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAW5E,SAASC,mBAAmB,EAAEC,wBAAwB,QAAQ,uCAAuC;AACrG,SAASC,4BAA4B,EAAEC,qBAAqB,QAAQ,sCAAsC;AAC1G,SAASC,cAAc,QAAQ,gCAAgC;AAC/D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAA4BC,uBAAuB,QAAQ,sCAAsC;AACjG,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,uBAAuB,QAAQ,6BAA6B;AAErE,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD,MAAMC,SAASlB,MAAMmB,UAAU,CAACZ,oBAAoBa;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,kBAAkBL,OAAOC,OAAOK,iBAAiBN,OAAOC;AAC1E,EAAE;AAEF,SAASI,kBAAkBL,KAAgB,EAAEC,GAA2B;IACtE,MAAM,CAACM,WAAWC,aAAa,GAAGpB,yBAAyBY;IAC3D,MAAMS,eAAenB,sBAAsBU;IAC3C,MAAM,EAAEU,QAAQ,EAAEC,UAAU,EAAE,GAAGf;IACjC,MAAMgB,YAAY5B,MAAM6B,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGjB;IAE3B,MAAMkB,mBAAmB/B,MAAMgC,WAAW,CACxC,CAACC;QACC,IAAIA,QAAQH,gBAAgB;YAC1BF,UAAUM,OAAO,GAAGxB,wBAAwBuB,MAAMH,gBAAgBnB;YAClEgB,WAAWC,UAAUM,OAAO;QAC9B;IACF,GACA;QAACP;QAAYG;KAAe;IAG9B,MAAMK,mBAAmBlC,iBAAiB,CAACmC,OAA4BC;YAErErB;QADA,MAAMsB,gBAAgBnC,oBAAoBkC,MAAMd;SAChDP,sBAAAA,MAAMuB,YAAY,cAAlBvB,0CAAAA,yBAAAA,OAAqBoB,OAAO;YAC1B,GAAGC,IAAI;YACPd,WAAWe,cAAcE,kCAAkC;QAC7D;QACAhB,aAAac;IACf;IAEA,MAAMG,sBAAsBxC,iBAAiB,CAACmC,OAA+BC;QAC3E,IAAIT,UAAUM,OAAO,EAAE;gBAErBlB;YADA,MAAM0B,mBAAmBrC,6BAA6BgC,MAAMZ;aAC5DT,yBAAAA,MAAM2B,eAAe,cAArB3B,6CAAAA,4BAAAA,OAAwBoB,OAAO;gBAC7B,GAAGC,IAAI;gBACPZ,cAAciB,iBAAiBE,kCAAkC;YACnE;QACF;IACF;IACA,MAAMC,mBAAmB5C,iBACvB,CAACmC,OAAqCC;YACpCrB;SAAAA,sBAAAA,MAAM8B,YAAY,cAAlB9B,0CAAAA,yBAAAA,OAAqBoB,OAAOC;QAC5B,IAAIT,UAAUM,OAAO,IAAI,CAACE,MAAMW,kBAAkB,IAAI;YACpDrB,SAASW,MAAMT,UAAUM,OAAO;QAClC;IACF;IAGF,OAAO;QACLc,UAAU;QACV,GAAGxC,YACD;YACE,GAAGQ,KAAK;YACRO;YACAE;YACAc,cAAcJ;YACdW,cAAcD;YACdF,iBAAiBF;QACnB,GACAvC,cAAce,KAAKc,kBACpB;IACH;AACF;AAEA,SAAST,iBAAiBN,KAAgB,EAAEC,GAA2B;IACrE,IAAIH,wBAAwBmC,CAAAA,MAAOA,IAAID,QAAQ,MAAM,UAAUE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACrG,sCAAsC;QACtCC,QAAQC,KAAK,CAAsB,CAAC;8FAGpC,CAAC;IACH;IACA,OAAO7C,WAAWO,OAAOC;AAC3B"}
+{"version":3,"sources":["useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeState,\n} from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useTreeNavigation } from './useTreeNavigation';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  const isRoot = React.useContext(SubtreeContext) === undefined;\n  // as level is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n  const checkedItems = useNestedCheckedItems(props);\n  const { navigate, initialize } = useTreeNavigation();\n  const walkerRef = React.useRef<HTMLElementWalker>();\n  const { targetDocument } = useFluent_unstable();\n\n  const initializeWalker = React.useCallback(\n    (root: HTMLElement | null) => {\n      if (root && targetDocument) {\n        walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n        initialize(walkerRef.current);\n      }\n    },\n    [initialize, targetDocument],\n  );\n\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    props.onOpenChange?.(event, {\n      ...data,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n    setOpenItems(nextOpenItems);\n  });\n\n  const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n    if (walkerRef.current) {\n      const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n      props.onCheckedChange?.(event, {\n        ...data,\n        checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable(),\n      });\n    }\n  });\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      props.onNavigation?.(event, data);\n      if (walkerRef.current && !event.isDefaultPrevented()) {\n        navigate(data, walkerRef.current);\n      }\n    },\n  );\n\n  return {\n    treeType: 'nested',\n    ...useRootTree(\n      {\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: handleOpenChange,\n        onNavigation: handleNavigation,\n        onCheckedChange: handleCheckedChange,\n      },\n      useMergedRefs(ref, initializeWalker),\n    ),\n  };\n}\n\nfunction useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  if (process.env.NODE_ENV === 'development') {\n    // this doesn't break rule of hooks, as environment is a static value\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n    if (treeType === 'flat') {\n      throw new Error(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useTree]:\n        Subtrees are not allowed in a FlatTree!\n        You cannot use a <Tree> component inside of a <FlatTree> component!\n      `);\n    }\n  }\n  return useSubtree(props, ref);\n}\n"],"names":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","createNextNestedCheckedItems","useNestedCheckedItems","SubtreeContext","useRootTree","useSubtree","createHTMLElementWalker","treeItemFilter","useTreeNavigation","useFluent_unstable","useTreeContext_unstable","useTree_unstable","props","ref","isRoot","useContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","checkedItems","navigate","initialize","walkerRef","useRef","targetDocument","initializeWalker","useCallback","root","current","handleOpenChange","event","data","nextOpenItems","onOpenChange","dangerouslyGetInternalSet_unstable","handleCheckedChange","nextCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","onNavigation","isDefaultPrevented","treeType","process","env","NODE_ENV","ctx","Error"],"mappings":"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"}

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.
+      `);
+        }
+    }
+}