@alfalab/core-components-tabs 7.2.9 → 7.3.1

package/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/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/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/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/modern/index.js

@@ -18,11 +18,11 @@ import '@juggle/resize-observer';
 import './synthetic-events.js';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
-import './index.module-55adfdc4.js';
+import './index.module-21bf7188.js';
 import './components/primary-tablist/Component.mobile.js';
 import './components/secondary-tablist/Component.desktop.js';
 import './components/secondary-tablist/Component.js';
 import '@alfalab/core-components-tag/modern';
-import './index.module-bd275971.js';
+import './index.module-de52298e.js';
 import './components/secondary-tablist/Component.mobile.js';
 import './components/tabs/Component.js';

package/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/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/modern/mobile.js

@@ -17,8 +17,8 @@ import '@juggle/resize-observer';
 import './synthetic-events.js';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
-import './index.module-55adfdc4.js';
+import './index.module-21bf7188.js';
 import './components/secondary-tablist/Component.js';
 import '@alfalab/core-components-tag/modern';
-import './index.module-bd275971.js';
+import './index.module-de52298e.js';
 import './components/tabs/Component.js';

package/modern/responsive.js

@@ -18,11 +18,11 @@ import '@juggle/resize-observer';
 import './synthetic-events.js';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
-import './index.module-55adfdc4.js';
+import './index.module-21bf7188.js';
 import './components/primary-tablist/Component.mobile.js';
 import './components/secondary-tablist/Component.desktop.js';
 import './components/secondary-tablist/Component.js';
 import '@alfalab/core-components-tag/modern';
-import './index.module-bd275971.js';
+import './index.module-de52298e.js';
 import './components/secondary-tablist/Component.mobile.js';
 import './components/tabs/Component.js';

package/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'> & {
     /**
      * Заголовки табов
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-tabs",
-    "version": "7.2.9",
+    "version": "7.3.1",
     "description": "Tabs components",
     "keywords": [],
     "license": "MIT",
@@ -19,7 +19,7 @@
     "dependencies": {
         "@alfalab/core-components-keyboard-focusable": "^4.0.3",
         "@alfalab/core-components-tag": "^5.0.3",
-        "@alfalab/core-components-picker-button": "^10.2.2",
+        "@alfalab/core-components-picker-button": "^10.3.1",
         "@alfalab/core-components-badge": "^5.0.0",
         "classnames": "^2.3.1",
         "compute-scroll-into-view": "^1.0.13",

package/responsive.js

@@ -7,7 +7,7 @@ var components_tab_Component = require('./components/tab/Component.js');
 var components_tabs_Component_responsive = require('./components/tabs/Component.responsive.js');
 var hooks_useTabs = require('./hooks/use-tabs.js');
 var hooks_useCollapsibleElements = require('./hooks/use-collapsible-elements.js');
-require('./tslib.es6-ae130ebf.js');
+require('./tslib.es6-72964df1.js');
 require('react');
 require('@alfalab/hooks');
 require('./components/primary-tablist/Component.desktop.js');
@@ -21,12 +21,12 @@ require('@juggle/resize-observer');
 require('./synthetic-events.js');
 require('./components/title/Component.js');
 require('compute-scroll-into-view');
-require('./index.module-8195e19e.js');
+require('./index.module-e526ba54.js');
 require('./components/primary-tablist/Component.mobile.js');
 require('./components/secondary-tablist/Component.desktop.js');
 require('./components/secondary-tablist/Component.js');
 require('@alfalab/core-components-tag');
-require('./index.module-8665be45.js');
+require('./index.module-396d3834.js');
 require('./components/secondary-tablist/Component.mobile.js');
 require('./components/tabs/Component.js');
 

package/synthetic-events.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-ae130ebf.js');
+var tslib_es6 = require('./tslib.es6-72964df1.js');
 
 var createSyntheticEvent = function (event) {
     var isDefaultPrevented = false;

package/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'> & {
     /**
      * Заголовки табов
      */

package/esm/index.module-70b270f0.js

@@ -1,4 +0,0 @@
-var commonStyles = {"component":"tabs__component_zu46d","fullWidthScroll":"tabs__fullWidthScroll_zu46d","container":"tabs__container_zu46d","title":"tabs__title_zu46d","xxs":"tabs__xxs_zu46d","xs":"tabs__xs_zu46d","s":"tabs__s_zu46d","m":"tabs__m_zu46d","l":"tabs__l_zu46d","xl":"tabs__xl_zu46d"};
-require('./components/secondary-tablist/index.css')
-
-export { commonStyles as c };

package/esm/index.module-b1b98fa8.js

@@ -1,4 +0,0 @@
-var commonStyles = {"component":"tabs__component_1i3jc","fullWidthScroll":"tabs__fullWidthScroll_1i3jc","container":"tabs__container_1i3jc","title":"tabs__title_1i3jc","disabled":"tabs__disabled_1i3jc","focused":"tabs__focused_1i3jc","collapsed":"tabs__collapsed_1i3jc","selected":"tabs__selected_1i3jc","line":"tabs__line_1i3jc","s":"tabs__s_1i3jc","xs":"tabs__xs_1i3jc","xxs":"tabs__xxs_1i3jc","pickerWrapper":"tabs__pickerWrapper_1i3jc","option":"tabs__option_1i3jc","m":"tabs__m_1i3jc","l":"tabs__l_1i3jc","xl":"tabs__xl_1i3jc","rightAddons":"tabs__rightAddons_1i3jc"};
-require('./components/primary-tablist/index.css')
-
-export { commonStyles as c };

package/index.module-8195e19e.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var commonStyles = {"component":"tabs__component_1i3jc","fullWidthScroll":"tabs__fullWidthScroll_1i3jc","container":"tabs__container_1i3jc","title":"tabs__title_1i3jc","disabled":"tabs__disabled_1i3jc","focused":"tabs__focused_1i3jc","collapsed":"tabs__collapsed_1i3jc","selected":"tabs__selected_1i3jc","line":"tabs__line_1i3jc","s":"tabs__s_1i3jc","xs":"tabs__xs_1i3jc","xxs":"tabs__xxs_1i3jc","pickerWrapper":"tabs__pickerWrapper_1i3jc","option":"tabs__option_1i3jc","m":"tabs__m_1i3jc","l":"tabs__l_1i3jc","xl":"tabs__xl_1i3jc","rightAddons":"tabs__rightAddons_1i3jc"};
-require('./components/primary-tablist/index.css')
-
-exports.commonStyles = commonStyles;

package/index.module-8665be45.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var commonStyles = {"component":"tabs__component_zu46d","fullWidthScroll":"tabs__fullWidthScroll_zu46d","container":"tabs__container_zu46d","title":"tabs__title_zu46d","xxs":"tabs__xxs_zu46d","xs":"tabs__xs_zu46d","s":"tabs__s_zu46d","m":"tabs__m_zu46d","l":"tabs__l_zu46d","xl":"tabs__xl_zu46d"};
-require('./components/secondary-tablist/index.css')
-
-exports.commonStyles = commonStyles;

package/modern/index.module-55adfdc4.js

@@ -1,4 +0,0 @@
-const commonStyles = {"component":"tabs__component_1i3jc","fullWidthScroll":"tabs__fullWidthScroll_1i3jc","container":"tabs__container_1i3jc","title":"tabs__title_1i3jc","disabled":"tabs__disabled_1i3jc","focused":"tabs__focused_1i3jc","collapsed":"tabs__collapsed_1i3jc","selected":"tabs__selected_1i3jc","line":"tabs__line_1i3jc","s":"tabs__s_1i3jc","xs":"tabs__xs_1i3jc","xxs":"tabs__xxs_1i3jc","pickerWrapper":"tabs__pickerWrapper_1i3jc","option":"tabs__option_1i3jc","m":"tabs__m_1i3jc","l":"tabs__l_1i3jc","xl":"tabs__xl_1i3jc","rightAddons":"tabs__rightAddons_1i3jc"};
-require('./components/primary-tablist/index.css')
-
-export { commonStyles as c };

package/modern/index.module-bd275971.js

@@ -1,4 +0,0 @@
-const commonStyles = {"component":"tabs__component_zu46d","fullWidthScroll":"tabs__fullWidthScroll_zu46d","container":"tabs__container_zu46d","title":"tabs__title_zu46d","xxs":"tabs__xxs_zu46d","xs":"tabs__xs_zu46d","s":"tabs__s_zu46d","m":"tabs__m_zu46d","l":"tabs__l_zu46d","xl":"tabs__xl_zu46d"};
-require('./components/secondary-tablist/index.css')
-
-export { commonStyles as c };