@fluentui/react-tree 9.0.0-beta.7 → 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 +42 -15
- package/CHANGELOG.md +21 -10
- package/dist/index.d.ts +54 -4
- package/lib/components/TreeItem/TreeItem.js +10 -1
- package/lib/components/TreeItem/TreeItem.js.map +1 -1
- package/lib/components/TreeItemLayout/TreeItemLayout.js +3 -1
- package/lib/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js +3 -1
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -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/components/TreeItem/TreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.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,46 +2,73 @@
|
|
|
2
2
|
"name": "@fluentui/react-tree",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-tree_v9.0.0-beta.
|
|
7
|
-
"version": "9.0.0-beta.
|
|
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
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
11
11
|
"author": "bernardo.sunderhus@gmail.com",
|
|
12
12
|
"package": "@fluentui/react-tree",
|
|
13
|
-
"commit": "
|
|
14
|
-
"comment": "chore:
|
|
13
|
+
"commit": "7dc03924c99ea14c4df43e56454fc7781e1fdb89",
|
|
14
|
+
"comment": "chore: adds e2e flat tree tests"
|
|
15
15
|
},
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-tree",
|
|
19
|
-
"comment": "Bump @fluentui/react-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-aria to v9.3.16",
|
|
20
|
+
"commit": "37a3a6eda1fd41086edd99a0b1560a8740f8c6c5"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-tree",
|
|
25
|
-
"comment": "Bump @fluentui/react-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-avatar to v9.4.7",
|
|
26
|
+
"commit": "37a3a6eda1fd41086edd99a0b1560a8740f8c6c5"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-tree",
|
|
31
|
-
"comment": "Bump @fluentui/react-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-button to v9.3.7",
|
|
32
|
+
"commit": "37a3a6eda1fd41086edd99a0b1560a8740f8c6c5"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-tree",
|
|
37
|
-
"comment": "Bump @fluentui/react-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.16",
|
|
38
|
+
"commit": "37a3a6eda1fd41086edd99a0b1560a8740f8c6c5"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-tree",
|
|
43
|
-
"comment": "Bump @fluentui/react-
|
|
44
|
-
"commit": "
|
|
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",
|
|
63
|
+
"tag": "@fluentui/react-tree_v9.0.0-beta.8",
|
|
64
|
+
"version": "9.0.0-beta.8",
|
|
65
|
+
"comments": {
|
|
66
|
+
"prerelease": [
|
|
67
|
+
{
|
|
68
|
+
"author": "petrduda@microsoft.com",
|
|
69
|
+
"package": "@fluentui/react-tree",
|
|
70
|
+
"commit": "b19ad44388b93ade650d5c46802b82fa7419e6b4",
|
|
71
|
+
"comment": "tree stories and doc update"
|
|
45
72
|
}
|
|
46
73
|
]
|
|
47
74
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,33 @@
|
|
|
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.
|
|
7
|
+
## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.9)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.
|
|
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
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
|
-
- chore:
|
|
15
|
-
- Bump @fluentui/react-
|
|
16
|
-
- Bump @fluentui/react-
|
|
17
|
-
- Bump @fluentui/react-
|
|
18
|
-
- Bump @fluentui/react-
|
|
19
|
-
- Bump @fluentui/react-
|
|
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
|
+
|
|
23
|
+
## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.8)
|
|
24
|
+
|
|
25
|
+
Fri, 24 Mar 2023 10:15:27 GMT
|
|
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)
|
|
27
|
+
|
|
28
|
+
### Changes
|
|
29
|
+
|
|
30
|
+
- tree stories and doc update ([PR #27270](https://github.com/microsoft/fluentui/pull/27270) by petrduda@microsoft.com)
|
|
20
31
|
|
|
21
32
|
## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.6)
|
|
22
33
|
|
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
|
|
|
@@ -183,7 +220,16 @@ declare type TreeContextValues = {
|
|
|
183
220
|
};
|
|
184
221
|
|
|
185
222
|
/**
|
|
186
|
-
* TreeItem component
|
|
223
|
+
* The `TreeItem` component represents a single item in a tree.
|
|
224
|
+
* It expects a certain order of children to work properly: the first child should be the node itself,
|
|
225
|
+
* and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.
|
|
226
|
+
* This order follows the same order as document traversal for the TreeWalker API in JavaScript:
|
|
227
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.
|
|
228
|
+
* The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,
|
|
229
|
+
* which should be used as a direct child of TreeItem.
|
|
230
|
+
*
|
|
231
|
+
* When a TreeItem has nsted child subtree, an expand/collapse control is displayed,
|
|
232
|
+
* allowing the user to show or hide the children.
|
|
187
233
|
*/
|
|
188
234
|
export declare const TreeItem: ForwardRefComponent<TreeItemProps>;
|
|
189
235
|
|
|
@@ -205,7 +251,9 @@ declare type TreeItemCSSProperties = React_2.CSSProperties & {
|
|
|
205
251
|
export declare type TreeItemId = string;
|
|
206
252
|
|
|
207
253
|
/**
|
|
208
|
-
* TreeItemLayout component
|
|
254
|
+
* The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.
|
|
255
|
+
* It provides a consistent visual structure for tree items in a `Tree` component.
|
|
256
|
+
* This component should only be used as a direct child of `TreeItem`.
|
|
209
257
|
*/
|
|
210
258
|
export declare const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;
|
|
211
259
|
|
|
@@ -237,7 +285,9 @@ export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> &
|
|
|
237
285
|
export declare const treeItemLevelToken: "--fluent-TreeItem--level";
|
|
238
286
|
|
|
239
287
|
/**
|
|
240
|
-
* TreeItemPersonaLayout component
|
|
288
|
+
* The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.
|
|
289
|
+
* It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.
|
|
290
|
+
* This component should only be used as a direct child of `TreeItem`.
|
|
241
291
|
*/
|
|
242
292
|
export declare const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps>;
|
|
243
293
|
|
|
@@ -461,7 +511,7 @@ export declare type TreeState = ComponentState<TreeSlots> & TreeContextValue;
|
|
|
461
511
|
* @param flatTreeItemProps - a list of tree items
|
|
462
512
|
* @param options - in case control over the internal openItems is required
|
|
463
513
|
*/
|
|
464
|
-
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;
|
|
465
515
|
|
|
466
516
|
/**
|
|
467
517
|
* Create the state required to render Tree.
|
|
@@ -4,7 +4,16 @@ import { renderTreeItem_unstable } from './renderTreeItem';
|
|
|
4
4
|
import { useTreeItemStyles_unstable } from './useTreeItemStyles';
|
|
5
5
|
import { useTreeItemContextValues_unstable } from './useTreeItemContextValues';
|
|
6
6
|
/**
|
|
7
|
-
* TreeItem component
|
|
7
|
+
* The `TreeItem` component represents a single item in a tree.
|
|
8
|
+
* It expects a certain order of children to work properly: the first child should be the node itself,
|
|
9
|
+
* and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.
|
|
10
|
+
* This order follows the same order as document traversal for the TreeWalker API in JavaScript:
|
|
11
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.
|
|
12
|
+
* The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,
|
|
13
|
+
* which should be used as a direct child of TreeItem.
|
|
14
|
+
*
|
|
15
|
+
* When a TreeItem has nsted child subtree, an expand/collapse control is displayed,
|
|
16
|
+
* allowing the user to show or hide the children.
|
|
8
17
|
*/
|
|
9
18
|
export const TreeItem = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
10
19
|
const state = useTreeItem_unstable(props, ref);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/TreeItem/TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n\n/**\n * TreeItem component
|
|
1
|
+
{"version":3,"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/TreeItem/TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nsted child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem: ForwardRefComponent<TreeItemProps> = React.forwardRef((props, ref) => {\n const state = useTreeItem_unstable(props, ref);\n\n useTreeItemStyles_unstable(state);\n const contextValues = useTreeItemContextValues_unstable(state);\n return renderTreeItem_unstable(state, contextValues);\n});\n\nTreeItem.displayName = 'TreeItem';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAG3C,SAASC,iCAAiC,QAAQ;AAElD;;;;;;;;;;;;AAYA,OAAO,MAAMC,QAAA,gBAA+CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC3F,MAAMC,KAAA,GAAQR,oBAAA,CAAqBM,KAAA,EAAOC,GAAA;EAE1CL,0BAAA,CAA2BM,KAAA;EAC3B,MAAMC,aAAA,GAAgBN,iCAAA,CAAkCK,KAAA;EACxD,OAAOP,uBAAA,CAAwBO,KAAA,EAAOC,aAAA;AACxC;AAEAL,QAAA,CAASM,WAAW,GAAG"}
|
|
@@ -3,7 +3,9 @@ import { useTreeItemLayout_unstable } from './useTreeItemLayout';
|
|
|
3
3
|
import { renderTreeItemLayout_unstable } from './renderTreeItemLayout';
|
|
4
4
|
import { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles';
|
|
5
5
|
/**
|
|
6
|
-
* TreeItemLayout component
|
|
6
|
+
* The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.
|
|
7
|
+
* It provides a consistent visual structure for tree items in a `Tree` component.
|
|
8
|
+
* This component should only be used as a direct child of `TreeItem`.
|
|
7
9
|
*/
|
|
8
10
|
export const TreeItemLayout = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
9
11
|
const state = useTreeItemLayout_unstable(props, ref);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useTreeItemLayout_unstable","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","TreeItemLayout","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/TreeItemLayout/TreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles';\nimport type { TreeItemLayoutProps } from './TreeItemLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TreeItemLayout component
|
|
1
|
+
{"version":3,"names":["React","useTreeItemLayout_unstable","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","TreeItemLayout","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/TreeItemLayout/TreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles';\nimport type { TreeItemLayoutProps } from './TreeItemLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps> = React.forwardRef((props, ref) => {\n const state = useTreeItemLayout_unstable(props, ref);\n\n useTreeItemLayoutStyles_unstable(state);\n return renderTreeItemLayout_unstable(state);\n});\n\nTreeItemLayout.displayName = 'TreeItemLayout';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,gCAAgC,QAAQ;AAIjD;;;;;AAKA,OAAO,MAAMC,cAAA,gBAA2DJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvG,MAAMC,KAAA,GAAQP,0BAAA,CAA2BK,KAAA,EAAOC,GAAA;EAEhDJ,gCAAA,CAAiCK,KAAA;EACjC,OAAON,6BAAA,CAA8BM,KAAA;AACvC;AAEAJ,cAAA,CAAeK,WAAW,GAAG"}
|
|
@@ -4,7 +4,9 @@ import { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLay
|
|
|
4
4
|
import { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles';
|
|
5
5
|
import { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';
|
|
6
6
|
/**
|
|
7
|
-
* TreeItemPersonaLayout component
|
|
7
|
+
* The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.
|
|
8
|
+
* It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.
|
|
9
|
+
* This component should only be used as a direct child of `TreeItem`.
|
|
8
10
|
*/
|
|
9
11
|
export const TreeItemPersonaLayout = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
10
12
|
const state = useTreeItemPersonaLayout_unstable(props, ref);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\n\n/**\n * TreeItemPersonaLayout component
|
|
1
|
+
{"version":3,"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n useTreeItemPersonaLayoutStyles_unstable(state);\n\n const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,iCAAiC,QAAQ;AAClD,SAASC,oCAAoC,QAAQ;AACrD,SAASC,uCAAuC,QAAQ;AAGxD,SAASC,8CAA8C,QAAQ;AAE/D;;;;;AAKA,OAAO,MAAMC,qBAAA,gBAAyEL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrH,MAAMC,KAAA,GAAQR,iCAAA,CAAkCM,KAAA,EAAOC,GAAA;EAEvDL,uCAAA,CAAwCM,KAAA;EAExC,MAAMC,aAAA,GAAgBN,8CAAA,CAA+CK,KAAA;EAErE,OAAOP,oCAAA,CAAqCO,KAAA,EAAOC,aAAA;AACrD;AAEAL,qBAAA,CAAsBM,WAAW,GAAG"}
|
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":"AAAA,SAASA,gBAAgB,QAAQ;AACjC,YAAYC,KAAA,MAAW;AACvB,SAASC,mBAAmB,EAAEC,4BAA4B,QAAQ;AAClE,SAASC,aAAa,QAAQ;AAC9B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,iBAAiB,QAAQ;AA2FlC;;;;;;;;;;;;AAYA,OAAO,SAASC,qBACdC,iBAAsC,EACtCC,OAAA,GAAwG,CAAC,CAAC,EAChG;EACV,MAAM,CAACC,SAAA,EAAWC,eAAA,CAAgB,GAAGL,iBAAA,CAAkBG,OAAA;EACvD,MAAMG,aAAA,GAAgBX,KAAA,CAAMY,OAAO,CAAC,MAAMX,mBAAA,CAAoBM,iBAAA,GAAoB,CAACA,iBAAA,CAAkB;EACrG,MAAM,CAACM,QAAA,EAAUC,aAAA,CAAc,GAAGV,qBAAA,CAAsBO,aAAA;EAExD,MAAMI,gBAAA,GAAmBhB,gBAAA,CAAiB,CAACiB,KAAA,EAA4BC,IAAA,KAA6B;QAClGC,qBAAA;IAAA,CAAAA,qBAAA,GAAAV,OAAA,CAAQW,YAAY,cAApBD,qBAAA,uBAAAA,qBAAA,CAAAE,IAAA,CAAAZ,OAAA,EAAuBQ,KAAA,EAAOC,IAAA;IAC9B,IAAI,CAACD,KAAA,CAAMK,kBAAkB,IAAI;MAC/BX,eAAA,CAAgBO,IAAA;IAClB;IACAD,KAAA,CAAMM,cAAc;EACtB;EAEA,MAAMC,gBAAA,GAAmBxB,gBAAA,CACvB,CAACiB,KAAA,EAAqCC,IAAA,KAAsC;QAC1EO,8BAAA;IAAA,CAAAA,8BAAA,GAAAhB,OAAA,CAAQiB,qBAAqB,cAA7BD,8BAAA,uBAAAA,8BAAA,CAAAJ,IAAA,CAAAZ,OAAA,EAAgCQ,KAAA,EAAOC,IAAA;IACvC,IAAI,CAACD,KAAA,CAAMK,kBAAkB,IAAI;MAC/BR,QAAA,CAASI,IAAA;IACX;IACAD,KAAA,CAAMM,cAAc;EACtB;EAGF,MAAMI,oBAAA,GAAuB3B,gBAAA,CAAiB,CAAC4B,YAAA,EAA8BV,IAAA,KAAsC;IACjH,MAAMW,IAAA,GAAOjB,aAAA,CAAckB,GAAG,CAACZ,IAAA,CAAKa,MAAM,CAACC,EAAE;IAC7C,IAAIH,IAAA,EAAM;MACR,QAAQX,IAAA,CAAKe,IAAI;QACf,KAAK7B,aAAA,CAAc8B,SAAS;UAC1B,OAAOL,IAAA;QACT,KAAKzB,aAAA,CAAc+B,SAAS;UAC1B,OAAOvB,aAAA,CAAckB,GAAG,CAACD,IAAA,CAAKO,QAAQ;QACxC,KAAKhC,aAAA,CAAciC,UAAU;UAC3B,OAAOT,YAAY,CAACC,IAAA,CAAKS,KAAK,GAAG,EAAE;QACrC,KAAKlC,aAAA,CAAcmC,GAAG;UACpB,OAAOX,YAAY,CAACA,YAAA,CAAaY,MAAM,GAAG,EAAE;QAC9C,KAAKpC,aAAA,CAAcqC,IAAI;UACrB,OAAOb,YAAY,CAAC,EAAE;QACxB,KAAKxB,aAAA,CAAcsC,SAAS;UAC1B,OAAOd,YAAY,CAACC,IAAA,CAAKS,KAAK,GAAG,EAAE;QACrC,KAAKlC,aAAA,CAAcuC,OAAO;UACxB,OAAOf,YAAY,CAACC,IAAA,CAAKS,KAAK,GAAG,EAAE;MAAA;IAEzC;EACF;EAEA,MAAMM,YAAA,GAAe3C,KAAA,CAAM4C,WAAW,CACpC,OAAO;IACLC,GAAA,EAAK/B,aAAA;IACLL,SAAA;IACAU,YAAA,EAAcJ,gBAAA;IACd;IACAU,qBAAA,EAAuBF;EACzB;EACA;EACA,CAACd,SAAA,CAAU;EAGb,MAAMqC,KAAA,GAAQ9C,KAAA,CAAM4C,WAAW,CAC7B,MAAM1C,4BAAA,CAA6BO,SAAA,EAAWE,aAAA,GAC9C,CAACF,SAAA,EAAWE,aAAA,CAAc;EAG5B,OAAOX,KAAA,CAAMY,OAAO,CAClB,OAAO;IAAEC,QAAA;IAAU8B,YAAA;IAAcjB,oBAAA;IAAsBoB;EAAM,IAC7D,CAACjC,QAAA,EAAU8B,YAAA,EAAcjB,oBAAA,EAAsBoB,KAAA,CAAM;AAEzD"}
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/TreeItem/TreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n/**\n * TreeItem component
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/TreeItem/TreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nsted child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useTreeItem_unstable(props, ref);\n useTreeItemStyles_unstable(state);\n const contextValues = useTreeItemContextValues_unstable(state);\n return renderTreeItem_unstable(state, contextValues);\n});\nTreeItem.displayName = 'TreeItem';\n//# sourceMappingURL=TreeItem.js.map"],"names":["TreeItem","React","forwardRef","props","ref","state","useTreeItem_unstable","useTreeItemStyles_unstable","contextValues","useTreeItemContextValues_unstable","renderTreeItem_unstable","displayName"],"mappings":";;;;+BAiBaA;;aAAAA;;;6DAjBU;6BACc;gCACG;mCACG;0CACO;AAa3C,MAAMA,WAAW,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1CG,IAAAA,6CAA0B,EAACF;IAC3B,MAAMG,gBAAgBC,IAAAA,2DAAiC,EAACJ;IACxD,OAAOK,IAAAA,uCAAuB,EAACL,OAAOG;AACxC;AACAR,SAASW,WAAW,GAAG,YACvB,oCAAoC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/TreeItemLayout/TreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles';\n/**\n * TreeItemLayout component
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/TreeItemLayout/TreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles';\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useTreeItemLayout_unstable(props, ref);\n useTreeItemLayoutStyles_unstable(state);\n return renderTreeItemLayout_unstable(state);\n});\nTreeItemLayout.displayName = 'TreeItemLayout';\n//# sourceMappingURL=TreeItemLayout.js.map"],"names":["TreeItemLayout","React","forwardRef","props","ref","state","useTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","renderTreeItemLayout_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;mCACoB;sCACG;yCACG;AAM1C,MAAMA,iBAAiB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC1E,MAAMC,QAAQC,IAAAA,6CAA0B,EAACH,OAAOC;IAChDG,IAAAA,yDAAgC,EAACF;IACjC,OAAOG,IAAAA,mDAA6B,EAACH;AACvC;AACAL,eAAeS,WAAW,GAAG,kBAC7B,0CAA0C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\n/**\n * TreeItemPersonaLayout component
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useTreeItemPersonaLayout_unstable(props, ref);\n useTreeItemPersonaLayoutStyles_unstable(state);\n const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n//# sourceMappingURL=TreeItemPersonaLayout.js.map"],"names":["TreeItemPersonaLayout","React","forwardRef","props","ref","state","useTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","contextValues","useTreeItemPersonaLayoutContextValues_unstable","renderTreeItemPersonaLayout_unstable","displayName"],"mappings":";;;;+BAUaA;;aAAAA;;;6DAVU;0CAC2B;6CACG;gDACG;uDACO;AAMxD,MAAMA,wBAAwB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjF,MAAMC,QAAQC,IAAAA,2DAAiC,EAACH,OAAOC;IACvDG,IAAAA,uEAAuC,EAACF;IACxC,MAAMG,gBAAgBC,IAAAA,qFAA8C,EAACJ;IACrE,OAAOK,IAAAA,iEAAoC,EAACL,OAAOG;AACrD;AACAR,sBAAsBW,WAAW,GAAG,yBACpC,iDAAiD"}
|
|
@@ -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
|
},
|