Module Solidtype_heroui.Dropdown

HeroUI's Dropdown: Kobalte's DropdownMenu, a menu of actions or of options that opens from a trigger, with HeroUI's classes from Styles.Dropdown, Styles.MenuItem and Styles.MenuSection.

  <Dropdown>
    <Button aria_label="Menu" variant=`secondary>"Actions"</Button>
    <Dropdown.Popover>
      <Dropdown.Menu on_action=(fun key -> act key)>
        <Dropdown.Item id="new-file" text_value="New file">
          <Label>"New file"</Label>
        </Dropdown.Item>
        <Dropdown.Item id="delete-file" text_value="Delete file"
          variant=`danger>
          <Label>"Delete file"</Label>
        </Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown.Popover>
  </Dropdown>

A Button inside a dropdown is its trigger, as in HeroUI, and shows pressed while the menu is open; so is a Trigger, around anything else. A press on the trigger opens the menu, as do Enter, Space and the arrows; with trigger=`long_press only a press held half a second does, or Alt and an arrow, and the trigger is described so to a reader, as React Aria's is.

The menu gives the focus to its selected item as it opens, else to itself, and the arrows move it between the items, as typing an item's text does. An item chosen -- pressed, or Enter or Space on it -- calls the menu's on_action with its id and closes the menu, but in a selection of many, which a press or Space keeps open, as React Aria's does. Escape or a press outside closes it, and the focus goes back to its trigger.

The menu is Kobalte's menu, which is its Popover itself, where React Aria's popover is a dialog around its menu: a reader is told the same menu and items, and HeroUI's styles read the same classes and attributes.

A part is used inside a Dropdown, an indicator inside a Item: elsewhere it raises Invalid_argument as it is made.

type selection_mode = [
  1. | `none
  2. | `single
  3. | `multiple
]

How a menu or a section selects its items: not at all, one at most, or many.

module Trigger : sig ... end

A trigger of anything that is not a Button: Kobalte's trigger, a <button>.

module Popover : sig ... end

The menu's popover: drawn in a portal at the end of the page while it is open, and while HeroUI's exit animation plays after, placement beside its trigger, bottom by default. Inside a Submenu_trigger, the submenu's, beside its item.

module Menu : sig ... end

The menu's items. selection_mode is read as it is made. Its selected_keys are the selected items' ids while it is given, else those it keeps, default_selected_keys at first; a change calls on_selection_change with them. An item whose id disabled_keys holds is disabled. Choosing an item calls on_action with its id. Its separators are <div>s, as React Aria's menu's are.

module Section : sig ... end

A group of items: Kobalte's group, a <section> its Header names. With a selection_mode, its items are a selection of their own, as the Menu's props say, else they are the menu's.

module Item : sig ... end

An item, known by its id, typed to by its text_value: Kobalte's item, a menuitem; in a selection of one a menuitemradio, of many a menuitemcheckbox, checked while it is selected; and the trigger of its submenu inside a Submenu_trigger. A Description inside it describes it.

module Item_indicator : sig ... end

What shows its item selected: HeroUI's check, drawn in as it is selected, or its dot; or what children draws, given a read of whether its item is selected, as HeroUI's render function is given isSelected.

module Submenu_indicator : sig ... end

HeroUI's chevron, or the children it is given, on an item that opens a submenu, and nothing on any other.

module Submenu_trigger : sig ... end

An Item and the Popover of the submenu it opens: Kobalte's submenu, opened by a hover, a press, or the arrow toward it, and closed by the arrow back.

module Props : sig ... end