@ozen-ui/kit 0.47.2 → 0.49.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 (148) hide show
  1. package/DatePicker/package.json +5 -0
  2. package/__inner__/cjs/components/Alert/Alert.css +11 -12
  3. package/__inner__/cjs/components/Alert/Alert.d.ts +13 -39
  4. package/__inner__/cjs/components/Alert/Alert.js +14 -14
  5. package/__inner__/cjs/components/Alert/constants.d.ts +1 -1
  6. package/__inner__/cjs/components/Alert/constants.js +2 -2
  7. package/__inner__/cjs/components/Alert/index.d.ts +1 -0
  8. package/__inner__/cjs/components/Alert/index.js +1 -0
  9. package/__inner__/cjs/components/Alert/types.d.ts +46 -0
  10. package/__inner__/cjs/components/Alert/types.js +10 -0
  11. package/__inner__/cjs/components/Autocomplete/Autocomplete.js +57 -63
  12. package/__inner__/cjs/components/Autocomplete/helper.d.ts +6 -0
  13. package/__inner__/cjs/components/Autocomplete/types.d.ts +1 -1
  14. package/__inner__/cjs/components/Calendar/types.d.ts +1 -1
  15. package/__inner__/cjs/components/DatePicker/DatePicker.css +11 -0
  16. package/__inner__/cjs/components/DatePicker/DatePicker.d.ts +39 -0
  17. package/__inner__/cjs/components/DatePicker/DatePicker.js +160 -0
  18. package/__inner__/cjs/components/DatePicker/components/DateInput/DateInput.d.ts +6 -0
  19. package/__inner__/cjs/components/DatePicker/components/DateInput/DateInput.js +14 -0
  20. package/__inner__/cjs/components/DatePicker/components/DateInput/index.d.ts +1 -0
  21. package/__inner__/cjs/components/DatePicker/components/DateInput/index.js +4 -0
  22. package/__inner__/cjs/components/DatePicker/components/DateInput/utils/dateInputMask/dateInputMask.d.ts +2 -0
  23. package/__inner__/cjs/components/DatePicker/components/DateInput/utils/dateInputMask/dateInputMask.js +20 -0
  24. package/__inner__/cjs/components/DatePicker/components/DateInput/utils/dateInputMask/index.d.ts +1 -0
  25. package/__inner__/cjs/components/DatePicker/components/DateInput/utils/dateInputMask/index.js +4 -0
  26. package/__inner__/cjs/components/DatePicker/components/DateInput/utils/index.d.ts +1 -0
  27. package/__inner__/cjs/components/DatePicker/components/DateInput/utils/index.js +4 -0
  28. package/__inner__/cjs/components/DatePicker/components/DatePickerRenderRight/DatePickerRenderRight.d.ts +8 -0
  29. package/__inner__/cjs/components/DatePicker/components/DatePickerRenderRight/DatePickerRenderRight.js +26 -0
  30. package/__inner__/cjs/components/DatePicker/components/DatePickerRenderRight/index.d.ts +1 -0
  31. package/__inner__/cjs/components/DatePicker/components/DatePickerRenderRight/index.js +4 -0
  32. package/__inner__/cjs/components/DatePicker/components/index.d.ts +2 -0
  33. package/__inner__/cjs/components/DatePicker/components/index.js +5 -0
  34. package/__inner__/cjs/components/DatePicker/constants.d.ts +1 -0
  35. package/__inner__/cjs/components/DatePicker/constants.js +4 -0
  36. package/__inner__/cjs/components/DatePicker/index.d.ts +2 -0
  37. package/__inner__/cjs/components/DatePicker/index.js +5 -0
  38. package/__inner__/cjs/components/DatePicker/types.d.ts +52 -0
  39. package/__inner__/cjs/components/DatePicker/types.js +2 -0
  40. package/__inner__/cjs/components/DatePicker/utils/formatDateToString/formatDateToString.d.ts +1 -0
  41. package/__inner__/cjs/components/DatePicker/utils/formatDateToString/formatDateToString.js +13 -0
  42. package/__inner__/cjs/components/DatePicker/utils/formatDateToString/index.d.ts +1 -0
  43. package/__inner__/cjs/components/DatePicker/utils/formatDateToString/index.js +4 -0
  44. package/__inner__/cjs/components/DatePicker/utils/formatStringToDate/formatStringToDate.d.ts +1 -0
  45. package/__inner__/cjs/components/DatePicker/utils/formatStringToDate/formatStringToDate.js +13 -0
  46. package/__inner__/cjs/components/DatePicker/utils/formatStringToDate/index.d.ts +1 -0
  47. package/__inner__/cjs/components/DatePicker/utils/formatStringToDate/index.js +4 -0
  48. package/__inner__/cjs/components/DatePicker/utils/index.d.ts +5 -0
  49. package/__inner__/cjs/components/DatePicker/utils/index.js +8 -0
  50. package/__inner__/cjs/components/DatePicker/utils/isInExclude/index.d.ts +1 -0
  51. package/__inner__/cjs/components/DatePicker/utils/isInExclude/index.js +4 -0
  52. package/__inner__/cjs/components/DatePicker/utils/isInExclude/isInExclude.d.ts +2 -0
  53. package/__inner__/cjs/components/DatePicker/utils/isInExclude/isInExclude.js +14 -0
  54. package/__inner__/cjs/components/DatePicker/utils/isOutOfRange/index.d.ts +1 -0
  55. package/__inner__/cjs/components/DatePicker/utils/isOutOfRange/index.js +4 -0
  56. package/__inner__/cjs/components/DatePicker/utils/isOutOfRange/isOutOfRange.d.ts +2 -0
  57. package/__inner__/cjs/components/DatePicker/utils/isOutOfRange/isOutOfRange.js +11 -0
  58. package/__inner__/cjs/components/DatePicker/utils/matchCalendarSizeToFormElement/index.d.ts +1 -0
  59. package/__inner__/cjs/components/DatePicker/utils/matchCalendarSizeToFormElement/index.js +4 -0
  60. package/__inner__/cjs/components/DatePicker/utils/matchCalendarSizeToFormElement/matchCalendarSizeToFormElement.d.ts +5 -0
  61. package/__inner__/cjs/components/DatePicker/utils/matchCalendarSizeToFormElement/matchCalendarSizeToFormElement.js +10 -0
  62. package/__inner__/cjs/components/Input/Input.css +0 -1
  63. package/__inner__/cjs/components/Input/Input.js +1 -1
  64. package/__inner__/cjs/components/InputNumber/utils.d.ts +1 -1
  65. package/__inner__/cjs/components/List/components/ListItemText/ListItemText.d.ts +5 -5
  66. package/__inner__/cjs/components/Slider/utils/getPositionOnRail.d.ts +1 -1
  67. package/__inner__/cjs/components/Snackbar/components/SnackbarItem/SnackbarItem.js +1 -1
  68. package/__inner__/cjs/components/ThemeProvider/types.d.ts +2 -0
  69. package/__inner__/cjs/components/Tooltip/Tooltip.css +5 -6
  70. package/__inner__/cjs/components/Tooltip/Tooltip.js +6 -2
  71. package/__inner__/cjs/components/Tooltip/constants.d.ts +1 -1
  72. package/__inner__/cjs/components/Tooltip/constants.js +2 -2
  73. package/__inner__/cjs/components/Tooltip/types.d.ts +11 -3
  74. package/__inner__/cjs/locale/locale.js +12 -0
  75. package/__inner__/esm/components/Alert/Alert.css +11 -12
  76. package/__inner__/esm/components/Alert/Alert.d.ts +13 -39
  77. package/__inner__/esm/components/Alert/Alert.js +14 -14
  78. package/__inner__/esm/components/Alert/constants.d.ts +1 -1
  79. package/__inner__/esm/components/Alert/constants.js +1 -1
  80. package/__inner__/esm/components/Alert/index.d.ts +1 -0
  81. package/__inner__/esm/components/Alert/index.js +1 -0
  82. package/__inner__/esm/components/Alert/types.d.ts +46 -0
  83. package/__inner__/esm/components/Alert/types.js +7 -0
  84. package/__inner__/esm/components/Autocomplete/Autocomplete.js +57 -63
  85. package/__inner__/esm/components/Autocomplete/helper.d.ts +6 -0
  86. package/__inner__/esm/components/Autocomplete/types.d.ts +1 -1
  87. package/__inner__/esm/components/Calendar/types.d.ts +1 -1
  88. package/__inner__/esm/components/DatePicker/DatePicker.css +11 -0
  89. package/__inner__/esm/components/DatePicker/DatePicker.d.ts +39 -0
  90. package/__inner__/esm/components/DatePicker/DatePicker.js +157 -0
  91. package/__inner__/esm/components/DatePicker/components/DateInput/DateInput.d.ts +6 -0
  92. package/__inner__/esm/components/DatePicker/components/DateInput/DateInput.js +11 -0
  93. package/__inner__/esm/components/DatePicker/components/DateInput/index.d.ts +1 -0
  94. package/__inner__/esm/components/DatePicker/components/DateInput/index.js +1 -0
  95. package/__inner__/esm/components/DatePicker/components/DateInput/utils/dateInputMask/dateInputMask.d.ts +2 -0
  96. package/__inner__/esm/components/DatePicker/components/DateInput/utils/dateInputMask/dateInputMask.js +15 -0
  97. package/__inner__/esm/components/DatePicker/components/DateInput/utils/dateInputMask/index.d.ts +1 -0
  98. package/__inner__/esm/components/DatePicker/components/DateInput/utils/dateInputMask/index.js +1 -0
  99. package/__inner__/esm/components/DatePicker/components/DateInput/utils/index.d.ts +1 -0
  100. package/__inner__/esm/components/DatePicker/components/DateInput/utils/index.js +1 -0
  101. package/__inner__/esm/components/DatePicker/components/DatePickerRenderRight/DatePickerRenderRight.d.ts +8 -0
  102. package/__inner__/esm/components/DatePicker/components/DatePickerRenderRight/DatePickerRenderRight.js +22 -0
  103. package/__inner__/esm/components/DatePicker/components/DatePickerRenderRight/index.d.ts +1 -0
  104. package/__inner__/esm/components/DatePicker/components/DatePickerRenderRight/index.js +1 -0
  105. package/__inner__/esm/components/DatePicker/components/index.d.ts +2 -0
  106. package/__inner__/esm/components/DatePicker/components/index.js +2 -0
  107. package/__inner__/esm/components/DatePicker/constants.d.ts +1 -0
  108. package/__inner__/esm/components/DatePicker/constants.js +1 -0
  109. package/__inner__/esm/components/DatePicker/index.d.ts +2 -0
  110. package/__inner__/esm/components/DatePicker/index.js +2 -0
  111. package/__inner__/esm/components/DatePicker/types.d.ts +52 -0
  112. package/__inner__/esm/components/DatePicker/types.js +1 -0
  113. package/__inner__/esm/components/DatePicker/utils/formatDateToString/formatDateToString.d.ts +1 -0
  114. package/__inner__/esm/components/DatePicker/utils/formatDateToString/formatDateToString.js +9 -0
  115. package/__inner__/esm/components/DatePicker/utils/formatDateToString/index.d.ts +1 -0
  116. package/__inner__/esm/components/DatePicker/utils/formatDateToString/index.js +1 -0
  117. package/__inner__/esm/components/DatePicker/utils/formatStringToDate/formatStringToDate.d.ts +1 -0
  118. package/__inner__/esm/components/DatePicker/utils/formatStringToDate/formatStringToDate.js +9 -0
  119. package/__inner__/esm/components/DatePicker/utils/formatStringToDate/index.d.ts +1 -0
  120. package/__inner__/esm/components/DatePicker/utils/formatStringToDate/index.js +1 -0
  121. package/__inner__/esm/components/DatePicker/utils/index.d.ts +5 -0
  122. package/__inner__/esm/components/DatePicker/utils/index.js +5 -0
  123. package/__inner__/esm/components/DatePicker/utils/isInExclude/index.d.ts +1 -0
  124. package/__inner__/esm/components/DatePicker/utils/isInExclude/index.js +1 -0
  125. package/__inner__/esm/components/DatePicker/utils/isInExclude/isInExclude.d.ts +2 -0
  126. package/__inner__/esm/components/DatePicker/utils/isInExclude/isInExclude.js +10 -0
  127. package/__inner__/esm/components/DatePicker/utils/isOutOfRange/index.d.ts +1 -0
  128. package/__inner__/esm/components/DatePicker/utils/isOutOfRange/index.js +1 -0
  129. package/__inner__/esm/components/DatePicker/utils/isOutOfRange/isOutOfRange.d.ts +2 -0
  130. package/__inner__/esm/components/DatePicker/utils/isOutOfRange/isOutOfRange.js +7 -0
  131. package/__inner__/esm/components/DatePicker/utils/matchCalendarSizeToFormElement/index.d.ts +1 -0
  132. package/__inner__/esm/components/DatePicker/utils/matchCalendarSizeToFormElement/index.js +1 -0
  133. package/__inner__/esm/components/DatePicker/utils/matchCalendarSizeToFormElement/matchCalendarSizeToFormElement.d.ts +5 -0
  134. package/__inner__/esm/components/DatePicker/utils/matchCalendarSizeToFormElement/matchCalendarSizeToFormElement.js +7 -0
  135. package/__inner__/esm/components/Input/Input.css +0 -1
  136. package/__inner__/esm/components/Input/Input.js +1 -1
  137. package/__inner__/esm/components/InputNumber/utils.d.ts +1 -1
  138. package/__inner__/esm/components/List/components/ListItemText/ListItemText.d.ts +5 -5
  139. package/__inner__/esm/components/Slider/utils/getPositionOnRail.d.ts +1 -1
  140. package/__inner__/esm/components/Snackbar/components/SnackbarItem/SnackbarItem.js +1 -1
  141. package/__inner__/esm/components/ThemeProvider/types.d.ts +2 -0
  142. package/__inner__/esm/components/Tooltip/Tooltip.css +5 -6
  143. package/__inner__/esm/components/Tooltip/Tooltip.js +7 -3
  144. package/__inner__/esm/components/Tooltip/constants.d.ts +1 -1
  145. package/__inner__/esm/components/Tooltip/constants.js +1 -1
  146. package/__inner__/esm/components/Tooltip/types.d.ts +11 -3
  147. package/__inner__/esm/locale/locale.js +12 -0
  148. package/package.json +4 -4
@@ -80,6 +80,9 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
80
80
  } & {
81
81
  'data-testid'?: string | undefined;
82
82
  }) | undefined;
83
+ bodyProps?: (Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
84
+ ref?: ((instance: HTMLLabelElement | null) => void) | import("react").RefObject<HTMLLabelElement> | null | undefined;
85
+ }) | undefined;
83
86
  hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
84
87
  } & {
85
88
  open?: boolean | undefined;
@@ -177,6 +180,9 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
177
180
  } & {
178
181
  'data-testid'?: string | undefined;
179
182
  }) | undefined;
183
+ bodyProps?: (Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
184
+ ref?: ((instance: HTMLLabelElement | null) => void) | import("react").RefObject<HTMLLabelElement> | null | undefined;
185
+ }) | undefined;
180
186
  hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
181
187
  } & {
182
188
  open?: undefined;
@@ -31,7 +31,7 @@ type AutocompleteOpenUncontrolledProps = {
31
31
  /** Состояние открытие по умолчанию (неконтролируемый компонент) */
32
32
  defaultOpen?: boolean;
33
33
  };
34
- type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'hintProps' | 'onKeyDown'>;
34
+ type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'hintProps' | 'bodyProps' | 'onKeyDown'>;
35
35
  type AutocompleteDataListProps = Partial<Omit<DataListProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
36
36
  export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
37
37
  /** Список вариантов выбора (опции) */
@@ -6,7 +6,7 @@ import type { CALENDAR_DEFAULT_AS } from './constants';
6
6
  export declare const calendarStepVariant: readonly ["days", "months", "years"];
7
7
  export declare const calendarSizeVariant: readonly ["s", "m", "l"];
8
8
  export type CalendarStepVariant = (typeof calendarStepVariant)[number];
9
- export type CalendarOnChange = (date: Date) => void;
9
+ export type CalendarOnChange = (date: Date | null) => void;
10
10
  export type CalendarOnOffsetDateChange = (date: Date) => void;
11
11
  export type CalendarSizeVariant = (typeof calendarSizeVariant)[number];
12
12
  export type CalendarExclude = DPExcludeConfig;
@@ -0,0 +1,11 @@
1
+ .DatePicker-RenderRight {
2
+ display: flex;
3
+ gap: var(--spacing-2xs);
4
+ }
5
+ .DatePicker-ClearButton {
6
+ visibility: hidden;
7
+ transition: visibility var(--transition-default);
8
+ }
9
+ .DatePicker-ClearButton_visibility {
10
+ visibility: visible;
11
+ }
@@ -0,0 +1,39 @@
1
+ import './DatePicker.css';
2
+ import React from 'react';
3
+ import type { CalendarOnChange } from '../Calendar';
4
+ export declare const cnDatePicker: import("@bem-react/classname").ClassNameFormatter;
5
+ export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
6
+ value?: Date | null | undefined;
7
+ defaultValue?: Date | null | undefined;
8
+ onChange?: CalendarOnChange | undefined;
9
+ onInputChange?: import("./types").DatePickerOnInputChange | undefined;
10
+ onClose?: (() => void) | undefined;
11
+ onOpen?: (() => void) | undefined;
12
+ calendarProps?: import("../Calendar").CalendarBaseProps | undefined;
13
+ popoverProps?: import("../Popover").PopoverBaseProps | undefined;
14
+ clearText?: string | undefined;
15
+ disableClearButton?: boolean | undefined;
16
+ onError?: import("./types").DatePickerPropOnError | undefined;
17
+ } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
18
+ ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
19
+ }, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
20
+ open?: boolean | undefined;
21
+ defaultOpen?: undefined;
22
+ }, "ref"> | Omit<{
23
+ value?: Date | null | undefined;
24
+ defaultValue?: Date | null | undefined;
25
+ onChange?: CalendarOnChange | undefined;
26
+ onInputChange?: import("./types").DatePickerOnInputChange | undefined;
27
+ onClose?: (() => void) | undefined;
28
+ onOpen?: (() => void) | undefined;
29
+ calendarProps?: import("../Calendar").CalendarBaseProps | undefined;
30
+ popoverProps?: import("../Popover").PopoverBaseProps | undefined;
31
+ clearText?: string | undefined;
32
+ disableClearButton?: boolean | undefined;
33
+ onError?: import("./types").DatePickerPropOnError | undefined;
34
+ } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
35
+ ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
36
+ }, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
37
+ open?: undefined;
38
+ defaultOpen?: boolean | undefined;
39
+ }, "ref">) & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,157 @@
1
+ import { __assign, __read, __rest } from "tslib";
2
+ import './DatePicker.css';
3
+ import React, { forwardRef, useEffect, useRef } from 'react';
4
+ import { useControlled } from '../../hooks/useControlled';
5
+ import { useThemeProps } from '../../hooks/useThemeProps';
6
+ import { cn } from '../../utils/classname';
7
+ import { getPaperSizeToFormElement } from '../../utils/getPaperSizeToFormElement';
8
+ import { isKeys } from '../../utils/isKeys';
9
+ import { Calendar } from '../Calendar';
10
+ import { Paper } from '../Paper';
11
+ import { Popover } from '../Popover';
12
+ import { DateInput, DatePickerRenderRight } from './components';
13
+ import { isCompleted } from './components/DateInput/utils';
14
+ import { DATE_PICKER_DEFAULT_SIZE } from './constants';
15
+ import { formatDateToString, formatStringToDate, isInExclude, isOutOfRange, matchCalendarSizeToFormElement, } from './utils';
16
+ export var cnDatePicker = cn('DatePicker');
17
+ export var DatePicker = forwardRef(function (inProps, ref) {
18
+ var props = useThemeProps({
19
+ props: inProps,
20
+ name: 'DatePicker',
21
+ });
22
+ var _a = props.size, size = _a === void 0 ? DATE_PICKER_DEFAULT_SIZE : _a, label = props.label, error = props.error, required = props.required, fullWidth = props.fullWidth, placeholder = props.placeholder, hint = props.hint, valueProp = props.value, defaultValue = props.defaultValue, openProp = props.open, onCloseProp = props.onClose, onOpenProp = props.onOpen, onInputChange = props.onInputChange, clearText = props.clearText, defaultOpen = props.defaultOpen, disabled = props.disabled, minDate = props.minDate, maxDate = props.maxDate, exclude = props.exclude, offsetDate = props.offsetDate, inputProps = props.inputProps, calendarProps = props.calendarProps, popoverProps = props.popoverProps, renderRight = props.renderRight, disableClearButton = props.disableClearButton, onChange = props.onChange, onKeyDown = props.onKeyDown, className = props.className, autoFocus = props.autoFocus, onError = props.onError, other = __rest(props, ["size", "label", "error", "required", "fullWidth", "placeholder", "hint", "value", "defaultValue", "open", "onClose", "onOpen", "onInputChange", "clearText", "defaultOpen", "disabled", "minDate", "maxDate", "exclude", "offsetDate", "inputProps", "calendarProps", "popoverProps", "renderRight", "disableClearButton", "onChange", "onKeyDown", "className", "autoFocus", "onError"]);
23
+ var anchorRef = useRef(null);
24
+ var lastValidDate = useRef('');
25
+ var _b = __read(useControlled({
26
+ value: undefined,
27
+ defaultValue: '',
28
+ name: 'DatePicker',
29
+ state: 'inputValue',
30
+ }), 2), inputValue = _b[0], setInputValue = _b[1];
31
+ var _c = __read(useControlled({
32
+ value: openProp,
33
+ defaultValue: defaultOpen,
34
+ name: 'DatePicker',
35
+ state: 'open',
36
+ }), 2), open = _c[0], setOpen = _c[1];
37
+ var _d = __read(useControlled({
38
+ value: valueProp,
39
+ defaultValue: defaultValue,
40
+ name: 'DatePicker',
41
+ state: 'value',
42
+ }), 2), value = _d[0], setValue = _d[1];
43
+ /** Соотношение размера календаря к размеру элемента контроля */
44
+ var calendarSize = matchCalendarSizeToFormElement[size];
45
+ /** Вычисление border-radius по размеру компонента */
46
+ var radius = getPaperSizeToFormElement(size);
47
+ var callOnChange = function (value) {
48
+ var formattedDate = formatStringToDate(value);
49
+ setValue(formattedDate);
50
+ onChange === null || onChange === void 0 ? void 0 : onChange(formattedDate);
51
+ lastValidDate.current = value;
52
+ };
53
+ var changeInputValue = function (e, value) {
54
+ setInputValue(value);
55
+ onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e, value);
56
+ if (isCompleted(value) || value === '')
57
+ callOnChange(value);
58
+ };
59
+ /** Эффект – автофокусировка в текстовом поле */
60
+ useEffect(function () {
61
+ var _a;
62
+ if (autoFocus)
63
+ (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
64
+ }, [autoFocus]);
65
+ /** Эффект – синхронизируем значение текстового поля со значением в списке */
66
+ useEffect(function () {
67
+ var formattedDate = formatDateToString(value);
68
+ if (formattedDate !== inputValue) {
69
+ setInputValue(formattedDate);
70
+ onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, formattedDate);
71
+ lastValidDate.current = formattedDate;
72
+ }
73
+ }, [value]);
74
+ /** Эффект для обработки ошибок */
75
+ useEffect(function () {
76
+ if (isInExclude({ exclude: exclude, value: value })) {
77
+ onError === null || onError === void 0 ? void 0 : onError({
78
+ type: 'inExclude',
79
+ inputValue: inputValue,
80
+ value: value,
81
+ });
82
+ }
83
+ if (isOutOfRange({ minDate: minDate, maxDate: maxDate, value: value })) {
84
+ onError === null || onError === void 0 ? void 0 : onError({
85
+ type: 'outOfRange',
86
+ inputValue: inputValue,
87
+ value: value,
88
+ });
89
+ }
90
+ }, [value, inputValue, onError, minDate, maxDate, exclude]);
91
+ /** Закрытие */
92
+ var handleClose = function () {
93
+ setOpen(false);
94
+ onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
95
+ };
96
+ /** Открытие */
97
+ var handleOpen = function () {
98
+ setOpen(true);
99
+ onOpenProp === null || onOpenProp === void 0 ? void 0 : onOpenProp();
100
+ };
101
+ /** Переключатель открытия и закрытия */
102
+ var handleToggle = function () {
103
+ if (disabled)
104
+ return;
105
+ if (open)
106
+ handleClose();
107
+ else
108
+ handleOpen();
109
+ };
110
+ /** Открытие списка по клику на текстовом поле */
111
+ var handleClickOnInput = function (e) {
112
+ var _a;
113
+ handleToggle();
114
+ (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
115
+ };
116
+ /** Управление элементом контроля через клавиатуру */
117
+ var handleKeyDown = function (event) {
118
+ if (isKeys(event, ['ArrowDown', 'ArrowUp']) && !open) {
119
+ event.preventDefault();
120
+ handleToggle();
121
+ }
122
+ onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
123
+ };
124
+ /** Актуализация значения текстового поля после его покидания */
125
+ var handleBlur = function (e) {
126
+ var _a;
127
+ (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
128
+ if (!inputValue)
129
+ return;
130
+ if (!isCompleted(inputValue))
131
+ changeInputValue(null, lastValidDate.current);
132
+ };
133
+ /** Очистка поля */
134
+ var handleClear = function () {
135
+ changeInputValue(null, '');
136
+ };
137
+ /** Событие ввода значения в текстовом поле */
138
+ var handleChangeInput = function (e) {
139
+ var value = e.target.value;
140
+ changeInputValue(e, value);
141
+ };
142
+ /** Событие выбора значения из календаря */
143
+ var handleChangeCalendar = function (date) {
144
+ var formattedDate = formatDateToString(date);
145
+ changeInputValue(null, formattedDate);
146
+ handleClose();
147
+ };
148
+ /** Предотвращаем переход фокуса с текстового поля на интерактивные элементы календаря */
149
+ var handleMouseDownCalendar = function (e) {
150
+ e.preventDefault();
151
+ };
152
+ return (React.createElement(React.Fragment, null,
153
+ React.createElement(DateInput, __assign({ size: size, hint: hint, error: error, label: label, required: required, disabled: disabled, fullWidth: fullWidth, placeholder: placeholder }, other, { renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, onClear: handleClear, clearText: clearText, hasValue: !!inputValue, renderRight: renderRight, disableClearButton: disableClearButton }), value: inputValue, inputProps: __assign(__assign({}, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput, onInput: handleChangeInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: cnDatePicker('', [className]), onKeyDown: handleKeyDown, ref: ref })),
154
+ React.createElement(Popover, __assign({ as: Paper, open: open, offset: [0, 4], radius: radius, anchorRef: anchorRef, onClose: handleClose, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true }, popoverProps),
155
+ React.createElement(Calendar, __assign({ minDate: minDate, maxDate: maxDate, exclude: exclude, size: calendarSize, offsetDate: offsetDate, onMouseDown: handleMouseDownCalendar }, calendarProps, { value: value || null, onChange: handleChangeCalendar })))));
156
+ });
157
+ DatePicker.displayName = 'DatePicker';
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import type { InputProps } from '../../../Input';
3
+ export declare const DateInput: React.ForwardRefExoticComponent<Omit<Omit<InputProps, "value" | "defaultValue"> & {
4
+ value?: string | undefined;
5
+ defaultValue?: string | undefined;
6
+ }, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,11 @@
1
+ import { __assign, __rest } from "tslib";
2
+ import React, { forwardRef } from 'react';
3
+ import { CalendarIcon } from '@ozen-ui/icons';
4
+ import { useMultiRef } from '../../../../hooks/useMultiRef';
5
+ import { Input } from '../../../Input';
6
+ import { dateInputMask } from './utils';
7
+ export var DateInput = forwardRef(function (_a, ref) {
8
+ var valueProp = _a.value, defaultValue = _a.defaultValue, other = __rest(_a, ["value", "defaultValue"]);
9
+ return (React.createElement(Input, __assign({ renderRight: CalendarIcon, value: dateInputMask(valueProp), defaultValue: dateInputMask(defaultValue) }, other, { ref: useMultiRef([ref]) })));
10
+ });
11
+ DateInput.displayName = 'DateInput';
@@ -0,0 +1 @@
1
+ export * from './DateInput';
@@ -0,0 +1 @@
1
+ export * from './DateInput';
@@ -0,0 +1,2 @@
1
+ export declare const isCompleted: (value: string) => boolean;
2
+ export declare const dateInputMask: (value: string | undefined) => string | undefined;
@@ -0,0 +1,15 @@
1
+ export var isCompleted = function (value) { return value.length === 10; };
2
+ export var dateInputMask = function (value) {
3
+ if (!value) {
4
+ return value;
5
+ }
6
+ var newValue = value.replace(/[^0-9.]/g, ''); // Запрещаем ввод, кроме цифр и точек
7
+ newValue = newValue.replace(/\.\.+/g, '..'); // Удаляем лишние точки
8
+ newValue = newValue.replace(/^(\d)\.$/g, '0$1.'); // Добавляем 0 в D.
9
+ newValue = newValue.replace(/^(\d\d)(\d)$/g, '$1.$2'); // Добавляем точку в DD.M
10
+ newValue = newValue.replace(/^(\d\d)\.(\d)\.$/g, '$1.0$2.'); // Добавляем 0 в DD.M.
11
+ newValue = newValue.replace(/^(\d\d\.\d\d)(\d)$/g, '$1.$2'); // Добавляем точку в DD.MM.Y
12
+ if (newValue.length > 10)
13
+ newValue = newValue.slice(0, 10); // Ограничиваем длину
14
+ return newValue;
15
+ };
@@ -0,0 +1 @@
1
+ export * from './dateInputMask';
@@ -0,0 +1 @@
1
+ export * from './dateInputMask';
@@ -0,0 +1,8 @@
1
+ import type { FC, MouseEvent } from 'react';
2
+ import type { DatePickerProps } from '../../index';
3
+ type AutocompleteRenderRightProps = {
4
+ onClear: (e: MouseEvent<HTMLElement>) => void;
5
+ hasValue: boolean;
6
+ } & Pick<DatePickerProps, 'clearText' | 'renderRight' | 'size' | 'open' | 'disableClearButton'>;
7
+ export declare const DatePickerRenderRight: FC<AutocompleteRenderRightProps>;
8
+ export {};
@@ -0,0 +1,22 @@
1
+ import { __read } from "tslib";
2
+ import React from 'react';
3
+ import { CalendarIcon, CrossIcon } from '@ozen-ui/icons';
4
+ import { useFieldControl } from '../../../FieldControl';
5
+ import { FieldIcon } from '../../../FieldIcon';
6
+ import { IconButton } from '../../../IconButtonNext';
7
+ import { cnDatePicker } from '../../index';
8
+ export var DatePickerRenderRight = function (_a) {
9
+ var disableClearButton = _a.disableClearButton, renderRight = _a.renderRight, clearText = _a.clearText, hasValue = _a.hasValue, onClear = _a.onClear, open = _a.open, size = _a.size;
10
+ var _b = __read(useFieldControl(), 1), _c = _b[0], focused = _c.focused, hovered = _c.hovered;
11
+ var isVisibleClearButton = !!(hovered || open || focused) && hasValue;
12
+ var handleClear = function (e) {
13
+ e.preventDefault();
14
+ onClear === null || onClear === void 0 ? void 0 : onClear(e);
15
+ };
16
+ return (React.createElement("div", { className: cnDatePicker('RenderRight') },
17
+ !disableClearButton && (React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, icon: CrossIcon, title: clearText, variant: "function", onClick: handleClear, "aria-label": clearText, className: cnDatePicker('ClearButton', {
18
+ visibility: isVisibleClearButton,
19
+ }), compressed: true })),
20
+ React.createElement(FieldIcon, { icon: renderRight }),
21
+ React.createElement(FieldIcon, { icon: CalendarIcon, size: size })));
22
+ };
@@ -0,0 +1 @@
1
+ export * from './DatePickerRenderRight';
@@ -0,0 +1 @@
1
+ export * from './DatePickerRenderRight';
@@ -0,0 +1,2 @@
1
+ export * from './DateInput';
2
+ export * from './DatePickerRenderRight';
@@ -0,0 +1,2 @@
1
+ export * from './DateInput';
2
+ export * from './DatePickerRenderRight';
@@ -0,0 +1 @@
1
+ export declare const DATE_PICKER_DEFAULT_SIZE = "m";
@@ -0,0 +1 @@
1
+ export var DATE_PICKER_DEFAULT_SIZE = 'm';
@@ -0,0 +1,2 @@
1
+ export * from './DatePicker';
2
+ export * from './types';
@@ -0,0 +1,2 @@
1
+ export * from './DatePicker';
2
+ export * from './types';
@@ -0,0 +1,52 @@
1
+ import type { ComponentPropsWithRef, ChangeEvent } from 'react';
2
+ import type { CalendarBaseProps, CalendarOnChange } from '../Calendar';
3
+ import type { InputProps } from '../Input';
4
+ import type { PopoverBaseProps } from '../Popover';
5
+ export type DatePickerOnChange = CalendarOnChange;
6
+ export type DatePickerOnInputChange = (e: ChangeEvent<HTMLInputElement> | null, value: string) => void;
7
+ export type DatePickerPropOnError = (props: {
8
+ type: 'outOfRange';
9
+ inputValue?: string;
10
+ value?: Date | null;
11
+ } | {
12
+ type: 'inExclude';
13
+ inputValue?: string;
14
+ value?: Date | null;
15
+ }) => void;
16
+ type DatePickerOpenControlledProps = {
17
+ /** Текущее состояние списка. Если `true`, список отображается. */
18
+ open?: boolean;
19
+ /** Состояние открытие по умолчанию (неконтролируемый компонент) */
20
+ defaultOpen?: never;
21
+ };
22
+ type DatePickerOpenUncontrolledProps = {
23
+ /** Текущее состояние списка. Если `true`, список отображается. */
24
+ open?: never;
25
+ /** Состояние открытие по умолчанию (неконтролируемый компонент) */
26
+ defaultOpen?: boolean;
27
+ };
28
+ export type DatePickerProps = {
29
+ /** Выбранная дата */
30
+ value?: Date | null;
31
+ /** Выбранная дата по умолчанию (неконтролируемое состояние) */
32
+ defaultValue?: Date | null;
33
+ /** Функция обратного вызова, которая будет вызвана при выборе значения */
34
+ onChange?: DatePickerOnChange;
35
+ /** Введённое значение в текстовом поле */
36
+ onInputChange?: DatePickerOnInputChange;
37
+ /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
38
+ onClose?: () => void;
39
+ /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает открытие */
40
+ onOpen?: () => void;
41
+ /** Свойства компонента Calendar */
42
+ calendarProps?: CalendarBaseProps;
43
+ /** Свойства компонента Popover */
44
+ popoverProps?: PopoverBaseProps;
45
+ /** Текст для кнопки очистки поля */
46
+ clearText?: string;
47
+ /** Если {true}, то не отображает кнопку закрытия */
48
+ disableClearButton?: boolean;
49
+ /** Функция обратно вызова, которая сработает если пользователь ввёл дату с ошибкой */
50
+ onError?: DatePickerPropOnError;
51
+ } & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue' | 'onError'> & Pick<CalendarBaseProps, 'minDate' | 'maxDate' | 'exclude' | 'offsetDate'> & Pick<InputProps, 'label' | 'hint' | 'onKeyDown' | 'size' | 'error' | 'required' | 'fullWidth' | 'disabled' | 'renderLeft' | 'renderRight' | 'placeholder' | 'inputProps'> & (DatePickerOpenControlledProps | DatePickerOpenUncontrolledProps);
52
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export declare const formatDateToString: (date: Date | undefined | null) => string;
@@ -0,0 +1,9 @@
1
+ export var formatDateToString = function (date) {
2
+ if (!date) {
3
+ return '';
4
+ }
5
+ var year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date);
6
+ var month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(date);
7
+ var day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
8
+ return "".concat(day, ".").concat(month, ".").concat(year);
9
+ };
@@ -0,0 +1 @@
1
+ export * from './formatDateToString';
@@ -0,0 +1 @@
1
+ export * from './formatDateToString';
@@ -0,0 +1 @@
1
+ export declare const formatStringToDate: (value: string) => Date | null;
@@ -0,0 +1,9 @@
1
+ import { __read } from "tslib";
2
+ import { isCompleted } from '../../components/DateInput/utils';
3
+ export var formatStringToDate = function (value) {
4
+ var _a = __read(value.split('.'), 3), date = _a[0], month = _a[1], year = _a[2];
5
+ if (!(date && month && year) || !isCompleted(value)) {
6
+ return null;
7
+ }
8
+ return new Date(+year, +month - 1, +date);
9
+ };
@@ -0,0 +1 @@
1
+ export * from './formatStringToDate';
@@ -0,0 +1 @@
1
+ export * from './formatStringToDate';
@@ -0,0 +1,5 @@
1
+ export * from './matchCalendarSizeToFormElement';
2
+ export * from './formatDateToString';
3
+ export * from './formatStringToDate';
4
+ export * from './isOutOfRange';
5
+ export * from './isInExclude';
@@ -0,0 +1,5 @@
1
+ export * from './matchCalendarSizeToFormElement';
2
+ export * from './formatDateToString';
3
+ export * from './formatStringToDate';
4
+ export * from './isOutOfRange';
5
+ export * from './isInExclude';
@@ -0,0 +1 @@
1
+ export * from './isInExclude';
@@ -0,0 +1 @@
1
+ export * from './isInExclude';
@@ -0,0 +1,2 @@
1
+ import type { DatePickerProps } from '../../index';
2
+ export declare const isInExclude: ({ exclude, value, }: Pick<DatePickerProps, 'exclude' | 'value'>) => boolean;
@@ -0,0 +1,10 @@
1
+ export var isInExclude = function (_a) {
2
+ var _b, _c;
3
+ var exclude = _a.exclude, value = _a.value;
4
+ if (!exclude || !value) {
5
+ return false;
6
+ }
7
+ return (!!(exclude.date &&
8
+ !((_b = exclude.date) === null || _b === void 0 ? void 0 : _b.every(function (date) { return date.getTime() !== value.getTime(); }))) ||
9
+ !!(exclude.day && !((_c = exclude.day) === null || _c === void 0 ? void 0 : _c.every(function (date) { return date !== value.getDay(); }))));
10
+ };
@@ -0,0 +1 @@
1
+ export * from './isOutOfRange';
@@ -0,0 +1 @@
1
+ export * from './isOutOfRange';
@@ -0,0 +1,2 @@
1
+ import type { DatePickerProps } from '../../index';
2
+ export declare const isOutOfRange: ({ minDate, maxDate, value, }: Pick<DatePickerProps, 'minDate' | 'maxDate' | 'value'>) => boolean;
@@ -0,0 +1,7 @@
1
+ export var isOutOfRange = function (_a) {
2
+ var minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value;
3
+ if (!minDate || !maxDate || !value) {
4
+ return false;
5
+ }
6
+ return (minDate.getTime() > (value === null || value === void 0 ? void 0 : value.getTime()) || maxDate.getTime() < (value === null || value === void 0 ? void 0 : value.getTime()));
7
+ };
@@ -0,0 +1 @@
1
+ export * from './matchCalendarSizeToFormElement';
@@ -0,0 +1 @@
1
+ export * from './matchCalendarSizeToFormElement';
@@ -0,0 +1,5 @@
1
+ import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
2
+ import type { CalendarSizeVariant } from '../../../Calendar';
3
+ export declare const matchCalendarSizeToFormElement: {
4
+ [key in FormElementSizeVariant]: CalendarSizeVariant;
5
+ };
@@ -0,0 +1,7 @@
1
+ export var matchCalendarSizeToFormElement = {
2
+ '2xs': 's',
3
+ xs: 's',
4
+ s: 's',
5
+ m: 'm',
6
+ l: 'l',
7
+ };
@@ -25,7 +25,6 @@
25
25
  color: var(--textfield-color);
26
26
  box-sizing: border-box;
27
27
  block-size: var(--textfield-input-height);
28
-
29
28
  font: inherit;
30
29
  }
31
30
  .Input-Field::placeholder {
@@ -38,7 +38,7 @@ export var Input = forwardRef(function (inProps, ref) {
38
38
  },
39
39
  });
40
40
  return (React.createElement(FieldControl, __assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: cnInput({}, [className]) }),
41
- React.createElement("label", __assign({}, bodyProps, { className: cnInput('Body'), ref: useMultiRef([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
41
+ React.createElement("label", __assign({}, bodyProps, { className: cnInput('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]), ref: useMultiRef([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
42
42
  React.createElement(FieldIcon, { icon: renderLeft }),
43
43
  React.createElement("div", { className: cnInput('FieldContainer') },
44
44
  React.createElement(FieldLabel, __assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: labelProps === null || labelProps === void 0 ? void 0 : labelProps.className }), label),
@@ -3,7 +3,7 @@ import type { InputNumberValue, InputNumberCountDirection } from './types';
3
3
  export declare const isValidValue: (value?: InputNumberValue) => boolean;
4
4
  export declare const isInputInvalid: (event: KeyboardEvent<HTMLInputElement>) => boolean;
5
5
  export declare const getValue: ({ value, step, min, max, countDirection, }: {
6
- value?: InputNumberValue | undefined;
6
+ value?: InputNumberValue;
7
7
  countDirection: InputNumberCountDirection;
8
8
  min: number;
9
9
  max: number;