@redneckz/wildless-cms-uni-blocks 0.14.853 → 0.14.855

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

@@ -1,9 +1,8 @@
 /* eslint-disable max-lines */
 import { type Picture } from '../../model/Picture';
+import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import {
-  type InnerTableBlockDef,
-  type LabelDescriptionCellDef,
-  type RichTextDef,
+  type CellDef,
   type TariffsTableColumn,
   type TariffsTableContent,
   type TariffsTableRowHeader,
@@ -23,30 +22,25 @@ const image: Picture = {
   title: 'Платёжные системы',
 };
 
-const LABEL_BLOCK: LabelDescriptionCellDef = {
-  tableCellType: 'LabelDescription',
+const LABEL_BLOCK: CellDef = {
   label: 'Заголовок без описания',
 };
 
-const LABEL_DESCRIPTION_BLOCK: LabelDescriptionCellDef = {
+const LABEL_DESCRIPTION_BLOCK: CellDef = {
   label: 'Ячейка 1-2',
-  tableCellType: 'LabelDescription',
+
   description: 'Описание',
 };
 
-const TABLE_BLOCK: InnerTableBlockDef = {
-  tableCellType: 'Table',
+const TABLE_BLOCK: TariffsTableInnerContent = {
   tableSource: { $ref: '/wcms-resources/tariffs-inner-table-data.json' },
-  pdfUrl: '#',
 };
 
-const DESCRIPTION_BLOCK: LabelDescriptionCellDef = {
-  tableCellType: 'LabelDescription',
+const DESCRIPTION_BLOCK: CellDef = {
   description: 'Описание без заголовка',
 };
 
-const RICHTEXT_BLOCK: RichTextDef = {
-  tableCellType: 'RichText',
+const RICHTEXT_BLOCK: CellDef = {
   __html: `
     <ul>
       <li>Элемент списка 1</li>
@@ -77,29 +71,24 @@ export const columns: TariffsTableColumn[] = [
         {
           label: 'Бесплатно',
           description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
-          tableCellType: 'LabelDescription',
         },
         {
           label: 'Бесплатно',
           description: 'В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб',
-          tableCellType: 'LabelDescription',
         },
       ],
       [LABEL_BLOCK],
       [
         {
           label: 'Платёжные системы картинкой',
-          tableCellType: 'LabelDescription',
         },
         {
           image: image,
-          tableCellType: 'Img',
         },
       ],
       [
-        { label: 'Кнопки-иконки', tableCellType: 'LabelDescription' },
+        { label: 'Кнопки-иконки' },
         {
-          tableCellType: 'Buttons',
           buttons: [
             {
               icon: { icon: 'AppleIcon' },
@@ -121,7 +110,6 @@ export const columns: TariffsTableColumn[] = [
       [
         {
           label: 'Бесплатно',
-          tableCellType: 'LabelDescription',
         },
       ],
       [
@@ -135,7 +123,6 @@ export const columns: TariffsTableColumn[] = [
             },
             alt: 'Деньги',
           },
-          tableCellType: 'Img',
         },
       ],
     ],

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

@@ -0,0 +1,42 @@
+import { Img } from '../../ui-kit/Img/Img';
+import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { type RichTextProps } from '../../ui-kit/RichText/RichTextProps';
+import { Text } from '../../ui-kit/Text/Text';
+import type { CellDef } from './TariffsTableContent';
+
+export const renderCell = (
+  { label, description, __html, isDotted, buttons, image }: CellDef,
+  i: number,
+) => (
+  <div className="grid gap-xs" key={String(i)}>
+    {renderLabel(label)}
+    {renderDescription(description)}
+    {renderRich({ __html, isDotted })}
+    {renderButtonsSection(buttons, {
+      buttonClassName: 'basis-0',
+    })}
+    {image?.src ? <Img image={image} /> : null}
+  </div>
+);
+
+const renderLabel = (label?: string) =>
+  label ? (
+    <div>
+      <Text size="text-h6">{label}</Text>
+    </div>
+  ) : null;
+
+const renderDescription = (description?: string) =>
+  description ? (
+    <div className="text-l font-light">
+      <Text color="text-secondary-text">{description}</Text>
+    </div>
+  ) : null;
+
+const renderRich = ({ __html, isDotted }: RichTextProps) =>
+  __html ? (
+    <div className="flex flex-col justify-between items-start text-h6">
+      <RichText __html={__html} isDotted={isDotted} itemSize="list-m" />
+    </div>
+  ) : null;

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

@@ -0,0 +1,19 @@
+import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import type { TariffsTableRowHeader } from './TariffsTableContent';
+
+const FIRST_CELL_STYLES = 'w-80 flex-shrink-0 sticky left-0 bg-white';
+
+export const renderHeader = ({ title, icon }: TariffsTableRowHeader) => (
+  <div className={style('flex gap-m items-center', FIRST_CELL_STYLES)} role="cell">
+    {icon ? (
+      <Img className="hidden lg:block max-w-6 shrink-0" image={icon} width="24" height="24" />
+    ) : null}
+    {title ? (
+      <Text size="text-m" font="font-light" color="text-primary-text">
+        {title}
+      </Text>
+    ) : null}
+  </div>
+);

package/mobile/src/hooks/useLink.ts

@@ -9,6 +9,8 @@ import { adjustHref } from '../utils/adjustHref';
 import { getBasePath } from '../utils/getBasePath';
 import { hasPrefix, isLocalURL } from '../utils/url';
 
+const RESERVED_PREFIX = ['/api'];
+
 export interface Clickable {
   onClick(ev?: PreventableEvent): void;
 }
@@ -40,5 +42,5 @@ export function useLink() {
 
 const isClientRouting = (href: string | undefined, target?: Target, basePath?: string) =>
   isLocalURL(href, target) &&
-  !env.SUB_PORTALS?.split(',')?.some(hasPrefix(href)) &&
+  ![...RESERVED_PREFIX, ...(env.SUB_PORTALS?.split(',') ?? [])].some(hasPrefix(href)) &&
   hasPrefix(href)(basePath || '/');

package/mobile/src/model/onClick.ts

@@ -0,0 +1,3 @@
+export interface OnClickProps {
+  onClick?: () => void;
+}

package/mobile/src/model/onClose.ts

@@ -0,0 +1,3 @@
+export interface OnCloseProps {
+  onClose?: () => void;
+}

package/mobile/src/retail/components/DraftDialog/DraftActionButton.tsx

@@ -21,9 +21,11 @@ export const DraftActionButton = JSX<DraftActionButtonProps>(
     >
       <Img image={{ icon, iconVersion: 'normal' }} width="78" height="78" />
       <div className="flex flex-col items-start gap-xs md:w-72 md:mr-lg">
-        <Text font="font-medium" size="text-s">
-          {title}
-        </Text>
+        {title ? (
+          <Text font="font-medium" size="text-s">
+            {title}
+          </Text>
+        ) : null}
         {description ? (
           <Text color="text-secondary-text" size="text-xs">
             {description}

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

@@ -5,7 +5,6 @@ import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { Text } from '../Text/Text';
 import { InnerTableBody } from './InnerTableBody';
-import { TableInnerButton } from './InnerTableButton';
 import { InnerTableHeader } from './InnerTableHeader';
 import { type TableFetchData, type TariffsTableInnerContent } from './InnerTableProps';
 
@@ -15,7 +14,7 @@ export interface InnerTableProps extends TariffsTableInnerContent, UniBlockProps
 
 const EMPTY_DATA = 'Данных нет';
 
-export const InnerTable = UniBlock<InnerTableProps>(({ tableSource, pdfUrl, onClick }) => {
+export const InnerTable = UniBlock<InnerTableProps>(({ tableSource }) => {
   const tableData = tableSource?.tableData;
   const [activeTabIndex, setActiveTabIndex] = useState(0);
   const handleActiveTabIndex = useCallback((_: number) => setActiveTabIndex(_), []);
@@ -28,15 +27,12 @@ export const InnerTable = UniBlock<InnerTableProps>(({ tableSource, pdfUrl, onCl
         currencies={currencies}
         activeTabIndex={activeTabIndex}
         setActiveTabIndex={handleActiveTabIndex}
-        linkToPDF={pdfUrl} //TODO: need link to service
       />
       <InnerTableBody activeTabIndex={activeTabIndex} items={items} />
-      <TableInnerButton className="mt-xl" onClick={onClick} isOpen />
     </div>
   ) : (
-    <div className="my-lg space-y-m text-center">
+    <div className="space-y-m text-center">
       <Text size="text-h6">{EMPTY_DATA}</Text>
-      <TableInnerButton onClick={onClick} isOpen />
     </div>
   );
 });

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

@@ -8,27 +8,25 @@ export interface InnerTableBodyProps {
   items: DataItem[];
 }
 
-export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items }) => {
-  return (
-    <div>
-      {items.map((_, tableIdx) => {
-        const key = `activeTabIdx:${activeTabIndex}-tableIdx:${tableIdx}`;
+export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items }) => (
+  <div>
+    {items.map((_, tableIdx) => {
+      const key = `activeTabIdx:${activeTabIndex}-tableIdx:${tableIdx}`;
 
-        return (
-          <div key={key} className="w-full @container">
-            <div className="flex py-m sm:px-m bg-white @4xl:bg-gray relative">
-              <Text size="text-xl" align="text-left">
-                {_.title}
-              </Text>
-            </div>
-            <div className="w-full sm:pl-xs overflow-hidden transition-height duration-500 ease-in-out">
-              <div className="relative">
-                <InnerTableBodyItem rows={_.rowsData} />
-              </div>
+      return (
+        <div key={key} className="w-full @container">
+          <div className="flex py-m px-m bg-white @4xl:bg-gray relative">
+            <Text size="text-xl" align="text-left">
+              {_.title}
+            </Text>
+          </div>
+          <div className="w-full sm:pl-xs overflow-hidden transition-height duration-500 ease-in-out">
+            <div className="relative">
+              <InnerTableBodyItem rows={_.rowsData} />
             </div>
           </div>
-        );
-      })}
-    </div>
-  );
-});
+        </div>
+      );
+    })}
+  </div>
+));

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

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
 import { type ComponentType } from '../../model/ComponentType';
-import type { OnClickProps } from '../../model/OnClickProps';
+import { type OnClickProps } from '../../model/onClick';
 import { DefaultFoldButton } from '../Foldable/DefaultFoldButton';
 import { type TariffsTableInnerContent } from './InnerTableProps';
 
 export interface InnerTableButtonProps
-  extends Partial<TariffsTableCellIndexProps>,
-    TariffsTableInnerContent,
+  extends TariffsTableInnerContent,
     ComponentType,
     OnClickProps {
   isOpen?: boolean;

package/mobile/src/ui-kit/InnerTable/InnerTableProps.ts

@@ -19,9 +19,7 @@ export type TableFetchData = {
   tableData?: TableData[];
 };
 
-export interface TariffsTableInnerContent {
+export type TariffsTableInnerContent = {
   /** @title Справочник */
   tableSource?: JSONRefObject;
-  /** @title Ссылка PDF-файл */
-  pdfUrl?: string;
-}
+};

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

@@ -17,7 +17,7 @@ export const renderInnerTableRow =
     return (
       <div key={String(rowIdx)} className="flex border-main-divider border-b border-solid h-full">
         {headerColumn?.data ? (
-          <div className="whitespace-pre-wrap sm:whitespace-normal w-48 sm:w-56 sm:min-w-56 py-lg pr-lg sm:pr-0">
+          <div className="whitespace-pre-wrap sm:whitespace-normal w-48 min-w-48 sm:w-56 sm:min-w-56 py-lg pr-lg sm:pr-0">
             <Text size="text-xl" font="font-light">
               {headerColumn.data}
             </Text>

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Headline } from '../../components/Headline/Headline';
-import type { OnCloseProps } from '../../model/OnCloseProps';
+import { type OnCloseProps } from '../../model/onClose';
 import { Button } from '../Button/Button';
 import { Dialog } from '../DialogManager/Dialog';
 import { Img } from '../Img/Img';

package/mobile/src/utils/adjustBase.ts

@@ -1 +1,6 @@
-export const adjustBase = (href?: string, basePath = '') => href?.replace(basePath, '') || '/';
+const FORWARD_SLASH = '/';
+
+export const adjustBase = (href: string = FORWARD_SLASH, basePath: string = FORWARD_SLASH) =>
+  [href, basePath].some((_) => _ === FORWARD_SLASH)
+    ? href
+    : href.replace(basePath, '') || FORWARD_SLASH;

package/package.json

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

package/src/components/TariffsTable/TableCarouselContainer.tsx

@@ -2,8 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import { type TableVersion } from '../../model/TableVersion';
 
 export interface TableCarouselContainerProps {
-  activeIndex: number;
-  columnWidth: number;
   version?: TableVersion;
 }
 
@@ -13,14 +11,9 @@ const carouselContainerClassesMap: Record<TableVersion, string> = {
 };
 
 export const TableCarouselContainer = JSX<TableCarouselContainerProps>(
-  ({ children, activeIndex, columnWidth, version = 'comparison' }) => (
-    <div className="flex flex-1 overflow-hidden">
-      <div
-        className={carouselContainerClassesMap[version]}
-        style={{ transform: `translateX(-${activeIndex * columnWidth}px)` }}
-      >
-        {children}
-      </div>
+  ({ children, version = 'comparison' }) => (
+    <div className="flex flex-1">
+      <div className={carouselContainerClassesMap[version]}>{children}</div>
     </div>
   ),
 );

package/src/components/TariffsTable/TariffsTable.example.json

@@ -29,67 +29,34 @@
         "data": [
           [
             {
-              "tableCellType": "LabelDescription",
               "label": "Ячейка 1-1",
               "description": "Описание для ячейки 2-1"
             },
             {
-              "tableCellType": "RichText",
               "isDotted": true,
-              "listItemSize": "M",
               "__html": "<ul><li>Элемент списка 1</li><li>Элемент списка 2</li><li>Элемент списка 3</li></ul>"
             },
             {
               "label": "Ячейка 1-2",
-              "tableCellType": "LabelDescription",
               "description": "Описание"
             },
             {
-              "tableCellType": "RichText",
               "isDotted": false,
-              "listItemSize": "M",
               "__html": "<ul><li>Элемент списка 1</li><li>Элемент списка 2</li><li>Элемент списка 3</li></ul>"
             }
           ],
           [
             {
-              "tableCellType": "LabelDescription",
               "label": "Ячейка 2-1"
             },
             {
-              "tableCellType": "RichText",
               "isDotted": true,
-              "listItemSize": "M",
               "__html": "<ul><li>Элемент списка 1</li><li>Элемент списка 2</li><li>Элемент списка 3</li></ul>"
             }
           ],
           [
             {
-              "label": "Ячейка 3-1",
-              "tableCellType": "LabelDescription"
-            },
-            {
-              "tableCellType": "Button",
-              "buttons": [
-                {
-                  "icon": {
-                    "icon": "AppleIcon"
-                  },
-                  "rounded": true,
-                  "version": "secondary",
-                  "href": "/",
-                  "target": "_blank"
-                },
-                {
-                  "icon": {
-                    "icon": "PlayMarketIcon"
-                  },
-                  "rounded": true,
-                  "version": "secondary",
-                  "href": "/",
-                  "target": "_blank"
-                }
-              ]
+              "label": "Ячейка 3-1"
             }
           ]
         ]

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

@@ -1,6 +1,8 @@
+// eslint-disable max-len
 import '../../setup-fixture';
 
 import {
+  columns,
   columnsTable,
   TARIFFS_TABLE_FIXTURE_EXAMPLE,
   TARIFFS_TABLE_INNER_TABLE_FIXTURE_EXAMPLE,
@@ -8,9 +10,13 @@ import {
 import { TariffsTable } from './TariffsTable';
 
 export default {
-  'default (vertical)': (
+  default: (
     <div className="container grid grid-cols-12">
-      <TariffsTable className="col-span-12" {...TARIFFS_TABLE_FIXTURE_EXAMPLE} />
+      <TariffsTable
+        className="col-span-12"
+        {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
+        tariffsColumns={columns.slice(0, 1)}
+      />
     </div>
   ),
   '1 columns with inner table': (
@@ -22,4 +28,24 @@ export default {
       />
     </div>
   ),
+  '1 column': (
+    <div className="container grid grid-cols-12">
+      <TariffsTable
+        className="col-span-12"
+        {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
+        tariffsColumns={Array(1).fill(columns).flat()}
+        hiddenRowsNum={2}
+      />
+    </div>
+  ),
+  '2 columns': (
+    <div className="container grid grid-cols-12">
+      <TariffsTable
+        className="col-span-12"
+        {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
+        tariffsColumns={Array(2).fill(columns).flat()}
+        hiddenRowsNum={2}
+      />
+    </div>
+  ),
 };

package/src/components/TariffsTable/TariffsTable.tsx

@@ -1,21 +1,19 @@
-import { JSX } from '@redneckz/uni-jsx';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import { COLS_LENGTH_FOR_SCROLL } from './constants';
 import { type TariffsTableContent } from './TariffsTableContent';
 import { TariffsTableRow } from './TariffsTableRow';
 import { TariffsTableWrapper } from './TariffsTableWrapper';
 
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
-export const TariffsTable = JSX<TariffsTableProps>(
+export const TariffsTable = UniBlock<TariffsTableProps>(
   ({
     className = '',
     title,
@@ -30,13 +28,8 @@ export const TariffsTable = JSX<TariffsTableProps>(
       header,
       data: colData.map((col) => col?.[i] || []),
     }));
-    const itemCount = colData.length;
-    const [activeIndex, controls] = useCarouselControls({
-      itemCount: itemCount,
-      visibleItemCount: COLS_LENGTH_FOR_SCROLL,
-    });
     const rows = (rowData || []).map((row, i) => (
-      <TariffsTableRow key={String(i)} row={row} activeIndex={activeIndex} rowIdx={i} {...rest} />
+      <TariffsTableRow key={String(i)} row={row} {...rest} />
     ));
     const [visibleRows, hiddenRows] =
       hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
@@ -45,7 +38,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     return (
       <BlockWrapper
-        className={style('relative space-y-6xl @4xl:space-y-xl', className)}
+        className={style('relative space-y-xl', className)}
         defaultPadding="p-6xl"
         {...rest}
       >
@@ -59,14 +52,14 @@ export const TariffsTable = JSX<TariffsTableProps>(
         <div className="space-y-m overflow-hidden">
           {hiddenRowsNum > 0 ? (
             <Foldable>
-              <TariffsTableWrapper controls={controls}>
+              <TariffsTableWrapper>
                 {visibleRows}
                 <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
               </TariffsTableWrapper>
               <DefaultFoldButton className="text-h4" isUnfolded={isUnfolded} onClick={toggle} />
             </Foldable>
           ) : (
-            <TariffsTableWrapper controls={controls}>{rows}</TariffsTableWrapper>
+            <TariffsTableWrapper>{rows}</TariffsTableWrapper>
           )}
         </div>
       </BlockWrapper>

package/src/components/TariffsTable/TariffsTable.ui.json

@@ -5,9 +5,6 @@
         "data": {
           "items": {
             "items": {
-              "tableCellType": {
-                "ui:widget": "hidden"
-              },
               "image": {
                 "ui:field": "picture"
               },

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -1,48 +1,50 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
+import type { JSONRefObject } from '../../data/JSONRefObject';
+import { type OnCloseProps } from '../../model/onClose';
+import { TableInnerButton } from '../../ui-kit/InnerTable/InnerTableButton';
+import {
+  type TableFetchData,
+  type TariffsTableInnerContent,
+} from '../../ui-kit/InnerTable/InnerTableProps';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { renderCell } from './renderCell';
 import { type CellDef } from './TariffsTableContent';
-import { RenderCellInner } from './TariffsTableRenderCell';
 
 export interface TariffTableContentProps {
-  openTableInnerIdx?: number;
-  setOpenTableInnerIdx: (props?: number) => void;
-  setTableInner: (props?: TariffsTableInnerContent) => void;
+  onSetTable: (props?: TariffsTableInnerContent) => void;
   tableInner?: TariffsTableInnerContent;
 }
 
-export interface TariffsTableCellProps extends TariffTableContentProps, UniBlockProps {
-  rowIdx: number;
-  cellIdx: number;
-  cells: CellDef[];
+type CellDefProps = CellDef & { tableSource?: JSONRefObject & TableFetchData };
+
+export interface TariffsTableCellProps
+  extends TariffTableContentProps,
+    UniBlockProps,
+    OnCloseProps {
+  cells: CellDefProps[];
 }
 
-export const TariffsTableCell = JSX<TariffsTableCellProps>(
-  ({
-    cells,
-    rowIdx,
-    cellIdx,
-    setTableInner,
-    tableInner,
-    openTableInnerIdx,
-    setOpenTableInnerIdx,
-  }) => (
-    <div className="w-80 flex-grow flex flex-col gap-m @4xl:gap-lg" role="cell">
+export const TariffsTableCell = JSX<TariffsTableCellProps>(({ cells, tableInner, onSetTable }) => {
+  return (
+    <div className="w-80 flex-grow flex flex-col gap-lg" role="cell">
       {cells?.length
-        ? cells.map((_, i) => (
-            <RenderCellInner
-              key={String(i)}
-              cell={_}
-              fieldIdx={i}
-              rowIdx={rowIdx}
-              cellIdx={cellIdx}
-              setTableInner={setTableInner}
-              tableInner={tableInner}
-              openTableInnerIdx={openTableInnerIdx}
-              setOpenTableInnerIdx={setOpenTableInnerIdx}
-            />
-          ))
+        ? cells.map((_, i) => {
+            if (_?.tableSource?.tableData) {
+              return (
+                <TableInnerButton
+                  key={String(i)}
+                  className="w-fit"
+                  isOpen={Boolean(tableInner)}
+                  onClick={() => {
+                    onSetTable(tableInner ? undefined : { tableSource: _.tableSource });
+                  }}
+                />
+              );
+            }
+
+            return renderCell(_, i);
+          })
         : null}
     </div>
-  ),
-);
+  );
+});