Refactor device height handling with new useDeviceHeight hook

This commit introduces a significant refactoring of the application's handling of device height. A new hook, useDeviceHeight, has been introduced and is now used across multiple components to set the height. The previous viewportHeight mixin has been removed and replaced with a CSS variable --100svh that is set by the new hook. This refactoring aims to enhance the application's responsiveness to changes in device height. Components such as ActionBottomSheet and Drawer have been updated to use the new hook and CSS variable. Tests for the new useDeviceHeight hook have also been added.

Author: Hector Arce De Las Heras

src/components/actionBottomSheet/actionBottomSheet.styled.ts

@@ -13,8 +13,10 @@ type IActionBottomSheetStyles = {
   styles?: CommonStyleType;
 };
 
-export const ActionBottomSheetSyled = styled.div<IActionBottomSheetStyles & { $height?: string }>`
+export const ActionBottomSheetStyled = styled.div<IActionBottomSheetStyles & { $height?: string }>`
   max-height: 100vh;
+  max-height: var(--100svh, 100vh);
+  max-height: 100svh;
   ${props => getStyles(props.styles)}
   height: ${({ $height }) => $height};
 `;
@@ -49,6 +51,8 @@ export const ActionBottomSheetContentStyled = styled.div<IActionBottomSheetStyle
   ${({ theme: { MEDIA_QUERIES } }) => css`
     ${MEDIA_QUERIES?.mobileAndTablet} {
       max-height: 100vh;
+      max-height: var(--100svh, 100vh);
+      max-height: 100svh;
     }
   `}
 `;

src/components/actionBottomSheet/actionBottomSheetControlled.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { PopoverControlled as Popover } from '@/components/popover';
 import { STYLES_NAME } from '@/constants';
-import { useId, useMediaDevice, useScrollEffect } from '@/hooks';
+import { useDeviceHeight, useId, useMediaDevice, useScrollEffect } from '@/hooks';
 import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 import { DeviceBreakpointsType } from '@/types';
@@ -22,6 +22,7 @@ const ActionBottomSheetControlledStructureComponent = React.forwardRef(
     { variant, ctv, ...props }: IActionBottomSheetControlledStructure<V>,
     ref: React.ForwardedRef<HTMLDivElement> | undefined | null
   ): JSX.Element => {
+    useDeviceHeight();
     const styles = useStyles<ActionBottomSheetVariantStylesType, V>(
       STYLES_NAME.ACTION_BOTTOM_SHEET,
       variant,

src/components/actionBottomSheet/actionBottomSheetStandAlone.tsx

@@ -8,7 +8,7 @@ import {
   ActionBottomSheetHeaderContentStyled,
   ActionBottomSheetHeaderStyled,
   ActionBottomSheetIconSyled,
-  ActionBottomSheetSyled,
+  ActionBottomSheetStyled,
   ActionBottomSheetTitleSyled,
 } from './actionBottomSheet.styled';
 import { IActionBottomSheetStandAlone } from './types';
@@ -18,7 +18,7 @@ const ActionBottomSheetStandAloneComponent = (
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): JSX.Element => {
   return (
-    <ActionBottomSheetSyled
+    <ActionBottomSheetStyled
       ref={ref}
       $height={props.height}
       data-testid={`${props.dataTestId}Container`}
@@ -53,7 +53,7 @@ const ActionBottomSheetStandAloneComponent = (
       <ActionBottomSheetContentStyled ref={scrollableRef} styles={props.styles.content}>
         {props.children}
       </ActionBottomSheetContentStyled>
-    </ActionBottomSheetSyled>
+    </ActionBottomSheetStyled>
   );
 };
 

src/components/drawer/drawer.styled.ts

@@ -23,8 +23,8 @@ export const DrawerTitleContentFooterContainerStyled = styled.div<DrawerStylesTy
   //Height is 100svh minus DrawerNavigationStyled total height
   height: ${props =>
     !props.blocked
-      ? `calc(100svh - (${props.styles.iconContainer?.padding_top} + ${props.styles.iconContainer?.padding_right} + ${props.styles.icon?.width}))`
-      : '100svh'};
+      ? `calc(var(--100svh, 100vh) - (${props.styles.iconContainer?.padding_top} + ${props.styles.iconContainer?.padding_right} + ${props.styles.icon?.width}))`
+      : 'var(--100svh, 100vh)'};
   ${props => getStyles(props.styles.titleContentFooterContainer)}
 `;
 
@@ -34,7 +34,9 @@ export const DrawerTitleStyled = styled.div.withConfig({
 
 export const DrawerStyled = styled.div<DrawerStylesType>`
   background-color: #fff;
-  height: 100svh;
+  max-height: 100vh;
+  max-height: var(--100svh, 100vh);
+  max-height: 100svh;
   min-width: 50vw;
   max-width: 50vw;
   overflow-y: auto;
@@ -45,9 +47,13 @@ export const DrawerStyled = styled.div<DrawerStylesType>`
       },
     }) => css`
       ${onlyDesktop} {
+        min-height: 100vh;
+        min-height: var(--100svh, 100vh);
         min-height: 100svh;
       }
       ${onlyTablet} {
+        min-height: 100vh;
+        min-height: var(--100svh, 100vh);
         min-height: 100svh;
       }
     `};

src/components/drawer/drawerControlled.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { STYLES_NAME } from '@/constants';
-import { useMediaDevice, useScrollEffect, useZoomEffect } from '@/hooks';
+import { useDeviceHeight, useMediaDevice, useScrollEffect, useZoomEffect } from '@/hooks';
 import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 import { CssProperty } from '@/utils';
@@ -28,6 +28,7 @@ const DrawerControlledComponent = React.forwardRef(
     { portalId, ...props }: IDrawerControlled<V>,
     ref: React.ForwardedRef<HTMLDivElement> | undefined | null
   ): JSX.Element => {
+    useDeviceHeight();
     const styles = useStyles<DrawerVariantStylesType, V>(
       STYLES_NAME.DRAWER,
       props.variant,

src/hooks/index.ts

@@ -16,3 +16,4 @@ export * from './useManageState/useManageState';
 export { useScrollEffect } from './useScrollEffect/useScrollEffect';
 export * from './useScrollPosition/useScrollPosition';
 export { useZoomEffect } from './useZoomEffect/useZoomEffect';
+export { useDeviceHeight } from './useDeviceHeight/useDeviceHeight';

src/hooks/useDeviceHeight/__tests__/useDeviceHeight.test.ts

@@ -0,0 +1,36 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useDeviceHeight } from '../useDeviceHeight';
+
+jest.useFakeTimers();
+
+describe('useDeviceHeight', () => {
+  beforeAll(() => {
+    window.CSS = {
+      supports: () => true,
+    } as unknown as typeof CSS;
+  });
+
+  it('should set --100svh property on resize', () => {
+    const supportsSpy = jest.spyOn(window.CSS, 'supports');
+    const setPropertySpy = jest.spyOn(document.documentElement.style, 'setProperty');
+    const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+
+    renderHook(() => useDeviceHeight());
+
+    const resizeEvent = new Event('resize');
+    window.dispatchEvent(resizeEvent);
+
+    expect(addEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function));
+    jest.runAllTimers();
+    expect(setPropertySpy).toHaveBeenCalledWith('--100svh', '100svh');
+
+    supportsSpy.mockRestore();
+    setPropertySpy.mockRestore();
+    addEventListenerSpy.mockRestore();
+  });
+
+  afterAll(() => {
+    (window as Window & { CSS: unknown }).CSS = undefined;
+  });
+});

src/hooks/useDeviceHeight/useDeviceHeight.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+
+export const useDeviceHeight = (): void => {
+  const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const setVh = () => {
+    let vh;
+    if (!window.CSS.supports) {
+      vh = `${window.innerHeight}px`;
+    } else {
+      const supportSvh =
+        window.CSS.supports('height: 100svh') || window.CSS.supports('max-height: 100svh');
+      vh = supportSvh ? '100svh' : `${window.innerHeight}px`;
+    }
+    document.documentElement.style.setProperty('--100svh', vh);
+  };
+
+  const debounceHeight = () => {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+    timeout.current = setTimeout(() => {
+      setVh();
+    }, 250);
+  };
+
+  useEffect(() => {
+    setVh();
+    window.addEventListener('resize', debounceHeight);
+    return () => {
+      window.removeEventListener('resize', debounceHeight);
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+    };
+  }, []);
+};

src/styles/mixins/index.ts

@@ -2,3 +2,4 @@ export * from './overflow.mixin';
 export * from './srOnly.mixin';
 export { focusVisibleAlt } from './focusAlt.mixin';
 export * from './input.mixin';
+export { viewportHeight } from './viewportHeight.mixin';

src/styles/mixins/viewportHeight.mixin.ts

@@ -0,0 +1,12 @@
+export const viewportHeight = (): string => {
+  if (!window.CSS.supports) {
+    return '100vh';
+  }
+
+  if (!window.CSS.supports('height: 100dvh') || !window.CSS.supports('max-height: 100dvh')) {
+    const { innerHeight } = window;
+    return `${innerHeight}px`;
+  }
+
+  return '100dvh';
+};