Thanks @iamanishroy, this looks good to me. It looks like you had to read the docs of https://github.com/rowyio/multiselect to implement this as well, so thanks for being diligent.

A note on extending this menu in the future

This was built with the MultiSelect component, which was designed specifically for multiple selection. Adding more functionality like this would be better served by not using MultiSelect for this anymore.

There are two “hacks” that have been needed to implement this feature:

1. Create a new dragDisabled state to track if the user has input anything in the search box. This is done by tracking the onInput event. This should be derived from the state of that input’s value, but this is intentionally not accessible in the MultiSelect component.
2. There are two paths to access items with the keyboard. When the input is focused, the user can press the arrow keys to select columns to be hidden. This is consistent with the WAI-ARIA guidelines implemented by the MUI Autocomplete component, on which this component is based.
   But to reorder columns, the user must press Tab to select each individual column. This also makes the “Clear” and “Done” buttons less accessible, as previously they only had to Tab once to get to them, but must now go through all columns.