@alfalab/core-components-tabs 7.7.1 → 8.0.0

package/cssm/index-f12ee135.d.ts

@@ -1,3 +1,307 @@
-export * from "./component-3885b0d7";
-export type { BottomSheetProps, BottomSheetTitleAlign } from "./types-fae20163";
-export { CLOSE_OFFSET, HEADER_OFFSET } from "./utils-b64479aa";
+/// <reference types="react-transition-group" />
+/// <reference types="react" />
+import React from "react";
+import { HTMLAttributes, ReactNode, RefObject, FC } from "react";
+import { TransitionProps } from "react-transition-group/Transition";
+import { BaseModalProps } from "./index-bdb4c6b9";
+import { NavigationBarProps } from "./index-e81c389f";
+import { SwipeableHandlers } from "react-swipeable";
+import { BackdropProps } from "./index-ebda875c";
+type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
+type BottomSheetTitleAlign = "center" | "left";
+type BottomSheetProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Управление видимостью
+     */
+    open: boolean;
+    /**
+     * Заголовок
+     */
+    title?: ReactNode;
+    /**
+     * Размер заголовка
+     */
+    titleSize?: NavigationBarProps["titleSize"];
+    /**
+     * Подзаголовок.
+     */
+    subtitle?: NavigationBarProps["subtitle"];
+    /**
+     * Кнопка действия (обычно, это кнопка закрытия)
+     */
+    actionButton?: ReactNode;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: BaseModalProps["container"];
+    /**
+     * Рендерить ли в контейнер через портал.
+     */
+    usePortal?: BaseModalProps["usePortal"];
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительные пропсы на контейнер.
+     */
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Дополнительный класс
+     */
+    containerClassName?: string;
+    /**
+     * Цвет фона
+     */
+    backgroundColor?: Extract<BackgroundColorType, "primary" | "secondary">;
+    /**
+     * Дополнительный класс шапки
+     */
+    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;
+    /**
+     * Будет ли свайпаться контент
+     */
+    swipeableContent?: boolean;
+    /**
+     * Порог свайпа
+     */
+    swipeThreshold?: number;
+    /**
+     * Слот слева
+     */
+    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;
+    /**
+     * Отключает ловушку фокуса
+     */
+    disableFocusLock?: boolean;
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Не анимировать шторку при изменении размера вьюпорта
+     */
+    ignoreScreenChange?: boolean;
+    /**
+     * Свойства для Бэкдропа
+     */
+    backdropProps?: BaseModalProps["backdropProps"];
+    /**
+     * Реф на контейнер, в котором происходит скролл
+     */
+    scrollableContainerRef?: RefObject<HTMLElement>;
+    /**
+     * Реф для управления компонентом.
+     */
+    bottomSheetInstanceRef?: RefObject<{
+        scrollToArea: (idx: number) => void;
+    }>;
+    /**
+     * Реф на контейнер, в котором находится шторка
+     */
+    sheetContainerRef?: RefObject<HTMLElement>;
+    /**
+     * Магнитные области видимой высоты шторки.
+     * Можно использовать значения в пикселях - 10(число), либо в процентах - 10%(строка).
+     * По-умолчанию -[0, window.innerHeight - '24px']
+     * массив должен состоять минимум из 2 элементов
+     */
+    magneticAreas?: Array<number | string>;
+    /**
+     * Индекс точки из magneticAreas, к которому нужно примагнититься при первом открытии шторки.
+     */
+    initialActiveAreaIndex?: number;
+    /**
+     * Отключает скролл контентной области.
+     */
+    scrollLocked?: boolean;
+    /**
+     * Скрыть скроллбар внутри шторки
+     */
+    hideScrollbar?: boolean;
+    /**
+     * Верхний отступ шторки, если она открыта на максимальную высоту
+     */
+    headerOffset?: number;
+    /**
+     * Содержимое bottom-sheet всегда в DOM
+     */
+    keepMounted?: boolean;
+    /**
+     * Отключает автоматический перевод фокуса на bottom-sheet при открытии
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия bottom-sheet
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `onClose` при нажатии Escape
+     */
+    disableEscapeKeyDown?: boolean;
+    /**
+     * Обработчик закрытия
+     */
+    onClose: () => void;
+    /**
+     * Обработчик нажатия на стрелку назад
+     */
+    onBack?: () => void;
+    /**
+     * Вызывается в начале анимации притягивания к одной из `magneticAreas`
+     */
+    onMagnetize?: (index: number) => void;
+    /**
+     * Вызывается после окончания анимации притягивания
+     */
+    onMagnetizeEnd?: () => void;
+    /**
+     * Вызывается при изменении положения шторки
+     */
+    onOffsetChange?: (offset: number, percent: number) => void;
+};
+declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
+declare const TIMEOUT = 500;
+declare const SWIPE_VELOCITY = 0.4;
+declare const MARKER_HEIGHT = 24;
+declare const CLOSE_OFFSET = 0.2;
+declare const SCROLL_OFFSET = 1;
+declare const HEADER_OFFSET = 24;
+declare const convertPercentToNumber: (value: string | number, fullHeight: number, headerOffset?: number) => number;
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+};
+declare const Footer: FC<FooterProps>;
+type HeaderProps = Omit<NavigationBarProps, "view" | "size"> & {
+    headerRef: RefObject<HTMLDivElement>;
+    headerOffset: number;
+};
+declare const Header: FC<HeaderProps>;
+type SwipeableBackdropProps = BackdropProps & {
+    /**
+     * Прозрачность бэкдропа
+     */
+    opacity?: number;
+    /**
+     * Обработчики свайпа
+     */
+    handlers?: SwipeableHandlers;
+    /**
+     * Время анимации opacity
+     */
+    opacityTimeout?: number;
+};
+declare const SwipeableBackdrop: FC<SwipeableBackdropProps>;
+export { BottomSheet, TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, CLOSE_OFFSET, SCROLL_OFFSET, HEADER_OFFSET, convertPercentToNumber, FooterProps, Footer, HeaderProps, Header, SwipeableBackdropProps, SwipeableBackdrop };
+export type { BottomSheetProps, BottomSheetTitleAlign };

package/cssm/index.d.ts

@@ -1,7 +1,4 @@
 export * from "./components/primary-tablist/Component.responsive";
-export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.responsive";
 export * from "./components/tab/index";
-export * from "./components/tabs/Component.responsive";
-export * from "./hooks/use-tabs";
-export * from "./typings";
+export { TabsResponsive as Tabs, TabsResponsiveProps as TabsProps } from "./components/tabs/Component.responsive";

package/cssm/index.js

@@ -3,35 +3,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_primaryTablist_Component_responsive = require('./components/primary-tablist/Component.responsive.js');
-var components_scrollableContainer_Component = require('./components/scrollable-container/Component.js');
 var components_secondaryTablist_Component_responsive = require('./components/secondary-tablist/Component.responsive.js');
 var components_tab_Component = require('./components/tab/Component.js');
 var components_tabs_Component_responsive = require('./components/tabs/Component.responsive.js');
-var hooks_useTabs = require('./hooks/use-tabs.js');
 require('tslib');
 require('react');
-require('@alfalab/hooks');
+require('@alfalab/core-components-mq/cssm');
 require('./components/primary-tablist/Component.desktop.js');
 require('./components/primary-tablist/Component.js');
 require('classnames');
-require('@alfalab/core-components-badge/cssm');
 require('@alfalab/core-components-keyboard-focusable/cssm');
-require('@alfalab/core-components-picker-button/cssm/desktop');
-require('./hooks/use-tablist-titles.js');
-require('./hooks/use-collapsible-elements.js');
-require('@juggle/resize-observer');
-require('./synthetic-events.js');
+require('./hooks/use-tabs.js');
+require('@alfalab/core-components-shared/cssm');
+require('./components/scrollable-container/Component.js');
+require('compute-scroll-into-view');
+require('./components/scrollable-container/index.module.css');
 require('./components/title/Component.js');
 require('./components/primary-tablist/index.module.css');
 require('./components/primary-tablist/Component.mobile.js');
 require('./components/primary-tablist/mobile.module.css');
-require('compute-scroll-into-view');
-require('./components/scrollable-container/index.module.css');
 require('./components/secondary-tablist/Component.desktop.js');
+require('@alfalab/core-components-tag/cssm/desktop');
 require('./components/secondary-tablist/Component.js');
-require('@alfalab/core-components-tag/cssm');
 require('./components/secondary-tablist/index.module.css');
 require('./components/secondary-tablist/Component.mobile.js');
+require('@alfalab/core-components-tag/cssm/mobile');
 require('./components/secondary-tablist/mobile.module.css');
 require('./components/tab/index.module.css');
 require('./components/tabs/Component.js');
@@ -39,8 +35,6 @@ require('./components/tabs/Component.js');
 
 
 exports.PrimaryTabListResponsive = components_primaryTablist_Component_responsive.PrimaryTabListResponsive;
-exports.ScrollableContainer = components_scrollableContainer_Component.ScrollableContainer;
 exports.SecondaryTabListResponsive = components_secondaryTablist_Component_responsive.SecondaryTabListResponsive;
 exports.Tab = components_tab_Component.Tab;
-exports.TabsResponsive = components_tabs_Component_responsive.TabsResponsive;
-exports.useTabs = hooks_useTabs.useTabs;
+exports.Tabs = components_tabs_Component_responsive.TabsResponsive;

package/cssm/mobile-755fbaa3.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.mobile-755fbaa3";
+export {};

package/cssm/mobile-96988a65.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.mobile-d7e9f69d";
+export {};

package/cssm/mobile.d.ts

@@ -1,7 +1,4 @@
 export * from "./components/primary-tablist/Component.mobile";
-export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.mobile";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.mobile";
-export * from "./hooks/use-tabs";
-export * from "./typings";

package/cssm/mobile.js

@@ -3,30 +3,24 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_primaryTablist_Component_mobile = require('./components/primary-tablist/Component.mobile.js');
-var components_scrollableContainer_Component = require('./components/scrollable-container/Component.js');
 var components_secondaryTablist_Component_mobile = require('./components/secondary-tablist/Component.mobile.js');
 var components_tab_Component = require('./components/tab/Component.js');
 var components_tabs_Component_mobile = require('./components/tabs/Component.mobile.js');
-var hooks_useTabs = require('./hooks/use-tabs.js');
 require('tslib');
 require('react');
 require('classnames');
 require('./components/primary-tablist/Component.js');
-require('@alfalab/core-components-badge/cssm');
 require('@alfalab/core-components-keyboard-focusable/cssm');
-require('@alfalab/core-components-picker-button/cssm/desktop');
-require('./hooks/use-tablist-titles.js');
-require('@alfalab/hooks');
-require('./hooks/use-collapsible-elements.js');
-require('@juggle/resize-observer');
-require('./synthetic-events.js');
+require('./hooks/use-tabs.js');
+require('@alfalab/core-components-shared/cssm');
+require('./components/scrollable-container/Component.js');
+require('compute-scroll-into-view');
+require('./components/scrollable-container/index.module.css');
 require('./components/title/Component.js');
 require('./components/primary-tablist/index.module.css');
 require('./components/primary-tablist/mobile.module.css');
-require('compute-scroll-into-view');
-require('./components/scrollable-container/index.module.css');
+require('@alfalab/core-components-tag/cssm/mobile');
 require('./components/secondary-tablist/Component.js');
-require('@alfalab/core-components-tag/cssm');
 require('./components/secondary-tablist/index.module.css');
 require('./components/secondary-tablist/mobile.module.css');
 require('./components/tab/index.module.css');
@@ -35,8 +29,6 @@ require('./components/tabs/Component.js');
 
 
 exports.PrimaryTabListMobile = components_primaryTablist_Component_mobile.PrimaryTabListMobile;
-exports.ScrollableContainer = components_scrollableContainer_Component.ScrollableContainer;
 exports.SecondaryTabListMobile = components_secondaryTablist_Component_mobile.SecondaryTabListMobile;
 exports.Tab = components_tab_Component.Tab;
 exports.TabsMobile = components_tabs_Component_mobile.TabsMobile;
-exports.useTabs = hooks_useTabs.useTabs;

package/{esm/index-3e68f8db.d.ts → cssm/shared-4cd3936b.d.ts}

@@ -1,18 +1,9 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { FormControlProps } from "./Component-3ebe4754";
 import { BaseSelectProps, OptionProps, OptionShape } from "./typings-5e1b8383";
-type SelectFieldProps = Omit<FormControlProps, "size"> & Record<string, unknown>;
-type SelectProps = Omit<BaseSelectProps, "fieldProps"> & {
-    /**
-     * Пропсы, которые будут прокинуты в компонент поля
-     */
-    fieldProps?: SelectFieldProps;
-};
-declare const Select: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "fieldProps"> & {
-    fieldProps?: SelectFieldProps | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+import { BottomSheetProps } from "./index-f12ee135";
+import { UseSelectWithApplyProps } from "./hook-9ea9e32c";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 type useSelectWithLoadingProps = {
     loading?: boolean;
@@ -20,7 +11,7 @@ type useSelectWithLoadingProps = {
     Option?: React.FC<OptionProps>;
 };
 declare function useSelectWithLoading({ loading, visibleOptions, Option }: useSelectWithLoadingProps): {
-    Option: (props: OptionProps) => JSX.Element;
+    Option: (props: OptionProps) => React.JSX.Element;
     options: OptionShape[];
 } | null;
 type OptionsFetcherResponse = {
@@ -51,7 +42,7 @@ type useLazyLoadingProps = {
 };
 declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton, Option }: useLazyLoadingProps): {
     optionsProps: {
-        Option: (props: OptionProps) => JSX.Element;
+        Option: (props: OptionProps) => React.JSX.Element;
         options: OptionShape[];
         optionsListProps: {
             ref: React.RefObject<HTMLDivElement>;
@@ -68,6 +59,40 @@ declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton
     };
     reset: () => void;
 };
+type AdditionalMobileProps = {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: UseSelectWithApplyProps["showClear"];
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps["showSelectAll"];
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка
+     */
+    showHeaderWithSelectAll?: UseSelectWithApplyProps["showHeaderWithSelectAll"];
+    /**
+     * Использовать ли хук useSelectWithApply
+     */
+    useWithApplyHook?: boolean;
+};
+type SelectMobileProps = Omit<BaseSelectProps, "Checkmark" | "onScroll"> & AdditionalMobileProps;
+declare const SelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & AdditionalMobileProps & React.RefAttributes<unknown>>;
 type SkeletonProps = {
     /**
      * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
@@ -81,6 +106,10 @@ type SkeletonProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительные инлайн стили
+     */
+    style?: React.CSSProperties;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -91,10 +120,15 @@ type SkeletonProps = {
     children?: ReactNode;
 };
 declare const Skeleton: React.FC<SkeletonProps>;
-export { SelectFieldProps, SelectProps, Select, useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
+type FooterProps = {
+    handleClear?: () => void;
+    handleApply?: () => void;
+    showClear?: boolean;
+};
+declare const Footer: ({ handleApply, handleClear, showClear }: FooterProps) => React.JSX.Element;
 export * from "./index-ebda875c";
-export * from "./Component-3885b0d7";
 export * from "./Component-5e1b8383";
-export * from "./hook-3e68f8db";
+export { useSelectWithLoading, useLazyLoading, AdditionalMobileProps, SelectMobileProps, SelectMobile, SkeletonProps, Skeleton, FooterProps, Footer };
+export * from "./hook-9ea9e32c";
 export * from "./typings-5e1b8383";
 export * from "./utils-5e1b8383";

package/cssm/shared.d.ts

@@ -0,0 +1,4 @@
+export * from "./components/scrollable-container/index";
+export * from "./hooks/use-tabs";
+export * from "./hooks/use-collapsible-elements";
+export * from "./typings";

package/cssm/shared.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_scrollableContainer_Component = require('./components/scrollable-container/Component.js');
+var hooks_useTabs = require('./hooks/use-tabs.js');
+var hooks_useCollapsibleElements = require('./hooks/use-collapsible-elements.js');
+require('react');
+require('classnames');
+require('compute-scroll-into-view');
+require('./components/scrollable-container/index.module.css');
+require('@alfalab/core-components-shared/cssm');
+require('tslib');
+require('@juggle/resize-observer');
+require('@alfalab/hooks');
+
+
+
+exports.ScrollableContainer = components_scrollableContainer_Component.ScrollableContainer;
+exports.useTabs = hooks_useTabs.useTabs;
+exports.useCollapsibleElements = hooks_useCollapsibleElements.useCollapsibleElements;

package/cssm/types-4480ac4f.d.ts

@@ -0,0 +1,3 @@
+type PickerButtonSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+type PickerButtonVariant = 'default' | 'compact';
+export { PickerButtonSize, PickerButtonVariant };

package/cssm/typings-5e1b8383.d.ts

@@ -1,5 +1,6 @@
 import { AriaAttributes, FC, FocusEvent, MouseEvent, ReactElement, ReactNode, RefAttributes, SVGProps } from 'react';
-import { InputProps, PopoverProps } from "./index-ebda875c";
+import { InputProps } from "./index-c44170fe";
+import { PopoverProps } from "./index-ebda875c";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**