@telefonica/mistica 12.11.1 → 12.13.0

package/dist-es/select.js

@@ -101,423 +101,301 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
 import * as s from "react";
-import { useForm as ye } from "./form-context.js";
-import { useAriaId as Ie, useTheme as Oe } from "./hooks.js";
-import { TAB as Ee, ESC as Ce, ENTER as re, SPACE as se, UP as ve, DOWN as ke } from "./utils/key-codes.js";
-import { FieldContainer as Ne, HelperText as Re, Label as Ae } from "./text-field-components.js";
+import oe from "classnames";
+import { useForm as Ce } from "./form-context.js";
+import { useAriaId as Ne, useTheme as Ae } from "./hooks.js";
+import { TAB as Re, ESC as ve, ENTER as se, SPACE as re, UP as be, DOWN as ke } from "./utils/key-codes.js";
+import { FieldContainer as _e, HelperText as Ve, Label as De } from "./text-field-components.js";
 import ie from "./generated/mistica-icons/icon-chevron-down-regular.js";
-import { TextFieldBaseAutosuggest as _e } from "./text-field-base.js";
-import De from "./overlay.js";
-import Pe from "classnames";
-import { isAndroid as He, isIos as Me } from "./utils/platform.js";
-import { createUseStyles as Fe } from "./jss.js";
-import { cancelEvent as h } from "./utils/dom.js";
-import { Text3 as Ve } from "./text.js";
-import { jsxs as _, jsx as u, Fragment as Be } from "./_virtual/jsx-runtime.js";
-var Ge = Fe(function(d) {
-    var _obj, _obj1;
-    return {
-        selectContainer: (_obj = {
-            position: "relative",
-            outline: 0
-        }, _defineProperty(_obj, d.mq.tabletOrSmaller, {
-            width: "100%"
-        }), _defineProperty(_obj, d.mq.desktopOrBigger, {
-            width: function(param) {
-                var t = param.fullWidth;
-                return t ? "100%" : "fit-content";
-            }
-        }), _obj),
-        select: {
-            fontFamily: "inherit",
-            backgroundColor: "transparent",
-            paddingTop: function(param) {
-                var t = param.label;
-                return t ? 24 : 16;
-            },
-            paddingBottom: function(param) {
-                var t = param.label;
-                return t ? 8 : 16;
-            },
-            paddingRight: 0,
-            paddingLeft: 12,
-            border: 0,
-            outline: 0,
-            fontSize: 16,
-            color: d.colors.textPrimary,
-            width: "100%",
-            height: "100%",
-            textOverflow: "ellipsis",
-            appearance: "none",
-            cursor: function(param) {
-                var t = param.disabled;
-                return t ? "default" : "pointer";
-            }
-        },
-        arrowDown: {
-            position: "absolute",
-            right: 16,
-            top: "calc(50% - 10px)",
-            pointerEvents: "none"
-        },
-        selectText: {
-            position: "absolute",
-            pointerEvents: "none",
-            left: 12 + 1,
-            right: 48 + 1,
-            overflow: "hidden",
-            top: function(param) {
-                var t = param.label;
-                return t ? 27 : 17;
-            },
-            lineHeight: "20px",
-            fontSize: 16,
-            color: d.colors.textPrimary,
-            opacity: function(param) {
-                var t = param.disabled;
-                return t ? 0.5 : 1;
-            },
-            maxWidth: "100%",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap"
-        },
-        optionsContainer: {
-            margin: 0,
-            padding: 0,
-            listStyleType: "none",
-            position: "absolute",
-            top: function(param) {
-                var t = param.optionsComputedProps;
-                return t.top;
-            },
-            left: function(param) {
-                var t = param.optionsComputedProps;
-                return t.left;
-            },
-            minWidth: function(param) {
-                var t = param.optionsComputedProps;
-                return t.width;
-            },
-            borderRadius: 8,
-            boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
-            backgroundColor: d.colors.backgroundContainer,
-            paddingTop: 8,
-            paddingBottom: 8,
-            transformOrigin: function(param) {
-                var t = param.optionsComputedProps;
-                return t.transformOrigin;
-            },
-            transition: "opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1) .15s",
-            opacity: function(param) {
-                var t = param.animateShowOptions;
-                return t ? 1 : 0;
-            },
-            transform: function(param) {
-                var t = param.animateShowOptions;
-                return t ? "scale(1)" : "scale(0)";
-            },
-            maxHeight: function(param) {
-                var t = param.optionsComputedProps;
-                var C;
-                return (C = t.maxHeight) != null ? C : "416px";
-            },
-            overflowY: "auto"
-        },
-        menuItemSelected: {
-            backgroundColor: "rgba(0, 0, 0, 0.14)"
-        },
-        menuItem: (_obj1 = {
-            color: d.colors.textPrimary,
-            padding: "8px 16px",
-            height: 48,
-            transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
-        }, _defineProperty(_obj1, d.mq.supportsHover, {
-            "&:hover": {
-                backgroundColor: "rgba(0, 0, 0, 0.08)"
-            }
-        }), _defineProperty(_obj1, "display", "flex"), _defineProperty(_obj1, "alignItems", "center"), _defineProperty(_obj1, "cursor", "pointer"), _obj1)
-    };
-}), tt = function(param) {
-    var d = param.id, t = param.label, C = param.helperText, D = param.value, P = param.onChangeValue, c = param.name, H = param.fullWidth, p = param.options, v = param.optional, ce = param.disabled, le = param.error, M = param.onBlur, tmp = param.autoFocus, j = tmp === void 0 ? !1 : tmp, ae = param.native;
-    var te, oe;
-    var x = s.useRef(null), f = s.useRef(null), w = s.useRef(null), b = s.useRef(null), k = s.useRef(/* @__PURE__ */ new Map()), ref = _slicedToArray(s.useState(), 2), l = ref[0], ue = ref[1], ref1 = _slicedToArray(s.useState(!1), 2), F = ref1[0], K = ref1[1], ref2 = _slicedToArray(s.useState(!1), 2), X = ref2[0], W = ref2[1], ref3 = _slicedToArray(s.useState(!1), 2), Y = ref3[0], O = ref3[1], ref4 = _slicedToArray(s.useState({}), 2), de = ref4[0], V = ref4[1], ref5 = _slicedToArray(s.useState(), 2), S = ref5[0], B = ref5[1], G = s.useRef(null), Z = Ie(d), ref6 = ye(), pe = ref6.rawValues, q = ref6.setRawValue, z = ref6.setValue, fe = ref6.formStatus, J = ref6.formErrors, me = ref6.setFormError, L = ref6.register, ref7 = Oe(), Q = ref7.platformOverrides, $ = ae || process.env.NODE_ENV === "test" || He(Q) || Me(Q), E = ce || fe === "sending", N = le || !!J[c], U = J[c] || C, r = D != null ? D : pe[c], R = function(e) {
-        P == null || P(e), me({
-            name: c,
+import { TextFieldBaseAutosuggest as Me } from "./text-field-base.js";
+import He from "./overlay.js";
+import { isAndroid as Fe, isIos as Pe } from "./utils/platform.js";
+import { cancelEvent as m } from "./utils/dom.js";
+import { Text3 as Ge } from "./text.js";
+import { selectVariants as Ze, arrowDown as We, selectContainerVariants as Be, selectTextVariants as Le, vars as C, optionsContainer as $e, optionsAnimationsVariants as ce, menuItem as qe, menuItemSelected as je } from "./select.css-mistica.js";
+import { assignInlineVars as ze } from "@vanilla-extract/dynamic";
+import { jsxs as b, jsx as a, Fragment as Ke } from "./_virtual/jsx-runtime.js";
+var ut = function(param) {
+    var le = param.id, h = param.label, ae = param.helperText, k = param.value, _ = param.onChangeValue, i = param.name, V = param.fullWidth, d = param.options, D = param.optional, ue = param.disabled, de = param.error, M = param.onBlur, tmp = param.autoFocus, $ = tmp === void 0 ? !1 : tmp, fe = param.native;
+    var Y, ee, te;
+    var g = s.useRef(null), f = s.useRef(null), T = s.useRef(null), I = s.useRef(null), N = s.useRef(/* @__PURE__ */ new Map()), ref = _slicedToArray(s.useState(), 2), c = ref[0], pe = ref[1], ref1 = _slicedToArray(s.useState(!1), 2), H = ref1[0], q = ref1[1], ref2 = _slicedToArray(s.useState(!1), 2), j = ref2[0], z = ref2[1], ref3 = _slicedToArray(s.useState(!1), 2), K = ref3[0], y = ref3[1], ref4 = _slicedToArray(s.useState({}), 2), u = ref4[0], F = ref4[1], ref5 = _slicedToArray(s.useState(), 2), x = ref5[0], P = ref5[1], G = s.useRef(null), Z = Ne(le), ref6 = Ce(), me = ref6.rawValues, W = ref6.setRawValue, B = ref6.setValue, he = ref6.formStatus, U = ref6.formErrors, ge = ref6.setFormError, L = ref6.register, ref7 = Ae(), X = ref7.platformOverrides, Te = fe || process.env.NODE_ENV === "test" || Fe(X) || Pe(X), E = ue || he === "sending", A = de || !!U[i], J = U[i] || ae, o = k != null ? k : me[i], R = function(e) {
+        _ == null || _(e), ge({
+            name: i,
             error: ""
-        }), q({
-            name: c,
+        }), W({
+            name: i,
             value: e
-        }), z({
-            name: c,
+        }), B({
+            name: i,
             value: e
         });
-    }, T = function(e) {
+    }, w = function(e) {
         if (e) {
-            if (w != null && w.current) {
-                var ref = w.current.getBoundingClientRect(), i = ref.top, y = ref.width, I = ref.left, A = ref.height, g = i + A, ne = Math.min(p.length, 8) * 48 + 16;
-                if (g + ne + 12 > window.innerHeight) {
-                    var Se = window.innerHeight - g;
-                    if (i > Se) {
-                        var Te = i - ne;
-                        V({
-                            width: y,
-                            left: I,
-                            top: Math.max(Te, 12),
-                            maxHeight: i - 12,
+            if (T != null && T.current) {
+                var ref = T.current.getBoundingClientRect(), r = ref.top, O = ref.width, S = ref.left, v = ref.height, p = r + v, ne = Math.min(d.length, 8) * 48 + 16;
+                if (p + ne + 12 > window.innerHeight) {
+                    var Se = window.innerHeight - p;
+                    if (r > Se) {
+                        var ye = r - ne;
+                        F({
+                            minWidth: O,
+                            left: S,
+                            top: Math.max(ye, 12),
+                            maxHeight: r - 12,
                             transformOrigin: "center bottom"
                         });
-                    } else V({
-                        width: y,
-                        top: g,
-                        left: I,
-                        maxHeight: window.innerHeight - g - 12,
+                    } else F({
+                        minWidth: O,
+                        top: p,
+                        left: S,
+                        maxHeight: window.innerHeight - p - 12,
                         transformOrigin: "center top"
                     });
-                } else V({
-                    width: y,
-                    top: g,
-                    left: I,
+                } else F({
+                    minWidth: O,
+                    top: p,
+                    left: S,
                     maxHeight: void 0,
                     transformOrigin: "center top"
                 });
             }
-            K(!0), requestAnimationFrame(function() {
-                G.current && b.current && "scrollTop" in b.current && (b.current.scrollTop = G.current), W(!0);
-            }), B(l != null ? l : r);
-        } else W(!1), K(!1), B(void 0);
-    }, ee = function(e) {
-        var o;
-        G.current = (o = b.current) == null ? void 0 : o.scrollTop, T(!1), R && typeof e == "string" && R(e), (typeof r === "undefined" ? "undefined" : _typeof(r)) > "u" && ue(e);
-    }, ge = function(e) {
+            q(!0), requestAnimationFrame(function() {
+                G.current && I.current && "scrollTop" in I.current && (I.current.scrollTop = G.current), z(!0);
+            }), P(c != null ? c : o);
+        } else z(!1), q(!1), P(void 0);
+    }, Q = function(e) {
+        var t;
+        G.current = (t = I.current) == null ? void 0 : t.scrollTop, w(!1), R && typeof e == "string" && R(e), (typeof o === "undefined" ? "undefined" : _typeof(o)) > "u" && pe(e);
+    }, Ie = function(e) {
         var n;
-        var o = (n = b.current) == null ? void 0 : n.getBoundingClientRect();
-        if (o && e && k.current.has(e)) {
-            var a = k.current.get(e), i = a == null ? void 0 : a.getBoundingClientRect();
-            if (i && i.top + i.height / 2 >= o.top + o.height) {
-                a == null || a.scrollIntoView();
+        var t = (n = I.current) == null ? void 0 : n.getBoundingClientRect();
+        if (t && e && N.current.has(e)) {
+            var l = N.current.get(e), r = l == null ? void 0 : l.getBoundingClientRect();
+            if (r && r.top + r.height / 2 >= t.top + t.height) {
+                l == null || l.scrollIntoView();
                 return;
             }
-            i && i.top + i.height / 2 <= o.top && (a == null || a.scrollIntoView(!1));
+            r && r.top + r.height / 2 <= t.top && (l == null || l.scrollIntoView(!1));
         }
-    }, he = f.current, xe = x.current;
+    }, xe = f.current, Ee = g.current;
     s.useEffect(function() {
-        q({
-            name: c,
-            value: r
-        }), z({
-            name: c,
-            value: r
+        W({
+            name: i,
+            value: o
+        }), B({
+            name: i,
+            value: o
         });
     }, [
-        c,
-        q,
-        z,
-        r
+        i,
+        W,
+        B,
+        o
     ]), s.useEffect(function() {
-        return L(c, {
-            input: x.current,
+        return L(i, {
+            input: g.current,
             focusableElement: f.current
         }), function() {
-            L(c, {
+            L(i, {
                 input: null,
                 focusableElement: null
             });
         };
     }, [
-        c,
+        i,
         L,
         f,
-        x,
-        he,
-        xe
+        g,
+        xe,
+        Ee
     ]), s.useEffect(function() {
         var e = function(n) {
-            var y, I;
+            var O, S;
             var _obj;
-            var i = (_obj = {}, _defineProperty(_obj, ve, -1), _defineProperty(_obj, ke, 1), _obj)[n.keyCode];
-            if (i) {
-                h(n);
-                var A = (I = (y = p[p.findIndex(function(param) {
-                    var g = param.value;
-                    return g === S;
-                }) + i]) == null ? void 0 : y.value) != null ? I : S;
-                B(A), ge(A);
+            var r = (_obj = {}, _defineProperty(_obj, be, -1), _defineProperty(_obj, ke, 1), _obj)[n.keyCode];
+            if (r) {
+                m(n);
+                var v = (S = (O = d[d.findIndex(function(param) {
+                    var p = param.value;
+                    return p === x;
+                }) + r]) == null ? void 0 : O.value) != null ? S : x;
+                P(v), Ie(v);
             }
-        }, o = function(n) {
-            F && (n.keyCode === Ee && h(n), n.keyCode === Ce && T(!1), (n.keyCode === re || n.keyCode === se) && (h(n), p.findIndex(function(param) {
-                var a = param.value;
-                return a === S;
-            }) !== -1 && S !== l && ee(S), T(!1))), X && e(n);
+        }, t = function(n) {
+            H && (n.keyCode === Re && m(n), n.keyCode === ve && w(!1), (n.keyCode === se || n.keyCode === re) && (m(n), d.findIndex(function(param) {
+                var l = param.value;
+                return l === x;
+            }) !== -1 && x !== c && Q(x), w(!1))), j && e(n);
         };
-        return document.addEventListener("keydown", o, !1), function() {
-            document.removeEventListener("keydown", o, !1);
+        return document.addEventListener("keydown", t, !1), function() {
+            document.removeEventListener("keydown", t, !1);
         };
     }), s.useEffect(function() {
-        j && f.current && f.current.focus();
+        $ && f.current && f.current.focus();
     }, [
-        j
+        $
     ]);
-    var m = Ge({
-        label: t || v && !$,
-        optionsComputedProps: de,
-        animateShowOptions: X,
-        helperText: U,
-        disabled: E,
-        fullWidth: H
-    }), we = function(e) {
-        var o;
-        return e ? (o = p.find(function(param) {
+    var we = function(e) {
+        var t;
+        return e ? (t = d.find(function(param) {
             var n = param.value;
             return n === e;
-        })) == null ? void 0 : o.text : "";
-    }, be = {
+        })) == null ? void 0 : t.text : "";
+    }, Oe = {
         tabIndex: 0,
         onFocus: function() {
-            return O(!0);
+            return y(!0);
         },
         onBlur: function() {
-            return O(!1);
+            return y(!1);
         },
         onClick: function() {
-            T(!0), O(!0);
+            w(!0), y(!0);
         },
         onKeyDown: function(e) {
-            !F && (e.keyCode === se || e.keyCode === re) && (h(e), T(!0));
+            !H && (e.keyCode === re || e.keyCode === se) && (m(e), w(!0));
         }
     };
-    return $ ? /* @__PURE__ */ _(Ne, {
+    var _obj;
+    return Te ? /* @__PURE__ */ b(_e, {
         disabled: E,
-        helperText: /* @__PURE__ */ u(Re, {
-            error: N,
-            leftText: U
+        helperText: /* @__PURE__ */ a(Ve, {
+            error: A,
+            leftText: J
         }),
-        fieldRef: w,
-        fullWidth: H,
+        fieldRef: T,
+        fullWidth: V,
         children: [
-            t && /* @__PURE__ */ u(Ae, {
-                error: N,
+            h && /* @__PURE__ */ a(De, {
+                error: A,
                 forId: Z,
-                inputState: Y ? "focused" : ((oe = r != null ? r : l) != null ? oe : (te = x.current) == null ? void 0 : te.value) ? "filled" : "default",
-                optional: v,
-                children: t
+                inputState: K ? "focused" : ((ee = o != null ? o : c) != null ? ee : (Y = g.current) == null ? void 0 : Y.value) ? "filled" : "default",
+                optional: D,
+                children: h
             }),
-            /* @__PURE__ */ _("select", {
-                className: m.select,
+            /* @__PURE__ */ b("select", {
+                className: Ze[E ? "disabled" : "default"],
                 id: Z,
-                "aria-invalid": !!N,
-                value: r,
-                required: !v,
+                "aria-invalid": !!A,
+                value: o,
+                required: !D,
                 disabled: E,
                 onChange: function(e) {
                     R && R(e.target.value);
                 },
                 onFocus: function() {
-                    return O(!0);
+                    return y(!0);
                 },
                 onBlur: function(e) {
-                    O(!1), M == null || M(e);
+                    y(!1), M == null || M(e);
                 },
                 ref: function(e) {
                     [
-                        x,
+                        g,
                         f
-                    ].forEach(function(o) {
-                        o.current = e;
+                    ].forEach(function(t) {
+                        t.current = e;
                     });
                 },
                 style: {
+                    paddingTop: h ? 24 : 16,
+                    paddingBottom: h ? 8 : 16,
                     opacity: 1
                 },
                 children: [
-                    p.every(function(param) {
+                    d.every(function(param) {
                         var e = param.value;
                         return !!e;
-                    }) && /* @__PURE__ */ u("option", {
+                    }) && /* @__PURE__ */ a("option", {
                         value: "",
                         style: {
                             display: "none"
                         }
                     }),
-                    p.map(function(param) {
-                        var e = param.value, o = param.text;
-                        return /* @__PURE__ */ u("option", {
+                    d.map(function(param) {
+                        var e = param.value, t = param.text;
+                        return /* @__PURE__ */ a("option", {
                             value: e,
-                            children: o
+                            children: t
                         }, e);
                     })
                 ]
             }),
-            /* @__PURE__ */ u("div", {
-                className: m.arrowDown,
+            /* @__PURE__ */ a("div", {
+                className: We,
                 "aria-hidden": !0,
-                children: /* @__PURE__ */ u(ie, {
+                children: /* @__PURE__ */ a(ie, {
                     size: 20
                 })
             })
         ]
-    }) : /* @__PURE__ */ _(Be, {
+    }) : /* @__PURE__ */ b(Ke, {
         children: [
-            /* @__PURE__ */ _("div", _objectSpreadProps(_objectSpread({
-                className: m.selectContainer,
+            /* @__PURE__ */ b("div", _objectSpreadProps(_objectSpread({
+                className: Be[V ? "fullWidth" : "default"],
                 role: "button",
                 "aria-haspopup": "listbox",
                 ref: f
-            }, !E && be), {
+            }, !E && Oe), {
                 children: [
-                    /* @__PURE__ */ u(_e, {
+                    /* @__PURE__ */ a(Me, {
                         style: {
                             visibility: "hidden"
                         },
-                        fullWidth: H,
-                        endIcon: /* @__PURE__ */ u(ie, {
+                        fullWidth: V,
+                        endIcon: /* @__PURE__ */ a(ie, {
                             size: 20
                         }),
-                        focus: Y,
-                        label: t,
-                        value: r,
-                        shrinkLabel: !!(r || l),
-                        name: c,
-                        helperText: U,
-                        required: !v,
+                        focus: K,
+                        label: h,
+                        value: o,
+                        shrinkLabel: !!(o || c),
+                        name: i,
+                        helperText: J,
+                        required: !D,
                         disabled: E,
                         id: Z,
-                        error: N,
-                        inputRef: x,
-                        fieldRef: w
+                        error: A,
+                        inputRef: g,
+                        fieldRef: T
                     }),
-                    /* @__PURE__ */ u("div", {
-                        className: m.selectText,
-                        children: we(r != null ? r : l)
+                    /* @__PURE__ */ a("div", {
+                        className: Le[E ? "disabled" : "default"],
+                        style: {
+                            top: h ? 27 : 17
+                        },
+                        children: we(o != null ? o : c)
                     })
                 ]
             })),
-            F && /* @__PURE__ */ u(De, {
+            H && /* @__PURE__ */ a(He, {
                 onPress: function(e) {
-                    T(!1), h(e);
+                    w(!1), m(e);
                 },
                 disableScroll: !0,
-                children: /* @__PURE__ */ u("ul", {
-                    onPointerDown: h,
-                    className: m.optionsContainer,
+                children: /* @__PURE__ */ a("ul", {
+                    style: ze((_obj = {}, _defineProperty(_obj, C.top, u.top ? "".concat(u.top, "px") : ""), _defineProperty(_obj, C.left, u.left ? "".concat(u.left, "px") : ""), _defineProperty(_obj, C.maxHeight, u.maxHeight ? "".concat(u.maxHeight, "px") : ""), _defineProperty(_obj, C.minWidth, u.minWidth ? "".concat(u.minWidth, "px") : ""), _defineProperty(_obj, C.transformOrigin, (te = u.transformOrigin) != null ? te : ""), _obj)),
+                    onPointerDown: m,
+                    className: oe($e, j ? ce.show : ce.hide),
                     role: "listbox",
-                    ref: b,
-                    children: p.map(function(param) {
-                        var e = param.value, o = param.text;
-                        return /* @__PURE__ */ u("li", {
+                    ref: I,
+                    children: d.map(function(param) {
+                        var e = param.value, t = param.text;
+                        return /* @__PURE__ */ a("li", {
                             role: "option",
-                            "aria-selected": e === (l != null ? l : r),
+                            "aria-selected": e === (c != null ? c : o),
                             "data-value": e,
-                            className: Pe(m.menuItem, _defineProperty({}, m.menuItemSelected, e === S || e === (l != null ? l : r))),
-                            onPointerDown: h,
+                            className: oe(qe, _defineProperty({}, je, e === x || e === (c != null ? c : o))),
+                            onPointerDown: m,
                             onClick: function() {
-                                return ee(e);
+                                return Q(e);
                             },
                             ref: function(n) {
-                                n ? k.current.set(e, n) : k.current.delete(e);
+                                n ? N.current.set(e, n) : N.current.delete(e);
                             },
-                            children: /* @__PURE__ */ u(Ve, {
+                            children: /* @__PURE__ */ a(Ge, {
                                 regular: !0,
-                                children: o
+                                children: t
                             })
                         }, e);
                     })
@@ -526,4 +404,4 @@ var Ge = Fe(function(d) {
         ]
     });
 };
-export { tt as default };
+export { ut as default };