Fix TextInput types

.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" />
+}