@westpac/ui 1.18.0 → 1.19.0

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FocusHandle } from '../../hook/focus-manager-ref.hook.js';
 import type { ButtonGroupProps } from './button-group.types.js';
 import type { ToggleGroupState } from 'react-stately';
 export declare const ToggleButtonGroupContext: React.Context<(ToggleGroupState & {
@@ -7,4 +8,4 @@ export declare const ToggleButtonGroupContext: React.Context<(ToggleGroupState &
     block: ButtonGroupProps["block"];
     orientation: ButtonGroupProps["orientation"];
 }) | null>;
-export declare function ButtonGroup({ size, look, block, children, onSelect, orientation, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, className, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<FocusHandle>>;

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

@@ -1,10 +1,12 @@
 'use client';
-import React, { useCallback, useMemo } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import { useToggleButtonGroup } from 'react-aria';
 import { useToggleGroupState } from 'react-stately';
+import { useFocusManagerRef } from '../../hook/focus-manager-ref.hook.js';
 import { styles as buttonGroupStyles } from './button-group.styles.js';
 export const ToggleButtonGroupContext = React.createContext(null);
-export function ButtonGroup({ size, look, block, children, onSelect, orientation = 'horizontal', selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, className, ...props }) {
+function BaseButtonGroup({ size, look, block, children, onSelect, orientation = 'horizontal', selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, className, ...props }, forwardedRef) {
+    const ref = useFocusManagerRef(forwardedRef);
     const normalizeKeys = useCallback((keys)=>{
         if (keys === undefined) return undefined;
         if (selectionMode === 'multiple') return new Set(keys);
@@ -42,7 +44,6 @@ export function ButtonGroup({ size, look, block, children, onSelect, orientation
         defaultSelectedKeys: finalDefaultSelectedKeys,
         selectedKeys: finalSelectedKeys
     });
-    const ref = React.useRef(null);
     const { groupProps } = useToggleButtonGroup({
         ...props,
         orientation,
@@ -71,3 +72,5 @@ export function ButtonGroup({ size, look, block, children, onSelect, orientation
         }
     }, children));
 }
+export const ButtonGroup = forwardRef(BaseButtonGroup);
+ButtonGroup.displayName = 'ButtonGroup';

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

@@ -1,4 +1,13 @@
 import React from 'react';
-import { type CheckboxGroupContextState, type CheckboxGroupProps } from './checkbox-group.types.js';
+import { FocusHandle } from '../../hook/focus-manager-ref.hook.js';
+import { type CheckboxGroupContextState } from './checkbox-group.types.js';
 export declare const CheckboxGroupContext: React.Context<CheckboxGroupContextState>;
-export declare function CheckboxGroup({ className, checkboxes, label, orientation, showAmount, size, errorMessage, hintMessage, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<{
+    checkboxes: import("./components/checkbox-group-checkbox/checkbox-group-checkbox.types.js").CheckboxGroupCheckboxProps[];
+    className?: string;
+    errorMessage?: string | string[];
+    hintMessage?: import("../index.js").HintProps["children"];
+    orientation?: import("../../types/responsive-variants.types.js").ResponsiveVariants<"horizontal" | "vertical" | undefined>;
+    showAmount?: number;
+    size?: import("../../types/responsive-variants.types.js").ResponsiveVariants<"medium" | "large">;
+} & Omit<import("react-aria").AriaCheckboxGroupProps, "errorMessage" | "description"> & React.RefAttributes<FocusHandle>>;

package/dist/components/checkbox-group/checkbox-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 { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } 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';
@@ -73,7 +74,10 @@ export const CheckboxGroupContext = createContext({
         }
     }
 });
-export function CheckboxGroup({ className, checkboxes, label, orientation = 'vertical', showAmount = 0, size = 'medium', errorMessage, hintMessage, ...props }) {
+function BaseCheckboxGroup({ className, checkboxes, label, orientation = 'vertical', showAmount = 0, size = 'medium', errorMessage, hintMessage, ...props }, ref) {
+    const wrapperRef = useFocusManagerRef(ref, {
+        accept: acceptInputs
+    });
     const state = useCheckboxGroupState({
         ...props,
         label
@@ -123,7 +127,8 @@ export function CheckboxGroup({ className, checkboxes, label, orientation = 'ver
         message: errorMessage
     }), React.createElement("div", {
         className: styles.itemWrapper(),
-        id: panelId
+        id: panelId,
+        ref: wrapperRef
     }, React.createElement(CheckboxGroupContext.Provider, {
         value: {
             state,
@@ -145,3 +150,5 @@ export function CheckboxGroup({ className, checkboxes, label, orientation = 'ver
         className: styles.buttonText()
     }, `Show ${revealAmount} more ${revealAmount === 1 ? 'item' : 'items'}`))));
 }
+export const CheckboxGroup = forwardRef(BaseCheckboxGroup);
+CheckboxGroup.displayName = 'CheckboxGroup';

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

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

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

@@ -1,6 +1,6 @@
 'use client';
-import React, { forwardRef, useContext, useRef } from 'react';
-import { VisuallyHidden, mergeProps, useCheckboxGroupItem, useFocusRing } from 'react-aria';
+import React, { forwardRef, useContext } from 'react';
+import { VisuallyHidden, mergeProps, useCheckboxGroupItem, useFocusRing, useObjectRef } 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';
@@ -20,12 +20,12 @@ 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 inputRef = useObjectRef(ref);
     const { inputProps, labelProps, isDisabled, isSelected } = useCheckboxGroupItem({
         ...props,
         value,
         children: label
-    }, state, localRef);
+    }, state, inputRef);
     const { isFocusVisible, focusProps } = useFocusRing();
     const styles = checkboxItemStyles({
         isDisabled,
@@ -37,13 +37,12 @@ function BaseCheckbox({ className, hint, label, value, ...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.checkbox()
     }, isSelected && React.createElement(CheckIcon, {

package/dist/components/date-picker/components/date-field/components/date-segment/date-segment.component.d.ts

@@ -1,5 +1,6 @@
-import { DateSegmentProps } from './date-segment.types.js';
-/**
- * @private
- */
-export declare function DateSegment({ segment, state, separator, ...props }: DateSegmentProps): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare const DateSegment: React.ForwardRefExoticComponent<{
+    segment: import("react-stately").DateSegment;
+    separator?: string;
+    state: import("react-stately").DateFieldState;
+} & React.HTMLAttributes<Element> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,9 +1,9 @@
 'use client';
-import React, { useRef } from 'react';
-import { mergeProps, useDateSegment, useFocusRing } from 'react-aria';
+import React, { forwardRef } from 'react';
+import { mergeProps, useDateSegment, useFocusRing, useObjectRef } from 'react-aria';
 import { styles as dateSegmentStyles } from './date-segment.styles.js';
-export function DateSegment({ segment, state, separator, ...props }) {
-    const ref = useRef(null);
+function BaseDateSegment({ segment, state, separator, ...props }, forwardedRef) {
+    const ref = useObjectRef(forwardedRef);
     const { focusProps, isFocusVisible } = useFocusRing();
     const { segmentProps } = useDateSegment(segment, state, ref);
     const styles = dateSegmentStyles({
@@ -17,3 +17,5 @@ export function DateSegment({ segment, state, separator, ...props }) {
         className: styles
     }, segment.type === 'literal' ? separator || segment.text : segment.text);
 }
+export const DateSegment = forwardRef(BaseDateSegment);
+DateSegment.displayName = 'DateSegment';

package/dist/components/date-picker/components/date-field/date-field.component.d.ts

@@ -1,5 +1,5 @@
-import { type DateFieldProps } from './date-field.types.js';
-/**
- * @private
- */
-export declare function DateField({ separator, className, ...props }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare const DateField: React.ForwardRefExoticComponent<import("react-aria").AriaDateFieldProps<import("react-aria").DateValue> & {
+    separator?: string;
+    className?: string;
+} & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,10 +1,10 @@
 'use client';
 import { createCalendar } from '@internationalized/date';
-import React, { useRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import { useDateField, useLocale } from 'react-aria';
 import { useDateFieldState } from 'react-stately';
 import { DateSegment } from './components/date-segment/date-segment.component.js';
-export function DateField({ separator, className, ...props }) {
+function BaseDateField({ separator, className, ...props }, forwardedRef) {
     const { locale } = useLocale();
     const state = useDateFieldState({
         ...props,
@@ -13,6 +13,7 @@ export function DateField({ separator, className, ...props }) {
     });
     const ref = useRef(null);
     const { fieldProps } = useDateField(props, state, ref);
+    const firstEditableIndex = state.segments.findIndex((segment)=>segment.isEditable);
     return React.createElement("div", {
         ...fieldProps,
         className: className,
@@ -21,6 +22,9 @@ export function DateField({ separator, className, ...props }) {
             separator: separator,
             key: i,
             segment: segment,
-            state: state
+            state: state,
+            ref: i === firstEditableIndex ? forwardedRef : null
         })));
 }
+export const DateField = forwardRef(BaseDateField);
+DateField.displayName = 'DateField';

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

@@ -1,2 +1,19 @@
-import { type DatePickerProps } from './date-picker.types.js';
-export declare function DatePicker({ size, className, bottomSheetView, block, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, portalContainer, placement, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+import { Breakpoint } from '@westpac/style-config/constants';
+import React from 'react';
+export declare const DatePicker: React.ForwardRefExoticComponent<Omit<import("react-stately").DatePickerStateOptions<import("react-aria").DateValue>, "onBlur"> & Omit<{
+    size?: "small" | "xlarge" | "medium" | "large" | undefined;
+    block?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    isReadOnly?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+}, "size" | "block"> & Omit<React.HTMLAttributes<HTMLDivElement>, "onBlur" | "invalid" | "block"> & {
+    bottomSheetView?: boolean | Partial<Record<Breakpoint | "initial", boolean>>;
+    disableDaysOfWeek?: number[];
+    disableWeekends?: boolean;
+    separator?: string;
+    onBlur?: ((event: React.FocusEvent<Element, Element>, date?: import("react-aria").DateValue | undefined) => void) | undefined;
+    placement?: "top left" | "top right" | "bottom left" | "bottom right";
+    portalContainer?: Element;
+    size?: import("../../types/responsive-variants.types.js").ResponsiveVariants<"small" | "xlarge" | "medium" | "large" | undefined>;
+    block?: import("../../types/responsive-variants.types.js").ResponsiveVariants<boolean | undefined>;
+} & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,6 +1,6 @@
 'use client';
 import { getDayOfWeek, isWeekend } from '@internationalized/date';
-import React, { useMemo, useRef } from 'react';
+import React, { forwardRef, useMemo, useRef } from 'react';
 import { useButton, useDatePicker, useLocale } from 'react-aria';
 import { useDatePickerState } from 'react-stately';
 import { useBreakpoint } from '../../hook/breakpoints.hook.js';
@@ -20,10 +20,10 @@ const BREAKPOINTS_DECRECENT = [
     'xsl',
     'initial'
 ];
-export function DatePicker({ size = 'medium', className, bottomSheetView = {
+function BaseDatePicker({ size = 'medium', className, bottomSheetView = {
     initial: true,
     xsl: false
-}, block, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, portalContainer, placement = 'bottom left', ...props }) {
+}, block, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, portalContainer, placement = 'bottom left', ...props }, forwardedRef) {
     const { locale } = useLocale();
     const enhancedIsDateUnavailable = useMemo(()=>{
         return disableDaysOfWeek || disableWeekends ? (date)=>{
@@ -86,7 +86,9 @@ export function DatePicker({ size = 'medium', className, bottomSheetView = {
     const buttonRef = useRef(null);
     const { buttonProps: newButtonProps } = useButton(buttonProps, buttonRef);
     const brandContainer = useMemo(()=>{
-        return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || undefined;
+        if (typeof window !== 'undefined') {
+            return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || undefined;
+        }
     }, []);
     return React.createElement(React.Fragment, null, props.label && React.createElement("div", labelProps, props.label), React.createElement("div", {
         ...props,
@@ -106,7 +108,8 @@ export function DatePicker({ size = 'medium', className, bottomSheetView = {
     }, React.createElement(DateField, {
         className: styles.dateField(),
         separator: separator,
-        ...fieldProps
+        ...fieldProps,
+        ref: forwardedRef
     }), React.createElement(Button, {
         look: "faint",
         className: styles.button(),
@@ -126,3 +129,5 @@ export function DatePicker({ size = 'medium', className, bottomSheetView = {
         firstDayOfWeek: props.firstDayOfWeek
     }))));
 }
+export const DatePicker = forwardRef(BaseDatePicker);
+DatePicker.displayName = 'DatePicker';

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

@@ -2,26 +2,26 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         input: 'form-control flex items-center border-0',
-        dateField: 'rounded rounded-r-none border border-r-0 border-border-muted-strong',
+        dateField: 'rounded rounded-r-none border border-r-0 border-border-muted-strong whitespace-nowrap',
         button: 'flex items-center justify-center rounded-l-none border-border-muted-strong bg-surface-muted-pale'
     },
     variants: {
         size: {
             small: {
                 input: 'max-h-5',
-                dateField: 'h-5 w-[120px] form-control-small'
+                dateField: 'h-5 min-w-[120px] form-control-small'
             },
             medium: {
                 input: 'max-h-6',
-                dateField: 'h-6 w-[140px] form-control-medium'
+                dateField: 'h-6 min-w-[140px] form-control-medium'
             },
             large: {
                 input: 'max-h-7',
-                dateField: 'h-7 w-[145px] form-control-large'
+                dateField: 'h-7 min-w-[145px] form-control-large'
             },
             xlarge: {
                 input: 'max-h-8',
-                dateField: 'h-8 w-[165px] form-control-xlarge'
+                dateField: 'h-8 min-w-[165px] form-control-xlarge'
             }
         },
         block: {

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

@@ -1,4 +1,5 @@
 'use client';
+import { focusWithoutScrolling } from '@react-aria/utils';
 import React, { useCallback, useContext, useRef } from 'react';
 import { mergeProps, useFocusRing, useOption } from 'react-aria';
 import { TickIcon } from '../../../../../icon/index.js';
@@ -21,13 +22,8 @@ export function MultiSelectOption({ item }) {
     const handleButtonKeyDown = useCallback((e)=>{
         if (e.key === 'ArrowUp' && item.index === 0) {
             e.preventDefault();
-            if (selectAllRef.current) {
-                var _selectAllRef_current;
-                (_selectAllRef_current = selectAllRef.current) === null || _selectAllRef_current === void 0 ? void 0 : _selectAllRef_current.focus();
-            } else {
-                var _inputRef_current;
-                (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
-            }
+            const target = selectAllRef.current || inputRef.current;
+            if (target) focusWithoutScrolling(target);
         }
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();

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>>;