# UI: Menu

> Menu mit Einträgen, Trennlinien, Popover und Auslöser, dazu useDeliberatePress für destruktive Einträge.

Source: https://pithyx.org/de/docs/reference/sdk/ui/menu/
Markdown: https://pithyx.org/de/docs/reference/sdk/ui/menu.md

Menu mit Einträgen, Trennlinien, Popover und Auslöser, dazu useDeliberatePress für destruktive Einträge. Importiere die Token-Datei einmal (`@pithyx/ui/tokens.css`) und umschließe die App mit `UiProvider`; siehe [@pithyx/ui](https://pithyx.org/de/docs/sdk/ui/).

Beim Build aus den TSDoc-Kommentaren von @pithyx/ui 1.0.0-rc.9 erzeugt; der Text unter den Überschriften ist der Kommentar im Quelltext und bleibt Englisch.

## Schnittstellen

### MenuItemProps

The props of [MenuItem](#menuitem).

#### Erweitert

- `Omit`\<`AriaMenuItemProps`, `"className"` \| `"children"`\>

#### Eigenschaften

##### icon?

```ts
optional icon?: ReactNode;
```

An icon before the label.

##### children

```ts
children: ReactNode;
```

The label; a string is also the text for type-ahead.

##### tone?

```ts
optional tone?: "danger" | "default";
```

`danger` for a destructive entry; `default` when left out.

##### shortcut?

```ts
optional shortcut?: string;
```

Keyboard shortcut shown at the end of the item.

## Variablen

### MenuTrigger

```ts
const MenuTrigger: (props) => Element | null = AriaMenuTrigger;
```

Opens a menu from its trigger: the first child is the trigger (a `Button` or `IconButton`), the second a
[MenuPopover](#menupopover) with the [Menu](#menu). It is React Aria's `MenuTrigger`; its props (`isOpen`, `onOpenChange`,
`trigger`) are documented there.

#### Parameter

| Parameter | Typ                | Beschreibung                                          |
| --------- | ------------------ | ----------------------------------------------------- |
| `props`   | `MenuTriggerProps` | React Aria's menu trigger props and the two children. |

#### Rückgabewert

`Element` \| `null`

The trigger with its menu.

## Funktionen

### MenuPopover()

```ts
function MenuPopover(props): Element;
```

The popover a [Menu](#menu) opens in, next to its trigger inside a `MenuTrigger`.

#### Parameter

| Parameter | Typ                                                | Beschreibung                                        |
| --------- | -------------------------------------------------- | --------------------------------------------------- |
| `props`   | `Omit`\<`PopoverProps`, `"className"`\> & `object` | React Aria's popover props (`placement`, `offset`). |

#### Rückgabewert

`Element`

The popover.

---

### Menu()

```ts
function Menu<T>(props): Element;
```

A menu of [MenuItem](#menuitem)s and [MenuSeparator](#menuseparator)s, with keyboard and touch handling.

#### Typenparameter

| Typenparameter         |
| ---------------------- |
| `T` _extends_ `object` |

#### Parameter

| Parameter | Typ                                                    | Beschreibung                                                    |
| --------- | ------------------------------------------------------ | --------------------------------------------------------------- |
| `props`   | `Omit`\<`MenuProps`\<`T`\>, `"className"`\> & `object` | React Aria's menu props (`onAction`, `selectionMode`, `items`). |

#### Rückgabewert

`Element`

The menu.

#### Beispiel

```tsx
<MenuTrigger>
  <IconButton label="More">
    <IconDots size={18} />
  </IconButton>
  <MenuPopover>
    <Menu onAction={(id) => run(String(id))}>
      <MenuItem id="rename" shortcut="F2">
        Rename
      </MenuItem>
      <MenuSeparator />
      <MenuItem id="delete" tone="danger">
        Delete
      </MenuItem>
    </Menu>
  </MenuPopover>
</MenuTrigger>
```

---

### MenuItem()

```ts
function MenuItem(props): Element;
```

One entry of a menu, with an optional icon and key hint. It shows a check mark in a menu with a `selectionMode` and
a chevron when it opens a submenu.

#### Parameter

| Parameter | Typ                               | Beschreibung                                                                                             |
| --------- | --------------------------------- | -------------------------------------------------------------------------------------------------------- |
| `props`   | [`MenuItemProps`](#menuitemprops) | React Aria's menu item props (`id`, `onAction`, `isDisabled`, `textValue`) plus icon, tone and shortcut. |

#### Rückgabewert

`Element`

The menu item.

---

### MenuSeparator()

```ts
function MenuSeparator(): Element;
```

A line between groups of menu entries.

#### Rückgabewert

`Element`

The separator.

---

### useDeliberatePress()

```ts
function useDeliberatePress(): object;
```

React Aria runs a menu item's action when a mouse press that began elsewhere, on the menu's trigger, is released
over the item (press, drag, release). A menu that opens under the pointer can then act on a plain click of its
trigger. Destructive items take their action only from a press that started on them: spread `pressProps` on the
item and ask `confirm()` in the menu's action handler.

#### Rückgabewert

The props for the item and the check for the action handler.

##### pressProps

```ts
pressProps: object;
```

Spread on the destructive item.

###### pressProps.onPressStart

```ts
onPressStart: () => void;
```

Arms the item when a press starts on it.

###### Rückgabewert

`void`

##### confirm

```ts
confirm: () => boolean;
```

Whether the action comes from a press that started on the item; disarms it.

###### Rückgabewert

`boolean`

#### Beispiel

```tsx
const deliberate = useDeliberatePress();
<Menu onAction={(id) => id === 'delete' && deliberate.confirm() && remove()}>
  <MenuItem id="delete" tone="danger" {...deliberate.pressProps}>
    Delete
  </MenuItem>
</Menu>;
```