Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/78.613a2ad2.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[78],{1130:function(e,n,a){"use strict";a.d(n,"a",(function(){return N}));var o=a(118),t=a(1100),c=a(1109),i=a(1090),r=a(1117),s=a(1119),l=a(5),d=a(0),p=a(1024),m=a(551),h=a(1087),u=a(1099),b=a(11),x=a(370),j=a(371),g=a(1131),y=a.n(g),f=a(1);const O=Object(p.a)({productionPrefix:"iframe-"});class A 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(x.a)({...Object(m.a)(),plugins:[...Object(m.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(f.jsxs)(f.Fragment,{children:[Object(f.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(f.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:n,theme:a}=this.props;return Object(f.jsx)(y.a,{head:this.renderHead(),ref:this.handleRef,className:Object(l.a)(n.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(f.jsx)(h.b,{jss:this.state.jss,generateClassName:O,sheetsManager:this.state.sheetsManager,children:Object(f.jsx)(u.a,{theme:a,children:Object(d.cloneElement)(e,{container:this.state.container})})}):null})}}var v=Object(b.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(A);function S(e){const[n,a]=Object(d.useState)(e.currentTabIndex),{component:p,raw:m,iframe:h,className:u}=e;return Object(f.jsxs)(c.a,{className:Object(l.a)(u,"shadow"),children:[Object(f.jsx)(t.a,{position:"static",color:"default",className:"shadow-0",children:Object(f.jsxs)(s.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){a(n)},children:[p&&Object(f.jsx)(r.a,{classes:{root:"min-w-64"},icon:Object(f.jsx)(i.a,{children:"remove_red_eye"})}),m&&Object(f.jsx)(r.a,{classes:{root:"min-w-64"},icon:Object(f.jsx)(i.a,{children:"code"})})]})}),Object(f.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(f.jsx)("div",{className:0===n?"flex flex-1 max-w-full":"hidden",children:p&&(h?Object(f.jsx)(v,{children:Object(f.jsx)(p,{})}):Object(f.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(f.jsx)(p,{})}))}),Object(f.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:m&&Object(f.jsx)("div",{className:"flex flex-1",children:Object(f.jsx)(o.a,{component:"pre",className:"language-javascript w-full",children:m.default})})})]})]})}S.defaultProps={currentTabIndex:0};var N=S},1662:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return m}));a(0);var o=a(1072),t=a(1455),c=a(1383),i=a(1384),r=a(194),s=a(1173),l=a.n(s),d=a(1);const p=Object(o.a)((e=>({root:{width:"100%"},heading:{fontSize:e.typography.pxToRem(15),fontWeight:e.typography.fontWeightRegular}})));function m(){const e=p();return Object(d.jsxs)("div",{className:e.root,children:[Object(d.jsxs)(t.a,{children:[Object(d.jsx)(c.a,{expandIcon:Object(d.jsx)(l.a,{}),"aria-controls":"panel1a-content",id:"panel1a-header",children:Object(d.jsx)(r.a,{className:e.heading,children:"Accordion 1"})}),Object(d.jsx)(i.a,{children:Object(d.jsx)(r.a,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),Object(d.jsxs)(t.a,{children:[Object(d.jsx)(c.a,{expandIcon:Object(d.jsx)(l.a,{}),"aria-controls":"panel2a-content",id:"panel2a-header",children:Object(d.jsx)(r.a,{className:e.heading,children:"Accordion 2"})}),Object(d.jsx)(i.a,{children:Object(d.jsx)(r.a,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),Object(d.jsx)(t.a,{disabled:!0,children:Object(d.jsx)(c.a,{expandIcon:Object(d.jsx)(l.a,{}),"aria-controls":"panel3a-content",id:"panel3a-header",children:Object(d.jsx)(r.a,{className:e.heading,children:"Disabled Accordion"})})})]})}},1663:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n heading: {\n fontSize: theme.typography.pxToRem(15),\n fontWeight: theme.typography.fontWeightRegular,\n },\n}));\n\nexport default function SimpleAccordion() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Accordion>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls=\"panel1a-content\"\n id=\"panel1a-header\"\n >\n <Typography className={classes.heading}>Accordion 1</Typography>\n </AccordionSummary>\n <AccordionDetails>\n <Typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,\n sit amet blandit leo lobortis eget.\n </Typography>\n </AccordionDetails>\n </Accordion>\n <Accordion>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls=\"panel2a-content\"\n id=\"panel2a-header\"\n >\n <Typography className={classes.heading}>Accordion 2</Typography>\n </AccordionSummary>\n <AccordionDetails>\n <Typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,\n sit amet blandit leo lobortis eget.\n </Typography>\n </AccordionDetails>\n </Accordion>\n <Accordion disabled>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls=\"panel3a-content\"\n id=\"panel3a-header\"\n >\n <Typography className={classes.heading}>Disabled Accordion</Typography>\n </AccordionSummary>\n </Accordion>\n </div>\n );\n}\n"},1664:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return u}));var o=a(0),t=a.n(o),c=a(1072),i=a(1455),r=a(1384),s=a(1383),l=a(194),d=a(1173),p=a.n(d),m=a(1);const h=Object(c.a)((e=>({root:{width:"100%"},heading:{fontSize:e.typography.pxToRem(15),flexBasis:"33.33%",flexShrink:0},secondaryHeading:{fontSize:e.typography.pxToRem(15),color:e.palette.text.secondary}})));function u(){const e=h(),[n,a]=t.a.useState(!1),o=e=>(n,o)=>{a(!!o&&e)};return Object(m.jsxs)("div",{className:e.root,children:[Object(m.jsxs)(i.a,{expanded:"panel1"===n,onChange:o("panel1"),children:[Object(m.jsxs)(s.a,{expandIcon:Object(m.jsx)(p.a,{}),"aria-controls":"panel1bh-content",id:"panel1bh-header",children:[Object(m.jsx)(l.a,{className:e.heading,children:"General settings"}),Object(m.jsx)(l.a,{className:e.secondaryHeading,children:"I am an accordion"})]}),Object(m.jsx)(r.a,{children:Object(m.jsx)(l.a,{children:"Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam."})})]}),Object(m.jsxs)(i.a,{expanded:"panel2"===n,onChange:o("panel2"),children:[Object(m.jsxs)(s.a,{expandIcon:Object(m.jsx)(p.a,{}),"aria-controls":"panel2bh-content",id:"panel2bh-header",children:[Object(m.jsx)(l.a,{className:e.heading,children:"Users"}),Object(m.jsx)(l.a,{className:e.secondaryHeading,children:"You are currently not an owner"})]}),Object(m.jsx)(r.a,{children:Object(m.jsx)(l.a,{children:"Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar diam eros in elit. Pellentesque convallis laoreet laoreet."})})]}),Object(m.jsxs)(i.a,{expanded:"panel3"===n,onChange:o("panel3"),children:[Object(m.jsxs)(s.a,{expandIcon:Object(m.jsx)(p.a,{}),"aria-controls":"panel3bh-content",id:"panel3bh-header",children:[Object(m.jsx)(l.a,{className:e.heading,children:"Advanced settings"}),Object(m.jsx)(l.a,{className:e.secondaryHeading,children:"Filtering has been entirely disabled for whole web server"})]}),Object(m.jsx)(r.a,{children:Object(m.jsx)(l.a,{children:"Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, vitae egestas augue. Duis vel est augue."})})]}),Object(m.jsxs)(i.a,{expanded:"panel4"===n,onChange:o("panel4"),children:[Object(m.jsx)(s.a,{expandIcon:Object(m.jsx)(p.a,{}),"aria-controls":"panel4bh-content",id:"panel4bh-header",children:Object(m.jsx)(l.a,{className:e.heading,children:"Personal data"})}),Object(m.jsx)(r.a,{children:Object(m.jsx)(l.a,{children:"Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, vitae egestas augue. Duis vel est augue."})})]})]})}},1665:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n heading: {\n fontSize: theme.typography.pxToRem(15),\n flexBasis: '33.33%',\n flexShrink: 0,\n },\n secondaryHeading: {\n fontSize: theme.typography.pxToRem(15),\n color: theme.palette.text.secondary,\n },\n}));\n\nexport default function ControlledAccordions() {\n const classes = useStyles();\n const [expanded, setExpanded] = React.useState(false);\n\n const handleChange = (panel) => (event, isExpanded) => {\n setExpanded(isExpanded ? panel : false);\n };\n\n return (\n <div className={classes.root}>\n <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls=\"panel1bh-content\"\n id=\"panel1bh-header\"\n >\n <Typography className={classes.heading}>General settings</Typography>\n <Typography className={classes.secondaryHeading}>I am an accordion</Typography>\n </AccordionSummary>\n <AccordionDetails>\n <Typography>\n Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget\n maximus est, id dignissim quam.\n </Typography>\n </AccordionDetails>\n </Accordion>\n <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls=\"panel2bh-content\"\n id=\"panel2bh-header\"\n >\n <Typography className={classes.heading}>Users</Typography>\n <Typography className={classes.secondaryHeading}>\n You are currently not an owner\n </Typography>\n </AccordionSummary>\n <AccordionDetails>\n <Typography>\n Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar\n diam eros in elit. Pellentesque convallis laoreet laoreet.\n </Typography>\n </AccordionDetails>\n </Accordion>\n <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls=\"panel3bh-content\"\n id=\"panel3bh-header\"\n >\n <Typography className={classes.heading}>Advanced settings</Typography>\n <Typography className={classes.secondaryHeading}>\n Filtering has been entirely disabled for whole web server\n </Typography>\n </AccordionSummary>\n <AccordionDetails>\n <Typography>\n Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros,\n vitae egestas augue. Duis vel est augue.\n </Typography>\n </AccordionDetails>\n </Accordion>\n <Accordion expanded={expanded === 'panel4'} onChange={handleChange('panel4')}>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls=\"panel4bh-content\"\n id=\"panel4bh-header\"\n >\n <Typography className={classes.heading}>Personal data</Typography>\n </AccordionSummary>\n <AccordionDetails>\n <Typography>\n Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros,\n vitae egestas augue. Duis vel est augue.\n </Typography>\n </AccordionDetails>\n </Accordion>\n </div>\n );\n}\n"},1666:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return u}));var o=a(0),t=a.n(o),c=a(11),i=a(1455),r=a(1383),s=a(1384),l=a(194),d=a(1);const p=Object(c.a)({root:{border:"1px solid rgba(0, 0, 0, .125)",boxShadow:"none","&:not(:last-child)":{borderBottom:0},"&:before":{display:"none"},"&$expanded":{margin:"auto"}},expanded:{}})(i.a),m=Object(c.a)({root:{backgroundColor:"rgba(0, 0, 0, .03)",borderBottom:"1px solid rgba(0, 0, 0, .125)",marginBottom:-1,minHeight:56,"&$expanded":{minHeight:56}},content:{"&$expanded":{margin:"12px 0"}},expanded:{}})(r.a),h=Object(c.a)((e=>({root:{padding:e.spacing(2)}})))(s.a);function u(){const[e,n]=t.a.useState("panel1"),a=e=>(a,o)=>{n(!!o&&e)};return Object(d.jsxs)("div",{children:[Object(d.jsxs)(p,{square:!0,expanded:"panel1"===e,onChange:a("panel1"),children:[Object(d.jsx)(m,{"aria-controls":"panel1d-content",id:"panel1d-header",children:Object(d.jsx)(l.a,{children:"Collapsible Group Item #1"})}),Object(d.jsx)(h,{children:Object(d.jsx)(l.a,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),Object(d.jsxs)(p,{square:!0,expanded:"panel2"===e,onChange:a("panel2"),children:[Object(d.jsx)(m,{"aria-controls":"panel2d-content",id:"panel2d-header",children:Object(d.jsx)(l.a,{children:"Collapsible Group Item #2"})}),Object(d.jsx)(h,{children:Object(d.jsx)(l.a,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),Object(d.jsxs)(p,{square:!0,expanded:"panel3"===e,onChange:a("panel3"),children:[Object(d.jsx)(m,{"aria-controls":"panel3d-content",id:"panel3d-header",children:Object(d.jsx)(l.a,{children:"Collapsible Group Item #3"})}),Object(d.jsx)(h,{children:Object(d.jsx)(l.a,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})}},1667:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport MuiAccordion from '@material-ui/core/Accordion';\nimport MuiAccordionSummary from '@material-ui/core/AccordionSummary';\nimport MuiAccordionDetails from '@material-ui/core/AccordionDetails';\nimport Typography from '@material-ui/core/Typography';\n\nconst Accordion = withStyles({\n root: {\n border: '1px solid rgba(0, 0, 0, .125)',\n boxShadow: 'none',\n '&:not(:last-child)': {\n borderBottom: 0,\n },\n '&:before': {\n display: 'none',\n },\n '&$expanded': {\n margin: 'auto',\n },\n },\n expanded: {},\n})(MuiAccordion);\n\nconst AccordionSummary = withStyles({\n root: {\n backgroundColor: 'rgba(0, 0, 0, .03)',\n borderBottom: '1px solid rgba(0, 0, 0, .125)',\n marginBottom: -1,\n minHeight: 56,\n '&$expanded': {\n minHeight: 56,\n },\n },\n content: {\n '&$expanded': {\n margin: '12px 0',\n },\n },\n expanded: {},\n})(MuiAccordionSummary);\n\nconst AccordionDetails = withStyles((theme) => ({\n root: {\n padding: theme.spacing(2),\n },\n}))(MuiAccordionDetails);\n\nexport default function CustomizedAccordions() {\n const [expanded, setExpanded] = React.useState('panel1');\n\n const handleChange = (panel) => (event, newExpanded) => {\n setExpanded(newExpanded ? panel : false);\n };\n\n return (\n <div>\n <Accordion square expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>\n <AccordionSummary aria-controls=\"panel1d-content\" id=\"panel1d-header\">\n <Typography>Collapsible Group Item #1</Typography>\n </AccordionSummary>\n <AccordionDetails>\n <Typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,\n sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing\n elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.\n </Typography>\n </AccordionDetails>\n </Accordion>\n <Accordion square expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>\n <AccordionSummary aria-controls=\"panel2d-content\" id=\"panel2d-header\">\n <Typography>Collapsible Group Item #2</Typography>\n </AccordionSummary>\n <AccordionDetails>\n <Typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,\n sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing\n elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.\n </Typography>\n </AccordionDetails>\n </Accordion>\n <Accordion square expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>\n <AccordionSummary aria-controls=\"panel3d-content\" id=\"panel3d-header\">\n <Typography>Collapsible Group Item #3</Typography>\n </AccordionSummary>\n <AccordionDetails>\n <Typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,\n sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing\n elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.\n </Typography>\n </AccordionDetails>\n </Accordion>\n </div>\n );\n}\n"},1668:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return u}));a(0);var o=a(1072),t=a(1455),c=a(1383),i=a(1384),r=a(1165),s=a(1094),l=a(194),d=a(1173),p=a.n(d),m=a(1);const h=Object(o.a)({root:{width:"100%"}});function u(){const e=h();return Object(m.jsxs)("div",{className:e.root,children:[Object(m.jsxs)(t.a,{children:[Object(m.jsx)(c.a,{expandIcon:Object(m.jsx)(p.a,{}),"aria-label":"Expand","aria-controls":"additional-actions1-content",id:"additional-actions1-header",children:Object(m.jsx)(s.a,{"aria-label":"Acknowledge",onClick:e=>e.stopPropagation(),onFocus:e=>e.stopPropagation(),control:Object(m.jsx)(r.a,{}),label:"I acknowledge that I should stop the click event propagation"})}),Object(m.jsx)(i.a,{children:Object(m.jsx)(l.a,{color:"textSecondary",children:"The click event of the nested action will propagate up and expand the accordion unless you explicitly stop it."})})]}),Object(m.jsxs)(t.a,{children:[Object(m.jsx)(c.a,{expandIcon:Object(m.jsx)(p.a,{}),"aria-label":"Expand","aria-controls":"additional-actions2-content",id:"additional-actions2-header",children:Object(m.jsx)(s.a,{"aria-label":"Acknowledge",onClick:e=>e.stopPropagation(),onFocus:e=>e.stopPropagation(),control:Object(m.jsx)(r.a,{}),label:"I acknowledge that I should stop the focus event propagation"})}),Object(m.jsx)(i.a,{children:Object(m.jsx)(l.a,{color:"textSecondary",children:"The focus event of the nested action will propagate up and also focus the accordion unless you explicitly stop it."})})]}),Object(m.jsxs)(t.a,{children:[Object(m.jsx)(c.a,{expandIcon:Object(m.jsx)(p.a,{}),"aria-label":"Expand","aria-controls":"additional-actions3-content",id:"additional-actions3-header",children:Object(m.jsx)(s.a,{"aria-label":"Acknowledge",onClick:e=>e.stopPropagation(),onFocus:e=>e.stopPropagation(),control:Object(m.jsx)(r.a,{}),label:"I acknowledge that I should provide an aria-label on each action that I add"})}),Object(m.jsx)(i.a,{children:Object(m.jsx)(l.a,{color:"textSecondary",children:"If you forget to put an aria-label on the nested action, the label of the action will also be included in the label of the parent button that controls the accordion expansion."})})]})]})}},1669:function(e,n,a){"use strict";a.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport Accordion from \'@material-ui/core/Accordion\';\nimport AccordionSummary from \'@material-ui/core/AccordionSummary\';\nimport AccordionDetails from \'@material-ui/core/AccordionDetails\';\nimport Checkbox from \'@material-ui/core/Checkbox\';\nimport FormControlLabel from \'@material-ui/core/FormControlLabel\';\nimport Typography from \'@material-ui/core/Typography\';\nimport ExpandMoreIcon from \'@material-ui/icons/ExpandMore\';\n\nconst useStyles = makeStyles({\n root: {\n width: \'100%\',\n },\n});\n\nexport default function ActionsInAccordionSummary() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Accordion>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-label="Expand"\n aria-controls="additional-actions1-content"\n id="additional-actions1-header"\n >\n <FormControlLabel\n aria-label="Acknowledge"\n onClick={(event) => event.stopPropagation()}\n onFocus={(event) => event.stopPropagation()}\n control={<Checkbox />}\n label="I acknowledge that I should stop the click event propagation"\n />\n </AccordionSummary>\n <AccordionDetails>\n <Typography color="textSecondary">\n The click event of the nested action will propagate up and expand the accordion unless\n you explicitly stop it.\n </Typography>\n </AccordionDetails>\n </Accordion>\n <Accordion>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-label="Expand"\n aria-controls="additional-actions2-content"\n id="additional-actions2-header"\n >\n <FormControlLabel\n aria-label="Acknowledge"\n onClick={(event) => event.stopPropagation()}\n onFocus={(event) => event.stopPropagation()}\n control={<Checkbox />}\n label="I acknowledge that I should stop the focus event propagation"\n />\n </AccordionSummary>\n <AccordionDetails>\n <Typography color="textSecondary">\n The focus event of the nested action will propagate up and also focus the accordion\n unless you explicitly stop it.\n </Typography>\n </AccordionDetails>\n </Accordion>\n <Accordion>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-label="Expand"\n aria-controls="additional-actions3-content"\n id="additional-actions3-header"\n >\n <FormControlLabel\n aria-label="Acknowledge"\n onClick={(event) => event.stopPropagation()}\n onFocus={(event) => event.stopPropagation()}\n control={<Checkbox />}\n label="I acknowledge that I should provide an aria-label on each action that I add"\n />\n </AccordionSummary>\n <AccordionDetails>\n <Typography color="textSecondary">\n If you forget to put an aria-label on the nested action, the label of the action will\n also be included in the label of the parent button that controls the accordion\n expansion.\n </Typography>\n </AccordionDetails>\n </Accordion>\n </div>\n );\n}\n'},1670:function(e,n,a){"use strict";a.r(n),a.d(n,"default",(function(){return j}));a(0);var o=a(1072),t=a(5),c=a(1455),i=a(1384),r=a(1383),s=a(2555),l=a(194),d=a(1173),p=a.n(d),m=a(1192),h=a(1098),u=a(1108),b=a(1);const x=Object(o.a)((e=>({root:{width:"100%"},heading:{fontSize:e.typography.pxToRem(15)},secondaryHeading:{fontSize:e.typography.pxToRem(15),color:e.palette.text.secondary},icon:{verticalAlign:"bottom",height:20,width:20},details:{alignItems:"center"},column:{flexBasis:"33.33%"},helper:{borderLeft:"2px solid ".concat(e.palette.divider),padding:e.spacing(1,2)},link:{color:e.palette.primary.main,textDecoration:"none","&:hover":{textDecoration:"underline"}}})));function j(){const e=x();return Object(b.jsx)("div",{className:e.root,children:Object(b.jsxs)(c.a,{defaultExpanded:!0,children:[Object(b.jsxs)(r.a,{expandIcon:Object(b.jsx)(p.a,{}),"aria-controls":"panel1c-content",id:"panel1c-header",children:[Object(b.jsx)("div",{className:e.column,children:Object(b.jsx)(l.a,{className:e.heading,children:"Location"})}),Object(b.jsx)("div",{className:e.column,children:Object(b.jsx)(l.a,{className:e.secondaryHeading,children:"Select trip destination"})})]}),Object(b.jsxs)(i.a,{className:e.details,children:[Object(b.jsx)("div",{className:e.column}),Object(b.jsx)("div",{className:e.column,children:Object(b.jsx)(m.a,{label:"Barbados",onDelete:()=>{}})}),Object(b.jsx)("div",{className:Object(t.a)(e.column,e.helper),children:Object(b.jsxs)(l.a,{variant:"caption",children:["Select your destination of choice",Object(b.jsx)("br",{}),Object(b.jsx)("a",{href:"#secondary-heading-and-columns",className:e.link,children:"Learn more"})]})})]}),Object(b.jsx)(u.a,{}),Object(b.jsxs)(s.a,{children:[Object(b.jsx)(h.a,{size:"small",children:"Cancel"}),Object(b.jsx)(h.a,{size:"small",color:"primary",children:"Save"})]})]})})}},1671:function(e,n,a){"use strict";a.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport clsx from 'clsx';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport AccordionActions from '@material-ui/core/AccordionActions';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Chip from '@material-ui/core/Chip';\nimport Button from '@material-ui/core/Button';\nimport Divider from '@material-ui/core/Divider';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n heading: {\n fontSize: theme.typography.pxToRem(15),\n },\n secondaryHeading: {\n fontSize: theme.typography.pxToRem(15),\n color: theme.palette.text.secondary,\n },\n icon: {\n verticalAlign: 'bottom',\n height: 20,\n width: 20,\n },\n details: {\n alignItems: 'center',\n },\n column: {\n flexBasis: '33.33%',\n },\n helper: {\n borderLeft: `2px solid ${theme.palette.divider}`,\n padding: theme.spacing(1, 2),\n },\n link: {\n color: theme.palette.primary.main,\n textDecoration: 'none',\n '&:hover': {\n textDecoration: 'underline',\n },\n },\n}));\n\nexport default function DetailedAccordion() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Accordion defaultExpanded>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls=\"panel1c-content\"\n id=\"panel1c-header\"\n >\n <div className={classes.column}>\n <Typography className={classes.heading}>Location</Typography>\n </div>\n <div className={classes.column}>\n <Typography className={classes.secondaryHeading}>Select trip destination</Typography>\n </div>\n </AccordionSummary>\n <AccordionDetails className={classes.details}>\n <div className={classes.column} />\n <div className={classes.column}>\n <Chip label=\"Barbados\" onDelete={() => {}} />\n </div>\n <div className={clsx(classes.column, classes.helper)}>\n <Typography variant=\"caption\">\n Select your destination of choice\n <br />\n <a href=\"#secondary-heading-and-columns\" className={classes.link}>\n Learn more\n </a>\n </Typography>\n </div>\n </AccordionDetails>\n <Divider />\n <AccordionActions>\n <Button size=\"small\">Cancel</Button>\n <Button size=\"small\" color=\"primary\">\n Save\n </Button>\n </AccordionActions>\n </Accordion>\n </div>\n );\n}\n"},2554:function(e,n,a){"use strict";a.r(n);var o=a(1130),t=a(118),c=a(1098),i=a(1090),r=a(194),s=a(1072),l=a(1);const d=Object(s.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.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)(c.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/accordion",target:"_blank",role:"button",children:[Object(l.jsx)(i.a,{children:"link"}),Object(l.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(l.jsx)(r.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Accordion"}),Object(l.jsx)(r.a,{className:"description",children:"Accordions contain creation flows and allow lightweight editing of an element."}),Object(l.jsxs)(r.a,{className:"mb-16",component:"div",children:[Object(l.jsx)("a",{href:"https://material.io/archive/guidelines/components/expansion-panels.html",children:"An accordion"})," ","is a lightweight container that may either stand alone or be connected to a larger surface, such as a card."]}),Object(l.jsx)("blockquote",{children:Object(l.jsxs)(r.a,{className:"mb-16",component:"div",children:[Object(l.jsx)("strong",{children:"Note:"})," Accordions are no longer documented in the"," ",Object(l.jsx)("a",{href:"https://material.io/",children:"Material Design guidelines"}),', but Material-UI will continue to support them. It was formerly known as the "expansion panel".']})}),Object(l.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple accordion"}),Object(l.jsx)(r.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:a(1662).default,raw:a(1663)})}),Object(l.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Controlled accordion"}),Object(l.jsxs)(r.a,{className:"mb-16",component:"div",children:["Extend the default behavior to create an accordion with the ",Object(l.jsx)("code",{children:"Accordion"})," ","component."]}),Object(l.jsx)(r.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:a(1664).default,raw:a(1665)})}),Object(l.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customized accordions"}),Object(l.jsxs)(r.a,{className:"mb-16",component:"div",children:["Here is an example of customizing the component. You can learn more about this in the",Object(l.jsx)("a",{href:"/customization/components/",children:"overrides documentation page"}),"."]}),Object(l.jsx)(r.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:a(1666).default,raw:a(1667)})}),Object(l.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Additional actions"}),Object(l.jsxs)(r.a,{className:"mb-16",component:"div",children:["In order to put an action such as a ",Object(l.jsx)("code",{children:"Checkbox"})," or a button inside of the"," ",Object(l.jsx)("code",{children:"AccordionSummary"}),", you need to stop the propagation of the focus and click events to prevent the accordion from expanding/collapsing when using the action. You should also provide an ",Object(l.jsx)("code",{children:"aria-label"})," for the action, otherwise the label of the nested action will be included in the label of the parent button that controls the accordion expansion."]}),Object(l.jsx)(r.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:a(1668).default,raw:a(1669)})}),Object(l.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Performance"}),Object(l.jsxs)(r.a,{className:"mb-16",component:"div",children:["The content of Accordions is mounted by default even if the accordion is not expanded. This default behavior has server-side rendering and SEO in mind. If you render expensive component trees inside your accordion details or simply render many accordions it might be a good idea to change this default behavior by enabling the",Object(l.jsx)("code",{children:"unmountOnExit"})," in ",Object(l.jsx)("code",{children:"TransitionProps"}),":"]}),Object(l.jsx)(t.a,{component:"pre",className:"language-jsx",children:" \n<Accordion TransitionProps={{ unmountOnExit: true }} />\n"}),Object(l.jsx)(r.a,{className:"mb-16",component:"div",children:"As with any performance optimization this is not a silver bullet. Be sure to identify bottlenecks first and then try out these optimization strategies."}),Object(l.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Secondary heading and columns"}),Object(l.jsx)(r.a,{className:"mb-16",component:"div",children:"Multiple columns can be used to structure the content, and a helper text may be added to the accordion to assist the user."}),Object(l.jsx)(r.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:a(1670).default,raw:a(1671)})}),Object(l.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(l.jsxs)(r.a,{className:"mb-16",component:"div",children:["(WAI-ARIA:"," ",Object(l.jsx)("a",{href:"https://www.w3.org/TR/wai-aria-practices/#accordion",children:"https://www.w3.org/TR/wai-aria-practices/#accordion"}),")"]}),Object(l.jsxs)(r.a,{className:"mb-16",component:"div",children:["For optimal accessibility we recommend setting ",Object(l.jsx)("code",{children:"id"})," and"," ",Object(l.jsx)("code",{children:"aria-controls"})," on the",Object(l.jsx)("code",{children:"AccordionSummary"}),". The ",Object(l.jsx)("code",{children:"Accordion"})," will derive the necessary"," ",Object(l.jsx)("code",{children:"aria-labelledby"}),"and ",Object(l.jsx)("code",{children:"id"})," for the content region of the accordion."]})]})}}}]);
Mini Shell