@alfalab/core-components 23.13.0 → 25.1.0

package/calendar/modern/components/years-table/index.css

@@ -1,4 +1,4 @@
-/* hash: 1tt8i */
+/* hash: w98t5 */
 :root {
 
     /* Hard */
@@ -10,12 +10,12 @@
 :root {
     --gap-2xs: 4px;
     --gap-xs: 8px;
-    --gap-m-neg: -16px;
 }
 :root {
+    --calendar-inner-width: 280px;
+    --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
-    --calendar-selector-button-width: 100px;
 
     /* Шапка */
 
@@ -33,36 +33,49 @@
 
     /* marker */
 }
-.calendar__yearsTable_dnrjm {
+.calendar__yearsTable_l2di2 {
     overflow: auto;
     overflow-x: hidden;
     width: 100%;
-    margin-bottom: var(--gap-m-neg);
-    padding-top: 6px;
 }
-.calendar__inner_dnrjm {
+.calendar__inner_l2di2 {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
     position: relative;
 
-    /* 16px - 3px margin от кнопки года */
-    left: 13px;
-    overflow: hidden;
+    /* (width - inner-width) / 2 */
+    left: 32px;
+    overflow: hidden
 }
-.calendar__button_dnrjm {
-    width: var(--calendar-selector-button-width);
-    margin: 0 3px var(--gap-xs)
+@media (max-width: 374px) {
+.calendar__inner_l2di2 {
+        left: 16px
+}
+    }
+.calendar__button_l2di2 {
+    /* 3 колонки с равными отступами */
+    width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
+    margin-right: var(--gap-2xs);
+    margin-bottom: var(--gap-xs)
 }
-.calendar__button_dnrjm:nth-last-child(-n + 3) {
-        margin-bottom: 0;
+.calendar__button_l2di2:nth-child(3n) {
+        margin-right: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_dnrjm {
-        margin: 0 3px var(--gap-2xs);
+.calendar__button_l2di2 {
+        width: calc((var(--calendar-mobile-inner-width) / 2) - (var(--gap-2xs) / 2))
+}
+
+        .calendar__button_l2di2:nth-child(3n) {
+            margin-right: var(--gap-2xs);
+        }
+
+        .calendar__button_l2di2:nth-child(2n) {
+            margin-right: 0;
+        }
+.calendar__button_l2di2 {
 
-        /* ширина блока, 16 боковые отступы, 2*6px между кнопками */
-        width: calc((288px - 32px - 12px) / 3);
         height: 36px
 }
     }

package/calendar/modern/components/years-table/index.js

@@ -1,6 +1,7 @@
 import 'react';
 import 'classnames';
-import 'date-fns';
+import 'date-fns/isSameYear';
+import 'date-fns/isThisYear';
 import '../../../../button/modern';
 import '../select-button/Component.js';
 export { YearsTable } from './Component.js';

package/calendar/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: h74o5 */
+/* hash: lni1r */
 :root {
 
     /* Hard */
@@ -11,8 +11,10 @@
     --gap-m: 16px;
 }
 :root {
-    --calendar-width: 344px;
     --calendar-height: 340px;
+    --calendar-width: 344px;
+    --calendar-inner-width: 280px;
+    --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
 
@@ -32,7 +34,7 @@
 
     /* marker */
 }
-.calendar__component_1b8hx {
+.calendar__component_1ah1m {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
@@ -41,13 +43,13 @@
     outline: none
 }
 @media (max-width: 374px) {
-.calendar__component_1b8hx {
+.calendar__component_1ah1m {
         align-items: center;
         width: 100%;
         height: 320px
 }
     }
-.calendar__container_1b8hx {
+.calendar__container_1ah1m {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -57,22 +59,35 @@
     overflow: hidden
 }
 @media (max-width: 374px) {
-.calendar__container_1b8hx {
+.calendar__container_1ah1m {
         width: 288px
 }
     }
-.calendar__sixWeeks_1b8hx {
+.calendar__sixWeeks_1ah1m {
     height: 379px
 }
 @media (max-width: 374px) {
-.calendar__sixWeeks_1b8hx {
+.calendar__sixWeeks_1ah1m {
         height: 360px
 }
     }
+.calendar__period_1ah1m {
+    width: var(--calendar-inner-width)
+}
+@media (max-width: 374px) {
+.calendar__period_1ah1m {
+        justify-content: space-between;
+        width: var(--calendar-mobile-inner-width);
+        margin: 0 auto
+}
+    }
+.calendar__monthYear_1ah1m {
+    width: var(--calendar-inner-width)
+}
 @media (max-width: 374px) {
-.calendar__period_1b8hx {
+.calendar__monthYear_1ah1m {
         justify-content: space-between;
-        width: 256px;
+        width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
     }

package/calendar/modern/index.d.ts

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

package/calendar/modern/index.js

@@ -1,9 +1,52 @@
 import 'react';
 import 'classnames';
-import 'date-fns';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
+import 'date-fns/endOfDay';
 import '@alfalab/hooks';
+import 'date-fns/isEqual';
+import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isSameDay';
+import 'date-fns/isToday';
+import 'date-fns/isWithinInterval';
 import 'react-transition-group';
+import 'date-fns/eachDayOfInterval';
+import 'date-fns/eachMonthOfInterval';
+import 'date-fns/eachYearOfInterval';
+import 'date-fns/lastDayOfMonth';
+import 'date-fns/startOfYear';
+import 'date-fns/endOfYear';
+import 'date-fns/isBefore';
+import 'date-fns/isAfter';
+import 'date-fns/min';
+import 'date-fns/max';
+import 'date-fns/addDays';
+import 'date-fns/addMonths';
+import 'date-fns/endOfWeek';
+import 'date-fns/startOfWeek';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import 'date-fns/format';
+import 'date-fns/parse';
+import 'date-fns/isSameMonth';
+import 'date-fns/isThisMonth';
+import 'date-fns/isSameYear';
+import 'date-fns/isThisYear';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
+import 'date-fns/addQuarters';
+import 'date-fns/addWeeks';
+import 'date-fns/addYears';
+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 'date-fns/setYear';
+import 'date-fns/subYears';
 import 'react-merge-refs';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import 'date-fns/differenceInDays';
 import './components/header/Component.js';
 import '../../button/modern';
 export { DATE_FORMAT, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS, dateInLimits, limitDate, monthName, russianWeekDay } from './utils.js';
@@ -11,8 +54,10 @@ import './components/days-table/Component.js';
 import './components/select-button/Component.js';
 import './components/months-table/Component.js';
 import './components/years-table/Component.js';
-import './components/period-slider/utils.js';
+import '../../icon-button/modern';
+export { shiftValues } from './components/period-slider/utils.js';
 export { PeriodSlider } from './components/period-slider/Component.js';
 export { useCalendar } from './useCalendar.js';
+import './components/month-year-header/Component.js';
 export { Calendar } from './Component.js';
-export { usePeriod } from './usePeriod.js';
+export { usePeriod, usePeriodWithReset } from './usePeriod.js';

package/calendar/modern/useCalendar.js

@@ -1,5 +1,30 @@
 import { useState, useRef, useMemo, useCallback } from 'react';
-import { startOfMonth, addYears, subYears, addMonths, setYear, isSameDay, isSameMonth, isSameYear } from 'date-fns';
+import 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import isSameDay from 'date-fns/isSameDay';
+import 'date-fns/eachDayOfInterval';
+import 'date-fns/eachMonthOfInterval';
+import 'date-fns/eachYearOfInterval';
+import 'date-fns/lastDayOfMonth';
+import 'date-fns/startOfYear';
+import 'date-fns/endOfYear';
+import 'date-fns/isBefore';
+import 'date-fns/isAfter';
+import 'date-fns/min';
+import 'date-fns/max';
+import 'date-fns/addDays';
+import addMonths from 'date-fns/addMonths';
+import 'date-fns/endOfWeek';
+import 'date-fns/startOfWeek';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import 'date-fns/format';
+import 'date-fns/parse';
+import isSameMonth from 'date-fns/isSameMonth';
+import isSameYear from 'date-fns/isSameYear';
+import addYears from 'date-fns/addYears';
+import setYear from 'date-fns/setYear';
+import subYears from 'date-fns/subYears';
 import mergeRefs from 'react-merge-refs';
 import { dateArrayToHashTable, generateWeeks, generateMonths, generateYears, limitDate, simulateTab, modifyDateByShift, MONTHS_IN_YEAR } from './utils.js';
 

package/calendar/modern/usePeriod.d.ts

@@ -12,7 +12,7 @@ type usePeriodProps = {
      */
     initialSelectedTo?: number;
 };
-declare function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelectedTo, }: usePeriodProps): {
+declare function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelectedTo, }?: usePeriodProps): {
     selectedFrom: number | undefined;
     selectedTo: number | undefined;
     setStart: (date?: number | undefined) => void;
@@ -20,4 +20,12 @@ declare function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelecte
     resetPeriod: () => void;
     updatePeriod: (date?: number | undefined) => void;
 };
-export { usePeriod };
+declare function usePeriodWithReset({ onPeriodChange, initialSelectedFrom, initialSelectedTo, }?: usePeriodProps): {
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+    setStart: (date?: number | undefined) => void;
+    setEnd: (date?: number | undefined) => void;
+    resetPeriod: () => void;
+    updatePeriod: (date?: number | undefined) => void;
+};
+export { usePeriod, usePeriodWithReset };

package/calendar/modern/usePeriod.js

@@ -1,7 +1,8 @@
 import { useState, useCallback } from 'react';
 import { useDidUpdateEffect } from '@alfalab/hooks';
+import differenceInDays from 'date-fns/differenceInDays';
 
-function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelectedTo, }) {
+function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelectedTo, } = {}) {
     const [selectedFrom, setSelectedFrom] = useState(initialSelectedFrom);
     const [selectedTo, setSelectedTo] = useState(initialSelectedTo);
     const resetPeriod = useCallback(() => {
@@ -16,13 +17,35 @@ function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelectedTo, })
     }, []);
     const updatePeriod = useCallback((date) => {
         // сбрасываем выделение
-        if (date === undefined) {
+        if (date === undefined || (date === selectedTo && date === selectedFrom)) {
             resetPeriod();
             return;
         }
-        // начинаем выделение
+        // сбрасываем конец, если выбранная дата совпадает с ним
+        if (date === selectedTo) {
+            setSelectedTo(undefined);
+            return;
+        }
+        // сбрасываем начало, если выбранная дата совпадает с ним
+        if (date === selectedFrom) {
+            if (selectedTo) {
+                setSelectedFrom(selectedTo);
+                setSelectedTo(undefined);
+            }
+            else {
+                setSelectedTo(date);
+            }
+            return;
+        }
         if (!selectedFrom) {
-            setSelectedFrom(date);
+            if (selectedTo) {
+                setSelectedFrom(Math.min(date, selectedTo));
+                setSelectedTo(Math.max(date, selectedTo));
+            }
+            else {
+                // начинаем выделение
+                setSelectedFrom(date);
+            }
             return;
         }
         // заканчиваем выделение
@@ -31,19 +54,68 @@ function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelectedTo, })
             setSelectedTo(Math.max(date, selectedFrom));
             return;
         }
-        // если новая дата за выделенным периодом — расширяем интервал
-        if (date > selectedFrom) {
+        // сдвигаем тот конец выделения, который ближе к выбранной дате
+        if (Math.abs(differenceInDays(date, selectedTo)) >
+            Math.abs(differenceInDays(date, selectedFrom))) {
+            setSelectedFrom(date);
+        }
+        else {
             setSelectedTo(date);
+        }
+    }, [resetPeriod, selectedFrom, selectedTo]);
+    useDidUpdateEffect(() => {
+        if (onPeriodChange) {
+            onPeriodChange(selectedFrom, selectedTo);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedFrom, selectedTo]);
+    return {
+        selectedFrom,
+        selectedTo,
+        setStart,
+        setEnd,
+        resetPeriod,
+        updatePeriod,
+    };
+}
+function usePeriodWithReset({ onPeriodChange, initialSelectedFrom, initialSelectedTo, } = {}) {
+    const [selectedFrom, setSelectedFrom] = useState(initialSelectedFrom);
+    const [selectedTo, setSelectedTo] = useState(initialSelectedTo);
+    const resetPeriod = useCallback(() => {
+        setSelectedFrom(undefined);
+        setSelectedTo(undefined);
+    }, []);
+    const setStart = useCallback((date) => {
+        setSelectedFrom(date);
+    }, []);
+    const setEnd = useCallback((date) => {
+        setSelectedTo(date);
+    }, []);
+    const updatePeriod = useCallback((date) => {
+        // сбрасываем выделение
+        if (date === undefined) {
+            resetPeriod();
             return;
         }
-        /**
-         * если новая дата находится раньше начала выделения —
-         * сбрасываем конец периода и начинаем выделение с этой даты
-         */
-        if (date < selectedFrom) {
-            setSelectedTo(undefined);
+        if (!selectedFrom && selectedTo) {
+            setSelectedFrom(Math.min(date, selectedTo));
+            setSelectedTo(Math.max(date, selectedTo));
+            return;
+        }
+        if (!selectedFrom) {
+            // начинаем выделение
             setSelectedFrom(date);
+            return;
         }
+        // заканчиваем выделение
+        if (!selectedTo) {
+            setSelectedFrom(Math.min(date, selectedFrom));
+            setSelectedTo(Math.max(date, selectedFrom));
+            return;
+        }
+        // Если обе даты уже выбраны, начинаем выделение заново
+        setSelectedTo(undefined);
+        setSelectedFrom(date);
     }, [resetPeriod, selectedFrom, selectedTo]);
     useDidUpdateEffect(() => {
         if (onPeriodChange) {
@@ -61,4 +133,4 @@ function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelectedTo, })
     };
 }
 
-export { usePeriod };
+export { usePeriod, usePeriodWithReset };

package/calendar/modern/utils.js

@@ -1,4 +1,24 @@
-import { startOfMonth, lastDayOfMonth, eachDayOfInterval, isSameDay, eachMonthOfInterval, startOfYear, endOfYear, isBefore, isAfter, eachYearOfInterval, min, max, startOfDay, addDays, format, parse, subDays, subMonths, addMonths, startOfWeek, endOfWeek } from 'date-fns';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import isSameDay from 'date-fns/isSameDay';
+import eachDayOfInterval from 'date-fns/eachDayOfInterval';
+import eachMonthOfInterval from 'date-fns/eachMonthOfInterval';
+import eachYearOfInterval from 'date-fns/eachYearOfInterval';
+import lastDayOfMonth from 'date-fns/lastDayOfMonth';
+import startOfYear from 'date-fns/startOfYear';
+import endOfYear from 'date-fns/endOfYear';
+import isBefore from 'date-fns/isBefore';
+import isAfter from 'date-fns/isAfter';
+import min from 'date-fns/min';
+import max from 'date-fns/max';
+import addDays from 'date-fns/addDays';
+import addMonths from 'date-fns/addMonths';
+import endOfWeek from 'date-fns/endOfWeek';
+import startOfWeek from 'date-fns/startOfWeek';
+import subDays from 'date-fns/subDays';
+import subMonths from 'date-fns/subMonths';
+import format from 'date-fns/format';
+import parse from 'date-fns/parse';
 
 const DAYS_IN_WEEK = 7;
 const MONTHS_IN_YEAR = 12;
@@ -121,11 +141,14 @@ function dateArrayToHashTable(arr) {
  * Возвращает корректный отрезок дат для выделения
  */
 function getSelectionRange(from, to, highlighted) {
+    if (!from && !to)
+        return null;
     const end = to || highlighted;
-    if (from && end && from !== end) {
+    const start = from || highlighted;
+    if (start && end && start !== end) {
         return {
-            start: min([from, end]),
-            end: max([from, end]),
+            start: min([start, end]),
+            end: max([start, end]),
         };
     }
     return null;

package/calendar/useCalendar.js

@@ -1,12 +1,45 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var dateFns = require('date-fns');
+require('date-fns/startOfDay');
+var startOfMonth = require('date-fns/startOfMonth');
+var isSameDay = require('date-fns/isSameDay');
+require('date-fns/eachDayOfInterval');
+require('date-fns/eachMonthOfInterval');
+require('date-fns/eachYearOfInterval');
+require('date-fns/lastDayOfMonth');
+require('date-fns/startOfYear');
+require('date-fns/endOfYear');
+require('date-fns/isBefore');
+require('date-fns/isAfter');
+require('date-fns/min');
+require('date-fns/max');
+require('date-fns/addDays');
+var addMonths = require('date-fns/addMonths');
+require('date-fns/endOfWeek');
+require('date-fns/startOfWeek');
+require('date-fns/subDays');
+require('date-fns/subMonths');
+require('date-fns/format');
+require('date-fns/parse');
 var utils = require('./utils.js');
+var isSameMonth = require('date-fns/isSameMonth');
+var isSameYear = require('date-fns/isSameYear');
+var addYears = require('date-fns/addYears');
+var setYear = require('date-fns/setYear');
+var subYears = require('date-fns/subYears');
 var mergeRefs = require('react-merge-refs');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var startOfMonth__default = /*#__PURE__*/_interopDefaultLegacy(startOfMonth);
+var isSameDay__default = /*#__PURE__*/_interopDefaultLegacy(isSameDay);
+var addMonths__default = /*#__PURE__*/_interopDefaultLegacy(addMonths);
+var isSameMonth__default = /*#__PURE__*/_interopDefaultLegacy(isSameMonth);
+var isSameYear__default = /*#__PURE__*/_interopDefaultLegacy(isSameYear);
+var addYears__default = /*#__PURE__*/_interopDefaultLegacy(addYears);
+var setYear__default = /*#__PURE__*/_interopDefaultLegacy(setYear);
+var subYears__default = /*#__PURE__*/_interopDefaultLegacy(subYears);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 
 function useCalendar(_a) {
@@ -17,8 +50,8 @@ function useCalendar(_a) {
     var activeMonth = uncontrolled ? monthState : month;
     var dateRefs = React.useRef([]);
     var rootRef = React.useRef(null);
-    var minMonth = React.useMemo(function () { return minDate && dateFns.startOfMonth(minDate); }, [minDate]);
-    var maxMonth = React.useMemo(function () { return maxDate && dateFns.startOfMonth(maxDate); }, [maxDate]);
+    var minMonth = React.useMemo(function () { return minDate && startOfMonth__default['default'](minDate); }, [minDate]);
+    var maxMonth = React.useMemo(function () { return maxDate && startOfMonth__default['default'](maxDate); }, [maxDate]);
     var canSetPrevMonth = minMonth ? activeMonth > minMonth : true;
     var canSetNextMonth = maxMonth ? activeMonth < maxMonth : true;
     var eventsMap = React.useMemo(function () { return utils.dateArrayToHashTable(events || []); }, [events]);
@@ -30,7 +63,7 @@ function useCalendar(_a) {
         activeMonth,
     ]);
     var years = React.useMemo(function () {
-        return utils.generateYears(minDate || dateFns.subYears(new Date(), 100), maxDate || dateFns.addYears(new Date(), 1));
+        return utils.generateYears(minDate || subYears__default['default'](new Date(), 100), maxDate || addYears__default['default'](new Date(), 1));
     }, [minDate, maxDate]);
     var setMonth = React.useCallback(function (newMonth) {
         if (uncontrolled) {
@@ -41,7 +74,7 @@ function useCalendar(_a) {
         }
     }, [onMonthChange, uncontrolled]);
     var setMonthByStep = React.useCallback(function (step) {
-        setMonth(utils.limitDate(dateFns.addMonths(activeMonth, step), minMonth, maxMonth));
+        setMonth(utils.limitDate(addMonths__default['default'](activeMonth, step), minMonth, maxMonth));
     }, [setMonth, activeMonth, minMonth, maxMonth]);
     var setMonthByDate = React.useCallback(function (newMonth) {
         setMonth(utils.limitDate(newMonth, minMonth, maxMonth));
@@ -142,7 +175,7 @@ function useCalendar(_a) {
     var handleYearClick = React.useCallback(function (event) {
         var date = event.currentTarget.dataset.date;
         if (date) {
-            setMonthByDate(dateFns.setYear(activeMonth, new Date(+date).getFullYear()));
+            setMonthByDate(setYear__default['default'](activeMonth, new Date(+date).getFullYear()));
         }
         if (rootRef.current && rootRef.current.contains(document.activeElement)) {
             rootRef.current.focus();
@@ -200,10 +233,10 @@ function useCalendar(_a) {
     }, [controlsByView, view]);
     var focusableDayIsSet = false;
     var getDayProps = React.useCallback(function (day) {
-        var daySelected = selected && dateFns.isSameDay(selected, day.date);
+        var daySelected = selected && isSameDay__default['default'](selected, day.date);
         var canFocus = daySelected;
         // Если день не выбран — фокус должен начинаться с первого доступного дня месяца
-        if ((!selected || !dateFns.isSameMonth(selected, activeMonth)) &&
+        if ((!selected || !isSameMonth__default['default'](selected, activeMonth)) &&
             !focusableDayIsSet &&
             !day.disabled) {
             // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -232,7 +265,7 @@ function useCalendar(_a) {
     var getMonthProps = React.useCallback(
     // eslint-disable-next-line no-shadow
     function (month) {
-        var monthselected = dateFns.isSameMonth(activeMonth, month.date);
+        var monthselected = isSameMonth__default['default'](activeMonth, month.date);
         return {
             'data-date': month.date.getTime(),
             'aria-selected': monthselected,
@@ -245,7 +278,7 @@ function useCalendar(_a) {
         };
     }, [activeMonth, handleDateRef, handleMonthClick]);
     var getYearProps = React.useCallback(function (year) {
-        var yearSelected = dateFns.isSameYear(activeMonth, year);
+        var yearSelected = isSameYear__default['default'](activeMonth, year);
         return {
             'data-date': year.getTime(),
             'aria-selected': yearSelected,

package/calendar/usePeriod.d.ts

@@ -12,7 +12,7 @@ type usePeriodProps = {
      */
     initialSelectedTo?: number;
 };
-declare function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelectedTo, }: usePeriodProps): {
+declare function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelectedTo, }?: usePeriodProps): {
     selectedFrom: number | undefined;
     selectedTo: number | undefined;
     setStart: (date?: number | undefined) => void;
@@ -20,4 +20,12 @@ declare function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelecte
     resetPeriod: () => void;
     updatePeriod: (date?: number | undefined) => void;
 };
-export { usePeriod };
+declare function usePeriodWithReset({ onPeriodChange, initialSelectedFrom, initialSelectedTo, }?: usePeriodProps): {
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+    setStart: (date?: number | undefined) => void;
+    setEnd: (date?: number | undefined) => void;
+    resetPeriod: () => void;
+    updatePeriod: (date?: number | undefined) => void;
+};
+export { usePeriod, usePeriodWithReset };