@workday/canvas-kit-react/dist/commonjs/dialog/lib/Dialog.d.ts

The parent module that contains all Workday Canvas Kit React components

import React from 'react';
export interface DialogProps {
    /**
     * The contents of the Dialog. Can be `Dialog` children or any valid elements.
     */
    children: React.ReactNode;
}
/**
 * This component is the container component and does not render any semantic elements. It provides
 * a React Context model for the `Dialog` subcomponents. If you manually pass a `model` to all
 * subcomponents, this container component isn't needed. If you do not pass a `model`, the `Dialog`
 * container component will build a default one using `useDialogModel`. `Dialog` is a composition of a
 * {@link Popup} component and has a similar structure to `Popup`.
 */
export declare const Dialog: import("@workday/canvas-kit-react/common").ComponentM<DialogProps & Partial<{
    returnFocusRef: React.RefObject<any> | undefined;
    initialFocusRef: React.RefObject<any> | undefined;
    id: string;
    initialVisibility: import("../..").Visibility;
}> & {
    onUpdatePlacement?: ((data: {
        placement: import("@popperjs/core").Placement;
    }, prevState: {
        stackRef: React.RefObject<HTMLDivElement>;
        targetRef: React.RefObject<HTMLButtonElement>;
        initialFocusRef: React.RefObject<any> | undefined;
        returnFocusRef: React.RefObject<any> | undefined;
        placement: import("@popperjs/core").Placement;
        id: string;
        visibility: "hidden" | "visible";
    }) => void) | undefined;
    onShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
        stackRef: React.RefObject<HTMLDivElement>;
        targetRef: React.RefObject<HTMLButtonElement>;
        initialFocusRef: React.RefObject<any> | undefined;
        returnFocusRef: React.RefObject<any> | undefined;
        placement: import("@popperjs/core").Placement;
        id: string;
        visibility: "hidden" | "visible";
    }) => void) | undefined;
    onHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
        stackRef: React.RefObject<HTMLDivElement>;
        targetRef: React.RefObject<HTMLButtonElement>;
        initialFocusRef: React.RefObject<any> | undefined;
        returnFocusRef: React.RefObject<any> | undefined;
        placement: import("@popperjs/core").Placement;
        id: string;
        visibility: "hidden" | "visible";
    }) => void) | undefined;
} & {
    shouldUpdatePlacement?: ((data: {
        placement: import("@popperjs/core").Placement;
    }, state: {
        stackRef: React.RefObject<HTMLDivElement>;
        targetRef: React.RefObject<HTMLButtonElement>;
        initialFocusRef: React.RefObject<any> | undefined;
        returnFocusRef: React.RefObject<any> | undefined;
        placement: import("@popperjs/core").Placement;
        id: string;
        visibility: "hidden" | "visible";
    }) => boolean) | undefined;
    shouldShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
        stackRef: React.RefObject<HTMLDivElement>;
        targetRef: React.RefObject<HTMLButtonElement>;
        initialFocusRef: React.RefObject<any> | undefined;
        returnFocusRef: React.RefObject<any> | undefined;
        placement: import("@popperjs/core").Placement;
        id: string;
        visibility: "hidden" | "visible";
    }) => boolean) | undefined;
    shouldHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
        stackRef: React.RefObject<HTMLDivElement>;
        targetRef: React.RefObject<HTMLButtonElement>;
        initialFocusRef: React.RefObject<any> | undefined;
        returnFocusRef: React.RefObject<any> | undefined;
        placement: import("@popperjs/core").Placement;
        id: string;
        visibility: "hidden" | "visible";
    }) => boolean) | undefined;
}, {
    state: {
        stackRef: React.RefObject<HTMLDivElement>;
        targetRef: React.RefObject<HTMLButtonElement>;
        initialFocusRef: React.RefObject<any> | undefined;
        returnFocusRef: React.RefObject<any> | undefined;
        placement: import("@popperjs/core").Placement;
        id: string;
        visibility: "hidden" | "visible";
    };
    events: {
        updatePlacement(data: {
            placement: import("@popperjs/core").Placement;
        }): void;
        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
    };
}> & {
    /**
     * A `Dialog.Body` is a thin wrapper around {@link CardBody Card.Body} and doesn't actually take
     * a model. It adds `body` styling and nothing else.
     */
    Body: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../card/lib/CardBody").CardBodyProps & React.HTMLAttributes<HTMLDivElement>, {
        state: {
            stackRef: React.RefObject<HTMLDivElement>;
            targetRef: React.RefObject<HTMLButtonElement>;
            initialFocusRef: React.RefObject<any> | undefined;
            returnFocusRef: React.RefObject<any> | undefined;
            placement: import("@popperjs/core").Placement;
            id: string;
            visibility: "hidden" | "visible";
        };
        events: {
            updatePlacement(data: {
                placement: import("@popperjs/core").Placement;
            }): void;
            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
        };
    }>;
    /**
     * A `Dialog.Card` is a wrapper around the {@link Card} component, but hooked up to a
     * {@link DialogModel}. By default, this element has a `role=dialog`, `aria-labelledby` and an `id`.
     * The behavior hook used is called {@link useDialogCard}.
     */
    Card: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../popup/lib/PopupCard").PopupCardProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
        state: {
            stackRef: React.RefObject<HTMLDivElement>;
            targetRef: React.RefObject<HTMLButtonElement>;
            initialFocusRef: React.RefObject<any> | undefined;
            returnFocusRef: React.RefObject<any> | undefined;
            placement: import("@popperjs/core").Placement;
            id: string;
            visibility: "hidden" | "visible";
        };
        events: {
            updatePlacement(data: {
                placement: import("@popperjs/core").Placement;
            }): void;
            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
        };
    }, {}>, {
        state: {
            stackRef: React.RefObject<HTMLDivElement>;
            targetRef: React.RefObject<HTMLButtonElement>;
            initialFocusRef: React.RefObject<any> | undefined;
            returnFocusRef: React.RefObject<any> | undefined;
            placement: import("@popperjs/core").Placement;
            id: string;
            visibility: "hidden" | "visible";
        };
        events: {
            updatePlacement(data: {
                placement: import("@popperjs/core").Placement;
            }): void;
            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
        };
    }>;
    /**
     * A `Dialog.CloseIcon` is an icon button that is the `X` at the top of a dialog. It will hide a
     * dialog when clicked. The behavior hook used is called {@link usePopupCloseButton}.
     */
    CloseIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("../../popup/lib/PopupCloseIcon").PopupCloseIconProps, {
        state: {
            stackRef: React.RefObject<HTMLDivElement>;
            targetRef: React.RefObject<HTMLButtonElement>;
            initialFocusRef: React.RefObject<any> | undefined;
            returnFocusRef: React.RefObject<any> | undefined;
            placement: import("@popperjs/core").Placement;
            id: string;
            visibility: "hidden" | "visible";
        };
        events: {
            updatePlacement(data: {
                placement: import("@popperjs/core").Placement;
            }): void;
            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
        };
    }>;
    /**
     * A `Dialog.Target` is any element that is meant to show the Dialog. The default component
     * rendered by this component is a {@link SecondaryButton} element. You can override this by
     * passing the desired component via `as`. Many examples above use `as={DeleteButton}`. If you
     * want to render a {@link TertiaryButton} instead, use `as={TertiaryButton}`. The behavior hook
     * used is called {@link usePopupTarget}.
     *
     * ```tsx
     * const model = useDialogModel();
     *
     * // using this component
     * <Dialog.Target>Show Dialog</Dialog.Target>
     *
     * // using props instead
     * const dialogTargetButtonProps = useDialogTarget(model);
     * <SecondaryButton {...dialogTargetButtonProps}>Show Dialog</SecondaryButton>
     * ```
     *
     * `Dialog.Target` doesn't provide any styling by default. All styling comes from the default
     * component used, which is {@link SecondaryButton}. If you don't want any styling, you can do
     * the following:
     *
     * ```tsx
     * <Dialog.Target as="button">Open</Dialog.Target>
     * ```
     *
     * To add your own styling, you could either add a `css` prop, or make a styled button and pass
     * that styled component via the `as` prop.
     */
    Target: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("../..").SecondaryButtonProps>, {}, {
        state: {
            stackRef: React.RefObject<HTMLDivElement>;
            targetRef: React.RefObject<HTMLButtonElement>;
            initialFocusRef: React.RefObject<any> | undefined;
            returnFocusRef: React.RefObject<any> | undefined;
            placement: import("@popperjs/core").Placement;
            id: string;
            visibility: "hidden" | "visible";
        };
        events: {
            updatePlacement(data: {
                placement: import("@popperjs/core").Placement;
            }): void;
            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
        };
    }>;
    /**
     * A `Dialog.Heading` is a wrapper around {@link CardHeading Card.Heading} that connect the
     * heading to a {@link DialogModel}. It will add an `id` to the element that match the
     * `aria-labelledby` that is applied to the `Dialog.Card` element for accessibility. The behavior
     * hook used is called {@link usePopupHeading}.
     */
    Heading: import("@workday/canvas-kit-react/common").ElementComponentM<"h2", import("../../popup/lib/PopupHeading").PopupHeadingProps, {
        state: {
            stackRef: React.RefObject<HTMLDivElement>;
            targetRef: React.RefObject<HTMLButtonElement>;
            initialFocusRef: React.RefObject<any> | undefined;
            returnFocusRef: React.RefObject<any> | undefined;
            placement: import("@popperjs/core").Placement;
            id: string;
            visibility: "hidden" | "visible";
        };
        events: {
            updatePlacement(data: {
                placement: import("@popperjs/core").Placement;
            }): void;
            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
        };
    }>;
    /**
     * A `Dialog.Popper` is a wrapper around {@link PopupPopper Popup.Popper}. The behavior
     * hook used is called {@link useDialogPopper}.
     */
    Popper: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../popup/lib/PopupPopper").PopupPopperProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
        state: {
            stackRef: React.RefObject<HTMLDivElement>;
            targetRef: React.RefObject<HTMLButtonElement>;
            initialFocusRef: React.RefObject<any> | undefined;
            returnFocusRef: React.RefObject<any> | undefined;
            placement: import("@popperjs/core").Placement;
            id: string;
            visibility: "hidden" | "visible";
        };
        events: {
            updatePlacement(data: {
                placement: import("@popperjs/core").Placement;
            }): void;
            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
        };
    }, {}>, {
        state: {
            stackRef: React.RefObject<HTMLDivElement>;
            targetRef: React.RefObject<HTMLButtonElement>;
            initialFocusRef: React.RefObject<any> | undefined;
            returnFocusRef: React.RefObject<any> | undefined;
            placement: import("@popperjs/core").Placement;
            id: string;
            visibility: "hidden" | "visible";
        };
        events: {
            updatePlacement(data: {
                placement: import("@popperjs/core").Placement;
            }): void;
            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
        };
    }>;
    /**
     * A `Dialog.CloseButton` is a button that will hide a dialog. By default, this is a
     * {@link SecondaryButton} component, but `as` can be used to render any button element (i.e
     * {@link DeleteButton} or {@link PrimaryButton}). The behavior hook used is called
     * {@link usePopupCloseButton}.
     */
    CloseButton: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("../../popup/lib/PopupCloseButton").PopupCloseButtonProps, {
        state: {
            stackRef: React.RefObject<HTMLDivElement>;
            targetRef: React.RefObject<HTMLButtonElement>;
            initialFocusRef: React.RefObject<any> | undefined;
            returnFocusRef: React.RefObject<any> | undefined;
            placement: import("@popperjs/core").Placement;
            id: string;
            visibility: "hidden" | "visible";
        };
        events: {
            updatePlacement(data: {
                placement: import("@popperjs/core").Placement;
            }): void;
            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
        };
    }>;
};
//# sourceMappingURL=Dialog.d.ts.map