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

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

@@ -1,35 +1,230 @@
-import { useId as f } from "./als-react-ts-ui325.js";
-import { useRefWithInit as g } from "./als-react-ts-ui240.js";
-import { useIsoLayoutEffect as E } from "./als-react-ts-ui193.js";
-import { isElement as d } from "./als-react-ts-ui339.js";
-import { useFloatingParentNodeId as S } from "./als-react-ts-ui356.js";
-import { FloatingRootStore as x } from "./als-react-ts-ui386.js";
-function v(p) {
-  const {
-    popupStore: o,
-    noEmit: i = !1,
-    treatPopupAsFloatingElement: a = !1,
-    onOpenChange: m
-  } = p, n = f(), c = S() != null, r = o.useState("open"), t = o.useState("activeTriggerElement"), s = o.useState(a ? "popupElement" : "positionerElement"), u = o.context.triggerElements, e = g(() => new x({
-    open: r,
-    referenceElement: t,
-    floatingElement: s,
-    triggerElements: u,
-    onOpenChange: m,
-    floatingId: n,
-    nested: c,
-    noEmit: i
-  })).current;
-  return E(() => {
-    const l = {
-      open: r,
-      floatingId: n,
-      referenceElement: t,
-      floatingElement: s
-    };
-    d(t) && (l.domReferenceElement = t), e.update(l);
-  }, [r, n, t, s, e]), e.context.onOpenChange = m, e.context.nested = c, e.context.noEmit = i, e;
+import * as f from "react";
+import { useStableCallback as He } from "./als-react-ts-ui266.js";
+import { useIsoLayoutEffect as J } from "./als-react-ts-ui267.js";
+import { useOnMount as Ue } from "./als-react-ts-ui345.js";
+import { useMergedRefs as ze } from "./als-react-ts-ui272.js";
+import { visuallyHidden as Q } from "./als-react-ts-ui359.js";
+import { formatNumber as w } from "./als-react-ts-ui484.js";
+import { useBaseUiId as Z } from "./als-react-ts-ui232.js";
+import { useRenderElement as Ge } from "./als-react-ts-ui226.js";
+import { valueToPercent as Ye } from "./als-react-ts-ui485.js";
+import { COMPOSITE_KEYS as je, HOME as te, END as re, ARROW_LEFT as ne, ARROW_DOWN as oe, ARROW_RIGHT as ie, ARROW_UP as se } from "./als-react-ts-ui237.js";
+import { useCompositeListItem as qe } from "./als-react-ts-ui275.js";
+import { useDirection as Xe } from "./als-react-ts-ui270.js";
+import { useFieldRootContext as Je } from "./als-react-ts-ui398.js";
+import { useLabelableId as Qe } from "./als-react-ts-ui400.js";
+import { getMidpoint as Ze } from "./als-react-ts-ui557.js";
+import { getSliderValue as et } from "./als-react-ts-ui553.js";
+import { roundValueToStep as tt } from "./als-react-ts-ui558.js";
+import { useSliderRootContext as rt } from "./als-react-ts-ui556.js";
+import { sliderStateAttributesMapping as nt } from "./als-react-ts-ui555.js";
+import { SliderThumbDataAttributes as ot } from "./als-react-ts-ui560.js";
+import { script as it } from "./als-react-ts-ui561.js";
+import { jsxs as st, jsx as ee } from "react/jsx-runtime";
+import { mergeProps as at } from "./als-react-ts-ui305.js";
+const ae = "PageUp", ue = "PageDown", ut = /* @__PURE__ */ new Set([se, oe, ne, ie, te, re, ae, ue]);
+function lt(u, i, l, h) {
+  if (!(i < 0))
+    return u.length === 2 ? i === 0 ? `${w(u[i], h, l)} start range` : `${w(u[i], h, l)} end range` : l ? w(u[i], h, l) : void 0;
+}
+function R(u, i, l, h, D) {
+  return l === 1 ? Math.min(u + i, D) : Math.max(u - i, h);
 }
+const ct = /* @__PURE__ */ f.forwardRef(function(i, l) {
+  const {
+    render: h,
+    children: D,
+    className: dt,
+    "aria-describedby": le,
+    "aria-label": ce,
+    "aria-labelledby": de,
+    disabled: fe = !1,
+    getAriaLabel: _,
+    getAriaValueText: K,
+    id: me,
+    index: pe,
+    inputRef: be,
+    onBlur: he,
+    onFocus: ge,
+    onKeyDown: ft,
+    tabIndex: Pe,
+    ...Re
+  } = i, ye = Z(me), {
+    active: E,
+    lastUsedThumbIndex: k,
+    controlRef: Ie,
+    disabled: xe,
+    validation: C,
+    formatOptionsRef: W,
+    handleInputChange: v,
+    inset: m,
+    labelId: Se,
+    largeStep: g,
+    locale: $,
+    max: s,
+    min: o,
+    minStepsBetweenValues: H,
+    name: Te,
+    orientation: y,
+    pressedInputRef: U,
+    pressedThumbCenterOffsetRef: Me,
+    pressedThumbIndexRef: Ae,
+    renderBeforeHydration: S,
+    setActive: z,
+    setIndicatorPosition: G,
+    state: Oe,
+    step: c,
+    values: a
+  } = rt(), we = Xe(), De = fe || xe, p = a.length > 1, d = y === "vertical", P = we === "rtl", {
+    setTouched: Ee,
+    setFocused: Y,
+    validationMode: ke
+  } = Je(), I = f.useRef(null), T = f.useRef(null), Ce = Z(), Fe = Qe(), F = p ? Ce : Fe, Ne = f.useMemo(() => ({
+    inputId: F
+  }), [F]), {
+    ref: Ve,
+    index: Be
+  } = qe({
+    metadata: Ne
+  }), t = p ? pe ?? Be : 0, j = t === a.length - 1, b = a[t], x = Ye(b, o, s), [N, Le] = f.useState(!1), [V, _e] = f.useState();
+  Ue(() => Le(!0));
+  const q = k >= 0 && k < a.length ? k : -1, M = He(() => {
+    const e = Ie.current, r = I.current;
+    if (!e || !r)
+      return;
+    const n = r.getBoundingClientRect(), A = e.getBoundingClientRect(), O = d ? "height" : "width", $e = A[O] - n[O], B = (n[O] / 2 + $e * x / 100) / A[O] * 100;
+    _e(B), t === 0 ? G((L) => [B, L[1]]) : j && G((L) => [L[0], B]);
+  });
+  J(() => {
+    m && queueMicrotask(M);
+  }, [M, m]), J(() => {
+    m && M();
+  }, [M, m, x]);
+  const Ke = f.useCallback(() => {
+    const e = d ? "bottom" : "insetInlineStart", r = d ? "left" : "top";
+    let n;
+    return p ? E === t ? n = 2 : q === t && (n = 1) : E === t && (n = 1), m ? {
+      "--position": `${V}%`,
+      visibility: S && !N || V === void 0 ? "hidden" : void 0,
+      position: "absolute",
+      [e]: "var(--position)",
+      [r]: "50%",
+      translate: `${(d || !P ? -1 : 1) * 50}% ${(d ? 1 : -1) * 50}%`,
+      zIndex: n
+    } : Number.isFinite(x) ? {
+      position: "absolute",
+      [e]: `${x}%`,
+      [r]: "50%",
+      translate: `${(d || !P ? -1 : 1) * 50}% ${(d ? 1 : -1) * 50}%`,
+      zIndex: n
+    } : Q;
+  }, [E, t, m, N, V, p, S, P, q, x, d]);
+  let X;
+  y === "vertical" && (X = P ? "vertical-rl" : "vertical-lr");
+  const We = at({
+    "aria-label": typeof _ == "function" ? _(t) : ce,
+    "aria-labelledby": de ?? Se,
+    "aria-describedby": le,
+    "aria-orientation": y,
+    "aria-valuenow": b,
+    "aria-valuetext": typeof K == "function" ? K(w(b, $, W.current ?? void 0), b, t) : lt(a, t, W.current ?? void 0, $),
+    disabled: De,
+    id: F,
+    max: s,
+    min: o,
+    name: Te,
+    onChange(e) {
+      v(e.target.valueAsNumber, t, e);
+    },
+    onFocus() {
+      z(t), Y(!0);
+    },
+    onBlur() {
+      I.current && (z(-1), Ee(!0), Y(!1), ke === "onBlur" && C.commit(et(b, t, o, s, p, a)));
+    },
+    onKeyDown(e) {
+      if (!ut.has(e.key))
+        return;
+      je.has(e.key) && e.stopPropagation();
+      let r = null;
+      const n = tt(b, c, o);
+      switch (e.key) {
+        case se:
+          r = R(n, e.shiftKey ? g : c, 1, o, s);
+          break;
+        case ie:
+          r = R(n, e.shiftKey ? g : c, P ? -1 : 1, o, s);
+          break;
+        case oe:
+          r = R(n, e.shiftKey ? g : c, -1, o, s);
+          break;
+        case ne:
+          r = R(n, e.shiftKey ? g : c, P ? 1 : -1, o, s);
+          break;
+        case ae:
+          r = R(n, g, 1, o, s);
+          break;
+        case ue:
+          r = R(n, g, -1, o, s);
+          break;
+        case re:
+          r = s, p && (r = Number.isFinite(a[t + 1]) ? a[t + 1] - c * H : s);
+          break;
+        case te:
+          r = o, p && (r = Number.isFinite(a[t - 1]) ? a[t - 1] + c * H : o);
+          break;
+      }
+      r !== null && (v(r, t, e), e.preventDefault());
+    },
+    step: c,
+    style: {
+      ...Q,
+      // So that VoiceOver's focus indicator matches the thumb's dimensions
+      width: "100%",
+      height: "100%",
+      writingMode: X
+    },
+    tabIndex: Pe ?? void 0,
+    type: "range",
+    value: b ?? ""
+  }, C.getInputValidationProps), ve = ze(T, C.inputRef, be);
+  return Ge("div", i, {
+    state: Oe,
+    ref: [l, Ve, I],
+    props: [{
+      [ot.index]: t,
+      children: /* @__PURE__ */ st(f.Fragment, {
+        children: [D, /* @__PURE__ */ ee("input", {
+          ref: ve,
+          ...We
+        }), m && !N && S && // this must be rendered with the last thumb to ensure all
+        // preceding thumbs are already rendered in the DOM
+        j && /* @__PURE__ */ ee("script", {
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML: {
+            __html: it
+          },
+          suppressHydrationWarning: !0
+        })]
+      }),
+      id: ye,
+      onBlur: he,
+      onFocus: ge,
+      onPointerDown(e) {
+        if (Ae.current = t, I.current != null) {
+          const r = y === "horizontal" ? "x" : "y", n = Ze(I.current), A = (y === "horizontal" ? e.clientX : e.clientY) - n[r];
+          Me.current = A;
+        }
+        T.current != null && U.current !== T.current && (U.current = T.current);
+      },
+      style: Ke(),
+      suppressHydrationWarning: S || void 0,
+      tabIndex: -1
+    }, Re],
+    stateAttributesMapping: nt
+  });
+});
+process.env.NODE_ENV !== "production" && (ct.displayName = "SliderThumb");
 export {
-  v as useSyncedFloatingRootContext
+  ct as SliderThumb
 };

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

@@ -1,77 +1,51 @@
-import * as r from "react";
-import { useId as P } from "./als-react-ts-ui325.js";
-import { useFloatingParentNodeId as S } from "./als-react-ts-ui356.js";
-import { EMPTY_OBJECT as F } from "./als-react-ts-ui303.js";
-import { getFloatingFocusElement as y } from "./als-react-ts-ui331.js";
-const T = /* @__PURE__ */ new Map([["select", "listbox"], ["combobox", "listbox"], ["label", !1]]);
-function k(c, I = {}) {
-  const a = "rootStore" in c ? c.rootStore : c, l = a.useState("open"), u = a.useState("floatingId"), x = a.useState("domReferenceElement"), d = a.useState("floatingElement"), {
-    enabled: m = !0,
-    role: o = "dialog"
-  } = I, M = P(), s = x?.id || M, t = r.useMemo(() => y(d)?.id || u, [d, u]), e = T.get(o) ?? o, p = S() != null, i = r.useMemo(() => e === "tooltip" || o === "label" ? F : {
-    "aria-haspopup": e === "alertdialog" ? "dialog" : e,
-    "aria-expanded": "false",
-    ...e === "listbox" && {
-      role: "combobox"
-    },
-    ...e === "menu" && p && {
-      role: "menuitem"
-    },
-    ...o === "select" && {
-      "aria-autocomplete": "none"
-    },
-    ...o === "combobox" && {
-      "aria-autocomplete": "list"
-    }
-  }, [e, p, o]), f = r.useMemo(() => e === "tooltip" || o === "label" ? {
-    [`aria-${o === "label" ? "labelledby" : "describedby"}`]: l ? t : void 0
-  } : {
-    ...i,
-    "aria-expanded": l ? "true" : "false",
-    "aria-controls": l ? t : void 0,
-    ...e === "menu" && {
-      id: s
-    }
-  }, [e, t, l, s, o, i]), b = r.useMemo(() => {
-    const n = {
-      id: t,
-      ...e && {
-        role: e
-      }
-    };
-    return e === "tooltip" || o === "label" ? n : {
-      ...n,
-      ...e === "menu" && {
-        "aria-labelledby": s
-      }
-    };
-  }, [e, t, s, o]), g = r.useCallback(({
-    active: n,
-    selected: R
-  }) => {
-    const E = {
-      role: "option",
-      ...n && {
-        id: `${t}-fui-option`
-      }
-    };
-    switch (o) {
-      case "select":
-      case "combobox":
-        return {
-          ...E,
-          "aria-selected": R
-        };
-    }
-    return {};
-  }, [t, o]);
-  return r.useMemo(() => m ? {
-    reference: f,
-    floating: b,
-    item: g,
-    trigger: i
-  } : {}, [m, f, b, i, g]);
-}
+import * as o from "react";
+import { formatNumber as M } from "./als-react-ts-ui484.js";
+import { useRenderElement as v } from "./als-react-ts-ui226.js";
+import { useSliderRootContext as V } from "./als-react-ts-ui556.js";
+import { sliderStateAttributesMapping as b } from "./als-react-ts-ui555.js";
+const N = /* @__PURE__ */ o.forwardRef(function(i, m) {
+  const {
+    "aria-live": f = "off",
+    render: S,
+    className: g,
+    children: a,
+    ...p
+  } = i, {
+    thumbMap: u,
+    state: d,
+    values: r,
+    formatOptionsRef: s,
+    locale: l
+  } = V(), c = o.useMemo(() => {
+    let t = "";
+    for (const e of u.values())
+      e?.inputId && (t += `${e.inputId} `);
+    return t.trim() === "" ? void 0 : t.trim();
+  }, [u]), n = o.useMemo(() => {
+    const t = [];
+    for (let e = 0; e < r.length; e += 1)
+      t.push(M(r[e], l, s.current ?? void 0));
+    return t;
+  }, [s, l, r]), h = o.useMemo(() => {
+    const t = [];
+    for (let e = 0; e < r.length; e += 1)
+      t.push(n[e] || r[e]);
+    return t.join(" – ");
+  }, [r, n]);
+  return v("output", i, {
+    state: d,
+    ref: m,
+    props: [{
+      // off by default because it will keep announcing when the slider is being dragged
+      // and also when the value is changing (but not yet committed)
+      "aria-live": f,
+      children: typeof a == "function" ? a(n, r) : h,
+      htmlFor: c
+    }, p],
+    stateAttributesMapping: b
+  });
+});
+process.env.NODE_ENV !== "production" && (N.displayName = "SliderValue");
 export {
-  k as useRole
+  N as SliderValue
 };