@alfalab/core-components-date-range-input 3.0.4 → 3.0.5

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 (31) hide show
  1. package/Component-63dec22f.d.ts +172 -12
  2. package/Component-8b5756fe.d.ts +388 -0
  3. package/Component.desktop-8b5756fe.d.ts +68 -5
  4. package/Component.mobile-ebda875c.d.ts +6 -0
  5. package/components/date-range-input/Component.d.ts +1 -1
  6. package/components/date-range-input/Component.js +1 -1
  7. package/components/date-range-input/index.css +7 -7
  8. package/cssm/{index-50136800.d.ts → index-2abb571d.d.ts} +5 -1
  9. package/esm/components/date-range-input/Component.js +1 -1
  10. package/esm/components/date-range-input/index.css +7 -7
  11. package/{modern/index-50136800.d.ts → esm/index-2abb571d.d.ts} +5 -1
  12. package/{esm/index-50136800.d.ts → index-2abb571d.d.ts} +5 -1
  13. package/index-9211a437.d.ts +1 -1
  14. package/index-ebda875c.d.ts +15 -115
  15. package/index-f034f741.d.ts +80 -2
  16. package/mobile-c219f8ca.d.ts +1 -367
  17. package/modern/Component-2abb571d.d.ts +6 -0
  18. package/modern/components/date-range-input/Component.js +1 -1
  19. package/modern/components/date-range-input/index.css +7 -7
  20. package/{index-50136800.d.ts → modern/index-2abb571d.d.ts} +5 -1
  21. package/package.json +4 -4
  22. package/Component-50136800.d.ts +0 -186
  23. package/Component-5684a67d.d.ts +0 -23
  24. package/Component-e2b6c730.d.ts +0 -76
  25. package/Component.desktop-ebda875c.d.ts +0 -6
  26. package/desktop-8b5756fe.d.ts +0 -2
  27. package/utils-e0a54580.d.ts +0 -8
  28. /package/{cssm/Component-50136800.d.ts → Component-2abb571d.d.ts} +0 -0
  29. /package/{Component.responsive-755fbaa3.d.ts → Component.responsive-2e2b2125.d.ts} +0 -0
  30. /package/{esm/Component-50136800.d.ts → cssm/Component-2abb571d.d.ts} +0 -0
  31. /package/{modern/Component-50136800.d.ts → esm/Component-2abb571d.d.ts} +0 -0
@@ -1,4 +1,4 @@
1
- /* hash: 19mkh */
1
+ /* hash: 9bgzg */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -41,24 +41,24 @@
41
41
  /* marker */
42
42
  } :root {
43
43
  --calendar-popover-border-radius: var(--border-radius-m);
44
- } .date-range-input__component_r7x48 {
44
+ } .date-range-input__component_184ip {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-range-input__calendarContainer_r7x48 {
48
+ } .date-range-input__calendarContainer_184ip {
49
49
  display: inline-block;
50
50
  box-sizing: border-box;
51
51
  border-radius: var(--calendar-popover-border-radius);
52
52
  border: 1px solid var(--color-light-border-secondary)
53
- } @media (max-width: 374px) { .date-range-input__calendarContainer_r7x48 {
53
+ } @media (max-width: 374px) { .date-range-input__calendarContainer_184ip {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-range-input__calendarResponsive_r7x48 {
57
+ } .date-range-input__calendarResponsive_184ip {
58
58
  width: var(--calendar-width);
59
- } .date-range-input__block_r7x48 {
59
+ } .date-range-input__block_184ip {
60
60
  width: 100%;
61
- } .date-range-input__calendarIcon_r7x48 {
61
+ } .date-range-input__calendarIcon_184ip {
62
62
  margin-right: var(--gap-s-neg);
63
63
  height: 100%;
64
64
  }
@@ -8,4 +8,8 @@ declare function easeInOutQuad(x: number): number;
8
8
  declare const easingFns: {
9
9
  easeInOutQuad: typeof easeInOutQuad;
10
10
  };
11
- export { isClient, getDataTestId, createPaddingStyle, easingFns };
11
+ declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
12
+ declare const inputUtils: {
13
+ disableUserInput: typeof disableUserInput;
14
+ };
15
+ export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils };
@@ -12,7 +12,7 @@ import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
12
12
  import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
13
13
  import 'date-fns/parse';
14
14
 
15
- var styles = {"component":"date-range-input__component_r7x48","calendarContainer":"date-range-input__calendarContainer_r7x48","calendarResponsive":"date-range-input__calendarResponsive_r7x48","block":"date-range-input__block_r7x48","calendarIcon":"date-range-input__calendarIcon_r7x48"};
15
+ var styles = {"component":"date-range-input__component_184ip","calendarContainer":"date-range-input__calendarContainer_184ip","calendarResponsive":"date-range-input__calendarResponsive_184ip","block":"date-range-input__block_184ip","calendarIcon":"date-range-input__calendarIcon_184ip"};
16
16
  require('./index.css')
17
17
 
18
18
  var DateRangeInput = React.forwardRef(function (_a, ref) {
@@ -1,4 +1,4 @@
1
- /* hash: 19mkh */
1
+ /* hash: 9bgzg */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -41,24 +41,24 @@
41
41
  /* marker */
42
42
  } :root {
43
43
  --calendar-popover-border-radius: var(--border-radius-m);
44
- } .date-range-input__component_r7x48 {
44
+ } .date-range-input__component_184ip {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-range-input__calendarContainer_r7x48 {
48
+ } .date-range-input__calendarContainer_184ip {
49
49
  display: inline-block;
50
50
  box-sizing: border-box;
51
51
  border-radius: var(--calendar-popover-border-radius);
52
52
  border: 1px solid var(--color-light-border-secondary)
53
- } @media (max-width: 374px) { .date-range-input__calendarContainer_r7x48 {
53
+ } @media (max-width: 374px) { .date-range-input__calendarContainer_184ip {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-range-input__calendarResponsive_r7x48 {
57
+ } .date-range-input__calendarResponsive_184ip {
58
58
  width: var(--calendar-width);
59
- } .date-range-input__block_r7x48 {
59
+ } .date-range-input__block_184ip {
60
60
  width: 100%;
61
- } .date-range-input__calendarIcon_r7x48 {
61
+ } .date-range-input__calendarIcon_184ip {
62
62
  margin-right: var(--gap-s-neg);
63
63
  height: 100%;
64
64
  }
@@ -8,4 +8,8 @@ declare function easeInOutQuad(x: number): number;
8
8
  declare const easingFns: {
9
9
  easeInOutQuad: typeof easeInOutQuad;
10
10
  };
11
- export { isClient, getDataTestId, createPaddingStyle, easingFns };
11
+ declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
12
+ declare const inputUtils: {
13
+ disableUserInput: typeof disableUserInput;
14
+ };
15
+ export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils };
@@ -8,4 +8,8 @@ declare function easeInOutQuad(x: number): number;
8
8
  declare const easingFns: {
9
9
  easeInOutQuad: typeof easeInOutQuad;
10
10
  };
11
- export { isClient, getDataTestId, createPaddingStyle, easingFns };
11
+ declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
12
+ declare const inputUtils: {
13
+ disableUserInput: typeof disableUserInput;
14
+ };
15
+ export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils };
@@ -1,2 +1,2 @@
1
- export { Button } from "./Component.responsive-755fbaa3";
1
+ export { Button } from "./Component.responsive-2e2b2125";
2
2
  export type { ButtonProps } from "./typings-9211a437";
@@ -1,135 +1,35 @@
1
1
  /// <reference types="react" />
2
2
  import React from "react";
3
- import { HTMLAttributes, ReactNode } from "react";
4
- type StyleColors = {
5
- default: {
6
- [key: string]: string;
7
- };
8
- inverted: {
9
- [key: string]: string;
10
- };
11
- };
12
- type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
3
+ import { ButtonHTMLAttributes, ElementType, FC } from "react";
4
+ interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
13
5
  /**
14
- * Растягивает компонент на ширину контейнера
6
+ * Вид компонента
15
7
  */
16
- block?: boolean;
17
- /**
18
- * Размер компонента
19
- */
20
- size?: "s" | "m" | "l" | "xl";
21
- /**
22
- * Набор цветов для компонента
23
- */
24
- colors?: "default" | "inverted";
25
- /**
26
- * Заблокированное состояние
27
- */
28
- disabled?: boolean;
29
- /**
30
- * Cостояние только для чтения
31
- */
32
- readOnly?: boolean;
33
- /**
34
- * Заполненное состояние
35
- */
36
- filled?: boolean;
37
- /**
38
- * Выбранное (фокус) состояние
39
- */
40
- focused?: boolean;
41
- /**
42
- * Отображение ошибки
43
- */
44
- error?: ReactNode | boolean;
45
- /**
46
- * Текст подсказки
47
- */
48
- hint?: ReactNode;
49
- /**
50
- * Лейбл компонента
51
- */
52
- label?: ReactNode;
53
- /**
54
- * Вид лейбла внутри / снаружи
55
- */
56
- labelView?: "inner" | "outer";
57
- /**
58
- * Слот слева
59
- */
60
- leftAddons?: ReactNode;
61
- /**
62
- * Слот справа
63
- */
64
- rightAddons?: ReactNode;
65
- /**
66
- * Слот под полем
67
- */
68
- bottomAddons?: ReactNode;
8
+ view: "desktop" | "mobile";
69
9
  /**
70
10
  * Дополнительный класс
71
11
  */
72
12
  className?: string;
73
13
  /**
74
- * Дополнительный класс для поля
75
- */
76
- fieldClassName?: string;
77
- /**
78
- * Дополнительный класс для поля
14
+ * Позиция крестика
79
15
  */
80
- inputWrapperClassName?: string;
16
+ align?: "left" | "right";
81
17
  /**
82
- * Дополнительный класс для лейбла
18
+ * Фиксирует крестик
83
19
  */
84
- labelClassName?: string;
20
+ sticky?: boolean;
85
21
  /**
86
- * Дополнительный класс для аддонов
22
+ * Иконка
87
23
  */
88
- addonsClassName?: string;
24
+ icon?: ElementType;
89
25
  /**
90
26
  * Идентификатор для систем автоматизированного тестирования
91
27
  */
92
28
  dataTestId?: string;
93
29
  /**
94
- * Компонент поля (инпут, textarea и пр.)
95
- */
96
- children?: ReactNode;
97
- /**
98
- * Основные стили компонента.
99
- */
100
- styles: {
101
- [key: string]: string;
102
- };
103
- /**
104
- * Стили компонента для default и inverted режима.
30
+ * Коллбэк закрытия.
105
31
  */
106
- colorStyles?: StyleColors;
107
- };
108
- declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
109
- block?: boolean | undefined;
110
- size?: "s" | "m" | "l" | "xl" | undefined;
111
- colors?: "default" | "inverted" | undefined;
112
- disabled?: boolean | undefined;
113
- readOnly?: boolean | undefined;
114
- filled?: boolean | undefined;
115
- focused?: boolean | undefined;
116
- error?: ReactNode | boolean;
117
- hint?: ReactNode;
118
- label?: ReactNode;
119
- labelView?: "inner" | "outer" | undefined;
120
- leftAddons?: ReactNode;
121
- rightAddons?: ReactNode;
122
- bottomAddons?: ReactNode;
123
- className?: string | undefined;
124
- fieldClassName?: string | undefined;
125
- inputWrapperClassName?: string | undefined;
126
- labelClassName?: string | undefined;
127
- addonsClassName?: string | undefined;
128
- dataTestId?: string | undefined;
129
- children?: ReactNode;
130
- styles: {
131
- [key: string]: string;
132
- };
133
- colorStyles?: StyleColors | undefined;
134
- } & React.RefAttributes<HTMLDivElement>>;
135
- export { StyleColors, BaseFormControlProps, BaseFormControl };
32
+ onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
33
+ }
34
+ declare const Closer: FC<CloserProps>;
35
+ export { CloserProps, Closer };
@@ -1,2 +1,80 @@
1
- export * from "./Component-e2b6c730";
2
- export { shiftValues } from "./utils-e0a54580";
1
+ import { FC, MouseEvent } from "react";
2
+ type PeriodType = "range" | "day" | "week" | "month" | "quarter" | "year";
3
+ type PeriodSliderProps = {
4
+ /**
5
+ * Активная дата или период
6
+ */
7
+ value?: Date | [
8
+ Date,
9
+ Date
10
+ ];
11
+ /**
12
+ * Тип периода
13
+ */
14
+ periodType?: PeriodType;
15
+ /**
16
+ * Дополнительный класс
17
+ */
18
+ className?: string;
19
+ /**
20
+ * Отключает кнопку назад
21
+ */
22
+ prevArrowDisabled?: boolean;
23
+ /**
24
+ * Отключает кнопку вперед
25
+ */
26
+ nextArrowDisabled?: boolean;
27
+ /**
28
+ * Скрывает заблокированные кнопки
29
+ */
30
+ hideDisabledArrows?: boolean;
31
+ /**
32
+ * Возможность выбора месяца и года, если periodType 'month'
33
+ */
34
+ isMonthAndYearSelectable?: boolean;
35
+ /**
36
+ * Отображать ли текущий год, если isMonthAndYearSelectable true
37
+ */
38
+ showCurrentYearSelector?: boolean;
39
+ /**
40
+ * Функция для форматирование выбранного периода
41
+ */
42
+ periodFormatter?: (valueFrom: Date, valueTo: Date, periodType: PeriodType) => string;
43
+ /**
44
+ * Обработчик нажатия кнопки переключения на назад
45
+ */
46
+ onPrevArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
47
+ value: Date;
48
+ valueFrom: Date;
49
+ valueTo: Date;
50
+ periodType: PeriodType;
51
+ }) => void;
52
+ /**
53
+ * Обработчик нажатия кнопки переключения на вперед
54
+ */
55
+ onNextArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
56
+ value: Date;
57
+ valueFrom: Date;
58
+ valueTo: Date;
59
+ periodType: PeriodType;
60
+ }) => void;
61
+ /**
62
+ * Обработчик нажатия на селектор месяца
63
+ */
64
+ onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
65
+ /**
66
+ * Обработчик нажатия на селектор года
67
+ */
68
+ onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
69
+ /**
70
+ * Обработчик нажатия на период
71
+ */
72
+ onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
73
+ /**
74
+ * Идентификатор для систем автоматизированного тестирования
75
+ */
76
+ dataTestId?: string;
77
+ };
78
+ declare const PeriodSlider: FC<PeriodSliderProps>;
79
+ export { PeriodType, PeriodSliderProps, PeriodSlider };
80
+ export { shiftValues } from "./Component.desktop-8b5756fe";