@alfalab/core-components-tabs 7.7.2 → 8.0.1

package/{cssm/Component-3e68f8db.d.ts → Component-4cd3936b.d.ts}

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import React from 'react';
 import { FC, SVGProps } from "react";
-import { OptionShape } from "./typings-5e1b8383";
-import { OptionProps as BaseOptionProps } from "./typings-5e1b8383";
+import { OptionShape } from "./shared-4cd3936b";
+import { OptionProps as BaseOptionProps } from "./shared-4cd3936b";
 type OptionProps = Omit<BaseOptionProps, 'option'> & {
     option: OptionShape & {
         icon?: FC<SVGProps<SVGSVGElement>>;

package/Component-5e1b8383.d.ts

@@ -1,5 +1,100 @@
 /// <reference types="react" />
-import React from 'react';
-import { CheckmarkProps } from "./typings-5e1b8383";
-declare const BaseCheckmark: ({ selected, disabled, className, multiple, }: CheckmarkProps) => React.JSX.Element;
-export { BaseCheckmark };
+import React from "react";
+import { FC, ReactNode } from "react";
+import { ModalMobileProps, ContentProps } from "./typings-bdb4c6b9";
+import { BottomSheetProps } from "./index-f12ee135";
+import { BaseSelectProps } from "./typings-5e1b8383";
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: "start" | "center" | "space-between" | "column";
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+};
+declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<import("./typings-bdb4c6b9").ContentProps>;
+    Header: React.FC<import("./Component-c76d6398").HeaderProps>;
+    Footer: React.FC<FooterProps>;
+};
+declare const Content: FC<ContentProps>;
+type SelectMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean;
+    /**
+     * Отображать в BottomSheet
+     */
+    isBottomSheet?: boolean;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+    /**
+     *  Дополнительные пропсы модалки
+     */
+    modalProps?: Partial<React.ComponentProps<typeof ModalMobile>>;
+    /**
+     *  Дополнительные пропсы шапки модалки
+     */
+    modalHeaderProps?: Partial<React.ComponentProps<typeof ModalMobile.Header>>;
+    /**
+     *  Дополнительные пропсы футера модалки
+     */
+    modalFooterProps?: Partial<React.ComponentProps<typeof ModalMobile.Footer>>;
+};
+declare const BaseSelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean | undefined;
+    /**
+     * Отображать в BottomSheet
+     */
+    isBottomSheet?: boolean | undefined;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps> | undefined;
+    /**
+     *  Дополнительные пропсы модалки
+     */
+    modalProps?: Partial<ModalMobileProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    /**
+     *  Дополнительные пропсы шапки модалки
+     */
+    modalHeaderProps?: Partial<import("./Component-c76d6398").HeaderProps> | undefined;
+    /**
+     *  Дополнительные пропсы футера модалки
+     */
+    modalFooterProps?: Partial<FooterProps> | undefined;
+} & React.RefAttributes<unknown>>;
+export { ModalMobile, Content, SelectMobileProps, BaseSelectMobile };
+export { ModalMobileProps } from "./typings-bdb4c6b9";

package/Component-63dec22f.d.ts

@@ -0,0 +1,167 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from "react";
+declare const colors: readonly [
+    "tertiary",
+    "disabled",
+    "accent",
+    "primary",
+    "attention",
+    "positive",
+    "secondary",
+    "tertiary-inverted",
+    "primary-inverted",
+    "secondary-inverted",
+    "link",
+    "negative",
+    "static-primary-light",
+    "static-secondary-light",
+    "static-tertiary-light",
+    "static-primary-dark",
+    "static-secondary-dark",
+    "static-tertiary-dark",
+    "static-accent"
+];
+type Color = (typeof colors)[number];
+type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
+type NativeProps = HTMLAttributes<HTMLSpanElement>;
+type TextBaseProps = {
+    /**
+     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/tokens-assets-типографика--docs)
+     */
+    view?: "primary-large" | "primary-medium" | "primary-small" | "secondary-large" | "secondary-medium" | "secondary-small" | "component" | "caps";
+    /**
+     * Цвет текста
+     */
+    color?: Color;
+    /**
+     * Толщина шрифта
+     */
+    weight?: "regular" | "medium" | "bold";
+    /**
+     * Делает цифры моноширинными
+     */
+    monospaceNumbers?: boolean;
+    /**
+     * HTML тег
+     */
+    tag?: "span" | "div";
+    /**
+     * Css-класс для стилизации (native prop)
+     */
+    className?: string;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+    /**
+     * Контент (native prop)
+     */
+    children?: React.ReactNode;
+    /**
+     * Добавляет отступы к тэгу 'p'
+     */
+    defaultMargins?: never;
+    /**
+     * Количество строк (не поддерживает IE)
+     */
+    rowLimit?: 1 | 2 | 3;
+};
+type TextPTagProps = Omit<TextBaseProps, "tag" | "defaultMargins"> & {
+    tag?: "p";
+    defaultMargins?: boolean;
+};
+type TextProps = Omit<NativeProps, "color"> & (TextBaseProps | TextPTagProps);
+type NativeProps$0 = HTMLAttributes<HTMLHeadingElement>;
+type TitleProps = Omit<NativeProps$0, "color"> & {
+    /**
+     * HTML тег
+     */
+    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
+    /**
+     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/guidelines-typography--page)
+     */
+    view?: "xlarge" | "large" | "medium" | "small" | "xsmall";
+    /**
+     * Цвет текста
+     */
+    color?: Color;
+    /**
+     * Толщина шрифта
+     */
+    weight?: "regular" | "medium" | "bold";
+    /**
+     * Шрифт текста
+     */
+    font?: "styrene" | "system";
+    /**
+     * Добавляет отступы
+     */
+    defaultMargins?: boolean;
+    /**
+     * Css-класс для стилизации (native prop)
+     */
+    className?: string;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+    /**
+     * Контент (native prop)
+     */
+    children?: React.ReactNode;
+    /**
+     * Количество строк (не поддерживает IE)
+     */
+    rowLimit?: 1 | 2 | 3;
+};
+type TitleMobileProps = Omit<TitleProps, "defaultMargins">;
+declare const Typography: {
+    Title: FC<TitleProps>;
+    Text: ForwardRefExoticComponent<TextProps & RefAttributes<TextElementType>>;
+    TitleResponsive: FC<TitleProps>;
+    TitleMobile: FC<TitleMobileProps>;
+};
+declare const typographyPresets: {
+    mobile: {
+        list: {
+            text: {
+                primary: {
+                    tag: string;
+                    view: string;
+                };
+                secondary: {
+                    tag: string;
+                    color: string;
+                    view: string;
+                };
+            };
+        };
+    };
+};
+declare const TitleResponsive: FC<TitleProps>;
+interface BackArrowAddonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Текст после иконки
+     */
+    text?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Вид компонента
+     */
+    view: 'mobile' | 'desktop';
+    /**
+     * Прозрачность текста
+     */
+    textOpacity?: number;
+    /**
+     * Обработчик клика
+     */
+    onClick?: () => void;
+}
+declare const BackArrowAddon: React.FC<BackArrowAddonProps>;
+export { Typography, typographyPresets, TitleResponsive, BackArrowAddonProps, BackArrowAddon };
+export type { TitleProps, TextProps, Color };

package/Component-8b2c2707.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, SVGProps } from "react";
+import { PickerButtonSize, PickerButtonVariant } from "./types-4480ac4f";
+import { ButtonProps } from "./index-8b2c2707";
+import { FieldProps as BaseFieldProps } from "./typings-5e1b8383";
+declare const getIcon: (variant: PickerButtonVariant, size: PickerButtonSize) => FC<SVGProps<SVGSVGElement>>;
+type FieldProps = Omit<BaseFieldProps, 'size' | 'hint' | 'success' | 'error' | 'placeholder'> & ButtonProps & {
+    buttonSize?: PickerButtonSize;
+    buttonVariant?: PickerButtonVariant;
+    showArrow?: boolean;
+};
+declare const Field: ({ buttonSize, buttonVariant, view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, setSelectedItems, toggleMenu, valueRenderer, showArrow, labelView, ...restProps }: FieldProps) => React.JSX.Element;
+export { getIcon, Field };

package/Component-9211a437.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { BaseButtonProps } from "./typings-9211a437";
+type SpinnerProps = {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "xs" | "s" | "m";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется спиннер
+     */
+    colors?: "default" | "inverted";
+};
+declare const Spinner: FC<SpinnerProps>;
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
+declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { SpinnerProps, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

package/Component-c76d6398.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { NavigationBarProps } from "./index-c76d6398";
+type HeaderProps = Omit<NavigationBarProps, 'size' | 'view' | 'parentRef'>;
+declare const Header: FC<HeaderProps>;
+export { HeaderProps, Header };

package/Component.desktop-2e2b2125.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
+type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonDesktopProps, ButtonDesktop };

package/Component.desktop-785df74d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlDesktopProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlDesktop: React.ForwardRefExoticComponent<FormControlDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlDesktopProps, FormControlDesktop };

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
+type ButtonMobileProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonMobile: React.ForwardRefExoticComponent<ButtonMobileProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonMobileProps, ButtonMobile };

package/Component.mobile-d7e9f69d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlMobileProps, FormControlMobile };

package/Component.mobile-ebda875c.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseTagProps } from "./index-ebda875c";
+type TagMobileProps = Omit<BaseTagProps, 'styles'>;
+declare const TagMobile: React.ForwardRefExoticComponent<TagMobileProps & React.RefAttributes<HTMLButtonElement>>;
+export { TagMobileProps, TagMobile };

package/Component.responsive-785df74d.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const FormControl: React.ForwardRefExoticComponent<Omit<BaseFormControlProps, "styles" | "colorStyles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { FormControlProps, FormControl };

package/collapsible.d.ts

@@ -0,0 +1,7 @@
+export { TabsCollapsibleResponsive as TabsCollapsible, TabsCollapsibleResponsiveProps as TabsCollapsibleProps } from "./components/tabs/Component.collapsible.responsive";
+export * from "./components/tabs/Component.collabsible.desktop";
+export * from "./components/tabs/Component.collapsible.mobile";
+export * from "./components/primary-tablist/Component.collapsible.responsive";
+export * from "./components/primary-tablist/Component.collapsible.desktop";
+export * from "./components/primary-tablist/Component.collapsible.mobile";
+export * from "./components/tab/index";

package/collapsible.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_tabs_Component_collapsible_responsive = require('./components/tabs/Component.collapsible.responsive.js');
+var components_tabs_Component_collabsible_desktop = require('./components/tabs/Component.collabsible.desktop.js');
+var components_tabs_Component_collapsible_mobile = require('./components/tabs/Component.collapsible.mobile.js');
+var components_primaryTablist_Component_collapsible_responsive = require('./components/primary-tablist/Component.collapsible.responsive.js');
+var components_primaryTablist_Component_collapsible_desktop = require('./components/primary-tablist/Component.collapsible.desktop.js');
+var components_primaryTablist_Component_collapsible_mobile = require('./components/primary-tablist/Component.collapsible.mobile.js');
+var components_tab_Component = require('./components/tab/Component.js');
+require('tslib');
+require('react');
+require('./components/tabs/Component.js');
+require('@alfalab/core-components-mq');
+require('./components/primary-tablist/Component.collapsible.js');
+require('classnames');
+require('@alfalab/core-components-badge');
+require('@alfalab/core-components-keyboard-focusable');
+require('@alfalab/core-components-picker-button/desktop');
+require('./hooks/use-tablist-titles.js');
+require('./hooks/use-collapsible-elements.js');
+require('@juggle/resize-observer');
+require('@alfalab/hooks');
+require('./hooks/use-tabs.js');
+require('@alfalab/core-components-shared');
+require('./synthetic-events.js');
+require('./components/title/Component.js');
+require('./index.module-d50828f5.js');
+require('./mobile.module-39c6dc63.js');
+
+
+
+exports.TabsCollapsible = components_tabs_Component_collapsible_responsive.TabsCollapsibleResponsive;
+exports.TabsCollapsibleDesktop = components_tabs_Component_collabsible_desktop.TabsCollapsibleDesktop;
+exports.TabsCollapsibleMobile = components_tabs_Component_collapsible_mobile.TabsCollapsibleMobile;
+exports.CollapsiblePrimaryTabListResponsive = components_primaryTablist_Component_collapsible_responsive.CollapsiblePrimaryTabListResponsive;
+exports.CollapsiblePrimaryTabListDesktop = components_primaryTablist_Component_collapsible_desktop.CollapsiblePrimaryTabListDesktop;
+exports.CollapsiblePrimaryTabListMobile = components_primaryTablist_Component_collapsible_mobile.CollapsiblePrimaryTabListMobile;
+exports.Tab = components_tab_Component.Tab;

package/components/primary-tablist/Component.collapsible.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { Styles, TabListProps } from "../../typings";
+declare const CollapsiblePrimaryTabList: ({ size, className, containerClassName, titles, styles, selectedId, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint, defaultMatchMediaValue, }: TabListProps & Styles) => React.JSX.Element;
+export { CollapsiblePrimaryTabList };

package/components/primary-tablist/Component.collapsible.desktop.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TabListProps } from "../../typings";
+declare const CollapsiblePrimaryTabListDesktop: ({ size, ...restProps }: TabListProps) => React.JSX.Element;
+export { CollapsiblePrimaryTabListDesktop };

package/components/primary-tablist/Component.collapsible.desktop.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_primaryTablist_Component_collapsible = require('./Component.collapsible.js');
+var index_module = require('../../index.module-d50828f5.js');
+require('classnames');
+require('@alfalab/core-components-badge');
+require('@alfalab/core-components-keyboard-focusable');
+require('@alfalab/core-components-picker-button/desktop');
+require('../../hooks/use-tablist-titles.js');
+require('@alfalab/core-components-mq');
+require('../../hooks/use-collapsible-elements.js');
+require('@juggle/resize-observer');
+require('@alfalab/hooks');
+require('../../hooks/use-tabs.js');
+require('@alfalab/core-components-shared');
+require('../../synthetic-events.js');
+require('../title/Component.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var CollapsiblePrimaryTabListDesktop = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'm' : _b, restProps = tslib.__rest(_a, ["size"]);
+    return (React__default.default.createElement(components_primaryTablist_Component_collapsible.CollapsiblePrimaryTabList, tslib.__assign({}, restProps, { size: size, styles: index_module.commonStyles })));
+};
+
+exports.CollapsiblePrimaryTabListDesktop = CollapsiblePrimaryTabListDesktop;

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

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsBadge = require('@alfalab/core-components-badge');
+var coreComponentsKeyboardFocusable = require('@alfalab/core-components-keyboard-focusable');
+var desktop = require('@alfalab/core-components-picker-button/desktop');
+var hooks_useTablistTitles = require('../../hooks/use-tablist-titles.js');
+var syntheticEvents = require('../../synthetic-events.js');
+var components_title_Component = require('../title/Component.js');
+require('@alfalab/core-components-mq');
+require('../../hooks/use-collapsible-elements.js');
+require('@juggle/resize-observer');
+require('@alfalab/hooks');
+require('../../hooks/use-tabs.js');
+require('@alfalab/core-components-shared');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var DEFAULT_STYLES = {};
+var CollapsiblePrimaryTabList = function (_a) {
+    var size = _a.size, className = _a.className, containerClassName = _a.containerClassName, _b = _a.titles, titles = _b === void 0 ? [] : _b, _c = _a.styles, styles = _c === void 0 ? DEFAULT_STYLES : _c, _d = _a.selectedId, selectedId = _d === void 0 ? titles.length ? titles[0].id : undefined : _d, collapsedTabsIds = _a.collapsedTabsIds, fullWidthScroll = _a.fullWidthScroll, onChange = _a.onChange, dataTestId = _a.dataTestId, _e = _a.breakpoint, breakpoint = _e === void 0 ? 768 : _e, defaultMatchMediaValue = _a.defaultMatchMediaValue;
+    var lineRef = React.useRef(null);
+    var _f = hooks_useTablistTitles.useTablistTitles({
+        titles: titles,
+        selectedId: selectedId,
+        collapsedTabsIds: collapsedTabsIds,
+        breakpoint: breakpoint,
+        onChange: onChange,
+        defaultMatchMediaValue: defaultMatchMediaValue,
+    }), containerRef = _f.containerRef, addonRef = _f.addonRef, tablistTitles = _f.tablistTitles, selectedTab = _f.selectedTab, getTabListItemProps = _f.getTabListItemProps;
+    React.useEffect(function () {
+        if (selectedTab && lineRef.current) {
+            lineRef.current.style.width = "".concat(selectedTab.offsetWidth, "px");
+            lineRef.current.style.transform = "translateX(".concat(selectedTab.offsetLeft, "px)");
+        }
+    }, [selectedTab, tablistTitles]);
+    var collapsedOptions = React.useMemo(function () {
+        return tablistTitles.reduce(function (options, title) {
+            if (title.collapsed) {
+                options.push({
+                    key: title.title,
+                    value: title.id,
+                    content: React__default.default.createElement(components_title_Component.Title, tslib.__assign({}, title, { styles: styles, isOption: true })),
+                });
+            }
+            return options;
+        }, []);
+    }, [tablistTitles, styles]);
+    var collapsedAddonsLength = tablistTitles.filter(function (title) { return title.collapsed && title.rightAddons; }).length;
+    var handleOptionsChange = function (payload) {
+        var _a;
+        if (((_a = payload.selected) === null || _a === void 0 ? void 0 : _a.value) && onChange) {
+            var nativeMouseEvent = new MouseEvent('change');
+            var syntheticMouseEvent = syntheticEvents.createSyntheticMouseEvent(nativeMouseEvent);
+            onChange(syntheticMouseEvent, { selectedId: payload.selected.value });
+        }
+    };
+    var renderContent = function () {
+        var _a;
+        return (React__default.default.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn__default.default(styles.component, className, size && styles[size], (_a = {},
+                _a[styles.fullWidthScroll] = fullWidthScroll,
+                _a)) },
+            tablistTitles.map(function (_a, index) {
+                _a.dataTestId; var restTitleProps = tslib.__rest(_a, ["dataTestId"]);
+                return (React__default.default.createElement(coreComponentsKeyboardFocusable.KeyboardFocusable, { key: restTitleProps.id }, function (ref, focused) { return (React__default.default.createElement(components_title_Component.Title, tslib.__assign({}, getTabListItemProps(index, ref), restTitleProps, { focused: focused, styles: styles }))); }));
+            }),
+            collapsedOptions.length ? (React__default.default.createElement("span", { ref: addonRef, role: 'menu', className: styles.pickerWrapper },
+                React__default.default.createElement(desktop.PickerButtonDesktop, { fieldClassName: styles.title, optionClassName: cn__default.default(styles.pickerOption, size && styles[size]), options: collapsedOptions, onChange: handleOptionsChange, rightAddons: collapsedAddonsLength ? (React__default.default.createElement(coreComponentsBadge.Badge, { view: 'count', content: collapsedAddonsLength })) : null, size: 'l', view: 'ghost', label: '\u0415\u0449\u0451', popoverPosition: 'bottom-end' }))) : null,
+            React__default.default.createElement("div", { className: styles.line, ref: lineRef })));
+    };
+    return (React__default.default.createElement("div", { ref: containerRef, className: cn__default.default(styles.container, containerClassName) }, renderContent()));
+};
+
+exports.CollapsiblePrimaryTabList = CollapsiblePrimaryTabList;

package/components/primary-tablist/Component.collapsible.mobile.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { TabListProps } from "../../typings";
+type CollapsiblePrimaryTabListMobileProps = Omit<TabListProps, 'size'>;
+declare const CollapsiblePrimaryTabListMobile: ({ className, ...restProps }: CollapsiblePrimaryTabListMobileProps) => React.JSX.Element;
+export { CollapsiblePrimaryTabListMobileProps, CollapsiblePrimaryTabListMobile };

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

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var components_primaryTablist_Component_collapsible = require('./Component.collapsible.js');
+var index_module = require('../../index.module-d50828f5.js');
+var mobile_module = require('../../mobile.module-39c6dc63.js');
+require('@alfalab/core-components-badge');
+require('@alfalab/core-components-keyboard-focusable');
+require('@alfalab/core-components-picker-button/desktop');
+require('../../hooks/use-tablist-titles.js');
+require('@alfalab/core-components-mq');
+require('../../hooks/use-collapsible-elements.js');
+require('@juggle/resize-observer');
+require('@alfalab/hooks');
+require('../../hooks/use-tabs.js');
+require('@alfalab/core-components-shared');
+require('../../synthetic-events.js');
+require('../title/Component.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = tslib.__assign(tslib.__assign({}, index_module.commonStyles), mobile_module.mobileStyles);
+var CollapsiblePrimaryTabListMobile = function (_a) {
+    var className = _a.className, restProps = tslib.__rest(_a, ["className"]);
+    return (React__default.default.createElement(components_primaryTablist_Component_collapsible.CollapsiblePrimaryTabList, tslib.__assign({}, restProps, { styles: styles, className: cn__default.default(className, styles.mobile) })));
+};
+
+exports.CollapsiblePrimaryTabListMobile = CollapsiblePrimaryTabListMobile;

package/components/primary-tablist/Component.collapsible.responsive.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TabListProps } from "../../typings";
+declare const CollapsiblePrimaryTabListResponsive: ({ size, fullWidthScroll, breakpoint, defaultMatchMediaValue, ...restProps }: TabListProps) => React.JSX.Element;
+export { CollapsiblePrimaryTabListResponsive };