@westpac/ui 1.18.0 → 1.19.0

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

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components/index.js';
 export * from './types/index.js';
+export { type FocusHandle } from './hook/focus-manager-ref.hook.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -259,14 +259,15 @@
     "typescript": "^5.5.4",
     "vite": "^7.3.5",
     "vitest": "^3.2.6",
-    "@westpac/eslint-config": "~1.1.0",
-    "@westpac/style-config": "~1.0.2",
     "@westpac/test-config": "~0.0.0",
-    "@westpac/ts-config": "~0.0.0"
+    "@westpac/ts-config": "~0.0.0",
+    "@westpac/style-config": "~1.0.2",
+    "@westpac/eslint-config": "~1.1.0"
   },
   "dependencies": {
     "@internationalized/date": "^3.12.0",
     "@react-aria/accordion": "3.0.0-alpha.37",
+    "@react-aria/focus": "~3.21.5",
     "@react-aria/utils": "~3.29.1",
     "@react-spectrum/utils": "~3.11.5",
     "clsx": "^1.2.1",

package/src/components/button-group/button-group.component.tsx

@@ -1,9 +1,11 @@
 'use client';
 
-import React, { useCallback, useMemo } from 'react';
+import React, { ForwardedRef, forwardRef, useCallback, useMemo } from 'react';
 import { useToggleButtonGroup } from 'react-aria';
 import { useToggleGroupState } from 'react-stately';
 
+import { FocusHandle, useFocusManagerRef } from '../../hook/focus-manager-ref.hook.js';
+
 import { styles as buttonGroupStyles } from './button-group.styles.js';
 
 import type { ButtonGroupProps } from './button-group.types.js';
@@ -19,20 +21,26 @@ export const ToggleButtonGroupContext = React.createContext<
   | null
 >(null);
 
-export function ButtonGroup({
-  size,
-  look,
-  block,
-  children,
-  onSelect,
-  orientation = 'horizontal',
-  selectionMode,
-  selectedKeys,
-  defaultSelectedKeys,
-  onSelectionChange,
-  className,
-  ...props
-}: ButtonGroupProps) {
+function BaseButtonGroup(
+  {
+    size,
+    look,
+    block,
+    children,
+    onSelect,
+    orientation = 'horizontal',
+    selectionMode,
+    selectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+    className,
+    ...props
+  }: ButtonGroupProps,
+  // `ref.current.focus()` (e.g. react-hook-form focusing a field with a validation error) moves
+  // focus to the first tabbable button in the group.
+  forwardedRef: ForwardedRef<FocusHandle>,
+) {
+  const ref = useFocusManagerRef(forwardedRef);
   /**
    * Normalizes key sets depending on selection mode.
    */
@@ -71,7 +79,6 @@ export function ButtonGroup({
     selectedKeys: finalSelectedKeys,
   });
 
-  const ref = React.useRef<HTMLDivElement | null>(null);
   const { groupProps } = useToggleButtonGroup(
     {
       ...props,
@@ -95,3 +102,6 @@ export function ButtonGroup({
     </div>
   );
 }
+
+export const ButtonGroup = forwardRef(BaseButtonGroup);
+ButtonGroup.displayName = 'ButtonGroup';

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

@@ -1,11 +1,12 @@
 'use client';
 
-import React, { createContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import React, { ForwardedRef, 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 { FocusHandle, 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';
@@ -79,22 +80,28 @@ export const CheckboxGroupContext = createContext<CheckboxGroupContextState>({
     },
   },
 });
-export function CheckboxGroup({
-  className,
-  checkboxes,
-  label,
-  orientation = 'vertical',
-  showAmount = 0,
-  size = 'medium',
-  errorMessage,
-  hintMessage,
-  ...props
-}: CheckboxGroupProps) {
+function BaseCheckboxGroup(
+  {
+    className,
+    checkboxes,
+    label,
+    orientation = 'vertical',
+    showAmount = 0,
+    size = 'medium',
+    errorMessage,
+    hintMessage,
+    ...props
+  }: CheckboxGroupProps,
+  // `ref.current.focus()` (e.g. react-hook-form focusing a field with a validation error) moves focus
+  // to the first enabled checkbox.
+  ref: ForwardedRef<FocusHandle>,
+) {
+  const wrapperRef = useFocusManagerRef(ref, { accept: acceptInputs });
   const state = useCheckboxGroupState({ ...props, label });
   const { groupProps, labelProps, errorMessageProps, descriptionProps } = useCheckboxGroup({ ...props, label }, state);
   const { isFocusVisible, focusProps } = useFocusRing();
   const [hiddenOptions, setHiddenOptions] = useState<boolean>(showAmount > 0);
-  const firstNewCheckboxRef = useRef<HTMLLabelElement>(null);
+  const firstNewCheckboxRef = useRef<HTMLInputElement>(null);
   const revealAmount = checkboxes && checkboxes.length - showAmount;
   const breakpoint = useBreakpoint();
   const styles = checkboxStyles({ orientation: resolveResponsiveVariant(orientation, breakpoint), isFocusVisible });
@@ -118,7 +125,7 @@ export function CheckboxGroup({
       <Label {...labelProps}>{label}</Label>
       {hintMessage && <Hint {...descriptionProps}>{hintMessage}</Hint>}
       {errorMessage && state.isInvalid && <ErrorMessage {...errorMessageProps} message={errorMessage} />}
-      <div className={styles.itemWrapper()} id={panelId}>
+      <div className={styles.itemWrapper()} id={panelId} ref={wrapperRef}>
         <CheckboxGroupContext.Provider
           value={{
             state,
@@ -147,3 +154,6 @@ export function CheckboxGroup({
     </div>
   );
 }
+
+export const CheckboxGroup = forwardRef(BaseCheckboxGroup);
+CheckboxGroup.displayName = 'CheckboxGroup';

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

@@ -1,7 +1,7 @@
 'use client';
 
-import React, { Ref, forwardRef, useContext, useRef } from 'react';
-import { VisuallyHidden, mergeProps, useCheckboxGroupItem, useFocusRing } from 'react-aria';
+import React, { ForwardedRef, forwardRef, useContext } from 'react';
+import { VisuallyHidden, mergeProps, useCheckboxGroupItem, useFocusRing, useObjectRef } from 'react-aria';
 
 import { Icon } from '../../../icon/icon.component.js';
 import { IconProps } from '../../../icon/index.js';
@@ -33,22 +33,22 @@ function CheckIcon({ copyrightYear = '2025', size, ...props }: IconProps) {
 
 function BaseCheckbox(
   { className, hint, label, value, ...props }: CheckboxGroupCheckboxProps,
-  ref: Ref<HTMLLabelElement>,
+  ref: ForwardedRef<HTMLInputElement>,
 ) {
   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,
+    inputRef,
   );
   const { isFocusVisible, focusProps } = useFocusRing();
   const styles = checkboxItemStyles({ isDisabled, size, orientation, isFocusVisible });
 
   return (
-    <label className={styles.base({ className })} ref={ref} {...labelProps}>
+    <label className={styles.base({ className })} {...labelProps}>
       <VisuallyHidden elementType="span">
-        <input {...mergeProps(inputProps, focusProps)} ref={localRef} />
+        <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
       </VisuallyHidden>
       <span className={styles.checkbox()}>
         {isSelected && <CheckIcon className={styles.checkIcon()} size={size} color={isDisabled ? 'muted' : 'hero'} />}

package/src/components/date-picker/components/date-field/components/date-segment/date-segment.component.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import React, { useRef } from 'react';
-import { mergeProps, useDateSegment, useFocusRing } from 'react-aria';
+import React, { ForwardedRef, forwardRef } from 'react';
+import { mergeProps, useDateSegment, useFocusRing, useObjectRef } from 'react-aria';
 
 import { styles as dateSegmentStyles } from './date-segment.styles.js';
 import { DateSegmentProps } from './date-segment.types.js';
@@ -9,8 +9,11 @@ import { DateSegmentProps } from './date-segment.types.js';
 /**
  * @private
  */
-export function DateSegment({ segment, state, separator, ...props }: DateSegmentProps) {
-  const ref = useRef(null);
+function BaseDateSegment(
+  { segment, state, separator, ...props }: DateSegmentProps,
+  forwardedRef: ForwardedRef<HTMLSpanElement>,
+) {
+  const ref = useObjectRef(forwardedRef);
   const { focusProps, isFocusVisible } = useFocusRing();
   const { segmentProps } = useDateSegment(segment, state, ref);
   const styles = dateSegmentStyles({
@@ -23,3 +26,6 @@ export function DateSegment({ segment, state, separator, ...props }: DateSegment
     </span>
   );
 }
+
+export const DateSegment = forwardRef(BaseDateSegment);
+DateSegment.displayName = 'DateSegment';

package/src/components/date-picker/components/date-field/date-field.component.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { createCalendar } from '@internationalized/date';
-import React, { useRef } from 'react';
+import React, { ForwardedRef, forwardRef, useRef } from 'react';
 import { useDateField, useLocale } from 'react-aria';
 import { useDateFieldState } from 'react-stately';
 
@@ -11,7 +11,11 @@ import { type DateFieldProps } from './date-field.types.js';
 /**
  * @private
  */
-export function DateField({ separator, className, ...props }: DateFieldProps) {
+function BaseDateField(
+  { separator, className, ...props }: DateFieldProps,
+  // Attached to the first editable segment, the same element react-aria focuses for this field.
+  forwardedRef: ForwardedRef<HTMLSpanElement>,
+) {
   const { locale } = useLocale();
   const state = useDateFieldState({
     ...props,
@@ -21,12 +25,22 @@ export function DateField({ separator, className, ...props }: DateFieldProps) {
 
   const ref = useRef(null);
   const { fieldProps } = useDateField(props, state, ref);
+  const firstEditableIndex = state.segments.findIndex(segment => segment.isEditable);
 
   return (
     <div {...fieldProps} className={className} ref={ref}>
       {state.segments.map((segment, i) => (
-        <DateSegment separator={separator} key={i} segment={segment} state={state} />
+        <DateSegment
+          separator={separator}
+          key={i}
+          segment={segment}
+          state={state}
+          ref={i === firstEditableIndex ? forwardedRef : null}
+        />
       ))}
     </div>
   );
 }
+
+export const DateField = forwardRef(BaseDateField);
+DateField.displayName = 'DateField';