@telefonica/mistica 11.2.1 → 11.4.1

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

@@ -1,15 +1,3 @@
-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';
 function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -111,190 +99,202 @@ 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];
+ */ 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() {
     return {
         reactDatePicker: {
-            '& td, & th': {
-                verticalAlign: 'middle'
+            "& td, & th": {
+                verticalAlign: "middle"
             },
-            '& .rdt': {
-                position: 'relative',
-                userSelect: 'none'
+            "& .rdt": {
+                position: "relative",
+                userSelect: "none"
             },
-            '& .rdtPicker': {
-                display: 'none',
-                position: 'absolute',
+            "& .rdtPicker": {
+                display: "none",
+                position: "absolute",
                 minWidth: 250,
                 padding: 4,
                 marginTop: 1,
-                zIndex: '99999 !important',
-                background: '#fff',
-                boxShadow: '0 1px 3px rgba(0,0,0,.1)',
-                border: '1px solid #f9f9f9'
+                zIndex: "99999 !important",
+                background: "#fff",
+                boxShadow: "0 1px 3px rgba(0,0,0,.1)",
+                border: "1px solid #f9f9f9"
             },
-            '& .rdtOpen .rdtPicker': {
-                display: 'block'
+            "& .rdtOpen .rdtPicker": {
+                display: "block"
             },
-            '& .rdtStatic .rdtPicker': {
-                boxShadow: 'none',
-                position: 'static'
+            "& .rdtStatic .rdtPicker": {
+                boxShadow: "none",
+                position: "static"
             },
-            '& .rdtPicker .rdtTimeToggle': {
-                textAlign: 'center'
+            "& .rdtPicker .rdtTimeToggle": {
+                textAlign: "center"
             },
-            '& .rdtPicker table': {
-                width: '100%',
+            "& .rdtPicker table": {
+                width: "100%",
                 margin: 0
             },
-            '& .rdtPicker td, & .rdtPicker th': {
-                textAlign: 'center',
+            "& .rdtPicker td, & .rdtPicker th": {
+                textAlign: "center",
                 height: 28
             },
-            '& .rdtPicker td': {
-                cursor: 'pointer'
+            "& .rdtPicker td": {
+                cursor: "pointer"
             },
-            '& .rdtPicker td.rdtDay:hover, & .rdtPicker td.rdtHour:hover, & .rdtPicker td.rdtMinute:hover, & .rdtPicker td.rdtSecond:hover, & .rdtPicker .rdtTimeToggle:hover': {
-                background: '#eeeeee',
-                cursor: 'pointer'
+            "& .rdtPicker td.rdtDay:hover, & .rdtPicker td.rdtHour:hover, & .rdtPicker td.rdtMinute:hover, & .rdtPicker td.rdtSecond:hover, & .rdtPicker .rdtTimeToggle:hover": {
+                background: "#eeeeee",
+                cursor: "pointer"
             },
-            '& .rdtPicker td.rdtOld, & .rdtPicker td.rdtNew': {
-                color: '#999999'
+            "& .rdtPicker td.rdtOld, & .rdtPicker td.rdtNew": {
+                color: "#999999"
             },
-            '& .rdtPicker td.rdtToday': {
-                position: 'relative'
+            "& .rdtPicker td.rdtToday": {
+                position: "relative"
             },
-            '& .rdtPicker td.rdtToday:before': {
+            "& .rdtPicker td.rdtToday:before": {
                 content: '""',
-                display: 'inline-block',
-                borderLeft: '7px solid transparent',
-                borderBottom: '7px solid #428bca',
-                borderTopColor: 'rgba(0, 0, 0, 0.2)',
-                position: 'absolute',
+                display: "inline-block",
+                borderLeft: "7px solid transparent",
+                borderBottom: "7px solid #428bca",
+                borderTopColor: "rgba(0, 0, 0, 0.2)",
+                position: "absolute",
                 bottom: 4,
                 right: 4
             },
-            '& .rdtPicker td.rdtActive, & .rdtPicker td.rdtActive:hover': {
-                backgroundColor: '#428bca',
-                color: '#fff',
-                textShadow: '0 -1px 0 rgba(0, 0, 0, 0.25)'
+            "& .rdtPicker td.rdtActive, & .rdtPicker td.rdtActive:hover": {
+                backgroundColor: "#428bca",
+                color: "#fff",
+                textShadow: "0 -1px 0 rgba(0, 0, 0, 0.25)"
             },
-            '& .rdtPicker td.rdtActive.rdtToday:before': {
-                borderBottomColor: '#fff'
+            "& .rdtPicker td.rdtActive.rdtToday:before": {
+                borderBottomColor: "#fff"
             },
-            '& .rdtPicker td.rdtDisabled, & .rdtPicker td.rdtDisabled:hover': {
-                background: 'none',
-                color: '#999999',
-                cursor: 'default'
+            "& .rdtPicker td.rdtDisabled, & .rdtPicker td.rdtDisabled:hover": {
+                background: "none",
+                color: "#999999",
+                cursor: "default"
             },
-            '& .rdtPicker td span.rdtOld': {
-                color: '#999999'
+            "& .rdtPicker td span.rdtOld": {
+                color: "#999999"
             },
-            '& .rdtPicker td span.rdtDisabled, & .rdtPicker td span.rdtDisabled:hover': {
-                background: 'none',
-                color: '#999999',
-                cursor: 'default'
+            "& .rdtPicker td span.rdtDisabled, & .rdtPicker td span.rdtDisabled:hover": {
+                background: "none",
+                color: "#999999",
+                cursor: "default"
             },
-            '& .rdtPicker th': {
-                borderBottom: '1px solid #f9f9f9',
-                fontWeight: 'bold'
+            "& .rdtPicker th": {
+                borderBottom: "1px solid #f9f9f9",
+                fontWeight: "bold"
             },
-            '& .rdtPicker .dow': {
-                width: '14.2857%',
-                borderBottom: 'none',
-                cursor: 'default'
+            "& .rdtPicker .dow": {
+                width: "14.2857%",
+                borderBottom: "none",
+                cursor: "default"
             },
-            '& .rdtPicker th.rdtSwitch': {
+            "& .rdtPicker th.rdtSwitch": {
                 width: 100
             },
-            '& .rdtPicker th.rdtNext, & .rdtPicker th.rdtPrev': {
+            "& .rdtPicker th.rdtNext, & .rdtPicker th.rdtPrev": {
                 fontSize: 21,
-                verticalAlign: 'top'
+                verticalAlign: "top"
             },
-            '& .rdtPrev span, & .rdtNext span': {
-                display: 'block',
-                userSelect: 'none'
+            "& .rdtPrev span, & .rdtNext span": {
+                display: "block",
+                userSelect: "none"
             },
-            '& .rdtPicker th.rdtDisabled, & .rdtPicker th.rdtDisabled:hover': {
-                background: 'none',
-                color: '#999999',
-                cursor: 'default'
+            "& .rdtPicker th.rdtDisabled, & .rdtPicker th.rdtDisabled:hover": {
+                background: "none",
+                color: "#999999",
+                cursor: "default"
             },
-            '& .rdtPicker thead tr:first-of-type th': {
-                cursor: 'pointer'
+            "& .rdtPicker thead tr:first-of-type th": {
+                cursor: "pointer"
             },
-            '& .rdtPicker thead tr:first-of-type th:hover': {
-                background: '#eeeeee'
+            "& .rdtPicker thead tr:first-of-type th:hover": {
+                background: "#eeeeee"
             },
-            '& .rdtPicker tfoot': {
-                borderTop: '1px solid #f9f9f9'
+            "& .rdtPicker tfoot": {
+                borderTop: "1px solid #f9f9f9"
             },
-            '& .rdtPicker button': {
-                border: 'none',
-                background: 'none',
-                cursor: 'pointer'
+            "& .rdtPicker button": {
+                border: "none",
+                background: "none",
+                cursor: "pointer"
             },
-            '& .rdtPicker button:hover': {
-                backgroundColor: '#eee'
+            "& .rdtPicker button:hover": {
+                backgroundColor: "#eee"
             },
-            '& .rdtPicker thead button': {
-                width: '100%',
-                height: '100%'
+            "& .rdtPicker thead button": {
+                width: "100%",
+                height: "100%"
             },
-            '& td.rdtMonth, & td.rdtYear': {
+            "& td.rdtMonth, & td.rdtYear": {
                 height: 50,
-                width: '25%',
-                cursor: 'pointer'
+                width: "25%",
+                cursor: "pointer"
             },
-            '& td.rdtMonth:hover, & td.rdtYear:hover': {
-                background: '#eee'
+            "& td.rdtMonth:hover, & td.rdtYear:hover": {
+                background: "#eee"
             },
-            '& .rdtCounters': {
-                display: 'inline-block'
+            "& .rdtCounters": {
+                display: "inline-block"
             },
-            '& .rdtCounters > div': {
-                float: 'left'
+            "& .rdtCounters > div": {
+                float: "left"
             },
-            '& .rdtCounter': {
+            "& .rdtCounter": {
                 height: 100,
                 width: 40
             },
-            '& .rdtCounterSeparator': {
-                lineHeight: '100px'
+            "& .rdtCounterSeparator": {
+                lineHeight: "100px"
             },
-            '& .rdtCounter .rdtBtn': {
-                height: '40%',
-                lineHeight: '40px',
-                cursor: 'pointer',
-                display: 'block',
-                userSelect: 'none'
+            "& .rdtCounter .rdtBtn": {
+                height: "40%",
+                lineHeight: "40px",
+                cursor: "pointer",
+                display: "block",
+                userSelect: "none"
             },
-            '& .rdtCounter .rdtBtn:hover': {
-                background: '#eee'
+            "& .rdtCounter .rdtBtn:hover": {
+                background: "#eee"
             },
-            '& .rdtCounter .rdtCount': {
-                height: '20%',
-                fontsize: '1.2em'
+            "& .rdtCounter .rdtCount": {
+                height: "20%",
+                fontsize: "1.2em"
             },
-            '& .rdtMilli': {
-                verticalAlign: 'middle',
+            "& .rdtMilli": {
+                verticalAlign: "middle",
                 paddingLeft: 8,
                 width: 48
             },
-            '& .rdtMilli input': {
-                width: '100%',
-                fontSize: '1.2em',
+            "& .rdtMilli input": {
+                width: "100%",
+                fontSize: "1.2em",
                 marginTop: 37
             },
-            '& .rdtTime td': {
-                cursor: 'default'
+            "& .rdtTime td": {
+                cursor: "default"
             }
         }
     };
@@ -327,10 +327,10 @@ var DateTimePicker = function(_param) {
             width: DEFAULT_WIDTH,
             top: openToBottom ? bottom : top - pickerContainerHeight,
             left: left,
-            position: 'absolute',
+            position: "absolute",
             borderRadius: 4,
-            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)'
+            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() {
@@ -340,15 +340,15 @@ var DateTimePicker = function(_param) {
     };
     var formatMoment = function(moment) {
         if (withTime) {
-            return moment.format('yyyy-MM-DD HH:mm');
+            return moment.format("yyyy-MM-DD HH:mm");
         }
-        if (mode === 'year-month') {
-            return moment.format('yyyy-MM');
+        if (mode === "year-month") {
+            return moment.format("yyyy-MM");
         }
-        return moment.format('yyyy-MM-DD');
+        return moment.format("yyyy-MM-DD");
     };
     var setValue = function(moment) {
-        var value = typeof moment === 'string' ? moment : formatMoment(moment);
+        var value = typeof moment === "string" ? moment : formatMoment(moment);
         if (fieldRef.current) {
             var ref;
             fieldRef.current.focus();
@@ -357,17 +357,17 @@ var DateTimePicker = function(_param) {
     };
     var renderEndIcon = function() {
         if (getValue() && optional) {
-            return(/*#__PURE__*/ _jsx(IconButton, {
+            return /*#__PURE__*/ _jsx(IconButton, {
                 "aria-label": texts.clearButton,
                 size: 32,
                 onPress: function(event) {
                     event.stopPropagation();
-                    setValue('');
+                    setValue("");
                 },
                 children: /*#__PURE__*/ _jsx(IconCloseRegular, {})
-            }));
+            });
         }
-        return(/*#__PURE__*/ _jsx(IconButton, {
+        return /*#__PURE__*/ _jsx(IconButton, {
             disabled: rest.disabled,
             "aria-label": "",
             size: 32,
@@ -375,13 +375,13 @@ var DateTimePicker = function(_param) {
                 return setShowPicker(!showPicker);
             },
             children: /*#__PURE__*/ _jsx(IconCalendarRegular, {})
-        }));
+        });
     };
-    return(/*#__PURE__*/ _jsxs(_Fragment, {
+    return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, {
                 style: {
-                    cursor: 'default'
+                    cursor: "default"
                 },
                 required: !optional,
                 type: "text",
@@ -412,9 +412,9 @@ var DateTimePicker = function(_param) {
                     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,
+                        initialViewMode: mode === "year-month" ? "months" : undefined,
+                        dateFormat: mode === "year-month" ? "YYYY-MM" : undefined,
+                        timeFormat: withTime ? "HH:mm" : false,
                         initialValue: getValue(),
                         locale: browserLocale,
                         input: false,
@@ -424,6 +424,6 @@ var DateTimePicker = function(_param) {
                 })
             })
         ]
-    }));
+    });
 };
 export default DateTimePicker;

package/dist-es/decimal-field.js

@@ -1,11 +1,3 @@
-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';
 function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -107,26 +99,34 @@ 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) {
     try {
-        return 1.1.toLocaleString(locale.replace('_', '-'))[1];
+        return 1.1.toLocaleString(locale.replace("_", "-"))[1];
     } catch (e) {
-        return '.';
+        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 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 '';
+        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);
+        return parts.shift() + firstSeparator[0] + parts.join("").slice(0, maxDecimals);
     } else {
         // no fractional part, return "as is"
         return parts[0];
@@ -143,11 +143,11 @@ var DecimalInput = function(_param) {
     var i18n = useTheme().i18n;
     var localDecimalChar = getLocalDecimalChar(i18n.locale);
     var replace = function(value) {
-        return String(value !== null && value !== void 0 ? value : '').replace(/[.,]/g, localDecimalChar);
+        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 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 isControlledByParent = typeof value1 !== "undefined";
     var controlledValue = isControlledByParent ? value1 : selfValue;
     var handleChangeValue = React.useCallback(function(newFormattedValue) {
         if (!isControlledByParent) {
@@ -169,7 +169,7 @@ var DecimalInput = function(_param) {
         onChange: handleChangeValue,
         accept: /[\d.,]+/g
     });
-    return(/*#__PURE__*/ _jsx("input", _objectSpread({}, rest, {
+    return /*#__PURE__*/ _jsx("input", _objectSpread({}, rest, {
         type: "text",
         inputMode: "decimal" // shows decimal keypad in Chrome for Android
         ,
@@ -178,7 +178,7 @@ var DecimalInput = function(_param) {
         value: rifm.value,
         onChange: rifm.onChange,
         ref: combineRefs(inputRef, ref1)
-    })));
+    }));
 };
 export { DecimalInput };
 var DecimalField = function(_param) {
@@ -199,7 +199,7 @@ var DecimalField = function(_param) {
     var texts = useTheme().texts;
     var validate = function(value, rawValue) {
         if (!value) {
-            return optional ? '' : texts.formFieldErrorIsMandatory;
+            return optional ? "" : texts.formFieldErrorIsMandatory;
         }
         return validateProp === null || validateProp === void 0 ? void 0 : validateProp(value, rawValue);
     };
@@ -220,11 +220,11 @@ var DecimalField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
+    return /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
         inputComponent: DecimalInput,
         inputProps: {
             maxDecimals: maxDecimals
         }
-    })));
+    }));
 };
 export default DecimalField;