npm - @fluentui/react-tree - Versions diffs - 9.7.11 → 9.8.1 - Mend

@fluentui/react-tree 9.7.11 → 9.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,59 @@
 # Change Log - @fluentui/react-tree
-This log was last generated on Fri, 16 Aug 2024 10:23:33 GMT and should not be manually modified.
+This log was last generated on Mon, 23 Sep 2024 12:36:04 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.8.1)
+Mon, 23 Sep 2024 12:36:04 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.8.0..@fluentui/react-tree_v9.8.1)
+### Patches
+- Bump @fluentui/react-aria to v9.13.6 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-avatar to v9.6.39 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-button to v9.3.91 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-checkbox to v9.2.37 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.67 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.1.4 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-motion to v9.5.2 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-radio to v9.2.32 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.20.1 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-tabster to v9.22.7 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-theme to v9.1.20 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-utilities to v9.18.15 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.44 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
+## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.8.0)
+Tue, 10 Sep 2024 10:19:10 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.7.11..@fluentui/react-tree_v9.8.0)
+### Minor changes
+- bugfix: recover from tabIndex=-1 when TreeItem is removed ([PR #32442](https://github.com/microsoft/fluentui/pull/32442) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.13.5 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-avatar to v9.6.38 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-button to v9.3.90 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-checkbox to v9.2.36 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.66 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.1.3 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-motion to v9.5.1 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-radio to v9.2.31 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-tabster to v9.22.6 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.43 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+### Patches
+- bugfix: ensure actions visibility between successive mouse events ([PR #32477](https://github.com/microsoft/fluentui/pull/32477) by bernardo.sunderhus@gmail.com)
+- fix: remove unnecessary aria-hidden attributes that were causing accessibility issues ([PR #32081](https://github.com/microsoft/fluentui/pull/32081) by sarah.higley@microsoft.com)
+- bugfix: ensure onClick handler is not called on every click ([PR #32434](https://github.com/microsoft/fluentui/pull/32434) by bernardo.sunderhus@gmail.com)
 ## [9.7.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.7.11)
-Fri, 16 Aug 2024 10:23:33 GMT
+Fri, 16 Aug 2024 10:24:17 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.7.10..@fluentui/react-tree_v9.7.11)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -412,6 +412,7 @@ export declare type TreeContextValue = {
      * requests root Tree component to respond to some tree item event,
      */
     requestTreeResponse(request: TreeItemRequest): void;
+    forceUpdateRovingTabIndex?(): void;
 };
 export declare type TreeContextValues = {
@@ -510,7 +511,6 @@ export declare type TreeItemLayoutSlots = {
     expandIcon?: Slot<'div'>;
     /**
      * Aside content is normally used to render a badge or other non-actionable content
-     * It is aria-hidden by default and is only meant to be used as visual aid.
      */
     aside?: Slot<'div'>;
     /**

package/lib/components/FlatTree/useFlatTree.js CHANGED Viewed

@@ -26,7 +26,8 @@ function useRootFlatTree(props, ref) {
             }
         })
     }, useMergedRefs(ref, navigation.rootRef)), {
-        treeType: 'flat'
+        treeType: 'flat',
+        forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex
     });
 }
 function useSubFlatTree(props, ref) {
@@ -45,6 +46,7 @@ You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree>
         openItems: ImmutableSet.empty,
         checkedItems: ImmutableMap.empty,
         requestTreeResponse: noop,
+        forceUpdateRovingTabIndex: noop,
         appearance: 'subtle',
         size: 'medium',
         // ------ defaultTreeContextValue

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

	@@ -1 +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 { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';\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 'use no memo';\n\n const isRoot = React.useContext(SubtreeContext) === undefined;\n // as level is static, this doesn't break rule of hooks\n // and if this becomes an issue later on, this can be easily converted\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\n\nfunction useRootFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n const navigation = useFlatTreeNavigation();\n\n return Object.assign(\n useRootTree(\n {\n ...props,\n onNavigation: useEventCallback((event, data) => {\n props.onNavigation?.(event, data);\n if (!event.isDefaultPrevented()) {\n navigation.navigate(data);\n }\n }),\n },\n useMergedRefs(ref, navigation.rootRef),\n ),\n { treeType: 'flat' } as const,\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","useEventCallback","useMergedRefs","useFlatTreeNavigation","useSubtree","ImmutableSet","ImmutableMap","SubtreeContext","useFlatTree_unstable","props","ref","isRoot","useContext","undefined","useRootFlatTree","useSubFlatTree","navigation","Object","assign","onNavigation","event","data","isDefaultPrevented","navigate","rootRef","treeType","process","env","NODE_ENV","Error","level","contextType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","open"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5E,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,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;IAEA,MAAMC,SAASZ,MAAMa,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,MAAMM,aAAab;IAEnB,OAAOc,OAAOC,MAAM,CAClBlB,YACE;QACE,GAAGS,KAAK;QACRU,cAAclB,iBAAiB,CAACmB,OAAOC;gBACrCZ;aAAAA,sBAAAA,MAAMU,YAAY,cAAlBV,0CAAAA,yBAAAA,OAAqBW,OAAOC;YAC5B,IAAI,CAACD,MAAME,kBAAkB,IAAI;gBAC/BN,WAAWO,QAAQ,CAACF;YACtB;QACF;IACF,GACAnB,cAAcQ,KAAKM,WAAWQ,OAAO,IAEvC;~~QAAEC~~,UAAU;~~IAAO~~;~~AAEvB~~;AAEA,~~SAASV~~,eAAeN,KAAoB,EAAEC,GAA2B;IACvE,~~IAAIgB~~,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAM,IAAIC,MAA2B,CAAC;;0FAItC,CAAC;IACH;IACA,OAAO;QACL,~~GAAGzB~~,WAAWK,OAAOC,IAAI;QACzB,iCAAiC;~~QACjCoB~~,OAAO;QACPC,aAAa;~~QACbN~~,UAAU;~~QACVO~~,eAAe;QACfC,~~WAAW5B~~,~~aAAa6B~~,KAAK;QAC7BC,~~cAAc7B~~,~~aAAa4B~~,KAAK;QAChCE,qBAAqBC;~~QACrBC~~,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACR;AACF;AAEA,SAASH;AACP,cAAc,GAChB"}
1	+ {"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';\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 'use no memo';\n\n const isRoot = React.useContext(SubtreeContext) === undefined;\n // as level is static, this doesn't break rule of hooks\n // and if this becomes an issue later on, this can be easily converted\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\n\nfunction useRootFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n const navigation = useFlatTreeNavigation();\n\n return Object.assign(\n useRootTree(\n {\n ...props,\n onNavigation: useEventCallback((event, data) => {\n props.onNavigation?.(event, data);\n if (!event.isDefaultPrevented()) {\n navigation.navigate(data);\n }\n }),\n },\n useMergedRefs(ref, navigation.rootRef),\n ),\n {\n treeType: 'flat',\n forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n } as const,\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 forceUpdateRovingTabIndex: 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","useEventCallback","useMergedRefs","useFlatTreeNavigation","useSubtree","ImmutableSet","ImmutableMap","SubtreeContext","useFlatTree_unstable","props","ref","isRoot","useContext","undefined","useRootFlatTree","useSubFlatTree","navigation","Object","assign","onNavigation","event","data","isDefaultPrevented","navigate","rootRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","Error","level","contextType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","open"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5E,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,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;IAEA,MAAMC,SAASZ,MAAMa,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,MAAMM,aAAab;IAEnB,OAAOc,OAAOC,MAAM,CAClBlB,YACE;QACE,GAAGS,KAAK;QACRU,cAAclB,iBAAiB,CAACmB,OAAOC;gBACrCZ;aAAAA,sBAAAA,MAAMU,YAAY,cAAlBV,0CAAAA,yBAAAA,OAAqBW,OAAOC;YAC5B,IAAI,CAACD,MAAME,kBAAkB,IAAI;gBAC/BN,WAAWO,QAAQ,CAACF;YACtB;QACF;IACF,GACAnB,cAAcQ,KAAKM,WAAWQ,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2BV,WAAWU,yBAAyB;IACjE;AAEJ;AAEA,SAASX,eAAeN,KAAoB,EAAEC,GAA2B;IACvE,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAM,IAAIC,MAA2B,CAAC;;0FAItC,CAAC;IACH;IACA,OAAO;QACL,GAAG1B,WAAWK,OAAOC,IAAI;QACzB,iCAAiC;QACjCqB,OAAO;QACPC,aAAa;QACbP,UAAU;QACVQ,eAAe;QACfC,WAAW7B,aAAa8B,KAAK;QAC7BC,cAAc9B,aAAa6B,KAAK;QAChCE,qBAAqBC;QACrBZ,2BAA2BY;QAC3BC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACR;AACF;AAEA,SAASH;AACP,cAAc,GAChB"}

package/lib/components/FlatTree/useFlatTreeContextValues.js CHANGED Viewed

@@ -1,5 +1,5 @@
 export const useFlatTreeContextValues_unstable = (state)=>{
-    const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;
+    const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
     /**
    * This context is created with "@fluentui/react-context-selector",
    * there is no sense to memoize it
@@ -12,7 +12,8 @@ export const useFlatTreeContextValues_unstable = (state)=>{
         selectionMode,
         contextType,
         level,
-        requestTreeResponse
+        requestTreeResponse,
+        forceUpdateRovingTabIndex
     };
     return {
         tree

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useFlatTreeContextValues.ts"],"sourcesContent":["import type { TreeContextValue } from '../../contexts';\nimport type { FlatTreeContextValues, FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTreeContextValues_unstable = (state: FlatTreeState): FlatTreeContextValues => {\n const {\n openItems,\n level,\n contextType,\n treeType,\n checkedItems,\n selectionMode,\n appearance,\n size,\n requestTreeResponse,\n } = state;\n /*\n This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const tree: TreeContextValue = {\n treeType,\n size,\n openItems,\n appearance,\n checkedItems,\n selectionMode,\n contextType,\n level,\n requestTreeResponse,\n };\n\n return { tree };\n};\n"],"names":["useFlatTreeContextValues_unstable","state","openItems","level","contextType","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","tree"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;~~","mappings":"AAGA,OAAO,MAAMA,oCAAoC,CAACC;IAChD,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,IAAI,EACJC,mBAAmB,~~EACpB~~,~~GAAGT~~;IACJ;;;GAGC,GACD,~~MAAMU~~,OAAyB;~~QAC7BN~~;QACAI;QACAP;QACAM;QACAF;QACAC;QACAH;QACAD;QACAO;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB,EAAE"}
1	+ {"version":3,"sources":["useFlatTreeContextValues.ts"],"sourcesContent":["import type { TreeContextValue } from '../../contexts';\nimport type { FlatTreeContextValues, FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTreeContextValues_unstable = (state: FlatTreeState): FlatTreeContextValues => {\n const {\n openItems,\n level,\n contextType,\n treeType,\n checkedItems,\n selectionMode,\n appearance,\n size,\n requestTreeResponse,\n forceUpdateRovingTabIndex,\n } = state;\n /*\n This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const tree: TreeContextValue = {\n treeType,\n size,\n openItems,\n appearance,\n checkedItems,\n selectionMode,\n contextType,\n level,\n requestTreeResponse,\n forceUpdateRovingTabIndex,\n };\n\n return { tree };\n};\n"],"names":["useFlatTreeContextValues_unstable","state","openItems","level","contextType","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAGA,OAAO,MAAMA,oCAAoC,CAACC;IAChD,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGV;IACJ;;;GAGC,GACD,MAAMW,OAAyB;QAC7BP;QACAI;QACAP;QACAM;QACAF;QACAC;QACAH;QACAD;QACAO;QACAC;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB,EAAE"}

package/lib/components/Tree/useTree.js CHANGED Viewed

@@ -53,7 +53,8 @@ function useNestedRootTree(props, ref) {
             });
         })
     }, useMergedRefs(ref, navigation.treeRef)), {
-        treeType: 'nested'
+        treeType: 'nested',
+        forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex
     });
 }
 function useNestedSubtree(props, ref) {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeProps, TreeState } from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { useTreeNavigation } from '../../hooks/useTreeNavigation';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n 'use no memo';\n\n const isRoot = React.useContext(SubtreeContext) === undefined;\n // as level is static, this doesn't break rule of hooks\n // and if this becomes an issue later on, this can be easily converted\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n 'use no memo';\n\n const [openItems, setOpenItems] = useControllableOpenItems(props);\n const checkedItems = useNestedCheckedItems(props);\n const navigation = useTreeNavigation();\n\n return Object.assign(\n useRootTree(\n {\n ...props,\n openItems,\n checkedItems,\n onOpenChange: useEventCallback((event, data) => {\n const nextOpenItems = createNextOpenItems(data, openItems);\n props.onOpenChange?.(event, {\n ...data,\n openItems: ImmutableSet.dangerouslyGetInternalSet(nextOpenItems),\n });\n setOpenItems(nextOpenItems);\n }),\n onNavigation: useEventCallback((event, data) => {\n props.onNavigation?.(event, data);\n if (!event.isDefaultPrevented()) {\n navigation.navigate(data, {\n preventScroll: data.isScrollPrevented(),\n });\n }\n }),\n onCheckedChange: useEventCallback((event, data) => {\n const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n props.onCheckedChange?.(event, {\n ...data,\n checkedItems: ImmutableMap.dangerouslyGetInternalMap(nextCheckedItems),\n });\n }),\n },\n useMergedRefs(ref, navigation.treeRef),\n ),\n { treeType: 'nested' } as const,\n );\n}\n\nfunction useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n 'use no memo';\n\n if (process.env.NODE_ENV === 'development') {\n // this doesn't break rule of hooks, as environment is a static value\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n if (treeType === 'flat') {\n throw new Error(/* #__DE-INDENT__ */ `\n @fluentui/react-tree [useTree]:\n Subtrees are not allowed in a FlatTree!\n You cannot use a <Tree> component inside of a <FlatTree> component!\n `);\n }\n }\n return useSubtree(props, ref);\n}\n"],"names":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","createNextNestedCheckedItems","useNestedCheckedItems","SubtreeContext","useRootTree","useSubtree","useTreeNavigation","useTreeContext_unstable","ImmutableSet","ImmutableMap","useTree_unstable","props","ref","isRoot","useContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","checkedItems","navigation","Object","assign","onOpenChange","event","data","nextOpenItems","dangerouslyGetInternalSet","onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","nextCheckedItems","dangerouslyGetInternalMap","treeRef","treeType","process","env","NODE_ENV","ctx","Error"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAE5E,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,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AAExD,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD;IAEA,MAAMC,SAASjB,MAAMkB,UAAU,CAACX,oBAAoBY;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,kBAAkBL,OAAOC,OAAOK,iBAAiBN,OAAOC;AAC1E,EAAE;AAEF,SAASI,kBAAkBL,KAAgB,EAAEC,GAA2B;IACtE;IAEA,MAAM,CAACM,WAAWC,aAAa,GAAGnB,yBAAyBW;IAC3D,MAAMS,eAAelB,sBAAsBS;IAC3C,MAAMU,aAAaf;IAEnB,OAAOgB,OAAOC,MAAM,CAClBnB,YACE;QACE,GAAGO,KAAK;QACRO;QACAE;QACAI,cAAc3B,iBAAiB,CAAC4B,OAAOC;gBAErCf;YADA,MAAMgB,gBAAgB5B,oBAAoB2B,MAAMR;aAChDP,sBAAAA,MAAMa,YAAY,cAAlBb,0CAAAA,yBAAAA,OAAqBc,OAAO;gBAC1B,GAAGC,IAAI;gBACPR,WAAWV,aAAaoB,yBAAyB,CAACD;YACpD;YACAR,aAAaQ;QACf;QACAE,cAAchC,iBAAiB,CAAC4B,OAAOC;gBACrCf;aAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBc,OAAOC;YAC5B,IAAI,CAACD,MAAMK,kBAAkB,IAAI;gBAC/BT,WAAWU,QAAQ,CAACL,MAAM;oBACxBM,eAAeN,KAAKO,iBAAiB;gBACvC;YACF;QACF;QACAC,iBAAiBrC,iBAAiB,CAAC4B,OAAOC;gBAExCf;YADA,MAAMwB,mBAAmBlC,6BAA6ByB,MAAMN;aAC5DT,yBAAAA,MAAMuB,eAAe,cAArBvB,6CAAAA,4BAAAA,OAAwBc,OAAO;gBAC7B,GAAGC,IAAI;gBACPN,cAAcX,aAAa2B,yBAAyB,CAACD;YACvD;QACF;IACF,GACArC,cAAcc,KAAKS,WAAWgB,OAAO,IAEvC;~~QAAEC~~,UAAU;~~IAAS~~;~~AAEzB~~;AAEA,~~SAASrB~~,iBAAiBN,KAAgB,EAAEC,GAA2B;IACrE;IAEA,~~IAAI2B~~,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,qEAAqE;QACrE,sDAAsD;QACtD,~~MAAMH~~,WAAW/B,~~wBAAwBmC~~,CAAAA,MAAOA,~~IAAIJ~~,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACvB,MAAM,~~IAAIK~~,MAA2B,CAAC;;mEAItC,CAAC;QACH;IACF;IACA,~~OAAOtC~~,WAAWM,OAAOC;AAC3B"}
1	+ {"version":3,"sources":["useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeProps, TreeState } from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { useTreeNavigation } from '../../hooks/useTreeNavigation';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n 'use no memo';\n\n const isRoot = React.useContext(SubtreeContext) === undefined;\n // as level is static, this doesn't break rule of hooks\n // and if this becomes an issue later on, this can be easily converted\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n 'use no memo';\n\n const [openItems, setOpenItems] = useControllableOpenItems(props);\n const checkedItems = useNestedCheckedItems(props);\n const navigation = useTreeNavigation();\n\n return Object.assign(\n useRootTree(\n {\n ...props,\n openItems,\n checkedItems,\n onOpenChange: useEventCallback((event, data) => {\n const nextOpenItems = createNextOpenItems(data, openItems);\n props.onOpenChange?.(event, {\n ...data,\n openItems: ImmutableSet.dangerouslyGetInternalSet(nextOpenItems),\n });\n setOpenItems(nextOpenItems);\n }),\n onNavigation: useEventCallback((event, data) => {\n props.onNavigation?.(event, data);\n if (!event.isDefaultPrevented()) {\n navigation.navigate(data, {\n preventScroll: data.isScrollPrevented(),\n });\n }\n }),\n onCheckedChange: useEventCallback((event, data) => {\n const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n props.onCheckedChange?.(event, {\n ...data,\n checkedItems: ImmutableMap.dangerouslyGetInternalMap(nextCheckedItems),\n });\n }),\n },\n useMergedRefs(ref, navigation.treeRef),\n ),\n {\n treeType: 'nested',\n forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n } as const,\n );\n}\n\nfunction useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n 'use no memo';\n\n if (process.env.NODE_ENV === 'development') {\n // this doesn't break rule of hooks, as environment is a static value\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n if (treeType === 'flat') {\n throw new Error(/* #__DE-INDENT__ */ `\n @fluentui/react-tree [useTree]:\n Subtrees are not allowed in a FlatTree!\n You cannot use a <Tree> component inside of a <FlatTree> component!\n `);\n }\n }\n return useSubtree(props, ref);\n}\n"],"names":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","createNextNestedCheckedItems","useNestedCheckedItems","SubtreeContext","useRootTree","useSubtree","useTreeNavigation","useTreeContext_unstable","ImmutableSet","ImmutableMap","useTree_unstable","props","ref","isRoot","useContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","checkedItems","navigation","Object","assign","onOpenChange","event","data","nextOpenItems","dangerouslyGetInternalSet","onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","nextCheckedItems","dangerouslyGetInternalMap","treeRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","ctx","Error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAE5E,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,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AAExD,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD;IAEA,MAAMC,SAASjB,MAAMkB,UAAU,CAACX,oBAAoBY;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,kBAAkBL,OAAOC,OAAOK,iBAAiBN,OAAOC;AAC1E,EAAE;AAEF,SAASI,kBAAkBL,KAAgB,EAAEC,GAA2B;IACtE;IAEA,MAAM,CAACM,WAAWC,aAAa,GAAGnB,yBAAyBW;IAC3D,MAAMS,eAAelB,sBAAsBS;IAC3C,MAAMU,aAAaf;IAEnB,OAAOgB,OAAOC,MAAM,CAClBnB,YACE;QACE,GAAGO,KAAK;QACRO;QACAE;QACAI,cAAc3B,iBAAiB,CAAC4B,OAAOC;gBAErCf;YADA,MAAMgB,gBAAgB5B,oBAAoB2B,MAAMR;aAChDP,sBAAAA,MAAMa,YAAY,cAAlBb,0CAAAA,yBAAAA,OAAqBc,OAAO;gBAC1B,GAAGC,IAAI;gBACPR,WAAWV,aAAaoB,yBAAyB,CAACD;YACpD;YACAR,aAAaQ;QACf;QACAE,cAAchC,iBAAiB,CAAC4B,OAAOC;gBACrCf;aAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBc,OAAOC;YAC5B,IAAI,CAACD,MAAMK,kBAAkB,IAAI;gBAC/BT,WAAWU,QAAQ,CAACL,MAAM;oBACxBM,eAAeN,KAAKO,iBAAiB;gBACvC;YACF;QACF;QACAC,iBAAiBrC,iBAAiB,CAAC4B,OAAOC;gBAExCf;YADA,MAAMwB,mBAAmBlC,6BAA6ByB,MAAMN;aAC5DT,yBAAAA,MAAMuB,eAAe,cAArBvB,6CAAAA,4BAAAA,OAAwBc,OAAO;gBAC7B,GAAGC,IAAI;gBACPN,cAAcX,aAAa2B,yBAAyB,CAACD;YACvD;QACF;IACF,GACArC,cAAcc,KAAKS,WAAWgB,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2BlB,WAAWkB,yBAAyB;IACjE;AAEJ;AAEA,SAAStB,iBAAiBN,KAAgB,EAAEC,GAA2B;IACrE;IAEA,IAAI4B,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,qEAAqE;QACrE,sDAAsD;QACtD,MAAMJ,WAAW/B,wBAAwBoC,CAAAA,MAAOA,IAAIL,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACvB,MAAM,IAAIM,MAA2B,CAAC;;mEAItC,CAAC;QACH;IACF;IACA,OAAOvC,WAAWM,OAAOC;AAC3B"}

package/lib/components/Tree/useTreeContextValues.js CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from 'react';
 export function useTreeContextValues_unstable(state) {
     'use no memo';
     if (state.contextType === 'root') {
-        const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;
+        const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
         /**
      * This context is created with "@fluentui/react-context-selector",
      * there is no sense to memoize it
@@ -15,7 +15,8 @@ export function useTreeContextValues_unstable(state) {
             selectionMode,
             contextType,
             level,
-            requestTreeResponse
+            requestTreeResponse,
+            forceUpdateRovingTabIndex
         };
         return {
             tree

package/lib/components/Tree/useTreeContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n 'use no memo';\n\n if (state.contextType === 'root') {\n const {\n openItems,\n level,\n contextType,\n treeType,\n checkedItems,\n selectionMode,\n appearance,\n size,\n requestTreeResponse,\n } = state;\n /*\n This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const tree: TreeContextValue = {\n treeType,\n size,\n openItems,\n appearance,\n checkedItems,\n selectionMode,\n contextType,\n level,\n requestTreeResponse,\n };\n\n return { tree };\n }\n return {\n // contextType is statically determined by the context\n // eslint-disable-next-line react-hooks/rules-of-hooks\n tree: React.useMemo(() => ({ level: state.level, contextType: 'subtree' }), [state.level]),\n };\n}\n"],"names":["React","useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","tree","useMemo"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,8BAA8BC,KAAgB;IAC5D;IAEA,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAChC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLF,WAAW,EACXG,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,IAAI,EACJC,mBAAmB,~~EACpB~~,~~GAAGT~~;QACJ;;;KAGC,GACD,~~MAAMU~~,OAAyB;~~YAC7BN~~;YACAI;YACAN;YACAK;YACAF;YACAC;YACAL;YACAE;YACAM;QACF;QAEA,OAAO;YAAEC;QAAK;IAChB;IACA,OAAO;QACL,sDAAsD;QACtD,sDAAsD;QACtDA,~~MAAMZ~~,~~MAAMa~~,OAAO,CAAC,IAAO,CAAA;~~gBAAER~~,OAAOH,MAAMG,KAAK;gBAAEF,aAAa;YAAU,CAAA,GAAI;YAACD,MAAMG,KAAK;SAAC;IAC3F;AACF"}
1	+ {"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n 'use no memo';\n\n if (state.contextType === 'root') {\n const {\n openItems,\n level,\n contextType,\n treeType,\n checkedItems,\n selectionMode,\n appearance,\n size,\n requestTreeResponse,\n forceUpdateRovingTabIndex,\n } = state;\n /*\n This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const tree: TreeContextValue = {\n treeType,\n size,\n openItems,\n appearance,\n checkedItems,\n selectionMode,\n contextType,\n level,\n requestTreeResponse,\n forceUpdateRovingTabIndex,\n };\n\n return { tree };\n }\n return {\n // contextType is statically determined by the context\n // eslint-disable-next-line react-hooks/rules-of-hooks\n tree: React.useMemo(() => ({ level: state.level, contextType: 'subtree' }), [state.level]),\n };\n}\n"],"names":["React","useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,8BAA8BC,KAAgB;IAC5D;IAEA,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAChC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLF,WAAW,EACXG,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGV;QACJ;;;KAGC,GACD,MAAMW,OAAyB;YAC7BP;YACAI;YACAN;YACAK;YACAF;YACAC;YACAL;YACAE;YACAM;YACAC;QACF;QAEA,OAAO;YAAEC;QAAK;IAChB;IACA,OAAO;QACL,sDAAsD;QACtD,sDAAsD;QACtDA,MAAMb,MAAMc,OAAO,CAAC,IAAO,CAAA;gBAAET,OAAOH,MAAMG,KAAK;gBAAEF,aAAa;YAAU,CAAA,GAAI;YAACD,MAAMG,KAAK;SAAC;IAC3F;AACF"}

package/lib/components/TreeItem/useTreeItem.js CHANGED Viewed

@@ -22,6 +22,7 @@ import { treeClassNames } from '../../Tree';
         warnIfNoProperPropsFlatTreeItem(props);
     }
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
+    const forceUpdateRovingTabIndex = useTreeContext_unstable((ctx)=>ctx.forceUpdateRovingTabIndex);
     const { level: contextLevel } = useSubtreeContext_unstable();
     const parentValue = useTreeItemContext_unstable((ctx)=>{
         var _props_parentValue;
@@ -58,6 +59,18 @@ import { treeClassNames } from '../../Tree';
             hasTreeContext
         ]);
     }
+    React.useEffect(()=>{
+        const treeItem = treeItemRef.current;
+        return ()=>{
+            // When the tree item is unmounted, we need to update the roving tab index
+            // if the tree item is the current tab indexed item
+            if (treeItem && treeItem.tabIndex === 0) {
+                forceUpdateRovingTabIndex === null || forceUpdateRovingTabIndex === void 0 ? void 0 : forceUpdateRovingTabIndex();
+            }
+        };
+    }, [
+        forceUpdateRovingTabIndex
+    ]);
     const open = useTreeContext_unstable((ctx)=>{
         var _props_open;
         return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);
@@ -69,26 +82,22 @@ import { treeClassNames } from '../../Tree';
         return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;
     });
     const handleClick = useEventCallback((event)=>{
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-        if (event.isDefaultPrevented()) {
-            return;
-        }
-        if (itemType === 'leaf') {
-            return;
-        }
-        const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);
-        if (isEventFromActions) {
-            return;
-        }
-        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);
-        if (isEventFromSubtree) {
+        var _expandIconRef_current;
+        const isEventFromActions = ()=>actionsRef.current && elementContains(actionsRef.current, event.target);
+        const isEventFromSubtree = ()=>subtreeRef.current && elementContains(subtreeRef.current, event.target);
+        const isEventFromSelection = ()=>{
+            var _selectionRef_current;
+            return (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.contains(event.target);
+        };
+        const isEventFromExpandIcon = (_expandIconRef_current = expandIconRef.current) === null || _expandIconRef_current === void 0 ? void 0 : _expandIconRef_current.contains(event.target);
+        if (isEventFromActions() || isEventFromSubtree() || isEventFromSelection()) {
             return;
+        } else if (!isEventFromExpandIcon) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
         }
-        const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);
-        if (isEventFromSelection) {
+        if (event.isDefaultPrevented() || itemType === 'leaf') {
             return;
         }
-        const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);
         ReactDOM.unstable_batchedUpdates(()=>{
             var _props_onOpenChange;
             const data = {

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

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

package/lib/components/TreeItemLayout/TreeItemLayout.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n Slot,\n ComponentProps,\n ComponentState,\n ExtractSlotProps,\n EventData,\n EventHandler,\n} from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\n\nexport type TreeItemLayoutActionVisibilityChangeData = (\n \| EventData<'mouseover' \| 'mouseout', MouseEvent>\n \| EventData<'focus' \| 'blur', FocusEvent>\n \| EventData<'blur', React.FocusEvent>\n) & { visible: boolean };\n\nexport type TreeItemLayoutActionSlotProps = ExtractSlotProps<\n Slot<'div'> & {\n /*\n Forces visibility of the aside/action content\n /\n visible?: boolean;\n onVisibilityChange?: EventHandler<TreeItemLayoutActionVisibilityChangeData>;\n }\n>;\n\nexport type TreeItemLayoutSlots = {\n root: Slot<'div'>;\n /\n Content. Children of the root slot are automatically rendered here\n /\n main: NonNullable<Slot<'div'>>;\n /\n Icon slot that renders right before main content\n /\n iconBefore?: Slot<'div'>;\n /\n Icon slot that renders right after main content\n /\n iconAfter?: Slot<'div'>;\n /\n Expand icon slot,\n * by default renders a chevron icon to indicate opening and closing\n /\n expandIcon?: Slot<'div'>;\n /\n Aside content is normally used to render a badge or other non-actionable content\n * It is aria-hidden by default and is only meant to be used as visual aid.\n /\n aside?: Slot<'div'>;\n /\n Actionable elements are normally buttons, menus, or other focusable elements.\n * Those elements are only visibly available if the given tree item is currently active.\n \n `actions` and `aside` slots are positioned on the exact same spot,\n * so they won't be visible at the same time.\n * `aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active.\n \n `actions` slot supports a `visible` prop to force visibility of the actions.\n /\n actions?: Slot<TreeItemLayoutActionSlotProps>;\n selector?: Slot<typeof Checkbox> \| Slot<typeof Radio>;\n};\n\n/\n TreeItemLayout Props\n /\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/\n State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {\n buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"rangeMappings":";;","mappings":"~~AAwEA~~;;CAEC,GACD,WAEE"}
1	+ {"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n Slot,\n ComponentProps,\n ComponentState,\n ExtractSlotProps,\n EventData,\n EventHandler,\n} from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\n\nexport type TreeItemLayoutActionVisibilityChangeData = (\n \| EventData<'mouseover' \| 'mouseout', MouseEvent>\n \| EventData<'focus' \| 'blur', FocusEvent>\n \| EventData<'blur', React.FocusEvent>\n) & { visible: boolean };\n\nexport type TreeItemLayoutActionSlotProps = ExtractSlotProps<\n Slot<'div'> & {\n /*\n Forces visibility of the aside/action content\n /\n visible?: boolean;\n onVisibilityChange?: EventHandler<TreeItemLayoutActionVisibilityChangeData>;\n }\n>;\n\nexport type TreeItemLayoutSlots = {\n root: Slot<'div'>;\n /\n Content. Children of the root slot are automatically rendered here\n /\n main: NonNullable<Slot<'div'>>;\n /\n Icon slot that renders right before main content\n /\n iconBefore?: Slot<'div'>;\n /\n Icon slot that renders right after main content\n /\n iconAfter?: Slot<'div'>;\n /\n Expand icon slot,\n * by default renders a chevron icon to indicate opening and closing\n /\n expandIcon?: Slot<'div'>;\n /\n Aside content is normally used to render a badge or other non-actionable content\n /\n aside?: Slot<'div'>;\n /\n Actionable elements are normally buttons, menus, or other focusable elements.\n * Those elements are only visibly available if the given tree item is currently active.\n \n `actions` and `aside` slots are positioned on the exact same spot,\n * so they won't be visible at the same time.\n * `aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active.\n \n `actions` slot supports a `visible` prop to force visibility of the actions.\n /\n actions?: Slot<TreeItemLayoutActionSlotProps>;\n selector?: Slot<typeof Checkbox> \| Slot<typeof Radio>;\n};\n\n/\n TreeItemLayout Props\n /\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/\n State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {\n buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAuEA;;CAEC,GACD,WAEE"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js CHANGED Viewed

@@ -57,8 +57,13 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
         onActionVisibilityChange
     ]);
     const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{
-        const isRelatedTargetFromActions = Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget));
-        if (isRelatedTargetFromActions) {
+        const isRelatedTargetFromActions = ()=>Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget));
+        const isRelatedTargetFromTreeItem = ()=>Boolean(treeItemRef.current && elementContains(treeItemRef.current, event.relatedTarget));
+        const isTargetFromActions = ()=>{
+            var _actionsRefInternal_current;
+            return Boolean((_actionsRefInternal_current = actionsRefInternal.current) === null || _actionsRefInternal_current === void 0 ? void 0 : _actionsRefInternal_current.contains(event.target));
+        };
+        if (isRelatedTargetFromActions()) {
             onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
                 visible: true,
                 event,
@@ -67,20 +72,19 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
             setIsActionsVisible(true);
             return;
         }
-        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));
-        if (!isTargetFromSubtree) {
-            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
-                visible: false,
-                event,
-                type: event.type
-            });
-            setIsActionsVisible(false);
+        if (isTargetFromActions() && isRelatedTargetFromTreeItem()) {
             return;
         }
+        onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+            visible: false,
+            event,
+            type: event.type
+        });
+        setIsActionsVisible(false);
     }, [
-        subtreeRef,
         setIsActionsVisible,
-        onActionVisibilityChange
+        onActionVisibilityChange,
+        treeItemRef
     ]);
     const expandIcon = slot.optional(props.expandIcon, {
         renderByDefault: isBranch,
@@ -176,24 +180,15 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
             elementType: 'div'
         }),
         iconBefore: slot.optional(iconBefore, {
-            defaultProps: {
-                'aria-hidden': true
-            },
             elementType: 'div'
         }),
         main: slot.always(main, {
             elementType: 'div'
         }),
         iconAfter: slot.optional(iconAfter, {
-            defaultProps: {
-                'aria-hidden': true
-            },
             elementType: 'div'
         }),
         aside: !isActionsVisible ? slot.optional(props.aside, {
-            defaultProps: {
-                'aria-hidden': true
-            },
             elementType: 'div'
         }) : undefined,
         actions,

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

	@@ -1 +1 @@
1	- {"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 {\n TreeItemLayoutActionSlotProps,\n TreeItemLayoutActionVisibilityChangeData,\n TreeItemLayoutProps,\n TreeItemLayoutState,\n} 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 'use no memo';\n\n const { main, iconAfter, iconBefore } = props;\n\n const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n const [isActionsVisibleFromProps, onActionVisibilityChange]: [\n TreeItemLayoutActionSlotProps['visible'],\n TreeItemLayoutActionSlotProps['onVisibilityChange'],\n ] = isResolvedShorthand(props.actions)\n ? // .visible .onVisibilityChange prop should not be propagated to the DOM\n [props.actions.visible, props.actions.onVisibilityChange]\n : [undefined, undefined];\n\n const [isActionsVisible, setIsActionsVisible] = useControllableState({\n state: isActionsVisibleFromProps,\n initialState: false,\n });\n 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 onActionVisibilityChange?.(event, {\n visible: true,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n setIsActionsVisible(true);\n }\n },\n [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\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 onActionVisibilityChange?.(event, {\n visible: true,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\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 onActionVisibilityChange?.(event, {\n visible: false,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n setIsActionsVisible(false);\n return;\n }\n },\n [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\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(props.actions, {\n defaultProps: { ...arrowNavigationProps, role: 'toolbar' },\n elementType: 'div',\n })\n : undefined;\n delete actions?.visible;\n delete actions?.onVisibilityChange;\n const actionsRefs = useMergedRefs(actions?.ref, actionsRef, actionsRefInternal);\n const handleActionsBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n if (isResolvedShorthand(props.actions)) {\n props.actions.onBlur?.(event);\n }\n const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget as Node));\n onActionVisibilityChange?.(event, {\n visible: isRelatedTargetFromActions,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n setIsActionsVisible(isRelatedTargetFromActions);\n });\n if (actions) {\n actions.ref = actionsRefs;\n actions.onBlur = handleActionsBlur;\n }\n\n const hasActions = Boolean(props.actions);\n\n React.useEffect(() => {\n if (treeItemRef.current && hasActions && 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","onActionVisibilityChange","actions","visible","onVisibilityChange","undefined","isActionsVisible","setIsActionsVisible","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","target","type","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,mBAAmB,EACnBC,aAAa,EACbC,IAAI,EACJC,gBAAgB,EAChBC,eAAe,EACfC,oBAAoB,QACf,4BAA4B;AACnC,SAASC,2BAA2B,EAAEC,uBAAuB,QAAQ,iBAAiB;AAOtF,SAASC,QAAQ,QAAuB,2BAA2B;AACnE,SAASC,KAAK,QAAoB,wBAAwB;AAC1D,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA;IAEA,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAAGJ;IAExC,MAAMK,YAAYZ,4BAA4Ba,CAAAA,MAAOA,IAAID,SAAS;IAClE,MAAME,gBAAgBb,wBAAwBY,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,MAAM,CAACC,2BAA2BC,yBAAyB,GAGvDtB,oBAAoBa,MAAMU,OAAO,IAEjC;QAACV,MAAMU,OAAO,CAACC,OAAO;QAAEX,MAAMU,OAAO,CAACE,kBAAkB;KAAC,GACzD;QAACC;QAAWA;KAAU;IAE1B,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGvB,qBAAqB;QACnEwB,OAAOR;QACPS,cAAc;IAChB;IACA,MAAMC,eAAezB,4BAA4Ba,CAAAA,MAAOA,IAAIY,YAAY;IACxE,MAAMC,gBAAgB1B,4BAA4Ba,CAAAA,MAAOA,IAAIa,aAAa;IAC1E,MAAMC,aAAa3B,4BAA4Ba,CAAAA,MAAOA,IAAIc,UAAU;IACpE,MAAMC,qBAAqBpC,MAAMqC,MAAM,CAAiB;IACxD,MAAMC,cAAc9B,4BAA4Ba,CAAAA,MAAOA,IAAIiB,WAAW;IACtE,MAAMC,aAAa/B,4BAA4Ba,CAAAA,MAAOA,IAAIkB,UAAU;IACpE,MAAMC,UAAUhC,4BAA4Ba,CAAAA,MAAOA,IAAImB,OAAO;IAC9D,MAAMC,WAAWjC,4BAA4Ba,CAAAA,MAAOA,IAAIqB,QAAQ,KAAK;IAErE,gHAAgH;IAChHC,kBAAkBL;IAClB,gHAAgH;IAChHK,kBAAkBJ;IAElB,MAAMK,oCAAoC5C,MAAM6C,WAAW,CACzD,CAACC;QACC,MAAMC,sBAAsBC,QAC1BT,WAAWU,OAAO,IAAI3C,gBAAgBiC,WAAWU,OAAO,EAAEH,MAAMI,MAAM;QAExE,IAAI,CAACH,qBAAqB;YACxBvB,qCAAAA,+CAAAA,yBAA2BsB,OAAO;gBAChCpB,SAAS;gBACToB;gBACAK,MAAML,MAAMK,IAAI;YAClB;YACArB,oBAAoB;QACtB;IACF,GACA;QAACS;QAAYT;QAAqBN;KAAyB;IAG7D,MAAM4B,sCAAsCpD,MAAM6C,WAAW,CAC3D,CAACC;QACC,MAAMO,6BAA6BL,QACjCZ,mBAAmBa,OAAO,IAAI3C,gBAAgB8B,mBAAmBa,OAAO,EAAEH,MAAMQ,aAAa;QAE/F,IAAID,4BAA4B;YAC9B7B,qCAAAA,+CAAAA,yBAA2BsB,OAAO;gBAChCpB,SAAS;gBACToB;gBACAK,MAAML,MAAMK,IAAI;YAClB;YACArB,oBAAoB;YACpB;QACF;QACA,MAAMiB,sBAAsBC,QAC1BT,WAAWU,OAAO,IAAI3C,gBAAgBiC,WAAWU,OAAO,EAAEH,MAAMI,MAAM;QAExE,IAAI,CAACH,qBAAqB;YACxBvB,qCAAAA,+CAAAA,yBAA2BsB,OAAO;gBAChCpB,SAAS;gBACToB;gBACAK,MAAML,MAAMK,IAAI;YAClB;YACArB,oBAAoB;YACpB;QACF;IACF,GACA;QAACS;QAAYT;QAAqBN;KAAyB;IAG7D,MAAM+B,aAAanD,KAAKoD,QAAQ,CAACzC,MAAMwC,UAAU,EAAE;QACjDE,iBAAiBhB;QACjBiB,cAAc;YACZC,wBAAU,oBAAC/C;YACX,eAAe;QACjB;QACAgD,aAAa;IACf;IACA,MAAMC,iBAAiB1D,cAAcoD,uBAAAA,iCAAAA,WAAYvC,GAAG,EAAEkB;IACtD,IAAIqB,YAAY;QACdA,WAAWvC,GAAG,GAAG6C;IACnB;IACA,MAAMC,uBAAuBjD,wBAAwB;QAAEkD,UAAU;QAAMC,MAAM;IAAa;IAC1F,MAAMvC,UAAUI,mBACZzB,KAAKoD,QAAQ,CAACzC,MAAMU,OAAO,EAAE;QAC3BiC,cAAc;YAAE,GAAGI,oBAAoB;YAAEG,MAAM;QAAU;QACzDL,aAAa;IACf,KACAhC;IACGH,oBAAAA,mCAAAA,QAASC,OAAO;IAChBD,oBAAAA,mCAAAA,QAASE,kBAAkB;IAClC,MAAMuC,cAAc/D,cAAcsB,oBAAAA,8BAAAA,QAAST,GAAG,EAAEmB,YAAYC;IAC5D,MAAM+B,oBAAoB9D,iBAAiB,CAACyC;QAC1C,IAAI5C,oBAAoBa,MAAMU,OAAO,GAAG;gBACtCV,uBAAAA;aAAAA,wBAAAA,CAAAA,iBAAAA,MAAMU,OAAO,EAAC2C,MAAM,cAApBrD,4CAAAA,2BAAAA,gBAAuB+B;QACzB;QACA,MAAMO,6BAA6BL,QAAQ1C,gBAAgBwC,MAAMuB,aAAa,EAAEvB,MAAMQ,aAAa;QACnG9B,qCAAAA,+CAAAA,yBAA2BsB,OAAO;YAChCpB,SAAS2B;YACTP;YACAK,MAAML,MAAMK,IAAI;QAClB;QACArB,oBAAoBuB;IACtB;IACA,IAAI5B,SAAS;QACXA,QAAQT,GAAG,GAAGkD;QACdzC,QAAQ2C,MAAM,GAAGD;IACnB;IAEA,MAAMG,aAAatB,QAAQjC,MAAMU,OAAO;IAExCzB,MAAMuE,SAAS,CAAC;QACd,IAAIjC,YAAYW,OAAO,IAAIqB,cAAc/C,8BAA8BK,WAAW;YAChF,MAAM4C,kBAAkBlC,YAAYW,OAAO;YAE3C,MAAMwB,kBAAkB7B;YACxB,MAAM8B,iBAAiBtB;YACvB,MAAMuB,cAAc/B;YACpB,MAAMgC,aAAaxB;YAEnBoB,gBAAgBK,gBAAgB,CAAC,aAAaJ;YAC9CD,gBAAgBK,gBAAgB,CAAC,YAAYH;YAC7CF,gBAAgBK,gBAAgB,CAAC,SAASF;YAC1CH,gBAAgBK,gBAAgB,CAAC,QAAQD;YAEzC,OAAO;gBACLJ,gBAAgBM,mBAAmB,CAAC,aAAaL;gBACjDD,gBAAgBM,mBAAmB,CAAC,YAAYJ;gBAChDF,gBAAgBM,mBAAmB,CAAC,SAASH;gBAC7CH,gBAAgBM,mBAAmB,CAAC,QAAQF;YAC9C;QACF;IACF,GAAG;QACDN;QACAhC;QACAf;QACAqB;QACAQ;KACD;IAED,OAAO;QACL2B,YAAY;YACVC,MAAM;YACNzB,YAAY;YACZpC,YAAY;YACZF,MAAM;YACNC,WAAW;YACXO,SAAS;YACTwD,OAAO;YACP,qDAAqD;YACrDC,UAAW5D,kBAAkB,gBAAgBZ,WAAWC;QAC1D;QACAwE,oBAAoB;YAAEC,MAAM;QAAQ;QACpCJ,MAAM5E,KAAKiF,MAAM,CACfpF,yBAAyB,OAAO;YAC9B,GAAGc,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKb,cAAca,KAAKI;QAC1B,IACA;YACEwC,aAAa;QACf;QAEFzC,YAAYf,KAAKoD,QAAQ,CAACrC,YAAY;YAAEuC,cAAc;gBAAE,eAAe;YAAK;YAAGE,aAAa;QAAM;QAClG3C,MAAMb,KAAKiF,MAAM,CAACpE,MAAM;YAAE2C,aAAa;QAAM;QAC7C1C,WAAWd,KAAKoD,QAAQ,CAACtC,WAAW;YAAEwC,cAAc;gBAAE,eAAe;YAAK;YAAGE,aAAa;QAAM;QAChGqB,OAAO,CAACpD,mBACJzB,KAAKoD,QAAQ,CAACzC,MAAMkE,KAAK,EAAE;YAAEvB,cAAc;gBAAE,eAAe;YAAK;YAAGE,aAAa;QAAM,KACvFhC;QACJH;QACA8B;QACA2B,UAAU9E,KAAKoD,QAAQ,CAACzC,MAAMmE,QAAQ,EAAE;YACtCzB,iBAAiBnC,kBAAkB;YACnCoC,cAAc;gBACZlB;gBACA8C,UAAU,CAAC;gBACX,eAAe;gBACftE,KAAKiB;YAIP;YACA2B,aAActC,kBAAkB,gBAAgBZ,WAAWC;QAG7D;IACF;AACF,EAAE;AAEF,SAASgC,kBAAyB3B,GAAsB;IACtD,IAAIuE,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOzE,QAAQ,YAAYA,QAAQ,QAAQ,CAAE,CAAA,aAAaA,GAAE,GAAI;YAClE,MAAM,IAAI0E,MAAM,CAAC;8BACO,EAAE5E,2BAA2B6E,IAAI,CAAC;;MAE1D,CAAC;QACH;IACF;AACF"}
1	+ {"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 {\n TreeItemLayoutActionSlotProps,\n TreeItemLayoutActionVisibilityChangeData,\n TreeItemLayoutProps,\n TreeItemLayoutState,\n} 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 'use no memo';\n\n const { main, iconAfter, iconBefore } = props;\n\n const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n const [isActionsVisibleFromProps, onActionVisibilityChange]: [\n TreeItemLayoutActionSlotProps['visible'],\n TreeItemLayoutActionSlotProps['onVisibilityChange'],\n ] = isResolvedShorthand(props.actions)\n ? // .visible .onVisibilityChange prop should not be propagated to the DOM\n [props.actions.visible, props.actions.onVisibilityChange]\n : [undefined, undefined];\n\n const [isActionsVisible, setIsActionsVisible] = useControllableState({\n state: isActionsVisibleFromProps,\n initialState: false,\n });\n\n const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n const actionsRefInternal = React.useRef<HTMLDivElement>(null);\n const treeItemRef = useTreeItemContext_unstable(ctx => ctx.treeItemRef);\n const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n const checked = useTreeItemContext_unstable(ctx => ctx.checked);\n const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n 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 onActionVisibilityChange?.(event, {\n visible: true,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n setIsActionsVisible(true);\n }\n },\n [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\n );\n\n const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n (event: FocusEvent \| MouseEvent) => {\n const isRelatedTargetFromActions = () =>\n Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget as Node));\n const isRelatedTargetFromTreeItem = () =>\n Boolean(treeItemRef.current && elementContains(treeItemRef.current, event.relatedTarget as Node));\n const isTargetFromActions = () => Boolean(actionsRefInternal.current?.contains(event.target as Node));\n if (isRelatedTargetFromActions()) {\n onActionVisibilityChange?.(event, {\n visible: true,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n setIsActionsVisible(true);\n return;\n }\n if (isTargetFromActions() && isRelatedTargetFromTreeItem()) {\n return;\n }\n onActionVisibilityChange?.(event, {\n visible: false,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n setIsActionsVisible(false);\n },\n [setIsActionsVisible, onActionVisibilityChange, treeItemRef],\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(props.actions, {\n defaultProps: { ...arrowNavigationProps, role: 'toolbar' },\n elementType: 'div',\n })\n : undefined;\n delete actions?.visible;\n delete actions?.onVisibilityChange;\n const actionsRefs = useMergedRefs(actions?.ref, actionsRef, actionsRefInternal);\n const handleActionsBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n if (isResolvedShorthand(props.actions)) {\n props.actions.onBlur?.(event);\n }\n const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget as Node));\n onActionVisibilityChange?.(event, {\n visible: isRelatedTargetFromActions,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n setIsActionsVisible(isRelatedTargetFromActions);\n });\n if (actions) {\n actions.ref = actionsRefs;\n actions.onBlur = handleActionsBlur;\n }\n\n const hasActions = Boolean(props.actions);\n\n React.useEffect(() => {\n if (treeItemRef.current && hasActions && 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, { elementType: 'div' }),\n main: slot.always(main, { elementType: 'div' }),\n iconAfter: slot.optional(iconAfter, { elementType: 'div' }),\n aside: !isActionsVisible ? slot.optional(props.aside, { elementType: 'div' }) : undefined,\n actions,\n expandIcon,\n selector: slot.optional(props.selector, {\n renderByDefault: selectionMode !== 'none',\n defaultProps: {\n checked,\n tabIndex: -1,\n 'aria-hidden': true,\n ref: selectionRef,\n // casting here to a union between checkbox and radio\n // since ref is not present on the selector signature\n // FIXME: look into Slot type to see if we can make this work\n } as CheckboxProps \| RadioProps,\n elementType: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<\n CheckboxProps \| RadioProps\n >,\n }),\n };\n};\n\nfunction assertIsRefObject<Value>(ref?: React.Ref<Value>): asserts ref is React.RefObject<Value> {\n if (process.env.NODE_ENV !== 'production') {\n if (typeof ref !== 'object' \|\| ref === null \|\| !('current' in ref)) {\n throw new Error(`\n @fluentui/react-tree [${useTreeItemLayout_unstable.name}]:\n Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.\n `);\n }\n }\n}\n"],"names":["React","getIntrinsicElementProps","isResolvedShorthand","useMergedRefs","slot","useEventCallback","elementContains","useControllableState","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useArrowNavigationGroup","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","ctx","selectionMode","isActionsVisibleFromProps","onActionVisibilityChange","actions","visible","onVisibilityChange","undefined","isActionsVisible","setIsActionsVisible","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","target","type","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","isRelatedTargetFromTreeItem","isTargetFromActions","contains","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/contexts/treeContext.js CHANGED Viewed

@@ -11,6 +11,7 @@ import { ImmutableMap } from '../utils/ImmutableMap';
     openItems: ImmutableSet.empty,
     checkedItems: ImmutableMap.empty,
     requestTreeResponse: noop,
+    forceUpdateRovingTabIndex: noop,
     appearance: 'subtle',
     size: 'medium'
 };

package/lib/contexts/treeContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport type { SelectionMode, DistributiveOmit } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n contextType?: 'root';\n level: number;\n treeType: 'nested' \| 'flat';\n selectionMode: 'none' \| SelectionMode;\n appearance: 'subtle' \| 'subtle-alpha' \| 'transparent';\n size: 'small' \| 'medium';\n openItems: ImmutableSet<TreeItemValue>;\n checkedItems: ImmutableMap<TreeItemValue, 'mixed' \| boolean>;\n /*\n requests root Tree component to respond to some tree item event,\n /\n requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n \| (DistributiveOmit<TreeOpenChangeData, 'openItems'> & { requestType: 'open' })\n \| (TreeNavigationData_unstable & { requestType: 'navigate' })\n \| (DistributiveOmit<TreeCheckedChangeData, 'selectionMode' \| 'checkedItems'> & { requestType: 'selection' })\n);\n\n/\n @internal\n /\nconst defaultTreeContextValue: TreeContextValue = {\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};\n\nfunction noop() {\n / noop /\n}\n\n/\n @internal\n */\nexport const TreeContext: Context<TreeContextValue> = createContext<TreeContextValue \| undefined>(\n undefined,\n) as Context<TreeContextValue>;\n\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n useContextSelector(TreeContext, (ctx = defaultTreeContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ImmutableSet","ImmutableMap","defaultTreeContextValue","level","contextType","treeType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","useTreeContext_unstable","selector","ctx"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAG/G,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;~~AAwBrD~~;;CAEC,GACD,MAAMC,0BAA4C;IAChDC,OAAO;IACPC,aAAa;IACbC,UAAU;IACVC,eAAe;IACfC,WAAWP,aAAaQ,KAAK;IAC7BC,cAAcR,aAAaO,KAAK;IAChCE,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,~~SAASF~~;AACP,QAAQ,GACV;AAEA;;CAEC,GACD,OAAO,~~MAAMG~~,~~cAAyChB~~,~~cACpDiB~~,WAC6B;AAE/B,OAAO,MAAMC,0BAA0B,CAAIC,~~WACzClB~~,~~mBAAmBe~~,aAAa,CAACI,~~MAAMhB~~,uBAAuB,~~GAAKe~~,SAASC,MAAM"}
1	+ {"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport type { SelectionMode, DistributiveOmit } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n contextType?: 'root';\n level: number;\n treeType: 'nested' \| 'flat';\n selectionMode: 'none' \| SelectionMode;\n appearance: 'subtle' \| 'subtle-alpha' \| 'transparent';\n size: 'small' \| 'medium';\n openItems: ImmutableSet<TreeItemValue>;\n checkedItems: ImmutableMap<TreeItemValue, 'mixed' \| boolean>;\n /*\n requests root Tree component to respond to some tree item event,\n /\n requestTreeResponse(request: TreeItemRequest): void;\n // FIXME: this is only marked as optional to avoid breaking changes\n // it should always be provided internally\n forceUpdateRovingTabIndex?(): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n \| (DistributiveOmit<TreeOpenChangeData, 'openItems'> & { requestType: 'open' })\n \| (TreeNavigationData_unstable & { requestType: 'navigate' })\n \| (DistributiveOmit<TreeCheckedChangeData, 'selectionMode' \| 'checkedItems'> & { requestType: 'selection' })\n);\n\n/\n @internal\n /\nconst defaultTreeContextValue: TreeContextValue = {\n level: 0,\n contextType: 'root',\n treeType: 'nested',\n selectionMode: 'none',\n openItems: ImmutableSet.empty,\n checkedItems: ImmutableMap.empty,\n requestTreeResponse: noop,\n forceUpdateRovingTabIndex: noop,\n appearance: 'subtle',\n size: 'medium',\n};\n\nfunction noop() {\n / noop /\n}\n\n/\n @internal\n */\nexport const TreeContext: Context<TreeContextValue> = createContext<TreeContextValue \| undefined>(\n undefined,\n) as Context<TreeContextValue>;\n\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n useContextSelector(TreeContext, (ctx = defaultTreeContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ImmutableSet","ImmutableMap","defaultTreeContextValue","level","contextType","treeType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","forceUpdateRovingTabIndex","appearance","size","TreeContext","undefined","useTreeContext_unstable","selector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAG/G,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;AA2BrD;;CAEC,GACD,MAAMC,0BAA4C;IAChDC,OAAO;IACPC,aAAa;IACbC,UAAU;IACVC,eAAe;IACfC,WAAWP,aAAaQ,KAAK;IAC7BC,cAAcR,aAAaO,KAAK;IAChCE,qBAAqBC;IACrBC,2BAA2BD;IAC3BE,YAAY;IACZC,MAAM;AACR;AAEA,SAASH;AACP,QAAQ,GACV;AAEA;;CAEC,GACD,OAAO,MAAMI,cAAyCjB,cACpDkB,WAC6B;AAE/B,OAAO,MAAMC,0BAA0B,CAAIC,WACzCnB,mBAAmBgB,aAAa,CAACI,MAAMjB,uBAAuB,GAAKgB,SAASC,MAAM"}