@telefonica/mistica 16.0.0 → 16.1.0

package/dist/date-time-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return P;
+        return ee;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -147,8 +147,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const C = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")))), L = (_param)=>{
-    var { disabled: F, error: g, helperText: R, name: S, optional: f, validate: m, onChange: O, onChangeValue: n, onBlur: h, value: k, defaultValue: y, min: i, /**
+const L = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")))), M = (_param)=>{
+    var { disabled: F, error: g, helperText: R, name: S, label: O, optional: f, validate: m, onChange: h, onChangeValue: n, onBlur: k, value: y, defaultValue: I, min: i, /**
    * When typing a datetime value into the input field (inside a test for example), some browsers like Chrome
    * force the year to have exactly 6 digits. In order to prevent this, in case max value was not provided we
    * set it so that it only accepts datetime values with years having up to 4 digits.
@@ -157,6 +157,7 @@ const C = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -168,21 +169,22 @@ const C = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         "max",
         "dataAttributes"
     ]);
-    const d = _react.useMemo(()=>(0, _platform.isFirefox)() ? !1 : (0, _dom.isInputTypeSupported)("datetime-local"), []), p = (e)=>d ? e : e.replace(/\s/, "T"), { texts: I, t: v } = (0, _hooks.useTheme)(), a = (e)=>{
+    const d = _react.useMemo(()=>(0, _platform.isFirefox)() ? !1 : (0, _dom.isInputTypeSupported)("datetime-local"), []), p = (e)=>d ? e : e.replace(/\s/, "T"), { texts: v, t: x } = (0, _hooks.useTheme)(), a = (e)=>{
         const t = p(e);
         return !(i && t && t < (0, _time.getLocalDateTimeString)(i) || s && t && t > (0, _time.getLocalDateTimeString)(s));
     }, D = (0, _formcontext.useFieldProps)({
         name: S,
-        value: k,
-        defaultValue: y,
+        label: O,
+        value: y,
+        defaultValue: I,
         processValue: p,
         helperText: R,
         optional: f,
         error: g,
         disabled: F,
-        onBlur: h,
-        validate: (e, t)=>a(e) ? m == null ? void 0 : m(e, t) : I.formDateOutOfRangeError || v(_texttokens.formDateOutOfRangeError),
-        onChange: O,
+        onBlur: k,
+        validate: (e, t)=>a(e) ? m == null ? void 0 : m(e, t) : v.formDateOutOfRangeError || x(_texttokens.formDateOutOfRangeError),
+        onChange: h,
         onChangeValue: (e, t)=>{
             a(e) && (n == null || n(e, t));
         }
@@ -202,7 +204,7 @@ const C = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
     }));
     return d || (0, _environment.isServerSide)() ? T : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
         fallback: T,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(C, _object_spread_props(_object_spread({}, u, D), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(L, _object_spread_props(_object_spread({}, u, D), {
             optional: f,
             withTime: !0,
             isValidDate: (e)=>a((0, _time.getLocalDateTimeString)(e.toDate())),
@@ -211,4 +213,4 @@ const C = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
             }, l)
         }))
     });
-}, P = L;
+}, ee = M;

package/dist/decimal-field.d.ts

@@ -16,5 +16,5 @@ export interface DecimalFieldProps extends CommonFormFieldProps {
     /** defaults to Infinity */
     maxDecimals?: number;
 }
-declare const DecimalField: ({ disabled, error, helperText, name, optional, validate: validateProp, onChange, onChangeValue, onBlur, value, defaultValue, maxDecimals, dataAttributes, ...rest }: DecimalFieldProps) => JSX.Element;
+declare const DecimalField: ({ disabled, error, helperText, name, label, optional, validate, onChange, onChangeValue, onBlur, value, defaultValue, maxDecimals, dataAttributes, ...rest }: DecimalFieldProps) => JSX.Element;
 export default DecimalField;

package/dist/decimal-field.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     DecimalInput: function() {
-        return B;
+        return j;
     },
     default: function() {
-        return J;
+        return M;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -25,7 +25,6 @@ const _textfieldbase = require("./text-field-base.js");
 const _dom = require("./utils/dom.js");
 const _rifm = require("rifm");
 const _common = require("./utils/common.js");
-const _texttokens = require("./text-tokens.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -146,48 +145,49 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const j = (o)=>{
+const b = (n)=>{
     try {
-        return 1.1.toLocaleString(o.replace("_", "-"))[1];
+        return 1.1.toLocaleString(n.replace("_", "-"))[1];
     } catch (e) {
         return ".";
     }
-}, A = (o, r)=>{
-    const s = String(o !== null && o !== void 0 ? o : "").replace(/[^.,\d]/g, ""), e = /[.,]/.exec(s), t = s.split(/[.,]/);
-    return t.length === 0 ? "" : e && r > 0 ? t.shift() + e[0] + t.join("").slice(0, r) : t[0];
-}, B = (_param)=>{
-    var { inputRef: o, value: r, defaultValue: s, onChange: e, maxDecimals: t } = _param, c = _object_without_properties(_param, [
+}, v = (n, t)=>{
+    const c = String(n !== null && n !== void 0 ? n : "").replace(/[^.,\d]/g, ""), e = /[.,]/.exec(c), r = c.split(/[.,]/);
+    return r.length === 0 ? "" : e && t > 0 ? r.shift() + e[0] + r.join("").slice(0, t) : r[0];
+}, j = (_param)=>{
+    var { inputRef: n, value: t, defaultValue: c, onChange: e, maxDecimals: r } = _param, l = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "onChange",
         "maxDecimals"
     ]);
-    const { i18n: u } = (0, _hooks.useTheme)(), f = j(u.locale), p = (n)=>String(n !== null && n !== void 0 ? n : "").replace(/[.,]/g, f), [d, g] = _react.useState(s !== null && s !== void 0 ? s : ""), i = _react.useRef(null), l = typeof r < "u", h = l ? r : d, y = _react.useCallback((n)=>{
-        l || g(n), i.current && (e == null || e((0, _dom.createChangeEvent)(i.current, n)));
+    const { i18n: a } = (0, _hooks.useTheme)(), u = b(a.locale), p = (o)=>String(o !== null && o !== void 0 ? o : "").replace(/[.,]/g, u), [m, f] = _react.useState(c !== null && c !== void 0 ? c : ""), s = _react.useRef(null), i = typeof t < "u", d = i ? t : m, g = _react.useCallback((o)=>{
+        i || f(o), s.current && (e == null || e((0, _dom.createChangeEvent)(s.current, o)));
     }, [
-        l,
+        i,
         e
-    ]), a = (0, _rifm.useRifm)({
-        format: (n)=>A(n, t),
+    ]), h = (0, _rifm.useRifm)({
+        format: (o)=>v(o, r),
         replace: p,
-        value: h,
-        onChange: y,
+        value: d,
+        onChange: g,
         accept: /[\d.,]+/g
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, c), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, l), {
         type: "text",
         inputMode: "decimal",
-        value: a.value,
-        onChange: a.onChange,
-        ref: (0, _common.combineRefs)(o, i)
+        value: h.value,
+        onChange: h.onChange,
+        ref: (0, _common.combineRefs)(n, s)
     }));
-}, L = (_param)=>{
-    var { disabled: o, error: r, helperText: s, name: e, optional: t, validate: c, onChange: u, onChangeValue: f, onBlur: p, value: d, defaultValue: g, maxDecimals: i = 1 / 0, dataAttributes: l } = _param, h = _object_without_properties(_param, [
+}, A = (_param)=>{
+    var { disabled: n, error: t, helperText: c, name: e, label: r, optional: l, validate: a, onChange: u, onChangeValue: p, onBlur: m, value: f, defaultValue: s, maxDecimals: i = 1 / 0, dataAttributes: d } = _param, g = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -198,27 +198,28 @@ const j = (o)=>{
         "maxDecimals",
         "dataAttributes"
     ]);
-    const { texts: y, t: a } = (0, _hooks.useTheme)(), C = (0, _formcontext.useFieldProps)({
+    const o = (0, _formcontext.useFieldProps)({
         name: e,
-        value: d,
-        defaultValue: g,
-        processValue: (m)=>m.trim(),
-        helperText: s,
-        optional: t,
-        error: r,
-        disabled: o,
-        onBlur: p,
-        validate: (m, D)=>m ? c == null ? void 0 : c(m, D) : t ? "" : y.formFieldErrorIsMandatory || a(_texttokens.formFieldErrorIsMandatory),
+        label: r,
+        value: f,
+        defaultValue: s,
+        processValue: (C)=>C.trim(),
+        helperText: c,
+        optional: l,
+        error: t,
+        disabled: n,
+        onBlur: m,
+        validate: a,
         onChange: u,
-        onChangeValue: f
+        onChangeValue: p
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, h, C), {
-        inputComponent: B,
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, g, o), {
+        inputComponent: j,
         inputProps: {
             maxDecimals: i
         },
         dataAttributes: _object_spread({
             "component-name": "DecimalField"
-        }, l)
+        }, d)
     }));
-}, J = L;
+}, M = A;

package/dist/email-field.d.ts

@@ -4,5 +4,5 @@ export interface EmailFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
     getSuggestions?: (value: string) => Array<string>;
 }
-declare const EmailField: ({ disabled, error, helperText, name, optional, validate: validateProp, onChange, onChangeValue, onBlur, value, autoComplete, defaultValue, dataAttributes, ...rest }: EmailFieldProps) => JSX.Element;
+declare const EmailField: ({ disabled, error, helperText, name, label, optional, validate: validateProp, onChange, onChangeValue, onBlur, value, autoComplete, defaultValue, dataAttributes, ...rest }: EmailFieldProps) => JSX.Element;
 export default EmailField;

package/dist/email-field.js

@@ -93,12 +93,13 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const $ = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, b = (_param)=>{
-    var { disabled: m, error: i, helperText: n, name: a, optional: e, validate: t, onChange: l, onChangeValue: f, onBlur: d, value: u, autoComplete: E = "email", defaultValue: c, dataAttributes: p } = _param, F = _object_without_properties(_param, [
+const h = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, j = (_param)=>{
+    var { disabled: r, error: o, helperText: s, name: m, label: i, optional: l, validate: e, onChange: n, onChangeValue: a, onBlur: u, value: c, autoComplete: f = "email", defaultValue: p, dataAttributes: E } = _param, d = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -109,26 +110,27 @@ const $ = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, b = (_param)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: o, t: s } = (0, _hooks.useTheme)(), x = (0, _formcontext.useFieldProps)({
-        name: a,
-        value: u,
-        defaultValue: c,
-        processValue: (r)=>r.trim(),
-        helperText: n,
-        optional: e,
-        error: i,
-        disabled: m,
-        onBlur: d,
-        validate: (r, M)=>r ? $.test(r) ? t == null ? void 0 : t(r, M) : o.formEmailError || s(_texttokens.formEmailError) : e ? "" : o.formFieldErrorIsMandatory || s(_texttokens.formFieldErrorIsMandatory),
-        onChange: l,
-        onChangeValue: f
+    const { texts: F, t: x } = (0, _hooks.useTheme)(), A = (0, _formcontext.useFieldProps)({
+        name: m,
+        label: i,
+        value: c,
+        defaultValue: p,
+        processValue: (t)=>t.trim(),
+        helperText: s,
+        optional: l,
+        error: o,
+        disabled: r,
+        onBlur: u,
+        validate: (t, g)=>h.test(t !== null && t !== void 0 ? t : "") ? e == null ? void 0 : e(t, g) : F.formEmailError || x(_texttokens.formEmailError),
+        onChange: n,
+        onChangeValue: a
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, F, x), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, d, A), {
         type: "email",
         inputMode: "email",
-        autoComplete: E,
+        autoComplete: f,
         dataAttributes: _object_spread({
             "component-name": "EmailField"
-        }, p)
+        }, E)
     }));
-}, q = b;
+}, q = j;

package/dist/form-context.d.ts

@@ -8,6 +8,7 @@ export type FieldRegistration = {
     input?: HTMLInputElement | HTMLSelectElement | null;
     validator?: FieldValidator;
     focusableElement?: HTMLDivElement | HTMLSelectElement | null;
+    label?: string;
 };
 type Context = {
     rawValues: {
@@ -38,22 +39,25 @@ type Context = {
 };
 export declare const FormContext: React.Context<Context>;
 export declare const useForm: () => Context;
-export declare const useControlProps: <T>({ name, value, defaultValue, onChange, disabled, }: {
+export declare const useControlProps: <T>({ name, label, value, defaultValue, onChange, disabled, }: {
     name: string;
+    label?: string;
     value: undefined | T;
     defaultValue: undefined | T;
     onChange: undefined | ((value: T) => void);
     disabled?: boolean;
 }) => {
     name: string;
+    label?: string;
     value?: T;
     defaultValue?: T;
     onChange: (value: T) => void;
     focusableRef: (focusableElement: HTMLDivElement | null) => void;
     disabled: boolean | undefined;
 };
-export declare const useFieldProps: ({ name, value, defaultValue, processValue, helperText, optional, error, disabled, onBlur, validate, onChange, onChangeValue, }: {
+export declare const useFieldProps: ({ name, label, value, defaultValue, processValue, helperText, optional, error, disabled, onBlur, validate, onChange, onChangeValue, }: {
     name: string;
+    label: string;
     value?: string;
     defaultValue?: string;
     processValue: (value: string) => unknown;
@@ -69,6 +73,7 @@ export declare const useFieldProps: ({ name, value, defaultValue, processValue,
     value?: string;
     defaultValue?: string;
     name: string;
+    label: string;
     helperText?: string;
     required: boolean;
     error: boolean;

package/dist/form-context.js

@@ -11,19 +11,21 @@ function _export(target, all) {
 }
 _export(exports, {
     FormContext: function() {
-        return k;
+        return D;
     },
     useControlProps: function() {
-        return y;
+        return J;
     },
     useFieldProps: function() {
-        return z;
+        return K;
     },
     useForm: function() {
-        return P;
+        return M;
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _hooks = require("./hooks.js");
+const _texttokens = require("./text-tokens.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -65,7 +67,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const k = /*#__PURE__*/ _react.createContext({
+const D = /*#__PURE__*/ _react.createContext({
     values: {},
     setValue: ()=>{},
     rawValues: {},
@@ -78,107 +80,112 @@ const k = /*#__PURE__*/ _react.createContext({
     submit: ()=>{},
     validate: ()=>({}),
     formId: ""
-}), P = ()=>_react.useContext(k), y = (param)=>{
-    let { name: r, value: t, defaultValue: e, onChange: u, disabled: p } = param;
-    const { setRawValue: l, setValue: w, rawValues: o, setFormError: E, register: f, formStatus: R } = P();
+}), M = ()=>_react.useContext(D), J = (param)=>{
+    let { name: r, label: d, value: s, defaultValue: u, onChange: f, disabled: x } = param;
+    const { setRawValue: i, setValue: v, rawValues: o, setFormError: E, register: p, formStatus: w } = M();
     var _o_r;
     return _react.useEffect(()=>{
         if (o[r] === void 0) {
             var _ref;
-            const s = (_ref = t !== null && t !== void 0 ? t : e) !== null && _ref !== void 0 ? _ref : !1;
-            w({
+            const t = (_ref = s !== null && s !== void 0 ? s : u) !== null && _ref !== void 0 ? _ref : !1;
+            v({
                 name: r,
-                value: s
-            }), l({
+                value: t
+            }), i({
                 name: r,
-                value: s
+                value: t
             });
         }
     }, [
-        t,
+        s,
         r,
-        e,
+        u,
         o,
-        w,
-        l
+        v,
+        i
     ]), {
         name: r,
-        value: t,
-        defaultValue: e !== null && e !== void 0 ? e : t === void 0 ? (_o_r = o[r]) !== null && _o_r !== void 0 ? _o_r : !1 : void 0,
-        focusableRef: (s)=>f(r, {
-                focusableElement: s
+        label: d,
+        value: s,
+        defaultValue: u !== null && u !== void 0 ? u : s === void 0 ? (_o_r = o[r]) !== null && _o_r !== void 0 ? _o_r : !1 : void 0,
+        focusableRef: (t)=>p(r, {
+                focusableElement: t,
+                label: d
             }),
-        onChange: (s)=>{
-            l({
+        onChange: (t)=>{
+            i({
                 name: r,
-                value: s
-            }), w({
+                value: t
+            }), v({
                 name: r,
-                value: s
+                value: t
             }), E({
                 name: r,
                 error: ""
-            }), u == null || u(s);
+            }), f == null || f(t);
         },
-        disabled: R === "sending" || p
+        disabled: w === "sending" || x
     };
-}, z = (param)=>{
-    let { name: r, value: t, defaultValue: e, processValue: u, helperText: p, optional: l, error: w, disabled: o, onBlur: E, validate: f, onChange: R, onChangeValue: s } = param;
+}, K = (param)=>{
+    let { name: r, label: d, value: s, defaultValue: u, processValue: f, helperText: x, optional: i, error: v, disabled: o, onBlur: E, validate: p, onChange: w, onChangeValue: t } = param;
     var _ref, _ref1;
-    const { setRawValue: v, setValue: V, rawValues: x, values: j, formErrors: T, formStatus: q, setFormError: d, register: I } = P(), F = (_ref1 = (_ref = t !== null && t !== void 0 ? t : e) !== null && _ref !== void 0 ? _ref : x[r]) !== null && _ref1 !== void 0 ? _ref1 : "", N = _react.useRef(u);
-    var _x_r;
+    const { texts: P, t: j } = (0, _hooks.useTheme)(), { setRawValue: V, setValue: T, rawValues: F, values: q, formErrors: S, formStatus: N, setFormError: R, register: b } = M(), I = (_ref1 = (_ref = s !== null && s !== void 0 ? s : u) !== null && _ref !== void 0 ? _ref : F[r]) !== null && _ref1 !== void 0 ? _ref1 : "", k = _react.useRef(f);
+    var _F_r;
     return _react.useEffect(()=>{
-        v({
+        V({
             name: r,
-            value: F
-        }), V({
+            value: I
+        }), T({
             name: r,
-            value: N.current(F)
+            value: k.current(I)
         });
     }, [
         r,
-        F,
-        v,
-        V
+        I,
+        V,
+        T
     ]), _react.useEffect(()=>{
-        o && d({
+        o && R({
             name: r,
             error: void 0
         });
     }, [
         o,
         r,
-        d
+        R
     ]), {
-        value: t,
-        defaultValue: e !== null && e !== void 0 ? e : t === void 0 ? (_x_r = x[r]) !== null && _x_r !== void 0 ? _x_r : "" : void 0,
+        value: s,
+        defaultValue: u !== null && u !== void 0 ? u : s === void 0 ? (_F_r = F[r]) !== null && _F_r !== void 0 ? _F_r : "" : void 0,
         name: r,
-        helperText: T[r] || p,
-        required: !l,
-        error: w || !!T[r],
-        disabled: o || q === "sending",
-        onBlur: (i)=>{
-            d({
+        label: d,
+        helperText: S[r] || x,
+        required: !i,
+        error: v || !!S[r],
+        disabled: o || N === "sending",
+        onBlur: (c)=>{
+            let e;
+            !F[r] && !i ? e = P.formFieldErrorIsMandatory || j(_texttokens.formFieldErrorIsMandatory) : p && (e = p(q[r], F[r])), R({
                 name: r,
-                error: f == null ? void 0 : f(j[r], x[r])
-            }), E == null || E(i);
+                error: e
+            }), E == null || E(c);
         },
-        inputRef: (i)=>I(r, {
-                input: i,
-                validator: f
+        inputRef: (c)=>b(r, {
+                input: c,
+                validator: p,
+                label: d
             }),
-        onChange: (i)=>{
-            const S = i.currentTarget.value, b = u(S);
-            v({
+        onChange: (c)=>{
+            const e = c.currentTarget.value, y = f(e);
+            V({
                 name: r,
-                value: S
-            }), V({
+                value: e
+            }), T({
                 name: r,
-                value: b
-            }), d({
+                value: y
+            }), R({
                 name: r,
                 error: ""
-            }), R == null || R(i), s == null || s(b, S);
+            }), w == null || w(c), t == null || t(y, e);
         }
     };
 };

package/dist/form.d.ts

@@ -10,7 +10,8 @@ type FormProps = {
     autoJump?: boolean;
     children: React.ReactNode;
     onValidationErrors?: (errors: FormErrors) => void;
+    getErrorMessageForScreenReader?: (errors: FormErrors) => string;
     className?: string;
 };
-declare const Form: ({ children, className, onSubmit, initialValues, autoJump, onValidationErrors, id: idProp, }: FormProps) => JSX.Element;
+declare const Form: ({ children, className, onSubmit, initialValues, autoJump, onValidationErrors, getErrorMessageForScreenReader, id: idProp, }: FormProps) => JSX.Element;
 export default Form;