@mui/x-tree-view 7.0.0-beta.7 → 7.0.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.
- package/CHANGELOG.md +195 -12
- package/README.md +1 -1
- package/RichTreeView/RichTreeView.js +12 -14
- package/RichTreeView/RichTreeView.types.d.ts +1 -1
- package/SimpleTreeView/SimpleTreeView.js +3 -4
- package/TreeItem/TreeItem.js +43 -35
- package/TreeItem/TreeItem.types.d.ts +3 -3
- package/TreeItem/TreeItemContent.d.ts +7 -7
- package/TreeItem/TreeItemContent.js +10 -10
- package/TreeItem/useTreeItemState.d.ts +1 -1
- package/TreeItem/useTreeItemState.js +13 -13
- package/TreeItem2/TreeItem2.js +16 -17
- package/TreeItem2Icon/TreeItem2Icon.js +5 -6
- package/TreeItem2Provider/TreeItem2Provider.js +3 -3
- package/TreeItem2Provider/TreeItem2Provider.types.d.ts +1 -1
- package/TreeView/TreeView.d.ts +1 -1
- package/TreeView/TreeView.js +1 -1
- package/hooks/useTreeItem2Utils/useTreeItem2Utils.d.ts +2 -2
- package/hooks/useTreeItem2Utils/useTreeItem2Utils.js +12 -12
- package/index.js +1 -1
- package/internals/hooks/useInstanceEventHandler.js +5 -10
- package/internals/models/plugin.d.ts +1 -1
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +11 -18
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +3 -3
- package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +59 -43
- package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +6 -5
- package/internals/plugins/useTreeViewId/useTreeViewId.js +1 -1
- package/internals/plugins/useTreeViewId/useTreeViewId.types.d.ts +1 -1
- package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +17 -18
- package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.d.ts +2 -2
- package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +70 -77
- package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +4 -1
- package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +24 -29
- package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.d.ts +11 -11
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +18 -21
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +4 -4
- package/internals/useTreeView/useTreeView.js +5 -6
- package/internals/useTreeView/useTreeView.utils.d.ts +2 -2
- package/internals/useTreeView/useTreeView.utils.js +22 -22
- package/internals/utils/extractPluginParamsFromProps.js +2 -2
- package/internals/utils/utils.js +1 -0
- package/modern/RichTreeView/RichTreeView.js +7 -7
- package/modern/SimpleTreeView/SimpleTreeView.js +1 -1
- package/modern/TreeItem/TreeItem.js +31 -22
- package/modern/TreeItem/TreeItemContent.js +10 -10
- package/modern/TreeItem/useTreeItemState.js +13 -13
- package/modern/TreeItem2/TreeItem2.js +11 -11
- package/modern/TreeItem2Provider/TreeItem2Provider.js +3 -3
- package/modern/TreeView/TreeView.js +1 -1
- package/modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js +12 -12
- package/modern/index.js +1 -1
- package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +7 -7
- package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +57 -38
- package/modern/internals/plugins/useTreeViewId/useTreeViewId.js +1 -1
- package/modern/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +17 -17
- package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +69 -74
- package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +19 -20
- package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +13 -13
- package/modern/internals/useTreeView/useTreeView.js +3 -4
- package/modern/internals/useTreeView/useTreeView.utils.js +22 -22
- package/modern/internals/utils/utils.js +1 -0
- package/modern/useTreeItem2/useTreeItem2.js +23 -12
- package/node/RichTreeView/RichTreeView.js +7 -7
- package/node/SimpleTreeView/SimpleTreeView.js +1 -1
- package/node/TreeItem/TreeItem.js +31 -22
- package/node/TreeItem/TreeItemContent.js +10 -10
- package/node/TreeItem/useTreeItemState.js +13 -13
- package/node/TreeItem2/TreeItem2.js +11 -11
- package/node/TreeItem2Provider/TreeItem2Provider.js +3 -3
- package/node/TreeView/TreeView.js +1 -1
- package/node/hooks/useTreeItem2Utils/useTreeItem2Utils.js +12 -12
- package/node/index.js +1 -1
- package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +7 -7
- package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +57 -38
- package/node/internals/plugins/useTreeViewId/useTreeViewId.js +1 -1
- package/node/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +17 -17
- package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +69 -74
- package/node/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +19 -20
- package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +13 -13
- package/node/internals/useTreeView/useTreeView.js +3 -4
- package/node/internals/useTreeView/useTreeView.utils.js +22 -22
- package/node/internals/utils/utils.js +1 -0
- package/node/useTreeItem2/useTreeItem2.js +23 -12
- package/package.json +5 -5
- package/useTreeItem2/useTreeItem2.js +26 -18
- package/useTreeItem2/useTreeItem2.types.d.ts +9 -7
|
@@ -15,29 +15,29 @@ export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement>
|
|
|
15
15
|
focused: string;
|
|
16
16
|
/** State class applied to the element when disabled. */
|
|
17
17
|
disabled: string;
|
|
18
|
-
/** Styles applied to the tree
|
|
18
|
+
/** Styles applied to the tree item icon and collapse/expand icon. */
|
|
19
19
|
iconContainer: string;
|
|
20
20
|
/** Styles applied to the label element. */
|
|
21
21
|
label: string;
|
|
22
22
|
};
|
|
23
23
|
/**
|
|
24
|
-
* The tree
|
|
24
|
+
* The tree item label.
|
|
25
25
|
*/
|
|
26
26
|
label?: React.ReactNode;
|
|
27
27
|
/**
|
|
28
|
-
* The id of the
|
|
28
|
+
* The id of the item.
|
|
29
29
|
*/
|
|
30
|
-
|
|
30
|
+
itemId: string;
|
|
31
31
|
/**
|
|
32
|
-
* The icon to display next to the tree
|
|
32
|
+
* The icon to display next to the tree item's label.
|
|
33
33
|
*/
|
|
34
34
|
icon?: React.ReactNode;
|
|
35
35
|
/**
|
|
36
|
-
* The icon to display next to the tree
|
|
36
|
+
* The icon to display next to the tree item's label. Either an expansion or collapse icon.
|
|
37
37
|
*/
|
|
38
38
|
expansionIcon?: React.ReactNode;
|
|
39
39
|
/**
|
|
40
|
-
* The icon to display next to the tree
|
|
40
|
+
* The icon to display next to the tree item's label. Either a parent or end icon.
|
|
41
41
|
*/
|
|
42
42
|
displayIcon?: React.ReactNode;
|
|
43
43
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "
|
|
3
|
+
const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "itemId", "onClick", "onMouseDown"];
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import clsx from 'clsx';
|
|
@@ -18,7 +18,7 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
|
|
|
18
18
|
expansionIcon,
|
|
19
19
|
icon: iconProp,
|
|
20
20
|
label,
|
|
21
|
-
|
|
21
|
+
itemId,
|
|
22
22
|
onClick,
|
|
23
23
|
onMouseDown
|
|
24
24
|
} = props,
|
|
@@ -31,7 +31,7 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
|
|
|
31
31
|
handleExpansion,
|
|
32
32
|
handleSelection,
|
|
33
33
|
preventSelection
|
|
34
|
-
} = useTreeItemState(
|
|
34
|
+
} = useTreeItemState(itemId);
|
|
35
35
|
const icon = iconProp || expansionIcon || displayIcon;
|
|
36
36
|
const handleMouseDown = event => {
|
|
37
37
|
preventSelection(event);
|
|
@@ -75,24 +75,24 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
|
|
|
75
75
|
classes: PropTypes.object.isRequired,
|
|
76
76
|
className: PropTypes.string,
|
|
77
77
|
/**
|
|
78
|
-
* The icon to display next to the tree
|
|
78
|
+
* The icon to display next to the tree item's label. Either a parent or end icon.
|
|
79
79
|
*/
|
|
80
80
|
displayIcon: PropTypes.node,
|
|
81
81
|
/**
|
|
82
|
-
* The icon to display next to the tree
|
|
82
|
+
* The icon to display next to the tree item's label. Either an expansion or collapse icon.
|
|
83
83
|
*/
|
|
84
84
|
expansionIcon: PropTypes.node,
|
|
85
85
|
/**
|
|
86
|
-
* The icon to display next to the tree
|
|
86
|
+
* The icon to display next to the tree item's label.
|
|
87
87
|
*/
|
|
88
88
|
icon: PropTypes.node,
|
|
89
89
|
/**
|
|
90
|
-
* The
|
|
90
|
+
* The id of the item.
|
|
91
91
|
*/
|
|
92
|
-
|
|
92
|
+
itemId: PropTypes.string.isRequired,
|
|
93
93
|
/**
|
|
94
|
-
* The
|
|
94
|
+
* The tree item label.
|
|
95
95
|
*/
|
|
96
|
-
|
|
96
|
+
label: PropTypes.node
|
|
97
97
|
} : void 0;
|
|
98
98
|
export { TreeItemContent };
|
|
@@ -1,45 +1,45 @@
|
|
|
1
1
|
import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
|
|
2
|
-
export function useTreeItemState(
|
|
2
|
+
export function useTreeItemState(itemId) {
|
|
3
3
|
const {
|
|
4
4
|
instance,
|
|
5
5
|
selection: {
|
|
6
6
|
multiSelect
|
|
7
7
|
}
|
|
8
8
|
} = useTreeViewContext();
|
|
9
|
-
const expandable = instance.isNodeExpandable(
|
|
10
|
-
const expanded = instance.isNodeExpanded(
|
|
11
|
-
const focused = instance.isNodeFocused(
|
|
12
|
-
const selected = instance.isNodeSelected(
|
|
13
|
-
const disabled = instance.isNodeDisabled(
|
|
9
|
+
const expandable = instance.isNodeExpandable(itemId);
|
|
10
|
+
const expanded = instance.isNodeExpanded(itemId);
|
|
11
|
+
const focused = instance.isNodeFocused(itemId);
|
|
12
|
+
const selected = instance.isNodeSelected(itemId);
|
|
13
|
+
const disabled = instance.isNodeDisabled(itemId);
|
|
14
14
|
const handleExpansion = event => {
|
|
15
15
|
if (!disabled) {
|
|
16
16
|
if (!focused) {
|
|
17
|
-
instance.focusItem(event,
|
|
17
|
+
instance.focusItem(event, itemId);
|
|
18
18
|
}
|
|
19
19
|
const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
|
|
20
20
|
|
|
21
21
|
// If already expanded and trying to toggle selection don't close
|
|
22
|
-
if (expandable && !(multiple && instance.isNodeExpanded(
|
|
23
|
-
instance.toggleNodeExpansion(event,
|
|
22
|
+
if (expandable && !(multiple && instance.isNodeExpanded(itemId))) {
|
|
23
|
+
instance.toggleNodeExpansion(event, itemId);
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
27
|
const handleSelection = event => {
|
|
28
28
|
if (!disabled) {
|
|
29
29
|
if (!focused) {
|
|
30
|
-
instance.focusItem(event,
|
|
30
|
+
instance.focusItem(event, itemId);
|
|
31
31
|
}
|
|
32
32
|
const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
|
|
33
33
|
if (multiple) {
|
|
34
34
|
if (event.shiftKey) {
|
|
35
35
|
instance.selectRange(event, {
|
|
36
|
-
end:
|
|
36
|
+
end: itemId
|
|
37
37
|
});
|
|
38
38
|
} else {
|
|
39
|
-
instance.selectNode(event,
|
|
39
|
+
instance.selectNode(event, itemId, true);
|
|
40
40
|
}
|
|
41
41
|
} else {
|
|
42
|
-
instance.selectNode(event,
|
|
42
|
+
instance.selectNode(event, itemId);
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
};
|
package/TreeItem2/TreeItem2.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
2
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
-
const _excluded = ["id", "
|
|
3
|
+
const _excluded = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import clsx from 'clsx';
|
|
@@ -159,14 +159,13 @@ const useUtilityClasses = ownerState => {
|
|
|
159
159
|
* - [TreeItem2 API](https://mui.com/x/api/tree-view/tree-item-2/)
|
|
160
160
|
*/
|
|
161
161
|
export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProps, forwardedRef) {
|
|
162
|
-
var _slots$root, _slots$content, _slots$iconContainer, _slots$label, _slots$groupTransitio;
|
|
163
162
|
const props = useThemeProps({
|
|
164
163
|
props: inProps,
|
|
165
164
|
name: 'MuiTreeItem2'
|
|
166
165
|
});
|
|
167
166
|
const {
|
|
168
167
|
id,
|
|
169
|
-
|
|
168
|
+
itemId,
|
|
170
169
|
label,
|
|
171
170
|
disabled,
|
|
172
171
|
children,
|
|
@@ -183,14 +182,14 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
|
|
|
183
182
|
status
|
|
184
183
|
} = useTreeItem2({
|
|
185
184
|
id,
|
|
186
|
-
|
|
185
|
+
itemId,
|
|
187
186
|
children,
|
|
188
187
|
label,
|
|
189
188
|
disabled
|
|
190
189
|
});
|
|
191
190
|
const ownerState = _extends({}, props, status);
|
|
192
191
|
const classes = useUtilityClasses(ownerState);
|
|
193
|
-
const Root =
|
|
192
|
+
const Root = slots.root ?? TreeItem2Root;
|
|
194
193
|
const rootProps = useSlotProps({
|
|
195
194
|
elementType: Root,
|
|
196
195
|
getSlotProps: getRootProps,
|
|
@@ -202,7 +201,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
|
|
|
202
201
|
ownerState: {},
|
|
203
202
|
className: classes.root
|
|
204
203
|
});
|
|
205
|
-
const Content =
|
|
204
|
+
const Content = slots.content ?? TreeItem2Content;
|
|
206
205
|
const contentProps = useSlotProps({
|
|
207
206
|
elementType: Content,
|
|
208
207
|
getSlotProps: getContentProps,
|
|
@@ -210,7 +209,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
|
|
|
210
209
|
ownerState: {},
|
|
211
210
|
className: clsx(classes.content, status.expanded && classes.expanded, status.selected && classes.selected, status.focused && classes.focused, status.disabled && classes.disabled)
|
|
212
211
|
});
|
|
213
|
-
const IconContainer =
|
|
212
|
+
const IconContainer = slots.iconContainer ?? TreeItem2IconContainer;
|
|
214
213
|
const iconContainerProps = useSlotProps({
|
|
215
214
|
elementType: IconContainer,
|
|
216
215
|
getSlotProps: getIconContainerProps,
|
|
@@ -218,7 +217,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
|
|
|
218
217
|
ownerState: {},
|
|
219
218
|
className: classes.iconContainer
|
|
220
219
|
});
|
|
221
|
-
const Label =
|
|
220
|
+
const Label = slots.label ?? TreeItem2Label;
|
|
222
221
|
const labelProps = useSlotProps({
|
|
223
222
|
elementType: Label,
|
|
224
223
|
getSlotProps: getLabelProps,
|
|
@@ -226,7 +225,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
|
|
|
226
225
|
ownerState: {},
|
|
227
226
|
className: classes.label
|
|
228
227
|
});
|
|
229
|
-
const GroupTransition =
|
|
228
|
+
const GroupTransition = slots.groupTransition ?? undefined;
|
|
230
229
|
const groupTransitionProps = useSlotProps({
|
|
231
230
|
elementType: GroupTransition,
|
|
232
231
|
getSlotProps: getGroupTransitionProps,
|
|
@@ -235,7 +234,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
|
|
|
235
234
|
className: classes.groupTransition
|
|
236
235
|
});
|
|
237
236
|
return /*#__PURE__*/_jsx(TreeItem2Provider, {
|
|
238
|
-
|
|
237
|
+
itemId: itemId,
|
|
239
238
|
children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
|
|
240
239
|
children: [/*#__PURE__*/_jsxs(Content, _extends({}, contentProps, {
|
|
241
240
|
children: [/*#__PURE__*/_jsx(IconContainer, _extends({}, iconContainerProps, {
|
|
@@ -266,23 +265,23 @@ process.env.NODE_ENV !== "production" ? TreeItem2.propTypes = {
|
|
|
266
265
|
classes: PropTypes.object,
|
|
267
266
|
className: PropTypes.string,
|
|
268
267
|
/**
|
|
269
|
-
* If `true`, the
|
|
268
|
+
* If `true`, the item is disabled.
|
|
270
269
|
* @default false
|
|
271
270
|
*/
|
|
272
271
|
disabled: PropTypes.bool,
|
|
273
272
|
/**
|
|
274
|
-
* The id attribute of the
|
|
273
|
+
* The id attribute of the item. If not provided, it will be generated.
|
|
275
274
|
*/
|
|
276
275
|
id: PropTypes.string,
|
|
277
276
|
/**
|
|
278
|
-
* The
|
|
277
|
+
* The id of the item.
|
|
278
|
+
* Must be unique.
|
|
279
279
|
*/
|
|
280
|
-
|
|
280
|
+
itemId: PropTypes.string.isRequired,
|
|
281
281
|
/**
|
|
282
|
-
* The
|
|
283
|
-
* Must be unique.
|
|
282
|
+
* The label of the item.
|
|
284
283
|
*/
|
|
285
|
-
|
|
284
|
+
label: PropTypes.node,
|
|
286
285
|
/**
|
|
287
286
|
* This prop isn't supported.
|
|
288
287
|
* Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.
|
|
@@ -6,7 +6,6 @@ import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewCon
|
|
|
6
6
|
import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
8
|
function TreeItem2Icon(props) {
|
|
9
|
-
var _context$icons$slots$, _context$icons$slots$2, _slots$iconName;
|
|
10
9
|
const {
|
|
11
10
|
slots,
|
|
12
11
|
slotProps,
|
|
@@ -14,12 +13,12 @@ function TreeItem2Icon(props) {
|
|
|
14
13
|
} = props;
|
|
15
14
|
const context = useTreeViewContext();
|
|
16
15
|
const contextIcons = _extends({}, context.icons.slots, {
|
|
17
|
-
expandIcon:
|
|
18
|
-
collapseIcon:
|
|
16
|
+
expandIcon: context.icons.slots.expandIcon ?? TreeViewExpandIcon,
|
|
17
|
+
collapseIcon: context.icons.slots.collapseIcon ?? TreeViewCollapseIcon
|
|
19
18
|
});
|
|
20
19
|
const contextIconProps = context.icons.slotProps;
|
|
21
20
|
let iconName;
|
|
22
|
-
if (slots
|
|
21
|
+
if (slots?.icon) {
|
|
23
22
|
iconName = 'icon';
|
|
24
23
|
} else if (status.expandable) {
|
|
25
24
|
if (status.expanded) {
|
|
@@ -30,10 +29,10 @@ function TreeItem2Icon(props) {
|
|
|
30
29
|
} else {
|
|
31
30
|
iconName = 'endIcon';
|
|
32
31
|
}
|
|
33
|
-
const Icon =
|
|
32
|
+
const Icon = slots?.[iconName] ?? contextIcons[iconName];
|
|
34
33
|
const iconProps = useSlotProps({
|
|
35
34
|
elementType: Icon,
|
|
36
|
-
externalSlotProps: tempOwnerState => _extends({}, resolveComponentProps(contextIconProps[iconName], tempOwnerState), resolveComponentProps(slotProps
|
|
35
|
+
externalSlotProps: tempOwnerState => _extends({}, resolveComponentProps(contextIconProps[iconName], tempOwnerState), resolveComponentProps(slotProps?.[iconName], tempOwnerState)),
|
|
37
36
|
// TODO: Add proper ownerState
|
|
38
37
|
ownerState: {}
|
|
39
38
|
});
|
|
@@ -3,14 +3,14 @@ import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewCon
|
|
|
3
3
|
function TreeItem2Provider(props) {
|
|
4
4
|
const {
|
|
5
5
|
children,
|
|
6
|
-
|
|
6
|
+
itemId
|
|
7
7
|
} = props;
|
|
8
8
|
const {
|
|
9
9
|
wrapItem
|
|
10
10
|
} = useTreeViewContext();
|
|
11
11
|
return wrapItem({
|
|
12
12
|
children,
|
|
13
|
-
|
|
13
|
+
itemId
|
|
14
14
|
});
|
|
15
15
|
}
|
|
16
16
|
TreeItem2Provider.propTypes = {
|
|
@@ -19,6 +19,6 @@ TreeItem2Provider.propTypes = {
|
|
|
19
19
|
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
20
20
|
// ----------------------------------------------------------------------
|
|
21
21
|
children: PropTypes.node,
|
|
22
|
-
|
|
22
|
+
itemId: PropTypes.string.isRequired
|
|
23
23
|
};
|
|
24
24
|
export { TreeItem2Provider };
|
package/TreeView/TreeView.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ type TreeViewComponent = (<Multiple extends boolean | undefined = undefined>(pro
|
|
|
5
5
|
};
|
|
6
6
|
/**
|
|
7
7
|
* This component has been deprecated in favor of the new `SimpleTreeView` component.
|
|
8
|
-
* You can have a look at how to migrate to the new component in the v7 [migration guide](https://
|
|
8
|
+
* You can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
|
|
9
9
|
*
|
|
10
10
|
* Demos:
|
|
11
11
|
*
|
package/TreeView/TreeView.js
CHANGED
|
@@ -30,7 +30,7 @@ const warn = () => {
|
|
|
30
30
|
|
|
31
31
|
/**
|
|
32
32
|
* This component has been deprecated in favor of the new `SimpleTreeView` component.
|
|
33
|
-
* You can have a look at how to migrate to the new component in the v7 [migration guide](https://
|
|
33
|
+
* You can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
|
|
34
34
|
*
|
|
35
35
|
* Demos:
|
|
36
36
|
*
|
|
@@ -8,8 +8,8 @@ interface UseTreeItem2UtilsReturnValue {
|
|
|
8
8
|
interactions: UseTreeItem2Interactions;
|
|
9
9
|
status: UseTreeItem2Status;
|
|
10
10
|
}
|
|
11
|
-
export declare const useTreeItem2Utils: ({
|
|
12
|
-
|
|
11
|
+
export declare const useTreeItem2Utils: ({ itemId, children, }: {
|
|
12
|
+
itemId: string;
|
|
13
13
|
children: React.ReactNode;
|
|
14
14
|
}) => UseTreeItem2UtilsReturnValue;
|
|
15
15
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useTreeViewContext } from '../../internals/TreeViewProvider/useTreeViewContext';
|
|
2
2
|
export const useTreeItem2Utils = ({
|
|
3
|
-
|
|
3
|
+
itemId,
|
|
4
4
|
children
|
|
5
5
|
}) => {
|
|
6
6
|
const {
|
|
@@ -11,23 +11,23 @@ export const useTreeItem2Utils = ({
|
|
|
11
11
|
} = useTreeViewContext();
|
|
12
12
|
const status = {
|
|
13
13
|
expandable: Boolean(Array.isArray(children) ? children.length : children),
|
|
14
|
-
expanded: instance.isNodeExpanded(
|
|
15
|
-
focused: instance.isNodeFocused(
|
|
16
|
-
selected: instance.isNodeSelected(
|
|
17
|
-
disabled: instance.isNodeDisabled(
|
|
14
|
+
expanded: instance.isNodeExpanded(itemId),
|
|
15
|
+
focused: instance.isNodeFocused(itemId),
|
|
16
|
+
selected: instance.isNodeSelected(itemId),
|
|
17
|
+
disabled: instance.isNodeDisabled(itemId)
|
|
18
18
|
};
|
|
19
19
|
const handleExpansion = event => {
|
|
20
20
|
if (status.disabled) {
|
|
21
21
|
return;
|
|
22
22
|
}
|
|
23
23
|
if (!status.focused) {
|
|
24
|
-
instance.focusItem(event,
|
|
24
|
+
instance.focusItem(event, itemId);
|
|
25
25
|
}
|
|
26
26
|
const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
|
|
27
27
|
|
|
28
28
|
// If already expanded and trying to toggle selection don't close
|
|
29
|
-
if (status.expandable && !(multiple && instance.isNodeExpanded(
|
|
30
|
-
instance.toggleNodeExpansion(event,
|
|
29
|
+
if (status.expandable && !(multiple && instance.isNodeExpanded(itemId))) {
|
|
30
|
+
instance.toggleNodeExpansion(event, itemId);
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
33
|
const handleSelection = event => {
|
|
@@ -35,19 +35,19 @@ export const useTreeItem2Utils = ({
|
|
|
35
35
|
return;
|
|
36
36
|
}
|
|
37
37
|
if (!status.focused) {
|
|
38
|
-
instance.focusItem(event,
|
|
38
|
+
instance.focusItem(event, itemId);
|
|
39
39
|
}
|
|
40
40
|
const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
|
|
41
41
|
if (multiple) {
|
|
42
42
|
if (event.shiftKey) {
|
|
43
43
|
instance.selectRange(event, {
|
|
44
|
-
end:
|
|
44
|
+
end: itemId
|
|
45
45
|
});
|
|
46
46
|
} else {
|
|
47
|
-
instance.selectNode(event,
|
|
47
|
+
instance.selectNode(event, itemId, true);
|
|
48
48
|
}
|
|
49
49
|
} else {
|
|
50
|
-
instance.selectNode(event,
|
|
50
|
+
instance.selectNode(event, itemId);
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
53
|
const interactions = {
|
package/index.js
CHANGED
|
@@ -20,8 +20,7 @@ export function createUseInstanceEventHandler(registryContainer) {
|
|
|
20
20
|
if (!subscription.current && handlerRef.current) {
|
|
21
21
|
const enhancedHandler = (params, event) => {
|
|
22
22
|
if (!event.defaultMuiPrevented) {
|
|
23
|
-
|
|
24
|
-
(_handlerRef$current = handlerRef.current) == null || _handlerRef$current.call(handlerRef, params, event);
|
|
23
|
+
handlerRef.current?.(params, event);
|
|
25
24
|
}
|
|
26
25
|
};
|
|
27
26
|
subscription.current = instance.$$subscribeEvent(eventName, enhancedHandler);
|
|
@@ -32,8 +31,7 @@ export function createUseInstanceEventHandler(registryContainer) {
|
|
|
32
31
|
registryContainer.registry.register(objectRetainedByReact,
|
|
33
32
|
// The callback below will be called once this reference stops being retained
|
|
34
33
|
() => {
|
|
35
|
-
|
|
36
|
-
(_subscription$current = subscription.current) == null || _subscription$current.call(subscription);
|
|
34
|
+
subscription.current?.();
|
|
37
35
|
subscription.current = null;
|
|
38
36
|
cleanupTokenRef.current = null;
|
|
39
37
|
}, cleanupTokenRef.current);
|
|
@@ -49,8 +47,7 @@ export function createUseInstanceEventHandler(registryContainer) {
|
|
|
49
47
|
if (!subscription.current && handlerRef.current) {
|
|
50
48
|
const enhancedHandler = (params, event) => {
|
|
51
49
|
if (!event.defaultMuiPrevented) {
|
|
52
|
-
|
|
53
|
-
(_handlerRef$current2 = handlerRef.current) == null || _handlerRef$current2.call(handlerRef, params, event);
|
|
50
|
+
handlerRef.current?.(params, event);
|
|
54
51
|
}
|
|
55
52
|
};
|
|
56
53
|
subscription.current = instance.$$subscribeEvent(eventName, enhancedHandler);
|
|
@@ -62,8 +59,7 @@ export function createUseInstanceEventHandler(registryContainer) {
|
|
|
62
59
|
cleanupTokenRef.current = null;
|
|
63
60
|
}
|
|
64
61
|
return () => {
|
|
65
|
-
|
|
66
|
-
(_subscription$current2 = subscription.current) == null || _subscription$current2.call(subscription);
|
|
62
|
+
subscription.current?.();
|
|
67
63
|
subscription.current = null;
|
|
68
64
|
};
|
|
69
65
|
}, [instance, eventName]);
|
|
@@ -75,8 +71,7 @@ const registryContainer = {
|
|
|
75
71
|
|
|
76
72
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
77
73
|
export const unstable_resetCleanupTracking = () => {
|
|
78
|
-
|
|
79
|
-
(_registryContainer$re = registryContainer.registry) == null || _registryContainer$re.reset();
|
|
74
|
+
registryContainer.registry?.reset();
|
|
80
75
|
registryContainer.registry = null;
|
|
81
76
|
};
|
|
82
77
|
export const useInstanceEventHandler = createUseInstanceEventHandler(registryContainer);
|
|
@@ -132,7 +132,7 @@ export interface TreeViewItemPluginResponse {
|
|
|
132
132
|
}
|
|
133
133
|
export type TreeViewItemPlugin<TProps extends {}> = (options: TreeViewItemPluginOptions<TProps>) => void | TreeViewItemPluginResponse;
|
|
134
134
|
export type TreeItemWrapper = (params: {
|
|
135
|
-
|
|
135
|
+
itemId: TreeViewItemId;
|
|
136
136
|
children: React.ReactNode;
|
|
137
137
|
}) => React.ReactNode;
|
|
138
138
|
export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
|
|
@@ -8,17 +8,13 @@ export const useTreeViewExpansion = ({
|
|
|
8
8
|
models
|
|
9
9
|
}) => {
|
|
10
10
|
const setExpandedItems = (event, value) => {
|
|
11
|
-
|
|
12
|
-
(_params$onExpandedIte = params.onExpandedItemsChange) == null || _params$onExpandedIte.call(params, event, value);
|
|
11
|
+
params.onExpandedItemsChange?.(event, value);
|
|
13
12
|
models.expandedItems.setControlledValue(value);
|
|
14
13
|
};
|
|
15
|
-
const isNodeExpanded = React.useCallback(
|
|
16
|
-
return Array.isArray(models.expandedItems.value) ? models.expandedItems.value.indexOf(
|
|
14
|
+
const isNodeExpanded = React.useCallback(itemId => {
|
|
15
|
+
return Array.isArray(models.expandedItems.value) ? models.expandedItems.value.indexOf(itemId) !== -1 : false;
|
|
17
16
|
}, [models.expandedItems.value]);
|
|
18
|
-
const isNodeExpandable = React.useCallback(
|
|
19
|
-
var _instance$getNode;
|
|
20
|
-
return !!((_instance$getNode = instance.getNode(nodeId)) != null && _instance$getNode.expandable);
|
|
21
|
-
}, [instance]);
|
|
17
|
+
const isNodeExpandable = React.useCallback(itemId => !!instance.getNode(itemId)?.expandable, [instance]);
|
|
22
18
|
const toggleNodeExpansion = useEventCallback((event, itemId) => {
|
|
23
19
|
if (itemId == null) {
|
|
24
20
|
return;
|
|
@@ -35,15 +31,15 @@ export const useTreeViewExpansion = ({
|
|
|
35
31
|
}
|
|
36
32
|
setExpandedItems(event, newExpanded);
|
|
37
33
|
});
|
|
38
|
-
const expandAllSiblings = (event,
|
|
39
|
-
const node = instance.getNode(
|
|
34
|
+
const expandAllSiblings = (event, itemId) => {
|
|
35
|
+
const node = instance.getNode(itemId);
|
|
40
36
|
const siblings = instance.getChildrenIds(node.parentId);
|
|
41
37
|
const diff = siblings.filter(child => instance.isNodeExpandable(child) && !instance.isNodeExpanded(child));
|
|
42
38
|
const newExpanded = models.expandedItems.value.concat(diff);
|
|
43
39
|
if (diff.length > 0) {
|
|
44
40
|
if (params.onItemExpansionToggle) {
|
|
45
|
-
diff.forEach(
|
|
46
|
-
params.onItemExpansionToggle(event,
|
|
41
|
+
diff.forEach(newlyExpandedItemId => {
|
|
42
|
+
params.onItemExpansionToggle(event, newlyExpandedItemId, true);
|
|
47
43
|
});
|
|
48
44
|
}
|
|
49
45
|
setExpandedItems(event, newExpanded);
|
|
@@ -62,12 +58,9 @@ useTreeViewExpansion.models = {
|
|
|
62
58
|
}
|
|
63
59
|
};
|
|
64
60
|
const DEFAULT_EXPANDED_NODES = [];
|
|
65
|
-
useTreeViewExpansion.getDefaultizedParams = params => {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
defaultExpandedItems: (_params$defaultExpand = params.defaultExpandedItems) != null ? _params$defaultExpand : DEFAULT_EXPANDED_NODES
|
|
69
|
-
});
|
|
70
|
-
};
|
|
61
|
+
useTreeViewExpansion.getDefaultizedParams = params => _extends({}, params, {
|
|
62
|
+
defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_NODES
|
|
63
|
+
});
|
|
71
64
|
useTreeViewExpansion.params = {
|
|
72
65
|
expandedItems: true,
|
|
73
66
|
defaultExpandedItems: true,
|
|
@@ -2,10 +2,10 @@ import * as React from 'react';
|
|
|
2
2
|
import { DefaultizedProps, TreeViewPluginSignature } from '../../models';
|
|
3
3
|
import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
|
|
4
4
|
export interface UseTreeViewExpansionInstance {
|
|
5
|
-
isNodeExpanded: (
|
|
6
|
-
isNodeExpandable: (
|
|
5
|
+
isNodeExpanded: (itemId: string) => boolean;
|
|
6
|
+
isNodeExpandable: (itemId: string) => boolean;
|
|
7
7
|
toggleNodeExpansion: (event: React.SyntheticEvent, value: string) => void;
|
|
8
|
-
expandAllSiblings: (event: React.KeyboardEvent
|
|
8
|
+
expandAllSiblings: (event: React.KeyboardEvent, itemId: string) => void;
|
|
9
9
|
}
|
|
10
10
|
export interface UseTreeViewExpansionParameters {
|
|
11
11
|
/**
|