@codeleap/web 5.4.4 → 5.4.5

package/src/components/Select/types.ts

@@ -1,4 +1,3 @@
-import { FormTypes, yup } from '@codeleap/deprecated'
 import { MutableRefObject } from 'react'
 import { GroupBase, NoticeProps, OptionProps, Props } from 'react-select'
 import { AsyncProps } from 'react-select/async'
@@ -7,6 +6,8 @@ import { ButtonProps } from '../Button'
 import { InputBaseProps } from '../InputBase'
 import { SelectComposition, OptionState } from './styles'
 import { ICSS, StyledProp } from '@codeleap/styles'
+import { Label, Option, Options } from '@codeleap/types'
+import { Validator } from '@codeleap/form'
 
 type SelectValue<T, Multi extends boolean> = Multi extends true ? T[] : T
 
@@ -14,23 +15,23 @@ type OmitWithValues<T> = Omit<T, 'options' | 'value' | 'isMulti' | 'loadOptions'
 
 type DynamicSelectProps<T, Multi extends boolean> =
   ({
-    loadOptions?: (search: string) => Promise<FormTypes.Options<T>>
-    defaultValues?: FormTypes.Options<T>
+    loadOptions?: (search: string) => Promise<Options<T>>
+    defaultValues?: Options<T>
   } & OmitWithValues<
-    AsyncProps<FormTypes.Option<T>, Multi, GroupBase<FormTypes.Option<T>>>
+    AsyncProps<Option<T>, Multi, GroupBase<Option<T>>>
   >) |
   ({
     loadOptions?: never
   } & OmitWithValues<
-    Props<FormTypes.Option<T>, Multi, GroupBase<FormTypes.Option<T>>>
+    Props<Option<T>, Multi, GroupBase<Option<T>>>
   >)
 
 export type ReactSelectProps<T, Multi extends boolean = false> = Omit<InputBaseProps, 'style'> & {
-  options: FormTypes.Options<T> & { itemProps?: ButtonProps }
+  options: Options<T> & { itemProps?: ButtonProps }
   value: SelectValue<T, Multi>
   onValueChange?: (value: SelectValue<T, Multi>) => void
   multiple?: Multi
-  validate?: FormTypes.ValidatorWithoutForm<SelectValue<T, Multi>> | yup.Schema<SelectValue<T, Multi>>
+  validate?: Validator<SelectValue<T, Multi>, any, any>
 } & DynamicSelectProps<T, Multi>
 
 export type ComponentPartProps = {
@@ -97,9 +98,9 @@ export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWit
     limit?: number
     loadInitialValue?: boolean
     loadingMessage?: string
-    selectedOption?: { label: FormTypes.Label; value: T } | SelectValue<T, Multi>
+    selectedOption?: { label: Label; value: T } | SelectValue<T, Multi>
     selectRef?: MutableRefObject<any>
-    setSelectedOption?: (value: { label: FormTypes.Label; value: T } | SelectValue<T, Multi>) => void
+    setSelectedOption?: (value: { label: Label; value: T } | SelectValue<T, Multi>) => void
     style?: StyledProp<SelectComposition>
   } & Omit<
     ReactSelectProps<T, Multi>,

package/src/components/Slider/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { TypeGuards } from '@codeleap/types'
 import { onMount, useRef } from '@codeleap/hooks'
-
 import { View } from '../View'
 import { InputBase, selectInputBaseProps } from '../InputBase'
 import { Text } from '../Text'
@@ -16,6 +15,9 @@ import { SliderProps, TrackMarkProps } from './types'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { useInputBase } from '../InputBase/useInputBase'
+import { fields } from '@codeleap/form'
+import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyles'
 
 export * from './styles'
 export * from './types'
@@ -45,6 +47,7 @@ export const Slider = (props: SliderProps) => {
     onValueChange,
     onValueCommit,
     value: _value,
+    field,
     label,
     debugName,
     style,
@@ -65,8 +68,14 @@ export const Slider = (props: SliderProps) => {
 
   const styles = useStylesFor(Slider.styleRegistryName, style)
 
-  const isUniqueValue = !TypeGuards.isArray(_value)
-  const value = isUniqueValue ? [_value] : _value
+  const {
+    wrapperRef,
+    inputValue,
+    onInputValueChange,
+  } = useInputBase(field, fields.number, { value: _value, onValueChange })
+
+  const isUniqueValue = !TypeGuards.isArray(inputValue)
+  const value = isUniqueValue ? [inputValue] : inputValue
 
   const _defaultValue = TypeGuards.isArray(defaultSliderValue) ? defaultSliderValue : [defaultSliderValue]
 
@@ -80,43 +89,13 @@ export const Slider = (props: SliderProps) => {
   })
 
   const handleChange: SliderProps['onValueChange'] = (newValue: Array<number>) => {
-    onValueChange?.(isUniqueValue ? newValue?.[0] : newValue)
+    onInputValueChange?.(isUniqueValue ? newValue?.[0] : newValue)
   }
 
   const handleValueCommit = (newValue: Array<number>) => {
     onValueCommit?.(newValue)
   }
 
-  const thumbStyle = React.useMemo(() => {
-    return mergeStyles([
-      styles.thumb,
-      disabled && styles['thumb:disabled'],
-    ])
-  }, [])
-
-  const trackStyle = React.useMemo(() => {
-    return mergeStyles([
-      styles.track,
-      disabled && styles['track:disabled'],
-      styles.unselectedTrack,
-      disabled && styles['unselectedTrack:disabled'],
-    ])
-  }, [disabled])
-
-  const selectedTrackStyle = React.useMemo(() => {
-    return mergeStyles([
-      styles.selectedTrack,
-      disabled && styles['selectedTrack:disabled'],
-    ])
-  }, [disabled])
-
-  const containerStyle = React.useMemo(() => {
-    return mergeStyles([
-      styles.sliderContainer,
-      disabled && styles['sliderContainer:disabled'],
-    ])
-  }, [disabled])
-
   const trackMarksHaveContent = !(TypeGuards.isArray(trackMarks) || TypeGuards.isNil(trackMarks))
 
   const trackMarksProp = React.useMemo(() => {
@@ -126,19 +105,15 @@ export const Slider = (props: SliderProps) => {
     return Object.keys(trackMarks).map((key) => Number(key))
   }, [trackMarksHaveContent])
 
-  const trackMarkStyle = React.useMemo(() => {
-    return mergeStyles([
-      styles.trackMark,
-      disabled && styles['trackMark:disabled'],
-    ])
-  }, [disabled])
+  const partialStyles = useInputBasePartialStyles(
+    styles,
+    ['thumb', 'track', 'selectedTrack', 'unselectedTrack', 'sliderContainer', 'trackMark', 'trackMarkWrapper'],
+    { disabled }
+  )
 
-  const trackMarkWrapperStyle = React.useMemo(() => {
-    return mergeStyles([
-      styles.trackMarkWrapper,
-      disabled && styles['trackMarkWrapper:disabled'],
-    ])
-  }, [disabled])
+  const trackStyle = React.useMemo(() => {
+    return mergeStyles([partialStyles?.track, partialStyles.unselectedTrack])
+  }, [partialStyles?.track, partialStyles.unselectedTrack])
 
   const sliderLabel = React.useMemo(() => {
     if (TypeGuards.isNil(indicatorLabel) || !indicatorLabel?.order && !indicatorLabel?.transformer) {
@@ -168,6 +143,7 @@ export const Slider = (props: SliderProps) => {
   return (
     <InputBase
       {...inputBaseProps}
+      ref={wrapperRef}
       disabled={disabled}
       style={styles}
       labelAsRow
@@ -182,20 +158,20 @@ export const Slider = (props: SliderProps) => {
         defaultValue={defaultValue}
         onValueCommit={handleValueCommit}
         onValueChange={handleChange}
-        style={containerStyle}
+        style={partialStyles?.sliderContainer}
         value={value}
         minStepsBetweenThumbs={minStepsBetweenThumbs}
       >
         <SliderTrack style={trackStyle}>
-          <SliderRange style={selectedTrackStyle} />
+          <SliderRange style={partialStyles?.selectedTrack} />
         </SliderTrack>
 
         {defaultValue.map((_, i) => (
           <SliderThumb
             key={i}
-            style={thumbStyle}
+            style={partialStyles?.thumb}
             onClick={() => {
-              if (onPressThumbSetValue) onValueChange?.(value)
+              if (onPressThumbSetValue) onInputValueChange?.(value)
               if (TypeGuards.isFunction(onPressThumb)) onPressThumb?.(value, i)
             }}
           />
@@ -203,7 +179,7 @@ export const Slider = (props: SliderProps) => {
       </SliderContainer>
 
       {trackMarksProp ?
-        <View style={trackMarkWrapperStyle}>
+        <View style={partialStyles?.trackMarkWrapper}>
           {
             trackMarksProp.map((_, idx) => {
               let idxStyle = {}
@@ -225,7 +201,7 @@ export const Slider = (props: SliderProps) => {
                 }
               }
 
-              const style = mergeStyles([trackMarkStyle, idxStyle])
+              const style = mergeStyles([partialStyles?.trackMark, idxStyle])
 
               if (!trackMarksHaveContent) {
                 return <SliderTrackMark

package/src/components/Slider/types.ts

@@ -3,6 +3,7 @@ import { InputBaseProps } from '../InputBase'
 import { SliderComposition } from './styles'
 import { SliderProps as PrimitiveSliderProps } from '@radix-ui/react-slider'
 import { CSSProperties } from 'react'
+import { NumberField } from '@codeleap/form'
 
 export type SliderProps = 
   Partial<Omit<PrimitiveSliderProps, 'value' | 'onValueChange' | 'style'>> &
@@ -13,8 +14,9 @@ export type SliderProps =
       separator?: string
       transformer?: (value: number[], defaultValue: PrimitiveSliderProps['defaultValue']) => string
     }
-    value: number | number[]
-    onValueChange: (val: number | number[]) => void
+    field?: NumberField<any>
+    value?: number | number[]
+    onValueChange?: (val: number | number[]) => void
     style?: StyledProp<SliderComposition>
     trackMarks?: Record<number, string>
     trackMarkComponent?: React.ComponentType<TrackMarkProps>

package/src/components/Switch/index.tsx

@@ -6,6 +6,8 @@ import { motion } from 'framer-motion'
 import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { SwitchProps } from './types'
+import { useInputBase } from '../InputBase/useInputBase'
+import { fields } from '@codeleap/form'
 
 export * from './styles'
 export * from './types'
@@ -29,10 +31,18 @@ export const Switch = (props: SwitchProps) => {
     onValueChange,
     onChange,
     switchOnLeft,
+    field,
   } = switchProps
 
   const styles = useStylesFor(Switch.styleRegistryName, style)
 
+  const {
+    validation,
+    wrapperRef,
+    inputValue,
+    onInputValueChange,
+  } = useInputBase<boolean>(field, fields.boolean, { value, onValueChange })
+
   const trackAnimation = useAnimatedVariantStyles({
     variantStyles: styles,
     animatedProperties: ['track:off', 'track:disabled', 'track:on', 'track:disabled-on', 'track:disabled-off'],
@@ -40,16 +50,16 @@ export const Switch = (props: SwitchProps) => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? styles['track:disabled-on'] : styles['track:disabled-off']
+        disabledStyle = inputValue ? styles['track:disabled-on'] : styles['track:disabled-off']
       }
-      const style = value ? styles['track:on'] : styles['track:off']
+      const style = inputValue ? styles['track:on'] : styles['track:off']
 
       return {
         ...style,
         ...disabledStyle,
       }
     },
-    dependencies: [value, disabled],
+    dependencies: [inputValue, disabled],
   })
 
   const thumbAnimation = useAnimatedVariantStyles({
@@ -59,15 +69,15 @@ export const Switch = (props: SwitchProps) => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? styles['thumb:disabled-on'] : styles['thumb:disabled-off']
+        disabledStyle = inputValue ? styles['thumb:disabled-on'] : styles['thumb:disabled-off']
       }
-      const style = value ? styles['thumb:on'] : styles['thumb:off']
+      const style = inputValue ? styles['thumb:on'] : styles['thumb:off']
       return {
         ...style,
         ...disabledStyle,
       }
     },
-    dependencies: [value, disabled],
+    dependencies: [inputValue, disabled],
   })
 
   // @ts-expect-error icss type
@@ -79,14 +89,15 @@ export const Switch = (props: SwitchProps) => {
   const handleChange = (e) => {
     if (disabled) return
     if (e?.type === 'click' || e?.keyCode === 13 || e?.key === 'Enter') {
-      if (onValueChange) onValueChange?.(!value)
-      if (onChange) onChange?.(!value)
+      onInputValueChange?.(!inputValue)
+      if (onChange) onChange?.(!inputValue)
     }
   }
 
   return (
     <InputBase
       {...inputBaseProps}
+      ref={wrapperRef}
       debugName={debugName}
       style={styles}
       order={_switchOnLeft ? reversedOrder : InputBaseDefaultOrder}

package/src/components/Switch/types.ts

@@ -1,13 +1,15 @@
 import { StyledProp } from '@codeleap/styles'
 import { InputBaseProps } from '../InputBase'
 import { SwitchComposition } from './styles'
+import { BooleanField } from '@codeleap/form'
 
 export type SwitchProps = 
   Pick<InputBaseProps, 'debugName' | 'disabled' | 'label'> & 
   {
     style?: StyledProp<SwitchComposition>
-    value: boolean
-    onValueChange: (value: boolean) => void
     onChange?: (value: boolean) => void
     switchOnLeft?: boolean
+    field?: BooleanField<any>
+    value?: boolean
+    onValueChange?: (value: boolean) => void
   }

package/src/components/TextEditor/index.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import { onUpdate, useCallback, useState } from '@codeleap/hooks'
-import { useValidate } from '@codeleap/deprecated'
+import { onUpdate, useCallback } from '@codeleap/hooks'
 import { BubbleMenu, FloatingMenu, EditorContent } from '@tiptap/react'
 import { FileInput, Text, View } from '../components'
 import { TextEditorProps } from './types'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { useValidate } from '@codeleap/form'
 
 export * from './styles'
 export * from './types'
@@ -20,7 +20,6 @@ export const TextEditor = (props: TextEditorProps) => {
     floatingMenuProps,
     toolbarComponent,
     fileInputRef,
-    _error,
     validate,
   } = {
     ...TextEditor.defaultProps,
@@ -29,22 +28,15 @@ export const TextEditor = (props: TextEditorProps) => {
 
   const styles = useStylesFor(TextEditor.styleRegistryName, style)
 
-  const [_isFocused, setIsFocused] = useState(false)
   const validation = useValidate(editor?.getText() ?? '', validate)
 
-  const hasError = !validation.isValid || _error
-  const errorMessage = validation.message || _error
   const isDisabled = !editor?.isEditable ?? null
 
   const handleBlur = React.useCallback(() => {
     validation?.onInputBlurred()
-    setIsFocused(false)
   }, [validation?.onInputBlurred])
 
-  const handleFocus = React.useCallback(() => {
-    validation?.onInputFocused()
-    setIsFocused(true)
-  }, [validation?.onInputFocused])
+  const handleFocus = React.useCallback(() => {}, [])
 
   onUpdate(() => {
     editor?.on('blur', handleBlur)
@@ -80,7 +72,7 @@ export const TextEditor = (props: TextEditorProps) => {
 
   const editorStyles = [
     styles.editor,
-    hasError && styles['editor:error'],
+    validation?.showError && styles['editor:error'],
     isDisabled && styles['editor:disabled'],
   ]
 
@@ -90,7 +82,7 @@ export const TextEditor = (props: TextEditorProps) => {
     <View
       style={[
         styles.wrapper,
-        hasError && styles['wrapper:error'],
+        validation?.showError && styles['wrapper:error'],
         {
           '.tiptap': editorStyles,
         },
@@ -101,7 +93,7 @@ export const TextEditor = (props: TextEditorProps) => {
       <_BubbleMenu />
       <_FloatingMenu />
       <EditorContent editor={editor} />
-      {hasError ? <Text text={errorMessage as string} style={styles['errorMessage:error']} /> : null}
+      {validation?.showError ? <Text text={validation?.message as string} style={styles['errorMessage:error']} /> : null}
       <FileInput ref={fileInputRef} />
     </View>
   )

package/src/components/TextEditor/types.ts

@@ -1,10 +1,10 @@
 import { RefObject } from 'react'
 import { AnyFunction } from '@codeleap/types'
-import { FormTypes, yup } from '@codeleap/deprecated'
 import { StyledProp } from '@codeleap/styles'
 import { BubbleMenuProps, Editor, FloatingMenuProps } from '@tiptap/react'
 import { FileInputRef } from '../FileInput'
 import { TextEditorComposition } from './styles'
+import { Validator } from '@codeleap/form'
 
 export type TextEditorProps = React.PropsWithChildren<{
   editor: Editor & {
@@ -18,6 +18,5 @@ export type TextEditorProps = React.PropsWithChildren<{
   floatingMenuProps?: FloatingMenuProps & { renderContent: React.ReactNode }
   toolbarComponent?: JSX.Element
   fileInputRef?: RefObject<FileInputRef>
-  _error?: boolean
-  validate?: FormTypes.ValidatorWithoutForm<string> | yup.Schema<string>
+  validate?: Validator<string, any, any>
 }>

package/src/components/TextInput/index.tsx

@@ -1,121 +1,98 @@
-import { useBooleanToggle } from '@codeleap/hooks'
 import { TypeGuards } from '@codeleap/types'
-import { useValidate } from '@codeleap/deprecated'
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react'
+import React, { forwardRef, useImperativeHandle } from 'react'
 import TextareaAutosize from 'react-autosize-textarea'
 import InputMask from 'react-input-mask'
 import { Touchable } from '../Touchable'
 import { InputBase, selectInputBaseProps } from '../InputBase'
-import { getMaskInputProps } from './mask'
 import { getTestId } from '../../lib/utils/test'
 import { InputRef, TextInputProps } from './types'
-import { FileInputRef } from '../FileInput'
 import { AnyRecord, AppIcon, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { useTextInput } from './useTextInput'
+import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyles'
 
 export * from './types'
 export * from './styles'
 export * from './mask'
 
-export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputRef) => {
+export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef) => {
+  const allProps = {
+    ...TextInput.defaultProps,
+    ...props,
+  }
+
   const {
     inputBaseProps,
     others,
-  } = selectInputBaseProps({
-    ...TextInput.defaultProps,
-    ...props,
-  })
+  } = selectInputBaseProps(allProps)
 
   const {
     style,
-    value,
-    validate,
     debugName,
     visibilityToggle,
     password,
     onPress,
-    multiline,
     caretColor,
-    focused,
-    _error,
-    masking,
     visibleIcon,
     hiddenIcon,
+    focused,
     ...textInputProps
   } = others as TextInputProps
 
-  const innerInputRef = useRef<InputRef>(null)
-
   const styles = useStylesFor(TextInput.styleRegistryName, style)
 
-  const [_isFocused, setIsFocused] = useState(false)
+  const {
+    isMultiline,
+    isMasked,
+    isFocused: isInputFocused,
+    secureTextEntry,
+    handleBlur,
+    handleFocus,
+    handleChange,
+    maskProps,
+    innerInputRef,
+    wrapperRef,
+    errorMessage,
+    toggleSecureTextEntry,
+    hasMultipleLines,
+    hasError,
+    inputValue,
+  } = useTextInput(allProps)
+
+  const isFocused = isInputFocused || focused
 
-  const isFocused = _isFocused || focused
+  const isDisabled = !!inputBaseProps.disabled
 
-  const [secureTextEntry, toggleSecureTextEntry] = useBooleanToggle(true)
+  const partialStyles = useInputBasePartialStyles(styles, ['placeholder', 'selection'], {
+    disabled: isDisabled,
+    error: !!hasError,
+    focus: isFocused,
+  })
 
-  const isMultiline = multiline
+  const InputElement = isMasked ? InputMask : isMultiline ? TextareaAutosize : 'input'
 
-  const isMasked = !TypeGuards.isNil(masking)
-  const maskProps = isMasked ? getMaskInputProps({ masking }) : null
+  const isPressable = TypeGuards.isFunction(onPress)
 
-  const InputElement = isMasked ? InputMask : isMultiline ? TextareaAutosize : 'input'
+  const focus = () => {
+    if (isMasked) {
+      // @ts-expect-error
+      innerInputRef.current?.getInputDOMNode()?.focus()
+    }
+
+    innerInputRef.current?.focus?.()
+  }
 
-  // @ts-ignore
   useImperativeHandle(inputRef, () => {
     return {
-      focus: () => {
-        if (isMasked) {
-          // @ts-expect-error
-          innerInputRef.current?.getInputDOMNode()?.focus()
-        }
-        innerInputRef.current?.focus?.()
-      },
+      focus: () => focus(),
       isTextInput: true,
       getInputRef: () => {
-        return innerInputRef.current
+        return innerInputRef.current as unknown as HTMLInputElement
       },
     }
   }, [!!innerInputRef?.current?.focus])
 
-  const isPressable = TypeGuards.isFunction(onPress)
-
-  const validation = useValidate(
-    value,
-    TypeGuards.isFunction(maskProps?.validator) ? maskProps?.validator : validate,
-  )
-
-  const handleBlur = React.useCallback((e: React.FocusEvent<HTMLInputElement, Element>) => {
-    validation?.onInputBlurred()
-    setIsFocused(false)
-    props?.onBlur?.(e)
-  }, [validation?.onInputBlurred, props?.onBlur])
-
-  const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement, Element>) => {
-    validation?.onInputFocused()
-    setIsFocused(true)
-    props?.onFocus?.(e)
-  }, [validation?.onInputFocused, props?.onFocus])
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const _text = event?.target?.value
-
-    const _value = isMasked && maskProps?.notSaveFormatted
-      ? maskProps?.getRawValue(_text)
-      : _text
-
-    if (props?.onChange) props?.onChange(event)
-    if (props?.onChangeText) props?.onChangeText(_value)
-  }
-
-  const isDisabled = !!inputBaseProps.disabled
-
   const visibilityToggleProps = visibilityToggle ? {
     onPress: toggleSecureTextEntry,
     icon: (secureTextEntry ? hiddenIcon : visibleIcon) as AppIcon,
@@ -128,27 +105,6 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
     editable: false,
     caretHidden: true,
   } : {}
-  const rows = textInputProps?.rows ?? (
-    isMultiline ? 2 : undefined
-  )
-  const hasMultipleLines = isMultiline && (String(value)?.includes('\n') || !!rows)
-
-  const hasError = !validation.isValid || _error
-  const errorMessage = validation.message || _error
-
-  const placeholderStyles = [
-    styles.placeholder,
-    isFocused && styles['placeholder:focus'],
-    hasError && styles['placeholder:error'],
-    isDisabled && styles['placeholder:disabled'],
-  ]
-
-  const selectionStyles = [
-    styles.selection,
-    isFocused && styles['selection:focus'],
-    hasError && styles['selection:error'],
-    isDisabled && styles['selection:disabled'],
-  ]
 
   const secureTextProps = (password && secureTextEntry) && {
     type: 'password',
@@ -166,6 +122,7 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
     <InputBase
       innerWrapper={isPressable ? Touchable : undefined}
       {...inputBaseProps}
+      ref={wrapperRef}
       debugName={debugName}
       error={hasError ? errorMessage : null}
       style={{
@@ -179,11 +136,7 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
       innerWrapperProps={{
         ...(inputBaseProps.innerWrapperProps || {}),
         [inputBaseAction]: () => {
-          if (isMasked) {
-            // @ts-expect-error
-            innerInputRef.current?.getInputDOMNode()?.focus()
-          }
-          innerInputRef.current?.focus?.()
+          focus()
           if (isPressable) onPress?.()
         },
         debugName,
@@ -196,11 +149,7 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
         {...buttonModeProps}
         {...secureTextProps}
         {...textInputProps}
-        value={value}
-        onChange={(e) => handleChange(e)}
-        // @ts-ignore
         onBlur={handleBlur}
-        // @ts-ignore
         onFocus={handleFocus}
         css={[
           styles.input,
@@ -210,10 +159,10 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
           isDisabled && styles['input:disabled'],
           hasMultipleLines && styles['input:hasMultipleLines'],
           {
-            '&::placeholder': placeholderStyles,
+            '&::placeholder': partialStyles?.placeholder,
           },
           {
-            '&::selection': selectionStyles,
+            '&::selection': partialStyles?.selection,
           },
           {
             '&:focus': [
@@ -224,6 +173,8 @@ export const TextInput = forwardRef<FileInputRef, TextInputProps>((props, inputR
           },
         ]}
         {...maskProps}
+        value={inputValue}
+        onChange={handleChange}
         ref={innerInputRef}
         data-testid={testId}
       />