@alfalab/core-components 28.2.6 → 28.4.0

package/tabs/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-f5e1c50c.js');
+require('./tslib.es6-07644b92.js');
 require('react');
 require('../keyboard-focusable');
 require('classnames');
@@ -8,11 +8,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-a4648236.js');
+require('./index.module-a3947992.js');
 require('./components/primary-tablist/Component.desktop.js');
 require('../tag');
 require('./components/secondary-tablist/Component.js');
-require('./index.module-ba450ee2.js');
+require('./index.module-5be75f78.js');
 require('./components/secondary-tablist/Component.desktop.js');
 var components_tab_Component = require('./components/tab/Component.js');
 require('./components/tabs/Component.js');

package/tabs/index.module-5be75f78.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_13b32","fullWidthScroll":"tabs__fullWidthScroll_13b32","container":"tabs__container_13b32","title":"tabs__title_13b32","xxs":"tabs__xxs_13b32","xs":"tabs__xs_13b32","s":"tabs__s_13b32","m":"tabs__m_13b32","l":"tabs__l_13b32","xl":"tabs__xl_13b32"};
+require('./components/secondary-tablist/index.css');
+
+exports.commonStyles = commonStyles;

package/tabs/index.module-a3947992.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_14tom","fullWidthScroll":"tabs__fullWidthScroll_14tom","container":"tabs__container_14tom","title":"tabs__title_14tom","disabled":"tabs__disabled_14tom","focused":"tabs__focused_14tom","selected":"tabs__selected_14tom","line":"tabs__line_14tom","s":"tabs__s_14tom","xs":"tabs__xs_14tom","xxs":"tabs__xxs_14tom","m":"tabs__m_14tom","l":"tabs__l_14tom","xl":"tabs__xl_14tom","rightAddons":"tabs__rightAddons_14tom"};
+require('./components/primary-tablist/index.css');
+
+exports.commonStyles = commonStyles;

package/tabs/mobile.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-f5e1c50c.js');
+require('./tslib.es6-07644b92.js');
 require('react');
 require('../keyboard-focusable');
 require('classnames');
@@ -8,10 +8,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-a4648236.js');
+require('./index.module-a3947992.js');
 require('../tag');
 require('./components/secondary-tablist/Component.js');
-require('./index.module-ba450ee2.js');
+require('./index.module-5be75f78.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/tabs/modern/components/primary-tablist/Component.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="react" />
 import React from 'react';
 import { Styles } from "../../typings";
-declare const PrimaryTabList: ({ size, styles, className, containerClassName, titles, selectedId, scrollable, onChange, dataTestId, }: Pick<import("../../typings").TabsProps, "className" | "onChange" | "size" | "dataTestId" | "containerClassName" | "defaultMatch" | "selectedId" | "scrollable"> & {
+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?: {
         title: string;
         id: React.ReactText;
         disabled?: boolean | undefined;
         rightAddons?: React.ReactNode;
         hidden?: boolean | undefined;
+        toggleClassName?: string | undefined;
     }[] | undefined;
 } & Styles) => JSX.Element;
 export { PrimaryTabList };

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

@@ -5,7 +5,7 @@ import '../../../../keyboard-focusable/modern';
 import '../scrollable-container/Component.js';
 import '../../useTabs.js';
 import { PrimaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-f5cb39c0.js';
+import { c as commonStyles } from '../../index.module-9f14a613.js';
 
 const PrimaryTabListDesktop = ({ size = 'm', ...restProps }) => (React.createElement(PrimaryTabList, Object.assign({}, restProps, { size: size, styles: commonStyles })));
 

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

@@ -5,7 +5,7 @@ import { KeyboardFocusable } from '../../../../keyboard-focusable/modern';
 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/tabs/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/tabs/modern/components/primary-tablist/Component.mobile.js

@@ -5,9 +5,9 @@ import '../../../../keyboard-focusable/modern';
 import '../scrollable-container/Component.js';
 import '../../useTabs.js';
 import { PrimaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-f5cb39c0.js';
+import { c as commonStyles } from '../../index.module-9f14a613.js';
 
-var mobileStyles = {"title":"tabs__title_1bdh7 tabs__title_14lqt","mobile":"tabs__mobile_1bdh7"};
+var mobileStyles = {"title":"tabs__title_1ysd2 tabs__title_14tom","mobile":"tabs__mobile_1ysd2"};
 require('./mobile.css');
 
 const styles = {

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

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

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

@@ -6,16 +6,16 @@ import '../../../../keyboard-focusable/modern';
 import '../scrollable-container/Component.js';
 import '../../useTabs.js';
 import './Component.js';
-import '../../index.module-f5cb39c0.js';
+import '../../index.module-9f14a613.js';
 import { PrimaryTabListDesktop } from './Component.desktop.js';
 import { PrimaryTabListMobile } from './Component.mobile.js';
 
-const PrimaryTabListResponsive = ({ size, defaultMatch = 'desktop', ...restProps }) => {
+const PrimaryTabListResponsive = ({ size, defaultMatch = 'desktop', fullWidthScroll, ...restProps }) => {
     const [view] = useMedia([
         ['mobile', '(max-width: 767px)'],
         ['desktop', '(min-width: 768px)'],
     ], defaultMatch);
-    return view === 'desktop' ? (React.createElement(PrimaryTabListDesktop, Object.assign({ size: size }, restProps))) : (React.createElement(PrimaryTabListMobile, Object.assign({}, restProps)));
+    return view === 'desktop' ? (React.createElement(PrimaryTabListDesktop, Object.assign({ size: size }, restProps))) : (React.createElement(PrimaryTabListMobile, Object.assign({ fullWidthScroll: fullWidthScroll }, restProps)));
 };
 
 export { PrimaryTabListResponsive };

package/tabs/modern/components/primary-tablist/index.css

@@ -1,4 +1,4 @@
-/* hash: 1nrnk */
+/* hash: hb1aj */
 :root {
     --color-light-border-accent: #ef3124;
     --color-light-border-link: #007aff;
@@ -82,10 +82,12 @@
 
     /* size xl */
 }
-.tabs__component_14lqt {
-    position: relative
+.tabs__component_14tom {
+    position: relative;
+    display: inline-flex;
+    min-width: 100%
 }
-.tabs__component_14lqt:before {
+.tabs__component_14tom:before {
         content: '';
         display: block;
         position: absolute;
@@ -94,11 +96,15 @@
         width: 100%;
         background-color: var(--primary-tablist-bottom-border-color);
     }
-.tabs__container_14lqt {
+.tabs__fullWidthScroll_14tom {
+    min-width: calc(100% - 2 * var(--gap-m));
+    margin: 0 var(--gap-m);
+}
+.tabs__container_14tom {
     position: relative;
-    display: flex;
+    overflow: hidden;
 }
-.tabs__title_14lqt {
+.tabs__title_14tom {
     display: flex;
     align-items: center;
     height: 100%;
@@ -116,22 +122,22 @@
     cursor: pointer;
     outline: none
 }
-.tabs__title_14lqt:not(.tabs__disabled_14lqt):hover {
+.tabs__title_14tom:not(.tabs__disabled_14tom):hover {
         color: var(--primary-tablist-hover-color);
     }
-.tabs__focused_14lqt {
+.tabs__focused_14tom {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.tabs__selected_14lqt {
+.tabs__selected_14tom {
     cursor: default;
     color: var(--primary-tablist-selected-color);
 }
-.tabs__disabled_14lqt {
+.tabs__disabled_14tom {
     cursor: var(--disabled-cursor);
     color: var(--primary-tablist-disabled-color);
 }
-.tabs__line_14lqt {
+.tabs__line_14tom {
     position: absolute;
     height: 3px;
     bottom: 0;
@@ -140,46 +146,46 @@
     transition: transform 0.2s ease, width 0.2s ease;
 }
 /* sizes */
-.tabs__s_14lqt .tabs__title_14lqt, .tabs__xs_14lqt .tabs__title_14lqt, .tabs__xxs_14lqt .tabs__title_14lqt {
+.tabs__s_14tom .tabs__title_14tom, .tabs__xs_14tom .tabs__title_14tom, .tabs__xxs_14tom .tabs__title_14tom {
         padding: var(--primary-tablist-s-padding);
         font-size: var(--primary-tablist-s-font-size);
         font-weight: var(--primary-tablist-s-font-weight);
         font-family: var(--primary-tablist-s-font-family);
         line-height: 24px;
     }
-.tabs__s_14lqt .tabs__title_14lqt + .tabs__title_14lqt, .tabs__xs_14lqt .tabs__title_14lqt + .tabs__title_14lqt, .tabs__xxs_14lqt .tabs__title_14lqt + .tabs__title_14lqt {
+.tabs__s_14tom .tabs__title_14tom + .tabs__title_14tom, .tabs__xs_14tom .tabs__title_14tom + .tabs__title_14tom, .tabs__xxs_14tom .tabs__title_14tom + .tabs__title_14tom {
         margin-left: var(--primary-tablist-s-gaps);
     }
-.tabs__m_14lqt .tabs__title_14lqt {
+.tabs__m_14tom .tabs__title_14tom {
         padding: var(--primary-tablist-m-padding);
         font-size: var(--primary-tablist-m-font-size);
         font-weight: var(--primary-tablist-m-font-weight);
         font-family: var(--primary-tablist-m-font-family);
         line-height: 24px;
     }
-.tabs__m_14lqt .tabs__title_14lqt + .tabs__title_14lqt {
+.tabs__m_14tom .tabs__title_14tom + .tabs__title_14tom {
         margin-left: var(--primary-tablist-m-gaps);
     }
-.tabs__l_14lqt .tabs__title_14lqt {
+.tabs__l_14tom .tabs__title_14tom {
         padding: var(--primary-tablist-l-padding);
         font-size: var(--primary-tablist-l-font-size);
         font-weight: var(--primary-tablist-l-font-weight);
         font-family: var(--primary-tablist-l-font-family);
         line-height: 24px;
     }
-.tabs__l_14lqt .tabs__title_14lqt + .tabs__title_14lqt {
+.tabs__l_14tom .tabs__title_14tom + .tabs__title_14tom {
         margin-left: var(--primary-tablist-l-gaps);
     }
-.tabs__xl_14lqt .tabs__title_14lqt {
+.tabs__xl_14tom .tabs__title_14tom {
         padding: var(--primary-tablist-xl-padding);
         font-size: var(--primary-tablist-xl-font-size);
         font-weight: var(--primary-tablist-xl-font-weight);
         font-family: var(--primary-tablist-xl-font-family);
         line-height: 32px;
     }
-.tabs__xl_14lqt .tabs__title_14lqt + .tabs__title_14lqt {
+.tabs__xl_14tom .tabs__title_14tom + .tabs__title_14tom {
         margin-left: var(--primary-tablist-xl-gaps);
     }
-.tabs__rightAddons_14lqt {
+.tabs__rightAddons_14tom {
     margin-left: var(--gap-xs);
 }

package/tabs/modern/components/primary-tablist/mobile.css

@@ -1,4 +1,4 @@
-/* hash: kqnkd */
+/* hash: 86jj6 */
 :root {
 }:root {
 }:root {
@@ -86,9 +86,11 @@
     /* size l */
 
     /* size xl */
-}.tabs__component_14lqt {
-    position: relative
-}.tabs__component_14lqt:before {
+}.tabs__component_14tom {
+    position: relative;
+    display: inline-flex;
+    min-width: 100%
+}.tabs__component_14tom:before {
         content: '';
         display: block;
         position: absolute;
@@ -96,10 +98,13 @@
         height: 1px;
         width: 100%;
         background-color: var(--primary-tablist-bottom-border-color);
-    }.tabs__container_14lqt {
+    }.tabs__fullWidthScroll_14tom {
+    min-width: calc(100% - 2 * var(--gap-m));
+    margin: 0 var(--gap-m);
+}.tabs__container_14tom {
     position: relative;
-    display: flex;
-}.tabs__title_14lqt {
+    overflow: hidden;
+}.tabs__title_14tom {
     display: flex;
     align-items: center;
     height: 100%;
@@ -116,57 +121,57 @@
             user-select: none;
     cursor: pointer;
     outline: none
-}.tabs__title_14lqt:not(.tabs__disabled_14lqt):hover {
+}.tabs__title_14tom:not(.tabs__disabled_14tom):hover {
         color: var(--primary-tablist-hover-color);
-    }.tabs__focused_14lqt {
+    }.tabs__focused_14tom {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-}.tabs__selected_14lqt {
+}.tabs__selected_14tom {
     cursor: default;
     color: var(--primary-tablist-selected-color);
-}.tabs__disabled_14lqt {
+}.tabs__disabled_14tom {
     cursor: var(--disabled-cursor);
     color: var(--primary-tablist-disabled-color);
-}.tabs__line_14lqt {
+}.tabs__line_14tom {
     position: absolute;
     height: 3px;
     bottom: 0;
     left: 0;
     background-color: var(--primary-tablist-line-color);
     transition: transform 0.2s ease, width 0.2s ease;
-}/* sizes */.tabs__s_14lqt .tabs__title_14lqt, .tabs__xs_14lqt .tabs__title_14lqt, .tabs__xxs_14lqt .tabs__title_14lqt {
+}/* sizes */.tabs__s_14tom .tabs__title_14tom, .tabs__xs_14tom .tabs__title_14tom, .tabs__xxs_14tom .tabs__title_14tom {
         padding: var(--primary-tablist-s-padding);
         font-size: var(--primary-tablist-s-font-size);
         font-weight: var(--primary-tablist-s-font-weight);
         font-family: var(--primary-tablist-s-font-family);
         line-height: 24px;
-    }.tabs__s_14lqt .tabs__title_14lqt + .tabs__title_14lqt, .tabs__xs_14lqt .tabs__title_14lqt + .tabs__title_14lqt, .tabs__xxs_14lqt .tabs__title_14lqt + .tabs__title_14lqt {
+    }.tabs__s_14tom .tabs__title_14tom + .tabs__title_14tom, .tabs__xs_14tom .tabs__title_14tom + .tabs__title_14tom, .tabs__xxs_14tom .tabs__title_14tom + .tabs__title_14tom {
         margin-left: var(--primary-tablist-s-gaps);
-    }.tabs__m_14lqt .tabs__title_14lqt {
+    }.tabs__m_14tom .tabs__title_14tom {
         padding: var(--primary-tablist-m-padding);
         font-size: var(--primary-tablist-m-font-size);
         font-weight: var(--primary-tablist-m-font-weight);
         font-family: var(--primary-tablist-m-font-family);
         line-height: 24px;
-    }.tabs__m_14lqt .tabs__title_14lqt + .tabs__title_14lqt {
+    }.tabs__m_14tom .tabs__title_14tom + .tabs__title_14tom {
         margin-left: var(--primary-tablist-m-gaps);
-    }.tabs__l_14lqt .tabs__title_14lqt {
+    }.tabs__l_14tom .tabs__title_14tom {
         padding: var(--primary-tablist-l-padding);
         font-size: var(--primary-tablist-l-font-size);
         font-weight: var(--primary-tablist-l-font-weight);
         font-family: var(--primary-tablist-l-font-family);
         line-height: 24px;
-    }.tabs__l_14lqt .tabs__title_14lqt + .tabs__title_14lqt {
+    }.tabs__l_14tom .tabs__title_14tom + .tabs__title_14tom {
         margin-left: var(--primary-tablist-l-gaps);
-    }.tabs__xl_14lqt .tabs__title_14lqt {
+    }.tabs__xl_14tom .tabs__title_14tom {
         padding: var(--primary-tablist-xl-padding);
         font-size: var(--primary-tablist-xl-font-size);
         font-weight: var(--primary-tablist-xl-font-weight);
         font-family: var(--primary-tablist-xl-font-family);
         line-height: 32px;
-    }.tabs__xl_14lqt .tabs__title_14lqt + .tabs__title_14lqt {
+    }.tabs__xl_14tom .tabs__title_14tom + .tabs__title_14tom {
         margin-left: var(--primary-tablist-xl-gaps);
-    }.tabs__rightAddons_14lqt {
+    }.tabs__rightAddons_14tom {
     margin-left: var(--gap-xs);
 }
 :root {
@@ -960,15 +965,15 @@
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
 }
-.tabs__title_1bdh7 {
+.tabs__title_1ysd2 {
 }
-.tabs__mobile_1bdh7 .tabs__title_1bdh7 {
+.tabs__mobile_1ysd2 .tabs__title_1ysd2 {
         padding: var(--primary-tablist-mobile-padding);
         font-size: var(--primary-tablist-mobile-font-size);
         font-weight: var(--primary-tablist-mobile-font-weight);
         font-family: var(--primary-tablist-mobile-font-family);
         line-height: 24px
     }
-.tabs__mobile_1bdh7 .tabs__title_1bdh7 + .tabs__title_1bdh7 {
+.tabs__mobile_1ysd2 .tabs__title_1ysd2 + .tabs__title_1ysd2 {
             margin-left: var(--primary-tablist-mobile-gaps);
         }

package/tabs/modern/components/scrollable-container/Component.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ReactNode } from 'react';
+import { TabsProps } from "../../typings";
 type ScrollableContainerProps = {
     /**
      * Дополнительный класс контейнера
@@ -14,5 +15,5 @@ type ScrollableContainerProps = {
      */
     activeChild: HTMLElement | null;
 };
-declare const ScrollableContainer: ({ containerClassName, children, activeChild, }: ScrollableContainerProps) => JSX.Element;
+declare const ScrollableContainer: ({ containerClassName, children, activeChild, fullWidthScroll, }: ScrollableContainerProps & Pick<TabsProps, "fullWidthScroll">) => JSX.Element;
 export { ScrollableContainerProps, ScrollableContainer };

package/tabs/modern/components/scrollable-container/Component.js

@@ -2,10 +2,14 @@ import React, { useEffect } from 'react';
 import cn from 'classnames';
 import computeScrollIntoView from 'compute-scroll-into-view';
 
-var styles = {"container":"tabs__container_1l0yz"};
+var styles = {"container":"tabs__container_17qte","fullWidthScroll":"tabs__fullWidthScroll_17qte"};
 require('./index.css');
 
-const ScrollableContainer = ({ containerClassName, children, activeChild, }) => {
+/**
+ * Дополнительная прокрутка при клике на не поместившийся таб
+ */
+const ADDITIONAL_SCROLLLEFT_VALUE = 40;
+const ScrollableContainer = ({ containerClassName, children, activeChild, fullWidthScroll, }) => {
     useEffect(() => {
         if (activeChild) {
             const actions = computeScrollIntoView(activeChild, {
@@ -16,11 +20,16 @@ const ScrollableContainer = ({ containerClassName, children, activeChild, }) =>
             // TODO: animate?
             actions.forEach(({ el, left }) => {
                 // eslint-disable-next-line no-param-reassign
-                el.scrollLeft = left;
+                el.scrollLeft =
+                    el.scrollLeft > left
+                        ? left - ADDITIONAL_SCROLLLEFT_VALUE
+                        : left + ADDITIONAL_SCROLLLEFT_VALUE;
             });
         }
     }, [activeChild]);
-    return React.createElement("div", { className: cn(styles.container, containerClassName) }, children);
+    return (React.createElement("div", { className: cn(styles.container, containerClassName, {
+            [styles.fullWidthScroll]: fullWidthScroll,
+        }) }, children));
 };
 
 export { ScrollableContainer };

package/tabs/modern/components/scrollable-container/index.css

@@ -1,4 +1,4 @@
-/* hash: 17b68 */
+/* hash: eqmcc */
 :root {
 
     /* Hard */
@@ -7,6 +7,9 @@
 
     /* Hard up */
 }
+:root {
+    --gap-m-neg: -16px;
+}
 :root {
 
     /* mobile */
@@ -33,17 +36,19 @@
 
     /* size xl */
 }
-.tabs__container_1l0yz {
+.tabs__container_17qte {
     position: relative;
-    display: flex;
-    align-items: center;
     overflow-x: auto;
     overflow-y: hidden;
+    scroll-behavior: smooth;
     scrollbar-width: none
 }
-.tabs__container_1l0yz::-webkit-scrollbar {
+.tabs__container_17qte::-webkit-scrollbar {
         display: none;
     }
-.tabs__container_1l0yz > * {
+.tabs__container_17qte > * {
         flex-shrink: 0;
     }
+.tabs__fullWidthScroll_17qte {
+    margin: 0 var(--gap-m-neg);
+}

package/tabs/modern/components/secondary-tablist/Component.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="react" />
 import React from 'react';
 import { Styles } from "../../typings";
-declare const SecondaryTabList: ({ styles, className, containerClassName, size, titles, selectedId, scrollable, tagSize, onChange, dataTestId, }: Pick<import("../../typings").TabsProps, "className" | "onChange" | "size" | "dataTestId" | "containerClassName" | "defaultMatch" | "selectedId" | "scrollable"> & {
+declare const SecondaryTabList: ({ styles, className, containerClassName, size, titles, selectedId, scrollable, fullWidthScroll, tagSize, onChange, dataTestId, }: Pick<import("../../typings").TabsProps, "className" | "onChange" | "size" | "dataTestId" | "containerClassName" | "defaultMatch" | "selectedId" | "scrollable" | "fullWidthScroll"> & {
     titles?: {
         title: string;
         id: React.ReactText;
         disabled?: boolean | undefined;
         rightAddons?: React.ReactNode;
         hidden?: boolean | undefined;
+        toggleClassName?: string | undefined;
     }[] | undefined;
 } & {
     tagSize?: "xxs" | "xs" | "s" | "m" | "l" | "xl" | undefined;

package/tabs/modern/components/secondary-tablist/Component.desktop.d.ts

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

package/tabs/modern/components/secondary-tablist/Component.desktop.js

@@ -5,7 +5,7 @@ import '../scrollable-container/Component.js';
 import '../../useTabs.js';
 import '../../../../tag/modern';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-0293c64e.js';
+import { c as commonStyles } from '../../index.module-f9aba3b1.js';
 
 const SecondaryTabListDesktop = ({ size = 's', ...restProps }) => (React.createElement(SecondaryTabList, Object.assign({}, restProps, { size: size, styles: commonStyles, tagSize: size })));
 

package/tabs/modern/components/secondary-tablist/Component.js

@@ -5,16 +5,20 @@ import { ScrollableContainer } from '../scrollable-container/Component.js';
 import { useTabs } from '../../useTabs.js';
 import { Tag } from '../../../../tag/modern';
 
-const SecondaryTabList = ({ styles = {}, className, containerClassName, size, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, tagSize = 'xs', onChange, dataTestId, }) => {
+const SecondaryTabList = ({ styles = {}, className, containerClassName, size, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, fullWidthScroll, tagSize = 'xs', onChange, dataTestId, }) => {
     const { focusedTab, selectedTab, getTabListItemProps } = useTabs({
         titles,
         selectedId,
         onChange,
     });
-    const renderContent = () => titles
-        .filter(item => !item.hidden)
-        .map((item, index) => (React.createElement(Tag, Object.assign({}, getTabListItemProps(index), { key: item.id, className: styles.title, checked: item.id === selectedId, size: tagSize, rightAddons: item.rightAddons }), item.title)));
-    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()))));
+    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(Tag, Object.assign({}, getTabListItemProps(index), { key: item.id, className: cn(styles.title, item.toggleClassName), checked: item.id === selectedId, size: tagSize, rightAddons: item.rightAddons }), item.title));
+    })));
+    return scrollable ? (React.createElement(ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll }, renderContent())) : (React.createElement("div", { className: cn(styles.container, containerClassName) }, renderContent()));
 };
 
 export { SecondaryTabList };

package/tabs/modern/components/secondary-tablist/Component.mobile.d.ts

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

package/tabs/modern/components/secondary-tablist/Component.mobile.js

@@ -5,9 +5,9 @@ import '../scrollable-container/Component.js';
 import '../../useTabs.js';
 import '../../../../tag/modern';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-0293c64e.js';
+import { c as commonStyles } from '../../index.module-f9aba3b1.js';
 
-var mobileStyles = {"title":"tabs__title_1q9hx tabs__title_fw77p","mobile":"tabs__mobile_1q9hx"};
+var mobileStyles = {"title":"tabs__title_s1txc tabs__title_13b32","mobile":"tabs__mobile_s1txc"};
 require('./mobile.css');
 
 const styles = {

package/tabs/modern/components/secondary-tablist/Component.responsive.d.ts

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

package/tabs/modern/components/secondary-tablist/Component.responsive.js

@@ -6,16 +6,16 @@ import '../scrollable-container/Component.js';
 import '../../useTabs.js';
 import '../../../../tag/modern';
 import './Component.js';
-import '../../index.module-0293c64e.js';
+import '../../index.module-f9aba3b1.js';
 import { SecondaryTabListDesktop } from './Component.desktop.js';
 import { SecondaryTabListMobile } from './Component.mobile.js';
 
-const SecondaryTabListResponsive = ({ size, defaultMatch = 'desktop', ...restProps }) => {
+const SecondaryTabListResponsive = ({ size, defaultMatch = 'desktop', fullWidthScroll, ...restProps }) => {
     const [view] = useMedia([
         ['mobile', '(max-width: 767px)'],
         ['desktop', '(min-width: 768px)'],
     ], defaultMatch);
-    return view === 'desktop' ? (React.createElement(SecondaryTabListDesktop, Object.assign({ size: size }, restProps))) : (React.createElement(SecondaryTabListMobile, Object.assign({}, restProps)));
+    return view === 'desktop' ? (React.createElement(SecondaryTabListDesktop, Object.assign({ size: size }, restProps))) : (React.createElement(SecondaryTabListMobile, Object.assign({ fullWidthScroll: fullWidthScroll }, restProps)));
 };
 
 export { SecondaryTabListResponsive };