[SelectUnstyled] Create unstyled select (+ hook) #30113
Conversation
|
@material-ui/core: parsed: +21.38% , gzip: +18.11% |
I found another issue - I cannot open the select when pressing Enter (pressing Space works). Also, could we add test cases for the things we noticed that didn't work so far? |
docs/src/pages/components/selects/UnstyledSelectObjectValues.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com>
|
We should improve the color contrast here - Should we do something about dark theme? The demos look weird (it's not related to just this PR, we can address it later) |
| The following example shows a select that opens when hovered over or focused. | ||
| It can be controlled by a mouse/touch or a keyboard. | ||
|
|
||
| {{"demo": "pages/components/selects/UseSelect.js"}} |
There was a problem hiding this comment.
I would say we should make sure that keyboard navigation still works.
Done.
I'll create an issue to review all unstyled demos and to adapt them to the dark theme. I don't think I would use a Theme to detect a mode, though. Perhaps using a |
| const CustomSelect = React.forwardRef(function CustomSelect<TValue>( | ||
| props: SelectUnstyledProps<TValue>, | ||
| ref: React.ForwardedRef<HTMLUListElement>, | ||
| ) { | ||
| const components: SelectUnstyledProps<TValue>['components'] = { | ||
| Root: StyledButton, | ||
| Listbox: StyledListbox, | ||
| Popper: StyledPopper, | ||
| ...props.components, | ||
| }; | ||
|
|
||
| return <SelectUnstyled {...props} ref={ref} components={components} />; | ||
| }) as <TValue>( | ||
| props: SelectUnstyledProps<TValue> & React.RefAttributes<HTMLUListElement>, | ||
| ) => JSX.Element; |
There was a problem hiding this comment.
No need to consider in this PR, would be nice if we provide a utility type or a factory function for building custom component with TS like:
const CustomSelect = createSelect((props, ref) => {
return <SelectUnstyled {...props} ref={ref} components={components} />
})There was a problem hiding this comment.
It's worth considering, I guess. The need for type casting is unfortunate but I haven't found a way to avoid it so a helper function could help indeed :)
| /** | ||
| * @ignore | ||
| */ | ||
| onClick: PropTypes.func, |
There was a problem hiding this comment.
is this removed by the script?
There was a problem hiding this comment.
Yes, yarn proptypes removed it. When working on the Select I've noticed an issue on how events are handled in ButtonUnstyled and will improve it in a separate PR.
Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com>
mnajdova
added
component: select
This PR adds a SelectUnstyled component and useSelect hook.
It is pretty much a new component, with a few parts taken over from the existing @mui/material's Select.
The hook is built using the useButton and useListbox hooks.
Closes #30251
Closes #21022
Design highlights:
OptionUnstyleds in anOptionGroupUnstyled. Nested groups are also supported.SingleSelectUnstyledandMultiSelectUnstyled. They are, however, exposed through aSelectUnstyledwrapper that renders one of them based on the value of themultipleprop. I am considering exporting just SingleSelectUnstyled (renamed as SelectUnstyled) and MultiSelectUnstyled, similarly to Mantine)valueis not converted to string in the onChange handler. It's therefore possible to use objects as values (Select support does't support object value #30066)Features to implement
Another thing to consider in the future would be performance. It feels that we should be able to reduce the work going on behind the scenes if perf becomes a problem.
Preview
https://deploy-preview-30113--material-ui.netlify.app/components/selects/#unstyled