@alfalab/core-components 48.4.0 → 48.6.0-beta.1

package/calendar/modern/desktop/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 1dpyw */
+/* hash: 1cuww */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
@@ -52,26 +52,26 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_1efqr {
+} .calendar__component_1tizh {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     outline: none
-} @media (max-width: 374px) { .calendar__component_1efqr {
+} @media (max-width: 374px) { .calendar__component_1tizh {
         align-items: center;
         width: 100%
 }
-    } .calendar__component_1efqr.calendar__responsive_1efqr {
+    } .calendar__component_1tizh.calendar__responsive_1tizh {
         width: 100%
-    } .calendar__component_1efqr.calendar__responsive_1efqr .calendar__period_1efqr {
+    } .calendar__component_1tizh.calendar__responsive_1tizh .calendar__period_1tizh {
             width: 100%;
-        } .calendar__component_1efqr.calendar__responsive_1efqr .calendar__monthYear_1efqr {
+        } .calendar__component_1tizh.calendar__responsive_1tizh .calendar__monthYear_1tizh {
             width: 100%;
-        } .calendar__component_1efqr.calendar__responsive_1efqr .calendar__container_1efqr {
+        } .calendar__component_1tizh.calendar__responsive_1tizh .calendar__container_1tizh {
             width: 100%;
-        } .calendar__container_1efqr {
+        } .calendar__container_1tizh {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -79,65 +79,65 @@
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} .calendar__container_1efqr.calendar__customScrollbar_1efqr {
+} .calendar__container_1tizh.calendar__customScrollbar_1tizh {
         overflow: auto;
         cursor: auto;
-    } .calendar__container_1efqr.calendar__customScrollbar_1efqr::-webkit-scrollbar {
+    } .calendar__container_1tizh.calendar__customScrollbar_1tizh::-webkit-scrollbar {
         width: 12px;
         height: 12px;
-    } .calendar__container_1efqr.calendar__customScrollbar_1efqr::-webkit-scrollbar-track {
+    } .calendar__container_1tizh.calendar__customScrollbar_1tizh::-webkit-scrollbar-track {
         background-color: transparent;
-    } .calendar__container_1efqr.calendar__customScrollbar_1efqr::-webkit-scrollbar-track-piece {
+    } .calendar__container_1tizh.calendar__customScrollbar_1tizh::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .calendar__container_1efqr.calendar__customScrollbar_1efqr::-webkit-scrollbar-thumb {
+    } .calendar__container_1tizh.calendar__customScrollbar_1tizh::-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_1efqr.calendar__customScrollbar_1efqr::-webkit-scrollbar-thumb:vertical {
+    } .calendar__container_1tizh.calendar__customScrollbar_1tizh::-webkit-scrollbar-thumb:vertical {
         border-radius: var(--border-radius-circle) / var(--border-radius-6);
         min-height: 40px;
-    } .calendar__container_1efqr.calendar__customScrollbar_1efqr::-webkit-scrollbar-thumb:vertical:hover {
+    } .calendar__container_1tizh.calendar__customScrollbar_1tizh::-webkit-scrollbar-thumb:vertical:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .calendar__container_1efqr.calendar__customScrollbar_1efqr::-webkit-scrollbar-thumb:horizontal {
+    } .calendar__container_1tizh.calendar__customScrollbar_1tizh::-webkit-scrollbar-thumb:horizontal {
         border-radius: var(--border-radius-6) / var(--border-radius-circle);
         min-width: 40px;
-    } .calendar__container_1efqr.calendar__customScrollbar_1efqr::-webkit-scrollbar-thumb:horizontal:hover {
+    } .calendar__container_1tizh.calendar__customScrollbar_1tizh::-webkit-scrollbar-thumb:horizontal:hover {
         border-radius: 7px / var(--border-radius-circle);
         border-width: 3px 4px;
-    } .calendar__container_1efqr.calendar__customScrollbar_1efqr::-webkit-scrollbar-thumb:active {
+    } .calendar__container_1tizh.calendar__customScrollbar_1tizh::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-text-secondary);
-    } .calendar__container_1efqr.calendar__customScrollbar_1efqr::-webkit-resizer {
+    } .calendar__container_1tizh.calendar__customScrollbar_1tizh::-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_1efqr.calendar__customScrollbar_1efqr::-webkit-scrollbar-button,
-    .calendar__container_1efqr.calendar__customScrollbar_1efqr::-webkit-scrollbar-corner {
+    } .calendar__container_1tizh.calendar__customScrollbar_1tizh::-webkit-scrollbar-button,
+    .calendar__container_1tizh.calendar__customScrollbar_1tizh::-webkit-scrollbar-corner {
         display: none;
-    } .calendar__container_1efqr.calendar__customScrollbar_1efqr {
+    } .calendar__container_1tizh.calendar__customScrollbar_1tizh {
 
         display: block;
         padding-right: var(--gap-4);
         overflow: hidden auto;
         scrollbar-gutter: stable;
-    } .calendar__container_1efqr.calendar__nativeScrollbar_1efqr {
+    } .calendar__container_1tizh.calendar__nativeScrollbar_1tizh {
         overflow: hidden auto;
-    } @media (max-width: 374px) { .calendar__container_1efqr {
+    } @media (max-width: 374px) { .calendar__container_1tizh {
         width: 288px
 }
-    } .calendar__sixWeeks_1efqr {
+    } .calendar__sixWeeks_1tizh {
     height: 388px;
-} .calendar__period_1efqr {
+} .calendar__period_1tizh {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__period_1efqr {
+} @media (max-width: 374px) { .calendar__period_1tizh {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: var(--gap-0) auto
 }
-    } .calendar__monthYear_1efqr {
+    } .calendar__monthYear_1tizh {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__monthYear_1efqr {
+} @media (max-width: 374px) { .calendar__monthYear_1tizh {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: var(--gap-0) auto

package/calendar/modern/index.js

@@ -3,19 +3,15 @@ import 'react';
 import '../../mq/modern';
 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/isSameMonth';
-import 'date-fns/startOfDay';
-import 'date-fns/startOfMonth';
 import '../../button/modern/mobile';
 import '../../modal/modern/mobile';
 import '../../shared/modern';
-import '../../typography/modern';
 import './desktop/Component.desktop.js';
+import 'date-fns/endOfDay';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
 import '@alfalab/hooks';
 import './components/days-table/Component.js';
 import 'react-transition-group';
@@ -34,6 +30,7 @@ import 'date-fns/eachYearOfInterval';
 import 'date-fns/endOfWeek';
 import 'date-fns/endOfYear';
 import 'date-fns/format';
+import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/isThisMonth';
 import 'date-fns/lastDayOfMonth';
@@ -49,6 +46,7 @@ import './components/month-year-header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import './components/select-button/Component.js';
 import './components/months-table/Component.js';
+import 'date-fns/isSameMonth';
 import './components/period-slider/Component.js';
 import '../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronBackMIcon';
@@ -71,3 +69,6 @@ import 'date-fns/setYear';
 import 'date-fns/subYears';
 import './useRange.js';
 import './usePeriod.js';
+import './calendarMonthOnlyView-37a2af5d.js';
+import 'react-virtuoso';
+import '../../typography/modern';

package/calendar/modern/mobile/index.js

@@ -1,19 +1,16 @@
-export { CalendarMobile, CalendarMonthOnlyView, CalendarMonthOnlyViewHeader } from '../components/calendar-mobile/Component.js';
+export { CalendarMobile, CalendarMonthOnlyViewHeader } from '../components/calendar-mobile/Component.js';
+export { C as CalendarMonthOnlyView } from '../calendarMonthOnlyView-37a2af5d.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/isSameMonth';
-import 'date-fns/startOfDay';
-import 'date-fns/startOfMonth';
 import '../../../button/modern/mobile';
 import '../../../modal/modern/mobile';
 import '../../../shared/modern';
-import '../../../typography/modern';
 import '../desktop/Component.desktop.js';
+import 'date-fns/endOfDay';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
 import '@alfalab/hooks';
 import '../components/days-table/Component.js';
 import 'react-transition-group';
@@ -32,6 +29,7 @@ import 'date-fns/eachYearOfInterval';
 import 'date-fns/endOfWeek';
 import 'date-fns/endOfYear';
 import 'date-fns/format';
+import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/isThisMonth';
 import 'date-fns/lastDayOfMonth';
@@ -47,6 +45,7 @@ import '../components/month-year-header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '../components/select-button/Component.js';
 import '../components/months-table/Component.js';
+import 'date-fns/isSameMonth';
 import '../components/period-slider/Component.js';
 import '../../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronBackMIcon';
@@ -69,3 +68,5 @@ import 'date-fns/setYear';
 import 'date-fns/subYears';
 import '../useRange.js';
 import '../usePeriod.js';
+import 'react-virtuoso';
+import '../../../typography/modern';

package/calendar/moderncssm/Component.responsive.d.ts

@@ -26,6 +26,9 @@ declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDeskto
     hasHeader?: boolean | undefined;
     onApply?: (() => void) | undefined;
     clickableMonth?: boolean | undefined;
+    cancelButtonContent?: string | undefined;
+    selectButtonContent?: string | undefined;
+    resetButtonContent?: string | undefined;
 } & {
     onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
     yearsAmount?: number | undefined;

package/calendar/moderncssm/Component.responsive.js

@@ -1,28 +1,21 @@
 import React, { forwardRef } from 'react';
 import { useIsDesktop } from '../../mq/moderncssm';
 import { CalendarMobile } from './components/calendar-mobile/Component.js';
-import { CalendarDesktop } from './desktop/Component.desktop.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/isSameMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
-import '../../button/moderncssm/mobile';
-import '../../modal/moderncssm/mobile';
-import '../../shared/moderncssm';
 import '../../typography/moderncssm';
-import './useCalendar.js';
+import 'react-merge-refs';
 import 'date-fns/addMonths';
 import 'date-fns/addYears';
 import 'date-fns/isSameDay';
 import 'date-fns/isSameYear';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
-import './utils.js';
 import 'date-fns/addDays';
 import 'date-fns/eachDayOfInterval';
 import 'date-fns/eachMonthOfInterval';
@@ -40,11 +33,9 @@ import 'date-fns/startOfWeek';
 import 'date-fns/startOfYear';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
-import './useRange.js';
-import './usePeriod.js';
+import '../../shared/moderncssm';
 import 'date-fns/differenceInDays';
 import '@alfalab/hooks';
-import './components/days-table/Component.js';
 import 'react-transition-group';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
@@ -52,8 +43,18 @@ import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
 import '../../button/moderncssm/desktop';
 import './components/days-table/index.module.css';
-import './components/calendar-mobile/backdrop-transitions.module.css';
 import './components/calendar-mobile/index.module.css';
+import { CalendarDesktop } from './desktop/Component.desktop.js';
+import '@juggle/resize-observer';
+import '../../button/moderncssm/mobile';
+import '../../modal/moderncssm/mobile';
+import './utils.js';
+import './components/calendar-mobile/components/calendar-month-only-view/calendarMonthOnlyView.js';
+import './useCalendar.js';
+import './useRange.js';
+import './usePeriod.js';
+import './components/days-table/Component.js';
+import './components/calendar-mobile/backdrop-transitions.module.css';
 import './components/calendar-mobile/transitions.module.css';
 import './components/header/Component.js';
 import './components/header/index.module.css';

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

@@ -1,17 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-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;
-} & Omit<import("../../desktop/index").CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & {
-    /**
-     * FIXME нужно сделать для компонента CalendarMonthOnlyView отдельный тип пропсов, т.к. тип CalendarContentProps intersection для типа CalendarMobileProps
-     * FIXME это приводит к тому, что в доку сторибука попадают типы пропсов, которые нужны для работы компонента CalendarMonthOnlyView, но не нужны для компонента CalendarMobile
-     * TODO Вынести компонент CalendarMonthOnlyView в отдельный файл
-     */
-    clickableMonth?: boolean | undefined;
-}) => React.JSX.Element;
 declare const CalendarMonthOnlyViewHeader: () => React.JSX.Element;
 declare const CalendarMobile: React.ForwardRefExoticComponent<{
     title?: string | undefined;
@@ -21,9 +9,12 @@ declare const CalendarMobile: React.ForwardRefExoticComponent<{
     hasHeader?: boolean | undefined;
     onApply?: (() => void) | undefined;
     clickableMonth?: boolean | undefined;
+    cancelButtonContent?: string | undefined;
+    selectButtonContent?: string | undefined;
+    resetButtonContent?: string | undefined;
 } & {
     onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
     yearsAmount?: number | undefined;
     scrollableContainer?: HTMLElement | undefined;
 } & Omit<import("../../desktop/index").CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & Pick<import("../../desktop/index").CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector"> & React.RefAttributes<HTMLDivElement>>;
-export { CalendarMonthOnlyView, CalendarMonthOnlyViewHeader, CalendarMobile };
+export { CalendarMonthOnlyViewHeader, CalendarMobile };

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

@@ -1,36 +1,39 @@
-import React, { forwardRef, useState, useMemo, useRef } from 'react';
+import React, { forwardRef, useState } 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 isSameMonth from 'date-fns/isSameMonth';
-import startOfDay from 'date-fns/startOfDay';
-import startOfMonth from 'date-fns/startOfMonth';
 import { ButtonMobile } from '../../../../button/moderncssm/mobile';
 import { ModalMobile } from '../../../../modal/moderncssm/mobile';
 import { getDataTestId } from '../../../../shared/moderncssm';
-import { Typography } from '../../../../typography/moderncssm';
 import { CalendarDesktop } from '../../desktop/Component.desktop.js';
-import { useCalendar } from '../../useCalendar.js';
-import { useRange } from '../../useRange.js';
-import { limitDate, dateArrayToHashTable, addonArrayToHashTable, generateMonths, generateWeeks, monthName, WEEKDAYS, isRangeValue, getMonthStartTimestamp, getMonthEndTimestamp } from '../../utils.js';
-import { DaysTable } from '../days-table/Component.js';
+import { WEEKDAYS, isRangeValue } from '../../utils.js';
+import { CalendarMonthOnlyView } from './components/calendar-month-only-view/calendarMonthOnlyView.js';
 import backdropTransitionStyles from './backdrop-transitions.module.css';
 import styles from './index.module.css';
 import transitionStyles from './transitions.module.css';
+import 'date-fns/endOfDay';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
 import '@alfalab/hooks';
+import '../days-table/Component.js';
+import 'react-transition-group';
+import 'date-fns/isEqual';
+import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isSameDay';
+import 'date-fns/isToday';
+import 'date-fns/isWithinInterval';
+import '../../../../button/moderncssm/desktop';
+import '../days-table/index.module.css';
 import '../header/Component.js';
 import '../header/index.module.css';
 import '../month-year-header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '../select-button/Component.js';
-import '../../../../button/moderncssm/desktop';
 import '../select-button/index.module.css';
 import '../month-year-header/index.module.css';
 import '../month-year-header/mobile.module.css';
 import '../months-table/Component.js';
+import 'date-fns/isSameMonth';
 import 'date-fns/isThisMonth';
 import '../months-table/index.module.css';
 import '../period-slider/Component.js';
@@ -50,7 +53,6 @@ import 'date-fns/endOfQuarter';
 import 'date-fns/endOfYear';
 import 'date-fns/getQuarter';
 import 'date-fns/getYear';
-import 'date-fns/isToday';
 import 'date-fns/isYesterday';
 import 'date-fns/startOfQuarter';
 import 'date-fns/startOfYear';
@@ -59,15 +61,17 @@ import '../years-table/Component.js';
 import 'date-fns/isSameYear';
 import 'date-fns/isThisYear';
 import '../years-table/index.module.css';
-import '../../desktop/desktop.module.css';
-import 'date-fns/isSameDay';
+import '../../useCalendar.js';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
+import '../../useRange.js';
 import '../../usePeriod.js';
+import '../../desktop/desktop.module.css';
 import 'date-fns/eachDayOfInterval';
 import 'date-fns/eachMonthOfInterval';
 import 'date-fns/eachYearOfInterval';
 import 'date-fns/format';
+import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
@@ -75,169 +79,17 @@ import 'date-fns/min';
 import 'date-fns/parse';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
-import 'react-transition-group';
-import 'date-fns/isEqual';
-import 'date-fns/isLastDayOfMonth';
-import 'date-fns/isWithinInterval';
-import '../days-table/index.module.css';
+import 'react-virtuoso';
+import '../../../../typography/moderncssm';
 
 // 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, }) => {
-    const range = useRange({
-        mode,
-        value,
-        selectedFrom,
-        selectedTo,
-        rangeBehavior,
-        onChange,
-    });
-    const month = useMemo(() => (monthTimestamp ? new Date(monthTimestamp) : undefined), [monthTimestamp]);
-    const minDate = useMemo(() => (minDateTimestamp ? startOfDay(minDateTimestamp) : undefined), [minDateTimestamp]);
-    const maxDate = useMemo(() => {
-        // блокируем последующие дни после текущего
-        if (clickableMonth && !maxDateTimestamp) {
-            return new Date();
-        }
-        return maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined;
-    }, [maxDateTimestamp, clickableMonth]);
-    const selected = useMemo(() => (range.value ? new Date(range.value) : undefined), [range.value]);
-    const startingDate = useRef(range.value);
-    const defaultMonth = useMemo(() => startOfMonth(selected ||
-        limitDate(defaultMonthTimestamp || Date.now(), minDateTimestamp, maxDateTimestamp)), [defaultMonthTimestamp, maxDateTimestamp, minDateTimestamp, selected]);
-    const { activeMonth, highlighted, getDayProps } = useCalendar({
-        month,
-        defaultMonth,
-        view: 'months',
-        minDate,
-        maxDate,
-        selected,
-        offDays,
-        events,
-        onChange: range.onChange,
-        dayAddons,
-    });
-    const activeMonths = useMemo(() => {
-        const eventsMap = dateArrayToHashTable(events || []);
-        const offDaysMap = dateArrayToHashTable(offDays || []);
-        const holidaysMap = dateArrayToHashTable(holidays || []);
-        const dayAddonsMap = addonArrayToHashTable(dayAddons || []);
-        const prevMonths = [];
-        const nextMonths = [];
-        const date = startingDate.current ? new Date(startingDate.current) : new Date();
-        const currentYear = date.getFullYear();
-        const currYearMonths = generateMonths(date, {});
-        for (let i = 0; i < yearsAmount; i++) {
-            const prevYear = date.setFullYear(currentYear - (i + 1));
-            const nextYear = date.setFullYear(currentYear + (i + 1));
-            const prevYearMonths = generateMonths(new Date(prevYear), {});
-            const nextYearMonths = generateMonths(new Date(nextYear), {});
-            prevMonths.unshift(...prevYearMonths);
-            nextMonths.push(...nextYearMonths);
-        }
-        const generatedMonths = [...prevMonths, ...currYearMonths, ...nextMonths];
-        return generatedMonths.map((item) => ({
-            ...item,
-            weeks: generateWeeks(item.date, {
-                minDate,
-                maxDate,
-                selected,
-                eventsMap,
-                offDaysMap,
-                holidaysMap,
-                dayAddonsMap,
-            }),
-            title: `${monthName(item.date)} ${item.date.getFullYear()}`,
-        }));
-    }, [events, offDays, holidays, dayAddons, minDate, maxDate, yearsAmount, selected]);
-    const initialMonthIndex = useMemo(() => {
-        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 isMonthActive = (currentMonthIndex) => {
-        if (!value || !isRangeValue(value) || !value.dateFrom || !value.dateTo) {
-            return false;
-        }
-        const { dateFrom, dateTo } = value;
-        const { date: currentMonthDate } = activeMonths[currentMonthIndex];
-        const monthStartTimestamp = getMonthStartTimestamp(currentMonthDate);
-        const monthEndTimestamp = getMonthEndTimestamp(currentMonthDate);
-        // Проверяем, что выбранный диапазон полностью покрывает месяц
-        return dateFrom <= monthStartTimestamp && dateTo >= monthEndTimestamp;
-    };
-    const handleClickMonthLabel = (index) => {
-        if (!onChange)
-            return;
-        const { date: dateActiveMonths } = activeMonths[index];
-        // Вычисляем начало и конец месяца, по которому был произведен клик
-        const clickedMonthStartTimestamp = getMonthStartTimestamp(dateActiveMonths);
-        const clickedMonthEndTimestamp = getMonthEndTimestamp(dateActiveMonths);
-        // Если значение не определено или не является диапазоном, то устанавливаем новый диапазон
-        if (!value || !isRangeValue(value) || !value.dateFrom || !value.dateTo) {
-            onChange(clickedMonthStartTimestamp, clickedMonthEndTimestamp);
-            return;
-        }
-        // Выбранный диапазон дат
-        const { dateFrom, dateTo } = value;
-        const selectedRangeStartDate = new Date(dateFrom);
-        const selectedRangeEndDate = new Date(dateTo);
-        const selectedRangeStartTimestamp = getMonthStartTimestamp(selectedRangeStartDate);
-        const selectedRangeEndTimestamp = getMonthEndTimestamp(selectedRangeEndDate);
-        // Проверяем, является ли выбранный диапазон одним и тем же месяцем
-        const isSingleMonthSelected = isSameMonth(selectedRangeStartDate, selectedRangeEndDate) &&
-            dateFrom <= selectedRangeStartTimestamp &&
-            dateTo >= selectedRangeEndTimestamp;
-        // Проверяем, является ли кликнутый месяц таким же, что и выбранный диапазон
-        const isSameMonthClicked = isSameMonth(selectedRangeStartDate, dateActiveMonths);
-        // Проверяем, находится ли кликнутый месяц внутри выбранного диапазона
-        const isClickedMonthInsideRange = clickedMonthEndTimestamp >= selectedRangeStartTimestamp &&
-            clickedMonthStartTimestamp <= selectedRangeEndTimestamp;
-        // Проверяем находится ли выбранный диапазон в пределах кликнутого месяца
-        const isRangeWithinSingleMonth = selectedRangeStartTimestamp === dateFrom && selectedRangeEndTimestamp === dateTo;
-        if (isSingleMonthSelected && isSameMonthClicked) {
-            onChange();
-        }
-        else if (isClickedMonthInsideRange || !isRangeWithinSingleMonth) {
-            onChange(clickedMonthStartTimestamp, clickedMonthEndTimestamp);
-        }
-        else {
-            const newDateFrom = Math.min(selectedRangeStartTimestamp, clickedMonthStartTimestamp);
-            const newDateTo = Math.max(selectedRangeEndTimestamp, clickedMonthEndTimestamp);
-            onChange(newDateFrom, newDateTo);
-        }
-    };
-    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 isAfterDate = isAfter(activeMonths[index].date, maxDate ?? new Date());
-        return (React.createElement("div", { className: styles.daysTable, id: `month-${index}` },
-            onMonthTitleClick ? (
-            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
-            React.createElement("span", { className: styles.month, onClick: onMonthTitleClick, tabIndex: 0, role: 'button' }, activeMonths[index].title)) : (
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-            React.createElement("span", { className: cn(styles.month, {
-                    ...(clickableMonth && {
-                        [styles.clickableMonth]: true,
-                        [styles.rectangular]: shape === 'rectangular',
-                        [styles.active]: isMonthActive(index),
-                        [styles.disabled]: isAfterDate,
-                    }),
-                }), ...(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 })));
-    };
-    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 },
     React.createElement("thead", null,
         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 CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRange = false, className, defaultView = 'days', selectorView = 'full', value, selectedFrom, selectedTo, onChange, onMonthTitleClick, dataTestId, open, onClose, title = 'Календарь', yearsAmount = 3, onApply, clickableMonth, cancelButtonContent = 'Отмена', selectButtonContent = 'Выбрать', resetButtonContent = 'Сбросить', ...restProps }, ref) => {
     const [modalRef, setModalRef] = useState();
     const monthOnlyView = selectorView === 'month-only';
     const handleClose = () => {
@@ -276,17 +128,17 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
                 selectButtonDisabled = !valueFrom;
             }
             return (React.createElement(React.Fragment, null,
-                React.createElement(ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClear, dataTestId: getDataTestId(dataTestId, 'btn-reset') }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"),
-                React.createElement(ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleApply, disabled: selectButtonDisabled, dataTestId: getDataTestId(dataTestId, 'btn-apply') }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C")));
+                React.createElement(ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClear, dataTestId: getDataTestId(dataTestId, 'btn-reset') }, resetButtonContent),
+                React.createElement(ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleApply, disabled: selectButtonDisabled, dataTestId: getDataTestId(dataTestId, 'btn-apply') }, selectButtonContent)));
         }
         /**
          * value может быть числом и объектом, для текущего кейса проверяем на typeof number
          * иначе может приводить к багу, когда выводится кнопка "Выбрать" для дефолтного значения календаря
          */
         if (value && typeof value === 'number') {
-            return (React.createElement(ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleApply, dataTestId: getDataTestId(dataTestId, 'btn-apply') }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"));
+            return (React.createElement(ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleApply, dataTestId: getDataTestId(dataTestId, 'btn-apply') }, selectButtonContent));
         }
-        return (React.createElement(ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClose, dataTestId: getDataTestId(dataTestId, 'btn-reset') }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
+        return (React.createElement(ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClose, dataTestId: getDataTestId(dataTestId, 'btn-reset') }, cancelButtonContent));
     };
     return (React.createElement(ModalMobile, { open: open, onClose: handleClose, ref: mergeRefs([(node) => setModalRef(node), ref]), className: className, wrapperClassName: styles.wrapper, transitionProps: {
             timeout: 360,
@@ -300,4 +152,4 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
         React.createElement(ModalMobile.Footer, { sticky: true, className: cn({ [styles.withZIndex]: selectorView === 'full' }) }, renderFooter())));
 });
 
-export { CalendarMobile, CalendarMonthOnlyView, CalendarMonthOnlyViewHeader };
+export { CalendarMobile, CalendarMonthOnlyViewHeader };

package/calendar/moderncssm/components/calendar-mobile/components/calendar-month-only-view/calendarMonthOnlyView.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+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;
+} & Omit<import("../../../../desktop/index").CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & {
+    clickableMonth?: boolean | undefined;
+}) => React.JSX.Element;
+export { CalendarMonthOnlyView };