@alfalab/core-components-tabs 8.5.1 → 8.6.0

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

@@ -2,9 +2,6 @@ import { useMemo } from 'react';
 import { useMatchMedia } from '@alfalab/core-components-mq/modern';
 import { useCollapsibleElements } from './use-collapsible-elements.js';
 import { useTabs } from './use-tabs.js';
-import '@juggle/resize-observer';
-import '@alfalab/hooks';
-import '@alfalab/core-components-shared/modern';
 
 const useTablistTitles = ({ titles = [], selectedId, collapsedTabsIds, breakpoint, onChange, defaultMatchMediaValue, }) => {
     const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements('[role=tab]', [titles, collapsedTabsIds]);

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

@@ -2,30 +2,3 @@ export { PrimaryTabListResponsive } from './components/primary-tablist/Component
 export { SecondaryTabListResponsive } from './components/secondary-tablist/Component.responsive.js';
 export { Tab } from './components/tab/Component.js';
 export { TabsResponsive as Tabs } from './components/tabs/Component.responsive.js';
-import 'react';
-import '@alfalab/core-components-mq/modern';
-import './components/primary-tablist/Component.desktop.js';
-import './components/primary-tablist/Component.js';
-import '@juggle/resize-observer';
-import 'classnames';
-import '@alfalab/core-components-keyboard-focusable/modern';
-import '@alfalab/core-components-shared/modern';
-import './hooks/use-tabs.js';
-import './components/scrollable-container/Component.js';
-import 'compute-scroll-into-view';
-import './components/scroll-controls/Component.js';
-import 'lodash.debounce';
-import '@alfalab/core-components-icon-button/modern';
-import '@alfalab/icons-glyph/ChevronLeftMIcon';
-import '@alfalab/icons-glyph/ChevronRightMIcon';
-import './components/scroll-controls/utils.js';
-import './components/title/Component.js';
-import './index.module-b97c5648.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-50acb6fd.js';
-import './components/secondary-tablist/Component.mobile.js';
-import '@alfalab/core-components-tag/modern/mobile';
-import './components/tabs/Component.js';

package/modern/index.module-819ff0ab.js

@@ -0,0 +1,4 @@
+const commonStyles = {"component":"tabs__component_12vn9","fullWidthScroll":"tabs__fullWidthScroll_12vn9","container":"tabs__container_12vn9","title":"tabs__title_12vn9","xxs":"tabs__xxs_12vn9","xs":"tabs__xs_12vn9","s":"tabs__s_12vn9","m":"tabs__m_12vn9","l":"tabs__l_12vn9","xl":"tabs__xl_12vn9"};
+require('./components/secondary-tablist/index.css')
+
+export { commonStyles as c };

package/modern/index.module-ee14bf5a.js

@@ -0,0 +1,4 @@
+const styles = {"component":"tabs__component_ravim","desktop":"tabs__desktop_ravim","paragraph-primary-large":"tabs__paragraph-primary-large_ravim","title":"tabs__title_ravim","paragraph-primary-medium":"tabs__paragraph-primary-medium_ravim","paragraph-primary-small":"tabs__paragraph-primary-small_ravim","action-primary-large":"tabs__action-primary-large_ravim","action-primary-medium":"tabs__action-primary-medium_ravim","action-primary-small":"tabs__action-primary-small_ravim","accent-primary-large":"tabs__accent-primary-large_ravim","accent-primary-medium":"tabs__accent-primary-medium_ravim","accent-primary-small":"tabs__accent-primary-small_ravim","pickerWrapper":"tabs__pickerWrapper_ravim","option":"tabs__option_ravim","scrollControls":"tabs__scrollControls_ravim","headline-system-xlarge":"tabs__headline-system-xlarge_ravim","headline-system-large":"tabs__headline-system-large_ravim","headline-system-medium":"tabs__headline-system-medium_ravim","headline-system-small":"tabs__headline-system-small_ravim","headline-system-xsmall":"tabs__headline-system-xsmall_ravim","headline-xlarge":"tabs__headline-xlarge_ravim","headline-large":"tabs__headline-large_ravim","headline-medium":"tabs__headline-medium_ravim","headline-small":"tabs__headline-small_ravim","headline-xsmall":"tabs__headline-xsmall_ravim","fullWidthScroll":"tabs__fullWidthScroll_ravim","container":"tabs__container_ravim","disabled":"tabs__disabled_ravim","focused":"tabs__focused_ravim","collapsed":"tabs__collapsed_ravim","selected":"tabs__selected_ravim","line":"tabs__line_ravim","s":"tabs__s_ravim","xs":"tabs__xs_ravim","xxs":"tabs__xxs_ravim","m":"tabs__m_ravim","l":"tabs__l_ravim","xl":"tabs__xl_ravim","rightAddons":"tabs__rightAddons_ravim"};
+require('./components/primary-tablist/index.css')
+
+export { styles as s };

package/modern/mobile/index.js

@@ -2,24 +2,3 @@ export { PrimaryTabListMobile } from '../components/primary-tablist/Component.mo
 export { SecondaryTabListMobile } from '../components/secondary-tablist/Component.mobile.js';
 export { Tab } from '../components/tab/Component.js';
 export { TabsMobile } from '../components/tabs/Component.mobile.js';
-import 'react';
-import 'classnames';
-import '../components/primary-tablist/Component.js';
-import '@juggle/resize-observer';
-import '@alfalab/core-components-keyboard-focusable/modern';
-import '@alfalab/core-components-shared/modern';
-import '../hooks/use-tabs.js';
-import '../components/scrollable-container/Component.js';
-import 'compute-scroll-into-view';
-import '../components/scroll-controls/Component.js';
-import 'lodash.debounce';
-import '@alfalab/core-components-icon-button/modern';
-import '@alfalab/icons-glyph/ChevronLeftMIcon';
-import '@alfalab/icons-glyph/ChevronRightMIcon';
-import '../components/scroll-controls/utils.js';
-import '../components/title/Component.js';
-import '../index.module-b97c5648.js';
-import '@alfalab/core-components-tag/modern/mobile';
-import '../components/secondary-tablist/Component.js';
-import '../index.module-50acb6fd.js';
-import '../components/tabs/Component.js';

package/modern/shared/index.js

@@ -1,15 +1,3 @@
 export { ScrollableContainer } from '../components/scrollable-container/Component.js';
 export { useTabs } from '../hooks/use-tabs.js';
 export { useCollapsibleElements } from '../hooks/use-collapsible-elements.js';
-import 'react';
-import 'classnames';
-import 'compute-scroll-into-view';
-import '../components/scroll-controls/Component.js';
-import 'lodash.debounce';
-import '@alfalab/core-components-icon-button/modern';
-import '@alfalab/icons-glyph/ChevronLeftMIcon';
-import '@alfalab/icons-glyph/ChevronRightMIcon';
-import '../components/scroll-controls/utils.js';
-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 = {
@@ -22,6 +22,10 @@ type TabsProps = {
      * Внешний вид заголовков табов
      */
     view?: 'primary' | 'secondary';
+    /**
+     * Стиль текста. Имеет приоритет над size. Работает только в primary табах.
+     */
+    textStyle?: 'paragraph-primary-large' | 'paragraph-primary-medium' | 'paragraph-primary-small' | 'action-primary-large' | 'action-primary-medium' | 'action-primary-small' | 'accent-primary-large' | 'accent-primary-medium' | 'accent-primary-small' | 'headline-system-xlarge' | 'headline-system-large' | 'headline-system-medium' | 'headline-system-small' | 'headline-system-xsmall' | 'headline-xlarge' | 'headline-large' | 'headline-medium' | 'headline-small' | 'headline-xsmall';
     /**
      * Высота заголовков табов
      */
@@ -119,6 +123,10 @@ type TabProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Реф для кнопки переключения таба
+     */
+    toggleRef?: Ref<HTMLDivElement>;
 };
 type TabListTitle = {
     title: string;
@@ -130,8 +138,9 @@ 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'> & {
+type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView' | 'textStyle'> & {
     /**
      * Заголовки табов
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-tabs",
-    "version": "8.5.1",
+    "version": "8.6.0",
     "description": "Tabs components",
     "keywords": [],
     "license": "MIT",
@@ -15,13 +15,13 @@
     },
     "dependencies": {
         "@alfalab/core-components-keyboard-focusable": "^4.1.0",
-        "@alfalab/core-components-tag": "^8.0.1",
-        "@alfalab/core-components-picker-button": "^11.5.1",
-        "@alfalab/core-components-badge": "^5.5.0",
+        "@alfalab/core-components-tag": "^8.1.0",
+        "@alfalab/core-components-picker-button": "^11.5.3",
+        "@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.1",
-        "@alfalab/core-components-icon-button": "^6.5.1",
+        "@alfalab/core-components-icon-button": "^6.5.2",
         "@alfalab/icons-glyph": "^2.139.0",
         "classnames": "^2.3.1",
         "compute-scroll-into-view": "^3.1.0",

package/shared/index.js

@@ -5,19 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var components_scrollableContainer_Component = require('../components/scrollable-container/Component.js');
 var hooks_useTabs = require('../hooks/use-tabs.js');
 var hooks_useCollapsibleElements = require('../hooks/use-collapsible-elements.js');
-require('react');
-require('classnames');
-require('compute-scroll-into-view');
-require('../components/scroll-controls/Component.js');
-require('tslib');
-require('lodash.debounce');
-require('@alfalab/core-components-icon-button');
-require('@alfalab/icons-glyph/ChevronLeftMIcon');
-require('@alfalab/icons-glyph/ChevronRightMIcon');
-require('../components/scroll-controls/utils.js');
-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';
@@ -27,6 +27,7 @@ export const CollapsiblePrimaryTabList = ({
     dataTestId,
     breakpoint = 1024,
     defaultMatchMediaValue,
+    textStyle,
 }: TabListProps) => {
     const lineRef = useRef<HTMLDivElement>(null);
 
@@ -49,17 +50,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],
     );
 
@@ -82,11 +93,11 @@ export const CollapsiblePrimaryTabList = ({
         <div
             role='tablist'
             data-test-id={dataTestId}
-            className={cn(styles.component, className, size && styles[size], {
+            className={cn(styles.component, className, !textStyle && size && styles[size], {
                 [styles.fullWidthScroll]: fullWidthScroll,
             })}
         >
-            {tablistTitles.map(({ dataTestId: _, ...restTitleProps }, index) => (
+            {tablistTitles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (
                 <KeyboardFocusable key={restTitleProps.id}>
                     {(ref, focused) => (
                         <Title
@@ -103,7 +114,7 @@ export const CollapsiblePrimaryTabList = ({
                 <span ref={addonRef} role='menu' className={styles.pickerWrapper}>
                     <PickerButtonDesktop
                         fieldClassName={styles.title}
-                        optionClassName={cn(styles.pickerOption, size && styles[size])}
+                        optionClassName={cn(size && styles[size])}
                         options={collapsedOptions}
                         onChange={handleOptionsChange}
                         rightAddons={
@@ -124,7 +135,15 @@ export const CollapsiblePrimaryTabList = ({
     );
 
     return (
-        <div ref={containerRef} className={cn(styles.container, containerClassName)}>
+        <div
+            ref={containerRef}
+            className={cn(
+                styles.container,
+                textStyle && styles[textStyle],
+                styles.desktop,
+                containerClassName,
+            )}
+        >
             {renderContent()}
         </div>
     );

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import cn from 'classnames';
 
 import { TabListProps } from '../../typings';
 
@@ -15,11 +14,6 @@ const styles = {
 
 export type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;
 
-export const PrimaryTabListMobile = ({ className, ...restProps }: PrimaryTabListMobileProps) => (
-    <PrimaryTabList
-        {...restProps}
-        styles={styles}
-        className={cn(className, styles.mobile)}
-        platform='mobile'
-    />
+export const PrimaryTabListMobile = (props: PrimaryTabListMobileProps) => (
+    <PrimaryTabList {...props} styles={styles} platform='mobile' />
 );

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

@@ -22,6 +22,7 @@ export const PrimaryTabList = ({
     onChange,
     dataTestId,
     platform,
+    textStyle,
 }: TabListProps & Styles & PlatformProps) => {
     const lineRef = useRef<HTMLDivElement>(null);
 
@@ -55,11 +56,11 @@ export const PrimaryTabList = ({
         <div
             role='tablist'
             data-test-id={dataTestId}
-            className={cn(styles.component, className, size && styles[size], {
+            className={cn(styles.component, className, !textStyle && size && styles[size], {
                 [styles.fullWidthScroll]: fullWidthScroll,
             })}
         >
-            {titles.map(({ dataTestId: _, ...restTitleProps }, index) => (
+            {titles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (
                 <KeyboardFocusable key={restTitleProps.id}>
                     {(ref, focused) => (
                         <Title
@@ -76,18 +77,24 @@ export const PrimaryTabList = ({
         </div>
     );
 
+    const wrapperClassName = cn(textStyle && styles[textStyle], styles[platform]);
+
     return scrollable ? (
         <ScrollableContainer
+            containerWrapperClassName={wrapperClassName}
             activeChild={focusedTab || selectedTab}
             containerClassName={containerClassName}
+            scrollControlsClassName={cn(textStyle && styles.scrollControls)}
             fullWidthScroll={fullWidthScroll}
             view='primary'
-            size={size}
+            size={textStyle ? undefined : size}
             platform={platform}
         >
             {renderContent()}
         </ScrollableContainer>
     ) : (
-        <div className={cn(styles.container, containerClassName)}>{renderContent()}</div>
+        <div className={cn(styles.container, wrapperClassName, containerClassName)}>
+            {renderContent()}
+        </div>
     );
 };

package/src/components/primary-tablist/index.module.css

@@ -1,5 +1,6 @@
 @import '@alfalab/core-components-themes/src/default.css';
 @import '../../vars.css';
+@import './text-styles.module.css';
 
 .component {
     position: relative;
@@ -17,6 +18,11 @@
     }
 }
 
+.desktop {
+    @mixin text-style;
+    @mixin text-style-desktop;
+}
+
 .fullWidthScroll {
     min-width: calc(100% - 2 * var(--gap-m));
     margin: 0 var(--gap-m);

package/src/components/primary-tablist/mobile.module.css

@@ -1,5 +1,6 @@
 @import '@alfalab/core-components-themes/src/default.css';
 @import '../../vars.css';
+@import './text-styles.module.css';
 
 .title {
     composes: title from 'index.module.css';
@@ -17,4 +18,7 @@
             margin-left: var(--primary-tablist-mobile-gaps);
         }
     }
+
+    @mixin text-style;
+    @mixin text-style-mobile;
 }