@mui/x-tree-view 8.22.0 → 8.24.0

package/internals/plugins/keyboardNavigation/TreeViewKeyboardNavigationPlugin.js

@@ -0,0 +1,313 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewKeyboardNavigationPlugin = void 0;
+var _expansion = require("../expansion");
+var _items = require("../items");
+var _labelEditing = require("../labelEditing");
+var _selectors = require("../selection/selectors");
+var _tree = require("../../utils/tree");
+const TYPEAHEAD_TIMEOUT = 500;
+class TreeViewKeyboardNavigationPlugin {
+  typeaheadQuery = '';
+
+  // We can't type `store`, otherwise we get the following TS error:
+  // 'keyboardNavigation' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+  constructor(store) {
+    this.store = store;
+    this.labelMap = createLabelMapFromItemMetaLookup(_items.itemsSelectors.itemMetaLookup(this.store.state));
+
+    // Whenever the itemMetaLookup changes, we need to regen the label map.
+    this.store.registerStoreEffect(_items.itemsSelectors.itemMetaLookup, (_, itemMetaLookup) => {
+      if (this.store.shouldIgnoreItemsStateUpdate()) {
+        return;
+      }
+      this.labelMap = createLabelMapFromItemMetaLookup(itemMetaLookup);
+    });
+  }
+  canToggleItemSelection = itemId => _selectors.selectionSelectors.canItemBeSelected(this.store.state, itemId);
+  canToggleItemExpansion = itemId => {
+    return !_items.itemsSelectors.isItemDisabled(this.store.state, itemId) && _expansion.expansionSelectors.isItemExpandable(this.store.state, itemId);
+  };
+  getFirstItemMatchingTypeaheadQuery = (itemId, newKey) => {
+    const getNextItem = itemIdToCheck => {
+      const nextItemId = (0, _tree.getNextNavigableItem)(this.store.state, itemIdToCheck);
+      // We reached the end of the tree, check from the beginning
+      if (nextItemId === null) {
+        return (0, _tree.getFirstNavigableItem)(this.store.state);
+      }
+      return nextItemId;
+    };
+    const getNextMatchingItemId = query => {
+      let matchingItemId = null;
+      const checkedItems = {};
+      // If query length > 1, first check if current item matches
+      let currentItemId = query.length > 1 ? itemId : getNextItem(itemId);
+      // The "!checkedItems[currentItemId]" condition avoids an infinite loop when there is no matching item.
+      while (matchingItemId == null && !checkedItems[currentItemId]) {
+        const itemLabel = this.labelMap[currentItemId];
+        if (itemLabel?.startsWith(query)) {
+          matchingItemId = currentItemId;
+        } else {
+          checkedItems[currentItemId] = true;
+          currentItemId = getNextItem(currentItemId);
+        }
+      }
+      return matchingItemId;
+    };
+    const cleanNewKey = newKey.toLowerCase();
+
+    // Try matching with accumulated query + new key
+    const concatenatedQuery = `${this.typeaheadQuery}${cleanNewKey}`;
+
+    // check if the entire typed query matches an item
+    const concatenatedQueryMatchingItemId = getNextMatchingItemId(concatenatedQuery);
+    if (concatenatedQueryMatchingItemId != null) {
+      this.typeaheadQuery = concatenatedQuery;
+      return concatenatedQueryMatchingItemId;
+    }
+    const newKeyMatchingItemId = getNextMatchingItemId(cleanNewKey);
+    if (newKeyMatchingItemId != null) {
+      this.typeaheadQuery = cleanNewKey;
+      return newKeyMatchingItemId;
+    }
+    this.typeaheadQuery = '';
+    return null;
+  };
+
+  /**
+   * Updates the `labelMap` to add/remove the first character of some item's labels.
+   * This map is used to navigate the tree using type-ahead search.
+   * This method is only used by the `useTreeViewJSXItems` plugin, otherwise the updates are handled internally.
+   * @param {(map: TreeViewLabelMap) => TreeViewLabelMap} updater The function to update the map.
+   */
+  updateLabelMap = callback => {
+    this.labelMap = callback(this.labelMap);
+  };
+
+  // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
+  /**
+   * Callback fired when a key is pressed on an item.
+   * Handles all the keyboard navigation logic.
+   * @param {React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent} event The keyboard event that triggered the callback.
+   * @param {TreeViewItemId} itemId The id of the item that the event was triggered on.
+   */
+  handleItemKeyDown = async (event, itemId) => {
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    if (event.altKey || (0, _tree.isTargetInDescendants)(event.target, event.currentTarget)) {
+      return;
+    }
+    const ctrlPressed = event.ctrlKey || event.metaKey;
+    const key = event.key;
+    const isMultiSelectEnabled = _selectors.selectionSelectors.isMultiSelectEnabled(this.store.state);
+
+    // eslint-disable-next-line default-case
+    switch (true) {
+      // Select the item when pressing "Space"
+      case key === ' ' && this.canToggleItemSelection(itemId):
+        {
+          event.preventDefault();
+          if (isMultiSelectEnabled && event.shiftKey) {
+            this.store.selection.expandSelectionRange(event, itemId);
+          } else {
+            this.store.selection.setItemSelection({
+              event,
+              itemId,
+              keepExistingSelection: isMultiSelectEnabled,
+              shouldBeSelected: undefined
+            });
+          }
+          break;
+        }
+
+      // If the focused item has children, we expand it.
+      // If the focused item has no children, we select it.
+      case key === 'Enter':
+        {
+          if (this.store.labelEditing?.setEditedItem && _labelEditing.labelSelectors.isItemEditable(this.store.state, itemId) && !_labelEditing.labelSelectors.isItemBeingEdited(this.store.state, itemId)) {
+            this.store.labelEditing.setEditedItem(itemId);
+          } else if (this.canToggleItemExpansion(itemId)) {
+            this.store.expansion.setItemExpansion({
+              event,
+              itemId
+            });
+            event.preventDefault();
+          } else if (this.canToggleItemSelection(itemId)) {
+            if (isMultiSelectEnabled) {
+              event.preventDefault();
+              this.store.selection.setItemSelection({
+                event,
+                itemId,
+                keepExistingSelection: true
+              });
+            } else if (!_selectors.selectionSelectors.isItemSelected(this.store.state, itemId)) {
+              this.store.selection.setItemSelection({
+                event,
+                itemId
+              });
+              event.preventDefault();
+            }
+          }
+          break;
+        }
+
+      // Focus the next focusable item
+      case key === 'ArrowDown':
+        {
+          const nextItem = (0, _tree.getNextNavigableItem)(this.store.state, itemId);
+          if (nextItem) {
+            event.preventDefault();
+            this.store.focus.focusItem(event, nextItem);
+
+            // Multi select behavior when pressing Shift + ArrowDown
+            // Toggles the selection state of the next item
+            if (isMultiSelectEnabled && event.shiftKey && this.canToggleItemSelection(nextItem)) {
+              this.store.selection.selectItemFromArrowNavigation(event, itemId, nextItem);
+            }
+          }
+          break;
+        }
+
+      // Focuses the previous focusable item
+      case key === 'ArrowUp':
+        {
+          const previousItem = (0, _tree.getPreviousNavigableItem)(this.store.state, itemId);
+          if (previousItem) {
+            event.preventDefault();
+            this.store.focus.focusItem(event, previousItem);
+
+            // Multi select behavior when pressing Shift + ArrowUp
+            // Toggles the selection state of the previous item
+            if (isMultiSelectEnabled && event.shiftKey && this.canToggleItemSelection(previousItem)) {
+              this.store.selection.selectItemFromArrowNavigation(event, itemId, previousItem);
+            }
+          }
+          break;
+        }
+
+      // If the focused item is expanded, we move the focus to its first child
+      // If the focused item is collapsed and has children, we expand it
+      case key === 'ArrowRight' && !this.store.parameters.isRtl || key === 'ArrowLeft' && this.store.parameters.isRtl:
+        {
+          if (ctrlPressed) {
+            return;
+          }
+          if (_expansion.expansionSelectors.isItemExpanded(this.store.state, itemId)) {
+            const nextItemId = (0, _tree.getNextNavigableItem)(this.store.state, itemId);
+            if (nextItemId) {
+              this.store.focus.focusItem(event, nextItemId);
+              event.preventDefault();
+            }
+          } else if (this.canToggleItemExpansion(itemId)) {
+            this.store.expansion.setItemExpansion({
+              event,
+              itemId
+            });
+            event.preventDefault();
+          }
+          break;
+        }
+
+      // If the focused item is expanded, we collapse it
+      // If the focused item is collapsed and has a parent, we move the focus to this parent
+      case key === 'ArrowLeft' && !this.store.parameters.isRtl || key === 'ArrowRight' && this.store.parameters.isRtl:
+        {
+          if (ctrlPressed) {
+            return;
+          }
+          if (this.canToggleItemExpansion(itemId) && _expansion.expansionSelectors.isItemExpanded(this.store.state, itemId)) {
+            this.store.expansion.setItemExpansion({
+              event,
+              itemId
+            });
+            event.preventDefault();
+          } else {
+            const parent = _items.itemsSelectors.itemParentId(this.store.state, itemId);
+            if (parent) {
+              this.store.focus.focusItem(event, parent);
+              event.preventDefault();
+            }
+          }
+          break;
+        }
+
+      // Focuses the first item in the tree
+      case key === 'Home':
+        {
+          // Multi select behavior when pressing Ctrl + Shift + Home
+          // Selects the focused item and all items up to the first item.
+          if (this.canToggleItemSelection(itemId) && isMultiSelectEnabled && ctrlPressed && event.shiftKey) {
+            this.store.selection.selectRangeFromStartToItem(event, itemId);
+          } else {
+            this.store.focus.focusItem(event, (0, _tree.getFirstNavigableItem)(this.store.state));
+          }
+          event.preventDefault();
+          break;
+        }
+
+      // Focuses the last item in the tree
+      case key === 'End':
+        {
+          // Multi select behavior when pressing Ctrl + Shirt + End
+          // Selects the focused item and all the items down to the last item.
+          if (this.canToggleItemSelection(itemId) && isMultiSelectEnabled && ctrlPressed && event.shiftKey) {
+            this.store.selection.selectRangeFromItemToEnd(event, itemId);
+          } else {
+            this.store.focus.focusItem(event, (0, _tree.getLastNavigableItem)(this.store.state));
+          }
+          event.preventDefault();
+          break;
+        }
+
+      // Expand all siblings that are at the same level as the focused item
+      case key === '*':
+        {
+          this.store.expansion.expandAllSiblings(event, itemId);
+          event.preventDefault();
+          break;
+        }
+
+      // Multi select behavior when pressing Ctrl + a
+      // Selects all the items
+      case String.fromCharCode(event.keyCode) === 'A' && ctrlPressed && isMultiSelectEnabled && _selectors.selectionSelectors.enabled(this.store.state):
+        {
+          this.store.selection.selectAllNavigableItems(event);
+          event.preventDefault();
+          break;
+        }
+
+      // Type-ahead
+      case !ctrlPressed && !event.shiftKey && isPrintableKey(key):
+        {
+          this.store.timeoutManager.clearTimeout('typeahead');
+          const matchingItem = this.getFirstItemMatchingTypeaheadQuery(itemId, key);
+          if (matchingItem != null) {
+            this.store.focus.focusItem(event, matchingItem);
+            event.preventDefault();
+          } else {
+            this.typeaheadQuery = '';
+          }
+          this.store.timeoutManager.startTimeout('typeahead', TYPEAHEAD_TIMEOUT, () => {
+            this.typeaheadQuery = '';
+          });
+          break;
+        }
+    }
+  };
+}
+exports.TreeViewKeyboardNavigationPlugin = TreeViewKeyboardNavigationPlugin;
+function isPrintableKey(string) {
+  return !!string && string.length === 1 && !!string.match(/\S/);
+}
+function createLabelMapFromItemMetaLookup(itemMetaLookup) {
+  const labelMap = {};
+  const processItem = item => {
+    labelMap[item.id] = item.label.toLowerCase();
+  };
+  Object.values(itemMetaLookup).forEach(processItem);
+  return labelMap;
+}

package/internals/plugins/keyboardNavigation/index.d.ts

@@ -0,0 +1 @@
+export * from "./TreeViewKeyboardNavigationPlugin.js";

package/internals/plugins/keyboardNavigation/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TreeViewKeyboardNavigationPlugin = require("./TreeViewKeyboardNavigationPlugin");
+Object.keys(_TreeViewKeyboardNavigationPlugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeViewKeyboardNavigationPlugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeViewKeyboardNavigationPlugin[key];
+    }
+  });
+});

package/internals/plugins/labelEditing/TreeViewLabelEditingPlugin.d.ts

@@ -0,0 +1,22 @@
+import { ExtendableRichTreeViewStore } from "../../RichTreeViewStore/RichTreeViewStore.js";
+import { TreeViewItemId } from "../../../models/index.js";
+export declare class TreeViewLabelEditingPlugin {
+  private store;
+  constructor(store: ExtendableRichTreeViewStore<any, any>);
+  buildPublicAPI: () => {
+    setEditedItem: (itemId: TreeViewItemId | null) => void;
+    updateItemLabel: (itemId: TreeViewItemId, label: string) => void;
+  };
+  /**
+   * Set which item is currently being edited.
+   * You can pass `null` to exit editing mode.
+   * @param {TreeViewItemId | null} itemId The id of the item to edit, or `null` to exit editing mode.
+   */
+  setEditedItem: (itemId: TreeViewItemId | null) => void;
+  /**
+   * Used to update the label of an item.
+   * @param {TreeViewItemId} itemId The id of the item to update the label of.
+   * @param {string} label The new label of the item.
+   */
+  updateItemLabel: (itemId: TreeViewItemId, label: string) => void;
+}

package/internals/plugins/labelEditing/TreeViewLabelEditingPlugin.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewLabelEditingPlugin = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _selectors = require("./selectors");
+var _itemPlugin = require("./itemPlugin");
+class TreeViewLabelEditingPlugin {
+  constructor(store) {
+    this.store = store;
+    store.itemPluginManager.register(_itemPlugin.useLabelEditingItemPlugin, null);
+  }
+  buildPublicAPI = () => {
+    return {
+      setEditedItem: this.setEditedItem,
+      updateItemLabel: this.updateItemLabel
+    };
+  };
+
+  /**
+   * Set which item is currently being edited.
+   * You can pass `null` to exit editing mode.
+   * @param {TreeViewItemId | null} itemId The id of the item to edit, or `null` to exit editing mode.
+   */
+  setEditedItem = itemId => {
+    if (itemId !== null && !_selectors.labelSelectors.isItemEditable(this.store.state, itemId)) {
+      return;
+    }
+    this.store.set('editedItemId', itemId);
+  };
+
+  /**
+   * Used to update the label of an item.
+   * @param {TreeViewItemId} itemId The id of the item to update the label of.
+   * @param {string} label The new label of the item.
+   */
+  updateItemLabel = (itemId, label) => {
+    if (!label) {
+      throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'The label of an item cannot be empty.', itemId].join('\n'));
+    }
+    const item = this.store.state.itemMetaLookup[itemId];
+    if (item.label === label) {
+      return;
+    }
+    this.store.set('itemMetaLookup', (0, _extends2.default)({}, this.store.state.itemMetaLookup, {
+      [itemId]: (0, _extends2.default)({}, item, {
+        label
+      })
+    }));
+    if (this.store.parameters.onItemLabelChange) {
+      this.store.parameters.onItemLabelChange(itemId, label);
+    }
+  };
+}
+exports.TreeViewLabelEditingPlugin = TreeViewLabelEditingPlugin;

package/internals/plugins/labelEditing/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TreeViewLabelEditingPlugin.js";
+export * from "./selectors.js";

package/internals/plugins/labelEditing/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TreeViewLabelEditingPlugin = require("./TreeViewLabelEditingPlugin");
+Object.keys(_TreeViewLabelEditingPlugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeViewLabelEditingPlugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeViewLabelEditingPlugin[key];
+    }
+  });
+});
+var _selectors = require("./selectors");
+Object.keys(_selectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectors[key];
+    }
+  });
+});

package/{esm/internals/plugins/useTreeViewLabel → internals/plugins/labelEditing}/itemPlugin.d.ts

@@ -1,11 +1,12 @@
 import { TreeViewItemPlugin } from "../../models/index.js";
 import { TreeItemLabelInputProps } from "../../../TreeItemLabelInput/index.js";
-export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin;
-export interface UseTreeItemLabelInputSlotPropsFromLabelEditing extends TreeItemLabelInputProps {}
-export interface UseTreeItemLabelSlotPropsFromLabelEditing {
+export declare const useLabelEditingItemPlugin: TreeViewItemPlugin;
+interface UseTreeItemLabelInputSlotPropsFromLabelEditing extends TreeItemLabelInputProps {}
+interface UseTreeItemLabelSlotPropsFromLabelEditing {
   editable?: boolean;
 }
 declare module '@mui/x-tree-view/useTreeItem' {
   interface UseTreeItemLabelInputSlotOwnProps extends UseTreeItemLabelInputSlotPropsFromLabelEditing {}
   interface UseTreeItemLabelSlotOwnProps extends UseTreeItemLabelSlotPropsFromLabelEditing {}
-}
+}
+export {};

package/internals/plugins/{useTreeViewLabel → labelEditing}/itemPlugin.js

@@ -5,12 +5,12 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTreeViewLabelItemPlugin = void 0;
+exports.useLabelEditingItemPlugin = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@mui/x-internals/store");
 var _TreeViewProvider = require("../../TreeViewProvider");
-var _useTreeViewLabel = require("./useTreeViewLabel.selectors");
-const useTreeViewLabelItemPlugin = ({
+var _selectors = require("./selectors");
+const useLabelEditingItemPlugin = ({
   props
 }) => {
   const {
@@ -21,8 +21,8 @@ const useTreeViewLabelItemPlugin = ({
     itemId
   } = props;
   const [labelInputValue, setLabelInputValue] = React.useState(label);
-  const isItemEditable = (0, _store.useStore)(store, _useTreeViewLabel.labelSelectors.isItemEditable, itemId);
-  const isItemBeingEdited = (0, _store.useStore)(store, _useTreeViewLabel.labelSelectors.isItemBeingEdited, itemId);
+  const isItemEditable = (0, _store.useStore)(store, _selectors.labelSelectors.isItemEditable, itemId);
+  const isItemBeingEdited = (0, _store.useStore)(store, _selectors.labelSelectors.isItemBeingEdited, itemId);
   React.useEffect(() => {
     if (!isItemBeingEdited) {
       setLabelInputValue(label);
@@ -78,4 +78,4 @@ const useTreeViewLabelItemPlugin = ({
     }
   };
 };
-exports.useTreeViewLabelItemPlugin = useTreeViewLabelItemPlugin;
+exports.useLabelEditingItemPlugin = useLabelEditingItemPlugin;

package/internals/plugins/labelEditing/selectors.d.ts

@@ -0,0 +1,15 @@
+import { RichTreeViewState } from "../../RichTreeViewStore/index.js";
+export declare const labelSelectors: {
+  /**
+   * Checks whether an item is editable.
+   */
+  isItemEditable: (args_0: RichTreeViewState<any, any>, _itemId: string) => boolean;
+  /**
+   * Checks whether an item is being edited.
+   */
+  isItemBeingEdited: (state: RichTreeViewState<any, any>, itemId: string | null) => boolean;
+  /**
+   * Checks whether any item is being edited.
+   */
+  isAnyItemBeingEdited: (state: RichTreeViewState<any, any>) => boolean;
+};

package/internals/plugins/{useTreeViewLabel/useTreeViewLabel.selectors.js → labelEditing/selectors.js}

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.labelSelectors = void 0;
 var _store = require("@mui/x-internals/store");
-var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
+var _selectors = require("../items/selectors");
 const labelSelectors = exports.labelSelectors = {
   /**
    * Checks whether an item is editable.
    */
-  isItemEditable: (0, _store.createSelector)(state => state.label?.isItemEditable, _useTreeViewItems.itemsSelectors.itemModel, (isItemEditable, itemModel, _itemId) => {
+  isItemEditable: (0, _store.createSelector)(state => state.isItemEditable, _selectors.itemsSelectors.itemModel, (isItemEditable, itemModel, _itemId) => {
     if (!itemModel || isItemEditable == null) {
       return false;
     }
@@ -22,9 +22,9 @@ const labelSelectors = exports.labelSelectors = {
   /**
    * Checks whether an item is being edited.
    */
-  isItemBeingEdited: (0, _store.createSelector)((state, itemId) => itemId == null ? false : state.label?.editedItemId === itemId),
+  isItemBeingEdited: (0, _store.createSelector)((state, itemId) => itemId == null ? false : state.editedItemId === itemId),
   /**
    * Checks whether any item is being edited.
    */
-  isAnyItemBeingEdited: (0, _store.createSelector)(state => !!state.label?.editedItemId)
+  isAnyItemBeingEdited: (0, _store.createSelector)(state => !!state.editedItemId)
 };

package/internals/plugins/lazyLoading/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./types.js";
+export * from "./selectors.js";

package/internals/plugins/lazyLoading/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+var _selectors = require("./selectors");
+Object.keys(_selectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectors[key];
+    }
+  });
+});

package/internals/plugins/lazyLoading/selectors.d.ts

@@ -0,0 +1,19 @@
+import { RichTreeViewState } from "../../RichTreeViewStore/index.js";
+export declare const lazyLoadingSelectors: {
+  /**
+   * Checks if the lazy loaded state is empty.
+   */
+  isEmpty: (state: RichTreeViewState<any, any>) => boolean;
+  /**
+   * Checks whether an item is loading.
+   */
+  isItemLoading: (state: RichTreeViewState<any, any>, itemId: string | null) => boolean;
+  /**
+   * Checks whether an item has errors.
+   */
+  itemHasError: (state: RichTreeViewState<any, any>, itemId: string | null) => boolean;
+  /**
+   * Get an item error.
+   */
+  itemError: (state: RichTreeViewState<any, any>, itemId: string | null) => Error | null | undefined;
+};

package/internals/plugins/{useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js → lazyLoading/selectors.js}

@@ -5,22 +5,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.lazyLoadingSelectors = void 0;
 var _store = require("@mui/x-internals/store");
-var _useTreeViewItems = require("../useTreeViewItems");
+var _items = require("../items");
 const lazyLoadingSelectors = exports.lazyLoadingSelectors = {
   /**
-   * Gets the data source used to lazy load items.
+   * Checks if the lazy loaded state is empty.
    */
-  dataSource: (0, _store.createSelector)(state => state.lazyLoading?.dataSource),
+  isEmpty: (0, _store.createSelector)(state => {
+    if (state.lazyLoadedItems == null) {
+      return true;
+    }
+    return Object.keys(state.lazyLoadedItems.loading).length === 0 && Object.keys(state.lazyLoadedItems.errors).length === 0;
+  }),
   /**
    * Checks whether an item is loading.
    */
-  isItemLoading: (0, _store.createSelector)((state, itemId) => state.lazyLoading?.dataSource.loading[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? false),
+  isItemLoading: (0, _store.createSelector)((state, itemId) => state.lazyLoadedItems?.loading[itemId ?? _items.TREE_VIEW_ROOT_PARENT_ID] ?? false),
   /**
    * Checks whether an item has errors.
    */
-  itemHasError: (0, _store.createSelector)((state, itemId) => !!state.lazyLoading?.dataSource.errors[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID]),
+  itemHasError: (0, _store.createSelector)((state, itemId) => !!state.lazyLoadedItems?.errors[itemId ?? _items.TREE_VIEW_ROOT_PARENT_ID]),
   /**
    * Get an item error.
    */
-  itemError: (0, _store.createSelector)((state, itemId) => state.lazyLoading?.dataSource.errors[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID])
+  itemError: (0, _store.createSelector)((state, itemId) => state.lazyLoadedItems?.errors[itemId ?? _items.TREE_VIEW_ROOT_PARENT_ID])
 };

package/internals/plugins/lazyLoading/types.d.ts

@@ -0,0 +1,5 @@
+import { TreeViewItemId } from "../../../models/index.js";
+export interface RichTreeViewLazyLoadedItemsStatus {
+  loading: Record<TreeViewItemId, boolean>;
+  errors: Record<TreeViewItemId, Error | null>;
+}