@mui/x-data-grid-premium/components/resizablePanel/ResizablePanelHandle.js

The Premium plan edition of the MUI X Data Grid Components.

"use strict";
'use client';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ResizablePanelHandle = ResizablePanelHandle;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _styles = require("@mui/material/styles");
var _internals = require("@mui/x-data-grid-pro/internals");
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _clsx = _interopRequireDefault(require("clsx"));
var _useResize = require("../../hooks/utils/useResize");
var _ResizablePanelContext = require("./ResizablePanelContext");
var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["className", "children"];
const useUtilityClasses = ownerState => {
  const {
    classes,
    direction
  } = ownerState;
  const slots = {
    root: ['resizablePanelHandle', `resizablePanelHandle--${direction}`]
  };
  return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
};
const ResizablePanelHandleRoot = (0, _styles.styled)('div', {
  name: 'MuiDataGrid',
  slot: 'ResizablePanelHandle',
  overridesResolver: (props, styles) => [{
    [`&.${_xDataGridPro.gridClasses['resizablePanelHandle--horizontal']}`]: styles['resizablePanelHandle--horizontal']
  }, {
    [`&.${_xDataGridPro.gridClasses['resizablePanelHandle--vertical']}`]: styles['resizablePanelHandle--vertical']
  }, styles.resizablePanelHandle]
})({
  position: 'absolute',
  zIndex: 3,
  top: 0,
  left: 0,
  userSelect: 'none',
  transition: _internals.vars.transition(['border-color'], {
    duration: _internals.vars.transitions.duration.short,
    easing: _internals.vars.transitions.easing.easeInOut
  }),
  '&:hover': {
    borderWidth: 2,
    borderColor: _internals.vars.colors.interactive.selected
  },
  variants: [{
    props: {
      direction: 'horizontal'
    },
    style: {
      height: '100%',
      width: 8,
      cursor: 'ew-resize',
      borderLeft: `1px solid ${_internals.vars.colors.border.base}`,
      touchAction: 'pan-x'
    }
  }, {
    props: {
      direction: 'vertical'
    },
    style: {
      width: '100%',
      height: 8,
      cursor: 'ns-resize',
      borderTop: `1px solid ${_internals.vars.colors.border.base}`,
      touchAction: 'pan-y'
    }
  }]
});
function ResizablePanelHandle(props) {
  const {
      className
    } = props,
    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
  const {
    rootRef,
    direction
  } = (0, _ResizablePanelContext.useResizablePanelContext)();
  const rootProps = (0, _useGridRootProps.useGridRootProps)();
  const ownerState = {
    classes: rootProps.classes,
    direction
  };
  const classes = useUtilityClasses(ownerState);
  const {
    ref
  } = (0, _useResize.useResize)({
    direction,
    getInitialSize: () => {
      return direction === 'horizontal' ? rootRef.current.offsetWidth : rootRef.current.offsetHeight;
    },
    onSizeChange: newSize => {
      if (direction === 'horizontal') {
        rootRef.current.style.width = `${newSize}px`;
      } else {
        rootRef.current.style.height = `${newSize}px`;
      }
    }
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizablePanelHandleRoot, (0, _extends2.default)({
    className: (0, _clsx.default)(classes.root, className),
    ownerState: ownerState,
    direction: direction
  }, other, {
    ref: ref
  }));
}