"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { Portal } from "../portal/Portal.js";
import { useSsr } from "../SsrProvider.js";
import { useCSSTransition } from "../transition/useCSSTransition.js";
import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./overlayStyles.js";
/**
 * **Client Component**
 *
 * @example Simple Example
 * ```tsx
 * import { Button, Overlay, useToggle } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   const { toggle, disable, toggled: visible } = useToggle(false);
 *
 *   return (
 *     <>
 *       <Button onClick={toggle}>Toggle</Button>
 *       <Overlay visible={visible} onClick={disable} />
 *     </>
 *   );
 * }
 * ```
 *
 * @since 6.0.0 Removed the `onRequestClose` prop in favor of using
 * the `onClick` prop instead.
 */ export const Overlay = /*#__PURE__*/ forwardRef(function Overlay(props, nodeRef) {
    const { children, className, visible, noOpacity = false, clickable = !noOpacity, temporary = true, timeout = DEFAULT_OVERLAY_TIMEOUT, classNames = DEFAULT_OVERLAY_CLASSNAMES, disableTransition = false, align = "center", justify = "center", appear, enter, exit, onEnter, onEntering, onEntered, onExit, onExiting, onExited, exitedHidden = true, disablePortal: propDisablePortal = false, ...remaining } = props;
    const ssr = useSsr();
    const { elementProps, rendered, disablePortal } = useCSSTransition({
        nodeRef,
        transitionIn: visible,
        timeout: noOpacity ? 0 : timeout,
        classNames: noOpacity ? "" : classNames,
        className: overlay({
            visible,
            clickable,
            align,
            justify,
            className
        }),
        appear: appear && !disableTransition && !ssr,
        enter: enter && !disableTransition,
        exit: exit && !disableTransition,
        onEnter,
        onEntering,
        onEntered,
        onExit,
        onExiting,
        onExited,
        temporary,
        exitedHidden,
        disablePortal: propDisablePortal
    });
    return /*#__PURE__*/ _jsx(Portal, {
        disabled: disablePortal,
        children: rendered && /*#__PURE__*/ _jsx("span", {
            ...remaining,
            ...elementProps,
            children: children
        })
    });
});

//# sourceMappingURL=Overlay.js.map