@westpac/ui 0.59.1 → 0.59.3

package/dist/components/icon/components/arrow-back-icon.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from '../icon.types.js';
+export declare function ArrowBackIcon({ look, 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/components/arrow-back-icon.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function ArrowBackIcon({ look = 'filled', 'aria-label': ariaLabel = 'Arrow Back', copyrightYear = '2025', ...props }) {
+    return React.createElement(Icon, {
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("path", {
+        d: "M12 20L13.41 18.59L7.83 13L20 13V11L7.83 11L13.41 5.41L12 4L4 12L12 20Z",
+        fill: "currentColor"
+    }));
+}

package/dist/components/icon/components/arrow-down-icon.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from '../icon.types.js';
+export declare function ArrowDownIcon({ look, 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/components/arrow-down-icon.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function ArrowDownIcon({ look = 'filled', 'aria-label': ariaLabel = 'Arrow Down', copyrightYear = '2025', ...props }) {
+    return React.createElement(Icon, {
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("path", {
+        d: "M20 12L18.59 10.59L13 16.17V4L11 4L11 16.17L5.41 10.59L4 12L12 20L20 12Z",
+        fill: "currentColor"
+    }));
+}

package/dist/components/icon/components/arrow-forward-icon.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from '../icon.types.js';
+export declare function ArrowForwardIcon({ look, 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/components/arrow-forward-icon.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function ArrowForwardIcon({ look = 'filled', 'aria-label': ariaLabel = 'Arrow Forward', copyrightYear = '2025', ...props }) {
+    return React.createElement(Icon, {
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("path", {
+        d: "M12 4L10.59 5.41L16.17 11H4V13H16.17L10.59 18.59L12 20L20 12L12 4Z",
+        fill: "currentColor"
+    }));
+}

package/dist/components/icon/components/arrow-up-icon.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from '../icon.types.js';
+export declare function ArrowUpIcon({ look, 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/components/arrow-up-icon.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function ArrowUpIcon({ look = 'filled', 'aria-label': ariaLabel = 'Arrow Up', copyrightYear = '2025', ...props }) {
+    return React.createElement(Icon, {
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("path", {
+        d: "M4 12L5.41 13.41L11 7.83L11 20H13V7.83L18.59 13.41L20 12L12 4L4 12Z",
+        fill: "currentColor"
+    }));
+}

package/dist/components/icon/icon.styles.js

@@ -3,11 +3,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/dist/components/icon/index.d.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/dist/components/icon/index.js

@@ -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/dist/components/link/link.styles.d.ts

@@ -2,8 +2,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     type: {
         inline: {
             base: string;
-            iconBefore: string;
-            iconAfter: string;
         };
         standalone: {
             base: string;
@@ -30,8 +28,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     type: {
         inline: {
             base: string;
-            iconBefore: string;
-            iconAfter: string;
         };
         standalone: {
             base: string;
@@ -56,8 +52,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     type: {
         inline: {
             base: string;
-            iconBefore: string;
-            iconAfter: string;
         };
         standalone: {
             base: string;

package/dist/components/link/link.styles.js

@@ -1,19 +1,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/dist/components/popover/components/panel/panel.component.d.ts

@@ -1,5 +1,5 @@
 import { type PanelProps } from './panel.types.js';
-export declare function BasePanel({ state, heading, headingTag: Tag, content, placement, id, triggerRef, portal, }: PanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function BasePanel({ state, heading, headingTag: Tag, content, placement, id, triggerRef, onClose, open, portal, }: PanelProps): import("react/jsx-runtime").JSX.Element;
 /**
  * @private
  */

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

@@ -1,13 +1,14 @@
-import React, { useRef } from 'react';
-import { FocusScope } from 'react-aria';
+import React, { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { Button } from '../../../button/index.js';
 import { CloseIcon } from '../../../icon/index.js';
 import { usePanel } from './panel.hook.js';
 import { styles as panelStyles } from './panel.styles.js';
-export function BasePanel({ state, heading, headingTag: Tag = 'h1', content, placement = 'top', id, triggerRef, portal }) {
+export function BasePanel({ state, heading, headingTag: Tag = 'h1', content, placement = 'top', id, triggerRef, onClose, open, portal }) {
     const popoverRef = useRef(null);
     const arrowRef = useRef(null);
+    const headingRef = useRef(null);
+    const buttonRef = useRef(null);
     const { popoverPosition, arrowPosition, localPlacement } = usePanel({
         state,
         placement,
@@ -18,27 +19,43 @@ export function BasePanel({ state, heading, headingTag: Tag = 'h1', content, pla
     const styles = panelStyles({
         placement: localPlacement
     });
-    return React.createElement(FocusScope, {
-        autoFocus: true,
-        restoreFocus: true
-    }, React.createElement("div", {
+    useEffect(()=>{
+        if (state.isOpen && !open) {
+            if (headingRef.current) {
+                headingRef.current.focus();
+            } else {
+                var _buttonRef_current;
+                (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.focus();
+            }
+        }
+    }, [
+        state.isOpen
+    ]);
+    return React.createElement("div", {
         style: popoverPosition,
         className: styles.popover(),
         "test-id": "popover",
         id: id,
-        ref: popoverRef
+        ref: popoverRef,
+        role: "dialog"
     }, React.createElement("div", {
         className: styles.content()
     }, heading && React.createElement(Tag, {
         className: styles.heading(),
-        tabIndex: 0
+        tabIndex: -1,
+        ref: headingRef
     }, heading), React.createElement("div", {
         className: styles.body(),
-        tabIndex: 0
+        id: "popover-content"
     }, content), React.createElement(Button, {
         look: "link",
+        tag: "button",
         size: "small",
-        onClick: ()=>state.close(),
+        ref: buttonRef,
+        onClick: ()=>{
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            state.close();
+        },
         className: styles.closeBtn(),
         iconAfter: ()=>React.createElement(CloseIcon, {
                 color: "muted",
@@ -52,7 +69,7 @@ export function BasePanel({ state, heading, headingTag: Tag = 'h1', content, pla
         style: arrowPosition,
         "test-id": "arrow",
         ref: arrowRef
-    })));
+    }));
 }
 export function Panel({ portal = false, ...props }) {
     if (portal) {

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

@@ -22,10 +22,16 @@ const getLeftOffsetPerHorizontalPosition = (element, screenWidth)=>{
             return (PANEL_WIDTH_SIZE - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0)) / 2 * -1;
         case 'right':
             if (triggerDOMRect.left + rightOffset <= 0) {
+                if (triggerDOMRect.left + rightOffset - PANEL_WIDTH_SIZE <= -screenWidth) {
+                    return rightOffset - (triggerDOMRect.left + rightOffset) + (screenWidth - PANEL_WIDTH_SIZE) / 2;
+                }
                 return rightOffset - (triggerDOMRect.left + rightOffset) + 16;
             }
             return rightOffset;
         default:
+            if ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) + PANEL_WIDTH_SIZE >= screenWidth) {
+                return -((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) + (screenWidth - PANEL_WIDTH_SIZE) / 2;
+            }
             return 0;
     }
 };

package/dist/components/popover/components/panel/panel.types.d.ts

@@ -13,6 +13,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/dist/components/popover/popover.component.js

@@ -1,5 +1,5 @@
 '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';
 import { Panel } from './components/panel/panel.component.js';
@@ -11,7 +11,9 @@ export function Popover({ children, className, headingTag, content, heading, onC
         linkStyling
     });
     const ref = useRef(null);
+    const [isOpenDefault, setIsOpenDefault] = useState(open);
     const handleClick = useCallback((event)=>{
+        if (isOpenDefault) setIsOpenDefault(false);
         onClick(event);
         state.toggle();
     }, [
@@ -35,8 +37,7 @@ export function Popover({ children, className, headingTag, content, heading, onC
     useLayoutEffect(()=>{
         if (open) state.setOpen(true);
     }, [
-        open,
-        state
+        open
     ]);
     return React.createElement("div", {
         className: styles.base({
@@ -49,6 +50,7 @@ export function Popover({ children, className, headingTag, content, heading, onC
         soft: soft,
         "aria-expanded": state.isOpen,
         "aria-controls": panelId,
+        "aria-haspopup": "dialog",
         onClick: handleClick,
         ref: ref,
         size: size,
@@ -61,6 +63,14 @@ export function Popover({ children, className, headingTag, content, heading, onC
         content: content,
         state: state,
         id: panelId,
-        triggerRef: ref
+        triggerRef: ref,
+        open: isOpenDefault,
+        onClose: ()=>{
+            var _ref_current;
+            (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
+            if (isOpenDefault) {
+                setIsOpenDefault(false);
+            }
+        }
     }));
 }

package/dist/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.component.js

@@ -40,6 +40,7 @@ function BaseSelectorCheckboxGroupOption({ className, children, value, withBorde
         className: styles.base({})
     }, React.createElement(VisuallyHidden, null, React.createElement("input", {
         ...mergeProps(inputProps, focusProps),
+        "aria-describedby": undefined,
         ref: localRef
     })), children);
 }

package/dist/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.component.js

@@ -47,6 +47,7 @@ function BaseSelectorRadioGroupOption({ className, children, value, withBorder =
         className: styles.base({})
     }, React.createElement(VisuallyHidden, null, React.createElement("input", {
         ...mergeProps(inputProps, focusProps),
+        "aria-describedby": undefined,
         ref: localRef
     })), children);
 }