Controllable collection model (select)

[NicholasBoll]

🚀 Feature Proposal

Add controllable selectedIds and unselectedIds to the useSelectionListModel. A common ask is for control over a <Select> component's selected state. A "controllable" model is one where the model handles internal state changes based on use input, but allows state to be overridden by incoming config, hence allowing control externally.

We can add the following to the defaultConfig in the useSelectionListModel:

    selectedIds: undefined as undefined | string[],
    unselectedIds: undefined as undefined | string[]

Then update the state to:

const state = {...cursor.state, selectedIds: config.selectedIds || selectedIds, unselectedIds: config.unselectedIds || unselectedIds};

This will allow an override of the model.state.selectedIds from externally:

const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
const model = useSelectModel({
  items: options,
  selectedIds,
  onSelect({ id }) {
    setSelectedIds([id])
  }
})

// some button callback or server fetch callback or something
setSelectedIds(['Foo'])

Motivation

Right now, a developer needs to use a key to completely throw away a component in order to update the current selected state.

Example

https://stackblitz.com/edit/controllable-select-model-6bwrh3?file=src%2FuseControlledSelectModel.ts,src%2FApp.tsx