@wordpress/block-editor/build/components/block-popover/inbetween.js

Generic block editor.

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-editor/src/components/block-popover/inbetween.js
var inbetween_exports = {};
__export(inbetween_exports, {
  default: () => inbetween_default
});
module.exports = __toCommonJS(inbetween_exports);
var import_clsx = __toESM(require("clsx"));
var import_data = require("@wordpress/data");
var import_element = require("@wordpress/element");
var import_components = require("@wordpress/components");
var import_i18n = require("@wordpress/i18n");
var import_store = require("../../store");
var import_use_block_refs = require("../block-list/use-block-props/use-block-refs");
var import_use_popover_scroll = __toESM(require("./use-popover-scroll"));
var import_jsx_runtime = require("react/jsx-runtime");
var MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
function BlockPopoverInbetween({
  previousClientId,
  nextClientId,
  children,
  __unstablePopoverSlot,
  __unstableContentRef,
  operation = "insert",
  nearestSide = "right",
  ...props
}) {
  const [popoverRecomputeCounter, forcePopoverRecompute] = (0, import_element.useReducer)(
    // Module is there to make sure that the counter doesn't overflow.
    (s) => (s + 1) % MAX_POPOVER_RECOMPUTE_COUNTER,
    0
  );
  const { orientation, rootClientId, isVisible } = (0, import_data.useSelect)(
    (select) => {
      const {
        getBlockListSettings,
        getBlockRootClientId,
        isBlockVisible
      } = select(import_store.store);
      const _rootClientId = getBlockRootClientId(
        previousClientId ?? nextClientId
      );
      return {
        orientation: getBlockListSettings(_rootClientId)?.orientation || "vertical",
        rootClientId: _rootClientId,
        isVisible: isBlockVisible(previousClientId) && isBlockVisible(nextClientId)
      };
    },
    [previousClientId, nextClientId]
  );
  const previousElement = (0, import_use_block_refs.useBlockElement)(previousClientId);
  const nextElement = (0, import_use_block_refs.useBlockElement)(nextClientId);
  const isVertical = orientation === "vertical";
  const popoverAnchor = (0, import_element.useMemo)(() => {
    if (
      // popoverRecomputeCounter is by definition always equal or greater than 0.
      // This check is only there to satisfy the correctness of the
      // exhaustive-deps rule for the `useMemo` hook.
      popoverRecomputeCounter < 0 || !previousElement && !nextElement || !isVisible
    ) {
      return void 0;
    }
    const contextElement = operation === "group" ? nextElement || previousElement : previousElement || nextElement;
    return {
      contextElement,
      getBoundingClientRect() {
        const previousRect = previousElement ? previousElement.getBoundingClientRect() : null;
        const nextRect = nextElement ? nextElement.getBoundingClientRect() : null;
        let left = 0;
        let top = 0;
        let width = 0;
        let height = 0;
        if (operation === "group") {
          const targetRect = nextRect || previousRect;
          top = targetRect.top;
          width = 0;
          height = targetRect.bottom - targetRect.top;
          left = nearestSide === "left" ? targetRect.left - 2 : targetRect.right - 2;
        } else if (isVertical) {
          top = previousRect ? previousRect.bottom : nextRect.top;
          width = previousRect ? previousRect.width : nextRect.width;
          height = nextRect && previousRect ? nextRect.top - previousRect.bottom : 0;
          left = previousRect ? previousRect.left : nextRect.left;
        } else {
          top = previousRect ? previousRect.top : nextRect.top;
          height = previousRect ? previousRect.height : nextRect.height;
          if ((0, import_i18n.isRTL)()) {
            left = nextRect ? nextRect.right : previousRect.left;
            width = previousRect && nextRect ? previousRect.left - nextRect.right : 0;
          } else {
            left = previousRect ? previousRect.right : nextRect.left;
            width = previousRect && nextRect ? nextRect.left - previousRect.right : 0;
          }
          width = Math.max(width, 0);
        }
        return new window.DOMRect(left, top, width, height);
      }
    };
  }, [
    previousElement,
    nextElement,
    popoverRecomputeCounter,
    isVertical,
    isVisible,
    operation,
    nearestSide
  ]);
  const popoverScrollRef = (0, import_use_popover_scroll.default)(__unstableContentRef);
  (0, import_element.useLayoutEffect)(() => {
    if (!previousElement) {
      return;
    }
    const observer = new window.MutationObserver(forcePopoverRecompute);
    observer.observe(previousElement, { attributes: true });
    return () => {
      observer.disconnect();
    };
  }, [previousElement]);
  (0, import_element.useLayoutEffect)(() => {
    if (!nextElement) {
      return;
    }
    const observer = new window.MutationObserver(forcePopoverRecompute);
    observer.observe(nextElement, { attributes: true });
    return () => {
      observer.disconnect();
    };
  }, [nextElement]);
  (0, import_element.useLayoutEffect)(() => {
    if (!previousElement) {
      return;
    }
    previousElement.ownerDocument.defaultView.addEventListener(
      "resize",
      forcePopoverRecompute
    );
    return () => {
      previousElement.ownerDocument.defaultView?.removeEventListener(
        "resize",
        forcePopoverRecompute
      );
    };
  }, [previousElement]);
  if (!previousElement && !nextElement || !isVisible) {
    return null;
  }
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_components.Popover,
    {
      ref: popoverScrollRef,
      animate: false,
      anchor: popoverAnchor,
      focusOnMount: false,
      __unstableSlotName: __unstablePopoverSlot,
      inline: !__unstablePopoverSlot,
      ...props,
      className: (0, import_clsx.default)(
        "block-editor-block-popover",
        "block-editor-block-popover__inbetween",
        props.className
      ),
      resize: false,
      flip: false,
      placement: "overlay",
      variant: "unstyled",
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-block-popover__inbetween-container", children })
    },
    nextClientId + "--" + rootClientId
  );
}
var inbetween_default = BlockPopoverInbetween;
//# sourceMappingURL=inbetween.js.map