@alfalab/core-components 47.13.0 → 47.14.0-beta.1

package/calendar/moderncssm/index.js

@@ -0,0 +1,84 @@
+export { CalendarResponsive as Calendar } from './Component.responsive.js';
+import 'react';
+import '../../mq/moderncssm';
+import './components/calendar-mobile/Component.js';
+import 'react-merge-refs';
+import 'react-virtuoso';
+import '@juggle/resize-observer';
+import 'classnames';
+import 'date-fns/endOfDay';
+import 'date-fns/isAfter';
+import 'date-fns/isSameDay';
+import 'date-fns/isSameMonth';
+import 'date-fns/isThisMonth';
+import 'date-fns/lastDayOfMonth';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
+import '../../button/moderncssm/mobile';
+import '../../modal/moderncssm/mobile';
+import '../../shared/moderncssm';
+import '../../typography/moderncssm';
+import './desktop/Component.desktop.js';
+import '@alfalab/hooks';
+import './components/days-table/Component.js';
+import 'react-transition-group';
+import 'date-fns/isEqual';
+import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isToday';
+import 'date-fns/isWithinInterval';
+import '../../button/moderncssm/desktop';
+import './utils.js';
+import 'date-fns/addDays';
+import 'date-fns/addMonths';
+import 'date-fns/eachDayOfInterval';
+import 'date-fns/eachMonthOfInterval';
+import 'date-fns/eachYearOfInterval';
+import 'date-fns/endOfWeek';
+import 'date-fns/endOfYear';
+import 'date-fns/format';
+import 'date-fns/isBefore';
+import 'date-fns/max';
+import 'date-fns/min';
+import 'date-fns/parse';
+import 'date-fns/startOfWeek';
+import 'date-fns/startOfYear';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import './components/days-table/index.module.css';
+import './components/header/Component.js';
+import './components/header/index.module.css';
+import './components/month-year-header/Component.js';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import './components/select-button/Component.js';
+import './components/select-button/index.module.css';
+import './components/month-year-header/index.module.css';
+import './components/months-table/Component.js';
+import './components/months-table/index.module.css';
+import './components/period-slider/Component.js';
+import '../../icon-button/moderncssm';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
+import './components/period-slider/utils.js';
+import 'date-fns/addQuarters';
+import 'date-fns/addWeeks';
+import 'date-fns/addYears';
+import 'date-fns/differenceInDays';
+import 'date-fns/endOfMonth';
+import 'date-fns/endOfQuarter';
+import 'date-fns/getQuarter';
+import 'date-fns/getYear';
+import 'date-fns/isYesterday';
+import 'date-fns/startOfQuarter';
+import './components/period-slider/index.module.css';
+import './components/years-table/Component.js';
+import 'date-fns/isSameYear';
+import 'date-fns/isThisYear';
+import './components/years-table/index.module.css';
+import './useCalendar.js';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
+import './useRange.js';
+import './usePeriod.js';
+import './desktop/desktop.module.css';
+import './components/calendar-mobile/backdrop-transitions.module.css';
+import './components/calendar-mobile/index.module.css';
+import './components/calendar-mobile/transitions.module.css';

package/calendar/moderncssm/mobile/index.d.ts

@@ -0,0 +1 @@
+export * from "../components/calendar-mobile/index";

package/calendar/moderncssm/mobile/index.js

@@ -0,0 +1,82 @@
+export { CalendarMobile, CalendarMonthOnlyView, CalendarMonthOnlyViewHeader } from '../components/calendar-mobile/Component.js';
+import 'react';
+import 'react-merge-refs';
+import 'react-virtuoso';
+import '@juggle/resize-observer';
+import 'classnames';
+import 'date-fns/endOfDay';
+import 'date-fns/isAfter';
+import 'date-fns/isSameDay';
+import 'date-fns/isSameMonth';
+import 'date-fns/isThisMonth';
+import 'date-fns/lastDayOfMonth';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
+import '../../../button/moderncssm/mobile';
+import '../../../modal/moderncssm/mobile';
+import '../../../shared/moderncssm';
+import '../../../typography/moderncssm';
+import '../desktop/Component.desktop.js';
+import '@alfalab/hooks';
+import '../components/days-table/Component.js';
+import 'react-transition-group';
+import 'date-fns/isEqual';
+import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isToday';
+import 'date-fns/isWithinInterval';
+import '../../../button/moderncssm/desktop';
+import '../utils.js';
+import 'date-fns/addDays';
+import 'date-fns/addMonths';
+import 'date-fns/eachDayOfInterval';
+import 'date-fns/eachMonthOfInterval';
+import 'date-fns/eachYearOfInterval';
+import 'date-fns/endOfWeek';
+import 'date-fns/endOfYear';
+import 'date-fns/format';
+import 'date-fns/isBefore';
+import 'date-fns/max';
+import 'date-fns/min';
+import 'date-fns/parse';
+import 'date-fns/startOfWeek';
+import 'date-fns/startOfYear';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import '../components/days-table/index.module.css';
+import '../components/header/Component.js';
+import '../components/header/index.module.css';
+import '../components/month-year-header/Component.js';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '../components/select-button/Component.js';
+import '../components/select-button/index.module.css';
+import '../components/month-year-header/index.module.css';
+import '../components/months-table/Component.js';
+import '../components/months-table/index.module.css';
+import '../components/period-slider/Component.js';
+import '../../../icon-button/moderncssm';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
+import '../components/period-slider/utils.js';
+import 'date-fns/addQuarters';
+import 'date-fns/addWeeks';
+import 'date-fns/addYears';
+import 'date-fns/differenceInDays';
+import 'date-fns/endOfMonth';
+import 'date-fns/endOfQuarter';
+import 'date-fns/getQuarter';
+import 'date-fns/getYear';
+import 'date-fns/isYesterday';
+import 'date-fns/startOfQuarter';
+import '../components/period-slider/index.module.css';
+import '../components/years-table/Component.js';
+import 'date-fns/isSameYear';
+import 'date-fns/isThisYear';
+import '../components/years-table/index.module.css';
+import '../useCalendar.js';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
+import '../useRange.js';
+import '../usePeriod.js';
+import '../desktop/desktop.module.css';
+import '../components/calendar-mobile/backdrop-transitions.module.css';
+import '../components/calendar-mobile/index.module.css';
+import '../components/calendar-mobile/transitions.module.css';

package/calendar/moderncssm/shared/index.d.ts

@@ -0,0 +1,4 @@
+export { russianWeekDay, dateInLimits, limitDate, monthName, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS, DATE_FORMAT, getCalendarMobileTestIds } from "../utils";
+export { usePeriod, usePeriodWithReset } from "../usePeriod";
+export { useCalendar } from "../useCalendar";
+export * from "../components/period-slider/index";

package/calendar/moderncssm/shared/index.js

@@ -0,0 +1,51 @@
+export { DATE_FORMAT, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS, dateInLimits, getCalendarMobileTestIds, limitDate, monthName, russianWeekDay } from '../utils.js';
+export { usePeriod, usePeriodWithReset } from '../usePeriod.js';
+export { useCalendar } from '../useCalendar.js';
+export { PeriodSlider } from '../components/period-slider/Component.js';
+export { shiftValues } from '../components/period-slider/utils.js';
+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/moderncssm';
+import 'react';
+import 'date-fns/differenceInDays';
+import '@alfalab/hooks';
+import 'react-merge-refs';
+import 'date-fns/addYears';
+import 'date-fns/isSameMonth';
+import 'date-fns/isSameYear';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
+import 'classnames';
+import '../../../button/moderncssm/desktop';
+import '../../../icon-button/moderncssm';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
+import '../components/period-slider/index.module.css';
+import 'date-fns/addQuarters';
+import 'date-fns/addWeeks';
+import 'date-fns/endOfMonth';
+import 'date-fns/endOfQuarter';
+import 'date-fns/getQuarter';
+import 'date-fns/getYear';
+import 'date-fns/isToday';
+import 'date-fns/isYesterday';
+import 'date-fns/startOfQuarter';

package/calendar/moderncssm/typings.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+type SpecialDays = Record<number, boolean>;
+type DayAddons = {
+    date: Date | number;
+    addon: ReactNode;
+};
+type SpecialDaysAddon = Record<number, ReactNode>;
+type Day = {
+    date: Date;
+    disabled?: boolean;
+    event?: boolean;
+    selected?: boolean;
+    holiday?: boolean;
+    dayAddon?: ReactNode;
+};
+type Month = {
+    date: Date;
+    disabled?: boolean;
+};
+type DateShift = 'prev' | 'prevWeek' | 'prevMonth' | 'startOfWeek' | 'next' | 'nextWeek' | 'nextMonth' | 'endOfWeek';
+type View = 'years' | 'months' | 'days';
+type SelectorView = 'month-only' | 'full';
+export { SpecialDays, DayAddons, SpecialDaysAddon, Day, Month, DateShift, View, SelectorView };

package/calendar/moderncssm/typings.js

@@ -0,0 +1 @@
+

package/calendar/moderncssm/useCalendar.d.ts

@@ -0,0 +1,97 @@
+/// <reference types="react" />
+import { KeyboardEvent, MouseEvent, Ref } from 'react';
+import { Day, DayAddons, Month, View } from "./typings";
+type UseCalendarProps = {
+    /**
+     * Активный вид (выбор дней, месяцев, лет)
+     */
+    view?: View;
+    /**
+     * Выбранный месяц (controlled)
+     */
+    month?: Date;
+    /**
+     * Начальный месяц
+     */
+    defaultMonth: Date;
+    /**
+     * Минимальная дата, доступная для выбора
+     */
+    minDate?: Date;
+    /**
+     * Максимальная дата, доступная для выбора
+     */
+    maxDate?: Date;
+    /**
+     * Выбранная дата
+     */
+    selected?: Date;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список отключенных для выбора дней
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Список выходных дней
+     */
+    holidays?: Array<Date | number>;
+    /**
+     * Обработчик изменения месяца (или года)
+     */
+    onMonthChange?: (month: number) => void;
+    /**
+     * Обработчик выбора даты
+     */
+    onChange?: (date: number) => void;
+    /**
+     * Дополнительный контент под числом
+     */
+    dayAddons?: DayAddons[];
+};
+declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, }: UseCalendarProps): {
+    activeMonth: Date;
+    weeks: Day[][];
+    months: Month[];
+    years: Date[];
+    canSetPrevMonth: boolean;
+    canSetNextMonth: boolean;
+    highlighted: number | Date | undefined;
+    setPrevMonth: () => void;
+    setNextMonth: () => void;
+    setMonthByDate: (newMonth: Date) => void;
+    getDayProps: (day: Day) => {
+        'data-date': number;
+        'aria-selected': boolean | undefined;
+        ref: (node: HTMLTableDataCellElement) => void;
+        tabIndex: number;
+        onMouseEnter: (event: MouseEvent<HTMLTableDataCellElement>) => void;
+        onMouseLeave: () => void;
+        onClick: (event: MouseEvent<HTMLTableDataCellElement>) => void;
+    };
+    getMonthProps: (currMonth: Month) => {
+        'data-date': number;
+        'aria-selected': boolean;
+        ref: (node: HTMLButtonElement) => void;
+        tabIndex: number;
+        disabled: boolean | undefined;
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    };
+    getYearProps: (year: Date) => {
+        'data-date': number;
+        'aria-selected': boolean;
+        ref: (node: HTMLButtonElement) => void;
+        tabIndex: number;
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    };
+    getRootProps: ({ ref }: {
+        ref?: Ref<HTMLDivElement> | undefined;
+    }) => {
+        onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+        ref: (instance: HTMLDivElement | null) => void;
+        tabIndex: number;
+    };
+};
+export { UseCalendarProps, useCalendar };

package/calendar/moderncssm/useCalendar.js

@@ -0,0 +1,295 @@
+import { useState, useRef, useMemo, useCallback } from 'react';
+import mergeRefs from 'react-merge-refs';
+import addMonths from 'date-fns/addMonths';
+import addYears from 'date-fns/addYears';
+import isSameDay from 'date-fns/isSameDay';
+import isSameMonth from 'date-fns/isSameMonth';
+import isSameYear from 'date-fns/isSameYear';
+import setYear from 'date-fns/setYear';
+import startOfMonth from 'date-fns/startOfMonth';
+import subYears from 'date-fns/subYears';
+import { dateArrayToHashTable, addonArrayToHashTable, generateWeeks, generateMonths, generateYears, limitDate, simulateTab, modifyDateByShift, MONTHS_IN_YEAR } from './utils.js';
+import 'date-fns/addDays';
+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/lastDayOfMonth';
+import 'date-fns/max';
+import 'date-fns/min';
+import 'date-fns/parse';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfWeek';
+import 'date-fns/startOfYear';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import '../../shared/moderncssm';
+
+function useCalendar({ defaultMonth, month, minDate, view = 'days', maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, }) {
+    const [monthState, setMonthState] = useState(defaultMonth);
+    const [highlighted, setHighlighted] = useState();
+    const uncontrolled = month === undefined;
+    const activeMonth = uncontrolled ? monthState : month;
+    const dateRefs = useRef([]);
+    const rootRef = useRef(null);
+    const minMonth = useMemo(() => minDate && startOfMonth(minDate), [minDate]);
+    const maxMonth = useMemo(() => maxDate && startOfMonth(maxDate), [maxDate]);
+    const canSetPrevMonth = minMonth ? activeMonth > minMonth : true;
+    const canSetNextMonth = maxMonth ? activeMonth < maxMonth : true;
+    const eventsMap = useMemo(() => dateArrayToHashTable(events || []), [events]);
+    const offDaysMap = useMemo(() => dateArrayToHashTable(offDays || []), [offDays]);
+    const holidaysMap = useMemo(() => dateArrayToHashTable(holidays || []), [holidays]);
+    const dayAddonsMap = useMemo(() => addonArrayToHashTable(dayAddons || []), [dayAddons]);
+    const weeks = useMemo(() => generateWeeks(activeMonth, {
+        minDate,
+        maxDate,
+        selected,
+        eventsMap,
+        offDaysMap,
+        holidaysMap,
+        dayAddonsMap,
+    }), [maxDate, minDate, selected, dayAddonsMap, activeMonth, eventsMap, offDaysMap, holidaysMap]);
+    const months = useMemo(() => generateMonths(activeMonth, { minMonth, maxMonth }), [minMonth, maxMonth, activeMonth]);
+    const years = useMemo(() => generateYears(minDate || subYears(new Date(), 100), maxDate || addYears(new Date(), 1)), [minDate, maxDate]);
+    const setMonth = useCallback((newMonth) => {
+        if (uncontrolled) {
+            setMonthState(newMonth);
+        }
+        if (onMonthChange) {
+            onMonthChange(newMonth.getTime());
+        }
+    }, [onMonthChange, uncontrolled]);
+    const setMonthByStep = useCallback((step) => {
+        setMonth(limitDate(addMonths(activeMonth, step), minMonth, maxMonth));
+    }, [setMonth, activeMonth, minMonth, maxMonth]);
+    const setMonthByDate = useCallback((newMonth) => {
+        setMonth(limitDate(newMonth, minMonth, maxMonth));
+    }, [maxMonth, minMonth, setMonth]);
+    const setNextMonth = useCallback(() => {
+        setMonthByStep(1);
+    }, [setMonthByStep]);
+    const setPrevMonth = useCallback(() => {
+        setMonthByStep(-1);
+    }, [setMonthByStep]);
+    const getFocusedDate = useCallback(() => dateRefs.current.find((node) => document.activeElement === node), []);
+    const getFocusableDate = useCallback(() => dateRefs.current.find((node) => node && node.tabIndex === 0), []);
+    const focusDate = useCallback((node) => {
+        if (node) {
+            simulateTab(node);
+            node.focus();
+        }
+    }, []);
+    const focusFirstAvailableDate = useCallback(() => focusDate(getFocusableDate()), [focusDate, getFocusableDate]);
+    const focusDay = useCallback((shift) => {
+        const focusedNode = getFocusedDate();
+        if (focusedNode && focusedNode.dataset.date) {
+            const focusedDate = new Date(+focusedNode.dataset.date);
+            const newDate = modifyDateByShift(shift, focusedDate, minDate, maxDate, offDaysMap);
+            let monthChanged = false;
+            if (newDate < focusedDate && newDate.getMonth() !== focusedDate.getMonth()) {
+                setPrevMonth();
+                monthChanged = true;
+            }
+            if (newDate > focusedDate && newDate.getMonth() !== focusedDate.getMonth()) {
+                setNextMonth();
+                monthChanged = true;
+            }
+            const effect = () => focusDate(dateRefs.current[newDate.getDate() - 1]);
+            if (monthChanged) {
+                setTimeout(effect, 0);
+            }
+            else {
+                effect();
+            }
+        }
+        else {
+            focusFirstAvailableDate();
+        }
+    }, [
+        focusDate,
+        focusFirstAvailableDate,
+        getFocusedDate,
+        maxDate,
+        minDate,
+        offDaysMap,
+        setNextMonth,
+        setPrevMonth,
+    ]);
+    const focusMonth = useCallback((offset) => {
+        const focusedNode = getFocusedDate();
+        if (focusedNode && focusedNode.dataset.date) {
+            const focusedMonth = new Date(+focusedNode.dataset.date).getMonth();
+            const newFocusedMonth = focusedMonth + offset;
+            if (newFocusedMonth >= 0 && newFocusedMonth < MONTHS_IN_YEAR) {
+                focusDate(dateRefs.current[newFocusedMonth]);
+            }
+        }
+        else {
+            focusFirstAvailableDate();
+        }
+    }, [focusDate, focusFirstAvailableDate, getFocusedDate]);
+    const focusYear = useCallback((offset) => {
+        const focusedNode = getFocusedDate();
+        if (focusedNode && focusedNode.dataset.date) {
+            const focusedYear = new Date(+focusedNode.dataset.date).getFullYear();
+            const newFocusedYear = focusedYear + offset;
+            const currentYear = new Date().getFullYear();
+            if (newFocusedYear <= currentYear && newFocusedYear > currentYear - years.length) {
+                focusDate(dateRefs.current[newFocusedYear]);
+            }
+        }
+        else {
+            focusFirstAvailableDate();
+        }
+    }, [focusDate, focusFirstAvailableDate, getFocusedDate, years.length]);
+    const handleMonthClick = useCallback((event) => {
+        const { date } = event.currentTarget.dataset;
+        if (date) {
+            setMonthByDate(new Date(+date));
+        }
+        /**
+         * Возвращаем фокус внутрь компонента после переключения
+         * Но только если фокус и раньше был внутри
+         */
+        if (rootRef.current && rootRef.current.contains(document.activeElement)) {
+            rootRef.current.focus();
+        }
+    }, [setMonthByDate]);
+    const handleYearClick = useCallback((event) => {
+        const { date } = event.currentTarget.dataset;
+        if (date) {
+            setMonthByDate(setYear(activeMonth, new Date(+date).getFullYear()));
+        }
+        if (rootRef.current && rootRef.current.contains(document.activeElement)) {
+            rootRef.current.focus();
+        }
+    }, [activeMonth, setMonthByDate]);
+    const handleDateRef = useCallback((node, index) => {
+        dateRefs.current[index] = node;
+    }, []);
+    const handleDayMouseEnter = useCallback((event) => {
+        const { date } = event.currentTarget.dataset;
+        setHighlighted(date ? +date : undefined);
+    }, []);
+    const handleDayMouseLeave = useCallback(() => {
+        setHighlighted(undefined);
+    }, []);
+    const handleDayClick = (event) => {
+        const { date } = event.currentTarget.dataset;
+        if (date && onChange) {
+            onChange(+date);
+        }
+        handleDayMouseLeave();
+    };
+    const daysControls = useMemo(() => ({
+        ArrowLeft: () => focusDay('prev'),
+        ArrowRight: () => focusDay('next'),
+        ArrowUp: () => focusDay('prevWeek'),
+        ArrowDown: () => focusDay('nextWeek'),
+        End: () => focusDay('endOfWeek'),
+        Home: () => focusDay('startOfWeek'),
+        PageUp: () => focusDay('prevMonth'),
+        PageDown: () => focusDay('nextMonth'),
+    }), [focusDay]);
+    const monthControls = useMemo(() => ({
+        ArrowLeft: () => focusMonth(-1),
+        ArrowRight: () => focusMonth(1),
+        ArrowUp: () => focusMonth(-3),
+        ArrowDown: () => focusMonth(3),
+    }), [focusMonth]);
+    const yearsControls = useMemo(() => ({
+        ArrowLeft: () => focusYear(1),
+        ArrowRight: () => focusYear(-1),
+        ArrowUp: () => focusYear(3),
+        ArrowDown: () => focusYear(-3),
+    }), [focusYear]);
+    const controlsByView = {
+        days: daysControls,
+        months: monthControls,
+        years: yearsControls,
+    };
+    const handleKeyDown = (event) => {
+        const controls = controlsByView[view];
+        if (event.key in controls) {
+            controls[event.key]();
+            event.preventDefault();
+        }
+    };
+    let focusableDayIsSet = false;
+    const getDayProps = (day) => {
+        const daySelected = selected && isSameDay(selected, day.date);
+        let canFocus = daySelected;
+        // Если день не выбран — фокус должен начинаться с первого доступного дня месяца
+        if ((!selected || !isSameMonth(selected, activeMonth)) &&
+            !focusableDayIsSet &&
+            !day.disabled) {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            focusableDayIsSet = true;
+            canFocus = true;
+        }
+        return {
+            'data-date': day.date.getTime(),
+            'aria-selected': daySelected,
+            ref: (node) => {
+                handleDateRef(node, day.date.getDate() - 1);
+            },
+            tabIndex: canFocus ? 0 : -1,
+            onMouseEnter: handleDayMouseEnter,
+            onMouseLeave: handleDayMouseLeave,
+            onClick: handleDayClick,
+        };
+    };
+    const getMonthProps = (currMonth) => {
+        const monthselected = isSameMonth(activeMonth, currMonth.date);
+        return {
+            'data-date': currMonth.date.getTime(),
+            'aria-selected': monthselected,
+            ref: (node) => {
+                handleDateRef(node, currMonth.date.getMonth());
+            },
+            tabIndex: monthselected ? 0 : -1,
+            disabled: currMonth.disabled,
+            onClick: handleMonthClick,
+        };
+    };
+    const getYearProps = (year) => {
+        const yearSelected = isSameYear(activeMonth, year);
+        return {
+            'data-date': year.getTime(),
+            'aria-selected': yearSelected,
+            ref: (node) => {
+                handleDateRef(node, year.getFullYear());
+            },
+            tabIndex: yearSelected ? 0 : -1,
+            onClick: handleYearClick,
+        };
+    };
+    const getRootProps = ({ ref = null }) => ({
+        onKeyDown: handleKeyDown,
+        ref: mergeRefs([ref, rootRef]),
+        tabIndex: -1,
+    });
+    return {
+        activeMonth,
+        weeks,
+        months,
+        years,
+        canSetPrevMonth,
+        canSetNextMonth,
+        highlighted,
+        setPrevMonth,
+        setNextMonth,
+        setMonthByDate,
+        getDayProps,
+        getMonthProps,
+        getYearProps,
+        getRootProps,
+    };
+}
+
+export { useCalendar };

package/calendar/moderncssm/usePeriod.d.ts

@@ -0,0 +1,31 @@
+type usePeriodProps = {
+    /**
+     * Обработчик изменения выделенного периода
+     */
+    onPeriodChange?: (selectedFrom?: number, selectedTo?: number) => void;
+    /**
+     * Начальное значение начала выделенного периода
+     */
+    initialSelectedFrom?: number;
+    /**
+     * Начальное значение конца выделенного периода
+     */
+    initialSelectedTo?: number;
+};
+declare function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelectedTo, }?: usePeriodProps): {
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+    setStart: (date?: number) => void;
+    setEnd: (date?: number) => void;
+    resetPeriod: () => void;
+    updatePeriod: (date?: number) => void;
+};
+declare function usePeriodWithReset({ onPeriodChange, initialSelectedFrom, initialSelectedTo, }?: usePeriodProps): {
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+    setStart: (date?: number) => void;
+    setEnd: (date?: number) => void;
+    resetPeriod: () => void;
+    updatePeriod: (date?: number) => void;
+};
+export { usePeriod, usePeriodWithReset };