Dismissible

Utility for creating dismissible, nestable layers. Offers different strategies to dismiss the layer, such as on outside click, escape key press, or outside focus.

0.1.1

npm source

Features Section titled Features

Supports nested layers
Dismiss on outside pointer down/up, outside focus or escape key
Is headless, doesn't create extra DOM elements
Every dismiss strategy can be disabled/customized
Events can be cancelled
Compatible with corvu primitives as they use this utility

Installation Section titled Installation

npm install solid-dismissible

Usage Section titled Usage

import Dismissible from 'solid-dismissible'

const DialogContent: Component<{
open: boolean
setOpen: (open: boolean) => void
}> = (props) => {
const [contentRef, setContentRef] = createSignal<HTMLElement | null>(null)

return (
  <Dismissible
    element={contentRef}
    enabled={open()}
    onDismiss={() => setOpen(false)}
  >
    <Show when={props.open()}>
      <div ref={setContentRef}>Dialog</div>
    </Show>
  </Dismissible>
)
}

Tracking active dismissibles Section titled Tracking active dismissibles

The utility exports a activeDismissibles signal that can be used to track active dismissibles. It includes an array of all currently active dismissible ids.

import { activeDismissibles } from 'solid-dismissible'

createEffect(() => {
console.log('Currently active dismissibles: ', activeDismissibles())
})

API reference Section titled API reference

<Dismissible />

Component

A component that can be dismissed by pressing the escape key or clicking outside of it. Can be nested.

Props

Property	Default	Type/Description
enabled	`true`	boolean Whether the dismissible is enabled.
dismissibleId	-	string
element	-	MaybeAccessor<HTMLElement \| null> The element to make dismissible.
onDismiss	-	(reason: 'escapeKey' \| 'outsidePointer' \| 'outsideFocus') => void Callback fired when the element is being dismissed.
dismissOnEscapeKeyDown	`true`	MaybeAccessor<boolean> Whether to dismiss the element when the escape key is pressed.
dismissOnOutsideFocus	`true`	MaybeAccessor<boolean> Whether to dismiss the element when a focus event happens outside the element.
dismissOnOutsidePointer	`true`	MaybeAccessor<boolean> Whether to dismiss the element when a pointer down event happens outside the element.
outsidePointerStrategy	`pointerup`	MaybeAccessor<'pointerdown' \| 'pointerup'> Whether `dismissOnOutsidePointer` should be triggered on `pointerdown` or `pointerup`.
outsidePointerIgnore	-	MaybeAccessor<[HTMLElement \| null]> Ignore pointer events that occur inside of this element.
noOutsidePointerEvents	`true`	MaybeAccessor<boolean> Whether to disable pointer events outside the element.
onEscapeKeyDown	-	(event: KeyboardEvent) => void Callback fired when the escape key is pressed. Can be prevented by calling `event.preventDefault`.
onOutsideFocus	-	(event: CustomEvent) => void Callback fired when a focus event happens outside the element. Can be prevented by calling `event.preventDefault`.
onOutsidePointer	-	(event: PointerEvent) => void Callback fired when a pointer down event happens outside the element. Can be prevented by calling `event.preventDefault`.

DismissibleChildrenProps

Type

Props

Property	Type/Description
isLastLayer	boolean

activeDismissibles

Type

type activeDismissibles = () => string[]

Developed and designed by Jasmin