@rpcbase/ui 0.246.0 → 0.248.0

package/dist/index49.js

@@ -1,261 +1,336 @@
-import * as M from "react";
-import { rectToClientRect as Jt } from "./index299.js";
-import { addEventListener as Qt } from "./index300.js";
-import { useStableCallback as te } from "./index262.js";
-import { ownerDocument as Tt } from "./index284.js";
-import { useIsoLayoutEffect as rt } from "./index261.js";
-import { useAnimationFrame as ee } from "./index301.js";
-import { useSelectRootContext as oe, useSelectFloatingContext as ne } from "./index265.js";
-import { popupStateMapping as re } from "./index173.js";
-import { useSelectPositionerContext as ie } from "./index295.js";
-import { styleDisableScrollbar as Rt } from "./index302.js";
-import { transitionStatusMapping as se } from "./index174.js";
-import { useOpenChangeComplete as le } from "./index182.js";
-import { useRenderElement as ce } from "./index172.js";
-import { selectors as a } from "./index270.js";
-import { clearStyles as Ct, LIST_FUNCTIONAL_STYLES as ae } from "./index296.js";
+import * as n from "react";
+import { visuallyHiddenInput as nt, visuallyHidden as st } from "./index254.js";
+import { useMergedRefs as lt } from "./index255.js";
+import { useRefWithInit as it } from "./index256.js";
+import { useOnFirstRender as at } from "./index257.js";
+import { usePreviousValue as ut } from "./index258.js";
+import { isElementDisabled as ct } from "./index259.js";
+import { useControlled as de } from "./index260.js";
+import { useIsoLayoutEffect as P } from "./index261.js";
+import { useStableCallback as C } from "./index262.js";
+import { useValueAsRef as ft } from "./index263.js";
+import { EMPTY_OBJECT as dt, EMPTY_ARRAY as me } from "./index264.js";
+import { SelectRootContext as mt, SelectFloatingContext as pt } from "./index265.js";
+import { useFieldRootContext as gt } from "./index266.js";
+import { useRegisterFieldControl as ht } from "./index267.js";
+import { useLabelableId as Rt } from "./index268.js";
+import { useTransitionStatus as yt } from "./index269.js";
+import { selectors as M } from "./index270.js";
 import { createChangeEventDetails as pe } from "./index175.js";
-import { useToolbarRootContext as me } from "./index303.js";
-import { COMPOSITE_KEYS as ue } from "./index183.js";
-import { getDisabledMountTransitionStyles as ge } from "./index304.js";
-import { clamp as U } from "./index305.js";
-import { SCROLL_EDGE_TOLERANCE_PX as v, getMaxScrollOffset as fe } from "./index276.js";
-import { useCSPContext as he } from "./index306.js";
-import { useDirection as de } from "./index307.js";
-import { j as Ht } from "./index28.js";
-import { useStore as d } from "./index277.js";
-import { getWindow as it } from "./index308.js";
-import { FloatingFocusManager as ye } from "./index185.js";
-import { platform as xe } from "./index309.js";
-import { webkit as Se } from "./index310.js";
-import { windowResize as Te } from "./index177.js";
-const Re = {
-  ...re,
-  ...se
-}, Ce = /* @__PURE__ */ M.forwardRef(function(o, F) {
+import { useOpenChangeComplete as It } from "./index182.js";
+import { useFormContext as xt } from "./index271.js";
+import { stringifyAsValue as I, stringifyAsLabel as vt } from "./index272.js";
+import { defaultItemEquality as Ct, findItemIndex as ge, compareItemEquality as bt } from "./index273.js";
+import { areArraysEqual as Vt } from "./index274.js";
+import { useValueChanged as At } from "./index275.js";
+import { useOpenInteractionType as St } from "./index192.js";
+import { getMaxScrollOffset as Pt, normalizeScrollOffset as Mt } from "./index276.js";
+import { j as w } from "./index30.js";
+import { useStore as E } from "./index277.js";
+import { useFloatingRootContext as wt } from "./index278.js";
+import { useClick as Et } from "./index193.js";
+import { useDismiss as Ot } from "./index279.js";
+import { useListNavigation as Tt } from "./index280.js";
+import { useTypeahead as Ft } from "./index281.js";
+import { mergeProps as he } from "./index282.js";
+import { FOCUSABLE_POPUP_PROPS as Lt } from "./index184.js";
+import { Store as Ut } from "./index283.js";
+import { none as Ht, focusOut as qt, outsidePress as Dt } from "./index177.js";
+function Cr(Re) {
   const {
-    render: y,
-    className: A,
-    style: Ee,
-    finalFocus: Mt,
-    ...vt
-  } = o, {
-    store: i,
-    popupRef: p,
-    onOpenChangeComplete: Ft,
-    setOpen: st,
-    valueRef: lt,
-    firstItemTextRef: J,
-    selectedItemTextRef: ct,
-    multiple: wt,
-    handleScrollArrowVisibility: H,
-    scrollHandlerRef: Bt,
-    listRef: at,
-    highlightItemOnHover: pt
-  } = oe(), {
-    side: It,
-    align: Ot,
-    alignItemWithTriggerActive: s,
-    isPositioned: mt,
-    setControlledAlignItemWithTrigger: ut
-  } = ie(), At = me() != null, Lt = ne(), Q = de(), {
-    nonce: Dt,
-    disableStyleElements: Nt
-  } = he(), _t = d(i, a.id), m = d(i, a.open), $t = d(i, a.openMethod), Vt = d(i, a.mounted), Wt = d(i, a.popupProps), gt = d(i, a.transitionStatus), L = d(i, a.triggerElement), t = d(i, a.positionerElement), w = d(i, a.listElement), D = M.useRef(!1), N = M.useRef(!1), k = M.useRef({}), ft = ee(), tt = te((e) => {
-    if (!t || !p.current || !N.current)
-      return;
-    if (D.current || !s) {
-      H();
-      return;
-    }
-    const x = t.style.top === "0px", u = t.style.bottom === "0px";
-    if (!x && !u) {
-      H();
-      return;
-    }
-    const K = Pt(t), g = j(t.getBoundingClientRect().height, "y", K), _ = Tt(t), $ = it(t), V = $.getComputedStyle(t), B = parseFloat(V.marginTop), f = parseFloat(V.marginBottom), l = Et($.getComputedStyle(p.current)), S = Math.min(_.documentElement.clientHeight - B - f, l), c = e.scrollTop, W = X(e);
-    let T = 0, R = null, E = !1, I = !1;
-    const q = (r) => {
-      t.style.height = `${r}px`;
-    }, et = (r, O) => {
-      const z = U(r, 0, S - g);
-      z > 0 && q(g + z), e.scrollTop = O, S - (g + z) <= v && (D.current = !0), H();
-    }, P = x ? W - c : c, Y = Math.min(g + P, S);
-    if (T = Y, P <= v) {
-      et(P, x ? W : 0);
-      return;
-    }
-    if (S - Y > v)
-      x ? I = !0 : R = 0;
-    else if (E = !0, u && c < W) {
-      const r = g + P - S;
-      R = c - (P - r);
-    }
-    if (T = Math.ceil(T), T !== 0 && q(T), I || R != null) {
-      const r = X(e), O = I ? r : U(R, 0, r);
-      Math.abs(e.scrollTop - O) > v && (e.scrollTop = O);
+    id: ye,
+    value: Ie,
+    defaultValue: G = null,
+    onValueChange: xe,
+    open: ve,
+    defaultOpen: Ce = !1,
+    onOpenChange: be,
+    name: K,
+    form: O,
+    autoComplete: Ve,
+    disabled: Ae = !1,
+    readOnly: p = !1,
+    required: T = !1,
+    modal: F = !0,
+    actionsRef: Q,
+    inputRef: Se,
+    onOpenChangeComplete: L,
+    items: U,
+    multiple: s = !1,
+    itemToStringLabel: b,
+    itemToStringValue: a,
+    isItemEqualToValue: g = Ct,
+    highlightItemOnHover: H = !0,
+    children: Pe
+  } = Re, {
+    clearErrors: Me
+  } = xt(), {
+    setDirty: we,
+    setTouched: Ee,
+    setFocused: Oe,
+    validityData: Te,
+    setFilled: X,
+    name: Fe,
+    disabled: Le,
+    validation: y,
+    validationMode: Ue
+  } = gt(), f = Rt({
+    id: ye
+  }), c = Le || Ae, d = Fe ?? K, [t, He] = de({
+    controlled: Ie,
+    default: s ? G ?? me : G,
+    name: "Select",
+    state: "value"
+  }), [l, qe] = de({
+    controlled: ve,
+    default: Ce,
+    name: "Select",
+    state: "open"
+  }), q = n.useRef([]), D = n.useRef([]), j = n.useRef(null), De = n.useRef(null), je = n.useRef(0), Ne = n.useRef(null), h = n.useRef([]), Z = n.useRef(!1), _e = n.useRef(null), N = n.useRef(null), ke = n.useRef({
+    allowSelectedMouseUp: !1,
+    allowUnselectedMouseUp: !1,
+    dragY: 0
+  }), Ye = n.useRef(!1), {
+    mounted: _,
+    setMounted: ze,
+    transitionStatus: k
+  } = yt(l), {
+    openMethod: ee,
+    triggerProps: te
+  } = St(l), r = it(() => new Ut({
+    id: f,
+    labelId: void 0,
+    modal: F,
+    multiple: s,
+    itemToStringLabel: b,
+    itemToStringValue: a,
+    isItemEqualToValue: g,
+    value: t,
+    open: l,
+    mounted: _,
+    transitionStatus: k,
+    items: U,
+    forceMount: !1,
+    openMethod: null,
+    activeIndex: null,
+    selectedIndex: null,
+    popupProps: {},
+    triggerProps: {},
+    triggerElement: null,
+    positionerElement: null,
+    listElement: null,
+    popupSide: null,
+    scrollUpArrowVisible: !1,
+    scrollDownArrowVisible: !1,
+    hasScrollArrows: !1
+  })).current, re = E(r, M.activeIndex), oe = E(r, M.selectedIndex), Be = E(r, M.triggerElement), We = E(r, M.positionerElement), Je = ut(ee), ne = ee ?? Je ?? null, $e = n.useMemo(() => s ? "" : I(t, a), [s, t, a]), Ge = n.useMemo(() => s && Array.isArray(t) ? t.map((e) => I(e, a)) : I(t, a), [s, t, a]), Ke = ft(r.state.triggerElement), Qe = C(() => Ge);
+  ht(Ke, f, t, Qe, !c, K);
+  const se = n.useRef(t), Y = s ? Array.isArray(t) && t.length > 0 : t != null && I(t, a) !== "";
+  P(() => {
+    t !== se.current && r.set("forceMount", !0);
+  }, [r, t]), P(() => {
+    X(Y);
+  }, [Y, X]), P(function() {
+    const o = h.current;
+    let u;
+    if (s) {
+      const i = Array.isArray(t) ? t : [];
+      if (i.length === 0)
+        u = null;
+      else {
+        const m = i[i.length - 1], R = ge(o, m, g);
+        u = R === -1 ? null : R;
+      }
+    } else {
+      const i = ge(o, t, g);
+      u = i === -1 ? null : i;
     }
-    (E || T >= S - v) && (D.current = !0), H();
+    u === null && (N.current = null), !l && r.set("selectedIndex", u);
+  }, [Y, s, l, t, h, g, r, N]);
+  function Xe(e) {
+    const o = Te.initialValue;
+    return Array.isArray(e) && Array.isArray(o) ? !Vt(e, o, (u, i) => bt(u, i, g)) : e !== o;
+  }
+  At(t, () => {
+    Me(d), we(Xe(t)), y.change(t);
   });
-  M.useImperativeHandle(Bt, () => tt, [tt]), le({
-    open: m,
-    ref: p,
-    onComplete() {
-      m && Ft?.(!0);
-    }
+  const z = C((e, o) => {
+    be?.(e, o), !o.isCanceled && (qe(e), !e && (o.reason === qt || o.reason === Dt) && (Ee(!0), Oe(!1), Ue === "onBlur" && y.commit(t)));
+  }), B = C(() => {
+    ze(!1), r.update({
+      activeIndex: null,
+      openMethod: null
+    }), L?.(!1);
   });
-  const Yt = {
-    open: m,
-    transitionStatus: gt,
-    side: It,
-    align: Ot
-  };
-  rt(() => {
-    !t || !p.current || Object.keys(k.current).length || (k.current = {
-      top: t.style.top || "0",
-      left: t.style.left || "0",
-      right: t.style.right,
-      height: t.style.height,
-      bottom: t.style.bottom,
-      minHeight: t.style.minHeight,
-      maxHeight: t.style.maxHeight,
-      marginTop: t.style.marginTop,
-      marginBottom: t.style.marginBottom
-    });
-  }, [p, t]), rt(() => {
-    m || s || (N.current = !1, D.current = !1, Ct(t, k.current));
-  }, [m, s, t, p]), rt(() => {
-    const e = p.current;
-    if (!m || !L || !t || !e || s && !mt || i.state.transitionStatus === "ending")
-      return;
-    if (!s) {
-      N.current = !0, ft.request(H), e.style.removeProperty("--transform-origin");
-      return;
-    }
-    const x = He(e);
-    e.style.removeProperty("--transform-origin");
-    try {
-      let u = ct.current;
-      u?.isConnected || (u = !a.hasSelectedValue(i.state) && J.current?.isConnected ? J.current : null);
-      const K = lt.current, g = it(t), _ = g.getComputedStyle(t), $ = g.getComputedStyle(e), V = Tt(L), B = Pt(L), f = Z(L.getBoundingClientRect(), B), l = Z(t.getBoundingClientRect(), B), S = f.height, c = w || e, W = c.scrollHeight, T = parseFloat($.borderBottomWidth), R = parseFloat(_.marginTop) || 10, E = parseFloat(_.marginBottom) || 10, I = parseFloat(_.minHeight) || 100, q = Et($), et = 5, P = 5, Y = 20, r = V.documentElement.clientHeight - R - E, O = V.documentElement.clientWidth, z = r - f.bottom + S;
-      let C, ht = Q === "rtl" ? f.right - l.width : f.left, dt = 0;
-      if (u && K) {
-        const h = Z(K.getBoundingClientRect(), B);
-        C = Z(u.getBoundingClientRect(), B), ht = l.left + (Q === "rtl" ? h.right - C.right : h.left - C.left);
-        const G = h.top - f.top + h.height / 2;
-        dt = C.top - l.top + C.height / 2 - G;
-      }
-      const ot = z + dt + E + T;
-      let b = Math.min(r, ot);
-      const kt = r - R - E, nt = ot - b, Kt = O - P;
-      t.style.left = `${U(ht, et, Kt - l.width)}px`, t.style.height = `${b}px`, t.style.maxHeight = "none", t.style.marginTop = `${R}px`, t.style.marginBottom = `${E}px`, e.style.height = "100%";
-      const yt = X(c), xt = nt >= yt - v;
-      xt && (b = Math.min(r, l.height) - (nt - yt));
-      const qt = f.top < Y || f.bottom > r - Y || Math.ceil(b) + v < Math.min(W, I), Gt = (g.visualViewport?.scale ?? 1) !== 1 && Se;
-      if (qt || Gt) {
-        N.current = !0, Ct(t, k.current), ut(!1);
-        return;
-      }
-      const Ut = Math.max(I, b);
-      if (xt) {
-        const h = Math.max(0, r - ot);
-        t.style.top = l.height >= kt ? "0" : `${h}px`, t.style.height = `${b}px`, c.scrollTop = X(c);
-      } else
-        t.style.bottom = "0", c.scrollTop = nt;
-      if (C) {
-        const h = l.top, G = l.height, St = C.top + C.height / 2, Xt = G > 0 ? (St - h) / G * 100 : 50, Zt = U(Xt, 0, 100);
-        e.style.setProperty("--transform-origin", `50% ${Zt}%`);
-      }
-      (Ut === r || b >= q) && (D.current = !0), H(), pt && i.state.selectedIndex === null && i.state.activeIndex === null && at.current[0] != null && i.set("activeIndex", 0), N.current = !0;
-    } finally {
-      x();
+  It({
+    enabled: !Q,
+    open: l,
+    ref: j,
+    onComplete() {
+      l || B();
     }
-  }, [i, m, t, L, lt, J, ct, p, H, s, ut, ft, w, at, pt, Q, mt]), M.useEffect(() => {
-    if (!s || !t || !m)
+  }), n.useImperativeHandle(Q, () => ({
+    unmount: B
+  }), [B]);
+  const V = C((e, o) => {
+    xe?.(e, o), !o.isCanceled && He(e);
+  }), le = C(() => {
+    const e = r.state.listElement || j.current;
+    if (!e)
       return;
-    const e = it(t);
-    function x(u) {
-      st(!1, pe(Te, u));
+    const o = Pt(e.scrollHeight, e.clientHeight), u = Mt(e.scrollTop, o), i = u > 0, m = u < o;
+    r.state.scrollUpArrowVisible !== i && r.set("scrollUpArrowVisible", i), r.state.scrollDownArrowVisible !== m && r.set("scrollDownArrowVisible", m);
+  }), x = wt({
+    open: l,
+    onOpenChange: z,
+    elements: {
+      reference: Be,
+      floating: We
     }
-    return Qt(e, "resize", x);
-  }, [st, s, t, m]);
-  const zt = {
-    ...w ? {
-      role: "presentation",
-      "aria-orientation": void 0
-    } : {
-      role: "listbox",
-      "aria-multiselectable": wt || void 0,
-      id: `${_t}-list`
-    },
-    onKeyDown(e) {
-      At && ue.has(e.key) && e.stopPropagation();
+  }), ie = Et(x, {
+    enabled: !p && !c,
+    event: "mousedown"
+  }), A = Ot(x), v = Tt(x, {
+    enabled: !p && !c,
+    listRef: q,
+    activeIndex: re,
+    selectedIndex: oe,
+    disabledIndices: me,
+    onNavigate(e) {
+      e === null && !l || r.set("activeIndex", e);
     },
-    onScroll(e) {
-      w || tt(e.currentTarget);
+    focusItemOnHover: H
+  }), S = Ft(x, {
+    enabled: !p && !c && (l || !s),
+    listRef: D,
+    activeIndex: re,
+    selectedIndex: oe,
+    // Skip disabled items while matching so typeahead advances to the next selectable item
+    // (a click can never select a disabled item and native `<select>` skips them too). Resolve
+    // the disabled state from the element via the attribute-only `isElementDisabled` so the
+    // hidden, force-mounted items used for closed-trigger typeahead aren't dropped by the
+    // `elementsRef`/visibility filter that `disabledIndices` deliberately sidesteps.
+    disabledIndices: (e) => ct(q.current[e]),
+    onMatch(e) {
+      l ? r.set("activeIndex", e) : V(h.current[e], pe("none"));
     },
-    ...s && {
-      style: w ? {
-        height: "100%"
-      } : ae
+    onTyping(e) {
+      Z.current = e;
     }
-  }, jt = ce("div", o, {
-    ref: [F, p],
-    state: Yt,
-    stateAttributesMapping: Re,
-    props: [Wt, zt, ge(gt), {
-      className: !w && s ? Rt.className : void 0
-    }, vt]
-  });
-  return /* @__PURE__ */ Ht.jsxs(M.Fragment, {
-    children: [!Nt && Rt.getElement(Dt), /* @__PURE__ */ Ht.jsx(ye, {
-      context: Lt,
-      modal: !1,
-      disabled: !Vt,
-      openInteractionType: $t,
-      returnFocus: Mt,
-      restoreFocus: !0,
-      children: jt
-    })]
-  });
-});
-process.env.NODE_ENV !== "production" && (Ce.displayName = "SelectPopup");
-function Et(n) {
-  const o = n.maxHeight || "";
-  return o.endsWith("px") && parseFloat(o) || 1 / 0;
-}
-function X(n) {
-  return fe(n.scrollHeight, n.clientHeight);
-}
-function Pt(n) {
-  return xe.getScale(n);
-}
-function j(n, o, F) {
-  return n / F[o];
-}
-function Z(n, o) {
-  return Jt({
-    x: j(n.x, "x", o),
-    y: j(n.y, "y", o),
-    width: j(n.width, "x", o),
-    height: j(n.height, "y", o)
+  }), W = n.useMemo(() => {
+    const e = he(S.reference, v.reference, A.reference, ie.reference, te);
+    return f && (e.id = f), e;
+  }, [ie.reference, S.reference, v.reference, A.reference, te, f]), J = n.useMemo(() => he(Lt, S.floating, v.floating, A.floating), [S.floating, v.floating, A.floating]), ae = v.item ?? dt;
+  at(() => {
+    r.update({
+      popupProps: J,
+      triggerProps: W
+    });
+  }), P(() => {
+    r.update({
+      id: f,
+      modal: F,
+      multiple: s,
+      value: t,
+      open: l,
+      mounted: _,
+      transitionStatus: k,
+      popupProps: J,
+      triggerProps: W,
+      items: U,
+      itemToStringLabel: b,
+      itemToStringValue: a,
+      isItemEqualToValue: g,
+      openMethod: ne
+    });
+  }, [r, f, F, s, t, l, _, k, J, W, U, b, a, g, ne]);
+  const Ze = n.useMemo(() => ({
+    store: r,
+    name: d,
+    required: T,
+    disabled: c,
+    readOnly: p,
+    multiple: s,
+    highlightItemOnHover: H,
+    setValue: V,
+    setOpen: z,
+    listRef: q,
+    popupRef: j,
+    scrollHandlerRef: De,
+    handleScrollArrowVisibility: le,
+    scrollArrowsMountedCountRef: je,
+    itemProps: ae,
+    valueRef: Ne,
+    valuesRef: h,
+    labelsRef: D,
+    typingRef: Z,
+    selectionRef: ke,
+    firstItemTextRef: _e,
+    selectedItemTextRef: N,
+    validation: y,
+    onOpenChangeComplete: L,
+    alignItemWithTriggerActiveRef: Ye,
+    initialValueRef: se
+  }), [r, d, T, c, p, s, H, V, z, ae, y, L, le]), et = lt(Se, y.inputRef), tt = s && Array.isArray(t) && t.length > 0, ue = s ? void 0 : d, rt = n.useMemo(() => !s || !Array.isArray(t) || !d ? null : t.map((e) => {
+    const o = I(e, a);
+    return /* @__PURE__ */ w.jsx("input", {
+      type: "hidden",
+      form: O,
+      name: d,
+      value: o,
+      disabled: c
+    }, o);
+  }), [s, t, O, d, a, c]);
+  return /* @__PURE__ */ w.jsx(mt.Provider, {
+    value: Ze,
+    children: /* @__PURE__ */ w.jsxs(pt.Provider, {
+      value: x,
+      children: [Pe, /* @__PURE__ */ w.jsx("input", {
+        ...y.getValidationProps(c, {
+          onFocus() {
+            r.state.triggerElement?.focus({
+              // Supported in Chrome from 144 (January 2026)
+              focusVisible: !0
+            });
+          },
+          // Handle browser autofill.
+          onChange(e) {
+            if (e.nativeEvent.defaultPrevented || c || p)
+              return;
+            const o = e.currentTarget.value, u = pe(Ht, e.nativeEvent);
+            function i() {
+              if (s)
+                return;
+              const m = o.toLowerCase();
+              let R = h.current.findIndex(($) => I($, a).toLowerCase() === m || vt($, b).toLowerCase() === m);
+              R === -1 && (R = h.current.findIndex(($, ot) => {
+                const fe = D.current[ot];
+                return fe != null && fe.toLowerCase() === m;
+              }));
+              const ce = R === -1 ? void 0 : h.current[R];
+              ce != null && V(ce, u);
+            }
+            r.set("forceMount", !0), queueMicrotask(i);
+          }
+        }),
+        id: f && ue == null ? `${f}-hidden-input` : void 0,
+        form: O,
+        name: ue,
+        autoComplete: Ve,
+        value: $e,
+        disabled: c,
+        required: T && !tt,
+        readOnly: p,
+        ref: et,
+        style: d ? nt : st,
+        tabIndex: -1,
+        "aria-hidden": !0,
+        suppressHydrationWarning: !0
+      }), rt]
+    })
   });
 }
-const bt = [["transform", "none"], ["scale", "1"], ["translate", "0 0"]];
-function He(n) {
-  const {
-    style: o
-  } = n, F = {};
-  for (const [y, A] of bt)
-    F[y] = o.getPropertyValue(y), o.setProperty(y, A, "important");
-  return () => {
-    for (const [y] of bt) {
-      const A = F[y];
-      A ? o.setProperty(y, A) : o.removeProperty(y);
-    }
-  };
-}
 export {
-  Ce as SelectPopup
+  Cr as SelectRoot
 };
 //# sourceMappingURL=index49.js.map