@ariakit/react-core/esm/__chunks/27ARMZNT.js

Ariakit React core

"use client";
import {
  POPOVER_ARROW_PATH
} from "./2SM3RB2N.js";
import {
  usePopoverContext
} from "./MTZPJQMC.js";
import {
  useStoreState
} from "./YV4JVR4I.js";
import {
  createElement,
  createHook,
  forwardRef,
  memo
} from "./LMDWO4NN.js";
import {
  useMergeRefs,
  useSafeLayoutEffect
} from "./ABQUS43J.js";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./3YLGPPWQ.js";

// src/popover/popover-arrow.tsx
import { getWindow } from "@ariakit/core/utils/dom";
import { invariant, removeUndefinedValues } from "@ariakit/core/utils/misc";
import { useId, useMemo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var TagName = "div";
var defaultSize = 30;
var halfDefaultSize = defaultSize / 2;
var rotateMap = {
  top: `rotate(180 ${halfDefaultSize} ${halfDefaultSize})`,
  right: `rotate(-90 ${halfDefaultSize} ${halfDefaultSize})`,
  bottom: `rotate(0 ${halfDefaultSize} ${halfDefaultSize})`,
  left: `rotate(90 ${halfDefaultSize} ${halfDefaultSize})`
};
function useComputedStyle(store) {
  const [style, setStyle] = useState();
  const contentElement = useStoreState(store, "contentElement");
  useSafeLayoutEffect(() => {
    if (!contentElement) return;
    const win = getWindow(contentElement);
    const computedStyle = win.getComputedStyle(contentElement);
    setStyle(computedStyle);
  }, [contentElement]);
  return style;
}
function getRingWidth(style) {
  var _a;
  if (!style) return;
  const boxShadow = style.getPropertyValue("box-shadow");
  const ringWidth = (_a = boxShadow.match(/0px 0px 0px ([^0]+px)/)) == null ? void 0 : _a[1];
  return ringWidth;
}
var usePopoverArrow = createHook(
  function usePopoverArrow2(_a) {
    var _b = _a, {
      store,
      size = defaultSize,
      borderWidth: borderWidthProp
    } = _b, props = __objRest(_b, [
      "store",
      "size",
      "borderWidth"
    ]);
    const context = usePopoverContext();
    store = store || context;
    invariant(
      store,
      process.env.NODE_ENV !== "production" && "PopoverArrow must be wrapped in a Popover component."
    );
    const dir = useStoreState(
      store,
      (state) => state.currentPlacement.split("-")[0]
    );
    const maskId = useId();
    const style = useComputedStyle(store);
    const fill = (style == null ? void 0 : style.getPropertyValue("background-color")) || "none";
    const stroke = (style == null ? void 0 : style.getPropertyValue(`border-${dir}-color`)) || "none";
    const borderWidth = useMemo(() => {
      if (borderWidthProp != null) return borderWidthProp;
      if (!style) return 0;
      const ringWidth = getRingWidth(style);
      if (ringWidth) return Number.parseInt(ringWidth);
      const borderWidth2 = style.getPropertyValue(`border-${dir}-width`);
      if (borderWidth2) return Number.parseInt(borderWidth2);
      return 0;
    }, [borderWidthProp, style, dir]);
    const strokeWidth = borderWidth * 2 * (defaultSize / size);
    const transform = rotateMap[dir];
    const children = useMemo(
      () => /* @__PURE__ */ jsx("svg", { display: "block", viewBox: "0 0 30 30", children: /* @__PURE__ */ jsxs("g", { transform, children: [
        /* @__PURE__ */ jsx("path", { fill: "none", d: POPOVER_ARROW_PATH, mask: `url(#${maskId})` }),
        /* @__PURE__ */ jsx("path", { stroke: "none", d: POPOVER_ARROW_PATH }),
        /* @__PURE__ */ jsx("mask", { id: maskId, maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx(
          "rect",
          {
            x: "-15",
            y: "0",
            width: "60",
            height: "30",
            fill: "white",
            stroke: "black"
          }
        ) })
      ] }) }),
      [transform, maskId]
    );
    props = __spreadProps(__spreadValues({
      children,
      "aria-hidden": true
    }, props), {
      ref: useMergeRefs(store.setArrowElement, props.ref),
      style: __spreadValues({
        position: "absolute",
        fontSize: size,
        width: "1em",
        height: "1em",
        pointerEvents: "none",
        fill: `var(--ak-layer, ${fill})`,
        stroke: `var(--ak-layer-border, ${stroke})`,
        strokeWidth
      }, props.style)
    });
    return removeUndefinedValues(props);
  }
);
var PopoverArrow = memo(
  forwardRef(function PopoverArrow2(props) {
    const htmlProps = usePopoverArrow(props);
    return createElement(TagName, htmlProps);
  })
);

export {
  usePopoverArrow,
  PopoverArrow
};