@mui/x-tree-view-pro 8.0.0-alpha.9 → 8.0.0-beta.1

package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js

@@ -1,11 +1,19 @@
-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 = ({
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewItemsReordering = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _internals = require("@mui/x-tree-view/internals");
+var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering.utils");
+var _useTreeViewItemsReordering2 = require("./useTreeViewItemsReordering.itemPlugin");
+var _useTreeViewItemsReordering3 = require("./useTreeViewItemsReordering.selectors");
+const useTreeViewItemsReordering = ({
   params,
   store
 }) => {
@@ -20,18 +28,19 @@ export const useTreeViewItemsReordering = ({
     return true;
   }, [params.itemsReordering, params.isItemReorderable]);
   const getDroppingTargetValidActions = React.useCallback(itemId => {
-    const itemsReordering = selectorItemsReordering(store.value);
-    if (!itemsReordering) {
+    const currentReorder = (0, _useTreeViewItemsReordering3.selectorCurrentItemReordering)(store.value);
+    if (!currentReorder) {
       throw new Error('There is no ongoing reordering.');
     }
-    if (itemId === itemsReordering.draggedItemId) {
+    if (itemId === currentReorder.draggedItemId) {
       return {};
     }
     const canMoveItemToNewPosition = params.canMoveItemToNewPosition;
-    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 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 oldPosition = {
       parentId: draggedItemMeta.parentId,
       index: draggedItemIndex
@@ -43,7 +52,7 @@ export const useTreeViewItemsReordering = ({
         isValid = false;
       } else if (canMoveItemToNewPosition) {
         isValid = canMoveItemToNewPosition({
-          itemId: itemsReordering.draggedItemId,
+          itemId: currentReorder.draggedItemId,
           oldPosition,
           newPosition: positionAfterAction
         });
@@ -61,13 +70,13 @@ export const useTreeViewItemsReordering = ({
         parentId: targetItemMeta.parentId,
         index: targetItemMeta.parentId === draggedItemMeta.parentId && targetItemIndex > draggedItemIndex ? targetItemIndex - 1 : targetItemIndex
       },
-      'reorder-below': targetItemMeta.expandable ? null : {
+      'reorder-below': !targetItemMeta.expandable || isTargetLastSibling ? {
         parentId: targetItemMeta.parentId,
         index: targetItemMeta.parentId === draggedItemMeta.parentId && targetItemIndex > draggedItemIndex ? targetItemIndex : targetItemIndex + 1
-      },
+      } : null,
       'move-to-parent': targetItemMeta.parentId == null ? null : {
         parentId: targetItemMeta.parentId,
-        index: selectorItemOrderedChildrenIds(store.value, targetItemMeta.parentId).length
+        index: (0, _internals.selectorItemOrderedChildrenIds)(store.value, targetItemMeta.parentId).length
       }
     };
     const validActions = {};
@@ -80,35 +89,41 @@ export const useTreeViewItemsReordering = ({
     return validActions;
   }, [store, params.canMoveItemToNewPosition]);
   const startDraggingItem = React.useCallback(itemId => {
-    store.update(prevState => _extends({}, prevState, {
-      itemsReordering: {
-        targetItemId: itemId,
-        draggedItemId: itemId,
-        action: null,
-        newPosition: null
-      }
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
+      itemsReordering: (0, _extends2.default)({}, prevState.itemsReordering, {
+        currentReorder: {
+          targetItemId: itemId,
+          draggedItemId: itemId,
+          action: null,
+          newPosition: null
+        }
+      })
     }));
   }, [store]);
   const stopDraggingItem = React.useCallback(itemId => {
-    const itemsReordering = selectorItemsReordering(store.value);
-    if (itemsReordering == null || itemsReordering.draggedItemId !== itemId) {
+    const currentReorder = (0, _useTreeViewItemsReordering3.selectorCurrentItemReordering)(store.value);
+    if (currentReorder == null || currentReorder.draggedItemId !== itemId) {
       return;
     }
-    if (itemsReordering.draggedItemId === itemsReordering.targetItemId || itemsReordering.action == null || itemsReordering.newPosition == null) {
-      store.update(prevState => _extends({}, prevState, {
-        itemsReordering: null
+    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
+        })
       }));
       return;
     }
-    const draggedItemMeta = selectorItemMeta(store.value, itemsReordering.draggedItemId);
+    const draggedItemMeta = (0, _internals.selectorItemMeta)(store.value, currentReorder.draggedItemId);
     const oldPosition = {
       parentId: draggedItemMeta.parentId,
-      index: selectorItemIndex(store.value, draggedItemMeta.id)
+      index: (0, _internals.selectorItemIndex)(store.value, draggedItemMeta.id)
     };
-    const newPosition = itemsReordering.newPosition;
-    store.update(prevState => _extends({}, prevState, {
-      itemsReordering: null,
-      items: moveItemInTree({
+    const newPosition = currentReorder.newPosition;
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
+      itemsReordering: (0, _extends2.default)({}, prevState.itemsReordering, {
+        currentReorder: null
+      }),
+      items: (0, _useTreeViewItemsReordering.moveItemInTree)({
         itemToMoveId: itemId,
         newPosition,
         oldPosition,
@@ -131,11 +146,11 @@ export const useTreeViewItemsReordering = ({
     contentElement
   }) => {
     store.update(prevState => {
-      const prevSubState = prevState.itemsReordering;
-      if (prevSubState == null || isAncestor(store, itemId, prevSubState.draggedItemId)) {
+      const prevItemReorder = prevState.itemsReordering.currentReorder;
+      if (prevItemReorder == null || (0, _useTreeViewItemsReordering.isAncestor)(store, itemId, prevItemReorder.draggedItemId)) {
         return prevState;
       }
-      const action = chooseActionToApply({
+      const action = (0, _useTreeViewItemsReordering.chooseActionToApply)({
         itemChildrenIndentation: params.itemChildrenIndentation,
         validActions,
         targetHeight,
@@ -145,24 +160,27 @@ export const useTreeViewItemsReordering = ({
         contentElement
       });
       const newPosition = action == null ? null : validActions[action];
-      if (prevSubState.targetItemId === itemId && prevSubState.action === action && prevSubState.newPosition?.parentId === newPosition?.parentId && prevSubState.newPosition?.index === newPosition?.index) {
+      if (prevItemReorder.targetItemId === itemId && prevItemReorder.action === action && prevItemReorder.newPosition?.parentId === newPosition?.parentId && prevItemReorder.newPosition?.index === newPosition?.index) {
         return prevState;
       }
-      return _extends({}, prevState, {
-        itemsReordering: _extends({}, prevSubState, {
-          targetItemId: itemId,
-          newPosition,
-          action
+      return (0, _extends2.default)({}, prevState, {
+        itemsReordering: (0, _extends2.default)({}, prevState.itemsReordering, {
+          currentReorder: (0, _extends2.default)({}, prevItemReorder, {
+            targetItemId: itemId,
+            newPosition,
+            action
+          })
         })
       });
     });
   }, [store, params.itemChildrenIndentation]);
-  const pluginContextValue = React.useMemo(() => ({
-    itemsReordering: {
-      enabled: params.itemsReordering,
-      isItemReorderable: params.isItemReorderable
-    }
-  }), [params.itemsReordering, params.isItemReorderable]);
+  (0, _useEnhancedEffect.default)(() => {
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
+      itemsReordering: (0, _extends2.default)({}, prevState.itemsReordering, {
+        isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
+      })
+    }));
+  }, [store, params.itemsReordering, params.isItemReorderable]);
   return {
     instance: {
       canItemBeDragged,
@@ -170,27 +188,21 @@ export const useTreeViewItemsReordering = ({
       startDraggingItem,
       stopDraggingItem,
       setDragTargetItem
-    },
-    contextValue: pluginContextValue
+    }
   };
 };
-useTreeViewItemsReordering.itemPlugin = useTreeViewItemsReorderingItemPlugin;
+exports.useTreeViewItemsReordering = useTreeViewItemsReordering;
+useTreeViewItemsReordering.itemPlugin = _useTreeViewItemsReordering2.useTreeViewItemsReorderingItemPlugin;
 useTreeViewItemsReordering.getDefaultizedParams = ({
-  params,
-  experimentalFeatures
-}) => {
-  const canUseFeature = experimentalFeatures?.itemsReordering;
-  if (process.env.NODE_ENV !== 'production') {
-    if (params.itemsReordering && !canUseFeature) {
-      warnOnce(['MUI X: The items reordering feature requires the `itemsReordering` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ itemsReordering: true }}` to the `<RichTreeViewPro />`component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/']);
-    }
+  params
+}) => (0, _extends2.default)({}, params, {
+  itemsReordering: params.itemsReordering ?? false
+});
+useTreeViewItemsReordering.getInitialState = params => ({
+  itemsReordering: {
+    currentReorder: null,
+    isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
   }
-  return _extends({}, params, {
-    itemsReordering: canUseFeature ? params.itemsReordering ?? false : false
-  });
-};
-useTreeViewItemsReordering.getInitialState = () => ({
-  itemsReordering: null
 });
 useTreeViewItemsReordering.params = {
   itemsReordering: true,