@alfalab/core-components-tabs 7.1.2 → 7.2.0

package/esm/index.js

@@ -1,20 +1,27 @@
-import './tslib.es6-954a2f25.js';
+import './tslib.es6-e74e5c93.js';
 import 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-keyboard-focusable/esm';
-export { useTabs } from './useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+import './hooks/use-collapsible-elements.js';
+export { useTabs } from './hooks/use-tabs.js';
+import './hooks/use-tablist-titles.js';
+import './synthetic-events.js';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
+import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-7ca9e703.js';
+import './index.module-01d292c0.js';
 import './components/primary-tablist/Component.desktop.js';
 import '@alfalab/core-components-tag/esm';
 import './components/secondary-tablist/Component.js';
-import './index.module-e51ae308.js';
+import './index.module-16a12061.js';
 import './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';
-import '@alfalab/hooks';
 import './components/primary-tablist/Component.mobile.js';
 export { PrimaryTabListResponsive } from './components/primary-tablist/Component.responsive.js';
 import './components/secondary-tablist/Component.mobile.js';

package/esm/index.module-01d292c0.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_1qgkh","fullWidthScroll":"tabs__fullWidthScroll_1qgkh","container":"tabs__container_1qgkh","title":"tabs__title_1qgkh","disabled":"tabs__disabled_1qgkh","focused":"tabs__focused_1qgkh","collapsed":"tabs__collapsed_1qgkh","selected":"tabs__selected_1qgkh","line":"tabs__line_1qgkh","s":"tabs__s_1qgkh","xs":"tabs__xs_1qgkh","xxs":"tabs__xxs_1qgkh","pickerWrapper":"tabs__pickerWrapper_1qgkh","option":"tabs__option_1qgkh","m":"tabs__m_1qgkh","l":"tabs__l_1qgkh","xl":"tabs__xl_1qgkh","rightAddons":"tabs__rightAddons_1qgkh"};
+require('./components/primary-tablist/index.css')
+
+export { commonStyles as c };

package/esm/index.module-16a12061.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_1y9yr","fullWidthScroll":"tabs__fullWidthScroll_1y9yr","container":"tabs__container_1y9yr","title":"tabs__title_1y9yr","xxs":"tabs__xxs_1y9yr","xs":"tabs__xs_1y9yr","s":"tabs__s_1y9yr","m":"tabs__m_1y9yr","l":"tabs__l_1y9yr","xl":"tabs__xl_1y9yr"};
+require('./components/secondary-tablist/index.css')
+
+export { commonStyles as c };

package/esm/mobile.d.ts

@@ -3,5 +3,5 @@ export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.mobile";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.mobile";
-export * from "./useTabs";
+export * from "./hooks/use-tabs";
 export * from "./typings";

package/esm/mobile.js

@@ -1,15 +1,23 @@
-import './tslib.es6-954a2f25.js';
+import './tslib.es6-e74e5c93.js';
 import 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-keyboard-focusable/esm';
-export { useTabs } from './useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+import './hooks/use-collapsible-elements.js';
+export { useTabs } from './hooks/use-tabs.js';
+import './hooks/use-tablist-titles.js';
+import './synthetic-events.js';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
+import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-7ca9e703.js';
+import './index.module-01d292c0.js';
 import '@alfalab/core-components-tag/esm';
 import './components/secondary-tablist/Component.js';
-import './index.module-e51ae308.js';
+import './index.module-16a12061.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';
 export { PrimaryTabListMobile } from './components/primary-tablist/Component.mobile.js';

package/esm/responsive.d.ts

@@ -3,5 +3,6 @@ export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.responsive";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.responsive";
-export * from "./useTabs";
+export * from "./hooks/use-tabs";
+export * from "./hooks/use-collapsible-elements";
 export * from "./typings";

package/esm/responsive.js

@@ -1,20 +1,27 @@
-import './tslib.es6-954a2f25.js';
+import './tslib.es6-e74e5c93.js';
 import 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-keyboard-focusable/esm';
-export { useTabs } from './useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
+export { useTabs } from './hooks/use-tabs.js';
+import './hooks/use-tablist-titles.js';
+import './synthetic-events.js';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
+import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-7ca9e703.js';
+import './index.module-01d292c0.js';
 import './components/primary-tablist/Component.desktop.js';
 import '@alfalab/core-components-tag/esm';
 import './components/secondary-tablist/Component.js';
-import './index.module-e51ae308.js';
+import './index.module-16a12061.js';
 import './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';
-import '@alfalab/hooks';
 import './components/primary-tablist/Component.mobile.js';
 export { PrimaryTabListResponsive } from './components/primary-tablist/Component.responsive.js';
 import './components/secondary-tablist/Component.mobile.js';

package/esm/synthetic-events.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+declare const createSyntheticEvent: <T extends Element, E extends Event>(event: E) => React.SyntheticEvent<T, E>;
+declare const createUIEvent: <T extends Element, E extends Event>(event: E) => React.UIEvent<T, E>;
+declare const createSyntheticMouseEvent: <T extends Element>(event: MouseEvent) => React.MouseEvent<T, MouseEvent>;
+export { createSyntheticEvent, createUIEvent, createSyntheticMouseEvent };

package/esm/synthetic-events.js

@@ -0,0 +1,41 @@
+import { a as __assign } from './tslib.es6-e74e5c93.js';
+
+var createSyntheticEvent = function (event) {
+    var isDefaultPrevented = false;
+    var isPropagationStopped = false;
+    var preventDefault = function () {
+        isDefaultPrevented = true;
+        event.preventDefault();
+    };
+    var stopPropagation = function () {
+        isPropagationStopped = true;
+        event.stopPropagation();
+    };
+    return {
+        nativeEvent: event,
+        currentTarget: event.currentTarget,
+        target: event.target,
+        bubbles: event.bubbles,
+        cancelable: event.cancelable,
+        defaultPrevented: event.defaultPrevented,
+        eventPhase: event.eventPhase,
+        isTrusted: event.isTrusted,
+        preventDefault: preventDefault,
+        isDefaultPrevented: function () { return isDefaultPrevented; },
+        stopPropagation: stopPropagation,
+        isPropagationStopped: function () { return isPropagationStopped; },
+        persist: function () { },
+        timeStamp: event.timeStamp,
+        type: event.type,
+    };
+};
+var createUIEvent = function (event) { return (__assign(__assign({}, createSyntheticEvent(event)), { detail: 0, view: {
+        styleMedia: {
+            type: '',
+            matchMedium: function () { return false; },
+        },
+        document: document,
+    } })); };
+var createSyntheticMouseEvent = function (event) { return (__assign(__assign({}, createUIEvent(event)), { altKey: event.altKey, button: event.button, buttons: event.buttons, clientX: event.clientX, clientY: event.clientY, ctrlKey: event.ctrlKey, getModifierState: event.getModifierState, metaKey: event.metaKey, movementX: event.movementX, movementY: event.movementY, pageX: event.pageX, pageY: event.pageY, relatedTarget: event.relatedTarget, screenX: event.screenX, screenY: event.screenY, shiftKey: event.shiftKey })); };
+
+export { createSyntheticEvent, createSyntheticMouseEvent, createUIEvent };

package/esm/{tslib.es6-954a2f25.js → tslib.es6-e74e5c93.js}

@@ -36,5 +36,16 @@ function __rest(s, e) {
         }
     return t;
 }
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2)
+        for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+                if (!ar)
+                    ar = Array.prototype.slice.call(from, 0, i);
+                ar[i] = from[i];
+            }
+        }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
 
-export { __rest as _, __assign as a };
+export { __rest as _, __assign as a, __spreadArray as b };

package/esm/typings.d.ts

@@ -39,6 +39,10 @@ type TabsProps = {
      * Рендерить заголовки табов в контейнере со скроллом
      */
     scrollable?: boolean;
+    /**
+     * Сворачивает не помещающиеся в окне табы в PickerButton
+     */
+    collapsible?: boolean;
     /**
      * При скроле табы будут уходить в край экрана
      */
@@ -111,12 +115,19 @@ type TabListTitle = {
     rightAddons?: ReactNode;
     hidden?: boolean;
     toggleClassName?: string;
+    selected?: boolean;
+    collapsed?: boolean;
 };
-type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatch' | 'selectedId' | 'scrollable' | 'onChange' | 'dataTestId' | 'fullWidthScroll'> & {
+type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatch' | 'selectedId' | 'scrollable' | 'collapsible' | 'onChange' | 'dataTestId' | 'fullWidthScroll'> & {
     /**
      * Заголовки табов
      */
     titles?: TabListTitle[];
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
 };
 type SecondaryTabListProps = TabListProps & {
     tagSize?: TagProps['size'];

package/hooks/use-collapsible-elements.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DependencyList } from 'react';
+declare const useCollapsibleElements: <ContainerType extends HTMLElement, AddonType extends HTMLElement>(selectors: string, deps?: DependencyList) => {
+    containerRef: import("react").RefObject<ContainerType>;
+    addonRef: import("react").RefObject<AddonType>;
+    idsCollapsedElements: string[];
+};
+export { useCollapsibleElements };

package/hooks/use-collapsible-elements.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../tslib.es6-cbc5fb87.js');
+var React = require('react');
+var hooks = require('@alfalab/hooks');
+var resizeObserver = require('@juggle/resize-observer');
+
+var useCollapsibleElements = function (selectors, deps) {
+    if (deps === void 0) { deps = []; }
+    var _a = React.useState([]), idsCollapsedElements = _a[0], setIdsCollapsedElements = _a[1];
+    var containerRef = React.useRef(null);
+    var addonRef = React.useRef(null);
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
+        var collapseElements = function (inlineSize) {
+            var container = containerRef.current;
+            if (!container)
+                return;
+            var addon = addonRef.current;
+            var containerWidth = inlineSize || container.clientWidth;
+            var elements = Array.from(container.querySelectorAll(selectors));
+            var idsCollapsedElements = elements.reduce(function (acc, element) {
+                var offsetLeft = element.offsetLeft, offsetWidth = element.offsetWidth, id = element.id;
+                var elementOffset = offsetLeft + offsetWidth;
+                var isCollapsedElement = getComputedStyle(element).visibility === 'collapse';
+                var maxWidth = addon && !isCollapsedElement
+                    ? containerWidth -
+                        (addon.offsetWidth + parseFloat(getComputedStyle(addon).marginLeft))
+                    : containerWidth;
+                if (elementOffset >= maxWidth)
+                    acc.push(id);
+                return acc;
+            }, []);
+            setIdsCollapsedElements(idsCollapsedElements);
+        };
+        var handleElementsResize = function (entries) {
+            var inlineSize = entries[0].contentBoxSize[0].inlineSize;
+            collapseElements(inlineSize);
+        };
+        var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
+        var observer = new ResizeObserver(handleElementsResize);
+        if (containerRef.current) {
+            collapseElements();
+            observer.observe(containerRef.current);
+        }
+        return function () { return observer.disconnect(); };
+    }, tslib_es6.__spreadArray([selectors], deps, true));
+    return {
+        containerRef: containerRef,
+        addonRef: addonRef,
+        idsCollapsedElements: idsCollapsedElements,
+    };
+};
+
+exports.useCollapsibleElements = useCollapsibleElements;

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

@@ -0,0 +1,28 @@
+/// <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'>>) => {
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    addonRef: import("react").RefObject<HTMLInputElement>;
+    tablistTitles: {
+        collapsed: boolean;
+        selected: boolean;
+        title: string;
+        id: import("../typings").SelectedId;
+        disabled?: boolean | undefined;
+        rightAddons?: import("react").ReactNode;
+        hidden?: boolean | undefined;
+        toggleClassName?: string | undefined;
+    }[];
+    selectedTab: HTMLButtonElement | null;
+    focusedTab: HTMLButtonElement | null;
+    getTabListItemProps: (index: number, outerRef?: import("react").MutableRefObject<HTMLElement> | undefined) => {
+        role: string;
+        tabIndex: number;
+        'aria-selected': boolean;
+        disabled: boolean | undefined;
+        ref: (node: HTMLButtonElement) => void;
+        onKeyDown: (event: import("react").KeyboardEvent<HTMLButtonElement>) => void;
+        onClick: (event?: import("react").MouseEvent<Element, MouseEvent> | undefined) => void;
+    };
+};
+export { useTablistTitles };

package/hooks/use-tablist-titles.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../tslib.es6-cbc5fb87.js');
+var React = require('react');
+var hooks = require('@alfalab/hooks');
+require('@juggle/resize-observer');
+var hooks_useCollapsibleElements = require('./use-collapsible-elements.js');
+var hooks_useTabs = require('./use-tabs.js');
+
+var useTablistTitles = function (_a) {
+    var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, collapsible = _a.collapsible, breakpoint = _a.breakpoint, onChange = _a.onChange;
+    var _c = hooks_useCollapsibleElements.useCollapsibleElements('[role=tab]', [titles]), containerRef = _c.containerRef, addonRef = _c.addonRef, idsCollapsedElements = _c.idsCollapsedElements;
+    var view = hooks.useMedia([['desktop', "(min-width: " + breakpoint + "px)"]], 'desktop')[0];
+    var tablistTitles = React.useMemo(function () {
+        var idsCollapsedTitles = [];
+        if (view === 'desktop' && collapsible) {
+            var visibleTitles = titles.filter(function (_a) {
+                var id = _a.id;
+                return !idsCollapsedElements.includes(String(id));
+            });
+            var lastVisibleTitle_1 = visibleTitles[visibleTitles.length - 1];
+            idsCollapsedElements.forEach(function (id) {
+                idsCollapsedTitles.push(selectedId === id && lastVisibleTitle_1 ? String(lastVisibleTitle_1.id) : id);
+            });
+        }
+        return titles.map(function (title) { return (tslib_es6.__assign(tslib_es6.__assign({}, title), { collapsed: idsCollapsedTitles.includes(String(title.id)), selected: title.id === selectedId })); });
+    }, [titles, collapsible, selectedId, idsCollapsedElements, view]);
+    var _d = hooks_useTabs.useTabs({
+        titles: tablistTitles,
+        selectedId: selectedId,
+        onChange: onChange,
+    }), selectedTab = _d.selectedTab, focusedTab = _d.focusedTab, getTabListItemProps = _d.getTabListItemProps;
+    return {
+        containerRef: containerRef,
+        addonRef: addonRef,
+        tablistTitles: tablistTitles,
+        selectedTab: selectedTab,
+        focusedTab: focusedTab,
+        getTabListItemProps: getTabListItemProps,
+    };
+};
+
+exports.useTablistTitles = useTablistTitles;

package/{cssm/useTabs.d.ts → hooks/use-tabs.d.ts}

@@ -1,5 +1,5 @@
 import { KeyboardEvent, MouseEvent, MutableRefObject } from 'react';
-import { UseTabsProps } from "./typings";
+import { UseTabsProps } from "../typings";
 declare function useTabs({ titles, selectedId, onChange }: UseTabsProps): {
     getTabListItemProps: (index: number, outerRef?: MutableRefObject<HTMLElement> | undefined) => {
         role: string;

package/index.d.ts

@@ -3,5 +3,5 @@ export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.responsive";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.responsive";
-export * from "./useTabs";
+export * from "./hooks/use-tabs";
 export * from "./typings";

package/index.js

@@ -2,23 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-3a2676d6.js');
+require('./tslib.es6-cbc5fb87.js');
 require('react');
 require('classnames');
+require('@alfalab/core-components/picker-button/desktop');
+require('@alfalab/core-components-badge');
 require('@alfalab/core-components-keyboard-focusable');
-var useTabs = require('./useTabs.js');
+require('@alfalab/hooks');
+require('@juggle/resize-observer');
+require('./hooks/use-collapsible-elements.js');
+var hooks_useTabs = require('./hooks/use-tabs.js');
+require('./hooks/use-tablist-titles.js');
+require('./synthetic-events.js');
 require('compute-scroll-into-view');
 var components_scrollableContainer_Component = require('./components/scrollable-container/Component.js');
+require('./components/title/Component.js');
 require('./components/primary-tablist/Component.js');
-require('./index.module-7a6d77c2.js');
+require('./index.module-370f6bd7.js');
 require('./components/primary-tablist/Component.desktop.js');
 require('@alfalab/core-components-tag');
 require('./components/secondary-tablist/Component.js');
-require('./index.module-d59767dd.js');
+require('./index.module-872dcef9.js');
 require('./components/secondary-tablist/Component.desktop.js');
 var components_tab_Component = require('./components/tab/Component.js');
 require('./components/tabs/Component.js');
-require('@alfalab/hooks');
 require('./components/primary-tablist/Component.mobile.js');
 var components_primaryTablist_Component_responsive = require('./components/primary-tablist/Component.responsive.js');
 require('./components/secondary-tablist/Component.mobile.js');
@@ -27,7 +34,7 @@ var components_tabs_Component_responsive = require('./components/tabs/Component.
 
 
 
-exports.useTabs = useTabs.useTabs;
+exports.useTabs = hooks_useTabs.useTabs;
 exports.ScrollableContainer = components_scrollableContainer_Component.ScrollableContainer;
 exports.Tab = components_tab_Component.Tab;
 exports.PrimaryTabListResponsive = components_primaryTablist_Component_responsive.PrimaryTabListResponsive;

package/index.module-370f6bd7.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var commonStyles = {"component":"tabs__component_1qgkh","fullWidthScroll":"tabs__fullWidthScroll_1qgkh","container":"tabs__container_1qgkh","title":"tabs__title_1qgkh","disabled":"tabs__disabled_1qgkh","focused":"tabs__focused_1qgkh","collapsed":"tabs__collapsed_1qgkh","selected":"tabs__selected_1qgkh","line":"tabs__line_1qgkh","s":"tabs__s_1qgkh","xs":"tabs__xs_1qgkh","xxs":"tabs__xxs_1qgkh","pickerWrapper":"tabs__pickerWrapper_1qgkh","option":"tabs__option_1qgkh","m":"tabs__m_1qgkh","l":"tabs__l_1qgkh","xl":"tabs__xl_1qgkh","rightAddons":"tabs__rightAddons_1qgkh"};
+require('./components/primary-tablist/index.css')
+
+exports.commonStyles = commonStyles;

package/index.module-872dcef9.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var commonStyles = {"component":"tabs__component_1y9yr","fullWidthScroll":"tabs__fullWidthScroll_1y9yr","container":"tabs__container_1y9yr","title":"tabs__title_1y9yr","xxs":"tabs__xxs_1y9yr","xs":"tabs__xs_1y9yr","s":"tabs__s_1y9yr","m":"tabs__m_1y9yr","l":"tabs__l_1y9yr","xl":"tabs__xl_1y9yr"};
+require('./components/secondary-tablist/index.css')
+
+exports.commonStyles = commonStyles;

package/mobile.d.ts

@@ -3,5 +3,5 @@ export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.mobile";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.mobile";
-export * from "./useTabs";
+export * from "./hooks/use-tabs";
 export * from "./typings";

package/mobile.js

@@ -2,18 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-3a2676d6.js');
+require('./tslib.es6-cbc5fb87.js');
 require('react');
 require('classnames');
+require('@alfalab/core-components/picker-button/desktop');
+require('@alfalab/core-components-badge');
 require('@alfalab/core-components-keyboard-focusable');
-var useTabs = require('./useTabs.js');
+require('@alfalab/hooks');
+require('@juggle/resize-observer');
+require('./hooks/use-collapsible-elements.js');
+var hooks_useTabs = require('./hooks/use-tabs.js');
+require('./hooks/use-tablist-titles.js');
+require('./synthetic-events.js');
 require('compute-scroll-into-view');
 var components_scrollableContainer_Component = require('./components/scrollable-container/Component.js');
+require('./components/title/Component.js');
 require('./components/primary-tablist/Component.js');
-require('./index.module-7a6d77c2.js');
+require('./index.module-370f6bd7.js');
 require('@alfalab/core-components-tag');
 require('./components/secondary-tablist/Component.js');
-require('./index.module-d59767dd.js');
+require('./index.module-872dcef9.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');
@@ -22,7 +30,7 @@ var components_tabs_Component_mobile = require('./components/tabs/Component.mobi
 
 
 
-exports.useTabs = useTabs.useTabs;
+exports.useTabs = hooks_useTabs.useTabs;
 exports.ScrollableContainer = components_scrollableContainer_Component.ScrollableContainer;
 exports.Tab = components_tab_Component.Tab;
 exports.PrimaryTabListMobile = components_primaryTablist_Component_mobile.PrimaryTabListMobile;

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

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

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

@@ -1,11 +1,19 @@
 import React from 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-keyboard-focusable/modern';
-import '../../useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../synthetic-events.js';
 import 'compute-scroll-into-view';
 import '../scrollable-container/Component.js';
+import '../title/Component.js';
 import { PrimaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-7ca9e703.js';
+import { c as commonStyles } from '../../index.module-01d292c0.js';
 
 const PrimaryTabListDesktop = ({ size = 'm', ...restProps }) => (React.createElement(PrimaryTabList, { ...restProps, size: size, styles: commonStyles }));
 

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

@@ -1,15 +1,25 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useMemo } from 'react';
 import cn from 'classnames';
+import { PickerButtonDesktop } from '@alfalab/core-components/picker-button/desktop';
+import { Badge } from '@alfalab/core-components-badge/modern';
 import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable/modern';
-import { useTabs } from '../../useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
+import { createSyntheticMouseEvent } from '../../synthetic-events.js';
 import 'compute-scroll-into-view';
 import { ScrollableContainer } from '../scrollable-container/Component.js';
+import { Title } from '../title/Component.js';
 
-const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, fullWidthScroll, onChange, dataTestId, }) => {
+const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, collapsible, fullWidthScroll, onChange, dataTestId, breakpoint = 1024, }) => {
     const lineRef = useRef(null);
-    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
+    const { containerRef, addonRef, tablistTitles, selectedTab, focusedTab, getTabListItemProps } = useTablistTitles({
         titles,
         selectedId,
+        collapsible,
+        breakpoint,
         onChange,
     });
     useEffect(() => {
@@ -17,22 +27,33 @@ const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titl
             lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
             lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
         }
-    }, [selectedTab]);
+    }, [selectedTab, tablistTitles]);
+    const collapsedOptions = useMemo(() => tablistTitles.reduce((options, title) => {
+        if (title.collapsed) {
+            options.push({
+                key: title.title,
+                value: title.id,
+                content: React.createElement(Title, { ...title, styles: styles, isOption: true }),
+            });
+        }
+        return options;
+    }, []), [tablistTitles, styles]);
+    const collapsedAddonsLength = tablistTitles.filter((title) => title.collapsed && title.rightAddons).length;
+    const handleOptionsChange = (payload) => {
+        if (payload.selected?.value && onChange) {
+            const nativeMouseEvent = new MouseEvent('change');
+            const syntheticMouseEvent = createSyntheticMouseEvent(nativeMouseEvent);
+            onChange(syntheticMouseEvent, { selectedId: payload.selected.value });
+        }
+    };
     const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, size && styles[size], {
             [styles.fullWidthScroll]: fullWidthScroll,
         }) },
-        titles.map((item, index) => {
-            if (item.hidden)
-                return null;
-            return (React.createElement(KeyboardFocusable, { key: item.id }, (ref, focused) => (React.createElement("button", { ...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))))));
-        }),
+        tablistTitles.map((title, index) => (React.createElement(KeyboardFocusable, { key: title.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...title, focused: focused, styles: styles }))))),
+        collapsedOptions.length ? (React.createElement("span", { ref: addonRef, className: styles.pickerWrapper },
+            React.createElement(PickerButtonDesktop, { fieldClassName: styles.title, optionClassName: cn(styles.pickerOption, size && styles[size]), options: collapsedOptions, onChange: handleOptionsChange, rightAddons: collapsedAddonsLength ? (React.createElement(Badge, { view: 'count', content: collapsedAddonsLength })) : null, size: 'l', view: 'ghost', label: '\u0415\u0449\u0451', popoverPosition: 'bottom-end' }))) : null,
         React.createElement("div", { className: styles.line, ref: lineRef })));
-    return scrollable ? (React.createElement(ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll }, renderContent())) : (React.createElement("div", { className: cn(styles.container, containerClassName) }, renderContent()));
+    return scrollable && !collapsible ? (React.createElement(ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll }, renderContent())) : (React.createElement("div", { ref: containerRef, className: cn(styles.container, containerClassName) }, renderContent()));
 };
 
 export { PrimaryTabList };