@alfalab/core-components-tabs 8.6.8 → 8.7.1

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

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

package/modern/components/tabs/Component.js

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

package/modern/components/title/Component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { Styles, TabListTitle } from "../../typings";
-declare const Title: React.ForwardRefExoticComponent<TabListTitle & Styles & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id"> & {
+declare const Title: React.ForwardRefExoticComponent<TabListTitle & Styles & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "title" | "id"> & {
     focused?: boolean | undefined;
     isOption?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

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

@@ -6,7 +6,7 @@ declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds, breakpo
     tablistTitles: {
         collapsed: boolean;
         selected: boolean;
-        title: string;
+        title: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal;
         id: import("../typings").SelectedId;
         disabled?: boolean | undefined;
         rightAddons?: import("react").ReactNode;

package/modern/index.module-8121bd57.js

@@ -0,0 +1,4 @@
+const commonStyles = {"component":"tabs__component_1rzwq","fullWidthScroll":"tabs__fullWidthScroll_1rzwq","container":"tabs__container_1rzwq","title":"tabs__title_1rzwq","xxs":"tabs__xxs_1rzwq","xs":"tabs__xs_1rzwq","s":"tabs__s_1rzwq","m":"tabs__m_1rzwq","l":"tabs__l_1rzwq","xl":"tabs__xl_1rzwq"};
+require('./components/secondary-tablist/index.css')
+
+export { commonStyles as c };

package/modern/index.module-c6da7192.js

@@ -0,0 +1,4 @@
+const styles = {"component":"tabs__component_15a3z","desktop":"tabs__desktop_15a3z","paragraph-primary-large":"tabs__paragraph-primary-large_15a3z","title":"tabs__title_15a3z","paragraph-primary-medium":"tabs__paragraph-primary-medium_15a3z","paragraph-primary-small":"tabs__paragraph-primary-small_15a3z","action-primary-large":"tabs__action-primary-large_15a3z","action-primary-medium":"tabs__action-primary-medium_15a3z","action-primary-small":"tabs__action-primary-small_15a3z","accent-primary-large":"tabs__accent-primary-large_15a3z","accent-primary-medium":"tabs__accent-primary-medium_15a3z","accent-primary-small":"tabs__accent-primary-small_15a3z","pickerWrapper":"tabs__pickerWrapper_15a3z","option":"tabs__option_15a3z","scrollControls":"tabs__scrollControls_15a3z","headline-system-xlarge":"tabs__headline-system-xlarge_15a3z","headline-system-large":"tabs__headline-system-large_15a3z","headline-system-medium":"tabs__headline-system-medium_15a3z","headline-system-small":"tabs__headline-system-small_15a3z","headline-system-xsmall":"tabs__headline-system-xsmall_15a3z","headline-xlarge":"tabs__headline-xlarge_15a3z","headline-large":"tabs__headline-large_15a3z","headline-medium":"tabs__headline-medium_15a3z","headline-small":"tabs__headline-small_15a3z","headline-xsmall":"tabs__headline-xsmall_15a3z","fullWidthScroll":"tabs__fullWidthScroll_15a3z","container":"tabs__container_15a3z","disabled":"tabs__disabled_15a3z","focused":"tabs__focused_15a3z","collapsed":"tabs__collapsed_15a3z","selected":"tabs__selected_15a3z","line":"tabs__line_15a3z","s":"tabs__s_15a3z","xs":"tabs__xs_15a3z","xxs":"tabs__xxs_15a3z","m":"tabs__m_15a3z","l":"tabs__l_15a3z","xl":"tabs__xl_15a3z","rightAddons":"tabs__rightAddons_15a3z","rightAddonsMarginZero":"tabs__rightAddonsMarginZero_15a3z"};
+require('./components/primary-tablist/index.css')
+
+export { styles as s };

package/modern/typings.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FC, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
 import { TagProps } from "@alfalab/core-components-tag";
 type SelectedId = string | number;
@@ -81,6 +82,10 @@ type TabsProps = {
      * Стиль тега (для view secondary только)
      */
     tagView?: TagProps['view'];
+    /**
+     * Дополнительные инлайн стили для враппера
+     */
+    style?: React.CSSProperties;
 };
 type TabProps = {
     /**
@@ -90,7 +95,7 @@ type TabProps = {
     /**
      * Заголовок таба
      */
-    title: string;
+    title: NonNullable<ReactNode>;
     /**
      * Дополнительный класс для контейнера содержимого таба
      */
@@ -129,7 +134,7 @@ type TabProps = {
     toggleRef?: Ref<HTMLDivElement>;
 };
 type TabListTitle = {
-    title: string;
+    title: NonNullable<ReactNode>;
     id: SelectedId;
     disabled?: boolean;
     rightAddons?: ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-tabs",
-    "version": "8.6.8",
+    "version": "8.7.1",
     "description": "Tabs components",
     "keywords": [],
     "license": "MIT",
@@ -16,12 +16,12 @@
     "dependencies": {
         "@alfalab/core-components-keyboard-focusable": "^4.1.0",
         "@alfalab/core-components-tag": "^8.2.0",
-        "@alfalab/core-components-picker-button": "^11.6.5",
+        "@alfalab/core-components-picker-button": "^11.6.7",
         "@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.4",
+        "@alfalab/core-components-icon-button": "^6.5.6",
         "@alfalab/icons-glyph": "^2.139.0",
         "classnames": "^2.3.1",
         "compute-scroll-into-view": "^3.1.0",

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

@@ -54,7 +54,7 @@ export const CollapsiblePrimaryTabList = ({
                 (options, { toggleRef, ...title }) => {
                     if (title.collapsed) {
                         options.push({
-                            key: title.title,
+                            key: String(title.id),
                             value: title.id,
                             content: (
                                 <Title

package/src/components/tabs/Component.tsx

@@ -20,6 +20,7 @@ export const Tabs = ({
     tagShape,
     tagView,
     textStyle,
+    style,
 }: Omit<TabsProps, 'view'>) => {
     const tabsArray = React.Children.toArray(children) as TabsProps['children'];
     const titles = tabsArray.map(
@@ -51,7 +52,7 @@ export const Tabs = ({
     );
 
     return (
-        <div className={className}>
+        <div className={className} style={style}>
             <TabList
                 containerClassName={containerClassName}
                 size={size}

package/src/components/title/Component.tsx

@@ -5,7 +5,10 @@ import { Styles, TabListTitle } from '../../typings';
 
 type Props = TabListTitle &
     Styles &
-    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'id'> & { focused?: boolean; isOption?: boolean };
+    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'title'> & {
+        focused?: boolean;
+        isOption?: boolean;
+    };
 
 export const Title = forwardRef<HTMLButtonElement, Props>(
     (

package/src/typings.ts

@@ -119,6 +119,11 @@ export type TabsProps = {
      * Стиль тега (для view secondary только)
      */
     tagView?: TagProps['view'];
+
+    /**
+     * Дополнительные инлайн стили для враппера
+     */
+    style?: React.CSSProperties;
 };
 
 export type TabProps = {
@@ -130,7 +135,7 @@ export type TabProps = {
     /**
      * Заголовок таба
      */
-    title: string;
+    title: NonNullable<ReactNode>;
 
     /**
      * Дополнительный класс для контейнера содержимого таба
@@ -179,7 +184,7 @@ export type TabProps = {
 };
 
 export type TabListTitle = {
-    title: string;
+    title: NonNullable<ReactNode>;
     id: SelectedId;
     disabled?: boolean;
     rightAddons?: ReactNode;

package/typings.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FC, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
 import { TagProps } from "@alfalab/core-components-tag";
 type SelectedId = string | number;
@@ -81,6 +82,10 @@ type TabsProps = {
      * Стиль тега (для view secondary только)
      */
     tagView?: TagProps['view'];
+    /**
+     * Дополнительные инлайн стили для враппера
+     */
+    style?: React.CSSProperties;
 };
 type TabProps = {
     /**
@@ -90,7 +95,7 @@ type TabProps = {
     /**
      * Заголовок таба
      */
-    title: string;
+    title: NonNullable<ReactNode>;
     /**
      * Дополнительный класс для контейнера содержимого таба
      */
@@ -129,7 +134,7 @@ type TabProps = {
     toggleRef?: Ref<HTMLDivElement>;
 };
 type TabListTitle = {
-    title: string;
+    title: NonNullable<ReactNode>;
     id: SelectedId;
     disabled?: boolean;
     rightAddons?: ReactNode;

package/esm/index.module-72926b9d.js

@@ -1,4 +0,0 @@
-var commonStyles = {"component":"tabs__component_jh0rg","fullWidthScroll":"tabs__fullWidthScroll_jh0rg","container":"tabs__container_jh0rg","title":"tabs__title_jh0rg","xxs":"tabs__xxs_jh0rg","xs":"tabs__xs_jh0rg","s":"tabs__s_jh0rg","m":"tabs__m_jh0rg","l":"tabs__l_jh0rg","xl":"tabs__xl_jh0rg"};
-require('./components/secondary-tablist/index.css')
-
-export { commonStyles as c };

package/esm/index.module-98725e10.js

@@ -1,4 +0,0 @@
-var styles = {"component":"tabs__component_17jvt","desktop":"tabs__desktop_17jvt","paragraph-primary-large":"tabs__paragraph-primary-large_17jvt","title":"tabs__title_17jvt","paragraph-primary-medium":"tabs__paragraph-primary-medium_17jvt","paragraph-primary-small":"tabs__paragraph-primary-small_17jvt","action-primary-large":"tabs__action-primary-large_17jvt","action-primary-medium":"tabs__action-primary-medium_17jvt","action-primary-small":"tabs__action-primary-small_17jvt","accent-primary-large":"tabs__accent-primary-large_17jvt","accent-primary-medium":"tabs__accent-primary-medium_17jvt","accent-primary-small":"tabs__accent-primary-small_17jvt","pickerWrapper":"tabs__pickerWrapper_17jvt","option":"tabs__option_17jvt","scrollControls":"tabs__scrollControls_17jvt","headline-system-xlarge":"tabs__headline-system-xlarge_17jvt","headline-system-large":"tabs__headline-system-large_17jvt","headline-system-medium":"tabs__headline-system-medium_17jvt","headline-system-small":"tabs__headline-system-small_17jvt","headline-system-xsmall":"tabs__headline-system-xsmall_17jvt","headline-xlarge":"tabs__headline-xlarge_17jvt","headline-large":"tabs__headline-large_17jvt","headline-medium":"tabs__headline-medium_17jvt","headline-small":"tabs__headline-small_17jvt","headline-xsmall":"tabs__headline-xsmall_17jvt","fullWidthScroll":"tabs__fullWidthScroll_17jvt","container":"tabs__container_17jvt","disabled":"tabs__disabled_17jvt","focused":"tabs__focused_17jvt","collapsed":"tabs__collapsed_17jvt","selected":"tabs__selected_17jvt","line":"tabs__line_17jvt","s":"tabs__s_17jvt","xs":"tabs__xs_17jvt","xxs":"tabs__xxs_17jvt","m":"tabs__m_17jvt","l":"tabs__l_17jvt","xl":"tabs__xl_17jvt","rightAddons":"tabs__rightAddons_17jvt","rightAddonsMarginZero":"tabs__rightAddonsMarginZero_17jvt"};
-require('./components/primary-tablist/index.css')
-
-export { styles as s };

package/index.module-4fce9d75.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var commonStyles = {"component":"tabs__component_jh0rg","fullWidthScroll":"tabs__fullWidthScroll_jh0rg","container":"tabs__container_jh0rg","title":"tabs__title_jh0rg","xxs":"tabs__xxs_jh0rg","xs":"tabs__xs_jh0rg","s":"tabs__s_jh0rg","m":"tabs__m_jh0rg","l":"tabs__l_jh0rg","xl":"tabs__xl_jh0rg"};
-require('./components/secondary-tablist/index.css')
-
-exports.commonStyles = commonStyles;

package/index.module-5e20b70a.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {"component":"tabs__component_17jvt","desktop":"tabs__desktop_17jvt","paragraph-primary-large":"tabs__paragraph-primary-large_17jvt","title":"tabs__title_17jvt","paragraph-primary-medium":"tabs__paragraph-primary-medium_17jvt","paragraph-primary-small":"tabs__paragraph-primary-small_17jvt","action-primary-large":"tabs__action-primary-large_17jvt","action-primary-medium":"tabs__action-primary-medium_17jvt","action-primary-small":"tabs__action-primary-small_17jvt","accent-primary-large":"tabs__accent-primary-large_17jvt","accent-primary-medium":"tabs__accent-primary-medium_17jvt","accent-primary-small":"tabs__accent-primary-small_17jvt","pickerWrapper":"tabs__pickerWrapper_17jvt","option":"tabs__option_17jvt","scrollControls":"tabs__scrollControls_17jvt","headline-system-xlarge":"tabs__headline-system-xlarge_17jvt","headline-system-large":"tabs__headline-system-large_17jvt","headline-system-medium":"tabs__headline-system-medium_17jvt","headline-system-small":"tabs__headline-system-small_17jvt","headline-system-xsmall":"tabs__headline-system-xsmall_17jvt","headline-xlarge":"tabs__headline-xlarge_17jvt","headline-large":"tabs__headline-large_17jvt","headline-medium":"tabs__headline-medium_17jvt","headline-small":"tabs__headline-small_17jvt","headline-xsmall":"tabs__headline-xsmall_17jvt","fullWidthScroll":"tabs__fullWidthScroll_17jvt","container":"tabs__container_17jvt","disabled":"tabs__disabled_17jvt","focused":"tabs__focused_17jvt","collapsed":"tabs__collapsed_17jvt","selected":"tabs__selected_17jvt","line":"tabs__line_17jvt","s":"tabs__s_17jvt","xs":"tabs__xs_17jvt","xxs":"tabs__xxs_17jvt","m":"tabs__m_17jvt","l":"tabs__l_17jvt","xl":"tabs__xl_17jvt","rightAddons":"tabs__rightAddons_17jvt","rightAddonsMarginZero":"tabs__rightAddonsMarginZero_17jvt"};
-require('./components/primary-tablist/index.css')
-
-exports.styles = styles;

package/modern/index.module-322d9547.js

@@ -1,4 +0,0 @@
-const commonStyles = {"component":"tabs__component_jh0rg","fullWidthScroll":"tabs__fullWidthScroll_jh0rg","container":"tabs__container_jh0rg","title":"tabs__title_jh0rg","xxs":"tabs__xxs_jh0rg","xs":"tabs__xs_jh0rg","s":"tabs__s_jh0rg","m":"tabs__m_jh0rg","l":"tabs__l_jh0rg","xl":"tabs__xl_jh0rg"};
-require('./components/secondary-tablist/index.css')
-
-export { commonStyles as c };

package/modern/index.module-6c45f929.js

@@ -1,4 +0,0 @@
-const styles = {"component":"tabs__component_17jvt","desktop":"tabs__desktop_17jvt","paragraph-primary-large":"tabs__paragraph-primary-large_17jvt","title":"tabs__title_17jvt","paragraph-primary-medium":"tabs__paragraph-primary-medium_17jvt","paragraph-primary-small":"tabs__paragraph-primary-small_17jvt","action-primary-large":"tabs__action-primary-large_17jvt","action-primary-medium":"tabs__action-primary-medium_17jvt","action-primary-small":"tabs__action-primary-small_17jvt","accent-primary-large":"tabs__accent-primary-large_17jvt","accent-primary-medium":"tabs__accent-primary-medium_17jvt","accent-primary-small":"tabs__accent-primary-small_17jvt","pickerWrapper":"tabs__pickerWrapper_17jvt","option":"tabs__option_17jvt","scrollControls":"tabs__scrollControls_17jvt","headline-system-xlarge":"tabs__headline-system-xlarge_17jvt","headline-system-large":"tabs__headline-system-large_17jvt","headline-system-medium":"tabs__headline-system-medium_17jvt","headline-system-small":"tabs__headline-system-small_17jvt","headline-system-xsmall":"tabs__headline-system-xsmall_17jvt","headline-xlarge":"tabs__headline-xlarge_17jvt","headline-large":"tabs__headline-large_17jvt","headline-medium":"tabs__headline-medium_17jvt","headline-small":"tabs__headline-small_17jvt","headline-xsmall":"tabs__headline-xsmall_17jvt","fullWidthScroll":"tabs__fullWidthScroll_17jvt","container":"tabs__container_17jvt","disabled":"tabs__disabled_17jvt","focused":"tabs__focused_17jvt","collapsed":"tabs__collapsed_17jvt","selected":"tabs__selected_17jvt","line":"tabs__line_17jvt","s":"tabs__s_17jvt","xs":"tabs__xs_17jvt","xxs":"tabs__xxs_17jvt","m":"tabs__m_17jvt","l":"tabs__l_17jvt","xl":"tabs__xl_17jvt","rightAddons":"tabs__rightAddons_17jvt","rightAddonsMarginZero":"tabs__rightAddonsMarginZero_17jvt"};
-require('./components/primary-tablist/index.css')
-
-export { styles as s };