@alfalab/core-components-tabs 6.3.0 → 6.6.0

package/{dist → esm}/components/secondary-tablist/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 112s4 */
+/* hash: 97vuj */
 :root {
 }:root {
 }:root {
@@ -49,26 +49,26 @@
 
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
-}.tabs__component_1eesx {
+}.tabs__component_1yv68 {
     position: relative;
-    display: flex;
-    align-items: center;
-}.tabs__container_1eesx {
-    display: flex;
-    align-items: center;
-}.tabs__title_1eesx {
+    display: inline-flex;
+}.tabs__fullWidthScroll_1yv68 {
+    margin: 0 var(--gap-m);
+}.tabs__container_1yv68 {
+    overflow: hidden;
+}.tabs__title_1yv68 {
     white-space: nowrap;
-}/* sizes */.tabs__xxs_1eesx .tabs__title_1eesx + .tabs__title_1eesx {
+}/* sizes */.tabs__xxs_1yv68 .tabs__title_1yv68 + .tabs__title_1yv68 {
     margin-left: var(--secondary-tablist-xxs-gaps);
-}.tabs__xs_1eesx .tabs__title_1eesx + .tabs__title_1eesx {
+}.tabs__xs_1yv68 .tabs__title_1yv68 + .tabs__title_1yv68 {
     margin-left: var(--secondary-tablist-xs-gaps);
-}.tabs__s_1eesx .tabs__title_1eesx + .tabs__title_1eesx {
+}.tabs__s_1yv68 .tabs__title_1yv68 + .tabs__title_1yv68 {
     margin-left: var(--secondary-tablist-s-gaps);
-}.tabs__m_1eesx .tabs__title_1eesx + .tabs__title_1eesx {
+}.tabs__m_1yv68 .tabs__title_1yv68 + .tabs__title_1yv68 {
     margin-left: var(--secondary-tablist-m-gaps);
-}.tabs__l_1eesx .tabs__title_1eesx + .tabs__title_1eesx {
+}.tabs__l_1yv68 .tabs__title_1yv68 + .tabs__title_1yv68 {
     margin-left: var(--secondary-tablist-l-gaps);
-}.tabs__xl_1eesx .tabs__title_1eesx + .tabs__title_1eesx {
+}.tabs__xl_1yv68 .tabs__title_1yv68 + .tabs__title_1yv68 {
     margin-left: var(--secondary-tablist-xl-gaps);
 }
 :root {
@@ -453,7 +453,9 @@
     --color-dark-border-underline-inverted-alpha-30: rgba(182, 188, 195, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
     --color-dark-graphic-accent-shade-15: rgb(203, 42, 31);
+    --color-dark-graphic-accent-tint-7: rgb(240, 63, 51);
     --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
+    --color-dark-graphic-accent-tint-15: rgb(241, 80, 69);
     --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
     --color-dark-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
     --color-dark-graphic-negative-shade-20: rgb(193, 64, 55);
@@ -587,7 +589,9 @@
     --color-light-border-underline-inverted-alpha-30: rgba(109, 121, 134, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
     --color-light-graphic-accent-tint-15: rgb(241, 80, 69);
+    --color-light-graphic-accent-shade-7: rgb(222, 46, 33);
     --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
+    --color-light-graphic-accent-shade-15: rgb(203, 42, 31);
     --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
     --color-light-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
     --color-light-graphic-negative-tint-20: rgb(244, 115, 106);
@@ -776,6 +780,7 @@
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
     --border-radius-xxl: 20px;
+    --border-radius-3xl: 24px;
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
 }
@@ -858,8 +863,8 @@
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
 }
-.tabs__title_dshuh {
+.tabs__title_3pr9a {
 }
-.tabs__mobile_dshuh .tabs__title_dshuh + .tabs__title_dshuh {
+.tabs__mobile_3pr9a .tabs__title_3pr9a + .tabs__title_3pr9a {
         margin-left: var(--secondary-tablist-mobile-gaps);
     }

package/{dist/esm → esm}/components/tab/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"tabs__component_wp7vz","hidden":"tabs__hidden_wp7vz"};
+var styles = {"component":"tabs__component_1x5pl","hidden":"tabs__hidden_1x5pl"};
 require('./index.css')
 
 var Tab = function (_a) {

package/esm/components/tab/index.css

@@ -0,0 +1,8 @@
+/* hash: jcaf1 */
+.tabs__component_1x5pl {
+    outline: none;
+}
+
+.tabs__hidden_1x5pl {
+    display: none;
+}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TabsProps } from "../../typings";
+declare const Tabs: ({ TabList, className, containerClassName, size, defaultMatch, children, selectedId, scrollable, fullWidthScroll, keepMounted, dataTestId, onChange, }: Pick<TabsProps, "children" | "className" | "onChange" | "size" | "dataTestId" | "mobile" | "containerClassName" | "defaultMatch" | "selectedId" | "scrollable" | "fullWidthScroll" | "keepMounted" | "TabList">) => JSX.Element;
+export { Tabs };

package/{dist → esm}/components/tabs/Component.desktop.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { TabsProps } from "../../typings";
-type TabsDesktopProps = Omit<TabsProps, 'TabList'>;
+type TabsDesktopProps = Omit<TabsProps, 'TabList' | 'fullWidthScroll'>;
 declare const TabsDesktop: ({ view, scrollable, size, ...restProps }: Pick<TabsProps, "children" | "className" | "onChange" | "size" | "dataTestId" | "view" | "mobile" | "containerClassName" | "defaultMatch" | "selectedId" | "scrollable" | "keepMounted">) => JSX.Element;
 export { TabsDesktopProps, TabsDesktop };

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

@@ -1,16 +1,16 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-8a4b035c.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-656bff1b.js';
 import React from 'react';
-import '@alfalab/core-components-keyboard-focusable/dist/esm';
+import '@alfalab/core-components-keyboard-focusable/esm';
 import 'classnames';
 import 'compute-scroll-into-view';
 import '../scrollable-container/Component.js';
 import '../../useTabs.js';
 import '../primary-tablist/Component.js';
-import '../../index.module-4cd5c08a.js';
+import '../../index.module-71ecf1b8.js';
 import { PrimaryTabListDesktop } from '../primary-tablist/Component.desktop.js';
-import '@alfalab/core-components-tag/dist/esm';
+import '@alfalab/core-components-tag/esm';
 import '../secondary-tablist/Component.js';
-import '../../index.module-4687a3b6.js';
+import '../../index.module-4ce3b0dd.js';
 import { SecondaryTabListDesktop } from '../secondary-tablist/Component.desktop.js';
 import { Tabs } from './Component.js';
 

package/{dist/esm → esm}/components/tabs/Component.js

@@ -1,21 +1,22 @@
 import React, { cloneElement } from 'react';
 
 var Tabs = function (_a) {
-    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatch = _a.defaultMatch, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, _b = _a.keepMounted, keepMounted = _b === void 0 ? false : _b, dataTestId = _a.dataTestId, onChange = _a.onChange;
+    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatch = _a.defaultMatch, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange;
     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;
+        var _b = _a.props, title = _b.title, id = _b.id, rightAddons = _b.rightAddons, disabled = _b.disabled, hidden = _b.hidden, toggleClassName = _b.toggleClassName;
         return ({
             title: title,
             id: id,
             disabled: disabled,
             rightAddons: rightAddons,
             hidden: hidden,
+            toggleClassName: toggleClassName,
         });
     });
     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, onChange: onChange, dataTestId: dataTestId, defaultMatch: defaultMatch }),
+        React.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, onChange: onChange, dataTestId: dataTestId, defaultMatch: defaultMatch, fullWidthScroll: fullWidthScroll }),
         tabs.map(function (tab) { return cloneElement(tab, { hidden: tab.props.id !== selectedId }); })));
 };
 

package/{dist/esm → esm}/components/tabs/Component.mobile.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { TabsProps } from "../../typings";
 type TabsMobileProps = Omit<TabsProps, 'TabList' | 'size'>;
-declare const TabsMobile: ({ view, scrollable, ...restProps }: Pick<TabsProps, "children" | "className" | "onChange" | "dataTestId" | "view" | "mobile" | "containerClassName" | "defaultMatch" | "selectedId" | "scrollable" | "keepMounted">) => JSX.Element;
+declare const TabsMobile: ({ view, scrollable, ...restProps }: Pick<TabsProps, "children" | "className" | "onChange" | "dataTestId" | "view" | "mobile" | "containerClassName" | "defaultMatch" | "selectedId" | "scrollable" | "fullWidthScroll" | "keepMounted">) => JSX.Element;
 export { TabsMobileProps, TabsMobile };

package/{dist/esm → esm}/components/tabs/Component.mobile.js

@@ -1,15 +1,15 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-8a4b035c.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-656bff1b.js';
 import React from 'react';
-import '@alfalab/core-components-keyboard-focusable/dist/esm';
+import '@alfalab/core-components-keyboard-focusable/esm';
 import 'classnames';
 import 'compute-scroll-into-view';
 import '../scrollable-container/Component.js';
 import '../../useTabs.js';
 import '../primary-tablist/Component.js';
-import '../../index.module-4cd5c08a.js';
-import '@alfalab/core-components-tag/dist/esm';
+import '../../index.module-71ecf1b8.js';
+import '@alfalab/core-components-tag/esm';
 import '../secondary-tablist/Component.js';
-import '../../index.module-4687a3b6.js';
+import '../../index.module-4ce3b0dd.js';
 import { Tabs } from './Component.js';
 import { PrimaryTabListMobile } from '../primary-tablist/Component.mobile.js';
 import { SecondaryTabListMobile } from '../secondary-tablist/Component.mobile.js';

package/{dist/esm → esm}/components/tabs/Component.responsive.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { TabsProps } from "../../typings";
 type TabsResponsiveProps = Omit<TabsProps, 'TabList'>;
-declare const TabsResponsive: ({ view, scrollable, ...restProps }: Pick<TabsProps, "children" | "className" | "onChange" | "size" | "dataTestId" | "view" | "mobile" | "containerClassName" | "defaultMatch" | "selectedId" | "scrollable" | "keepMounted">) => JSX.Element;
+declare const TabsResponsive: ({ view, scrollable, ...restProps }: Pick<TabsProps, "children" | "className" | "onChange" | "size" | "dataTestId" | "view" | "mobile" | "containerClassName" | "defaultMatch" | "selectedId" | "scrollable" | "fullWidthScroll" | "keepMounted">) => JSX.Element;
 export { TabsResponsiveProps, TabsResponsive };

package/{dist/esm → esm}/components/tabs/Component.responsive.js

@@ -1,16 +1,16 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-8a4b035c.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-656bff1b.js';
 import React from 'react';
-import '@alfalab/core-components-keyboard-focusable/dist/esm';
+import '@alfalab/core-components-keyboard-focusable/esm';
 import 'classnames';
 import 'compute-scroll-into-view';
 import '../scrollable-container/Component.js';
 import '../../useTabs.js';
 import '../primary-tablist/Component.js';
-import '../../index.module-4cd5c08a.js';
+import '../../index.module-71ecf1b8.js';
 import '../primary-tablist/Component.desktop.js';
-import '@alfalab/core-components-tag/dist/esm';
+import '@alfalab/core-components-tag/esm';
 import '../secondary-tablist/Component.js';
-import '../../index.module-4687a3b6.js';
+import '../../index.module-4ce3b0dd.js';
 import '../secondary-tablist/Component.desktop.js';
 import { Tabs } from './Component.js';
 import '@alfalab/hooks';

package/{dist/esm → esm}/desktop.js

@@ -1,16 +1,16 @@
-import './tslib.es6-8a4b035c.js';
+import './tslib.es6-656bff1b.js';
 import 'react';
-import '@alfalab/core-components-keyboard-focusable/dist/esm';
+import '@alfalab/core-components-keyboard-focusable/esm';
 import 'classnames';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
 export { useTabs } from './useTabs.js';
 import './components/primary-tablist/Component.js';
-import './index.module-4cd5c08a.js';
+import './index.module-71ecf1b8.js';
 export { PrimaryTabListDesktop } from './components/primary-tablist/Component.desktop.js';
-import '@alfalab/core-components-tag/dist/esm';
+import '@alfalab/core-components-tag/esm';
 import './components/secondary-tablist/Component.js';
-import './index.module-4687a3b6.js';
+import './index.module-4ce3b0dd.js';
 export { SecondaryTabListDesktop } from './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';

package/{dist/esm → esm}/index.js

@@ -1,16 +1,16 @@
-import './tslib.es6-8a4b035c.js';
+import './tslib.es6-656bff1b.js';
 import 'react';
-import '@alfalab/core-components-keyboard-focusable/dist/esm';
+import '@alfalab/core-components-keyboard-focusable/esm';
 import 'classnames';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
 export { useTabs } from './useTabs.js';
 import './components/primary-tablist/Component.js';
-import './index.module-4cd5c08a.js';
+import './index.module-71ecf1b8.js';
 import './components/primary-tablist/Component.desktop.js';
-import '@alfalab/core-components-tag/dist/esm';
+import '@alfalab/core-components-tag/esm';
 import './components/secondary-tablist/Component.js';
-import './index.module-4687a3b6.js';
+import './index.module-4ce3b0dd.js';
 import './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';

package/esm/index.module-4ce3b0dd.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_1yv68","fullWidthScroll":"tabs__fullWidthScroll_1yv68","container":"tabs__container_1yv68","title":"tabs__title_1yv68","xxs":"tabs__xxs_1yv68","xs":"tabs__xs_1yv68","s":"tabs__s_1yv68","m":"tabs__m_1yv68","l":"tabs__l_1yv68","xl":"tabs__xl_1yv68"};
+require('./components/secondary-tablist/index.css')
+
+export { commonStyles as c };

package/esm/index.module-71ecf1b8.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_yvz75","fullWidthScroll":"tabs__fullWidthScroll_yvz75","container":"tabs__container_yvz75","title":"tabs__title_yvz75","disabled":"tabs__disabled_yvz75","focused":"tabs__focused_yvz75","selected":"tabs__selected_yvz75","line":"tabs__line_yvz75","s":"tabs__s_yvz75","xs":"tabs__xs_yvz75","xxs":"tabs__xxs_yvz75","m":"tabs__m_yvz75","l":"tabs__l_yvz75","xl":"tabs__xl_yvz75","rightAddons":"tabs__rightAddons_yvz75"};
+require('./components/primary-tablist/index.css')
+
+export { commonStyles as c };

package/{dist/esm → esm}/mobile.js

@@ -1,15 +1,15 @@
-import './tslib.es6-8a4b035c.js';
+import './tslib.es6-656bff1b.js';
 import 'react';
-import '@alfalab/core-components-keyboard-focusable/dist/esm';
+import '@alfalab/core-components-keyboard-focusable/esm';
 import 'classnames';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
 export { useTabs } from './useTabs.js';
 import './components/primary-tablist/Component.js';
-import './index.module-4cd5c08a.js';
-import '@alfalab/core-components-tag/dist/esm';
+import './index.module-71ecf1b8.js';
+import '@alfalab/core-components-tag/esm';
 import './components/secondary-tablist/Component.js';
-import './index.module-4687a3b6.js';
+import './index.module-4ce3b0dd.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';
 export { PrimaryTabListMobile } from './components/primary-tablist/Component.mobile.js';

package/{dist/esm → esm}/responsive.js

@@ -1,16 +1,16 @@
-import './tslib.es6-8a4b035c.js';
+import './tslib.es6-656bff1b.js';
 import 'react';
-import '@alfalab/core-components-keyboard-focusable/dist/esm';
+import '@alfalab/core-components-keyboard-focusable/esm';
 import 'classnames';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
 export { useTabs } from './useTabs.js';
 import './components/primary-tablist/Component.js';
-import './index.module-4cd5c08a.js';
+import './index.module-71ecf1b8.js';
 import './components/primary-tablist/Component.desktop.js';
-import '@alfalab/core-components-tag/dist/esm';
+import '@alfalab/core-components-tag/esm';
 import './components/secondary-tablist/Component.js';
-import './index.module-4687a3b6.js';
+import './index.module-4ce3b0dd.js';
 import './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';

package/{dist/modern → esm}/typings.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactElement, ReactNode } from 'react';
+import { MouseEvent, FC, ReactElement, ReactNode } from 'react';
 import { TagProps } from "@alfalab/core-components-tag";
 type SelectedId = string | number;
 type TabsMatchMedia = 'desktop' | 'mobile';
@@ -39,6 +39,10 @@ type TabsProps = {
      * Рендерить заголовки табов в контейнере со скроллом
      */
     scrollable?: boolean;
+    /**
+     * При скроле табы будут уходить в край экрана
+     */
+    fullWidthScroll?: boolean;
     /**
      * Компоненты табов
      */
@@ -68,9 +72,13 @@ type TabProps = {
      */
     title: string;
     /**
-     * Дополнительный класс
+     * Дополнительный класс для контейнера содержимого таба
      */
     className?: string;
+    /**
+     * Дополнительный класс для кнопки таба
+     */
+    toggleClassName?: string;
     /**
      * Блокирует таб
      */
@@ -96,17 +104,19 @@ type TabProps = {
      */
     dataTestId?: string;
 };
-type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatch' | 'selectedId' | 'scrollable' | 'onChange' | 'dataTestId'> & {
+type TabListTitle = {
+    title: string;
+    id: SelectedId;
+    disabled?: boolean;
+    rightAddons?: ReactNode;
+    hidden?: boolean;
+    toggleClassName?: string;
+};
+type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatch' | 'selectedId' | 'scrollable' | 'onChange' | 'dataTestId' | 'fullWidthScroll'> & {
     /**
      * Заголовки табов
      */
-    titles?: Array<{
-        title: string;
-        id: SelectedId;
-        disabled?: boolean;
-        rightAddons?: ReactNode;
-        hidden?: boolean;
-    }>;
+    titles?: TabListTitle[];
 };
 type SecondaryTabListProps = TabListProps & {
     tagSize?: TagProps['size'];
@@ -117,4 +127,4 @@ type Styles = {
         [key: string]: string;
     };
 };
-export { SelectedId, TabsMatchMedia, TabsProps, TabProps, TabListProps, SecondaryTabListProps, UseTabsProps, Styles };
+export { SelectedId, TabsMatchMedia, TabsProps, TabProps, TabListTitle, TabListProps, SecondaryTabListProps, UseTabsProps, Styles };

package/{dist/index.js → index.js}

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-394cebb0.js');
+require('./tslib.es6-5331b0cd.js');
 require('react');
 require('@alfalab/core-components-keyboard-focusable');
 require('classnames');
@@ -10,11 +10,11 @@ require('compute-scroll-into-view');
 var components_scrollableContainer_Component = require('./components/scrollable-container/Component.js');
 var useTabs = require('./useTabs.js');
 require('./components/primary-tablist/Component.js');
-require('./index.module-b9c824d3.js');
+require('./index.module-0ac56b69.js');
 require('./components/primary-tablist/Component.desktop.js');
 require('@alfalab/core-components-tag');
 require('./components/secondary-tablist/Component.js');
-require('./index.module-a61e7b44.js');
+require('./index.module-c97a2b1a.js');
 require('./components/secondary-tablist/Component.desktop.js');
 var components_tab_Component = require('./components/tab/Component.js');
 require('./components/tabs/Component.js');

package/index.module-0ac56b69.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var commonStyles = {"component":"tabs__component_yvz75","fullWidthScroll":"tabs__fullWidthScroll_yvz75","container":"tabs__container_yvz75","title":"tabs__title_yvz75","disabled":"tabs__disabled_yvz75","focused":"tabs__focused_yvz75","selected":"tabs__selected_yvz75","line":"tabs__line_yvz75","s":"tabs__s_yvz75","xs":"tabs__xs_yvz75","xxs":"tabs__xxs_yvz75","m":"tabs__m_yvz75","l":"tabs__l_yvz75","xl":"tabs__xl_yvz75","rightAddons":"tabs__rightAddons_yvz75"};
+require('./components/primary-tablist/index.css')
+
+exports.commonStyles = commonStyles;

package/index.module-c97a2b1a.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var commonStyles = {"component":"tabs__component_1yv68","fullWidthScroll":"tabs__fullWidthScroll_1yv68","container":"tabs__container_1yv68","title":"tabs__title_1yv68","xxs":"tabs__xxs_1yv68","xs":"tabs__xs_1yv68","s":"tabs__s_1yv68","m":"tabs__m_1yv68","l":"tabs__l_1yv68","xl":"tabs__xl_1yv68"};
+require('./components/secondary-tablist/index.css')
+
+exports.commonStyles = commonStyles;

package/{dist/mobile.js → mobile.js}

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-394cebb0.js');
+require('./tslib.es6-5331b0cd.js');
 require('react');
 require('@alfalab/core-components-keyboard-focusable');
 require('classnames');
@@ -10,10 +10,10 @@ require('compute-scroll-into-view');
 var components_scrollableContainer_Component = require('./components/scrollable-container/Component.js');
 var useTabs = require('./useTabs.js');
 require('./components/primary-tablist/Component.js');
-require('./index.module-b9c824d3.js');
+require('./index.module-0ac56b69.js');
 require('@alfalab/core-components-tag');
 require('./components/secondary-tablist/Component.js');
-require('./index.module-a61e7b44.js');
+require('./index.module-c97a2b1a.js');
 var components_tab_Component = require('./components/tab/Component.js');
 require('./components/tabs/Component.js');
 var components_primaryTablist_Component_mobile = require('./components/primary-tablist/Component.mobile.js');

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Styles } from "../../typings";
+declare const PrimaryTabList: ({ size, styles, className, containerClassName, titles, selectedId, scrollable, fullWidthScroll, onChange, dataTestId, }: Pick<import("../../typings").TabsProps, "className" | "onChange" | "size" | "dataTestId" | "containerClassName" | "defaultMatch" | "selectedId" | "scrollable" | "fullWidthScroll"> & {
+    titles?: import("../../typings").TabListTitle[] | undefined;
+} & Styles) => JSX.Element;
+export { PrimaryTabList };

package/{dist/modern → modern}/components/primary-tablist/Component.desktop.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import '@alfalab/core-components-keyboard-focusable/dist/modern';
+import '@alfalab/core-components-keyboard-focusable/modern';
 import 'classnames';
 import 'compute-scroll-into-view';
 import '../scrollable-container/Component.js';
 import '../../useTabs.js';
 import { PrimaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-4cd5c08a.js';
+import { c as commonStyles } from '../../index.module-71ecf1b8.js';
 
 const PrimaryTabListDesktop = ({ size = 'm', ...restProps }) => (React.createElement(PrimaryTabList, Object.assign({}, restProps, { size: size, styles: commonStyles })));
 

package/{dist/modern → modern}/components/primary-tablist/Component.js

@@ -1,11 +1,11 @@
 import React, { useRef, useEffect } from 'react';
-import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable/dist/modern';
+import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable/modern';
 import cn from 'classnames';
 import 'compute-scroll-into-view';
 import { ScrollableContainer } from '../scrollable-container/Component.js';
 import { useTabs } from '../../useTabs.js';
 
-const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, onChange, dataTestId, }) => {
+const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, fullWidthScroll, onChange, dataTestId, }) => {
     const lineRef = useRef(null);
     const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
         titles,
@@ -17,20 +17,22 @@ const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titl
             lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
             lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
         }
-    });
-    const renderContent = () => (React.createElement(React.Fragment, null,
+    }, [selectedTab]);
+    const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, size && styles[size], {
+            [styles.fullWidthScroll]: fullWidthScroll,
+        }) },
         titles.map((item, index) => {
             if (item.hidden)
                 return null;
             return (React.createElement(KeyboardFocusable, { key: item.id }, (ref, focused) => (React.createElement("button", Object.assign({}, getTabListItemProps(index, ref), { type: 'button', className: cn(styles.title, {
                     [styles.selected]: item.id === selectedId,
                     [styles.disabled]: item.disabled,
-                }) }),
+                }, item.toggleClassName) }),
                 React.createElement("span", { className: focused ? styles.focused : undefined }, item.title),
                 item.rightAddons && (React.createElement("span", { className: styles.rightAddons }, item.rightAddons))))));
         }),
         React.createElement("div", { className: styles.line, ref: lineRef })));
-    return (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, size && styles[size]) }, scrollable ? (React.createElement(ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName }, renderContent())) : (React.createElement("div", { className: cn(styles.container, containerClassName) }, renderContent()))));
+    return scrollable ? (React.createElement(ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll }, renderContent())) : (React.createElement("div", { className: cn(styles.container, containerClassName) }, renderContent()));
 };
 
 export { PrimaryTabList };

package/{dist/cssm → modern}/components/primary-tablist/Component.mobile.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { TabListProps } from "../../typings";
 type PrimaryTabListMobileProps = Omit<TabListProps, 'size'>;
-declare const PrimaryTabListMobile: ({ className, ...restProps }: Pick<TabListProps, "className" | "onChange" | "dataTestId" | "containerClassName" | "defaultMatch" | "selectedId" | "scrollable" | "titles">) => JSX.Element;
+declare const PrimaryTabListMobile: ({ className, ...restProps }: Pick<TabListProps, "className" | "onChange" | "dataTestId" | "containerClassName" | "defaultMatch" | "selectedId" | "scrollable" | "fullWidthScroll" | "titles">) => JSX.Element;
 export { PrimaryTabListMobileProps, PrimaryTabListMobile };

package/{dist/modern → modern}/components/primary-tablist/Component.mobile.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import '@alfalab/core-components-keyboard-focusable/dist/modern';
+import '@alfalab/core-components-keyboard-focusable/modern';
 import cn from 'classnames';
 import 'compute-scroll-into-view';
 import '../scrollable-container/Component.js';
 import '../../useTabs.js';
 import { PrimaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-4cd5c08a.js';
+import { c as commonStyles } from '../../index.module-71ecf1b8.js';
 
-var mobileStyles = {"title":"tabs__title_1o8np tabs__title_1c7rr","mobile":"tabs__mobile_1o8np"};
+var mobileStyles = {"title":"tabs__title_vbc6b tabs__title_yvz75","mobile":"tabs__mobile_vbc6b"};
 require('./mobile.css')
 
 const styles = {

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

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