@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
48 lines (45 loc) • 3.56 kB
JavaScript
import React, { forwardRef, useEffect, isValidElement } from 'react';
import { Dialog, Portal } from '@ark-ui/react';
import cx from 'classnames';
import ModalHeader from './ModalHeader.js';
import ModalFooter from './ModalFooter.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, 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 (React.createElement(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 },
React.createElement(Portal, null,
React.createElement(Dialog.Backdrop, { className: cx("cobalt-modal__overlay", {
"cobalt-modal--skipAnimation__enter": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter,
"cobalt-modal--skipAnimation__leave": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave,
}) },
React.createElement(Dialog.Positioner, { className: cx("cobalt-modal", {
"cobalt-modal--overflowHidden": overflowHidden,
"cobalt-modal--fullHeight": fullHeight,
"cobalt-modal--fullWidth": fullWidth,
}), ref: ref },
React.createElement(Dialog.Content, { className: cx("cobalt-modal__content", className, {
"cobalt-modal--skipAnimation__enter": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter,
"cobalt-modal--skipAnimation__leave": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave,
}) },
React.createElement(ModalHeader, { title: title, close: close }),
React.createElement(Dialog.Description, { className: "cobalt-modal-body__wrapper" },
React.createElement("div", { className: cx("cobalt-modal-body", {
"cobalt-modal-body--bodySpacing": bodySpacing,
"cobalt-modal-body--hasFooter": hasFooter,
}) }, children),
hasFooter && React.createElement(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