@wordpress/block-library/build-module/cover/edit/resizable-cover-popover.js

Block library for the WordPress editor.

// packages/block-library/src/cover/edit/resizable-cover-popover.js
import clsx from "clsx";
import { useState } from "@wordpress/element";
import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
import { unlock } from "../../lock-unlock";
import { jsx } from "react/jsx-runtime";
var RESIZABLE_BOX_ENABLE_OPTION = {
  top: false,
  right: false,
  bottom: true,
  left: false,
  topRight: false,
  bottomRight: false,
  bottomLeft: false,
  topLeft: false
};
var { ResizableBoxPopover } = unlock(blockEditorPrivateApis);
function ResizableCoverPopover({
  className,
  height,
  minHeight,
  onResize,
  onResizeStart,
  onResizeStop,
  showHandle,
  size,
  width,
  ...props
}) {
  const [isResizing, setIsResizing] = useState(false);
  const resizableBoxProps = {
    className: clsx(className, { "is-resizing": isResizing }),
    enable: RESIZABLE_BOX_ENABLE_OPTION,
    onResizeStart: (_event, _direction, elt) => {
      onResizeStart(elt.clientHeight);
      onResize(elt.clientHeight);
    },
    onResize: (_event, _direction, elt) => {
      onResize(elt.clientHeight);
      if (!isResizing) {
        setIsResizing(true);
      }
    },
    onResizeStop: (_event, _direction, elt) => {
      onResizeStop(elt.clientHeight);
      setIsResizing(false);
    },
    showHandle,
    size,
    __experimentalShowTooltip: true,
    __experimentalTooltipProps: {
      axis: "y",
      position: "bottom",
      isVisible: isResizing
    }
  };
  return /* @__PURE__ */ jsx(
    ResizableBoxPopover,
    {
      className: "block-library-cover__resizable-box-popover",
      resizableBoxProps,
      ...props
    }
  );
}
export {
  ResizableCoverPopover as default
};
//# sourceMappingURL=resizable-cover-popover.js.map