@alfalab/core-components 36.5.1 → 37.1.0-beta.1

package/date-range-input/esm/components/date-range-input/Component.js

@@ -1,4 +1,4 @@
-export { D as DateRangeInput } from '../../Component-3d173527.js';
+export { D as DateRangeInput } from '../../Component-c2e3f77c.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
@@ -7,6 +7,7 @@ import '../../../../calendar/esm';
 import '../../../../icon-button/esm';
 import '../../../../input/esm';
 import '../../../../popover/esm';
+import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import '../../utils/format.js';

package/date-range-input/esm/components/date-range-input/index.css

@@ -1,4 +1,4 @@
-/* hash: rqkkz */
+/* hash: qcfq8 */
 :root {
 
     /* Hard */
@@ -11,7 +11,7 @@
     --gap-m: 16px;
 }
 :root {
-    --border-radius-s: 4px;
+    --border-radius-m: 8px;
 }
 :root {
     --calendar-width: 344px;
@@ -37,28 +37,28 @@
     /* marker */
 }
 :root {
-    --calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
+    --calendar-popover-border-radius: var(--border-radius-m);
 }
-.date-range-input__component_xgs6o {
+.date-range-input__component_ypi4h {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.date-range-input__calendarContainer_xgs6o {
+.date-range-input__calendarContainer_ypi4h {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius)
 }
 @media (max-width: 374px) {
-.date-range-input__calendarContainer_xgs6o {
+.date-range-input__calendarContainer_ypi4h {
         width: 100%;
         min-width: 288px
 }
     }
-.date-range-input__calendarResponsive_xgs6o {
+.date-range-input__calendarResponsive_ypi4h {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
 }
-.date-range-input__block_xgs6o {
+.date-range-input__block_ypi4h {
     width: 100%;
 }

package/date-range-input/esm/components/date-range-input/index.d.ts

@@ -1 +1 @@
-export * from "../../Component-3d173527";
+export * from "../../Component-c2e3f77c";

package/date-range-input/esm/components/date-range-input/index.js

@@ -1,4 +1,4 @@
-export { D as DateRangeInput } from '../../Component-3d173527.js';
+export { D as DateRangeInput } from '../../Component-c2e3f77c.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
@@ -7,6 +7,7 @@ import '../../../../calendar/esm';
 import '../../../../icon-button/esm';
 import '../../../../input/esm';
 import '../../../../popover/esm';
+import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import '../../utils/format.js';

package/date-range-input/esm/desktop.js

@@ -1,5 +1,5 @@
 export { DateRangeInputDesktop } from './Component.desktop.js';
-import './Component-3d173527.js';
+import './Component-c2e3f77c.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
@@ -8,6 +8,7 @@ import '../../calendar/esm';
 import '../../icon-button/esm';
 import '../../input/esm';
 import '../../popover/esm';
+import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import './utils/format.js';

package/date-range-input/esm/index.js

@@ -1,5 +1,5 @@
 export { DateRangeInputResponsive as DateRangeInput } from './Component.responsive.js';
-import './Component-3d173527.js';
+import './Component-c2e3f77c.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
@@ -8,9 +8,9 @@ import '../../calendar/esm';
 import '../../icon-button/esm';
 import '../../input/esm';
 import '../../popover/esm';
+import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
-import '@alfalab/hooks';
 import './Component.desktop.js';
 import './utils/format.js';
 import './Component.mobile.js';

package/date-range-input/esm/mobile.js

@@ -1,5 +1,5 @@
 export { DateRangeInputMobile } from './Component.mobile.js';
-import './Component-3d173527.js';
+import './Component-c2e3f77c.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
@@ -8,6 +8,7 @@ import '../../calendar/esm';
 import '../../icon-button/esm';
 import '../../input/esm';
 import '../../popover/esm';
+import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import './utils/format.js';

package/date-range-input/esm/responsive.js

@@ -1,5 +1,5 @@
 export { DateRangeInputResponsive } from './Component.responsive.js';
-import './Component-3d173527.js';
+import './Component-c2e3f77c.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
@@ -8,9 +8,9 @@ import '../../calendar/esm';
 import '../../icon-button/esm';
 import '../../input/esm';
 import '../../popover/esm';
+import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
-import '@alfalab/hooks';
 import './Component.desktop.js';
 import './utils/format.js';
 import './Component.mobile.js';

package/date-range-input/index.js

@@ -1,5 +1,5 @@
 var Component_responsive = require('./Component.responsive.js');
-require('./Component-070df1af.js');
+require('./Component-c8d42dd6.js');
 require('react');
 require('react-merge-refs');
 require('classnames');
@@ -8,10 +8,10 @@ require('../calendar');
 require('../icon-button');
 require('../input');
 require('../popover');
+require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('./utils/format.js');
 require('date-fns/parse');
-require('@alfalab/hooks');
 require('./Component.desktop.js');
 require('./Component.mobile.js');
 

package/date-range-input/mobile.js

@@ -1,5 +1,5 @@
 var Component_mobile = require('./Component.mobile.js');
-require('./Component-070df1af.js');
+require('./Component-c8d42dd6.js');
 require('react');
 require('react-merge-refs');
 require('classnames');
@@ -8,6 +8,7 @@ require('../calendar');
 require('../icon-button');
 require('../input');
 require('../popover');
+require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('./utils/format.js');
 require('date-fns/parse');

package/date-range-input/modern/Component.desktop.js

@@ -7,6 +7,7 @@ import '../../calendar/modern';
 import '../../icon-button/modern';
 import '../../input/modern';
 import '../../popover/modern';
+import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import './utils/format.js';

package/date-range-input/modern/Component.mobile.js

@@ -7,6 +7,7 @@ import 'date-fns/isValid';
 import '../../icon-button/modern';
 import '../../input/modern';
 import '../../popover/modern';
+import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import './utils/format.js';

package/date-range-input/modern/components/date-range-input/Component.js

@@ -6,11 +6,12 @@ import { usePeriod, Calendar } from '../../../../calendar/modern';
 import { IconButton } from '../../../../icon-button/modern';
 import { Input } from '../../../../input/modern';
 import { Popover } from '../../../../popover/modern';
+import { useDidUpdateEffect } from '@alfalab/hooks';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { parseTimestampToDate, DATE_FORMAT, DATE_MASK, format, parseDateString, isCompleteDateInput, isValid } from '../../utils/format.js';
 import 'date-fns/parse';
 
-const styles = {"component":"date-range-input__component_xgs6o","calendarContainer":"date-range-input__calendarContainer_xgs6o","calendarResponsive":"date-range-input__calendarResponsive_xgs6o","block":"date-range-input__block_xgs6o"};
+const styles = {"component":"date-range-input__component_ypi4h","calendarContainer":"date-range-input__calendarContainer_ypi4h","calendarResponsive":"date-range-input__calendarResponsive_ypi4h","block":"date-range-input__block_ypi4h"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -24,6 +25,10 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
     useEffect(() => {
         setOpen(defaultOpen);
     }, [defaultOpen]);
+    useDidUpdateEffect(() => {
+        const newPropValue = propValue || '';
+        setValue((prevValue) => (prevValue === newPropValue ? prevValue : newPropValue));
+    }, [propValue]);
     const handlePeriodChange = (selectedFrom, selectedTo) => {
         if (selectedFrom && !selectedTo && value.length === DATE_MASK.length) {
             setValue(parseTimestampToDate(selectedFrom));
@@ -32,24 +37,30 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
             (selectedFrom === selectedTo && value.length === DATE_MASK.length)) {
             setValue('');
         }
-        if (onChange) {
-            onChange({
-                dateFrom: selectedFrom ? new Date(selectedFrom) : undefined,
-                dateTo: selectedTo ? new Date(selectedTo) : undefined,
-                value,
-            });
-        }
-        if (onComplete && selectedFrom && selectedTo) {
-            onComplete({
-                dateFrom: new Date(selectedFrom),
-                dateTo: new Date(selectedTo),
-                value,
+        const dateFrom = selectedFrom ? new Date(selectedFrom) : undefined;
+        const dateTo = selectedTo ? new Date(selectedTo) : undefined;
+        const newValue = [selectedFrom, selectedTo].filter(Boolean)
+            .map((timestamp) => parseTimestampToDate(timestamp))
+            .join(' - ');
+        onChange?.({
+            dateFrom,
+            dateTo,
+            value: newValue,
+        });
+        if (dateFrom && dateTo) {
+            onComplete?.({
+                dateFrom,
+                dateTo,
+                value: newValue,
             });
         }
     };
     const { selectedFrom, selectedTo, updatePeriod, resetPeriod, setStart, setEnd } = usePeriod({ onPeriodChange: handlePeriodChange });
     const handleInputWrapperFocus = (event) => {
         if (view === 'desktop') {
+            if (picker) {
+                setOpen(true);
+            }
             if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
                 calendarRef.current.focus();
             }
@@ -68,7 +79,7 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
         if (newValue.length > DATE_MASK.length)
             return;
         // Позволяем вводить только цифры, точки, дефис и пробелы
-        if (/[^\d. \- \d.]/.test(newValue)) {
+        if (/[^\d. -]/.test(newValue)) {
             return;
         }
         const dots = newValue.match(/\./g);
@@ -79,33 +90,37 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
         }
         const formattedValue = format(newValue);
         const dateArr = formattedValue.split(' - ');
-        const dateFrom = parseDateString(dateArr[0]);
-        const dateTo = parseDateString(dateArr[1]);
-        if (selectedFrom && formattedValue.length < DATE_FORMAT.length) {
+        const dateFrom = dateArr[0] ? parseDateString(dateArr[0]) : undefined;
+        const dateTo = dateArr[1] ? parseDateString(dateArr[1]) : undefined;
+        if (!dateFrom && !dateTo) {
+            resetPeriod();
+        }
+        else if (selectedFrom && formattedValue.length < DATE_FORMAT.length) {
             setStart();
         }
         else if (selectedFrom && selectedTo) {
             setEnd();
         }
-        else if (dateFnsIsValid(dateFrom) &&
+        else if (dateFrom &&
+            dateFnsIsValid(dateFrom) &&
             dateArr[0]?.length === DATE_FORMAT.length &&
             dateFrom.getTime() !== selectedFrom) {
             setStart(dateFrom.getTime());
         }
-        else if (dateFnsIsValid(dateTo) &&
+        else if (dateTo &&
+            dateFnsIsValid(dateTo) &&
             dateArr[1]?.length === DATE_FORMAT.length &&
             dateTo.getTime() !== selectedTo) {
             setEnd(dateTo.getTime());
         }
         setValue(formattedValue);
-        if (onChange)
-            onChange({ dateFrom, dateTo, value: formattedValue }, event);
+        onChange?.({ dateFrom, dateTo, value: formattedValue }, event);
         if (isCompleteDateInput(formattedValue)) {
             const valid = isValid(formattedValue, dateArr[0], dateArr[1]);
             if (!valid)
                 return;
-            if (onComplete) {
-                onComplete({ dateFrom, dateTo, value: formattedValue }, event);
+            if (dateFrom && dateTo) {
+                onComplete?.({ dateFrom, dateTo, value: formattedValue }, event);
             }
         }
     };
@@ -133,14 +148,12 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
         // Не дает инпуту терять фокус при выборе даты
         event.preventDefault();
     };
-    const handleInputWrapperClick = () => {
-        if (view === 'desktop' && !open) {
-            setOpen(true);
-        }
-    };
     const handleIconButtonClick = () => {
         if (!open)
             setOpen(true);
+        if (view === 'desktop' && inputRef.current) {
+            inputRef.current.focus();
+        }
     };
     const renderCalendar = () => (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -148,7 +161,7 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
         React.createElement(Calendar$1, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })));
     return (React.createElement("div", { className: cn(styles.component, className, {
             [styles.block]: block,
-        }), onClick: inputDisabled ? undefined : handleInputWrapperClick, onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
+        }), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
         React.createElement(Input, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
                 picker && (React.createElement(IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) }),

package/date-range-input/modern/components/date-range-input/index.css

@@ -1,4 +1,4 @@
-/* hash: rqkkz */
+/* hash: qcfq8 */
 :root {
 
     /* Hard */
@@ -11,7 +11,7 @@
     --gap-m: 16px;
 }
 :root {
-    --border-radius-s: 4px;
+    --border-radius-m: 8px;
 }
 :root {
     --calendar-width: 344px;
@@ -37,28 +37,28 @@
     /* marker */
 }
 :root {
-    --calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
+    --calendar-popover-border-radius: var(--border-radius-m);
 }
-.date-range-input__component_xgs6o {
+.date-range-input__component_ypi4h {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.date-range-input__calendarContainer_xgs6o {
+.date-range-input__calendarContainer_ypi4h {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius)
 }
 @media (max-width: 374px) {
-.date-range-input__calendarContainer_xgs6o {
+.date-range-input__calendarContainer_ypi4h {
         width: 100%;
         min-width: 288px
 }
     }
-.date-range-input__calendarResponsive_xgs6o {
+.date-range-input__calendarResponsive_ypi4h {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
 }
-.date-range-input__block_xgs6o {
+.date-range-input__block_ypi4h {
     width: 100%;
 }

package/date-range-input/modern/components/date-range-input/index.js

@@ -7,6 +7,7 @@ import '../../../../calendar/modern';
 import '../../../../icon-button/modern';
 import '../../../../input/modern';
 import '../../../../popover/modern';
+import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import '../../utils/format.js';

package/date-range-input/modern/desktop.js

@@ -8,6 +8,7 @@ import '../../calendar/modern';
 import '../../icon-button/modern';
 import '../../input/modern';
 import '../../popover/modern';
+import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import './utils/format.js';

package/date-range-input/modern/mobile.js

@@ -8,6 +8,7 @@ import 'date-fns/isValid';
 import '../../icon-button/modern';
 import '../../input/modern';
 import '../../popover/modern';
+import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import './utils/format.js';

package/date-range-input/responsive.js

@@ -1,5 +1,5 @@
 var Component_responsive = require('./Component.responsive.js');
-require('./Component-070df1af.js');
+require('./Component-c8d42dd6.js');
 require('react');
 require('react-merge-refs');
 require('classnames');
@@ -8,10 +8,10 @@ require('../calendar');
 require('../icon-button');
 require('../input');
 require('../popover');
+require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('./utils/format.js');
 require('date-fns/parse');
-require('@alfalab/hooks');
 require('./Component.desktop.js');
 require('./Component.mobile.js');
 

package/date-time-input/{Component-d7408656.d.ts → Component-3fdcf154.d.ts}

@@ -57,14 +57,14 @@ type DateTimeInputProps = Omit<InputProps, 'onChange'> & {
     /**
      * Обработчик изменения значения
      */
-    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+    onChange?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
         date: Date;
         value: string;
     }) => void;
     /**
      * Обработчик окончания ввода
      */
-    onComplete?: (event: ChangeEvent<HTMLInputElement>, payload: {
+    onComplete?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
         date: Date;
         value: string;
     }) => void;
@@ -146,14 +146,14 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
     /**
      * Обработчик изменения значения
      */
-    onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
+    onChange?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
         date: Date;
         value: string;
     }) => void) | undefined;
     /**
      * Обработчик окончания ввода
      */
-    onComplete?: ((event: ChangeEvent<HTMLInputElement>, payload: {
+    onComplete?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
         date: Date;
         value: string;
     }) => void) | undefined;
@@ -166,9 +166,6 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
      */
     calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
         open: boolean;
-        /**
-         * Дополнительный класс для поповера
-         */
         title?: string | undefined;
         onClose?: (() => void) | undefined;
         yearsAmount?: number | undefined;

package/date-time-input/{Component-d7408656.js → Component-3fdcf154.js}

@@ -5,6 +5,7 @@ var coreComponentsCalendar = require('../calendar');
 var coreComponentsIconButton = require('../icon-button');
 var coreComponentsInput = require('../input');
 var coreComponentsPopover = require('../popover');
+var hooks = require('@alfalab/hooks');
 var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
 var utils_format = require('./utils/format.js');
 
@@ -53,7 +54,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"date-time-input__component_o13wn","calendarContainer":"date-time-input__calendarContainer_o13wn","calendarResponsive":"date-time-input__calendarResponsive_o13wn","block":"date-time-input__block_o13wn"};
+var styles = {"component":"date-time-input__component_1gsy0","calendarContainer":"date-time-input__calendarContainer_1gsy0","calendarResponsive":"date-time-input__calendarResponsive_1gsy0","block":"date-time-input__block_1gsy0"};
 require('./components/date-time-input/index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -71,6 +72,10 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
     React.useEffect(function () {
         setOpen(defaultOpen);
     }, [defaultOpen]);
+    hooks.useDidUpdateEffect(function () {
+        var newPropValue = propValue || '';
+        setValue(function (prevValue) { return (prevValue === propValue ? prevValue : newPropValue); });
+    }, [propValue]);
     var checkInputValueIsValid = function (newInputValue) {
         if (!newInputValue || error)
             return false;
@@ -79,8 +84,23 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
             coreComponentsCalendar.dateInLimits(dateValue, minDate, maxDate) &&
             !offDays.includes(dateValue));
     };
+    var setTimeToDate = function () {
+        setValue(function (prevValue) {
+            var dateWithTime = utils_format.addTimeToDate(prevValue);
+            if (dateWithTime !== prevValue && dateWithTime.length === utils_format.DATE_WITH_TIME_LENGTH) {
+                onComplete === null || onComplete === void 0 ? void 0 : onComplete(null, {
+                    date: utils_format.getFullDateTime(dateWithTime),
+                    value: dateWithTime,
+                });
+            }
+            return dateWithTime;
+        });
+    };
     var handleInputWrapperFocus = function (event) {
         if (view === 'desktop') {
+            if (picker) {
+                setOpen(true);
+            }
             if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
                 calendarRef.current.focus();
             }
@@ -91,21 +111,21 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
             var target = (event.relatedTarget || document.activeElement);
             if (calendarRef.current && calendarRef.current.contains(target) === false) {
                 setOpen(false);
-                setValue(function (prevValue) { return utils_format.setTimeToDate(prevValue); });
+                setTimeToDate();
             }
         }
     };
     var handleChange = function (event) {
         var newValue = event.target.value;
-        if (newValue.length > utils_format.DATE_MASK.length)
+        if (newValue.length > utils_format.DATE_WITH_TIME_LENGTH)
             return;
         // Позволяем вводить только цифры, точки, запятую, двоеточие и пробел
-        if (/[^\d., :\d.]/.test(newValue)) {
+        if (/[^\d., :]/.test(newValue)) {
             return;
         }
         var dots = newValue.match(/\./g);
-        var colon = newValue.match(/\:/g);
-        var comma = newValue.match(/\,/g);
+        var colon = newValue.match(/:/g);
+        var comma = newValue.match(/,/g);
         // Не даем вводить больше, чем 2 точки, 1 двоеточие и 1 запятую
         if ((dots && dots.length > 2) ||
             (colon && colon.length > 1) ||
@@ -126,37 +146,38 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
             }
         }
     };
-    var handleCalendarClose = function () {
+    var handleMobileCalendarClose = function () {
         setOpen(false);
+        setTimeToDate();
     };
     var handleClear = function () {
         setValue('');
     };
     var handleCalendarChange = function (date) {
         if (date) {
-            setValue(utils_format.parseTimestampToDate(date));
+            var newValue = utils_format.parseTimestampToDate(date);
+            setValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(null, { date: utils_format.getFullDateTime(newValue), value: newValue });
         }
     };
     var handleCalendarWrapperMouseDown = function (event) {
         // Не дает инпуту терять фокус при выборе даты
         event.preventDefault();
     };
-    var handleInputWrapperClick = function () {
-        if (view === 'desktop' && !open) {
-            setOpen(true);
-        }
-    };
     var handleIconButtonClick = function () {
         if (!open)
             setOpen(true);
+        if (view === 'desktop' && inputRef.current) {
+            inputRef.current.focus();
+        }
     };
     var renderCalendar = function () { return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React__default.default.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
-        React__default.default.createElement(Calendar, exports.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(value) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
+        React__default.default.createElement(Calendar, exports.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleMobileCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(value) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
     return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className, (_b = {},
             _b[styles.block] = block,
-            _b)), onClick: inputDisabled ? undefined : handleInputWrapperClick, onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
+            _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
         React__default.default.createElement(coreComponentsInput.Input, exports.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
                 rightAddons,
                 picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),

package/date-time-input/Component.desktop.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { DateTimeInputProps } from "./Component-d7408656";
+import { DateTimeInputProps } from "./Component-3fdcf154";
 type DateTimeInputDesktopProps = Omit<DateTimeInputProps, 'view'>;
 declare const DateTimeInputDesktop: FC<DateTimeInputDesktopProps>;
 export { DateTimeInputDesktopProps, DateTimeInputDesktop };

package/date-time-input/Component.desktop.js

@@ -1,4 +1,4 @@
-var components_dateTimeInput_Component = require('./Component-d7408656.js');
+var components_dateTimeInput_Component = require('./Component-3fdcf154.js');
 var React = require('react');
 require('react-merge-refs');
 require('classnames');
@@ -6,6 +6,7 @@ require('../calendar');
 require('../icon-button');
 require('../input');
 require('../popover');
+require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('./utils/format.js');
 require('date-fns/isValid');