@redneckz/wildless-cms-uni-blocks 0.14.293 → 0.14.295

package/src/components/TabsLayout/TabsLayout.fixture.tsx

@@ -2,49 +2,80 @@ import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOpti
 import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { TabsLayout } from './TabsLayout';
-import example from './TabsLayout.example.json';
+import { type Tab } from './TabsLayoutContent';
 
 const options: BlockRendererOptions = {
   blocksRegistry: Blocks,
 };
 
+const TABS: Tab[] = [
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Первый таб',
+    selected: false,
+  },
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Второй таб',
+    selected: false,
+  },
+];
+
+const TEXT_BLOCK_DESCRIPTION = {
+  type: 'TextBlock',
+  content: {
+    title: 'Текстовый блок',
+    description: 'Описание',
+  },
+  style: ['col-span-12'],
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
-        tabs={example.content.tabs}
+        tabs={TABS}
+        tabsType="animated"
+        options={options}
+        block={{
+          slots: {
+            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
+          },
+        }}
+      />
+    </div>
+  ),
+  wide: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TABS}
+        tabsType="default"
+        options={options}
+        block={{
+          slots: {
+            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
+          },
+        }}
+      />
+    </div>
+  ),
+  scrollable: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TABS}
+        tabsType="underlined"
         options={options}
         block={{
           slots: {
-            'Первый таб': [
-              {
-                type: 'TextBlock',
-                content: {
-                  title: 'Текстовый блок',
-                  description: 'Описание',
-                },
-                style: ['col-span-12'],
-              },
-              {
-                type: 'TextBlock',
-                content: {
-                  title: 'Текстовый блок',
-                  description: 'Описание',
-                },
-                style: ['col-span-12'],
-              },
-            ],
-            'Второй таб': [
-              {
-                type: 'TextBlock',
-                content: {
-                  title: 'Текстовый блок',
-                  description: 'Описание',
-                },
-                style: ['col-span-12'],
-              },
-            ],
+            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
           },
         }}
       />

package/src/components/TabsLayout/TabsLayout.tsx

@@ -1,66 +1,78 @@
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
-import { type Align } from '../../model/Align';
+import { useRouter } from '../../hooks/useRouter';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
-import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import { type TabItemBase } from '../../ui-kit/TabsControl/TabItem';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
-import { CarouselScrollButtons } from '../Carousel/CarouselScrollButtons';
-import { alignTabStyle } from './alignTabStyle';
-import { TabsLayoutButton } from './TabsLayoutButton';
+import { renderTabsLayout } from './renderTabsLayout';
 import { type Tab, type TabsLayoutContent } from './TabsLayoutContent';
-import { TabsLayoutRedirectSection } from './TabsLayoutRedirectSection';
+
+const TAB_QUERY_PARAM_KEY = 'tab';
 
 export interface TabsLayoutProps extends TabsLayoutContent, UniBlockProps {}
 
 export const TabsLayout = UniBlock<TabsLayoutProps>(
-  ({ className = '', tabs = [], block, tabAlign, ...rest }) => {
+  ({ className = '', tabs = [], block, tabsType, ...rest }) => {
+    const router = useRouter();
+
+    const { isReady } = router;
+
     const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
 
+    const defaultSelectedTab = tabs.findIndex((_) => Boolean(_.selected));
+
+    useEffect(() => {
+      const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
+        ? tabs.findIndex(
+            (_, index) => _.type === 'group' && String(index) === router.query[TAB_QUERY_PARAM_KEY],
+          )
+        : defaultSelectedTab;
+
+      setActiveTabIndex(defaultTabIndex === -1 ? 0 : defaultTabIndex);
+    }, [isReady, defaultSelectedTab]);
+
     const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
 
-    const itemCount = tabs.length;
+    const updateUrlSearchTabParam = (_: TabItemBase, index: number) => {
+      const searchParams = new URLSearchParams(router.query as Record<string, string>);
+      if (_.text) {
+        searchParams.set(TAB_QUERY_PARAM_KEY, String(index));
+      } else {
+        searchParams.delete(TAB_QUERY_PARAM_KEY);
+      }
+      router.replace(`${router.pathname}?${searchParams}`, '', { scroll: false });
+    };
 
-    const [activeSlideIndex, { inc: incActiveSlideIndex, dec: decActiveSlideIndex }] =
-      useCarouselControls({ itemCount }, activeTabIndex);
+    const handleChange = useCallback(
+      (_: TabItemBase) => {
+        const index = tabs.indexOf(_ as Tab);
+        const tab = tabs[index];
 
-    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({ itemCount });
+        setActiveTabIndex(index);
+
+        if (tab.type === 'group') {
+          updateUrlSearchTabParam(_, index);
+        }
+      },
+      [tabs],
+    );
 
     return (
       <BlockWrapper className={style(className)} defaultPadding="p-0" {...rest}>
-        <div className="relative border-b-8 border-primary-main">
-          <SwipeListContainer
-            itemClassName="flex"
-            containerRef={containerRef}
-            snapAlign="snap-end"
-            gap={8}
-            onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
-          >
-            {tabs.map(renderTabButton(activeTabIndex, setActiveTabIndex, tabAlign))}
-          </SwipeListContainer>
-          <CarouselScrollButtons
-            scroll={scroll}
-            arrowsPadded={true}
-            onScrollLeft={decActiveSlideIndex}
-            onScrollRight={incActiveSlideIndex}
-            activeIndex={activeSlideIndex}
-            itemCount={itemCount}
-          />
-        </div>
+        {renderTabsLayout({
+          items: tabs,
+          value: tabs[activeTabIndex],
+          tabsType,
+          onChange: handleChange,
+        })}
         <div className="space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs">
-          {tabs[activeTabIndex]?.href ? (
-            <TabsLayoutRedirectSection tab={tabs[activeTabIndex]} />
-          ) : (
-            renderBlocksList(block?.slots?.[slotName], {
-              ...rest?.options,
-              key: `${slotName}-${block?.type}`,
-              slotName,
-              parent: block,
-            })
-          )}
+          {renderBlocksList(block?.slots?.[slotName], {
+            ...rest?.options,
+            slotName,
+            parent: block,
+          })}
         </div>
       </BlockWrapper>
     );
@@ -71,20 +83,7 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
   },
 );
 
-const getSlotName = (tab: Tab, index: number): string => tab?.title || `Слот №${index}`;
+const getSlotName = (tab: Tab, index: number): string => tab?.text || `Слот №${index}`;
 
 const getInitSelectedIndex = (tabs: Tab[]) =>
   tabs.reduce((selectedIndex, tab, i) => (tab.selected ? i : selectedIndex), 0);
-
-const renderTabButton =
-  (activeTabIndex: number, onClick: (i: number) => void, tabAlign: Align = 'start') =>
-  (tab: Tab, i: number) =>
-    (
-      <TabsLayoutButton
-        key={String(i)}
-        className={alignTabStyle[tabAlign]}
-        tab={tab}
-        isActive={activeTabIndex === i}
-        onClick={() => onClick(i)}
-      />
-    );

package/src/components/TabsLayout/TabsLayoutContent.ts

@@ -1,28 +1,56 @@
-import { type Align } from '../../model/Align';
 import { type AspectsProps } from '../../model/AspectsProps';
-import { type DescriptionProps, type TitleProps } from '../../model/HeadlineType';
-import { type LinkCommonProps } from '../../model/LinkProps';
+import { type DescriptionProps } from '../../model/HeadlineType';
+import { type LinkProps } from '../../model/LinkProps';
 import { type IconProps } from '../../model/Picture';
+import { type TabsType } from '../../ui-kit/TabsControl/TabsControlProps';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
 /**
  * @title Таб
  */
-export type Tab = TitleProps &
-  DescriptionProps &
+export type TabBase = DescriptionProps &
   IconProps &
-  LinkCommonProps &
+  LinkProps &
   AspectsProps & {
     /** @title Вкладка выбрана по-умолчанию */
     selected?: boolean;
   };
 
+/**
+ * @title Группа
+ */
+export type GroupTab = TabBase & {
+  /** @default group */
+  type: 'group';
+};
+
+/**
+ * @title Ссылка
+ */
+export type LinkTab = TabBase &
+  LinkProps & {
+    /** @default link */
+    type: 'link';
+  };
+
+/**
+ * @title Таб
+ * @default {
+ *    "type": "group"
+ * }
+ */
+export type Tab = GroupTab | LinkTab;
+
 /**
  * @title Табы
  */
 export type TabsLayoutContent = UniBlockContent & {
-  /** @title Выравнивание табов */
-  tabAlign?: Align;
   /** @title Список табов */
   tabs?: Tab[];
+  /** @title Режим отображения */
+  tabsType?: TabsType;
+  /** @title Закрепить сверху */
+  isSticky?: boolean;
+  /** @title Показывать счетчик блоков во вкладках */
+  showCounter?: boolean;
 };

package/src/components/TabsLayout/renderTabsLayout.tsx

@@ -0,0 +1,32 @@
+import { ScrollableTabsControl } from '../../ui-kit/TabsControl/ScrollableTabsControl';
+import { type TabItemBase } from '../../ui-kit/TabsControl/TabItem';
+import { TabsControl } from '../../ui-kit/TabsControl/TabsControl';
+import { type TabsControlProps, type TabsType } from '../../ui-kit/TabsControl/TabsControlProps';
+
+interface RenderTabsProps {
+  items: TabItemBase[];
+  value: TabItemBase;
+  onChange: TabsControlProps['onChange'];
+  tabsType?: TabsType;
+}
+
+export const renderTabsLayout = ({ tabsType = 'animated', ...props }: RenderTabsProps) => {
+  switch (tabsType) {
+    case 'default':
+      return <TabsControl {...props} />;
+    case 'underlined':
+      return (
+        <div className="flex">
+          <TabsControl className="m-auto" tabsType="underlined" {...props} />
+        </div>
+      );
+    case 'animated':
+      return (
+        <div className="border-b-8 border-primary-main">
+          <ScrollableTabsControl className="m-auto" {...props} tabsType="animated" />
+        </div>
+      );
+    default:
+      return null;
+  }
+};

package/src/ui-kit/Calculator/CalculatorLayout.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type TitleProps } from '../../model/HeadlineType';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { BlockWrapper } from '../BlockWrapper';
+import { Heading } from '../Heading/Heading';
+
+export interface CalculatorLayoutProps extends UniBlockProps, TitleProps {}
+
+export const CalculatorLayout = JSX<CalculatorLayoutProps>(
+  ({ className, title, children, ...rest }) => (
+    <BlockWrapper className={style('space-y-xl', className)} defaultPadding="p-4xl" {...rest}>
+      {title ? <Heading className="text-center" title={title} /> : null}
+      {children}
+    </BlockWrapper>
+  ),
+);

package/src/{components → ui-kit}/Calculator/CalculatorValueBlock.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { Text } from '../Text/Text';
 
 const calculatorValueBlockStyle = 'flex justify-between @xl:flex-col';
 

package/src/{components → ui-kit}/Calculator/Rate.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Text } from '../../ui-kit/Text/Text';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { Text } from '../Text/Text';
 
 export interface RateProps {
   rate: number | undefined;

package/{mobile/src/components → src/ui-kit}/Calculator/renderFootnote.tsx

@@ -1,4 +1,4 @@
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Paragraph } from '../Paragraph/Paragraph';
 
 export const renderFootnote = (text?: string) =>
   text ? (

package/src/{components → ui-kit}/Calculator/renderRate.tsx

@@ -1,6 +1,6 @@
+import { UnknownRate, type UnknownRateProps } from '../../components/Calculator/UnknownRate';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { Rate, type RateProps } from './Rate';
-import { UnknownRate, type UnknownRateProps } from './UnknownRate';
 
 interface RenderRateProps extends RateProps, UnknownRateProps {
   isUnknownRateShown?: boolean;

package/src/{components → ui-kit}/Calculator/renderWantedSumInput.tsx

@@ -1,6 +1,6 @@
-import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { type InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { InputRange } from '../InputRange/InputRange';
+import { type InputRangeProps } from '../InputRange/InputRangeProps';
 
 const DEFAULT_MONEY_STEP = 1000;
 

package/src/ui-kit/TabsControl/ScrollableTabsControl.tsx

@@ -6,32 +6,55 @@ import { useSwipeListScroll } from '../SwipeListControl/useSwipeListScroll';
 import { renderTab } from './renderTab';
 import { type TabsControlProps } from './TabsControlProps';
 
-const scrollButtonStyle = 'hidden sm:flex absolute z-40 top-0';
+const scrollButtonStyle = 'hidden sm:flex absolute z-40';
+
+const scrollStyleType = {
+  animated: {
+    itemClassName: 'flex',
+    gap: 8,
+    buttonTop: 'top-5',
+  },
+  underlined: {
+    itemClassName: '',
+    gap: 0,
+    buttonTop: 'top-0',
+  },
+};
 
 export const ScrollableTabsControl = JSX<TabsControlProps>(
-  ({ className, items = [], value, onChange, tabsType }) => {
+  ({ className, items = [], value, onChange, tabsType = 'default' }) => {
     const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
       itemCount: items?.length || 0,
     });
 
     return (
-      <div className={style('relative overflow-x-auto no-scrollbar', className)} role="tablist">
+      <div className={style('relative overflow-x-auto no-scrollbar', className)}>
         <SwipeListContainer
           containerRef={containerRef}
           snapAlign="snap-start"
           onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+          itemClassName={scrollStyleType[tabsType].itemClassName}
+          gap={scrollStyleType[tabsType].gap}
         >
           {items.map(renderTab(value, onChange, tabsType))}
         </SwipeListContainer>
         {scroll.canScrollLeft ? (
           <ScrollLeftButton
-            className={style('left-6', scrollButtonStyle)}
+            className={style(
+              'left-6',
+              scrollButtonStyle,
+              scrollStyleType[tabsType].buttonTop as string,
+            )}
             onClick={scroll.scrollLeft}
           />
         ) : null}
         {scroll.canScrollRight ? (
           <ScrollRightButton
-            className={style('right-6', scrollButtonStyle)}
+            className={style(
+              'right-6',
+              scrollButtonStyle,
+              scrollStyleType[tabsType].buttonTop as string,
+            )}
             onClick={scroll.scrollRight}
           />
         ) : null}

package/src/ui-kit/TabsControl/TabItem.tsx

@@ -1,21 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
+import { type DescriptionProps, type TitleProps } from '../../model/HeadlineType';
 import { type LinkProps } from '../../model/LinkProps';
+import { type IconProps } from '../../model/Picture';
 import { type VNode } from '../../model/VNode';
 import { TabItemInner } from './TabItemInner';
-import { type TabsControlProps } from './TabsControlProps';
-export interface TabItemBase extends LinkProps {
+import { type TabsControlProps, type TabsType } from './TabsControlProps';
+export interface TabItemBase extends LinkProps, TitleProps, DescriptionProps, IconProps {
   name?: string;
   appendRight?: VNode;
 }
 
-export type TabType = 'default' | 'underlined' | 'rounded';
-
 export interface TabItemProps {
   item?: TabItemBase;
   isActive?: boolean;
-  type?: TabType;
+  type?: TabsType;
   onClick?: TabsControlProps['onChange'];
 }
 

package/src/ui-kit/TabsControl/TabItemInner.tsx

@@ -1,32 +1,33 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
-import { Text } from '../Text/Text';
-import { type TabItemProps, type TabType } from './TabItem';
+import { renderTabItemInner } from './renderTabItemInner';
+import { type TabItemProps } from './TabItem';
+import { type TabsType } from './TabsControlProps';
 
-const tabPaddingStyleMap: Record<TabType, string> = {
+const tabPaddingStyleMap: Record<TabsType, string> = {
   default: 'px-xs',
   underlined: 'px-m',
-  rounded: 'px-lg rounded-md',
+  animated: 'px-m border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs',
 };
 
 const tabTextStyle = 'text-secondary-text hover:text-primary-main';
 
-const activeTabTextStyleMap: Record<TabType, string> = {
+const activeTabTextStyleMap: Record<TabsType, string> = {
   default: 'text-black sm:text-white',
   underlined: 'text-primary-main border-b-2',
-  rounded: 'text-white',
+  animated: 'text-white sm:text-white',
 };
 
-const tabBgStyleMap: Record<TabType, string> = {
+const tabBgStyleMap: Record<TabsType, string> = {
   default: 'bg-white',
   underlined: 'bg-white',
-  rounded: 'bg-transparent',
+  animated: 'p-1 ease-in duration-300 bg-white text-primary-text h-[70px] w-96',
 };
 
-const activeTabBgStyleMap: Record<TabType, string> = {
+const activeTabBgStyleMap: Record<TabsType, string> = {
   default: 'sm:bg-primary-main',
   underlined: 'bg-white',
-  rounded: 'bg-primary-main',
+  animated: 'p-2 border-none bg-primary-main text-white h-20 w-96',
 };
 
 interface TabItemInnerProps extends TabItemProps {
@@ -34,10 +35,10 @@ interface TabItemInnerProps extends TabItemProps {
 }
 
 export const TabItemInner = JSX<TabItemInnerProps>(
-  ({ tag = 'div', item = {}, isActive, type = 'default', onClick }) => {
+  ({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
     const Tag: any = tag;
 
-    const { text, appendRight, ...link } = item;
+    const { text, description, icon, appendRight, ...link } = item;
 
     return (
       <Tag
@@ -48,8 +49,7 @@ export const TabItemInner = JSX<TabItemInnerProps>(
           tabPaddingStyleMap[type],
           isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type],
         )}
-        role="tab"
-        aria-selected={isActive}
+        role="tablist"
         onClick={onClick}
         {...link}
       >
@@ -61,7 +61,13 @@ export const TabItemInner = JSX<TabItemInnerProps>(
             isActive ? activeTabTextStyleMap[type] : tabTextStyle,
           )}
         >
-          <Text size="text-m">{text}</Text>
+          {renderTabItemInner({
+            text,
+            description,
+            icon,
+            isActive,
+            type,
+          })}
           {appendRight ? <div className="ml-xs">{appendRight}</div> : null}
         </div>
       </Tag>

package/src/ui-kit/TabsControl/TabsControl.fixture.tsx

@@ -7,10 +7,9 @@ import { type TabItemBase } from './TabItem';
 import { TabsControl } from './TabsControl';
 
 const FOUR_TABS: TabItemBase[] = [
-  { text: 'Вкладка 1', href: '#test' },
-  { text: 'Вкладка 2' },
-  { text: 'Вкладка 3' },
-  { text: 'Вкладка 4' },
+  { text: 'Вкладка 1', href: '#test', title: 'Вкладка 1', description: 'Описание вкладки' },
+  { text: 'Вкладка 2', href: '#test', title: 'Вкладка 2', description: 'Описание вкладки' },
+  { text: 'Вкладка 3', href: '#test', title: 'Вкладка 3', description: 'Описание вкладки' },
 ];
 
 const NINE_TABS: TabItemBase[] = [
@@ -22,18 +21,6 @@ const NINE_TABS: TabItemBase[] = [
   { text: 'Вкладка 9' },
 ];
 
-const YEARS: TabItemBase[] = [
-  { text: '2021' },
-  { text: '2020' },
-  { text: '2019' },
-  { text: '2018' },
-  { text: '2017' },
-  { text: '2016' },
-  { text: '2015' },
-  { text: '2014' },
-  { text: '2013' },
-];
-
 const Container: FC = ({ children }) => (
   <div className="container grid grid-cols-12">{children}</div>
 );
@@ -66,7 +53,7 @@ const ComponentWithScrollableTabs = ({ tabs }: { tabs: TabItemBase[] }) => {
   );
 };
 
-const ComponentWithRoundedTabs = ({ tabs }: { tabs: TabItemBase[] }) => {
+const ComponentWithNewTab = ({ tabs }: { tabs: TabItemBase[] }) => {
   const [activeTab, setActiveTab] = useState<TabItemBase | undefined>(tabs[0]);
 
   return (
@@ -74,7 +61,7 @@ const ComponentWithRoundedTabs = ({ tabs }: { tabs: TabItemBase[] }) => {
       <div className="flex">
         <TabsControl
           className="m-auto p-2xs rounded-md bg-main-gray"
-          tabsType="rounded"
+          tabsType="animated"
           items={tabs}
           value={activeTab}
           onChange={setActiveTab}
@@ -95,9 +82,9 @@ export default {
       <ComponentWithScrollableTabs tabs={NINE_TABS} />
     </Container>
   ),
-  rounded: (
+  animated: (
     <Container>
-      <ComponentWithRoundedTabs tabs={YEARS} />
+      <ComponentWithNewTab tabs={FOUR_TABS} />
     </Container>
   ),
 };

package/src/ui-kit/TabsControl/TabsControl.tsx

@@ -5,7 +5,10 @@ import { type TabsControlProps } from './TabsControlProps';
 
 export const TabsControl = JSX<TabsControlProps>(
   ({ className, tabsType = 'default', items = [], value, onChange }) => (
-    <div className={style('flex gap-x-2xs overflow-x-auto no-scrollbar', className)} role="tablist">
+    <div
+      className={style('flex gap-x-2xs overflow-x-auto no-scrollbar', className)}
+      role="tabpanel"
+    >
       {items.map(renderTab(value, onChange, tabsType))}
     </div>
   ),