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

The community edition of the MUI X Tree View components.

"use strict";
'use client';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TreeItemDragAndDropOverlay = TreeItemDragAndDropOverlay;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styles = require("@mui/material/styles");
var _createStyled = require("@mui/system/createStyled");
var _zeroStyled = require("../internals/zero-styled");
var _jsxRuntime = require("react/jsx-runtime");
const TreeItemDragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
  name: 'MuiTreeItemDragAndDropOverlay',
  slot: 'Root',
  shouldForwardProp: prop => (0, _createStyled.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})` : (0, _styles.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__*/(0, _jsxRuntime.jsx)(TreeItemDragAndDropOverlayRoot, (0, _extends2.default)({}, 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.default.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
  style: _propTypes.default.object
} : void 0;