Repository: h2oai/wave
File: ui/src/dropdown.tsx (TypeScript)

Code before:
  /** An identifying name for this component. */
  name: Id
  /** Text to be displayed alongside the component. */
  label?: S
  /** A string that provides a brief hint to the user as to what kind of information is expected in the field. */
  placeholder?: S
  /** The name of the selected choice. */
  value?: S
  /** The names of the selected choices. If this parameter is set, multiple selections will be allowed. */
  values?: S[]
  /** The choices to be presented. */
  choices?: Choice[]
  /** True if this is a required field. */
  required?: B
  /** True if this field is disabled. */
  disabled?: B
  /** True if the form should be submitted when the dropdown value changes. */
  trigger?: B
  /** The width of the dropdown, e.g. '100px'. Defaults to '100%'. */
  width?: S
  /** True if the component should be visible. Defaults to true. */
  visible?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
  /** Define when the dialog will be displayed. If no value is provided, defaults to 'auto' which will display the dialog only when there are more than 100 choices. */
  dialog?: 'auto' | 'always' | 'never'
}

type DropdownItem = {
  name: S
  text: S
  idx: U
  checked: B
}

const
  css = stylesheet({
    dialogCheckedRow: {
      background: cssVar('$neutralLight')
    },
    dialogControls: {
      display: 'flex',
      justifyContent: 'space-between',
      marginTop: 16
    }
  }),
  BaseDropdown = ({ name, label, required, disabled, value, values, choices, trigger, placeholder }: Dropdown) => {
    const
      isMultivalued = !!values,
      selection = React.useMemo(() => isMultivalued ? new Set<S>(values) : null, [isMultivalued, values]),
      [selectedOptions, setSelectedOptions] = React.useState(Array.from(selection || [])),

Review comment (suggestion):
```suggestion
  popup?: 'auto' | 'always' | 'never'
```

Code after:
  /** An identifying name for this component. */
  name: Id
  /** Text to be displayed alongside the component. */
  label?: S
  /** A string that provides a brief hint to the user as to what kind of information is expected in the field. */
  placeholder?: S
  /** The name of the selected choice. */
  value?: S
  /** The names of the selected choices. If this parameter is set, multiple selections will be allowed. */
  values?: S[]
  /** The choices to be presented. */
  choices?: Choice[]
  /** True if this is a required field. */
  required?: B
  /** True if this field is disabled. */
  disabled?: B
  /** True if the form should be submitted when the dropdown value changes. */
  trigger?: B
  /** The width of the dropdown, e.g. '100px'. Defaults to '100%'. */
  width?: S
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
  /** Whether to present the choices using a pop-up dialog. Defaults to `auto`, which pops up a dialog only when there are more than 100 choices. */
  popup?: 'auto' | 'always' | 'never'
}

type DropdownItem = {
  name: S
  text: S
  idx: U
  checked: B
}

const
  css = stylesheet({
    dialogCheckedRow: {
      background: cssVar('$neutralLight')
    },
    dialogControls: {
      display: 'flex',
      justifyContent: 'space-between',
      marginTop: 16
    }
  }),
  BaseDropdown = ({ name, label, required, disabled, value, values, choices, trigger, placeholder }: Dropdown) => {
    const
      isMultivalued = !!values,
      selection = React.useMemo(() => isMultivalued ? new Set<S>(values) : null, [isMultivalued, values]),
      [selectedOptions, setSelectedOptions] = React.useState(Array.from(selection || [])),