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

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

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "image": {
+      "ui:field": "picture"
+    }
+  }
+}

package/mobile/src/components/ImgBlock/ImgBlockContent.ts

@@ -0,0 +1,8 @@
+import type { Picture } from '../../model/Picture';
+
+/**
+ * @title Картинка
+ */
+export interface ImgBlockContent {
+  image?: Picture;
+}

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

@@ -1,15 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
 
-interface RenderNavButtonProps {
+interface NavButtonProps {
   title?: string;
   i: number;
-  activeSlideIndex?: number;
+  isActive: boolean;
   onClick: () => void;
 }
 
@@ -18,6 +18,7 @@ export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent,
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
   ({ className = '', title, insuranceTabs = [], button, ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+    const handleActiveSlideIndex = useCallback((_: number) => setActiveSlideIndex(_), []);
 
     return (
       <BlockWrapper
@@ -31,8 +32,8 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
               renderNavButton({
                 title: item?.title,
                 i,
-                activeSlideIndex,
-                onClick: () => setActiveSlideIndex(i),
+                isActive: Boolean(i === activeSlideIndex),
+                onClick: () => handleActiveSlideIndex(i),
               }),
             )}
           </div>
@@ -62,12 +63,8 @@ const renderInsuranceGalleries = ({ insuranceTabs, button }: InsuranceAmountBloc
     : null;
 };
 
-function renderNavButton({ title, i, activeSlideIndex, onClick }: RenderNavButtonProps) {
-  const isActiveBtn = i === activeSlideIndex;
-
-  const btnClassName = isActiveBtn
-    ? 'bg-primary-main text-white rounded-md'
-    : `text-secondary-text`;
+function renderNavButton({ title, i, isActive, onClick }: NavButtonProps) {
+  const btnClassName = isActive ? 'bg-primary-main text-white rounded-md' : `text-secondary-text`;
 
   return (
     <button

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

@@ -20,7 +20,7 @@ type InsuranceGalleryProps = {
   onClick: (index: number) => void;
 };
 
-type InsuranceSlideProps = {
+type NavButtonProps = {
   slide: CardItem;
   i: number;
   isActive: boolean;
@@ -80,7 +80,7 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
     >
       <div className={`w-full flex flex-nowrap gap-3.5 pb-12 ${cardsAlignStyle}`}>
         {cards.map((slide, i) =>
-          renderSlide({
+          renderNavButton({
             slide,
             i,
             isActive: Boolean(i === selectedCardIndex),
@@ -92,7 +92,7 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
   );
 }
 
-function renderSlide({ slide, i, isActive, onClick }: InsuranceSlideProps) {
+function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
   const btnClassName = isActive
     ? 'shadow-dark-blue/42 border-primary-main'
     : `ease-in duration-300 border-main-stroke`;

package/mobile/src/components/ParagraphBlock/ParagraphBlock.example.json

@@ -0,0 +1,5 @@
+{
+  "content": {
+    "text": "Текст"
+  }
+}

package/mobile/src/components/ParagraphBlock/ParagraphBlock.tsx

@@ -0,0 +1,19 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { ParagraphBlockContent } from './ParagraphBlockContent';
+
+interface ParagraphBlockProps extends ParagraphBlockContent, UniBlockProps {}
+
+export const ParagraphBlock = JSX<ParagraphBlockProps>((props) => {
+  const { className, text, size, color, align, font, ...rest } = props;
+
+  return (
+    <BlockWrapper className={className} {...rest}>
+      <Paragraph size={size} color={color} align={align} font={font}>
+        {text}
+      </Paragraph>
+    </BlockWrapper>
+  );
+});

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

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

package/mobile/src/components/ParagraphBlock/ParagraphBlockContent.ts

@@ -0,0 +1,9 @@
+import type { ParagraphProps } from '../../ui-kit/Paragraph/ParagraphProps';
+
+/**
+ * @title Параграф
+ */
+export interface ParagraphBlockContent extends ParagraphProps {
+  /** @title Текст */
+  text?: string;
+}

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

@@ -1,20 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
-import type { ProductGalleryContent, ProductGalleryNav } from './ProductGalleryContent';
+import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-interface RenderNavButtonProps {
-  slide?: ProductGalleryNav;
+interface NavButtonProps {
+  slide?: HeadlineCommonProps;
   i: number;
-  activeSlideIndex?: number;
+  isActive: boolean;
   onClick: () => void;
   version: BlockVersion;
 }
@@ -34,6 +35,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
     const galleryNav = slides.map((s) => s.nav);
     const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+    const handleActiveSlideIndex = useCallback((_: number) => setActiveSlideIndex(_), []);
 
     return (
       <BlockWrapper
@@ -54,8 +56,8 @@ export const ProductGallery = JSX<ProductGalleryProps>(
             renderNavButton({
               slide,
               i,
-              activeSlideIndex,
-              onClick: () => setActiveSlideIndex(i),
+              isActive: Boolean(i === activeSlideIndex),
+              onClick: () => handleActiveSlideIndex(i),
               version,
             }),
           )}
@@ -87,17 +89,15 @@ function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i:
   );
 }
 
-function renderNavButton({ slide, i, activeSlideIndex, onClick, version }: RenderNavButtonProps) {
-  const isActiveBtn = i === activeSlideIndex;
-
-  const btnClassName = isActiveBtn
+function renderNavButton({ slide, i, isActive, onClick, version }: NavButtonProps) {
+  const btnClassName = isActive
     ? 'bg-white shadow-dark-blue/42 min-w-[350px] border-none p-6'
     : `min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur
       ${VersionStyleMap[version]}`;
-  const btnTitleClassName = isActiveBtn
+  const btnTitleClassName = isActive
     ? 'text-primary-text !text-h6 p-2'
     : `text-l pb-1 ${productBlockStyleMap[version].title}`;
-  const btnDescClassName = isActiveBtn
+  const btnDescClassName = isActive
     ? 'text-secondary-text text-l-light'
     : `text-m-light ${productBlockStyleMap[version].text}`;
 

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -55,7 +55,16 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
   ),
 );
 
-RollupItem.childrenTypes = [];
+RollupItem.childrenTypes = {
+  exclude: [
+    'RollupItem',
+    'Accordion',
+    'AccordionItem',
+    'OtherProducts',
+    'OtherProductsItem',
+    'VerticalLayout',
+  ],
+};
 
 const renderFoldButton = ({ isUnfolded, onToggle, label, version }: RollupFoldablePartProps) => {
   const iconsPrimary: IconName[] = ['PlusIcon', 'MinusIcon'];

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

@@ -20,31 +20,29 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
     branches = [],
     selectedBranch,
     onSelectedBranch,
-  }) => {
-    return (
-      <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="Регион"
-          />
-        </div>
-        <div className="max-w-[396px] w-1/2">
-          <WrapperSelect
-            data={branches}
-            fieldValue="branchCode"
-            fieldLabel="address"
-            selected={selectedBranch}
-            setSelected={onSelectedBranch}
-            label="Отделение"
-            placeholder="Выберите отделение"
-          />
-        </div>
+  }) => (
+    <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="Регион"
+        />
       </div>
-    );
-  },
+      <div className="max-w-[396px] w-1/2">
+        <WrapperSelect
+          data={branches}
+          fieldValue="branchCode"
+          fieldLabel="address"
+          selected={selectedBranch}
+          setSelected={onSelectedBranch}
+          label="Отделение"
+          placeholder="Выберите отделение"
+        />
+      </div>
+    </div>
+  ),
 );

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

@@ -1,11 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks/core';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks/core';
 import { Radio } from '../../ui-kit/Radio/Radio';
 
 export const RenderRadioButtons = JSX(() => {
   const [selectedOption, setSelectedOption] = useState('option2');
-
-  const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelectedOption(_.target.value);
+  const onChange = useCallback((_: string) => setSelectedOption(_), []);
 
   return (
     <div>

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

@@ -18,6 +18,7 @@ const DEFAULT_DAYS = 26;
 export const SafeDepositRental = JSX<SafeDepositRentalProps>(
   ({ title, footnote, className = '', ...rest }) => {
     const [showMap, setShowMap] = useState<boolean>(false);
+    const handleShowMap = useCallback(() => setShowMap((_) => !_), []);
     const [safeDepositState, setStateDepositState] = useState<SafeDepositRentalState>({
       selectedRegion: '',
       selectedBranch: '',
@@ -37,10 +38,6 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
       [setStateDepositState],
     );
 
-    const onShowMapToggle = () => {
-      setShowMap(!showMap);
-    };
-
     const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
 
     return (
@@ -58,7 +55,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
             regions={regions}
             branches={branches}
             data={{ ...safeDepositState, selectedRegion }}
-            onShowMapToggle={onShowMapToggle}
+            onClick={handleShowMap}
             onChange={handleChangeSafeDepositState}
           />
           {footnote ? <p className="text-s-light text-secondary-text">{footnote}</p> : null}

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

@@ -13,7 +13,7 @@ export interface SafeDepositRentalFieldsProps extends SafeDepositRentalState {
   safeBoxCases?: SafeBoxCase[];
   caseVolumes?: SafeBoxCaseVolume[];
   branches?: Branch[];
-  onShowMapToggle: () => void;
+  onClick: () => void;
   onChange: HandleChangeState;
 }
 
@@ -29,7 +29,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
     safeBoxCases,
     caseVolumes,
     onChange,
-    onShowMapToggle,
+    onClick,
   }) => {
     return (
       <div className="flex-1 mr-9">
@@ -53,7 +53,7 @@ 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={onShowMapToggle} />
+          <Button text="Офисы на карте" version="primary" onClick={onClick} />
         </div>
       </div>
     );

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

@@ -11,12 +11,12 @@ export interface SafeDepositRentalFormProps {
   regions: Region[];
   branches: Branch[];
   data: SafeDepositRentalState;
-  onShowMapToggle: () => void;
+  onClick: () => void;
   onChange: (data: Partial<SafeDepositRentalState>) => void;
 }
 
 export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) => {
-  const { regions, data, branches, onChange, onShowMapToggle } = props;
+  const { regions, data, branches, onChange, onClick } = props;
 
   useEffect(() => {
     onChange({
@@ -41,7 +41,7 @@ export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) =>
       <SafeDepositRentalFields
         {...data}
         regions={regions}
-        onShowMapToggle={onShowMapToggle}
+        onClick={onClick}
         branches={branches}
         caseVolumes={caseVolumes}
         safeBoxCases={safeBoxCases}

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

@@ -3,13 +3,11 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { TariffsTableRowHeader } from './TariffsTableContent';
 
-export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => {
-  return (
-    <div className="flex gap-2.5 mb-2">
-      {title ? <Heading headingType="h3" className="font-medium" title={title} /> : null}
-      {icon ? (
-        <Img className="ml-auto max-w-6 max-h-6" image={icon} width="24px" height="24px" />
-      ) : null}
-    </div>
-  );
-});
+export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => (
+  <div className="flex gap-2.5 mb-2">
+    {title ? <Heading headingType="h3" className="font-medium" title={title} /> : null}
+    {icon ? (
+      <Img className="ml-auto max-w-6 max-h-6" image={icon} width="24px" height="24px" />
+    ) : null}
+  </div>
+));

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Img } from '../../ui-kit/Img/Img';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
@@ -19,8 +19,15 @@ export interface TariffsTableRowProps extends UniBlockProps {
 export const TariffsTableRow = JSX<TariffsTableRowProps>(
   ({ row: { header, data }, activeIndex, rowIdx, ...rest }) => {
     const [tableInner, setTableInner] = useState<TariffsTableInnerContent | undefined>(undefined);
+    const handleSetTableInner = useCallback(
+      (_: TariffsTableInnerContent | undefined) => setTableInner(_),
+      [],
+    );
     const [openTableInnerIdx, setOpenTableInnerIdx] = useState<number | undefined>(undefined);
-
+    const handleOpenTableInnerIdx = useCallback(
+      (_: number | undefined) => setOpenTableInnerIdx(_),
+      [],
+    );
     const onHideContentClick = () => setTableInner(undefined);
 
     return (
@@ -55,10 +62,10 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
                 cells={cells}
                 rowIdx={rowIdx}
                 cellIdx={i}
-                setTableInner={setTableInner}
+                setTableInner={handleSetTableInner}
                 tableInner={tableInner}
                 openTableInnerIdx={openTableInnerIdx}
-                setOpenTableInnerIdx={setOpenTableInnerIdx}
+                setOpenTableInnerIdx={handleOpenTableInnerIdx}
                 {...rest}
               />
             ))}

package/mobile/src/components/Video/VideoContent.ts

@@ -1,6 +1,7 @@
 import type { TitleProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 
+/** @title Блок Видео */
 export interface VideoContent extends TitleProps {
   /** @title URL */
   src?: string;

package/mobile/src/hooks/useIntersectionObserver.ts

@@ -1,11 +1,23 @@
-import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useMemo, useRef } from '@redneckz/uni-jsx/lib/hooks';
+
+export interface IntersectionObserverOptions<E extends Element = Element> {
+  sensitivity?: number; // from 0 to 1
+  rootRef?: { current: E | null };
+}
+
+const SENSITIVITY_SCALE = 10;
 
 export function useIntersectionObserver<R extends Element>(
   observerCallback: IntersectionObserverCallback,
-  observerOptions?: IntersectionObserverInit,
+  { sensitivity, rootRef }: IntersectionObserverOptions = {},
 ) {
   const ref = useRef<R | null>(null);
 
+  const observerOptions = useMemo(
+    () => ({ threshold: sensitivityToThreshold(sensitivity), root: rootRef?.current }),
+    [sensitivity, rootRef?.current],
+  );
+
   useEffect(() => {
     if (!ref.current) {
       return undefined;
@@ -21,3 +33,12 @@ export function useIntersectionObserver<R extends Element>(
 
   return ref;
 }
+
+function sensitivityToThreshold(sensitivity = 0): number[] {
+  const thresholdsCount = Math.round(sensitivity * SENSITIVITY_SCALE);
+
+  return new Array(thresholdsCount)
+    .fill(0)
+    .map((_, thi) => Math.min(thi / thresholdsCount), 1)
+    .concat(1);
+}

package/mobile/src/hooks/useLink.ts

@@ -1,6 +1,6 @@
 import type { LinkProps } from '../model/LinkProps';
 import { adjustHref } from '../utils/adjustHref';
-import { isURL } from '../utils/url';
+import { isHash, isURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
 import { useRouter } from './useRouter';
 
@@ -24,7 +24,7 @@ export function useLink(): <L extends Partial<LinkProps & ClickHandler>>(
         props.onClick && props.onClick(ev);
         const isLocalHref = href && !isURL(href);
         const isLocalTarget = !props.target || props.target === '_self';
-        if (isLocalHref && isLocalTarget) {
+        if (isLocalHref && isLocalTarget && !isHash(href)) {
           ev?.preventDefault();
           router.push(href);
         }

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

@@ -11,15 +11,6 @@ interface BlockWrapperProps extends UniBlockProps {
   role?: string;
 }
 
-const THRESHOLD_ACCURACY = 100; // Decimals number (100 is for two decimals number, 0.**)
-const THRESHOLD_ARRAY_LENGTH = 18;
-const THRESHOLD_ARRAY_START_VALUE =
-  (THRESHOLD_ACCURACY - THRESHOLD_ARRAY_LENGTH) / THRESHOLD_ACCURACY;
-
-const OBSERVER_OPTIONS = {
-  threshold: new Array(THRESHOLD_ARRAY_LENGTH).fill(0).map(getIntersectionThreshold),
-};
-
 export const BlockWrapper = JSX<BlockWrapperProps>(
   ({ className, block, tag = 'section', role, children }) => {
     const Tag: any = tag;
@@ -33,7 +24,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
       () => changeHashOnObserve({ anchor, anchorClickRef }),
       [anchor],
     );
-    const ref = useIntersectionObserver(observerCallback, OBSERVER_OPTIONS);
+    const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
 
     useEffect(
       () =>
@@ -65,12 +56,6 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
   },
 );
 
-function getIntersectionThreshold(_: number, i: number): number {
-  const value = (i + 1) / THRESHOLD_ACCURACY + THRESHOLD_ARRAY_START_VALUE;
-
-  return Math.round(value * THRESHOLD_ACCURACY) / THRESHOLD_ACCURACY;
-}
-
 function changeHash(label?: string) {
   if (label) {
     globalThis.document.location.hash = label;

package/mobile/src/ui-kit/Button/ArrowButton.tsx

@@ -24,3 +24,16 @@ export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) =
     />
   </Button>
 ));
+
+export const ScrollLeftButton = JSX<ButtonProps>((props) => (
+  <ArrowButton {...props} ariaLabel="Пролистать влево" data-block-control="scroll-left" />
+));
+
+export const ScrollRightButton = JSX<ButtonProps>((props) => (
+  <ArrowButton
+    {...props}
+    className={`${props.className || ''} rotate-180`}
+    ariaLabel="Пролистать вправо"
+    data-block-control="scroll-right"
+  />
+));

package/mobile/src/ui-kit/Foldable/FoldableSection.tsx

@@ -21,7 +21,9 @@ export const FoldableSection = JSX<FoldableSectionProps>(
     return (
       <div
         ref={containerRef}
-        className={`transition-max-h duration-300 overflow-hidden max-h-0 ${className}`}
+        className={`transition-max-h duration-300 overflow-hidden ${
+          containerRef.current || !isUnfolded ? 'max-h-0' : ''
+        } ${className}`}
       >
         {children}
       </div>

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

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useTariffsInnerTableData } from './useTariffsInnerTableData';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { InnerTableBody } from './InnerTableBody';
 import { TableInnerButton } from './InnerTableButton';
 import { InnerTableHeader } from './InnerTableHeader';
 import type { TableFetchData, TariffsTableInnerContent } from './InnerTableProps';
+import { useTariffsInnerTableData } from './useTariffsInnerTableData';
 
 export interface InnerTableProps extends TariffsTableInnerContent {
   onClick?: () => void;
@@ -14,10 +14,9 @@ const EMPTY_DATA = 'Данных нет';
 
 export const InnerTable = JSX<InnerTableProps>(({ dataUrl, pdfUrl, onClick }) => {
   const { tableData }: TableFetchData = useTariffsInnerTableData(dataUrl);
-
   const [activeTabIndex, setActiveTabIndex] = useState(0);
+  const handleActiveTabIndex = useCallback((_: number) => setActiveTabIndex(_), []);
   const items = tableData?.[activeTabIndex]?.items ?? [];
-
   const currencies = tableData?.map((item) => item.currency ?? '');
 
   return tableData ? (
@@ -25,7 +24,7 @@ export const InnerTable = JSX<InnerTableProps>(({ dataUrl, pdfUrl, onClick }) =>
       <InnerTableHeader
         currencies={currencies}
         activeTabIndex={activeTabIndex}
-        setActiveTabIndex={setActiveTabIndex}
+        setActiveTabIndex={handleActiveTabIndex}
         linkToPDF={pdfUrl} //TODO: need link to service
       />
       <InnerTableBody activeTabIndex={activeTabIndex} items={items} />

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Img } from '../Img/Img';
 import { InnerTableBodyItem } from './InnerTableBodyItem';
 import type { DataItem } from './InnerTableProps';
@@ -12,9 +12,10 @@ export interface InnerTableBodyProps {
 export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items }) => {
   const [hiddenTables, setHiddenTables] = useState<Record<string, boolean>>({});
 
-  const toggleTable = (key: string) => {
-    setHiddenTables((oldState) => ({ ...oldState, [key]: !oldState[key] }));
-  };
+  const toggleTables = useCallback(
+    (key) => setHiddenTables((oldState) => ({ ...oldState, [key]: !oldState[key] })),
+    [],
+  );
 
   return (
     <div>
@@ -25,7 +26,7 @@ export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items
           <div key={key} className="w-full">
             <div
               className="flex p-4 bg-main-stroke text-xl-light text-center justify-center cursor-pointer relative"
-              onClick={() => toggleTable(key)}
+              onClick={() => toggleTables(key)}
             >
               {_.title}
               <Img

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

@@ -1,12 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { FontWeight, TextAlign, TextColor, TextSize } from '../Text/Text';
-
-interface ParagraphProps {
-  size?: TextSize;
-  color?: TextColor;
-  align?: TextAlign;
-  font?: FontWeight;
-}
+import type { ParagraphProps } from './ParagraphProps';
 
 export const Paragraph = JSX<ParagraphProps>((props) => {
   const { size = '', color = '', align = '', font = '', children } = props;