@charcoal-ui/react 5.5.0 → 5.6.0-beta.0

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 (8) hide show
  1. package/dist/components/DropdownSelector/index.d.ts +21 -2
  2. package/dist/components/DropdownSelector/index.d.ts.map +1 -1
  3. package/dist/index.cjs +1 -1
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.js +1 -1
  6. package/dist/index.js.map +1 -1
  7. package/package.json +5 -5
  8. package/src/components/DropdownSelector/index.tsx +119 -106
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@charcoal-ui/react",
3
- "version": "5.5.0",
3
+ "version": "5.6.0-beta.0",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -54,10 +54,10 @@
54
54
  "react-compiler-runtime": "1.0.0",
55
55
  "react-stately": "^3.26.0",
56
56
  "warning": "^4.0.3",
57
- "@charcoal-ui/theme": "5.5.0",
58
- "@charcoal-ui/foundation": "5.5.0",
59
- "@charcoal-ui/utils": "5.5.0",
60
- "@charcoal-ui/icons": "5.5.0"
57
+ "@charcoal-ui/foundation": "5.6.0-beta.0",
58
+ "@charcoal-ui/icons": "5.6.0-beta.0",
59
+ "@charcoal-ui/theme": "5.6.0-beta.0",
60
+ "@charcoal-ui/utils": "5.6.0-beta.0"
61
61
  },
62
62
  "peerDependencies": {
63
63
  "react": ">=17.0.0"
package/src/components/DropdownSelector/index.tsx CHANGED
@@ -1,6 +1,13 @@
1
1
  import './index.css'
2
2
 
3
- import React, { ReactNode, useState, useRef, useMemo, useCallback } from 'react'
3
+ import React, {
4
+ ReactNode,
5
+ useState,
6
+ useRef,
7
+ useMemo,
8
+ useCallback,
9
+ forwardRef,
10
+ } from 'react'
4
11
  import Icon from '../Icon'
5
12
  import FieldLabel from '../FieldLabel'
6
13
  import { DropdownPopover } from './DropdownPopover'
@@ -33,118 +40,124 @@ export type DropdownSelectorProps = {
33
40
  className?: string
34
41
  } & Pick<PopoverProps, 'inertWorkaround'>
35
42
 
36
- export default function DropdownSelector({
37
- onChange,
38
- showLabel = false,
39
- ...props
40
- }: DropdownSelectorProps) {
41
- const triggerRef = useRef<HTMLButtonElement>(null)
42
- const [isOpen, setIsOpen] = useState(false)
43
- const preview = findPreviewRecursive(props.children, props.value)
43
+ const DropdownSelector = forwardRef<HTMLSelectElement, DropdownSelectorProps>(
44
+ ({ onChange, showLabel = false, ...props }: DropdownSelectorProps, ref) => {
45
+ const triggerRef = useRef<HTMLButtonElement>(null)
46
+ const [isOpen, setIsOpen] = useState(false)
47
+ const preview = findPreviewRecursive(props.children, props.value)
44
48
 
45
- const isPlaceholder = useMemo(
46
- () => props.placeholder !== undefined && preview === undefined,
47
- [preview, props.placeholder],
48
- )
49
+ const isPlaceholder = useMemo(
50
+ () => props.placeholder !== undefined && preview === undefined,
51
+ [preview, props.placeholder],
52
+ )
49
53
 
50
- const propsArray = getValuesRecursive(props.children)
54
+ const propsArray = getValuesRecursive(props.children)
51
55
 
52
- const { visuallyHiddenProps } = useVisuallyHidden()
56
+ const { visuallyHiddenProps } = useVisuallyHidden()
53
57
 
54
- const handleChange = useCallback(
55
- (e: React.ChangeEvent<HTMLSelectElement>) => {
56
- onChange(e.target.value)
57
- },
58
- [onChange],
59
- )
58
+ const handleChange = useCallback(
59
+ (e: React.ChangeEvent<HTMLSelectElement>) => {
60
+ onChange(e.target.value)
61
+ },
62
+ [onChange],
63
+ )
60
64
 
61
- const labelId = useId()
62
- const describedbyId = useId()
65
+ const labelId = useId()
66
+ const describedbyId = useId()
63
67
 
64
- const classNames = useClassNames(
65
- 'charcoal-dropdown-selector-root',
66
- props.className,
67
- )
68
+ const classNames = useClassNames(
69
+ 'charcoal-dropdown-selector-root',
70
+ props.className,
71
+ )
68
72
 
69
- return (
70
- <div className={classNames} aria-disabled={props.disabled}>
71
- <FieldLabel
72
- id={labelId}
73
- label={props.label}
74
- required={props.required}
75
- requiredText={props.requiredText}
76
- subLabel={props.subLabel}
77
- {...(!showLabel ? visuallyHiddenProps : {})}
78
- />
79
- <div {...visuallyHiddenProps} aria-hidden="true">
80
- <select
81
- name={props.name}
82
- value={props.value}
83
- onChange={handleChange}
84
- tabIndex={-1}
85
- >
86
- {propsArray.map((itemProps) => {
87
- return (
88
- <option
89
- key={itemProps.value}
90
- value={itemProps.value}
91
- disabled={itemProps.disabled}
92
- >
93
- {itemProps.value}
94
- </option>
95
- )
96
- })}
97
- </select>
98
- </div>
99
- {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}
100
- <button
101
- className="charcoal-dropdown-selector-button"
102
- aria-labelledby={labelId}
103
- aria-invalid={props.invalid}
104
- aria-describedby={
105
- props.assistiveText !== undefined ? describedbyId : undefined
106
- }
107
- disabled={props.disabled}
108
- onClick={() => {
109
- if (props.disabled === true) return
110
- setIsOpen(true)
111
- }}
112
- ref={triggerRef}
113
- type="button"
114
- data-active={isOpen}
115
- >
116
- <span
117
- className="charcoal-ui-dropdown-selector-text"
118
- data-placeholder={isPlaceholder}
119
- >
120
- {isPlaceholder ? props.placeholder : preview}
121
- </span>
122
- <Icon className="charcoal-ui-dropdown-selector-icon" name="16/Menu" />
123
- </button>
124
- {isOpen && (
125
- <DropdownPopover
126
- isOpen={isOpen}
127
- onClose={() => setIsOpen(false)}
128
- triggerRef={triggerRef}
129
- value={props.value}
130
- inertWorkaround={props.inertWorkaround}
73
+ return (
74
+ <div className={classNames} aria-disabled={props.disabled}>
75
+ <FieldLabel
76
+ id={labelId}
77
+ label={props.label}
78
+ required={props.required}
79
+ requiredText={props.requiredText}
80
+ subLabel={props.subLabel}
81
+ {...(!showLabel ? visuallyHiddenProps : {})}
82
+ />
83
+ <div {...visuallyHiddenProps} aria-hidden="true">
84
+ <select
85
+ ref={ref}
86
+ name={props.name}
87
+ value={props.value}
88
+ onChange={handleChange}
89
+ tabIndex={-1}
90
+ >
91
+ {propsArray.map((itemProps) => {
92
+ return (
93
+ <option
94
+ key={itemProps.value}
95
+ value={itemProps.value}
96
+ disabled={itemProps.disabled}
97
+ >
98
+ {itemProps.value}
99
+ </option>
100
+ )
101
+ })}
102
+ </select>
103
+ </div>
104
+ {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}
105
+ <button
106
+ className="charcoal-dropdown-selector-button"
107
+ aria-labelledby={labelId}
108
+ aria-invalid={props.invalid}
109
+ aria-describedby={
110
+ props.assistiveText !== undefined ? describedbyId : undefined
111
+ }
112
+ disabled={props.disabled}
113
+ onClick={() => {
114
+ if (props.disabled === true) return
115
+ setIsOpen(true)
116
+ }}
117
+ ref={triggerRef}
118
+ type="button"
119
+ data-active={isOpen}
131
120
  >
132
- <MenuList
121
+ <span
122
+ className="charcoal-ui-dropdown-selector-text"
123
+ data-placeholder={isPlaceholder}
124
+ >
125
+ {isPlaceholder ? props.placeholder : preview}
126
+ </span>
127
+ <Icon className="charcoal-ui-dropdown-selector-icon" name="16/Menu" />
128
+ </button>
129
+ {isOpen && (
130
+ <DropdownPopover
131
+ isOpen={isOpen}
132
+ onClose={() => setIsOpen(false)}
133
+ triggerRef={triggerRef}
133
134
  value={props.value}
134
- onChange={(v) => {
135
- onChange(v)
136
- setIsOpen(false)
137
- }}
135
+ inertWorkaround={props.inertWorkaround}
136
+ >
137
+ <MenuList
138
+ value={props.value}
139
+ onChange={(v) => {
140
+ onChange(v)
141
+ setIsOpen(false)
142
+ }}
143
+ >
144
+ {props.children}
145
+ </MenuList>
146
+ </DropdownPopover>
147
+ )}
148
+ {props.assistiveText !== undefined && (
149
+ <AssistiveText
150
+ data-invalid={props.invalid === true}
151
+ id={describedbyId}
138
152
  >
139
- {props.children}
140
- </MenuList>
141
- </DropdownPopover>
142
- )}
143
- {props.assistiveText !== undefined && (
144
- <AssistiveText data-invalid={props.invalid === true} id={describedbyId}>
145
- {props.assistiveText}
146
- </AssistiveText>
147
- )}
148
- </div>
149
- )
150
- }
153
+ {props.assistiveText}
154
+ </AssistiveText>
155
+ )}
156
+ </div>
157
+ )
158
+ },
159
+ )
160
+
161
+ DropdownSelector.displayName = 'DropdownSelector'
162
+
163
+ export default DropdownSelector