@mui/x-tree-view 8.12.0 → 8.13.1

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 (68) hide show
  1. package/CHANGELOG.md +207 -0
  2. package/RichTreeView/RichTreeView.js +5 -5
  3. package/RichTreeView/RichTreeView.types.d.ts +2 -3
  4. package/RichTreeView/index.d.ts +1 -1
  5. package/SimpleTreeView/SimpleTreeView.types.d.ts +2 -3
  6. package/SimpleTreeView/index.d.ts +1 -1
  7. package/esm/RichTreeView/RichTreeView.js +5 -5
  8. package/esm/RichTreeView/RichTreeView.types.d.ts +2 -3
  9. package/esm/RichTreeView/index.d.ts +1 -1
  10. package/esm/SimpleTreeView/SimpleTreeView.types.d.ts +2 -3
  11. package/esm/SimpleTreeView/index.d.ts +1 -1
  12. package/esm/hooks/useApplyPropagationToSelectedItemsOnMount.js +2 -2
  13. package/esm/index.js +1 -1
  14. package/esm/internals/index.d.ts +2 -2
  15. package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +4 -4
  16. package/esm/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +1 -1
  17. package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.js +79 -158
  18. package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.d.ts +0 -8
  19. package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js +0 -8
  20. package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts +12 -26
  21. package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.utils.d.ts +36 -2
  22. package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js +115 -1
  23. package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +6 -6
  24. package/esm/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +1 -1
  25. package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.js +2 -2
  26. package/esm/internals/plugins/useTreeViewLazyLoading/index.d.ts +1 -1
  27. package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.d.ts +6 -2
  28. package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js +7 -2
  29. package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.types.d.ts +8 -9
  30. package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js +12 -3
  31. package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +2 -2
  32. package/esm/internals/useTreeView/useTreeView.js +2 -2
  33. package/esm/useTreeItem/useTreeItem.js +3 -3
  34. package/hooks/useApplyPropagationToSelectedItemsOnMount.js +2 -3
  35. package/index.js +1 -1
  36. package/internals/index.d.ts +2 -2
  37. package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +8 -8
  38. package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +4 -4
  39. package/internals/plugins/useTreeViewItems/useTreeViewItems.js +80 -159
  40. package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.d.ts +0 -8
  41. package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js +0 -8
  42. package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts +12 -26
  43. package/internals/plugins/useTreeViewItems/useTreeViewItems.utils.d.ts +36 -2
  44. package/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js +119 -2
  45. package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +8 -8
  46. package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +2 -3
  47. package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js +2 -2
  48. package/internals/plugins/useTreeViewLazyLoading/index.d.ts +1 -1
  49. package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.d.ts +6 -2
  50. package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js +7 -2
  51. package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.types.d.ts +8 -9
  52. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js +12 -3
  53. package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +2 -2
  54. package/internals/useTreeView/useTreeView.js +2 -2
  55. package/package.json +3 -3
  56. package/useTreeItem/useTreeItem.js +3 -3
  57. package/esm/internals/hooks/useLazyRef.d.ts +0 -1
  58. package/esm/internals/hooks/useLazyRef.js +0 -1
  59. package/esm/internals/hooks/useOnMount.d.ts +0 -1
  60. package/esm/internals/hooks/useOnMount.js +0 -1
  61. package/esm/internals/hooks/useTimeout.d.ts +0 -1
  62. package/esm/internals/hooks/useTimeout.js +0 -1
  63. package/internals/hooks/useLazyRef.d.ts +0 -1
  64. package/internals/hooks/useLazyRef.js +0 -13
  65. package/internals/hooks/useOnMount.d.ts +0 -1
  66. package/internals/hooks/useOnMount.js +0 -13
  67. package/internals/hooks/useTimeout.d.ts +0 -1
  68. package/internals/hooks/useTimeout.js +0 -13
@@ -2,11 +2,10 @@ import * as React from 'react';
2
2
  import { DefaultizedProps } from '@mui/x-internals/types';
3
3
  import { TreeViewItemMeta, TreeViewPluginSignature } from "../../models/index.js";
4
4
  import { TreeViewBaseItem, TreeViewDefaultItemModelProperties, TreeViewItemId } from "../../../models/index.js";
5
- export type AddItemsParameters<R> = {
5
+ export type SetItemChildrenParameters<R> = {
6
6
  items: readonly R[];
7
- parentId?: TreeViewItemId;
8
- depth: number;
9
- getChildrenCount?: (item: R) => number;
7
+ parentId: TreeViewItemId | null;
8
+ getChildrenCount: (item: R) => number;
10
9
  };
11
10
  export interface UseTreeViewItemsPublicAPI<R extends {}> {
12
11
  /**
@@ -65,30 +64,25 @@ export interface UseTreeViewItemsInstance<R extends {}> extends Pick<UseTreeView
65
64
  areItemUpdatesPrevented: () => boolean;
66
65
  /**
67
66
  * Add an array of items to the tree.
68
- * @param {AddItemsParameters<R>} args The items to add to the tree and information about their ancestors.
67
+ * @param {SetItemChildrenParameters<R>} args The items to add to the tree and information about their ancestors.
69
68
  */
70
- addItems: (args: AddItemsParameters<R>) => void;
69
+ setItemChildren: (args: SetItemChildrenParameters<R>) => void;
71
70
  /**
72
71
  * Remove the children of an item.
73
- * @param {TreeViewItemId} parentId The id of the item to remove the children of.
72
+ * @param {TreeViewItemId | null} parentId The id of the item to remove the children of.
74
73
  */
75
- removeChildren: (parentId?: TreeViewItemId) => void;
76
- /**
77
- * Set the loading state of the tree.
78
- * @param {boolean} loading True if the tree view is loading.
79
- */
80
- setTreeViewLoading: (loading: boolean) => void;
81
- /**
82
- * Set the error state of the tree.
83
- * @param {Error | null} error The error on the tree view.
84
- */
85
- setTreeViewError: (error: Error | null) => void;
74
+ removeChildren: (parentId: TreeViewItemId | null) => void;
86
75
  /**
87
76
  * Event handler to fire when the `content` slot of a given Tree Item is clicked.
88
77
  * @param {React.MouseEvent} event The DOM event that triggered the change.
89
78
  * @param {TreeViewItemId} itemId The id of the item being clicked.
90
79
  */
91
80
  handleItemClick: (event: React.MouseEvent, itemId: TreeViewItemId) => void;
81
+ /**
82
+ * Mark a list of items as expandable.
83
+ * @param {TreeViewItemId[]} items The ids of the items to mark as expandable.
84
+ */
85
+ addExpandableItems: (items: TreeViewItemId[]) => void;
92
86
  }
93
87
  export interface UseTreeViewItemsParameters<R extends {
94
88
  children?: R[];
@@ -186,14 +180,6 @@ export interface UseTreeViewItemsState<R extends {}> {
186
180
  [itemId: string]: number;
187
181
  };
188
182
  };
189
- /**
190
- * The loading state of the tree.
191
- */
192
- loading: boolean;
193
- /**
194
- * The error state of the tree.
195
- */
196
- error: Error | null;
197
183
  /**
198
184
  * When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).
199
185
  * When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).
@@ -1,5 +1,6 @@
1
- import { TreeViewItemId } from "../../../models/index.js";
1
+ import { TreeViewBaseItem, TreeViewItemId } from "../../../models/index.js";
2
2
  import { TreeViewItemMeta } from "../../models/index.js";
3
+ import { UseTreeViewItemsParametersWithDefaults, UseTreeViewItemsState } from "./useTreeViewItems.types.js";
3
4
  export declare const TREE_VIEW_ROOT_PARENT_ID = "__TREE_VIEW_ROOT_PARENT_ID__";
4
5
  export declare const buildSiblingIndexes: (siblings: string[]) => {
5
6
  [itemId: string]: number;
@@ -12,4 +13,37 @@ export declare const buildSiblingIndexes: (siblings: string[]) => {
12
13
  */
13
14
  export declare const isItemDisabled: (itemMetaLookup: {
14
15
  [itemId: string]: TreeViewItemMeta;
15
- }, itemId: TreeViewItemId) => boolean;
16
+ }, itemId: TreeViewItemId) => boolean;
17
+ type State = UseTreeViewItemsState<any>['items'];
18
+ export declare function buildItemsState(parameters: BuildItemsStateParameters): State;
19
+ interface BuildItemsStateParameters extends Pick<BuildItemsLookupsParameters, 'items' | 'config'> {
20
+ disabledItemsFocusable: boolean;
21
+ }
22
+ export declare function buildItemsLookups(parameters: BuildItemsLookupsParameters): {
23
+ metaLookup: {
24
+ [itemId: string]: TreeViewItemMeta;
25
+ };
26
+ modelLookup: {
27
+ [itemId: string]: any;
28
+ };
29
+ orderedChildrenIds: string[];
30
+ childrenIndexes: {
31
+ [itemId: string]: number;
32
+ };
33
+ itemsChildren: {
34
+ id: string | null;
35
+ children: TreeViewBaseItem[];
36
+ }[];
37
+ };
38
+ interface BuildItemsLookupsParameters {
39
+ items: readonly TreeViewBaseItem[];
40
+ config: BuildItemsLookupConfig;
41
+ parentId: string | null;
42
+ depth: number;
43
+ isItemExpandable: (item: TreeViewBaseItem, children: TreeViewBaseItem[] | undefined) => boolean;
44
+ otherItemsMetaLookup: {
45
+ [itemId: string]: TreeViewItemMeta;
46
+ };
47
+ }
48
+ export interface BuildItemsLookupConfig extends Pick<UseTreeViewItemsParametersWithDefaults<TreeViewBaseItem>, 'isItemDisabled' | 'getItemLabel' | 'getItemChildren' | 'getItemId'> {}
49
+ export {};
@@ -3,7 +3,10 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.isItemDisabled = exports.buildSiblingIndexes = exports.TREE_VIEW_ROOT_PARENT_ID = void 0;
6
+ exports.TREE_VIEW_ROOT_PARENT_ID = void 0;
7
+ exports.buildItemsLookups = buildItemsLookups;
8
+ exports.buildItemsState = buildItemsState;
9
+ exports.isItemDisabled = exports.buildSiblingIndexes = void 0;
7
10
  const TREE_VIEW_ROOT_PARENT_ID = exports.TREE_VIEW_ROOT_PARENT_ID = '__TREE_VIEW_ROOT_PARENT_ID__';
8
11
  const buildSiblingIndexes = siblings => {
9
12
  const siblingsIndexLookup = {};
@@ -44,4 +47,118 @@ const isItemDisabled = (itemMetaLookup, itemId) => {
44
47
  }
45
48
  return false;
46
49
  };
47
- exports.isItemDisabled = isItemDisabled;
50
+ exports.isItemDisabled = isItemDisabled;
51
+ function buildItemsState(parameters) {
52
+ const {
53
+ config,
54
+ items: itemsParam,
55
+ disabledItemsFocusable
56
+ } = parameters;
57
+ const itemMetaLookup = {};
58
+ const itemModelLookup = {};
59
+ const itemOrderedChildrenIdsLookup = {};
60
+ const itemChildrenIndexesLookup = {};
61
+ function processSiblings(items, parentId, depth) {
62
+ const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
63
+ const {
64
+ metaLookup,
65
+ modelLookup,
66
+ orderedChildrenIds,
67
+ childrenIndexes,
68
+ itemsChildren
69
+ } = buildItemsLookups({
70
+ config,
71
+ items,
72
+ parentId,
73
+ depth,
74
+ isItemExpandable: (item, children) => !!children && children.length > 0,
75
+ otherItemsMetaLookup: itemMetaLookup
76
+ });
77
+ Object.assign(itemMetaLookup, metaLookup);
78
+ Object.assign(itemModelLookup, modelLookup);
79
+ itemOrderedChildrenIdsLookup[parentIdWithDefault] = orderedChildrenIds;
80
+ itemChildrenIndexesLookup[parentIdWithDefault] = childrenIndexes;
81
+ for (const item of itemsChildren) {
82
+ processSiblings(item.children || [], item.id, depth + 1);
83
+ }
84
+ }
85
+ processSiblings(itemsParam, null, 0);
86
+ return {
87
+ disabledItemsFocusable,
88
+ itemMetaLookup,
89
+ itemModelLookup,
90
+ itemOrderedChildrenIdsLookup,
91
+ itemChildrenIndexesLookup,
92
+ domStructure: 'nested'
93
+ };
94
+ }
95
+ function buildItemsLookups(parameters) {
96
+ const {
97
+ config,
98
+ items,
99
+ parentId,
100
+ depth,
101
+ isItemExpandable,
102
+ otherItemsMetaLookup
103
+ } = parameters;
104
+ const metaLookup = {};
105
+ const modelLookup = {};
106
+ const orderedChildrenIds = [];
107
+ const itemsChildren = [];
108
+ const processItem = item => {
109
+ const id = config.getItemId ? config.getItemId(item) : item.id;
110
+ checkId({
111
+ id,
112
+ parentId,
113
+ item,
114
+ itemMetaLookup: otherItemsMetaLookup,
115
+ siblingsMetaLookup: metaLookup
116
+ });
117
+ const label = config.getItemLabel ? config.getItemLabel(item) : item.label;
118
+ if (label == null) {
119
+ throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'Alternatively, you can use the `getItemLabel` prop to specify a custom label for each item.', 'An item was provided without label in the `items` prop:', JSON.stringify(item)].join('\n'));
120
+ }
121
+ const children = (config.getItemChildren ? config.getItemChildren(item) : item.children) || [];
122
+ itemsChildren.push({
123
+ id,
124
+ children
125
+ });
126
+ modelLookup[id] = item;
127
+ metaLookup[id] = {
128
+ id,
129
+ label,
130
+ parentId,
131
+ idAttribute: undefined,
132
+ expandable: isItemExpandable(item, children),
133
+ disabled: config.isItemDisabled ? config.isItemDisabled(item) : false,
134
+ depth
135
+ };
136
+ orderedChildrenIds.push(id);
137
+ };
138
+ for (const item of items) {
139
+ processItem(item);
140
+ }
141
+ return {
142
+ metaLookup,
143
+ modelLookup,
144
+ orderedChildrenIds,
145
+ childrenIndexes: buildSiblingIndexes(orderedChildrenIds),
146
+ itemsChildren
147
+ };
148
+ }
149
+ function checkId({
150
+ id,
151
+ parentId,
152
+ item,
153
+ itemMetaLookup,
154
+ siblingsMetaLookup
155
+ }) {
156
+ if (id == null) {
157
+ throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
158
+ }
159
+ if (siblingsMetaLookup[id] != null ||
160
+ // Ignore items with the same parent id, because it's the same item from the previous generation.
161
+ itemMetaLookup[id] != null && itemMetaLookup[id].parentId !== parentId) {
162
+ throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${id}"`].join('\n'));
163
+ }
164
+ }
@@ -10,9 +10,9 @@ exports.useTreeViewJSXItems = void 0;
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
  var React = _interopRequireWildcard(require("react"));
12
12
  var _store = require("@mui/x-internals/store");
13
- var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
14
- var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
15
- var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
13
+ var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
14
+ var _useMergedRefs = require("@base-ui-components/utils/useMergedRefs");
15
+ var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
16
16
  var _TreeViewProvider = require("../../TreeViewProvider");
17
17
  var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
18
18
  var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.utils");
@@ -26,7 +26,7 @@ const useTreeViewJSXItems = ({
26
26
  store
27
27
  }) => {
28
28
  instance.preventItemUpdates();
29
- const insertJSXItem = (0, _useEventCallback.default)(item => {
29
+ const insertJSXItem = (0, _useEventCallback.useEventCallback)(item => {
30
30
  if (store.state.items.itemMetaLookup[item.id] != null) {
31
31
  throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${item.id}"`].join('\n'));
32
32
  }
@@ -64,7 +64,7 @@ const useTreeViewJSXItems = ({
64
64
  })
65
65
  }));
66
66
  };
67
- const mapFirstCharFromJSX = (0, _useEventCallback.default)((itemId, firstChar) => {
67
+ const mapFirstCharFromJSX = (0, _useEventCallback.useEventCallback)((itemId, firstChar) => {
68
68
  instance.updateFirstCharMap(firstCharMap => {
69
69
  firstCharMap[itemId] = firstChar;
70
70
  return firstCharMap;
@@ -113,11 +113,11 @@ const useTreeViewJSXItemsItemPlugin = ({
113
113
  } = parentContext;
114
114
  const expandable = (0, _useTreeItemUtils.itemHasChildren)(children);
115
115
  const pluginContentRef = React.useRef(null);
116
- const handleContentRef = (0, _useForkRef.default)(pluginContentRef, contentRef);
116
+ const handleContentRef = (0, _useMergedRefs.useMergedRefs)(pluginContentRef, contentRef);
117
117
  const treeId = (0, _store.useStore)(store, _useTreeViewId2.idSelectors.treeId);
118
118
 
119
119
  // Prevent any flashing
120
- (0, _useEnhancedEffect.default)(() => {
120
+ (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
121
121
  const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
122
122
  itemId,
123
123
  treeId,
@@ -129,7 +129,7 @@ const useTreeViewJSXItemsItemPlugin = ({
129
129
  unregisterChild(idAttribute);
130
130
  };
131
131
  }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
132
- (0, _useEnhancedEffect.default)(() => {
132
+ (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
133
133
  return instance.insertJSXItem({
134
134
  id: itemId,
135
135
  idAttribute: id,
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
  'use client';
3
3
 
4
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
4
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
5
  Object.defineProperty(exports, "__esModule", {
7
6
  value: true
@@ -10,7 +9,7 @@ exports.useTreeViewKeyboardNavigation = void 0;
10
9
  var React = _interopRequireWildcard(require("react"));
11
10
  var _store = require("@mui/x-internals/store");
12
11
  var _RtlProvider = require("@mui/system/RtlProvider");
13
- var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
12
+ var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
14
13
  var _tree = require("../../utils/tree");
15
14
  var _plugins = require("../../utils/plugins");
16
15
  var _useTreeViewLabel = require("../useTreeViewLabel");
@@ -28,7 +27,7 @@ const useTreeViewKeyboardNavigation = ({
28
27
  }) => {
29
28
  const isRtl = (0, _RtlProvider.useRtl)();
30
29
  const firstCharMap = React.useRef({});
31
- const updateFirstCharMap = (0, _useEventCallback.default)(callback => {
30
+ const updateFirstCharMap = (0, _useEventCallback.useEventCallback)(callback => {
32
31
  firstCharMap.current = callback(firstCharMap.current);
33
32
  });
34
33
  const itemMetaLookup = (0, _store.useStore)(store, _useTreeViewItems.itemsSelectors.itemMetaLookup);
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.useTreeViewLabel = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
- var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
9
+ var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
10
10
  var _useTreeViewLabel = require("./useTreeViewLabel.itemPlugin");
11
11
  var _useTreeViewLabel2 = require("./useTreeViewLabel.selectors");
12
12
  const useTreeViewLabel = ({
@@ -43,7 +43,7 @@ const useTreeViewLabel = ({
43
43
  params.onItemLabelChange(itemId, label);
44
44
  }
45
45
  };
46
- (0, _useEnhancedEffect.default)(() => {
46
+ (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
47
47
  store.set('label', (0, _extends2.default)({}, store.state.items, {
48
48
  isItemEditable: params.isItemEditable
49
49
  }));
@@ -1,2 +1,2 @@
1
- export type { UseTreeViewLazyLoadingSignature, UseTreeViewLazyLoadingParameters, UseTreeViewLazyLoadingInstance } from "./useTreeViewLazyLoading.types.js";
1
+ export type { UseTreeViewLazyLoadingSignature, UseTreeViewLazyLoadingParameters, UseTreeViewLazyLoadingInstance, DataSource } from "./useTreeViewLazyLoading.types.js";
2
2
  export { lazyLoadingSelectors } from "./useTreeViewLazyLoading.selectors.js";
@@ -12,9 +12,13 @@ export declare const lazyLoadingSelectors: {
12
12
  /**
13
13
  * Checks whether an item is loading.
14
14
  */
15
- isItemLoading: (state: TreeViewState<[], [UseTreeViewLazyLoadingSignature]>, itemId: string) => boolean;
15
+ isItemLoading: (state: TreeViewState<[], [UseTreeViewLazyLoadingSignature]>, itemId: string | null) => boolean;
16
16
  /**
17
17
  * Checks whether an item has errors.
18
18
  */
19
- itemHasError: (state: TreeViewState<[], [UseTreeViewLazyLoadingSignature]>, itemId: string) => boolean;
19
+ itemHasError: (state: TreeViewState<[], [UseTreeViewLazyLoadingSignature]>, itemId: string | null) => boolean;
20
+ /**
21
+ * Get an item error.
22
+ */
23
+ itemError: (state: TreeViewState<[], [UseTreeViewLazyLoadingSignature]>, itemId: string | null) => Error | null | undefined;
20
24
  };
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.lazyLoadingSelectors = void 0;
7
7
  var _store = require("@mui/x-internals/store");
8
+ var _useTreeViewItems = require("../useTreeViewItems");
8
9
  const lazyLoadingSelectors = exports.lazyLoadingSelectors = {
9
10
  /**
10
11
  * Gets the data source used to lazy load items.
@@ -13,9 +14,13 @@ const lazyLoadingSelectors = exports.lazyLoadingSelectors = {
13
14
  /**
14
15
  * Checks whether an item is loading.
15
16
  */
16
- isItemLoading: (0, _store.createSelector)((state, itemId) => state.lazyLoading?.dataSource.loading[itemId] ?? false),
17
+ isItemLoading: (0, _store.createSelector)((state, itemId) => state.lazyLoading?.dataSource.loading[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? false),
17
18
  /**
18
19
  * Checks whether an item has errors.
19
20
  */
20
- itemHasError: (0, _store.createSelector)((state, itemId) => !!state.lazyLoading?.dataSource.errors[itemId])
21
+ itemHasError: (0, _store.createSelector)((state, itemId) => !!state.lazyLoading?.dataSource.errors[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID]),
22
+ /**
23
+ * Get an item error.
24
+ */
25
+ itemError: (0, _store.createSelector)((state, itemId) => state.lazyLoading?.dataSource.errors[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID])
21
26
  };
@@ -5,7 +5,7 @@ import { TreeViewItemId } from "../../../models/index.js";
5
5
  import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
6
6
  import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
7
7
  import { UseTreeViewSelectionSignature } from "../useTreeViewSelection/index.js";
8
- type DataSource<R extends {}> = {
8
+ export type DataSource<R extends {}> = {
9
9
  /**
10
10
  * Used to determine the number of children the item has.
11
11
  * Only relevant for lazy-loaded trees.
@@ -43,7 +43,7 @@ export interface UseTreeViewLazyLoadingInstance extends UseTreeViewLazyLoadingPu
43
43
  * @param {TreeViewItemId[]} parentIds The ids of the items to fetch the children of.
44
44
  * @returns {Promise<void>} The promise resolved when the items are fetched.
45
45
  */
46
- fetchItems: (parentIds?: TreeViewItemId[]) => Promise<void>;
46
+ fetchItems: (parentIds: TreeViewItemId[]) => Promise<void>;
47
47
  /**
48
48
  * Method used for fetching an item's children.
49
49
  * Only relevant for lazy-loaded tree views.
@@ -54,21 +54,21 @@ export interface UseTreeViewLazyLoadingInstance extends UseTreeViewLazyLoadingPu
54
54
  * @returns {Promise<void>} The promise resolved when the items are fetched.
55
55
  */
56
56
  fetchItemChildren: (parameters: {
57
- itemId: TreeViewItemId;
57
+ itemId: TreeViewItemId | null;
58
58
  forceRefresh?: boolean;
59
59
  }) => Promise<void>;
60
60
  /**
61
61
  * Set the loading state of an item.
62
- * @param {TreeViewItemId} itemId The id of the item to set the loading state of.
62
+ * @param {TreeViewItemId} itemId The id of the item to set the loading state of. If `null` is passed, it will set the loading state of the root.
63
63
  * @param {boolean} isLoading True if the item is loading.
64
64
  */
65
- setDataSourceLoading: (itemId: TreeViewItemId, isLoading: boolean) => void;
65
+ setDataSourceLoading: (itemId: TreeViewItemId | null, isLoading: boolean) => void;
66
66
  /**
67
67
  * Set the error state of an item.
68
- * @param {TreeViewItemId} itemId The id of the item to set the error state of.
68
+ * @param {TreeViewItemId} itemId The id of the item to set the error state of. If `null` is passed, it will set the error state of the root.
69
69
  * @param {Error | null} error The error caught on the item.
70
70
  */
71
- setDataSourceError: (itemId: TreeViewItemId, error: Error | null) => void;
71
+ setDataSourceError: (itemId: TreeViewItemId | null, error: Error | null) => void;
72
72
  }
73
73
  export interface UseTreeViewLazyLoadingParameters<R extends {}> {
74
74
  /**
@@ -97,5 +97,4 @@ export type UseTreeViewLazyLoadingSignature = TreeViewPluginSignature<{
97
97
  instance: UseTreeViewLazyLoadingInstance;
98
98
  state: UseTreeViewLazyLoadingState;
99
99
  dependencies: [UseTreeViewItemsSignature, UseTreeViewExpansionSignature, UseTreeViewSelectionSignature];
100
- }>;
101
- export {};
100
+ }>;
@@ -25,11 +25,20 @@ const selectorCheckboxSelectionStatus = (0, _store.createSelector)((state, itemI
25
25
  _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, itemToTraverseId).forEach(traverseDescendants);
26
26
  };
27
27
  traverseDescendants(itemId);
28
- if (hasSelectedDescendant && hasUnSelectedDescendant) {
28
+ const shouldSelectBasedOnDescendants = _useTreeViewSelection.selectionSelectors.propagationRules(state).parents;
29
+ if (shouldSelectBasedOnDescendants) {
30
+ if (hasSelectedDescendant && hasUnSelectedDescendant) {
31
+ return 'indeterminate';
32
+ }
33
+ if (hasSelectedDescendant && !hasUnSelectedDescendant) {
34
+ return 'checked';
35
+ }
36
+ return 'empty';
37
+ }
38
+ if (hasSelectedDescendant) {
29
39
  return 'indeterminate';
30
40
  }
31
- const shouldSelectBasedOnDescendants = _useTreeViewSelection.selectionSelectors.propagationRules(state).parents;
32
- return shouldSelectBasedOnDescendants && hasSelectedDescendant && !hasUnSelectedDescendant ? 'checked' : 'empty';
41
+ return 'empty';
33
42
  });
34
43
  const useTreeViewSelectionItemPlugin = ({
35
44
  props
@@ -9,7 +9,7 @@ exports.useTreeViewSelection = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  var React = _interopRequireWildcard(require("react"));
11
11
  var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
12
- var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
12
+ var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
13
13
  var _tree = require("../../utils/tree");
14
14
  var _useTreeViewSelection = require("./useTreeViewSelection.utils");
15
15
  var _useTreeViewSelection2 = require("./useTreeViewSelection.selectors");
@@ -176,7 +176,7 @@ const useTreeViewSelection = ({
176
176
  }
177
177
  setSelectedItems(event, newSelectedItems);
178
178
  };
179
- (0, _useEnhancedEffect.default)(() => {
179
+ (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
180
180
  store.set('selection', {
181
181
  selectedItems: params.selectedItems === undefined ? store.state.selection.selectedItems : params.selectedItems,
182
182
  isEnabled: !params.disableSelection,
@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
11
11
  var React = _interopRequireWildcard(require("react"));
12
12
  var _useRefWithInit = require("@base-ui-components/utils/useRefWithInit");
13
13
  var _store = require("@mui/x-internals/store");
14
- var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
14
+ var _useMergedRefs = require("@base-ui-components/utils/useMergedRefs");
15
15
  var _corePlugins = require("../corePlugins");
16
16
  var _useExtractPluginParamsFromProps = require("./useExtractPluginParamsFromProps");
17
17
  var _useTreeViewBuildContext = require("./useTreeViewBuildContext");
@@ -55,7 +55,7 @@ const useTreeView = ({
55
55
  const instance = (0, _useRefWithInit.useRefWithInit)(() => ({})).current;
56
56
  const publicAPI = useTreeViewApiInitialization(apiRef);
57
57
  const innerRootRef = React.useRef(null);
58
- const handleRootRef = (0, _useForkRef.default)(innerRootRef, rootRef);
58
+ const handleRootRef = (0, _useMergedRefs.useMergedRefs)(innerRootRef, rootRef);
59
59
  const store = (0, _useRefWithInit.useRefWithInit)(() => {
60
60
  const initialState = {};
61
61
  for (const plugin of plugins) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/x-tree-view",
3
- "version": "8.12.0",
3
+ "version": "8.13.1",
4
4
  "author": "MUI Team",
5
5
  "description": "The community edition of the MUI X Tree View components.",
6
6
  "license": "MIT",
@@ -31,14 +31,14 @@
31
31
  "directory": "packages/x-tree-view"
32
32
  },
33
33
  "dependencies": {
34
- "@babel/runtime": "^7.28.2",
34
+ "@babel/runtime": "^7.28.4",
35
35
  "@base-ui-components/utils": "0.1.1",
36
36
  "@mui/utils": "^7.3.2",
37
37
  "@types/react-transition-group": "^4.4.12",
38
38
  "clsx": "^2.1.1",
39
39
  "prop-types": "^15.8.1",
40
40
  "react-transition-group": "^4.4.5",
41
- "@mui/x-internals": "8.12.0"
41
+ "@mui/x-internals": "8.13.1"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "@emotion/react": "^11.9.0",
@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
11
11
  var React = _interopRequireWildcard(require("react"));
12
12
  var _store = require("@mui/x-internals/store");
13
13
  var _extractEventHandlers = _interopRequireDefault(require("@mui/utils/extractEventHandlers"));
14
- var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
14
+ var _useMergedRefs = require("@base-ui-components/utils/useMergedRefs");
15
15
  var _TreeViewProvider = require("../internals/TreeViewProvider");
16
16
  var _useTreeItemUtils = require("../hooks/useTreeItemUtils");
17
17
  var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
@@ -57,8 +57,8 @@ const useTreeItem = parameters => {
57
57
  });
58
58
  const rootRefObject = React.useRef(null);
59
59
  const contentRefObject = React.useRef(null);
60
- const handleRootRef = (0, _useForkRef.default)(rootRef, pluginRootRef, rootRefObject);
61
- const handleContentRef = (0, _useForkRef.default)(contentRef, contentRefObject);
60
+ const handleRootRef = (0, _useMergedRefs.useMergedRefs)(rootRef, pluginRootRef, rootRefObject);
61
+ const handleContentRef = (0, _useMergedRefs.useMergedRefs)(contentRef, contentRefObject);
62
62
  const checkboxRef = React.useRef(null);
63
63
  const treeId = (0, _store.useStore)(store, _useTreeViewId2.idSelectors.treeId);
64
64
  const isSelectionEnabledForItem = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.canItemBeSelected, itemId);
@@ -1 +0,0 @@
1
- export { default as useLazyRef } from '@mui/utils/useLazyRef';
@@ -1 +0,0 @@
1
- export { default as useLazyRef } from '@mui/utils/useLazyRef';
@@ -1 +0,0 @@
1
- export { default as useOnMount } from '@mui/utils/useOnMount';
@@ -1 +0,0 @@
1
- export { default as useOnMount } from '@mui/utils/useOnMount';
@@ -1 +0,0 @@
1
- export { default as useTimeout } from '@mui/utils/useTimeout';
@@ -1 +0,0 @@
1
- export { default as useTimeout } from '@mui/utils/useTimeout';
@@ -1 +0,0 @@
1
- export { default as useLazyRef } from '@mui/utils/useLazyRef';
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "useLazyRef", {
8
- enumerable: true,
9
- get: function () {
10
- return _useLazyRef.default;
11
- }
12
- });
13
- var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
@@ -1 +0,0 @@
1
- export { default as useOnMount } from '@mui/utils/useOnMount';
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "useOnMount", {
8
- enumerable: true,
9
- get: function () {
10
- return _useOnMount.default;
11
- }
12
- });
13
- var _useOnMount = _interopRequireDefault(require("@mui/utils/useOnMount"));
@@ -1 +0,0 @@
1
- export { default as useTimeout } from '@mui/utils/useTimeout';
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "useTimeout", {
8
- enumerable: true,
9
- get: function () {
10
- return _useTimeout.default;
11
- }
12
- });
13
- var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));