@alfalab/core-components-calendar-range 9.0.14 → 9.1.0

package/moderncssm/views/static.d.ts

@@ -1,9 +1,20 @@
 import { type FC } from 'react';
+import { type CalendarInputProps } from '@alfalab/core-components-calendar-input/moderncssm';
 import { type CalendarRangeProps } from '../Component';
-export type CalendarRangeStaticProps = Omit<CalendarRangeProps, 'calendarPosition'> & {
+type DateInputProps = Omit<CalendarInputProps, 'onCalendarOpen' | 'onCalendarClose' | 'onChange'>;
+interface CalendarRangeStaticProps extends Omit<CalendarRangeProps, 'calendarPosition' | 'inputFromProps' | 'inputToProps'> {
     /**
      * Отображать начальный месяц слева или справа (влияет только на начальный рендер)
      */
     defaultMonthPosition?: 'left' | 'right';
-};
+    /**
+     * Пропсы для инпута начальной даты диапазона
+     */
+    inputFromProps?: DateInputProps;
+    /**
+     * Пропсы для инпута конечной даты диапазона
+     */
+    inputToProps?: DateInputProps;
+}
 export declare const CalendarRangeStatic: FC<CalendarRangeStaticProps>;
+export {};

package/moderncssm/views/static.js

@@ -1,20 +1,37 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import { startOfMonth, isSameMonth, max, endOfMonth, subMonths, addMonths } from 'date-fns';
 import { CalendarDesktop } from '@alfalab/core-components-calendar/moderncssm/desktop';
 import { usePeriodWithReset } from '@alfalab/core-components-calendar/moderncssm/shared';
 import { isValidInputValue, parseDateString, formatDate } from '@alfalab/core-components-calendar-input/moderncssm/shared';
-import { isCompleteDateInput, DateInput } from '@alfalab/core-components-date-input/moderncssm';
+import { isCompleteDateInput } from '@alfalab/core-components-date-input/moderncssm';
 import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+import { UniversalDateInput } from '@alfalab/core-components-universal-date-input/moderncssm';
 import { Divider } from '../components/divider/Component.js';
-import { useStaticViewMonthes, useSelectionProps } from '../hooks.js';
+import { useStaticRangeAutoSwap, useStaticViewMonthes, useSelectionProps } from '../hooks.js';
 import { isDayButton } from '../utils.js';
 import styles from './index.module.css';
 
 /* eslint-disable complexity */
-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, returnInvalidDates = false, dataTestId, calendarContainerClassName, }) => {
+const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), defaultMonthPosition = 'left', minDate, maxDate, valueFrom = '', valueTo = '', onDateFromChange = () => null, onDateToChange = () => null, onChange = () => null, inputFromProps = {}, inputToProps = {}, offDays, events, returnInvalidDates = false, dataTestId, calendarContainerClassName, autoSwap = false, onError, }) => {
     const [inputFromValue, setInputFromValue] = useState(valueFrom);
     const [inputToValue, setInputToValue] = useState(valueTo);
+    const [inputFromError, setInputFromError] = useState(false);
+    const [inputToError, setInputToError] = useState(false);
+    const toggleCorrectionFromRef = useRef(null);
+    const toggleCorrectionToRef = useRef(null);
+    const inputToRef = useRef(null);
+    const inputFromRef = useRef(null);
+    const { swapDates, isInternalUpdate } = useStaticRangeAutoSwap({
+        autoSwap,
+        setInputFromValue,
+        setInputToValue,
+        toggleCorrectionFromRef,
+        toggleCorrectionToRef,
+        inputFromRef,
+        inputToRef,
+    });
+    const [rangeValidationError, setRangeValidationError] = useState(false);
     let dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)
         ? parseDateString(inputFromValue).getTime()
         : null;
@@ -24,19 +41,11 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
     if (isCompleteDateInput(inputToValue) && !dateTo && !returnInvalidDates) {
         dateFrom = null;
     }
-    const bothInvalid = isCompleteDateInput(inputFromValue) &&
-        isCompleteDateInput(inputToValue) &&
-        parseDateString(inputFromValue).getTime() > parseDateString(inputToValue).getTime();
     const [highlightedDate, setHighlightedDate] = useState(undefined);
     const period = usePeriodWithReset({
         initialSelectedFrom: dateFrom ? parseDateString(inputFromValue).getTime() : undefined,
         initialSelectedTo: dateTo ? parseDateString(inputToValue).getTime() : undefined,
     });
-    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(isCompleteDateInput(inputFromValue) && dateFrom === null);
-    const [inputToInvalid, setInputToInvalid] = useState(isCompleteDateInput(inputToValue) && dateTo === null);
-    const hasValidateError = bothInvalid || inputFromInvalid || inputToInvalid;
     const { calendarProps: calendarFromProps, onInputChange: onInputChangeFrom, ...dateInputFromProps } = inputFromProps;
     const { calendarProps: calendarToProps, onInputChange: onInputChangeTo, ...dateInputToProps } = inputToProps;
     const { monthFrom, monthTo, handleMonthFromChange, handleMonthToChange } = useStaticViewMonthes({
@@ -45,19 +54,27 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
         defaultMonth,
         defaultMonthPosition,
     });
-    const handleValidInputFrom = useCallback(() => {
-        setInputFromInvalid(inputFromValue !== '' && !validateInputFromValue(inputFromValue));
-    }, [inputFromValue, validateInputFromValue]);
-    const handleValidInputTo = useCallback(() => {
-        setInputToInvalid(inputToValue !== '' && !validateInputToValue(inputToValue));
-    }, [inputToValue, validateInputToValue]);
     const handleInputFromChange = (event, payload) => {
-        setInputFromValue(payload.value);
-        onInputChangeFrom?.(event, payload);
+        const newValue = payload.value;
+        setInputFromValue(newValue);
+        if (isValidInputValue(newValue, minDate, maxDate, offDays)) {
+            swapDates(newValue, inputFromValue, inputToValue);
+        }
+        const payloadWithDate = { date: parseDateString(payload.value), value: payload.value };
+        if (onInputChangeFrom) {
+            onInputChangeFrom(event === null ? {} : event, payloadWithDate);
+        }
     };
     const handleInputToChange = (event, payload) => {
-        setInputToValue(payload.value);
-        onInputChangeTo?.(event, payload);
+        const newValue = payload.value;
+        setInputToValue(newValue);
+        if (isValidInputValue(newValue, minDate, maxDate, offDays)) {
+            swapDates(newValue, inputFromValue, inputToValue);
+        }
+        const payloadWithDate = { date: parseDateString(payload.value), value: payload.value };
+        if (onInputChangeTo) {
+            onInputChangeTo(event === null ? {} : event, payloadWithDate);
+        }
     };
     const handleMouseOver = useCallback((event) => {
         const target = event.target;
@@ -90,19 +107,20 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
         setInputToValue(valueTo);
     }, [valueTo]);
     useEffect(() => {
-        if (!inputFromValue || isCompleteDateInput(inputFromValue)) {
-            handleValidInputFrom();
-        }
         period.setStart(dateFrom || undefined);
         if (dateTo) {
             period.setEnd(dateTo);
         }
+        if (isInternalUpdate.current) {
+            isInternalUpdate.current = false;
+            return;
+        }
         if (inputFromValue !== valueFrom) {
-            onDateFromChange({
+            onDateFromChange?.({
                 value: inputFromValue,
                 date: dateFrom,
             });
-            onChange({
+            onChange?.({
                 valueFrom: inputFromValue,
                 valueTo: inputToValue,
                 dateFrom,
@@ -112,13 +130,14 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputFromValue]);
     useEffect(() => {
-        if (!inputToValue || isCompleteDateInput(inputToValue)) {
-            handleValidInputTo();
-        }
         period.setEnd(dateTo || undefined);
         if (dateFrom) {
             period.setStart(dateFrom);
         }
+        if (isInternalUpdate.current) {
+            isInternalUpdate.current = false;
+            return;
+        }
         if (inputToValue !== valueTo) {
             // eslint-disable-next-line no-nested-ternary
             const inputDateTo = returnInvalidDates
@@ -126,11 +145,11 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
                     ? parseDateString(inputToValue).getTime()
                     : null
                 : dateTo;
-            onDateToChange({
+            onDateToChange?.({
                 value: inputToValue,
                 date: inputDateTo,
             });
-            onChange({
+            onChange?.({
                 valueFrom: inputFromValue,
                 valueTo: inputToValue,
                 dateFrom,
@@ -139,12 +158,36 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    useEffect(() => {
+        const isInputFromValueComplete = isCompleteDateInput(inputFromValue);
+        const isInputToValueComplete = isCompleteDateInput(inputToValue);
+        let individualInputFromError = false;
+        let individualInputToError = false;
+        if (isInputFromValueComplete) {
+            individualInputFromError = !isValidInputValue(inputFromValue, minDate, maxDate, offDays);
+        }
+        if (isInputToValueComplete) {
+            individualInputToError = !isValidInputValue(inputToValue, minDate, maxDate, offDays);
+        }
+        let isRangeError = false;
+        const isValidInputFromValueStandalone = isInputFromValueComplete && individualInputFromError === false;
+        const isValidInputToValueStandalone = isInputToValueComplete && individualInputToError === false;
+        if (isValidInputFromValueStandalone && isValidInputToValueStandalone) {
+            const parsedDateFrom = parseDateString(inputFromValue).getTime();
+            const parsedDateTo = parseDateString(inputToValue).getTime();
+            if (parsedDateFrom > parsedDateTo) {
+                isRangeError = true;
+            }
+        }
+        setInputFromError(individualInputFromError || isRangeError);
+        setInputToError(individualInputToError || isRangeError);
+        setRangeValidationError(isRangeError);
+    }, [inputFromValue, inputToValue, minDate, maxDate, offDays]);
     useEffect(() => {
         if (onError) {
-            onError(hasValidateError);
+            onError(rangeValidationError);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hasValidateError]);
+    }, [onError, rangeValidationError]);
     const rangeProps = useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
     const CalendarFromComponent = dateInputFromProps.Calendar || CalendarDesktop;
     const CalendarToComponent = dateInputToProps.Calendar || CalendarDesktop;
@@ -154,20 +197,20 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
     React.createElement("div", { className: cn(styles.component, styles.static, className), 
         // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
         onMouseOver: handleMouseOver, "data-test-id": dataTestId },
-        React.createElement("div", null,
-            React.createElement(DateInput, { ...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.createElement("div", { className: cn(styles.inputsContainer) },
+            React.createElement(UniversalDateInput, { ...dateInputFromProps, Calendar: undefined, view: 'date', picker: false, value: inputFromValue, onInputChange: handleInputFromChange, onClear: handleClearFrom, correctionRef: toggleCorrectionFromRef, error: inputFromError ? 'Укажите корректную дату' : dateInputFromProps.error, clear: true, block: true, minDate: minDate, autoCorrection: false, maxDate: minMaxInSameMonth
+                    ? maxDate
+                    : maxDate && max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime(), ref: inputFromRef }),
+            React.createElement(Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
+            React.createElement(UniversalDateInput, { ...dateInputToProps, Calendar: undefined, view: 'date', picker: false, value: inputToValue, onInputChange: handleInputToChange, onClear: handleClearTo, error: inputToError ? 'Укажите корректную дату' : dateInputToProps.error, correctionRef: toggleCorrectionToRef, clear: true, block: true, autoCorrection: false, minDate: minMaxInSameMonth
+                    ? minDate
+                    : minDate && startOfMonth(addMonths(minDate, 1)).getTime(), maxDate: maxDate, ref: inputToRef })),
+        React.createElement("div", { className: cn(styles.calendarContainers) },
             React.createElement("div", { className: cn(styles.calendarContainer, calendarContainerClassName), "data-test-id": getDataTestId(dataTestId, 'container-from') },
                 React.createElement(CalendarFromComponent, { ...calendarFromProps, className: cn(styles.calendar, calendarFromProps?.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: minMaxInSameMonth
                         ? maxDate
                         : maxDate &&
-                            max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime(), ...rangeProps }))),
-        React.createElement(Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
-        React.createElement("div", null,
-            React.createElement(DateInput, { ...dateInputToProps, mobileMode: dateInputToProps.mobileMode === 'popover'
-                    ? 'input'
-                    : dateInputToProps.mobileMode, value: inputToValue, onChange: handleInputToChange, onClear: handleClearTo, onBlur: handleValidInputTo, error: bothInvalid || inputToInvalid || dateInputToProps.error, clear: true, block: true }),
+                            max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime(), ...rangeProps })),
             React.createElement("div", { "data-test-id": getDataTestId(dataTestId, 'container-to') },
                 React.createElement(CalendarToComponent, { ...calendarToProps, className: cn(styles.calendar, calendarToProps?.className), month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minMaxInSameMonth
                         ? minDate

package/moderncssm/views/static.js.map

@@ -1 +1 @@
-{"version":3,"file":"static.js","sources":["../../src/views/static.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { type FC, type MouseEvent, useCallback, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport { addMonths, endOfMonth, isSameMonth, max, startOfMonth, subMonths } from 'date-fns';\n\nimport { CalendarDesktop } from '@alfalab/core-components-calendar/desktop';\nimport { usePeriodWithReset } from '@alfalab/core-components-calendar/shared';\nimport {\n    formatDate,\n    isValidInputValue,\n    parseDateString,\n} from '@alfalab/core-components-calendar-input/shared';\nimport {\n    DateInput,\n    type DateInputProps,\n    isCompleteDateInput,\n} from '@alfalab/core-components-date-input';\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { type CalendarRangeProps } from '../Component';\nimport { Divider } from '../components/divider';\nimport { useSelectionProps, useStaticViewMonthes } from '../hooks';\nimport { isDayButton } from '../utils';\n\nimport styles from './index.module.css';\n\nexport type CalendarRangeStaticProps = Omit<CalendarRangeProps, 'calendarPosition'> & {\n    /**\n     * Отображать начальный месяц слева или справа (влияет только на начальный рендер)\n     */\n    defaultMonthPosition?: 'left' | 'right';\n};\n\nexport const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({\n    className,\n    defaultMonth = startOfMonth(new Date()).getTime(),\n    defaultMonthPosition = 'left',\n    minDate,\n    maxDate,\n    valueFrom = '',\n    valueTo = '',\n    onDateFromChange = () => null,\n    onDateToChange = () => null,\n    onChange = () => null,\n    onError,\n    inputFromProps = {},\n    inputToProps = {},\n    offDays,\n    events,\n    returnInvalidDates = false,\n    dataTestId,\n    calendarContainerClassName,\n}) => {\n    const [inputFromValue, setInputFromValue] = useState<string>(valueFrom);\n    const [inputToValue, setInputToValue] = useState<string>(valueTo);\n\n    let dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)\n        ? parseDateString(inputFromValue).getTime()\n        : null;\n\n    const dateTo = isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays)\n        ? parseDateString(inputToValue).getTime()\n        : null;\n\n    if (isCompleteDateInput(inputToValue) && !dateTo && !returnInvalidDates) {\n        dateFrom = null;\n    }\n\n    const bothInvalid =\n        isCompleteDateInput(inputFromValue) &&\n        isCompleteDateInput(inputToValue) &&\n        parseDateString(inputFromValue).getTime() > parseDateString(inputToValue).getTime();\n\n    const [highlightedDate, setHighlightedDate] = useState<number | undefined>(undefined);\n\n    const period = usePeriodWithReset({\n        initialSelectedFrom: dateFrom ? parseDateString(inputFromValue).getTime() : undefined,\n        initialSelectedTo: dateTo ? parseDateString(inputToValue).getTime() : undefined,\n    });\n\n    const validateInputFromValue = useCallback(\n        (value: string) => isValidInputValue(value, minDate, dateFrom || maxDate, offDays),\n        [dateFrom, maxDate, minDate, offDays],\n    );\n\n    const validateInputToValue = useCallback(\n        (value: string) => isValidInputValue(value, dateFrom || minDate, maxDate, offDays),\n\n        [dateFrom, minDate, maxDate, offDays],\n    );\n\n    const [inputFromInvalid, setInputFromInvalid] = useState<boolean>(\n        isCompleteDateInput(inputFromValue) && dateFrom === null,\n    );\n\n    const [inputToInvalid, setInputToInvalid] = useState<boolean>(\n        isCompleteDateInput(inputToValue) && dateTo === null,\n    );\n\n    const hasValidateError = bothInvalid || inputFromInvalid || inputToInvalid;\n    const {\n        calendarProps: calendarFromProps,\n        onInputChange: onInputChangeFrom,\n        ...dateInputFromProps\n    } = inputFromProps;\n    const {\n        calendarProps: calendarToProps,\n        onInputChange: onInputChangeTo,\n        ...dateInputToProps\n    } = inputToProps;\n\n    const { monthFrom, monthTo, handleMonthFromChange, handleMonthToChange } = useStaticViewMonthes(\n        {\n            selectedFrom: period.selectedFrom,\n            selectedTo: period.selectedTo,\n            defaultMonth,\n            defaultMonthPosition,\n        },\n    );\n\n    const handleValidInputFrom = useCallback(() => {\n        setInputFromInvalid(inputFromValue !== '' && !validateInputFromValue(inputFromValue));\n    }, [inputFromValue, validateInputFromValue]);\n\n    const handleValidInputTo = useCallback(() => {\n        setInputToInvalid(inputToValue !== '' && !validateInputToValue(inputToValue));\n    }, [inputToValue, validateInputToValue]);\n\n    const handleInputFromChange: Required<DateInputProps>['onChange'] = (event, payload) => {\n        setInputFromValue(payload.value);\n        onInputChangeFrom?.(event, payload);\n    };\n\n    const handleInputToChange: Required<DateInputProps>['onChange'] = (event, payload) => {\n        setInputToValue(payload.value);\n        onInputChangeTo?.(event, payload);\n    };\n\n    const handleMouseOver = useCallback((event: MouseEvent<HTMLDivElement>) => {\n        const target = event.target as HTMLElement;\n\n        const mouseOverDayButton = isDayButton(target) || isDayButton(target.parentElement);\n\n        let date;\n\n        if (mouseOverDayButton) {\n            const button =\n                target.tagName === 'BUTTON' ? target : (target.parentElement as HTMLButtonElement);\n\n            if (button.dataset.date) {\n                date = +button.dataset.date;\n            }\n        }\n\n        setHighlightedDate(date);\n    }, []);\n\n    const handleClearFrom = useCallback(() => {\n        setInputFromValue('');\n    }, []);\n\n    const handleClearTo = useCallback(() => {\n        setInputToValue('');\n    }, []);\n\n    useEffect(() => {\n        setInputFromValue(period.selectedFrom ? formatDate(period.selectedFrom) : '');\n    }, [period.selectedFrom]);\n\n    useEffect(() => {\n        setInputToValue(period.selectedTo ? formatDate(period.selectedTo) : '');\n    }, [period.selectedTo]);\n\n    useEffect(() => {\n        setInputFromValue(valueFrom);\n    }, [valueFrom]);\n\n    useEffect(() => {\n        setInputToValue(valueTo);\n    }, [valueTo]);\n\n    useEffect(() => {\n        if (!inputFromValue || isCompleteDateInput(inputFromValue)) {\n            handleValidInputFrom();\n        }\n\n        period.setStart(dateFrom || undefined);\n        if (dateTo) {\n            period.setEnd(dateTo);\n        }\n\n        if (inputFromValue !== valueFrom) {\n            onDateFromChange({\n                value: inputFromValue,\n                date: dateFrom,\n            });\n\n            onChange({\n                valueFrom: inputFromValue,\n                valueTo: inputToValue,\n                dateFrom,\n                dateTo,\n            });\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [inputFromValue]);\n\n    useEffect(() => {\n        if (!inputToValue || isCompleteDateInput(inputToValue)) {\n            handleValidInputTo();\n        }\n\n        period.setEnd(dateTo || undefined);\n        if (dateFrom) {\n            period.setStart(dateFrom);\n        }\n\n        if (inputToValue !== valueTo) {\n            // eslint-disable-next-line no-nested-ternary\n            const inputDateTo = returnInvalidDates\n                ? isCompleteDateInput(inputToValue)\n                    ? parseDateString(inputToValue).getTime()\n                    : null\n                : dateTo;\n\n            onDateToChange({\n                value: inputToValue,\n                date: inputDateTo,\n            });\n\n            onChange({\n                valueFrom: inputFromValue,\n                valueTo: inputToValue,\n                dateFrom,\n                dateTo: inputDateTo,\n            });\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [inputToValue]);\n\n    useEffect(() => {\n        if (onError) {\n            onError(hasValidateError);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [hasValidateError]);\n\n    const rangeProps = useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);\n\n    const CalendarFromComponent = dateInputFromProps.Calendar || CalendarDesktop;\n    const CalendarToComponent = dateInputToProps.Calendar || CalendarDesktop;\n\n    const minMaxInSameMonth = minDate && maxDate && isSameMonth(minDate, maxDate);\n\n    return (\n        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n        <div\n            className={cn(styles.component, styles.static, className)}\n            // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n            onMouseOver={handleMouseOver}\n            data-test-id={dataTestId}\n        >\n            <div>\n                <DateInput\n                    {...dateInputFromProps}\n                    mobileMode={\n                        dateInputFromProps.mobileMode === 'popover'\n                            ? 'input'\n                            : dateInputFromProps.mobileMode\n                    }\n                    value={inputFromValue}\n                    onChange={handleInputFromChange}\n                    onClear={handleClearFrom}\n                    onBlur={handleValidInputFrom}\n                    error={bothInvalid || inputFromInvalid || dateInputFromProps.error}\n                    clear={true}\n                    block={true}\n                />\n                <div\n                    className={cn(styles.calendarContainer, calendarContainerClassName)}\n                    data-test-id={getDataTestId(dataTestId, 'container-from')}\n                >\n                    <CalendarFromComponent\n                        {...calendarFromProps}\n                        className={cn(styles.calendar, calendarFromProps?.className)}\n                        month={monthFrom}\n                        selectorView='month-only'\n                        offDays={offDays}\n                        events={events}\n                        onChange={period.updatePeriod}\n                        onMonthChange={handleMonthFromChange}\n                        minDate={minDate}\n                        maxDate={\n                            minMaxInSameMonth\n                                ? maxDate\n                                : maxDate &&\n                                  max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime()\n                        }\n                        {...rangeProps}\n                    />\n                </div>\n            </div>\n\n            <Divider inputFromProps={inputFromProps} inputToProps={inputToProps} />\n\n            <div>\n                <DateInput\n                    {...dateInputToProps}\n                    mobileMode={\n                        dateInputToProps.mobileMode === 'popover'\n                            ? 'input'\n                            : dateInputToProps.mobileMode\n                    }\n                    value={inputToValue}\n                    onChange={handleInputToChange}\n                    onClear={handleClearTo}\n                    onBlur={handleValidInputTo}\n                    error={bothInvalid || inputToInvalid || dateInputToProps.error}\n                    clear={true}\n                    block={true}\n                />\n                <div data-test-id={getDataTestId(dataTestId, 'container-to')}>\n                    <CalendarToComponent\n                        {...calendarToProps}\n                        className={cn(styles.calendar, calendarToProps?.className)}\n                        month={monthTo}\n                        selectorView='month-only'\n                        offDays={offDays}\n                        events={events}\n                        onChange={period.updatePeriod}\n                        onMonthChange={handleMonthToChange}\n                        minDate={\n                            minMaxInSameMonth\n                                ? minDate\n                                : minDate && startOfMonth(addMonths(minDate, 1)).getTime()\n                        }\n                        maxDate={maxDate}\n                        {...rangeProps}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;AAiCa,MAAA,mBAAmB,GAAiC,CAAC,EAC9D,SAAS,EACT,YAAY,GAAG,YAAY,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,OAAO,EAAE,EACjD,oBAAoB,GAAG,MAAM,EAC7B,OAAO,EACP,OAAO,EACP,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,EAAE,EACZ,gBAAgB,GAAG,MAAM,IAAI,EAC7B,cAAc,GAAG,MAAM,IAAI,EAC3B,QAAQ,GAAG,MAAM,IAAI,EACrB,OAAO,EACP,cAAc,GAAG,EAAE,EACnB,YAAY,GAAG,EAAE,EACjB,OAAO,EACP,MAAM,EACN,kBAAkB,GAAG,KAAK,EAC1B,UAAU,EACV,0BAA0B,GAC7B,KAAI;IACD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAS,SAAS,CAAC;IACvE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,OAAO,CAAC;IAEjE,IAAI,QAAQ,GAAG,iBAAiB,CAAC,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO;AACtE,UAAE,eAAe,CAAC,cAAc,CAAC,CAAC,OAAO;UACvC,IAAI;AAEV,IAAA,MAAM,MAAM,GAAG,iBAAiB,CAAC,YAAY,EAAE,QAAQ,IAAI,OAAO,EAAE,OAAO,EAAE,OAAO;AAChF,UAAE,eAAe,CAAC,YAAY,CAAC,CAAC,OAAO;UACrC,IAAI;IAEV,IAAI,mBAAmB,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE;QACrE,QAAQ,GAAG,IAAI;;AAGnB,IAAA,MAAM,WAAW,GACb,mBAAmB,CAAC,cAAc,CAAC;QACnC,mBAAmB,CAAC,YAAY,CAAC;AACjC,QAAA,eAAe,CAAC,cAAc,CAAC,CAAC,OAAO,EAAE,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC,OAAO,EAAE;IAEvF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC;IAErF,MAAM,MAAM,GAAG,kBAAkB,CAAC;AAC9B,QAAA,mBAAmB,EAAE,QAAQ,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC,OAAO,EAAE,GAAG,SAAS;AACrF,QAAA,iBAAiB,EAAE,MAAM,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC,OAAO,EAAE,GAAG,SAAS;AAClF,KAAA,CAAC;AAEF,IAAA,MAAM,sBAAsB,GAAG,WAAW,CACtC,CAAC,KAAa,KAAK,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,OAAO,CAAC,EAClF,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CACxC;AAED,IAAA,MAAM,oBAAoB,GAAG,WAAW,CACpC,CAAC,KAAa,KAAK,iBAAiB,CAAC,KAAK,EAAE,QAAQ,IAAI,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAElF,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CACxC;AAED,IAAA,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CACpD,mBAAmB,CAAC,cAAc,CAAC,IAAI,QAAQ,KAAK,IAAI,CAC3D;AAED,IAAA,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAChD,mBAAmB,CAAC,YAAY,CAAC,IAAI,MAAM,KAAK,IAAI,CACvD;AAED,IAAA,MAAM,gBAAgB,GAAG,WAAW,IAAI,gBAAgB,IAAI,cAAc;AAC1E,IAAA,MAAM,EACF,aAAa,EAAE,iBAAiB,EAChC,aAAa,EAAE,iBAAiB,EAChC,GAAG,kBAAkB,EACxB,GAAG,cAAc;AAClB,IAAA,MAAM,EACF,aAAa,EAAE,eAAe,EAC9B,aAAa,EAAE,eAAe,EAC9B,GAAG,gBAAgB,EACtB,GAAG,YAAY;IAEhB,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,GAAG,oBAAoB,CAC3F;QACI,YAAY,EAAE,MAAM,CAAC,YAAY;QACjC,UAAU,EAAE,MAAM,CAAC,UAAU;QAC7B,YAAY;QACZ,oBAAoB;AACvB,KAAA,CACJ;AAED,IAAA,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAK;QAC1C,mBAAmB,CAAC,cAAc,KAAK,EAAE,IAAI,CAAC,sBAAsB,CAAC,cAAc,CAAC,CAAC;AACzF,KAAC,EAAE,CAAC,cAAc,EAAE,sBAAsB,CAAC,CAAC;AAE5C,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;QACxC,iBAAiB,CAAC,YAAY,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAC;AACjF,KAAC,EAAE,CAAC,YAAY,EAAE,oBAAoB,CAAC,CAAC;AAExC,IAAA,MAAM,qBAAqB,GAAyC,CAAC,KAAK,EAAE,OAAO,KAAI;AACnF,QAAA,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC;AAChC,QAAA,iBAAiB,GAAG,KAAK,EAAE,OAAO,CAAC;AACvC,KAAC;AAED,IAAA,MAAM,mBAAmB,GAAyC,CAAC,KAAK,EAAE,OAAO,KAAI;AACjF,QAAA,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC;AAC9B,QAAA,eAAe,GAAG,KAAK,EAAE,OAAO,CAAC;AACrC,KAAC;AAED,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,KAAiC,KAAI;AACtE,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAE1C,QAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAM,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC,aAAa,CAAC;AAEnF,QAAA,IAAI,IAAI;QAER,IAAI,kBAAkB,EAAE;AACpB,YAAA,MAAM,MAAM,GACR,MAAM,CAAC,OAAO,KAAK,QAAQ,GAAG,MAAM,GAAI,MAAM,CAAC,aAAmC;AAEtF,YAAA,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,gBAAA,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;QAInC,kBAAkB,CAAC,IAAI,CAAC;KAC3B,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,MAAK;QACrC,iBAAiB,CAAC,EAAE,CAAC;KACxB,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,aAAa,GAAG,WAAW,CAAC,MAAK;QACnC,eAAe,CAAC,EAAE,CAAC;KACtB,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;AACX,QAAA,iBAAiB,CAAC,MAAM,CAAC,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC;AACjF,KAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAEzB,SAAS,CAAC,MAAK;AACX,QAAA,eAAe,CAAC,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC;AAC3E,KAAC,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAEvB,SAAS,CAAC,MAAK;QACX,iBAAiB,CAAC,SAAS,CAAC;AAChC,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,SAAS,CAAC,MAAK;QACX,eAAe,CAAC,OAAO,CAAC;AAC5B,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEb,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,cAAc,IAAI,mBAAmB,CAAC,cAAc,CAAC,EAAE;AACxD,YAAA,oBAAoB,EAAE;;AAG1B,QAAA,MAAM,CAAC,QAAQ,CAAC,QAAQ,IAAI,SAAS,CAAC;QACtC,IAAI,MAAM,EAAE;AACR,YAAA,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC;;AAGzB,QAAA,IAAI,cAAc,KAAK,SAAS,EAAE;AAC9B,YAAA,gBAAgB,CAAC;AACb,gBAAA,KAAK,EAAE,cAAc;AACrB,gBAAA,IAAI,EAAE,QAAQ;AACjB,aAAA,CAAC;AAEF,YAAA,QAAQ,CAAC;AACL,gBAAA,SAAS,EAAE,cAAc;AACzB,gBAAA,OAAO,EAAE,YAAY;gBACrB,QAAQ;gBACR,MAAM;AACT,aAAA,CAAC;;;AAGV,KAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IAEpB,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,YAAY,IAAI,mBAAmB,CAAC,YAAY,CAAC,EAAE;AACpD,YAAA,kBAAkB,EAAE;;AAGxB,QAAA,MAAM,CAAC,MAAM,CAAC,MAAM,IAAI,SAAS,CAAC;QAClC,IAAI,QAAQ,EAAE;AACV,YAAA,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC;;AAG7B,QAAA,IAAI,YAAY,KAAK,OAAO,EAAE;;YAE1B,MAAM,WAAW,GAAG;AAChB,kBAAE,mBAAmB,CAAC,YAAY;AAC9B,sBAAE,eAAe,CAAC,YAAY,CAAC,CAAC,OAAO;AACvC,sBAAE;kBACJ,MAAM;AAEZ,YAAA,cAAc,CAAC;AACX,gBAAA,KAAK,EAAE,YAAY;AACnB,gBAAA,IAAI,EAAE,WAAW;AACpB,aAAA,CAAC;AAEF,YAAA,QAAQ,CAAC;AACL,gBAAA,SAAS,EAAE,cAAc;AACzB,gBAAA,OAAO,EAAE,YAAY;gBACrB,QAAQ;AACR,gBAAA,MAAM,EAAE,WAAW;AACtB,aAAA,CAAC;;;AAGV,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;IAElB,SAAS,CAAC,MAAK;QACX,IAAI,OAAO,EAAE;YACT,OAAO,CAAC,gBAAgB,CAAC;;;AAGjC,KAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;AAEtB,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,UAAU,EAAE,eAAe,CAAC;AAE7F,IAAA,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,QAAQ,IAAI,eAAe;AAC5E,IAAA,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,QAAQ,IAAI,eAAe;AAExE,IAAA,MAAM,iBAAiB,GAAG,OAAO,IAAI,OAAO,IAAI,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC;IAE7E;;AAEI,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC;;QAEzD,WAAW,EAAE,eAAe,EAAA,cAAA,EACd,UAAU,EAAA;AAExB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;YACI,KAAC,CAAA,aAAA,CAAA,SAAS,EACF,EAAA,GAAA,kBAAkB,EACtB,UAAU,EACN,kBAAkB,CAAC,UAAU,KAAK;AAC9B,sBAAE;AACF,sBAAE,kBAAkB,CAAC,UAAU,EAEvC,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,qBAAqB,EAC/B,OAAO,EAAE,eAAe,EACxB,MAAM,EAAE,oBAAoB,EAC5B,KAAK,EAAE,WAAW,IAAI,gBAAgB,IAAI,kBAAkB,CAAC,KAAK,EAClE,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,IAAI,EACb,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,iBAAiB,EAAE,0BAA0B,CAAC,kBACrD,aAAa,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAAA;gBAEzD,KAAC,CAAA,aAAA,CAAA,qBAAqB,OACd,iBAAiB,EACrB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,EAAE,SAAS,CAAC,EAC5D,KAAK,EAAE,SAAS,EAChB,YAAY,EAAC,YAAY,EACzB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,CAAC,YAAY,EAC7B,aAAa,EAAE,qBAAqB,EACpC,OAAO,EAAE,OAAO,EAChB,OAAO,EACH;AACI,0BAAE;AACF,0BAAE,OAAO;4BACP,GAAG,CAAC,CAAC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,EAEjE,GAAA,UAAU,EAChB,CAAA,CACA,CACJ;QAEN,KAAC,CAAA,aAAA,CAAA,OAAO,IAAC,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAI,CAAA;AAEvE,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;YACI,KAAC,CAAA,aAAA,CAAA,SAAS,EACF,EAAA,GAAA,gBAAgB,EACpB,UAAU,EACN,gBAAgB,CAAC,UAAU,KAAK;AAC5B,sBAAE;AACF,sBAAE,gBAAgB,CAAC,UAAU,EAErC,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,mBAAmB,EAC7B,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,kBAAkB,EAC1B,KAAK,EAAE,WAAW,IAAI,cAAc,IAAI,gBAAgB,CAAC,KAAK,EAC9D,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,IAAI,EACb,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,cAAA,EAAmB,aAAa,CAAC,UAAU,EAAE,cAAc,CAAC,EAAA;gBACxD,KAAC,CAAA,aAAA,CAAA,mBAAmB,OACZ,eAAe,EACnB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,CAAC,EAC1D,KAAK,EAAE,OAAO,EACd,YAAY,EAAC,YAAY,EACzB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,CAAC,YAAY,EAC7B,aAAa,EAAE,mBAAmB,EAClC,OAAO,EACH;AACI,0BAAE;0BACA,OAAO,IAAI,YAAY,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,EAElE,OAAO,EAAE,OAAO,EAAA,GACZ,UAAU,EAAA,CAChB,CACA,CACJ,CACJ;AAEd;;;;"}
+{"version":3,"file":"static.js","sources":["../../src/views/static.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { type FC, type MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\nimport { addMonths, endOfMonth, isSameMonth, max, startOfMonth, subMonths } from 'date-fns';\n\nimport { CalendarDesktop } from '@alfalab/core-components-calendar/desktop';\nimport { usePeriodWithReset } from '@alfalab/core-components-calendar/shared';\nimport { type CalendarInputProps } from '@alfalab/core-components-calendar-input';\nimport {\n    formatDate,\n    isValidInputValue,\n    parseDateString,\n} from '@alfalab/core-components-calendar-input/shared';\nimport { isCompleteDateInput } from '@alfalab/core-components-date-input';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport {\n    UniversalDateInput,\n    type UniversalDateInputProps,\n} from '@alfalab/core-components-universal-date-input';\n\nimport { type CalendarRangeProps } from '../Component';\nimport { Divider } from '../components/divider';\nimport { useSelectionProps, useStaticRangeAutoSwap, useStaticViewMonthes } from '../hooks';\nimport { isDayButton } from '../utils';\n\nimport styles from './index.module.css';\n\ntype DateInputProps = Omit<CalendarInputProps, 'onCalendarOpen' | 'onCalendarClose' | 'onChange'>;\n\ninterface CalendarRangeStaticProps\n    extends Omit<CalendarRangeProps, 'calendarPosition' | 'inputFromProps' | 'inputToProps'> {\n    /**\n     * Отображать начальный месяц слева или справа (влияет только на начальный рендер)\n     */\n    defaultMonthPosition?: 'left' | 'right';\n\n    /**\n     * Пропсы для инпута начальной даты диапазона\n     */\n    inputFromProps?: DateInputProps;\n\n    /**\n     * Пропсы для инпута конечной даты диапазона\n     */\n    inputToProps?: DateInputProps;\n}\n\ntype CorrectionToggleRef = { handleCorrection: () => void };\n\nexport const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({\n    className,\n    defaultMonth = startOfMonth(new Date()).getTime(),\n    defaultMonthPosition = 'left',\n    minDate,\n    maxDate,\n    valueFrom = '',\n    valueTo = '',\n    onDateFromChange = () => null,\n    onDateToChange = () => null,\n    onChange = () => null,\n    inputFromProps = {},\n    inputToProps = {},\n    offDays,\n    events,\n    returnInvalidDates = false,\n    dataTestId,\n    calendarContainerClassName,\n    autoSwap = false,\n    onError,\n}) => {\n    const [inputFromValue, setInputFromValue] = useState<string>(valueFrom);\n    const [inputToValue, setInputToValue] = useState<string>(valueTo);\n\n    const [inputFromError, setInputFromError] = useState(false);\n    const [inputToError, setInputToError] = useState(false);\n\n    const toggleCorrectionFromRef = useRef<CorrectionToggleRef>(null);\n    const toggleCorrectionToRef = useRef<CorrectionToggleRef>(null);\n\n    const inputToRef = useRef<HTMLInputElement>(null);\n    const inputFromRef = useRef<HTMLInputElement>(null);\n\n    const { swapDates, isInternalUpdate } = useStaticRangeAutoSwap({\n        autoSwap,\n        setInputFromValue,\n        setInputToValue,\n        toggleCorrectionFromRef,\n        toggleCorrectionToRef,\n        inputFromRef,\n        inputToRef,\n    });\n\n    const [rangeValidationError, setRangeValidationError] = useState(false);\n\n    let dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)\n        ? parseDateString(inputFromValue).getTime()\n        : null;\n\n    const dateTo = isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays)\n        ? parseDateString(inputToValue).getTime()\n        : null;\n\n    if (isCompleteDateInput(inputToValue) && !dateTo && !returnInvalidDates) {\n        dateFrom = null;\n    }\n\n    const [highlightedDate, setHighlightedDate] = useState<number | undefined>(undefined);\n\n    const period = usePeriodWithReset({\n        initialSelectedFrom: dateFrom ? parseDateString(inputFromValue).getTime() : undefined,\n        initialSelectedTo: dateTo ? parseDateString(inputToValue).getTime() : undefined,\n    });\n\n    const {\n        calendarProps: calendarFromProps,\n        onInputChange: onInputChangeFrom,\n        ...dateInputFromProps\n    } = inputFromProps;\n    const {\n        calendarProps: calendarToProps,\n        onInputChange: onInputChangeTo,\n        ...dateInputToProps\n    } = inputToProps;\n\n    const { monthFrom, monthTo, handleMonthFromChange, handleMonthToChange } = useStaticViewMonthes(\n        {\n            selectedFrom: period.selectedFrom,\n            selectedTo: period.selectedTo,\n            defaultMonth,\n            defaultMonthPosition,\n        },\n    );\n\n    const handleInputFromChange: Required<UniversalDateInputProps>['onInputChange'] = (\n        event,\n        payload,\n    ) => {\n        const newValue = payload.value;\n\n        setInputFromValue(newValue);\n\n        if (isValidInputValue(newValue, minDate, maxDate, offDays)) {\n            swapDates(newValue, inputFromValue, inputToValue);\n        }\n\n        const payloadWithDate = { date: parseDateString(payload.value), value: payload.value };\n\n        if (onInputChangeFrom) {\n            onInputChangeFrom(\n                event === null ? ({} as React.ChangeEvent<HTMLInputElement>) : event,\n                payloadWithDate,\n            );\n        }\n    };\n\n    const handleInputToChange: Required<UniversalDateInputProps>['onInputChange'] = (\n        event,\n        payload,\n    ) => {\n        const newValue = payload.value;\n\n        setInputToValue(newValue);\n\n        if (isValidInputValue(newValue, minDate, maxDate, offDays)) {\n            swapDates(newValue, inputFromValue, inputToValue);\n        }\n\n        const payloadWithDate = { date: parseDateString(payload.value), value: payload.value };\n\n        if (onInputChangeTo) {\n            onInputChangeTo(\n                event === null ? ({} as React.ChangeEvent<HTMLInputElement>) : event,\n                payloadWithDate,\n            );\n        }\n    };\n\n    const handleMouseOver = useCallback((event: MouseEvent<HTMLDivElement>) => {\n        const target = event.target as HTMLElement;\n\n        const mouseOverDayButton = isDayButton(target) || isDayButton(target.parentElement);\n\n        let date;\n\n        if (mouseOverDayButton) {\n            const button =\n                target.tagName === 'BUTTON' ? target : (target.parentElement as HTMLButtonElement);\n\n            if (button.dataset.date) {\n                date = +button.dataset.date;\n            }\n        }\n\n        setHighlightedDate(date);\n    }, []);\n\n    const handleClearFrom = useCallback(() => {\n        setInputFromValue('');\n    }, []);\n\n    const handleClearTo = useCallback(() => {\n        setInputToValue('');\n    }, []);\n\n    useEffect(() => {\n        setInputFromValue(period.selectedFrom ? formatDate(period.selectedFrom) : '');\n    }, [period.selectedFrom]);\n\n    useEffect(() => {\n        setInputToValue(period.selectedTo ? formatDate(period.selectedTo) : '');\n    }, [period.selectedTo]);\n\n    useEffect(() => {\n        setInputFromValue(valueFrom);\n    }, [valueFrom]);\n\n    useEffect(() => {\n        setInputToValue(valueTo);\n    }, [valueTo]);\n\n    useEffect(() => {\n        period.setStart(dateFrom || undefined);\n        if (dateTo) {\n            period.setEnd(dateTo);\n        }\n\n        if (isInternalUpdate.current) {\n            isInternalUpdate.current = false;\n\n            return;\n        }\n\n        if (inputFromValue !== valueFrom) {\n            onDateFromChange?.({\n                value: inputFromValue,\n                date: dateFrom,\n            });\n\n            onChange?.({\n                valueFrom: inputFromValue,\n                valueTo: inputToValue,\n                dateFrom,\n                dateTo,\n            });\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [inputFromValue]);\n\n    useEffect(() => {\n        period.setEnd(dateTo || undefined);\n        if (dateFrom) {\n            period.setStart(dateFrom);\n        }\n\n        if (isInternalUpdate.current) {\n            isInternalUpdate.current = false;\n\n            return;\n        }\n\n        if (inputToValue !== valueTo) {\n            // eslint-disable-next-line no-nested-ternary\n            const inputDateTo = returnInvalidDates\n                ? isCompleteDateInput(inputToValue)\n                    ? parseDateString(inputToValue).getTime()\n                    : null\n                : dateTo;\n\n            onDateToChange?.({\n                value: inputToValue,\n                date: inputDateTo,\n            });\n\n            onChange?.({\n                valueFrom: inputFromValue,\n                valueTo: inputToValue,\n                dateFrom,\n                dateTo: inputDateTo,\n            });\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [inputToValue]);\n\n    useEffect(() => {\n        const isInputFromValueComplete = isCompleteDateInput(inputFromValue);\n        const isInputToValueComplete = isCompleteDateInput(inputToValue);\n\n        let individualInputFromError = false;\n        let individualInputToError = false;\n\n        if (isInputFromValueComplete) {\n            individualInputFromError = !isValidInputValue(\n                inputFromValue,\n                minDate,\n                maxDate,\n                offDays,\n            );\n        }\n\n        if (isInputToValueComplete) {\n            individualInputToError = !isValidInputValue(inputToValue, minDate, maxDate, offDays);\n        }\n\n        let isRangeError = false;\n\n        const isValidInputFromValueStandalone =\n            isInputFromValueComplete && individualInputFromError === false;\n        const isValidInputToValueStandalone =\n            isInputToValueComplete && individualInputToError === false;\n\n        if (isValidInputFromValueStandalone && isValidInputToValueStandalone) {\n            const parsedDateFrom = parseDateString(inputFromValue).getTime();\n            const parsedDateTo = parseDateString(inputToValue).getTime();\n\n            if (parsedDateFrom > parsedDateTo) {\n                isRangeError = true;\n            }\n        }\n\n        setInputFromError(individualInputFromError || isRangeError);\n        setInputToError(individualInputToError || isRangeError);\n\n        setRangeValidationError(isRangeError);\n    }, [inputFromValue, inputToValue, minDate, maxDate, offDays]);\n\n    useEffect(() => {\n        if (onError) {\n            onError(rangeValidationError);\n        }\n    }, [onError, rangeValidationError]);\n\n    const rangeProps = useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);\n\n    const CalendarFromComponent = dateInputFromProps.Calendar || CalendarDesktop;\n    const CalendarToComponent = dateInputToProps.Calendar || CalendarDesktop;\n\n    const minMaxInSameMonth = minDate && maxDate && isSameMonth(minDate, maxDate);\n\n    return (\n        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n        <div\n            className={cn(styles.component, styles.static, className)}\n            // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n            onMouseOver={handleMouseOver}\n            data-test-id={dataTestId}\n        >\n            <div className={cn(styles.inputsContainer)}>\n                <UniversalDateInput\n                    {...dateInputFromProps}\n                    Calendar={undefined}\n                    view='date'\n                    picker={false}\n                    value={inputFromValue}\n                    onInputChange={handleInputFromChange}\n                    onClear={handleClearFrom}\n                    correctionRef={toggleCorrectionFromRef}\n                    error={inputFromError ? 'Укажите корректную дату' : dateInputFromProps.error}\n                    clear={true}\n                    block={true}\n                    minDate={minDate}\n                    autoCorrection={false}\n                    maxDate={\n                        minMaxInSameMonth\n                            ? maxDate\n                            : maxDate && max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime()\n                    }\n                    ref={inputFromRef}\n                />\n\n                <Divider inputFromProps={inputFromProps} inputToProps={inputToProps} />\n\n                <UniversalDateInput\n                    {...dateInputToProps}\n                    Calendar={undefined}\n                    view='date'\n                    picker={false}\n                    value={inputToValue}\n                    onInputChange={handleInputToChange}\n                    onClear={handleClearTo}\n                    error={inputToError ? 'Укажите корректную дату' : dateInputToProps.error}\n                    correctionRef={toggleCorrectionToRef}\n                    clear={true}\n                    block={true}\n                    autoCorrection={false}\n                    minDate={\n                        minMaxInSameMonth\n                            ? minDate\n                            : minDate && startOfMonth(addMonths(minDate, 1)).getTime()\n                    }\n                    maxDate={maxDate}\n                    ref={inputToRef}\n                />\n            </div>\n            <div className={cn(styles.calendarContainers)}>\n                <div\n                    className={cn(styles.calendarContainer, calendarContainerClassName)}\n                    data-test-id={getDataTestId(dataTestId, 'container-from')}\n                >\n                    <CalendarFromComponent\n                        {...calendarFromProps}\n                        className={cn(styles.calendar, calendarFromProps?.className)}\n                        month={monthFrom}\n                        selectorView='month-only'\n                        offDays={offDays}\n                        events={events}\n                        onChange={period.updatePeriod}\n                        onMonthChange={handleMonthFromChange}\n                        minDate={minDate}\n                        maxDate={\n                            minMaxInSameMonth\n                                ? maxDate\n                                : maxDate &&\n                                  max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime()\n                        }\n                        {...rangeProps}\n                    />\n                </div>\n                <div data-test-id={getDataTestId(dataTestId, 'container-to')}>\n                    <CalendarToComponent\n                        {...calendarToProps}\n                        className={cn(styles.calendar, calendarToProps?.className)}\n                        month={monthTo}\n                        selectorView='month-only'\n                        offDays={offDays}\n                        events={events}\n                        onChange={period.updatePeriod}\n                        onMonthChange={handleMonthToChange}\n                        minDate={\n                            minMaxInSameMonth\n                                ? minDate\n                                : minDate && startOfMonth(addMonths(minDate, 1)).getTime()\n                        }\n                        maxDate={maxDate}\n                        {...rangeProps}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-calendar-range",
-    "version": "9.0.14",
+    "version": "9.1.0",
     "description": "Calendar range component",
     "keywords": [],
     "license": "MIT",
@@ -17,6 +17,7 @@
         "@alfalab/core-components-calendar-input": "^12.0.14",
         "@alfalab/core-components-date-input": "^6.0.10",
         "@alfalab/core-components-shared": "^2.2.1",
+        "@alfalab/core-components-universal-date-input": "^4.0.14",
         "@alfalab/hooks": "^1.17.0",
         "classnames": "^2.5.1",
         "date-fns": "^4.1.0",

package/src/Component.tsx

@@ -106,6 +106,11 @@ export type CalendarRangeProps = {
      * Дополнительный класс для контейнера календаря
      */
     calendarContainerClassName?: string;
+
+    /**
+     * Автоподмена дат
+     */
+    autoSwap?: boolean;
 };
 
 export const CalendarRange: FC<CalendarRangeProps> = ({

package/src/components/divider/index.module.css

@@ -5,7 +5,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 16px;
+    min-width: 16px;
     margin: var(--gap-0) var(--gap-8);
 
     &:after {

package/src/hooks.ts

@@ -1,6 +1,9 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { type RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { addMonths, isEqual, max, min, startOfMonth, subMonths } from 'date-fns';
 
+import { isValidInputValue, parseDateString } from '@alfalab/core-components-calendar-input/shared';
+import { isCompleteDateInput } from '@alfalab/core-components-date-input';
+
 export function usePopoverViewMonthes({
     dateFrom,
     dateTo,
@@ -194,3 +197,149 @@ export function useSelectionProps(from?: number, to?: number, highlighted?: numb
         };
     }, [from, highlighted, to]);
 }
+
+interface UseStaticRangeAutoSwapParams {
+    autoSwap: boolean;
+    setInputFromValue: React.Dispatch<React.SetStateAction<string>>;
+    setInputToValue: React.Dispatch<React.SetStateAction<string>>;
+    toggleCorrectionFromRef: RefObject<CorrectionToggleRef>;
+    toggleCorrectionToRef: RefObject<CorrectionToggleRef>;
+    inputFromRef: RefObject<HTMLInputElement>;
+    inputToRef: RefObject<HTMLInputElement>;
+}
+
+type CorrectionToggleRef = { handleCorrection: () => void };
+
+export const useStaticRangeAutoSwap = ({
+    autoSwap,
+    setInputFromValue,
+    setInputToValue,
+    toggleCorrectionFromRef,
+    toggleCorrectionToRef,
+    inputFromRef,
+    inputToRef,
+}: UseStaticRangeAutoSwapParams) => {
+    const isInternalUpdate = useRef(false);
+
+    const swapDates = (newValue: string, inputFromValue: string, inputToValue: string) => {
+        if (!autoSwap) return;
+
+        if (
+            isCompleteDateInput(newValue) &&
+            isCompleteDateInput(inputToValue) &&
+            parseDateString(newValue).getTime() > parseDateString(inputToValue).getTime()
+        ) {
+            if (inputFromValue !== inputToValue) {
+                isInternalUpdate.current = true;
+                setInputFromValue(inputToValue);
+                setInputToValue(newValue);
+
+                toggleCorrectionFromRef.current?.handleCorrection();
+                toggleCorrectionToRef.current?.handleCorrection();
+
+                setTimeout(() => {
+                    inputToRef.current?.focus();
+                }, 0);
+            }
+        }
+        if (
+            isCompleteDateInput(newValue) &&
+            isCompleteDateInput(inputFromValue) &&
+            parseDateString(newValue).getTime() < parseDateString(inputFromValue).getTime()
+        ) {
+            if (inputToValue !== inputFromValue) {
+                isInternalUpdate.current = true;
+                setInputToValue(inputFromValue);
+                setInputFromValue(newValue);
+
+                toggleCorrectionFromRef.current?.handleCorrection();
+                toggleCorrectionToRef.current?.handleCorrection();
+
+                setTimeout(() => {
+                    inputFromRef.current?.focus();
+                }, 0);
+            }
+        }
+    };
+
+    return { swapDates, isInternalUpdate };
+};
+
+interface UseInputValidationParams {
+    inputFromValue: string;
+    inputToValue: string;
+    minDate: number;
+    maxDate: number;
+    offDays: Array<number | Date>;
+}
+
+interface InputValidationResult {
+    inputFromError: boolean;
+    inputToError: boolean;
+    rangeError: boolean;
+}
+
+export const useInputValidation = ({
+    inputFromValue,
+    inputToValue,
+    minDate,
+    maxDate,
+    offDays,
+}: UseInputValidationParams): InputValidationResult => {
+    const [validationResult, setValidationResult] = useState<InputValidationResult>({
+        inputFromError: false,
+        inputToError: false,
+        rangeError: false,
+    });
+
+    useEffect(() => {
+        const isInputFromValueComplete = isCompleteDateInput(inputFromValue);
+        const isInputToValueComplete = isCompleteDateInput(inputToValue);
+
+        let individualInputFromError = false;
+        let individualInputToError = false;
+
+        if (isInputFromValueComplete) {
+            individualInputFromError = !isValidInputValue(
+                inputFromValue,
+                minDate,
+                maxDate,
+                offDays,
+            );
+        }
+
+        if (isInputToValueComplete) {
+            individualInputToError = !isValidInputValue(inputToValue, minDate, maxDate, offDays);
+        }
+
+        let rangeError = false;
+
+        const parsedDateFrom = isInputFromValueComplete ? parseDateString(inputFromValue) : null;
+        const parsedDateTo = isInputToValueComplete ? parseDateString(inputToValue) : null;
+
+        const isParsedDateFromValid =
+            parsedDateFrom &&
+            !Number.isNaN(parsedDateFrom.getTime()) &&
+            isValidInputValue(inputFromValue, minDate, maxDate, offDays);
+        const isParsedDateToValid =
+            parsedDateTo &&
+            !Number.isNaN(parsedDateTo.getTime()) &&
+            isValidInputValue(inputToValue, minDate, maxDate, offDays);
+
+        if (
+            isParsedDateFromValid &&
+            isParsedDateToValid &&
+            parsedDateFrom.getTime() > parsedDateTo.getTime()
+        ) {
+            rangeError = true;
+        }
+
+        setValidationResult({
+            inputFromError: individualInputFromError || rangeError,
+            inputToError: individualInputToError || rangeError,
+            rangeError,
+        });
+    }, [inputFromValue, inputToValue, minDate, maxDate, offDays]);
+
+    return validationResult;
+};

package/src/views/index.module.css

@@ -18,6 +18,8 @@
 }
 
 .static {
+    flex-direction: column;
+
     & .calendar {
         width: var(--calendar-inner-width);
 
@@ -27,6 +29,15 @@
     }
 }
 
+.inputsContainer {
+    display: flex;
+}
+
+.calendarContainers {
+    display: flex;
+    gap: var(--gap-32);
+}
+
 .calendarContainer {
     width: var(--calendar-inner-width);
     display: flex;