Separators in select, multiselect, groupMultiselect, and autocomplete

[aqeelat]

Context

This came up while evaluating @clack/prompts as a potential replacement for enquirer.js, comparing it with enquirer.js and @inquirer/prompts.

Related PR: #547
Split out from: #550

Problem

Some select-like prompts have no way to render non-selectable rows inside the options list.

This is useful for table-style prompts, section headers, or column headings:

Package              Current   Target
lodash               1.0.0     2.0.0
chalk                4.0.0     5.0.0

Currently, these rows have to be encoded as selectable options or omitted.

Proposal

Support separator/header rows in select-like prompts:

const result = await multiselect({
  message: 'Choose packages',
  options: [
    { type: 'separator', label: 'Package    Current   Target' },
    { value: 'lodash', label: 'lodash     1.0.0     2.0.0' },
    { value: 'chalk', label: 'chalk      4.0.0     5.0.0' },
  ],
})

Separator rows should:

• Be rendered in the options list
• Be skipped by cursor navigation
• Be excluded from the returned value
• Work consistently across select, multiselect, groupMultiselect, and autocomplete

Notes

For groupMultiselect, this would allow separators inside each group as well as regular selectable options.