@als-tp/als-react-ts-ui 0.3.1 → 0.5.0

package/dist/als-react-ts-ui391.js

@@ -0,0 +1,285 @@
+import * as m from "react";
+import { isHTMLElement as ye } from "./als-react-ts-ui339.js";
+import { useValueAsRef as G } from "./als-react-ts-ui337.js";
+import { useStableCallback as ae } from "./als-react-ts-ui192.js";
+import { useIsoLayoutEffect as A } from "./als-react-ts-ui193.js";
+import { useFloatingParentNodeId as Ve, useFloatingTree as Le } from "./als-react-ts-ui356.js";
+import { createChangeEventDetails as X } from "./als-react-ts-ui246.js";
+import { enqueueFocus as ze } from "./als-react-ts-ui377.js";
+import { ARROW_DOWN as ee, ARROW_LEFT as W, ARROW_RIGHT as _, ARROW_UP as Pe } from "./als-react-ts-ui390.js";
+import { isIndexOutOfListBounds as be, getMinListIndex as fe, getMaxListIndex as Me, createGridCellMap as Ge, isListIndexDisabled as de, getGridNavigatedIndex as We, getGridCellIndexOfCorner as _e, getGridCellIndices as qe, findNonDisabledListIndex as Y } from "./als-react-ts-ui392.js";
+import { getFloatingFocusElement as He, isTypeableCombobox as $e, activeElement as Ce, getDocument as Be, contains as Te, getTarget as Ue } from "./als-react-ts-ui331.js";
+import { stopEvent as S, isVirtualClick as je, isVirtualPointerEvent as Je } from "./als-react-ts-ui295.js";
+import { listNavigation as me, focusOut as Qe } from "./als-react-ts-ui248.js";
+const Xe = "Escape";
+function te(o, p, c) {
+  switch (o) {
+    case "vertical":
+      return p;
+    case "horizontal":
+      return c;
+    default:
+      return p || c;
+  }
+}
+function Z(o, p) {
+  return te(p, o === Pe || o === ee, o === W || o === _);
+}
+function pe(o, p, c) {
+  return te(p, o === ee, c ? o === W : o === _) || o === "Enter" || o === " " || o === "";
+}
+function Ye(o, p, c) {
+  return te(p, c ? o === W : o === _, o === ee);
+}
+function Ze(o, p, c, s) {
+  const g = c ? o === _ : o === W, x = o === Pe;
+  return p === "both" || p === "horizontal" && s && s > 1 ? o === Xe : te(p, g, x);
+}
+function dt(o, p) {
+  const c = "rootStore" in o ? o.rootStore : o, s = c.useState("open"), g = c.useState("floatingElement"), x = c.useState("domReferenceElement"), ge = c.context.dataRef, {
+    listRef: n,
+    activeIndex: y,
+    onNavigate: Se = () => {
+    },
+    enabled: O = !0,
+    selectedIndex: N = null,
+    allowEscape: re = !1,
+    loopFocus: q = !1,
+    nested: b = !1,
+    rtl: E = !1,
+    virtual: f = !1,
+    focusItemOnOpen: M = "auto",
+    focusItemOnHover: ne = !0,
+    openOnArrowKeyDown: oe = !0,
+    disabledIndices: R = void 0,
+    orientation: d = "vertical",
+    parentOrientation: Ie,
+    cols: v = 1,
+    scrollItemIntoView: ve = !0,
+    itemSizes: Fe,
+    dense: Ae = !1,
+    id: Re,
+    externalTree: Ne
+  } = p;
+  process.env.NODE_ENV !== "production" && (re && (q || console.warn("`useListNavigation` looping must be enabled to allow escaping."), f || console.warn("`useListNavigation` must be virtual to allow escaping.")), d === "vertical" && v > 1 && console.warn("In grid list navigation mode (`cols` > 1), the `orientation` should", 'be either "horizontal" or "both".'));
+  const ke = He(g), k = G(ke), H = Ve(), C = Le(Ne);
+  A(() => {
+    ge.current.orientation = d;
+  }, [ge, d]);
+  const ie = $e(x), T = m.useRef(M), r = m.useRef(N ?? -1), P = m.useRef(null), F = m.useRef(!0), l = ae((e) => {
+    Se(r.current === -1 ? null : r.current, e);
+  }), he = m.useRef(l), D = m.useRef(!!g), xe = m.useRef(s), h = m.useRef(!1), $ = m.useRef(!1), ce = G(R), B = G(s), De = G(ve), K = G(N), ue = ae(() => {
+    function e(a) {
+      f ? C?.events.emit("virtualfocus", a) : ze(a, {
+        sync: h.current,
+        preventScroll: !0
+      });
+    }
+    const i = n.current[r.current], t = $.current;
+    i && e(i), (h.current ? (a) => a() : requestAnimationFrame)(() => {
+      const a = n.current[r.current] || i;
+      if (!a)
+        return;
+      i || e(a);
+      const I = De.current;
+      I && // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      se && (t || !F.current) && a.scrollIntoView?.(typeof I == "boolean" ? {
+        block: "nearest",
+        inline: "nearest"
+      } : I);
+    });
+  });
+  A(() => {
+    O && (s && g ? (r.current = N ?? -1, T.current && N != null && ($.current = !0, l())) : D.current && (r.current = -1, he.current()));
+  }, [O, s, g, N, l]), A(() => {
+    if (O) {
+      if (!s) {
+        h.current = !1;
+        return;
+      }
+      if (g)
+        if (y == null) {
+          if (h.current = !1, K.current != null)
+            return;
+          if (D.current && (r.current = -1, ue()), (!xe.current || !D.current) && T.current && (P.current != null || T.current === !0 && P.current == null)) {
+            let e = 0;
+            const i = () => {
+              n.current[0] == null ? (e < 2 && (e ? requestAnimationFrame : queueMicrotask)(i), e += 1) : (r.current = P.current == null || pe(P.current, d, E) || b ? fe(n) : Me(n), P.current = null, l());
+            };
+            i();
+          }
+        } else be(n, y) || (r.current = y, ue(), $.current = !1);
+    }
+  }, [O, s, g, y, K, b, n, d, E, l, ue, ce]), A(() => {
+    if (!O || g || !C || f || !D.current)
+      return;
+    const e = C.nodesRef.current, i = e.find((a) => a.id === H)?.context?.elements.floating, t = Ce(Be(g)), u = e.some((a) => a.context && Te(a.context.elements.floating, t));
+    i && !u && F.current && i.focus({
+      preventScroll: !0
+    });
+  }, [O, g, C, H, f]), A(() => {
+    he.current = l, xe.current = s, D.current = !!g;
+  }), A(() => {
+    s || (P.current = null, T.current = M);
+  }, [s, M]);
+  const Ee = y != null, se = m.useMemo(() => {
+    function e(t) {
+      if (!B.current)
+        return;
+      const u = n.current.indexOf(t.currentTarget);
+      u !== -1 && r.current !== u && (r.current = u, l(t));
+    }
+    return {
+      onFocus(t) {
+        h.current = !0, e(t);
+      },
+      onClick: ({
+        currentTarget: t
+      }) => t.focus({
+        preventScroll: !0
+      }),
+      // Safari
+      onMouseMove(t) {
+        h.current = !0, $.current = !1, ne && e(t);
+      },
+      onPointerLeave(t) {
+        if (!B.current || !F.current || t.pointerType === "touch")
+          return;
+        h.current = !0;
+        const u = t.relatedTarget;
+        !ne || n.current.includes(u) || (r.current = -1, l(t), f || k.current?.focus({
+          preventScroll: !0
+        }));
+      }
+    };
+  }, [B, k, ne, n, l, f]), U = m.useCallback(() => Ie ?? C?.nodesRef.current.find((e) => e.id === H)?.context?.dataRef?.current.orientation, [H, C, Ie]), V = ae((e) => {
+    if (F.current = !1, h.current = !0, e.which === 229 || !B.current && e.currentTarget === k.current)
+      return;
+    if (b && Ze(e.key, d, E, v)) {
+      Z(e.key, U()) || S(e), c.setOpen(!1, X(me, e.nativeEvent)), ye(x) && (f ? C?.events.emit("virtualfocus", x) : x.focus());
+      return;
+    }
+    const i = r.current, t = fe(n, R), u = Me(n, R);
+    if (ie || (e.key === "Home" && (S(e), r.current = t, l(e)), e.key === "End" && (S(e), r.current = u, l(e))), v > 1) {
+      const a = Fe || Array.from({
+        length: n.current.length
+      }, () => ({
+        width: 1,
+        height: 1
+      })), I = Ge(a, v, Ae), L = I.findIndex((w) => w != null && !de(n, w, R)), le = I.reduce((w, z, Ke) => z != null && !de(n, z, R) ? Ke : w, -1), Q = I[We({
+        current: I.map((w) => w != null ? n.current[w] : null)
+      }, {
+        event: e,
+        orientation: d,
+        loopFocus: q,
+        rtl: E,
+        cols: v,
+        // treat undefined (empty grid spaces) as disabled indices so we
+        // don't end up in them
+        disabledIndices: qe([...(typeof R != "function" ? R : null) || n.current.map((w, z) => de(n, z, R) ? z : void 0), void 0], I),
+        minIndex: L,
+        maxIndex: le,
+        prevIndex: _e(
+          r.current > u ? t : r.current,
+          a,
+          I,
+          v,
+          // use a corner matching the edge closest to the direction
+          // we're moving in so we don't end up in the same item. Prefer
+          // top/left over bottom/right.
+          // eslint-disable-next-line no-nested-ternary
+          e.key === ee ? "bl" : e.key === (E ? W : _) ? "tr" : "tl"
+        ),
+        stopEvent: !0
+      })];
+      if (Q != null && (r.current = Q, l(e)), d === "both")
+        return;
+    }
+    if (Z(e.key, d)) {
+      if (S(e), s && !f && Ce(e.currentTarget.ownerDocument) === e.currentTarget) {
+        r.current = pe(e.key, d, E) ? t : u, l(e);
+        return;
+      }
+      pe(e.key, d, E) ? q ? i >= u ? re && i !== n.current.length ? r.current = -1 : (h.current = !1, r.current = t) : r.current = Y(n, {
+        startingIndex: i,
+        disabledIndices: R
+      }) : r.current = Math.min(u, Y(n, {
+        startingIndex: i,
+        disabledIndices: R
+      })) : q ? i <= t ? re && i !== -1 ? r.current = n.current.length : (h.current = !1, r.current = u) : r.current = Y(n, {
+        startingIndex: i,
+        decrement: !0,
+        disabledIndices: R
+      }) : r.current = Math.max(t, Y(n, {
+        startingIndex: i,
+        decrement: !0,
+        disabledIndices: R
+      })), be(n, r.current) && (r.current = -1), l(e);
+    }
+  }), j = m.useMemo(() => f && s && Ee && {
+    "aria-activedescendant": `${Re}-${y}`
+  }, [f, s, Ee, Re, y]), Oe = m.useMemo(() => ({
+    "aria-orientation": d === "both" ? void 0 : d,
+    ...ie ? {} : j,
+    onKeyDown(e) {
+      if (e.key === "Tab" && e.shiftKey && s && !f) {
+        const i = Ue(e.nativeEvent);
+        if (i && !Te(k.current, i))
+          return;
+        S(e), c.setOpen(!1, X(Qe, e.nativeEvent)), ye(x) && x.focus();
+        return;
+      }
+      V(e);
+    },
+    onPointerMove() {
+      F.current = !0;
+    }
+  }), [j, V, k, d, ie, c, s, f, x]), J = m.useMemo(() => {
+    function e(t) {
+      M === "auto" && je(t.nativeEvent) && (T.current = !f);
+    }
+    function i(t) {
+      T.current = M, M === "auto" && Je(t.nativeEvent) && (T.current = !0);
+    }
+    return {
+      onKeyDown(t) {
+        const u = c.select("open");
+        F.current = !1;
+        const a = t.key.startsWith("Arrow"), I = Ye(t.key, U(), E), L = Z(t.key, d), le = (b ? I : L) || t.key === "Enter" || t.key.trim() === "";
+        if (f && u)
+          return V(t);
+        if (!(!u && !oe && a)) {
+          if (le) {
+            const Q = Z(t.key, U());
+            P.current = b && Q ? null : t.key;
+          }
+          if (b) {
+            I && (S(t), u ? (r.current = fe(n, ce.current), l(t)) : c.setOpen(!0, X(me, t.nativeEvent, t.currentTarget)));
+            return;
+          }
+          L && (K.current != null && (r.current = K.current), S(t), !u && oe ? c.setOpen(!0, X(me, t.nativeEvent, t.currentTarget)) : V(t), u && l(t));
+        }
+      },
+      onFocus(t) {
+        c.select("open") && !f && (r.current = -1, l(t));
+      },
+      onPointerDown: i,
+      onPointerEnter: i,
+      onMouseDown: e,
+      onClick: e
+    };
+  }, [V, ce, M, n, b, l, c, oe, d, U, E, K, f]), we = m.useMemo(() => ({
+    ...j,
+    ...J
+  }), [j, J]);
+  return m.useMemo(() => O ? {
+    reference: we,
+    floating: Oe,
+    item: se,
+    trigger: J
+  } : {}, [O, we, Oe, J, se]);
+}
+export {
+  Xe as ESCAPE,
+  dt as useListNavigation
+};

package/dist/als-react-ts-ui392.js

@@ -0,0 +1,209 @@
+import U from "./als-react-ts-ui259.js";
+import { floor as B } from "./als-react-ts-ui421.js";
+import { stopEvent as y } from "./als-react-ts-ui295.js";
+import { ARROW_UP as j, ARROW_DOWN as z, ARROW_LEFT as A, ARROW_RIGHT as G } from "./als-react-ts-ui390.js";
+function M(r, n, g) {
+  return Math.floor(r / n) !== g;
+}
+function L(r, n) {
+  return n < 0 || n >= r.current.length;
+}
+function J(r, n) {
+  return c(r, {
+    disabledIndices: n
+  });
+}
+function K(r, n) {
+  return c(r, {
+    decrement: !0,
+    startingIndex: r.current.length,
+    disabledIndices: n
+  });
+}
+function c(r, {
+  startingIndex: n = -1,
+  decrement: g = !1,
+  disabledIndices: u,
+  amount: w = 1
+} = {}) {
+  let t = n;
+  do
+    t += g ? -w : w;
+  while (t >= 0 && t <= r.current.length - 1 && V(r, t, u));
+  return t;
+}
+function Q(r, {
+  event: n,
+  orientation: g,
+  loopFocus: u,
+  rtl: w,
+  cols: t,
+  disabledIndices: o,
+  minIndex: O,
+  maxIndex: s,
+  prevIndex: e,
+  stopEvent: l = !1
+}) {
+  let f = e;
+  const m = [], _ = {};
+  let k = !1;
+  {
+    let a = null, h = -1;
+    r.current.forEach((E, i) => {
+      if (E == null)
+        return;
+      const C = E.closest('[role="row"]');
+      C && (k = !0), (C !== a || h === -1) && (a = C, h += 1, m[h] = []), m[h].push(i), _[i] = h;
+    });
+  }
+  const P = k && m.length > 0 && m.some((a) => a.length !== t);
+  function R(a) {
+    if (!P || e === -1)
+      return;
+    const h = _[e];
+    if (h == null)
+      return;
+    const E = m[h].indexOf(e);
+    let i = a === "up" ? h - 1 : h + 1;
+    u && (i < 0 ? i = m.length - 1 : i >= m.length && (i = 0));
+    const C = /* @__PURE__ */ new Set();
+    for (; i >= 0 && i < m.length && !C.has(i); ) {
+      C.add(i);
+      const D = m[i];
+      if (D.length === 0) {
+        i = a === "up" ? i - 1 : i + 1;
+        continue;
+      }
+      const T = Math.min(E, D.length - 1);
+      for (let N = T; N >= 0; N -= 1) {
+        const W = D[N];
+        if (!V(r, W, o))
+          return W;
+      }
+      i = a === "up" ? i - 1 : i + 1, u && (i < 0 ? i = m.length - 1 : i >= m.length && (i = 0));
+    }
+  }
+  if (n.key === j) {
+    const a = R("up");
+    if (a !== void 0)
+      l && y(n), f = a;
+    else {
+      if (l && y(n), e === -1)
+        f = s;
+      else if (f = c(r, {
+        startingIndex: f,
+        amount: t,
+        decrement: !0,
+        disabledIndices: o
+      }), u && (e - t < O || f < 0)) {
+        const h = e % t, E = s % t, i = s - (E - h);
+        E === h ? f = s : f = E > h ? i : i - t;
+      }
+      L(r, f) && (f = e);
+    }
+  }
+  if (n.key === z) {
+    const a = R("down");
+    a !== void 0 ? (l && y(n), f = a) : (l && y(n), e === -1 ? f = O : (f = c(r, {
+      startingIndex: e,
+      amount: t,
+      disabledIndices: o
+    }), u && e + t > s && (f = c(r, {
+      startingIndex: e % t - t,
+      amount: t,
+      disabledIndices: o
+    }))), L(r, f) && (f = e));
+  }
+  if (g === "both") {
+    const a = B(e / t);
+    n.key === (w ? A : G) && (l && y(n), e % t !== t - 1 ? (f = c(r, {
+      startingIndex: e,
+      disabledIndices: o
+    }), u && M(f, t, a) && (f = c(r, {
+      startingIndex: e - e % t - 1,
+      disabledIndices: o
+    }))) : u && (f = c(r, {
+      startingIndex: e - e % t - 1,
+      disabledIndices: o
+    })), M(f, t, a) && (f = e)), n.key === (w ? G : A) && (l && y(n), e % t !== 0 ? (f = c(r, {
+      startingIndex: e,
+      decrement: !0,
+      disabledIndices: o
+    }), u && M(f, t, a) && (f = c(r, {
+      startingIndex: e + (t - e % t),
+      decrement: !0,
+      disabledIndices: o
+    }))) : u && (f = c(r, {
+      startingIndex: e + (t - e % t),
+      decrement: !0,
+      disabledIndices: o
+    })), M(f, t, a) && (f = e));
+    const h = B(s / t) === a;
+    L(r, f) && (u && h ? f = n.key === (w ? G : A) ? s : c(r, {
+      startingIndex: e - e % t - 1,
+      disabledIndices: o
+    }) : f = e);
+  }
+  return f;
+}
+function X(r, n, g) {
+  const u = [];
+  let w = 0;
+  return r.forEach(({
+    width: t,
+    height: o
+  }, O) => {
+    if (t > n && process.env.NODE_ENV !== "production")
+      throw new Error(process.env.NODE_ENV !== "production" ? `[Floating UI]: Invalid grid - item width at index ${O} is greater than grid columns` : U(29, O));
+    let s = !1;
+    for (g && (w = 0); !s; ) {
+      const e = [];
+      for (let l = 0; l < t; l += 1)
+        for (let f = 0; f < o; f += 1)
+          e.push(w + l + f * n);
+      w % n + t <= n && e.every((l) => u[l] == null) ? (e.forEach((l) => {
+        u[l] = O;
+      }), s = !0) : w += 1;
+    }
+  }), [...u];
+}
+function Y(r, n, g, u, w) {
+  if (r === -1)
+    return -1;
+  const t = g.indexOf(r), o = n[r];
+  switch (w) {
+    case "tl":
+      return t;
+    case "tr":
+      return o ? t + o.width - 1 : t;
+    case "bl":
+      return o ? t + (o.height - 1) * u : t;
+    case "br":
+      return g.lastIndexOf(r);
+    default:
+      return -1;
+  }
+}
+function Z(r, n) {
+  return n.flatMap((g, u) => r.includes(g) ? [u] : []);
+}
+function V(r, n, g) {
+  if (typeof g == "function")
+    return g(n);
+  if (g)
+    return g.includes(n);
+  const u = r.current[n];
+  return u ? u.hasAttribute("disabled") || u.getAttribute("aria-disabled") === "true" : !1;
+}
+export {
+  X as createGridCellMap,
+  c as findNonDisabledListIndex,
+  Y as getGridCellIndexOfCorner,
+  Z as getGridCellIndices,
+  Q as getGridNavigatedIndex,
+  K as getMaxListIndex,
+  J as getMinListIndex,
+  M as isDifferentGridRow,
+  L as isIndexOutOfListBounds,
+  V as isListIndexDisabled
+};

package/dist/als-react-ts-ui393.js

@@ -0,0 +1,56 @@
+import * as o from "react";
+import { useStableCallback as S } from "./als-react-ts-ui192.js";
+import { useIsoLayoutEffect as T } from "./als-react-ts-ui193.js";
+import { useTimeout as D } from "./als-react-ts-ui195.js";
+import { EMPTY_ARRAY as U } from "./als-react-ts-ui303.js";
+import { stopEvent as O } from "./als-react-ts-ui295.js";
+function H(l, b) {
+  const g = "rootStore" in l ? l.rootStore : l, c = g.useState("open"), u = g.context.dataRef, {
+    listRef: E,
+    activeIndex: p,
+    onMatch: A,
+    onTypingChange: R,
+    enabled: h = !0,
+    findMatch: L = null,
+    resetMs: F = 750,
+    ignoreKeys: P = U,
+    selectedIndex: y = null
+  } = b, m = D(), r = o.useRef(""), i = o.useRef(y ?? p ?? -1), f = o.useRef(null);
+  T(() => {
+    c && (m.clear(), f.current = null, r.current = "");
+  }, [c, m]), T(() => {
+    c && r.current === "" && (i.current = y ?? p ?? -1);
+  }, [c, y, p]);
+  const n = S((e) => {
+    e ? u.current.typing || (u.current.typing = e, R?.(e)) : u.current.typing && (u.current.typing = e, R?.(e));
+  }), a = S((e) => {
+    function C(s, x, I) {
+      const K = L ? L(x, I) : x.find((Y) => Y?.toLocaleLowerCase().indexOf(I.toLocaleLowerCase()) === 0);
+      return K ? s.indexOf(K) : -1;
+    }
+    const t = E.current;
+    if (r.current.length > 0 && r.current[0] !== " " && (C(t, t, r.current) === -1 ? n(!1) : e.key === " " && O(e)), t == null || P.includes(e.key) || // Character key.
+    e.key.length !== 1 || // Modifier key.
+    e.ctrlKey || e.metaKey || e.altKey)
+      return;
+    c && e.key !== " " && (O(e), n(!0)), t.every((s) => s ? s[0]?.toLocaleLowerCase() !== s[1]?.toLocaleLowerCase() : !0) && r.current === e.key && (r.current = "", i.current = f.current), r.current += e.key, m.start(F, () => {
+      r.current = "", i.current = f.current, n(!1);
+    });
+    const w = i.current, d = C(t, [...t.slice((w || 0) + 1), ...t.slice(0, (w || 0) + 1)], r.current);
+    d !== -1 ? (A?.(d), f.current = d) : e.key !== " " && (r.current = "", n(!1));
+  }), k = o.useMemo(() => ({
+    onKeyDown: a
+  }), [a]), M = o.useMemo(() => ({
+    onKeyDown: a,
+    onKeyUp(e) {
+      e.key === " " && n(!1);
+    }
+  }), [a, n]);
+  return o.useMemo(() => h ? {
+    reference: k,
+    floating: M
+  } : {}, [h, k, M]);
+}
+export {
+  H as useTypeahead
+};