feat: Rac step list

packages/@adobe/react-spectrum/src/steplist/StepListItem.tsx

@@ -11,19 +11,16 @@
  */
 import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
 import {classNames} from '../utils/classNames';
-import {FocusRing} from 'react-aria/FocusRing';
 import intlMessages from '../../intl/steplist/*.json';
-import {mergeProps} from 'react-aria/mergeProps';
+import {Link} from 'react-aria-components/Link';
 import {Node} from '@react-types/shared';
 import React, {ReactNode, useContext, useRef} from 'react';
 import {StepListContext} from './StepListContext';
 import styles from '@adobe/spectrum-css-temp/components/steplist/vars.css';
-import {useHover} from 'react-aria/useHover';
 import {useId} from 'react-aria/useId';
 import {useLocale} from 'react-aria/I18nProvider';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useNumberFormatter} from 'react-aria/useNumberFormatter';
-import {useStepListItem} from 'react-aria/private/steplist/useStepListItem';
 import {VisuallyHidden} from 'react-aria/VisuallyHidden';
 
 interface SpectrumStepListItemProps<T> {
@@ -43,12 +40,9 @@ export function StepListItem<T>(props: SpectrumStepListItemProps<T>): ReactNode
   const isSelected = state.selectedKey === key;
   const isCompleted = state.isCompleted(key);
   const isItemDisabled = isDisabled || state.disabledKeys.has(key);
-  let {stepProps, stepStateProps} = useStepListItem({...props, key}, state, ref);
-
-  let {hoverProps, isHovered} = useHover({
-    ...props,
-    isDisabled: isItemDisabled || isSelected || props.isReadOnly
-  });
+  const isSelectable = state.isSelectable(key);
+  // Only selectable steps other than the current one are navigable links with an href.
+  const href = isSelectable && !isSelected ? (item.props as {href?: string})?.href : undefined;
 
   let stepStateText = '';
   const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/steplist');
@@ -68,52 +62,54 @@ export function StepListItem<T>(props: SpectrumStepListItemProps<T>): ReactNode
 
   return (
     <li className={classNames(styles, 'spectrum-Steplist-item')}>
-      <FocusRing within focusRingClass={classNames(styles, 'focus-ring')}>
-        <a
-          {...mergeProps(hoverProps, stepProps)}
-          aria-labelledby={`${markerId} ${stateId} ${labelId}`}
-          ref={ref}
-          className={classNames(styles, 'spectrum-Steplist-link', {
+      <Link
+        ref={ref}
+        href={href}
+        isDisabled={!isSelectable}
+        onPress={() => state.setSelectedKey(key)}
+        aria-current={isSelected ? 'step' : undefined}
+        aria-labelledby={`${markerId} ${stateId} ${labelId}`}
+        className={({isHovered, isFocusVisible}) =>
+          classNames(styles, 'spectrum-Steplist-link', {
             'is-selected': isSelected && !isItemDisabled,
             'is-disabled': isItemDisabled,
             'is-hovered': isHovered,
             'is-completed': isCompleted,
-            'is-selectable': state.isSelectable(key) && !isSelected
+            'is-selectable': isSelectable && !isSelected,
+            'focus-ring': isFocusVisible
+          })
+        }>
+        <VisuallyHidden id={stateId}>{stepStateText}</VisuallyHidden>
+        <div
+          id={labelId}
+          aria-hidden="true"
+          className={classNames(styles, 'spectrum-Steplist-label')}>
+          {item.rendered}
+        </div>
+        <div
+          className={classNames(styles, 'spectrum-Steplist-segment', {
+            'is-completed': isCompleted
           })}>
-          <VisuallyHidden {...stepStateProps} id={stateId}>
-            {stepStateText}
-          </VisuallyHidden>
-          <div
-            id={labelId}
-            aria-hidden="true"
-            className={classNames(styles, 'spectrum-Steplist-label')}>
-            {item.rendered}
-          </div>
-          <div
-            className={classNames(styles, 'spectrum-Steplist-segment', {
-              'is-completed': isCompleted
-            })}>
-            <svg
-              className={classNames(styles, 'spectrum-Steplist-segmentLine')}
-              xmlns="http://www.w3.org/2000/svg"
-              height="100%"
-              viewBox="0 0 2 8"
-              preserveAspectRatio="none">
-              <line x1="1" y1="0" x2="1" y2="8" vectorEffect="non-scaling-stroke" />
-            </svg>
-            <ChevronRightMedium
-              UNSAFE_className={classNames(styles, 'spectrum-Steplist-chevron', {
-                'is-reversed': direction === 'rtl'
-              })}
-            />
-          </div>
-          <div aria-hidden="true" className={classNames(styles, 'spectrum-Steplist-markerWrapper')}>
-            <div id={markerId} className={classNames(styles, 'spectrum-Steplist-marker')}>
-              {numberFormatter.format((item.index || 0) + 1)}
-            </div>
+          <svg
+            className={classNames(styles, 'spectrum-Steplist-segmentLine')}
+            xmlns="http://www.w3.org/2000/svg"
+            height="100%"
+            viewBox="0 0 2 8"
+            preserveAspectRatio="none">
+            <line x1="1" y1="0" x2="1" y2="8" vectorEffect="non-scaling-stroke" />
+          </svg>
+          <ChevronRightMedium
+            UNSAFE_className={classNames(styles, 'spectrum-Steplist-chevron', {
+              'is-reversed': direction === 'rtl'
+            })}
+          />
+        </div>
+        <div aria-hidden="true" className={classNames(styles, 'spectrum-Steplist-markerWrapper')}>
+          <div id={markerId} className={classNames(styles, 'spectrum-Steplist-marker')}>
+            {numberFormatter.format((item.index || 0) + 1)}
           </div>
-        </a>
-      </FocusRing>
+        </div>
+      </Link>
     </li>
   );
 }

packages/@react-stately/steplist/src/index.ts

@@ -12,4 +12,8 @@
 
 export {useStepListState} from 'react-stately/private/steplist/useStepListState';
 
-export type {StepListProps, StepListState} from 'react-stately/private/steplist/useStepListState';
+export type {
+  StepListProps,
+  StepListStateOptions,
+  StepListState
+} from 'react-stately/private/steplist/useStepListState';

packages/react-aria-components/exports/StepList.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Mark as a client only package. This will cause a build time error if you try
+// to import it from a React Server Component in a framework like Next.js.
+import 'client-only';
+
+export {StepList, StepListContext, StepListStateContext, StepListItem} from '../src/StepList';
+export type {StepListProps, StepListItemProps, StepListItemRenderProps} from '../src/StepList';
+export type {Key} from '@react-types/shared';

packages/react-aria-components/exports/index.ts

@@ -195,6 +195,7 @@ export {
   SliderFillContext,
   SliderStateContext
 } from '../src/Slider';
+export {StepList, StepListContext, StepListStateContext, StepListItem} from '../src/StepList';
 export {Switch, SwitchField, SwitchButton, SwitchContext, SwitchFieldContext} from '../src/Switch';
 export {
   TableLoadMoreItem,
@@ -639,6 +640,7 @@ export type {RootMenuTriggerState} from 'react-stately/useMenuTriggerState';
 export type {SearchFieldState} from 'react-stately/useSearchFieldState';
 export type {SelectState} from 'react-stately/useSelectState';
 export type {SliderState} from 'react-stately/useSliderState';
+export type {StepListProps, StepListItemProps, StepListItemRenderProps} from '../src/StepList';
 export type {TableState} from 'react-stately/useTableState';
 export type {TabListState} from 'react-stately/useTabListState';
 export type {TimeFieldState} from 'react-stately/useTimeFieldState';

packages/react-aria-components/intl/en-US.json

@@ -2,5 +2,8 @@
   "selectPlaceholder": "Select an item",
   "tableResizer": "Resizer",
   "dropzoneLabel": "DropZone",
-  "colorSwatchPicker": "Color swatches"
+  "colorSwatchPicker": "Color swatches",
+  "stepListItemCurrent": "Current",
+  "stepListItemCompleted": "Completed",
+  "stepListItemNotCompleted": "Not completed"
 }