@purpurds/text-field 7.6.1 → 7.7.0

package/src/text-field.tsx

@@ -1,6 +1,4 @@
 import React, {
-  type ComponentPropsWithoutRef,
-  type ForwardedRef,
   forwardRef,
   type HTMLInputTypeAttribute,
   isValidElement,
@@ -9,6 +7,7 @@ import React, {
   useId,
 } from "react";
 import { Button } from "@purpurds/button";
+import type { BaseProps } from "@purpurds/common-types";
 import { FieldErrorText } from "@purpurds/field-error-text";
 import { FieldHelperText } from "@purpurds/field-helper-text";
 import { IconCheckCircleFilled } from "@purpurds/icon/check-circle-filled";
@@ -21,7 +20,6 @@ import styles from "./text-field.module.scss";
 import { useMutableRefObject } from "./utils";
 
 type TextFieldBaseProps = {
-  ["data-testid"]?: string;
   /**
    * Use to display e.g. a button before the text field.
    *
@@ -103,173 +101,171 @@ type TextFieldClearProps =
       onClear?: never;
     };
 
-export type TextFieldProps = ComponentPropsWithoutRef<"input"> &
+export type TextFieldProps = Omit<BaseProps<"input">, "type"> &
   TextFieldBaseProps &
   TextFieldClearProps;
 
 const cx = c.bind(styles);
 const rootClassName = "purpur-text-field";
 
-const TextFieldComponent = (
-  {
-    ["data-testid"]: dataTestId,
-    className,
-    clearButtonAriaLabel,
-    beforeField,
-    afterField,
-    endAdornment,
-    errorText,
-    helperText,
-    hideRequiredAsterisk = false,
-    label,
-    loading = false,
-    onClear,
-    startAdornment,
-    valid = false,
-    ...inputProps
-  }: TextFieldProps,
-  ref: ForwardedRef<HTMLInputElement>
-) => {
-  const randomId = useId();
-  const inputId = inputProps.id ?? randomId;
-  const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);
-  const isValid = valid && !errorText;
-  const helperTextId = helperText ? `${inputId}-helper-text` : undefined;
-  const startAdornments: ReactNode[] = [startAdornment].filter((adornment) => !!adornment);
-  const hasValue =
-    typeof inputProps.value === "number"
-      ? inputProps.value !== undefined
-      : inputProps.value?.length;
-  const hasClearButton =
-    hasValue &&
-    !inputProps.disabled &&
-    !inputProps.readOnly &&
-    !loading &&
-    onClear &&
-    clearButtonAriaLabel;
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  (
+    {
+      ["data-testid"]: dataTestId,
+      className,
+      clearButtonAriaLabel,
+      beforeField,
+      afterField,
+      endAdornment,
+      errorText,
+      helperText,
+      hideRequiredAsterisk = false,
+      label,
+      loading = false,
+      onClear,
+      startAdornment,
+      valid = false,
+      ...inputProps
+    },
+    ref
+  ) => {
+    const randomId = useId();
+    const inputId = inputProps.id ?? randomId;
+    const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);
+    const isValid = valid && !errorText;
+    const helperTextId = helperText ? `${inputId}-helper-text` : undefined;
+    const startAdornments: ReactNode[] = [startAdornment].filter((adornment) => !!adornment);
+    const hasValue =
+      typeof inputProps.value === "number"
+        ? inputProps.value !== undefined
+        : inputProps.value?.length;
+    const hasClearButton =
+      hasValue &&
+      !inputProps.disabled &&
+      !inputProps.readOnly &&
+      !loading &&
+      onClear &&
+      clearButtonAriaLabel;
 
-  const internalRef = useMutableRefObject<HTMLInputElement | null>(null);
-  const setRef = (node: HTMLInputElement | null) => {
-    internalRef.current = node;
-    if (typeof ref === "function") {
-      ref(node);
-    } else if (ref) {
-      ref.current = node;
-    }
-  };
-  const handleClear = () => {
-    onClear?.();
-    internalRef.current?.focus();
-  };
+    const internalRef = useMutableRefObject<HTMLInputElement | null>(null);
+    const setRef = (node: HTMLInputElement | null) => {
+      internalRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+    const handleClear = () => {
+      onClear?.();
+      internalRef.current?.focus();
+    };
 
-  const localEndAdornments: ReactNode[] = [
-    loading && (
-      <Spinner
-        key="spinner"
-        disabled={inputProps.disabled}
-        size="xs"
-        data-testid={getTestId("spinner")}
-      />
-    ),
-    hasClearButton && (
-      <Button
-        key="clear-button"
-        variant="tertiary-purple"
-        onClick={handleClear}
-        iconOnly
-        aria-label={clearButtonAriaLabel ?? ""}
-        data-testid={getTestId("clear-button")}
-        tabIndex={-1}
-      >
-        <IconClose size="xs" />
-      </Button>
-    ),
-    isValid && (
-      <IconCheckCircleFilled
-        key="valid-icon"
-        data-testid={getTestId("valid-icon")}
-        className={cx(`${rootClassName}__valid-icon`)}
-      />
-    ),
-  ].filter((adornment) => !!adornment);
+    const localEndAdornments: ReactNode[] = [
+      loading && (
+        <Spinner
+          key="spinner"
+          disabled={inputProps.disabled}
+          size="xs"
+          data-testid={getTestId("spinner")}
+        />
+      ),
+      hasClearButton && (
+        <Button
+          key="clear-button"
+          variant="tertiary-purple"
+          onClick={handleClear}
+          iconOnly
+          aria-label={clearButtonAriaLabel ?? ""}
+          data-testid={getTestId("clear-button")}
+          tabIndex={-1}
+        >
+          <IconClose size="xs" />
+        </Button>
+      ),
+      isValid && (
+        <IconCheckCircleFilled
+          key="valid-icon"
+          data-testid={getTestId("valid-icon")}
+          className={cx(`${rootClassName}__valid-icon`)}
+        />
+      ),
+    ].filter((adornment) => !!adornment);
 
-  const inputContainerClassnames = cx([
-    `${rootClassName}__input-container`,
-    {
+    const inputContainerClassnames = cx(`${rootClassName}__input-container`, {
       [`${rootClassName}__input-container--start-adornment`]: startAdornments.length,
       [`${rootClassName}__input-container--end-adornment`]:
         localEndAdornments.length || endAdornment,
       [`${rootClassName}__input-container--disabled`]: inputProps.disabled,
       [`${rootClassName}__input-container--has-clear-button`]: hasClearButton,
       [`${rootClassName}__input-container--readonly`]: inputProps.readOnly && !inputProps.disabled,
-    },
-  ]);
+    });
 
-  return (
-    <div className={cx(className, rootClassName)}>
-      {label && (
-        <Label
-          htmlFor={inputId}
-          className={cx(`${rootClassName}__label`)}
-          data-testid={getTestId("label")}
-          disabled={inputProps.disabled}
-        >
-          {inputProps.required && !hideRequiredAsterisk && <span aria-hidden>*</span>}
-          {label}
-        </Label>
-      )}
-      <div className={cx(`${rootClassName}__field-row`)}>
-        {!!beforeField && beforeField}
-        <div className={inputContainerClassnames}>
-          {!!startAdornments.length && (
-            <div
-              data-testid={getTestId("start-adornments")}
-              className={cx(`${rootClassName}__adornment-container`)}
-            >
-              {startAdornments}
-            </div>
-          )}
-          <input
-            {...inputProps}
-            id={inputId}
-            ref={setRef}
-            data-testid={getTestId("input")}
-            aria-describedby={inputProps["aria-describedby"] || helperTextId}
-            aria-invalid={inputProps["aria-invalid"] || !!errorText}
-            className={cx([
-              `${rootClassName}__input`,
-              {
-                [`${rootClassName}__input--valid`]: isValid,
-                [`${rootClassName}__input--error`]: !!errorText,
-              },
-            ])}
-          />
-          <div className={cx(`${rootClassName}__frame`)} />
-          {(!!localEndAdornments.length || endAdornment) && (
-            <div
-              data-testid={getTestId("end-adornments")}
-              className={cx(`${rootClassName}__adornment-container`)}
-            >
-              {localEndAdornments}
-              {endAdornment}
-            </div>
-          )}
+    return (
+      <div className={cx(className, rootClassName)}>
+        {label && (
+          <Label
+            htmlFor={inputId}
+            className={cx(`${rootClassName}__label`)}
+            data-testid={getTestId("label")}
+            disabled={inputProps.disabled}
+          >
+            {inputProps.required && !hideRequiredAsterisk && <span aria-hidden>*</span>}
+            {label}
+          </Label>
+        )}
+        <div className={cx(`${rootClassName}__field-row`)}>
+          {!!beforeField && beforeField}
+          <div className={inputContainerClassnames}>
+            {!!startAdornments.length && (
+              <div
+                data-testid={getTestId("start-adornments")}
+                className={cx(`${rootClassName}__adornment-container`)}
+              >
+                {startAdornments}
+              </div>
+            )}
+            <input
+              {...inputProps}
+              id={inputId}
+              ref={setRef}
+              data-testid={getTestId("input")}
+              aria-describedby={inputProps["aria-describedby"] || helperTextId}
+              aria-invalid={inputProps["aria-invalid"] || !!errorText}
+              className={cx([
+                `${rootClassName}__input`,
+                {
+                  [`${rootClassName}__input--valid`]: isValid,
+                  [`${rootClassName}__input--error`]: !!errorText,
+                },
+              ])}
+            />
+            <div className={cx(`${rootClassName}__frame`)} />
+            {(!!localEndAdornments.length || endAdornment) && (
+              <div
+                data-testid={getTestId("end-adornments")}
+                className={cx(`${rootClassName}__adornment-container`)}
+              >
+                {localEndAdornments}
+                {endAdornment}
+              </div>
+            )}
+          </div>
+          {!!afterField && afterField}
         </div>
-        {!!afterField && afterField}
+        {helperTextId && (
+          <FieldHelperText data-testid={getTestId("helper-text")} id={helperTextId}>
+            {helperText}
+          </FieldHelperText>
+        )}
+        {errorText && (
+          <FieldErrorText data-testid={getTestId("error-text")}>{errorText}</FieldErrorText>
+        )}
       </div>
-      {helperTextId && (
-        <FieldHelperText data-testid={getTestId("helper-text")} id={helperTextId}>
-          {helperText}
-        </FieldHelperText>
-      )}
-      {errorText && (
-        <FieldErrorText data-testid={getTestId("error-text")}>{errorText}</FieldErrorText>
-      )}
-    </div>
-  );
-};
+    );
+  }
+);
 
-export const TextField = forwardRef(TextFieldComponent);
 TextField.displayName = "TextField";
 
 export const isTextField = (child?: ReactNode): child is ReactElement<TextFieldProps> =>