@hoosei/voxweave-react/dist/esm/index31.js

A customizable and interactive voice UI component for React applications

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