GPUI.UI.Overlay (gpui_components v0.2.0)

Controlled overlay components backed by GPUI Component.

Overlay content is declared with ordinary HEEx named slots. Overlay state remains authoritative in Elixir assigns while native state preserves focus and dismissal behavior between snapshots.

Summary

Types

dialog_options()

Options accepted by dialog/1.

dropdown_menu_options()

Options accepted by dropdown_menu/1.

popover_options()

Options accepted by popover/1.

slot()

tooltip_options()

Options accepted by tooltip/1.

Functions

dialog(assigns)

Builds a controlled modal dialog with an optional :trigger and one :content slot.

dropdown_menu(assigns)

Builds a controlled dropdown menu with one :trigger and one or more :item slots.

popover(assigns)

Builds a controlled popover with one :trigger and one :content slot.

tooltip(assigns)

Builds a native tooltip with one :trigger and one textual :content slot.

Types

dialog_options()

@type dialog_options() :: %{
  :id => String.t(),
  optional(:open) => boolean(),
  :title => String.t(),
  optional(:width) => number(),
  optional(:overlay) => boolean(),
  optional(:closable) => boolean(),
  optional(:keyboard) => boolean(),
  optional(:close_button) => boolean(),
  optional(:"phx-change") => String.t(),
  optional(:trigger) => [slot()],
  :content => [slot()],
  optional(:class) => String.t(),
  optional(:style) => keyword() | map()
}

Options accepted by dialog/1.

dropdown_menu_options()

@type dropdown_menu_options() :: %{
  :id => String.t(),
  :label => String.t(),
  optional(:open) => boolean(),
  optional(:anchor) => String.t(),
  optional(:disabled) => boolean(),
  optional(:"phx-change") => String.t(),
  optional(:"phx-select") => String.t(),
  :trigger => [slot()],
  :item => [slot()],
  optional(:class) => String.t(),
  optional(:style) => keyword() | map()
}

Options accepted by dropdown_menu/1.

popover_options()

@type popover_options() :: %{
  :id => String.t(),
  :label => String.t(),
  optional(:open) => boolean(),
  optional(:anchor) => String.t(),
  optional(:appearance) => boolean(),
  optional(:closable) => boolean(),
  optional(:"phx-change") => String.t(),
  :trigger => [slot()],
  :content => [slot()],
  optional(:class) => String.t(),
  optional(:style) => keyword() | map()
}

Options accepted by popover/1.

slot()

@type slot() :: %{attrs: keyword(), children: [GPUI.Element.child()]}

tooltip_options()

@type tooltip_options() :: %{
  :id => String.t(),
  optional(:delay) => number(),
  optional(:hoverable) => boolean(),
  :trigger => [slot()],
  :content => [slot()],
  optional(:class) => String.t(),
  optional(:style) => keyword() | map()
}

Options accepted by tooltip/1.

Functions

dialog(assigns)

@spec dialog(dialog_options()) :: GPUI.Element.t()

Builds a controlled modal dialog with an optional :trigger and one :content slot.

A non-empty title supplies the dialog heading and names its optional trigger. Changes to open are emitted through phx-change. The native dialog traps focus while open and restores the previous focus when it closes. Escape and overlay clicks request closure when enabled.

Options

Option	Type	Required	Default
`:id`	`String.t()`	yes	—
`:open`	`boolean()`	no	`false`
`:title`	non-empty `String.t()`	yes	—
`:width`	`number()`	no	`448.0`
`:overlay`	`boolean()`	no	`true`
`:closable`	`boolean()`	no	`true`
`:keyboard`	`boolean()`	no	`true`
`:close_button`	`boolean()`	no	`true`
`:"phx-change"`	non-empty event name	no	—
`:trigger`	zero or one named slot	no	—
`:content`	one named slot	yes	—
`:class`	`String.t()`	no	—
`:style`	`keyword()` or `map()`	no	—

dropdown_menu(assigns)

@spec dropdown_menu(dropdown_menu_options()) :: GPUI.Element.t()

Builds a controlled dropdown menu with one :trigger and one or more :item slots.

A non-empty label names the trigger and its expanded state. phx-change receives controlled open-state changes and phx-select receives the selected item value. Popup-menu keyboard navigation, dismissal, and focus restoration are provided by GPUI Component.

Options

Option	Type	Required	Default
`:id`	`String.t()`	yes	—
`:label`	non-empty `String.t()`	yes	—
`:open`	`boolean()`	no	`false`
`:anchor`	`"top_left"`, `"top_center"`, `"top_right"`, `"bottom_left"`, `"bottom_center"`, `"bottom_right"`, `"left_center"`, `"right_center"`	no	`"top_left"`
`:disabled`	`boolean()`	no	`false`
`:"phx-change"`	non-empty event name	no	—
`:"phx-select"`	non-empty event name	no	—
`:trigger`	one named slot	yes	—
`:item`	one or more named slots	yes	—
`:class`	`String.t()`	no	—
`:style`	`keyword()` or `map()`	no	—

popover(assigns)

@spec popover(popover_options()) :: GPUI.Element.t()

Builds a controlled popover with one :trigger and one :content slot.

A non-empty label names the trigger and its expanded state. Changes to open are emitted through phx-change. Escape and, by default, outside clicks request closure and restore focus to the trigger.

Options

Option	Type	Required	Default
`:id`	`String.t()`	yes	—
`:label`	non-empty `String.t()`	yes	—
`:open`	`boolean()`	no	`false`
`:anchor`	`"top_left"`, `"top_center"`, `"top_right"`, `"bottom_left"`, `"bottom_center"`, `"bottom_right"`, `"left_center"`, `"right_center"`	no	`"top_left"`
`:appearance`	`boolean()`	no	`true`
`:closable`	`boolean()`	no	`true`
`:"phx-change"`	non-empty event name	no	—
`:trigger`	one named slot	yes	—
`:content`	one named slot	yes	—
`:class`	`String.t()`	no	—
`:style`	`keyword()` or `map()`	no	—

tooltip(assigns)

@spec tooltip(tooltip_options()) :: GPUI.Element.t()

Builds a native tooltip with one :trigger and one textual :content slot.

delay is the show delay in milliseconds from 0 through 60_000. Set hoverable when the pointer may move into the tooltip without dismissing it.

Options

Option	Type	Required	Default
`:id`	`String.t()`	yes	—
`:delay`	`number()`	no	`500.0`
`:hoverable`	`boolean()`	no	`false`
`:trigger`	one named slot	yes	—
`:content`	one named slot	yes	—
`:class`	`String.t()`	no	—
`:style`	`keyword()` or `map()`	no	—