@alfalab/core-components 38.3.0 → 38.4.0

package/calendar/esm/desktop.css

@@ -40,25 +40,25 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_11nln {
+} .calendar__component_1sfib {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     outline: none
-} @media (max-width: 374px) { .calendar__component_11nln {
+} @media (max-width: 374px) { .calendar__component_1sfib {
         align-items: center;
         width: 100%;
         height: 320px
 }
-    } .calendar__component_11nln.calendar__responsive_11nln {
+    } .calendar__component_1sfib.calendar__responsive_1sfib {
         width: 100%
-    } .calendar__component_11nln.calendar__responsive_11nln .calendar__period_11nln {
+    } .calendar__component_1sfib.calendar__responsive_1sfib .calendar__period_1sfib {
             width: 100%;
-        } .calendar__component_11nln.calendar__responsive_11nln .calendar__monthYear_11nln {
+        } .calendar__component_1sfib.calendar__responsive_1sfib .calendar__monthYear_1sfib {
             width: 100%;
-        } .calendar__container_11nln {
+        } .calendar__container_1sfib {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -66,24 +66,24 @@
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} @media (max-width: 374px) { .calendar__container_11nln {
+} @media (max-width: 374px) { .calendar__container_1sfib {
         width: 288px
 }
-    } .calendar__sixWeeks_11nln {
+    } .calendar__sixWeeks_1sfib {
     height: 379px
-} @media (max-width: 374px) { .calendar__sixWeeks_11nln {
+} @media (max-width: 374px) { .calendar__sixWeeks_1sfib {
         height: 360px
 }
-    } .calendar__period_11nln {
+    } .calendar__period_1sfib {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__period_11nln {
+} @media (max-width: 374px) { .calendar__period_1sfib {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
-    } .calendar__monthYear_11nln {
+    } .calendar__monthYear_1sfib {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__monthYear_11nln {
+} @media (max-width: 374px) { .calendar__monthYear_1sfib {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto

package/calendar/esm/desktop.js

@@ -1,4 +1,5 @@
 export { CalendarDesktop } from './Component.desktop.js';
+import 'tslib';
 import 'react';
 import 'classnames';
 import 'date-fns/endOfDay';
@@ -56,7 +57,6 @@ import 'date-fns/isThisYear';
 import 'react-merge-refs';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
-import './tslib.es6-57b38314.js';
 import './utils.js';
 import './useCalendar.js';
 import './components/period-slider/utils.js';

package/calendar/esm/index.js

@@ -1,11 +1,11 @@
 export { CalendarDesktop as Calendar } from './Component.desktop.js';
-export { CalendarResponsive } from './Component.responsive.js';
+export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-f62ef4af.js';
 export { usePeriod, usePeriodWithReset } from './usePeriod.js';
 export { useCalendar } from './useCalendar.js';
 export { PeriodSlider } from './components/period-slider/Component.js';
 export { shiftValues } from './components/period-slider/utils.js';
-export { CalendarMobile } from './components/calendar-mobile/Component.js';
 export { DATE_FORMAT, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS, dateInLimits, limitDate, monthName, russianWeekDay } from './utils.js';
+import 'tslib';
 import 'react';
 import 'classnames';
 import 'date-fns/endOfDay';
@@ -66,4 +66,3 @@ import 'react-virtuoso';
 import '@juggle/resize-observer';
 import '../../modal/esm/mobile';
 import 'date-fns/differenceInDays';
-import './tslib.es6-57b38314.js';

package/calendar/esm/mobile.js

@@ -1,5 +1,7 @@
-export { CalendarMobile } from './components/calendar-mobile/Component.js';
+export { a as CalendarMobile } from './Component.responsive-f62ef4af.js';
+import 'tslib';
 import 'react';
+import '@alfalab/hooks';
 import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
@@ -9,7 +11,6 @@ import 'date-fns/startOfMonth';
 import '../../button/esm';
 import '../../modal/esm/mobile';
 import './Component.desktop.js';
-import '@alfalab/hooks';
 import './components/days-table/Component.js';
 import 'react-transition-group';
 import 'date-fns/isEqual';
@@ -61,7 +62,6 @@ import 'react-merge-refs';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
 import 'date-fns/differenceInDays';
-import './tslib.es6-57b38314.js';
 import './useCalendar.js';
 import './utils.js';
 import './components/period-slider/utils.js';

package/calendar/esm/responsive.d.ts

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

package/calendar/esm/responsive.js

@@ -1,11 +1,16 @@
-export { CalendarResponsive } from './Component.responsive.js';
+export { C as CalendarResponsive } from './Component.responsive-f62ef4af.js';
+import 'tslib';
 import 'react';
 import '@alfalab/hooks';
-import './Component.desktop.js';
+import 'react-virtuoso';
+import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
+import '../../button/esm';
+import '../../modal/esm/mobile';
+import './Component.desktop.js';
 import './components/days-table/Component.js';
 import 'react-transition-group';
 import 'date-fns/isEqual';
@@ -13,7 +18,6 @@ import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
-import '../../button/esm';
 import 'date-fns/addDays';
 import 'date-fns/addMonths';
 import 'date-fns/eachDayOfInterval';
@@ -57,12 +61,7 @@ import 'date-fns/isThisYear';
 import 'react-merge-refs';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
-import './components/calendar-mobile/Component.js';
-import 'react-virtuoso';
-import '@juggle/resize-observer';
-import '../../modal/esm/mobile';
 import 'date-fns/differenceInDays';
-import './tslib.es6-57b38314.js';
-import './utils.js';
 import './useCalendar.js';
+import './utils.js';
 import './components/period-slider/utils.js';

package/calendar/index.js

@@ -1,12 +1,11 @@
 var Component_desktop = require('./Component.desktop.js');
-var Component_responsive = require('./Component.responsive.js');
+var components_calendarMobile_Component = require('./Component.responsive-df4a4d24.js');
 var usePeriod = require('./usePeriod.js');
 var useCalendar = require('./useCalendar.js');
 var components_periodSlider_Component = require('./components/period-slider/Component.js');
 var components_periodSlider_utils = require('./components/period-slider/utils.js');
-var components_calendarMobile_Component = require('./components/calendar-mobile/Component.js');
 var utils = require('./utils.js');
-require('./tslib.es6-ba2eecb6.js');
+require('tslib');
 require('react');
 require('classnames');
 require('date-fns/endOfDay');
@@ -71,13 +70,13 @@ require('date-fns/differenceInDays');
 
 
 exports.Calendar = Component_desktop.CalendarDesktop;
-exports.CalendarResponsive = Component_responsive.CalendarResponsive;
+exports.CalendarMobile = components_calendarMobile_Component.CalendarMobile;
+exports.CalendarResponsive = components_calendarMobile_Component.CalendarResponsive;
 exports.usePeriod = usePeriod.usePeriod;
 exports.usePeriodWithReset = usePeriod.usePeriodWithReset;
 exports.useCalendar = useCalendar.useCalendar;
 exports.PeriodSlider = components_periodSlider_Component.PeriodSlider;
 exports.shiftValues = components_periodSlider_utils.shiftValues;
-exports.CalendarMobile = components_calendarMobile_Component.CalendarMobile;
 exports.DATE_FORMAT = utils.DATE_FORMAT;
 exports.DAYS_IN_WEEK = utils.DAYS_IN_WEEK;
 exports.MONTHS = utils.MONTHS;

package/calendar/mobile.js

@@ -1,6 +1,7 @@
-var components_calendarMobile_Component = require('./components/calendar-mobile/Component.js');
-require('./tslib.es6-ba2eecb6.js');
+var components_calendarMobile_Component = require('./Component.responsive-df4a4d24.js');
+require('tslib');
 require('react');
+require('@alfalab/hooks');
 require('react-virtuoso');
 require('@juggle/resize-observer');
 require('classnames');
@@ -10,7 +11,6 @@ require('date-fns/startOfMonth');
 require('../button');
 require('../modal/mobile');
 require('./Component.desktop.js');
-require('@alfalab/hooks');
 require('./components/days-table/Component.js');
 require('react-transition-group');
 require('date-fns/isEqual');

package/calendar/modern/Component.desktop.js

@@ -59,7 +59,7 @@ import 'date-fns/setYear';
 import 'date-fns/subYears';
 import './components/period-slider/utils.js';
 
-const styles = {"component":"calendar__component_11nln","responsive":"calendar__responsive_11nln","period":"calendar__period_11nln","monthYear":"calendar__monthYear_11nln","container":"calendar__container_11nln","sixWeeks":"calendar__sixWeeks_11nln"};
+const styles = {"component":"calendar__component_1sfib","responsive":"calendar__responsive_1sfib","period":"calendar__period_1sfib","monthYear":"calendar__monthYear_1sfib","container":"calendar__container_1sfib","sixWeeks":"calendar__sixWeeks_1sfib"};
 require('./desktop.css');
 
 const CalendarDesktop = 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) => {

package/calendar/modern/Component.responsive-5a84f08b.d.ts

@@ -0,0 +1,443 @@
+/// <reference types="react" />
+/// <reference types="react-transition-group" />
+import React from "react";
+import { ReactNode, FC, KeyboardEvent, MouseEvent, MutableRefObject, Ref, ButtonHTMLAttributes, ElementType, RefObject } from "react";
+import { CalendarDesktopProps } from "./Component.desktop";
+import { TransitionProps } from "react-transition-group/Transition";
+import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+import { IconButtonProps } from "../../icon-button";
+import { CalendarMobileProps as CalendarMobileProps$0 } from "./components/calendar-mobile/index";
+type CalendarMobileProps = CalendarDesktopProps & {
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Заголовок календаря
+     */
+    title?: string;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: () => void;
+    /**
+     * Количество лет для генерации в обе стороны от текущего года
+     */
+    yearsAmount?: number;
+    /**
+     * Нужно ли рендерить шапку
+     */
+    hasHeader?: boolean;
+    /**
+     * Разрешить выбор из недозаполненного диапазона дат.
+     */
+    allowSelectionFromEmptyRange?: boolean;
+};
+declare const CalendarMobile: React.ForwardRefExoticComponent<CalendarDesktopProps & {
+    open: boolean;
+    title?: string | undefined;
+    onClose?: (() => void) | undefined;
+    yearsAmount?: number | undefined;
+    hasHeader?: boolean | undefined;
+    allowSelectionFromEmptyRange?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+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;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+type PortalProps = {
+    /** Контент */
+    children?: ReactNode;
+    /**
+     * Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
+     */
+    getPortalContainer?: () => Element;
+    /**
+     * Немедленно отрендерить дочерние элементы (false - контент будет отрендерен на след. рендер).
+     */
+    immediateMount?: boolean;
+};
+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;
+    /**
+     * Отключает блокировку скролла при открытии модального окна
+     * @default false
+     */
+    disableBlockingScroll?: 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"];
+};
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+declare const BaseModalContext: React.Context<BaseModalContext>;
+type ModalDesktopProps = BaseModalProps & {
+    /**
+     * Ширина модального окна
+     * @default "m"
+     */
+    size?: "s" | "m" | "l" | "xl" | "fullscreen";
+    /**
+     * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
+     */
+    fullscreen?: boolean;
+    /**
+     * Фиксирует позицию модального окна после открытия,
+     * предотвращая скачки, если контент внутри будет меняться
+     */
+    fixedPosition?: boolean;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+type ModalMobileProps = Omit<ModalDesktopProps, "size" | "fixedPosition" | "fullscreen">;
+type View = "desktop" | "mobile";
+type TResponsiveModalContext = {
+    view: View;
+    size: NonNullable<ModalDesktopProps["size"]>;
+};
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Растягивает контент на всю высоту
+     */
+    flex?: boolean;
+};
+type HeaderProps = {
+    /**
+     * Контент шапки
+     */
+    children?: ReactNode;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для контента
+     */
+    contentClassName?: string;
+    /**
+     * Заголовок шапки
+     */
+    title?: string;
+    /**
+     * Выравнивание заголовка
+     */
+    align?: "left" | "center";
+    /**
+     * Обрезать ли заголовок
+     */
+    trim?: boolean;
+    /**
+     * Фиксирует шапку
+     */
+    sticky?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: "start" | "center" | "space-between" | "column";
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+};
+type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Позиция крестика
+     */
+    align?: "left" | "right";
+    /**
+     * Размер кнопки
+     */
+    size?: IconButtonProps["size"];
+    /**
+     * Фиксирует крестик
+     */
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<ContentProps>;
+    Header: React.FC<HeaderProps>;
+    Footer: React.FC<FooterProps>;
+    Closer: React.FC<CloserProps>;
+};
+declare const Content: FC<ContentProps>;
+declare const Modal: React.ForwardRefExoticComponent<BaseModalProps & {
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    fullscreen?: boolean | undefined;
+    fixedPosition?: boolean | undefined;
+    hasCloser?: boolean | undefined;
+} & {
+    view: View;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
+declare const ModalContext: import("react").Context<BaseModalContext>;
+/**
+ * Набор констант для 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;
+}
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare const isClient: () => boolean;
+type ResponsiveCalendarProps = CalendarDesktopProps & CalendarMobileProps$0 & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+type CalendarMedia = 'desktop' | 'mobile';
+declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDesktopProps & {
+    open: boolean;
+    title?: string | undefined;
+    onClose?: (() => void) | undefined;
+    yearsAmount?: number | undefined;
+    hasHeader?: boolean | undefined;
+    allowSelectionFromEmptyRange?: boolean | undefined;
+} & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { CalendarMobileProps, CalendarMobile, ModalMobile, Content, Modal, ResponsiveContext, ModalContext, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore, getDataTestId, isClient, ResponsiveCalendarProps, CalendarMedia, CalendarResponsive };
+export type { SavedStyle };