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

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

@@ -909,7 +909,14 @@ export declare const selectorItemDepth: ((state: any, itemId: string | null) =>
   argsMemoize: typeof import("reselect").weakMapMemoize;
   memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorCanItemBeFocused: ((state: any, itemId: string) => boolean) & {
+/**
+ * Check if the disabled items are focusable.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} Whether the disabled items are focusable.
+ */
+export declare const selectorDisabledItemFocusable: ((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;
@@ -932,7 +939,7 @@ export declare const selectorCanItemBeFocused: ((state: any, itemId: string) =>
     };
     loading: boolean;
     error: Error | null;
-  }, resultFuncArgs_1: boolean) => boolean;
+  }) => boolean;
   memoizedResultFunc: ((resultFuncArgs_0: {
     disabledItemsFocusable: boolean;
     itemModelLookup: {
@@ -951,13 +958,92 @@ export declare const selectorCanItemBeFocused: ((state: any, itemId: string) =>
     };
     loading: boolean;
     error: Error | null;
-  }, resultFuncArgs_1: boolean) => boolean) & {
+  }) => 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;
+};
+export declare const selectorCanItemBeFocused: ((state: any, itemId: string) => boolean) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: boolean, resultFuncArgs_1: boolean) => boolean;
+  memoizedResultFunc: ((resultFuncArgs_0: boolean, resultFuncArgs_1: boolean) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
   lastResult: () => boolean;
-  dependencies: [TreeViewRootSelector<UseTreeViewItemsSignature>, ((state: any, itemId: string) => boolean) & {
+  dependencies: [((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;
+  }, ((state: any, itemId: string) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorItemParentId = exports.selectorItemOrderedChildrenIds = exports.selectorItemModel = exports.selectorItemMetaLookup = exports.selectorItemMeta = exports.selectorItemIndex = exports.selectorItemDepth = exports.selectorIsTreeViewLoading = exports.selectorIsItemDisabled = exports.selectorGetTreeViewError = 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.selectorDisabledItemFocusable = exports.selectorCanItemBeFocused = void 0;
 var _selectors = require("../../utils/selectors");
 var _useTreeViewItems = require("./useTreeViewItems.utils");
 const selectorTreeViewItemsState = state => state.items;
@@ -60,27 +60,7 @@ const selectorItemMeta = exports.selectorItemMeta = (0, _selectors.createSelecto
  * @param {TreeViewItemId} itemId The id of the item to check.
  * @returns {boolean} `true` if the item is disabled, `false` otherwise.
  */
-const selectorIsItemDisabled = exports.selectorIsItemDisabled = (0, _selectors.createSelector)([selectorItemMetaLookup, (_, itemId) => itemId], (itemMetaLookup, itemId) => {
-  if (itemId == null) {
-    return false;
-  }
-  let itemMeta = itemMetaLookup[itemId];
-
-  // This can be called before the item has been added to the item map.
-  if (!itemMeta) {
-    return false;
-  }
-  if (itemMeta.disabled) {
-    return true;
-  }
-  while (itemMeta.parentId != null) {
-    itemMeta = itemMetaLookup[itemMeta.parentId];
-    if (itemMeta.disabled) {
-      return true;
-    }
-  }
-  return false;
-});
+const selectorIsItemDisabled = exports.selectorIsItemDisabled = (0, _selectors.createSelector)([selectorItemMetaLookup, (_, itemId) => itemId], _useTreeViewItems.isItemDisabled);
 
 /**
  * Get the index of an item in its parent's children.
@@ -111,9 +91,16 @@ const selectorItemParentId = exports.selectorItemParentId = (0, _selectors.creat
  * @returns {number} The depth of the item.
  */
 const selectorItemDepth = exports.selectorItemDepth = (0, _selectors.createSelector)([selectorItemMeta], itemMeta => itemMeta?.depth ?? 0);
-const selectorCanItemBeFocused = exports.selectorCanItemBeFocused = (0, _selectors.createSelector)([selectorTreeViewItemsState, selectorIsItemDisabled], (itemsState, isItemDisabled) => {
-  if (itemsState.disabledItemsFocusable) {
+
+/**
+ * Check if the disabled items are focusable.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} Whether the disabled items are focusable.
+ */
+const selectorDisabledItemFocusable = exports.selectorDisabledItemFocusable = (0, _selectors.createSelector)([selectorTreeViewItemsState], itemsState => itemsState.disabledItemsFocusable);
+const selectorCanItemBeFocused = exports.selectorCanItemBeFocused = (0, _selectors.createSelector)([selectorDisabledItemFocusable, selectorIsItemDisabled], (disabledItemsFocusable, isDisabled) => {
+  if (disabledItemsFocusable) {
     return true;
   }
-  return !isItemDisabled;
+  return !isDisabled;
 });

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

@@ -1,4 +1,15 @@
+import { TreeViewItemId } from "../../../models/index.js";
+import { TreeViewItemMeta } from "../../models/index.js";
 export declare const TREE_VIEW_ROOT_PARENT_ID = "__TREE_VIEW_ROOT_PARENT_ID__";
 export declare const buildSiblingIndexes: (siblings: string[]) => {
   [itemId: string]: number;
-};
+};
+/**
+ * Check if an item is disabled.
+ * This method should only be used in selectors that are checking if several items are disabled.
+ * Otherwise, use the `selectorIsItemDisabled` selector.
+ * @returns
+ */
+export declare const isItemDisabled: (itemMetaLookup: {
+  [itemId: string]: TreeViewItemMeta;
+}, itemId: TreeViewItemId) => boolean;

package/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buildSiblingIndexes = exports.TREE_VIEW_ROOT_PARENT_ID = void 0;
+exports.isItemDisabled = exports.buildSiblingIndexes = exports.TREE_VIEW_ROOT_PARENT_ID = void 0;
 const TREE_VIEW_ROOT_PARENT_ID = exports.TREE_VIEW_ROOT_PARENT_ID = '__TREE_VIEW_ROOT_PARENT_ID__';
 const buildSiblingIndexes = siblings => {
   const siblingsIndexLookup = {};
@@ -12,4 +12,36 @@ const buildSiblingIndexes = siblings => {
   });
   return siblingsIndexLookup;
 };
-exports.buildSiblingIndexes = buildSiblingIndexes;
+
+/**
+ * Check if an item is disabled.
+ * This method should only be used in selectors that are checking if several items are disabled.
+ * Otherwise, use the `selectorIsItemDisabled` selector.
+ * @returns
+ */
+exports.buildSiblingIndexes = buildSiblingIndexes;
+const isItemDisabled = (itemMetaLookup, itemId) => {
+  if (itemId == null) {
+    return false;
+  }
+  let itemMeta = itemMetaLookup[itemId];
+
+  // This can be called before the item has been added to the item map.
+  if (!itemMeta) {
+    return false;
+  }
+  if (itemMeta.disabled) {
+    return true;
+  }
+  while (itemMeta.parentId != null) {
+    itemMeta = itemMetaLookup[itemMeta.parentId];
+    if (!itemMeta) {
+      return false;
+    }
+    if (itemMeta.disabled) {
+      return true;
+    }
+  }
+  return false;
+};
+exports.isItemDisabled = isItemDisabled;

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -43,10 +43,9 @@ const useTreeViewLabel = ({
     }
   };
   (0, _useEnhancedEffect.default)(() => {
-    const isItemEditable = params.isItemEditable;
     store.update(prevState => (0, _extends2.default)({}, prevState, {
       label: (0, _extends2.default)({}, prevState.label, {
-        isItemEditable: typeof isItemEditable === 'boolean' ? () => isItemEditable : isItemEditable
+        isItemEditable: params.isItemEditable
       })
     }));
   }, [store, params.isItemEditable]);
@@ -67,11 +66,9 @@ useTreeViewLabel.getDefaultizedParams = ({
 }) => (0, _extends2.default)({}, params, {
   isItemEditable: params.isItemEditable ?? false
 });
-useTreeViewLabel.getInitialState = ({
-  isItemEditable
-}) => ({
+useTreeViewLabel.getInitialState = params => ({
   label: {
-    isItemEditable: typeof isItemEditable === 'boolean' ? () => isItemEditable : isItemEditable,
+    isItemEditable: params.isItemEditable,
     editedItemId: null
   }
 });

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

@@ -12,11 +12,11 @@ export declare const selectorIsItemEditable: ((state: any, itemId: string) => bo
   resetResultsCount: () => void;
 } & {
   resultFunc: (resultFuncArgs_0: {
-    isItemEditable: (item: any) => boolean;
+    isItemEditable: ((item: any) => boolean) | boolean;
     editedItemId: string | null;
   } | undefined, resultFuncArgs_1: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>) => boolean;
   memoizedResultFunc: ((resultFuncArgs_0: {
-    isItemEditable: (item: any) => boolean;
+    isItemEditable: ((item: any) => boolean) | boolean;
     editedItemId: string | null;
   } | undefined, resultFuncArgs_1: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>) => boolean) & {
     clearCache: () => void;
@@ -34,30 +34,64 @@ export declare const selectorIsItemEditable: ((state: any, itemId: string) => bo
   memoize: typeof import("reselect").weakMapMemoize;
 };
 /**
- * Check if an item is being edited.
+ * Check if the given item is being edited.
  * @param {TreeViewState<[UseTreeViewLabelSignature]>} state The state of the tree view.
  * @param {TreeViewItemId} itemId The id of the item to check.
  * @returns {boolean} `true` if the item is being edited, `false` otherwise.
  */
-export declare const selectorIsItemBeingEdited: ((state: any, itemId: string) => boolean) & {
+export declare const selectorIsItemBeingEdited: ((state: any, itemId: string | null) => boolean) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    isItemEditable: ((item: any) => boolean) | boolean;
+    editedItemId: string | null;
+  } | undefined, resultFuncArgs_1: string | null) => boolean;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    isItemEditable: ((item: any) => boolean) | boolean;
+    editedItemId: string | null;
+  } | undefined, resultFuncArgs_1: string | null) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => boolean;
+  dependencies: [TreeViewRootSelector<UseTreeViewLabelSignature, true>, (_: any, itemId: string | null) => string | null];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if an item is being edited.
+ * @param {TreeViewState<[UseTreeViewLabelSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if an item is being edited, `false` otherwise.
+ */
+export declare const selectorIsAnyItemBeingEdited: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & Partial<import("./useTreeViewLabel.types").UseTreeViewLabelState> & {
+  cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => boolean) & {
   clearCache: () => void;
   resultsCount: () => number;
   resetResultsCount: () => void;
 } & {
   resultFunc: (resultFuncArgs_0: {
-    isItemEditable: (item: any) => boolean;
+    isItemEditable: ((item: any) => boolean) | boolean;
     editedItemId: string | null;
-  } | undefined, resultFuncArgs_1: string) => boolean;
+  } | undefined) => boolean;
   memoizedResultFunc: ((resultFuncArgs_0: {
-    isItemEditable: (item: any) => boolean;
+    isItemEditable: ((item: any) => boolean) | boolean;
     editedItemId: string | null;
-  } | undefined, resultFuncArgs_1: string) => boolean) & {
+  } | undefined) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
   lastResult: () => boolean;
-  dependencies: [TreeViewRootSelector<UseTreeViewLabelSignature, true>, (_: any, itemId: string) => string];
+  dependencies: [TreeViewRootSelector<UseTreeViewLabelSignature, true>];
   recomputations: () => number;
   resetRecomputations: () => void;
   dependencyRecomputations: () => number;

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorIsItemEditable = exports.selectorIsItemBeingEdited = void 0;
+exports.selectorIsItemEditable = exports.selectorIsItemBeingEdited = exports.selectorIsAnyItemBeingEdited = void 0;
 var _selectors = require("../../utils/selectors");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
 const selectorTreeViewLabelState = state => state.label;
@@ -18,13 +18,23 @@ const selectorIsItemEditable = exports.selectorIsItemEditable = (0, _selectors.c
   if (!itemModel || !labelState) {
     return false;
   }
+  if (typeof labelState.isItemEditable === 'boolean') {
+    return labelState.isItemEditable;
+  }
   return labelState.isItemEditable(itemModel);
 });
 
 /**
- * Check if an item is being edited.
+ * Check if the given item is being edited.
  * @param {TreeViewState<[UseTreeViewLabelSignature]>} state The state of the tree view.
  * @param {TreeViewItemId} itemId The id of the item to check.
  * @returns {boolean} `true` if the item is being edited, `false` otherwise.
  */
-const selectorIsItemBeingEdited = exports.selectorIsItemBeingEdited = (0, _selectors.createSelector)([selectorTreeViewLabelState, (_, itemId) => itemId], (labelState, itemId) => labelState?.editedItemId === itemId);
+const selectorIsItemBeingEdited = exports.selectorIsItemBeingEdited = (0, _selectors.createSelector)([selectorTreeViewLabelState, (_, itemId) => itemId], (labelState, itemId) => itemId ? labelState?.editedItemId === itemId : false);
+
+/**
+ * Check if an item is being edited.
+ * @param {TreeViewState<[UseTreeViewLabelSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if an item is being edited, `false` otherwise.
+ */
+const selectorIsAnyItemBeingEdited = exports.selectorIsAnyItemBeingEdited = (0, _selectors.createSelector)(selectorTreeViewLabelState, labelState => !!labelState?.editedItemId);

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

@@ -38,7 +38,7 @@ export interface UseTreeViewLabelParameters<R extends {}> {
 export type UseTreeViewLabelDefaultizedParameters<R extends {}> = DefaultizedProps<UseTreeViewLabelParameters<R>, 'isItemEditable'>;
 export interface UseTreeViewLabelState {
   label: {
-    isItemEditable: (item: any) => boolean;
+    isItemEditable: ((item: any) => boolean) | boolean;
     editedItemId: string | null;
   };
 }

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js

@@ -47,8 +47,8 @@ function selectorItemCheckboxStatus(state, itemId) {
   return {
     disabled: !isSelectionEnabledForItem,
     visible: isCheckboxSelectionEnabled,
-    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant,
-    checked: (0, _useTreeViewSelection.selectorSelectionPropagationRules)(state).parents ? hasSelectedDescendant : false
+    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant,
+    checked: (0, _useTreeViewSelection.selectorSelectionPropagationRules)(state).parents ? hasSelectedDescendant && !hasUnSelectedDescendant : false
   };
 }
 const useTreeViewSelectionItemPlugin = ({

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -13,14 +13,20 @@ var _tree = require("../../utils/tree");
 var _useTreeViewSelection = require("./useTreeViewSelection.utils");
 var _useTreeViewSelection2 = require("./useTreeViewSelection.selectors");
 var _useTreeViewSelection3 = require("./useTreeViewSelection.itemPlugin");
+var _models = require("../../utils/models");
 const useTreeViewSelection = ({
   store,
-  params,
-  models
+  params
 }) => {
+  (0, _models.useAssertModelConsistency)({
+    state: 'selectedItems',
+    controlled: params.selectedItems,
+    defaultValue: params.defaultSelectedItems
+  });
   const lastSelectedItem = React.useRef(null);
   const lastSelectedRange = React.useRef({});
   const setSelectedItems = (event, newModel, additionalItemsToPropagate) => {
+    const oldModel = (0, _useTreeViewSelection2.selectorSelectionModel)(store.value);
     let cleanModel;
     const isMultiSelectEnabled = (0, _useTreeViewSelection2.selectorIsMultiSelectEnabled)(store.value);
     if (isMultiSelectEnabled && (params.selectionPropagation.descendants || params.selectionPropagation.parents)) {
@@ -28,7 +34,7 @@ const useTreeViewSelection = ({
         store,
         selectionPropagation: params.selectionPropagation,
         newModel: newModel,
-        oldModel: models.selectedItems.value,
+        oldModel: oldModel,
         additionalItemsToPropagate
       });
     } else {
@@ -39,7 +45,7 @@ const useTreeViewSelection = ({
         const changes = (0, _useTreeViewSelection.getAddedAndRemovedItems)({
           store,
           newModel: cleanModel,
-          oldModel: models.selectedItems.value
+          oldModel: oldModel
         });
         if (params.onItemSelectionToggle) {
           changes.added.forEach(itemId => {
@@ -49,19 +55,23 @@ const useTreeViewSelection = ({
             params.onItemSelectionToggle(event, itemId, false);
           });
         }
-      } else if (params.onItemSelectionToggle && cleanModel !== models.selectedItems.value) {
-        if (models.selectedItems.value != null) {
-          params.onItemSelectionToggle(event, models.selectedItems.value, false);
+      } else if (params.onItemSelectionToggle && cleanModel !== oldModel) {
+        if (oldModel != null) {
+          params.onItemSelectionToggle(event, oldModel, false);
         }
         if (cleanModel != null) {
           params.onItemSelectionToggle(event, cleanModel, true);
         }
       }
     }
-    if (params.onSelectedItemsChange) {
-      params.onSelectedItemsChange(event, cleanModel);
+    if (params.selectedItems === undefined) {
+      store.update(prevState => (0, _extends2.default)({}, prevState, {
+        selection: (0, _extends2.default)({}, prevState.selection, {
+          selectedItems: cleanModel
+        })
+      }));
     }
-    models.selectedItems.setControlledValue(cleanModel);
+    params.onSelectedItemsChange?.(event, cleanModel);
   };
   const setItemSelection = ({
     itemId,
@@ -75,14 +85,14 @@ const useTreeViewSelection = ({
     let newSelected;
     const isMultiSelectEnabled = (0, _useTreeViewSelection2.selectorIsMultiSelectEnabled)(store.value);
     if (keepExistingSelection) {
-      const cleanSelectedItems = (0, _useTreeViewSelection.convertSelectedItemsToArray)(models.selectedItems.value);
+      const oldSelected = (0, _useTreeViewSelection2.selectorSelectionModelArray)(store.value);
       const isSelectedBefore = (0, _useTreeViewSelection2.selectorIsItemSelected)(store.value, itemId);
       if (isSelectedBefore && (shouldBeSelected === false || shouldBeSelected == null)) {
-        newSelected = cleanSelectedItems.filter(id => id !== itemId);
+        newSelected = oldSelected.filter(id => id !== itemId);
       } else if (!isSelectedBefore && (shouldBeSelected === true || shouldBeSelected == null)) {
-        newSelected = [itemId].concat(cleanSelectedItems);
+        newSelected = [itemId].concat(oldSelected);
       } else {
-        newSelected = cleanSelectedItems;
+        newSelected = oldSelected;
       }
     } else {
       // eslint-disable-next-line no-lonely-if
@@ -104,7 +114,7 @@ const useTreeViewSelection = ({
     if (!isMultiSelectEnabled) {
       return;
     }
-    let newSelectedItems = (0, _useTreeViewSelection.convertSelectedItemsToArray)(models.selectedItems.value).slice();
+    let newSelectedItems = (0, _useTreeViewSelection2.selectorSelectionModelArray)(store.value).slice();
 
     // If the last selection was a range selection,
     // remove the items that were part of the last range from the model
@@ -146,7 +156,7 @@ const useTreeViewSelection = ({
     if (!isMultiSelectEnabled) {
       return;
     }
-    let newSelectedItems = (0, _useTreeViewSelection.convertSelectedItemsToArray)(models.selectedItems.value).slice();
+    let newSelectedItems = (0, _useTreeViewSelection2.selectorSelectionModelArray)(store.value).slice();
     if (Object.keys(lastSelectedRange.current).length === 0) {
       newSelectedItems.push(nextItem);
       lastSelectedRange.current = {
@@ -170,9 +180,7 @@ const useTreeViewSelection = ({
   (0, _useEnhancedEffect.default)(() => {
     store.update(prevState => (0, _extends2.default)({}, prevState, {
       selection: {
-        rawSelectedItems: models.selectedItems.value,
-        // Only re-compute the map when the model changes.
-        selectedItemsMap: prevState.selection.rawSelectedItems === models.selectedItems.value ? prevState.selection.selectedItemsMap : (0, _useTreeViewSelection.createSelectedItemsMap)(models.selectedItems.value),
+        selectedItems: params.selectedItems === undefined ? prevState.selection.selectedItems : params.selectedItems,
         isEnabled: !params.disableSelection,
         isMultiSelectEnabled: params.multiSelect,
         isCheckboxSelectionEnabled: params.checkboxSelection,
@@ -182,7 +190,7 @@ const useTreeViewSelection = ({
         }
       }
     }));
-  }, [store, models.selectedItems.value, params.multiSelect, params.checkboxSelection, params.disableSelection, params.selectionPropagation.descendants, params.selectionPropagation.parents]);
+  }, [store, params.selectedItems, params.multiSelect, params.checkboxSelection, params.disableSelection, params.selectionPropagation.descendants, params.selectionPropagation.parents]);
   return {
     getRootProps: () => ({
       'aria-multiselectable': params.multiSelect
@@ -202,11 +210,6 @@ const useTreeViewSelection = ({
 };
 exports.useTreeViewSelection = useTreeViewSelection;
 useTreeViewSelection.itemPlugin = _useTreeViewSelection3.useTreeViewSelectionItemPlugin;
-useTreeViewSelection.models = {
-  selectedItems: {
-    getDefaultValue: params => params.defaultSelectedItems
-  }
-};
 const DEFAULT_SELECTED_ITEMS = [];
 const EMPTY_SELECTION_PROPAGATION = {};
 useTreeViewSelection.getDefaultizedParams = ({
@@ -218,19 +221,15 @@ useTreeViewSelection.getDefaultizedParams = ({
   defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_ITEMS : null),
   selectionPropagation: params.selectionPropagation ?? EMPTY_SELECTION_PROPAGATION
 });
-useTreeViewSelection.getInitialState = params => {
-  const rawSelectedItems = params.selectedItems === undefined ? params.defaultSelectedItems : params.selectedItems;
-  return {
-    selection: {
-      rawSelectedItems,
-      selectedItemsMap: (0, _useTreeViewSelection.createSelectedItemsMap)(rawSelectedItems),
-      isEnabled: !params.disableSelection,
-      isMultiSelectEnabled: params.multiSelect,
-      isCheckboxSelectionEnabled: params.checkboxSelection,
-      selectionPropagation: params.selectionPropagation
-    }
-  };
-};
+useTreeViewSelection.getInitialState = params => ({
+  selection: {
+    selectedItems: params.selectedItems === undefined ? params.defaultSelectedItems : params.selectedItems,
+    isEnabled: !params.disableSelection,
+    isMultiSelectEnabled: params.multiSelect,
+    isCheckboxSelectionEnabled: params.checkboxSelection,
+    selectionPropagation: params.selectionPropagation
+  }
+});
 useTreeViewSelection.params = {
   disableSelection: true,
   multiSelect: true,