"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useState } from "react";
import { useSsr } from "../SsrProvider.js";
import { useFocusContainer } from "../focus/useFocusContainer.js";
import { Overlay } from "../overlay/Overlay.js";
import { Portal } from "../portal/Portal.js";
import { useScrollLock } from "../scroll/useScrollLock.js";
import { useCSSTransition } from "../transition/useCSSTransition.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { DialogContainer } from "./DialogContainer.js";
import { NestedDialogProvider, useNestedDialogContext } from "./NestedDialogProvider.js";
import { DEFAULT_DIALOG_CLASSNAMES, DEFAULT_DIALOG_TIMEOUT, dialog } from "./styles.js";
const noop = ()=>{
// do nothing
};
const noopBool = ()=>false;
/**
 * **Client Component**
 *
 * @example Simple Example
 * ```tsx
 * import { Button } from "@react-md/core/button/Button";
 * import { Dialog } from "@react-md/core/dialog/Dialog";
 * import { DialogContent } from "@react-md/core/dialog/DialogContent";
 * import { DialogFooter } from "@react-md/core/dialog/DialogFooter";
 * import { DialogHeader } from "@react-md/core/dialog/DialogHeader";
 * import { DialogTitle } from "@react-md/core/dialog/DialogTitle";
 * import { Typography } from "@react-md/core/typography/Typography";
 * import { useToggle } from "@react-md/core/useToggle";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   const {
 *     toggle,
 *     disable: onRequestClose,
 *     toggled: visible,
 *   } = useToggle(false);
 *
 *   return (
 *     <>
 *       <Button onClick={toggle}>Toggle</Button>
 *       <Dialog
 *         aria-labelledby="dialog-title"
 *         visible={visible}
 *         onRequestClose={onRequestClose}
 *       >
 *         <DialogHeader>
 *           <DialogTitle id="dialog-title">Simple Dialog</DialogTitle>
 *         </DialogHeader>
 *         <DialogContent>
 *           <Typography margin="none">This is some text in a dialog.</Typography>
 *         </DialogContent>
 *         <DialogFooter>
 *           <Button onClick={onRequestClose}>
 *             Close
 *           </Button>
 *         </DialogFooter>
 *       </Dialog>
 *     </>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/dialog | Dialog Demos}
 * @since 6.0.0 The `Dialog` no longer supports focusing elements
 * within once it becomes visible. You must manually add `autoFocus` to a
 * element instead.
 */ export const Dialog = /*#__PURE__*/ forwardRef(function Dialog(props, ref) {
    const { id: propId, modal = false, role = modal ? "alertdialog" : "dialog", type = "centered", width, tabIndex = -1, visible, onRequestClose, containerProps, temporary = true, className, timeout = DEFAULT_DIALOG_TIMEOUT, classNames = DEFAULT_DIALOG_CLASSNAMES, disableTransition = false, appear = false, enter = true, exit = true, onEnter = noop, onEntering = noop, onEntered = noop, onExit = noop, onExiting = noop, onExited = noop, exitedHidden = true, disableOverlay = false, overlayProps, overlayHidden, onKeyDown = noop, isFocusTypeDisabled = noopBool, disablePortal: propDisablePortal, disableScrollLock = false, disableEscapeClose = modal, disableFocusOutline = type === "full-page", children, ...remaining } = props;
    const id = useEnsuredId(propId, "dialog");
    const ssr = useSsr();
    const setChildVisible = useNestedDialogContext();
    // this makes it so that as more non-full page dialogs become visible, the
    // overlay does not become darker as more and more overlays are stacked upon
    // each other. only the top-most overlay will have and active background
    // color.
    const [isChildVisible, setIsChildVisible] = useState(false);
    const { eventHandlers, transitionOptions } = useFocusContainer({
        nodeRef: ref,
        activate: visible,
        onEnter (appearing) {
            onEnter(appearing);
            setChildVisible(type !== "full-page");
        },
        onEntered (appear) {
            onEntered(appear);
            // this needs to be called onEnter and onEntered just in case the
            // transition is disabled
            setChildVisible(type !== "full-page");
        },
        onEntering,
        onExit () {
            onExit();
            setChildVisible(false);
        },
        onExiting,
        onExited () {
            onExited();
            // this needs to be called onExit and onExited just in case the
            // transition is disabled
            setChildVisible(false);
        },
        disableTransition,
        onKeyDown (event) {
            onKeyDown(event);
            if (event.isPropagationStopped() || modal || disableEscapeClose || event.key !== "Escape") {
                return;
            }
            // prevent parent dialogs from closing as well
            event.stopPropagation();
            onRequestClose();
        },
        isFocusTypeDisabled
    });
    const { elementProps, stage, rendered, disablePortal } = useCSSTransition({
        transitionIn: visible,
        timeout,
        classNames,
        className: dialog({
            type,
            width,
            fixed: type === "custom",
            outline: !disableFocusOutline,
            disableBoxShadow: isChildVisible,
            className
        }),
        appear: appear && !disableTransition && !ssr,
        enter: enter && !disableTransition,
        exit: exit && !disableTransition,
        temporary,
        exitedHidden,
        disablePortal: propDisablePortal,
        ...transitionOptions
    });
    useScrollLock(!disableScrollLock && visible);
    return /*#__PURE__*/ _jsxs(NestedDialogProvider, {
        value: setIsChildVisible,
        children: [
            !disableOverlay && /*#__PURE__*/ _jsx(Overlay, {
                visible: visible,
                disableTransition: disableTransition,
                temporary: temporary,
                disablePortal: disablePortal,
                ...overlayProps,
                onClick: modal ? noop : onRequestClose,
                clickable: !modal,
                noOpacity: overlayHidden || isChildVisible
            }),
            /*#__PURE__*/ _jsx(Portal, {
                disabled: disablePortal,
                children: rendered && /*#__PURE__*/ _jsx(DialogContainer, {
                    enabled: type !== "custom",
                    ...containerProps,
                    centered: type === "centered",
                    displayNone: !temporary && exitedHidden && stage === "exited",
                    children: /*#__PURE__*/ _jsx("div", {
                        "aria-modal": modal || undefined,
                        ...remaining,
                        ...elementProps,
                        ...eventHandlers,
                        id: id,
                        role: role,
                        tabIndex: tabIndex,
                        children: children
                    })
                })
            })
        ]
    });
});

//# sourceMappingURL=Dialog.js.map