@alfalab/core-components-tabs 9.0.1 → 9.1.0

package/esm/components/secondary-tablist/mobile.module.css.js

@@ -1,6 +1,6 @@
 import './mobile.css';
 
-var mobileStyles = {"title":"tabs__title_1av5u tabs__title_1m1c7","mobile":"tabs__mobile_1av5u","skeleton":"tabs__skeleton_1av5u","transparentView":"tabs__transparentView_1av5u"};
+var mobileStyles = {"title":"tabs__title_1qp82 tabs__title_1v6cb","mobile":"tabs__mobile_1qp82","skeleton":"tabs__skeleton_1qp82","transparentView":"tabs__transparentView_1qp82"};
 
 export { mobileStyles as default };
 //# sourceMappingURL=mobile.module.css.js.map

package/esm/components/tab/Component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { TabProps } from '../../typings';
-export declare const Tab: ({ children, hidden, className, disabled, dataTestId }: TabProps) => React.JSX.Element | null;
+export declare const Tab: ({ children, hidden, className, disabled, dataTestId, id, ...restProps }: TabProps) => React.JSX.Element | null;

package/esm/components/tab/Component.js

@@ -1,13 +1,14 @@
+import { __rest, __assign } from 'tslib';
 import React from 'react';
 import cn from 'classnames';
 import styles from './index.module.css.js';
 
 var Tab = function (_a) {
     var _b;
-    var children = _a.children, hidden = _a.hidden, className = _a.className, disabled = _a.disabled, dataTestId = _a.dataTestId;
-    return children ? (React.createElement("div", { className: cn(styles.component, (_b = {},
+    var children = _a.children, hidden = _a.hidden, className = _a.className, disabled = _a.disabled, dataTestId = _a.dataTestId; _a.id; var restProps = __rest(_a, ["children", "hidden", "className", "disabled", "dataTestId", "id"]);
+    return children ? (React.createElement("div", __assign({ className: cn(styles.component, (_b = {},
             _b[styles.hidden] = hidden,
-            _b), className), hidden: hidden, role: 'tabpanel', tabIndex: disabled ? -1 : 0, "data-test-id": dataTestId }, children)) : null;
+            _b), className), hidden: hidden, role: 'tabpanel', tabIndex: disabled ? -1 : 0, "data-test-id": dataTestId }, restProps), children)) : null;
 };
 
 export { Tab };

package/esm/components/tab/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/tab/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { TabProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Tab = ({ children, hidden, className, disabled, dataTestId }: TabProps) =>\n    children ? (\n        <div\n            className={cn(\n                styles.component,\n                {\n                    [styles.hidden]: hidden,\n                },\n                className,\n            )}\n            hidden={hidden}\n            role='tabpanel'\n            tabIndex={disabled ? -1 : 0}\n            data-test-id={dataTestId}\n        >\n            {children}\n        </div>\n    ) : null;\n"],"names":[],"mappings":";;;;AAOO,IAAM,GAAG,GAAG,UAAC,EAA+D,EAAA;;AAA7D,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA;AACnE,IAAA,OAAA,QAAQ,IACJ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAEZ,YAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AAE3B,YAAA,EAAA,GAAA,SAAS,CACZ,EACD,MAAM,EAAE,MAAM,EACd,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,CAAC,EACb,cAAA,EAAA,UAAU,EAEvB,EAAA,QAAQ,CACP,IACN,IAAI;AAhBR;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/tab/Component.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport cn from 'classnames';\n\nimport { TabProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Tab = ({\n    children,\n    hidden,\n    className,\n    disabled,\n    dataTestId,\n    id,\n    ...restProps\n}: TabProps) =>\n    children ? (\n        <div\n            className={cn(\n                styles.component,\n                {\n                    [styles.hidden]: hidden,\n                },\n                className,\n            )}\n            hidden={hidden}\n            role='tabpanel'\n            tabIndex={disabled ? -1 : 0}\n            data-test-id={dataTestId}\n            {...(restProps as AriaAttributes)}\n        >\n            {children}\n        </div>\n    ) : null;\n"],"names":[],"mappings":";;;;;AAQO,IAAM,GAAG,GAAG,UAAC,EAQT,EAAA;;IAPP,IAAA,QAAQ,cAAA,CACR,CAAA,MAAM,YAAA,CACN,CAAA,SAAS,eAAA,CACT,CAAA,QAAQ,cAAA,CACR,CAAA,UAAU,gBAAA,CACV,MAAE,CACC,KAAA,SAAS,GAPI,MAAA,CAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,WAAA,EAAA,UAAA,EAAA,YAAA,EAAA,IAAA,CAQnB;AACG,IAAA,OAAA,QAAQ,IACJ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EACI,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAEZ,YAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AAE3B,YAAA,EAAA,GAAA,SAAS,CACZ,EACD,MAAM,EAAE,MAAM,EACd,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,cAAA,EACb,UAAU,EACnB,EAAA,SAA4B,CAEhC,EAAA,QAAQ,CACP,IACN,IAAI;;;;;"}

package/esm/components/tab/index.css

@@ -1,7 +1,7 @@
-.tabs__component_a061z {
+.tabs__component_1t77w {
     outline: none;
 }
 
-.tabs__hidden_a061z {
+.tabs__hidden_1t77w {
     display: none;
 }

package/esm/components/tab/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"tabs__component_a061z","hidden":"tabs__hidden_a061z"};
+var styles = {"component":"tabs__component_1t77w","hidden":"tabs__hidden_1t77w"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/components/tabs/Component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { TabsProps } from '../../typings';
-export declare const Tabs: ({ TabList, className, containerClassName, size, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, client, defaultMatchMediaValue, tagShape, tagView, showSkeleton, skeletonProps, textStyle, style, }: Omit<TabsProps, 'view'>) => React.JSX.Element;
+export declare const Tabs: ({ TabList, className, containerClassName, size, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, client, defaultMatchMediaValue, tagShape, tagView, showSkeleton, skeletonProps, textStyle, style, ...restProps }: Omit<TabsProps, 'view'>) => React.JSX.Element;

package/esm/components/tabs/Component.js

@@ -1,7 +1,8 @@
+import { __rest, __assign } from 'tslib';
 import React, { cloneElement } from 'react';
 
 var Tabs = function (_a) {
-    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, breakpoint = _a.breakpoint, client = _a.client, defaultMatchMediaValue = _a.defaultMatchMediaValue, tagShape = _a.tagShape, tagView = _a.tagView, _d = _a.showSkeleton, showSkeleton = _d === void 0 ? false : _d, skeletonProps = _a.skeletonProps, textStyle = _a.textStyle, style = _a.style;
+    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, breakpoint = _a.breakpoint, client = _a.client, defaultMatchMediaValue = _a.defaultMatchMediaValue, tagShape = _a.tagShape, tagView = _a.tagView, _d = _a.showSkeleton, showSkeleton = _d === void 0 ? false : _d, skeletonProps = _a.skeletonProps, textStyle = _a.textStyle, style = _a.style, restProps = __rest(_a, ["TabList", "className", "containerClassName", "size", "children", "selectedId", "scrollable", "collapsedTabsIds", "fullWidthScroll", "keepMounted", "dataTestId", "onChange", "breakpoint", "client", "defaultMatchMediaValue", "tagShape", "tagView", "showSkeleton", "skeletonProps", "textStyle", "style"]);
     var tabsArray = React.Children.toArray(children);
     var titles = tabsArray.map(function (_a) {
         var _b = _a.props, title = _b.title, id = _b.id, rightAddons = _b.rightAddons, disabled = _b.disabled, hidden = _b.hidden, toggleClassName = _b.toggleClassName, toggleTestId = _b.dataTestId, toggleRef = _b.toggleRef;
@@ -17,7 +18,7 @@ var Tabs = function (_a) {
         });
     });
     var tabs = tabsArray.filter(function (tab) { return tab.props.id === selectedId || tab.props.keepMounted || keepMounted; });
-    return (React.createElement("div", { className: className },
+    return (React.createElement("div", __assign({ className: className }, restProps),
         React.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsedTabsIds: collapsedTabsIds, onChange: onChange, dataTestId: dataTestId, defaultMatchMediaValue: defaultMatchMediaValue, breakpoint: breakpoint, client: client, fullWidthScroll: fullWidthScroll, tagShape: tagShape, tagView: tagView, textStyle: textStyle, inlineStyle: style, showSkeleton: showSkeleton, skeletonProps: skeletonProps }),
         tabs.map(function (tab) { return cloneElement(tab, { hidden: tab.props.id !== selectedId }); })));
 };

package/esm/components/tabs/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/tabs/Component.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\n\nimport { TabsProps } from '../../typings';\n\nexport const Tabs = ({\n    TabList,\n    className,\n    containerClassName,\n    size,\n    children,\n    selectedId,\n    scrollable,\n    collapsedTabsIds,\n    fullWidthScroll = false,\n    keepMounted = false,\n    dataTestId,\n    onChange,\n    breakpoint,\n    client,\n    defaultMatchMediaValue,\n    tagShape,\n    tagView,\n    showSkeleton = false,\n    skeletonProps,\n    textStyle,\n    style,\n}: Omit<TabsProps, 'view'>) => {\n    const tabsArray = React.Children.toArray(children) as TabsProps['children'];\n    const titles = tabsArray.map(\n        ({\n            props: {\n                title,\n                id,\n                rightAddons,\n                disabled,\n                hidden,\n                toggleClassName,\n                dataTestId: toggleTestId,\n                toggleRef,\n            },\n        }) => ({\n            title,\n            id,\n            disabled,\n            rightAddons,\n            hidden,\n            toggleClassName,\n            dataTestId: toggleTestId,\n            toggleRef,\n        }),\n    );\n\n    const tabs = tabsArray.filter(\n        (tab) => tab.props.id === selectedId || tab.props.keepMounted || keepMounted,\n    );\n\n    return (\n        <div className={className}>\n            <TabList\n                containerClassName={containerClassName}\n                size={size}\n                titles={titles}\n                selectedId={selectedId}\n                scrollable={scrollable}\n                collapsedTabsIds={collapsedTabsIds}\n                onChange={onChange}\n                dataTestId={dataTestId}\n                defaultMatchMediaValue={defaultMatchMediaValue}\n                breakpoint={breakpoint}\n                client={client}\n                fullWidthScroll={fullWidthScroll}\n                tagShape={tagShape}\n                tagView={tagView}\n                textStyle={textStyle}\n                inlineStyle={style}\n                showSkeleton={showSkeleton}\n                skeletonProps={skeletonProps}\n            />\n\n            {tabs.map((tab) => cloneElement(tab, { hidden: tab.props.id !== selectedId }))}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/tabs/Component.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\n\nimport { TabsProps } from '../../typings';\n\nexport const Tabs = ({\n    TabList,\n    className,\n    containerClassName,\n    size,\n    children,\n    selectedId,\n    scrollable,\n    collapsedTabsIds,\n    fullWidthScroll = false,\n    keepMounted = false,\n    dataTestId,\n    onChange,\n    breakpoint,\n    client,\n    defaultMatchMediaValue,\n    tagShape,\n    tagView,\n    showSkeleton = false,\n    skeletonProps,\n    textStyle,\n    style,\n    ...restProps\n}: Omit<TabsProps, 'view'>) => {\n    const tabsArray = React.Children.toArray(children) as TabsProps['children'];\n    const titles = tabsArray.map(\n        ({\n            props: {\n                title,\n                id,\n                rightAddons,\n                disabled,\n                hidden,\n                toggleClassName,\n                dataTestId: toggleTestId,\n                toggleRef,\n            },\n        }) => ({\n            title,\n            id,\n            disabled,\n            rightAddons,\n            hidden,\n            toggleClassName,\n            dataTestId: toggleTestId,\n            toggleRef,\n        }),\n    );\n\n    const tabs = tabsArray.filter(\n        (tab) => tab.props.id === selectedId || tab.props.keepMounted || keepMounted,\n    );\n\n    return (\n        <div className={className} {...restProps}>\n            <TabList\n                containerClassName={containerClassName}\n                size={size}\n                titles={titles}\n                selectedId={selectedId}\n                scrollable={scrollable}\n                collapsedTabsIds={collapsedTabsIds}\n                onChange={onChange}\n                dataTestId={dataTestId}\n                defaultMatchMediaValue={defaultMatchMediaValue}\n                breakpoint={breakpoint}\n                client={client}\n                fullWidthScroll={fullWidthScroll}\n                tagShape={tagShape}\n                tagView={tagView}\n                textStyle={textStyle}\n                inlineStyle={style}\n                showSkeleton={showSkeleton}\n                skeletonProps={skeletonProps}\n            />\n\n            {tabs.map((tab) => cloneElement(tab, { hidden: tab.props.id !== selectedId }))}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/esm/typings.d.ts

@@ -1,8 +1,8 @@
-import { FC, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
+import { AriaAttributes, FC, HTMLAttributes, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
 import { SkeletonProps } from '@alfalab/core-components-skeleton/esm';
 import { TagProps } from '@alfalab/core-components-tag/esm';
 export declare type SelectedId = string | number;
-export declare type TabsProps = {
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children' | 'className'>, AriaAttributes {
     /**
      * Дополнительный класс
      */
@@ -99,8 +99,8 @@ export declare type TabsProps = {
      * Доп. пропсы для скелетона
      */
     skeletonProps?: Omit<SkeletonProps, 'visible'>;
-};
-export declare type TabProps = {
+}
+export interface TabProps extends AriaAttributes {
     /**
      * Id таба
      */
@@ -145,8 +145,8 @@ export declare type TabProps = {
      * Реф для кнопки переключения таба
      */
     toggleRef?: Ref<HTMLDivElement>;
-};
-export declare type TabListTitle = {
+}
+export interface TabListTitle {
     title: NonNullable<ReactNode>;
     id: SelectedId;
     disabled?: boolean;
@@ -157,8 +157,8 @@ export declare type TabListTitle = {
     collapsed?: boolean;
     dataTestId?: string;
     toggleRef?: Ref<HTMLDivElement>;
-};
-export declare type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView' | 'textStyle' | 'showSkeleton' | 'skeletonProps'> & {
+}
+export interface TabListProps extends Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView' | 'textStyle' | 'showSkeleton' | 'skeletonProps'> {
     /**
      * Заголовки табов
      */
@@ -176,11 +176,11 @@ export declare type TabListProps = Pick<TabsProps, 'className' | 'containerClass
      * Дополнительные инлайн стили для заголовка
      */
     inlineStyle?: React.CSSProperties;
-};
-export declare type SecondaryTabListProps = TabListProps & {
+}
+export interface SecondaryTabListProps extends TabListProps {
     tagSize?: TagProps['size'];
     TagComponent?: FC<Omit<TagProps, 'breakpoint'>>;
-};
+}
 export declare type UseTabsProps = TabListProps;
 export declare type Styles = {
     styles?: {

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

@@ -6,7 +6,7 @@ import { PickerButtonDesktop } from '@alfalab/core-components-picker-button/mode
 import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
 import { createSyntheticMouseEvent } from '../../synthetic-events.js';
 import { Title } from '../title/Component.js';
-import styles from './index.module.css.js';
+import commonStyles from './index.module.css.js';
 
 const CollapsiblePrimaryTabList = ({ size = 'm', className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint, client, defaultMatchMediaValue, textStyle, showSkeleton, skeletonProps, }) => {
     const lineRef = useRef(null);
@@ -30,7 +30,7 @@ const CollapsiblePrimaryTabList = ({ size = 'm', className, containerClassName,
             options.push({
                 key: String(title.id),
                 value: title.id,
-                content: (React.createElement(Title, { ...title, ref: toggleRef, styles: styles, isOption: true })),
+                content: (React.createElement(Title, { ...title, ref: toggleRef, styles: commonStyles, isOption: true })),
             });
         }
         return options;
@@ -43,14 +43,14 @@ const CollapsiblePrimaryTabList = ({ size = 'm', className, containerClassName,
             onChange(syntheticMouseEvent, { selectedId: payload.selected.value });
         }
     };
-    const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, !textStyle && size && styles[size], {
-            [styles.fullWidthScroll]: fullWidthScroll,
+    const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(commonStyles.component, className, !textStyle && size && commonStyles[size], {
+            [commonStyles.fullWidthScroll]: fullWidthScroll,
         }) },
-        tablistTitles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles, showSkeleton: showSkeleton, skeletonProps: skeletonProps }))))),
-        collapsedOptions.length ? (React.createElement("span", { ref: addonRef, role: 'menu', className: styles.pickerWrapper },
-            React.createElement(PickerButtonDesktop, { fieldClassName: styles.title, optionClassName: cn(size && styles[size]), options: collapsedOptions, onChange: handleOptionsChange, rightAddons: collapsedAddonsLength ? (React.createElement(Badge, { view: 'count', content: collapsedAddonsLength })) : null, size: 'm', view: 'text', label: '\u0415\u0449\u0451', popoverPosition: 'bottom-end', disabled: showSkeleton }))) : null,
-        React.createElement("div", { className: styles.line, ref: lineRef })));
-    return (React.createElement("div", { ref: containerRef, className: cn(styles.container, textStyle && styles[textStyle], styles.desktop, containerClassName) }, renderContent()));
+        tablistTitles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: commonStyles, showSkeleton: showSkeleton, skeletonProps: skeletonProps }))))),
+        collapsedOptions.length ? (React.createElement("span", { ref: addonRef, role: 'menu', className: commonStyles.pickerWrapper },
+            React.createElement(PickerButtonDesktop, { fieldClassName: commonStyles.title, optionClassName: cn(size && commonStyles[size]), options: collapsedOptions, onChange: handleOptionsChange, rightAddons: collapsedAddonsLength ? (React.createElement(Badge, { view: 'count', content: collapsedAddonsLength })) : null, size: 'm', view: 'text', label: '\u0415\u0449\u0451', popoverPosition: 'bottom-end', disabled: showSkeleton }))) : null,
+        React.createElement("div", { className: commonStyles.line, ref: lineRef })));
+    return (React.createElement("div", { ref: containerRef, className: cn(commonStyles.container, textStyle && commonStyles[textStyle], commonStyles.desktop, containerClassName) }, renderContent()));
 };
 
 export { CollapsiblePrimaryTabList };

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

@@ -1 +1 @@
-{"version":3,"file":"Component.collapsible.js","sources":["../../../src/components/primary-tablist/Component.collapsible.tsx"],"sourcesContent":["import React, { Ref, useEffect, useMemo, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';\nimport {\n    PickerButtonDesktop,\n    PickerButtonDesktopProps,\n} from '@alfalab/core-components-picker-button/desktop';\n\nimport { useTablistTitles } from '../../hooks/use-tablist-titles';\nimport { createSyntheticMouseEvent } from '../../synthetic-events';\nimport { TabListProps } from '../../typings';\nimport { Title } from '../title';\n\nimport styles from './index.module.css';\n\nexport const CollapsiblePrimaryTabList = ({\n    size = 'm',\n    className,\n    containerClassName,\n    titles = [],\n    selectedId = titles.length ? titles[0].id : undefined,\n    collapsedTabsIds,\n    fullWidthScroll,\n    onChange,\n    dataTestId,\n    breakpoint,\n    client,\n    defaultMatchMediaValue,\n    textStyle,\n    showSkeleton,\n    skeletonProps,\n}: TabListProps) => {\n    const lineRef = useRef<HTMLDivElement>(null);\n\n    const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } =\n        useTablistTitles({\n            titles,\n            selectedId,\n            collapsedTabsIds,\n            onChange,\n            breakpoint,\n            client,\n            defaultMatchMediaValue,\n        });\n\n    useEffect(() => {\n        if (selectedTab && lineRef.current) {\n            lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n            lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n        }\n    }, [selectedTab, tablistTitles]);\n\n    const collapsedOptions = useMemo(\n        () =>\n            tablistTitles.reduce<PickerButtonDesktopProps['options']>(\n                (options, { toggleRef, ...title }) => {\n                    if (title.collapsed) {\n                        options.push({\n                            key: String(title.id),\n                            value: title.id,\n                            content: (\n                                <Title\n                                    {...title}\n                                    ref={toggleRef as Ref<HTMLButtonElement>}\n                                    styles={styles}\n                                    isOption={true}\n                                />\n                            ),\n                        });\n                    }\n\n                    return options;\n                },\n                [],\n            ),\n        [tablistTitles],\n    );\n\n    const collapsedAddonsLength = tablistTitles.filter(\n        (title) => title.collapsed && title.rightAddons,\n    ).length;\n\n    const handleOptionsChange = (\n        payload: Parameters<Required<PickerButtonDesktopProps>['onChange']>[0],\n    ) => {\n        if (payload.selected?.value && onChange) {\n            const nativeMouseEvent = new MouseEvent('change');\n            const syntheticMouseEvent = createSyntheticMouseEvent(nativeMouseEvent);\n\n            onChange(syntheticMouseEvent, { selectedId: payload.selected.value });\n        }\n    };\n\n    const renderContent = () => (\n        <div\n            role='tablist'\n            data-test-id={dataTestId}\n            className={cn(styles.component, className, !textStyle && size && styles[size], {\n                [styles.fullWidthScroll]: fullWidthScroll,\n            })}\n        >\n            {tablistTitles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (\n                <KeyboardFocusable key={restTitleProps.id}>\n                    {(ref, focused) => (\n                        <Title\n                            {...getTabListItemProps(index, ref)}\n                            {...restTitleProps}\n                            focused={focused}\n                            styles={styles}\n                            showSkeleton={showSkeleton}\n                            skeletonProps={skeletonProps}\n                        />\n                    )}\n                </KeyboardFocusable>\n            ))}\n\n            {collapsedOptions.length ? (\n                <span ref={addonRef} role='menu' className={styles.pickerWrapper}>\n                    <PickerButtonDesktop\n                        fieldClassName={styles.title}\n                        optionClassName={cn(size && styles[size])}\n                        options={collapsedOptions}\n                        onChange={handleOptionsChange}\n                        rightAddons={\n                            collapsedAddonsLength ? (\n                                <Badge view='count' content={collapsedAddonsLength} />\n                            ) : null\n                        }\n                        size='m'\n                        view='text'\n                        label='Ещё'\n                        popoverPosition='bottom-end'\n                        disabled={showSkeleton}\n                    />\n                </span>\n            ) : null}\n\n            <div className={styles.line} ref={lineRef} />\n        </div>\n    );\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(\n                styles.container,\n                textStyle && styles[textStyle],\n                styles.desktop,\n                containerClassName,\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAiBa,MAAA,yBAAyB,GAAG,CAAC,EACtC,IAAI,GAAG,GAAG,EACV,SAAS,EACT,kBAAkB,EAClB,MAAM,GAAG,EAAE,EACX,UAAU,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,EACrD,gBAAgB,EAChB,eAAe,EACf,QAAQ,EACR,UAAU,EACV,UAAU,EACV,MAAM,EACN,sBAAsB,EACtB,SAAS,EACT,YAAY,EACZ,aAAa,GACF,KAAI;AACf,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE5C,IAAA,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,mBAAmB,EAAE,GAC7E,gBAAgB,CAAC;QACb,MAAM;QACN,UAAU;QACV,gBAAgB;QAChB,QAAQ;QACR,UAAU;QACV,MAAM;QACN,sBAAsB;AACzB,KAAA,CAAC;IAEN,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,WAAW,IAAI,OAAO,CAAC,OAAO,EAAE;AAChC,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,WAAW,CAAC,WAAW,CAAA,EAAA,CAAI;AAC5D,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,WAAA,EAAc,WAAW,CAAC,UAAU,CAAA,GAAA,CAAK;AAC9E;AACL,KAAC,EAAE,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;IAEhC,MAAM,gBAAgB,GAAG,OAAO,CAC5B,MACI,aAAa,CAAC,MAAM,CAChB,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,KAAI;QACjC,IAAI,KAAK,CAAC,SAAS,EAAE;YACjB,OAAO,CAAC,IAAI,CAAC;AACT,gBAAA,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;gBACrB,KAAK,EAAE,KAAK,CAAC,EAAE;AACf,gBAAA,OAAO,GACH,KAAA,CAAA,aAAA,CAAC,KAAK,EACE,EAAA,GAAA,KAAK,EACT,GAAG,EAAE,SAAmC,EACxC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,GAChB,CACL;AACJ,aAAA,CAAC;AACL;AAED,QAAA,OAAO,OAAO;KACjB,EACD,EAAE,CACL,EACL,CAAC,aAAa,CAAC,CAClB;IAED,MAAM,qBAAqB,GAAG,aAAa,CAAC,MAAM,CAC9C,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,WAAW,CAClD,CAAC,MAAM;AAER,IAAA,MAAM,mBAAmB,GAAG,CACxB,OAAsE,KACtE;AACA,QAAA,IAAI,OAAO,CAAC,QAAQ,EAAE,KAAK,IAAI,QAAQ,EAAE;AACrC,YAAA,MAAM,gBAAgB,GAAG,IAAI,UAAU,CAAC,QAAQ,CAAC;AACjD,YAAA,MAAM,mBAAmB,GAAG,yBAAyB,CAAC,gBAAgB,CAAC;AAEvE,YAAA,QAAQ,CAAC,mBAAmB,EAAE,EAAE,UAAU,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;AACxE;AACL,KAAC;AAED,IAAA,MAAM,aAAa,GAAG,OAClB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,IAAI,EAAC,SAAS,EAAA,cAAA,EACA,UAAU,EACxB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC,SAAS,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE;AAC3E,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,eAAe;SAC5C,CAAC,EAAA;AAED,QAAA,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,cAAc,EAAE,EAAE,KAAK,MAC1E,oBAAC,iBAAiB,EAAA,EAAC,GAAG,EAAE,cAAc,CAAC,EAAE,EACpC,EAAA,CAAC,GAAG,EAAE,OAAO,MACV,KAAC,CAAA,aAAA,CAAA,KAAK,OACE,mBAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,EAC/B,GAAA,cAAc,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAAA,CAC9B,CACL,CACe,CACvB,CAAC;AAED,QAAA,gBAAgB,CAAC,MAAM,IACpB,8BAAM,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA;AAC5D,YAAA,KAAA,CAAA,aAAA,CAAC,mBAAmB,EAChB,EAAA,cAAc,EAAE,MAAM,CAAC,KAAK,EAC5B,eAAe,EAAE,EAAE,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,EACzC,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EACP,qBAAqB,IACjB,oBAAC,KAAK,EAAA,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,qBAAqB,GAAI,IACtD,IAAI,EAEZ,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,oBAAK,EACX,eAAe,EAAC,YAAY,EAC5B,QAAQ,EAAE,YAAY,EACxB,CAAA,CACC,IACP,IAAI;AAER,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAA,CAAI,CAC3C,CACT;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,EAC9B,MAAM,CAAC,OAAO,EACd,kBAAkB,CACrB,EAEA,EAAA,aAAa,EAAE,CACd;AAEd;;;;"}
+{"version":3,"file":"Component.collapsible.js","sources":["../../../src/components/primary-tablist/Component.collapsible.tsx"],"sourcesContent":["import React, { Ref, useEffect, useMemo, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';\nimport {\n    PickerButtonDesktop,\n    PickerButtonDesktopProps,\n} from '@alfalab/core-components-picker-button/desktop';\n\nimport { useTablistTitles } from '../../hooks/use-tablist-titles';\nimport { createSyntheticMouseEvent } from '../../synthetic-events';\nimport { TabListProps } from '../../typings';\nimport { Title } from '../title';\n\nimport styles from './index.module.css';\n\nexport const CollapsiblePrimaryTabList = ({\n    size = 'm',\n    className,\n    containerClassName,\n    titles = [],\n    selectedId = titles.length ? titles[0].id : undefined,\n    collapsedTabsIds,\n    fullWidthScroll,\n    onChange,\n    dataTestId,\n    breakpoint,\n    client,\n    defaultMatchMediaValue,\n    textStyle,\n    showSkeleton,\n    skeletonProps,\n}: TabListProps) => {\n    const lineRef = useRef<HTMLDivElement>(null);\n\n    const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } =\n        useTablistTitles({\n            titles,\n            selectedId,\n            collapsedTabsIds,\n            onChange,\n            breakpoint,\n            client,\n            defaultMatchMediaValue,\n        });\n\n    useEffect(() => {\n        if (selectedTab && lineRef.current) {\n            lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n            lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n        }\n    }, [selectedTab, tablistTitles]);\n\n    const collapsedOptions = useMemo(\n        () =>\n            tablistTitles.reduce<PickerButtonDesktopProps['options']>(\n                (options, { toggleRef, ...title }) => {\n                    if (title.collapsed) {\n                        options.push({\n                            key: String(title.id),\n                            value: title.id,\n                            content: (\n                                <Title\n                                    {...title}\n                                    ref={toggleRef as Ref<HTMLButtonElement>}\n                                    styles={styles}\n                                    isOption={true}\n                                />\n                            ),\n                        });\n                    }\n\n                    return options;\n                },\n                [],\n            ),\n        [tablistTitles],\n    );\n\n    const collapsedAddonsLength = tablistTitles.filter(\n        (title) => title.collapsed && title.rightAddons,\n    ).length;\n\n    const handleOptionsChange = (\n        payload: Parameters<Required<PickerButtonDesktopProps>['onChange']>[0],\n    ) => {\n        if (payload.selected?.value && onChange) {\n            const nativeMouseEvent = new MouseEvent('change');\n            const syntheticMouseEvent = createSyntheticMouseEvent(nativeMouseEvent);\n\n            onChange(syntheticMouseEvent, { selectedId: payload.selected.value });\n        }\n    };\n\n    const renderContent = () => (\n        <div\n            role='tablist'\n            data-test-id={dataTestId}\n            className={cn(styles.component, className, !textStyle && size && styles[size], {\n                [styles.fullWidthScroll]: fullWidthScroll,\n            })}\n        >\n            {tablistTitles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (\n                <KeyboardFocusable key={restTitleProps.id}>\n                    {(ref, focused) => (\n                        <Title\n                            {...getTabListItemProps(index, ref)}\n                            {...restTitleProps}\n                            focused={focused}\n                            styles={styles}\n                            showSkeleton={showSkeleton}\n                            skeletonProps={skeletonProps}\n                        />\n                    )}\n                </KeyboardFocusable>\n            ))}\n\n            {collapsedOptions.length ? (\n                <span ref={addonRef} role='menu' className={styles.pickerWrapper}>\n                    <PickerButtonDesktop\n                        fieldClassName={styles.title}\n                        optionClassName={cn(size && styles[size])}\n                        options={collapsedOptions}\n                        onChange={handleOptionsChange}\n                        rightAddons={\n                            collapsedAddonsLength ? (\n                                <Badge view='count' content={collapsedAddonsLength} />\n                            ) : null\n                        }\n                        size='m'\n                        view='text'\n                        label='Ещё'\n                        popoverPosition='bottom-end'\n                        disabled={showSkeleton}\n                    />\n                </span>\n            ) : null}\n\n            <div className={styles.line} ref={lineRef} />\n        </div>\n    );\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(\n                styles.container,\n                textStyle && styles[textStyle],\n                styles.desktop,\n                containerClassName,\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["styles"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import styles from './index.module.css.js';
+import commonStyles from './index.module.css.js';
 
-const PrimaryTabListDesktop = ({ size = 'm', ...restProps }) => (React.createElement(PrimaryTabList, { ...restProps, size: size, styles: styles, platform: 'desktop' }));
+const PrimaryTabListDesktop = ({ size = 'm', ...restProps }) => (React.createElement(PrimaryTabList, { ...restProps, size: size, styles: commonStyles, platform: 'desktop' }));
 
 export { PrimaryTabListDesktop };
 //# sourceMappingURL=Component.desktop.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Component.desktop.js","sources":["../../../src/components/primary-tablist/Component.desktop.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TabListProps } from '../../typings';\n\nimport { PrimaryTabList } from './Component';\n\nimport styles from './index.module.css';\n\nexport const PrimaryTabListDesktop = ({ size = 'm', ...restProps }: TabListProps) => (\n    <PrimaryTabList {...restProps} size={size} styles={styles} platform='desktop' />\n);\n"],"names":[],"mappings":";;;;AAQO,MAAM,qBAAqB,GAAG,CAAC,EAAE,IAAI,GAAG,GAAG,EAAE,GAAG,SAAS,EAAgB,MAC5E,KAAC,CAAA,aAAA,CAAA,cAAc,OAAK,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAC,SAAS,EAAA,CAAG;;;;"}
+{"version":3,"file":"Component.desktop.js","sources":["../../../src/components/primary-tablist/Component.desktop.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TabListProps } from '../../typings';\n\nimport { PrimaryTabList } from './Component';\n\nimport styles from './index.module.css';\n\nexport const PrimaryTabListDesktop = ({ size = 'm', ...restProps }: TabListProps) => (\n    <PrimaryTabList {...restProps} size={size} styles={styles} platform='desktop' />\n);\n"],"names":["styles"],"mappings":";;;;AAQO,MAAM,qBAAqB,GAAG,CAAC,EAAE,IAAI,GAAG,GAAG,EAAE,GAAG,SAAS,EAAgB,MAC5E,KAAC,CAAA,aAAA,CAAA,cAAc,OAAK,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAEA,YAAM,EAAE,QAAQ,EAAC,SAAS,EAAA,CAAG;;;;"}

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import styles$1 from './index.module.css.js';
+import commonStyles from './index.module.css.js';
 import mobileStyles from './mobile.module.css.js';
 
 const styles = {
-    ...styles$1,
+    ...commonStyles,
     ...mobileStyles,
 };
 const PrimaryTabListMobile = (props) => (React.createElement(PrimaryTabList, { ...props, styles: styles, platform: 'mobile' }));

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

@@ -1 +1 @@
-{"version":3,"file":"Component.mobile.js","sources":["../../../src/components/primary-tablist/Component.mobile.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TabListProps } from '../../typings';\n\nimport { PrimaryTabList } from './Component';\n\nimport commonStyles from './index.module.css';\nimport mobileStyles from './mobile.module.css';\n\nconst styles = {\n    ...commonStyles,\n    ...mobileStyles,\n};\n\nexport type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;\n\nexport const PrimaryTabListMobile = (props: PrimaryTabListMobileProps) => (\n    <PrimaryTabList {...props} styles={styles} platform='mobile' />\n);\n"],"names":["commonStyles"],"mappings":";;;;;AASA,MAAM,MAAM,GAAG;AACX,IAAA,GAAGA,QAAY;AACf,IAAA,GAAG,YAAY;CAClB;AAIY,MAAA,oBAAoB,GAAG,CAAC,KAAgC,MACjE,KAAC,CAAA,aAAA,CAAA,cAAc,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAC,QAAQ,EAAG,CAAA;;;;"}
+{"version":3,"file":"Component.mobile.js","sources":["../../../src/components/primary-tablist/Component.mobile.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TabListProps } from '../../typings';\n\nimport { PrimaryTabList } from './Component';\n\nimport commonStyles from './index.module.css';\nimport mobileStyles from './mobile.module.css';\n\nconst styles = {\n    ...commonStyles,\n    ...mobileStyles,\n};\n\nexport type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;\n\nexport const PrimaryTabListMobile = (props: PrimaryTabListMobileProps) => (\n    <PrimaryTabList {...props} styles={styles} platform='mobile' />\n);\n"],"names":[],"mappings":";;;;;AASA,MAAM,MAAM,GAAG;AACX,IAAA,GAAG,YAAY;AACf,IAAA,GAAG,YAAY;CAClB;AAIY,MAAA,oBAAoB,GAAG,CAAC,KAAgC,MACjE,KAAC,CAAA,aAAA,CAAA,cAAc,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAC,QAAQ,EAAG,CAAA;;;;"}