HOME

Mini Shell 1.0
DIR:/home/htlwork.com/www/dev/workinsights/assets/
Current File : //home/htlwork.com/www/dev/workinsights/assets/Modals-C5tvhylG.js
import{r as n,_ as S,R as x,i as P,k as q,P as r,t as he,T as xe,O as $,au as je,at as pe,j as e,C as be,a as k,n as fe,h as N,l as w,o as b,y as o,x as _}from"./index-Bp11FH_t.js";import{C as M}from"./CCardHeader-BAtn-E9E.js";import{C as ge}from"./CPopover-De7xpu16.js";import{C as ee}from"./CTooltip-CjPcU7pF.js";import"./getRTLPlacement-BXPl1LY5.js";import"./getTransitionDurationFromElement-Cpu4p4hx.js";var F=n.forwardRef(function(s,l){var c=s.children,a=s.className,i=S(s,["children","className"]);return x.createElement("div",P({className:q("modal-content",a)},i,{ref:l}),c)});F.propTypes={children:r.node,className:r.string};F.displayName="CModalContent";var z=n.forwardRef(function(s,l){var c,a=s.children,i=s.alignment,h=s.className,p=s.fullscreen,g=s.scrollable,v=s.size,y=S(s,["children","alignment","className","fullscreen","scrollable","size"]);return x.createElement("div",P({className:q("modal-dialog",(c={"modal-dialog-centered":i==="center"},c[typeof p=="boolean"?"modal-fullscreen":"modal-fullscreen-".concat(p,"-down")]=p,c["modal-dialog-scrollable"]=g,c["modal-".concat(v)]=v,c),h)},y,{ref:l}),a)});z.propTypes={alignment:r.oneOf(["top","center"]),children:r.node,className:r.string,fullscreen:r.oneOfType([r.bool,r.oneOf(["sm","md","lg","xl","xxl"])]),scrollable:r.bool,size:r.oneOf(["sm","lg","xl"])};z.displayName="CModalDialog";var se=n.createContext({}),t=n.forwardRef(function(s,l){var c=s.children,a=s.alignment,i=s.backdrop,h=i===void 0?!0:i,p=s.className,g=s.container,v=s.duration,y=v===void 0?150:v,V=s.focus,E=V===void 0?!0:V,le=s.fullscreen,O=s.keyboard,re=O===void 0?!0:O,ne=s.onClose,B=s.onClosePrevented,oe=s.onShow,A=s.portal,X=A===void 0?!0:A,ce=s.scrollable,ie=s.size,I=s.transition,L=I===void 0?!0:I,H=s.unmountOnClose,ae=H===void 0?!0:H,R=s.visible,te=S(s,["children","alignment","backdrop","className","container","duration","focus","fullscreen","keyboard","onClose","onClosePrevented","onShow","portal","scrollable","size","transition","unmountOnClose","visible"]),W=n.useRef(null),D=n.useRef(null),de=n.useRef(null),ue=he(l,D),K=n.useState(R),C=K[0],T=K[1],Y=n.useState(!1),G=Y[0],J=Y[1],me={visible:C,setVisible:T};n.useEffect(function(){T(R)},[R]),n.useEffect(function(){var j;return C?(W.current=document.activeElement,document.addEventListener("mouseup",U),document.addEventListener("keydown",Z)):(j=W.current)===null||j===void 0||j.focus(),function(){document.removeEventListener("mouseup",U),document.removeEventListener("keydown",Z)}},[C]);var Q=function(){if(h==="static")return J(!0);T(!1)};n.useLayoutEffect(function(){B&&B(),setTimeout(function(){return J(!1)},y)},[G]),n.useLayoutEffect(function(){return C?(document.body.classList.add("modal-open"),h&&(document.body.style.overflow="hidden",document.body.style.paddingRight="0px"),setTimeout(function(){var j;E&&((j=D.current)===null||j===void 0||j.focus())},L?y:0)):(document.body.classList.remove("modal-open"),h&&(document.body.style.removeProperty("overflow"),document.body.style.removeProperty("padding-right"))),function(){document.body.classList.remove("modal-open"),h&&(document.body.style.removeProperty("overflow"),document.body.style.removeProperty("padding-right"))}},[C]);var U=function(j){D.current&&D.current==j.target&&Q()},Z=function(j){j.key==="Escape"&&re&&Q()};return x.createElement(x.Fragment,null,x.createElement(xe,{in:C,mountOnEnter:!0,nodeRef:D,onEnter:oe,onExit:ne,unmountOnExit:ae,timeout:L?y:0},function(j){return x.createElement($,{container:g,portal:X},x.createElement(se.Provider,{value:me},x.createElement("div",P({className:q("modal",{"modal-static":G,fade:L,show:j==="entered"},p),tabIndex:-1},C?{"aria-modal":!0,role:"dialog"}:{"aria-hidden":"true"},{style:P({},j!=="exited"&&{display:"block"})},te,{ref:ue}),x.createElement(z,{alignment:a,fullscreen:le,scrollable:ce,size:ie},x.createElement(F,{ref:de},c)))))}),h&&x.createElement($,{container:g,portal:X},x.createElement(je,{visible:C})))});t.propTypes={alignment:r.oneOf(["top","center"]),backdrop:r.oneOfType([r.bool,r.oneOf(["static"])]),children:r.node,className:r.string,container:r.any,duration:r.number,focus:r.bool,fullscreen:r.oneOfType([r.bool,r.oneOf(["sm","md","lg","xl","xxl"])]),keyboard:r.bool,onClose:r.func,onClosePrevented:r.func,onShow:r.func,portal:r.bool,scrollable:r.bool,size:r.oneOf(["sm","lg","xl"]),transition:r.bool,unmountOnClose:r.bool,visible:r.bool};t.displayName="CModal";var d=n.forwardRef(function(s,l){var c=s.children,a=s.className,i=S(s,["children","className"]);return x.createElement("div",P({className:q("modal-body",a)},i,{ref:l}),c)});d.propTypes={children:r.node,className:r.string};d.displayName="CModalBody";var f=n.forwardRef(function(s,l){var c=s.children,a=s.className,i=S(s,["children","className"]);return x.createElement("div",P({className:q("modal-footer",a)},i,{ref:l}),c)});f.propTypes={children:r.node,className:r.string};f.displayName="CModalFooter";var u=n.forwardRef(function(s,l){var c=s.children,a=s.className,i=s.closeButton,h=i===void 0?!0:i,p=S(s,["children","className","closeButton"]),g=n.useContext(se).setVisible;return x.createElement("div",P({className:q("modal-header",a)},p,{ref:l}),c,h&&x.createElement(pe,{onClick:function(){return g(!1)}}))});u.propTypes={children:r.node,className:r.string,closeButton:r.bool};u.displayName="CModalHeader";var m=n.forwardRef(function(s,l){var c=s.children,a=s.as,i=a===void 0?"h5":a,h=s.className,p=S(s,["children","as","className"]);return x.createElement(i,P({className:q("modal-title",h)},p,{ref:l}),c)});m.propTypes={as:r.elementType,children:r.node,className:r.string};m.displayName="CModalTitle";const ve=()=>{const[s,l]=n.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(o,{color:"primary",onClick:()=>l(!s),children:"Launch demo modal"}),e.jsxs(t,{visible:s,onClose:()=>l(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Modal title"})}),e.jsx(d,{children:"Woohoo, you're reading this text in a modal!"}),e.jsxs(f,{children:[e.jsx(o,{color:"secondary",onClick:()=>l(!1),children:"Close"}),e.jsx(o,{color:"primary",children:"Save changes"})]})]})]})},ye=()=>{const[s,l]=n.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(o,{color:"primary",onClick:()=>l(!s),children:"Launch static backdrop modal"}),e.jsxs(t,{backdrop:"static",visible:s,onClose:()=>l(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Modal title"})}),e.jsx(d,{children:"I will not close if you click outside me. Don'teven try to press escape key."}),e.jsxs(f,{children:[e.jsx(o,{color:"secondary",onClick:()=>l(!1),children:"Close"}),e.jsx(o,{color:"primary",children:"Save changes"})]})]})]})},Ce=()=>{const[s,l]=n.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(o,{color:"primary",onClick:()=>l(!s),children:"Launch demo modal"}),e.jsxs(t,{visible:s,onClose:()=>l(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Modal title"})}),e.jsxs(d,{children:[e.jsx("p",{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsx("p",{children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."}),e.jsx("p",{children:"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla."}),e.jsx("p",{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsx("p",{children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."}),e.jsx("p",{children:"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla."}),e.jsx("p",{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsx("p",{children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."}),e.jsx("p",{children:"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla."}),e.jsx("p",{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsx("p",{children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."}),e.jsx("p",{children:"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla."}),e.jsx("p",{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsx("p",{children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."}),e.jsx("p",{children:"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla."}),e.jsx("p",{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsx("p",{children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."}),e.jsx("p",{children:"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla."})]}),e.jsxs(f,{children:[e.jsx(o,{color:"secondary",onClick:()=>l(!1),children:"Close"}),e.jsx(o,{color:"primary",children:"Save changes"})]})]})]})},ke=()=>{const[s,l]=n.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(o,{color:"primary",onClick:()=>l(!s),children:"Launch demo modal"}),e.jsxs(t,{scrollable:!0,visible:s,onClose:()=>l(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Modal title"})}),e.jsxs(d,{children:[e.jsx("p",{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsx("p",{children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."}),e.jsx("p",{children:"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla."}),e.jsx("p",{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsx("p",{children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."}),e.jsx("p",{children:"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla."}),e.jsx("p",{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsx("p",{children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."}),e.jsx("p",{children:"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla."}),e.jsx("p",{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsx("p",{children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."}),e.jsx("p",{children:"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla."}),e.jsx("p",{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsx("p",{children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."}),e.jsx("p",{children:"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla."}),e.jsx("p",{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsx("p",{children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."}),e.jsx("p",{children:"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla."})]}),e.jsxs(f,{children:[e.jsx(o,{color:"secondary",onClick:()=>l(!1),children:"Close"}),e.jsx(o,{color:"primary",children:"Save changes"})]})]})]})},Ne=()=>{const[s,l]=n.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(o,{color:"primary",onClick:()=>l(!s),children:"Vertically centered modal"}),e.jsxs(t,{alignment:"center",visible:s,onClose:()=>l(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Modal title"})}),e.jsx(d,{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsxs(f,{children:[e.jsx(o,{color:"secondary",onClick:()=>l(!1),children:"Close"}),e.jsx(o,{color:"primary",children:"Save changes"})]})]})]})},we=()=>{const[s,l]=n.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(o,{color:"primary",onClick:()=>l(!s),children:"Vertically centered scrollable modal"}),e.jsxs(t,{alignment:"center",scrollable:!0,visible:s,onClose:()=>l(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Modal title"})}),e.jsxs(d,{children:[e.jsx("p",{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsx("p",{children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."}),e.jsx("p",{children:"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla."}),e.jsx("p",{children:"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."}),e.jsx("p",{children:"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."})]}),e.jsxs(f,{children:[e.jsx(o,{color:"secondary",onClick:()=>l(!1),children:"Close"}),e.jsx(o,{color:"primary",children:"Save changes"})]})]})]})},Me=()=>{const[s,l]=n.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(o,{color:"primary",onClick:()=>l(!s),children:"Launch demo modal"}),e.jsxs(t,{alignment:"center",visible:s,onClose:()=>l(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Modal title"})}),e.jsxs(d,{children:[e.jsx("h5",{children:"Popover in a modal"}),e.jsxs("p",{children:["This",e.jsx(ge,{title:"Popover title",content:"Popover body content is set in this property.",children:e.jsx(o,{color:"primary",children:"button"})})," ","triggers a popover on click."]}),e.jsx("hr",{}),e.jsx("h5",{children:"Tooltips in a modal"}),e.jsxs("p",{children:[e.jsx(ee,{content:"Tooltip",children:e.jsx(_,{children:"This link"})})," ","and",e.jsx(ee,{content:"Tooltip",children:e.jsx(_,{children:"that link"})})," ","have tooltips on hover."]})]}),e.jsxs(f,{children:[e.jsx(o,{color:"secondary",onClick:()=>l(!1),children:"Close"}),e.jsx(o,{color:"primary",children:"Save changes"})]})]})]})},Pe=()=>{const[s,l]=n.useState(!1),[c,a]=n.useState(!1),[i,h]=n.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(o,{color:"primary",onClick:()=>l(!s),children:"Extra large modal"}),e.jsx(o,{color:"primary",onClick:()=>a(!c),children:"Large modal"}),e.jsx(o,{color:"primary",onClick:()=>h(!i),children:"Small large modal"}),e.jsxs(t,{size:"xl",visible:s,onClose:()=>l(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Extra large modal"})}),e.jsx(d,{children:"..."})]}),e.jsxs(t,{size:"lg",visible:c,onClose:()=>a(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Large modal"})}),e.jsx(d,{children:"..."})]}),e.jsxs(t,{size:"sm",visible:i,onClose:()=>h(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Small modal"})}),e.jsx(d,{children:"..."})]})]})},Se=()=>{const[s,l]=n.useState(!1),[c,a]=n.useState(!1),[i,h]=n.useState(!1),[p,g]=n.useState(!1),[v,y]=n.useState(!1),[V,E]=n.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(o,{color:"primary",onClick:()=>l(!s),children:"Full screen"}),e.jsx(o,{color:"primary",onClick:()=>a(!c),children:"Full screen below sm"}),e.jsx(o,{color:"primary",onClick:()=>h(!i),children:"Full screen below md"}),e.jsx(o,{color:"primary",onClick:()=>g(!p),children:"Full screen below lg"}),e.jsx(o,{color:"primary",onClick:()=>y(!v),children:"Full screen below xl"}),e.jsx(o,{color:"primary",onClick:()=>E(!V),children:"Full screen below xxl"}),e.jsxs(t,{fullscreen:!0,visible:s,onClose:()=>l(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Full screen"})}),e.jsx(d,{children:"..."})]}),e.jsxs(t,{fullscreen:"sm",visible:c,onClose:()=>a(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Full screen below sm"})}),e.jsx(d,{children:"..."})]}),e.jsxs(t,{fullscreen:"md",visible:i,onClose:()=>h(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Full screen below md"})}),e.jsx(d,{children:"..."})]}),e.jsxs(t,{fullscreen:"lg",visible:p,onClose:()=>g(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Full screen below lg"})}),e.jsx(d,{children:"..."})]}),e.jsxs(t,{fullscreen:"xl",visible:v,onClose:()=>y(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Full screen below xl"})}),e.jsx(d,{children:"..."})]}),e.jsxs(t,{fullscreen:"xxl",visible:V,onClose:()=>E(!1),children:[e.jsx(u,{children:e.jsx(m,{children:"Full screen below xxl"})}),e.jsx(d,{children:"..."})]})]})},Te=()=>e.jsxs(be,{children:[e.jsxs(k,{xs:12,children:[e.jsx(fe,{href:"components/modal/"}),e.jsxs(N,{className:"mb-4",children:[e.jsx(M,{children:e.jsx("strong",{children:"React Modal"})}),e.jsxs(w,{children:[e.jsxs("p",{className:"text-body-secondary small",children:["Below is a static modal example (meaning its ",e.jsx("code",{children:"position"})," and"," ",e.jsx("code",{children:"display"})," have been overridden). Included are the modal header, modal body (required for ",e.jsx("code",{children:"padding"}),"), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action."]}),e.jsx(b,{href:"components/modal",children:e.jsxs(t,{className:"show d-block position-static",backdrop:!1,keyboard:!1,portal:!1,visible:!0,children:[e.jsx(u,{children:e.jsx(m,{children:"Modal title"})}),e.jsx(d,{children:"Modal body text goes here."}),e.jsxs(f,{children:[e.jsx(o,{color:"secondary",children:"Close"}),e.jsx(o,{color:"primary",children:"Save changes"})]})]})})]})]})]}),e.jsx(k,{xs:12,children:e.jsxs(N,{className:"mb-4",children:[e.jsxs(M,{children:[e.jsx("strong",{children:"React Modal"})," ",e.jsx("small",{children:"Live demo"})]}),e.jsxs(w,{children:[e.jsx("p",{className:"text-body-secondary small",children:"Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page."}),e.jsx(b,{href:"components/modal#live-demo",children:ve()})]})]})}),e.jsx(k,{xs:12,children:e.jsxs(N,{className:"mb-4",children:[e.jsxs(M,{children:[e.jsx("strong",{children:"React Modal"})," ",e.jsx("small",{children:"Static backdrop"})]}),e.jsxs(w,{children:[e.jsxs("p",{className:"text-body-secondary small",children:["If you don’t provide an ",e.jsx("code",{children:"onDimsiss"})," handler to the Modal component, your modal will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it."]}),e.jsx(b,{href:"components/modal#static-backdrop",children:ye()})]})]})}),e.jsx(k,{xs:12,children:e.jsxs(N,{className:"mb-4",children:[e.jsxs(M,{children:[e.jsx("strong",{children:"React Modal"})," ",e.jsx("small",{children:"Scrolling long content"})]}),e.jsxs(w,{children:[e.jsxs("p",{className:"text-body-secondary small",children:["If you don’t provide an ",e.jsx("code",{children:"onDimsiss"})," handler to the Modal component, your modal will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it."]}),e.jsx(b,{href:"components/modal#scrolling-long-content",children:Ce()}),e.jsxs("p",{className:"text-body-secondary small",children:["You can also create a scrollable modal that allows scroll the modal body by adding"," ",e.jsx("code",{children:"scrollable"})," prop."]}),e.jsx(b,{href:"components/modal#scrolling-long-content",children:ke()})]})]})}),e.jsx(k,{xs:12,children:e.jsxs(N,{className:"mb-4",children:[e.jsxs(M,{children:[e.jsx("strong",{children:"React Modal"})," ",e.jsx("small",{children:"Vertically centered"})]}),e.jsxs(w,{children:[e.jsxs("p",{className:"text-body-secondary small",children:["Add ",e.jsx("code",{children:'alignment="center"'})," to ",e.jsx("code",{children:"<CModal>"})," to vertically center the modal."]}),e.jsx(b,{href:"components/modal#vertically-centered",children:Ne()}),e.jsx(b,{href:"components/modal#vertically-centered",children:we()})]})]})}),e.jsx(k,{xs:12,children:e.jsxs(N,{className:"mb-4",children:[e.jsxs(M,{children:[e.jsx("strong",{children:"React Modal"})," ",e.jsx("small",{children:"Tooltips and popovers"})]}),e.jsxs(w,{children:[e.jsxs("p",{className:"text-body-secondary small",children:[e.jsx("code",{children:"<CTooltips>"})," and ",e.jsx("code",{children:"<CPopovers>"})," can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed."]}),e.jsx(b,{href:"components/modal#tooltips-and-popovers",children:Me()})]})]})}),e.jsx(k,{xs:12,children:e.jsxs(N,{className:"mb-4",children:[e.jsxs(M,{children:[e.jsx("strong",{children:"React Modal"})," ",e.jsx("small",{children:"Optional sizes"})]}),e.jsxs(w,{children:[e.jsxs("p",{className:"text-body-secondary small",children:["Modals have three optional sizes, available via modifier classes to be placed on a"," ",e.jsx("code",{children:"<CModal>"}),". These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports."]}),e.jsxs("table",{className:"table",children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Size"}),e.jsx("th",{children:"Property size"}),e.jsx("th",{children:"Modal max-width"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:"Small"}),e.jsx("td",{children:e.jsx("code",{children:"'sm'"})}),e.jsx("td",{children:e.jsx("code",{children:"300px"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Default"}),e.jsx("td",{className:"text-body-secondary",children:"None"}),e.jsx("td",{children:e.jsx("code",{children:"500px"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Large"}),e.jsx("td",{children:e.jsx("code",{children:"'lg'"})}),e.jsx("td",{children:e.jsx("code",{children:"800px"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Extra large"}),e.jsx("td",{children:e.jsx("code",{children:"'xl'"})}),e.jsx("td",{children:e.jsx("code",{children:"1140px"})})]})]})]}),e.jsx(b,{href:"components/modal#optional-sizes",children:Pe()})]})]})}),e.jsx(k,{xs:12,children:e.jsxs(N,{className:"mb-4",children:[e.jsxs(M,{children:[e.jsx("strong",{children:"React Modal"})," ",e.jsx("small",{children:"Fullscreen Modal"})]}),e.jsxs(w,{children:[e.jsxs("p",{className:"text-body-secondary small",children:["Another override is the option to pop up a modal that covers the user viewport, available via property ",e.jsx("code",{children:"fullscrean"}),"."]}),e.jsxs("table",{className:"table",children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Property fullscrean"}),e.jsx("th",{children:"Availability"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"true"})}),e.jsx("td",{children:"Always"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"'sm'"})}),e.jsxs("td",{children:["Below ",e.jsx("code",{children:"576px"})]})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"'md'"})}),e.jsxs("td",{children:["Below ",e.jsx("code",{children:"768px"})]})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"'lg'"})}),e.jsxs("td",{children:["Below ",e.jsx("code",{children:"992px"})]})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"'xl'"})}),e.jsxs("td",{children:["Below ",e.jsx("code",{children:"1200px"})]})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"'xxl'"})}),e.jsxs("td",{children:["Below ",e.jsx("code",{children:"1400px"})]})]})]})]}),e.jsx(b,{href:"components/modal#fullscreen-modal",children:Se()})]})]})})]});export{Te as default};