@mui/x-tree-view 8.0.0-beta.3 → 8.1.0

package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -1,23 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { selectorIsItemExpandable, selectorIsItemExpanded } from "./useTreeViewExpansion.selectors.js";
-import { createExpandedItemsMap, getExpansionTrigger } from "./useTreeViewExpansion.utils.js";
+import { selectorExpandedItems, selectorIsItemExpandable, selectorIsItemExpanded } from "./useTreeViewExpansion.selectors.js";
+import { getExpansionTrigger } from "./useTreeViewExpansion.utils.js";
 import { selectorItemMeta, selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 import { publishTreeViewEvent } from "../../utils/publishTreeViewEvent.js";
+import { useAssertModelConsistency } from "../../utils/models.js";
 export const useTreeViewExpansion = ({
   instance,
   store,
-  params,
-  models
+  params
 }) => {
-  useEnhancedEffect(() => {
-    store.update(prevState => _extends({}, prevState, {
-      expansion: _extends({}, prevState.expansion, {
-        expandedItemsMap: createExpandedItemsMap(models.expandedItems.value)
-      })
-    }));
-  }, [store, models.expandedItems.value]);
+  useAssertModelConsistency({
+    state: 'expandedItems',
+    controlled: params.expandedItems,
+    defaultValue: params.defaultExpandedItems
+  });
   useEnhancedEffect(() => {
     store.update(prevState => {
       const newExpansionTrigger = getExpansionTrigger({
@@ -35,19 +33,26 @@ export const useTreeViewExpansion = ({
     });
   }, [store, params.isItemEditable, params.expansionTrigger]);
   const setExpandedItems = (event, value) => {
+    if (params.expandedItems === undefined) {
+      store.update(prevState => _extends({}, prevState, {
+        expansion: _extends({}, prevState.expansion, {
+          expandedItems: value
+        })
+      }));
+    }
     params.onExpandedItemsChange?.(event, value);
-    models.expandedItems.setControlledValue(value);
   };
   const applyItemExpansion = useEventCallback(({
     itemId,
     event,
     shouldBeExpanded
   }) => {
+    const oldExpanded = selectorExpandedItems(store.value);
     let newExpanded;
     if (shouldBeExpanded) {
-      newExpanded = [itemId].concat(models.expandedItems.value);
+      newExpanded = [itemId].concat(oldExpanded);
     } else {
-      newExpanded = models.expandedItems.value.filter(id => id !== itemId);
+      newExpanded = oldExpanded.filter(id => id !== itemId);
     }
     if (params.onItemExpansionToggle) {
       params.onItemExpansionToggle(event, itemId, shouldBeExpanded);
@@ -87,7 +92,7 @@ export const useTreeViewExpansion = ({
     }
     const siblings = selectorItemOrderedChildrenIds(store.value, itemMeta.parentId);
     const diff = siblings.filter(child => selectorIsItemExpandable(store.value, child) && !selectorIsItemExpanded(store.value, child));
-    const newExpanded = models.expandedItems.value.concat(diff);
+    const newExpanded = selectorExpandedItems(store.value).concat(diff);
     if (diff.length > 0) {
       if (params.onItemExpansionToggle) {
         diff.forEach(newlyExpandedItemId => {
@@ -97,6 +102,20 @@ export const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
+
+  /**
+   * Update the controlled model when the `expandedItems` prop changes.
+   */
+  useEnhancedEffect(() => {
+    const expandedItems = params.expandedItems;
+    if (expandedItems !== undefined) {
+      store.update(prevState => _extends({}, prevState, {
+        expansion: _extends({}, prevState.expansion, {
+          expandedItems
+        })
+      }));
+    }
+  }, [store, params.expandedItems]);
   return {
     publicAPI: {
       setItemExpansion
@@ -108,11 +127,6 @@ export const useTreeViewExpansion = ({
     }
   };
 };
-useTreeViewExpansion.models = {
-  expandedItems: {
-    getDefaultValue: params => params.defaultExpandedItems
-  }
-};
 const DEFAULT_EXPANDED_ITEMS = [];
 useTreeViewExpansion.getDefaultizedParams = ({
   params
@@ -121,7 +135,7 @@ useTreeViewExpansion.getDefaultizedParams = ({
 });
 useTreeViewExpansion.getInitialState = params => ({
   expansion: {
-    expandedItemsMap: createExpandedItemsMap(params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems),
+    expandedItems: params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems,
     expansionTrigger: getExpansionTrigger(params)
   }
 });

package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts

@@ -1,29 +1,163 @@
 import { TreeViewRootSelector } from "../../utils/selectors.js";
 import { UseTreeViewExpansionSignature } from "./useTreeViewExpansion.types.js";
 /**
- * Check if an item is expanded.
+ * Get the expanded items.
  * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
- * @returns {boolean} `true` if the item is expanded, `false` otherwise.
+ * @returns {TreeViewItemId[]} The expanded items.
  */
-export declare const selectorIsItemExpanded: ((state: any, itemId: string) => boolean) & {
+export declare const selectorExpandedItems: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewExpansion.types").UseTreeViewExpansionState & Partial<{}> & {
+  cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => string[]) & {
   clearCache: () => void;
   resultsCount: () => number;
   resetResultsCount: () => void;
 } & {
   resultFunc: (resultFuncArgs_0: {
-    expandedItemsMap: Map<string, true>;
+    expandedItems: string[];
     expansionTrigger: "content" | "iconContainer";
-  }, resultFuncArgs_1: string) => boolean;
+  }) => string[];
   memoizedResultFunc: ((resultFuncArgs_0: {
-    expandedItemsMap: Map<string, true>;
+    expandedItems: string[];
     expansionTrigger: "content" | "iconContainer";
-  }, resultFuncArgs_1: string) => boolean) & {
+  }) => string[]) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => string[];
+  dependencies: [TreeViewRootSelector<UseTreeViewExpansionSignature>];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Get the expanded items as a Map.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {TreeViewExpansionValue} The expanded items as a Map.
+ */
+export declare const selectorExpandedItemsMap: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewExpansion.types").UseTreeViewExpansionState & Partial<{}> & {
+  cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => Map<string, true>) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: string[]) => Map<string, true>;
+  memoizedResultFunc: ((resultFuncArgs_0: string[]) => Map<string, true>) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => Map<string, true>;
+  dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewExpansion.types").UseTreeViewExpansionState & Partial<{}> & {
+    cacheKey: import("../../models").TreeViewStateCacheKey;
+  }) => string[]) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  } & {
+    resultFunc: (resultFuncArgs_0: {
+      expandedItems: string[];
+      expansionTrigger: "content" | "iconContainer";
+    }) => string[];
+    memoizedResultFunc: ((resultFuncArgs_0: {
+      expandedItems: string[];
+      expansionTrigger: "content" | "iconContainer";
+    }) => string[]) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    };
+    lastResult: () => string[];
+    dependencies: [TreeViewRootSelector<UseTreeViewExpansionSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+  } & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+  }];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if an item is expanded.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is expanded, `false` otherwise.
+ */
+export declare const selectorIsItemExpanded: ((state: any, itemId: string) => boolean) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: Map<string, true>, resultFuncArgs_1: string) => boolean;
+  memoizedResultFunc: ((resultFuncArgs_0: Map<string, true>, resultFuncArgs_1: string) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
   lastResult: () => boolean;
-  dependencies: [TreeViewRootSelector<UseTreeViewExpansionSignature>, (_: any, itemId: string) => string];
+  dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewExpansion.types").UseTreeViewExpansionState & Partial<{}> & {
+    cacheKey: import("../../models").TreeViewStateCacheKey;
+  }) => Map<string, true>) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  } & {
+    resultFunc: (resultFuncArgs_0: string[]) => Map<string, true>;
+    memoizedResultFunc: ((resultFuncArgs_0: string[]) => Map<string, true>) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    };
+    lastResult: () => Map<string, true>;
+    dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewExpansion.types").UseTreeViewExpansionState & Partial<{}> & {
+      cacheKey: import("../../models").TreeViewStateCacheKey;
+    }) => string[]) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    } & {
+      resultFunc: (resultFuncArgs_0: {
+        expandedItems: string[];
+        expansionTrigger: "content" | "iconContainer";
+      }) => string[];
+      memoizedResultFunc: ((resultFuncArgs_0: {
+        expandedItems: string[];
+        expansionTrigger: "content" | "iconContainer";
+      }) => string[]) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+      };
+      lastResult: () => string[];
+      dependencies: [TreeViewRootSelector<UseTreeViewExpansionSignature>];
+      recomputations: () => number;
+      resetRecomputations: () => void;
+      dependencyRecomputations: () => number;
+      resetDependencyRecomputations: () => void;
+    } & {
+      argsMemoize: typeof import("reselect").weakMapMemoize;
+      memoize: typeof import("reselect").weakMapMemoize;
+    }];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+  } & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+  }, (_: any, itemId: string) => string];
   recomputations: () => number;
   resetRecomputations: () => void;
   dependencyRecomputations: () => number;
@@ -161,11 +295,11 @@ export declare const selectorItemExpansionTrigger: ((state: import("../../corePl
   resetResultsCount: () => void;
 } & {
   resultFunc: (resultFuncArgs_0: {
-    expandedItemsMap: Map<string, true>;
+    expandedItems: string[];
     expansionTrigger: "content" | "iconContainer";
   }) => "content" | "iconContainer";
   memoizedResultFunc: ((resultFuncArgs_0: {
-    expandedItemsMap: Map<string, true>;
+    expandedItems: string[];
     expansionTrigger: "content" | "iconContainer";
   }) => "content" | "iconContainer") & {
     clearCache: () => void;

package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js

@@ -2,12 +2,32 @@ import { createSelector } from "../../utils/selectors.js";
 import { selectorItemMeta } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 const selectorExpansion = state => state.expansion;
 
+/**
+ * Get the expanded items.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemId[]} The expanded items.
+ */
+export const selectorExpandedItems = createSelector([selectorExpansion], expansionState => expansionState.expandedItems);
+
+/**
+ * Get the expanded items as a Map.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {TreeViewExpansionValue} The expanded items as a Map.
+ */
+export const selectorExpandedItemsMap = createSelector([selectorExpandedItems], expandedItems => {
+  const expandedItemsMap = new Map();
+  expandedItems.forEach(id => {
+    expandedItemsMap.set(id, true);
+  });
+  return expandedItemsMap;
+});
+
 /**
  * Check if an item is expanded.
  * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
  * @returns {boolean} `true` if the item is expanded, `false` otherwise.
  */
-export const selectorIsItemExpanded = createSelector([selectorExpansion, (_, itemId) => itemId], (expansionState, itemId) => expansionState.expandedItemsMap.has(itemId));
+export const selectorIsItemExpanded = createSelector([selectorExpandedItemsMap, (_, itemId) => itemId], (expandedItemsMap, itemId) => expandedItemsMap.has(itemId));
 
 /**
  * Check if an item is expandable.

package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts

@@ -74,7 +74,7 @@ export interface UseTreeViewExpansionParameters {
 export type UseTreeViewExpansionDefaultizedParameters = DefaultizedProps<UseTreeViewExpansionParameters, 'defaultExpandedItems'>;
 export interface UseTreeViewExpansionState {
   expansion: {
-    expandedItemsMap: Map<string, true>;
+    expandedItems: string[];
     expansionTrigger: 'content' | 'iconContainer';
   };
 }

package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.d.ts

@@ -1,6 +1,5 @@
 import { TreeViewUsedDefaultizedParams } from "../../models/index.js";
 import { UseTreeViewExpansionSignature } from "./useTreeViewExpansion.types.js";
-export declare const createExpandedItemsMap: (expandedItems: string[]) => Map<string, true>;
 export declare const getExpansionTrigger: ({
   isItemEditable,
   expansionTrigger

package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.js

@@ -1,10 +1,3 @@
-export const createExpandedItemsMap = expandedItems => {
-  const expandedItemsMap = new Map();
-  expandedItems.forEach(id => {
-    expandedItemsMap.set(id, true);
-  });
-  return expandedItemsMap;
-};
 export const getExpansionTrigger = ({
   isItemEditable,
   expansionTrigger

package/esm/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -1,40 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useInstanceEventHandler } from "../../hooks/useInstanceEventHandler.js";
-import { getFirstNavigableItem } from "../../utils/tree.js";
-import { convertSelectedItemsToArray } from "../useTreeViewSelection/useTreeViewSelection.utils.js";
 import { selectorDefaultFocusableItemId, selectorFocusedItemId } from "./useTreeViewFocus.selectors.js";
 import { selectorIsItemExpanded } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
-import { selectorCanItemBeFocused, selectorItemMeta } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+import { selectorItemMeta } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 export const useTreeViewFocus = ({
   instance,
   params,
-  store,
-  models
+  store
 }) => {
-  React.useEffect(() => {
-    let defaultFocusableItemId = convertSelectedItemsToArray(models.selectedItems.value).find(itemId => {
-      if (!selectorCanItemBeFocused(store.value, itemId)) {
-        return false;
-      }
-      const itemMeta = selectorItemMeta(store.value, itemId);
-      return itemMeta && (itemMeta.parentId == null || selectorIsItemExpanded(store.value, itemMeta.parentId));
-    });
-    if (defaultFocusableItemId == null) {
-      defaultFocusableItemId = getFirstNavigableItem(store.value) ?? null;
-    }
-    store.update(prevState => {
-      if (defaultFocusableItemId === prevState.focus.defaultFocusableItemId) {
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        focus: _extends({}, prevState.focus, {
-          defaultFocusableItemId
-        })
-      });
-    });
-  }, [store, models.selectedItems.value]);
   const setFocusedItemId = useEventCallback(itemId => {
     store.update(prevState => {
       const focusedItemId = selectorFocusedItemId(prevState);
@@ -126,8 +100,7 @@ export const useTreeViewFocus = ({
 };
 useTreeViewFocus.getInitialState = () => ({
   focus: {
-    focusedItemId: null,
-    defaultFocusableItemId: null
+    focusedItemId: null
   }
 });
 useTreeViewFocus.params = {