@fluentui/react-tree 9.10.12 → 9.11.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.
- package/CHANGELOG.md +32 -2
- package/lib/hooks/useRootTree.js +0 -4
- package/lib/hooks/useRootTree.js.map +1 -1
- package/lib/hooks/useSubtree.js +0 -4
- package/lib/hooks/useSubtree.js.map +1 -1
- package/lib-commonjs/hooks/useRootTree.js +0 -4
- package/lib-commonjs/hooks/useRootTree.js.map +1 -1
- package/lib-commonjs/hooks/useSubtree.js +0 -4
- package/lib-commonjs/hooks/useSubtree.js.map +1 -1
- package/package.json +12 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,42 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tree
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 13 Jun 2025 12:30:21 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.11.1)
|
|
8
|
+
|
|
9
|
+
Fri, 13 Jun 2025 12:30:21 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.11.0..@fluentui/react-tree_v9.11.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-avatar to v9.8.1 ([PR #34639](https://github.com/microsoft/fluentui/pull/34639) by beachball)
|
|
15
|
+
- Bump @fluentui/react-checkbox to v9.4.1 ([PR #34639](https://github.com/microsoft/fluentui/pull/34639) by beachball)
|
|
16
|
+
- Bump @fluentui/react-radio to v9.4.1 ([PR #34639](https://github.com/microsoft/fluentui/pull/34639) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.11.0)
|
|
19
|
+
|
|
20
|
+
Thu, 12 Jun 2025 09:43:32 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.10.12..@fluentui/react-tree_v9.11.0)
|
|
22
|
+
|
|
23
|
+
### Minor changes
|
|
24
|
+
|
|
25
|
+
- Bump @fluentui/react-aria to v9.15.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
|
|
26
|
+
- Bump @fluentui/react-avatar to v9.8.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
|
|
27
|
+
- Bump @fluentui/react-button to v9.5.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
|
|
28
|
+
- Bump @fluentui/react-checkbox to v9.4.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
|
|
29
|
+
- Bump @fluentui/react-context-selector to v9.2.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
|
|
30
|
+
- Bump @fluentui/react-motion-components-preview to v0.6.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
|
|
31
|
+
- Bump @fluentui/react-motion to v9.8.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
|
|
32
|
+
- Bump @fluentui/react-radio to v9.4.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
|
|
33
|
+
- Bump @fluentui/react-tabster to v9.25.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
|
|
34
|
+
- Bump @fluentui/react-utilities to v9.21.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
|
|
35
|
+
- Bump @fluentui/react-jsx-runtime to v9.1.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
|
|
36
|
+
|
|
7
37
|
## [9.10.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.10.12)
|
|
8
38
|
|
|
9
|
-
Wed, 11 Jun 2025 22:
|
|
39
|
+
Wed, 11 Jun 2025 22:31:58 GMT
|
|
10
40
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.10.11..@fluentui/react-tree_v9.10.12)
|
|
11
41
|
|
|
12
42
|
### Patches
|
package/lib/hooks/useRootTree.js
CHANGED
|
@@ -72,10 +72,6 @@ import { ImmutableMap } from '../utils/ImmutableMap';
|
|
|
72
72
|
return {
|
|
73
73
|
components: {
|
|
74
74
|
root: 'div',
|
|
75
|
-
// TODO: remove once React v18 slot API is modified
|
|
76
|
-
// This is a problem at the moment due to UnknownSlotProps assumption
|
|
77
|
-
// that `children` property is `ReactNode`, which in this case is not valid
|
|
78
|
-
// as PresenceComponentProps['children'] is `ReactElement`
|
|
79
75
|
collapseMotion: Collapse
|
|
80
76
|
},
|
|
81
77
|
contextType: 'root',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useRootTree.ts"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TreeCheckedChangeData, TreeProps, TreeState } from '../Tree';\nimport * as React from 'react';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useRootTree.ts"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TreeCheckedChangeData, TreeProps, TreeState } from '../Tree';\nimport * as React from 'react';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n props: TreeProps,\n ref: React.Ref<HTMLElement>,\n): Omit<TreeState & TreeContextValue, 'treeType'> {\n warnIfNoProperPropsRootTree(props);\n\n const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n const openItems = React.useMemo(() => ImmutableSet.from(props.openItems), [props.openItems]);\n const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n\n const requestOpenChange = (request: Extract<TreeItemRequest, { requestType: 'open' }>) => {\n props.onOpenChange?.(request.event, {\n ...request,\n openItems: ImmutableSet.dangerouslyGetInternalSet(createNextOpenItems(request, openItems)),\n });\n };\n\n const requestCheckedChange = (request: Extract<TreeItemRequest, { requestType: 'selection' }>) => {\n if (selectionMode === 'none') {\n return;\n }\n props.onCheckedChange?.(request.event, {\n ...request,\n selectionMode,\n checkedItems: ImmutableMap.dangerouslyGetInternalMap(checkedItems),\n // Casting is required here due to selection | multiselection spreading the union problem\n } as TreeCheckedChangeData);\n };\n\n const requestNavigation = (request: Extract<TreeItemRequest, { requestType: 'navigate' }>) => {\n let isScrollPrevented = false;\n props.onNavigation?.(request.event, {\n ...request,\n preventScroll: () => {\n isScrollPrevented = true;\n },\n isScrollPrevented: () => isScrollPrevented,\n });\n switch (request.type) {\n case treeDataTypes.ArrowDown:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.Home:\n case treeDataTypes.End:\n // stop the default behavior of the event\n // which is to scroll the page\n request.event.preventDefault();\n }\n };\n\n const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n switch (request.requestType) {\n case 'navigate':\n return requestNavigation(request);\n case 'open':\n return requestOpenChange(request);\n case 'selection':\n return requestCheckedChange(request);\n }\n });\n\n return {\n components: {\n root: 'div',\n collapseMotion: Collapse,\n },\n contextType: 'root',\n selectionMode,\n navigationMode: props.navigationMode ?? 'tree',\n open: true,\n appearance,\n size,\n level: 1,\n openItems,\n checkedItems,\n requestTreeResponse,\n forceUpdateRovingTabIndex: () => {\n // noop\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n role: 'tree',\n 'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n ...props,\n }),\n { elementType: 'div' },\n ),\n collapseMotion: undefined,\n };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n if (process.env.NODE_ENV === 'development') {\n if (!props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn(/* #__DE-INDENT__ */ `\n @fluentui/react-tree [useRootTree]:\n Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n `);\n }\n }\n}\n"],"names":["getIntrinsicElementProps","useEventCallback","slot","React","Collapse","createCheckedItems","treeDataTypes","createNextOpenItems","ImmutableSet","ImmutableMap","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","from","checkedItems","requestOpenChange","request","onOpenChange","event","dangerouslyGetInternalSet","requestCheckedChange","onCheckedChange","dangerouslyGetInternalMap","requestNavigation","isScrollPrevented","onNavigation","preventScroll","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","requestType","components","root","collapseMotion","contextType","navigationMode","open","level","forceUpdateRovingTabIndex","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/lib/hooks/useSubtree.js
CHANGED
|
@@ -17,10 +17,6 @@ import { presenceMotionSlot } from '@fluentui/react-motion';
|
|
|
17
17
|
open,
|
|
18
18
|
components: {
|
|
19
19
|
root: 'div',
|
|
20
|
-
// TODO: remove once React v18 slot API is modified
|
|
21
|
-
// This is a problem at the moment due to UnknownSlotProps assumption
|
|
22
|
-
// that `children` property is `ReactNode`, which in this case is not valid
|
|
23
|
-
// as PresenceComponentProps['children'] is `ReactElement`
|
|
24
20
|
collapseMotion: Collapse
|
|
25
21
|
},
|
|
26
22
|
level: parentLevel + 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { presenceMotionSlot
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n props: TreeProps,\n ref: React.Ref<HTMLElement>,\n): Omit<TreeState & SubtreeContextValue, 'treeType'> {\n const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n const { level: parentLevel } = useSubtreeContext_unstable();\n\n const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n return {\n contextType: 'subtree',\n open,\n components: {\n root: 'div',\n collapseMotion: Collapse,\n },\n level: parentLevel + 1,\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, subtreeRef) as React.Ref<HTMLDivElement>,\n role: 'group',\n ...props,\n }),\n { elementType: 'div' },\n ),\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: Collapse,\n defaultProps: {\n visible: open,\n unmountOnExit: true,\n },\n }),\n };\n}\n"],"names":["React","useSubtreeContext_unstable","useTreeItemContext_unstable","getIntrinsicElementProps","useMergedRefs","slot","Collapse","presenceMotionSlot","useSubtree","props","ref","subtreeRef","ctx","level","parentLevel","open","contextType","components","root","collapseMotion","always","role","elementType","defaultProps","visible","unmountOnExit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAA8BC,0BAA0B,EAAEC,2BAA2B,QAAQ,oBAAoB;AACjH,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,QAAQ,QAAQ,4CAA4C;AACrE,SAASC,kBAAkB,QAAQ,yBAAyB;AAE5D;;;;;CAKC,GACD,OAAO,SAASC,WACdC,KAAgB,EAChBC,GAA2B;IAE3B,MAAMC,aAAaT,4BAA4BU,CAAAA,MAAOA,IAAID,UAAU;IAEpE,MAAM,EAAEE,OAAOC,WAAW,EAAE,GAAGb;IAE/B,MAAMc,OAAOb,4BAA4BU,CAAAA,MAAOA,IAAIG,IAAI;IAExD,OAAO;QACLC,aAAa;QACbD;QACAE,YAAY;YACVC,MAAM;YACNC,gBAAgBb;QAClB;QACAO,OAAOC,cAAc;QACrBI,MAAMb,KAAKe,MAAM,CACfjB,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FO,KAAKN,cAAcM,KAAKC;YACxBU,MAAM;YACN,GAAGZ,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;QAEvBH,gBAAgBZ,mBAAmBE,MAAMU,cAAc,EAAE;YACvDG,aAAahB;YACbiB,cAAc;gBACZC,SAAST;gBACTU,eAAe;YACjB;QACF;IACF;AACF"}
|
|
@@ -78,10 +78,6 @@ function useRootTree(props, ref) {
|
|
|
78
78
|
return {
|
|
79
79
|
components: {
|
|
80
80
|
root: 'div',
|
|
81
|
-
// TODO: remove once React v18 slot API is modified
|
|
82
|
-
// This is a problem at the moment due to UnknownSlotProps assumption
|
|
83
|
-
// that `children` property is `ReactNode`, which in this case is not valid
|
|
84
|
-
// as PresenceComponentProps['children'] is `ReactElement`
|
|
85
81
|
collapseMotion: _reactmotioncomponentspreview.Collapse
|
|
86
82
|
},
|
|
87
83
|
contextType: 'root',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useRootTree.ts"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TreeCheckedChangeData, TreeProps, TreeState } from '../Tree';\nimport * as React from 'react';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useRootTree.ts"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TreeCheckedChangeData, TreeProps, TreeState } from '../Tree';\nimport * as React from 'react';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n props: TreeProps,\n ref: React.Ref<HTMLElement>,\n): Omit<TreeState & TreeContextValue, 'treeType'> {\n warnIfNoProperPropsRootTree(props);\n\n const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n const openItems = React.useMemo(() => ImmutableSet.from(props.openItems), [props.openItems]);\n const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n\n const requestOpenChange = (request: Extract<TreeItemRequest, { requestType: 'open' }>) => {\n props.onOpenChange?.(request.event, {\n ...request,\n openItems: ImmutableSet.dangerouslyGetInternalSet(createNextOpenItems(request, openItems)),\n });\n };\n\n const requestCheckedChange = (request: Extract<TreeItemRequest, { requestType: 'selection' }>) => {\n if (selectionMode === 'none') {\n return;\n }\n props.onCheckedChange?.(request.event, {\n ...request,\n selectionMode,\n checkedItems: ImmutableMap.dangerouslyGetInternalMap(checkedItems),\n // Casting is required here due to selection | multiselection spreading the union problem\n } as TreeCheckedChangeData);\n };\n\n const requestNavigation = (request: Extract<TreeItemRequest, { requestType: 'navigate' }>) => {\n let isScrollPrevented = false;\n props.onNavigation?.(request.event, {\n ...request,\n preventScroll: () => {\n isScrollPrevented = true;\n },\n isScrollPrevented: () => isScrollPrevented,\n });\n switch (request.type) {\n case treeDataTypes.ArrowDown:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.Home:\n case treeDataTypes.End:\n // stop the default behavior of the event\n // which is to scroll the page\n request.event.preventDefault();\n }\n };\n\n const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n switch (request.requestType) {\n case 'navigate':\n return requestNavigation(request);\n case 'open':\n return requestOpenChange(request);\n case 'selection':\n return requestCheckedChange(request);\n }\n });\n\n return {\n components: {\n root: 'div',\n collapseMotion: Collapse,\n },\n contextType: 'root',\n selectionMode,\n navigationMode: props.navigationMode ?? 'tree',\n open: true,\n appearance,\n size,\n level: 1,\n openItems,\n checkedItems,\n requestTreeResponse,\n forceUpdateRovingTabIndex: () => {\n // noop\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n role: 'tree',\n 'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n ...props,\n }),\n { elementType: 'div' },\n ),\n collapseMotion: undefined,\n };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n if (process.env.NODE_ENV === 'development') {\n if (!props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn(/* #__DE-INDENT__ */ `\n @fluentui/react-tree [useRootTree]:\n Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n `);\n }\n }\n}\n"],"names":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","React","useMemo","ImmutableSet","from","checkedItems","createCheckedItems","requestOpenChange","request","onOpenChange","event","dangerouslyGetInternalSet","createNextOpenItems","requestCheckedChange","onCheckedChange","ImmutableMap","dangerouslyGetInternalMap","requestNavigation","isScrollPrevented","onNavigation","preventScroll","type","treeDataTypes","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","useEventCallback","requestType","components","root","collapseMotion","Collapse","contextType","navigationMode","open","level","forceUpdateRovingTabIndex","slot","always","getIntrinsicElementProps","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -23,10 +23,6 @@ function useSubtree(props, ref) {
|
|
|
23
23
|
open,
|
|
24
24
|
components: {
|
|
25
25
|
root: 'div',
|
|
26
|
-
// TODO: remove once React v18 slot API is modified
|
|
27
|
-
// This is a problem at the moment due to UnknownSlotProps assumption
|
|
28
|
-
// that `children` property is `ReactNode`, which in this case is not valid
|
|
29
|
-
// as PresenceComponentProps['children'] is `ReactElement`
|
|
30
26
|
collapseMotion: _reactmotioncomponentspreview.Collapse
|
|
31
27
|
},
|
|
32
28
|
level: parentLevel + 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { presenceMotionSlot
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n props: TreeProps,\n ref: React.Ref<HTMLElement>,\n): Omit<TreeState & SubtreeContextValue, 'treeType'> {\n const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n const { level: parentLevel } = useSubtreeContext_unstable();\n\n const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n return {\n contextType: 'subtree',\n open,\n components: {\n root: 'div',\n collapseMotion: Collapse,\n },\n level: parentLevel + 1,\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, subtreeRef) as React.Ref<HTMLDivElement>,\n role: 'group',\n ...props,\n }),\n { elementType: 'div' },\n ),\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: Collapse,\n defaultProps: {\n visible: open,\n unmountOnExit: true,\n },\n }),\n };\n}\n"],"names":["useSubtree","props","ref","subtreeRef","useTreeItemContext_unstable","ctx","level","parentLevel","useSubtreeContext_unstable","open","contextType","components","root","collapseMotion","Collapse","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType","presenceMotionSlot","defaultProps","visible","unmountOnExit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAagBA;;;eAAAA;;;;iEAbO;uBAEsE;gCAC/B;8CACrC;6BACU;AAQ5B,SAASA,WACdC,KAAgB,EAChBC,GAA2B;IAE3B,MAAMC,aAAaC,IAAAA,kCAAAA,EAA4BC,CAAAA,MAAOA,IAAIF,UAAU;IAEpE,MAAM,EAAEG,OAAOC,WAAW,EAAE,GAAGC,IAAAA,iCAAAA;IAE/B,MAAMC,OAAOL,IAAAA,kCAAAA,EAA4BC,CAAAA,MAAOA,IAAII,IAAI;IAExD,OAAO;QACLC,aAAa;QACbD;QACAE,YAAY;YACVC,MAAM;YACNC,gBAAgBC,sCAAAA;QAClB;QACAR,OAAOC,cAAc;QACrBK,MAAMG,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5Ff,KAAKgB,IAAAA,6BAAAA,EAAchB,KAAKC;YACxBgB,MAAM;YACN,GAAGlB,KAAK;QACV,IACA;YAAEmB,aAAa;QAAM;QAEvBP,gBAAgBQ,IAAAA,+BAAAA,EAAmBpB,MAAMY,cAAc,EAAE;YACvDO,aAAaN,sCAAAA;YACbQ,cAAc;gBACZC,SAASd;gBACTe,eAAe;YACjB;QACF;IACF;AACF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tree",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.11.1",
|
|
4
4
|
"description": "Tree component for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -21,20 +21,20 @@
|
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
24
|
-
"@fluentui/react-aria": "^9.
|
|
25
|
-
"@fluentui/react-avatar": "^9.
|
|
26
|
-
"@fluentui/react-button": "^9.
|
|
27
|
-
"@fluentui/react-checkbox": "^9.
|
|
28
|
-
"@fluentui/react-context-selector": "^9.
|
|
24
|
+
"@fluentui/react-aria": "^9.15.0",
|
|
25
|
+
"@fluentui/react-avatar": "^9.8.1",
|
|
26
|
+
"@fluentui/react-button": "^9.5.0",
|
|
27
|
+
"@fluentui/react-checkbox": "^9.4.1",
|
|
28
|
+
"@fluentui/react-context-selector": "^9.2.0",
|
|
29
29
|
"@fluentui/react-icons": "^2.0.245",
|
|
30
|
-
"@fluentui/react-motion-components-preview": "^0.
|
|
31
|
-
"@fluentui/react-motion": "^9.
|
|
32
|
-
"@fluentui/react-radio": "^9.
|
|
30
|
+
"@fluentui/react-motion-components-preview": "^0.6.0",
|
|
31
|
+
"@fluentui/react-motion": "^9.8.0",
|
|
32
|
+
"@fluentui/react-radio": "^9.4.1",
|
|
33
33
|
"@fluentui/react-shared-contexts": "^9.23.1",
|
|
34
|
-
"@fluentui/react-tabster": "^9.
|
|
34
|
+
"@fluentui/react-tabster": "^9.25.0",
|
|
35
35
|
"@fluentui/react-theme": "^9.1.24",
|
|
36
|
-
"@fluentui/react-utilities": "^9.
|
|
37
|
-
"@fluentui/react-jsx-runtime": "^9.0
|
|
36
|
+
"@fluentui/react-utilities": "^9.21.0",
|
|
37
|
+
"@fluentui/react-jsx-runtime": "^9.1.0",
|
|
38
38
|
"@griffel/react": "^1.5.22",
|
|
39
39
|
"@swc/helpers": "^0.5.1"
|
|
40
40
|
},
|