Simplify the Input element type (#2306)

.changeset/flat-steaks-itch.md

@@ -0,0 +1,5 @@
+---
+'@sumup-oss/circuit-ui': major
+---
+
+Deprecated the `InputElement` interface and narrowed the Input's element type to `HTMLInputElement` and the TextArea's element type to `HTMLTextAreaElement`. This affects `ref`s and event handlers.

packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx

@@ -17,7 +17,6 @@ import { describe, expect, it } from 'vitest';
 import { createRef, useState, type ChangeEvent } from 'react';
 
 import { render, userEvent, axe, screen } from '../../util/test-utils.js';
-import type { InputElement } from '../Input/index.js';
 
 import { CurrencyInput, type CurrencyInputProps } from './CurrencyInput.js';
 
@@ -30,7 +29,7 @@ const defaultProps = {
 
 describe('CurrencyInput', () => {
   it('should forward a ref', () => {
-    const ref = createRef<InputElement>();
+    const ref = createRef<HTMLInputElement>();
     render(<CurrencyInput {...defaultProps} ref={ref} />);
     const input: HTMLInputElement = screen.getByRole('textbox');
     expect(ref.current).toBe(input);

packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx

@@ -20,7 +20,7 @@ import { resolveCurrencyFormat } from '@sumup-oss/intl';
 import { NumericFormat, type NumericFormatProps } from 'react-number-format';
 
 import { clsx } from '../../styles/clsx.js';
-import { Input, type InputElement, type InputProps } from '../Input/index.js';
+import { Input, type InputProps } from '../Input/index.js';
 
 import { formatPlaceholder } from './CurrencyInputService.js';
 import classes from './CurrencyInput.module.css';
@@ -73,7 +73,7 @@ const DUMMY_DELIMITER = '?';
  * the symbol according to the locale. The corresponding service exports a
  * parser for formatting values automatically.
  */
-export const CurrencyInput = forwardRef<InputElement, CurrencyInputProps>(
+export const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>(
   (
     {
       locale,

packages/circuit-ui/components/DateInput/DateInput.spec.tsx

@@ -17,15 +17,14 @@ import { describe, expect, it } from 'vitest';
 import { createRef } from 'react';
 
 import { render, axe } from '../../util/test-utils.js';
-import type { InputElement } from '../Input/index.js';
 
 import { DateInput } from './DateInput.js';
 
 describe('DateInput', () => {
   const baseProps = { label: 'Date' };
 
   it('should forward a ref', () => {
-    const ref = createRef<InputElement>();
+    const ref = createRef<HTMLInputElement>();
     const { container } = render(<DateInput {...baseProps} ref={ref} />);
     const input = container.querySelector('input');
     expect(ref.current).toBe(input);

packages/circuit-ui/components/DateInput/DateInput.tsx

@@ -18,7 +18,7 @@
 import { forwardRef, useState, useEffect } from 'react';
 import { PatternFormat } from 'react-number-format';
 
-import { Input, type InputElement, type InputProps } from '../Input/index.js';
+import { Input, type InputProps } from '../Input/index.js';
 import { clsx } from '../../styles/clsx.js';
 
 import classes from './DateInput.module.css';
@@ -42,7 +42,7 @@ export interface DateInputProps
  * DateInput component for forms.
  * The input value is always a string in the format `YYYY-MM-DD`.
  */
-export const DateInput = forwardRef<InputElement, DateInputProps>(
+export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
   ({ inputClassName, ...props }, ref) => {
     // When server-side rendering, we assume that the user's browser supports
     // the native date input.

packages/circuit-ui/components/Input/Input.spec.tsx

@@ -18,7 +18,7 @@ import { createRef } from 'react';
 
 import { render, axe, screen } from '../../util/test-utils.js';
 
-import { Input, type InputElement } from './Input.js';
+import { Input } from './Input.js';
 
 const defaultProps = {
   label: 'Label',
@@ -35,14 +35,14 @@ describe('Input', () => {
   });
 
   it('should forward a ref to the input', () => {
-    const ref = createRef<InputElement>();
+    const ref = createRef<HTMLInputElement>();
     const { container } = render(<Input ref={ref} {...defaultProps} />);
     const input = container.querySelector('input');
     expect(ref.current).toBe(input);
   });
 
   it('should forward a ref to the textarea', () => {
-    const ref = createRef<InputElement>();
+    const ref = createRef<HTMLInputElement>();
     const { container } = render(
       <Input as="textarea" ref={ref} {...defaultProps} />,
     );

packages/circuit-ui/components/Input/Input.tsx

@@ -20,7 +20,6 @@ import {
   useId,
   type ComponentType,
   type InputHTMLAttributes,
-  type TextareaHTMLAttributes,
 } from 'react';
 
 import {
@@ -38,19 +37,18 @@ import { clsx } from '../../styles/clsx.js';
 
 import classes from './Input.module.css';
 
-export type InputElement = HTMLInputElement & HTMLTextAreaElement;
-type CircuitInputHTMLAttributes = InputHTMLAttributes<HTMLInputElement> &
-  TextareaHTMLAttributes<HTMLTextAreaElement>;
+/**
+ * @deprecated
+ *
+ * Use the `HTMLInputElement` or `HTMLTextAreaElement` interfaces instead.
+ */
+export type InputElement = HTMLInputElement;
 
-export interface InputProps extends CircuitInputHTMLAttributes {
+export interface BaseInputProps {
   /**
    * A clear and concise description of the input purpose.
    */
   label: string;
-  /**
-   * The HTML input element to render.
-   */
-  as?: 'input' | 'textarea';
   /**
    * A unique identifier for the input field. If not defined, a randomly
    * generated id is used.
@@ -106,10 +104,21 @@ export interface InputProps extends CircuitInputHTMLAttributes {
   inputClassName?: string;
 }
 
+export interface InputProps
+  extends BaseInputProps,
+    InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * @private
+   *
+   * Use the {@link TextArea} component.
+   */
+  as?: 'input' | 'textarea';
+}
+
 /**
  * Input component for forms. Takes optional prefix and suffix as render props.
  */
-export const Input = forwardRef<InputElement, InputProps>(
+export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
     {
       value,
@@ -175,6 +184,9 @@ export const Input = forwardRef<InputElement, InputProps>(
           <Element
             id={inputId}
             value={value}
+            // @ts-expect-error The Input component renders as an `input` element
+            // by default. The types are overwritten as necessary in the
+            // TextArea component.
             ref={ref}
             aria-describedby={descriptionIds}
             className={clsx(

packages/circuit-ui/components/Input/index.ts

@@ -15,4 +15,4 @@
 
 export { Input } from './Input.js';
 
-export type { InputProps, InputElement } from './Input.js';
+export type { InputProps, BaseInputProps, InputElement } from './Input.js';

packages/circuit-ui/components/PercentageInput/PercentageInput.spec.tsx

@@ -17,7 +17,6 @@ import { describe, expect, it } from 'vitest';
 import { createRef, useState, type ChangeEvent } from 'react';
 
 import { render, userEvent, axe, screen } from '../../util/test-utils.js';
-import type { InputElement } from '../Input/index.js';
 
 import {
   PercentageInput,
@@ -31,7 +30,7 @@ const defaultProps = {
 
 describe('PercentageInput', () => {
   it('should forward a ref', () => {
-    const ref = createRef<InputElement>();
+    const ref = createRef<HTMLInputElement>();
     render(<PercentageInput {...defaultProps} ref={ref} />);
     const input = screen.getByRole('textbox');
     expect(ref.current).toBe(input);

packages/circuit-ui/components/PercentageInput/PercentageInput.tsx

@@ -20,7 +20,7 @@ import { resolveNumberFormat } from '@sumup-oss/intl';
 import { NumericFormat, type NumericFormatProps } from 'react-number-format';
 
 import { clsx } from '../../styles/clsx.js';
-import { Input, type InputElement, type InputProps } from '../Input/index.js';
+import { Input, type InputProps } from '../Input/index.js';
 
 import { formatPlaceholder } from './PercentageInputService.js';
 import classes from './PercentageInput.module.css';
@@ -62,7 +62,10 @@ const DEFAULT_FORMAT = {
 /**
  * PercentageInput component for fractional values
  */
-export const PercentageInput = forwardRef<InputElement, PercentageInputProps>(
+export const PercentageInput = forwardRef<
+  HTMLInputElement,
+  PercentageInputProps
+>(
   (
     {
       locale,

packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.spec.tsx

@@ -17,7 +17,6 @@ import { describe, it, vi, expect } from 'vitest';
 import { createRef } from 'react';
 
 import { axe, render, screen, userEvent } from '../../util/test-utils.js';
-import type { InputElement } from '../Input/Input.js';
 
 import {
   PhoneNumberInput,
@@ -67,7 +66,7 @@ describe('PhoneNumberInput', () => {
   });
 
   it('should forward a ref to the subscriber number input', () => {
-    const ref = createRef<InputElement>();
+    const ref = createRef<HTMLInputElement>();
     const props = {
       ...defaultProps,
       subscriberNumber: { ...defaultProps.subscriberNumber, ref },

packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.tsx

@@ -29,7 +29,7 @@ import {
 } from 'react';
 
 import { Select, type SelectProps } from '../Select/index.js';
-import { Input, type InputElement, type InputProps } from '../Input/index.js';
+import { Input, type InputProps } from '../Input/index.js';
 import {
   FieldLabelText,
   FieldLegend,
@@ -144,7 +144,7 @@ export interface PhoneNumberInputProps
     /**
      * The ref to the country code selector HTML DOM element.
      */
-    ref?: ForwardedRef<HTMLSelectElement | InputElement>;
+    ref?: ForwardedRef<HTMLSelectElement | HTMLInputElement>;
     /**
      * Render prop that should render a left-aligned overlay icon or element.
      * Receives a className prop.
@@ -185,7 +185,7 @@ export interface PhoneNumberInputProps
     /**
      * The ref to the subscriber number input HTML DOM element.
      */
-    ref?: ForwardedRef<InputElement>;
+    ref?: ForwardedRef<HTMLInputElement>;
   };
 }
 
@@ -218,8 +218,8 @@ export const PhoneNumberInput = forwardRef<
     },
     ref,
   ) => {
-    const countryCodeRef = useRef<HTMLSelectElement | InputElement>(null);
-    const subscriberNumberRef = useRef<InputElement>(null);
+    const countryCodeRef = useRef<HTMLSelectElement | HTMLInputElement>(null);
+    const subscriberNumberRef = useRef<HTMLInputElement>(null);
 
     const validationHintId = useId();
 
@@ -361,8 +361,8 @@ export const PhoneNumberInput = forwardRef<
               readOnly={true}
               onChange={() => {}}
               ref={applyMultipleRefs(
-                countryCodeRef as RefObject<InputElement>,
-                countryCode.ref as ForwardedRef<InputElement>,
+                countryCodeRef as RefObject<HTMLInputElement>,
+                countryCode.ref as ForwardedRef<HTMLInputElement>,
               )}
               renderPrefix={countryCode.renderPrefix}
             />
@@ -401,7 +401,7 @@ export const PhoneNumberInput = forwardRef<
             {...subscriberNumber}
             invalid={invalid || subscriberNumber.invalid}
             readOnly={readOnly || subscriberNumber.readonly}
-            onChange={eachFn<[ChangeEvent<InputElement>]>([
+            onChange={eachFn<[ChangeEvent<HTMLInputElement>]>([
               subscriberNumber.onChange,
               handleChange,
             ])}

packages/circuit-ui/components/SearchInput/SearchInput.spec.tsx

@@ -17,7 +17,6 @@ import { describe, expect, it, vi } from 'vitest';
 import { createRef } from 'react';
 
 import { render, axe, screen } from '../../util/test-utils.js';
-import type { InputElement } from '../Input/index.js';
 
 import { SearchInput } from './SearchInput.js';
 
@@ -45,7 +44,7 @@ describe('SearchInput', () => {
   });
 
   it('should forward a ref', () => {
-    const ref = createRef<InputElement>();
+    const ref = createRef<HTMLInputElement>();
     const { container } = render(<SearchInput {...baseProps} ref={ref} />);
     const input = container.querySelector('input');
     expect(ref.current).toBe(input);

packages/circuit-ui/components/SearchInput/SearchInput.stories.tsx

@@ -15,8 +15,6 @@
 
 import { useState, type ChangeEvent } from 'react';
 
-import type { InputElement } from '../Input/index.js';
-
 import { SearchInput, type SearchInputProps } from './SearchInput.js';
 
 export default {
@@ -32,7 +30,7 @@ export const Base = (args: SearchInputProps) => {
 
   const handleChange = ({
     target: { value: inputValue },
-  }: ChangeEvent<InputElement>) => {
+  }: ChangeEvent<HTMLInputElement>) => {
     setValue(inputValue);
   };
 

packages/circuit-ui/components/SearchInput/SearchInput.tsx

@@ -18,7 +18,7 @@
 import { forwardRef, useRef } from 'react';
 import { Search } from '@sumup-oss/icons';
 
-import { Input, type InputElement, type InputProps } from '../Input/index.js';
+import { Input, type InputProps } from '../Input/index.js';
 import { CloseButton } from '../CloseButton/index.js';
 import {
   AccessibilityError,
@@ -49,9 +49,9 @@ export type SearchInputProps = InputProps & ClearProps;
 /**
  * SearchInput component for forms.
  */
-export const SearchInput = forwardRef<InputElement, SearchInputProps>(
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
   ({ value, onClear, clearLabel, inputClassName, ...props }, ref) => {
-    const localRef = useRef<InputElement>(null);
+    const localRef = useRef<HTMLInputElement>(null);
 
     if (
       process.env.NODE_ENV !== 'production' &&