@alfalab/core-components-calendar-range 4.2.4 → 5.1.0

package/dist/modern/Component.js

@@ -1,172 +1,24 @@
-import React, { useState, useCallback } from 'react';
-import cn from 'classnames';
-import { startOfMonth, subMonths } from 'date-fns';
-import { usePeriod, dateInLimits } from '@alfalab/core-components-calendar/dist/modern';
-import { parseDateString, isCompleteDateInput, formatDate, CalendarInput } from '@alfalab/core-components-calendar-input/dist/modern';
-import { initialValueState, getCorrectValueState, isDayButton } from './utils.js';
-import { useCalendarMonthes } from './useCalendarMonthes.js';
-import { useCalendarMaxMinDates } from './useCalendarMaxMinDates.js';
+import React from 'react';
+import 'classnames';
+import 'date-fns/startOfMonth';
+import '@alfalab/core-components-calendar-input/dist/modern';
+import '@alfalab/core-components-date-input/dist/modern';
+import 'date-fns/addMonths';
+import 'date-fns/subMonths';
+import 'date-fns/max';
+import 'date-fns/min';
+import 'date-fns/isEqual';
+import './hooks.js';
+import './index.module-4c141936.js';
+import { CalendarRangePopover } from './views/popover.js';
+import 'date-fns/endOfMonth';
+import '@alfalab/core-components-calendar/dist/modern';
+import './utils.js';
+import { CalendarRangeStatic } from './views/static.js';
 
-var styles = {"component":"calendar-range__component_zi6if","divider":"calendar-range__divider_zi6if"};
-require('./index.css')
-
-/* eslint-disable multiline-comment-style */
-const CalendarRange = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), minDate, maxDate, valueFrom, valueTo, onDateFromChange, onDateToChange, inputFromProps = {}, inputToProps = {}, calendarPosition = 'static', dataTestId, }) => {
-    const uncontrolled = valueFrom === undefined && valueTo === undefined;
-    const isPopover = calendarPosition === 'popover';
-    const period = usePeriod({
-        initialSelectedFrom: valueFrom ? parseDateString(valueFrom).getTime() : undefined,
-        initialSelectedTo: valueTo ? parseDateString(valueTo).getTime() : undefined,
-    });
-    const { setStart, setEnd, resetPeriod } = period;
-    let { selectedFrom, selectedTo } = period;
-    if (!dateInLimits(selectedFrom, minDate, maxDate))
-        selectedFrom = undefined;
-    if (!dateInLimits(selectedTo, minDate, maxDate))
-        selectedTo = undefined;
-    const [stateFrom, setStateFrom] = useState(initialValueState);
-    const [stateTo, setStateTo] = useState(initialValueState);
-    const inputValueFrom = getCorrectValueState(stateFrom, valueFrom, minDate, maxDate);
-    const inputValueTo = getCorrectValueState(stateTo, valueTo, minDate, maxDate);
-    const handleStateFromChange = useCallback((newFromState) => {
-        if (uncontrolled)
-            setStateFrom(newFromState);
-        if (onDateFromChange)
-            onDateFromChange(newFromState);
-    }, [onDateFromChange, uncontrolled]);
-    const handleStateToChange = useCallback((newToState) => {
-        if (uncontrolled)
-            setStateTo(newToState);
-        if (onDateToChange)
-            onDateToChange(newToState);
-    }, [onDateToChange, uncontrolled]);
-    const { monthFrom, monthTo, handleMonthFromChange, handleMonthToChange } = useCalendarMonthes({
-        inputValueFrom,
-        inputValueTo,
-        defaultMonth,
-        isPopover,
-    });
-    const handleInputFromChange = useCallback((_, { value, date }) => {
-        if (value === '') {
-            setStart(undefined);
-            handleStateFromChange(initialValueState);
-        }
-        if (!isCompleteDateInput(value)) {
-            return;
-        }
-        if (dateInLimits(date, minDate, maxDate)) {
-            setStart(date.getTime());
-            handleMonthFromChange(startOfMonth(date).getTime());
-            handleStateFromChange({ date: date.getTime(), value });
-        }
-        else {
-            setStart(undefined);
-            handleStateFromChange({ date: null, value });
-        }
-    }, [handleMonthFromChange, handleStateFromChange, maxDate, minDate, setStart]);
-    const handleInputToChange = useCallback((_, { value, date }) => {
-        if (value === '') {
-            setEnd(undefined);
-            handleStateToChange(initialValueState);
-        }
-        if (!isCompleteDateInput(value)) {
-            return;
-        }
-        if (dateInLimits(date, minDate, maxDate)) {
-            setEnd(date.getTime());
-            handleMonthToChange(subMonths(startOfMonth(date), 1).getTime());
-            handleStateToChange({ date: date.getTime(), value });
-        }
-        else {
-            setEnd(undefined);
-            handleStateToChange({ date: null, value });
-        }
-    }, [handleMonthToChange, handleStateToChange, maxDate, minDate, setEnd]);
-    const handleCalendarChange = useCallback((date) => {
-        if (!inputValueFrom.date) {
-            setStart(date);
-            handleStateFromChange({ date, value: formatDate(date) });
-            return;
-        }
-        if (date < inputValueFrom.date) {
-            resetPeriod();
-            setStart(date);
-            handleStateToChange(initialValueState);
-            handleStateFromChange({ date, value: formatDate(date) });
-            return;
-        }
-        if (date === inputValueFrom.date && date === inputValueTo.date) {
-            resetPeriod();
-            handleStateFromChange(initialValueState);
-            handleStateToChange(initialValueState);
-            return;
-        }
-        handleStateToChange({ date, value: formatDate(date) });
-        setEnd(date);
-    }, [
-        inputValueFrom.date,
-        inputValueTo.date,
-        handleStateToChange,
-        setEnd,
-        setStart,
-        handleStateFromChange,
-        resetPeriod,
-    ]);
-    const handleFromCalendarChange = useCallback((date) => {
-        if (!isPopover) {
-            handleCalendarChange(date);
-            return;
-        }
-        setStart(date);
-        handleStateFromChange({ date, value: formatDate(date) });
-    }, [handleCalendarChange, handleStateFromChange, isPopover, setStart]);
-    const handleToCalendarChange = useCallback((date) => {
-        if (!isPopover) {
-            handleCalendarChange(date);
-            return;
-        }
-        handleStateToChange({ date, value: formatDate(date) });
-        setEnd(date);
-    }, [handleCalendarChange, handleStateToChange, isPopover, setEnd]);
-    const [nextMonthHighlighted, setNextMonthHighlighted] = useState(false);
-    const handleCalendarToMouseOver = useCallback((event) => {
-        const target = event.target;
-        const dayHighlighted = isDayButton(target) || isDayButton(target.parentElement);
-        if (nextMonthHighlighted && !dayHighlighted)
-            setNextMonthHighlighted(false);
-        if (!nextMonthHighlighted && dayHighlighted)
-            setNextMonthHighlighted(true);
-    }, [nextMonthHighlighted]);
-    const selectorView = isPopover ? 'full' : 'month-only';
-    const calendarSelectedTo = selectedTo || (nextMonthHighlighted ? monthTo : undefined);
-    const maxMinDates = useCalendarMaxMinDates({
-        isPopover,
-        monthTo,
-        monthFrom,
-        selectedFrom,
-        selectedTo: calendarSelectedTo,
-        maxDate,
-        minDate,
-    });
-    return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId },
-        React.createElement(CalendarInput, Object.assign({}, inputFromProps, { useAnchorWidth: false, calendarPosition: calendarPosition, onInputChange: handleInputFromChange, onCalendarChange: handleFromCalendarChange, value: inputValueFrom.value, minDate: maxMinDates.fromMinDate, maxDate: maxMinDates.fromMaxDate, calendarProps: {
-                ...inputFromProps.calendarProps,
-                month: monthFrom,
-                onMonthChange: handleMonthFromChange,
-                selectorView,
-                selectedFrom,
-                selectedTo: calendarSelectedTo,
-            } })),
-        React.createElement("span", { className: styles.divider }),
-        React.createElement("div", { onMouseOver: handleCalendarToMouseOver },
-            React.createElement(CalendarInput, Object.assign({}, inputToProps, { useAnchorWidth: false, calendarPosition: calendarPosition, popoverPosition: 'bottom-end', onInputChange: handleInputToChange, onCalendarChange: handleToCalendarChange, value: inputValueTo.value, minDate: maxMinDates.toMinDate, maxDate: maxMinDates.toMaxDate, calendarProps: {
-                    ...inputToProps.calendarProps,
-                    month: monthTo,
-                    onMonthChange: handleMonthToChange,
-                    selectorView,
-                    selectedFrom,
-                    selectedTo,
-                } })))));
+const CalendarRange = ({ calendarPosition = 'static', ...restProps }) => {
+    const View = calendarPosition === 'popover' ? CalendarRangePopover : CalendarRangeStatic;
+    return React.createElement(View, Object.assign({}, restProps));
 };
 
 export { CalendarRange };

package/dist/modern/hooks.d.ts

@@ -0,0 +1,27 @@
+declare function usePopoverViewMonthes({ dateFrom, dateTo, defaultMonth, resetKey, }: {
+    defaultMonth: number;
+    dateFrom: number | null;
+    dateTo: number | null;
+    resetKey?: number;
+}): {
+    monthFrom: number | undefined;
+    monthTo: number | undefined;
+    handleMonthFromChange: (newMonthFrom: number) => void;
+    handleMonthToChange: (newMonthTo: number) => void;
+};
+declare function useStaticViewMonthes({ selectedFrom, selectedTo, defaultMonth, }: {
+    selectedFrom?: number;
+    selectedTo?: number;
+    defaultMonth: number;
+}): {
+    monthFrom: number;
+    monthTo: number;
+    handleMonthFromChange: (newMonthFrom: number) => void;
+    handleMonthToChange: (newMonthTo: number) => void;
+};
+declare function useSelectionProps(from?: number, to?: number, highlighted?: number): {
+    rangeComplete: boolean;
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+};
+export { usePopoverViewMonthes, useStaticViewMonthes, useSelectionProps };

package/dist/modern/hooks.js

@@ -0,0 +1,130 @@
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import startOfMonth from 'date-fns/startOfMonth';
+import addMonths from 'date-fns/addMonths';
+import subMonths from 'date-fns/subMonths';
+import max from 'date-fns/max';
+import min from 'date-fns/min';
+import isEqual from 'date-fns/isEqual';
+
+function usePopoverViewMonthes({ dateFrom, dateTo, defaultMonth, resetKey, }) {
+    const [monthFrom, setMonthFrom] = useState();
+    const [monthTo, setMonthTo] = useState();
+    const handleMonthFromChange = useCallback((newMonthFrom) => {
+        setMonthFrom(newMonthFrom);
+        if (!dateTo) {
+            setMonthTo(newMonthFrom);
+        }
+    }, [dateTo]);
+    const handleMonthToChange = useCallback((newMonthTo) => {
+        setMonthTo(newMonthTo);
+        if (!dateFrom) {
+            setMonthFrom(newMonthTo);
+        }
+    }, [dateFrom]);
+    useEffect(() => {
+        setMonthFrom(dateFrom ? startOfMonth(dateFrom).getTime() : defaultMonth);
+    }, [defaultMonth, dateFrom, resetKey]);
+    useEffect(() => {
+        setMonthTo(dateTo ? startOfMonth(dateTo).getTime() : monthFrom);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dateTo, resetKey]);
+    return {
+        monthFrom,
+        monthTo,
+        handleMonthFromChange,
+        handleMonthToChange,
+    };
+}
+function useStaticViewMonthes({ selectedFrom, selectedTo, defaultMonth, }) {
+    /**
+     * Если указана начальная дата — левый месяц равен ей, иначе используется дата конца.
+     * Если обе даты не указаны, то используется дефолтный месяц
+     */
+    const initialMonthFrom = useMemo(() => startOfMonth(selectedFrom || selectedTo || defaultMonth).getTime(), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    /**
+     * Правый месяц должен быть как минимум на 1 месяц больше левого
+     */
+    const initialMonthTo = useMemo(() => max([
+        selectedTo ? startOfMonth(selectedTo) : 0,
+        addMonths(initialMonthFrom, 1),
+    ]).getTime(), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const [monthFrom, setMonthFrom] = useState(initialMonthFrom);
+    const [monthTo, setMonthTo] = useState(initialMonthTo);
+    const handleMonthFromChange = useCallback((newMonthFrom) => {
+        setMonthFrom(newMonthFrom);
+        if (monthTo && isEqual(newMonthFrom, monthTo)) {
+            const nextMonth = addMonths(newMonthFrom, 1).getTime();
+            setMonthTo(nextMonth);
+        }
+    }, [monthTo]);
+    const handleMonthToChange = useCallback((newMonthTo) => {
+        setMonthTo(newMonthTo);
+        if (monthFrom && isEqual(newMonthTo, monthFrom)) {
+            const prevMonth = subMonths(newMonthTo, 1).getTime();
+            setMonthFrom(prevMonth);
+        }
+    }, [monthFrom]);
+    // eslint-disable-next-line complexity
+    useEffect(() => {
+        const selectedFromMonth = selectedFrom ? startOfMonth(selectedFrom).getTime() : undefined;
+        const selectedToMonth = selectedTo ? startOfMonth(selectedTo).getTime() : undefined;
+        // Проверяем, показываются ли выбранные месяцы в левой или правой части компонента
+        const fromMonthOnLeft = selectedFromMonth && selectedFromMonth === monthFrom;
+        const fromMonthOnRight = selectedFromMonth && selectedFromMonth === monthTo;
+        const toMonthOnRight = selectedToMonth && selectedToMonth === monthTo;
+        const toMonthOnLeft = selectedToMonth && selectedToMonth === monthFrom;
+        const fromMonthOnScreen = fromMonthOnLeft || fromMonthOnRight;
+        const toMonthOnScreen = toMonthOnLeft || toMonthOnRight;
+        if (fromMonthOnLeft && toMonthOnLeft) {
+            setMonthTo(max([addMonths(selectedFromMonth, 1), monthTo]).getTime());
+            return;
+        }
+        if (fromMonthOnRight && toMonthOnRight) {
+            setMonthFrom(min([subMonths(selectedToMonth, 1), monthFrom]).getTime());
+            return;
+        }
+        if (selectedFromMonth && selectedToMonth) {
+            setMonthFrom(selectedFromMonth);
+            setMonthTo(max([addMonths(selectedFromMonth, 1), selectedToMonth]).getTime());
+            return;
+        }
+        if (selectedFromMonth && !selectedToMonth && !fromMonthOnScreen) {
+            setMonthFrom(selectedFromMonth);
+            setMonthTo(max([addMonths(selectedFromMonth, 1), monthTo]).getTime());
+        }
+        if (selectedToMonth && !selectedFromMonth && !toMonthOnScreen) {
+            setMonthTo(selectedToMonth);
+            setMonthFrom(min([subMonths(selectedToMonth, 1), monthFrom]).getTime());
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedFrom, selectedTo]);
+    return {
+        monthFrom,
+        monthTo,
+        handleMonthFromChange,
+        handleMonthToChange,
+    };
+}
+function useSelectionProps(from, to, highlighted) {
+    return useMemo(() => {
+        if (from && to) {
+            return {
+                rangeComplete: true,
+                selectedFrom: min([from, to]).getTime(),
+                selectedTo: max([from, to]).getTime(),
+            };
+        }
+        const dates = [from, to, highlighted].filter(date => date !== undefined);
+        return {
+            rangeComplete: false,
+            selectedFrom: from || dates.length === 2 ? min(dates).getTime() : undefined,
+            selectedTo: to || dates.length === 2 ? max(dates).getTime() : undefined,
+        };
+    }, [from, highlighted, to]);
+}
+
+export { usePopoverViewMonthes, useSelectionProps, useStaticViewMonthes };

package/dist/modern/index.js

@@ -1,9 +1,18 @@
 import 'react';
 import 'classnames';
-import 'date-fns';
-import '@alfalab/core-components-calendar/dist/modern';
+import 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar-input/dist/modern';
+import '@alfalab/core-components-date-input/dist/modern';
+import 'date-fns/addMonths';
+import 'date-fns/subMonths';
+import 'date-fns/max';
+import 'date-fns/min';
+import 'date-fns/isEqual';
+import './hooks.js';
+import './index.module-4c141936.js';
+import './views/popover.js';
+import 'date-fns/endOfMonth';
+import '@alfalab/core-components-calendar/dist/modern';
 import './utils.js';
-import './useCalendarMonthes.js';
-import './useCalendarMaxMinDates.js';
+import './views/static.js';
 export { CalendarRange } from './Component.js';

package/dist/modern/index.module-4c141936.js

@@ -0,0 +1,4 @@
+var styles = {"component":"calendar-range__component_eksd6","divider":"calendar-range__divider_eksd6","static":"calendar-range__static_eksd6","calendar":"calendar-range__calendar_eksd6"};
+require('./views/index.css')
+
+export { styles as s };

package/dist/modern/utils.d.ts

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

package/dist/modern/utils.js

@@ -1,16 +1,3 @@
-import { dateInLimits } from '@alfalab/core-components-calendar/dist/modern';
-import { parseDateString } from '@alfalab/core-components-calendar-input/dist/modern';
-
-const initialValueState = { date: null, value: '' };
-const getCorrectValueState = (stateValue, propValue, minDate, maxDate) => {
-    const state = propValue === undefined
-        ? stateValue
-        : { value: propValue, date: parseDateString(propValue).getTime() };
-    if (!dateInLimits(state.date, minDate, maxDate)) {
-        state.date = null;
-    }
-    return state;
-};
 const isDayButton = (node) => node && node.tagName === 'BUTTON' && node.dataset.date;
 
-export { getCorrectValueState, initialValueState, isDayButton };
+export { isDayButton };

package/dist/modern/views/index.css

@@ -0,0 +1,66 @@
+/* hash: 13dnh */
+:root {
+    --color-light-graphic-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+:root {
+    --calendar-inner-width: 280px;
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.calendar-range__component_eksd6 {
+    display: flex
+}
+.calendar-range__component_eksd6 button[aria-selected='true'] {
+        cursor: pointer;
+    }
+.calendar-range__component_eksd6 *[class*='errorIcon_'] {
+        display: none;
+    }
+.calendar-range__component_eksd6 *[class*='calendarIcon_'] {
+        margin-right: 0;
+    }
+.calendar-range__divider_eksd6 {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    margin: 0 var(--gap-xs)
+}
+.calendar-range__divider_eksd6:after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 1px;
+        background-color: var(--color-light-graphic-primary);
+    }
+.calendar-range__static_eksd6 .calendar-range__calendar_eksd6 {
+        width: var(--calendar-inner-width);
+    }

package/dist/modern/views/popover.d.ts

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

package/dist/modern/views/popover.js

@@ -0,0 +1,115 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import startOfMonth from 'date-fns/startOfMonth';
+import { isValidInputValue, parseDateString, CalendarInput } from '@alfalab/core-components-calendar-input/dist/modern';
+import { isCompleteDateInput } from '@alfalab/core-components-date-input/dist/modern';
+import 'date-fns/addMonths';
+import 'date-fns/subMonths';
+import 'date-fns/max';
+import 'date-fns/min';
+import 'date-fns/isEqual';
+import { usePopoverViewMonthes } from '../hooks.js';
+import { s as styles } from '../index.module-4c141936.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 [inputFromValue, setInputFromValue] = useState(valueFrom);
+    const [inputToValue, setInputToValue] = useState(valueTo);
+    /**
+     * Ключ для сброса календарей
+     * Пользователь открыл календарь, изменил месяц, но ничего не выбрал
+     * — при следующем открытии в календаре будет установлен начальный месяц
+     */
+    const [resetKey, setResetKey] = useState(0);
+    const dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)
+        ? parseDateString(inputFromValue).getTime()
+        : null;
+    const dateTo = isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays)
+        ? parseDateString(inputToValue).getTime()
+        : null;
+    const [inputFromInvalid, setInputFromInvalid] = useState(isCompleteDateInput(inputFromValue) && dateFrom === null);
+    const [inputToInvalid, setInputToInvalid] = useState(isCompleteDateInput(inputToValue) && dateTo === null);
+    const bothInvalid = isCompleteDateInput(inputFromValue) &&
+        isCompleteDateInput(inputToValue) &&
+        parseDateString(inputFromValue).getTime() > parseDateString(inputToValue).getTime();
+    const { monthFrom, monthTo, handleMonthFromChange, handleMonthToChange, } = usePopoverViewMonthes({
+        dateFrom,
+        dateTo,
+        defaultMonth,
+        resetKey,
+    });
+    const handleValidInputFrom = useCallback(() => {
+        setInputFromInvalid(inputFromValue !== '' && !isValidInputValue(inputFromValue, minDate, maxDate, offDays));
+    }, [inputFromValue, maxDate, minDate, offDays]);
+    const handleValidInputTo = useCallback(() => {
+        setInputToInvalid(inputToValue !== '' &&
+            !isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays));
+    }, [dateFrom, inputToValue, maxDate, minDate, offDays]);
+    const handleInputFromChange = useCallback((_, payload) => {
+        setInputFromValue(payload.value);
+    }, []);
+    const handleInputToChange = useCallback((_, payload) => {
+        setInputToValue(payload.value);
+    }, []);
+    const handleInputFromBlur = useCallback(() => {
+        handleValidInputFrom();
+        setResetKey(+new Date());
+    }, [handleValidInputFrom]);
+    const handleInputToBlur = useCallback(() => {
+        handleValidInputTo();
+        setResetKey(+new Date());
+    }, [handleValidInputTo]);
+    const handleFromChange = useCallback((_, payload) => {
+        setInputFromValue(payload.value);
+    }, []);
+    const handleToChange = useCallback((_, payload) => {
+        setInputToValue(payload.value);
+    }, []);
+    useEffect(() => {
+        setInputFromValue(valueFrom);
+    }, [valueFrom]);
+    useEffect(() => {
+        setInputToValue(valueTo);
+    }, [valueTo]);
+    useEffect(() => {
+        onDateFromChange({ value: inputFromValue, date: dateFrom });
+        onChange({
+            valueFrom: inputFromValue,
+            valueTo: inputToValue,
+            dateFrom,
+            dateTo,
+        });
+        if (!inputFromValue || isCompleteDateInput(inputFromValue)) {
+            handleValidInputFrom();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputFromValue]);
+    useEffect(() => {
+        onDateToChange({ value: inputToValue, date: dateTo });
+        onChange({
+            valueFrom: inputFromValue,
+            valueTo: inputToValue,
+            dateFrom,
+            dateTo,
+        });
+        if (!inputToValue || isCompleteDateInput(inputToValue)) {
+            handleValidInputTo();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputToValue]);
+    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,
+                month: monthFrom,
+                onMonthChange: handleMonthFromChange,
+                selectorView: 'full',
+            } })),
+        React.createElement("span", { className: styles.divider }),
+        React.createElement(CalendarInput, Object.assign({}, inputToProps, { useAnchorWidth: false, calendarPosition: 'popover', popoverPosition: 'bottom-end', error: inputToInvalid || bothInvalid || inputToProps.error, onChange: handleToChange, onInputChange: handleInputToChange, onBlur: handleInputToBlur, value: inputToValue, minDate: dateFrom || minDate, maxDate: maxDate, offDays: offDays, events: events, calendarProps: {
+                ...inputToProps.calendarProps,
+                month: monthTo,
+                onMonthChange: handleMonthToChange,
+                selectorView: 'full',
+            } }))));
+};
+
+export { CalendarRangePopover };

package/dist/modern/views/static.d.ts

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