laif-ds/dist/components/ui/command-portal.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsx as m } from "react/jsx-runtime";
import * as f from "react";
import { useState as h, useEffect as i } from "react";
import { Portal as x } from "../../node_modules/@radix-ui/react-select/dist/index.js";
import { cn as E } from "../../lib/utils.js";
function C({
  children: w,
  open: t,
  className: v,
  triggerRef: r,
  onClose: s
}) {
  const l = f.useRef(null), [o, c] = h(null), n = f.useCallback(() => {
    if (t && r.current) {
      const e = r.current.getBoundingClientRect();
      c({
        top: e.bottom + window.scrollY,
        left: e.left + window.scrollX,
        width: e.width
      });
    } else
      c(null);
  }, [t, r]);
  return i(() => {
    n();
  }, [t, n]), i(() => {
    if (t)
      return window.addEventListener("resize", n), () => {
        window.removeEventListener("resize", n);
      };
  }, [t, n]), i(() => {
    if (t) {
      const e = setInterval(n, 100);
      return () => {
        clearInterval(e);
      };
    }
  }, [t, n]), i(() => {
    if (!t || !s) return;
    const e = (p) => {
      var u, d;
      const a = p.target;
      (u = r.current) != null && u.contains(a) || (d = l.current) != null && d.contains(a) || s();
    };
    return document.addEventListener("mousedown", e), () => {
      document.removeEventListener("mousedown", e);
    };
  }, [t, s, r]), !t || !o ? null : /* @__PURE__ */ m(x, { children: /* @__PURE__ */ m(
    "div",
    {
      ref: l,
      className: E("fixed z-50 mt-1", v),
      "data-command-portal": !0,
      style: {
        top: `${o.top}px`,
        left: `${o.left}px`,
        width: `${o.width}px`,
        pointerEvents: "auto"
      },
      onClick: (e) => e.stopPropagation(),
      children: w
    }
  ) });
}
export {
  C as CommandPortal
};