@telefonica/mistica 16.0.0 → 16.1.0

package/dist-es/form.js

@@ -51,127 +51,141 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as E } from "react/jsx-runtime";
+import { jsx as k, jsxs as $ } from "react/jsx-runtime";
 import * as n from "react";
-import { useTheme as A } from "./hooks.js";
-import { FormContext as B } from "./form-context.js";
-import L from "classnames";
-import { sprinkles as W } from "./sprinkles.css-mistica.js";
-import { formFieldErrorIsMandatory as G } from "./text-tokens.js";
+import { useTheme as q } from "./hooks.js";
+import { FormContext as G } from "./form-context.js";
+import U from "classnames";
+import { sprinkles as z } from "./sprinkles.css-mistica.js";
+import { formFieldErrorIsMandatory as H, formErrorsAlertMessage as K } from "./text-tokens.js";
+import Q from "./screen-reader-only.js";
 process.env.NODE_ENV !== "test" && typeof document < "u" && !("scrollBehavior" in document.documentElement.style) && import("scroll-behavior-polyfill").finally(()=>{});
-const U = (param)=>{
-    let { children: N, className: R, onSubmit: b, initialValues: k = {}, autoJump: y = !1, onValidationErrors: a, id: S } = param;
-    const f = n.useRef(!0), [i, x] = n.useState(k), [l, w] = n.useState(k), [V, m] = n.useState("filling"), [j, h] = n.useState({}), c = n.useRef(/* @__PURE__ */ new Map()), d = n.useRef(null), { texts: g, t: v } = A(), M = n.useId(), F = S || M;
+const X = (param)=>{
+    let { children: S, className: j, onSubmit: g, initialValues: E = {}, autoJump: O = !1, onValidationErrors: a, getErrorMessageForScreenReader: v, id: M } = param;
+    const f = n.useRef(!0), [u, w] = n.useState(E), [c, V] = n.useState(E), [P, m] = n.useState("filling"), [d, F] = n.useState({}), l = n.useRef(/* @__PURE__ */ new Map()), p = n.useRef(null), { texts: b, t: h } = q(), T = n.useId(), I = M || T;
     n.useEffect(()=>(f.current = !0, ()=>{
             f.current = !1;
         }), []);
-    const P = n.useCallback((e, param)=>{
-        let { input: r, validator: o, focusableElement: t } = param;
-        r || t ? c.current.set(e, {
-            input: r,
-            validator: o,
-            focusableElement: t
-        }) : c.current.delete(e);
-    }, []), T = n.useCallback((param)=>{
-        let { name: e, error: r } = param;
-        return h((o)=>_object_spread_props(_object_spread({}, o), {
-                [e]: r
+    const A = n.useCallback((e, param)=>{
+        let { input: t, validator: s, focusableElement: r, label: o } = param;
+        t || r ? l.current.set(e, {
+            input: t,
+            validator: s,
+            focusableElement: r,
+            label: o
+        }) : l.current.delete(e);
+    }, []), D = n.useCallback((param)=>{
+        let { name: e, error: t } = param;
+        return F((s)=>_object_spread_props(_object_spread({}, s), {
+                [e]: t
             }));
-    }, []), p = n.useCallback(()=>{
-        var o;
+    }, []), y = n.useCallback(()=>{
+        var s;
         const e = {};
-        for (const [t, { input: s, validator: u }] of c.current)if (s) {
-            if (s.disabled) continue;
-            if (s.required && !((o = l[t]) != null && o.trim())) e[t] = g.formFieldErrorIsMandatory || v(G);
+        for (const [r, { input: o, validator: i }] of l.current)if (o) {
+            if (o.disabled) continue;
+            if (o.required && !((s = c[r]) != null && s.trim())) e[r] = b.formFieldErrorIsMandatory || h(H);
             else {
-                const C = u == null ? void 0 : u(i[t], l[t]);
-                C && (e[t] = C);
+                const R = i == null ? void 0 : i(u[r], c[r]);
+                R && (e[r] = R);
             }
         }
-        const r = Object.keys(e).map((t)=>{
-            const s = c.current.get(t);
-            return (s == null ? void 0 : s.focusableElement) || (s == null ? void 0 : s.input);
+        const t = Object.keys(e).map((r)=>{
+            const o = l.current.get(r);
+            return (o == null ? void 0 : o.focusableElement) || (o == null ? void 0 : o.input);
         }).filter(Boolean);
-        if (r.length) {
-            r.sort((t, s)=>t.compareDocumentPosition(s) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1), r[0].focus();
+        if (t.length) {
+            t.sort((r, o)=>r.compareDocumentPosition(o) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1), t[0].focus();
             try {
-                r[0].scrollIntoView({
+                t[0].scrollIntoView({
                     behavior: "smooth",
                     block: "center",
                     inline: "center"
                 });
             } catch (e) {}
         }
-        return h(e), a && Object.keys(e).length > 0 && a(e), e;
+        return F(e), a && Object.keys(e).length > 0 && a(e), e;
     }, [
         a,
-        l,
-        g,
-        i,
-        v
-    ]), D = n.useCallback((e)=>{
+        c,
+        b,
+        u,
+        h
+    ]), B = n.useCallback((e)=>{
         setTimeout(()=>{
-            var r;
-            if (y && d.current) {
-                const o = Array.from(d.current.querySelectorAll("input, select")), t = (r = c.current.get(e)) == null ? void 0 : r.input, s = o.indexOf(t);
-                if (s >= 0) {
-                    const u = o[s + 1];
-                    u ? u.focus() : t == null || t.blur();
+            var t;
+            if (O && p.current) {
+                const s = Array.from(p.current.querySelectorAll("input, select")), r = (t = l.current.get(e)) == null ? void 0 : t.input, o = s.indexOf(r);
+                if (o >= 0) {
+                    const i = s[o + 1];
+                    i ? i.focus() : r == null || r.blur();
                 }
             }
         }, 100);
     }, [
-        y
-    ]), I = (e)=>[
-            ...c.current.keys()
-        ].reduce((r, o)=>{
-            var t, s;
-            return (s = (t = c.current.get(o)) == null ? void 0 : t.input) != null && s.disabled ? r : _object_spread_props(_object_spread({}, r), {
-                [o]: e[o]
+        O
+    ]), x = (e)=>[
+            ...l.current.keys()
+        ].reduce((t, s)=>{
+            var r, o;
+            return (o = (r = l.current.get(s)) == null ? void 0 : r.input) != null && o.disabled ? t : _object_spread_props(_object_spread({}, t), {
+                [s]: e[s]
             });
-        }, {}), O = n.useCallback((e)=>(e == null || e.preventDefault(), m("sending"), Object.keys(p()).length > 0 ? (m("filling"), Promise.resolve()) : Promise.resolve(b(I(i), I(l))).finally(()=>{
+        }, {}), C = n.useCallback((e)=>(e == null || e.preventDefault(), m("sending"), Object.keys(y()).length > 0 ? (m("filling"), Promise.resolve()) : Promise.resolve(g(x(u), x(c))).finally(()=>{
             f.current && m("filling");
         })), [
-        b,
-        l,
-        p,
-        i
-    ]), _ = n.useCallback((param)=>{
-        let { name: e, value: r } = param;
-        x((o)=>_object_spread_props(_object_spread({}, o), {
-                [e]: r
+        g,
+        c,
+        y,
+        u
+    ]), L = n.useCallback((param)=>{
+        let { name: e, value: t } = param;
+        w((s)=>_object_spread_props(_object_spread({}, s), {
+                [e]: t
             }));
-    }, []), q = n.useCallback((param)=>{
-        let { name: e, value: r } = param;
-        w((o)=>_object_spread_props(_object_spread({}, o), {
-                [e]: r
+    }, []), W = n.useCallback((param)=>{
+        let { name: e, value: t } = param;
+        V((s)=>_object_spread_props(_object_spread({}, s), {
+                [e]: t
             }));
-    }, []);
-    return /* @__PURE__ */ E(B.Provider, {
+    }, []), N = Object.entries(d).map((param)=>{
+        let [e, t] = param;
+        var s;
+        return t && ((s = l.current.get(e)) == null ? void 0 : s.label);
+    }).filter(Boolean), _ = N.length > 1;
+    return /* @__PURE__ */ k(G.Provider, {
         value: {
-            formStatus: V,
-            values: i,
-            setValue: _,
-            rawValues: l,
-            setRawValue: q,
-            formErrors: j,
-            setFormError: T,
-            register: P,
-            jumpToNext: D,
-            validate: p,
-            submit: O,
-            formId: F
+            formStatus: P,
+            values: u,
+            setValue: L,
+            rawValues: c,
+            setRawValue: W,
+            formErrors: d,
+            setFormError: D,
+            register: A,
+            jumpToNext: B,
+            validate: y,
+            submit: C,
+            formId: I
         },
-        children: /* @__PURE__ */ E("form", {
-            id: F,
-            onSubmit: O,
-            ref: d,
-            className: L(W({
+        children: /* @__PURE__ */ $("form", {
+            id: I,
+            onSubmit: C,
+            ref: p,
+            className: U(z({
                 width: "100%"
-            }), R),
+            }), j),
             noValidate: !0,
-            children: N
+            children: [
+                _ ? /* @__PURE__ */ k(Q, {
+                    children: /* @__PURE__ */ k("span", {
+                        role: "alert",
+                        children: v ? v(d) : `${b.formErrorsAlertMessage || h(K)} ${N.join(", ")}`
+                    })
+                }) : null,
+                S
+            ]
         })
     });
-}, Y = U;
-export { Y as default };
+}, oe = X;
+export { oe as default };

package/dist-es/iban-field.js

@@ -81,22 +81,22 @@ function _object_without_properties_loose(source, excluded) {
 import { jsx as C } from "react/jsx-runtime";
 import * as b from "react";
 import { useRifm as x } from "rifm";
-import { useFieldProps as E } from "./form-context.js";
-import { TextFieldBaseAutosuggest as N } from "./text-field-base.js";
+import { useFieldProps as N } from "./form-context.js";
+import { TextFieldBaseAutosuggest as E } from "./text-field-base.js";
 import { createChangeEvent as L } from "./utils/dom.js";
 import { combineRefs as V } from "./utils/common.js";
 import { useTheme as B } from "./hooks.js";
-import { formFieldErrorIsMandatory as F, formIbanError as k } from "./text-tokens.js";
-const I = {
+import { formIbanError as k } from "./text-tokens.js";
+const A = {
     ES: 24,
     GB: 22,
     DE: 22,
     BR: 29
-}, M = 32, R = (t, e)=>{
+}, R = 32, S = (t, e)=>{
     let n = 0;
     for(let r = 0; r < t.length; r++)n = (n * 10 + Number(t[r])) % e;
     return n;
-}, y = (t)=>/^[A-Z]{2}$/.test(t), S = (t)=>/^\d{2}$/.test(t), T = (t)=>{
+}, v = (t)=>/^[A-Z]{2}$/.test(t), T = (t)=>/^\d{2}$/.test(t), z = (t)=>{
     let e = t.substr(4) + t.substr(0, 4);
     const n = "A".charCodeAt(0);
     return e = Array.from(e).map((r)=>{
@@ -105,12 +105,12 @@ const I = {
             return String(10 + s - n);
         }
         return r;
-    }).join(""), R(e, 97) === 1;
-}, z = (t)=>{
+    }).join(""), S(e, 97) === 1;
+}, F = (t)=>{
     const e = t.substr(0, 2), n = t.substr(2, 2);
-    if (!y(e) || !S(n)) return !1;
-    const r = I[e];
-    return !(r && r !== t.length || !T(t));
+    if (!v(e) || !T(n)) return !1;
+    const r = A[e];
+    return !(r && r !== t.length || !z(t));
 }, Z = (t)=>{
     var n;
     const e = t.replace(/[^\dA-Za-z]/g, "");
@@ -118,9 +118,9 @@ const I = {
     return (_ref = (n = e.match(/.{1,4}/g)) == null ? void 0 : n.join(" ")) !== null && _ref !== void 0 ? _ref : e;
 }, j = (t)=>{
     const e = t.substr(0, 2);
-    let n = M;
-    if (e && y(e)) {
-        const s = I[e];
+    let n = R;
+    if (e && v(e)) {
+        const s = A[e];
         s && (n = s);
     }
     const r = Math.ceil(n / 4) - 1;
@@ -132,8 +132,8 @@ const I = {
         "defaultValue",
         "onChange"
     ]);
-    const [u, p] = b.useState(n !== null && n !== void 0 ? n : ""), c = b.useRef(null), i = typeof e < "u", d = i ? e : u, g = b.useCallback((o)=>{
-        i || p(o), c.current && (r == null || r(L(c.current, o)));
+    const [m, u] = b.useState(n !== null && n !== void 0 ? n : ""), c = b.useRef(null), i = typeof e < "u", d = i ? e : m, g = b.useCallback((o)=>{
+        i || u(o), c.current && (r == null || r(L(c.current, o)));
     }, [
         i,
         r
@@ -148,19 +148,20 @@ const I = {
         maxLength: j(a.value),
         value: a.value,
         onChange: (o)=>{
-            var h;
-            const m = o.target.value, l = a.value;
-            return m.length - l.length > 1 && ((h = o.nativeEvent) == null ? void 0 : h.inputType) === "insertText" && (o.target.value = l), a.onChange(o);
+            var f;
+            const h = o.target.value, l = a.value;
+            return h.length - l.length > 1 && ((f = o.nativeEvent) == null ? void 0 : f.inputType) === "insertText" && (o.target.value = l), a.onChange(o);
         },
         type: "text",
         ref: V(t, c)
     }));
-}, P = (_param)=>{
-    var { disabled: t, error: e, helperText: n, name: r, optional: s, validate: u, onChange: p, onChangeValue: c, onBlur: i, value: d, defaultValue: g, dataAttributes: a } = _param, o = _object_without_properties(_param, [
+}, M = (_param)=>{
+    var { disabled: t, error: e, helperText: n, name: r, label: s, optional: m, validate: u, onChange: c, onChangeValue: i, onBlur: d, value: g, defaultValue: a, dataAttributes: o } = _param, h = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -170,25 +171,26 @@ const I = {
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: m, t: l } = B(), A = E({
+    const { texts: l, t: f } = B(), I = N({
         name: r,
-        value: d,
-        defaultValue: g,
-        processValue: (f)=>f.replace(/[^\dA-Za-z]/g, ""),
+        label: s,
+        value: g,
+        defaultValue: a,
+        processValue: (p)=>p.replace(/[^\dA-Za-z]/g, ""),
         helperText: n,
-        optional: s,
+        optional: m,
         error: e,
         disabled: t,
-        onBlur: i,
-        validate: (f, v)=>f ? z(f) ? u == null ? void 0 : u(f, v) : m.formIbanError || l(k) : s ? "" : m.formFieldErrorIsMandatory || l(F),
-        onChange: p,
-        onChangeValue: c
+        onBlur: d,
+        validate: (p, y)=>F(p !== null && p !== void 0 ? p : "") ? u == null ? void 0 : u(p, y) : l.formIbanError || f(k),
+        onChange: c,
+        onChangeValue: i
     });
-    return /* @__PURE__ */ C(N, _object_spread_props(_object_spread({}, o, A), {
+    return /* @__PURE__ */ C(E, _object_spread_props(_object_spread({}, h, I), {
         inputComponent: D,
         dataAttributes: _object_spread({
             "component-name": "IbanField"
-        }, a)
+        }, o)
     }));
-}, J = P;
+}, J = M;
 export { J as default };