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

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

@@ -1,28 +1,230 @@
-import * as o from "react";
-import * as s from "react-dom";
-import { jsxs as c } from "react/jsx-runtime";
-import { useFloatingPortalNode as m } from "./als-react-ts-ui196.js";
-const f = /* @__PURE__ */ o.forwardRef(function(t, a) {
+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 {
-    children: i,
-    container: n,
-    className: d,
-    render: u,
-    ...l
-  } = t, {
-    portalNode: r,
-    portalSubtree: e
-  } = m({
-    container: n,
-    ref: a,
-    componentProps: t,
-    elementProps: l
+    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]);
   });
-  return !e && !r ? null : /* @__PURE__ */ c(o.Fragment, {
-    children: [e, r && /* @__PURE__ */ s.createPortal(i, r)]
+  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" && (f.displayName = "FloatingPortalLite");
+process.env.NODE_ENV !== "production" && (ct.displayName = "SliderThumb");
 export {
-  f as FloatingPortalLite
+  ct as SliderThumb
 };