@alfalab/core-components-tabs 8.5.0 → 8.5.2

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

@@ -1,4 +1,4 @@
-/* hash: evptj */
+/* hash: 19flh */
 :root {
 }/* deprecated */:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 }:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -51,30 +51,30 @@
 
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
-}.tabs__component_14u7v {
+}.tabs__component_1du2s {
     position: relative;
     display: inline-flex;
-}.tabs__fullWidthScroll_14u7v {
+}.tabs__fullWidthScroll_1du2s {
     margin: 0 var(--gap-m);
-}.tabs__container_14u7v {
+}.tabs__container_1du2s {
     overflow: hidden;
 
     /* focus-outline fix */
     margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
     padding: var(--gap-2xs) 0 var(--gap-2xs) var(--gap-2xs);
-}.tabs__title_14u7v {
+}.tabs__title_1du2s {
     white-space: nowrap;
-}/* sizes */.tabs__xxs_14u7v .tabs__title_14u7v + .tabs__title_14u7v {
+}/* sizes */.tabs__xxs_1du2s .tabs__title_1du2s + .tabs__title_1du2s {
     margin-left: var(--secondary-tablist-xxs-gaps);
-}.tabs__xs_14u7v .tabs__title_14u7v + .tabs__title_14u7v {
+}.tabs__xs_1du2s .tabs__title_1du2s + .tabs__title_1du2s {
     margin-left: var(--secondary-tablist-xs-gaps);
-}.tabs__s_14u7v .tabs__title_14u7v + .tabs__title_14u7v {
+}.tabs__s_1du2s .tabs__title_1du2s + .tabs__title_1du2s {
     margin-left: var(--secondary-tablist-s-gaps);
-}.tabs__m_14u7v .tabs__title_14u7v + .tabs__title_14u7v {
+}.tabs__m_1du2s .tabs__title_1du2s + .tabs__title_1du2s {
     margin-left: var(--secondary-tablist-m-gaps);
-}.tabs__l_14u7v .tabs__title_14u7v + .tabs__title_14u7v {
+}.tabs__l_1du2s .tabs__title_1du2s + .tabs__title_1du2s {
     margin-left: var(--secondary-tablist-l-gaps);
-}.tabs__xl_14u7v .tabs__title_14u7v + .tabs__title_14u7v {
+}.tabs__xl_1du2s .tabs__title_1du2s + .tabs__title_1du2s {
     margin-left: var(--secondary-tablist-xl-gaps);
 } :root {
     --color-dark-indigo: #0b1f35;
@@ -1637,7 +1637,7 @@
 
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
-} .tabs__title_19or5 {
-} .tabs__mobile_19or5 .tabs__title_19or5 + .tabs__title_19or5 {
+} .tabs__title_1kd50 {
+} .tabs__mobile_1kd50 .tabs__title_1kd50 + .tabs__title_1kd50 {
         margin-left: var(--secondary-tablist-mobile-gaps);
     }

package/modern/components/tab/Component.js

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

package/modern/components/tab/index.css

@@ -1,8 +1,8 @@
-/* hash: 1ga89 */
-.tabs__component_1q0ar {
+/* hash: 1rzgq */
+.tabs__component_fie4e {
     outline: none;
 }
 
-.tabs__hidden_1q0ar {
+.tabs__hidden_fie4e {
     display: none;
 }

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

@@ -11,10 +11,11 @@ import '../../hooks/use-collapsible-elements.js';
 import '@juggle/resize-observer';
 import '@alfalab/hooks';
 import '../../hooks/use-tabs.js';
+import 'react-merge-refs';
 import '@alfalab/core-components-shared/modern';
 import '../../synthetic-events.js';
 import '../title/Component.js';
-import '../../index.module-2ee1459e.js';
+import '../../index.module-b0eb0617.js';
 
 const TabsCollapsible = ({ ...restProps }) => (React.createElement(Tabs, { TabList: CollapsiblePrimaryTabList, ...restProps }));
 

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

@@ -8,6 +8,7 @@ import 'classnames';
 import '@alfalab/core-components-keyboard-focusable/modern';
 import '@alfalab/core-components-shared/modern';
 import '../../hooks/use-tabs.js';
+import 'react-merge-refs';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../scroll-controls/Component.js';
@@ -17,10 +18,10 @@ import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-2ee1459e.js';
+import '../../index.module-b0eb0617.js';
 import '@alfalab/core-components-tag/modern/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-5572b7e8.js';
+import '../../index.module-11a3c51b.js';
 
 const views = {
     primary: PrimaryTabListDesktop,

package/modern/components/tabs/Component.js

@@ -2,7 +2,7 @@ import React, { cloneElement } from 'react';
 
 const Tabs = ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll = false, keepMounted = false, dataTestId, onChange, breakpoint = 1024, tagShape, tagView, }) => {
     const tabsArray = React.Children.toArray(children);
-    const titles = tabsArray.map(({ props: { title, id, rightAddons, disabled, hidden, toggleClassName, dataTestId: toggleTestId, }, }) => ({
+    const titles = tabsArray.map(({ props: { title, id, rightAddons, disabled, hidden, toggleClassName, dataTestId: toggleTestId, toggleRef, }, }) => ({
         title,
         id,
         disabled,
@@ -10,6 +10,7 @@ const Tabs = ({ TabList, className, containerClassName, size, defaultMatchMediaV
         hidden,
         toggleClassName,
         dataTestId: toggleTestId,
+        toggleRef,
     }));
     const tabs = tabsArray.filter((tab) => tab.props.id === selectedId || tab.props.keepMounted || keepMounted);
     return (React.createElement("div", { className: className },

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

@@ -8,6 +8,7 @@ import '@juggle/resize-observer';
 import '@alfalab/core-components-keyboard-focusable/modern';
 import '@alfalab/core-components-shared/modern';
 import '../../hooks/use-tabs.js';
+import 'react-merge-refs';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../scroll-controls/Component.js';
@@ -17,10 +18,10 @@ import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-2ee1459e.js';
+import '../../index.module-b0eb0617.js';
 import '@alfalab/core-components-tag/modern/mobile';
 import '../secondary-tablist/Component.js';
-import '../../index.module-5572b7e8.js';
+import '../../index.module-11a3c51b.js';
 
 const views = {
     primary: PrimaryTabListMobile,

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

@@ -10,6 +10,7 @@ import 'classnames';
 import '@alfalab/core-components-keyboard-focusable/modern';
 import '@alfalab/core-components-shared/modern';
 import '../../hooks/use-tabs.js';
+import 'react-merge-refs';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../scroll-controls/Component.js';
@@ -19,12 +20,12 @@ import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-2ee1459e.js';
+import '../../index.module-b0eb0617.js';
 import '../primary-tablist/Component.mobile.js';
 import '../secondary-tablist/Component.desktop.js';
 import '@alfalab/core-components-tag/modern/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-5572b7e8.js';
+import '../../index.module-11a3c51b.js';
 import '../secondary-tablist/Component.mobile.js';
 import '@alfalab/core-components-tag/modern/mobile';
 

package/modern/desktop/index.js

@@ -9,6 +9,7 @@ import 'classnames';
 import '@alfalab/core-components-keyboard-focusable/modern';
 import '@alfalab/core-components-shared/modern';
 import '../hooks/use-tabs.js';
+import 'react-merge-refs';
 import '../components/scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../components/scroll-controls/Component.js';
@@ -18,8 +19,8 @@ import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
 import '../components/scroll-controls/utils.js';
 import '../components/title/Component.js';
-import '../index.module-2ee1459e.js';
+import '../index.module-b0eb0617.js';
 import '@alfalab/core-components-tag/modern/desktop';
 import '../components/secondary-tablist/Component.js';
-import '../index.module-5572b7e8.js';
+import '../index.module-11a3c51b.js';
 import '../components/tabs/Component.js';

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

@@ -13,6 +13,7 @@ declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds, breakpo
         hidden?: boolean | undefined;
         toggleClassName?: string | undefined;
         dataTestId?: string | undefined;
+        toggleRef?: import("react").Ref<HTMLDivElement> | undefined;
     }[];
     selectedTab: HTMLButtonElement | null;
     focusedTab: HTMLButtonElement | null;
@@ -23,7 +24,7 @@ declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds, breakpo
         selected: boolean;
         'data-test-id': string | undefined;
         disabled: boolean | undefined;
-        ref: (node: HTMLButtonElement) => void;
+        ref: (instance: HTMLElement | null) => void;
         onKeyDown: (event: import("react").KeyboardEvent<HTMLButtonElement>) => void;
         onClick: (event?: import("react").MouseEvent<Element, MouseEvent> | undefined) => void;
     };

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

@@ -4,6 +4,7 @@ import { useCollapsibleElements } from './use-collapsible-elements.js';
 import { useTabs } from './use-tabs.js';
 import '@juggle/resize-observer';
 import '@alfalab/hooks';
+import 'react-merge-refs';
 import '@alfalab/core-components-shared/modern';
 
 const useTablistTitles = ({ titles = [], selectedId, collapsedTabsIds, breakpoint, onChange, defaultMatchMediaValue, }) => {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { KeyboardEvent, MouseEvent, MutableRefObject } from 'react';
 import { UseTabsProps } from "../typings";
 declare function useTabs({ titles, selectedId, onChange }: UseTabsProps): {
@@ -8,7 +9,7 @@ declare function useTabs({ titles, selectedId, onChange }: UseTabsProps): {
         selected: boolean;
         'data-test-id': string | undefined;
         disabled: boolean | undefined;
-        ref: (node: HTMLButtonElement) => void;
+        ref: (instance: HTMLElement | null) => void;
         onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
         onClick: (event?: MouseEvent) => void;
     };

package/modern/hooks/use-tabs.js

@@ -1,4 +1,5 @@
 import { useState, useRef, useCallback } from 'react';
+import mergeRefs from 'react-merge-refs';
 import { getDataTestId } from '@alfalab/core-components-shared/modern';
 
 function useTabs({ titles = [], selectedId, onChange }) {
@@ -69,6 +70,17 @@ function useTabs({ titles = [], selectedId, onChange }) {
     const getTabListItemProps = (index, outerRef) => {
         const item = titles[index];
         const itemSelected = item.id === selectedId;
+        const refs = [
+            (node) => {
+                // eslint-disable-next-line no-param-reassign
+                if (outerRef)
+                    outerRef.current = node;
+                handleItemRef(node, item, index);
+            },
+        ];
+        if (item.toggleRef) {
+            refs.push(item.toggleRef);
+        }
         return {
             role: 'tab',
             tabIndex: itemSelected ? 0 : -1,
@@ -76,12 +88,7 @@ function useTabs({ titles = [], selectedId, onChange }) {
             selected: itemSelected,
             'data-test-id': getDataTestId(item.dataTestId, 'toggle'),
             disabled: item.disabled,
-            ref: (node) => {
-                // eslint-disable-next-line no-param-reassign
-                if (outerRef)
-                    outerRef.current = node;
-                handleItemRef(node, item, index);
-            },
+            ref: mergeRefs(refs),
             onKeyDown: handleKeyDown,
             onClick: (event) => handleItemClick(event, item),
         };

package/modern/index.js

@@ -11,6 +11,7 @@ import 'classnames';
 import '@alfalab/core-components-keyboard-focusable/modern';
 import '@alfalab/core-components-shared/modern';
 import './hooks/use-tabs.js';
+import 'react-merge-refs';
 import './components/scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import './components/scroll-controls/Component.js';
@@ -20,12 +21,12 @@ import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
 import './components/scroll-controls/utils.js';
 import './components/title/Component.js';
-import './index.module-2ee1459e.js';
+import './index.module-b0eb0617.js';
 import './components/primary-tablist/Component.mobile.js';
 import './components/secondary-tablist/Component.desktop.js';
 import '@alfalab/core-components-tag/modern/desktop';
 import './components/secondary-tablist/Component.js';
-import './index.module-5572b7e8.js';
+import './index.module-11a3c51b.js';
 import './components/secondary-tablist/Component.mobile.js';
 import '@alfalab/core-components-tag/modern/mobile';
 import './components/tabs/Component.js';

package/modern/index.module-11a3c51b.js

@@ -0,0 +1,4 @@
+const commonStyles = {"component":"tabs__component_1du2s","fullWidthScroll":"tabs__fullWidthScroll_1du2s","container":"tabs__container_1du2s","title":"tabs__title_1du2s","xxs":"tabs__xxs_1du2s","xs":"tabs__xs_1du2s","s":"tabs__s_1du2s","m":"tabs__m_1du2s","l":"tabs__l_1du2s","xl":"tabs__xl_1du2s"};
+require('./components/secondary-tablist/index.css')
+
+export { commonStyles as c };

package/modern/index.module-b0eb0617.js

@@ -0,0 +1,4 @@
+const styles = {"component":"tabs__component_18t44","fullWidthScroll":"tabs__fullWidthScroll_18t44","container":"tabs__container_18t44","title":"tabs__title_18t44","disabled":"tabs__disabled_18t44","focused":"tabs__focused_18t44","collapsed":"tabs__collapsed_18t44","selected":"tabs__selected_18t44","line":"tabs__line_18t44","option":"tabs__option_18t44","s":"tabs__s_18t44","xs":"tabs__xs_18t44","xxs":"tabs__xxs_18t44","pickerWrapper":"tabs__pickerWrapper_18t44","m":"tabs__m_18t44","l":"tabs__l_18t44","xl":"tabs__xl_18t44","rightAddons":"tabs__rightAddons_18t44"};
+require('./components/primary-tablist/index.css')
+
+export { styles as s };

package/modern/mobile/index.js

@@ -9,6 +9,7 @@ import '@juggle/resize-observer';
 import '@alfalab/core-components-keyboard-focusable/modern';
 import '@alfalab/core-components-shared/modern';
 import '../hooks/use-tabs.js';
+import 'react-merge-refs';
 import '../components/scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../components/scroll-controls/Component.js';
@@ -18,8 +19,8 @@ import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
 import '../components/scroll-controls/utils.js';
 import '../components/title/Component.js';
-import '../index.module-2ee1459e.js';
+import '../index.module-b0eb0617.js';
 import '@alfalab/core-components-tag/modern/mobile';
 import '../components/secondary-tablist/Component.js';
-import '../index.module-5572b7e8.js';
+import '../index.module-11a3c51b.js';
 import '../components/tabs/Component.js';

package/modern/shared/index.js

@@ -10,6 +10,7 @@ import '@alfalab/core-components-icon-button/modern';
 import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
 import '../components/scroll-controls/utils.js';
+import 'react-merge-refs';
 import '@alfalab/core-components-shared/modern';
 import '@juggle/resize-observer';
 import '@alfalab/hooks';

package/modern/typings.d.ts

@@ -1,4 +1,4 @@
-import { FC, MouseEvent, ReactElement, ReactNode } from 'react';
+import { FC, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
 import { TagProps } from "@alfalab/core-components-tag";
 type SelectedId = string | number;
 type TabsProps = {
@@ -119,6 +119,10 @@ type TabProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Реф для кнопки переключения таба
+     */
+    toggleRef?: Ref<HTMLDivElement>;
 };
 type TabListTitle = {
     title: string;
@@ -130,6 +134,7 @@ type TabListTitle = {
     selected?: boolean;
     collapsed?: boolean;
     dataTestId?: string;
+    toggleRef?: Ref<HTMLDivElement>;
 };
 type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView'> & {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-tabs",
-    "version": "8.5.0",
+    "version": "8.5.2",
     "description": "Tabs components",
     "keywords": [],
     "license": "MIT",
@@ -16,12 +16,12 @@
     "dependencies": {
         "@alfalab/core-components-keyboard-focusable": "^4.1.0",
         "@alfalab/core-components-tag": "^8.0.1",
-        "@alfalab/core-components-picker-button": "^11.5.0",
-        "@alfalab/core-components-badge": "^5.5.0",
+        "@alfalab/core-components-picker-button": "^11.5.2",
+        "@alfalab/core-components-badge": "^5.5.1",
         "@alfalab/core-components-mq": "^4.2.0",
         "@alfalab/hooks": "^1.13.0",
-        "@alfalab/core-components-shared": "^0.9.0",
-        "@alfalab/core-components-icon-button": "^6.5.0",
+        "@alfalab/core-components-shared": "^0.9.1",
+        "@alfalab/core-components-icon-button": "^6.5.1",
         "@alfalab/icons-glyph": "^2.139.0",
         "classnames": "^2.3.1",
         "compute-scroll-into-view": "^3.1.0",

package/shared/index.js

@@ -15,6 +15,7 @@ require('@alfalab/core-components-icon-button');
 require('@alfalab/icons-glyph/ChevronLeftMIcon');
 require('@alfalab/icons-glyph/ChevronRightMIcon');
 require('../components/scroll-controls/utils.js');
+require('react-merge-refs');
 require('@alfalab/core-components-shared');
 require('@juggle/resize-observer');
 require('@alfalab/hooks');

package/src/components/primary-tablist/Component.collapsible.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { Ref, useEffect, useMemo, useRef } from 'react';
 import cn from 'classnames';
 
 import { Badge } from '@alfalab/core-components-badge';
@@ -49,17 +49,27 @@ export const CollapsiblePrimaryTabList = ({
 
     const collapsedOptions = useMemo(
         () =>
-            tablistTitles.reduce<PickerButtonDesktopProps['options']>((options, title) => {
-                if (title.collapsed) {
-                    options.push({
-                        key: title.title,
-                        value: title.id,
-                        content: <Title {...title} styles={styles} isOption={true} />,
-                    });
-                }
+            tablistTitles.reduce<PickerButtonDesktopProps['options']>(
+                (options, { toggleRef, ...title }) => {
+                    if (title.collapsed) {
+                        options.push({
+                            key: title.title,
+                            value: title.id,
+                            content: (
+                                <Title
+                                    {...title}
+                                    ref={toggleRef as Ref<HTMLButtonElement>}
+                                    styles={styles}
+                                    isOption={true}
+                                />
+                            ),
+                        });
+                    }
 
-                return options;
-            }, []),
+                    return options;
+                },
+                [],
+            ),
         [tablistTitles],
     );
 
@@ -86,7 +96,7 @@ export const CollapsiblePrimaryTabList = ({
                 [styles.fullWidthScroll]: fullWidthScroll,
             })}
         >
-            {tablistTitles.map(({ dataTestId: _, ...restTitleProps }, index) => (
+            {tablistTitles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (
                 <KeyboardFocusable key={restTitleProps.id}>
                     {(ref, focused) => (
                         <Title

package/src/components/primary-tablist/Component.tsx

@@ -59,7 +59,7 @@ export const PrimaryTabList = ({
                 [styles.fullWidthScroll]: fullWidthScroll,
             })}
         >
-            {titles.map(({ dataTestId: _, ...restTitleProps }, index) => (
+            {titles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (
                 <KeyboardFocusable key={restTitleProps.id}>
                     {(ref, focused) => (
                         <Title

package/src/components/tabs/Component.tsx

@@ -31,6 +31,7 @@ export const Tabs = ({
                 hidden,
                 toggleClassName,
                 dataTestId: toggleTestId,
+                toggleRef,
             },
         }) => ({
             title,
@@ -40,6 +41,7 @@ export const Tabs = ({
             hidden,
             toggleClassName,
             dataTestId: toggleTestId,
+            toggleRef,
         }),
     );
 

package/src/hooks/use-tabs.tsx

@@ -1,4 +1,13 @@
-import { KeyboardEvent, MouseEvent, MutableRefObject, useCallback, useRef, useState } from 'react';
+import {
+    KeyboardEvent,
+    MouseEvent,
+    MutableRefObject,
+    Ref,
+    useCallback,
+    useRef,
+    useState,
+} from 'react';
+import mergeRefs from 'react-merge-refs';
 
 import { getDataTestId } from '@alfalab/core-components-shared';
 
@@ -104,6 +113,18 @@ export function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {
         const item = titles[index];
         const itemSelected = item.id === selectedId;
 
+        const refs: Array<Ref<HTMLElement>> = [
+            (node: HTMLButtonElement) => {
+                // eslint-disable-next-line no-param-reassign
+                if (outerRef) outerRef.current = node;
+                handleItemRef(node, item, index);
+            },
+        ];
+
+        if (item.toggleRef) {
+            refs.push(item.toggleRef);
+        }
+
         return {
             role: 'tab',
             tabIndex: itemSelected ? 0 : -1,
@@ -111,11 +132,7 @@ export function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {
             selected: itemSelected,
             'data-test-id': getDataTestId(item.dataTestId, 'toggle'),
             disabled: item.disabled,
-            ref: (node: HTMLButtonElement) => {
-                // eslint-disable-next-line no-param-reassign
-                if (outerRef) outerRef.current = node;
-                handleItemRef(node, item, index);
-            },
+            ref: mergeRefs(refs),
             onKeyDown: handleKeyDown,
             onClick: (event?: MouseEvent) => handleItemClick(event as MouseEvent, item),
         };

package/src/typings.ts

@@ -1,4 +1,4 @@
-import { FC, MouseEvent, ReactElement, ReactNode } from 'react';
+import { FC, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
 
 import { TagProps } from '@alfalab/core-components-tag';
 
@@ -147,6 +147,11 @@ export type TabProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+
+    /**
+     * Реф для кнопки переключения таба
+     */
+    toggleRef?: Ref<HTMLDivElement>;
 };
 
 export type TabListTitle = {
@@ -159,6 +164,7 @@ export type TabListTitle = {
     selected?: boolean;
     collapsed?: boolean;
     dataTestId?: string;
+    toggleRef?: Ref<HTMLDivElement>;
 };
 
 export type TabListProps = Pick<

package/typings.d.ts

@@ -1,4 +1,4 @@
-import { FC, MouseEvent, ReactElement, ReactNode } from 'react';
+import { FC, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
 import { TagProps } from "@alfalab/core-components-tag";
 type SelectedId = string | number;
 type TabsProps = {
@@ -119,6 +119,10 @@ type TabProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Реф для кнопки переключения таба
+     */
+    toggleRef?: Ref<HTMLDivElement>;
 };
 type TabListTitle = {
     title: string;
@@ -130,6 +134,7 @@ type TabListTitle = {
     selected?: boolean;
     collapsed?: boolean;
     dataTestId?: string;
+    toggleRef?: Ref<HTMLDivElement>;
 };
 type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView'> & {
     /**

package/esm/index.module-77f20a83.js

@@ -1,4 +0,0 @@
-var commonStyles = {"component":"tabs__component_14u7v","fullWidthScroll":"tabs__fullWidthScroll_14u7v","container":"tabs__container_14u7v","title":"tabs__title_14u7v","xxs":"tabs__xxs_14u7v","xs":"tabs__xs_14u7v","s":"tabs__s_14u7v","m":"tabs__m_14u7v","l":"tabs__l_14u7v","xl":"tabs__xl_14u7v"};
-require('./components/secondary-tablist/index.css')
-
-export { commonStyles as c };

package/esm/index.module-b2867cef.js

@@ -1,4 +0,0 @@
-var styles = {"component":"tabs__component_fqd0f","fullWidthScroll":"tabs__fullWidthScroll_fqd0f","container":"tabs__container_fqd0f","title":"tabs__title_fqd0f","disabled":"tabs__disabled_fqd0f","focused":"tabs__focused_fqd0f","collapsed":"tabs__collapsed_fqd0f","selected":"tabs__selected_fqd0f","line":"tabs__line_fqd0f","option":"tabs__option_fqd0f","s":"tabs__s_fqd0f","xs":"tabs__xs_fqd0f","xxs":"tabs__xxs_fqd0f","pickerWrapper":"tabs__pickerWrapper_fqd0f","m":"tabs__m_fqd0f","l":"tabs__l_fqd0f","xl":"tabs__xl_fqd0f","rightAddons":"tabs__rightAddons_fqd0f"};
-require('./components/primary-tablist/index.css')
-
-export { styles as s };

package/index.module-269f7642.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var commonStyles = {"component":"tabs__component_14u7v","fullWidthScroll":"tabs__fullWidthScroll_14u7v","container":"tabs__container_14u7v","title":"tabs__title_14u7v","xxs":"tabs__xxs_14u7v","xs":"tabs__xs_14u7v","s":"tabs__s_14u7v","m":"tabs__m_14u7v","l":"tabs__l_14u7v","xl":"tabs__xl_14u7v"};
-require('./components/secondary-tablist/index.css')
-
-exports.commonStyles = commonStyles;

package/index.module-3e51b518.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {"component":"tabs__component_fqd0f","fullWidthScroll":"tabs__fullWidthScroll_fqd0f","container":"tabs__container_fqd0f","title":"tabs__title_fqd0f","disabled":"tabs__disabled_fqd0f","focused":"tabs__focused_fqd0f","collapsed":"tabs__collapsed_fqd0f","selected":"tabs__selected_fqd0f","line":"tabs__line_fqd0f","option":"tabs__option_fqd0f","s":"tabs__s_fqd0f","xs":"tabs__xs_fqd0f","xxs":"tabs__xxs_fqd0f","pickerWrapper":"tabs__pickerWrapper_fqd0f","m":"tabs__m_fqd0f","l":"tabs__l_fqd0f","xl":"tabs__xl_fqd0f","rightAddons":"tabs__rightAddons_fqd0f"};
-require('./components/primary-tablist/index.css')
-
-exports.styles = styles;

package/modern/index.module-2ee1459e.js

@@ -1,4 +0,0 @@
-const styles = {"component":"tabs__component_fqd0f","fullWidthScroll":"tabs__fullWidthScroll_fqd0f","container":"tabs__container_fqd0f","title":"tabs__title_fqd0f","disabled":"tabs__disabled_fqd0f","focused":"tabs__focused_fqd0f","collapsed":"tabs__collapsed_fqd0f","selected":"tabs__selected_fqd0f","line":"tabs__line_fqd0f","option":"tabs__option_fqd0f","s":"tabs__s_fqd0f","xs":"tabs__xs_fqd0f","xxs":"tabs__xxs_fqd0f","pickerWrapper":"tabs__pickerWrapper_fqd0f","m":"tabs__m_fqd0f","l":"tabs__l_fqd0f","xl":"tabs__xl_fqd0f","rightAddons":"tabs__rightAddons_fqd0f"};
-require('./components/primary-tablist/index.css')
-
-export { styles as s };

package/modern/index.module-5572b7e8.js

@@ -1,4 +0,0 @@
-const commonStyles = {"component":"tabs__component_14u7v","fullWidthScroll":"tabs__fullWidthScroll_14u7v","container":"tabs__container_14u7v","title":"tabs__title_14u7v","xxs":"tabs__xxs_14u7v","xs":"tabs__xs_14u7v","s":"tabs__s_14u7v","m":"tabs__m_14u7v","l":"tabs__l_14u7v","xl":"tabs__xl_14u7v"};
-require('./components/secondary-tablist/index.css')
-
-export { commonStyles as c };