@telefonica/mistica 14.42.0 → 14.43.0

package/dist-es/select.js

@@ -51,12 +51,12 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as k, jsx as o, Fragment as Ae } from "react/jsx-runtime";
+import { jsx as s, jsxs as k, Fragment as Ae } from "react/jsx-runtime";
 import * as n from "react";
-import C from "classnames";
+import V from "classnames";
 import { useForm as _e } from "./form-context.js";
-import { useAriaId as ke, useTheme as Ce } from "./hooks.js";
-import { SPACE as ne, ENTER as re, ESC as Pe, TAB as Ve, UP as De, DOWN as Me } from "./utils/keys.js";
+import { useAriaId as ke, useTheme as Ve } from "./hooks.js";
+import { SPACE as ne, ENTER as re, ESC as Ce, TAB as Pe, UP as De, DOWN as Me } from "./utils/keys.js";
 import { FieldContainer as He, HelperText as Fe, Label as We } from "./text-field-components.js";
 import se from "./generated/mistica-icons/icon-chevron-down-regular.js";
 import { TextFieldBaseAutosuggest as Ge } from "./text-field-base.js";
@@ -68,11 +68,12 @@ import { selectVariants as qe, arrowDown as ze, selectContainerVariants as je, s
 import { inputWithLabel as ie, inputWithoutLabel as ce } from "./text-field-base.css-mistica.js";
 import { Portal as Qe } from "./portal.js";
 import { pxToRem as Ye, applyCssVars as et } from "./utils/css.js";
-const tt = (param)=>{
-    let { id: le, label: w, helperText: ae, value: ue, onChangeValue: P, name: i, fullWidth: V, options: u, optional: D, disabled: fe, error: de, onBlur: M, autoFocus: q = !1, native: pe } = param;
+import { ThemeVariant as tt } from "./theme-variant-context.js";
+const nt = (param)=>{
+    let { id: ae, label: w, helperText: le, value: ue, onChangeValue: C, name: i, fullWidth: P, options: u, optional: D, disabled: fe, error: de, onBlur: M, autoFocus: q = !1, native: pe } = param;
     var te;
-    const h = n.useRef(null), f = n.useRef(null), S = n.useRef(null), g = n.useRef(null), N = n.useRef(/* @__PURE__ */ new Map()), [me, he] = n.useState(!0), [d, Se] = n.useState(), [H, z] = n.useState(!1), [j, K] = n.useState(!1), [U, x] = n.useState(!1), [a, F] = n.useState({}), [T, W] = n.useState(), G = n.useRef(null), L = ke(le), { rawValues: ge, setRawValue: Z, setValue: $, formStatus: Te, formErrors: X, setFormError: ve, register: B } = _e(), { platformOverrides: J } = Ce(), Ee = pe || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || Ze(J) || $e(J), v = fe || Te === "sending", R = de || !!X[i], Q = X[i] || ae, l = ue !== null && ue !== void 0 ? ue : ge[i], A = (e)=>{
-        P == null || P(e), ve({
+    const h = n.useRef(null), f = n.useRef(null), S = n.useRef(null), g = n.useRef(null), N = n.useRef(/* @__PURE__ */ new Map()), [me, he] = n.useState(!0), [d, Se] = n.useState(), [H, z] = n.useState(!1), [j, K] = n.useState(!1), [U, x] = n.useState(!1), [l, F] = n.useState({}), [T, W] = n.useState(), G = n.useRef(null), L = ke(ae), { rawValues: ge, setRawValue: Z, setValue: $, formStatus: Te, formErrors: X, setFormError: ve, register: B } = _e(), { platformOverrides: J } = Ve(), Ie = pe || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || Ze(J) || $e(J), v = fe || Te === "sending", R = de || !!X[i], Q = X[i] || le, a = ue !== null && ue !== void 0 ? ue : ge[i], A = (e)=>{
+        C == null || C(e), ve({
             name: i,
             error: ""
         }), Z({
@@ -82,30 +83,30 @@ const tt = (param)=>{
             name: i,
             value: e
         });
-    }, E = (e)=>{
+    }, I = (e)=>{
         if (e) {
             if (S != null && S.current) {
-                const s = S.current.getBoundingClientRect(), p = s.top, I = s.width, O = s.left, ye = s.height, b = p + ye, _ = Math.min(u.length, 8) * 48 + 16;
+                const o = S.current.getBoundingClientRect(), p = o.top, E = o.width, O = o.left, ye = o.height, b = p + ye, _ = Math.min(u.length, 8) * 48 + 16;
                 if (b + _ + 12 > window.innerHeight) {
                     const Ne = window.innerHeight - b;
                     if (p > Ne) {
                         const Re = p - _;
                         F({
-                            minWidth: I,
+                            minWidth: E,
                             left: O,
                             top: Math.max(Re, 12),
                             maxHeight: Math.min(p - 12, _),
                             transformOrigin: "center bottom"
                         });
                     } else F({
-                        minWidth: I,
+                        minWidth: E,
                         top: b,
                         left: O,
                         maxHeight: window.innerHeight - b - 12,
                         transformOrigin: "center top"
                     });
                 } else F({
-                    minWidth: I,
+                    minWidth: E,
                     top: b,
                     left: O,
                     maxHeight: _,
@@ -114,36 +115,36 @@ const tt = (param)=>{
             }
             z(!0), requestAnimationFrame(()=>{
                 G.current && g.current && "scrollTop" in g.current && (g.current.scrollTop = G.current), K(!0);
-            }), W(d !== null && d !== void 0 ? d : l);
+            }), W(d !== null && d !== void 0 ? d : a);
         } else K(!1), z(!1), W(void 0);
     }, Y = (e)=>{
         var t;
-        G.current = (t = g.current) == null ? void 0 : t.scrollTop, E(!1), A && typeof e == "string" && A(e), typeof l > "u" && Se(e);
-    }, Ie = (e)=>{
+        G.current = (t = g.current) == null ? void 0 : t.scrollTop, I(!1), A && typeof e == "string" && A(e), typeof a > "u" && Se(e);
+    }, Ee = (e)=>{
         var r;
         const t = (r = g.current) == null ? void 0 : r.getBoundingClientRect();
         if (t && e && N.current.has(e)) {
-            const c = N.current.get(e), s = c == null ? void 0 : c.getBoundingClientRect();
-            if (s && s.top + s.height / 2 >= t.top + t.height) {
+            const c = N.current.get(e), o = c == null ? void 0 : c.getBoundingClientRect();
+            if (o && o.top + o.height / 2 >= t.top + t.height) {
                 c == null || c.scrollIntoView();
                 return;
             }
-            s && s.top + s.height / 2 <= t.top && (c == null || c.scrollIntoView(!1));
+            o && o.top + o.height / 2 <= t.top && (c == null || c.scrollIntoView(!1));
         }
     }, we = f.current, xe = h.current;
     n.useEffect(()=>{
         Z({
             name: i,
-            value: l
+            value: a
         }), $({
             name: i,
-            value: l
+            value: a
         });
     }, [
         i,
         Z,
         $,
-        l
+        a
     ]), n.useEffect(()=>(B(i, {
             input: h.current,
             focusableElement: f.current
@@ -162,33 +163,33 @@ const tt = (param)=>{
     ]), n.useEffect(()=>{
         const e = (r)=>{
             var p;
-            const s = {
+            const o = {
                 [De]: -1,
                 [Me]: 1
             }[r.key];
-            if (s) {
+            if (o) {
                 m(r);
                 var _ref;
-                const I = (_ref = (p = u[u.findIndex((param)=>{
+                const E = (_ref = (p = u[u.findIndex((param)=>{
                     let { value: O } = param;
                     return O === T;
-                }) + s]) == null ? void 0 : p.value) !== null && _ref !== void 0 ? _ref : T;
-                W(I), Ie(I);
+                }) + o]) == null ? void 0 : p.value) !== null && _ref !== void 0 ? _ref : T;
+                W(E), Ee(E);
             }
         }, t = (r)=>{
             if (H) switch(r.key){
-                case Ve:
+                case Pe:
                     m(r);
                     break;
-                case Pe:
-                    E(!1);
+                case Ce:
+                    I(!1);
                     break;
                 case re:
                 case ne:
                     m(r), u.findIndex((param)=>{
                         let { value: c } = param;
                         return c === T;
-                    }) !== -1 && T !== d && Y(T), E(!1);
+                    }) !== -1 && T !== d && Y(T), I(!1);
                     break;
             }
             j && e(r);
@@ -214,163 +215,166 @@ const tt = (param)=>{
         onFocus: ()=>x(!0),
         onBlur: ()=>x(!1),
         onClick: ()=>{
-            E(!0), x(!0);
+            I(!0), x(!0);
         },
         onKeyDown: (e)=>{
-            !H && (e.key === ne || e.key === re) && (m(e), E(!0));
+            !H && (e.key === ne || e.key === re) && (m(e), I(!0));
         }
     }, ee = Ye(20);
-    var _ref, _a_transformOrigin;
-    return Ee || me ? /* @__PURE__ */ k(He, {
-        disabled: v,
-        helperText: /* @__PURE__ */ o(Fe, {
-            error: R,
-            leftText: Q
-        }),
-        fieldRef: S,
-        fullWidth: V,
-        children: [
-            w && /* @__PURE__ */ o(We, {
+    var _ref, _l_transformOrigin;
+    return /* @__PURE__ */ s(tt, {
+        isInverse: !1,
+        children: Ie || me ? /* @__PURE__ */ k(He, {
+            disabled: v,
+            helperText: /* @__PURE__ */ s(Fe, {
                 error: R,
-                forId: L,
-                inputState: U ? "focused" : ((_ref = l !== null && l !== void 0 ? l : d) !== null && _ref !== void 0 ? _ref : (te = h.current) == null ? void 0 : te.value) ? "filled" : "default",
-                optional: D,
-                children: w
+                leftText: Q
             }),
-            /* @__PURE__ */ k("select", {
-                className: C(qe[v ? "disabled" : "default"], w ? ie : ce),
-                id: L,
-                "aria-invalid": !!R,
-                value: l,
-                required: !D,
-                disabled: v,
-                onChange: (e)=>{
-                    A && A(e.target.value);
-                },
-                onFocus: ()=>x(!0),
-                onBlur: (e)=>{
-                    x(!1), M == null || M(e);
-                },
-                ref: (e)=>{
-                    [
-                        h,
-                        f
-                    ].forEach((t)=>{
-                        t.current = e;
-                    });
-                },
-                style: {
-                    // Override default browser opacity when disabled. This opacity also affects the label.
-                    // Without this fix, the label is invisible when disabled
-                    opacity: 1
-                },
-                children: [
-                    u.every((param)=>{
-                        let { value: e } = param;
-                        return !!e;
-                    }) && // if no "empty" option exists, insert a dummy empty option
-                    // this is needed to allow a native select with no selected option
-                    /* @__PURE__ */ o("option", {
-                        value: "",
-                        style: {
-                            display: "none"
-                        }
-                    }),
-                    u.map((param)=>{
-                        let { value: e, text: t } = param;
-                        return /* @__PURE__ */ o("option", {
-                            value: e,
-                            children: t
-                        }, e);
-                    })
-                ]
-            }),
-            /* @__PURE__ */ o("div", {
-                className: ze,
-                "aria-hidden": !0,
-                children: /* @__PURE__ */ o(se, {
-                    size: ee
-                })
-            })
-        ]
-    }) : /* @__PURE__ */ k(Ae, {
-        children: [
-            /* @__PURE__ */ k("div", _object_spread_props(_object_spread({
-                className: je[V ? "fullWidth" : "default"],
-                role: "button",
-                "aria-haspopup": "listbox",
-                ref: f
-            }, !v && be), {
-                children: [
-                    /* @__PURE__ */ o(Ge, {
-                        style: {
-                            visibility: "hidden"
-                        },
-                        fullWidth: V,
-                        endIcon: /* @__PURE__ */ o(se, {
-                            size: ee
-                        }),
-                        focus: U,
-                        label: w,
-                        value: l,
-                        shrinkLabel: !!(l || d),
-                        name: i,
-                        helperText: Q,
-                        required: !D,
-                        disabled: v,
-                        id: L,
-                        error: R,
-                        inputRef: h,
-                        fieldRef: S
-                    }),
-                    /* @__PURE__ */ o("div", {
-                        className: C(Ke[v ? "disabled" : "default"], w ? ie : ce),
-                        children: Oe(l !== null && l !== void 0 ? l : d)
-                    })
-                ]
-            })),
-            H && /* @__PURE__ */ o(Le, {
-                onPress: (e)=>{
-                    E(!1), m(e);
-                },
-                disableScroll: !0,
-                children: /* @__PURE__ */ o(Qe, {
-                    children: /* @__PURE__ */ o("ul", {
-                        style: et({
-                            [y.top]: a.top ? `${a.top}px` : "",
-                            [y.left]: a.left ? `${a.left}px` : "",
-                            [y.maxHeight]: a.maxHeight ? `${a.maxHeight}px` : "",
-                            [y.minWidth]: a.minWidth ? `${a.minWidth}px` : "",
-                            [y.transformOrigin]: (_a_transformOrigin = a.transformOrigin) !== null && _a_transformOrigin !== void 0 ? _a_transformOrigin : ""
+            fieldRef: S,
+            fullWidth: P,
+            children: [
+                w && /* @__PURE__ */ s(We, {
+                    error: R,
+                    forId: L,
+                    inputState: U ? "focused" : ((_ref = a !== null && a !== void 0 ? a : d) !== null && _ref !== void 0 ? _ref : (te = h.current) == null ? void 0 : te.value) ? "filled" : "default",
+                    optional: D,
+                    children: w
+                }),
+                /* @__PURE__ */ k("select", {
+                    className: V(qe[v ? "disabled" : "default"], w ? ie : ce),
+                    id: L,
+                    "aria-invalid": !!R,
+                    value: a,
+                    required: !D,
+                    disabled: v,
+                    onChange: (e)=>{
+                        A && A(e.target.value);
+                    },
+                    onFocus: ()=>x(!0),
+                    onBlur: (e)=>{
+                        x(!1), M == null || M(e);
+                    },
+                    ref: (e)=>{
+                        [
+                            h,
+                            f
+                        ].forEach((t)=>{
+                            t.current = e;
+                        });
+                    },
+                    style: {
+                        // Override default browser opacity when disabled. This opacity also affects the label.
+                        // Without this fix, the label is invisible when disabled
+                        opacity: 1
+                    },
+                    children: [
+                        u.every((param)=>{
+                            let { value: e } = param;
+                            return !!e;
+                        }) && // if no "empty" option exists, insert a dummy empty option
+                        // this is needed to allow a native select with no selected option
+                        /* @__PURE__ */ s("option", {
+                            value: "",
+                            style: {
+                                display: "none"
+                            }
                         }),
-                        onPointerDown: m,
-                        className: C(Ue, j ? oe.show : oe.hide),
-                        role: "listbox",
-                        ref: g,
-                        children: u.map((param)=>{
+                        u.map((param)=>{
                             let { value: e, text: t } = param;
-                            return /* @__PURE__ */ o("li", {
-                                role: "option",
-                                "aria-selected": e === (d !== null && d !== void 0 ? d : l),
-                                "data-value": e,
-                                className: C(Xe, {
-                                    [Je]: e === T || e === (d !== null && d !== void 0 ? d : l)
-                                }),
-                                onPointerDown: m,
-                                onClick: ()=>Y(e),
-                                ref: (r)=>{
-                                    r ? N.current.set(e, r) : N.current.delete(e);
-                                },
-                                children: /* @__PURE__ */ o(Be, {
-                                    regular: !0,
-                                    children: t
-                                })
+                            return /* @__PURE__ */ s("option", {
+                                value: e,
+                                children: t
                             }, e);
                         })
+                    ]
+                }),
+                /* @__PURE__ */ s("div", {
+                    className: ze,
+                    "aria-hidden": !0,
+                    children: /* @__PURE__ */ s(se, {
+                        size: ee
+                    })
+                })
+            ]
+        }) : /* @__PURE__ */ k(Ae, {
+            children: [
+                /* @__PURE__ */ k("div", _object_spread_props(_object_spread({
+                    className: je[P ? "fullWidth" : "default"],
+                    role: "button",
+                    "aria-haspopup": "listbox",
+                    ref: f
+                }, !v && be), {
+                    children: [
+                        /* @__PURE__ */ s(Ge, {
+                            style: {
+                                visibility: "hidden"
+                            },
+                            fullWidth: P,
+                            endIcon: /* @__PURE__ */ s(se, {
+                                size: ee
+                            }),
+                            focus: U,
+                            label: w,
+                            value: a,
+                            shrinkLabel: !!(a || d),
+                            name: i,
+                            helperText: Q,
+                            required: !D,
+                            disabled: v,
+                            id: L,
+                            error: R,
+                            inputRef: h,
+                            fieldRef: S
+                        }),
+                        /* @__PURE__ */ s("div", {
+                            className: V(Ke[v ? "disabled" : "default"], w ? ie : ce),
+                            children: Oe(a !== null && a !== void 0 ? a : d)
+                        })
+                    ]
+                })),
+                H && /* @__PURE__ */ s(Le, {
+                    onPress: (e)=>{
+                        I(!1), m(e);
+                    },
+                    disableScroll: !0,
+                    children: /* @__PURE__ */ s(Qe, {
+                        children: /* @__PURE__ */ s("ul", {
+                            style: et({
+                                [y.top]: l.top ? `${l.top}px` : "",
+                                [y.left]: l.left ? `${l.left}px` : "",
+                                [y.maxHeight]: l.maxHeight ? `${l.maxHeight}px` : "",
+                                [y.minWidth]: l.minWidth ? `${l.minWidth}px` : "",
+                                [y.transformOrigin]: (_l_transformOrigin = l.transformOrigin) !== null && _l_transformOrigin !== void 0 ? _l_transformOrigin : ""
+                            }),
+                            onPointerDown: m,
+                            className: V(Ue, j ? oe.show : oe.hide),
+                            role: "listbox",
+                            ref: g,
+                            children: u.map((param)=>{
+                                let { value: e, text: t } = param;
+                                return /* @__PURE__ */ s("li", {
+                                    role: "option",
+                                    "aria-selected": e === (d !== null && d !== void 0 ? d : a),
+                                    "data-value": e,
+                                    className: V(Xe, {
+                                        [Je]: e === T || e === (d !== null && d !== void 0 ? d : a)
+                                    }),
+                                    onPointerDown: m,
+                                    onClick: ()=>Y(e),
+                                    ref: (r)=>{
+                                        r ? N.current.set(e, r) : N.current.delete(e);
+                                    },
+                                    children: /* @__PURE__ */ s(Be, {
+                                        regular: !0,
+                                        children: t
+                                    })
+                                }, e);
+                            })
+                        })
                     })
                 })
-            })
-        ]
+            ]
+        })
     });
-}, vt = tt;
-export { vt as default };
+}, Et = nt;
+export { Et as default };