@westpac/ui 1.1.0 → 1.1.2

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/dist/css/westpac-ui.css

@@ -181,6 +181,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }

package/dist/css/westpac-ui.min.css

@@ -181,6 +181,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -254,7 +254,7 @@
     "vite": "^7.1.12",
     "vitest": "^3.2.4",
     "@westpac/eslint-config": "~1.1.0",
-    "@westpac/style-config": "~1.0.0",
+    "@westpac/style-config": "~1.0.1",
     "@westpac/ts-config": "~0.0.0",
     "@westpac/test-config": "~0.0.0"
   },

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}