@alfalab/core-components-date-range-input 2.4.1 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. package/Component-63dec22f.d.ts +167 -0
  2. package/Component-89a3cf4c.d.ts +6 -0
  3. package/Component-8b5756fe.d.ts +380 -0
  4. package/Component.desktop-2e2b2125.d.ts +6 -0
  5. package/Component.desktop-8b5756fe.d.ts +197 -0
  6. package/Component.desktop.d.ts +1 -1
  7. package/Component.desktop.js +4 -3
  8. package/Component.mobile-755fbaa3.d.ts +6 -0
  9. package/Component.mobile-ebda875c.d.ts +6 -0
  10. package/Component.mobile.d.ts +1 -1
  11. package/Component.mobile.js +4 -3
  12. package/Component.responsive-2e2b2125.d.ts +66 -0
  13. package/Component.responsive.d.ts +1 -1
  14. package/Component.responsive.js +5 -2
  15. package/components/date-range-input/Component.d.ts +7 -2
  16. package/components/date-range-input/Component.js +10 -11
  17. package/components/date-range-input/index.css +7 -7
  18. package/components/date-range-input/index.js +1 -2
  19. package/cssm/Component-63dec22f.d.ts +167 -0
  20. package/cssm/Component-89a3cf4c.d.ts +6 -0
  21. package/cssm/Component-8b5756fe.d.ts +380 -0
  22. package/cssm/Component.desktop-2e2b2125.d.ts +6 -0
  23. package/cssm/Component.desktop-8b5756fe.d.ts +197 -0
  24. package/cssm/Component.desktop.d.ts +1 -1
  25. package/cssm/Component.desktop.js +4 -3
  26. package/cssm/Component.mobile-755fbaa3.d.ts +6 -0
  27. package/cssm/Component.mobile-ebda875c.d.ts +6 -0
  28. package/cssm/Component.mobile.d.ts +1 -1
  29. package/cssm/Component.mobile.js +4 -3
  30. package/cssm/Component.responsive-2e2b2125.d.ts +66 -0
  31. package/cssm/Component.responsive.d.ts +1 -1
  32. package/cssm/Component.responsive.js +5 -2
  33. package/cssm/components/date-range-input/Component.d.ts +7 -2
  34. package/cssm/components/date-range-input/Component.js +9 -10
  35. package/cssm/components/date-range-input/index.js +1 -2
  36. package/cssm/desktop-63dec22f.d.ts +2 -0
  37. package/cssm/desktop.js +3 -2
  38. package/cssm/index-89a3cf4c.d.ts +3 -0
  39. package/cssm/index-9211a437.d.ts +2 -0
  40. package/cssm/index-ebda875c.d.ts +35 -0
  41. package/cssm/index-f034f741.d.ts +80 -0
  42. package/cssm/index.d.ts +3 -2
  43. package/cssm/index.js +5 -2
  44. package/cssm/mobile-c219f8ca.d.ts +1 -0
  45. package/cssm/mobile.js +3 -2
  46. package/cssm/types-ebda875c.d.ts +113 -0
  47. package/cssm/typings-5684a67d.d.ts +23 -0
  48. package/cssm/typings-9211a437.d.ts +95 -0
  49. package/cssm/useCalendar-5684a67d.d.ts +97 -0
  50. package/cssm/utils-5684a67d.d.ts +88 -0
  51. package/desktop-63dec22f.d.ts +2 -0
  52. package/desktop.js +3 -2
  53. package/esm/Component-63dec22f.d.ts +167 -0
  54. package/esm/Component-89a3cf4c.d.ts +6 -0
  55. package/esm/Component-8b5756fe.d.ts +380 -0
  56. package/esm/Component.desktop-2e2b2125.d.ts +6 -0
  57. package/esm/Component.desktop-8b5756fe.d.ts +197 -0
  58. package/esm/Component.desktop.d.ts +1 -1
  59. package/esm/Component.desktop.js +4 -3
  60. package/esm/Component.mobile-755fbaa3.d.ts +6 -0
  61. package/esm/Component.mobile-ebda875c.d.ts +6 -0
  62. package/esm/Component.mobile.d.ts +1 -1
  63. package/esm/Component.mobile.js +4 -3
  64. package/esm/Component.responsive-2e2b2125.d.ts +66 -0
  65. package/esm/Component.responsive.d.ts +1 -1
  66. package/esm/Component.responsive.js +5 -2
  67. package/esm/components/date-range-input/Component.d.ts +7 -2
  68. package/esm/components/date-range-input/Component.js +10 -11
  69. package/esm/components/date-range-input/index.css +7 -7
  70. package/esm/components/date-range-input/index.js +1 -2
  71. package/esm/desktop-63dec22f.d.ts +2 -0
  72. package/esm/desktop.js +3 -2
  73. package/esm/index-89a3cf4c.d.ts +3 -0
  74. package/esm/index-9211a437.d.ts +2 -0
  75. package/esm/index-ebda875c.d.ts +35 -0
  76. package/esm/index-f034f741.d.ts +80 -0
  77. package/esm/index.d.ts +3 -2
  78. package/esm/index.js +5 -2
  79. package/esm/mobile-c219f8ca.d.ts +1 -0
  80. package/esm/mobile.js +3 -2
  81. package/esm/types-ebda875c.d.ts +113 -0
  82. package/esm/typings-5684a67d.d.ts +23 -0
  83. package/esm/typings-9211a437.d.ts +95 -0
  84. package/esm/useCalendar-5684a67d.d.ts +97 -0
  85. package/esm/utils-5684a67d.d.ts +88 -0
  86. package/index-89a3cf4c.d.ts +3 -0
  87. package/index-9211a437.d.ts +2 -0
  88. package/index-ebda875c.d.ts +35 -0
  89. package/index-f034f741.d.ts +80 -0
  90. package/index.d.ts +3 -2
  91. package/index.js +5 -2
  92. package/mobile-c219f8ca.d.ts +1 -0
  93. package/mobile.js +3 -2
  94. package/modern/Component-63dec22f.d.ts +167 -0
  95. package/modern/Component-89a3cf4c.d.ts +6 -0
  96. package/modern/Component-8b5756fe.d.ts +380 -0
  97. package/modern/Component.desktop-2e2b2125.d.ts +6 -0
  98. package/modern/Component.desktop-8b5756fe.d.ts +197 -0
  99. package/modern/Component.desktop.d.ts +1 -1
  100. package/modern/Component.desktop.js +4 -3
  101. package/modern/Component.mobile-755fbaa3.d.ts +6 -0
  102. package/modern/Component.mobile-ebda875c.d.ts +6 -0
  103. package/modern/Component.mobile.d.ts +1 -1
  104. package/modern/Component.mobile.js +4 -3
  105. package/modern/Component.responsive-2e2b2125.d.ts +66 -0
  106. package/modern/Component.responsive.d.ts +1 -1
  107. package/modern/Component.responsive.js +5 -2
  108. package/modern/components/date-range-input/Component.d.ts +7 -2
  109. package/modern/components/date-range-input/Component.js +7 -8
  110. package/modern/components/date-range-input/index.css +7 -7
  111. package/modern/components/date-range-input/index.js +1 -2
  112. package/modern/desktop-63dec22f.d.ts +2 -0
  113. package/modern/desktop.js +3 -2
  114. package/modern/index-89a3cf4c.d.ts +3 -0
  115. package/modern/index-9211a437.d.ts +2 -0
  116. package/modern/index-ebda875c.d.ts +35 -0
  117. package/modern/index-f034f741.d.ts +80 -0
  118. package/modern/index.d.ts +3 -2
  119. package/modern/index.js +5 -2
  120. package/modern/mobile-c219f8ca.d.ts +1 -0
  121. package/modern/mobile.js +3 -2
  122. package/modern/types-ebda875c.d.ts +113 -0
  123. package/modern/typings-5684a67d.d.ts +23 -0
  124. package/modern/typings-9211a437.d.ts +95 -0
  125. package/modern/useCalendar-5684a67d.d.ts +97 -0
  126. package/modern/utils-5684a67d.d.ts +88 -0
  127. package/package.json +25 -5
  128. package/src/Component.desktop.tsx +29 -0
  129. package/src/Component.mobile.tsx +30 -0
  130. package/src/Component.responsive.tsx +41 -0
  131. package/src/components/date-range-input/Component.tsx +519 -0
  132. package/src/components/date-range-input/index.module.css +37 -0
  133. package/src/components/date-range-input/index.ts +1 -0
  134. package/src/desktop.ts +1 -0
  135. package/src/index.ts +2 -0
  136. package/src/mobile.ts +1 -0
  137. package/src/utils/format.ts +91 -0
  138. package/src/utils/index.ts +1 -0
  139. package/types-ebda875c.d.ts +113 -0
  140. package/typings-5684a67d.d.ts +23 -0
  141. package/typings-9211a437.d.ts +95 -0
  142. package/useCalendar-5684a67d.d.ts +97 -0
  143. package/utils-5684a67d.d.ts +88 -0
  144. package/cssm/responsive.d.ts +0 -2
  145. package/cssm/responsive.js +0 -27
  146. package/esm/responsive.d.ts +0 -2
  147. package/esm/responsive.js +0 -18
  148. package/modern/responsive.d.ts +0 -2
  149. package/modern/responsive.js +0 -17
  150. package/responsive.d.ts +0 -2
  151. package/responsive.js +0 -26
@@ -0,0 +1,66 @@
1
+ /// <reference types="react" />
2
+ import React from "react";
3
+ import { FC, ReactNode } from "react";
4
+ import { ButtonProps } from "./typings-9211a437";
5
+ type MqProps = {
6
+ /**
7
+ * Media выражение или кастомный запрос из `mq.json`, например `--mobile`.
8
+ */
9
+ query?: string;
10
+ /**
11
+ * Запрос на поддержку тач-событий
12
+ */
13
+ touch?: boolean;
14
+ /**
15
+ * Дочерние элементы.
16
+ */
17
+ children?: ReactNode;
18
+ /**
19
+ * Обработчик изменений в совпадении запросов
20
+ */
21
+ onMatchChange?: (isMatched: boolean) => void;
22
+ };
23
+ declare const Mq: FC<MqProps>;
24
+ /**
25
+ * Хук для медиа запросов.
26
+ * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
27
+ * @param defaultValue Значение по-умолчанию.
28
+ */
29
+ declare const useMatchMedia: (query: string, defaultValue?: boolean | (() => boolean)) => boolean[];
30
+ /**
31
+ * Возвращает MediaQueryList для заданного media-выражения.
32
+ *
33
+ * @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
34
+ */
35
+ declare function getMatchMedia(queryProp: string): MediaQueryList;
36
+ /**
37
+ * Удаляет MediaQueryList.
38
+ *
39
+ * @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
40
+ */
41
+ declare function releaseMatchMedia(queryProp: string): void;
42
+ /**
43
+ * Возвращает `true`, если есть поддержка `Pointer Events`
44
+ */
45
+ declare function isPointerEventsSupported(): boolean;
46
+ /**
47
+ * Возвращает `true`, если есть поддержка `Touch Events`
48
+ */
49
+ declare function isTouchSupported(): boolean;
50
+ declare const _exports: {
51
+ "--mobile-xs": string;
52
+ "--mobile-s": string;
53
+ "--mobile-m": string;
54
+ "--mobile-l": string;
55
+ "--mobile": string;
56
+ "--tablet-s": string;
57
+ "--tablet-m": string;
58
+ "--tablet": string;
59
+ "--desktop-s": string;
60
+ "--desktop-m": string;
61
+ "--desktop-l": string;
62
+ "--desktop-xl": string;
63
+ "--desktop": string;
64
+ };
65
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
66
+ export { _exports as default, MqProps, Mq, useMatchMedia, getMatchMedia, releaseMatchMedia, isPointerEventsSupported, isTouchSupported, Button };
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
3
  import { ConditionalProps, DateRangeInputProps } from "./components/date-range-input/index";
4
- type DateRangeInputResponsiveProps = Omit<DateRangeInputProps, 'view' | 'picker' | 'onClose'> & ConditionalProps & {
4
+ type DateRangeInputResponsiveProps = Omit<DateRangeInputProps, 'view' | 'picker' | 'onClose' | 'InputComponent'> & ConditionalProps & {
5
5
  /**
6
6
  * Контрольная точка, с нее начинается desktop версия
7
7
  * @default 1024
@@ -2,18 +2,21 @@ import React, { forwardRef } from 'react';
2
2
  import { useMedia } from '@alfalab/hooks';
3
3
  import { DateRangeInputDesktop } from './Component.desktop.js';
4
4
  import { DateRangeInputMobile } from './Component.mobile.js';
5
+ import '@alfalab/core-components-calendar/modern/desktop';
6
+ import '@alfalab/core-components-input/modern/desktop';
5
7
  import './components/date-range-input/Component.js';
6
8
  import 'react-merge-refs';
7
9
  import 'classnames';
8
10
  import 'date-fns';
9
11
  import 'date-fns/isValid';
10
- import '@alfalab/core-components-calendar/modern';
12
+ import '@alfalab/core-components-calendar/modern/shared';
11
13
  import '@alfalab/core-components-icon-button/modern';
12
- import '@alfalab/core-components-input/modern';
13
14
  import '@alfalab/core-components-popover/modern';
14
15
  import '@alfalab/icons-glyph/CalendarMIcon';
15
16
  import './utils/format.js';
16
17
  import 'date-fns/parse';
18
+ import '@alfalab/core-components-calendar/modern/mobile';
19
+ import '@alfalab/core-components-input/modern/mobile';
17
20
 
18
21
  const DateRangeInputResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
19
22
  const [view] = useMedia([
@@ -1,7 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
3
  import { ChangeEvent, ElementType } from "react";
4
- import { CalendarMobileProps, CalendarProps } from "@alfalab/core-components-calendar";
4
+ import { CalendarDesktopProps } from "../../desktop-63dec22f";
5
+ import { CalendarMobileProps } from "../../mobile-c219f8ca";
5
6
  import { InputProps } from "@alfalab/core-components-input";
6
7
  import { PopoverProps } from "@alfalab/core-components-popover";
7
8
  type ConditionalProps = {
@@ -53,7 +54,7 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & ConditionalProps & {
53
54
  /**
54
55
  * Доп. пропсы для календаря
55
56
  */
56
- calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
57
+ calendarProps?: (CalendarDesktopProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
57
58
  /**
58
59
  * Месяц в календаре по умолчанию (timestamp)
59
60
  */
@@ -103,6 +104,10 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & ConditionalProps & {
103
104
  * Отображение компонента в мобильном или десктопном виде
104
105
  */
105
106
  view?: 'desktop' | 'mobile';
107
+ /**
108
+ * Компонент инпута
109
+ */
110
+ InputComponent?: ElementType;
106
111
  /**
107
112
  * Запретить ввод с клавиатуры
108
113
  */
@@ -3,20 +3,19 @@ import mergeRefs from 'react-merge-refs';
3
3
  import cn from 'classnames';
4
4
  import { startOfMonth } from 'date-fns';
5
5
  import dateFnsIsValid from 'date-fns/isValid';
6
- import { usePeriod, Calendar } from '@alfalab/core-components-calendar/modern';
6
+ import { usePeriod } from '@alfalab/core-components-calendar/modern/shared';
7
7
  import { IconButton } from '@alfalab/core-components-icon-button/modern';
8
- import { Input } from '@alfalab/core-components-input/modern';
9
8
  import { Popover } from '@alfalab/core-components-popover/modern';
10
9
  import { useDidUpdateEffect } from '@alfalab/hooks';
11
10
  import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
12
11
  import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
13
12
  import 'date-fns/parse';
14
13
 
15
- const styles = {"component":"date-range-input__component_198ra","calendarContainer":"date-range-input__calendarContainer_198ra","calendarResponsive":"date-range-input__calendarResponsive_198ra","block":"date-range-input__block_198ra","calendarIcon":"date-range-input__calendarIcon_198ra"};
14
+ const styles = {"component":"date-range-input__component_1cfrs","calendarContainer":"date-range-input__calendarContainer_1cfrs","calendarResponsive":"date-range-input__calendarResponsive_1cfrs","block":"date-range-input__block_1cfrs","calendarIcon":"date-range-input__calendarIcon_1cfrs"};
16
15
  require('./index.css')
17
16
 
18
17
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
19
- const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, disableUserInput = false, picker, defaultValue = '', value: propValue, onChange, onComplete, onClose, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip, Calendar: Calendar$1 = Calendar, calendarProps = {}, defaultMonth, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], defaultOpen = false, view = 'desktop', ...restProps }, ref) => {
18
+ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, disableUserInput = false, picker, defaultValue = '', value: propValue, onChange, onComplete, onClose, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip, InputComponent, Calendar, calendarProps = {}, defaultMonth, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], defaultOpen = false, view = 'desktop', ...restProps }, ref) => {
20
19
  const inputRef = useRef(null);
21
20
  const iconRef = useRef(null);
22
21
  const calendarRef = useRef(null);
@@ -198,17 +197,17 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
198
197
  const renderCalendar = () => {
199
198
  const activeMonth = (selectedTo && startOfMonth(selectedTo)) ||
200
199
  (selectedFrom && startOfMonth(selectedFrom));
201
- return (
200
+ return Calendar ? (
202
201
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
203
202
  React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
204
- React.createElement(Calendar$1, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: activeMonth || defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })));
203
+ React.createElement(Calendar, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: activeMonth || defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events }))) : null;
205
204
  };
206
205
  return (React.createElement("div", { className: cn(styles.component, className, {
207
206
  [styles.block]: block,
208
207
  }), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
209
- React.createElement(Input, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, onKeyDown: handleInputKeyDown, rightAddons: React.createElement(React.Fragment, null,
208
+ InputComponent ? (React.createElement(InputComponent, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, onKeyDown: handleInputKeyDown, rightAddons: React.createElement(React.Fragment, null,
210
209
  rightAddons,
211
- picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) }),
210
+ picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) })) : null,
212
211
  picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
213
212
  [styles.calendarResponsive]: calendarResponsive,
214
213
  }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
@@ -1,4 +1,4 @@
1
- /* hash: c4d0p */
1
+ /* hash: 5wzse */
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_198ra {
44
+ } .date-range-input__component_1cfrs {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-range-input__calendarContainer_198ra {
48
+ } .date-range-input__calendarContainer_1cfrs {
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_198ra {
53
+ } @media (max-width: 374px) { .date-range-input__calendarContainer_1cfrs {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-range-input__calendarResponsive_198ra {
57
+ } .date-range-input__calendarResponsive_1cfrs {
58
58
  width: var(--calendar-width);
59
- } .date-range-input__block_198ra {
59
+ } .date-range-input__block_1cfrs {
60
60
  width: 100%;
61
- } .date-range-input__calendarIcon_198ra {
61
+ } .date-range-input__calendarIcon_1cfrs {
62
62
  margin-right: var(--gap-s-neg);
63
63
  height: 100%;
64
64
  }
@@ -4,9 +4,8 @@ import 'react-merge-refs';
4
4
  import 'classnames';
5
5
  import 'date-fns';
6
6
  import 'date-fns/isValid';
7
- import '@alfalab/core-components-calendar/modern';
7
+ import '@alfalab/core-components-calendar/modern/shared';
8
8
  import '@alfalab/core-components-icon-button/modern';
9
- import '@alfalab/core-components-input/modern';
10
9
  import '@alfalab/core-components-popover/modern';
11
10
  import '@alfalab/hooks';
12
11
  import '@alfalab/icons-glyph/CalendarMIcon';
@@ -0,0 +1,2 @@
1
+ export * from "./Component.desktop-2e2b2125";
2
+ export {};
package/modern/desktop.js CHANGED
@@ -1,13 +1,14 @@
1
1
  export { DateRangeInputDesktop } from './Component.desktop.js';
2
2
  import 'react';
3
+ import '@alfalab/core-components-calendar/modern/desktop';
4
+ import '@alfalab/core-components-input/modern/desktop';
3
5
  import './components/date-range-input/Component.js';
4
6
  import 'react-merge-refs';
5
7
  import 'classnames';
6
8
  import 'date-fns';
7
9
  import 'date-fns/isValid';
8
- import '@alfalab/core-components-calendar/modern';
10
+ import '@alfalab/core-components-calendar/modern/shared';
9
11
  import '@alfalab/core-components-icon-button/modern';
10
- import '@alfalab/core-components-input/modern';
11
12
  import '@alfalab/core-components-popover/modern';
12
13
  import '@alfalab/hooks';
13
14
  import '@alfalab/icons-glyph/CalendarMIcon';
@@ -0,0 +1,3 @@
1
+ declare const isClient: () => boolean;
2
+ declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
3
+ export { isClient, getDataTestId };
@@ -0,0 +1,2 @@
1
+ export { Button } from "./Component.responsive-2e2b2125";
2
+ export type { ButtonProps } from "./typings-9211a437";
@@ -0,0 +1,35 @@
1
+ /// <reference types="react" />
2
+ import React from "react";
3
+ import { ButtonHTMLAttributes, ElementType, FC } from "react";
4
+ interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
5
+ /**
6
+ * Вид компонента
7
+ */
8
+ view: "desktop" | "mobile";
9
+ /**
10
+ * Дополнительный класс
11
+ */
12
+ className?: string;
13
+ /**
14
+ * Позиция крестика
15
+ */
16
+ align?: "left" | "right";
17
+ /**
18
+ * Фиксирует крестик
19
+ */
20
+ sticky?: boolean;
21
+ /**
22
+ * Иконка
23
+ */
24
+ icon?: ElementType;
25
+ /**
26
+ * Идентификатор для систем автоматизированного тестирования
27
+ */
28
+ dataTestId?: string;
29
+ /**
30
+ * Коллбэк закрытия.
31
+ */
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 };
@@ -0,0 +1,80 @@
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";
package/modern/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- export { DateRangeInputResponsive as DateRangeInput } from "./responsive";
2
- export type { DateRangeInputResponsiveProps as DateRangeInputProps } from "./responsive";
1
+ export { DateRangeInputResponsive as DateRangeInput } from "./Component.responsive";
2
+ export type { DateRangeInputResponsiveProps as DateRangeInputProps } from "./Component.responsive";
3
+ export {};
package/modern/index.js CHANGED
@@ -2,16 +2,19 @@ export { DateRangeInputResponsive as DateRangeInput } from './Component.responsi
2
2
  import 'react';
3
3
  import '@alfalab/hooks';
4
4
  import './Component.desktop.js';
5
+ import '@alfalab/core-components-calendar/modern/desktop';
6
+ import '@alfalab/core-components-input/modern/desktop';
5
7
  import './components/date-range-input/Component.js';
6
8
  import 'react-merge-refs';
7
9
  import 'classnames';
8
10
  import 'date-fns';
9
11
  import 'date-fns/isValid';
10
- import '@alfalab/core-components-calendar/modern';
12
+ import '@alfalab/core-components-calendar/modern/shared';
11
13
  import '@alfalab/core-components-icon-button/modern';
12
- import '@alfalab/core-components-input/modern';
13
14
  import '@alfalab/core-components-popover/modern';
14
15
  import '@alfalab/icons-glyph/CalendarMIcon';
15
16
  import './utils/format.js';
16
17
  import 'date-fns/parse';
17
18
  import './Component.mobile.js';
19
+ import '@alfalab/core-components-calendar/modern/mobile';
20
+ import '@alfalab/core-components-input/modern/mobile';
@@ -0,0 +1 @@
1
+ export * from "./Component-8b5756fe";
package/modern/mobile.js CHANGED
@@ -1,13 +1,14 @@
1
1
  export { DateRangeInputMobile } from './Component.mobile.js';
2
2
  import 'react';
3
- import '@alfalab/core-components-calendar/modern';
3
+ import '@alfalab/core-components-calendar/modern/mobile';
4
+ import '@alfalab/core-components-input/modern/mobile';
4
5
  import './components/date-range-input/Component.js';
5
6
  import 'react-merge-refs';
6
7
  import 'classnames';
7
8
  import 'date-fns';
8
9
  import 'date-fns/isValid';
10
+ import '@alfalab/core-components-calendar/modern/shared';
9
11
  import '@alfalab/core-components-icon-button/modern';
10
- import '@alfalab/core-components-input/modern';
11
12
  import '@alfalab/core-components-popover/modern';
12
13
  import '@alfalab/hooks';
13
14
  import '@alfalab/icons-glyph/CalendarMIcon';
@@ -0,0 +1,113 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { ReactNode } from "react";
4
+ import { CloserProps } from "./index-ebda875c";
5
+ type NavigationBarProps = {
6
+ /**
7
+ * Контент шапки
8
+ */
9
+ children?: ReactNode;
10
+ /**
11
+ * Заголовок шапки
12
+ */
13
+ title?: string;
14
+ /**
15
+ * Подзаголовок (доступен только в мобильной версии)
16
+ */
17
+ subtitle?: string;
18
+ /**
19
+ * Размер заголовка (compact доступен только в мобильной версии)
20
+ */
21
+ titleSize?: 'default' | 'compact';
22
+ /**
23
+ * Доп. класс для аддонов
24
+ */
25
+ addonClassName?: string;
26
+ /**
27
+ * Слот слева
28
+ */
29
+ leftAddons?: ReactNode;
30
+ /**
31
+ * Слот справа
32
+ */
33
+ rightAddons?: ReactNode;
34
+ /**
35
+ * Дополнительный класс для closer
36
+ */
37
+ closerClassName?: string;
38
+ /**
39
+ * Слот снизу
40
+ */
41
+ bottomAddons?: ReactNode;
42
+ /**
43
+ * Наличие компонента крестика
44
+ */
45
+ hasCloser?: boolean;
46
+ /**
47
+ * Наличие кнопки "Назад"
48
+ */
49
+ hasBackButton?: boolean;
50
+ /**
51
+ * Дополнительный класс для правого аддона
52
+ */
53
+ backButtonClassName?: string;
54
+ /**
55
+ * Дополнительный класс
56
+ */
57
+ className?: string;
58
+ /**
59
+ * Дополнительный класс для контента
60
+ */
61
+ contentClassName?: string;
62
+ /**
63
+ * Дополнительный класс для нижнего аддона
64
+ */
65
+ bottomAddonsClassName?: string;
66
+ /**
67
+ * Выравнивание заголовка
68
+ */
69
+ align?: 'left' | 'center';
70
+ /**
71
+ * Обрезать ли заголовок
72
+ */
73
+ trim?: boolean;
74
+ /**
75
+ * Фиксирует шапку
76
+ */
77
+ sticky?: boolean;
78
+ /**
79
+ * Идентификатор для систем автоматизированного тестирования
80
+ */
81
+ dataTestId?: string;
82
+ /**
83
+ * Фоновое изображение
84
+ */
85
+ imageUrl?: string;
86
+ /**
87
+ * Иконка closer.
88
+ */
89
+ closerIcon?: React.ElementType;
90
+ /**
91
+ * Обработчик закрытия
92
+ */
93
+ onClose?: CloserProps['onClose'];
94
+ /**
95
+ * обработчик клика по кнопке "назад"
96
+ */
97
+ onBack?: () => void;
98
+ /**
99
+ * Вид шапки - мобильный или десктоп
100
+ */
101
+ view: 'desktop' | 'mobile';
102
+ /**
103
+ * Ссылка на родительскую ноду overflow: auto
104
+ */
105
+ scrollableParentRef?: React.RefObject<HTMLDivElement>;
106
+ };
107
+ type ContentParams = {
108
+ extraClassName?: string;
109
+ wrapperRef?: React.RefObject<HTMLDivElement>;
110
+ style?: React.CSSProperties;
111
+ hidden?: boolean;
112
+ };
113
+ export { NavigationBarProps, ContentParams };
@@ -0,0 +1,23 @@
1
+ import { ReactNode } from 'react';
2
+ type SpecialDays = Record<number, boolean>;
3
+ type DayAddons = {
4
+ date: Date | number;
5
+ addon: ReactNode;
6
+ };
7
+ type SpecialDaysAddon = Record<number, ReactNode>;
8
+ type Day = {
9
+ date: Date;
10
+ disabled?: boolean;
11
+ event?: boolean;
12
+ selected?: boolean;
13
+ holiday?: boolean;
14
+ dayAddon?: ReactNode;
15
+ };
16
+ type Month = {
17
+ date: Date;
18
+ disabled?: boolean;
19
+ };
20
+ type DateShift = 'prev' | 'prevWeek' | 'prevMonth' | 'startOfWeek' | 'next' | 'nextWeek' | 'nextMonth' | 'endOfWeek';
21
+ type View = 'years' | 'months' | 'days';
22
+ type SelectorView = 'month-only' | 'full';
23
+ export { SpecialDays, DayAddons, SpecialDaysAddon, Day, Month, DateShift, View, SelectorView };
@@ -0,0 +1,95 @@
1
+ import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
2
+ type StyleColors = {
3
+ default: {
4
+ [key: string]: string;
5
+ };
6
+ inverted: {
7
+ [key: string]: string;
8
+ };
9
+ };
10
+ type ComponentProps = {
11
+ /**
12
+ * Тип кнопки
13
+ * @default secondary
14
+ */
15
+ view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
16
+ /**
17
+ * Слот слева
18
+ */
19
+ leftAddons?: ReactNode;
20
+ /**
21
+ * Слот справа
22
+ */
23
+ rightAddons?: ReactNode;
24
+ /**
25
+ * Размер компонента
26
+ * @default m
27
+ */
28
+ size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
29
+ /**
30
+ * Растягивает компонент на ширину контейнера
31
+ * @default false
32
+ */
33
+ block?: boolean;
34
+ /**
35
+ * Дополнительный класс
36
+ */
37
+ className?: string;
38
+ /**
39
+ * Дополнительный класс для спиннера
40
+ */
41
+ spinnerClassName?: string;
42
+ /**
43
+ * Выводит ссылку в виде кнопки
44
+ */
45
+ href?: string;
46
+ /**
47
+ * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
48
+ */
49
+ Component?: ElementType;
50
+ /**
51
+ * Идентификатор для систем автоматизированного тестирования
52
+ */
53
+ dataTestId?: string;
54
+ /**
55
+ * Показать лоадер
56
+ * @default false
57
+ */
58
+ loading?: boolean;
59
+ /**
60
+ * Не переносить текст кнопки на новую строку
61
+ * @default false
62
+ */
63
+ nowrap?: boolean;
64
+ /**
65
+ * Набор цветов для компонента
66
+ */
67
+ colors?: 'default' | 'inverted';
68
+ /**
69
+ * Дочерние элементы.
70
+ */
71
+ children?: ReactNode;
72
+ /**
73
+ * Основные стили компонента.
74
+ */
75
+ styles: {
76
+ [key: string]: string;
77
+ };
78
+ /**
79
+ * Стили компонента для default и inverted режима.
80
+ */
81
+ colorStylesMap: StyleColors;
82
+ };
83
+ type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
84
+ type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
85
+ type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
86
+ type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
87
+ type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
88
+ type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
89
+ /**
90
+ * Контрольная точка, с нее начинается desktop версия
91
+ * @default 1024
92
+ */
93
+ breakpoint?: number;
94
+ };
95
+ export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };