@zag-js/dismissable/dist/dismissable-layer.d.ts

Dismissable layer utilities for the DOM

import { InteractOutsideHandlers } from '@zag-js/interact-outside';
import { MaybeFunction } from '@zag-js/utils';
import { LayerDismissEvent, LayerStyleTarget, LayerType } from './layer-stack.js';

type MaybeElement = HTMLElement | null;
type Container = MaybeElement | Array<MaybeElement>;
type NodeOrFn = MaybeFunction<MaybeElement>;
interface DismissableElementHandlers extends InteractOutsideHandlers {
    /**
     * Function called when the escape key is pressed
     */
    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
    /**
     * Function called when this layer is closed due to a parent layer being closed
     */
    onRequestDismiss?: ((event: LayerDismissEvent) => void) | undefined;
}
interface PersistentElementOptions {
    /**
     * Returns the persistent elements that:
     * - should not have pointer-events disabled
     * - should not trigger the dismiss event
     */
    persistentElements?: Array<() => Element | null> | undefined;
}
interface DismissableElementOptions extends DismissableElementHandlers, PersistentElementOptions {
    /**
     * Extra elements that receive the same layer stack CSS vars, `data-*`, and `--z-index`
     * (from the primary node's computed `z-index`) as the dismissable node
     * (e.g. dialog backdrop + positioner when the node is content).
     */
    layerStyleTargets?: LayerStyleTarget[] | undefined;
    /**
     * Whether to log debug information
     */
    debug?: boolean | undefined;
    /**
     * Whether to block pointer events outside the dismissable element
     */
    pointerBlocking?: boolean | undefined;
    /**
     * Function called when the dismissable element is dismissed
     */
    onDismiss: VoidFunction;
    /**
     * Exclude containers from the interact outside event
     */
    exclude?: MaybeFunction<Container> | undefined;
    /**
     * Defer the interact outside event to the next frame
     */
    defer?: boolean | undefined;
    /**
     * Whether to warn when the node is `null` or `undefined`
     */
    warnOnMissingNode?: boolean | undefined;
    /**
     * The type of layer being tracked
     */
    type?: LayerType | undefined;
}
declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
declare function trackDismissableBranch(nodeOrFn: NodeOrFn, options?: {
    defer?: boolean | undefined;
}): () => void;

export { type DismissableElementHandlers, type DismissableElementOptions, type PersistentElementOptions, trackDismissableBranch, trackDismissableElement };