@alfalab/core-components-tabs 8.0.8 → 8.1.0

package/esm/components/tabs/{Component.collabsible.desktop.js → Component.collapsible.js}

@@ -1,8 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
-import { CollapsiblePrimaryTabListDesktop } from '../primary-tablist/Component.collapsible.desktop.js';
+import { CollapsiblePrimaryTabList } from '../primary-tablist/Component.collapsible.js';
 import { Tabs } from './Component.js';
-import '../primary-tablist/Component.collapsible.js';
 import 'classnames';
 import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-keyboard-focusable/esm';
@@ -16,11 +15,11 @@ import '../../hooks/use-tabs.js';
 import '@alfalab/core-components-shared/esm';
 import '../../synthetic-events.js';
 import '../title/Component.js';
-import '../../index.module-511c86f3.js';
+import '../../index.module-7fe2e8dc.js';
 
-var TabsCollapsibleDesktop = function (_a) {
+var TabsCollapsible = function (_a) {
     var restProps = __rest(_a, []);
-    return (React.createElement(Tabs, __assign({ TabList: CollapsiblePrimaryTabListDesktop }, restProps)));
+    return (React.createElement(Tabs, __assign({ TabList: CollapsiblePrimaryTabList }, restProps)));
 };
 
-export { TabsCollapsibleDesktop };
+export { TabsCollapsible };

package/esm/components/tabs/Component.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
 import { TabsProps } from "../../typings";
-declare const Tabs: ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, }: Omit<TabsProps, 'view'>) => React.JSX.Element;
+declare const Tabs: ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, tagShape, tagView, }: Omit<TabsProps, 'view'>) => React.JSX.Element;
 export { Tabs };

package/esm/components/tabs/Component.desktop.js

@@ -10,11 +10,17 @@ import '../../hooks/use-tabs.js';
 import '@alfalab/core-components-shared/esm';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
+import '../scroll-controls/Component.js';
+import 'lodash.debounce';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/icons-glyph/ChevronLeftMIcon';
+import '@alfalab/icons-glyph/ChevronRightMIcon';
+import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-511c86f3.js';
+import '../../index.module-7fe2e8dc.js';
 import '@alfalab/core-components-tag/esm/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-ffeeb976.js';
+import '../../index.module-fbff2d78.js';
 
 var views = {
     primary: PrimaryTabListDesktop,

package/esm/components/tabs/Component.js

@@ -1,7 +1,7 @@
 import React, { cloneElement } from 'react';
 
 var Tabs = function (_a) {
-    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, _d = _a.breakpoint, breakpoint = _d === void 0 ? 1024 : _d;
+    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, _d = _a.breakpoint, breakpoint = _d === void 0 ? 1024 : _d, tagShape = _a.tagShape, tagView = _a.tagView;
     var tabsArray = React.Children.toArray(children);
     var titles = tabsArray.map(function (_a) {
         var _b = _a.props, title = _b.title, id = _b.id, rightAddons = _b.rightAddons, disabled = _b.disabled, hidden = _b.hidden, toggleClassName = _b.toggleClassName, toggleTestId = _b.dataTestId;
@@ -17,7 +17,7 @@ var Tabs = function (_a) {
     });
     var tabs = tabsArray.filter(function (tab) { return tab.props.id === selectedId || tab.props.keepMounted || keepMounted; });
     return (React.createElement("div", { className: className },
-        React.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsedTabsIds: collapsedTabsIds, onChange: onChange, dataTestId: dataTestId, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll, breakpoint: breakpoint }),
+        React.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsedTabsIds: collapsedTabsIds, onChange: onChange, dataTestId: dataTestId, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll, breakpoint: breakpoint, tagShape: tagShape, tagView: tagView }),
         tabs.map(function (tab) { return cloneElement(tab, { hidden: tab.props.id !== selectedId }); })));
 };
 

package/esm/components/tabs/Component.mobile.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
 import { TabsProps } from "../../typings";
-type TabsMobileProps = Omit<TabsProps, 'TabList' | 'size' | 'collapsedTabsIds'>;
+type TabsMobileProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;
 declare const TabsMobile: ({ view, scrollable, ...restProps }: TabsMobileProps) => React.JSX.Element;
 export { TabsMobileProps, TabsMobile };

package/esm/components/tabs/Component.mobile.js

@@ -10,12 +10,17 @@ import '../../hooks/use-tabs.js';
 import '@alfalab/core-components-shared/esm';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
+import '../scroll-controls/Component.js';
+import 'lodash.debounce';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/icons-glyph/ChevronLeftMIcon';
+import '@alfalab/icons-glyph/ChevronRightMIcon';
+import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-511c86f3.js';
-import '../../mobile.module-34deaa77.js';
+import '../../index.module-7fe2e8dc.js';
 import '@alfalab/core-components-tag/esm/mobile';
 import '../secondary-tablist/Component.js';
-import '../../index.module-ffeeb976.js';
+import '../../index.module-fbff2d78.js';
 
 var views = {
     primary: PrimaryTabListMobile,

package/esm/components/tabs/Component.responsive.js

@@ -12,14 +12,19 @@ import '../../hooks/use-tabs.js';
 import '@alfalab/core-components-shared/esm';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
+import '../scroll-controls/Component.js';
+import 'lodash.debounce';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/icons-glyph/ChevronLeftMIcon';
+import '@alfalab/icons-glyph/ChevronRightMIcon';
+import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-511c86f3.js';
+import '../../index.module-7fe2e8dc.js';
 import '../primary-tablist/Component.mobile.js';
-import '../../mobile.module-34deaa77.js';
 import '../secondary-tablist/Component.desktop.js';
 import '@alfalab/core-components-tag/esm/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-ffeeb976.js';
+import '../../index.module-fbff2d78.js';
 import '../secondary-tablist/Component.mobile.js';
 import '@alfalab/core-components-tag/esm/mobile';
 

package/esm/desktop.js

@@ -11,9 +11,15 @@ import './hooks/use-tabs.js';
 import '@alfalab/core-components-shared/esm';
 import './components/scrollable-container/Component.js';
 import 'compute-scroll-into-view';
+import './components/scroll-controls/Component.js';
+import 'lodash.debounce';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/icons-glyph/ChevronLeftMIcon';
+import '@alfalab/icons-glyph/ChevronRightMIcon';
+import './components/scroll-controls/utils.js';
 import './components/title/Component.js';
-import './index.module-511c86f3.js';
+import './index.module-7fe2e8dc.js';
 import '@alfalab/core-components-tag/esm/desktop';
 import './components/secondary-tablist/Component.js';
-import './index.module-ffeeb976.js';
+import './index.module-fbff2d78.js';
 import './components/tabs/Component.js';

package/esm/index-c76d6398.d.ts

@@ -137,5 +137,4 @@ type NavigationBarProps = {
 declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
 export { NavigationBar };
 export * from "./Component-63dec22f";
-export * from "./Component-8b2c2707";
 export type { NavigationBarProps };

package/esm/index.js

@@ -13,14 +13,19 @@ import './hooks/use-tabs.js';
 import '@alfalab/core-components-shared/esm';
 import './components/scrollable-container/Component.js';
 import 'compute-scroll-into-view';
+import './components/scroll-controls/Component.js';
+import 'lodash.debounce';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/icons-glyph/ChevronLeftMIcon';
+import '@alfalab/icons-glyph/ChevronRightMIcon';
+import './components/scroll-controls/utils.js';
 import './components/title/Component.js';
-import './index.module-511c86f3.js';
+import './index.module-7fe2e8dc.js';
 import './components/primary-tablist/Component.mobile.js';
-import './mobile.module-34deaa77.js';
 import './components/secondary-tablist/Component.desktop.js';
 import '@alfalab/core-components-tag/esm/desktop';
 import './components/secondary-tablist/Component.js';
-import './index.module-ffeeb976.js';
+import './index.module-fbff2d78.js';
 import './components/secondary-tablist/Component.mobile.js';
 import '@alfalab/core-components-tag/esm/mobile';
 import './components/tabs/Component.js';

package/esm/index.module-7fe2e8dc.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_1u3uq","fullWidthScroll":"tabs__fullWidthScroll_1u3uq","container":"tabs__container_1u3uq","title":"tabs__title_1u3uq","disabled":"tabs__disabled_1u3uq","focused":"tabs__focused_1u3uq","collapsed":"tabs__collapsed_1u3uq","selected":"tabs__selected_1u3uq","line":"tabs__line_1u3uq","option":"tabs__option_1u3uq","s":"tabs__s_1u3uq","xs":"tabs__xs_1u3uq","xxs":"tabs__xxs_1u3uq","pickerWrapper":"tabs__pickerWrapper_1u3uq","m":"tabs__m_1u3uq","l":"tabs__l_1u3uq","xl":"tabs__xl_1u3uq","rightAddons":"tabs__rightAddons_1u3uq"};
+require('./components/primary-tablist/index.css')
+
+export { commonStyles as c };

package/esm/index.module-fbff2d78.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_tc0jp","fullWidthScroll":"tabs__fullWidthScroll_tc0jp","container":"tabs__container_tc0jp","title":"tabs__title_tc0jp","xxs":"tabs__xxs_tc0jp","xs":"tabs__xs_tc0jp","s":"tabs__s_tc0jp","m":"tabs__m_tc0jp","l":"tabs__l_tc0jp","xl":"tabs__xl_tc0jp"};
+require('./components/secondary-tablist/index.css')
+
+export { commonStyles as c };

package/esm/mobile.js

@@ -11,10 +11,15 @@ import './hooks/use-tabs.js';
 import '@alfalab/core-components-shared/esm';
 import './components/scrollable-container/Component.js';
 import 'compute-scroll-into-view';
+import './components/scroll-controls/Component.js';
+import 'lodash.debounce';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/icons-glyph/ChevronLeftMIcon';
+import '@alfalab/icons-glyph/ChevronRightMIcon';
+import './components/scroll-controls/utils.js';
 import './components/title/Component.js';
-import './index.module-511c86f3.js';
-import './mobile.module-34deaa77.js';
+import './index.module-7fe2e8dc.js';
 import '@alfalab/core-components-tag/esm/mobile';
 import './components/secondary-tablist/Component.js';
-import './index.module-ffeeb976.js';
+import './index.module-fbff2d78.js';
 import './components/tabs/Component.js';

package/esm/shared.js

@@ -4,7 +4,13 @@ export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
 import 'react';
 import 'classnames';
 import 'compute-scroll-into-view';
-import '@alfalab/core-components-shared/esm';
+import './components/scroll-controls/Component.js';
 import 'tslib';
+import 'lodash.debounce';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/icons-glyph/ChevronLeftMIcon';
+import '@alfalab/icons-glyph/ChevronRightMIcon';
+import './components/scroll-controls/utils.js';
+import '@alfalab/core-components-shared/esm';
 import '@juggle/resize-observer';
 import '@alfalab/hooks';

package/esm/typings.d.ts

@@ -69,6 +69,14 @@ type TabsProps = {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Форма тега (для view secondary только)
+     */
+    tagShape?: TagProps['shape'];
+    /**
+     * Стиль тега (для view secondary только)
+     */
+    tagView?: TagProps['view'];
 };
 type TabProps = {
     /**
@@ -123,7 +131,7 @@ type TabListTitle = {
     collapsed?: boolean;
     dataTestId?: string;
 };
-type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll'> & {
+type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView'> & {
     /**
      * Заголовки табов
      */
@@ -144,4 +152,7 @@ type Styles = {
         [key: string]: string;
     };
 };
-export { SelectedId, TabsProps, TabProps, TabListTitle, TabListProps, SecondaryTabListProps, UseTabsProps, Styles };
+type PlatformProps = {
+    platform: 'desktop' | 'mobile';
+};
+export { SelectedId, TabsProps, TabProps, TabListTitle, TabListProps, SecondaryTabListProps, UseTabsProps, Styles, PlatformProps };

package/index-c76d6398.d.ts

@@ -137,5 +137,4 @@ type NavigationBarProps = {
 declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
 export { NavigationBar };
 export * from "./Component-63dec22f";
-export * from "./Component-8b2c2707";
 export type { NavigationBarProps };

package/index-ebda875c.d.ts

@@ -1,40 +1,105 @@
-/// <reference types="react-transition-group" />
 /// <reference types="react" />
+/// <reference types="react-transition-group" />
 import React from "react";
-import { MouseEvent, ReactNode } from "react";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionProps } from "react-transition-group/Transition";
-type BackdropProps = Partial<TransitionProps> & {
+import { ButtonHTMLAttributes, ReactNode, RefObject } from "react";
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type NativeProps = ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseTagProps = Omit<NativeProps, "onClick"> & {
     /**
-     * Прозрачный бэкдроп
+     * Отображение кнопки в отмеченном (зажатом) состоянии
      */
-    invisible?: boolean;
+    checked?: boolean;
     /**
-     * Управляет видимостью компонента
+     * Размер компонента
+     */
+    size?: "xxs" | "xs" | "s" | "m" | "l" | "xl";
+    /**
+     * Дочерние элементы.
      */
-    open: boolean;
+    children?: ReactNode;
     /**
-     * Обработчик клика по бэкдропу
+     * Дополнительный класс для обёртки children
      */
-    onClose?: (event: MouseEvent<HTMLElement>) => void;
+    childrenClassName?: string;
     /**
-     * Дополнительный класс
+     * Слот слева
      */
-    className?: string;
+    leftAddons?: ReactNode;
     /**
-     * Классы анимации
-     *
-     * http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames
+     * Слот справа
      */
-    transitionClassNames?: string | CSSTransitionClassNames;
+    rightAddons?: ReactNode;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
     /**
-     * Дочерние элементы.
+     * Обработчик нажатия
      */
-    children?: ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        checked: boolean;
+        name?: string;
+    }) => void;
+    /**
+     * ref на children
+     */
+    childrenRef?: RefObject<HTMLSpanElement>;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted";
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Используйте props shape и view
+     * Вариант тега
+     */
+    variant?: "default" | "alt";
+    /**
+     * Форма тега
+     */
+    shape?: "rounded" | "rectangular";
+    /**
+     * Стиль тега
+     */
+    view?: "outlined" | "filled";
+    /**
+     * Основные стили компонента.
+     */
+    styles?: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap?: StyleColors;
 };
-declare const Backdrop: React.FC<BackdropProps>;
-export { BackdropProps, Backdrop };
+declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClick"> & {
+    checked?: boolean | undefined;
+    size?: "s" | "xxs" | "xs" | "m" | "l" | "xl" | undefined;
+    children?: ReactNode;
+    childrenClassName?: string | undefined;
+    leftAddons?: ReactNode;
+    rightAddons?: ReactNode;
+    dataTestId?: string | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        checked: boolean;
+        name?: string;
+    }) => void) | undefined;
+    childrenRef?: React.RefObject<HTMLSpanElement> | undefined;
+    colors?: "default" | "inverted" | undefined;
+    variant?: "default" | "alt" | undefined;
+    shape?: "rounded" | "rectangular" | undefined;
+    view?: "outlined" | "filled" | undefined;
+    styles?: {
+        [key: string]: string;
+    } | undefined;
+    colorStylesMap?: StyleColors | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { StyleColors, NativeProps, BaseTagProps, BaseTag };

package/index.js

@@ -17,14 +17,19 @@ require('./hooks/use-tabs.js');
 require('@alfalab/core-components-shared');
 require('./components/scrollable-container/Component.js');
 require('compute-scroll-into-view');
+require('./components/scroll-controls/Component.js');
+require('lodash.debounce');
+require('@alfalab/core-components-icon-button');
+require('@alfalab/icons-glyph/ChevronLeftMIcon');
+require('@alfalab/icons-glyph/ChevronRightMIcon');
+require('./components/scroll-controls/utils.js');
 require('./components/title/Component.js');
-require('./index.module-0d8ea41a.js');
+require('./index.module-ee99c069.js');
 require('./components/primary-tablist/Component.mobile.js');
-require('./mobile.module-a305e8da.js');
 require('./components/secondary-tablist/Component.desktop.js');
 require('@alfalab/core-components-tag/desktop');
 require('./components/secondary-tablist/Component.js');
-require('./index.module-38e4686f.js');
+require('./index.module-447ba3e0.js');
 require('./components/secondary-tablist/Component.mobile.js');
 require('@alfalab/core-components-tag/mobile');
 require('./components/tabs/Component.js');

package/index.module-447ba3e0.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var commonStyles = {"component":"tabs__component_tc0jp","fullWidthScroll":"tabs__fullWidthScroll_tc0jp","container":"tabs__container_tc0jp","title":"tabs__title_tc0jp","xxs":"tabs__xxs_tc0jp","xs":"tabs__xs_tc0jp","s":"tabs__s_tc0jp","m":"tabs__m_tc0jp","l":"tabs__l_tc0jp","xl":"tabs__xl_tc0jp"};
+require('./components/secondary-tablist/index.css')
+
+exports.commonStyles = commonStyles;

package/index.module-ee99c069.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var commonStyles = {"component":"tabs__component_1u3uq","fullWidthScroll":"tabs__fullWidthScroll_1u3uq","container":"tabs__container_1u3uq","title":"tabs__title_1u3uq","disabled":"tabs__disabled_1u3uq","focused":"tabs__focused_1u3uq","collapsed":"tabs__collapsed_1u3uq","selected":"tabs__selected_1u3uq","line":"tabs__line_1u3uq","option":"tabs__option_1u3uq","s":"tabs__s_1u3uq","xs":"tabs__xs_1u3uq","xxs":"tabs__xxs_1u3uq","pickerWrapper":"tabs__pickerWrapper_1u3uq","m":"tabs__m_1u3uq","l":"tabs__l_1u3uq","xl":"tabs__xl_1u3uq","rightAddons":"tabs__rightAddons_1u3uq"};
+require('./components/primary-tablist/index.css')
+
+exports.commonStyles = commonStyles;

package/mobile.js

@@ -15,12 +15,17 @@ require('./hooks/use-tabs.js');
 require('@alfalab/core-components-shared');
 require('./components/scrollable-container/Component.js');
 require('compute-scroll-into-view');
+require('./components/scroll-controls/Component.js');
+require('lodash.debounce');
+require('@alfalab/core-components-icon-button');
+require('@alfalab/icons-glyph/ChevronLeftMIcon');
+require('@alfalab/icons-glyph/ChevronRightMIcon');
+require('./components/scroll-controls/utils.js');
 require('./components/title/Component.js');
-require('./index.module-0d8ea41a.js');
-require('./mobile.module-a305e8da.js');
+require('./index.module-ee99c069.js');
 require('@alfalab/core-components-tag/mobile');
 require('./components/secondary-tablist/Component.js');
-require('./index.module-38e4686f.js');
+require('./index.module-447ba3e0.js');
 require('./components/tabs/Component.js');
 
 

package/modern/collapsible.d.ts

@@ -1,7 +1,2 @@
-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 { TabsCollapsible, TabsCollapsibleProps } from "./components/tabs/Component.collapsible";
 export * from "./components/tab/index";

package/modern/collapsible.js

@@ -1,19 +1,13 @@
-export { TabsCollapsibleResponsive as TabsCollapsible } from './components/tabs/Component.collapsible.responsive.js';
-export { TabsCollapsibleDesktop } from './components/tabs/Component.collabsible.desktop.js';
-export { TabsCollapsibleMobile } from './components/tabs/Component.collapsible.mobile.js';
-export { CollapsiblePrimaryTabListResponsive } from './components/primary-tablist/Component.collapsible.responsive.js';
-export { CollapsiblePrimaryTabListDesktop } from './components/primary-tablist/Component.collapsible.desktop.js';
-export { CollapsiblePrimaryTabListMobile } from './components/primary-tablist/Component.collapsible.mobile.js';
+export { TabsCollapsible } from './components/tabs/Component.collapsible.js';
 export { Tab } from './components/tab/Component.js';
 import 'react';
-import './components/tabs/Component.js';
-import '@alfalab/core-components-mq/modern';
 import './components/primary-tablist/Component.collapsible.js';
 import 'classnames';
 import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-keyboard-focusable/modern';
 import '@alfalab/core-components-picker-button/modern/desktop';
 import './hooks/use-tablist-titles.js';
+import '@alfalab/core-components-mq/modern';
 import './hooks/use-collapsible-elements.js';
 import '@juggle/resize-observer';
 import '@alfalab/hooks';
@@ -21,5 +15,5 @@ import './hooks/use-tabs.js';
 import '@alfalab/core-components-shared/modern';
 import './synthetic-events.js';
 import './components/title/Component.js';
-import './index.module-6f255828.js';
-import './mobile.module-02182f0f.js';
+import './index.module-22ff4191.js';
+import './components/tabs/Component.js';

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

@@ -1,5 +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;
+import { TabListProps } from "../../typings";
+declare const CollapsiblePrimaryTabList: ({ size, className, containerClassName, titles, selectedId, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint, defaultMatchMediaValue, }: TabListProps) => React.JSX.Element;
 export { CollapsiblePrimaryTabList };

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

@@ -6,6 +6,7 @@ import { PickerButtonDesktop } from '@alfalab/core-components-picker-button/mode
 import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
 import { createSyntheticMouseEvent } from '../../synthetic-events.js';
 import { Title } from '../title/Component.js';
+import { c as commonStyles } from '../../index.module-22ff4191.js';
 import '@alfalab/core-components-mq/modern';
 import '../../hooks/use-collapsible-elements.js';
 import '@juggle/resize-observer';
@@ -13,8 +14,7 @@ import '@alfalab/hooks';
 import '../../hooks/use-tabs.js';
 import '@alfalab/core-components-shared/modern';
 
-const DEFAULT_STYLES = {};
-const CollapsiblePrimaryTabList = ({ size, className, containerClassName, titles = [], styles = DEFAULT_STYLES, selectedId = titles.length ? titles[0].id : undefined, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint = 1024, defaultMatchMediaValue, }) => {
+const CollapsiblePrimaryTabList = ({ size = 'm', className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint = 1024, defaultMatchMediaValue, }) => {
     const lineRef = useRef(null);
     const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } = useTablistTitles({
         titles,
@@ -35,11 +35,11 @@ const CollapsiblePrimaryTabList = ({ size, className, containerClassName, titles
             options.push({
                 key: title.title,
                 value: title.id,
-                content: React.createElement(Title, { ...title, styles: styles, isOption: true }),
+                content: React.createElement(Title, { ...title, styles: commonStyles, isOption: true }),
             });
         }
         return options;
-    }, []), [tablistTitles, styles]);
+    }, []), [tablistTitles]);
     const collapsedAddonsLength = tablistTitles.filter((title) => title.collapsed && title.rightAddons).length;
     const handleOptionsChange = (payload) => {
         if (payload.selected?.value && onChange) {
@@ -48,14 +48,14 @@ const CollapsiblePrimaryTabList = ({ size, className, containerClassName, titles
             onChange(syntheticMouseEvent, { selectedId: payload.selected.value });
         }
     };
-    const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, size && styles[size], {
-            [styles.fullWidthScroll]: fullWidthScroll,
+    const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(commonStyles.component, className, size && commonStyles[size], {
+            [commonStyles.fullWidthScroll]: fullWidthScroll,
         }) },
-        tablistTitles.map(({ dataTestId: _, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles }))))),
-        collapsedOptions.length ? (React.createElement("span", { ref: addonRef, role: 'menu', className: styles.pickerWrapper },
-            React.createElement(PickerButtonDesktop, { fieldClassName: styles.title, optionClassName: cn(styles.pickerOption, size && styles[size]), options: collapsedOptions, onChange: handleOptionsChange, rightAddons: collapsedAddonsLength ? (React.createElement(Badge, { view: 'count', content: collapsedAddonsLength })) : null, size: 'l', view: 'ghost', label: '\u0415\u0449\u0451', popoverPosition: 'bottom-end' }))) : null,
-        React.createElement("div", { className: styles.line, ref: lineRef })));
-    return (React.createElement("div", { ref: containerRef, className: cn(styles.container, containerClassName) }, renderContent()));
+        tablistTitles.map(({ dataTestId: _, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: commonStyles }))))),
+        collapsedOptions.length ? (React.createElement("span", { ref: addonRef, role: 'menu', className: commonStyles.pickerWrapper },
+            React.createElement(PickerButtonDesktop, { fieldClassName: commonStyles.title, optionClassName: cn(commonStyles.pickerOption, size && commonStyles[size]), options: collapsedOptions, onChange: handleOptionsChange, rightAddons: collapsedAddonsLength ? (React.createElement(Badge, { view: 'count', content: collapsedAddonsLength })) : null, size: 'm', view: 'ghost', label: '\u0415\u0449\u0451', popoverPosition: 'bottom-end' }))) : null,
+        React.createElement("div", { className: commonStyles.line, ref: lineRef })));
+    return (React.createElement("div", { ref: containerRef, className: cn(commonStyles.container, containerClassName) }, renderContent()));
 };
 
 export { CollapsiblePrimaryTabList };

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

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

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

@@ -1,14 +1,20 @@
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-6f255828.js';
+import { c as commonStyles } from '../../index.module-22ff4191.js';
 import 'classnames';
 import '@alfalab/core-components-keyboard-focusable/modern';
 import '../../hooks/use-tabs.js';
 import '@alfalab/core-components-shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
+import '../scroll-controls/Component.js';
+import 'lodash.debounce';
+import '@alfalab/core-components-icon-button/modern';
+import '@alfalab/icons-glyph/ChevronLeftMIcon';
+import '@alfalab/icons-glyph/ChevronRightMIcon';
+import '../scroll-controls/utils.js';
 import '../title/Component.js';
 
-const PrimaryTabListDesktop = ({ size = 'm', ...restProps }) => (React.createElement(PrimaryTabList, { ...restProps, size: size, styles: commonStyles }));
+const PrimaryTabListDesktop = ({ size = 'm', ...restProps }) => (React.createElement(PrimaryTabList, { ...restProps, size: size, styles: commonStyles, platform: 'desktop' }));
 
 export { PrimaryTabListDesktop };