Addon-knobs: allow array values in select and options knobs

addons/knobs/src/__types__/knob-test-cases.ts

@@ -106,7 +106,7 @@ expectKnobOfType<string>(
     },
     'none'
   ),
-  select('select with string array', ['yes', 'no'], 'yes'),
+  select<string>('select with string array', ['yes', 'no'], 'yes'),
   select('select with string literal array', stringLiteralArray, stringLiteralArray[0]),
   select('select with readonly array', ['red', 'blue'] as const, 'red'),
   select<ButtonVariant>('select with string enum options', ButtonVariant, ButtonVariant.primary)
@@ -123,14 +123,68 @@ expectKnobOfType<number>(
     { 'type a': SomeEnum.Type1, 'type b': SomeEnum.Type2 },
     SomeEnum.Type2
   ),
-  select('select with number array', [1, 2, 3, 4], 1),
+  select<number>('select with number array', [1, 2, 3, 4], 1),
   select('select with readonly number array', [1, 2] as const, 1)
 );
 
 expectKnobOfType<number | null>(
   select('select with null option', { a: 1, b: null }, null, groupId)
 );
 
+expectKnobOfType<string | string[]>(
+  select(
+    'select with string and string array options',
+    {
+      Red: 'red',
+      Blue: 'blue',
+      Yellow: 'yellow',
+      Rainbow: ['red', 'orange', 'etc'],
+      None: 'transparent',
+    },
+    'red'
+  )
+);
+
+expectKnobOfType<number | number[]>(
+  select(
+    'select with number and number array options',
+    {
+      Red: 1,
+      Blue: 2,
+      Yellow: 3,
+      Rainbow: [4, 5, 6],
+      None: 7,
+    },
+    7
+  )
+);
+
+expectKnobOfType<string | string[] | null>(
+  select(
+    'select with string, string array, and null options',
+    {
+      Red: 'red',
+      Blue: 'blue',
+      Yellow: 'yellow',
+      Rainbow: ['red', 'orange', 'etc'],
+      None: null,
+    },
+    null
+  )
+);
+
+expectKnobOfType<number[]>(
+  select(
+    'select with number array options',
+    {
+      ones: [1],
+      twos: [2, 2],
+      threes: [3, 3, 3],
+    },
+    [1]
+  )
+);
+
 /** Object knob */
 
 expectKnobOfType(
@@ -163,6 +217,68 @@ expectKnobOfType(
   options('options with group', {}, '', { display: 'check' })
 );
 
+expectKnobOfType<number | null>(
+  options('select with null option', { a: 1, b: null }, null, { display: 'check' })
+);
+
+expectKnobOfType<string | string[]>(
+  options(
+    'options with string and string array options',
+    {
+      Red: 'red',
+      Blue: 'blue',
+      Yellow: 'yellow',
+      Rainbow: ['red', 'orange', 'etc'],
+      None: 'transparent',
+    },
+    'red',
+    { display: 'check' }
+  )
+);
+
+expectKnobOfType<number | number[]>(
+  options(
+    'select with number and number array options',
+    {
+      Red: 1,
+      Blue: 2,
+      Yellow: 3,
+      Rainbow: [4, 5, 6],
+      None: 7,
+    },
+    7,
+    { display: 'check' }
+  )
+);
+
+expectKnobOfType<string | string[] | null>(
+  options(
+    'select with string, string array, and null options',
+    {
+      Red: 'red',
+      Blue: 'blue',
+      Yellow: 'yellow',
+      Rainbow: ['red', 'orange', 'etc'],
+      None: null,
+    },
+    null,
+    { display: 'check' }
+  )
+);
+
+expectKnobOfType<number[]>(
+  options(
+    'select with number array options',
+    {
+      ones: [1],
+      twos: [2, 2],
+      threes: [3, 3, 3],
+    },
+    [1],
+    { display: 'check' }
+  )
+);
+
 /** Array knob */
 
 const arrayReadonly = array('array as readonly', ['hi', 'there'] as const);

addons/knobs/src/components/types/Options.tsx

@@ -9,7 +9,14 @@ import CheckboxesType from './Checkboxes';
 
 // TODO: Apply the Storybook theme to react-select
 
-export type OptionsTypeKnobSingleValue = string | number | null | undefined;
+export type OptionsTypeKnobSingleValue =
+  | string
+  | number
+  | null
+  | undefined
+  | string[]
+  | number[]
+  | (string | number)[];
 
 export type OptionsTypeKnobValue<
   T extends OptionsTypeKnobSingleValue = OptionsTypeKnobSingleValue
@@ -24,7 +31,7 @@ export type OptionsKnobOptionsDisplay =
   | 'multi-select';
 
 export interface OptionsKnobOptions {
-  display?: OptionsKnobOptionsDisplay;
+  display: OptionsKnobOptionsDisplay;
 }
 
 export interface OptionsTypeKnob<T extends OptionsTypeKnobValue> extends KnobControlConfig<T> {

addons/knobs/src/components/types/Select.tsx

@@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
 import { Form } from '@storybook/components';
 import { KnobControlConfig, KnobControlProps } from './types';
 
-export type SelectTypeKnobValue = string | number | null | undefined;
+export type SelectTypeKnobValue = string | number | null | undefined | PropertyKey[];
 
 export type SelectTypeOptionsProp<T extends SelectTypeKnobValue = SelectTypeKnobValue> =
-  | Record<string | number, T>
-  | Record<Exclude<T, null | undefined>, T[keyof T]>
-  | Exclude<T, null | undefined>[]
-  | readonly Exclude<T, null | undefined>[];
+  | Record<PropertyKey, T>
+  | Record<Extract<T, PropertyKey>, T[keyof T]>
+  | Extract<T, PropertyKey>[]
+  | readonly Extract<T, PropertyKey>[];
 
 export interface SelectTypeKnob<T extends SelectTypeKnobValue = SelectTypeKnobValue>
   extends KnobControlConfig<T> {
@@ -31,8 +31,8 @@ const SelectType: FunctionComponent<SelectTypeProps> & {
 } = ({ knob, onChange }) => {
   const { options } = knob;
   const entries = Array.isArray(options)
-    ? options.reduce<Record<string, SelectTypeKnobValue>>((acc, k) => ({ ...acc, [k]: k }), {})
-    : (options as Record<string, SelectTypeKnobValue>);
+    ? options.reduce<Record<PropertyKey, SelectTypeKnobValue>>((acc, k) => ({ ...acc, [k]: k }), {})
+    : (options as Record<PropertyKey, SelectTypeKnobValue>);
 
   const selectedKey = Object.keys(entries).find(k => {
     if (Array.isArray(knob.value)) {