Repository: storybookjs/storybook
File: code/core/src/components/components/Select/Select.tsx (TypeScript)

Code before:
  /** Whether the Select is currently disabled. */
  disabled?: boolean;

  /** Options available in the select. */
  options: Option[];

  /** IDs of the preselected options. */
  defaultOptions?: Value | Value[];

  /** Whether the Select should render open. */
  defaultOpen?: boolean;

  /** When set, a reset option is rendered in the Select listbox. */
  onReset?: () => void;

  /** Custom text label for the reset option when it exists. */
  resetLabel?: string;

  onSelect?: (option: Value) => void;
  onDeselect?: (option: Value) => void;
  onChange?: (selected: Value[]) => void;
  /**
   * Whether to show the selected option's title in place of the children when an option is
   * selected. Defaults to true.
   */
  showSelectedLabel?: boolean;
}

function valueToId(parentId: string, { value }: InternalOption | ResetOption): string {
  return `${parentId}-opt-${String(value) ?? 'sb-reset'}`;
}

const SelectedOptionCount = styled.span(({ theme }) => ({
  appearance: 'none',
  color: theme.textMutedColor,
  fontSize: 12,
}));

function setSelectedFromDefault(
  options: SelectProps['options'],
  defaultOptions: SelectProps['defaultOptions']
): InternalOption[] {
  if (defaultOptions === undefined) {
    return [];
  }

  if (isLiteralValue(defaultOptions)) {
    return options.filter((opt) => opt.value === defaultOptions).map(optionToInternal);
  }

  return options

Review comment (suggestion):
```suggestion
  /**
   * Legacy option for ToolbarMenuSelect. Do not set this prop in new Storybook code. Whether to show the selected option's title or to preserve the Select's title when a selection is made.
   * @default true
   */
  showSelectedOptionTitle?: boolean;
```

Two comments here:
* I truly do not want people to start using this prop because we made an explicit UX choice with @MichaelArestad to always show the selected item; it aligns the component's behaviour more closely with native HTML `select`
* Let's name it `showSelectedOptionTitle` because it controls showing the selected option's title; this will help us understand our code better :)

Code after:
  icon?: React.ReactNode;

  /** Whether the Select is currently disabled. */
  disabled?: boolean;

  /** Options available in the select. */
  options: Option[];

  /** IDs of the preselected options. */
  defaultOptions?: Value | Value[];

  /** Whether the Select should render open. */
  defaultOpen?: boolean;

  /** When set, a reset option is rendered in the Select listbox. */
  onReset?: () => void;

  /** Custom text label for the reset option when it exists. */
  resetLabel?: string;

  onSelect?: (option: Value) => void;
  onDeselect?: (option: Value) => void;
  onChange?: (selected: Value[]) => void;
  /**
   * Legacy option for ToolbarMenuSelect. Do not use in new code. Controls whether to show the
   * selected option's title.
   *
   * @default true
   */
  showSelectedOptionTitle?: boolean;
}

function valueToId(parentId: string, { value }: InternalOption | ResetOption): string {
  return `${parentId}-opt-${String(value) ?? 'sb-reset'}`;
}

const SelectedOptionCount = styled.span(({ theme }) => ({
  appearance: 'none',
  color: theme.textMutedColor,
  fontSize: 12,
}));

function setSelectedFromDefault(
  options: SelectProps['options'],
  defaultOptions: SelectProps['defaultOptions']
): InternalOption[] {
  if (defaultOptions === undefined) {
    return [];
  }

  if (isLiteralValue(defaultOptions)) {