@telefonica/mistica 14.34.0 → 14.35.0

package/dist/slider.js

@@ -6,15 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return ee;
+        return Ue;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _hooks = require("./hooks.js");
 const _slidercssmistica = require("./slider.css-mistica.js");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _environment = require("./utils/environment.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _dom = require("./utils/dom.js");
+const _hooks = require("./hooks.js");
 const _tooltip = /*#__PURE__*/ _interop_require_default(require("./tooltip.js"));
+const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
+const _formcontext = require("./form-context.js");
+const _common = require("./utils/common.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -61,113 +67,227 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const K = (param)=>{
-    let { disabled: u, steps: t = 1, max: a = 100, min: l = 0, value: o, onChange: d, getStepArrayIndex: f, "arial-label": A, tooltip: $ } = param;
-    const { isIos: w } = (0, _hooks.useTheme)(), { isTabletOrSmaller: k } = (0, _hooks.useScreenSize)(), [i, g] = _react.useState(l), [m, C] = _react.useState(l), [b, M] = _react.useState(a), [N, O] = _react.useState(1), h = _react.useRef(null), P = _react.useMemo(()=>u ? "0.5" : "1", [
-        u
-    ]), j = 0, p = "50%", v = _react.useMemo(()=>u && _slidercssmistica.sliderDisabled, [
-        u
-    ]), y = _react.useCallback(function() {
-        let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
-        if (!h.current) return;
-        const s = h.current.getBoundingClientRect(), n = Number(Math.abs(i - m) * 100 / (b - m)), S = 0.2 + (window.innerWidth - s.right) / 100 + (s.left - 0) / 100, x = e ? s.left - 10 - n * S : 10 - n * 0.2;
-        return `calc(${n}% + (${x}px))`;
-    }, [
-        i,
-        m,
-        b
-    ]), T = _react.useCallback((e)=>{
-        let s = e;
-        return Array.isArray(t) && (s = t.reduce((n, S)=>Math.abs(S - e) < Math.abs(n - e) ? S : n)), s;
-    }, [
-        t
-    ]), D = _react.useCallback(()=>{
-        Array.isArray(t) && t.sort((e, s)=>e - s);
-    }, [
-        t
-    ]), E = (e)=>{
-        g(e);
-    };
-    _react.useEffect(()=>{
-        d == null || d(i), f == null || f(i);
-    }, [
-        d,
-        f,
-        i
-    ]), _react.useEffect(()=>{
-        if (Array.isArray(t)) {
-            M(t.length - 1);
-            let e = 0;
-            o !== void 0 && (e = t.indexOf(T(o))), g(e);
-        } else {
-            C(l), M(a);
-            let e = l;
-            o !== void 0 && (l > o || o > a) && (e = a < o ? a : l), g(e), O(t);
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
         }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+const Ce = 48, Ve = 20, pe = 28, Pe = (n, t, c)=>t >= c ? 0 : (n - t) / (c - t), B = (n, t, c, l, a)=>{
+    const s = (m)=>{
+        if (m === void 0) return t;
+        const $ = n ? t + (c - t) * m : m;
+        return Math.max(t, Math.min(c, $));
+    };
+    if (t >= c) return t;
+    const b = s(a), P = t + Math.floor((b - t) / l) * l, R = t + Math.ceil((b - t) / l) * l;
+    return R <= c && R - b <= b - P ? R : P;
+}, D = (n, t, c)=>{
+    if (!c) return t;
+    if (t === void 0) return n;
+    let l = 0;
+    return c.forEach((a, s)=>{
+        c && Math.abs(a - t) <= Math.abs(c[l] - t) && (l = s);
+    }), l;
+}, Se = /*#__PURE__*/ _react.forwardRef((_param, Z)=>{
+    var { values: n, step: t = 1, steps: c, getStepArrayIndex: l, min: a = 0, max: s = 100, "aria-label": b, "aria-labelledby": P, id: R, dataAttributes: m, tooltip: $ } = _param, f = _object_without_properties(_param, [
+        "values",
+        "step",
+        "steps",
+        "getStepArrayIndex",
+        "min",
+        "max",
+        "aria-label",
+        "aria-labelledby",
+        "id",
+        "dataAttributes",
+        "tooltip"
+    ]);
+    n && (n.length === 0 ? n = void 0 : s = n.length - 1), t = t | 0, t = t <= 0 ? 1 : t;
+    const { defaultValue: z, value: H, onChange: U, focusableRef: q, disabled: _, name: G } = (0, _formcontext.useControlProps)({
+        name: f.name,
+        value: f.value !== void 0 ? B(!1, a, s, t, D(a, f.value, n)) : void 0,
+        defaultValue: f.defaultValue !== void 0 ? B(!1, a, s, t, D(a, f.defaultValue, n)) : void 0,
+        onChange: f.onChangeValue,
+        disabled: f.disabled
+    }), [J, K] = _react.useState(H !== null && H !== void 0 ? H : B(!1, a, s, t, D(a, z, n))), d = H !== null && H !== void 0 ? H : J, y = _react.useRef(d), S = _react.useCallback((e, o)=>{
+        const r = B(o, a, s, t, e);
+        y.current !== r && (U(n ? n[r] : r), K(r), y.current = r);
     }, [
-        t,
         a,
-        l,
-        T,
-        o,
-        N,
-        D
+        s,
+        t,
+        n,
+        U
     ]);
-    const R = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-            className: _slidercssmistica.targetContainer,
-            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                ref: h,
-                style: {
-                    opacity: P,
-                    paddingTop: j
-                },
-                className: _slidercssmistica.rangeSlider,
-                children: [
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)("input", {
-                        disabled: u,
-                        style: {
-                            top: p
-                        },
-                        className: (0, _classnames.default)(_slidercssmistica.sliderVariant[w ? "ios" : "default"], v),
-                        "aria-label": "Slider",
-                        type: "range",
-                        min: m,
-                        max: b,
-                        value: i,
-                        step: N,
-                        onChange: (e)=>E(+e.target.value)
-                    }),
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        style: {
-                            left: y(),
-                            top: p
-                        },
-                        className: (0, _classnames.default)(_slidercssmistica.sliderThumbVariant[w ? "ios" : "default"])
-                    }),
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: _slidercssmistica.progress,
-                        style: {
-                            width: y(),
-                            top: p
-                        }
-                    })
-                ]
-            })
-        });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", {
-        className: _slidercssmistica.container,
-        "aria-label": A,
-        children: $ ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.default, {
-            description: Array.isArray(t) ? t[i].toString() : i.toString(),
-            width: k ? 42 : 45,
-            targetLabel: "",
-            textCenter: !0,
-            unstable_offsetX: y(!0),
-            targetStyle: {
-                width: "100%"
+    _react.useEffect(()=>{
+        S(y.current, !1);
+    }, [
+        S
+    ]);
+    const N = _react.useRef(null), C = _react.useRef(null), F = _react.useRef(null), Q = _react.useRef(null), [E, T] = _react.useState(!1), [A, L] = _react.useState(!1), [W, O] = _react.useState(!1), { isIos: I } = (0, _hooks.useTheme)(), w = (e, o, r)=>{
+        const g = e == null ? void 0 : e.getBoundingClientRect();
+        return !!g && g.left <= o && o <= g.right && g.top <= r && r <= g.bottom;
+    }, u = (0, _environment.isTouchableDevice)(), V = I ? pe : Ve, h = u ? Ce : V, M = (e)=>{
+        const o = N.current;
+        if (o) {
+            const r = o.getBoundingClientRect().left + V / 2, g = o.getBoundingClientRect().right - V / 2;
+            S((e - r) / (g - r), !0);
+        }
+    }, ee = (e)=>{
+        (0, _dom.cancelEvent)(e), M(e.clientX);
+    }, te = (e)=>{
+        const o = C.current;
+        o && (o.onpointermove = ee, o.setPointerCapture(e.pointerId));
+    }, oe = (e)=>{
+        const o = C.current;
+        o && (o.onpointermove = null, o.releasePointerCapture(e.pointerId));
+    }, k = `calc(${Pe(d, a, s)} * (100% - ${V}px) - ${(h - V) / 2}px)`, X = `calc(${k} + ${h / 2}px)`, Y = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        className: (0, _classnames.default)(I ? _slidercssmistica.iosThumb : _slidercssmistica.defaultThumb, {
+            [_slidercssmistica.thumbHover]: !I && A && !E,
+            [_slidercssmistica.thumbActive]: !I && E
+        })
+    });
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+        paddingY: 8,
+        dataAttributes: _object_spread({
+            "component-name": "Slider"
+        }, m),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+            className: (0, _classnames.default)(_slidercssmistica.container, {
+                [_slidercssmistica.disabled]: _
+            }),
+            style: {
+                height: h
+            },
+            ref: F,
+            onPointerDown: (e)=>{
+                const o = e.clientX, r = e.clientY;
+                !u && w(F.current, o, r) ? (w(C.current, o, r) || M(o), T(!0), te(e)) : (0, _dom.cancelEvent)(e);
+            },
+            onPointerUp: (e)=>{
+                u || (T(!1), oe(e));
+            },
+            onTouchStart: (e)=>{
+                if ((0, _dom.cancelEvent)(e), u) {
+                    const o = e.nativeEvent.touches[0].clientX, r = e.nativeEvent.touches[0].clientY;
+                    w(C.current, o, r) || M(o), T(!0);
+                }
+            },
+            onTouchEnd: (e)=>{
+                (0, _dom.cancelEvent)(e), u && T(!1);
+            },
+            onTouchMove: (e)=>{
+                (0, _dom.cancelEvent)(e), u && M(e.nativeEvent.touches[0].clientX);
             },
-            position: "top",
-            target: R()
-        }) : R()
+            children: [
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _slidercssmistica.track,
+                    ref: N,
+                    style: {
+                        background: `linear-gradient(to right, ${_skincontractcssmistica.vars.colors.controlActivated} ${X}, ${_skincontractcssmistica.vars.colors.control} ${X}`
+                    }
+                }),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _slidercssmistica.thumbContainer,
+                    ref: C,
+                    style: {
+                        cursor: E ? "grabbing" : A ? "grab" : "auto",
+                        left: k,
+                        width: h,
+                        height: h
+                    },
+                    onPointerEnter: ()=>{
+                        u || L(!0);
+                    },
+                    onPointerLeave: ()=>{
+                        u || L(!1);
+                    },
+                    children: $ ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.default, {
+                        target: Y,
+                        open: E || W || A ? !0 : void 0,
+                        description: String(n ? n[d] : d),
+                        centerContent: !0,
+                        delay: !1
+                    }) : Y
+                }),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("input", {
+                    type: "range",
+                    min: a,
+                    max: s,
+                    ref: (0, _common.combineRefs)(Z, Q, q),
+                    step: t,
+                    "aria-label": b,
+                    "aria-labelledby": P,
+                    id: R,
+                    className: _slidercssmistica.input,
+                    "aria-valuetext": String(n ? n[d] : d),
+                    style: {
+                        left: k,
+                        width: h,
+                        height: h
+                    },
+                    name: G,
+                    value: d,
+                    disabled: _,
+                    onChange: (e)=>S(+e.target.value, !1),
+                    onFocus: ()=>{
+                        O(!0);
+                    },
+                    onBlur: ()=>{
+                        O(!1);
+                    }
+                })
+            ]
+        })
     });
-}, ee = K;
+}), Ue = Se;

package/dist/snackbar.css-mistica.js

@@ -34,10 +34,10 @@ _export(exports, {
         return p;
     },
     wrapper: function() {
-        return t;
+        return e;
     },
     wrapperCritical: function() {
-        return e;
+        return t;
     },
     wrapperInfo: function() {
         return j;
@@ -49,6 +49,6 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./snackbar.css.ts.vanilla.css-mistica.js");
 var b = 300, f = "o7bjb0a", _ = "_1y2v1nfba _1y2v1nfbm", a = {
-    centered: "o7bjb0e _1y2v1nfba _1y2v1nfb5 _1y2v1nfbp _1y2v1nfbj _1y2v1nffd",
-    topRight: "_1y2v1nfba _1y2v1nfb5 _1y2v1nfbp _1y2v1nfbj _1y2v1nffd _1y2v1nfej"
-}, r = "o7bjb0h _1y2v1nfc7 _1y2v1nfcn _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt", y = "o7bjb0b", o = "o7bjb01 _1y2v1nfbx _1y2v1nfba _1y2v1nfbj", p = "o7bjb02", t = "o7bjb04 _1y2v1nfb6 _1y2v1nfe3", e = "_1y2v1nf4k", j = "_1y2v1nf4l", i = "o7bjb07";
+    centered: "o7bjb0e _1y2v1nfba _1y2v1nfb5 _1y2v1nfbp _1y2v1nfbj _1y2v1nffe",
+    topRight: "_1y2v1nfba _1y2v1nfb5 _1y2v1nfbp _1y2v1nfbj _1y2v1nffe _1y2v1nfek"
+}, r = "o7bjb0h _1y2v1nfc7 _1y2v1nfcn _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt", y = "o7bjb0b", o = "o7bjb01 _1y2v1nfbx _1y2v1nfba _1y2v1nfbj", p = "o7bjb02", e = "o7bjb04 _1y2v1nfb6 _1y2v1nfe3", t = "_1y2v1nf4k", j = "_1y2v1nf4l", i = "o7bjb07";