@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
83 lines (82 loc) • 4.12 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Dialog, Portal } from "@ark-ui/react";
import classnames from "classnames";
import react, { forwardRef, isValidElement, useEffect } from "react";
import ModalFooter from "./ModalFooter.js";
import ModalHeader from "./ModalHeader.js";
const ModalFooterAPI = (_props)=>null;
const isModalFooterAPIComponent = (component)=>/*#__PURE__*/ react.isValidElement(component) && component.type === ModalFooterAPI;
const Modal = /*#__PURE__*/ 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?.();
}, [
onShow,
isOpen
]);
const modalFooter = react.Children.toArray(children).find((c)=>isModalFooterAPIComponent(c));
const hasFooter = /*#__PURE__*/ isValidElement(modalFooter);
return /*#__PURE__*/ jsx(Dialog.Root, {
"aria-label": ariaLabel,
open: isOpen,
onOpenChange: (e)=>{
e.open ? onShow?.() : close?.();
},
onExitComplete: onHidden,
initialFocusEl: initialFocusRef && (()=>initialFocusRef.current),
onPointerDownOutside: close ? void 0 : onDismissAttempt,
lazyMount: true,
unmountOnExit: !onHidden,
children: /*#__PURE__*/ jsx(Portal, {
children: /*#__PURE__*/ jsx(Dialog.Backdrop, {
className: classnames("cobalt-modal__overlay", {
"cobalt-modal--skipAnimation__enter": skipAnimation?.enter || fullScreen,
"cobalt-modal--skipAnimation__leave": skipAnimation?.leave || fullScreen
}),
children: /*#__PURE__*/ jsx(Dialog.Positioner, {
className: classnames("cobalt-modal", {
"cobalt-modal--overflowHidden": overflowHidden,
"cobalt-modal--fullHeight": fullHeight,
"cobalt-modal--fullWidth": fullWidth,
"cobalt-modal--fullScreen": fullScreen
}),
ref: ref,
children: /*#__PURE__*/ jsxs(Dialog.Content, {
className: classnames("cobalt-modal__content", className, {
"cobalt-modal--skipAnimation__enter": skipAnimation?.enter || fullScreen,
"cobalt-modal--skipAnimation__leave": skipAnimation?.leave || fullScreen
}),
children: [
/*#__PURE__*/ jsx(ModalHeader, {
title: title,
close: close
}),
/*#__PURE__*/ jsxs(Dialog.Description, {
className: "cobalt-modal-body__wrapper",
children: [
/*#__PURE__*/ jsx("div", {
className: classnames("cobalt-modal-body", {
"cobalt-modal-body--bodySpacing": bodySpacing,
"cobalt-modal-body--hasFooter": hasFooter
}),
children: children
}),
hasFooter && /*#__PURE__*/ jsx(ModalFooter, {
...modalFooter.props
})
]
})
]
})
})
})
})
});
});
Modal.displayName = "Modal";
const components_Modal = Object.assign(Modal, {
Footer: ModalFooterAPI
});
export { default as MultiStepModal } from "./MultiStepModal.js";
export default components_Modal;
export { ModalFooterAPI, isModalFooterAPIComponent };
//# sourceMappingURL=index.js.map