@mui/x-tree-view 8.11.0 → 8.11.2

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

@@ -1,18 +1,9 @@
-import { createSelector } from "../../utils/selectors.js";
-import { selectorSelectionModelArray } from "../useTreeViewSelection/useTreeViewSelection.selectors.js";
-import { selectorDisabledItemFocusable, selectorItemMetaLookup, selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { selectionSelectors } from "../useTreeViewSelection/useTreeViewSelection.selectors.js";
+import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 import { isItemDisabled } from "../useTreeViewItems/useTreeViewItems.utils.js";
-import { selectorExpandedItemsMap } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
-const selectorTreeViewFocusState = state => state.focus;
-
-/**
- * Get the item that should be sequentially focusable (usually with the Tab key).
- * At any point in time, there is a single item that can be sequentially focused in the Tree View.
- * This item is the first selected item (that is both visible and navigable), if any, or the first navigable item if no item is selected.
- * @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([selectorSelectionModelArray, selectorExpandedItemsMap, selectorItemMetaLookup, selectorDisabledItemFocusable, state => selectorItemOrderedChildrenIds(state, null)], (selectedItems, expandedItemsMap, itemMetaLookup, disabledItemsFocusable, orderedRootItemIds) => {
+import { expansionSelectors } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+const defaultFocusableItemIdSelector = createSelectorMemoized(selectionSelectors.selectedItems, expansionSelectors.expandedItemsMap, itemsSelectors.itemMetaLookup, itemsSelectors.disabledItemFocusable, state => itemsSelectors.itemOrderedChildrenIds(state, null), (selectedItems, expandedItemsMap, itemMetaLookup, disabledItemsFocusable, orderedRootItemIds) => {
   const firstSelectedItem = selectedItems.find(itemId => {
     if (!disabledItemsFocusable && isItemDisabled(itemMetaLookup, itemId)) {
       return false;
@@ -29,26 +20,23 @@ export const selectorDefaultFocusableItemId = createSelector([selectorSelectionM
   }
   return null;
 });
-
-/**
- * Check if an item is the default focusable item.
- * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
- * @param {TreeViewItemId} itemId The id of the item to check.
- * @returns {boolean} `true` if the item is the default focusable item, `false` otherwise.
- */
-export const selectorIsItemTheDefaultFocusableItem = createSelector([selectorDefaultFocusableItemId, (_, itemId) => itemId], (defaultFocusableItemId, itemId) => defaultFocusableItemId === itemId);
-
-/**
- * Get the id of the item that is currently focused.
- * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
- * @returns {TreeViewItemId | null} The id of the item that is currently focused.
- */
-export const selectorFocusedItemId = createSelector(selectorTreeViewFocusState, focus => focus.focusedItemId);
-
-/**
- * Check if an item is focused.
- * @param {TreeViewState<[UseTreeViewFocusSignature]>} state The state of the tree view.
- * @param {TreeViewItemId} itemId The id of the item to check.
- * @returns {boolean} `true` if the item is focused, `false` otherwise.
- */
-export const selectorIsItemFocused = createSelector([selectorFocusedItemId, (_, itemId) => itemId], (focusedItemId, itemId) => focusedItemId === itemId);
+export const focusSelectors = {
+  /**
+   * Gets the item that should be sequentially focusable (usually with the Tab key).
+   * At any point in time, there is a single item that can be sequentially focused in the Tree View.
+   * This item is the first selected item (that is both visible and navigable), if any, or the first navigable item if no item is selected.
+   */
+  defaultFocusableItemId: defaultFocusableItemIdSelector,
+  /**
+   * Checks whether an item is the default focusable item.
+   */
+  isItemTheDefaultFocusableItem: createSelector(defaultFocusableItemIdSelector, (defaultFocusableItemId, itemId) => defaultFocusableItemId === itemId),
+  /**
+   * Gets the id of the item that is currently focused.
+   */
+  focusedItemId: createSelector(state => state.focus.focusedItemId),
+  /**
+   * Checks whether an item is focused.
+   */
+  isItemFocused: createSelector((state, itemId) => state.focus.focusedItemId === itemId)
+};

package/esm/internals/plugins/useTreeViewItems/index.d.ts

@@ -1,3 +1,4 @@
 export { useTreeViewItems } from "./useTreeViewItems.js";
 export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsParametersWithDefaults, UseTreeViewItemsState } from "./useTreeViewItems.types.js";
-export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
+export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
+export { itemsSelectors } from "./useTreeViewItems.selectors.js";

package/esm/internals/plugins/useTreeViewItems/index.js

@@ -1,2 +1,3 @@
 export { useTreeViewItems } from "./useTreeViewItems.js";
-export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
+export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
+export { itemsSelectors } from "./useTreeViewItems.selectors.js";

package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -6,8 +6,8 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { publishTreeViewEvent } from "../../utils/publishTreeViewEvent.js";
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
-import { selectorItemMeta, selectorItemOrderedChildrenIds, selectorItemModel, selectorItemDepth } from "./useTreeViewItems.selectors.js";
-import { selectorTreeViewId } from "../../corePlugins/useTreeViewId/useTreeViewId.selectors.js";
+import { itemsSelectors } from "./useTreeViewItems.selectors.js";
+import { idSelectors } from "../../corePlugins/useTreeViewId/index.js";
 import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const checkId = (id, item, itemMetaLookup) => {
@@ -82,65 +82,58 @@ export const useTreeViewItems = ({
   params,
   store
 }) => {
-  const getItem = React.useCallback(itemId => selectorItemModel(store.value, itemId), [store]);
+  const getItem = React.useCallback(itemId => itemsSelectors.itemModel(store.state, itemId), [store]);
   const getParentId = React.useCallback(itemId => {
-    const itemMeta = selectorItemMeta(store.value, itemId);
+    const itemMeta = itemsSelectors.itemMeta(store.state, itemId);
     return itemMeta?.parentId || null;
   }, [store]);
   const setTreeViewLoading = useEventCallback(isLoading => {
-    store.update(prevState => _extends({}, prevState, {
-      items: _extends({}, prevState.items, {
-        loading: isLoading
-      })
+    store.set('items', _extends({}, store.state.items, {
+      loading: isLoading
     }));
   });
   const setTreeViewError = useEventCallback(error => {
-    store.update(prevState => _extends({}, prevState, {
-      items: _extends({}, prevState.items, {
-        error
-      })
+    store.set('items', _extends({}, store.state.items, {
+      error
     }));
   });
   const setIsItemDisabled = useEventCallback(({
     itemId,
     shouldBeDisabled
   }) => {
-    store.update(prevState => {
-      if (!prevState.items.itemMetaLookup[itemId]) {
-        return prevState;
-      }
-      const itemMetaLookup = _extends({}, prevState.items.itemMetaLookup);
-      itemMetaLookup[itemId] = _extends({}, itemMetaLookup[itemId], {
-        disabled: shouldBeDisabled ?? !itemMetaLookup[itemId].disabled
-      });
-      return _extends({}, prevState, {
-        items: _extends({}, prevState.items, {
-          itemMetaLookup
-        })
-      });
+    if (!store.state.items.itemMetaLookup[itemId]) {
+      return;
+    }
+    const itemMetaLookup = _extends({}, store.state.items.itemMetaLookup);
+    itemMetaLookup[itemId] = _extends({}, itemMetaLookup[itemId], {
+      disabled: shouldBeDisabled ?? !itemMetaLookup[itemId].disabled
     });
+    store.set('items', _extends({}, store.state.items, {
+      itemMetaLookup
+    }));
   });
   const getItemTree = React.useCallback(() => {
     const getItemFromItemId = itemId => {
-      const item = selectorItemModel(store.value, itemId);
-      const newChildren = selectorItemOrderedChildrenIds(store.value, itemId);
+      const item = itemsSelectors.itemModel(store.state, itemId);
+      const itemToMutate = _extends({}, item);
+      const newChildren = itemsSelectors.itemOrderedChildrenIds(store.state, itemId);
       if (newChildren.length > 0) {
-        item.children = newChildren.map(getItemFromItemId);
+        itemToMutate.children = newChildren.map(getItemFromItemId);
       } else {
-        delete item.children;
+        delete itemToMutate.children;
       }
-      return item;
+      return itemToMutate;
     };
-    return selectorItemOrderedChildrenIds(store.value, null).map(getItemFromItemId);
+    return itemsSelectors.itemOrderedChildrenIds(store.state, null).map(getItemFromItemId);
   }, [store]);
-  const getItemOrderedChildrenIds = React.useCallback(itemId => selectorItemOrderedChildrenIds(store.value, itemId), [store]);
+  const getItemOrderedChildrenIds = React.useCallback(itemId => itemsSelectors.itemOrderedChildrenIds(store.state, itemId), [store]);
   const getItemDOMElement = itemId => {
-    const itemMeta = selectorItemMeta(store.value, itemId);
+    const itemMeta = itemsSelectors.itemMeta(store.state, itemId);
     if (itemMeta == null) {
       return null;
     }
     const idAttribute = generateTreeItemIdAttribute({
-      treeId: selectorTreeViewId(store.value),
+      treeId: idSelectors.treeId(store.state),
       itemId,
       id: itemMeta.idAttribute
     });
@@ -170,49 +163,42 @@ export const useTreeViewItems = ({
         initialParentId: parentId,
         ignoreChildren: true
       });
-      store.update(prevState => {
-        let newItems;
-        if (parentId) {
-          newItems = {
-            itemModelLookup: _extends({}, prevState.items.itemModelLookup, newState.itemModelLookup),
-            itemMetaLookup: _extends({}, prevState.items.itemMetaLookup, newState.itemMetaLookup),
-            itemOrderedChildrenIdsLookup: _extends({}, newState.itemOrderedChildrenIdsLookup, prevState.items.itemOrderedChildrenIdsLookup),
-            itemChildrenIndexesLookup: _extends({}, newState.itemChildrenIndexesLookup, prevState.items.itemChildrenIndexesLookup)
-          };
-        } else {
-          newItems = {
-            itemModelLookup: newState.itemModelLookup,
-            itemMetaLookup: newState.itemMetaLookup,
-            itemOrderedChildrenIdsLookup: newState.itemOrderedChildrenIdsLookup,
-            itemChildrenIndexesLookup: newState.itemChildrenIndexesLookup
-          };
+      let newItems;
+      if (parentId) {
+        newItems = {
+          itemModelLookup: _extends({}, store.state.items.itemModelLookup, newState.itemModelLookup),
+          itemMetaLookup: _extends({}, store.state.items.itemMetaLookup, newState.itemMetaLookup),
+          itemOrderedChildrenIdsLookup: _extends({}, newState.itemOrderedChildrenIdsLookup, store.state.items.itemOrderedChildrenIdsLookup),
+          itemChildrenIndexesLookup: _extends({}, newState.itemChildrenIndexesLookup, store.state.items.itemChildrenIndexesLookup)
+        };
+      } else {
+        newItems = {
+          itemModelLookup: newState.itemModelLookup,
+          itemMetaLookup: newState.itemMetaLookup,
+          itemOrderedChildrenIdsLookup: newState.itemOrderedChildrenIdsLookup,
+          itemChildrenIndexesLookup: newState.itemChildrenIndexesLookup
+        };
+      }
+      Object.values(store.state.items.itemMetaLookup).forEach(item => {
+        if (!newItems.itemMetaLookup[item.id]) {
+          publishTreeViewEvent(instance, 'removeItem', {
+            id: item.id
+          });
         }
-        Object.values(prevState.items.itemMetaLookup).forEach(item => {
-          if (!newItems.itemMetaLookup[item.id]) {
-            publishTreeViewEvent(instance, 'removeItem', {
-              id: item.id
-            });
-          }
-        });
-        return _extends({}, prevState, {
-          items: _extends({}, prevState.items, newItems)
-        });
       });
+      store.set('items', _extends({}, store.state.items, newItems));
     }
   };
   const removeChildren = parentId => {
-    store.update(prevState => {
-      if (!parentId) {
-        return _extends({}, prevState, {
-          items: _extends({}, prevState.items, {
-            itemMetaLookup: {},
-            itemOrderedChildrenIdsLookup: {},
-            itemChildrenIndexesLookup: {}
-          })
-        });
-      }
-      const newMetaMap = Object.keys(prevState.items.itemMetaLookup).reduce((acc, key) => {
-        const item = prevState.items.itemMetaLookup[key];
+    if (parentId == null) {
+      store.set('items', _extends({}, store.state.items, {
+        itemMetaLookup: {},
+        itemOrderedChildrenIdsLookup: {},
+        itemChildrenIndexesLookup: {}
+      }));
+    } else {
+      const newMetaMap = Object.keys(store.state.items.itemMetaLookup).reduce((acc, key) => {
+        const item = store.state.items.itemMetaLookup[key];
         if (item.parentId === parentId) {
           publishTreeViewEvent(instance, 'removeItem', {
             id: item.id
@@ -223,43 +209,37 @@ export const useTreeViewItems = ({
           [item.id]: item
         });
       }, {});
-      const newItemOrderedChildrenIdsLookup = prevState.items.itemOrderedChildrenIdsLookup;
-      const newItemChildrenIndexesLookup = prevState.items.itemChildrenIndexesLookup;
+      const newItemOrderedChildrenIdsLookup = _extends({}, store.state.items.itemOrderedChildrenIdsLookup);
+      const newItemChildrenIndexesLookup = _extends({}, store.state.items.itemChildrenIndexesLookup);
       delete newItemChildrenIndexesLookup[parentId];
       delete newItemOrderedChildrenIdsLookup[parentId];
-      return _extends({}, prevState, {
-        items: _extends({}, prevState.items, {
-          itemMetaLookup: newMetaMap,
-          itemOrderedChildrenIdsLookup: newItemOrderedChildrenIdsLookup,
-          itemChildrenIndexesLookup: newItemChildrenIndexesLookup
-        })
-      });
-    });
+      store.set('items', _extends({}, store.state.items, {
+        itemMetaLookup: newMetaMap,
+        itemOrderedChildrenIdsLookup: newItemOrderedChildrenIdsLookup,
+        itemChildrenIndexesLookup: newItemChildrenIndexesLookup
+      }));
+    }
   };
   React.useEffect(() => {
     if (instance.areItemUpdatesPrevented()) {
       return;
     }
-    store.update(prevState => {
-      const newState = processItemsLookups({
-        disabledItemsFocusable: params.disabledItemsFocusable,
-        items: params.items,
-        isItemDisabled: params.isItemDisabled,
-        getItemId: params.getItemId,
-        getItemLabel: params.getItemLabel,
-        getItemChildren: params.getItemChildren
-      });
-      Object.values(prevState.items.itemMetaLookup).forEach(item => {
-        if (!newState.itemMetaLookup[item.id]) {
-          publishTreeViewEvent(instance, 'removeItem', {
-            id: item.id
-          });
-        }
-      });
-      return _extends({}, prevState, {
-        items: _extends({}, prevState.items, newState)
-      });
+    const newState = processItemsLookups({
+      disabledItemsFocusable: params.disabledItemsFocusable,
+      items: params.items,
+      isItemDisabled: params.isItemDisabled,
+      getItemId: params.getItemId,
+      getItemLabel: params.getItemLabel,
+      getItemChildren: params.getItemChildren
+    });
+    Object.values(store.state.items.itemMetaLookup).forEach(item => {
+      if (!newState.itemMetaLookup[item.id]) {
+        publishTreeViewEvent(instance, 'removeItem', {
+          id: item.id
+        });
+      }
     });
+    store.set('items', _extends({}, store.state.items, newState));
   }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel, params.getItemChildren]);
 
   // Wrap `props.onItemClick` with `useEventCallback` to prevent unneeded context updates.
@@ -317,7 +297,7 @@ useTreeViewItems.wrapRoot = ({
   children
 }) => {
   return /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
-    value: selectorItemDepth,
+    value: itemsSelectors.itemDepth,
     children: children
   });
 };