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

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

@@ -1,66 +1,141 @@
-import * as O from "react";
-import { useAnimationFrame as P } from "./als-react-ts-ui346.js";
-import { useTimeout as b } from "./als-react-ts-ui195.js";
-import { createChangeEventDetails as v } from "./als-react-ts-ui246.js";
-import { isTypeableElement as I } from "./als-react-ts-ui331.js";
-import { EMPTY_OBJECT as x } from "./als-react-ts-ui303.js";
-import { isMouseLikePointerType as R } from "./als-react-ts-ui295.js";
-import { triggerPress as k } from "./als-react-ts-ui248.js";
-function L(d, M = {}) {
-  const e = "rootStore" in d ? d.rootStore : d, T = e.context.dataRef, {
-    enabled: h = !0,
-    event: a = "click",
-    toggle: g = !0,
-    ignoreMouse: y = !1,
-    stickIfOpen: E = !0,
-    touchOpenDelay: n = 0
-  } = M, i = O.useRef(void 0), w = P(), m = b(), C = O.useMemo(() => ({
-    onPointerDown(t) {
-      i.current = t.pointerType;
-    },
-    onMouseDown(t) {
-      const o = i.current, r = t.nativeEvent, u = e.select("open");
-      if (t.button !== 0 || a === "click" || R(o, !0) && y)
-        return;
-      const s = T.current.openEvent, f = s?.type, l = e.select("domReferenceElement") !== t.currentTarget, c = u && l || !(u && g && (!(s && E) || f === "click" || f === "mousedown"));
-      if (I(r.target)) {
-        const p = v(k, r, r.target);
-        c && o === "touch" && n > 0 ? m.start(n, () => {
-          e.setOpen(!0, p);
-        }) : e.setOpen(c, p);
-        return;
-      }
-      const D = t.currentTarget;
-      w.request(() => {
-        const p = v(k, r, D);
-        c && o === "touch" && n > 0 ? m.start(n, () => {
-          e.setOpen(!0, p);
-        }) : e.setOpen(c, p);
-      });
-    },
-    onClick(t) {
-      if (a === "mousedown-only")
-        return;
-      const o = i.current;
-      if (a === "mousedown" && o) {
-        i.current = void 0;
-        return;
-      }
-      if (R(o, !0) && y)
-        return;
-      const r = e.select("open"), u = T.current.openEvent, s = u?.type, f = e.select("domReferenceElement") !== t.currentTarget, l = r && f || !(r && g && (!(u && E) || s === "click" || s === "mousedown" || s === "keydown" || s === "keyup")), c = v(k, t.nativeEvent, t.currentTarget);
-      l && o === "touch" && n > 0 ? m.start(n, () => {
-        e.setOpen(!0, c);
-      }) : e.setOpen(l, c);
-    },
-    onKeyDown() {
-      i.current = void 0;
+import * as n from "react";
+import { useControlled as Z } from "./als-react-ts-ui265.js";
+import { useMergedRefs as $ } from "./als-react-ts-ui272.js";
+import { useStableCallback as l } from "./als-react-ts-ui266.js";
+import { visuallyHidden as ee } from "./als-react-ts-ui359.js";
+import { useBaseUiId as oe } from "./als-react-ts-ui232.js";
+import { SHIFT as te } from "./als-react-ts-ui237.js";
+import { CompositeRoot as re } from "./als-react-ts-ui448.js";
+import { useField as ae } from "./als-react-ts-ui403.js";
+import { useFieldRootContext as ie } from "./als-react-ts-ui398.js";
+import { fieldValidityMapping as ne } from "./als-react-ts-ui409.js";
+import { useFieldsetRootContext as se } from "./als-react-ts-ui449.js";
+import { useFormContext as le } from "./als-react-ts-ui402.js";
+import { useLabelableContext as de } from "./als-react-ts-ui399.js";
+import { useValueChanged as ue } from "./als-react-ts-ui406.js";
+import { RadioGroupContext as me } from "./als-react-ts-ui524.js";
+import { jsxs as fe, jsx as P } from "react/jsx-runtime";
+import { NOOP as ce } from "./als-react-ts-ui304.js";
+import { contains as pe } from "./als-react-ts-ui312.js";
+import { mergeProps as be } from "./als-react-ts-ui305.js";
+const ge = [te], Ce = /* @__PURE__ */ n.forwardRef(function(x, F) {
+  const {
+    render: I,
+    className: v,
+    disabled: M,
+    readOnly: r,
+    required: a,
+    onValueChange: N,
+    value: O,
+    defaultValue: k,
+    name: E,
+    inputRef: S,
+    id: T,
+    ...p
+  } = x, {
+    setTouched: b,
+    setFocused: m,
+    shouldValidateOnChange: D,
+    validationMode: G,
+    name: w,
+    disabled: K,
+    state: d,
+    validation: t,
+    setDirty: q,
+    setFilled: A,
+    validityData: B
+  } = ie(), {
+    labelId: H
+  } = de(), {
+    clearErrors: j
+  } = le(), U = se(!0), i = K || M, s = w ?? E, g = oe(T), [e, _] = Z({
+    controlled: O,
+    default: k,
+    name: "RadioGroup",
+    state: "value"
+  }), f = l(N), C = l((o, V) => {
+    f(o, V), !V.isCanceled && _(o);
+  }), u = n.useRef(null), R = l((o) => {
+    u.current == null && o != null && (u.current = o);
+  });
+  ae({
+    id: g,
+    commit: t.commit,
+    value: e,
+    controlRef: u,
+    name: s,
+    getValue: () => e ?? null
+  }), ue(e, () => {
+    j(s), q(e !== B.initialValue), A(e != null), D() ? t.commit(e) : t.commit(e, !0);
+  });
+  const [h, c] = n.useState(!1), z = l((o) => {
+    pe(o.currentTarget, o.relatedTarget) || (b(!0), m(!1), G === "onBlur" && t.commit(e));
+  }), J = l((o) => {
+    o.key.startsWith("Arrow") && (b(!0), c(!0), m(!0));
+  }), y = n.useMemo(() => e == null ? "" : typeof e == "string" ? e : JSON.stringify(e), [e]), L = $(t.inputRef, S), W = be({
+    value: y,
+    ref: L,
+    id: g,
+    name: y ? s : void 0,
+    disabled: i,
+    readOnly: r,
+    required: a,
+    "aria-labelledby": p["aria-labelledby"] ?? U?.legendId,
+    "aria-hidden": !0,
+    tabIndex: -1,
+    style: ee,
+    onChange: ce,
+    // suppress a Next.js error
+    onFocus() {
+      u.current?.focus();
     }
-  }), [T, a, y, e, E, g, w, m, n]);
-  return O.useMemo(() => h ? {
-    reference: C
-  } : x, [h, C]);
-}
+  }, t.getInputValidationProps), Y = n.useMemo(() => ({
+    ...d,
+    disabled: i ?? !1,
+    required: a ?? !1,
+    readOnly: r ?? !1
+  }), [d, i, r, a]), Q = n.useMemo(() => ({
+    ...d,
+    checkedValue: e,
+    disabled: i,
+    validation: t,
+    name: s,
+    onValueChange: f,
+    readOnly: r,
+    registerControlRef: R,
+    required: a,
+    setCheckedValue: C,
+    setTouched: c,
+    touched: h
+  }), [e, i, t, d, s, f, r, R, a, C, c, h]), X = {
+    role: "radiogroup",
+    "aria-required": a || void 0,
+    "aria-disabled": i || void 0,
+    "aria-readonly": r || void 0,
+    "aria-labelledby": H,
+    onFocus() {
+      m(!0);
+    },
+    onBlur: z,
+    onKeyDownCapture: J
+  };
+  return /* @__PURE__ */ fe(me.Provider, {
+    value: Q,
+    children: [/* @__PURE__ */ P(re, {
+      render: I,
+      className: v,
+      state: Y,
+      props: [X, t.getValidationProps, p],
+      refs: [F],
+      stateAttributesMapping: ne,
+      enableHomeAndEndKeys: !1,
+      modifierKeys: ge
+    }), /* @__PURE__ */ P("input", {
+      ...W
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (Ce.displayName = "RadioGroup");
 export {
-  L as useClick
+  Ce as RadioGroup
 };

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

@@ -1,48 +1,37 @@
-import * as l from "react";
-import { FOCUSABLE_ATTRIBUTE as C, ACTIVE_KEY as s, SELECTED_KEY as E } from "./als-react-ts-ui390.js";
-function k(e = []) {
-  const a = e.map((n) => n?.reference), g = e.map((n) => n?.floating), f = e.map((n) => n?.item), t = e.map((n) => n?.trigger), o = l.useCallback(
-    (n) => u(n, e, "reference"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    a
-  ), c = l.useCallback(
-    (n) => u(n, e, "floating"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    g
-  ), i = l.useCallback(
-    (n) => u(n, e, "item"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    f
-  ), r = l.useCallback(
-    (n) => u(n, e, "trigger"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    t
-  );
-  return l.useMemo(() => ({
-    getReferenceProps: o,
-    getFloatingProps: c,
-    getItemProps: i,
-    getTriggerProps: r
-  }), [o, c, i, r]);
-}
-function u(e, a, g) {
-  const f = /* @__PURE__ */ new Map(), t = g === "item", o = {};
-  g === "floating" && (o.tabIndex = -1, o[C] = "");
-  for (const c in e)
-    t && e && (c === s || c === E) || (o[c] = e[c]);
-  for (let c = 0; c < a.length; c += 1) {
-    let i;
-    const r = a[c]?.[g];
-    typeof r == "function" ? i = e ? r(e) : null : i = r, i && m(o, i, t, f);
-  }
-  return m(o, e, t, f), o;
-}
-function m(e, a, g, f) {
-  for (const t in a) {
-    const o = a[t];
-    g && (t === s || t === E) || (t.startsWith("on") ? (f.has(t) || f.set(t, []), typeof o == "function" && (f.get(t)?.push(o), e[t] = (...c) => f.get(t)?.map((i) => i(...c)).find((i) => i !== void 0))) : e[t] = o);
-  }
-}
+import * as o from "react";
+import { useRenderElement as u } from "./als-react-ts-ui226.js";
+import { useRadioRootContext as l } from "./als-react-ts-ui534.js";
+import { stateAttributesMapping as R } from "./als-react-ts-ui533.js";
+import { useOpenChangeComplete as C } from "./als-react-ts-ui236.js";
+import { useTransitionStatus as M } from "./als-react-ts-ui342.js";
+const N = /* @__PURE__ */ o.forwardRef(function(n, i) {
+  const {
+    render: E,
+    className: I,
+    keepMounted: d = !1,
+    ...c
+  } = n, t = l(), e = t.checked, {
+    transitionStatus: r,
+    setMounted: m
+  } = M(e), p = o.useMemo(() => ({
+    ...t,
+    transitionStatus: r
+  }), [t, r]), s = o.useRef(null), a = d || e, f = u("span", n, {
+    enabled: a,
+    ref: [i, s],
+    state: p,
+    props: c,
+    stateAttributesMapping: R
+  });
+  return C({
+    open: e,
+    ref: s,
+    onComplete() {
+      e || m(!1);
+    }
+  }), a ? f : null;
+});
+process.env.NODE_ENV !== "production" && (N.displayName = "RadioIndicator");
 export {
-  k as useInteractions
+  N as RadioIndicator
 };

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

@@ -1,7 +1,137 @@
-import { CommonPopupDataAttributes as d } from "./als-react-ts-ui244.js";
-let y = (function(n) {
-  return n[n.open = d.open] = "open", n[n.closed = d.closed] = "closed", n[n.startingStyle = d.startingStyle] = "startingStyle", n[n.endingStyle = d.endingStyle] = "endingStyle", n.nested = "data-nested", n.nestedDialogOpen = "data-nested-dialog-open", n;
-})({});
+import * as i from "react";
+import { useMergedRefs as ee } from "./als-react-ts-ui272.js";
+import { useIsoLayoutEffect as te } from "./als-react-ts-ui267.js";
+import { visuallyHidden as oe } from "./als-react-ts-ui359.js";
+import { createChangeEventDetails as re } from "./als-react-ts-ui229.js";
+import { stateAttributesMapping as I } from "./als-react-ts-ui533.js";
+import { useBaseUiId as ie } from "./als-react-ts-ui232.js";
+import { useRenderElement as ne } from "./als-react-ts-ui226.js";
+import { ACTIVE_COMPOSITE_ITEM as se } from "./als-react-ts-ui527.js";
+import { CompositeItem as ae } from "./als-react-ts-ui487.js";
+import { useFieldRootContext as de } from "./als-react-ts-ui398.js";
+import { useFieldItemContext as ue } from "./als-react-ts-ui464.js";
+import { useLabelableContext as le } from "./als-react-ts-ui399.js";
+import { useLabelableId as fe } from "./als-react-ts-ui400.js";
+import { useRadioGroupContext as ce } from "./als-react-ts-ui524.js";
+import { RadioRootContext as pe } from "./als-react-ts-ui534.js";
+import { jsxs as me, jsx as g } from "react/jsx-runtime";
+import { useButton as Re } from "./als-react-ts-ui230.js";
+import { EMPTY_OBJECT as be, NOOP as Pe } from "./als-react-ts-ui304.js";
+import { none as ve } from "./als-react-ts-ui231.js";
+const ye = /* @__PURE__ */ i.forwardRef(function(c, x) {
+  const {
+    render: O,
+    className: k,
+    disabled: D = !1,
+    readOnly: M = !1,
+    required: T = !1,
+    value: n,
+    inputRef: V,
+    nativeButton: q = !1,
+    id: F,
+    ...N
+  } = c, {
+    disabled: B,
+    readOnly: G,
+    required: _,
+    checkedValue: A,
+    setCheckedValue: l,
+    touched: L,
+    setTouched: j,
+    validation: w,
+    registerControlRef: S
+  } = ce(), {
+    setDirty: p,
+    validityData: m,
+    setTouched: R,
+    setFilled: a,
+    state: b,
+    disabled: H
+  } = de(), J = ue(), {
+    labelId: K,
+    getDescriptionProps: U
+  } = le(), e = H || J.disabled || B || D, o = G || M, s = _ || T, r = A === n, f = i.useRef(null), d = i.useRef(null), P = ee(V, d);
+  te(() => {
+    d.current?.checked && a(!0);
+  }, [a]);
+  const Y = ie(), v = fe({
+    id: F,
+    implicit: !1,
+    controlRef: f
+  }), z = {
+    role: "radio",
+    "aria-checked": r,
+    "aria-required": s || void 0,
+    "aria-disabled": e || void 0,
+    "aria-readonly": o || void 0,
+    "aria-labelledby": K,
+    [se]: r ? "" : void 0,
+    id: Y,
+    disabled: e,
+    onKeyDown(t) {
+      t.key === "Enter" && t.preventDefault();
+    },
+    onClick(t) {
+      t.defaultPrevented || e || o || (t.preventDefault(), d.current?.click());
+    },
+    onFocus(t) {
+      t.defaultPrevented || e || o || !L || (d.current?.click(), j(!1));
+    }
+  }, {
+    getButtonProps: Q,
+    buttonRef: W
+  } = Re({
+    disabled: e,
+    native: q
+  }), X = i.useMemo(() => ({
+    type: "radio",
+    ref: P,
+    id: v,
+    tabIndex: -1,
+    style: oe,
+    "aria-hidden": !0,
+    disabled: e,
+    checked: r,
+    required: s,
+    readOnly: o,
+    onChange(t) {
+      if (t.nativeEvent.defaultPrevented || e || o || n === void 0)
+        return;
+      const E = re(ve, t.nativeEvent);
+      E.isCanceled || (R(!0), p(n !== m.initialValue), a(!0), l(n, E));
+    },
+    onFocus() {
+      f.current?.focus();
+    }
+  }), [r, e, v, P, o, s, l, p, R, a, m.initialValue, n]), u = i.useMemo(() => ({
+    ...b,
+    required: s,
+    disabled: e,
+    readOnly: o,
+    checked: r
+  }), [b, e, o, r, s]), Z = i.useMemo(() => u, [u]), y = l !== Pe, C = [x, S, f, W], h = [z, U, w?.getValidationProps ?? be, N, Q], $ = ne("span", c, {
+    enabled: !y,
+    state: u,
+    ref: C,
+    props: h,
+    stateAttributesMapping: I
+  });
+  return /* @__PURE__ */ me(pe.Provider, {
+    value: Z,
+    children: [y ? /* @__PURE__ */ g(ae, {
+      tag: "span",
+      render: O,
+      className: k,
+      state: u,
+      refs: C,
+      props: h,
+      stateAttributesMapping: I
+    }) : $, /* @__PURE__ */ g("input", {
+      ...X
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (ye.displayName = "RadioRoot");
 export {
-  y as DialogViewportDataAttributes
+  ye as RadioRoot
 };

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

@@ -1,44 +1,31 @@
-const o = "_root_169v1_9", _ = "_viewport_169v1_54", t = "_fadeOverlay_169v1_82", r = "_content_169v1_119", e = "_scrollbar_169v1_145", l = "_thumb_169v1_213", v = "_corner_169v1_256", d = {
-  root: o,
-  "root--sm": "_root--sm_169v1_19",
-  "root--md": "_root--md_169v1_23",
-  "root--lg": "_root--lg_169v1_27",
-  "root--full": "_root--full_169v1_31",
-  "root--default": "_root--default_169v1_37",
-  "root--subtle": "_root--subtle_169v1_41",
-  "root--bordered": "_root--bordered_169v1_46",
-  viewport: _,
-  "viewport--default": "_viewport--default_169v1_67",
-  "viewport--subtle": "_viewport--subtle_169v1_71",
-  "viewport--bordered": "_viewport--bordered_169v1_75",
-  fadeOverlay: t,
-  "fadeOverlay--top": "_fadeOverlay--top_169v1_92",
-  "fadeOverlay--bottom": "_fadeOverlay--bottom_169v1_104",
-  content: r,
-  "content--sm": "_content--sm_169v1_126",
-  "content--md": "_content--md_169v1_130",
-  "content--lg": "_content--lg_169v1_134",
-  "content--full": "_content--full_169v1_138",
-  scrollbar: e,
-  "scrollbar--default": "_scrollbar--default_169v1_198",
-  "scrollbar--subtle": "_scrollbar--subtle_169v1_202",
-  "scrollbar--bordered": "_scrollbar--bordered_169v1_206",
-  thumb: l,
-  "thumb--default": "_thumb--default_169v1_229",
-  "thumb--subtle": "_thumb--subtle_169v1_237",
-  "thumb--bordered": "_thumb--bordered_169v1_245",
-  corner: v,
-  "corner--default": "_corner--default_169v1_260",
-  "corner--subtle": "_corner--subtle_169v1_261",
-  "corner--bordered": "_corner--bordered_169v1_262"
-};
+import * as n from "react";
+function d({
+  controlled: o,
+  default: s,
+  name: t,
+  state: i = "value"
+}) {
+  const {
+    current: e
+  } = n.useRef(o !== void 0), [l, c] = n.useState(s), u = e ? o : l;
+  if (process.env.NODE_ENV !== "production") {
+    n.useEffect(() => {
+      e !== (o !== void 0) && console.error([`Base UI: A component is changing the ${e ? "" : "un"}controlled ${i} state of ${t} to be ${e ? "un" : ""}controlled.`, "Elements should not switch from uncontrolled to controlled (or vice versa).", `Decide between using a controlled or uncontrolled ${t} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", "More info: https://fb.me/react-controlled-components"].join(`
+`));
+    }, [i, t, o]);
+    const {
+      current: r
+    } = n.useRef(s);
+    n.useEffect(() => {
+      !e && JSON.stringify(r) !== JSON.stringify(s) && console.error([`Base UI: A component is changing the default ${i} state of an uncontrolled ${t} after being initialized. To suppress this warning opt to use a controlled ${t}.`].join(`
+`));
+    }, [JSON.stringify(s)]);
+  }
+  const f = n.useCallback((r) => {
+    e || c(r);
+  }, []);
+  return [u, f];
+}
 export {
-  r as content,
-  v as corner,
-  d as default,
-  t as fadeOverlay,
-  o as root,
-  e as scrollbar,
-  l as thumb,
-  _ as viewport
+  d as useControlled
 };