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

package/src/components/Carousel/Carousel.tsx

@@ -1,4 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -6,61 +8,48 @@ import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { CarouselContainer } from './CarouselContainer';
 import type { CarouselContent } from './CarouselContent';
 
-export interface CarouselProps extends CarouselContent, UniBlockProps {}
+export interface CarouselProps extends CarouselContent, UniBlockProps {
+  itemCount?: number;
+}
 
-export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
-  ({
-    cardFullViewCount = 1,
-    children,
-    cardWidth = '1007',
-    className = '',
-    isBlur = true,
-    isCyclic = false,
-    block,
-    ...rest
-  }) => {
-    const blurClasses = isBlur ? 'absolute top-0 bottom-0 w-[84px]' : '';
-    const { blocks: childBlocks } = block || {};
+const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
 
-    const childBlocksLength = childBlocks !== undefined ? childBlocks.length : 0;
+export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
+  ({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, ...rest }) => {
+    const { blocks: childBlocks } = rest.block || {};
+    const count = itemCount || childBlocks?.length || 0;
 
-    const isScrollAvailable = childBlocksLength > cardFullViewCount;
+    const containerRef = useRef<HTMLDivElement | null>(null);
 
     const [activeIndex, controls] = useCarouselControls({
-      itemsCount: childBlocksLength,
-      visibleItemCount: cardFullViewCount,
+      itemCount: count,
+      visibleItemCount,
       isCyclic,
+      container: containerRef.current,
     });
-    const { inc, dec, canDec, canInc } = controls;
+    const { isScrollAvailable } = controls;
 
     return (
-      <BlockWrapper
-        className={`box-border h-full relative font-sans flex flex-col justify-center overflow-hidden ${className}`}
-        {...rest}
-      >
+      <BlockWrapper className={`relative font-sans overflow-hidden ${className}`} {...rest}>
         <CarouselContainer
-          activeItem={activeIndex}
-          cardFullViewCount={cardFullViewCount}
-          cardWidth={cardWidth}
+          activeIndex={activeIndex}
+          itemCount={count}
+          visibleItemCount={visibleItemCount}
+          containerRef={containerRef}
         >
-          {children}
+          {renderChildren(rest)}
         </CarouselContainer>
-        {isScrollAvailable ? (
-          <div>
-            {renderArrows({
-              handler: [dec, inc],
-              isShown: [canDec, canInc],
-              btnClass: ['left-8', 'right-8'],
-              className: 'top-1/2 z-10',
-            })}
-          </div>
-        ) : null}
-        {isScrollAvailable ? (
+        {isScrollAvailable && isBlur ? (
           <div>
-            <div className={`${blurClasses} left-0 bg-opacity-from-white`} />
-            <div className={`${blurClasses} right-0 bg-opacity-to-white`} />
+            <div className={`${blurBaseStyle} left-0 bg-opacity-from-white`} />
+            <div className={`${blurBaseStyle} right-0 bg-opacity-to-white`} />
           </div>
         ) : null}
+        {renderArrows({
+          ...controls,
+          btnClass: ['left-8', 'right-8'],
+          className: 'top-1/2',
+        })}
       </BlockWrapper>
     );
   },

package/src/components/Carousel/CarouselContainer.tsx

@@ -1,24 +1,31 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { CardWidth } from './CarouselContent';
 
-export interface CarouselContainerProps {
-  activeItem: number;
-  cardFullViewCount: number;
-  cardWidth: CardWidth;
+interface CarouselContainerProps {
+  activeIndex: number;
+  itemCount: number;
+  visibleItemCount?: number;
+  containerRef?: { current: HTMLDivElement | null };
 }
 
+const childStyleMap = ['[&>*]:min-w-[100%]', '[&>*]:min-w-[50%]', '[&>*]:min-w-[33.33%]'];
+
 export const CarouselContainer = JSX<CarouselContainerProps>(
-  ({ children, activeItem, cardFullViewCount, cardWidth }) => {
-    const cardFullViewStyles =
-      cardFullViewCount === 1
-        ? `translateX(-${activeItem}00%)`
-        : `translateX(-${activeItem * Number(cardWidth)}px)`;
+  ({ activeIndex, itemCount, visibleItemCount, containerRef, children }) => {
+    const scrollWidth = containerRef?.current?.scrollWidth || 0;
+    const maxScrollLeft = scrollWidth - (containerRef?.current?.clientWidth || 0);
+
+    const translateX = visibleItemCount
+      ? `${-Math.round((100 * activeIndex) / visibleItemCount)}%`
+      : `${-Math.round(Math.min((scrollWidth * activeIndex) / (itemCount || 1), maxScrollLeft))}px`;
 
     return (
       <div
-        className="w-auto flex flex-1 duration-1000"
-        style={{ transform: `${cardFullViewStyles}` }}
+        className={`flex gap-1 duration-1000 ${
+          visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''
+        }`}
+        style={{ transform: `translateX(${translateX})` }}
         role="list"
+        ref={containerRef}
       >
         {children}
       </div>

package/src/components/Carousel/CarouselContent.ts

@@ -1,16 +1,12 @@
 /**
  * @title Карусель
  */
-
-/**
- * @title Ширина карточек
- * @enumNames [ "1007", "833", "350", "322" ]
- */
-export type CardWidth = '322' | '350' | '832' | '1007';
 export interface CarouselContent {
-  /** @title Количество видимых карточек */
-  cardFullViewCount?: number;
-  cardWidth?: CardWidth;
+  /**
+   * @title Количество видимых карточек
+   * @enumNames ["auto", "1", "2", "3"]
+   */
+  visibleItemCount?: 0 | 1 | 2 | 3;
   /** @title Добавление  блюра */
   isBlur?: boolean;
   /** @title Цикличность */

package/src/components/CarouselCard/CarouselCard.fixture.tsx

@@ -1,7 +1,7 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { CarouselCard } from './CarouselCard';
 import type { CarouselCardContent } from './CarouselCardContent';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 const button: ButtonProps = {
   text: 'Подробнее',
@@ -36,9 +36,14 @@ export default {
       <CarouselCard className="col-span-12" {...CARD} />
     </div>
   ),
-  mini: (
+  new: (
     <div className="container grid grid-cols-12">
-      <CarouselCard className="col-span-12" {...CARD_MINI} />
+      <CarouselCard className="col-span-12" {...CARD_NEW} />
+    </div>
+  ),
+  mini: (
+    <div className="container flex">
+      <CarouselCard {...CARD_MINI} />
     </div>
   ),
 };

package/src/components/CarouselCard/CarouselCard.tsx

@@ -5,45 +5,33 @@ import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Headline } from '../Headline/Headline';
 import type { CarouselCardContent } from './CarouselCardContent';
 
-export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {
-  version?: CarouselCardVersion;
-}
+export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
-const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-[100%] h-[100%]';
-
-const CARD_STYLE_MAP: Record<CarouselCardVersion, string> = {
-  normal: 'min-w-[100%] justify-center items-center my-7 col-span-12',
-  mini: 'justify-center items-center mx-4 my-9 col-span-4',
-};
+const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-full h-full';
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
-  normal: 'w-[1007px]',
-  mini: 'w-[350px]',
+  normal: `w-[${1007 + 48}px]`,
+  mini: `w-[${350 + 48}px]`,
 };
 
 export const CarouselCard = JSX<CarouselCardProps>(
-  ({ button, className = '', description, title, version = 'normal' }) => {
-    return (
-      <section className={`flex ${CARD_STYLE_MAP[version]}`}>
-        <div className={`relative ${CARD_WIDTH_MAP[version]}`}>
-          <div
-            className={`relative bg-white py-6 px-10 z-10
-              border border-solid border-green-light ${className}`}
-          >
-            <Headline
-              className="!p-0"
-              title={title}
-              description={description}
-              headlineVersion="M"
-              align="center"
-            />
-            {button ? renderButton({ button, buttonClassName: 'mt-6 w-[158px]' }) : null}
-          </div>
-          <div className={`top-9 right-12 bg-green-dark ${BLOCK_CLASSES}`} />
-          <div className={`top-6 right-8 bg-green ${BLOCK_CLASSES}`} />
-          <div className={`top-3 right-4 bg-green-light ${BLOCK_CLASSES}`} />
+  ({ className = '', button, description, title, version = 'normal' }) => (
+    <section className={`flex pb-9 pl-12 ${CARD_WIDTH_MAP[version]} ${className}`}>
+      <div className="relative w-full">
+        <div className={`${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark`} />
+        <div className={`${BLOCK_CLASSES} z-10 top-6 right-8 bg-green`} />
+        <div className={`${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light`} />
+        <div className="relative bg-white z-10 py-6 px-10 border border-solid border-green-light">
+          <Headline
+            className="!p-0"
+            title={title}
+            description={description}
+            headlineVersion="M"
+            align="center"
+          />
+          {button ? <div className="mt-6">{renderButton({ button })}</div> : null}
         </div>
-      </section>
-    );
-  },
+      </div>
+    </section>
+  ),
 );

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -2,11 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { sliceArray } from '../../utils/sliceArray';
 import { Carousel } from '../Carousel/Carousel';
+import { Headline } from '../Headline/Headline';
 import type { CarouselLinksContent } from './CarouselLinksContent';
 
 export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps {}
@@ -14,21 +13,21 @@ export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps
 const MAX_LINKS_COUNT = 12;
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
-  ({ additionalDescription, description, links, title, className = '', ...rest }) => {
+  ({ className = '', additionalDescription, description, links, title, ...rest }) => {
     return (
       <BlockWrapper
         className={`bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`}
         {...rest}
       >
         <div className="flex flex-col max-w-96 pr-9 text-white text-xl-light">
-          {title ? <Heading title={title} as="h1" headingType="h0" className="pb-0.5" /> : null}
-          {description ? (
-            <div className="pt-5">
-              <Paragraph size="text-xl" font="font-light">
-                {description}
-              </Paragraph>
-            </div>
-          ) : null}
+          <Headline
+            title={title}
+            as="h1"
+            description={description}
+            align="left"
+            className="p-0"
+            bgColorHeadline="secondary"
+          />
           {additionalDescription ? (
             <div className="pt-6">
               <Paragraph>{additionalDescription}</Paragraph>
@@ -42,26 +41,27 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
 );
 
 const renderLinks = (links: LinkProps[]) => {
-  const slicedLinks = sliceArray(links, MAX_LINKS_COUNT);
-
-  const slides = slicedLinks.map((slide) => (
-    <div className="w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start">
-      {slide.map((link, index) => (
-        <LinkButton className="m-1" key={String(index)} {...link} />
-      ))}
-    </div>
-  ));
+  const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
 
   return (
     <Carousel
       className="min-w-[832px] w-[832px]"
       isBlur={false}
-      cardFullViewCount={1}
-      cardWidth={'832'}
       isCyclic={true}
-      block={{ type: 'Carousel', blocks: slides }}
+      itemCount={itemCount}
     >
-      {slides}
+      {new Array(itemCount).fill(null).map((_, groupIndex) => (
+        <div
+          key={String(groupIndex)}
+          className="w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start"
+        >
+          {links
+            .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
+            .map((link, index) => (
+              <LinkButton key={String(index)} className="m-1" {...link} />
+            ))}
+        </div>
+      ))}
     </Carousel>
   );
 };

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -26,7 +26,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
     return (
       <BlockWrapper
-        className={`font-sans bg-white p-[50px] p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`}
+        className={`font-sans bg-white p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`}
         {...rest}
       >
         {isHighlighting ? renderHitIcon() : null}
@@ -70,8 +70,8 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
   </button>
 );
 
-const renderCardInfo = (cell: HeadlineCommonProps): VNode => (
-  <div className="py-5 border-b border-main-divider flex flex-col gap-1">
+const renderCardInfo = (cell: HeadlineCommonProps, i: number): VNode => (
+  <div key={String(i)} className="py-5 border-b border-main-divider flex flex-col gap-1">
     {cell?.title ? (
       <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
     ) : null}

package/src/components/Catalog/Catalog.fixture.tsx

@@ -1,6 +1,6 @@
 import type { Picture } from '../../model/Picture';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Catalog, CatalogProps } from './Catalog';
 

package/src/components/Catalog/Catalog.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -10,19 +10,15 @@ import type { CatalogContent } from './CatalogContent';
 export interface CatalogProps extends CatalogContent, UniBlockProps {}
 
 const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
-const CARD_FULL_VIEW_COUNT = 3;
+const CARD_VIEW_COUNT = 3;
 const CARD_SHIFT = 430;
 
 export const Catalog = JSX<CatalogProps>(
   ({ cards = [], className = '', title, description, ...rest }) => {
-    const [activeCardIndex, setActiveCardIndex] = useState(0);
-
-    const handleNextClick = useCallback(() => setActiveCardIndex((_) => _ + 1), []);
-    const handlePrevClick = useCallback(() => setActiveCardIndex((_) => _ - 1), []);
-
-    const isUseSlider = cards.length > CARD_FULL_VIEW_COUNT;
-    const showNextButton = isUseSlider && cards.length - activeCardIndex > CARD_FULL_VIEW_COUNT;
-    const showPrevButton = isUseSlider && activeCardIndex > 0;
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: cards?.length,
+      visibleItemCount: CARD_VIEW_COUNT,
+    });
 
     return (
       <BlockWrapper
@@ -39,14 +35,13 @@ export const Catalog = JSX<CatalogProps>(
         />
         <div
           className="flex duration-1000 gap-3.5 mt-8"
-          style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
+          style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
           role="list"
         >
           {cards?.length ? cards.map((card, i) => <CatalogCard key={String(i)} {...card} />) : null}
         </div>
         {renderArrows({
-          handler: [handlePrevClick, handleNextClick],
-          isShown: [showPrevButton, showNextButton],
+          ...controls,
           btnClass: ['left-8', 'right-8'],
           className: 'top-1/2 z-10 mt-6',
         })}

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { ComparisonTable } from './ComparisonTable';
 import type { Column } from './ComparisonTableContent';
 

package/src/components/ComparisonTable/ComparisonTable.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { ComparisonTable } from './ComparisonTable';
 import type { Column } from './ComparisonTableContent';
 
@@ -215,7 +215,7 @@ export default {
       />
     </div>
   ),
-  'with images and colored first column': (
+  'with images and colored column': (
     <div className="container grid grid-cols-12">
       <ComparisonTable
         className="col-span-12"

package/src/components/ComparisonTable/ComparisonTable.mobile.tsx

@@ -28,9 +28,9 @@ export const ComparisonTable = JSX<ComparisonTableProps>((props) => {
 });
 
 const TableInner = JSX<ComparisonTableProps>(
-  ({ columns, rowHeaders, isColoredFirstColumn, visibleRowLength, orientation, ...rest }) => {
+  ({ columns = [], rowHeaders, isColoredFirstColumn, visibleRowLength, orientation, ...rest }) => {
     const [columnsViewState, setColumnsViewState] = useState(
-      new Array<boolean>(columns?.length || 0).fill(!visibleRowLength),
+      new Array<boolean>(columns.length).fill(!visibleRowLength),
     );
 
     const handleToggleColumn = useCallback((colIndex: number) => {

package/src/components/ComparisonTable/ComparisonTableBody.tsx

@@ -14,7 +14,7 @@ interface ComparisonTableBodyProps {
 }
 
 export const ComparisonTableBody = JSX<ComparisonTableBodyProps>(
-  ({ columns, rowHeaders, isShowAllRow, visibleRowLength, isColoredFirstColumn }) => {
+  ({ columns = [], rowHeaders, isShowAllRow, visibleRowLength, isColoredFirstColumn }) => {
     const colHeaders = columns?.map(({ header }) => header || {});
     const colData = columns?.map(({ data }) => data) || [];
     const rowData = rowHeaders
@@ -24,26 +24,25 @@ export const ComparisonTableBody = JSX<ComparisonTableBodyProps>(
       }))
       .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
 
-    const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL;
-
     const [activeIndex, controls] = useCarouselControls({
-      itemsCount: colData.length,
+      itemCount: columns.length,
       visibleItemCount: COLS_LENGTH_FOR_SCROLL,
     });
 
+    const { isScrollAvailable } = controls;
+
     return (
       <div>
         <div role="table">
           {colHeaders?.length ? (
-            <ComparisonTableColumnHeaders colHeaders={colHeaders} activeCardIndex={activeIndex} />
+            <ComparisonTableColumnHeaders colHeaders={colHeaders} activeIndex={activeIndex} />
           ) : null}
           {rowData?.length ? (
             <ComparisonTableRows
               rowData={rowData}
               isColoredFirstColumn={isColoredFirstColumn}
-              activeCardIndex={activeIndex}
+              activeIndex={activeIndex}
               controls={controls}
-              isScrollAvailable={isScrollAvailable}
             />
           ) : null}
         </div>

package/src/components/ComparisonTable/ComparisonTableColumnHeaders.tsx

@@ -7,14 +7,14 @@ import { TableRowContainer } from './TableRowContainer';
 
 interface ComparisonTableColumnHeadersProps {
   colHeaders: ColumnHeader[];
-  activeCardIndex: number;
+  activeIndex: number;
 }
 
 export const ComparisonTableColumnHeaders = JSX<ComparisonTableColumnHeadersProps>(
-  ({ colHeaders, activeCardIndex }) => (
+  ({ colHeaders, activeIndex }) => (
     <TableRowContainer>
       <div className={FIRST_CELL_CLASSES} role="columnheader" />
-      <TableCarouselContainer activeCardIndex={activeCardIndex} columnWidth={COLUMN_WIDTH}>
+      <TableCarouselContainer activeIndex={activeIndex} columnWidth={COLUMN_WIDTH}>
         {colHeaders.map((header, i) => (
           <HeaderCell key={String(i)} {...header} />
         ))}

package/src/components/ComparisonTable/ComparisonTableRows.tsx

@@ -7,15 +7,14 @@ import { TableRow } from './TableRow';
 
 type ComparisonTableRowsProps = {
   rowData: { header: TitleProps; data: CellData[][] }[];
-  activeCardIndex: number;
+  activeIndex: number;
   isColoredFirstColumn: boolean;
   controls: CarouselControls;
-  isScrollAvailable: boolean;
 };
 
 export const ComparisonTableRows = JSX<ComparisonTableRowsProps>(
-  ({ rowData, isColoredFirstColumn, activeCardIndex, controls, isScrollAvailable }) => {
-    const { inc, dec, canDec, canInc } = controls;
+  ({ rowData, isColoredFirstColumn, activeIndex, controls }) => {
+    const { isScrollAvailable } = controls;
 
     return (
       <div className="relative">
@@ -25,21 +24,18 @@ export const ComparisonTableRows = JSX<ComparisonTableRowsProps>(
             row={row}
             isFirstRow={i === 0}
             isLastRow={i + 1 === length}
-            activeCardIndex={activeCardIndex}
+            activeIndex={activeIndex}
             isColoredFirstColumn={isColoredFirstColumn}
           />
         ))}
-        {isScrollAvailable ? (
-          <div>
-            {renderArrows({
-              handler: [inc, dec],
-              isShown: [canDec, canInc],
-              btnClass: ['top-[108px]', 'top-11'],
+        {isScrollAvailable
+          ? renderArrows({
+              ...controls,
+              btnClass: ['top-[108px]', 'top-[44px]'],
               className: 'right-7',
               isDisabled: true,
-            })}
-          </div>
-        ) : null}
+            })
+          : null}
       </div>
     );
   },

package/src/components/ComparisonTable/TableCarouselContainer.tsx

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

package/src/components/ComparisonTable/TableRow.tsx

@@ -12,7 +12,7 @@ export interface Row {
 export interface TableRowProps {
   className?: string;
   row: Row;
-  activeCardIndex: number;
+  activeIndex: number;
   isColoredFirstColumn: boolean;
   isFirstRow: boolean;
   isLastRow: boolean;
@@ -24,11 +24,11 @@ const titleStyle = (isLastRow = false) =>
   }`;
 
 export const TableRow = JSX<TableRowProps>(
-  ({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (
+  ({ row: { header, data }, activeIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (
     <TableRowContainer>
       {header?.title ? <div className={titleStyle(isLastRow)}>{header.title}</div> : null}
       {data?.length ? (
-        <TableCarouselContainer activeCardIndex={activeCardIndex} columnWidth={COLUMN_WIDTH}>
+        <TableCarouselContainer activeIndex={activeIndex} columnWidth={COLUMN_WIDTH}>
           {data.map((cell, i) => (
             <TableCell
               key={String(i)}

package/src/components/ComparisonTable/constants.ts

@@ -2,5 +2,5 @@ export const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradi
 export const BORDER_CLASSES = 'border-main-stroke border-solid border';
 export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
 export const FIRST_CELL_CLASSES = 'w-[200px] mr-6';
-export const COLS_LENGTH_FOR_SCROLL = 2;
+export const COLS_LENGTH_FOR_SCROLL = 3;
 export const COLUMN_WIDTH = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px

package/src/components/ContactsBlock/ContactsBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { ContactsBlock } from './ContactsBlock';