@redneckz/wildless-cms-uni-blocks 0.14.336 → 0.15.334

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -76,10 +76,6 @@ export type FieldCommonDef = FieldDefaultDef & {
   fieldType: 'common';
 };
 
-/**
- * @title Значение по умолчанию
- * @enumNames ["Валютный контроль","Документарные операции","Конверсионные операции","Иные вопросы ВЭД"]
- */
 type VedTypes = 'currencyControl' | 'documentOperations' | 'conversionTransactions' | 'otherIssues';
 
 /**
@@ -89,6 +85,7 @@ type VedTypes = 'currencyControl' | 'documentOperations' | 'conversionTransactio
 export type FieldVedDef = FieldDefaultDef & {
   /** @default "ved" */
   fieldType: 'ved';
+  /** @title Значение по умолчанию */
   defaultValue?: VedTypes;
 };
 

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -5,6 +5,7 @@ import { getAspectsWithInclude } from '../../hooks/useAspects/aspects/getAspects
 import { useLocation } from '../../hooks/useLocation';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type IconVersion } from '../../model/IconVersion';
+import { ClientOnly } from '../../ui-kit/ClientOnly';
 import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
 import { useSearchDialog } from '../../ui-kit/SearchDialog/useSearchDialog';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
@@ -33,14 +34,16 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
 
     return (
       <div className={style('flex items-center gap-lg', className)} role="navigation">
-        {rest?.branches?.visible ? (
-          <TopItem
-            flat={true}
-            href="#"
-            text={currentLocation?.name}
-            data={getAspectsWithInclude(rest?.branches?.dataClick, currentLocation?.name ?? '')}
-            onClick={openLocationDialog}
-          />
+        {currentLocation?.name && rest?.branches?.visible ? (
+          <ClientOnly>
+            <TopItem
+              flat={true}
+              href="#"
+              text={currentLocation?.name}
+              data={getAspectsWithInclude(rest?.branches?.dataClick, currentLocation?.name ?? '')}
+              onClick={openLocationDialog}
+            />
+          </ClientOnly>
         ) : null}
         {rest?.officesAtms?.href ? <TopItem flat={true} {...rest.officesAtms} /> : null}
         <HeaderSecondaryMenuButton

package/src/components/Header/HeaderSubMenu.tsx

@@ -26,7 +26,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
     const router = useRouter();
 
     const visibleSubItems = useMemo(() => subItems.filter(isVisibleItem), [subItems]);
-    const activeSubItem = findActiveSubItem(router)(subItems);
+    const activeSubItem = findActiveSubItem(router.pathname)(subItems);
 
     const [visibleItemsCount, setVisibleItemsCount] = useState(visibleSubItems.length);
 

package/src/components/Header/findActiveSubItem.ts

@@ -1,12 +1,10 @@
-import { type Router } from '../../hooks/useRouter';
-import { type LinkProps } from '../../model/LinkProps';
 import { maxBy } from '../../utils/maxBy';
 import { isHrefActive } from './isHrefActive';
 
 export const findActiveSubItem =
-  (router: Router) =>
-  <T extends LinkProps>(items: T[] = []): T | undefined => {
-    const possibleActiveSubItems = items?.filter(isHrefActive(router));
+  (pathname: string) =>
+  <T extends { href?: string }>(items: T[] = []): T | undefined => {
+    const possibleActiveSubItems = items?.filter(isHrefActive(pathname));
 
     return possibleActiveSubItems?.length
       ? maxBy((_: T) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length

package/src/components/Header/isHrefActive.ts

@@ -1,11 +1,11 @@
 import { isURL, withoutQuery } from '../../utils/url';
 
-type Router = { href?: string; pathname: string };
-
 export const isHrefActive =
-  (router: Router) =>
+  (pathname: string) =>
   ({ href }: { href?: string }): boolean =>
-    !href ? false : withoutQuery(getRouterHref(href, router)).startsWith(withoutQuery(href));
-
-const getRouterHref = (href: string, router: Router) =>
-  isURL(href) ? router.href : router.pathname;
+    Boolean(
+      href &&
+        withoutQuery(isURL(href) ? globalThis?.location.href : pathname).startsWith(
+          withoutQuery(href),
+        ),
+    );

package/src/components/Header/isTopItemActive.ts

@@ -1,6 +1,5 @@
-import { type Router } from '../../hooks/useRouter';
 import { projectSettings } from '../../ProjectSettings';
 import { isHrefActive } from './isHrefActive';
 
-export const isTopItemActive = (router: Router) =>
-  isHrefActive(projectSettings.BASE_PATH ? { pathname: projectSettings.BASE_PATH } : router);
+export const isTopItemActive = (pathname: string) =>
+  isHrefActive(projectSettings.BASE_PATH || pathname);

package/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -5,12 +5,13 @@ import { type VNode } from '../../model/VNode';
 import { Button } from '../../ui-kit/Button/Button';
 import { ClientOnly } from '../../ui-kit/ClientOnly';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
 import { style } from '../../utils/style';
 import { type AtmsDef } from './OfficesAtmsMapContent';
-import { type Atm, type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
-import { renderDescriptionBlock } from './renderDescriptionBlock';
+import { type Atm, type Branch } from './OfficesAtmsMapProps';
 import { renderFiltrationForm } from './renderFiltrationForm';
 import { type BalloonContent } from './YandexMapProps';
 
@@ -22,12 +23,9 @@ export type InitFilterState = Record<string, boolean>;
 export interface OfficesAtmsMapLayoutProps<T> {
   className?: string;
   data?: T[];
-  remoteWorkplaces?: T[];
   renderCard?: (item: T, index: number) => VNode;
-  renderRemoteWorkplaceCard?: (item: T, index: number) => VNode;
   filterItems?: (data: T[], filtrationState: InitFilterState) => T[];
   getBalloon?: (item: T) => BalloonContent;
-  getBalloonRemoteWorkplaces?: (item: T) => BalloonContent;
   initFilterState?: InitFilterState;
   descriptionData?: AtmsDef;
   title?: string;
@@ -36,16 +34,13 @@ export interface OfficesAtmsMapLayoutProps<T> {
 const filtersVisibleStyles = (activeButton: string) =>
   activeButton === 'all' ? 'block' : 'hidden';
 
-export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm | RemoteWorkplace>>(
+export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm>>(
   ({
     className,
     data = [],
-    remoteWorkplaces = [],
     renderCard = defaultEmptyFunction,
-    renderRemoteWorkplaceCard = defaultEmptyFunction,
     filterItems = defaultFilterItems,
     getBalloon = defaultEmptyFunction,
-    getBalloonRemoteWorkplaces = defaultEmptyFunction,
     initFilterState = {},
     descriptionData,
     title,
@@ -54,30 +49,18 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
 
     const [filtrationState, { field, reset }] = useForm(initFilterState);
 
-    const [filteredItems, points, filteredRemoteWorkplaces, lengthItems] = useMemo(() => {
+    const [filteredItems, points, lengthItems] = useMemo(() => {
       const _filteredItems = filterItems(data, filtrationState);
-      const _filteredRemoteWorkplaces = filterItems(remoteWorkplaces, filtrationState);
 
-      const _points = [
-        ..._filteredItems.map((_) => ({
-          type: 'offices',
+      const _points = _filteredItems
+        .map((_) => ({
           coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
           content: getBalloon(_),
-        })),
-        ..._filteredRemoteWorkplaces.map((_: RemoteWorkplace) => ({
-          type: 'workplaces',
-          coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
-          content: getBalloonRemoteWorkplaces({
-            address: _.address,
-            workScheduleDescription: _.workScheduleDescription,
-          }),
-        })),
-      ].filter((_) => _.coords && _.coords.length === 2);
-
-      const itemsLength = _filteredItems.length + _filteredRemoteWorkplaces?.length;
+        }))
+        .filter((_) => _.coords && _.coords.length === 2);
 
-      return [_filteredItems, _points, _filteredRemoteWorkplaces, itemsLength];
-    }, [data, remoteWorkplaces, filtrationState]);
+      return [_filteredItems, _points, _filteredItems.length];
+    }, [data, filtrationState]);
 
     const [activeButton, setActiveButton] = useState('all');
 
@@ -106,7 +89,6 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
           </div>
         </div>
         {filteredItems.map(renderCard)}
-        {filteredRemoteWorkplaces.map(renderRemoteWorkplaceCard)}
       </div>
     );
   },
@@ -115,13 +97,13 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
 const renderButtonsGroup = (
   data: Branch[],
   activeButton: string,
-  onButtonClick: (item: string) => void,
+  setActiveButton: (item: string) => void,
 ) => {
   const allButtonVersion = activeButton === 'all' ? 'primary' : 'secondary';
 
   const businessButtonVersion = activeButton === 'business' ? 'primary' : 'secondary';
 
-  const handleClick = (e: any, key: string, branches: Branch[]) => {
+  const handleOnClick = (e: any, key: string, branches: Branch[]) => {
     if (e.currentTarget === e.target && key === 'business') {
       branches.filter(
         (branch) =>
@@ -131,19 +113,23 @@ const renderButtonsGroup = (
       );
     }
 
-    onButtonClick(key);
+    setActiveButton(key);
 
     return branches;
   };
 
   return (
     <div className="flex gap-lg flex-col sm:flex-row pb-lg">
-      <Button data-id="all" onClick={(e) => handleClick(e, 'all', data)} version={allButtonVersion}>
+      <Button
+        data-id="all"
+        onClick={(e) => handleOnClick(e, 'all', data)}
+        version={allButtonVersion}
+      >
         Для физических лиц
       </Button>
       <Button
         data-id="business"
-        onClick={(e) => handleClick(e, 'business', data)}
+        onClick={(e) => handleOnClick(e, 'business', data)}
         version={businessButtonVersion}
       >
         Для юридических лиц
@@ -151,3 +137,28 @@ const renderButtonsGroup = (
     </div>
   );
 };
+
+const renderDescriptionBlock = ({ __html, list }: AtmsDef) =>
+  __html || list?.length ? (
+    <div className="mb-2xl border-b sm:border border-main-divider sm:rounded-md">
+      {__html ? (
+        <div className="mb-2xl">
+          <RichText __html={__html} />
+        </div>
+      ) : null}
+      {list?.length ? (
+        <div className="flex flex-col sm:flex-row gap-2xl sm:flex-wrap pb-2xl sm:pb-xl">
+          {list.map((item, i) => (
+            <div key={String(i)} className="flex gap-xs items-center">
+              {item?.image ? <Img image={item.image} /> : null}
+              {item?.text ? (
+                <Text size="text-m" font="font-light">
+                  {item.text}
+                </Text>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  ) : null;

package/src/components/OfficesAtmsMap/OfficesAtmsMapProps.tsx

@@ -82,21 +82,6 @@ export interface Branch {
   transferringDataToBiometricSystem?: false;
 }
 
-export interface RemoteWorkplace {
-  id?: number;
-  region?: {
-    id?: number;
-    code?: string;
-    name?: string;
-    slug?: string;
-  };
-  landmark?: string;
-  workScheduleDescription?: string;
-  description?: string;
-  gpsLatitude?: number;
-  gpsLongitude?: number;
-  address?: string;
-}
 export interface Atm {
   location?: string;
   address?: string;

package/src/components/OfficesAtmsMap/OfficesMap.tsx

@@ -1,16 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLocation } from '../../hooks/useLocation';
 import { OfficesAtmsMapLayout } from './OfficesAtmsMapLayout';
-import { type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
+import { type Branch } from './OfficesAtmsMapProps';
 import { getOfficePoint, renderOfficeCard } from './renderOfficeCard';
-import { getRemoteWorkplacePoint, renderRemoteWorkplaceCard } from './renderRemoteWorkplaceCard';
 import { useOffices } from './useOffices';
 
 const INITIAL_FILTRATION_STATE = {
   workingSaturday: false,
   premiumService: false,
   privateBanking: false,
-  remoteWorkplace: false,
   sellingCoins: false,
   buyingCoins: false,
   bullionOperations: false,
@@ -19,23 +17,15 @@ const INITIAL_FILTRATION_STATE = {
 };
 
 const FILTRATION_PREDICATES = {
-  workingSaturday: (item: Branch | RemoteWorkplace) =>
-    Boolean('workSchedule' in item && item.workSchedule?.workingSaturday),
-  premiumService: (item: Branch | RemoteWorkplace) =>
-    Boolean('premiumService' in item && item.premiumService),
-  privateBanking: (item: Branch | RemoteWorkplace) =>
-    Boolean('privateBanking' in item && item.privateBanking),
-  remoteWorkplace: (item: Branch | RemoteWorkplace) => Boolean('workScheduleDescription' in item),
-  sellingCoins: (item: Branch | RemoteWorkplace) =>
-    Boolean('sellingCoins' in item && item.sellingCoins),
-  buyingCoins: (item: Branch | RemoteWorkplace) =>
-    Boolean('buyingCoins' in item && item.buyingCoins),
-  bullionOperations: (item: Branch | RemoteWorkplace) =>
-    Boolean('bullionOperations' in item && item.bullionOperations),
-  preciousMetalsOperations: (item: Branch | RemoteWorkplace) =>
-    Boolean('preciousMetalsOperations' in item && item.preciousMetalsOperations),
-  transferringDataToBiometricSystem: (item: Branch | RemoteWorkplace) =>
-    Boolean('transferringDataToBiometricSystem' in item && item.transferringDataToBiometricSystem),
+  workingSaturday: (item: Branch) => Boolean(item.workSchedule?.workingSaturday),
+  premiumService: (item: Branch) => Boolean(item.premiumService),
+  privateBanking: (item: Branch) => Boolean(item.privateBanking),
+  sellingCoins: (item: Branch) => Boolean(item.sellingCoins),
+  buyingCoins: (item: Branch) => Boolean(item.buyingCoins),
+  bullionOperations: (item: Branch) => Boolean(item.bullionOperations),
+  preciousMetalsOperations: (item: Branch) => Boolean(item.preciousMetalsOperations),
+  transferringDataToBiometricSystem: (item: Branch) =>
+    Boolean(item.transferringDataToBiometricSystem),
 };
 
 export interface OfficesMapProps {
@@ -53,22 +43,16 @@ export const OfficesMap = JSX<OfficesMapProps>(({ className }) => {
     <OfficesAtmsMapLayout
       className={className}
       filterItems={filterItems}
-      data={officesData[0]?.branches}
-      remoteWorkplaces={officesData[0]?.remoteWorkplaces}
+      data={officesData}
       initFilterState={INITIAL_FILTRATION_STATE}
       renderCard={renderOfficeCard}
-      renderRemoteWorkplaceCard={renderRemoteWorkplaceCard}
       getBalloon={getOfficePoint}
-      getBalloonRemoteWorkplaces={getRemoteWorkplacePoint}
       title={`Офисы филиала ${currentLocation?.name}`}
     />
   );
 });
 
-const filterItems = (
-  data: (Branch | RemoteWorkplace)[],
-  filtrationState: Record<string, boolean>,
-) => {
+const filterItems = (data: Branch[], filtrationState: Record<string, boolean>) => {
   const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
 
   return data.filter((item) => truthyFilters.every((_) => FILTRATION_PREDICATES[_](item)));

package/src/components/OfficesAtmsMap/YandexMapProps.ts

@@ -1,5 +1,4 @@
 export type BalloonPoints = {
-  type?: string;
   coords: number[];
   content?: BalloonContent;
 };

package/src/components/OfficesAtmsMap/renderFiltrationForm.tsx

@@ -21,7 +21,6 @@ const FILTRATION_LABELS = {
   bullionOperations: 'Операции со слитками',
   preciousMetalsOperations: 'Операции с драгоценными металлами',
   transferringDataToBiometricSystem: 'Передача фото и голоса в Единую биометрическую систему',
-  remoteWorkplace: 'Удаленное рабочее место',
 };
 
 const COMMON_FILTERS_STYLES = 'flex flex-col sm:flex-row sm:flex-wrap gap-3xl pb-2xl';
@@ -31,7 +30,7 @@ export const renderFiltrationForm = (
   { field, reset }: { field: FormFieldRegisterer<any>; reset: () => void },
   onlyOffice?: boolean,
 ) => {
-  const visibleFiltersNum = 4;
+  const visibleFiltersNum = onlyOffice ? 3 : 4;
 
   const filtersCheckbox = (filters || []).map((key) => (
     <Checkbox key={key} text={FILTRATION_LABELS[key]} {...field(key)} />

package/src/components/OfficesAtmsMap/useOffices.ts

@@ -1,27 +1,20 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 import { fetchJSON } from '../../utils/fetchJSON';
-import { type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
+import { type Branch } from './OfficesAtmsMapProps';
 
 const EMPTY_VALUE = [];
 
 export function useOffices(regionCode?: string) {
   const { data = EMPTY_VALUE } = useAsyncData(
-    `/api/v1/branchesAndRemoteWorkplaces?regionCode=${regionCode}`,
+    `/api/v1/branches?regionCode=${regionCode}`,
     fetchMap,
   );
 
   return data;
 }
 
-const fetchMap = async (
-  url: string,
-): Promise<{ branches: Branch[]; remoteWorkplaces: RemoteWorkplace[] }[]> => {
-  const result = await fetchJSON<{ branches: Branch[]; remoteWorkplaces: RemoteWorkplace[] }[]>(
-    url,
-    {
-      method: 'GET',
-    },
-  );
+const fetchMap = async (url: string): Promise<Branch[]> => {
+  const result = await fetchJSON<Branch[]>(url, { method: 'GET' });
 
   return Array.isArray(result) ? result : EMPTY_VALUE;
 };

package/src/components/ProductGallery/ProductGallery.tsx

@@ -1,30 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/LinkButton/ArrowButton';
-import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
-import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
-import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { type ProductGalleryContent, type ProductSlide } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-const scrollButtonStyle = 'hidden sm:flex absolute z-40 top-10';
-
-export const ProductGallery = UniBlock<ProductGalleryProps>(
+export const ProductGallery = JSX<ProductGalleryProps>(
   ({ className = '', padding, slides = [], ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
 
-    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
-      itemCount: slides?.length || 0,
-    });
-
     return (
       <BlockWrapper
         className={style('box-border overflow-hidden', className)}
-        defaultPadding="pt-6xl"
+        defaultPadding="py-6xl"
         padding={padding}
         {...rest}
       >
@@ -45,29 +36,8 @@ export const ProductGallery = UniBlock<ProductGalleryProps>(
             </div>
           ))}
         </div>
-
-        <div className="relative pr-xs mt-m -mb-m flex gap-xs box-border">
-          <SwipeListContainer
-            containerRef={containerRef}
-            snapAlign="snap-start"
-            onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
-            itemClassName={'h-40 flex items-stretch w-screen'}
-            gap={8}
-          >
-            {slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex }))}
-          </SwipeListContainer>
-          {scroll.canScrollLeft ? (
-            <ScrollLeftButton
-              className={style('left-6', scrollButtonStyle)}
-              onClick={scroll.scrollLeft}
-            />
-          ) : null}
-          {scroll.canScrollRight ? (
-            <ScrollRightButton
-              className={style('right-6', scrollButtonStyle)}
-              onClick={scroll.scrollRight}
-            />
-          ) : null}
+        <div className="h-28 px-xs mt-m -mb-m flex gap-xs box-border">
+          {slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex }))}
         </div>
       </BlockWrapper>
     );
@@ -85,7 +55,7 @@ const renderNavButton =
     const isActive = i === activeSlideIndex;
     const btnClassName = isActive
       ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
-      : 'min-w-72 ease-in duration-300 bg-white/10 px-xl py-lg hover:backdrop-blur';
+      : 'min-w-72 ease-in duration-300 bg-white/10 px-xl py-lg hover:py-xl backdrop-blur';
     const btnTitleClassName = isActive
       ? 'text-primary-text text-h6 py-xs'
       : 'text-l pb-2xs text-secondary-text group-data-secondary:text-white';
@@ -100,7 +70,7 @@ const renderNavButton =
         onClick={() => onClick(i)}
         aria-label={nav?.title}
         className={style(
-          'max-h-28 mt-xs ml-xs relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50',
+          'relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50',
           btnClassName,
         )}
       >

package/src/components/StickyBottomMenu/ActiveSubMenuItem.tsx

@@ -19,7 +19,7 @@ export const ActiveSubMenuItem = JSX<ActiveSubMenuItemProps>(({ item, basePath }
   const link = useLink({ isRemote: isAnotherPortal, basePath });
   const { href, target, onClick } = link(item);
   const router = useRouter();
-  const isActive = isHrefActive(router)({ href });
+  const isActive = isHrefActive(router.pathname)({ href });
 
   return (
     <div className="mt-3">

package/src/components/StickyBottomMenu/BurgerMenuDialog.tsx

@@ -1,9 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { type JSONRefObject } from '../../data/JSONRefObject';
 import { type SitemapData } from '../../data/SitemapData';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
-import { useRouter } from '../../hooks/useRouter';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
 import { StickyBottomMenuDialog } from './StickyBottomMenuDialog';
@@ -21,13 +20,16 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
   ({ menuRef, menuItem, locationDialogProps, closeAll }) => {
     const locationDialog = useLocationDialog(locationDialogProps || {});
     const menuDimensions = menuRef?.current?.getBoundingClientRect();
-    const { basePath } = useRouter();
-    const handleIframeLoad = () => {
-      const iframeWindow: Window = globalThis.frames['burger-menu-iframe'];
+
+    const handleIframeLoad = useCallback(() => {
+      const iframeWindow: Window = globalThis?.frames['burger-menu-iframe'];
       const ifDoc: HTMLIFrameElement = document.getElementsByTagName('iframe')['iframe-dialog'];
+
       ifDoc.style.height = String(ifDoc?.contentWindow?.document.body.offsetHeight) + 'px';
-      iframeWindow.postMessage(basePath?.slice(1), '*');
-    };
+
+      const [, basePath] = globalThis?.location?.pathname?.split('/') || [];
+      iframeWindow.postMessage(basePath, '*');
+    }, []);
 
     useEffect(() => {
       const onMessage = (e: MessageEvent<any>) => {
@@ -64,7 +66,7 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
           <iframe
             id="iframe-dialog"
             name="burger-menu-iframe"
-            onLoad={() => handleIframeLoad()}
+            onLoad={handleIframeLoad}
             src={menuItem?.src}
             width={menuDimensions?.width || 0}
           />

package/src/components/Tabs/Tabs.tsx

@@ -16,7 +16,6 @@ const TAB_QUERY_PARAM_KEY = 'tab';
 export const Tabs = JSX<TabsBlockProps>(
   ({ className = '', isSticky, tabs = [], tabsMode, ...rest }) => {
     const router = useRouter();
-    const { isReady } = router;
     const tabsControlItems: TabItemBase[] = useMemo(() => tabs.map(normalizeTab), [tabs]);
 
     const [activeTabIndex, setActiveTabIndex] = useState(0);
@@ -26,15 +25,15 @@ export const Tabs = JSX<TabsBlockProps>(
         return;
       }
 
-      const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
-        ? tabs.findIndex(
-            (_) => _.type === 'group' && _.ref === router.query[TAB_QUERY_PARAM_KEY],
-          ) || 0
+      const query = new URLSearchParams(globalThis?.location?.search || '');
+
+      const defaultTabIndex = query.get(TAB_QUERY_PARAM_KEY)
+        ? tabs.findIndex((_) => _.type === 'group' && _.ref === query.get(TAB_QUERY_PARAM_KEY)) || 0
         : 0;
       const defaultTab = tabs[defaultTabIndex] || tabs[0];
       setActiveTabIndex(defaultTabIndex);
       fireTabEvent(defaultTab);
-    }, [isReady]);
+    }, []);
 
     useEffect(() => {
       const activeTab = tabs[activeTabIndex];
@@ -49,13 +48,13 @@ export const Tabs = JSX<TabsBlockProps>(
     }, [tabs, activeTabIndex]);
 
     const updateUrlSearchTabParam = (_: TabItemBase) => {
-      const searchParams = new URLSearchParams(router.query as Record<string, string>);
+      const searchParams = new URLSearchParams(globalThis?.location?.search || '');
       if (_.name) {
         searchParams.set(TAB_QUERY_PARAM_KEY, _.name);
       } else {
         searchParams.delete(TAB_QUERY_PARAM_KEY);
       }
-      router.replace(`${router.pathname}?${searchParams}`, '', { scroll: false });
+      router.replace(`${router.pathname}?${searchParams}`, { scroll: false });
     };
 
     const handleChange = useCallback(

package/src/components/TabsLayout/TabsLayout.tsx

@@ -17,32 +17,31 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
   ({ className = '', tabs = [], block, tabsType, ...rest }) => {
     const router = useRouter();
 
-    const { isReady } = router;
-
     const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
 
     const defaultSelectedTab = tabs.findIndex((_) => Boolean(_.selected));
 
     useEffect(() => {
-      const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
+      const query = new URLSearchParams(globalThis?.location?.search || '');
+      const defaultTabIndex = query.get(TAB_QUERY_PARAM_KEY)
         ? tabs.findIndex(
-            (_, index) => _.type === 'group' && String(index) === router.query[TAB_QUERY_PARAM_KEY],
+            (_, index) => _.type === 'group' && String(index) === query.get(TAB_QUERY_PARAM_KEY),
           )
         : defaultSelectedTab;
 
       setActiveTabIndex(defaultTabIndex === -1 ? 0 : defaultTabIndex);
-    }, [isReady, defaultSelectedTab]);
+    }, [defaultSelectedTab]);
 
     const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
 
     const updateUrlSearchTabParam = (_: TabItemBase, index: number) => {
-      const searchParams = new URLSearchParams(router.query as Record<string, string>);
+      const searchParams = new URLSearchParams(globalThis?.location?.search || '');
       if (_.text) {
         searchParams.set(TAB_QUERY_PARAM_KEY, String(index));
       } else {
         searchParams.delete(TAB_QUERY_PARAM_KEY);
       }
-      router.replace(`${router.pathname}?${searchParams}`, '', { scroll: false });
+      router.replace(`${router.pathname}?${searchParams}`, { scroll: false });
     };
 
     const handleChange = useCallback(