DualListSelector: support list of objects as options

[xprazak2]

Describe the issue. What is the expected and unexpected behavior?

availableOptions and chosenOptions props have the type React.ReactNode[] | DualListSelectorTreeItemData[]. When using basic select (no tree/checkboxes), I would like to pass array of objects as available and chosen options.

The use case is to separate what is presented to user for selection and how the items are identified. We often want to present a user-friendly name while keeping track of the items by id.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

const available = [{ id: 'xyz', name: 'First available' }, { id: 'pqr', name: 'Second available' }]
const chosen = [{ id: 'abc', name: 'First chosen' }]

<DualListSelector
  availableOptions={available}
  chosenOptions={chosen}
/>

A posiblilty is to use a formatter function: { id: 'abx', toString: () => "Pretty name for users" }

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?

Enhancement

[tlabaj]

cc @nicolethoen

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[nicolethoen]

I think this can still happen - @xprazak2 is this still something you need?

[xprazak2]

@nicolethoen, there is no urgent need, it is an enhancement that would make it easier to use the component.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.