@westpac/ui 0.31.0 → 0.32.0

package/src/components/pictogram/components/informative/graph-decreasing-pictogram.tsx

@@ -18,7 +18,7 @@ export function GraphDecreasingPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/graph-increasing-pictogram.tsx

@@ -18,7 +18,7 @@ export function GraphIncreasingPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/gym-pictogram.tsx

@@ -18,7 +18,7 @@ export function GymPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/headset-pictogram.tsx

@@ -18,7 +18,7 @@ export function HeadsetPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/heart-pictogram.tsx

@@ -18,7 +18,7 @@ export function HeartPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/house-pictogram.tsx

@@ -18,7 +18,7 @@ export function HousePictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/light-bulb-pictogram.tsx

@@ -18,7 +18,7 @@ export function LightBulbPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/loop-pictogram.tsx

@@ -18,7 +18,7 @@ export function LoopPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/medicare-card-pictogram.tsx

@@ -18,7 +18,7 @@ export function MedicareCardPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/mobile-device-pictogram.tsx

@@ -18,7 +18,7 @@ export function MobileDevicePictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/money-in-pictogram.tsx

@@ -18,7 +18,7 @@ export function MoneyInPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/money-out-pictogram.tsx

@@ -18,7 +18,7 @@ export function MoneyOutPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/movie-tickets-pictogram.tsx

@@ -18,7 +18,7 @@ export function MovieTicketsPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/nest-egg-pictogram.tsx

@@ -18,7 +18,7 @@ export function NestEggPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/noodles-pictogram.tsx

@@ -18,7 +18,7 @@ export function NoodlesPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/number-1-pictogram.tsx

@@ -18,7 +18,7 @@ export function Number1Pictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/number-2-pictogram.tsx

@@ -18,7 +18,7 @@ export function Number2Pictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/number-3-pictogram.tsx

@@ -18,7 +18,7 @@ export function Number3Pictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/number-4-pictogram.tsx

@@ -18,7 +18,7 @@ export function Number4Pictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/number-5-pictogram.tsx

@@ -18,7 +18,7 @@ export function Number5Pictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/padlock-locked-pictogram.tsx

@@ -18,7 +18,7 @@ export function PadlockLockedPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/padlock-unlocked-pictogram.tsx

@@ -18,7 +18,7 @@ export function PadlockUnlockedPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/passport-pictogram.tsx

@@ -18,7 +18,7 @@ export function PassportPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/percent-sign-pictogram.tsx

@@ -18,7 +18,7 @@ export function PercentSignPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/person-pictogram.tsx

@@ -18,7 +18,7 @@ export function PersonPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/piggy-bank-pictogram.tsx

@@ -18,7 +18,7 @@ export function PiggyBankPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/pizza-pictogram.tsx

@@ -18,7 +18,7 @@ export function PizzaPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/plant-pictogram.tsx

@@ -18,7 +18,7 @@ export function PlantPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/search-pictogram.tsx

@@ -18,7 +18,7 @@ export function SearchPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/secure-pictogram.tsx

@@ -18,7 +18,7 @@ export function SecurePictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/shop-pictogram.tsx

@@ -18,7 +18,7 @@ export function ShopPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/shopping-pictogram.tsx

@@ -18,7 +18,7 @@ export function ShoppingPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/sparkle-pictogram.tsx

@@ -18,7 +18,7 @@ export function SparklePictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/star-pictogram.tsx

@@ -18,7 +18,7 @@ export function StarPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/stopwatch-pictogram.tsx

@@ -18,7 +18,7 @@ export function StopwatchPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/target-pictogram.tsx

@@ -18,7 +18,7 @@ export function TargetPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/tax-document-pictogram.tsx

@@ -18,7 +18,7 @@ export function TaxDocumentPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/telephone-call-pictogram.tsx

@@ -18,7 +18,7 @@ export function TelephoneCallPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/thumbs-up-pictogram.tsx

@@ -18,7 +18,7 @@ export function ThumbsUpPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/tick-pictogram.tsx

@@ -18,7 +18,7 @@ export function TickPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/tools-pictogram.tsx

@@ -18,7 +18,7 @@ export function ToolsPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/tractor-pictogram.tsx

@@ -18,7 +18,7 @@ export function TractorPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/truck-pictogram.tsx

@@ -18,7 +18,7 @@ export function TruckPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/umbrella-pictogram.tsx

@@ -18,7 +18,7 @@ export function UmbrellaPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/unsecure-pictogram.tsx

@@ -18,7 +18,7 @@ export function UnsecurePictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/wallet-pictogram.tsx

@@ -18,7 +18,7 @@ export function WalletPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/wearables-pictogram.tsx

@@ -18,7 +18,7 @@ export function WearablesPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/popover/components/panel/panel.component.tsx

@@ -1,58 +1,36 @@
-import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useRef } from 'react';
 import { FocusScope } from 'react-aria';
+import { createPortal } from 'react-dom';
 
 import { Button } from '../../../button/index.js';
 import { CloseIcon } from '../../../icon/index.js';
-import { getPopoverPosition } from '../../popover.utils.js';
 
+import { usePanel } from './panel.hook.js';
 import { styles as panelStyles } from './panel.styles.js';
-import { type PanelProps, Position } from './panel.types.js';
-
-/**
- * @private
- */
-export function Panel({ state, heading, headingTag: Tag = 'h1', content, placement, id, triggerRef }: PanelProps) {
+import { type PanelProps } from './panel.types.js';
+
+export function BasePanel({
+  state,
+  heading,
+  headingTag: Tag = 'h1',
+  content,
+  placement = 'bottom',
+  id,
+  triggerRef,
+  portal,
+}: PanelProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const arrowRef = useRef<HTMLDivElement>(null);
-  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',
-    offset: 'left',
-    panelPosition: triggerRef.current ? triggerRef.current.offsetWidth / 2 / remSize : 0,
-    arrowPosition: popoverRef.current ? popoverRef.current.getBoundingClientRect().width / 2 / remSize : 0,
-  });
-
-  useLayoutEffect(() => {
-    setPosition(getPopoverPosition(triggerRef, popoverRef, arrowRef, placement));
-  }, [placement, remSize, state.isOpen, triggerRef]);
-
-  const getPopoverClass = useCallback(() => {
-    return {
-      [position.offset as string]:
-        position.offset === 'left' ? `${position.panelPosition}rem` : `-${position.panelPosition}rem`,
-      transform: position.offset === 'left' ? 'translateX(-50%)' : 'none',
-    };
-  }, [position]);
-
-  const getArrowClass = useCallback(() => {
-    return {
-      [!position.offset || position.offset === 'left' ? 'left' : 'right']: `${position.arrowPosition}rem`,
-    };
-  }, [position]);
-
-  const styles = panelStyles({ placement: position.placement });
+  const { popoverPosition, arrowPosition } = usePanel({ state, placement, triggerRef, portal });
 
+  const styles = panelStyles({ placement });
   return (
-    <FocusScope restoreFocus>
-      <div className={styles.popover()} style={getPopoverClass()} id={id} ref={popoverRef}>
+    <FocusScope contain autoFocus restoreFocus>
+      <div style={popoverPosition} className={styles.popover()} test-id="popover" id={id} ref={popoverRef}>
         <div className={styles.content()}>
-          <Tag className={styles.heading()}>{heading}</Tag>
+          <Tag tabIndex={0} className={styles.heading()}>
+            {heading}
+          </Tag>
           <div className={styles.body()}>{content}</div>
           <Button
             look="link"
@@ -62,9 +40,20 @@ export function Panel({ state, heading, headingTag: Tag = 'h1', content, placeme
             aria-label="Close popover"
           />
         </div>
-        <div aria-hidden className={styles.arrow()} style={getArrowClass()} ref={arrowRef} />
+        <div aria-hidden className={styles.arrow()} style={arrowPosition} test-id="arrow" ref={arrowRef} />
       </div>
     </FocusScope>
   );
 }
+
+/**
+ * @private
+ */
+export function Panel({ portal = false, ...props }: PanelProps) {
+  if (portal) {
+    const portalValue = typeof portal === 'boolean' ? document.body : portal;
+    return createPortal(<BasePanel {...props} portal={portalValue} />, portalValue);
+  }
+  return <BasePanel portal={portal} {...props} />;
+}
 Panel.displayName = 'Popover.Panel';