@mui/x-tree-view 8.0.0-alpha.12 → 8.0.0-alpha.14

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

@@ -1,6 +1,134 @@
 import { TreeViewItemMeta } from "../../models/index.js";
 import { TreeViewRootSelector } from "../../utils/selectors.js";
 import { UseTreeViewItemsSignature } from "./useTreeViewItems.types.js";
+/**
+ * Get the loading state for the Tree View.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} The loading state for the Tree View.
+ */
+export declare const selectorIsTreeViewLoading: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewItems.types").UseTreeViewItemsState<import("../../..").TreeViewDefaultItemModelProperties> & Partial<{}> & {
+  cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => boolean) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    disabledItemsFocusable: boolean;
+    itemModelLookup: {
+      [itemId: string]: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
+    };
+    itemMetaLookup: {
+      [itemId: string]: TreeViewItemMeta;
+    };
+    itemOrderedChildrenIdsLookup: {
+      [parentItemId: string]: string[];
+    };
+    itemChildrenIndexesLookup: {
+      [parentItemId: string]: {
+        [itemId: string]: number;
+      };
+    };
+    loading: boolean;
+    error: Error | null;
+  }) => boolean;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    disabledItemsFocusable: boolean;
+    itemModelLookup: {
+      [itemId: string]: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
+    };
+    itemMetaLookup: {
+      [itemId: string]: TreeViewItemMeta;
+    };
+    itemOrderedChildrenIdsLookup: {
+      [parentItemId: string]: string[];
+    };
+    itemChildrenIndexesLookup: {
+      [parentItemId: string]: {
+        [itemId: string]: number;
+      };
+    };
+    loading: boolean;
+    error: Error | null;
+  }) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => boolean;
+  dependencies: [TreeViewRootSelector<UseTreeViewItemsSignature>];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Get the error state for the Tree View.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} The error state for the Tree View.
+ */
+export declare const selectorGetTreeViewError: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewItems.types").UseTreeViewItemsState<import("../../..").TreeViewDefaultItemModelProperties> & Partial<{}> & {
+  cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => Error | null) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    disabledItemsFocusable: boolean;
+    itemModelLookup: {
+      [itemId: string]: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
+    };
+    itemMetaLookup: {
+      [itemId: string]: TreeViewItemMeta;
+    };
+    itemOrderedChildrenIdsLookup: {
+      [parentItemId: string]: string[];
+    };
+    itemChildrenIndexesLookup: {
+      [parentItemId: string]: {
+        [itemId: string]: number;
+      };
+    };
+    loading: boolean;
+    error: Error | null;
+  }) => Error | null;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    disabledItemsFocusable: boolean;
+    itemModelLookup: {
+      [itemId: string]: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
+    };
+    itemMetaLookup: {
+      [itemId: string]: TreeViewItemMeta;
+    };
+    itemOrderedChildrenIdsLookup: {
+      [parentItemId: string]: string[];
+    };
+    itemChildrenIndexesLookup: {
+      [parentItemId: string]: {
+        [itemId: string]: number;
+      };
+    };
+    loading: boolean;
+    error: Error | null;
+  }) => Error | null) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => Error | null;
+  dependencies: [TreeViewRootSelector<UseTreeViewItemsSignature>];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
 /**
  * Get the meta-information of all items.
  * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
@@ -31,6 +159,8 @@ export declare const selectorItemMetaLookup: ((state: import("../../corePlugins/
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }) => {
     [itemId: string]: TreeViewItemMeta;
   };
@@ -50,6 +180,8 @@ export declare const selectorItemMetaLookup: ((state: import("../../corePlugins/
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }) => {
     [itemId: string]: TreeViewItemMeta;
   }) & {
@@ -96,6 +228,8 @@ export declare const selectorItemOrderedChildrenIds: ((state: any, itemId: strin
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: string | null) => string[];
   memoizedResultFunc: ((resultFuncArgs_0: {
     disabledItemsFocusable: boolean;
@@ -113,6 +247,8 @@ export declare const selectorItemOrderedChildrenIds: ((state: any, itemId: strin
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: string | null) => string[]) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -155,6 +291,8 @@ export declare const selectorItemModel: ((state: any, itemId: string) => import(
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: string) => import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
   memoizedResultFunc: ((resultFuncArgs_0: {
     disabledItemsFocusable: boolean;
@@ -172,6 +310,8 @@ export declare const selectorItemModel: ((state: any, itemId: string) => import(
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: string) => import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -235,6 +375,8 @@ export declare const selectorItemMeta: ((state: any, itemId: string | null) => T
           [itemId: string]: number;
         };
       };
+      loading: boolean;
+      error: Error | null;
     }) => {
       [itemId: string]: TreeViewItemMeta;
     };
@@ -254,6 +396,8 @@ export declare const selectorItemMeta: ((state: any, itemId: string | null) => T
           [itemId: string]: number;
         };
       };
+      loading: boolean;
+      error: Error | null;
     }) => {
       [itemId: string]: TreeViewItemMeta;
     }) & {
@@ -328,6 +472,8 @@ export declare const selectorIsItemDisabled: ((state: any, itemId: string) => bo
           [itemId: string]: number;
         };
       };
+      loading: boolean;
+      error: Error | null;
     }) => {
       [itemId: string]: TreeViewItemMeta;
     };
@@ -347,6 +493,8 @@ export declare const selectorIsItemDisabled: ((state: any, itemId: string) => bo
           [itemId: string]: number;
         };
       };
+      loading: boolean;
+      error: Error | null;
     }) => {
       [itemId: string]: TreeViewItemMeta;
     }) & {
@@ -401,6 +549,8 @@ export declare const selectorItemIndex: ((state: any, itemId: string | null) =>
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: TreeViewItemMeta | null) => number;
   memoizedResultFunc: ((resultFuncArgs_0: {
     disabledItemsFocusable: boolean;
@@ -418,6 +568,8 @@ export declare const selectorItemIndex: ((state: any, itemId: string | null) =>
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: TreeViewItemMeta | null) => number) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -465,6 +617,8 @@ export declare const selectorItemIndex: ((state: any, itemId: string | null) =>
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       };
@@ -484,6 +638,8 @@ export declare const selectorItemIndex: ((state: any, itemId: string | null) =>
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       }) & {
@@ -578,6 +734,8 @@ export declare const selectorItemParentId: ((state: any, itemId: string | null)
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       };
@@ -597,6 +755,8 @@ export declare const selectorItemParentId: ((state: any, itemId: string | null)
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       }) & {
@@ -691,6 +851,8 @@ export declare const selectorItemDepth: ((state: any, itemId: string | null) =>
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       };
@@ -710,6 +872,8 @@ export declare const selectorItemDepth: ((state: any, itemId: string | null) =>
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       }) & {
@@ -766,6 +930,8 @@ export declare const selectorCanItemBeFocused: ((state: any, itemId: string) =>
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: boolean) => boolean;
   memoizedResultFunc: ((resultFuncArgs_0: {
     disabledItemsFocusable: boolean;
@@ -783,6 +949,8 @@ export declare const selectorCanItemBeFocused: ((state: any, itemId: string) =>
         [itemId: string]: number;
       };
     };
+    loading: boolean;
+    error: Error | null;
   }, resultFuncArgs_1: boolean) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -830,6 +998,8 @@ export declare const selectorCanItemBeFocused: ((state: any, itemId: string) =>
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       };
@@ -849,6 +1019,8 @@ export declare const selectorCanItemBeFocused: ((state: any, itemId: string) =>
             [itemId: string]: number;
           };
         };
+        loading: boolean;
+        error: Error | null;
       }) => {
         [itemId: string]: TreeViewItemMeta;
       }) & {

package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js

@@ -3,11 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorItemParentId = exports.selectorItemOrderedChildrenIds = exports.selectorItemModel = exports.selectorItemMetaLookup = exports.selectorItemMeta = exports.selectorItemIndex = exports.selectorItemDepth = exports.selectorIsItemDisabled = exports.selectorCanItemBeFocused = void 0;
+exports.selectorItemParentId = exports.selectorItemOrderedChildrenIds = exports.selectorItemModel = exports.selectorItemMetaLookup = exports.selectorItemMeta = exports.selectorItemIndex = exports.selectorItemDepth = exports.selectorIsTreeViewLoading = exports.selectorIsItemDisabled = exports.selectorGetTreeViewError = exports.selectorCanItemBeFocused = void 0;
 var _selectors = require("../../utils/selectors");
 var _useTreeViewItems = require("./useTreeViewItems.utils");
 const selectorTreeViewItemsState = state => state.items;
 
+/**
+ * Get the loading state for the Tree View.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} The loading state for the Tree View.
+ */
+const selectorIsTreeViewLoading = exports.selectorIsTreeViewLoading = (0, _selectors.createSelector)(selectorTreeViewItemsState, items => items.loading);
+/**
+ * Get the error state for the Tree View.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} The error state for the Tree View.
+ */
+const selectorGetTreeViewError = exports.selectorGetTreeViewError = (0, _selectors.createSelector)(selectorTreeViewItemsState, items => items.error);
+
 /**
  * Get the meta-information of all items.
  * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.

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

@@ -2,6 +2,12 @@ import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { TreeViewItemMeta, TreeViewPluginSignature } from "../../models/index.js";
 import { TreeViewBaseItem, TreeViewDefaultItemModelProperties, TreeViewItemId } from "../../../models/index.js";
+export type AddItemsParameters<R> = {
+  items: readonly R[];
+  parentId?: TreeViewItemId;
+  depth: number;
+  getChildrenCount?: (item: R) => number;
+};
 export interface UseTreeViewItemsPublicAPI<R extends {}> {
   /**
    * Get the item with the given id.
@@ -29,6 +35,21 @@ export interface UseTreeViewItemsPublicAPI<R extends {}> {
    * @returns {TreeViewBaseItem[]} The items in the tree.
    */
   getItemTree: () => TreeViewBaseItem[];
+  /**
+   * Toggle the disabled state of the item with the given id.
+   * @param {object} parameters The params of the method.
+   * @param {TreeViewItemId } parameters.itemId The id of the item to get the children of.
+   * @param {boolean } parameters.shouldBeDisabled true if the item should be disabled.
+   */
+  setIsItemDisabled: (parameters: {
+    itemId: TreeViewItemId;
+    shouldBeDisabled?: boolean;
+  }) => void;
+  /** * Get the id of the parent item.
+   * @param {string} itemId The id of the item to whose parentId we want to retrieve.
+   * @returns {TreeViewItemId | null} The id of the parent item.
+   */
+  getParentId: (itemId: TreeViewItemId) => TreeViewItemId | null;
 }
 export interface UseTreeViewItemsInstance<R extends {}> extends Pick<UseTreeViewItemsPublicAPI<R>, 'getItemDOMElement'> {
   /**
@@ -42,6 +63,26 @@ export interface UseTreeViewItemsInstance<R extends {}> extends Pick<UseTreeView
    * @returns {boolean} `true` if the updates to the state based on the `items` prop are prevented.
    */
   areItemUpdatesPrevented: () => boolean;
+  /**
+   * Add an array of items to the tree.
+   * @param {AddItemsParameters<R>} args The items to add to the tree and information about their ancestors.
+   */
+  addItems: (args: AddItemsParameters<R>) => void;
+  /**
+   * Remove the children of an item.
+   * @param {TreeViewItemId} parentId The id of the item to remove the children of.
+   */
+  removeChildren: (parentId?: TreeViewItemId) => void;
+  /**
+   * Set the loading state of the tree.
+   * @param {boolean} loading True if the tree view is loading.
+   */
+  setTreeViewLoading: (loading: boolean) => void;
+  /**
+   * Set the error state of the tree.
+   * @param {Error | null} error The error on the tree view.
+   */
+  setTreeViewError: (error: Error | null) => void;
 }
 export interface UseTreeViewItemsParameters<R extends {
   children?: R[];
@@ -137,6 +178,14 @@ export interface UseTreeViewItemsState<R extends {}> {
         [itemId: string]: number;
       };
     };
+    /**
+     * The loading state of the tree.
+     */
+    loading: boolean;
+    /**
+     * The error state of the tree.
+     */
+    error: Error | null;
   };
 }
 interface UseTreeViewItemsContextValue {

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -124,7 +124,7 @@ const useTreeViewJSXItemsItemPlugin = ({
     unregisterChild,
     parentId
   } = parentContext;
-  const expandable = (0, _useTreeItemUtils.isItemExpandable)(children);
+  const expandable = (0, _useTreeItemUtils.itemHasChildren)(children);
   const pluginContentRef = React.useRef(null);
   const handleContentRef = (0, _useForkRef.default)(pluginContentRef, contentRef);
   const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId2.selectorTreeViewId);

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -72,7 +72,7 @@ const useTreeViewKeyboardNavigation = ({
   };
 
   // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
-  const handleItemKeyDown = (event, itemId) => {
+  const handleItemKeyDown = async (event, itemId) => {
     if (event.defaultMuiPrevented) {
       return;
     }
@@ -91,7 +91,7 @@ const useTreeViewKeyboardNavigation = ({
           if (params.multiSelect && event.shiftKey) {
             instance.expandSelectionRange(event, itemId);
           } else {
-            instance.selectItem({
+            instance.setItemSelection({
               event,
               itemId,
               keepExistingSelection: params.multiSelect,
@@ -111,18 +111,21 @@ const useTreeViewKeyboardNavigation = ({
           }) && !(0, _useTreeViewLabel2.selectorIsItemBeingEdited)(store.value, itemId)) {
             instance.setEditedItemId(itemId);
           } else if (canToggleItemExpansion(itemId)) {
-            instance.toggleItemExpansion(event, itemId);
+            instance.setItemExpansion({
+              event,
+              itemId
+            });
             event.preventDefault();
           } else if (canToggleItemSelection(itemId)) {
             if (params.multiSelect) {
               event.preventDefault();
-              instance.selectItem({
+              instance.setItemSelection({
                 event,
                 itemId,
                 keepExistingSelection: true
               });
             } else if (!(0, _useTreeViewSelection.selectorIsItemSelected)(store.value, itemId)) {
-              instance.selectItem({
+              instance.setItemSelection({
                 event,
                 itemId
               });
@@ -180,7 +183,10 @@ const useTreeViewKeyboardNavigation = ({
               event.preventDefault();
             }
           } else if (canToggleItemExpansion(itemId)) {
-            instance.toggleItemExpansion(event, itemId);
+            instance.setItemExpansion({
+              event,
+              itemId
+            });
             event.preventDefault();
           }
           break;
@@ -194,7 +200,10 @@ const useTreeViewKeyboardNavigation = ({
             return;
           }
           if (canToggleItemExpansion(itemId) && (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId)) {
-            instance.toggleItemExpansion(event, itemId);
+            instance.setItemExpansion({
+              event,
+              itemId
+            });
             event.preventDefault();
           } else {
             const parent = (0, _useTreeViewItems.selectorItemParentId)(store.value, itemId);

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

@@ -6,6 +6,7 @@ import { UseTreeViewFocusSignature } from "../useTreeViewFocus/index.js";
 import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
 import { TreeViewItemId, TreeViewCancellableEvent } from "../../../models/index.js";
 import { UseTreeViewLabelSignature } from "../useTreeViewLabel/index.js";
+import { UseTreeViewLazyLoadingSignature } from "../useTreeViewLazyLoading/index.js";
 export interface UseTreeViewKeyboardNavigationInstance {
   /**
    * Updates the `firstCharMap` to add/remove the first character of some item's labels.
@@ -25,7 +26,7 @@ export interface UseTreeViewKeyboardNavigationInstance {
 export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
   instance: UseTreeViewKeyboardNavigationInstance;
   dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature, UseTreeViewFocusSignature, UseTreeViewExpansionSignature];
-  optionalDependencies: [UseTreeViewLabelSignature];
+  optionalDependencies: [UseTreeViewLabelSignature, UseTreeViewLazyLoadingSignature];
 }>;
 export type TreeViewFirstCharMap = {
   [itemId: string]: string;

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

@@ -0,0 +1 @@
+export type { UseTreeViewLazyLoadingSignature, UseTreeViewLazyLoadingParameters } from './useTreeViewLazyLoading.types';

package/internals/plugins/useTreeViewLazyLoading/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});