feat: support components (#375)

Author: zombieJ

src/Context.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import type { StepsProps } from './Steps';
+import type { ComponentType, StepsProps } from './Steps';
 
 export interface StepsContextProps {
   prefixCls: string;
   classNames: NonNullable<StepsProps['classNames']>;
   styles: NonNullable<StepsProps['styles']>;
+  ItemComponent: ComponentType;
 }
 
 export const StepsContext = React.createContext<StepsContextProps>(null!);

src/Step.tsx

@@ -6,6 +6,7 @@ import type { Status, StepItem, StepsProps } from './Steps';
 import Rail from './Rail';
 import { UnstableContext } from './UnstableContext';
 import StepIcon, { StepIconSemanticContext } from './StepIcon';
+import { StepsContext } from './Context';
 
 function hasContent<T>(value: T) {
   return value !== undefined && value !== null;
@@ -59,8 +60,9 @@ export default function Step(props: StepProps) {
 
   const itemCls = `${prefixCls}-item`;
 
-  // ==================== Internal Context ====================
+  // ======================== Contexts ========================
   const { railFollowPrevStatus } = React.useContext(UnstableContext);
+  const { ItemComponent } = React.useContext(StepsContext);
 
   // ========================== Data ==========================
   const {
@@ -233,7 +235,7 @@ export default function Step(props: StepProps) {
   );
 
   let stepNode: React.ReactNode = (
-    <li
+    <ItemComponent
       {...restItemProps}
       {...accessibilityProps}
       className={classString}
@@ -244,7 +246,7 @@ export default function Step(props: StepProps) {
       }}
     >
       {itemWrapperRender ? itemWrapperRender(wrapperNode) : wrapperNode}
-    </li>
+    </ItemComponent>
   );
 
   if (itemRender) {

src/Steps.tsx

@@ -32,6 +32,8 @@ export type ItemSemanticName =
   | 'icon'
   | 'rail';
 
+export type ComponentType = React.ComponentType<any> | string;
+
 export type StepItem = {
   /** @deprecated Please use `content` instead. */
   description?: React.ReactNode;
@@ -74,6 +76,13 @@ export interface StepsProps {
   orientation?: 'horizontal' | 'vertical';
   titlePlacement?: 'horizontal' | 'vertical';
 
+  // a11y
+  /** Internal usage of antd. Do not deps on this. */
+  components?: {
+    root?: ComponentType;
+    item?: ComponentType;
+  };
+
   // data
   status?: Status;
   current?: number;
@@ -107,6 +116,7 @@ export default function Steps(props: StepsProps) {
     // layout
     orientation,
     titlePlacement,
+    components,
 
     // data
     status = 'process',
@@ -167,14 +177,18 @@ export default function Steps(props: StepsProps) {
     }
   };
 
+  // =========================== components ===========================
+  const { root: RootComponent = 'div', item: ItemComponent = 'div' } = components || {};
+
   // ============================ contexts ============================
   const stepIconContext = React.useMemo<StepsContextProps>(
     () => ({
       prefixCls,
       classNames,
       styles,
+      ItemComponent,
     }),
-    [prefixCls, classNames, styles],
+    [prefixCls, classNames, styles, ItemComponent],
   );
 
   // ============================= render =============================
@@ -212,7 +226,7 @@ export default function Steps(props: StepsProps) {
   };
 
   return (
-    <ol
+    <RootComponent
       className={classString}
       style={{
         ...style,
@@ -223,6 +237,6 @@ export default function Steps(props: StepsProps) {
       <StepsContext.Provider value={stepIconContext}>
         {mergedItems.map<React.ReactNode>(renderStep)}
       </StepsContext.Provider>
-    </ol>
+    </RootComponent>
   );
 }