@alfalab/core-components-date-time-input 2.2.1 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/{Component-d7408656.d.ts → Component-1ff76732.d.ts} +4 -7
  2. package/{Component-d7408656.js → Component-1ff76732.js} +36 -15
  3. package/Component.desktop.d.ts +1 -1
  4. package/Component.desktop.js +2 -1
  5. package/Component.mobile.d.ts +1 -1
  6. package/Component.mobile.js +2 -1
  7. package/Component.responsive.d.ts +1 -1
  8. package/Component.responsive.js +1 -1
  9. package/components/date-time-input/Component.js +2 -1
  10. package/components/date-time-input/index.css +8 -8
  11. package/components/date-time-input/index.d.ts +1 -1
  12. package/components/date-time-input/index.js +2 -1
  13. package/{esm/Component-c98df415.d.ts → cssm/Component-b91f18e8.d.ts} +4 -7
  14. package/cssm/{Component-d6110aa7.js → Component-b91f18e8.js} +35 -14
  15. package/cssm/Component.desktop.d.ts +1 -1
  16. package/cssm/Component.desktop.js +2 -1
  17. package/cssm/Component.mobile.d.ts +1 -1
  18. package/cssm/Component.mobile.js +2 -1
  19. package/cssm/Component.responsive.d.ts +1 -1
  20. package/cssm/Component.responsive.js +1 -1
  21. package/cssm/components/date-time-input/Component.js +2 -1
  22. package/cssm/components/date-time-input/index.d.ts +1 -1
  23. package/cssm/components/date-time-input/index.js +2 -1
  24. package/cssm/components/date-time-input/index.module.css +2 -2
  25. package/cssm/desktop.js +2 -1
  26. package/cssm/index.js +2 -2
  27. package/cssm/mobile.js +2 -1
  28. package/cssm/responsive.js +2 -2
  29. package/cssm/utils/format.d.ts +3 -2
  30. package/cssm/utils/format.js +7 -3
  31. package/cssm/utils/index.js +2 -1
  32. package/desktop.js +2 -1
  33. package/{cssm/Component-d6110aa7.d.ts → esm/Component-074b6874.d.ts} +4 -7
  34. package/esm/{Component-c98df415.js → Component-074b6874.js} +37 -16
  35. package/esm/Component.desktop.d.ts +1 -1
  36. package/esm/Component.desktop.js +2 -1
  37. package/esm/Component.mobile.d.ts +1 -1
  38. package/esm/Component.mobile.js +2 -1
  39. package/esm/Component.responsive.d.ts +1 -1
  40. package/esm/Component.responsive.js +1 -1
  41. package/esm/components/date-time-input/Component.js +2 -1
  42. package/esm/components/date-time-input/index.css +8 -8
  43. package/esm/components/date-time-input/index.d.ts +1 -1
  44. package/esm/components/date-time-input/index.js +2 -1
  45. package/esm/desktop.js +2 -1
  46. package/esm/index.js +2 -2
  47. package/esm/mobile.js +2 -1
  48. package/esm/responsive.js +2 -2
  49. package/esm/utils/format.d.ts +3 -2
  50. package/esm/utils/format.js +6 -3
  51. package/esm/utils/index.js +1 -1
  52. package/index.js +2 -2
  53. package/mobile.js +2 -1
  54. package/modern/Component.desktop.js +1 -0
  55. package/modern/Component.mobile.js +1 -0
  56. package/modern/components/date-time-input/Component.d.ts +4 -7
  57. package/modern/components/date-time-input/Component.js +37 -16
  58. package/modern/components/date-time-input/index.css +8 -8
  59. package/modern/components/date-time-input/index.js +1 -0
  60. package/modern/desktop.js +1 -0
  61. package/modern/mobile.js +1 -0
  62. package/modern/utils/format.d.ts +3 -2
  63. package/modern/utils/format.js +6 -3
  64. package/modern/utils/index.js +1 -1
  65. package/package.json +4 -3
  66. package/responsive.js +2 -2
  67. package/utils/format.d.ts +3 -2
  68. package/utils/format.js +7 -3
  69. package/utils/index.js +2 -1
@@ -57,14 +57,14 @@ type DateTimeInputProps = Omit<InputProps, 'onChange'> & {
57
57
  /**
58
58
  * Обработчик изменения значения
59
59
  */
60
- onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
60
+ onChange?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
61
61
  date: Date;
62
62
  value: string;
63
63
  }) => void;
64
64
  /**
65
65
  * Обработчик окончания ввода
66
66
  */
67
- onComplete?: (event: ChangeEvent<HTMLInputElement>, payload: {
67
+ onComplete?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
68
68
  date: Date;
69
69
  value: string;
70
70
  }) => void;
@@ -146,14 +146,14 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
146
146
  /**
147
147
  * Обработчик изменения значения
148
148
  */
149
- onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
149
+ onChange?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
150
150
  date: Date;
151
151
  value: string;
152
152
  }) => void) | undefined;
153
153
  /**
154
154
  * Обработчик окончания ввода
155
155
  */
156
- onComplete?: ((event: ChangeEvent<HTMLInputElement>, payload: {
156
+ onComplete?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
157
157
  date: Date;
158
158
  value: string;
159
159
  }) => void) | undefined;
@@ -166,9 +166,6 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
166
166
  */
167
167
  calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
168
168
  open: boolean;
169
- /**
170
- * Дополнительный класс для поповера
171
- */
172
169
  title?: string | undefined;
173
170
  onClose?: (() => void) | undefined;
174
171
  yearsAmount?: number | undefined;
@@ -7,6 +7,7 @@ var coreComponentsCalendar = require('@alfalab/core-components-calendar');
7
7
  var coreComponentsIconButton = require('@alfalab/core-components-icon-button');
8
8
  var coreComponentsInput = require('@alfalab/core-components-input');
9
9
  var coreComponentsPopover = require('@alfalab/core-components-popover');
10
+ var hooks = require('@alfalab/hooks');
10
11
  var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
11
12
  var utils_format = require('./utils/format.js');
12
13
 
@@ -55,7 +56,7 @@ function __rest(s, e) {
55
56
  return t;
56
57
  }
57
58
 
58
- 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"};
59
+ var styles = {"component":"date-time-input__component_wum5f","calendarContainer":"date-time-input__calendarContainer_wum5f","calendarResponsive":"date-time-input__calendarResponsive_wum5f","block":"date-time-input__block_wum5f"};
59
60
  require('./components/date-time-input/index.css')
60
61
 
61
62
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -73,6 +74,10 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
73
74
  React.useEffect(function () {
74
75
  setOpen(defaultOpen);
75
76
  }, [defaultOpen]);
77
+ hooks.useDidUpdateEffect(function () {
78
+ var newPropValue = propValue || '';
79
+ setValue(function (prevValue) { return (prevValue === propValue ? prevValue : newPropValue); });
80
+ }, [propValue]);
76
81
  var checkInputValueIsValid = function (newInputValue) {
77
82
  if (!newInputValue || error)
78
83
  return false;
@@ -81,8 +86,23 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
81
86
  coreComponentsCalendar.dateInLimits(dateValue, minDate, maxDate) &&
82
87
  !offDays.includes(dateValue));
83
88
  };
89
+ var setTimeToDate = function () {
90
+ setValue(function (prevValue) {
91
+ var dateWithTime = utils_format.addTimeToDate(prevValue);
92
+ if (dateWithTime !== prevValue && dateWithTime.length === utils_format.DATE_WITH_TIME_LENGTH) {
93
+ onComplete === null || onComplete === void 0 ? void 0 : onComplete(null, {
94
+ date: utils_format.getFullDateTime(dateWithTime),
95
+ value: dateWithTime,
96
+ });
97
+ }
98
+ return dateWithTime;
99
+ });
100
+ };
84
101
  var handleInputWrapperFocus = function (event) {
85
102
  if (view === 'desktop') {
103
+ if (picker) {
104
+ setOpen(true);
105
+ }
86
106
  if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
87
107
  calendarRef.current.focus();
88
108
  }
@@ -93,21 +113,21 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
93
113
  var target = (event.relatedTarget || document.activeElement);
94
114
  if (calendarRef.current && calendarRef.current.contains(target) === false) {
95
115
  setOpen(false);
96
- setValue(function (prevValue) { return utils_format.setTimeToDate(prevValue); });
116
+ setTimeToDate();
97
117
  }
98
118
  }
99
119
  };
100
120
  var handleChange = function (event) {
101
121
  var newValue = event.target.value;
102
- if (newValue.length > utils_format.DATE_MASK.length)
122
+ if (newValue.length > utils_format.DATE_WITH_TIME_LENGTH)
103
123
  return;
104
124
  // Позволяем вводить только цифры, точки, запятую, двоеточие и пробел
105
- if (/[^\d., :\d.]/.test(newValue)) {
125
+ if (/[^\d., :]/.test(newValue)) {
106
126
  return;
107
127
  }
108
128
  var dots = newValue.match(/\./g);
109
- var colon = newValue.match(/\:/g);
110
- var comma = newValue.match(/\,/g);
129
+ var colon = newValue.match(/:/g);
130
+ var comma = newValue.match(/,/g);
111
131
  // Не даем вводить больше, чем 2 точки, 1 двоеточие и 1 запятую
112
132
  if ((dots && dots.length > 2) ||
113
133
  (colon && colon.length > 1) ||
@@ -128,37 +148,38 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
128
148
  }
129
149
  }
130
150
  };
131
- var handleCalendarClose = function () {
151
+ var handleMobileCalendarClose = function () {
132
152
  setOpen(false);
153
+ setTimeToDate();
133
154
  };
134
155
  var handleClear = function () {
135
156
  setValue('');
136
157
  };
137
158
  var handleCalendarChange = function (date) {
138
159
  if (date) {
139
- setValue(utils_format.parseTimestampToDate(date));
160
+ var newValue = utils_format.parseTimestampToDate(date);
161
+ setValue(newValue);
162
+ onChange === null || onChange === void 0 ? void 0 : onChange(null, { date: utils_format.getFullDateTime(newValue), value: newValue });
140
163
  }
141
164
  };
142
165
  var handleCalendarWrapperMouseDown = function (event) {
143
166
  // Не дает инпуту терять фокус при выборе даты
144
167
  event.preventDefault();
145
168
  };
146
- var handleInputWrapperClick = function () {
147
- if (view === 'desktop' && !open) {
148
- setOpen(true);
149
- }
150
- };
151
169
  var handleIconButtonClick = function () {
152
170
  if (!open)
153
171
  setOpen(true);
172
+ if (view === 'desktop' && inputRef.current) {
173
+ inputRef.current.focus();
174
+ }
154
175
  };
155
176
  var renderCalendar = function () { return (
156
177
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
157
178
  React__default.default.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
158
- 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 })))); };
179
+ 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 })))); };
159
180
  return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className, (_b = {},
160
181
  _b[styles.block] = block,
161
- _b)), onClick: inputDisabled ? undefined : handleInputWrapperClick, onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
182
+ _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
162
183
  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,
163
184
  rightAddons,
164
185
  picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
@@ -1,5 +1,5 @@
1
1
  import { FC } from 'react';
2
- import { DateTimeInputProps } from "./Component-d7408656";
2
+ import { DateTimeInputProps } from "./Component-1ff76732";
3
3
  type DateTimeInputDesktopProps = Omit<DateTimeInputProps, 'view'>;
4
4
  declare const DateTimeInputDesktop: FC<DateTimeInputDesktopProps>;
5
5
  export { DateTimeInputDesktopProps, DateTimeInputDesktop };
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var components_dateTimeInput_Component = require('./Component-d7408656.js');
3
+ var components_dateTimeInput_Component = require('./Component-1ff76732.js');
4
4
  var React = require('react');
5
5
  require('react-merge-refs');
6
6
  require('classnames');
@@ -8,6 +8,7 @@ require('@alfalab/core-components-calendar');
8
8
  require('@alfalab/core-components-icon-button');
9
9
  require('@alfalab/core-components-input');
10
10
  require('@alfalab/core-components-popover');
11
+ require('@alfalab/hooks');
11
12
  require('@alfalab/icons-glyph/CalendarMIcon');
12
13
  require('./utils/format.js');
13
14
  require('date-fns/isValid');
@@ -1,5 +1,5 @@
1
1
  import { FC } from 'react';
2
- import { DateTimeInputProps } from "./Component-d7408656";
2
+ import { DateTimeInputProps } from "./Component-1ff76732";
3
3
  type DateTimeInputMobileProps = Omit<DateTimeInputProps, 'view'>;
4
4
  declare const DateTimeInputMobile: FC<DateTimeInputMobileProps>;
5
5
  export { DateTimeInputMobileProps, DateTimeInputMobile };
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var components_dateTimeInput_Component = require('./Component-d7408656.js');
3
+ var components_dateTimeInput_Component = require('./Component-1ff76732.js');
4
4
  var React = require('react');
5
5
  var coreComponentsCalendar = require('@alfalab/core-components-calendar');
6
6
  require('react-merge-refs');
@@ -8,6 +8,7 @@ require('classnames');
8
8
  require('@alfalab/core-components-icon-button');
9
9
  require('@alfalab/core-components-input');
10
10
  require('@alfalab/core-components-popover');
11
+ require('@alfalab/hooks');
11
12
  require('@alfalab/icons-glyph/CalendarMIcon');
12
13
  require('./utils/format.js');
13
14
  require('date-fns/isValid');
@@ -1,5 +1,5 @@
1
1
  import { FC } from 'react';
2
- import { DateTimeInputProps } from "./Component-d7408656";
2
+ import { DateTimeInputProps } from "./Component-1ff76732";
3
3
  type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view'> & {
4
4
  /**
5
5
  * Контрольная точка, с нее начинается desktop версия
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var components_dateTimeInput_Component = require('./Component-d7408656.js');
3
+ var components_dateTimeInput_Component = require('./Component-1ff76732.js');
4
4
  var React = require('react');
5
5
  var hooks = require('@alfalab/hooks');
6
6
  var Component_desktop = require('./Component.desktop.js');
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var components_dateTimeInput_Component = require('../../Component-d7408656.js');
3
+ var components_dateTimeInput_Component = require('../../Component-1ff76732.js');
4
4
  require('react');
5
5
  require('react-merge-refs');
6
6
  require('classnames');
@@ -8,6 +8,7 @@ require('@alfalab/core-components-calendar');
8
8
  require('@alfalab/core-components-icon-button');
9
9
  require('@alfalab/core-components-input');
10
10
  require('@alfalab/core-components-popover');
11
+ require('@alfalab/hooks');
11
12
  require('@alfalab/icons-glyph/CalendarMIcon');
12
13
  require('../../utils/format.js');
13
14
  require('date-fns/isValid');
@@ -1,4 +1,4 @@
1
- /* hash: rnb7u */
1
+ /* hash: 9vegz */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -11,7 +11,7 @@
11
11
  --gap-m: 16px;
12
12
  }
13
13
  :root {
14
- --border-radius-s: 4px;
14
+ --border-radius-m: 8px;
15
15
  }
16
16
  :root {
17
17
  --calendar-width: 344px;
@@ -37,28 +37,28 @@
37
37
  /* marker */
38
38
  }
39
39
  :root {
40
- --calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
40
+ --calendar-popover-border-radius: var(--border-radius-m);
41
41
  }
42
- .date-time-input__component_o13wn {
42
+ .date-time-input__component_wum5f {
43
43
  display: inline-block;
44
44
  outline: none;
45
45
  position: relative;
46
46
  }
47
- .date-time-input__calendarContainer_o13wn {
47
+ .date-time-input__calendarContainer_wum5f {
48
48
  display: inline-block;
49
49
  box-sizing: border-box;
50
50
  border-radius: var(--calendar-popover-border-radius)
51
51
  }
52
52
  @media (max-width: 374px) {
53
- .date-time-input__calendarContainer_o13wn {
53
+ .date-time-input__calendarContainer_wum5f {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
57
  }
58
- .date-time-input__calendarResponsive_o13wn {
58
+ .date-time-input__calendarResponsive_wum5f {
59
59
  width: var(--calendar-width);
60
60
  padding: 0 var(--gap-m);
61
61
  }
62
- .date-time-input__block_o13wn {
62
+ .date-time-input__block_wum5f {
63
63
  width: 100%;
64
64
  }
@@ -1 +1 @@
1
- export * from "../../Component-d7408656";
1
+ export * from "../../Component-1ff76732";
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var components_dateTimeInput_Component = require('../../Component-d7408656.js');
3
+ var components_dateTimeInput_Component = require('../../Component-1ff76732.js');
4
4
  require('react');
5
5
  require('react-merge-refs');
6
6
  require('classnames');
@@ -8,6 +8,7 @@ require('@alfalab/core-components-calendar');
8
8
  require('@alfalab/core-components-icon-button');
9
9
  require('@alfalab/core-components-input');
10
10
  require('@alfalab/core-components-popover');
11
+ require('@alfalab/hooks');
11
12
  require('@alfalab/icons-glyph/CalendarMIcon');
12
13
  require('../../utils/format.js');
13
14
  require('date-fns/isValid');
@@ -57,14 +57,14 @@ type DateTimeInputProps = Omit<InputProps, 'onChange'> & {
57
57
  /**
58
58
  * Обработчик изменения значения
59
59
  */
60
- onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
60
+ onChange?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
61
61
  date: Date;
62
62
  value: string;
63
63
  }) => void;
64
64
  /**
65
65
  * Обработчик окончания ввода
66
66
  */
67
- onComplete?: (event: ChangeEvent<HTMLInputElement>, payload: {
67
+ onComplete?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
68
68
  date: Date;
69
69
  value: string;
70
70
  }) => void;
@@ -146,14 +146,14 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
146
146
  /**
147
147
  * Обработчик изменения значения
148
148
  */
149
- onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
149
+ onChange?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
150
150
  date: Date;
151
151
  value: string;
152
152
  }) => void) | undefined;
153
153
  /**
154
154
  * Обработчик окончания ввода
155
155
  */
156
- onComplete?: ((event: ChangeEvent<HTMLInputElement>, payload: {
156
+ onComplete?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
157
157
  date: Date;
158
158
  value: string;
159
159
  }) => void) | undefined;
@@ -166,9 +166,6 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
166
166
  */
167
167
  calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
168
168
  open: boolean;
169
- /**
170
- * Дополнительный класс для поповера
171
- */
172
169
  title?: string | undefined;
173
170
  onClose?: (() => void) | undefined;
174
171
  yearsAmount?: number | undefined;
@@ -7,6 +7,7 @@ var coreComponentsCalendar = require('@alfalab/core-components-calendar/cssm');
7
7
  var coreComponentsIconButton = require('@alfalab/core-components-icon-button/cssm');
8
8
  var coreComponentsInput = require('@alfalab/core-components-input/cssm');
9
9
  var coreComponentsPopover = require('@alfalab/core-components-popover/cssm');
10
+ var hooks = require('@alfalab/hooks');
10
11
  var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
11
12
  var utils_format = require('./utils/format.js');
12
13
  var styles = require('./components/date-time-input/index.module.css');
@@ -72,6 +73,10 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
72
73
  React.useEffect(function () {
73
74
  setOpen(defaultOpen);
74
75
  }, [defaultOpen]);
76
+ hooks.useDidUpdateEffect(function () {
77
+ var newPropValue = propValue || '';
78
+ setValue(function (prevValue) { return (prevValue === propValue ? prevValue : newPropValue); });
79
+ }, [propValue]);
75
80
  var checkInputValueIsValid = function (newInputValue) {
76
81
  if (!newInputValue || error)
77
82
  return false;
@@ -80,8 +85,23 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
80
85
  coreComponentsCalendar.dateInLimits(dateValue, minDate, maxDate) &&
81
86
  !offDays.includes(dateValue));
82
87
  };
88
+ var setTimeToDate = function () {
89
+ setValue(function (prevValue) {
90
+ var dateWithTime = utils_format.addTimeToDate(prevValue);
91
+ if (dateWithTime !== prevValue && dateWithTime.length === utils_format.DATE_WITH_TIME_LENGTH) {
92
+ onComplete === null || onComplete === void 0 ? void 0 : onComplete(null, {
93
+ date: utils_format.getFullDateTime(dateWithTime),
94
+ value: dateWithTime,
95
+ });
96
+ }
97
+ return dateWithTime;
98
+ });
99
+ };
83
100
  var handleInputWrapperFocus = function (event) {
84
101
  if (view === 'desktop') {
102
+ if (picker) {
103
+ setOpen(true);
104
+ }
85
105
  if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
86
106
  calendarRef.current.focus();
87
107
  }
@@ -92,21 +112,21 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
92
112
  var target = (event.relatedTarget || document.activeElement);
93
113
  if (calendarRef.current && calendarRef.current.contains(target) === false) {
94
114
  setOpen(false);
95
- setValue(function (prevValue) { return utils_format.setTimeToDate(prevValue); });
115
+ setTimeToDate();
96
116
  }
97
117
  }
98
118
  };
99
119
  var handleChange = function (event) {
100
120
  var newValue = event.target.value;
101
- if (newValue.length > utils_format.DATE_MASK.length)
121
+ if (newValue.length > utils_format.DATE_WITH_TIME_LENGTH)
102
122
  return;
103
123
  // Позволяем вводить только цифры, точки, запятую, двоеточие и пробел
104
- if (/[^\d., :\d.]/.test(newValue)) {
124
+ if (/[^\d., :]/.test(newValue)) {
105
125
  return;
106
126
  }
107
127
  var dots = newValue.match(/\./g);
108
- var colon = newValue.match(/\:/g);
109
- var comma = newValue.match(/\,/g);
128
+ var colon = newValue.match(/:/g);
129
+ var comma = newValue.match(/,/g);
110
130
  // Не даем вводить больше, чем 2 точки, 1 двоеточие и 1 запятую
111
131
  if ((dots && dots.length > 2) ||
112
132
  (colon && colon.length > 1) ||
@@ -127,37 +147,38 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
127
147
  }
128
148
  }
129
149
  };
130
- var handleCalendarClose = function () {
150
+ var handleMobileCalendarClose = function () {
131
151
  setOpen(false);
152
+ setTimeToDate();
132
153
  };
133
154
  var handleClear = function () {
134
155
  setValue('');
135
156
  };
136
157
  var handleCalendarChange = function (date) {
137
158
  if (date) {
138
- setValue(utils_format.parseTimestampToDate(date));
159
+ var newValue = utils_format.parseTimestampToDate(date);
160
+ setValue(newValue);
161
+ onChange === null || onChange === void 0 ? void 0 : onChange(null, { date: utils_format.getFullDateTime(newValue), value: newValue });
139
162
  }
140
163
  };
141
164
  var handleCalendarWrapperMouseDown = function (event) {
142
165
  // Не дает инпуту терять фокус при выборе даты
143
166
  event.preventDefault();
144
167
  };
145
- var handleInputWrapperClick = function () {
146
- if (view === 'desktop' && !open) {
147
- setOpen(true);
148
- }
149
- };
150
168
  var handleIconButtonClick = function () {
151
169
  if (!open)
152
170
  setOpen(true);
171
+ if (view === 'desktop' && inputRef.current) {
172
+ inputRef.current.focus();
173
+ }
153
174
  };
154
175
  var renderCalendar = function () { return (
155
176
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
156
177
  React__default.default.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
157
- 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 })))); };
178
+ 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 })))); };
158
179
  return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className, (_b = {},
159
180
  _b[styles__default.default.block] = block,
160
- _b)), onClick: inputDisabled ? undefined : handleInputWrapperClick, onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
181
+ _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
161
182
  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,
162
183
  rightAddons,
163
184
  picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
@@ -1,5 +1,5 @@
1
1
  import { FC } from 'react';
2
- import { DateTimeInputProps } from "./Component-d6110aa7";
2
+ import { DateTimeInputProps } from "./Component-b91f18e8";
3
3
  type DateTimeInputDesktopProps = Omit<DateTimeInputProps, 'view'>;
4
4
  declare const DateTimeInputDesktop: FC<DateTimeInputDesktopProps>;
5
5
  export { DateTimeInputDesktopProps, DateTimeInputDesktop };
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var components_dateTimeInput_Component = require('./Component-d6110aa7.js');
3
+ var components_dateTimeInput_Component = require('./Component-b91f18e8.js');
4
4
  var React = require('react');
5
5
  require('react-merge-refs');
6
6
  require('classnames');
@@ -8,6 +8,7 @@ require('@alfalab/core-components-calendar/cssm');
8
8
  require('@alfalab/core-components-icon-button/cssm');
9
9
  require('@alfalab/core-components-input/cssm');
10
10
  require('@alfalab/core-components-popover/cssm');
11
+ require('@alfalab/hooks');
11
12
  require('@alfalab/icons-glyph/CalendarMIcon');
12
13
  require('./utils/format.js');
13
14
  require('date-fns/isValid');
@@ -1,5 +1,5 @@
1
1
  import { FC } from 'react';
2
- import { DateTimeInputProps } from "./Component-d6110aa7";
2
+ import { DateTimeInputProps } from "./Component-b91f18e8";
3
3
  type DateTimeInputMobileProps = Omit<DateTimeInputProps, 'view'>;
4
4
  declare const DateTimeInputMobile: FC<DateTimeInputMobileProps>;
5
5
  export { DateTimeInputMobileProps, DateTimeInputMobile };
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var components_dateTimeInput_Component = require('./Component-d6110aa7.js');
3
+ var components_dateTimeInput_Component = require('./Component-b91f18e8.js');
4
4
  var React = require('react');
5
5
  var coreComponentsCalendar = require('@alfalab/core-components-calendar/cssm');
6
6
  require('react-merge-refs');
@@ -8,6 +8,7 @@ require('classnames');
8
8
  require('@alfalab/core-components-icon-button/cssm');
9
9
  require('@alfalab/core-components-input/cssm');
10
10
  require('@alfalab/core-components-popover/cssm');
11
+ require('@alfalab/hooks');
11
12
  require('@alfalab/icons-glyph/CalendarMIcon');
12
13
  require('./utils/format.js');
13
14
  require('date-fns/isValid');
@@ -1,5 +1,5 @@
1
1
  import { FC } from 'react';
2
- import { DateTimeInputProps } from "./Component-d6110aa7";
2
+ import { DateTimeInputProps } from "./Component-b91f18e8";
3
3
  type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view'> & {
4
4
  /**
5
5
  * Контрольная точка, с нее начинается desktop версия
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var components_dateTimeInput_Component = require('./Component-d6110aa7.js');
3
+ var components_dateTimeInput_Component = require('./Component-b91f18e8.js');
4
4
  var React = require('react');
5
5
  var hooks = require('@alfalab/hooks');
6
6
  var Component_desktop = require('./Component.desktop.js');
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var components_dateTimeInput_Component = require('../../Component-d6110aa7.js');
3
+ var components_dateTimeInput_Component = require('../../Component-b91f18e8.js');
4
4
  require('react');
5
5
  require('react-merge-refs');
6
6
  require('classnames');
@@ -8,6 +8,7 @@ require('@alfalab/core-components-calendar/cssm');
8
8
  require('@alfalab/core-components-icon-button/cssm');
9
9
  require('@alfalab/core-components-input/cssm');
10
10
  require('@alfalab/core-components-popover/cssm');
11
+ require('@alfalab/hooks');
11
12
  require('@alfalab/icons-glyph/CalendarMIcon');
12
13
  require('../../utils/format.js');
13
14
  require('./index.module.css');
@@ -1 +1 @@
1
- export * from "../../Component-d6110aa7";
1
+ export * from "../../Component-b91f18e8";
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var components_dateTimeInput_Component = require('../../Component-d6110aa7.js');
3
+ var components_dateTimeInput_Component = require('../../Component-b91f18e8.js');
4
4
  require('react');
5
5
  require('react-merge-refs');
6
6
  require('classnames');
@@ -8,6 +8,7 @@ require('@alfalab/core-components-calendar/cssm');
8
8
  require('@alfalab/core-components-icon-button/cssm');
9
9
  require('@alfalab/core-components-input/cssm');
10
10
  require('@alfalab/core-components-popover/cssm');
11
+ require('@alfalab/hooks');
11
12
  require('@alfalab/icons-glyph/CalendarMIcon');
12
13
  require('../../utils/format.js');
13
14
  require('date-fns/isValid');
@@ -10,7 +10,7 @@
10
10
  --gap-m: 16px;
11
11
  }
12
12
  :root {
13
- --border-radius-s: 4px;
13
+ --border-radius-m: 8px;
14
14
  }
15
15
  :root {
16
16
  --calendar-width: 344px;
@@ -36,7 +36,7 @@
36
36
  /* marker */
37
37
  }
38
38
  :root {
39
- --calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
39
+ --calendar-popover-border-radius: var(--border-radius-m);
40
40
  }
41
41
  .component {
42
42
  display: inline-block;
package/cssm/desktop.js CHANGED
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var Component_desktop = require('./Component.desktop.js');
4
- require('./Component-d6110aa7.js');
4
+ require('./Component-b91f18e8.js');
5
5
  require('react');
6
6
  require('react-merge-refs');
7
7
  require('classnames');
@@ -9,6 +9,7 @@ require('@alfalab/core-components-calendar/cssm');
9
9
  require('@alfalab/core-components-icon-button/cssm');
10
10
  require('@alfalab/core-components-input/cssm');
11
11
  require('@alfalab/core-components-popover/cssm');
12
+ require('@alfalab/hooks');
12
13
  require('@alfalab/icons-glyph/CalendarMIcon');
13
14
  require('./utils/format.js');
14
15
  require('date-fns/isValid');