@salutejs/plasma-new-hope 0.340.0-canary.2316.19097749672.0 → 0.340.0-canary.2316.19129435456.0

package/styled-components/cjs/components/DateTimePicker/DateTimePicker.js

@@ -18,9 +18,7 @@ _export(exports, {
 });
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-var _datejs = require("../../utils/datejs");
 var _plasmacore = require("@salutejs/plasma-core");
-var _dateHelper = require("../DatePicker/utils/dateHelper");
 var _DateTimePickerstyles = require("./DateTimePicker.styles");
 var _base = require("./variations/_size/base");
 var _base1 = require("./variations/_view/base");
@@ -30,7 +28,6 @@ var _base4 = require("./variations/_readonly/base");
 var _ui = require("./ui");
 var _DateTimePickertokens = require("./DateTimePicker.tokens");
 var _useDateTimePicker = require("./hooks/useDateTimePicker");
-var _utils = require("./utils");
 var _useKeyboardNavigation = require("./hooks/useKeyboardNavigation");
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -258,58 +255,9 @@ var dateTimePickerRoot = function(Root) {
         var inputInnerRef = (0, _plasmacore.useForkRef)(inputRef, ref);
         var calendarOverlayRef = (0, _react.useRef)(null);
         var _useState = _sliced_to_array((0, _react.useState)(opened), 2), isInnerOpen = _useState[0], setIsInnerOpen = _useState[1];
-        var dateFormatDelimiter = (0, _react.useMemo)(function() {
-            return (0, _dateHelper.getDateFormatDelimiter)(dateFormat);
-        }, [
-            dateFormat
-        ]);
-        var timeFormatDelimiter = (0, _react.useMemo)(function() {
-            return (0, _dateHelper.getDateFormatDelimiter)(timeFormat);
-        }, [
-            timeFormat
-        ]);
-        var timeColumnsCount = (timeFormat === null || timeFormat === void 0 ? void 0 : timeFormat.split(timeFormatDelimiter).length) || 2;
-        var fullFormat = dateFormat + dateTimeSeparator + timeFormat;
-        var _useState1 = _sliced_to_array((0, _react.useState)(defaultDate || ''), 2), innerDate = _useState1[0], setInnerDate = _useState1[1];
-        var dateValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerDate;
-        var initialValues = (0, _utils.getFormattedDateTime)({
-            value: dateValue,
-            lang: lang,
-            format: fullFormat,
-            includeEdgeDates: includeEdgeDates,
-            min: min,
-            max: max,
-            dateFormat: dateFormat,
-            timeFormat: timeFormat
-        });
-        var _useState2 = _sliced_to_array((0, _react.useState)({
-            input: initialValues.formattedDate,
-            calendar: initialValues.dateValue,
-            time: initialValues.timeValue
-        }), 2), correctDates = _useState2[0], setCorrectDates = _useState2[1];
-        var calendarGridValue = initialValues.dateValue;
-        var timeGridValue = initialValues.timeValue;
-        _datejs.customDayjs.locale(lang);
-        var timeVisibleValue = timeGridValue ? (0, _datejs.customDayjs)(timeGridValue).format(timeFormat) : '';
-        var inputValue = initialValues.formattedDate;
-        var isDateEqualEdge = function(dateEdge) {
-            if (!dateEdge) {
-                return false;
-            }
-            var normalizedEdgeDate = (0, _datejs.customDayjs)(dateEdge);
-            normalizedEdgeDate.set('hours', 0);
-            normalizedEdgeDate.set('minutes', 0);
-            normalizedEdgeDate.set('seconds', 0);
-            var normalizedCurrentDate = (0, _datejs.customDayjs)(correctDates.calendar);
-            normalizedCurrentDate.set('hours', 0);
-            normalizedCurrentDate.set('minutes', 0);
-            normalizedCurrentDate.set('seconds', 0);
-            if (normalizedCurrentDate.isSame(normalizedEdgeDate)) {
-                return true;
-            }
-            return false;
-        };
         var _useDateTimePicker1 = (0, _useDateTimePicker.useDateTimePicker)({
+            inputRef: inputRef,
+            outerValue: outerValue,
             valueError: valueError,
             valueSuccess: valueSuccess,
             type: type,
@@ -317,74 +265,17 @@ var dateTimePickerRoot = function(Root) {
             disabled: disabled,
             readOnly: readOnly,
             maskWithFormat: maskWithFormat,
-            format: fullFormat,
+            dateTimeSeparator: dateTimeSeparator,
             dateFormat: dateFormat,
             timeFormat: timeFormat,
-            currentValue: inputValue,
-            delimiters: [
-                dateFormatDelimiter,
-                timeFormatDelimiter,
-                dateTimeSeparator
-            ],
-            inputRef: inputRef,
-            correctDates: correctDates,
             max: max,
             min: min,
             includeEdgeDates: includeEdgeDates,
             dateOnTimeSelectOnly: dateOnTimeSelectOnly,
-            setCorrectDates: setCorrectDates,
-            setInnerDate: setInnerDate,
             onChangeValue: onChangeValue,
-            onCommitDate: onCommitDate
-        }), errorClass = _useDateTimePicker1.errorClass, successClass = _useDateTimePicker1.successClass, handleChangeValue = _useDateTimePicker1.handleChangeValue, handleSearch = _useDateTimePicker1.handleSearch, getQuarterInfo = _useDateTimePicker1.getQuarterInfo, handleCalendarPick = _useDateTimePicker1.handleCalendarPick, handleTimePick = _useDateTimePicker1.handleTimePick, updateExternalDate = _useDateTimePicker1.updateExternalDate;
-        var handleBlur = function(event) {
-            if (!preserveInvalidOnBlur) {
-                _datejs.customDayjs.locale(lang);
-                var originalDate = correctDates.calendar;
-                if (!originalDate) {
-                    if (onChangeValue) {
-                        onChangeValue(event, correctDates.input, {
-                            originalDate: undefined,
-                            isoDate: ''
-                        });
-                    }
-                    if (onCommitDate) {
-                        onCommitDate(correctDates.input, {
-                            quarterInfo: undefined,
-                            originalDate: undefined,
-                            isoDate: ''
-                        });
-                    }
-                    return;
-                }
-                if (correctDates.time) {
-                    originalDate.setHours(correctDates.time.getHours(), correctDates.time.getMinutes(), correctDates.time.getSeconds());
-                }
-                setInnerDate(originalDate);
-                if (!timeGridValue) {
-                    if (correctDates.calendar) {
-                        setInnerDate(correctDates.calendar);
-                    }
-                }
-                if (onChangeValue) {
-                    onChangeValue(event, correctDates.input, {
-                        originalDate: originalDate,
-                        isoDate: originalDate.toISOString()
-                    });
-                }
-                if (onCommitDate) {
-                    var quarterInfo = getQuarterInfo(originalDate);
-                    onCommitDate(correctDates.input, {
-                        quarterInfo: quarterInfo,
-                        originalDate: originalDate,
-                        isoDate: originalDate.toISOString()
-                    });
-                }
-            }
-            if (onBlur) {
-                onBlur(event);
-            }
-        };
+            onCommitDate: onCommitDate,
+            onBlur: onBlur
+        }), format = _useDateTimePicker1.format, dateVisibleValue = _useDateTimePicker1.dateVisibleValue, calendarGridValue = _useDateTimePicker1.calendarGridValue, inputValue = _useDateTimePicker1.inputValue, timeVisibleValue = _useDateTimePicker1.timeVisibleValue, timeColumnsCount = _useDateTimePicker1.timeColumnsCount, errorClass = _useDateTimePicker1.errorClass, successClass = _useDateTimePicker1.successClass, handleChangeValue = _useDateTimePicker1.handleChangeValue, handleSearch = _useDateTimePicker1.handleSearch, handleBlur = _useDateTimePicker1.handleBlur, handleCalendarPick = _useDateTimePicker1.handleCalendarPick, handleTimePick = _useDateTimePicker1.handleTimePick, updateExternalDate = _useDateTimePicker1.updateExternalDate, isDateEqualEdge = _useDateTimePicker1.isDateEqualEdge;
         var handleCalendarOverlayClick = function(event) {
             if (disabled || readOnly) {
                 return;
@@ -410,13 +301,6 @@ var dateTimePickerRoot = function(Root) {
         };
         var onKeyDown = (0, _useKeyboardNavigation.useKeyNavigation)({
             opened: isInnerOpen,
-            format: fullFormat,
-            maskWithFormat: maskWithFormat,
-            delimiters: [
-                dateFormatDelimiter,
-                timeFormatDelimiter,
-                dateTimeSeparator
-            ],
             closeOnEsc: closeOnEsc,
             onToggle: handleToggle
         }).onKeyDown;
@@ -428,12 +312,12 @@ var dateTimePickerRoot = function(Root) {
             opened
         ]);
         (0, _react.useLayoutEffect)(function() {
-            if (!dateValue) {
+            if (!dateVisibleValue) {
                 updateExternalDate(defaultDate);
             }
         }, [
             defaultDate,
-            fullFormat,
+            format,
             lang
         ]);
         return /*#__PURE__*/ _react.default.createElement(Root, {
@@ -534,7 +418,7 @@ var dateTimePickerRoot = function(Root) {
         }, isDateEqualEdge(max) && {
             max: max
         })))), leftHelper && /*#__PURE__*/ _react.default.createElement(_DateTimePickerstyles.LeftHelper, {
-            className: (0, _classnames.default)('errorClass, successClass')
+            className: (0, _classnames.default)(errorClass, successClass)
         }, leftHelper));
     });
 };

package/styled-components/cjs/components/DateTimePicker/hooks/useDateTimePicker.js

@@ -8,11 +8,21 @@ Object.defineProperty(exports, "useDateTimePicker", {
         return useDateTimePicker;
     }
 });
+var _react = require("react");
 var _datejs = require("../../../utils/datejs");
 var _utils = require("../../Calendar/utils");
+var _dateHelper = require("../../DatePicker/utils/dateHelper");
 var _DateTimePickertokens = require("../DateTimePicker.tokens");
 var _getMaskedValue = require("../utils/getMaskedValue");
 var _utils1 = require("../utils");
+function _array_like_to_array(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];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -26,6 +36,33 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    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 _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -65,10 +102,60 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
 var useDateTimePicker = function(param) {
-    var valueError = param.valueError, valueSuccess = param.valueSuccess, type = param.type, _param_lang = param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, disabled = param.disabled, readOnly = param.readOnly, maskWithFormat = param.maskWithFormat, format = param.format, dateFormat = param.dateFormat, timeFormat = param.timeFormat, currentValue = param.currentValue, delimiters = param.delimiters, inputRef = param.inputRef, min = param.min, max = param.max, includeEdgeDates = param.includeEdgeDates, correctDates = param.correctDates, dateOnTimeSelectOnly = param.dateOnTimeSelectOnly, setCorrectDates = param.setCorrectDates, setInnerDate = param.setInnerDate, onChangeValue = param.onChangeValue, onCommitDate = param.onCommitDate;
+    var valueError = param.valueError, valueSuccess = param.valueSuccess, type = param.type, _param_lang = param.lang, lang = _param_lang === void 0 ? 'ru' : _param_lang, disabled = param.disabled, readOnly = param.readOnly, outerValue = param.outerValue, defaultDate = param.defaultDate, maskWithFormat = param.maskWithFormat, _param_dateFormat = param.dateFormat, dateFormat = _param_dateFormat === void 0 ? 'DD.MM.YYYY' : _param_dateFormat, _param_timeFormat = param.timeFormat, timeFormat = _param_timeFormat === void 0 ? 'HH:mm:ss' : _param_timeFormat, _param_dateTimeSeparator = param.dateTimeSeparator, dateTimeSeparator = _param_dateTimeSeparator === void 0 ? ' ' : _param_dateTimeSeparator, inputRef = param.inputRef, min = param.min, max = param.max, includeEdgeDates = param.includeEdgeDates, dateOnTimeSelectOnly = param.dateOnTimeSelectOnly, preserveInvalidOnBlur = param.preserveInvalidOnBlur, onChangeValue = param.onChangeValue, onCommitDate = param.onCommitDate, onBlur = param.onBlur;
     var errorClass = valueError ? _DateTimePickertokens.classes.error : undefined;
     var successClass = valueSuccess ? _DateTimePickertokens.classes.success : undefined;
+    var dateFormatDelimiter = (0, _react.useMemo)(function() {
+        return (0, _dateHelper.getDateFormatDelimiter)(dateFormat);
+    }, [
+        dateFormat
+    ]);
+    var timeFormatDelimiter = (0, _react.useMemo)(function() {
+        return (0, _dateHelper.getDateFormatDelimiter)(timeFormat);
+    }, [
+        timeFormat
+    ]);
+    var delimiters = [
+        dateFormatDelimiter,
+        timeFormatDelimiter,
+        dateTimeSeparator
+    ];
+    var format = dateFormat + dateTimeSeparator + timeFormat;
+    var timeColumnsCount = (timeFormat === null || timeFormat === void 0 ? void 0 : timeFormat.split(timeFormatDelimiter).length) || 2;
+    var _useState = _sliced_to_array((0, _react.useState)(defaultDate || ''), 2), innerDate = _useState[0], setInnerDate = _useState[1];
+    var dateVisibleValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerDate;
+    var initialValues = (0, _utils1.getFormattedDateTime)({
+        value: dateVisibleValue,
+        lang: lang,
+        format: format,
+        includeEdgeDates: includeEdgeDates,
+        min: min,
+        max: max,
+        dateFormat: dateFormat,
+        timeFormat: timeFormat
+    });
+    var _useState1 = _sliced_to_array((0, _react.useState)({
+        input: initialValues.formattedDate,
+        calendar: initialValues.dateValue,
+        time: initialValues.timeValue
+    }), 2), correctDates = _useState1[0], setCorrectDates = _useState1[1];
+    var calendarGridValue = initialValues.dateValue;
+    var timeGridValue = initialValues.timeValue;
+    _datejs.customDayjs.locale(lang);
+    var timeVisibleValue = timeGridValue ? (0, _datejs.customDayjs)(timeGridValue).format(timeFormat) : '';
+    var inputValue = initialValues.formattedDate;
     var getQuarterInfo = function(originalDate) {
         if (type !== 'Quarters' || !originalDate) {
             return;
@@ -86,6 +173,23 @@ var useDateTimePicker = function(param) {
             ]
         };
     };
+    var isDateEqualEdge = function(dateEdge) {
+        if (!dateEdge) {
+            return false;
+        }
+        var normalizedEdgeDate = (0, _datejs.customDayjs)(dateEdge);
+        normalizedEdgeDate.set('hours', 0);
+        normalizedEdgeDate.set('minutes', 0);
+        normalizedEdgeDate.set('seconds', 0);
+        var normalizedCurrentDate = (0, _datejs.customDayjs)(correctDates.calendar);
+        normalizedCurrentDate.set('hours', 0);
+        normalizedCurrentDate.set('minutes', 0);
+        normalizedCurrentDate.set('seconds', 0);
+        if (normalizedCurrentDate.isSame(normalizedEdgeDate)) {
+            return true;
+        }
+        return false;
+    };
     var getFormattedCorrectInput = function(param) {
         var originalDate = param.originalDate, formattedDate = param.formattedDate, dateValue = param.dateValue, timeValue = param.timeValue;
         if (originalDate || formattedDate === '') {
@@ -116,7 +220,7 @@ var useDateTimePicker = function(param) {
             value: value,
             format: format,
             delimiters: delimiters,
-            prevValue: currentValue,
+            prevValue: inputValue,
             selectionStart: selectionStart
         }) : {
             formattedValue: value,
@@ -326,14 +430,70 @@ var useDateTimePicker = function(param) {
         });
         setInnerDate(formattedDate);
     };
+    var handleBlur = function(event) {
+        if (!preserveInvalidOnBlur) {
+            _datejs.customDayjs.locale(lang);
+            var originalDate = correctDates.calendar;
+            if (!originalDate) {
+                if (onChangeValue) {
+                    onChangeValue(event, correctDates.input, {
+                        originalDate: undefined,
+                        isoDate: ''
+                    });
+                }
+                if (onCommitDate) {
+                    onCommitDate(correctDates.input, {
+                        quarterInfo: undefined,
+                        originalDate: undefined,
+                        isoDate: ''
+                    });
+                }
+                return;
+            }
+            if (correctDates.time) {
+                originalDate.setHours(correctDates.time.getHours(), correctDates.time.getMinutes(), correctDates.time.getSeconds());
+            }
+            setInnerDate(originalDate);
+            if (!timeGridValue) {
+                if (correctDates.calendar) {
+                    setInnerDate(correctDates.calendar);
+                }
+            }
+            if (onChangeValue) {
+                onChangeValue(event, correctDates.input, {
+                    originalDate: originalDate,
+                    isoDate: originalDate.toISOString()
+                });
+            }
+            if (onCommitDate) {
+                var quarterInfo = getQuarterInfo(originalDate);
+                onCommitDate(correctDates.input, {
+                    quarterInfo: quarterInfo,
+                    originalDate: originalDate,
+                    isoDate: originalDate.toISOString()
+                });
+            }
+        }
+        if (onBlur) {
+            onBlur(event);
+        }
+    };
     return {
+        format: format,
+        dateVisibleValue: dateVisibleValue,
+        calendarGridValue: calendarGridValue,
+        inputValue: inputValue,
+        timeVisibleValue: timeVisibleValue,
+        timeColumnsCount: timeColumnsCount,
         errorClass: errorClass,
         successClass: successClass,
         handleChangeValue: handleChangeValue,
         handleSearch: handleSearch,
         handleCalendarPick: handleCalendarPick,
         handleTimePick: handleTimePick,
+        handleBlur: handleBlur,
         updateExternalDate: updateExternalDate,
-        getQuarterInfo: getQuarterInfo
+        getQuarterInfo: getQuarterInfo,
+        isDateEqualEdge: isDateEqualEdge
     };
 };

package/styled-components/cjs/components/DateTimePicker/hooks/useKeyboardNavigation.js

@@ -16,18 +16,13 @@ _export(exports, {
         return useKeyNavigation;
     }
 });
-var _dateHelper = require("../../DatePicker/utils/dateHelper");
 var keys = {
     Space: 'Space',
     Escape: 'Escape'
 };
 var useKeyNavigation = function(param) {
-    var opened = param.opened, closeOnEsc = param.closeOnEsc, format = param.format, maskWithFormat = param.maskWithFormat, delimiters = param.delimiters, onToggle = param.onToggle;
+    var opened = param.opened, closeOnEsc = param.closeOnEsc, onToggle = param.onToggle;
     var onKeyDown = function(event) {
-        if ((delimiters === null || delimiters === void 0 ? void 0 : delimiters.includes(event.key)) && maskWithFormat && format && !(0, _dateHelper.needFullMonth)(format)) {
-            event.preventDefault();
-            return;
-        }
         switch(event.code){
             case keys.Space:
                 {

package/styled-components/es/components/DateTimePicker/DateTimePicker.js

@@ -99,11 +99,9 @@ function _unsupported_iterable_to_array(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 _array_like_to_array(o, minLen);
 }
-import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useLayoutEffect, useRef, useState } from "react";
 import cls from "classnames";
-import { customDayjs } from "../../utils/datejs";
 import { useForkRef } from "@salutejs/plasma-core";
-import { getDateFormatDelimiter } from "../DatePicker/utils/dateHelper";
 import { base, CalendarContainerOverlay, LeftHelper } from "./DateTimePicker.styles";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
@@ -113,7 +111,6 @@ import { base as readOnlyCSS } from "./variations/_readonly/base";
 import { CalendarGrid, DateShortcutList, Input, Popover, StyledSeparator, TimeGrid } from "./ui";
 import { classes } from "./DateTimePicker.tokens";
 import { useDateTimePicker } from "./hooks/useDateTimePicker";
-import { getFormattedDateTime } from "./utils";
 import { useKeyNavigation } from "./hooks/useKeyboardNavigation";
 export var dateTimePickerRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, ref) {
@@ -194,58 +191,9 @@ export var dateTimePickerRoot = function(Root) {
         var inputInnerRef = useForkRef(inputRef, ref);
         var calendarOverlayRef = useRef(null);
         var _useState = _sliced_to_array(useState(opened), 2), isInnerOpen = _useState[0], setIsInnerOpen = _useState[1];
-        var dateFormatDelimiter = useMemo(function() {
-            return getDateFormatDelimiter(dateFormat);
-        }, [
-            dateFormat
-        ]);
-        var timeFormatDelimiter = useMemo(function() {
-            return getDateFormatDelimiter(timeFormat);
-        }, [
-            timeFormat
-        ]);
-        var timeColumnsCount = (timeFormat === null || timeFormat === void 0 ? void 0 : timeFormat.split(timeFormatDelimiter).length) || 2;
-        var fullFormat = dateFormat + dateTimeSeparator + timeFormat;
-        var _useState1 = _sliced_to_array(useState(defaultDate || ''), 2), innerDate = _useState1[0], setInnerDate = _useState1[1];
-        var dateValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerDate;
-        var initialValues = getFormattedDateTime({
-            value: dateValue,
-            lang: lang,
-            format: fullFormat,
-            includeEdgeDates: includeEdgeDates,
-            min: min,
-            max: max,
-            dateFormat: dateFormat,
-            timeFormat: timeFormat
-        });
-        var _useState2 = _sliced_to_array(useState({
-            input: initialValues.formattedDate,
-            calendar: initialValues.dateValue,
-            time: initialValues.timeValue
-        }), 2), correctDates = _useState2[0], setCorrectDates = _useState2[1];
-        var calendarGridValue = initialValues.dateValue;
-        var timeGridValue = initialValues.timeValue;
-        customDayjs.locale(lang);
-        var timeVisibleValue = timeGridValue ? customDayjs(timeGridValue).format(timeFormat) : '';
-        var inputValue = initialValues.formattedDate;
-        var isDateEqualEdge = function(dateEdge) {
-            if (!dateEdge) {
-                return false;
-            }
-            var normalizedEdgeDate = customDayjs(dateEdge);
-            normalizedEdgeDate.set('hours', 0);
-            normalizedEdgeDate.set('minutes', 0);
-            normalizedEdgeDate.set('seconds', 0);
-            var normalizedCurrentDate = customDayjs(correctDates.calendar);
-            normalizedCurrentDate.set('hours', 0);
-            normalizedCurrentDate.set('minutes', 0);
-            normalizedCurrentDate.set('seconds', 0);
-            if (normalizedCurrentDate.isSame(normalizedEdgeDate)) {
-                return true;
-            }
-            return false;
-        };
         var _useDateTimePicker = useDateTimePicker({
+            inputRef: inputRef,
+            outerValue: outerValue,
             valueError: valueError,
             valueSuccess: valueSuccess,
             type: type,
@@ -253,74 +201,17 @@ export var dateTimePickerRoot = function(Root) {
             disabled: disabled,
             readOnly: readOnly,
             maskWithFormat: maskWithFormat,
-            format: fullFormat,
+            dateTimeSeparator: dateTimeSeparator,
             dateFormat: dateFormat,
             timeFormat: timeFormat,
-            currentValue: inputValue,
-            delimiters: [
-                dateFormatDelimiter,
-                timeFormatDelimiter,
-                dateTimeSeparator
-            ],
-            inputRef: inputRef,
-            correctDates: correctDates,
             max: max,
             min: min,
             includeEdgeDates: includeEdgeDates,
             dateOnTimeSelectOnly: dateOnTimeSelectOnly,
-            setCorrectDates: setCorrectDates,
-            setInnerDate: setInnerDate,
             onChangeValue: onChangeValue,
-            onCommitDate: onCommitDate
-        }), errorClass = _useDateTimePicker.errorClass, successClass = _useDateTimePicker.successClass, handleChangeValue = _useDateTimePicker.handleChangeValue, handleSearch = _useDateTimePicker.handleSearch, getQuarterInfo = _useDateTimePicker.getQuarterInfo, handleCalendarPick = _useDateTimePicker.handleCalendarPick, handleTimePick = _useDateTimePicker.handleTimePick, updateExternalDate = _useDateTimePicker.updateExternalDate;
-        var handleBlur = function(event) {
-            if (!preserveInvalidOnBlur) {
-                customDayjs.locale(lang);
-                var originalDate = correctDates.calendar;
-                if (!originalDate) {
-                    if (onChangeValue) {
-                        onChangeValue(event, correctDates.input, {
-                            originalDate: undefined,
-                            isoDate: ''
-                        });
-                    }
-                    if (onCommitDate) {
-                        onCommitDate(correctDates.input, {
-                            quarterInfo: undefined,
-                            originalDate: undefined,
-                            isoDate: ''
-                        });
-                    }
-                    return;
-                }
-                if (correctDates.time) {
-                    originalDate.setHours(correctDates.time.getHours(), correctDates.time.getMinutes(), correctDates.time.getSeconds());
-                }
-                setInnerDate(originalDate);
-                if (!timeGridValue) {
-                    if (correctDates.calendar) {
-                        setInnerDate(correctDates.calendar);
-                    }
-                }
-                if (onChangeValue) {
-                    onChangeValue(event, correctDates.input, {
-                        originalDate: originalDate,
-                        isoDate: originalDate.toISOString()
-                    });
-                }
-                if (onCommitDate) {
-                    var quarterInfo = getQuarterInfo(originalDate);
-                    onCommitDate(correctDates.input, {
-                        quarterInfo: quarterInfo,
-                        originalDate: originalDate,
-                        isoDate: originalDate.toISOString()
-                    });
-                }
-            }
-            if (onBlur) {
-                onBlur(event);
-            }
-        };
+            onCommitDate: onCommitDate,
+            onBlur: onBlur
+        }), format = _useDateTimePicker.format, dateVisibleValue = _useDateTimePicker.dateVisibleValue, calendarGridValue = _useDateTimePicker.calendarGridValue, inputValue = _useDateTimePicker.inputValue, timeVisibleValue = _useDateTimePicker.timeVisibleValue, timeColumnsCount = _useDateTimePicker.timeColumnsCount, errorClass = _useDateTimePicker.errorClass, successClass = _useDateTimePicker.successClass, handleChangeValue = _useDateTimePicker.handleChangeValue, handleSearch = _useDateTimePicker.handleSearch, handleBlur = _useDateTimePicker.handleBlur, handleCalendarPick = _useDateTimePicker.handleCalendarPick, handleTimePick = _useDateTimePicker.handleTimePick, updateExternalDate = _useDateTimePicker.updateExternalDate, isDateEqualEdge = _useDateTimePicker.isDateEqualEdge;
         var handleCalendarOverlayClick = function(event) {
             if (disabled || readOnly) {
                 return;
@@ -346,13 +237,6 @@ export var dateTimePickerRoot = function(Root) {
         };
         var onKeyDown = useKeyNavigation({
             opened: isInnerOpen,
-            format: fullFormat,
-            maskWithFormat: maskWithFormat,
-            delimiters: [
-                dateFormatDelimiter,
-                timeFormatDelimiter,
-                dateTimeSeparator
-            ],
             closeOnEsc: closeOnEsc,
             onToggle: handleToggle
         }).onKeyDown;
@@ -364,12 +248,12 @@ export var dateTimePickerRoot = function(Root) {
             opened
         ]);
         useLayoutEffect(function() {
-            if (!dateValue) {
+            if (!dateVisibleValue) {
                 updateExternalDate(defaultDate);
             }
         }, [
             defaultDate,
-            fullFormat,
+            format,
             lang
         ]);
         return /*#__PURE__*/ React.createElement(Root, {
@@ -470,7 +354,7 @@ export var dateTimePickerRoot = function(Root) {
         }, isDateEqualEdge(max) && {
             max: max
         })))), leftHelper && /*#__PURE__*/ React.createElement(LeftHelper, {
-            className: cls('errorClass, successClass')
+            className: cls(errorClass, successClass)
         }, leftHelper));
     });
 };