@alfalab/core-components 39.1.0 → 39.1.1

package/tabs/index-e81c389f.d.ts

@@ -1,141 +1,3 @@
-/// <reference types="react" />
-/* eslint-disable complexity */
-import React from "react";
-import { FC, ReactNode, ButtonHTMLAttributes, ElementType } from "react";
-interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * Вид компонента
-     */
-    view: "desktop" | "mobile";
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Позиция крестика
-     */
-    align?: "left" | "right";
-    /**
-     * Фиксирует крестик
-     */
-    sticky?: boolean;
-    /**
-     * Иконка
-     */
-    icon?: ElementType;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Коллбэк закрытия.
-     */
-    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
-}
-declare const Closer: FC<CloserProps>;
-type NavigationBarProps = {
-    /**
-     * Контент шапки
-     */
-    children?: ReactNode;
-    /**
-     * Заголовок шапки
-     */
-    title?: string;
-    /**
-     * Подзаголовок (доступен только в мобильной версии)
-     */
-    subtitle?: string;
-    /**
-     * Размер заголовка (compact доступен только в мобильной версии)
-     */
-    titleSize?: "default" | "compact";
-    /**
-     * Доп. класс для аддонов
-     */
-    addonClassName?: string;
-    /**
-     * Слот слева
-     */
-    leftAddons?: ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: ReactNode;
-    /**
-     * Дополнительный класс для closer
-     */
-    closerClassName?: string;
-    /**
-     * Слот снизу
-     */
-    bottomAddons?: ReactNode;
-    /**
-     * Наличие компонента крестика
-     */
-    hasCloser?: boolean;
-    /**
-     * Наличие кнопки "Назад"
-     */
-    hasBackButton?: boolean;
-    /**
-     * Дополнительный класс для правого аддона
-     */
-    backButtonClassName?: string;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс для контента
-     */
-    contentClassName?: string;
-    /**
-     * Дополнительный класс для нижнего аддона
-     */
-    bottomAddonsClassName?: string;
-    /**
-     * Выравнивание заголовка
-     */
-    align?: "left" | "center";
-    /**
-     * Обрезать ли заголовок
-     */
-    trim?: boolean;
-    /**
-     * Фиксирует шапку
-     */
-    sticky?: boolean;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Фоновое изображение
-     */
-    imageUrl?: string;
-    /**
-     * Иконка closer.
-     */
-    closerIcon?: React.ElementType;
-    /**
-     * Обработчик закрытия
-     */
-    onClose?: CloserProps["onClose"];
-    /**
-     * обработчик клика по кнопке "назад"
-     */
-    onBack?: () => void;
-    /**
-     * Вид шапки - мобильный или десктоп
-     */
-    view: "desktop" | "mobile";
-    /**
-     * Ссылка на родительскую ноду overflow: auto
-     */
-    scrollableParentRef?: React.RefObject<HTMLDivElement>;
-};
-declare const NavigationBar: FC<NavigationBarProps>;
-export { NavigationBar, CloserProps, Closer };
-export * from "./Component-ebda875c";
-export type { NavigationBarProps };
+export * from "./Component-3885b0d7";
+export * from "./index-ebda875c";
+export type { NavigationBarProps } from "./types-ebda875c";

package/tabs/index-ebda875c.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 /// <reference types="react-transition-group" />
-export * from "./Component-cac440c1";
+export * from "./Component-a8deae7f";

package/tabs/index.js

@@ -19,12 +19,12 @@ require('@juggle/resize-observer');
 require('./synthetic-events.js');
 require('./components/title/Component.js');
 require('compute-scroll-into-view');
-require('./index.module-dde2566f.js');
+require('./index.module-7d7e1aeb.js');
 require('./components/primary-tablist/Component.mobile.js');
 require('./components/secondary-tablist/Component.desktop.js');
 require('./components/secondary-tablist/Component.js');
 require('../tag');
-require('./index.module-9aac8027.js');
+require('./index.module-3024c3e4.js');
 require('./components/secondary-tablist/Component.mobile.js');
 require('./components/tabs/Component.js');
 

package/tabs/index.module-3024c3e4.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_wpar8","fullWidthScroll":"tabs__fullWidthScroll_wpar8","container":"tabs__container_wpar8","title":"tabs__title_wpar8","xxs":"tabs__xxs_wpar8","xs":"tabs__xs_wpar8","s":"tabs__s_wpar8","m":"tabs__m_wpar8","l":"tabs__l_wpar8","xl":"tabs__xl_wpar8"};
+require('./components/secondary-tablist/index.css');
+
+exports.commonStyles = commonStyles;

package/tabs/index.module-7d7e1aeb.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_ivs4u","fullWidthScroll":"tabs__fullWidthScroll_ivs4u","container":"tabs__container_ivs4u","title":"tabs__title_ivs4u","disabled":"tabs__disabled_ivs4u","focused":"tabs__focused_ivs4u","collapsed":"tabs__collapsed_ivs4u","selected":"tabs__selected_ivs4u","line":"tabs__line_ivs4u","s":"tabs__s_ivs4u","xs":"tabs__xs_ivs4u","xxs":"tabs__xxs_ivs4u","pickerWrapper":"tabs__pickerWrapper_ivs4u","option":"tabs__option_ivs4u","m":"tabs__m_ivs4u","l":"tabs__l_ivs4u","xl":"tabs__xl_ivs4u","rightAddons":"tabs__rightAddons_ivs4u"};
+require('./components/primary-tablist/index.css');
+
+exports.commonStyles = commonStyles;

package/tabs/mobile.js

@@ -18,10 +18,10 @@ require('@juggle/resize-observer');
 require('./synthetic-events.js');
 require('./components/title/Component.js');
 require('compute-scroll-into-view');
-require('./index.module-dde2566f.js');
+require('./index.module-7d7e1aeb.js');
 require('./components/secondary-tablist/Component.js');
 require('../tag');
-require('./index.module-9aac8027.js');
+require('./index.module-3024c3e4.js');
 require('./components/tabs/Component.js');
 
 

package/tabs/modern/Component-3885b0d7.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { NavigationBarProps } from "./types-ebda875c";
+declare const NavigationBar: FC<NavigationBarProps>;
+export * from "./Component-ebda875c";
+export { NavigationBar };

package/tabs/modern/Component-3e68f8db.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { FC, SVGProps } from 'react';
-import { OptionShape } from "./typings-cac440c1";
-import { OptionProps as BaseOptionProps } from "./typings-cac440c1";
+import { OptionShape } from "./typings-a8deae7f";
+import { OptionProps as BaseOptionProps } from "./typings-a8deae7f";
 type OptionProps = Omit<BaseOptionProps, 'option'> & {
     option: OptionShape & {
         icon?: FC<SVGProps<SVGSVGElement>>;

package/tabs/modern/{Component-cac440c1.d.ts → Component-a8deae7f.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { FC } from 'react';
-import { OptionProps } from "./typings-cac440c1";
+import { OptionProps } from "./typings-a8deae7f";
 declare const BaseOption: FC<OptionProps>;
 export { BaseOption };

package/tabs/modern/component-3885b0d7.d.ts

@@ -0,0 +1,216 @@
+/// <reference types="react-transition-group" />
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactNode, HTMLAttributes, RefObject } from "react";
+import { NavigationBarProps } from "./index-e81c389f";
+import { SwipeableHandlers } from "react-swipeable/types";
+import { BackdropProps } from "./index-ebda875c";
+import { TransitionProps } from 'react-transition-group/Transition';
+import { BaseModalProps } from "./index-bdb4c6b9";
+type HeaderProps = Omit<NavigationBarProps, "view" | "size">;
+declare const Header: FC<HeaderProps>;
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+};
+declare const Footer: FC<FooterProps>;
+type SwipeableBackdropProps = BackdropProps & {
+    /**
+     * Прозрачность бэкдропа
+     */
+    opacity?: number;
+    /**
+     * Обработчики свайпа
+     */
+    handlers?: SwipeableHandlers;
+    /**
+     * Время анимации opacity
+     */
+    opacityTimeout?: number;
+};
+declare const SwipeableBackdrop: FC<SwipeableBackdropProps>;
+type BottomSheetTitleAlign = 'center' | 'left';
+type BottomSheetProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Управление видимостью
+     */
+    open: boolean;
+    /**
+     * Заголовок
+     */
+    title?: ReactNode;
+    /**
+     * Размер заголовка
+     */
+    titleSize?: NavigationBarProps['titleSize'];
+    /**
+     * Подзаголовок.
+     */
+    subtitle?: NavigationBarProps['subtitle'];
+    /**
+     * Кнопка действия (обычно, это кнопка закрытия)
+     */
+    actionButton?: ReactNode;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: BaseModalProps['container'];
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительные пропсы на контейнер.
+     */
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Дополнительный класс
+     */
+    containerClassName?: string;
+    /**
+     * Дополнительный класс шапки
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс футера
+     */
+    footerClassName?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для компонента крестика
+     */
+    closerClassName?: string;
+    /**
+     * Дополнительный класс для компонента стрелки назад
+     */
+    backerClassName?: string;
+    /**
+     * Дополнительный класс для компонента модального окна
+     */
+    modalClassName?: string;
+    /**
+     * Дополнительный класс для обертки модального окна
+     */
+    modalWrapperClassName?: string;
+    /**
+     * TransitionProps, прокидываются в компонент CSSTransitionProps.
+     */
+    transitionProps?: Partial<TransitionProps>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Будет ли свайпаться шторка
+     * @default true
+     */
+    swipeable?: boolean;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Слот снизу
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: boolean;
+    /**
+     * Наличие компонента стрелки назад
+     */
+    hasBacker?: boolean;
+    /**
+     * Выравнивание заголовка
+     */
+    titleAlign?: BottomSheetTitleAlign;
+    /**
+     * Фиксирует шапку
+     */
+    stickyHeader?: boolean;
+    /**
+     * Фиксирует футер
+     */
+    stickyFooter?: boolean;
+    /**
+     * Высота шторки
+     */
+    initialHeight?: 'default' | 'full';
+    /**
+     * Будет ли виден оверлэй
+     */
+    hideOverlay?: boolean;
+    /**
+     * Будет ли видна шапка
+     */
+    hideHeader?: boolean;
+    /**
+     * Будет ли обрезан заголовок
+     */
+    trimTitle?: boolean;
+    /**
+     * Запретить закрытие шторки кликом на оверлэй
+     */
+    disableOverlayClick?: boolean;
+    /**
+     * Отключает блокировку скролла при открытии модального окна
+     */
+    disableBlockingScroll?: boolean;
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Не анимировать шторку при изменении размера вьюпорта
+     */
+    ignoreScreenChange?: boolean;
+    /**
+     * Свойства для Бэкдропа
+     */
+    backdropProps?: BaseModalProps['backdropProps'];
+    /**
+     * Реф на контейнер, в котором происходит скролл
+     */
+    scrollableContainerRef?: RefObject<HTMLElement>;
+    /**
+     * Обработчик закрытия
+     */
+    onClose: () => void;
+    /**
+     * Обработчик нажатия на стрелку назад
+     */
+    onBack?: () => void;
+};
+declare const HEADER_OFFSET = 24;
+declare const CLOSE_OFFSET = 0.2;
+declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
+export { HeaderProps, Header, FooterProps, Footer, SwipeableBackdropProps, SwipeableBackdrop, BottomSheetTitleAlign, BottomSheetProps, HEADER_OFFSET, CLOSE_OFFSET, BottomSheet };

package/tabs/modern/components/primary-tablist/Component.desktop.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-1428a125.js';
+import { c as commonStyles } from '../../index.module-df3add82.js';
 import 'classnames';
 import '../../../../badge/modern';
 import '../../../../keyboard-focusable/modern';

package/tabs/modern/components/primary-tablist/Component.mobile.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import { PrimaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-1428a125.js';
+import { c as commonStyles } from '../../index.module-df3add82.js';
 import '../../../../badge/modern';
 import '../../../../keyboard-focusable/modern';
 import '../../../../picker-button/modern/desktop';
@@ -15,7 +15,7 @@ import '../../hooks/use-collapsible-elements.js';
 import '../../hooks/use-tabs.js';
 import '../../synthetic-events.js';
 
-const mobileStyles = {"title":"tabs__title_gyexp tabs__title_k6pe3","mobile":"tabs__mobile_gyexp"};
+const mobileStyles = {"title":"tabs__title_1s6kr tabs__title_ivs4u","mobile":"tabs__mobile_1s6kr"};
 require('./mobile.css');
 
 const styles = {

package/tabs/modern/components/primary-tablist/Component.responsive.js

@@ -10,7 +10,7 @@ import '@juggle/resize-observer';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import 'compute-scroll-into-view';
-import '../../index.module-1428a125.js';
+import '../../index.module-df3add82.js';
 import './Component.js';
 import '../../hooks/use-tablist-titles.js';
 import '../../hooks/use-collapsible-elements.js';

package/tabs/modern/components/primary-tablist/index.css

@@ -1,4 +1,4 @@
-/* hash: dm4ro */
+/* hash: 11n95 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-accent: #ef3124;
@@ -83,11 +83,11 @@
     /* size l */
 
     /* size xl */
-} .tabs__component_k6pe3 {
+} .tabs__component_ivs4u {
     position: relative;
     display: inline-flex;
     min-width: 100%
-} .tabs__component_k6pe3:before {
+} .tabs__component_ivs4u:before {
         content: '';
         display: block;
         position: absolute;
@@ -95,17 +95,17 @@
         height: 1px;
         width: 100%;
         background-color: var(--primary-tablist-bottom-border-color);
-    } .tabs__fullWidthScroll_k6pe3 {
+    } .tabs__fullWidthScroll_ivs4u {
     min-width: calc(100% - 2 * var(--gap-m));
     margin: 0 var(--gap-m);
-} .tabs__container_k6pe3 {
+} .tabs__container_ivs4u {
     position: relative;
     overflow: hidden;
 
     /* focus-outline fix */
     margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
     padding: var(--gap-2xs) 0 var(--gap-2xs) var(--gap-2xs);
-} .tabs__title_k6pe3 {
+} .tabs__title_ivs4u {
     display: flex;
     align-items: center;
     height: 100%;
@@ -122,76 +122,76 @@
             user-select: none;
     cursor: pointer;
     outline: none
-} .tabs__title_k6pe3:not(.tabs__disabled_k6pe3):hover {
+} .tabs__title_ivs4u:not(.tabs__disabled_ivs4u):hover {
         color: var(--primary-tablist-hover-color);
-    } .tabs__focused_k6pe3 {
+    } .tabs__focused_ivs4u {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} .tabs__collapsed_k6pe3 {
+} .tabs__collapsed_ivs4u {
     order: 99;
     visibility: collapse;
-} .tabs__selected_k6pe3 {
+} .tabs__selected_ivs4u {
     cursor: default;
     color: var(--primary-tablist-selected-color);
-} .tabs__disabled_k6pe3 {
+} .tabs__disabled_ivs4u {
     cursor: var(--disabled-cursor);
     color: var(--primary-tablist-disabled-color);
-} .tabs__line_k6pe3 {
+} .tabs__line_ivs4u {
     position: absolute;
     height: 3px;
     bottom: 0;
     left: 0;
     background-color: var(--primary-tablist-line-color);
     transition: transform 0.2s ease, width 0.2s ease;
-} /* sizes */ .tabs__s_k6pe3 .tabs__title_k6pe3, .tabs__xs_k6pe3 .tabs__title_k6pe3, .tabs__xxs_k6pe3 .tabs__title_k6pe3 {
+} /* sizes */ .tabs__s_ivs4u .tabs__title_ivs4u, .tabs__xs_ivs4u .tabs__title_ivs4u, .tabs__xxs_ivs4u .tabs__title_ivs4u {
         padding: var(--primary-tablist-s-padding);
         font-size: var(--primary-tablist-s-font-size);
         font-weight: var(--primary-tablist-s-font-weight);
         font-family: var(--primary-tablist-s-font-family);
         line-height: 24px;
-    } .tabs__s_k6pe3 .tabs__title_k6pe3 + .tabs__title_k6pe3, .tabs__xs_k6pe3 .tabs__title_k6pe3 + .tabs__title_k6pe3, .tabs__xxs_k6pe3 .tabs__title_k6pe3 + .tabs__title_k6pe3 {
+    } .tabs__s_ivs4u .tabs__title_ivs4u + .tabs__title_ivs4u, .tabs__xs_ivs4u .tabs__title_ivs4u + .tabs__title_ivs4u, .tabs__xxs_ivs4u .tabs__title_ivs4u + .tabs__title_ivs4u {
         margin-left: var(--primary-tablist-s-gaps);
-    } .tabs__s_k6pe3 .tabs__pickerWrapper_k6pe3, .tabs__xs_k6pe3 .tabs__pickerWrapper_k6pe3, .tabs__xxs_k6pe3 .tabs__pickerWrapper_k6pe3 {
+    } .tabs__s_ivs4u .tabs__pickerWrapper_ivs4u, .tabs__xs_ivs4u .tabs__pickerWrapper_ivs4u, .tabs__xxs_ivs4u .tabs__pickerWrapper_ivs4u {
         margin-left: var(--primary-tablist-s-gaps);
-    } .tabs__s_k6pe3 .tabs__option_k6pe3, .tabs__xs_k6pe3 .tabs__option_k6pe3, .tabs__xxs_k6pe3 .tabs__option_k6pe3 {
+    } .tabs__s_ivs4u .tabs__option_ivs4u, .tabs__xs_ivs4u .tabs__option_ivs4u, .tabs__xxs_ivs4u .tabs__option_ivs4u {
         padding: 0;
-    } .tabs__m_k6pe3 .tabs__title_k6pe3 {
+    } .tabs__m_ivs4u .tabs__title_ivs4u {
         padding: var(--primary-tablist-m-padding);
         font-size: var(--primary-tablist-m-font-size);
         font-weight: var(--primary-tablist-m-font-weight);
         font-family: var(--primary-tablist-m-font-family);
         line-height: 24px;
-    } .tabs__m_k6pe3 .tabs__title_k6pe3 + .tabs__title_k6pe3 {
+    } .tabs__m_ivs4u .tabs__title_ivs4u + .tabs__title_ivs4u {
         margin-left: var(--primary-tablist-m-gaps);
-    } .tabs__m_k6pe3 .tabs__pickerWrapper_k6pe3 {
+    } .tabs__m_ivs4u .tabs__pickerWrapper_ivs4u {
         margin-left: var(--primary-tablist-m-gaps);
-    } .tabs__m_k6pe3 .tabs__option_k6pe3 {
+    } .tabs__m_ivs4u .tabs__option_ivs4u {
         padding: 0;
-    } .tabs__l_k6pe3 .tabs__title_k6pe3 {
+    } .tabs__l_ivs4u .tabs__title_ivs4u {
         padding: var(--primary-tablist-l-padding);
         font-size: var(--primary-tablist-l-font-size);
         font-weight: var(--primary-tablist-l-font-weight);
         font-family: var(--primary-tablist-l-font-family);
         line-height: 24px;
-    } .tabs__l_k6pe3 .tabs__title_k6pe3 + .tabs__title_k6pe3 {
+    } .tabs__l_ivs4u .tabs__title_ivs4u + .tabs__title_ivs4u {
         margin-left: var(--primary-tablist-l-gaps);
-    } .tabs__l_k6pe3 .tabs__pickerWrapper_k6pe3 {
+    } .tabs__l_ivs4u .tabs__pickerWrapper_ivs4u {
         margin-left: var(--primary-tablist-l-gaps);
-    } .tabs__l_k6pe3 .tabs__option_k6pe3 {
+    } .tabs__l_ivs4u .tabs__option_ivs4u {
         padding: 0;
-    } .tabs__xl_k6pe3 .tabs__title_k6pe3 {
+    } .tabs__xl_ivs4u .tabs__title_ivs4u {
         padding: var(--primary-tablist-xl-padding);
         font-size: var(--primary-tablist-xl-font-size);
         font-weight: var(--primary-tablist-xl-font-weight);
         font-family: var(--primary-tablist-xl-font-family);
         line-height: 32px;
-    } .tabs__xl_k6pe3 .tabs__title_k6pe3 + .tabs__title_k6pe3 {
+    } .tabs__xl_ivs4u .tabs__title_ivs4u + .tabs__title_ivs4u {
         margin-left: var(--primary-tablist-xl-gaps);
-    } .tabs__xl_k6pe3 .tabs__pickerWrapper_k6pe3 {
+    } .tabs__xl_ivs4u .tabs__pickerWrapper_ivs4u {
         margin-left: var(--primary-tablist-xl-gaps);
-    } .tabs__xl_k6pe3 .tabs__option_k6pe3 {
+    } .tabs__xl_ivs4u .tabs__option_ivs4u {
         padding: 0;
-    } .tabs__rightAddons_k6pe3 {
+    } .tabs__rightAddons_ivs4u {
     display: flex;
     justify-content: center;
     align-items: center;