@alfalab/core-components 42.15.0 → 42.15.1

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

@@ -49,43 +49,43 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__yearsTable_y917l {
+} .cc-calendar .calendar__yearsTable_1d037 {
         width: 100%
-    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_y917l {
+    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_1d037 {
             padding-top: var(--gap-xs)
     }
-        } .cc-calendar .calendar__yearsTable_y917l.calendar__responsive_y917l .calendar__inner_y917l {
+        } .cc-calendar .calendar__yearsTable_1d037.calendar__responsive_1d037 .calendar__inner_1d037 {
                 width: 100%;
-            } .cc-calendar .calendar__yearsTable_y917l.calendar__responsive_y917l .calendar__button_y917l {
+            } .cc-calendar .calendar__yearsTable_1d037.calendar__responsive_1d037 .calendar__button_1d037 {
                 width: calc(33.333% - var(--gap-2xs) / 1.5);
-            } .cc-calendar .calendar__yearsTable_y917l:not(.calendar__responsive_y917l) .calendar__inner_y917l {
+            } .cc-calendar .calendar__yearsTable_1d037:not(.calendar__responsive_1d037) .calendar__inner_1d037 {
                 width: var(--calendar-inner-width);
                 margin: 0 auto
-            } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_y917l:not(.calendar__responsive_y917l) .calendar__inner_y917l {
+            } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_1d037:not(.calendar__responsive_1d037) .calendar__inner_1d037 {
                     width: var(--calendar-mobile-inner-width)
             }
-                } .cc-calendar .calendar__yearsTable_y917l:not(.calendar__responsive_y917l) .calendar__button_y917l {
+                } .cc-calendar .calendar__yearsTable_1d037:not(.calendar__responsive_1d037) .calendar__button_1d037 {
                 width: var(--calendar-select-button-width)
-            } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_y917l:not(.calendar__responsive_y917l) .calendar__button_y917l {
+            } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_1d037:not(.calendar__responsive_1d037) .calendar__button_1d037 {
                     width: var(--calendar-mobile-select-button-width)
             }
 
-                    .cc-calendar .calendar__yearsTable_y917l:not(.calendar__responsive_y917l) .calendar__button_y917l:nth-child(3n) {
+                    .cc-calendar .calendar__yearsTable_1d037:not(.calendar__responsive_1d037) .calendar__button_1d037:nth-child(3n) {
                         margin-right: var(--gap-2xs);
                     }
 
-                    .cc-calendar .calendar__yearsTable_y917l:not(.calendar__responsive_y917l) .calendar__button_y917l:nth-child(2n) {
+                    .cc-calendar .calendar__yearsTable_1d037:not(.calendar__responsive_1d037) .calendar__button_1d037:nth-child(2n) {
                         margin-right: 0;
                     }
-                } .cc-calendar .calendar__inner_y917l {
+                } .cc-calendar .calendar__inner_1d037 {
         position: relative;
         overflow: hidden;
-    } .cc-calendar .calendar__button_y917l {
+    } .cc-calendar .calendar__button_1d037 {
         margin-right: var(--gap-2xs);
         margin-bottom: var(--gap-xs)
-    } .cc-calendar .calendar__button_y917l:nth-child(3n) {
+    } .cc-calendar .calendar__button_1d037:nth-child(3n) {
             margin-right: 0;
-        } @media (max-width: 374px) { .cc-calendar .calendar__button_y917l {
+        } @media (max-width: 374px) { .cc-calendar .calendar__button_1d037 {
             height: 36px
     }
         }

package/calendar/modern/desktop/Component.desktop.d.ts

@@ -0,0 +1,117 @@
+/// <reference types="react" />
+import React from 'react';
+import { MouseEvent } from "react";
+import { DayAddons, SelectorView, View } from "../typings";
+type CalendarDesktopProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс шапки десктопного календаря
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс контента десктопного календаря
+     */
+    contentClassName?: string;
+    /**
+     * Вид по умолчанию (выбор дней, месяцев, лет)
+     */
+    defaultView?: View;
+    /**
+     * Вид шапки — месяц и год или только месяц
+     */
+    selectorView?: SelectorView;
+    /**
+     * Выбранная дата (timestamp)
+     */
+    value?: number;
+    /**
+     * Открытый месяц (timestamp)
+     */
+    month?: number;
+    /**
+     * Месяц, открытый по умолчанию (timestamp)
+     */
+    defaultMonth?: number;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+    /**
+     * Начало выделенного периода (timestamp)
+     */
+    selectedFrom?: number;
+    /**
+     * Конец выделенного периода (timestamp)
+     */
+    selectedTo?: number;
+    /**
+     * Индикатор, что выбран полный период
+     */
+    rangeComplete?: boolean;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список отключенных для выбора дней.
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    holidays?: Array<Date | number>;
+    /**
+     * Обработчик изменения месяца (или года)
+     */
+    onMonthChange?: (month: number) => void;
+    /**
+     * Обработчик выбора даты
+     */
+    onChange?: (date?: number) => void;
+    /**
+     * Обработчик нажатия на кнопку месяца
+     */
+    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на кнопку года
+     */
+    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Нужно ли рендерить шапку календаря
+     */
+    hasHeader?: boolean;
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
+    /**
+     * Дополнительный контент под числом
+     */
+    dayAddons?: DayAddons[];
+    /**
+     * Форма ячейки дня
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Отображать ли текущий год, если selectorView 'month-only'
+     * @default false
+     */
+    showCurrentYearSelector?: boolean;
+};
+declare const CalendarDesktop: React.ForwardRefExoticComponent<CalendarDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export { CalendarDesktopProps, CalendarDesktop };

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

@@ -0,0 +1,160 @@
+import React, { forwardRef, useState, useRef, useMemo } from 'react';
+import cn from 'classnames';
+import endOfDay from 'date-fns/endOfDay';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import { hooks } from '../../../shared/modern';
+import { useLayoutEffect_SAFE_FOR_SSR, useDidUpdateEffect } from '@alfalab/hooks';
+import { DaysTable } from '../components/days-table/Component.js';
+import { Header } from '../components/header/Component.js';
+import { MonthYearHeader } from '../components/month-year-header/Component.js';
+import { MonthsTable } from '../components/months-table/Component.js';
+import { PeriodSlider } from '../components/period-slider/Component.js';
+import 'date-fns/addDays';
+import 'date-fns/addMonths';
+import 'date-fns/addQuarters';
+import 'date-fns/addWeeks';
+import 'date-fns/addYears';
+import 'date-fns/endOfMonth';
+import 'date-fns/endOfQuarter';
+import 'date-fns/endOfWeek';
+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/startOfWeek';
+import 'date-fns/startOfYear';
+import { limitDate } from '../utils.js';
+import { YearsTable } from '../components/years-table/Component.js';
+import { useCalendar } from '../useCalendar.js';
+import 'react-transition-group';
+import 'date-fns/isEqual';
+import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isSameDay';
+import 'date-fns/isWithinInterval';
+import '../../../button/modern/desktop';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '../components/select-button/Component.js';
+import 'date-fns/isSameMonth';
+import 'date-fns/isThisMonth';
+import '../../../icon-button/modern';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
+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';
+import 'date-fns/min';
+import 'date-fns/parse';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import 'date-fns/isSameYear';
+import 'date-fns/isThisYear';
+import 'react-merge-refs';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
+import '../components/period-slider/utils.js';
+
+const styles = {"component":"calendar__component_1dvtr","responsive":"calendar__responsive_1dvtr","period":"calendar__period_1dvtr","monthYear":"calendar__monthYear_1dvtr","container":"calendar__container_1dvtr","customScrollbar":"calendar__customScrollbar_1dvtr","nativeScrollbar":"calendar__nativeScrollbar_1dvtr","sixWeeks":"calendar__sixWeeks_1dvtr"};
+require('./desktop.css');
+
+const { useCustomWebkitScrollbar } = hooks;
+const CalendarDesktop = forwardRef(({ className, headerClassName, contentClassName, defaultView = 'days', selectorView = 'full', value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, holidays, onChange, onMonthChange, onMonthClick, onYearClick, onPeriodClick, dataTestId, hasHeader = true, responsive, dayAddons, shape = 'rounded', showCurrentYearSelector = false, }, ref) => {
+    const [view, setView] = useState(defaultView);
+    const [scrolled, setScrolled] = useState(false);
+    const scrollableNodeRef = useRef(null);
+    const firstUpdate = useRef(true);
+    const selected = useMemo(() => (value ? new Date(value) : undefined), [value]);
+    const defaultMonth = useMemo(() => startOfMonth(selected ||
+        limitDate(defaultMonthTimestamp, minDateTimestamp, maxDateTimestamp)), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const month = useMemo(() => (monthTimestamp ? new Date(monthTimestamp) : undefined), [monthTimestamp]);
+    const minDate = useMemo(() => (minDateTimestamp ? startOfDay(minDateTimestamp) : undefined), [minDateTimestamp]);
+    const maxDate = useMemo(() => (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined), [maxDateTimestamp]);
+    const { activeMonth, weeks, months, years, canSetPrevMonth, canSetNextMonth, setMonthByDate, setPrevMonth, setNextMonth, highlighted, getDayProps, getMonthProps, getYearProps, getRootProps, } = useCalendar({
+        month,
+        defaultMonth,
+        view,
+        minDate,
+        maxDate,
+        selected,
+        offDays,
+        events,
+        holidays,
+        dayAddons,
+        onChange,
+        onMonthChange,
+    });
+    const toggleView = (newView) => {
+        if (scrollableNodeRef.current)
+            scrollableNodeRef.current.scrollTop = 0;
+        setView(view === newView ? 'days' : newView);
+    };
+    const handleScroll = (event) => setScrolled(event.currentTarget.scrollTop > 0);
+    const handlePrevArrowClick = () => {
+        // TODO: Что должны делать стрелки при view !== days?
+        setPrevMonth();
+    };
+    const handleNextArrowClick = () => setNextMonth();
+    const handleMonthClick = (event) => {
+        toggleView('months');
+        if (onMonthClick) {
+            onMonthClick(event);
+        }
+    };
+    const handleYearClick = (event) => {
+        toggleView('years');
+        if (onYearClick) {
+            onYearClick(event);
+        }
+    };
+    useLayoutEffect_SAFE_FOR_SSR(() => {
+        if (view === 'years') {
+            const listNode = scrollableNodeRef.current;
+            const selectedYearNode = listNode?.querySelector('button[tabIndex="0"]');
+            if (listNode && selectedYearNode) {
+                const topIndent = listNode.clientHeight / 2 - selectedYearNode.clientHeight / 2;
+                listNode.scrollTop = selectedYearNode.offsetTop - topIndent;
+                setScrolled(listNode.scrollTop > 0);
+            }
+        }
+    }, [view]);
+    useLayoutEffect_SAFE_FOR_SSR(() => {
+        if (firstUpdate.current) {
+            firstUpdate.current = false;
+        }
+        else {
+            toggleView('days');
+        }
+    }, [activeMonth]);
+    useDidUpdateEffect(() => {
+        setScrolled(false);
+    }, [view]);
+    useDidUpdateEffect(() => {
+        const newMonth = value && startOfMonth(value);
+        if (newMonth && newMonth.getTime() !== activeMonth.getTime()) {
+            setMonthByDate(newMonth);
+        }
+    }, [value]);
+    const shouldUseCustomScrollbar = useCustomWebkitScrollbar();
+    return (React.createElement("div", { ...getRootProps({ ref }), className: cn('cc-calendar', styles.component, className, {
+            [styles.sixWeeks]: weeks.length === 6,
+            [styles.responsive]: responsive,
+        }), "data-test-id": dataTestId },
+        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled, className: headerClassName }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
+        React.createElement("div", { ref: scrollableNodeRef, className: cn(styles.container, {
+                [styles.customScrollbar]: view === 'years' && shouldUseCustomScrollbar,
+                [styles.nativeScrollbar]: view === 'years' && !shouldUseCustomScrollbar,
+            }, styles[view], contentClassName), onScroll: handleScroll },
+            view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape, withTransition: selectorView === 'month-only' })),
+            view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),
+            view === 'years' && (React.createElement(YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, responsive: responsive })))));
+});
+
+export { CalendarDesktop };

package/calendar/modern/desktop/desktop.css

@@ -0,0 +1,137 @@
+/* hash: 1zu94 */
+:root {
+} /* deprecated */ :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 */
+    --color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
+    --color-light-graphic-primary-alpha-60: rgba(14, 14, 14, 0.6);
+} :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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-circle: 50%;
+} :root {
+    --gap-2xs: 4px;
+    --gap-m: 16px;
+} :root {
+} :root {
+} :root {
+    --calendar-height: 344px;
+    --calendar-width: 344px;
+    --calendar-inner-width: 280px;
+    --calendar-mobile-inner-width: 256px;
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* holidays */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+} .calendar__component_1dvtr {
+    width: var(--calendar-width);
+    height: var(--calendar-height);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    outline: none
+} @media (max-width: 374px) { .calendar__component_1dvtr {
+        align-items: center;
+        width: 100%
+}
+    } .calendar__component_1dvtr.calendar__responsive_1dvtr {
+        width: 100%
+    } .calendar__component_1dvtr.calendar__responsive_1dvtr .calendar__period_1dvtr {
+            width: 100%;
+        } .calendar__component_1dvtr.calendar__responsive_1dvtr .calendar__monthYear_1dvtr {
+            width: 100%;
+        } .calendar__component_1dvtr.calendar__responsive_1dvtr .calendar__container_1dvtr {
+            width: 100%;
+        } .calendar__container_1dvtr {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 var(--gap-m) var(--gap-m);
+    box-sizing: border-box;
+    flex-grow: 1;
+    overflow: hidden
+} .calendar__container_1dvtr.calendar__customScrollbar_1dvtr {
+        overflow: auto;
+        cursor: auto;
+    } .calendar__container_1dvtr.calendar__customScrollbar_1dvtr::-webkit-scrollbar {
+        width: 12px;
+        height: 12px;
+    } .calendar__container_1dvtr.calendar__customScrollbar_1dvtr::-webkit-scrollbar-track {
+        background-color: transparent;
+    } .calendar__container_1dvtr.calendar__customScrollbar_1dvtr::-webkit-scrollbar-track-piece {
+        background-color: transparent;
+    } .calendar__container_1dvtr.calendar__customScrollbar_1dvtr::-webkit-scrollbar-thumb {
+        background-color: var(--color-light-graphic-primary-alpha-30);
+        border-color: transparent;
+        border-style: solid;
+        border-width: 4px;
+        background-clip: padding-box;
+    } .calendar__container_1dvtr.calendar__customScrollbar_1dvtr::-webkit-scrollbar-thumb:vertical {
+        border-radius: var(--border-radius-circle) / 6px;
+        min-height: 40px;
+    } .calendar__container_1dvtr.calendar__customScrollbar_1dvtr::-webkit-scrollbar-thumb:vertical:hover {
+        border-radius: var(--border-radius-circle) / 7px;
+        border-width: 4px 3px;
+    } .calendar__container_1dvtr.calendar__customScrollbar_1dvtr::-webkit-scrollbar-thumb:horizontal {
+        border-radius: 6px / var(--border-radius-circle);
+        min-width: 40px;
+    } .calendar__container_1dvtr.calendar__customScrollbar_1dvtr::-webkit-scrollbar-thumb:horizontal:hover {
+        border-radius: 7px / var(--border-radius-circle);
+        border-width: 3px 4px;
+    } .calendar__container_1dvtr.calendar__customScrollbar_1dvtr::-webkit-scrollbar-thumb:active {
+        background-color: var(--color-light-graphic-primary-alpha-60);
+    } .calendar__container_1dvtr.calendar__customScrollbar_1dvtr::-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_1dvtr.calendar__customScrollbar_1dvtr::-webkit-scrollbar-button,
+    .calendar__container_1dvtr.calendar__customScrollbar_1dvtr::-webkit-scrollbar-corner {
+        display: none;
+    } .calendar__container_1dvtr.calendar__customScrollbar_1dvtr {
+
+        display: block;
+        padding-right: var(--gap-2xs);
+        overflow: hidden auto;
+        scrollbar-gutter: stable;
+    } .calendar__container_1dvtr.calendar__nativeScrollbar_1dvtr {
+        overflow: hidden auto;
+    } @media (max-width: 374px) { .calendar__container_1dvtr {
+        width: 288px
+}
+    } .calendar__sixWeeks_1dvtr {
+    height: 388px;
+} .calendar__period_1dvtr {
+    width: var(--calendar-inner-width)
+} @media (max-width: 374px) { .calendar__period_1dvtr {
+        justify-content: space-between;
+        width: var(--calendar-mobile-inner-width);
+        margin: 0 auto
+}
+    } .calendar__monthYear_1dvtr {
+    width: var(--calendar-inner-width)
+} @media (max-width: 374px) { .calendar__monthYear_1dvtr {
+        justify-content: space-between;
+        width: var(--calendar-mobile-inner-width);
+        margin: 0 auto
+}
+    }

package/calendar/modern/desktop/index.d.ts

@@ -1,2 +1,2 @@
-export * from "../Component.desktop";
+export * from "./Component.desktop";
 export {};

package/calendar/modern/desktop/index.js

@@ -1,4 +1,4 @@
-export { CalendarDesktop } from '../Component.desktop.js';
+export { CalendarDesktop } from './Component.desktop.js';
 import 'react';
 import 'classnames';
 import 'date-fns/endOfDay';

package/calendar/modern/index.js

@@ -12,7 +12,7 @@ import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/modern/mobile';
 import '../../modal/modern/mobile';
-import './Component.desktop.js';
+import './desktop/Component.desktop.js';
 import '../../shared/modern';
 import '@alfalab/hooks';
 import './components/days-table/Component.js';

package/calendar/modern/mobile/index.js

@@ -10,7 +10,7 @@ import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../../button/modern/mobile';
 import '../../../modal/modern/mobile';
-import '../Component.desktop.js';
+import '../desktop/Component.desktop.js';
 import '../../../shared/modern';
 import '@alfalab/hooks';
 import '../components/days-table/Component.js';

package/calendar-input/Component.responsive.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var hooks = require('@alfalab/hooks');
-var Component_desktop = require('./Component.desktop.js');
-var Component_mobile = require('./Component.mobile.js');
+var desktop_Component_desktop = require('./desktop/Component.desktop.js');
+var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 require('../calendar/desktop');
 require('./components/calendar-input/Component.js');
 require('react-merge-refs');
@@ -33,7 +33,7 @@ var CalendarInputResponsive = React.forwardRef(function (_a, ref) {
         ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
         ['desktop', "(min-width: ".concat(breakpoint, "px)")],
     ], 'desktop')[0];
-    return view === 'desktop' ? (React__default.default.createElement(Component_desktop.CalendarInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(Component_mobile.CalendarInputMobile, tslib.__assign({}, restProps, { ref: ref })));
+    return view === 'desktop' ? (React__default.default.createElement(desktop_Component_desktop.CalendarInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(mobile_Component_mobile.CalendarInputMobile, tslib.__assign({}, restProps, { ref: ref })));
 });
 
 exports.CalendarInputResponsive = CalendarInputResponsive;

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

@@ -19,7 +19,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"calendar-input__component_a1sh2","block":"calendar-input__block_a1sh2","calendarContainer":"calendar-input__calendarContainer_a1sh2","calendarResponsive":"calendar-input__calendarResponsive_a1sh2","calendarIcon":"calendar-input__calendarIcon_a1sh2","nativeInput":"calendar-input__nativeInput_a1sh2"};
+var styles = {"component":"calendar-input__component_17c3e","block":"calendar-input__block_17c3e","calendarContainer":"calendar-input__calendarContainer_17c3e","calendarResponsive":"calendar-input__calendarResponsive_17c3e","calendarIcon":"calendar-input__calendarIcon_17c3e","nativeInput":"calendar-input__nativeInput_17c3e"};
 require('./index.css');
 
 var CalendarInput = React.forwardRef(function (_a, ref) {

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

@@ -43,31 +43,31 @@
 } :root {
     --calendar-input-icon-color: var(--color-light-graphic-primary);
     --calendar-input-popover-border-radius: var(--border-radius-m);
-} .calendar-input__component_a1sh2 {
+} .calendar-input__component_17c3e {
     display: inline-block;
     outline: none;
     position: relative;
-} .calendar-input__block_a1sh2 {
+} .calendar-input__block_17c3e {
     width: 100%;
-} .calendar-input__calendarContainer_a1sh2 {
+} .calendar-input__calendarContainer_17c3e {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .calendar-input__calendarContainer_a1sh2 {
+} @media (max-width: 374px) { .calendar-input__calendarContainer_17c3e {
         width: 100%;
         min-width: 288px
 }
-    } .calendar-input__calendarResponsive_a1sh2 {
+    } .calendar-input__calendarResponsive_17c3e {
     width: var(--calendar-width);
-} .calendar-input__calendarIcon_a1sh2 {
+} .calendar-input__calendarIcon_17c3e {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
-} .calendar-input__calendarIcon_a1sh2:not(:only-child) {
+} .calendar-input__calendarIcon_17c3e:not(:only-child) {
         margin-right: var(--gap-2xs);
-    } .calendar-input__nativeInput_a1sh2 {
+    } .calendar-input__nativeInput_17c3e {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -76,8 +76,8 @@
     height: 100%;
     appearance: none;
     z-index: 1
-} .calendar-input__nativeInput_a1sh2::-webkit-calendar-picker-indicator {
+} .calendar-input__nativeInput_17c3e::-webkit-calendar-picker-indicator {
         display: none;
-    } .calendar-input__nativeInput_a1sh2::-webkit-inner-spin-button {
+    } .calendar-input__nativeInput_17c3e::-webkit-inner-spin-button {
         display: none;
     }

package/calendar-input/cssm/Component.responsive.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var hooks = require('@alfalab/hooks');
-var Component_desktop = require('./Component.desktop.js');
-var Component_mobile = require('./Component.mobile.js');
+var desktop_Component_desktop = require('./desktop/Component.desktop.js');
+var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 require('../../calendar/cssm/desktop');
 require('./components/calendar-input/Component.js');
 require('react-merge-refs');
@@ -34,7 +34,7 @@ var CalendarInputResponsive = React.forwardRef(function (_a, ref) {
         ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
         ['desktop', "(min-width: ".concat(breakpoint, "px)")],
     ], 'desktop')[0];
-    return view === 'desktop' ? (React__default.default.createElement(Component_desktop.CalendarInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(Component_mobile.CalendarInputMobile, tslib.__assign({}, restProps, { ref: ref })));
+    return view === 'desktop' ? (React__default.default.createElement(desktop_Component_desktop.CalendarInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(mobile_Component_mobile.CalendarInputMobile, tslib.__assign({}, restProps, { ref: ref })));
 });
 
 exports.CalendarInputResponsive = CalendarInputResponsive;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+import { CalendarInputProps } from "../components/calendar-input/Component";
+type CalendarInputDesktopProps = Omit<CalendarInputProps, 'view'>;
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+declare const CalendarInputDesktop: React.ForwardRefExoticComponent<CalendarInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
+export { CalendarInputDesktopProps, CalendarInputDesktop };

package/calendar-input/cssm/desktop/Component.desktop.js

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var desktop = require('../../../calendar/cssm/desktop');
+var components_calendarInput_Component = require('../components/calendar-input/Component.js');
+require('react-merge-refs');
+require('classnames');
+require('../../../calendar/cssm/shared');
+require('../../../date-input/cssm');
+require('../../../popover/cssm');
+require('@alfalab/icons-glyph/CalendarMIcon');
+require('../utils.js');
+require('date-fns/format');
+require('date-fns/isSameDay');
+require('date-fns/parse');
+require('../components/calendar-input/index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+var CalendarInputDesktop = React.forwardRef(function (props, ref) { return React__default.default.createElement(components_calendarInput_Component.CalendarInput, tslib.__assign({ Calendar: desktop.CalendarDesktop }, props, { ref: ref })); });
+
+exports.CalendarInputDesktop = CalendarInputDesktop;