@westpac/ui 1.16.0 → 1.19.0

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-select-all-option/multi-select-select-all-option.component.js

@@ -1,4 +1,5 @@
 'use client';
+import { focusWithoutScrolling } from '@react-aria/utils';
 import React, { useCallback, useContext, useMemo } from 'react';
 import { useOption, useFocusRing, mergeProps } from 'react-aria';
 import { TickIcon } from '../../../../../icon/index.js';
@@ -40,12 +41,11 @@ export function MultiSelectSelectAllOption() {
             var _listBoxRef_current;
             e.preventDefault();
             const firstItem = (_listBoxRef_current = listBoxRef.current) === null || _listBoxRef_current === void 0 ? void 0 : _listBoxRef_current.querySelector('[data-key]');
-            firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+            if (firstItem) focusWithoutScrolling(firstItem);
         }
         if (e.key === 'ArrowUp') {
-            var _inputRef_current;
             e.preventDefault();
-            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+            if (inputRef.current) focusWithoutScrolling(inputRef.current);
         }
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();

package/dist/components/multi-select/components/multi-select-popover/multi-select-popover.component.js

@@ -14,6 +14,10 @@ export function MultiSelectPopover({ children, className, ...props }) {
             setIsPopoverSmaller(popoverWidth < buttonWidth);
         }
     }, []);
+    const positioningState = {
+        ...overlayState,
+        close: ()=>undefined
+    };
     const { popoverProps } = usePopover({
         ...props,
         placement: placement,
@@ -23,7 +27,7 @@ export function MultiSelectPopover({ children, className, ...props }) {
         shouldFlip: true,
         shouldCloseOnInteractOutside: ()=>false,
         offset: 6
-    }, overlayState);
+    }, positioningState);
     const brandContainer = useMemo(()=>{
         if (typeof window !== 'undefined') {
             return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
@@ -57,7 +61,6 @@ export function MultiSelectPopover({ children, className, ...props }) {
             }
         },
         role: "dialog",
-        "aria-modal": "true",
         "aria-label": "Options list with filter"
     }, children, React.createElement(DismissButton, {
         onDismiss: ()=>overlayState.close()

package/dist/components/multi-select/components/multi-select-searchbar/multi-select-searchbar.component.js

@@ -1,3 +1,4 @@
+import { focusWithoutScrolling } from '@react-aria/utils';
 import React, { useContext, useCallback } from 'react';
 import { Button } from '../../../../components/button/index.js';
 import { ClearIcon, SearchIcon } from '../../../../components/icon/index.js';
@@ -10,14 +11,10 @@ export function MultiSelectSearchbar({ filterText, setFilterText, closeBtnRef })
     const styles = searchbarStyles();
     const handleInputKeyDown = useCallback((e)=>{
         if (e.key === 'ArrowDown') {
+            var _listBoxRef_current;
             e.preventDefault();
-            if (selectAllRef.current) {
-                selectAllRef.current.focus();
-            } else {
-                var _listBoxRef_current;
-                const firstItem = (_listBoxRef_current = listBoxRef.current) === null || _listBoxRef_current === void 0 ? void 0 : _listBoxRef_current.querySelector('[data-key]');
-                firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
-            }
+            const target = selectAllRef.current || ((_listBoxRef_current = listBoxRef.current) === null || _listBoxRef_current === void 0 ? void 0 : _listBoxRef_current.querySelector('[data-key]'));
+            if (target) focusWithoutScrolling(target);
         }
         if (e.key === 'Escape' && filterText.length > 0) {
             e.stopPropagation();

package/dist/components/multi-select/multi-select.component.d.ts

@@ -1,7 +1,18 @@
-import React from 'react';
+import React, { ForwardedRef } from 'react';
 import type { MultiSelectContextProps, MultiSelectItemProps, MultiSelectProps, MultiSelectValue } from './multi-select.types.js';
 export declare const MultiSelectContext: React.Context<MultiSelectContextProps>;
-export declare function BaseMultiSelect<T extends MultiSelectValue = MultiSelectValue>({ size, listBoxProps, selectionMode, selectedKeys, onSelectionChange, placeholder, showSingleSectionTitle, placement, portalContainer, id, hideFilter, hideSelectAll, width, ...props }: MultiSelectProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare const MultiSelect: React.MemoExoticComponent<typeof BaseMultiSelect>;
+export declare function BaseMultiSelect<T extends MultiSelectValue = MultiSelectValue>({ size, listBoxProps, selectionMode, selectedKeys, onSelectionChange, placeholder, showSingleSectionTitle, placement, portalContainer, id, hideFilter, hideSelectAll, width, ...props }: MultiSelectProps<T>, forwardedRef: ForwardedRef<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    hideFilter?: boolean;
+    hideSelectAll?: boolean;
+    listBoxProps?: Omit<import("react-aria").AriaListBoxOptions<MultiSelectValue>, "state" | "selectionMode"> | undefined;
+    id?: string;
+    placeholder?: string;
+    placement?: import("react-aria").AriaPopoverProps["placement"];
+    portalContainer?: Element;
+    showSingleSectionTitle?: boolean;
+    size?: import("./components/multi-select-list-box-trigger/multi-select-list-box-trigger.types.js").MultiSelectSize;
+    width?: import("../../types/responsive-variants.types.js").ResponsiveVariants<2 | 1 | 3 | "full" | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 30 | undefined>;
+} & import("react-stately").ListProps<MultiSelectValue> & React.RefAttributes<HTMLButtonElement>>>;
 export declare const MultiSelectItem: (props: MultiSelectItemProps) => JSX.Element;
 export { Section as MultiSelectSection } from 'react-stately';

package/dist/components/multi-select/multi-select.component.js

@@ -1,6 +1,7 @@
 'use client';
-import React, { useRef, useState, memo, createContext } from 'react';
-import { useFilter, useOverlayTrigger } from 'react-aria';
+import { focusWithoutScrolling } from '@react-aria/utils';
+import React, { forwardRef, useRef, useState, memo, createContext } from 'react';
+import { useFilter, useObjectRef, useOverlayTrigger } from 'react-aria';
 import { Item, useListState, useOverlayTriggerState } from 'react-stately';
 import { MultiSelectDropdown } from './components/multi-select-dropdown/multi-select-dropdown.component.js';
 import { MultiSelectListBoxTrigger } from './components/multi-select-list-box-trigger/multi-select-list-box-trigger.component.js';
@@ -28,7 +29,7 @@ export const MultiSelectContext = createContext({
     overlayProps: {},
     hideSelectAll: false
 });
-export function BaseMultiSelect({ size = 'medium', listBoxProps, selectionMode = 'multiple', selectedKeys, onSelectionChange, placeholder = 'Select', showSingleSectionTitle = false, placement = 'bottom left', portalContainer, id, hideFilter = false, hideSelectAll = false, width = 'full', ...props }) {
+export function BaseMultiSelect({ size = 'medium', listBoxProps, selectionMode = 'multiple', selectedKeys, onSelectionChange, placeholder = 'Select', showSingleSectionTitle = false, placement = 'bottom left', portalContainer, id, hideFilter = false, hideSelectAll = false, width = 'full', ...props }, forwardedRef) {
     const [filterText, setFilterText] = useState('');
     const filter = useFilter({
         sensitivity: 'base'
@@ -41,7 +42,7 @@ export function BaseMultiSelect({ size = 'medium', listBoxProps, selectionMode =
         filter: (nodes)=>filterNodes(nodes, filterText, (value, string)=>filter.contains(value, string))
     });
     const inputRef = useRef(null);
-    const buttonRef = useRef(null);
+    const buttonRef = useObjectRef(forwardedRef);
     const popoverRef = useRef(null);
     const selectAllRef = useRef(null);
     const listBoxRef = useRef(null);
@@ -49,17 +50,9 @@ export function BaseMultiSelect({ size = 'medium', listBoxProps, selectionMode =
         onOpenChange: (isOpen)=>{
             if (isOpen) {
                 requestAnimationFrame(()=>{
-                    if (!hideFilter) {
-                        var _inputRef_current;
-                        (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
-                    } else if (selectionMode === 'multiple' && !hideSelectAll) {
-                        var _selectAllRef_current;
-                        (_selectAllRef_current = selectAllRef.current) === null || _selectAllRef_current === void 0 ? void 0 : _selectAllRef_current.focus();
-                    } else {
-                        var _listBoxRef_current;
-                        const firstItem = (_listBoxRef_current = listBoxRef.current) === null || _listBoxRef_current === void 0 ? void 0 : _listBoxRef_current.querySelector('[data-key]');
-                        firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
-                    }
+                    var _listBoxRef_current;
+                    const target = !hideFilter && inputRef.current || selectionMode === 'multiple' && !hideSelectAll && selectAllRef.current || ((_listBoxRef_current = listBoxRef.current) === null || _listBoxRef_current === void 0 ? void 0 : _listBoxRef_current.querySelector('[data-key]'));
+                    if (target) focusWithoutScrolling(target);
                 });
             }
             if (!isOpen) {
@@ -103,6 +96,7 @@ export function BaseMultiSelect({ size = 'medium', listBoxProps, selectionMode =
         ...listBoxProps
     })));
 }
-export const MultiSelect = memo(BaseMultiSelect);
+export const MultiSelect = memo(forwardRef(BaseMultiSelect));
+MultiSelect.displayName = 'MultiSelect';
 export const MultiSelectItem = Item;
 export { Section as MultiSelectSection } from 'react-stately';

package/dist/components/radio-group/components/radio-group-radio/radio-group-radio.component.d.ts

@@ -3,4 +3,4 @@ export declare const RadioGroupRadio: React.ForwardRefExoticComponent<{
     className?: string;
     hint?: React.ReactNode;
     label: React.ReactNode;
-} & Omit<import("react-aria").AriaRadioProps, "children"> & React.RefAttributes<HTMLLabelElement>>;
+} & Omit<import("react-aria").AriaRadioProps, "children"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,15 +1,15 @@
 'use client';
-import React, { forwardRef, useContext, useRef } from 'react';
-import { VisuallyHidden, mergeProps, useFocusRing, useRadio } from 'react-aria';
+import React, { forwardRef, useContext } from 'react';
+import { VisuallyHidden, mergeProps, useFocusRing, useObjectRef, 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 inputRef = useObjectRef(ref);
     const { inputProps, labelProps, isSelected, isDisabled } = useRadio({
         ...props,
         children: label
-    }, state, localRef);
+    }, state, inputRef);
     const { isFocusVisible, focusProps } = useFocusRing();
     const styles = radioStyles({
         isDisabled,
@@ -22,13 +22,12 @@ function BaseRadioGroupRadio({ className, hint, label, ...props }, ref) {
         className: styles.base({
             className
         }),
-        ref: ref,
         ...labelProps
     }, React.createElement(VisuallyHidden, {
         elementType: "span"
     }, React.createElement("input", {
         ...mergeProps(inputProps, focusProps),
-        ref: localRef
+        ref: inputRef
     })), React.createElement("span", {
         className: styles.selector()
     }), React.createElement("span", {

package/dist/components/radio-group/radio-group.component.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
-import { type RadioGroupContextState, type RadioGroupProps } from './radio-group.types.js';
+import { FocusHandle } from '../../hook/focus-manager-ref.hook.js';
+import { type RadioGroupContextState } from './radio-group.types.js';
 export declare const RadioGroupContext: React.Context<RadioGroupContextState>;
-export declare function RadioGroup({ className, radios, label, orientation, showAmount, size, errorMessage, hintMessage, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: React.ForwardRefExoticComponent<{
+    className?: string;
+    errorMessage?: string | string[];
+    hintMessage?: import("../index.js").HintProps["children"];
+    radios: import("./components/radio-group-radio/radio-group-radio.types.js").RadioGroupRadioProps[];
+    showAmount?: number;
+    size?: "medium" | "large";
+} & Omit<import("react-aria").AriaRadioGroupProps, "errorMessage" | "description"> & React.RefAttributes<FocusHandle>>;

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

@@ -1,9 +1,10 @@
 'use client';
-import React, { createContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import React, { createContext, forwardRef, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useFocusRing, useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 import { FUNCTION_NOT_IMPLEMENTED } from '../../constants/message.js';
 import { useBreakpoint } from '../../hook/breakpoints.hook.js';
+import { acceptInputs, useFocusManagerRef } from '../../hook/focus-manager-ref.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
@@ -69,7 +70,10 @@ export const RadioGroupContext = createContext({
         }
     }
 });
-export function RadioGroup({ className, radios, label, orientation = 'vertical', showAmount = 0, size = 'medium', errorMessage, hintMessage, ...props }) {
+function BaseRadioGroup({ className, radios, label, orientation = 'vertical', showAmount = 0, size = 'medium', errorMessage, hintMessage, ...props }, ref) {
+    const wrapperRef = useFocusManagerRef(ref, {
+        accept: acceptInputs
+    });
     const breakpoint = useBreakpoint();
     const resolvedOrientation = resolveResponsiveVariant(orientation, breakpoint);
     const resolvedSize = resolveResponsiveVariant(size, breakpoint);
@@ -123,7 +127,8 @@ export function RadioGroup({ className, radios, label, orientation = 'vertical',
         message: errorMessage
     }), React.createElement("div", {
         className: styles.radioWrapper(),
-        id: panelId
+        id: panelId,
+        ref: wrapperRef
     }, React.createElement(RadioGroupContext.Provider, {
         value: {
             state,
@@ -145,3 +150,5 @@ export function RadioGroup({ className, radios, label, orientation = 'vertical',
         className: styles.buttonText()
     }, `Show ${revealAmount} more ${revealAmount === 1 ? 'item' : 'items'}`))));
 }
+export const RadioGroup = forwardRef(BaseRadioGroup);
+RadioGroup.displayName = 'RadioGroup';

package/dist/components/selector/components/selector-button-group/selector-button-group.component.d.ts

@@ -1,4 +1,11 @@
 import React from 'react';
-import { SelectorButtonGroupContextState, SelectorButtonGroupProps } from './selector-button-group.types.js';
+import { FocusHandle } from '../../../../hook/focus-manager-ref.hook.js';
+import { SelectorButtonGroupContextState } from './selector-button-group.types.js';
 export declare const SelectorButtonContext: React.Context<SelectorButtonGroupContextState>;
-export declare function SelectorButtonGroup({ className, children, label, orientation, errorMessage, description, value, onChange, isDisabled, ...props }: SelectorButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const SelectorButtonGroup: React.ForwardRefExoticComponent<{
+    isDisabled?: boolean;
+    orientation?: import("../../../../types/responsive-variants.types.js").ResponsiveVariants<"horizontal" | "vertical" | undefined>;
+    tag?: keyof JSX.IntrinsicElements;
+    value?: string;
+    onChange?: (value: string) => void;
+} & import("react-aria").AriaFieldProps & Omit<React.HTMLAttributes<Element>, "onChange"> & React.RefAttributes<FocusHandle>>;

package/dist/components/selector/components/selector-button-group/selector-button-group.component.js

@@ -1,7 +1,8 @@
 'use client';
-import React, { createContext, useCallback, useMemo, useState } from 'react';
+import React, { createContext, forwardRef, useCallback, useMemo, useState } from 'react';
 import { useField } from 'react-aria';
 import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';
+import { useFocusManagerRef } from '../../../../hook/focus-manager-ref.hook.js';
 import { resolveResponsiveVariant } from '../../../../utils/breakpoint.util.js';
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 import { styles } from './selector-button-group.styles.js';
@@ -11,7 +12,8 @@ export const SelectorButtonContext = createContext({
     validationState: 'valid',
     isDisabled: undefined
 });
-export function SelectorButtonGroup({ className, children, label, orientation = 'vertical', errorMessage, description, value = '', onChange, isDisabled, ...props }) {
+function BaseSelectorButtonGroup({ className, children, label, orientation = 'vertical', errorMessage, description, value = '', onChange, isDisabled, ...props }, ref) {
+    const wrapperRef = useFocusManagerRef(ref);
     const isControlled = onChange !== undefined;
     const onChangeCallback = onChange;
     const [selected, setSelected] = useState(value);
@@ -55,8 +57,11 @@ export function SelectorButtonGroup({ className, children, label, orientation =
             className,
             orientation: resolvedOrientation
         }),
-        ...fieldProps
+        ...fieldProps,
+        ref: wrapperRef
     }, React.createElement(SelectorButtonContext.Provider, {
         value: state
     }, children)));
 }
+export const SelectorButtonGroup = forwardRef(BaseSelectorButtonGroup);
+SelectorButtonGroup.displayName = 'SelectorButtonGroup';

package/dist/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
-import { type SelectorCheckboxGroupProps } from './selector-checkbox-group.types.js';
+import { FocusHandle } from '../../../../hook/focus-manager-ref.hook.js';
 export declare const SelectorCheckboxGroupContext: React.Context<import("react-stately").CheckboxGroupState>;
-export declare function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const SelectorCheckboxGroup: React.ForwardRefExoticComponent<{
+    className?: string;
+    orientation?: "horizontal" | "vertical";
+    size?: "medium" | "large";
+} & import("react-aria").AriaCheckboxGroupProps & Omit<React.HTMLAttributes<Element>, "onChange"> & React.RefAttributes<FocusHandle>>;

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

@@ -1,8 +1,9 @@
 'use client';
-import React, { createContext } from 'react';
+import React, { createContext, forwardRef } from 'react';
 import { useCheckboxGroup } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 import { FUNCTION_NOT_IMPLEMENTED } from '../../../../constants/message.js';
+import { useFocusManagerRef } from '../../../../hook/focus-manager-ref.hook.js';
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 import { styles } from './selector-checkbox-group.styles.js';
 export const SelectorCheckboxGroupContext = createContext({
@@ -65,8 +66,9 @@ export const SelectorCheckboxGroupContext = createContext({
         throw new Error(FUNCTION_NOT_IMPLEMENTED);
     }
 });
-export function SelectorCheckboxGroup(props) {
+function BaseSelectorCheckboxGroup(props, ref) {
     const { children, label, description, errorMessage } = props;
+    const wrapperRef = useFocusManagerRef(ref);
     const state = useCheckboxGroupState(props);
     const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(props, state);
     return React.createElement(React.Fragment, null, label && React.createElement(Label, labelProps, label), description && React.createElement(Hint, descriptionProps, description), errorMessage && state.isInvalid && React.createElement(ErrorMessage, {
@@ -76,8 +78,11 @@ export function SelectorCheckboxGroup(props) {
         ...groupProps,
         className: styles({
             className: groupProps.className
-        })
+        }),
+        ref: wrapperRef
     }, React.createElement(SelectorCheckboxGroupContext.Provider, {
         value: state
     }, children)));
 }
+export const SelectorCheckboxGroup = forwardRef(BaseSelectorCheckboxGroup);
+SelectorCheckboxGroup.displayName = 'SelectorCheckboxGroup';

package/dist/components/selector/components/selector-radio-group/selector-radio-group.component.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
-import { type SelectorRadioGroupContextState, type SelectorRadioGroupProps } from './selector-radio-group.types.js';
+import { FocusHandle } from '../../../../hook/focus-manager-ref.hook.js';
+import { type SelectorRadioGroupContextState } from './selector-radio-group.types.js';
 export declare const SelectorRadioGroupContext: React.Context<SelectorRadioGroupContextState>;
-export declare function SelectorRadioGroup({ className, children, label, orientation, errorMessage, description, ...props }: SelectorRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const SelectorRadioGroup: React.ForwardRefExoticComponent<{
+    orientation?: "horizontal" | "vertical" | undefined;
+    tag?: keyof JSX.IntrinsicElements;
+} & import("react-aria").AriaRadioGroupProps & Omit<React.HTMLAttributes<Element>, "onChange"> & React.RefAttributes<FocusHandle>>;

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

@@ -1,9 +1,10 @@
 'use client';
-import React, { createContext } from 'react';
+import React, { createContext, forwardRef } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 import { FUNCTION_NOT_IMPLEMENTED } from '../../../../constants/message.js';
 import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';
+import { useFocusManagerRef } from '../../../../hook/focus-manager-ref.hook.js';
 import { resolveResponsiveVariant } from '../../../../utils/breakpoint.util.js';
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 import { styles } from './selector-radio-group.styles.js';
@@ -66,7 +67,8 @@ export const SelectorRadioGroupContext = createContext({
         }
     }
 });
-export function SelectorRadioGroup({ className, children, label, orientation = 'vertical', errorMessage, description, ...props }) {
+function BaseSelectorRadioGroup({ className, children, label, orientation = 'vertical', errorMessage, description, ...props }, ref) {
+    const wrapperRef = useFocusManagerRef(ref);
     const breakpoint = useBreakpoint();
     const resolvedOrientation = resolveResponsiveVariant(orientation, breakpoint);
     const state = useRadioGroupState({
@@ -88,7 +90,8 @@ export function SelectorRadioGroup({ className, children, label, orientation = '
             className,
             orientation: resolvedOrientation
         }),
-        ...radioGroupProps
+        ...radioGroupProps,
+        ref: wrapperRef
     }, React.createElement(SelectorRadioGroupContext.Provider, {
         value: {
             state,
@@ -96,3 +99,5 @@ export function SelectorRadioGroup({ className, children, label, orientation = '
         }
     }, children)));
 }
+export const SelectorRadioGroup = forwardRef(BaseSelectorRadioGroup);
+SelectorRadioGroup.displayName = 'SelectorRadioGroup';

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

@@ -1,2 +1,4 @@
+import React from 'react';
+import { FocusHandle } from '../../hook/focus-manager-ref.hook.js';
 import { type SelectorProps } from './selector.types.js';
-export declare function Selector(props: SelectorProps): import("react/jsx-runtime").JSX.Element | undefined;
+export declare const Selector: React.ForwardRefExoticComponent<SelectorProps & React.RefAttributes<FocusHandle>>;

package/dist/components/selector/selector.component.js

@@ -1,17 +1,28 @@
 'use client';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { SelectorButtonGroup, SelectorCheckboxGroup, SelectorLinkGroup, SelectorRadioGroup } from './components/index.js';
-export function Selector(props) {
+function BaseSelector(props, ref) {
     if (props.type === 'checkbox') {
-        return React.createElement(SelectorCheckboxGroup, props);
+        return React.createElement(SelectorCheckboxGroup, {
+            ...props,
+            ref: ref
+        });
     }
     if (props.type === 'radio') {
-        return React.createElement(SelectorRadioGroup, props);
+        return React.createElement(SelectorRadioGroup, {
+            ...props,
+            ref: ref
+        });
     }
     if (props.type === 'button') {
-        return React.createElement(SelectorButtonGroup, props);
+        return React.createElement(SelectorButtonGroup, {
+            ...props,
+            ref: ref
+        });
     }
     if (props.type === 'link') {
         return React.createElement(SelectorLinkGroup, props);
     }
 }
+export const Selector = forwardRef(BaseSelector);
+Selector.displayName = 'Selector';

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

@@ -1,2 +1,8 @@
-import { type SwitchProps } from './switch.types.js';
-export declare function Switch({ className, label, size, block, checked, isDisabled, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare const Switch: React.ForwardRefExoticComponent<{
+    block?: import("../../types/responsive-variants.types.js").ResponsiveVariants<boolean | undefined>;
+    checked?: boolean;
+    className?: string;
+    label: string;
+    size?: import("../../types/responsive-variants.types.js").ResponsiveVariants<"small" | "xlarge" | "medium" | "large" | undefined>;
+} & Omit<import("react-aria").AriaCheckboxProps, "children"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,17 +1,17 @@
 'use client';
-import React, { useId, useRef } from 'react';
-import { VisuallyHidden, mergeProps, useCheckbox, useFocusRing } from 'react-aria';
+import React, { forwardRef, useId } from 'react';
+import { VisuallyHidden, mergeProps, useCheckbox, useFocusRing, useObjectRef } from 'react-aria';
 import { useToggleState } from 'react-stately';
 import { useBreakpoint } from '../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
 import { styles as switchStyles } from './switch.styles.js';
-export function Switch({ className, label, size = 'medium', block = false, checked = false, isDisabled, ...props }) {
+function BaseSwitch({ className, label, size = 'medium', block = false, checked = false, isDisabled, ...props }, forwardedRef) {
     const state = useToggleState({
         ...props,
         defaultSelected: checked
     });
     const labelId = useId();
-    const ref = useRef(null);
+    const ref = useObjectRef(forwardedRef);
     const { isSelected } = state;
     const { inputProps, labelProps } = useCheckbox({
         isDisabled,
@@ -45,3 +45,5 @@ export function Switch({ className, label, size = 'medium', block = false, check
         className: styles.switchDiv()
     }));
 }
+export const Switch = forwardRef(BaseSwitch);
+Switch.displayName = 'Switch';

package/dist/css/westpac-ui.css

@@ -1093,27 +1093,15 @@
   .w-\[116px\] {
     width: 116px;
   }
-  .w-\[120px\] {
-    width: 120px;
-  }
   .w-\[122px\] {
     width: 122px;
   }
   .w-\[135px\] {
     width: 135px;
   }
-  .w-\[140px\] {
-    width: 140px;
-  }
-  .w-\[145px\] {
-    width: 145px;
-  }
   .w-\[150px\] {
     width: 150px;
   }
-  .w-\[165px\] {
-    width: 165px;
-  }
   .w-\[170px\] {
     width: 170px;
   }
@@ -1339,6 +1327,18 @@
   .min-w-\[100vw\] {
     min-width: 100vw;
   }
+  .min-w-\[120px\] {
+    min-width: 120px;
+  }
+  .min-w-\[140px\] {
+    min-width: 140px;
+  }
+  .min-w-\[145px\] {
+    min-width: 145px;
+  }
+  .min-w-\[165px\] {
+    min-width: 165px;
+  }
   .min-w-\[200px\] {
     min-width: 200px;
   }

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

@@ -1093,27 +1093,15 @@
   .w-\[116px\] {
     width: 116px;
   }
-  .w-\[120px\] {
-    width: 120px;
-  }
   .w-\[122px\] {
     width: 122px;
   }
   .w-\[135px\] {
     width: 135px;
   }
-  .w-\[140px\] {
-    width: 140px;
-  }
-  .w-\[145px\] {
-    width: 145px;
-  }
   .w-\[150px\] {
     width: 150px;
   }
-  .w-\[165px\] {
-    width: 165px;
-  }
   .w-\[170px\] {
     width: 170px;
   }
@@ -1339,6 +1327,18 @@
   .min-w-\[100vw\] {
     min-width: 100vw;
   }
+  .min-w-\[120px\] {
+    min-width: 120px;
+  }
+  .min-w-\[140px\] {
+    min-width: 140px;
+  }
+  .min-w-\[145px\] {
+    min-width: 145px;
+  }
+  .min-w-\[165px\] {
+    min-width: 165px;
+  }
   .min-w-\[200px\] {
     min-width: 200px;
   }

package/dist/hook/focus-manager-ref.hook.d.ts

@@ -0,0 +1,29 @@
+import { ForwardedRef, RefObject } from 'react';
+/**
+ * Imperative handle exposed by group fields (`RadioGroup`, `CheckboxGroup`, `Selector`, `ButtonGroup`) whose
+ * focusable control is not a single element the group can point a DOM ref at.
+ *
+ * `focus()` moves focus to the group's first tabbable option at call time, which is what form libraries
+ * such as react-hook-form need (`field.ref` → `ref.focus()` on validation error).
+ */
+export type FocusHandle = {
+    focus: () => void;
+};
+export type UseFocusManagerRefOptions = {
+    /**
+     * Restricts which descendants of the wrapper may receive focus, e.g. only `<input>`s when the wrapper also
+     * contains other controls (such as a "show more" button).
+     */
+    accept?: (node: Element) => boolean;
+};
+/**
+ * Bridges a forwarded {@link FocusHandle} ref to a wrapper element. Returns the ref to attach to the
+ * wrapper; `focus()` on the forwarded handle focuses the first tabbable descendant via react-aria's
+ * focus manager. Resolution happens when `focus()` is called, so options that render, enable or
+ * disable after mount are handled, and roving-tabindex groups (radios) focus their tab stop
+ * (the selected option) rather than the first option. When no option is tabbable (e.g. a radio
+ * group whose `value` matches no radio, such as `''`), the first focusable option is used instead.
+ */
+export declare function useFocusManagerRef<T extends HTMLElement = HTMLDivElement>(forwardedRef: ForwardedRef<FocusHandle>, { accept }?: UseFocusManagerRefOptions): RefObject<T>;
+/** `accept` predicate for groups whose options are `<input>` elements. */
+export declare const acceptInputs: (node: Element) => boolean;

package/dist/hook/focus-manager-ref.hook.js

@@ -0,0 +1,23 @@
+'use client';
+import { createFocusManager } from '@react-aria/focus';
+import { useImperativeHandle, useRef } from 'react';
+export function useFocusManagerRef(forwardedRef, { accept } = {}) {
+    const wrapperRef = useRef(null);
+    useImperativeHandle(forwardedRef, ()=>({
+            focus: ()=>{
+                const focusManager = createFocusManager(wrapperRef);
+                if (!focusManager.focusFirst({
+                    tabbable: true,
+                    accept
+                })) {
+                    focusManager.focusFirst({
+                        accept
+                    });
+                }
+            }
+        }), [
+        accept
+    ]);
+    return wrapperRef;
+}
+export const acceptInputs = (node)=>node.tagName === 'INPUT';

package/dist/hook/index.d.ts

@@ -1,4 +1,5 @@
 export * from './dark-mode.hook.js';
 export * from './breakpoints.hook.js';
+export { type FocusHandle } from './focus-manager-ref.hook.js';
 export * from '../components/pagination/pagination.hooks.js';
 export * from './breakpoints.hook.js';