@ozen-ui/kit 0.46.0 → 0.47.1

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 (83) hide show
  1. package/Calendar/package.json +5 -0
  2. package/__inner__/cjs/components/Autocomplete/Autocomplete.js +1 -1
  3. package/__inner__/cjs/components/Calendar/Calendar.css +43 -0
  4. package/__inner__/cjs/components/Calendar/Calendar.d.ts +4 -0
  5. package/__inner__/cjs/components/Calendar/Calendar.js +90 -0
  6. package/__inner__/cjs/components/Calendar/CalendarContext.d.ts +14 -0
  7. package/__inner__/cjs/components/Calendar/CalendarContext.js +8 -0
  8. package/__inner__/cjs/components/Calendar/components/CalendarAdditionalControls/CalendarAdditionalControls.css +3 -0
  9. package/__inner__/cjs/components/Calendar/components/CalendarAdditionalControls/CalendarAdditionalControls.d.ts +9 -0
  10. package/__inner__/cjs/components/Calendar/components/CalendarAdditionalControls/CalendarAdditionalControls.js +25 -0
  11. package/__inner__/cjs/components/Calendar/components/CalendarAdditionalControls/index.d.ts +1 -0
  12. package/__inner__/cjs/components/Calendar/components/CalendarAdditionalControls/index.js +4 -0
  13. package/__inner__/cjs/components/Calendar/components/CalendarGrid/CalendarGrid.css +44 -0
  14. package/__inner__/cjs/components/Calendar/components/CalendarGrid/CalendarGrid.d.ts +7 -0
  15. package/__inner__/cjs/components/Calendar/components/CalendarGrid/CalendarGrid.js +47 -0
  16. package/__inner__/cjs/components/Calendar/components/CalendarGrid/index.d.ts +1 -0
  17. package/__inner__/cjs/components/Calendar/components/CalendarGrid/index.js +4 -0
  18. package/__inner__/cjs/components/Calendar/components/CalendarGrid/utils.d.ts +2 -0
  19. package/__inner__/cjs/components/Calendar/components/CalendarGrid/utils.js +21 -0
  20. package/__inner__/cjs/components/Calendar/components/CalendarItem/CalendarItem.d.ts +13 -0
  21. package/__inner__/cjs/components/Calendar/components/CalendarItem/CalendarItem.js +19 -0
  22. package/__inner__/cjs/components/Calendar/components/CalendarItem/CalendatItem.css +55 -0
  23. package/__inner__/cjs/components/Calendar/components/CalendarItem/index.d.ts +1 -0
  24. package/__inner__/cjs/components/Calendar/components/CalendarItem/index.js +4 -0
  25. package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/CalendarSwitcher.css +25 -0
  26. package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/CalendarSwitcher.d.ts +10 -0
  27. package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/CalendarSwitcher.js +54 -0
  28. package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/index.d.ts +1 -0
  29. package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/index.js +4 -0
  30. package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/utils.d.ts +2 -0
  31. package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/utils.js +13 -0
  32. package/__inner__/cjs/components/Calendar/components/index.d.ts +4 -0
  33. package/__inner__/cjs/components/Calendar/components/index.js +7 -0
  34. package/__inner__/cjs/components/Calendar/constants.d.ts +4 -0
  35. package/__inner__/cjs/components/Calendar/constants.js +7 -0
  36. package/__inner__/cjs/components/Calendar/index.d.ts +2 -0
  37. package/__inner__/cjs/components/Calendar/index.js +5 -0
  38. package/__inner__/cjs/components/Calendar/types.d.ts +54 -0
  39. package/__inner__/cjs/components/Calendar/types.js +5 -0
  40. package/__inner__/cjs/components/ThemeProvider/types.d.ts +2 -0
  41. package/__inner__/cjs/locale/locale.js +43 -0
  42. package/__inner__/esm/components/Autocomplete/Autocomplete.js +1 -1
  43. package/__inner__/esm/components/Calendar/Calendar.css +43 -0
  44. package/__inner__/esm/components/Calendar/Calendar.d.ts +4 -0
  45. package/__inner__/esm/components/Calendar/Calendar.js +87 -0
  46. package/__inner__/esm/components/Calendar/CalendarContext.d.ts +14 -0
  47. package/__inner__/esm/components/Calendar/CalendarContext.js +4 -0
  48. package/__inner__/esm/components/Calendar/components/CalendarAdditionalControls/CalendarAdditionalControls.css +3 -0
  49. package/__inner__/esm/components/Calendar/components/CalendarAdditionalControls/CalendarAdditionalControls.d.ts +9 -0
  50. package/__inner__/esm/components/Calendar/components/CalendarAdditionalControls/CalendarAdditionalControls.js +20 -0
  51. package/__inner__/esm/components/Calendar/components/CalendarAdditionalControls/index.d.ts +1 -0
  52. package/__inner__/esm/components/Calendar/components/CalendarAdditionalControls/index.js +1 -0
  53. package/__inner__/esm/components/Calendar/components/CalendarGrid/CalendarGrid.css +44 -0
  54. package/__inner__/esm/components/Calendar/components/CalendarGrid/CalendarGrid.d.ts +7 -0
  55. package/__inner__/esm/components/Calendar/components/CalendarGrid/CalendarGrid.js +43 -0
  56. package/__inner__/esm/components/Calendar/components/CalendarGrid/index.d.ts +1 -0
  57. package/__inner__/esm/components/Calendar/components/CalendarGrid/index.js +1 -0
  58. package/__inner__/esm/components/Calendar/components/CalendarGrid/utils.d.ts +2 -0
  59. package/__inner__/esm/components/Calendar/components/CalendarGrid/utils.js +16 -0
  60. package/__inner__/esm/components/Calendar/components/CalendarItem/CalendarItem.d.ts +13 -0
  61. package/__inner__/esm/components/Calendar/components/CalendarItem/CalendarItem.js +16 -0
  62. package/__inner__/esm/components/Calendar/components/CalendarItem/CalendatItem.css +55 -0
  63. package/__inner__/esm/components/Calendar/components/CalendarItem/index.d.ts +1 -0
  64. package/__inner__/esm/components/Calendar/components/CalendarItem/index.js +1 -0
  65. package/__inner__/esm/components/Calendar/components/CalendarSwitcher/CalendarSwitcher.css +25 -0
  66. package/__inner__/esm/components/Calendar/components/CalendarSwitcher/CalendarSwitcher.d.ts +10 -0
  67. package/__inner__/esm/components/Calendar/components/CalendarSwitcher/CalendarSwitcher.js +51 -0
  68. package/__inner__/esm/components/Calendar/components/CalendarSwitcher/index.d.ts +1 -0
  69. package/__inner__/esm/components/Calendar/components/CalendarSwitcher/index.js +1 -0
  70. package/__inner__/esm/components/Calendar/components/CalendarSwitcher/utils.d.ts +2 -0
  71. package/__inner__/esm/components/Calendar/components/CalendarSwitcher/utils.js +9 -0
  72. package/__inner__/esm/components/Calendar/components/index.d.ts +4 -0
  73. package/__inner__/esm/components/Calendar/components/index.js +4 -0
  74. package/__inner__/esm/components/Calendar/constants.d.ts +4 -0
  75. package/__inner__/esm/components/Calendar/constants.js +4 -0
  76. package/__inner__/esm/components/Calendar/index.d.ts +2 -0
  77. package/__inner__/esm/components/Calendar/index.js +2 -0
  78. package/__inner__/esm/components/Calendar/types.d.ts +54 -0
  79. package/__inner__/esm/components/Calendar/types.js +2 -0
  80. package/__inner__/esm/components/ThemeProvider/types.d.ts +2 -0
  81. package/__inner__/esm/locale/locale.js +43 -0
  82. package/package.json +5 -4
  83. package/DatePicker/package.json +0 -5
@@ -0,0 +1,2 @@
1
+ export * from './Calendar';
2
+ export * from './types';
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./Calendar"), exports);
5
+ tslib_1.__exportStar(require("./types"), exports);
@@ -0,0 +1,54 @@
1
+ import type { ElementType, MouseEvent, ReactElement } from 'react';
2
+ import type { DPExcludeConfig, DPDayInteger } from '@rehookify/datepicker';
3
+ import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
4
+ import type { CalendarSwitcherProps } from './components';
5
+ import type { CALENDAR_DEFAULT_AS } from './constants';
6
+ export declare const calendarStepVariant: readonly ["days", "months", "years"];
7
+ export declare const calendarSizeVariant: readonly ["s", "m", "l"];
8
+ export type CalendarStepVariant = (typeof calendarStepVariant)[number];
9
+ export type CalendarOnChange = (date: Date) => void;
10
+ export type CalendarOnOffsetDateChange = (date: Date) => void;
11
+ export type CalendarSizeVariant = (typeof calendarSizeVariant)[number];
12
+ export type CalendarExclude = DPExcludeConfig;
13
+ export type CalendarStartDay = DPDayInteger;
14
+ export type CalendarRenderAdditionalControls = (props: {
15
+ date?: Date;
16
+ }) => ReactElement;
17
+ export type CalendarBaseProps = {
18
+ /** Выбранная дата */
19
+ value?: Date | null;
20
+ /** Выбранная дата по умолчанию (неконтролируемое состояние) */
21
+ defaultValue?: Date;
22
+ /** Смещение календаря – на какой странице показать календарь */
23
+ offsetDate?: Date;
24
+ /** Смещение календаря по умолчанию */
25
+ defaultOffsetDate?: Date;
26
+ /** Обработчик событий выбора даты */
27
+ onChange?: CalendarOnChange;
28
+ /** Обработчик событий на смещение календаря */
29
+ onOffsetDateChange?: CalendarOnOffsetDateChange;
30
+ /** Локализация */
31
+ locale?: Intl.LocalesArgument;
32
+ /** Первый день недели календаря */
33
+ startDay?: CalendarStartDay;
34
+ /** Размер */
35
+ size?: CalendarSizeVariant;
36
+ /** Исключенные даты календаря */
37
+ exclude?: CalendarExclude;
38
+ /** Ограничение выбора дат по меньшей дате */
39
+ minDate?: Date;
40
+ /** Ограничение выбора дат по большей дате */
41
+ maxDate?: Date;
42
+ /** Обработчик нажатия на кнопку месяца */
43
+ onMonthClick?: (e: MouseEvent<HTMLElement>, date: Date) => void;
44
+ /** Обработчик нажатия на кнопку дня */
45
+ onDayClick?: (e: MouseEvent<HTMLElement>, date: Date) => void;
46
+ /** Обработчик нажатия на кнопку года */
47
+ onYearClick?: (e: MouseEvent<HTMLElement>, date: Date) => void;
48
+ /** Дополнительные контролы – рендер функция */
49
+ renderAdditionalControls?: CalendarRenderAdditionalControls;
50
+ /** Cвойства компонента CalendarSwitcher */
51
+ calendarSwitcherProps?: CalendarSwitcherProps;
52
+ children?: never;
53
+ };
54
+ export type CalendarProps<As extends ElementType = typeof CALENDAR_DEFAULT_AS> = PolymorphicComponentPropsWithoutRef<CalendarBaseProps, As>;
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.calendarSizeVariant = exports.calendarStepVariant = void 0;
4
+ exports.calendarStepVariant = ['days', 'months', 'years'];
5
+ exports.calendarSizeVariant = ['s', 'm', 'l'];
@@ -6,6 +6,7 @@ import type { BackdropProps } from '../Backdrop';
6
6
  import type { BadgeProps } from '../Badge';
7
7
  import type { ButtonProps } from '../Button';
8
8
  import type { ButtonProps as ButtonPropsNext } from '../ButtonNext';
9
+ import type { CalendarProps } from '../Calendar';
9
10
  import type { CardProps } from '../Card';
10
11
  import type { CheckboxProps } from '../Checkbox';
11
12
  import type { CheckboxGroupProps } from '../CheckboxGroup';
@@ -75,6 +76,7 @@ export type Theme = {
75
76
  Badge?: Partial<BadgeProps>;
76
77
  Button?: Partial<ButtonProps>;
77
78
  ButtonNext?: Partial<ButtonPropsNext>;
79
+ Calendar?: Partial<CalendarProps>;
78
80
  Card?: Partial<CardProps>;
79
81
  Checkbox?: Partial<CheckboxProps>;
80
82
  CheckboxGroup?: Partial<CheckboxGroupProps>;
@@ -54,6 +54,20 @@ exports.ruRU = {
54
54
  return '';
55
55
  },
56
56
  },
57
+ Calendar: {
58
+ locale: 'ru-RU',
59
+ calendarSwitcherProps: {
60
+ getPeriodSwitchAriaLabel: function (step) {
61
+ if (step === 'days') {
62
+ return ['Предыдущий месяц', 'Следующий месяц'];
63
+ }
64
+ if (step === 'months') {
65
+ return ['Предыдущий год', 'Следующий год'];
66
+ }
67
+ return ['Предыдущий период', 'Следующий период'];
68
+ },
69
+ },
70
+ },
57
71
  },
58
72
  };
59
73
  exports.kkKZ = {
@@ -108,6 +122,20 @@ exports.kkKZ = {
108
122
  return '';
109
123
  },
110
124
  },
125
+ Calendar: {
126
+ locale: 'kk-KZ',
127
+ calendarSwitcherProps: {
128
+ getPeriodSwitchAriaLabel: function (step) {
129
+ if (step === 'days') {
130
+ return ['Алдыңғы ай', 'Келесі ай'];
131
+ }
132
+ if (step === 'months') {
133
+ return ['Өткен жыл', 'Келесі жыл'];
134
+ }
135
+ return ['Алдыңғы кезең', 'Келесі кезең'];
136
+ },
137
+ },
138
+ },
111
139
  },
112
140
  };
113
141
  exports.enUS = {
@@ -162,5 +190,20 @@ exports.enUS = {
162
190
  return '';
163
191
  },
164
192
  },
193
+ Calendar: {
194
+ locale: 'en-US',
195
+ startDay: 0,
196
+ calendarSwitcherProps: {
197
+ getPeriodSwitchAriaLabel: function (step) {
198
+ if (step === 'days') {
199
+ return ['Previous month', 'Next month'];
200
+ }
201
+ if (step === 'months') {
202
+ return ['Previous year', 'Next year'];
203
+ }
204
+ return ['Previous period', 'Next period'];
205
+ },
206
+ },
207
+ },
165
208
  },
166
209
  };
@@ -80,6 +80,7 @@ function AutocompleteRender(inProps, ref) {
80
80
  /** Актуализация значения текстового поля после его покидания */
81
81
  var onBlur = function (e) {
82
82
  var _a;
83
+ (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
83
84
  if (allowCustomValue) {
84
85
  return;
85
86
  }
@@ -88,7 +89,6 @@ function AutocompleteRender(inProps, ref) {
88
89
  setInputValue(value);
89
90
  onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, value);
90
91
  }
91
- (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
92
92
  };
93
93
  /** Ждем выполнения анимации на закрытие и делаем сброс */
94
94
  var onExited = function () {
@@ -0,0 +1,43 @@
1
+ /* stylelint-disable */
2
+ .Calendar {
3
+ --calendar-grid-gap: var(--spacing-4xs);
4
+ --calendar-grid-margin: var(--spacing-2xs);
5
+ display: inline-flex;
6
+ flex-direction: column;
7
+ }
8
+ .Calendar_size_s {
9
+ --calendar-grid-size: 236px;
10
+ --calendar-switcher-height: var(--control-height-s);
11
+ --calendar-switcher-margin: 0 var(--spacing-xs);
12
+ --calendar-switcher-padding: 0 var(--control-padding-2xs);
13
+
14
+ font: var(--typography-text-s-font);
15
+
16
+ letter-spacing: var(--typography-text-s-letter_spacing, 0);
17
+
18
+ text-transform: var(--typography-text-s-text_transform, none);
19
+ }
20
+ .Calendar_size_m {
21
+ --calendar-grid-size: 292px;
22
+ --calendar-switcher-height: var(--control-height-m);
23
+ --calendar-switcher-margin: 0 var(--spacing-xs);
24
+ --calendar-switcher-padding: 0 var(--control-padding-xs);
25
+
26
+ font: var(--typography-text-m-font);
27
+
28
+ letter-spacing: var(--typography-text-m-letter_spacing, 0);
29
+
30
+ text-transform: var(--typography-text-m-text_transform, none);
31
+ }
32
+ .Calendar_size_l {
33
+ --calendar-grid-size: 348px;
34
+ --calendar-switcher-height: var(--control-height-l);
35
+ --calendar-switcher-margin: 0 var(--spacing-xs);
36
+ --calendar-switcher-padding: 0 var(--control-padding-s);
37
+
38
+ font: var(--typography-text-l-font);
39
+
40
+ letter-spacing: var(--typography-text-l-letter_spacing, 0);
41
+
42
+ text-transform: var(--typography-text-l-text_transform, none);
43
+ }
@@ -0,0 +1,4 @@
1
+ import './Calendar.css';
2
+ import type { CalendarBaseProps } from './types';
3
+ export declare const cnCalendar: import("@bem-react/classname").ClassNameFormatter;
4
+ export declare const Calendar: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<CalendarBaseProps, "div">;
@@ -0,0 +1,87 @@
1
+ import { __assign, __read, __rest } from "tslib";
2
+ import './Calendar.css';
3
+ import React, { useState, useEffect } from 'react';
4
+ import { DatePickerProvider } from '@rehookify/datepicker';
5
+ import { useControlled } from '../../hooks/useControlled';
6
+ import { useThemeProps } from '../../hooks/useThemeProps';
7
+ import { cn } from '../../utils/classname';
8
+ import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
9
+ import { Divider } from '../Divider';
10
+ import { CalendarContext } from './CalendarContext';
11
+ import { CalendarAdditionalControls, CalendarGrid, CalendarSwitcher, } from './components';
12
+ import { CALENDAR_DEFAULT_AS, CALENDAR_DEFAULT_SIZE, CALENDAR_DEFAULT_START_DAY, } from './constants';
13
+ export var cnCalendar = cn('Calendar');
14
+ export var Calendar = polymorphicComponentWithRef(function (inProps, ref) {
15
+ var props = useThemeProps({
16
+ props: inProps,
17
+ name: 'Calendar',
18
+ });
19
+ var _a = props.size, size = _a === void 0 ? CALENDAR_DEFAULT_SIZE : _a, _b = props.startDay, startDay = _b === void 0 ? CALENDAR_DEFAULT_START_DAY : _b, _c = props.as, Tag = _c === void 0 ? CALENDAR_DEFAULT_AS : _c, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onOffsetDateChangeProp = props.onOffsetDateChange, onMonthClick = props.onMonthClick, onDayClick = props.onDayClick, onYearClick = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, className = props.className, calendarSwitcherProps = props.calendarSwitcherProps, other = __rest(props, ["size", "startDay", "as", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "defaultOffsetDate", "exclude", "minDate", "maxDate", "className", "calendarSwitcherProps"]);
20
+ var _d = __read(useState('days'), 2), step = _d[0], setStep = _d[1];
21
+ var _e = __read(useControlled({
22
+ value: valueProp,
23
+ defaultValue: defaultValue,
24
+ name: 'Calendar',
25
+ state: 'value',
26
+ }), 2), value = _e[0], setValue = _e[1];
27
+ var _f = __read(useControlled({
28
+ value: offsetDateProp,
29
+ defaultValue: defaultOffsetDate,
30
+ name: 'Calendar',
31
+ state: 'offsetDate',
32
+ }), 2), offsetDate = _f[0], setOffsetDateState = _f[1];
33
+ var onDatesChange = function (data) {
34
+ var value = data[0];
35
+ if (value) {
36
+ setValue(value);
37
+ onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value);
38
+ }
39
+ };
40
+ var onOffsetChange = function (date) {
41
+ setOffsetDateState(date);
42
+ onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(date);
43
+ };
44
+ useEffect(function () {
45
+ if (value)
46
+ onOffsetChange(value);
47
+ }, [value]);
48
+ var config = {
49
+ calendar: {
50
+ startDay: startDay,
51
+ },
52
+ locale: {
53
+ locale: locale,
54
+ day: 'numeric',
55
+ weekday: 'short',
56
+ },
57
+ exclude: exclude,
58
+ offsetDate: offsetDate,
59
+ onDatesChange: onDatesChange,
60
+ onOffsetChange: onOffsetChange,
61
+ dates: { minDate: minDate, maxDate: maxDate },
62
+ years: { numberOfYears: 15 },
63
+ selectedDates: value ? [value] : [],
64
+ };
65
+ // Управление представлениями календаря
66
+ var goStep = function (step) {
67
+ setStep(step);
68
+ };
69
+ return (React.createElement(DatePickerProvider, { config: config },
70
+ React.createElement(CalendarContext.Provider, { value: {
71
+ size: size,
72
+ step: step,
73
+ goStep: goStep,
74
+ minDate: minDate,
75
+ maxDate: maxDate,
76
+ onMonthClick: onMonthClick,
77
+ onDayClick: onDayClick,
78
+ onYearClick: onYearClick,
79
+ onOffsetChange: setOffsetDateState,
80
+ } },
81
+ React.createElement(Tag, __assign({ className: cnCalendar({ size: size }, [className]) }, other, { ref: ref }),
82
+ React.createElement(CalendarSwitcher, __assign({}, calendarSwitcherProps)),
83
+ React.createElement(Divider, { color: "secondary" }),
84
+ React.createElement(CalendarGrid, null),
85
+ React.createElement(CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));
86
+ });
87
+ Calendar.displayName = 'Calendar';
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import type { CalendarStepVariant, CalendarSizeVariant, CalendarBaseProps } from './types';
3
+ export interface CalendarContextValue {
4
+ size?: CalendarSizeVariant;
5
+ step: CalendarStepVariant;
6
+ goStep?: (step: CalendarStepVariant) => void;
7
+ onMonthClick?: CalendarBaseProps['onMonthClick'];
8
+ onDayClick?: CalendarBaseProps['onDayClick'];
9
+ onYearClick?: CalendarBaseProps['onYearClick'];
10
+ minDate?: Date;
11
+ maxDate?: Date;
12
+ onOffsetChange?(d: Date): void;
13
+ }
14
+ export declare const CalendarContext: React.Context<CalendarContextValue>;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ export var CalendarContext = React.createContext({
3
+ step: 'days',
4
+ });
@@ -0,0 +1,3 @@
1
+ .CalendarAdditionalControls {
2
+ margin: var(--calendar-grid-margin);
3
+ }
@@ -0,0 +1,9 @@
1
+ import './CalendarAdditionalControls.css';
2
+ import type { FC } from 'react';
3
+ import type { CalendarBaseProps } from '../../index';
4
+ export declare const cnCalendarAdditionalControls: import("@bem-react/classname").ClassNameFormatter;
5
+ type CalendarAdditionalControlsProps = {
6
+ renderAdditionalControls?: CalendarBaseProps['renderAdditionalControls'];
7
+ };
8
+ export declare const CalendarAdditionalControls: FC<CalendarAdditionalControlsProps>;
9
+ export {};
@@ -0,0 +1,20 @@
1
+ import './CalendarAdditionalControls.css';
2
+ import React from 'react';
3
+ import { useDatePickerContext } from '@rehookify/datepicker';
4
+ import { cn } from '../../../../utils/classname';
5
+ import { renderContent } from '../../../../utils/renderContent';
6
+ import { Divider } from '../../../Divider';
7
+ export var cnCalendarAdditionalControls = cn('CalendarAdditionalControls');
8
+ export var CalendarAdditionalControls = function (_a) {
9
+ var renderAdditionalControls = _a.renderAdditionalControls;
10
+ var selectedDates = useDatePickerContext().data.selectedDates;
11
+ if (!renderAdditionalControls) {
12
+ return null;
13
+ }
14
+ return (React.createElement(React.Fragment, null,
15
+ React.createElement(Divider, { color: "secondary" }),
16
+ React.createElement("div", { className: cnCalendarAdditionalControls() }, renderContent({
17
+ content: renderAdditionalControls,
18
+ props: { date: selectedDates[0] },
19
+ }))));
20
+ };
@@ -0,0 +1 @@
1
+ export * from './CalendarAdditionalControls';
@@ -0,0 +1 @@
1
+ export * from './CalendarAdditionalControls';
@@ -0,0 +1,44 @@
1
+ .CalendarGrid {
2
+ display: grid;
3
+ justify-content: start;
4
+ gap: var(--calendar-grid-gap);
5
+ block-size: var(--calendar-grid-size);
6
+ inline-size: var(--calendar-grid-size);
7
+ margin: var(--calendar-grid-margin);
8
+ }
9
+
10
+ .CalendarGrid > * {
11
+ display: flex;
12
+ align-items: center;
13
+ justify-content: center;
14
+ }
15
+
16
+ .CalendarDays {
17
+ grid-template-columns: repeat(7, 1fr);
18
+ }
19
+
20
+ .CalendarDays > * {
21
+ inline-size: calc(
22
+ (var(--calendar-grid-size) - var(--calendar-grid-gap) * 6) / 7
23
+ );
24
+ }
25
+
26
+ .CalendarMonths {
27
+ grid-template-columns: repeat(3, 1fr);
28
+ }
29
+
30
+ .CalendarMonths > * {
31
+ block-size: calc(
32
+ (var(--calendar-grid-size) - var(--calendar-grid-gap) * 3) / 4
33
+ );
34
+ }
35
+
36
+ .CalendarYears {
37
+ grid-template-columns: repeat(3, 1fr);
38
+ }
39
+
40
+ .CalendarYears > * {
41
+ block-size: calc(
42
+ (var(--calendar-grid-size) - var(--calendar-grid-gap) * 4) / 5
43
+ );
44
+ }
@@ -0,0 +1,7 @@
1
+ import './CalendarGrid.css';
2
+ import React from 'react';
3
+ export declare const cnCalendarGrid: import("@bem-react/classname").ClassNameFormatter;
4
+ export declare const cnCalendarDays: import("@bem-react/classname").ClassNameFormatter;
5
+ export declare const cnCalendarMoths: import("@bem-react/classname").ClassNameFormatter;
6
+ export declare const cnCalendarYears: import("@bem-react/classname").ClassNameFormatter;
7
+ export declare const CalendarGrid: () => React.JSX.Element;
@@ -0,0 +1,43 @@
1
+ import { __assign } from "tslib";
2
+ import './CalendarGrid.css';
3
+ import React, { useContext } from 'react';
4
+ import { classnames } from '@bem-react/classnames';
5
+ import { useDatePickerContext } from '@rehookify/datepicker';
6
+ import { capitalizeFirstLetter as capitalize } from '../../../../utils/capitalizeFirstLetter';
7
+ import { cn } from '../../../../utils/classname';
8
+ import { Typography } from '../../../Typography';
9
+ import { CalendarContext } from '../../CalendarContext';
10
+ import { CalendarItem } from '../CalendarItem';
11
+ export var cnCalendarGrid = cn('CalendarGrid');
12
+ export var cnCalendarDays = cn('CalendarDays');
13
+ export var cnCalendarMoths = cn('CalendarMonths');
14
+ export var cnCalendarYears = cn('CalendarYears');
15
+ export var CalendarGrid = function () {
16
+ var _a = useContext(CalendarContext), step = _a.step, goStep = _a.goStep, size = _a.size, onYearClick = _a.onYearClick, onDayClick = _a.onDayClick, onMonthClick = _a.onMonthClick;
17
+ var _b = useDatePickerContext(), _c = _b.data, weekDays = _c.weekDays, calendars = _c.calendars, years = _c.years, months = _c.months, _d = _b.propGetters, dayButton = _d.dayButton, monthButton = _d.monthButton, yearButton = _d.yearButton;
18
+ var _e = calendars[0] || {}, days = _e.days, month = _e.month;
19
+ var handleClickOnDay = function (e, date) {
20
+ onDayClick === null || onDayClick === void 0 ? void 0 : onDayClick(e, date);
21
+ };
22
+ var handleClickOnMonth = function (e, date) {
23
+ goStep === null || goStep === void 0 ? void 0 : goStep('days');
24
+ onMonthClick === null || onMonthClick === void 0 ? void 0 : onMonthClick(e, date);
25
+ };
26
+ var handleClickOnYear = function (e, date) {
27
+ goStep === null || goStep === void 0 ? void 0 : goStep('months');
28
+ onYearClick === null || onYearClick === void 0 ? void 0 : onYearClick(e, date);
29
+ };
30
+ return (React.createElement(React.Fragment, null,
31
+ step === 'days' && (React.createElement("div", { className: classnames(cnCalendarGrid(), cnCalendarDays()) },
32
+ weekDays.map(function (day) { return (React.createElement(Typography, __assign({ key: "".concat(month, "-").concat(day), color: "tertiary" }, (size && { variant: "text-".concat(size) })), day && capitalize(day))); }), days === null || days === void 0 ? void 0 :
33
+ days.map(function (dpDay) { return (React.createElement(CalendarItem, __assign({ size: size, current: dpDay.now, selected: dpDay.selected, key: dpDay.$date.toDateString() }, dayButton(dpDay, {
34
+ onClick: handleClickOnDay,
35
+ disabled: dpDay.disabled || !dpDay.inCurrentMonth,
36
+ }), { tabIndex: dpDay.disabled || !dpDay.inCurrentMonth ? -1 : 0 }), dpDay.day)); }))),
37
+ step === 'months' && (React.createElement("div", { className: classnames(cnCalendarGrid(), cnCalendarMoths()) }, months === null || months === void 0 ? void 0 : months.map(function (dpMonth) { return (React.createElement(CalendarItem, __assign({ size: size, current: dpMonth.now, key: dpMonth.$date.toDateString(), selected: dpMonth.selected }, monthButton(dpMonth, {
38
+ onClick: handleClickOnMonth,
39
+ }), { tabIndex: dpMonth.disabled ? -1 : 0 }), dpMonth.month && capitalize(dpMonth.month))); }))),
40
+ step === 'years' && (React.createElement("div", { className: classnames(cnCalendarGrid(), cnCalendarYears()) }, years === null || years === void 0 ? void 0 : years.map(function (dpYear) { return (React.createElement(CalendarItem, __assign({ key: dpYear.$date.toDateString(), current: dpYear.now, selected: dpYear.selected, size: size }, yearButton(dpYear, {
41
+ onClick: handleClickOnYear,
42
+ }), { tabIndex: dpYear.disabled ? -1 : 0 }), dpYear.year)); })))));
43
+ };
@@ -0,0 +1 @@
1
+ export * from './CalendarGrid';
@@ -0,0 +1 @@
1
+ export * from './CalendarGrid';
@@ -0,0 +1,2 @@
1
+ export declare const isBeforeMinMonth: (month: Date, minDate: Date | undefined) => boolean;
2
+ export declare const isAfterMaxMonth: (month: Date, maxDate: Date | undefined) => boolean;
@@ -0,0 +1,16 @@
1
+ export var isBeforeMinMonth = function (month, minDate) {
2
+ var _a;
3
+ if (!minDate) {
4
+ return false;
5
+ }
6
+ return (month.getTime() <
7
+ ((_a = new Date(minDate === null || minDate === void 0 ? void 0 : minDate.getFullYear(), minDate === null || minDate === void 0 ? void 0 : minDate.getMonth(), 1)) === null || _a === void 0 ? void 0 : _a.getTime()));
8
+ };
9
+ export var isAfterMaxMonth = function (month, maxDate) {
10
+ var _a;
11
+ if (!maxDate) {
12
+ return false;
13
+ }
14
+ return (month.getTime() >
15
+ ((_a = new Date(maxDate === null || maxDate === void 0 ? void 0 : maxDate.getFullYear(), maxDate === null || maxDate === void 0 ? void 0 : maxDate.getMonth(), 1)) === null || _a === void 0 ? void 0 : _a.getTime()));
16
+ };
@@ -0,0 +1,13 @@
1
+ import './CalendatItem.css';
2
+ import type { ComponentPropsWithRef } from 'react';
3
+ import React from 'react';
4
+ import type { CALENDAR_ITEM_DEFAULT_TAG } from '../../constants';
5
+ import type { CalendarSizeVariant } from '../../index';
6
+ export declare const cnCalendarItem: import("@bem-react/classname").ClassNameFormatter;
7
+ export type CalendarItemProps = Omit<ComponentPropsWithRef<typeof CALENDAR_ITEM_DEFAULT_TAG>, 'size'> & {
8
+ current?: boolean;
9
+ selected?: boolean;
10
+ disabled?: boolean;
11
+ size?: CalendarSizeVariant;
12
+ };
13
+ export declare const CalendarItem: React.ForwardRefExoticComponent<Omit<CalendarItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,16 @@
1
+ import { __assign, __rest } from "tslib";
2
+ import './CalendatItem.css';
3
+ import React, { forwardRef } from 'react';
4
+ import { cn } from '../../../../utils/classname';
5
+ import { ButtonBase } from '../../../ButtonBase';
6
+ export var cnCalendarItem = cn('CalendarItem');
7
+ export var CalendarItem = forwardRef(function (_a, ref) {
8
+ var current = _a.current, selected = _a.selected, disabled = _a.disabled, className = _a.className, size = _a.size, children = _a.children, other = __rest(_a, ["current", "selected", "disabled", "className", "size", "children"]);
9
+ return (React.createElement(ButtonBase, __assign({ className: cnCalendarItem({
10
+ size: size,
11
+ current: current,
12
+ selected: selected,
13
+ disabled: disabled,
14
+ }, [className]), disabled: disabled }, other, { ref: ref }), children));
15
+ });
16
+ CalendarItem.displayName = 'CalendarItem';
@@ -0,0 +1,55 @@
1
+ /* stylelint-disable */
2
+ .CalendarItem {
3
+ border: none;
4
+ color: var(--color-content-primary);
5
+ background-color: inherit;
6
+ cursor: pointer;
7
+ transition:
8
+ background-color var(--transition-default),
9
+ border-color var(--transition-default),
10
+ box-shadow var(--transition-default),
11
+ opacity var(--transition-default);
12
+ }
13
+ .CalendarItem_current {
14
+ color: var(--color-content-action);
15
+ }
16
+ .CalendarItem_size_s {
17
+ font: var(--typography-text-s-font);
18
+ letter-spacing: var(--typography-text-s-letter_spacing, 0);
19
+ text-transform: var(--typography-text-s-text_transform, none);
20
+ border-radius: var(--border-radius-m);
21
+ }
22
+ .CalendarItem_size_m {
23
+ font: var(--typography-text-m-font);
24
+ letter-spacing: var(--typography-text-m-letter_spacing, 0);
25
+ text-transform: var(--typography-text-m-text_transform, none);
26
+ border-radius: var(--border-radius-m);
27
+ }
28
+ .CalendarItem_size_l {
29
+ font: var(--typography-text-l-font);
30
+ letter-spacing: var(--typography-text-l-letter_spacing, 0);
31
+ text-transform: var(--typography-text-l-text_transform, none);
32
+ border-radius: var(--border-radius-m);
33
+ }
34
+ .CalendarItem:hover:not(.CalendarItem_selected) {
35
+ background-color: var(--color-background-main-hover);
36
+ }
37
+ .CalendarItem:active:not(.CalendarItem_selected) {
38
+ background-color: var(--color-background-main-pressed);
39
+ }
40
+ .CalendarItem_selected {
41
+ color: var(--color-content-action-on);
42
+ background-color: var(--color-background-action);
43
+ }
44
+ .CalendarItem_disabled {
45
+ pointer-events: none;
46
+ background-color: inherit;
47
+ color: var(--color-content-tertiary);
48
+ }
49
+ .CalendarItem:focus:not(:focus-visible) {
50
+ box-shadow: none;
51
+ }
52
+ .CalendarItem:focus {
53
+ outline: 0;
54
+ box-shadow: var(--shadow-outline-focused);
55
+ }
@@ -0,0 +1 @@
1
+ export * from './CalendarItem';
@@ -0,0 +1 @@
1
+ export * from './CalendarItem';
@@ -0,0 +1,25 @@
1
+ .CalendarSwitcher {
2
+ block-size: var(--calendar-switcher-height);
3
+ margin: var(--calendar-switcher-margin);
4
+ padding: var(--calendar-switcher-padding);
5
+
6
+ display: flex;
7
+ align-items: center;
8
+ flex-shrink: 0;
9
+ justify-content: space-between;
10
+ box-sizing: border-box;
11
+ }
12
+
13
+ .CalendarSwitcher-StartActions,
14
+ .CalendarSwitcher-EndActions {
15
+ display: flex;
16
+ align-items: center;
17
+ }
18
+
19
+ .CalendarSwitcher-StartActions {
20
+ gap: var(--spacing-2xs);
21
+ }
22
+
23
+ .CalendarSwitcher-EndActions {
24
+ gap: var(--spacing-m);
25
+ }
@@ -0,0 +1,10 @@
1
+ import './CalendarSwitcher.css';
2
+ import type { ComponentPropsWithRef, ComponentRef } from 'react';
3
+ import React from 'react';
4
+ import type { CalendarStepVariant } from '../../index';
5
+ export declare const cnCalendarSwitcher: import("@bem-react/classname").ClassNameFormatter;
6
+ export type CalendarSwitcherProps = {
7
+ getPeriodSwitchAriaLabel?: (step: CalendarStepVariant) => [string, string];
8
+ } & ComponentPropsWithRef<'div'>;
9
+ export type CalendarSwitcherRef = ComponentRef<'div'>;
10
+ export declare const CalendarSwitcher: React.ForwardRefExoticComponent<Omit<CalendarSwitcherProps, "ref"> & React.RefAttributes<HTMLDivElement>>;