@alfalab/core-components-calendar-range 6.1.0 → 6.2.1

package/Component.d.ts

@@ -48,6 +48,10 @@ type CalendarRangeProps = {
         dateTo: number | null;
         valueTo: string;
     }) => void;
+    /**
+     * Коллбэк, срабатывающий при возникновении ошибок валидации дат внутри компонента.
+     */
+    onError?: (hasError: boolean) => void;
     /**
      * Список событий
      */

package/Component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_module = require('./index.module-bcd9b9e1.js');
+var index_module = require('./index.module-21c6d28e.js');
 var React = require('react');
 require('classnames');
 require('date-fns/startOfMonth');

package/cssm/Component.d.ts

@@ -48,6 +48,10 @@ type CalendarRangeProps = {
         dateTo: number | null;
         valueTo: string;
     }) => void;
+    /**
+     * Коллбэк, срабатывающий при возникновении ошибок валидации дат внутри компонента.
+     */
+    onError?: (hasError: boolean) => void;
     /**
      * Список событий
      */

package/cssm/views/popover.js

@@ -24,7 +24,7 @@ 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 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, onError = _a.onError, _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];
     /**
@@ -44,6 +44,7 @@ var CalendarRangePopover = function (_a) {
     var bothInvalid = coreComponentsDateInput.isCompleteDateInput(inputFromValue) &&
         coreComponentsDateInput.isCompleteDateInput(inputToValue) &&
         coreComponentsCalendarInput.parseDateString(inputFromValue).getTime() > coreComponentsCalendarInput.parseDateString(inputToValue).getTime();
+    var hasValidateError = inputFromInvalid || inputToInvalid || bothInvalid;
     var _q = hooks.usePopoverViewMonthes({
         dateFrom: dateFrom,
         dateTo: dateTo,
@@ -109,6 +110,12 @@ var CalendarRangePopover = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    React.useEffect(function () {
+        if (onError) {
+            onError(hasValidateError);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasValidateError]);
     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 }),

package/cssm/views/static.js

@@ -31,7 +31,7 @@ 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, _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, _j = _a.inputFromProps, inputFromProps = _j === void 0 ? {} : _j, _k = _a.inputToProps, inputToProps = _k === void 0 ? {} : _k, offDays = _a.offDays, events = _a.events, dataTestId = _a.dataTestId;
+    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, dataTestId = _a.dataTestId;
     var _l = React.useState(valueFrom), inputFromValue = _l[0], setInputFromValue = _l[1];
     var _m = React.useState(valueTo), inputToValue = _m[0], setInputToValue = _m[1];
     var dateFrom = coreComponentsCalendarInput.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -53,8 +53,9 @@ var CalendarRangeStatic = function (_a) {
     });
     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 _p = React.useState(validateInputFromValue(inputFromValue) === false), inputFromInvalid = _p[0], setInputFromInvalid = _p[1];
-    var _q = React.useState(validateInputToValue(inputToValue) === false), inputToInvalid = _q[0], setInputToInvalid = _q[1];
+    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 hasValidateError = bothInvalid || inputFromInvalid || inputToInvalid;
     var _r = hooks.useStaticViewMonthes({
         selectedFrom: period.selectedFrom,
         selectedTo: period.selectedTo,
@@ -147,6 +148,12 @@ var CalendarRangeStatic = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    React.useEffect(function () {
+        if (onError) {
+            onError(hasValidateError);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasValidateError]);
     var rangeProps = hooks.useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
     var calendarFromProps = inputFromProps.calendarProps, dateInputFromProps = tslib_es6.__rest(inputFromProps, ["calendarProps"]);
     var calendarToProps = inputToProps.calendarProps, dateInputToProps = tslib_es6.__rest(inputToProps, ["calendarProps"]);

package/esm/Component.d.ts

@@ -48,6 +48,10 @@ type CalendarRangeProps = {
         dateTo: number | null;
         valueTo: string;
     }) => void;
+    /**
+     * Коллбэк, срабатывающий при возникновении ошибок валидации дат внутри компонента.
+     */
+    onError?: (hasError: boolean) => void;
     /**
      * Список событий
      */

package/esm/Component.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './index.module-a0ca67a7.js';
+import { _ as __rest, a as __assign } from './index.module-5143c3f7.js';
 import React from 'react';
 import 'classnames';
 import 'date-fns/startOfMonth';

package/esm/index.js

@@ -1,4 +1,4 @@
-import './index.module-a0ca67a7.js';
+import './index.module-5143c3f7.js';
 import 'react';
 import 'classnames';
 import 'date-fns/startOfMonth';

package/esm/{index.module-a0ca67a7.js → index.module-5143c3f7.js}

@@ -37,7 +37,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-range__component_1o680","divider":"calendar-range__divider_1o680","static":"calendar-range__static_1o680","calendar":"calendar-range__calendar_1o680"};
+var styles = {"component":"calendar-range__component_1a9ih","divider":"calendar-range__divider_1a9ih","static":"calendar-range__static_1a9ih","calendar":"calendar-range__calendar_1a9ih"};
 require('./views/index.css')
 
 export { __rest as _, __assign as a, styles as s };

package/esm/views/index.css

@@ -1,4 +1,4 @@
-/* hash: 803om */
+/* hash: hbbfm */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -36,19 +36,19 @@
 
     /* marker */
 }
-.calendar-range__component_1o680 {
+.calendar-range__component_1a9ih {
     display: flex
 }
-.calendar-range__component_1o680 button[aria-selected='true'] {
+.calendar-range__component_1a9ih button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_1o680 *[class*='errorIcon_'] {
+.calendar-range__component_1a9ih *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_1o680 *[class*='calendarIcon_'] {
+.calendar-range__component_1a9ih *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_1o680 {
+.calendar-range__divider_1a9ih {
     height: 48px;
     display: flex;
     align-items: center;
@@ -56,13 +56,13 @@
     width: 16px;
     margin: 0 var(--gap-xs)
 }
-.calendar-range__divider_1o680:after {
+.calendar-range__divider_1a9ih:after {
         content: '';
         display: block;
         width: 100%;
         height: 1px;
         background-color: var(--color-light-graphic-primary);
     }
-.calendar-range__static_1o680 .calendar-range__calendar_1o680 {
+.calendar-range__static_1a9ih .calendar-range__calendar_1a9ih {
         width: var(--calendar-inner-width);
     }

package/esm/views/popover.js

@@ -1,4 +1,4 @@
-import { s as styles, a as __assign } from '../index.module-a0ca67a7.js';
+import { s as styles, a as __assign } from '../index.module-5143c3f7.js';
 import React, { useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import startOfMonth from 'date-fns/startOfMonth';
@@ -12,7 +12,7 @@ import 'date-fns/isEqual';
 import { usePopoverViewMonthes } from '../hooks.js';
 
 var CalendarRangePopover = function (_a) {
-    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth(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 className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth(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, onError = _a.onError, _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 = useState(valueFrom), inputFromValue = _k[0], setInputFromValue = _k[1];
     var _l = useState(valueTo), inputToValue = _l[0], setInputToValue = _l[1];
     /**
@@ -32,6 +32,7 @@ var CalendarRangePopover = function (_a) {
     var bothInvalid = isCompleteDateInput(inputFromValue) &&
         isCompleteDateInput(inputToValue) &&
         parseDateString(inputFromValue).getTime() > parseDateString(inputToValue).getTime();
+    var hasValidateError = inputFromInvalid || inputToInvalid || bothInvalid;
     var _q = usePopoverViewMonthes({
         dateFrom: dateFrom,
         dateTo: dateTo,
@@ -97,6 +98,12 @@ var CalendarRangePopover = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    useEffect(function () {
+        if (onError) {
+            onError(hasValidateError);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasValidateError]);
     return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId },
         React.createElement(CalendarInput, __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: __assign(__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: 'full' }) })),
         React.createElement("span", { className: styles.divider }),

package/esm/views/static.js

@@ -1,4 +1,4 @@
-import { _ as __rest, s as styles, a as __assign } from '../index.module-a0ca67a7.js';
+import { _ as __rest, s as styles, a as __assign } from '../index.module-5143c3f7.js';
 import React, { useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import startOfMonth from 'date-fns/startOfMonth';
@@ -15,7 +15,7 @@ import { usePeriodWithReset, Calendar } from '@alfalab/core-components-calendar/
 import { isDayButton } from '../utils.js';
 
 var CalendarRangeStatic = function (_a) {
-    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth(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, _j = _a.inputFromProps, inputFromProps = _j === void 0 ? {} : _j, _k = _a.inputToProps, inputToProps = _k === void 0 ? {} : _k, offDays = _a.offDays, events = _a.events, dataTestId = _a.dataTestId;
+    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth(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, dataTestId = _a.dataTestId;
     var _l = useState(valueFrom), inputFromValue = _l[0], setInputFromValue = _l[1];
     var _m = useState(valueTo), inputToValue = _m[0], setInputToValue = _m[1];
     var dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -37,8 +37,9 @@ var CalendarRangeStatic = function (_a) {
     });
     var validateInputFromValue = useCallback(function (value) { return isValidInputValue(value, minDate, dateFrom || maxDate, offDays); }, [dateFrom, maxDate, minDate, offDays]);
     var validateInputToValue = useCallback(function (value) { return isValidInputValue(value, dateFrom || minDate, maxDate, offDays); }, [dateFrom, minDate, maxDate, offDays]);
-    var _p = useState(validateInputFromValue(inputFromValue) === false), inputFromInvalid = _p[0], setInputFromInvalid = _p[1];
-    var _q = useState(validateInputToValue(inputToValue) === false), inputToInvalid = _q[0], setInputToInvalid = _q[1];
+    var _p = useState(isCompleteDateInput(inputFromValue) && dateFrom === null), inputFromInvalid = _p[0], setInputFromInvalid = _p[1];
+    var _q = useState(isCompleteDateInput(inputToValue) && dateTo === null), inputToInvalid = _q[0], setInputToInvalid = _q[1];
+    var hasValidateError = bothInvalid || inputFromInvalid || inputToInvalid;
     var _r = useStaticViewMonthes({
         selectedFrom: period.selectedFrom,
         selectedTo: period.selectedTo,
@@ -131,6 +132,12 @@ var CalendarRangeStatic = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    useEffect(function () {
+        if (onError) {
+            onError(hasValidateError);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasValidateError]);
     var rangeProps = useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
     var calendarFromProps = inputFromProps.calendarProps, dateInputFromProps = __rest(inputFromProps, ["calendarProps"]);
     var calendarToProps = inputToProps.calendarProps, dateInputToProps = __rest(inputToProps, ["calendarProps"]);

package/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./index.module-bcd9b9e1.js');
+require('./index.module-21c6d28e.js');
 require('react');
 require('classnames');
 require('date-fns/startOfMonth');

package/{index.module-bcd9b9e1.js → index.module-21c6d28e.js}

@@ -39,7 +39,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-range__component_1o680","divider":"calendar-range__divider_1o680","static":"calendar-range__static_1o680","calendar":"calendar-range__calendar_1o680"};
+var styles = {"component":"calendar-range__component_1a9ih","divider":"calendar-range__divider_1a9ih","static":"calendar-range__static_1a9ih","calendar":"calendar-range__calendar_1a9ih"};
 require('./views/index.css')
 
 exports.__rest = __rest;

package/modern/Component.d.ts

@@ -48,6 +48,10 @@ type CalendarRangeProps = {
         dateTo: number | null;
         valueTo: string;
     }) => void;
+    /**
+     * Коллбэк, срабатывающий при возникновении ошибок валидации дат внутри компонента.
+     */
+    onError?: (hasError: boolean) => void;
     /**
      * Список событий
      */

package/modern/Component.js

@@ -9,7 +9,7 @@ import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/isEqual';
 import './hooks.js';
-import './index.module-ff37a166.js';
+import './index.module-407ef197.js';
 import { CalendarRangePopover } from './views/popover.js';
 import 'date-fns/endOfMonth';
 import '@alfalab/core-components-calendar/modern';

package/modern/index.js

@@ -9,7 +9,7 @@ import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/isEqual';
 import './hooks.js';
-import './index.module-ff37a166.js';
+import './index.module-407ef197.js';
 import './views/popover.js';
 import 'date-fns/endOfMonth';
 import '@alfalab/core-components-calendar/modern';

package/modern/index.module-407ef197.js

@@ -0,0 +1,4 @@
+var styles = {"component":"calendar-range__component_1a9ih","divider":"calendar-range__divider_1a9ih","static":"calendar-range__static_1a9ih","calendar":"calendar-range__calendar_1a9ih"};
+require('./views/index.css')
+
+export { styles as s };

package/modern/views/index.css

@@ -1,4 +1,4 @@
-/* hash: 803om */
+/* hash: hbbfm */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -36,19 +36,19 @@
 
     /* marker */
 }
-.calendar-range__component_1o680 {
+.calendar-range__component_1a9ih {
     display: flex
 }
-.calendar-range__component_1o680 button[aria-selected='true'] {
+.calendar-range__component_1a9ih button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_1o680 *[class*='errorIcon_'] {
+.calendar-range__component_1a9ih *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_1o680 *[class*='calendarIcon_'] {
+.calendar-range__component_1a9ih *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_1o680 {
+.calendar-range__divider_1a9ih {
     height: 48px;
     display: flex;
     align-items: center;
@@ -56,13 +56,13 @@
     width: 16px;
     margin: 0 var(--gap-xs)
 }
-.calendar-range__divider_1o680:after {
+.calendar-range__divider_1a9ih:after {
         content: '';
         display: block;
         width: 100%;
         height: 1px;
         background-color: var(--color-light-graphic-primary);
     }
-.calendar-range__static_1o680 .calendar-range__calendar_1o680 {
+.calendar-range__static_1a9ih .calendar-range__calendar_1a9ih {
         width: var(--calendar-inner-width);
     }

package/modern/views/popover.js

@@ -9,9 +9,9 @@ import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/isEqual';
 import { usePopoverViewMonthes } from '../hooks.js';
-import { s as styles } from '../index.module-ff37a166.js';
+import { s as styles } from '../index.module-407ef197.js';
 
-const CalendarRangePopover = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), minDate, maxDate, valueFrom = '', valueTo = '', onDateFromChange = () => null, onDateToChange = () => null, onChange = () => null, inputFromProps = {}, inputToProps = {}, offDays, events, dataTestId, }) => {
+const CalendarRangePopover = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), minDate, maxDate, valueFrom = '', valueTo = '', onDateFromChange = () => null, onDateToChange = () => null, onChange = () => null, onError, inputFromProps = {}, inputToProps = {}, offDays, events, dataTestId, }) => {
     const [inputFromValue, setInputFromValue] = useState(valueFrom);
     const [inputToValue, setInputToValue] = useState(valueTo);
     /**
@@ -31,6 +31,7 @@ const CalendarRangePopover = ({ className, defaultMonth = startOfMonth(new Date(
     const bothInvalid = isCompleteDateInput(inputFromValue) &&
         isCompleteDateInput(inputToValue) &&
         parseDateString(inputFromValue).getTime() > parseDateString(inputToValue).getTime();
+    const hasValidateError = inputFromInvalid || inputToInvalid || bothInvalid;
     const { monthFrom, monthTo, handleMonthFromChange, handleMonthToChange, } = usePopoverViewMonthes({
         dateFrom,
         dateTo,
@@ -96,6 +97,12 @@ const CalendarRangePopover = ({ className, defaultMonth = startOfMonth(new Date(
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    useEffect(() => {
+        if (onError) {
+            onError(hasValidateError);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasValidateError]);
     return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId },
         React.createElement(CalendarInput, Object.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: {
                 ...inputFromProps.calendarProps,

package/modern/views/static.js

@@ -9,13 +9,13 @@ import max from 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/isEqual';
 import { useStaticViewMonthes, useSelectionProps } from '../hooks.js';
-import { s as styles } from '../index.module-ff37a166.js';
+import { s as styles } from '../index.module-407ef197.js';
 import endOfMonth from 'date-fns/endOfMonth';
 import { usePeriodWithReset, Calendar } from '@alfalab/core-components-calendar/modern';
 import { isDayButton } from '../utils.js';
 
 /* eslint-disable complexity */
-const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), defaultMonthPosition = 'left', minDate, maxDate, valueFrom = '', valueTo = '', onDateFromChange = () => null, onDateToChange = () => null, onChange = () => null, inputFromProps = {}, inputToProps = {}, offDays, events, dataTestId, }) => {
+const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), defaultMonthPosition = 'left', minDate, maxDate, valueFrom = '', valueTo = '', onDateFromChange = () => null, onDateToChange = () => null, onChange = () => null, onError, inputFromProps = {}, inputToProps = {}, offDays, events, dataTestId, }) => {
     const [inputFromValue, setInputFromValue] = useState(valueFrom);
     const [inputToValue, setInputToValue] = useState(valueTo);
     let dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -37,8 +37,9 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
     });
     const validateInputFromValue = useCallback((value) => isValidInputValue(value, minDate, dateFrom || maxDate, offDays), [dateFrom, maxDate, minDate, offDays]);
     const validateInputToValue = useCallback((value) => isValidInputValue(value, dateFrom || minDate, maxDate, offDays), [dateFrom, minDate, maxDate, offDays]);
-    const [inputFromInvalid, setInputFromInvalid] = useState(validateInputFromValue(inputFromValue) === false);
-    const [inputToInvalid, setInputToInvalid] = useState(validateInputToValue(inputToValue) === false);
+    const [inputFromInvalid, setInputFromInvalid] = useState(isCompleteDateInput(inputFromValue) && dateFrom === null);
+    const [inputToInvalid, setInputToInvalid] = useState(isCompleteDateInput(inputToValue) && dateTo === null);
+    const hasValidateError = bothInvalid || inputFromInvalid || inputToInvalid;
     const { monthFrom, monthTo, handleMonthFromChange, handleMonthToChange } = useStaticViewMonthes({
         selectedFrom: period.selectedFrom,
         selectedTo: period.selectedTo,
@@ -131,6 +132,12 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    useEffect(() => {
+        if (onError) {
+            onError(hasValidateError);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasValidateError]);
     const rangeProps = useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
     const { calendarProps: calendarFromProps, ...dateInputFromProps } = inputFromProps;
     const { calendarProps: calendarToProps, ...dateInputToProps } = inputToProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-calendar-range",
-    "version": "6.1.0",
+    "version": "6.2.1",
     "description": "Calendar range component",
     "keywords": [],
     "license": "MIT",
@@ -18,9 +18,9 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-calendar": "^6.1.0",
-        "@alfalab/core-components-calendar-input": "^7.1.0",
-        "@alfalab/core-components-date-input": "^3.1.0",
+        "@alfalab/core-components-calendar": "^6.1.2",
+        "@alfalab/core-components-calendar-input": "^7.1.2",
+        "@alfalab/core-components-date-input": "^3.1.2",
         "classnames": "^2.3.1",
         "date-fns": "^2.16.1"
     }

package/views/index.css

@@ -1,4 +1,4 @@
-/* hash: 803om */
+/* hash: hbbfm */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -36,19 +36,19 @@
 
     /* marker */
 }
-.calendar-range__component_1o680 {
+.calendar-range__component_1a9ih {
     display: flex
 }
-.calendar-range__component_1o680 button[aria-selected='true'] {
+.calendar-range__component_1a9ih button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_1o680 *[class*='errorIcon_'] {
+.calendar-range__component_1a9ih *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_1o680 *[class*='calendarIcon_'] {
+.calendar-range__component_1a9ih *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_1o680 {
+.calendar-range__divider_1a9ih {
     height: 48px;
     display: flex;
     align-items: center;
@@ -56,13 +56,13 @@
     width: 16px;
     margin: 0 var(--gap-xs)
 }
-.calendar-range__divider_1o680:after {
+.calendar-range__divider_1a9ih:after {
         content: '';
         display: block;
         width: 100%;
         height: 1px;
         background-color: var(--color-light-graphic-primary);
     }
-.calendar-range__static_1o680 .calendar-range__calendar_1o680 {
+.calendar-range__static_1a9ih .calendar-range__calendar_1a9ih {
         width: var(--calendar-inner-width);
     }

package/views/popover.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_module = require('../index.module-bcd9b9e1.js');
+var index_module = require('../index.module-21c6d28e.js');
 var React = require('react');
 var cn = require('classnames');
 var startOfMonth = require('date-fns/startOfMonth');
@@ -22,7 +22,7 @@ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultLegacy(startOfMonth);
 
 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 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, onError = _a.onError, _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];
     /**
@@ -42,6 +42,7 @@ var CalendarRangePopover = function (_a) {
     var bothInvalid = coreComponentsDateInput.isCompleteDateInput(inputFromValue) &&
         coreComponentsDateInput.isCompleteDateInput(inputToValue) &&
         coreComponentsCalendarInput.parseDateString(inputFromValue).getTime() > coreComponentsCalendarInput.parseDateString(inputToValue).getTime();
+    var hasValidateError = inputFromInvalid || inputToInvalid || bothInvalid;
     var _q = hooks.usePopoverViewMonthes({
         dateFrom: dateFrom,
         dateTo: dateTo,
@@ -107,6 +108,12 @@ var CalendarRangePopover = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    React.useEffect(function () {
+        if (onError) {
+            onError(hasValidateError);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasValidateError]);
     return (React__default['default'].createElement("div", { className: cn__default['default'](index_module.styles.component, className), "data-test-id": dataTestId },
         React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, index_module.__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: index_module.__assign(index_module.__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: 'full' }) })),
         React__default['default'].createElement("span", { className: index_module.styles.divider }),

package/views/static.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_module = require('../index.module-bcd9b9e1.js');
+var index_module = require('../index.module-21c6d28e.js');
 var React = require('react');
 var cn = require('classnames');
 var startOfMonth = require('date-fns/startOfMonth');
@@ -29,7 +29,7 @@ var max__default = /*#__PURE__*/_interopDefaultLegacy(max);
 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, _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, _j = _a.inputFromProps, inputFromProps = _j === void 0 ? {} : _j, _k = _a.inputToProps, inputToProps = _k === void 0 ? {} : _k, offDays = _a.offDays, events = _a.events, dataTestId = _a.dataTestId;
+    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, dataTestId = _a.dataTestId;
     var _l = React.useState(valueFrom), inputFromValue = _l[0], setInputFromValue = _l[1];
     var _m = React.useState(valueTo), inputToValue = _m[0], setInputToValue = _m[1];
     var dateFrom = coreComponentsCalendarInput.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -51,8 +51,9 @@ var CalendarRangeStatic = function (_a) {
     });
     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 _p = React.useState(validateInputFromValue(inputFromValue) === false), inputFromInvalid = _p[0], setInputFromInvalid = _p[1];
-    var _q = React.useState(validateInputToValue(inputToValue) === false), inputToInvalid = _q[0], setInputToInvalid = _q[1];
+    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 hasValidateError = bothInvalid || inputFromInvalid || inputToInvalid;
     var _r = hooks.useStaticViewMonthes({
         selectedFrom: period.selectedFrom,
         selectedTo: period.selectedTo,
@@ -145,6 +146,12 @@ var CalendarRangeStatic = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    React.useEffect(function () {
+        if (onError) {
+            onError(hasValidateError);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasValidateError]);
     var rangeProps = hooks.useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
     var calendarFromProps = inputFromProps.calendarProps, dateInputFromProps = index_module.__rest(inputFromProps, ["calendarProps"]);
     var calendarToProps = inputToProps.calendarProps, dateInputToProps = index_module.__rest(inputToProps, ["calendarProps"]);

package/modern/index.module-ff37a166.js

@@ -1,4 +0,0 @@
-var styles = {"component":"calendar-range__component_1o680","divider":"calendar-range__divider_1o680","static":"calendar-range__static_1o680","calendar":"calendar-range__calendar_1o680"};
-require('./views/index.css')
-
-export { styles as s };