asma-ui-core 3.101.5 → 3.101.6

package/dist/components/inputs/slider/StyledSlider.js

@@ -1,174 +1,208 @@
-import { cn as c } from "../../../helpers/cn.js";
-import { PlusIcon as yt } from "../../icons/plus-icon/PlusIcon.js";
-import { RemoveIcon as xt } from "../../icons/remove-icon/RemoveIcon.js";
-import { StyledButton as tt } from "../button/StyledButton.js";
-import { HelperRow as Nt } from "../../../helpers/HelperRow.js";
-import { useHelperSlot as Mt } from "../../../helpers/useHelperSlot.js";
-import x from "./StyledSlider.module.js";
-import { useId as Pt, useRef as et, useState as rt } from "react";
-import { jsx as i, jsxs as y } from "react/jsx-runtime";
-var j = (m, l, o) => o === l ? 0 : Math.min(100, Math.max(0, (m - l) / (o - l) * 100)), It = (m) => Array.isArray(m) ? [m[0] ?? 0, m[1] ?? 0] : null, Ut = ({ dataTest: m, min: l = 0, max: o = 100, step: h = 1, value: V, defaultValue: lt, disabled: u, size: B = "medium", orientation: F = "horizontal", marks: A, name: at, className: nt, classes: p, slotProps: R, error: N, errorText: ot, helperText: K, reserveHelperText: ct, fromLabel: T, toLabel: D, showButtons: X = !0, ariaLabel: $, ariaLabelledBy: it, onChange: M, onChangeCommitted: k }) => {
-  const Y = Pt(), a = F === "vertical", s = B === "small" ? 6 : 8, b = et(null), g = et(null), [st, P] = rt(null), [ut, q] = rt(lt ?? l), v = st ?? V ?? ut, n = It(v), d = n !== null, E = N ? ot ?? K : K, { show: G, role: dt } = Mt("StyledSlider", N, E, ct), H = (A === !0 && Number.isFinite(h) && h > 0 && o > l ? Array.from({ length: Math.floor((o - l) / h) + 1 }, (t, r) => ({ value: l + h * r })) : Array.isArray(A) ? A : []).filter((t) => t.value >= l && t.value <= o), J = d ? Math.min(n[0], n[1]) : l, U = d ? Math.max(n[0], n[1]) : v, O = (t) => d ? t >= J && t <= U : t <= U, ft = d ? Math.min(n[0], n[1]) <= l : v <= l, ht = d ? Math.max(n[0], n[1]) >= o : v >= o, z = d ? j(J, l, o) : 0, Q = j(U, l, o) - z, mt = a ? {
-    bottom: `${z}%`,
-    height: `${Q}%`
+import { cn as u } from "../../../helpers/cn.js";
+import { PlusIcon as St } from "../../icons/plus-icon/PlusIcon.js";
+import { RemoveIcon as At } from "../../icons/remove-icon/RemoveIcon.js";
+import { StyledButton as rt } from "../button/StyledButton.js";
+import { HelperRow as Tt } from "../../../helpers/HelperRow.js";
+import { useHelperSlot as Vt } from "../../../helpers/useHelperSlot.js";
+import { StyledInputField as Rt } from "../input-field/StyledInputField.js";
+import { StyledSelectAutocomplete as Dt } from "../select-autocomplete/StyledSelectAutocomplete.js";
+import M from "./StyledSlider.module.js";
+import { useId as $t, useRef as nt, useState as ot } from "react";
+import { jsx as c, jsxs as x } from "react/jsx-runtime";
+var K = (i, r, a) => a === r ? 0 : Math.min(100, Math.max(0, (i - r) / (a - r) * 100)), Ct = (i) => Array.isArray(i) ? [i[0] ?? 0, i[1] ?? 0] : null, Ht = 10;
+function Ut(i) {
+  return (i?.length ?? 0) > Ht;
+}
+function Bt({ dataTest: i, min: r = 0, max: a = 100, step: h = 1, value: T, defaultValue: at, disabled: s, size: X = "medium", orientation: Y = "horizontal", marks: V, name: q, className: ct, classes: p, slotProps: R, error: N, errorText: ut, helperText: B, reserveHelperText: it, fromLabel: D, toLabel: $, showButtons: G = !0, ariaLabel: g, ariaLabelledBy: C, onChange: P, onChangeCommitted: H, options: U, autocompleteClassName: st, autocompleteValue: dt, getOptionLabel: ft, isOptionEqualToValue: mt, onAutocompleteChange: ht }) {
+  const J = $t(), n = Y === "vertical", d = X === "small" ? 6 : 8, b = nt(null), v = nt(null), [pt, I] = ot(null), [bt, Q] = ot(at ?? r), y = pt ?? T ?? bt, o = Ct(y), f = o !== null, k = N ? ut ?? B : B, { show: z, role: gt } = Vt("StyledSlider", N, k, it);
+  if (U?.length && Ut(U)) return /* @__PURE__ */ c(Dt, {
+    dataTest: i,
+    disableClearable: !0,
+    className: u("min-w-[200px]", st),
+    size: "small",
+    disabled: s,
+    error: N,
+    helperText: z ? k : "",
+    options: U,
+    getOptionLabel: ft,
+    isOptionEqualToValue: mt,
+    value: dt,
+    onChange: ht,
+    renderInput: (t) => /* @__PURE__ */ c(Rt, {
+      dataTest: i,
+      ...t,
+      name: q,
+      slotProps: {
+        ...t.slotProps,
+        htmlInput: {
+          ...t.slotProps.htmlInput,
+          ...g ? { "aria-label": typeof g == "function" ? g(0) : g } : {},
+          ...C ? { "aria-labelledby": C } : {}
+        }
+      }
+    })
+  });
+  const _ = (V === !0 && Number.isFinite(h) && h > 0 && a > r ? Array.from({ length: Math.floor((a - r) / h) + 1 }, (t, l) => ({ value: r + h * l })) : Array.isArray(V) ? V : []).filter((t) => t.value >= r && t.value <= a), W = f ? Math.min(o[0], o[1]) : r, E = f ? Math.max(o[0], o[1]) : y, Z = (t) => f ? t >= W && t <= E : t <= E, vt = f ? Math.min(o[0], o[1]) <= r : y <= r, yt = f ? Math.max(o[0], o[1]) >= a : y >= a, F = f ? K(W, r, a) : 0, L = K(E, r, a) - F, wt = n ? {
+    bottom: `${F}%`,
+    height: `${L}%`
   } : {
-    left: `${z}%`,
-    width: `${Q}%`
-  }, W = (t) => {
-    const r = j(t, l, o);
-    return a ? { bottom: `${r}%` } : { left: `${r}%` };
-  }, C = (t) => {
-    const r = t.currentTarget.getBoundingClientRect(), e = a ? 1 - (t.clientY - (r.top + s)) / (r.height - s * 2) : (t.clientX - (r.left + s)) / (r.width - s * 2), f = l + Math.round(Math.min(1, Math.max(0, e)) * ((o - l) / h)) * h;
-    return Math.min(o, Math.max(l, f));
-  }, pt = (t) => d && Math.abs((n?.[1] ?? l) - t) < Math.abs((n?.[0] ?? l) - t) ? 1 : 0, bt = (t) => {
-    if (u) return;
-    const r = C(t), e = pt(r);
-    b.current = e, g.current = t.pointerId, t.currentTarget.setPointerCapture(t.pointerId);
-    const f = I(r, e);
-    P(f), M?.(t, f, e);
-  }, gt = (t) => {
-    if (u || b.current === null || t.pointerId !== g.current) return;
-    const r = b.current, e = I(C(t), r);
-    P(e), M?.(t, e, r);
-  }, vt = (t) => {
-    if (u || b.current === null || t.pointerId !== g.current) return;
-    const r = b.current, e = I(C(t), r);
-    V === void 0 && q(e), k?.(t, e), t.currentTarget.hasPointerCapture(t.pointerId) && t.currentTarget.releasePointerCapture(t.pointerId), P(null), b.current = null, g.current = null;
-  }, wt = (t) => {
-    b.current === null || t.pointerId !== g.current || (P(null), b.current = null, g.current = null);
-  }, Z = (t) => (r) => {
-    if (u) return;
+    left: `${F}%`,
+    width: `${L}%`
+  }, tt = (t) => {
+    const l = K(t, r, a);
+    return n ? { bottom: `${l}%` } : { left: `${l}%` };
+  }, O = (t) => {
+    const l = t.currentTarget.getBoundingClientRect(), e = n ? 1 - (t.clientY - (l.top + d)) / (l.height - d * 2) : (t.clientX - (l.left + d)) / (l.width - d * 2), m = r + Math.round(Math.min(1, Math.max(0, e)) * ((a - r) / h)) * h;
+    return Math.min(a, Math.max(r, m));
+  }, xt = (t) => f && Math.abs((o?.[1] ?? r) - t) < Math.abs((o?.[0] ?? r) - t) ? 1 : 0, Nt = (t) => {
+    if (s) return;
+    const l = O(t), e = xt(l);
+    b.current = e, v.current = t.pointerId, t.currentTarget.setPointerCapture(t.pointerId);
+    const m = S(l, e);
+    I(m), P?.(t, m, e);
+  }, Mt = (t) => {
+    if (s || b.current === null || t.pointerId !== v.current) return;
+    const l = b.current, e = S(O(t), l);
+    I(e), P?.(t, e, l);
+  }, Pt = (t) => {
+    if (s || b.current === null || t.pointerId !== v.current) return;
+    const l = b.current, e = S(O(t), l);
+    T === void 0 && Q(e), H?.(t, e), t.currentTarget.hasPointerCapture(t.pointerId) && t.currentTarget.releasePointerCapture(t.pointerId), I(null), b.current = null, v.current = null;
+  }, It = (t) => {
+    b.current === null || t.pointerId !== v.current || (I(null), b.current = null, v.current = null);
+  }, et = (t) => (l) => {
+    if (s) return;
     const e = t === "increment" ? h || 1 : -(h || 1);
-    let f = 0, w;
-    d ? (f = t === "increment" ? 1 : 0, w = t === "increment" ? Math.max(n[0], n[1]) : Math.min(n[0], n[1])) : w = v;
-    const L = Math.min(o, Math.max(l, w + e));
-    S(M, r, L, f), S(k, r, L, f);
-  }, I = (t, r) => {
-    if (!d) return t;
-    const e = [n?.[0] ?? 0, n?.[1] ?? 0];
-    return e[r] = t, r === 0 && e[0] > e[1] && (e[0] = e[1]), r === 1 && e[1] < e[0] && (e[1] = e[0]), e;
-  }, S = (t, r, e, f) => {
-    const w = I(e, f);
-    V === void 0 && q(w), t && t(r, w, f);
-  }, _ = (t, r) => /* @__PURE__ */ i("input", {
+    let m = 0, w;
+    f ? (m = t === "increment" ? 1 : 0, w = t === "increment" ? Math.max(o[0], o[1]) : Math.min(o[0], o[1])) : w = y;
+    const lt = Math.min(a, Math.max(r, w + e));
+    A(P, l, lt, m), A(H, l, lt, m);
+  }, S = (t, l) => {
+    if (!f) return t;
+    const e = [o?.[0] ?? 0, o?.[1] ?? 0];
+    return e[l] = t, l === 0 && e[0] > e[1] && (e[0] = e[1]), l === 1 && e[1] < e[0] && (e[1] = e[0]), e;
+  }, A = (t, l, e, m) => {
+    const w = S(e, m);
+    T === void 0 && Q(w), t && t(l, w, m);
+  }, j = (t, l) => /* @__PURE__ */ c("input", {
     type: "range",
-    "data-testid": d ? `${m}-thumb-${t}` : m,
-    name: at,
-    min: l,
-    max: o,
+    "data-testid": f ? `${i}-thumb-${t}` : i,
+    name: q,
+    min: r,
+    max: a,
     step: h,
-    value: r,
-    disabled: u,
-    "aria-orientation": F,
-    "aria-label": typeof $ == "function" ? $(t) : $,
-    "aria-labelledby": it,
+    value: l,
+    disabled: s,
+    "aria-orientation": Y,
+    "aria-label": typeof g == "function" ? g(t) : g,
+    "aria-labelledby": C,
     "aria-invalid": N ? !0 : void 0,
-    "aria-describedby": G ? Y : void 0,
-    className: c(x.SliderInput, a ? x.Vertical : x.Horizontal, !a && "z-0", B === "small" && x.Small, u && x.Disabled, p?.thumb, R?.thumb?.className),
-    onChange: (e) => S(M, e, Number(e.currentTarget.value), t),
-    onKeyUp: (e) => S(k, e, Number(e.currentTarget.value), t)
+    "aria-describedby": z ? J : void 0,
+    className: u(M.SliderInput, n ? M.Vertical : M.Horizontal, !n && "z-0", X === "small" && M.Small, s && M.Disabled, p?.thumb, R?.thumb?.className),
+    onChange: (e) => A(P, e, Number(e.currentTarget.value), t),
+    onKeyUp: (e) => A(H, e, Number(e.currentTarget.value), t)
   }, t);
-  return /* @__PURE__ */ y("div", {
-    className: c("flex max-w-[600px] flex-col gap-3", a && "h-full"),
+  return /* @__PURE__ */ x("div", {
+    className: u("flex max-w-[600px] flex-col gap-3", n && "h-full"),
     children: [
-      !a && (T ?? D) && /* @__PURE__ */ y("div", {
+      !n && (D ?? $) && /* @__PURE__ */ x("div", {
         className: "grid w-full grid-cols-2 gap-4",
-        children: [!a && T && /* @__PURE__ */ i("span", {
+        children: [!n && D && /* @__PURE__ */ c("span", {
           className: "min-w-0 break-words text-left font-normal text-delta-800",
-          children: T
-        }), !a && D && /* @__PURE__ */ i("span", {
-          className: "min-w-0 break-words text-right font-normal text-delta-800",
           children: D
+        }), !n && $ && /* @__PURE__ */ c("span", {
+          className: "min-w-0 break-words text-right font-normal text-delta-800",
+          children: $
         })]
       }),
-      /* @__PURE__ */ y("div", {
-        className: c("flex", !a && "w-full items-start gap-3", a && "h-full flex-col items-center"),
+      /* @__PURE__ */ x("div", {
+        className: u("flex", !n && "w-full items-start gap-3", n && "h-full flex-col items-center"),
         children: [
-          !a && X && /* @__PURE__ */ i(tt, {
+          !n && G && /* @__PURE__ */ c(rt, {
             dataTest: "slider-from-button",
             "aria-label": "Decrease value",
             className: "-mt-0.5 w-8",
             variant: "outlined",
-            disabled: u ?? ft,
-            startIcon: /* @__PURE__ */ i(xt, {
+            disabled: s ?? vt,
+            startIcon: /* @__PURE__ */ c(At, {
               width: 24,
               height: 24
             }),
-            onClick: Z("decrement")
+            onClick: et("decrement")
           }),
-          /* @__PURE__ */ y("div", {
-            className: c("relative flex", a ? "h-full w-8 flex-col items-center" : "mt-px w-full flex-col", p?.root, nt),
-            children: [/* @__PURE__ */ y("div", {
-              className: c("relative", a ? "h-full w-8" : "h-4 w-full", u ? "cursor-default" : "cursor-pointer"),
+          /* @__PURE__ */ x("div", {
+            className: u("relative flex", n ? "h-full w-8 flex-col items-center" : "mt-px w-full flex-col", p?.root, ct),
+            children: [/* @__PURE__ */ x("div", {
+              className: u("relative", n ? "h-full w-8" : "h-4 w-full", s ? "cursor-default" : "cursor-pointer"),
               style: { touchAction: "none" },
-              onPointerDown: bt,
-              onPointerMove: gt,
-              onPointerUp: vt,
-              onPointerCancel: wt,
-              children: [/* @__PURE__ */ y("div", {
-                className: c("absolute", a ? "left-1/2 w-1 -translate-x-1/2" : "top-[calc(50%+6px)] h-1 -translate-y-1/2"),
-                style: a ? {
-                  top: s,
-                  bottom: s
+              onPointerDown: Nt,
+              onPointerMove: Mt,
+              onPointerUp: Pt,
+              onPointerCancel: It,
+              children: [/* @__PURE__ */ x("div", {
+                className: u("absolute", n ? "left-1/2 w-1 -translate-x-1/2" : "top-[calc(50%+6px)] h-1 -translate-y-1/2"),
+                style: n ? {
+                  top: d,
+                  bottom: d
                 } : {
-                  left: s,
-                  right: s
+                  left: d,
+                  right: d
                 },
                 children: [
-                  /* @__PURE__ */ i("div", { className: c("absolute inset-0 rounded-full bg-delta-100", p?.rail, R?.rail?.className) }),
-                  /* @__PURE__ */ i("div", {
-                    className: c("absolute rounded-full", a ? "left-0 w-full" : "top-0 h-full", u ? "bg-delta-200" : "bg-gama-500", p?.track),
-                    style: mt
+                  /* @__PURE__ */ c("div", { className: u("absolute inset-0 rounded-full bg-delta-100", p?.rail, R?.rail?.className) }),
+                  /* @__PURE__ */ c("div", {
+                    className: u("absolute rounded-full", n ? "left-0 w-full" : "top-0 h-full", s ? "bg-delta-200" : "bg-gama-500", p?.track),
+                    style: wt
                   }),
-                  H.map((t) => {
-                    const r = O(t.value);
-                    return /* @__PURE__ */ i("span", {
-                      className: c("absolute z-10 box-border h-2 w-2 -translate-x-1/2 rounded-full border border-solid", a ? "left-1/2 translate-y-1/2" : "top-1/2 -translate-y-1/2", r ? c(u ? "border-delta-200 bg-delta-200" : "border-gama-500 bg-gama-500", p?.markActive) : c("border-delta-300 bg-white", p?.mark)),
-                      style: W(t.value)
+                  _.map((t) => {
+                    const l = Z(t.value);
+                    return /* @__PURE__ */ c("span", {
+                      className: u("absolute z-10 box-border h-2 w-2 -translate-x-1/2 rounded-full border border-solid", n ? "left-1/2 translate-y-1/2" : "top-1/2 -translate-y-1/2", l ? u(s ? "border-delta-200 bg-delta-200" : "border-gama-500 bg-gama-500", p?.markActive) : u("border-delta-300 bg-white", p?.mark)),
+                      style: tt(t.value)
                     }, t.value);
                   })
                 ]
-              }), d ? [_(0, n[0]), _(1, n[1])] : _(0, v)]
-            }), H.some((t) => t.label != null) && /* @__PURE__ */ i("div", {
-              className: c(a ? "pointer-events-none absolute inset-x-0" : "relative mt-[14px] h-6"),
-              style: a ? {
-                top: s,
-                bottom: s
+              }), f ? [j(0, o[0]), j(1, o[1])] : j(0, y)]
+            }), _.some((t) => t.label != null) && /* @__PURE__ */ c("div", {
+              className: u(n ? "pointer-events-none absolute inset-x-0" : "relative mt-[14px] h-6"),
+              style: n ? {
+                top: d,
+                bottom: d
               } : {
-                marginLeft: s,
-                marginRight: s
+                marginLeft: d,
+                marginRight: d
               },
-              children: H.map((t) => t.label == null ? null : /* @__PURE__ */ i("span", {
-                className: c("absolute text-base font-semibold text-delta-700", a ? "left-[37px] translate-y-1/2" : "-translate-x-1/2", O(t.value) && p?.markLabelActive, p?.markLabel, R?.markLabel?.className),
-                style: W(t.value),
+              children: _.map((t) => t.label == null ? null : /* @__PURE__ */ c("span", {
+                className: u("absolute text-base font-semibold text-delta-700", n ? "left-[37px] translate-y-1/2" : "-translate-x-1/2", Z(t.value) && p?.markLabelActive, p?.markLabel, R?.markLabel?.className),
+                style: tt(t.value),
                 children: t.label
               }, t.value))
             })]
           }),
-          !a && X && /* @__PURE__ */ i(tt, {
+          !n && G && /* @__PURE__ */ c(rt, {
             dataTest: "slider-to-button",
             "aria-label": "Increase value",
             className: "-mt-0.5 w-8",
             variant: "outlined",
-            disabled: u ?? ht,
-            startIcon: /* @__PURE__ */ i(yt, {
+            disabled: s ?? yt,
+            startIcon: /* @__PURE__ */ c(St, {
               width: 24,
               height: 24
             }),
-            onClick: Z("increment")
+            onClick: et("increment")
           })
         ]
       }),
-      G && /* @__PURE__ */ i(Nt, {
-        id: Y,
-        role: dt,
+      z && /* @__PURE__ */ c(Tt, {
+        id: J,
+        role: gt,
         error: N,
-        message: E,
+        message: k,
         className: "m-0 items-center"
       })
     ]
   });
-};
+}
 export {
-  Ut as StyledSlider
+  Bt as StyledSlider
 };

package/dist/src/components/inputs/slider/StyledSlider.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode, SyntheticEvent } from 'react';
+import { AutocompleteChangeReason } from '../select-autocomplete';
 export interface SliderMark {
     value: number;
     label?: ReactNode;
@@ -31,7 +32,7 @@ interface SliderSlotProps {
  * DS slider: rail `delta-100` (4px), filled track + thumb + active dots `gama-500`, inactive dots
  * white/`delta-300`, scale numbers Body Base SemiBold 16/24 `delta-700`. Disabled → `delta-200`.
  */
-export interface StyledSliderProps {
+export interface StyledSliderProps<T = unknown> {
     dataTest: string;
     min?: number;
     max?: number;
@@ -60,6 +61,15 @@ export interface StyledSliderProps {
     ariaLabelledBy?: string;
     onChange?: (event: SyntheticEvent, value: SliderValue, activeThumb: number) => void;
     onChangeCommitted?: (event: SyntheticEvent, value: SliderValue) => void;
+    /** Autocomplete options */
+    options?: readonly T[];
+    autocompleteClassName?: string;
+    autocompleteValue?: T | null;
+    getOptionLabel?: (option: T) => string;
+    isOptionEqualToValue?: (option: T, value: T) => boolean;
+    onAutocompleteChange?: (event: SyntheticEvent, value: T | null, reason: AutocompleteChangeReason, details?: {
+        option: T;
+    }) => void;
 }
 /**
  * Native range-input slider (replaces MUI `Slider`). Single value uses one `<input type="range">`;
@@ -70,5 +80,5 @@ export interface StyledSliderProps {
  * CI is the visual gate. Upgrade path: tune the 8px thumb inset if a diff shows misalignment.
  * TASK-204.
  */
-export declare const StyledSlider: ({ dataTest, min, max, step, value, defaultValue, disabled, size, orientation, marks, name, className, classes, slotProps, error, errorText, helperText, reserveHelperText, fromLabel, toLabel, showButtons, ariaLabel, ariaLabelledBy, onChange, onChangeCommitted, }: StyledSliderProps) => JSX.Element;
+export declare function StyledSlider<T>({ dataTest, min, max, step, value, defaultValue, disabled, size, orientation, marks, name, className, classes, slotProps, error, errorText, helperText, reserveHelperText, fromLabel, toLabel, showButtons, ariaLabel, ariaLabelledBy, onChange, onChangeCommitted, options, autocompleteClassName, autocompleteValue, getOptionLabel, isOptionEqualToValue, onAutocompleteChange, }: StyledSliderProps<T>): JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.101.5",
+    "version": "3.101.6",
     "type": "module",
     "sideEffects": [
         "**/*.css",