@telefonica/mistica 12.8.0 → 12.9.0

package/dist/date-time-field.js

@@ -2,43 +2,22 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.default = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var React = _interopRequireWildcard(require("react"));
-var _formContext = require("./form-context");
-var _textFieldBase = require("./text-field-base");
-var _dom = require("./utils/dom");
-var _environment = require("./utils/environment");
-var _time = require("./utils/time");
-var _iconCalendarRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular"));
-var _platform = require("./utils/platform");
-var _hooks = require("./hooks");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
-        return obj;
-    } else {
-        var newObj = {};
-        if (obj != null) {
-            for(var key in obj){
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
-                    if (desc.get || desc.set) {
-                        Object.defineProperty(newObj, key, desc);
-                    } else {
-                        newObj[key] = obj[key];
-                    }
-                }
-            }
-        }
-        newObj.default = obj;
-        return newObj;
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return K;
     }
-}
+});
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _formContextJs = require("./form-context.js");
+var _textFieldBaseJs = require("./text-field-base.js");
+var _domJs = require("./utils/dom.js");
+var _environmentJs = require("./utils/environment.js");
+var _timeJs = require("./utils/time.js");
+var _iconCalendarRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular.js"));
+var _platformJs = require("./utils/platform.js");
+var _hooksJs = require("./hooks.js");
+var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -52,9 +31,53 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 function _objectSpread(target) {
-    var _arguments = arguments, _loop = function(i) {
-        var source = _arguments[i] != null ? _arguments[i] : {};
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
         if (typeof Object.getOwnPropertySymbols === "function") {
             ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
@@ -64,8 +87,31 @@ function _objectSpread(target) {
         ownKeys.forEach(function(key) {
             _defineProperty(target, key, source[key]);
         });
-    };
-    for(var i = 1; i < arguments.length; i++)_loop(i);
+    }
+    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) {
@@ -95,13 +141,12 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-var ReactDateTimePicker = /*#__PURE__*/ React.lazy(function() {
+var w = /*#__PURE__*/ _react.lazy(function() {
     return Promise.resolve().then(function() {
-        return _interopRequireWildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker"));
+        return /*#__PURE__*/ _interopRequireWildcard(require(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js"));
     });
-});
-var FormDateField = function FormDateField(_param) {
-    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validateProp = _param.validate, onChange = _param.onChange, onChangeValueProp = _param.onChangeValue, onBlur = _param.onBlur, value1 = _param.value, defaultValue = _param.defaultValue, min = _param.min, max = _param.max, rest = _objectWithoutProperties(_param, [
+}), K = function(_param) {
+    var T = _param.disabled, D = _param.error, h = _param.helperText, y = _param.name, f = _param.optional, n = _param.validate, F = _param.onChange, a = _param.onChangeValue, R = _param.onBlur, S = _param.value, k = _param.defaultValue, o = _param.min, s = _param.max, l = _objectWithoutProperties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -116,80 +161,52 @@ var FormDateField = function FormDateField(_param) {
         "min",
         "max"
     ]);
-    var hasNativePicker = React.useMemo(function() {
-        if ((0, _platform).isFirefox()) {
-            // disabled for firefox because the picker has no option to select time
-            return false;
-        }
-        return (0, _dom).isInputTypeSupported("datetime-local");
-    }, []);
-    var processValue = function processValue(value) {
-        return hasNativePicker ? value : value.replace(/\s/, "T");
-    };
-    var texts = (0, _hooks).useTheme().texts;
-    var isInRange = function isInRange(value) {
-        var isoValue = processValue(value);
-        if (min && isoValue && isoValue < (0, _time).getLocalDateTimeString(min)) {
-            return false;
-        }
-        if (max && isoValue && isoValue > (0, _time).getLocalDateTimeString(max)) {
-            return false;
-        }
-        return true;
-    };
-    var validate = function validate(value, rawValue) {
-        if (!isInRange(value)) {
-            return texts.formDateOutOfRangeError;
-        }
-        return validateProp === null || validateProp === void 0 ? void 0 : validateProp(value, rawValue);
-    };
-    var onChangeValue = function onChangeValue(value, rawValue) {
-        if (isInRange(value)) {
-            onChangeValueProp === null || onChangeValueProp === void 0 ? void 0 : onChangeValueProp(value, rawValue);
+    var u = _react.useMemo(function() {
+        return (0, _platformJs.isFirefox)() ? !1 : (0, _domJs.isInputTypeSupported)("datetime-local");
+    }, []), d = function(e) {
+        return u ? e : e.replace(/\s/, "T");
+    }, ref = (0, _hooksJs.useTheme)(), v = ref.texts, c = function(e) {
+        var t = d(e);
+        return !(o && t && t < (0, _timeJs.getLocalDateTimeString)(o) || s && t && t > (0, _timeJs.getLocalDateTimeString)(s));
+    }, p = (0, _formContextJs.useFieldProps)({
+        name: y,
+        value: S,
+        defaultValue: k,
+        processValue: d,
+        helperText: h,
+        optional: f,
+        error: D,
+        disabled: T,
+        onBlur: R,
+        validate: function(e, t) {
+            return c(e) ? n == null ? void 0 : n(e, t) : v.formDateOutOfRangeError;
+        },
+        onChange: F,
+        onChangeValue: function(e, t) {
+            c(e) && (a == null || a(e, t));
         }
-    // if not in range, onChangeValue is not called
-    };
-    var fieldProps = (0, _formContext).useFieldProps({
-        name: name,
-        value: value1,
-        defaultValue: defaultValue,
-        processValue: processValue,
-        helperText: helperText,
-        optional: optional,
-        error: error,
-        disabled: disabled,
-        onBlur: onBlur,
-        validate: validate,
-        onChange: onChange,
-        onChangeValue: onChangeValue
-    });
-    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
-        min: min ? (0, _time).getLocalDateTimeString(min) : undefined,
-        max: max ? (0, _time).getLocalDateTimeString(max) : undefined,
+    }), g = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldBaseJs.TextFieldBaseAutosuggest, _objectSpreadProps(_objectSpread({}, l, p), {
+        min: o ? (0, _timeJs.getLocalDateTimeString)(o) : void 0,
+        max: s ? (0, _timeJs.getLocalDateTimeString)(s) : void 0,
         type: "datetime-local",
-        endIconOverlay: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+        endIconOverlay: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
             style: {
                 position: "absolute",
                 top: 16,
                 right: 16,
                 pointerEvents: "none"
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCalendarRegular.default, {})
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCalendarRegularJs.default, {})
         })
     }));
-    if (hasNativePicker || (0, _environment).isServerSide()) {
-        return nativePicker;
-    }
-    return /*#__PURE__*/ (0, _jsxRuntime).jsx(React.Suspense, {
-        fallback: nativePicker,
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(ReactDateTimePicker, _objectSpread({}, rest, fieldProps, {
-            optional: optional,
-            withTime: true,
-            isValidDate: function isValidDate(currentDate) {
-                return isInRange((0, _time).getLocalDateTimeString(currentDate.toDate()));
+    return u || (0, _environmentJs.isServerSide)() ? g : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_react.Suspense, {
+        fallback: g,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(w, _objectSpreadProps(_objectSpread({}, l, p), {
+            optional: f,
+            withTime: !0,
+            isValidDate: function(e) {
+                return c((0, _timeJs.getLocalDateTimeString)(e.toDate()));
             }
         }))
     });
 };
-var _default = FormDateField;
-exports.default = _default;

package/dist/date-time-picker.js

@@ -2,45 +2,24 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.default = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var React = _interopRequireWildcard(require("react"));
-var _textFieldBase = require("./text-field-base");
-var _iconCalendarRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular"));
-var _reactDatetime = _interopRequireDefault(require("react-datetime"));
-var _overlay = _interopRequireDefault(require("./overlay"));
-var _textFieldComponents = require("./text-field-components");
-var _iconButton = _interopRequireDefault(require("./icon-button"));
-var _dom = require("./utils/dom");
-var _jss = require("./jss");
-var _hooks = require("./hooks");
-var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
-        return obj;
-    } else {
-        var newObj = {};
-        if (obj != null) {
-            for(var key in obj){
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
-                    if (desc.get || desc.set) {
-                        Object.defineProperty(newObj, key, desc);
-                    } else {
-                        newObj[key] = obj[key];
-                    }
-                }
-            }
-        }
-        newObj.default = obj;
-        return newObj;
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return Z;
     }
-}
+});
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _textFieldBaseJs = require("./text-field-base.js");
+var _iconCalendarRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular.js"));
+var _reactDatetime = /*#__PURE__*/ _interopRequireDefault(require("react-datetime"));
+var _overlayJs = /*#__PURE__*/ _interopRequireDefault(require("./overlay.js"));
+var _textFieldComponentsJs = require("./text-field-components.js");
+var _iconButtonJs = /*#__PURE__*/ _interopRequireDefault(require("./icon-button.js"));
+var _domJs = require("./utils/dom.js");
+var _jssJs = require("./jss.js");
+var _hooksJs = require("./hooks.js");
+var _iconCloseRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular.js"));
+var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 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];
@@ -62,6 +41,50 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 function _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -90,8 +113,8 @@ function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _objectSpread(target) {
-    var _arguments = arguments, _loop = function(i) {
-        var source = _arguments[i] != null ? _arguments[i] : {};
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
         if (typeof Object.getOwnPropertySymbols === "function") {
             ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
@@ -101,8 +124,31 @@ function _objectSpread(target) {
         ownKeys.forEach(function(key) {
             _defineProperty(target, key, source[key]);
         });
-    };
-    for(var i = 1; i < arguments.length; i++)_loop(i);
+    }
+    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) {
@@ -143,17 +189,11 @@ 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);
 }
-/**
- * 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];
-Promise.resolve().then(function() {
-    return _interopRequireWildcard(require(/* webpackChunkName: "moment-locale" */ "moment/locale/".concat(browserLocale)));
+var b = navigator.language.toLocaleLowerCase().split("-")[0];
+Promise.resolve(/* webpackChunkName: "moment-locale" */ "moment/locale/".concat(b)).then(function(p) {
+    return /*#__PURE__*/ _interopRequireWildcard(require(p));
 }).finally(function() {});
-// styles from "react-datetime/css/react-datetime.css" converted to JSS "as is"
-var useStyles = (0, _jss).createUseStyles(function() {
+var N = (0, _jssJs.createUseStyles)(function() {
     return {
         reactDatePicker: {
             "& td, & th": {
@@ -332,133 +372,99 @@ var useStyles = (0, _jss).createUseStyles(function() {
             }
         }
     };
-});
-var DateTimePicker = function DateTimePicker(_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 = (0, _hooks).useTheme().texts;
-    var fieldRef = React.useRef(null);
-    var ref1 = (0, _hooks).useElementDimensions(), pickerContainerHeight = ref1.height, pickerContainerRef = ref1.ref;
-    var setShowPicker = function setShowPicker(show) {
-        if (!rest.disabled) {
-            realSetShowPicker(show);
-        }
-    };
-    var getPickerContainerStyles = function getPickerContainerStyles() {
-        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(_react.useState(!1), 2), u = ref[0], m = ref[1], P = N(), ref1 = (0, _hooksJs.useTheme)(), x = ref1.texts, i = _react.useRef(null), ref2 = (0, _hooksJs.useElementDimensions)(), 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: _textFieldComponents.DEFAULT_WIDTH,
-            top: openToBottom ? bottom : top - pickerContainerHeight,
-            left: left,
+            width: _textFieldComponentsJs.DEFAULT_WIDTH,
+            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 getValue() {
-        var ref;
-        var value = (ref = fieldRef.current) === null || ref === void 0 ? void 0 : ref.value;
-        return value ? new Date(value) : undefined;
-    };
-    var formatMoment = function formatMoment(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 setValue(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, (0, _dom).createChangeEvent(fieldRef.current, value));
-        }
-    };
-    var renderEndIcon = function renderEndIcon() {
-        if (getValue() && optional) {
-            return /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
-                "aria-label": texts.clearButton,
-                size: 32,
-                onPress: function onPress(event) {
-                    event.stopPropagation();
-                    setValue("");
-                },
-                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {})
-            });
-        }
-        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
-            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, (0, _domJs.createChangeEvent)(i.current, e)));
+    }, S = function() {
+        return c() && s ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
+            "aria-label": x.clearButton,
+            size: 32,
+            onPress: function(t) {
+                t.stopPropagation(), p("");
+            },
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {})
+        }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
+            disabled: r.disabled,
             "aria-label": "",
             size: 32,
-            onPress: function onPress() {
-                return setShowPicker(!showPicker);
+            onPress: function() {
+                return d(!u);
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCalendarRegular.default, {})
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCalendarRegularJs.default, {})
         });
     };
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({}, rest, {
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldBaseJs.TextFieldBaseAutosuggest, _objectSpreadProps(_objectSpread({}, r), {
                 style: {
                     cursor: "default"
                 },
-                required: !optional,
+                required: !s,
                 type: "text",
                 autoComplete: "off",
-                shrinkLabel: !!getValue(),
-                endIcon: renderEndIcon(),
-                inputRef: function inputRef(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,
-                onKeyDown: function onKeyDown() {
-                    return setShowPicker(true);
+                readOnly: !0,
+                onKeyDown: function() {
+                    return d(!0);
                 },
-                onClick: function onClick() {
-                    setShowPicker(true);
+                onClick: function() {
+                    d(!0);
                 }
             })),
-            showPicker && /*#__PURE__*/ (0, _jsxRuntime).jsx(_overlay.default, {
-                onPress: function onPress(e) {
-                    (0, _dom).cancelEvent(e);
-                    setShowPicker(false);
+            u && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
+                onPress: function(t) {
+                    (0, _domJs.cancelEvent)(t), d(!1);
                 },
-                disableScroll: true,
-                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    ref: pickerContainerRef,
-                    style: getPickerContainerStyles(),
-                    className: classes.reactDatePicker,
-                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_reactDatetime.default, {
-                        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__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                    ref: v,
+                    style: w(),
+                    className: P.reactDatePicker,
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_reactDatetime.default, {
+                        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
                     })
                 })
             })
         ]
     });
 };
-var _default = DateTimePicker;
-exports.default = _default;