export function Placeholder()

in src/stories/DropdownMenu2/fixtures.stories.tsx [76:94]


export function Placeholder(): JSX.Element {
  const [selectedIndex, setSelectedIndex] = React.useState(-1)
  const selectedType = fieldTypes[selectedIndex] || {}

  return (
    <>
      <h1>With placeholder</h1>

      <DropdownMenu>
        <DropdownMenu.Button aria-label="Select field type" leadingIcon={selectedType.icon}>
          {selectedType.name || 'Pick a field type'}
        </DropdownMenu.Button>
        <DropdownMenu.Overlay width="medium">
          <ActionList>
            {fieldTypes.map((type, index) => (
              <ActionList.Item key={index} selected={index === selectedIndex} onSelect={() => setSelectedIndex(index)}>
                <type.icon /> {type.name}
              </ActionList.Item>
            ))}