A new component: Hierarchical Multi Select Dropdown

[spulloor]

We already have a component MultiSelect which allows multiple values to be selected at the same time from a dropdown but what if I have a scenario where I need to only select all values inside a certain category I don't have a way of doing this currently using this MultiSelect component. For this I propose we create a new component that will support this type of UX. I have attached a screenshot I grabbed from the internet for this.

Here's what I found on the internet on what this component's design requirements got to be:

1. Checkboxes: Every item in the hierarchy should have a checkbox.
2. Tri-state Checkboxes: Parent nodes should show a "partial" state if some, but not all, of their children are selected.
3. Collapsible Nodes: Parents should collapse and expand so users don't get overwhelmed by large lists.
4. Chip/Tag Display: Selected items should display in the input box as compact "chips" with an "x" to easily remove them.
5. Select/Deselect All: Clicking a parent node should logically check/uncheck all nested sub-items.

I try to find an exisiting issue that tackles this problem but couldn't find one so i'm creating one here. If this is something that the team is looking forward to be part of the library i'll be more than willing to work on this component for the library.

[rtivital]

It is available as TreeSelect – https://mantine.dev/core/tree-select/