Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/72.acf49113.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[72],{1129:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FrameContextConsumer=t.FrameContextProvider=t.FrameContext=void 0;var o,a=n(0),r=(o=a)&&o.__esModule?o:{default:o};var i=void 0,s=void 0;"undefined"!==typeof document&&(i=document),"undefined"!==typeof window&&(s=window);var c=t.FrameContext=r.default.createContext({document:i,window:s}),l=c.Provider,d=c.Consumer;t.FrameContextProvider=l,t.FrameContextConsumer=d},1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return k}));var o=n(118),a=n(1100),r=n(1109),i=n(1090),s=n(1117),c=n(1119),l=n(5),d=n(0),p=n(1024),u=n(551),m=n(1087),h=n(1099),b=n(11),f=n(370),j=n(371),x=n(1131),y=n.n(x),O=n(1);const g=Object(p.a)({productionPrefix:"iframe-"});class v extends d.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=e=>{this.contentDocument=e?e.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(f.a)({...Object(u.a)(),plugins:[...Object(u.a)().plugins,Object(j.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(O.jsxs)(O.Fragment,{children:[Object(O.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(O.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(O.jsx)(y.a,{head:this.renderHead(),ref:this.handleRef,className:Object(l.a)(t.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(O.jsx)(m.b,{jss:this.state.jss,generateClassName:g,sheetsManager:this.state.sheetsManager,children:Object(O.jsx)(h.a,{theme:n,children:Object(d.cloneElement)(e,{container:this.state.container})})}):null})}}var w=Object(b.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(v);function C(e){const[t,n]=Object(d.useState)(e.currentTabIndex),{component:p,raw:u,iframe:m,className:h}=e;return Object(O.jsxs)(r.a,{className:Object(l.a)(h,"shadow"),children:[Object(O.jsx)(a.a,{position:"static",color:"default",className:"shadow-0",children:Object(O.jsxs)(c.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[p&&Object(O.jsx)(s.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(i.a,{children:"remove_red_eye"})}),u&&Object(O.jsx)(s.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(i.a,{children:"code"})})]})}),Object(O.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(O.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:p&&(m?Object(O.jsx)(w,{children:Object(O.jsx)(p,{})}):Object(O.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(O.jsx)(p,{})}))}),Object(O.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:u&&Object(O.jsx)("div",{className:"flex flex-1",children:Object(O.jsx)(o.a,{component:"pre",className:"language-javascript w-full",children:u.default})})})]})]})}C.defaultProps={currentTabIndex:0};var k=C},1131:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FrameContextConsumer=t.FrameContext=void 0;var o=n(1129);Object.defineProperty(t,"FrameContext",{enumerable:!0,get:function(){return o.FrameContext}}),Object.defineProperty(t,"FrameContextConsumer",{enumerable:!0,get:function(){return o.FrameContextConsumer}});var a,r=n(1132),i=(a=r)&&a.__esModule?a:{default:a};t.default=i.default},1132:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},a=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r=n(0),i=p(r),s=p(n(22)),c=p(n(553)),l=n(1129),d=p(n(1133));function p(e){return e&&e.__esModule?e:{default:e}}var u=function(e){function t(e,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var o=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return o.handleLoad=function(){o.forceUpdate()},o._isMounted=!1,o}return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),a(t,[{key:"componentDidMount",value:function(){this._isMounted=!0;var e=this.getDoc();e&&"complete"===e.readyState?this.forceUpdate():this.node.addEventListener("load",this.handleLoad)}},{key:"componentWillUnmount",value:function(){this._isMounted=!1,this.node.removeEventListener("load",this.handleLoad)}},{key:"getDoc",value:function(){return this.node?this.node.contentDocument:null}},{key:"getMountTarget",value:function(){var e=this.getDoc();return this.props.mountTarget?e.querySelector(this.props.mountTarget):e.body.children[0]}},{key:"renderFrameContents",value:function(){if(!this._isMounted)return null;var e=this.getDoc();if(!e)return null;var t=this.props.contentDidMount,n=this.props.contentDidUpdate,o=e.defaultView||e.parentView,a=i.default.createElement(d.default,{contentDidMount:t,contentDidUpdate:n},i.default.createElement(l.FrameContextProvider,{value:{document:e,window:o}},i.default.createElement("div",{className:"frame-content"},this.props.children)));e.body.children.length<1&&(e.open("text/html","replace"),e.write(this.props.initialContent),e.close());var r=this.getMountTarget();return[s.default.createPortal(this.props.head,this.getDoc().head),s.default.createPortal(a,r)]}},{key:"render",value:function(){var e=this,t=o({},this.props,{children:void 0});return delete t.head,delete t.initialContent,delete t.mountTarget,delete t.contentDidMount,delete t.contentDidUpdate,i.default.createElement("iframe",o({},t,{ref:function(t){e.node=t}}),this.renderFrameContents())}}]),t}(r.Component);u.propTypes={style:c.default.object,head:c.default.node,initialContent:c.default.string,mountTarget:c.default.string,contentDidMount:c.default.func,contentDidUpdate:c.default.func,children:c.default.oneOfType([c.default.element,c.default.arrayOf(c.default.element)])},u.defaultProps={style:{},head:null,children:void 0,mountTarget:void 0,contentDidMount:function(){},contentDidUpdate:function(){},initialContent:'<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'},t.default=u},1133:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=n(0),r=(i(a),i(n(553)));function i(e){return e&&e.__esModule?e:{default:e}}var s=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),o(t,[{key:"componentDidMount",value:function(){this.props.contentDidMount()}},{key:"componentDidUpdate",value:function(){this.props.contentDidUpdate()}},{key:"render",value:function(){return a.Children.only(this.props.children)}}]),t}(a.Component);s.propTypes={children:r.default.element.isRequired,contentDidMount:r.default.func.isRequired,contentDidUpdate:r.default.func.isRequired},t.default=s},2075:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return p}));var o=n(0),a=n.n(o),r=n(1072),i=n(369),s=n(1);function c(){return Math.round(20*Math.random())-10}function l(){const e=50+c(),t=50+c();return{top:"".concat(e,"%"),left:"".concat(t,"%"),transform:"translate(-".concat(e,"%, -").concat(t,"%)")}}const d=Object(r.a)((e=>({paper:{position:"absolute",width:400,backgroundColor:e.palette.background.paper,border:"2px solid #000",boxShadow:e.shadows[5],padding:e.spacing(2,4,3)}})));function p(){const e=d(),[t]=a.a.useState(l),[n,o]=a.a.useState(!1),r=Object(s.jsxs)("div",{style:t,className:e.paper,children:[Object(s.jsx)("h2",{id:"simple-modal-title",children:"Text in a modal"}),Object(s.jsx)("p",{id:"simple-modal-description",children:"Duis mollis, est non commodo luctus, nisi erat porttitor ligula."}),Object(s.jsx)(p,{})]});return Object(s.jsxs)("div",{children:[Object(s.jsx)("button",{type:"button",onClick:()=>{o(!0)},children:"Open Modal"}),Object(s.jsx)(i.a,{open:n,onClose:()=>{o(!1)},"aria-labelledby":"simple-modal-title","aria-describedby":"simple-modal-description",children:r})]})}},2076:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Modal from '@material-ui/core/Modal';\n\nfunction rand() {\n return Math.round(Math.random() * 20) - 10;\n}\n\nfunction getModalStyle() {\n const top = 50 + rand();\n const left = 50 + rand();\n\n return {\n top: `${top}%`,\n left: `${left}%`,\n transform: `translate(-${top}%, -${left}%)`,\n };\n}\n\nconst useStyles = makeStyles((theme) => ({\n paper: {\n position: 'absolute',\n width: 400,\n backgroundColor: theme.palette.background.paper,\n border: '2px solid #000',\n boxShadow: theme.shadows[5],\n padding: theme.spacing(2, 4, 3),\n },\n}));\n\nexport default function SimpleModal() {\n const classes = useStyles();\n // getModalStyle is not a pure function, we roll the style only on the first render\n const [modalStyle] = React.useState(getModalStyle);\n const [open, setOpen] = React.useState(false);\n\n const handleOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n const body = (\n <div style={modalStyle} className={classes.paper}>\n <h2 id=\"simple-modal-title\">Text in a modal</h2>\n <p id=\"simple-modal-description\">\n Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\n </p>\n <SimpleModal />\n </div>\n );\n\n return (\n <div>\n <button type=\"button\" onClick={handleOpen}>\n Open Modal\n </button>\n <Modal\n open={open}\n onClose={handleClose}\n aria-labelledby=\"simple-modal-title\"\n aria-describedby=\"simple-modal-description\"\n >\n {body}\n </Modal>\n </div>\n );\n}\n"},2077:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return p}));var o=n(0),a=n.n(o),r=n(1072),i=n(369),s=n(547),c=n(546),l=n(1);const d=Object(r.a)((e=>({modal:{display:"flex",alignItems:"center",justifyContent:"center"},paper:{backgroundColor:e.palette.background.paper,border:"2px solid #000",boxShadow:e.shadows[5],padding:e.spacing(2,4,3)}})));function p(){const e=d(),[t,n]=a.a.useState(!1);return Object(l.jsxs)("div",{children:[Object(l.jsx)("button",{type:"button",onClick:()=>{n(!0)},children:"react-transition-group"}),Object(l.jsx)(i.a,{"aria-labelledby":"transition-modal-title","aria-describedby":"transition-modal-description",className:e.modal,open:t,onClose:()=>{n(!1)},closeAfterTransition:!0,BackdropComponent:s.a,BackdropProps:{timeout:500},children:Object(l.jsx)(c.a,{in:t,children:Object(l.jsxs)("div",{className:e.paper,children:[Object(l.jsx)("h2",{id:"transition-modal-title",children:"Transition modal"}),Object(l.jsx)("p",{id:"transition-modal-description",children:"react-transition-group animates me."})]})})})]})}},2078:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Modal from '@material-ui/core/Modal';\nimport Backdrop from '@material-ui/core/Backdrop';\nimport Fade from '@material-ui/core/Fade';\n\nconst useStyles = makeStyles((theme) => ({\n modal: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n paper: {\n backgroundColor: theme.palette.background.paper,\n border: '2px solid #000',\n boxShadow: theme.shadows[5],\n padding: theme.spacing(2, 4, 3),\n },\n}));\n\nexport default function TransitionsModal() {\n const classes = useStyles();\n const [open, setOpen] = React.useState(false);\n\n const handleOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n return (\n <div>\n <button type=\"button\" onClick={handleOpen}>\n react-transition-group\n </button>\n <Modal\n aria-labelledby=\"transition-modal-title\"\n aria-describedby=\"transition-modal-description\"\n className={classes.modal}\n open={open}\n onClose={handleClose}\n closeAfterTransition\n BackdropComponent={Backdrop}\n BackdropProps={{\n timeout: 500,\n }}\n >\n <Fade in={open}>\n <div className={classes.paper}>\n <h2 id=\"transition-modal-title\">Transition modal</h2>\n <p id=\"transition-modal-description\">react-transition-group animates me.</p>\n </div>\n </Fade>\n </Modal>\n </div>\n );\n}\n"},2079:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return u}));var o=n(0),a=n.n(o),r=n(1072),i=n(369),s=n(547),c=n(1447),l=n(1);const d=Object(r.a)((e=>({modal:{display:"flex",alignItems:"center",justifyContent:"center"},paper:{backgroundColor:e.palette.background.paper,border:"2px solid #000",boxShadow:e.shadows[5],padding:e.spacing(2,4,3)}}))),p=a.a.forwardRef((function(e,t){const{in:n,children:o,onEnter:a,onExited:r,...i}=e,s=Object(c.useSpring)({from:{opacity:0},to:{opacity:n?1:0},onStart:()=>{n&&a&&a()},onRest:()=>{!n&&r&&r()}});return Object(l.jsx)(c.animated.div,{ref:t,style:s,...i,children:o})}));function u(){const e=d(),[t,n]=a.a.useState(!1);return Object(l.jsxs)("div",{children:[Object(l.jsx)("button",{type:"button",onClick:()=>{n(!0)},children:"react-spring"}),Object(l.jsx)(i.a,{"aria-labelledby":"spring-modal-title","aria-describedby":"spring-modal-description",className:e.modal,open:t,onClose:()=>{n(!1)},closeAfterTransition:!0,BackdropComponent:s.a,BackdropProps:{timeout:500},children:Object(l.jsx)(p,{in:t,children:Object(l.jsxs)("div",{className:e.paper,children:[Object(l.jsx)("h2",{id:"spring-modal-title",children:"Spring modal"}),Object(l.jsx)("p",{id:"spring-modal-description",children:"react-spring animates me."})]})})})]})}},2080:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Modal from '@material-ui/core/Modal';\nimport Backdrop from '@material-ui/core/Backdrop';\nimport { useSpring, animated } from 'react-spring/web.cjs'; // web.cjs is required for IE 11 support\n\nconst useStyles = makeStyles((theme) => ({\n modal: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n paper: {\n backgroundColor: theme.palette.background.paper,\n border: '2px solid #000',\n boxShadow: theme.shadows[5],\n padding: theme.spacing(2, 4, 3),\n },\n}));\n\nconst Fade = React.forwardRef(function Fade(props, ref) {\n const { in: open, children, onEnter, onExited, ...other } = props;\n const style = useSpring({\n from: { opacity: 0 },\n to: { opacity: open ? 1 : 0 },\n onStart: () => {\n if (open && onEnter) {\n onEnter();\n }\n },\n onRest: () => {\n if (!open && onExited) {\n onExited();\n }\n },\n });\n\n return (\n <animated.div ref={ref} style={style} {...other}>\n {children}\n </animated.div>\n );\n});\n\nFade.propTypes = {\n children: PropTypes.element,\n in: PropTypes.bool.isRequired,\n onEnter: PropTypes.func,\n onExited: PropTypes.func,\n};\n\nexport default function SpringModal() {\n const classes = useStyles();\n const [open, setOpen] = React.useState(false);\n\n const handleOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n return (\n <div>\n <button type=\"button\" onClick={handleOpen}>\n react-spring\n </button>\n <Modal\n aria-labelledby=\"spring-modal-title\"\n aria-describedby=\"spring-modal-description\"\n className={classes.modal}\n open={open}\n onClose={handleClose}\n closeAfterTransition\n BackdropComponent={Backdrop}\n BackdropProps={{\n timeout: 500,\n }}\n >\n <Fade in={open}>\n <div className={classes.paper}>\n <h2 id=\"spring-modal-title\">Spring modal</h2>\n <p id=\"spring-modal-description\">react-spring animates me.</p>\n </div>\n </Fade>\n </Modal>\n </div>\n );\n}\n"},2081:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return l}));var o=n(0),a=n.n(o),r=n(1072),i=n(369),s=n(1);const c=Object(r.a)((e=>({root:{height:300,flexGrow:1,minWidth:300,transform:"translateZ(0)","@media all and (-ms-high-contrast: none)":{display:"none"}},modal:{display:"flex",padding:e.spacing(1),alignItems:"center",justifyContent:"center"},paper:{width:400,backgroundColor:e.palette.background.paper,border:"2px solid #000",boxShadow:e.shadows[5],padding:e.spacing(2,4,3)}})));function l(){const e=c(),t=a.a.useRef(null);return Object(s.jsx)("div",{className:e.root,ref:t,children:Object(s.jsx)(i.a,{disablePortal:!0,disableEnforceFocus:!0,disableAutoFocus:!0,open:!0,"aria-labelledby":"server-modal-title","aria-describedby":"server-modal-description",className:e.modal,container:()=>t.current,children:Object(s.jsxs)("div",{className:e.paper,children:[Object(s.jsx)("h2",{id:"server-modal-title",children:"Server-side modal"}),Object(s.jsx)("p",{id:"server-modal-description",children:"If you disable JavaScript, you will still see me."})]})})})}},2082:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Modal from '@material-ui/core/Modal';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n height: 300,\n flexGrow: 1,\n minWidth: 300,\n transform: 'translateZ(0)',\n // The position fixed scoping doesn't work in IE 11.\n // Disable this demo to preserve the others.\n '@media all and (-ms-high-contrast: none)': {\n display: 'none',\n },\n },\n modal: {\n display: 'flex',\n padding: theme.spacing(1),\n alignItems: 'center',\n justifyContent: 'center',\n },\n paper: {\n width: 400,\n backgroundColor: theme.palette.background.paper,\n border: '2px solid #000',\n boxShadow: theme.shadows[5],\n padding: theme.spacing(2, 4, 3),\n },\n}));\n\nexport default function ServerModal() {\n const classes = useStyles();\n const rootRef = React.useRef(null);\n\n return (\n <div className={classes.root} ref={rootRef}>\n <Modal\n disablePortal\n disableEnforceFocus\n disableAutoFocus\n open\n aria-labelledby=\"server-modal-title\"\n aria-describedby=\"server-modal-description\"\n className={classes.modal}\n container={() => rootRef.current}\n >\n <div className={classes.paper}>\n <h2 id=\"server-modal-title\">Server-side modal</h2>\n <p id=\"server-modal-description\">If you disable JavaScript, you will still see me.</p>\n </div>\n </Modal>\n </div>\n );\n}\n"},2589:function(e,t,n){"use strict";n.r(t);var o=n(1130),a=n(118),r=n(1098),i=n(1090),s=n(194),c=n(1072),l=n(1);const d=Object(c.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return d(),Object(l.jsxs)(l.Fragment,{children:[Object(l.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(l.jsxs)(r.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/modal",target:"_blank",role:"button",children:[Object(l.jsx)(i.a,{children:"link"}),Object(l.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(l.jsx)(s.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Modal"}),Object(l.jsx)(s.a,{className:"description",children:"The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else."}),Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["The component renders its ",Object(l.jsx)("code",{children:"children"})," node in front of a backdrop component. The"," ",Object(l.jsx)("code",{children:"Modal"})," offers important features:"]}),Object(l.jsxs)("ul",{children:[Object(l.jsx)("li",{children:"\ud83d\udc84 Manages modal stacking when one-at-a-time just isn't enough."}),Object(l.jsx)("li",{children:"\ud83d\udd10 Creates a backdrop, for disabling interaction below the modal."}),Object(l.jsx)("li",{children:"\ud83d\udd10 It disables scrolling of the page content while open."}),Object(l.jsx)("li",{children:"\u267f\ufe0f It properly manages focus; moving to the modal content, and keeping it there until the modal is closed."}),Object(l.jsx)("li",{children:"\u267f\ufe0f Adds the appropriate ARIA roles automatically."}),Object(l.jsxs)("li",{children:["\ud83d\udce6 ",Object(l.jsx)("a",{href:"/size-snapshot",children:"5 kB gzipped"}),"."]})]}),Object(l.jsx)("blockquote",{children:Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:[Object(l.jsx)("strong",{children:"Terminology note"}),'. The term "modal" is sometimes used to mean "dialog", but this is a misnomer. A modal window describes parts of a UI. An element is considered modal if'," ",Object(l.jsx)("a",{href:"https://en.wikipedia.org/wiki/Modal_window",children:"it blocks interaction with the rest of the application"}),"."]})}),Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["If you are creating a modal dialog, you probably want to use the"," ",Object(l.jsx)("a",{href:"/components/dialogs/",children:"Dialog"})," component rather than directly using Modal. Modal is a lower-level construct that is leveraged by the following components:"]}),Object(l.jsxs)("ul",{children:[Object(l.jsx)("li",{children:Object(l.jsx)("a",{href:"/components/dialogs/",children:"Dialog"})}),Object(l.jsx)("li",{children:Object(l.jsx)("a",{href:"/components/drawers/",children:"Drawer"})}),Object(l.jsx)("li",{children:Object(l.jsx)("a",{href:"/components/menus/",children:"Menu"})}),Object(l.jsx)("li",{children:Object(l.jsx)("a",{href:"/components/popover/",children:"Popover"})})]}),Object(l.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple modal"}),Object(l.jsx)(s.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2075).default,raw:n(2076)})}),Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["Notice that you can disable the outline (often blue or gold) with the"," ",Object(l.jsx)("code",{children:"outline: 0"})," CSS property."]}),Object(l.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Transitions"}),Object(l.jsx)(s.a,{className:"mb-16",component:"div",children:"The open/close state of the modal can be animated with a transition component. This component should respect the following conditions:"}),Object(l.jsxs)("ul",{children:[Object(l.jsx)("li",{children:"Be a direct child descendent of the modal."}),Object(l.jsxs)("li",{children:["Have an ",Object(l.jsx)("code",{children:"in"})," prop. This corresponds to the open / close state."]}),Object(l.jsxs)("li",{children:["Call the ",Object(l.jsx)("code",{children:"onEnter"})," callback prop when the enter transition starts."]}),Object(l.jsxs)("li",{children:["Call the ",Object(l.jsx)("code",{children:"onExited"})," callback prop when the exit transition is completed. These two callbacks allow the modal to unmount the child content when closed and fully transitioned."]})]}),Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["Modal has built-in support for"," ",Object(l.jsx)("a",{href:"https://github.com/reactjs/react-transition-group",children:"react-transition-group"}),"."]}),Object(l.jsx)(s.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2077).default,raw:n(2078)})}),Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["Alternatively, you can use"," ",Object(l.jsx)("a",{href:"https://github.com/react-spring/react-spring",children:"react-spring"}),"."]}),Object(l.jsx)(s.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2079).default,raw:n(2080)})}),Object(l.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Server-side modal"}),Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["React ",Object(l.jsx)("a",{href:"https://github.com/facebook/react/issues/13097",children:"doesn't support"})," the"," ",Object(l.jsx)("a",{href:"https://reactjs.org/docs/portals.html",children:Object(l.jsx)("code",{children:"createPortal()"})})," ","API on the server. In order to display the modal, you need to disable the portal feature with the ",Object(l.jsx)("code",{children:"disablePortal"})," prop:"]}),Object(l.jsx)(s.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2081).default,raw:n(2082)})}),Object(l.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Limitations"}),Object(l.jsx)(s.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"Focus trap"}),Object(l.jsx)(s.a,{className:"mb-16",component:"div",children:"The modal moves the focus back to the body of the component if the focus tries to escape it."}),Object(l.jsx)(s.a,{className:"mb-16",component:"div",children:"This is done for accessibility purposes, however, it might create issues. In the event the users need to interact with another part of the page, e.g. with a chatbot window, you can disable the behavior:"}),Object(l.jsx)(a.a,{component:"pre",className:"language-jsx",children:" \n<Modal disableEnforceFocus />\n"}),Object(l.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["(WAI-ARIA:"," ",Object(l.jsx)("a",{href:"https://www.w3.org/TR/wai-aria-practices/#dialog_modal",children:"https://www.w3.org/TR/wai-aria-practices/#dialog_modal"}),")"]}),Object(l.jsxs)("ul",{children:[Object(l.jsxs)("li",{children:[Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["Be sure to add ",Object(l.jsx)("code",{children:'aria-labelledby="id..."'}),", referencing the modal title, to the"," ",Object(l.jsx)("code",{children:"Modal"}),". Additionally, you may give a description of your modal with the"," ",Object(l.jsx)("code",{children:'aria-describedby="id..."'})," prop on the ",Object(l.jsx)("code",{children:"Modal"}),"."]}),Object(l.jsx)(a.a,{component:"pre",className:"language-jsx",children:' \n<Modal\n aria-labelledby="modal-title"\n aria-describedby="modal-description"\n>\n <h2 id="modal-title">\n My Title\n </h2>\n <Typography id="modal-description">\n My Description\n </Typography>\n</Modal>\n'})]}),Object(l.jsx)("li",{children:Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["The"," ",Object(l.jsx)("a",{href:"https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html",children:"WAI-ARIA authoring practices"})," ","can help you set the initial focus on the most relevant element, based on your modal content."]})}),Object(l.jsx)("li",{children:Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:['Keep in mind that a "modal window" overlays on either the primary window or another modal window. Windows under a modal are ',Object(l.jsx)("strong",{children:"inert"}),". That is, users cannot interact with content outside an active modal window. This might create"," ",Object(l.jsx)("a",{href:"#focus-trap",children:"conflicting behaviors"}),"."]})})]})]})}}}]);
Mini Shell