@redneckz/wildless-cms-uni-blocks 0.6.32 → 0.6.34

package/mobile/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -4,8 +4,4 @@ import type { TitleProps } from '../../model/HeadlineType';
 /**
  * @title Аренда сейфовых ячеек
  */
-export type SafeDepositRentalContent = Footnote &
-  TitleProps & {
-    /** @title Сноска */
-    footnote?: string;
-  };
+export type SafeDepositRentalContent = Footnote & TitleProps;

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

@@ -45,7 +45,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 );
 
 const getColData = (columns: TariffsTableColumn[] | undefined) =>
-  columns?.[0].data ? columns[0].data : [];
+  columns?.[0]?.data ? columns[0].data : [];
 
 const getTiles = (rowHeaders: TariffsTableRowHeader[] | undefined, colData: CellDef[][]) =>
   rowHeaders?.map((header, i) => ({

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

@@ -12,12 +12,12 @@ import { TariffsTableRowContainer } from './TariffsTableRowContainer';
 
 export interface TariffsTableRowProps extends UniBlockProps {
   row: Data;
-  activeCardIndex: number;
+  activeIndex: number;
   rowIdx: number;
 }
 
 export const TariffsTableRow = JSX<TariffsTableRowProps>(
-  ({ row: { header, data }, activeCardIndex, rowIdx, ...rest }) => {
+  ({ row: { header, data }, activeIndex, rowIdx, ...rest }) => {
     const [tableInner, setTableInner] = useState<TariffsTableInnerContent | undefined>(undefined);
     const [openTableInnerIdx, setOpenTableInnerIdx] = useState<number | undefined>(undefined);
 
@@ -45,7 +45,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
         </div>
         {data?.length ? (
           <TableCarouselContainer
-            activeCardIndex={activeCardIndex}
+            activeIndex={activeIndex}
             columnWidth={COLUMN_WIDTH}
             version="tariff"
           >

package/mobile/src/components/Tile/Tile.tsx

@@ -3,11 +3,11 @@ import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
-import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Tags } from '../../ui-kit/Tags/Tags';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
@@ -66,7 +66,9 @@ export const Tile = JSX<TileProps>((props) => {
         image={image?.src ? <Img className="mt-auto ml-7" image={image} /> : null}
       >
         {description ? (
-          <Description className="max-w-[600px] text-xl-light mt-2.5" description={description} />
+          <div className="max-w-[600px] mt-2.5">
+            <Paragraph size="text-xl-light">{description}</Paragraph>
+          </div>
         ) : null}
         {children}
         {renderList({ version, isDotted, listItemSize }, items)}

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { AlignType } from '../../model/AlignType';
 import { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
@@ -30,7 +31,7 @@ const backgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
 };
 
 export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
-  ({ className = '', children, gap = '', align = 'left', version = 'transparent', ...rest }) => (
+  ({ className = '', gap = '', align = 'left', version = 'transparent', ...rest }) => (
     <BlockWrapper
       className={[
         'flex flex-col',
@@ -41,7 +42,7 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
       ].join(' ')}
       {...rest}
     >
-      {children}
+      {renderChildren(rest)}
     </BlockWrapper>
   ),
 );

package/mobile/src/components/Video/Video.tsx

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Headline } from '../Headline/Headline';
+import { getPaddings } from './getPaddings';
+import type { VideoContent } from './VideoContent';
+
+interface VideoProps extends VideoContent, UniBlockProps {}
+
+export const Video = JSX<VideoProps>((props) => {
+  const { title, src, previewImg, className = '', ...rest } = props;
+
+  return (
+    <BlockWrapper className={`bg-white ${getPaddings(className)} ${className}`} {...rest}>
+      <Headline title={title} headlineVersion="M" />
+      {src ? (
+        <video
+          className="m-auto w-full object-fill"
+          preload="metadata"
+          poster={previewImg?.src}
+          style={{ maxHeight: 524 }}
+          controls
+        >
+          <source src={src} />
+        </video>
+      ) : null}
+    </BlockWrapper>
+  );
+});

package/mobile/src/components/Video/Video.ui.json

@@ -0,0 +1,12 @@
+{
+  "content": {
+    "previewImg": {
+      "ui:field": "picture"
+    }
+  },
+  "style": {
+    "ui:options": {
+      "minCols": 6
+    }
+  }
+}

package/mobile/src/components/Video/VideoContent.ts

@@ -0,0 +1,9 @@
+import type { TitleProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+
+export interface VideoContent extends TitleProps {
+  /** @title URL */
+  src?: string;
+  /** @title Заставка */
+  previewImg?: Picture;
+}

package/mobile/src/components/Video/getPaddings.ts

@@ -0,0 +1,6 @@
+import { getColSpan } from '../../utils/getColSpan';
+
+const MIN_COL_SPAN = 10;
+
+export const getPaddings = (className: string) =>
+  getColSpan(className) < MIN_COL_SPAN ? 'py-6 px-11' : 'py-12 px-32';

package/mobile/src/hooks/useCarouselControls.ts

@@ -5,39 +5,35 @@ export interface CarouselControls {
   dec: () => void;
   canInc: boolean;
   canDec: boolean;
+  isScrollAvailable: boolean;
 }
 
-interface CarouselProps {
-  itemsCount: number;
+interface CarouselControlsProps {
+  itemCount: number;
   visibleItemCount?: number;
   isCyclic?: boolean;
+  container?: HTMLDivElement | null;
 }
 
-export const useCarouselControls = ({
-  itemsCount,
-  visibleItemCount = itemsCount,
-  isCyclic,
-}: CarouselProps): [number, CarouselControls] => {
+export const useCarouselControls = (props: CarouselControlsProps): [number, CarouselControls] => {
+  const { itemCount, visibleItemCount, isCyclic } = props;
+
   const [activeIndex, setActiveIndex] = useState(0);
 
   const inc = useCallback(
-    () =>
-      setActiveIndex((_) => (isCyclic ? (_ + 1) % itemsCount : Math.min(_ + 1, itemsCount - 1))),
-    [isCyclic, itemsCount],
+    () => setActiveIndex((_) => (isCyclic ? (_ + 1) % itemCount : Math.min(_ + 1, itemCount - 1))),
+    [isCyclic, itemCount],
   );
   const dec = useCallback(
-    () =>
-      setActiveIndex((_) => (isCyclic ? (itemsCount + _ - 1) % itemsCount : Math.max(_ - 1, 0))),
-    [isCyclic, itemsCount],
+    () => setActiveIndex((_) => (isCyclic ? (itemCount + _ - 1) % itemCount : Math.max(_ - 1, 0))),
+    [isCyclic, itemCount],
   );
 
-  const isScrollAvailable = itemsCount > visibleItemCount;
-  const isCyclicAndScrollAvailable = isCyclic && isScrollAvailable;
-
   const canInc =
-    isCyclicAndScrollAvailable ||
-    (isScrollAvailable && itemsCount - activeIndex > visibleItemCount);
-  const canDec = isCyclicAndScrollAvailable || Boolean(isScrollAvailable && activeIndex > 0);
+    isCyclic ||
+    (isScrollable(activeIndex, props) && activeIndex < itemCount - (visibleItemCount || 1));
+  const canDec = isCyclic || activeIndex > 0;
+  const isScrollAvailable = canDec || canInc;
 
   return [
     activeIndex,
@@ -46,6 +42,24 @@ export const useCarouselControls = ({
       dec,
       canInc,
       canDec,
+      isScrollAvailable,
     },
   ];
 };
+
+function isScrollable(
+  activeIndex: number,
+  { itemCount, visibleItemCount, container }: CarouselControlsProps,
+): boolean {
+  if (visibleItemCount) {
+    return itemCount > visibleItemCount;
+  }
+
+  if (container) {
+    const scrollLeft = (container.scrollWidth * activeIndex) / itemCount;
+
+    return scrollLeft + container.clientWidth < container.scrollWidth;
+  }
+
+  return false;
+}

package/mobile/src/model/JSXBlock.ts

@@ -1,14 +1,13 @@
 import type { UNIComponent } from '@redneckz/uni-jsx';
-import type { BlockAncestors, SlotName } from './BlockDecorator';
-import type { BlockDef, ContentPageDef } from './ContentPageDef';
+import type { BlockRendererOptions } from '../BlockRenderer/BlockRendererOptions';
+import type { SlotName } from './BlockDecorator';
+import type { BlockDef } from './ContentPageDef';
 import type { VNode } from './VNode';
 
 export interface UniBlockProps {
   className?: string;
-  page?: ContentPageDef;
   block?: BlockDef;
-  ancestors?: BlockAncestors;
-  slots?: Record<string, VNode>;
+  options?: BlockRendererOptions;
 }
 
 export type JSXBlock<BlockProps extends UniBlockProps = UniBlockProps> = UNIComponent<

package/mobile/src/model/LinkProps.ts

@@ -13,6 +13,7 @@ export type Target = '' | '_self' | '_blank' | '_parent' | '_top';
 export interface LinkCommonProps {
   /** @title URL (href) */
   href?: string;
+  /** @default "" */
   target?: Target;
 }
 

package/mobile/src/model/Picture.ts

@@ -33,9 +33,15 @@ export type ImgAlignment =
 export interface Img {
   /** @title Картинка */
   src?: string;
-  /** @title Альтернативный текст (alt) */
+  /**
+   * @title Альтернативный текст (alt)
+   * @default ""
+   */
   alt?: string;
-  /** @title Текст подсказки (title) */
+  /**
+   * @title Текст подсказки (title)
+   * @default ""
+   */
   title?: string;
 }
 

package/{src/react → mobile/src}/setup-fixture.ts

@@ -1,9 +1,9 @@
 import '@redneckz/uni-jsx/lib/setup.react';
 import { useState } from 'react';
-import { handlerDecorator } from '../hooks/handlerDecorator';
-import { useRouter } from '../hooks/useRouter';
-import { projectSettings } from '../ProjectSettings';
-import wlc from '../wlc.json';
+import { handlerDecorator } from './hooks/handlerDecorator';
+import { useRouter } from './hooks/useRouter';
+import { projectSettings } from './ProjectSettings';
+import wlc from './wlc.json';
 
 projectSettings.setup(wlc);
 

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

@@ -1,40 +1,45 @@
 import { ArrowButton } from './ArrowButton';
 
-export type renderArrowsProps = {
-  handler: [() => void, () => void];
-  isShown: [boolean, boolean];
+export type RenderArrowsProps = {
+  dec: () => void;
+  inc: () => void;
+  canInc: boolean;
+  canDec: boolean;
   btnClass: [string, string];
   className?: string;
   isDisabled?: boolean;
 };
 
 export function renderArrows({
-  handler,
-  isShown,
+  dec,
+  inc,
+  canDec,
+  canInc,
   btnClass,
   className = '',
-  isDisabled = false,
-}: renderArrowsProps) {
-  return (
+}: RenderArrowsProps) {
+  const isVisible = canDec || canInc;
+
+  return isVisible ? (
     <div>
-      {isShown[0] || isDisabled ? (
+      {canDec ? (
         <ArrowButton
-          className={`absolute z-10 ${btnClass[0]} ${className}`}
-          onClick={handler[0]}
+          className={`absolute z-50 ${btnClass[0]} ${className}`}
+          onClick={dec}
           ariaLabel="Пролистать влево"
           data-block-control="scroll-left"
-          disabled={!isShown[0]}
+          disabled={!canDec}
         />
       ) : null}
-      {isShown[1] || isDisabled ? (
+      {canInc ? (
         <ArrowButton
-          className={`absolute z-10 rotate-180 ${btnClass[1]} ${className}`}
-          onClick={handler[1]}
+          className={`absolute z-50 rotate-180 ${btnClass[1]} ${className}`}
+          onClick={inc}
           ariaLabel="Пролистать вправо"
           data-block-control="scroll-right"
-          disabled={!isShown[1]}
+          disabled={!canInc}
         />
       ) : null}
     </div>
-  );
+  ) : null;
 }

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { renderArrows } from '../Button/renderArrows';
 import type { RowsData } from './InnerTableProps';
 
@@ -10,23 +10,19 @@ export interface InnerTableBodyItemProps {
 }
 
 export const InnerTableBodyItem = JSX<InnerTableBodyItemProps>(({ rows }) => {
-  const [activeColumnIndex, setActiveColumnIndex] = useState(0);
-
-  const handleNextClick = () => setActiveColumnIndex(activeColumnIndex + 1);
-  const handlePrevClick = () => setActiveColumnIndex(activeColumnIndex - 1);
-
   const rowsLength = rows?.[0]?.length ?? 0;
-  const showNextButton = rowsLength > 3 && rowsLength > activeColumnIndex + 4;
-
-  const showPrevButton = activeColumnIndex > 0;
+  const CARD_VIEW_COUNT = 5;
+  const [activeIndex, controls] = useCarouselControls({
+    itemCount: rowsLength,
+    visibleItemCount: CARD_VIEW_COUNT,
+  });
 
   return (
     <div>
-      {rows?.map(renderRow(activeColumnIndex))}
+      {rows?.map(renderRow(activeIndex))}
       {renderArrows({
-        handler: [handlePrevClick, handleNextClick],
-        isShown: [showPrevButton, showNextButton],
-        btnClass: ['right-3 top-24', 'right-3 top-2'],
+        ...controls,
+        btnClass: ['left-3 top-20', 'right-3 top-20'],
         className: '',
       })}
     </div>

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

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { FontWeight, TextAlign, TextColor, TextSize } from '../Text/Text';
+
+interface ParagraphProps {
+  size?: TextSize;
+  color?: TextColor;
+  align?: TextAlign;
+  font?: FontWeight;
+}
+
+export const Paragraph = JSX<ParagraphProps>((props) => {
+  const { size = '', color = '', align = '', font = '', children } = props;
+
+  const textClasses = `font-sans ${size} ${color} ${align} ${font}`;
+
+  return <p className={textClasses}>{children}</p>;
+});

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

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
 import { SwipeListControlDots } from './SwipeListControlDots';
-import { SwipeListControlList, SwipeListControlListProps } from './SwipeListControlList';
+import { SwipeListControlList } from './SwipeListControlList';
+import type { SwipeListControlListProps } from './SwipeListControlList';
 import type { SwipeListControlProps } from './SwipeListControlProps';
 import { getIndexParts } from './utils/getIndexParts';
 import { getScrollPoints } from './utils/getScrollPoints';
@@ -26,34 +27,40 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
       children,
     };
 
-    const handleScroll: SwipeListControlListProps['onScroll'] = (e) => {
-      const {
-        scrollLeft,
-        clientWidth,
-        childElementCount,
-        scrollWidth,
-        children: childrenCollection,
-      } = e?.currentTarget as HTMLElement;
+    const handleScroll: SwipeListControlListProps['onScroll'] = useCallback(
+      (e) => {
+        const {
+          scrollLeft,
+          clientWidth,
+          childElementCount,
+          scrollWidth,
+          children: childrenCollection,
+        } = e?.currentTarget as HTMLElement;
+        if (!childrenCollection[0]) {
+          return;
+        }
 
-      // horizontal PADDING / 2 to compensate padding-margin combo of child container
-      // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
-      const itemWidth = (childrenCollection[0] as HTMLElement).offsetWidth - padding / 2;
-      const scrollPoints = getScrollPoints({
-        gap,
-        padding,
-        clientWidth,
-        scrollWidth,
-        childElementCount,
-        itemWidth,
-      });
+        // horizontal PADDING / 2 to compensate padding-margin combo of child container
+        // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
+        const itemWidth = (childrenCollection[0] as HTMLElement).offsetWidth - padding / 2;
+        const scrollPoints = getScrollPoints({
+          gap,
+          padding,
+          clientWidth,
+          scrollWidth,
+          childElementCount,
+          itemWidth,
+        });
 
-      const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
-      if (index !== activeIndex && onSlideChange) {
-        onSlideChange();
-      }
-      setActiveIndex(index);
-      setIndexFraction(fraction);
-    };
+        const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
+        if (index !== activeIndex && onSlideChange) {
+          onSlideChange();
+        }
+        setActiveIndex(index);
+        setIndexFraction(fraction);
+      },
+      [gap, padding, activeIndex, onSlideChange],
+    );
 
     return (
       <div className={className}>

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 
 const DOT_STYLES = 'bg-primary-main opacity-30 w-1.5 h-1.5 min-w-1.5 min-h-1.5 rounded-full';
 const BASE_DOT_WIDTH = 6;
@@ -14,28 +15,35 @@ export interface SwipeListControlDotsProps {
 
 export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
   ({ children, activeIndex, indexFraction, showDots }) => {
-    const handleClick = (idx: number) => (e) => {
-      if (idx === activeIndex) {
-        return;
-      }
+    const handleClick = useCallback(
+      (idx: number) => (e) => {
+        if (idx === activeIndex) {
+          return;
+        }
 
-      const contentContainer = (e.currentTarget as HTMLElement).parentElement
-        ?.previousElementSibling;
+        const contentContainer = (e.currentTarget as HTMLElement).parentElement
+          ?.previousElementSibling;
 
-      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    };
+        contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      },
+      [activeIndex],
+    );
 
-    return showDots && children?.length ? (
+    return showDots && children ? (
       <div className="flex gap-2 mx-auto mt-5 w-fit">
-        {children?.map((_, idx: number) => (
-          <div
-            key={String(idx)}
-            onClick={handleClick(idx)}
-            className={`${DOT_STYLES}`}
-            style={getDotStyles(idx, activeIndex, indexFraction)}
-            aria-hidden
-          />
-        ))}
+        {children.length && children.map ? (
+          children.map((_, idx: number) => (
+            <div
+              key={String(idx)}
+              onClick={handleClick(idx)}
+              className={DOT_STYLES}
+              style={getDotStyles(idx, activeIndex, indexFraction)}
+              aria-hidden
+            />
+          ))
+        ) : (
+          <div className={DOT_STYLES} style={createDotStyle(1)} />
+        )}
       </div>
     ) : null;
   },
@@ -53,13 +61,10 @@ const getDotStyles = (
   const leftIndexMod = 1 - indexFraction;
   const rightIndexMod = indexFraction;
 
-  return currentIdx === activeIndex
-    ? {
-        opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * leftIndexMod}`,
-        width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * leftIndexMod}px`,
-      }
-    : {
-        opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * rightIndexMod}`,
-        width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * rightIndexMod}px`,
-      };
+  return createDotStyle(currentIdx === activeIndex ? leftIndexMod : rightIndexMod);
 };
+
+const createDotStyle = (indexModifier: number): Record<string, string> => ({
+  opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * indexModifier}`,
+  width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * indexModifier}px`,
+});

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlList.tsx

@@ -16,21 +16,21 @@ export interface SwipeListControlListProps extends SwipeContainer {
 export const SwipeListControlList = JSX<SwipeListControlListProps>(
   ({
     className = '',
-    children,
-    activeIndex,
-    onScroll,
+    activeIndex = -1,
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
+    children,
+    onScroll,
   }) => {
-    return (
+    return children ? (
       <div
         className={`overflow-auto flex horizontal-list no-scrollbar ${className}`}
         style={{ ...getContainerStyle(padding), gap: `${gap}px` }}
         role="list"
         onScroll={onScroll}
       >
-        {children?.length ? (
-          children?.map((child, idx) => (
+        {children.length && children.map ? (
+          children.map((child, idx) => (
             <SwipeListControlItem
               key={String(idx)}
               style={getContainerStyle(padding / 4)}
@@ -40,9 +40,11 @@ export const SwipeListControlList = JSX<SwipeListControlListProps>(
             </SwipeListControlItem>
           ))
         ) : (
-          <SwipeListControlItem>{children}</SwipeListControlItem>
+          <SwipeListControlItem style={getContainerStyle(padding / 4)} aria-current>
+            {children}
+          </SwipeListControlItem>
         )}
       </div>
-    );
+    ) : null;
   },
 );

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

@@ -7,9 +7,11 @@ export const TableArrowScrollControl = JSX<TableArrowScrollControlProps>(
     return isScrollAvailable ? (
       <div>
         {renderArrows({
-          handler: [onPrevClick, onNextClick],
-          isShown: [showPrevButton, showNextButton],
-          btnClass: ['top-[108px]', 'top-11'],
+          dec: onPrevClick,
+          inc: onNextClick,
+          canDec: showPrevButton,
+          canInc: showNextButton,
+          btnClass: ['top-[108px]', 'top-[44px]'],
           className: 'right-7',
           isDisabled: true,
         })}

package/mobile/src/ui-kit/TableArrowScrollControl/TableArrowScrollControlProps.ts

@@ -1,8 +1,9 @@
 export interface TableArrowScrollControlProps {
-  activeCardIndex: number;
+  activeIndex: number;
   onNextClick: () => void;
   onPrevClick: () => void;
   isScrollAvailable?: boolean;
   showNextButton: boolean;
   showPrevButton: boolean;
+  setActiveIndex: (index: number) => void;
 }