@mui/x-tree-view/esm/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js

The community edition of the MUI X Tree View components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import PropTypes from 'prop-types';
import { alpha } from '@mui/material/styles';
import { shouldForwardProp } from '@mui/system/createStyled';
import { styled } from "../internals/zero-styled/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
const TreeItemDragAndDropOverlayRoot = styled('div', {
  name: 'MuiTreeItemDragAndDropOverlay',
  slot: 'Root',
  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'action'
})(({
  theme
}) => ({
  position: 'absolute',
  left: 0,
  display: 'flex',
  top: 0,
  bottom: 0,
  right: 0,
  pointerEvents: 'none',
  variants: [{
    props: {
      action: 'make-child'
    },
    style: {
      marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
      borderRadius: theme.shape.borderRadius,
      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.darkChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.dark, theme.palette.action.focusOpacity)
    }
  }, {
    props: {
      action: 'reorder-above'
    },
    style: {
      marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
      borderTop: `1px solid ${(theme.vars || theme).palette.action.active}`
    }
  }, {
    props: {
      action: 'reorder-below'
    },
    style: {
      marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
      borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`
    }
  }, {
    props: {
      action: 'move-to-parent'
    },
    style: {
      marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))',
      borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`
    }
  }]
}));
function TreeItemDragAndDropOverlay(props) {
  if (props.action == null) {
    return null;
  }
  return /*#__PURE__*/_jsx(TreeItemDragAndDropOverlayRoot, _extends({}, props));
}
process.env.NODE_ENV !== "production" ? TreeItemDragAndDropOverlay.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
  // ----------------------------------------------------------------------
  action: PropTypes.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
  style: PropTypes.object
} : void 0;
export { TreeItemDragAndDropOverlay };