@gravity-ui/date-components 1.1.0 → 1.2.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 (65) 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 +13 -21
  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 +25 -20
  14. package/dist/cjs/components/DateField/hooks/useDateFieldState.js +23 -167
  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 +14 -3
  18. package/dist/cjs/components/DateField/utils.js +172 -3
  19. package/dist/cjs/components/DatePicker/DatePicker.css +6 -0
  20. package/dist/cjs/components/DatePicker/DatePicker.d.ts +2 -2
  21. package/dist/cjs/components/DatePicker/DatePicker.js +8 -48
  22. package/dist/cjs/components/DatePicker/hooks/useDatePickerProps.d.ts +20 -0
  23. package/dist/cjs/components/DatePicker/hooks/useDatePickerProps.js +121 -0
  24. package/dist/cjs/components/DatePicker/hooks/useDatePickerState.d.ts +4 -5
  25. package/dist/cjs/components/DatePicker/hooks/useDatePickerState.js +17 -4
  26. package/dist/cjs/components/DatePicker/i18n/index.js +3 -5
  27. package/dist/cjs/components/DatePicker/index.d.ts +1 -0
  28. package/dist/cjs/components/DatePicker/index.js +4 -16
  29. package/dist/cjs/components/RelativeDateField/RelativeDateField.js +2 -4
  30. package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldProps.js +2 -4
  31. package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldState.js +2 -4
  32. package/dist/cjs/components/RelativeDateField/index.js +4 -17
  33. package/dist/cjs/components/RelativeDatePicker/RelativeDatePicker.css +1 -0
  34. package/dist/cjs/components/RelativeDatePicker/RelativeDatePicker.js +2 -4
  35. package/dist/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.js +32 -43
  36. package/dist/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerState.js +2 -4
  37. package/dist/cjs/components/RelativeDatePicker/i18n/index.js +3 -5
  38. package/dist/cjs/components/RelativeDatePicker/index.js +4 -17
  39. package/dist/cjs/components/hooks/useControlledState.js +2 -4
  40. package/dist/cjs/components/index.js +6 -19
  41. package/dist/cjs/index.js +2 -15
  42. package/dist/esm/components/Calendar/Calendar.css +37 -37
  43. package/dist/esm/components/Calendar/hooks/useCalendarGridProps.js +11 -0
  44. package/dist/esm/components/Calendar/hooks/useRangeCalendarState.js +11 -16
  45. package/dist/esm/components/DateField/DateField.js +1 -11
  46. package/dist/esm/components/DateField/hooks/useDateFieldProps.js +24 -17
  47. package/dist/esm/components/DateField/hooks/useDateFieldState.js +19 -161
  48. package/dist/esm/components/DateField/utils.d.ts +14 -3
  49. package/dist/esm/components/DateField/utils.js +165 -2
  50. package/dist/esm/components/DatePicker/DatePicker.css +6 -0
  51. package/dist/esm/components/DatePicker/DatePicker.d.ts +2 -2
  52. package/dist/esm/components/DatePicker/DatePicker.js +9 -46
  53. package/dist/esm/components/DatePicker/hooks/useDatePickerProps.d.ts +20 -0
  54. package/dist/esm/components/DatePicker/hooks/useDatePickerProps.js +117 -0
  55. package/dist/esm/components/DatePicker/hooks/useDatePickerState.d.ts +4 -5
  56. package/dist/esm/components/DatePicker/hooks/useDatePickerState.js +15 -0
  57. package/dist/esm/components/DatePicker/index.d.ts +1 -0
  58. package/dist/esm/components/DatePicker/index.js +1 -0
  59. package/dist/esm/components/RelativeDatePicker/RelativeDatePicker.css +1 -0
  60. package/dist/esm/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.js +30 -38
  61. package/package.json +37 -33
  62. package/dist/cjs/components/DatePicker/DesktopCalendar.d.ts +0 -17
  63. package/dist/cjs/components/DatePicker/DesktopCalendar.js +0 -65
  64. package/dist/esm/components/DatePicker/DesktopCalendar.d.ts +0 -17
  65. package/dist/esm/components/DatePicker/DesktopCalendar.js +0 -57
@@ -0,0 +1,121 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useDatePickerProps = void 0;
4
+ const tslib_1 = require("tslib");
5
+ const react_1 = tslib_1.__importDefault(require("react"));
6
+ const uikit_1 = require("@gravity-ui/uikit");
7
+ const DateField_1 = require("../../DateField");
8
+ const getButtonSizeForInput_1 = require("../../utils/getButtonSizeForInput");
9
+ const mergeProps_1 = require("../../utils/mergeProps");
10
+ const i18n_1 = require("../i18n");
11
+ function useDatePickerProps(state, _a) {
12
+ var _b;
13
+ var { onFocus, onBlur } = _a, props = tslib_1.__rest(_a, ["onFocus", "onBlur"]);
14
+ const [isActive, setActive] = react_1.default.useState(false);
15
+ const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
16
+ onFocusWithin: onFocus,
17
+ onBlurWithin: onBlur,
18
+ onFocusWithinChange(isFocusWithin) {
19
+ setActive(isFocusWithin);
20
+ if (!isFocusWithin) {
21
+ state.setOpen(false);
22
+ }
23
+ },
24
+ });
25
+ const { inputProps } = (0, DateField_1.useDateFieldProps)(state.dateFieldState, props);
26
+ let error;
27
+ let validationState = props.validationState;
28
+ if (validationState) {
29
+ error = validationState === 'invalid' ? props.errorMessage || true : undefined;
30
+ }
31
+ else {
32
+ validationState = state.dateFieldState.validationState;
33
+ error = validationState === 'invalid';
34
+ }
35
+ const inputRef = react_1.default.useRef(null);
36
+ const handleRef = (0, uikit_1.useForkRef)(inputRef, inputProps.controlRef);
37
+ const calendarRef = react_1.default.useRef(null);
38
+ const calendarButtonRef = react_1.default.useRef(null);
39
+ const groupRef = react_1.default.useRef(null);
40
+ function focusInput() {
41
+ setTimeout(() => {
42
+ var _a;
43
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
44
+ });
45
+ }
46
+ return {
47
+ groupProps: Object.assign(Object.assign({ ref: groupRef, tabIndex: -1, role: 'group' }, focusWithinProps), { style: props.style, 'aria-disabled': state.disabled || undefined, onKeyDown: (e) => {
48
+ if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
49
+ e.preventDefault();
50
+ e.stopPropagation();
51
+ state.setOpen(true);
52
+ }
53
+ } }),
54
+ fieldProps: (0, mergeProps_1.mergeProps)(inputProps, state.dateFieldState.isEmpty && !isActive && props.placeholder
55
+ ? { value: '' }
56
+ : undefined, { controlRef: handleRef, error }),
57
+ calendarButtonProps: {
58
+ ref: calendarButtonRef,
59
+ size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size),
60
+ disabled: state.disabled,
61
+ extraProps: {
62
+ 'aria-label': (0, i18n_1.i18n)('Calendar'),
63
+ 'aria-haspopup': 'dialog',
64
+ 'aria-expanded': state.isOpen,
65
+ },
66
+ view: 'flat-secondary',
67
+ onClick: () => {
68
+ setActive(true);
69
+ state.setOpen(!state.isOpen);
70
+ },
71
+ },
72
+ popupProps: {
73
+ open: state.isOpen,
74
+ onEscapeKeyDown: () => {
75
+ state.setOpen(false);
76
+ focusInput();
77
+ },
78
+ onOutsideClick: (e) => {
79
+ var _a;
80
+ if (e.target !== calendarButtonRef.current) {
81
+ state.setOpen(false);
82
+ }
83
+ if (e.target && ((_a = groupRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
84
+ focusInput();
85
+ }
86
+ },
87
+ // @ts-expect-error focusTrap in popup was introduced in a newer version of uikit
88
+ focusTrap: true,
89
+ },
90
+ calendarProps: {
91
+ ref: calendarRef,
92
+ autoFocus: true,
93
+ size: props.size === 's' ? 'm' : props.size,
94
+ disabled: props.disabled,
95
+ readOnly: props.readOnly,
96
+ onUpdate: (d) => {
97
+ state.setDateValue(d);
98
+ if (!state.hasTime) {
99
+ focusInput();
100
+ }
101
+ },
102
+ defaultFocusedValue: (_b = state.dateValue) !== null && _b !== void 0 ? _b : undefined,
103
+ value: state.dateValue,
104
+ minValue: props.minValue,
105
+ maxValue: props.maxValue,
106
+ isDateUnavailable: props.isDateUnavailable,
107
+ timeZone: props.timeZone,
108
+ },
109
+ timeInputProps: {
110
+ value: state.timeValue,
111
+ onUpdate: state.setTimeValue,
112
+ format: state.timeFormat,
113
+ readOnly: state.readOnly,
114
+ disabled: state.disabled,
115
+ timeZone: props.timeZone,
116
+ hasClear: props.hasClear,
117
+ size: props.size,
118
+ },
119
+ };
120
+ }
121
+ exports.useDatePickerProps = useDatePickerProps;
@@ -1,5 +1,6 @@
1
1
  import type { DateTime } from '@gravity-ui/date-utils';
2
- import type { InputBase, ValueBase } from '../../types';
2
+ import type { DateFieldState } from '../../DateField';
3
+ import type { DateFieldBase } from '../../types';
3
4
  export type Granularity = 'day' | 'hour' | 'minute' | 'second';
4
5
  export interface DatePickerState {
5
6
  /** The currently selected date. */
@@ -36,10 +37,8 @@ export interface DatePickerState {
36
37
  isOpen: boolean;
37
38
  /** Sets whether the calendar popover is open. */
38
39
  setOpen(isOpen: boolean): void;
40
+ dateFieldState: DateFieldState;
39
41
  }
40
- export interface DatePickerStateOptions extends ValueBase<DateTime>, InputBase {
41
- placeholderValue?: DateTime;
42
- timeZone?: string;
43
- format?: string;
42
+ export interface DatePickerStateOptions extends DateFieldBase {
44
43
  }
45
44
  export declare function useDatePickerState(props: DatePickerStateOptions): DatePickerState;
@@ -1,10 +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.useDatePickerState = void 0;
7
- const react_1 = __importDefault(require("react"));
4
+ const tslib_1 = require("tslib");
5
+ const react_1 = tslib_1.__importDefault(require("react"));
6
+ const DateField_1 = require("../../DateField");
8
7
  const utils_1 = require("../../DateField/utils");
9
8
  const useControlledState_1 = require("../../hooks/useControlledState");
10
9
  const dates_1 = require("../../utils/dates");
@@ -81,6 +80,19 @@ function useDatePickerState(props) {
81
80
  setSelectedTime(newValue);
82
81
  }
83
82
  };
83
+ const dateFieldState = (0, DateField_1.useDateFieldState)({
84
+ value: value !== null && value !== void 0 ? value : null,
85
+ onUpdate: setValue,
86
+ disabled,
87
+ readOnly,
88
+ validationState: props.validationState,
89
+ minValue: props.minValue,
90
+ maxValue: props.maxValue,
91
+ isDateUnavailable: props.isDateUnavailable,
92
+ format,
93
+ placeholderValue: props.placeholderValue,
94
+ timeZone: props.timeZone,
95
+ });
84
96
  return {
85
97
  value: value !== null && value !== void 0 ? value : null,
86
98
  setValue,
@@ -101,6 +113,7 @@ function useDatePickerState(props) {
101
113
  }
102
114
  setOpen(newIsOpen);
103
115
  },
116
+ dateFieldState,
104
117
  };
105
118
  }
106
119
  exports.useDatePickerState = useDatePickerState;
@@ -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}date-picker`);
@@ -1,2 +1,3 @@
1
1
  export * from './DatePicker';
2
2
  export * from './hooks/useDatePickerState';
3
+ export * from './hooks/useDatePickerProps';
@@ -1,18 +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("./DatePicker"), exports);
18
- __exportStar(require("./hooks/useDatePickerState"), exports);
3
+ const tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./DatePicker"), exports);
5
+ tslib_1.__exportStar(require("./hooks/useDatePickerState"), exports);
6
+ tslib_1.__exportStar(require("./hooks/useDatePickerProps"), 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.RelativeDateField = 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 uikit_1 = require("@gravity-ui/uikit");
10
8
  const cn_1 = require("../../utils/cn");
11
9
  const Calendar_1 = require("../Calendar");
@@ -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.useRelativeDateFieldProps = 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 useRelativeDateFieldProps(state, props) {
9
7
  const [prevCorrectDate, setPrevCorrectDate] = react_1.default.useState(state.lastCorrectDate);
10
8
  const [focusedDate, setFocusedDate] = react_1.default.useState(state.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.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,6 +1,7 @@
1
1
  .g-date-relative-date-picker {
2
2
  position: relative;
3
3
  display: inline-flex;
4
+ outline: none;
4
5
  }
5
6
  .g-date-relative-date-picker__field {
6
7
  width: 100%;
@@ -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);
@@ -42,7 +29,7 @@ function useRelativeDatePickerProps(state, _a) {
42
29
  onBlurWithin: onBlur,
43
30
  onFocusWithinChange(isFocusWithin) {
44
31
  if (!isFocusWithin) {
45
- state.setActive(isFocusWithin);
32
+ state.setActive(false);
46
33
  }
47
34
  },
48
35
  });
@@ -50,16 +37,12 @@ function useRelativeDatePickerProps(state, _a) {
50
37
  if (!state.isActive && isOpen) {
51
38
  setOpen(false);
52
39
  }
53
- const [prevActive, setPrevActive] = react_1.default.useState(state.isActive);
54
- if (prevActive !== state.isActive) {
55
- setPrevActive(state.isActive);
56
- if (state.isActive && !isOpen) {
57
- setOpen(true);
58
- }
59
- }
60
40
  const commonInputProps = {
61
41
  onFocus: () => {
62
- state.setActive(true);
42
+ if (!state.isActive) {
43
+ state.setActive(true);
44
+ setOpen(true);
45
+ }
63
46
  },
64
47
  };
65
48
  const { inputProps } = (0, DateField_1.useDateFieldProps)(dateFieldState, Object.assign(Object.assign({}, props), { value: undefined, defaultValue: undefined, onUpdate: undefined }));
@@ -68,6 +51,7 @@ function useRelativeDatePickerProps(state, _a) {
68
51
  value: relativeDateState.text,
69
52
  onUpdate: relativeDateState.setText,
70
53
  hasClear: props.hasClear && !relativeDateState.readOnly,
54
+ placeholder: props.placeholder,
71
55
  size: props.size,
72
56
  };
73
57
  let error;
@@ -82,19 +66,33 @@ function useRelativeDatePickerProps(state, _a) {
82
66
  : dateFieldState.validationState;
83
67
  error = validationState === 'invalid';
84
68
  }
85
- const wasActiveBeforeClickRef = react_1.default.useRef(state.isActive);
86
69
  const inputRef = react_1.default.useRef(null);
87
70
  const handleRef = (0, uikit_1.useForkRef)(inputRef, mode === 'relative' ? relativeDateProps.controlRef : inputProps.controlRef);
88
71
  const calendarRef = react_1.default.useRef(null);
72
+ function focusCalendar() {
73
+ setTimeout(() => {
74
+ var _a;
75
+ (_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.focus();
76
+ });
77
+ }
78
+ function focusInput() {
79
+ setTimeout(() => {
80
+ var _a;
81
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
82
+ });
83
+ }
89
84
  return {
90
- groupProps: Object.assign(Object.assign({ role: 'group' }, focusWithinProps), { onKeyDown: (e) => {
85
+ groupProps: Object.assign(Object.assign({ tabIndex: -1, role: 'group' }, focusWithinProps), { onKeyDown: (e) => {
91
86
  if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
92
87
  e.preventDefault();
93
88
  e.stopPropagation();
94
89
  setOpen(true);
90
+ focusCalendar();
95
91
  }
96
92
  } }),
97
- fieldProps: (0, mergeProps_1.mergeProps)(commonInputProps, mode === 'relative' ? relativeDateProps : inputProps, { controlRef: handleRef, error }),
93
+ fieldProps: (0, mergeProps_1.mergeProps)(commonInputProps, mode === 'relative' ? relativeDateProps : inputProps, mode === 'absolute' && dateFieldState.isEmpty && !state.isActive && props.placeholder
94
+ ? { value: '' }
95
+ : undefined, { controlRef: handleRef, error }),
98
96
  modeSwitcherProps: {
99
97
  size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size),
100
98
  disabled: state.readOnly || state.disabled,
@@ -115,7 +113,7 @@ function useRelativeDatePickerProps(state, _a) {
115
113
  else if (relativeDateState.parsedDate) {
116
114
  setFocusedDate(relativeDateState.parsedDate);
117
115
  }
118
- setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
116
+ focusInput();
119
117
  },
120
118
  },
121
119
  calendarButtonProps: {
@@ -127,29 +125,20 @@ function useRelativeDatePickerProps(state, _a) {
127
125
  'aria-expanded': isOpen,
128
126
  },
129
127
  view: 'flat-secondary',
130
- onFocus: () => {
131
- wasActiveBeforeClickRef.current = state.isActive;
132
- },
133
128
  onClick: () => {
134
129
  state.setActive(true);
135
- if (wasActiveBeforeClickRef.current) {
136
- setOpen(!isOpen);
137
- if (!isOpen) {
138
- setTimeout(() => {
139
- var _a;
140
- (_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.focus();
141
- });
142
- }
130
+ setOpen(!isOpen);
131
+ if (!isOpen) {
132
+ focusCalendar();
143
133
  }
144
- wasActiveBeforeClickRef.current = state.isActive;
145
134
  },
146
135
  },
147
136
  popupProps: {
148
137
  open: isOpen,
149
138
  onEscapeKeyDown: () => {
150
139
  setOpen(false);
140
+ focusInput();
151
141
  },
152
- restoreFocus: true,
153
142
  },
154
143
  calendarProps: {
155
144
  ref: calendarRef,
@@ -160,7 +149,7 @@ function useRelativeDatePickerProps(state, _a) {
160
149
  datePickerState.setDateValue(v);
161
150
  if (!state.datePickerState.hasTime) {
162
151
  setOpen(false);
163
- setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
152
+ focusInput();
164
153
  }
165
154
  },
166
155
  focusedValue: focusedDate,
@@ -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);