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

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

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+import { isEmpty } from '../../utils/isEmpty';
+
+const isSingularFieldMatch =
+  <P extends Partial<Record<string, any>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    isEmpty(pattern[key]) || isEmpty(target[key]) || pattern[key] === target[key];
+
+const isMultipleFieldMatch =
+  <P extends Partial<Record<string, any[]>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    isEmpty(pattern[key]) ||
+    isEmpty(target[key]) ||
+    pattern[key]?.some((_) => target[key]?.includes(_));
+
+const isNumberFieldMatch =
+  <P extends Partial<Record<string, number>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    isEmpty(pattern[key]) ||
+    isEmpty(target[key]) ||
+    naturalNumber(pattern[key]) <= naturalNumber(target[key]);
+
+const isMultipleNumberFieldMatch =
+  <P extends Partial<Record<string, any>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    isEmpty(pattern[key]) || isEmpty(target[key]) || target[key]?.includes(pattern[key]);
+
+const isValueInRange =
+  <P extends Partial<Record<string, any>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    isEmpty(pattern[key]) ||
+    isEmpty(target[key]) ||
+    (naturalNumber(pattern[key]?.min) >= naturalNumber(target[key]?.min) &&
+      naturalNumber(pattern[key]?.min) <= naturalNumber(target[key]?.max));
+
+export const shouldRenderBlock = (pattern: Record<string, any>, target: Record<string, any>) =>
+  Object.entries(pattern)
+    .map(([key, subPattern]) => {
+      if (typeof subPattern === 'number') {
+        return Array.isArray(target[key])
+          ? isMultipleNumberFieldMatch(key, pattern)
+          : isNumberFieldMatch(key, pattern);
+      }
+
+      if (typeof subPattern === 'object' && 'min' in subPattern && 'max' in subPattern) {
+        return isValueInRange(key, pattern);
+      }
+
+      return Array.isArray(subPattern)
+        ? isMultipleFieldMatch(key, pattern)
+        : isSingularFieldMatch(key, pattern);
+    })
+    .every((predicate) => predicate(target));
+
+const naturalNumber = (n: any) => Number(n || 0);

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

@@ -10,6 +10,8 @@ import { List } from '../List/List';
 import { RichText } from '../RichText/RichText';
 import { Tags } from '../Tags/Tags';
 import type { BaseProductTileContent } from './BaseProductTileContent';
+import type { HeadlineVersion } from '../../model/HeadlineType';
+import type { TextAlign } from '../Text/TextProps';
 
 interface BaseProductTileProps extends UniBlockProps, BaseProductTileContent {}
 
@@ -42,15 +44,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     children,
   }) => {
     const img = image?.src ? <Img image={image} /> : null;
-    const headline = (
-      <Headline
-        title={title}
-        description={description}
-        headlineVersion={headlineVersion}
-        align={align}
-        isEmbedded={true}
-      />
-    );
+    const headline = renderHeadline({ title, description, headlineVersion, align });
     const filteredBenefits = benefits?.filter(
       (_) => _?.type === 'rte' || 'label' in _ || 'description' in _,
     );
@@ -66,7 +60,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
         isImageAlwaysOnRight={isImageAlwaysOnRight}
         buttons={renderButtonsSection(buttons)}
       >
-        <div className="flex flex-col gap-xl">
+        <div className="flex flex-col sm:gap-xl gap-4xl">
           {filteredBenefits?.length ? (
             <BenefitsList
               benefitsVersion={benefitsVersion}
@@ -90,3 +84,21 @@ const leftOrRightImage = (img: VNode, directionRight: boolean) =>
   directionRight ? { rightImage: img } : { leftImage: img };
 
 const renderTags = (tags: string[]) => (tags?.length ? <Tags tags={tags} /> : null);
+
+interface RenderHeadline {
+  title?: string;
+  description?: string;
+  headlineVersion?: HeadlineVersion;
+  align?: TextAlign;
+}
+
+const renderHeadline = ({ title, description, headlineVersion, align }: RenderHeadline) =>
+  title || description ? (
+    <Headline
+      title={title}
+      description={description}
+      headlineVersion={headlineVersion}
+      align={align}
+      isEmbedded={true}
+    />
+  ) : null;

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

@@ -16,9 +16,9 @@ interface BaseTileProps extends UniBlockProps {
 }
 
 const imageAlignmentMap: Record<Align, string> = {
-  start: '@lg:self-start',
-  center: '@lg:self-center',
-  end: '@lg:self-end',
+  start: '@xl:self-start',
+  center: '@xl:self-center',
+  end: '@xl:self-end',
 };
 
 export const BaseTile = JSX<BaseTileProps>(
@@ -47,7 +47,7 @@ export const BaseTile = JSX<BaseTileProps>(
       <div
         className={style(
           'grow relative flex justify-around @lg:justify-between items-stretch gap-3xl',
-          isImageAlwaysOnRight ? 'flex-row' : 'flex-col @lg:flex-row',
+          isImageAlwaysOnRight ? 'flex-row' : 'flex-col-reverse @lg:flex-row',
         )}
       >
         {renderImageContainer(leftImage, { imageAlign })}
@@ -67,7 +67,7 @@ export const BaseTile = JSX<BaseTileProps>(
           {buttons}
         </div>
         {renderImageContainer(rightImage, {
-          className: isImageAlwaysOnRight ? '' : '-order-1 @xl:order-1',
+          className: isImageAlwaysOnRight ? '' : '@xl:order-1',
           imageAlign,
         })}
       </div>

package/mobile/src/ui-kit/BenefitItem/renderBenefitIcon.tsx

@@ -10,7 +10,7 @@ export const renderBenefitIcon = (
   icon ? (
     <div
       className={style(
-        'w-12 h-12 min-w-12 box-border flex items-center justify-center rounded-icon',
+        'sm:w-12 sm:h-12 sm:min-w-12 w-11 h-11 min-w-11 box-border flex items-center justify-center rounded-icon',
         benefitsVersion === 'normal'
           ? 'bg-secondary-light text-primary-main'
           : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black',

package/mobile/src/ui-kit/BenefitItem/renderBenefitText.tsx

@@ -3,12 +3,20 @@ import type { ComplexBenefitContent } from './BenefitItemContent';
 import { renderBenefitDescription } from './renderBenefitDescription';
 import { renderBenefitLabel } from './renderBenefitLabel';
 
-export const renderBenefitText = (_: ComplexBenefitContent, i?: number) =>
+export type BenefitTextProps = ComplexBenefitContent & {
+  descriptionClassName?: string;
+};
+
+export const renderBenefitText = (_: BenefitTextProps, i?: number) =>
   _.type === 'rte' && '__html' in _ && _.__html ? (
     <RichText key={`rte-${i}`} {..._} />
   ) : (
     [
       'label' in _ ? renderBenefitLabel(_.label, i) : null,
-      'description' in _ ? renderBenefitDescription(_.description, i) : null,
+      'description' in _ ? (
+        <span key={String(i)} className={_.descriptionClassName}>
+          {renderBenefitDescription(_.description, i)}
+        </span>
+      ) : null,
     ]
   );

package/mobile/src/ui-kit/BenefitsList/BenefitsListProps.ts

@@ -2,4 +2,5 @@ import type { BenefitsListContent } from './BenefitsListContent';
 
 export interface BenefitsListProps extends BenefitsListContent {
   className?: string;
+  descriptionClassName?: string;
 }

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

@@ -18,7 +18,7 @@ export const renderButtonsSection = (
     <div
       className={style(
         'flex',
-        isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-m',
+        isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-lg sm:gap-m',
         className,
       )}
     >
@@ -54,14 +54,11 @@ const getIconVersion = (icon: Picture | undefined, version = 'secondary') => {
   return icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
 };
 
-const renderButtonIcon = (icon: Picture) => {
-  console.log(icon);
-
-  return icon?.icon || icon?.src ? (
+const renderButtonIcon = (icon: Picture) =>
+  icon?.icon || icon?.src ? (
     <Img
       image={icon}
       width={String(icon?.size?.width || DEFAULT_ICON_W)}
       height={String(DEFAULT_ICON_W)}
     />
   ) : null;
-};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,31 +1,27 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
-import { Button } from '../Button/Button';
-import { Icon } from '../Icon/Icon';
 import type { TariffsTableInnerContent } from './InnerTableProps';
+import { Img } from '../Img/Img';
+import { Button } from '../Button/Button';
 
-export interface TableInnerButtonProps
+export interface InnerTableButtonProps
   extends Partial<TariffsTableCellIndexProps>,
     TariffsTableInnerContent {
   onClick?: () => void;
   isOpen?: boolean;
+  className?: string;
 }
 
-export const TableInnerButton = JSX<TableInnerButtonProps>(({ isOpen, onClick }) => {
-  return (
+export const TableInnerButton = JSX<InnerTableButtonProps>(
+  ({ className = '', isOpen, onClick }) => (
     <Button
-      version="primary"
+      className={className}
+      appendRight={
+        <Img image={{ icon: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon' }} width="20" height="20" />
+      }
+      text={isOpen ? 'Скрыть' : 'Показать'}
+      version="gray"
       onClick={onClick}
-      className="w-full flex items-center justify-center rounded-none py-lg"
-    >
-      <div className="text-h4">{isOpen ? 'Скрыть' : 'Показать'}</div>
-      <Icon
-        name={isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-        className="ml-s"
-        iconVersion="white"
-        width="20"
-        height="20"
-      />
-    </Button>
-  );
-});
+    />
+  ),
+);

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
+import { linkButtonVersion } from './linkButtonVersion';
 
 export interface InnerTableHeaderProps {
   currencies?: string[];
@@ -11,13 +12,13 @@ export interface InnerTableHeaderProps {
 
 export const InnerTableHeader = JSX<InnerTableHeaderProps>(
   ({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (
-    <div className="flex justify-between w-full px-s">
+    <div className="flex justify-between items-center w-full py-lg">
       {currencies && currencies.length > 1 ? (
         <div className="flex bg-secondary-light p-2xs rounded-md">
           {currencies.map((currency, idx) => (
             <div
               key={currency}
-              className={`rounded-md text-xl font-light px-m py-s cursor-pointer ${
+              className={`rounded-md text-xl font-light px-4 py-3 cursor-pointer ${
                 idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'
               }`}
               onClick={() => setActiveTabIndex(idx)}
@@ -29,8 +30,9 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
       ) : null}
       {linkToPDF ? (
         <Button
+          className="text-primary-main"
           href={linkToPDF}
-          version="secondary"
+          version={linkButtonVersion}
           target="_blank"
           appendLeft={
             <Icon

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

@@ -0,0 +1,7 @@
+import type { RowsData } from './InnerTableProps';
+import { sum } from '../../utils/sum';
+
+const COLUMN_WIDTH = 140;
+
+export const getHorizontalShift = (columns: RowsData[], activeColumnIndex: number) =>
+  sum(columns.slice(0, activeColumnIndex).map((_) => _?.cols?.length ?? 1)) * COLUMN_WIDTH;

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

@@ -0,0 +1 @@
+export const linkButtonVersion = 'link';