@telefonica/mistica 16.3.1 → 16.5.0

package/dist/text-field-components.css.d.ts

@@ -11,6 +11,7 @@ export declare const fullWidth: string;
 export declare const field: string;
 export declare const helperContainer: string;
 export declare const leftHelperText: string;
+export declare const rightHelperText: string;
 export declare const helperText: string;
 export declare const warnIcon: string;
 export declare const background: Record<"default" | "readOnly", string>;

package/dist/text-field-components.d.ts

@@ -14,11 +14,13 @@ export declare const Label: ({ shrinkLabel, forId, inputState, error, children,
 type HelperTextProps = {
     leftText?: string;
     rightText?: string;
+    rightTextLabel?: string;
     error?: boolean;
-    id?: string;
+    leftTextId?: string;
+    rightTextId?: string;
     children?: void;
 };
-export declare const HelperText: ({ leftText, rightText, error, id }: HelperTextProps) => JSX.Element;
+export declare const HelperText: ({ leftText, leftTextId, rightText, rightTextId, rightTextLabel, error, }: HelperTextProps) => JSX.Element;
 type FieldContainerProps = {
     multiline?: boolean;
     disabled?: boolean;

package/dist/text-field-components.js

@@ -11,13 +11,13 @@ function _export(target, all) {
 }
 _export(exports, {
     FieldContainer: function() {
-        return Y;
+        return ee;
     },
     HelperText: function() {
-        return X;
+        return $;
     },
     Label: function() {
-        return U;
+        return Z;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -31,6 +31,7 @@ const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _dom = require("./utils/dom.js");
 const _texttokens = require("./text-tokens.js");
 const _iconwarningregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-warning-regular.js"));
+const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -129,93 +130,110 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const U = (param)=>{
-    let { shrinkLabel: o, forId: l, inputState: e, error: s, children: i, style: a, optional: n } = param;
-    const f = o || e === "focused" || e === "filled", [u, h] = _react.useState("initial"), { texts: d, t: y } = (0, _hooks.useTheme)();
+const Z = (param)=>{
+    let { shrinkLabel: o, forId: d, inputState: r, error: s, children: l, style: i, optional: a } = param;
+    const n = o || r === "focused" || r === "filled", [m, p] = _react.useState("initial"), { texts: u, t: N } = (0, _hooks.useTheme)();
     _react.useEffect(()=>{
-        const N = setTimeout(()=>{
-            process.env.NODE_ENV !== "test" && h("transform 150ms, width 150ms");
+        const b = setTimeout(()=>{
+            process.env.NODE_ENV !== "test" && p("transform 150ms, width 150ms");
         });
         return ()=>{
-            clearTimeout(N);
+            clearTimeout(b);
         };
     }, []);
-    let p = _skincontractcssmistica.vars.colors.textSecondary;
-    return s && e !== "default" ? p = _skincontractcssmistica.vars.colors.textError : e === "focused" && (p = _skincontractcssmistica.vars.colors.textActivated), /* @__PURE__ */ (0, _jsxruntime.jsxs)("label", {
+    let h = _skincontractcssmistica.vars.colors.textSecondary;
+    return s && r !== "default" ? h = _skincontractcssmistica.vars.colors.textError : r === "focused" && (h = _skincontractcssmistica.vars.colors.textActivated), /* @__PURE__ */ (0, _jsxruntime.jsxs)("label", {
         className: (0, _classnames.default)(_textfieldcomponentscssmistica.labelContainer, {
-            [_textfieldcomponentscssmistica.shrinked]: f
+            [_textfieldcomponentscssmistica.shrinked]: n
         }),
-        htmlFor: l,
+        htmlFor: d,
         style: _object_spread_props(_object_spread({
-            color: p
-        }, a), {
-            transition: u
+            color: h
+        }, i), {
+            transition: m
         }),
+        "data-testid": "label",
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
                 className: _textfieldcomponentscssmistica.labelText,
-                children: i
+                children: l
             }),
-            n ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", {
+            a ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", {
                 children: [
                     "\xa0(",
-                    d.formFieldOptionalLabelSuffix || y(_texttokens.formFieldOptionalLabelSuffix),
+                    u.formFieldOptionalLabelSuffix || N(_texttokens.formFieldOptionalLabelSuffix),
                     ")"
                 ]
             }) : null
         ]
     });
-}, X = (param)=>{
-    let { leftText: o, rightText: l, error: e, id: s } = param;
-    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), a = i ? _skincontractcssmistica.vars.colors.textPrimaryInverse : e ? _skincontractcssmistica.vars.colors.textError : _skincontractcssmistica.vars.colors.textSecondary, n = i ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textSecondary;
+}, $ = (param)=>{
+    let { leftText: o, leftTextId: d, rightText: r, rightTextId: s, rightTextLabel: l, error: i } = param;
+    const a = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), n = a ? _skincontractcssmistica.vars.colors.textPrimaryInverse : i ? _skincontractcssmistica.vars.colors.textError : _skincontractcssmistica.vars.colors.textSecondary, m = a ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textSecondary;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             o && /* @__PURE__ */ (0, _jsxruntime.jsxs)("p", {
                 className: (0, _classnames.default)(_textfieldcomponentscssmistica.helperText, _textfieldcomponentscssmistica.leftHelperText),
+                "data-testid": i ? "errorText" : "helperText",
                 children: [
-                    e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
+                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
                         regular: !0,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconwarningregular.default, {
-                            color: a,
+                            color: n,
                             className: _textfieldcomponentscssmistica.warnIcon
                         })
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
-                        color: a,
+                        color: n,
                         regular: !0,
-                        id: s,
+                        id: d,
                         children: o
                     })
                 ]
             }),
-            l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: (0, _classnames.default)(_textfieldcomponentscssmistica.helperText),
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
-                    color: n,
+            r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)(_textfieldcomponentscssmistica.helperText, {
+                    [_textfieldcomponentscssmistica.rightHelperText]: !!o
+                }),
+                "data-testid": "endHelperText",
+                children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_text.Text1, {
+                    color: m,
                     regular: !0,
                     as: "p",
                     textAlign: "right",
-                    children: l
+                    wordBreak: !1,
+                    id: s,
+                    children: [
+                        l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
+                                children: l
+                            })
+                        }),
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
+                            "aria-hidden": l !== void 0,
+                            children: r
+                        })
+                    ]
                 })
             })
         ]
     });
-}, Y = (param)=>{
-    let { multiline: o, disabled: l, children: e, helperText: s, className: i, fieldRef: a, fullWidth: n, readOnly: f, dataAttributes: u } = param;
+}, ee = (param)=>{
+    let { multiline: o, disabled: d, children: r, helperText: s, className: l, fieldRef: i, fullWidth: a, readOnly: n, dataAttributes: m } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(_textfieldcomponentscssmistica.fieldContainer, n ? _textfieldcomponentscssmistica.fullWidth : _textfieldcomponentscssmistica.normalWidth, {
-            [_textfieldcomponentscssmistica.disabled]: l
+        className: (0, _classnames.default)(_textfieldcomponentscssmistica.fieldContainer, a ? _textfieldcomponentscssmistica.fullWidth : _textfieldcomponentscssmistica.normalWidth, {
+            [_textfieldcomponentscssmistica.disabled]: d
         }),
-        onClick: (h)=>{
-            var d;
-            (d = h.currentTarget.querySelector(o ? "textarea" : "input")) == null || d.focus();
+        onClick: (p)=>{
+            var u;
+            (u = p.currentTarget.querySelector(o ? "textarea" : "input")) == null || u.focus();
         }
-    }, (0, _dom.getPrefixedDataAttributes)(u)), {
+    }, (0, _dom.getPrefixedDataAttributes)(m)), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: (0, _classnames.default)(_textfieldcomponentscssmistica.field, f ? _textfieldcomponentscssmistica.background.readOnly : _textfieldcomponentscssmistica.background.default, i),
-                ref: a,
-                children: e
+                className: (0, _classnames.default)(_textfieldcomponentscssmistica.field, n ? _textfieldcomponentscssmistica.background.readOnly : _textfieldcomponentscssmistica.background.default, l),
+                ref: i,
+                children: r
             }),
             s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _textfieldcomponentscssmistica.helperContainer,

package/dist/text-field.js

@@ -145,8 +145,8 @@ const I = (i, t, r, c)=>{
         r,
         i
     ]);
-}, K = /*#__PURE__*/ _react.forwardRef((_param, F)=>{
-    var { disabled: i, error: t, helperText: r, name: c, label: m, optional: a, validate: p, onChangeValue: d, onChange: R, value: T, defaultValue: x, onBlur: l, onFocus: u, onPress: g, dataAttributes: v } = _param, s = _object_without_properties(_param, [
+}, K = /*#__PURE__*/ _react.forwardRef((_param, v)=>{
+    var { disabled: i, error: t, helperText: r, name: c, label: m, optional: a, validate: d, onChangeValue: p, onChange: T, value: x, defaultValue: R, onBlur: n, onFocus: u, onPress: F, dataAttributes: g } = _param, s = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -164,7 +164,7 @@ const I = (i, t, r, c)=>{
         "dataAttributes"
     ]);
     const e = _react.useRef(null), b = (o)=>o, h = (o)=>{
-        s.multiline && e.current && (e.current.scrollTop = 0), l == null || l(o);
+        s.multiline && e.current && (e.current.scrollTop = 0), n == null || n(o);
     }, y = (o)=>{
         s.multiline && setTimeout(()=>{
             if (e.current) {
@@ -172,28 +172,29 @@ const I = (i, t, r, c)=>{
                 e.current.value = "", e.current.value = A, e.current.scrollTop = e.current.scrollHeight;
             }
         }, 0), u == null || u(o);
-    }, n = (0, _formcontext.useFieldProps)({
+    }, l = (0, _formcontext.useFieldProps)({
         name: c,
         label: m,
-        value: T,
-        defaultValue: x,
+        value: x,
+        defaultValue: R,
         processValue: b,
         helperText: r,
         optional: a,
         error: t,
         disabled: i,
         onBlur: h,
-        validate: p,
-        onChange: R,
-        onChangeValue: d
+        validate: d,
+        onChange: T,
+        onChangeValue: p
     });
-    return I(e.current, n.value, s.maxLength, n.onChange), /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, s, n), {
-        onClick: g,
-        inputRef: (0, _common.combineRefs)(e, n.inputRef, F),
+    return I(e.current, l.value, s.maxLength, l.onChange), /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, s, l), {
+        onClick: F,
+        inputRef: (0, _common.combineRefs)(e, l.inputRef, v),
         onFocus: y,
         type: "text",
         dataAttributes: _object_spread({
-            "component-name": "TextField"
-        }, v)
+            "component-name": "TextField",
+            testid: "TextField"
+        }, g)
     }));
 }), G = K;

package/dist/text-link.css-mistica.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "variants", {
     enumerable: true,
     get: function() {
-        return v;
+        return r;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./text-link.css.ts.vanilla.css-mistica.js");
-var v = {
-    default: "_1m1n0pr1 _1y2v1nfi8 _1y2v1nfhn _1y2v1nfkk _1y2v1nf2j",
-    inverseLight: "_1m1n0pr6 _1m1n0pr1 _1y2v1nfi8 _1y2v1nfhn _1y2v1nfkk _1y2v1nf2k",
-    inverseDark: "_1m1n0pr7 _1m1n0pr1 _1y2v1nfi8 _1y2v1nfhn _1y2v1nfkk _1y2v1nf2j"
+var r = {
+    default: "_1m1n0pr1 _1y2v1nfic _1y2v1nfhr _1y2v1nfko _1y2v1nf2l",
+    inverseLight: "_1m1n0pr6 _1m1n0pr1 _1y2v1nfic _1y2v1nfhr _1y2v1nfko _1y2v1nf2m",
+    inverseDark: "_1m1n0pr7 _1m1n0pr1 _1y2v1nfic _1y2v1nfhr _1y2v1nfko _1y2v1nf2l"
 };

package/dist/text-tokens.d.ts

@@ -25,11 +25,14 @@ export type Dictionary = {
     formDateOutOfRangeError: string;
     formEmailError: string;
     formIbanError: string;
+    formTextMultilineMaxCount: string;
     closeButtonLabel: string;
     formSearchClear: string;
     menuLabelSuffix: string;
     openNavigationMenu: string;
     closeNavigationMenu: string;
+    mainNavigationBarOpenSectionMenu: string;
+    mainNavigationBarSectionSeeAll: string;
     backNavigationBar: string;
     clearButton: string;
     carouselNextButton: string;
@@ -95,11 +98,14 @@ export declare const formCreditCardNumberError: TextToken;
 export declare const formDateOutOfRangeError: TextToken;
 export declare const formEmailError: TextToken;
 export declare const formIbanError: TextToken;
+export declare const formTextMultilineMaxCount: TextToken;
 export declare const closeButtonLabel: TextToken;
 export declare const formSearchClear: TextToken;
 export declare const menuLabelSuffix: TextToken;
 export declare const openNavigationMenu: TextToken;
 export declare const closeNavigationMenu: TextToken;
+export declare const mainNavigationBarOpenSectionMenu: TextToken;
+export declare const mainNavigationBarSectionSeeAll: TextToken;
 export declare const backNavigationBar: TextToken;
 export declare const clearButton: TextToken;
 export declare const carouselNextButton: TextToken;