@fluentui/react-tree 9.0.0-beta.1 → 9.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.json +67 -1
  2. package/CHANGELOG.md +26 -2
  3. package/dist/index.d.ts +80 -22
  4. package/lib/hooks/index.js +1 -1
  5. package/lib/hooks/index.js.map +1 -1
  6. package/lib/hooks/useFlatTree.js +49 -0
  7. package/lib/hooks/useFlatTree.js.map +1 -0
  8. package/lib/hooks/useFlatTreeNavigation.js +6 -6
  9. package/lib/hooks/useFlatTreeNavigation.js.map +1 -1
  10. package/lib/index.js +1 -1
  11. package/lib/index.js.map +1 -1
  12. package/lib/utils/createUnfilteredFlatTree.js +77 -0
  13. package/lib/utils/createUnfilteredFlatTree.js.map +1 -0
  14. package/lib/utils/createVisibleFlatTree.js +80 -0
  15. package/lib/utils/createVisibleFlatTree.js.map +1 -0
  16. package/lib/utils/flattenTree.js.map +1 -1
  17. package/lib-commonjs/hooks/index.js +1 -1
  18. package/lib-commonjs/hooks/index.js.map +1 -1
  19. package/lib-commonjs/hooks/useFlatTree.js +56 -0
  20. package/lib-commonjs/hooks/useFlatTree.js.map +1 -0
  21. package/lib-commonjs/hooks/useFlatTreeNavigation.js +6 -6
  22. package/lib-commonjs/hooks/useFlatTreeNavigation.js.map +1 -1
  23. package/lib-commonjs/index.js +3 -3
  24. package/lib-commonjs/index.js.map +1 -1
  25. package/lib-commonjs/utils/createUnfilteredFlatTree.js +84 -0
  26. package/lib-commonjs/utils/createUnfilteredFlatTree.js.map +1 -0
  27. package/lib-commonjs/utils/createVisibleFlatTree.js +87 -0
  28. package/lib-commonjs/utils/createVisibleFlatTree.js.map +1 -0
  29. package/lib-commonjs/utils/flattenTree.js.map +1 -1
  30. package/package.json +8 -8
  31. package/lib/hooks/useFlatTreeItems.js +0 -134
  32. package/lib/hooks/useFlatTreeItems.js.map +0 -1
  33. package/lib-commonjs/hooks/useFlatTreeItems.js +0 -141
  34. package/lib-commonjs/hooks/useFlatTreeItems.js.map +0 -1
package/CHANGELOG.json CHANGED
@@ -2,7 +2,73 @@
2
2
  "name": "@fluentui/react-tree",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 10 Mar 2023 07:11:10 GMT",
5
+ "date": "Mon, 13 Mar 2023 08:55:02 GMT",
6
+ "tag": "@fluentui/react-tree_v9.0.0-beta.3",
7
+ "version": "9.0.0-beta.3",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-tree",
13
+ "comment": "Bump @fluentui/react-context-selector to v9.1.13",
14
+ "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-tree",
19
+ "comment": "Bump @fluentui/react-avatar to v9.4.2",
20
+ "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-tree",
25
+ "comment": "Bump @fluentui/react-aria to v9.3.13",
26
+ "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-tree",
31
+ "comment": "Bump @fluentui/react-tabster to v9.5.6",
32
+ "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-tree",
37
+ "comment": "Bump @fluentui/react-portal to v9.1.12",
38
+ "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-tree",
43
+ "comment": "Bump @fluentui/react-button to v9.3.2",
44
+ "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-tree",
49
+ "comment": "Bump @fluentui/react-utilities to v9.7.0",
50
+ "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
51
+ }
52
+ ]
53
+ }
54
+ },
55
+ {
56
+ "date": "Fri, 10 Mar 2023 13:28:40 GMT",
57
+ "tag": "@fluentui/react-tree_v9.0.0-beta.2",
58
+ "version": "9.0.0-beta.2",
59
+ "comments": {
60
+ "prerelease": [
61
+ {
62
+ "author": "bernardo.sunderhus@gmail.com",
63
+ "package": "@fluentui/react-tree",
64
+ "commit": "4e092355bfa9457409d7fc3b4e617681bc9d3c85",
65
+ "comment": "feat: creates useFlatTree hook to improve API"
66
+ }
67
+ ]
68
+ }
69
+ },
70
+ {
71
+ "date": "Fri, 10 Mar 2023 07:14:01 GMT",
6
72
  "tag": "@fluentui/react-tree_v9.0.0-beta.1",
7
73
  "version": "9.0.0-beta.1",
8
74
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,36 @@
1
1
  # Change Log - @fluentui/react-tree
2
2
 
3
- This log was last generated on Fri, 10 Mar 2023 07:11:10 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 13 Mar 2023 08:55:02 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.3)
8
+
9
+ Mon, 13 Mar 2023 08:55:02 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.2..@fluentui/react-tree_v9.0.0-beta.3)
11
+
12
+ ### Changes
13
+
14
+ - Bump @fluentui/react-context-selector to v9.1.13 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
15
+ - Bump @fluentui/react-avatar to v9.4.2 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
16
+ - Bump @fluentui/react-aria to v9.3.13 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
17
+ - Bump @fluentui/react-tabster to v9.5.6 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
18
+ - Bump @fluentui/react-portal to v9.1.12 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
19
+ - Bump @fluentui/react-button to v9.3.2 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
20
+ - Bump @fluentui/react-utilities to v9.7.0 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
21
+
22
+ ## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.2)
23
+
24
+ Fri, 10 Mar 2023 13:28:40 GMT
25
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.1..@fluentui/react-tree_v9.0.0-beta.2)
26
+
27
+ ### Changes
28
+
29
+ - feat: creates useFlatTree hook to improve API ([PR #27146](https://github.com/microsoft/fluentui/pull/27146) by bernardo.sunderhus@gmail.com)
30
+
7
31
  ## [9.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.1)
8
32
 
9
- Fri, 10 Mar 2023 07:11:10 GMT
33
+ Fri, 10 Mar 2023 07:14:01 GMT
10
34
 
11
35
  ### Changes
12
36
 
package/dist/index.d.ts CHANGED
@@ -25,13 +25,77 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
25
25
  /**
26
26
  * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`
27
27
  */
28
- export declare const flattenTree_unstable: (items: NestedTreeItem[]) => FlatTreeItem[];
28
+ export declare const flattenTree_unstable: (items: NestedTreeItem[]) => FlatTreeItemProps[];
29
29
 
30
- export declare type FlatTreeItem = Required<Pick<TreeItemProps, 'id'>> & TreeItemProps & {
30
+ /**
31
+ * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
32
+ * in multiple scenarios including virtualization.
33
+ *
34
+ * !!A flat tree is an unofficial spec for tree!!
35
+ *
36
+ * It should be used on cases where more complex interactions with a Tree is required.
37
+ *
38
+ * On simple scenarios it is advised to simply use a nested structure instead.
39
+ */
40
+ export declare type FlatTree = {
41
+ /**
42
+ * returns the properties required for the Tree component to work properly.
43
+ * That includes:
44
+ * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`
45
+ */
46
+ getTreeProps(): FlatTreeProps;
47
+ /**
48
+ * internal method used to react to an `onNavigation` event.
49
+ * This method ensures proper navigation on keyboard and mouse interaction.
50
+ * In case of virtualization it might be required to cancel default provided `onNavigation`
51
+ * event and then call this method manually.
52
+ *
53
+ * @example
54
+ * ```ts
55
+ * // react-window
56
+ * const handleNavigation = (event, data) => {
57
+ * event.preventDefault();
58
+ * const nextItem = tree.getNextNavigableItem(data);
59
+ * // scroll to item using virtualization scroll mechanism
60
+ * if (nextItem && !targetDocument.getElementById(nextItem.id)) {
61
+ * listRef.current.scrollToItem(nextItem.index);
62
+ * }
63
+ * // wait for scrolling to happen and then invoke navigate method
64
+ * requestAnimationFrame(() => {
65
+ * tree.navigate(data);
66
+ * });
67
+ * };
68
+ *```
69
+ */
70
+ navigate(data: TreeNavigationData_unstable): void;
71
+ /**
72
+ * returns next item to be focused on a navigation.
73
+ * This method is provided to decouple the element that needs to be focused from
74
+ * the action of focusing it itself.
75
+ */
76
+ getNextNavigableItem(data: TreeNavigationData_unstable): FlatTreeItem | null;
77
+ /**
78
+ * returns a single flat tree item by id without iterating over the whole collection
79
+ */
80
+ getItem(id: string): FlatTreeItem | null;
81
+ /**
82
+ * returns an iterable containing all visually available flat tree items
83
+ */
84
+ items(): Iterable<FlatTreeItem>;
85
+ };
86
+
87
+ export declare type FlatTreeItem = {
88
+ getTreeItemProps(): Required<Pick<TreeItemProps, 'id' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> & TreeItemProps;
31
89
  parentId?: string;
90
+ childrenSize: number;
91
+ index: number;
92
+ id: string;
93
+ level: number;
32
94
  };
33
95
 
34
- export declare type FlatTreeItemProps = Required<Pick<TreeItemProps, 'id' | 'aria-level' | 'aria-posinset' | 'leaf' | 'aria-setsize'>> & TreeItemProps;
96
+ export declare type FlatTreeItemProps = Required<Pick<TreeItemProps, 'id'>> & TreeItemProps & {
97
+ parentId?: string;
98
+ };
35
99
 
36
100
  export declare type FlatTreeProps = Required<Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & {
37
101
  ref: React_2.Ref<HTMLDivElement>;
@@ -63,15 +127,6 @@ declare interface ImmutableSet<Value> {
63
127
  [Symbol.iterator](): IterableIterator<Value>;
64
128
  }
65
129
 
66
- declare type LazyArray<Value> = {
67
- map<NextValue>(fn: (child: Value) => NextValue): NextValue[];
68
- toArray(): Value[];
69
- };
70
-
71
- export declare type LazyFlatTreeItems = LazyArray<FlatTreeItemProps> & {
72
- get(id: string): TreeItemPropsReference | null;
73
- };
74
-
75
130
  export declare type NestedTreeItem = Omit<TreeItemProps, 'subtree'> & {
76
131
  subtree?: NestedTreeItem[];
77
132
  };
@@ -234,13 +289,6 @@ export declare type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {
234
289
  leaf?: boolean;
235
290
  };
236
291
 
237
- declare type TreeItemPropsReference = {
238
- props: Required<Pick<TreeItemProps, 'id' | 'aria-level' | 'aria-posinset' | 'leaf'>> & TreeItemProps;
239
- parentId?: string;
240
- childrenSize: number;
241
- index: number;
242
- };
243
-
244
292
  export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | undefined>;
245
293
 
246
294
  export declare type TreeItemSlots = {
@@ -395,9 +443,19 @@ export declare type TreeSlots = {
395
443
  */
396
444
  export declare type TreeState = ComponentState<TreeSlots> & TreeContextValue;
397
445
 
398
- export declare function useFlatTreeItems_unstable(items: FlatTreeItem[], options?: UseFlatTreeItemsOptions): readonly [FlatTreeProps, LazyFlatTreeItems];
399
-
400
- export declare type UseFlatTreeItemsOptions = Pick<TreeProps, 'openItems' | 'defaultOpenItems'>;
446
+ /**
447
+ * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
448
+ * in multiple scenarios including virtualization.
449
+ *
450
+ * !!A flat tree is an unofficial spec for tree!!
451
+ *
452
+ * It should be used on cases where more complex interactions with a Tree is required.
453
+ * On simple scenarios it is advised to simply use a nested structure instead.
454
+ *
455
+ * @param items - a list of tree items
456
+ * @param options - in case control over the internal openItems is required
457
+ */
458
+ export declare function useFlatTree_unstable(items: FlatTreeItemProps[], options?: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>): FlatTree;
401
459
 
402
460
  /**
403
461
  * Create the state required to render Tree.
@@ -1,4 +1,4 @@
1
- export * from './useFlatTreeItems';
1
+ export * from './useFlatTree';
2
2
  export * from './useNestedTreeNavigation';
3
3
  export * from './useOpenItemsState';
4
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './useFlatTreeItems';\nexport * from './useNestedTreeNavigation';\nexport * from './useOpenItemsState';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useOpenItemsState';\n"]}
@@ -0,0 +1,49 @@
1
+ import { useEventCallback } from '@fluentui/react-utilities';
2
+ import * as React from 'react';
3
+ import { createUnfilteredFlatTree } from '../utils/createUnfilteredFlatTree';
4
+ import { createVisibleFlatTree } from '../utils/createVisibleFlatTree';
5
+ import { useFlatTreeNavigation } from './useFlatTreeNavigation';
6
+ import { useOpenItemsState } from './useOpenItemsState';
7
+ /**
8
+ * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
9
+ * in multiple scenarios including virtualization.
10
+ *
11
+ * !!A flat tree is an unofficial spec for tree!!
12
+ *
13
+ * It should be used on cases where more complex interactions with a Tree is required.
14
+ * On simple scenarios it is advised to simply use a nested structure instead.
15
+ *
16
+ * @param items - a list of tree items
17
+ * @param options - in case control over the internal openItems is required
18
+ */
19
+ export function useFlatTree_unstable(items, options = {}) {
20
+ const [openItems, updateOpenItems] = useOpenItemsState(options);
21
+ const unfilteredFlatTree = React.useMemo(() => createUnfilteredFlatTree(items), [items]);
22
+ const [navigate, navigationRef] = useFlatTreeNavigation(unfilteredFlatTree);
23
+ const visibleFlatTree = React.useMemo(() => createVisibleFlatTree(unfilteredFlatTree, openItems), [unfilteredFlatTree, openItems]);
24
+ const handleOpenChange = useEventCallback((event, data) => {
25
+ event.preventDefault();
26
+ updateOpenItems(data);
27
+ });
28
+ const handleNavigation = useEventCallback((event, data) => {
29
+ event.preventDefault();
30
+ navigate(data);
31
+ });
32
+ const flatTree = {
33
+ ...visibleFlatTree,
34
+ getTreeProps: () => ({
35
+ ref: navigationRef,
36
+ openItems,
37
+ onOpenChange: handleOpenChange,
38
+ // eslint-disable-next-line @typescript-eslint/naming-convention
39
+ onNavigation_unstable: handleNavigation
40
+ }),
41
+ navigate,
42
+ getItem: id => {
43
+ var _a;
44
+ return (_a = unfilteredFlatTree.itemsPerId.get(id)) !== null && _a !== void 0 ? _a : null;
45
+ }
46
+ };
47
+ return flatTree;
48
+ }
49
+ //# sourceMappingURL=useFlatTree.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["useEventCallback","React","createUnfilteredFlatTree","createVisibleFlatTree","useFlatTreeNavigation","useOpenItemsState","useFlatTree_unstable","items","options","openItems","updateOpenItems","unfilteredFlatTree","useMemo","navigate","navigationRef","visibleFlatTree","handleOpenChange","event","data","preventDefault","handleNavigation","flatTree","getTreeProps","ref","onOpenChange","onNavigation_unstable","getItem","id","_a","itemsPerId","get"],"sources":["../src/packages/react-components/react-tree/src/hooks/useFlatTree.ts"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeProps,\n} from '../Tree';\nimport { TreeItemProps } from '../TreeItem';\nimport { createUnfilteredFlatTree } from '../utils/createUnfilteredFlatTree';\nimport { createVisibleFlatTree } from '../utils/createVisibleFlatTree';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\n\nexport type FlatTreeItemProps = Required<Pick<TreeItemProps, 'id'>> &\n TreeItemProps & {\n parentId?: string;\n };\n\nexport type FlatTreeItem = {\n getTreeItemProps(): Required<Pick<TreeItemProps, 'id' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> &\n TreeItemProps;\n parentId?: string;\n childrenSize: number;\n index: number;\n id: string;\n level: number;\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 && !targetDocument.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 getNextNavigableItem(data: TreeNavigationData_unstable): FlatTreeItem | null;\n /**\n * returns a single flat tree item by id without iterating over the whole collection\n */\n getItem(id: string): FlatTreeItem | null;\n /**\n * returns an iterable containing all visually available flat tree items\n */\n items(): Iterable<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 items - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable(\n items: FlatTreeItemProps[],\n options: Pick<TreeProps, 'openItems' | 'defaultOpenItems'> = {},\n): FlatTree {\n const [openItems, updateOpenItems] = useOpenItemsState(options);\n const unfilteredFlatTree = React.useMemo(() => createUnfilteredFlatTree(items), [items]);\n const [navigate, navigationRef] = useFlatTreeNavigation(unfilteredFlatTree);\n const visibleFlatTree = React.useMemo(\n () => createVisibleFlatTree(unfilteredFlatTree, openItems),\n [unfilteredFlatTree, openItems],\n );\n\n const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n event.preventDefault();\n updateOpenItems(data);\n });\n\n const handleNavigation = useEventCallback(\n (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n event.preventDefault();\n navigate(data);\n },\n );\n\n const flatTree: FlatTree = {\n ...visibleFlatTree,\n getTreeProps: () => ({\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 navigate,\n getItem: id => unfilteredFlatTree.itemsPerId.get(id) ?? null,\n };\n return flatTree;\n}\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,2BAA2B;AAC5D,OAAO,KAAKC,KAAK,MAAM,OAAO;AAS9B,SAASC,wBAAwB,QAAQ,mCAAmC;AAC5E,SAASC,qBAAqB,QAAQ,gCAAgC;AACtE,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,iBAAiB,QAAQ,qBAAqB;AA8EvD;;;;;;;;;;;;AAYA,OAAM,SAAUC,oBAAoBA,CAClCC,KAA0B,EAC1BC,OAAA,GAA6D,EAAE;EAE/D,MAAM,CAACC,SAAS,EAAEC,eAAe,CAAC,GAAGL,iBAAiB,CAACG,OAAO,CAAC;EAC/D,MAAMG,kBAAkB,GAAGV,KAAK,CAACW,OAAO,CAAC,MAAMV,wBAAwB,CAACK,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACxF,MAAM,CAACM,QAAQ,EAAEC,aAAa,CAAC,GAAGV,qBAAqB,CAACO,kBAAkB,CAAC;EAC3E,MAAMI,eAAe,GAAGd,KAAK,CAACW,OAAO,CACnC,MAAMT,qBAAqB,CAACQ,kBAAkB,EAAEF,SAAS,CAAC,EAC1D,CAACE,kBAAkB,EAAEF,SAAS,CAAC,CAChC;EAED,MAAMO,gBAAgB,GAAGhB,gBAAgB,CAAC,CAACiB,KAA0B,EAAEC,IAAwB,KAAI;IACjGD,KAAK,CAACE,cAAc,EAAE;IACtBT,eAAe,CAACQ,IAAI,CAAC;EACvB,CAAC,CAAC;EAEF,MAAME,gBAAgB,GAAGpB,gBAAgB,CACvC,CAACiB,KAAmC,EAAEC,IAAiC,KAAI;IACzED,KAAK,CAACE,cAAc,EAAE;IACtBN,QAAQ,CAACK,IAAI,CAAC;EAChB,CAAC,CACF;EAED,MAAMG,QAAQ,GAAa;IACzB,GAAGN,eAAe;IAClBO,YAAY,EAAEA,CAAA,MAAO;MACnBC,GAAG,EAAET,aAA0C;MAC/CL,SAAS;MACTe,YAAY,EAAER,gBAAgB;MAC9B;MACAS,qBAAqB,EAAEL;KACxB,CAAC;IACFP,QAAQ;IACRa,OAAO,EAAEC,EAAE,IAAG;MAAA,IAAAC,EAAA;MAAC,QAAAA,EAAA,GAAAjB,kBAAkB,CAACkB,UAAU,CAACC,GAAG,CAACH,EAAE,CAAC,cAAAC,EAAA,cAAAA,EAAA,GAAI,IAAI;IAAA;GAC7D;EACD,OAAOP,QAAQ;AACjB"}
@@ -1,10 +1,10 @@
1
1
  import { useFluent_unstable } from '@fluentui/react-shared-contexts';
2
+ import { useMergedRefs } from '@fluentui/react-utilities';
2
3
  import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';
3
- import { useHTMLElementWalkerRef } from './useHTMLElementWalker';
4
4
  import { treeDataTypes } from '../utils/tokens';
5
5
  import { treeItemFilter } from '../utils/treeItemFilter';
6
+ import { useHTMLElementWalkerRef } from './useHTMLElementWalker';
6
7
  import { useRovingTabIndex } from './useRovingTabIndexes';
7
- import { useMergedRefs } from '@fluentui/react-utilities';
8
8
  export function useFlatTreeNavigation(flatTree) {
9
9
  const {
10
10
  targetDocument
@@ -64,10 +64,10 @@ function firstChild(target, treeWalker) {
64
64
  }
65
65
  return null;
66
66
  }
67
- function parentElement(flatTree, target, targetDocument) {
68
- const item = flatTree.get(target.id);
69
- if (item && item.parentId) {
70
- return targetDocument.getElementById(item.parentId);
67
+ function parentElement(flatTree, target, document) {
68
+ const flatTreeItem = flatTree.itemsPerId.get(target.id);
69
+ if (flatTreeItem && flatTreeItem.parentId) {
70
+ return document.getElementById(flatTreeItem.parentId);
71
71
  }
72
72
  return null;
73
73
  }
@@ -1 +1 @@
1
- {"version":3,"names":["useFluent_unstable","nextTypeAheadElement","useHTMLElementWalkerRef","treeDataTypes","treeItemFilter","useRovingTabIndex","useMergedRefs","useFlatTreeNavigation","flatTree","targetDocument","treeItemWalkerRef","treeItemWalkerRootRef","rove","rovingRootRef","getNextElement","data","current","treeItemWalker","type","click","target","typeAhead","currentElement","event","key","arrowLeft","parentElement","arrowRight","firstChild","end","root","lastChild","home","arrowDown","nextElement","arrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","item","get","id","parentId","getElementById"],"sources":["../src/packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport type { TreeItemPropsReferences } from './useFlatTreeItems';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\nexport function useFlatTreeNavigation(flatTree: Pick<TreeItemPropsReferences, 'get'>) {\n const { targetDocument } = useFluent_unstable();\n const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n\n function getNextElement(data: TreeNavigationData_unstable) {\n if (!targetDocument || !treeItemWalkerRef.current) {\n return null;\n }\n const treeItemWalker = treeItemWalkerRef.current;\n switch (data.type) {\n case treeDataTypes.click:\n return data.target;\n case treeDataTypes.typeAhead:\n treeItemWalker.currentElement = data.target;\n return nextTypeAheadElement(treeItemWalker, data.event.key);\n case treeDataTypes.arrowLeft:\n return parentElement(flatTree, data.target, targetDocument);\n case treeDataTypes.arrowRight:\n treeItemWalker.currentElement = data.target;\n return firstChild(data.target, treeItemWalker);\n case treeDataTypes.end:\n treeItemWalker.currentElement = treeItemWalker.root;\n return treeItemWalker.lastChild();\n case treeDataTypes.home:\n treeItemWalker.currentElement = treeItemWalker.root;\n return treeItemWalker.firstChild();\n case treeDataTypes.arrowDown:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.nextElement();\n case treeDataTypes.arrowUp:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.previousElement();\n }\n }\n function navigate(data: TreeNavigationData_unstable) {\n const nextElement = getNextElement(data);\n if (nextElement) {\n rove(nextElement);\n }\n }\n return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)] as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n const nextElement = treeWalker.nextElement();\n if (!nextElement) {\n return null;\n }\n const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n const targetAriaLevel = target.getAttribute('aria-level');\n if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n return nextElement;\n }\n return null;\n}\n\nfunction parentElement(\n flatTree: Pick<TreeItemPropsReferences, 'get'>,\n target: HTMLElement,\n targetDocument: Document,\n): HTMLElement | null {\n const item = flatTree.get(target.id);\n if (item && item.parentId) {\n return targetDocument.getElementById(item.parentId);\n }\n return null;\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["useFluent_unstable","useMergedRefs","nextTypeAheadElement","treeDataTypes","treeItemFilter","useHTMLElementWalkerRef","useRovingTabIndex","useFlatTreeNavigation","flatTree","targetDocument","treeItemWalkerRef","treeItemWalkerRootRef","rove","rovingRootRef","getNextElement","data","current","treeItemWalker","type","click","target","typeAhead","currentElement","event","key","arrowLeft","parentElement","arrowRight","firstChild","end","root","lastChild","home","arrowDown","nextElement","arrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","document","flatTreeItem","itemsPerId","get","id","parentId","getElementById"],"sources":["../src/packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { UnfilteredFlatTree } from '../utils/createUnfilteredFlatTree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\n\nexport function useFlatTreeNavigation(flatTree: UnfilteredFlatTree) {\n const { targetDocument } = useFluent_unstable();\n const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n\n function getNextElement(data: TreeNavigationData_unstable) {\n if (!targetDocument || !treeItemWalkerRef.current) {\n return null;\n }\n const treeItemWalker = treeItemWalkerRef.current;\n switch (data.type) {\n case treeDataTypes.click:\n return data.target;\n case treeDataTypes.typeAhead:\n treeItemWalker.currentElement = data.target;\n return nextTypeAheadElement(treeItemWalker, data.event.key);\n case treeDataTypes.arrowLeft:\n return parentElement(flatTree, data.target, targetDocument);\n case treeDataTypes.arrowRight:\n treeItemWalker.currentElement = data.target;\n return firstChild(data.target, treeItemWalker);\n case treeDataTypes.end:\n treeItemWalker.currentElement = treeItemWalker.root;\n return treeItemWalker.lastChild();\n case treeDataTypes.home:\n treeItemWalker.currentElement = treeItemWalker.root;\n return treeItemWalker.firstChild();\n case treeDataTypes.arrowDown:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.nextElement();\n case treeDataTypes.arrowUp:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.previousElement();\n }\n }\n function navigate(data: TreeNavigationData_unstable) {\n const nextElement = getNextElement(data);\n if (nextElement) {\n rove(nextElement);\n }\n }\n return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)] as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n const nextElement = treeWalker.nextElement();\n if (!nextElement) {\n return null;\n }\n const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n const targetAriaLevel = target.getAttribute('aria-level');\n if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n return nextElement;\n }\n return null;\n}\n\nfunction parentElement(flatTree: UnfilteredFlatTree, target: HTMLElement, document: Document) {\n const flatTreeItem = flatTree.itemsPerId.get(target.id);\n if (flatTreeItem && flatTreeItem.parentId) {\n return document.getElementById(flatTreeItem.parentId);\n }\n return null;\n}\n"],"mappings":"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"}
package/lib/index.js CHANGED
@@ -4,6 +4,6 @@ export { treeItemLevelToken } from './utils/tokens';
4
4
  export { TreeItem, treeItemClassNames, renderTreeItem_unstable, useTreeItemStyles_unstable, useTreeItem_unstable } from './TreeItem';
5
5
  export { TreeItemLayout, treeItemLayoutClassNames, renderTreeItemLayout_unstable, useTreeItemLayoutStyles_unstable, useTreeItemLayout_unstable } from './TreeItemLayout';
6
6
  export { TreeItemPersonaLayout, treeItemPersonaLayoutClassNames, renderTreeItemPersonaLayout_unstable, useTreeItemPersonaLayoutStyles_unstable, useTreeItemPersonaLayout_unstable } from './TreeItemPersonaLayout';
7
- export { useFlatTreeItems_unstable } from './hooks/index';
7
+ export { useFlatTree_unstable } from './hooks/index';
8
8
  export { flattenTree_unstable } from './utils/flattenTree';
9
9
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["Tree","treeClassNames","renderTree_unstable","useTreeStyles_unstable","useTree_unstable","useTreeContextValues_unstable","TreeProvider","useTreeContext_unstable","useTreeItemContext_unstable","TreeItemProvider","treeItemLevelToken","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItem_unstable","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","useFlatTreeItems_unstable","flattenTree_unstable"],"sources":["../src/packages/react-components/react-tree/src/index.ts"],"sourcesContent":["export {\n Tree,\n treeClassNames,\n renderTree_unstable,\n useTreeStyles_unstable,\n useTree_unstable,\n useTreeContextValues_unstable,\n} from './Tree';\nexport type {\n TreeProps,\n TreeState,\n TreeSlots,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeNavigationEvent_unstable,\n TreeNavigationData_unstable,\n TreeItemId,\n} from './Tree';\n\nexport { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';\nexport type { TreeContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport {\n TreeItem,\n treeItemClassNames,\n renderTreeItem_unstable,\n useTreeItemStyles_unstable,\n useTreeItem_unstable,\n} from './TreeItem';\nexport type { TreeItemProps, TreeItemState, TreeItemSlots } from './TreeItem';\n\nexport {\n TreeItemLayout,\n treeItemLayoutClassNames,\n renderTreeItemLayout_unstable,\n useTreeItemLayoutStyles_unstable,\n useTreeItemLayout_unstable,\n} from './TreeItemLayout';\nexport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout';\n\nexport {\n TreeItemPersonaLayout,\n treeItemPersonaLayoutClassNames,\n renderTreeItemPersonaLayout_unstable,\n useTreeItemPersonaLayoutStyles_unstable,\n useTreeItemPersonaLayout_unstable,\n} from './TreeItemPersonaLayout';\nexport type {\n TreeItemPersonaLayoutProps,\n TreeItemPersonaLayoutSlots,\n TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout';\n\nexport { useFlatTreeItems_unstable } from './hooks/index';\nexport type {\n FlatTreeItem,\n FlatTreeItemProps,\n FlatTreeProps,\n UseFlatTreeItemsOptions,\n LazyFlatTreeItems,\n} from './hooks/index';\n\nexport { flattenTree_unstable } from './utils/flattenTree';\nexport type { NestedTreeItem } from './utils/flattenTree';\n"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,EAChBC,6BAA6B,QACxB,QAAQ;AAYf,SAASC,YAAY,EAAEC,uBAAuB,EAAEC,2BAA2B,EAAEC,gBAAgB,QAAQ,YAAY;AAGjH,SAASC,kBAAkB,QAAQ,gBAAgB;AAEnD,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AAGnB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,kBAAkB;AAGzB,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B,yBAAyB;AAOhC,SAASC,yBAAyB,QAAQ,eAAe;AASzD,SAASC,oBAAoB,QAAQ,qBAAqB"}
1
+ {"version":3,"names":["Tree","treeClassNames","renderTree_unstable","useTreeStyles_unstable","useTree_unstable","useTreeContextValues_unstable","TreeProvider","useTreeContext_unstable","useTreeItemContext_unstable","TreeItemProvider","treeItemLevelToken","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItem_unstable","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","useFlatTree_unstable","flattenTree_unstable"],"sources":["../src/packages/react-components/react-tree/src/index.ts"],"sourcesContent":["export {\n Tree,\n treeClassNames,\n renderTree_unstable,\n useTreeStyles_unstable,\n useTree_unstable,\n useTreeContextValues_unstable,\n} from './Tree';\nexport type {\n TreeProps,\n TreeState,\n TreeSlots,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeNavigationEvent_unstable,\n TreeNavigationData_unstable,\n TreeItemId,\n} from './Tree';\n\nexport { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';\nexport type { TreeContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport {\n TreeItem,\n treeItemClassNames,\n renderTreeItem_unstable,\n useTreeItemStyles_unstable,\n useTreeItem_unstable,\n} from './TreeItem';\nexport type { TreeItemProps, TreeItemState, TreeItemSlots } from './TreeItem';\n\nexport {\n TreeItemLayout,\n treeItemLayoutClassNames,\n renderTreeItemLayout_unstable,\n useTreeItemLayoutStyles_unstable,\n useTreeItemLayout_unstable,\n} from './TreeItemLayout';\nexport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout';\n\nexport {\n TreeItemPersonaLayout,\n treeItemPersonaLayoutClassNames,\n renderTreeItemPersonaLayout_unstable,\n useTreeItemPersonaLayoutStyles_unstable,\n useTreeItemPersonaLayout_unstable,\n} from './TreeItemPersonaLayout';\nexport type {\n TreeItemPersonaLayoutProps,\n TreeItemPersonaLayoutSlots,\n TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout';\n\nexport { useFlatTree_unstable } from './hooks/index';\nexport type { FlatTreeItem, FlatTreeItemProps, FlatTreeProps, FlatTree } from './hooks/index';\n\nexport { flattenTree_unstable } from './utils/flattenTree';\nexport type { NestedTreeItem } from './utils/flattenTree';\n"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,EAChBC,6BAA6B,QACxB,QAAQ;AAYf,SAASC,YAAY,EAAEC,uBAAuB,EAAEC,2BAA2B,EAAEC,gBAAgB,QAAQ,YAAY;AAGjH,SAASC,kBAAkB,QAAQ,gBAAgB;AAEnD,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AAGnB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,kBAAkB;AAGzB,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B,yBAAyB;AAOhC,SAASC,oBAAoB,QAAQ,eAAe;AAGpD,SAASC,oBAAoB,QAAQ,qBAAqB"}
@@ -0,0 +1,77 @@
1
+ /**
2
+ * creates a list of flat tree items
3
+ * and provides a map to access each item by id
4
+ */
5
+ export function createUnfilteredFlatTree(flatTreeItemProps) {
6
+ var _a;
7
+ const root = createRootFlatTreeItem();
8
+ const itemsPerId = new Map([[root.id, root]]);
9
+ const items = [];
10
+ for (let index = 0; index < flatTreeItemProps.length; index++) {
11
+ const {
12
+ parentId = flatTreeRootParentId,
13
+ ...treeItemProps
14
+ } = flatTreeItemProps[index];
15
+ const nextItemProps = flatTreeItemProps[index + 1];
16
+ const currentParent = itemsPerId.get(parentId);
17
+ if (!currentParent) {
18
+ if (process.env.NODE_ENV === 'development') {
19
+ // eslint-disable-next-line no-console
20
+ console.error(`useFlatTree: item ${flatTreeItemProps[index].id} not properly initialized, make sure provided items are organized`);
21
+ }
22
+ break;
23
+ }
24
+ const isLeaf = (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.parentId) !== treeItemProps.id;
25
+ const currentLevel = ((_a = currentParent.level) !== null && _a !== void 0 ? _a : 0) + 1;
26
+ const currentChildrenSize = ++currentParent.childrenSize;
27
+ const flatTreeItem = {
28
+ id: treeItemProps.id,
29
+ getTreeItemProps: () => ({
30
+ ...treeItemProps,
31
+ 'aria-level': currentLevel,
32
+ 'aria-posinset': currentChildrenSize,
33
+ 'aria-setsize': currentParent.childrenSize,
34
+ leaf: isLeaf
35
+ }),
36
+ level: currentLevel,
37
+ parentId,
38
+ childrenSize: 0,
39
+ index: -1
40
+ };
41
+ itemsPerId.set(flatTreeItem.id, flatTreeItem);
42
+ items.push(flatTreeItem);
43
+ }
44
+ return {
45
+ items,
46
+ itemsPerId
47
+ };
48
+ }
49
+ export const flatTreeRootParentId = '__fuiFlatTreeRoot';
50
+ function createRootFlatTreeItem() {
51
+ return {
52
+ id: flatTreeRootParentId,
53
+ getTreeItemProps: () => {
54
+ if (process.env.NODE_ENV === 'development') {
55
+ // eslint-disable-next-line no-console
56
+ console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
57
+ }
58
+ return {
59
+ id: flatTreeRootParentId,
60
+ 'aria-setsize': -1,
61
+ 'aria-level': -1,
62
+ 'aria-posinset': -1,
63
+ leaf: true
64
+ };
65
+ },
66
+ childrenSize: 0,
67
+ get index() {
68
+ if (process.env.NODE_ENV === 'development') {
69
+ // eslint-disable-next-line no-console
70
+ console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
71
+ }
72
+ return -1;
73
+ },
74
+ level: 0
75
+ };
76
+ }
77
+ //# sourceMappingURL=createUnfilteredFlatTree.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["createUnfilteredFlatTree","flatTreeItemProps","root","createRootFlatTreeItem","itemsPerId","Map","id","items","index","length","parentId","flatTreeRootParentId","treeItemProps","nextItemProps","currentParent","get","process","env","NODE_ENV","console","error","isLeaf","currentLevel","_a","level","currentChildrenSize","childrenSize","flatTreeItem","getTreeItemProps","leaf","set","push"],"sources":["../src/packages/react-components/react-tree/src/utils/createUnfilteredFlatTree.ts"],"sourcesContent":["import { FlatTreeItem, FlatTreeItemProps } from '../hooks/useFlatTree';\n\n/**\n * @internal\n */\nexport type UnfilteredFlatTree = {\n items: FlatTreeItem[];\n itemsPerId: Map<string, FlatTreeItem>;\n};\n\n/**\n * creates a list of flat tree items\n * and provides a map to access each item by id\n */\nexport function createUnfilteredFlatTree(flatTreeItemProps: FlatTreeItemProps[]): UnfilteredFlatTree {\n const root = createRootFlatTreeItem();\n const itemsPerId = new Map<string, FlatTreeItem>([[root.id, root]]);\n const items: FlatTreeItem[] = [];\n\n for (let index = 0; index < flatTreeItemProps.length; index++) {\n const { parentId = flatTreeRootParentId, ...treeItemProps } = flatTreeItemProps[index];\n\n const nextItemProps = flatTreeItemProps[index + 1] as FlatTreeItemProps | undefined;\n const currentParent = itemsPerId.get(parentId);\n if (!currentParent) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error(\n `useFlatTree: item ${flatTreeItemProps[index].id} not properly initialized, make sure provided items are organized`,\n );\n }\n break;\n }\n const isLeaf = nextItemProps?.parentId !== treeItemProps.id;\n const currentLevel = (currentParent.level ?? 0) + 1;\n const currentChildrenSize = ++currentParent.childrenSize;\n\n const flatTreeItem: FlatTreeItem = {\n id: treeItemProps.id,\n getTreeItemProps: () => ({\n ...treeItemProps,\n 'aria-level': currentLevel,\n 'aria-posinset': currentChildrenSize,\n 'aria-setsize': currentParent.childrenSize,\n leaf: isLeaf,\n }),\n level: currentLevel,\n parentId,\n childrenSize: 0,\n index: -1,\n };\n itemsPerId.set(flatTreeItem.id, flatTreeItem);\n items.push(flatTreeItem);\n }\n\n return { items, itemsPerId };\n}\n\nexport const flatTreeRootParentId = '__fuiFlatTreeRoot';\n\nfunction createRootFlatTreeItem(): FlatTreeItem {\n return {\n id: flatTreeRootParentId,\n getTreeItemProps: () => {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n }\n return { id: flatTreeRootParentId, 'aria-setsize': -1, 'aria-level': -1, 'aria-posinset': -1, leaf: true };\n },\n childrenSize: 0,\n get index() {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n }\n return -1;\n },\n level: 0,\n };\n}\n"],"mappings":"AAUA;;;;AAIA,OAAM,SAAUA,wBAAwBA,CAACC,iBAAsC;;EAC7E,MAAMC,IAAI,GAAGC,sBAAsB,EAAE;EACrC,MAAMC,UAAU,GAAG,IAAIC,GAAG,CAAuB,CAAC,CAACH,IAAI,CAACI,EAAE,EAAEJ,IAAI,CAAC,CAAC,CAAC;EACnE,MAAMK,KAAK,GAAmB,EAAE;EAEhC,KAAK,IAAIC,KAAK,GAAG,CAAC,EAAEA,KAAK,GAAGP,iBAAiB,CAACQ,MAAM,EAAED,KAAK,EAAE,EAAE;IAC7D,MAAM;MAAEE,QAAQ,GAAGC,oBAAoB;MAAE,GAAGC;IAAa,CAAE,GAAGX,iBAAiB,CAACO,KAAK,CAAC;IAEtF,MAAMK,aAAa,GAAGZ,iBAAiB,CAACO,KAAK,GAAG,CAAC,CAAkC;IACnF,MAAMM,aAAa,GAAGV,UAAU,CAACW,GAAG,CAACL,QAAQ,CAAC;IAC9C,IAAI,CAACI,aAAa,EAAE;MAClB,IAAIE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;QAC1C;QACAC,OAAO,CAACC,KAAK,CACX,qBAAqBnB,iBAAiB,CAACO,KAAK,CAAC,CAACF,EAAE,mEAAmE,CACpH;;MAEH;;IAEF,MAAMe,MAAM,GAAG,CAAAR,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEH,QAAQ,MAAKE,aAAa,CAACN,EAAE;IAC3D,MAAMgB,YAAY,GAAG,CAAC,CAAAC,EAAA,GAAAT,aAAa,CAACU,KAAK,cAAAD,EAAA,cAAAA,EAAA,GAAI,CAAC,IAAI,CAAC;IACnD,MAAME,mBAAmB,GAAG,EAAEX,aAAa,CAACY,YAAY;IAExD,MAAMC,YAAY,GAAiB;MACjCrB,EAAE,EAAEM,aAAa,CAACN,EAAE;MACpBsB,gBAAgB,EAAEA,CAAA,MAAO;QACvB,GAAGhB,aAAa;QAChB,YAAY,EAAEU,YAAY;QAC1B,eAAe,EAAEG,mBAAmB;QACpC,cAAc,EAAEX,aAAa,CAACY,YAAY;QAC1CG,IAAI,EAAER;OACP,CAAC;MACFG,KAAK,EAAEF,YAAY;MACnBZ,QAAQ;MACRgB,YAAY,EAAE,CAAC;MACflB,KAAK,EAAE,CAAC;KACT;IACDJ,UAAU,CAAC0B,GAAG,CAACH,YAAY,CAACrB,EAAE,EAAEqB,YAAY,CAAC;IAC7CpB,KAAK,CAACwB,IAAI,CAACJ,YAAY,CAAC;;EAG1B,OAAO;IAAEpB,KAAK;IAAEH;EAAU,CAAE;AAC9B;AAEA,OAAO,MAAMO,oBAAoB,GAAG,mBAAmB;AAEvD,SAASR,sBAAsBA,CAAA;EAC7B,OAAO;IACLG,EAAE,EAAEK,oBAAoB;IACxBiB,gBAAgB,EAAEA,CAAA,KAAK;MACrB,IAAIZ,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;QAC1C;QACAC,OAAO,CAACC,KAAK,CAAC,wFAAwF,CAAC;;MAEzG,OAAO;QAAEd,EAAE,EAAEK,oBAAoB;QAAE,cAAc,EAAE,CAAC,CAAC;QAAE,YAAY,EAAE,CAAC,CAAC;QAAE,eAAe,EAAE,CAAC,CAAC;QAAEkB,IAAI,EAAE;MAAI,CAAE;IAC5G,CAAC;IACDH,YAAY,EAAE,CAAC;IACf,IAAIlB,KAAKA,CAAA;MACP,IAAIQ,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;QAC1C;QACAC,OAAO,CAACC,KAAK,CAAC,wFAAwF,CAAC;;MAEzG,OAAO,CAAC,CAAC;IACX,CAAC;IACDI,KAAK,EAAE;GACR;AACH"}
@@ -0,0 +1,80 @@
1
+ import { flatTreeRootParentId } from './createUnfilteredFlatTree';
2
+ import { treeDataTypes } from './tokens';
3
+ /**
4
+ * creates methods that depend on the unfilteredFlatTree and the current available openItems
5
+ */
6
+ export function createVisibleFlatTree(unfilteredFlatTree, openItems) {
7
+ let visibleItems = null;
8
+ const getNextNavigableItem = data => {
9
+ var _a, _b, _c, _d;
10
+ const item = unfilteredFlatTree.itemsPerId.get(data.target.id);
11
+ if (!item || !visibleItems) {
12
+ return null;
13
+ }
14
+ switch (data.type) {
15
+ case treeDataTypes.arrowLeft:
16
+ return item.parentId ? (_a = unfilteredFlatTree.itemsPerId.get(item.parentId)) !== null && _a !== void 0 ? _a : null : null;
17
+ case treeDataTypes.arrowRight:
18
+ return (_b = visibleItems[item.index + 1]) !== null && _b !== void 0 ? _b : null;
19
+ case treeDataTypes.end:
20
+ return visibleItems[visibleItems.length - 1];
21
+ case treeDataTypes.home:
22
+ return visibleItems[0];
23
+ case treeDataTypes.arrowDown:
24
+ return (_c = visibleItems[item.index + 1]) !== null && _c !== void 0 ? _c : null;
25
+ case treeDataTypes.arrowUp:
26
+ return (_d = visibleItems[item.index - 1]) !== null && _d !== void 0 ? _d : null;
27
+ default:
28
+ return null;
29
+ }
30
+ };
31
+ function* makeVisibleItemsGenerator() {
32
+ var _a;
33
+ visibleItems = [];
34
+ for (let index = 0, visibleIndex = 0; index < unfilteredFlatTree.items.length; index++) {
35
+ const item = unfilteredFlatTree.items[index];
36
+ const parent = unfilteredFlatTree.itemsPerId.get((_a = item.parentId) !== null && _a !== void 0 ? _a : flatTreeRootParentId);
37
+ if (!parent) {
38
+ break;
39
+ }
40
+ if (isFlatTreeItemVisible(item, {
41
+ openItems,
42
+ unfilteredFlatTree
43
+ })) {
44
+ item.index = visibleIndex++;
45
+ visibleItems.push({
46
+ ...item
47
+ });
48
+ yield item;
49
+ } else {
50
+ index += parent.childrenSize - 1 + item.childrenSize;
51
+ }
52
+ }
53
+ }
54
+ return {
55
+ getNextNavigableItem,
56
+ items: () => {
57
+ return visibleItems || makeVisibleItemsGenerator();
58
+ }
59
+ };
60
+ }
61
+ function isFlatTreeItemVisible(item, {
62
+ openItems,
63
+ unfilteredFlatTree: flatTree
64
+ }) {
65
+ if (item.level === 1) {
66
+ return true;
67
+ }
68
+ while (item.parentId && item.parentId !== flatTreeRootParentId) {
69
+ if (!openItems.has(item.parentId)) {
70
+ return false;
71
+ }
72
+ const parent = flatTree.itemsPerId.get(item.parentId);
73
+ if (!parent) {
74
+ return false;
75
+ }
76
+ item = parent;
77
+ }
78
+ return true;
79
+ }
80
+ //# sourceMappingURL=createVisibleFlatTree.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["flatTreeRootParentId","treeDataTypes","createVisibleFlatTree","unfilteredFlatTree","openItems","visibleItems","getNextNavigableItem","data","item","itemsPerId","get","target","id","type","arrowLeft","parentId","_a","arrowRight","_b","index","end","length","home","arrowDown","_c","arrowUp","_d","makeVisibleItemsGenerator","visibleIndex","items","parent","isFlatTreeItemVisible","push","childrenSize","flatTree","level","has"],"sources":["../src/packages/react-components/react-tree/src/utils/createVisibleFlatTree.ts"],"sourcesContent":["import { FlatTree, FlatTreeItem } from '../hooks/useFlatTree';\nimport { TreeItemId, TreeNavigationData_unstable } from '../Tree';\nimport { flatTreeRootParentId, UnfilteredFlatTree } from './createUnfilteredFlatTree';\nimport { ImmutableSet } from './ImmutableSet';\nimport { treeDataTypes } from './tokens';\n\n/**\n * creates methods that depend on the unfilteredFlatTree and the current available openItems\n */\nexport function createVisibleFlatTree(\n unfilteredFlatTree: UnfilteredFlatTree,\n openItems: ImmutableSet<TreeItemId>,\n): Pick<FlatTree, 'items' | 'getNextNavigableItem'> {\n let visibleItems: FlatTreeItem[] | null = null;\n\n const getNextNavigableItem = (data: TreeNavigationData_unstable): FlatTreeItem | null => {\n const item = unfilteredFlatTree.itemsPerId.get(data.target.id);\n if (!item || !visibleItems) {\n return null;\n }\n switch (data.type) {\n case treeDataTypes.arrowLeft:\n return item.parentId ? unfilteredFlatTree.itemsPerId.get(item.parentId) ?? null : null;\n case treeDataTypes.arrowRight:\n return visibleItems[item.index + 1] ?? null;\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] ?? null;\n case treeDataTypes.arrowUp:\n return visibleItems[item.index - 1] ?? null;\n default:\n return null;\n }\n };\n\n function* makeVisibleItemsGenerator() {\n visibleItems = [];\n for (let index = 0, visibleIndex = 0; index < unfilteredFlatTree.items.length; index++) {\n const item = unfilteredFlatTree.items[index];\n const parent = unfilteredFlatTree.itemsPerId.get(item.parentId ?? flatTreeRootParentId);\n if (!parent) {\n break;\n }\n if (isFlatTreeItemVisible(item, { openItems, unfilteredFlatTree })) {\n item.index = visibleIndex++;\n visibleItems.push({ ...item });\n yield item;\n } else {\n index += parent.childrenSize - 1 + item.childrenSize;\n }\n }\n }\n\n return {\n getNextNavigableItem,\n items: () => {\n return visibleItems || makeVisibleItemsGenerator();\n },\n };\n}\n\nfunction isFlatTreeItemVisible(\n item: FlatTreeItem,\n {\n openItems,\n unfilteredFlatTree: flatTree,\n }: {\n openItems: ImmutableSet<TreeItemId>;\n unfilteredFlatTree: UnfilteredFlatTree;\n },\n) {\n if (item.level === 1) {\n return true;\n }\n while (item.parentId && item.parentId !== flatTreeRootParentId) {\n if (!openItems.has(item.parentId)) {\n return false;\n }\n const parent = flatTree.itemsPerId.get(item.parentId);\n if (!parent) {\n return false;\n }\n item = parent;\n }\n\n return true;\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"names":["count","flattenTreeRecursive_unstable","items","parent","level","flatTreeItems","index","length","subtree","item","flatTreeItem","parentId","id","_a","leaf","undefined","push","flattenTree_unstable"],"sources":["../src/packages/react-components/react-tree/src/utils/flattenTree.ts"],"sourcesContent":["import { FlatTreeItem } from '../hooks/useFlatTreeItems';\nimport { TreeItemProps } from '../TreeItem';\n\nexport type NestedTreeItem = Omit<TreeItemProps, 'subtree'> & {\n subtree?: NestedTreeItem[];\n};\n\nlet count = 1;\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction flattenTreeRecursive_unstable(items: NestedTreeItem[], parent?: FlatTreeItem, level = 1): FlatTreeItem[] {\n const flatTreeItems: FlatTreeItem[] = [];\n for (let index = 0; index < items.length; index++) {\n const { subtree, ...item } = items[index];\n const flatTreeItem: FlatTreeItem = {\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 flatTreeItems.push(flatTreeItem);\n if (subtree !== undefined) {\n flatTreeItems.push(...flattenTreeRecursive_unstable(subtree, flatTreeItem, level + 1));\n }\n }\n return flatTreeItems;\n}\n\n/**\n * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const flattenTree_unstable: (items: NestedTreeItem[]) => FlatTreeItem[] = flattenTreeRecursive_unstable;\n"],"mappings":"AAOA,IAAIA,KAAK,GAAG,CAAC;AAEb;AACA,SAASC,6BAA6BA,CAACC,KAAuB,EAAEC,MAAqB,EAAEC,KAAK,GAAG,CAAC;;EAC9F,MAAMC,aAAa,GAAmB,EAAE;EACxC,KAAK,IAAIC,KAAK,GAAG,CAAC,EAAEA,KAAK,GAAGJ,KAAK,CAACK,MAAM,EAAED,KAAK,EAAE,EAAE;IACjD,MAAM;MAAEE,OAAO;MAAE,GAAGC;IAAI,CAAE,GAAGP,KAAK,CAACI,KAAK,CAAC;IACzC,MAAMI,YAAY,GAAiB;MACjC,YAAY,EAAEN,KAAK;MACnB,eAAe,EAAEE,KAAK,GAAG,CAAC;MAC1B,cAAc,EAAEJ,KAAK,CAACK,MAAM;MAC5BI,QAAQ,EAAER,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAES,EAAE;MACpBA,EAAE,EAAE,CAAAC,EAAA,GAAAJ,IAAI,CAACG,EAAE,cAAAC,EAAA,cAAAA,EAAA,GAAI,oBAAoBb,KAAK,EAAE,EAAE;MAC5Cc,IAAI,EAAEN,OAAO,KAAKO,SAAS;MAC3B,GAAGN;KACJ;IACDJ,aAAa,CAACW,IAAI,CAACN,YAAY,CAAC;IAChC,IAAIF,OAAO,KAAKO,SAAS,EAAE;MACzBV,aAAa,CAACW,IAAI,CAAC,GAAGf,6BAA6B,CAACO,OAAO,EAAEE,YAAY,EAAEN,KAAK,GAAG,CAAC,CAAC,CAAC;;;EAG1F,OAAOC,aAAa;AACtB;AAEA;;;AAGA;AACA,OAAO,MAAMY,oBAAoB,GAAgDhB,6BAA6B"}
1
+ {"version":3,"names":["count","flattenTreeRecursive_unstable","items","parent","level","flatTreeItems","index","length","subtree","item","flatTreeItem","parentId","id","_a","leaf","undefined","push","flattenTree_unstable"],"sources":["../src/packages/react-components/react-tree/src/utils/flattenTree.ts"],"sourcesContent":["import { FlatTreeItemProps } from '../hooks/useFlatTree';\nimport { TreeItemProps } from '../TreeItem';\n\nexport type NestedTreeItem = Omit<TreeItemProps, 'subtree'> & {\n subtree?: NestedTreeItem[];\n};\n\nlet count = 1;\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction flattenTreeRecursive_unstable(\n items: NestedTreeItem[],\n parent?: FlatTreeItemProps,\n level = 1,\n): FlatTreeItemProps[] {\n const flatTreeItems: FlatTreeItemProps[] = [];\n for (let index = 0; index < items.length; index++) {\n const { subtree, ...item } = items[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 flatTreeItems.push(flatTreeItem);\n if (subtree !== undefined) {\n flatTreeItems.push(...flattenTreeRecursive_unstable(subtree, flatTreeItem, level + 1));\n }\n }\n return flatTreeItems;\n}\n\n/**\n * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const flattenTree_unstable: (items: NestedTreeItem[]) => FlatTreeItemProps[] = flattenTreeRecursive_unstable;\n"],"mappings":"AAOA,IAAIA,KAAK,GAAG,CAAC;AAEb;AACA,SAASC,6BAA6BA,CACpCC,KAAuB,EACvBC,MAA0B,EAC1BC,KAAK,GAAG,CAAC;;EAET,MAAMC,aAAa,GAAwB,EAAE;EAC7C,KAAK,IAAIC,KAAK,GAAG,CAAC,EAAEA,KAAK,GAAGJ,KAAK,CAACK,MAAM,EAAED,KAAK,EAAE,EAAE;IACjD,MAAM;MAAEE,OAAO;MAAE,GAAGC;IAAI,CAAE,GAAGP,KAAK,CAACI,KAAK,CAAC;IACzC,MAAMI,YAAY,GAAsB;MACtC,YAAY,EAAEN,KAAK;MACnB,eAAe,EAAEE,KAAK,GAAG,CAAC;MAC1B,cAAc,EAAEJ,KAAK,CAACK,MAAM;MAC5BI,QAAQ,EAAER,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAES,EAAE;MACpBA,EAAE,EAAE,CAAAC,EAAA,GAAAJ,IAAI,CAACG,EAAE,cAAAC,EAAA,cAAAA,EAAA,GAAI,oBAAoBb,KAAK,EAAE,EAAE;MAC5Cc,IAAI,EAAEN,OAAO,KAAKO,SAAS;MAC3B,GAAGN;KACJ;IACDJ,aAAa,CAACW,IAAI,CAACN,YAAY,CAAC;IAChC,IAAIF,OAAO,KAAKO,SAAS,EAAE;MACzBV,aAAa,CAACW,IAAI,CAAC,GAAGf,6BAA6B,CAACO,OAAO,EAAEE,YAAY,EAAEN,KAAK,GAAG,CAAC,CAAC,CAAC;;;EAG1F,OAAOC,aAAa;AACtB;AAEA;;;AAGA;AACA,OAAO,MAAMY,oBAAoB,GAAqDhB,6BAA6B"}
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  const tslib_1 = /*#__PURE__*/require("tslib");
7
- tslib_1.__exportStar(require("./useFlatTreeItems"), exports);
7
+ tslib_1.__exportStar(require("./useFlatTree"), exports);
8
8
  tslib_1.__exportStar(require("./useNestedTreeNavigation"), exports);
9
9
  tslib_1.__exportStar(require("./useOpenItemsState"), exports);
10
10
  //# sourceMappingURL=index.js.map