@mui/x-tree-view 8.0.0-beta.2 → 8.0.0

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

@@ -1,4 +1,8 @@
 import { createSelector } from "../../utils/selectors.js";
+import { selectorSelectionModelArray } from "../useTreeViewSelection/useTreeViewSelection.selectors.js";
+import { selectorDisabledItemFocusable, selectorItemMetaLookup, selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+import { isItemDisabled } from "../useTreeViewItems/useTreeViewItems.utils.js";
+import { selectorExpandedItemsMap } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
 const selectorTreeViewFocusState = state => state.focus;
 
 /**
@@ -8,7 +12,23 @@ const selectorTreeViewFocusState = state => state.focus;
  * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
  * @returns {TreeViewItemId | null} The id of the item that should be sequentially focusable.
  */
-export const selectorDefaultFocusableItemId = createSelector(selectorTreeViewFocusState, focus => focus.defaultFocusableItemId);
+export const selectorDefaultFocusableItemId = createSelector([selectorSelectionModelArray, selectorExpandedItemsMap, selectorItemMetaLookup, selectorDisabledItemFocusable, state => selectorItemOrderedChildrenIds(state, null)], (selectedItems, expandedItemsMap, itemMetaLookup, disabledItemsFocusable, orderedRootItemIds) => {
+  const firstSelectedItem = selectedItems.find(itemId => {
+    if (!disabledItemsFocusable && isItemDisabled(itemMetaLookup, itemId)) {
+      return false;
+    }
+    const itemMeta = itemMetaLookup[itemId];
+    return itemMeta && (itemMeta.parentId == null || expandedItemsMap.has(itemMeta.parentId));
+  });
+  if (firstSelectedItem != null) {
+    return firstSelectedItem;
+  }
+  const firstNavigableItem = orderedRootItemIds.find(itemId => disabledItemsFocusable || !isItemDisabled(itemMetaLookup, itemId));
+  if (firstNavigableItem != null) {
+    return firstNavigableItem;
+  }
+  return null;
+});
 
 /**
  * Check if an item is the default focusable item.

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

@@ -32,7 +32,6 @@ export type UseTreeViewFocusDefaultizedParameters = UseTreeViewFocusParameters;
 export interface UseTreeViewFocusState {
   focus: {
     focusedItemId: string | null;
-    defaultFocusableItemId: string | null;
   };
 }
 export type UseTreeViewFocusSignature = TreeViewPluginSignature<{

package/esm/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/esm/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js

@@ -1,5 +1,5 @@
 import { createSelector } from "../../utils/selectors.js";
-import { TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
+import { isItemDisabled, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
 const selectorTreeViewItemsState = state => state.items;
 
 /**
@@ -54,27 +54,7 @@ export const selectorItemMeta = createSelector([selectorItemMetaLookup, (_, item
  * @param {TreeViewItemId} itemId The id of the item to check.
  * @returns {boolean} `true` if the item is disabled, `false` otherwise.
  */
-export const selectorIsItemDisabled = 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;
-});
+export const selectorIsItemDisabled = createSelector([selectorItemMetaLookup, (_, itemId) => itemId], isItemDisabled);
 
 /**
  * Get the index of an item in its parent's children.
@@ -105,9 +85,16 @@ export const selectorItemParentId = createSelector([selectorItemMeta], itemMeta
  * @returns {number} The depth of the item.
  */
 export const selectorItemDepth = createSelector([selectorItemMeta], itemMeta => itemMeta?.depth ?? 0);
-export const selectorCanItemBeFocused = 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.
+ */
+export const selectorDisabledItemFocusable = createSelector([selectorTreeViewItemsState], itemsState => itemsState.disabledItemsFocusable);
+export const selectorCanItemBeFocused = createSelector([selectorDisabledItemFocusable, selectorIsItemDisabled], (disabledItemsFocusable, isDisabled) => {
+  if (disabledItemsFocusable) {
     return true;
   }
-  return !isItemDisabled;
+  return !isDisabled;
 });

package/esm/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/esm/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js

@@ -5,4 +5,35 @@ export const buildSiblingIndexes = siblings => {
     siblingsIndexLookup[childId] = index;
   });
   return siblingsIndexLookup;
+};
+
+/**
+ * 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 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;
 };

package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -36,10 +36,9 @@ export const useTreeViewLabel = ({
     }
   };
   useEnhancedEffect(() => {
-    const isItemEditable = params.isItemEditable;
     store.update(prevState => _extends({}, prevState, {
       label: _extends({}, prevState.label, {
-        isItemEditable: typeof isItemEditable === 'boolean' ? () => isItemEditable : isItemEditable
+        isItemEditable: params.isItemEditable
       })
     }));
   }, [store, params.isItemEditable]);
@@ -59,11 +58,9 @@ useTreeViewLabel.getDefaultizedParams = ({
 }) => _extends({}, params, {
   isItemEditable: params.isItemEditable ?? false
 });
-useTreeViewLabel.getInitialState = ({
-  isItemEditable
-}) => ({
+useTreeViewLabel.getInitialState = params => ({
   label: {
-    isItemEditable: typeof isItemEditable === 'boolean' ? () => isItemEditable : isItemEditable,
+    isItemEditable: params.isItemEditable,
     editedItemId: null
   }
 });

package/esm/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/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js

@@ -12,13 +12,23 @@ export const selectorIsItemEditable = createSelector([selectorTreeViewLabelState
   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.
  */
-export const selectorIsItemBeingEdited = createSelector([selectorTreeViewLabelState, (_, itemId) => itemId], (labelState, itemId) => labelState?.editedItemId === itemId);
+export const selectorIsItemBeingEdited = 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.
+ */
+export const selectorIsAnyItemBeingEdited = createSelector(selectorTreeViewLabelState, labelState => !!labelState?.editedItemId);

package/esm/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/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js

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

package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -2,17 +2,23 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from "../../utils/tree.js";
-import { convertSelectedItemsToArray, propagateSelection, getAddedAndRemovedItems, getLookupFromArray, createSelectedItemsMap } from "./useTreeViewSelection.utils.js";
-import { selectorIsItemSelected, selectorIsMultiSelectEnabled, selectorIsSelectionEnabled } from "./useTreeViewSelection.selectors.js";
+import { propagateSelection, getAddedAndRemovedItems, getLookupFromArray } from "./useTreeViewSelection.utils.js";
+import { selectorIsItemSelected, selectorIsMultiSelectEnabled, selectorIsSelectionEnabled, selectorSelectionModel, selectorSelectionModelArray } from "./useTreeViewSelection.selectors.js";
 import { useTreeViewSelectionItemPlugin } from "./useTreeViewSelection.itemPlugin.js";
+import { useAssertModelConsistency } from "../../utils/models.js";
 export const useTreeViewSelection = ({
   store,
-  params,
-  models
+  params
 }) => {
+  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 = selectorSelectionModel(store.value);
     let cleanModel;
     const isMultiSelectEnabled = selectorIsMultiSelectEnabled(store.value);
     if (isMultiSelectEnabled && (params.selectionPropagation.descendants || params.selectionPropagation.parents)) {
@@ -20,7 +26,7 @@ export const useTreeViewSelection = ({
         store,
         selectionPropagation: params.selectionPropagation,
         newModel: newModel,
-        oldModel: models.selectedItems.value,
+        oldModel: oldModel,
         additionalItemsToPropagate
       });
     } else {
@@ -31,7 +37,7 @@ export const useTreeViewSelection = ({
         const changes = getAddedAndRemovedItems({
           store,
           newModel: cleanModel,
-          oldModel: models.selectedItems.value
+          oldModel: oldModel
         });
         if (params.onItemSelectionToggle) {
           changes.added.forEach(itemId => {
@@ -41,19 +47,23 @@ export 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 => _extends({}, prevState, {
+        selection: _extends({}, prevState.selection, {
+          selectedItems: cleanModel
+        })
+      }));
     }
-    models.selectedItems.setControlledValue(cleanModel);
+    params.onSelectedItemsChange?.(event, cleanModel);
   };
   const setItemSelection = ({
     itemId,
@@ -67,14 +77,14 @@ export const useTreeViewSelection = ({
     let newSelected;
     const isMultiSelectEnabled = selectorIsMultiSelectEnabled(store.value);
     if (keepExistingSelection) {
-      const cleanSelectedItems = convertSelectedItemsToArray(models.selectedItems.value);
+      const oldSelected = selectorSelectionModelArray(store.value);
       const isSelectedBefore = 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
@@ -96,7 +106,7 @@ export const useTreeViewSelection = ({
     if (!isMultiSelectEnabled) {
       return;
     }
-    let newSelectedItems = convertSelectedItemsToArray(models.selectedItems.value).slice();
+    let newSelectedItems = 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
@@ -138,7 +148,7 @@ export const useTreeViewSelection = ({
     if (!isMultiSelectEnabled) {
       return;
     }
-    let newSelectedItems = convertSelectedItemsToArray(models.selectedItems.value).slice();
+    let newSelectedItems = selectorSelectionModelArray(store.value).slice();
     if (Object.keys(lastSelectedRange.current).length === 0) {
       newSelectedItems.push(nextItem);
       lastSelectedRange.current = {
@@ -162,9 +172,7 @@ export const useTreeViewSelection = ({
   useEnhancedEffect(() => {
     store.update(prevState => _extends({}, 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 : createSelectedItemsMap(models.selectedItems.value),
+        selectedItems: params.selectedItems === undefined ? prevState.selection.selectedItems : params.selectedItems,
         isEnabled: !params.disableSelection,
         isMultiSelectEnabled: params.multiSelect,
         isCheckboxSelectionEnabled: params.checkboxSelection,
@@ -174,7 +182,7 @@ export 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
@@ -193,11 +201,6 @@ export const useTreeViewSelection = ({
   };
 };
 useTreeViewSelection.itemPlugin = useTreeViewSelectionItemPlugin;
-useTreeViewSelection.models = {
-  selectedItems: {
-    getDefaultValue: params => params.defaultSelectedItems
-  }
-};
 const DEFAULT_SELECTED_ITEMS = [];
 const EMPTY_SELECTION_PROPAGATION = {};
 useTreeViewSelection.getDefaultizedParams = ({
@@ -209,19 +212,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: 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,