@westpac/ui 0.42.1 → 0.42.3

package/dist/components/accordion/accordion.component.js

@@ -21,15 +21,21 @@ import { Item, useTreeState } from 'react-stately';
 import { styles } from './accordion.styles.js';
 import { AccordionItem as AccordionItemContent } from './components/index.js';
 function Accordion({ className , rounded =true , look ='soft' , ...props }, ref) {
+    const clonedChildren = [];
+    Children.forEach(props.children, (child)=>{
+        if (isValidElement(child)) {
+            const cloned = {
+                ...cloneElement(child, {
+                    ...child.props,
+                    hasChildItems: false
+                })
+            };
+            clonedChildren.push(cloned);
+        }
+    });
     const finalProps = {
         ...props,
-        children: Children.map(props.children, (child)=>{
-            if (!isValidElement(child)) return child;
-            return cloneElement(child, {
-                ...child.props,
-                hasChildItems: false
-            });
-        })
+        children: clonedChildren
     };
     const state = useTreeState(finalProps);
     const domRef = useDOMRef(ref);

package/dist/components/alert/alert.component.js

@@ -15,6 +15,7 @@ function _extends() {
 }
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useState } from 'react';
+import { Button } from '../button/button.component.js';
 import { AlertIcon, CloseIcon, InfoIcon, LimitIcon, SuccessIcon, WarningIcon } from '../icon/index.js';
 import { styles as alertStyles } from './alert.styles.js';
 const loadAnimations = ()=>import('./alert.utils.js').then((res)=>res.default);
@@ -81,7 +82,8 @@ export function Alert({ look ='info' , mode ='box' , heading , headingTag: Headi
         className: styles.body()
     }, !!heading && React.createElement(HeadingTag, {
         className: styles.heading()
-    }, heading), children), dismissible && mode !== 'text' && React.createElement("button", {
+    }, heading), children), dismissible && mode !== 'text' && React.createElement(Button, {
+        look: "unstyled",
         type: "button",
         className: styles.close(),
         onClick: handleClose,

package/dist/components/alert/alert.styles.js

@@ -5,7 +5,7 @@ export const styles = tv({
         icon: 'float-left flex-none',
         body: 'relative flex-1 overflow-hidden xsl:top-[0.125rem] [&_a]:underline',
         heading: 'typography-body-9 mb-1 font-bold',
-        close: 'absolute right-0.5 top-0.5 p-1 hover:opacity-80'
+        close: 'absolute right-0.5 top-0.5 h-5.5 p-1 hover:opacity-80'
     },
     variants: {
         look: {

package/dist/components/autocomplete/autocomplete.component.d.ts

@@ -1,2 +1,9 @@
+import { ForwardedRef } from 'react';
 import { type AutocompleteProps } from './autocomplete.types.js';
-export declare function Autocomplete<T extends object>({ size, invalid, isDisabled, footer, portalContainer, errorMessage, hintMessage, noOptionsMessage, className, width, loadingState, ...props }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Autocomplete<T extends object>({ size, invalid, isDisabled, footer, portalContainer, errorMessage, hintMessage, noOptionsMessage, className, width, loadingState, ...props }: AutocompleteProps<T>, ref: ForwardedRef<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+declare const _Autocomplete: {
+    displayName: string;
+} & (<T extends object>(props: AutocompleteProps<T> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+}) => ReturnType<typeof Autocomplete>);
+export { _Autocomplete as Autocomplete };

package/dist/components/autocomplete/autocomplete.component.js

@@ -14,7 +14,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import * as React from 'react';
-import { useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { mergeProps, useButton, useComboBox, useFilter, useFocusRing, useSearchField } from 'react-aria';
 import { useComboBoxState, useSearchFieldState } from 'react-stately';
 import { ClearIcon, SearchIcon } from '../icon/index.js';
@@ -36,7 +36,7 @@ const STATIC_IS_OPEN_STATE = {
         return;
     }
 };
-export function Autocomplete({ size ='medium' , invalid =false , isDisabled , footer , portalContainer , errorMessage , hintMessage , noOptionsMessage , className , width ='full' , loadingState , ...props }) {
+function Autocomplete({ size ='medium' , invalid =false , isDisabled , footer , portalContainer , errorMessage , hintMessage , noOptionsMessage , className , width ='full' , loadingState , ...props }, ref) {
     const { contains  } = useFilter({
         sensitivity: 'base'
     });
@@ -48,6 +48,7 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
     const { isFocusVisible , focusProps  } = useFocusRing();
     const { isFocusVisible: isInputFocusVisible , focusProps: inputFocusProps  } = useFocusRing();
     const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, ()=>inputRef.current);
     const listBoxRef = React.useRef(null);
     const popoverRef = React.useRef(null);
     const { inputProps , listBoxProps , labelProps , descriptionProps , errorMessageProps  } = useComboBox({
@@ -149,3 +150,6 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
         className: "border-t border-t-border px-3 py-2"
     }, footer)));
 }
+const _Autocomplete = forwardRef(Autocomplete);
+_Autocomplete.displayName = 'Autocomplete';
+export { _Autocomplete as Autocomplete };

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

@@ -14,7 +14,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef, useContext, useRef } from 'react';
-import { VisuallyHidden, useCheckboxGroupItem, useFocusRing } from 'react-aria';
+import { VisuallyHidden, mergeProps, useCheckboxGroupItem, useFocusRing } from 'react-aria';
 import { Icon } from '../../../icon/icon.component.js';
 import { CheckboxGroupContext } from '../../checkbox-group.component.js';
 import { styles as checkboxItemStyles } from './checkbox-group-checkbox.styles.js';
@@ -34,7 +34,7 @@ function CheckIcon({ copyrightYear ='2025' , size , ...props }) {
 function BaseCheckbox({ className , hint , label , value , ...props }, ref) {
     const { state , size , orientation  } = useContext(CheckboxGroupContext);
     const localRef = useRef(null);
-    const { inputProps , isDisabled , isSelected  } = useCheckboxGroupItem({
+    const { inputProps , labelProps , isDisabled , isSelected  } = useCheckboxGroupItem({
         ...props,
         value,
         children: label
@@ -46,14 +46,14 @@ function BaseCheckbox({ className , hint , label , value , ...props }, ref) {
         orientation,
         isFocusVisible
     });
-    return React.createElement("label", {
+    return React.createElement("label", _extends({
         className: styles.base({
             className
         }),
         ref: ref
-    }, React.createElement(VisuallyHidden, {
+    }, labelProps), React.createElement(VisuallyHidden, {
         elementType: "span"
-    }, React.createElement("input", _extends({}, inputProps, focusProps, {
+    }, React.createElement("input", _extends({}, mergeProps(inputProps, focusProps), {
         ref: localRef
     }))), React.createElement("span", {
         className: styles.checkbox()

package/dist/components/date-picker/date-picker.component.js

@@ -14,10 +14,12 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useFocusVisible } from 'react-aria';
 import { styles } from './date-picker.styles.js';
 import { formatDate, isDateDisabled, useListener } from './date-picker.utils.js';
 export function DatePicker({ dateFormat ='dd-MM-yyyy' , disableWeekends , disableDaysOfWeek , disableDates , placeholder , onChange , onFocus , onBlur , onOpen , onClose , min , max , value , id , size ='md' , name , block =false , invalid =false , ...props }) {
     const [initialized, setInitialized] = useState(false);
+    const { isFocusVisible  } = useFocusVisible();
     useEffect(()=>{
         const initDatePicker = async ()=>{
             const { defineCustomElements  } = await import('@duetds/date-picker/custom-element/index.js');
@@ -146,7 +148,8 @@ export function DatePicker({ dateFormat ='dd-MM-yyyy' , disableWeekends , disabl
         class: styles({
             size,
             block,
-            invalid
+            invalid,
+            isFocusVisible
         }),
         ref: ref
     }, props));

package/dist/components/date-picker/date-picker.styles.d.ts

@@ -13,6 +13,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
 }, undefined, "date-picker", {
     responsiveVariants: string[];
 }, {
@@ -30,6 +34,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
@@ -45,6 +53,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
 }, undefined, "date-picker", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/date-picker/date-picker.styles.js

@@ -15,6 +15,10 @@ export const styles = tv({
         invalid: {
             true: 'date-picker-invalid',
             false: ''
+        },
+        isFocusVisible: {
+            true: 'date-picker-focused',
+            false: ''
         }
     }
 }, {

package/dist/components/error-message/error-message.styles.js

@@ -3,6 +3,6 @@ export const styles = tv({
     slots: {
         base: 'typography-body-11 flex items-start text-danger',
         list: 'mb-2 flex flex-col gap-1',
-        icon: 'mr-[0.5em] mt-[0.15rem] align-top'
+        icon: 'mr-[0.5em] mt-[0.15rem] flex-shrink-0 align-top'
     }
 });

package/dist/components/filter/components/filter-buttons/filter-buttons.component.js

@@ -106,7 +106,9 @@ export function FilterButtons({ filterButtons , onClick , selectedButton , tag:
             targetLeft,
             targetRight
         };
-    }, []);
+    }, [
+        filterButtons.length
+    ]);
     const handleScrollTarget = useCallback((container)=>{
         let targetRight = scrollTarget.right;
         let targetLeft = scrollTarget.left;

package/dist/components/header/header.styles.js

@@ -13,7 +13,7 @@ export const styles = tv({
     variants: {
         logoCenter: {
             true: {
-                logoLink: 'max-sm:absolute max-sm:left-1/2 max-sm:z-0 max-sm:translate-x-[-50%] max-sm:translate-y-[15%] sm:relative',
+                logoLink: 'max-sm:absolute max-sm:left-1/2 max-sm:z-0 max-sm:-translate-x-1/2 max-sm:translate-y-[15%] sm:relative',
                 smallLogo: ''
             },
             false: {

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

@@ -7,7 +7,7 @@ export const styles = tv({
         before:absolute before:left-[1px] before:top-[0.5px] before:size-0 before:border-x-[7px] before:border-t-[12px] before:border-x-[transparent] before:border-t-muted after:absolute
         after:left-[1.5px] after:top-0 after:size-0 after:border-x-[6.5px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white
       `,
-        closeBtn: 'absolute right-1 h-3 top-1 p-0 hover:opacity-80',
+        closeBtn: 'absolute right-1 top-1 h-3 p-0 hover:opacity-80',
         content: 'w-[17.625rem] rounded-[3px] bg-white py-4 pl-3 pr-5',
         heading: 'typography-body-9 mb-2 font-medium text-text',
         body: 'typography-body-10 text-text'

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

@@ -43,6 +43,7 @@ export function Popover({ children , className , headingTag , content , heading
             className
         })
     }, React.createElement(Button, {
+        type: "button",
         look: icon && !children || linkStyling ? 'link' : look,
         iconAfter: icon,
         soft: soft,

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

@@ -14,13 +14,13 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef, useContext, useRef } from 'react';
-import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
+import { VisuallyHidden, mergeProps, useFocusRing, useRadio } from 'react-aria';
 import { RadioGroupContext } from '../../radio-group.component.js';
 import { styles as radioStyles } from './radio-group-radio.styles.js';
 function BaseRadioGroupRadio({ className , hint , label , ...props }, ref) {
     const { state , size , orientation  } = useContext(RadioGroupContext);
     const localRef = useRef(null);
-    const { inputProps , isSelected , isDisabled  } = useRadio({
+    const { inputProps , labelProps , isSelected , isDisabled  } = useRadio({
         ...props,
         children: label
     }, state, localRef);
@@ -32,14 +32,14 @@ function BaseRadioGroupRadio({ className , hint , label , ...props }, ref) {
         size,
         orientation
     });
-    return React.createElement("label", {
+    return React.createElement("label", _extends({
         className: styles.base({
             className
         }),
         ref: ref
-    }, React.createElement(VisuallyHidden, {
+    }, labelProps), React.createElement(VisuallyHidden, {
         elementType: "span"
-    }, React.createElement("input", _extends({}, inputProps, focusProps, {
+    }, React.createElement("input", _extends({}, mergeProps(inputProps, focusProps), {
         ref: localRef
     }))), React.createElement("span", {
         className: styles.selector()

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

@@ -13,7 +13,7 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-import React, { forwardRef, useContext, useRef } from 'react';
+import React, { forwardRef, useCallback, useContext, useRef } from 'react';
 import { VisuallyHidden, mergeProps, useFocusRing, useRadio } from 'react-aria';
 import { ArrowRightIcon, TickIcon } from '../../../../../../components/icon/index.js';
 import { FlexiCell } from '../../../../../index.js';
@@ -36,9 +36,16 @@ function BaseSelectorRadioGroupOption({ className , children , value , withBorde
         checkIcon
     });
     const FinalIcon = checkIcon === 'checkbox' ? TickIcon : ArrowRightIcon;
-    const onItemClick = ()=>{
+    const onItemClick = useCallback(()=>{
+        if (isDisabled) {
+            return;
+        }
         state.setSelectedValue(value);
-    };
+    }, [
+        isDisabled,
+        state,
+        value
+    ]);
     return React.createElement(FlexiCell, {
         after: React.createElement("div", {
             className: "flex gap-2"

package/dist/components/switch/switch.component.js

@@ -25,7 +25,7 @@ export function Switch({ className , label , size ='medium' , block =false , che
     const labelId = useId();
     const ref = useRef(null);
     const { isSelected  } = state;
-    const { inputProps  } = useCheckbox({
+    const { inputProps , labelProps  } = useCheckbox({
         isDisabled,
         'aria-labelledby': labelId,
         defaultSelected: checked,
@@ -39,11 +39,11 @@ export function Switch({ className , label , size ='medium' , block =false , che
         isDisabled,
         size
     });
-    return React.createElement("label", {
+    return React.createElement("label", _extends({
         className: styles.base({
             className
         })
-    }, React.createElement("span", {
+    }, labelProps), React.createElement("span", {
         className: styles.label(),
         id: labelId
     }, label), React.createElement(VisuallyHidden, {