@telefonica/mistica 16.0.0 → 16.1.0

package/dist/search-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Y;
+        return Z;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -145,12 +145,13 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const H = /*#__PURE__*/ _react.forwardRef((_param, x)=>{
-    var { disabled: m, error: u, helperText: d, name: p, optional: n, validate: S, onChange: e, onChangeValue: t, onBlur: I, value: f, defaultValue: R, dataAttributes: F } = _param, b = _object_without_properties(_param, [
+const J = /*#__PURE__*/ _react.forwardRef((_param, P)=>{
+    var { disabled: m, error: u, helperText: d, name: p, label: n, optional: S, validate: I, onChange: e, onChangeValue: t, onBlur: R, value: f, defaultValue: F, dataAttributes: b } = _param, x = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -160,44 +161,45 @@ const H = /*#__PURE__*/ _react.forwardRef((_param, x)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: P, t: h } = (0, _hooks.useTheme)(), o = _react.useRef(), [v, y] = _react.useState(R || ""), s = typeof f < "u", l = s ? f : v, i = _react.useCallback((c, A)=>{
-        s || y(c), t == null || t(c, A);
+    const { texts: h, t: v } = (0, _hooks.useTheme)(), o = _react.useRef(), [y, k] = _react.useState(F || ""), s = typeof f < "u", l = s ? f : y, i = _react.useCallback((c, B)=>{
+        s || k(c), t == null || t(c, B);
     }, [
         s,
         t
-    ]), k = _react.useCallback(()=>{
+    ]), z = _react.useCallback(()=>{
         i("", ""), o.current && (e == null || e((0, _dom.createChangeEvent)(o.current, "")), o.current.focus());
     }, [
         i,
         e
-    ]), z = (0, _formcontext.useFieldProps)({
+    ]), A = (0, _formcontext.useFieldProps)({
         name: p,
+        label: n,
         value: l,
         defaultValue: void 0,
         processValue: (c)=>c,
         helperText: d,
-        optional: n,
+        optional: S,
         error: u,
         disabled: m,
-        onBlur: I,
-        validate: S,
+        onBlur: R,
+        validate: I,
         onChange: e,
         onChangeValue: i
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({
-        ref: (0, _common.combineRefs)(o, x),
+        ref: (0, _common.combineRefs)(o, P),
         startIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsearchregular.default, {
             size: _iconbuttoncssmistica.iconSize.default
         }),
         endIcon: l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
             Icon: _iconcloseregular.default,
-            "aria-label": P.formSearchClear || h(_texttokens.formSearchClear),
-            onPress: k
+            "aria-label": h.formSearchClear || v(_texttokens.formSearchClear),
+            onPress: z
         }) : void 0
-    }, b, z), {
+    }, x, A), {
         type: "search",
         dataAttributes: _object_spread({
             "component-name": "SearchField"
-        }, F)
+        }, b)
     }));
-}), Y = H;
+}), Z = J;

package/dist/select.js

@@ -126,9 +126,9 @@ function _object_spread_props(target, source) {
     return target;
 }
 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;
+    let { id: ue, label: u, helperText: de, value: fe, defaultValue: pe, onChangeValue: C, name: i, fullWidth: P, options: d, optional: D, disabled: me, error: he, onBlur: M, autoFocus: z = !1, native: Se } = param;
     var ne;
-    const h = _react.useRef(null), d = _react.useRef(null), S = _react.useRef(null), v = _react.useRef(null), R = _react.useRef(/* @__PURE__ */ new Map()), [ve, ge] = _react.useState(!0), [g, Te] = _react.useState(pe), [H, j] = _react.useState(!1), [K, U] = _react.useState(!1), [X, O] = _react.useState(!1), [a, F] = _react.useState({}), [T, W] = _react.useState(), G = _react.useRef(null), Ie = _react.useId(), L = ue || Ie, { rawValues: Ee, setRawValue: Z, setValue: $, formStatus: we, formErrors: J, setFormError: xe, register: B } = (0, _formcontext.useForm)(), { platformOverrides: Q } = (0, _hooks.useTheme)(), Oe = Se || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || (0, _platform.isAndroid)(Q) || (0, _platform.isIos)(Q), I = me || we === "sending", A = he || !!J[i], Y = J[i] || de, l = fe !== null && fe !== void 0 ? fe : Ee[i], ee = (e)=>{
+    const h = _react.useRef(null), f = _react.useRef(null), S = _react.useRef(null), v = _react.useRef(null), R = _react.useRef(/* @__PURE__ */ new Map()), [ve, ge] = _react.useState(!0), [g, Te] = _react.useState(pe), [H, j] = _react.useState(!1), [K, U] = _react.useState(!1), [X, O] = _react.useState(!1), [a, F] = _react.useState({}), [T, W] = _react.useState(), G = _react.useRef(null), Ie = _react.useId(), L = ue || Ie, { rawValues: Ee, setRawValue: Z, setValue: $, formStatus: we, formErrors: J, setFormError: xe, register: B } = (0, _formcontext.useForm)(), { platformOverrides: Q } = (0, _hooks.useTheme)(), Oe = Se || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || (0, _platform.isAndroid)(Q) || (0, _platform.isIos)(Q), I = me || we === "sending", A = he || !!J[i], Y = J[i] || de, l = fe !== null && fe !== void 0 ? fe : Ee[i], ee = (e)=>{
         C == null || C(e), xe({
             name: i,
             error: ""
@@ -142,28 +142,28 @@ const ot = (param)=>{
     }, E = (e)=>{
         if (e) {
             if (S != null && S.current) {
-                const o = S.current.getBoundingClientRect(), f = o.top, x = o.width, y = o.left, Ve = o.height, b = f + Ve, V = Math.min(u.length, 8) * 48 + 16;
-                if (b + V + 12 > window.innerHeight) {
-                    const _e = window.innerHeight - b;
-                    if (f > _e) {
-                        const ke = f - V;
+                const o = S.current.getBoundingClientRect(), p = o.top, x = o.width, y = o.left, Ve = o.height, N = p + Ve, V = Math.min(d.length, 8) * 48 + 16;
+                if (N + V + 12 > window.innerHeight) {
+                    const _e = window.innerHeight - N;
+                    if (p > _e) {
+                        const ke = p - V;
                         F({
                             minWidth: x,
                             left: y,
                             top: Math.max(ke, 12),
-                            maxHeight: Math.min(f - 12, V),
+                            maxHeight: Math.min(p - 12, V),
                             transformOrigin: "center bottom"
                         });
                     } else F({
                         minWidth: x,
-                        top: b,
+                        top: N,
                         left: y,
-                        maxHeight: window.innerHeight - b - 12,
+                        maxHeight: window.innerHeight - N - 12,
                         transformOrigin: "center top"
                     });
                 } else F({
                     minWidth: x,
-                    top: b,
+                    top: N,
                     left: y,
                     maxHeight: V,
                     transformOrigin: "center top"
@@ -187,7 +187,7 @@ const ot = (param)=>{
             }
             o && o.top + o.height / 2 <= t.top && (c == null || c.scrollIntoView(!1));
         }
-    }, be = d.current, Ne = h.current;
+    }, Ne = f.current, be = h.current;
     _react.useEffect(()=>{
         Z({
             name: i,
@@ -203,22 +203,25 @@ const ot = (param)=>{
         l
     ]), _react.useEffect(()=>(B(i, {
             input: h.current,
-            focusableElement: d.current
+            focusableElement: f.current,
+            label: u
         }), ()=>{
             B(i, {
                 input: null,
-                focusableElement: null
+                focusableElement: null,
+                label: ""
             });
         }), [
         i,
         B,
-        d,
+        f,
         h,
+        Ne,
         be,
-        Ne
+        u
     ]), _react.useEffect(()=>{
         const e = (s)=>{
-            var f;
+            var p;
             const o = {
                 [_keys.UP]: -1,
                 [_keys.DOWN]: 1
@@ -226,10 +229,10 @@ const ot = (param)=>{
             if (o) {
                 (0, _dom.cancelEvent)(s);
                 var _ref;
-                const x = (_ref = (f = u[u.findIndex((param)=>{
+                const x = (_ref = (p = d[d.findIndex((param)=>{
                     let { value: y } = param;
                     return y === T;
-                }) + o]) == null ? void 0 : f.value) !== null && _ref !== void 0 ? _ref : T;
+                }) + o]) == null ? void 0 : p.value) !== null && _ref !== void 0 ? _ref : T;
                 W(x), ye(x);
             }
         }, t = (s)=>{
@@ -242,7 +245,7 @@ const ot = (param)=>{
                     break;
                 case _keys.ENTER:
                 case _keys.SPACE:
-                    (0, _dom.cancelEvent)(s), u.findIndex((param)=>{
+                    (0, _dom.cancelEvent)(s), d.findIndex((param)=>{
                         let { value: c } = param;
                         return c === T;
                     }) !== -1 && T !== g && q(T), E(!1);
@@ -254,7 +257,7 @@ const ot = (param)=>{
             document.removeEventListener("keydown", t, !1);
         };
     }), _react.useEffect(()=>{
-        z && d.current && d.current.focus();
+        z && f.current && f.current.focus();
     }, [
         z
     ]), _react.useEffect(()=>{
@@ -262,7 +265,7 @@ const ot = (param)=>{
     }, []);
     const Re = (e)=>{
         var t;
-        return e ? (t = u.find((param)=>{
+        return e ? (t = d.find((param)=>{
             let { value: s } = param;
             return s === e;
         })) == null ? void 0 : t.text : "";
@@ -289,15 +292,15 @@ const ot = (param)=>{
             fieldRef: S,
             fullWidth: P,
             children: [
-                m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
+                u && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
                     error: A,
                     forId: L,
                     inputState: X ? "focused" : (w !== null && w !== void 0 ? w : (ne = h.current) == null ? void 0 : ne.value) ? "filled" : "default",
                     optional: D,
-                    children: m
+                    children: u
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsxs)("select", {
-                    className: (0, _classnames.default)(_selectcssmistica.selectVariants[I ? "disabled" : "default"], m ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
+                    className: (0, _classnames.default)(_selectcssmistica.selectVariants[I ? "disabled" : "default"], u ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
                     id: L,
                     "aria-invalid": !!A,
                     value: w,
@@ -313,7 +316,7 @@ const ot = (param)=>{
                     ref: (e)=>{
                         [
                             h,
-                            d
+                            f
                         ].forEach((t)=>{
                             t.current = e;
                         });
@@ -326,7 +329,7 @@ const ot = (param)=>{
                         color: w ? void 0 : "transparent"
                     },
                     children: [
-                        !w && u.every((param)=>{
+                        !w && d.every((param)=>{
                             let { value: e } = param;
                             return !!e;
                         }) && // If no "empty" option exists, insert a dummy empty option. Once an option is selected,
@@ -341,9 +344,9 @@ const ot = (param)=>{
                                 display: "none"
                             },
                             "aria-label": "",
-                            children: m
+                            children: u
                         }),
-                        u.map((param)=>{
+                        d.map((param)=>{
                             let { value: e, text: t } = param;
                             return(// Similar issue in another lib: https://github.com/chakra-ui/chakra-ui/issues/417#issue-566611352
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("option", {
@@ -373,7 +376,7 @@ const ot = (param)=>{
                     className: _selectcssmistica.selectContainerVariants[P ? "fullWidth" : "default"],
                     role: "button",
                     "aria-haspopup": "listbox",
-                    ref: d
+                    ref: f
                 }, !I && Ae), {
                     children: [
                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, {
@@ -388,7 +391,7 @@ const ot = (param)=>{
                                 })
                             }),
                             focus: X,
-                            label: m,
+                            label: u,
                             value: w,
                             shrinkLabel: !!(l || g),
                             name: i,
@@ -401,7 +404,7 @@ const ot = (param)=>{
                             fieldRef: S
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: (0, _classnames.default)(_selectcssmistica.selectTextVariants[I ? "disabled" : "default"], m ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
+                            className: (0, _classnames.default)(_selectcssmistica.selectTextVariants[I ? "disabled" : "default"], u ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
                             children: Re(w)
                         })
                     ]
@@ -424,7 +427,7 @@ const ot = (param)=>{
                             className: (0, _classnames.default)(_selectcssmistica.optionsContainer, K ? _selectcssmistica.optionsAnimationsVariants.show : _selectcssmistica.optionsAnimationsVariants.hide),
                             role: "listbox",
                             ref: v,
-                            children: u.map((param)=>{
+                            children: d.map((param)=>{
                                 let { value: e, text: t } = param;
                                 return /* @__PURE__ */ (0, _jsxruntime.jsx)("li", {
                                     role: "option",

package/dist/sheet-action-row.css-mistica.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "sheetActionRow", {
+    enumerable: true,
+    get: function() {
+        return _;
+    }
+});
+require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./sheet-action-row.css.ts.vanilla.css-mistica.js");
+var _ = "_4k81wx1 _1y2v1nf7s _1y2v1nf91 _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfjx _1y2v1nfhz";

package/dist/sheet-action-row.css.d.ts

@@ -0,0 +1 @@
+export declare const sheetActionRow: string;

package/dist/sheet-actions-list.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { ExclusifyUnion } from './utils/utility-types';
+import type { DataAttributes, IconProps } from './utils/types';
+type ActionsListSheetProps = {
+    title?: string;
+    subtitle?: string;
+    description?: string | ReadonlyArray<string>;
+    items: ReadonlyArray<{
+        id: string;
+        title: string;
+        /** "normal" by default */
+        style?: 'normal' | 'destructive';
+        icon?: ExclusifyUnion<{
+            /** @deprecated - use url instead */
+            Icon: React.ComponentType<IconProps>;
+        } | {
+            url: string;
+            urlDark?: string;
+        }>;
+    }>;
+    onClose?: () => void;
+    onSelect?: (id: string) => void;
+    dataAttributes?: DataAttributes;
+};
+declare const ActionsListSheet: React.ForwardRefExoticComponent<ActionsListSheetProps & React.RefAttributes<HTMLDivElement>>;
+export default ActionsListSheet;

package/dist/sheet-actions-list.js

@@ -0,0 +1,147 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return C;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _sheetcommon = /*#__PURE__*/ _interop_require_wildcard(require("./sheet-common.js"));
+const _hooks = require("./hooks.js");
+const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
+const _text = require("./text.js");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _sheetactionrowcssmistica = require("./sheet-action-row.css-mistica.js");
+const _image = /*#__PURE__*/ _interop_require_default(require("./image.js"));
+const _negativebox = /*#__PURE__*/ _interop_require_default(require("./negative-box.js"));
+const _touchable = /*#__PURE__*/ _interop_require_default(require("./touchable.js"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+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;
+}
+const b = /*#__PURE__*/ _react.forwardRef((param, d)=>{
+    let { title: m, subtitle: a, description: c, items: h, onClose: l, onSelect: e, dataAttributes: n } = param;
+    const { isDarkMode: p } = (0, _hooks.useTheme)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_sheetcommon.default, {
+        onClose: l,
+        ref: d,
+        dataAttributes: _object_spread({
+            "component-name": "ActionsListSheet"
+        }, n),
+        children: (param)=>{
+            let { closeModal: u, modalTitleId: f } = param;
+            return /* @__PURE__ */ (0, _jsxruntime.jsx)(_sheetcommon.SheetBody, {
+                title: m,
+                subtitle: a,
+                description: c,
+                modalTitleId: f,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_negativebox.default, {
+                    children: h.map((param)=>{
+                        let { id: i, style: s, title: x, icon: t } = param;
+                        return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+                            onPress: ()=>{
+                                e == null || e(i), u();
+                            },
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                                className: _sheetactionrowcssmistica.sheetActionRow,
+                                children: [
+                                    t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                        paddingRight: 16,
+                                        children: t.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(t.Icon, {
+                                            size: 24,
+                                            color: s === "destructive" ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.neutralHigh
+                                        }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
+                                            circular: !0,
+                                            src: p && t.urlDark ? t.urlDark : t.url,
+                                            width: 40
+                                        })
+                                    }),
+                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                        regular: !0,
+                                        color: s === "destructive" ? _skincontractcssmistica.vars.colors.textLinkDanger : _skincontractcssmistica.vars.colors.textPrimary,
+                                        children: x
+                                    })
+                                ]
+                            })
+                        }, i);
+                    })
+                })
+            });
+        }
+    });
+}), C = b;

package/dist/sheet-actions.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { DataAttributes, TrackingEvent } from './utils/types';
+type PressedButton = 'PRIMARY' | 'SECONDARY' | 'LINK';
+type ButtonProps = {
+    text: string;
+    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    trackEvent?: boolean;
+};
+type ActionsSheetProps = {
+    title?: string;
+    subtitle?: string;
+    description?: string | ReadonlyArray<string>;
+    button: ButtonProps;
+    secondaryButton?: ButtonProps;
+    buttonLink?: ButtonProps & {
+        withChevron?: boolean;
+    };
+    onClose?: () => void;
+    onPressButton?: (pressedButton: PressedButton) => void;
+    dataAttributes?: DataAttributes;
+};
+declare const ActionsSheet: React.ForwardRefExoticComponent<ActionsSheetProps & React.RefAttributes<HTMLDivElement>>;
+export default ActionsSheet;