monday-ui-react-core
Version:
Official monday.com UI resources for application development in React.js
3 lines (2 loc) • 2.91 kB
JavaScript
import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{useMemo as i,useCallback as r,cloneElement as l}from"react";import n from"react-dom";import a from"classnames";import{useA11yDialog as s}from"./a11yDialog.js";import d from"./ModalContent/ModalContent.js";import m from"./ModalHeader/ModalHeader.js";import c from"./useBodyScrollLock.js";import u from"./useShowHideModal.js";import{ModalWidth as f,validateTitleProp as p,isModalHeader as v,isModalContent as h,isModalFooter as g}from"./ModalHelper.js";import{NOOP as j}from"../../utils/function-utils.js";import{withStaticProps as w}from"../../types/withStaticProps.js";import{getTestId as y}from"../../tests/testIds.js";import{ComponentDefaultTestId as L}from"../../tests/constants.js";import M from"./Modal.module.scss.js";import{useWarnDeprecated as D}from"../../utils/warn-deprecated.js";import{isClient as E}from"../../utils/ssr-utils.js";var A=w((function(w){var A=w.classNames,C=void 0===A?{container:"",overlay:"",modal:""}:A,b=w.id,O=w.show,T=w.title,H=void 0===T?"":T,x=w.description,F=void 0===x?"":x,S=w.onClose,U=void 0===S?j:S,_=w.alertDialog,B=void 0!==_&&_,I=w.children,N=w.triggerElement,P=w.width,k=void 0===P?f.DEFAULT:P,z=w.closeButtonAriaLabel,W=void 0===z?"Close":z,R=w.contentSpacing,V=void 0!==R&&R,Y=w.zIndex,q=void 0===Y?1e4:Y,G=w.unmountOnClose,J=w["data-testid"];D({component:"Modal",condition:void 0===G,message:'The "unmountOnClose" prop will be set to default in the next major version, i.e. the modal will not render when "show" is set to false, which is the recommended behavior. To keep the existing behavior regardless, set "unmountOnClose" to false.'});var K=i((function(){return I?t.Children.toArray(I):[]}),[I]);p(H,K);var Q=s({id:b,alertDialog:B}),X=e(Q,2),Z=X[0],$=X[1],ee=r((function(){B||null==U||U()}),[B,U]);c({instance:Z});var oe=u({instance:Z,show:O,triggerElement:N,onClose:U,alertDialog:B}).shouldShow,te=i((function(){var e=$.title.id,o=K.find(v);return o?l(o,{id:e,closeModal:U}):t.createElement(m,{title:H,description:F,closeModal:U,id:e,closeButtonAriaLabel:W})}),[$.title,K,H,F,U,W]),ie=i((function(){return K.find(h)||t.createElement(d,null,K.filter((function(e){return!v(e)&&!g(e)})))}),[K]),re=i((function(){return K.find(g)||null}),[K]),le=k!==f.DEFAULT&&k!==f.FULL_WIDTH,ne=t.createElement("div",Object.assign({},$.container,{className:a(M.container,C.container),"data-testid":J||y(L.MODAL,b),style:{"--monday-modal-z-index":q}}),t.createElement("div",{onClick:ee,className:a(M.overlay,C.overlay),"data-testid":L.MODAL_OVERLAY}),t.createElement("div",Object.assign({},$.dialog,{className:a(M.dialog,C.modal,o(o(o({},M.default,k===f.DEFAULT),M.full,k===f.FULL_WIDTH),M.spacing,V)),style:{width:le?k:null}}),te,ie,re));return G&&!oe?null:E()?n.createPortal(ne,document.body):null}),{width:f});export{A as default};
//# sourceMappingURL=Modal.js.map