fix(tabs): fix tabs hidden (#816)

* fix(tabs): fix tabs hidden

* fix(tabs): add hidden to secondary tablist, update screenshots

Co-authored-by: Сидоров Александр Владимирович <ASidorov7@alfabank.ru>
Co-authored-by: reme3d2y <AYatsenko@alfabank.ru>

packages/tabs/src/components/primary-tablist/Component.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useRef } from 'react';
-import cn from 'classnames';
 import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';
-import { useTabs } from '../../useTabs';
+import cn from 'classnames';
+import { Styles, TabListProps } from '../../typings';
+
 import { ScrollableContainer } from '../scrollable-container';
-import { TabListProps, Styles } from '../../typings';
+import { useTabs } from '../../useTabs';
 
 export const PrimaryTabList = ({
     size,
@@ -33,27 +34,29 @@ export const PrimaryTabList = ({
 
     const renderContent = () => (
         <React.Fragment>
-            {titles.map((item, index) => (
-                <KeyboardFocusable key={item.id}>
-                    {(ref, focused) => (
-                        <button
-                            {...getTabListItemProps(index, ref)}
-                            type='button'
-                            className={cn(styles.title, {
-                                [styles.selected]: item.id === selectedId,
-                                [styles.disabled]: item.disabled,
-                            })}
-                        >
-                            <span className={focused ? styles.focused : undefined}>
-                                {item.title}
-                            </span>
-                            {item.rightAddons && (
-                                <span className={styles.rightAddons}>{item.rightAddons}</span>
-                            )}
-                        </button>
-                    )}
-                </KeyboardFocusable>
-            ))}
+            {titles
+                .filter(item => !item.hidden)
+                .map((item, index) => (
+                    <KeyboardFocusable key={item.id}>
+                        {(ref, focused) => (
+                            <button
+                                {...getTabListItemProps(index, ref)}
+                                type='button'
+                                className={cn(styles.title, {
+                                    [styles.selected]: item.id === selectedId,
+                                    [styles.disabled]: item.disabled,
+                                })}
+                            >
+                                <span className={focused ? styles.focused : undefined}>
+                                    {item.title}
+                                </span>
+                                {item.rightAddons && (
+                                    <span className={styles.rightAddons}>{item.rightAddons}</span>
+                                )}
+                            </button>
+                        )}
+                    </KeyboardFocusable>
+                ))}
 
             <div className={styles.line} ref={lineRef} />
         </React.Fragment>

packages/tabs/src/components/secondary-tablist/Component.tsx

@@ -24,18 +24,20 @@ export const SecondaryTabList = ({
     });
 
     const renderContent = () =>
-        titles.map((item, index) => (
-            <Tag
-                {...getTabListItemProps(index)}
-                key={item.id}
-                className={styles.title}
-                checked={item.id === selectedId}
-                size={tagSize}
-                rightAddons={item.rightAddons}
-            >
-                {item.title}
-            </Tag>
-        ));
+        titles
+            .filter(item => !item.hidden)
+            .map((item, index) => (
+                <Tag
+                    {...getTabListItemProps(index)}
+                    key={item.id}
+                    className={styles.title}
+                    checked={item.id === selectedId}
+                    size={tagSize}
+                    rightAddons={item.rightAddons}
+                >
+                    {item.title}
+                </Tag>
+            ));
 
     return (
         <div

packages/tabs/src/components/tabs/Component.tsx

@@ -1,4 +1,5 @@
 import React, { cloneElement } from 'react';
+
 import { TabsProps } from '../../typings';
 
 export const Tabs = ({
@@ -15,11 +16,12 @@ export const Tabs = ({
     onChange,
 }: Omit<TabsProps, 'view'>) => {
     const tabsArray = React.Children.toArray(children) as TabsProps['children'];
-    const titles = tabsArray.map(({ props: { title, id, rightAddons, disabled } }) => ({
+    const titles = tabsArray.map(({ props: { title, id, rightAddons, disabled, hidden } }) => ({
         title,
         id,
         disabled,
         rightAddons,
+        hidden,
     }));
     const tabs = tabsArray.filter(
         tab => tab.props.id === selectedId || tab.props.keepMounted || keepMounted,

packages/tabs/src/docs/Component.stories.mdx

@@ -53,7 +53,7 @@ import vars from '!!raw-loader!../vars.css';
                 <Tab title='Таб 2' id='tab-2' disabled>
                     Таб 2
                 </Tab>
-                <Tab title='Таб 3' id='tab-3'>
+                <Tab title='Таб 3 (hidden)' id='tab-3' hidden>
                     Таб 3
                 </Tab>
                 <Tab title='Таб 4' id='tab-4'>

packages/tabs/src/typings.ts

@@ -1,4 +1,5 @@
-import { ReactElement, ReactNode, FC } from 'react';
+import { FC, ReactElement, ReactNode } from 'react';
+
 import { TagProps } from '@alfalab/core-components-tag';
 
 export type SelectedId = string | number;
@@ -133,6 +134,7 @@ export type TabListProps = Pick<
         id: SelectedId;
         disabled?: boolean;
         rightAddons?: ReactNode;
+        hidden?: boolean;
     }>;
 };