react-box-tools/dist/dropdown-B4geQ7fC.js

Box tools react components, utils and hooks

import { jsxs as Y, jsx as N } from "react/jsx-runtime";
import { c as W } from "./clsx-DG-5vF7T.js";
import { forwardRef as Z, useState as $, useRef as y, useImperativeHandle as tt, useEffect as E } from "react";
import { u as et, a as ot } from "./useOutClick-DP--F-Sn.js";
import { u as F } from "./useUpdateEffect-4dQLu1cU.js";
import { u as st, a as rt } from "./useResizeObserver-7Snrkg9X.js";
const pt = Z(
  (M, P) => {
    const {
      arrow: x,
      show: w,
      direction: R = "down",
      mode: d = "hover",
      offset: v = 0,
      target: _,
      onFirstOpen: O,
      onOpen: C,
      onClose: B,
      className: H,
      contentClass: S,
      width: b = "target",
      children: T,
      intersect: I = !0,
      ...U
    } = M, [i, a] = $(w), [c, n] = $(R), [D, j] = $(!1), [z, V] = $(!1), m = y(null), u = y(null), L = y(null), h = x ? 10 + v : v, k = () => {
      if (!m.current || !u.current) return;
      const l = m.current, p = u.current, e = l.getBoundingClientRect(), o = p.getBoundingClientRect();
      b === "target" && (p.style.width = `${e.width}px`);
      const s = l.offsetTop, r = l.offsetLeft, t = {
        top: s,
        left: r
      };
      switch (c) {
        case "down":
          t.top = s + e.height, t.left = r + e.width / 2 - o.width / 2;
          break;
        case "down-left":
          t.top = s + e.height, t.left = r - o.width + e.width;
          break;
        case "down-right":
          t.top = s + e.height, t.left = r;
          break;
        case "left":
          t.top = s - o.height / 2 + e.height / 2, t.left = r - o.width;
          break;
        case "left-top":
          t.top = s - o.height + e.height, t.left = r - o.width;
          break;
        case "left-bottom":
          t.top = s, t.left = r - o.width;
          break;
        case "up":
          t.top = s - o.height, t.left = r - o.width / 2 + e.width / 2;
          break;
        case "up-left":
          t.top = s - o.height, t.left = r - o.width + e.width;
          break;
        case "up-right":
          t.top = s - o.height, t.left = r;
          break;
        case "right":
          t.top = s - o.height / 2 + e.height / 2, t.left = r + e.width;
          break;
        case "right-top":
          t.top = s - o.height + e.height, t.left = r + e.width;
          break;
        case "right-bottom":
          t.top = s, t.left = r + e.width;
          break;
      }
      if (b === "full" && (t.left = 0), p.style.top = `${t.top}px`, p.style.left = `${t.left}px`, L.current) {
        const X = L.current;
        let g = "";
        c.startsWith("up") ? g = `-${h}px 0 ${h}px 0` : c.startsWith("down") ? g = `${h}px 0 0 0` : c.startsWith("left") ? g = `0 ${h}px 0 -${h}px` : c.startsWith("right") && (g = `0 -${h}px 0 ${h}px`), X.style.margin = g;
      }
    }, q = () => {
      d === "hover" && a(!0);
    }, A = () => {
      d !== "toggle" && a(!1);
    }, G = (l) => {
      const p = l.target, e = u.current;
      if (e != null && e.contains(p)) {
        if (p.classList.contains("drp-item")) {
          a(!1), l.stopPropagation();
          return;
        }
        if (d === "toggle") return;
      }
      d === "click" && !i && a(!0), d === "toggle" && a(!i);
    }, J = () => {
      d !== "toggle" && i && a(!1);
    }, f = st(u, {
      threshold: 0.5
    }), K = !!(f != null && f.isIntersecting);
    tt(P, () => ({
      posicionate: k,
      setOpen: a
    })), E(() => {
      a(w);
    }, [w]), F(() => {
      i && k();
    }, [w, i, c, x, v, b]), F(() => {
      if (I && i && f && f.intersectionRatio < 1) {
        const l = f.boundingClientRect;
        if (f.rootBounds)
          if (l.top < f.rootBounds.top)
            switch (c) {
              case "up":
                n("down");
                break;
              case "up-right":
                n("down-right");
                break;
              case "up-left":
                n("down-left");
                break;
              case "left-top":
                n("left-bottom");
                break;
              case "right-top":
                n("right-bottom");
                break;
            }
          else
            switch (c) {
              case "down":
                n("up");
                break;
              case "down-right":
                n("up-right");
                break;
              case "down-left":
                n("up-left");
                break;
              case "left-bottom":
                n("left-top");
                break;
              case "right-bottom":
                n("right-top");
                break;
            }
      }
    }, [I, K]), E(() => {
      n(R);
    }, [R]), et("resize", k), ot(m, J), E(() => {
      !z && i && (V(!0), O && O()), i && !D && (j(!0), C && C()), !i && D && (j(!1), B && B());
    }, [i, D, z, C, B, O]);
    const Q = rt(i ? k : () => {
    });
    return /* @__PURE__ */ Y(
      "div",
      {
        ref: m,
        onMouseOver: q,
        onMouseLeave: A,
        onClick: G,
        className: W(`dropdown ${H}`),
        children: [
          /* @__PURE__ */ N("div", { ref: Q, children: _ }),
          /* @__PURE__ */ N(
            "div",
            {
              ...U,
              ref: u,
              className: W(`drp-panel ${i ? "show" : "unshown"} ${b}`),
              children: /* @__PURE__ */ N(
                "div",
                {
                  ref: L,
                  className: W(
                    `drp-content ${c} ${S} ${x && "arrow"}`
                  ),
                  children: T
                }
              )
            }
          )
        ]
      }
    );
  }
);
export {
  pt as D
};