@gravity-ui/date-components 1.1.1 → 1.3.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 (47) hide show
  1. package/dist/cjs/components/Calendar/Calendar.css +37 -37
  2. package/dist/cjs/components/Calendar/Calendar.js +2 -4
  3. package/dist/cjs/components/Calendar/CalendarBase.js +2 -4
  4. package/dist/cjs/components/Calendar/RangeCalendar.js +2 -4
  5. package/dist/cjs/components/Calendar/hooks/useCalendarCellProps.js +2 -4
  6. package/dist/cjs/components/Calendar/hooks/useCalendarGridProps.js +11 -0
  7. package/dist/cjs/components/Calendar/hooks/useCalendarProps.js +2 -4
  8. package/dist/cjs/components/Calendar/hooks/useCalendarState.js +2 -4
  9. package/dist/cjs/components/Calendar/hooks/useRangeCalendarState.js +3 -16
  10. package/dist/cjs/components/Calendar/i18n/index.js +3 -5
  11. package/dist/cjs/components/Calendar/index.js +8 -21
  12. package/dist/cjs/components/DateField/DateField.js +3 -16
  13. package/dist/cjs/components/DateField/hooks/useDateFieldProps.js +4 -6
  14. package/dist/cjs/components/DateField/hooks/useDateFieldState.js +7 -7
  15. package/dist/cjs/components/DateField/i18n/index.js +3 -5
  16. package/dist/cjs/components/DateField/index.js +4 -17
  17. package/dist/cjs/components/DateField/utils.d.ts +1 -2
  18. package/dist/cjs/components/DateField/utils.js +5 -3
  19. package/dist/cjs/components/DatePicker/DatePicker.js +3 -16
  20. package/dist/cjs/components/DatePicker/hooks/useDatePickerProps.js +3 -16
  21. package/dist/cjs/components/DatePicker/hooks/useDatePickerState.js +2 -4
  22. package/dist/cjs/components/DatePicker/i18n/index.js +3 -5
  23. package/dist/cjs/components/DatePicker/index.js +4 -17
  24. package/dist/cjs/components/RelativeDateField/RelativeDateField.js +2 -4
  25. package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldProps.js +2 -4
  26. package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldState.js +2 -4
  27. package/dist/cjs/components/RelativeDateField/index.js +4 -17
  28. package/dist/cjs/components/RelativeDatePicker/RelativeDatePicker.js +2 -4
  29. package/dist/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.js +3 -16
  30. package/dist/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerState.js +2 -4
  31. package/dist/cjs/components/RelativeDatePicker/i18n/index.js +3 -5
  32. package/dist/cjs/components/RelativeDatePicker/index.js +4 -17
  33. package/dist/cjs/components/hooks/useControlledState.js +2 -4
  34. package/dist/cjs/components/index.js +6 -19
  35. package/dist/cjs/index.js +2 -15
  36. package/dist/esm/components/Calendar/Calendar.css +37 -37
  37. package/dist/esm/components/Calendar/hooks/useCalendarGridProps.js +11 -0
  38. package/dist/esm/components/Calendar/hooks/useRangeCalendarState.js +1 -11
  39. package/dist/esm/components/DateField/DateField.js +1 -11
  40. package/dist/esm/components/DateField/hooks/useDateFieldProps.js +3 -3
  41. package/dist/esm/components/DateField/hooks/useDateFieldState.js +5 -3
  42. package/dist/esm/components/DateField/utils.d.ts +1 -2
  43. package/dist/esm/components/DateField/utils.js +3 -2
  44. package/dist/esm/components/DatePicker/DatePicker.js +1 -11
  45. package/dist/esm/components/DatePicker/hooks/useDatePickerProps.js +1 -11
  46. package/dist/esm/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.js +1 -11
  47. package/package.json +37 -34
@@ -1,10 +1,8 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
2
  Object.defineProperty(exports, "__esModule", { value: true });
6
3
  exports.useRelativeDateFieldState = void 0;
7
- const react_1 = __importDefault(require("react"));
4
+ const tslib_1 = require("tslib");
5
+ const react_1 = tslib_1.__importDefault(require("react"));
8
6
  const date_utils_1 = require("@gravity-ui/date-utils");
9
7
  const useControlledState_1 = require("../../hooks/useControlledState");
10
8
  function useRelativeDateFieldState(props) {
@@ -1,19 +1,6 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
16
2
  Object.defineProperty(exports, "__esModule", { value: true });
17
- __exportStar(require("./RelativeDateField"), exports);
18
- __exportStar(require("./hooks/useRelativeDateFieldProps"), exports);
19
- __exportStar(require("./hooks/useRelativeDateFieldState"), exports);
3
+ const tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./RelativeDateField"), exports);
5
+ tslib_1.__exportStar(require("./hooks/useRelativeDateFieldProps"), exports);
6
+ tslib_1.__exportStar(require("./hooks/useRelativeDateFieldState"), exports);
@@ -1,11 +1,9 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
2
  Object.defineProperty(exports, "__esModule", { value: true });
6
3
  exports.RelativeDatePicker = void 0;
4
+ const tslib_1 = require("tslib");
7
5
  const jsx_runtime_1 = require("react/jsx-runtime");
8
- const react_1 = __importDefault(require("react"));
6
+ const react_1 = tslib_1.__importDefault(require("react"));
9
7
  const icons_1 = require("@gravity-ui/icons");
10
8
  const uikit_1 = require("@gravity-ui/uikit");
11
9
  const cn_1 = require("../../utils/cn");
@@ -1,28 +1,15 @@
1
1
  "use strict";
2
- var __rest = (this && this.__rest) || function (s, e) {
3
- var t = {};
4
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
- t[p] = s[p];
6
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
- t[p[i]] = s[p[i]];
10
- }
11
- return t;
12
- };
13
- var __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
2
  Object.defineProperty(exports, "__esModule", { value: true });
17
3
  exports.useRelativeDatePickerProps = void 0;
18
- const react_1 = __importDefault(require("react"));
4
+ const tslib_1 = require("tslib");
5
+ const react_1 = tslib_1.__importDefault(require("react"));
19
6
  const uikit_1 = require("@gravity-ui/uikit");
20
7
  const DateField_1 = require("../../DateField");
21
8
  const getButtonSizeForInput_1 = require("../../utils/getButtonSizeForInput");
22
9
  const mergeProps_1 = require("../../utils/mergeProps");
23
10
  const i18n_1 = require("../i18n");
24
11
  function useRelativeDatePickerProps(state, _a) {
25
- var { onFocus, onBlur } = _a, props = __rest(_a, ["onFocus", "onBlur"]);
12
+ var { onFocus, onBlur } = _a, props = tslib_1.__rest(_a, ["onFocus", "onBlur"]);
26
13
  const { mode, setMode, datePickerState, dateFieldState, relativeDateState } = state;
27
14
  const [focusedDate, setFocusedDate] = react_1.default.useState(relativeDateState.lastCorrectDate);
28
15
  const [prevCorrectDate, setPrevCorrectDate] = react_1.default.useState(relativeDateState.lastCorrectDate);
@@ -1,10 +1,8 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
2
  Object.defineProperty(exports, "__esModule", { value: true });
6
3
  exports.useRelativeDatePickerState = void 0;
7
- const react_1 = __importDefault(require("react"));
4
+ const tslib_1 = require("tslib");
5
+ const react_1 = tslib_1.__importDefault(require("react"));
8
6
  const DateField_1 = require("../../DateField");
9
7
  const DatePicker_1 = require("../../DatePicker");
10
8
  const RelativeDateField_1 = require("../../RelativeDateField");
@@ -1,11 +1,9 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
2
  Object.defineProperty(exports, "__esModule", { value: true });
6
3
  exports.i18n = void 0;
4
+ const tslib_1 = require("tslib");
7
5
  const i18n_1 = require("@gravity-ui/uikit/i18n");
8
6
  const cn_1 = require("../../../utils/cn");
9
- const en_json_1 = __importDefault(require("./en.json"));
10
- const ru_json_1 = __importDefault(require("./ru.json"));
7
+ const en_json_1 = tslib_1.__importDefault(require("./en.json"));
8
+ const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
11
9
  exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}relative-date-picker`);
@@ -1,19 +1,6 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
16
2
  Object.defineProperty(exports, "__esModule", { value: true });
17
- __exportStar(require("./RelativeDatePicker"), exports);
18
- __exportStar(require("./hooks/useRelativeDatePickerState"), exports);
19
- __exportStar(require("./hooks/useRelativeDatePickerProps"), exports);
3
+ const tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./RelativeDatePicker"), exports);
5
+ tslib_1.__exportStar(require("./hooks/useRelativeDatePickerState"), exports);
6
+ tslib_1.__exportStar(require("./hooks/useRelativeDatePickerProps"), exports);
@@ -1,10 +1,8 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
2
  Object.defineProperty(exports, "__esModule", { value: true });
6
3
  exports.useControlledState = void 0;
7
- const react_1 = __importDefault(require("react"));
4
+ const tslib_1 = require("tslib");
5
+ const react_1 = tslib_1.__importDefault(require("react"));
8
6
  function useControlledState(value, defaultValue, onUpdate) {
9
7
  const [innerValue, setInnerValue] = react_1.default.useState(defaultValue);
10
8
  const [wasControlled] = react_1.default.useState(value !== undefined);
@@ -1,21 +1,8 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
16
2
  Object.defineProperty(exports, "__esModule", { value: true });
17
- __exportStar(require("./Calendar"), exports);
18
- __exportStar(require("./DateField"), exports);
19
- __exportStar(require("./DatePicker"), exports);
20
- __exportStar(require("./RelativeDateField"), exports);
21
- __exportStar(require("./RelativeDatePicker"), exports);
3
+ const tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./Calendar"), exports);
5
+ tslib_1.__exportStar(require("./DateField"), exports);
6
+ tslib_1.__exportStar(require("./DatePicker"), exports);
7
+ tslib_1.__exportStar(require("./RelativeDateField"), exports);
8
+ tslib_1.__exportStar(require("./RelativeDatePicker"), exports);
package/dist/cjs/index.js CHANGED
@@ -1,17 +1,4 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
16
2
  Object.defineProperty(exports, "__esModule", { value: true });
17
- __exportStar(require("./components"), exports);
3
+ const tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./components"), exports);
@@ -50,43 +50,6 @@
50
50
  height: 100%;
51
51
  padding: 0 var(--_--calendar-padding) var(--_--calendar-padding);
52
52
  }
53
- .g-date-calendar__content_animation_forward {
54
- transform: translateX(-100%);
55
- animation: calendar-forward 0.25s ease forwards;
56
- }
57
- .g-date-calendar__content_animation_forward.g-date-calendar__current-state {
58
- left: -100%;
59
- }
60
- .g-date-calendar__content_animation_backward {
61
- transform: translateX(0);
62
- animation: calendar-backward 0.25s ease forwards;
63
- }
64
- .g-date-calendar__content_animation_backward.g-date-calendar__current-state {
65
- left: 100%;
66
- }
67
- .g-date-calendar__content_animation_zoom-in {
68
- transform: scale();
69
- }
70
- .g-date-calendar__content_animation_zoom-in.g-date-calendar__previous-state {
71
- animation: calendar-zoom-in-hiding 0.25s ease forwards;
72
- }
73
- .g-date-calendar__content_animation_zoom-in.g-date-calendar__current-state {
74
- animation: calendar-zoom-in-showing 0.25s ease forwards;
75
- }
76
- .g-date-calendar__content_animation_zoom-out {
77
- transform: scale();
78
- }
79
- .g-date-calendar__content_animation_zoom-out.g-date-calendar__current-state {
80
- animation: calendar-zoom-out-showing 0.25s ease forwards;
81
- }
82
- .g-date-calendar__content_animation_zoom-out.g-date-calendar__previous-state {
83
- animation: calendar-zoom-out-hiding 0.25s ease forwards;
84
- }
85
- @media screen and (prefers-reduced-motion: reduce), (update: slow) {
86
- .g-date-calendar__content[class] {
87
- animation-duration: 0.001ms;
88
- }
89
- }
90
53
  @keyframes calendar-forward {
91
54
  from {
92
55
  transform: translateX(0);
@@ -143,6 +106,43 @@
143
106
  transform: scale(2);
144
107
  }
145
108
  }
109
+ .g-date-calendar__content_animation_forward {
110
+ transform: translateX(-100%);
111
+ animation: calendar-forward 0.25s ease forwards;
112
+ }
113
+ .g-date-calendar__content_animation_forward.g-date-calendar__current-state {
114
+ left: -100%;
115
+ }
116
+ .g-date-calendar__content_animation_backward {
117
+ transform: translateX(0);
118
+ animation: calendar-backward 0.25s ease forwards;
119
+ }
120
+ .g-date-calendar__content_animation_backward.g-date-calendar__current-state {
121
+ left: 100%;
122
+ }
123
+ .g-date-calendar__content_animation_zoom-in {
124
+ transform: scale();
125
+ }
126
+ .g-date-calendar__content_animation_zoom-in.g-date-calendar__previous-state {
127
+ animation: calendar-zoom-in-hiding 0.25s ease forwards;
128
+ }
129
+ .g-date-calendar__content_animation_zoom-in.g-date-calendar__current-state {
130
+ animation: calendar-zoom-in-showing 0.25s ease forwards;
131
+ }
132
+ .g-date-calendar__content_animation_zoom-out {
133
+ transform: scale();
134
+ }
135
+ .g-date-calendar__content_animation_zoom-out.g-date-calendar__current-state {
136
+ animation: calendar-zoom-out-showing 0.25s ease forwards;
137
+ }
138
+ .g-date-calendar__content_animation_zoom-out.g-date-calendar__previous-state {
139
+ animation: calendar-zoom-out-hiding 0.25s ease forwards;
140
+ }
141
+ @media screen and (prefers-reduced-motion: reduce), (update: slow) {
142
+ .g-date-calendar__content[class] {
143
+ animation-duration: 0.001ms;
144
+ }
145
+ }
146
146
  .g-date-calendar__grid-rowgroup {
147
147
  display: grid;
148
148
  gap: var(--_--calendar-days-gap);
@@ -10,36 +10,47 @@ export function useCalendarGridProps(state) {
10
10
  ? `${state.startDate.year()} — ${state.endDate.year()}`
11
11
  : state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY'), 'aria-disabled': state.disabled ? 'true' : undefined, 'aria-readonly': state.readOnly ? 'true' : undefined }, focusWithinProps), { onKeyDown: (e) => {
12
12
  if (e.key === 'ArrowRight') {
13
+ e.preventDefault();
13
14
  state.focusNextCell();
14
15
  }
15
16
  else if (e.key === 'ArrowLeft') {
17
+ e.preventDefault();
16
18
  state.focusPreviousCell();
17
19
  }
18
20
  else if (e.key === 'ArrowDown') {
21
+ e.preventDefault();
19
22
  state.focusNextRow();
20
23
  }
21
24
  else if (e.key === 'ArrowUp') {
25
+ e.preventDefault();
22
26
  state.focusPreviousRow();
23
27
  }
24
28
  else if (e.key === 'PageDown') {
29
+ e.preventDefault();
25
30
  state.focusNextPage(e.shiftKey);
26
31
  }
27
32
  else if (e.key === 'PageUp') {
33
+ e.preventDefault();
28
34
  state.focusPreviousPage(e.shiftKey);
29
35
  }
30
36
  else if (e.key === 'End') {
37
+ e.preventDefault();
31
38
  state.focusSectionEnd();
32
39
  }
33
40
  else if (e.key === 'Home') {
41
+ e.preventDefault();
34
42
  state.focusSectionStart();
35
43
  }
36
44
  else if (e.code === 'Minus') {
45
+ e.preventDefault();
37
46
  state.zoomOut();
38
47
  }
39
48
  else if (e.code === 'Equal') {
49
+ e.preventDefault();
40
50
  state.zoomIn();
41
51
  }
42
52
  else if (e.key === 'Enter' || e.key === ' ') {
53
+ e.preventDefault();
43
54
  state.selectDate(state.focusedDate);
44
55
  }
45
56
  } });
@@ -1,14 +1,4 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
1
+ import { __rest } from "tslib";
12
2
  import React from 'react';
13
3
  import { useControlledState } from '../../hooks/useControlledState';
14
4
  import { constrainValue } from '../utils';
@@ -1,14 +1,4 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
1
+ import { __rest } from "tslib";
12
2
  import { jsx as _jsx } from "react/jsx-runtime";
13
3
  import React from 'react';
14
4
  import { TextInput, useFocusWithin } from '@gravity-ui/uikit';
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { CtrlCmd } from '../utils';
2
+ import { cleanString } from '../utils';
3
3
  export function useDateFieldProps(state, props) {
4
4
  const inputRef = React.useRef(null);
5
5
  const [, setInnerState] = React.useState({});
@@ -145,7 +145,7 @@ export function useDateFieldProps(state, props) {
145
145
  e.preventDefault();
146
146
  state.clearSection();
147
147
  }
148
- else if (e.key === 'a' && e[CtrlCmd]) {
148
+ else if (e.key === 'a' && (e['ctrlKey'] || e['metaKey'])) {
149
149
  e.preventDefault();
150
150
  setSelectedSections('all');
151
151
  }
@@ -177,7 +177,7 @@ export function useDateFieldProps(state, props) {
177
177
  if (state.readOnly) {
178
178
  return;
179
179
  }
180
- const pastedValue = e.clipboardData.getData('text');
180
+ const pastedValue = cleanString(e.clipboardData.getData('text'));
181
181
  if (state.selectedSectionIndexes &&
182
182
  state.selectedSectionIndexes.startIndex ===
183
183
  state.selectedSectionIndexes.endIndex) {
@@ -129,7 +129,8 @@ export function useDateFieldState(props) {
129
129
  isEmpty: Object.keys(validSegments).length === 0,
130
130
  displayValue,
131
131
  setValue,
132
- text: sectionsState.editableSections.map((s) => s.textValue).join(''),
132
+ // use ltr direction context to get predictable navigation inside input
133
+ text: '\u2066' + sectionsState.editableSections.map((s) => s.textValue).join('') + '\u2069',
133
134
  readOnly: props.readOnly,
134
135
  disabled: props.disabled,
135
136
  sections: sectionsState.editableSections,
@@ -296,7 +297,6 @@ export function useDateFieldState(props) {
296
297
  timeZone: props.timeZone,
297
298
  }));
298
299
  },
299
- // eslint-disable-next-line complexity
300
300
  onInput(key) {
301
301
  if (this.readOnly || this.disabled) {
302
302
  return;
@@ -469,7 +469,7 @@ function useSectionsState(sections, value, validSegments) {
469
469
  return state;
470
470
  }
471
471
  function getEditableSections(sections, value, validSegments) {
472
- let position = 0;
472
+ let position = 1;
473
473
  const newSections = [];
474
474
  let previousEditableSection = -1;
475
475
  for (let i = 0; i < sections.length; i++) {
@@ -483,6 +483,8 @@ function getEditableSections(sections, value, validSegments) {
483
483
  renderedValue = renderedValue.padStart(section.placeholder.length, '0');
484
484
  }
485
485
  }
486
+ // use bidirectional context to allow the browser autodetect text direction
487
+ renderedValue = '\u2068' + renderedValue + '\u2069';
486
488
  const sectionLength = renderedValue.length;
487
489
  const newSection = Object.assign(Object.assign(Object.assign({}, section), { value: getSectionValue(section, value), textValue: renderedValue, start: position, end: position + sectionLength, modified: false, previousEditableSection, nextEditableSection: previousEditableSection }), getSectionLimits(section, value));
488
490
  newSections.push(newSection);
@@ -1,7 +1,5 @@
1
1
  import type { DateTime } from '@gravity-ui/date-utils';
2
2
  import type { DateFieldSection, DateFieldSectionType, DateFieldSectionWithoutPosition } from './types';
3
- export declare const isMac: boolean;
4
- export declare const CtrlCmd: string;
5
3
  export declare function expandFormat(format: string): string;
6
4
  export declare function getSectionLimits(section: DateFieldSectionWithoutPosition, date: DateTime): {
7
5
  minValue: number;
@@ -15,3 +13,4 @@ export declare function getDurationUnitFromSectionType(type: DateFieldSectionTyp
15
13
  export declare function addSegment(section: DateFieldSection, date: DateTime, amount: number): DateTime;
16
14
  export declare function setSegment(section: DateFieldSection, date: DateTime, amount: number): DateTime;
17
15
  export declare function splitFormatIntoSections(format: string): DateFieldSectionWithoutPosition[];
16
+ export declare function cleanString(dirtyString: string): string;
@@ -1,7 +1,5 @@
1
1
  import { dateTime, settings } from '@gravity-ui/date-utils';
2
2
  import { i18n } from './i18n';
3
- export const isMac = window.navigator.userAgent.indexOf('Macintosh') >= 0;
4
- export const CtrlCmd = isMac ? 'metaKey' : 'ctrlKey';
5
3
  export function expandFormat(format) {
6
4
  const localeFormats = settings.getLocaleData().formats;
7
5
  const getShortLocalizedFormatFromLongLocalizedFormat = (formatBis) => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, escapeSequence, localizedFormat) => escapeSequence || localizedFormat.slice(1));
@@ -407,3 +405,6 @@ function getSectionOptions(section, token) {
407
405
  }
408
406
  return undefined;
409
407
  }
408
+ export function cleanString(dirtyString) {
409
+ return dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
410
+ }
@@ -1,14 +1,4 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
1
+ import { __rest } from "tslib";
12
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
3
  import React from 'react';
14
4
  import { Calendar as CalendarIcon } from '@gravity-ui/icons';
@@ -1,14 +1,4 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
1
+ import { __rest } from "tslib";
12
2
  import React from 'react';
13
3
  import { useFocusWithin, useForkRef } from '@gravity-ui/uikit';
14
4
  import { useDateFieldProps } from '../../DateField';
@@ -1,14 +1,4 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
1
+ import { __rest } from "tslib";
12
2
  import React from 'react';
13
3
  import { useFocusWithin, useForkRef } from '@gravity-ui/uikit';
14
4
  import { useDateFieldProps } from '../../DateField';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/date-components",
3
- "version": "1.1.1",
3
+ "version": "1.3.0",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "main": "dist/cjs/index.js",
@@ -32,50 +32,54 @@
32
32
  "scripts": {
33
33
  "prepare": "husky install",
34
34
  "lint": "run-p lint:*",
35
- "lint:js": "eslint --ext .js,.jsx,.ts,.tsx .",
36
- "lint:styles": "stylelint 'src/**/*.scss'",
35
+ "lint:js": "eslint --ext .js,.jsx,.ts,.tsx --report-unused-disable-directives .",
36
+ "lint:styles": "stylelint --report-needless-disables 'src/**/*.scss'",
37
37
  "lint:other": "npm run prettier -- --check",
38
38
  "prettier": "prettier '**/*.{md,yaml,yml,json}'",
39
39
  "typecheck": "tsc --noEmit",
40
40
  "test": "jest",
41
41
  "clean": "gulp clean",
42
42
  "build": "gulp",
43
- "start": "storybook dev",
43
+ "start": "storybook dev -p 7070",
44
44
  "build-storybook": "storybook build -c .storybook -o storybook-static",
45
45
  "prepublishOnly": "npm run build"
46
46
  },
47
47
  "dependencies": {
48
48
  "@bem-react/classname": "^1.6.0",
49
49
  "@gravity-ui/date-utils": "^1.4.1",
50
- "@gravity-ui/icons": "^2.2.0"
50
+ "@gravity-ui/icons": "^2.2.0",
51
+ "tslib": "2.6.2"
51
52
  },
52
53
  "devDependencies": {
53
54
  "@babel/preset-env": "^7.22.9",
54
55
  "@babel/preset-react": "^7.22.5",
55
56
  "@babel/preset-typescript": "^7.22.5",
56
- "@commitlint/cli": "^17.6.7",
57
- "@commitlint/config-conventional": "^17.6.7",
58
- "@gravity-ui/eslint-config": "^2.1.1",
59
- "@gravity-ui/prettier-config": "^1.0.1",
60
- "@gravity-ui/stylelint-config": "^2.0.0",
57
+ "@commitlint/cli": "^18.4.3",
58
+ "@commitlint/config-conventional": "^18.4.3",
59
+ "@gravity-ui/eslint-config": "^3.1.1",
60
+ "@gravity-ui/prettier-config": "^1.1.0",
61
+ "@gravity-ui/stylelint-config": "^4.0.1",
61
62
  "@gravity-ui/tsconfig": "^1.0.0",
62
63
  "@gravity-ui/uikit": "^5.0.0",
63
- "@storybook/addon-a11y": "^7.5.3",
64
- "@storybook/addon-essentials": "^7.5.3",
65
- "@storybook/addons": "^7.5.3",
66
- "@storybook/api": "^7.5.3",
64
+ "@storybook/addon-a11y": "^7.6.7",
65
+ "@storybook/addon-essentials": "^7.6.7",
66
+ "@storybook/addon-viewport": "^7.6.7",
67
+ "@storybook/addons": "^7.6.7",
68
+ "@storybook/api": "^7.6.7",
69
+ "@storybook/blocks": "^7.6.7",
67
70
  "@storybook/preset-scss": "^1.0.3",
68
- "@storybook/react": "^7.5.3",
69
- "@storybook/react-webpack5": "^7.5.3",
70
- "@testing-library/jest-dom": "^5.17.0",
71
- "@testing-library/react": "^14.0.0",
72
- "@testing-library/user-event": "^14.4.3",
73
- "@types/jest": "^29.5.3",
74
- "@types/react": "^18.2.15",
75
- "@types/react-dom": "^18.2.7",
71
+ "@storybook/react": "^7.6.7",
72
+ "@storybook/react-webpack5": "^7.6.7",
73
+ "@storybook/theming": "^7.6.7",
74
+ "@testing-library/jest-dom": "^6.1.6",
75
+ "@testing-library/react": "^14.1.2",
76
+ "@testing-library/user-event": "^14.5.2",
77
+ "@types/jest": "^29.5.11",
78
+ "@types/react": "^18.2.46",
79
+ "@types/react-dom": "^18.2.18",
76
80
  "cross-env": "^7.0.3",
77
- "eslint": "^8.45.0",
78
- "eslint-plugin-testing-library": "^5.11.0",
81
+ "eslint": "^8.56.0",
82
+ "eslint-plugin-testing-library": "^6.2.0",
79
83
  "gulp": "^4.0.2",
80
84
  "gulp-cli": "^2.3.0",
81
85
  "gulp-dart-sass": "^1.1.0",
@@ -87,31 +91,30 @@
87
91
  "jest-transform-css": "^6.0.1",
88
92
  "nano-staged": "^0.8.0",
89
93
  "npm-run-all": "^4.1.5",
90
- "prettier": "^2.8.8",
94
+ "prettier": "^3.1.1",
91
95
  "react": "^18.2.0",
92
96
  "react-dom": "^18.2.0",
93
- "sass": "^1.64.1",
94
- "sass-loader": "^13.3.2",
95
- "storybook": "^7.5.3",
97
+ "rimraf": "5.0.5",
98
+ "sass": "^1.69.7",
99
+ "sass-loader": "^13.3.3",
100
+ "storybook": "^7.6.7",
96
101
  "style-loader": "^3.3.3",
97
102
  "stylelint": "^15.10.2",
98
103
  "ts-jest": "^29.1.1",
99
- "typescript": "^5.1.6"
104
+ "ts-node": "^10.9.2",
105
+ "typescript": "^5.3.3"
100
106
  },
101
107
  "peerDependencies": {
102
108
  "@gravity-ui/uikit": "^5.0.0",
103
109
  "react": "^17.0.0 || ^18.0.0",
104
110
  "react-dom": "^17.0.0 || ^18.0.0"
105
111
  },
106
- "overrides": {
107
- "stylelint": "^15.10.2"
108
- },
109
112
  "nano-staged": {
110
113
  "*.{scss}": [
111
- "stylelint --fix --quiet"
114
+ "stylelint --fix --quiet --report-needless-disables"
112
115
  ],
113
116
  "*.{js,jsx,ts,tsx}": [
114
- "eslint --fix --quiet"
117
+ "eslint --fix --quiet --report-unused-disable-directives"
115
118
  ],
116
119
  "*.{md,json,yml,yaml}": [
117
120
  "prettier --write"