@drivy/cobalt/components/Modal/index.js

Opinionated design system for Drivy's projects.

import { jsx, jsxs } from 'react/jsx-runtime';
import { Dialog, Portal } from '@ark-ui/react';
import cx from 'classnames';
import React, { forwardRef, useEffect, isValidElement } from 'react';
import ModalFooter from './ModalFooter.js';
import ModalHeader from './ModalHeader.js';

// Only for the API, render nothing, we use ModalFooterInternal internally
const ModalFooterAPI = (_props) => null;
const isModalFooterAPIComponent = (component) => React.isValidElement(component) && component.type === ModalFooterAPI;
const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, "aria-label": ariaLabel, title, children, overflowHidden = true, bodySpacing = true, fullWidth, fullHeight, fullScreen, onHidden, onShow, skipAnimation, onDismissAttempt, }, ref) => {
    useEffect(() => {
        isOpen && (onShow === null || onShow === void 0 ? void 0 : onShow());
    }, [onShow, isOpen]);
    const modalFooter = React.Children.toArray(children).find((c) => isModalFooterAPIComponent(c));
    const hasFooter = isValidElement(modalFooter);
    return (jsx(Dialog.Root, { "aria-label": ariaLabel, open: isOpen, onOpenChange: (e) => {
            e.open ? onShow === null || onShow === void 0 ? void 0 : onShow() : close === null || close === void 0 ? void 0 : close();
        }, onExitComplete: onHidden, initialFocusEl: initialFocusRef && (() => initialFocusRef.current), onPointerDownOutside: close ? undefined : onDismissAttempt, lazyMount: true, 
        // For some reason, onHidden can sometimes not be called if we use unmountOnExit
        unmountOnExit: !onHidden, children: jsx(Portal, { children: jsx(Dialog.Backdrop, { className: cx("cobalt-modal__overlay", {
                    "cobalt-modal--skipAnimation__enter": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter) || fullScreen,
                    "cobalt-modal--skipAnimation__leave": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave) || fullScreen,
                }), children: jsx(Dialog.Positioner, { className: cx("cobalt-modal", {
                        "cobalt-modal--overflowHidden": overflowHidden,
                        "cobalt-modal--fullHeight": fullHeight,
                        "cobalt-modal--fullWidth": fullWidth,
                        "cobalt-modal--fullScreen": fullScreen,
                    }), ref: ref, children: jsxs(Dialog.Content, { className: cx("cobalt-modal__content", className, {
                            "cobalt-modal--skipAnimation__enter": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter) || fullScreen,
                            "cobalt-modal--skipAnimation__leave": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave) || fullScreen,
                        }), children: [jsx(ModalHeader, { title: title, close: close }), jsxs(Dialog.Description, { className: "cobalt-modal-body__wrapper", children: [jsx("div", { className: cx("cobalt-modal-body", {
                                            "cobalt-modal-body--bodySpacing": bodySpacing,
                                            "cobalt-modal-body--hasFooter": hasFooter,
                                        }), children: children }), hasFooter && jsx(ModalFooter, { ...modalFooter.props })] })] }) }) }) }) }));
});
Modal.displayName = "Modal";
var Modal$1 = Object.assign(Modal, { Footer: ModalFooterAPI });

export { ModalFooterAPI, Modal$1 as default, isModalFooterAPIComponent };
//# sourceMappingURL=index.js.map