fixup! Refactor(web-react): Move away from the defaultProps

packages/web-react/src/components/Field/HelperText.tsx

@@ -1,24 +1,22 @@
 import React, { ElementType, useEffect } from 'react';
-import { RegisterType } from './useAriaIds';
+import { HelperTextProps } from './types';
 
-interface Props {
-  helperText: React.ReactNode;
-  className?: string;
-  elementType?: ElementType;
-  id?: string;
-  registerAria?: RegisterType;
-}
-
-const defaultProps = {
+const defaultProps: Partial<HelperTextProps> = {
   className: undefined,
   elementType: 'div',
   id: undefined,
   registerAria: undefined,
 };
 
-const HelperText = (props: Props) => {
+const HelperText = <T extends ElementType = 'div'>(props: HelperTextProps<T>) => {
   const propsWithDefaults = { ...defaultProps, ...props };
-  const { helperText, className, elementType: ElementTag = 'div', id, registerAria } = propsWithDefaults;
+  const {
+    helperText,
+    className,
+    elementType: ElementTag = defaultProps.elementType as ElementType,
+    id,
+    registerAria,
+  } = propsWithDefaults;
 
   useEffect(() => {
     registerAria?.({ add: id });

packages/web-react/src/components/Field/ValidationText.tsx

@@ -1,13 +1,5 @@
 import React, { ElementType, useEffect } from 'react';
-import { ValidationTextProp } from '../../types';
-import { RegisterType } from './useAriaIds';
-
-export interface ValidationTextProps extends ValidationTextProp {
-  className?: string;
-  elementType?: ElementType;
-  id?: string;
-  registerAria?: RegisterType;
-}
+import { ValidationTextProps } from './types';
 
 const defaultProps = {
   className: undefined,
@@ -18,7 +10,13 @@ const defaultProps = {
 
 export const ValidationText = (props: ValidationTextProps) => {
   const propsWithDefaults = { ...defaultProps, ...props };
-  const { className, validationText, elementType: ElementTag = 'div', id, registerAria } = propsWithDefaults;
+  const {
+    className,
+    validationText,
+    elementType: ElementTag = defaultProps.elementType as ElementType,
+    id,
+    registerAria,
+  } = propsWithDefaults;
 
   useEffect(() => {
     registerAria?.({ add: id });

packages/web-react/src/components/Field/types.ts

@@ -0,0 +1,24 @@
+import { ElementType, JSXElementConstructor, ReactNode } from 'react';
+import { ValidationTextProp } from '../../types';
+import { RegisterType } from './useAriaIds';
+
+export interface FieldElementTypeProps<T extends ElementType = 'div'> {
+  /**
+   * The HTML element or React element used to render the pill, e.g. 'div', 'span'.
+   *
+   * @default 'div'
+   */
+  elementType?: T | JSXElementConstructor<unknown>;
+}
+
+export interface FieldProps<T extends ElementType = 'div'> extends FieldElementTypeProps<T> {
+  className?: string;
+  id?: string;
+  registerAria?: RegisterType;
+}
+
+export interface HelperTextProps<T extends ElementType = 'div'> extends FieldProps<T> {
+  helperText: ReactNode;
+}
+
+export interface ValidationTextProps<T extends ElementType = 'div'> extends FieldProps<T>, ValidationTextProp {}