Merge pull request #746 from WestpacGEL/feature/bottom-sheet-update

Feature/bottom sheet update

.changeset/gentle-grapes-remain.md

@@ -0,0 +1,8 @@
+---
+'@westpac/ui': minor
+'protoform': patch
+'site': patch
+'@westpac/eslint-config': patch
+---
+
+bottom sheet fix

packages/ui/.storybook/preview.tsx

@@ -2,12 +2,19 @@ import type { Preview } from '@storybook/react';
 import './global.css';
 import * as React from 'react';
 import { clsx } from 'clsx';
+import { useEffect } from 'react';
 
 const withThemeProvider = (Story, context) => {
   const theme = context.globals?.theme || 'WBC';
+  // workaround for modal
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      document.querySelector('html')?.setAttribute('data-theme', theme.toLowerCase());
+    }
+  }, [theme]);
   // Note: Not using padding for grid demos as it affects the proper grid visuals i.e. breakpoints, paddings, margins etc.
   return (
-    <div data-theme={theme.toLowerCase()} className={clsx(!(context.componentId === 'foundation-grid') && 'p-4')}>
+    <div className={clsx(!(context.componentId === 'foundation-grid') && 'p-4')}>
       <Story />
     </div>
   );

packages/ui/src/components/autocomplete/components/autocomplete-popover/autocomplete-popover.component.tsx

@@ -1,13 +1,15 @@
+'use client';
+
 import { clsx } from 'clsx';
-import * as React from 'react';
+import React, { useMemo, useRef } from 'react';
 import { DismissButton, Overlay, usePopover } from 'react-aria';
 
 import { AutocompletePopoverProps } from './autocomplete-popover.types.js';
 /**
  * @private
  */
 export function AutocompletePopover(props: AutocompletePopoverProps) {
-  const ref = React.useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLDivElement>(null);
   const { popoverRef = ref, state, children, className, isNonModal, portalContainer } = props;
   const { popoverProps, underlayProps } = usePopover(
     {
@@ -18,11 +20,17 @@ export function AutocompletePopover(props: AutocompletePopoverProps) {
   );
 
   // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
-  const brandContainer = document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]');
+  const brandContainer = useMemo(() => {
+    if (typeof window !== 'undefined') {
+      return (
+        document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]') || document.body
+      );
+    }
+  }, []);
 
   const width = props.triggerRef.current?.getBoundingClientRect().width;
   return (
-    <Overlay portalContainer={portalContainer || brandContainer || document.body}>
+    <Overlay portalContainer={portalContainer || brandContainer}>
       {!isNonModal && <div {...underlayProps} className="fixed inset-0" />}
 
       <div

packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import { PanInfo, motion, useAnimation } from 'framer-motion';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Overlay, useModalOverlay } from 'react-aria';
 
 import { BREAKPOINTS } from '../../../../tailwind/constants/index.js';
@@ -30,7 +30,13 @@ export function BottomSheetModal({ state, height, width, children, portalContain
   const [isMobile, setIsMobile] = useState(checkIfItIsMobile(MEDIUM_BREAKPOINT_AS_NUMBER));
 
   // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
-  const brandContainer = document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]');
+  const brandContainer = useMemo(() => {
+    if (isBrowser) {
+      return (
+        document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]') || document.body
+      );
+    }
+  }, []);
 
   useEffect(() => {
     function handleResize() {
@@ -68,7 +74,7 @@ export function BottomSheetModal({ state, height, width, children, portalContain
   }
 
   return (
-    <Overlay portalContainer={portalContainer || brandContainer || document.body}>
+    <Overlay portalContainer={portalContainer || brandContainer}>
       <div className={styles.underlay()} {...underlayProps}>
         <motion.div
           animate={controls}

packages/ui/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx

@@ -1,4 +1,6 @@
-import React, { useRef } from 'react';
+'use client';
+
+import React, { useMemo, useRef } from 'react';
 import { Overlay, useModalOverlay } from 'react-aria';
 
 import { styles as backdropStyles } from './modal-backdrop.styles.js';
@@ -15,16 +17,22 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props }:
 
   const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
 
+  // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
+  const brandContainer = useMemo(() => {
+    if (typeof window !== 'undefined') {
+      return (
+        document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]') || document.body
+      );
+    }
+  }, []);
+
   // Don't render anything if the modal is not open and we're not animating out.
   if (!state.isOpen) {
     return null;
   }
 
-  // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
-  const brandContainer = document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]');
-
   return (
-    <Overlay portalContainer={portalContainer || brandContainer || document.body}>
+    <Overlay portalContainer={portalContainer || brandContainer}>
       <div style={{ zIndex }} className={styles.base()} {...underlayProps}>
         <div {...modalProps} ref={ref} className={styles.modal()}>
           {children}

packages/ui/src/components/popover/components/panel/panel.component.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { FocusScope } from 'react-aria';
 
 import { Button } from '../../../button/index.js';
@@ -14,7 +14,12 @@ import { type PanelProps, Position } from './panel.types.js';
 export function Panel({ state, heading, headingTag: Tag = 'h1', content, placement, id, triggerRef }: PanelProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const arrowRef = useRef<HTMLDivElement>(null);
-  const remSize = parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize);
+  const remSize = useMemo(() => {
+    if (typeof window !== 'undefined') {
+      return parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize);
+    }
+    return 1;
+  }, []);
 
   const [position, setPosition] = useState<Position>({
     placement: 'top',

packages/ui/src/components/popover/popover.hooks.tsx

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { RefObject, useMemo } from 'react';
 
 import { Position } from './components/panel/panel.types.js';
 
@@ -16,7 +16,10 @@ export const usePopoverPosition = (
   const trigger = triggerRef.current.getBoundingClientRect();
   const popover = popoverRef.current.getBoundingClientRect();
   const arrow = arrowRef.current.getBoundingClientRect();
-  const remSize = parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize);
+  const remSize =
+    typeof window !== 'undefined'
+      ? parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize)
+      : 1;
 
   const position: Position = {
     placement: placement ? placement : 'top',