@westpac/ui 1.1.1 → 1.1.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @westpac/ui
 
+## 1.1.2
+
+### Patch Changes
+
+- a55faea: set a default portalContainer for MultiSelect so styles render correctly in more situations without providing portalContainer
+
 ## 1.1.1
 
 ### Patch Changes

package/dist/components/multi-select/components/multi-select-popover/multi-select-popover.component.js

@@ -1,5 +1,5 @@
 'use client';
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { DismissButton, mergeProps, Overlay, usePopover } from 'react-aria';
 import { MultiSelectContext } from '../../multi-select.component.js';
 import { styles as popoverStyles } from './multi-select-popover.styles.js';
@@ -16,11 +16,16 @@ export function MultiSelectPopover({ children, className, ...props }) {
         shouldCloseOnInteractOutside: ()=>false,
         offset: 6
     }, overlayState);
+    const brandContainer = useMemo(()=>{
+        if (typeof window !== 'undefined') {
+            return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
+        }
+    }, []);
     const width = (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.getBoundingClientRect().width;
     const styles = popoverStyles();
     return React.createElement(Overlay, {
         disableFocusManagement: true,
-        portalContainer: portalContainer
+        portalContainer: portalContainer || brandContainer
     }, React.createElement("div", {
         ...mergeProps(popoverProps, overlayProps),
         ref: popoverRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",

package/src/components/multi-select/components/multi-select-popover/multi-select-popover.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { DismissButton, mergeProps, Overlay, usePopover } from 'react-aria';
 
 import { MultiSelectContext } from '../../multi-select.component.js';
@@ -27,11 +27,22 @@ export function MultiSelectPopover({ children, className, ...props }: MultiSelec
     overlayState,
   );
 
+  // 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('[class^="theme-"], [class*=" theme-"]') ||
+        document.body
+      );
+    }
+  }, []);
+
   const width = buttonRef.current?.getBoundingClientRect().width;
   const styles = popoverStyles();
 
   return (
-    <Overlay disableFocusManagement portalContainer={portalContainer}>
+    <Overlay disableFocusManagement portalContainer={portalContainer || brandContainer}>
       <div
         {...mergeProps(popoverProps, overlayProps)}
         ref={popoverRef}