@charcoal-ui/react 3.8.0 → 3.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/components/Checkbox/index.d.ts.map +1 -1
  2. package/dist/components/Modal/index.d.ts.map +1 -1
  3. package/dist/components/Modal/index.story.d.ts +1 -0
  4. package/dist/components/Modal/index.story.d.ts.map +1 -1
  5. package/dist/components/Modal/useCustomModalOverlay.d.ts +12 -0
  6. package/dist/components/Modal/useCustomModalOverlay.d.ts.map +1 -0
  7. package/dist/components/Radio/index.d.ts.map +1 -1
  8. package/dist/components/TextArea/index.d.ts.map +1 -1
  9. package/dist/components/TextField/TextField.story.d.ts +1 -0
  10. package/dist/components/TextField/TextField.story.d.ts.map +1 -1
  11. package/dist/components/TextField/index.d.ts.map +1 -1
  12. package/dist/index.cjs.js +1001 -2226
  13. package/dist/index.cjs.js.map +1 -1
  14. package/dist/index.esm.js +995 -2226
  15. package/dist/index.esm.js.map +1 -1
  16. package/package.json +7 -6
  17. package/src/components/Checkbox/__snapshots__/index.story.storyshot +43 -15
  18. package/src/components/Checkbox/index.tsx +13 -5
  19. package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +3 -0
  20. package/src/components/IconButton/__snapshots__/index.story.storyshot +5 -0
  21. package/src/components/IconButton/index.tsx +4 -1
  22. package/src/components/Modal/__snapshots__/index.story.storyshot +926 -0
  23. package/src/components/Modal/index.story.tsx +23 -0
  24. package/src/components/Modal/index.tsx +15 -20
  25. package/src/components/Modal/useCustomModalOverlay.tsx +47 -0
  26. package/src/components/Radio/__snapshots__/index.story.storyshot +25 -5
  27. package/src/components/Radio/index.tsx +5 -1
  28. package/src/components/TextArea/index.tsx +22 -14
  29. package/src/components/TextField/TextField.story.tsx +20 -0
  30. package/src/components/TextField/__snapshots__/TextField.story.storyshot +277 -0
  31. package/src/components/TextField/index.tsx +22 -14
package/src/components/TextField/index.tsx CHANGED
@@ -7,6 +7,7 @@ import FieldLabel, { FieldLabelProps } from '../FieldLabel'
7
7
  import { countCodePointsInString, mergeRefs } from '../../_lib'
8
8
  import { ReactAreaUseTextFieldCompat } from '../../_lib/compat'
9
9
  import { useFocusWithClick } from './useFocusWithClick'
10
+ import { mergeProps } from '@react-aria/utils'
10
11
 
11
12
  type DOMProps = Omit<
12
13
  React.InputHTMLAttributes<HTMLInputElement>,
@@ -60,6 +61,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
60
61
  maxLength,
61
62
  prefix = null,
62
63
  suffix = null,
64
+ ...restProps
63
65
  } = props
64
66
 
65
67
  const { visuallyHiddenProps } = useVisuallyHidden()
@@ -87,25 +89,31 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
87
89
  setCount(countCodePointsInString(props.value ?? ''))
88
90
  }, [props.value])
89
91
 
90
- const { inputProps, labelProps, descriptionProps, errorMessageProps } =
91
- useTextField(
92
- {
93
- inputElementType: 'input',
94
- isDisabled: disabled,
95
- isRequired: required,
96
- validationState: invalid ? 'invalid' : 'valid',
97
- description: !invalid && assistiveText,
98
- errorMessage: invalid && assistiveText,
99
- onChange: handleChange,
100
- ...props,
101
- },
102
- ariaRef
103
- )
92
+ const {
93
+ inputProps: ariaInputProps,
94
+ labelProps,
95
+ descriptionProps,
96
+ errorMessageProps,
97
+ } = useTextField(
98
+ {
99
+ inputElementType: 'input',
100
+ isDisabled: disabled,
101
+ isRequired: required,
102
+ validationState: invalid ? 'invalid' : 'valid',
103
+ description: !invalid && assistiveText,
104
+ errorMessage: invalid && assistiveText,
105
+ onChange: handleChange,
106
+ ...props,
107
+ },
108
+ ariaRef
109
+ )
104
110
 
105
111
  const containerRef = useRef(null)
106
112
 
107
113
  useFocusWithClick(containerRef, ariaRef)
108
114
 
115
+ const inputProps = mergeProps(restProps, ariaInputProps)
116
+
109
117
  return (
110
118
  <TextFieldRoot className={className} isDisabled={disabled}>
111
119
  <TextFieldLabel