@telus-uds/components-base 1.5.0 → 1.7.0

package/src/List/ListItem.jsx

@@ -22,8 +22,7 @@ const selectBulletStyles = ({ itemBulletWidth, itemBulletHeight, itemBulletColor
 
 const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletContainerAlign }) => ({
   width: itemBulletContainerWidth,
-  alignItems: itemBulletContainerAlign,
-  justifyContent: itemBulletContainerAlign
+  alignItems: itemBulletContainerAlign
 })
 
 const selectItemIconTokens = ({ itemIconSize, itemIconColor }) => ({
@@ -31,12 +30,15 @@ const selectItemIconTokens = ({ itemIconSize, itemIconColor }) => ({
   color: itemIconColor
 })
 
-const selectCommonIconStyles = ({ iconMarginTop }) => ({
-  marginTop: iconMarginTop
+const selectSideItemContainerStyles = ({ listGutter, iconMarginTop }) => ({
+  marginTop: iconMarginTop,
+  marginRight: listGutter
 })
 
-const selectSideItemContainerStyles = ({ listGutter }) => ({
-  marginRight: listGutter
+// Align bullets with the top line of text the same way icons are aligned
+const selectBulletPositioningStyles = ({ itemIconSize }) => ({
+  width: itemIconSize,
+  height: itemIconSize
 })
 
 const selectItemStyles = ({ itemFontWeight, itemFontSize, itemLineHeight, itemFontName }) =>
@@ -73,8 +75,8 @@ const ListItem = forwardRef(
     const dividerStyles = selectDividerStyles(themeTokens)
     const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
     const itemBulletStyles = selectBulletStyles(themeTokens)
+    const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
     const iconTokens = selectItemIconTokens(themeTokens)
-    const commonIconStyles = selectCommonIconStyles(themeTokens)
     const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
     const accessibilityRole = Platform.select({ web: 'listitem', default: 'item' })
 
@@ -109,7 +111,7 @@ const ListItem = forwardRef(
 
       if (icon) {
         return (
-          <View style={[sideItemContainerStyles, commonIconStyles]}>
+          <View style={sideItemContainerStyles}>
             <IconComponent
               size={iconSize || iconTokens.size}
               color={iconColor || iconTokens.color}
@@ -120,7 +122,9 @@ const ListItem = forwardRef(
 
       return (
         <View style={[sideItemContainerStyles, itemBulletContainerStyles]}>
-          <View style={itemBulletStyles} testID="unordered-item-bullet" />
+          <View style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}>
+            <View style={itemBulletStyles} testID="unordered-item-bullet" />
+          </View>
         </View>
       )
     }
@@ -146,6 +150,10 @@ const staticStyles = StyleSheet.create({
   },
   wrap: {
     flex: 1
+  },
+  bulletPositioning: {
+    alignItems: 'center',
+    justifyContent: 'center'
   }
 })
 

package/src/Modal/Modal.jsx

@@ -16,10 +16,11 @@ import {
   selectSystemProps,
   useCopy,
   variantProp,
-  viewProps
+  viewProps,
+  selectTokens
 } from '../utils'
 import { useViewport } from '../ViewportProvider'
-import ButtonBase from '../Button/ButtonBase'
+import IconButton from '../IconButton'
 import dictionary from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -70,11 +71,6 @@ const selectCloseButtonContainerStyles = ({ paddingRight, paddingTop }) => ({
   paddingTop
 })
 
-const selectCloseIconProps = ({ closeIconSize, closeIconColor }) => ({
-  size: closeIconSize,
-  color: closeIconColor
-})
-
 /**
  * A modal window is a secondary window that opens on top of the main one.
  * Users have to interact with it before they can carry out their task and return to the main window.
@@ -90,7 +86,7 @@ const selectCloseIconProps = ({ closeIconSize, closeIconColor }) => ({
  * - Don’t use modals consecutively
  */
 const Modal = forwardRef(
-  ({ children, isOpen, onClose, maxWidth, tokens, variant, copy, ...rest }, ref) => {
+  ({ children, isOpen, onClose, maxWidth, tokens, variant, copy, closeButton, ...rest }, ref) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
 
@@ -107,11 +103,14 @@ const Modal = forwardRef(
       if (event.key === 'Escape') onClose()
     }
 
+    // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
+    // Hide the close button if `closeButton` is `null`.
+    const showCloseButton = closeButton !== null
+
     if (!isOpen) {
       return null
     }
 
-    // TODO: replace the close button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
     return (
       <NativeModal transparent {...selectProps(rest)}>
         <View style={[staticStyles.positioningContainer]}>
@@ -124,23 +123,24 @@ const Modal = forwardRef(
               style={[staticStyles.modal, selectModalStyles(themeTokens)]}
               onKeyUp={handleKeyUp}
             >
-              <View
-                style={[
-                  staticStyles.closeButtonContainer,
-                  selectCloseButtonContainerStyles(themeTokens)
-                ]}
-              >
-                <ButtonBase
-                  onPress={handleClose}
-                  accessibilityRole="button"
-                  accessibilityLabel={closeLabel}
+              {showCloseButton && (
+                <View
+                  style={[
+                    staticStyles.closeButtonContainer,
+                    selectCloseButtonContainerStyles(themeTokens)
+                  ]}
                 >
-                  {
-                    // TODO: add close button interactive states after IconButton is done
-                    () => <CloseIconComponent {...selectCloseIconProps(themeTokens)} />
-                  }
-                </ButtonBase>
-              </View>
+                  {closeButton || (
+                    <IconButton
+                      onPress={handleClose}
+                      icon={CloseIconComponent}
+                      accessibilityRole="button"
+                      accessibilityLabel={closeLabel}
+                      tokens={selectTokens('IconButton', themeTokens, 'close')}
+                    />
+                  )}
+                </View>
+              )}
               {children}
             </View>
           </View>
@@ -164,7 +164,11 @@ Modal.propTypes = {
   onClose: PropTypes.func,
   maxWidth: PropTypes.bool,
   tokens: getTokensPropType('Modal'),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * Pass a react node to override the default close button or pass `null` to hide the close button.
+   */
+  closeButton: PropTypes.node
 }
 
 export default Modal

package/src/Radio/Radio.jsx

@@ -7,6 +7,7 @@ import RadioButton, { selectRadioButtonTokens } from './RadioButton'
 import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
+  focusHandlerProps,
   getTokensPropType,
   selectSystemProps,
   useInputValue,
@@ -16,7 +17,11 @@ import {
 } from '../utils'
 import StackView from '../StackView'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
 
 const selectContainerStyles = ({
   containerBackgroundColor,
@@ -154,23 +159,29 @@ const Radio = forwardRef(
       >
         {({ focused: focus, hovered: hover, pressed }) => {
           const stateTokens = getTokens({ focus, hover, pressed })
+          const labelStyles = selectLabelStyles(stateTokens)
+          const alignWithLabel = label
+            ? [staticStyles.alignWithLabel, { height: labelStyles.lineHeight }]
+            : null
 
           return (
             <StackView space={0}>
               <View style={[staticStyles.container, selectContainerStyles(stateTokens)]}>
-                <RadioButton
-                  tokens={selectRadioButtonTokens(stateTokens)}
-                  isControlled={isControlled}
-                  isChecked={isChecked}
-                  inactive={inactive}
-                  defaultChecked={defaultChecked}
-                  inputId={inputId}
-                  handleChange={handleChange}
-                  name={inputName}
-                  value={value}
-                />
+                <View style={alignWithLabel}>
+                  <RadioButton
+                    tokens={selectRadioButtonTokens(stateTokens)}
+                    isControlled={isControlled}
+                    isChecked={isChecked}
+                    inactive={inactive}
+                    defaultChecked={defaultChecked}
+                    inputId={inputId}
+                    handleChange={handleChange}
+                    name={inputName}
+                    value={value}
+                  />
+                </View>
                 {Boolean(label) && (
-                  <Text style={selectLabelStyles(stateTokens)}>
+                  <Text style={labelStyles}>
                     <RadioLabel forId={inputId}>{label}</RadioLabel>
                   </Text>
                 )}
@@ -242,5 +253,6 @@ Radio.propTypes = {
 export default Radio
 
 const staticStyles = StyleSheet.create({
-  container: { flexDirection: 'row', alignItems: 'center' }
+  container: { flexDirection: 'row', alignItems: 'center' },
+  alignWithLabel: { alignSelf: 'flex-start', justifyContent: 'center' }
 })

package/src/Radio/RadioGroup.jsx

@@ -6,6 +6,8 @@ import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
+  containUniqueFields,
+  focusHandlerProps,
   getTokensPropType,
   selectSystemProps,
   useInputValue,
@@ -17,6 +19,11 @@ import Radio from './Radio'
 import Fieldset from '../Fieldset'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
 
 /**
  * A group of Radios that behave as a radio group. Use when users select a single choice from mutually
@@ -100,28 +107,38 @@ const RadioGroup = forwardRef(
       onChange,
       readOnly: readOnly || inactive
     })
-    const radios = items.map(({ label, id, onChange: itemOnChange, ref: itemRef }, index) => {
-      const radioId = id || `Radio[${index}]`
-      const isChecked = currentValue === radioId
-      const handleChange = (newCheckedState, event) => {
-        if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
-        if (newCheckedState) setValue(radioId, event)
+
+    const uniqueFields = ['id', 'label']
+    if (!containUniqueFields(items, uniqueFields)) {
+      throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`)
+    }
+
+    const radios = items.map(
+      ({ label, id, onChange: itemOnChange, ref: itemRef, ...itemRest }, index) => {
+        const radioId = id || `Radio[${index}]`
+        const isChecked = currentValue === radioId
+        const handleChange = (newCheckedState, event) => {
+          if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
+          if (newCheckedState) setValue(radioId, event)
+        }
+
+        return (
+          <Radio
+            ref={itemRef}
+            key={radioId}
+            id={radioId}
+            checked={isChecked}
+            onChange={handleChange}
+            inactive={inactive}
+            label={label}
+            name={inputGroupName}
+            tokens={radioTokens}
+            variant={variant}
+            {...selectItemProps(itemRest)}
+          />
+        )
       }
-      return (
-        <Radio
-          ref={itemRef}
-          key={radioId}
-          id={radioId}
-          checked={isChecked}
-          onChange={handleChange}
-          inactive={inactive}
-          label={label}
-          name={inputGroupName}
-          tokens={radioTokens}
-          variant={variant}
-        />
-      )
-    })
+    )
 
     return (
       <Fieldset
@@ -163,6 +180,7 @@ RadioGroup.propTypes = {
    */
   items: PropTypes.arrayOf(
     PropTypes.exact({
+      ...selectedItemPropTypes,
       label: PropTypes.string,
       id: PropTypes.string,
       onChange: PropTypes.func,

package/src/RadioCard/RadioCard.jsx

@@ -5,6 +5,7 @@ import { StyleSheet, Text, View } from 'react-native'
 import { useThemeTokensCallback, applyTextStyles } from '../ThemeProvider'
 import {
   a11yProps,
+  focusHandlerProps,
   getTokensPropType,
   selectSystemProps,
   selectTokens,
@@ -17,7 +18,11 @@ import { PressableCardBase, selectPressableCardTokens } from '../Card'
 import StackView from '../StackView'
 import RadioButton, { selectRadioButtonTokens } from '../Radio/RadioButton'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
 
 /**
  * A Card that behaves like a radio button. Use when users select a single choice from mutually exclusive options

package/src/RadioCard/RadioCardGroup.jsx

@@ -5,6 +5,8 @@ import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
+  containUniqueFields,
+  focusHandlerProps,
   getTokensPropType,
   selectSystemProps,
   useInputValue,
@@ -16,6 +18,11 @@ import RadioCard from './RadioCard'
 import Fieldset from '../Fieldset'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
 
 /**
  * A group of Cards that behave as a radio button group. Use when users select a single choice from mutually
@@ -105,6 +112,12 @@ const RadioCardGroup = forwardRef(
     // Needs 'radiogroup' role on direct parent of radios for MacOS Voiceover's numbering to work,
     // and also needs 'radiogroup' role on fieldset for correct description on focusing the set.
     // TODO: test this on more web screen readers.
+
+    const uniqueFields = ['id']
+    if (!containUniqueFields(items, uniqueFields)) {
+      throw new Error(`RadioCardGroup items must have unique ${uniqueFields.join(', ')}`)
+    }
+
     return (
       <Fieldset
         ref={ref}
@@ -121,12 +134,13 @@ const RadioCardGroup = forwardRef(
       >
         {(props) => (
           <StackContainer space={space} accessibilityRole="radiogroup">
-            {items.map(({ title, content, id, onChange: itemOnChange }, index) => {
+            {items.map(({ title, content, id, onChange: itemOnChange, ...itemRest }, index) => {
               const cardId = id || `RadioCard[${index}]`
               const handleChange = (newCheckedState, event) => {
                 if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
                 if (newCheckedState) setValue(cardId, event)
               }
+
               return (
                 <RadioCard
                   key={cardId}
@@ -139,6 +153,7 @@ const RadioCardGroup = forwardRef(
                   tokens={radioCardTokens}
                   variant={variant}
                   readOnly={readOnly}
+                  {...selectItemProps(itemRest)}
                   {...props}
                 >
                   {content}
@@ -172,6 +187,7 @@ RadioCardGroup.propTypes = {
    */
   items: PropTypes.arrayOf(
     PropTypes.exact({
+      ...selectedItemPropTypes,
       title: PropTypes.string,
       content: PropTypes.node,
       id: PropTypes.string,

package/src/Search/Search.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React, { forwardRef } from 'react'
 import { View, StyleSheet } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -8,7 +8,10 @@ import {
   getTokensPropType,
   selectSystemProps,
   selectTokens,
+  useInputValue,
   useSpacingScale,
+  textInputHandlerProps,
+  textInputProps,
   variantProp,
   viewProps
 } from '../utils'
@@ -18,7 +21,11 @@ import StackView from '../StackView'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectInputProps, selectedInputPropTypes] = selectSystemProps([
+  textInputHandlerProps,
+  textInputProps
+])
 
 const selectInputTokens = ({ searchTokens, buttonTokens, buttonsGapSize }) => {
   const { paddingRight: inputPaddingRight, clearButtonIcon, submitButtonIcon } = searchTokens
@@ -54,8 +61,9 @@ const selectIconTokens = ({ iconSize, iconColor }) => ({ color: iconColor, size:
 const Search = forwardRef(
   (
     {
-      initialValue = '',
-      placeholder = 'Search',
+      initialValue,
+      value,
+      placeholder,
       inactive,
       onChange,
       onSubmit,
@@ -68,7 +76,12 @@ const Search = forwardRef(
     },
     ref
   ) => {
-    const [value, setValue] = useState(initialValue)
+    const { currentValue = '', setValue } = useInputValue({
+      value,
+      initialValue,
+      onChange
+    })
+
     const themeTokens = useThemeTokens('Search', tokens, variant)
     const buttonTokens = useThemeTokens('SearchButton', tokens, variant)
 
@@ -90,28 +103,26 @@ const Search = forwardRef(
 
     const handleSubmit = (event) => {
       if (onSubmit !== undefined) {
-        onSubmit(value, event)
+        onSubmit(currentValue, event)
       }
     }
 
-    const handleChange = (currentValue, event) => {
-      setValue(currentValue, event)
-
-      if (onChange !== undefined) onChange(currentValue, event)
-    }
-
     const handleClear = (event) => {
       setValue('', event)
-
       if (onClear !== undefined) onClear('', event)
-      if (onChange !== undefined) onChange('', event)
     }
 
-    const isEmpty = value === ''
+    const isEmpty = currentValue === ''
+
+    // Accessibility label should always be present and correctly localised
+    const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel')
+    // Placeholder is optional and may be unset by passing an empty string
+    const placeholderText = placeholder ?? a11yLabelText
 
     return (
-      <View style={staticStyles.container} {...selectProps(rest)}>
+      <View style={staticStyles.container} {...selectContainerProps(rest)}>
         <TextInputBase
+          {...selectInputProps(rest)}
           ref={ref}
           tokens={(appearances) =>
             selectInputTokens({
@@ -121,15 +132,15 @@ const Search = forwardRef(
               isEmpty
             })
           }
-          placeholder={placeholder}
+          placeholder={placeholderText}
           placeholderTextColor={placeholderColor}
           inactive={inactive}
           enablesReturnKeyAutomatically
           returnKeyType="search"
-          value={value}
-          onChange={handleChange}
+          value={currentValue}
+          onChange={setValue}
           onSubmitEditing={handleSubmit}
-          accessibilityLabel={accessibilityLabel || getCopy('accessibilityLabel')}
+          accessibilityLabel={a11yLabelText}
         />
         <View style={[staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)]}>
           <StackView direction="row" space={buttonsGap}>
@@ -172,7 +183,8 @@ const Search = forwardRef(
 Search.displayName = 'Search'
 
 Search.propTypes = {
-  ...selectedSystemPropTypes,
+  ...selectedContainerPropTypes,
+  ...selectedInputPropTypes,
   /**
    * Use this to set the initial value of the search input.
    * Updating `initialValue` will **not** update the actual value.

package/src/Select/Select.jsx

@@ -194,7 +194,7 @@ const Select = forwardRef(
     const handleMouseOver = () => setIsHovered(true)
     const handleMouseOut = () => setIsHovered(false)
 
-    const { props: supportsProps, ...selectedProps } = selectProps(rest)
+    const { supportsProps, ...selectedProps } = selectProps(rest)
 
     const themeTokens = useThemeTokens('Select', tokens, variant, {
       focus: isFocused,
@@ -236,7 +236,7 @@ const Select = forwardRef(
                   selectValidationIconContainerStyles(themeTokens)
                 ]}
               >
-                <ValidationIconComponent tokens={selectValidationIconTokens(themeTokens)} />
+                <ValidationIconComponent {...selectValidationIconTokens(themeTokens)} />
               </View>
             )}
             {IconComponent &&

package/src/Tags/Tags.jsx

@@ -10,17 +10,25 @@ import { useViewport } from '../ViewportProvider'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
+  containUniqueFields,
+  focusHandlerProps,
   getTokensPropType,
   pressProps,
   selectSystemProps,
   selectTokens,
+  useMultipleInputValues,
   variantProp,
   viewProps
-} from '../utils/props'
-import { useMultipleInputValues } from '../utils/input'
+} from '../utils'
 import { getPressHandlersWithArgs } from '../utils/pressability'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  pressProps,
+  viewProps
+])
 
 const selectIconTextTokens = ({
   icon,
@@ -95,6 +103,11 @@ const Tags = forwardRef(
     })
     const itemA11yRole = 'checkbox'
 
+    const uniqueFields = ['id', 'label']
+    if (!containUniqueFields(items, uniqueFields)) {
+      throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`)
+    }
+
     return (
       <StackWrap
         ref={ref}
@@ -103,22 +116,22 @@ const Tags = forwardRef(
         direction={direction}
         tokens={stackTokens}
       >
-        {items.map(({ label, id = label, accessibilityLabel, ref: itemRef }, index) => {
+        {items.map(({ label, id = label, ref: itemRef, ...itemRest }, index) => {
           const isSelected = currentValues.includes(id)
 
           // Pass an object of relevant component state as first argument for any passed-in press handlers
           const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
 
           const handlePress = (event) => {
-            if (pressHandlers.onPress) pressHandlers.onPress()
+            if (pressHandlers.onPress) pressHandlers.onPress(event)
             toggleOneValue(id, event)
           }
 
-          const itemA11y = {
+          const itemProps = {
             accessibilityState: { checked: isSelected },
             accessibilityRole: itemA11yRole,
-            accessibilityLabel,
-            ...a11yProps.getPositionInSet(items.length, index)
+            ...a11yProps.getPositionInSet(items.length, index),
+            ...selectItemProps(itemRest)
           }
 
           return (
@@ -130,7 +143,7 @@ const Tags = forwardRef(
               tokens={getButtonTokens}
               selected={isSelected}
               inactive={inactive}
-              {...itemA11y}
+              {...itemProps}
             >
               {({ textStyles, ...buttonState }) => {
                 // TODO: once Icon/IconButton designs are stable, see if this sort of styling around
@@ -183,6 +196,7 @@ Tags.propTypes = {
    */
   items: PropTypes.arrayOf(
     PropTypes.shape({
+      ...selectedItemPropTypes,
       /**
        * The text displayed to the user in the button, describing this option,
        * passed to the button as its child.

package/src/TextInput/TextArea.jsx

@@ -3,9 +3,12 @@ import React, { forwardRef, useState } from 'react'
 import { Platform } from 'react-native'
 import {
   a11yProps,
+  focusHandlerProps,
   getTokensPropType,
   inputSupportsProps,
   selectSystemProps,
+  textInputHandlerProps,
+  textInputProps,
   variantProp,
   viewProps
 } from '../utils'
@@ -16,7 +19,10 @@ import textInputPropTypes from './propTypes'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
+  focusHandlerProps,
   inputSupportsProps,
+  textInputHandlerProps,
+  textInputProps,
   viewProps
 ])
 
@@ -60,7 +66,7 @@ const TextArea = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
     }
   }
 
-  const { props: supportsProps, ...selectedProps } = selectProps(rest)
+  const { supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {
     ...selectedProps,