@alfalab/core-components-tabs 7.3.9 → 7.3.11

package/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/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/{esm/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/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/components/primary-tablist/Component.desktop.js

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var components_primaryTablist_Component = require('./Component.js');
-var index_module = require('../../index.module-dde2566f.js');
+var index_module = require('../../index.module-38e2880e.js');
 require('classnames');
 require('@alfalab/core-components-badge');
 require('@alfalab/core-components-keyboard-focusable');

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

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var components_primaryTablist_Component = require('./Component.js');
-var index_module = require('../../index.module-dde2566f.js');
+var index_module = require('../../index.module-38e2880e.js');
 require('@alfalab/core-components-badge');
 require('@alfalab/core-components-keyboard-focusable');
 require('@alfalab/core-components-picker-button/desktop');
@@ -23,7 +23,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var mobileStyles = {"title":"tabs__title_gyexp tabs__title_k6pe3","mobile":"tabs__mobile_gyexp"};
+var mobileStyles = {"title":"tabs__title_1yivr tabs__title_1tvky","mobile":"tabs__mobile_1yivr"};
 require('./mobile.css')
 
 var styles = tslib.__assign(tslib.__assign({}, index_module.commonStyles), mobileStyles);

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

@@ -18,7 +18,7 @@ require('../../synthetic-events.js');
 require('../scrollable-container/Component.js');
 require('compute-scroll-into-view');
 require('../title/Component.js');
-require('../../index.module-dde2566f.js');
+require('../../index.module-38e2880e.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/components/primary-tablist/index.css

@@ -1,4 +1,4 @@
-/* hash: dm4ro */
+/* hash: p7glm */
 :root {
 } /* deprecated */ :root {
     --color-light-border-accent: #ef3124;
@@ -6,8 +6,8 @@
     --color-light-border-primary: #dbdee1;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
-    --color-light-text-tertiary: rgba(11, 31, 53, 0.3);
-} :root {
+    --color-light-text-tertiary: rgba(11, 31, 53, 0.3); /* 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 */
+} :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 {
 
@@ -83,11 +83,11 @@
     /* size l */
 
     /* size xl */
-} .tabs__component_k6pe3 {
+} .tabs__component_1tvky {
     position: relative;
     display: inline-flex;
     min-width: 100%
-} .tabs__component_k6pe3:before {
+} .tabs__component_1tvky: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_1tvky {
     min-width: calc(100% - 2 * var(--gap-m));
     margin: 0 var(--gap-m);
-} .tabs__container_k6pe3 {
+} .tabs__container_1tvky {
     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_1tvky {
     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_1tvky:not(.tabs__disabled_1tvky):hover {
         color: var(--primary-tablist-hover-color);
-    } .tabs__focused_k6pe3 {
+    } .tabs__focused_1tvky {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} .tabs__collapsed_k6pe3 {
+} .tabs__collapsed_1tvky {
     order: 99;
     visibility: collapse;
-} .tabs__selected_k6pe3 {
+} .tabs__selected_1tvky {
     cursor: default;
     color: var(--primary-tablist-selected-color);
-} .tabs__disabled_k6pe3 {
+} .tabs__disabled_1tvky {
     cursor: var(--disabled-cursor);
     color: var(--primary-tablist-disabled-color);
-} .tabs__line_k6pe3 {
+} .tabs__line_1tvky {
     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_1tvky .tabs__title_1tvky, .tabs__xs_1tvky .tabs__title_1tvky, .tabs__xxs_1tvky .tabs__title_1tvky {
         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_1tvky .tabs__title_1tvky + .tabs__title_1tvky, .tabs__xs_1tvky .tabs__title_1tvky + .tabs__title_1tvky, .tabs__xxs_1tvky .tabs__title_1tvky + .tabs__title_1tvky {
         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_1tvky .tabs__pickerWrapper_1tvky, .tabs__xs_1tvky .tabs__pickerWrapper_1tvky, .tabs__xxs_1tvky .tabs__pickerWrapper_1tvky {
         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_1tvky .tabs__option_1tvky, .tabs__xs_1tvky .tabs__option_1tvky, .tabs__xxs_1tvky .tabs__option_1tvky {
         padding: 0;
-    } .tabs__m_k6pe3 .tabs__title_k6pe3 {
+    } .tabs__m_1tvky .tabs__title_1tvky {
         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_1tvky .tabs__title_1tvky + .tabs__title_1tvky {
         margin-left: var(--primary-tablist-m-gaps);
-    } .tabs__m_k6pe3 .tabs__pickerWrapper_k6pe3 {
+    } .tabs__m_1tvky .tabs__pickerWrapper_1tvky {
         margin-left: var(--primary-tablist-m-gaps);
-    } .tabs__m_k6pe3 .tabs__option_k6pe3 {
+    } .tabs__m_1tvky .tabs__option_1tvky {
         padding: 0;
-    } .tabs__l_k6pe3 .tabs__title_k6pe3 {
+    } .tabs__l_1tvky .tabs__title_1tvky {
         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_1tvky .tabs__title_1tvky + .tabs__title_1tvky {
         margin-left: var(--primary-tablist-l-gaps);
-    } .tabs__l_k6pe3 .tabs__pickerWrapper_k6pe3 {
+    } .tabs__l_1tvky .tabs__pickerWrapper_1tvky {
         margin-left: var(--primary-tablist-l-gaps);
-    } .tabs__l_k6pe3 .tabs__option_k6pe3 {
+    } .tabs__l_1tvky .tabs__option_1tvky {
         padding: 0;
-    } .tabs__xl_k6pe3 .tabs__title_k6pe3 {
+    } .tabs__xl_1tvky .tabs__title_1tvky {
         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_1tvky .tabs__title_1tvky + .tabs__title_1tvky {
         margin-left: var(--primary-tablist-xl-gaps);
-    } .tabs__xl_k6pe3 .tabs__pickerWrapper_k6pe3 {
+    } .tabs__xl_1tvky .tabs__pickerWrapper_1tvky {
         margin-left: var(--primary-tablist-xl-gaps);
-    } .tabs__xl_k6pe3 .tabs__option_k6pe3 {
+    } .tabs__xl_1tvky .tabs__option_1tvky {
         padding: 0;
-    } .tabs__rightAddons_k6pe3 {
+    } .tabs__rightAddons_1tvky {
     display: flex;
     justify-content: center;
     align-items: center;