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

package/modern/RichTreeViewPro/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./RichTreeViewPro.js";
+export * from "./richTreeViewProClasses.js";
+export type { RichTreeViewProProps, RichTreeViewProPropsBase, RichTreeViewProSlots, RichTreeViewProSlotProps } from './RichTreeViewPro.types';

package/modern/RichTreeViewPro/richTreeViewProClasses.d.ts

@@ -0,0 +1,7 @@
+export interface RichTreeViewProClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type RichTreeViewProClassKey = keyof RichTreeViewProClasses;
+export declare function getRichTreeViewProUtilityClass(slot: string): string;
+export declare const richTreeViewProClasses: RichTreeViewProClasses;

package/modern/index.d.ts

@@ -0,0 +1,12 @@
+export * from '@mui/x-tree-view/SimpleTreeView';
+export * from "./RichTreeViewPro/index.js";
+export * from '@mui/x-tree-view/TreeItem';
+export * from '@mui/x-tree-view/useTreeItem';
+export * from '@mui/x-tree-view/TreeItemIcon';
+export * from '@mui/x-tree-view/TreeItemProvider';
+export * from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
+export * from '@mui/x-tree-view/TreeItemLabelInput';
+export { unstable_resetCleanupTracking } from '@mui/x-tree-view/internals';
+export * from '@mui/x-tree-view/models';
+export * from '@mui/x-tree-view/icons';
+export * from '@mui/x-tree-view/hooks';

package/modern/index.js

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

package/modern/internals/index.d.ts

@@ -0,0 +1 @@
+export { UseTreeViewItemsReorderingSignature } from "./plugins/useTreeViewItemsReordering/index.js";

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

@@ -0,0 +1,2 @@
+export { useTreeViewItemsReordering } from "./useTreeViewItemsReordering.js";
+export type { UseTreeViewItemsReorderingSignature, UseTreeViewItemsReorderingParameters, UseTreeViewItemsReorderingDefaultizedParameters, TreeViewItemReorderPosition } from './useTreeViewItemsReordering.types';

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

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from '@mui/x-tree-view/internals';
+import { UseTreeViewItemsReorderingSignature } from "./useTreeViewItemsReordering.types.js";
+export declare const useTreeViewItemsReordering: TreeViewPlugin<UseTreeViewItemsReorderingSignature>;

package/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewItemPlugin } from '@mui/x-tree-view/internals';
+export declare const isAndroid: () => boolean;
+export declare const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin;

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

@@ -1,21 +1,21 @@
 import * as React from 'react';
 import { useTreeViewContext, isTargetInDescendants, useSelector } from '@mui/x-tree-view/internals';
-import { selectorItemsReorderingDraggedItemProperties, selectorItemsReorderingIsValidTarget } from "./useTreeViewItemsReordering.selectors.js";
+import { selectorCanItemBeReordered, selectorDraggedItemProperties, selectorIsItemValidReorderingTarget } from "./useTreeViewItemsReordering.selectors.js";
 export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
 export const useTreeViewItemsReorderingItemPlugin = ({
   props
 }) => {
   const {
     instance,
-    store,
-    itemsReordering
+    store
   } = useTreeViewContext();
   const {
     itemId
   } = props;
   const validActionsRef = React.useRef(null);
-  const draggedItemProperties = useSelector(store, selectorItemsReorderingDraggedItemProperties, itemId);
-  const isValidTarget = useSelector(store, selectorItemsReorderingIsValidTarget, itemId);
+  const draggedItemProperties = useSelector(store, selectorDraggedItemProperties, itemId);
+  const canItemBeReordered = useSelector(store, selectorCanItemBeReordered);
+  const isValidTarget = useSelector(store, selectorIsItemValidReorderingTarget, itemId);
   return {
     propsEnhancers: {
       root: ({
@@ -23,7 +23,7 @@ export const useTreeViewItemsReorderingItemPlugin = ({
         contentRefObject,
         externalEventHandlers
       }) => {
-        if (!itemsReordering.enabled || itemsReordering.isItemReorderable && !itemsReordering.isItemReorderable(itemId)) {
+        if (!canItemBeReordered) {
           return {};
         }
         const handleDragStart = event => {

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

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 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";
+import { selectorCurrentItemReordering } from "./useTreeViewItemsReordering.selectors.js";
 export const useTreeViewItemsReordering = ({
   params,
   store
@@ -20,18 +20,19 @@ export const useTreeViewItemsReordering = ({
     return true;
   }, [params.itemsReordering, params.isItemReorderable]);
   const getDroppingTargetValidActions = React.useCallback(itemId => {
-    const itemsReordering = selectorItemsReordering(store.value);
-    if (!itemsReordering) {
+    const currentReorder = 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 draggedItemMeta = selectorItemMeta(store.value, currentReorder.draggedItemId);
     const draggedItemIndex = selectorItemIndex(store.value, draggedItemMeta.id);
+    const isTargetLastSibling = targetItemIndex === selectorItemOrderedChildrenIds(store.value, targetItemMeta.parentId).length - 1;
     const oldPosition = {
       parentId: draggedItemMeta.parentId,
       index: draggedItemIndex
@@ -43,7 +44,7 @@ export const useTreeViewItemsReordering = ({
         isValid = false;
       } else if (canMoveItemToNewPosition) {
         isValid = canMoveItemToNewPosition({
-          itemId: itemsReordering.draggedItemId,
+          itemId: currentReorder.draggedItemId,
           oldPosition,
           newPosition: positionAfterAction
         });
@@ -61,10 +62,10 @@ 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
@@ -81,33 +82,39 @@ export const useTreeViewItemsReordering = ({
   }, [store, params.canMoveItemToNewPosition]);
   const startDraggingItem = React.useCallback(itemId => {
     store.update(prevState => _extends({}, prevState, {
-      itemsReordering: {
-        targetItemId: itemId,
-        draggedItemId: itemId,
-        action: null,
-        newPosition: null
-      }
+      itemsReordering: _extends({}, 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 = selectorCurrentItemReordering(store.value);
+    if (currentReorder == null || currentReorder.draggedItemId !== itemId) {
       return;
     }
-    if (itemsReordering.draggedItemId === itemsReordering.targetItemId || itemsReordering.action == null || itemsReordering.newPosition == null) {
+    if (currentReorder.draggedItemId === currentReorder.targetItemId || currentReorder.action == null || currentReorder.newPosition == null) {
       store.update(prevState => _extends({}, prevState, {
-        itemsReordering: null
+        itemsReordering: _extends({}, prevState.itemsReordering, {
+          currentReorder: null
+        })
       }));
       return;
     }
-    const draggedItemMeta = selectorItemMeta(store.value, itemsReordering.draggedItemId);
+    const draggedItemMeta = selectorItemMeta(store.value, currentReorder.draggedItemId);
     const oldPosition = {
       parentId: draggedItemMeta.parentId,
       index: selectorItemIndex(store.value, draggedItemMeta.id)
     };
-    const newPosition = itemsReordering.newPosition;
+    const newPosition = currentReorder.newPosition;
     store.update(prevState => _extends({}, prevState, {
-      itemsReordering: null,
+      itemsReordering: _extends({}, prevState.itemsReordering, {
+        currentReorder: null
+      }),
       items: moveItemInTree({
         itemToMoveId: itemId,
         newPosition,
@@ -131,8 +138,8 @@ 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 || isAncestor(store, itemId, prevItemReorder.draggedItemId)) {
         return prevState;
       }
       const action = chooseActionToApply({
@@ -145,24 +152,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
+        itemsReordering: _extends({}, prevState.itemsReordering, {
+          currentReorder: _extends({}, prevItemReorder, {
+            targetItemId: itemId,
+            newPosition,
+            action
+          })
         })
       });
     });
   }, [store, params.itemChildrenIndentation]);
-  const pluginContextValue = React.useMemo(() => ({
-    itemsReordering: {
-      enabled: params.itemsReordering,
-      isItemReorderable: params.isItemReorderable
-    }
-  }), [params.itemsReordering, params.isItemReorderable]);
+  useEnhancedEffect(() => {
+    store.update(prevState => _extends({}, prevState, {
+      itemsReordering: _extends({}, prevState.itemsReordering, {
+        isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
+      })
+    }));
+  }, [store, params.itemsReordering, params.isItemReorderable]);
   return {
     instance: {
       canItemBeDragged,
@@ -170,27 +180,20 @@ export const useTreeViewItemsReordering = ({
       startDraggingItem,
       stopDraggingItem,
       setDragTargetItem
-    },
-    contextValue: pluginContextValue
+    }
   };
 };
 useTreeViewItemsReordering.itemPlugin = 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
+}) => _extends({}, 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,