package.dist.index.d.mts Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of dialog Show documentation
Core logic for the dialog widget implemented as a state machine
The newest version!
import { DismissableElementHandlers, PersistentElementOptions } from '@zag-js/dismissable';
export { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/dismissable';
import * as _zag_js_anatomy from '@zag-js/anatomy';
import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
import * as _zag_js_core from '@zag-js/core';
import { Machine, StateMachine } from '@zag-js/core';

declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "content" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger">;

interface OpenChangeDetails {
    open: boolean;
}
type ElementIds = Partial<{
    trigger: string;
    positioner: string;
    backdrop: string;
    content: string;
    closeTrigger: string;
    title: string;
    description: string;
}>;
interface PublicContext extends DirectionProperty, CommonProperties, DismissableElementHandlers, PersistentElementOptions {
    /**
     * The ids of the elements in the dialog. Useful for composition.
     */
    ids?: ElementIds | undefined;
    /**
     * Whether to trap focus inside the dialog when it's opened
     * @default true
     */
    trapFocus: boolean;
    /**
     * Whether to prevent scrolling behind the dialog when it's opened
     * @default true
     */
    preventScroll: boolean;
    /**
     * Whether to prevent pointer interaction outside the element and hide all content below it
     * @default true
     */
    modal?: boolean | undefined;
    /**
     * Element to receive focus when the dialog is opened
     */
    initialFocusEl?: (() => HTMLElement | null) | undefined;
    /**
     * Element to receive focus when the dialog is closed
     */
    finalFocusEl?: (() => HTMLElement | null) | undefined;
    /**
     * Whether to restore focus to the element that had focus before the dialog was opened
     */
    restoreFocus?: boolean | undefined;
    /**
     * Callback to be invoked when the dialog is opened or closed
     */
    onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
    /**
     * Whether to close the dialog when the outside is clicked
     * @default true
     */
    closeOnInteractOutside: boolean;
    /**
     * Whether to close the dialog when the escape key is pressed
     * @default true
     */
    closeOnEscape: boolean;
    /**
     * Human readable label for the dialog, in event the dialog title is not rendered
     */
    "aria-label"?: string | undefined;
    /**
     * The dialog's role
     * @default "dialog"
     */
    role: "dialog" | "alertdialog";
    /**
     * Whether the dialog is open
     */
    open?: boolean | undefined;
    /**
     * Whether the dialog is controlled by the user
     */
    "open.controlled"?: boolean | undefined;
}
type UserDefinedContext = RequiredBy;
type ComputedContext = Readonly<{}>;
interface PrivateContext {
}
interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
}
interface MachineState {
    value: "open" | "closed";
}
type State = StateMachine.State;
type Send = StateMachine.Send;
type Service = Machine;
interface MachineApi {
    /**
     * Whether the dialog is open
     */
    open: boolean;
    /**
     * Function to open or close the dialog
     */
    setOpen(open: boolean): void;
    getTriggerProps(): T["button"];
    getBackdropProps(): T["element"];
    getPositionerProps(): T["element"];
    getContentProps(): T["element"];
    getTitleProps(): T["element"];
    getDescriptionProps(): T["element"];
    getCloseTriggerProps(): T["button"];
}

declare function connect(state: State, send: Send, normalize: NormalizeProps): MachineApi;

declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine;

declare const props: ("dir" | "id" | "getRootNode" | "role" | "open" | "aria-label" | "onFocusOutside" | "onPointerDownOutside" | "onInteractOutside" | "onEscapeKeyDown" | "ids" | "trapFocus" | "preventScroll" | "modal" | "initialFocusEl" | "finalFocusEl" | "restoreFocus" | "onOpenChange" | "closeOnInteractOutside" | "closeOnEscape" | "open.controlled" | "persistentElements")[];
declare const splitProps: >(props: Props) => [Partial, Omit];

export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type OpenChangeDetails, type Service, anatomy, connect, machine, props, splitProps };