@fluentui/react-tree 9.0.0-beta.24 → 9.0.0-beta.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +118 -1
- package/CHANGELOG.md +32 -2
- package/dist/index.d.ts +192 -52
- package/lib/components/Tree/Tree.types.js +1 -1
- package/lib/components/Tree/Tree.types.js.map +1 -1
- package/lib/components/Tree/useRootTree.js +71 -73
- package/lib/components/Tree/useRootTree.js.map +1 -1
- package/lib/components/Tree/useSubtree.js +4 -0
- package/lib/components/Tree/useSubtree.js.map +1 -1
- package/lib/components/Tree/useTreeContextValues.js +4 -2
- package/lib/components/Tree/useTreeContextValues.js.map +1 -1
- package/lib/components/TreeItem/TreeItem.types.js.map +1 -1
- package/lib/components/TreeItem/renderTreeItem.js +4 -2
- package/lib/components/TreeItem/renderTreeItem.js.map +1 -1
- package/lib/components/TreeItem/useTreeItem.js +104 -18
- package/lib/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib/components/TreeItem/useTreeItemContextValues.js +15 -6
- package/lib/components/TreeItem/useTreeItemContextValues.js.map +1 -1
- package/lib/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
- package/lib/components/TreeItemLayout/renderTreeItemLayout.js +1 -1
- package/lib/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemLayout/useTreeItemLayout.js +14 -30
- package/lib/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +15 -8
- package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
- package/lib/contexts/index.js +1 -0
- package/lib/contexts/index.js.map +1 -1
- package/lib/contexts/treeContext.js +5 -2
- package/lib/contexts/treeContext.js.map +1 -1
- package/lib/contexts/treeItemContext.js +0 -4
- package/lib/contexts/treeItemContext.js.map +1 -1
- package/lib/contexts/treeItemSlotsContext.js +9 -0
- package/lib/contexts/treeItemSlotsContext.js.map +1 -0
- package/lib/hooks/index.js +3 -1
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useControllableOpenItems.js +25 -0
- package/lib/hooks/useControllableOpenItems.js.map +1 -0
- package/lib/hooks/useFlatControllableCheckedItems.js +76 -0
- package/lib/hooks/useFlatControllableCheckedItems.js.map +1 -0
- package/lib/hooks/useFlatTree.js +17 -6
- package/lib/hooks/useFlatTree.js.map +1 -1
- package/lib/hooks/useNestedControllableCheckedItems.js +107 -0
- package/lib/hooks/useNestedControllableCheckedItems.js.map +1 -0
- package/lib/index.js.map +1 -1
- package/lib/utils/ImmutableMap.js +37 -0
- package/lib/utils/ImmutableMap.js.map +1 -0
- package/lib/utils/ImmutableSet.js +17 -9
- package/lib/utils/ImmutableSet.js.map +1 -1
- package/lib/utils/createFlatTreeItems.js +60 -8
- package/lib/utils/createFlatTreeItems.js.map +1 -1
- package/lib/utils/flattenTree.js +0 -5
- package/lib/utils/flattenTree.js.map +1 -1
- package/lib/utils/tokens.js +2 -1
- package/lib/utils/tokens.js.map +1 -1
- package/lib-commonjs/components/Tree/Tree.types.js +0 -2
- package/lib-commonjs/components/Tree/Tree.types.js.map +1 -1
- package/lib-commonjs/components/Tree/useRootTree.js +70 -72
- package/lib-commonjs/components/Tree/useRootTree.js.map +1 -1
- package/lib-commonjs/components/Tree/useSubtree.js +4 -0
- package/lib-commonjs/components/Tree/useSubtree.js.map +1 -1
- package/lib-commonjs/components/Tree/useTreeContextValues.js +4 -2
- package/lib-commonjs/components/Tree/useTreeContextValues.js.map +1 -1
- package/lib-commonjs/components/TreeItem/renderTreeItem.js +3 -1
- package/lib-commonjs/components/TreeItem/renderTreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItem.js +103 -17
- package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js +16 -6
- package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js +1 -1
- package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js +14 -29
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +12 -8
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -1
- package/lib-commonjs/contexts/index.js +1 -0
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/contexts/treeContext.js +4 -1
- package/lib-commonjs/contexts/treeContext.js.map +1 -1
- package/lib-commonjs/contexts/treeItemContext.js +0 -4
- package/lib-commonjs/contexts/treeItemContext.js.map +1 -1
- package/lib-commonjs/contexts/treeItemSlotsContext.js +25 -0
- package/lib-commonjs/contexts/treeItemSlotsContext.js.map +1 -0
- package/lib-commonjs/hooks/index.js +3 -1
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/{useOpenItemsState.js → useControllableOpenItems.js} +15 -14
- package/lib-commonjs/hooks/useControllableOpenItems.js.map +1 -0
- package/lib-commonjs/hooks/useFlatControllableCheckedItems.js +91 -0
- package/lib-commonjs/hooks/useFlatControllableCheckedItems.js.map +1 -0
- package/lib-commonjs/hooks/useFlatTree.js +16 -5
- package/lib-commonjs/hooks/useFlatTree.js.map +1 -1
- package/lib-commonjs/hooks/useNestedControllableCheckedItems.js +116 -0
- package/lib-commonjs/hooks/useNestedControllableCheckedItems.js.map +1 -0
- package/lib-commonjs/utils/ImmutableMap.js +45 -0
- package/lib-commonjs/utils/ImmutableMap.js.map +1 -0
- package/lib-commonjs/utils/ImmutableSet.js +22 -16
- package/lib-commonjs/utils/ImmutableSet.js.map +1 -1
- package/lib-commonjs/utils/createFlatTreeItems.js +60 -8
- package/lib-commonjs/utils/createFlatTreeItems.js.map +1 -1
- package/lib-commonjs/utils/flattenTree.js +0 -5
- package/lib-commonjs/utils/flattenTree.js.map +1 -1
- package/lib-commonjs/utils/tokens.js +2 -1
- package/lib-commonjs/utils/tokens.js.map +1 -1
- package/package.json +9 -7
- package/lib/hooks/useOpenItemsState.js +0 -28
- package/lib/hooks/useOpenItemsState.js.map +0 -1
- package/lib-commonjs/hooks/useOpenItemsState.js.map +0 -1
|
@@ -11,24 +11,46 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
|
11
11
|
const _reactUtilities = require("@fluentui/react-utilities");
|
|
12
12
|
const _reactPortal = require("@fluentui/react-portal");
|
|
13
13
|
const _index = require("../../contexts/index");
|
|
14
|
-
const _tokens = require("../../utils/tokens");
|
|
15
14
|
const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromElement");
|
|
15
|
+
const _treeItemChevron = require("../TreeItemChevron");
|
|
16
|
+
const _keyboardKeys = require("@fluentui/keyboard-keys");
|
|
17
|
+
const _tokens = require("../../utils/tokens");
|
|
16
18
|
function useTreeItem_unstable(props, ref) {
|
|
17
19
|
var _props_value;
|
|
18
20
|
const contextLevel = (0, _index.useTreeContext_unstable)((ctx)=>ctx.level);
|
|
19
21
|
const value = (0, _reactUtilities.useId)('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
|
|
20
|
-
const { onClick , onKeyDown , as ='div' , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;
|
|
22
|
+
const { onClick , onKeyDown , as ='div' , itemType ='leaf' , 'aria-level': level = contextLevel , expandIcon , aside , ...rest } = props;
|
|
21
23
|
const requestTreeResponse = (0, _index.useTreeContext_unstable)((ctx)=>ctx.requestTreeResponse);
|
|
22
|
-
const [
|
|
24
|
+
const [isActionsVisibleExternal, actions] = (0, _reactUtilities.isResolvedShorthand)(props.actions) ? [
|
|
25
|
+
props.actions.visible,
|
|
26
|
+
{
|
|
27
|
+
...props.actions,
|
|
28
|
+
visible: undefined
|
|
29
|
+
}
|
|
30
|
+
] : [
|
|
31
|
+
undefined,
|
|
32
|
+
props.actions
|
|
33
|
+
];
|
|
34
|
+
const [isActionsVisible, setActionsVisible] = (0, _reactUtilities.useControllableState)({
|
|
35
|
+
state: isActionsVisibleExternal,
|
|
36
|
+
defaultState: false,
|
|
37
|
+
initialState: false
|
|
38
|
+
});
|
|
23
39
|
const [isAsideVisible, setAsideVisible] = _react.useState(true);
|
|
24
|
-
const handleActionsRef = (
|
|
25
|
-
setAsideVisible(
|
|
40
|
+
const handleActionsRef = (actionsElement)=>{
|
|
41
|
+
setAsideVisible(actionsElement === null);
|
|
26
42
|
};
|
|
27
|
-
const open = (0, _index.useTreeContext_unstable)((ctx)=>ctx.openItems.has(value));
|
|
28
43
|
const actionsRef = _react.useRef(null);
|
|
29
44
|
const expandIconRef = _react.useRef(null);
|
|
30
45
|
const layoutRef = _react.useRef(null);
|
|
31
46
|
const subtreeRef = _react.useRef(null);
|
|
47
|
+
const selectionRef = _react.useRef(null);
|
|
48
|
+
const open = (0, _index.useTreeContext_unstable)((ctx)=>ctx.openItems.has(value));
|
|
49
|
+
var _ctx_checkedItems_get;
|
|
50
|
+
const checked = (0, _index.useTreeContext_unstable)((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);
|
|
51
|
+
const selectionMode = (0, _index.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
|
|
52
|
+
const actionsRefs = (0, _reactUtilities.useMergedRefs)((0, _reactUtilities.isResolvedShorthand)(actions) ? actions.ref : undefined, handleActionsRef, actionsRef);
|
|
53
|
+
const expandIconRefs = (0, _reactUtilities.useMergedRefs)((0, _reactUtilities.isResolvedShorthand)(expandIcon) ? expandIcon.ref : undefined, expandIconRef);
|
|
32
54
|
const handleClick = (0, _reactUtilities.useEventCallback)((event)=>{
|
|
33
55
|
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
34
56
|
if (event.isDefaultPrevented()) {
|
|
@@ -42,23 +64,33 @@ function useTreeItem_unstable(props, ref) {
|
|
|
42
64
|
if (isEventFromSubtree) {
|
|
43
65
|
return;
|
|
44
66
|
}
|
|
67
|
+
const isEventFromSelection = selectionRef.current && (0, _reactPortal.elementContains)(selectionRef.current, event.target);
|
|
68
|
+
if (isEventFromSelection) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
45
71
|
const isFromExpandIcon = expandIconRef.current && (0, _reactPortal.elementContains)(expandIconRef.current, event.target);
|
|
46
72
|
requestTreeResponse({
|
|
47
73
|
event,
|
|
48
|
-
itemType,
|
|
49
74
|
value,
|
|
75
|
+
itemType,
|
|
76
|
+
target: event.currentTarget,
|
|
50
77
|
type: isFromExpandIcon ? _tokens.treeDataTypes.ExpandIconClick : _tokens.treeDataTypes.Click
|
|
51
78
|
});
|
|
52
79
|
});
|
|
53
80
|
const handleKeyDown = (0, _reactUtilities.useEventCallback)((event)=>{
|
|
54
81
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
if (event.currentTarget !== event.target) {
|
|
82
|
+
// Ignore keyboard events that do not originate from the current tree item.
|
|
83
|
+
if (event.isDefaultPrevented() || event.currentTarget !== event.target) {
|
|
59
84
|
return;
|
|
60
85
|
}
|
|
61
86
|
switch(event.key){
|
|
87
|
+
case _keyboardKeys.Space:
|
|
88
|
+
if (selectionMode !== 'none') {
|
|
89
|
+
var _selectionRef_current;
|
|
90
|
+
(_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
|
|
91
|
+
event.preventDefault();
|
|
92
|
+
}
|
|
93
|
+
return;
|
|
62
94
|
case _tokens.treeDataTypes.End:
|
|
63
95
|
case _tokens.treeDataTypes.Home:
|
|
64
96
|
case _tokens.treeDataTypes.Enter:
|
|
@@ -68,6 +100,7 @@ function useTreeItem_unstable(props, ref) {
|
|
|
68
100
|
case _tokens.treeDataTypes.ArrowRight:
|
|
69
101
|
return requestTreeResponse({
|
|
70
102
|
event,
|
|
103
|
+
target: event.currentTarget,
|
|
71
104
|
value,
|
|
72
105
|
itemType,
|
|
73
106
|
type: event.key
|
|
@@ -77,6 +110,7 @@ function useTreeItem_unstable(props, ref) {
|
|
|
77
110
|
if (isTypeAheadCharacter) {
|
|
78
111
|
requestTreeResponse({
|
|
79
112
|
event,
|
|
113
|
+
target: event.currentTarget,
|
|
80
114
|
value,
|
|
81
115
|
itemType,
|
|
82
116
|
type: _tokens.treeDataTypes.TypeAhead
|
|
@@ -99,16 +133,53 @@ function useTreeItem_unstable(props, ref) {
|
|
|
99
133
|
return setActionsVisible(false);
|
|
100
134
|
}
|
|
101
135
|
});
|
|
136
|
+
const handleChange = (0, _reactUtilities.useEventCallback)((event)=>{
|
|
137
|
+
if (event.isDefaultPrevented()) {
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
const isEventFromSubtree = subtreeRef.current && (0, _reactPortal.elementContains)(subtreeRef.current, event.target);
|
|
141
|
+
if (isEventFromSubtree) {
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
requestTreeResponse({
|
|
145
|
+
event,
|
|
146
|
+
value,
|
|
147
|
+
itemType,
|
|
148
|
+
type: 'Change',
|
|
149
|
+
target: event.currentTarget
|
|
150
|
+
});
|
|
151
|
+
});
|
|
152
|
+
const isBranch = itemType === 'branch';
|
|
153
|
+
const actionsSlot = _react.useMemo(()=>isActionsVisible ? (0, _reactUtilities.resolveShorthand)(actions) : undefined, [
|
|
154
|
+
actions,
|
|
155
|
+
isActionsVisible
|
|
156
|
+
]);
|
|
157
|
+
if (actionsSlot) {
|
|
158
|
+
actionsSlot.ref = actionsRefs;
|
|
159
|
+
}
|
|
160
|
+
const asideSlot = _react.useMemo(()=>isAsideVisible ? (0, _reactUtilities.resolveShorthand)(aside) : undefined, [
|
|
161
|
+
aside,
|
|
162
|
+
isAsideVisible
|
|
163
|
+
]);
|
|
164
|
+
const expandIconSlot = _react.useMemo(()=>(0, _reactUtilities.resolveShorthand)(expandIcon, {
|
|
165
|
+
required: isBranch,
|
|
166
|
+
defaultProps: {
|
|
167
|
+
children: /*#__PURE__*/ _react.createElement(_treeItemChevron.TreeItemChevron, null),
|
|
168
|
+
'aria-hidden': true
|
|
169
|
+
}
|
|
170
|
+
}), [
|
|
171
|
+
expandIcon,
|
|
172
|
+
isBranch
|
|
173
|
+
]);
|
|
174
|
+
if (expandIconSlot) {
|
|
175
|
+
expandIconSlot.ref = expandIconRefs;
|
|
176
|
+
}
|
|
102
177
|
return {
|
|
103
178
|
value,
|
|
104
179
|
open,
|
|
105
180
|
subtreeRef,
|
|
106
|
-
actionsRef: (0, _reactUtilities.useMergedRefs)(actionsRef, handleActionsRef),
|
|
107
|
-
expandIconRef,
|
|
108
181
|
layoutRef,
|
|
109
182
|
itemType,
|
|
110
|
-
isActionsVisible,
|
|
111
|
-
isAsideVisible,
|
|
112
183
|
level,
|
|
113
184
|
components: {
|
|
114
185
|
root: 'div'
|
|
@@ -120,13 +191,28 @@ function useTreeItem_unstable(props, ref) {
|
|
|
120
191
|
role: 'treeitem',
|
|
121
192
|
'aria-level': level,
|
|
122
193
|
[_getTreeItemValueFromElement.dataTreeItemValueAttrName]: value,
|
|
123
|
-
'aria-
|
|
194
|
+
'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
|
|
195
|
+
'aria-selected': selectionMode === 'single' ? checked : undefined,
|
|
196
|
+
'aria-expanded': isBranch ? open : undefined,
|
|
124
197
|
onClick: handleClick,
|
|
125
198
|
onKeyDown: handleKeyDown,
|
|
126
199
|
onMouseOver: handleActionsVisible,
|
|
127
200
|
onFocus: handleActionsVisible,
|
|
128
201
|
onMouseOut: handleActionsInvisible,
|
|
129
|
-
onBlur: handleActionsInvisible
|
|
202
|
+
onBlur: handleActionsInvisible,
|
|
203
|
+
onChange: handleChange
|
|
204
|
+
}),
|
|
205
|
+
actions: actionsSlot,
|
|
206
|
+
aside: asideSlot,
|
|
207
|
+
expandIcon: expandIconSlot,
|
|
208
|
+
selector: selectionMode === 'none' ? undefined : (0, _reactUtilities.resolveShorthand)(selectionMode === 'multiselect' ? props.checkboxIndicator : props.radioIndicator, {
|
|
209
|
+
required: true,
|
|
210
|
+
defaultProps: {
|
|
211
|
+
checked,
|
|
212
|
+
tabIndex: -1,
|
|
213
|
+
'aria-hidden': true,
|
|
214
|
+
ref: selectionRef
|
|
215
|
+
}
|
|
130
216
|
})
|
|
131
217
|
};
|
|
132
218
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\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 contextLevel = useTreeContext_unstable((ctx)=>ctx.level);\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 = (actions)=>{\n setAsideVisible(actions === null);\n };\n const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));\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 handleClick = useEventCallback((event)=>{\n 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 isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n requestTreeResponse({\n event,\n itemType,\n value,\n type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n });\n });\n const handleKeyDown = useEventCallback((event)=>{\n onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n if (event.currentTarget !== event.target) {\n return;\n }\n switch(event.key){\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 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 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 return {\n value,\n open,\n subtreeRef,\n actionsRef: useMergedRefs(actionsRef, handleActionsRef),\n expandIconRef,\n layoutRef,\n itemType,\n isActionsVisible,\n isAsideVisible,\n level,\n components: {\n root: 'div'\n },\n root: getNativeElementProps(as, {\n tabIndex: -1,\n ...rest,\n ref,\n role: 'treeitem',\n 'aria-level': level,\n [dataTreeItemValueAttrName]: value,\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 })\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","actions","open","openItems","has","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isFromExpandIcon","type","treeDataTypes","ExpandIconClick","Click","handleKeyDown","currentTarget","key","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","useMergedRefs","components","root","getNativeElementProps","tabIndex","role","dataTreeItemValueAttrName","undefined","onMouseOver","onFocus","onMouseOut","onBlur"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useControllableState, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { TreeItemChevron } from '../TreeItemChevron';\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 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 , expandIcon , aside , ...rest } = props;\n const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n const [isActionsVisibleExternal, actions] = isResolvedShorthand(props.actions) ? [\n props.actions.visible,\n {\n ...props.actions,\n visible: undefined\n }\n ] : [\n undefined,\n props.actions\n ];\n const [isActionsVisible, setActionsVisible] = useControllableState({\n state: isActionsVisibleExternal,\n defaultState: false,\n initialState: false\n });\n const [isAsideVisible, setAsideVisible] = React.useState(true);\n const handleActionsRef = (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 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 selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n const actionsRefs = useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, handleActionsRef, actionsRef);\n const expandIconRefs = useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef);\n const handleClick = useEventCallback((event)=>{\n 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 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 });\n });\n const isBranch = itemType === 'branch';\n const actionsSlot = React.useMemo(()=>isActionsVisible ? resolveShorthand(actions) : undefined, [\n actions,\n isActionsVisible\n ]);\n if (actionsSlot) {\n actionsSlot.ref = actionsRefs;\n }\n const asideSlot = React.useMemo(()=>isAsideVisible ? resolveShorthand(aside) : undefined, [\n aside,\n isAsideVisible\n ]);\n const expandIconSlot = React.useMemo(()=>resolveShorthand(expandIcon, {\n required: isBranch,\n defaultProps: {\n children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n 'aria-hidden': true\n }\n }), [\n expandIcon,\n isBranch\n ]);\n if (expandIconSlot) {\n expandIconSlot.ref = expandIconRefs;\n }\n return {\n value,\n open,\n subtreeRef,\n layoutRef,\n itemType,\n level,\n components: {\n root: 'div'\n },\n root: 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': selectionMode === 'single' ? checked : undefined,\n 'aria-expanded': isBranch ? 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 actions: actionsSlot,\n aside: asideSlot,\n expandIcon: expandIconSlot,\n selector: selectionMode === 'none' ? undefined : resolveShorthand(selectionMode === 'multiselect' ? props.checkboxIndicator : props.radioIndicator, {\n required: true,\n defaultProps: {\n checked,\n tabIndex: -1,\n 'aria-hidden': true,\n ref: selectionRef\n }\n })\n };\n}\n"],"names":["useTreeItem_unstable","props","ref","_props_value","contextLevel","useTreeContext_unstable","ctx","level","value","useId","toString","onClick","onKeyDown","as","itemType","expandIcon","aside","rest","requestTreeResponse","isActionsVisibleExternal","actions","isResolvedShorthand","visible","undefined","isActionsVisible","setActionsVisible","useControllableState","state","defaultState","initialState","isAsideVisible","setAsideVisible","React","useState","handleActionsRef","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","_ctx_checkedItems_get","checked","checkedItems","get","selectionMode","actionsRefs","useMergedRefs","expandIconRefs","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isFromExpandIcon","currentTarget","type","treeDataTypes","ExpandIconClick","Click","handleKeyDown","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","isBranch","actionsSlot","useMemo","resolveShorthand","asideSlot","expandIconSlot","required","defaultProps","children","createElement","TreeItemChevron","components","root","getNativeElementProps","tabIndex","role","dataTreeItemValueAttrName","onMouseOver","onFocus","onMouseOut","onBlur","onChange","selector","checkboxIndicator","radioIndicator"],"mappings":";;;;+BAiBoBA;;aAAAA;;;6DAjBG;gCACkG;6BAEzF;uBACQ;6CACE;iCACV;8BACV;wBACQ;AASnB,SAASA,qBAAqBC,KAAK,EAAEC,GAAG,EAAE;IACjD,IAAIC;IACJ,MAAMC,eAAeC,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIC,KAAK;IAC7D,MAAMC,QAAQC,IAAAA,qBAAK,EAAC,qBAAqB,AAACN,CAAAA,eAAeF,MAAMO,KAAK,AAAD,MAAO,IAAI,IAAIL,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaO,QAAQ,EAAE;IAC5I,MAAM,EAAEC,QAAO,EAAGC,UAAS,EAAGC,IAAI,MAAK,EAAGC,UAAU,OAAM,EAAG,cAAcP,QAAQH,YAAY,CAAA,EAAGW,WAAU,EAAGC,MAAK,EAAG,GAAGC,MAAM,GAAGhB;IACnI,MAAMiB,sBAAsBb,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIY,mBAAmB;IAClF,MAAM,CAACC,0BAA0BC,QAAQ,GAAGC,IAAAA,mCAAmB,EAACpB,MAAMmB,OAAO,IAAI;QAC7EnB,MAAMmB,OAAO,CAACE,OAAO;QACrB;YACI,GAAGrB,MAAMmB,OAAO;YAChBE,SAASC;QACb;KACH,GAAG;QACAA;QACAtB,MAAMmB,OAAO;KAChB;IACD,MAAM,CAACI,kBAAkBC,kBAAkB,GAAGC,IAAAA,oCAAoB,EAAC;QAC/DC,OAAOR;QACPS,cAAc,KAAK;QACnBC,cAAc,KAAK;IACvB;IACA,MAAM,CAACC,gBAAgBC,gBAAgB,GAAGC,OAAMC,QAAQ,CAAC,IAAI;IAC7D,MAAMC,mBAAmB,CAACC,iBAAiB;QACvCJ,gBAAgBI,mBAAmB,IAAI;IAC3C;IACA,MAAMC,aAAaJ,OAAMK,MAAM,CAAC,IAAI;IACpC,MAAMC,gBAAgBN,OAAMK,MAAM,CAAC,IAAI;IACvC,MAAME,YAAYP,OAAMK,MAAM,CAAC,IAAI;IACnC,MAAMG,aAAaR,OAAMK,MAAM,CAAC,IAAI;IACpC,MAAMI,eAAeT,OAAMK,MAAM,CAAC,IAAI;IACtC,MAAMK,OAAOrC,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAIqC,SAAS,CAACC,GAAG,CAACpC;IAC9D,IAAIqC;IACJ,MAAMC,UAAUzC,IAAAA,8BAAuB,EAAC,CAACC,MAAM,AAACuC,CAAAA,wBAAwBvC,IAAIyC,YAAY,CAACC,GAAG,CAACxC,MAAK,MAAO,IAAI,IAAIqC,0BAA0B,KAAK,IAAIA,wBAAwB,KAAK;IACjL,MAAMI,gBAAgB5C,IAAAA,8BAAuB,EAAC,CAACC,MAAMA,IAAI2C,aAAa;IACtE,MAAMC,cAAcC,IAAAA,6BAAa,EAAC9B,IAAAA,mCAAmB,EAACD,WAAWA,QAAQlB,GAAG,GAAGqB,SAAS,EAAEW,kBAAkBE;IAC5G,MAAMgB,iBAAiBD,IAAAA,6BAAa,EAAC9B,IAAAA,mCAAmB,EAACN,cAAcA,WAAWb,GAAG,GAAGqB,SAAS,EAAEe;IACnG,MAAMe,cAAcC,IAAAA,gCAAgB,EAAC,CAACC,QAAQ;QAC1C5C,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQ4C,MAAM;QAChE,IAAIA,MAAMC,kBAAkB,IAAI;YAC5B;QACJ,CAAC;QACD,MAAMC,qBAAqBrB,WAAWsB,OAAO,IAAIC,IAAAA,4BAAe,EAACvB,WAAWsB,OAAO,EAAEH,MAAMK,MAAM;QACjG,IAAIH,oBAAoB;YACpB;QACJ,CAAC;QACD,MAAMI,qBAAqBrB,WAAWkB,OAAO,IAAIC,IAAAA,4BAAe,EAACnB,WAAWkB,OAAO,EAAEH,MAAMK,MAAM;QACjG,IAAIC,oBAAoB;YACpB;QACJ,CAAC;QACD,MAAMC,uBAAuBrB,aAAaiB,OAAO,IAAIC,IAAAA,4BAAe,EAAClB,aAAaiB,OAAO,EAAEH,MAAMK,MAAM;QACvG,IAAIE,sBAAsB;YACtB;QACJ,CAAC;QACD,MAAMC,mBAAmBzB,cAAcoB,OAAO,IAAIC,IAAAA,4BAAe,EAACrB,cAAcoB,OAAO,EAAEH,MAAMK,MAAM;QACrG1C,oBAAoB;YAChBqC;YACA/C;YACAM;YACA8C,QAAQL,MAAMS,aAAa;YAC3BC,MAAMF,mBAAmBG,qBAAa,CAACC,eAAe,GAAGD,qBAAa,CAACE,KAAK;QAChF;IACJ;IACA,MAAMC,gBAAgBf,IAAAA,gCAAgB,EAAC,CAACC,QAAQ;QAC5C3C,cAAc,IAAI,IAAIA,cAAc,KAAK,IAAI,KAAK,IAAIA,UAAU2C,MAAM;QACtE,2EAA2E;QAC3E,IAAIA,MAAMC,kBAAkB,MAAMD,MAAMS,aAAa,KAAKT,MAAMK,MAAM,EAAE;YACpE;QACJ,CAAC;QACD,OAAOL,MAAMe,GAAG;YACZ,KAAKC,mBAAK;gBACN,IAAItB,kBAAkB,QAAQ;oBAC1B,IAAIuB;oBACHA,CAAAA,wBAAwB/B,aAAaiB,OAAO,AAAD,MAAO,IAAI,IAAIc,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBC,KAAK,EAAE;oBACpIlB,MAAMmB,cAAc;gBACxB,CAAC;gBACD;YACJ,KAAKR,qBAAa,CAACS,GAAG;YACtB,KAAKT,qBAAa,CAACU,IAAI;YACvB,KAAKV,qBAAa,CAACW,KAAK;YACxB,KAAKX,qBAAa,CAACY,OAAO;YAC1B,KAAKZ,qBAAa,CAACa,SAAS;YAC5B,KAAKb,qBAAa,CAACc,SAAS;YAC5B,KAAKd,qBAAa,CAACe,UAAU;gBACzB,OAAO/D,oBAAoB;oBACvBqC;oBACAK,QAAQL,MAAMS,aAAa;oBAC3BxD;oBACAM;oBACAmD,MAAMV,MAAMe,GAAG;gBACnB;QACR;QACA,MAAMY,uBAAuB3B,MAAMe,GAAG,CAACa,MAAM,KAAK,KAAK5B,MAAMe,GAAG,CAACc,KAAK,CAAC,SAAS,CAAC7B,MAAM8B,MAAM,IAAI,CAAC9B,MAAM+B,OAAO,IAAI,CAAC/B,MAAMgC,OAAO;QACjI,IAAIL,sBAAsB;YACtBhE,oBAAoB;gBAChBqC;gBACAK,QAAQL,MAAMS,aAAa;gBAC3BxD;gBACAM;gBACAmD,MAAMC,qBAAa,CAACsB,SAAS;YACjC;QACJ,CAAC;IACL;IACA,MAAMC,uBAAuBnC,IAAAA,gCAAgB,EAAC,CAACC,QAAQ;QACnD,MAAMmC,sBAAsBC,QAAQnD,WAAWkB,OAAO,IAAIC,IAAAA,4BAAe,EAACnB,WAAWkB,OAAO,EAAEH,MAAMK,MAAM;QAC1G,IAAI,CAAC8B,qBAAqB;YACtBjE,kBAAkB,IAAI;QAC1B,CAAC;IACL;IACA,MAAMmE,yBAAyBtC,IAAAA,gCAAgB,EAAC,CAACC,QAAQ;QACrD,MAAMmC,sBAAsBC,QAAQnD,WAAWkB,OAAO,IAAIC,IAAAA,4BAAe,EAACnB,WAAWkB,OAAO,EAAEH,MAAMK,MAAM;QAC1G,MAAMiC,6BAA6BF,QAAQvD,WAAWsB,OAAO,IAAIC,IAAAA,4BAAe,EAACvB,WAAWsB,OAAO,EAAEH,MAAMuC,aAAa;QACxH,IAAID,4BAA4B;YAC5B,OAAOpE,kBAAkB,IAAI;QACjC,CAAC;QACD,IAAI,CAACiE,qBAAqB;YACtB,OAAOjE,kBAAkB,KAAK;QAClC,CAAC;IACL;IACA,MAAMsE,eAAezC,IAAAA,gCAAgB,EAAC,CAACC,QAAQ;QAC3C,IAAIA,MAAMC,kBAAkB,IAAI;YAC5B;QACJ,CAAC;QACD,MAAMK,qBAAqBrB,WAAWkB,OAAO,IAAIC,IAAAA,4BAAe,EAACnB,WAAWkB,OAAO,EAAEH,MAAMK,MAAM;QACjG,IAAIC,oBAAoB;YACpB;QACJ,CAAC;QACD3C,oBAAoB;YAChBqC;YACA/C;YACAM;YACAmD,MAAM;YACNL,QAAQL,MAAMS,aAAa;QAC/B;IACJ;IACA,MAAMgC,WAAWlF,aAAa;IAC9B,MAAMmF,cAAcjE,OAAMkE,OAAO,CAAC,IAAI1E,mBAAmB2E,IAAAA,gCAAgB,EAAC/E,WAAWG,SAAS,EAAE;QAC5FH;QACAI;KACH;IACD,IAAIyE,aAAa;QACbA,YAAY/F,GAAG,GAAGgD;IACtB,CAAC;IACD,MAAMkD,YAAYpE,OAAMkE,OAAO,CAAC,IAAIpE,iBAAiBqE,IAAAA,gCAAgB,EAACnF,SAASO,SAAS,EAAE;QACtFP;QACAc;KACH;IACD,MAAMuE,iBAAiBrE,OAAMkE,OAAO,CAAC,IAAIC,IAAAA,gCAAgB,EAACpF,YAAY;YAC9DuF,UAAUN;YACVO,cAAc;gBACVC,UAAU,WAAW,GAAGxE,OAAMyE,aAAa,CAACC,gCAAe,EAAE,IAAI;gBACjE,eAAe,IAAI;YACvB;QACJ,IAAI;QACJ3F;QACAiF;KACH;IACD,IAAIK,gBAAgB;QAChBA,eAAenG,GAAG,GAAGkD;IACzB,CAAC;IACD,OAAO;QACH5C;QACAkC;QACAF;QACAD;QACAzB;QACAP;QACAoG,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,IAAAA,qCAAqB,EAAChG,IAAI;YAC5BiG,UAAU,CAAC;YACX,GAAG7F,IAAI;YACPf;YACA6G,MAAM;YACN,cAAcxG;YACd,CAACyG,sDAAyB,CAAC,EAAExG;YAC7B,gBAAgByC,kBAAkB,gBAAgBH,UAAUvB,SAAS;YACrE,iBAAiB0B,kBAAkB,WAAWH,UAAUvB,SAAS;YACjE,iBAAiByE,WAAWtD,OAAOnB,SAAS;YAC5CZ,SAAS0C;YACTzC,WAAWyD;YACX4C,aAAaxB;YACbyB,SAASzB;YACT0B,YAAYvB;YACZwB,QAAQxB;YACRyB,UAAUtB;QACd;QACA3E,SAAS6E;QACTjF,OAAOoF;QACPrF,YAAYsF;QACZiB,UAAUrE,kBAAkB,SAAS1B,YAAY4E,IAAAA,gCAAgB,EAAClD,kBAAkB,gBAAgBhD,MAAMsH,iBAAiB,GAAGtH,MAAMuH,cAAc,EAAE;YAChJlB,UAAU,IAAI;YACdC,cAAc;gBACVzD;gBACAgE,UAAU,CAAC;gBACX,eAAe,IAAI;gBACnB5G,KAAKuC;YACT;QACJ,EAAE;IACN;AACJ"}
|
|
@@ -6,23 +6,33 @@ Object.defineProperty(exports, "useTreeItemContextValues_unstable", {
|
|
|
6
6
|
enumerable: true,
|
|
7
7
|
get: ()=>useTreeItemContextValues_unstable
|
|
8
8
|
});
|
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
9
11
|
function useTreeItemContextValues_unstable(state) {
|
|
10
|
-
const { value ,
|
|
12
|
+
const { value , itemType , layoutRef , subtreeRef , open , actions , aside , expandIcon , selector } = state;
|
|
11
13
|
/**
|
|
12
14
|
* This context is created with "@fluentui/react-context-selector",
|
|
13
15
|
* there is no sense to memoize it
|
|
14
16
|
*/ const treeItem = {
|
|
15
|
-
isActionsVisible,
|
|
16
|
-
isAsideVisible,
|
|
17
17
|
value,
|
|
18
|
-
actionsRef,
|
|
19
18
|
itemType,
|
|
20
19
|
layoutRef,
|
|
21
20
|
subtreeRef,
|
|
22
|
-
expandIconRef,
|
|
23
21
|
open
|
|
24
22
|
};
|
|
23
|
+
const treeItemSlots = _react.useMemo(()=>({
|
|
24
|
+
actions,
|
|
25
|
+
aside,
|
|
26
|
+
expandIcon,
|
|
27
|
+
selector
|
|
28
|
+
}), [
|
|
29
|
+
actions,
|
|
30
|
+
aside,
|
|
31
|
+
expandIcon,
|
|
32
|
+
selector
|
|
33
|
+
]);
|
|
25
34
|
return {
|
|
26
|
-
treeItem
|
|
35
|
+
treeItem,
|
|
36
|
+
treeItemSlots
|
|
27
37
|
};
|
|
28
38
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItemContextValues.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["useTreeItemContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useTreeItemContextValues_unstable(state) {\n const { value , itemType , layoutRef , subtreeRef , open , actions , aside , expandIcon , selector } = state;\n /**\n * This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */ const treeItem = {\n value,\n itemType,\n layoutRef,\n subtreeRef,\n open\n };\n const treeItemSlots = React.useMemo(()=>({\n actions,\n aside,\n expandIcon,\n selector\n }), [\n actions,\n aside,\n expandIcon,\n selector\n ]);\n return {\n treeItem,\n treeItemSlots\n };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","actions","aside","expandIcon","selector","treeItem","treeItemSlots","React","useMemo"],"mappings":";;;;+BACgBA;;aAAAA;;;6DADO;AAChB,SAASA,kCAAkCC,KAAK,EAAE;IACrD,MAAM,EAAEC,MAAK,EAAGC,SAAQ,EAAGC,UAAS,EAAGC,WAAU,EAAGC,KAAI,EAAGC,QAAO,EAAGC,MAAK,EAAGC,WAAU,EAAGC,SAAQ,EAAG,GAAGT;IACxG;;;GAGD,GAAG,MAAMU,WAAW;QACfT;QACAC;QACAC;QACAC;QACAC;IACJ;IACA,MAAMM,gBAAgBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACjCP;YACAC;YACAC;YACAC;QACJ,CAAA,GAAI;QACJH;QACAC;QACAC;QACAC;KACH;IACD,OAAO;QACHC;QACAC;IACJ;AACJ"}
|
|
@@ -11,7 +11,7 @@ const _reactUtilities = require("@fluentui/react-utilities");
|
|
|
11
11
|
const _reactButton = require("@fluentui/react-button");
|
|
12
12
|
const renderTreeItemLayout_unstable = (state)=>{
|
|
13
13
|
const { slots , slotProps } = (0, _reactUtilities.getSlotsNext)(state);
|
|
14
|
-
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon), slots.iconBefore && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.iconBefore, slotProps.iconBefore), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.content, slotProps.content, slotProps.root.children), slots.iconAfter && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.iconAfter, slotProps.iconAfter), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactButton.ButtonContextProvider, {
|
|
14
|
+
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon), slots.selector && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.selector, slotProps.selector), slots.iconBefore && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.iconBefore, slotProps.iconBefore), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.content, slotProps.content, slotProps.root.children), slots.iconAfter && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.iconAfter, slotProps.iconAfter), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactButton.ButtonContextProvider, {
|
|
15
15
|
value: state.buttonContextValue
|
|
16
16
|
}, slots.actions && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.aside, slotProps.aside)));
|
|
17
17
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderTreeItemLayout.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n/**\n * Render the final JSX of TreeItemLayout\n */ export const renderTreeItemLayout_unstable = (state)=>{\n const { slots , slotProps } = getSlotsNext(state);\n return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.iconBefore && /*#__PURE__*/ createElement(slots.iconBefore, slotProps.iconBefore), /*#__PURE__*/ createElement(slots.content, slotProps.content, slotProps.root.children), slots.iconAfter && /*#__PURE__*/ createElement(slots.iconAfter, slotProps.iconAfter), /*#__PURE__*/ createElement(ButtonContextProvider, {\n value: state.buttonContextValue\n }, slots.actions && /*#__PURE__*/ createElement(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ createElement(slots.aside, slotProps.aside)));\n};\n"],"names":["renderTreeItemLayout_unstable","state","slots","slotProps","getSlotsNext","createElement","root","expandIcon","iconBefore","content","children","iconAfter","ButtonContextProvider","value","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;6BACS;AAG3B,MAAMA,gCAAgC,CAACC,QAAQ;IACtD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,UAAU,IAAI,WAAW,GAAGF,IAAAA,8BAAa,EAACH,MAAMK,UAAU,EAAEJ,UAAUI,UAAU,GAAGL,MAAMM,
|
|
1
|
+
{"version":3,"sources":["renderTreeItemLayout.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n/**\n * Render the final JSX of TreeItemLayout\n */ export const renderTreeItemLayout_unstable = (state)=>{\n const { slots , slotProps } = getSlotsNext(state);\n return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.selector && /*#__PURE__*/ createElement(slots.selector, slotProps.selector), slots.iconBefore && /*#__PURE__*/ createElement(slots.iconBefore, slotProps.iconBefore), /*#__PURE__*/ createElement(slots.content, slotProps.content, slotProps.root.children), slots.iconAfter && /*#__PURE__*/ createElement(slots.iconAfter, slotProps.iconAfter), /*#__PURE__*/ createElement(ButtonContextProvider, {\n value: state.buttonContextValue\n }, slots.actions && /*#__PURE__*/ createElement(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ createElement(slots.aside, slotProps.aside)));\n};\n"],"names":["renderTreeItemLayout_unstable","state","slots","slotProps","getSlotsNext","createElement","root","expandIcon","selector","iconBefore","content","children","iconAfter","ButtonContextProvider","value","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;6BACS;AAG3B,MAAMA,gCAAgC,CAACC,QAAQ;IACtD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,UAAU,IAAI,WAAW,GAAGF,IAAAA,8BAAa,EAACH,MAAMK,UAAU,EAAEJ,UAAUI,UAAU,GAAGL,MAAMM,QAAQ,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMM,QAAQ,EAAEL,UAAUK,QAAQ,GAAGN,MAAMO,UAAU,IAAI,WAAW,GAAGJ,IAAAA,8BAAa,EAACH,MAAMO,UAAU,EAAEN,UAAUM,UAAU,GAAG,WAAW,GAAGJ,IAAAA,8BAAa,EAACH,MAAMQ,OAAO,EAAEP,UAAUO,OAAO,EAAEP,UAAUG,IAAI,CAACK,QAAQ,GAAGT,MAAMU,SAAS,IAAI,WAAW,GAAGP,IAAAA,8BAAa,EAACH,MAAMU,SAAS,EAAET,UAAUS,SAAS,GAAG,WAAW,GAAGP,IAAAA,8BAAa,EAACQ,kCAAqB,EAAE;QACjiBC,OAAOb,MAAMc,kBAAkB;IACnC,GAAGb,MAAMc,OAAO,IAAI,WAAW,GAAGX,IAAAA,8BAAa,EAACH,MAAMc,OAAO,EAAEb,UAAUa,OAAO,GAAGd,MAAMe,KAAK,IAAI,WAAW,GAAGZ,IAAAA,8BAAa,EAACH,MAAMe,KAAK,EAAEd,UAAUc,KAAK;AAC9J"}
|
|
@@ -9,18 +9,14 @@ Object.defineProperty(exports, "useTreeItemLayout_unstable", {
|
|
|
9
9
|
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
10
10
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
11
11
|
const _reactUtilities = require("@fluentui/react-utilities");
|
|
12
|
-
const
|
|
13
|
-
const
|
|
12
|
+
const _contexts = require("../../contexts");
|
|
13
|
+
const _reactCheckbox = require("@fluentui/react-checkbox");
|
|
14
|
+
const _reactRadio = require("@fluentui/react-radio");
|
|
14
15
|
const useTreeItemLayout_unstable = (props, ref)=>{
|
|
15
|
-
const { content , iconAfter , iconBefore ,
|
|
16
|
-
const
|
|
17
|
-
const
|
|
18
|
-
const
|
|
19
|
-
const isAsideVisible = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.isAsideVisible);
|
|
20
|
-
var _ref;
|
|
21
|
-
const isActionsVisible = (_ref = (0, _reactUtilities.isResolvedShorthand)(actions) ? actions.visible : undefined) !== null && _ref !== void 0 ? _ref : isActionsVisibleContext;
|
|
22
|
-
const isBranch = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType === 'branch');
|
|
23
|
-
const actionsRef = (0, _reactUtilities.useMergedRefs)((0, _reactUtilities.isResolvedShorthand)(actions) ? actions.ref : undefined, (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.actionsRef));
|
|
16
|
+
const { content , iconAfter , iconBefore , as ='span' } = props;
|
|
17
|
+
const { actions , aside , expandIcon , selector } = (0, _contexts.useTreeItemSlotsContext_unstable)();
|
|
18
|
+
const layoutRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.layoutRef);
|
|
19
|
+
const selectionMode = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
|
|
24
20
|
return {
|
|
25
21
|
components: {
|
|
26
22
|
root: 'div',
|
|
@@ -29,7 +25,9 @@ const useTreeItemLayout_unstable = (props, ref)=>{
|
|
|
29
25
|
content: 'div',
|
|
30
26
|
iconAfter: 'div',
|
|
31
27
|
actions: 'div',
|
|
32
|
-
aside: 'div'
|
|
28
|
+
aside: 'div',
|
|
29
|
+
// Casting here to a union between checkbox and radio
|
|
30
|
+
selector: selectionMode === 'multiselect' ? _reactCheckbox.Checkbox : _reactRadio.Radio
|
|
33
31
|
},
|
|
34
32
|
buttonContextValue: {
|
|
35
33
|
size: 'small'
|
|
@@ -51,22 +49,9 @@ const useTreeItemLayout_unstable = (props, ref)=>{
|
|
|
51
49
|
'aria-hidden': true
|
|
52
50
|
}
|
|
53
51
|
}),
|
|
54
|
-
aside:
|
|
55
|
-
actions:
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
} : actions, {
|
|
59
|
-
defaultProps: {
|
|
60
|
-
ref: actionsRef
|
|
61
|
-
}
|
|
62
|
-
}) : undefined,
|
|
63
|
-
expandIcon: (0, _reactUtilities.resolveShorthand)(expandIcon, {
|
|
64
|
-
required: isBranch,
|
|
65
|
-
defaultProps: {
|
|
66
|
-
children: /*#__PURE__*/ _react.createElement(_treeItemChevron.TreeItemChevron, null),
|
|
67
|
-
'aria-hidden': true,
|
|
68
|
-
ref: (0, _reactUtilities.useMergedRefs)((0, _reactUtilities.isResolvedShorthand)(expandIcon) ? expandIcon.ref : undefined, expandIconRef)
|
|
69
|
-
}
|
|
70
|
-
})
|
|
52
|
+
aside: (0, _reactUtilities.resolveShorthand)(aside),
|
|
53
|
+
actions: (0, _reactUtilities.resolveShorthand)(actions),
|
|
54
|
+
expandIcon: (0, _reactUtilities.resolveShorthand)(expandIcon),
|
|
55
|
+
selector: (0, _reactUtilities.resolveShorthand)(selector)
|
|
71
56
|
};
|
|
72
57
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps,
|
|
1
|
+
{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable, useTreeItemSlotsContext_unstable } from '../../contexts';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */ export const useTreeItemLayout_unstable = (props, ref)=>{\n const { content , iconAfter , iconBefore , as ='span' } = props;\n const { actions , aside , expandIcon , selector } = useTreeItemSlotsContext_unstable();\n const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n return {\n components: {\n root: 'div',\n expandIcon: 'div',\n iconBefore: 'div',\n content: 'div',\n iconAfter: 'div',\n actions: 'div',\n aside: 'div',\n // Casting here to a union between checkbox and radio\n selector: selectionMode === 'multiselect' ? Checkbox : Radio\n },\n buttonContextValue: {\n size: 'small'\n },\n root: getNativeElementProps(as, {\n ...props,\n ref: useMergedRefs(ref, layoutRef)\n }),\n iconBefore: resolveShorthand(iconBefore, {\n defaultProps: {\n 'aria-hidden': true\n }\n }),\n content: resolveShorthand(content, {\n required: true\n }),\n iconAfter: resolveShorthand(iconAfter, {\n defaultProps: {\n 'aria-hidden': true\n }\n }),\n aside: resolveShorthand(aside),\n actions: resolveShorthand(actions),\n expandIcon: resolveShorthand(expandIcon),\n selector: resolveShorthand(selector)\n };\n};\n"],"names":["useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","as","actions","aside","expandIcon","selector","useTreeItemSlotsContext_unstable","layoutRef","useTreeItemContext_unstable","ctx","selectionMode","useTreeContext_unstable","components","root","Checkbox","Radio","buttonContextValue","size","getNativeElementProps","useMergedRefs","resolveShorthand","defaultProps","required"],"mappings":";;;;+BAaiBA;;aAAAA;;;6DAbM;gCACgD;0BACgC;+BAC9E;4BACH;AASX,MAAMA,6BAA6B,CAACC,OAAOC,MAAM;IACxD,MAAM,EAAEC,QAAO,EAAGC,UAAS,EAAGC,WAAU,EAAGC,IAAI,OAAM,EAAG,GAAGL;IAC3D,MAAM,EAAEM,QAAO,EAAGC,MAAK,EAAGC,WAAU,EAAGC,SAAQ,EAAG,GAAGC,IAAAA,0CAAgC;IACrF,MAAMC,YAAYC,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAClE,MAAMG,gBAAgBC,IAAAA,iCAAuB,EAAC,CAACF,MAAMA,IAAIC,aAAa;IACtE,OAAO;QACHE,YAAY;YACRC,MAAM;YACNT,YAAY;YACZJ,YAAY;YACZF,SAAS;YACTC,WAAW;YACXG,SAAS;YACTC,OAAO;YACP,qDAAqD;YACrDE,UAAUK,kBAAkB,gBAAgBI,uBAAQ,GAAGC,iBAAK;QAChE;QACAC,oBAAoB;YAChBC,MAAM;QACV;QACAJ,MAAMK,IAAAA,qCAAqB,EAACjB,IAAI;YAC5B,GAAGL,KAAK;YACRC,KAAKsB,IAAAA,6BAAa,EAACtB,KAAKU;QAC5B;QACAP,YAAYoB,IAAAA,gCAAgB,EAACpB,YAAY;YACrCqB,cAAc;gBACV,eAAe,IAAI;YACvB;QACJ;QACAvB,SAASsB,IAAAA,gCAAgB,EAACtB,SAAS;YAC/BwB,UAAU,IAAI;QAClB;QACAvB,WAAWqB,IAAAA,gCAAgB,EAACrB,WAAW;YACnCsB,cAAc;gBACV,eAAe,IAAI;YACvB;QACJ;QACAlB,OAAOiB,IAAAA,gCAAgB,EAACjB;QACxBD,SAASkB,IAAAA,gCAAgB,EAAClB;QAC1BE,YAAYgB,IAAAA,gCAAgB,EAAChB;QAC7BC,UAAUe,IAAAA,gCAAgB,EAACf;IAC/B;AACJ"}
|
|
@@ -22,7 +22,8 @@ const treeItemLayoutClassNames = {
|
|
|
22
22
|
iconAfter: 'fui-TreeItemLayout__iconAfter',
|
|
23
23
|
expandIcon: 'fui-TreeItemLayout__expandIcon',
|
|
24
24
|
aside: 'fui-TreeItemLayout__aside',
|
|
25
|
-
actions: 'fui-TreeItemLayout__actions'
|
|
25
|
+
actions: 'fui-TreeItemLayout__actions',
|
|
26
|
+
selector: 'fui-TreeItemLayout__selector'
|
|
26
27
|
};
|
|
27
28
|
/**
|
|
28
29
|
* Styles for the root slot
|
|
@@ -352,7 +353,7 @@ const useIconAfterStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
|
352
353
|
]
|
|
353
354
|
});
|
|
354
355
|
const useTreeItemLayoutStyles_unstable = (state)=>{
|
|
355
|
-
const { content , iconAfter , iconBefore , expandIcon , root } = state;
|
|
356
|
+
const { content , iconAfter , iconBefore , expandIcon , root , aside , actions , selector } = state;
|
|
356
357
|
const rootStyles = useRootStyles();
|
|
357
358
|
const actionsStyles = useActionsStyles();
|
|
358
359
|
const asideStyles = useAsideStyles();
|
|
@@ -375,14 +376,17 @@ const useTreeItemLayoutStyles_unstable = (state)=>{
|
|
|
375
376
|
if (iconAfter) {
|
|
376
377
|
iconAfter.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);
|
|
377
378
|
}
|
|
378
|
-
if (
|
|
379
|
-
|
|
379
|
+
if (actions) {
|
|
380
|
+
actions.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.actions, actionsStyles.base, actions.className);
|
|
380
381
|
}
|
|
381
|
-
if (
|
|
382
|
-
|
|
382
|
+
if (aside) {
|
|
383
|
+
aside.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);
|
|
383
384
|
}
|
|
384
|
-
if (
|
|
385
|
-
|
|
385
|
+
if (expandIcon) {
|
|
386
|
+
expandIcon.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
|
|
387
|
+
}
|
|
388
|
+
if (selector) {
|
|
389
|
+
selector.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.selector, selector.className);
|
|
386
390
|
}
|
|
387
391
|
return state;
|
|
388
392
|
}; //# sourceMappingURL=useTreeItemLayoutStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n root: 'fui-TreeItemLayout',\n iconBefore: 'fui-TreeItemLayout__iconBefore',\n content: 'fui-TreeItemLayout__content',\n iconAfter: 'fui-TreeItemLayout__iconAfter',\n expandIcon: 'fui-TreeItemLayout__expandIcon',\n aside: 'fui-TreeItemLayout__aside',\n actions: 'fui-TreeItemLayout__actions'\n};\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n sshi5w: \"f1nxs5xn\",\n B7ck84d: \"f1ewtqcl\",\n Ijaq50: \"f15ws6j\",\n Br312pm: \"f135tdbu\",\n nk6f5a: \"f2e2169\",\n Bw0ie65: \"f4rqp6x\",\n Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n lj723h: \"flvvhsy\",\n ecr2s2: \"f1wfn5kd\",\n qya0sb: \"f1ih54s9\",\n Bi91k9c: \"fnwyq0v\",\n Jwef8y: \"f1t94bn6\",\n Becwuud: \"f1jk1nfw\"\n },\n leaf: {\n uwmqm3: [\"f1k1erfc\", \"faevyjx\"]\n },\n branch: {\n uwmqm3: [\"fo100m9\", \"f6yw3pu\"]\n },\n medium: {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\"\n },\n small: {\n sshi5w: \"f1pha7fy\",\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fy9rknc\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"fwrc4pm\"\n },\n subtle: {},\n \"subtle-alpha\": {\n Jwef8y: \"f146ro5n\",\n ecr2s2: \"fkam630\"\n },\n transparent: {\n De3pzq: \"f1c21dwh\",\n Jwef8y: \"fjxutwb\",\n ecr2s2: \"fophhak\"\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f1nxs5xn{min-height:32px;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f15ws6j{-ms-grid-row:layout;grid-row-start:layout;}\", \".f135tdbu{-ms-grid-column:layout;grid-column-start:layout;}\", \".f2e2169{-ms-grid-row-span:layout;grid-row-end:layout;}\", \".f4rqp6x{-ms-grid-column-span:layout;grid-column-end:layout;}\", \".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}\", \".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}\", \".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}\", \".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}\", \".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}\", \".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".f1pha7fy{min-height:24px;}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\"],\n a: [\".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}\", \".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}\", \".f1ih54s9:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}\", \".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}\", \".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}\"],\n h: [\".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\", \".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}\", \".f1jk1nfw:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}\", \".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}\", \".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}\"]\n});\n/**\n * Styles for the action icon slot\n */\nconst useActionsStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n Frg6f3: [\"fcgxt0o\", \"f1ujusj6\"],\n qhf8xq: \"f10pi13n\",\n Bj3rh1h: \"f19g0ac\",\n Ijaq50: \"fobksn0\",\n Br312pm: \"fmy5l6f\",\n nk6f5a: \"fzqypwc\",\n Bw0ie65: \"f1tmftl3\",\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".fcgxt0o{margin-left:auto;}\", \".f1ujusj6{margin-right:auto;}\", \".f10pi13n{position:relative;}\", \".f19g0ac{z-index:1;}\", \".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}\", \".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}\", \".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}\", \".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}\", \".f1g0x7ka{padding-top:0;}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1qch9an{padding-bottom:0;}\"]\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n Frg6f3: [\"fcgxt0o\", \"f1ujusj6\"],\n Bt984gj: \"f122n59\",\n Bj3rh1h: \"f11zp4z2\",\n Ijaq50: \"fobksn0\",\n Br312pm: \"fmy5l6f\",\n nk6f5a: \"fzqypwc\",\n Bw0ie65: \"f1tmftl3\",\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"fw5db7e\", \"f1uw59to\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"f1uw59to\", \"fw5db7e\"],\n i8kkvl: \"f1ufnopg\",\n Belr9w4: \"f14sijuj\"\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".fcgxt0o{margin-left:auto;}\", \".f1ujusj6{margin-right:auto;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f11zp4z2{z-index:0;}\", \".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}\", \".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}\", \".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}\", \".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}\", \".f1g0x7ka{padding-top:0;}\", \".fw5db7e{padding-right:var(--spacingHorizontalM);}\", \".f1uw59to{padding-left:var(--spacingHorizontalM);}\", \".f1qch9an{padding-bottom:0;}\", \".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}\", \".f14sijuj{row-gap:var(--spacingHorizontalXS);}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n Brf1p80: \"f4d9j23\",\n Bf4jedk: \"f17fgpbq\",\n B7ck84d: \"f1ewtqcl\",\n sj55zd: \"f11d4kpn\",\n Bh6795r: \"f1jhi6b8\",\n Bnnss6s: \"fi64zpg\",\n xawz: \"f1rmlqtg\",\n z8tnut: \"f1ywm7hm\",\n z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n Byoj8tv: \"f14wxoun\",\n uwmqm3: [\"f1cnd47f\", \"fhxju0i\"]\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}\", \".f17fgpbq{min-width:24px;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f11d4kpn{color:var(--colorNeutralForeground3);}\", \".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}\", \".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}\", \".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f14wxoun{padding-bottom:var(--spacingVerticalXS);}\"]\n});\n/**\n * Styles for the content slot\n */\nconst useContentStyles = /*#__PURE__*/__styles({\n base: {\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"ffczdla\", \"fgiv446\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"fgiv446\", \"ffczdla\"]\n }\n}, {\n d: [\".f1g0x7ka{padding-top:0;}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".f1qch9an{padding-bottom:0;}\"]\n});\n/**\n * Styles for the before/after icon slot\n */\nconst useIconStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n sj55zd: \"fkfq4zb\",\n Bg96gwp: \"f106mvju\",\n Be2twd7: \"f1pp30po\"\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".fkfq4zb{color:var(--colorNeutralForeground2);}\", \".f106mvju{line-height:var(--lineHeightBase500);}\", \".f1pp30po{font-size:var(--fontSizeBase500);}\"]\n});\nconst useIconBeforeStyles = /*#__PURE__*/__styles({\n medium: {\n z189sj: [\"f7x41pl\", \"fruq291\"]\n },\n small: {\n z189sj: [\"ffczdla\", \"fgiv446\"]\n }\n}, {\n d: [\".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\"]\n});\nconst useIconAfterStyles = /*#__PURE__*/__styles({\n medium: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"]\n },\n small: {\n uwmqm3: [\"fgiv446\", \"ffczdla\"]\n }\n}, {\n d: [\".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\"]\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = state => {\n const {\n content,\n iconAfter,\n iconBefore,\n expandIcon,\n root\n } = state;\n const rootStyles = useRootStyles();\n const actionsStyles = useActionsStyles();\n const asideStyles = useAsideStyles();\n const contentStyles = useContentStyles();\n const expandIconStyles = useExpandIconStyles();\n const iconStyles = useIconStyles();\n const iconBeforeStyles = useIconBeforeStyles();\n const iconAfterStyles = useIconAfterStyles();\n const size = useTreeContext_unstable(ctx => ctx.size);\n const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n content.className = mergeClasses(treeItemLayoutClassNames.content, contentStyles.base, content.className);\n if (expandIcon) {\n expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n }\n if (iconBefore) {\n iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBeforeStyles[size], iconBefore.className);\n }\n if (iconAfter) {\n iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);\n }\n if (state.actions) {\n state.actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, state.actions.className);\n }\n if (state.aside) {\n state.aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, state.aside.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n }\n return state;\n};\n//# sourceMappingURL=useTreeItemLayoutStyles.styles.js.map"],"names":["treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable","root","iconBefore","content","iconAfter","expandIcon","aside","actions","useRootStyles","__styles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","z8tnut","z189sj","Byoj8tv","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","useContentStyles","useIconStyles","useIconBeforeStyles","useIconAfterStyles","state","rootStyles","actionsStyles","asideStyles","contentStyles","expandIconStyles","iconStyles","iconBeforeStyles","iconAfterStyles","size","useTreeContext_unstable","ctx","appearance","itemType","useTreeItemContext_unstable","className","mergeClasses"],"mappings":";;;;;;;;;;;IAKaA,wBAAwB,MAAxBA;IAuLAC,gCAAgC,MAAhCA;;uBA5LsC;6BAEX;iCAEI;AACrC,MAAMD,2BAA2B;IACtCE,MAAM;IACNC,YAAY;IACZC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,OAAO;IACPC,SAAS;AACX;AACA;;CAEC,GACD,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC1CC,MAAM;QACJC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAU;QAChCC,SAAS;YAAC;YAAW;SAAW;QAChCC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAC,QAAQ;QACND,QAAQ;YAAC;YAAW;SAAU;IAChC;IACAE,QAAQ;QACNC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;IACAC,OAAO;QACLxB,QAAQ;QACRoB,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;IACAE,QAAQ,CAAC;IACT,gBAAgB;QACdX,QAAQ;QACRH,QAAQ;IACV;IACAe,aAAa;QACXC,QAAQ;QACRb,QAAQ;QACRH,QAAQ;IACV;AACF,GAAG;IACDiB,GAAG;QAAC;QAAwF;QAA2G;QAA+B;QAAqC;QAAwD;QAA+D;QAA2D;QAAiE;QAAoE;QAAmE;QAAiE;QAA+D;QAAiG;QAAiG;QAAsG;QAAuG;QAAgD;QAA+C;QAAmD;QAAoD;QAA+B;QAA+C;QAAmD;KAAiE;IAC5hDC,GAAG;QAAC;QAAiE;QAA2E;QAAkG;QAAoF;KAA8E;IACpZC,GAAG;QAAC;QAA8D;QAAwE;QAA+F;QAAkF;KAA2E;AACxY;AACA;;CAEC,GACD,MAAMC,mBAAmB,WAAW,GAAEnC,IAAAA,kBAAQ,EAAC;IAC7CC,MAAM;QACJC,QAAQ;QACRkC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;QACRC,SAAS;QACThC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACT8B,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTpB,QAAQ;YAAC;YAAY;SAAW;IAClC;AACF,GAAG;IACDW,GAAG;QAAC;QAAwF;QAA+B;QAAiC;QAAiC;QAAwB;QAAsD;QAA4D;QAAyD;QAAgE;QAA6B;QAAuD;QAAsD;KAA+B;AAC3mB;AACA;;CAEC,GACD,MAAMU,iBAAiB,WAAW,GAAE1C,IAAAA,kBAAQ,EAAC;IAC3CC,MAAM;QACJC,QAAQ;QACRkC,QAAQ;YAAC;YAAW;SAAW;QAC/BjC,SAAS;QACTmC,SAAS;QACThC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACT8B,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTpB,QAAQ;YAAC;YAAY;SAAU;QAC/BsB,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDZ,GAAG;QAAC;QAAwF;QAA+B;QAAiC;QAA2G;QAAyB;QAAsD;QAA4D;QAAyD;QAAgE;QAA6B;QAAsD;QAAsD;QAAgC;QAAmG;KAAiD;AAC10B;AACA;;CAEC,GACD,MAAMa,sBAAsB,WAAW,GAAE7C,IAAAA,kBAAQ,EAAC;IAChDC,MAAM;QACJC,QAAQ;QACRC,SAAS;QACT2C,SAAS;QACTC,SAAS;QACT1C,SAAS;QACT2C,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,MAAM;QACNZ,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTpB,QAAQ;YAAC;YAAY;SAAU;IACjC;AACF,GAAG;IACDW,GAAG;QAAC;QAAwF;QAA2G;QAAiH;QAA8B;QAAqC;QAAoD;QAAsF;QAAsE;QAAoF;QAAoD;QAA8B;QAA8B;KAAsD;AACv0B;AACA;;CAEC,GACD,MAAMoB,mBAAmB,WAAW,GAAEpD,IAAAA,kBAAQ,EAAC;IAC7CC,MAAM;QACJsC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,SAAS;QACTpB,QAAQ;YAAC;YAAW;SAAU;IAChC;AACF,GAAG;IACDW,GAAG;QAAC;QAA6B;QAAwD;QAAuD;KAA+B;AACjL;AACA;;CAEC,GACD,MAAMqB,gBAAgB,WAAW,GAAErD,IAAAA,kBAAQ,EAAC;IAC1CC,MAAM;QACJC,QAAQ;QACRC,SAAS;QACT6C,QAAQ;QACRrB,SAAS;QACTF,SAAS;IACX;AACF,GAAG;IACDO,GAAG;QAAC;QAAwF;QAA2G;QAAmD;QAAoD;KAA+C;AAC/V;AACA,MAAMsB,sBAAsB,WAAW,GAAEtD,IAAAA,kBAAQ,EAAC;IAChDuB,QAAQ;QACNiB,QAAQ;YAAC;YAAW;SAAU;IAChC;IACAZ,OAAO;QACLY,QAAQ;YAAC;YAAW;SAAU;IAChC;AACF,GAAG;IACDR,GAAG;QAAC;QAAuD;QAAsD;QAAwD;KAAsD;AACjO;AACA,MAAMuB,qBAAqB,WAAW,GAAEvD,IAAAA,kBAAQ,EAAC;IAC/CuB,QAAQ;QACNF,QAAQ;YAAC;YAAW;SAAU;IAChC;IACAO,OAAO;QACLP,QAAQ;YAAC;YAAW;SAAU;IAChC;AACF,GAAG;IACDW,GAAG;QAAC;QAAsD;QAAuD;QAAuD;KAAuD;AACjO;AAIO,MAAMzC,mCAAmCiE,CAAAA,QAAS;IACvD,MAAM,EACJ9D,QAAO,EACPC,UAAS,EACTF,WAAU,EACVG,WAAU,EACVJ,KAAI,EACL,GAAGgE;IACJ,MAAMC,aAAa1D;IACnB,MAAM2D,gBAAgBvB;IACtB,MAAMwB,cAAcjB;IACpB,MAAMkB,gBAAgBR;IACtB,MAAMS,mBAAmBhB;IACzB,MAAMiB,aAAaT;IACnB,MAAMU,mBAAmBT;IACzB,MAAMU,kBAAkBT;IACxB,MAAMU,OAAOC,IAAAA,oCAAuB,EAACC,CAAAA,MAAOA,IAAIF,IAAI;IACpD,MAAMG,aAAaF,IAAAA,oCAAuB,EAACC,CAAAA,MAAOA,IAAIC,UAAU;IAChE,MAAMC,WAAWC,IAAAA,4CAA2B,EAACH,CAAAA,MAAOA,IAAIE,QAAQ;IAChE7E,KAAK+E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,yBAAyBE,IAAI,EAAEiE,WAAWxD,IAAI,EAAEwD,UAAU,CAACW,WAAW,EAAEX,UAAU,CAACQ,KAAK,EAAER,UAAU,CAACY,SAAS,EAAE7E,KAAK+E,SAAS;IAC5J7E,QAAQ6E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,yBAAyBI,OAAO,EAAEkE,cAAc3D,IAAI,EAAEP,QAAQ6E,SAAS;IACxG,IAAI3E,YAAY;QACdA,WAAW2E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,yBAAyBM,UAAU,EAAEiE,iBAAiB5D,IAAI,EAAEL,WAAW2E,SAAS;IACtH,CAAC;IACD,IAAI9E,YAAY;QACdA,WAAW8E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,yBAAyBG,UAAU,EAAEqE,WAAW7D,IAAI,EAAE8D,gBAAgB,CAACE,KAAK,EAAExE,WAAW8E,SAAS;IACxI,CAAC;IACD,IAAI5E,WAAW;QACbA,UAAU4E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,yBAAyBK,SAAS,EAAEmE,WAAW7D,IAAI,EAAE+D,eAAe,CAACC,KAAK,EAAEtE,UAAU4E,SAAS;IACpI,CAAC;IACD,IAAIf,MAAM1D,OAAO,EAAE;QACjB0D,MAAM1D,OAAO,CAACyE,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,yBAAyBQ,OAAO,EAAE4D,cAAczD,IAAI,EAAEuD,MAAM1D,OAAO,CAACyE,SAAS;IACtH,CAAC;IACD,IAAIf,MAAM3D,KAAK,EAAE;QACf2D,MAAM3D,KAAK,CAAC0E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,yBAAyBO,KAAK,EAAE8D,YAAY1D,IAAI,EAAEuD,MAAM3D,KAAK,CAAC0E,SAAS;IAC9G,CAAC;IACD,IAAIf,MAAM5D,UAAU,EAAE;QACpB4D,MAAM5D,UAAU,CAAC2E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,yBAAyBM,UAAU,EAAEiE,iBAAiB5D,IAAI,EAAEuD,MAAM5D,UAAU,CAAC2E,SAAS;IAClI,CAAC;IACD,OAAOf;AACT,GACA,0DAA0D"}
|
|
1
|
+
{"version":3,"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n root: 'fui-TreeItemLayout',\n iconBefore: 'fui-TreeItemLayout__iconBefore',\n content: 'fui-TreeItemLayout__content',\n iconAfter: 'fui-TreeItemLayout__iconAfter',\n expandIcon: 'fui-TreeItemLayout__expandIcon',\n aside: 'fui-TreeItemLayout__aside',\n actions: 'fui-TreeItemLayout__actions',\n selector: 'fui-TreeItemLayout__selector'\n};\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n sshi5w: \"f1nxs5xn\",\n B7ck84d: \"f1ewtqcl\",\n Ijaq50: \"f15ws6j\",\n Br312pm: \"f135tdbu\",\n nk6f5a: \"f2e2169\",\n Bw0ie65: \"f4rqp6x\",\n Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n lj723h: \"flvvhsy\",\n ecr2s2: \"f1wfn5kd\",\n qya0sb: \"f1ih54s9\",\n Bi91k9c: \"fnwyq0v\",\n Jwef8y: \"f1t94bn6\",\n Becwuud: \"f1jk1nfw\"\n },\n leaf: {\n uwmqm3: [\"f1k1erfc\", \"faevyjx\"]\n },\n branch: {\n uwmqm3: [\"fo100m9\", \"f6yw3pu\"]\n },\n medium: {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\"\n },\n small: {\n sshi5w: \"f1pha7fy\",\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fy9rknc\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"fwrc4pm\"\n },\n subtle: {},\n \"subtle-alpha\": {\n Jwef8y: \"f146ro5n\",\n ecr2s2: \"fkam630\"\n },\n transparent: {\n De3pzq: \"f1c21dwh\",\n Jwef8y: \"fjxutwb\",\n ecr2s2: \"fophhak\"\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f1nxs5xn{min-height:32px;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f15ws6j{-ms-grid-row:layout;grid-row-start:layout;}\", \".f135tdbu{-ms-grid-column:layout;grid-column-start:layout;}\", \".f2e2169{-ms-grid-row-span:layout;grid-row-end:layout;}\", \".f4rqp6x{-ms-grid-column-span:layout;grid-column-end:layout;}\", \".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}\", \".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}\", \".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}\", \".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}\", \".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}\", \".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".f1pha7fy{min-height:24px;}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\"],\n a: [\".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}\", \".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}\", \".f1ih54s9:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}\", \".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}\", \".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}\"],\n h: [\".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\", \".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}\", \".f1jk1nfw:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}\", \".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}\", \".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}\"]\n});\n/**\n * Styles for the action icon slot\n */\nconst useActionsStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n Frg6f3: [\"fcgxt0o\", \"f1ujusj6\"],\n qhf8xq: \"f10pi13n\",\n Bj3rh1h: \"f19g0ac\",\n Ijaq50: \"fobksn0\",\n Br312pm: \"fmy5l6f\",\n nk6f5a: \"fzqypwc\",\n Bw0ie65: \"f1tmftl3\",\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".fcgxt0o{margin-left:auto;}\", \".f1ujusj6{margin-right:auto;}\", \".f10pi13n{position:relative;}\", \".f19g0ac{z-index:1;}\", \".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}\", \".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}\", \".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}\", \".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}\", \".f1g0x7ka{padding-top:0;}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1qch9an{padding-bottom:0;}\"]\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n Frg6f3: [\"fcgxt0o\", \"f1ujusj6\"],\n Bt984gj: \"f122n59\",\n Bj3rh1h: \"f11zp4z2\",\n Ijaq50: \"fobksn0\",\n Br312pm: \"fmy5l6f\",\n nk6f5a: \"fzqypwc\",\n Bw0ie65: \"f1tmftl3\",\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"fw5db7e\", \"f1uw59to\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"f1uw59to\", \"fw5db7e\"],\n i8kkvl: \"f1ufnopg\",\n Belr9w4: \"f14sijuj\"\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".fcgxt0o{margin-left:auto;}\", \".f1ujusj6{margin-right:auto;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f11zp4z2{z-index:0;}\", \".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}\", \".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}\", \".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}\", \".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}\", \".f1g0x7ka{padding-top:0;}\", \".fw5db7e{padding-right:var(--spacingHorizontalM);}\", \".f1uw59to{padding-left:var(--spacingHorizontalM);}\", \".f1qch9an{padding-bottom:0;}\", \".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}\", \".f14sijuj{row-gap:var(--spacingHorizontalXS);}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n Brf1p80: \"f4d9j23\",\n Bf4jedk: \"f17fgpbq\",\n B7ck84d: \"f1ewtqcl\",\n sj55zd: \"f11d4kpn\",\n Bh6795r: \"f1jhi6b8\",\n Bnnss6s: \"fi64zpg\",\n xawz: \"f1rmlqtg\",\n z8tnut: \"f1ywm7hm\",\n z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n Byoj8tv: \"f14wxoun\",\n uwmqm3: [\"f1cnd47f\", \"fhxju0i\"]\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}\", \".f17fgpbq{min-width:24px;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f11d4kpn{color:var(--colorNeutralForeground3);}\", \".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}\", \".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}\", \".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f14wxoun{padding-bottom:var(--spacingVerticalXS);}\"]\n});\n/**\n * Styles for the content slot\n */\nconst useContentStyles = /*#__PURE__*/__styles({\n base: {\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"ffczdla\", \"fgiv446\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"fgiv446\", \"ffczdla\"]\n }\n}, {\n d: [\".f1g0x7ka{padding-top:0;}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".f1qch9an{padding-bottom:0;}\"]\n});\n/**\n * Styles for the before/after icon slot\n */\nconst useIconStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n sj55zd: \"fkfq4zb\",\n Bg96gwp: \"f106mvju\",\n Be2twd7: \"f1pp30po\"\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".fkfq4zb{color:var(--colorNeutralForeground2);}\", \".f106mvju{line-height:var(--lineHeightBase500);}\", \".f1pp30po{font-size:var(--fontSizeBase500);}\"]\n});\nconst useIconBeforeStyles = /*#__PURE__*/__styles({\n medium: {\n z189sj: [\"f7x41pl\", \"fruq291\"]\n },\n small: {\n z189sj: [\"ffczdla\", \"fgiv446\"]\n }\n}, {\n d: [\".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\"]\n});\nconst useIconAfterStyles = /*#__PURE__*/__styles({\n medium: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"]\n },\n small: {\n uwmqm3: [\"fgiv446\", \"ffczdla\"]\n }\n}, {\n d: [\".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\"]\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = state => {\n const {\n content,\n iconAfter,\n iconBefore,\n expandIcon,\n root,\n aside,\n actions,\n selector\n } = state;\n const rootStyles = useRootStyles();\n const actionsStyles = useActionsStyles();\n const asideStyles = useAsideStyles();\n const contentStyles = useContentStyles();\n const expandIconStyles = useExpandIconStyles();\n const iconStyles = useIconStyles();\n const iconBeforeStyles = useIconBeforeStyles();\n const iconAfterStyles = useIconAfterStyles();\n const size = useTreeContext_unstable(ctx => ctx.size);\n const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n content.className = mergeClasses(treeItemLayoutClassNames.content, contentStyles.base, content.className);\n if (expandIcon) {\n expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n }\n if (iconBefore) {\n iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBeforeStyles[size], iconBefore.className);\n }\n if (iconAfter) {\n iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);\n }\n if (actions) {\n actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, actions.className);\n }\n if (aside) {\n aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);\n }\n if (expandIcon) {\n expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n }\n if (selector) {\n selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n }\n return state;\n};\n//# sourceMappingURL=useTreeItemLayoutStyles.styles.js.map"],"names":["treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable","root","iconBefore","content","iconAfter","expandIcon","aside","actions","selector","useRootStyles","__styles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","z8tnut","z189sj","Byoj8tv","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","useContentStyles","useIconStyles","useIconBeforeStyles","useIconAfterStyles","state","rootStyles","actionsStyles","asideStyles","contentStyles","expandIconStyles","iconStyles","iconBeforeStyles","iconAfterStyles","size","useTreeContext_unstable","ctx","appearance","itemType","useTreeItemContext_unstable","className","mergeClasses"],"mappings":"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"}
|
|
@@ -5,3 +5,4 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
6
|
_exportStar(require("./treeContext"), exports);
|
|
7
7
|
_exportStar(require("./treeItemContext"), exports);
|
|
8
|
+
_exportStar(require("./treeItemSlotsContext"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA"}
|
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\nexport * from './treeItemSlotsContext';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA"}
|
|
@@ -15,9 +15,12 @@ _export(exports, {
|
|
|
15
15
|
});
|
|
16
16
|
const _reactContextSelector = require("@fluentui/react-context-selector");
|
|
17
17
|
const _immutableSet = require("../utils/ImmutableSet");
|
|
18
|
+
const _immutableMap = require("../utils/ImmutableMap");
|
|
18
19
|
const defaultContextValue = {
|
|
19
20
|
level: 0,
|
|
20
|
-
|
|
21
|
+
selectionMode: 'none',
|
|
22
|
+
openItems: _immutableSet.ImmutableSet.empty,
|
|
23
|
+
checkedItems: _immutableMap.ImmutableMap.empty,
|
|
21
24
|
requestTreeResponse: noop,
|
|
22
25
|
appearance: 'subtle',
|
|
23
26
|
size: 'medium'
|