Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/30.eeadcd81.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[30],{1046:function(e,n,t){"use strict";function o(e,n,t,o,a){return null}t.d(n,"a",(function(){return o}))},1047:function(e,n,t){"use strict";t.r(n);var o=t(15);t.d(n,"capitalize",(function(){return o.a}));var a=t(78);t.d(n,"createChainedFunction",(function(){return a.a}));var r=t(85);t.d(n,"createSvgIcon",(function(){return r.a}));var i=t(97);t.d(n,"debounce",(function(){return i.a}));var c=t(130);t.d(n,"deprecatedPropType",(function(){return c.a}));var s=t(159);t.d(n,"isMuiElement",(function(){return s.a}));var l=t(47);t.d(n,"ownerDocument",(function(){return l.a}));var u=t(160);t.d(n,"ownerWindow",(function(){return u.a}));var m=t(1134);t.d(n,"requirePropFactory",(function(){return m.a}));var d=t(87);t.d(n,"setRef",(function(){return d.a}));var p=t(1046);t.d(n,"unsupportedProp",(function(){return p.a}));var h=t(104);t.d(n,"useControlled",(function(){return h.a}));var f=t(38);t.d(n,"useEventCallback",(function(){return f.a}));var j=t(25);t.d(n,"useForkRef",(function(){return j.a}));var b=t(224);t.d(n,"unstable_useId",(function(){return b.a}));var x=t(158);t.d(n,"useIsFocusVisible",(function(){return x.a}))},1127:function(e,n,t){var o=t(373).default;function a(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,t=new WeakMap;return(a=function(e){return e?t:n})(e)}e.exports=function(e,n){if(!n&&e&&e.__esModule)return e;if(null===e||"object"!=o(e)&&"function"!=typeof e)return{default:e};var t=a(n);if(t&&t.has(e))return t.get(e);var r={__proto__:null},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var c in e)if("default"!==c&&Object.prototype.hasOwnProperty.call(e,c)){var s=i?Object.getOwnPropertyDescriptor(e,c):null;s&&(s.get||s.set)?Object.defineProperty(r,c,s):r[c]=e[c]}return r.default=e,t&&t.set(e,r),r},e.exports.__esModule=!0,e.exports.default=e.exports},1128:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return o.createSvgIcon}});var o=t(1047)},1130:function(e,n,t){"use strict";t.d(n,"a",(function(){return C}));var o=t(118),a=t(1100),r=t(1109),i=t(1090),c=t(1117),s=t(1119),l=t(5),u=t(0),m=t(1024),d=t(551),p=t(1087),h=t(1099),f=t(11),j=t(370),b=t(371),x=t(1131),v=t.n(x),O=t(1);const M=Object(m.a)({productionPrefix:"iframe-"});class y extends u.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(j.a)({...Object(d.a)(),plugins:[...Object(d.a)().plugins,Object(b.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:n,theme:t}=this.props;return Object(O.jsx)(v.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(O.jsx)(p.b,{jss:this.state.jss,generateClassName:M,sheetsManager:this.state.sheetsManager,children:Object(O.jsx)(h.a,{theme:t,children:Object(u.cloneElement)(e,{container:this.state.container})})}):null})}}var I=Object(f.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(y);function g(e){const[n,t]=Object(u.useState)(e.currentTabIndex),{component:m,raw:d,iframe:p,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)(s.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){t(n)},children:[m&&Object(O.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(i.a,{children:"remove_red_eye"})}),d&&Object(O.jsx)(c.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===n?"flex flex-1 max-w-full":"hidden",children:m&&(p?Object(O.jsx)(I,{children:Object(O.jsx)(m,{})}):Object(O.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(O.jsx)(m,{})}))}),Object(O.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:d&&Object(O.jsx)("div",{className:"flex flex-1",children:Object(O.jsx)(o.a,{component:"pre",className:"language-javascript w-full",children:d.default})})})]})]})}g.defaultProps={currentTabIndex:0};var C=g},1134:function(e,n,t){"use strict";function o(e){return function(){return null}}t.d(n,"a",(function(){return o}))},1176:function(e,n,t){"use strict";var o=t(552),a=t(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=a(t(0)),i=(0,o(t(1128)).default)(r.createElement("path",{d:"M19 3H4.99c-1.11 0-1.98.9-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10zm-3-5h-2V7h-4v3H8l4 4 4-4z"}),"MoveToInbox");n.default=i},1234:function(e,n,t){"use strict";var o=t(552),a=t(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=a(t(0)),i=(0,o(t(1128)).default)(r.createElement("path",{d:"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"MoreVert");n.default=i},1250:function(e,n,t){"use strict";var o=t(552),a=t(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=a(t(0)),i=(0,o(t(1128)).default)(r.createElement("path",{d:"M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13L3.74 7.84 12 3l8.26 4.84L12 13z"}),"Drafts");n.default=i},1299:function(e,n,t){"use strict";var o=t(552),a=t(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=a(t(0)),i=(0,o(t(1128)).default)(r.createElement("path",{d:"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"}),"Send");n.default=i},130:function(e,n,t){"use strict";function o(e,n){return function(){return null}}t.d(n,"a",(function(){return o}))},2052:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return l}));var o=t(0),a=t.n(o),r=t(1098),i=t(536),c=t(1092),s=t(1);function l(){const[e,n]=a.a.useState(null),t=()=>{n(null)};return Object(s.jsxs)("div",{children:[Object(s.jsx)(r.a,{"aria-controls":"simple-menu","aria-haspopup":"true",onClick:e=>{n(e.currentTarget)},children:"Open Menu"}),Object(s.jsxs)(i.a,{id:"simple-menu",anchorEl:e,keepMounted:!0,open:Boolean(e),onClose:t,children:[Object(s.jsx)(c.a,{onClick:t,children:"Profile"}),Object(s.jsx)(c.a,{onClick:t,children:"My account"}),Object(s.jsx)(c.a,{onClick:t,children:"Logout"})]})]})}},2053:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\n\nexport default function SimpleMenu() {\n const [anchorEl, setAnchorEl] = React.useState(null);\n\n const handleClick = (event) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n return (\n <div>\n <Button aria-controls=\"simple-menu\" aria-haspopup=\"true\" onClick={handleClick}>\n Open Menu\n </Button>\n <Menu\n id=\"simple-menu\"\n anchorEl={anchorEl}\n keepMounted\n open={Boolean(anchorEl)}\n onClose={handleClose}\n >\n <MenuItem onClick={handleClose}>Profile</MenuItem>\n <MenuItem onClick={handleClose}>My account</MenuItem>\n <MenuItem onClick={handleClose}>Logout</MenuItem>\n </Menu>\n </div>\n );\n}\n"},2054:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return h}));var o=t(0),a=t.n(o),r=t(1072),i=t(1033),c=t(1034),s=t(1103),l=t(1092),u=t(536),m=t(1);const d=Object(r.a)((e=>({root:{backgroundColor:e.palette.background.paper}}))),p=["Show some love to Material-UI","Show all notification content","Hide sensitive notification content","Hide all notification content"];function h(){const e=d(),[n,t]=a.a.useState(null),[o,r]=a.a.useState(1);return Object(m.jsxs)("div",{className:e.root,children:[Object(m.jsx)(i.a,{component:"nav","aria-label":"Device settings",children:Object(m.jsx)(c.a,{button:!0,"aria-haspopup":"true","aria-controls":"lock-menu","aria-label":"when device is locked",onClick:e=>{t(e.currentTarget)},children:Object(m.jsx)(s.a,{primary:"When device is locked",secondary:p[o]})})}),Object(m.jsx)(u.a,{id:"lock-menu",anchorEl:n,keepMounted:!0,open:Boolean(n),onClose:()=>{t(null)},children:p.map(((e,n)=>Object(m.jsx)(l.a,{disabled:0===n,selected:n===o,onClick:e=>((e,n)=>{r(n),t(null)})(0,n),children:e},e)))})]})}},2055:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Menu from '@material-ui/core/Menu';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nconst options = [\n 'Show some love to Material-UI',\n 'Show all notification content',\n 'Hide sensitive notification content',\n 'Hide all notification content',\n];\n\nexport default function SimpleListMenu() {\n const classes = useStyles();\n const [anchorEl, setAnchorEl] = React.useState(null);\n const [selectedIndex, setSelectedIndex] = React.useState(1);\n\n const handleClickListItem = (event) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleMenuItemClick = (event, index) => {\n setSelectedIndex(index);\n setAnchorEl(null);\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n return (\n <div className={classes.root}>\n <List component=\"nav\" aria-label=\"Device settings\">\n <ListItem\n button\n aria-haspopup=\"true\"\n aria-controls=\"lock-menu\"\n aria-label=\"when device is locked\"\n onClick={handleClickListItem}\n >\n <ListItemText primary=\"When device is locked\" secondary={options[selectedIndex]} />\n </ListItem>\n </List>\n <Menu\n id=\"lock-menu\"\n anchorEl={anchorEl}\n keepMounted\n open={Boolean(anchorEl)}\n onClose={handleClose}\n >\n {options.map((option, index) => (\n <MenuItem\n key={option}\n disabled={index === 0}\n selected={index === selectedIndex}\n onClick={(event) => handleMenuItemClick(event, index)}\n >\n {option}\n </MenuItem>\n ))}\n </Menu>\n </div>\n );\n}\n"},2056:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return f}));var o=t(0),a=t.n(o),r=t(1098),i=t(1026),c=t(368),s=t(193),l=t(1041),u=t(1092),m=t(1032),d=t(1072),p=t(1);const h=Object(d.a)((e=>({root:{display:"flex"},paper:{marginRight:e.spacing(2)}})));function f(){const e=h(),[n,t]=a.a.useState(!1),o=a.a.useRef(null),d=e=>{o.current&&o.current.contains(e.target)||t(!1)};function f(e){"Tab"===e.key&&(e.preventDefault(),t(!1))}const j=a.a.useRef(n);return a.a.useEffect((()=>{!0===j.current&&!1===n&&o.current.focus(),j.current=n}),[n]),Object(p.jsxs)("div",{className:e.root,children:[Object(p.jsx)(s.a,{className:e.paper,children:Object(p.jsxs)(m.a,{children:[Object(p.jsx)(u.a,{children:"Profile"}),Object(p.jsx)(u.a,{children:"My account"}),Object(p.jsx)(u.a,{children:"Logout"})]})}),Object(p.jsxs)("div",{children:[Object(p.jsx)(r.a,{ref:o,"aria-controls":n?"menu-list-grow":void 0,"aria-haspopup":"true",onClick:()=>{t((e=>!e))},children:"Toggle Menu Grow"}),Object(p.jsx)(l.a,{open:n,anchorEl:o.current,role:void 0,transition:!0,disablePortal:!0,children:e=>{let{TransitionProps:t,placement:o}=e;return Object(p.jsx)(c.a,{...t,style:{transformOrigin:"bottom"===o?"center top":"center bottom"},children:Object(p.jsx)(s.a,{children:Object(p.jsx)(i.a,{onClickAway:d,children:Object(p.jsxs)(m.a,{autoFocusItem:n,id:"menu-list-grow",onKeyDown:f,children:[Object(p.jsx)(u.a,{onClick:d,children:"Profile"}),Object(p.jsx)(u.a,{onClick:d,children:"My account"}),Object(p.jsx)(u.a,{onClick:d,children:"Logout"})]})})})})}})]})]})}},2057:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport ClickAwayListener from '@material-ui/core/ClickAwayListener';\nimport Grow from '@material-ui/core/Grow';\nimport Paper from '@material-ui/core/Paper';\nimport Popper from '@material-ui/core/Popper';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport MenuList from '@material-ui/core/MenuList';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n },\n paper: {\n marginRight: theme.spacing(2),\n },\n}));\n\nexport default function MenuListComposition() {\n const classes = useStyles();\n const [open, setOpen] = React.useState(false);\n const anchorRef = React.useRef(null);\n\n const handleToggle = () => {\n setOpen((prevOpen) => !prevOpen);\n };\n\n const handleClose = (event) => {\n if (anchorRef.current && anchorRef.current.contains(event.target)) {\n return;\n }\n\n setOpen(false);\n };\n\n function handleListKeyDown(event) {\n if (event.key === 'Tab') {\n event.preventDefault();\n setOpen(false);\n }\n }\n\n // return focus to the button when we transitioned from !open -> open\n const prevOpen = React.useRef(open);\n React.useEffect(() => {\n if (prevOpen.current === true && open === false) {\n anchorRef.current.focus();\n }\n\n prevOpen.current = open;\n }, [open]);\n\n return (\n <div className={classes.root}>\n <Paper className={classes.paper}>\n <MenuList>\n <MenuItem>Profile</MenuItem>\n <MenuItem>My account</MenuItem>\n <MenuItem>Logout</MenuItem>\n </MenuList>\n </Paper>\n <div>\n <Button\n ref={anchorRef}\n aria-controls={open ? 'menu-list-grow' : undefined}\n aria-haspopup=\"true\"\n onClick={handleToggle}\n >\n Toggle Menu Grow\n </Button>\n <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>\n {({ TransitionProps, placement }) => (\n <Grow\n {...TransitionProps}\n style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}\n >\n <Paper>\n <ClickAwayListener onClickAway={handleClose}>\n <MenuList autoFocusItem={open} id=\"menu-list-grow\" onKeyDown={handleListKeyDown}>\n <MenuItem onClick={handleClose}>Profile</MenuItem>\n <MenuItem onClick={handleClose}>My account</MenuItem>\n <MenuItem onClick={handleClose}>Logout</MenuItem>\n </MenuList>\n </ClickAwayListener>\n </Paper>\n </Grow>\n )}\n </Popper>\n </div>\n </div>\n );\n}\n"},2058:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return O}));var o=t(0),a=t.n(o),r=t(11),i=t(1098),c=t(536),s=t(1092),l=t(1112),u=t(1103),m=t(1176),d=t.n(m),p=t(1250),h=t.n(p),f=t(1299),j=t.n(f),b=t(1);const x=Object(r.a)({paper:{border:"1px solid #d3d4d5"}})((e=>Object(b.jsx)(c.a,{elevation:0,getContentAnchorEl:null,anchorOrigin:{vertical:"bottom",horizontal:"center"},transformOrigin:{vertical:"top",horizontal:"center"},...e}))),v=Object(r.a)((e=>({root:{"&:focus":{backgroundColor:e.palette.primary.main,"& .MuiListItemIcon-root, & .MuiListItemText-primary":{color:e.palette.common.white}}}})))(s.a);function O(){const[e,n]=a.a.useState(null);return Object(b.jsxs)("div",{children:[Object(b.jsx)(i.a,{"aria-controls":"customized-menu","aria-haspopup":"true",variant:"contained",color:"primary",onClick:e=>{n(e.currentTarget)},children:"Open Menu"}),Object(b.jsxs)(x,{id:"customized-menu",anchorEl:e,keepMounted:!0,open:Boolean(e),onClose:()=>{n(null)},children:[Object(b.jsxs)(v,{children:[Object(b.jsx)(l.a,{children:Object(b.jsx)(j.a,{fontSize:"small"})}),Object(b.jsx)(u.a,{primary:"Sent mail"})]}),Object(b.jsxs)(v,{children:[Object(b.jsx)(l.a,{children:Object(b.jsx)(h.a,{fontSize:"small"})}),Object(b.jsx)(u.a,{primary:"Drafts"})]}),Object(b.jsxs)(v,{children:[Object(b.jsx)(l.a,{children:Object(b.jsx)(d.a,{fontSize:"small"})}),Object(b.jsx)(u.a,{primary:"Inbox"})]})]})]})}},2059:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport InboxIcon from '@material-ui/icons/MoveToInbox';\nimport DraftsIcon from '@material-ui/icons/Drafts';\nimport SendIcon from '@material-ui/icons/Send';\n\nconst StyledMenu = withStyles({\n paper: {\n border: '1px solid #d3d4d5',\n },\n})((props) => (\n <Menu\n elevation={0}\n getContentAnchorEl={null}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'center',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'center',\n }}\n {...props}\n />\n));\n\nconst StyledMenuItem = withStyles((theme) => ({\n root: {\n '&:focus': {\n backgroundColor: theme.palette.primary.main,\n '& .MuiListItemIcon-root, & .MuiListItemText-primary': {\n color: theme.palette.common.white,\n },\n },\n },\n}))(MenuItem);\n\nexport default function CustomizedMenus() {\n const [anchorEl, setAnchorEl] = React.useState(null);\n\n const handleClick = (event) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n return (\n <div>\n <Button\n aria-controls=\"customized-menu\"\n aria-haspopup=\"true\"\n variant=\"contained\"\n color=\"primary\"\n onClick={handleClick}\n >\n Open Menu\n </Button>\n <StyledMenu\n id=\"customized-menu\"\n anchorEl={anchorEl}\n keepMounted\n open={Boolean(anchorEl)}\n onClose={handleClose}\n >\n <StyledMenuItem>\n <ListItemIcon>\n <SendIcon fontSize=\"small\" />\n </ListItemIcon>\n <ListItemText primary=\"Sent mail\" />\n </StyledMenuItem>\n <StyledMenuItem>\n <ListItemIcon>\n <DraftsIcon fontSize=\"small\" />\n </ListItemIcon>\n <ListItemText primary=\"Drafts\" />\n </StyledMenuItem>\n <StyledMenuItem>\n <ListItemIcon>\n <InboxIcon fontSize=\"small\" />\n </ListItemIcon>\n <ListItemText primary=\"Inbox\" />\n </StyledMenuItem>\n </StyledMenu>\n </div>\n );\n}\n"},2060:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return p}));var o=t(0),a=t.n(o),r=t(1028),i=t(536),c=t(1092),s=t(1234),l=t.n(s),u=t(1);const m=["None","Atria","Callisto","Dione","Ganymede","Hangouts Call","Luna","Oberon","Phobos","Pyxis","Sedna","Titania","Triton","Umbriel"],d=48;function p(){const[e,n]=a.a.useState(null),t=Boolean(e),o=()=>{n(null)};return Object(u.jsxs)("div",{children:[Object(u.jsx)(r.a,{"aria-label":"more","aria-controls":"long-menu","aria-haspopup":"true",onClick:e=>{n(e.currentTarget)},children:Object(u.jsx)(l.a,{})}),Object(u.jsx)(i.a,{id:"long-menu",anchorEl:e,keepMounted:!0,open:t,onClose:o,PaperProps:{style:{maxHeight:4.5*d,width:"20ch"}},children:m.map((e=>Object(u.jsx)(c.a,{selected:"Pyxis"===e,onClick:o,children:e},e)))})]})}},2061:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport IconButton from '@material-ui/core/IconButton';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\n\nconst options = [\n 'None',\n 'Atria',\n 'Callisto',\n 'Dione',\n 'Ganymede',\n 'Hangouts Call',\n 'Luna',\n 'Oberon',\n 'Phobos',\n 'Pyxis',\n 'Sedna',\n 'Titania',\n 'Triton',\n 'Umbriel',\n];\n\nconst ITEM_HEIGHT = 48;\n\nexport default function LongMenu() {\n const [anchorEl, setAnchorEl] = React.useState(null);\n const open = Boolean(anchorEl);\n\n const handleClick = (event) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n return (\n <div>\n <IconButton\n aria-label=\"more\"\n aria-controls=\"long-menu\"\n aria-haspopup=\"true\"\n onClick={handleClick}\n >\n <MoreVertIcon />\n </IconButton>\n <Menu\n id=\"long-menu\"\n anchorEl={anchorEl}\n keepMounted\n open={open}\n onClose={handleClose}\n PaperProps={{\n style: {\n maxHeight: ITEM_HEIGHT * 4.5,\n width: '20ch',\n },\n }}\n >\n {options.map((option) => (\n <MenuItem key={option} selected={option === 'Pyxis'} onClick={handleClose}>\n {option}\n </MenuItem>\n ))}\n </Menu>\n </div>\n );\n}\n"},2062:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return b}));t(0);var o=t(1032),a=t(1092),r=t(193),i=t(1072),c=t(1112),s=t(194),l=t(1250),u=t.n(l),m=t(1299),d=t.n(m),p=t(2063),h=t.n(p),f=t(1);const j=Object(i.a)({root:{width:230}});function b(){const e=j();return Object(f.jsx)(r.a,{className:e.root,children:Object(f.jsxs)(o.a,{children:[Object(f.jsxs)(a.a,{children:[Object(f.jsx)(c.a,{children:Object(f.jsx)(d.a,{fontSize:"small"})}),Object(f.jsx)(s.a,{variant:"inherit",children:"A short message"})]}),Object(f.jsxs)(a.a,{children:[Object(f.jsx)(c.a,{children:Object(f.jsx)(h.a,{fontSize:"small"})}),Object(f.jsx)(s.a,{variant:"inherit",children:"A very long text that overflows"})]}),Object(f.jsxs)(a.a,{children:[Object(f.jsx)(c.a,{children:Object(f.jsx)(u.a,{fontSize:"small"})}),Object(f.jsx)(s.a,{variant:"inherit",noWrap:!0,children:"A very long text that overflows"})]})]})})}},2063:function(e,n,t){"use strict";var o=t(552),a=t(1127);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=a(t(0)),i=(0,o(t(1128)).default)(r.createElement(r.Fragment,null,r.createElement("circle",{cx:"12",cy:"19",r:"2"}),r.createElement("path",{d:"M10 3h4v12h-4z"})),"PriorityHigh");n.default=i},2064:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport MenuList from '@material-ui/core/MenuList';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Paper from '@material-ui/core/Paper';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport Typography from '@material-ui/core/Typography';\nimport DraftsIcon from '@material-ui/icons/Drafts';\nimport SendIcon from '@material-ui/icons/Send';\nimport PriorityHighIcon from '@material-ui/icons/PriorityHigh';\n\nconst useStyles = makeStyles({\n root: {\n width: 230,\n },\n});\n\nexport default function TypographyMenu() {\n const classes = useStyles();\n\n return (\n <Paper className={classes.root}>\n <MenuList>\n <MenuItem>\n <ListItemIcon>\n <SendIcon fontSize=\"small\" />\n </ListItemIcon>\n <Typography variant=\"inherit\">A short message</Typography>\n </MenuItem>\n <MenuItem>\n <ListItemIcon>\n <PriorityHighIcon fontSize=\"small\" />\n </ListItemIcon>\n <Typography variant=\"inherit\">A very long text that overflows</Typography>\n </MenuItem>\n <MenuItem>\n <ListItemIcon>\n <DraftsIcon fontSize=\"small\" />\n </ListItemIcon>\n <Typography variant=\"inherit\" noWrap>\n A very long text that overflows\n </Typography>\n </MenuItem>\n </MenuList>\n </Paper>\n );\n}\n"},2065:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return u}));var o=t(0),a=t.n(o),r=t(1098),i=t(536),c=t(1092),s=t(546),l=t(1);function u(){const[e,n]=a.a.useState(null),t=Boolean(e),o=()=>{n(null)};return Object(l.jsxs)("div",{children:[Object(l.jsx)(r.a,{"aria-controls":"fade-menu","aria-haspopup":"true",onClick:e=>{n(e.currentTarget)},children:"Open with fade transition"}),Object(l.jsxs)(i.a,{id:"fade-menu",anchorEl:e,keepMounted:!0,open:t,onClose:o,TransitionComponent:s.a,children:[Object(l.jsx)(c.a,{onClick:o,children:"Profile"}),Object(l.jsx)(c.a,{onClick:o,children:"My account"}),Object(l.jsx)(c.a,{onClick:o,children:"Logout"})]})]})}},2066:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Fade from '@material-ui/core/Fade';\n\nexport default function FadeMenu() {\n const [anchorEl, setAnchorEl] = React.useState(null);\n const open = Boolean(anchorEl);\n\n const handleClick = (event) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n return (\n <div>\n <Button aria-controls=\"fade-menu\" aria-haspopup=\"true\" onClick={handleClick}>\n Open with fade transition\n </Button>\n <Menu\n id=\"fade-menu\"\n anchorEl={anchorEl}\n keepMounted\n open={open}\n onClose={handleClose}\n TransitionComponent={Fade}\n >\n <MenuItem onClick={handleClose}>Profile</MenuItem>\n <MenuItem onClick={handleClose}>My account</MenuItem>\n <MenuItem onClick={handleClose}>Logout</MenuItem>\n </Menu>\n </div>\n );\n}\n"},2067:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return u}));var o=t(0),a=t.n(o),r=t(536),i=t(1092),c=t(194),s=t(1);const l={mouseX:null,mouseY:null};function u(){const[e,n]=a.a.useState(l),t=()=>{n(l)};return Object(s.jsxs)("div",{onContextMenu:e=>{e.preventDefault(),n({mouseX:e.clientX-2,mouseY:e.clientY-4})},style:{cursor:"context-menu"},children:[Object(s.jsx)(c.a,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus."}),Object(s.jsxs)(r.a,{keepMounted:!0,open:null!==e.mouseY,onClose:t,anchorReference:"anchorPosition",anchorPosition:null!==e.mouseY&&null!==e.mouseX?{top:e.mouseY,left:e.mouseX}:void 0,children:[Object(s.jsx)(i.a,{onClick:t,children:"Copy"}),Object(s.jsx)(i.a,{onClick:t,children:"Print"}),Object(s.jsx)(i.a,{onClick:t,children:"Highlight"}),Object(s.jsx)(i.a,{onClick:t,children:"Email"})]})]})}},2068:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Typography from '@material-ui/core/Typography';\n\nconst initialState = {\n mouseX: null,\n mouseY: null,\n};\n\nexport default function ContextMenu() {\n const [state, setState] = React.useState(initialState);\n\n const handleClick = (event) => {\n event.preventDefault();\n setState({\n mouseX: event.clientX - 2,\n mouseY: event.clientY - 4,\n });\n };\n\n const handleClose = () => {\n setState(initialState);\n };\n\n return (\n <div onContextMenu={handleClick} style={{ cursor: 'context-menu' }}>\n <Typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit\n amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi\n finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada\n ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis\n finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet\n facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse\n lacinia tellus a libero volutpat maximus.\n </Typography>\n <Menu\n keepMounted\n open={state.mouseY !== null}\n onClose={handleClose}\n anchorReference=\"anchorPosition\"\n anchorPosition={\n state.mouseY !== null && state.mouseX !== null\n ? { top: state.mouseY, left: state.mouseX }\n : undefined\n }\n >\n <MenuItem onClick={handleClose}>Copy</MenuItem>\n <MenuItem onClick={handleClose}>Print</MenuItem>\n <MenuItem onClick={handleClose}>Highlight</MenuItem>\n <MenuItem onClick={handleClose}>Email</MenuItem>\n </Menu>\n </div>\n );\n}\n"},2069:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return m}));var o=t(0),a=t.n(o),r=t(1098),i=t(536),c=t(1092),s=t(1356),l=t.n(s),u=t(1);function m(){return Object(u.jsx)(l.a,{variant:"popover",popupId:"demo-popup-menu",children:e=>Object(u.jsxs)(a.a.Fragment,{children:[Object(u.jsx)(r.a,{variant:"contained",color:"primary",...Object(s.bindTrigger)(e),children:"Open Menu"}),Object(u.jsxs)(i.a,{...Object(s.bindMenu)(e),children:[Object(u.jsx)(c.a,{onClick:e.close,children:"Cake"}),Object(u.jsx)(c.a,{onClick:e.close,children:"Death"})]})]})})}},2074:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state';\n\nexport default function MenuPopupState() {\n return (\n <PopupState variant=\"popover\" popupId=\"demo-popup-menu\">\n {(popupState) => (\n <React.Fragment>\n <Button variant=\"contained\" color=\"primary\" {...bindTrigger(popupState)}>\n Open Menu\n </Button>\n <Menu {...bindMenu(popupState)}>\n <MenuItem onClick={popupState.close}>Cake</MenuItem>\n <MenuItem onClick={popupState.close}>Death</MenuItem>\n </Menu>\n </React.Fragment>\n )}\n </PopupState>\n );\n}\n"},2588:function(e,n,t){"use strict";t.r(n);var o=t(1130),a=t(1098),r=t(1090),i=t(194),c=t(1072),s=t(1);const l=Object(c.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.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)(a.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/menus",target:"_blank",role:"button",children:[Object(s.jsx)(r.a,{children:"link"}),Object(s.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(s.jsx)(i.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Menus"}),Object(s.jsx)(i.a,{className:"description",children:"Menus display a list of choices on temporary surfaces."}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:["A ",Object(s.jsx)("a",{href:"https://material.io/design/components/menus.html",children:"Menu"})," displays a list of choices on a temporary surface. It appears when the user interacts with a button, or other control."]}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple Menu"}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:"Simple menus open over the anchor element by default (this option can be changed via props). When close to a screen edge, simple menus vertically realign to make sure that all menu items are completely visible."}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:"Choosing an option should immediately ideally commit the option and close the menu."}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:[Object(s.jsx)("strong",{children:"Disambiguation"}),": In contrast to simple menus, simple dialogs can present additional detail related to the options available for a list item or provide navigational or orthogonal actions related to the primary task. Although they can display the same content, simple menus are preferred over simple dialogs because simple menus are less disruptive to the user\u2019s current context."]}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2052).default,raw:t(2053)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Selected menus"}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:["If used for item selection, when opened, simple menus attempt to vertically align the currently selected menu item with the anchor element, and the initial focus will be placed on the selected menu item. The currently selected menu item is set using the"," ",Object(s.jsx)("code",{children:"selected"})," property (from ",Object(s.jsx)("a",{href:"/api/list-item/",children:"ListItem"}),"). To use a selected menu item without impacting the initial focus or the vertical positioning of the menu, set the ",Object(s.jsx)("code",{children:"variant"})," property to ",Object(s.jsx)("code",{children:"menu"}),"."]}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2054).default,raw:t(2055)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"MenuList composition"}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:["The ",Object(s.jsx)("code",{children:"Menu"})," component uses the ",Object(s.jsx)("code",{children:"Popover"})," component internally. However, you might want to use a different positioning strategy, or not blocking the scroll. For answering those needs, we expose a ",Object(s.jsx)("code",{children:"MenuList"})," component that you can compose, with ",Object(s.jsx)("code",{children:"Popper"})," in this example."]}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:["The primary responsibility of the ",Object(s.jsx)("code",{children:"MenuList"})," component is to handle the focus."]}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2056).default,raw:t(2057)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customized menus"}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:["Here is an example of customizing the component. You can learn more about this in the",Object(s.jsx)("a",{href:"/customization/components/",children:"overrides documentation page"}),"."]}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2058).default,raw:t(2059)})}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:["The ",Object(s.jsx)("code",{children:"MenuItem"})," is a wrapper around ",Object(s.jsx)("code",{children:"ListItem"})," with some additional styles. You can use the same list composition features with the ",Object(s.jsx)("code",{children:"MenuItem"})," ","component:"]}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:["\ud83c\udfa8 If you are looking for inspiration, you can check"," ",Object(s.jsx)("a",{href:"https://mui-treasury.com/styles/menu",children:"MUI Treasury's customization examples"}),"."]}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Max height menus"}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:"If the height of a menu prevents all menu items from being displayed, the menu can scroll internally."}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2060).default,raw:t(2061)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Limitations"}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:["There is"," ",Object(s.jsx)("a",{href:"https://bugs.chromium.org/p/chromium/issues/detail?id=327437",children:"a flexbox bug"})," ","that prevents ",Object(s.jsx)("code",{children:"text-overflow: ellipsis"})," from working in a flexbox layout. You can use the ",Object(s.jsx)("code",{children:"Typography"})," component with ",Object(s.jsx)("code",{children:"noWrap"})," to workaround this issue:"]}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2062).default,raw:t(2064)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Change transition"}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:"Use a different transition."}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2065).default,raw:t(2066)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Context menu"}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:"Here is an example of a context menu. (Right click to open.)"}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2067).default,raw:t(2068)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Complementary projects"}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:"For more advanced use cases you might be able to take advantage of:"}),Object(s.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"PopupState helper"}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:["There is a 3rd party package"," ",Object(s.jsx)("a",{href:"https://github.com/jcoreio/material-ui-popup-state",children:Object(s.jsx)("code",{children:"material-ui-popup-state"})})," ","that takes care of menu state for you in most cases."]}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2069).default,raw:t(2074)})})]})}}}]);
Mini Shell