@alfalab/core-components-tabs 7.7.1 → 8.0.0

package/modern/Component-63dec22f.d.ts

@@ -0,0 +1,167 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from "react";
+declare const colors: readonly [
+    "tertiary",
+    "disabled",
+    "accent",
+    "primary",
+    "attention",
+    "positive",
+    "secondary",
+    "tertiary-inverted",
+    "primary-inverted",
+    "secondary-inverted",
+    "link",
+    "negative",
+    "static-primary-light",
+    "static-secondary-light",
+    "static-tertiary-light",
+    "static-primary-dark",
+    "static-secondary-dark",
+    "static-tertiary-dark",
+    "static-accent"
+];
+type Color = (typeof colors)[number];
+type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
+type NativeProps = HTMLAttributes<HTMLSpanElement>;
+type TextBaseProps = {
+    /**
+     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/tokens-assets-типографика--docs)
+     */
+    view?: "primary-large" | "primary-medium" | "primary-small" | "secondary-large" | "secondary-medium" | "secondary-small" | "component" | "caps";
+    /**
+     * Цвет текста
+     */
+    color?: Color;
+    /**
+     * Толщина шрифта
+     */
+    weight?: "regular" | "medium" | "bold";
+    /**
+     * Делает цифры моноширинными
+     */
+    monospaceNumbers?: boolean;
+    /**
+     * HTML тег
+     */
+    tag?: "span" | "div";
+    /**
+     * Css-класс для стилизации (native prop)
+     */
+    className?: string;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+    /**
+     * Контент (native prop)
+     */
+    children?: React.ReactNode;
+    /**
+     * Добавляет отступы к тэгу 'p'
+     */
+    defaultMargins?: never;
+    /**
+     * Количество строк (не поддерживает IE)
+     */
+    rowLimit?: 1 | 2 | 3;
+};
+type TextPTagProps = Omit<TextBaseProps, "tag" | "defaultMargins"> & {
+    tag?: "p";
+    defaultMargins?: boolean;
+};
+type TextProps = Omit<NativeProps, "color"> & (TextBaseProps | TextPTagProps);
+type NativeProps$0 = HTMLAttributes<HTMLHeadingElement>;
+type TitleProps = Omit<NativeProps$0, "color"> & {
+    /**
+     * HTML тег
+     */
+    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
+    /**
+     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/guidelines-typography--page)
+     */
+    view?: "xlarge" | "large" | "medium" | "small" | "xsmall";
+    /**
+     * Цвет текста
+     */
+    color?: Color;
+    /**
+     * Толщина шрифта
+     */
+    weight?: "regular" | "medium" | "bold";
+    /**
+     * Шрифт текста
+     */
+    font?: "styrene" | "system";
+    /**
+     * Добавляет отступы
+     */
+    defaultMargins?: boolean;
+    /**
+     * Css-класс для стилизации (native prop)
+     */
+    className?: string;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+    /**
+     * Контент (native prop)
+     */
+    children?: React.ReactNode;
+    /**
+     * Количество строк (не поддерживает IE)
+     */
+    rowLimit?: 1 | 2 | 3;
+};
+type TitleMobileProps = Omit<TitleProps, "defaultMargins">;
+declare const Typography: {
+    Title: FC<TitleProps>;
+    Text: ForwardRefExoticComponent<TextProps & RefAttributes<TextElementType>>;
+    TitleResponsive: FC<TitleProps>;
+    TitleMobile: FC<TitleMobileProps>;
+};
+declare const typographyPresets: {
+    mobile: {
+        list: {
+            text: {
+                primary: {
+                    tag: string;
+                    view: string;
+                };
+                secondary: {
+                    tag: string;
+                    color: string;
+                    view: string;
+                };
+            };
+        };
+    };
+};
+declare const TitleResponsive: FC<TitleProps>;
+interface BackArrowAddonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Текст после иконки
+     */
+    text?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Вид компонента
+     */
+    view: 'mobile' | 'desktop';
+    /**
+     * Прозрачность текста
+     */
+    textOpacity?: number;
+    /**
+     * Обработчик клика
+     */
+    onClick?: () => void;
+}
+declare const BackArrowAddon: React.FC<BackArrowAddonProps>;
+export { Typography, typographyPresets, TitleResponsive, BackArrowAddonProps, BackArrowAddon };
+export type { TitleProps, TextProps, Color };

package/modern/Component-8b2c2707.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, SVGProps } from "react";
+import { PickerButtonSize, PickerButtonVariant } from "./types-4480ac4f";
+import { ButtonProps } from "./index-8b2c2707";
+import { FieldProps as BaseFieldProps } from "./typings-5e1b8383";
+declare const getIcon: (variant: PickerButtonVariant, size: PickerButtonSize) => FC<SVGProps<SVGSVGElement>>;
+type FieldProps = Omit<BaseFieldProps, 'size' | 'hint' | 'success' | 'error' | 'placeholder'> & ButtonProps & {
+    buttonSize?: PickerButtonSize;
+    buttonVariant?: PickerButtonVariant;
+    showArrow?: boolean;
+};
+declare const Field: ({ buttonSize, buttonVariant, view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, setSelectedItems, toggleMenu, valueRenderer, showArrow, labelView, ...restProps }: FieldProps) => React.JSX.Element;
+export { getIcon, Field };

package/modern/Component-9211a437.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { BaseButtonProps } from "./typings-9211a437";
+type SpinnerProps = {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "xs" | "s" | "m";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется спиннер
+     */
+    colors?: "default" | "inverted";
+};
+declare const Spinner: FC<SpinnerProps>;
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
+declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { SpinnerProps, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

package/modern/Component-e81c389f.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { NavigationBarProps } from "./index-e81c389f";
+type HeaderProps = Omit<NavigationBarProps, 'size' | 'view' | 'parentRef'>;
+declare const Header: FC<HeaderProps>;
+export { HeaderProps, Header };

package/modern/Component.desktop-2e2b2125.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
+type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonDesktopProps, ButtonDesktop };

package/modern/Component.desktop-785df74d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlDesktopProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlDesktop: React.ForwardRefExoticComponent<FormControlDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlDesktopProps, FormControlDesktop };

package/modern/Component.mobile-755fbaa3.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
+type ButtonMobileProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonMobile: React.ForwardRefExoticComponent<ButtonMobileProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonMobileProps, ButtonMobile };

package/modern/Component.mobile-d7e9f69d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlMobileProps, FormControlMobile };

package/modern/Component.mobile-ebda875c.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseTagProps } from "./index-ebda875c";
+type TagMobileProps = Omit<BaseTagProps, 'styles'>;
+declare const TagMobile: React.ForwardRefExoticComponent<TagMobileProps & React.RefAttributes<HTMLButtonElement>>;
+export { TagMobileProps, TagMobile };

package/modern/Component.responsive-785df74d.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const FormControl: React.ForwardRefExoticComponent<Omit<BaseFormControlProps, "styles" | "colorStyles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { FormControlProps, FormControl };

package/modern/collapsible.d.ts

@@ -0,0 +1,7 @@
+export { TabsCollapsibleResponsive as TabsCollapsible, TabsCollapsibleResponsiveProps as TabsCollapsibleProps } from "./components/tabs/Component.collapsible.responsive";
+export * from "./components/tabs/Component.collabsible.desktop";
+export * from "./components/tabs/Component.collapsible.mobile";
+export * from "./components/primary-tablist/Component.collapsible.responsive";
+export * from "./components/primary-tablist/Component.collapsible.desktop";
+export * from "./components/primary-tablist/Component.collapsible.mobile";
+export * from "./components/tab/index";

package/modern/collapsible.js

@@ -0,0 +1,25 @@
+export { TabsCollapsibleResponsive as TabsCollapsible } from './components/tabs/Component.collapsible.responsive.js';
+export { TabsCollapsibleDesktop } from './components/tabs/Component.collabsible.desktop.js';
+export { TabsCollapsibleMobile } from './components/tabs/Component.collapsible.mobile.js';
+export { CollapsiblePrimaryTabListResponsive } from './components/primary-tablist/Component.collapsible.responsive.js';
+export { CollapsiblePrimaryTabListDesktop } from './components/primary-tablist/Component.collapsible.desktop.js';
+export { CollapsiblePrimaryTabListMobile } from './components/primary-tablist/Component.collapsible.mobile.js';
+export { Tab } from './components/tab/Component.js';
+import 'react';
+import './components/tabs/Component.js';
+import '@alfalab/core-components-mq/modern';
+import './components/primary-tablist/Component.collapsible.js';
+import 'classnames';
+import '@alfalab/core-components-badge/modern';
+import '@alfalab/core-components-keyboard-focusable/modern';
+import '@alfalab/core-components-picker-button/modern/desktop';
+import './hooks/use-tablist-titles.js';
+import './hooks/use-collapsible-elements.js';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import './hooks/use-tabs.js';
+import '@alfalab/core-components-shared/modern';
+import './synthetic-events.js';
+import './components/title/Component.js';
+import './index.module-264a8450.js';
+import './mobile.module-9693b0a4.js';

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { Styles, TabListProps } from "../../typings";
+declare const CollapsiblePrimaryTabList: ({ size, className, containerClassName, titles, styles, selectedId, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint, defaultMatchMediaValue, }: TabListProps & Styles) => React.JSX.Element;
+export { CollapsiblePrimaryTabList };

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TabListProps } from "../../typings";
+declare const CollapsiblePrimaryTabListDesktop: ({ size, ...restProps }: TabListProps) => React.JSX.Element;
+export { CollapsiblePrimaryTabListDesktop };

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CollapsiblePrimaryTabList } from './Component.collapsible.js';
+import { c as commonStyles } from '../../index.module-264a8450.js';
+import 'classnames';
+import '@alfalab/core-components-badge/modern';
+import '@alfalab/core-components-keyboard-focusable/modern';
+import '@alfalab/core-components-picker-button/modern/desktop';
+import '../../hooks/use-tablist-titles.js';
+import '@alfalab/core-components-mq/modern';
+import '../../hooks/use-collapsible-elements.js';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../hooks/use-tabs.js';
+import '@alfalab/core-components-shared/modern';
+import '../../synthetic-events.js';
+import '../title/Component.js';
+
+const CollapsiblePrimaryTabListDesktop = ({ size = 'm', ...restProps }) => (React.createElement(CollapsiblePrimaryTabList, { ...restProps, size: size, styles: commonStyles }));
+
+export { CollapsiblePrimaryTabListDesktop };

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

@@ -0,0 +1,61 @@
+import React, { useRef, useEffect, useMemo } from 'react';
+import cn from 'classnames';
+import { Badge } from '@alfalab/core-components-badge/modern';
+import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable/modern';
+import { PickerButtonDesktop } from '@alfalab/core-components-picker-button/modern/desktop';
+import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
+import { createSyntheticMouseEvent } from '../../synthetic-events.js';
+import { Title } from '../title/Component.js';
+import '@alfalab/core-components-mq/modern';
+import '../../hooks/use-collapsible-elements.js';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../hooks/use-tabs.js';
+import '@alfalab/core-components-shared/modern';
+
+const DEFAULT_STYLES = {};
+const CollapsiblePrimaryTabList = ({ size, className, containerClassName, titles = [], styles = DEFAULT_STYLES, selectedId = titles.length ? titles[0].id : undefined, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint = 768, defaultMatchMediaValue, }) => {
+    const lineRef = useRef(null);
+    const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } = useTablistTitles({
+        titles,
+        selectedId,
+        collapsedTabsIds,
+        breakpoint,
+        onChange,
+        defaultMatchMediaValue,
+    });
+    useEffect(() => {
+        if (selectedTab && lineRef.current) {
+            lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
+            lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
+        }
+    }, [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,
+        }) },
+        tablistTitles.map(({ dataTestId: _, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles }))))),
+        collapsedOptions.length ? (React.createElement("span", { ref: addonRef, role: 'menu', 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 (React.createElement("div", { ref: containerRef, className: cn(styles.container, containerClassName) }, renderContent()));
+};
+
+export { CollapsiblePrimaryTabList };

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { TabListProps } from "../../typings";
+type CollapsiblePrimaryTabListMobileProps = Omit<TabListProps, 'size'>;
+declare const CollapsiblePrimaryTabListMobile: ({ className, ...restProps }: CollapsiblePrimaryTabListMobileProps) => React.JSX.Element;
+export { CollapsiblePrimaryTabListMobileProps, CollapsiblePrimaryTabListMobile };

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import cn from 'classnames';
+import { CollapsiblePrimaryTabList } from './Component.collapsible.js';
+import { c as commonStyles } from '../../index.module-264a8450.js';
+import { m as mobileStyles } from '../../mobile.module-9693b0a4.js';
+import '@alfalab/core-components-badge/modern';
+import '@alfalab/core-components-keyboard-focusable/modern';
+import '@alfalab/core-components-picker-button/modern/desktop';
+import '../../hooks/use-tablist-titles.js';
+import '@alfalab/core-components-mq/modern';
+import '../../hooks/use-collapsible-elements.js';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../hooks/use-tabs.js';
+import '@alfalab/core-components-shared/modern';
+import '../../synthetic-events.js';
+import '../title/Component.js';
+
+const styles = {
+    ...commonStyles,
+    ...mobileStyles,
+};
+const CollapsiblePrimaryTabListMobile = ({ className, ...restProps }) => (React.createElement(CollapsiblePrimaryTabList, { ...restProps, styles: styles, className: cn(className, styles.mobile) }));
+
+export { CollapsiblePrimaryTabListMobile };

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TabListProps } from "../../typings";
+declare const CollapsiblePrimaryTabListResponsive: ({ size, fullWidthScroll, breakpoint, defaultMatchMediaValue, ...restProps }: TabListProps) => React.JSX.Element;
+export { CollapsiblePrimaryTabListResponsive };

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useMatchMedia } from '@alfalab/core-components-mq/modern';
+import { CollapsiblePrimaryTabListDesktop } from './Component.collapsible.desktop.js';
+import { CollapsiblePrimaryTabListMobile } from './Component.collapsible.mobile.js';
+import './Component.collapsible.js';
+import 'classnames';
+import '@alfalab/core-components-badge/modern';
+import '@alfalab/core-components-keyboard-focusable/modern';
+import '@alfalab/core-components-picker-button/modern/desktop';
+import '../../hooks/use-tablist-titles.js';
+import '../../hooks/use-collapsible-elements.js';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../hooks/use-tabs.js';
+import '@alfalab/core-components-shared/modern';
+import '../../synthetic-events.js';
+import '../title/Component.js';
+import '../../index.module-264a8450.js';
+import '../../mobile.module-9693b0a4.js';
+
+const CollapsiblePrimaryTabListResponsive = ({ size, fullWidthScroll, breakpoint = 768, defaultMatchMediaValue, ...restProps }) => {
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+    return isDesktop ? (React.createElement(CollapsiblePrimaryTabListDesktop, { size: size, defaultMatchMediaValue: defaultMatchMediaValue, breakpoint: breakpoint, ...restProps })) : (React.createElement(CollapsiblePrimaryTabListMobile, { fullWidthScroll: fullWidthScroll, defaultMatchMediaValue: defaultMatchMediaValue, breakpoint: breakpoint, ...restProps }));
+};
+
+export { CollapsiblePrimaryTabListResponsive };

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

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

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import React from 'react';
 import { TabListProps } from "../../typings";
-declare const PrimaryTabListDesktop: ({ size, ...restProps }: TabListProps) => JSX.Element;
+declare const PrimaryTabListDesktop: ({ size, ...restProps }: TabListProps) => React.JSX.Element;
 export { PrimaryTabListDesktop };

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

@@ -1,16 +1,10 @@
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-75cf2354.js';
+import { c as commonStyles } from '../../index.module-264a8450.js';
 import 'classnames';
-import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-keyboard-focusable/modern';
-import '@alfalab/core-components-picker-button/modern/desktop';
-import '../../hooks/use-tablist-titles.js';
-import '@alfalab/hooks';
-import '../../hooks/use-collapsible-elements.js';
-import '@juggle/resize-observer';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
+import '@alfalab/core-components-shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../title/Component.js';

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

@@ -1,26 +1,17 @@
-import React, { useRef, useEffect, useMemo } from 'react';
+import React, { useRef, useEffect } from 'react';
 import cn from 'classnames';
-import { Badge } from '@alfalab/core-components-badge/modern';
 import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable/modern';
-import { PickerButtonDesktop } from '@alfalab/core-components-picker-button/modern/desktop';
-import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
-import { createSyntheticMouseEvent } from '../../synthetic-events.js';
+import { useTabs } from '../../hooks/use-tabs.js';
 import { ScrollableContainer } from '../scrollable-container/Component.js';
 import { Title } from '../title/Component.js';
-import '@alfalab/hooks';
-import '../../hooks/use-collapsible-elements.js';
-import '@juggle/resize-observer';
-import '../../hooks/use-tabs.js';
+import '@alfalab/core-components-shared/modern';
 import 'compute-scroll-into-view';
 
-const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, collapsible, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint = 1024, }) => {
+const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, fullWidthScroll, onChange, dataTestId, }) => {
     const lineRef = useRef(null);
-    const { containerRef, addonRef, tablistTitles, selectedTab, focusedTab, getTabListItemProps } = useTablistTitles({
+    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
         titles,
         selectedId,
-        collapsible,
-        collapsedTabsIds,
-        breakpoint,
         onChange,
     });
     useEffect(() => {
@@ -28,33 +19,13 @@ const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titl
             lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
             lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
         }
-    }, [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 });
-        }
-    };
+    }, [selectedTab]);
     const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, size && styles[size], {
             [styles.fullWidthScroll]: fullWidthScroll,
         }) },
-        tablistTitles.map(({ dataTestId: _, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles }))))),
-        collapsedOptions.length ? (React.createElement("span", { ref: addonRef, role: 'menu', 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,
+        titles.map(({ dataTestId: _, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles }))))),
         React.createElement("div", { className: styles.line, ref: lineRef })));
-    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()));
+    return scrollable ? (React.createElement(ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll }, renderContent())) : (React.createElement("div", { className: cn(styles.container, containerClassName) }, renderContent()));
 };
 
 export { PrimaryTabList };

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
+import React from 'react';
 import { TabListProps } from "../../typings";
-type PrimaryTabListMobileProps = Omit<TabListProps, 'size'>;
-declare const PrimaryTabListMobile: ({ className, ...restProps }: PrimaryTabListMobileProps) => JSX.Element;
+type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;
+declare const PrimaryTabListMobile: ({ className, ...restProps }: PrimaryTabListMobileProps) => React.JSX.Element;
 export { PrimaryTabListMobileProps, PrimaryTabListMobile };

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

@@ -1,23 +1,15 @@
 import React from 'react';
 import cn from 'classnames';
 import { PrimaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-75cf2354.js';
-import '@alfalab/core-components-badge/modern';
+import { c as commonStyles } from '../../index.module-264a8450.js';
+import { m as mobileStyles } from '../../mobile.module-9693b0a4.js';
 import '@alfalab/core-components-keyboard-focusable/modern';
-import '@alfalab/core-components-picker-button/modern/desktop';
-import '../../hooks/use-tablist-titles.js';
-import '@alfalab/hooks';
-import '../../hooks/use-collapsible-elements.js';
-import '@juggle/resize-observer';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
+import '@alfalab/core-components-shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../title/Component.js';
 
-const mobileStyles = {"title":"tabs__title_122wz tabs__title_ibntg","mobile":"tabs__mobile_122wz"};
-require('./mobile.css')
-
 const styles = {
     ...commonStyles,
     ...mobileStyles,