◇

DismissableLayer

2 parts

A low-level building block that detects when the user interacts away from its content — pressing Escape, clicking/pointing outside, or moving focus out — and emits a dismiss event so the consumer can close the layer. Layers are tracked in a global stack so only the topmost one responds, letting dialogs, popovers, menus, and tooltips nest correctly. Use it to wrap any transient overlay whose lifecycle you want driven by outside-interaction; it renders no UI of its own.

Source

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  DismissableLayer,
  DismissableLayerBranch,
} from '@robonen/primitives/utilities/dismissable-layer';

<DismissableLayer>
  <DismissableLayerBranch />
</DismissableLayer>

API Reference

DismissableLayer

Root

A low-level building block that detects when the user interacts away from its content — pressing Escape, clicking/pointing outside, or moving focus out — and emits a `dismiss` event so the consumer can close the layer. Layers are tracked in a global stack so only the topmost one responds, letting dialogs, popovers, menus, and tooltips nest correctly. Use it to wrap any transient overlay whose lifecycle you want driven by outside-interaction; it renders no UI of its own.

Prop	Type	Default	Description
`disableOutsidePointerEvents`?	`boolean`	`false`	When enabled, outside pointer events are blocked — the rest of the document becomes `pointer-events: none`, and the layer gains `pointer-events: auto` so it is still interactive.

DismissableLayerBranch

Branch

Marks a subtree as belonging to a sibling DismissableLayer even though it is rendered elsewhere in the DOM (e.g. a portaled trigger, an anchor, or a toast viewport). Pointer-down and focus interactions that originate inside a branch are treated as *inside* the layer, so they will not trigger a dismiss. Renders no UI of its own beyond the element you ask for via `as`.

No props or events — renders its element and forwards attributes.