@redneckz/wildless-cms-uni-blocks 0.14.875 → 0.14.876

package/src/components/Header/DropdownMenu.tsx

@@ -1,8 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
-import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
-import { useEventListener } from '@redneckz/uni-jsx/lib/hooks/useEventListener';
-import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
 import { useLink } from '../../hooks/useLink';
 import { type ComponentType } from '../../model/ComponentType';
 import { type LinkProps } from '../../model/LinkProps';
@@ -10,91 +6,25 @@ import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { style } from '../../utils/style';
 
 interface DropdownMenuProps extends ComponentType {
-  items: LinkProps[];
+  dropdownRef?: { current: HTMLDivElement | null };
+  items?: LinkProps[];
   activeItem?: LinkProps;
   ariaLabel?: string;
 }
 
-interface ChangeDropdownPositionParams {
-  isOpened: boolean;
-  buttonRef: {
-    current: HTMLDivElement | null;
-  };
-  menuRef: {
-    current: HTMLDivElement | null;
-  };
-}
-
-export const DropdownMenu = JSX<DropdownMenuProps>(
-  ({ className = '', items, activeItem, ariaLabel = 'Меню' }) => {
-    const [isVisible, { setFalse, toggle }] = useBool(false);
-    const ref = useOutsideClick<HTMLDivElement>(setFalse);
-    const dropdownRef = useRef<HTMLDivElement | null>(null);
-
-    const changeDropdownPosition = useCallback(
-      ({ isOpened, buttonRef, menuRef }: ChangeDropdownPositionParams) => {
-        if (isOpened && buttonRef.current && menuRef.current) {
-          const dropdownRect = menuRef.current.getBoundingClientRect();
-          const dropdownButtonRect = buttonRef.current.getBoundingClientRect();
-          const newDropdownPosition = globalThis.innerWidth - dropdownRect.width;
-
-          if (dropdownRect.right >= globalThis.innerWidth) {
-            menuRef.current.style.left = `${newDropdownPosition}px`;
-          } else if (dropdownButtonRect.left > dropdownRect.left) {
-            if (newDropdownPosition > dropdownButtonRect.left) {
-              menuRef.current.style.left = '';
-            } else {
-              menuRef.current.style.left = `${newDropdownPosition}px`;
-            }
-          }
-        }
-      },
-      [isVisible],
-    );
-
-    useEventListener(globalThis, 'resize', () =>
-      changeDropdownPosition({ isOpened: isVisible, buttonRef: ref, menuRef: dropdownRef }),
-    );
-
-    useEffect(() => {
-      changeDropdownPosition({ isOpened: isVisible, buttonRef: ref, menuRef: dropdownRef });
-    }, [isVisible]);
-
-    return (
-      <div
-        className={style(isVisible ? 'rounded-md shadow-blue-gray' : '', className)}
-        ref={ref}
-        role="navigation"
-      >
-        <button
-          type="button"
-          className="group/btn flex justify-between items-center h-6"
-          aria-label={ariaLabel}
-          onClick={toggle}
-          role="button"
-          aria-labelledby="labeldiv"
-        >
-          {Array(3)
-            .fill(null)
-            .map((_, i) => (
-              <div
-                key={String(i)}
-                className="w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white"
-              />
-            ))}
-        </button>
-        <div
-          ref={dropdownRef}
-          className={style('absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40', {
-            hidden: !isVisible,
-          })}
-          aria-hidden={!isVisible}
-        >
-          {renderDropdownItems(items, activeItem)}
-        </div>
-      </div>
-    );
-  },
+export const DropdownMenu = ({
+  dropdownRef,
+  items = [],
+  activeItem,
+  ariaLabel,
+}: DropdownMenuProps) => (
+  <div
+    ref={dropdownRef}
+    className="absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40"
+    aria-label={ariaLabel}
+  >
+    {renderDropdownItems(items, activeItem)}
+  </div>
 );
 
 export const DropdownMenuItem = JSX<LinkProps & { isActive?: boolean }>(({ isActive, ...rest }) => {

package/src/components/Header/Header.fixture.tsx

@@ -2,6 +2,7 @@ import '../../setup-fixture';
 
 import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { Header } from './Header';
 import { type HeaderProps } from './HeaderProps';
 
@@ -27,18 +28,21 @@ export default {
     <div>
       <Header options={options} {...props} />
       <DialogManager />
+      <PopupManager />
     </div>
   ),
   customLogo: (
     <div>
       <Header options={options} {...props} logo={logo} />
       <DialogManager />
+      <PopupManager />
     </div>
   ),
   transparent: (
     <div>
       <Header options={options} {...props} bgColor="transparent" />
       <DialogManager />
+      <PopupManager />
     </div>
   ),
 };

package/src/components/Header/HeaderMoreMenuItem.tsx

@@ -0,0 +1,60 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { type ComponentType } from '../../model/ComponentType';
+import { type LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
+import { useDropdownSubMenu } from './useDropdownSubMenu';
+
+interface HeaderMoreMenuItemProps extends ComponentType {
+  items: LinkProps[];
+  activeItem?: LinkProps;
+  ariaLabel?: string;
+}
+
+export const HeaderMoreMenuItem = JSX<HeaderMoreMenuItemProps>(
+  ({ className = '', items, activeItem, ariaLabel = 'Меню' }) => {
+    const [isOpenDropdown, { setFalse, toggle }] = useBool(false);
+
+    const dropdownMenu = useDropdownSubMenu({
+      items,
+      onClose: setFalse,
+      isOpen: isOpenDropdown,
+      activeItem,
+    });
+
+    useEffect(() => {
+      dropdownMenu.current?.addEventListener('mouseleave', setFalse);
+
+      return () => {
+        dropdownMenu.current?.removeEventListener('mouseleave', setFalse);
+      };
+    }, []);
+
+    return (
+      <div
+        className={style(isOpenDropdown ? 'rounded-md shadow-blue-gray' : '', className)}
+        ref={dropdownMenu}
+        role="navigation"
+      >
+        <button
+          type="button"
+          className="group/btn flex justify-between items-center h-6"
+          aria-label={ariaLabel}
+          onClick={toggle}
+          role="button"
+          aria-labelledby="labeldiv"
+        >
+          {Array(3)
+            .fill(null)
+            .map((_, i) => (
+              <div
+                key={String(i)}
+                className="w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white"
+              />
+            ))}
+        </button>
+      </div>
+    );
+  },
+);

package/src/components/Header/HeaderSubMenu.tsx

@@ -6,8 +6,8 @@ import { type IntersectionObserverOptions } from '../../hooks/useIntersectionObs
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type IconVersion } from '../../model/IconVersion';
 import { projectSettings } from '../../ProjectSettings';
-import { DropdownMenu } from './DropdownMenu';
 import { HeaderChatBotButton } from './HeaderChatBotButton';
+import { HeaderMoreMenuItem } from './HeaderMoreMenuItem';
 import { type InternetButtonProps } from './HeaderProps';
 import { HeaderSubMenuItem } from './HeaderSubMenuItem';
 import { InternetBankButton } from './InternetBankButton';
@@ -56,6 +56,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
               key={String(i)}
               className={visibleItemsCount - 1 < i ? 'invisible' : ''}
               active={_ === activeSubItem}
+              activeItem={activeSubItem}
               observerOptions={observerOptions}
               onVisibilityChange={subItemsVisibilityHandlers[i]}
               data={_.dataHeader}
@@ -64,7 +65,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
           ))}
         </div>
         {dropDownMenuItems.length ? (
-          <DropdownMenu
+          <HeaderMoreMenuItem
             items={dropDownMenuItems}
             activeItem={activeSubItem}
             ariaLabel={dropdownMenuAriaLabel}

package/src/components/Header/HeaderSubMenuItem.tsx

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { type NavigationLinkProps } from '../../data/NavigationData';
 import {
   useIntersectionObserver,
   type IntersectionObserverOptions,
@@ -7,15 +9,20 @@ import {
 import { type ComponentType } from '../../model/ComponentType';
 import { type LinkProps } from '../../model/LinkProps';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
+import { useDropdownSubMenu } from './useDropdownSubMenu';
 
 export interface HeaderSubMenuItemProps extends LinkProps, ComponentType {
   active?: boolean;
+  activeItem?: LinkProps;
   observerOptions?: IntersectionObserverOptions;
   onVisibilityChange?: (isIntersecting: boolean) => void;
+  items?: NavigationLinkProps[];
 }
 
 export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
-  ({ observerOptions, onVisibilityChange, children, className, ...rest }) => {
+  ({ observerOptions, onVisibilityChange, children, className, items, activeItem, ...rest }) => {
+    const [isOpenDropdown, { setFalse, setTrue }] = useBool(false);
+
     const observerCallback = useCallback(
       (entries: IntersectionObserverEntry[]) => {
         if (!entries.length || !onVisibilityChange) {
@@ -31,10 +38,29 @@ export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
     );
     const ref = useIntersectionObserver<HTMLSpanElement>(observerCallback, observerOptions);
 
+    const dropdownMenu = useDropdownSubMenu({
+      items,
+      onClose: setFalse,
+      isOpen: isOpenDropdown,
+      activeItem,
+    });
+
+    useEffect(() => {
+      dropdownMenu.current?.addEventListener('mouseenter', setTrue);
+      dropdownMenu.current?.addEventListener('mouseleave', setFalse);
+
+      return () => {
+        dropdownMenu.current?.addEventListener('mouseenter', setTrue);
+        dropdownMenu.current?.removeEventListener('mouseleave', setFalse);
+      };
+    }, []);
+
     return (
-      <span ref={ref} className={className} role="menuitem">
-        <HeaderItem {...rest}>{children}</HeaderItem>
-      </span>
+      <div className="inline-block" ref={dropdownMenu}>
+        <span ref={ref} className={className} role="menuitem">
+          <HeaderItem {...rest}>{children}</HeaderItem>
+        </span>
+      </div>
     );
   },
 );

package/src/components/Header/HeaderTopMenu.tsx

@@ -10,7 +10,7 @@ import { type BlockVersion } from '../../model/BlockVersion';
 import { type ComponentType } from '../../model/ComponentType';
 import { type LogoType } from '../../model/LogoType';
 import { Logo } from '../../ui-kit/Logo/Logo';
-import { DropdownMenu } from './DropdownMenu';
+import { HeaderMoreMenuItem } from './HeaderMoreMenuItem';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { HeaderTopMenuItem } from './HeaderTopMenuItem';
 
@@ -80,8 +80,8 @@ export const HeaderTopMenu = JSX<HeaderMenuProps>(
           ))}
         </div>
         {dropDownMenuItems.length ? (
-          <DropdownMenu
-            className="mx-xs"
+          <HeaderMoreMenuItem
+            className="mx-xs rounded-md shadow-blue-gray"
             items={dropDownMenuItems}
             activeItem={activeTopItem}
             ariaLabel={dropdownMenuAriaLabel}

package/src/components/Header/useDropdownSubMenu.tsx

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
+import { type LinkProps } from '../../model/LinkProps';
+import type { OnCloseProps } from '../../model/OnCloseProps';
+import { usePopupManager } from '../../ui-kit/PopupManager/usePopupManager';
+import { DropdownMenu } from './DropdownMenu';
+
+interface DropdownSubMenuOptions extends OnCloseProps {
+  isOpen?: boolean;
+  activeItem?: LinkProps;
+  items?: LinkProps[];
+}
+
+export function useDropdownSubMenu({ items, activeItem, onClose, isOpen }: DropdownSubMenuOptions) {
+  const popup = usePopupManager();
+
+  useEffect(() => {
+    if (isOpen) {
+      popup.close();
+    }
+  }, [isOpen]);
+
+  const close = useCallback(() => {
+    popup.close();
+    onClose?.();
+  }, [onClose]);
+
+  const parentRef = useRef<HTMLDivElement | null>(null);
+  const popupRef = useOutsideClick<HTMLDivElement>(close);
+
+  useEffect(() => {
+    if (!isOpen || !parentRef.current || !items?.length) {
+      return;
+    }
+
+    const parentElement = parentRef.current;
+    const { top, left, width, height } = parentElement.getBoundingClientRect();
+
+    popup.open({
+      popup: <DropdownMenu dropdownRef={popupRef} items={items} activeItem={activeItem} />,
+      top: top + window.scrollY + height,
+      left,
+      width,
+    });
+  }, [isOpen, items, close]);
+
+  return parentRef;
+}

package/src/data/NavigationData.ts

@@ -6,6 +6,7 @@ export interface NavigationLinkProps extends LinkProps {
   displayArea?: string;
   dataHeader?: AspectsDef[];
   dataFooter?: AspectsDef[];
+  items?: NavigationLinkProps[];
 }
 
 /**

package/src/icons/IconName.ts

@@ -7,11 +7,11 @@ export const IconsWithoutInversion = new Set([
 ]);
 
 export enum IconMap {
-  YoutubeIcon = 'YoutubeIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WalletIcon = 'WalletIcon', WalletAddIcon = 'WalletAddIcon', VKIcon = 'VKIcon', UserTickIcon = 'UserTickIcon', UserSquareIcon = 'UserSquareIcon', UserGeoLocationIcon = 'UserGeoLocationIcon', TelegramIcon = 'TelegramIcon', StarIcon = 'StarIcon', SoundIcon = 'SoundIcon', SmallClockIcon = 'SmallClockIcon', SignDocsIcon = 'SignDocsIcon', ShieldTickIcon = 'ShieldTickIcon', SecurityСardIcon = 'SecurityСardIcon', SafeIcon = 'SafeIcon', RutubeIcon = 'RutubeIcon', RustoreIcon = 'RustoreIcon', RoundRubleIcon = 'RoundRubleIcon', ResponseOKIcon = 'ResponseOKIcon', ResponseFailIcon = 'ResponseFailIcon', RefreshIcon = 'RefreshIcon', ProfileIcon = 'ProfileIcon', Profile2UserIcon = 'Profile2UserIcon', PlusIcon = 'PlusIcon', PlusCircleIcon = 'PlusCircleIcon', PlayMarketIcon = 'PlayMarketIcon', PhoneIcon = 'PhoneIcon', PhoneCallingIcon = 'PhoneCallingIcon', PersonalCardIcon = 'PersonalCardIcon', PercentIcon = 'PercentIcon', PercentageRoundIcon = 'PercentageRoundIcon', PassSendIcon = 'PassSendIcon', PackA4Icon = 'PackA4Icon', OkIcon = 'OkIcon', NotificationBingIcon = 'NotificationBingIcon', NewLoanIcon = 'NewLoanIcon', NewDocIcon = 'NewDocIcon', MonitorMobileIcon = 'MonitorMobileIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MoneyIcon = 'MoneyIcon', MinusIcon = 'MinusIcon', MapOpenedIcon = 'MapOpenedIcon', MapMarkerSingleIcon = 'MapMarkerSingleIcon', MapMarkerClusterYellowIcon = 'MapMarkerClusterYellowIcon', MapMarkerClusterIcon = 'MapMarkerClusterIcon', MailIcon = 'MailIcon', MagnifierIcon = 'MagnifierIcon', LoupeIcon = 'LoupeIcon', LogoIcon = 'LogoIcon', LockIcon = 'LockIcon', InfoCircleIcon = 'InfoCircleIcon', HuaweiIcon = 'HuaweiIcon', HouseIcon = 'HouseIcon', HeartTickIcon = 'HeartTickIcon', HeartIcon = 'HeartIcon', HeadphonesIcon = 'HeadphonesIcon', GridIcon = 'GridIcon', GpsIcon = 'GpsIcon', GosUslugiIcon = 'GosUslugiIcon', GlobalIcon = 'GlobalIcon', GeolocationIcon = 'GeolocationIcon', FullScreenIcon = 'FullScreenIcon', FaxIcon = 'FaxIcon', EuroIcon = 'EuroIcon', EmptyWalletIcon = 'EmptyWalletIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', DzenIcon = 'DzenIcon', DoneSimpleIcon = 'DoneSimpleIcon', DoneIcon = 'DoneIcon', DollarIcon = 'DollarIcon', DocIcon = 'DocIcon', DocDownloadIcon = 'DocDownloadIcon', DiscountShapeIcon = 'DiscountShapeIcon', DevIcon = 'DevIcon', CupIcon = 'CupIcon', CourtHouseIcon = 'CourtHouseIcon', CopyIcon = 'CopyIcon', ConvertCardIcon = 'ConvertCardIcon', CoinIcon = 'CoinIcon', CloseIcon = 'CloseIcon', ClientIcon = 'ClientIcon', ChineseYuanRenminbiIcon = 'ChineseYuanRenminbiIcon', ChevronLeftIcon = 'ChevronLeftIcon', ChatBotIcon = 'ChatBotIcon', ChartSquareIcon = 'ChartSquareIcon', ChartRoundIcon = 'ChartRoundIcon', ChartIcon = 'ChartIcon', CardTickIcon = 'CardTickIcon', CardSendIcon = 'CardSendIcon', CardPosIcon = 'CardPosIcon', CardIcon = 'CardIcon', CalendarTickIcon = 'CalendarTickIcon', CalendarIcon = 'CalendarIcon', CalendarCircleIcon = 'CalendarCircleIcon', BurgerIcon = 'BurgerIcon', BuildingIcon = 'BuildingIcon', BriefcaseIcon = 'BriefcaseIcon', BelarusianFlag = 'BelarusianFlag', BankIcon = 'BankIcon', BankColorIcon = 'BankColorIcon', AtmIcon = 'AtmIcon', ArrowUpSolidIcon = 'ArrowUpSolidIcon', ArrowUpIcon = 'ArrowUpIcon', ArrowTopRightIcon = 'ArrowTopRightIcon', ArrowRightIcon = 'ArrowRightIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowDownSolidIcon = 'ArrowDownSolidIcon', ArrowDownIcon = 'ArrowDownIcon', AppleIcon = 'AppleIcon', AlarmIcon = 'AlarmIcon', ActualBalanceIcon = 'ActualBalanceIcon', AchievementIcon = 'AchievementIcon'
+  YoutubeIcon = 'YoutubeIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WalletIcon = 'WalletIcon', WalletAddIcon = 'WalletAddIcon', VKIcon = 'VKIcon', UserTickIcon = 'UserTickIcon', UserSquareIcon = 'UserSquareIcon', UserGeoLocationIcon = 'UserGeoLocationIcon', TelegramIcon = 'TelegramIcon', StarIcon = 'StarIcon', SoundIcon = 'SoundIcon', SmallClockIcon = 'SmallClockIcon', SignDocsIcon = 'SignDocsIcon', ShieldTickIcon = 'ShieldTickIcon', SecurityСardIcon = 'SecurityСardIcon', SafeIcon = 'SafeIcon', RutubeIcon = 'RutubeIcon', RustoreIcon = 'RustoreIcon', RoundRubleIcon = 'RoundRubleIcon', ResponseOKIcon = 'ResponseOKIcon', ResponseFailIcon = 'ResponseFailIcon', RefreshIcon = 'RefreshIcon', ProfileIcon = 'ProfileIcon', Profile2UserIcon = 'Profile2UserIcon', PlusIcon = 'PlusIcon', PlusCircleIcon = 'PlusCircleIcon', PlayMarketIcon = 'PlayMarketIcon', PhoneIcon = 'PhoneIcon', PhoneCallingIcon = 'PhoneCallingIcon', PersonalCardIcon = 'PersonalCardIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentIcon = 'PercentIcon', PassSendIcon = 'PassSendIcon', PackA4Icon = 'PackA4Icon', OkIcon = 'OkIcon', NotificationBingIcon = 'NotificationBingIcon', NewLoanIcon = 'NewLoanIcon', NewDocIcon = 'NewDocIcon', MonitorMobileIcon = 'MonitorMobileIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MoneyIcon = 'MoneyIcon', MinusIcon = 'MinusIcon', MapOpenedIcon = 'MapOpenedIcon', MapMarkerSingleIcon = 'MapMarkerSingleIcon', MapMarkerClusterYellowIcon = 'MapMarkerClusterYellowIcon', MapMarkerClusterIcon = 'MapMarkerClusterIcon', MailIcon = 'MailIcon', MagnifierIcon = 'MagnifierIcon', LoupeIcon = 'LoupeIcon', LogoIcon = 'LogoIcon', LockIcon = 'LockIcon', InfoCircleIcon = 'InfoCircleIcon', HuaweiIcon = 'HuaweiIcon', HouseIcon = 'HouseIcon', HeartTickIcon = 'HeartTickIcon', HeartIcon = 'HeartIcon', HeadphonesIcon = 'HeadphonesIcon', GridIcon = 'GridIcon', GpsIcon = 'GpsIcon', GosUslugiIcon = 'GosUslugiIcon', GlobalIcon = 'GlobalIcon', GeolocationIcon = 'GeolocationIcon', FullScreenIcon = 'FullScreenIcon', FaxIcon = 'FaxIcon', EuroIcon = 'EuroIcon', EmptyWalletIcon = 'EmptyWalletIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', DzenIcon = 'DzenIcon', DoneSimpleIcon = 'DoneSimpleIcon', DoneIcon = 'DoneIcon', DollarIcon = 'DollarIcon', DocIcon = 'DocIcon', DocDownloadIcon = 'DocDownloadIcon', DiscountShapeIcon = 'DiscountShapeIcon', DevIcon = 'DevIcon', CupIcon = 'CupIcon', CourtHouseIcon = 'CourtHouseIcon', CopyIcon = 'CopyIcon', ConvertCardIcon = 'ConvertCardIcon', CoinIcon = 'CoinIcon', CloseIcon = 'CloseIcon', ClientIcon = 'ClientIcon', ChineseYuanRenminbiIcon = 'ChineseYuanRenminbiIcon', ChevronLeftIcon = 'ChevronLeftIcon', ChatBotIcon = 'ChatBotIcon', ChartSquareIcon = 'ChartSquareIcon', ChartRoundIcon = 'ChartRoundIcon', ChartIcon = 'ChartIcon', CardTickIcon = 'CardTickIcon', CardSendIcon = 'CardSendIcon', CardPosIcon = 'CardPosIcon', CardIcon = 'CardIcon', CalendarTickIcon = 'CalendarTickIcon', CalendarIcon = 'CalendarIcon', CalendarCircleIcon = 'CalendarCircleIcon', BurgerIcon = 'BurgerIcon', BuildingIcon = 'BuildingIcon', BriefcaseIcon = 'BriefcaseIcon', BelarusianFlag = 'BelarusianFlag', BankIcon = 'BankIcon', BankColorIcon = 'BankColorIcon', AtmIcon = 'AtmIcon', ArrowUpSolidIcon = 'ArrowUpSolidIcon', ArrowUpIcon = 'ArrowUpIcon', ArrowTopRightIcon = 'ArrowTopRightIcon', ArrowRightIcon = 'ArrowRightIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowDownSolidIcon = 'ArrowDownSolidIcon', ArrowDownIcon = 'ArrowDownIcon', AppleIcon = 'AppleIcon', AlarmIcon = 'AlarmIcon', ActualBalanceIcon = 'ActualBalanceIcon', AchievementIcon = 'AchievementIcon'
 }
 
 export enum IconTitleMap {
-  YoutubeIcon = 'Лого «Youtube»', WalletWithMoneyIcon = 'Кошелёк с деньгами', WalletIcon = 'Кошелёк', WalletAddIcon = 'Кошелёк с плюсом', VKIcon = 'Лого «VK»', UserTickIcon = 'Пользователь', UserSquareIcon = 'Пользователь в рамке', UserGeoLocationIcon = 'Самолётик', TelegramIcon = 'Лого «Telegram»', StarIcon = 'Звезда', SoundIcon = 'Кольцо', SmallClockIcon = 'Маленькие часы', SignDocsIcon = 'Подписанные документы', ShieldTickIcon = 'Безопасность', SecurityСardIcon = 'Безопасность', SafeIcon = 'Сейф', RutubeIcon = 'Лого «Rutube»', RustoreIcon = 'Лого «Rustore»', RoundRubleIcon = 'Рубль (круг.)', ResponseOKIcon = 'Ок', ResponseFailIcon = 'Ошибка', RefreshIcon = 'RefreshIcon', ProfileIcon = 'Профиль', Profile2UserIcon = 'Профиль, 2 персоны', PlusIcon = 'Плюс', PlusCircleIcon = 'Плюс в круге', PlayMarketIcon = 'Лого «PlayMarket»', PhoneIcon = 'Телефон', PhoneCallingIcon = 'Звонящий телефон', PersonalCardIcon = 'Персональная карта', PercentIcon = 'Проценты', PercentageRoundIcon = 'Проценты (круг.)', PassSendIcon = 'Бизнес', PackA4Icon = 'Пачка бумаги А4', OkIcon = 'Лого «Одноклассники»', NotificationBingIcon = 'Колокольчик нотификаций', NewLoanIcon = 'Новая заявка', NewDocIcon = 'Новый документ', MonitorMobileIcon = 'Монитор и мобильный', MoneyInsuranceIcon = 'Денежное страхование', MoneyIcon = 'Деньги', MinusIcon = 'Минус', MapOpenedIcon = 'Иконка Развёрнутая карта', MapMarkerSingleIcon = 'Маркер карты РСХБ', MapMarkerClusterYellowIcon = 'Маркер карты (желтый)', MapMarkerClusterIcon = 'Маркер карты', MailIcon = 'E-mail', MagnifierIcon = 'MagnifierIcon', LoupeIcon = 'Лупа', LogoIcon = 'Логотип', LockIcon = 'Замок', InfoCircleIcon = 'InfoCircleIcon', HuaweiIcon = 'Лого «Huawei»', HouseIcon = 'Ипотека', HeartTickIcon = 'Сердцебеение', HeartIcon = 'Сердце', HeadphonesIcon = 'HeadphonesIcon', GridIcon = 'Сетка (белая)', GpsIcon = 'Gps', GosUslugiIcon = 'ГосУслуги', GlobalIcon = 'Глобус', GeolocationIcon = 'Геолокация', FullScreenIcon = 'FullScreenIcon', FaxIcon = 'Факс', EuroIcon = 'Евро', EmptyWalletIcon = 'Пустой кошелёк', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', DzenIcon = 'Лого «Дзен»', DoneSimpleIcon = 'Зелёная \'галочка\'', DoneIcon = 'Зелёная \'галочка\' в круге', DollarIcon = 'Доллар', DocIcon = 'Документ', DocDownloadIcon = 'Скачать документ', DiscountShapeIcon = 'Скидка', DevIcon = 'Разработка', CupIcon = 'Кубок', CourtHouseIcon = 'Здание суда', CopyIcon = 'Копирование', ConvertCardIcon = 'Конвертирование', CoinIcon = 'Монеты', CloseIcon = 'Крестик', ClientIcon = 'Клиент', ChineseYuanRenminbiIcon = 'Китайский юань', ChevronLeftIcon = 'Стрелка \'Влево\'', ChatBotIcon = 'Чат-бот', ChartSquareIcon = 'Деньги внутри кошелька', ChartRoundIcon = 'Диаграмма (в круге)', ChartIcon = 'Инвестиции', CardTickIcon = 'Кред. карта с галочкой', CardSendIcon = 'Карта', CardPosIcon = 'Кред. карта под наклоном', CardIcon = 'Кред. карта', CalendarTickIcon = 'Календарь с галочкой', CalendarIcon = 'Календарь', CalendarCircleIcon = 'Скруглённый календарь', BurgerIcon = 'Бургер', BuildingIcon = 'Здание с деревом', BriefcaseIcon = 'Портфель', BelarusianFlag = 'Белорусский флаг', BankIcon = 'Банк', BankColorIcon = 'Банк (в цвете)', AtmIcon = 'Банкомат', ArrowUpSolidIcon = 'Стрелка сплошная \'Вверх\'', ArrowUpIcon = 'Стрелка \'Вверх\'', ArrowTopRightIcon = 'Стрелка \'Вверх-право\'', ArrowRightIcon = 'Стрелка \'Вправо\'', ArrowLeftIcon = 'Стрелка \'Влево\'', ArrowDownSolidIcon = 'Стрелка сплошная \'Вниз\'', ArrowDownIcon = 'Стрелка \'Вниз\'', AppleIcon = 'Лого «Apple»', AlarmIcon = 'Предупреждение', ActualBalanceIcon = 'Деньги', AchievementIcon = 'Достижение'
+  YoutubeIcon = 'Лого «Youtube»', WalletWithMoneyIcon = 'Кошелёк с деньгами', WalletIcon = 'Кошелёк', WalletAddIcon = 'Кошелёк с плюсом', VKIcon = 'Лого «VK»', UserTickIcon = 'Пользователь', UserSquareIcon = 'Пользователь в рамке', UserGeoLocationIcon = 'Самолётик', TelegramIcon = 'Лого «Telegram»', StarIcon = 'Звезда', SoundIcon = 'Кольцо', SmallClockIcon = 'Маленькие часы', SignDocsIcon = 'Подписанные документы', ShieldTickIcon = 'Безопасность', SecurityСardIcon = 'Безопасность', SafeIcon = 'Сейф', RutubeIcon = 'Лого «Rutube»', RustoreIcon = 'Лого «Rustore»', RoundRubleIcon = 'Рубль (круг.)', ResponseOKIcon = 'Ок', ResponseFailIcon = 'Ошибка', RefreshIcon = 'RefreshIcon', ProfileIcon = 'Профиль', Profile2UserIcon = 'Профиль, 2 персоны', PlusIcon = 'Плюс', PlusCircleIcon = 'Плюс в круге', PlayMarketIcon = 'Лого «PlayMarket»', PhoneIcon = 'Телефон', PhoneCallingIcon = 'Звонящий телефон', PersonalCardIcon = 'Персональная карта', PercentageRoundIcon = 'Проценты (круг.)', PercentIcon = 'Проценты', PassSendIcon = 'Бизнес', PackA4Icon = 'Пачка бумаги А4', OkIcon = 'Лого «Одноклассники»', NotificationBingIcon = 'Колокольчик нотификаций', NewLoanIcon = 'Новая заявка', NewDocIcon = 'Новый документ', MonitorMobileIcon = 'Монитор и мобильный', MoneyInsuranceIcon = 'Денежное страхование', MoneyIcon = 'Деньги', MinusIcon = 'Минус', MapOpenedIcon = 'Иконка Развёрнутая карта', MapMarkerSingleIcon = 'Маркер карты РСХБ', MapMarkerClusterYellowIcon = 'Маркер карты (желтый)', MapMarkerClusterIcon = 'Маркер карты', MailIcon = 'E-mail', MagnifierIcon = 'MagnifierIcon', LoupeIcon = 'Лупа', LogoIcon = 'Логотип', LockIcon = 'Замок', InfoCircleIcon = 'InfoCircleIcon', HuaweiIcon = 'Лого «Huawei»', HouseIcon = 'Ипотека', HeartTickIcon = 'Сердцебеение', HeartIcon = 'Сердце', HeadphonesIcon = 'HeadphonesIcon', GridIcon = 'Сетка (белая)', GpsIcon = 'Gps', GosUslugiIcon = 'ГосУслуги', GlobalIcon = 'Глобус', GeolocationIcon = 'Геолокация', FullScreenIcon = 'FullScreenIcon', FaxIcon = 'Факс', EuroIcon = 'Евро', EmptyWalletIcon = 'Пустой кошелёк', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', DzenIcon = 'Лого «Дзен»', DoneSimpleIcon = 'Зелёная \'галочка\'', DoneIcon = 'Зелёная \'галочка\' в круге', DollarIcon = 'Доллар', DocIcon = 'Документ', DocDownloadIcon = 'Скачать документ', DiscountShapeIcon = 'Скидка', DevIcon = 'Разработка', CupIcon = 'Кубок', CourtHouseIcon = 'Здание суда', CopyIcon = 'Копирование', ConvertCardIcon = 'Конвертирование', CoinIcon = 'Монеты', CloseIcon = 'Крестик', ClientIcon = 'Клиент', ChineseYuanRenminbiIcon = 'Китайский юань', ChevronLeftIcon = 'Стрелка \'Влево\'', ChatBotIcon = 'Чат-бот', ChartSquareIcon = 'Деньги внутри кошелька', ChartRoundIcon = 'Диаграмма (в круге)', ChartIcon = 'Инвестиции', CardTickIcon = 'Кред. карта с галочкой', CardSendIcon = 'Карта', CardPosIcon = 'Кред. карта под наклоном', CardIcon = 'Кред. карта', CalendarTickIcon = 'Календарь с галочкой', CalendarIcon = 'Календарь', CalendarCircleIcon = 'Скруглённый календарь', BurgerIcon = 'Бургер', BuildingIcon = 'Здание с деревом', BriefcaseIcon = 'Портфель', BelarusianFlag = 'Белорусский флаг', BankIcon = 'Банк', BankColorIcon = 'Банк (в цвете)', AtmIcon = 'Банкомат', ArrowUpSolidIcon = 'Стрелка сплошная \'Вверх\'', ArrowUpIcon = 'Стрелка \'Вверх\'', ArrowTopRightIcon = 'Стрелка \'Вверх-право\'', ArrowRightIcon = 'Стрелка \'Вправо\'', ArrowLeftIcon = 'Стрелка \'Влево\'', ArrowDownSolidIcon = 'Стрелка сплошная \'Вниз\'', ArrowDownIcon = 'Стрелка \'Вниз\'', AppleIcon = 'Лого «Apple»', AlarmIcon = 'Предупреждение', ActualBalanceIcon = 'Деньги', AchievementIcon = 'Достижение'
 }
 
 /**
@@ -19,7 +19,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Лого «Youtube»', 'Кошелёк с деньгами', 'Кошелёк', 'Кошелёк с плюсом', 'Лого «VK»', 'Пользователь', 'Пользователь в рамке', 'Самолётик', 'Лого «Telegram»', 'Звезда', 'Кольцо', 'Маленькие часы', 'Подписанные документы', 'Безопасность', 'Безопасность', 'Сейф', 'Лого «Rutube»', 'Лого «Rustore»', 'Рубль (круг.)', 'Ок', 'Ошибка', 'RefreshIcon', 'Профиль', 'Профиль, 2 персоны', 'Плюс', 'Плюс в круге', 'Лого «PlayMarket»', 'Телефон', 'Звонящий телефон', 'Персональная карта', 'Проценты', 'Проценты (круг.)', 'Бизнес', 'Пачка бумаги А4', 'Лого «Одноклассники»', 'Колокольчик нотификаций', 'Новая заявка', 'Новый документ', 'Монитор и мобильный', 'Денежное страхование', 'Деньги', 'Минус', 'Иконка Развёрнутая карта', 'Маркер карты РСХБ', 'Маркер карты (желтый)', 'Маркер карты', 'E-mail', 'MagnifierIcon', 'Лупа', 'Логотип', 'Замок', 'InfoCircleIcon', 'Лого «Huawei»', 'Ипотека', 'Сердцебеение', 'Сердце', 'HeadphonesIcon', 'Сетка (белая)', 'Gps', 'ГосУслуги', 'Глобус', 'Геолокация', 'FullScreenIcon', 'Факс', 'Евро', 'Пустой кошелёк', 'Пустой кошелёк с возвратом', 'Лого «Дзен»', 'Зелёная \'галочка\'', 'Зелёная \'галочка\' в круге', 'Доллар', 'Документ', 'Скачать документ', 'Скидка', 'Разработка', 'Кубок', 'Здание суда', 'Копирование', 'Конвертирование', 'Монеты', 'Крестик', 'Клиент', 'Китайский юань', 'Стрелка \'Влево\'', 'Чат-бот', 'Деньги внутри кошелька', 'Диаграмма (в круге)', 'Инвестиции', 'Кред. карта с галочкой', 'Карта', 'Кред. карта под наклоном', 'Кред. карта', 'Календарь с галочкой', 'Календарь', 'Скруглённый календарь', 'Бургер', 'Здание с деревом', 'Портфель', 'Белорусский флаг', 'Банк', 'Банк (в цвете)', 'Банкомат', 'Стрелка сплошная \'Вверх\'', 'Стрелка \'Вверх\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вправо\'', 'Стрелка \'Влево\'', 'Стрелка сплошная \'Вниз\'', 'Стрелка \'Вниз\'', 'Лого «Apple»', 'Предупреждение', 'Деньги', 'Достижение'
+ *   'Лого «Youtube»', 'Кошелёк с деньгами', 'Кошелёк', 'Кошелёк с плюсом', 'Лого «VK»', 'Пользователь', 'Пользователь в рамке', 'Самолётик', 'Лого «Telegram»', 'Звезда', 'Кольцо', 'Маленькие часы', 'Подписанные документы', 'Безопасность', 'Безопасность', 'Сейф', 'Лого «Rutube»', 'Лого «Rustore»', 'Рубль (круг.)', 'Ок', 'Ошибка', 'RefreshIcon', 'Профиль', 'Профиль, 2 персоны', 'Плюс', 'Плюс в круге', 'Лого «PlayMarket»', 'Телефон', 'Звонящий телефон', 'Персональная карта', 'Проценты (круг.)', 'Проценты', 'Бизнес', 'Пачка бумаги А4', 'Лого «Одноклассники»', 'Колокольчик нотификаций', 'Новая заявка', 'Новый документ', 'Монитор и мобильный', 'Денежное страхование', 'Деньги', 'Минус', 'Иконка Развёрнутая карта', 'Маркер карты РСХБ', 'Маркер карты (желтый)', 'Маркер карты', 'E-mail', 'MagnifierIcon', 'Лупа', 'Логотип', 'Замок', 'InfoCircleIcon', 'Лого «Huawei»', 'Ипотека', 'Сердцебеение', 'Сердце', 'HeadphonesIcon', 'Сетка (белая)', 'Gps', 'ГосУслуги', 'Глобус', 'Геолокация', 'FullScreenIcon', 'Факс', 'Евро', 'Пустой кошелёк', 'Пустой кошелёк с возвратом', 'Лого «Дзен»', 'Зелёная \'галочка\'', 'Зелёная \'галочка\' в круге', 'Доллар', 'Документ', 'Скачать документ', 'Скидка', 'Разработка', 'Кубок', 'Здание суда', 'Копирование', 'Конвертирование', 'Монеты', 'Крестик', 'Клиент', 'Китайский юань', 'Стрелка \'Влево\'', 'Чат-бот', 'Деньги внутри кошелька', 'Диаграмма (в круге)', 'Инвестиции', 'Кред. карта с галочкой', 'Карта', 'Кред. карта под наклоном', 'Кред. карта', 'Календарь с галочкой', 'Календарь', 'Скруглённый календарь', 'Бургер', 'Здание с деревом', 'Портфель', 'Белорусский флаг', 'Банк', 'Банк (в цвете)', 'Банкомат', 'Стрелка сплошная \'Вверх\'', 'Стрелка \'Вверх\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вправо\'', 'Стрелка \'Влево\'', 'Стрелка сплошная \'Вниз\'', 'Стрелка \'Вниз\'', 'Лого «Apple»', 'Предупреждение', 'Деньги', 'Достижение'
  * ]
  */
-export type IconName = '' | 'YoutubeIcon' | 'WalletWithMoneyIcon' | 'WalletIcon' | 'WalletAddIcon' | 'VKIcon' | 'UserTickIcon' | 'UserSquareIcon' | 'UserGeoLocationIcon' | 'TelegramIcon' | 'StarIcon' | 'SoundIcon' | 'SmallClockIcon' | 'SignDocsIcon' | 'ShieldTickIcon' | 'SecurityСardIcon' | 'SafeIcon' | 'RutubeIcon' | 'RustoreIcon' | 'RoundRubleIcon' | 'ResponseOKIcon' | 'ResponseFailIcon' | 'RefreshIcon' | 'ProfileIcon' | 'Profile2UserIcon' | 'PlusIcon' | 'PlusCircleIcon' | 'PlayMarketIcon' | 'PhoneIcon' | 'PhoneCallingIcon' | 'PersonalCardIcon' | 'PercentIcon' | 'PercentageRoundIcon' | 'PassSendIcon' | 'PackA4Icon' | 'OkIcon' | 'NotificationBingIcon' | 'NewLoanIcon' | 'NewDocIcon' | 'MonitorMobileIcon' | 'MoneyInsuranceIcon' | 'MoneyIcon' | 'MinusIcon' | 'MapOpenedIcon' | 'MapMarkerSingleIcon' | 'MapMarkerClusterYellowIcon' | 'MapMarkerClusterIcon' | 'MailIcon' | 'MagnifierIcon' | 'LoupeIcon' | 'LogoIcon' | 'LockIcon' | 'InfoCircleIcon' | 'HuaweiIcon' | 'HouseIcon' | 'HeartTickIcon' | 'HeartIcon' | 'HeadphonesIcon' | 'GridIcon' | 'GpsIcon' | 'GosUslugiIcon' | 'GlobalIcon' | 'GeolocationIcon' | 'FullScreenIcon' | 'FaxIcon' | 'EuroIcon' | 'EmptyWalletIcon' | 'EmptyWalletChangeIcon' | 'DzenIcon' | 'DoneSimpleIcon' | 'DoneIcon' | 'DollarIcon' | 'DocIcon' | 'DocDownloadIcon' | 'DiscountShapeIcon' | 'DevIcon' | 'CupIcon' | 'CourtHouseIcon' | 'CopyIcon' | 'ConvertCardIcon' | 'CoinIcon' | 'CloseIcon' | 'ClientIcon' | 'ChineseYuanRenminbiIcon' | 'ChevronLeftIcon' | 'ChatBotIcon' | 'ChartSquareIcon' | 'ChartRoundIcon' | 'ChartIcon' | 'CardTickIcon' | 'CardSendIcon' | 'CardPosIcon' | 'CardIcon' | 'CalendarTickIcon' | 'CalendarIcon' | 'CalendarCircleIcon' | 'BurgerIcon' | 'BuildingIcon' | 'BriefcaseIcon' | 'BelarusianFlag' | 'BankIcon' | 'BankColorIcon' | 'AtmIcon' | 'ArrowUpSolidIcon' | 'ArrowUpIcon' | 'ArrowTopRightIcon' | 'ArrowRightIcon' | 'ArrowLeftIcon' | 'ArrowDownSolidIcon' | 'ArrowDownIcon' | 'AppleIcon' | 'AlarmIcon' | 'ActualBalanceIcon' | 'AchievementIcon';
+export type IconName = '' | 'YoutubeIcon' | 'WalletWithMoneyIcon' | 'WalletIcon' | 'WalletAddIcon' | 'VKIcon' | 'UserTickIcon' | 'UserSquareIcon' | 'UserGeoLocationIcon' | 'TelegramIcon' | 'StarIcon' | 'SoundIcon' | 'SmallClockIcon' | 'SignDocsIcon' | 'ShieldTickIcon' | 'SecurityСardIcon' | 'SafeIcon' | 'RutubeIcon' | 'RustoreIcon' | 'RoundRubleIcon' | 'ResponseOKIcon' | 'ResponseFailIcon' | 'RefreshIcon' | 'ProfileIcon' | 'Profile2UserIcon' | 'PlusIcon' | 'PlusCircleIcon' | 'PlayMarketIcon' | 'PhoneIcon' | 'PhoneCallingIcon' | 'PersonalCardIcon' | 'PercentageRoundIcon' | 'PercentIcon' | 'PassSendIcon' | 'PackA4Icon' | 'OkIcon' | 'NotificationBingIcon' | 'NewLoanIcon' | 'NewDocIcon' | 'MonitorMobileIcon' | 'MoneyInsuranceIcon' | 'MoneyIcon' | 'MinusIcon' | 'MapOpenedIcon' | 'MapMarkerSingleIcon' | 'MapMarkerClusterYellowIcon' | 'MapMarkerClusterIcon' | 'MailIcon' | 'MagnifierIcon' | 'LoupeIcon' | 'LogoIcon' | 'LockIcon' | 'InfoCircleIcon' | 'HuaweiIcon' | 'HouseIcon' | 'HeartTickIcon' | 'HeartIcon' | 'HeadphonesIcon' | 'GridIcon' | 'GpsIcon' | 'GosUslugiIcon' | 'GlobalIcon' | 'GeolocationIcon' | 'FullScreenIcon' | 'FaxIcon' | 'EuroIcon' | 'EmptyWalletIcon' | 'EmptyWalletChangeIcon' | 'DzenIcon' | 'DoneSimpleIcon' | 'DoneIcon' | 'DollarIcon' | 'DocIcon' | 'DocDownloadIcon' | 'DiscountShapeIcon' | 'DevIcon' | 'CupIcon' | 'CourtHouseIcon' | 'CopyIcon' | 'ConvertCardIcon' | 'CoinIcon' | 'CloseIcon' | 'ClientIcon' | 'ChineseYuanRenminbiIcon' | 'ChevronLeftIcon' | 'ChatBotIcon' | 'ChartSquareIcon' | 'ChartRoundIcon' | 'ChartIcon' | 'CardTickIcon' | 'CardSendIcon' | 'CardPosIcon' | 'CardIcon' | 'CalendarTickIcon' | 'CalendarIcon' | 'CalendarCircleIcon' | 'BurgerIcon' | 'BuildingIcon' | 'BriefcaseIcon' | 'BelarusianFlag' | 'BankIcon' | 'BankColorIcon' | 'AtmIcon' | 'ArrowUpSolidIcon' | 'ArrowUpIcon' | 'ArrowTopRightIcon' | 'ArrowRightIcon' | 'ArrowLeftIcon' | 'ArrowDownSolidIcon' | 'ArrowDownIcon' | 'AppleIcon' | 'AlarmIcon' | 'ActualBalanceIcon' | 'AchievementIcon';