@mui/x-tree-view-pro 8.0.0-alpha.0 → 8.0.0-alpha.2

package/modern/RichTreeViewPro/RichTreeViewPro.js

@@ -59,8 +59,7 @@ const RichTreeViewPro = /*#__PURE__*/React.forwardRef(function RichTreeViewPro(i
   }
   const {
     getRootProps,
-    contextValue,
-    instance
+    contextValue
   } = useTreeView({
     plugins: RICH_TREE_VIEW_PRO_PLUGINS,
     rootRef: ref,
@@ -84,8 +83,7 @@ const RichTreeViewPro = /*#__PURE__*/React.forwardRef(function RichTreeViewPro(i
     children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
       children: [/*#__PURE__*/_jsx(RichTreeViewItems, {
         slots: slots,
-        slotProps: slotProps,
-        itemsToRender: instance.getItemsToRender()
+        slotProps: slotProps
       }), /*#__PURE__*/_jsx(Watermark, {
         packageName: "x-tree-view-pro",
         releaseInfo: releaseInfo

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view-pro v8.0.0-alpha.0
+ * @mui/x-tree-view-pro v8.0.0-alpha.2
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

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

@@ -1,17 +1,21 @@
 import * as React from 'react';
-import { useTreeViewContext, isTargetInDescendants } from '@mui/x-tree-view/internals';
+import { useTreeViewContext, isTargetInDescendants, useSelector } from '@mui/x-tree-view/internals';
+import { selectorItemsReorderingDraggedItemProperties, selectorItemsReorderingIsValidTarget } from "./useTreeViewItemsReordering.selectors.js";
 export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
 export const useTreeViewItemsReorderingItemPlugin = ({
   props
 }) => {
   const {
-    itemsReordering,
-    instance
+    instance,
+    store,
+    itemsReordering
   } = useTreeViewContext();
   const {
     itemId
   } = props;
   const validActionsRef = React.useRef(null);
+  const draggedItemProperties = useSelector(store, selectorItemsReorderingDraggedItemProperties, itemId);
+  const isValidTarget = useSelector(store, selectorItemsReorderingIsValidTarget, itemId);
   return {
     propsEnhancers: {
       root: ({
@@ -19,8 +23,7 @@ export const useTreeViewItemsReorderingItemPlugin = ({
         contentRefObject,
         externalEventHandlers
       }) => {
-        const draggable = instance.canItemBeDragged(itemId);
-        if (!draggable) {
+        if (!itemsReordering.enabled || itemsReordering.isItemReorderable && !itemsReordering.isItemReorderable(itemId)) {
           return {};
         }
         const handleDragStart = event => {
@@ -75,8 +78,7 @@ export const useTreeViewItemsReorderingItemPlugin = ({
         externalEventHandlers,
         contentRefObject
       }) => {
-        const currentDrag = itemsReordering.currentDrag;
-        if (!currentDrag || currentDrag.draggedItemId === itemId) {
+        if (!isValidTarget) {
           return {};
         }
         const handleDragOver = event => {
@@ -109,17 +111,13 @@ export const useTreeViewItemsReorderingItemPlugin = ({
         };
       },
       dragAndDropOverlay: () => {
-        const currentDrag = itemsReordering.currentDrag;
-        if (!currentDrag || currentDrag.targetItemId !== itemId || currentDrag.action == null) {
+        if (!draggedItemProperties) {
           return {};
         }
-        const targetDepth = currentDrag.newPosition?.parentId == null ? 0 :
-        // The depth is always defined because drag&drop is only usable with Rich Tree View components.
-        instance.getItemMeta(currentDrag.newPosition.parentId).depth + 1;
         return {
-          action: currentDrag.action,
+          action: draggedItemProperties.action,
           style: {
-            '--TreeView-targetDepth': targetDepth
+            '--TreeView-targetDepth': draggedItemProperties.targetDepth
           }
         };
       }

package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { selectorItemIndex, selectorItemMeta, selectorItemOrderedChildrenIds } from '@mui/x-tree-view/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { chooseActionToApply, isAncestor, moveItemInTree } from "./useTreeViewItemsReordering.utils.js";
 import { useTreeViewItemsReorderingItemPlugin } from "./useTreeViewItemsReordering.itemPlugin.js";
+import { selectorItemsReordering } from "./useTreeViewItemsReordering.selectors.js";
 export const useTreeViewItemsReordering = ({
   params,
-  instance,
-  state,
-  setState
+  store
 }) => {
   const canItemBeDragged = React.useCallback(itemId => {
     if (!params.itemsReordering) {
@@ -20,7 +20,7 @@ export const useTreeViewItemsReordering = ({
     return true;
   }, [params.itemsReordering, params.isItemReorderable]);
   const getDroppingTargetValidActions = React.useCallback(itemId => {
-    const itemsReordering = state.itemsReordering;
+    const itemsReordering = selectorItemsReordering(store.value);
     if (!itemsReordering) {
       throw new Error('There is no ongoing reordering.');
     }
@@ -28,10 +28,10 @@ export const useTreeViewItemsReordering = ({
       return {};
     }
     const canMoveItemToNewPosition = params.canMoveItemToNewPosition;
-    const targetItemMeta = instance.getItemMeta(itemId);
-    const targetItemIndex = instance.getItemIndex(targetItemMeta.id);
-    const draggedItemMeta = instance.getItemMeta(itemsReordering.draggedItemId);
-    const draggedItemIndex = instance.getItemIndex(draggedItemMeta.id);
+    const targetItemMeta = selectorItemMeta(store.value, itemId);
+    const targetItemIndex = selectorItemIndex(store.value, targetItemMeta.id);
+    const draggedItemMeta = selectorItemMeta(store.value, itemsReordering.draggedItemId);
+    const draggedItemIndex = selectorItemIndex(store.value, draggedItemMeta.id);
     const oldPosition = {
       parentId: draggedItemMeta.parentId,
       index: draggedItemIndex
@@ -67,7 +67,7 @@ export const useTreeViewItemsReordering = ({
       },
       'move-to-parent': targetItemMeta.parentId == null ? null : {
         parentId: targetItemMeta.parentId,
-        index: instance.getItemOrderedChildrenIds(targetItemMeta.parentId).length
+        index: selectorItemOrderedChildrenIds(store.value, targetItemMeta.parentId).length
       }
     };
     const validActions = {};
@@ -78,9 +78,9 @@ export const useTreeViewItemsReordering = ({
       }
     });
     return validActions;
-  }, [instance, state.itemsReordering, params.canMoveItemToNewPosition]);
+  }, [store, params.canMoveItemToNewPosition]);
   const startDraggingItem = React.useCallback(itemId => {
-    setState(prevState => _extends({}, prevState, {
+    store.update(prevState => _extends({}, prevState, {
       itemsReordering: {
         targetItemId: itemId,
         draggedItemId: itemId,
@@ -88,24 +88,25 @@ export const useTreeViewItemsReordering = ({
         newPosition: null
       }
     }));
-  }, [setState]);
+  }, [store]);
   const stopDraggingItem = React.useCallback(itemId => {
-    if (state.itemsReordering == null || state.itemsReordering.draggedItemId !== itemId) {
+    const itemsReordering = selectorItemsReordering(store.value);
+    if (itemsReordering == null || itemsReordering.draggedItemId !== itemId) {
       return;
     }
-    if (state.itemsReordering.draggedItemId === state.itemsReordering.targetItemId || state.itemsReordering.action == null || state.itemsReordering.newPosition == null) {
-      setState(prevState => _extends({}, prevState, {
+    if (itemsReordering.draggedItemId === itemsReordering.targetItemId || itemsReordering.action == null || itemsReordering.newPosition == null) {
+      store.update(prevState => _extends({}, prevState, {
         itemsReordering: null
       }));
       return;
     }
-    const draggedItemMeta = instance.getItemMeta(state.itemsReordering.draggedItemId);
+    const draggedItemMeta = selectorItemMeta(store.value, itemsReordering.draggedItemId);
     const oldPosition = {
       parentId: draggedItemMeta.parentId,
-      index: instance.getItemIndex(draggedItemMeta.id)
+      index: selectorItemIndex(store.value, draggedItemMeta.id)
     };
-    const newPosition = state.itemsReordering.newPosition;
-    setState(prevState => _extends({}, prevState, {
+    const newPosition = itemsReordering.newPosition;
+    store.update(prevState => _extends({}, prevState, {
       itemsReordering: null,
       items: moveItemInTree({
         itemToMoveId: itemId,
@@ -120,7 +121,7 @@ export const useTreeViewItemsReordering = ({
       newPosition,
       oldPosition
     });
-  }, [setState, state.itemsReordering, instance, params.onItemPositionChange]);
+  }, [store, params.onItemPositionChange]);
   const setDragTargetItem = React.useCallback(({
     itemId,
     validActions,
@@ -129,16 +130,16 @@ export const useTreeViewItemsReordering = ({
     cursorX,
     contentElement
   }) => {
-    setState(prevState => {
+    store.update(prevState => {
       const prevSubState = prevState.itemsReordering;
-      if (prevSubState == null || isAncestor(instance, itemId, prevSubState.draggedItemId)) {
+      if (prevSubState == null || isAncestor(store, itemId, prevSubState.draggedItemId)) {
         return prevState;
       }
       const action = chooseActionToApply({
         itemChildrenIndentation: params.itemChildrenIndentation,
         validActions,
         targetHeight,
-        targetDepth: prevState.items.itemMetaMap[itemId].depth,
+        targetDepth: prevState.items.itemMetaLookup[itemId].depth,
         cursorY,
         cursorX,
         contentElement
@@ -155,7 +156,13 @@ export const useTreeViewItemsReordering = ({
         })
       });
     });
-  }, [instance, setState, params.itemChildrenIndentation]);
+  }, [store, params.itemChildrenIndentation]);
+  const pluginContextValue = React.useMemo(() => ({
+    itemsReordering: {
+      enabled: params.itemsReordering,
+      isItemReorderable: params.isItemReorderable
+    }
+  }), [params.itemsReordering, params.isItemReorderable]);
   return {
     instance: {
       canItemBeDragged,
@@ -164,12 +171,7 @@ export const useTreeViewItemsReordering = ({
       stopDraggingItem,
       setDragTargetItem
     },
-    contextValue: {
-      itemsReordering: {
-        enabled: params.itemsReordering,
-        currentDrag: state.itemsReordering
-      }
-    }
+    contextValue: pluginContextValue
   };
 };
 useTreeViewItemsReordering.itemPlugin = useTreeViewItemsReorderingItemPlugin;

package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js

@@ -0,0 +1,35 @@
+import { createSelector, selectorItemMetaLookup } from '@mui/x-tree-view/internals';
+/**
+ * Get the items reordering state.
+ * @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemsReorderingState | null} The items reordering state.
+ */
+export const selectorItemsReordering = state => state.itemsReordering;
+
+/**
+ * Get the properties of the dragged item.
+ * @param {TreeViewState<[UseTreeViewItemsSignature, UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @param {string} itemId The id of the item.
+ * @returns {TreeViewItemDraggedItemProperties | null} The properties of the dragged item if the current item is being dragged, `null` otherwise.
+ */
+export const selectorItemsReorderingDraggedItemProperties = createSelector([selectorItemsReordering, selectorItemMetaLookup, (_, itemId) => itemId], (itemsReordering, itemMetaLookup, itemId) => {
+  if (!itemsReordering || itemsReordering.targetItemId !== itemId || itemsReordering.action == null) {
+    return null;
+  }
+  const targetDepth = itemsReordering.newPosition?.parentId == null ? 0 :
+  // The depth is always defined because drag&drop is only usable with Rich Tree View components.
+  itemMetaLookup[itemId].depth + 1;
+  return {
+    newPosition: itemsReordering.newPosition,
+    action: itemsReordering.action,
+    targetDepth
+  };
+});
+
+/**
+ * Check if the current item is a valid target for the dragged item.
+ * @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @param {string} itemId The id of the item.
+ * @returns {boolean} `true` if the current item is a valid target for the dragged item, `false` otherwise.
+ */
+export const selectorItemsReorderingIsValidTarget = createSelector([selectorItemsReordering, (_, itemId) => itemId], (itemsReordering, itemId) => itemsReordering && itemsReordering.draggedItemId !== itemId);

package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.js

@@ -1,17 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from '@mui/x-tree-view/internals';
+import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID, selectorItemMeta } from '@mui/x-tree-view/internals';
 /**
  * Checks if the item with the id itemIdB is an ancestor of the item with the id itemIdA.
  */
-export const isAncestor = (instance, itemIdA, itemIdB) => {
-  const itemMetaA = instance.getItemMeta(itemIdA);
+export const isAncestor = (store, itemIdA, itemIdB) => {
+  const itemMetaA = selectorItemMeta(store.value, itemIdA);
   if (itemMetaA.parentId === itemIdB) {
     return true;
   }
   if (itemMetaA.parentId == null) {
     return false;
   }
-  return isAncestor(instance, itemMetaA.parentId, itemIdB);
+  return isAncestor(store, itemMetaA.parentId, itemIdB);
 };
 
 /**
@@ -88,12 +88,12 @@ export const moveItemInTree = ({
   newPosition,
   prevState
 }) => {
-  const itemToMoveMeta = prevState.itemMetaMap[itemToMoveId];
+  const itemToMoveMeta = prevState.itemMetaLookup[itemToMoveId];
   const oldParentId = oldPosition.parentId ?? TREE_VIEW_ROOT_PARENT_ID;
   const newParentId = newPosition.parentId ?? TREE_VIEW_ROOT_PARENT_ID;
 
   // 1. Update the `itemOrderedChildrenIds`.
-  const itemOrderedChildrenIds = _extends({}, prevState.itemOrderedChildrenIds);
+  const itemOrderedChildrenIds = _extends({}, prevState.itemOrderedChildrenIdsLookup);
   if (oldParentId === newParentId) {
     const updatedChildren = [...itemOrderedChildrenIds[oldParentId]];
     updatedChildren.splice(oldPosition.index, 1);
@@ -109,42 +109,50 @@ export const moveItemInTree = ({
   }
 
   // 2. Update the `itemChildrenIndexes`
-  const itemChildrenIndexes = _extends({}, prevState.itemChildrenIndexes);
+  const itemChildrenIndexes = _extends({}, prevState.itemChildrenIndexesLookup);
   itemChildrenIndexes[oldParentId] = buildSiblingIndexes(itemOrderedChildrenIds[oldParentId]);
   if (newParentId !== oldParentId) {
     itemChildrenIndexes[newParentId] = buildSiblingIndexes(itemOrderedChildrenIds[newParentId]);
   }
 
-  // 3. Update the `itemMetaMap`
-  const itemMetaMap = _extends({}, prevState.itemMetaMap);
+  // 3. Update the `itemMetaLookup`
+  const itemMetaLookup = _extends({}, prevState.itemMetaLookup);
 
   // 3.1 Update the `expandable` property of the old and the new parent
+  function updateExpandable(itemId) {
+    const isExpandable = itemOrderedChildrenIds[itemId].length > 0;
+    if (itemMetaLookup[itemId].expandable !== isExpandable) {
+      itemMetaLookup[itemId] = _extends({}, itemMetaLookup[itemId], {
+        expandable: isExpandable
+      });
+    }
+  }
   if (oldParentId !== TREE_VIEW_ROOT_PARENT_ID && oldParentId !== newParentId) {
-    itemMetaMap[oldParentId].expandable = itemOrderedChildrenIds[oldParentId].length > 0;
+    updateExpandable(oldParentId);
   }
   if (newParentId !== TREE_VIEW_ROOT_PARENT_ID && newParentId !== oldParentId) {
-    itemMetaMap[newParentId].expandable = itemOrderedChildrenIds[newParentId].length > 0;
+    updateExpandable(newParentId);
   }
 
   // 3.2 Update the `parentId` and `depth` properties of the item to move
   // The depth is always defined because drag&drop is only usable with Rich Tree View components.
-  const itemToMoveDepth = newPosition.parentId == null ? 0 : itemMetaMap[newParentId].depth + 1;
-  itemMetaMap[itemToMoveId] = _extends({}, itemToMoveMeta, {
+  const itemToMoveDepth = newPosition.parentId == null ? 0 : itemMetaLookup[newParentId].depth + 1;
+  itemMetaLookup[itemToMoveId] = _extends({}, itemToMoveMeta, {
     parentId: newPosition.parentId,
     depth: itemToMoveDepth
   });
 
   // 3.3 Update the depth of all the children of the item to move
   const updateItemDepth = (itemId, depth) => {
-    itemMetaMap[itemId] = _extends({}, itemMetaMap[itemId], {
+    itemMetaLookup[itemId] = _extends({}, itemMetaLookup[itemId], {
       depth
     });
     itemOrderedChildrenIds[itemId]?.forEach(childId => updateItemDepth(childId, depth + 1));
   };
   itemOrderedChildrenIds[itemToMoveId]?.forEach(childId => updateItemDepth(childId, itemToMoveDepth + 1));
   return _extends({}, prevState, {
-    itemOrderedChildrenIds,
-    itemChildrenIndexes,
-    itemMetaMap
+    itemOrderedChildrenIdsLookup: itemOrderedChildrenIds,
+    itemChildrenIndexesLookup: itemChildrenIndexes,
+    itemMetaLookup
   });
 };

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
-import { ponyfillGlobal } from '@mui/utils';
+import ponyfillGlobal from '@mui/utils/ponyfillGlobal';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMTUzODgwMDAwMA==";
+  const releaseInfo = "MTczMjgzNDgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/RichTreeViewPro/RichTreeViewPro.js

@@ -66,8 +66,7 @@ const RichTreeViewPro = exports.RichTreeViewPro = /*#__PURE__*/React.forwardRef(
   }
   const {
     getRootProps,
-    contextValue,
-    instance
+    contextValue
   } = (0, _internals.useTreeView)({
     plugins: _RichTreeViewPro.RICH_TREE_VIEW_PRO_PLUGINS,
     rootRef: ref,
@@ -91,8 +90,7 @@ const RichTreeViewPro = exports.RichTreeViewPro = /*#__PURE__*/React.forwardRef(
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.RichTreeViewItems, {
         slots: slots,
-        slotProps: slotProps,
-        itemsToRender: instance.getItemsToRender()
+        slotProps: slotProps
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
         packageName: "x-tree-view-pro",
         releaseInfo: releaseInfo

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view-pro v8.0.0-alpha.0
+ * @mui/x-tree-view-pro v8.0.0-alpha.2
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

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

@@ -7,19 +7,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewItemsReorderingItemPlugin = exports.isAndroid = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-tree-view/internals");
+var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering.selectors");
 const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
 exports.isAndroid = isAndroid;
 const useTreeViewItemsReorderingItemPlugin = ({
   props
 }) => {
   const {
-    itemsReordering,
-    instance
+    instance,
+    store,
+    itemsReordering
   } = (0, _internals.useTreeViewContext)();
   const {
     itemId
   } = props;
   const validActionsRef = React.useRef(null);
+  const draggedItemProperties = (0, _internals.useSelector)(store, _useTreeViewItemsReordering.selectorItemsReorderingDraggedItemProperties, itemId);
+  const isValidTarget = (0, _internals.useSelector)(store, _useTreeViewItemsReordering.selectorItemsReorderingIsValidTarget, itemId);
   return {
     propsEnhancers: {
       root: ({
@@ -27,8 +31,7 @@ const useTreeViewItemsReorderingItemPlugin = ({
         contentRefObject,
         externalEventHandlers
       }) => {
-        const draggable = instance.canItemBeDragged(itemId);
-        if (!draggable) {
+        if (!itemsReordering.enabled || itemsReordering.isItemReorderable && !itemsReordering.isItemReorderable(itemId)) {
           return {};
         }
         const handleDragStart = event => {
@@ -83,8 +86,7 @@ const useTreeViewItemsReorderingItemPlugin = ({
         externalEventHandlers,
         contentRefObject
       }) => {
-        const currentDrag = itemsReordering.currentDrag;
-        if (!currentDrag || currentDrag.draggedItemId === itemId) {
+        if (!isValidTarget) {
           return {};
         }
         const handleDragOver = event => {
@@ -117,17 +119,13 @@ const useTreeViewItemsReorderingItemPlugin = ({
         };
       },
       dragAndDropOverlay: () => {
-        const currentDrag = itemsReordering.currentDrag;
-        if (!currentDrag || currentDrag.targetItemId !== itemId || currentDrag.action == null) {
+        if (!draggedItemProperties) {
           return {};
         }
-        const targetDepth = currentDrag.newPosition?.parentId == null ? 0 :
-        // The depth is always defined because drag&drop is only usable with Rich Tree View components.
-        instance.getItemMeta(currentDrag.newPosition.parentId).depth + 1;
         return {
-          action: currentDrag.action,
+          action: draggedItemProperties.action,
           style: {
-            '--TreeView-targetDepth': targetDepth
+            '--TreeView-targetDepth': draggedItemProperties.targetDepth
           }
         };
       }

package/node/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js

@@ -8,14 +8,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewItemsReordering = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-tree-view/internals");
 var _warning = require("@mui/x-internals/warning");
 var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering.utils");
 var _useTreeViewItemsReordering2 = require("./useTreeViewItemsReordering.itemPlugin");
+var _useTreeViewItemsReordering3 = require("./useTreeViewItemsReordering.selectors");
 const useTreeViewItemsReordering = ({
   params,
-  instance,
-  state,
-  setState
+  store
 }) => {
   const canItemBeDragged = React.useCallback(itemId => {
     if (!params.itemsReordering) {
@@ -28,7 +28,7 @@ const useTreeViewItemsReordering = ({
     return true;
   }, [params.itemsReordering, params.isItemReorderable]);
   const getDroppingTargetValidActions = React.useCallback(itemId => {
-    const itemsReordering = state.itemsReordering;
+    const itemsReordering = (0, _useTreeViewItemsReordering3.selectorItemsReordering)(store.value);
     if (!itemsReordering) {
       throw new Error('There is no ongoing reordering.');
     }
@@ -36,10 +36,10 @@ const useTreeViewItemsReordering = ({
       return {};
     }
     const canMoveItemToNewPosition = params.canMoveItemToNewPosition;
-    const targetItemMeta = instance.getItemMeta(itemId);
-    const targetItemIndex = instance.getItemIndex(targetItemMeta.id);
-    const draggedItemMeta = instance.getItemMeta(itemsReordering.draggedItemId);
-    const draggedItemIndex = instance.getItemIndex(draggedItemMeta.id);
+    const targetItemMeta = (0, _internals.selectorItemMeta)(store.value, itemId);
+    const targetItemIndex = (0, _internals.selectorItemIndex)(store.value, targetItemMeta.id);
+    const draggedItemMeta = (0, _internals.selectorItemMeta)(store.value, itemsReordering.draggedItemId);
+    const draggedItemIndex = (0, _internals.selectorItemIndex)(store.value, draggedItemMeta.id);
     const oldPosition = {
       parentId: draggedItemMeta.parentId,
       index: draggedItemIndex
@@ -75,7 +75,7 @@ const useTreeViewItemsReordering = ({
       },
       'move-to-parent': targetItemMeta.parentId == null ? null : {
         parentId: targetItemMeta.parentId,
-        index: instance.getItemOrderedChildrenIds(targetItemMeta.parentId).length
+        index: (0, _internals.selectorItemOrderedChildrenIds)(store.value, targetItemMeta.parentId).length
       }
     };
     const validActions = {};
@@ -86,9 +86,9 @@ const useTreeViewItemsReordering = ({
       }
     });
     return validActions;
-  }, [instance, state.itemsReordering, params.canMoveItemToNewPosition]);
+  }, [store, params.canMoveItemToNewPosition]);
   const startDraggingItem = React.useCallback(itemId => {
-    setState(prevState => (0, _extends2.default)({}, prevState, {
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
       itemsReordering: {
         targetItemId: itemId,
         draggedItemId: itemId,
@@ -96,24 +96,25 @@ const useTreeViewItemsReordering = ({
         newPosition: null
       }
     }));
-  }, [setState]);
+  }, [store]);
   const stopDraggingItem = React.useCallback(itemId => {
-    if (state.itemsReordering == null || state.itemsReordering.draggedItemId !== itemId) {
+    const itemsReordering = (0, _useTreeViewItemsReordering3.selectorItemsReordering)(store.value);
+    if (itemsReordering == null || itemsReordering.draggedItemId !== itemId) {
       return;
     }
-    if (state.itemsReordering.draggedItemId === state.itemsReordering.targetItemId || state.itemsReordering.action == null || state.itemsReordering.newPosition == null) {
-      setState(prevState => (0, _extends2.default)({}, prevState, {
+    if (itemsReordering.draggedItemId === itemsReordering.targetItemId || itemsReordering.action == null || itemsReordering.newPosition == null) {
+      store.update(prevState => (0, _extends2.default)({}, prevState, {
         itemsReordering: null
       }));
       return;
     }
-    const draggedItemMeta = instance.getItemMeta(state.itemsReordering.draggedItemId);
+    const draggedItemMeta = (0, _internals.selectorItemMeta)(store.value, itemsReordering.draggedItemId);
     const oldPosition = {
       parentId: draggedItemMeta.parentId,
-      index: instance.getItemIndex(draggedItemMeta.id)
+      index: (0, _internals.selectorItemIndex)(store.value, draggedItemMeta.id)
     };
-    const newPosition = state.itemsReordering.newPosition;
-    setState(prevState => (0, _extends2.default)({}, prevState, {
+    const newPosition = itemsReordering.newPosition;
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
       itemsReordering: null,
       items: (0, _useTreeViewItemsReordering.moveItemInTree)({
         itemToMoveId: itemId,
@@ -128,7 +129,7 @@ const useTreeViewItemsReordering = ({
       newPosition,
       oldPosition
     });
-  }, [setState, state.itemsReordering, instance, params.onItemPositionChange]);
+  }, [store, params.onItemPositionChange]);
   const setDragTargetItem = React.useCallback(({
     itemId,
     validActions,
@@ -137,16 +138,16 @@ const useTreeViewItemsReordering = ({
     cursorX,
     contentElement
   }) => {
-    setState(prevState => {
+    store.update(prevState => {
       const prevSubState = prevState.itemsReordering;
-      if (prevSubState == null || (0, _useTreeViewItemsReordering.isAncestor)(instance, itemId, prevSubState.draggedItemId)) {
+      if (prevSubState == null || (0, _useTreeViewItemsReordering.isAncestor)(store, itemId, prevSubState.draggedItemId)) {
         return prevState;
       }
       const action = (0, _useTreeViewItemsReordering.chooseActionToApply)({
         itemChildrenIndentation: params.itemChildrenIndentation,
         validActions,
         targetHeight,
-        targetDepth: prevState.items.itemMetaMap[itemId].depth,
+        targetDepth: prevState.items.itemMetaLookup[itemId].depth,
         cursorY,
         cursorX,
         contentElement
@@ -163,7 +164,13 @@ const useTreeViewItemsReordering = ({
         })
       });
     });
-  }, [instance, setState, params.itemChildrenIndentation]);
+  }, [store, params.itemChildrenIndentation]);
+  const pluginContextValue = React.useMemo(() => ({
+    itemsReordering: {
+      enabled: params.itemsReordering,
+      isItemReorderable: params.isItemReorderable
+    }
+  }), [params.itemsReordering, params.isItemReorderable]);
   return {
     instance: {
       canItemBeDragged,
@@ -172,12 +179,7 @@ const useTreeViewItemsReordering = ({
       stopDraggingItem,
       setDragTargetItem
     },
-    contextValue: {
-      itemsReordering: {
-        enabled: params.itemsReordering,
-        currentDrag: state.itemsReordering
-      }
-    }
+    contextValue: pluginContextValue
   };
 };
 exports.useTreeViewItemsReordering = useTreeViewItemsReordering;