@alfalab/core-components 23.12.0 → 25.0.0

package/calendar-range/cssm/utils.d.ts

@@ -1,11 +1,2 @@
-type ValueState = {
-    date: number | null;
-    value: string;
-};
-declare const initialValueState: {
-    date: null;
-    value: string;
-};
-declare const getCorrectValueState: (stateValue: ValueState, propValue?: string | undefined, minDate?: number | undefined, maxDate?: number | undefined) => ValueState;
 declare const isDayButton: (node: HTMLElement | null) => string | false | null | undefined;
-export { ValueState, initialValueState, getCorrectValueState, isDayButton };
+export { isDayButton };

package/calendar-range/cssm/utils.js

@@ -1,22 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var coreComponentsCalendar = require('../../calendar/cssm');
-var coreComponentsCalendarInput = require('../../calendar-input/cssm');
-
-var initialValueState = { date: null, value: '' };
-var getCorrectValueState = function (stateValue, propValue, minDate, maxDate) {
-    var state = propValue === undefined
-        ? stateValue
-        : { value: propValue, date: coreComponentsCalendarInput.parseDateString(propValue).getTime() };
-    if (!coreComponentsCalendar.dateInLimits(state.date, minDate, maxDate)) {
-        state.date = null;
-    }
-    return state;
-};
 var isDayButton = function (node) {
     return node && node.tagName === 'BUTTON' && node.dataset.date;
 };
 
-exports.getCorrectValueState = getCorrectValueState;
-exports.initialValueState = initialValueState;
 exports.isDayButton = isDayButton;

package/calendar-range/cssm/{index.module.css → views/index.module.css}

@@ -12,12 +12,39 @@
 :root {
     --gap-xs: 8px;
 }
+:root {
+    --calendar-inner-width: 280px;
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
 .component {
     display: flex
 }
 .component button[aria-selected='true'] {
         cursor: pointer;
     }
+.component *[class*='errorIcon_'] {
+        display: none;
+    }
+.component *[class*='calendarIcon_'] {
+        margin-right: 0;
+    }
 .divider {
     height: 48px;
     display: flex;
@@ -33,3 +60,6 @@
         height: 1px;
         background-color: var(--color-light-graphic-primary);
     }
+.static .calendar {
+        width: var(--calendar-inner-width);
+    }

package/calendar-range/cssm/views/popover.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { CalendarRangeProps } from "../Component";
+type CalendarRangePopoverProps = Omit<CalendarRangeProps, 'calendarPosition'>;
+declare const CalendarRangePopover: FC<CalendarRangePopoverProps>;
+export { CalendarRangePopoverProps, CalendarRangePopover };

package/calendar-range/cssm/views/popover.js

@@ -0,0 +1,116 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../tslib.es6-ce870b46.js');
+var React = require('react');
+var cn = require('classnames');
+var startOfMonth = require('date-fns/startOfMonth');
+var coreComponentsCalendarInput = require('../../../calendar-input/cssm');
+var coreComponentsDateInput = require('../../../date-input/cssm');
+require('date-fns/addMonths');
+require('date-fns/subMonths');
+require('date-fns/max');
+require('date-fns/min');
+require('date-fns/isEqual');
+var hooks = require('../hooks.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultLegacy(startOfMonth);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var CalendarRangePopover = function (_a) {
+    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth__default['default'](new Date()).getTime() : _b, minDate = _a.minDate, maxDate = _a.maxDate, _c = _a.valueFrom, valueFrom = _c === void 0 ? '' : _c, _d = _a.valueTo, valueTo = _d === void 0 ? '' : _d, _e = _a.onDateFromChange, onDateFromChange = _e === void 0 ? function () { return null; } : _e, _f = _a.onDateToChange, onDateToChange = _f === void 0 ? function () { return null; } : _f, _g = _a.onChange, onChange = _g === void 0 ? function () { return null; } : _g, _h = _a.inputFromProps, inputFromProps = _h === void 0 ? {} : _h, _j = _a.inputToProps, inputToProps = _j === void 0 ? {} : _j, offDays = _a.offDays, events = _a.events, dataTestId = _a.dataTestId;
+    var _k = React.useState(valueFrom), inputFromValue = _k[0], setInputFromValue = _k[1];
+    var _l = React.useState(valueTo), inputToValue = _l[0], setInputToValue = _l[1];
+    /**
+     * Ключ для сброса календарей
+     * Пользователь открыл календарь, изменил месяц, но ничего не выбрал
+     * — при следующем открытии в календаре будет установлен начальный месяц
+     */
+    var _m = React.useState(0), resetKey = _m[0], setResetKey = _m[1];
+    var dateFrom = coreComponentsCalendarInput.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
+        ? coreComponentsCalendarInput.parseDateString(inputFromValue).getTime()
+        : null;
+    var dateTo = coreComponentsCalendarInput.isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays)
+        ? coreComponentsCalendarInput.parseDateString(inputToValue).getTime()
+        : null;
+    var _o = React.useState(coreComponentsDateInput.isCompleteDateInput(inputFromValue) && dateFrom === null), inputFromInvalid = _o[0], setInputFromInvalid = _o[1];
+    var _p = React.useState(coreComponentsDateInput.isCompleteDateInput(inputToValue) && dateTo === null), inputToInvalid = _p[0], setInputToInvalid = _p[1];
+    var bothInvalid = coreComponentsDateInput.isCompleteDateInput(inputFromValue) &&
+        coreComponentsDateInput.isCompleteDateInput(inputToValue) &&
+        coreComponentsCalendarInput.parseDateString(inputFromValue).getTime() > coreComponentsCalendarInput.parseDateString(inputToValue).getTime();
+    var _q = hooks.usePopoverViewMonthes({
+        dateFrom: dateFrom,
+        dateTo: dateTo,
+        defaultMonth: defaultMonth,
+        resetKey: resetKey,
+    }), monthFrom = _q.monthFrom, monthTo = _q.monthTo, handleMonthFromChange = _q.handleMonthFromChange, handleMonthToChange = _q.handleMonthToChange;
+    var handleValidInputFrom = React.useCallback(function () {
+        setInputFromInvalid(inputFromValue !== '' && !coreComponentsCalendarInput.isValidInputValue(inputFromValue, minDate, maxDate, offDays));
+    }, [inputFromValue, maxDate, minDate, offDays]);
+    var handleValidInputTo = React.useCallback(function () {
+        setInputToInvalid(inputToValue !== '' &&
+            !coreComponentsCalendarInput.isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays));
+    }, [dateFrom, inputToValue, maxDate, minDate, offDays]);
+    var handleInputFromChange = React.useCallback(function (_, payload) {
+        setInputFromValue(payload.value);
+    }, []);
+    var handleInputToChange = React.useCallback(function (_, payload) {
+        setInputToValue(payload.value);
+    }, []);
+    var handleInputFromBlur = React.useCallback(function () {
+        handleValidInputFrom();
+        setResetKey(+new Date());
+    }, [handleValidInputFrom]);
+    var handleInputToBlur = React.useCallback(function () {
+        handleValidInputTo();
+        setResetKey(+new Date());
+    }, [handleValidInputTo]);
+    var handleFromChange = React.useCallback(function (_, payload) {
+        setInputFromValue(payload.value);
+    }, []);
+    var handleToChange = React.useCallback(function (_, payload) {
+        setInputToValue(payload.value);
+    }, []);
+    React.useEffect(function () {
+        setInputFromValue(valueFrom);
+    }, [valueFrom]);
+    React.useEffect(function () {
+        setInputToValue(valueTo);
+    }, [valueTo]);
+    React.useEffect(function () {
+        onDateFromChange({ value: inputFromValue, date: dateFrom });
+        onChange({
+            valueFrom: inputFromValue,
+            valueTo: inputToValue,
+            dateFrom: dateFrom,
+            dateTo: dateTo,
+        });
+        if (!inputFromValue || coreComponentsDateInput.isCompleteDateInput(inputFromValue)) {
+            handleValidInputFrom();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputFromValue]);
+    React.useEffect(function () {
+        onDateToChange({ value: inputToValue, date: dateTo });
+        onChange({
+            valueFrom: inputFromValue,
+            valueTo: inputToValue,
+            dateFrom: dateFrom,
+            dateTo: dateTo,
+        });
+        if (!inputToValue || coreComponentsDateInput.isCompleteDateInput(inputToValue)) {
+            handleValidInputTo();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputToValue]);
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, className), "data-test-id": dataTestId },
+        React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, tslib_es6.__assign({}, inputFromProps, { useAnchorWidth: false, calendarPosition: 'popover', popoverPosition: 'bottom-start', error: inputFromInvalid || bothInvalid || inputFromProps.error, onChange: handleFromChange, onInputChange: handleInputFromChange, onBlur: handleInputFromBlur, value: inputFromValue, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events, calendarProps: tslib_es6.__assign(tslib_es6.__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: 'full' }) })),
+        React__default['default'].createElement("span", { className: styles__default['default'].divider }),
+        React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, tslib_es6.__assign({}, inputToProps, { useAnchorWidth: false, calendarPosition: 'popover', popoverPosition: 'bottom-end', error: inputToInvalid || bothInvalid || inputToProps.error, onChange: handleToChange, onInputChange: handleInputToChange, onBlur: handleInputToBlur, value: inputToValue, minDate: dateFrom || minDate, maxDate: maxDate, offDays: offDays, events: events, calendarProps: tslib_es6.__assign(tslib_es6.__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: 'full' }) }))));
+};
+
+exports.CalendarRangePopover = CalendarRangePopover;

package/calendar-range/cssm/views/static.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { CalendarRangeProps } from "../Component";
+type CalendarRangeStaticProps = Omit<CalendarRangeProps, 'calendarPosition'>;
+declare const CalendarRangeStatic: FC<CalendarRangeStaticProps>;
+export { CalendarRangeStaticProps, CalendarRangeStatic };

package/calendar-range/cssm/views/static.js

@@ -0,0 +1,173 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../tslib.es6-ce870b46.js');
+var React = require('react');
+var cn = require('classnames');
+var startOfMonth = require('date-fns/startOfMonth');
+var coreComponentsCalendarInput = require('../../../calendar-input/cssm');
+var coreComponentsDateInput = require('../../../date-input/cssm');
+var addMonths = require('date-fns/addMonths');
+var subMonths = require('date-fns/subMonths');
+var max = require('date-fns/max');
+require('date-fns/min');
+require('date-fns/isEqual');
+var hooks = require('../hooks.js');
+var styles = require('./index.module.css');
+var endOfMonth = require('date-fns/endOfMonth');
+var coreComponentsCalendar = require('../../../calendar/cssm');
+var utils = require('../utils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultLegacy(startOfMonth);
+var addMonths__default = /*#__PURE__*/_interopDefaultLegacy(addMonths);
+var subMonths__default = /*#__PURE__*/_interopDefaultLegacy(subMonths);
+var max__default = /*#__PURE__*/_interopDefaultLegacy(max);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+var endOfMonth__default = /*#__PURE__*/_interopDefaultLegacy(endOfMonth);
+
+var CalendarRangeStatic = function (_a) {
+    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth__default['default'](new Date()).getTime() : _b, minDate = _a.minDate, maxDate = _a.maxDate, _c = _a.valueFrom, valueFrom = _c === void 0 ? '' : _c, _d = _a.valueTo, valueTo = _d === void 0 ? '' : _d, _e = _a.onDateFromChange, onDateFromChange = _e === void 0 ? function () { return null; } : _e, _f = _a.onDateToChange, onDateToChange = _f === void 0 ? function () { return null; } : _f, _g = _a.onChange, onChange = _g === void 0 ? function () { return null; } : _g, _h = _a.inputFromProps, inputFromProps = _h === void 0 ? {} : _h, _j = _a.inputToProps, inputToProps = _j === void 0 ? {} : _j, offDays = _a.offDays, events = _a.events, dataTestId = _a.dataTestId;
+    var calendarToRef = React.useRef(null);
+    var _k = React.useState(valueFrom), inputFromValue = _k[0], setInputFromValue = _k[1];
+    var _l = React.useState(valueTo), inputToValue = _l[0], setInputToValue = _l[1];
+    var dateFrom = coreComponentsCalendarInput.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
+        ? coreComponentsCalendarInput.parseDateString(inputFromValue).getTime()
+        : null;
+    var dateTo = coreComponentsCalendarInput.isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays)
+        ? coreComponentsCalendarInput.parseDateString(inputToValue).getTime()
+        : null;
+    if (coreComponentsDateInput.isCompleteDateInput(inputToValue) && !dateTo) {
+        dateFrom = null;
+    }
+    var bothInvalid = coreComponentsDateInput.isCompleteDateInput(inputFromValue) &&
+        coreComponentsDateInput.isCompleteDateInput(inputToValue) &&
+        coreComponentsCalendarInput.parseDateString(inputFromValue).getTime() > coreComponentsCalendarInput.parseDateString(inputToValue).getTime();
+    var _m = React.useState(false), nextMonthHighlighted = _m[0], setNextMonthHighlighted = _m[1];
+    var period = coreComponentsCalendar.usePeriodWithReset({
+        initialSelectedFrom: dateFrom ? coreComponentsCalendarInput.parseDateString(inputFromValue).getTime() : undefined,
+        initialSelectedTo: dateTo ? coreComponentsCalendarInput.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 _o = React.useState(validateInputFromValue(inputFromValue) === false), inputFromInvalid = _o[0], setInputFromInvalid = _o[1];
+    var _p = React.useState(validateInputToValue(inputToValue) === false), inputToInvalid = _p[0], setInputToInvalid = _p[1];
+    var _q = hooks.useStaticViewMonthes({
+        selectedFrom: period.selectedFrom,
+        selectedTo: period.selectedTo,
+        defaultMonth: defaultMonth,
+    }), monthFrom = _q.monthFrom, monthTo = _q.monthTo, handleMonthFromChange = _q.handleMonthFromChange, handleMonthToChange = _q.handleMonthToChange;
+    var handleValidInputFrom = React.useCallback(function () {
+        setInputFromInvalid(inputFromValue !== '' && !validateInputFromValue(inputFromValue));
+    }, [inputFromValue, validateInputFromValue]);
+    var handleValidInputTo = React.useCallback(function () {
+        setInputToInvalid(inputToValue !== '' && !validateInputToValue(inputToValue));
+    }, [inputToValue, validateInputToValue]);
+    var handleInputFromChange = React.useCallback(function (_, payload) {
+        setInputFromValue(payload.value);
+    }, []);
+    var handleInputToChange = React.useCallback(function (_, payload) {
+        setInputToValue(payload.value);
+    }, []);
+    var handleCalendarToMouseOver = React.useCallback(function (event) {
+        var _a;
+        var target = event.target;
+        if ((_a = calendarToRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
+            var dayHighlighted_1 = utils.isDayButton(target) || utils.isDayButton(target.parentElement);
+            setNextMonthHighlighted(function (highlighted) {
+                if (highlighted && !dayHighlighted_1)
+                    return false;
+                if (!highlighted && dayHighlighted_1)
+                    return true;
+                return highlighted;
+            });
+        }
+        else {
+            setNextMonthHighlighted(false);
+        }
+    }, []);
+    var handleClearFrom = React.useCallback(function () {
+        setInputFromValue('');
+    }, []);
+    var handleClearTo = React.useCallback(function () {
+        setInputToValue('');
+    }, []);
+    React.useEffect(function () {
+        setInputFromValue(period.selectedFrom ? coreComponentsCalendarInput.formatDate(period.selectedFrom) : '');
+    }, [period.selectedFrom]);
+    React.useEffect(function () {
+        setInputToValue(period.selectedTo ? coreComponentsCalendarInput.formatDate(period.selectedTo) : '');
+    }, [period.selectedTo]);
+    React.useEffect(function () {
+        setInputFromValue(valueFrom);
+    }, [valueFrom]);
+    React.useEffect(function () {
+        setInputToValue(valueTo);
+    }, [valueTo]);
+    React.useEffect(function () {
+        if (!inputFromValue || coreComponentsDateInput.isCompleteDateInput(inputFromValue)) {
+            handleValidInputFrom();
+        }
+        period.setStart(dateFrom || undefined);
+        if (dateTo) {
+            period.setEnd(dateTo);
+        }
+        if (inputFromValue !== valueFrom) {
+            onDateFromChange({
+                value: inputFromValue,
+                date: dateFrom,
+            });
+            onChange({
+                valueFrom: inputFromValue,
+                valueTo: inputToValue,
+                dateFrom: dateFrom,
+                dateTo: dateTo,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputFromValue]);
+    React.useEffect(function () {
+        if (!inputToValue || coreComponentsDateInput.isCompleteDateInput(inputToValue)) {
+            handleValidInputTo();
+        }
+        period.setEnd(dateTo || undefined);
+        if (dateFrom) {
+            period.setStart(dateFrom);
+        }
+        if (inputToValue !== valueTo) {
+            onDateToChange({
+                value: inputToValue,
+                date: dateTo,
+            });
+            onChange({
+                valueFrom: inputFromValue,
+                valueTo: inputToValue,
+                dateFrom: dateFrom,
+                dateTo: dateTo,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputToValue]);
+    var calendarFromProps = inputFromProps.calendarProps, dateInputFromProps = tslib_es6.__rest(inputFromProps, ["calendarProps"]);
+    var calendarToProps = inputToProps.calendarProps, dateInputToProps = tslib_es6.__rest(inputToProps, ["calendarProps"]);
+    var CalendarFromComponent = dateInputFromProps.Calendar || coreComponentsCalendar.Calendar;
+    var CalendarToComponent = dateInputToProps.Calendar || coreComponentsCalendar.Calendar;
+    return (
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'].static, className), onMouseOver: handleCalendarToMouseOver, "data-test-id": dataTestId },
+        React__default['default'].createElement("div", null,
+            React__default['default'].createElement(coreComponentsDateInput.DateInput, tslib_es6.__assign({}, dateInputFromProps, { mobileMode: dateInputFromProps.mobileMode === 'popover'
+                    ? 'input'
+                    : dateInputFromProps.mobileMode, value: inputFromValue, onChange: handleInputFromChange, onClear: handleClearFrom, onBlur: handleValidInputFrom, error: bothInvalid || inputFromInvalid || dateInputFromProps.error, clear: true, block: true })),
+            React__default['default'].createElement(CalendarFromComponent, tslib_es6.__assign({}, calendarFromProps, { className: cn__default['default'](styles__default['default'].calendar, calendarFromProps === null || calendarFromProps === void 0 ? void 0 : calendarFromProps.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: maxDate && max__default['default']([maxDate, endOfMonth__default['default'](subMonths__default['default'](maxDate, 1))]).getTime(), selectedFrom: period.selectedFrom, selectedTo: period.selectedTo || (nextMonthHighlighted ? monthTo : undefined), rangeComplete: Boolean(period.selectedFrom && period.selectedTo) }))),
+        React__default['default'].createElement("span", { className: styles__default['default'].divider }),
+        React__default['default'].createElement("div", null,
+            React__default['default'].createElement(coreComponentsDateInput.DateInput, tslib_es6.__assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
+                    ? 'input'
+                    : dateInputToProps.mobileMode, value: inputToValue, onChange: handleInputToChange, onClear: handleClearTo, onBlur: handleValidInputTo, error: bothInvalid || inputToInvalid, clear: true, block: true })),
+            React__default['default'].createElement(CalendarToComponent, tslib_es6.__assign({}, calendarToProps, { className: cn__default['default'](styles__default['default'].calendar, calendarToProps === null || calendarToProps === void 0 ? void 0 : calendarToProps.className), ref: calendarToRef, month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minDate && startOfMonth__default['default'](addMonths__default['default'](minDate, 1)).getTime(), maxDate: maxDate, selectedFrom: period.selectedFrom, selectedTo: period.selectedTo })))));
+};
+
+exports.CalendarRangeStatic = CalendarRangeStatic;

package/calendar-range/esm/Component.d.ts

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { CalendarInputProps } from "../../calendar-input";
-import { ValueState } from "./utils";
 type CalendarRangeProps = {
     /**
      * Дополнительный класс
@@ -29,11 +28,34 @@ type CalendarRangeProps = {
     /**
      * Обработчик изменения даты от
      */
-    onDateFromChange?: (payload: ValueState) => void;
+    onDateFromChange?: (payload: {
+        date: number | null;
+        value: string;
+    }) => void;
     /**
      * Обработчик изменения даты до
      */
-    onDateToChange?: (payload: ValueState) => void;
+    onDateToChange?: (payload: {
+        date: number | null;
+        value: string;
+    }) => void;
+    /**
+     * Обработчик изменения
+     */
+    onChange?: (payload: {
+        dateFrom: number | null;
+        valueFrom: string;
+        dateTo: number | null;
+        valueTo: string;
+    }) => void;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    offDays?: Array<Date | number>;
     /**
      * Пропсы для инпута даты от
      */

package/calendar-range/esm/Component.js

@@ -1,190 +1,25 @@
-import React, { useState, useCallback } from 'react';
-import cn from 'classnames';
-import { startOfMonth, subMonths } from 'date-fns';
-import { usePeriod, dateInLimits } from '../../calendar/esm';
-import { parseDateString, isCompleteDateInput, formatDate, CalendarInput } from '../../calendar-input/esm';
-import { initialValueState, getCorrectValueState, isDayButton } from './utils.js';
-import { useCalendarMonthes } from './useCalendarMonthes.js';
-import { useCalendarMaxMinDates } from './useCalendarMaxMinDates.js';
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-var styles = {"component":"calendar-range__component_zi6if","divider":"calendar-range__divider_zi6if"};
-require('./index.css');
+import { _ as __rest, a as __assign } from './index.module-1e16472a.js';
+import React from 'react';
+import 'classnames';
+import 'date-fns/startOfMonth';
+import '../../calendar-input/esm';
+import '../../date-input/esm';
+import 'date-fns/addMonths';
+import 'date-fns/subMonths';
+import 'date-fns/max';
+import 'date-fns/min';
+import 'date-fns/isEqual';
+import './hooks.js';
+import { CalendarRangePopover } from './views/popover.js';
+import 'date-fns/endOfMonth';
+import '../../calendar/esm';
+import './utils.js';
+import { CalendarRangeStatic } from './views/static.js';
 
 var CalendarRange = function (_a) {
-    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth(new Date()).getTime() : _b, minDate = _a.minDate, maxDate = _a.maxDate, valueFrom = _a.valueFrom, valueTo = _a.valueTo, onDateFromChange = _a.onDateFromChange, onDateToChange = _a.onDateToChange, _c = _a.inputFromProps, inputFromProps = _c === void 0 ? {} : _c, _d = _a.inputToProps, inputToProps = _d === void 0 ? {} : _d, _e = _a.calendarPosition, calendarPosition = _e === void 0 ? 'static' : _e, dataTestId = _a.dataTestId;
-    var uncontrolled = valueFrom === undefined && valueTo === undefined;
-    var isPopover = calendarPosition === 'popover';
-    var period = usePeriod({
-        initialSelectedFrom: valueFrom ? parseDateString(valueFrom).getTime() : undefined,
-        initialSelectedTo: valueTo ? parseDateString(valueTo).getTime() : undefined,
-    });
-    var setStart = period.setStart, setEnd = period.setEnd, resetPeriod = period.resetPeriod;
-    var selectedFrom = period.selectedFrom, selectedTo = period.selectedTo;
-    if (!dateInLimits(selectedFrom, minDate, maxDate))
-        selectedFrom = undefined;
-    if (!dateInLimits(selectedTo, minDate, maxDate))
-        selectedTo = undefined;
-    var _f = useState(initialValueState), stateFrom = _f[0], setStateFrom = _f[1];
-    var _g = useState(initialValueState), stateTo = _g[0], setStateTo = _g[1];
-    var inputValueFrom = getCorrectValueState(stateFrom, valueFrom, minDate, maxDate);
-    var inputValueTo = getCorrectValueState(stateTo, valueTo, minDate, maxDate);
-    var handleStateFromChange = useCallback(function (newFromState) {
-        if (uncontrolled)
-            setStateFrom(newFromState);
-        if (onDateFromChange)
-            onDateFromChange(newFromState);
-    }, [onDateFromChange, uncontrolled]);
-    var handleStateToChange = useCallback(function (newToState) {
-        if (uncontrolled)
-            setStateTo(newToState);
-        if (onDateToChange)
-            onDateToChange(newToState);
-    }, [onDateToChange, uncontrolled]);
-    var _h = useCalendarMonthes({
-        inputValueFrom: inputValueFrom,
-        inputValueTo: inputValueTo,
-        defaultMonth: defaultMonth,
-        isPopover: isPopover,
-    }), monthFrom = _h.monthFrom, monthTo = _h.monthTo, handleMonthFromChange = _h.handleMonthFromChange, handleMonthToChange = _h.handleMonthToChange;
-    var handleInputFromChange = useCallback(function (_, _a) {
-        var value = _a.value, date = _a.date;
-        if (value === '') {
-            setStart(undefined);
-            handleStateFromChange(initialValueState);
-        }
-        if (!isCompleteDateInput(value)) {
-            return;
-        }
-        if (dateInLimits(date, minDate, maxDate)) {
-            setStart(date.getTime());
-            handleMonthFromChange(startOfMonth(date).getTime());
-            handleStateFromChange({ date: date.getTime(), value: value });
-        }
-        else {
-            setStart(undefined);
-            handleStateFromChange({ date: null, value: value });
-        }
-    }, [handleMonthFromChange, handleStateFromChange, maxDate, minDate, setStart]);
-    var handleInputToChange = useCallback(function (_, _a) {
-        var value = _a.value, date = _a.date;
-        if (value === '') {
-            setEnd(undefined);
-            handleStateToChange(initialValueState);
-        }
-        if (!isCompleteDateInput(value)) {
-            return;
-        }
-        if (dateInLimits(date, minDate, maxDate)) {
-            setEnd(date.getTime());
-            handleMonthToChange(subMonths(startOfMonth(date), 1).getTime());
-            handleStateToChange({ date: date.getTime(), value: value });
-        }
-        else {
-            setEnd(undefined);
-            handleStateToChange({ date: null, value: value });
-        }
-    }, [handleMonthToChange, handleStateToChange, maxDate, minDate, setEnd]);
-    var handleCalendarChange = useCallback(function (date) {
-        if (!inputValueFrom.date) {
-            setStart(date);
-            handleStateFromChange({ date: date, value: formatDate(date) });
-            return;
-        }
-        if (date < inputValueFrom.date) {
-            resetPeriod();
-            setStart(date);
-            handleStateToChange(initialValueState);
-            handleStateFromChange({ date: date, value: formatDate(date) });
-            return;
-        }
-        if (date === inputValueFrom.date && date === inputValueTo.date) {
-            resetPeriod();
-            handleStateFromChange(initialValueState);
-            handleStateToChange(initialValueState);
-            return;
-        }
-        handleStateToChange({ date: date, value: formatDate(date) });
-        setEnd(date);
-    }, [
-        inputValueFrom.date,
-        inputValueTo.date,
-        handleStateToChange,
-        setEnd,
-        setStart,
-        handleStateFromChange,
-        resetPeriod,
-    ]);
-    var handleFromCalendarChange = useCallback(function (date) {
-        if (!isPopover) {
-            handleCalendarChange(date);
-            return;
-        }
-        setStart(date);
-        handleStateFromChange({ date: date, value: formatDate(date) });
-    }, [handleCalendarChange, handleStateFromChange, isPopover, setStart]);
-    var handleToCalendarChange = useCallback(function (date) {
-        if (!isPopover) {
-            handleCalendarChange(date);
-            return;
-        }
-        handleStateToChange({ date: date, value: formatDate(date) });
-        setEnd(date);
-    }, [handleCalendarChange, handleStateToChange, isPopover, setEnd]);
-    var _j = useState(false), nextMonthHighlighted = _j[0], setNextMonthHighlighted = _j[1];
-    var handleCalendarToMouseOver = useCallback(function (event) {
-        var target = event.target;
-        var dayHighlighted = isDayButton(target) || isDayButton(target.parentElement);
-        if (nextMonthHighlighted && !dayHighlighted)
-            setNextMonthHighlighted(false);
-        if (!nextMonthHighlighted && dayHighlighted)
-            setNextMonthHighlighted(true);
-    }, [nextMonthHighlighted]);
-    var selectorView = isPopover ? 'full' : 'month-only';
-    var calendarSelectedTo = selectedTo || (nextMonthHighlighted ? monthTo : undefined);
-    var maxMinDates = useCalendarMaxMinDates({
-        isPopover: isPopover,
-        monthTo: monthTo,
-        monthFrom: monthFrom,
-        selectedFrom: selectedFrom,
-        selectedTo: calendarSelectedTo,
-        maxDate: maxDate,
-        minDate: minDate,
-    });
-    return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId },
-        React.createElement(CalendarInput, __assign({}, inputFromProps, { useAnchorWidth: false, calendarPosition: calendarPosition, onInputChange: handleInputFromChange, onCalendarChange: handleFromCalendarChange, value: inputValueFrom.value, minDate: maxMinDates.fromMinDate, maxDate: maxMinDates.fromMaxDate, calendarProps: __assign(__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: selectorView,
-                selectedFrom: selectedFrom, selectedTo: calendarSelectedTo }) })),
-        React.createElement("span", { className: styles.divider }),
-        React.createElement("div", { onMouseOver: handleCalendarToMouseOver },
-            React.createElement(CalendarInput, __assign({}, inputToProps, { useAnchorWidth: false, calendarPosition: calendarPosition, popoverPosition: 'bottom-end', onInputChange: handleInputToChange, onCalendarChange: handleToCalendarChange, value: inputValueTo.value, minDate: maxMinDates.toMinDate, maxDate: maxMinDates.toMaxDate, calendarProps: __assign(__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: selectorView,
-                    selectedFrom: selectedFrom,
-                    selectedTo: selectedTo }) })))));
+    var _b = _a.calendarPosition, calendarPosition = _b === void 0 ? 'static' : _b, restProps = __rest(_a, ["calendarPosition"]);
+    var View = calendarPosition === 'popover' ? CalendarRangePopover : CalendarRangeStatic;
+    return React.createElement(View, __assign({}, restProps));
 };
 
 export { CalendarRange };