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

package/emotion/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));
     });
 };

package/emotion/es/components/DateTimePicker/hooks/useDateTimePicker.js

@@ -1,3 +1,11 @@
+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, {
@@ -11,6 +19,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] : {};
@@ -50,15 +85,67 @@ 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);
+}
+import { useMemo, useState } from "react";
 import { customDayjs } from "../../../utils/datejs";
 import { QUARTER_NAMES } from "../../Calendar/utils";
+import { getDateFormatDelimiter } from "../../DatePicker/utils/dateHelper";
 import { classes } from "../DateTimePicker.tokens";
 import { getMaskedValue } from "../utils/getMaskedValue";
 import { getFormattedDateTime, normalizeDateTime } from "../utils";
 export 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 ? classes.error : undefined;
     var successClass = valueSuccess ? classes.success : undefined;
+    var dateFormatDelimiter = useMemo(function() {
+        return getDateFormatDelimiter(dateFormat);
+    }, [
+        dateFormat
+    ]);
+    var timeFormatDelimiter = useMemo(function() {
+        return 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(useState(defaultDate || ''), 2), innerDate = _useState[0], setInnerDate = _useState[1];
+    var dateVisibleValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerDate;
+    var initialValues = getFormattedDateTime({
+        value: dateVisibleValue,
+        lang: lang,
+        format: format,
+        includeEdgeDates: includeEdgeDates,
+        min: min,
+        max: max,
+        dateFormat: dateFormat,
+        timeFormat: timeFormat
+    });
+    var _useState1 = _sliced_to_array(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;
+    customDayjs.locale(lang);
+    var timeVisibleValue = timeGridValue ? customDayjs(timeGridValue).format(timeFormat) : '';
+    var inputValue = initialValues.formattedDate;
     var getQuarterInfo = function(originalDate) {
         if (type !== 'Quarters' || !originalDate) {
             return;
@@ -76,6 +163,23 @@ export var useDateTimePicker = function(param) {
             ]
         };
     };
+    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 getFormattedCorrectInput = function(param) {
         var originalDate = param.originalDate, formattedDate = param.formattedDate, dateValue = param.dateValue, timeValue = param.timeValue;
         if (originalDate || formattedDate === '') {
@@ -106,7 +210,7 @@ export var useDateTimePicker = function(param) {
             value: value,
             format: format,
             delimiters: delimiters,
-            prevValue: currentValue,
+            prevValue: inputValue,
             selectionStart: selectionStart
         }) : {
             formattedValue: value,
@@ -316,14 +420,70 @@ export var useDateTimePicker = function(param) {
         });
         setInnerDate(formattedDate);
     };
+    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);
+        }
+    };
     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/emotion/es/components/DateTimePicker/hooks/useKeyboardNavigation.js

@@ -1,15 +1,10 @@
-import { needFullMonth } from "../../DatePicker/utils/dateHelper";
 export var keys = {
     Space: 'Space',
     Escape: 'Escape'
 };
 export 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 && !needFullMonth(format)) {
-            event.preventDefault();
-            return;
-        }
         switch(event.code){
             case keys.Space:
                 {

package/es/components/DateTimePicker/DateTimePicker.js

@@ -1,9 +1,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef, useState, useMemo, useEffect, useLayoutEffect } from 'react';
+import React, { forwardRef, useRef, useState, useEffect, useLayoutEffect } from 'react';
 import cls from 'classnames';
-import { customDayjs } from '../../utils/datejs.js';
 import { useForkRef } from '@salutejs/plasma-core';
-import { getDateFormatDelimiter } from '../DatePicker/utils/dateHelper.js';
 import { CalendarContainerOverlay, LeftHelper, base } from './DateTimePicker.styles.js';
 import { base as base$2 } from './variations/_size/base.js';
 import { base as base$1 } from './variations/_view/base.js';
@@ -19,7 +17,6 @@ import { DateShortcutList } from './ui/DateShortcut/DateShortcutList.js';
 import { CalendarGrid } from './ui/CalendarGrid/CalendarGrid.js';
 import { StyledSeparator } from './ui/Popover/Popover.styles.js';
 import { TimeGrid } from './ui/TimeGrid/TimeGrid.js';
-import { getFormattedDateTime } from './utils/getFormattedDateTime.js';
 
 var _StyledSeparator;
 var _excluded = ["className", "value", "defaultDate", "size", "view", "readOnly", "disabled", "opened", "placement", "offset", "frame", "zIndex", "closeOnOverlayClick", "closeOnEsc", "usePortal", "type", "lang", "dateFormat", "timeFormat", "dateTimeSeparator", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "isDouble", "dateOnTimeSelectOnly", "dateShortcuts", "dateShortcutsPlacement", "dateShortcutsWidth", "eventTooltipOptions", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "calendarContainerWidth", "calendarContainerHeight", "stretched", "label", "labelPlacement", "keepPlaceholder", "requiredPlacement", "required", "hasRequiredIndicator", "preserveInvalidOnBlur", "placeholder", "valueError", "valueSuccess", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "autoComplete", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
@@ -115,60 +112,9 @@ var dateTimePickerRoot = function dateTimePickerRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[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 _useState3 = useState(defaultDate || ''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      innerDate = _useState4[0],
-      setInnerDate = _useState4[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 _useState5 = useState({
-        input: initialValues.formattedDate,
-        calendar: initialValues.dateValue,
-        time: initialValues.timeValue
-      }),
-      _useState6 = _slicedToArray(_useState5, 2),
-      correctDates = _useState6[0],
-      setCorrectDates = _useState6[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 isDateEqualEdge(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,
@@ -176,78 +122,32 @@ var dateTimePickerRoot = function dateTimePickerRoot(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
+        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,
-      getQuarterInfo = _useDateTimePicker.getQuarterInfo,
+      handleBlur = _useDateTimePicker.handleBlur,
       handleCalendarPick = _useDateTimePicker.handleCalendarPick,
       handleTimePick = _useDateTimePicker.handleTimePick,
-      updateExternalDate = _useDateTimePicker.updateExternalDate;
-    var handleBlur = function handleBlur(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);
-      }
-    };
+      updateExternalDate = _useDateTimePicker.updateExternalDate,
+      isDateEqualEdge = _useDateTimePicker.isDateEqualEdge;
     var handleCalendarOverlayClick = function handleCalendarOverlayClick(event) {
       if (disabled || readOnly) {
         return;
@@ -273,9 +173,6 @@ var dateTimePickerRoot = function dateTimePickerRoot(Root) {
     };
     var _useKeyNavigation = useKeyNavigation({
         opened: isInnerOpen,
-        format: fullFormat,
-        maskWithFormat: maskWithFormat,
-        delimiters: [dateFormatDelimiter, timeFormatDelimiter, dateTimeSeparator],
         closeOnEsc: closeOnEsc,
         onToggle: handleToggle
       }),
@@ -286,10 +183,10 @@ var dateTimePickerRoot = function dateTimePickerRoot(Root) {
       });
     }, [opened]);
     useLayoutEffect(function () {
-      if (!dateValue) {
+      if (!dateVisibleValue) {
         updateExternalDate(defaultDate);
       }
-    }, [defaultDate, fullFormat, lang]);
+    }, [defaultDate, format, lang]);
     return /*#__PURE__*/React.createElement(Root, {
       view: view,
       size: size,
@@ -388,7 +285,7 @@ var dateTimePickerRoot = function dateTimePickerRoot(Root) {
     }, isDateEqualEdge(max) && {
       max: max
     })))), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
-      className: cls('errorClass, successClass')
+      className: cls(errorClass, successClass)
     }, leftHelper));
   });
 };