@redneckz/wildless-cms-uni-blocks 0.6.23 → 0.6.24

package/mobile/lib/ui-kit/Logo/Logo.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../Img/Img.js';
+const ICON_VERSION_MAP = {
+    'bg-white': 'color',
+    transparent: 'white',
+};
 const SVG_COLOR = {
     'bg-white': 'text-primary-main',
     transparent: 'text-white',
@@ -10,6 +14,6 @@ const TEXT_COLOR = {
     transparent: 'text-white',
 };
 export const Logo = JSX(({ className = '', href, children, targetBlank, bgColor = 'bg-white', showTitle = true }) => {
-    return (_jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A", children: [_jsx(Img, { image: { icon: 'LogoIcon', iconVersion: SVG_COLOR[bgColor] }, className: `${SVG_COLOR[bgColor]} w-10 h-[38px]`, asSVG: true }), showTitle ? (_jsx("span", { className: `${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`, children: children || 'Россельхозбанк' })) : null] }));
+    return (_jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A", children: [_jsx(Img, { image: { icon: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }, className: `${SVG_COLOR[bgColor]}`, width: "34", height: "34", asSVG: true }), showTitle ? (_jsx("span", { className: `${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`, children: children || 'Россельхозбанк' })) : null] }));
 });
 //# sourceMappingURL=Logo.js.map

package/mobile/lib/ui-kit/Logo/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sourceRoot":"","sources":["../../../src/ui-kit/Logo/Logo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAUjC,MAAM,SAAS,GAAmC;IAChD,UAAU,EAAE,mBAAmB;IAC/B,WAAW,EAAE,YAAY;CAC1B,CAAC;AACF,MAAM,UAAU,GAAmC;IACjD,UAAU,EAAE,YAAY;IACxB,WAAW,EAAE,YAAY;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CACrB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,GAAG,UAAU,EAAE,SAAS,GAAG,IAAI,EAAE,EAAE,EAAE;IAC1F,OAAO,CACL,aACE,SAAS,EAAE,mDAAmD,SAAS,EAAE,EACzE,IAAI,EAAE,IAAI,IAAI,kBAAkB,EAChC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,gBAC7B,sFAAgB,aAE3B,KAAC,GAAG,IACF,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,EAC5D,SAAS,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC,gBAAgB,EAChD,KAAK,SACL,EACD,SAAS,CAAC,CAAC,CAAC,CACX,eAAM,SAAS,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC,4BAA4B,YAChE,QAAQ,IAAI,gBAAgB,GACxB,CACR,CAAC,CAAC,CAAC,IAAI,IACN,CACL,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"Logo.js","sourceRoot":"","sources":["../../../src/ui-kit/Logo/Logo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAUjC,MAAM,gBAAgB,GAAmC;IACvD,UAAU,EAAE,OAAO;IACnB,WAAW,EAAE,OAAO;CACrB,CAAC;AAEF,MAAM,SAAS,GAAmC;IAChD,UAAU,EAAE,mBAAmB;IAC/B,WAAW,EAAE,YAAY;CAC1B,CAAC;AAEF,MAAM,UAAU,GAAmC;IACjD,UAAU,EAAE,YAAY;IACxB,WAAW,EAAE,YAAY;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CACrB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,GAAG,UAAU,EAAE,SAAS,GAAG,IAAI,EAAE,EAAE,EAAE;IAC1F,OAAO,CACL,aACE,SAAS,EAAE,mDAAmD,SAAS,EAAE,EACzE,IAAI,EAAE,IAAI,IAAI,kBAAkB,EAChC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,gBAC7B,sFAAgB,aAE3B,KAAC,GAAG,IACF,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,gBAAgB,CAAC,OAAO,CAAC,EAAE,EACnE,SAAS,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC,EAAE,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,KAAK,SACL,EACD,SAAS,CAAC,CAAC,CAAC,CACX,eAAM,SAAS,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC,4BAA4B,YAChE,QAAQ,IAAI,gBAAgB,GACxB,CACR,CAAC,CAAC,CAAC,IAAI,IACN,CACL,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/lib/ui-kit/Select/Select.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useOutsideClick } from '../../hooks/useOutsideClick.js';
 import { Icon } from '../Icon/Icon.js';
 export const Select = JSX(({ className = '', isBorder = true, label, options = [], value, onChange, placeholder = '' }) => {
     const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
     const [isOpen, setIsOpen] = useState(false);
-    const wrapperRef = useRef(null);
-    useOutsideClick(wrapperRef, setIsOpen);
+    const handleClickOutside = useCallback(() => setIsOpen(false), []);
+    const wrapperRef = useOutsideClick(handleClickOutside);
     const choiceOption = (option) => {
         setSelectedItem(option);
         setIsOpen(false);

package/mobile/lib/ui-kit/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/ui-kit/Select/Select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/ui-kit/Select/Select.tsx"],"names":[],"mappings":"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"}

package/mobile/lib/ui-kit/TopItem/TopItem.d.ts

@@ -7,8 +7,8 @@ export interface TopItemProps extends TopItemContent {
     className?: string;
     flat?: boolean;
     ariaLabel?: string;
-    onClick?: () => void;
     bgColor?: BgColorVersion;
     dataItemName?: string;
+    onClick?: () => void;
 }
 export declare const TopItem: import("@redneckz/uni-jsx").UNIComponent<TopItemProps, any, any>;

package/mobile/lib/utils/getIconWithVersion.d.ts

@@ -0,0 +1,3 @@
+import type { Picture } from '../model/Picture';
+import type { BlockVersion } from '../model/BlockVersion';
+export declare const getIconWithVersion: (icon: Picture, version?: BlockVersion) => Picture;

package/mobile/lib/utils/getIconWithVersion.js

@@ -0,0 +1,5 @@
+export const getIconWithVersion = (icon, version = 'primary') => ({
+    ...icon,
+    iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
+});
+//# sourceMappingURL=getIconWithVersion.js.map

package/mobile/lib/utils/getIconWithVersion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getIconWithVersion.js","sourceRoot":"","sources":["../../src/utils/getIconWithVersion.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAa,EAAE,UAAwB,SAAS,EAAW,EAAE,CAAC,CAAC;IAChG,GAAG,IAAI;IACP,WAAW,EAAE,IAAI,EAAE,WAAW,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;CAChF,CAAC,CAAC"}

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

@@ -8,6 +8,7 @@ import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
 import type { AccordionContent } from '../Accordion/AccordionContent';
 import type { AccordionItemProps } from './AccordionItemProps';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
 
@@ -64,10 +65,22 @@ const FoldButton = JSX<FoldButtonProps>(({ className, icon, label, primaryIcon,
   >
     <span className="text-m-title-xs font-medium pr-2.5 flex group-hover:text-primary-main">
       {primaryIcon ? (
-        <Img image={primaryIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
+        <Img
+          image={getIconWithVersion(primaryIcon)}
+          className="mr-3 flex-shrink-0"
+          width="24"
+          height="24"
+          asSVG
+        />
       ) : null}
       {label}
     </span>
-    <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
+    <Img
+      className="flex-shrink-0"
+      image={getIconWithVersion({ icon: icon })}
+      width="24"
+      height="24"
+      asSVG
+    />
   </button>
 ));

package/mobile/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { BenefitsBlockContent, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
 import { BenefitBlockItemProps, DescriptionDef } from './BenefitsBlockContent';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
@@ -31,80 +31,58 @@ const benefitsIconStyleMap = {
 };
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', title, benefitList, benefitsBlockVersion = 'primary', ...rest }) => {
-    return (
-      <BlockWrapper
-        className={`font-sans text-primary-text p-12 flex flex-col items-center ${className} ${benefitsBlockStyleMap[benefitsBlockVersion]}`}
-        {...rest}
-      >
-        {title ? (
-          <Heading
-            headingType="h3"
-            as="h2"
-            className={`max-w-[47rem] text-center ${benefitsTextStyleMap[benefitsBlockVersion]}`}
-            title={title}
-          />
-        ) : null}
-        {benefitList?.length ? renderBenefits(benefitList, benefitsBlockVersion) : null}
-      </BlockWrapper>
-    );
-  },
+  ({ className = '', title, benefitList, version = 'primary', ...rest }) => (
+    <BlockWrapper
+      className={`font-sans text-primary-text p-12 flex flex-col items-center ${className} ${benefitsBlockStyleMap[version]}`}
+      {...rest}
+    >
+      {title ? (
+        <Heading
+          headingType="h3"
+          as="h2"
+          className={`max-w-[47rem] text-center ${benefitsTextStyleMap[version]}`}
+          title={title}
+        />
+      ) : null}
+      {benefitList?.length ? renderBenefits(benefitList, version) : null}
+    </BlockWrapper>
+  ),
 );
 
-const renderBenefits = (
-  benefitList: BenefitBlockItemProps[],
-  benefitsBlockVersion: BlockVersion,
-) => {
-  return (
-    <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
-      {benefitList.map(renderStep(benefitsBlockVersion))}
-    </div>
-  );
-};
-
-const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BlockVersion) => {
-  if (!benefitIcon.icon || benefitIcon?.iconVersion) {
-    return benefitIcon;
-  }
-  benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';
-
-  return benefitIcon;
-};
+const renderBenefits = (benefitList: BenefitBlockItemProps[], version: BlockVersion) => (
+  <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
+    {benefitList.map(renderStep(version))}
+  </div>
+);
 
-const renderStep =
-  (benefitsBlockVersion: BlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
-    const description = (benefit?.description || undefined) as DescriptionDef;
+const renderStep = (version: BlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
+  const description = (benefit?.description || undefined) as DescriptionDef;
 
-    return (
-      <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
-        {benefit?.icon?.icon ? (
-          <Img
-            className={`w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[benefitsBlockVersion]}`}
-            image={setIconVersion(benefit.icon, benefitsBlockVersion)}
-            asSVG
-          />
+  return (
+    <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
+      {benefit?.icon?.icon ? (
+        <Img
+          className={`w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[version]}`}
+          image={getIconWithVersion(benefit.icon, version)}
+          asSVG
+        />
+      ) : null}
+      {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
+      <div className="ml-5">
+        {benefit?.label ? (
+          <h3 className={`text-h6 m-0 ${benefitsTextStyleMap[version]}`}>{benefit.label}</h3>
         ) : null}
-        {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
-        <div className="ml-5">
-          {benefit?.label ? (
-            <h3 className={`text-h6 m-0 ${benefitsTextStyleMap[benefitsBlockVersion]}`}>
-              {benefit.label}
-            </h3>
-          ) : null}
-          {renderDescription(description, benefitsBlockVersion)}
-        </div>
+        {renderDescription(description, version)}
       </div>
-    );
-  };
+    </div>
+  );
+};
 
-const renderDescription = (description: DescriptionDef, benefitsBlockVersion: BlockVersion) => {
+const renderDescription = (description: DescriptionDef, version: BlockVersion) => {
   const benefitType = description ? description?.benefitType : null;
-  if (!benefitType) {
-    return null;
-  }
 
-  return description ? (
-    <div className={`text-l-light mt-2 ${benefitsDescriptionStyleMap[benefitsBlockVersion]}`}>
+  return description && benefitType ? (
+    <div className={`text-l-light mt-2 ${benefitsDescriptionStyleMap[version]}`}>
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}

package/mobile/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -54,5 +54,5 @@ export type BenefitsBlockContent = TitleProps & {
    */
   benefitList?: BenefitBlockItemProps[];
   /** @default primary */
-  benefitsBlockVersion?: BlockVersion;
+  version?: BlockVersion;
 };

package/mobile/src/components/Calculator/Calculator.tsx

@@ -81,6 +81,8 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
     ? 'text-l-light text-white'
     : `text-m-light text-secondary-text`;
   const iconClassName = isActiveBtn ? '' : `text-primary-main`;
+  const iconVersion = tab?.icon?.iconVersion;
+  const activeIconStyle = isActiveBtn ? 'white' : 'normal';
 
   return (
     <button
@@ -93,7 +95,10 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
     >
       <Img
         className={`h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`}
-        image={{ ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }}
+        image={{
+          ...tab?.icon,
+          iconVersion: iconVersion ?? activeIconStyle,
+        }}
         width="24"
         height="24"
         asSVG

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

@@ -1,19 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Fallback } from '../../model/Fallback';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { AccordionItemsList } from '../Accordion/AccordionItemsList';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
 import { LinkList } from '../LinkList/LinkList';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
 import { Contacts } from './Contacts';
-import type { FooterContent, SubMenuItem } from './FooterContent';
 import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import type { Fallback } from '../../model/Fallback';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { FooterContent, SubMenuItem } from './FooterContent';
+import type { Picture } from '../../model/Picture';
+import { AccordionItem } from '../AccordionItem/AccordionItem';
 
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
@@ -66,7 +68,15 @@ const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
 
   return (
     <Button version="link" key={`footer-${i}`} href={href} className="flex text-s mb-4 w-6">
-      {icon ? <Img className="pr-1" image={icon} width="24" height="24" asSVG /> : null}
+      {icon ? (
+        <Img
+          className="pr-1"
+          image={getIconWithVersion({ icon: icon } as Picture)}
+          width="24"
+          height="24"
+          asSVG
+        />
+      ) : null}
       <span className="pl-2.5 font-medium text-primary-text">{text}</span>
     </Button>
   );

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

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../../ui-kit/Img/Img';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 const ICONS_MAP: Array<{
   origins: string[];
@@ -66,7 +67,13 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
       rel="noopener noreferrer"
     >
       {icon ? (
-        <Img image={icon} imageClassName="group-hover:text-white" width="24" height="24" asSVG />
+        <Img
+          image={getIconWithVersion(icon)}
+          imageClassName="group-hover:text-white"
+          width="24"
+          height="24"
+          asSVG
+        />
       ) : null}
     </a>
   );

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

@@ -11,7 +11,7 @@ import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
-import { Picture } from '../../model/Picture';
+import type { Picture } from '../../model/Picture';
 
 export const Gallery = JSX<GalleryProps>(
   ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {

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

@@ -7,6 +7,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export const GalleryCardInner = JSX<GalleryCardProps>(
   ({
@@ -24,7 +25,7 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
     return (
       <div className={`h-full flex flex-col justify-between ${AlignText[align]}`}>
         <div className="flex flex-col h-full">
-          {renderImage(icon)}
+          {renderImage(icon, version)}
           {renderCardTitle(headlineSmallVersion, title)}
           {renderDescription(description, title)}
           {items?.length ? renderItems(items, isDotted, version) : null}
@@ -36,11 +37,15 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
   },
 );
 
-const renderImage = (image?: Picture) => (
+const renderImage = (image?: Picture, version?: BlockVersion) => (
   <div className="flex justify-center">
     {image?.src ? <Img className="mb-5" image={image} /> : null}
     {image?.icon ? (
-      <Img className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`} image={image} asSVG />
+      <Img
+        className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`}
+        image={getIconWithVersion(image, version)}
+        asSVG
+      />
     ) : null}
   </div>
 );

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

@@ -1,84 +1,67 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
 import type { BgColorVersion } from '../../model/BgColorVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
-import type {
-  ContentPageContext,
-  HandlerDecorator,
-  Router,
-} from '../ContentPage/ContentPageContext';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 
 const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
   'bg-white': 'bg-primary-text',
   transparent: 'bg-white',
 };
 
-interface DropdownMenuProps extends UniBlockProps {
-  menuVisible: boolean;
-  toggleMenu: () => void;
-  menuItems: LinkProps[];
-  bgColor?: BgColorVersion;
+interface DropdownMenuProps {
   context: ContentPageContext;
-  activeSubItem?: LinkProps;
+  className?: string;
+  items: LinkProps[];
+  activeItem?: LinkProps;
+  bgColor?: BgColorVersion;
 }
 
-export const DropdownMenu = JSX<DropdownMenuProps>((props) => {
-  const { menuVisible, toggleMenu, menuItems, bgColor, context, activeSubItem } = props;
+export const DropdownMenu = JSX<DropdownMenuProps>(
+  ({ context, className, items, activeItem, bgColor }) => {
+    const { useRouter, handlerDecorator } = context;
+    const router = useRouter();
 
-  const { useRouter, handlerDecorator } = context;
-  const router = useRouter();
+    const [visible, setVisible] = useState(false);
+    const handleToggle = useCallback(() => setVisible((_) => !_), []);
 
-  return (
-    <div
-      className={`absolute w-52 -top-4 right-0 pt-4 z-40 ${
-        menuVisible ? 'bg-white rounded-md shadow-blue-gray/24' : ''
-      }`}
-    >
-      <button
-        className="flex justify-between items-center cursor-pointer h-6 ml-6"
-        onClick={toggleMenu}
-        aria-label={`${menuVisible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
-      >
-        {Array(3).fill(bgColor).map(renderDot)}
-      </button>
+    const handleClickOutside = useCallback(() => setVisible(false), []);
+    const ref = useOutsideClick<HTMLDivElement>(handleClickOutside);
+
+    return (
       <div
-        className={`flex flex-col rounded-md bg-white p-6 pb-2 ${menuVisible ? '' : 'hidden'}`}
-        aria-hidden={!menuVisible}
+        className={`${visible ? 'bg-white rounded-md shadow-blue-gray/24' : ''} ${className || ''}`}
+        ref={ref}
       >
-        {renderDotsSubMenuItems({ menuItems, router, handlerDecorator, activeSubItem })}
+        <button
+          className="flex justify-between items-center cursor-pointer h-6 ml-6"
+          aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
+          onClick={handleToggle}
+        >
+          {Array(3).fill(bgColor).map(renderDot)}
+        </button>
+        <div
+          className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
+          aria-hidden={!visible}
+        >
+          {items?.map((item, i) => (
+            <a
+              key={item.href || String(i)}
+              className={`text-l-light pb-4 hover:text-primary-main ${
+                item === activeItem ? 'text-primary-main' : ''
+              }`}
+              {...useLink({ router, handlerDecorator }, item)}
+            >
+              {item.text}
+            </a>
+          ))}
+        </div>
       </div>
-    </div>
-  );
-});
-
-type DotsSubMenuItemsProps = {
-  menuItems: LinkProps[];
-  router: Router;
-  handlerDecorator: HandlerDecorator | undefined;
-  activeSubItem?: LinkProps;
-};
-
-const renderDotsSubMenuItems = ({
-  menuItems,
-  router,
-  handlerDecorator,
-  activeSubItem,
-}: DotsSubMenuItemsProps) => {
-  const isActive = (item: LinkProps) => item === activeSubItem;
-
-  return menuItems?.map(({ text, ...rest }) => (
-    <a
-      key={rest.href}
-      {...useLink({ router, handlerDecorator }, rest)}
-      className={`text-l-light pb-4 hover:text-primary-main ${
-        isActive(rest) ? 'text-primary-main' : ''
-      }`}
-    >
-      {text}
-    </a>
-  ));
-};
+    );
+  },
+);
 
 const renderDot = (bgColor: BgColorVersion, i: number) => (
   <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />

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

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
-import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import { IntersectionObserverTag } from '../../ui-kit/IntersectionObserverTag';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { DropdownMenu } from './DropdownMenu';
+import { HeaderSubMenuItem } from './HeaderSubMenuItem';
 
 export interface HeaderSubMenuProps {
   context: ContentPageContext;
@@ -16,69 +14,52 @@ export interface HeaderSubMenuProps {
 }
 
 export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [], bgColor }) => {
-  const { handlerDecorator } = context;
   const router = context.useRouter();
 
-  const subItemsListRef = useRef<HTMLDivElement | null>(null);
-
-  const [menuVisible, setMenuVisible] = useState(false);
+  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 observerCallbacks = useMemo(
+  const subItemsVisibilityHandlers = useMemo(
     () =>
-      subItems.map((_, index) => (entries: IntersectionObserverEntry[]) => {
-        if (!entries.length) {
-          return;
-        }
-
-        // Assumption about sorting entries by time
-        const entry = entries[entries.length - 1];
-
-        if (entry.isIntersecting) {
-          setVisibleItemsCount(handleIntersectionActivation(index));
-        } else {
-          setVisibleItemsCount(handleIntersectionDeactivation(index));
-        }
+      subItems.map((_, index) => (isIntersecting: boolean) => {
+        setVisibleItemsCount(
+          isIntersecting
+            ? handleIntersectionActivation(index)
+            : handleIntersectionDeactivation(index),
+        );
       }),
     [subItems],
   );
 
-  const activeSubItem = findActiveSubItem(router)(subItems);
-  const toggleMenu = () => setMenuVisible(!menuVisible);
-
   return (
     <nav className="relative mt-6">
       <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap mr-52 pb-3">
         {subItems.map((_, i) => (
-          <IntersectionObserverTag
+          <HeaderSubMenuItem
             key={String(i)}
-            tag="span"
-            observerCallback={observerCallbacks[i]}
+            context={context}
+            className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
+            active={_ === activeSubItem}
+            bgColor={bgColor}
             observerOptions={observerOptions}
-          >
-            <HeaderItem
-              className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
-              active={_ === activeSubItem}
-              {...useLink({ router, handlerDecorator }, _)}
-              bgColor={bgColor}
-            />
-          </IntersectionObserverTag>
+            onVisibilityChange={subItemsVisibilityHandlers[i]}
+            {..._}
+          />
         ))}
       </div>
       {dropDownMenuItems.length ? (
         <DropdownMenu
           context={context}
-          activeSubItem={activeSubItem}
-          menuVisible={menuVisible}
-          toggleMenu={toggleMenu}
-          menuItems={dropDownMenuItems}
+          className="absolute w-52 -top-4 right-0 pt-4 z-40"
+          items={dropDownMenuItems}
+          activeItem={activeSubItem}
           bgColor={bgColor}
         />
       ) : null}