@redneckz/wildless-cms-uni-blocks 0.14.742 → 0.14.744

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -2,14 +2,13 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { type AspectsDef } from '../../model/AspectsProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { IconButton } from '../../ui-kit/Button/IconButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
-import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { type CarouselTariffsCardContent } from './CarouselTariffsCardContent';
@@ -49,7 +48,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
       [options?.parent],
     );
 
-    const toggle = useCallback(() => {
+    const handleFold = useCallback(() => {
       carouselTariffsCardEventBus.fire('fold', {
         type: 'fold',
         isUnfolded: !isVisible,
@@ -69,19 +68,15 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
         ) : null}
         {button?.text ? <LinkButton className="w-full mt-m mb-lg" {...button} /> : null}
         {hiddenCells.length ? (
-          <Foldable
-            renderFoldableSection={() => (
-              <div>
-                {visibleCells}
-                <FoldableSection isUnfolded={isVisible}>{hiddenCells}</FoldableSection>
-              </div>
-            )}
-            renderFoldButton={() =>
-              cardCells.length >= visibleCellsCount ? (
-                <FoldButton data={data} isUnfolded={isVisible} onClick={toggle} />
-              ) : null
-            }
-          />
+          <Foldable>
+            <div>
+              {visibleCells}
+              <FoldableSection isUnfolded={isVisible}>{hiddenCells}</FoldableSection>
+            </div>
+            {cardCells.length >= visibleCellsCount ? (
+              <FoldButton isUnfolded={isVisible} data={data} onClick={handleFold} />
+            ) : null}
+          </Foldable>
         ) : (
           <div>{visibleCells}</div>
         )}
@@ -90,24 +85,14 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   },
 );
 
-const FoldButton = JSX<{
-  data?: AspectsDef[];
-  isUnfolded?: boolean;
-  onClick?: () => void;
-}>(({ data, isUnfolded = false, onClick }) => (
-  <button
-    className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"
-    type="button"
-    onClick={onClick}
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...(isUnfolded ? getAspectsAttributes(data) : {})}
-  >
-    <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
-    <Icon
-      className="text-primary-text"
-      name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-      width="16"
-      height="16"
+const FoldButton = JSX<{ isUnfolded?: boolean; data?: AspectsDef[]; onClick?: () => void }>(
+  ({ data, isUnfolded, onClick }) => (
+    <IconButton
+      className="w-full"
+      {...(isUnfolded
+        ? { name: 'ArrowUpIcon', text: 'Скрыть', data }
+        : { name: 'ArrowDownIcon', text: 'Подробнее о тарифе' })}
+      onClick={onClick}
     />
-  </button>
-));
+  ),
+);

package/src/components/OfficesAtmsMap/FiltrationForm.tsx

@@ -0,0 +1,79 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { type FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+
+const COMMON_FILTERS_STYLES = 'flex flex-col sm:flex-row sm:flex-wrap gap-3xl pb-2xl';
+
+export interface RenderFiltrationFormProps {
+  filters: string[];
+  field: { field: FormFieldRegisterer<any>; reset: () => void };
+  onlyOffice?: boolean;
+  labels: Record<string, string>;
+}
+
+export const FiltrationForm = JSX<RenderFiltrationFormProps>(
+  ({ filters, field: { field, reset }, onlyOffice, labels }) => {
+    const visibleFiltersNum = onlyOffice ? 5 : 6;
+
+    const filtersCheckbox = (filters || []).map((key) => (
+      <Checkbox key={key} text={labels[key]} {...field(key)} />
+    ));
+
+    const [visibleFilters, hiddenFilters] =
+      visibleFiltersNum > 0
+        ? [filtersCheckbox.slice(0, visibleFiltersNum), filtersCheckbox.slice(visibleFiltersNum)]
+        : [filtersCheckbox, []];
+
+    const [isUnfolded, { toggle }] = useBool(false);
+
+    return (
+      <div>
+        {filters?.length ? (
+          <div>
+            <Foldable>
+              <div>
+                <div className={COMMON_FILTERS_STYLES}>{visibleFilters}</div>
+                <FoldableSection className={COMMON_FILTERS_STYLES} isUnfolded={isUnfolded}>
+                  {hiddenFilters}
+                </FoldableSection>
+              </div>
+              {renderFoldButton(reset, onlyOffice)({ isUnfolded, onToggle: toggle })}
+            </Foldable>
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+// TODO Столько разных кнопок с иконками, но эта самая творчески-ударённая реализация))
+export const renderFoldButton =
+  (reset: () => void, onlyOffice = false) =>
+  ({ isUnfolded, onToggle }: FoldablePartProps) =>
+    (
+      <div className="flex space-x-lg">
+        {onlyOffice ? (
+          <LinkButton
+            version="transparent"
+            className="text-secondary-text [&>*]:p-0"
+            appendRight={
+              <Icon name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'} width="16" height="16" />
+            }
+            text={isUnfolded ? 'Меньше фильтров' : 'Больше фильтров'}
+            onClick={onToggle}
+          />
+        ) : null}
+        <LinkButton version="transparent" className="text-secondary-text [&>*]:p-0" onClick={reset}>
+          <div className="flex items-center">
+            Очистить фильтр
+            <Icon name="CloseIcon" width="16" height="16" className="ml-2xs" />
+          </div>
+        </LinkButton>
+      </div>
+    );

package/src/components/OfficesAtmsMap/FoldableCardContent.tsx

@@ -0,0 +1,16 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { renderFoldButton } from './renderFoldButton';
+
+export const FoldableCardContent = JSX(({ children }) => {
+  const [isUnfolded, { toggle }] = useBool(false);
+
+  return (
+    <Foldable className="block sm:hidden">
+      <FoldableSection isUnfolded={isUnfolded}>{children}</FoldableSection>
+      {renderFoldButton({ isUnfolded, onToggle: toggle })}
+    </Foldable>
+  );
+});

package/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -6,11 +6,11 @@ import { ClientOnly } from '../../ui-kit/ClientOnly';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
 import { style } from '../../utils/style';
 import { FILTRATION_LABELS, FILTRATION_PREDICATES, INITIAL_FILTRATION_STATE } from './filters';
+import { FiltrationForm } from './FiltrationForm';
 import { type AtmsDef } from './OfficesAtmsMapContent';
 import { type Atm, type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
 import { renderButtonsGroup } from './renderButtonsGroup';
 import { renderDescriptionBlock } from './renderDescriptionBlock';
-import { renderFiltrationForm, type RenderFiltrationFormOptions } from './renderFiltrationForm';
 import { renderHeading } from './renderHeading';
 import { useOfficesAtmsMapData } from './useOfficesAtmsMapData';
 import { type BalloonContent } from './YandexMapProps';
@@ -63,13 +63,6 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
 
     const [activeButton, setActiveButton] = useState('all');
 
-    const filterOptions: RenderFiltrationFormOptions = {
-      filters: getFiltersWithNonEmptyData([...data, ...remoteWorkplaces]),
-      field: { field, reset },
-      onlyOffice,
-      labels: FILTRATION_LABELS,
-    };
-
     return (
       <div className={style('space-y-1', className)}>
         <div className="bg-white">
@@ -78,7 +71,12 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm |
             {descriptionData ? renderDescriptionBlock(descriptionData) : null}
             {onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton)}
             <div className={style('pb-3xl', filtersVisibleStyles(activeButton))}>
-              {renderFiltrationForm(filterOptions)}
+              <FiltrationForm
+                filters={getFiltersWithNonEmptyData([...data, ...remoteWorkplaces])}
+                field={{ field, reset }}
+                onlyOffice={onlyOffice}
+                labels={FILTRATION_LABELS}
+              />
             </div>
           </div>
           <div className="h-[600px]">

package/src/components/OfficesAtmsMap/renderAtmCard.tsx

@@ -1,12 +1,11 @@
-import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Text } from '../../ui-kit/Text/Text';
+import { capitalize } from '../../utils/capitalize';
 import { Badge } from './Badge';
-import { CardCell } from './CardCell';
+import { CardCell, type CardCellProps } from './CardCell';
 import { CardRow } from './CardRow';
+import { FoldableCardContent } from './FoldableCardContent';
 import { type Atm } from './OfficesAtmsMapProps';
-import { renderFoldButton } from './renderFoldButton';
 
 export const renderAtmCard = (
   {
@@ -21,10 +20,10 @@ export const renderAtmCard = (
   }: Atm,
   i: number,
 ) => {
-  const additionalInfo = [
+  const additionalInfo: CardCellProps[] = [
     {
       label: 'Устройство',
-      value: capitalizedFirstLetter(terminalType),
+      value: capitalize(terminalType),
     },
     { label: 'Модуль приема наличных', value: billAcceptorEnable ? 'Да' : 'Нет' },
     {
@@ -42,7 +41,7 @@ export const renderAtmCard = (
     <div key={String(i)} className="bg-white col-span-12 p-3xl sm:border-green sm:border">
       <div className="sm:flex sm:justify-between">
         <div>
-          <Text size="text-h4">{capitalizedFirstLetter(location)}</Text>
+          <Text size="text-h4">{capitalize(location)}</Text>
           {address ? (
             <div className="flex pb-xl pt-xs gap-2xs">
               <Icon name="GeolocationIcon" width="24" height="24" />
@@ -51,38 +50,24 @@ export const renderAtmCard = (
           ) : null}
         </div>
         <div className="whitespace-nowrap">
-          <Badge color="green">{capitalizedFirstLetter(workTime)}</Badge>
+          <Badge color="green">{capitalize(workTime)}</Badge>
         </div>
       </div>
       <div className="hidden sm:block">
         <CardRow className="flex-wrap">{additionalInfo?.map(renderInfo)}</CardRow>
       </div>
-      <Foldable
-        className="block sm:hidden"
-        renderFoldableSection={({ isUnfolded }) => {
-          return (
-            <FoldableSection isUnfolded={isUnfolded}>
-              <CardRow className="flex-wrap">{additionalInfo?.map(renderInfo)}</CardRow>
-            </FoldableSection>
-          );
-        }}
-        //** TODO: Remove styles with refactoring  DefaultFoldButton*/
-        renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
-      />
+      <FoldableCardContent>
+        <CardRow className="flex-wrap">{additionalInfo?.map(renderInfo)}</CardRow>
+      </FoldableCardContent>
     </div>
   );
 };
 
 export const getAtmPoint = ({ address = '', terminalType, atmCode = '' }: Atm) => {
-  const header = `${capitalizedFirstLetter(terminalType)} №${atmCode}`;
+  const header = `${capitalize(terminalType)} №${atmCode}`;
   const body = address.toUpperCase();
 
   return { header, body };
 };
 
-const renderInfo = (item: Record<string, string>, i: number) => (
-  <CardCell key={String(i)} {...item} />
-);
-
-const capitalizedFirstLetter = (text?: string) =>
-  text ? `${text?.charAt(0)?.toUpperCase()}${text?.slice(1)}` : '';
+const renderInfo = (item: CardCellProps, i: number) => <CardCell key={String(i)} {...item} />;

package/src/components/OfficesAtmsMap/renderFoldButton.tsx

@@ -1,18 +1,12 @@
-import { type IconName } from '../../icons/IconName';
 import { type VNode } from '../../model/VNode';
+import { IconButton } from '../../ui-kit/Button/IconButton';
 import { type FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
-import { Icon } from '../../ui-kit/Icon/Icon';
-
-const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
-const labels = ['Подробнее', 'Скрыть'];
 
 export const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
-  <button
-    className="w-full py-2xl cursor-pointer text-primary-main flex items-center border-b border-solid border-main-divider"
+  <IconButton
+    className="w-full border-b border-solid border-main-divider"
+    name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+    text={isUnfolded ? 'Скрыть' : 'Подробнее'}
     onClick={onToggle}
-    type="button"
-  >
-    <div className="pr-m">{labels[Number(isUnfolded)]}</div>
-    <Icon className="text-primary-text" name={ICONS[Number(isUnfolded)]} width="16" height="16" />
-  </button>
+  />
 );

package/src/components/OfficesAtmsMap/renderOfficeCard.tsx

@@ -1,9 +1,8 @@
-import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Text } from '../../ui-kit/Text/Text';
 import { CardCell } from './CardCell';
 import { CardRow } from './CardRow';
+import { FoldableCardContent } from './FoldableCardContent';
 import { getScheduleDescription } from './getScheduleDescription';
 import { getWorkScheduleWeek } from './getWorkScheduleWeek';
 import { type Branch } from './OfficesAtmsMapProps';
@@ -11,77 +10,31 @@ import { renderAlternativeDay, renderBusinessSchedule } from './renderBusinessSc
 import { renderCurrency } from './renderCurrency';
 import { renderCurrentDaySchedule } from './renderCurrentDaySchedule';
 import { renderDay } from './renderDay';
-import { renderFoldButton } from './renderFoldButton';
 import { renderWorkSchedule } from './renderWorkSchedule';
 
-export const renderOfficeCard = (
-  {
-    name,
-    address,
-    phone,
-    fax,
-    phoneBusiness,
-    phoneNatural,
-    phoneCallCentre,
-    phoneCurrencyControl,
-    workSchedule,
-    exchangeRate,
-  }: Branch,
-  i: number,
-) => {
-  if (!workSchedule) {
+export const renderOfficeCard = (branch: Branch, i: number) => {
+  if (!branch.workSchedule) {
     return null;
   }
 
-  const workScheduleWeek = getWorkScheduleWeek(workSchedule);
+  const workScheduleWeek = getWorkScheduleWeek(branch.workSchedule);
 
   return (
     <div key={String(i)} className="bg-white col-span-12 p-3xl sm:border-green sm:border">
       <div className="sm:flex sm:justify-between">
         <div>
-          <Text size="text-h4">{name}</Text>
-          {address ? (
+          <Text size="text-h4">{branch.name}</Text>
+          {branch.address ? (
             <div className="flex pb-xl pt-xs gap-2xs">
               <Icon name="GeolocationIcon" width="24" height="24" />
-              <Text size="text-l">{address}</Text>
+              <Text size="text-l">{branch.address}</Text>
             </div>
           ) : null}
         </div>
         {renderCurrentDaySchedule(workScheduleWeek)}
       </div>
-      <div className="hidden sm:block">
-        {renderCardContent({
-          phone,
-          fax,
-          phoneBusiness,
-          phoneNatural,
-          phoneCallCentre,
-          phoneCurrencyControl,
-          workSchedule,
-          exchangeRate,
-        })}
-      </div>
-      <Foldable
-        className="block sm:hidden"
-        renderFoldableSection={({ isUnfolded }) => {
-          return (
-            <FoldableSection isUnfolded={isUnfolded}>
-              {renderCardContent({
-                phone,
-                fax,
-                phoneBusiness,
-                phoneNatural,
-                phoneCallCentre,
-                phoneCurrencyControl,
-                workSchedule,
-                exchangeRate,
-              })}
-            </FoldableSection>
-          );
-        }}
-        //** TODO: remove styles with refactoring  DefaultFoldButton*/
-        renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
-      />
+      <div className="hidden sm:block">{renderCardContent(branch)}</div>
+      <FoldableCardContent>{renderCardContent(branch)}</FoldableCardContent>
     </div>
   );
 };

package/src/components/OfficesAtmsMap/renderRemoteWorkplaceCard.tsx

@@ -1,11 +1,9 @@
-import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Text } from '../../ui-kit/Text/Text';
 import { CardCell } from './CardCell';
 import { CardRow } from './CardRow';
+import { FoldableCardContent } from './FoldableCardContent';
 import { type RemoteWorkplace } from './OfficesAtmsMapProps';
-import { renderFoldButton } from './renderFoldButton';
 
 export const renderRemoteWorkplaceCard = (
   { address, workScheduleDescription }: RemoteWorkplace,
@@ -28,28 +26,13 @@ export const renderRemoteWorkplaceCard = (
           ) : null}
         </div>
       </div>
-      <div className="hidden sm:block">
-        {renderCardContent({
-          workScheduleDescription,
-        })}
-      </div>
-      <Foldable
-        className="block sm:hidden"
-        renderFoldableSection={({ isUnfolded }) => (
-          <FoldableSection isUnfolded={isUnfolded}>
-            {renderCardContent({
-              workScheduleDescription,
-            })}
-          </FoldableSection>
-        )}
-        //** TODO: remove styles with refactoring  DefaultFoldButton*/
-        renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
-      />
+      <div className="hidden sm:block">{renderCardContent(workScheduleDescription)}</div>
+      <FoldableCardContent>{renderCardContent(workScheduleDescription)}</FoldableCardContent>
     </div>
   );
 };
 
-const renderCardContent = ({ workScheduleDescription }: RemoteWorkplace) => {
+const renderCardContent = (workScheduleDescription?: string) => {
   return (
     <div>
       <CardRow className="flex">

package/src/components/RollupItem/RollupItem.tsx

@@ -1,3 +1,4 @@
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useMobileMode } from '../../hooks/useMobileMode';
 import { type Picture } from '../../model/Picture';
@@ -37,6 +38,29 @@ export const RollupItem = UniBlock<RollupItemProps>(
   }) => {
     const isMobile = useMobileMode();
 
+    const [isUnfolded, { toggle }] = useBool(isExpanded);
+
+    const foldableSection = (
+      <FoldableSection
+        className={style('gap-lg', getFoldableStyles(isMobile))}
+        isUnfolded={isUnfolded}
+      >
+        {renderChildren({
+          ...rest,
+          extraProps: { className: 'w-full', padding: 'p-0' },
+        })}
+      </FoldableSection>
+    );
+    const foldButton = renderFoldButton({
+      foldButtonVersion,
+      label,
+      labelIcon,
+      labelIconBgVersion,
+      isMobile,
+      isUnfolded,
+      onToggle: toggle,
+    });
+
     return (
       <BlockWrapper
         className={style(
@@ -49,32 +73,10 @@ export const RollupItem = UniBlock<RollupItemProps>(
         role={role}
         {...rest}
       >
-        <Foldable
-          isFoldButtonOnTop={isFoldButtonOnTop}
-          unfoldedByDefault={isExpanded}
-          renderFoldableSection={({ isUnfolded }) => (
-            <FoldableSection
-              className={style('gap-lg', getFoldableStyles(isMobile))}
-              isUnfolded={isUnfolded}
-            >
-              {renderChildren({
-                ...rest,
-                extraProps: { className: 'w-full', padding: 'p-0' },
-              })}
-            </FoldableSection>
-          )}
-          renderFoldButton={({ isUnfolded, onToggle }) =>
-            renderFoldButton({
-              foldButtonVersion,
-              label,
-              labelIcon,
-              labelIconBgVersion,
-              isUnfolded,
-              onToggle,
-              isMobile,
-            })
-          }
-        />
+        <Foldable>
+          {isFoldButtonOnTop ? foldButton : foldableSection}
+          {isFoldButtonOnTop ? foldableSection : foldButton}
+        </Foldable>
       </BlockWrapper>
     );
   },
@@ -98,8 +100,8 @@ const renderFoldButton = ({
   labelIcon,
   labelIconBgVersion,
   isUnfolded,
-  onToggle,
   isMobile = false,
+  onToggle,
 }: FoldButtonProps) => {
   const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
   const icon = getIconName(isUnfolded, isMobile);

package/src/components/TariffsTable/TariffsTable.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
@@ -40,6 +41,8 @@ export const TariffsTable = JSX<TariffsTableProps>(
     const [visibleRows, hiddenRows] =
       hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
 
+    const [isUnfolded, { toggle }] = useBool(false);
+
     return (
       <BlockWrapper
         className={style('relative space-y-6xl @4xl:space-y-xl', className)}
@@ -55,15 +58,13 @@ export const TariffsTable = JSX<TariffsTableProps>(
         />
         <div className="space-y-m overflow-hidden">
           {hiddenRowsNum > 0 ? (
-            <Foldable
-              renderFoldableSection={({ isUnfolded }) => (
-                <TariffsTableWrapper controls={controls}>
-                  {visibleRows}
-                  <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
-                </TariffsTableWrapper>
-              )}
-              renderFoldButton={renderDefaultFoldButton}
-            />
+            <Foldable>
+              <TariffsTableWrapper controls={controls}>
+                {visibleRows}
+                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+              </TariffsTableWrapper>
+              {renderDefaultFoldButton({ isUnfolded, onToggle: toggle })}
+            </Foldable>
           ) : (
             <TariffsTableWrapper controls={controls}>{rows}</TariffsTableWrapper>
           )}