@alfalab/core-components 27.3.0 → 27.5.0-beta.0

package/calendar/esm/components/month-year-header/index.css

@@ -33,44 +33,44 @@
 
     /* marker */
 }
-.calendar__component_r339o {
+.calendar__component_1ngou {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-.calendar__button_r339o {
+.calendar__button_1ngou {
     border-radius: var(--border-radius-s);
 }
-.calendar__month_r339o {
+.calendar__month_1ngou {
     flex-basis: 65%
 }
 @media (max-width: 374px) {
-.calendar__month_r339o {
+.calendar__month_1ngou {
         flex-grow: 1
 }
     }
-.calendar__year_r339o {
+.calendar__year_1ngou {
     flex-basis: 35%;
     margin-left: var(--gap-xs)
 }
 @media (max-width: 374px) {
-.calendar__year_r339o {
+.calendar__year_1ngou {
         width: 90px
 }
     }
-.calendar__buttonContent_r339o {
+.calendar__buttonContent_1ngou {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
-.calendar__upDownIcon_r339o {
+.calendar__upDownIcon_1ngou {
     margin-left: var(--gap-xs)
 }
 @media (max-width: 374px) {
-.calendar__upDownIcon_r339o {
+.calendar__upDownIcon_1ngou {
         margin-left: auto
 }
     }

package/calendar/esm/components/month-year-header/index.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-52f0d8db.js';
+import '../../tslib.es6-374db934.js';
 import 'react';
 import 'classnames';
 import 'date-fns/startOfDay';

package/calendar/esm/components/months-table/Component.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../../tslib.es6-52f0d8db.js';
+import { _ as __assign } from '../../tslib.es6-374db934.js';
 import React, { useCallback } from 'react';
 import 'classnames';
 import 'date-fns/startOfDay';
@@ -28,7 +28,7 @@ import isSameMonth from 'date-fns/isSameMonth';
 import isThisMonth from 'date-fns/isThisMonth';
 import { SelectButton } from '../select-button/Component.js';
 
-var styles = {"monthsTable":"calendar__monthsTable_r1j31","button":"calendar__button_r1j31"};
+var styles = {"monthsTable":"calendar__monthsTable_14iuc","button":"calendar__button_14iuc"};
 require('./index.css');
 
 var MonthsTable = function (_a) {

package/calendar/esm/components/months-table/index.css

@@ -12,7 +12,6 @@
     --gap-xs: 8px;
 }
 :root {
-    --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
@@ -33,38 +32,37 @@
 
     /* marker */
 }
-.calendar__monthsTable_r1j31 {
+.calendar__monthsTable_14iuc {
     display: flex;
     flex-wrap: wrap;
-    width: var(--calendar-inner-width);
-    justify-content: flex-start
+    width: 100%;
+    justify-content: space-between
 }
 @media (max-width: 374px) {
-.calendar__monthsTable_r1j31 {
+.calendar__monthsTable_14iuc {
         width: var(--calendar-mobile-inner-width)
 }
     }
-.calendar__button_r1j31 {
-    width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
-    margin-right: var(--gap-2xs);
+.calendar__button_14iuc {
+    width: 33%;
     margin-bottom: var(--gap-xs)
 }
-.calendar__button_r1j31:nth-child(3n) {
+.calendar__button_14iuc:nth-child(3n) {
         margin-right: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_r1j31 {
+.calendar__button_14iuc {
         width: calc((var(--calendar-mobile-inner-width) / 2) - (var(--gap-2xs) / 2))
 }
 
-        .calendar__button_r1j31:nth-child(3n) {
+        .calendar__button_14iuc:nth-child(3n) {
             margin-right: var(--gap-2xs);
         }
 
-        .calendar__button_r1j31:nth-child(2n) {
+        .calendar__button_14iuc:nth-child(2n) {
             margin-right: 0;
         }
-.calendar__button_r1j31 {
+.calendar__button_14iuc {
 
         height: 36px
 }

package/calendar/esm/components/months-table/index.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-52f0d8db.js';
+import '../../tslib.es6-374db934.js';
 import 'react';
 import 'classnames';
 import 'date-fns/startOfDay';

package/calendar/esm/components/period-slider/Component.js

@@ -37,7 +37,7 @@ import 'date-fns/isYesterday';
 import 'date-fns/startOfQuarter';
 import { getYearSelectorValue, shiftValues, formatPeriod } from './utils.js';
 
-var styles = {"component":"calendar__component_1ava3","period":"calendar__period_1ava3","empty":"calendar__empty_1ava3","arrow":"calendar__arrow_1ava3","full":"calendar__full_1ava3","yearSelectorButton":"calendar__yearSelectorButton_1ava3"};
+var styles = {"component":"calendar__component_1nzog","period":"calendar__period_1nzog","empty":"calendar__empty_1nzog","arrow":"calendar__arrow_1nzog","full":"calendar__full_1nzog","yearSelectorButton":"calendar__yearSelectorButton_1nzog"};
 require('./index.css');
 
 var PeriodSlider = function (_a) {

package/calendar/esm/components/period-slider/index.css

@@ -40,14 +40,14 @@
 
     /* marker */
 }
-.calendar__component_1ava3 {
+.calendar__component_1nzog {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-.calendar__period_1ava3 {
+.calendar__period_1nzog {
     font-family: var(--calendar-month-only-header-font-family);
     font-size: var(--calendar-month-only-header-font-size);
     font-weight: var(--calendar-month-only-header-font-weight);
@@ -55,30 +55,30 @@
     text-align: center
 }
 @media (max-width: 374px) {
-.calendar__period_1ava3 {
+.calendar__period_1nzog {
         width: auto;
         flex-grow: 1
 }
     }
-.calendar__empty_1ava3 {
+.calendar__empty_1nzog {
     color: var(--color-light-text-secondary);
 }
-.calendar__arrow_1ava3 {
+.calendar__arrow_1nzog {
     position: absolute;
     top: 4px
 }
-.calendar__arrow_1ava3:first-child {
+.calendar__arrow_1nzog:first-child {
         left: 0;
     }
-.calendar__arrow_1ava3:last-child {
+.calendar__arrow_1nzog:last-child {
         right: 0;
         transform: rotateY(180deg);
     }
 @media (max-width: 374px) {
-.calendar__full_1ava3 .calendar__arrow_1ava3 {
+.calendar__full_1nzog .calendar__arrow_1nzog {
         display: none
 }
     }
-.calendar__yearSelectorButton_1ava3 {
+.calendar__yearSelectorButton_1nzog {
     margin-left: var(--gap-xs);
 }

package/calendar/esm/components/select-button/Component.d.ts

@@ -19,6 +19,6 @@ declare const SelectButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttr
     /**
      * Вид кнопки
      */
-    view?: "outlined" | "filled" | "default" | "selected" | undefined;
+    view?: "selected" | "outlined" | "filled" | "default" | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { SelectButtonProps, SelectButton };

package/calendar/esm/components/select-button/Component.js

@@ -1,9 +1,9 @@
-import { a as __rest, _ as __assign } from '../../tslib.es6-52f0d8db.js';
+import { a as __rest, _ as __assign } from '../../tslib.es6-374db934.js';
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '../../../../button/esm';
 
-var styles = {"button":"calendar__button_78zoe","filled":"calendar__filled_78zoe","outlined":"calendar__outlined_78zoe","selected":"calendar__selected_78zoe"};
+var styles = {"button":"calendar__button_b0c6d","filled":"calendar__filled_b0c6d","outlined":"calendar__outlined_b0c6d","selected":"calendar__selected_b0c6d"};
 require('./index.css');
 
 var SelectButton = forwardRef(function (_a, ref) {

package/calendar/esm/components/select-button/index.css

@@ -43,7 +43,7 @@
 
     /* marker */
 }
-.calendar__button_78zoe {
+.calendar__button_b0c6d {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -54,28 +54,28 @@
     background-color: transparent;
     border-radius: var(--border-radius-l)
 }
-.calendar__button_78zoe:not(:disabled):hover {
+.calendar__button_b0c6d:not(:disabled):hover {
         background-color: var(--color-light-bg-tertiary);
         color: var(--color-light-text-primary);
     }
-.calendar__button_78zoe.calendar__filled_78zoe {
+.calendar__button_b0c6d.calendar__filled_b0c6d {
         background-color: var(--color-light-bg-tertiary)
     }
-.calendar__button_78zoe.calendar__filled_78zoe:not(:disabled):hover {
+.calendar__button_b0c6d.calendar__filled_b0c6d:not(:disabled):hover {
             background-color: var(--color-light-bg-tertiary-shade-7);
         }
-.calendar__button_78zoe.calendar__outlined_78zoe {
+.calendar__button_b0c6d.calendar__outlined_b0c6d {
         border: 1px solid var(--calendar-select-button-today-border-color);
     }
-.calendar__button_78zoe.calendar__selected_78zoe,
-    .calendar__button_78zoe.calendar__selected_78zoe:disabled {
+.calendar__button_b0c6d.calendar__selected_b0c6d,
+    .calendar__button_b0c6d.calendar__selected_b0c6d:disabled {
         background-color: var(--calendar-select-button-selected-background);
         color: var(--color-light-text-primary-inverted)
     }
-.calendar__button_78zoe.calendar__selected_78zoe:not(:disabled):hover, .calendar__button_78zoe.calendar__selected_78zoe:disabled:not(:disabled):hover {
+.calendar__button_b0c6d.calendar__selected_b0c6d:not(:disabled):hover, .calendar__button_b0c6d.calendar__selected_b0c6d:disabled:not(:disabled):hover {
             background-color: var(--calendar-select-button-selected-background);
             color: var(--color-light-text-primary-inverted);
         }
-.calendar__button_78zoe > * {
+.calendar__button_b0c6d > * {
         flex-grow: 1;
     }

package/calendar/esm/components/select-button/index.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-52f0d8db.js';
+import '../../tslib.es6-374db934.js';
 import 'react';
 import 'classnames';
 import '../../../../button/esm';

package/calendar/esm/components/years-table/Component.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../../tslib.es6-52f0d8db.js';
+import { _ as __assign } from '../../tslib.es6-374db934.js';
 import React, { useRef, useCallback, useLayoutEffect } from 'react';
 import 'classnames';
 import '../../../../button/esm';
@@ -6,7 +6,7 @@ import { SelectButton } from '../select-button/Component.js';
 import isSameYear from 'date-fns/isSameYear';
 import isThisYear from 'date-fns/isThisYear';
 
-var styles = {"yearsTable":"calendar__yearsTable_1gjz5","inner":"calendar__inner_1gjz5","button":"calendar__button_1gjz5"};
+var styles = {"yearsTable":"calendar__yearsTable_plhrj","inner":"calendar__inner_plhrj","button":"calendar__button_plhrj"};
 require('./index.css');
 
 var YearsTable = function (_a) {

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

@@ -12,7 +12,6 @@
     --gap-xs: 8px;
 }
 :root {
-    --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
@@ -33,48 +32,47 @@
 
     /* marker */
 }
-.calendar__yearsTable_1gjz5 {
+.calendar__yearsTable_plhrj {
     overflow: auto;
     overflow-x: hidden;
     width: 100%;
+    justify-content: space-between;
 }
-.calendar__inner_1gjz5 {
+.calendar__inner_plhrj {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
     position: relative;
 
     /* (width - inner-width) / 2 */
-    left: 32px;
     overflow: hidden
 }
 @media (max-width: 374px) {
-.calendar__inner_1gjz5 {
+.calendar__inner_plhrj {
         left: 16px
 }
     }
-.calendar__button_1gjz5 {
+.calendar__button_plhrj {
     /* 3 колонки с равными отступами */
-    width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
-    margin-right: var(--gap-2xs);
+    width: 33%;
     margin-bottom: var(--gap-xs)
 }
-.calendar__button_1gjz5:nth-child(3n) {
+.calendar__button_plhrj:nth-child(3n) {
         margin-right: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_1gjz5 {
+.calendar__button_plhrj {
         width: calc((var(--calendar-mobile-inner-width) / 2) - (var(--gap-2xs) / 2))
 }
 
-        .calendar__button_1gjz5:nth-child(3n) {
+        .calendar__button_plhrj:nth-child(3n) {
             margin-right: var(--gap-2xs);
         }
 
-        .calendar__button_1gjz5:nth-child(2n) {
+        .calendar__button_plhrj:nth-child(2n) {
             margin-right: 0;
         }
-.calendar__button_1gjz5 {
+.calendar__button_plhrj {
 
         height: 36px
 }

package/calendar/esm/components/years-table/index.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-52f0d8db.js';
+import '../../tslib.es6-374db934.js';
 import 'react';
 import 'classnames';
 import '../../../../button/esm';

package/calendar/esm/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/esm/index.css

@@ -13,7 +13,6 @@
 :root {
     --calendar-height: 340px;
     --calendar-width: 344px;
-    --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
@@ -34,7 +33,7 @@
 
     /* marker */
 }
-.calendar__component_ezfys {
+.calendar__component_gn7nu {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
@@ -43,13 +42,13 @@
     outline: none
 }
 @media (max-width: 374px) {
-.calendar__component_ezfys {
+.calendar__component_gn7nu {
         align-items: center;
         width: 100%;
         height: 320px
 }
     }
-.calendar__container_ezfys {
+.calendar__container_gn7nu {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -59,33 +58,33 @@
     overflow: hidden
 }
 @media (max-width: 374px) {
-.calendar__container_ezfys {
+.calendar__container_gn7nu {
         width: 288px
 }
     }
-.calendar__sixWeeks_ezfys {
+.calendar__sixWeeks_gn7nu {
     height: 379px
 }
 @media (max-width: 374px) {
-.calendar__sixWeeks_ezfys {
+.calendar__sixWeeks_gn7nu {
         height: 360px
 }
     }
-.calendar__period_ezfys {
-    width: var(--calendar-inner-width)
+.calendar__period_gn7nu {
+    width: 100%
 }
 @media (max-width: 374px) {
-.calendar__period_ezfys {
+.calendar__period_gn7nu {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
     }
-.calendar__monthYear_ezfys {
-    width: var(--calendar-inner-width)
+.calendar__monthYear_gn7nu {
+    width: 100%
 }
 @media (max-width: 374px) {
-.calendar__monthYear_ezfys {
+.calendar__monthYear_gn7nu {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto

package/calendar/esm/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";