@redneckz/wildless-cms-uni-blocks 0.14.28 → 0.14.30

package/src/components/OfficesAtmsMap/getScheduleDescription.tsx

@@ -0,0 +1,48 @@
+import { CardCell } from './CardCell';
+import type { WorkScheduleWeek } from './OfficesAtmsMapProps';
+
+export const getScheduleDescription = (workScheduleWeek: WorkScheduleWeek[]) => {
+  const workingWeekday = workScheduleWeek.find(
+    (_) => _.key !== 'workingSaturday' && Boolean(_.status) && Boolean(_.workTime),
+  );
+
+  const workingSaturday = workScheduleWeek.find(
+    (_) => _.key === 'workingSaturday' && Boolean(_.status) && Boolean(_.workTime),
+  );
+
+  const daysOff = workScheduleWeek
+    .filter((_) => !_.status)
+    .map((_) => _.short?.toLowerCase())
+    .join(', ');
+
+  const rows = [
+    buildScheduleText({
+      workTime: workingWeekday?.workTime,
+      lunchHour: workingWeekday?.lunchHour,
+      daysOff: workingSaturday ? '' : daysOff,
+    }),
+    buildScheduleText(
+      { workTime: workingSaturday?.workTime, lunchHour: workingSaturday?.lunchHour, daysOff },
+      true,
+    ),
+  ].filter(Boolean);
+
+  return <CardCell label="Режим работы" value={rows} className="max-w-none" />;
+};
+
+export const buildScheduleText = (
+  { workTime = '', lunchHour = '', daysOff = '' }: Record<string, string | undefined>,
+  isSaturday = false,
+) => {
+  if (!workTime) {
+    return '';
+  }
+
+  return [
+    `${isSaturday ? 'Суббота' : 'Будние дни'}: ${workTime}`,
+    lunchHour ? `перерыв: ${lunchHour}` : '',
+    daysOff ? `не работает: ${daysOff}` : '',
+  ]
+    .filter(Boolean)
+    .join('; ');
+};

package/src/components/OfficesAtmsMap/getWorkScheduleWeek.tsx

@@ -0,0 +1,28 @@
+import type { WorkSchedule, WorkScheduleWeek } from './OfficesAtmsMapProps';
+
+export const WEEKDAY_MAP = [
+  ['workingMonday', 'Пн', 'Понедельник'],
+  ['workingTuesday', 'Вт', 'Вторник'],
+  ['workingWednesday', 'Ср', 'Среда'],
+  ['workingThursday', 'Чт', 'Четверг'],
+  ['workingFriday', 'Пт', 'Пятница'],
+  ['workingSaturday', 'Сб', 'Суббота'],
+  ['workingSunday', 'Вс', 'Воскресенье'],
+];
+
+export const getWorkScheduleWeek = (workSchedule?: WorkSchedule): WorkScheduleWeek[] =>
+  WEEKDAY_MAP.map(([key, short, title]) => ({
+    key,
+    title,
+    short,
+    status: Boolean(workSchedule?.[key]),
+    get workTime() {
+      return key === 'workingSaturday' ? workSchedule?.workTimeSaturday : workSchedule?.workTime;
+    },
+    get lunchHour() {
+      return key === 'workingSaturday' ? workSchedule?.lunchHourSaturday : workSchedule?.lunchHour;
+    },
+    get hasLunch() {
+      return /\d+/.test(this.lunchHour ?? '');
+    },
+  }));

package/src/components/OfficesAtmsMap/renderBusinessSchedule.tsx

@@ -0,0 +1,54 @@
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { CardCell } from './CardCell';
+import { CardRow } from './CardRow';
+import { WEEKDAY_MAP } from './getWorkScheduleWeek';
+import type { WorkScheduleWeek } from './OfficesAtmsMapProps';
+
+export const renderBusinessSchedule = (scheduleDescription?: string) => {
+  if (!scheduleDescription) {
+    return null;
+  }
+
+  const businessSchedule = getBusinessSchedule(scheduleDescription);
+
+  return (
+    <CardRow className="border-none">
+      <CardCell label="Для юридических лиц" labelSize="text-l">
+        <div className="flex gap-1">{businessSchedule.map(renderAlternativeDay)}</div>
+      </CardCell>
+      <CardCell label="Режим работы" className="max-w-none">
+        <Text>{scheduleDescription}</Text>
+      </CardCell>
+    </CardRow>
+  );
+};
+
+export const getBusinessSchedule = (scheduleDescription: string) => {
+  const weekDayMap = WEEKDAY_MAP.map(([, short]) => ({ short, status: true }));
+
+  const splittedScheduleDescription = scheduleDescription.split('/') ?? [];
+  const lastPartScheduleDescription =
+    splittedScheduleDescription[splittedScheduleDescription.length - 1]?.toLowerCase();
+
+  if (!lastPartScheduleDescription?.includes('выходной')) {
+    return weekDayMap;
+  }
+
+  return weekDayMap.map((_) => ({
+    ..._,
+    status: !lastPartScheduleDescription?.includes(_.short.toLowerCase()),
+  }));
+};
+
+export const renderAlternativeDay = ({ short, status }: WorkScheduleWeek, index: number) => (
+  <div
+    key={String(index)}
+    className={style(
+      'w-9 h-9 rounded-md flex items-center justify-center',
+      status ? 'bg-green-more-light text-green-dark' : 'bg-error/30 text-error',
+    )}
+  >
+    <Text size="text-xs">{short}</Text>
+  </div>
+);

package/src/components/OfficesAtmsMap/renderOfficeCard.tsx

@@ -3,22 +3,10 @@ import { Text } from '../../ui-kit/Text/Text';
 import { Badge } from './Badge';
 import { CardCell } from './CardCell';
 import { CardRow } from './CardRow';
-import {
-  type Branch,
-  type Currency,
-  type WorkSchedule,
-  type WorkScheduleWeek,
-} from './OfficesAtmsMapProps';
-
-const WEEKDAY_MAP = [
-  ['Понедельник', 'workingMonday'],
-  ['Вторник', 'workingTuesday'],
-  ['Среда', 'workingWednesday'],
-  ['Четверг', 'workingThursday'],
-  ['Пятница', 'workingFriday'],
-  ['Суббота', 'workingSaturday'],
-  ['Воскресенье', 'workingSunday'],
-];
+import { getScheduleDescription } from './getScheduleDescription';
+import { getWorkScheduleWeek } from './getWorkScheduleWeek';
+import { type Branch, type Currency, type WorkScheduleWeek } from './OfficesAtmsMapProps';
+import { renderAlternativeDay, renderBusinessSchedule } from './renderBusinessSchedule';
 
 const currentWeekDayIdx = new Date().getDay();
 
@@ -37,14 +25,20 @@ export const renderOfficeCard = (
   }: Branch,
   index: number,
 ) => {
-  const workScheduleWeek = workSchedule ? getWorkScheduleWeek(workSchedule) : null;
-  const [currentWeekDay] = workScheduleWeek?.slice(currentWeekDayIdx - 1) ?? [];
+  if (!workSchedule) {
+    return null;
+  }
+
+  const workScheduleWeek = getWorkScheduleWeek(workSchedule);
+  const labelSchedule = workSchedule?.businessScheduleVisibleTag
+    ? 'Для физических лиц'
+    : 'Для физических и юридических лиц';
 
   return (
     <div key={String(index)} className="bg-white col-span-12 p-3xl border-green border">
       <div className="flex justify-between">
         <Text size="text-h4">{name}</Text>
-        {renderCurrentDaySchedule(currentWeekDay)}
+        {renderCurrentDaySchedule(workScheduleWeek)}
       </div>
       {address ? (
         <div className="flex pb-xl pt-xs gap-2xs">
@@ -60,7 +54,23 @@ export const renderOfficeCard = (
         <CardCell label="Для консультаций по валютному контролю" value={phoneCurrencyControl} />
         <CardCell label="Контакт-центр" value={phoneCallCentre} />
       </CardRow>
-      {workScheduleWeek?.length ? <CardRow>{workScheduleWeek?.map(renderDay)}</CardRow> : null}
+      {workSchedule.isMatchesPattern ? (
+        <CardRow>
+          <CardCell label={labelSchedule} labelSize="text-l" className="w-full max-w-none">
+            <div className="flex justify-between pt-xs">{workScheduleWeek?.map(renderDay)}</div>
+          </CardCell>
+        </CardRow>
+      ) : (
+        <CardRow>
+          <CardCell label={labelSchedule} labelSize="text-l">
+            <div className="flex gap-1">{workScheduleWeek?.map(renderAlternativeDay)}</div>
+          </CardCell>
+          {getScheduleDescription(workScheduleWeek)}
+        </CardRow>
+      )}
+      {workSchedule?.businessScheduleVisibleTag
+        ? renderBusinessSchedule(workSchedule?.businessScheduleDescription)
+        : null}
       {exchangeRate?.currencies?.length ? (
         <CardRow className="flex-wrap">{exchangeRate?.currencies?.map(renderCurrency)}</CardRow>
       ) : null}
@@ -68,21 +78,6 @@ export const renderOfficeCard = (
   );
 };
 
-const getWorkScheduleWeek = (workSchedule?: WorkSchedule): WorkScheduleWeek[] =>
-  WEEKDAY_MAP.map(([title, key]) => {
-    const dayOff = ['workingSaturday', 'workingSunday'].includes(key);
-
-    return {
-      title,
-      status: Boolean(workSchedule?.[key]),
-      workTime: dayOff ? workSchedule?.workTimeSaturday : workSchedule?.workTime,
-      lunchHour: dayOff ? workSchedule?.lunchHourSaturday : workSchedule?.lunchHour,
-      get hasLunch() {
-        return /\d+/.test(this.lunchHour ?? '');
-      },
-    };
-  });
-
 export const renderCurrency = (
   { currency, buyExchangeRate, saleExchangeRate }: Currency,
   i: number,
@@ -95,17 +90,19 @@ export const renderCurrency = (
 );
 
 //TODO: Add logic time https://github.com/redneckz/wildless-cms-uni-blocks/pull/1549
-export const renderCurrentDaySchedule = (workScheduleWeek?: WorkScheduleWeek) => {
-  if (!workScheduleWeek) {
+export const renderCurrentDaySchedule = (workScheduleWeek?: WorkScheduleWeek[]) => {
+  const [currentWeekDay] = workScheduleWeek?.slice(currentWeekDayIdx - 1) ?? [];
+
+  if (!currentWeekDay) {
     return null;
   }
 
-  const { lunchHour, status, workTime, hasLunch } = workScheduleWeek;
+  const { lunchHour, status, workTime, hasLunch } = currentWeekDay;
 
   return status ? (
-    <div className="flex gap-s">
+    <div className="flex gap-s items-start whitespace-nowrap">
       {workTime ? <Badge color="green">{workTime}</Badge> : null}
-      {lunchHour && hasLunch ? <Badge color="yellow">{lunchHour}</Badge> : null}
+      {lunchHour && hasLunch ? <Badge color="yellow">{`перерыв: ${lunchHour}`}</Badge> : null}
     </div>
   ) : (
     <Badge color="red">Выходной</Badge>
@@ -120,7 +117,15 @@ export const renderDay = (
     key={String(index)}
     label={title}
     value={status && workTime ? workTime : ''}
-    subText={!status ? 'Выходной' : lunchHour}
+    subText={getSubTextLunch(lunchHour, hasLunch, status)}
     subColor={!status || hasLunch ? 'text-error' : 'text-green-dark'}
   />
 );
+
+const getSubTextLunch = (lunchHour?: string, hasLunch = false, status = false) => {
+  if (!status) {
+    return 'Не работает';
+  }
+
+  return lunchHour && hasLunch ? `Перерыв ${lunchHour}` : lunchHour;
+};

package/src/components/ProductBlock/ProductBlock.fixture.mobile.tsx

@@ -89,6 +89,48 @@ export default {
       <ProductBlock className="col-span-12" {...props} benefits={benefits} label={label} />
     </div>
   ),
+  'primary with insurance': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        isFullWidthTitle={true}
+        align="text-center"
+        headlineVersion="M"
+        title="Страховые риски и продукты"
+        description="Покрываемые риски программы «Защита вас и ваших близких»"
+        image={image}
+        benefits={[
+          {
+            type: 'default',
+            label: 'Телесное повреждение',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+          {
+            type: 'default',
+            label: 'Госпитализация застрахованного',
+            description: 'Описание',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+          {
+            type: 'default',
+            label:
+              'Сокращение численности работников организации и другой текст для теста длинны текста',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+          {
+            type: 'default',
+            label: 'Смерть застрахованного',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+        ]}
+        priceList={[
+          { label: 'Страховая сумма', amount: 500000 },
+          { label: 'Ежемесячный лимит', amount: 25000 },
+        ]}
+        imageOptions={{ directionRight: false }}
+      />
+    </div>
+  ),
   secondary: (
     <div className="container grid grid-cols-12">
       <ProductBlock className="col-span-12" {...props} benefits={benefits} version="secondary" />

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -146,6 +146,48 @@ export default {
       />
     </div>
   ),
+  'primary with insurance': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        isFullWidthTitle={true}
+        align="text-center"
+        headlineVersion="M"
+        title="Страховые риски и продукты"
+        description="Покрываемые риски программы «Защита вас и ваших близких»"
+        image={image}
+        benefits={[
+          {
+            type: 'default',
+            label: 'Телесное повреждение',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+          {
+            type: 'default',
+            label: 'Госпитализация застрахованного',
+            description: 'Описание',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+          {
+            type: 'default',
+            label:
+              'Сокращение численности работников организации и другой текст для теста длинны текста',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+          {
+            type: 'default',
+            label: 'Смерть застрахованного',
+            icon: { icon: 'ShieldTickIcon' },
+          },
+        ]}
+        priceList={[
+          { label: 'Страховая сумма', amount: 500000 },
+          { label: 'Ежемесячный лимит', amount: 25000 },
+        ]}
+        imageOptions={{ directionRight: false }}
+      />
+    </div>
+  ),
   'secondary with back button': (
     <div className="container grid grid-cols-12">
       <ProductBlock

package/src/components/RichTextBlock/RichTextBlock.fixture.tsx

@@ -37,6 +37,21 @@ export const RICH_TEXT_SEPARATOR: RichTextBlockContent = {
     '</table>',
   richVersion: 'horizontal-separator',
 };
+export const RICH_CARD: RichTextBlockContent = {
+  padding: 'p-xl',
+  __html:
+    '<h4>Заголовок 4</h4><p><br></p>' +
+    '<table>' +
+    '<thead><tr><th><p>Эмитент</p></th><th><p>Код</p></th></tr></thead>' +
+    '<tbody>' +
+    '<tr><td><p>ПАО «Полюс»</p></td><td><p>PLZL</p></td></tr>' +
+    '<tr><td><p>Полиметалл Интернэшнл плс</p></td><td><p>POLY</p></td></tr>' +
+    '<tr><td><p>ПАО «ГМК «Норильский никель»<br></p></td><td><p>GMKN<br></p></td></tr>' +
+    '<tr><td><p>ПАО «Лензолото»<br></p></td><td><p>LNZL<br></p></td></tr>' +
+    '</tbody>' +
+    '</table>',
+  richVersion: 'striped',
+};
 
 export default {
   default: (

package/src/components/RichTextBlock/RichTextBlockContent.ts

@@ -1,6 +1,7 @@
+import { type UniBlockContent } from '../../model/JSXBlock';
 import { type RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
 /**
  * @title Форматированный текст
  */
-export type RichTextBlockContent = RichTextProps;
+export type RichTextBlockContent = UniBlockContent & RichTextProps;

package/src/components/StepsBlock/StepsBlock.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { AlignStyles } from '../../model/AlignStyles';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -20,15 +21,16 @@ const getPaddingX = (steps: number) => (steps < 5 ? 'px-24' : 'px-16');
 
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
+    align = AlignStyles,
+    buttons,
     className = '',
+    description,
     showLines = true,
-    steps = [],
-    buttons,
     size = 'normal',
-    version = 'primary',
+    steps = [],
     stepVersion = 'gray',
     title,
-    description,
+    version = 'primary',
     ...rest
   }) => {
     const shortGaps = steps.length > 3;
@@ -56,6 +58,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
           description={description}
           isEmbedded={true}
           className="w-full"
+          align={align}
         />
         {steps?.length ? (
           <div className="box-border space-y-lg">

package/src/components/VerticalLayout/VerticalLayout.fixture.tsx

@@ -1,6 +1,5 @@
-import '../../setup-fixture';
-
 import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { type LinkDocsContent } from '../LinkDocs/LinkDocsContent';
 import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
@@ -21,22 +20,15 @@ const options = {
   blocksRegistry: Blocks,
 } as BlockRendererOptions;
 
-const carouselProductCard = {
+const carouselRecommendationCard = {
   content: {
-    headlineSmallVersion: 'L_R',
     isDotted: true,
     title: 'Новость 1',
     version: 'primary',
     additionalDescription: '12 сентября 2022',
-    icon: {
-      size: {
-        width: 150,
-        height: 150,
-      },
-    },
   },
   style: ['col-span-12'],
-  type: 'CarouselProductCard',
+  type: 'CarouselRecommendationCard',
 };
 
 export default {
@@ -223,7 +215,7 @@ export default {
               },
               style: ['col-span-12'],
               type: 'Carousel',
-              blocks: new Array(6).fill(carouselProductCard),
+              blocks: new Array(6).fill(carouselRecommendationCard),
             },
           ],
         }}

package/src/hooks/useResizeObserver.ts

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+
+export function useResizeObserver<T extends HTMLDivElement, Deps extends any[] = []>(
+  callback: (target: T, entry: ResizeObserverEntry) => void,
+  deps: Deps,
+) {
+  const ref = useRef<T | null>(null);
+
+  useEffect(() => {
+    const element = ref?.current;
+
+    if (!element) {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      callback(element, entries[0]);
+    });
+
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [callback, ...deps]);
+
+  return ref;
+}

package/src/model/HeadlineType.ts

@@ -10,12 +10,6 @@ import { type TextAlign } from '../ui-kit/Text/TextProps';
  */
 export type HeadlineVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
 
-/**
- * @title Размер заголовка
- * @enumNames ["Заголовок", "Самый большой тонкий", "Самый большой", "Очень большой тонкий", "Очень большой", "Большой", "Средний", "Маленький"]
- */
-export type HeadlineSmallVersion = 'H6' | 'XL_L' | 'XL_R' | 'L_L' | 'L_R' | 'M' | 'S' | 'XS';
-
 export type TitleProps = {
   /** @title Заголовок */
   title?: string;
@@ -51,7 +45,3 @@ export type HeadlineCommonProps = TitleProps & DescriptionProps & AlignProps;
 export type HeadlineProps = HeadlineCommonProps & {
   headlineVersion?: HeadlineVersion;
 };
-
-export type HeadlineSmallProps = HeadlineCommonProps & {
-  headlineSmallVersion?: HeadlineSmallVersion;
-};

package/src/ui-kit/BaseProductTile/BaseProductTile.tsx

@@ -8,6 +8,7 @@ import { BenefitsList } from '../BenefitsList/BenefitsList';
 import { renderButtonsSection } from '../Button/renderButtonsSection';
 import { Img } from '../Img/Img';
 import { List } from '../List/List';
+import { PriceList } from '../PriceList/PriceList';
 import { RichText } from '../RichText/RichText';
 import { Tags } from '../Tags/Tags';
 import { type TextAlign } from '../Text/TextProps';
@@ -31,6 +32,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     isFullWidthTitle,
     items,
     isDotted = true,
+    priceList = [],
     listItemSize,
     tags = [],
     buttons,
@@ -74,6 +76,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
             <List items={items} isDotted={isDotted} listItemSize={listItemSize} />
           ) : null}
           {children}
+          {priceList?.length ? <PriceList priceList={priceList} /> : null}
           {renderTags(tags)}
         </div>
       </BaseTile>

package/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -20,6 +20,16 @@ export interface TileImageOptions {
   isImageAlwaysOnRight?: boolean;
 }
 
+export interface PriceItem {
+  label?: string;
+  amount?: number;
+  unit?: string;
+}
+
+export interface PriceListProps {
+  priceList?: PriceItem[];
+}
+
 export type BaseProductTileContent = HeadlineProps &
   BenefitsListContent &
   RichTextProps &
@@ -28,7 +38,8 @@ export type BaseProductTileContent = HeadlineProps &
   TagsContent &
   ButtonsSectionContent &
   ImageContent &
-  LabelProps & {
+  LabelProps &
+  PriceListProps & {
     imageOptions?: TileImageOptions;
     /** @title Заголовок во всю ширину */
     isFullWidthTitle?: boolean;

package/src/ui-kit/BaseTile/BaseTile.tsx

@@ -46,11 +46,11 @@ export const BaseTile = JSX<BaseTileProps>(
       {title ? <div className="relative">{title}</div> : null}
       <div
         className={style(
-          'grow relative flex flex-col @md:flex-row gap-3xl',
+          'grow relative flex flex-col @xl:flex-row gap-3xl',
           leftImage ? 'self-start' : '',
         )}
       >
-        {renderImageContainer(leftImage, { imageAlign, className: 'm-auto' })}
+        {renderImageContainer(leftImage, { imageAlign, className: 'mx-auto' })}
         <div
           className={style(
             'grid gap-3xl',
@@ -104,4 +104,4 @@ const renderImageContainer = (
   ) : null;
 
 const imageSecondaryStyle = (isImageSecondary: boolean) =>
-  isImageSecondary ? 'hidden @md:block' : '';
+  isImageSecondary ? 'hidden @xl:block' : '';

package/src/ui-kit/Button/renderButtonsSection.tsx

@@ -39,7 +39,7 @@ const renderButton =
     return text || icon?.icon ? (
       <Button
         key={index ? String(index) : ''}
-        className={style('basis-full sm:basis-auto', buttonClassName)}
+        className={style('basis-full lg:basis-auto', buttonClassName)}
         appendLeft={renderButtonIcon({ ...icon, iconVersion })}
         appendRight={renderButtonIcon({ ...iconRight, iconVersion: iconRightVersion })}
         version={version}

package/src/ui-kit/DatePicker/DatePicker.tsx

@@ -67,7 +67,9 @@ export const DatePicker = JSX<DatePickerProps>(
 
     return (
       <div className={style(className, 'relative')} ref={ref}>
-        <Text size="text-m">{label}</Text>
+        <Text size="text-m" font-weight="font-light">
+          {label}
+        </Text>
         {renderDatePickerForm(handleChangeVisibleCalendar, value, valid)}
         {showCalendar ? (
           <div className="absolute bg-white z-10 select-none">

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 
 export interface FoldableSectionProps {
   className?: string;
@@ -9,23 +10,27 @@ export interface FoldableSectionProps {
 export const FoldableSection = JSX<FoldableSectionProps>(
   ({ className = '', isUnfolded, children }) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
-
-    useEffect(() => {
-      if (containerRef.current) {
-        containerRef.current.style.maxHeight = isUnfolded
-          ? `${containerRef.current.scrollHeight}px`
-          : '';
-      }
-    }, [isUnfolded, children?.length]);
+    const childrenWrapperRef = useResizeObserver(
+      (childrenWrapperEl) => {
+        if (containerRef.current) {
+          containerRef.current.style.maxHeight = isUnfolded
+            ? `${childrenWrapperEl.scrollHeight}px`
+            : '';
+        }
+      },
+      [isUnfolded],
+    );
 
     return (
       <div
         ref={containerRef}
         className={`transition-max-h duration-300 overflow-hidden ${
           containerRef.current || !isUnfolded ? 'max-h-0' : ''
-        } ${className}`}
+        } `}
       >
-        {children}
+        <div className={className} ref={childrenWrapperRef}>
+          {children}
+        </div>
       </div>
     );
   },