@westpac/ui 0.59.2 → 0.59.4

package/src/components/icon/icon.styles.ts

@@ -5,11 +5,11 @@ export const styles = tv(
     base: 'inline-block transition-colors disabled:pointer-events-none disabled:opacity-50',
     variants: {
       size: {
-        xsmall: 'size-2',
-        small: 'size-3',
-        medium: 'size-4',
-        large: 'size-6',
-        xlarge: 'size-8',
+        xsmall: 'size-2 min-h-2 min-w-2',
+        small: 'size-3 min-h-3 min-w-3',
+        medium: 'size-4 min-h-4 min-w-4',
+        large: 'size-6 min-h-6 min-w-6',
+        xlarge: 'size-8 min-h-8 min-w-8',
       },
       color: {
         success: 'text-success',

package/src/components/icon/index.ts

@@ -6,14 +6,18 @@ export { AlertIcon } from './components/alert-icon.js';
 export { AndroidIcon } from './components/android-icon.js';
 export { AppleIcon } from './components/apple-icon.js';
 export { ArchiveBoxIcon } from './components/archive-box-icon.js';
+export { ArrowBackIcon } from './components/arrow-back-icon.js';
 export { ArrowBackCircleIcon } from './components/arrow-back-circle-icon.js';
+export { ArrowDownIcon } from './components/arrow-down-icon.js';
 export { ArrowDownCircleIcon } from './components/arrow-down-circle-icon.js';
 export { ArrowForkIcon } from './components/arrow-fork-icon.js';
+export { ArrowForwardIcon } from './components/arrow-forward-icon.js';
 export { ArrowForwardCircleIcon } from './components/arrow-forward-circle-icon.js';
 export { ArrowLeftIcon } from './components/arrow-left-icon.js';
 export { ArrowRightIcon } from './components/arrow-right-icon.js';
 export { ArrowSplitIcon } from './components/arrow-split-icon.js';
 export { ArrowThreadReplyIcon } from './components/arrow-thread-reply-icon.js';
+export { ArrowUpIcon } from './components/arrow-up-icon.js';
 export { ArrowUpCircleIcon } from './components/arrow-up-circle-icon.js';
 export { AtmIcon } from './components/atm-icon.js';
 export { AttacheCaseIcon } from './components/attache-case-icon.js';

package/src/components/input-group/components/input-group-supporting-text/input-group-supporting-text.styles.ts

@@ -1,5 +1,5 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'mt-1 text-xs text-muted',
+  base: 'mt-1 text-muted',
 });

package/src/components/link/link.component.tsx

@@ -1,3 +1,4 @@
+// TODO: This component will not work with the Next Link component in Next.js 16+ as legacyBehavior as has been deprecated in 15. Need to find a solution.
 'use client';
 
 import React, { ForwardedRef, RefObject, forwardRef } from 'react';

package/src/components/link/link.styles.ts

@@ -3,19 +3,17 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'inline-flex bg-[transparent] hover:underline',
-      iconBefore: 'mr-1',
-      iconAfter: 'ml-1',
+      base: 'bg-[transparent] hover:underline',
+      iconBefore: 'relative bottom-[0.1em] mr-1',
+      iconAfter: 'relative bottom-[0.1em] ml-1',
     },
     variants: {
       type: {
         inline: {
-          base: 'items-baseline text-link',
-          iconBefore: 'self-center',
-          iconAfter: 'self-center',
+          base: 'inline text-link',
         },
         standalone: {
-          base: 'items-center text-text',
+          base: 'text-text',
         },
       },
       underline: {

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

@@ -1,7 +1,7 @@
-import React, { useRef } from 'react';
-import { FocusScope } from 'react-aria';
+import React, { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
+import { ButtonRef } from '../../../button/button.types.js';
 import { Button } from '../../../button/index.js';
 import { CloseIcon } from '../../../icon/index.js';
 
@@ -17,10 +17,14 @@ export function BasePanel({
   placement = 'top',
   id,
   triggerRef,
+  onClose,
+  open,
   portal,
 }: PanelProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const arrowRef = useRef<HTMLDivElement>(null);
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const buttonRef = useRef<ButtonRef>(null);
   const { popoverPosition, arrowPosition, localPlacement } = usePanel({
     state,
     placement,
@@ -29,30 +33,44 @@ export function BasePanel({
     popoverRef,
   });
   const styles = panelStyles({ placement: localPlacement });
+  useEffect(() => {
+    if (state.isOpen && !open) {
+      if (headingRef.current) {
+        headingRef.current.focus();
+      } else {
+        buttonRef.current?.focus();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.isOpen]);
+
   return (
-    <FocusScope autoFocus restoreFocus>
-      <div style={popoverPosition} className={styles.popover()} test-id="popover" id={id} ref={popoverRef}>
-        <div className={styles.content()}>
-          {heading && (
-            <Tag className={styles.heading()} tabIndex={0}>
-              {heading}
-            </Tag>
-          )}
-          <div className={styles.body()} tabIndex={0}>
-            {content}
-          </div>
-          <Button
-            look="link"
-            size="small"
-            onClick={() => state.close()}
-            className={styles.closeBtn()}
-            iconAfter={() => <CloseIcon color="muted" size="small" aria-hidden />}
-            aria-label="Close popover"
-          />
+    <div style={popoverPosition} className={styles.popover()} test-id="popover" id={id} ref={popoverRef} role="dialog">
+      <div className={styles.content()}>
+        {heading && (
+          <Tag className={styles.heading()} tabIndex={-1} ref={headingRef}>
+            {heading}
+          </Tag>
+        )}
+        <div className={styles.body()} id="popover-content">
+          {content}
         </div>
-        <div aria-hidden className={styles.arrow()} style={arrowPosition} test-id="arrow" ref={arrowRef} />
+        <Button
+          look="link"
+          tag="button"
+          size="small"
+          ref={buttonRef}
+          onClick={() => {
+            onClose?.();
+            state.close();
+          }}
+          className={styles.closeBtn()}
+          iconAfter={() => <CloseIcon color="muted" size="small" aria-hidden />}
+          aria-label="Close popover"
+        />
       </div>
-    </FocusScope>
+      <div aria-hidden className={styles.arrow()} style={arrowPosition} test-id="arrow" ref={arrowRef} />
+    </div>
   );
 }
 

package/src/components/popover/components/panel/panel.types.ts

@@ -14,6 +14,14 @@ export type PanelProps = {
    * Tag to render
    */
   headingTag?: keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+  /**
+   * onClose callback
+   */
+  onClose?: () => void;
+  /**
+   * Whether the popover is open by default
+   */
+  open?: boolean;
   /**
    * Placement of popover. If no placement provided it will default to top unless there is no space then will appear on bottom.
    */

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
 
 import { Button } from '../button/index.js';
@@ -34,12 +34,15 @@ export function Popover({
   const panelId = useId();
   const styles = popoverStyles({ linkStyling });
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement>(null);
+  const [isOpenDefault, setIsOpenDefault] = useState(open);
 
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
+      if (isOpenDefault) setIsOpenDefault(false);
       onClick(event);
       state.toggle();
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [onClick, state],
   );
 
@@ -59,7 +62,8 @@ export function Popover({
 
   useLayoutEffect(() => {
     if (open) state.setOpen(true);
-  }, [open, state]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
 
   return (
     <div className={styles.base({ className })}>
@@ -70,6 +74,7 @@ export function Popover({
         soft={soft}
         aria-expanded={state.isOpen}
         aria-controls={panelId}
+        aria-haspopup="dialog"
         onClick={handleClick}
         ref={ref}
         size={size}
@@ -87,6 +92,15 @@ export function Popover({
           state={state}
           id={panelId}
           triggerRef={ref}
+          // Ensures popover heading doesn't get focused if default opened
+          open={isOpenDefault}
+          onClose={() => {
+            ref.current?.focus();
+            // Ensures focus handling works once popover is closed if it was default opened
+            if (isOpenDefault) {
+              setIsOpenDefault(false);
+            }
+          }}
         />
       )}
     </div>

package/src/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.component.tsx

@@ -58,7 +58,12 @@ function BaseSelectorCheckboxGroupOption(
       className={styles.base({})}
     >
       <VisuallyHidden>
-        <input {...mergeProps(inputProps, focusProps)} ref={localRef} />
+        <input
+          {...mergeProps(inputProps, focusProps)}
+          // override the aria-describedby to prevent screen readers from reading the content of the option twice, once from the input and once from the cell
+          aria-describedby={undefined}
+          ref={localRef}
+        />
       </VisuallyHidden>
       {children}
     </FlexiCell>

package/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.component.tsx

@@ -55,7 +55,12 @@ function BaseSelectorRadioGroupOption(
       className={styles.base({})}
     >
       <VisuallyHidden>
-        <input {...mergeProps(inputProps, focusProps)} ref={localRef} />
+        <input
+          {...mergeProps(inputProps, focusProps)}
+          // override the aria-describedby to prevent screen readers from reading the content of the option twice, once from the input and once from the cell
+          aria-describedby={undefined}
+          ref={localRef}
+        />
       </VisuallyHidden>
       {children}
     </FlexiCell>