@redneckz/wildless-cms-uni-blocks 0.6.35 → 0.6.37

package/mobile/src/components/Carousel/Carousel.tsx

@@ -1,58 +1,77 @@
 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';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
-import { CarouselContainer } from './CarouselContainer';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import {
+  SwipeListScroll,
+  useSwipeListScroll,
+} from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import type { CarouselContent } from './CarouselContent';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
 }
 
+const ITEMS_GAP = 4;
+
 const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
+const scrollButtonStyle = 'absolute top-[calc(50%-12px)] z-50';
 
 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 containerRef = useRef<HTMLDivElement | null>(null);
-
-    const [activeIndex, controls] = useCarouselControls({
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
       itemCount: count,
-      visibleItemCount,
       isCyclic,
-      container: containerRef.current,
     });
-    const { isScrollAvailable } = controls;
 
     return (
-      <BlockWrapper className={`relative font-sans overflow-hidden ${className}`} {...rest}>
-        <CarouselContainer
-          activeIndex={activeIndex}
-          itemCount={count}
-          visibleItemCount={visibleItemCount}
+      <BlockWrapper className={`relative font-sans ${className}`} {...rest}>
+        <SwipeListContainer
           containerRef={containerRef}
+          visibleItemCount={visibleItemCount}
+          snapAlign="snap-start"
+          gap={ITEMS_GAP}
+          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
         >
           {renderChildren(rest)}
-        </CarouselContainer>
-        {isScrollAvailable && isBlur ? (
+        </SwipeListContainer>
+        {(scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (
           <div>
             <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',
-        })}
+        {renderScrollButtons(scroll)}
       </BlockWrapper>
     );
   },
 );
 
-Carousel.childrenTypes = ['CarouselCard', 'CarouselTariffsCard'];
+Carousel.childrenTypes = [
+  'CarouselCard',
+  'CarouselTariffsCard',
+  'CarouselLinks',
+  'CarouselProgramsCard',
+  'CarouselInvestmentCard',
+];
+
+const renderScrollButtons = ({
+  scrollLeft,
+  scrollRight,
+  canScrollLeft,
+  canScrollRight,
+}: SwipeListScroll) => (
+  <div>
+    {canScrollLeft ? (
+      <ScrollLeftButton className={`${scrollButtonStyle} left-8`} onClick={scrollLeft} />
+    ) : null}
+    {canScrollRight ? (
+      <ScrollRightButton className={`${scrollButtonStyle} right-8`} onClick={scrollRight} />
+    ) : null}
+  </div>
+);

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -10,8 +10,8 @@ export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-full h-full';
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
-  normal: `w-[${1007 + 48}px]`,
-  mini: `w-[${350 + 48}px]`,
+  normal: 'min-w-[1007px]',
+  mini: 'min-w-[355px]',
 };
 
 export const CarouselCard = JSX<CarouselCardProps>(

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

@@ -0,0 +1,28 @@
+{
+  "image": {
+    "format": "webp",
+      "size": {
+        "width": 180,
+        "height": 180
+      }
+    },
+  "title": "Заголовок",
+  "description": "Описание",
+  "additionalDescription": "Описание 1-2",
+  "columnsMode": "1",
+  "cardsList":[
+    {
+      "parameter": "Параметр",
+      "parameterDescription": "Описание пункта"
+    },
+    {
+      "parameter": "Параметр",
+      "parameterDescription": "Описание пункта"
+    },
+    {
+      "parameter": "Параметр",
+      "parameterDescription": "Описание пункта"
+    }
+  ],
+  "version": "primary"
+}

package/mobile/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -0,0 +1,83 @@
+import { BaseTile } from '../BaseTile/BaseTile';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import type {
+  CardColumnsMode,
+  CardsListItem,
+  CarouselInvestmentCardContent,
+} from './CarouselInvestmentCardContent';
+import { JSX } from '@redneckz/uni-jsx';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import type { UniBlockProps } from '../../model/JSXBlock';
+
+export interface CarouselInvestmentCardProps extends CarouselInvestmentCardContent, UniBlockProps {}
+
+const getItemListFontSize = (colValue?: number) => (colValue === 1 ? 'text-h6' : 'text-l');
+
+const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
+  1: 'flex gap-y-2 flex-col',
+  2: 'flex gap-y-2 gap-x-10 flex-wrap',
+};
+
+export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
+  ({
+    additionalDescription,
+    cardsList = [],
+    className = '',
+    columnsMode = 1,
+    description,
+    image,
+    title,
+    version = 'primary',
+    ...rest
+  }) => {
+    const tileTitle = title ? (
+      <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} />
+    ) : null;
+
+    const tileImage = image?.src ? (
+      <Img className="absolute bottom-0 right-0 m-0" image={image} />
+    ) : null;
+
+    return (
+      <BlockWrapper
+        className={`relative text-left border border-solid box-border
+        p-9 w-[697px]
+        ${BorderVersionStyleMap[version]}
+        ${className}`}
+        {...rest}
+      >
+        <BaseTile title={tileTitle} image={tileImage}>
+          <div className="flex justify-between mb-4">
+            {description ? <span className="text-h6 w-1/3">{description}</span> : null}
+            {additionalDescription ? (
+              <span className="text-m-light text-secondary-text">{additionalDescription}</span>
+            ) : null}
+          </div>
+          {cardsList.length ? (
+            <ul className={`list-none m-0 p-0 ${cardColumnsModeStyleMap[columnsMode]}`}>
+              {renderCardList(cardsList, columnsMode)}
+            </ul>
+          ) : null}
+        </BaseTile>
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderCardList = (cardsList: CardsListItem[], columnsMode: number) => {
+  const CARDS_COUNT_MAP = [4, 9];
+  const visibleCardsList = cardsList.slice(0, CARDS_COUNT_MAP[columnsMode - 1]);
+
+  return visibleCardsList.map((item, i) => (
+    <li key={String(i)} className={columnsMode === 2 ? 'basis-[calc(50%-20px)]' : ''}>
+      {item?.parameter ? (
+        <span className={`pr-2.5 ${getItemListFontSize(columnsMode)}`}>{item.parameter}</span>
+      ) : null}
+      {item?.parameterDescription ? (
+        <span className="text-m-light text-secondary-text">{item.parameterDescription}</span>
+      ) : null}
+    </li>
+  ));
+};

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

@@ -0,0 +1,9 @@
+{
+  "content": {
+    "items": {
+      "image": {
+        "ui:field": "picture"
+      }
+    }
+  }
+}

package/mobile/src/components/{InvestmentGallery/InvestmentGalleryContent.ts → CarouselInvestmentCard/CarouselInvestmentCardContent.ts}

@@ -1,22 +1,35 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
-import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
- * @title Количество колонок в списке
+ * @title Карточка галереи инвестиций
+ */
+
+/**
+ * @title Количество колонок
  * @enumNames [
  *   "1 колонка",
  *   "2 колонки",
  *  ]
  */
-export type CardColumnsMode = 'single' | 'double';
+export type CardColumnsMode = 1 | 2;
 
-/**
- * @title Карточка
- */
-export interface InvestmentGalleryCardTypes extends HeadlineCommonProps {
+export interface CardsListItem {
+  /** @title Параметр */
+  parameter?: string;
+  /** @title Описание */
+  parameterDescription?: string;
+}
+export interface CarouselInvestmentCardContent extends HeadlineCommonProps {
   /** @title Доп. описание карточки  */
   additionalDescription?: string;
+  /** @default 1 */
+  columnsMode?: CardColumnsMode;
+  /**
+   * @title Список
+   */
+  cardsList?: CardsListItem[];
   /**
    * @default {
    *   "format": "webp",
@@ -32,23 +45,5 @@ export interface InvestmentGalleryCardTypes extends HeadlineCommonProps {
    * }
    */
   image?: Picture;
-  columnsMode?: CardColumnsMode;
-  /** @title Описание пункта */
-  cardList?: CardListItem[];
-}
-
-export interface CardListItem {
-  /** @title Параметр */
-  parameter?: string;
-  /** @title Описание */
-  parameterDesccription?: string;
-}
-
-/**
- * @title Карточка
- */
-export interface InvestmentGalleryContent extends TitleProps {
-  /** @title Карточки */
-  cards?: InvestmentGalleryCardTypes[];
   version?: BlockVersion;
 }

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

@@ -0,0 +1,25 @@
+{
+  "icon": {
+    "icon": "SignDocsIcon",
+    "format": "webp",
+    "size": {
+      "width": 200,
+      "height": 242
+    }
+  },
+  "title": "Заголовок",
+  "list": [
+    {
+      "title": "Ячейка 1-1",
+      "description": "Описание 1-1"
+    },
+    {
+      "title": "Ячейка 1-2",
+      "description": "Описание 1-2"
+    },
+    {
+      "title": "Ячейка 1-3",
+      "description": "Описание 1-3"
+    }
+  ]
+}

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+
+export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
+
+export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
+  ({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (
+    <BlockWrapper
+      className={`font-sans border border-main-stroke flex min-w-[536px] ${VersionStyleMap[version]} ${className}`}
+      {...rest}
+    >
+      <div className="w-[200px] min-w-[200px] self-end">
+        {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+        {icon?.src ? <Img image={icon} /> : null}
+      </div>
+      <div className="p-8 pl-3 w-full">
+        {title ? <Heading className=" mb-3.5" headingType="h5" title={title} /> : null}
+        {list.length ? <div className="flex flex-col gap-3">{list?.map(renderList)}</div> : null}
+      </div>
+    </BlockWrapper>
+  ),
+);
+
+const renderList = (_: HeadlineCommonProps, i: number) => (
+  <div key={String(i)} className="break-words">
+    {_.title ? <div className={`text-h6`}>{_.title}</div> : null}
+    {_.description ? <span className="text-l-light mt-1">{_.description}</span> : null}
+  </div>
+);

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

@@ -0,0 +1 @@
+{}

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCardContent.ts

@@ -0,0 +1,13 @@
+import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+/**
+ * @title Карточка программ карусели
+ */
+export type CarouselProgramsCardContent = TitleProps & {
+  icon?: Picture;
+  /** @title Список */
+  list?: HeadlineCommonProps[];
+  version?: BlockVersion;
+};

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,7 +1,3 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
@@ -10,32 +6,36 @@ import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
+import { JSX } from '@redneckz/uni-jsx';
+import { VNode } from '../../model/VNode';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
+const VISIBLE_ROWS_COUNT = 1;
+
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   ({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
-    const hitStyle = getHitStyle(Boolean(isHighlighting));
     const rowsNode = rows.map(renderCardInfo);
-    const VISIBLE_ROWS_COUNT = 1;
-    const [visibleRows, hiddenRows] = [
-      rowsNode.slice(0, VISIBLE_ROWS_COUNT),
-      rowsNode.slice(VISIBLE_ROWS_COUNT),
-    ];
+    const visibleRows = rowsNode.slice(0, VISIBLE_ROWS_COUNT);
+    const hiddenRows = rowsNode.slice(VISIBLE_ROWS_COUNT);
 
     return (
       <BlockWrapper
-        className={`font-sans bg-white p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`}
+        className={`font-sans relative bg-white border border-main-stroke min-w-[322px] p-8 
+        ${getHitStyle(isHighlighting)}
+        ${className}`}
         {...rest}
       >
         {isHighlighting ? renderHitIcon() : null}
-        {icon?.src ? <Img className="flex justify-center" image={icon} /> : null}
+        {icon?.src ? <Img image={icon} /> : null}
         {title ? (
           <Heading className="text-primary-text text-center pt-2" headingType="h5" title={title} />
         ) : null}
         {button ? <Button className="w-full mt-4" {...button} /> : null}
-        {rows?.length ? (
+        {rows.length ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (
               <div>
@@ -51,8 +51,8 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   },
 );
 
-const getHitStyle = (isHighlighting: boolean): string =>
-  isHighlighting ? 'mt-9 pt-[71px]' : 'mt-[70px] pt-9';
+const getHitStyle = (isHighlighting?: boolean): string =>
+  isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-9';
 
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
@@ -71,23 +71,19 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
 );
 
 const renderCardInfo = (cell: HeadlineCommonProps, i: number): VNode => (
-  <div key={String(i)} className="py-5 border-b border-main-divider flex flex-col gap-1">
+  <div key={String(i)} className="py-5 border-b border-main-divider">
     {cell?.title ? (
       <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
     ) : null}
-    {cell?.description ? <div className="text-primary-text text-h6">{cell.description}</div> : null}
+    {cell?.description ? (
+      <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
+    ) : null}
   </div>
 );
 
-const renderHitIcon = (): VNode => {
-  const POSITION_STYLE = 'absolute -top-7 -right-4';
-
-  return (
-    <div
-      className={`h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)] ${POSITION_STYLE}`}
-    >
-      <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
-      <div className="text-center">Хит</div>
-    </div>
-  );
-};
+const renderHitIcon = (): VNode => (
+  <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+    <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
+    <div className="text-center">Хит</div>
+  </div>
+);

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

@@ -62,7 +62,7 @@ const TableInner = JSX<ComparisonTableProps>(
     ));
 
     return orientation === 'horizontal' ? (
-      <SwipeListControl onSlideChange={handleSlideChange}>{tableColumns}</SwipeListControl>
+      <SwipeListControl onVisibleIndicesChange={handleSlideChange}>{tableColumns}</SwipeListControl>
     ) : (
       tableColumns
     );

package/mobile/src/components/Gallery/Gallery.tsx

@@ -45,7 +45,7 @@ function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps
 function renderCard(card: GalleryCardProps, key: number) {
   return (
     <div
-      className={`h-full justify-between box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
+      className={`w-full h-full flex flex-col justify-between shrink-0 box-border snap-start snap-always border-solid border rounded-md border-main-stroke p-4
       ${VersionStyleMap[card.version ?? 'primary']}`}
       key={key}
     >

package/mobile/src/components/Gallery/GalleryCardInner.tsx

@@ -19,6 +19,7 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
     items,
     button,
     version,
+    isFullWidth = true,
     isDotted = true,
     align = 'center',
   }) => (
@@ -30,7 +31,12 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
         {items?.length ? renderItems(items, isDotted, version) : null}
         {renderAdditionalDescription(additionalDescription)}
       </div>
-      {button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null}
+      {button?.text
+        ? renderButton({
+            button,
+            buttonClassName: `mt-6 ${isFullWidth ? '' : 'self-center'}`,
+          })
+        : null}
     </div>
   ),
 );

package/mobile/src/components/Gallery/GalleryContent.ts

@@ -52,6 +52,11 @@ export type GalleryCardProps = HeadlineSmallProps & {
    * @default center
    */
   align?: AlignType;
+  /**
+   * @title Кнопка по всей ширине
+   * @default true
+   */
+  isFullWidth?: boolean;
 };
 
 /**

package/mobile/src/components/Gallery/GalleryInner.tsx

@@ -38,7 +38,6 @@ export const GalleryInner = JSX<GalleryInnerProps>(
             <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />
           </div>
         ) : null}
-
         {button ? renderButton({ button, buttonClassName: 'mt-8 mx-auto' }) : null}
       </BlockWrapper>
     );

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useRouter } from '../../hooks/useRouter';
 import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
@@ -30,15 +30,13 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
   const activeTopItem = topItems?.find(isTopItemActive(router));
   const subItems = activeTopItem?.items;
   const activeSubItem = findActiveSubItem(router)(subItems);
-
   const [burgerMenuShow, setBurgerMenuShow] = useState(false);
-
-  const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
+  const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
 
   return (
     <header className={`${bgColor} ${className}`}>
       <div className="container px-4 py-0 box-border">
-        <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
+        <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} />
         <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
           <div className="flex no-scrollbar horizontal-list h-full items-center">
             {subItems?.map((_, i) => (
@@ -55,7 +53,7 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
       </div>
       {burgerMenuShow ? (
         <HeaderBurger
-          onClick={toggleBurgerMenu}
+          onClick={handleBurgerMenuShow}
           burgerSubMenu={dispositions}
           defaultLocation={defaultLocation}
         >

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { useRouter } from '../../hooks/useRouter';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
@@ -18,13 +19,11 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [], bgColor }
   const activeSubItem = findActiveSubItem(router)(subItems);
 
   const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
+
   const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
   const subItemsListRef = useRef<HTMLDivElement | null>(null);
-  const observerOptions = useMemo(
-    () => ({ threshold: 1, root: subItemsListRef.current }),
-    [subItemsListRef.current],
-  );
+  const observerOptions: IntersectionObserverOptions = { rootRef: subItemsListRef };
   const subItemsVisibilityHandlers = useMemo(
     () =>
       subItems.map((_, index) => (isIntersecting: boolean) => {

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

@@ -1,6 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
+import {
+  useIntersectionObserver,
+  type IntersectionObserverOptions,
+} from '../../hooks/useIntersectionObserver';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
@@ -9,7 +12,7 @@ export interface HeaderSubMenuItemProps extends LinkProps {
   className?: string;
   active?: boolean;
   bgColor?: BgColorVersion;
-  observerOptions?: IntersectionObserverInit;
+  observerOptions?: IntersectionObserverOptions;
   onVisibilityChange?: (isIntersecting: boolean) => void;
 }
 

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

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "image": {
+      "format": "webp",
+      "size": {
+        "width": 400,
+        "height": 300
+      }
+    }
+  }
+}

package/mobile/src/components/ImgBlock/ImgBlock.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Img } from '../../ui-kit/Img/Img';
+import type { ImgBlockContent } from './ImgBlockContent';
+
+interface ImgBlockProps extends ImgBlockContent, UniBlockProps {}
+
+export const ImgBlock = JSX<ImgBlockProps>((props) => {
+  const { className, image, ...rest } = props;
+
+  return (
+    <BlockWrapper className={className} {...rest}>
+      <Img image={image} />
+    </BlockWrapper>
+  );
+});