@redneckz/wildless-cms-uni-blocks 0.13.24 → 0.14.0

package/mobile/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,7 +1,6 @@
 import type { EmptyOption } from '../../model/EmptyOptionType';
 import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent, UniBlockProps } from '../../model/JSXBlock';
-import type { ListOrientation } from '../../model/ListOrientation';
 import type { IconProps } from '../../model/Picture';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
@@ -119,8 +118,6 @@ export type TariffsTableContent = UniBlockContent &
     tariffsColumns?: TariffsTableColumn[];
     /** @title Параметры */
     rowHeaders?: TariffsTableRowHeader[];
-    /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
-    orientation?: ListOrientation;
     /** @title Скрывать строк */
     hiddenRowsNum?: number;
   };

package/mobile/src/components/TariffsTable/TariffsTableRenderCell.tsx

@@ -47,11 +47,7 @@ export const renderCellInner =
     };
 
     return (
-      <div
-        key={String(i)}
-        className={cell?.tableCellType === 'Table' ? 'ml-5xl' : `first:pt-lg last:pb-lg pl-5xl`}
-      >
-        {i > 0 ? <div className="h-5" /> : null}
+      <div key={String(i)}>
         {renderCell({
           cell,
           cellProps: {

package/mobile/src/components/TariffsTable/TariffsTableRow.tsx

@@ -4,10 +4,11 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { Img } from '../../ui-kit/Img/Img';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
-import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
+import { COLUMN_WIDTH, firstCellStyle } from './constants';
 import { TariffsTableCell } from './TariffsTableCell';
 import type { Data } from './TariffsTableContent';
 import { TariffsTableRowContainer } from './TariffsTableRowContainer';
+import { style } from '../../utils/style';
 
 export interface TariffsTableRowProps extends UniBlockProps {
   row: Data;
@@ -35,10 +36,15 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
         tableInner={tableInner}
         {...rest}
       >
-        <div className={`text-s py-lg ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`}>
-          <div className="flex items-center text-primary-text" role="cell">
+        <div className={style('text-s', firstCellStyle)}>
+          <div className="flex gap-m items-center text-primary-text" role="cell">
             {header?.icon ? (
-              <Img className="mr-m max-w-6" image={header.icon} width="24" height="24" />
+              <Img
+                className="hidden @4xl:block max-w-6"
+                image={header.icon}
+                width="24"
+                height="24"
+              />
             ) : null}
             {header?.title ? <div className="text-m font-light">{header?.title}</div> : null}
           </div>

package/mobile/src/components/TariffsTable/TariffsTableRowContainer.tsx

@@ -2,6 +2,8 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { InnerTable } from '../../ui-kit/InnerTable/InnerTable';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
+import { style } from '../../utils/style';
+import { dividerStyle } from './constants';
 
 export interface TariffsTableRowContainerProps extends UniBlockProps {
   tableInner?: TariffsTableInnerContent;
@@ -11,7 +13,14 @@ export interface TariffsTableRowContainerProps extends UniBlockProps {
 export const TariffsTableRowContainer = JSX<TariffsTableRowContainerProps>(
   ({ children, tableInner, onHideContentClick }) => (
     <div className="self-start flex flex-col" role="row">
-      <div className="flex">{children}</div>
+      <div
+        className={style(
+          dividerStyle,
+          'flex flex-col @4xl:flex-row gap-y-xs gap-x-5xl pb-lg @4xl:pt-lg',
+        )}
+      >
+        {children}
+      </div>
       {tableInner ? (
         <div className="origin-top animate-expansion">
           <InnerTable {...tableInner} onClick={onHideContentClick} />

package/mobile/src/components/TariffsTable/TariffsTableWrapper.tsx

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
+import { CarouselControls } from '../../hooks/useCarouselControls';
+
+interface WrapperProps {
+  controls: CarouselControls;
+}
+
+export const TariffsTableWrapper = JSX<WrapperProps>(({ children, controls }) => {
+  const { isScrollAvailable } = controls;
+
+  return (
+    <div role="table">
+      <div className="relative space-y-xs">
+        {children}
+        {renderArrows({
+          ...controls,
+          btnClass: ['top-28', 'top-11'],
+          className: 'right-7',
+        })}
+      </div>
+      {isScrollAvailable ? (
+        <div className="absolute top-0 right-0 bottom-0 w-20 bg-opacity-to-white" />
+      ) : null}
+    </div>
+  );
+});

package/mobile/src/components/TariffsTable/constants.ts

@@ -1,4 +1,4 @@
-export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
-export const FIRST_CELL_CLASSES = 'w-80 flex-shrink-0';
+export const dividerStyle = '@4xl:border-main-divider @4xl:border-b';
+export const firstCellStyle = 'w-80 flex-shrink-0';
 export const COLS_LENGTH_FOR_SCROLL = 2;
 export const COLUMN_WIDTH = 4 * 80 + 40; // w-80 + pl-10 = 360px

package/mobile/src/components/TariffsTable/headlineAlign.tsx

@@ -0,0 +1 @@
+export const headlineAlign = 'text-left';

package/mobile/src/content-page-repository/transformContentPage.ts

@@ -1,11 +1,12 @@
+import { fileResolver, resolveRef } from '@redneckz/json-ref';
+import type { JSONNode } from '@redneckz/json-ref/lib/JSONNode';
 import fs from 'fs';
-import path from 'path';
 import util from 'util';
 import { Attachment } from '../model/Attachment';
 import type { ContentPageDef } from '../model/ContentPageDef';
 import type { Picture } from '../model/Picture';
-import { mapJSON } from './mapJSON';
 import type { TransformationOptions } from './TransformationOptions';
+import { mapJSON } from './mapJSON';
 import { transformDocument } from './transformDocument';
 import { transformHTML } from './transformHTML';
 import { transformMarkdown } from './transformMarkdown';
@@ -34,14 +35,14 @@ export async function transformContentPage(
 ): Promise<ContentPageDef> {
   const content = await readFile(pagePath, 'utf8');
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-  const result = await mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
+  const json = await resolveRef(JSON.parse(content) as JSONNode, fileResolver(options.contentDir));
+  const result = await mapJSON(json as ContentPageDef, async (value: any, [key]) => {
     try {
       if (isMarkdown(key, value)) {
         return await transformMarkdown(value as string);
       } else if (isHTML(key, value)) {
         return await transformHTML(value as string);
-      } else if (isDocument(value)) {
+      } else if (isDocumentRef(value)) {
         return await transformDocument(value, pagePath, options);
       } else if (isPicture(value)) {
         return await transformPicture(value, pagePath, options);
@@ -65,12 +66,13 @@ const isMarkdown = (key: string, value: any): value is string =>
   isString(value) && key?.endsWith('__md');
 const isHTML = (key: string, value: any): value is string =>
   isString(value) && key?.endsWith('__html');
-const isDocument = (_: any): _ is Attachment =>
-  Boolean(_ && isLocalPath(_?.src) && isDocumentExt(path.extname(_?.src as string)));
-const isDocumentExt = (input: string) =>
-  DOCUMENT_EXT_LIST.some((ext) => input.toLowerCase().endsWith(ext));
+
+const isDocumentRef = (_: any): _ is Attachment =>
+  isLocalPath(_?.src) && DOCUMENT_EXT_LIST.some((ext) => _.src.toLowerCase().endsWith(ext));
+
 const isPicture = (_: any): _ is Picture => Boolean(_ && isLocalPath(_?.src));
-const isLocalPath = (_: any): boolean => isString(_) && _.length < 1024 && !isURL(_);
+
+const isLocalPath = (_: any): _ is string => isString(_) && _.length < 1024 && !isURL(_);
 const isURL = (src: string) => ['data:', 'https:', 'http:'].some((proto) => src.startsWith(proto));
 
 const isString = (_: any): _ is string => Boolean(_ && typeof _ === 'string');

package/mobile/src/model/AlignStyles.ts

@@ -0,0 +1 @@
+export const AlignStyles = 'text-left';

package/mobile/src/services/search/search.ts

@@ -1,6 +1,6 @@
 import { compareBy, desc } from '../../utils/Comparator';
+import { jaroWinklerDistance } from '../../utils/jaroWinklerDistance';
 import { zip } from '../../utils/zip';
-import { jaroWinklerDistance } from './jaroWinklerDistance';
 import { joinMaps } from './joinMaps';
 import { textRank } from './textRank';
 import { tokenize } from './tokenize';

package/mobile/src/services/search/textRank.ts

@@ -1,6 +1,6 @@
+import { jaroWinklerDistance } from '../../utils/jaroWinklerDistance';
 import { max } from '../../utils/maxBy';
 import { sum } from '../../utils/sum';
-import { jaroWinklerDistance } from './jaroWinklerDistance';
 import { tokenize } from './tokenize';
 
 export const textRank =

package/mobile/src/services/search/useSearch.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 import type { Nullable } from '../../utils/Nullable';
+import { useDebouncedEffect } from '@redneckz/uni-jsx/lib/hooks/useDebouncedEffect';
 import { fetchJSON } from '../../utils/fetchJSON';
 import { joinPath } from '../../utils/url';
-import { useDebouncedEffect } from '../../utils/useDebouncedEffect';
 import { CorpusItem, SearchIndex, search } from './search';
 
 const SEARCH_INDEX_FILENAME = 'search.index.json';

package/mobile/src/ui-kit/BaseFiltration/BaseFiltrationInner.tsx

@@ -1,28 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
-import type { IconName } from '../../icons/IconName';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { style } from '../../utils/style';
 import { BaseFiltrationInnerContent, NotFound } from './BaseFiltrationContent';
-import { checkShouldRenderBlock } from './checkShouldRenderBlock';
 import { DefaultFoldButton } from '../Foldable/DefaultFoldButton';
 import { Foldable } from '../Foldable/Foldable';
 import { FoldableSection } from '../Foldable/FoldableSection';
 import { Headline } from '../../components/Headline/Headline';
+import type { IconName } from '../../icons/IconName';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { BlockDef } from '../../model/ContentPageDef';
 
 const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
 const resultsGridStyle = 'space-y-px lg:space-y-0 lg:grid lg:grid-cols-12 gap-2xs border-box';
 
 interface BaseFiltrationInnerProps extends BaseFiltrationInnerContent, UniBlockProps {
-  filtrationState?: Record<string, any>;
+  blocksToRender?: BlockDef[];
 }
 
 export const BaseFiltrationInner = JSX<BaseFiltrationInnerProps>(
-  ({ label = '', filtrationState = {}, topItemsCount = 0, block, notFound, ...rest }) => {
-    const blocksToRender =
-      block?.blocks?.filter((b) => checkShouldRenderBlock(filtrationState, b.content || {})) || [];
-
+  ({ label = '', blocksToRender = [], topItemsCount = 0, block, notFound, ...rest }) => {
     const [visibleBlocks, hiddenBlocks] =
       topItemsCount > 0
         ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]

package/mobile/src/ui-kit/BaseFiltration/getBadgeCount.ts

@@ -1,6 +1,6 @@
 import type { BlockDef } from '../../model/ContentPageDef';
-import { checkShouldRenderBlock } from '../../ui-kit/BaseFiltration/checkShouldRenderBlock';
+import { shouldRenderBlock } from './shouldRenderBlock';
 import type { BaseFilter } from './useHotFilters';
 
 export const getBadgeCount = (blocks: BlockDef[] = [], filter: BaseFilter = {}) =>
-  blocks.filter(({ content = {} }) => checkShouldRenderBlock(filter, content)).length;
+  blocks.filter(({ content = {} }) => shouldRenderBlock(filter, content)).length;

package/mobile/src/ui-kit/BaseFiltration/getBlocksToRender.ts

@@ -0,0 +1,8 @@
+import { BlockDef } from '../../model/ContentPageDef';
+import { identity } from '../../utils/identity';
+import { shouldRenderBlock } from './shouldRenderBlock';
+
+export const getBlocksToRender =
+  (blocks: BlockDef[] | undefined, filtrationState: Record<string, any>) =>
+  (normalize = identity) =>
+    blocks && blocks.filter((b) => shouldRenderBlock(filtrationState, normalize(b.content || {})));

package/mobile/src/ui-kit/BaseFiltration/{checkShouldRenderBlock.ts → shouldRenderBlock.ts}

@@ -19,6 +19,11 @@ const isNumberFieldMatch =
     isEmpty(target[key]) ||
     naturalNumber(pattern[key]) <= naturalNumber(target[key]);
 
+const isMultipleNumberFieldMatch =
+  <P extends Partial<Record<string, any>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    isEmpty(pattern[key]) || isEmpty(target[key]) || target[key]?.includes(pattern[key]);
+
 const isValueInRange =
   <P extends Partial<Record<string, any>>, T extends P>(key: string, pattern: P) =>
   (target: T) =>
@@ -27,11 +32,13 @@ const isValueInRange =
     (naturalNumber(pattern[key]?.min) >= naturalNumber(target[key]?.min) &&
       naturalNumber(pattern[key]?.min) <= naturalNumber(target[key]?.max));
 
-export const checkShouldRenderBlock = (pattern: Record<string, any>, target: Record<string, any>) =>
+export const shouldRenderBlock = (pattern: Record<string, any>, target: Record<string, any>) =>
   Object.entries(pattern)
     .map(([key, subPattern]) => {
       if (typeof subPattern === 'number') {
-        return isNumberFieldMatch(key, pattern);
+        return Array.isArray(target[key])
+          ? isMultipleNumberFieldMatch(key, pattern)
+          : isNumberFieldMatch(key, pattern);
       }
 
       if (typeof subPattern === 'object' && 'min' in subPattern && 'max' in subPattern) {

package/mobile/src/ui-kit/Button/renderButtonsSection.tsx

@@ -54,14 +54,11 @@ const getIconVersion = (icon: Picture | undefined, version = 'secondary') => {
   return icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
 };
 
-const renderButtonIcon = (icon: Picture) => {
-  console.log(icon);
-
-  return icon?.icon || icon?.src ? (
+const renderButtonIcon = (icon: Picture) =>
+  icon?.icon || icon?.src ? (
     <Img
       image={icon}
       width={String(icon?.size?.width || DEFAULT_ICON_W)}
       height={String(DEFAULT_ICON_W)}
     />
   ) : null;
-};

package/mobile/src/ui-kit/CookiePopup/CookiePopup.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import { useBool } from '../../hooks/useBool';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { useDebouncedEffect } from '@redneckz/uni-jsx/lib/hooks/useDebouncedEffect';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import { style } from '../../utils/style';
-import { useDebouncedEffect } from '../../utils/useDebouncedEffect';
 import { CloseButton } from '../DialogManager/CloseButton';
 import { LinkWrapper } from '../LinkWrapper/LinkWrapper';
 import { Paragraph } from '../Paragraph/Paragraph';

package/mobile/src/ui-kit/DialogManager/DialogManager.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useEventListener } from '@redneckz/uni-jsx/lib/hooks/useEventListener';
 import { style } from '../../utils/style';
 import type { DialogOpenAction } from './DialogAction';
 import { useDialogManager } from './useDialogManager';
@@ -20,19 +21,13 @@ export const DialogManager = JSX(() => {
 
   const { close } = useDialogManager();
 
-  useEffect(() => {
-    const handleEscape = ({ key }: { key: string }) => {
-      if (key === 'Escape') {
-        close();
-      }
-    };
-
-    globalThis.document?.addEventListener('keydown', handleEscape);
-
-    return () => {
-      globalThis.document?.removeEventListener('keydown', handleEscape);
-    };
-  }, [close]);
+  const escapeHandler = useCallback(({ key }: { key: string }) => {
+    if (key === 'Escape') {
+      close();
+    }
+  }, []);
+
+  useEventListener(globalThis.document, 'keydown', escapeHandler);
 
   useEffect(() => {
     if (dialogs.length) {

package/mobile/src/ui-kit/DialogManager/useDialogsList.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useList } from '@redneckz/uni-jsx/lib/hooks/useList';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { useList } from '../../hooks/useList';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import type { DialogOpenAction } from './DialogAction';
 

package/mobile/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -4,6 +4,7 @@ import { style } from '../../utils/style';
 import type { IconName } from '../Icon/IconProps';
 import { Img } from '../Img/Img';
 import type { FoldablePartProps } from './FoldablePartProps';
+import { TextWithIcon } from '../TextWithIcon/TextWithIcon';
 
 interface DefaultFoldButtonProps {
   className?: string;
@@ -15,35 +16,36 @@ interface DefaultFoldButtonProps {
 }
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
-  ({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
-    return (
-      <button
-        className={style(
-          'flex justify-center w-full py-4 border border-transparent outline-none focus:border-primary-text',
-          disabled
-            ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
-            : 'bg-primary-main text-white hover:bg-primary-hove',
-          className,
-        )}
-        onClick={onClick}
-        disabled={disabled}
-        data-theme={dataTheme}
-      >
-        <span className="text-h4 pr-s">{label}</span>
-        {icon ? (
+  ({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => (
+    <TextWithIcon
+      tag="button"
+      onClick={onClick}
+      disabled={disabled}
+      data-theme={dataTheme}
+      justifyContent="center"
+      className={style(
+        'py-4 border border-transparent outline-none focus:border-primary-text',
+        disabled
+          ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
+          : 'bg-primary-main text-white hover:bg-primary-hove',
+        className,
+      )}
+      textNode={<span className="text-h4 pr-s">{label}</span>}
+      iconNode={
+        icon ? (
           <Img
             image={{
               icon,
               iconVersion: 'white',
             }}
-            className="flex-shrink-0 my-auto"
+            className="my-auto"
             width="20"
             height="20"
           />
-        ) : null}
-      </button>
-    );
-  },
+        ) : null
+      }
+    />
+  ),
 );
 
 export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => {

package/mobile/src/ui-kit/InnerTable/InnerTable.tsx

@@ -28,10 +28,10 @@ export const InnerTable = JSX<InnerTableProps>(({ dataUrl, pdfUrl, onClick }) =>
         linkToPDF={pdfUrl} //TODO: need link to service
       />
       <InnerTableBody activeTabIndex={activeTabIndex} items={items} />
-      <TableInnerButton onClick={onClick} isOpen />
+      <TableInnerButton className="mt-xl" onClick={onClick} isOpen />
     </div>
   ) : (
-    <div className="my-lg text-h6 text-center">
+    <div className="my-lg space-y-m text-h6 text-center">
       <p>{EMPTY_DATA}</p>
       <TableInnerButton onClick={onClick} isOpen />
     </div>

package/mobile/src/ui-kit/InnerTable/InnerTableBody.tsx

@@ -1,7 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Text } from '../../ui-kit/Text/Text';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { Img } from '../Img/Img';
 import { InnerTableBodyItem } from './InnerTableBodyItem';
 import type { DataItem } from './InnerTableProps';
 
@@ -11,39 +9,19 @@ export interface InnerTableBodyProps {
 }
 
 export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items }) => {
-  const [hiddenTables, setHiddenTables] = useState<Record<string, boolean>>({});
-
-  const toggleTables = useCallback(
-    (key) => setHiddenTables((oldState) => ({ ...oldState, [key]: !oldState[key] })),
-    [],
-  );
-
   return (
     <div>
       {items.map((_, tableIdx) => {
         const key = `activeTabIdx:${activeTabIndex}-tableIdx:${tableIdx}`;
 
         return (
-          <div key={key} className="w-full">
-            <div
-              className="flex p-m bg-gray text-center justify-center cursor-pointer relative"
-              onClick={() => toggleTables(key)}
-            >
+          <div key={key} className="w-full @container">
+            <div className="flex p-m bg-white @4xl:bg-gray text-center justify-center relative">
               <Text size="text-xl" font="font-light">
                 {_.title}
               </Text>
-              <Img
-                image={{ icon: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon' }}
-                className="absolute right-6"
-                width="24"
-                height="24"
-              />
             </div>
-            <div
-              className={`w-full pl-xs overflow-hidden transition-height duration-500 ease-in-out ${
-                hiddenTables[key] ? 'h-0' : ''
-              }`}
-            >
+            <div className="w-full pl-xs overflow-hidden transition-height duration-500 ease-in-out">
               <div className="relative">
                 <InnerTableBodyItem rows={_.rowsData} />
               </div>

package/mobile/src/ui-kit/InnerTable/InnerTableBodyItem.tsx

@@ -1,89 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
-import { renderArrows } from '../Button/renderArrows';
+import { SwipeListContainer } from '../SwipeListControl/SwipeListContainer';
 import type { RowsData } from './InnerTableProps';
-import { style } from '../../utils/style';
-
-const COLUMN_WIDTH = 140;
+import { renderInnerTableRow } from './renderInnerTableRow';
 
 export interface InnerTableBodyItemProps {
   rows?: RowsData[][];
 }
 
-export const InnerTableBodyItem = JSX<InnerTableBodyItemProps>(({ rows }) => {
-  const rowsLength = rows?.[0]?.length ?? 0;
-  const CARD_VIEW_COUNT = 5;
-  const [activeIndex, controls] = useCarouselControls({
-    itemCount: rowsLength,
-    visibleItemCount: CARD_VIEW_COUNT,
-  });
-
-  return (
-    <div>
-      {rows?.map(renderRow(activeIndex))}
-      {renderArrows({
-        ...controls,
-        btnClass: ['left-3 top-20', 'right-3 top-20'],
-        className: '',
-      })}
-    </div>
-  );
-});
-
-const renderRow = (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: number) => {
-  if (!rowData?.length) {
-    return null;
-  }
-
-  const [headerColumn, ...columns] = rowData;
-
-  const transform = [...Array(activeColumnIndex).keys()].reduce(
-    (res, i) => (columns?.[i]?.cols?.length ?? 1) * COLUMN_WIDTH + res,
-    0,
-  );
-
-  const columnsClassName = [
-    'flex duration-1000 text-center',
-    rowIdx !== 0 ? 'font-normal' : 'font-light',
-  ].join(' ');
-
-  return (
-    <div
-      key={String(rowIdx)}
-      className="flex border-main-divider border border-t-0 border-x-0 border-solid"
-    >
-      {headerColumn?.data ? (
-        <div className={`text-xl font-light w-52 py-lg `}>{headerColumn.data}</div>
-      ) : null}
-      <div className="flex flex-grow overflow-hidden">
-        <div
-          className={columnsClassName}
-          style={{
-            transform: `translateX(-${transform}px)`,
-          }}
-        >
-          {columns?.map((_, i) => (
-            <div
-              key={`row${i}`}
-              className="flex flex-col flex-grow gap-s justify-center py-xl odd:bg-main-divider"
-            >
-              {_?.data ? <div className="text-xl font-light">{_.data}</div> : null}
-              {_?.cols ? renderCols(_.cols, activeColumnIndex) : null}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const renderCols = (cols: string[], rowIndex: number) =>
-  cols?.length > 0 ? (
-    <div className={style('flex', rowIndex === 0 ? 'text-secondary-text' : '')}>
-      {cols.map((data, i) => (
-        <div key={String(i)} className={`w-20 text-h6 mx-lg`}>
-          {data}
-        </div>
-      ))}
-    </div>
-  ) : null;
+export const InnerTableBodyItem = JSX<InnerTableBodyItemProps>(({ rows }) => (
+  <SwipeListContainer visibleItemCount={0} snapAlign="snap-start">
+    <div>{rows?.map(renderInnerTableRow(0))}</div>
+  </SwipeListContainer>
+));