@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.
Files changed (86) hide show
  1. package/CHANGELOG.md +195 -12
  2. package/README.md +1 -1
  3. package/RichTreeView/RichTreeView.js +12 -14
  4. package/RichTreeView/RichTreeView.types.d.ts +1 -1
  5. package/SimpleTreeView/SimpleTreeView.js +3 -4
  6. package/TreeItem/TreeItem.js +43 -35
  7. package/TreeItem/TreeItem.types.d.ts +3 -3
  8. package/TreeItem/TreeItemContent.d.ts +7 -7
  9. package/TreeItem/TreeItemContent.js +10 -10
  10. package/TreeItem/useTreeItemState.d.ts +1 -1
  11. package/TreeItem/useTreeItemState.js +13 -13
  12. package/TreeItem2/TreeItem2.js +16 -17
  13. package/TreeItem2Icon/TreeItem2Icon.js +5 -6
  14. package/TreeItem2Provider/TreeItem2Provider.js +3 -3
  15. package/TreeItem2Provider/TreeItem2Provider.types.d.ts +1 -1
  16. package/TreeView/TreeView.d.ts +1 -1
  17. package/TreeView/TreeView.js +1 -1
  18. package/hooks/useTreeItem2Utils/useTreeItem2Utils.d.ts +2 -2
  19. package/hooks/useTreeItem2Utils/useTreeItem2Utils.js +12 -12
  20. package/index.js +1 -1
  21. package/internals/hooks/useInstanceEventHandler.js +5 -10
  22. package/internals/models/plugin.d.ts +1 -1
  23. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +11 -18
  24. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +3 -3
  25. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +59 -43
  26. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +6 -5
  27. package/internals/plugins/useTreeViewId/useTreeViewId.js +1 -1
  28. package/internals/plugins/useTreeViewId/useTreeViewId.types.d.ts +1 -1
  29. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +17 -18
  30. package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.d.ts +2 -2
  31. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +70 -77
  32. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +4 -1
  33. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +24 -29
  34. package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.d.ts +11 -11
  35. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +18 -21
  36. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +4 -4
  37. package/internals/useTreeView/useTreeView.js +5 -6
  38. package/internals/useTreeView/useTreeView.utils.d.ts +2 -2
  39. package/internals/useTreeView/useTreeView.utils.js +22 -22
  40. package/internals/utils/extractPluginParamsFromProps.js +2 -2
  41. package/internals/utils/utils.js +1 -0
  42. package/modern/RichTreeView/RichTreeView.js +7 -7
  43. package/modern/SimpleTreeView/SimpleTreeView.js +1 -1
  44. package/modern/TreeItem/TreeItem.js +31 -22
  45. package/modern/TreeItem/TreeItemContent.js +10 -10
  46. package/modern/TreeItem/useTreeItemState.js +13 -13
  47. package/modern/TreeItem2/TreeItem2.js +11 -11
  48. package/modern/TreeItem2Provider/TreeItem2Provider.js +3 -3
  49. package/modern/TreeView/TreeView.js +1 -1
  50. package/modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js +12 -12
  51. package/modern/index.js +1 -1
  52. package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +7 -7
  53. package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +57 -38
  54. package/modern/internals/plugins/useTreeViewId/useTreeViewId.js +1 -1
  55. package/modern/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +17 -17
  56. package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +69 -74
  57. package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +19 -20
  58. package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +13 -13
  59. package/modern/internals/useTreeView/useTreeView.js +3 -4
  60. package/modern/internals/useTreeView/useTreeView.utils.js +22 -22
  61. package/modern/internals/utils/utils.js +1 -0
  62. package/modern/useTreeItem2/useTreeItem2.js +23 -12
  63. package/node/RichTreeView/RichTreeView.js +7 -7
  64. package/node/SimpleTreeView/SimpleTreeView.js +1 -1
  65. package/node/TreeItem/TreeItem.js +31 -22
  66. package/node/TreeItem/TreeItemContent.js +10 -10
  67. package/node/TreeItem/useTreeItemState.js +13 -13
  68. package/node/TreeItem2/TreeItem2.js +11 -11
  69. package/node/TreeItem2Provider/TreeItem2Provider.js +3 -3
  70. package/node/TreeView/TreeView.js +1 -1
  71. package/node/hooks/useTreeItem2Utils/useTreeItem2Utils.js +12 -12
  72. package/node/index.js +1 -1
  73. package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +7 -7
  74. package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +57 -38
  75. package/node/internals/plugins/useTreeViewId/useTreeViewId.js +1 -1
  76. package/node/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js +17 -17
  77. package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +69 -74
  78. package/node/internals/plugins/useTreeViewNodes/useTreeViewNodes.js +19 -20
  79. package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +13 -13
  80. package/node/internals/useTreeView/useTreeView.js +3 -4
  81. package/node/internals/useTreeView/useTreeView.utils.js +22 -22
  82. package/node/internals/utils/utils.js +1 -0
  83. package/node/useTreeItem2/useTreeItem2.js +23 -12
  84. package/package.json +5 -5
  85. package/useTreeItem2/useTreeItem2.js +26 -18
  86. 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 node icon and collapse/expand icon. */
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 node label.
24
+ * The tree item label.
25
25
  */
26
26
  label?: React.ReactNode;
27
27
  /**
28
- * The id of the node.
28
+ * The id of the item.
29
29
  */
30
- nodeId: string;
30
+ itemId: string;
31
31
  /**
32
- * The icon to display next to the tree node's label.
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 node's label. Either an expansion or collapse icon.
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 node's label. Either a parent or end icon.
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", "nodeId", "onClick", "onMouseDown"];
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
- nodeId,
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(nodeId);
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 node's label. Either a parent or end icon.
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 node's label. Either an expansion or collapse icon.
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 node's label.
86
+ * The icon to display next to the tree item's label.
87
87
  */
88
88
  icon: PropTypes.node,
89
89
  /**
90
- * The tree node label.
90
+ * The id of the item.
91
91
  */
92
- label: PropTypes.node,
92
+ itemId: PropTypes.string.isRequired,
93
93
  /**
94
- * The id of the node.
94
+ * The tree item label.
95
95
  */
96
- nodeId: PropTypes.string.isRequired
96
+ label: PropTypes.node
97
97
  } : void 0;
98
98
  export { TreeItemContent };
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- export declare function useTreeItemState(nodeId: string): {
2
+ export declare function useTreeItemState(itemId: string): {
3
3
  disabled: boolean;
4
4
  expanded: boolean;
5
5
  selected: boolean;
@@ -1,45 +1,45 @@
1
1
  import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
2
- export function useTreeItemState(nodeId) {
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(nodeId);
10
- const expanded = instance.isNodeExpanded(nodeId);
11
- const focused = instance.isNodeFocused(nodeId);
12
- const selected = instance.isNodeSelected(nodeId);
13
- const disabled = instance.isNodeDisabled(nodeId);
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, nodeId);
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(nodeId))) {
23
- instance.toggleNodeExpansion(event, nodeId);
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, nodeId);
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: nodeId
36
+ end: itemId
37
37
  });
38
38
  } else {
39
- instance.selectNode(event, nodeId, true);
39
+ instance.selectNode(event, itemId, true);
40
40
  }
41
41
  } else {
42
- instance.selectNode(event, nodeId);
42
+ instance.selectNode(event, itemId);
43
43
  }
44
44
  }
45
45
  };
@@ -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", "nodeId", "label", "disabled", "children", "slots", "slotProps"];
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
- nodeId,
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
- nodeId,
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 = (_slots$root = slots.root) != null ? _slots$root : TreeItem2Root;
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 = (_slots$content = slots.content) != null ? _slots$content : TreeItem2Content;
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 = (_slots$iconContainer = slots.iconContainer) != null ? _slots$iconContainer : TreeItem2IconContainer;
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 = (_slots$label = slots.label) != null ? _slots$label : TreeItem2Label;
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 = (_slots$groupTransitio = slots.groupTransition) != null ? _slots$groupTransitio : undefined;
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
- nodeId: nodeId,
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 node is disabled.
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 node. If not provided, it will be generated.
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 label of the node.
277
+ * The id of the item.
278
+ * Must be unique.
279
279
  */
280
- label: PropTypes.node,
280
+ itemId: PropTypes.string.isRequired,
281
281
  /**
282
- * The id of the node.
283
- * Must be unique.
282
+ * The label of the item.
284
283
  */
285
- nodeId: PropTypes.string.isRequired,
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: (_context$icons$slots$ = context.icons.slots.expandIcon) != null ? _context$icons$slots$ : TreeViewExpandIcon,
18
- collapseIcon: (_context$icons$slots$2 = context.icons.slots.collapseIcon) != null ? _context$icons$slots$2 : TreeViewCollapseIcon
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 != null && slots.icon) {
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 = (_slots$iconName = slots == null ? void 0 : slots[iconName]) != null ? _slots$iconName : contextIcons[iconName];
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 == null ? void 0 : slotProps[iconName], tempOwnerState)),
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
- nodeId
6
+ itemId
7
7
  } = props;
8
8
  const {
9
9
  wrapItem
10
10
  } = useTreeViewContext();
11
11
  return wrapItem({
12
12
  children,
13
- nodeId
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
- nodeId: PropTypes.string.isRequired
22
+ itemId: PropTypes.string.isRequired
23
23
  };
24
24
  export { TreeItem2Provider };
@@ -2,5 +2,5 @@ import * as React from 'react';
2
2
  import { TreeViewItemId } from '../models';
3
3
  export interface TreeItem2ProviderProps {
4
4
  children: React.ReactNode;
5
- nodeId: TreeViewItemId;
5
+ itemId: TreeViewItemId;
6
6
  }
@@ -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://next.mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
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
  *
@@ -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://next.mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
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: ({ nodeId, children, }: {
12
- nodeId: string;
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
- nodeId,
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(nodeId),
15
- focused: instance.isNodeFocused(nodeId),
16
- selected: instance.isNodeSelected(nodeId),
17
- disabled: instance.isNodeDisabled(nodeId)
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, nodeId);
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(nodeId))) {
30
- instance.toggleNodeExpansion(event, nodeId);
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, nodeId);
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: nodeId
44
+ end: itemId
45
45
  });
46
46
  } else {
47
- instance.selectNode(event, nodeId, true);
47
+ instance.selectNode(event, itemId, true);
48
48
  }
49
49
  } else {
50
- instance.selectNode(event, nodeId);
50
+ instance.selectNode(event, itemId);
51
51
  }
52
52
  };
53
53
  const interactions = {
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-tree-view v7.0.0-beta.7
2
+ * @mui/x-tree-view v7.0.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -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
- var _handlerRef$current;
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
- var _subscription$current;
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
- var _handlerRef$current2;
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
- var _subscription$current2;
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
- var _registryContainer$re;
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
- nodeId: TreeViewItemId;
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
- var _params$onExpandedIte;
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(nodeId => {
16
- return Array.isArray(models.expandedItems.value) ? models.expandedItems.value.indexOf(nodeId) !== -1 : false;
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(nodeId => {
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, nodeId) => {
39
- const node = instance.getNode(nodeId);
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(newlyExpandedNodeId => {
46
- params.onItemExpansionToggle(event, newlyExpandedNodeId, true);
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
- var _params$defaultExpand;
67
- return _extends({}, params, {
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: (nodeId: string) => boolean;
6
- isNodeExpandable: (nodeId: string) => boolean;
5
+ isNodeExpanded: (itemId: string) => boolean;
6
+ isNodeExpandable: (itemId: string) => boolean;
7
7
  toggleNodeExpansion: (event: React.SyntheticEvent, value: string) => void;
8
- expandAllSiblings: (event: React.KeyboardEvent<HTMLUListElement>, nodeId: string) => void;
8
+ expandAllSiblings: (event: React.KeyboardEvent, itemId: string) => void;
9
9
  }
10
10
  export interface UseTreeViewExpansionParameters {
11
11
  /**