@mui/x-tree-view-pro 8.11.0 → 8.11.2

package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { selectorItemMeta, selectorIsItemSelected, useInstanceEventHandler, selectorDataSourceState, selectorGetTreeItemError, selectorExpandedItems } from '@mui/x-tree-view/internals';
+import { itemsSelectors, expansionSelectors, selectionSelectors, lazyLoadingSelectors, useInstanceEventHandler } from '@mui/x-tree-view/internals';
 import { DataSourceCacheDefault } from '@mui/x-tree-view/utils';
 import { NestedDataManager } from "./utils.js";
 const INITIAL_STATE = {
@@ -35,54 +35,44 @@ export const useTreeViewLazyLoading = ({
     if (!isLazyLoadingEnabled) {
       return;
     }
-    store.update(prevState => {
-      if (!prevState.lazyLoading.dataSource.loading[itemId] && !isLoading) {
-        return prevState;
-      }
-      const loading = _extends({}, prevState.lazyLoading.dataSource.loading);
-      if (isLoading === false) {
-        delete loading[itemId];
-      } else {
-        loading[itemId] = isLoading;
-      }
-      return _extends({}, prevState, {
-        lazyLoading: _extends({}, prevState.lazyLoading, {
-          dataSource: _extends({}, prevState.lazyLoading.dataSource, {
-            loading
-          })
-        })
-      });
-    });
+    if (lazyLoadingSelectors.isItemLoading(store.state, itemId) === isLoading) {
+      return;
+    }
+    const loadingState = _extends({}, store.state.lazyLoading.dataSource.loading);
+    if (isLoading === false) {
+      delete loadingState[itemId];
+    } else {
+      loadingState[itemId] = isLoading;
+    }
+    store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
+      dataSource: _extends({}, store.state.lazyLoading.dataSource, {
+        loading: loadingState
+      })
+    }));
   });
   const setDataSourceError = (itemId, error) => {
     if (!isLazyLoadingEnabled) {
       return;
     }
-    store.update(prevState => {
-      const errors = _extends({}, prevState.lazyLoading.dataSource.errors);
-      if (error === null && errors[itemId] !== undefined) {
-        delete errors[itemId];
-      } else {
-        errors[itemId] = error;
-      }
+    const errors = _extends({}, store.state.lazyLoading.dataSource.errors);
+    if (error === null && errors[itemId] !== undefined) {
+      delete errors[itemId];
+    } else {
       errors[itemId] = error;
-      return _extends({}, prevState, {
-        lazyLoading: _extends({}, prevState.lazyLoading, {
-          dataSource: _extends({}, prevState.lazyLoading.dataSource, {
-            errors
-          })
-        })
-      });
-    });
+    }
+    errors[itemId] = error;
+    store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
+      dataSource: _extends({}, store.state.lazyLoading.dataSource, {
+        errors
+      })
+    }));
   };
   const resetDataSourceState = useEventCallback(() => {
     if (!isLazyLoadingEnabled) {
       return;
     }
-    store.update(prevState => _extends({}, prevState, {
-      lazyLoading: _extends({}, prevState.lazyLoading, {
-        dataSource: INITIAL_STATE
-      })
+    store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
+      dataSource: INITIAL_STATE
     }));
   });
   const fetchItems = useEventCallback(async parentIds => {
@@ -102,7 +92,7 @@ export const useTreeViewLazyLoading = ({
     // handle loading here
     instance.setTreeViewLoading(true);
     // reset the state if we are refetching the first visible items
-    if (selectorDataSourceState(store.value) !== INITIAL_STATE) {
+    if (lazyLoadingSelectors.dataSource(store.state) !== INITIAL_STATE) {
       resetDataSourceState();
     }
     // handle caching here
@@ -142,70 +132,83 @@ export const useTreeViewLazyLoading = ({
       instance.setTreeViewLoading(false);
     }
   });
-  const fetchItemChildren = useEventCallback(async id => {
+  const fetchItemChildren = useEventCallback(async ({
+    itemId,
+    forceRefresh
+  }) => {
     if (!isLazyLoadingEnabled) {
       return;
     }
     const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
     const getTreeItems = params.dataSource?.getTreeItems;
     if (!getTreeItems) {
-      nestedDataManager.clearPendingRequest(id);
+      nestedDataManager.clearPendingRequest(itemId);
       return;
     }
-    const parent = selectorItemMeta(store.value, id);
+    const parent = itemsSelectors.itemMeta(store.state, itemId);
     if (!parent) {
-      nestedDataManager.clearPendingRequest(id);
+      nestedDataManager.clearPendingRequest(itemId);
       return;
     }
     const depth = parent.depth ? parent.depth + 1 : 1;
 
     // handle loading here
-    instance.setDataSourceLoading(id, true);
+    instance.setDataSourceLoading(itemId, true);
 
     // handle caching here
-    const cachedData = cacheRef.current.get(id);
-    if (cachedData !== undefined && cachedData !== -1) {
-      nestedDataManager.setRequestSettled(id);
-      instance.addItems({
-        items: cachedData,
-        depth,
-        parentId: id,
-        getChildrenCount
-      });
-      instance.setDataSourceLoading(id, false);
-      return;
-    }
-    if (cachedData === -1) {
-      instance.removeChildren(id);
+    if (!forceRefresh) {
+      const cachedData = cacheRef.current.get(itemId);
+      if (cachedData !== undefined && cachedData !== -1) {
+        nestedDataManager.setRequestSettled(itemId);
+        instance.addItems({
+          items: cachedData,
+          depth,
+          parentId: itemId,
+          getChildrenCount
+        });
+        instance.setDataSourceLoading(itemId, false);
+        return;
+      }
+      if (cachedData === -1) {
+        instance.removeChildren(itemId);
+      }
     }
-    const existingError = selectorGetTreeItemError(store.value, id) ?? null;
-    if (existingError) {
-      instance.setDataSourceError(id, null);
+    if (lazyLoadingSelectors.itemHasError(store.state, itemId)) {
+      instance.setDataSourceError(itemId, null);
     }
     try {
-      const getTreeItemsResponse = await getTreeItems(id);
-      nestedDataManager.setRequestSettled(id);
+      const getTreeItemsResponse = await getTreeItems(itemId);
+      nestedDataManager.setRequestSettled(itemId);
 
       // set caching
-      cacheRef.current.set(id, getTreeItemsResponse);
+      cacheRef.current.set(itemId, getTreeItemsResponse);
       // update the items in the state
+      if (forceRefresh) {
+        instance.removeChildren(itemId);
+      }
       instance.addItems({
         items: getTreeItemsResponse,
         depth,
-        parentId: id,
+        parentId: itemId,
         getChildrenCount
       });
     } catch (error) {
       const childrenFetchError = error;
       // handle errors here
-      instance.setDataSourceError(id, childrenFetchError);
-      instance.removeChildren(id);
+      instance.setDataSourceError(itemId, childrenFetchError);
+      instance.removeChildren(itemId);
     } finally {
       // unset loading
-      instance.setDataSourceLoading(id, false);
-      nestedDataManager.setRequestSettled(id);
+      instance.setDataSourceLoading(itemId, false);
+      nestedDataManager.setRequestSettled(itemId);
     }
   });
+  const updateItemChildren = useEventCallback(itemId => {
+    return instance.fetchItemChildren({
+      itemId,
+      forceRefresh: true
+    });
+  });
   useInstanceEventHandler(instance, 'beforeItemToggleExpansion', async eventParameters => {
     if (!isLazyLoadingEnabled || !eventParameters.shouldBeExpanded) {
       return;
@@ -214,14 +217,14 @@ export const useTreeViewLazyLoading = ({
 
     eventParameters.isExpansionPrevented = true;
     await instance.fetchItems([eventParameters.itemId]);
-    const fetchErrors = Boolean(selectorGetTreeItemError(store.value, eventParameters.itemId));
-    if (!fetchErrors) {
+    const itemHasError = lazyLoadingSelectors.itemHasError(store.state, eventParameters.itemId);
+    if (!itemHasError) {
       instance.applyItemExpansion({
         itemId: eventParameters.itemId,
         shouldBeExpanded: true,
         event: eventParameters.event
       });
-      if (selectorIsItemSelected(store.value, eventParameters.itemId)) {
+      if (selectionSelectors.isItemSelected(store.state, eventParameters.itemId)) {
         // make sure selection propagation works correctly
         instance.setItemSelection({
           event: eventParameters.event,
@@ -234,10 +237,8 @@ export const useTreeViewLazyLoading = ({
   });
   React.useEffect(() => {
     if (isLazyLoadingEnabled && firstRenderRef.current) {
-      store.update(prevState => _extends({}, prevState, {
-        lazyLoading: _extends({}, prevState.lazyLoading, {
-          enabled: true
-        })
+      store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
+        enabled: true
       }));
       if (params.items.length) {
         const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
@@ -247,7 +248,7 @@ export const useTreeViewLazyLoading = ({
           getChildrenCount
         });
       } else {
-        const expandedItems = selectorExpandedItems(store.value);
+        const expandedItems = expansionSelectors.expandedItemsRaw(store.state);
         if (expandedItems.length > 0) {
           instance.resetItemExpansion();
         }
@@ -263,10 +264,13 @@ export const useTreeViewLazyLoading = ({
     instance: {
       fetchItemChildren,
       fetchItems,
+      updateItemChildren,
       setDataSourceLoading,
       setDataSourceError
     },
-    publicAPI: {}
+    publicAPI: {
+      updateItemChildren
+    }
   };
 };
 useTreeViewLazyLoading.getInitialState = () => ({

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

@@ -42,7 +42,9 @@ export class NestedDataManager {
       const id = fetchQueue[i];
       this.queuedRequests.delete(id);
       this.pendingRequests.add(id);
-      fetchPromises.push(this.instance.fetchItemChildren(id));
+      fetchPromises.push(this.instance.fetchItemChildren({
+        itemId: id
+      }));
     }
     await Promise.all(fetchPromises);
   };

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view-pro v8.11.0
+ * @mui/x-tree-view-pro v8.11.2
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/internals/plugins/useTreeViewItemsReordering/index.d.ts

@@ -1,2 +1,3 @@
 export { useTreeViewItemsReordering } from "./useTreeViewItemsReordering.js";
-export type { UseTreeViewItemsReorderingSignature, UseTreeViewItemsReorderingParameters, UseTreeViewItemsReorderingParametersWithDefaults, TreeViewItemReorderPosition } from "./useTreeViewItemsReordering.types.js";
+export type { UseTreeViewItemsReorderingSignature, UseTreeViewItemsReorderingParameters, UseTreeViewItemsReorderingParametersWithDefaults, TreeViewItemReorderPosition } from "./useTreeViewItemsReordering.types.js";
+export { itemsReorderingSelectors } from "./useTreeViewItemsReordering.selectors.js";

package/internals/plugins/useTreeViewItemsReordering/index.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "itemsReorderingSelectors", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItemsReordering2.itemsReorderingSelectors;
+  }
+});
 Object.defineProperty(exports, "useTreeViewItemsReordering", {
   enumerable: true,
   get: function () {
     return _useTreeViewItemsReordering.useTreeViewItemsReordering;
   }
 });
-var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering");
+var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering");
+var _useTreeViewItemsReordering2 = require("./useTreeViewItemsReordering.selectors");

package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeViewItemsReorderingItemPlugin = exports.isAndroid = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _store = require("@mui/x-internals/store");
 var _internals = require("@mui/x-tree-view/internals");
 var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering.selectors");
 const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
@@ -21,9 +22,9 @@ const useTreeViewItemsReorderingItemPlugin = ({
     itemId
   } = props;
   const validActionsRef = React.useRef(null);
-  const draggedItemProperties = (0, _internals.useSelector)(store, _useTreeViewItemsReordering.selectorDraggedItemProperties, itemId);
-  const canItemBeReordered = (0, _internals.useSelector)(store, _useTreeViewItemsReordering.selectorCanItemBeReordered, itemId);
-  const isValidTarget = (0, _internals.useSelector)(store, _useTreeViewItemsReordering.selectorIsItemValidReorderingTarget, itemId);
+  const draggedItemProperties = (0, _store.useStore)(store, _useTreeViewItemsReordering.itemsReorderingSelectors.draggedItemProperties, itemId);
+  const canItemBeReordered = (0, _store.useStore)(store, _useTreeViewItemsReordering.itemsReorderingSelectors.canItemBeReordered, itemId);
+  const isValidTarget = (0, _store.useStore)(store, _useTreeViewItemsReordering.itemsReorderingSelectors.isItemValidDropTarget, itemId);
   return {
     propsEnhancers: {
       root: ({

package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js

@@ -28,7 +28,7 @@ const useTreeViewItemsReordering = ({
     return true;
   }, [params.itemsReordering, params.isItemReorderable]);
   const getDroppingTargetValidActions = React.useCallback(itemId => {
-    const currentReorder = (0, _useTreeViewItemsReordering3.selectorCurrentItemReordering)(store.value);
+    const currentReorder = _useTreeViewItemsReordering3.itemsReorderingSelectors.currentReorder(store.state);
     if (!currentReorder) {
       throw new Error('There is no ongoing reordering.');
     }
@@ -36,11 +36,11 @@ const useTreeViewItemsReordering = ({
       return {};
     }
     const canMoveItemToNewPosition = params.canMoveItemToNewPosition;
-    const targetItemMeta = (0, _internals.selectorItemMeta)(store.value, itemId);
-    const targetItemIndex = (0, _internals.selectorItemIndex)(store.value, targetItemMeta.id);
-    const draggedItemMeta = (0, _internals.selectorItemMeta)(store.value, currentReorder.draggedItemId);
-    const draggedItemIndex = (0, _internals.selectorItemIndex)(store.value, draggedItemMeta.id);
-    const isTargetLastSibling = targetItemIndex === (0, _internals.selectorItemOrderedChildrenIds)(store.value, targetItemMeta.parentId).length - 1;
+    const targetItemMeta = _internals.itemsSelectors.itemMeta(store.state, itemId);
+    const targetItemIndex = _internals.itemsSelectors.itemIndex(store.state, targetItemMeta.id);
+    const draggedItemMeta = _internals.itemsSelectors.itemMeta(store.state, currentReorder.draggedItemId);
+    const draggedItemIndex = _internals.itemsSelectors.itemIndex(store.state, draggedItemMeta.id);
+    const isTargetLastSibling = targetItemIndex === _internals.itemsSelectors.itemOrderedChildrenIds(store.state, targetItemMeta.parentId).length - 1;
     const oldPosition = {
       parentId: draggedItemMeta.parentId,
       index: draggedItemIndex
@@ -76,7 +76,7 @@ const useTreeViewItemsReordering = ({
       } : null,
       'move-to-parent': targetItemMeta.parentId == null ? null : {
         parentId: targetItemMeta.parentId,
-        index: (0, _internals.selectorItemOrderedChildrenIds)(store.value, targetItemMeta.parentId).length
+        index: _internals.itemsSelectors.itemOrderedChildrenIds(store.state, targetItemMeta.parentId).length
       }
     };
     const validActions = {};
@@ -89,64 +89,56 @@ const useTreeViewItemsReordering = ({
     return validActions;
   }, [store, params.canMoveItemToNewPosition]);
   const startDraggingItem = React.useCallback(itemId => {
-    store.update(prevState => {
-      const isItemBeingEditing = (0, _internals.selectorIsItemBeingEdited)(prevState, itemId);
-      if (isItemBeingEditing) {
-        return prevState;
+    const isItemBeingEdited = _internals.labelSelectors.isItemBeingEdited(store.state, itemId);
+    if (isItemBeingEdited) {
+      return;
+    }
+    store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
+      currentReorder: {
+        targetItemId: itemId,
+        draggedItemId: itemId,
+        action: null,
+        newPosition: null
       }
-      return (0, _extends2.default)({}, prevState, {
-        itemsReordering: (0, _extends2.default)({}, prevState.itemsReordering, {
-          currentReorder: {
-            targetItemId: itemId,
-            draggedItemId: itemId,
-            action: null,
-            newPosition: null
-          }
-        })
-      });
-    });
+    }));
   }, [store]);
   const cancelDraggingItem = React.useCallback(() => {
-    const currentReorder = (0, _useTreeViewItemsReordering3.selectorCurrentItemReordering)(store.value);
+    const currentReorder = _useTreeViewItemsReordering3.itemsReorderingSelectors.currentReorder(store.state);
     if (currentReorder == null) {
       return;
     }
-    store.update(prevState => (0, _extends2.default)({}, prevState, {
-      itemsReordering: (0, _extends2.default)({}, prevState.itemsReordering, {
-        currentReorder: null
-      })
+    store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
+      currentReorder: null
     }));
   }, [store]);
   const completeDraggingItem = React.useCallback(itemId => {
-    const currentReorder = (0, _useTreeViewItemsReordering3.selectorCurrentItemReordering)(store.value);
+    const currentReorder = _useTreeViewItemsReordering3.itemsReorderingSelectors.currentReorder(store.state);
     if (currentReorder == null || currentReorder.draggedItemId !== itemId) {
       return;
     }
     if (currentReorder.draggedItemId === currentReorder.targetItemId || currentReorder.action == null || currentReorder.newPosition == null) {
-      store.update(prevState => (0, _extends2.default)({}, prevState, {
-        itemsReordering: (0, _extends2.default)({}, prevState.itemsReordering, {
-          currentReorder: null
-        })
+      store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
+        currentReorder: null
       }));
       return;
     }
-    const draggedItemMeta = (0, _internals.selectorItemMeta)(store.value, currentReorder.draggedItemId);
+    const draggedItemMeta = _internals.itemsSelectors.itemMeta(store.state, currentReorder.draggedItemId);
     const oldPosition = {
       parentId: draggedItemMeta.parentId,
-      index: (0, _internals.selectorItemIndex)(store.value, draggedItemMeta.id)
+      index: _internals.itemsSelectors.itemIndex(store.state, draggedItemMeta.id)
     };
     const newPosition = currentReorder.newPosition;
-    store.update(prevState => (0, _extends2.default)({}, prevState, {
-      itemsReordering: (0, _extends2.default)({}, prevState.itemsReordering, {
+    store.update({
+      itemsReordering: (0, _extends2.default)({}, store.state.itemsReordering, {
         currentReorder: null
       }),
       items: (0, _useTreeViewItemsReordering.moveItemInTree)({
         itemToMoveId: itemId,
         newPosition,
         oldPosition,
-        prevState: prevState.items
+        prevState: store.state.items
       })
-    }));
+    });
     const onItemPositionChange = params.onItemPositionChange;
     onItemPositionChange?.({
       itemId,
@@ -162,40 +154,34 @@ const useTreeViewItemsReordering = ({
     cursorX,
     contentElement
   }) => {
-    store.update(prevState => {
-      const prevItemReorder = prevState.itemsReordering.currentReorder;
-      if (prevItemReorder == null || (0, _useTreeViewItemsReordering.isAncestor)(store, itemId, prevItemReorder.draggedItemId)) {
-        return prevState;
-      }
-      const action = (0, _useTreeViewItemsReordering.chooseActionToApply)({
-        itemChildrenIndentation: params.itemChildrenIndentation,
-        validActions,
-        targetHeight,
-        targetDepth: prevState.items.itemMetaLookup[itemId].depth,
-        cursorY,
-        cursorX,
-        contentElement
-      });
-      const newPosition = action == null ? null : validActions[action];
-      if (prevItemReorder.targetItemId === itemId && prevItemReorder.action === action && prevItemReorder.newPosition?.parentId === newPosition?.parentId && prevItemReorder.newPosition?.index === newPosition?.index) {
-        return prevState;
-      }
-      return (0, _extends2.default)({}, prevState, {
-        itemsReordering: (0, _extends2.default)({}, prevState.itemsReordering, {
-          currentReorder: (0, _extends2.default)({}, prevItemReorder, {
-            targetItemId: itemId,
-            newPosition,
-            action
-          })
-        })
-      });
+    const prevItemReorder = store.state.itemsReordering.currentReorder;
+    if (prevItemReorder == null || (0, _useTreeViewItemsReordering.isAncestor)(store, itemId, prevItemReorder.draggedItemId)) {
+      return;
+    }
+    const action = (0, _useTreeViewItemsReordering.chooseActionToApply)({
+      itemChildrenIndentation: params.itemChildrenIndentation,
+      validActions,
+      targetHeight,
+      targetDepth: store.state.items.itemMetaLookup[itemId].depth,
+      cursorY,
+      cursorX,
+      contentElement
     });
+    const newPosition = action == null ? null : validActions[action];
+    if (prevItemReorder.targetItemId === itemId && prevItemReorder.action === action && prevItemReorder.newPosition?.parentId === newPosition?.parentId && prevItemReorder.newPosition?.index === newPosition?.index) {
+      return;
+    }
+    store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
+      currentReorder: (0, _extends2.default)({}, prevItemReorder, {
+        targetItemId: itemId,
+        newPosition,
+        action
+      })
+    }));
   }, [store, params.itemChildrenIndentation]);
   (0, _useEnhancedEffect.default)(() => {
-    store.update(prevState => (0, _extends2.default)({}, prevState, {
-      itemsReordering: (0, _extends2.default)({}, prevState.itemsReordering, {
-        isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
-      })
+    store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
+      isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
     }));
   }, [store, params.itemsReordering, params.isItemReorderable]);
   return {