@telefonica/mistica 12.8.0 → 12.9.1

package/dist-es/date-time-picker.js

@@ -61,6 +61,30 @@ function _objectSpread(target) {
     }
     return target;
 }
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _objectSpreadProps(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
@@ -99,27 +123,21 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from "react";
-import { TextFieldBaseAutosuggest } from "./text-field-base";
-import IconCalendarRegular from "./generated/mistica-icons/icon-calendar-regular";
-import Datetime from "react-datetime";
-import Overlay from "./overlay";
-import { DEFAULT_WIDTH } from "./text-field-components";
-import IconButton from "./icon-button";
-import { cancelEvent, createChangeEvent } from "./utils/dom";
-import { createUseStyles } from "./jss";
-import { useElementDimensions, useTheme } from "./hooks";
-import IconCloseRegular from "./generated/mistica-icons/icon-close-regular";
-/**
- * Do not use this component!
- * Use DateField or FormDateTimeField
- *
- * This component is a fallback for browsers that don't support datetime-local or date inputs
- */ var browserLocale = navigator.language.toLocaleLowerCase().split("-")[0];
-import(/* webpackChunkName: "moment-locale" */ "moment/locale/".concat(browserLocale)).finally(function() {});
-// styles from "react-datetime/css/react-datetime.css" converted to JSS "as is"
-var useStyles = createUseStyles(function() {
+import * as f from "react";
+import { TextFieldBaseAutosuggest as T } from "./text-field-base.js";
+import M from "./generated/mistica-icons/icon-calendar-regular.js";
+import H from "react-datetime";
+import B from "./overlay.js";
+import { DEFAULT_WIDTH as A } from "./text-field-components.js";
+import k from "./icon-button.js";
+import { cancelEvent as R, createChangeEvent as I } from "./utils/dom.js";
+import { createUseStyles as L } from "./jss.js";
+import { useTheme as z, useElementDimensions as Y } from "./hooks.js";
+import E from "./generated/mistica-icons/icon-close-regular.js";
+import { jsxs as F, Fragment as O, jsx as o } from "./_virtual/jsx-runtime.js";
+var b = navigator.language.toLocaleLowerCase().split("-")[0];
+import(/* webpackChunkName: "moment-locale" */ "moment/locale/".concat(b)).finally(function() {});
+var N = L(function() {
     return {
         reactDatePicker: {
             "& td, & th": {
@@ -298,132 +316,100 @@ var useStyles = createUseStyles(function() {
             }
         }
     };
-});
-var DateTimePicker = function(_param) {
-    var withTime = _param.withTime, mode = _param.mode, isValidDate = _param.isValidDate, optional = _param.optional, rest = _objectWithoutProperties(_param, [
+}), Z = function(_param) {
+    var l = _param.withTime, a = _param.mode, g = _param.isValidDate, s = _param.optional, r = _objectWithoutProperties(_param, [
         "withTime",
         "mode",
         "isValidDate",
         "optional"
     ]);
-    var ref3 = _slicedToArray(React.useState(false), 2), showPicker = ref3[0], realSetShowPicker = ref3[1];
-    var classes = useStyles();
-    var texts = useTheme().texts;
-    var fieldRef = React.useRef(null);
-    var ref1 = useElementDimensions(), pickerContainerHeight = ref1.height, pickerContainerRef = ref1.ref;
-    var setShowPicker = function(show) {
-        if (!rest.disabled) {
-            realSetShowPicker(show);
-        }
-    };
-    var getPickerContainerStyles = function() {
-        var ref;
-        var ref2 = ((ref = fieldRef.current) === null || ref === void 0 ? void 0 : ref.getBoundingClientRect()) || {}, _top = ref2.top, top = _top === void 0 ? 0 : _top, _bottom = ref2.bottom, bottom = _bottom === void 0 ? 0 : _bottom, _left = ref2.left, left = _left === void 0 ? 0 : _left;
-        // picker has different heights for month, year or day selectors
-        // this hardcoded value is the date selector height + a little threshold
-        var maxPickerHeight = 260;
-        var openToBottom = maxPickerHeight + bottom < window.innerHeight;
+    var ref = _slicedToArray(f.useState(!1), 2), u = ref[0], m = ref[1], P = N(), ref1 = z(), x = ref1.texts, i = f.useRef(null), ref2 = Y(), y = ref2.height, v = ref2.ref, d = function(t) {
+        r.disabled || m(t);
+    }, w = function() {
+        var h;
+        var ref = ((h = i.current) == null ? void 0 : h.getBoundingClientRect()) || {}, tmp = ref.top, t = tmp === void 0 ? 0 : tmp, tmp1 = ref.bottom, e = tmp1 === void 0 ? 0 : tmp1, tmp2 = ref.left, n = tmp2 === void 0 ? 0 : tmp2, D = 260 + e < window.innerHeight;
         return {
-            width: DEFAULT_WIDTH,
-            top: openToBottom ? bottom : top - pickerContainerHeight,
-            left: left,
+            width: A,
+            top: D ? e : t - y,
+            left: n,
             position: "absolute",
             borderRadius: 8,
             overflow: "hidden",
             boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)"
         };
-    };
-    var getValue = function() {
-        var ref;
-        var value = (ref = fieldRef.current) === null || ref === void 0 ? void 0 : ref.value;
-        return value ? new Date(value) : undefined;
-    };
-    var formatMoment = function(moment) {
-        if (withTime) {
-            return moment.format("yyyy-MM-DD HH:mm");
-        }
-        if (mode === "year-month") {
-            return moment.format("yyyy-MM");
-        }
-        return moment.format("yyyy-MM-DD");
-    };
-    var setValue = function(moment) {
-        var value = typeof moment === "string" ? moment : formatMoment(moment);
-        if (fieldRef.current) {
-            var ref;
-            fieldRef.current.focus();
-            (ref = rest.onChange) === null || ref === void 0 ? void 0 : ref.call(rest, createChangeEvent(fieldRef.current, value));
-        }
-    };
-    var renderEndIcon = function() {
-        if (getValue() && optional) {
-            return /*#__PURE__*/ _jsx(IconButton, {
-                "aria-label": texts.clearButton,
-                size: 32,
-                onPress: function(event) {
-                    event.stopPropagation();
-                    setValue("");
-                },
-                children: /*#__PURE__*/ _jsx(IconCloseRegular, {})
-            });
-        }
-        return /*#__PURE__*/ _jsx(IconButton, {
-            disabled: rest.disabled,
+    }, c = function() {
+        var e;
+        var t = (e = i.current) == null ? void 0 : e.value;
+        return t ? new Date(t) : void 0;
+    }, C = function(t) {
+        return l ? t.format("yyyy-MM-DD HH:mm") : a === "year-month" ? t.format("yyyy-MM") : t.format("yyyy-MM-DD");
+    }, p = function(t) {
+        var n;
+        var e = typeof t == "string" ? t : C(t);
+        i.current && (i.current.focus(), (n = r.onChange) == null || n.call(r, I(i.current, e)));
+    }, S = function() {
+        return c() && s ? /* @__PURE__ */ o(k, {
+            "aria-label": x.clearButton,
+            size: 32,
+            onPress: function(t) {
+                t.stopPropagation(), p("");
+            },
+            children: /* @__PURE__ */ o(E, {})
+        }) : /* @__PURE__ */ o(k, {
+            disabled: r.disabled,
             "aria-label": "",
             size: 32,
             onPress: function() {
-                return setShowPicker(!showPicker);
+                return d(!u);
             },
-            children: /*#__PURE__*/ _jsx(IconCalendarRegular, {})
+            children: /* @__PURE__ */ o(M, {})
         });
     };
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    return /* @__PURE__ */ F(O, {
         children: [
-            /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, {
+            /* @__PURE__ */ o(T, _objectSpreadProps(_objectSpread({}, r), {
                 style: {
                     cursor: "default"
                 },
-                required: !optional,
+                required: !s,
                 type: "text",
                 autoComplete: "off",
-                shrinkLabel: !!getValue(),
-                endIcon: renderEndIcon(),
-                inputRef: function(e) {
-                    var ref;
-                    rest === null || rest === void 0 ? void 0 : (ref = rest.inputRef) === null || ref === void 0 ? void 0 : ref.call(rest, e);
-                    fieldRef.current = e;
+                shrinkLabel: !!c(),
+                endIcon: S(),
+                inputRef: function(t) {
+                    var e;
+                    (e = r == null ? void 0 : r.inputRef) == null || e.call(r, t), i.current = t;
                 },
-                readOnly: true,
+                readOnly: !0,
                 onKeyDown: function() {
-                    return setShowPicker(true);
+                    return d(!0);
                 },
                 onClick: function() {
-                    setShowPicker(true);
+                    d(!0);
                 }
             })),
-            showPicker && /*#__PURE__*/ _jsx(Overlay, {
-                onPress: function(e) {
-                    cancelEvent(e);
-                    setShowPicker(false);
+            u && /* @__PURE__ */ o(B, {
+                onPress: function(t) {
+                    R(t), d(!1);
                 },
-                disableScroll: true,
-                children: /*#__PURE__*/ _jsx("div", {
-                    ref: pickerContainerRef,
-                    style: getPickerContainerStyles(),
-                    className: classes.reactDatePicker,
-                    children: /*#__PURE__*/ _jsx(Datetime, {
-                        initialViewMode: mode === "year-month" ? "months" : undefined,
-                        dateFormat: mode === "year-month" ? "YYYY-MM" : undefined,
-                        timeFormat: withTime ? "HH:mm" : false,
-                        initialValue: getValue(),
-                        locale: browserLocale,
-                        input: false,
-                        onChange: setValue,
-                        isValidDate: isValidDate
+                disableScroll: !0,
+                children: /* @__PURE__ */ o("div", {
+                    ref: v,
+                    style: w(),
+                    className: P.reactDatePicker,
+                    children: /* @__PURE__ */ o(H, {
+                        initialViewMode: a === "year-month" ? "months" : void 0,
+                        dateFormat: a === "year-month" ? "YYYY-MM" : void 0,
+                        timeFormat: l ? "HH:mm" : !1,
+                        initialValue: c(),
+                        locale: b,
+                        input: !1,
+                        onChange: p,
+                        isValidDate: g
                     })
                 })
             })
         ]
     });
 };
-export default DateTimePicker;
+export { Z as default };

package/dist-es/decimal-field.js

@@ -61,6 +61,30 @@ function _objectSpread(target) {
     }
     return target;
 }
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _objectSpreadProps(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
@@ -91,6 +115,10 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
+var _typeof = function(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+};
 function _unsupportedIterableToArray(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -99,90 +127,56 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useFieldProps } from "./form-context";
-import { useTheme } from "./hooks";
-import { TextFieldBaseAutosuggest } from "./text-field-base";
-import { createChangeEvent } from "./utils/dom";
-import { useRifm } from "rifm";
-import { combineRefs } from "./utils/common";
-var getLocalDecimalChar = function(locale) {
+import * as y from "react";
+import { useFieldProps as D } from "./form-context.js";
+import { useTheme as x } from "./hooks.js";
+import { TextFieldBaseAutosuggest as F } from "./text-field-base.js";
+import { createChangeEvent as I } from "./utils/dom.js";
+import { useRifm as b } from "rifm";
+import { combineRefs as j } from "./utils/common.js";
+import { jsx as C } from "./_virtual/jsx-runtime.js";
+var B = function(e) {
     try {
-        return 1.1.toLocaleString(locale.replace("_", "-"))[1];
-    } catch (e) {
+        return 1.1.toLocaleString(e.replace("_", "-"))[1];
+    } catch (e1) {
         return ".";
     }
-};
-var format = function(value, maxDecimals) {
-    // do not make the localDecimalChar replacement here. Instead, keep the one the user typed.
-    // Make that replacement in `replace` prost-processor. It is what rifm lib expects.
-    var sanitized = String(value !== null && value !== void 0 ? value : "").replace(/[^.,\d]/g, ""); // remove non digits or decimal separator chars;
-    var firstSeparator = /[.,]/.exec(sanitized);
-    var parts = sanitized.split(/[.,]/);
-    if (parts.length === 0) {
-        // empty
-        return "";
-    }
-    if (firstSeparator && maxDecimals > 0) {
-        // value includes one or more decimal separators, keep the first one
-        return parts.shift() + firstSeparator[0] + parts.join("").slice(0, maxDecimals);
-    } else {
-        // no fractional part, return "as is"
-        return parts[0];
-    }
-};
-var DecimalInput = function(_param) {
-    var inputRef = _param.inputRef, value1 = _param.value, defaultValue = _param.defaultValue, onChange = _param.onChange, maxDecimals = _param.maxDecimals, rest = _objectWithoutProperties(_param, [
+}, E = function(e, n) {
+    var s = String(e != null ? e : "").replace(/[^.,\d]/g, ""), r = /[.,]/.exec(s), o = s.split(/[.,]/);
+    return o.length === 0 ? "" : r && n > 0 ? o.shift() + r[0] + o.join("").slice(0, n) : o[0];
+}, L = function(_param) {
+    var e = _param.inputRef, n = _param.value, s = _param.defaultValue, r = _param.onChange, o = _param.maxDecimals, c = _objectWithoutProperties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "onChange",
         "maxDecimals"
     ]);
-    var i18n = useTheme().i18n;
-    var localDecimalChar = getLocalDecimalChar(i18n.locale);
-    var replace = function(value) {
-        return String(value !== null && value !== void 0 ? value : "").replace(/[.,]/g, localDecimalChar);
-    }; // use local decimal char
-    var ref = _slicedToArray(React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ""), 2), selfValue = ref[0], setSelfValue = ref[1];
-    var ref1 = React.useRef(null);
-    var isControlledByParent = typeof value1 !== "undefined";
-    var controlledValue = isControlledByParent ? value1 : selfValue;
-    var handleChangeValue = React.useCallback(function(newFormattedValue) {
-        if (!isControlledByParent) {
-            setSelfValue(newFormattedValue);
-        }
-        if (ref1.current) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(createChangeEvent(ref1.current, newFormattedValue));
-        }
+    var ref = x(), p = ref.i18n, l = B(p.locale), a = function(t) {
+        return String(t != null ? t : "").replace(/[.,]/g, l);
+    }, ref1 = _slicedToArray(y.useState(s != null ? s : ""), 2), u = ref1[0], d = ref1[1], i = y.useRef(null), f = (typeof n === "undefined" ? "undefined" : _typeof(n)) < "u", g = f ? n : u, S = y.useCallback(function(t) {
+        f || d(t), i.current && (r == null || r(I(i.current, t)));
     }, [
-        isControlledByParent,
-        onChange
-    ]);
-    var rifm = useRifm({
-        format: function(value) {
-            return format(value, maxDecimals);
+        f,
+        r
+    ]), h = b({
+        format: function(t) {
+            return E(t, o);
         },
-        replace: replace,
-        value: controlledValue,
-        onChange: handleChangeValue,
+        replace: a,
+        value: g,
+        onChange: S,
         accept: /[\d.,]+/g
     });
-    return /*#__PURE__*/ _jsx("input", _objectSpread({}, rest, {
+    return /* @__PURE__ */ C("input", _objectSpreadProps(_objectSpread({}, c), {
         type: "text",
-        inputMode: "decimal" // shows decimal keypad in Chrome for Android
-        ,
-        // shows regular keypad in iOS < 12.2 (there's no way to show a decimal keypad in those versions)
-        // https://bugs.webkit.org/show_bug.cgi?id=183621
-        value: rifm.value,
-        onChange: rifm.onChange,
-        ref: combineRefs(inputRef, ref1)
+        inputMode: "decimal",
+        value: h.value,
+        onChange: h.onChange,
+        ref: j(e, i)
     }));
-};
-export { DecimalInput };
-var DecimalField = function(_param) {
-    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validateProp = _param.validate, onChange = _param.onChange, onChangeValue = _param.onChangeValue, onBlur = _param.onBlur, value2 = _param.value, defaultValue = _param.defaultValue, _maxDecimals = _param.maxDecimals, maxDecimals = _maxDecimals === void 0 ? Infinity : _maxDecimals, rest = _objectWithoutProperties(_param, [
+}, q = function(_param) {
+    var e = _param.disabled, n = _param.error, s = _param.helperText, r = _param.name, o = _param.optional, c = _param.validate, p = _param.onChange, l = _param.onChangeValue, a = _param.onBlur, u = _param.value, d = _param.defaultValue, tmp = _param.maxDecimals, i = tmp === void 0 ? 1 / 0 : tmp, f = _objectWithoutProperties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -196,35 +190,29 @@ var DecimalField = function(_param) {
         "defaultValue",
         "maxDecimals"
     ]);
-    var texts = useTheme().texts;
-    var validate = function(value, rawValue) {
-        if (!value) {
-            return optional ? "" : texts.formFieldErrorIsMandatory;
-        }
-        return validateProp === null || validateProp === void 0 ? void 0 : validateProp(value, rawValue);
-    };
-    var processValue = function(value) {
-        return value.trim();
-    };
-    var fieldProps = useFieldProps({
-        name: name,
-        value: value2,
-        defaultValue: defaultValue,
-        processValue: processValue,
-        helperText: helperText,
-        optional: optional,
-        error: error,
-        disabled: disabled,
-        onBlur: onBlur,
-        validate: validate,
-        onChange: onChange,
-        onChangeValue: onChangeValue
+    var ref = x(), g = ref.texts, t = D({
+        name: r,
+        value: u,
+        defaultValue: d,
+        processValue: function(m) {
+            return m.trim();
+        },
+        helperText: s,
+        optional: o,
+        error: n,
+        disabled: e,
+        onBlur: a,
+        validate: function(m, R) {
+            return m ? c == null ? void 0 : c(m, R) : o ? "" : g.formFieldErrorIsMandatory;
+        },
+        onChange: p,
+        onChangeValue: l
     });
-    return /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
-        inputComponent: DecimalInput,
+    return /* @__PURE__ */ C(F, _objectSpreadProps(_objectSpread({}, f, t), {
+        inputComponent: L,
         inputProps: {
-            maxDecimals: maxDecimals
+            maxDecimals: i
         }
     }));
 };
-export default DecimalField;
+export { L as DecimalInput, q as default };