From 7909633202bd6b5ccdc6531baf6eadf0b72c41a1 Mon Sep 17 00:00:00 2001
From: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
Date: Wed, 29 Jan 2025 11:27:57 +0300
Subject: [PATCH] fix(ModalPage): expect number for height (#8209)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

h2. Описание

Раньше `height` вставлялся в `style`, что позволяло передать без `px`.  С переходом на CSS переменную эта возможность пропала, поэтому проверяем, что `height` это число и добавляем `px`.

- related to #6759

h2. Изменения

Применил `megeStyle` в `style`, чтобы не применять object-spread когда не надо.

h2. Release notes
h2. Исправления
- ModalPage: числовые значения в `height` не приводились к `${height}px`
---
 .../src/components/ModalPage/ModalPageInternal.tsx   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx b/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx
index bc46eb3660..3fc89f3268 100644
--- a/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx
+++ b/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx
@@ -2,6 +2,7 @@
 
 import { type ComponentType, type KeyboardEvent, useCallback } from 'react';
 import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { mergeStyle } from '../../helpers/mergeStyle';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';
@@ -184,11 +185,7 @@ export const ModalPageInternal = ({
           desktopMaxWidthClassName,
           sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',
         )}
-        style={{
-          ...style,
-          ...desktopMaxWidthStyle,
-          ...getHeightCSSVariable(height),
-        }}
+        style={mergeStyle(mergeStyle(desktopMaxWidthStyle, getHeightCSSVariable(height)), style)}
       >
         <div
           {...bottomSheetEventHandlers}
@@ -243,6 +240,9 @@ function resolveDesktopMaxWidth(
 
 function getHeightCSSVariable(height?: number | string): CSSCustomProperties | undefined {
   return height !== undefined
-    ? { '--vkui_internal_ModalPage--userHeight': `${height}` }
+    ? {
+        '--vkui_internal_ModalPage--userHeight':
+          typeof height === 'number' ? `${height}px` : height,
+      }
     : undefined;
 }