@konstructio/ui/dist/dist-AZfrfAUz.js

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

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