@fluentui/react-tree 9.0.0-beta.8 → 9.0.0-beta.9
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.json +58 -1
- package/CHANGELOG.md +18 -2
- package/dist/index.d.ts +38 -1
- package/lib/hooks/useFlatTree.js +10 -2
- package/lib/hooks/useFlatTree.js.map +1 -1
- package/lib/utils/flattenTree.js +73 -13
- package/lib/utils/flattenTree.js.map +1 -1
- package/lib-commonjs/hooks/useFlatTree.js +10 -2
- package/lib-commonjs/hooks/useFlatTree.js.map +1 -1
- package/lib-commonjs/utils/flattenTree.js +40 -13
- package/lib-commonjs/utils/flattenTree.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,64 @@
|
|
|
2
2
|
"name": "@fluentui/react-tree",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 04 Apr 2023 18:42:18 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tree_v9.0.0-beta.9",
|
|
7
|
+
"version": "9.0.0-beta.9",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
12
|
+
"package": "@fluentui/react-tree",
|
|
13
|
+
"commit": "7dc03924c99ea14c4df43e56454fc7781e1fdb89",
|
|
14
|
+
"comment": "chore: adds e2e flat tree tests"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-tree",
|
|
19
|
+
"comment": "Bump @fluentui/react-aria to v9.3.16",
|
|
20
|
+
"commit": "37a3a6eda1fd41086edd99a0b1560a8740f8c6c5"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-tree",
|
|
25
|
+
"comment": "Bump @fluentui/react-avatar to v9.4.7",
|
|
26
|
+
"commit": "37a3a6eda1fd41086edd99a0b1560a8740f8c6c5"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-tree",
|
|
31
|
+
"comment": "Bump @fluentui/react-button to v9.3.7",
|
|
32
|
+
"commit": "37a3a6eda1fd41086edd99a0b1560a8740f8c6c5"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-tree",
|
|
37
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.16",
|
|
38
|
+
"commit": "37a3a6eda1fd41086edd99a0b1560a8740f8c6c5"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-tree",
|
|
43
|
+
"comment": "Bump @fluentui/react-portal to v9.2.4",
|
|
44
|
+
"commit": "37a3a6eda1fd41086edd99a0b1560a8740f8c6c5"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-tree",
|
|
49
|
+
"comment": "Bump @fluentui/react-tabster to v9.6.3",
|
|
50
|
+
"commit": "37a3a6eda1fd41086edd99a0b1560a8740f8c6c5"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-tree",
|
|
55
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.3",
|
|
56
|
+
"commit": "37a3a6eda1fd41086edd99a0b1560a8740f8c6c5"
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"date": "Fri, 24 Mar 2023 10:15:27 GMT",
|
|
6
63
|
"tag": "@fluentui/react-tree_v9.0.0-beta.8",
|
|
7
64
|
"version": "9.0.0-beta.8",
|
|
8
65
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tree
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 04 Apr 2023 18:42:18 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.9)
|
|
8
|
+
|
|
9
|
+
Tue, 04 Apr 2023 18:42:18 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.8..@fluentui/react-tree_v9.0.0-beta.9)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- chore: adds e2e flat tree tests ([PR #27318](https://github.com/microsoft/fluentui/pull/27318) by bernardo.sunderhus@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-aria to v9.3.16 ([PR #27430](https://github.com/microsoft/fluentui/pull/27430) by beachball)
|
|
16
|
+
- Bump @fluentui/react-avatar to v9.4.7 ([PR #27430](https://github.com/microsoft/fluentui/pull/27430) by beachball)
|
|
17
|
+
- Bump @fluentui/react-button to v9.3.7 ([PR #27430](https://github.com/microsoft/fluentui/pull/27430) by beachball)
|
|
18
|
+
- Bump @fluentui/react-context-selector to v9.1.16 ([PR #27430](https://github.com/microsoft/fluentui/pull/27430) by beachball)
|
|
19
|
+
- Bump @fluentui/react-portal to v9.2.4 ([PR #27430](https://github.com/microsoft/fluentui/pull/27430) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v9.6.3 ([PR #27430](https://github.com/microsoft/fluentui/pull/27430) by beachball)
|
|
21
|
+
- Bump @fluentui/react-utilities to v9.7.3 ([PR #27430](https://github.com/microsoft/fluentui/pull/27430) by beachball)
|
|
22
|
+
|
|
7
23
|
## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.8)
|
|
8
24
|
|
|
9
|
-
Fri, 24 Mar 2023 10:15:
|
|
25
|
+
Fri, 24 Mar 2023 10:15:27 GMT
|
|
10
26
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.6..@fluentui/react-tree_v9.0.0-beta.8)
|
|
11
27
|
|
|
12
28
|
### Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -24,6 +24,43 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
|
24
24
|
|
|
25
25
|
/**
|
|
26
26
|
* Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`
|
|
27
|
+
* @example
|
|
28
|
+
* ```tsx
|
|
29
|
+
* const defaultItems = flattenTree_unstable([
|
|
30
|
+
* {
|
|
31
|
+
* children: <TreeItemLayout>level 1, item 1</TreeItemLayout>,
|
|
32
|
+
* subtree: [
|
|
33
|
+
* {
|
|
34
|
+
* children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,
|
|
35
|
+
* },
|
|
36
|
+
* {
|
|
37
|
+
* children: <TreeItemLayout>level 2, item 2</TreeItemLayout>,
|
|
38
|
+
* },
|
|
39
|
+
* {
|
|
40
|
+
* children: <TreeItemLayout>level 2, item 3</TreeItemLayout>,
|
|
41
|
+
* },
|
|
42
|
+
* ],
|
|
43
|
+
* },
|
|
44
|
+
* {
|
|
45
|
+
* children: <TreeItemLayout>level 1, item 2</TreeItemLayout>,
|
|
46
|
+
* subtree: [
|
|
47
|
+
* {
|
|
48
|
+
* children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,
|
|
49
|
+
* subtree: [
|
|
50
|
+
* {
|
|
51
|
+
* children: <TreeItemLayout>level 3, item 1</TreeItemLayout>,
|
|
52
|
+
* subtree: [
|
|
53
|
+
* {
|
|
54
|
+
* children: <TreeItemLayout>level 4, item 1</TreeItemLayout>,
|
|
55
|
+
* },
|
|
56
|
+
* ],
|
|
57
|
+
* },
|
|
58
|
+
* ],
|
|
59
|
+
* },
|
|
60
|
+
* ],
|
|
61
|
+
* },
|
|
62
|
+
* ]);
|
|
63
|
+
* ```
|
|
27
64
|
*/
|
|
28
65
|
export declare const flattenTree_unstable: (items: NestedTreeItem[]) => FlatTreeItemProps[];
|
|
29
66
|
|
|
@@ -474,7 +511,7 @@ export declare type TreeState = ComponentState<TreeSlots> & TreeContextValue;
|
|
|
474
511
|
* @param flatTreeItemProps - a list of tree items
|
|
475
512
|
* @param options - in case control over the internal openItems is required
|
|
476
513
|
*/
|
|
477
|
-
export declare function useFlatTree_unstable(flatTreeItemProps: FlatTreeItemProps[], options?: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>): FlatTree;
|
|
514
|
+
export declare function useFlatTree_unstable(flatTreeItemProps: FlatTreeItemProps[], options?: Pick<TreeProps, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>): FlatTree;
|
|
478
515
|
|
|
479
516
|
/**
|
|
480
517
|
* Create the state required to render Tree.
|
package/lib/hooks/useFlatTree.js
CHANGED
|
@@ -21,12 +21,20 @@ export function useFlatTree_unstable(flatTreeItemProps, options = {}) {
|
|
|
21
21
|
const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);
|
|
22
22
|
const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);
|
|
23
23
|
const handleOpenChange = useEventCallback((event, data) => {
|
|
24
|
+
var _options_onOpenChange;
|
|
25
|
+
(_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);
|
|
26
|
+
if (!event.isDefaultPrevented()) {
|
|
27
|
+
updateOpenItems(data);
|
|
28
|
+
}
|
|
24
29
|
event.preventDefault();
|
|
25
|
-
updateOpenItems(data);
|
|
26
30
|
});
|
|
27
31
|
const handleNavigation = useEventCallback((event, data) => {
|
|
32
|
+
var _options_onNavigation_unstable;
|
|
33
|
+
(_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.call(options, event, data);
|
|
34
|
+
if (!event.isDefaultPrevented()) {
|
|
35
|
+
navigate(data);
|
|
36
|
+
}
|
|
28
37
|
event.preventDefault();
|
|
29
|
-
navigate(data);
|
|
30
38
|
});
|
|
31
39
|
const getNextNavigableItem = useEventCallback((visibleItems, data) => {
|
|
32
40
|
const item = flatTreeItems.get(data.target.id);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEventCallback","React","createFlatTreeItems","VisibleFlatTreeItemGenerator","treeDataTypes","useFlatTreeNavigation","useOpenItemsState","useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","flatTreeItems","useMemo","navigate","navigationRef","handleOpenChange","event","data","preventDefault","handleNavigation","getNextNavigableItem","visibleItems","item","get","target","id","type","typeAhead","arrowLeft","parentId","arrowRight","index","end","length","home","arrowDown","arrowUp","getTreeProps","useCallback","ref","
|
|
1
|
+
{"version":3,"names":["useEventCallback","React","createFlatTreeItems","VisibleFlatTreeItemGenerator","treeDataTypes","useFlatTreeNavigation","useOpenItemsState","useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","flatTreeItems","useMemo","navigate","navigationRef","handleOpenChange","event","data","_options_onOpenChange","onOpenChange","call","isDefaultPrevented","preventDefault","handleNavigation","_options_onNavigation_unstable","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","target","id","type","typeAhead","arrowLeft","parentId","arrowRight","index","end","length","home","arrowDown","arrowUp","getTreeProps","useCallback","ref","items"],"sources":["../../src/hooks/useFlatTree.ts"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\nimport type {\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeProps,\n} from '../Tree';\nimport type { TreeItemId, TreeItemProps } from '../TreeItem';\n\nexport type FlatTreeItemProps = TreeItemProps & {\n id: TreeItemId;\n parentId?: string;\n};\n\nexport type FlatTreeItem = Readonly<MutableFlatTreeItem>;\n\n/**\n * @internal\n * Used internally on createFlatTreeItems and VisibleFlatTreeItemGenerator\n * to ensure required properties when building a FlatTreeITem\n */\nexport type MutableFlatTreeItem = {\n parentId?: string;\n childrenSize: number;\n index: number;\n id: string;\n level: number;\n getTreeItemProps(): Required<Pick<TreeItemProps, 'id' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> &\n TreeItemProps;\n};\n\nexport type FlatTreeProps = Required<\n Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & { ref: React.Ref<HTMLDivElement> }\n>;\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type FlatTree = {\n /**\n * returns the properties required for the Tree component to work properly.\n * That includes:\n * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n */\n getTreeProps(): FlatTreeProps;\n /**\n * internal method used to react to an `onNavigation` event.\n * This method ensures proper navigation on keyboard and mouse interaction.\n * In case of virtualization it might be required to cancel default provided `onNavigation`\n * event and then call this method manually.\n *\n * @example\n * ```ts\n * // react-window\n * const handleNavigation = (event, data) => {\n * event.preventDefault();\n * const nextItem = tree.getNextNavigableItem(data);\n * // scroll to item using virtualization scroll mechanism\n * if (nextItem && document.getElementById(nextItem.id)) {\n * listRef.current.scrollToItem(nextItem.index);\n * }\n * // wait for scrolling to happen and then invoke navigate method\n * requestAnimationFrame(() => {\n * tree.navigate(data);\n * });\n * };\n *```\n */\n navigate(data: TreeNavigationData_unstable): void;\n /**\n * returns next item to be focused on a navigation.\n * This method is provided to decouple the element that needs to be focused from\n * the action of focusing it itself.\n *\n * On the case of TypeAhead navigation this method returns the current item.\n */\n getNextNavigableItem(visibleItems: FlatTreeItem[], data: TreeNavigationData_unstable): FlatTreeItem | undefined;\n /**\n * an iterable containing all visually available flat tree items\n */\n items(): IterableIterator<FlatTreeItem>;\n};\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable(\n flatTreeItemProps: FlatTreeItemProps[],\n options: Pick<TreeProps, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'> = {},\n): FlatTree {\n const [openItems, updateOpenItems] = useOpenItemsState(options);\n const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);\n const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n\n const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n options.onOpenChange?.(event, data);\n if (!event.isDefaultPrevented()) {\n updateOpenItems(data);\n }\n event.preventDefault();\n });\n\n const handleNavigation = useEventCallback(\n (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n options.onNavigation_unstable?.(event, data);\n if (!event.isDefaultPrevented()) {\n navigate(data);\n }\n event.preventDefault();\n },\n );\n\n const getNextNavigableItem = useEventCallback((visibleItems: FlatTreeItem[], data: TreeNavigationData_unstable) => {\n const item = flatTreeItems.get(data.target.id);\n if (item) {\n switch (data.type) {\n case treeDataTypes.typeAhead:\n return item;\n case treeDataTypes.arrowLeft:\n return flatTreeItems.get(item.parentId!);\n case treeDataTypes.arrowRight:\n return visibleItems[item.index + 1];\n case treeDataTypes.end:\n return visibleItems[visibleItems.length - 1];\n case treeDataTypes.home:\n return visibleItems[0];\n case treeDataTypes.arrowDown:\n return visibleItems[item.index + 1];\n case treeDataTypes.arrowUp:\n return visibleItems[item.index - 1];\n }\n }\n });\n\n const getTreeProps = React.useCallback(\n () => ({\n ref: navigationRef as React.Ref<HTMLDivElement>,\n openItems,\n onOpenChange: handleOpenChange,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n onNavigation_unstable: handleNavigation,\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [openItems],\n );\n\n const items = React.useCallback(\n () => VisibleFlatTreeItemGenerator(openItems, flatTreeItems),\n [openItems, flatTreeItems],\n );\n\n return React.useMemo(\n () => ({ navigate, getTreeProps, getNextNavigableItem, items }),\n [navigate, getTreeProps, getNextNavigableItem, items],\n );\n}\n"],"mappings":"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"}
|
package/lib/utils/flattenTree.js
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
let count = 1;
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
subtree,
|
|
8
|
-
...item
|
|
9
|
-
} = items[index];
|
|
3
|
+
function flattenTreeRecursive(items, parent, level = 1) {
|
|
4
|
+
return items.reduce((acc, {
|
|
5
|
+
subtree,
|
|
6
|
+
...item
|
|
7
|
+
}, index) => {
|
|
10
8
|
var _item_id;
|
|
11
9
|
const flatTreeItem = {
|
|
12
10
|
'aria-level': level,
|
|
@@ -17,15 +15,77 @@ function flattenTreeRecursive_unstable(items, parent, level = 1) {
|
|
|
17
15
|
leaf: subtree === undefined,
|
|
18
16
|
...item
|
|
19
17
|
};
|
|
20
|
-
|
|
18
|
+
acc.push(flatTreeItem);
|
|
21
19
|
if (subtree !== undefined) {
|
|
22
|
-
|
|
20
|
+
acc.push(...flattenTreeRecursive(subtree, flatTreeItem, level + 1));
|
|
23
21
|
}
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
return acc;
|
|
23
|
+
}, []);
|
|
26
24
|
}
|
|
27
25
|
/**
|
|
28
26
|
* Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`
|
|
27
|
+
* @example
|
|
28
|
+
* ```tsx
|
|
29
|
+
* const defaultItems = flattenTree_unstable([
|
|
30
|
+
* {
|
|
31
|
+
* children: <TreeItemLayout>level 1, item 1</TreeItemLayout>,
|
|
32
|
+
* subtree: [
|
|
33
|
+
* {
|
|
34
|
+
* children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,
|
|
35
|
+
* },
|
|
36
|
+
* {
|
|
37
|
+
* children: <TreeItemLayout>level 2, item 2</TreeItemLayout>,
|
|
38
|
+
* },
|
|
39
|
+
* {
|
|
40
|
+
* children: <TreeItemLayout>level 2, item 3</TreeItemLayout>,
|
|
41
|
+
* },
|
|
42
|
+
* ],
|
|
43
|
+
* },
|
|
44
|
+
* {
|
|
45
|
+
* children: <TreeItemLayout>level 1, item 2</TreeItemLayout>,
|
|
46
|
+
* subtree: [
|
|
47
|
+
* {
|
|
48
|
+
* children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,
|
|
49
|
+
* subtree: [
|
|
50
|
+
* {
|
|
51
|
+
* children: <TreeItemLayout>level 3, item 1</TreeItemLayout>,
|
|
52
|
+
* subtree: [
|
|
53
|
+
* {
|
|
54
|
+
* children: <TreeItemLayout>level 4, item 1</TreeItemLayout>,
|
|
55
|
+
* },
|
|
56
|
+
* ],
|
|
57
|
+
* },
|
|
58
|
+
* ],
|
|
59
|
+
* },
|
|
60
|
+
* ],
|
|
61
|
+
* },
|
|
62
|
+
* ]);
|
|
63
|
+
* ```
|
|
29
64
|
*/ // eslint-disable-next-line @typescript-eslint/naming-convention
|
|
30
|
-
export const flattenTree_unstable =
|
|
65
|
+
export const flattenTree_unstable = items => flattenTreeRecursive(items);
|
|
66
|
+
/**
|
|
67
|
+
* @internal
|
|
68
|
+
*/
|
|
69
|
+
export const flattenTreeFromElement = (root, parent, level = 1) => {
|
|
70
|
+
const children = React.Children.toArray(root.props.children);
|
|
71
|
+
return children.reduce((acc, curr, index) => {
|
|
72
|
+
const [content, subtree] = React.Children.toArray(curr.props.children);
|
|
73
|
+
var _curr_props_id;
|
|
74
|
+
const flatTreeItem = {
|
|
75
|
+
'aria-level': level,
|
|
76
|
+
'aria-posinset': index + 1,
|
|
77
|
+
'aria-setsize': children.length,
|
|
78
|
+
parentId: parent === null || parent === void 0 ? void 0 : parent.id,
|
|
79
|
+
id: (_curr_props_id = curr.props.id) !== null && _curr_props_id !== void 0 ? _curr_props_id : `fui-FlatTreeItem-${count++}`,
|
|
80
|
+
leaf: subtree === undefined,
|
|
81
|
+
...curr.props,
|
|
82
|
+
children: content
|
|
83
|
+
};
|
|
84
|
+
acc.push(flatTreeItem);
|
|
85
|
+
if (subtree !== undefined) {
|
|
86
|
+
acc.push(...flattenTreeFromElement(subtree, flatTreeItem, level + 1));
|
|
87
|
+
}
|
|
88
|
+
return acc;
|
|
89
|
+
}, []);
|
|
90
|
+
};
|
|
31
91
|
//# sourceMappingURL=flattenTree.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["count","
|
|
1
|
+
{"version":3,"names":["React","count","flattenTreeRecursive","items","parent","level","reduce","acc","subtree","item","index","_item_id","flatTreeItem","length","parentId","id","leaf","undefined","push","flattenTree_unstable","flattenTreeFromElement","root","children","Children","toArray","props","curr","content","_curr_props_id"],"sources":["../../src/utils/flattenTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { FlatTreeItemProps } from '../hooks/useFlatTree';\nimport { TreeItemProps } from '../TreeItem';\n\nexport type NestedTreeItem = Omit<TreeItemProps, 'subtree'> & {\n subtree?: NestedTreeItem[];\n};\n\nlet count = 1;\nfunction flattenTreeRecursive(items: NestedTreeItem[], parent?: FlatTreeItemProps, level = 1): FlatTreeItemProps[] {\n return items.reduce<FlatTreeItemProps[]>((acc, { subtree, ...item }, index) => {\n const flatTreeItem: FlatTreeItemProps = {\n 'aria-level': level,\n 'aria-posinset': index + 1,\n 'aria-setsize': items.length,\n parentId: parent?.id,\n id: item.id ?? `fui-FlatTreeItem-${count++}`,\n leaf: subtree === undefined,\n ...item,\n };\n acc.push(flatTreeItem);\n if (subtree !== undefined) {\n acc.push(...flattenTreeRecursive(subtree, flatTreeItem, level + 1));\n }\n return acc;\n }, []);\n}\n\n/**\n * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`\n * @example\n * ```tsx\n * const defaultItems = flattenTree_unstable([\n * {\n * children: <TreeItemLayout>level 1, item 1</TreeItemLayout>,\n * subtree: [\n * {\n * children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,\n * },\n * {\n * children: <TreeItemLayout>level 2, item 2</TreeItemLayout>,\n * },\n * {\n * children: <TreeItemLayout>level 2, item 3</TreeItemLayout>,\n * },\n * ],\n * },\n * {\n * children: <TreeItemLayout>level 1, item 2</TreeItemLayout>,\n * subtree: [\n * {\n * children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,\n * subtree: [\n * {\n * children: <TreeItemLayout>level 3, item 1</TreeItemLayout>,\n * subtree: [\n * {\n * children: <TreeItemLayout>level 4, item 1</TreeItemLayout>,\n * },\n * ],\n * },\n * ],\n * },\n * ],\n * },\n * ]);\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const flattenTree_unstable = (items: NestedTreeItem[]): FlatTreeItemProps[] => flattenTreeRecursive(items);\n\n/**\n * @internal\n */\nexport const flattenTreeFromElement = (\n root: React.ReactElement<{\n children?: React.ReactElement<TreeItemProps> | React.ReactElement<TreeItemProps>[];\n }>,\n parent?: FlatTreeItemProps,\n level = 1,\n): FlatTreeItemProps[] => {\n const children = React.Children.toArray(root.props.children) as React.ReactElement<TreeItemProps>[];\n return children.reduce<FlatTreeItemProps[]>((acc, curr, index) => {\n const [content, subtree] = React.Children.toArray(curr.props.children) as [\n React.ReactNode,\n typeof root | undefined,\n ];\n const flatTreeItem: FlatTreeItemProps = {\n 'aria-level': level,\n 'aria-posinset': index + 1,\n 'aria-setsize': children.length,\n parentId: parent?.id,\n id: curr.props.id ?? `fui-FlatTreeItem-${count++}`,\n leaf: subtree === undefined,\n ...curr.props,\n children: content,\n };\n acc.push(flatTreeItem);\n if (subtree !== undefined) {\n acc.push(...flattenTreeFromElement(subtree, flatTreeItem, level + 1));\n }\n return acc;\n }, []);\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAQvB,IAAIC,KAAA,GAAQ;AACZ,SAASC,qBAAqBC,KAAuB,EAAEC,MAA0B,EAAEC,KAAA,GAAQ,CAAC,EAAuB;EACjH,OAAOF,KAAA,CAAMG,MAAM,CAAsB,CAACC,GAAA,EAAK;IAAEC,OAAA;IAAS,GAAGC;EAAA,CAAM,EAAEC,KAAA,KAAU;QAMvEC,QAAA;IALN,MAAMC,YAAA,GAAkC;MACtC,cAAcP,KAAA;MACd,iBAAiBK,KAAA,GAAQ;MACzB,gBAAgBP,KAAA,CAAMU,MAAM;MAC5BC,QAAA,EAAUV,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAQW,EAAE;MACpBA,EAAA,EAAI,CAAAJ,QAAA,GAAAF,IAAA,CAAKM,EAAE,cAAPJ,QAAA,cAAAA,QAAA,GAAY,oBAAmBV,KAAA,EAAQ,EAAC;MAC5Ce,IAAA,EAAMR,OAAA,KAAYS,SAAA;MAClB,GAAGR;IACL;IACAF,GAAA,CAAIW,IAAI,CAACN,YAAA;IACT,IAAIJ,OAAA,KAAYS,SAAA,EAAW;MACzBV,GAAA,CAAIW,IAAI,IAAIhB,oBAAA,CAAqBM,OAAA,EAASI,YAAA,EAAcP,KAAA,GAAQ;IAClE;IACA,OAAOE,GAAA;EACT,GAAG,EAAE;AACP;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAA,CAwCA;AACA,OAAO,MAAMY,oBAAA,GAAwBhB,KAAA,IAAiDD,oBAAA,CAAqBC,KAAA;AAE3G;;;AAGA,OAAO,MAAMiB,sBAAA,GAAyBA,CACpCC,IAAA,EAGAjB,MAAA,EACAC,KAAA,GAAQ,CAAC,KACe;EACxB,MAAMiB,QAAA,GAAWtB,KAAA,CAAMuB,QAAQ,CAACC,OAAO,CAACH,IAAA,CAAKI,KAAK,CAACH,QAAQ;EAC3D,OAAOA,QAAA,CAAShB,MAAM,CAAsB,CAACC,GAAA,EAAKmB,IAAA,EAAMhB,KAAA,KAAU;IAChE,MAAM,CAACiB,OAAA,EAASnB,OAAA,CAAQ,GAAGR,KAAA,CAAMuB,QAAQ,CAACC,OAAO,CAACE,IAAA,CAAKD,KAAK,CAACH,QAAQ;QAS/DM,cAAA;IALN,MAAMhB,YAAA,GAAkC;MACtC,cAAcP,KAAA;MACd,iBAAiBK,KAAA,GAAQ;MACzB,gBAAgBY,QAAA,CAAST,MAAM;MAC/BC,QAAA,EAAUV,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAQW,EAAE;MACpBA,EAAA,EAAI,CAAAa,cAAA,GAAAF,IAAA,CAAKD,KAAK,CAACV,EAAE,cAAba,cAAA,cAAAA,cAAA,GAAkB,oBAAmB3B,KAAA,EAAQ,EAAC;MAClDe,IAAA,EAAMR,OAAA,KAAYS,SAAA;MAClB,GAAGS,IAAA,CAAKD,KAAK;MACbH,QAAA,EAAUK;IACZ;IACApB,GAAA,CAAIW,IAAI,CAACN,YAAA;IACT,IAAIJ,OAAA,KAAYS,SAAA,EAAW;MACzBV,GAAA,CAAIW,IAAI,IAAIE,sBAAA,CAAuBZ,OAAA,EAASI,YAAA,EAAcP,KAAA,GAAQ;IACpE;IACA,OAAOE,GAAA;EACT,GAAG,EAAE;AACP"}
|
|
@@ -20,12 +20,20 @@ function useFlatTree_unstable(flatTreeItemProps, options = {}) {
|
|
|
20
20
|
]);
|
|
21
21
|
const [navigate, navigationRef] = (0, _useFlatTreeNavigation.useFlatTreeNavigation)(flatTreeItems);
|
|
22
22
|
const handleOpenChange = (0, _reactUtilities.useEventCallback)((event, data)=>{
|
|
23
|
+
var _options_onOpenChange;
|
|
24
|
+
(_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);
|
|
25
|
+
if (!event.isDefaultPrevented()) {
|
|
26
|
+
updateOpenItems(data);
|
|
27
|
+
}
|
|
23
28
|
event.preventDefault();
|
|
24
|
-
updateOpenItems(data);
|
|
25
29
|
});
|
|
26
30
|
const handleNavigation = (0, _reactUtilities.useEventCallback)((event, data)=>{
|
|
31
|
+
var _options_onNavigation_unstable;
|
|
32
|
+
(_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.call(options, event, data);
|
|
33
|
+
if (!event.isDefaultPrevented()) {
|
|
34
|
+
navigate(data);
|
|
35
|
+
}
|
|
27
36
|
event.preventDefault();
|
|
28
|
-
navigate(data);
|
|
29
37
|
});
|
|
30
38
|
const getNextNavigableItem = (0, _reactUtilities.useEventCallback)((visibleItems, data)=>{
|
|
31
39
|
const item = flatTreeItems.get(data.target.id);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../lib/hooks/useFlatTree.js"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable(flatTreeItemProps, options = {}) {\n const [openItems, updateOpenItems] = useOpenItemsState(options);\n const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);\n const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n const handleOpenChange = useEventCallback((event, data) => {\n
|
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useFlatTree.js"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable(flatTreeItemProps, options = {}) {\n const [openItems, updateOpenItems] = useOpenItemsState(options);\n const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);\n const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n const handleOpenChange = useEventCallback((event, data) => {\n var _options_onOpenChange;\n (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);\n if (!event.isDefaultPrevented()) {\n updateOpenItems(data);\n }\n event.preventDefault();\n });\n const handleNavigation = useEventCallback((event, data) => {\n var _options_onNavigation_unstable;\n (_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.call(options, event, data);\n if (!event.isDefaultPrevented()) {\n navigate(data);\n }\n event.preventDefault();\n });\n const getNextNavigableItem = useEventCallback((visibleItems, data) => {\n const item = flatTreeItems.get(data.target.id);\n if (item) {\n switch (data.type) {\n case treeDataTypes.typeAhead:\n return item;\n case treeDataTypes.arrowLeft:\n return flatTreeItems.get(item.parentId);\n case treeDataTypes.arrowRight:\n return visibleItems[item.index + 1];\n case treeDataTypes.end:\n return visibleItems[visibleItems.length - 1];\n case treeDataTypes.home:\n return visibleItems[0];\n case treeDataTypes.arrowDown:\n return visibleItems[item.index + 1];\n case treeDataTypes.arrowUp:\n return visibleItems[item.index - 1];\n }\n }\n });\n const getTreeProps = React.useCallback(() => ({\n ref: navigationRef,\n openItems,\n onOpenChange: handleOpenChange,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n onNavigation_unstable: handleNavigation\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [openItems]);\n const items = React.useCallback(() => VisibleFlatTreeItemGenerator(openItems, flatTreeItems), [openItems, flatTreeItems]);\n return React.useMemo(() => ({\n navigate,\n getTreeProps,\n getNextNavigableItem,\n items\n }), [navigate, getTreeProps, getNextNavigableItem, items]);\n}\n//# sourceMappingURL=useFlatTree.js.map"],"names":["useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","useOpenItemsState","flatTreeItems","React","useMemo","createFlatTreeItems","navigate","navigationRef","useFlatTreeNavigation","handleOpenChange","useEventCallback","event","data","_options_onOpenChange","onOpenChange","call","isDefaultPrevented","preventDefault","handleNavigation","_options_onNavigation_unstable","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","target","id","type","treeDataTypes","typeAhead","arrowLeft","parentId","arrowRight","index","end","length","home","arrowDown","arrowUp","getTreeProps","useCallback","ref","items","VisibleFlatTreeItemGenerator"],"mappings":";;;;+BAkBgBA;;aAAAA;;;gCAlBiB;6DACV;qCAC2C;wBACpC;uCACQ;mCACJ;AAa3B,SAASA,qBAAqBC,iBAAiB,EAAEC,UAAU,CAAC,CAAC,EAAE;IACpE,MAAM,CAACC,WAAWC,gBAAgB,GAAGC,IAAAA,oCAAiB,EAACH;IACvD,MAAMI,gBAAgBC,OAAMC,OAAO,CAAC,IAAMC,IAAAA,wCAAmB,EAACR,oBAAoB;QAACA;KAAkB;IACrG,MAAM,CAACS,UAAUC,cAAc,GAAGC,IAAAA,4CAAqB,EAACN;IACxD,MAAMO,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACzD,IAAIC;QACHA,CAAAA,wBAAwBf,QAAQgB,YAAY,AAAD,MAAO,IAAI,IAAID,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBE,IAAI,CAACjB,SAASa,OAAOC,KAAK;QACvJ,IAAI,CAACD,MAAMK,kBAAkB,IAAI;YAC/BhB,gBAAgBY;QAClB,CAAC;QACDD,MAAMM,cAAc;IACtB;IACA,MAAMC,mBAAmBR,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACzD,IAAIO;QACHA,CAAAA,iCAAiCrB,QAAQsB,qBAAqB,AAAD,MAAO,IAAI,IAAID,mCAAmC,KAAK,IAAI,KAAK,IAAIA,+BAA+BJ,IAAI,CAACjB,SAASa,OAAOC,KAAK;QAC3L,IAAI,CAACD,MAAMK,kBAAkB,IAAI;YAC/BV,SAASM;QACX,CAAC;QACDD,MAAMM,cAAc;IACtB;IACA,MAAMI,uBAAuBX,IAAAA,gCAAgB,EAAC,CAACY,cAAcV,OAAS;QACpE,MAAMW,OAAOrB,cAAcsB,GAAG,CAACZ,KAAKa,MAAM,CAACC,EAAE;QAC7C,IAAIH,MAAM;YACR,OAAQX,KAAKe,IAAI;gBACf,KAAKC,qBAAa,CAACC,SAAS;oBAC1B,OAAON;gBACT,KAAKK,qBAAa,CAACE,SAAS;oBAC1B,OAAO5B,cAAcsB,GAAG,CAACD,KAAKQ,QAAQ;gBACxC,KAAKH,qBAAa,CAACI,UAAU;oBAC3B,OAAOV,YAAY,CAACC,KAAKU,KAAK,GAAG,EAAE;gBACrC,KAAKL,qBAAa,CAACM,GAAG;oBACpB,OAAOZ,YAAY,CAACA,aAAaa,MAAM,GAAG,EAAE;gBAC9C,KAAKP,qBAAa,CAACQ,IAAI;oBACrB,OAAOd,YAAY,CAAC,EAAE;gBACxB,KAAKM,qBAAa,CAACS,SAAS;oBAC1B,OAAOf,YAAY,CAACC,KAAKU,KAAK,GAAG,EAAE;gBACrC,KAAKL,qBAAa,CAACU,OAAO;oBACxB,OAAOhB,YAAY,CAACC,KAAKU,KAAK,GAAG,EAAE;YACvC;QACF,CAAC;IACH;IACA,MAAMM,eAAepC,OAAMqC,WAAW,CAAC,IAAO,CAAA;YAC5CC,KAAKlC;YACLR;YACAe,cAAcL;YACd,gEAAgE;YAChEW,uBAAuBF;QACzB,CAAA,GACA,uDAAuD;IACvD;QAACnB;KAAU;IACX,MAAM2C,QAAQvC,OAAMqC,WAAW,CAAC,IAAMG,IAAAA,iDAA4B,EAAC5C,WAAWG,gBAAgB;QAACH;QAAWG;KAAc;IACxH,OAAOC,OAAMC,OAAO,CAAC,IAAO,CAAA;YAC1BE;YACAiC;YACAlB;YACAqB;QACF,CAAA,GAAI;QAACpC;QAAUiC;QAAclB;QAAsBqB;KAAM;AAC3D,EACA,uCAAuC"}
|
|
@@ -2,16 +2,21 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
flattenTree_unstable: ()=>flattenTree_unstable,
|
|
13
|
+
flattenTreeFromElement: ()=>flattenTreeFromElement
|
|
8
14
|
});
|
|
15
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
16
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
9
17
|
let count = 1;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
const flatTreeItems = [];
|
|
13
|
-
for(let index = 0; index < items.length; index++){
|
|
14
|
-
const { subtree , ...item } = items[index];
|
|
18
|
+
function flattenTreeRecursive(items, parent, level = 1) {
|
|
19
|
+
return items.reduce((acc, { subtree , ...item }, index)=>{
|
|
15
20
|
var _item_id;
|
|
16
21
|
const flatTreeItem = {
|
|
17
22
|
'aria-level': level,
|
|
@@ -22,13 +27,35 @@ function flattenTreeRecursive_unstable(items, parent, level = 1) {
|
|
|
22
27
|
leaf: subtree === undefined,
|
|
23
28
|
...item
|
|
24
29
|
};
|
|
25
|
-
|
|
30
|
+
acc.push(flatTreeItem);
|
|
26
31
|
if (subtree !== undefined) {
|
|
27
|
-
|
|
32
|
+
acc.push(...flattenTreeRecursive(subtree, flatTreeItem, level + 1));
|
|
28
33
|
}
|
|
29
|
-
|
|
30
|
-
|
|
34
|
+
return acc;
|
|
35
|
+
}, []);
|
|
31
36
|
}
|
|
32
|
-
const flattenTree_unstable =
|
|
37
|
+
const flattenTree_unstable = (items)=>flattenTreeRecursive(items);
|
|
38
|
+
const flattenTreeFromElement = (root, parent, level = 1)=>{
|
|
39
|
+
const children = _react.Children.toArray(root.props.children);
|
|
40
|
+
return children.reduce((acc, curr, index)=>{
|
|
41
|
+
const [content, subtree] = _react.Children.toArray(curr.props.children);
|
|
42
|
+
var _curr_props_id;
|
|
43
|
+
const flatTreeItem = {
|
|
44
|
+
'aria-level': level,
|
|
45
|
+
'aria-posinset': index + 1,
|
|
46
|
+
'aria-setsize': children.length,
|
|
47
|
+
parentId: parent === null || parent === void 0 ? void 0 : parent.id,
|
|
48
|
+
id: (_curr_props_id = curr.props.id) !== null && _curr_props_id !== void 0 ? _curr_props_id : `fui-FlatTreeItem-${count++}`,
|
|
49
|
+
leaf: subtree === undefined,
|
|
50
|
+
...curr.props,
|
|
51
|
+
children: content
|
|
52
|
+
};
|
|
53
|
+
acc.push(flatTreeItem);
|
|
54
|
+
if (subtree !== undefined) {
|
|
55
|
+
acc.push(...flattenTreeFromElement(subtree, flatTreeItem, level + 1));
|
|
56
|
+
}
|
|
57
|
+
return acc;
|
|
58
|
+
}, []);
|
|
59
|
+
}; //# sourceMappingURL=flattenTree.js.map
|
|
33
60
|
|
|
34
61
|
//# sourceMappingURL=flattenTree.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../lib/utils/flattenTree.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../../lib/utils/flattenTree.js"],"sourcesContent":["import * as React from 'react';\nlet count = 1;\nfunction flattenTreeRecursive(items, parent, level = 1) {\n return items.reduce((acc, {\n subtree,\n ...item\n }, index) => {\n var _item_id;\n const flatTreeItem = {\n 'aria-level': level,\n 'aria-posinset': index + 1,\n 'aria-setsize': items.length,\n parentId: parent === null || parent === void 0 ? void 0 : parent.id,\n id: (_item_id = item.id) !== null && _item_id !== void 0 ? _item_id : `fui-FlatTreeItem-${count++}`,\n leaf: subtree === undefined,\n ...item\n };\n acc.push(flatTreeItem);\n if (subtree !== undefined) {\n acc.push(...flattenTreeRecursive(subtree, flatTreeItem, level + 1));\n }\n return acc;\n }, []);\n}\n/**\n * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`\n * @example\n * ```tsx\n * const defaultItems = flattenTree_unstable([\n * {\n * children: <TreeItemLayout>level 1, item 1</TreeItemLayout>,\n * subtree: [\n * {\n * children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,\n * },\n * {\n * children: <TreeItemLayout>level 2, item 2</TreeItemLayout>,\n * },\n * {\n * children: <TreeItemLayout>level 2, item 3</TreeItemLayout>,\n * },\n * ],\n * },\n * {\n * children: <TreeItemLayout>level 1, item 2</TreeItemLayout>,\n * subtree: [\n * {\n * children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,\n * subtree: [\n * {\n * children: <TreeItemLayout>level 3, item 1</TreeItemLayout>,\n * subtree: [\n * {\n * children: <TreeItemLayout>level 4, item 1</TreeItemLayout>,\n * },\n * ],\n * },\n * ],\n * },\n * ],\n * },\n * ]);\n * ```\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\nexport const flattenTree_unstable = items => flattenTreeRecursive(items);\n/**\n * @internal\n */\nexport const flattenTreeFromElement = (root, parent, level = 1) => {\n const children = React.Children.toArray(root.props.children);\n return children.reduce((acc, curr, index) => {\n const [content, subtree] = React.Children.toArray(curr.props.children);\n var _curr_props_id;\n const flatTreeItem = {\n 'aria-level': level,\n 'aria-posinset': index + 1,\n 'aria-setsize': children.length,\n parentId: parent === null || parent === void 0 ? void 0 : parent.id,\n id: (_curr_props_id = curr.props.id) !== null && _curr_props_id !== void 0 ? _curr_props_id : `fui-FlatTreeItem-${count++}`,\n leaf: subtree === undefined,\n ...curr.props,\n children: content\n };\n acc.push(flatTreeItem);\n if (subtree !== undefined) {\n acc.push(...flattenTreeFromElement(subtree, flatTreeItem, level + 1));\n }\n return acc;\n }, []);\n};\n//# sourceMappingURL=flattenTree.js.map"],"names":["flattenTree_unstable","flattenTreeFromElement","count","flattenTreeRecursive","items","parent","level","reduce","acc","subtree","item","index","_item_id","flatTreeItem","length","parentId","id","leaf","undefined","push","root","children","React","Children","toArray","props","curr","content","_curr_props_id"],"mappings":";;;;;;;;;;;IAgEaA,oBAAoB,MAApBA;IAIAC,sBAAsB,MAAtBA;;;6DApEU;AACvB,IAAIC,QAAQ;AACZ,SAASC,qBAAqBC,KAAK,EAAEC,MAAM,EAAEC,QAAQ,CAAC,EAAE;IACtD,OAAOF,MAAMG,MAAM,CAAC,CAACC,KAAK,EACxBC,QAAO,EACP,GAAGC,MACJ,EAAEC,QAAU;QACX,IAAIC;QACJ,MAAMC,eAAe;YACnB,cAAcP;YACd,iBAAiBK,QAAQ;YACzB,gBAAgBP,MAAMU,MAAM;YAC5BC,UAAUV,WAAW,IAAI,IAAIA,WAAW,KAAK,IAAI,KAAK,IAAIA,OAAOW,EAAE;YACnEA,IAAI,AAACJ,CAAAA,WAAWF,KAAKM,EAAE,AAAD,MAAO,IAAI,IAAIJ,aAAa,KAAK,IAAIA,WAAW,CAAC,iBAAiB,EAAEV,QAAQ,CAAC;YACnGe,MAAMR,YAAYS;YAClB,GAAGR,IAAI;QACT;QACAF,IAAIW,IAAI,CAACN;QACT,IAAIJ,YAAYS,WAAW;YACzBV,IAAIW,IAAI,IAAIhB,qBAAqBM,SAASI,cAAcP,QAAQ;QAClE,CAAC;QACD,OAAOE;IACT,GAAG,EAAE;AACP;AAyCO,MAAMR,uBAAuBI,CAAAA,QAASD,qBAAqBC;AAI3D,MAAMH,yBAAyB,CAACmB,MAAMf,QAAQC,QAAQ,CAAC,GAAK;IACjE,MAAMe,WAAWC,OAAMC,QAAQ,CAACC,OAAO,CAACJ,KAAKK,KAAK,CAACJ,QAAQ;IAC3D,OAAOA,SAASd,MAAM,CAAC,CAACC,KAAKkB,MAAMf,QAAU;QAC3C,MAAM,CAACgB,SAASlB,QAAQ,GAAGa,OAAMC,QAAQ,CAACC,OAAO,CAACE,KAAKD,KAAK,CAACJ,QAAQ;QACrE,IAAIO;QACJ,MAAMf,eAAe;YACnB,cAAcP;YACd,iBAAiBK,QAAQ;YACzB,gBAAgBU,SAASP,MAAM;YAC/BC,UAAUV,WAAW,IAAI,IAAIA,WAAW,KAAK,IAAI,KAAK,IAAIA,OAAOW,EAAE;YACnEA,IAAI,AAACY,CAAAA,iBAAiBF,KAAKD,KAAK,CAACT,EAAE,AAAD,MAAO,IAAI,IAAIY,mBAAmB,KAAK,IAAIA,iBAAiB,CAAC,iBAAiB,EAAE1B,QAAQ,CAAC;YAC3He,MAAMR,YAAYS;YAClB,GAAGQ,KAAKD,KAAK;YACbJ,UAAUM;QACZ;QACAnB,IAAIW,IAAI,CAACN;QACT,IAAIJ,YAAYS,WAAW;YACzBV,IAAIW,IAAI,IAAIlB,uBAAuBQ,SAASI,cAAcP,QAAQ;QACpE,CAAC;QACD,OAAOE;IACT,GAAG,EAAE;AACP,GACA,uCAAuC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tree",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.9",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -36,16 +36,16 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@fluentui/keyboard-keys": "^9.0.2",
|
|
39
|
-
"@fluentui/react-aria": "^9.3.
|
|
40
|
-
"@fluentui/react-avatar": "^9.4.
|
|
41
|
-
"@fluentui/react-button": "^9.3.
|
|
42
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
39
|
+
"@fluentui/react-aria": "^9.3.16",
|
|
40
|
+
"@fluentui/react-avatar": "^9.4.7",
|
|
41
|
+
"@fluentui/react-button": "^9.3.7",
|
|
42
|
+
"@fluentui/react-context-selector": "^9.1.16",
|
|
43
43
|
"@fluentui/react-icons": "^2.0.196",
|
|
44
|
-
"@fluentui/react-portal": "^9.2.
|
|
44
|
+
"@fluentui/react-portal": "^9.2.4",
|
|
45
45
|
"@fluentui/react-shared-contexts": "^9.3.3",
|
|
46
|
-
"@fluentui/react-tabster": "^9.6.
|
|
46
|
+
"@fluentui/react-tabster": "^9.6.3",
|
|
47
47
|
"@fluentui/react-theme": "^9.1.7",
|
|
48
|
-
"@fluentui/react-utilities": "^9.7.
|
|
48
|
+
"@fluentui/react-utilities": "^9.7.3",
|
|
49
49
|
"@griffel/react": "^1.5.2",
|
|
50
50
|
"@swc/helpers": "^0.4.14"
|
|
51
51
|
},
|