Fix TextInput types (#1959)

* Add failing TextInput type test

* Create loud-schools-own.md

* Update TextInput types

* Add another TextInput type test

* Update TextInput props type

* Update TextInputWithTokens types

* Fix incorrect uses of TextInputWithTokens

* Update SelectMenu types test

* Fix TextInput tests

* Update snapshot tests

* autocomplete -> autoComplete

* Remove theme prop SelectMenuFilter

* Fix TextInput in Overlay story

* Fix TextInputWithTokens stories

Author: colebemis

.changeset/loud-schools-own.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix `TextInput` types

src/Autocomplete/AutocompleteInput.tsx

@@ -166,7 +166,7 @@ const AutocompleteInput = React.forwardRef(
         aria-expanded={showMenu}
         aria-haspopup="listbox"
         aria-owns={`${id}-listbox`}
-        autocomplete="off"
+        autoComplete="off"
         id={id}
         {...props}
       />

src/TextInput.tsx

@@ -1,25 +1,34 @@
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
 import classnames from 'classnames'
 import React from 'react'
-import {ComponentProps, Merge} from './utils/types'
+import {Merge} from './utils/types'
+import TextInputWrapper, {StyledWrapperProps} from './_TextInputWrapper'
 import UnstyledTextInput from './_UnstyledTextInput'
-import TextInputWrapper from './_TextInputWrapper'
 
 type NonPassthroughProps = {
-  className?: string
   /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */
   icon?: React.ComponentType<{className?: string}>
   leadingVisual?: string | React.ComponentType<{className?: string}>
   trailingVisual?: string | React.ComponentType<{className?: string}>
 } & Pick<
-  ComponentProps<typeof TextInputWrapper>,
-  'block' | 'contrast' | 'disabled' | 'monospace' | 'sx' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size'
+  StyledWrapperProps,
+  | 'block'
+  | 'contrast'
+  | 'disabled'
+  | 'monospace'
+  | 'sx'
+  | 'width'
+  | 'maxWidth'
+  | 'minWidth'
+  | 'variant'
+  | 'size'
+  | 'validationStatus'
 >
 
-// Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop.
-type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof UnstyledTextInput>, NonPassthroughProps>
+export type TextInputProps = Merge<React.ComponentPropsWithoutRef<'input'>, NonPassthroughProps>
 
 // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
-const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
+const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
   (
     {
       icon: IconComponent,
@@ -78,13 +87,12 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
       </TextInputWrapper>
     )
   }
-)
+) as PolymorphicForwardRefComponent<'input', TextInputProps>
 
 TextInput.defaultProps = {
   type: 'text'
 }
 
 TextInput.displayName = 'TextInput'
 
-export type TextInputProps = ComponentProps<typeof TextInput>
 export default TextInput

src/TextInputWithTokens.tsx

@@ -1,25 +1,24 @@
-import React, {FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject, useRef, useState} from 'react'
-import {omit} from '@styled-system/props'
 import {FocusKeys} from '@primer/behaviors'
+import {isFocusable} from '@primer/behaviors/utils'
+import {omit} from '@styled-system/props'
+import React, {FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject, useRef, useState} from 'react'
+import Box from './Box'
+import {useProvidedRefOrCreate} from './hooks'
 import {useCombinedRefs} from './hooks/useCombinedRefs'
 import {useFocusZone} from './hooks/useFocusZone'
-import {ComponentProps} from './utils/types'
+import Text from './Text'
+import {TextInputProps} from './TextInput'
 import Token from './Token/Token'
 import {TokenSizeKeys} from './Token/TokenBase'
-import {TextInputProps} from './TextInput'
-import {useProvidedRefOrCreate} from './hooks'
-import UnstyledTextInput from './_UnstyledTextInput'
 import TextInputWrapper, {textInputHorizPadding, TextInputSizes} from './_TextInputWrapper'
-import Box from './Box'
-import Text from './Text'
-import {isFocusable} from '@primer/behaviors/utils'
+import UnstyledTextInput from './_UnstyledTextInput'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyReactComponent = React.ComponentType<any>
 
 // NOTE: if these props or their JSDoc comments are updated, be sure to also update
 // the prop table in docs/content/TextInputTokens.mdx
-type TextInputWithTokensInternalProps<TokenComponentType extends AnyReactComponent> = {
+export type TextInputWithTokensProps<TokenComponentType extends AnyReactComponent = typeof Token> = {
   /**
    * The array of tokens to render
    */
@@ -53,7 +52,7 @@ type TextInputWithTokensInternalProps<TokenComponentType extends AnyReactCompone
    * The number of tokens to display before truncating
    */
   visibleTokenCount?: number
-} & TextInputProps
+} & Omit<TextInputProps, 'size'>
 
 const overflowCountFontSizeMap: Record<TokenSizeKeys, number> = {
   small: 0,
@@ -72,7 +71,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     className,
     block,
     disabled,
-    theme,
     sx: sxProp,
     tokens,
     onTokenRemove,
@@ -88,10 +86,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     variant: variantProp, // deprecated. use `size` instead
     visibleTokenCount,
     ...rest
-  }: TextInputWithTokensInternalProps<TokenComponentType> & {
-    selectedTokenIndex: number | undefined
-    setSelectedTokenIndex: React.Dispatch<React.SetStateAction<number | undefined>>
-  },
+  }: TextInputWithTokensProps<TokenComponentType>,
   externalRef: React.ForwardedRef<HTMLInputElement>
 ) {
   const {onBlur, onFocus, onKeyDown, ...inputPropsRest} = omit(rest)
@@ -252,7 +247,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       disabled={disabled}
       hasLeadingVisual={Boolean(LeadingVisual)}
       hasTrailingVisual={Boolean(TrailingVisual)}
-      theme={theme}
       width={widthProp}
       minWidth={minWidthProp}
       maxWidth={maxWidthProp}
@@ -372,5 +366,4 @@ TextInputWithTokens.defaultProps = {
 
 TextInputWithTokens.displayName = 'TextInputWithTokens'
 
-export type TextInputWithTokensProps = ComponentProps<typeof TextInputWithTokens>
 export default TextInputWithTokens

src/__tests__/FormControl.test.tsx

@@ -140,7 +140,7 @@ describe('FormControl', () => {
                   {text: 'one', id: 1},
                   {text: 'two', id: 2}
                 ]}
-                onRemove={onRemoveMock}
+                onTokenRemove={onRemoveMock}
               />
             </FormControl>
           </SSRProvider>

src/__tests__/SelectMenu.types.test.tsx

@@ -14,7 +14,7 @@ export function shouldNotAcceptSystemProps() {
       <SelectMenu.List backgroundColor="lightgreen" />
       {/* @ts-expect-error system props should not be accepted */}
       <SelectMenu.Divider backgroundColor="lightgrey" />
-      {/* This will not error for now, but once TextInputProps is fixed, a ts-expect-error can be added */}
+      {/* @ts-expect-error system props should not be accepted */}
       <SelectMenu.Filter backgroundColor="lightpink" />
       {/* @ts-expect-error system props should not be accepted */}
       <SelectMenu.Footer backgroundColor="lightsalmon" />

src/__tests__/TextInput.test.tsx

@@ -38,11 +38,11 @@ describe('TextInput', () => {
   })
 
   it('renders warning', () => {
-    expect(render(<TextInput name="zipcode" status="warning" />)).toMatchSnapshot()
+    expect(render(<TextInput name="zipcode" validationStatus="warning" />)).toMatchSnapshot()
   })
 
   it('renders error', () => {
-    expect(render(<TextInput name="zipcode" status="error" />)).toMatchSnapshot()
+    expect(render(<TextInput name="zipcode" validationStatus="error" />)).toMatchSnapshot()
   })
 
   it('renders contrast', () => {

src/__tests__/TextInput.types.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import {TextInput} from '..'
+
+export function shouldNotAcceptInvalidDomProps() {
+  // @ts-expect-error invalid DOM props should not be accepted
+  return <TextInput onKeyDown={true} />
+}
+
+export function shouldNotAcceptInvalidSize() {
+  // @ts-expect-error invalid size value should not be accepted
+  return <TextInput size="big" />
+}