@fictjs/dismissable-layer

Dismissable layer primitives for Fict, modeled after @radix-ui/react-dismissable-layer. A layer that responds to outside interactions — pointer-down outside, focus outside, and the Escape key — used by popovers, dropdowns, tooltips, and dialogs.

Part of ui-primitives, a port of Radix Primitives to Fict.

Internal building block. Also re-exported from @fictjs/radix-ui/internal.

Installation

pnpm add @fictjs/dismissable-layer fict

Usage

/** @jsxImportSource fict */
import { DismissableLayer } from '@fictjs/dismissable-layer'

function Layer() {
  return (
    <DismissableLayer
      onEscapeKeyDown={close}
      onPointerDownOutside={close}
      onFocusOutside={close}
      onInteractOutside={maybeClose}
    >
      {/* floating content */}
    </DismissableLayer>
  )
}

API

• DismissableLayer (Root) — disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onDismiss. Manages a stack so only the top-most layer reacts.
• DismissableLayerBranch (Branch) — marks a subtree as part of the layer, so interactions within it are not treated as "outside".

Exports

• Components: DismissableLayer (Root), DismissableLayerBranch (Branch).
• Types: DismissableLayerProps.

Documentation

The API mirrors @radix-ui/react-dismissable-layer. See the ui-primitives overview and the architecture guide.

License

MIT © Fict contributors.