@mui/x-tree-view-pro 7.12.0

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

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { useTreeViewContext, isTargetInDescendants } from '@mui/x-tree-view/internals';
+export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
+export const useTreeViewItemsReorderingItemPlugin = ({
+  props
+}) => {
+  const {
+    itemsReordering,
+    instance
+  } = useTreeViewContext();
+  const {
+    itemId
+  } = props;
+  const validActionsRef = React.useRef(null);
+  return {
+    propsEnhancers: {
+      root: ({
+        rootRefObject,
+        contentRefObject,
+        externalEventHandlers
+      }) => {
+        const draggable = instance.canItemBeDragged(itemId);
+        if (!draggable) {
+          return {};
+        }
+        const handleDragStart = event => {
+          externalEventHandlers.onDragStart?.(event);
+          if (event.defaultMuiPrevented || event.defaultPrevented) {
+            return;
+          }
+
+          // We don't use `event.currentTarget` here.
+          // This is to allow people to pass `onDragStart` to another element than the root.
+          if (isTargetInDescendants(event.target, rootRefObject.current)) {
+            return;
+          }
+
+          // Comment to show the children in the drag preview
+          // TODO: Improve the customization of the drag preview
+          event.dataTransfer.effectAllowed = 'move';
+          event.dataTransfer.setDragImage(contentRefObject.current, 0, 0);
+          const {
+            types
+          } = event.dataTransfer;
+          if (isAndroid() && !types.includes('text/plain') && !types.includes('text/uri-list')) {
+            event.dataTransfer.setData('text/plain', 'android-fallback');
+          }
+
+          // iOS requires a media type to be defined
+          event.dataTransfer.setData('application/mui-x', '');
+          instance.startDraggingItem(itemId);
+        };
+        const handleRootDragOver = event => {
+          externalEventHandlers.onDragOver?.(event);
+          if (event.defaultMuiPrevented) {
+            return;
+          }
+          event.preventDefault();
+        };
+        const handleRootDragEnd = event => {
+          externalEventHandlers.onDragEnd?.(event);
+          if (event.defaultMuiPrevented) {
+            return;
+          }
+          instance.stopDraggingItem(itemId);
+        };
+        return {
+          draggable: true,
+          onDragStart: handleDragStart,
+          onDragOver: handleRootDragOver,
+          onDragEnd: handleRootDragEnd
+        };
+      },
+      content: ({
+        externalEventHandlers,
+        contentRefObject
+      }) => {
+        const currentDrag = itemsReordering.currentDrag;
+        if (!currentDrag || currentDrag.draggedItemId === itemId) {
+          return {};
+        }
+        const handleDragOver = event => {
+          externalEventHandlers.onDragOver?.(event);
+          if (event.defaultMuiPrevented || validActionsRef.current == null) {
+            return;
+          }
+          const rect = event.target.getBoundingClientRect();
+          const y = event.clientY - rect.top;
+          const x = event.clientX - rect.left;
+          instance.setDragTargetItem({
+            itemId,
+            validActions: validActionsRef.current,
+            targetHeight: rect.height,
+            cursorY: y,
+            cursorX: x,
+            contentElement: contentRefObject.current
+          });
+        };
+        const handleDragEnter = event => {
+          externalEventHandlers.onDragEnter?.(event);
+          if (event.defaultMuiPrevented) {
+            return;
+          }
+          validActionsRef.current = instance.getDroppingTargetValidActions(itemId);
+        };
+        return {
+          onDragEnter: handleDragEnter,
+          onDragOver: handleDragOver
+        };
+      },
+      dragAndDropOverlay: () => {
+        const currentDrag = itemsReordering.currentDrag;
+        if (!currentDrag || currentDrag.targetItemId !== itemId || currentDrag.action == null) {
+          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,
+          style: {
+            '--TreeView-targetDepth': targetDepth
+          }
+        };
+      }
+    }
+  };
+};

package/build/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js

@@ -0,0 +1,193 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { warnOnce } from '@mui/x-tree-view/internals';
+import { chooseActionToApply, isAncestor, moveItemInTree } from './useTreeViewItemsReordering.utils';
+import { useTreeViewItemsReorderingItemPlugin } from './useTreeViewItemsReordering.itemPlugin';
+export const useTreeViewItemsReordering = ({
+  params,
+  instance,
+  state,
+  setState,
+  experimentalFeatures
+}) => {
+  const isItemsReorderingEnabled = params.itemsReordering && !!experimentalFeatures?.itemsReordering;
+  if (process.env.NODE_ENV !== 'production') {
+    if (params.itemsReordering && (!experimentalFeatures?.indentationAtItemLevel || !experimentalFeatures?.itemsReordering)) {
+      warnOnce(['MUI X: The items reordering feature requires the `indentationAtItemLevel` and `itemsReordering` experimental features to be enabled.', 'You can do it by passing `experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }}` to the `RichTreeViewPro` component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/']);
+    }
+  }
+  const canItemBeDragged = React.useCallback(itemId => {
+    if (!isItemsReorderingEnabled) {
+      return false;
+    }
+    const isItemReorderable = params.isItemReorderable;
+    if (isItemReorderable) {
+      return isItemReorderable(itemId);
+    }
+    return true;
+  }, [isItemsReorderingEnabled, params.isItemReorderable]);
+  const getDroppingTargetValidActions = React.useCallback(itemId => {
+    if (!state.itemsReordering) {
+      throw new Error('There is no ongoing reordering.');
+    }
+    if (itemId === state.itemsReordering.draggedItemId) {
+      return {};
+    }
+    const canMoveItemToNewPosition = params.canMoveItemToNewPosition;
+    const targetItemMeta = instance.getItemMeta(itemId);
+    const targetItemIndex = instance.getItemIndex(targetItemMeta.id);
+    const draggedItemMeta = instance.getItemMeta(state.itemsReordering.draggedItemId);
+    const draggedItemIndex = instance.getItemIndex(draggedItemMeta.id);
+    const oldPosition = {
+      parentId: draggedItemMeta.parentId,
+      index: draggedItemIndex
+    };
+    const checkIfPositionIsValid = positionAfterAction => {
+      let isValid;
+      // If the new position is equal to the old one, we don't want to show any dropping UI.
+      if (positionAfterAction.parentId === oldPosition.parentId && positionAfterAction.index === oldPosition.index) {
+        isValid = false;
+      } else if (canMoveItemToNewPosition) {
+        isValid = canMoveItemToNewPosition({
+          itemId,
+          oldPosition,
+          newPosition: positionAfterAction
+        });
+      } else {
+        isValid = true;
+      }
+      return isValid;
+    };
+    const positionsAfterAction = {
+      'make-child': {
+        parentId: targetItemMeta.id,
+        index: 0
+      },
+      'reorder-above': {
+        parentId: targetItemMeta.parentId,
+        index: targetItemMeta.parentId === draggedItemMeta.parentId && targetItemIndex > draggedItemIndex ? targetItemIndex - 1 : targetItemIndex
+      },
+      'reorder-below': targetItemMeta.expandable ? null : {
+        parentId: targetItemMeta.parentId,
+        index: targetItemMeta.parentId === draggedItemMeta.parentId && targetItemIndex > draggedItemIndex ? targetItemIndex : targetItemIndex + 1
+      },
+      'move-to-parent': targetItemMeta.parentId == null ? null : {
+        parentId: targetItemMeta.parentId,
+        index: instance.getItemOrderedChildrenIds(targetItemMeta.parentId).length
+      }
+    };
+    const validActions = {};
+    Object.keys(positionsAfterAction).forEach(action => {
+      const positionAfterAction = positionsAfterAction[action];
+      if (positionAfterAction != null && checkIfPositionIsValid(positionAfterAction)) {
+        validActions[action] = positionAfterAction;
+      }
+    });
+    return validActions;
+  }, [instance, state.itemsReordering, params.canMoveItemToNewPosition]);
+  const startDraggingItem = React.useCallback(itemId => {
+    setState(prevState => _extends({}, prevState, {
+      itemsReordering: {
+        targetItemId: itemId,
+        draggedItemId: itemId,
+        action: null,
+        newPosition: null
+      }
+    }));
+  }, [setState]);
+  const stopDraggingItem = React.useCallback(itemId => {
+    if (state.itemsReordering == null || state.itemsReordering.draggedItemId !== itemId) {
+      return;
+    }
+    if (state.itemsReordering.draggedItemId === state.itemsReordering.targetItemId || state.itemsReordering.action == null || state.itemsReordering.newPosition == null) {
+      setState(prevState => _extends({}, prevState, {
+        itemsReordering: null
+      }));
+      return;
+    }
+    const draggedItemMeta = instance.getItemMeta(state.itemsReordering.draggedItemId);
+    const oldPosition = {
+      parentId: draggedItemMeta.parentId,
+      index: instance.getItemIndex(draggedItemMeta.id)
+    };
+    const newPosition = state.itemsReordering.newPosition;
+    setState(prevState => _extends({}, prevState, {
+      itemsReordering: null,
+      items: moveItemInTree({
+        itemToMoveId: itemId,
+        newPosition,
+        oldPosition,
+        prevState: prevState.items
+      })
+    }));
+    const onItemPositionChange = params.onItemPositionChange;
+    onItemPositionChange?.({
+      itemId,
+      newPosition,
+      oldPosition
+    });
+  }, [setState, state.itemsReordering, instance, params.onItemPositionChange]);
+  const setDragTargetItem = React.useCallback(({
+    itemId,
+    validActions,
+    targetHeight,
+    cursorY,
+    cursorX,
+    contentElement
+  }) => {
+    setState(prevState => {
+      const prevSubState = prevState.itemsReordering;
+      if (prevSubState == null || isAncestor(instance, itemId, prevSubState.draggedItemId)) {
+        return prevState;
+      }
+      const action = chooseActionToApply({
+        itemChildrenIndentation: params.itemChildrenIndentation,
+        validActions,
+        targetHeight,
+        targetDepth: prevState.items.itemMetaMap[itemId].depth,
+        cursorY,
+        cursorX,
+        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) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        itemsReordering: _extends({}, prevSubState, {
+          targetItemId: itemId,
+          newPosition,
+          action
+        })
+      });
+    });
+  }, [instance, setState, params.itemChildrenIndentation]);
+  return {
+    instance: {
+      canItemBeDragged,
+      getDroppingTargetValidActions,
+      startDraggingItem,
+      stopDraggingItem,
+      setDragTargetItem
+    },
+    contextValue: {
+      itemsReordering: {
+        enabled: isItemsReorderingEnabled,
+        currentDrag: state.itemsReordering
+      }
+    }
+  };
+};
+useTreeViewItemsReordering.itemPlugin = useTreeViewItemsReorderingItemPlugin;
+useTreeViewItemsReordering.getDefaultizedParams = params => _extends({}, params, {
+  itemsReordering: params.itemsReordering ?? false
+});
+useTreeViewItemsReordering.getInitialState = () => ({
+  itemsReordering: null
+});
+useTreeViewItemsReordering.params = {
+  itemsReordering: true,
+  isItemReorderable: true,
+  canMoveItemToNewPosition: true,
+  onItemPositionChange: true
+};

package/build/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { DefaultizedProps, TreeViewPluginSignature, UseTreeViewItemsSignature, MuiCancellableEventHandler } from '@mui/x-tree-view/internals';
+import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
+import { TreeItem2DragAndDropOverlayProps } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
+export interface UseTreeViewItemsReorderingInstance {
+    /**
+     * Check if a given item can be dragged.
+     * @param {TreeViewItemId} itemId The id of the item to check.
+     * @returns {boolean} `true` if the item can be dragged, `false` otherwise.
+     */
+    canItemBeDragged: (itemId: TreeViewItemId) => boolean;
+    /**
+     * Get the valid reordering action if a given item is the target of the ongoing reordering.
+     * @param {TreeViewItemId} itemId The id of the item to get the action of.
+     * @returns {TreeViewItemItemReorderingValidActions} The valid actions for the item.
+     */
+    getDroppingTargetValidActions: (itemId: TreeViewItemId) => TreeViewItemItemReorderingValidActions;
+    /**
+     * Start a reordering for the given item.
+     * @param {TreeViewItemId} itemId The id of the item to start the reordering for.
+     */
+    startDraggingItem: (itemId: TreeViewItemId) => void;
+    /**
+     * Stop the reordering of a given item.
+     * @param {TreeViewItemId} itemId The id of the item to stop the reordering for.
+     */
+    stopDraggingItem: (itemId: TreeViewItemId) => void;
+    /**
+     * Set the new target item for the ongoing reordering.
+     * The action will be determined based on the position of the cursor inside the target and the valid actions for this target.
+     * @param {object} params The params describing the new target item.
+     * @param {TreeViewItemId} params.itemId The id of the new target item.
+     * @param {TreeViewItemItemReorderingValidActions} params.validActions The valid actions for the new target item.
+     * @param {number} params.targetHeight The height of the target item.
+     * @param {number} params.cursorY The Y coordinate of the mouse cursor.
+     * @param {number} params.cursorX The X coordinate of the mouse cursor.
+     * @param {HTMLDivElement} params.contentElement The DOM element rendered for the content slot.
+     */
+    setDragTargetItem: (params: {
+        itemId: TreeViewItemId;
+        validActions: TreeViewItemItemReorderingValidActions;
+        targetHeight: number;
+        cursorY: number;
+        cursorX: number;
+        contentElement: HTMLDivElement;
+    }) => void;
+}
+export interface TreeViewItemReorderPosition {
+    parentId: string | null;
+    index: number;
+}
+export type TreeViewItemItemReorderingValidActions = {
+    [key in TreeViewItemsReorderingAction]?: TreeViewItemReorderPosition;
+};
+export interface UseTreeViewItemsReorderingParameters {
+    /**
+     * If `true`, the reordering of items is enabled.
+     * Make sure to also enable the `itemsReordering` experimental feature:
+     * `<RichTreeViewPro experimentalFeatures={{ itemsReordering: true }} itemsReordering />`.
+     * @default false
+     */
+    itemsReordering?: boolean;
+    /**
+     * Used to determine if a given item can be reordered.
+     * @param {string} itemId The id of the item to check.
+     * @returns {boolean} `true` if the item can be reordered.
+     * @default () => true
+     */
+    isItemReorderable?: (itemId: string) => boolean;
+    /**
+     * Used to determine if a given item can move to some new position.
+     * @param {object} params The params describing the item re-ordering.
+     * @param {string} params.itemId The id of the item to check.
+     * @param {TreeViewItemReorderPosition} params.oldPosition The old position of the item.
+     * @param {TreeViewItemReorderPosition} params.newPosition The new position of the item.
+     * @returns {boolean} `true` if the item can move to the new position.
+     */
+    canMoveItemToNewPosition?: (params: {
+        itemId: string;
+        oldPosition: TreeViewItemReorderPosition;
+        newPosition: TreeViewItemReorderPosition;
+    }) => boolean;
+    /**
+     * Callback fired when a tree item is moved in the tree.
+     * @param {object} params The params describing the item re-ordering.
+     * @param {string} params.itemId The id of the item moved.
+     * @param {TreeViewItemReorderPosition} params.oldPosition The old position of the item.
+     * @param {TreeViewItemReorderPosition} params.newPosition The new position of the item.
+     */
+    onItemPositionChange?: (params: {
+        itemId: string;
+        oldPosition: TreeViewItemReorderPosition;
+        newPosition: TreeViewItemReorderPosition;
+    }) => void;
+}
+export type UseTreeViewItemsReorderingDefaultizedParameters = DefaultizedProps<UseTreeViewItemsReorderingParameters, 'itemsReordering'>;
+export interface UseTreeViewItemsReorderingState {
+    itemsReordering: {
+        draggedItemId: string;
+        targetItemId: string;
+        newPosition: TreeViewItemReorderPosition | null;
+        action: TreeViewItemsReorderingAction | null;
+    } | null;
+}
+interface UseTreeViewItemsReorderingContextValue {
+    itemsReordering: {
+        enabled: boolean;
+        currentDrag: UseTreeViewItemsReorderingState['itemsReordering'];
+    };
+}
+export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{
+    params: UseTreeViewItemsReorderingParameters;
+    defaultizedParams: UseTreeViewItemsReorderingDefaultizedParameters;
+    instance: UseTreeViewItemsReorderingInstance;
+    state: UseTreeViewItemsReorderingState;
+    contextValue: UseTreeViewItemsReorderingContextValue;
+    experimentalFeatures: 'itemsReordering';
+    dependencies: [UseTreeViewItemsSignature];
+}>;
+export interface UseTreeItem2RootSlotPropsFromItemsReordering {
+    draggable?: true;
+    onDragStart?: MuiCancellableEventHandler<React.DragEvent>;
+    onDragOver?: MuiCancellableEventHandler<React.DragEvent>;
+    onDragEnd?: MuiCancellableEventHandler<React.DragEvent>;
+}
+export interface UseTreeItem2ContentSlotPropsFromItemsReordering {
+    onDragEnter?: MuiCancellableEventHandler<React.DragEvent>;
+    onDragOver?: MuiCancellableEventHandler<React.DragEvent>;
+}
+export interface UseTreeItem2DragAndDropOverlaySlotPropsFromItemsReordering extends TreeItem2DragAndDropOverlayProps {
+}
+declare module '@mui/x-tree-view/useTreeItem2' {
+    interface UseTreeItem2RootSlotOwnProps extends UseTreeItem2RootSlotPropsFromItemsReordering {
+    }
+    interface UseTreeItem2ContentSlotOwnProps extends UseTreeItem2ContentSlotPropsFromItemsReordering {
+    }
+    interface UseTreeItem2DragAndDropOverlaySlotOwnProps extends UseTreeItem2DragAndDropOverlaySlotPropsFromItemsReordering {
+    }
+}
+export {};

package/build/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.js

@@ -0,0 +1 @@
+export {};

package/build/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts

@@ -0,0 +1,26 @@
+import { TreeViewInstance, UseTreeViewItemsSignature, UseTreeViewItemsState } from '@mui/x-tree-view/internals';
+import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
+import { TreeViewItemItemReorderingValidActions, TreeViewItemReorderPosition } from './useTreeViewItemsReordering.types';
+/**
+ * Checks if the item with the id itemIdB is an ancestor of the item with the id itemIdA.
+ */
+export declare const isAncestor: (instance: TreeViewInstance<[UseTreeViewItemsSignature]>, itemIdA: string, itemIdB: string) => boolean;
+interface GetNewPositionParams {
+    itemChildrenIndentation: string | number;
+    validActions: TreeViewItemItemReorderingValidActions;
+    targetHeight: number;
+    targetDepth: number;
+    cursorY: number;
+    cursorX: number;
+    contentElement: HTMLDivElement;
+}
+export declare const chooseActionToApply: ({ itemChildrenIndentation, validActions, targetHeight, targetDepth, cursorX, cursorY, contentElement, }: GetNewPositionParams) => TreeViewItemsReorderingAction | null;
+export declare const moveItemInTree: <R extends {
+    children?: R[];
+}>({ itemToMoveId, oldPosition, newPosition, prevState, }: {
+    itemToMoveId: TreeViewItemId;
+    oldPosition: TreeViewItemReorderPosition;
+    newPosition: TreeViewItemReorderPosition;
+    prevState: UseTreeViewItemsState<R>["items"];
+}) => UseTreeViewItemsState<R>["items"];
+export {};

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

@@ -0,0 +1,150 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } 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);
+  if (itemMetaA.parentId === itemIdB) {
+    return true;
+  }
+  if (itemMetaA.parentId == null) {
+    return false;
+  }
+  return isAncestor(instance, itemMetaA.parentId, itemIdB);
+};
+
+/**
+ * Transforms a CSS string `itemChildrenIndentation` into a number representing the indentation in number.
+ * @param {string | null} itemChildrenIndentation The indentation as passed to the `itemChildrenIndentation` prop.
+ * @param {HTMLElement} contentElement The DOM element to which the indentation will be applied.
+ */
+const parseItemChildrenIndentation = (itemChildrenIndentation, contentElement) => {
+  if (typeof itemChildrenIndentation === 'number') {
+    return itemChildrenIndentation;
+  }
+  const pixelExec = /^(\d.+)(px)$/.exec(itemChildrenIndentation);
+  if (pixelExec) {
+    return parseFloat(pixelExec[1]);
+  }
+
+  // If the format is neither `px` nor a number, we need to measure the indentation using an actual DOM element.
+  const tempElement = document.createElement('div');
+  tempElement.style.width = itemChildrenIndentation;
+  tempElement.style.position = 'absolute';
+  contentElement.appendChild(tempElement);
+  const value = tempElement.offsetWidth;
+  contentElement.removeChild(tempElement);
+  return value;
+};
+export const chooseActionToApply = ({
+  itemChildrenIndentation,
+  validActions,
+  targetHeight,
+  targetDepth,
+  cursorX,
+  cursorY,
+  contentElement
+}) => {
+  let action;
+  const itemChildrenIndentationPx = parseItemChildrenIndentation(itemChildrenIndentation, contentElement);
+  // If we can move the item to the parent of the target, then we allocate the left offset to this action
+  // Support moving to other ancestors
+  if (validActions['move-to-parent'] && cursorX < itemChildrenIndentationPx * targetDepth) {
+    action = 'move-to-parent';
+  }
+
+  // If we can move the item inside the target, then we have the following split:
+  // - the upper quarter of the target moves it above
+  // - the lower quarter of the target moves it below
+  // - the inner half makes it a child
+  else if (validActions['make-child']) {
+    if (validActions['reorder-above'] && cursorY < 1 / 4 * targetHeight) {
+      action = 'reorder-above';
+    } else if (validActions['reorder-below'] && cursorY > 3 / 4 * targetHeight) {
+      action = 'reorder-below';
+    } else {
+      action = 'make-child';
+    }
+  }
+  // If we can't move the item inside the target, then we have the following split:
+  // - the upper half of the target moves it above
+  // - the lower half of the target moves it below
+  else {
+    // eslint-disable-next-line no-lonely-if
+    if (validActions['reorder-above'] && cursorY < 1 / 2 * targetHeight) {
+      action = 'reorder-above';
+    } else if (validActions['reorder-below'] && cursorY >= 1 / 2 * targetHeight) {
+      action = 'reorder-below';
+    } else {
+      action = null;
+    }
+  }
+  return action;
+};
+export const moveItemInTree = ({
+  itemToMoveId,
+  oldPosition,
+  newPosition,
+  prevState
+}) => {
+  const itemToMoveMeta = prevState.itemMetaMap[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);
+  if (oldParentId === newParentId) {
+    const updatedChildren = [...itemOrderedChildrenIds[oldParentId]];
+    updatedChildren.splice(oldPosition.index, 1);
+    updatedChildren.splice(newPosition.index, 0, itemToMoveId);
+    itemOrderedChildrenIds[itemToMoveMeta.parentId ?? TREE_VIEW_ROOT_PARENT_ID] = updatedChildren;
+  } else {
+    const updatedOldParentChildren = [...itemOrderedChildrenIds[oldParentId]];
+    updatedOldParentChildren.splice(oldPosition.index, 1);
+    itemOrderedChildrenIds[oldParentId] = updatedOldParentChildren;
+    const updatedNewParentChildren = [...(itemOrderedChildrenIds[newParentId] ?? [])];
+    updatedNewParentChildren.splice(newPosition.index, 0, itemToMoveId);
+    itemOrderedChildrenIds[newParentId] = updatedNewParentChildren;
+  }
+
+  // 2. Update the `itemChildrenIndexes`
+  const itemChildrenIndexes = _extends({}, prevState.itemChildrenIndexes);
+  itemChildrenIndexes[oldParentId] = buildSiblingIndexes(itemOrderedChildrenIds[oldParentId]);
+  if (newParentId !== oldParentId) {
+    itemChildrenIndexes[newParentId] = buildSiblingIndexes(itemOrderedChildrenIds[newParentId]);
+  }
+
+  // 3. Update the `itemMetaMap`
+  const itemMetaMap = _extends({}, prevState.itemMetaMap);
+
+  // 3.1 Update the `expandable` property of the old and the new parent
+  if (oldParentId !== TREE_VIEW_ROOT_PARENT_ID && oldParentId !== newParentId) {
+    itemMetaMap[oldParentId].expandable = itemOrderedChildrenIds[oldParentId].length > 0;
+  }
+  if (newParentId !== TREE_VIEW_ROOT_PARENT_ID && newParentId !== oldParentId) {
+    itemMetaMap[newParentId].expandable = itemOrderedChildrenIds[newParentId].length > 0;
+  }
+
+  // 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, {
+    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], {
+      depth
+    });
+    itemOrderedChildrenIds[itemId]?.forEach(childId => updateItemDepth(childId, depth + 1));
+  };
+  itemOrderedChildrenIds[itemToMoveId]?.forEach(childId => updateItemDepth(childId, itemToMoveDepth + 1));
+  return _extends({}, prevState, {
+    itemOrderedChildrenIds,
+    itemChildrenIndexes,
+    itemMetaMap
+  });
+};

package/build/internals/utils/releaseInfo.d.ts

@@ -0,0 +1 @@
+export declare const getReleaseInfo: () => any;

package/build/internals/utils/releaseInfo.js

@@ -0,0 +1,13 @@
+import { ponyfillGlobal } from '@mui/utils';
+export const getReleaseInfo = () => {
+  const releaseInfo = "MTcyMjQ2MzIwMDAwMA==";
+  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
+    if (releaseInfo === '__RELEASE' + '_INFO__') {
+      // eslint-disable-next-line no-underscore-dangle
+      return ponyfillGlobal.__MUI_RELEASE_INFO__;
+    }
+  }
+  return releaseInfo;
+};

package/build/internals/zero-styled/index.d.ts

@@ -0,0 +1,3 @@
+import { useThemeProps } from '@mui/material/styles';
+export { styled } from '@mui/material/styles';
+export declare function createUseThemeProps(name: string): typeof useThemeProps;

package/build/internals/zero-styled/index.js

@@ -0,0 +1,7 @@
+import { useThemeProps } from '@mui/material/styles';
+export { styled } from '@mui/material/styles';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function createUseThemeProps(name) {
+  return useThemeProps;
+}