# components/floating/Popover (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/floating/Popover.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/floating/Popover.tsx).

## Components

### `Popover`

Component.

Renders a trigger that opens a floating surface. The caller draws the trigger from the props
it receives, so any control can open one. A surface that is or holds a menu or listbox takes
focus on open; Esc and a pick hand focus back to the trigger.

```ts
function Popover(props: PopoverProps): Element
```

**Parameters**

- `props` (`PopoverProps`): Component props.

**Returns** `Element`

**Props**

- `align?` (`Align`, default `'start'`): How the surface lines up along the trigger's edge.
- `ariaLabel` (`string`): Accessible name of the surface.
- `children` (`(close: () => void) => ReactNode`): Renders the surface content. `close` closes the surface and returns focus to the trigger, for
  use after a pick.
- `className?` (`string`): Extra classes on the surface.
- `onDismiss?` (`() => void`): Called when an outside press, Esc or the trigger closes the surface. Not called for a close
  from `children`.
- `onOpenChange?` (`(open: boolean) => void`): Called when the surface opens or closes, however it does (to load what it shows on each opening).
- `role?` (`'dialog' | 'listbox' | 'menu'`, default `'dialog'`): ARIA role of the surface, also reported on the trigger as `aria-haspopup`. A `menu` or
  `listbox` takes keyboard navigation between rows.
- `side?` (`Side`, default `'top'`): Preferred side of the trigger. It flips when it does not fit.
- `trigger` (`(props: PopoverTriggerProps, open: boolean) => ReactNode`): Renders the trigger. Spread the received props onto the element; `open` is whether the surface
  is shown.
- `width?` (`number`): Fixed width of the surface in px. Sized by its content when omitted.

Source: [ui/src/components/floating/Popover.tsx:83](https://github.com/Tahul/zidane/blob/main/ui/src/components/floating/Popover.tsx#L83)

## Interfaces

### `PopoverProps`

Interface.

Props for [`Popover`](https://zidane.si/docs/reference/ui-components-floating-popover.md#Popover).

```ts
interface PopoverProps
```

**Properties**

- `align?` (`Align`, default `'start'`): How the surface lines up along the trigger's edge.
- `ariaLabel` (`string`): Accessible name of the surface.
- `children` (`(close: () => void) => ReactNode`): Renders the surface content. `close` closes the surface and returns focus to the trigger, for
  use after a pick.
- `className?` (`string`): Extra classes on the surface.
- `onDismiss?` (`() => void`): Called when an outside press, Esc or the trigger closes the surface. Not called for a close
  from `children`.
- `onOpenChange?` (`(open: boolean) => void`): Called when the surface opens or closes, however it does (to load what it shows on each opening).
- `role?` (`'dialog' | 'listbox' | 'menu'`, default `'dialog'`): ARIA role of the surface, also reported on the trigger as `aria-haspopup`. A `menu` or
  `listbox` takes keyboard navigation between rows.
- `side?` (`Side`, default `'top'`): Preferred side of the trigger. It flips when it does not fit.
- `trigger` (`(props: PopoverTriggerProps, open: boolean) => ReactNode`): Renders the trigger. Spread the received props onto the element; `open` is whether the surface
  is shown.
- `width?` (`number`): Fixed width of the surface in px. Sized by its content when omitted.

Source: [ui/src/components/floating/Popover.tsx:34](https://github.com/Tahul/zidane/blob/main/ui/src/components/floating/Popover.tsx#L34)

### `PopoverTriggerProps`

Interface.

Props [`Popover`](https://zidane.si/docs/reference/ui-components-floating-popover.md#Popover) passes to its `trigger` function, to spread onto the trigger element.

```ts
interface PopoverTriggerProps
```

**Properties**

- `aria-controls?` (`string`): The surface's id while it is open.
- `aria-expanded` (`boolean`): Whether the surface is open.
- `aria-haspopup` (`'dialog' | 'listbox' | 'menu'`): Kind of popup the trigger opens, from the `role` prop.
- `onClick` (`() => void`): Toggles the surface.
- `ref` (`(node: HTMLElement | null) => void`): Ref callback that registers the trigger as the surface's anchor.

Source: [ui/src/components/floating/Popover.tsx:20](https://github.com/Tahul/zidane/blob/main/ui/src/components/floating/Popover.tsx#L20)