@wordpress/components/build/resizable-box/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ResizableBox = void 0;
var _element = require("@wordpress/element");
var _clsx = _interopRequireDefault(require("clsx"));
var _reResizable = require("re-resizable");
var _resizeTooltip = _interopRequireDefault(require("./resize-tooltip"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

const HANDLE_CLASS_NAME = 'components-resizable-box__handle';
const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';
const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';
const HANDLE_CLASSES = {
  top: (0, _clsx.default)(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'),
  right: (0, _clsx.default)(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'),
  bottom: (0, _clsx.default)(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'),
  left: (0, _clsx.default)(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'),
  topLeft: (0, _clsx.default)(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'),
  topRight: (0, _clsx.default)(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'),
  bottomRight: (0, _clsx.default)(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'),
  bottomLeft: (0, _clsx.default)(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left')
};

// Removes the inline styles in the drag handles.
const HANDLE_STYLES_OVERRIDES = {
  width: undefined,
  height: undefined,
  top: undefined,
  right: undefined,
  bottom: undefined,
  left: undefined
};
const HANDLE_STYLES = {
  top: HANDLE_STYLES_OVERRIDES,
  right: HANDLE_STYLES_OVERRIDES,
  bottom: HANDLE_STYLES_OVERRIDES,
  left: HANDLE_STYLES_OVERRIDES,
  topLeft: HANDLE_STYLES_OVERRIDES,
  topRight: HANDLE_STYLES_OVERRIDES,
  bottomRight: HANDLE_STYLES_OVERRIDES,
  bottomLeft: HANDLE_STYLES_OVERRIDES
};
function UnforwardedResizableBox({
  className,
  children,
  showHandle = true,
  __experimentalShowTooltip: showTooltip = false,
  __experimentalTooltipProps: tooltipProps = {},
  ...props
}, ref) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reResizable.Resizable, {
    className: (0, _clsx.default)('components-resizable-box__container', showHandle && 'has-show-handle', className)
    // Add a focusable element within the drag handle. Unfortunately,
    // `re-resizable` does not make them properly focusable by default,
    // causing focus to move the the block wrapper which triggers block
    // drag.
    ,
    handleComponent: Object.fromEntries(Object.keys(HANDLE_CLASSES).map(key => [key, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      tabIndex: -1
    }, key)])),
    handleClasses: HANDLE_CLASSES,
    handleStyles: HANDLE_STYLES,
    ref: ref,
    ...props,
    children: [children, showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizeTooltip.default, {
      ...tooltipProps
    })]
  });
}
const ResizableBox = exports.ResizableBox = (0, _element.forwardRef)(UnforwardedResizableBox);
var _default = exports.default = ResizableBox;
//# sourceMappingURL=index.js.map