@alfalab/core-components 47.13.0 → 47.14.0

package/calendar/modern/components/calendar-mobile/Component.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { ResetCurrentClickedMonth } from "./typings";
-declare const CalendarMonthOnlyView: ({ value, mode, rangeBehavior, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, onMonthTitleClick, selectedFrom, selectedTo, yearsAmount, dayAddons, shape, scrollableContainer, clickableMonth, resetCurrentClickedMonth, }: {
+declare const CalendarMonthOnlyView: ({ value, mode, rangeBehavior, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, onMonthTitleClick, selectedFrom, selectedTo, yearsAmount, dayAddons, shape, scrollableContainer, clickableMonth, }: {
     onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
     yearsAmount?: number | undefined;
     scrollableContainer?: HTMLElement | undefined;
@@ -12,10 +11,6 @@ declare const CalendarMonthOnlyView: ({ value, mode, rangeBehavior, month: month
      * TODO Вынести компонент CalendarMonthOnlyView в отдельный файл
      */
     clickableMonth?: boolean | undefined;
-    /**
-     * Ref для сброса заголовка clickableMonth
-     */
-    resetCurrentClickedMonth?: React.RefObject<ResetCurrentClickedMonth> | undefined;
 }) => React.JSX.Element;
 declare const CalendarMonthOnlyViewHeader: () => React.JSX.Element;
 declare const CalendarMobile: React.ForwardRefExoticComponent<{

package/calendar/modern/components/calendar-mobile/Component.js

@@ -1,11 +1,14 @@
-import React, { forwardRef, useState, useRef, useMemo, useImperativeHandle } from 'react';
+import React, { forwardRef, useState, useMemo, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { Virtuoso } from 'react-virtuoso';
 import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
 import endOfDay from 'date-fns/endOfDay';
 import isAfter from 'date-fns/isAfter';
+import isSameDay from 'date-fns/isSameDay';
 import isSameMonth from 'date-fns/isSameMonth';
+import isThisMonth from 'date-fns/isThisMonth';
+import lastDayOfMonth from 'date-fns/lastDayOfMonth';
 import startOfDay from 'date-fns/startOfDay';
 import startOfMonth from 'date-fns/startOfMonth';
 import { ButtonMobile } from '../../../../button/modern/mobile';
@@ -24,7 +27,6 @@ import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '../select-button/Component.js';
 import '../../../../button/modern/desktop';
 import '../months-table/Component.js';
-import 'date-fns/isThisMonth';
 import '../period-slider/Component.js';
 import 'date-fns/endOfWeek';
 import 'date-fns/startOfWeek';
@@ -49,7 +51,6 @@ import 'date-fns/startOfYear';
 import '../years-table/Component.js';
 import 'date-fns/isSameYear';
 import 'date-fns/isThisYear';
-import 'date-fns/isSameDay';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
 import '../../usePeriod.js';
@@ -58,33 +59,30 @@ import 'date-fns/eachMonthOfInterval';
 import 'date-fns/eachYearOfInterval';
 import 'date-fns/format';
 import 'date-fns/isBefore';
-import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/parse';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
 import 'react-transition-group';
-import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isWithinInterval';
 
-const backdropTransitionStyles = {"appear":"calendar__appear_sjz8a","enter":"calendar__enter_sjz8a","appearActive":"calendar__appearActive_sjz8a","enterActive":"calendar__enterActive_sjz8a","appearDone":"calendar__appearDone_sjz8a","enterDone":"calendar__enterDone_sjz8a","exit":"calendar__exit_sjz8a","exitActive":"calendar__exitActive_sjz8a","exitDone":"calendar__exitDone_sjz8a"};
+const backdropTransitionStyles = {"appear":"calendar__appear_14rd4","enter":"calendar__enter_14rd4","appearActive":"calendar__appearActive_14rd4","enterActive":"calendar__enterActive_14rd4","appearDone":"calendar__appearDone_14rd4","enterDone":"calendar__enterDone_14rd4","exit":"calendar__exit_14rd4","exitActive":"calendar__exitActive_14rd4","exitDone":"calendar__exitDone_14rd4"};
 require('./backdrop-transitions.css');
 
-const styles = {"wrapper":"calendar__wrapper_yo10z","withZIndex":"calendar__withZIndex_yo10z","calendar":"calendar__calendar_yo10z","dayNames":"calendar__dayNames_yo10z","withHeader":"calendar__withHeader_yo10z","month":"calendar__month_yo10z","clickableMonth":"calendar__clickableMonth_yo10z","rectangular":"calendar__rectangular_yo10z","active":"calendar__active_yo10z","monthTitle":"calendar__monthTitle_yo10z","disabled":"calendar__disabled_yo10z","daysTable":"calendar__daysTable_yo10z","dayName":"calendar__dayName_yo10z","virtuoso":"calendar__virtuoso_yo10z","contentModal":"calendar__contentModal_yo10z","content":"calendar__content_yo10z"};
+const styles = {"wrapper":"calendar__wrapper_1rzwl","withZIndex":"calendar__withZIndex_1rzwl","calendar":"calendar__calendar_1rzwl","dayNames":"calendar__dayNames_1rzwl","withHeader":"calendar__withHeader_1rzwl","month":"calendar__month_1rzwl","clickableMonth":"calendar__clickableMonth_1rzwl","rectangular":"calendar__rectangular_1rzwl","active":"calendar__active_1rzwl","monthTitle":"calendar__monthTitle_1rzwl","disabled":"calendar__disabled_1rzwl","daysTable":"calendar__daysTable_1rzwl","dayName":"calendar__dayName_1rzwl","virtuoso":"calendar__virtuoso_1rzwl","contentModal":"calendar__contentModal_1rzwl","content":"calendar__content_1rzwl"};
 require('./index.css');
 
-const transitionStyles = {"appear":"calendar__appear_1ctn0","enter":"calendar__enter_1ctn0","appearActive":"calendar__appearActive_1ctn0","enterActive":"calendar__enterActive_1ctn0","exit":"calendar__exit_1ctn0","exitActive":"calendar__exitActive_1ctn0","exitDone":"calendar__exitDone_1ctn0"};
+const transitionStyles = {"appear":"calendar__appear_10m93","enter":"calendar__enter_10m93","appearActive":"calendar__appearActive_10m93","enterActive":"calendar__enterActive_10m93","exit":"calendar__exit_10m93","exitActive":"calendar__exitActive_10m93","exitDone":"calendar__exitDone_10m93"};
 require('./transitions.css');
 
 // ResizeObserverPolyfill необходим для корректной работы react-virtuoso.
 if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.ResizeObserver = ResizeObserver;
 }
-const CalendarMonthOnlyView = ({ value, mode = 'single', rangeBehavior = 'clarification', month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, onMonthTitleClick, selectedFrom, selectedTo, yearsAmount = 3, dayAddons, shape = 'rounded', scrollableContainer, clickableMonth, resetCurrentClickedMonth, }) => {
-    const [activeMonthLabel, setActiveMonthLabel] = useState('');
+const CalendarMonthOnlyView = ({ value, mode = 'single', rangeBehavior = 'clarification', month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, onMonthTitleClick, selectedFrom, selectedTo, yearsAmount = 3, dayAddons, shape = 'rounded', scrollableContainer, clickableMonth, }) => {
     const range = useRange({
         mode,
         value,
@@ -117,7 +115,6 @@ const CalendarMonthOnlyView = ({ value, mode = 'single', rangeBehavior = 'clarif
         events,
         onChange: range.onChange,
         dayAddons,
-        ...(clickableMonth && { resetCurrentClickedMonth }),
     });
     const activeMonths = useMemo(() => {
         const eventsMap = dateArrayToHashTable(events || []);
@@ -156,25 +153,52 @@ const CalendarMonthOnlyView = ({ value, mode = 'single', rangeBehavior = 'clarif
         const date = range.value || range.selectedFrom || activeMonth.getTime() || Date.now();
         return activeMonths.findIndex((m) => isSameMonth(date, m.date));
     }, [range.value, range.selectedFrom, activeMonth, activeMonths]);
-    const handleClickMonthLabel = (index) => {
-        if (activeMonths[index].title !== activeMonthLabel || activeMonthLabel === '') {
-            setActiveMonthLabel(activeMonths[index].title);
+    // заголовок должен становиться активным если выбран весь доступный период в месяце
+    const isMonthActive = (currentMonthIndex) => {
+        if (value && isRangeValue(value)) {
+            const { date: initialMonthDate } = activeMonths[initialMonthIndex];
+            const { date: currentMonthDate } = activeMonths[currentMonthIndex];
+            const firstAvailableDayOfMonth = startOfMonth(initialMonthDate).getTime();
+            /**
+             * последний доступный день месяца в timestamp
+             * представлен в виде последнего календарного дня, либо в виде текущей даты для актуального месяца
+             */
+            const lastAvailableDayOfMonth = isThisMonth(initialMonthDate)
+                ? startOfDay(new Date()).getTime()
+                : lastDayOfMonth(initialMonthDate).getTime();
+            const { dateFrom, dateTo } = value;
+            if (dateFrom &&
+                dateTo &&
+                isSameMonth(initialMonthDate, currentMonthDate) &&
+                isSameDay(firstAvailableDayOfMonth, dateFrom) &&
+                isSameDay(lastAvailableDayOfMonth, dateTo)) {
+                return true;
+            }
         }
-        else {
-            setActiveMonthLabel('');
-            if (onChange) {
+        return false;
+    };
+    const handleClickMonthLabel = (index) => {
+        if (onChange) {
+            const { date } = activeMonths[index];
+            const firstAvailableDayOfMonth = startOfMonth(date).getTime();
+            const lastAvailableDayOfMonth = isThisMonth(date)
+                ? startOfDay(new Date()).getTime()
+                : lastDayOfMonth(date).getTime();
+            if (isMonthActive(index)) {
                 onChange();
             }
+            else {
+                onChange(firstAvailableDayOfMonth, lastAvailableDayOfMonth);
+            }
         }
     };
-    const getMonthTitle = (index, isClickableMonth) => {
+    const getMonthLabel = (index, isClickableMonth) => {
         if (isClickableMonth) {
             return (React.createElement(Typography.Text, { className: styles.monthTitle, view: 'primary-small', color: 'primary' }, activeMonths[index].title));
         }
         return `\u00A0${activeMonths[index].title}\u00A0`;
     };
     const renderMonth = (index) => {
-        const monthClicked = activeMonthLabel === activeMonths[index].title;
         const isAfterDate = isAfter(activeMonths[index].date, activeMonth);
         return (React.createElement("div", { className: styles.daysTable, id: `month-${index}` },
             onMonthTitleClick ? (
@@ -185,17 +209,12 @@ const CalendarMonthOnlyView = ({ value, mode = 'single', rangeBehavior = 'clarif
                     ...(clickableMonth && {
                         [styles.clickableMonth]: true,
                         [styles.rectangular]: shape === 'rectangular',
-                        [styles.active]: monthClicked,
+                        [styles.active]: isMonthActive(index),
                         [styles.disabled]: isAfterDate,
                     }),
-                }), ...(clickableMonth && { onClick: () => handleClickMonthLabel(index) }) }, getMonthTitle(index, clickableMonth))),
-            React.createElement(DaysTable, { withTransition: false, weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: range.selectedFrom, selectedTo: range.selectedTo, getDayProps: getDayProps, highlighted: highlighted, hasHeader: false, responsive: true, shape: shape, monthClicked: monthClicked, onChange: onChange })));
+                }), ...(clickableMonth && { onClick: () => handleClickMonthLabel(index) }) }, getMonthLabel(index, clickableMonth))),
+            React.createElement(DaysTable, { withTransition: false, weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: range.selectedFrom, selectedTo: range.selectedTo, getDayProps: getDayProps, highlighted: highlighted, hasHeader: false, responsive: true, shape: shape })));
     };
-    useImperativeHandle(resetCurrentClickedMonth, () => ({
-        resetCurrentClickedMonth: () => {
-            setActiveMonthLabel('');
-        },
-    }));
     return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex ?? 0, align: 'center' }, increaseViewportBy: 500, itemSize: (el) => el.getBoundingClientRect().height + 32, customScrollParent: scrollableContainer, useWindowScroll: true, className: styles.virtuoso }));
 };
 const CalendarMonthOnlyViewHeader = () => (React.createElement("table", { className: styles.dayNames },
@@ -203,7 +222,6 @@ const CalendarMonthOnlyViewHeader = () => (React.createElement("table", { classN
         React.createElement("tr", null, WEEKDAYS.map((dayName) => (React.createElement("th", { className: styles.dayName, key: dayName }, dayName)))))));
 const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRange = false, className, defaultView = 'days', selectorView = 'full', value, selectedFrom, selectedTo, onChange, onMonthTitleClick, dataTestId, open, onClose, title = 'Календарь', yearsAmount = 3, onApply, clickableMonth, ...restProps }, ref) => {
     const [modalRef, setModalRef] = useState();
-    const resetCurrentClickedMonth = useRef(null);
     const monthOnlyView = selectorView === 'month-only';
     const handleClose = () => {
         if (onClose)
@@ -216,7 +234,6 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
     const handleClear = () => {
         if (onChange)
             onChange();
-        resetCurrentClickedMonth?.current?.resetCurrentClickedMonth();
     };
     const renderDayNames = () => (monthOnlyView ? React.createElement(CalendarMonthOnlyViewHeader, null) : null);
     const renderContent = () => {
@@ -229,7 +246,7 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
             selectedTo,
         };
         if (monthOnlyView) {
-            return (React.createElement(CalendarMonthOnlyView, { yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, clickableMonth: clickableMonth, resetCurrentClickedMonth: resetCurrentClickedMonth, ...commonProps, ...restProps }));
+            return (React.createElement(CalendarMonthOnlyView, { yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, clickableMonth: clickableMonth, ...commonProps, ...restProps }));
         }
         return (React.createElement(CalendarDesktop, { responsive: true, className: cn(className, styles.calendar), contentClassName: styles.content, dataTestId: getDataTestId(dataTestId, 'mobile'), ...commonProps, ...restProps }));
     };

package/calendar/modern/components/calendar-mobile/backdrop-transitions.css

@@ -19,19 +19,19 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .calendar__appear_sjz8a,
-.calendar__enter_sjz8a {
+} .calendar__appear_14rd4,
+.calendar__enter_14rd4 {
     background-color: transparent;
-} .calendar__appearActive_sjz8a,
-.calendar__enterActive_sjz8a,
-.calendar__appearDone_sjz8a,
-.calendar__enterDone_sjz8a {
+} .calendar__appearActive_14rd4,
+.calendar__enterActive_14rd4,
+.calendar__appearDone_14rd4,
+.calendar__enterDone_14rd4 {
     background-color: var(--color-light-neutral-translucent-300);
     transition: background-color 80ms linear;
-} .calendar__exit_sjz8a {
+} .calendar__exit_14rd4 {
     background-color: var(--color-light-neutral-translucent-300);
-} .calendar__exitActive_sjz8a,
-.calendar__exitDone_sjz8a {
+} .calendar__exitActive_14rd4,
+.calendar__exitDone_14rd4 {
     background-color: transparent;
     transition: background-color 80ms linear;
     transition-delay: 280ms;

package/calendar/modern/components/calendar-mobile/index.css

@@ -20,6 +20,7 @@
     /* Hard up */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */
     --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --border-radius-pill: 99px;
 
     /* новые значения, используйте их */
 } :root { /* deprecated */ /* deprecated */
@@ -28,6 +29,9 @@
     --gap-2xl: 32px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --gap-8: var(--gap-xs);
+    --gap-16: var(--gap-m);
+    --gap-32: var(--gap-2xl);
 } :root {
 } :root {
 } :root {
@@ -66,26 +70,26 @@
     /* mobile */
 
     /* paddings */
-} .calendar__wrapper_yo10z {
+} .calendar__wrapper_1rzwl {
     overflow-x: hidden;
-} .calendar__withZIndex_yo10z {
+} .calendar__withZIndex_1rzwl {
     z-index: 2;
-} .calendar__calendar_yo10z.calendar__calendar_yo10z {
+} .calendar__calendar_1rzwl.calendar__calendar_1rzwl {
     height: 100%;
-} .calendar__calendar_yo10z th {
+} .calendar__calendar_1rzwl th {
     border-bottom: 1px solid var(--color-light-neutral-300);
-} .calendar__dayNames_yo10z {
+} .calendar__dayNames_1rzwl {
     width: 100%;
     position: sticky;
     background: var(--modal-header-background);
     top: 0;
     height: 32px;
     padding: 0 6px
-} .calendar__dayNames_yo10z.calendar__withHeader_yo10z {
+} .calendar__dayNames_1rzwl.calendar__withHeader_1rzwl {
         top: 48px;
-    } .calendar__dayNames_yo10z th {
+    } .calendar__dayNames_1rzwl th {
     height: 100%;
-} .calendar__month_yo10z {
+} .calendar__month_1rzwl {
     font-style: normal;
     font-weight: 700;
     font-size: 12px;
@@ -93,43 +97,43 @@
     letter-spacing: 1.25px;
     text-transform: uppercase;
     color: var(--color-light-text-primary);
-    margin-bottom: var(--gap-xs)
-} .calendar__month_yo10z.calendar__clickableMonth_yo10z {
-        padding: 10px var(--gap-m);
+    margin-bottom: var(--gap-8)
+} .calendar__month_1rzwl.calendar__clickableMonth_1rzwl {
+        padding: 10px var(--gap-16);
         align-self: flex-start;
-        border-radius: 999px;
+        border-radius: var(--border-radius-pill);
         background-color: var(--color-light-neutral-translucent-100);
         cursor: pointer;
         text-transform: unset
-    } .calendar__month_yo10z.calendar__clickableMonth_yo10z.calendar__rectangular_yo10z {
+    } .calendar__month_1rzwl.calendar__clickableMonth_1rzwl.calendar__rectangular_1rzwl {
             border-radius: var(--border-radius-l);
-        } .calendar__month_yo10z.calendar__clickableMonth_yo10z.calendar__active_yo10z {
+        } .calendar__month_1rzwl.calendar__clickableMonth_1rzwl.calendar__active_1rzwl {
             background-color: var(--color-light-accent-secondary)
-        } .calendar__month_yo10z.calendar__clickableMonth_yo10z.calendar__active_yo10z .calendar__monthTitle_yo10z {
+        } .calendar__month_1rzwl.calendar__clickableMonth_1rzwl.calendar__active_1rzwl .calendar__monthTitle_1rzwl {
                 color: var(--color-light-text-primary-inverted);
-            } .calendar__month_yo10z.calendar__clickableMonth_yo10z.calendar__disabled_yo10z {
+            } .calendar__month_1rzwl.calendar__clickableMonth_1rzwl.calendar__disabled_1rzwl {
             pointer-events: none
-        } .calendar__month_yo10z.calendar__clickableMonth_yo10z.calendar__disabled_yo10z .calendar__monthTitle_yo10z {
+        } .calendar__month_1rzwl.calendar__clickableMonth_1rzwl.calendar__disabled_1rzwl .calendar__monthTitle_1rzwl {
                 color: var(--color-light-text-tertiary);
-            } .calendar__daysTable_yo10z {
+            } .calendar__daysTable_1rzwl {
     display: flex;
     flex-direction: column;
-    margin-top: var(--gap-2xl);
-} .calendar__dayName_yo10z {
+    margin-top: var(--gap-32);
+} .calendar__dayName_1rzwl {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
     height: var(--calendar-day-size);
     color: var(--color-light-text-secondary)
-} @media (max-width: 374px) { .calendar__dayName_yo10z {
+} @media (max-width: 374px) { .calendar__dayName_1rzwl {
         height: 36px
 }
-    } .calendar__virtuoso_yo10z {
-    margin: 0 var(--gap-m);
-} .calendar__contentModal_yo10z {
+    } .calendar__virtuoso_1rzwl {
+    margin: 0 var(--gap-16);
+} .calendar__contentModal_1rzwl {
     padding-right: 0;
     padding-left: 0;
-} .calendar__content_yo10z.calendar__content_yo10z {
+} .calendar__content_1rzwl.calendar__content_1rzwl {
     flex-basis: 0;
 }

package/calendar/modern/components/calendar-mobile/index.js

@@ -6,7 +6,10 @@ 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/modern/mobile';
@@ -17,10 +20,8 @@ import '../../desktop/Component.desktop.js';
 import '@alfalab/hooks';
 import '../days-table/Component.js';
 import 'react-transition-group';
-import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
-import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
 import '../../../../button/modern/desktop';
@@ -34,7 +35,6 @@ import 'date-fns/endOfWeek';
 import 'date-fns/endOfYear';
 import 'date-fns/format';
 import 'date-fns/isBefore';
-import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/parse';
@@ -47,7 +47,6 @@ import '../month-year-header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '../select-button/Component.js';
 import '../months-table/Component.js';
-import 'date-fns/isThisMonth';
 import '../period-slider/Component.js';
 import '../../../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronBackMIcon';

package/calendar/modern/components/calendar-mobile/transitions.css

@@ -18,18 +18,18 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .calendar__appear_1ctn0,
-.calendar__enter_1ctn0 {
+} .calendar__appear_10m93,
+.calendar__enter_10m93 {
     transform: translateX(100%);
-} .calendar__appearActive_1ctn0,
-.calendar__enterActive_1ctn0 {
+} .calendar__appearActive_10m93,
+.calendar__enterActive_10m93 {
     transform: translateX(0);
     transition: transform 280ms ease-in-out;
     transition-delay: 80ms;
-} .calendar__exit_1ctn0 {
+} .calendar__exit_10m93 {
     transform: translateX(0);
-} .calendar__exitActive_1ctn0,
-.calendar__exitDone_1ctn0 {
+} .calendar__exitActive_10m93,
+.calendar__exitDone_10m93 {
     transform: translateX(100%);
     transition: transform 280ms ease-in-out;
 }

package/calendar/modern/components/calendar-mobile/typings.d.ts

@@ -3,9 +3,6 @@ import React from 'react';
 import { CalendarDesktopProps } from "../../desktop/index";
 type OmittedCalendarProps = 'headerClassName' | 'contentClassName';
 type OmittedCalendarContentProps = 'className' | 'defaultView' | 'selectorView' | 'rangeComplete' | 'onMonthChange' | 'onYearClick' | 'onPeriodClick' | 'dataTestId' | 'hasHeader' | 'responsive' | 'showCurrentYearSelector';
-type ResetCurrentClickedMonth = {
-    resetCurrentClickedMonth: () => void;
-};
 type CalendarContentProps = {
     /**
      * Обработчик клика на название месяца в мобильном календаре
@@ -50,4 +47,4 @@ type CalendarMobileProps = {
      */
     clickableMonth?: boolean;
 } & CalendarContentProps & Pick<CalendarDesktopProps, OmittedCalendarContentProps>;
-export { ResetCurrentClickedMonth, CalendarContentProps, CalendarMobileProps };
+export { CalendarContentProps, CalendarMobileProps };

package/calendar/modern/components/days-table/Component.d.ts

@@ -54,14 +54,6 @@ type DaysTableProps = {
      * Рендерит компонент, обернутый в Transition
      */
     withTransition?: boolean;
-    /**
-     * При клике на месяц будут выбраны все доступные дни месяца
-     */
-    monthClicked?: boolean;
-    /**
-     * Обработчик выбора даты
-     */
-    onChange?: (date?: number, dateTo?: number) => void;
 };
 declare const DaysTable: FC<DaysTableProps>;
 export { DaysTableProps, DaysTable };

package/calendar/modern/components/days-table/Component.js

@@ -1,7 +1,6 @@
-import React, { useRef, useCallback, useEffect } from 'react';
+import React, { useRef, useCallback } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import cn from 'classnames';
-import { getTime } from 'date-fns';
 import isEqual from 'date-fns/isEqual';
 import isLastDayOfMonth from 'date-fns/isLastDayOfMonth';
 import isSameDay from 'date-fns/isSameDay';
@@ -33,15 +32,13 @@ import 'date-fns/subDays';
 import 'date-fns/subMonths';
 import '../../../../shared/modern';
 
-const styles = {"daysTable":"calendar__daysTable_zv7v3","responsive":"calendar__responsive_zv7v3","dayName":"calendar__dayName_zv7v3","day":"calendar__day_zv7v3","rounded":"calendar__rounded_zv7v3","rectangular":"calendar__rectangular_zv7v3","highlighted":"calendar__highlighted_zv7v3","range":"calendar__range_zv7v3","disabled":"calendar__disabled_zv7v3","holiday":"calendar__holiday_zv7v3","today":"calendar__today_zv7v3","rangeComplete":"calendar__rangeComplete_zv7v3","selected":"calendar__selected_zv7v3","dayWrapper":"calendar__dayWrapper_zv7v3","cursorPointer":"calendar__cursorPointer_zv7v3","rangeEnd":"calendar__rangeEnd_zv7v3","shapeRectangular":"calendar__shapeRectangular_zv7v3","rangeStart":"calendar__rangeStart_zv7v3","transitLeft":"calendar__transitLeft_zv7v3","transitRight":"calendar__transitRight_zv7v3","sharpTransitLeft":"calendar__sharpTransitLeft_zv7v3","sharpTransitRight":"calendar__sharpTransitRight_zv7v3","daysEnter":"calendar__daysEnter_zv7v3","left":"calendar__left_zv7v3","daysEnterActive":"calendar__daysEnterActive_zv7v3","daysExit":"calendar__daysExit_zv7v3","daysExitActive":"calendar__daysExitActive_zv7v3","right":"calendar__right_zv7v3","dayAddons":"calendar__dayAddons_zv7v3","dayContent":"calendar__dayContent_zv7v3","addons":"calendar__addons_zv7v3","dot":"calendar__dot_zv7v3","bottomAddon":"calendar__bottomAddon_zv7v3"};
+const styles = {"daysTable":"calendar__daysTable_1c2lr","responsive":"calendar__responsive_1c2lr","dayName":"calendar__dayName_1c2lr","day":"calendar__day_1c2lr","rounded":"calendar__rounded_1c2lr","rectangular":"calendar__rectangular_1c2lr","highlighted":"calendar__highlighted_1c2lr","range":"calendar__range_1c2lr","disabled":"calendar__disabled_1c2lr","holiday":"calendar__holiday_1c2lr","today":"calendar__today_1c2lr","rangeComplete":"calendar__rangeComplete_1c2lr","selected":"calendar__selected_1c2lr","dayWrapper":"calendar__dayWrapper_1c2lr","cursorPointer":"calendar__cursorPointer_1c2lr","rangeEnd":"calendar__rangeEnd_1c2lr","shapeRectangular":"calendar__shapeRectangular_1c2lr","rangeStart":"calendar__rangeStart_1c2lr","transitLeft":"calendar__transitLeft_1c2lr","transitRight":"calendar__transitRight_1c2lr","sharpTransitLeft":"calendar__sharpTransitLeft_1c2lr","sharpTransitRight":"calendar__sharpTransitRight_1c2lr","daysEnter":"calendar__daysEnter_1c2lr","left":"calendar__left_1c2lr","daysEnterActive":"calendar__daysEnterActive_1c2lr","daysExit":"calendar__daysExit_1c2lr","daysExitActive":"calendar__daysExitActive_1c2lr","right":"calendar__right_1c2lr","dayAddons":"calendar__dayAddons_1c2lr","dayContent":"calendar__dayContent_1c2lr","addons":"calendar__addons_1c2lr","dot":"calendar__dot_1c2lr","bottomAddon":"calendar__bottomAddon_1c2lr"};
 require('./index.css');
 
 /* eslint-disable complexity */
-const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selectedFrom, selectedTo, rangeComplete = selectedFrom && selectedTo, getDayProps, hasHeader = true, responsive, shape = 'rounded', withTransition = true, monthClicked = false, onChange, }) => {
+const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selectedFrom, selectedTo, rangeComplete = selectedFrom && selectedTo, getDayProps, hasHeader = true, responsive, shape = 'rounded', withTransition = true, }) => {
     const activeMonthRef = useRef(activeMonth);
     const directionRef = useRef();
-    const currentStartMonth = useRef();
-    const currentEndPeriod = useRef();
     activeMonthRef.current = activeMonth;
     const prevActiveMonth = usePrevious(activeMonth);
     if (prevActiveMonth && prevActiveMonth !== activeMonth) {
@@ -81,15 +78,6 @@ const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selected
             if (!day.disabled)
                 onClick(e);
         };
-        if (dayIdx === 0) {
-            currentStartMonth.current = startOfMonth(day.date).getTime();
-        }
-        if (isToday(day.date)) {
-            currentEndPeriod.current = getTime(day.date);
-        }
-        else if (!currentEndPeriod.current && isLastDayOfMonth(day.date)) {
-            currentEndPeriod.current = getTime(day.date);
-        }
         return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
         React.createElement("td", { ...dayProps, key: day.date.getTime(), className: cn(styles.dayWrapper, {
@@ -129,12 +117,6 @@ const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selected
     };
     const renderWeek = (week, weekIdx) => (React.createElement("tr", { key: weekIdx }, week.map(renderDay)));
     const renderMonth = () => React.createElement("tbody", null, weeks.map(renderWeek));
-    useEffect(() => {
-        if (monthClicked && onChange) {
-            onChange(currentStartMonth.current, currentEndPeriod.current);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [monthClicked]);
     return (React.createElement("table", { className: cn(styles.daysTable, directionRef.current && styles[directionRef.current], {
             [styles.responsive]: responsive,
         }) },