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

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

@@ -38,7 +38,7 @@ function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps
   return orientation === 'horizontal' ? (
     <SwipeListControl>{cards?.map(renderCard)}</SwipeListControl>
   ) : (
-    <div className="grid gap-[14px]">{cards?.map(renderCard)}</div>
+    <div className="grid gap-3.5">{cards?.map(renderCard)}</div>
   );
 }
 

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

@@ -46,7 +46,7 @@ const renderImage = (image?: Picture, version?: BlockVersion) => (
     {image?.src ? <Img className="mb-5" image={image} /> : null}
     {image?.icon ? (
       <Img
-        className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`}
+        className={`w-8 h-8 min-w-8 mb-5 rounded-full`}
         image={getIconWithVersion(image, version)}
         asSVG
       />

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -13,7 +13,7 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
-    <BlockWrapper className={`font-sans bg-white p-[50px] ${className}`} {...rest}>
+    <BlockWrapper className={`font-sans bg-white p-12 ${className}`} {...rest}>
       <Headline
         className="!p-0 mb-4"
         title={title}
@@ -80,7 +80,7 @@ const renderMonthImages = (item: MappedCalendarItemProps) =>
     _.image?.src ? (
       <div
         key={`monthImage-${_.image.src}`}
-        className="h-[207px] border-r-[1px] pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0"
+        className="h-[207px] border-r pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0"
       >
         <Img image={_.image} className="flex" />
       </div>

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

@@ -37,7 +37,7 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
     <header className={`${bgColor} ${className}`}>
       <div className="container px-4 py-0 box-border">
         <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} />
-        <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
+        <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-12">
           <div className="flex no-scrollbar horizontal-list h-full items-center">
             {subItems?.map((_, i) => (
               <HeaderItem

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

@@ -66,7 +66,7 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
-          className={`${LINKS_COLORS_MAP[bgColor]} group min-w-[32px] min-h-[32px]`}
+          className={`${LINKS_COLORS_MAP[bgColor]} group min-w-8 min-h-8`}
           ariaLabel="Дополнительные ссылки"
         >
           <Img

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

@@ -9,7 +9,7 @@ export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
   ({ className = '', children, ariaLabel }) => (
     <button
       type="button"
-      className={`border-0 p-0 w-[24px] h-[24px] flex items-center bg-inherit cursor-pointer ${className}`}
+      className={`border-0 p-0 w-6 h-6 flex items-center bg-inherit cursor-pointer ${className}`}
       disabled={true}
       aria-label={ariaLabel}
     >

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

@@ -8,7 +8,7 @@ export interface HeaderTopProps {
   bgColor?: BgColorVersion;
 }
 export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
-  <div className="flex items-center justify-between border-0 border-b border-main-divider h-[50px]">
+  <div className="flex items-center justify-between border-0 border-b border-main-divider h-12">
     <div className="flex items-center">
       <button
         className="pl-0 pr-4 border-0 bg-transparent cursor-pointer"

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -22,7 +22,7 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
 
     return (
       <BlockWrapper
-        className={`box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`}
+        className={`box-border py-12 overflow-hidden relative font-sans w-100 bg-white ${className}`}
         {...rest}
       >
         {title ? <Heading className="text-center mb-8" title={title} headingType="h3" /> : null}

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -53,7 +53,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
             : null}
           {renderArrows({
             ...controls,
-            btnClass: ['left-[50px]', 'right-[50px]'],
+            btnClass: ['left-12', 'right-12'],
             className: 'top-[62px]',
           })}
           {canDec ? (
@@ -63,7 +63,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
             <div className="absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" />
           ) : null}
         </div>
-        <Button className="w-[240px] text-center" version="primary" {...button} href={activeHref} />
+        <Button className="w-60 text-center" version="primary" {...button} href={activeHref} />
       </section>
     );
   },
@@ -74,10 +74,7 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
   const cardsAlignStyle = cards.length > 2 ? 'justify-start' : 'justify-center';
 
   return (
-    <div
-      style={{ transform: `translateX(-${tabsShiftWidth}px)` }}
-      className="duration-1000 px-[50px]"
-    >
+    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000 px-12">
       <div className={`w-full flex flex-nowrap gap-3.5 pb-12 ${cardsAlignStyle}`}>
         {cards.map((slide, i) =>
           renderNavButton({

package/mobile/src/components/LinkList/LinkList.tsx

@@ -7,7 +7,7 @@ import type { LinkListContent } from './LinkListContent';
 export interface LinkListProps extends LinkListContent, UniBlockProps {}
 
 export const LinkList = JSX<LinkListProps>(({ className = '', documents, ...rest }) => (
-  <BlockWrapper className={`font-sans bg-white mt-[10px] ${className}`} {...rest}>
+  <BlockWrapper className={`font-sans bg-white mt-2.5 ${className}`} {...rest}>
     <ul className="flex flex-col text-s text-secondary-text p-0">
       {documents?.length ? renderLinkListItem(documents) : null}
     </ul>

package/mobile/src/components/MobileAppTile/MobileAppTile.tsx

@@ -14,7 +14,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
       >
         {href ? (
           <div className="flex">
-            <div className="flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]">
+            <div className="flex justify-center align-middle rounded-md bg-primary-main w-12 h-12">
               <Logo className="w-8" bgColor="transparent" showTitle />
             </div>
             <a href={href} target="_blank" className="flex flex-col justify-center pl-3">

package/mobile/src/components/OfficeMap/useOfficeMap.ts

@@ -11,16 +11,16 @@ export function useOfficeMap(regionCode?: string) {
     regionCode ? `${OFFICE_MAP_URL}?regionCode=${regionCode}` : undefined,
     fetchOfficeMap,
   );
-  console.warn('WARNING!!!  Hook useOfficeMap RETURN MOCK object for testing!');
-  console.log('Hook useOfficeMap get this data:', data);
+
+  console.warn('Hook useOfficeMap RETURNs MOCK object for testing', data);
 
   return OFFICE_MAP;
 }
 
-const fetchOfficeMap = (url?: string) => {
+function fetchOfficeMap(url?: string) {
   if (!url) {
     return {};
   }
 
   return fetchJSON(url, { method: 'GET' });
-};
+}

package/mobile/src/components/ProductGallery/ProductGallery.tsx

@@ -39,7 +39,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
 
     return (
       <BlockWrapper
-        className={`box-border pt-[50px] overflow-hidden relative font-sans w-100 mb-6 ${className}
+        className={`box-border pt-12 overflow-hidden relative font-sans w-100 mb-6 ${className}
         ${VersionStyleMap[version]}`}
         {...rest}
       >
@@ -79,7 +79,7 @@ function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i:
     >
       <div className="flex grow">
         <ProductBlockInner
-          className={`pl-[50px] z-10 ${additionalClass}`}
+          className={`pl-12 z-10 ${additionalClass}`}
           textBlockClassName="mb-[154px]"
           headlineVersion="XXL"
           {...block}

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -13,12 +13,12 @@ export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
 const STEPS_SIZE_MAP: Record<SizeVersion, string> = {
   normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
-  small: 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]',
+  small: 'h-12 w-12 min-w-12 min-h-12',
 };
 
 const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
   normal: 'min-h-[70px]',
-  small: 'min-h-[50px]',
+  small: 'min-h-12',
 };
 
 export const StepsBlock = JSX<StepsBlockProps>(
@@ -72,7 +72,7 @@ const renderStepTitle =
             {renderIconArea(size, version)(step, i)}
             {isLastStep ? null : (
               <div
-                className={`min-h-8 h-full w-[2px] ${
+                className={`min-h-8 h-full w-0.5 ${
                   showLines ? styleMap.iconConnector : ''
                 } ${margin}`}
               />

package/mobile/src/components/Tabs/LinkTab.tsx

@@ -1,6 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import { EventBus } from '../../EventBus/EventBus';
 import { useLink } from '../../hooks/useLink';
 import {
   ACTIVE_LINK_CLASSES,
@@ -15,20 +13,14 @@ import type { LinkTabData, TabData } from './TabsContent';
 interface LinkTabProps {
   tab: LinkTabData;
   currentTab?: TabData;
-  onClick?: (tab: TabData) => void;
 }
 
 export const LinkTab = JSX<LinkTabProps>((props) => {
-  const { tab, currentTab, onClick } = props;
+  const { tab, currentTab } = props;
   const active = currentTab?.type === 'link' && currentTab.href === tab.href;
 
-  const handleClick = useCallback(() => {
-    onClick && onClick(tab);
-    EventBus.inst.fire('anchorClick', { isScrolling: true, label: tab.href });
-  }, [tab, onClick]);
-
   const link = useLink();
-  const adjustedProps = link({ ...tab, onClick: handleClick });
+  const adjustedProps = link(tab);
 
   return (
     <a

package/mobile/src/components/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -11,11 +11,6 @@ export interface TabActivationEvent {
   label?: string;
 }
 
-export interface AnchorClickScrollingEvent {
-  isScrolling?: boolean;
-  label?: string;
-}
-
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
 export const Tabs = JSX<TabsBlockProps>((props) => {
@@ -26,10 +21,7 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
   useEffect(
     () =>
       EventBus.inst.subscribe('tab', (event) => {
-        if (!tabs) {
-          return;
-        }
-        const tab = tabs.find(checkTab(event));
+        const tab = tabs?.find(checkTab(event));
         if (event.type === 'link' && tab) {
           setCurrentTab(tab);
         }
@@ -37,20 +29,20 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
     [tabs],
   );
 
-  useEffect(() => {
-    if (currentTab?.type === 'group') {
-      return EventBus.inst.subject('tab', { label: currentTab.ref });
-    }
-
-    return undefined;
-  }, [currentTab]);
+  useEffect(
+    () =>
+      currentTab?.type === 'group'
+        ? EventBus.inst.subject('tab', { label: currentTab.ref })
+        : undefined,
+    [currentTab],
+  );
 
-  const handleClick = (selectedTab: TabData) => {
+  const handleClick = useCallback((selectedTab: TabData) => {
     if (selectedTab?.type === 'group') {
       EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
     }
     setCurrentTab(selectedTab);
-  };
+  }, []);
 
   return (
     <BlockWrapper

package/mobile/src/components/TariffsTable/TariffsTableRow.tsx

@@ -40,7 +40,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
           <div className="flex items-center text-primary-text" role="cell">
             {header?.icon ? (
               <Img
-                className="mr-[14px] max-w-6 max-h-6"
+                className="mr-3.5 max-w-6 max-h-6"
                 image={getIconWithVersion(header.icon)}
                 width="24px"
                 height="24px"

package/mobile/src/hooks/useLink.ts

@@ -1,4 +1,5 @@
 import type { LinkProps } from '../model/LinkProps';
+import { useBlockRouter } from '../services/BlockRouter/useBlockRouter';
 import { adjustHref } from '../utils/adjustHref';
 import { isHash, isURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
@@ -12,6 +13,7 @@ export function useLink(): <L extends Partial<LinkProps & ClickHandler>>(
   props: L,
 ) => L & ClickHandler {
   const router = useRouter();
+  const blockRouter = useBlockRouter();
 
   return (props) => {
     const href = adjustHref(props.href, router);
@@ -22,10 +24,19 @@ export function useLink(): <L extends Partial<LinkProps & ClickHandler>>(
       'aria-label': props.text,
       onClick: handlerDecorator((ev?: { preventDefault: () => void }) => {
         props.onClick && props.onClick(ev);
+
         const isLocalHref = href && !isURL(href);
         const isLocalTarget = !props.target || props.target === '_self';
-        if (isLocalHref && isLocalTarget && !isHash(href)) {
-          ev?.preventDefault();
+
+        if (!isLocalHref || !isLocalTarget) {
+          // Default handle
+          return;
+        }
+
+        ev?.preventDefault();
+        if (isHash(href)) {
+          blockRouter.goto(href);
+        } else {
           router.push(href);
         }
       }, props),

package/mobile/src/services/BlockRouter/BlockIntersection.ts

@@ -0,0 +1,3 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+
+export type BlockIntersection = [BlockDef, IntersectionObserverEntry];

package/mobile/src/services/BlockRouter/BlockRouter.ts

@@ -0,0 +1,51 @@
+import { EventBus } from '../../EventBus/EventBus';
+import type { BlockDef } from '../../model/ContentPageDef';
+
+export interface GotoAnchorEvent {
+  anchor: string;
+}
+
+export interface BlockIntersectionEvent {
+  block: BlockDef;
+  intersection: IntersectionObserverEntry;
+}
+
+interface EventMap {
+  goto: GotoAnchorEvent;
+  intersection: BlockIntersectionEvent;
+}
+
+const normalizeAnchor = (rawAnchor?: string) => rawAnchor?.replace('#', '');
+
+export class BlockRouter {
+  public static readonly inst = new BlockRouter();
+
+  readonly eventBus = new EventBus<EventMap>();
+
+  constructor() {
+    const anchor = normalizeAnchor(globalThis.location?.hash);
+    if (anchor) {
+      this.eventBus.subject('goto', { anchor });
+    }
+  }
+
+  goto(rawAnchor: string) {
+    const anchor = normalizeAnchor(rawAnchor);
+    if (anchor) {
+      this.push(anchor);
+      this.eventBus.fire('goto', { anchor });
+    }
+  }
+
+  push(rawAnchor: string) {
+    globalThis.history?.pushState(null, '', `#${normalizeAnchor(rawAnchor)}`);
+  }
+
+  replace(rawAnchor: string) {
+    globalThis.history?.replaceState(null, '', `#${normalizeAnchor(rawAnchor)}`);
+  }
+
+  reset() {
+    globalThis.history?.replaceState(null, '', '#');
+  }
+}

package/mobile/src/services/BlockRouter/findActiveBlock.ts

@@ -0,0 +1,20 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+import { minBy } from '../../utils/minBy';
+import type { BlockIntersection } from './BlockIntersection';
+
+const SPECIAL_BLOCK_TYPES = ['Header', 'Footer'];
+const EPS = 0.01;
+
+const topLineDelta = ([, { target }]: BlockIntersection) =>
+  Math.abs(target.getBoundingClientRect().top);
+
+export function findActiveBlock(intersections: BlockIntersection[]): BlockDef | undefined {
+  const visibleIntersections = intersections
+    .filter(([block]) => !SPECIAL_BLOCK_TYPES.includes(block.type || ''))
+    .filter(([, { intersectionRatio }]) => intersectionRatio > EPS);
+
+  const [activeBlock] =
+    visibleIntersections.length > 0 ? minBy(topLineDelta)(visibleIntersections) : [];
+
+  return activeBlock;
+}

package/mobile/src/services/BlockRouter/useBlockIntersectionObserver.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
+import type { BlockDef } from '../../model/ContentPageDef';
+import { BlockRouter } from './BlockRouter';
+
+export function useBlockIntersectionObserver(
+  block?: BlockDef,
+  router: BlockRouter = BlockRouter.inst,
+) {
+  const observerCallback = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      if (!block || !entries?.length) {
+        return;
+      }
+
+      const intersection = entries[entries.length - 1];
+      router.eventBus.fire('intersection', { block, intersection });
+    },
+    [block, router],
+  );
+
+  const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
+
+  useEffect(() => {
+    if (!ref.current) {
+      return undefined;
+    }
+
+    return router.eventBus.subscribe('goto', ({ anchor }) => {
+      if (ref.current && block?.anchor === anchor) {
+        ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    });
+  }, [block, router]);
+
+  return ref;
+}

package/mobile/src/services/BlockRouter/useBlockRouter.ts

@@ -0,0 +1,5 @@
+import { BlockRouter } from './BlockRouter';
+
+export function useBlockRouter(): BlockRouter {
+  return BlockRouter.inst;
+}

package/mobile/src/services/BlockRouter/useBlockRouterProvider.ts

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import type { BlockDef } from '../../model/ContentPageDef';
+import { debounce } from '../../utils/debounce';
+import { BlockRouter } from './BlockRouter';
+import { findActiveBlock } from './findActiveBlock';
+
+const isScrolledEnough = () => globalThis.scrollY > (globalThis.innerHeight * 3) / 4;
+
+export function useBlockRouterProvider(
+  router: BlockRouter = BlockRouter.inst,
+  scrollTarget: EventTarget = globalThis,
+) {
+  const intersectionsMapRef = useRef<Map<BlockDef, IntersectionObserverEntry>>(new Map());
+
+  useEffect(
+    () =>
+      router.eventBus.subscribe('intersection', ({ block, intersection }) => {
+        if (intersectionsMapRef.current) {
+          intersectionsMapRef.current.set(block, intersection);
+        }
+      }),
+    [router],
+  );
+
+  useEffect(() => {
+    const handleScroll = debounce(() => {
+      if (!isScrolledEnough()) {
+        router.reset();
+
+        return;
+      }
+
+      const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
+
+      if (activeBlock?.anchor) {
+        router.replace(activeBlock.anchor);
+      } else if (!activeBlock) {
+        router.reset();
+      }
+    }, 100);
+
+    scrollTarget.addEventListener('scroll', handleScroll);
+
+    return () => {
+      handleScroll.dispose();
+      scrollTarget.removeEventListener('scroll', handleScroll);
+    };
+  }, [router, scrollTarget]);
+}

package/mobile/src/ui-kit/BenefitItem/BenefitItem.tsx

@@ -55,5 +55,5 @@ function getBenefitIconBgStyle(version: BlockVersion, benefitsVersion: IconVersi
     bgColorStyle = 'bg-secondary-light text-primary-main';
   }
 
-  return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
+  return `w-12 h-12 min-w-12 rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
 }

package/mobile/src/ui-kit/BlockWrapper.tsx

@@ -1,10 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../EventBus/EventBus';
-import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
 import type { UniBlockProps } from '../model/JSXBlock';
-import { changeHashOnObserve } from '../utils/changeHashOnObserve';
+import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
 
 interface BlockWrapperProps extends UniBlockProps {
   tag?: keyof HTMLElementTagNameMap;
@@ -15,49 +13,28 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
   ({ className, block, tag = 'section', role, children }) => {
     const Tag: any = tag;
 
-    const { anchor, labels } = block || {};
+    const ref = useBlockIntersectionObserver(block);
 
     const [isVisible, setVisible] = useState(true);
-    const anchorClickRef = useRef<AnchorClickScrollingEvent>({});
-
-    const observerCallback = useMemo(
-      () => changeHashOnObserve({ anchor, anchorClickRef }),
-      [anchor],
-    );
-    const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
-
-    useEffect(
-      () =>
-        EventBus.inst.subscribe('anchorClick', (e) => {
-          setVisible(true);
-          anchorClickRef.current = e;
-        }),
-      [],
-    );
     useEffect(
       () =>
         EventBus.inst.subscribe('tab', (event) => {
           if (event.type === 'group') {
-            const hasSettings = labels?.length || block?.anchor;
-            setVisible(event.label ? !hasSettings || Boolean(labels?.includes(event.label)) : true);
+            const hasSettings = block?.labels?.length || block?.anchor;
+            setVisible(
+              event.label ? !hasSettings || Boolean(block?.labels?.includes(event.label)) : true,
+            );
           } else {
-            changeHash(event.label);
             setVisible(true);
           }
         }),
-      [],
+      [block],
     );
 
     return isVisible ? (
-      <Tag className={className} role={role} {...(anchor ? { id: anchor, ref } : {})}>
+      <Tag className={className} role={role} {...(block?.anchor ? { id: block.anchor, ref } : {})}>
         {children}
       </Tag>
     ) : null;
   },
 );
-
-function changeHash(label?: string) {
-  if (label) {
-    globalThis.document.location.hash = label;
-  }
-}

package/mobile/src/ui-kit/HeaderItem/HeaderItem.tsx

@@ -5,7 +5,7 @@ import type { TopItemProps } from '../TopItem/TopItem';
 export type HeaderItemProps = TopItemProps;
 
 const TEXT_CLASSES = 'font-sans text-s';
-const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
+const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-0.5';
 
 export const HeaderItem = JSX<HeaderItemProps>(
   ({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white' }) => {

package/mobile/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -1,9 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
-import type { TariffsTableInnerEvent } from './InnerTableProps';
+import type { TariffsTableInnerContent } from './InnerTableProps';
 
-export interface TableInnerButtonProps extends TariffsTableInnerEvent {
+export interface TableInnerButtonProps
+  extends Partial<TariffsTableCellIndexProps>,
+    TariffsTableInnerContent {
   onClick?: () => void;
   isOpen?: boolean;
 }

package/mobile/src/ui-kit/InnerTable/InnerTableProps.ts

@@ -1,5 +1,3 @@
-import type { TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
-
 export type RowsData = {
   data?: string;
   cols?: string[];
@@ -25,7 +23,3 @@ export interface TariffsTableInnerContent {
   /** @title Ссылка PDF-файл */
   pdfUrl?: string;
 }
-
-export interface TariffsTableInnerEvent
-  extends Partial<TariffsTableCellIndexProps>,
-    TariffsTableInnerContent {}

package/mobile/src/ui-kit/Select/Select.tsx

@@ -46,7 +46,7 @@ export const Select = JSX<SelectProps>(
             ${getBorderStyle(isBorder)}`}
             onClick={() => setIsOpen(!isOpen)}
           >
-            <p className="p-4 pr-8 h-[56px] overflow-hidden text-ellipsis whitespace-nowrap">
+            <p className="p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap">
               {selectedItem?.text || placeholder}
             </p>
             <Icon
@@ -59,7 +59,7 @@ export const Select = JSX<SelectProps>(
           {options?.length ? (
             <div className={`h-0 ${renderOptionsStyle(isOpen)}`}>
               <div
-                className={`bg-white text-l max-h-[256px] overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`}
+                className={`bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`}
               >
                 {options.map(renderOption(choiceOption, isOpen, isSelected))}
               </div>