@redneckz/wildless-cms-uni-blocks 0.3.30 → 0.3.31

package/package.json

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

package/src/components/Accordion/Accordion.example.json

@@ -3,6 +3,7 @@
   "accordionItems": [
     {
       "label": "Аккордеон 1",
+      "labelIcon": "CardIcon",
       "blocks": [
         {
           "blockListType": "TextBlock",
@@ -18,6 +19,7 @@
     },
     {
       "label": "Аккордеон 2",
+      "labelIcon": "CardIcon",
       "blocks": [
         {
           "blockListType": "TextBlock",
@@ -33,6 +35,7 @@
     },
     {
       "label": "Аккордеон 3",
+      "labelIcon": "CardIcon",
       "blocks": [
         {
           "blockListType": "TextBlock",

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

@@ -45,6 +45,7 @@ const propsTextBlock: AccordionProps = {
     },
     {
       label: 'Accordion label 2',
+      labelIcon: 'CardIcon',
       blocks: [PICTURE_TEXT_ACCORDION_BLOCK],
     },
     {

package/src/components/Accordion/Accordion.fixture.tsx

@@ -63,6 +63,8 @@ const MINI_GALLERY_ACCORDION_BLOCK: MiniGalleryBlockListDef = {
 
 const propsBlock: AccordionProps = {
   context,
+  title: 'Accordion title',
+  description: 'Accordion description',
   accordionItems: [
     {
       label: 'Accordion label 1',

package/src/components/Accordion/Accordion.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
@@ -7,28 +6,16 @@ import { AccordionItem } from './AccordionItem';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
-const accordionStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const Accordion = JSX<AccordionProps>(
-  ({ title, accordionItems, context, className = '', version = 'primary', anchor = null }) => {
+  ({ title, description, accordionItems, context, className = '', anchor = null }) => {
     return (
-      <section
-        className={`p-[50px] font-sans ${className} ${accordionStyleMap[version]}`}
-        id={anchor}
-      >
+      <section className={`p-[50px] font-sans bg-white text-primary-text ${className}`} id={anchor}>
         {title ? <Heading headingType="h4" className="mb-2.5" title={title} /> : null}
+        {description ? <div className="mb-2.5 text-base">{description}</div> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">
             {accordionItems.map((item, i) => (
-              <AccordionItem
-                key={`AccordionItem${i}`}
-                {...item}
-                version={version}
-                context={context}
-              />
+              <AccordionItem key={`AccordionItem${i}`} {...item} context={context} />
             ))}
           </ul>
         ) : null}

package/src/components/Accordion/AccordionContent.ts

@@ -1,5 +1,6 @@
-import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListProps';
+import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { IconName } from '../../icons/IconName';
 /**
  * @title Элемент списка
  */
@@ -20,9 +21,7 @@ export interface AccordionItemCommonProps {
    * @default false
    */
   bordered?: boolean; // TODO: только для мобильной версии
-  version?: BlockVersion;
-
-  columns?: ColumnsCount;
+  labelIcon?: IconName; // TODO: только для мобильной версии
 }
 
 /**
@@ -35,7 +34,7 @@ export interface AccordionContent {
   /** @title Список */
   accordionItems?: AccordionItemCommonProps[];
   /** @title Описание */
-  description?: string; // TODO: только для мобильной версии
+  description?: string;
   /**
    * @title Отображать/скрывать обводку у элемента списка
    * @default false

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -7,34 +7,39 @@ import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
-export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, bordered, context }) => {
-  const { hasContent, icon, handleToggle } = useActiveHandler({
-    context,
-    blocks,
-  });
+export const AccordionItem = JSX<AccordionItemProps>(
+  ({ label, labelIcon, blocks, bordered, context }) => {
+    const { hasContent, icon, handleToggle } = useActiveHandler({
+      context,
+      blocks,
+    });
 
-  return (
-    <li
-      className={`${
-        bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'
-      } border-solid border-main-divider`}
-    >
-      <button
-        className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
+    return (
+      <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
+        <button
+          className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
           ${bordered ? '' : 'py-[14px] px-0'}
           ${hasContent ? 'group cursor-pointer' : ''}`}
-        onClick={handleToggle}
-      >
-        <span
-          className={`text-m-title-xs pr-2.5 font-medium ${
-            hasContent ? 'group-hover:text-primary-main' : ''
-          }`}
+          onClick={handleToggle}
         >
-          {label}
-        </span>
-        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
-      </button>
-      {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
-    </li>
-  );
-});
+          <span
+            className={`text-m-title-xs pr-2.5 font-medium flex ${
+              hasContent ? 'group-hover:text-primary-main' : ''
+            }`}
+          >
+            {labelIcon ? (
+              <Icon name={labelIcon} width="24" height="24" asSVG className="mr-3" />
+            ) : null}
+            {label}
+          </span>
+          {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
+        </button>
+        {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
+      </li>
+    );
+  },
+);
+
+function borderedLiClass(bordered) {
+  return bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0';
+}

package/src/components/Accordion/AccordionItem.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { AccordionItemCommonProps } from './AccordionContent';
@@ -8,52 +7,27 @@ import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
-const buttonStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-};
+export const AccordionItem = JSX<AccordionItemProps>(({ label, isExpanded, blocks, context }) => {
+  const { isActive, hasContent, icon, handleToggle } = useActiveHandler({
+    context,
+    blocks,
+    initialState: isExpanded,
+  });
 
-const buttonHoverStyleMap: Record<BlockVersion, string> = {
-  primary: 'group-hover:text-primary-main',
-  secondary: 'group-hover:text-white',
-};
-
-export const AccordionItem = JSX<AccordionItemProps>(
-  ({ label, isExpanded, blocks, columns, context, version = 'primary' }) => {
-    const { isActive, hasContent, icon, handleToggle } = useActiveHandler({
-      context,
-      blocks,
-      initialState: isExpanded,
-    });
-
-    return (
-      <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
-        <button
-          className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans ${
-            buttonStyleMap[version]
-          }
-        ${hasContent ? 'group cursor-pointer' : ''}`}
-          onClick={handleToggle}
-        >
-          <span
-            className={`text-xl pr-2.5 font-medium ${
-              hasContent ? buttonHoverStyleMap[version] : ''
-            }`}
-          >
-            {label}
-          </span>
-          {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
-        </button>
-        {hasContent ? (
-          <AccordionItemInner
-            isExpanded={isActive}
-            columns={columns}
-            blocks={blocks}
-            version={version}
-            context={context}
-          />
-        ) : null}
-      </li>
-    );
-  },
-);
+  return (
+    <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
+      <button
+        className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans
+            ${hasContent ? 'group cursor-pointer' : ''}
+          `}
+        onClick={handleToggle}
+      >
+        <span className={`text-xl pr-2.5 font-medium`}>{label}</span>
+        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
+      </button>
+      {hasContent ? (
+        <AccordionItemInner isExpanded={isActive} blocks={blocks} context={context} />
+      ) : null}
+    </li>
+  );
+});

package/src/components/Accordion/AccordionItemInner.mobile.tsx

@@ -2,14 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { AccordionItemProps } from './AccordionItem';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 
-export const AccordionItemInner = JSX<AccordionItemProps>(
-  ({ blocks, context, version = 'primary' }) => {
-    const className = 'mb-5 last:mb-0 first:mt-2';
-    const columns = 1;
-    return (
-      <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
-        {renderBlocksList({ context, className, columns, blocks, version })}
-      </div>
-    );
-  },
-);
+export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
+  const className = 'mb-5 last:mb-0 first:mt-2';
+  return (
+    <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
+      {renderBlocksList({ context, className, blocks })}
+    </div>
+  );
+});

package/src/components/Accordion/AccordionItemInner.tsx

@@ -2,13 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { AccordionItemProps } from './AccordionItem';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 
-export const AccordionItemInner = JSX<AccordionItemProps>(
-  ({ blocks, columns = 1, context, version = 'primary' }) => {
-    const className = 'mb-5 last:mb-0 pb-5';
-    return (
-      <div className="transition-all duration-300 max-h-0 overflow-hidden">
-        {renderBlocksList({ context, className, columns, blocks, version })}
-      </div>
-    );
-  },
-);
+export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
+  const className = 'mb-5 last:mb-0 pb-5';
+  return (
+    <div className="transition-all duration-300 max-h-0 overflow-hidden">
+      {renderBlocksList({ context, className, blocks })}
+    </div>
+  );
+});

package/src/components/Footer/MediaButton.tsx

@@ -32,7 +32,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
 
   return (
     <a
-      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:text-primary-main"
+      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[40px] h-[40px] box-border hover:text-primary-main"
       href={href}
       aria-label={label}
       target="_blank"

package/src/components/Header/Header.example.json

@@ -0,0 +1,3 @@
+{
+  "defaultLocation": "Москва"
+}

package/src/components/Header/Header.tsx

@@ -20,7 +20,14 @@ const BORDER_COLORS: Record<BgColorVersion, string> = {
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({ className, defaultLocation, bgColor = 'bg-white', context, topItems, anchor = null }) => {
+  ({
+    className,
+    defaultLocation = 'Москва',
+    bgColor = 'bg-white',
+    context,
+    topItems,
+    anchor = null,
+  }) => {
     const router = context.useRouter();
     const sitemap = useSitemap(context.useAsyncData);
     const { handlerDecorator } = context;

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -3,13 +3,24 @@ import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
 import { PRODUCT_TILE, PRODUCT_PENSION_TILE } from '../ProductTile/ProductTile.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import { TILE, TILE_PREMIUM } from '../Tile/Tile.fixture';
-import type { OtherProductsProps } from './OtherProducts';
+import { HEADLINE } from '../Headline/Headline.fixture';
+import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
+import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
+import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
 import { OtherProducts } from './OtherProducts';
+import type { OtherProductsProps } from './OtherProducts';
+
 import type {
   ProductBlockBlockListDef,
   ProductTileBlockListDef,
   TextBlockBlockListDef,
   TileBlockListDef,
+  GalleryBlockListDef,
+  HeadlineBlockListDef,
+  LinkDocsBlockListDef,
+  MiniGalleryBlockListDef,
+  PictureTextBlockListDef,
 } from '../../ui-kit/BlocksList/BlocksListProps';
 
 const TEXT_BLOCK_OTHER_BLOCK: TextBlockBlockListDef = {
@@ -42,11 +53,36 @@ const PRODUCT_PENSION_TILES__OTHER_BLOCK: ProductTileBlockListDef = {
   ...PRODUCT_PENSION_TILE,
 };
 
+const HEADLINE_OTHER_BLOCK: HeadlineBlockListDef = {
+  blockListType: 'Headline',
+  ...HEADLINE,
+};
+
+const PICTURE_TEXT_OTHER_BLOCK: PictureTextBlockListDef = {
+  blockListType: 'PictureText',
+  ...PICTURE_TEXT,
+};
+
+const LINK_DOCS_OTHER_BLOCK: LinkDocsBlockListDef = {
+  blockListType: 'LinkDocs',
+  ...linkDocsContentExample,
+};
+
+const GALLERY_OTHER_BLOCK: GalleryBlockListDef = {
+  blockListType: 'Gallery',
+  ...GALLERY,
+};
+
+const MINI_GALLERY_OTHER_BLOCK: MiniGalleryBlockListDef = {
+  blockListType: 'MiniGallery',
+  ...MINI_GALLERY,
+};
+
 const propsBlock: OtherProductsProps = {
   context,
   blockItems: [
     {
-      label: 'Другие кредитные карты Россельхозбанка 1',
+      label: 'OtherProducts №1 Tiles',
       blocks: [
         TILES_PREMIUM_OTHER_BLOCK,
         TILES_PREMIUM_OTHER_BLOCK,
@@ -55,7 +91,7 @@ const propsBlock: OtherProductsProps = {
       ],
     },
     {
-      label: 'Другие кредитные карты Россельхозбанка 2',
+      label: 'OtherProducts №2 Product_Tiles',
       blocks: [
         PRODUCT_TILES_OTHER_BLOCK,
         PRODUCT_TILES_OTHER_BLOCK,
@@ -64,12 +100,11 @@ const propsBlock: OtherProductsProps = {
       ],
     },
     {
-      label: 'Другие кредитные карты Россельхозбанка 3',
+      label: 'OtherProducts №3 Product_Block',
       blocks: [PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK],
     },
-
     {
-      label: 'Другие кредитные карты Россельхозбанка 4',
+      label: 'OtherProducts №4 Text_Block',
       blocks: [
         TEXT_BLOCK_OTHER_BLOCK,
         TEXT_BLOCK_OTHER_BLOCK,
@@ -77,6 +112,26 @@ const propsBlock: OtherProductsProps = {
         TEXT_BLOCK_OTHER_BLOCK,
       ],
     },
+    {
+      label: 'OtherProducts №5 Picture_Text',
+      blocks: [PICTURE_TEXT_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №6 Headline',
+      blocks: [HEADLINE_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №7 Link_Docs',
+      blocks: [LINK_DOCS_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №8 Gallery',
+      blocks: [GALLERY_OTHER_BLOCK],
+    },
+    {
+      label: 'OtherProducts №9 Mini_Gallery',
+      blocks: [MINI_GALLERY_OTHER_BLOCK],
+    },
   ],
 };
 

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -15,11 +15,6 @@ export interface blockItemCommonProps {
   isExpanded?: boolean;
   /** @title Блоки */
   blocks?: BlockDef[];
-  /**
-   * @title Отображать/скрывать обводку элемента
-   * @default false
-   */
-  bordered?: boolean; // TODO: только для мобильной версии
   columns?: ColumnsCount;
 }
 
@@ -29,13 +24,9 @@ export interface blockItemCommonProps {
 export interface OtherProductsContent {
   /** @title Заголовок */
   title?: string;
-  /** @title Список */
-  blockItems?: blockItemCommonProps[];
-  /** @title Подзаголовок */
-  description?: string; // TODO: только для мобильной версии
   /**
-   * @title Отображать/скрывать обводку у элемента списка
-   * @default false
+   * @title Список
+   * @maxItems 10
    */
-  bordered?: boolean; // TODO: только для мобильной версии
+  blockItems?: blockItemCommonProps[];
 }

package/src/components/TextBlock/TextBlockContent.ts

@@ -23,7 +23,7 @@ export interface TextBlockContent {
   iconVersion?: TextBlockIconVersion;
   image?: Picture;
   blockVersion?: TextBlockVersion;
-  /** @title Маркеры списка (моб.) */ // TODO: mobile prop
+  /** @title Буллиты */ // TODO: mobile prop
   isDotted?: boolean;
   /** @title Список (моб.) */ // TODO: mobile prop
   items?: string[];

package/src/ui-kit/BlocksList/EmbeddableBlocks.mobile.tsx

@@ -0,0 +1,15 @@
+import { Headline } from '../../components/Headline/Headline';
+import { LinkDocs } from '../../components/LinkDocs/LinkDocs';
+import { ProductBlock } from '../../components/ProductBlock/ProductBlock';
+import { TextBlock } from '../../components/TextBlock/TextBlock';
+import { Gallery } from '../../components/Gallery/Gallery';
+import { LinkList } from '../../components/LinkList/LinkList';
+
+export const EmbeddableBlocks = {
+  Headline,
+  LinkDocs,
+  TextBlock,
+  ProductBlock,
+  Gallery,
+  LinkList,
+};

package/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -2,27 +2,19 @@ import type { JSXBlock } from '../../components/ContentPage/ContentPage';
 import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
 import type { BlockDef, ColumnsCount } from './BlocksListProps';
 import { EmbeddableBlocks } from './EmbeddableBlocks';
-import { BlockVersion } from '../../model/BlockVersion';
 
 type EmbeddableBlocksProps = {
   blocks?: BlockDef[];
   context: ContentPageContext;
   columns?: ColumnsCount;
   className?: string;
-  version?: BlockVersion;
 };
 
-export const renderBlocksList = ({
-  blocks,
-  context,
-  className,
-  columns,
-  version,
-}: EmbeddableBlocksProps) =>
-  blocks?.length ? blocks.map(renderBlock({ context, className, columns, version })) : null;
+export const renderBlocksList = ({ blocks, context, className, columns }: EmbeddableBlocksProps) =>
+  blocks?.length ? blocks.map(renderBlock({ context, className, columns })) : null;
 
 export const renderBlock =
-  ({ context, columns, className, version }: EmbeddableBlocksProps) =>
+  ({ context, columns, className }: EmbeddableBlocksProps) =>
   (block: BlockDef, i: number) => {
     const type = block?.blockListType;
     if (!type || !(type in EmbeddableBlocks)) {
@@ -32,7 +24,7 @@ export const renderBlock =
     const EmbeddedBlock: JSXBlock = EmbeddableBlocks[type];
     return (
       <div className={`${className} ${columnsCountClass}`} key={`block_${i}`}>
-        <EmbeddedBlock context={context} {...block} blockVersion={version} className="!p-0" />
+        <EmbeddedBlock context={context} {...block} className="!p-0" />
       </div>
     );
   };

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

@@ -1,16 +1,34 @@
 import { SwipeListControl } from './SwipeListControl';
 import { mobileContext } from '../../setup-fixture';
 
-const children = new Array(4).fill(0).map((_, i) => (
-  <div key={String(i)} className="border border-main-stroke rounded-md text-center h-12">
-    {`Element #${i}`}
-  </div>
-));
+const generateChildren = (count: number) =>
+  new Array(count).fill(0).map((_, i) => (
+    <div key={String(i)} className="border border-main-stroke rounded-md text-center h-12">
+      {`Element #${i}`}
+    </div>
+  ));
 
 export default {
   default: (
     <div className="px-4 py-5 bg-white">
-      <SwipeListControl context={mobileContext}>{children}</SwipeListControl>
+      <SwipeListControl context={mobileContext}>{generateChildren(5)}</SwipeListControl>
+    </div>
+  ),
+  'w/o dots': (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl context={mobileContext} showDots={false}>
+        {generateChildren(5)}
+      </SwipeListControl>
+    </div>
+  ),
+  '1 element': (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl context={mobileContext}>{generateChildren(1)}</SwipeListControl>
+    </div>
+  ),
+  '2 elements': (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl context={mobileContext}>{generateChildren(2)}</SwipeListControl>
     </div>
   ),
 };

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

@@ -22,7 +22,7 @@ export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
       const contentContainer = (e.currentTarget as HTMLElement).parentElement
         ?.previousElementSibling;
 
-      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth' });
+      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     };
 
     return showDots && children?.length ? (

package/src/ui-kit/SwipeListControl/utils/getScrollPoints.spec.ts

@@ -17,8 +17,26 @@ const scrollPoints: [number, number][] = [
   [1414, 1914],
 ];
 
+const twoItemsScrollPointsProps = {
+  gap: 14,
+  padding: 16,
+  clientWidth: 414,
+  scrollWidth: 794,
+  childElementCount: 2,
+  itemWidth: 380,
+};
+
+const twoItemsScrollPoints: [number, number][] = [
+  [0, 380],
+  [380, 794],
+];
+
 describe('getScrollPoints', () => {
   it('should return array containing scroll breakpoints delimiting each child', () => {
     expect(getScrollPoints(props)).toEqual(scrollPoints);
   });
+
+  it('should correctly handle case with 2 items in container', () => {
+    expect(getScrollPoints(twoItemsScrollPointsProps)).toEqual(twoItemsScrollPoints);
+  });
 });

package/src/ui-kit/SwipeListControl/utils/getScrollPoints.ts

@@ -16,9 +16,17 @@ export const getScrollPoints = ({
   scrollWidth: number;
   childElementCount: number;
   itemWidth: number;
-}) => {
-  const scrollItemWidth = itemWidth + gap;
+}): [number, number][] => {
   const scrollableDistance = scrollWidth - clientWidth;
+
+  if (childElementCount === 2) {
+    return [
+      [0, scrollableDistance],
+      [scrollableDistance, scrollWidth],
+    ];
+  }
+
+  const scrollItemWidth = itemWidth + gap;
   const edgeScrollDistance = clientWidth - gap - padding;
 
   const lastScrollableIdx = childElementCount - 2;