@mui/x-tree-view-pro 7.12.0

package/build/modern/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/modern/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.js

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

package/build/modern/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/modern/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/modern/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;
+}

package/build/modern/themeAugmentation/index.js

@@ -0,0 +1,3 @@
+export * from './overrides';
+export * from './props';
+export * from './components';