function / @typed/ui/index

Popover.Content

Renders manually controlled native popover content.

Learn this UI primitive →

Package version
1.0.0-beta.13
Category
Native content host
Since
1.0.0
Member of
Popover

Import

import { Popover } from "@typed/ui/index";

Access Popover.Content through the imported Popover export. Its declaration below describes the member.

This public exposure is a re-export. Its import path is supported; declaration documentation is shared with the other public exposures below.

Signatures

export declare function Content<const Options extends ContentOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, ContentInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;

Why

The component delegates top-layer lifecycle to the Popover API, synchronizes completed toggle events, and handles Escape through native events.

Ownership and lifetime

Running the Fx owns listeners and the NativePopover observer in its Effect Scope. A custom host must preserve popover="manual", the toggle handler, and the single composed hydration ref.

Examples

import { Effect } from "effect"
import * as Popover from "@typed/ui/Popover"

const program = Effect.gen(function* () {
  const state = yield* Popover.makeState()
  return Popover.Content({ state, content: "Preferences" })
})

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

Source