@tamagui/input 1.143.1 → 2.0.0-1

package/src/Input.native.tsx

@@ -1,149 +1,184 @@
 import React from 'react'
-import { styled, useComposedRefs } from '@tamagui/core'
+import { TextInput, type TextInputProps as RNTextInputProps } from 'react-native'
+import { styled, useComposedRefs, useTheme, getTokenValue } from '@tamagui/core'
 import { registerFocusable } from '@tamagui/focusable'
-
-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])
 
-export const Input = StyledInput.styleable<InputProps>((inProps, forwardedRef) => {
+/**
+ * A web-aligned input component for React Native.
+ * @see — Docs https://tamagui.dev/ui/inputs#input
+ */
+export const Input = StyledInput.styleable<InputProps>((props, forwardedRef) => {
   const {
-    // some of destructed props are just to avoid passing them to ...rest because they are not in native.
+    // Web props we need to convert
     type,
-    //@ts-ignore
+    disabled,
+    readOnly,
+    id,
+    rows,
+    autoComplete,
+    enterKeyHint,
+
+    // Tamagui color props
+    placeholderTextColor,
+    selectionColor,
+
+    // Callbacks
+    onChange,
+    onInput,
+    onKeyDown,
+    onChangeText,
+    onSubmitEditing,
+    onSelectionChange,
+    selection,
+
+    // Web-only props to filter out
+    // @ts-ignore
     dirname,
-    max,
     min,
+    max,
     minLength,
     multiple,
     name,
+    pattern,
     required,
     step,
-    disabled,
-    id,
-    caretColor,
-    onChange,
-    onInput,
-    rows,
-    enterKeyHint,
-    returnKeyType,
-    onKeyDown,
-    inputMode,
     tag,
-    ...rest
-  } = inProps
 
-  const ref = React.useRef<HTMLInputElement>(null)
+    ...rest
+  } = props
 
+  const ref = React.useRef<any>(null)
+  const theme = useTheme()
   const composedRefs = useComposedRefs<any>(forwardedRef, ref)
 
-  // TODO: later move most of the logic to the core package
-
+  // Convert web type to native props
   let secureTextEntry = false
-  let cursorColor = caretColor
-  let _returnKeyType = returnKeyType
-  let _enterKeyHint = enterKeyHint
-  if (enterKeyHint === 'go') {
-    _returnKeyType = 'go'
-    _enterKeyHint = undefined
-  }
+  let keyboardType: RNTextInputProps['keyboardType'] = 'default'
+  let inputMode: RNTextInputProps['inputMode'] = 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'
+  switch (type) {
+    case 'password':
+      secureTextEntry = true
+      break
+    case 'email':
+      keyboardType = 'email-address'
+      inputMode = 'email'
+      break
+    case 'tel':
+      keyboardType = 'phone-pad'
+      inputMode = 'tel'
+      break
+    case 'number':
+      keyboardType = 'numeric'
+      inputMode = 'numeric'
+      break
+    case 'url':
+      keyboardType = 'url'
+      inputMode = 'url'
+      break
+    case 'search':
+      inputMode = 'search'
+      break
   }
 
-  let showSoftInputOnFocus = true
-  if (inputMode === 'none') {
-    showSoftInputOnFocus = false
+  // Convert enterKeyHint to returnKeyType
+  let returnKeyType: RNTextInputProps['returnKeyType'] = undefined
+  switch (enterKeyHint) {
+    case 'done':
+      returnKeyType = 'done'
+      break
+    case 'go':
+      returnKeyType = 'go'
+      break
+    case 'next':
+      returnKeyType = 'next'
+      break
+    case 'search':
+      returnKeyType = 'search'
+      break
+    case 'send':
+      returnKeyType = 'send'
+      break
   }
 
-  const finalProps = {
-    ...rest,
-    inputMode: _inputMode,
-    showSoftInputOnFocus,
-    disabled,
-    id,
-    cursorColor,
-    enterKeyHint: _enterKeyHint,
-    returnKeyType: _returnKeyType,
-    secureTextEntry,
-    numberOfLines: rows || rest.numberOfLines,
-  } as any
+  // Resolve color tokens
+  const resolvedPlaceholderColor = placeholderTextColor
+    ? getTokenValue(
+        theme[placeholderTextColor as any]?.val ?? placeholderTextColor,
+        'color'
+      )
+    : undefined
+
+  const resolvedSelectionColor = selectionColor
+    ? getTokenValue(theme[selectionColor as any]?.val ?? selectionColor, 'color')
+    : undefined
+
+  // Register focusable
+  React.useEffect(() => {
+    if (!id || disabled) return
+    return registerFocusable(id, {
+      focusAndSelect: () => ref.current?.focus(),
+      focus: () => ref.current?.focus(),
+    })
+  }, [id, disabled])
 
-  if (tag === 'textarea') {
-    finalProps.multiline = true
+  // Handle web onChange/onInput -> native onChangeText
+  const handleChangeText = (text: string) => {
+    onChangeText?.(text)
+    if (onChange) {
+      onChange({ target: { value: text }, type: 'change' } as any)
+    }
+    if (onInput) {
+      onInput({ target: { value: text }, type: 'input' } as any)
+    }
   }
 
-  if (onKeyDown) {
-    finalProps.onKeyPress = (e) => {
+  // Handle onKeyDown via onKeyPress + onSubmitEditing
+  const handleKeyPress = (e: any) => {
+    if (onKeyDown) {
       const { key } = e.nativeEvent
-      if (
-        key === 'Backspace' ||
-        (tag === 'textarea' && key === 'Enter') ||
-        key.length === 1
-      ) {
-        onKeyDown({
-          key,
-          type: 'keydown',
-        } as any)
+      if (key === 'Backspace' || 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)
-      }
+  const handleSubmitEditing = (e: any) => {
+    if (onKeyDown) {
+      onKeyDown({ key: 'Enter', type: 'keydown' } as any)
+    }
+    if (onSubmitEditing) {
+      onSubmitEditing(e)
     }
   }
 
-  React.useEffect(() => {
-    if (!id) return
-    if (disabled) return
+  // Handle selection change
+  const handleSelectionChange = (e: any) => {
+    onSelectionChange?.(e)
+  }
 
-    return registerFocusable(id, {
-      focusAndSelect: () => {
-        ref.current?.focus()
-      },
-      focus: () => {},
-    })
-  }, [id, disabled])
-  return <StyledInput onChange={(e) => {}} ref={composedRefs} {...finalProps} />
+  const finalProps: any = {
+    ...rest,
+    editable: !disabled && !readOnly,
+    secureTextEntry,
+    keyboardType,
+    inputMode,
+    returnKeyType,
+    multiline: tag === 'textarea' || (rows && rows > 1),
+    numberOfLines: rows,
+    selection,
+    placeholderTextColor: resolvedPlaceholderColor,
+    selectionColor: resolvedSelectionColor,
+    onChangeText: handleChangeText,
+    onKeyPress: onKeyDown ? handleKeyPress : undefined,
+    onSubmitEditing: onKeyDown || onSubmitEditing ? handleSubmitEditing : undefined,
+    onSelectionChange: onSelectionChange ? handleSelectionChange : undefined,
+    autoComplete: autoComplete as any,
+  }
+
+  return <StyledInput ref={composedRefs} {...finalProps} />
 })

package/src/Input.tsx

@@ -1,148 +1,94 @@
-import { View, styled, useComposedRefs, useEvent, useTheme } from '@tamagui/core'
+import { View, styled, useComposedRefs, useTheme } from '@tamagui/core'
 import { registerFocusable } from '@tamagui/focusable'
-import React, { type HTMLAttributes, type HTMLInputTypeAttribute } from 'react'
+import React from 'react'
 import { styledBody } from './shared'
 import type { InputProps } from './types'
 
 const StyledInput = styled(View, styledBody[0], styledBody[1])
 
 /**
- * @summary An input is a text field that allows users to enter text.
+ * A web-aligned input component.
  * @see — Docs https://tamagui.dev/ui/inputs#input
  */
-export const Input = StyledInput.styleable<InputProps>((inProps, forwardedRef) => {
+export const Input = StyledInput.styleable<InputProps>((props, 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,
+    onSubmitEditing,
     onSelectionChange,
-    caretColor,
+    selection,
     placeholderTextColor,
-    blurOnSubmit,
-    enterKeyHint,
-    returnKeyType,
-    rejectResponderTermination,
-    scrollEnabled,
-    secureTextEntry,
     selectionColor,
-    inputMode,
+    rows,
     ...rest
-  } = inProps
+  } = props
 
   const ref = React.useRef<HTMLInputElement>(null)
   const theme = useTheme()
-
   const composedRefs = useComposedRefs(forwardedRef, ref)
 
-  const _onSelectionChange = useEvent(() => {
-    const start = ref.current?.selectionStart ?? 0
-    const end = ref.current?.selectionEnd ?? 0
-    onSelectionChange?.({
-      nativeEvent: {
-        selection: {
-          end,
-          start,
+  // Handle selection changes
+  React.useEffect(() => {
+    if (!onSelectionChange) return
+
+    const node = ref.current
+    if (!node) return
+
+    const handleSelectionChange = () => {
+      onSelectionChange({
+        nativeEvent: {
+          selection: {
+            start: node.selectionStart ?? 0,
+            end: node.selectionEnd ?? 0,
+          },
         },
-      },
-    } as any)
-  })
+      })
+    }
 
+    node.addEventListener('select', handleSelectionChange)
+    return () => node.removeEventListener('select', handleSelectionChange)
+  }, [onSelectionChange])
+
+  // Sync selection prop
   React.useEffect(() => {
-    if (onSelectionChange) {
-      ref.current?.addEventListener('selectionchange', _onSelectionChange)
-      return () => {
-        ref.current?.removeEventListener('selectionchange', _onSelectionChange)
-      }
+    if (selection && ref.current) {
+      ref.current.setSelectionRange(selection.start, selection.end ?? selection.start)
     }
-  }, [])
+  }, [selection?.start, selection?.end])
 
+  // Register focusable
   React.useEffect(() => {
-    if (selection) {
-      ref.current?.setSelectionRange(selection.start || null, selection.end || null)
+    if (!id || disabled) return
+    return registerFocusable(id, {
+      focusAndSelect: () => ref.current?.focus(),
+      focus: () => ref.current?.focus(),
+    })
+  }, [id, disabled])
+
+  // Handle keyboard submit
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && onSubmitEditing) {
+      onSubmitEditing({
+        nativeEvent: { text: (e.target as HTMLInputElement).value },
+      })
     }
-  }, [selection?.start, selection?.end])
+    rest.onKeyDown?.(e)
+  }
+
+  // Handle change with onChangeText support
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChangeText?.(e.target.value)
+    rest.onChange?.(e)
+  }
 
   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,
-        }),
+    rows,
+    onKeyDown: onSubmitEditing ? handleKeyDown : rest.onKeyDown,
+    onChange: onChangeText ? handleChange : rest.onChange,
     style: {
       ...(rest.style as any),
       ...(placeholderTextColor && {
@@ -155,34 +101,18 @@ export const Input = StyledInput.styleable<InputProps>((inProps, forwardedRef) =
     },
   } 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(--selectionBackground) !important;
-      }
-      
-      input::placeholder, textarea::placeholder {
-        color: var(--placeholderColor) !important;
-      }
-      `}
-        </style>
-      )}
-
+      <style>
+        {`
+          input::selection, textarea::selection {
+            background-color: var(--selectionColor) !important;
+          }
+          input::placeholder, textarea::placeholder {
+            color: var(--placeholderColor) !important;
+          }
+        `}
+      </style>
       <StyledInput ref={composedRefs} {...finalProps} />
     </>
   )

package/src/TextArea.tsx

@@ -2,8 +2,10 @@ import { styled } from '@tamagui/web'
 import { Input } from './Input'
 import { defaultStyles, textAreaSizeVariant } from './shared'
 
+export type { InputProps as TextAreaProps } from './types'
+
 /**
- * @summary A text area is a multi-line input field that allows users to enter text.
+ * A web-aligned textarea component (multi-line input).
  * @see — Docs https://tamagui.dev/ui/inputs#textarea
  */
 export const TextArea = styled(Input, {
@@ -19,7 +21,7 @@ export const TextArea = styled(Input, {
       false: {
         height: 'auto',
         ...defaultStyles,
-        numberOfLines: 3,
+        rows: 3,
       },
     },
 

package/src/index.ts

@@ -1,4 +1,3 @@
 export * from './Input'
 export * from './TextArea'
 export { inputSizeVariant, textAreaSizeVariant } from './shared'
-export type { InputProps } from './types'