Import
import { ref } from "@typed/ui/NativePopover";Signatures
export declare function ref<S extends State, E, R>(state: RefSubject.RefSubject<S, E, R>): (element: HTMLElement) => Effect.Effect<void, E, R | Scope.Scope>;Why
The browser owns top-layer placement and popover lifecycle. The ref checks
:popover-open before calling showPopover() or hidePopover(), avoiding
invalid duplicate transitions while preserving native toggle events.
Ownership and lifetime
Applying the ref forks one observer in the current Effect Scope. Opening
waits for a detached host to connect. A newer state or Scope finalization
cancels that pending connection check; hidden documents may defer it until
animation frames resume. Closing the Scope interrupts observation without
removing the host or closing caller-owned state. The host must support the Popover API and retain its popover
attribute. Only one hydration owner may be composed for the element.
Examples
import { Effect } from "effect"
import * as NativePopover from "@typed/ui/NativePopover"
import * as Popover from "@typed/ui/Popover"
const program = Effect.gen(function* () {
const state = yield* Popover.makeState()
return NativePopover.ref(state)
})