@rpcbase/ui 0.230.0 → 0.232.0

package/dist/index305.js

@@ -1,273 +1,282 @@
-import * as d from "react";
-import { getSide as B, getSideAxis as Me, getAlignment as He } from "./index312.js";
-import { ownerDocument as De } from "./index290.js";
-import { useIsoLayoutEffect as Q } from "./index262.js";
-import { useValueAsRef as z } from "./index264.js";
-import { useStableCallback as Je } from "./index263.js";
-import { useDirection as Ke } from "./index323.js";
-import { arrow as Ne } from "./index358.js";
-import { hide as Qe } from "./index359.js";
-import { DEFAULT_SIDES as Ze } from "./index360.js";
-import { flip as et, size as tt, offset as nt, shift as ot, limitShift as it } from "./index361.js";
-import { useFloating as rt } from "./index362.js";
-import { autoUpdate as ke } from "./index326.js";
-import { getWindow as st } from "./index324.js";
-function Le(a, u, h) {
-  const n = a === "inline-start" || a === "inline-end";
-  return {
-    top: "top",
-    right: n ? h ? "inline-start" : "inline-end" : "right",
-    bottom: "bottom",
-    left: n ? h ? "inline-end" : "inline-start" : "left"
-  }[u];
+import * as f from "react";
+import { isHTMLElement as Ce } from "./index334.js";
+import { useValueAsRef as z } from "./index288.js";
+import { useStableCallback as X } from "./index287.js";
+import { useIsoLayoutEffect as A } from "./index286.js";
+import { ownerDocument as Te } from "./index309.js";
+import { getFloatingFocusElement as Ve, isTypeableCombobox as ze } from "./index315.js";
+import { stopEvent as T, isVirtualClick as Ge, isVirtualPointerEvent as We } from "./index375.js";
+import { isIndexOutOfListBounds as Fe, getMinListIndex as me, getMaxListIndex as Se, createGridCellMap as _e, isListIndexDisabled as pe, getGridNavigatedIndex as qe, getGridCellIndexOfCorner as He, getGridCellIndices as $e, findNonDisabledListIndex as Y } from "./index378.js";
+import { useFloatingParentNodeId as Be, useFloatingTree as Qe } from "./index382.js";
+import { createChangeEventDetails as Z } from "./index175.js";
+import { enqueueFocus as Ue } from "./index380.js";
+import { ARROW_DOWN as re, ARROW_LEFT as G, ARROW_RIGHT as W, ARROW_UP as Ae } from "./index385.js";
+import { activeElement as ge, contains as Re, getTarget as je } from "./index316.js";
+import { listNavigation as he, focusOut as Je } from "./index177.js";
+const Xe = "Escape";
+function te(c, p, u) {
+  switch (c) {
+    case "vertical":
+      return p;
+    case "horizontal":
+      return u;
+    default:
+      return p || u;
+  }
 }
-function Ce(a, u, h) {
-  const {
-    rects: n,
-    placement: c
-  } = a;
-  return {
-    side: Le(u, B(c), h),
-    align: He(c) || "center",
-    anchor: {
-      width: n.reference.width,
-      height: n.reference.height
+function ee(c, p) {
+  return te(p, c === Ae || c === re, c === G || c === W);
+}
+function Ie(c, p, u) {
+  return te(p, c === re, u ? c === G : c === W) || c === "Enter" || c === " " || c === "";
+}
+function Ye(c, p, u) {
+  return te(p, u ? c === G : c === W, c === re);
+}
+function Ze(c, p, u, i) {
+  const g = u ? c === W : c === G, E = c === Ae;
+  return p === "both" || p === "horizontal" && i && i > 1 ? c === Xe : te(p, g, E);
+}
+function pr(c, p) {
+  const u = "rootStore" in c ? c.rootStore : c, i = u.useState("open"), g = u.useState("floatingElement"), E = u.useState("domReferenceElement"), Ee = u.context.dataRef, {
+    listRef: o,
+    activeIndex: O,
+    onNavigate: Le = () => {
     },
-    positioner: {
-      width: n.floating.width,
-      height: n.floating.height
+    enabled: y = !0,
+    selectedIndex: L = null,
+    allowEscape: ne = !1,
+    loopFocus: _ = !1,
+    nested: b = !1,
+    rtl: x = !1,
+    virtual: d = !1,
+    focusItemOnOpen: M = "auto",
+    focusItemOnHover: oe = !0,
+    openOnArrowKeyDown: ce = !0,
+    disabledIndices: R = void 0,
+    orientation: m = "vertical",
+    parentOrientation: xe,
+    cols: F = 1,
+    id: Oe,
+    resetOnPointerLeave: Ne = !0,
+    externalTree: ke
+  } = p;
+  process.env.NODE_ENV !== "production" && (ne && (_ || console.warn("`useListNavigation` looping must be enabled to allow escaping."), d || console.warn("`useListNavigation` must be virtual to allow escaping.")), m === "vertical" && F > 1 && console.warn("In grid list navigation mode (`cols` > 1), the `orientation` should", 'be either "horizontal" or "both".'));
+  const De = Ve(g), N = z(De), q = Be(), v = Qe(ke);
+  A(() => {
+    Ee.current.orientation = m;
+  }, [Ee, m]);
+  const ue = ze(E), P = f.useRef(M), n = f.useRef(L ?? -1), C = f.useRef(null), S = f.useRef(!0), a = X((e) => {
+    Le(n.current === -1 ? null : n.current, e);
+  }), ye = f.useRef(a), k = f.useRef(!!g), we = f.useRef(i), h = f.useRef(!1), H = f.useRef(!1), ie = f.useRef(null), se = z(R), $ = z(i), D = z(L), be = z(Ne), le = X(() => {
+    function e(l) {
+      d ? v?.events.emit("virtualfocus", l) : ie.current = Ue(l, {
+        sync: h.current,
+        preventScroll: !0
+      });
     }
-  };
-}
-function St(a) {
-  const {
-    // Public parameters
-    anchor: u,
-    positionMethod: h = "absolute",
-    side: n = "bottom",
-    sideOffset: c = 0,
-    align: R = "center",
-    alignOffset: V = 0,
-    collisionBoundary: Z,
-    collisionPadding: Te = 5,
-    sticky: W = !1,
-    arrowPadding: ee = 5,
-    disableAnchorTracking: I = !1,
-    // Private parameters
-    keepMounted: M = !1,
-    floatingRootContext: D,
-    mounted: o,
-    collisionAvoidance: U,
-    shiftCrossAxis: S = !1,
-    nodeId: ze,
-    adaptiveOrigin: Y,
-    lazyFlip: te = !1,
-    externalTree: Be
-  } = a, [ne, oe] = d.useState(null);
-  !o && ne !== null && oe(null);
-  const P = U.side || "flip", O = U.align || "flip", Ve = U.fallbackAxisSide || "end", ie = typeof u == "function" ? u : void 0, We = Je(ie), re = ie ? We : u, k = z(u), Ie = z(o), x = Ke() === "rtl", se = ne || {
-    top: "top",
-    right: "right",
-    bottom: "bottom",
-    left: "left",
-    "inline-end": x ? "left" : "right",
-    "inline-start": x ? "right" : "left"
-  }[n], Ue = R === "center" ? se : `${se}-${R}`;
-  let t = Te;
-  const p = 1, ce = n === "bottom" ? p : 0, le = n === "top" ? p : 0, ae = n === "right" ? p : 0, fe = n === "left" ? p : 0;
-  typeof t == "number" ? t = {
-    top: t + ce,
-    right: t + fe,
-    bottom: t + le,
-    left: t + ae
-  } : t && (t = {
-    top: (t.top || 0) + ce,
-    right: (t.right || 0) + fe,
-    bottom: (t.bottom || 0) + le,
-    left: (t.left || 0) + ae
+    const r = o.current[n.current], t = H.current;
+    r && e(r), (h.current ? (l) => l() : requestAnimationFrame)(() => {
+      const l = o.current[n.current] || r;
+      if (!l)
+        return;
+      r || e(l), // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      fe && (t || !S.current) && l.scrollIntoView?.({
+        block: "nearest",
+        inline: "nearest"
+      });
+    });
   });
-  const C = {
-    boundary: Z === "clipping-ancestors" ? "clippingAncestors" : Z,
-    padding: t
-  }, m = d.useRef(null), X = z(c), j = z(V), F = [nt((e) => {
-    const i = Ce(e, n, x), l = typeof X.current == "function" ? X.current(i) : X.current, r = typeof j.current == "function" ? j.current(i) : j.current;
-    return {
-      mainAxis: l,
-      crossAxis: r,
-      alignmentAxis: r
-    };
-  }, [typeof c != "function" ? c : 0, typeof V != "function" ? V : 0, x, n])], de = O === "none" && P !== "shift", ue = !de && (W || S || P === "shift"), pe = P === "none" ? null : et({
-    ...C,
-    // Ensure the popup flips if it's been limited by its --available-height and it resizes.
-    // Since the size() padding is smaller than the flip() padding, flip() will take precedence.
-    padding: {
-      top: t.top + p,
-      right: t.right + p,
-      bottom: t.bottom + p,
-      left: t.left + p
-    },
-    mainAxis: !S && P === "flip",
-    crossAxis: O === "flip" ? "alignment" : !1,
-    fallbackAxisSideDirection: Ve
-  }), he = de ? null : ot((e) => {
-    const i = De(e.elements.floating).documentElement;
-    return {
-      ...C,
-      // Use the Layout Viewport to avoid shifting around when pinch-zooming
-      // for context menus.
-      rootBoundary: S ? {
-        x: 0,
-        y: 0,
-        width: i.clientWidth,
-        height: i.clientHeight
-      } : void 0,
-      mainAxis: O !== "none",
-      crossAxis: ue,
-      limiter: W || S ? void 0 : it((l) => {
-        if (!m.current)
-          return {};
-        const {
-          width: r,
-          height: f
-        } = m.current.getBoundingClientRect(), s = Me(B(l.placement)), y = s === "y" ? r : f, A = s === "y" ? t.left + t.right : t.top + t.bottom;
-        return {
-          offset: y / 2 + A / 2
-        };
-      })
-    };
-  }, [C, W, S, t, O]);
-  P === "shift" || O === "shift" || R === "center" ? F.push(he, pe) : F.push(pe, he), F.push(tt({
-    ...C,
-    apply({
-      elements: {
-        floating: e
-      },
-      availableWidth: i,
-      availableHeight: l,
-      rects: r
-    }) {
-      if (!Ie.current)
+  A(() => {
+    y && (i && g ? (n.current = L ?? -1, P.current && L != null && (H.current = !0, a())) : k.current && (n.current = -1, ye.current()));
+  }, [y, i, g, L, a]), A(() => {
+    if (y) {
+      if (!i) {
+        h.current = !1;
         return;
-      const f = e.style;
-      f.setProperty("--available-width", `${i}px`), f.setProperty("--available-height", `${l}px`);
-      const s = st(e).devicePixelRatio || 1, {
-        x: y,
-        y: A,
-        width: T,
-        height: G
-      } = r.reference, J = (Math.round((y + T) * s) - Math.round(y * s)) / s, K = (Math.round((A + G) * s) - Math.round(A * s)) / s;
-      f.setProperty("--anchor-width", `${J}px`), f.setProperty("--anchor-height", `${K}px`);
-    }
-  }), Ne(() => ({
-    // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
-    // we'll create a fake element.
-    element: m.current || De(m.current).createElement("div"),
-    padding: ee,
-    offsetParent: "floating"
-  }), [ee]), {
-    name: "transformOrigin",
-    fn(e) {
-      const {
-        elements: i,
-        middlewareData: l,
-        placement: r,
-        rects: f,
-        y: s
-      } = e, y = B(r), A = Me(y), T = m.current, G = l.arrow?.x || 0, J = l.arrow?.y || 0, K = T?.clientWidth || 0, Ye = T?.clientHeight || 0, N = G + K / 2, Ee = J + Ye / 2, Xe = Math.abs(l.shift?.y || 0), je = f.reference.height / 2, E = typeof c == "function" ? c(Ce(e, n, x)) : c, _e = Xe > E, qe = {
-        top: `${N}px calc(100% + ${E}px)`,
-        bottom: `${N}px ${-E}px`,
-        left: `calc(100% + ${E}px) ${Ee}px`,
-        right: `${-E}px ${Ee}px`
-      }[y], Ge = `${N}px ${f.reference.y + je - s}px`;
-      return i.floating.style.setProperty("--transform-origin", ue && A === "y" && _e ? Ge : qe), {};
+      }
+      if (g)
+        if (O == null) {
+          if (h.current = !1, D.current != null)
+            return;
+          if (k.current && (n.current = -1, le()), (!we.current || !k.current) && P.current && (C.current != null || P.current === !0 && C.current == null)) {
+            let e = 0;
+            const r = () => {
+              o.current[0] == null ? (e < 2 && (e ? requestAnimationFrame : queueMicrotask)(r), e += 1) : (n.current = C.current == null || Ie(C.current, m, x) || b ? me(o) : Se(o), C.current = null, a());
+            };
+            r();
+          }
+        } else Fe(o.current, O) || (n.current = O, le(), H.current = !1);
     }
-  }, Qe, Y), Q(() => {
-    !o && D && D.update({
-      referenceElement: null,
-      floatingElement: null,
-      domReferenceElement: null,
-      positionReference: null
+  }, [y, i, g, O, D, b, o, m, x, a, le, se]), A(() => {
+    if (!y || g || !v || d || !k.current)
+      return;
+    const e = v.nodesRef.current, r = e.find((l) => l.id === q)?.context?.elements.floating, t = ge(Te(g)), s = e.some((l) => l.context && Re(l.context.elements.floating, t));
+    r && !s && S.current && r.focus({
+      preventScroll: !0
     });
-  }, [o, D]);
-  const _ = d.useMemo(() => ({
-    elementResize: !I && typeof ResizeObserver < "u",
-    layoutShift: !I && typeof IntersectionObserver < "u"
-  }), [I]), {
-    refs: b,
-    elements: v,
-    x: me,
-    y: ge,
-    middlewareData: w,
-    update: H,
-    placement: ye,
-    context: xe,
-    isPositioned: g,
-    floatingStyles: be
-  } = rt({
-    rootContext: D,
-    open: M ? o : void 0,
-    placement: Ue,
-    middleware: F,
-    strategy: h,
-    whileElementsMounted: M ? void 0 : (...e) => ke(...e, _),
-    nodeId: ze,
-    externalTree: Be
-  }), {
-    sideX: we,
-    sideY: Ae
-  } = w.adaptiveOrigin || Ze, q = g ? h : "fixed", Re = d.useMemo(() => {
-    const e = Y ? {
-      position: q,
-      [we]: me,
-      [Ae]: ge
-    } : {
-      position: q,
-      ...be
-    };
-    return g || (e.opacity = 0), e;
-  }, [Y, q, we, me, Ae, ge, be, g]), L = d.useRef(null);
-  Q(() => {
-    if (!o)
+  }, [y, g, v, q, d]), A(() => {
+    ye.current = a, we.current = i, k.current = !!g;
+  }), A(() => {
+    i || (C.current = null, P.current = M);
+  }, [i, M]);
+  const Me = O != null, ae = X((e) => {
+    if (!$.current)
+      return;
+    const r = o.current.indexOf(e.currentTarget);
+    r !== -1 && (n.current !== r || O !== r) && (n.current = r, a(e));
+  }), fe = f.useMemo(() => ({
+    onFocus(r) {
+      h.current = !0, ae(r);
+    },
+    onClick: ({
+      currentTarget: r
+    }) => r.focus({
+      preventScroll: !0
+    }),
+    // Safari
+    onMouseMove(r) {
+      h.current = !0, H.current = !1, oe && ae(r);
+    },
+    onPointerLeave(r) {
+      if (!$.current || !S.current || r.pointerType === "touch")
+        return;
+      h.current = !0;
+      const t = r.relatedTarget;
+      if (!(!oe || o.current.includes(t)) && be.current && (ie.current?.(), ie.current = null, n.current = -1, a(r), !d)) {
+        const s = N.current, l = ge(Te(s));
+        s && Re(s, l) && s.focus({
+          preventScroll: !0
+        });
+      }
+    }
+  }), [ae, $, N, oe, o, a, be, d]), B = f.useCallback(() => xe ?? v?.nodesRef.current.find((e) => e.id === q)?.context?.dataRef?.current.orientation, [q, v, xe]), K = X((e) => {
+    if (S.current = !1, h.current = !0, e.which === 229 || !$.current && e.currentTarget === N.current)
       return;
-    const e = k.current, i = typeof e == "function" ? e() : e, r = (Fe(i) ? i.current : i) || null || null;
-    r !== L.current && (b.setPositionReference(r), L.current = r);
-  }, [o, b, re, k]), d.useEffect(() => {
-    if (!o)
+    if (b && Ze(e.key, m, x, F)) {
+      ee(e.key, B()) || T(e), u.setOpen(!1, Z(he, e.nativeEvent)), Ce(E) && (d ? v?.events.emit("virtualfocus", E) : E.focus());
       return;
-    const e = k.current;
-    typeof e != "function" && Fe(e) && e.current !== L.current && (b.setPositionReference(e.current), L.current = e.current);
-  }, [o, b, re, k]), d.useEffect(() => {
-    if (M && o && v.domReference && v.floating)
-      return ke(v.domReference, v.floating, H, _);
-  }, [M, o, v, H, _]);
-  const $ = B(ye), Se = Le(n, $, x), Pe = He(ye) || "center", Oe = !!w.hide?.referenceHidden;
-  Q(() => {
-    te && o && g && oe($);
-  }, [te, o, g, $]);
-  const ve = d.useMemo(() => ({
-    position: "absolute",
-    top: w.arrow?.y,
-    left: w.arrow?.x
-  }), [w.arrow]), $e = w.arrow?.centerOffset !== 0;
-  return d.useMemo(() => ({
-    positionerStyles: Re,
-    arrowStyles: ve,
-    arrowRef: m,
-    arrowUncentered: $e,
-    side: Se,
-    align: Pe,
-    physicalSide: $,
-    anchorHidden: Oe,
-    refs: b,
-    context: xe,
-    isPositioned: g,
-    update: H
-  }), [Re, ve, m, $e, Se, Pe, $, Oe, b, xe, g, H]);
-}
-function Fe(a) {
-  return a != null && "current" in a;
+    }
+    const r = n.current, t = me(o, R), s = Se(o, R);
+    if (ue || (e.key === "Home" && (T(e), n.current = t, a(e)), e.key === "End" && (T(e), n.current = s, a(e))), F > 1) {
+      const l = Array.from({
+        length: o.current.length
+      }, () => ({
+        width: 1,
+        height: 1
+      })), I = _e(l, F), j = I.findIndex((w) => w != null && !pe(o.current, w, R)), de = I.reduce((w, V, Ke) => V != null && !pe(o.current, V, R) ? Ke : w, -1), J = I[qe(I.map((w) => w != null ? o.current[w] : null), {
+        event: e,
+        orientation: m,
+        loopFocus: _,
+        rtl: x,
+        cols: F,
+        // treat undefined (empty grid spaces) as disabled indices so we
+        // don't end up in them
+        disabledIndices: $e([...(typeof R != "function" ? R : null) || o.current.map((w, V) => pe(o.current, V, R) ? V : void 0), void 0], I),
+        minIndex: j,
+        maxIndex: de,
+        prevIndex: He(
+          n.current > s ? t : n.current,
+          l,
+          I,
+          F,
+          // 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 === re ? "bl" : e.key === (x ? G : W) ? "tr" : "tl"
+        ),
+        stopEvent: !0
+      })];
+      if (J != null && (n.current = J, a(e)), m === "both")
+        return;
+    }
+    if (ee(e.key, m)) {
+      if (T(e), i && !d && ge(e.currentTarget.ownerDocument) === e.currentTarget) {
+        n.current = Ie(e.key, m, x) ? t : s, a(e);
+        return;
+      }
+      Ie(e.key, m, x) ? _ ? r >= s ? ne && r !== o.current.length ? n.current = -1 : (h.current = !1, n.current = t) : n.current = Y(o.current, {
+        startingIndex: r,
+        disabledIndices: R
+      }) : n.current = Math.min(s, Y(o.current, {
+        startingIndex: r,
+        disabledIndices: R
+      })) : _ ? r <= t ? ne && r !== -1 ? n.current = o.current.length : (h.current = !1, n.current = s) : n.current = Y(o.current, {
+        startingIndex: r,
+        decrement: !0,
+        disabledIndices: R
+      }) : n.current = Math.max(t, Y(o.current, {
+        startingIndex: r,
+        decrement: !0,
+        disabledIndices: R
+      })), Fe(o.current, n.current) && (n.current = -1), a(e);
+    }
+  }), Q = f.useMemo(() => d && i && Me && {
+    "aria-activedescendant": `${Oe}-${O}`
+  }, [d, i, Me, Oe, O]), ve = f.useMemo(() => ({
+    "aria-orientation": m === "both" ? void 0 : m,
+    ...ue ? {} : Q,
+    onKeyDown(e) {
+      if (e.key === "Tab" && e.shiftKey && i && !d) {
+        const r = je(e.nativeEvent);
+        if (r && !Re(N.current, r))
+          return;
+        T(e), u.setOpen(!1, Z(Je, e.nativeEvent)), Ce(E) && E.focus();
+        return;
+      }
+      K(e);
+    },
+    onPointerMove() {
+      S.current = !0;
+    }
+  }), [Q, K, N, m, ue, u, i, d, E]), U = f.useMemo(() => {
+    function e(t) {
+      M === "auto" && Ge(t.nativeEvent) && (P.current = !d);
+    }
+    function r(t) {
+      P.current = M, M === "auto" && We(t.nativeEvent) && (P.current = !0);
+    }
+    return {
+      onKeyDown(t) {
+        const s = u.select("open");
+        S.current = !1;
+        const l = t.key.startsWith("Arrow"), I = Ye(t.key, B(), x), j = ee(t.key, m), de = (b ? I : j) || t.key === "Enter" || t.key.trim() === "";
+        if (d && s)
+          return K(t);
+        if (!(!s && !ce && l)) {
+          if (de) {
+            const J = ee(t.key, B());
+            C.current = b && J ? null : t.key;
+          }
+          if (b) {
+            I && (T(t), s ? (n.current = me(o, se.current), a(t)) : u.setOpen(!0, Z(he, t.nativeEvent, t.currentTarget)));
+            return;
+          }
+          j && (D.current != null && (n.current = D.current), T(t), !s && ce ? u.setOpen(!0, Z(he, t.nativeEvent, t.currentTarget)) : K(t), s && a(t));
+        }
+      },
+      onFocus(t) {
+        u.select("open") && !d && (n.current = -1, a(t));
+      },
+      onPointerDown: r,
+      onPointerEnter: r,
+      onMouseDown: e,
+      onClick: e
+    };
+  }, [K, se, M, o, b, a, u, ce, m, B, x, D, d]), Pe = f.useMemo(() => ({
+    ...Q,
+    ...U
+  }), [Q, U]);
+  return f.useMemo(() => y ? {
+    reference: Pe,
+    floating: ve,
+    item: fe,
+    trigger: U
+  } : {}, [y, Pe, ve, U, fe]);
 }
 export {
-  St as useAnchorPositioning
+  Xe as ESCAPE,
+  pr as useListNavigation
 };
 //# sourceMappingURL=index305.js.map