@mui/x-tree-view 8.11.0 → 8.11.2

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

@@ -3,22 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorIsItemTheDefaultFocusableItem = exports.selectorIsItemFocused = exports.selectorFocusedItemId = exports.selectorDefaultFocusableItemId = void 0;
-var _selectors = require("../../utils/selectors");
+exports.focusSelectors = void 0;
+var _store = require("@mui/x-internals/store");
 var _useTreeViewSelection = require("../useTreeViewSelection/useTreeViewSelection.selectors");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
 var _useTreeViewItems2 = require("../useTreeViewItems/useTreeViewItems.utils");
 var _useTreeViewExpansion = require("../useTreeViewExpansion/useTreeViewExpansion.selectors");
-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.
- */
-const selectorDefaultFocusableItemId = exports.selectorDefaultFocusableItemId = (0, _selectors.createSelector)([_useTreeViewSelection.selectorSelectionModelArray, _useTreeViewExpansion.selectorExpandedItemsMap, _useTreeViewItems.selectorItemMetaLookup, _useTreeViewItems.selectorDisabledItemFocusable, state => (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, null)], (selectedItems, expandedItemsMap, itemMetaLookup, disabledItemsFocusable, orderedRootItemIds) => {
+const defaultFocusableItemIdSelector = (0, _store.createSelectorMemoized)(_useTreeViewSelection.selectionSelectors.selectedItems, _useTreeViewExpansion.expansionSelectors.expandedItemsMap, _useTreeViewItems.itemsSelectors.itemMetaLookup, _useTreeViewItems.itemsSelectors.disabledItemFocusable, state => _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, null), (selectedItems, expandedItemsMap, itemMetaLookup, disabledItemsFocusable, orderedRootItemIds) => {
   const firstSelectedItem = selectedItems.find(itemId => {
     if (!disabledItemsFocusable && (0, _useTreeViewItems2.isItemDisabled)(itemMetaLookup, itemId)) {
       return false;
@@ -35,26 +26,23 @@ const selectorDefaultFocusableItemId = exports.selectorDefaultFocusableItemId =
   }
   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.
- */
-const selectorIsItemTheDefaultFocusableItem = exports.selectorIsItemTheDefaultFocusableItem = (0, _selectors.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.
- */
-const selectorFocusedItemId = exports.selectorFocusedItemId = (0, _selectors.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.
- */
-const selectorIsItemFocused = exports.selectorIsItemFocused = (0, _selectors.createSelector)([selectorFocusedItemId, (_, itemId) => itemId], (focusedItemId, itemId) => focusedItemId === itemId);
+const focusSelectors = exports.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: (0, _store.createSelector)(defaultFocusableItemIdSelector, (defaultFocusableItemId, itemId) => defaultFocusableItemId === itemId),
+  /**
+   * Gets the id of the item that is currently focused.
+   */
+  focusedItemId: (0, _store.createSelector)(state => state.focus.focusedItemId),
+  /**
+   * Checks whether an item is focused.
+   */
+  isItemFocused: (0, _store.createSelector)((state, itemId) => state.focus.focusedItemId === itemId)
+};

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

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "buildSiblingIndexes", {
     return _useTreeViewItems2.buildSiblingIndexes;
   }
 });
+Object.defineProperty(exports, "itemsSelectors", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems3.itemsSelectors;
+  }
+});
 Object.defineProperty(exports, "useTreeViewItems", {
   enumerable: true,
   get: function () {
@@ -22,4 +28,5 @@ Object.defineProperty(exports, "useTreeViewItems", {
   }
 });
 var _useTreeViewItems = require("./useTreeViewItems");
-var _useTreeViewItems2 = require("./useTreeViewItems.utils");
+var _useTreeViewItems2 = require("./useTreeViewItems.utils");
+var _useTreeViewItems3 = require("./useTreeViewItems.selectors");

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -14,7 +14,7 @@ var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
 var _useTreeViewItems = require("./useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
 var _useTreeViewItems2 = require("./useTreeViewItems.selectors");
-var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.selectors");
+var _useTreeViewId = require("../../corePlugins/useTreeViewId");
 var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const checkId = (id, item, itemMetaLookup) => {
@@ -89,65 +89,58 @@ const useTreeViewItems = ({
   params,
   store
 }) => {
-  const getItem = React.useCallback(itemId => (0, _useTreeViewItems2.selectorItemModel)(store.value, itemId), [store]);
+  const getItem = React.useCallback(itemId => _useTreeViewItems2.itemsSelectors.itemModel(store.state, itemId), [store]);
   const getParentId = React.useCallback(itemId => {
-    const itemMeta = (0, _useTreeViewItems2.selectorItemMeta)(store.value, itemId);
+    const itemMeta = _useTreeViewItems2.itemsSelectors.itemMeta(store.state, itemId);
     return itemMeta?.parentId || null;
   }, [store]);
   const setTreeViewLoading = (0, _useEventCallback.default)(isLoading => {
-    store.update(prevState => (0, _extends2.default)({}, prevState, {
-      items: (0, _extends2.default)({}, prevState.items, {
-        loading: isLoading
-      })
+    store.set('items', (0, _extends2.default)({}, store.state.items, {
+      loading: isLoading
     }));
   });
   const setTreeViewError = (0, _useEventCallback.default)(error => {
-    store.update(prevState => (0, _extends2.default)({}, prevState, {
-      items: (0, _extends2.default)({}, prevState.items, {
-        error
-      })
+    store.set('items', (0, _extends2.default)({}, store.state.items, {
+      error
     }));
   });
   const setIsItemDisabled = (0, _useEventCallback.default)(({
     itemId,
     shouldBeDisabled
   }) => {
-    store.update(prevState => {
-      if (!prevState.items.itemMetaLookup[itemId]) {
-        return prevState;
-      }
-      const itemMetaLookup = (0, _extends2.default)({}, prevState.items.itemMetaLookup);
-      itemMetaLookup[itemId] = (0, _extends2.default)({}, itemMetaLookup[itemId], {
-        disabled: shouldBeDisabled ?? !itemMetaLookup[itemId].disabled
-      });
-      return (0, _extends2.default)({}, prevState, {
-        items: (0, _extends2.default)({}, prevState.items, {
-          itemMetaLookup
-        })
-      });
+    if (!store.state.items.itemMetaLookup[itemId]) {
+      return;
+    }
+    const itemMetaLookup = (0, _extends2.default)({}, store.state.items.itemMetaLookup);
+    itemMetaLookup[itemId] = (0, _extends2.default)({}, itemMetaLookup[itemId], {
+      disabled: shouldBeDisabled ?? !itemMetaLookup[itemId].disabled
     });
+    store.set('items', (0, _extends2.default)({}, store.state.items, {
+      itemMetaLookup
+    }));
   });
   const getItemTree = React.useCallback(() => {
     const getItemFromItemId = itemId => {
-      const item = (0, _useTreeViewItems2.selectorItemModel)(store.value, itemId);
-      const newChildren = (0, _useTreeViewItems2.selectorItemOrderedChildrenIds)(store.value, itemId);
+      const item = _useTreeViewItems2.itemsSelectors.itemModel(store.state, itemId);
+      const itemToMutate = (0, _extends2.default)({}, item);
+      const newChildren = _useTreeViewItems2.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 (0, _useTreeViewItems2.selectorItemOrderedChildrenIds)(store.value, null).map(getItemFromItemId);
+    return _useTreeViewItems2.itemsSelectors.itemOrderedChildrenIds(store.state, null).map(getItemFromItemId);
   }, [store]);
-  const getItemOrderedChildrenIds = React.useCallback(itemId => (0, _useTreeViewItems2.selectorItemOrderedChildrenIds)(store.value, itemId), [store]);
+  const getItemOrderedChildrenIds = React.useCallback(itemId => _useTreeViewItems2.itemsSelectors.itemOrderedChildrenIds(store.state, itemId), [store]);
   const getItemDOMElement = itemId => {
-    const itemMeta = (0, _useTreeViewItems2.selectorItemMeta)(store.value, itemId);
+    const itemMeta = _useTreeViewItems2.itemsSelectors.itemMeta(store.state, itemId);
     if (itemMeta == null) {
       return null;
     }
     const idAttribute = (0, _useTreeViewId2.generateTreeItemIdAttribute)({
-      treeId: (0, _useTreeViewId.selectorTreeViewId)(store.value),
+      treeId: _useTreeViewId.idSelectors.treeId(store.state),
       itemId,
       id: itemMeta.idAttribute
     });
@@ -177,49 +170,42 @@ const useTreeViewItems = ({
         initialParentId: parentId,
         ignoreChildren: true
       });
-      store.update(prevState => {
-        let newItems;
-        if (parentId) {
-          newItems = {
-            itemModelLookup: (0, _extends2.default)({}, prevState.items.itemModelLookup, newState.itemModelLookup),
-            itemMetaLookup: (0, _extends2.default)({}, prevState.items.itemMetaLookup, newState.itemMetaLookup),
-            itemOrderedChildrenIdsLookup: (0, _extends2.default)({}, newState.itemOrderedChildrenIdsLookup, prevState.items.itemOrderedChildrenIdsLookup),
-            itemChildrenIndexesLookup: (0, _extends2.default)({}, 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: (0, _extends2.default)({}, store.state.items.itemModelLookup, newState.itemModelLookup),
+          itemMetaLookup: (0, _extends2.default)({}, store.state.items.itemMetaLookup, newState.itemMetaLookup),
+          itemOrderedChildrenIdsLookup: (0, _extends2.default)({}, newState.itemOrderedChildrenIdsLookup, store.state.items.itemOrderedChildrenIdsLookup),
+          itemChildrenIndexesLookup: (0, _extends2.default)({}, 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]) {
+          (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
+            id: item.id
+          });
         }
-        Object.values(prevState.items.itemMetaLookup).forEach(item => {
-          if (!newItems.itemMetaLookup[item.id]) {
-            (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
-              id: item.id
-            });
-          }
-        });
-        return (0, _extends2.default)({}, prevState, {
-          items: (0, _extends2.default)({}, prevState.items, newItems)
-        });
       });
+      store.set('items', (0, _extends2.default)({}, store.state.items, newItems));
     }
   };
   const removeChildren = parentId => {
-    store.update(prevState => {
-      if (!parentId) {
-        return (0, _extends2.default)({}, prevState, {
-          items: (0, _extends2.default)({}, 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', (0, _extends2.default)({}, 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) {
           (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
             id: item.id
@@ -230,43 +216,37 @@ const useTreeViewItems = ({
           [item.id]: item
         });
       }, {});
-      const newItemOrderedChildrenIdsLookup = prevState.items.itemOrderedChildrenIdsLookup;
-      const newItemChildrenIndexesLookup = prevState.items.itemChildrenIndexesLookup;
+      const newItemOrderedChildrenIdsLookup = (0, _extends2.default)({}, store.state.items.itemOrderedChildrenIdsLookup);
+      const newItemChildrenIndexesLookup = (0, _extends2.default)({}, store.state.items.itemChildrenIndexesLookup);
       delete newItemChildrenIndexesLookup[parentId];
       delete newItemOrderedChildrenIdsLookup[parentId];
-      return (0, _extends2.default)({}, prevState, {
-        items: (0, _extends2.default)({}, prevState.items, {
-          itemMetaLookup: newMetaMap,
-          itemOrderedChildrenIdsLookup: newItemOrderedChildrenIdsLookup,
-          itemChildrenIndexesLookup: newItemChildrenIndexesLookup
-        })
-      });
-    });
+      store.set('items', (0, _extends2.default)({}, 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]) {
-          (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
-            id: item.id
-          });
-        }
-      });
-      return (0, _extends2.default)({}, prevState, {
-        items: (0, _extends2.default)({}, 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]) {
+        (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
+          id: item.id
+        });
+      }
     });
+    store.set('items', (0, _extends2.default)({}, 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.
@@ -325,7 +305,7 @@ useTreeViewItems.wrapRoot = ({
   children
 }) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
-    value: _useTreeViewItems2.selectorItemDepth,
+    value: _useTreeViewItems2.itemsSelectors.itemDepth,
     children: children
   });
 };