@alfalab/core-components 47.1.0 → 47.3.0

package/calendar/modern/desktop/Component.desktop.js

@@ -30,6 +30,7 @@ import 'date-fns/startOfYear';
 import { limitDate } from '../utils.js';
 import { YearsTable } from '../components/years-table/Component.js';
 import { useCalendar } from '../useCalendar.js';
+import { useRange } from '../useRange.js';
 import 'react-transition-group';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
@@ -60,17 +61,26 @@ import 'date-fns/isThisYear';
 import 'react-merge-refs';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
+import '../usePeriod.js';
 
-const styles = {"component":"calendar__component_s6h7h","responsive":"calendar__responsive_s6h7h","period":"calendar__period_s6h7h","monthYear":"calendar__monthYear_s6h7h","container":"calendar__container_s6h7h","customScrollbar":"calendar__customScrollbar_s6h7h","nativeScrollbar":"calendar__nativeScrollbar_s6h7h","sixWeeks":"calendar__sixWeeks_s6h7h"};
+const styles = {"component":"calendar__component_1vshp","responsive":"calendar__responsive_1vshp","period":"calendar__period_1vshp","monthYear":"calendar__monthYear_1vshp","container":"calendar__container_1vshp","customScrollbar":"calendar__customScrollbar_1vshp","nativeScrollbar":"calendar__nativeScrollbar_1vshp","sixWeeks":"calendar__sixWeeks_1vshp"};
 require('./desktop.css');
 
 const { useCustomWebkitScrollbar } = hooks;
-const CalendarDesktop = forwardRef(({ className, headerClassName, contentClassName, defaultView = 'days', selectorView = 'full', value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, holidays, onChange, onMonthChange, onMonthClick, onYearClick, onPeriodClick, dataTestId, hasHeader = true, responsive, dayAddons, shape = 'rounded', showCurrentYearSelector = false, }, ref) => {
+const CalendarDesktop = forwardRef(({ className, headerClassName, contentClassName, defaultView = 'days', selectorView = 'full', mode = 'single', rangeBehavior, value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, holidays, onChange, onMonthChange, onMonthClick, onYearClick, onPeriodClick, dataTestId, hasHeader = true, responsive, dayAddons, shape = 'rounded', showCurrentYearSelector = false, }, ref) => {
     const [view, setView] = useState(defaultView);
     const [scrolled, setScrolled] = useState(false);
     const scrollableNodeRef = useRef(null);
     const firstUpdate = useRef(true);
-    const selected = useMemo(() => (value ? new Date(value) : undefined), [value]);
+    const range = useRange({
+        mode,
+        value,
+        selectedFrom,
+        selectedTo,
+        rangeBehavior,
+        onChange,
+    });
+    const selected = useMemo(() => (range.value ? new Date(range.value) : undefined), [range.value]);
     const defaultMonth = useMemo(() => startOfMonth(selected ||
         limitDate(defaultMonthTimestamp, minDateTimestamp, maxDateTimestamp)), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -89,7 +99,7 @@ const CalendarDesktop = forwardRef(({ className, headerClassName, contentClassNa
         events,
         holidays,
         dayAddons,
-        onChange,
+        onChange: range.onChange,
         onMonthChange,
     });
     const toggleView = (newView) => {
@@ -138,11 +148,11 @@ const CalendarDesktop = forwardRef(({ className, headerClassName, contentClassNa
         setScrolled(false);
     }, [view]);
     useDidUpdateEffect(() => {
-        const newMonth = value && startOfMonth(value);
+        const newMonth = range.value && startOfMonth(range.value);
         if (newMonth && newMonth.getTime() !== activeMonth.getTime()) {
             setMonthByDate(newMonth);
         }
-    }, [value]);
+    }, [range.value]);
     const shouldUseCustomScrollbar = useCustomWebkitScrollbar();
     return (React.createElement("div", { ...getRootProps({ ref }), className: cn('cc-calendar', styles.component, className, {
             [styles.sixWeeks]: weeks.length === 6,
@@ -153,7 +163,7 @@ const CalendarDesktop = forwardRef(({ className, headerClassName, contentClassNa
                 [styles.customScrollbar]: view === 'years' && shouldUseCustomScrollbar,
                 [styles.nativeScrollbar]: view === 'years' && !shouldUseCustomScrollbar,
             }, styles[view], contentClassName), onScroll: handleScroll },
-            view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape, withTransition: selectorView === 'month-only' })),
+            view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: range.selectedFrom, selectedTo: range.selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape, withTransition: selectorView === 'month-only' })),
             view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),
             view === 'years' && (React.createElement(YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, responsive: responsive })))));
 });

package/calendar/modern/desktop/desktop.css

@@ -44,26 +44,26 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_s6h7h {
+} .calendar__component_1vshp {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     outline: none
-} @media (max-width: 374px) { .calendar__component_s6h7h {
+} @media (max-width: 374px) { .calendar__component_1vshp {
         align-items: center;
         width: 100%
 }
-    } .calendar__component_s6h7h.calendar__responsive_s6h7h {
+    } .calendar__component_1vshp.calendar__responsive_1vshp {
         width: 100%
-    } .calendar__component_s6h7h.calendar__responsive_s6h7h .calendar__period_s6h7h {
+    } .calendar__component_1vshp.calendar__responsive_1vshp .calendar__period_1vshp {
             width: 100%;
-        } .calendar__component_s6h7h.calendar__responsive_s6h7h .calendar__monthYear_s6h7h {
+        } .calendar__component_1vshp.calendar__responsive_1vshp .calendar__monthYear_1vshp {
             width: 100%;
-        } .calendar__component_s6h7h.calendar__responsive_s6h7h .calendar__container_s6h7h {
+        } .calendar__component_1vshp.calendar__responsive_1vshp .calendar__container_1vshp {
             width: 100%;
-        } .calendar__container_s6h7h {
+        } .calendar__container_1vshp {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -71,65 +71,65 @@
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} .calendar__container_s6h7h.calendar__customScrollbar_s6h7h {
+} .calendar__container_1vshp.calendar__customScrollbar_1vshp {
         overflow: auto;
         cursor: auto;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar {
+    } .calendar__container_1vshp.calendar__customScrollbar_1vshp::-webkit-scrollbar {
         width: 12px;
         height: 12px;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-track {
+    } .calendar__container_1vshp.calendar__customScrollbar_1vshp::-webkit-scrollbar-track {
         background-color: transparent;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-track-piece {
+    } .calendar__container_1vshp.calendar__customScrollbar_1vshp::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-thumb {
+    } .calendar__container_1vshp.calendar__customScrollbar_1vshp::-webkit-scrollbar-thumb {
         background-color: var(--color-light-neutral-translucent-500);
         border-color: transparent;
         border-style: solid;
         border-width: 4px;
         background-clip: padding-box;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-thumb:vertical {
+    } .calendar__container_1vshp.calendar__customScrollbar_1vshp::-webkit-scrollbar-thumb:vertical {
         border-radius: var(--border-radius-circle) / 6px;
         min-height: 40px;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-thumb:vertical:hover {
+    } .calendar__container_1vshp.calendar__customScrollbar_1vshp::-webkit-scrollbar-thumb:vertical:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-thumb:horizontal {
+    } .calendar__container_1vshp.calendar__customScrollbar_1vshp::-webkit-scrollbar-thumb:horizontal {
         border-radius: 6px / var(--border-radius-circle);
         min-width: 40px;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-thumb:horizontal:hover {
+    } .calendar__container_1vshp.calendar__customScrollbar_1vshp::-webkit-scrollbar-thumb:horizontal:hover {
         border-radius: 7px / var(--border-radius-circle);
         border-width: 3px 4px;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-thumb:active {
+    } .calendar__container_1vshp.calendar__customScrollbar_1vshp::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-text-secondary);
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-resizer {
+    } .calendar__container_1vshp.calendar__customScrollbar_1vshp::-webkit-resizer {
         background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
             no-repeat right bottom;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-button,
-    .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-corner {
+    } .calendar__container_1vshp.calendar__customScrollbar_1vshp::-webkit-scrollbar-button,
+    .calendar__container_1vshp.calendar__customScrollbar_1vshp::-webkit-scrollbar-corner {
         display: none;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h {
+    } .calendar__container_1vshp.calendar__customScrollbar_1vshp {
 
         display: block;
         padding-right: var(--gap-2xs);
         overflow: hidden auto;
         scrollbar-gutter: stable;
-    } .calendar__container_s6h7h.calendar__nativeScrollbar_s6h7h {
+    } .calendar__container_1vshp.calendar__nativeScrollbar_1vshp {
         overflow: hidden auto;
-    } @media (max-width: 374px) { .calendar__container_s6h7h {
+    } @media (max-width: 374px) { .calendar__container_1vshp {
         width: 288px
 }
-    } .calendar__sixWeeks_s6h7h {
+    } .calendar__sixWeeks_1vshp {
     height: 388px;
-} .calendar__period_s6h7h {
+} .calendar__period_1vshp {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__period_s6h7h {
+} @media (max-width: 374px) { .calendar__period_1vshp {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
-    } .calendar__monthYear_s6h7h {
+    } .calendar__monthYear_1vshp {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__monthYear_s6h7h {
+} @media (max-width: 374px) { .calendar__monthYear_1vshp {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto

package/calendar/modern/desktop/index.js

@@ -61,3 +61,5 @@ import '../useCalendar.js';
 import 'react-merge-refs';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
+import '../useRange.js';
+import '../usePeriod.js';

package/calendar/modern/index.js

@@ -68,3 +68,5 @@ import 'date-fns/isThisYear';
 import './useCalendar.js';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
+import './useRange.js';
+import './usePeriod.js';

package/calendar/modern/mobile/index.js

@@ -66,3 +66,5 @@ import 'date-fns/isThisYear';
 import '../useCalendar.js';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
+import '../useRange.js';
+import '../usePeriod.js';

package/calendar/modern/useRange.d.ts

@@ -0,0 +1,10 @@
+import { CalendarDesktopProps } from "./desktop/index";
+type UseRangeProps = Pick<CalendarDesktopProps, 'mode' | 'value' | 'rangeBehavior' | 'onChange' | 'selectedFrom' | 'selectedTo'>;
+declare function useRange({ mode, value, selectedFrom, selectedTo, rangeBehavior, onChange, }: UseRangeProps): {
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+    onChange: ((date?: number | undefined, dateTo?: number | undefined) => void) | undefined;
+    onReset: (() => void) | undefined;
+    value: number | undefined;
+};
+export { useRange };

package/calendar/modern/useRange.js

@@ -0,0 +1,88 @@
+import { useEffect } from 'react';
+import { usePeriod, usePeriodWithReset } from './usePeriod.js';
+import { isRangeValue } from './utils.js';
+import 'date-fns/differenceInDays';
+import '@alfalab/hooks';
+import 'date-fns/addDays';
+import 'date-fns/addMonths';
+import 'date-fns/eachDayOfInterval';
+import 'date-fns/eachMonthOfInterval';
+import 'date-fns/eachYearOfInterval';
+import 'date-fns/endOfDay';
+import 'date-fns/endOfWeek';
+import 'date-fns/endOfYear';
+import 'date-fns/format';
+import 'date-fns/isAfter';
+import 'date-fns/isBefore';
+import 'date-fns/isSameDay';
+import 'date-fns/lastDayOfMonth';
+import 'date-fns/max';
+import 'date-fns/min';
+import 'date-fns/parse';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
+import 'date-fns/startOfWeek';
+import 'date-fns/startOfYear';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import '../../shared/modern';
+
+function useRange({ mode = 'single', value, selectedFrom, selectedTo, rangeBehavior, onChange, }) {
+    const valueFrom = isRangeValue(value) ? value.dateFrom : value;
+    const valueTo = isRangeValue(value) ? value.dateTo : value;
+    const periodHook = rangeBehavior === 'clarification' ? usePeriod : usePeriodWithReset;
+    const period = periodHook({
+        initialSelectedFrom: valueFrom,
+        initialSelectedTo: valueTo,
+    });
+    useEffect(() => {
+        if (mode === 'single') {
+            return;
+        }
+        // Внешние изменения
+        if (valueFrom !== period.selectedFrom) {
+            period.setStart(valueFrom);
+        }
+        if (valueTo !== period.selectedTo) {
+            period.setEnd(valueTo);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode, valueFrom, valueTo]);
+    useEffect(() => {
+        if (mode === 'single') {
+            return;
+        }
+        // Внутренние изменения (действия пользователя)
+        if (valueFrom !== period.selectedFrom || valueTo !== period.selectedTo) {
+            onChange?.(period.selectedFrom, period.selectedTo);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode, period.selectedFrom, period.selectedTo]);
+    const minValue = (() => {
+        if (mode === 'single') {
+            return valueFrom;
+        }
+        const values = [period.selectedFrom, period.selectedTo, valueFrom, valueTo].filter(Boolean);
+        if (!values.length)
+            return undefined;
+        return Math.min(...values);
+    })();
+    if (mode === 'single') {
+        return {
+            selectedFrom,
+            selectedTo,
+            onChange,
+            onReset: onChange ? () => onChange(undefined) : undefined,
+            value: valueFrom,
+        };
+    }
+    return {
+        selectedFrom: period.selectedFrom,
+        selectedTo: period.selectedTo,
+        onChange: period.updatePeriod,
+        onReset: period.resetPeriod,
+        value: minValue,
+    };
+}
+
+export { useRange };

package/calendar/modern/utils.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { DateShift, Day, DayAddons, Month, SpecialDays, SpecialDaysAddon } from "./typings";
+import { CalendarProps } from "./index";
 declare const DAYS_IN_WEEK = 7;
 declare const MONTHS_IN_YEAR = 12;
 declare const SUNDAY_INDEX = 6;
@@ -96,4 +97,8 @@ declare function getCalendarMobileTestIds(dataTestId: string): {
     btnNextDate: string;
     btnPreviousDate: string;
 };
-export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString, getCalendarMobileTestIds };
+declare function isRangeValue(value: CalendarProps['value']): value is {
+    dateFrom?: number | undefined;
+    dateTo?: number | undefined;
+};
+export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString, getCalendarMobileTestIds, isRangeValue };

package/calendar/modern/utils.js

@@ -215,5 +215,8 @@ function getCalendarMobileTestIds(dataTestId) {
         btnPreviousDate: getDataTestId(dataTestId, 'slider-btn-previous-day'),
     };
 }
+function isRangeValue(value) {
+    return Boolean(value) && typeof value === 'object';
+}
 
-export { DATE_FORMAT, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, NATIVE_DATE_FORMAT, SUNDAY_INDEX, WEEKDAYS, addonArrayToHashTable, buildDay, buildMonth, dateArrayToHashTable, dateInLimits, formatDate, generateMonths, generateWeeks, generateYears, getCalendarMobileTestIds, getSelectionRange, limitDate, modifyDateByShift, monthName, parseDateString, russianWeekDay, simulateTab };
+export { DATE_FORMAT, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, NATIVE_DATE_FORMAT, SUNDAY_INDEX, WEEKDAYS, addonArrayToHashTable, buildDay, buildMonth, dateArrayToHashTable, dateInLimits, formatDate, generateMonths, generateWeeks, generateYears, getCalendarMobileTestIds, getSelectionRange, isRangeValue, limitDate, modifyDateByShift, monthName, parseDateString, russianWeekDay, simulateTab };

package/calendar/useRange.d.ts

@@ -0,0 +1,10 @@
+import { CalendarDesktopProps } from "./desktop/index";
+type UseRangeProps = Pick<CalendarDesktopProps, 'mode' | 'value' | 'rangeBehavior' | 'onChange' | 'selectedFrom' | 'selectedTo'>;
+declare function useRange({ mode, value, selectedFrom, selectedTo, rangeBehavior, onChange, }: UseRangeProps): {
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+    onChange: ((date?: number | undefined, dateTo?: number | undefined) => void) | undefined;
+    onReset: (() => void) | undefined;
+    value: number | undefined;
+};
+export { useRange };

package/calendar/useRange.js

@@ -0,0 +1,66 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var usePeriod = require('./usePeriod.js');
+var utils = require('./utils.js');
+
+function useRange(_a) {
+    var _b = _a.mode, mode = _b === void 0 ? 'single' : _b, value = _a.value, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeBehavior = _a.rangeBehavior, onChange = _a.onChange;
+    var valueFrom = utils.isRangeValue(value) ? value.dateFrom : value;
+    var valueTo = utils.isRangeValue(value) ? value.dateTo : value;
+    var periodHook = rangeBehavior === 'clarification' ? usePeriod.usePeriod : usePeriod.usePeriodWithReset;
+    var period = periodHook({
+        initialSelectedFrom: valueFrom,
+        initialSelectedTo: valueTo,
+    });
+    React.useEffect(function () {
+        if (mode === 'single') {
+            return;
+        }
+        // Внешние изменения
+        if (valueFrom !== period.selectedFrom) {
+            period.setStart(valueFrom);
+        }
+        if (valueTo !== period.selectedTo) {
+            period.setEnd(valueTo);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode, valueFrom, valueTo]);
+    React.useEffect(function () {
+        if (mode === 'single') {
+            return;
+        }
+        // Внутренние изменения (действия пользователя)
+        if (valueFrom !== period.selectedFrom || valueTo !== period.selectedTo) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(period.selectedFrom, period.selectedTo);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode, period.selectedFrom, period.selectedTo]);
+    var minValue = (function () {
+        if (mode === 'single') {
+            return valueFrom;
+        }
+        var values = [period.selectedFrom, period.selectedTo, valueFrom, valueTo].filter(Boolean);
+        if (!values.length)
+            return undefined;
+        return Math.min.apply(Math, values);
+    })();
+    if (mode === 'single') {
+        return {
+            selectedFrom: selectedFrom,
+            selectedTo: selectedTo,
+            onChange: onChange,
+            onReset: onChange ? function () { return onChange(undefined); } : undefined,
+            value: valueFrom,
+        };
+    }
+    return {
+        selectedFrom: period.selectedFrom,
+        selectedTo: period.selectedTo,
+        onChange: period.updatePeriod,
+        onReset: period.resetPeriod,
+        value: minValue,
+    };
+}
+
+exports.useRange = useRange;

package/calendar/utils.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { DateShift, Day, DayAddons, Month, SpecialDays, SpecialDaysAddon } from "./typings";
+import { CalendarProps } from "./index";
 declare const DAYS_IN_WEEK = 7;
 declare const MONTHS_IN_YEAR = 12;
 declare const SUNDAY_INDEX = 6;
@@ -96,4 +97,8 @@ declare function getCalendarMobileTestIds(dataTestId: string): {
     btnNextDate: string;
     btnPreviousDate: string;
 };
-export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString, getCalendarMobileTestIds };
+declare function isRangeValue(value: CalendarProps['value']): value is {
+    dateFrom?: number | undefined;
+    dateTo?: number | undefined;
+};
+export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString, getCalendarMobileTestIds, isRangeValue };

package/calendar/utils.js

@@ -251,6 +251,9 @@ function getCalendarMobileTestIds(dataTestId) {
         btnPreviousDate: coreComponentsShared.getDataTestId(dataTestId, 'slider-btn-previous-day'),
     };
 }
+function isRangeValue(value) {
+    return Boolean(value) && typeof value === 'object';
+}
 
 exports.DATE_FORMAT = DATE_FORMAT;
 exports.DAYS_IN_WEEK = DAYS_IN_WEEK;
@@ -270,6 +273,7 @@ exports.generateWeeks = generateWeeks;
 exports.generateYears = generateYears;
 exports.getCalendarMobileTestIds = getCalendarMobileTestIds;
 exports.getSelectionRange = getSelectionRange;
+exports.isRangeValue = isRangeValue;
 exports.limitDate = limitDate;
 exports.modifyDateByShift = modifyDateByShift;
 exports.monthName = monthName;

package/calendar-input/components/calendar-input/Component.d.ts

@@ -145,7 +145,7 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
         onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, globalThis.MouseEvent>) => void) | undefined;
         yearsAmount?: number | undefined;
         scrollableContainer?: HTMLElement | undefined;
-    } & Omit<CalendarDesktopProps, ("headerClassName" | "contentClassName") | ("className" | "dataTestId" | "rangeComplete" | "hasHeader" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "rangeComplete" | "hasHeader" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView"> & Record<string, unknown>) | undefined;
+    } & Omit<CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "onMonthChange" | "defaultView" | "selectorView" | "rangeComplete" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "onMonthChange" | "defaultView" | "selectorView" | "rangeComplete" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector"> & Record<string, unknown>) | undefined;
     /**
      * Значение инпута (используется и для календаря)
      */

package/calendar-input/components/calendar-input/Component.js

@@ -16,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"calendar-input__component_14fc6","block":"calendar-input__block_14fc6","calendarContainer":"calendar-input__calendarContainer_14fc6","calendarResponsive":"calendar-input__calendarResponsive_14fc6","calendarIcon":"calendar-input__calendarIcon_14fc6","nativeInput":"calendar-input__nativeInput_14fc6"};
+var styles = {"component":"calendar-input__component_1wwhh","block":"calendar-input__block_1wwhh","calendarContainer":"calendar-input__calendarContainer_1wwhh","calendarResponsive":"calendar-input__calendarResponsive_1wwhh","calendarIcon":"calendar-input__calendarIcon_1wwhh","nativeInput":"calendar-input__nativeInput_1wwhh"};
 require('./index.css');
 
 var CalendarInput = React.forwardRef(function (_a, ref) {

package/calendar-input/components/calendar-input/index.css

@@ -43,31 +43,31 @@
 } :root {
     --calendar-input-icon-color: var(--color-light-neutral-translucent-700);
     --calendar-input-popover-border-radius: var(--border-radius-m);
-} .calendar-input__component_14fc6 {
+} .calendar-input__component_1wwhh {
     display: inline-block;
     outline: none;
     position: relative;
-} .calendar-input__block_14fc6 {
+} .calendar-input__block_1wwhh {
     width: 100%;
-} .calendar-input__calendarContainer_14fc6 {
+} .calendar-input__calendarContainer_1wwhh {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius);
     border: 1px solid var(--color-light-neutral-300)
-} @media (max-width: 374px) { .calendar-input__calendarContainer_14fc6 {
+} @media (max-width: 374px) { .calendar-input__calendarContainer_1wwhh {
         width: 100%;
         min-width: 288px
 }
-    } .calendar-input__calendarResponsive_14fc6 {
+    } .calendar-input__calendarResponsive_1wwhh {
     width: var(--calendar-width);
-} .calendar-input__calendarIcon_14fc6 {
+} .calendar-input__calendarIcon_1wwhh {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
-} .calendar-input__calendarIcon_14fc6:not(:only-child) {
+} .calendar-input__calendarIcon_1wwhh:not(:only-child) {
         margin-right: var(--gap-2xs);
-    } .calendar-input__nativeInput_14fc6 {
+    } .calendar-input__nativeInput_1wwhh {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -76,8 +76,8 @@
     height: 100%;
     appearance: none;
     z-index: 1
-} .calendar-input__nativeInput_14fc6::-webkit-calendar-picker-indicator {
+} .calendar-input__nativeInput_1wwhh::-webkit-calendar-picker-indicator {
         display: none;
-    } .calendar-input__nativeInput_14fc6::-webkit-inner-spin-button {
+    } .calendar-input__nativeInput_1wwhh::-webkit-inner-spin-button {
         display: none;
     }

package/calendar-input/cssm/components/calendar-input/Component.d.ts

@@ -145,7 +145,7 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
         onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, globalThis.MouseEvent>) => void) | undefined;
         yearsAmount?: number | undefined;
         scrollableContainer?: HTMLElement | undefined;
-    } & Omit<CalendarDesktopProps, ("headerClassName" | "contentClassName") | ("className" | "dataTestId" | "rangeComplete" | "hasHeader" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "rangeComplete" | "hasHeader" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView"> & Record<string, unknown>) | undefined;
+    } & Omit<CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "onMonthChange" | "defaultView" | "selectorView" | "rangeComplete" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "onMonthChange" | "defaultView" | "selectorView" | "rangeComplete" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector"> & Record<string, unknown>) | undefined;
     /**
      * Значение инпута (используется и для календаря)
      */

package/calendar-input/esm/components/calendar-input/Component.d.ts

@@ -145,7 +145,7 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
         onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, globalThis.MouseEvent>) => void) | undefined;
         yearsAmount?: number | undefined;
         scrollableContainer?: HTMLElement | undefined;
-    } & Omit<CalendarDesktopProps, ("headerClassName" | "contentClassName") | ("className" | "dataTestId" | "rangeComplete" | "hasHeader" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "rangeComplete" | "hasHeader" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView"> & Record<string, unknown>) | undefined;
+    } & Omit<CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "onMonthChange" | "defaultView" | "selectorView" | "rangeComplete" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "onMonthChange" | "defaultView" | "selectorView" | "rangeComplete" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector"> & Record<string, unknown>) | undefined;
     /**
      * Значение инпута (используется и для календаря)
      */

package/calendar-input/esm/components/calendar-input/Component.js

@@ -11,7 +11,7 @@ import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
 
-var styles = {"component":"calendar-input__component_14fc6","block":"calendar-input__block_14fc6","calendarContainer":"calendar-input__calendarContainer_14fc6","calendarResponsive":"calendar-input__calendarResponsive_14fc6","calendarIcon":"calendar-input__calendarIcon_14fc6","nativeInput":"calendar-input__nativeInput_14fc6"};
+var styles = {"component":"calendar-input__component_1wwhh","block":"calendar-input__block_1wwhh","calendarContainer":"calendar-input__calendarContainer_1wwhh","calendarResponsive":"calendar-input__calendarResponsive_1wwhh","calendarIcon":"calendar-input__calendarIcon_1wwhh","nativeInput":"calendar-input__nativeInput_1wwhh"};
 require('./index.css');
 
 var CalendarInput = forwardRef(function (_a, ref) {

package/calendar-input/esm/components/calendar-input/index.css

@@ -43,31 +43,31 @@
 } :root {
     --calendar-input-icon-color: var(--color-light-neutral-translucent-700);
     --calendar-input-popover-border-radius: var(--border-radius-m);
-} .calendar-input__component_14fc6 {
+} .calendar-input__component_1wwhh {
     display: inline-block;
     outline: none;
     position: relative;
-} .calendar-input__block_14fc6 {
+} .calendar-input__block_1wwhh {
     width: 100%;
-} .calendar-input__calendarContainer_14fc6 {
+} .calendar-input__calendarContainer_1wwhh {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius);
     border: 1px solid var(--color-light-neutral-300)
-} @media (max-width: 374px) { .calendar-input__calendarContainer_14fc6 {
+} @media (max-width: 374px) { .calendar-input__calendarContainer_1wwhh {
         width: 100%;
         min-width: 288px
 }
-    } .calendar-input__calendarResponsive_14fc6 {
+    } .calendar-input__calendarResponsive_1wwhh {
     width: var(--calendar-width);
-} .calendar-input__calendarIcon_14fc6 {
+} .calendar-input__calendarIcon_1wwhh {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
-} .calendar-input__calendarIcon_14fc6:not(:only-child) {
+} .calendar-input__calendarIcon_1wwhh:not(:only-child) {
         margin-right: var(--gap-2xs);
-    } .calendar-input__nativeInput_14fc6 {
+    } .calendar-input__nativeInput_1wwhh {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -76,8 +76,8 @@
     height: 100%;
     appearance: none;
     z-index: 1
-} .calendar-input__nativeInput_14fc6::-webkit-calendar-picker-indicator {
+} .calendar-input__nativeInput_1wwhh::-webkit-calendar-picker-indicator {
         display: none;
-    } .calendar-input__nativeInput_14fc6::-webkit-inner-spin-button {
+    } .calendar-input__nativeInput_1wwhh::-webkit-inner-spin-button {
         display: none;
     }