@alfalab/core-components 36.5.1 → 37.1.0-beta.1

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

@@ -1,4 +1,4 @@
-/* hash: kkvnq */
+/* hash: z7wgy */
 :root {
 }:root {
 }:root {
@@ -88,11 +88,11 @@
     /* size l */
 
     /* size xl */
-}.tabs__component_1qk8p {
+}.tabs__component_1hdca {
     position: relative;
     display: inline-flex;
     min-width: 100%
-}.tabs__component_1qk8p:before {
+}.tabs__component_1hdca:before {
         content: '';
         display: block;
         position: absolute;
@@ -100,13 +100,13 @@
         height: 1px;
         width: 100%;
         background-color: var(--primary-tablist-bottom-border-color);
-    }.tabs__fullWidthScroll_1qk8p {
+    }.tabs__fullWidthScroll_1hdca {
     min-width: calc(100% - 2 * var(--gap-m));
     margin: 0 var(--gap-m);
-}.tabs__container_1qk8p {
+}.tabs__container_1hdca {
     position: relative;
     overflow: hidden;
-}.tabs__title_1qk8p {
+}.tabs__title_1hdca {
     display: flex;
     align-items: center;
     height: 100%;
@@ -123,76 +123,76 @@
             user-select: none;
     cursor: pointer;
     outline: none
-}.tabs__title_1qk8p:not(.tabs__disabled_1qk8p):hover {
+}.tabs__title_1hdca:not(.tabs__disabled_1hdca):hover {
         color: var(--primary-tablist-hover-color);
-    }.tabs__focused_1qk8p {
+    }.tabs__focused_1hdca {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-}.tabs__collapsed_1qk8p {
+}.tabs__collapsed_1hdca {
     order: 99;
     visibility: collapse;
-}.tabs__selected_1qk8p {
+}.tabs__selected_1hdca {
     cursor: default;
     color: var(--primary-tablist-selected-color);
-}.tabs__disabled_1qk8p {
+}.tabs__disabled_1hdca {
     cursor: var(--disabled-cursor);
     color: var(--primary-tablist-disabled-color);
-}.tabs__line_1qk8p {
+}.tabs__line_1hdca {
     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_1qk8p .tabs__title_1qk8p, .tabs__xs_1qk8p .tabs__title_1qk8p, .tabs__xxs_1qk8p .tabs__title_1qk8p {
+}/* sizes */.tabs__s_1hdca .tabs__title_1hdca, .tabs__xs_1hdca .tabs__title_1hdca, .tabs__xxs_1hdca .tabs__title_1hdca {
         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_1qk8p .tabs__title_1qk8p + .tabs__title_1qk8p, .tabs__xs_1qk8p .tabs__title_1qk8p + .tabs__title_1qk8p, .tabs__xxs_1qk8p .tabs__title_1qk8p + .tabs__title_1qk8p {
+    }.tabs__s_1hdca .tabs__title_1hdca + .tabs__title_1hdca, .tabs__xs_1hdca .tabs__title_1hdca + .tabs__title_1hdca, .tabs__xxs_1hdca .tabs__title_1hdca + .tabs__title_1hdca {
         margin-left: var(--primary-tablist-s-gaps);
-    }.tabs__s_1qk8p .tabs__pickerWrapper_1qk8p, .tabs__xs_1qk8p .tabs__pickerWrapper_1qk8p, .tabs__xxs_1qk8p .tabs__pickerWrapper_1qk8p {
+    }.tabs__s_1hdca .tabs__pickerWrapper_1hdca, .tabs__xs_1hdca .tabs__pickerWrapper_1hdca, .tabs__xxs_1hdca .tabs__pickerWrapper_1hdca {
         margin-left: var(--primary-tablist-s-gaps);
-    }.tabs__s_1qk8p .tabs__option_1qk8p, .tabs__xs_1qk8p .tabs__option_1qk8p, .tabs__xxs_1qk8p .tabs__option_1qk8p {
+    }.tabs__s_1hdca .tabs__option_1hdca, .tabs__xs_1hdca .tabs__option_1hdca, .tabs__xxs_1hdca .tabs__option_1hdca {
         padding: 0;
-    }.tabs__m_1qk8p .tabs__title_1qk8p {
+    }.tabs__m_1hdca .tabs__title_1hdca {
         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_1qk8p .tabs__title_1qk8p + .tabs__title_1qk8p {
+    }.tabs__m_1hdca .tabs__title_1hdca + .tabs__title_1hdca {
         margin-left: var(--primary-tablist-m-gaps);
-    }.tabs__m_1qk8p .tabs__pickerWrapper_1qk8p {
+    }.tabs__m_1hdca .tabs__pickerWrapper_1hdca {
         margin-left: var(--primary-tablist-m-gaps);
-    }.tabs__m_1qk8p .tabs__option_1qk8p {
+    }.tabs__m_1hdca .tabs__option_1hdca {
         padding: 0;
-    }.tabs__l_1qk8p .tabs__title_1qk8p {
+    }.tabs__l_1hdca .tabs__title_1hdca {
         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_1qk8p .tabs__title_1qk8p + .tabs__title_1qk8p {
+    }.tabs__l_1hdca .tabs__title_1hdca + .tabs__title_1hdca {
         margin-left: var(--primary-tablist-l-gaps);
-    }.tabs__l_1qk8p .tabs__pickerWrapper_1qk8p {
+    }.tabs__l_1hdca .tabs__pickerWrapper_1hdca {
         margin-left: var(--primary-tablist-l-gaps);
-    }.tabs__l_1qk8p .tabs__option_1qk8p {
+    }.tabs__l_1hdca .tabs__option_1hdca {
         padding: 0;
-    }.tabs__xl_1qk8p .tabs__title_1qk8p {
+    }.tabs__xl_1hdca .tabs__title_1hdca {
         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_1qk8p .tabs__title_1qk8p + .tabs__title_1qk8p {
+    }.tabs__xl_1hdca .tabs__title_1hdca + .tabs__title_1hdca {
         margin-left: var(--primary-tablist-xl-gaps);
-    }.tabs__xl_1qk8p .tabs__pickerWrapper_1qk8p {
+    }.tabs__xl_1hdca .tabs__pickerWrapper_1hdca {
         margin-left: var(--primary-tablist-xl-gaps);
-    }.tabs__xl_1qk8p .tabs__option_1qk8p {
+    }.tabs__xl_1hdca .tabs__option_1hdca {
         padding: 0;
-    }.tabs__rightAddons_1qk8p {
+    }.tabs__rightAddons_1hdca {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -1012,15 +1012,15 @@
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
 }
-.tabs__title_a14fy {
+.tabs__title_1mh0j {
 }
-.tabs__mobile_a14fy .tabs__title_a14fy {
+.tabs__mobile_1mh0j .tabs__title_1mh0j {
         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: var(--primary-tablist-mobile-line-height)
     }
-.tabs__mobile_a14fy .tabs__title_a14fy + .tabs__title_a14fy {
+.tabs__mobile_1mh0j .tabs__title_1mh0j + .tabs__title_1mh0j {
             margin-left: var(--primary-tablist-mobile-gaps);
         }

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

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import cn from 'classnames';
 import computeScrollIntoView from 'compute-scroll-into-view';
 
-const styles = {"container":"tabs__container_1vj2v","fullWidthScroll":"tabs__fullWidthScroll_1vj2v"};
+const styles = {"container":"tabs__container_16rkk","fullWidthScroll":"tabs__fullWidthScroll_16rkk"};
 require('./index.css');
 
 /**

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

@@ -1,4 +1,4 @@
-/* hash: 1lp9n */
+/* hash: 1yssk */
 :root {
 
     /* Hard */
@@ -36,19 +36,19 @@
 
     /* size xl */
 }
-.tabs__container_1vj2v {
+.tabs__container_16rkk {
     position: relative;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-behavior: smooth;
     scrollbar-width: none
 }
-.tabs__container_1vj2v::-webkit-scrollbar {
+.tabs__container_16rkk::-webkit-scrollbar {
         display: none;
     }
-.tabs__container_1vj2v > * {
+.tabs__container_16rkk > * {
         flex-shrink: 0;
     }
-.tabs__fullWidthScroll_1vj2v {
+.tabs__fullWidthScroll_16rkk {
     margin: 0 var(--gap-m-neg);
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-c40b8e40.js';
+import { c as commonStyles } from '../../index.module-de52298e.js';
 import 'classnames';
 import '../../../../tag/modern';
 import '../scrollable-container/Component.js';

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import cn from 'classnames';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-c40b8e40.js';
+import { c as commonStyles } from '../../index.module-de52298e.js';
 import '../../../../tag/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../../hooks/use-tabs.js';
 
-const mobileStyles = {"title":"tabs__title_1d11e tabs__title_1jzwz","mobile":"tabs__mobile_1d11e"};
+const mobileStyles = {"title":"tabs__title_hy89h tabs__title_xep1h","mobile":"tabs__mobile_hy89h"};
 require('./mobile.css');
 
 const styles = {

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

@@ -6,7 +6,7 @@ import 'classnames';
 import '../../../../tag/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
-import '../../index.module-c40b8e40.js';
+import '../../index.module-de52298e.js';
 import './Component.js';
 import '../../hooks/use-tabs.js';
 

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

@@ -1,4 +1,4 @@
-/* hash: nq7e2 */
+/* hash: 12d87 */
 :root {
 
     /* Hard */
@@ -44,35 +44,35 @@
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
 }
-.tabs__component_1jzwz {
+.tabs__component_xep1h {
     position: relative;
     display: inline-flex;
 }
-.tabs__fullWidthScroll_1jzwz {
+.tabs__fullWidthScroll_xep1h {
     margin: 0 var(--gap-m);
 }
-.tabs__container_1jzwz {
+.tabs__container_xep1h {
     overflow: hidden;
 }
-.tabs__title_1jzwz {
+.tabs__title_xep1h {
     white-space: nowrap;
 }
 /* sizes */
-.tabs__xxs_1jzwz .tabs__title_1jzwz + .tabs__title_1jzwz {
+.tabs__xxs_xep1h .tabs__title_xep1h + .tabs__title_xep1h {
     margin-left: var(--secondary-tablist-xxs-gaps);
 }
-.tabs__xs_1jzwz .tabs__title_1jzwz + .tabs__title_1jzwz {
+.tabs__xs_xep1h .tabs__title_xep1h + .tabs__title_xep1h {
     margin-left: var(--secondary-tablist-xs-gaps);
 }
-.tabs__s_1jzwz .tabs__title_1jzwz + .tabs__title_1jzwz {
+.tabs__s_xep1h .tabs__title_xep1h + .tabs__title_xep1h {
     margin-left: var(--secondary-tablist-s-gaps);
 }
-.tabs__m_1jzwz .tabs__title_1jzwz + .tabs__title_1jzwz {
+.tabs__m_xep1h .tabs__title_xep1h + .tabs__title_xep1h {
     margin-left: var(--secondary-tablist-m-gaps);
 }
-.tabs__l_1jzwz .tabs__title_1jzwz + .tabs__title_1jzwz {
+.tabs__l_xep1h .tabs__title_xep1h + .tabs__title_xep1h {
     margin-left: var(--secondary-tablist-l-gaps);
 }
-.tabs__xl_1jzwz .tabs__title_1jzwz + .tabs__title_1jzwz {
+.tabs__xl_xep1h .tabs__title_xep1h + .tabs__title_xep1h {
     margin-left: var(--secondary-tablist-xl-gaps);
 }

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

@@ -1,4 +1,4 @@
-/* hash: 1aqou */
+/* hash: kh84b */
 :root {
 }:root {
 }:root {
@@ -49,26 +49,26 @@
 
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
-}.tabs__component_1jzwz {
+}.tabs__component_xep1h {
     position: relative;
     display: inline-flex;
-}.tabs__fullWidthScroll_1jzwz {
+}.tabs__fullWidthScroll_xep1h {
     margin: 0 var(--gap-m);
-}.tabs__container_1jzwz {
+}.tabs__container_xep1h {
     overflow: hidden;
-}.tabs__title_1jzwz {
+}.tabs__title_xep1h {
     white-space: nowrap;
-}/* sizes */.tabs__xxs_1jzwz .tabs__title_1jzwz + .tabs__title_1jzwz {
+}/* sizes */.tabs__xxs_xep1h .tabs__title_xep1h + .tabs__title_xep1h {
     margin-left: var(--secondary-tablist-xxs-gaps);
-}.tabs__xs_1jzwz .tabs__title_1jzwz + .tabs__title_1jzwz {
+}.tabs__xs_xep1h .tabs__title_xep1h + .tabs__title_xep1h {
     margin-left: var(--secondary-tablist-xs-gaps);
-}.tabs__s_1jzwz .tabs__title_1jzwz + .tabs__title_1jzwz {
+}.tabs__s_xep1h .tabs__title_xep1h + .tabs__title_xep1h {
     margin-left: var(--secondary-tablist-s-gaps);
-}.tabs__m_1jzwz .tabs__title_1jzwz + .tabs__title_1jzwz {
+}.tabs__m_xep1h .tabs__title_xep1h + .tabs__title_xep1h {
     margin-left: var(--secondary-tablist-m-gaps);
-}.tabs__l_1jzwz .tabs__title_1jzwz + .tabs__title_1jzwz {
+}.tabs__l_xep1h .tabs__title_xep1h + .tabs__title_xep1h {
     margin-left: var(--secondary-tablist-l-gaps);
-}.tabs__xl_1jzwz .tabs__title_1jzwz + .tabs__title_1jzwz {
+}.tabs__xl_xep1h .tabs__title_xep1h + .tabs__title_xep1h {
     margin-left: var(--secondary-tablist-xl-gaps);
 }
 :root {
@@ -885,8 +885,8 @@
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
 }
-.tabs__title_1d11e {
+.tabs__title_hy89h {
 }
-.tabs__mobile_1d11e .tabs__title_1d11e + .tabs__title_1d11e {
+.tabs__mobile_hy89h .tabs__title_hy89h + .tabs__title_hy89h {
         margin-left: var(--secondary-tablist-mobile-gaps);
     }

package/tabs/modern/components/tab/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"component":"tabs__component_1n8dd","hidden":"tabs__hidden_1n8dd"};
+const styles = {"component":"tabs__component_ygv2g","hidden":"tabs__hidden_ygv2g"};
 require('./index.css');
 
 const Tab = ({ children, hidden, className, disabled, dataTestId }) => children ? (React.createElement("div", { className: cn(styles.component, {

package/tabs/modern/components/tab/index.css

@@ -1,8 +1,8 @@
-/* hash: 1ixi9 */
-.tabs__component_1n8dd {
+/* hash: 1a7vo */
+.tabs__component_ygv2g {
     outline: none;
 }
 
-.tabs__hidden_1n8dd {
+.tabs__hidden_ygv2g {
     display: none;
 }

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

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

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

@@ -11,9 +11,9 @@ import '@juggle/resize-observer';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import 'compute-scroll-into-view';
-import '../../index.module-54abd631.js';
+import '../../index.module-21bf7188.js';
 import '../../../../tag/modern';
-import '../../index.module-c40b8e40.js';
+import '../../index.module-de52298e.js';
 import '../primary-tablist/Component.js';
 import '../../hooks/use-tablist-titles.js';
 import '../../hooks/use-collapsible-elements.js';

package/tabs/modern/components/tabs/Component.js

@@ -1,6 +1,6 @@
 import React, { cloneElement } from 'react';
 
-const Tabs = ({ TabList, className, containerClassName, size, defaultMatch, children, selectedId, scrollable, collapsible, fullWidthScroll = false, keepMounted = false, dataTestId, onChange, }) => {
+const Tabs = ({ TabList, className, containerClassName, size, defaultMatch, children, selectedId, scrollable, collapsible, collapsedTabsIds, fullWidthScroll = false, keepMounted = false, dataTestId, onChange, }) => {
     const tabsArray = React.Children.toArray(children);
     const titles = tabsArray.map(({ props: { title, id, rightAddons, disabled, hidden, toggleClassName } }) => ({
         title,
@@ -12,7 +12,7 @@ const Tabs = ({ TabList, className, containerClassName, size, defaultMatch, chil
     }));
     const tabs = tabsArray.filter((tab) => 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, collapsible: collapsible, onChange: onChange, dataTestId: dataTestId, defaultMatch: defaultMatch, fullWidthScroll: fullWidthScroll }),
+        React.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsible: collapsible, collapsedTabsIds: collapsedTabsIds, onChange: onChange, dataTestId: dataTestId, defaultMatch: defaultMatch, fullWidthScroll: fullWidthScroll }),
         tabs.map((tab) => cloneElement(tab, { hidden: tab.props.id !== selectedId }))));
 };
 

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

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

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

@@ -11,9 +11,9 @@ import '@juggle/resize-observer';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import 'compute-scroll-into-view';
-import '../../index.module-54abd631.js';
+import '../../index.module-21bf7188.js';
 import '../../../../tag/modern';
-import '../../index.module-c40b8e40.js';
+import '../../index.module-de52298e.js';
 import '../primary-tablist/Component.js';
 import '../../hooks/use-tablist-titles.js';
 import '../../hooks/use-collapsible-elements.js';

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

@@ -11,10 +11,10 @@ import '@juggle/resize-observer';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import 'compute-scroll-into-view';
-import '../../index.module-54abd631.js';
+import '../../index.module-21bf7188.js';
 import '../primary-tablist/Component.mobile.js';
 import '../../../../tag/modern';
-import '../../index.module-c40b8e40.js';
+import '../../index.module-de52298e.js';
 import '../secondary-tablist/Component.mobile.js';
 import '../primary-tablist/Component.desktop.js';
 import '../primary-tablist/Component.js';

package/tabs/modern/components/title/Component.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 
-const Title = forwardRef(({ id, toggleClassName, title, styles = {}, rightAddons = null, hidden = false, selected = false, disabled = false, collapsed = false, focused = false, isOption = false, ...restProps }, ref) => hidden ? null : (React.createElement("button", { ...restProps, ref: ref, type: 'button', id: String(id), className: cn(styles.title, {
+const Title = forwardRef(({ id, toggleClassName, title, styles = {}, rightAddons = null, hidden = false, selected = false, disabled = false, collapsed = false, focused = false, isOption = false, ...restProps }, ref) => hidden ? null : (React.createElement("button", { ...restProps, ref: ref, disabled: disabled, type: 'button', id: String(id), className: cn(styles.title, {
         [styles.selected]: selected,
         [styles.disabled]: disabled,
         [styles.collapsed]: collapsed && !isOption,

package/tabs/modern/desktop.js

@@ -14,9 +14,9 @@ import '@alfalab/hooks';
 import '@juggle/resize-observer';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
-import './index.module-54abd631.js';
+import './index.module-21bf7188.js';
 import '../../tag/modern';
-import './index.module-c40b8e40.js';
+import './index.module-de52298e.js';
 import './components/primary-tablist/Component.js';
 import './hooks/use-tablist-titles.js';
 import './synthetic-events.js';

package/tabs/modern/hooks/use-collapsible-elements.js

@@ -12,9 +12,11 @@ const useCollapsibleElements = (selectors, deps = []) => {
             if (!container)
                 return;
             const addon = addonRef.current;
-            const containerWidth = inlineSize || container.clientWidth;
+            const moreElement = Array.from(container.querySelectorAll('[role="tablist"]')).pop();
+            const moreElementRect = moreElement?.getBoundingClientRect();
             const elements = Array.from(container.querySelectorAll(selectors));
-            const idsCollapsedElements = elements.reduce((acc, element) => {
+            const containerWidth = (inlineSize || container.clientWidth) - (moreElementRect?.width || 0) * 1.5; // при рассчётах, даём кнопке "Ещё" чуть больше места, чтобы точно влезла
+            const collapsedIds = elements.reduce((acc, element) => {
                 const { offsetLeft, offsetWidth, id } = element;
                 const elementOffset = offsetLeft + offsetWidth;
                 const isCollapsedElement = getComputedStyle(element).visibility === 'collapse';
@@ -26,7 +28,7 @@ const useCollapsibleElements = (selectors, deps = []) => {
                     acc.push(id);
                 return acc;
             }, []);
-            setIdsCollapsedElements(idsCollapsedElements);
+            setIdsCollapsedElements(collapsedIds);
         };
         const handleElementsResize = (entries) => {
             const [{ inlineSize }] = entries[0].contentBoxSize;

package/tabs/modern/hooks/use-tablist-titles.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TabListProps } from "../typings";
-declare const useTablistTitles: ({ titles, selectedId, collapsible, breakpoint, onChange, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsible' | 'onChange'> & Required<Pick<TabListProps, 'breakpoint'>>) => {
+declare const useTablistTitles: ({ titles, selectedId, collapsible, collapsedTabsIds, breakpoint, onChange, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsible' | 'collapsedTabsIds' | 'onChange'> & Required<Pick<TabListProps, 'breakpoint'>>) => {
     containerRef: import("react").RefObject<HTMLDivElement>;
     addonRef: import("react").RefObject<HTMLInputElement>;
     tablistTitles: {

package/tabs/modern/hooks/use-tablist-titles.js

@@ -4,24 +4,48 @@ import { useCollapsibleElements } from './use-collapsible-elements.js';
 import { useTabs } from './use-tabs.js';
 import '@juggle/resize-observer';
 
-const useTablistTitles = ({ titles = [], selectedId, collapsible, breakpoint, onChange, }) => {
+const useTablistTitles = ({ titles = [], selectedId, collapsible, collapsedTabsIds, breakpoint, onChange, }) => {
     const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements('[role=tab]', [titles]);
     const [view] = useMedia([['desktop', `(min-width: ${breakpoint}px)`]], 'desktop');
     const tablistTitles = useMemo(() => {
         const idsCollapsedTitles = [];
+        const idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds || []);
         if (view === 'desktop' && collapsible) {
-            const visibleTitles = titles.filter(({ id }) => !idsCollapsedElements.includes(String(id)));
-            const lastVisibleTitle = visibleTitles[visibleTitles.length - 1];
-            idsCollapsedElements.forEach((id) => {
-                idsCollapsedTitles.push(selectedId === id && lastVisibleTitle ? String(lastVisibleTitle.id) : id);
+            const visibleTitles = titles.filter(({ id }) => !idsCollapsed.includes(String(id)));
+            const lastVisibleTitle = collapsedTabsIds
+                ? null
+                : visibleTitles[visibleTitles.length - 1];
+            idsCollapsed.forEach((id) => {
+                if (selectedId === id && lastVisibleTitle) {
+                    idsCollapsedTitles.push(String(lastVisibleTitle.id));
+                }
+                if (selectedId !== id) {
+                    idsCollapsedTitles.push(id);
+                }
             });
         }
-        return titles.map((title) => ({
+        const titlesMapped = titles.map((title) => ({
             ...title,
             collapsed: idsCollapsedTitles.includes(String(title.id)),
             selected: title.id === selectedId,
         }));
-    }, [titles, collapsible, selectedId, idsCollapsedElements, view]);
+        if (collapsedTabsIds?.length) {
+            titlesMapped.sort((a, b) => {
+                const hasA = collapsedTabsIds.includes(String(a.id));
+                const hasB = collapsedTabsIds.includes(String(b.id));
+                if (hasA === hasB) {
+                    return 0;
+                }
+                return hasA ? 1 : -1;
+            });
+        }
+        return titlesMapped.sort((a, b) => {
+            if (a.collapsed === b.collapsed) {
+                return 0;
+            }
+            return a.collapsed ? 1 : -1;
+        });
+    }, [collapsedTabsIds, idsCollapsedElements, view, collapsible, titles, selectedId]);
     const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
         titles: tablistTitles,
         selectedId,

package/tabs/modern/{index-0d7ca9a7.d.ts → index-3677ec46.d.ts}

@@ -1,4 +1,4 @@
-export * from "./Component.responsive-0d7ca9a7";
+export * from "./Component.responsive-3677ec46";
 export { PickerButtonResponsive as PickerButton };
 export type { PickerButtonResponsiveProps as PickerButtonProps };
-export type { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component-0d7ca9a7";
+export type { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component-3677ec46";

package/tabs/modern/index.js

@@ -13,10 +13,10 @@ import '../../picker-button/modern/desktop';
 import '@juggle/resize-observer';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
-import './index.module-54abd631.js';
+import './index.module-21bf7188.js';
 import './components/primary-tablist/Component.mobile.js';
 import '../../tag/modern';
-import './index.module-c40b8e40.js';
+import './index.module-de52298e.js';
 import './components/secondary-tablist/Component.mobile.js';
 import './components/primary-tablist/Component.desktop.js';
 import './components/primary-tablist/Component.js';

package/tabs/modern/index.module-21bf7188.js

@@ -0,0 +1,4 @@
+const commonStyles = {"component":"tabs__component_1hdca","fullWidthScroll":"tabs__fullWidthScroll_1hdca","container":"tabs__container_1hdca","title":"tabs__title_1hdca","disabled":"tabs__disabled_1hdca","focused":"tabs__focused_1hdca","collapsed":"tabs__collapsed_1hdca","selected":"tabs__selected_1hdca","line":"tabs__line_1hdca","s":"tabs__s_1hdca","xs":"tabs__xs_1hdca","xxs":"tabs__xxs_1hdca","pickerWrapper":"tabs__pickerWrapper_1hdca","option":"tabs__option_1hdca","m":"tabs__m_1hdca","l":"tabs__l_1hdca","xl":"tabs__xl_1hdca","rightAddons":"tabs__rightAddons_1hdca"};
+require('./components/primary-tablist/index.css');
+
+export { commonStyles as c };

package/tabs/modern/index.module-de52298e.js

@@ -0,0 +1,4 @@
+const commonStyles = {"component":"tabs__component_xep1h","fullWidthScroll":"tabs__fullWidthScroll_xep1h","container":"tabs__container_xep1h","title":"tabs__title_xep1h","xxs":"tabs__xxs_xep1h","xs":"tabs__xs_xep1h","s":"tabs__s_xep1h","m":"tabs__m_xep1h","l":"tabs__l_xep1h","xl":"tabs__xl_xep1h"};
+require('./components/secondary-tablist/index.css');
+
+export { commonStyles as c };

package/tabs/modern/mobile.js

@@ -13,9 +13,9 @@ import '@alfalab/hooks';
 import '@juggle/resize-observer';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
-import './index.module-54abd631.js';
+import './index.module-21bf7188.js';
 import '../../tag/modern';
-import './index.module-c40b8e40.js';
+import './index.module-de52298e.js';
 import './components/primary-tablist/Component.js';
 import './hooks/use-tablist-titles.js';
 import './hooks/use-collapsible-elements.js';

package/tabs/modern/responsive.js

@@ -14,10 +14,10 @@ import '../../picker-button/modern/desktop';
 import '@juggle/resize-observer';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
-import './index.module-54abd631.js';
+import './index.module-21bf7188.js';
 import './components/primary-tablist/Component.mobile.js';
 import '../../tag/modern';
-import './index.module-c40b8e40.js';
+import './index.module-de52298e.js';
 import './components/secondary-tablist/Component.mobile.js';
 import './components/primary-tablist/Component.desktop.js';
 import './components/primary-tablist/Component.js';

package/tabs/modern/typings.d.ts

@@ -43,6 +43,10 @@ type TabsProps = {
      * Сворачивает не помещающиеся в окне табы в PickerButton
      */
     collapsible?: boolean;
+    /**
+     * Список табов, для контроля переноса вкладок в PickerButton
+     */
+    collapsedTabsIds?: string[];
     /**
      * При скроле табы будут уходить в край экрана
      */
@@ -118,7 +122,7 @@ type TabListTitle = {
     selected?: boolean;
     collapsed?: boolean;
 };
-type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatch' | 'selectedId' | 'scrollable' | 'collapsible' | 'onChange' | 'dataTestId' | 'fullWidthScroll'> & {
+type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatch' | 'selectedId' | 'scrollable' | 'collapsible' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll'> & {
     /**
      * Заголовки табов
      */