@redneckz/wildless-cms-uni-blocks 0.5.10 → 0.5.12

package/mobile/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Branch } from '../../hooks/useFetchSafeBoxes';
+import type { Branch } from '../../hooks/useSafeBoxes';
 import type { Region } from './useGetRegions';
 import { WrapperSelect } from './WrapperSelect';
 
@@ -22,18 +22,18 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
     onSelectedBranch,
   }) => {
     return (
-      <div className="flex justify-between mb-6">
-        <div className="w-full mr-4">
+      <div className="flex justify-between gap-4 mb-6">
+        <div className="max-w-[396px] w-1/2">
           <WrapperSelect
             data={regions}
             fieldValue="code"
             fieldLabel="name"
             selected={selectedRegion}
             setSelected={onSelectedRegion}
-            label="Город"
+            label="Регион"
           />
         </div>
-        <div className="w-full">
+        <div className="max-w-[396px] w-1/2">
           <WrapperSelect
             data={branches}
             fieldValue="branchCode"

package/mobile/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { SafeBoxCase, SafeBoxCaseVolume } from '../../hooks/useFetchSafeBoxes';
+import type { SafeBoxCase, SafeBoxCaseVolume } from '../../hooks/useSafeBoxes';
 import { WrapperSelect } from './WrapperSelect';
 
 interface SafeBoxCasesProps {

package/mobile/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -1,36 +1,60 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useSafeBoxes } from '../../hooks/useSafeBoxes';
+import { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { SafeDepositRentalContent } from './SafeDepositRentalContent';
 import { SafeDepositRentalForm } from './SafeDepositRentalForm';
-import { useGetRegions } from './useGetRegions';
+import { HandleChangeState, SafeDepositRentalState } from './SafeDepositRentalTypes';
+import { Region, useGetRegions } from './useGetRegions';
+import { getBranch, getCoordinates } from './utils';
 import { YandexMap } from './YandexMap';
 
 export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
 
+const DEFAULT_DAYS = 26;
+
 export const SafeDepositRental = JSX<SafeDepositRentalProps>(
   ({ title, footnote, context, className = '', ...rest }) => {
-    const [points, setPoints] = useState<number[][]>([]);
     const [showMap, setShowMap] = useState<boolean>(false);
+    const [safeDepositState, setStateDepositState] = useState<SafeDepositRentalState>({
+      selectedRegion: '',
+      selectedBranch: '',
+      selectedCaseVolume: '',
+      selectedBoxSize: '',
+      days: DEFAULT_DAYS,
+    });
 
     const regions = useGetRegions();
 
-    const toggleShowMap = () => {
+    const selectedRegion = normalizeSelectedRegion(safeDepositState.selectedRegion, regions);
+
+    const branches = useSafeBoxes(selectedRegion);
+
+    const handleChangeSafeDepositState: HandleChangeState = useCallback(
+      (state) => setStateDepositState((oldState) => ({ ...oldState, ...state })),
+      [setStateDepositState],
+    );
+
+    const onShowMapToggle = () => {
       setShowMap(!showMap);
     };
 
+    const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
+
     return (
       <BlockWrapper context={context} className={className} {...rest}>
-        <div className="bg-white px-8 py-12">
+        <div className="font-sans bg-white px-8 py-12">
           {title ? (
             <Heading title={title} headingType="h3" as="h2" className="mb-2.5 text-center" />
           ) : null}
           <SafeDepositRentalForm
             regions={regions}
-            setPoints={setPoints}
-            toggleShowMap={toggleShowMap}
+            branches={branches}
+            data={{ ...safeDepositState, selectedRegion }}
+            onShowMapToggle={onShowMapToggle}
+            onChange={handleChangeSafeDepositState}
           />
           {footnote ? <p className="text-s-light text-secondary-text">{footnote}</p> : null}
         </div>
@@ -39,3 +63,6 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
     );
   },
 );
+
+const normalizeSelectedRegion = (selectedRegion: string, regions?: Region[]) =>
+  !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;

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

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

package/mobile/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -1,20 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Branch, SafeBoxCase, SafeBoxCaseVolume } from '../../hooks/useFetchSafeBoxes';
+import type { Branch, SafeBoxCase, SafeBoxCaseVolume } from '../../hooks/useSafeBoxes';
 import { Button } from '../../ui-kit/Button/Button';
 import { RegionsAndBranches } from './RegionsAndBranches';
 import { RenderRadioButtons } from './RenderRadioButtons';
 import { RentalPeriod } from './RentalPeriod';
 import { SafeBoxCases } from './SafeBoxCases';
-import type { SafeDepositRentalFormProps } from './SafeDepositRentalForm';
 import type { HandleChangeState, SafeDepositRentalState } from './SafeDepositRentalTypes';
-import { getBranch, getCoordinates } from './utils';
+import { Region } from './useGetRegions';
 
-export interface SafeDepositRentalFieldsProps
-  extends SafeDepositRentalState,
-    SafeDepositRentalFormProps {
-  onChange: HandleChangeState;
+export interface SafeDepositRentalFieldsProps extends SafeDepositRentalState {
+  regions?: Region[];
   safeBoxCases?: SafeBoxCase[];
   caseVolumes?: SafeBoxCaseVolume[];
+  branches?: Branch[];
+  onShowMapToggle: () => void;
+  onChange: HandleChangeState;
 }
 
 export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
@@ -28,9 +28,8 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
     selectedBoxSize,
     safeBoxCases,
     caseVolumes,
-    setPoints,
     onChange,
-    toggleShowMap,
+    onShowMapToggle,
   }) => {
     return (
       <div className="flex-1 mr-9">
@@ -40,7 +39,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
           onSelectedRegion={(value) => onChange({ selectedRegion: value })}
           branches={branches}
           selectedBranch={selectedBranch}
-          onSelectedBranch={onSelectedBranch(onChange, setPoints, branches)}
+          onSelectedBranch={onSelectedBranch(onChange)}
         />
         <RentalPeriod days={days} setDays={(value) => onChange({ days: value })} />
         <SafeBoxCases
@@ -54,23 +53,16 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
         <span className="text-secondary-text text-l-light">Тип договора</span>
         <div className="flex justify-between items-center mt-5">
           <RenderRadioButtons />
-          <Button text="Офисы на карте" version="primary" onClick={toggleShowMap} />
+          <Button text="Офисы на карте" version="primary" onClick={onShowMapToggle} />
         </div>
       </div>
     );
   },
 );
 
-const onSelectedBranch =
-  (
-    onChange: HandleChangeState,
-    setPoints: SafeDepositRentalFieldsProps['setPoints'],
-    branches: Branch[],
-  ) =>
-  (value: string) => {
-    onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
-    setPoints(getCoordinates(value ? getBranch(branches, value) : branches));
-  };
+const onSelectedBranch = (onChange: HandleChangeState) => (value: string) => {
+  onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
+};
 
 const onSelectedCaseVolume = (onChange: HandleChangeState) => (value: string) => {
   onChange({ selectedCaseVolume: value, selectedBoxSize: '' });

package/mobile/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -1,85 +1,57 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks/core';
-import { SafeBoxCase, SafeBoxCaseVolume, useFetchSafeBoxes } from '../../hooks/useFetchSafeBoxes';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks/core';
+import { Branch, SafeBoxCase, SafeBoxCaseVolume } from '../../hooks/useSafeBoxes';
 import { SafeDepositRentalFields } from './SafeDepositRentalFields';
 import { SafeDepositRentalTotal } from './SafeDepositRentalTotal';
-import type { HandleChangeState, SafeDepositRentalState } from './SafeDepositRentalTypes';
+import type { SafeDepositRentalState } from './SafeDepositRentalTypes';
 import type { Region } from './useGetRegions';
-import { getBranch, getCoordinates } from './utils';
-
-const DEFAULT_DAYS = 26;
+import { getBranch } from './utils';
 
 export interface SafeDepositRentalFormProps {
-  regions?: Region[];
-  setPoints: (points: number[][]) => void;
-  toggleShowMap: () => void;
+  regions: Region[];
+  branches: Branch[];
+  data: SafeDepositRentalState;
+  onShowMapToggle: () => void;
+  onChange: (data: Partial<SafeDepositRentalState>) => void;
 }
 
 export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) => {
-  const [safeDepositState, setStateDepositState] = useState<SafeDepositRentalState>({
-    selectedRegion: '',
-    selectedBranch: '',
-    selectedCaseVolume: '',
-    selectedBoxSize: '',
-    days: DEFAULT_DAYS,
-    branches: [],
-  });
-
-  const resultBranches = useFetchSafeBoxes(safeDepositState.selectedRegion);
-
-  const handleChangeSafeDepositState: HandleChangeState = (state) =>
-    setStateDepositState((oldState) => ({ ...oldState, ...state }));
-
-  useEffect(
-    () =>
-      handleChangeSafeDepositState({
-        selectedRegion: getInitialValueSelectedRegion(props.regions),
-      }),
-    [props.regions],
-  );
-
-  useEffect(() => {
-    if (Array.isArray(resultBranches) && resultBranches.length) {
-      handleChangeSafeDepositState({ branches: resultBranches });
-      props.setPoints(getCoordinates(resultBranches));
-    }
-  }, [resultBranches]);
+  const { regions, data, branches, onChange, onShowMapToggle } = props;
 
   useEffect(() => {
-    handleChangeSafeDepositState({
+    onChange({
       selectedBranch: '',
       selectedCaseVolume: '',
       selectedBoxSize: '',
     });
-  }, [safeDepositState.selectedRegion]);
+  }, [data.selectedRegion, onChange]);
 
-  const branch = getBranch(safeDepositState.branches, safeDepositState.selectedBranch);
+  const branch = getBranch(branches, data.selectedBranch);
   const caseVolumes = getCaseVolumes(branch?.safeBoxCaseVolumes);
 
   const safeBoxCases = getCaseVolume(
     branch?.safeBoxCaseVolumes,
-    safeDepositState.selectedCaseVolume,
+    data.selectedCaseVolume,
   )?.safeBoxCases;
 
-  const tariffs = getTariffs(safeBoxCases, safeDepositState.selectedBoxSize);
+  const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
 
   return (
     <div className="flex justify-between align-top mb-6">
       <SafeDepositRentalFields
-        {...safeDepositState}
-        {...props}
+        {...data}
+        regions={regions}
+        onShowMapToggle={onShowMapToggle}
+        branches={branches}
         caseVolumes={caseVolumes}
         safeBoxCases={safeBoxCases}
-        onChange={handleChangeSafeDepositState}
+        onChange={onChange}
       />
-      <SafeDepositRentalTotal days={safeDepositState.days} tariffs={tariffs} />
+      <SafeDepositRentalTotal days={data.days} tariffs={tariffs} />
     </div>
   );
 });
 
-const getInitialValueSelectedRegion = (regions?: Region[]) =>
-  regions?.length && regions[0]?.code ? regions[0].code : '';
-
 const getCaseVolumes = (safeBoxCaseVolumes?: SafeBoxCaseVolume[]) =>
   safeBoxCaseVolumes?.length ? safeBoxCaseVolumes?.filter((_) => _?.safeBoxCases?.length) : [];
 

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Tariff } from '../../hooks/useFetchSafeBoxes';
+import type { Tariff } from '../../hooks/useSafeBoxes';
 import { Img } from '../../ui-kit/Img/Img';
 
 export interface SafeDepositRentalTotalProps {
@@ -30,8 +30,8 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
 const renderTotal = (label: string, total: string | number, className = '') => {
   return (
     <div className={className}>
-      <span className="block text-m-light mb-1">{label}</span>
-      <span className="text-h3">{total}</span>
+      <div className="text-m-light text-secondary-text mb-1">{label}</div>
+      <span className="text-h3 text-primary-text">{total}</span>
     </div>
   );
 };

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTypes.ts

@@ -1,12 +1,9 @@
-import type { Branch } from '../../hooks/useFetchSafeBoxes';
-
 export interface SafeDepositRentalState {
   selectedRegion: string;
   selectedBranch: string;
   selectedCaseVolume: string;
   selectedBoxSize: string;
   days: number;
-  branches: Branch[];
 }
 
 export type HandleChangeState = (state: Partial<SafeDepositRentalState>) => void;

package/mobile/src/components/SafeDepositRental/WrapperSelect.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Select } from '../../ui-kit/Select/Select';
-import { SelectOption } from '../../ui-kit/Select/SelectOption';
+import { OptionProps, Select } from '../../ui-kit/Select/Select';
+import { Currency } from '../ExchangeRateTile/CurrencyProps';
 
 interface WrapperSelectProps {
   data: Record<string, any>[];
@@ -13,25 +13,20 @@ interface WrapperSelectProps {
 }
 
 export const WrapperSelect = JSX<WrapperSelectProps>(
-  ({ data, fieldLabel, fieldValue, selected, placeholder, setSelected, label }) => {
+  ({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
+    const dataFormat: OptionProps[] = data
+      .filter(Boolean)
+      .map((_) => ({ key: _?.[fieldValue || fieldLabel], text: _?.[fieldLabel] }));
+    const selectedObj = dataFormat.find((_) => _.key === selected);
+
     return (
-      <div>
-        <span className="block text-m-light mb-2">{label}</span>
-        <Select
-          className={`h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer ${
-            !selected ? 'text-secondary-text' : ''
-          }`}
-          value={selected}
-          onChange={(_) => setSelected(_)}
-        >
-          {placeholder ? <SelectOption value="">{placeholder}</SelectOption> : null}
-          {data.map((_, i) => (
-            <SelectOption key={String(i)} value={_?.[fieldValue || fieldLabel]}>
-              {_?.[fieldLabel]}
-            </SelectOption>
-          ))}
-        </Select>
-      </div>
+      <Select
+        options={dataFormat}
+        label={label}
+        placeholder={placeholder || selected}
+        onChange={(_) => setSelected(_.key as Currency)}
+        value={selectedObj}
+      />
     );
   },
 );

package/mobile/src/components/SafeDepositRental/utils.ts

@@ -1,4 +1,4 @@
-import type { Branch } from '../../hooks/useFetchSafeBoxes';
+import type { Branch } from '../../hooks/useSafeBoxes';
 
 export const getCoordinates = (data?: Branch | Branch[]): number[][] => {
   if (Array.isArray(data)) {

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

@@ -0,0 +1,19 @@
+{
+  "content": {
+    "steps": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        },
+        "button": {
+          "icon": {
+            "ui:field": "icon"
+          },
+          "iconRight": {
+            "ui:field": "icon"
+          }
+        }
+      }
+    }
+  }
+}

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,8 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 import type { IconProps } from '../../model/Picture';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 
 /**
  * @title Шаг
@@ -12,6 +12,13 @@ export type Step = DescriptionProps &
   IconProps & {
     /** @title Кнопка */
     button?: ButtonWithIconProps;
+    /**
+     * @title Буллиты
+     * @default true
+     */
+    isDotted?: boolean;
+    /** @title Список */
+    items?: string[];
   };
 
 /**
@@ -26,7 +33,7 @@ export type StepsBlockContent = HeadlineCommonProps & {
   /**
    * @title Шаги
    * @minItems 2
-   * @maxItems 4
+   * @maxItems 5
    */
   steps?: Step[];
   /** @title Кнопка */

package/mobile/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -7,6 +7,7 @@ export type StyleType = {
   iconText: string;
   iconBackground: string;
   iconConnector: string;
+  dot: string;
 };
 
 export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
@@ -17,6 +18,7 @@ export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
     iconText: 'text-secondary-text',
     iconBackground: 'bg-main-divider',
     iconConnector: 'bg-secondary-light',
+    dot: 'bg-secondary-text',
   },
   secondary: {
     background: 'bg-primary-main',
@@ -25,5 +27,6 @@ export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
     iconText: 'text-white',
     iconBackground: 'bg-white/30',
     iconConnector: 'bg-white',
+    dot: 'bg-white/80',
   },
 };

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

@@ -0,0 +1,17 @@
+import type { StyleType } from './StepsBlockStyleMaps';
+
+export const renderItems = (items?: string[], styleMap?: StyleType, isDotted = true) =>
+  items ? (
+    <div className={`mt-4 ${styleMap?.description}`} role="list">
+      {items.map((_) => (
+        <div className="items-start mt-1 first:mt-0" role="listitem">
+          {isDotted ? (
+            <div
+              className={`rounded-full inline-block mr-3 mb-1 w-1.5 h-1.5 min-w-1.5 min-h-1.5 ${styleMap?.dot}`}
+            />
+          ) : null}
+          <span>{_}</span>
+        </div>
+      ))}
+    </div>
+  ) : null;

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

@@ -11,13 +11,32 @@ export interface TabActivationEvent {
   label?: string;
 }
 
+export interface AnchorClickScrollingEvent {
+  isScrolling?: boolean;
+  label?: string;
+}
+
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { context, className, tabs, page, showCounter } = props;
+  const { context, className = '', tabs, page, showCounter, isSticky } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
+  useEffect(
+    () =>
+      EventBus.inst.subscribe('tab', (event) => {
+        if (!tabs) {
+          return;
+        }
+        const tab = tabs.find(checkTab(event));
+        if (event.type === 'link' && tab) {
+          setCurrentTab(tab);
+        }
+      }),
+    [tabs],
+  );
+
   useEffect(() => {
     if (currentTab?.type === 'group') {
       return EventBus.inst.subject('tab', { label: currentTab.ref });
@@ -29,17 +48,20 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
   const handleClick = (selectedTab: Tab) => {
     if (selectedTab?.type === 'group') {
       EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
-      setCurrentTab(selectedTab);
     }
+    setCurrentTab(selectedTab);
   };
 
   return (
     <BlockWrapper
       context={context}
-      className={`mb-2 box-border flex gap-x-1 ${className}`}
+      className={`${isSticky ? 'sticky top-1 z-20 ' : ''}box-border flex gap-x-1 ${className}`}
       role="tablist"
     >
       {tabs?.map(renderTab({ onClick: handleClick, currentTab, page, showCounter, context }))}
     </BlockWrapper>
   );
 });
+
+const checkTab = (event: TabActivationEvent) => (_: Tab) =>
+  _.type === 'link' && _.href === `#${event.label}`;

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

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

package/mobile/src/components/Tabs/TabsContent.ts

@@ -33,6 +33,8 @@ export type Tab = GroupTab | LinkTab;
 export interface TabsContent {
   /** @title Табы */
   tabs?: Tab[];
+  /** @title Закрепить сверху */
+  isSticky?: boolean;
   /** @title Показывать счетчик блоков во вкладках */
   showCounter?: boolean;
 }

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

@@ -1,25 +1,41 @@
 import type { LinkProps } from '../../model/LinkProps';
 import {
+  ACTIVE_LINK_CLASSES,
+  ACTIVE_TEXT_CLASSES,
   INACTIVE_LINK_CLASSES,
   INACTIVE_TEXT_CLASSES,
   LINK_CLASSES,
   TEXT_CLASSES,
 } from './tabItemClasses';
+import type { Tab } from './TabsContent';
 
 export interface RenderLinkTabProps extends LinkProps {
-  active?: boolean;
   onClick?: () => void;
   i: number;
+  currentTab?: Tab;
 }
 
-export const renderLinkTab = ({ text, onClick, href, target = '_self', i }: RenderLinkTabProps) => (
-  <a
-    key={String(i)}
-    className={`${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`}
-    target={target}
-    href={href}
-    onClick={onClick}
-  >
-    <span className={`${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`}>{text}</span>
-  </a>
-);
+export const renderLinkTab = ({
+  text,
+  currentTab,
+  onClick,
+  href,
+  target = '_self',
+  i,
+}: RenderLinkTabProps) => {
+  const active = currentTab?.type === 'link' && currentTab.href === href;
+
+  return (
+    <a
+      key={String(i)}
+      className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
+      target={target}
+      href={href}
+      onClick={onClick}
+    >
+      <span className={`${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`}>
+        {text}
+      </span>
+    </a>
+  );
+};

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

@@ -1,3 +1,4 @@
+import { EventBus } from '../../EventBus/EventBus';
 import { useLink } from '../../hooks/useLink';
 import type { ContentPageDef } from '../../model/ContentPageDef';
 import { assertUnreachable } from '../../utils/assertUnreachable';
@@ -31,11 +32,21 @@ export const renderTab =
     switch (type) {
       case 'group':
         return renderGroupTab({ onClick, currentTab, showCounter, page, context })(tab, i);
-      case 'link':
+      case 'link': {
+        const link = useLink({ router, handlerDecorator }, tab);
+        const linkClick = link.onClick;
+
         return renderLinkTab({
-          ...useLink({ router, handlerDecorator }, tab),
+          ...link,
+          onClick: (ev?: { preventDefault: () => void }) => {
+            linkClick(ev);
+            onClick(tab);
+            EventBus.inst.fire('anchorClick', { isScrolling: true, label: tab.href });
+          },
+          currentTab,
           i,
         });
+      }
       default:
         assertUnreachable(type);
     }