Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/87.65a4ced7.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[87],{1129:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FrameContextConsumer=t.FrameContextProvider=t.FrameContext=void 0;var o,r=n(0),i=(o=r)&&o.__esModule?o:{default:o};var a=void 0,c=void 0;"undefined"!==typeof document&&(a=document),"undefined"!==typeof window&&(c=window);var s=t.FrameContext=i.default.createContext({document:a,window:c}),l=s.Provider,d=s.Consumer;t.FrameContextProvider=l,t.FrameContextConsumer=d},1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return C}));var o=n(118),r=n(1100),i=n(1109),a=n(1090),c=n(1117),s=n(1119),l=n(5),d=n(0),u=n(1024),h=n(551),p=n(1087),f=n(1099),m=n(11),b=n(370),j=n(371),y=n(1131),x=n.n(y),v=n(1);const O=Object(u.a)({productionPrefix:"iframe-"});class g 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(b.a)({...Object(h.a)(),plugins:[...Object(h.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(v.jsxs)(v.Fragment,{children:[Object(v.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(v.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(v.jsx)(x.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(v.jsx)(p.b,{jss:this.state.jss,generateClassName:O,sheetsManager:this.state.sheetsManager,children:Object(v.jsx)(f.a,{theme:n,children:Object(d.cloneElement)(e,{container:this.state.container})})}):null})}}var w=Object(m.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(g);function k(e){const[t,n]=Object(d.useState)(e.currentTabIndex),{component:u,raw:h,iframe:p,className:f}=e;return Object(v.jsxs)(i.a,{className:Object(l.a)(f,"shadow"),children:[Object(v.jsx)(r.a,{position:"static",color:"default",className:"shadow-0",children:Object(v.jsxs)(s.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[u&&Object(v.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(v.jsx)(a.a,{children:"remove_red_eye"})}),h&&Object(v.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(v.jsx)(a.a,{children:"code"})})]})}),Object(v.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(v.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:u&&(p?Object(v.jsx)(w,{children:Object(v.jsx)(u,{})}):Object(v.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(v.jsx)(u,{})}))}),Object(v.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:h&&Object(v.jsx)("div",{className:"flex flex-1",children:Object(v.jsx)(o.a,{component:"pre",className:"language-javascript w-full",children:h.default})})})]})]})}k.defaultProps={currentTabIndex:0};var C=k},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 r,i=n(1132),a=(r=i)&&r.__esModule?r:{default:r};t.default=a.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},r=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}}(),i=n(0),a=u(i),c=u(n(22)),s=u(n(553)),l=n(1129),d=u(n(1133));function u(e){return e&&e.__esModule?e:{default:e}}var h=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),r(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,r=a.default.createElement(d.default,{contentDidMount:t,contentDidUpdate:n},a.default.createElement(l.FrameContextProvider,{value:{document:e,window:o}},a.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 i=this.getMountTarget();return[c.default.createPortal(this.props.head,this.getDoc().head),c.default.createPortal(r,i)]}},{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,a.default.createElement("iframe",o({},t,{ref:function(t){e.node=t}}),this.renderFrameContents())}}]),t}(i.Component);h.propTypes={style:s.default.object,head:s.default.node,initialContent:s.default.string,mountTarget:s.default.string,contentDidMount:s.default.func,contentDidUpdate:s.default.func,children:s.default.oneOfType([s.default.element,s.default.arrayOf(s.default.element)])},h.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=h},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}}(),r=n(0),i=(a(r),a(n(553)));function a(e){return e&&e.__esModule?e:{default:e}}var c=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 r.Children.only(this.props.children)}}]),t}(r.Component);c.propTypes={children:i.default.element.isRequired,contentDidMount:i.default.func.isRequired,contentDidUpdate:i.default.func.isRequired},t.default=c},1808:function(e,t,n){"use strict";var o=n(2),r=n(7),i=n(0),a=n(8),c=n(15),s=n(11),l=n(158),d=n(25),u=n(194),h=i.forwardRef((function(e,t){var n=e.classes,s=e.className,h=e.color,p=void 0===h?"primary":h,f=e.component,m=void 0===f?"a":f,b=e.onBlur,j=e.onFocus,y=e.TypographyClasses,x=e.underline,v=void 0===x?"hover":x,O=e.variant,g=void 0===O?"inherit":O,w=Object(r.a)(e,["classes","className","color","component","onBlur","onFocus","TypographyClasses","underline","variant"]),k=Object(l.a)(),C=k.isFocusVisible,D=k.onBlurVisible,_=k.ref,N=i.useState(!1),T=N[0],L=N[1],M=Object(d.a)(t,_);return i.createElement(u.a,Object(o.a)({className:Object(a.a)(n.root,n["underline".concat(Object(c.a)(v))],s,T&&n.focusVisible,"button"===m&&n.button),classes:y,color:p,component:m,onBlur:function(e){T&&(D(),L(!1)),b&&b(e)},onFocus:function(e){C(e)&&L(!0),j&&j(e)},ref:M,variant:g},w))}));t.a=Object(s.a)({root:{},underlineNone:{textDecoration:"none"},underlineHover:{textDecoration:"none","&:hover":{textDecoration:"underline"}},underlineAlways:{textDecoration:"underline"},button:{position:"relative",WebkitTapHighlightColor:"transparent",backgroundColor:"transparent",outline:0,border:0,margin:0,borderRadius:0,padding:0,cursor:"pointer",userSelect:"none",verticalAlign:"middle","-moz-appearance":"none","-webkit-appearance":"none","&::-moz-focus-inner":{borderStyle:"none"},"&$focusVisible":{outline:"auto"}},focusVisible:{}},{name:"MuiLink"})(h)},2020:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return s}));n(0);var o=n(1072),r=n(1808),i=n(194),a=n(1);const c=Object(o.a)((e=>({root:{"& > * + *":{marginLeft:e.spacing(2)}}})));function s(){const e=c(),t=e=>e.preventDefault();return Object(a.jsxs)(i.a,{className:e.root,children:[Object(a.jsx)(r.a,{href:"#",onClick:t,children:"Link"}),Object(a.jsx)(r.a,{href:"#",onClick:t,color:"inherit",children:'color="inherit"'}),Object(a.jsx)(r.a,{href:"#",onClick:t,variant:"body2",children:'variant="body2"'})]})}},2021:function(e,t,n){"use strict";n.r(t),t.default="/* eslint-disable jsx-a11y/anchor-is-valid */\nimport React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Link from '@material-ui/core/Link';\nimport Typography from '@material-ui/core/Typography';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n '& > * + *': {\n marginLeft: theme.spacing(2),\n },\n },\n}));\n\nexport default function Links() {\n const classes = useStyles();\n const preventDefault = (event) => event.preventDefault();\n\n return (\n <Typography className={classes.root}>\n <Link href=\"#\" onClick={preventDefault}>\n Link\n </Link>\n <Link href=\"#\" onClick={preventDefault} color=\"inherit\">\n {'color=\"inherit\"'}\n </Link>\n <Link href=\"#\" onClick={preventDefault} variant=\"body2\">\n {'variant=\"body2\"'}\n </Link>\n </Typography>\n );\n}\n"},2022:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return i}));n(0);var o=n(1808),r=n(1);function i(){return Object(r.jsx)(o.a,{component:"button",variant:"body2",onClick:()=>{console.info("I'm a button.")},children:"Button Link"})}},2023:function(e,t,n){"use strict";n.r(t),t.default='/* eslint-disable jsx-a11y/anchor-is-valid */\nimport React from \'react\';\nimport Link from \'@material-ui/core/Link\';\n\nexport default function ButtonLink() {\n return (\n <Link\n component="button"\n variant="body2"\n onClick={() => {\n console.info("I\'m a button.");\n }}\n >\n Button Link\n </Link>\n );\n}\n'},2586:function(e,t,n){"use strict";n.r(t);var o=n(1130),r=n(1098),i=n(1090),a=n(194),c=n(1072),s=n(1);const l=Object(c.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return l(),Object(s.jsxs)(s.Fragment,{children:[Object(s.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(s.jsxs)(r.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/links",target:"_blank",role:"button",children:[Object(s.jsx)(i.a,{children:"link"}),Object(s.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(s.jsx)(a.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Links"}),Object(s.jsx)(a.a,{className:"description",children:"The Link component allows you to easily customize anchor elements with your theme colors and typography styles."}),Object(s.jsx)(a.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple links"}),Object(s.jsxs)(a.a,{className:"mb-16",component:"div",children:["The Link component is built on top of the ",Object(s.jsx)("a",{href:"/api/typography/",children:"Typography"})," ","component. You can leverage its properties."]}),Object(s.jsx)(a.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2020).default,raw:n(2021)})}),Object(s.jsx)(a.a,{className:"mb-16",component:"div",children:"However, the Link component has different default properties than the Typography component:"}),Object(s.jsxs)("ul",{children:[Object(s.jsxs)("li",{children:[Object(s.jsx)("code",{children:'color="primary"'})," as the link needs to stand out."]}),Object(s.jsxs)("li",{children:[Object(s.jsx)("code",{children:'variant="inherit"'})," as the link will, most of the time, be used as a child of a Typography component."]})]}),Object(s.jsx)(a.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Security"}),Object(s.jsxs)(a.a,{className:"mb-16",component:"div",children:["When you use ",Object(s.jsx)("code",{children:'target="_blank"'})," with Links, it is"," ",Object(s.jsx)("a",{href:"https://developers.google.com/web/tools/lighthouse/audits/noopener",children:"recommended"})," ","to always set ",Object(s.jsx)("code",{children:'rel="noopener"'})," or ",Object(s.jsx)("code",{children:'rel="noreferrer"'})," when linking to third party content."]}),Object(s.jsxs)("ul",{children:[Object(s.jsxs)("li",{children:[Object(s.jsx)("code",{children:'rel="noopener"'})," prevents the new page from being able to access the"," ",Object(s.jsx)("code",{children:"window.opener"})," property and ensures it runs in a separate process. Without this, the target page can potentially redirect your page to a malicious URL."]}),Object(s.jsxs)("li",{children:[Object(s.jsx)("code",{children:'rel="noreferrer"'})," has the same effect, but also prevents the ",Object(s.jsx)("em",{children:"Referer"})," ","header from being sent to the new page. \u26a0\ufe0f Removing the referrer header will affect analytics."]})]}),Object(s.jsx)(a.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Third-party routing library"}),Object(s.jsxs)(a.a,{className:"mb-16",component:"div",children:["One common use case is to perform navigation on the client only, without an HTTP round-trip to the server. The ",Object(s.jsx)("code",{children:"Link"})," component provides a property to handle this use case:"," ",Object(s.jsx)("code",{children:"component"}),"."]}),Object(s.jsxs)(a.a,{className:"mb-16",component:"div",children:["Here is an ",Object(s.jsx)("a",{href:"/guides/composition/#link",children:"integration example with react-router"}),"."]}),Object(s.jsx)(a.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(s.jsxs)(a.a,{className:"mb-16",component:"div",children:["(WAI-ARIA:"," ",Object(s.jsx)("a",{href:"https://www.w3.org/TR/wai-aria-practices/#link",children:"https://www.w3.org/TR/wai-aria-practices/#link"}),")"]}),Object(s.jsxs)("ul",{children:[Object(s.jsxs)("li",{children:['When providing the content for the link, avoid generic descriptions like "click here" or "go to". Instead, use'," ",Object(s.jsx)("a",{href:"https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text",children:"specific descriptions"}),"."]}),Object(s.jsx)("li",{children:"For the best user experience, links should stand out from the text on the page."}),Object(s.jsxs)("li",{children:["If a link doesn't have a meaningful href,"," ",Object(s.jsxs)("a",{href:"https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md",children:["it should be rendered using a ",Object(s.jsx)("code",{children:"<button>"})," element"]}),"."]})]}),Object(s.jsx)(a.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2022).default,raw:n(2023)})})]})}}}]);
Mini Shell