@westpac/ui 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @westpac/ui
 
+## 0.19.0
+
+### Minor Changes
+
+- b9ec8e3: bottom sheet fix
+
 ## 0.18.0
 
 ### Minor Changes

package/dist/components/autocomplete/components/autocomplete-popover/autocomplete-popover.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -13,20 +14,24 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import { clsx } from 'clsx';
-import * as React from 'react';
+import React, { useMemo, useRef } from 'react';
 import { DismissButton, Overlay, usePopover } from 'react-aria';
 export function AutocompletePopover(props) {
     var _props_triggerRef_current;
-    const ref = React.useRef(null);
+    const ref = useRef(null);
     const { popoverRef =ref , state , children , className , isNonModal , portalContainer  } = props;
     const { popoverProps , underlayProps  } = usePopover({
         ...props,
         popoverRef
     }, state);
-    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 = props.triggerRef.current) === null || _props_triggerRef_current === void 0 ? void 0 : _props_triggerRef_current.getBoundingClientRect().width;
     return React.createElement(Overlay, {
-        portalContainer: portalContainer || brandContainer || document.body
+        portalContainer: portalContainer || brandContainer
     }, !isNonModal && React.createElement("div", _extends({}, underlayProps, {
         className: "fixed inset-0"
     })), React.createElement("div", _extends({}, popoverProps, {

package/dist/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.js

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import { 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';
 import { styles as bottomSheetModalStyles } from './bottom-sheet-modal.styles.js';
@@ -32,7 +32,11 @@ export function BottomSheetModal({ state , height , width , children , portalCon
     const { modalProps , underlayProps  } = useModalOverlay(props, state, ref);
     const controls = useAnimation();
     const [isMobile, setIsMobile] = useState(checkIfItIsMobile(MEDIUM_BREAKPOINT_AS_NUMBER));
-    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() {
             setIsMobile(checkIfItIsMobile(MEDIUM_BREAKPOINT_AS_NUMBER));
@@ -65,7 +69,7 @@ export function BottomSheetModal({ state , height , width , children , portalCon
         return null;
     }
     return React.createElement(Overlay, {
-        portalContainer: portalContainer || brandContainer || document.body
+        portalContainer: portalContainer || brandContainer
     }, React.createElement("div", _extends({
         className: styles.underlay()
     }, underlayProps), React.createElement(motion.div, {

package/dist/components/modal/components/modal-backdrop/modal-backdrop.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -12,7 +13,7 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { Overlay, useModalOverlay } from 'react-aria';
 import { styles as backdropStyles } from './modal-backdrop.styles.js';
 export function ModalBackdrop({ zIndex =100 , portalContainer , size , ...props }) {
@@ -24,12 +25,16 @@ export function ModalBackdrop({ zIndex =100 , portalContainer , size , ...props
         fluid: size === 'fluid'
     });
     const { modalProps , underlayProps  } = useModalOverlay(props, state, ref);
+    const brandContainer = useMemo(()=>{
+        if (typeof window !== 'undefined') {
+            return document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]') || document.body;
+        }
+    }, []);
     if (!state.isOpen) {
         return null;
     }
-    const brandContainer = document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]');
     return React.createElement(Overlay, {
-        portalContainer: portalContainer || brandContainer || document.body
+        portalContainer: portalContainer || brandContainer
     }, React.createElement("div", _extends({
         style: {
             zIndex

package/dist/components/popover/components/panel/panel.component.js

@@ -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';
 import { CloseIcon } from '../../../icon/index.js';
@@ -7,7 +7,12 @@ import { styles as panelStyles } from './panel.styles.js';
 export function Panel({ state , heading , headingTag: Tag = 'h1' , content , placement , id , triggerRef  }) {
     const popoverRef = useRef(null);
     const arrowRef = useRef(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({
         placement: 'top',
         offset: 'left',

package/dist/components/popover/popover.hooks.js

@@ -5,7 +5,7 @@ export const usePopoverPosition = (triggerRef, popoverRef, arrowRef, placement)=
     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 = {
         placement: placement ? placement : 'top',
         offset: popover.right >= window.innerWidth ? 'right' : 'left',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -255,9 +255,9 @@
     "typescript": "^5.1.6",
     "vite": "^4.3.9",
     "vitest": "^0.30.1",
-    "@westpac/ts-config": "~0.0.0",
-    "@westpac/eslint-config": "~0.2.0",
-    "@westpac/test-config": "~0.0.0"
+    "@westpac/eslint-config": "~0.2.1",
+    "@westpac/test-config": "~0.0.0",
+    "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",

package/src/components/autocomplete/components/autocomplete-popover/autocomplete-popover.component.tsx

@@ -1,5 +1,7 @@
+'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';
@@ -7,7 +9,7 @@ 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

package/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}

package/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}

package/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',

package/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',