@tamagui/input 2.7.7 → 3.0.0-beta.643.1

package/src/inputTypes.test-d.ts

@@ -1,245 +0,0 @@
-/**
- * Type tests for Input component.
- *
- * Verifies that:
- * 1. Event handlers are typed with HTMLInputElement (not HTMLDivElement)
- * 2. HTML input-specific props are available (type, placeholder, etc.)
- * 3. Tamagui style props and variants still work
- * 4. Cross-platform props (autoCorrect, autoCapitalize) are present
- * 5. InputRef includes both HTMLInputElement and TextInput
- *
- * Run with: npx vitest typecheck --run
- */
-
-import { expectTypeOf, describe, test } from 'vitest'
-import type { GetProps } from '@tamagui/web'
-import type { TextInput } from 'react-native'
-import {
-  Input,
-  type InputProps,
-  type InputRef,
-  TextArea,
-  type TextAreaProps,
-} from './index'
-
-// helper: extract event param type
-type EventParam<T> = T extends (event: infer E) => any ? E : never
-type IsAssignable<T, U> = T extends U ? true : false
-
-// =============================================================================
-// Test: event handlers are typed with HTMLInputElement
-// =============================================================================
-
-describe('Input event handler types', () => {
-  test('onChange event uses HTMLInputElement', () => {
-    type OnChange = NonNullable<InputProps['onChange']>
-    type Event = EventParam<OnChange>
-    expectTypeOf<Event['currentTarget']>().toMatchTypeOf<HTMLInputElement>()
-  })
-
-  test('onFocus event uses HTMLInputElement', () => {
-    type OnFocus = NonNullable<InputProps['onFocus']>
-    type Event = EventParam<OnFocus>
-    expectTypeOf<Event['currentTarget']>().toMatchTypeOf<HTMLInputElement>()
-  })
-
-  test('onBlur event uses HTMLInputElement', () => {
-    type OnBlur = NonNullable<InputProps['onBlur']>
-    type Event = EventParam<OnBlur>
-    expectTypeOf<Event['currentTarget']>().toMatchTypeOf<HTMLInputElement>()
-  })
-
-  test('onKeyDown event uses HTMLInputElement', () => {
-    type OnKeyDown = NonNullable<InputProps['onKeyDown']>
-    type Event = EventParam<OnKeyDown>
-    expectTypeOf<Event['currentTarget']>().toMatchTypeOf<HTMLInputElement>()
-  })
-
-  test('onClick event uses HTMLInputElement', () => {
-    type OnClick = NonNullable<InputProps['onClick']>
-    type Event = EventParam<OnClick>
-    expectTypeOf<Event['currentTarget']>().toMatchTypeOf<HTMLInputElement>()
-  })
-
-  test('onChange event is NOT typed with HTMLDivElement', () => {
-    type OnChange = NonNullable<InputProps['onChange']>
-    type Event = EventParam<OnChange>
-    // HTMLDivElement should NOT be assignable to the currentTarget
-    type DivMatchesCurrentTarget = IsAssignable<HTMLDivElement, Event['currentTarget']>
-    expectTypeOf<DivMatchesCurrentTarget>().toEqualTypeOf<false>()
-  })
-})
-
-// =============================================================================
-// Test: HTML input-specific props
-// =============================================================================
-
-describe('Input HTML props', () => {
-  test('accepts type prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('type')
-  })
-
-  test('accepts placeholder prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('placeholder')
-  })
-
-  test('accepts value prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('value')
-  })
-
-  test('accepts defaultValue prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('defaultValue')
-  })
-
-  test('accepts maxLength prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('maxLength')
-  })
-
-  test('accepts pattern prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('pattern')
-  })
-
-  test('accepts required prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('required')
-  })
-
-  test('accepts readOnly prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('readOnly')
-  })
-
-  test('accepts autoComplete prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('autoComplete')
-  })
-
-  test('accepts name prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('name')
-  })
-})
-
-// =============================================================================
-// Test: Tamagui style props still work
-// =============================================================================
-
-describe('Input style props', () => {
-  test('accepts padding style prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('padding')
-  })
-
-  test('accepts backgroundColor style prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('backgroundColor')
-  })
-
-  test('accepts borderRadius style prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('borderRadius')
-  })
-
-  test('accepts text style props', () => {
-    expectTypeOf<InputProps>().toHaveProperty('fontSize')
-    expectTypeOf<InputProps>().toHaveProperty('fontWeight')
-    expectTypeOf<InputProps>().toHaveProperty('color')
-  })
-
-  // textAlign must be a real base style prop so the `text` shorthand (text ->
-  // textAlign) can resolve to it. the shorthand itself is config-dependent, so
-  // it's exercised in kitchen-sink (InputTextShorthandType) where a config with
-  // the v4/v5 shorthands is registered.
-  test('accepts textAlign longhand', () => {
-    expectTypeOf<'center'>().toMatchTypeOf<NonNullable<InputProps['textAlign']>>()
-  })
-
-  test('accepts size variant', () => {
-    expectTypeOf<InputProps>().toHaveProperty('size')
-  })
-
-  test('accepts unstyled variant', () => {
-    expectTypeOf<InputProps>().toHaveProperty('unstyled')
-  })
-})
-
-// =============================================================================
-// Test: cross-platform props
-// =============================================================================
-
-describe('Input cross-platform props', () => {
-  test('autoCorrect accepts boolean and string', () => {
-    expectTypeOf<InputProps['autoCorrect']>().toMatchTypeOf<
-      boolean | 'on' | 'off' | undefined
-    >()
-  })
-
-  test('autoCapitalize accepts native and web values', () => {
-    expectTypeOf<InputProps['autoCapitalize']>().toMatchTypeOf<
-      'none' | 'sentences' | 'words' | 'characters' | 'off' | 'on' | undefined
-    >()
-  })
-
-  test('accepts onChangeText callback', () => {
-    expectTypeOf<InputProps>().toHaveProperty('onChangeText')
-    expectTypeOf<NonNullable<InputProps['onChangeText']>>().toMatchTypeOf<
-      (text: string) => void
-    >()
-  })
-
-  test('accepts onSubmitEditing callback', () => {
-    expectTypeOf<InputProps>().toHaveProperty('onSubmitEditing')
-  })
-
-  test('accepts placeholderTextColor', () => {
-    expectTypeOf<InputProps>().toHaveProperty('placeholderTextColor')
-  })
-
-  test('accepts selection prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('selection')
-  })
-})
-
-// =============================================================================
-// Test: InputRef type
-// =============================================================================
-
-describe('InputRef type', () => {
-  test('InputRef accepts TextInput', () => {
-    const _ref: InputRef = {} as TextInput
-  })
-
-  test('InputRef rejects plain HTMLDivElement', () => {
-    // @ts-expect-error - HTMLDivElement should not be assignable to InputRef
-    const _ref: InputRef = {} as HTMLDivElement
-  })
-})
-
-// =============================================================================
-// Test: TextArea types
-// =============================================================================
-
-describe('TextArea types', () => {
-  test('TextArea has rows prop', () => {
-    expectTypeOf<TextAreaProps>().toHaveProperty('rows')
-  })
-
-  test('TextArea accepts style props', () => {
-    expectTypeOf<TextAreaProps>().toHaveProperty('padding')
-    expectTypeOf<TextAreaProps>().toHaveProperty('fontSize')
-  })
-
-  test('TextArea accepts HTML input props', () => {
-    expectTypeOf<TextAreaProps>().toHaveProperty('placeholder')
-    expectTypeOf<TextAreaProps>().toHaveProperty('value')
-  })
-})
-
-// =============================================================================
-// Test: InputProps derived from GetProps (not manually defined)
-// =============================================================================
-
-describe('InputProps derivation', () => {
-  test('InputProps equals GetProps<typeof Input>', () => {
-    type Derived = GetProps<typeof Input>
-    expectTypeOf<InputProps>().toEqualTypeOf<Derived>()
-  })
-
-  test('TextAreaProps equals GetProps<typeof TextArea>', () => {
-    type Derived = GetProps<typeof TextArea>
-    expectTypeOf<TextAreaProps>().toEqualTypeOf<Derived>()
-  })
-})

package/src/v1/Input.native.tsx

@@ -1,153 +0,0 @@
-import React from 'react'
-import { styled } from '@tamagui/core'
-import { registerFocusable } from '@tamagui/focusable'
-import { useNativeInputRef } from '@tamagui/element'
-
-import type { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native'
-import { TextInput } from 'react-native'
-import { styledBody } from '../shared'
-import type { InputProps } from './types'
-
-const StyledInput = styled(TextInput, styledBody[0], styledBody[1])
-
-/**
- * @deprecated Use the new Input from '@tamagui/input' instead
- */
-export const Input = StyledInput.styleable<InputProps>((inProps, forwardedRef) => {
-  const {
-    // some of destructed props are just to avoid passing them to ...rest because they are not in native.
-    type,
-    //@ts-ignore
-    dirname,
-    max,
-    min,
-    minLength,
-    multiple,
-    name,
-    required,
-    step,
-    disabled,
-    id,
-    // @ts-ignore
-    caretColor,
-    onChange,
-    onInput,
-    rows,
-    enterKeyHint,
-    returnKeyType,
-    onKeyDown,
-    inputMode,
-    render,
-    ...rest
-  } = inProps
-
-  const { ref, composedRef } = useNativeInputRef(forwardedRef)
-
-  // TODO: later move most of the logic to the core package
-
-  let secureTextEntry = false
-  let cursorColor = caretColor
-  let _returnKeyType = returnKeyType
-  let _enterKeyHint = enterKeyHint
-  if (enterKeyHint === 'go') {
-    _returnKeyType = 'go'
-    _enterKeyHint = undefined
-  }
-
-  let _inputMode = inputMode
-  if (type === 'email') {
-    _inputMode = 'email'
-  } else if (type === 'tel') {
-    _inputMode = 'tel'
-  } else if (type === 'search') {
-    _inputMode = 'search'
-  } else if (type === 'url') {
-    _inputMode = 'url'
-  } else if (type === 'password') {
-    secureTextEntry = true
-    _inputMode = 'text'
-  } else if (type === 'number') {
-    _inputMode = 'numeric'
-  } else {
-    _inputMode = 'text'
-  }
-
-  let showSoftInputOnFocus = true
-  if (inputMode === 'none') {
-    showSoftInputOnFocus = false
-  }
-
-  const finalProps = {
-    ...rest,
-    inputMode: _inputMode,
-    showSoftInputOnFocus,
-    disabled,
-    id,
-    cursorColor,
-    enterKeyHint: _enterKeyHint,
-    returnKeyType: _returnKeyType,
-    secureTextEntry,
-    numberOfLines: rows || rest.numberOfLines,
-  } as any
-
-  if (render === 'textarea') {
-    finalProps.multiline = true
-  }
-
-  if (onKeyDown) {
-    finalProps.onKeyPress = (e) => {
-      const { key } = e.nativeEvent
-      if (
-        key === 'Backspace' ||
-        (render === 'textarea' && key === 'Enter') ||
-        key.length === 1
-      ) {
-        onKeyDown({
-          key,
-          type: 'keydown',
-        } as any)
-      }
-    }
-    finalProps.onSubmitEditing = (e) => {
-      onKeyDown({
-        key: 'Enter',
-        type: 'keydown',
-      } as any)
-    }
-  }
-
-  if (onChange || onInput) {
-    finalProps.onChange = (e: NativeSyntheticEvent<TextInputChangeEventData>) => {
-      const { text } = e.nativeEvent
-      if (onChange) {
-        onChange({
-          target: {
-            value: text,
-          },
-          type: 'change',
-        } as any)
-      }
-      if (onInput != null) {
-        onInput({
-          target: {
-            value: text,
-          },
-          type: 'input',
-        } as any)
-      }
-    }
-  }
-
-  React.useEffect(() => {
-    if (!id) return
-    if (disabled) return
-
-    return registerFocusable(id, {
-      focusAndSelect: () => {
-        ref.current?.focus()
-      },
-      focus: () => {},
-    })
-  }, [id, disabled])
-  return <StyledInput onChange={(e) => {}} ref={composedRef} {...finalProps} />
-})

package/src/v1/Input.tsx

@@ -1,190 +0,0 @@
-import { View, styled, useEvent, useTheme } from '@tamagui/core'
-import { registerFocusable } from '@tamagui/focusable'
-import { useWebRef } from '@tamagui/element'
-import React, { type HTMLAttributes, type HTMLInputTypeAttribute } from 'react'
-import { styledBody } from '../shared'
-import type { InputProps } from './types'
-
-const StyledInput = styled(View, styledBody[0], styledBody[1])
-
-/**
- * @deprecated Use the new Input from '@tamagui/input' instead
- * @summary An input is a text field that allows users to enter text.
- * @see — Docs https://tamagui.dev/ui/inputs#input
- */
-export const Input = StyledInput.styleable<InputProps>((inProps, forwardedRef) => {
-  const {
-    // some of destructed props are just to avoid passing them to ...rest because they are not in web.
-    allowFontScaling,
-    selectTextOnFocus,
-    showSoftInputOnFocus,
-    textContentType,
-    passwordRules,
-    textBreakStrategy,
-    underlineColorAndroid,
-    selection,
-    lineBreakStrategyIOS,
-    returnKeyLabel,
-    disabled,
-    onSubmitEditing,
-    caretHidden,
-    clearButtonMode,
-    clearTextOnFocus,
-    contextMenuHidden,
-    dataDetectorTypes,
-    id,
-    enablesReturnKeyAutomatically,
-    importantForAutofill,
-    inlineImageLeft,
-    inlineImagePadding,
-    inputAccessoryViewID,
-    keyboardAppearance,
-    keyboardType,
-    cursorColor,
-    disableFullscreenUI,
-    editable,
-    maxFontSizeMultiplier,
-    multiline,
-    numberOfLines,
-    onChangeText,
-    onContentSizeChange,
-    onEndEditing,
-    onScroll,
-    onSelectionChange,
-    // @ts-ignore
-    caretColor,
-    placeholderTextColor,
-    blurOnSubmit,
-    enterKeyHint,
-    returnKeyType,
-    rejectResponderTermination,
-    scrollEnabled,
-    secureTextEntry,
-    selectionColor,
-    inputMode,
-    ...rest
-  } = inProps
-
-  const { ref, composedRef } = useWebRef<HTMLInputElement>(forwardedRef)
-  const theme = useTheme()
-
-  const _onSelectionChange = useEvent(() => {
-    const start = ref.current?.selectionStart ?? 0
-    const end = ref.current?.selectionEnd ?? 0
-    onSelectionChange?.({
-      nativeEvent: {
-        selection: {
-          end,
-          start,
-        },
-      },
-    } as any)
-  })
-
-  React.useEffect(() => {
-    if (onSelectionChange) {
-      ref.current?.addEventListener('selectionchange', _onSelectionChange)
-      return () => {
-        ref.current?.removeEventListener('selectionchange', _onSelectionChange)
-      }
-    }
-  }, [])
-
-  React.useEffect(() => {
-    if (selection) {
-      ref.current?.setSelectionRange(selection.start || null, selection.end || null)
-    }
-  }, [selection?.start, selection?.end])
-
-  const finalProps = {
-    ...rest,
-    disabled,
-    caretColor,
-    id,
-    enterKeyHint,
-    ...(process.env.TAMAGUI_TARGET === 'web'
-      ? {
-          type: (() => {
-            if (rest?.type) return rest.type
-            if (secureTextEntry) return 'password'
-            switch (keyboardType) {
-              case 'number-pad':
-              case 'numeric':
-                return 'number'
-              case 'email-address':
-                return 'email'
-              case 'phone-pad':
-                return 'tel'
-              case 'url':
-                return 'url'
-              default:
-                return 'text'
-            }
-          })() satisfies HTMLInputTypeAttribute,
-          inputMode: (() => {
-            switch (keyboardType) {
-              case 'number-pad':
-              case 'numeric':
-                return 'numeric'
-              case 'decimal-pad':
-                return 'decimal'
-              case 'email-address':
-                return 'email'
-              case 'phone-pad':
-                return 'tel'
-              case 'url':
-                return 'url'
-              default:
-                return undefined
-            }
-          })() satisfies HTMLAttributes<HTMLInputElement>['inputMode'],
-        }
-      : {
-          keyboardType,
-          secureTextEntry,
-          inputMode,
-        }),
-    style: {
-      ...(rest.style as any),
-      ...(placeholderTextColor && {
-        '--t_placeholderColor':
-          theme[placeholderTextColor]?.variable || placeholderTextColor,
-      }),
-      ...(selectionColor && {
-        '--t_selectionBackground': theme[selectionColor]?.variable || selectionColor,
-      }),
-    },
-  } as any
-
-  React.useEffect(() => {
-    if (!id) return
-    if (disabled) return
-
-    return registerFocusable(id, {
-      focusAndSelect: () => {
-        ref.current?.focus()
-      },
-      focus: () => {},
-    })
-  }, [id, disabled])
-
-  return (
-    <>
-      {process.env.TAMAGUI_TARGET === 'web' && (
-        <style>
-          {`
-      input::selection, textarea::selection {
-        background-color: var(--t_selectionBackground) !important;
-      }
-
-      input::placeholder, textarea::placeholder {
-        color: var(--t_placeholderColor) !important;
-      }
-      `}
-        </style>
-      )}
-
-      <StyledInput ref={composedRef} {...finalProps} />
-    </>
-  )
-})

package/src/v1/TextArea.tsx

@@ -1,35 +0,0 @@
-import { styled } from '@tamagui/web'
-import { Input } from './Input'
-import { defaultStyles, textAreaSizeVariant } from '../shared'
-
-/**
- * @deprecated Use the new TextArea from '@tamagui/input' instead
- * @summary A text area is a multi-line input field that allows users to enter text.
- * @see — Docs https://tamagui.dev/ui/inputs#textarea
- */
-export const TextArea = styled(Input, {
-  name: 'TextArea',
-  render: 'textarea',
-
-  // this attribute fixes firefox newline issue
-  // @ts-ignore
-  whiteSpace: 'pre-wrap',
-
-  variants: {
-    unstyled: {
-      false: {
-        height: 'auto',
-        ...defaultStyles,
-        numberOfLines: 3,
-      },
-    },
-
-    size: {
-      '...size': textAreaSizeVariant,
-    },
-  } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
-})

package/src/v1/index.ts

@@ -1,3 +0,0 @@
-export * from './Input'
-export * from './TextArea'
-export type { InputProps } from './types'

package/src/v1/types.ts

@@ -1,65 +0,0 @@
-import type {
-  ColorTokens,
-  ViewProps,
-  TamaguiComponentPropsBase,
-  TextProps,
-} from '@tamagui/web'
-import type { TextInputProps, InputModeOptions } from 'react-native'
-
-type DetailedInputProps = React.DetailedHTMLProps<
-  React.HTMLProps<HTMLInputElement>,
-  HTMLInputElement
->
-
-export type InputProps = ViewProps &
-  Omit<
-    DetailedInputProps,
-    'className' | 'children' | 'value' | 'size' | keyof ViewProps
-  > &
-  Pick<TextProps, 'color'> &
-  Omit<DetailedInputProps['style'], 'color'> &
-  Omit<
-    TextInputProps,
-    | 'inputMode'
-    | 'secureTextEntry'
-    | 'onChangeText'
-    | 'editable'
-    | 'enterKeyHint'
-    | 'keyboardType'
-    | 'placeholderTextColor'
-    | 'selectionColor'
-    | 'numberOfLines'
-  > & {
-    /**
-     * @deprecated - use `type="password"` instead
-     */
-    secureTextEntry?: TextInputProps['secureTextEntry']
-    /**
-     * @deprecated - use `onChange` instead
-     */
-    onChangeText?: TextInputProps['onChangeText']
-    /**
-     * @deprecated - use `readOnly` instead
-     */
-    editable?: TextInputProps['editable']
-    enterKeyHint?: 'done' | 'go' | 'next' | 'search' | 'send' | 'enter' | 'previous'
-    /**
-     * @deprecated - use `type` instead
-     */
-    keyboardType?: TextInputProps['keyboardType']
-    /**
-     * use `type` instead of inputMode for most cases, use `inputMode="none"` to disable the soft keyboard
-     */
-    inputMode?: InputModeOptions
-    placeholderTextColor?: ColorTokens
-    selectionColor?: ColorTokens
-    render?: TamaguiComponentPropsBase['render']
-    /**
-     * @deprecated - use `render='textarea'` instead
-     */
-    multiline?: boolean
-    /**
-     * @deprecated - use `rows` instead
-     */
-    numberOfLines?: number
-  }