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

package/mobile/src/components/Footer/HorizontalNavigation.tsx

@@ -13,7 +13,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
         {title}
       </Text>
       {links?.length ? (
-        <div className="flex flex-col gap-lg mt-lg">
+        <div className="flex flex-col gap-lg">
           {links.map((_, i) => (
             <HorizontalNavigationLink
               className="text-l font-light"

package/mobile/src/components/Footer/MediaButton.tsx

@@ -29,7 +29,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ buttonSize = 'default', icon
         'hover:bg-primary-main hover:text-black',
         'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover',
         'group-data-gray:border-green',
-        'py-m group/media flex items-center justify-center box-border',
+        'p-m min-h-14 group/media flex items-center justify-center box-border',
         buttonSizeStyle[buttonSize],
       )}
       aria-label={label}

package/mobile/src/components/Header/DropdownMenu.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
 import { useLink } from '../../hooks/useLink';
-import { useOutsideClick } from '../../hooks/useOutsideClick';
-import { style } from '../../utils/style';
 import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
 
 interface DropdownMenuProps {
   className?: string;

package/mobile/src/components/Header/HeaderChatBotButton.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useBool } from '../../hooks/useBool';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import type { IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';

package/mobile/src/components/MobileAppTile/MobileAppTile.example.json

@@ -8,7 +8,6 @@
         "height": 345
       }
     },
-    "alignTitle": "left",
     "qr": null,
     "buttons": [
       {

package/mobile/src/components/MobileAppTile/MobileAppTile.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -17,12 +16,13 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
   ({
     className,
     padding,
-    alignTitle = 'left',
+    align = 'text-left',
     buttons = [],
     description,
     headingType = 'h4',
     image,
     items,
+    listItemSize,
     qr,
     title = 'Мобильное приложение',
     version = 'primary',
@@ -46,7 +46,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               <Heading
                 headingType={headingType}
                 title={title}
-                className={style('whitespace-pre-wrap', AlignText[alignTitle])}
+                className={style('whitespace-pre-wrap', align)}
               />
             ) : null
           }
@@ -60,7 +60,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
                 <Img className="w-fit" image={qr} />
               </div>
             ) : null}
-            {renderList(items)}
+            {renderList(items, listItemSize)}
             {image?.src ? <Img className="lg:hidden" image={image} /> : null}
           </div>
         </BaseTile>

package/mobile/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,4 +1,3 @@
-import type { AlignType } from '../../model/AlignType';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
@@ -16,11 +15,7 @@ export type MobileAppTileContent = UniBlockContent &
   ButtonsSectionContent &
   ListContent &
   ImageContent & {
-    /** @title Выравнивание заголовка */
-    alignTitle?: AlignType;
     // TODO: description для мобильной версии
     /** @title QR-код */
     qr?: Picture;
-    /** @title Ссылка */
-    href?: string; // TODO: для мобильной версии
   };

package/mobile/src/components/MobileAppTile/renderDescription.tsx

@@ -3,7 +3,7 @@ import { Text } from '../../ui-kit/Text/Text';
 export const renderDescription = (description?: string) =>
   description ? (
     <div className="mb-lg pt-3xs">
-      <Text size="text-xl" font-weight="light">
+      <Text size="text-xl" font-weight="font-light">
         {description}
       </Text>
     </div>

package/mobile/src/components/MobileAppTile/renderList.tsx

@@ -1,8 +1,9 @@
 import { List } from '../../ui-kit/List/List';
+import type { ListItemSize } from '../../ui-kit/List/ListContent';
 
-export const renderList = (items?: string[]) => {
+export const renderList = (items?: string[], listItemSize?: ListItemSize) => {
   return items?.length ? (
-    <List items={items} className="text-l font-light" />
+    <List items={items} listItemSize={listItemSize} className="text-l font-light" />
   ) : (
     <span className="text-m font-light text-secondary-text">
       Наведите камеру телефона на QR-код и скачайте приложение

package/mobile/src/components/MortgageFiltration/MortgageFiltration.example.json

@@ -53,7 +53,9 @@
       }
     },
     "hotFilters": [
-      { "text": "Все программы" },
+      {
+        "text": "Все программы"
+      },
       {
         "text": "Льготные программы",
         "filter": {
@@ -74,7 +76,12 @@
       },
       {
         "text": "Готовое жилье",
-        "filter": { "stage": ["built"], "categories": [], "extraOptions": [], "propertyType": [] }
+        "filter": {
+          "stage": ["built"],
+          "categories": [],
+          "extraOptions": [],
+          "propertyType": []
+        }
       },
       {
         "text": "Загородная недвижимость",

package/mobile/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -1,13 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
-import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BaseFiltrationInner } from '../../ui-kit/BaseFiltration/BaseFiltrationInner';
 import { renderFiltrationForm } from '../../ui-kit/BaseFiltration/renderFiltrationForm';
 import { useHotFilters } from '../../ui-kit/BaseFiltration/useHotFilters';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { TabsControl } from '../../ui-kit/TabsControl/TabsControl';
 import { style } from '../../utils/style';
+import { getBlocksToRender } from '../../ui-kit/BaseFiltration/getBlocksToRender';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import type {
   MortgageFiltrationContent,
   MortgageFiltrationSchema,
@@ -29,6 +30,8 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
     const [filtrationState, { field, reset, update: replaceFiltrationState }] =
       useForm(initialFiltrationState);
 
+    const blocksToRender = getBlocksToRender(rest.block?.blocks, filtrationState)();
+
     const handleFiltrationStateChange = useCallback(
       (_: MortgageFiltrationState = initialFiltrationState) => replaceFiltrationState(_),
       [],
@@ -50,7 +53,7 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
       >
         <TabsControl {...tabsControlProps} />
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}
-        <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
+        <BaseFiltrationInner blocksToRender={blocksToRender} {...rest} />
       </BlockWrapper>
     );
   },

package/mobile/src/components/RollupItem/PrimaryFoldButton.tsx

@@ -0,0 +1,44 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import type { IconName } from '../../icons/IconName';
+import type { Picture } from '../../model/Picture';
+import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
+import { renderRoundedIcon } from './renderRoundedIcon';
+import { Text } from '../../ui-kit/Text/Text';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { rollupIconVersion } from './rollupIconVersion';
+import { TextWithIcon } from '../../ui-kit/TextWithIcon/TextWithIcon';
+
+interface PrimaryFoldButtonProps {
+  label?: string;
+  labelIcon?: Picture;
+  labelIconBgVersion?: IconBgVersion;
+  icon?: IconName;
+  onToggle?: () => void;
+}
+
+export const PrimaryFoldButton = JSX<PrimaryFoldButtonProps>(
+  ({ label, labelIconBgVersion, icon, onToggle, labelIcon }) => (
+    <TextWithIcon
+      tag="button"
+      className={style(
+        'border-none bg-transparent items-center group/button',
+        labelIcon?.icon ? 'py-xs' : 'py-lg',
+      )}
+      onClick={onToggle}
+      textNode={
+        <div className="flex items-center text-start group-hover/button:text-primary-main gap-s">
+          {renderRoundedIcon(labelIcon, labelIconBgVersion)}
+          {label ? (
+            <Text size="text-h6" font="font-normal">
+              {label}
+            </Text>
+          ) : null}
+        </div>
+      }
+      iconNode={
+        icon ? <Icon name={icon} iconVersion={rollupIconVersion} width="24" height="24" /> : null
+      }
+    />
+  ),
+);

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -7,17 +7,14 @@ import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName, IconBgVersion, IconProps } from '../../ui-kit/Icon/IconProps';
-import { Text } from '../../ui-kit/Text/Text';
+import type { IconBgVersion, IconProps } from '../../ui-kit/Icon/IconProps';
 import { style } from '../../utils/style';
 import { foldableSectionStyles } from './foldableSectionStyles';
 import { getIconName } from './getIconName';
-import { rollupIconVersion } from './rollupIconVersion';
 import type { RollupItemContent } from './RollupItemContent';
 import { rollupItemStyles } from './rollupItemStyles';
 import type { Picture } from '../../model/Picture';
-import { renderRoundedIcon } from './renderRoundedIcon';
+import { PrimaryFoldButton } from './PrimaryFoldButton';
 
 interface RollupItemProps extends RollupItemContent, UniBlockProps {
   labelIcon?: Picture;
@@ -92,15 +89,16 @@ const renderFoldButton = ({
   onToggle,
 }: FoldButtonProps) => {
   const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
+  const icon = getIconName(isUnfolded);
 
   return version === 'primary' ? (
-    renderPrimaryFoldButton({
-      label,
-      labelIcon,
-      labelIconBgVersion,
-      icon: getIconName(isUnfolded),
-      onToggle,
-    })
+    <PrimaryFoldButton
+      label={label}
+      labelIcon={labelIcon}
+      labelIconBgVersion={labelIconBgVersion}
+      icon={icon}
+      onToggle={onToggle}
+    />
   ) : (
     <DefaultFoldButton
       label={label}
@@ -109,39 +107,3 @@ const renderFoldButton = ({
     />
   );
 };
-
-interface PrimaryFoldButtonProps {
-  label?: string;
-  labelIcon?: Picture;
-  labelIconBgVersion?: IconBgVersion;
-  icon?: IconName;
-  onToggle?: () => void;
-}
-
-const renderPrimaryFoldButton = ({
-  label,
-  labelIconBgVersion,
-  icon,
-  onToggle,
-  labelIcon,
-}: PrimaryFoldButtonProps) => {
-  return (
-    <button
-      className={style(
-        'border-none bg-transparent flex justify-between items-center w-full group/button',
-        labelIcon?.icon ? 'py-xs' : 'py-lg',
-      )}
-      onClick={onToggle}
-    >
-      <div className="flex items-center text-start group-hover/button:text-primary-main gap-s">
-        {renderRoundedIcon(labelIcon, labelIconBgVersion)}
-        {label ? (
-          <Text size="text-h6" font="font-normal">
-            {label}
-          </Text>
-        ) : null}
-      </div>
-      {icon ? <Icon name={icon} iconVersion={rollupIconVersion} width="24" height="24" /> : null}
-    </button>
-  );
-};

package/mobile/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -21,7 +21,7 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
     selectedBranch,
     onSelectedBranch,
   }) => (
-    <div className="flex flex-col sm:flex-row gap-m order-1">
+    <div className="flex flex-col @xl:flex-row gap-m order-1">
       <div className="flex-1 min-w-0">
         <WrapperSelect
           data={regions}

package/mobile/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -21,7 +21,7 @@ export const SafeBoxCases = JSX<SafeBoxCasesProps>(
     onSelectedBoxSize,
   }) => {
     return (
-      <div className="flex flex-col sm:flex-row gap-m order-1">
+      <div className="flex flex-col @xl:flex-row gap-m order-1">
         <div className="flex-1 min-w-0">
           <WrapperSelect
             data={caseVolumes}

package/mobile/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -33,7 +33,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
     onClick,
   }) => {
     return (
-      <div className="contents sm:block flex-1 space-y-xl">
+      <div className="contents @xl:block flex-1 space-y-xl">
         <RegionsAndBranches
           regions={regions}
           selectedRegion={selectedRegion}
@@ -56,7 +56,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
             Тип договора
           </Text>
         </div>
-        <div className="contents sm:flex justify-between items-center gap-m">
+        <div className="contents @md:flex justify-between items-center gap-m">
           <RadioButtons />
           <Button text="Офисы на карте" version="primary" onClick={onClick} className="order-6" />
         </div>

package/mobile/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -37,7 +37,7 @@ export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) =>
   const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
 
   return (
-    <div className="flex flex-col sm:flex-row gap-4xl align-top">
+    <div className="flex flex-col @4xl:flex-row gap-4xl align-top">
       <SafeDepositRentalFields
         {...data}
         regions={regions}

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -12,17 +12,17 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
   const imageDescription = 'На рисунке изображена пачка листов\nформата А4';
 
   return (
-    <div className="contents sm:flex flex-col justify-between order-2">
-      <div className="flex flex-col sm:flex-row gap-x-6xl gap-y-2xl order-5 sm:order-none py-2xl sm:py-0 border-t border-main-divider sm:border-none">
+    <div className="contents @xl:flex flex-col justify-between gap-xl order-2">
+      <div className="flex flex-col @xl:flex-row gap-x-6xl gap-y-2xl order-5 @xl:order-none py-2xl @xl:py-0 border-t border-main-divider @xl:border-none">
         {renderTotal('Аренда за', days)}
         {renderTotal('Цена', price + ' ₽')}
       </div>
-      <span className="sm:hidden order-3 mb-xs text-s font-light text-secondary-text">
+      <span className="@xl:hidden order-3 mb-xs text-s font-light text-secondary-text">
         {imageDescription}
       </span>
-      <div className="flex flex-col items-center gap-s order-3 sm:order-none mb-xl sm:mb-0 bg-primary-main py-s sm:p-3xl text-center">
-        <Img image={{ icon: 'PackA4Icon' }} className="sm:h-60" />
-        <span className="hidden sm:inline text-s font-light text-white opacity-80 whitespace-pre-line">
+      <div className="flex flex-col items-center gap-s order-3 @xl:order-none mb-xl @xl:mb-0 bg-primary-main py-s @xl:p-3xl text-center">
+        <Img image={{ icon: 'PackA4Icon' }} className="@xl:h-60" />
+        <span className="hidden @xl:inline text-s font-light text-white opacity-80 whitespace-pre-line">
           {imageDescription}
         </span>
       </div>
@@ -32,9 +32,9 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
 
 const renderTotal = (label: string, total: string | number) => {
   return (
-    <div className="flex justify-between items-center gap-y-xs sm:flex-col sm:items-start">
+    <div className="flex justify-between items-center gap-y-xs @xl:flex-col @xl:items-start">
       <div className="text-l font-light text-secondary-text">{label}</div>
-      <span className="text-l sm:text-h3 text-primary-text">{total}</span>
+      <span className="text-l @xl:text-h3 text-primary-text">{total}</span>
     </div>
   );
 };

package/mobile/src/components/SafeDepositRental/WrapperSelect.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Option, Select } from '../../ui-kit/Select/Select';
+import { Option } from '../../ui-kit/Select/Option';
+import { Select } from '../../ui-kit/Select/Select';
 import { Currency } from '../ExchangeRateTile/CurrencyProps';
 
 interface WrapperSelectProps {

package/mobile/src/components/StickyBottomMenu/RenderMenuItems.tsx

@@ -13,7 +13,10 @@ export const RenderMenuItems = JSX<RenderMenuItems>(({ menuItems, onClick }) =>
   const [activeIndex] = useActiveRoute(menuItems);
 
   return (
-    <BlockWrapper className="sticky bottom-0 left-0 right-0 bg-transparent z-[100]" padding="p-0">
+    <BlockWrapper
+      className="fixed bottom-0 left-0 right-0 my-0 mx-auto w-full bg-transparent z-[100]"
+      padding="p-0"
+    >
       <div className="ml-auto container bg-white flex justify-center shadow-blue-gray">
         {menuItems.map((_, i) => (
           <RenderItem key={String(i)} isActive={i === activeIndex} item={_} onClick={onClick} />

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

@@ -2,44 +2,77 @@ import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import {
+  type InnerTableButtonProps,
+  TableInnerButton,
+} from '../../ui-kit/InnerTable/InnerTableButton';
+import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
 import type { LabelDescriptionCell } from './TariffsTableContent';
 import type { ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
+import { Text } from '../../ui-kit/Text/Text';
 
 export type EmbeddableCellDataType =
-  | ButtonContent
   | LabelDescriptionCell
+  | ButtonContent
   | ImageContent
-  | ListProps;
+  | ListProps
+  | InnerTableButtonProps;
+
+interface TableCellDataProps extends InnerTableButtonProps {
+  isVisible?: boolean;
+  displayTable: (props: TariffsTableInnerContent) => void;
+}
 
 const renderButtonsCellData = ({ buttons }: ButtonsSectionContent) =>
   renderButtonsSection(buttons, {
-    className: 'mt-s',
-    buttonClassName: 'w-12 h-12',
+    buttonClassName: 'basis-0',
   });
 
 const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => (
-  <div>
-    {label ? <div className="mb-xs">{label}</div> : null}
-    {description ? <div className="text-s text-secondary-text">{description}</div> : null}
+  <div className="space-y-2xs">
+    {label ? <div>{label}</div> : null}
+    {description ? (
+      <div>
+        <Text size="text-s" color="text-secondary-text">
+          {description}
+        </Text>
+      </div>
+    ) : null}
   </div>
 );
 
-const renderImgCellData = ({ image }: ImageContent) =>
-  image?.src ? <Img image={image} className="m-0" imageClassName="m-0" /> : null;
+const renderImgCellData = ({ image }: ImageContent) => (image?.src ? <Img image={image} /> : null);
 
 const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
   <List
-    className="flex flex-col justify-between items-start text-m pl-xs text-base"
+    className="flex flex-col justify-between items-start text-h6"
     isDotted={isDotted ?? true}
     {...rest}
   />
 );
 
+const renderInnerTableCellData = ({
+  isVisible,
+  displayTable,
+  dataUrl,
+  pdfUrl,
+  isOpen,
+}: TableCellDataProps) =>
+  isVisible ? (
+    <TableInnerButton
+      isOpen={isOpen}
+      onClick={() => {
+        displayTable({ dataUrl, pdfUrl });
+      }}
+    />
+  ) : null;
+
 export const EmbeddableCellData = {
   Buttons: renderButtonsCellData,
   Img: renderImgCellData,
   List: renderListCellData,
   LabelDescription: renderLabelDescriptionCellData,
+  Table: renderInnerTableCellData,
 };

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

@@ -2,7 +2,6 @@
   "content": {
     "title": "Заголовок",
     "description": "Описание",
-    "orientation": "vertical",
     "rowHeaders": [
       {
         "title": "Параметр 1",

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

@@ -1,56 +1,75 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import type {
-  CellDef,
-  TariffsTableColumn,
-  TariffsTableContent,
-  TariffsTableRowHeader,
-} from './TariffsTableContent';
-import { TariffsTableHorizontal } from './TariffsTableHorizontal';
-import { TariffsTableVertical } from './TariffsTableVertical';
+import type { TariffsTableContent } from './TariffsTableContent';
+import { TariffsTableRow } from './TariffsTableRow';
+import { COLS_LENGTH_FOR_SCROLL } from './constants';
+import { TariffsTableWrapper } from './TariffsTableWrapper';
+import { headlineAlign } from './headlineAlign';
 
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
 export const TariffsTable = JSX<TariffsTableProps>(
   ({
-    className,
+    className = '',
     title,
     description,
-    tariffsColumns: columns,
     rowHeaders,
-    orientation = 'vertical',
+    tariffsColumns: columns,
+    hiddenRowsNum = 0,
     ...rest
   }) => {
-    const colData = getColData(columns);
-    const tiles = getTiles(rowHeaders, colData);
+    const colData = columns?.map(({ data }) => data) || [];
+    const rowData = rowHeaders?.map((header, i) => ({
+      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} />
+    ));
+    const [visibleRows, hiddenRows] =
+      hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
 
     return (
-      <section
-        className={`p-6xl space-3xl bg-white font-sans text-primary-text overflow-x-hidden ${className}`}
+      <BlockWrapper
+        className={style('overflow-hidden relative space-y-0 @4xl:space-y-xl', className)}
+        defaultPadding="p-6xl"
+        {...rest}
       >
         <Headline
           title={title}
           description={description}
           headlineVersion="M"
-          align="text-left"
           isEmbedded={true}
+          align={headlineAlign}
         />
-        {orientation === 'vertical' ? (
-          <TariffsTableVertical tiles={tiles} {...rest} />
-        ) : (
-          <TariffsTableHorizontal tiles={tiles} {...rest} />
-        )}
-      </section>
+        <div className="space-y-m">
+          {hiddenRowsNum > 0 ? (
+            <Foldable
+              renderFoldableSection={({ isUnfolded }) => (
+                <TariffsTableWrapper controls={controls}>
+                  {visibleRows}
+                  <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+                </TariffsTableWrapper>
+              )}
+              renderFoldButton={renderDefaultFoldButton}
+            />
+          ) : (
+            <TariffsTableWrapper controls={controls}>{rows}</TariffsTableWrapper>
+          )}
+        </div>
+      </BlockWrapper>
     );
   },
 );
-
-const getColData = (columns: TariffsTableColumn[] | undefined) =>
-  columns?.[0]?.data ? columns[0].data : [];
-
-const getTiles = (rowHeaders: TariffsTableRowHeader[] | undefined, colData: CellDef[][]) =>
-  rowHeaders?.map((header, i) => ({
-    header,
-    data: colData?.[i] || [{}],
-  }));

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

@@ -29,10 +29,7 @@ export const TariffsTableCell = JSX<TariffsTableCellProps>(
     setOpenTableInnerIdx,
   }) => {
     return (
-      <div
-        className="w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0"
-        role="cell"
-      >
+      <div className="w-80 flex-grow flex flex-col gap-m @4xl:gap-lg" role="cell">
         {cells?.length
           ? cells.map(
               renderCellInner({