@charcoal-ui/react 3.7.0 → 3.9.0

package/src/components/TextField/index.tsx

@@ -7,6 +7,7 @@ import FieldLabel, { FieldLabelProps } from '../FieldLabel'
 import { countCodePointsInString, mergeRefs } from '../../_lib'
 import { ReactAreaUseTextFieldCompat } from '../../_lib/compat'
 import { useFocusWithClick } from './useFocusWithClick'
+import { mergeProps } from '@react-aria/utils'
 
 type DOMProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
@@ -60,6 +61,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
       maxLength,
       prefix = null,
       suffix = null,
+      ...restProps
     } = props
 
     const { visuallyHiddenProps } = useVisuallyHidden()
@@ -87,25 +89,31 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
       setCount(countCodePointsInString(props.value ?? ''))
     }, [props.value])
 
-    const { inputProps, labelProps, descriptionProps, errorMessageProps } =
-      useTextField(
-        {
-          inputElementType: 'input',
-          isDisabled: disabled,
-          isRequired: required,
-          validationState: invalid ? 'invalid' : 'valid',
-          description: !invalid && assistiveText,
-          errorMessage: invalid && assistiveText,
-          onChange: handleChange,
-          ...props,
-        },
-        ariaRef
-      )
+    const {
+      inputProps: ariaInputProps,
+      labelProps,
+      descriptionProps,
+      errorMessageProps,
+    } = useTextField(
+      {
+        inputElementType: 'input',
+        isDisabled: disabled,
+        isRequired: required,
+        validationState: invalid ? 'invalid' : 'valid',
+        description: !invalid && assistiveText,
+        errorMessage: invalid && assistiveText,
+        onChange: handleChange,
+        ...props,
+      },
+      ariaRef
+    )
 
     const containerRef = useRef(null)
 
     useFocusWithClick(containerRef, ariaRef)
 
+    const inputProps = mergeProps(restProps, ariaInputProps)
+
     return (
       <TextFieldRoot className={className} isDisabled={disabled}>
         <TextFieldLabel
@@ -191,13 +199,6 @@ const StyledInputContainer = styled.div<{
     background-color: var(--charcoal-surface3-hover);
   }
 
-  :not(:disabled):not([aria-disabled]):active,
-  [aria-disabled='false']:active {
-    outline: none;
-    box-shadow: 0 0 0 4px
-      ${(p) => (p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`)};
-  }
-
   :focus-within {
     outline: none;
     box-shadow: 0 0 0 4px