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

A customizable and interactive voice UI component for React applications

import * as d from "react";
import { useComposedRefs as R } from "./index24.js";
import { Primitive as M } from "./index35.js";
import { useCallbackRef as y } from "./index40.js";
import { jsx as _ } from "react/jsx-runtime";
var F = "focusScope.autoFocusOnMount", T = "focusScope.autoFocusOnUnmount", N = { bubbles: !1, cancelable: !0 }, K = "FocusScope", k = d.forwardRef((e, t) => {
  const {
    loop: n = !1,
    trapped: u = !1,
    onMountAutoFocus: p,
    onUnmountAutoFocus: L,
    ...g
  } = e, [o, U] = d.useState(null), E = y(p), v = y(L), b = d.useRef(null), A = R(t, (s) => U(s)), a = d.useRef({
    paused: !1,
    pause() {
      this.paused = !0;
    },
    resume() {
      this.paused = !1;
    }
  }).current;
  d.useEffect(() => {
    if (u) {
      let s = function(i) {
        if (a.paused || !o) return;
        const c = i.target;
        o.contains(c) ? b.current = c : f(b.current, { select: !0 });
      }, l = function(i) {
        if (a.paused || !o) return;
        const c = i.relatedTarget;
        c !== null && (o.contains(c) || f(b.current, { select: !0 }));
      }, r = function(i) {
        if (document.activeElement === document.body)
          for (const h of i)
            h.removedNodes.length > 0 && f(o);
      };
      document.addEventListener("focusin", s), document.addEventListener("focusout", l);
      const m = new MutationObserver(r);
      return o && m.observe(o, { childList: !0, subtree: !0 }), () => {
        document.removeEventListener("focusin", s), document.removeEventListener("focusout", l), m.disconnect();
      };
    }
  }, [u, o, a.paused]), d.useEffect(() => {
    if (o) {
      O.add(a);
      const s = document.activeElement;
      if (!o.contains(s)) {
        const r = new CustomEvent(F, N);
        o.addEventListener(F, E), o.dispatchEvent(r), r.defaultPrevented || (w(W(I(o)), { select: !0 }), document.activeElement === s && f(o));
      }
      return () => {
        o.removeEventListener(F, E), setTimeout(() => {
          const r = new CustomEvent(T, N);
          o.addEventListener(T, v), o.dispatchEvent(r), r.defaultPrevented || f(s ?? document.body, { select: !0 }), o.removeEventListener(T, v), O.remove(a);
        }, 0);
      };
    }
  }, [o, E, v, a]);
  const P = d.useCallback(
    (s) => {
      if (!n && !u || a.paused) return;
      const l = s.key === "Tab" && !s.altKey && !s.ctrlKey && !s.metaKey, r = document.activeElement;
      if (l && r) {
        const m = s.currentTarget, [i, c] = x(m);
        i && c ? !s.shiftKey && r === c ? (s.preventDefault(), n && f(i, { select: !0 })) : s.shiftKey && r === i && (s.preventDefault(), n && f(c, { select: !0 })) : r === m && s.preventDefault();
      }
    },
    [n, u, a.paused]
  );
  return /* @__PURE__ */ _(M.div, { tabIndex: -1, ...g, ref: A, onKeyDown: P });
});
k.displayName = K;
function w(e, { select: t = !1 } = {}) {
  const n = document.activeElement;
  for (const u of e)
    if (f(u, { select: t }), document.activeElement !== n) return;
}
function x(e) {
  const t = I(e), n = S(t, e), u = S(t.reverse(), e);
  return [n, u];
}
function I(e) {
  const t = [], n = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
    acceptNode: (u) => {
      const p = u.tagName === "INPUT" && u.type === "hidden";
      return u.disabled || u.hidden || p ? NodeFilter.FILTER_SKIP : u.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
    }
  });
  for (; n.nextNode(); ) t.push(n.currentNode);
  return t;
}
function S(e, t) {
  for (const n of e)
    if (!D(n, { upTo: t })) return n;
}
function D(e, { upTo: t }) {
  if (getComputedStyle(e).visibility === "hidden") return !0;
  for (; e; ) {
    if (t !== void 0 && e === t) return !1;
    if (getComputedStyle(e).display === "none") return !0;
    e = e.parentElement;
  }
  return !1;
}
function H(e) {
  return e instanceof HTMLInputElement && "select" in e;
}
function f(e, { select: t = !1 } = {}) {
  if (e && e.focus) {
    const n = document.activeElement;
    e.focus({ preventScroll: !0 }), e !== n && H(e) && t && e.select();
  }
}
var O = V();
function V() {
  let e = [];
  return {
    add(t) {
      const n = e[0];
      t !== n && n?.pause(), e = C(e, t), e.unshift(t);
    },
    remove(t) {
      e = C(e, t), e[0]?.resume();
    }
  };
}
function C(e, t) {
  const n = [...e], u = n.indexOf(t);
  return u !== -1 && n.splice(u, 1), n;
}
function W(e) {
  return e.filter((t) => t.tagName !== "A");
}
export {
  k as FocusScope
};
//# sourceMappingURL=index32.js.map