@fluentui/react-tree 9.0.8 → 9.1.0

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 (15) hide show
  1. package/CHANGELOG.json +68 -11
  2. package/CHANGELOG.md +28 -12
  3. package/dist/index.d.ts +38 -1
  4. package/lib/components/TreeItem/TreeItem.types.js.map +1 -1
  5. package/lib/components/TreeItem/useTreeItem.js +82 -17
  6. package/lib/components/TreeItem/useTreeItem.js.map +1 -1
  7. package/lib/contexts/treeContext.js.map +1 -1
  8. package/lib/hooks/useSubtree.js +1 -2
  9. package/lib/hooks/useSubtree.js.map +1 -1
  10. package/lib/index.js.map +1 -1
  11. package/lib-commonjs/components/TreeItem/useTreeItem.js +82 -17
  12. package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
  13. package/lib-commonjs/hooks/useSubtree.js +1 -2
  14. package/lib-commonjs/hooks/useSubtree.js.map +1 -1
  15. package/package.json +8 -8
package/CHANGELOG.json CHANGED
@@ -2,7 +2,64 @@
2
2
  "name": "@fluentui/react-tree",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 06 Sep 2023 13:27:23 GMT",
5
+ "date": "Tue, 12 Sep 2023 08:48:16 GMT",
6
+ "tag": "@fluentui/react-tree_v9.1.0",
7
+ "version": "9.1.0",
8
+ "comments": {
9
+ "minor": [
10
+ {
11
+ "author": "bernardo.sunderhus@gmail.com",
12
+ "package": "@fluentui/react-tree",
13
+ "commit": "0342bde74ce8d88cfefea0cd5915c5d3b4e74121",
14
+ "comment": "feat: react-tree allows control of individual tree item open state"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-tree",
19
+ "comment": "Bump @fluentui/react-avatar to v9.5.29",
20
+ "commit": "6fa505d282299778ee9c160ab91f2f510e2d4335"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-tree",
25
+ "comment": "Bump @fluentui/react-button to v9.3.38",
26
+ "commit": "6fa505d282299778ee9c160ab91f2f510e2d4335"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-tree",
31
+ "comment": "Bump @fluentui/react-checkbox to v9.1.39",
32
+ "commit": "6fa505d282299778ee9c160ab91f2f510e2d4335"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-tree",
37
+ "comment": "Bump @fluentui/react-portal to v9.3.14",
38
+ "commit": "6fa505d282299778ee9c160ab91f2f510e2d4335"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-tree",
43
+ "comment": "Bump @fluentui/react-radio to v9.1.39",
44
+ "commit": "6fa505d282299778ee9c160ab91f2f510e2d4335"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-tree",
49
+ "comment": "Bump @fluentui/react-tabster to v9.12.9",
50
+ "commit": "6fa505d282299778ee9c160ab91f2f510e2d4335"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-tree",
55
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.7",
56
+ "commit": "6fa505d282299778ee9c160ab91f2f510e2d4335"
57
+ }
58
+ ]
59
+ }
60
+ },
61
+ {
62
+ "date": "Wed, 06 Sep 2023 13:31:31 GMT",
6
63
  "tag": "@fluentui/react-tree_v9.0.8",
7
64
  "version": "9.0.8",
8
65
  "comments": {
@@ -11,61 +68,61 @@
11
68
  "author": "beachball",
12
69
  "package": "@fluentui/react-tree",
13
70
  "comment": "Bump @fluentui/react-aria to v9.3.36",
14
- "commit": "8582884f9000d15185fe7b074c6fde00d84e961c"
71
+ "commit": "52532950407fd4d3664ec6aa337855214233813b"
15
72
  },
16
73
  {
17
74
  "author": "beachball",
18
75
  "package": "@fluentui/react-tree",
19
76
  "comment": "Bump @fluentui/react-avatar to v9.5.28",
20
- "commit": "8582884f9000d15185fe7b074c6fde00d84e961c"
77
+ "commit": "52532950407fd4d3664ec6aa337855214233813b"
21
78
  },
22
79
  {
23
80
  "author": "beachball",
24
81
  "package": "@fluentui/react-tree",
25
82
  "comment": "Bump @fluentui/react-button to v9.3.37",
26
- "commit": "8582884f9000d15185fe7b074c6fde00d84e961c"
83
+ "commit": "52532950407fd4d3664ec6aa337855214233813b"
27
84
  },
28
85
  {
29
86
  "author": "beachball",
30
87
  "package": "@fluentui/react-tree",
31
88
  "comment": "Bump @fluentui/react-checkbox to v9.1.38",
32
- "commit": "8582884f9000d15185fe7b074c6fde00d84e961c"
89
+ "commit": "52532950407fd4d3664ec6aa337855214233813b"
33
90
  },
34
91
  {
35
92
  "author": "beachball",
36
93
  "package": "@fluentui/react-tree",
37
94
  "comment": "Bump @fluentui/react-context-selector to v9.1.34",
38
- "commit": "8582884f9000d15185fe7b074c6fde00d84e961c"
95
+ "commit": "52532950407fd4d3664ec6aa337855214233813b"
39
96
  },
40
97
  {
41
98
  "author": "beachball",
42
99
  "package": "@fluentui/react-tree",
43
100
  "comment": "Bump @fluentui/react-portal to v9.3.13",
44
- "commit": "8582884f9000d15185fe7b074c6fde00d84e961c"
101
+ "commit": "52532950407fd4d3664ec6aa337855214233813b"
45
102
  },
46
103
  {
47
104
  "author": "beachball",
48
105
  "package": "@fluentui/react-tree",
49
106
  "comment": "Bump @fluentui/react-radio to v9.1.38",
50
- "commit": "8582884f9000d15185fe7b074c6fde00d84e961c"
107
+ "commit": "52532950407fd4d3664ec6aa337855214233813b"
51
108
  },
52
109
  {
53
110
  "author": "beachball",
54
111
  "package": "@fluentui/react-tree",
55
112
  "comment": "Bump @fluentui/react-tabster to v9.12.8",
56
- "commit": "8582884f9000d15185fe7b074c6fde00d84e961c"
113
+ "commit": "52532950407fd4d3664ec6aa337855214233813b"
57
114
  },
58
115
  {
59
116
  "author": "beachball",
60
117
  "package": "@fluentui/react-tree",
61
118
  "comment": "Bump @fluentui/react-utilities to v9.13.3",
62
- "commit": "8582884f9000d15185fe7b074c6fde00d84e961c"
119
+ "commit": "52532950407fd4d3664ec6aa337855214233813b"
63
120
  },
64
121
  {
65
122
  "author": "beachball",
66
123
  "package": "@fluentui/react-tree",
67
124
  "comment": "Bump @fluentui/react-jsx-runtime to v9.0.6",
68
- "commit": "8582884f9000d15185fe7b074c6fde00d84e961c"
125
+ "commit": "52532950407fd4d3664ec6aa337855214233813b"
69
126
  }
70
127
  ]
71
128
  }
package/CHANGELOG.md CHANGED
@@ -1,26 +1,42 @@
1
1
  # Change Log - @fluentui/react-tree
2
2
 
3
- This log was last generated on Wed, 06 Sep 2023 13:27:23 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 12 Sep 2023 08:48:16 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.1.0)
8
+
9
+ Tue, 12 Sep 2023 08:48:16 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.8..@fluentui/react-tree_v9.1.0)
11
+
12
+ ### Minor changes
13
+
14
+ - feat: react-tree allows control of individual tree item open state ([PR #29081](https://github.com/microsoft/fluentui/pull/29081) by bernardo.sunderhus@gmail.com)
15
+ - Bump @fluentui/react-avatar to v9.5.29 ([PR #29129](https://github.com/microsoft/fluentui/pull/29129) by beachball)
16
+ - Bump @fluentui/react-button to v9.3.38 ([PR #29129](https://github.com/microsoft/fluentui/pull/29129) by beachball)
17
+ - Bump @fluentui/react-checkbox to v9.1.39 ([PR #29129](https://github.com/microsoft/fluentui/pull/29129) by beachball)
18
+ - Bump @fluentui/react-portal to v9.3.14 ([PR #29129](https://github.com/microsoft/fluentui/pull/29129) by beachball)
19
+ - Bump @fluentui/react-radio to v9.1.39 ([PR #29129](https://github.com/microsoft/fluentui/pull/29129) by beachball)
20
+ - Bump @fluentui/react-tabster to v9.12.9 ([PR #29129](https://github.com/microsoft/fluentui/pull/29129) by beachball)
21
+ - Bump @fluentui/react-jsx-runtime to v9.0.7 ([PR #29129](https://github.com/microsoft/fluentui/pull/29129) by beachball)
22
+
7
23
  ## [9.0.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.8)
8
24
 
9
- Wed, 06 Sep 2023 13:27:23 GMT
25
+ Wed, 06 Sep 2023 13:31:31 GMT
10
26
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.7..@fluentui/react-tree_v9.0.8)
11
27
 
12
28
  ### Patches
13
29
 
14
- - Bump @fluentui/react-aria to v9.3.36 ([PR #28988](https://github.com/microsoft/fluentui/pull/28988) by beachball)
15
- - Bump @fluentui/react-avatar to v9.5.28 ([PR #28988](https://github.com/microsoft/fluentui/pull/28988) by beachball)
16
- - Bump @fluentui/react-button to v9.3.37 ([PR #28988](https://github.com/microsoft/fluentui/pull/28988) by beachball)
17
- - Bump @fluentui/react-checkbox to v9.1.38 ([PR #28988](https://github.com/microsoft/fluentui/pull/28988) by beachball)
18
- - Bump @fluentui/react-context-selector to v9.1.34 ([PR #28988](https://github.com/microsoft/fluentui/pull/28988) by beachball)
19
- - Bump @fluentui/react-portal to v9.3.13 ([PR #28988](https://github.com/microsoft/fluentui/pull/28988) by beachball)
20
- - Bump @fluentui/react-radio to v9.1.38 ([PR #28988](https://github.com/microsoft/fluentui/pull/28988) by beachball)
21
- - Bump @fluentui/react-tabster to v9.12.8 ([PR #28988](https://github.com/microsoft/fluentui/pull/28988) by beachball)
22
- - Bump @fluentui/react-utilities to v9.13.3 ([PR #28988](https://github.com/microsoft/fluentui/pull/28988) by beachball)
23
- - Bump @fluentui/react-jsx-runtime to v9.0.6 ([PR #28988](https://github.com/microsoft/fluentui/pull/28988) by beachball)
30
+ - Bump @fluentui/react-aria to v9.3.36 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
31
+ - Bump @fluentui/react-avatar to v9.5.28 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
32
+ - Bump @fluentui/react-button to v9.3.37 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
33
+ - Bump @fluentui/react-checkbox to v9.1.38 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
34
+ - Bump @fluentui/react-context-selector to v9.1.34 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
35
+ - Bump @fluentui/react-portal to v9.3.13 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
36
+ - Bump @fluentui/react-radio to v9.1.38 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
37
+ - Bump @fluentui/react-tabster to v9.12.8 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
38
+ - Bump @fluentui/react-utilities to v9.13.3 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
39
+ - Bump @fluentui/react-jsx-runtime to v9.0.6 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
24
40
 
25
41
  ## [9.0.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.7)
26
42
 
package/dist/index.d.ts CHANGED
@@ -514,6 +514,29 @@ export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> &
514
514
 
515
515
  export declare const treeItemLevelToken: "--fluent-TreeItem--level";
516
516
 
517
+ export declare type TreeItemOpenChangeData = {
518
+ open: boolean;
519
+ value: TreeItemValue;
520
+ target: HTMLElement;
521
+ } & ({
522
+ event: React_2.MouseEvent<HTMLElement>;
523
+ type: 'ExpandIconClick';
524
+ } | {
525
+ event: React_2.MouseEvent<HTMLElement>;
526
+ type: 'Click';
527
+ } | {
528
+ event: React_2.KeyboardEvent<HTMLElement>;
529
+ type: typeof Enter;
530
+ } | {
531
+ event: React_2.KeyboardEvent<HTMLElement>;
532
+ type: typeof ArrowRight;
533
+ } | {
534
+ event: React_2.KeyboardEvent<HTMLElement>;
535
+ type: typeof ArrowLeft;
536
+ });
537
+
538
+ export declare type TreeItemOpenChangeEvent = TreeItemOpenChangeData['event'];
539
+
517
540
  /**
518
541
  * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.
519
542
  * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.
@@ -564,14 +587,28 @@ export declare type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {
564
587
  * A tree item can be a leaf or a branch
565
588
  */
566
589
  itemType: TreeItemType;
590
+ /**
591
+ * A tree item should have a well defined value, in case one is not provided by the user by this prop
592
+ * one will be inferred internally.
593
+ */
567
594
  value?: TreeItemValue;
595
+ /**
596
+ * Whether the tree item is in an open state
597
+ *
598
+ * This overrides the open value provided by the root tree,
599
+ * and ensure control of the visibility of the tree item per tree item.
600
+ *
601
+ * NOTE: controlling the open state of a tree item will not affect the open state of its children
602
+ */
603
+ open?: boolean;
604
+ onOpenChange?: (e: TreeItemOpenChangeEvent, data: TreeItemOpenChangeData) => void;
568
605
  };
569
606
 
570
607
  export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | undefined> & React_2.FC<React_2.ProviderProps<TreeItemContextValue | undefined>>;
571
608
 
572
609
  declare type TreeItemRequest = {
573
610
  itemType: TreeItemType;
574
- } & (OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'> | TreeNavigationData_unstable | OmitWithoutExpanding<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'>);
611
+ } & (OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'> | OmitWithoutExpanding<TreeNavigationData_unstable, 'preventInternals'> | OmitWithoutExpanding<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'>);
575
612
 
576
613
  export declare type TreeItemSlots = {
577
614
  root: Slot<ExtractSlotProps<Slot<'div'> & {
package/lib/components/TreeItem/TreeItem.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n};\n\nexport type TreeItemValue = string | number;\n\nexport type TreeItemContextValues = {\n treeItem: TreeItemContextValue;\n};\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n /**\n * A tree item can be a leaf or a branch\n */\n itemType: TreeItemType;\n value?: TreeItemValue;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> &\n TreeItemContextValue & {\n level: number;\n itemType: TreeItemType;\n };\n"],"names":["React"],"mappings":"AAGA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["TreeItem.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ArrowLeft, ArrowRight, Enter } from '@fluentui/keyboard-keys';\nimport type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport type { treeItemLevelToken } from '../../utils/tokens';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n};\n\nexport type TreeItemValue = string | number;\n\nexport type TreeItemContextValues = {\n treeItem: TreeItemContextValue;\n};\n\nexport type TreeItemOpenChangeData = {\n open: boolean;\n value: TreeItemValue;\n target: HTMLElement;\n} & (\n | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeItemOpenChangeEvent = TreeItemOpenChangeData['event'];\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n /**\n * A tree item can be a leaf or a branch\n */\n itemType: TreeItemType;\n /**\n * A tree item should have a well defined value, in case one is not provided by the user by this prop\n * one will be inferred internally.\n */\n value?: TreeItemValue;\n /**\n * Whether the tree item is in an open state\n *\n * This overrides the open value provided by the root tree,\n * and ensure control of the visibility of the tree item per tree item.\n *\n * NOTE: controlling the open state of a tree item will not affect the open state of its children\n */\n open?: boolean;\n onOpenChange?: (e: TreeItemOpenChangeEvent, data: TreeItemOpenChangeData) => void;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> &\n TreeItemContextValue & {\n level: number;\n itemType: TreeItemType;\n };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
package/lib/components/TreeItem/useTreeItem.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import * as React from 'react';
2
+ import * as ReactDOM from 'react-dom';
2
3
  import { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';
3
4
  import { elementContains } from '@fluentui/react-portal';
4
- import { useTreeContext_unstable } from '../../contexts/index';
5
- import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
6
5
  import { Space } from '@fluentui/keyboard-keys';
7
6
  import { treeDataTypes } from '../../utils/tokens';
7
+ import { useTreeContext_unstable } from '../../contexts/index';
8
+ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
8
9
  /**
9
10
  * Create the state required to render TreeItem.
10
11
  *
@@ -15,12 +16,12 @@ import { treeDataTypes } from '../../utils/tokens';
15
16
  * @param ref - reference to root HTMLElement of TreeItem
16
17
  */ export function useTreeItem_unstable(props, ref) {
17
18
  var _props_value;
19
+ const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
18
20
  const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);
19
21
  // note, if the value is not externally provided,
20
22
  // then selection and expansion will not work properly
21
23
  const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
22
24
  const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
23
- const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
24
25
  const [isActionsVisible, setActionsVisible] = React.useState(false);
25
26
  const [isAsideVisible, setAsideVisible] = React.useState(true);
26
27
  const handleActionsRef = React.useCallback((actionsElement)=>{
@@ -31,7 +32,8 @@ import { treeDataTypes } from '../../utils/tokens';
31
32
  const layoutRef = React.useRef(null);
32
33
  const subtreeRef = React.useRef(null);
33
34
  const selectionRef = React.useRef(null);
34
- const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));
35
+ var _props_open;
36
+ const open = useTreeContext_unstable((ctx)=>(_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value));
35
37
  const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
36
38
  var _ctx_checkedItems_get;
37
39
  const checked = useTreeContext_unstable((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);
@@ -53,13 +55,21 @@ import { treeDataTypes } from '../../utils/tokens';
53
55
  if (isEventFromSelection) {
54
56
  return;
55
57
  }
56
- const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);
57
- requestTreeResponse({
58
- event,
59
- value,
60
- itemType,
61
- target: event.currentTarget,
62
- type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click
58
+ const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);
59
+ ReactDOM.unstable_batchedUpdates(()=>{
60
+ var _props_onOpenChange, _props;
61
+ const data = {
62
+ event,
63
+ value,
64
+ open: !open,
65
+ target: event.currentTarget,
66
+ type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click
67
+ };
68
+ (_props_onOpenChange = (_props = props).onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(_props, event, data);
69
+ requestTreeResponse({
70
+ ...data,
71
+ itemType
72
+ });
63
73
  });
64
74
  });
65
75
  const handleKeyDown = useEventCallback((event)=>{
@@ -77,19 +87,74 @@ import { treeDataTypes } from '../../utils/tokens';
77
87
  event.preventDefault();
78
88
  }
79
89
  return;
90
+ case treeDataTypes.Enter:
91
+ {
92
+ var _props_onOpenChange, _props;
93
+ const data = {
94
+ value,
95
+ event,
96
+ open: !open,
97
+ type: event.key,
98
+ target: event.currentTarget
99
+ };
100
+ (_props_onOpenChange = (_props = props).onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(_props, event, data);
101
+ return requestTreeResponse({
102
+ ...data,
103
+ itemType
104
+ });
105
+ }
80
106
  case treeDataTypes.End:
81
107
  case treeDataTypes.Home:
82
- case treeDataTypes.Enter:
83
108
  case treeDataTypes.ArrowUp:
84
109
  case treeDataTypes.ArrowDown:
85
- case treeDataTypes.ArrowLeft:
86
- case treeDataTypes.ArrowRight:
87
110
  return requestTreeResponse({
88
111
  event,
89
- target: event.currentTarget,
90
112
  value,
91
113
  itemType,
92
- type: event.key
114
+ type: event.key,
115
+ target: event.currentTarget
116
+ });
117
+ case treeDataTypes.ArrowLeft:
118
+ {
119
+ // do not navigate to parent if the item is on the top level
120
+ if (level === 1 && !open) {
121
+ return;
122
+ }
123
+ const data = {
124
+ value,
125
+ event,
126
+ open: !open,
127
+ type: event.key,
128
+ target: event.currentTarget
129
+ };
130
+ if (open) {
131
+ var _props_onOpenChange1, _props1;
132
+ (_props_onOpenChange1 = (_props1 = props).onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(_props1, event, data);
133
+ }
134
+ return requestTreeResponse({
135
+ ...data,
136
+ itemType
137
+ });
138
+ }
139
+ case treeDataTypes.ArrowRight:
140
+ // do not navigate or open if the item is a leaf
141
+ if (itemType === 'leaf') {
142
+ return;
143
+ }
144
+ const data = {
145
+ value,
146
+ event,
147
+ open: !open,
148
+ type: event.key,
149
+ target: event.currentTarget
150
+ };
151
+ if (!open) {
152
+ var _props_onOpenChange2, _props2;
153
+ (_props_onOpenChange2 = (_props2 = props).onOpenChange) === null || _props_onOpenChange2 === void 0 ? void 0 : _props_onOpenChange2.call(_props2, event, data);
154
+ }
155
+ return requestTreeResponse({
156
+ ...data,
157
+ itemType
93
158
  });
94
159
  }
95
160
  const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
@@ -154,11 +219,11 @@ import { treeDataTypes } from '../../utils/tokens';
154
219
  isActionsVisible,
155
220
  root: slot.always(getNativeElementProps(as, {
156
221
  tabIndex: -1,
222
+ [dataTreeItemValueAttrName]: value,
157
223
  ...rest,
158
224
  ref,
159
225
  role: 'treeitem',
160
226
  'aria-level': level,
161
- [dataTreeItemValueAttrName]: value,
162
227
  'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
163
228
  // aria-selected is required according to WAI-ARIA spec
164
229
  // https://www.w3.org/TR/wai-aria-1.1/#treeitem
package/lib/components/TreeItem/useTreeItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n setAsideVisible(actionsElement === null);\n }, []);\n\n const actionsRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLDivElement>(null);\n const layoutRef = React.useRef<HTMLDivElement>(null);\n const subtreeRef = React.useRef<HTMLDivElement>(null);\n const selectionRef = React.useRef<HTMLInputElement>(null);\n\n const open = useTreeContext_unstable(ctx => ctx.openItems.has(value));\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n if (isEventFromSelection) {\n return;\n }\n const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n requestTreeResponse({\n event,\n value,\n itemType,\n target: event.currentTarget,\n type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n });\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n // Ignore keyboard events that do not originate from the current tree item.\n if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n return;\n }\n switch (event.key) {\n case Space:\n if (selectionMode !== 'none') {\n selectionRef.current?.click();\n event.preventDefault();\n }\n return;\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.Enter:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n case treeDataTypes.ArrowLeft:\n case treeDataTypes.ArrowRight:\n return requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: event.key });\n }\n const isTypeAheadCharacter =\n event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: treeDataTypes.TypeAhead });\n }\n });\n\n const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n if (!isTargetFromSubtree) {\n setActionsVisible(true);\n }\n });\n\n const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n const isRelatedTargetFromActions = Boolean(\n actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n );\n if (isRelatedTargetFromActions) {\n return setActionsVisible(true);\n }\n if (!isTargetFromSubtree) {\n return setActionsVisible(false);\n }\n });\n\n const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked,\n });\n });\n\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n itemType,\n level,\n components: {\n root: 'div',\n },\n isAsideVisible,\n isActionsVisible,\n root: slot.always(\n getNativeElementProps(as, {\n tabIndex: -1,\n ...rest,\n ref,\n role: 'treeitem',\n 'aria-level': level,\n [dataTreeItemValueAttrName]: value,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n // aria-selected is required according to WAI-ARIA spec\n // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n // Casting: when selectionMode is 'single', checked is a boolean\n 'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n 'aria-expanded': itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: handleActionsVisible,\n onFocus: handleActionsVisible,\n onMouseOut: handleActionsInvisible,\n onBlur: handleActionsInvisible,\n onChange: handleChange,\n }),\n { elementType: 'div' },\n ),\n };\n}\n"],"names":["React","getNativeElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","useTreeContext_unstable","dataTreeItemValueAttrName","Space","treeDataTypes","useTreeItem_unstable","props","ref","contextLevel","ctx","level","value","toString","onClick","onKeyDown","as","itemType","rest","requestTreeResponse","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isFromExpandIcon","currentTarget","type","ExpandIconClick","Click","handleKeyDown","key","click","preventDefault","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","components","root","always","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType"],"mappings":"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"}
1
+ {"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n setAsideVisible(actionsElement === null);\n }, []);\n\n const actionsRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLDivElement>(null);\n const layoutRef = React.useRef<HTMLDivElement>(null);\n const subtreeRef = React.useRef<HTMLDivElement>(null);\n const selectionRef = React.useRef<HTMLInputElement>(null);\n\n const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n if (isEventFromSelection) {\n return;\n }\n const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n ReactDOM.unstable_batchedUpdates(() => {\n const data = {\n event,\n value,\n open: !open,\n target: event.currentTarget,\n type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n } as const;\n props.onOpenChange?.(event, data);\n requestTreeResponse({\n ...data,\n itemType,\n });\n });\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n // Ignore keyboard events that do not originate from the current tree item.\n if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n return;\n }\n switch (event.key) {\n case Space:\n if (selectionMode !== 'none') {\n selectionRef.current?.click();\n event.preventDefault();\n }\n return;\n case treeDataTypes.Enter: {\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget,\n } as const;\n props.onOpenChange?.(event, data);\n return requestTreeResponse({\n ...data,\n itemType,\n });\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n return requestTreeResponse({\n event,\n value,\n itemType,\n type: event.key,\n target: event.currentTarget,\n });\n case treeDataTypes.ArrowLeft: {\n // do not navigate to parent if the item is on the top level\n if (level === 1 && !open) {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget,\n } as const;\n if (open) {\n props.onOpenChange?.(event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n });\n }\n case treeDataTypes.ArrowRight:\n // do not navigate or open if the item is a leaf\n if (itemType === 'leaf') {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget,\n } as const;\n if (!open) {\n props.onOpenChange?.(event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n });\n }\n const isTypeAheadCharacter =\n event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({\n event,\n target: event.currentTarget,\n value,\n itemType,\n type: treeDataTypes.TypeAhead,\n });\n }\n });\n\n const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n if (!isTargetFromSubtree) {\n setActionsVisible(true);\n }\n });\n\n const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n const isRelatedTargetFromActions = Boolean(\n actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n );\n if (isRelatedTargetFromActions) {\n return setActionsVisible(true);\n }\n if (!isTargetFromSubtree) {\n return setActionsVisible(false);\n }\n });\n\n const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked,\n });\n });\n\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n itemType,\n level,\n components: {\n root: 'div',\n },\n isAsideVisible,\n isActionsVisible,\n root: slot.always(\n getNativeElementProps(as, {\n tabIndex: -1,\n [dataTreeItemValueAttrName]: value,\n ...rest,\n ref,\n role: 'treeitem',\n 'aria-level': level,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n // aria-selected is required according to WAI-ARIA spec\n // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n // Casting: when selectionMode is 'single', checked is a boolean\n 'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n 'aria-expanded': itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: handleActionsVisible,\n onFocus: handleActionsVisible,\n onMouseOut: handleActionsInvisible,\n onBlur: handleActionsInvisible,\n onChange: handleChange,\n }),\n { elementType: 'div' },\n ),\n };\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","Space","treeDataTypes","useTreeContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","requestTreeResponse","ctx","contextLevel","level","value","toString","onClick","onKeyDown","as","itemType","rest","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","components","root","always","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType"],"mappings":"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"}
package/lib/contexts/treeContext.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { SelectionMode } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n level: number;\n selectionMode: 'none' | SelectionMode;\n appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n size: 'small' | 'medium';\n openItems: ImmutableSet<TreeItemValue>;\n checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;\n /**\n * requests root Tree component to respond to some tree item event,\n */\n requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n | OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'>\n | TreeNavigationData_unstable\n | OmitWithoutExpanding<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'>\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n level: 0,\n selectionMode: 'none',\n openItems: ImmutableSet.empty,\n checkedItems: ImmutableMap.empty,\n requestTreeResponse: noop,\n appearance: 'subtle',\n size: 'medium',\n};\n\nfunction noop() {\n /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ImmutableSet","ImmutableMap","defaultContextValue","level","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAG/G,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;AAyBrD,MAAMC,sBAAwC;IAC5CC,OAAO;IACPC,eAAe;IACfC,WAAWL,aAAaM,KAAK;IAC7BC,cAAcN,aAAaK,KAAK;IAChCE,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF;AACP,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDd,cAChEe,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,YAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzClB,mBAAmBa,aAAa,CAACM,MAAMhB,mBAAmB,GAAKe,SAASC,MAAM"}
1
+ {"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { SelectionMode } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n level: number;\n selectionMode: 'none' | SelectionMode;\n appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n size: 'small' | 'medium';\n openItems: ImmutableSet<TreeItemValue>;\n checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;\n /**\n * requests root Tree component to respond to some tree item event,\n */\n requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n | OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'>\n | OmitWithoutExpanding<TreeNavigationData_unstable, 'preventInternals'>\n | OmitWithoutExpanding<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'>\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n level: 0,\n selectionMode: 'none',\n openItems: ImmutableSet.empty,\n checkedItems: ImmutableMap.empty,\n requestTreeResponse: noop,\n appearance: 'subtle',\n size: 'medium',\n};\n\nfunction noop() {\n /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ImmutableSet","ImmutableMap","defaultContextValue","level","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAG/G,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;AAyBrD,MAAMC,sBAAwC;IAC5CC,OAAO;IACPC,eAAe;IACfC,WAAWL,aAAaM,KAAK;IAC7BC,cAAcN,aAAaK,KAAK;IAChCE,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF;AACP,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDd,cAChEe,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,YAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzClB,mBAAmBa,aAAa,CAACM,MAAMhB,mBAAmB,GAAKe,SAASC,MAAM"}
package/lib/hooks/useSubtree.js CHANGED
@@ -10,14 +10,13 @@ import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-util
10
10
  const contextAppearance = useTreeContext_unstable((ctx)=>ctx.appearance);
11
11
  const contextSize = useTreeContext_unstable((ctx)=>ctx.size);
12
12
  const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);
13
- const value = useTreeItemContext_unstable((ctx)=>ctx.value);
14
13
  const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'subtle', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
15
14
  const parentLevel = useTreeContext_unstable((ctx)=>ctx.level);
16
15
  const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
17
16
  const openItems = useTreeContext_unstable((ctx)=>ctx.openItems);
18
17
  const checkedItems = useTreeContext_unstable((ctx)=>ctx.checkedItems);
19
18
  const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
20
- const open = openItems.has(value);
19
+ const open = useTreeItemContext_unstable((ctx)=>ctx.open);
21
20
  return {
22
21
  open,
23
22
  components: {
package/lib/hooks/useSubtree.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(props: Pick<TreeProps, 'appearance' | 'size'>, ref: React.Ref<HTMLElement>): TreeState {\n const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);\n const contextSize = useTreeContext_unstable(ctx => ctx.size);\n const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n const value = useTreeItemContext_unstable(ctx => ctx.value);\n\n const { appearance = contextAppearance ?? 'subtle', size = contextSize ?? 'medium' } = props;\n\n const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const openItems = useTreeContext_unstable(ctx => ctx.openItems);\n const checkedItems = useTreeContext_unstable(ctx => ctx.checkedItems);\n const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n const open = openItems.has(value);\n\n return {\n open,\n components: {\n root: 'div',\n },\n appearance,\n size,\n selectionMode,\n level: parentLevel + 1,\n root: slot.always(\n getNativeElementProps('div', {\n ref: useMergedRefs(ref, subtreeRef),\n role: 'group',\n ...props,\n }),\n { elementType: 'div' },\n ),\n openItems,\n checkedItems,\n requestTreeResponse,\n };\n}\n"],"names":["React","useTreeContext_unstable","useTreeItemContext_unstable","getNativeElementProps","useMergedRefs","slot","useSubtree","props","ref","contextAppearance","ctx","appearance","contextSize","size","subtreeRef","value","parentLevel","level","selectionMode","openItems","checkedItems","requestTreeResponse","open","has","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,oBAAoB;AACzF,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAEvF;;;;;CAKC,GACD,OAAO,SAASC,WAAWC,KAA6C,EAAEC,GAA2B;IACnG,MAAMC,oBAAoBR,wBAAwBS,CAAAA,MAAOA,IAAIC,UAAU;IACvE,MAAMC,cAAcX,wBAAwBS,CAAAA,MAAOA,IAAIG,IAAI;IAC3D,MAAMC,aAAaZ,4BAA4BQ,CAAAA,MAAOA,IAAII,UAAU;IACpE,MAAMC,QAAQb,4BAA4BQ,CAAAA,MAAOA,IAAIK,KAAK;IAE1D,MAAM,EAAEJ,aAAaF,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAAEI,OAAOD,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGL;IAEvF,MAAMS,cAAcf,wBAAwBS,CAAAA,MAAOA,IAAIO,KAAK;IAC5D,MAAMC,gBAAgBjB,wBAAwBS,CAAAA,MAAOA,IAAIQ,aAAa;IACtE,MAAMC,YAAYlB,wBAAwBS,CAAAA,MAAOA,IAAIS,SAAS;IAC9D,MAAMC,eAAenB,wBAAwBS,CAAAA,MAAOA,IAAIU,YAAY;IACpE,MAAMC,sBAAsBpB,wBAAwBS,CAAAA,MAAOA,IAAIW,mBAAmB;IAElF,MAAMC,OAAOH,UAAUI,GAAG,CAACR;IAE3B,OAAO;QACLO;QACAE,YAAY;YACVC,MAAM;QACR;QACAd;QACAE;QACAK;QACAD,OAAOD,cAAc;QACrBS,MAAMpB,KAAKqB,MAAM,CACfvB,sBAAsB,OAAO;YAC3BK,KAAKJ,cAAcI,KAAKM;YACxBa,MAAM;YACN,GAAGpB,KAAK;QACV,IACA;YAAEqB,aAAa;QAAM;QAEvBT;QACAC;QACAC;IACF;AACF"}
1
+ {"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(props: Pick<TreeProps, 'appearance' | 'size'>, ref: React.Ref<HTMLElement>): TreeState {\n const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);\n const contextSize = useTreeContext_unstable(ctx => ctx.size);\n const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n const { appearance = contextAppearance ?? 'subtle', size = contextSize ?? 'medium' } = props;\n\n const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const openItems = useTreeContext_unstable(ctx => ctx.openItems);\n const checkedItems = useTreeContext_unstable(ctx => ctx.checkedItems);\n const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n return {\n open,\n components: {\n root: 'div',\n },\n appearance,\n size,\n selectionMode,\n level: parentLevel + 1,\n root: slot.always(\n getNativeElementProps('div', {\n ref: useMergedRefs(ref, subtreeRef),\n role: 'group',\n ...props,\n }),\n { elementType: 'div' },\n ),\n openItems,\n checkedItems,\n requestTreeResponse,\n };\n}\n"],"names":["React","useTreeContext_unstable","useTreeItemContext_unstable","getNativeElementProps","useMergedRefs","slot","useSubtree","props","ref","contextAppearance","ctx","appearance","contextSize","size","subtreeRef","parentLevel","level","selectionMode","openItems","checkedItems","requestTreeResponse","open","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,oBAAoB;AACzF,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAEvF;;;;;CAKC,GACD,OAAO,SAASC,WAAWC,KAA6C,EAAEC,GAA2B;IACnG,MAAMC,oBAAoBR,wBAAwBS,CAAAA,MAAOA,IAAIC,UAAU;IACvE,MAAMC,cAAcX,wBAAwBS,CAAAA,MAAOA,IAAIG,IAAI;IAC3D,MAAMC,aAAaZ,4BAA4BQ,CAAAA,MAAOA,IAAII,UAAU;IAEpE,MAAM,EAAEH,aAAaF,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAAEI,OAAOD,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGL;IAEvF,MAAMQ,cAAcd,wBAAwBS,CAAAA,MAAOA,IAAIM,KAAK;IAC5D,MAAMC,gBAAgBhB,wBAAwBS,CAAAA,MAAOA,IAAIO,aAAa;IACtE,MAAMC,YAAYjB,wBAAwBS,CAAAA,MAAOA,IAAIQ,SAAS;IAC9D,MAAMC,eAAelB,wBAAwBS,CAAAA,MAAOA,IAAIS,YAAY;IACpE,MAAMC,sBAAsBnB,wBAAwBS,CAAAA,MAAOA,IAAIU,mBAAmB;IAElF,MAAMC,OAAOnB,4BAA4BQ,CAAAA,MAAOA,IAAIW,IAAI;IAExD,OAAO;QACLA;QACAC,YAAY;YACVC,MAAM;QACR;QACAZ;QACAE;QACAI;QACAD,OAAOD,cAAc;QACrBQ,MAAMlB,KAAKmB,MAAM,CACfrB,sBAAsB,OAAO;YAC3BK,KAAKJ,cAAcI,KAAKM;YACxBW,MAAM;YACN,GAAGlB,KAAK;QACV,IACA;YAAEmB,aAAa;QAAM;QAEvBR;QACAC;QACAC;IACF;AACF"}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"sourcesContent":["export {\n Tree,\n treeClassNames,\n useTree_unstable,\n useTreeStyles_unstable,\n useTreeContextValues_unstable,\n renderTree_unstable,\n} from './Tree';\n\nexport type {\n TreeSlots,\n TreeProps,\n TreeState,\n TreeContextValues,\n TreeOpenChangeData,\n TreeSelectionValue,\n TreeOpenChangeEvent,\n TreeCheckedChangeData,\n TreeCheckedChangeEvent,\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n} from './Tree';\n\nexport {\n FlatTree,\n flatTreeClassNames,\n useFlatTree_unstable,\n useFlatTreeStyles_unstable,\n useFlatTreeContextValues_unstable,\n renderFlatTree_unstable,\n useHeadlessFlatTree_unstable,\n} from './FlatTree';\n\nexport type {\n FlatTreeSlots,\n FlatTreeProps,\n FlatTreeState,\n HeadlessFlatTree,\n HeadlessFlatTreeItem,\n HeadlessFlatTreeOptions,\n HeadlessFlatTreeItemProps,\n} from './FlatTree';\n\nexport { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';\nexport type { TreeContextValue, TreeItemContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport {\n TreeItem,\n treeItemClassNames,\n renderTreeItem_unstable,\n useTreeItemStyles_unstable,\n useTreeItemContextValues_unstable,\n useTreeItem_unstable,\n} from './TreeItem';\nexport type { TreeItemProps, TreeItemState, TreeItemSlots, TreeItemValue } 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 { flattenTree_unstable } from './utils/flattenTree';\nexport type { FlattenTreeItem } from './utils/flattenTree';\n"],"names":["Tree","treeClassNames","useTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","renderTree_unstable","FlatTree","flatTreeClassNames","useFlatTree_unstable","useFlatTreeStyles_unstable","useFlatTreeContextValues_unstable","renderFlatTree_unstable","useHeadlessFlatTree_unstable","TreeProvider","useTreeContext_unstable","useTreeItemContext_unstable","TreeItemProvider","treeItemLevelToken","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","useTreeItem_unstable","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","flattenTree_unstable"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,gBAAgB,EAChBC,sBAAsB,EACtBC,6BAA6B,EAC7BC,mBAAmB,QACd,SAAS;AAgBhB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,oBAAoB,EACpBC,0BAA0B,EAC1BC,iCAAiC,EACjCC,uBAAuB,EACvBC,4BAA4B,QACvB,aAAa;AAYpB,SAASC,YAAY,EAAEC,uBAAuB,EAAEC,2BAA2B,EAAEC,gBAAgB,QAAQ,aAAa;AAGlH,SAASC,kBAAkB,QAAQ,iBAAiB;AAEpD,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,iCAAiC,EACjCC,oBAAoB,QACf,aAAa;AAGpB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B,0BAA0B;AAOjC,SAASC,oBAAoB,QAAQ,sBAAsB"}
1
+ {"version":3,"sources":["index.ts"],"sourcesContent":["export {\n Tree,\n treeClassNames,\n useTree_unstable,\n useTreeStyles_unstable,\n useTreeContextValues_unstable,\n renderTree_unstable,\n} from './Tree';\n\nexport type {\n TreeSlots,\n TreeProps,\n TreeState,\n TreeContextValues,\n TreeOpenChangeData,\n TreeSelectionValue,\n TreeOpenChangeEvent,\n TreeCheckedChangeData,\n TreeCheckedChangeEvent,\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n} from './Tree';\n\nexport {\n FlatTree,\n flatTreeClassNames,\n useFlatTree_unstable,\n useFlatTreeStyles_unstable,\n useFlatTreeContextValues_unstable,\n renderFlatTree_unstable,\n useHeadlessFlatTree_unstable,\n} from './FlatTree';\n\nexport type {\n FlatTreeSlots,\n FlatTreeProps,\n FlatTreeState,\n HeadlessFlatTree,\n HeadlessFlatTreeItem,\n HeadlessFlatTreeOptions,\n HeadlessFlatTreeItemProps,\n} from './FlatTree';\n\nexport { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';\nexport type { TreeContextValue, TreeItemContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport {\n TreeItem,\n treeItemClassNames,\n renderTreeItem_unstable,\n useTreeItemStyles_unstable,\n useTreeItemContextValues_unstable,\n useTreeItem_unstable,\n} from './TreeItem';\nexport type {\n TreeItemProps,\n TreeItemState,\n TreeItemSlots,\n TreeItemValue,\n TreeItemOpenChangeData,\n TreeItemOpenChangeEvent,\n} 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 { flattenTree_unstable } from './utils/flattenTree';\nexport type { FlattenTreeItem } from './utils/flattenTree';\n"],"names":["Tree","treeClassNames","useTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","renderTree_unstable","FlatTree","flatTreeClassNames","useFlatTree_unstable","useFlatTreeStyles_unstable","useFlatTreeContextValues_unstable","renderFlatTree_unstable","useHeadlessFlatTree_unstable","TreeProvider","useTreeContext_unstable","useTreeItemContext_unstable","TreeItemProvider","treeItemLevelToken","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","useTreeItem_unstable","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","flattenTree_unstable"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,gBAAgB,EAChBC,sBAAsB,EACtBC,6BAA6B,EAC7BC,mBAAmB,QACd,SAAS;AAgBhB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,oBAAoB,EACpBC,0BAA0B,EAC1BC,iCAAiC,EACjCC,uBAAuB,EACvBC,4BAA4B,QACvB,aAAa;AAYpB,SAASC,YAAY,EAAEC,uBAAuB,EAAEC,2BAA2B,EAAEC,gBAAgB,QAAQ,aAAa;AAGlH,SAASC,kBAAkB,QAAQ,iBAAiB;AAEpD,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,iCAAiC,EACjCC,oBAAoB,QACf,aAAa;AAUpB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B,0BAA0B;AAOjC,SAASC,oBAAoB,QAAQ,sBAAsB"}
package/lib-commonjs/components/TreeItem/useTreeItem.js CHANGED
@@ -10,20 +10,21 @@ Object.defineProperty(exports, "useTreeItem_unstable", {
10
10
  });
11
11
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
12
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
+ const _reactdom = /*#__PURE__*/ _interop_require_wildcard._(require("react-dom"));
13
14
  const _reactutilities = require("@fluentui/react-utilities");
14
15
  const _reactportal = require("@fluentui/react-portal");
15
- const _index = require("../../contexts/index");
16
- const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromElement");
17
16
  const _keyboardkeys = require("@fluentui/keyboard-keys");
18
17
  const _tokens = require("../../utils/tokens");
18
+ const _index = require("../../contexts/index");
19
+ const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromElement");
19
20
  function useTreeItem_unstable(props, ref) {
20
21
  var _props_value;
22
+ const requestTreeResponse = (0, _index.useTreeContext_unstable)((ctx)=>ctx.requestTreeResponse);
21
23
  const contextLevel = (0, _index.useTreeContext_unstable)((ctx)=>ctx.level);
22
24
  // note, if the value is not externally provided,
23
25
  // then selection and expansion will not work properly
24
26
  const value = (0, _reactutilities.useId)('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
25
27
  const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
26
- const requestTreeResponse = (0, _index.useTreeContext_unstable)((ctx)=>ctx.requestTreeResponse);
27
28
  const [isActionsVisible, setActionsVisible] = _react.useState(false);
28
29
  const [isAsideVisible, setAsideVisible] = _react.useState(true);
29
30
  const handleActionsRef = _react.useCallback((actionsElement)=>{
@@ -34,7 +35,8 @@ function useTreeItem_unstable(props, ref) {
34
35
  const layoutRef = _react.useRef(null);
35
36
  const subtreeRef = _react.useRef(null);
36
37
  const selectionRef = _react.useRef(null);
37
- const open = (0, _index.useTreeContext_unstable)((ctx)=>ctx.openItems.has(value));
38
+ var _props_open;
39
+ const open = (0, _index.useTreeContext_unstable)((ctx)=>(_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value));
38
40
  const selectionMode = (0, _index.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
39
41
  var _ctx_checkedItems_get;
40
42
  const checked = (0, _index.useTreeContext_unstable)((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);
@@ -56,13 +58,21 @@ function useTreeItem_unstable(props, ref) {
56
58
  if (isEventFromSelection) {
57
59
  return;
58
60
  }
59
- const isFromExpandIcon = expandIconRef.current && (0, _reactportal.elementContains)(expandIconRef.current, event.target);
60
- requestTreeResponse({
61
- event,
62
- value,
63
- itemType,
64
- target: event.currentTarget,
65
- type: isFromExpandIcon ? _tokens.treeDataTypes.ExpandIconClick : _tokens.treeDataTypes.Click
61
+ const isEventFromExpandIcon = expandIconRef.current && (0, _reactportal.elementContains)(expandIconRef.current, event.target);
62
+ _reactdom.unstable_batchedUpdates(()=>{
63
+ var _props_onOpenChange, _props;
64
+ const data = {
65
+ event,
66
+ value,
67
+ open: !open,
68
+ target: event.currentTarget,
69
+ type: isEventFromExpandIcon ? _tokens.treeDataTypes.ExpandIconClick : _tokens.treeDataTypes.Click
70
+ };
71
+ (_props_onOpenChange = (_props = props).onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(_props, event, data);
72
+ requestTreeResponse({
73
+ ...data,
74
+ itemType
75
+ });
66
76
  });
67
77
  });
68
78
  const handleKeyDown = (0, _reactutilities.useEventCallback)((event)=>{
@@ -80,19 +90,74 @@ function useTreeItem_unstable(props, ref) {
80
90
  event.preventDefault();
81
91
  }
82
92
  return;
93
+ case _tokens.treeDataTypes.Enter:
94
+ {
95
+ var _props_onOpenChange, _props;
96
+ const data = {
97
+ value,
98
+ event,
99
+ open: !open,
100
+ type: event.key,
101
+ target: event.currentTarget
102
+ };
103
+ (_props_onOpenChange = (_props = props).onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(_props, event, data);
104
+ return requestTreeResponse({
105
+ ...data,
106
+ itemType
107
+ });
108
+ }
83
109
  case _tokens.treeDataTypes.End:
84
110
  case _tokens.treeDataTypes.Home:
85
- case _tokens.treeDataTypes.Enter:
86
111
  case _tokens.treeDataTypes.ArrowUp:
87
112
  case _tokens.treeDataTypes.ArrowDown:
88
- case _tokens.treeDataTypes.ArrowLeft:
89
- case _tokens.treeDataTypes.ArrowRight:
90
113
  return requestTreeResponse({
91
114
  event,
92
- target: event.currentTarget,
93
115
  value,
94
116
  itemType,
95
- type: event.key
117
+ type: event.key,
118
+ target: event.currentTarget
119
+ });
120
+ case _tokens.treeDataTypes.ArrowLeft:
121
+ {
122
+ // do not navigate to parent if the item is on the top level
123
+ if (level === 1 && !open) {
124
+ return;
125
+ }
126
+ const data = {
127
+ value,
128
+ event,
129
+ open: !open,
130
+ type: event.key,
131
+ target: event.currentTarget
132
+ };
133
+ if (open) {
134
+ var _props_onOpenChange1, _props1;
135
+ (_props_onOpenChange1 = (_props1 = props).onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(_props1, event, data);
136
+ }
137
+ return requestTreeResponse({
138
+ ...data,
139
+ itemType
140
+ });
141
+ }
142
+ case _tokens.treeDataTypes.ArrowRight:
143
+ // do not navigate or open if the item is a leaf
144
+ if (itemType === 'leaf') {
145
+ return;
146
+ }
147
+ const data = {
148
+ value,
149
+ event,
150
+ open: !open,
151
+ type: event.key,
152
+ target: event.currentTarget
153
+ };
154
+ if (!open) {
155
+ var _props_onOpenChange2, _props2;
156
+ (_props_onOpenChange2 = (_props2 = props).onOpenChange) === null || _props_onOpenChange2 === void 0 ? void 0 : _props_onOpenChange2.call(_props2, event, data);
157
+ }
158
+ return requestTreeResponse({
159
+ ...data,
160
+ itemType
96
161
  });
97
162
  }
98
163
  const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
@@ -157,11 +222,11 @@ function useTreeItem_unstable(props, ref) {
157
222
  isActionsVisible,
158
223
  root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)(as, {
159
224
  tabIndex: -1,
225
+ [_getTreeItemValueFromElement.dataTreeItemValueAttrName]: value,
160
226
  ...rest,
161
227
  ref,
162
228
  role: 'treeitem',
163
229
  'aria-level': level,
164
- [_getTreeItemValueFromElement.dataTreeItemValueAttrName]: value,
165
230
  'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
166
231
  // aria-selected is required according to WAI-ARIA spec
167
232
  // https://www.w3.org/TR/wai-aria-1.1/#treeitem
package/lib-commonjs/components/TreeItem/useTreeItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */ export function useTreeItem_unstable(props, ref) {\n var _props_value;\n const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());\n const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const [isAsideVisible, setAsideVisible] = React.useState(true);\n const handleActionsRef = React.useCallback((actionsElement)=>{\n setAsideVisible(actionsElement === null);\n }, []);\n const actionsRef = React.useRef(null);\n const expandIconRef = React.useRef(null);\n const layoutRef = React.useRef(null);\n const subtreeRef = React.useRef(null);\n const selectionRef = React.useRef(null);\n const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));\n const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n var _ctx_checkedItems_get;\n const checked = useTreeContext_unstable((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);\n const handleClick = useEventCallback((event)=>{\n var _onClick;\n (_onClick = onClick) === null || _onClick === void 0 ? void 0 : _onClick(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n if (isEventFromSubtree) {\n return;\n }\n const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n if (isEventFromSelection) {\n return;\n }\n const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n requestTreeResponse({\n event,\n value,\n itemType,\n target: event.currentTarget,\n type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n });\n });\n const handleKeyDown = useEventCallback((event)=>{\n var _onKeyDown;\n (_onKeyDown = onKeyDown) === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(event);\n // Ignore keyboard events that do not originate from the current tree item.\n if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n return;\n }\n switch(event.key){\n case Space:\n if (selectionMode !== 'none') {\n var _selectionRef_current;\n (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n event.preventDefault();\n }\n return;\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.Enter:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n case treeDataTypes.ArrowLeft:\n case treeDataTypes.ArrowRight:\n return requestTreeResponse({\n event,\n target: event.currentTarget,\n value,\n itemType,\n type: event.key\n });\n }\n const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({\n event,\n target: event.currentTarget,\n value,\n itemType,\n type: treeDataTypes.TypeAhead\n });\n }\n });\n const handleActionsVisible = useEventCallback((event)=>{\n const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n if (!isTargetFromSubtree) {\n setActionsVisible(true);\n }\n });\n const handleActionsInvisible = useEventCallback((event)=>{\n const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));\n if (isRelatedTargetFromActions) {\n return setActionsVisible(true);\n }\n if (!isTargetFromSubtree) {\n return setActionsVisible(false);\n }\n });\n const handleChange = useEventCallback((event)=>{\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked\n });\n });\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n itemType,\n level,\n components: {\n root: 'div'\n },\n isAsideVisible,\n isActionsVisible,\n root: slot.always(getNativeElementProps(as, {\n tabIndex: -1,\n ...rest,\n ref,\n role: 'treeitem',\n 'aria-level': level,\n [dataTreeItemValueAttrName]: value,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n // aria-selected is required according to WAI-ARIA spec\n // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n // Casting: when selectionMode is 'single', checked is a boolean\n 'aria-selected': selectionMode === 'single' ? checked : 'false',\n 'aria-expanded': itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: handleActionsVisible,\n onFocus: handleActionsVisible,\n onMouseOut: handleActionsInvisible,\n onBlur: handleActionsInvisible,\n onChange: handleChange\n }), {\n elementType: 'div'\n })\n };\n}\n"],"names":["useTreeItem_unstable","props","ref","_props_value","contextLevel","useTreeContext_unstable","ctx","level","value","useId","toString","onClick","onKeyDown","as","itemType","rest","requestTreeResponse","isActionsVisible","setActionsVisible","React","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","_ctx_checkedItems_get","checked","checkedItems","get","handleClick","useEventCallback","event","_onClick","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isFromExpandIcon","currentTarget","type","treeDataTypes","ExpandIconClick","Click","handleKeyDown","_onKeyDown","key","Space","_selectionRef_current","click","preventDefault","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","useMergedRefs","components","root","slot","always","getNativeElementProps","tabIndex","role","dataTreeItemValueAttrName","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType"],"mappings":"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"}
1
+ {"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */ export function useTreeItem_unstable(props, ref) {\n var _props_value;\n const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());\n const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const [isAsideVisible, setAsideVisible] = React.useState(true);\n const handleActionsRef = React.useCallback((actionsElement)=>{\n setAsideVisible(actionsElement === null);\n }, []);\n const actionsRef = React.useRef(null);\n const expandIconRef = React.useRef(null);\n const layoutRef = React.useRef(null);\n const subtreeRef = React.useRef(null);\n const selectionRef = React.useRef(null);\n var _props_open;\n const open = useTreeContext_unstable((ctx)=>(_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value));\n const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n var _ctx_checkedItems_get;\n const checked = useTreeContext_unstable((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);\n const handleClick = useEventCallback((event)=>{\n var _onClick;\n (_onClick = onClick) === null || _onClick === void 0 ? void 0 : _onClick(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n if (isEventFromSubtree) {\n return;\n }\n const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n if (isEventFromSelection) {\n return;\n }\n const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n ReactDOM.unstable_batchedUpdates(()=>{\n var _props_onOpenChange, _props;\n const data = {\n event,\n value,\n open: !open,\n target: event.currentTarget,\n type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n };\n (_props_onOpenChange = (_props = props).onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(_props, event, data);\n requestTreeResponse({\n ...data,\n itemType\n });\n });\n });\n const handleKeyDown = useEventCallback((event)=>{\n var _onKeyDown;\n (_onKeyDown = onKeyDown) === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(event);\n // Ignore keyboard events that do not originate from the current tree item.\n if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n return;\n }\n switch(event.key){\n case Space:\n if (selectionMode !== 'none') {\n var _selectionRef_current;\n (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n event.preventDefault();\n }\n return;\n case treeDataTypes.Enter:\n {\n var _props_onOpenChange, _props;\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget\n };\n (_props_onOpenChange = (_props = props).onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(_props, event, data);\n return requestTreeResponse({\n ...data,\n itemType\n });\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n return requestTreeResponse({\n event,\n value,\n itemType,\n type: event.key,\n target: event.currentTarget\n });\n case treeDataTypes.ArrowLeft:\n {\n // do not navigate to parent if the item is on the top level\n if (level === 1 && !open) {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget\n };\n if (open) {\n var _props_onOpenChange1, _props1;\n (_props_onOpenChange1 = (_props1 = props).onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(_props1, event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType\n });\n }\n case treeDataTypes.ArrowRight:\n // do not navigate or open if the item is a leaf\n if (itemType === 'leaf') {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget\n };\n if (!open) {\n var _props_onOpenChange2, _props2;\n (_props_onOpenChange2 = (_props2 = props).onOpenChange) === null || _props_onOpenChange2 === void 0 ? void 0 : _props_onOpenChange2.call(_props2, event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType\n });\n }\n const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({\n event,\n target: event.currentTarget,\n value,\n itemType,\n type: treeDataTypes.TypeAhead\n });\n }\n });\n const handleActionsVisible = useEventCallback((event)=>{\n const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n if (!isTargetFromSubtree) {\n setActionsVisible(true);\n }\n });\n const handleActionsInvisible = useEventCallback((event)=>{\n const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));\n if (isRelatedTargetFromActions) {\n return setActionsVisible(true);\n }\n if (!isTargetFromSubtree) {\n return setActionsVisible(false);\n }\n });\n const handleChange = useEventCallback((event)=>{\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked\n });\n });\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n itemType,\n level,\n components: {\n root: 'div'\n },\n isAsideVisible,\n isActionsVisible,\n root: slot.always(getNativeElementProps(as, {\n tabIndex: -1,\n [dataTreeItemValueAttrName]: value,\n ...rest,\n ref,\n role: 'treeitem',\n 'aria-level': level,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n // aria-selected is required according to WAI-ARIA spec\n // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n // Casting: when selectionMode is 'single', checked is a boolean\n 'aria-selected': selectionMode === 'single' ? checked : 'false',\n 'aria-expanded': itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: handleActionsVisible,\n onFocus: handleActionsVisible,\n onMouseOut: handleActionsInvisible,\n onBlur: handleActionsInvisible,\n onChange: handleChange\n }), {\n elementType: 'div'\n })\n };\n}\n"],"names":["useTreeItem_unstable","props","ref","_props_value","requestTreeResponse","useTreeContext_unstable","ctx","contextLevel","level","value","useId","toString","onClick","onKeyDown","as","itemType","rest","isActionsVisible","setActionsVisible","React","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","_props_open","open","openItems","has","selectionMode","_ctx_checkedItems_get","checked","checkedItems","get","handleClick","useEventCallback","event","_onClick","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","ReactDOM","unstable_batchedUpdates","_props_onOpenChange","_props","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","call","handleKeyDown","_onKeyDown","key","Space","_selectionRef_current","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","_props_onOpenChange1","_props1","ArrowRight","_props_onOpenChange2","_props2","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","useMergedRefs","components","root","slot","always","getNativeElementProps","tabIndex","dataTreeItemValueAttrName","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType"],"mappings":"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"}
package/lib-commonjs/hooks/useSubtree.js CHANGED
@@ -16,14 +16,13 @@ function useSubtree(props, ref) {
16
16
  const contextAppearance = (0, _index.useTreeContext_unstable)((ctx)=>ctx.appearance);
17
17
  const contextSize = (0, _index.useTreeContext_unstable)((ctx)=>ctx.size);
18
18
  const subtreeRef = (0, _index.useTreeItemContext_unstable)((ctx)=>ctx.subtreeRef);
19
- const value = (0, _index.useTreeItemContext_unstable)((ctx)=>ctx.value);
20
19
  const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'subtle', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
21
20
  const parentLevel = (0, _index.useTreeContext_unstable)((ctx)=>ctx.level);
22
21
  const selectionMode = (0, _index.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
23
22
  const openItems = (0, _index.useTreeContext_unstable)((ctx)=>ctx.openItems);
24
23
  const checkedItems = (0, _index.useTreeContext_unstable)((ctx)=>ctx.checkedItems);
25
24
  const requestTreeResponse = (0, _index.useTreeContext_unstable)((ctx)=>ctx.requestTreeResponse);
26
- const open = openItems.has(value);
25
+ const open = (0, _index.useTreeItemContext_unstable)((ctx)=>ctx.open);
27
26
  return {
28
27
  open,
29
28
  components: {
package/lib-commonjs/hooks/useSubtree.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSubtree.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */ export function useSubtree(props, ref) {\n const contextAppearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n const contextSize = useTreeContext_unstable((ctx)=>ctx.size);\n const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);\n const value = useTreeItemContext_unstable((ctx)=>ctx.value);\n const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'subtle', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;\n const parentLevel = useTreeContext_unstable((ctx)=>ctx.level);\n const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n const openItems = useTreeContext_unstable((ctx)=>ctx.openItems);\n const checkedItems = useTreeContext_unstable((ctx)=>ctx.checkedItems);\n const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n const open = openItems.has(value);\n return {\n open,\n components: {\n root: 'div'\n },\n appearance,\n size,\n selectionMode,\n level: parentLevel + 1,\n root: slot.always(getNativeElementProps('div', {\n ref: useMergedRefs(ref, subtreeRef),\n role: 'group',\n ...props\n }), {\n elementType: 'div'\n }),\n openItems,\n checkedItems,\n requestTreeResponse\n };\n}\n"],"names":["useSubtree","props","ref","contextAppearance","useTreeContext_unstable","ctx","appearance","contextSize","size","subtreeRef","useTreeItemContext_unstable","value","parentLevel","level","selectionMode","openItems","checkedItems","requestTreeResponse","open","has","components","root","slot","always","getNativeElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;uBAC8C;gCACV;AAMhD,SAASA,WAAWC,KAAK,EAAEC,GAAG;IACrC,MAAMC,oBAAoBC,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIC,UAAU;IACvE,MAAMC,cAAcH,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIG,IAAI;IAC3D,MAAMC,aAAaC,IAAAA,kCAA2B,EAAC,CAACL,MAAMA,IAAII,UAAU;IACpE,MAAME,QAAQD,IAAAA,kCAA2B,EAAC,CAACL,MAAMA,IAAIM,KAAK;IAC1D,MAAM,EAAEL,aAAaH,sBAAsB,QAAQA,sBAAsB,KAAK,IAAIA,oBAAoB,QAAQ,EAAEK,OAAOD,gBAAgB,QAAQA,gBAAgB,KAAK,IAAIA,cAAc,QAAQ,EAAE,GAAGN;IACnM,MAAMW,cAAcR,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIQ,KAAK;IAC5D,MAAMC,gBAAgBV,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIS,aAAa;IACtE,MAAMC,YAAYX,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIU,SAAS;IAC9D,MAAMC,eAAeZ,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIW,YAAY;IACpE,MAAMC,sBAAsBb,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIY,mBAAmB;IAClF,MAAMC,OAAOH,UAAUI,GAAG,CAACR;IAC3B,OAAO;QACHO;QACAE,YAAY;YACRC,MAAM;QACV;QACAf;QACAE;QACAM;QACAD,OAAOD,cAAc;QACrBS,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CtB,KAAKuB,IAAAA,6BAAa,EAACvB,KAAKO;YACxBiB,MAAM;YACN,GAAGzB,KAAK;QACZ,IAAI;YACA0B,aAAa;QACjB;QACAZ;QACAC;QACAC;IACJ;AACJ"}
1
+ {"version":3,"sources":["useSubtree.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */ export function useSubtree(props, ref) {\n const contextAppearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n const contextSize = useTreeContext_unstable((ctx)=>ctx.size);\n const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);\n const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'subtle', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;\n const parentLevel = useTreeContext_unstable((ctx)=>ctx.level);\n const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n const openItems = useTreeContext_unstable((ctx)=>ctx.openItems);\n const checkedItems = useTreeContext_unstable((ctx)=>ctx.checkedItems);\n const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n const open = useTreeItemContext_unstable((ctx)=>ctx.open);\n return {\n open,\n components: {\n root: 'div'\n },\n appearance,\n size,\n selectionMode,\n level: parentLevel + 1,\n root: slot.always(getNativeElementProps('div', {\n ref: useMergedRefs(ref, subtreeRef),\n role: 'group',\n ...props\n }), {\n elementType: 'div'\n }),\n openItems,\n checkedItems,\n requestTreeResponse\n };\n}\n"],"names":["useSubtree","props","ref","contextAppearance","useTreeContext_unstable","ctx","appearance","contextSize","size","subtreeRef","useTreeItemContext_unstable","parentLevel","level","selectionMode","openItems","checkedItems","requestTreeResponse","open","components","root","slot","always","getNativeElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;uBAC8C;gCACV;AAMhD,SAASA,WAAWC,KAAK,EAAEC,GAAG;IACrC,MAAMC,oBAAoBC,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIC,UAAU;IACvE,MAAMC,cAAcH,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIG,IAAI;IAC3D,MAAMC,aAAaC,IAAAA,kCAA2B,EAAC,CAACL,MAAMA,IAAII,UAAU;IACpE,MAAM,EAAEH,aAAaH,sBAAsB,QAAQA,sBAAsB,KAAK,IAAIA,oBAAoB,QAAQ,EAAEK,OAAOD,gBAAgB,QAAQA,gBAAgB,KAAK,IAAIA,cAAc,QAAQ,EAAE,GAAGN;IACnM,MAAMU,cAAcP,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIO,KAAK;IAC5D,MAAMC,gBAAgBT,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIQ,aAAa;IACtE,MAAMC,YAAYV,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIS,SAAS;IAC9D,MAAMC,eAAeX,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIU,YAAY;IACpE,MAAMC,sBAAsBZ,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIW,mBAAmB;IAClF,MAAMC,OAAOP,IAAAA,kCAA2B,EAAC,CAACL,MAAMA,IAAIY,IAAI;IACxD,OAAO;QACHA;QACAC,YAAY;YACRC,MAAM;QACV;QACAb;QACAE;QACAK;QACAD,OAAOD,cAAc;QACrBQ,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CpB,KAAKqB,IAAAA,6BAAa,EAACrB,KAAKO;YACxBe,MAAM;YACN,GAAGvB,KAAK;QACZ,IAAI;YACAwB,aAAa;QACjB;QACAX;QACAC;QACAC;IACJ;AACJ"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-tree",
3
- "version": "9.0.8",
3
+ "version": "9.1.0",
4
4
  "description": "Tree component for Fluent UI React",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -38,18 +38,18 @@
38
38
  "dependencies": {
39
39
  "@fluentui/keyboard-keys": "^9.0.4",
40
40
  "@fluentui/react-aria": "^9.3.36",
41
- "@fluentui/react-avatar": "^9.5.28",
42
- "@fluentui/react-button": "^9.3.37",
43
- "@fluentui/react-checkbox": "^9.1.38",
41
+ "@fluentui/react-avatar": "^9.5.29",
42
+ "@fluentui/react-button": "^9.3.38",
43
+ "@fluentui/react-checkbox": "^9.1.39",
44
44
  "@fluentui/react-context-selector": "^9.1.34",
45
45
  "@fluentui/react-icons": "^2.0.207",
46
- "@fluentui/react-portal": "^9.3.13",
47
- "@fluentui/react-radio": "^9.1.38",
46
+ "@fluentui/react-portal": "^9.3.14",
47
+ "@fluentui/react-radio": "^9.1.39",
48
48
  "@fluentui/react-shared-contexts": "^9.7.3",
49
- "@fluentui/react-tabster": "^9.12.8",
49
+ "@fluentui/react-tabster": "^9.12.9",
50
50
  "@fluentui/react-theme": "^9.1.12",
51
51
  "@fluentui/react-utilities": "^9.13.3",
52
- "@fluentui/react-jsx-runtime": "^9.0.6",
52
+ "@fluentui/react-jsx-runtime": "^9.0.7",
53
53
  "@griffel/react": "^1.5.14",
54
54
  "@swc/helpers": "^0.5.1"
55
55
  },