@telefonica/mistica 15.16.4 → 15.18.0

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "15.16.4";
+const o = "15.18.0";
 export { o as PACKAGE_VERSION };

package/dist-es/popover.js

@@ -55,48 +55,49 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import { jsx as r, jsxs as t } from "react/jsx-runtime";
-import { BaseTooltip as f } from "./tooltip.js";
-import d from "./inline.js";
-import h from "./stack.js";
-import { Text3 as u, Text2 as x } from "./text.js";
-import v from "./box.js";
-import { content as g } from "./popover.css-mistica.js";
-import { vars as y } from "./skins/skin-contract.css-mistica.js";
-import { iconContainerSize as P } from "./icon-button.css-mistica.js";
-const S = (_param)=>{
-    var { open: a, extra: m, children: c, onClose: i = ()=>{}, dataAttributes: l, trackingEvent: p, title: o, description: e, asset: n } = _param, s = _object_without_properties(_param, [
+import { BaseTooltip as d } from "./tooltip.js";
+import h from "./inline.js";
+import u from "./stack.js";
+import { Text3 as x, Text2 as v } from "./text.js";
+import g from "./box.js";
+import { content as y } from "./popover.css-mistica.js";
+import { vars as P } from "./skins/skin-contract.css-mistica.js";
+import { iconContainerSize as S } from "./icon-button.css-mistica.js";
+const T = (_param)=>{
+    var { open: a, extra: m, children: c, onClose: i = ()=>{}, closeButtonLabel: l, dataAttributes: p, trackingEvent: s, title: o, description: e, asset: n } = _param, f = _object_without_properties(_param, [
         "open",
         "extra",
         "children",
         "onClose",
+        "closeButtonLabel",
         "dataAttributes",
         "trackingEvent",
         "title",
         "description",
         "asset"
     ]);
-    return /* @__PURE__ */ r(f, _object_spread({
-        content: /* @__PURE__ */ t(v, {
-            className: g,
+    return /* @__PURE__ */ r(d, _object_spread({
+        content: /* @__PURE__ */ t(g, {
+            className: y,
             children: [
                 (o || e || n) && /* @__PURE__ */ r("div", {
                     style: {
-                        paddingRight: `calc((${P.small} - 8px)`
+                        paddingRight: `calc((${S.small} - 8px)`
                     },
-                    children: /* @__PURE__ */ t(d, {
+                    children: /* @__PURE__ */ t(h, {
                         space: 16,
                         children: [
                             n,
-                            /* @__PURE__ */ t(h, {
+                            /* @__PURE__ */ t(u, {
                                 space: 4,
                                 children: [
-                                    o && /* @__PURE__ */ r(u, {
+                                    o && /* @__PURE__ */ r(x, {
                                         regular: !0,
                                         children: o
                                     }),
-                                    e && /* @__PURE__ */ r(x, {
+                                    e && /* @__PURE__ */ r(v, {
                                         regular: !0,
-                                        color: y.colors.textSecondary,
+                                        color: P.colors.textSecondary,
                                         children: e
                                     })
                                 ]
@@ -112,10 +113,11 @@ const S = (_param)=>{
         hasPointerInteractionOnly: !0,
         delay: !1,
         onClose: i,
-        trackingEvent: p,
+        closeButtonLabel: l,
+        trackingEvent: s,
         dataAttributes: _object_spread({
             "component-name": "Popover"
-        }, l)
-    }, s));
-}, A = S;
-export { A as default };
+        }, p)
+    }, f));
+}, N = T;
+export { N as default };

package/dist-es/select.js

@@ -51,29 +51,29 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as r, jsxs as k, Fragment as ke } from "react/jsx-runtime";
+import { jsx as r, jsxs as _, Fragment as ke } from "react/jsx-runtime";
 import * as n from "react";
-import C from "classnames";
+import k from "classnames";
 import { useForm as Ce } from "./form-context.js";
-import { useAriaId as Ve, useTheme as Pe } from "./hooks.js";
-import { SPACE as ne, ENTER as re, ESC as De, TAB as Me, UP as He, DOWN as Fe } from "./utils/keys.js";
-import { FieldContainer as We, HelperText as Ge, Label as Le } from "./text-field-components.js";
-import se from "./generated/mistica-icons/icon-chevron-down-regular.js";
-import { TextFieldBaseAutosuggest as Ze } from "./text-field-base.js";
-import $e from "./overlay.js";
-import { isAndroid as Be, isIos as qe } from "./utils/platform.js";
-import { cancelEvent as m } from "./utils/dom.js";
-import { Text3 as ze } from "./text.js";
-import { selectVariants as je, arrowDown as Ke, iconContainer as oe, selectContainerVariants as Ue, selectTextVariants as Xe, vars as b, optionsContainer as Je, optionsAnimationsVariants as ie, menuItem as Qe, menuItemSelected as Ye } from "./select.css-mistica.js";
-import { inputWithLabel as ce, inputWithoutLabel as ae } from "./text-field-base.css-mistica.js";
-import { Portal as et } from "./portal.js";
-import { pxToRem as tt, applyCssVars as nt } from "./utils/css.js";
-import { ThemeVariant as rt } from "./theme-variant-context.js";
-const st = (param)=>{
-    let { id: le, label: w, helperText: ue, value: fe, defaultValue: de, onChangeValue: V, name: i, fullWidth: P, options: f, optional: D, disabled: pe, error: me, onBlur: M, autoFocus: z = !1, native: he } = param;
-    var te;
-    const h = n.useRef(null), d = n.useRef(null), S = n.useRef(null), v = n.useRef(null), N = n.useRef(/* @__PURE__ */ new Map()), [Se, ve] = n.useState(!0), [l, ge] = n.useState(de), [H, j] = n.useState(!1), [K, U] = n.useState(!1), [X, x] = n.useState(!1), [u, F] = n.useState({}), [g, W] = n.useState(), G = n.useRef(null), L = Ve(le), { rawValues: Te, setRawValue: Z, setValue: $, formStatus: Ie, formErrors: J, setFormError: Ee, register: B } = Ce(), { platformOverrides: Q } = Pe(), we = he || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || Be(Q) || qe(Q), T = pe || Ie === "sending", R = me || !!J[i], Y = J[i] || ue, a = fe !== null && fe !== void 0 ? fe : Te[i], A = (e)=>{
-        V == null || V(e), Ee({
+import { useAriaId as Pe, useTheme as De } from "./hooks.js";
+import { SPACE as re, ENTER as se, ESC as Me, TAB as He, UP as Fe, DOWN as We } from "./utils/keys.js";
+import { FieldContainer as Ge, HelperText as Le, Label as Ze } from "./text-field-components.js";
+import oe from "./generated/mistica-icons/icon-chevron-down-regular.js";
+import { TextFieldBaseAutosuggest as $e } from "./text-field-base.js";
+import Be from "./overlay.js";
+import { isAndroid as qe, isIos as ze } from "./utils/platform.js";
+import { cancelEvent as p } from "./utils/dom.js";
+import { Text3 as je } from "./text.js";
+import { selectVariants as Ke, arrowDown as Ue, iconContainer as ie, selectContainerVariants as Xe, selectTextVariants as Je, vars as N, optionsContainer as Qe, optionsAnimationsVariants as ce, menuItem as Ye, menuItemSelected as et } from "./select.css-mistica.js";
+import { inputWithLabel as ae, inputWithoutLabel as le } from "./text-field-base.css-mistica.js";
+import { Portal as tt } from "./portal.js";
+import { pxToRem as nt, applyCssVars as rt } from "./utils/css.js";
+import { ThemeVariant as st } from "./theme-variant-context.js";
+const ot = (param)=>{
+    let { id: ue, label: m, helperText: de, value: fe, defaultValue: pe, onChangeValue: C, name: i, fullWidth: P, options: u, optional: D, disabled: me, error: he, onBlur: M, autoFocus: z = !1, native: Se } = param;
+    var ne;
+    const h = n.useRef(null), d = n.useRef(null), S = n.useRef(null), v = n.useRef(null), R = n.useRef(/* @__PURE__ */ new Map()), [ve, ge] = n.useState(!0), [g, Te] = n.useState(pe), [H, j] = n.useState(!1), [K, U] = n.useState(!1), [X, O] = n.useState(!1), [a, F] = n.useState({}), [T, W] = n.useState(), G = n.useRef(null), L = Pe(ue), { rawValues: Ie, setRawValue: Z, setValue: $, formStatus: Ee, formErrors: J, setFormError: we, register: B } = Ce(), { platformOverrides: Q } = De(), xe = Se || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || qe(Q) || ze(Q), I = me || Ee === "sending", A = he || !!J[i], Y = J[i] || de, l = fe !== null && fe !== void 0 ? fe : Ie[i], ee = (e)=>{
+        C == null || C(e), we({
             name: i,
             error: ""
         }), Z({
@@ -83,68 +83,68 @@ const st = (param)=>{
             name: i,
             value: e
         });
-    }, I = (e)=>{
+    }, E = (e)=>{
         if (e) {
             if (S != null && S.current) {
-                const o = S.current.getBoundingClientRect(), p = o.top, E = o.width, O = o.left, Re = o.height, y = p + Re, _ = Math.min(f.length, 8) * 48 + 16;
-                if (y + _ + 12 > window.innerHeight) {
-                    const Ae = window.innerHeight - y;
-                    if (p > Ae) {
-                        const _e = p - _;
+                const o = S.current.getBoundingClientRect(), f = o.top, x = o.width, y = o.left, Ae = o.height, b = f + Ae, V = Math.min(u.length, 8) * 48 + 16;
+                if (b + V + 12 > window.innerHeight) {
+                    const Ve = window.innerHeight - b;
+                    if (f > Ve) {
+                        const _e = f - V;
                         F({
-                            minWidth: E,
-                            left: O,
+                            minWidth: x,
+                            left: y,
                             top: Math.max(_e, 12),
-                            maxHeight: Math.min(p - 12, _),
+                            maxHeight: Math.min(f - 12, V),
                             transformOrigin: "center bottom"
                         });
                     } else F({
-                        minWidth: E,
-                        top: y,
-                        left: O,
-                        maxHeight: window.innerHeight - y - 12,
+                        minWidth: x,
+                        top: b,
+                        left: y,
+                        maxHeight: window.innerHeight - b - 12,
                         transformOrigin: "center top"
                     });
                 } else F({
-                    minWidth: E,
-                    top: y,
-                    left: O,
-                    maxHeight: _,
+                    minWidth: x,
+                    top: b,
+                    left: y,
+                    maxHeight: V,
                     transformOrigin: "center top"
                 });
             }
             j(!0), requestAnimationFrame(()=>{
                 G.current && v.current && "scrollTop" in v.current && (v.current.scrollTop = G.current), U(!0);
-            }), W(l !== null && l !== void 0 ? l : a);
+            }), W(g !== null && g !== void 0 ? g : l);
         } else U(!1), j(!1), W(void 0);
     }, q = (e)=>{
         var t;
-        G.current = (t = v.current) == null ? void 0 : t.scrollTop, I(!1), A && typeof e == "string" && A(e), typeof a > "u" && ge(e);
-    }, xe = (e)=>{
+        G.current = (t = v.current) == null ? void 0 : t.scrollTop, E(!1), ee && typeof e == "string" && ee(e), typeof l > "u" && Te(e);
+    }, Oe = (e)=>{
         var s;
         const t = (s = v.current) == null ? void 0 : s.getBoundingClientRect();
-        if (t && e && N.current.has(e)) {
-            const c = N.current.get(e), o = c == null ? void 0 : c.getBoundingClientRect();
+        if (t && e && R.current.has(e)) {
+            const c = R.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;
             }
             o && o.top + o.height / 2 <= t.top && (c == null || c.scrollIntoView(!1));
         }
-    }, Oe = d.current, ye = h.current;
+    }, ye = d.current, be = h.current;
     n.useEffect(()=>{
         Z({
             name: i,
-            value: a
+            value: l
         }), $({
             name: i,
-            value: a
+            value: l
         });
     }, [
         i,
         Z,
         $,
-        a
+        l
     ]), n.useEffect(()=>(B(i, {
             input: h.current,
             focusableElement: d.current
@@ -158,38 +158,38 @@ const st = (param)=>{
         B,
         d,
         h,
-        Oe,
-        ye
+        ye,
+        be
     ]), n.useEffect(()=>{
         const e = (s)=>{
-            var p;
+            var f;
             const o = {
-                [He]: -1,
-                [Fe]: 1
+                [Fe]: -1,
+                [We]: 1
             }[s.key];
             if (o) {
-                m(s);
+                p(s);
                 var _ref;
-                const E = (_ref = (p = f[f.findIndex((param)=>{
-                    let { value: O } = param;
-                    return O === g;
-                }) + o]) == null ? void 0 : p.value) !== null && _ref !== void 0 ? _ref : g;
-                W(E), xe(E);
+                const x = (_ref = (f = u[u.findIndex((param)=>{
+                    let { value: y } = param;
+                    return y === T;
+                }) + o]) == null ? void 0 : f.value) !== null && _ref !== void 0 ? _ref : T;
+                W(x), Oe(x);
             }
         }, t = (s)=>{
             if (H) switch(s.key){
-                case Me:
-                    m(s);
+                case He:
+                    p(s);
                     break;
-                case De:
-                    I(!1);
+                case Me:
+                    E(!1);
                     break;
+                case se:
                 case re:
-                case ne:
-                    m(s), f.findIndex((param)=>{
+                    p(s), u.findIndex((param)=>{
                         let { value: c } = param;
-                        return c === g;
-                    }) !== -1 && g !== l && q(g), I(!1);
+                        return c === T;
+                    }) !== -1 && T !== g && q(T), E(!1);
                     break;
             }
             K && e(s);
@@ -202,57 +202,57 @@ const st = (param)=>{
     }, [
         z
     ]), n.useEffect(()=>{
-        ve(!1);
+        ge(!1);
     }, []);
-    const be = (e)=>{
+    const Ne = (e)=>{
         var t;
-        return e ? (t = f.find((param)=>{
+        return e ? (t = u.find((param)=>{
             let { value: s } = param;
             return s === e;
         })) == null ? void 0 : t.text : "";
-    }, Ne = {
+    }, Re = {
         tabIndex: 0,
-        onFocus: ()=>x(!0),
-        onBlur: ()=>x(!1),
+        onFocus: ()=>O(!0),
+        onBlur: ()=>O(!1),
         onClick: ()=>{
-            I(!0), x(!0);
+            E(!0), O(!0);
         },
         onKeyDown: (e)=>{
-            !H && (e.key === ne || e.key === re) && (m(e), I(!0));
+            !H && (e.key === re || e.key === se) && (p(e), E(!0));
         }
-    }, ee = tt(20);
-    var _ref, _u_transformOrigin;
-    return /* @__PURE__ */ r(rt, {
+    }, te = nt(20), w = g !== null && g !== void 0 ? g : l;
+    var _a_transformOrigin;
+    return /* @__PURE__ */ r(st, {
         isInverse: !1,
-        children: we || Se ? /* @__PURE__ */ k(We, {
-            disabled: T,
-            helperText: /* @__PURE__ */ r(Ge, {
-                error: R,
+        children: xe || ve ? /* @__PURE__ */ _(Ge, {
+            disabled: I,
+            helperText: /* @__PURE__ */ r(Le, {
+                error: A,
                 leftText: Y
             }),
             fieldRef: S,
             fullWidth: P,
             children: [
-                w && /* @__PURE__ */ r(Le, {
-                    error: R,
+                m && /* @__PURE__ */ r(Ze, {
+                    error: A,
                     forId: L,
-                    inputState: X ? "focused" : ((_ref = a !== null && a !== void 0 ? a : l) !== null && _ref !== void 0 ? _ref : (te = h.current) == null ? void 0 : te.value) ? "filled" : "default",
+                    inputState: X ? "focused" : (w !== null && w !== void 0 ? w : (ne = h.current) == null ? void 0 : ne.value) ? "filled" : "default",
                     optional: D,
-                    children: w
+                    children: m
                 }),
-                /* @__PURE__ */ k("select", {
-                    className: C(je[T ? "disabled" : "default"], w ? ce : ae),
+                /* @__PURE__ */ _("select", {
+                    className: k(Ke[I ? "disabled" : "default"], m ? ae : le),
                     id: L,
-                    "aria-invalid": !!R,
-                    value: a !== null && a !== void 0 ? a : l,
+                    "aria-invalid": !!A,
+                    value: w,
                     required: !D,
-                    disabled: T,
+                    disabled: I,
                     onChange: (e)=>{
-                        q(e.target.value), A && A(e.target.value);
+                        q(e.target.value);
                     },
-                    onFocus: ()=>x(!0),
+                    onFocus: ()=>O(!0),
                     onBlur: (e)=>{
-                        x(!1), M == null || M(e);
+                        O(!1), M == null || M(e);
                     },
                     ref: (e)=>{
                         [
@@ -265,21 +265,29 @@ const st = (param)=>{
                     style: {
                         // Override default browser opacity when disabled. This opacity also affects the label.
                         // Without this fix, the label is invisible when disabled
-                        opacity: 1
+                        opacity: 1,
+                        // Use transparent color for the empty option (show below) to avoid showing it when the menu is closed
+                        color: w ? void 0 : "transparent"
                     },
                     children: [
-                        f.every((param)=>{
+                        !w && 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
+                        }) && // If no "empty" option exists, insert a dummy empty option. Once an option is selected,
+                        // this empty option is removed. This is needed to allow a native select without a selected
+                        // default option.
+                        // Chrome doesn't show this option when the select menu is open (because of display: none),
+                        // but Safari does. So we use the select's label for this option, otherwise it would be shown
+                        // as an empty option, which is weirder.
                         /* @__PURE__ */ r("option", {
                             value: "",
                             style: {
                                 display: "none"
-                            }
+                            },
+                            "aria-label": "",
+                            children: m
                         }),
-                        f.map((param)=>{
+                        u.map((param)=>{
                             let { value: e, text: t } = param;
                             return(// Set color: 'initial' to avoid wrong text color in some browsers when using dark mode.
                             // Similar issue in another lib: https://github.com/chakra-ui/chakra-ui/issues/417#issue-566611352
@@ -294,88 +302,88 @@ const st = (param)=>{
                     ]
                 }),
                 /* @__PURE__ */ r("div", {
-                    className: Ke,
+                    className: Ue,
                     "aria-hidden": !0,
                     children: /* @__PURE__ */ r("div", {
-                        className: oe,
-                        children: /* @__PURE__ */ r(se, {
-                            size: ee
+                        className: ie,
+                        children: /* @__PURE__ */ r(oe, {
+                            size: te
                         })
                     })
                 })
             ]
-        }) : /* @__PURE__ */ k(ke, {
+        }) : /* @__PURE__ */ _(ke, {
             children: [
-                /* @__PURE__ */ k("div", _object_spread_props(_object_spread({
-                    className: Ue[P ? "fullWidth" : "default"],
+                /* @__PURE__ */ _("div", _object_spread_props(_object_spread({
+                    className: Xe[P ? "fullWidth" : "default"],
                     role: "button",
                     "aria-haspopup": "listbox",
                     ref: d
-                }, !T && Ne), {
+                }, !I && Re), {
                     children: [
-                        /* @__PURE__ */ r(Ze, {
+                        /* @__PURE__ */ r($e, {
                             style: {
                                 visibility: "hidden"
                             },
                             fullWidth: P,
                             endIcon: /* @__PURE__ */ r("div", {
-                                className: oe,
-                                children: /* @__PURE__ */ r(se, {
-                                    size: ee
+                                className: ie,
+                                children: /* @__PURE__ */ r(oe, {
+                                    size: te
                                 })
                             }),
                             focus: X,
-                            label: w,
-                            value: a !== null && a !== void 0 ? a : l,
-                            shrinkLabel: !!(a || l),
+                            label: m,
+                            value: w,
+                            shrinkLabel: !!(l || g),
                             name: i,
                             helperText: Y,
                             required: !D,
-                            disabled: T,
+                            disabled: I,
                             id: L,
-                            error: R,
+                            error: A,
                             inputRef: h,
                             fieldRef: S
                         }),
                         /* @__PURE__ */ r("div", {
-                            className: C(Xe[T ? "disabled" : "default"], w ? ce : ae),
-                            children: be(a !== null && a !== void 0 ? a : l)
+                            className: k(Je[I ? "disabled" : "default"], m ? ae : le),
+                            children: Ne(w)
                         })
                     ]
                 })),
-                H && /* @__PURE__ */ r($e, {
+                H && /* @__PURE__ */ r(Be, {
                     onPress: (e)=>{
-                        I(!1), m(e);
+                        E(!1), p(e);
                     },
                     disableScroll: !0,
-                    children: /* @__PURE__ */ r(et, {
+                    children: /* @__PURE__ */ r(tt, {
                         children: /* @__PURE__ */ r("ul", {
-                            style: nt({
-                                [b.top]: u.top ? `${u.top}px` : "",
-                                [b.left]: u.left ? `${u.left}px` : "",
-                                [b.maxHeight]: u.maxHeight ? `${u.maxHeight}px` : "",
-                                [b.minWidth]: u.minWidth ? `${u.minWidth}px` : "",
-                                [b.transformOrigin]: (_u_transformOrigin = u.transformOrigin) !== null && _u_transformOrigin !== void 0 ? _u_transformOrigin : ""
+                            style: rt({
+                                [N.top]: a.top ? `${a.top}px` : "",
+                                [N.left]: a.left ? `${a.left}px` : "",
+                                [N.maxHeight]: a.maxHeight ? `${a.maxHeight}px` : "",
+                                [N.minWidth]: a.minWidth ? `${a.minWidth}px` : "",
+                                [N.transformOrigin]: (_a_transformOrigin = a.transformOrigin) !== null && _a_transformOrigin !== void 0 ? _a_transformOrigin : ""
                             }),
-                            onPointerDown: m,
-                            className: C(Je, K ? ie.show : ie.hide),
+                            onPointerDown: p,
+                            className: k(Qe, K ? ce.show : ce.hide),
                             role: "listbox",
                             ref: v,
-                            children: f.map((param)=>{
+                            children: u.map((param)=>{
                                 let { value: e, text: t } = param;
                                 return /* @__PURE__ */ r("li", {
                                     role: "option",
-                                    "aria-selected": e === (l !== null && l !== void 0 ? l : a),
+                                    "aria-selected": e === (g !== null && g !== void 0 ? g : l),
                                     "data-value": e,
-                                    className: C(Qe, {
-                                        [Ye]: e === g || e === (l !== null && l !== void 0 ? l : a)
+                                    className: k(Ye, {
+                                        [et]: e === T || e === (g !== null && g !== void 0 ? g : l)
                                     }),
-                                    onPointerDown: m,
+                                    onPointerDown: p,
                                     onClick: ()=>q(e),
                                     ref: (s)=>{
-                                        s ? N.current.set(e, s) : N.current.delete(e);
+                                        s ? R.current.set(e, s) : R.current.delete(e);
                                     },
-                                    children: /* @__PURE__ */ r(ze, {
+                                    children: /* @__PURE__ */ r(je, {
                                         regular: !0,
                                         children: t
                                     })
@@ -387,5 +395,5 @@ const st = (param)=>{
             ]
         })
     });
-}, xt = st;
-export { xt as default };
+}, Ot = ot;
+export { Ot as default };