@alfalab/core-components-tabs 8.8.6 → 8.9.0

package/modern/components/tab/Component.js

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

package/modern/components/tab/index.css

@@ -1,8 +1,8 @@
-/* hash: wwjpq */
-.tabs__component_1qfyb {
+/* hash: ibbij */
+.tabs__component_8x2uw {
     outline: none;
 }
 
-.tabs__hidden_1qfyb {
+.tabs__hidden_8x2uw {
     display: none;
 }

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

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

@@ -1,8 +1,11 @@
 /// <reference types="react" />
 import React from 'react';
+import { SkeletonProps } from '@alfalab/core-components/skeleton';
 import { Styles, TabListTitle } from "../../typings";
 declare const Title: React.ForwardRefExoticComponent<TabListTitle & Styles & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "title" | "id"> & {
     focused?: boolean | undefined;
     isOption?: boolean | undefined;
+    showSkeleton?: boolean | undefined;
+    skeletonProps?: Omit<SkeletonProps, "visible"> | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { Title };

package/modern/components/title/Component.js

@@ -1,15 +1,22 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
+import { Skeleton } from '@alfalab/core-components/skeleton';
 
-const Title = forwardRef(({ id, toggleClassName, title, styles = {}, rightAddons = null, hidden = false, selected = false, disabled = false, collapsed = false, focused = false, isOption = false, ...restProps }, ref) => hidden ? null : (React.createElement("button", { ...restProps, ref: ref, disabled: disabled, type: 'button', id: String(id), className: cn(styles.title, {
-        [styles.selected]: selected,
-        [styles.disabled]: disabled,
-        [styles.collapsed]: collapsed && !isOption,
-        [styles.option]: isOption,
-    }, toggleClassName) },
-    React.createElement("span", { className: cn(styles.content, { [styles.focused]: focused }) }, title),
-    rightAddons && (React.createElement("span", { className: cn(styles.rightAddons, {
-            [styles.rightAddonsMarginZero]: !title,
-        }) }, rightAddons)))));
+const Title = forwardRef(({ id, toggleClassName, title, styles = {}, rightAddons = null, hidden = false, selected = false, disabled = false, collapsed = false, focused = false, isOption = false, showSkeleton = false, skeletonProps, ...restProps }, ref) => {
+    const titleClassName = {
+        [styles.content]: true,
+        [styles.focused]: focused,
+    };
+    return hidden ? null : (React.createElement("button", { ...restProps, ref: ref, disabled: disabled || showSkeleton, type: 'button', id: String(id), className: cn(styles.title, {
+            [styles.selected]: selected,
+            [styles.disabled]: disabled,
+            [styles.collapsed]: collapsed && !isOption,
+            [styles.option]: isOption,
+        }, toggleClassName) },
+        showSkeleton ? (React.createElement(Skeleton, { ...skeletonProps, className: cn(titleClassName, skeletonProps?.className), visible: true }, title)) : (React.createElement("span", { className: cn(titleClassName) }, title)),
+        rightAddons && (React.createElement("span", { className: cn(styles.rightAddons, {
+                [styles.rightAddonsMarginZero]: !title,
+            }) }, rightAddons))));
+});
 
 export { Title };

package/modern/index.module-c9fbdbe7.js

@@ -0,0 +1,4 @@
+const commonStyles = {"component":"tabs__component_1we1x","fullWidthScroll":"tabs__fullWidthScroll_1we1x","container":"tabs__container_1we1x","title":"tabs__title_1we1x","xxs":"tabs__xxs_1we1x","skeleton":"tabs__skeleton_1we1x","xs":"tabs__xs_1we1x","s":"tabs__s_1we1x","m":"tabs__m_1we1x","l":"tabs__l_1we1x","xl":"tabs__xl_1we1x"};
+require('./components/secondary-tablist/index.css')
+
+export { commonStyles as c };

package/modern/index.module-efcd5c38.js

@@ -0,0 +1,4 @@
+const styles = {"component":"tabs__component_1wtkw","desktop":"tabs__desktop_1wtkw","paragraph-primary-large":"tabs__paragraph-primary-large_1wtkw","title":"tabs__title_1wtkw","paragraph-primary-medium":"tabs__paragraph-primary-medium_1wtkw","paragraph-primary-small":"tabs__paragraph-primary-small_1wtkw","action-primary-large":"tabs__action-primary-large_1wtkw","action-primary-medium":"tabs__action-primary-medium_1wtkw","action-primary-small":"tabs__action-primary-small_1wtkw","accent-primary-large":"tabs__accent-primary-large_1wtkw","accent-primary-medium":"tabs__accent-primary-medium_1wtkw","accent-primary-small":"tabs__accent-primary-small_1wtkw","pickerWrapper":"tabs__pickerWrapper_1wtkw","option":"tabs__option_1wtkw","scrollControls":"tabs__scrollControls_1wtkw","headline-system-xlarge":"tabs__headline-system-xlarge_1wtkw","headline-system-large":"tabs__headline-system-large_1wtkw","headline-system-medium":"tabs__headline-system-medium_1wtkw","headline-system-small":"tabs__headline-system-small_1wtkw","headline-system-xsmall":"tabs__headline-system-xsmall_1wtkw","headline-xlarge":"tabs__headline-xlarge_1wtkw","headline-large":"tabs__headline-large_1wtkw","headline-medium":"tabs__headline-medium_1wtkw","headline-small":"tabs__headline-small_1wtkw","headline-xsmall":"tabs__headline-xsmall_1wtkw","fullWidthScroll":"tabs__fullWidthScroll_1wtkw","container":"tabs__container_1wtkw","focused":"tabs__focused_1wtkw","collapsed":"tabs__collapsed_1wtkw","selected":"tabs__selected_1wtkw","disabled":"tabs__disabled_1wtkw","line":"tabs__line_1wtkw","s":"tabs__s_1wtkw","xs":"tabs__xs_1wtkw","xxs":"tabs__xxs_1wtkw","m":"tabs__m_1wtkw","l":"tabs__l_1wtkw","xl":"tabs__xl_1wtkw","rightAddons":"tabs__rightAddons_1wtkw","rightAddonsMarginZero":"tabs__rightAddonsMarginZero_1wtkw"};
+require('./components/primary-tablist/index.css')
+
+export { styles as s };

package/modern/typings.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { FC, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
+import { SkeletonProps } from '@alfalab/core-components/skeleton';
 import { TagProps } from "@alfalab/core-components-tag";
 type SelectedId = string | number;
 type TabsProps = {
@@ -86,6 +87,14 @@ type TabsProps = {
      * Дополнительные инлайн стили для враппера
      */
     style?: React.CSSProperties;
+    /**
+     * Показать скелетон
+     */
+    showSkeleton?: boolean;
+    /**
+     * Доп. пропсы для скелетона
+     */
+    skeletonProps?: Omit<SkeletonProps, 'visible'>;
 };
 type TabProps = {
     /**
@@ -145,7 +154,7 @@ type TabListTitle = {
     dataTestId?: string;
     toggleRef?: Ref<HTMLDivElement>;
 };
-type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView' | 'textStyle'> & {
+type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView' | 'textStyle' | 'showSkeleton' | 'skeletonProps'> & {
     /**
      * Заголовки табов
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-tabs",
-    "version": "8.8.6",
+    "version": "8.9.0",
     "description": "Tabs components",
     "keywords": [],
     "license": "MIT",
@@ -16,12 +16,13 @@
     "dependencies": {
         "@alfalab/core-components-keyboard-focusable": "^4.1.0",
         "@alfalab/core-components-tag": "^8.2.1",
-        "@alfalab/core-components-picker-button": "^11.7.6",
+        "@alfalab/core-components-picker-button": "^11.7.7",
         "@alfalab/core-components-badge": "^5.5.2",
         "@alfalab/core-components-mq": "^4.2.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/core-components-shared": "^0.10.0",
-        "@alfalab/core-components-icon-button": "^6.6.1",
+        "@alfalab/core-components-icon-button": "^6.7.0",
+        "@alfalab/core-components-skeleton": "^5.0.0",
         "@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

@@ -28,6 +28,8 @@ export const CollapsiblePrimaryTabList = ({
     breakpoint = 1024,
     defaultMatchMediaValue,
     textStyle,
+    showSkeleton,
+    skeletonProps,
 }: TabListProps) => {
     const lineRef = useRef<HTMLDivElement>(null);
 
@@ -105,6 +107,8 @@ export const CollapsiblePrimaryTabList = ({
                             {...restTitleProps}
                             focused={focused}
                             styles={styles}
+                            showSkeleton={showSkeleton}
+                            skeletonProps={skeletonProps}
                         />
                     )}
                 </KeyboardFocusable>
@@ -126,6 +130,7 @@ export const CollapsiblePrimaryTabList = ({
                         view='text'
                         label='Ещё'
                         popoverPosition='bottom-end'
+                        disabled={showSkeleton}
                     />
                 </span>
             ) : null}

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

@@ -24,6 +24,8 @@ export const PrimaryTabList = ({
     platform,
     textStyle,
     inlineStyle,
+    showSkeleton,
+    skeletonProps,
 }: TabListProps & Styles & PlatformProps) => {
     const lineRef = useRef<HTMLDivElement>(null);
 
@@ -69,6 +71,8 @@ export const PrimaryTabList = ({
                             {...restTitleProps}
                             focused={focused}
                             styles={styles}
+                            showSkeleton={showSkeleton}
+                            skeletonProps={skeletonProps}
                         />
                     )}
                 </KeyboardFocusable>
@@ -91,6 +95,7 @@ export const PrimaryTabList = ({
             size={textStyle ? undefined : size}
             platform={platform}
             inlineStyle={inlineStyle}
+            showSkeleton={showSkeleton}
         >
             {renderContent()}
         </ScrollableContainer>

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

@@ -53,7 +53,7 @@
     user-select: none;
     outline: none;
 
-    &:not(.disabled):hover {
+    &:not(:disabled):hover {
         color: var(--primary-tablist-hover-color);
     }
 }

package/src/components/scroll-controls/Component.tsx

@@ -17,10 +17,11 @@ type ScrollControlsProps = {
     view: Exclude<TabsProps['view'], undefined>;
     size: TabsProps['size'];
     containerRef: RefObject<HTMLDivElement>;
+    showSkeleton?: boolean;
 };
 
 export const ScrollControls = forwardRef<HTMLDivElement, ScrollControlsProps>(
-    ({ containerRef, view, size: sizeProp, className }, ref) => {
+    ({ containerRef, view, size: sizeProp, className, showSkeleton }, ref) => {
         const container = containerRef.current;
         const [disabledState, updateDisabledState] = useState(() => getDisabledState(container));
 
@@ -70,13 +71,13 @@ export const ScrollControls = forwardRef<HTMLDivElement, ScrollControlsProps>(
                 <IconButton
                     {...commonButtonProps}
                     icon={ChevronLeftCompactSIcon}
-                    disabled={disabledState.toLeft}
+                    disabled={disabledState.toLeft || showSkeleton}
                     onClick={handleScrollLeft}
                 />
                 <IconButton
                     {...commonButtonProps}
                     icon={ChevronRightCompactSIcon}
-                    disabled={disabledState.toRight}
+                    disabled={disabledState.toRight || showSkeleton}
                     onClick={handleScrollRight}
                 />
             </div>

package/src/components/scrollable-container/Component.tsx

@@ -52,6 +52,11 @@ export type ScrollableContainerProps = {
      * Дополнительные инлайн стили для заголовка
      */
     inlineStyle?: React.CSSProperties;
+
+    /**
+     * Показать скелетон
+     */
+    showSkeleton?: boolean;
 };
 
 const isOverflown = (
@@ -74,6 +79,7 @@ export const ScrollableContainer = ({
     size,
     platform,
     inlineStyle,
+    showSkeleton,
 }: ScrollableContainerProps & Pick<TabsProps, 'fullWidthScroll'> & PlatformProps) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const controlsRef = useRef<HTMLDivElement>(null);
@@ -143,6 +149,7 @@ export const ScrollableContainer = ({
                     containerRef={containerRef}
                     view={view}
                     size={size}
+                    showSkeleton={showSkeleton}
                 />
             ) : null}
         </div>

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

@@ -1,10 +1,27 @@
 import React from 'react';
 import cn from 'classnames';
 
+import { Skeleton } from '@alfalab/core-components/skeleton';
+
 import { useTabs } from '../../hooks/use-tabs';
 import { PlatformProps, SecondaryTabListProps, Styles } from '../../typings';
 import { ScrollableContainer } from '../scrollable-container';
 
+function getBorderRadius(
+    shape?: SecondaryTabListProps['tagShape'],
+    size?: SecondaryTabListProps['size'],
+    isMobile?: boolean,
+) {
+    if (shape === 'rounded') {
+        return 99;
+    }
+
+    if (size === 'xxs') return isMobile ? 8 : 6;
+    if (size === 'xs' || size === 's') return isMobile ? 12 : 8;
+
+    return isMobile ? 16 : 4;
+}
+
 export const SecondaryTabList = ({
     styles = {},
     className,
@@ -22,6 +39,8 @@ export const SecondaryTabList = ({
     tagShape,
     tagView,
     inlineStyle,
+    showSkeleton,
+    skeletonProps,
 }: SecondaryTabListProps & Styles & PlatformProps) => {
     const { focusedTab, selectedTab, getTabListItemProps } = useTabs({
         titles,
@@ -43,7 +62,7 @@ export const SecondaryTabList = ({
                 {titles.map((item, index) => {
                     if (item.hidden) return null;
 
-                    return (
+                    const renderTab = () => (
                         <TagComponent
                             {...getTabListItemProps(index)}
                             shape={tagShape}
@@ -57,6 +76,27 @@ export const SecondaryTabList = ({
                             {item.title}
                         </TagComponent>
                     );
+
+                    return showSkeleton ? (
+                        <Skeleton
+                            {...skeletonProps}
+                            className={cn(styles.skeleton, skeletonProps?.className)}
+                            key={item.id}
+                            visible={true}
+                            style={{
+                                ...skeletonProps?.style,
+                                borderRadius: getBorderRadius(
+                                    tagShape,
+                                    tagSize as SecondaryTabListProps['size'],
+                                    platform === 'mobile',
+                                ),
+                            }}
+                        >
+                            {renderTab()}
+                        </Skeleton>
+                    ) : (
+                        renderTab()
+                    );
                 })}
             </div>
         );
@@ -71,6 +111,7 @@ export const SecondaryTabList = ({
             size={size}
             platform={platform}
             inlineStyle={inlineStyle}
+            showSkeleton={showSkeleton}
         >
             {renderContent()}
         </ScrollableContainer>

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

@@ -24,26 +24,44 @@
 
 /* sizes */
 
-.xxs .title + .title {
-    margin-left: var(--secondary-tablist-xxs-gaps);
+.xxs {
+    & .title + .title,
+    & .skeleton + .skeleton {
+        margin-left: var(--secondary-tablist-xxs-gaps);
+    }
 }
 
-.xs .title + .title {
-    margin-left: var(--secondary-tablist-xs-gaps);
+.xs {
+    & .title + .title,
+    & .skeleton + .skeleton {
+        margin-left: var(--secondary-tablist-xs-gaps);
+    }
 }
 
-.s .title + .title {
-    margin-left: var(--secondary-tablist-s-gaps);
+.s {
+    & .title + .title,
+    & .skeleton + .skeleton {
+        margin-left: var(--secondary-tablist-s-gaps);
+    }
 }
 
-.m .title + .title {
-    margin-left: var(--secondary-tablist-m-gaps);
+.m {
+    & .title + .title,
+    & .skeleton + .skeleton {
+        margin-left: var(--secondary-tablist-m-gaps);
+    }
 }
 
-.l .title + .title {
-    margin-left: var(--secondary-tablist-l-gaps);
+.l {
+    & .title + .title,
+    & .skeleton + .skeleton {
+        margin-left: var(--secondary-tablist-l-gaps);
+    }
 }
 
-.xl .title + .title {
-    margin-left: var(--secondary-tablist-xl-gaps);
+.xl {
+    & .title + .title,
+    & .skeleton + .skeleton {
+        margin-left: var(--secondary-tablist-xl-gaps);
+    }
 }

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

@@ -5,7 +5,8 @@
 }
 
 .mobile {
-    & .title + .title {
+    & .title + .title,
+    & .skeleton + .skeleton {
         margin-left: var(--secondary-tablist-mobile-gaps);
     }
 }

package/src/components/tabs/Component.tsx

@@ -19,6 +19,8 @@ export const Tabs = ({
     breakpoint = 1024,
     tagShape,
     tagView,
+    showSkeleton = false,
+    skeletonProps,
     textStyle,
     style,
 }: Omit<TabsProps, 'view'>) => {
@@ -69,6 +71,8 @@ export const Tabs = ({
                 tagView={tagView}
                 textStyle={textStyle}
                 inlineStyle={style}
+                showSkeleton={showSkeleton}
+                skeletonProps={skeletonProps}
             />
 
             {tabs.map((tab) => cloneElement(tab, { hidden: tab.props.id !== selectedId }))}

package/src/components/title/Component.tsx

@@ -1,6 +1,8 @@
 import React, { ButtonHTMLAttributes, forwardRef } from 'react';
 import cn from 'classnames';
 
+import { Skeleton, SkeletonProps } from '@alfalab/core-components/skeleton';
+
 import { Styles, TabListTitle } from '../../typings';
 
 type Props = TabListTitle &
@@ -8,6 +10,8 @@ type Props = TabListTitle &
     Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'title'> & {
         focused?: boolean;
         isOption?: boolean;
+        showSkeleton?: boolean;
+        skeletonProps?: Omit<SkeletonProps, 'visible'>;
     };
 
 export const Title = forwardRef<HTMLButtonElement, Props>(
@@ -24,15 +28,22 @@ export const Title = forwardRef<HTMLButtonElement, Props>(
             collapsed = false,
             focused = false,
             isOption = false,
+            showSkeleton = false,
+            skeletonProps,
             ...restProps
         },
         ref,
-    ) =>
-        hidden ? null : (
+    ) => {
+        const titleClassName = {
+            [styles.content]: true,
+            [styles.focused]: focused,
+        };
+
+        return hidden ? null : (
             <button
                 {...restProps}
                 ref={ref}
-                disabled={disabled}
+                disabled={disabled || showSkeleton}
                 type='button'
                 id={String(id)}
                 className={cn(
@@ -46,7 +57,17 @@ export const Title = forwardRef<HTMLButtonElement, Props>(
                     toggleClassName,
                 )}
             >
-                <span className={cn(styles.content, { [styles.focused]: focused })}>{title}</span>
+                {showSkeleton ? (
+                    <Skeleton
+                        {...skeletonProps}
+                        className={cn(titleClassName, skeletonProps?.className)}
+                        visible={true}
+                    >
+                        {title}
+                    </Skeleton>
+                ) : (
+                    <span className={cn(titleClassName)}>{title}</span>
+                )}
 
                 {rightAddons && (
                     <span
@@ -58,5 +79,6 @@ export const Title = forwardRef<HTMLButtonElement, Props>(
                     </span>
                 )}
             </button>
-        ),
+        );
+    },
 );

package/src/typings.ts

@@ -1,5 +1,6 @@
 import { FC, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
 
+import { SkeletonProps } from '@alfalab/core-components/skeleton';
 import { TagProps } from '@alfalab/core-components-tag';
 
 export type SelectedId = string | number;
@@ -124,6 +125,16 @@ export type TabsProps = {
      * Дополнительные инлайн стили для враппера
      */
     style?: React.CSSProperties;
+
+    /**
+     * Показать скелетон
+     */
+    showSkeleton?: boolean;
+
+    /**
+     * Доп. пропсы для скелетона
+     */
+    skeletonProps?: Omit<SkeletonProps, 'visible'>;
 };
 
 export type TabProps = {
@@ -211,6 +222,8 @@ export type TabListProps = Pick<
     | 'tagShape'
     | 'tagView'
     | 'textStyle'
+    | 'showSkeleton'
+    | 'skeletonProps'
 > & {
     /**
      * Заголовки табов

package/typings.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { FC, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
+import { SkeletonProps } from '@alfalab/core-components/skeleton';
 import { TagProps } from "@alfalab/core-components-tag";
 type SelectedId = string | number;
 type TabsProps = {
@@ -86,6 +87,14 @@ type TabsProps = {
      * Дополнительные инлайн стили для враппера
      */
     style?: React.CSSProperties;
+    /**
+     * Показать скелетон
+     */
+    showSkeleton?: boolean;
+    /**
+     * Доп. пропсы для скелетона
+     */
+    skeletonProps?: Omit<SkeletonProps, 'visible'>;
 };
 type TabProps = {
     /**
@@ -145,7 +154,7 @@ type TabListTitle = {
     dataTestId?: string;
     toggleRef?: Ref<HTMLDivElement>;
 };
-type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView' | 'textStyle'> & {
+type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView' | 'textStyle' | 'showSkeleton' | 'skeletonProps'> & {
     /**
      * Заголовки табов
      */

package/esm/index.module-02dfb393.js

@@ -1,4 +0,0 @@
-var commonStyles = {"component":"tabs__component_uw8qo","fullWidthScroll":"tabs__fullWidthScroll_uw8qo","container":"tabs__container_uw8qo","title":"tabs__title_uw8qo","xxs":"tabs__xxs_uw8qo","xs":"tabs__xs_uw8qo","s":"tabs__s_uw8qo","m":"tabs__m_uw8qo","l":"tabs__l_uw8qo","xl":"tabs__xl_uw8qo"};
-require('./components/secondary-tablist/index.css')
-
-export { commonStyles as c };

package/esm/index.module-19d5207b.js

@@ -1,4 +0,0 @@
-var styles = {"component":"tabs__component_fapg6","desktop":"tabs__desktop_fapg6","paragraph-primary-large":"tabs__paragraph-primary-large_fapg6","title":"tabs__title_fapg6","paragraph-primary-medium":"tabs__paragraph-primary-medium_fapg6","paragraph-primary-small":"tabs__paragraph-primary-small_fapg6","action-primary-large":"tabs__action-primary-large_fapg6","action-primary-medium":"tabs__action-primary-medium_fapg6","action-primary-small":"tabs__action-primary-small_fapg6","accent-primary-large":"tabs__accent-primary-large_fapg6","accent-primary-medium":"tabs__accent-primary-medium_fapg6","accent-primary-small":"tabs__accent-primary-small_fapg6","pickerWrapper":"tabs__pickerWrapper_fapg6","option":"tabs__option_fapg6","scrollControls":"tabs__scrollControls_fapg6","headline-system-xlarge":"tabs__headline-system-xlarge_fapg6","headline-system-large":"tabs__headline-system-large_fapg6","headline-system-medium":"tabs__headline-system-medium_fapg6","headline-system-small":"tabs__headline-system-small_fapg6","headline-system-xsmall":"tabs__headline-system-xsmall_fapg6","headline-xlarge":"tabs__headline-xlarge_fapg6","headline-large":"tabs__headline-large_fapg6","headline-medium":"tabs__headline-medium_fapg6","headline-small":"tabs__headline-small_fapg6","headline-xsmall":"tabs__headline-xsmall_fapg6","fullWidthScroll":"tabs__fullWidthScroll_fapg6","container":"tabs__container_fapg6","disabled":"tabs__disabled_fapg6","focused":"tabs__focused_fapg6","collapsed":"tabs__collapsed_fapg6","selected":"tabs__selected_fapg6","line":"tabs__line_fapg6","s":"tabs__s_fapg6","xs":"tabs__xs_fapg6","xxs":"tabs__xxs_fapg6","m":"tabs__m_fapg6","l":"tabs__l_fapg6","xl":"tabs__xl_fapg6","rightAddons":"tabs__rightAddons_fapg6","rightAddonsMarginZero":"tabs__rightAddonsMarginZero_fapg6"};
-require('./components/primary-tablist/index.css')
-
-export { styles as s };

package/index.module-64e722f7.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var commonStyles = {"component":"tabs__component_uw8qo","fullWidthScroll":"tabs__fullWidthScroll_uw8qo","container":"tabs__container_uw8qo","title":"tabs__title_uw8qo","xxs":"tabs__xxs_uw8qo","xs":"tabs__xs_uw8qo","s":"tabs__s_uw8qo","m":"tabs__m_uw8qo","l":"tabs__l_uw8qo","xl":"tabs__xl_uw8qo"};
-require('./components/secondary-tablist/index.css')
-
-exports.commonStyles = commonStyles;

package/index.module-ef18a814.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {"component":"tabs__component_fapg6","desktop":"tabs__desktop_fapg6","paragraph-primary-large":"tabs__paragraph-primary-large_fapg6","title":"tabs__title_fapg6","paragraph-primary-medium":"tabs__paragraph-primary-medium_fapg6","paragraph-primary-small":"tabs__paragraph-primary-small_fapg6","action-primary-large":"tabs__action-primary-large_fapg6","action-primary-medium":"tabs__action-primary-medium_fapg6","action-primary-small":"tabs__action-primary-small_fapg6","accent-primary-large":"tabs__accent-primary-large_fapg6","accent-primary-medium":"tabs__accent-primary-medium_fapg6","accent-primary-small":"tabs__accent-primary-small_fapg6","pickerWrapper":"tabs__pickerWrapper_fapg6","option":"tabs__option_fapg6","scrollControls":"tabs__scrollControls_fapg6","headline-system-xlarge":"tabs__headline-system-xlarge_fapg6","headline-system-large":"tabs__headline-system-large_fapg6","headline-system-medium":"tabs__headline-system-medium_fapg6","headline-system-small":"tabs__headline-system-small_fapg6","headline-system-xsmall":"tabs__headline-system-xsmall_fapg6","headline-xlarge":"tabs__headline-xlarge_fapg6","headline-large":"tabs__headline-large_fapg6","headline-medium":"tabs__headline-medium_fapg6","headline-small":"tabs__headline-small_fapg6","headline-xsmall":"tabs__headline-xsmall_fapg6","fullWidthScroll":"tabs__fullWidthScroll_fapg6","container":"tabs__container_fapg6","disabled":"tabs__disabled_fapg6","focused":"tabs__focused_fapg6","collapsed":"tabs__collapsed_fapg6","selected":"tabs__selected_fapg6","line":"tabs__line_fapg6","s":"tabs__s_fapg6","xs":"tabs__xs_fapg6","xxs":"tabs__xxs_fapg6","m":"tabs__m_fapg6","l":"tabs__l_fapg6","xl":"tabs__xl_fapg6","rightAddons":"tabs__rightAddons_fapg6","rightAddonsMarginZero":"tabs__rightAddonsMarginZero_fapg6"};
-require('./components/primary-tablist/index.css')
-
-exports.styles = styles;

package/modern/index.module-4ff88bb9.js

@@ -1,4 +0,0 @@
-const commonStyles = {"component":"tabs__component_uw8qo","fullWidthScroll":"tabs__fullWidthScroll_uw8qo","container":"tabs__container_uw8qo","title":"tabs__title_uw8qo","xxs":"tabs__xxs_uw8qo","xs":"tabs__xs_uw8qo","s":"tabs__s_uw8qo","m":"tabs__m_uw8qo","l":"tabs__l_uw8qo","xl":"tabs__xl_uw8qo"};
-require('./components/secondary-tablist/index.css')
-
-export { commonStyles as c };

package/modern/index.module-e3f72734.js

@@ -1,4 +0,0 @@
-const styles = {"component":"tabs__component_fapg6","desktop":"tabs__desktop_fapg6","paragraph-primary-large":"tabs__paragraph-primary-large_fapg6","title":"tabs__title_fapg6","paragraph-primary-medium":"tabs__paragraph-primary-medium_fapg6","paragraph-primary-small":"tabs__paragraph-primary-small_fapg6","action-primary-large":"tabs__action-primary-large_fapg6","action-primary-medium":"tabs__action-primary-medium_fapg6","action-primary-small":"tabs__action-primary-small_fapg6","accent-primary-large":"tabs__accent-primary-large_fapg6","accent-primary-medium":"tabs__accent-primary-medium_fapg6","accent-primary-small":"tabs__accent-primary-small_fapg6","pickerWrapper":"tabs__pickerWrapper_fapg6","option":"tabs__option_fapg6","scrollControls":"tabs__scrollControls_fapg6","headline-system-xlarge":"tabs__headline-system-xlarge_fapg6","headline-system-large":"tabs__headline-system-large_fapg6","headline-system-medium":"tabs__headline-system-medium_fapg6","headline-system-small":"tabs__headline-system-small_fapg6","headline-system-xsmall":"tabs__headline-system-xsmall_fapg6","headline-xlarge":"tabs__headline-xlarge_fapg6","headline-large":"tabs__headline-large_fapg6","headline-medium":"tabs__headline-medium_fapg6","headline-small":"tabs__headline-small_fapg6","headline-xsmall":"tabs__headline-xsmall_fapg6","fullWidthScroll":"tabs__fullWidthScroll_fapg6","container":"tabs__container_fapg6","disabled":"tabs__disabled_fapg6","focused":"tabs__focused_fapg6","collapsed":"tabs__collapsed_fapg6","selected":"tabs__selected_fapg6","line":"tabs__line_fapg6","s":"tabs__s_fapg6","xs":"tabs__xs_fapg6","xxs":"tabs__xxs_fapg6","m":"tabs__m_fapg6","l":"tabs__l_fapg6","xl":"tabs__xl_fapg6","rightAddons":"tabs__rightAddons_fapg6","rightAddonsMarginZero":"tabs__rightAddonsMarginZero_fapg6"};
-require('./components/primary-tablist/index.css')
-
-export { styles as s };