@mui/x-tree-view-pro 7.12.0 → 7.12.1

package/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts

@@ -1,160 +0,0 @@
-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 {}
-}

package/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.ts

@@ -1,199 +0,0 @@
-import {
-  TreeViewInstance,
-  UseTreeViewItemsSignature,
-  UseTreeViewItemsState,
-  buildSiblingIndexes,
-  TREE_VIEW_ROOT_PARENT_ID,
-} 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 const isAncestor = (
-  instance: TreeViewInstance<[UseTreeViewItemsSignature]>,
-  itemIdA: string,
-  itemIdB: string,
-): boolean => {
-  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: string | number,
-  contentElement: HTMLElement,
-) => {
-  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;
-};
-
-interface GetNewPositionParams {
-  itemChildrenIndentation: string | number;
-  validActions: TreeViewItemItemReorderingValidActions;
-  targetHeight: number;
-  targetDepth: number;
-  cursorY: number;
-  cursorX: number;
-  contentElement: HTMLDivElement;
-}
-
-export const chooseActionToApply = ({
-  itemChildrenIndentation,
-  validActions,
-  targetHeight,
-  targetDepth,
-  cursorX,
-  cursorY,
-  contentElement,
-}: GetNewPositionParams) => {
-  let action: TreeViewItemsReorderingAction | null;
-
-  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 = <R extends { children?: R[] }>({
-  itemToMoveId,
-  oldPosition,
-  newPosition,
-  prevState,
-}: {
-  itemToMoveId: TreeViewItemId;
-  oldPosition: TreeViewItemReorderPosition;
-  newPosition: TreeViewItemReorderPosition;
-  prevState: UseTreeViewItemsState<R>['items'];
-}): UseTreeViewItemsState<R>['items'] => {
-  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 = { ...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 = { ...prevState.itemChildrenIndexes };
-  itemChildrenIndexes[oldParentId] = buildSiblingIndexes(itemOrderedChildrenIds[oldParentId]);
-  if (newParentId !== oldParentId) {
-    itemChildrenIndexes[newParentId] = buildSiblingIndexes(itemOrderedChildrenIds[newParentId]);
-  }
-
-  // 3. Update the `itemMetaMap`
-  const itemMetaMap = { ...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] = {
-    ...itemToMoveMeta,
-    parentId: newPosition.parentId,
-    depth: itemToMoveDepth,
-  };
-
-  // 3.3 Update the depth of all the children of the item to move
-  const updateItemDepth = (itemId: string, depth: number) => {
-    itemMetaMap[itemId] = { ...itemMetaMap[itemId], depth };
-    itemOrderedChildrenIds[itemId]?.forEach((childId) => updateItemDepth(childId, depth + 1));
-  };
-  itemOrderedChildrenIds[itemToMoveId]?.forEach((childId) =>
-    updateItemDepth(childId, itemToMoveDepth + 1),
-  );
-
-  return {
-    ...prevState,
-    itemOrderedChildrenIds,
-    itemChildrenIndexes,
-    itemMetaMap,
-  };
-};

package/src/internals/utils/releaseInfo.ts

@@ -1,15 +0,0 @@
-import { ponyfillGlobal } from '@mui/utils';
-
-export const getReleaseInfo = () => {
-  const releaseInfo = '__RELEASE_INFO__';
-  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/src/internals/zero-styled/index.ts

@@ -1,8 +0,0 @@
-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: string) {
-  return useThemeProps;
-}

package/src/themeAugmentation/components.d.ts

@@ -1,13 +0,0 @@
-import { ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material/styles';
-
-export interface TreeViewComponents<Theme = unknown> {
-  MuiRichTreeViewPro?: {
-    defaultProps?: ComponentsProps['MuiRichTreeViewPro'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiRichTreeViewPro'];
-    variants?: ComponentsVariants<Theme>['MuiRichTreeViewPro'];
-  };
-}
-
-declare module '@mui/material/styles' {
-  interface Components<Theme = unknown> extends TreeViewComponents<Theme> {}
-}

package/src/themeAugmentation/index.js

@@ -1 +0,0 @@
-// Prefer to use `import type {} from '@mui/x-tree-view-pro/themeAugmentation';` instead to avoid importing an empty file.

package/src/themeAugmentation/index.ts

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

package/src/themeAugmentation/overrides.d.ts

@@ -1,13 +0,0 @@
-import { RichTreeViewProClassKey } from '../RichTreeViewPro';
-
-// prettier-ignore
-export interface TreeViewComponentNameToClassKey {
-  MuiRichTreeViewPro: RichTreeViewProClassKey;
-}
-
-declare module '@mui/material/styles' {
-  interface ComponentNameToClassKey extends TreeViewComponentNameToClassKey {}
-}
-
-// disable automatic export
-export {};

package/src/themeAugmentation/props.d.ts

@@ -1,12 +0,0 @@
-import { RichTreeViewProProps } from '../RichTreeViewPro';
-
-export interface TreeViewComponentsPropsList {
-  MuiRichTreeViewPro: RichTreeViewProProps<any, any>;
-}
-
-declare module '@mui/material/styles' {
-  interface ComponentsPropsList extends TreeViewComponentsPropsList {}
-}
-
-// disable automatic export
-export {};

package/src/themeAugmentation/themeAugmentation.spec.ts

@@ -1,26 +0,0 @@
-import { createTheme } from '@mui/material/styles';
-import { richTreeViewProClasses } from '../RichTreeViewPro';
-
-createTheme({
-  components: {
-    MuiRichTreeViewPro: {
-      defaultProps: {
-        defaultExpandedItems: ['root'],
-        // @ts-expect-error invalid MuiRichTreeViewPro prop
-        someRandomProp: true,
-      },
-      styleOverrides: {
-        root: {
-          backgroundColor: 'red',
-          [`.${richTreeViewProClasses.root}`]: {
-            backgroundColor: 'green',
-          },
-        },
-        // @ts-expect-error invalid MuiRichTreeViewPro class key
-        main: {
-          backgroundColor: 'blue',
-        },
-      },
-    },
-  },
-});

package/tsconfig.build.json

@@ -1,21 +0,0 @@
-{
-  // This config is for emitting declarations (.d.ts) only
-  // Actual .ts source files are transpiled via babel
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "composite": true,
-    "declaration": true,
-    "noEmit": false,
-    "emitDeclarationOnly": true,
-    "outDir": "build",
-    "rootDir": "./src",
-    "types": ["node", "@mui/material/themeCssVarsAugmentation"]
-  },
-  "references": [
-    { "path": "../x-internals/tsconfig.build.json" },
-    { "path": "../x-tree-view/tsconfig.build.json" },
-    { "path": "../x-license/tsconfig.build.json" }
-  ],
-  "include": ["src/**/*.ts*"],
-  "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*", "src/tests/**/*"]
-}