@konstructio/ui/dist/index-BlSRBdPy.js

A set of reusable and customizable React components built for konstruct.io

import * as i from "react";
import { P as R, b as h, d as z } from "./index-DKfEnhKr.js";
import { u as g } from "./index-DLcqcWxM.js";
import { u as m } from "./index-0ioNhtNM.js";
import { jsx as B } from "react/jsx-runtime";
function H(n, e = globalThis?.document) {
  const t = m(n);
  i.useEffect(() => {
    const o = (s) => {
      s.key === "Escape" && t(s);
    };
    return e.addEventListener("keydown", o, { capture: !0 }), () => e.removeEventListener("keydown", o, { capture: !0 });
  }, [t, e]);
}
var K = "DismissableLayer", p = "dismissableLayer.update", M = "dismissableLayer.pointerDownOutside", j = "dismissableLayer.focusOutside", C, T = i.createContext({
  layers: /* @__PURE__ */ new Set(),
  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
  branches: /* @__PURE__ */ new Set()
}), x = i.forwardRef(
  (n, e) => {
    const {
      disableOutsidePointerEvents: t = !1,
      onEscapeKeyDown: o,
      onPointerDownOutside: s,
      onFocusOutside: c,
      onInteractOutside: f,
      onDismiss: d,
      ...E
    } = n, a = i.useContext(T), [u, S] = i.useState(null), l = u?.ownerDocument ?? globalThis?.document, [, W] = i.useState({}), k = g(e, (r) => S(r)), b = Array.from(a.layers), [A] = [...a.layersWithOutsidePointerEventsDisabled].slice(-1), N = b.indexOf(A), D = u ? b.indexOf(u) : -1, _ = a.layersWithOutsidePointerEventsDisabled.size > 0, P = D >= N, U = Y((r) => {
      const v = r.target, L = [...a.branches].some((y) => y.contains(v));
      !P || L || (s?.(r), f?.(r), r.defaultPrevented || d?.());
    }, l), O = q((r) => {
      const v = r.target;
      [...a.branches].some((y) => y.contains(v)) || (c?.(r), f?.(r), r.defaultPrevented || d?.());
    }, l);
    return H((r) => {
      D === a.layers.size - 1 && (o?.(r), !r.defaultPrevented && d && (r.preventDefault(), d()));
    }, l), i.useEffect(() => {
      if (u)
        return t && (a.layersWithOutsidePointerEventsDisabled.size === 0 && (C = l.body.style.pointerEvents, l.body.style.pointerEvents = "none"), a.layersWithOutsidePointerEventsDisabled.add(u)), a.layers.add(u), w(), () => {
          t && a.layersWithOutsidePointerEventsDisabled.size === 1 && (l.body.style.pointerEvents = C);
        };
    }, [u, l, t, a]), i.useEffect(() => () => {
      u && (a.layers.delete(u), a.layersWithOutsidePointerEventsDisabled.delete(u), w());
    }, [u, a]), i.useEffect(() => {
      const r = () => W({});
      return document.addEventListener(p, r), () => document.removeEventListener(p, r);
    }, []), /* @__PURE__ */ B(
      R.div,
      {
        ...E,
        ref: k,
        style: {
          pointerEvents: _ ? P ? "auto" : "none" : void 0,
          ...n.style
        },
        onFocusCapture: h(n.onFocusCapture, O.onFocusCapture),
        onBlurCapture: h(n.onBlurCapture, O.onBlurCapture),
        onPointerDownCapture: h(
          n.onPointerDownCapture,
          U.onPointerDownCapture
        )
      }
    );
  }
);
x.displayName = K;
var X = "DismissableLayerBranch", F = i.forwardRef((n, e) => {
  const t = i.useContext(T), o = i.useRef(null), s = g(e, o);
  return i.useEffect(() => {
    const c = o.current;
    if (c)
      return t.branches.add(c), () => {
        t.branches.delete(c);
      };
  }, [t.branches]), /* @__PURE__ */ B(R.div, { ...n, ref: s });
});
F.displayName = X;
function Y(n, e = globalThis?.document) {
  const t = m(n), o = i.useRef(!1), s = i.useRef(() => {
  });
  return i.useEffect(() => {
    const c = (d) => {
      if (d.target && !o.current) {
        let E = function() {
          I(
            M,
            t,
            a,
            { discrete: !0 }
          );
        };
        const a = { originalEvent: d };
        d.pointerType === "touch" ? (e.removeEventListener("click", s.current), s.current = E, e.addEventListener("click", s.current, { once: !0 })) : E();
      } else
        e.removeEventListener("click", s.current);
      o.current = !1;
    }, f = window.setTimeout(() => {
      e.addEventListener("pointerdown", c);
    }, 0);
    return () => {
      window.clearTimeout(f), e.removeEventListener("pointerdown", c), e.removeEventListener("click", s.current);
    };
  }, [e, t]), {
    // ensures we check React component tree (not just DOM tree)
    onPointerDownCapture: () => o.current = !0
  };
}
function q(n, e = globalThis?.document) {
  const t = m(n), o = i.useRef(!1);
  return i.useEffect(() => {
    const s = (c) => {
      c.target && !o.current && I(j, t, { originalEvent: c }, {
        discrete: !1
      });
    };
    return e.addEventListener("focusin", s), () => e.removeEventListener("focusin", s);
  }, [e, t]), {
    onFocusCapture: () => o.current = !0,
    onBlurCapture: () => o.current = !1
  };
}
function w() {
  const n = new CustomEvent(p);
  document.dispatchEvent(n);
}
function I(n, e, t, { discrete: o }) {
  const s = t.originalEvent.target, c = new CustomEvent(n, { bubbles: !1, cancelable: !0, detail: t });
  e && s.addEventListener(n, e, { once: !0 }), o ? z(s, c) : s.dispatchEvent(c);
}
var Z = x, $ = F;
export {
  $ as B,
  x as D,
  Z as R
};