@codeleap/web 3.6.1 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.6.1",
+  "version": "3.7.0",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/Checkbox/index.tsx

@@ -5,6 +5,7 @@ import {
   useDefaultComponentStyle,
   StylesOf,
   PropsOf,
+  IconPlaceholder,
 } from '@codeleap/common'
 import { View } from '../View'
 import { CheckboxPresets, CheckboxComposition } from './styles'
@@ -25,10 +26,15 @@ export type CheckboxProps = Pick<
   onValueChange: (value: boolean) => void
   style?: PropsOf<typeof View>['style']
   checkboxOnLeft?: boolean
+  checkIcon?: IconPlaceholder
 } & ComponentVariants<typeof CheckboxPresets>
 
 const reversedOrder = [...InputBaseDefaultOrder].reverse()
 
+const defaultProps: Partial<CheckboxProps> = {
+  checkIcon: 'check' as IconPlaceholder,
+}
+
 export const Checkbox = (props: CheckboxProps) => {
   const {
     inputBaseProps,
@@ -45,6 +51,7 @@ export const Checkbox = (props: CheckboxProps) => {
     debugName,
     onValueChange,
     checkboxOnLeft,
+    checkIcon,
   } = others
 
   const variantStyles = useDefaultComponentStyle<'u:Checkbox', typeof CheckboxPresets>('u:Checkbox', {
@@ -118,7 +125,7 @@ export const Checkbox = (props: CheckboxProps) => {
     order={_checkboxOnLeft ? reversedOrder : InputBaseDefaultOrder}
     style={style}
     wrapperProps={{
-      onClick: handleChange
+      onClick: handleChange,
     }}
   >
     <motion.div
@@ -142,10 +149,13 @@ export const Checkbox = (props: CheckboxProps) => {
       >
         <Icon
           debugName={debugName}
-          name={'checkbox-checkmark' as any}
+          name={checkIcon as any}
           css={[variantStyles.checkmark, disabled && variantStyles['checkmark:disabled']]}
+          style={variantStyles.checkmark}
         />
       </motion.div>
     </motion.div>
   </InputBase>
 }
+
+Checkbox.defaultProps = defaultProps

package/src/components/Drawer/index.tsx

@@ -37,6 +37,7 @@ export type DrawerProps = {
   animationDuration?: string
   closeButtonProps?: Partial<ActionIconProps>
   scrollLocked?: boolean
+  closeIcon?: IconPlaceholder
   children?: React.ReactNode
 } & ComponentVariants<typeof DrawerPresets> & ComponentCommonProps
 
@@ -68,6 +69,7 @@ const defaultProps: Partial<DrawerProps> = {
   size: '75vw',
   title: null,
   scrollLocked: true,
+  closeIcon: 'x' as IconPlaceholder,
 }
 
 export const Drawer = (props: DrawerProps) => {
@@ -94,6 +96,7 @@ export const Drawer = (props: DrawerProps) => {
     animationDuration,
     debugName,
     scrollLocked,
+    closeIcon,
   } = allProps as DrawerProps
 
   usePopState(open, toggle, scrollLocked)
@@ -118,7 +121,7 @@ export const Drawer = (props: DrawerProps) => {
     {
       transition: 'visibility 0.01s ease',
       transitionDelay: open ? '0' : animationDuration,
-      visibility: open ? 'visible' : 'hidden'
+      visibility: open ? 'visible' : 'hidden',
     },
     style,
   ]), [open, variantStyles])
@@ -158,7 +161,7 @@ export const Drawer = (props: DrawerProps) => {
                 <ActionIcon
                   debugName={debugName}
                   onPress={toggle}
-                  icon={'close' as IconPlaceholder}
+                  icon={closeIcon as IconPlaceholder}
                   {...closeButtonProps}
                   styles={closeButtonStyles}
                 />
@@ -166,9 +169,9 @@ export const Drawer = (props: DrawerProps) => {
             </View>
           ) : null
         }
-        
+
         <View css={variantStyles.body}>{children}</View>
-        
+
         {footer && (
           <View component='footer' css={variantStyles.footer}>
             {footer}

package/src/components/Modal/index.tsx

@@ -135,7 +135,7 @@ const ModalDefaultHeader = (props: ModalHeaderProps) => {
 
 const defaultProps: Partial<ModalProps> = {
   title: '',
-  closeIconName: 'close' as IconPlaceholder,
+  closeIconName: 'x' as IconPlaceholder,
   closable: true,
   withOverlay: true,
   showClose: true,

package/src/components/SearchInput/index.tsx

@@ -38,7 +38,7 @@ export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props)
   const hasStateProps = !TypeGuards.isNil(value) && TypeGuards.isFunction(onValueChange)
 
   const [search, setSearch] = hasStateProps ? [value, onValueChange] : useState('')
-  const setSearchTimeout = React.useRef<NodeJS.Timeout|null>(null)
+  const setSearchTimeout = React.useRef<NodeJS.Timeout | null>(null)
 
   const handleChangeSearch = (value: string) => {
     setSearch(value)
@@ -88,6 +88,6 @@ export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props)
 SearchInput.defaultProps = {
   debounce: null,
   clearable: true,
-  clearIcon: 'close' as IconPlaceholder,
+  clearIcon: 'x' as IconPlaceholder,
   searchIcon: 'search' as IconPlaceholder,
 }

package/src/components/Select/index.tsx

@@ -162,7 +162,7 @@ const defaultProps: Partial<SelectProps> = {
   placeholder: 'Select',
   clearable: false,
   formatPlaceholderNoItems: defaultFormatPlaceholderNoItems,
-  selectedIcon: 'checkmark',
+  selectedIcon: 'check',
   searchable: false,
   separatorMultiValue: ', ',
   itemProps: {} as ButtonProps,
@@ -172,273 +172,273 @@ const defaultProps: Partial<SelectProps> = {
 
 export const Select = forwardRef<HTMLInputElement, SelectProps>(
   <T extends string | number = string, Multi extends boolean = false>
-  (props: SelectProps<T, Multi>, inputRef: React.ForwardedRef<HTMLInputElement>) => {
+    (props: SelectProps<T, Multi>, inputRef: React.ForwardedRef<HTMLInputElement>) => {
 
-  type Option = FormTypes.Option<T>
+    type Option = FormTypes.Option<T>
 
-  const {
-    inputBaseProps,
-    others: selectProps,
-  } = selectInputBaseProps({
-    ...Select.defaultProps,
-    ...props,
-  })
+    const {
+      inputBaseProps,
+      others: selectProps,
+    } = selectInputBaseProps({
+      ...Select.defaultProps,
+      ...props,
+    })
+
+    const {
+      variants,
+      validate,
+      styles,
+      debugName,
+      onValueChange,
+      options,
+      value,
+      loadOptions,
+      multiple,
+      limit = null,
+      focused,
+      _error,
+      renderItem: OptionComponent = null,
+      FooterComponent = null,
+      PlaceholderComponent,
+      PlaceholderNoItemsComponent,
+      LoadingIndicatorComponent,
+      noItemsText,
+      noItemsIcon,
+      placeholderText,
+      placeholderIcon,
+      showDropdownIcon,
+      placeholder,
+      clearable,
+      formatPlaceholderNoItems,
+      closeOnSelect = !multiple,
+      selectedIcon,
+      onLoadOptionsError,
+      loadOptionsOnMount = options?.length === 0,
+      searchable,
+      separatorMultiValue,
+      filterItems = null,
+      itemProps = {},
+      loadingIndicatorSize,
+      ...otherProps
+    } = selectProps
+
+    const innerInputRef = useRef<any>(null)
+    const innerWrapperRef = useRef(null)
+
+    const [selectedOption, setSelectedOption] = useState(value)
+
+    const [_isFocused, setIsFocused] = useState(false)
+
+    const [keyDownActive, setKeyDownActive] = useState(false)
+
+    const isFocused = _isFocused || focused
+
+    // @ts-ignore
+    const validation = useValidate(value, validate)
+
+    const isDisabled = !!inputBaseProps.disabled
+
+    const hasError = !validation.isValid || _error
+    const errorMessage = validation.message || _error
+
+    const {
+      reactSelectStyles,
+      variantStyles,
+      optionsStyles,
+      placeholderStyles,
+      loadingStyles,
+      inputMultiValueStyles,
+      menuWrapperStyles,
+    } = useSelectStyles(props, {
+      error: !!hasError,
+      focused: isFocused,
+      disabled: isDisabled,
+    })
+
+    useImperativeHandle(inputRef, () => {
+      return {
+        ...innerInputRef.current,
+        focus: () => {
+          innerInputRef.current?.focus?.()
+        },
+      }
+    }, [!!innerInputRef?.current?.focus])
 
-  const {
-    variants,
-    validate,
-    styles,
-    debugName,
-    onValueChange,
-    options,
-    value,
-    loadOptions,
-    multiple,
-    limit = null,
-    focused,
-    _error,
-    renderItem: OptionComponent = null,
-    FooterComponent = null,
-    PlaceholderComponent,
-    PlaceholderNoItemsComponent,
-    LoadingIndicatorComponent,
-    noItemsText,
-    noItemsIcon,
-    placeholderText,
-    placeholderIcon,
-    showDropdownIcon,
-    placeholder,
-    clearable,
-    formatPlaceholderNoItems,
-    closeOnSelect = !multiple,
-    selectedIcon,
-    onLoadOptionsError,
-    loadOptionsOnMount = options?.length === 0,
-    searchable,
-    separatorMultiValue,
-    filterItems = null,
-    itemProps = {},
-    loadingIndicatorSize,
-    ...otherProps
-  } = selectProps
-
-  const innerInputRef = useRef<any>(null)
-  const innerWrapperRef = useRef(null)
-
-  const [selectedOption, setSelectedOption] = useState(value)
-
-  const [_isFocused, setIsFocused] = useState(false)
-
-  const [keyDownActive, setKeyDownActive] = useState(false)
-
-  const isFocused = _isFocused || focused
+    const onLoadOptions = async (inputValue, cb) => {
+      if (!!loadOptions) {
+        try {
+          const _options = await loadOptions(inputValue).then((options) => {
+            cb(options)
+            return options
+          })
 
-  // @ts-ignore
-  const validation = useValidate(value, validate)
-
-  const isDisabled = !!inputBaseProps.disabled
-
-  const hasError = !validation.isValid || _error
-  const errorMessage = validation.message || _error
-
-  const {
-    reactSelectStyles,
-    variantStyles,
-    optionsStyles,
-    placeholderStyles,
-    loadingStyles,
-    inputMultiValueStyles,
-    menuWrapperStyles,
-  } = useSelectStyles(props, {
-    error: !!hasError,
-    focused: isFocused,
-    disabled: isDisabled,
-  })
+          return _options
+        } catch (err) {
+          onLoadOptionsError?.(err)
+        }
 
-  useImperativeHandle(inputRef, () => {
-    return {
-      ...innerInputRef.current,
-      focus: () => {
-        innerInputRef.current?.focus?.()
-      },
-    }
-  }, [!!innerInputRef?.current?.focus])
-
-  const onLoadOptions = async (inputValue, cb) => {
-    if (!!loadOptions) {
-      try {
-        const _options = await loadOptions(inputValue).then((options) => {
-          cb(options)
-          return options
-        })
-
-        return _options
-      } catch (err) {
-        onLoadOptionsError?.(err)
+        return
       }
-
-      return
     }
-  }
 
-  const handleChange = (opt: Multi extends true ? Option[] : Option) => {
-    if (TypeGuards.isArray(opt)) {
-      // @ts-ignore
-      if (TypeGuards.isNumber(limit) && opt?.length > limit && opt?.length > selectedOption?.length) {
-        return
+    const handleChange = (opt: Multi extends true ? Option[] : Option) => {
+      if (TypeGuards.isArray(opt)) {
+        // @ts-ignore
+        if (TypeGuards.isNumber(limit) && opt?.length > limit && opt?.length > selectedOption?.length) {
+          return
+        }
+        // @ts-ignore
+        setSelectedOption(opt)
+        // @ts-ignore
+        onValueChange?.(opt?.map((o) => o?.value))
+      } else {
+        // @ts-ignore
+        setSelectedOption(opt)
+        // @ts-ignore
+        onValueChange?.(opt?.value)
       }
-      // @ts-ignore
-      setSelectedOption(opt)
-      // @ts-ignore
-      onValueChange?.(opt?.map((o) => o?.value))
-    } else {
-      // @ts-ignore
-      setSelectedOption(opt)
-      // @ts-ignore
-      onValueChange?.(opt?.value)
     }
-  }
 
-  const handleBlur: SelectProps['onBlur'] = React.useCallback((e) => {
-    validation?.onInputBlurred()
-    setIsFocused(false)
-    props?.onBlur?.(e)
-  }, [validation?.onInputBlurred, props?.onBlur])
-
-  const handleFocus: SelectProps['onFocus'] = React.useCallback((e) => {
-    validation?.onInputFocused()
-    setIsFocused(true)
-    props?.onFocus?.(e)
-  }, [validation?.onInputFocused, props?.onFocus])
-
-  const SelectComponent = !!loadOptions ? Async : _Select
-
-  const componentProps = {
-    focused: isFocused,
-    error: !!hasError,
-    disabled: isDisabled,
-    variantStyles,
-    debugName: debugName,
-  }
+    const handleBlur: SelectProps['onBlur'] = React.useCallback((e) => {
+      validation?.onInputBlurred()
+      setIsFocused(false)
+      props?.onBlur?.(e)
+    }, [validation?.onInputBlurred, props?.onBlur])
+
+    const handleFocus: SelectProps['onFocus'] = React.useCallback((e) => {
+      validation?.onInputFocused()
+      setIsFocused(true)
+      props?.onFocus?.(e)
+    }, [validation?.onInputFocused, props?.onFocus])
+
+    const SelectComponent = !!loadOptions ? Async : _Select
+
+    const componentProps = {
+      focused: isFocused,
+      error: !!hasError,
+      disabled: isDisabled,
+      variantStyles,
+      debugName: debugName,
+    }
 
-  const _Placeholder = (props: NoticeProps) => {
-    const hasInputValue = !!props.selectProps.inputValue
-    const styles = placeholderStyles[hasInputValue ? 'noItems' : 'empty']
-    const icon = hasInputValue ? noItemsIcon : placeholderIcon
+    const _Placeholder = (props: NoticeProps) => {
+      const hasInputValue = !!props.selectProps.inputValue
+      const styles = placeholderStyles[hasInputValue ? 'noItems' : 'empty']
+      const icon = hasInputValue ? noItemsIcon : placeholderIcon
 
-    const placeholderProps = {
-      ...props,
-      ...componentProps,
-      icon,
-      defaultStyles: styles,
+      const placeholderProps = {
+        ...props,
+        ...componentProps,
+        icon,
+        defaultStyles: styles,
+      }
+
+      if (!hasInputValue) {
+
+        return <PlaceholderComponent {...placeholderProps} text={placeholderText} />
+      } else {
+        const _Text = TypeGuards.isString(noItemsText) ? formatPlaceholderNoItems({ ...placeholderProps, text: noItemsText }) : noItemsText
+        return <PlaceholderNoItemsComponent {...placeholderProps} text={_Text} />
+      }
     }
 
-    if (!hasInputValue) {
-      
-      return <PlaceholderComponent {...placeholderProps} text={placeholderText} />
-    } else {
-      const _Text = TypeGuards.isString(noItemsText) ? formatPlaceholderNoItems({ ...placeholderProps, text: noItemsText }) : noItemsText
-      return <PlaceholderNoItemsComponent {...placeholderProps} text={_Text} />
+    const _props = {
+      ...(!filterItems ? {} : { filterOption: filterItems }),
     }
-  }
 
-  const _props = {
-    ...(!filterItems ? {} : { filterOption: filterItems }),
-  }
+    onUpdate(() => {
+      if (!_isFocused) {
+        setKeyDownActive(false)
+      }
+    }, [_isFocused])
 
-  onUpdate(() => {
-    if (!_isFocused) {
-      setKeyDownActive(false)
+    const handleKeyDown = () => {
+      setKeyDownActive(true)
     }
-  }, [_isFocused])
 
-  const handleKeyDown = () => {
-    setKeyDownActive(true)
-  }
-
-  return (
-    <InputBase
-      {...inputBaseProps}
-      debugName={debugName}
-      error={hasError ? errorMessage : null}
-      focused={isFocused}
-      styles={{
-        ...variantStyles,
-        innerWrapper: [
-          variantStyles.innerWrapper,
-          searchable && variantStyles['innerWrapper:searchable'],
-        ],
-      }}
-      innerWrapperProps={{
-        ...(inputBaseProps.innerWrapperProps || {}),
-        onClick: () => {
-          innerInputRef.current?.focus?.()
-        },
-      }}
-      innerWrapperRef={innerWrapperRef}
-    >
-      <SelectComponent
-        openMenuOnFocus={true}
-        hideSelectedOptions={false}
-        tabSelectsValue={false}
-        tabIndex={0}
-        {...otherProps}
-        {..._props}
-        onKeyDown={isFocused ? handleKeyDown : null}
-        onBlur={handleBlur}
-        onFocus={handleFocus}
-        onChange={handleChange}
-        styles={reactSelectStyles}
-        value={selectedOption as any}
-        isMulti={multiple}
-        options={options}
-        loadOptions={onLoadOptions as any}
-        defaultOptions={loadOptionsOnMount}
-        ref={innerInputRef}
-        closeMenuOnSelect={closeOnSelect}
-        menuPortalTarget={innerWrapperRef.current}
-        placeholder={placeholder}
-        isDisabled={isDisabled}
-        isClearable={clearable}
-        isSearchable={searchable}
-        components={{
-          LoadingIndicator: () => null,
-          ...otherProps.components,
-          MultiValueRemove: () => null,
-          LoadingMessage: props => (
-            <LoadingIndicatorComponent
-              {...props}
-              defaultStyles={loadingStyles}
-              size={loadingIndicatorSize}
-              debugName={debugName}
-            />
-          ),
-          DropdownIndicator: props => showDropdownIcon ? <components.DropdownIndicator {...props} /> : null,
-          NoOptionsMessage: props => <_Placeholder {...props} />,
-          Menu: props => <CustomMenu {...props} Footer={FooterComponent} />,
-          MenuList: props => <CustomMenuList {...props} defaultStyles={menuWrapperStyles} />,
-          Option: props => (
-            <DefaultOption
-              {...props}
-              {...componentProps}
-              itemProps={itemProps as ButtonProps}
-              selectedIcon={selectedIcon}
-              optionsStyles={optionsStyles}
-              component={OptionComponent}
-              isFocused={props?.isFocused && keyDownActive}
-            />
-          ),
-          MultiValue: props => (
-            <CustomMultiValue
-              {...props}
-              separator={separatorMultiValue}
-              defaultStyles={inputMultiValueStyles}
-            />
-          ),
+    return (
+      <InputBase
+        {...inputBaseProps}
+        debugName={debugName}
+        error={hasError ? errorMessage : null}
+        focused={isFocused}
+        styles={{
+          ...variantStyles,
+          innerWrapper: [
+            variantStyles.innerWrapper,
+            searchable && variantStyles['innerWrapper:searchable'],
+          ],
         }}
-      />
-    </InputBase>
-  )
+        innerWrapperProps={{
+          ...(inputBaseProps.innerWrapperProps || {}),
+          onClick: () => {
+            innerInputRef.current?.focus?.()
+          },
+        }}
+        innerWrapperRef={innerWrapperRef}
+      >
+        <SelectComponent
+          openMenuOnFocus={true}
+          hideSelectedOptions={false}
+          tabSelectsValue={false}
+          tabIndex={0}
+          {...otherProps}
+          {..._props}
+          onKeyDown={isFocused ? handleKeyDown : null}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          onChange={handleChange}
+          styles={reactSelectStyles}
+          value={selectedOption as any}
+          isMulti={multiple}
+          options={options}
+          loadOptions={onLoadOptions as any}
+          defaultOptions={loadOptionsOnMount}
+          ref={innerInputRef}
+          closeMenuOnSelect={closeOnSelect}
+          menuPortalTarget={innerWrapperRef.current}
+          placeholder={placeholder}
+          isDisabled={isDisabled}
+          isClearable={clearable}
+          isSearchable={searchable}
+          components={{
+            LoadingIndicator: () => null,
+            ...otherProps.components,
+            MultiValueRemove: () => null,
+            LoadingMessage: props => (
+              <LoadingIndicatorComponent
+                {...props}
+                defaultStyles={loadingStyles}
+                size={loadingIndicatorSize}
+                debugName={debugName}
+              />
+            ),
+            DropdownIndicator: props => showDropdownIcon ? <components.DropdownIndicator {...props} /> : null,
+            NoOptionsMessage: props => <_Placeholder {...props} />,
+            Menu: props => <CustomMenu {...props} Footer={FooterComponent} />,
+            MenuList: props => <CustomMenuList {...props} defaultStyles={menuWrapperStyles} />,
+            Option: props => (
+              <DefaultOption
+                {...props}
+                {...componentProps}
+                itemProps={itemProps as ButtonProps}
+                selectedIcon={selectedIcon}
+                optionsStyles={optionsStyles}
+                component={OptionComponent}
+                isFocused={props?.isFocused && keyDownActive}
+              />
+            ),
+            MultiValue: props => (
+              <CustomMultiValue
+                {...props}
+                separator={separatorMultiValue}
+                defaultStyles={inputMultiValueStyles}
+              />
+            ),
+          }}
+        />
+      </InputBase>
+    )
   })
 
 Select.defaultProps = defaultProps

package/src/components/TextInput/index.tsx

@@ -21,7 +21,7 @@ import React, {
 import TextareaAutosize from 'react-autosize-textarea'
 import InputMask from 'react-input-mask'
 import { Touchable, TouchableProps } from '../Touchable'
-import { StylesOf, HTMLProps } from '../../types/utility'
+import { StylesOf, HTMLProps, ComponentWithDefaultProps } from '../../types/utility'
 import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
 import { TextInputPresets } from './styles'
 import { getMaskInputProps, TextInputMaskingProps } from './mask'
@@ -33,7 +33,7 @@ type NativeTextInputProps = HTMLProps<'input'>
 
 export type TextInputProps =
   Omit<InputBaseProps, 'styles' | 'variants'> &
-  Omit<NativeTextInputProps, 'value'|'crossOrigin'> & {
+  Omit<NativeTextInputProps, 'value' | 'crossOrigin'> & {
     styles?: StylesOf<TextInputComposition>
     password?: boolean
     validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
@@ -42,23 +42,33 @@ export type TextInputProps =
     value?: NativeTextInputProps['value']
     multiline?: boolean
     onPress?: TouchableProps['onPress']
-    onChangeText?: (textValue:string) => void
+    onChangeText?: (textValue: string) => void
     caretColor?: string
     focused?: boolean
     _error?: boolean
     rows?: number
     masking?: TextInputMaskingProps
+    visibleIcon?: IconPlaceholder
+    hiddenIcon?: IconPlaceholder
   } & ComponentVariants<typeof TextInputPresets>
 
 type InputRef = HTMLInputElement & { isTextInput?: boolean }
 
-export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef) => {
+const defaultProps:Partial<TextInputProps> = {
+  hiddenIcon: 'input-visiblity:hidden' as IconPlaceholder,
+  visibleIcon: 'input-visiblity:visible' as IconPlaceholder,
+}
+
+export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, inputRef) => {
   const innerInputRef = useRef<InputRef>(null)
 
   const {
     inputBaseProps,
     others,
-  } = selectInputBaseProps(props)
+  } = selectInputBaseProps({
+    ...TextInput.defaultProps,
+    ...props,
+  })
 
   const {
     variants = [],
@@ -75,6 +85,8 @@ export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef)
     focused,
     _error,
     masking = null,
+    visibleIcon,
+    hiddenIcon,
     ...textInputProps
   } = others as TextInputProps
 
@@ -141,7 +153,7 @@ export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef)
 
   const visibilityToggleProps = visibilityToggle ? {
     onPress: toggleSecureTextEntry,
-    icon: (secureTextEntry ? 'input-visiblity:hidden' : 'input-visiblity:visible') as IconPlaceholder,
+    icon: (secureTextEntry ? hiddenIcon : visibleIcon) as IconPlaceholder,
     debugName: `${debugName} toggle visibility`,
   } : null
 
@@ -248,3 +260,7 @@ export const TextInput = forwardRef<InputRef, TextInputProps>((props, inputRef)
     </InputBase>
   )
 })
+
+export const TextInput = TextInputComponent as ComponentWithDefaultProps<TextInputProps>
+
+TextInput.defaultProps = defaultProps