@alfalab/core-components-calendar-range 7.1.6 → 7.2.0

package/cssm/index.js

@@ -9,6 +9,7 @@ require('./views/popover.js');
 require('classnames');
 require('date-fns/startOfMonth');
 require('@alfalab/core-components-calendar-input/cssm');
+require('@alfalab/core-components-calendar-input/cssm/shared');
 require('@alfalab/core-components-date-input/cssm');
 require('@alfalab/hooks');
 require('./components/divider/Component.js');
@@ -23,7 +24,8 @@ require('./views/index.module.css');
 require('./views/static.js');
 require('date-fns/endOfMonth');
 require('date-fns/isSameMonth');
-require('@alfalab/core-components-calendar/cssm');
+require('@alfalab/core-components-calendar/cssm/desktop');
+require('@alfalab/core-components-calendar/cssm/shared');
 require('./utils.js');
 
 

package/cssm/shared-848397c5.d.ts

@@ -0,0 +1,35 @@
+// eslint-disable-next-line @typescript-eslint/naming-convention
+type usePeriodProps = {
+    /**
+     * Обработчик изменения выделенного периода
+     */
+    onPeriodChange?: (selectedFrom?: number, selectedTo?: number) => void;
+    /**
+     * Начальное значение начала выделенного периода
+     */
+    initialSelectedFrom?: number;
+    /**
+     * Начальное значение конца выделенного периода
+     */
+    initialSelectedTo?: number;
+};
+declare function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelectedTo }?: usePeriodProps): {
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+    setStart: (date?: number) => void;
+    setEnd: (date?: number) => void;
+    resetPeriod: () => void;
+    updatePeriod: (date?: number) => void;
+};
+declare function usePeriodWithReset({ onPeriodChange, initialSelectedFrom, initialSelectedTo }?: usePeriodProps): {
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+    setStart: (date?: number) => void;
+    setEnd: (date?: number) => void;
+    resetPeriod: () => void;
+    updatePeriod: (date?: number) => void;
+};
+export { usePeriod, usePeriodWithReset };
+export { russianWeekDay, dateInLimits, limitDate, monthName, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS, DATE_FORMAT } from "./utils-8c6198cc";
+export { useCalendar } from "./useCalendar-71d94e2b";
+export * from "./index-f034f741";

package/cssm/shared-c111a9fd.d.ts

@@ -0,0 +1,13 @@
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const NATIVE_DATE_FORMAT = "yyyy-MM-dd";
+declare const DATE_MASK: (string | RegExp)[];
+declare const IS_BROWSER: boolean;
+declare const SUPPORTS_INPUT_TYPE_DATE: boolean;
+declare const formatDate: (date: Date | number, dateFormat?: string) => string;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+/**
+ * Возвращает `true`, если поддерживается `input[type="date"]`
+ */
+declare function isInputDateSupported(): boolean;
+declare const isValidInputValue: (newInputValue: string | undefined, minDate: number | undefined, maxDate: number | undefined, offDays?: Array<number | Date>) => boolean;
+export { DATE_FORMAT, NATIVE_DATE_FORMAT, DATE_MASK, IS_BROWSER, SUPPORTS_INPUT_TYPE_DATE, formatDate, parseDateString, isInputDateSupported, isValidInputValue };

package/cssm/typings-5684a67d.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+type SpecialDays = Record<number, boolean>;
+type DayAddons = {
+    date: Date | number;
+    addon: ReactNode;
+};
+type SpecialDaysAddon = Record<number, ReactNode>;
+type Day = {
+    date: Date;
+    disabled?: boolean;
+    event?: boolean;
+    selected?: boolean;
+    holiday?: boolean;
+    dayAddon?: ReactNode;
+};
+type Month = {
+    date: Date;
+    disabled?: boolean;
+};
+type DateShift = 'prev' | 'prevWeek' | 'prevMonth' | 'startOfWeek' | 'next' | 'nextWeek' | 'nextMonth' | 'endOfWeek';
+type View = 'years' | 'months' | 'days';
+type SelectorView = 'month-only' | 'full';
+export { SpecialDays, DayAddons, SpecialDaysAddon, Day, Month, DateShift, View, SelectorView };

package/cssm/typings-9211a437.d.ts

@@ -0,0 +1,95 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
+type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };

package/cssm/useCalendar-71d94e2b.d.ts

@@ -0,0 +1,97 @@
+/// <reference types="react" />
+import { KeyboardEvent, MouseEvent, Ref } from 'react';
+import { Day, DayAddons, Month, View } from "./typings-5684a67d";
+type UseCalendarProps = {
+    /**
+     * Активный вид (выбор дней, месяцев, лет)
+     */
+    view?: View;
+    /**
+     * Выбранный месяц (controlled)
+     */
+    month?: Date;
+    /**
+     * Начальный месяц
+     */
+    defaultMonth: Date;
+    /**
+     * Минимальная дата, доступная для выбора
+     */
+    minDate?: Date;
+    /**
+     * Максимальная дата, доступная для выбора
+     */
+    maxDate?: Date;
+    /**
+     * Выбранная дата
+     */
+    selected?: Date;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список отключенных для выбора дней
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Список выходных дней
+     */
+    holidays?: Array<Date | number>;
+    /**
+     * Обработчик изменения месяца (или года)
+     */
+    onMonthChange?: (month: number) => void;
+    /**
+     * Обработчик выбора даты
+     */
+    onChange?: (date: number) => void;
+    /**
+     * Дополнительный контент под числом
+     */
+    dayAddons?: DayAddons[];
+};
+declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, }: UseCalendarProps): {
+    activeMonth: Date;
+    weeks: Day[][];
+    months: Month[];
+    years: Date[];
+    canSetPrevMonth: boolean;
+    canSetNextMonth: boolean;
+    highlighted: number | Date | undefined;
+    setPrevMonth: () => void;
+    setNextMonth: () => void;
+    setMonthByDate: (newMonth: Date) => void;
+    getDayProps: (day: Day) => {
+        'data-date': number;
+        'aria-selected': boolean | undefined;
+        ref: (node: HTMLTableDataCellElement) => void;
+        tabIndex: number;
+        onMouseEnter: (event: MouseEvent<HTMLTableDataCellElement>) => void;
+        onMouseLeave: () => void;
+        onClick: (event: MouseEvent<HTMLTableDataCellElement>) => void;
+    };
+    getMonthProps: (currMonth: Month) => {
+        'data-date': number;
+        'aria-selected': boolean;
+        ref: (node: HTMLButtonElement) => void;
+        tabIndex: number;
+        disabled: boolean | undefined;
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    };
+    getYearProps: (year: Date) => {
+        'data-date': number;
+        'aria-selected': boolean;
+        ref: (node: HTMLButtonElement) => void;
+        tabIndex: number;
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    };
+    getRootProps: ({ ref }: {
+        ref?: Ref<HTMLDivElement> | undefined;
+    }) => {
+        onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+        ref: (instance: HTMLDivElement | null) => void;
+        tabIndex: number;
+    };
+};
+export { UseCalendarProps, useCalendar };

package/cssm/utils-8c6198cc.d.ts

@@ -0,0 +1,88 @@
+import { ReactNode } from 'react';
+import { DateShift, Day, DayAddons, Month, SpecialDays, SpecialDaysAddon } from "./typings-5684a67d";
+declare const DAYS_IN_WEEK = 7;
+declare const MONTHS_IN_YEAR = 12;
+declare const SUNDAY_INDEX = 6;
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const NATIVE_DATE_FORMAT = "yyyy-MM-dd";
+declare const WEEKDAYS: string[];
+declare const MONTHS: string[];
+/**
+ * Возвращает «правильный» индекс дня недели, 0 - пн, 1 - вт и так далее.
+ */
+declare function russianWeekDay(date: Date): number;
+/**
+ * Возвращает таблицу-календарь с заполненными датами для переданного месяца
+ */
+declare function generateWeeks(month: Date, options: {
+    minDate?: Date;
+    maxDate?: Date;
+    selected?: Date;
+    eventsMap?: SpecialDays;
+    offDaysMap?: SpecialDays;
+    holidaysMap?: SpecialDays;
+    dayAddonsMap?: SpecialDaysAddon;
+}): Day[][];
+/**
+ * Возвращает массив с месяцами для переданного года
+ */
+declare function generateMonths(year: Date, options: {
+    minMonth?: Date;
+    maxMonth?: Date;
+}): Month[];
+/**
+ * Возвращает массив лет от minYear до maxYear
+ */
+declare function generateYears(minYear: Date, maxYear: Date): Date[];
+/**
+ * Добавляет метаданные для переданного дня
+ */
+declare function buildDay(day: Date, options: {
+    minDate?: Date;
+    maxDate?: Date;
+    selected?: Date;
+    eventsMap?: SpecialDays;
+    offDaysMap?: SpecialDays;
+    holidaysMap?: SpecialDays;
+    dayAddonsMap?: SpecialDaysAddon;
+}): Day;
+/**
+ * Добавляет метаданные для переданного месяца
+ */
+declare function buildMonth(month: Date, options: {
+    minMonth?: Date;
+    maxMonth?: Date;
+}): Month;
+/**
+ * Ограничивает дату на отрезке [minDate, maxDate]
+ */
+declare function limitDate(date: Date | number, minDate?: Date | number, maxDate?: Date | number): Date;
+/**
+ * Проверяет, находится ли переданная дата в указанных границах
+ */
+declare function dateInLimits(date?: Date | number | null, minDate?: Date | number, maxDate?: Date | number): boolean | 0 | null | undefined;
+/**
+ * Возвращает русское название месяца с большой буквы
+ */
+declare function monthName(month: Date): string;
+/**
+ * Превращает массив в объект, у которого ключи составляются из элементов массива
+ */
+declare function dateArrayToHashTable(arr: Array<Date | number>): Record<number, boolean>;
+declare function addonArrayToHashTable(arr: DayAddons[]): Record<number, ReactNode>;
+/**
+ * Возвращает корректный отрезок дат для выделения
+ */
+declare function getSelectionRange(from?: Date | number, to?: Date | number, highlighted?: Date | number): {
+    start: Date;
+    end: Date;
+} | null;
+declare function modifyDateByShift(shift: DateShift, date: Date, minDate?: Date, maxDate?: Date, offDaysMap?: Record<number, boolean>): Date;
+/**
+ * Если дата была выбрана мышкой — фокусную обводку не видно
+ * TODO: добавить в useFocus возможность переключать метод ввода программно
+ */
+declare function simulateTab(node: HTMLElement): void;
+declare const formatDate: (date: Date | number, dateFormat?: string) => string;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString };

package/cssm/utils-e0a54580.d.ts

@@ -0,0 +1,8 @@
+import { PeriodType } from "./index-f034f741";
+declare const formatPeriod: (valueFrom: Date, valueTo: Date, periodType: PeriodType, showCurrentYear?: boolean) => string;
+declare const getYearSelectorValue: (valueFrom: Date | undefined, showCurrentYear: boolean) => number | "";
+declare const shiftValues: (valueFrom: Date, valueTo: Date, periodType: PeriodType, direction: 'prev' | 'next') => {
+    valueFrom: Date;
+    valueTo: Date;
+};
+export { formatPeriod, getYearSelectorValue, shiftValues };

package/cssm/views/popover.js

@@ -7,6 +7,7 @@ var React = require('react');
 var cn = require('classnames');
 var startOfMonth = require('date-fns/startOfMonth');
 var coreComponentsCalendarInput = require('@alfalab/core-components-calendar-input/cssm');
+var shared = require('@alfalab/core-components-calendar-input/cssm/shared');
 var coreComponentsDateInput = require('@alfalab/core-components-date-input/cssm');
 var hooks$1 = require('@alfalab/hooks');
 var components_divider_Component = require('../components/divider/Component.js');
@@ -36,17 +37,17 @@ var CalendarRangePopover = function (_a) {
      * — при следующем открытии в календаре будет установлен начальный месяц
      */
     var _o = React.useState(0), resetKey = _o[0], setResetKey = _o[1];
-    var dateFrom = coreComponentsCalendarInput.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
-        ? coreComponentsCalendarInput.parseDateString(inputFromValue).getTime()
+    var dateFrom = shared.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
+        ? shared.parseDateString(inputFromValue).getTime()
         : null;
-    var dateTo = coreComponentsCalendarInput.isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays)
-        ? coreComponentsCalendarInput.parseDateString(inputToValue).getTime()
+    var dateTo = shared.isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays)
+        ? shared.parseDateString(inputToValue).getTime()
         : null;
     var _p = React.useState(coreComponentsDateInput.isCompleteDateInput(inputFromValue) && dateFrom === null), inputFromInvalid = _p[0], setInputFromInvalid = _p[1];
     var _q = React.useState(coreComponentsDateInput.isCompleteDateInput(inputToValue) && dateTo === null), inputToInvalid = _q[0], setInputToInvalid = _q[1];
     var bothInvalid = coreComponentsDateInput.isCompleteDateInput(inputFromValue) &&
         coreComponentsDateInput.isCompleteDateInput(inputToValue) &&
-        coreComponentsCalendarInput.parseDateString(inputFromValue).getTime() > coreComponentsCalendarInput.parseDateString(inputToValue).getTime();
+        shared.parseDateString(inputFromValue).getTime() > shared.parseDateString(inputToValue).getTime();
     var hasValidateError = inputFromInvalid || inputToInvalid || bothInvalid;
     var _r = hooks.usePopoverViewMonthes({
         dateFrom: dateFrom,
@@ -55,11 +56,11 @@ var CalendarRangePopover = function (_a) {
         resetKey: resetKey,
     }), monthFrom = _r.monthFrom, monthTo = _r.monthTo, handleMonthFromChange = _r.handleMonthFromChange, handleMonthToChange = _r.handleMonthToChange;
     var handleValidInputFrom = React.useCallback(function () {
-        setInputFromInvalid(inputFromValue !== '' && !coreComponentsCalendarInput.isValidInputValue(inputFromValue, minDate, maxDate, offDays));
+        setInputFromInvalid(inputFromValue !== '' && !shared.isValidInputValue(inputFromValue, minDate, maxDate, offDays));
     }, [inputFromValue, maxDate, minDate, offDays]);
     var handleValidInputTo = React.useCallback(function () {
         setInputToInvalid(inputToValue !== '' &&
-            !coreComponentsCalendarInput.isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays));
+            !shared.isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays));
     }, [dateFrom, inputToValue, maxDate, minDate, offDays]);
     var handleInputFromChange = function (event, payload) {
         var _a;
@@ -109,7 +110,7 @@ var CalendarRangePopover = function (_a) {
         // eslint-disable-next-line no-nested-ternary
         var inputDateTo = returnInvalidDates
             ? coreComponentsDateInput.isCompleteDateInput(inputToValue)
-                ? coreComponentsCalendarInput.parseDateString(inputToValue).getTime()
+                ? shared.parseDateString(inputToValue).getTime()
                 : null
             : dateTo;
         onChange({

package/cssm/views/static.js

@@ -11,8 +11,9 @@ var isSameMonth = require('date-fns/isSameMonth');
 var max = require('date-fns/max');
 var startOfMonth = require('date-fns/startOfMonth');
 var subMonths = require('date-fns/subMonths');
-var coreComponentsCalendar = require('@alfalab/core-components-calendar/cssm');
-var coreComponentsCalendarInput = require('@alfalab/core-components-calendar-input/cssm');
+var desktop = require('@alfalab/core-components-calendar/cssm/desktop');
+var shared$1 = require('@alfalab/core-components-calendar/cssm/shared');
+var shared = require('@alfalab/core-components-calendar-input/cssm/shared');
 var coreComponentsDateInput = require('@alfalab/core-components-date-input/cssm');
 var components_divider_Component = require('../components/divider/Component.js');
 var hooks = require('../hooks.js');
@@ -38,25 +39,25 @@ var CalendarRangeStatic = function (_a) {
     var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth__default.default(new Date()).getTime() : _b, _c = _a.defaultMonthPosition, defaultMonthPosition = _c === void 0 ? 'left' : _c, minDate = _a.minDate, maxDate = _a.maxDate, _d = _a.valueFrom, valueFrom = _d === void 0 ? '' : _d, _e = _a.valueTo, valueTo = _e === void 0 ? '' : _e, _f = _a.onDateFromChange, onDateFromChange = _f === void 0 ? function () { return null; } : _f, _g = _a.onDateToChange, onDateToChange = _g === void 0 ? function () { return null; } : _g, _h = _a.onChange, onChange = _h === void 0 ? function () { return null; } : _h, onError = _a.onError, _j = _a.inputFromProps, inputFromProps = _j === void 0 ? {} : _j, _k = _a.inputToProps, inputToProps = _k === void 0 ? {} : _k, offDays = _a.offDays, events = _a.events, _l = _a.returnInvalidDates, returnInvalidDates = _l === void 0 ? false : _l, dataTestId = _a.dataTestId;
     var _m = React.useState(valueFrom), inputFromValue = _m[0], setInputFromValue = _m[1];
     var _o = React.useState(valueTo), inputToValue = _o[0], setInputToValue = _o[1];
-    var dateFrom = coreComponentsCalendarInput.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
-        ? coreComponentsCalendarInput.parseDateString(inputFromValue).getTime()
+    var dateFrom = shared.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
+        ? shared.parseDateString(inputFromValue).getTime()
         : null;
-    var dateTo = coreComponentsCalendarInput.isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays)
-        ? coreComponentsCalendarInput.parseDateString(inputToValue).getTime()
+    var dateTo = shared.isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays)
+        ? shared.parseDateString(inputToValue).getTime()
         : null;
     if (coreComponentsDateInput.isCompleteDateInput(inputToValue) && !dateTo && !returnInvalidDates) {
         dateFrom = null;
     }
     var bothInvalid = coreComponentsDateInput.isCompleteDateInput(inputFromValue) &&
         coreComponentsDateInput.isCompleteDateInput(inputToValue) &&
-        coreComponentsCalendarInput.parseDateString(inputFromValue).getTime() > coreComponentsCalendarInput.parseDateString(inputToValue).getTime();
+        shared.parseDateString(inputFromValue).getTime() > shared.parseDateString(inputToValue).getTime();
     var _p = React.useState(undefined), highlightedDate = _p[0], setHighlightedDate = _p[1];
-    var period = coreComponentsCalendar.usePeriodWithReset({
-        initialSelectedFrom: dateFrom ? coreComponentsCalendarInput.parseDateString(inputFromValue).getTime() : undefined,
-        initialSelectedTo: dateTo ? coreComponentsCalendarInput.parseDateString(inputToValue).getTime() : undefined,
+    var period = shared$1.usePeriodWithReset({
+        initialSelectedFrom: dateFrom ? shared.parseDateString(inputFromValue).getTime() : undefined,
+        initialSelectedTo: dateTo ? shared.parseDateString(inputToValue).getTime() : undefined,
     });
-    var validateInputFromValue = React.useCallback(function (value) { return coreComponentsCalendarInput.isValidInputValue(value, minDate, dateFrom || maxDate, offDays); }, [dateFrom, maxDate, minDate, offDays]);
-    var validateInputToValue = React.useCallback(function (value) { return coreComponentsCalendarInput.isValidInputValue(value, dateFrom || minDate, maxDate, offDays); }, [dateFrom, minDate, maxDate, offDays]);
+    var validateInputFromValue = React.useCallback(function (value) { return shared.isValidInputValue(value, minDate, dateFrom || maxDate, offDays); }, [dateFrom, maxDate, minDate, offDays]);
+    var validateInputToValue = React.useCallback(function (value) { return shared.isValidInputValue(value, dateFrom || minDate, maxDate, offDays); }, [dateFrom, minDate, maxDate, offDays]);
     var _q = React.useState(coreComponentsDateInput.isCompleteDateInput(inputFromValue) && dateFrom === null), inputFromInvalid = _q[0], setInputFromInvalid = _q[1];
     var _r = React.useState(coreComponentsDateInput.isCompleteDateInput(inputToValue) && dateTo === null), inputToInvalid = _r[0], setInputToInvalid = _r[1];
     var hasValidateError = bothInvalid || inputFromInvalid || inputToInvalid;
@@ -101,10 +102,10 @@ var CalendarRangeStatic = function (_a) {
         setInputToValue('');
     }, []);
     React.useEffect(function () {
-        setInputFromValue(period.selectedFrom ? coreComponentsCalendarInput.formatDate(period.selectedFrom) : '');
+        setInputFromValue(period.selectedFrom ? shared.formatDate(period.selectedFrom) : '');
     }, [period.selectedFrom]);
     React.useEffect(function () {
-        setInputToValue(period.selectedTo ? coreComponentsCalendarInput.formatDate(period.selectedTo) : '');
+        setInputToValue(period.selectedTo ? shared.formatDate(period.selectedTo) : '');
     }, [period.selectedTo]);
     React.useEffect(function () {
         setInputFromValue(valueFrom);
@@ -146,7 +147,7 @@ var CalendarRangeStatic = function (_a) {
             // eslint-disable-next-line no-nested-ternary
             var inputDateTo = returnInvalidDates
                 ? coreComponentsDateInput.isCompleteDateInput(inputToValue)
-                    ? coreComponentsCalendarInput.parseDateString(inputToValue).getTime()
+                    ? shared.parseDateString(inputToValue).getTime()
                     : null
                 : dateTo;
             onDateToChange({
@@ -169,8 +170,8 @@ var CalendarRangeStatic = function (_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hasValidateError]);
     var rangeProps = hooks.useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
-    var CalendarFromComponent = dateInputFromProps.Calendar || coreComponentsCalendar.Calendar;
-    var CalendarToComponent = dateInputToProps.Calendar || coreComponentsCalendar.Calendar;
+    var CalendarFromComponent = dateInputFromProps.Calendar || desktop.CalendarDesktop;
+    var CalendarToComponent = dateInputToProps.Calendar || desktop.CalendarDesktop;
     var minMaxInSameMonth = minDate && maxDate && isSameMonth__default.default(minDate, maxDate);
     return (
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events

package/desktop-63dec22f.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop-2e2b2125";
+export {};

package/esm/Component-5684a67d.d.ts

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from 'react';
+import { SelectorView } from "./typings-5684a67d";
+type HeaderProps = {
+    /**
+     * Вид шапки — месяц и год или только месяц
+     */
+    view?: SelectorView;
+    /**
+     * Отображать тень? (нужна при прокрутке)
+     */
+    withShadow?: boolean;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+declare const Header: FC<HeaderProps>;
+export { HeaderProps, Header };

package/esm/Component-63dec22f.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import React from 'react';
+import { ButtonHTMLAttributes } from "react";
+type SelectButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Вид кнопки
+     */
+    view?: 'default' | 'filled' | 'outlined' | 'selected';
+};
+declare const SelectButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Вид кнопки
+     */
+    view?: "default" | "outlined" | "filled" | "selected" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { SelectButtonProps, SelectButton };

package/esm/Component-8c6198cc.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { FC } from 'react';
+import { Month } from "./typings-5684a67d";
+type MonthsTableProps = {
+    /**
+     * Массив месяцев
+     */
+    months?: Month[];
+    /**
+     * Выбранный месяц
+     */
+    selectedMonth?: Date;
+    /**
+     * Доп пропсы для переданного месяца
+     */
+    getMonthProps: (day: Month) => Record<string, unknown>;
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
+};
+declare const MonthsTable: FC<MonthsTableProps>;
+export { MonthsTableProps, MonthsTable };

package/esm/Component.desktop-2e2b2125.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
+type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonDesktopProps, ButtonDesktop };