@redneckz/wildless-cms-uni-blocks 0.7.5 → 0.7.6

package/mobile/src/components/Tabs/Tabs.tsx

@@ -2,9 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import type { TabData, TabsContent } from './TabsContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderTab } from './renderTab';
-import type { TabData, TabsContent } from './TabsContent';
+import { ScrollableTabs } from './ScrollableTabs';
 
 export interface TabActivationEvent {
   type?: TabData['type'];
@@ -14,7 +15,7 @@ export interface TabActivationEvent {
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { className = '', tabs, showCounter, isSticky, ...rest } = props;
+  const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
@@ -25,6 +26,8 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
         if (event.type === 'link' && tab) {
           setCurrentTab(tab);
         }
+
+        return [];
       }),
     [tabs],
   );
@@ -46,11 +49,30 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
 
   return (
     <BlockWrapper
-      className={`${isSticky ? 'sticky top-1 z-20 ' : ''}box-border flex gap-x-1 ${className}`}
+      className={`relative box-border flex gap-x-1 w-full ${
+        isSticky ? 'sticky top-1 z-20 ' : ''
+      } ${className}`}
       role="tablist"
       {...rest}
     >
-      {tabs?.map(renderTab({ onClick: handleClick, currentTab, showCounter, ...rest }))}
+      {tabsMode === 'scrollable' ? (
+        <ScrollableTabs
+          tabs={tabs}
+          onClick={handleClick}
+          currentTab={currentTab}
+          showCounter={showCounter}
+          {...rest}
+        />
+      ) : (
+        tabs?.map(
+          renderTab({
+            onClick: handleClick,
+            currentTab,
+            showCounter,
+            ...rest,
+          }),
+        )
+      )}
     </BlockWrapper>
   );
 });

package/mobile/src/components/Tabs/TabsContent.ts

@@ -27,6 +27,14 @@ export type LinkTabData = LinkProps & {
  */
 export type TabData = GroupTabData | LinkTabData;
 
+/**
+ * @enumNames [
+ *   "По ширине экрана",
+ *   "С прокруткой"
+ * ]
+ */
+export type TabsMode = 'wideScreen' | 'scrollable';
+
 /**
  * @title Вкладки
  */
@@ -37,4 +45,9 @@ export interface TabsContent {
   isSticky?: boolean;
   /** @title Показывать счетчик блоков во вкладках */
   showCounter?: boolean;
+  /**
+   * @title Режим вкладок
+   * @default "wideScreen"
+   */
+  tabsMode?: TabsMode;
 }

package/mobile/src/components/Tabs/renderGroupTab.tsx

@@ -1,13 +1,12 @@
+import type { GroupTabData } from './TabsContent';
 import type { RenderTabProps } from './renderTab';
 import {
-  ACTIVE_LINK_CLASSES,
   ACTIVE_TEXT_CLASSES,
-  INACTIVE_LINK_CLASSES,
   INACTIVE_TEXT_CLASSES,
-  LINK_CLASSES,
   TEXT_CLASSES,
+  WHITE_ACTIVE_TEXT_CLASSES,
+  getGroupTabClassName,
 } from './tabItemClasses';
-import type { GroupTabData } from './TabsContent';
 
 const BADGE_CLASSES =
   'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
@@ -16,7 +15,7 @@ const INACTIVE_BADGE_CLASSES =
   'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
 
 export const renderGroupTab =
-  ({ page, currentTab, showCounter, onClick }: RenderTabProps) =>
+  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
   (tab: GroupTabData, i: number) => {
     const active = currentTab === tab;
 
@@ -27,28 +26,39 @@ export const renderGroupTab =
 
     return (
       <div
-        key={String(i)}
-        className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
+        key={`group-${String(i)}`}
+        className={getGroupTabClassName('div', active, isScrollable)}
         role="tab"
         aria-selected={active}
         onClick={() => onClick(tab)}
       >
-        <div className="flex flex-1 items-center justify-center">
-          {tab?.title ? renderTitle(tab.title, active) : null}
-          {showCounter && count ? renderCount(count, active) : null}
+        <div
+          className={`flex flex-1 items-center justify-center ${getGroupTabClassName(
+            'text',
+            active,
+            isScrollable,
+          )}`}
+        >
+          {renderTitle(tab.title, active, isScrollable)}
+          {renderCount(showCounter, count, active)}
         </div>
       </div>
     );
   };
 
-const renderTitle = (title: string, active: boolean) => (
-  <h3 className={`${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`}>
-    {title}
-  </h3>
-);
+const renderTitle = (title: string | undefined, active: boolean, isScrollable: boolean) => {
+  const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
+  const titleClassName = isScrollable
+    ? `${TEXT_CLASSES} ${activeClassName}`
+    : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
+
+  return title ? <h3 className={titleClassName}>{title}</h3> : null;
+};
 
-const renderCount = (count: number, active: boolean) => (
-  <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
-    {count}
-  </div>
-);
+const renderCount = (showCounter: boolean | undefined, count: number, active: boolean) => {
+  return showCounter && count ? (
+    <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
+      {count}
+    </div>
+  ) : null;
+};

package/mobile/src/components/Tabs/renderTab.tsx

@@ -9,12 +9,11 @@ export interface RenderTabProps {
   currentTab?: TabData;
   showCounter?: boolean;
   onClick: (tab: TabData) => void;
+  isScrollable?: boolean;
 }
 
 export const renderTab =
-  ({ page, currentTab, showCounter, onClick }: RenderTabProps) =>
-  // Linter doesn't understand that switch processes all cases
-  // eslint-disable-next-line consistent-return
+  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
   (tab: TabData, i: number) => {
     const type = tab.type;
 
@@ -24,11 +23,15 @@ export const renderTab =
 
     switch (type) {
       case 'group':
-        return renderGroupTab({ page, currentTab, showCounter, onClick })(tab, i);
+        return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
       case 'link': {
-        return <LinkTab key={String(i)} tab={tab} currentTab={currentTab} />;
+        return (
+          <LinkTab key={String(i)} tab={tab} currentTab={currentTab} isScrollable={isScrollable} />
+        );
       }
       default:
         assertUnreachable(type);
     }
+
+    return null;
   };

package/mobile/src/components/Tabs/tabItemClasses.ts

@@ -2,6 +2,70 @@ export const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor
 export const ACTIVE_LINK_CLASSES = 'bg-primary-main';
 export const INACTIVE_LINK_CLASSES = 'group/btn bg-white';
 
-export const TEXT_CLASSES = 'font-sans text-m';
+export const SCROLLABLE_ACTIVE_LINK_CLASSES = 'bg-white text-primary-main';
+export const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
+
+export const TEXT_CLASSES = 'font-sans text-m text-center';
 export const ACTIVE_TEXT_CLASSES = 'text-white';
 export const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
+
+export const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
+
+const GROUP_TAB_CLASSES = {
+  div: {
+    scrollable: {
+      active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+      default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+    },
+    default: {
+      active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+      default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
+    },
+  },
+  text: {
+    scrollable: {
+      active: `h-full border-0 border-b-2`,
+      default: ``,
+    },
+    default: {
+      active: '',
+      default: '',
+    },
+  },
+};
+const LINK_TAB_CLASSES = {
+  link: {
+    scrollable: {
+      active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+      default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+    },
+    default: {
+      active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
+      default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+    },
+  },
+  text: {
+    scrollable: {
+      active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
+      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+    },
+    default: {
+      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
+      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+    },
+  },
+};
+
+export const getGroupTabClassName = (type: string, active: boolean, isScrollable: boolean) => {
+  const styleType = isScrollable ? 'scrollable' : 'default';
+  const styleActive = active ? 'active' : 'default';
+
+  return GROUP_TAB_CLASSES[type][styleType][styleActive];
+};
+
+export const getLinkTabClassName = (type: string, active: boolean, isScrollable: boolean) => {
+  const styleType = isScrollable ? 'scrollable' : 'default';
+  const styleActive = active ? 'active' : 'default';
+
+  return LINK_TAB_CLASSES[type][styleType][styleActive];
+};

package/mobile/src/setup-fixture.ts

@@ -27,6 +27,5 @@ useRouter.setup(() => {
 
 handlerDecorator.setup((handler, targetContent): any => (ev) => {
   ev.preventDefault();
-  console.log(ev.target, ev, targetContent);
   handler(ev);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Tabs/LinkTab.tsx

@@ -1,22 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import {
-  ACTIVE_LINK_CLASSES,
-  ACTIVE_TEXT_CLASSES,
-  INACTIVE_LINK_CLASSES,
-  INACTIVE_TEXT_CLASSES,
-  LINK_CLASSES,
-  TEXT_CLASSES,
-} from './tabItemClasses';
+import { getLinkTabClassName } from './tabItemClasses';
 import type { LinkTabData, TabData } from './TabsContent';
 
 interface LinkTabProps {
   tab: LinkTabData;
   currentTab?: TabData;
+  isScrollable?: boolean;
 }
 
 export const LinkTab = JSX<LinkTabProps>((props) => {
-  const { tab, currentTab } = props;
+  const { tab, currentTab, isScrollable = false } = props;
   const active = currentTab?.type === 'link' && currentTab.href === tab.href;
 
   const link = useLink();
@@ -25,14 +19,12 @@ export const LinkTab = JSX<LinkTabProps>((props) => {
   return (
     <a
       role="tab"
-      className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
+      className={getLinkTabClassName('link', active, isScrollable)}
       target={tab.target}
       href={adjustedProps.href}
       onClick={adjustedProps.onClick}
     >
-      <span className={`${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`}>
-        {tab.text}
-      </span>
+      <span className={getLinkTabClassName('text', active, isScrollable)}>{tab.text}</span>
     </a>
   );
 });

package/src/components/Tabs/ScrollableTabs.tsx

@@ -0,0 +1,55 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { RenderTabProps } from './renderTab';
+import type { TabData } from './TabsContent';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
+import { renderTab } from './renderTab';
+
+interface ScrollableTabsProps extends RenderTabProps {
+  tabs?: TabData[];
+}
+
+export type IsScrollButtonsShown = boolean[];
+
+const scrollButtonStyle = 'absolute z-50 top-0';
+
+export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
+  const { tabs, onClick, currentTab, page, showCounter } = props;
+
+  const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
+    itemCount: tabs?.length || 0,
+    isCyclic: false,
+  });
+
+  return (
+    <div className="relative max-w-full m-auto">
+      <div className={`font-sans max-w-full w-full overflow-hidden relative bg-white`}>
+        <SwipeListContainer
+          containerRef={containerRef}
+          snapAlign="snap-start"
+          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+        >
+          {tabs?.map(
+            renderTab({
+              onClick,
+              currentTab,
+              showCounter,
+              page,
+              isScrollable: true,
+            }),
+          )}
+        </SwipeListContainer>
+      </div>
+      {scroll.canScrollLeft ? (
+        <ScrollLeftButton className={`${scrollButtonStyle} left-6`} onClick={scroll.scrollLeft} />
+      ) : null}
+      {scroll.canScrollRight ? (
+        <ScrollRightButton
+          className={`${scrollButtonStyle} rotate-180 right-6`}
+          onClick={scroll.scrollRight}
+        />
+      ) : null}
+    </div>
+  );
+});

package/src/components/Tabs/Tabs.fixture.tsx

@@ -10,8 +10,30 @@ export default {
           { type: 'group', ref: 'tab1', title: 'Вкладка 1' },
           { type: 'group', ref: 'tab2', title: 'Вкладка 2' },
           { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
+          { type: 'group', ref: 'tab3', title: 'Вкладка 4' },
         ]}
       />
     </div>
   ),
+  scrollable: (
+    <div className="container grid grid-cols-12">
+      <Tabs
+        className="col-span-12"
+        tabs={[
+          { type: 'group', ref: 'tab1', title: 'Вкладка 1' },
+          { type: 'group', ref: 'tab2', title: 'Вкладка 2' },
+          { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
+          { type: 'link', href: 'https://yandex.com', text: 'Вкладка 4' },
+          { type: 'link', href: 'https://ya.com', text: 'Вкладка 5' },
+          { type: 'link', href: 'https://habr.com', text: 'Вкладка за номером 6' },
+          { type: 'link', href: 'https://kremlin.com', text: 'Вкладка 7' },
+          { type: 'link', href: 'https://gov.com', text: 'Вкладка 8' },
+          { type: 'group', ref: 'tab3', title: 'Вкладка 9' },
+          { type: 'link', href: 'https://vc.com', text: 'Вкладка номер 10' },
+          { type: 'link', href: 'https://ria.com', text: 'Вкладка номер 11' },
+        ]}
+        tabsMode="scrollable"
+      />
+    </div>
+  ),
 };

package/src/components/Tabs/Tabs.tsx

@@ -2,9 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import type { TabData, TabsContent } from './TabsContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderTab } from './renderTab';
-import type { TabData, TabsContent } from './TabsContent';
+import { ScrollableTabs } from './ScrollableTabs';
 
 export interface TabActivationEvent {
   type?: TabData['type'];
@@ -14,7 +15,7 @@ export interface TabActivationEvent {
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { className = '', tabs, showCounter, isSticky, ...rest } = props;
+  const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
@@ -25,6 +26,8 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
         if (event.type === 'link' && tab) {
           setCurrentTab(tab);
         }
+
+        return [];
       }),
     [tabs],
   );
@@ -46,11 +49,30 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
 
   return (
     <BlockWrapper
-      className={`${isSticky ? 'sticky top-1 z-20 ' : ''}box-border flex gap-x-1 ${className}`}
+      className={`relative box-border flex gap-x-1 w-full ${
+        isSticky ? 'sticky top-1 z-20 ' : ''
+      } ${className}`}
       role="tablist"
       {...rest}
     >
-      {tabs?.map(renderTab({ onClick: handleClick, currentTab, showCounter, ...rest }))}
+      {tabsMode === 'scrollable' ? (
+        <ScrollableTabs
+          tabs={tabs}
+          onClick={handleClick}
+          currentTab={currentTab}
+          showCounter={showCounter}
+          {...rest}
+        />
+      ) : (
+        tabs?.map(
+          renderTab({
+            onClick: handleClick,
+            currentTab,
+            showCounter,
+            ...rest,
+          }),
+        )
+      )}
     </BlockWrapper>
   );
 });

package/src/components/Tabs/TabsContent.ts

@@ -27,6 +27,14 @@ export type LinkTabData = LinkProps & {
  */
 export type TabData = GroupTabData | LinkTabData;
 
+/**
+ * @enumNames [
+ *   "По ширине экрана",
+ *   "С прокруткой"
+ * ]
+ */
+export type TabsMode = 'wideScreen' | 'scrollable';
+
 /**
  * @title Вкладки
  */
@@ -37,4 +45,9 @@ export interface TabsContent {
   isSticky?: boolean;
   /** @title Показывать счетчик блоков во вкладках */
   showCounter?: boolean;
+  /**
+   * @title Режим вкладок
+   * @default "wideScreen"
+   */
+  tabsMode?: TabsMode;
 }

package/src/components/Tabs/renderGroupTab.tsx

@@ -1,13 +1,12 @@
+import type { GroupTabData } from './TabsContent';
 import type { RenderTabProps } from './renderTab';
 import {
-  ACTIVE_LINK_CLASSES,
   ACTIVE_TEXT_CLASSES,
-  INACTIVE_LINK_CLASSES,
   INACTIVE_TEXT_CLASSES,
-  LINK_CLASSES,
   TEXT_CLASSES,
+  WHITE_ACTIVE_TEXT_CLASSES,
+  getGroupTabClassName,
 } from './tabItemClasses';
-import type { GroupTabData } from './TabsContent';
 
 const BADGE_CLASSES =
   'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
@@ -16,7 +15,7 @@ const INACTIVE_BADGE_CLASSES =
   'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
 
 export const renderGroupTab =
-  ({ page, currentTab, showCounter, onClick }: RenderTabProps) =>
+  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
   (tab: GroupTabData, i: number) => {
     const active = currentTab === tab;
 
@@ -27,28 +26,39 @@ export const renderGroupTab =
 
     return (
       <div
-        key={String(i)}
-        className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
+        key={`group-${String(i)}`}
+        className={getGroupTabClassName('div', active, isScrollable)}
         role="tab"
         aria-selected={active}
         onClick={() => onClick(tab)}
       >
-        <div className="flex flex-1 items-center justify-center">
-          {tab?.title ? renderTitle(tab.title, active) : null}
-          {showCounter && count ? renderCount(count, active) : null}
+        <div
+          className={`flex flex-1 items-center justify-center ${getGroupTabClassName(
+            'text',
+            active,
+            isScrollable,
+          )}`}
+        >
+          {renderTitle(tab.title, active, isScrollable)}
+          {renderCount(showCounter, count, active)}
         </div>
       </div>
     );
   };
 
-const renderTitle = (title: string, active: boolean) => (
-  <h3 className={`${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`}>
-    {title}
-  </h3>
-);
+const renderTitle = (title: string | undefined, active: boolean, isScrollable: boolean) => {
+  const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
+  const titleClassName = isScrollable
+    ? `${TEXT_CLASSES} ${activeClassName}`
+    : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
+
+  return title ? <h3 className={titleClassName}>{title}</h3> : null;
+};
 
-const renderCount = (count: number, active: boolean) => (
-  <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
-    {count}
-  </div>
-);
+const renderCount = (showCounter: boolean | undefined, count: number, active: boolean) => {
+  return showCounter && count ? (
+    <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
+      {count}
+    </div>
+  ) : null;
+};

package/src/components/Tabs/renderTab.tsx

@@ -9,12 +9,11 @@ export interface RenderTabProps {
   currentTab?: TabData;
   showCounter?: boolean;
   onClick: (tab: TabData) => void;
+  isScrollable?: boolean;
 }
 
 export const renderTab =
-  ({ page, currentTab, showCounter, onClick }: RenderTabProps) =>
-  // Linter doesn't understand that switch processes all cases
-  // eslint-disable-next-line consistent-return
+  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
   (tab: TabData, i: number) => {
     const type = tab.type;
 
@@ -24,11 +23,15 @@ export const renderTab =
 
     switch (type) {
       case 'group':
-        return renderGroupTab({ page, currentTab, showCounter, onClick })(tab, i);
+        return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
       case 'link': {
-        return <LinkTab key={String(i)} tab={tab} currentTab={currentTab} />;
+        return (
+          <LinkTab key={String(i)} tab={tab} currentTab={currentTab} isScrollable={isScrollable} />
+        );
       }
       default:
         assertUnreachable(type);
     }
+
+    return null;
   };