@alfalab/core-components 27.11.0 → 27.13.1

package/calendar/index-bdb4c6b9.d.ts

@@ -0,0 +1,221 @@
+/// <reference types="react-transition-group" />
+/// <reference types="react" />
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import React from "react";
+import { MouseEvent, KeyboardEvent, ReactNode, Ref, FC, MutableRefObject, RefObject } from "react";
+import { TransitionProps } from "react-transition-group/Transition";
+import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+type PortalProps = {
+    /** Контент */
+    children?: ReactNode;
+    /**
+     * Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
+     */
+    getPortalContainer?: () => Element;
+};
+type BackdropProps = Partial<TransitionProps> & {
+    /**
+     * Прозрачный бэкдроп
+     */
+    invisible?: boolean;
+    /**
+     * Управляет видимостью компонента
+     */
+    open: boolean;
+    /**
+     * Обработчик клика по бэкдропу
+     */
+    onClose?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Классы анимации
+     *
+     * http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames
+     */
+    transitionClassNames?: string | CSSTransitionClassNames;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+type BaseModalProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Компонент бэкдропа
+     */
+    Backdrop?: FC<BackdropProps>;
+    /**
+     * Свойства для Бэкдропа
+     */
+    backdropProps?: Partial<BackdropProps> & Record<string, unknown>;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: PortalProps["getPortalContainer"];
+    /**
+     * Отключает автоматический перевод фокуса на модалку при открытии
+     * @default false
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает ловушку фокуса
+     * @default false
+     */
+    disableFocusLock?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия модалки
+     * @default false
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `callback` при нажатии Escape
+     * @default false
+     */
+    disableEscapeKeyDown?: boolean;
+    /**
+     * Отключает вызов `callback` при клике на бэкдроп
+     * @default false
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * Содержимое модалки всегда в DOM
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительный класс для обертки (Modal)
+     */
+    wrapperClassName?: string;
+    /**
+     * Обработчик скролла контента
+     */
+    scrollHandler?: "wrapper" | "content" | MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Пропсы для анимации (CSSTransition)
+     */
+    transitionProps?: Partial<TransitionProps>;
+    /**
+     * Обработчик события нажатия на бэкдроп
+     */
+    onBackdropClick?: (event: MouseEvent) => void;
+    /**
+     * Обработчик события нажатия на Escape
+     *
+     * Если `disableEscapeKeyDown` - false и модальное окно в фокусе
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
+    /**
+     * Обработчик события onEntered компонента Transition
+     */
+    onMount?: () => void;
+    /**
+     * Обработчик события onExited компонента Transition
+     */
+    onUnmount?: () => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Реф, который должен быть установлен компонентной области
+     */
+    componentRef?: MutableRefObject<HTMLDivElement | null>;
+};
+type BaseModalContext = {
+    hasFooter?: boolean;
+    hasHeader?: boolean;
+    hasScroll?: boolean;
+    headerHighlighted?: boolean;
+    footerHighlighted?: boolean;
+    headerOffset?: number;
+    setHeaderOffset: (offset: number) => void;
+    contentRef: Ref<HTMLElement>;
+    setHasHeader: (exists: boolean) => void;
+    setHasFooter: (exists: boolean) => void;
+    onClose: Required<BaseModalProps>["onClose"];
+};
+declare const BaseModalContext: React.Context<BaseModalContext>;
+declare const BaseModal: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+declare function isScrolledToTop(target: HTMLElement): boolean;
+declare function isScrolledToBottom(target: HTMLElement): boolean;
+declare function hasScrollbar(target: HTMLElement): boolean;
+declare const restoreContainerStyles: (container: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement | undefined) => void;
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+declare const stackingOrder: {
+    FOCUSED: number;
+    DEFAULT: number;
+    POPOVER: number;
+    MODAL: number;
+    TOAST: number;
+};
+declare const StackingContext: import("react").Context<number>;
+type StackProps = {
+    /**
+     * Render prop, в который передается функция.
+     * Функция принимает аргумент со значением z-index из текущего контекста.
+     */
+    children: (value: number) => ReactNode;
+    /**
+     * Исходное значение для z-index.
+     * @default 5
+     */
+    value?: number;
+};
+declare const Stack: FC<StackProps>;
+declare const PORTAL_CONTAINER_ATTRIBUTE = "alfa-portal-container";
+declare const getDefaultPortalContainer: () => Element;
+declare function setRef<T>(ref: RefObject<T> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
+type SavedStyle = {
+    value: string;
+    key: string;
+    el: HTMLElement;
+};
+type RestoreStyle = {
+    container: HTMLElement;
+    modals: number;
+    styles: SavedStyle[];
+};
+declare class ModalStore {
+    private readonly restoreStyles;
+    constructor();
+    getRestoreStyles: () => RestoreStyle[];
+}
+declare const getModalStore: () => ModalStore;
+declare class GlobalStore {
+    private readonly modalStore;
+    constructor();
+    getModalStore: () => ModalStore;
+}
+export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, SavedStyle, getModalStore, GlobalStore };

package/calendar/index.css

@@ -1,4 +1,4 @@
-/* hash: tcnqs */
+/* hash: 1ep5p */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -727,8 +727,18 @@
     --calendar-width: 344px;
     --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
+    --calendar-inner-third-part-width: calc(var(--calendar-inner-width) / 3);
+    --calendar-mobile-inner-half-width: calc(var(--calendar-mobile-inner-width) / 2);
 
     /* Кнопки выбора месяцев и годов */
+    --calendar-select-button-gap: calc(var(--gap-xs) / 3);
+    --calendar-mobile-select-button-gap: calc(var(--gap-2xs) / 2);
+    --calendar-mobile-select-button-width: calc(
+        var(--calendar-mobile-inner-half-width) - var(--calendar-mobile-select-button-gap)
+    );
+    --calendar-select-button-width: calc(
+        var(--calendar-inner-third-part-width) - var(--calendar-select-button-gap)
+    );
     --calendar-select-button-today-border-color: var(--color-light-border-key);
     --calendar-select-button-selected-background: var(--color-light-bg-primary-inverted);
 
@@ -748,6 +758,9 @@
     --calendar-highlighted-color: var(--color-light-text-primary);
     --calendar-highlighted-background: var(--color-light-graphic-quaternary);
 
+    /* holidays */
+    --calendar-holiday-color: var(--color-light-text-accent);
+
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
     --calendar-range-background: var(--color-light-specialbg-component);
@@ -766,7 +779,7 @@
     --calendar-marker-background: var(--color-light-graphic-primary);
     --calendar-marker-selected-background: var(--color-light-graphic-primary-inverted);
 }
-.calendar__component_g1lal {
+.calendar__component_1ptjb {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
@@ -775,13 +788,22 @@
     outline: none
 }
 @media (max-width: 374px) {
-.calendar__component_g1lal {
+.calendar__component_1ptjb {
         align-items: center;
         width: 100%;
         height: 320px
 }
     }
-.calendar__container_g1lal {
+.calendar__component_1ptjb.calendar__responsive_1ptjb {
+        width: 100%
+    }
+.calendar__component_1ptjb.calendar__responsive_1ptjb .calendar__period_1ptjb {
+            width: 100%;
+        }
+.calendar__component_1ptjb.calendar__responsive_1ptjb .calendar__monthYear_1ptjb {
+            width: 100%;
+        }
+.calendar__container_1ptjb {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -791,33 +813,33 @@
     overflow: hidden
 }
 @media (max-width: 374px) {
-.calendar__container_g1lal {
+.calendar__container_1ptjb {
         width: 288px
 }
     }
-.calendar__sixWeeks_g1lal {
+.calendar__sixWeeks_1ptjb {
     height: 379px
 }
 @media (max-width: 374px) {
-.calendar__sixWeeks_g1lal {
+.calendar__sixWeeks_1ptjb {
         height: 360px
 }
     }
-.calendar__period_g1lal {
+.calendar__period_1ptjb {
     width: var(--calendar-inner-width)
 }
 @media (max-width: 374px) {
-.calendar__period_g1lal {
+.calendar__period_1ptjb {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
     }
-.calendar__monthYear_g1lal {
+.calendar__monthYear_1ptjb {
     width: var(--calendar-inner-width)
 }
 @media (max-width: 374px) {
-.calendar__monthYear_g1lal {
+.calendar__monthYear_1ptjb {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto

package/calendar/index.d.ts

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

package/calendar/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-7a423e7f.js');
+require('./tslib.es6-bfef2d75.js');
 require('react');
 require('classnames');
 require('date-fns/startOfDay');
@@ -59,11 +59,14 @@ require('date-fns/setYear');
 require('date-fns/subYears');
 require('react-merge-refs');
 var useCalendar = require('./useCalendar.js');
-var Component = require('./Component.js');
 require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
 require('./components/month-year-header/Component.js');
+var Component = require('./Component.js');
 require('date-fns/differenceInDays');
 var usePeriod = require('./usePeriod.js');
+require('react-virtuoso');
+require('../modal/mobile');
+var components_calendarMobile_Component = require('./components/calendar-mobile/Component.js');
 
 
 
@@ -83,3 +86,4 @@ exports.useCalendar = useCalendar.useCalendar;
 exports.Calendar = Component.Calendar;
 exports.usePeriod = usePeriod.usePeriod;
 exports.usePeriodWithReset = usePeriod.usePeriodWithReset;
+exports.CalendarMobile = components_calendarMobile_Component.CalendarMobile;

package/calendar/modern/Component.d.ts

@@ -15,14 +15,6 @@ type CalendarProps = {
      * Вид шапки — месяц и год или только месяц
      */
     selectorView?: SelectorView;
-    /**
-     * Возможность выбора месяца и года, если selectorView 'month-only'
-     */
-    isMonthAndYearSelectable?: boolean;
-    /**
-     * Отображать ли текущий год, если isMonthAndYearSelectable true
-     */
-    showCurrentYearSelector?: boolean;
     /**
      * Выбранная дата (timestamp)
      */
@@ -60,9 +52,13 @@ type CalendarProps = {
      */
     events?: Array<Date | number>;
     /**
-     * Список выходных
+     * Список отключенных для выбора дней.
      */
     offDays?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    holidays?: Array<Date | number>;
     /**
      * Обработчик изменения месяца (или года)
      */
@@ -70,7 +66,7 @@ type CalendarProps = {
     /**
      * Обработчик выбора даты
      */
-    onChange?: (date: number) => void;
+    onChange?: (date?: number) => void;
     /**
      * Обработчик нажатия на кнопку месяца
      */
@@ -83,6 +79,14 @@ type CalendarProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Нужно ли рендерить шапку календаря
+     */
+    hasHeader?: boolean;
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
 };
 declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
 export { CalendarProps, Calendar };

package/calendar/modern/Component.js

@@ -59,10 +59,10 @@ import { PeriodSlider } from './components/period-slider/Component.js';
 import { useCalendar } from './useCalendar.js';
 import { MonthYearHeader } from './components/month-year-header/Component.js';
 
-var styles = {"component":"calendar__component_g1lal","container":"calendar__container_g1lal","sixWeeks":"calendar__sixWeeks_g1lal","period":"calendar__period_g1lal","monthYear":"calendar__monthYear_g1lal"};
+var styles = {"component":"calendar__component_1ptjb","responsive":"calendar__responsive_1ptjb","period":"calendar__period_1ptjb","monthYear":"calendar__monthYear_1ptjb","container":"calendar__container_1ptjb","sixWeeks":"calendar__sixWeeks_1ptjb"};
 require('./index.css');
 
-const Calendar = forwardRef(({ className, defaultView = 'days', selectorView = 'full', isMonthAndYearSelectable, showCurrentYearSelector, value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, onChange, onMonthChange, onMonthClick, onYearClick, dataTestId, }, ref) => {
+const Calendar = forwardRef(({ className, 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, dataTestId, hasHeader = true, responsive, }, ref) => {
     const [view, setView] = useState(defaultView);
     const [scrolled, setScrolled] = useState(false);
     const selected = useMemo(() => (value ? new Date(value) : undefined), [value]);
@@ -86,6 +86,7 @@ const Calendar = forwardRef(({ className, defaultView = 'days', selectorView = '
         selected,
         offDays,
         events,
+        holidays,
         onChange,
         onMonthChange,
     });
@@ -128,12 +129,13 @@ const Calendar = forwardRef(({ className, defaultView = 'days', selectorView = '
     }, [value]);
     return (React.createElement("div", Object.assign({}, getRootProps({ ref }), { className: cn('cc-calendar', styles.component, className, {
             [styles.sixWeeks]: weeks.length === 6,
+            [styles.responsive]: responsive,
         }), "data-test-id": dataTestId }),
-        React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, isMonthAndYearSelectable: isMonthAndYearSelectable, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onMonthClick: handleMonthClick, onYearClick: handleYearClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick }))),
+        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
         React.createElement("div", { className: cn(styles.container, styles[view]) },
-            view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete })),
-            view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps })),
-            view === 'years' && (React.createElement(YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, onScroll: handleScroll })))));
+            view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive })),
+            view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),
+            view === 'years' && (React.createElement(YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, onScroll: handleScroll, responsive: responsive })))));
 });
 
 export { Calendar };

package/calendar/modern/Context-bdb4c6b9.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseModalContext } from "./index-bdb4c6b9";
+declare const ModalContext: import("react").Context<BaseModalContext>;
+export { ModalContext };

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

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import React from 'react';
+import { CalendarProps } from "../../index";
+type CalendarMobileProps = CalendarProps & {
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Заголовок календаря
+     */
+    title?: string;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: () => void;
+    /**
+     * Количество лет для генерации в обе стороны от текущего года
+     */
+    yearsAmount?: number;
+    /**
+     * Нужно ли рендерить шапку
+     */
+    hasHeader?: boolean;
+    /**
+     * Разрешить выбор из недозаполненного диапазона дат.
+     */
+    allowSelectionFromEmptyRange?: boolean;
+};
+declare const CalendarMobile: React.ForwardRefExoticComponent<CalendarProps & {
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Заголовок календаря
+     */
+    title?: string | undefined;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: (() => void) | undefined;
+    /**
+     * Количество лет для генерации в обе стороны от текущего года
+     */
+    yearsAmount?: number | undefined;
+    /**
+     * Нужно ли рендерить шапку
+     */
+    hasHeader?: boolean | undefined;
+    /**
+     * Разрешить выбор из недозаполненного диапазона дат.
+     */
+    allowSelectionFromEmptyRange?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { CalendarMobileProps, CalendarMobile };