Merge pull request #1289 from core-ds/feat/bottom-sheet-native-keyboard

feat(bottom-sheet): added virtual keyboard support

.changeset/ten-roses-smell.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-bottom-sheet': minor
+---
+
+Добавлен проп для случаев, когда необходима отзывчивость компонента из-за изменении видимой части браузера при открытии клавиатуры устройства

packages/bottom-sheet/src/component.tsx

@@ -21,6 +21,7 @@ import { Header, HeaderProps } from './components/header/Component';
 import { SwipeableBackdrop } from './components/swipeable-backdrop/Component';
 import { horizontalDirections } from './consts/swipeConsts';
 import { ShouldSkipSwipingParams } from './types/swipeTypes';
+import { useVisibleViewportSize } from './hooks';
 import type { BottomSheetProps } from './types';
 import {
     CLOSE_OFFSET,
@@ -103,10 +104,14 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
             swipeableMarkerClassName,
             backButtonProps,
             iOSLock = false,
+            virtualKeyboard = false,
         },
         ref,
     ) => {
-        const fullHeight = use100vh() || 0;
+        const windowHeight = use100vh() ?? 0;
+        const visibleViewportSize = useVisibleViewportSize(virtualKeyboard);
+        const fullHeight = virtualKeyboard ? visibleViewportSize?.height ?? 0 : windowHeight;
+
         // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
         const isFirstRender = fullHeight === 0;
 
@@ -123,10 +128,10 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
                 ? document?.documentElement?.clientHeight || window?.innerHeight
                 : 0;
 
-            const viewHeight = os.isIOS() ? iOSViewHeight : fullHeight;
+            const viewHeight = os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
 
             return [0, viewHeight - headerOffset];
-        }, [fullHeight, headerOffset, magneticAreasProp]);
+        }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
 
         const lastMagneticArea = magneticAreas[magneticAreas.length - 1];
 
@@ -544,6 +549,10 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
                     ? `${lastMagneticArea}px`
                     : 'unset',
             maxHeight: isFirstRender ? 0 : `${lastMagneticArea}px`,
+            marginBottom:
+                virtualKeyboard && visibleViewportSize && windowHeight > visibleViewportSize.height
+                    ? windowHeight - visibleViewportSize.height - visibleViewportSize.offsetTop
+                    : undefined,
         });
 
         const renderMarker = () => {

packages/bottom-sheet/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useVisibleViewportSize } from './use-visualviewport-size';

packages/bottom-sheet/src/hooks/use-visualviewport-size.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+import { fnUtils, isClient } from '@alfalab/core-components-shared';
+
+type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetTop'>;
+
+const measureVisualViewport = (
+    visualViewport: VisualViewport | null,
+): VisualViewportSize | null => {
+    if (!visualViewport) return null;
+    const { height, offsetTop } = visualViewport;
+
+    return { height, offsetTop };
+};
+
+export function useVisibleViewportSize(enabled = false): VisualViewportSize | null {
+    const [size, setSize] = useState<Pick<VisualViewport, 'height' | 'offsetTop'> | null>(() =>
+        isClient() ? measureVisualViewport(window.visualViewport) : null,
+    );
+
+    useEffect(() => {
+        const { visualViewport } = window;
+
+        if (!isClient() || !enabled || !visualViewport) return fnUtils.noop;
+
+        const listener = (event: Event) =>
+            setSize(measureVisualViewport(event.target as VisualViewport));
+
+        visualViewport.addEventListener('resize', listener);
+        visualViewport.addEventListener('scroll', listener);
+
+        return () => {
+            visualViewport.removeEventListener('resize', listener);
+            visualViewport.removeEventListener('scroll', listener);
+        };
+    }, [enabled]);
+
+    return size;
+}

packages/bottom-sheet/src/types.ts

@@ -347,4 +347,9 @@ export type BottomSheetProps = {
      * Блокирует скролл когда модальное окно открыто. Работает только на iOS
      */
     iOSLock?: boolean;
+
+    /**
+     * Учитывать высоту виртуальной клавиатуры
+     */
+    virtualKeyboard?: boolean;
 };