Introduce dropdown options for HvDropdown Component

[ashok-he]

Latest version

• I have tested the latest version

No Hitachi confidential content

• I'm not including any Hitachi confidential content

Summary 💡

Currently the HvDropdown component doesn't have options props or menuitems as children. The options and values are integrated together and commonly uses as value prop. In such case handling the selected state and updating the state values is coupled and the user needs to do that login on the frontend!

Examples 🌈

We can use something similar to MUI Select components(https://mui.com/material-ui/react-select/)! or react select component(https://www.npmjs.com/package/react-select). This way we can decouple the dependency between options and values in HvDropdown component.

Ex 1) React Select
Ex 2) MUI Select Age <Select labelId="demo-simple-select-label" id="demo-simple-select" value={age} label="Age" onChange={handleChange} <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem>

Motivation 🔦

No response

[zettca]

Hello @ashok-he 👋

Please take a look at our HvSelect component: https://lumada-design.github.io/uikit/master/?path=/docs/components-select--docs

It's a simpler component that doesn't include BulkActions or Search, but gives the user full control over the rendering of the options. The rendering and selection state are decoupled.
The API is really similar to MUI's Select, as the implementation is based on their useSelect hook