@telus-uds/components-base 2.0.0 → 2.0.1

package/src/Tabs/Tabs.jsx

@@ -1,4 +1,5 @@
-import React, { forwardRef, useCallback } from 'react'
+import React from 'react'
+import { Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 import { useThemeTokens } from '../ThemeProvider'
@@ -42,6 +43,17 @@ const getDefaultTabItemAccessibilityRole = (parentRole) => {
   }
 }
 
+const getStackViewTokens = (variant) => {
+  const equalWidth = variant?.equalWidth
+  return Platform.select({
+    web: {
+      justifyContent: equalWidth ? 'space-evenly' : 'flex-start',
+      width: equalWidth ? '100%' : 'auto'
+    },
+    default: {}
+  })
+}
+
 /**
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
@@ -50,7 +62,7 @@ const getDefaultTabItemAccessibilityRole = (parentRole) => {
  * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
  * TabItems to default to a role of link and obtain aria-current behaviour.
  */
-const Tabs = forwardRef(
+const Tabs = React.forwardRef(
   (
     {
       tokens,
@@ -73,7 +85,7 @@ const Tabs = forwardRef(
     const [itemPositions, isPositioningReady] = useItemPositions()
 
     useHash(
-      useCallback(
+      React.useCallback(
         (hash, event) => {
           const hashItem = hash && items.find(({ href }) => hash === href)
           const hashId = hashItem && (hashItem.id || hashItem.label)
@@ -88,6 +100,7 @@ const Tabs = forwardRef(
     const parentAccessibilityRole = restProps.accessibilityRole ?? 'tablist'
     const defaultTabItemAccessibiltyRole =
       getDefaultTabItemAccessibilityRole(parentAccessibilityRole)
+    const stackViewTokens = getStackViewTokens(variant)
 
     return (
       <HorizontalScroll
@@ -99,7 +112,7 @@ const Tabs = forwardRef(
         accessibilityRole={parentAccessibilityRole}
         {...restProps}
       >
-        <StackView space={space} direction="row">
+        <StackView space={space} direction="row" tokens={stackViewTokens}>
           {items.map(
             (
               {
@@ -111,6 +124,7 @@ const Tabs = forwardRef(
                 ref: itemRef,
                 LinkRouter: ItemLinkRouter = LinkRouter,
                 linkRouterProps: itemLinkRouterProps,
+                render,
                 ...itemRest
               },
               index
@@ -127,6 +141,7 @@ const Tabs = forwardRef(
                 <TabsItem
                   ref={itemRef}
                   key={itemId}
+                  id={itemId}
                   href={href}
                   variant={variant}
                   tokens={itemTokens}
@@ -137,6 +152,7 @@ const Tabs = forwardRef(
                   accessibilityRole={accessibilityRole}
                   LinkRouter={ItemLinkRouter}
                   linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
+                  render={render}
                   {...itemProps}
                 >
                   {label}
@@ -154,6 +170,9 @@ Tabs.displayName = 'Tabs'
 Tabs.propTypes = {
   ...selectedSystemPropTypes,
   ...withLinkRouter.PropTypes,
+  /**
+   * Array of `TabsItem`s
+   */
   items: PropTypes.arrayOf(
     PropTypes.shape({
       ...selectedItemPropTypes,
@@ -161,14 +180,27 @@ Tabs.propTypes = {
       href: PropTypes.string,
       label: PropTypes.string,
       id: PropTypes.string,
-      ref: ABBPropTypes.ref()
+      ref: ABBPropTypes.ref(),
+      render: PropTypes.func
     })
   ),
+  /**
+   * `id` property of the current tab in the items array
+   */
   value: PropTypes.string,
   initialValue: PropTypes.string,
+  /**
+   * Callback for when the selected tab changes
+   */
   onChange: PropTypes.func,
   tokens: getTokensPropType('Tabs'),
+  /**
+   * Custom tokens for `TabsItem`
+   */
   itemTokens: getTokensPropType('TabsItem'),
+  /**
+   * Custom tokens for `HorizontalScrollButton`
+   */
   scrollButtonTokens: getTokensPropType('HorizontalScrollButton'),
   variant: variantProp.propType
 }

package/src/Tabs/TabsItem.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
@@ -34,8 +34,8 @@ const selectHighlightBarStyles = ({
   borderRadius: highlightBarBorderRadius,
   borderWidth: highlightBarBorderWidth,
   bottom: -1 * (highlightBarHeight + highlightBarBorderWidth),
-  left: -1 * highlightBarBorderWidth,
-  right: -1 * highlightBarBorderWidth,
+  left: 0,
+  right: 0,
   zIndex: 1 + highlightBarBorderWidth
 })
 
@@ -76,7 +76,7 @@ const selectContainerStyles = ({
  *
  * This is rendered automatically by `Tabs` and isn't intended be used directly.
  */
-const TabsItem = forwardRef(
+const TabsItem = React.forwardRef(
   (
     {
       href,
@@ -91,6 +91,8 @@ const TabsItem = forwardRef(
         ? 'page'
         : undefined,
       accessibilityState = accessibilityRole === 'tab' ? { selected } : undefined,
+      id,
+      render,
       ...rawRest
     },
     ref
@@ -126,7 +128,7 @@ const TabsItem = forwardRef(
       ...rest
     })
 
-    useEffect(() => {
+    React.useEffect(() => {
       // If this is selected while off-screen, scroll it into view
       if (selected) {
         const position = itemPositions.positions[index]
@@ -143,6 +145,8 @@ const TabsItem = forwardRef(
       // itemPositions is a ref object so this should only re-run when `selected` (or `index`) change
     }, [selected, index, itemPositions])
 
+    if (render) return render({ selected, handlePress })
+
     return (
       <Pressable
         ref={ref}
@@ -150,6 +154,7 @@ const TabsItem = forwardRef(
         href={href}
         style={getPressableStyle}
         onLayout={handleLayout}
+        nativeID={id}
         {...selectedProps}
       >
         {(pressableState) => {
@@ -199,7 +204,9 @@ TabsItem.propTypes = {
   index: PropTypes.number,
   selected: PropTypes.bool,
   itemPositions: itemPositionsPropType,
-  children: PropTypes.string
+  children: PropTypes.string,
+  id: PropTypes.string,
+  render: PropTypes.func
 }
 
 const staticStyles = StyleSheet.create({
@@ -215,7 +222,12 @@ const staticStyles = StyleSheet.create({
   container: {
     flexGrow: 1,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 })
 

package/src/Tags/Tags.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 import { Platform, Text, View } from 'react-native'
@@ -74,7 +74,7 @@ const separateIconTextTokens = (
 const selectIconTextTokens = (tokens) => separateIconTextTokens(tokens, false)
 const selectNonIconTextTokens = (tokens) => separateIconTextTokens(tokens, true)
 
-const Tags = forwardRef(
+const Tags = React.forwardRef(
   (
     {
       variant,
@@ -249,7 +249,11 @@ Tags.propTypes = {
    * managing its own selected state, a default set of selections may be provided.
    * Changing the `initialValues` does not change the user's selections.
    */
-  initialValues: PropTypes.arrayOf(PropTypes.string)
+  initialValues: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * AccesibilityRole for the Tags
+   */
+  accessibilityRole: PropTypes.string
 }
 
 export default Tags

package/src/TextInput/TextArea.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 
 import { Platform } from 'react-native'
 import {
@@ -50,9 +50,9 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
-const TextArea = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
+const TextArea = React.forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   const themeTokens = useThemeTokens('TextArea', tokens, variant)
-  const [inputHeight, setInputHeight] = useState()
+  const [inputHeight, setInputHeight] = React.useState()
 
   // adjust the text area's height as new lines are added to the content
   const onHeightChange = ({

package/src/TextInput/TextInput.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import {
   a11yProps,
@@ -42,7 +42,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-const TextInput = forwardRef(({ tokens, nativeID, variant = {}, ...rest }, ref) => {
+const TextInput = React.forwardRef(({ tokens, nativeID, variant = {}, ...rest }, ref) => {
   const { supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {
@@ -52,11 +52,14 @@ const TextInput = forwardRef(({ tokens, nativeID, variant = {}, ...rest }, ref)
   }
 
   return (
-    <InputSupports nativeID={nativeID} {...supportsProps}>
-      {({ inputId, ...propsFromInputSupports }) => (
-        <TextInputBase ref={ref} nativeID={inputId} {...propsFromInputSupports} {...inputProps} />
-      )}
-    </InputSupports>
+    <>
+      <InputSupports nativeID={nativeID} {...supportsProps}>
+        {({ inputId, ...propsFromInputSupports }) => (
+          <TextInputBase ref={ref} nativeID={inputId} {...propsFromInputSupports} {...inputProps} />
+        )}
+      </InputSupports>
+      {rest.children}
+    </>
   )
 })
 TextInput.displayName = 'TextInput'
@@ -68,6 +71,7 @@ TextInput.propTypes = {
    * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
    */
   onClear: PropTypes.func,
+  onKeyPress: PropTypes.func,
   tokens: getTokensPropType('TextInput'),
   variant: variantProp.propType
 }

package/src/TextInput/TextInputBase.jsx

@@ -1,9 +1,10 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native'
 import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
 import StackView from '../StackView'
 import IconButton from '../IconButton'
+import Icon from '../Icon'
 import {
   a11yProps,
   getTokensPropType,
@@ -41,14 +42,18 @@ const selectInputStyles = (
     fontWeight,
     lineHeight,
     icon,
-    iconSize = 0,
     minLines,
     maxLines,
     width,
     height
   },
   themeOptions,
-  inactive
+  inactive,
+  type,
+  buttonCount = 0,
+  buttonSize = 0,
+  buttonsGapSize = 0,
+  isPassword
 ) => {
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
@@ -56,7 +61,7 @@ const selectInputStyles = (
     typeof value === 'number' ? Math.max(0, value - borderWidth) : value
 
   const textStyles = applyTextStyles({
-    fontName,
+    fontName: isPassword ? undefined : fontName, // In this case, we don't want to apply the fontName to the input if it's a password because Monotype don't have support for the masked characters in mobile.
     fontSize,
     lineHeight,
     fontWeight,
@@ -80,7 +85,10 @@ const selectInputStyles = (
     }
   })
 
-  const paddingWithIcon = iconSize + paddingRight
+  const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize
+  const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing)
+  const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight
+  const paddingWithIcon = buttonSize + adjustedPaddingRight
 
   return {
     backgroundColor,
@@ -88,8 +96,8 @@ const selectInputStyles = (
     borderWidth,
     borderColor,
     borderRadius,
-    paddingLeft: offsetBorder(paddingLeft),
-    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
+    paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     minHeight,
@@ -128,11 +136,38 @@ const selectIconContainerStyles = (
   paddingBottom
 })
 
+const selectLeftIconContainerStyles = ({ leftIconPaddingBottom }) => ({
+  // not tokenizing paddingLeft as it remains same across brands for now
+  paddingLeft: 10,
+  paddingBottom: leftIconPaddingBottom
+})
+
 const selectButtonsContainerStyle = ({ buttonsPaddingRight }) => ({
   paddingRight: buttonsPaddingRight
 })
 
-const TextInputBase = forwardRef(
+const getIcon = (cardNumber = '', { defaultCreditIcon, amexIcon, visaIcon, masterCardIcon }) => {
+  const sanitizedCardNumber = cardNumber.replace(/[^0-9]/g, '')
+  const firstFourDigits = sanitizedCardNumber.slice(0, 4)
+  const number = Number(firstFourDigits)
+
+  const visaRange = number >= 4000 && number <= 4999
+  const amexRange = (number >= 3400 && number <= 3499) || (number >= 3700 && number <= 3799)
+  const masterCardRange = (number >= 5100 && number <= 5599) || (number >= 2221 && number <= 2720)
+
+  let selectedIcon = { icon: defaultCreditIcon, testID: 'default' }
+  const objVisaIcon = { icon: visaIcon, testID: 'visa' }
+  const objAmexIcon = { icon: amexIcon, testID: 'amex' }
+  const objMasterCardIcon = { icon: masterCardIcon, testID: 'mastercard' }
+
+  if (visaRange) selectedIcon = objVisaIcon
+  else if (amexRange) selectedIcon = objAmexIcon
+  else if (masterCardRange) selectedIcon = objMasterCardIcon
+
+  return <Icon icon={selectedIcon.icon} variant={{ size: 'large' }} testID={selectedIcon.testID} />
+}
+
+const TextInputBase = React.forwardRef(
   (
     {
       buttons = [],
@@ -152,11 +187,14 @@ const TextInputBase = forwardRef(
       tokens,
       value,
       variant = {},
+      type,
+      onKeyPress,
       ...rest
     },
     ref
   ) => {
-    const [isFocused, setIsFocused] = useState(false)
+    const [isFocused, setIsFocused] = React.useState(false)
+    const [showPassword, setShowPassword] = React.useState(false)
     const handleFocus = (event) => {
       setIsFocused(true)
       if (typeof onFocus === 'function') onFocus(event)
@@ -166,7 +204,7 @@ const TextInputBase = forwardRef(
       if (typeof onBlur === 'function') onBlur(event)
     }
 
-    const [isHovered, setIsHovered] = useState(false)
+    const [isHovered, setIsHovered] = React.useState(false)
     const handleMouseOver = (event) => {
       setIsHovered(true)
       if (typeof onMouseOver === 'function') onMouseOver(event)
@@ -176,7 +214,7 @@ const TextInputBase = forwardRef(
       if (typeof onMouseOut === 'function') onMouseOut(event)
     }
 
-    const defaultRef = useRef()
+    const defaultRef = React.useRef()
     const inputRef = ref ?? defaultRef
 
     const { currentValue, resetValue, setValue, isControlled, isDirty } = useInputValue({
@@ -186,9 +224,12 @@ const TextInputBase = forwardRef(
       onChange,
       readOnly
     })
+    const { password, numeric } = variant
+    const isNumeric = numeric || type === 'card' || type === 'number'
+    const isPassword = password || type === 'password'
 
     const element = inputRef?.current
-    useEffect(() => {
+    React.useEffect(() => {
       if (Platform.OS === 'web' && pattern && element) {
         // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
         // which a `pattern` user must provide anyway to call .checkValidity() on the element.
@@ -198,24 +239,48 @@ const TextInputBase = forwardRef(
 
     const handleChangeText = (event) => {
       const text = event.nativeEvent?.text || event.target?.value
-      setValue(text, event)
-      if (typeof onChangeText === 'function') onChangeText(text, event)
+      let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') : text
+      if (type === 'card' && filteredText) {
+        const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '')
+        const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g')
+        // Add a space every 4 digits starting from the 5th position
+        filteredText = formattedValue.replace(regex, '$1 ').trim()
+      }
+      setValue(filteredText, event)
+      if (typeof onChangeText === 'function') onChangeText(filteredText, event)
     }
 
     const states = { focus: isFocused, hover: isHovered, inactive }
 
     const themeTokens = useThemeTokens('TextInput', tokens, variant, states)
 
-    const { buttonsGap, clearButtonIcon: ClearButtonIcon, icon: IconComponent } = themeTokens
+    const handleClear = (event) => {
+      onClear?.(event)
+      resetValue(event)
+      inputRef?.current?.focus()
+    }
+
+    const handleShowOrHide = () => {
+      if (!variant.inactive) setShowPassword(!showPassword)
+    }
+
+    const {
+      buttonsGap,
+      clearButtonIcon: ClearButtonIcon,
+      icon: IconComponent,
+      passwordShowButtonIcon,
+      passwordHideButtonIcon,
+      defaultCreditIcon,
+      amexIcon,
+      visaIcon,
+      masterCardIcon
+    } = themeTokens
     const buttonsGapSize = useSpacingScale(buttonsGap)
     const getCopy = useCopy({ dictionary, copy })
+    const textInputButtons = buttons
+
     if (onClear && isDirty) {
-      const handleClear = (event) => {
-        onClear?.(event)
-        resetValue(event)
-        inputRef?.current?.focus()
-      }
-      buttons?.unshift(
+      textInputButtons?.unshift(
         <IconButton
           accessibilityLabel={getCopy('clearButtonAccessibilityLabel')}
           icon={ClearButtonIcon}
@@ -226,6 +291,23 @@ const TextInputBase = forwardRef(
       )
     }
 
+    if (isPassword) {
+      textInputButtons?.unshift(
+        <IconButton
+          accessibilityLabel={
+            !showPassword
+              ? getCopy('hidePasswordAccessibilityLabel')
+              : getCopy('showPasswordAccessibilityLabel')
+          }
+          icon={!showPassword ? passwordShowButtonIcon : passwordHideButtonIcon}
+          key={!showPassword ? 'hide' : 'show'}
+          onPress={handleShowOrHide}
+          variant={{ compact: true, password: true, inactive: variant.inactive, size: 'large' }}
+          tokens={{ width: 40, height: 40 }}
+        />
+      )
+    }
+
     const inputProps = {
       ...selectProps(rest),
       editable: !inactive,
@@ -235,22 +317,46 @@ const TextInputBase = forwardRef(
       onMouseOut: handleMouseOut,
       onChange: handleChangeText,
       defaultValue: initialValue,
-      // currentValue is being updated even if the input is not controlled, passing it down to the
-      // Input could lead to changing its state from uncontrolled to controlled
-      value: isControlled ? currentValue : undefined
+      maxLength: type === 'card' ? 19 : undefined,
+      value: isControlled ? currentValue : undefined,
+      onKeyPress
     }
 
     const { themeOptions } = useTheme()
-    const nativeInputStyle = selectInputStyles({ ...themeTokens, height }, themeOptions, inactive)
+    const nativeInputStyle = selectInputStyles(
+      { ...themeTokens, height },
+      themeOptions,
+      inactive,
+      type,
+      buttons?.length,
+      themeTokens.buttonSize,
+      buttonsGapSize,
+      isPassword
+    )
 
     return (
       <View style={selectOuterBorderStyles(themeTokens)}>
-        <NativeTextInput ref={inputRef} style={nativeInputStyle} {...inputProps} />
+        {type === 'card' && (
+          <View
+            pointerEvents="none"
+            style={[staticStyles.leftIconContainer, selectLeftIconContainerStyles(themeTokens)]}
+          >
+            {getIcon(currentValue, { defaultCreditIcon, amexIcon, visaIcon, masterCardIcon })}
+          </View>
+        )}
+        <NativeTextInput
+          ref={inputRef}
+          keyboardType={isNumeric ? 'numeric' : 'default'}
+          inputMode={isNumeric ? 'numeric' : undefined}
+          style={nativeInputStyle}
+          secureTextEntry={isPassword && !showPassword}
+          {...inputProps}
+        />
         {IconComponent && (
           <View
             pointerEvents="none" // avoid hijacking input press events
             style={[
-              staticStyles.iconContainer,
+              staticStyles.rightIconContainer,
               selectIconContainerStyles({ ...themeTokens, buttonsGapSize }, buttons?.length)
             ]}
           >
@@ -260,7 +366,7 @@ const TextInputBase = forwardRef(
         {buttons?.length > 0 && (
           <View style={[staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)]}>
             <StackView direction="row" space={buttonsGap}>
-              {buttons}
+              {textInputButtons}
             </StackView>
           </View>
         )}
@@ -283,6 +389,7 @@ TextInputBase.propTypes = {
       clearButtonAccessibilityLabel: PropTypes.string
     })
   ]),
+  type: PropTypes.oneOfType([PropTypes.oneOf(['password', 'card', 'number'])]),
   height: PropTypes.number,
   inactive: PropTypes.bool,
   initialValue: PropTypes.string,
@@ -293,6 +400,7 @@ TextInputBase.propTypes = {
   onFocus: PropTypes.func,
   onMouseOut: PropTypes.func,
   onMouseOver: PropTypes.func,
+  onKeyPress: PropTypes.func,
   readOnly: PropTypes.bool,
   tokens: getTokensPropType('TextInput', 'TextArea'),
   value: PropTypes.string,
@@ -304,14 +412,22 @@ export default TextInputBase
 const staticStyles = StyleSheet.create({
   buttonsContainer: {
     position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
     right: 0,
     top: 0,
     bottom: 0,
     justifyContent: 'center'
   },
-  iconContainer: {
+  rightIconContainer: {
     position: 'absolute',
     right: 0,
     bottom: 0
+  },
+  leftIconContainer: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
   }
 })

package/src/TextInput/dictionary.js

@@ -1,8 +1,12 @@
 export default {
   en: {
-    clearButtonAccessibilityLabel: 'Clear'
+    clearButtonAccessibilityLabel: 'Clear',
+    showPasswordAccessibilityLabel: 'Show Password',
+    hidePasswordAccessibilityLabel: 'Hide Password'
   },
   fr: {
-    clearButtonAccessibilityLabel: 'Effacer'
+    clearButtonAccessibilityLabel: 'Effacer',
+    showPasswordAccessibilityLabel: 'montrer le mot de passe',
+    hidePasswordAccessibilityLabel: 'masquer le mot de passe'
   }
 }

package/src/TextInput/propTypes.js

@@ -8,6 +8,10 @@ const textInputPropTypes = {
    * together with the `onChange` to pass down and update the lifted state.
    */
   value: PropTypes.string,
+  /**
+   * Use this to set the type of the input. Defaults to `text`.
+   */
+  type: PropTypes.string,
   /**
    * Use this to set the initial value of an uncontrolled input.
    * Updating `initialValue` will **not** update the actual value.