%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[88],{1130:function(n,e,o){"use strict";o.d(e,"a",(function(){return R}));var t=o(118),r=o(1100),a=o(1109),i=o(1090),c=o(1117),l=o(1119),s=o(5),p=o(0),h=o(1024),m=o(551),d=o(1087),u=o(1099),j=o(11),b=o(370),f=o(371),O=o(1131),g=o.n(O),v=o(1);const x=Object(h.a)({productionPrefix:"iframe-"});class y extends p.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=n=>{this.contentDocument=n?n.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(b.a)({...Object(m.a)(),plugins:[...Object(m.a)().plugins,Object(f.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:n,classes:e,theme:o}=this.props;return Object(v.jsx)(g.a,{head:this.renderHead(),ref:this.handleRef,className:Object(s.a)(e.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(v.jsx)(d.b,{jss:this.state.jss,generateClassName:x,sheetsManager:this.state.sheetsManager,children:Object(v.jsx)(u.a,{theme:o,children:Object(p.cloneElement)(n,{container:this.state.container})})}):null})}}var C=Object(j.a)((n=>({root:{backgroundColor:n.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(y);function P(n){const[e,o]=Object(p.useState)(n.currentTabIndex),{component:h,raw:m,iframe:d,className:u}=n;return Object(v.jsxs)(a.a,{className:Object(s.a)(u,"shadow"),children:[Object(v.jsx)(r.a,{position:"static",color:"default",className:"shadow-0",children:Object(v.jsxs)(l.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:e,onChange:function(n,e){o(e)},children:[h&&Object(v.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(v.jsx)(i.a,{children:"remove_red_eye"})}),m&&Object(v.jsx)(c.a,{classes:{root:"min-w-64"},icon:Object(v.jsx)(i.a,{children:"code"})})]})}),Object(v.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(v.jsx)("div",{className:0===e?"flex flex-1 max-w-full":"hidden",children:h&&(d?Object(v.jsx)(C,{children:Object(v.jsx)(h,{})}):Object(v.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(v.jsx)(h,{})}))}),Object(v.jsx)("div",{className:1===e?"flex flex-1":"hidden",children:m&&Object(v.jsx)("div",{className:"flex flex-1",children:Object(v.jsx)(t.a,{component:"pre",className:"language-javascript w-full",children:m.default})})})]})]})}P.defaultProps={currentTabIndex:0};var R=P},1189:function(n,e,o){"use strict";var t=o(0),r=o(381),a=o(1);const i=Object(t.forwardRef)((function(n,e){const{code:o,language:t,...i}=n;return Object(a.jsx)(r.a,{component:"pre",className:"language-".concat(t||"jsx"),ref:e,...i,children:o})}));e.a=i},2119:function(n,e,o){"use strict";o.r(e),o.d(e,"default",(function(){return h}));var t=o(0),r=o.n(t),a=o(1072),i=o(1031),c=o(194),l=o(1098),s=o(1);const p=Object(a.a)((n=>({typography:{padding:n.spacing(2)}})));function h(){const n=p(),[e,o]=r.a.useState(null),t=Boolean(e),a=t?"simple-popover":void 0;return Object(s.jsxs)("div",{children:[Object(s.jsx)(l.a,{"aria-describedby":a,variant:"contained",color:"primary",onClick:n=>{o(n.currentTarget)},children:"Open Popover"}),Object(s.jsx)(i.a,{id:a,open:t,anchorEl:e,onClose:()=>{o(null)},anchorOrigin:{vertical:"bottom",horizontal:"center"},transformOrigin:{vertical:"top",horizontal:"center"},children:Object(s.jsx)(c.a,{className:n.typography,children:"The content of the Popover."})})]})}},2120:function(n,e,o){"use strict";o.r(e),e.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Popover from '@material-ui/core/Popover';\nimport Typography from '@material-ui/core/Typography';\nimport Button from '@material-ui/core/Button';\n\nconst useStyles = makeStyles((theme) => ({\n typography: {\n padding: theme.spacing(2),\n },\n}));\n\nexport default function SimplePopover() {\n const classes = useStyles();\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 const open = Boolean(anchorEl);\n const id = open ? 'simple-popover' : undefined;\n\n return (\n <div>\n <Button aria-describedby={id} variant=\"contained\" color=\"primary\" onClick={handleClick}>\n Open Popover\n </Button>\n <Popover\n id={id}\n open={open}\n anchorEl={anchorEl}\n onClose={handleClose}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'center',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'center',\n }}\n >\n <Typography className={classes.typography}>The content of the Popover.</Typography>\n </Popover>\n </div>\n );\n}\n"},2121:function(n,e,o){"use strict";o.r(e);var t=o(0),r=o.n(t),a=o(11),i=o(1035),c=o(1036),l=o(1094),s=o(1093),p=o(1120),h=o(1189),m=o(1172),d=o(149),u=o(194),j=o(1098),b=o(1031),f=o(548),O=o(1038),g=o(1);const v={top:{top:-5},center:{top:"calc(50% - 5px)"},bottom:{bottom:-5}},x={left:{left:-5},center:{left:"calc(50% - 5px)"},right:{right:-5}};e.default=Object(a.a)((n=>({buttonWrapper:{position:"relative",marginBottom:n.spacing(4)},anchor:{backgroundColor:d.a[500],width:10,height:10,borderRadius:"50%",position:"absolute"},radioAnchor:{color:d.a[600],"&$checked":{color:d.a[500]}},checked:{},typography:{margin:n.spacing(2)}})))((function(n){const{classes:e}=n,o=r.a.useRef(),[t,a]=r.a.useState({open:!1,anchorOriginVertical:"top",anchorOriginHorizontal:"left",transformOriginVertical:"top",transformOriginHorizontal:"left",positionTop:200,positionLeft:400,anchorReference:"anchorEl"}),{open:d,anchorOriginVertical:y,anchorOriginHorizontal:C,transformOriginVertical:P,transformOriginHorizontal:R,positionTop:T,positionLeft:F,anchorReference:N}=t,z=n=>{a({...t,[n.target.name]:n.target.value})},L=n=>e=>{a({...t,[n]:parseInt(e.target.value,10)})};let w="";"anchorPosition"===N&&(w='\n anchorReference="'.concat(N,'"\n anchorPosition={{ top: ').concat(T,", left: ").concat(F," }}"));const S="\n<Popover ".concat(w,"\n anchorOrigin={{\n vertical: '").concat(y,"',\n horizontal: '").concat(C,"',\n }}\n transformOrigin={{\n vertical: '").concat(P,"',\n horizontal: '").concat(R,"',\n }}\n>\n The content of the Popover.\n</Popover>\n"),k={root:e.radioAnchor,checked:e.checked};return Object(g.jsxs)("div",{children:[Object(g.jsx)(m.a,{container:!0,justifyContent:"center",children:Object(g.jsxs)(m.a,{item:!0,className:e.buttonWrapper,children:[Object(g.jsx)(j.a,{ref:o,variant:"contained",onClick:()=>{a({...t,open:!0})},children:"Open Popover"}),"anchorEl"===N&&Object(g.jsx)("div",{className:e.anchor,style:{...v[y],...x[C]}})]})}),Object(g.jsx)(b.a,{open:d,anchorEl:o.current,anchorReference:N,anchorPosition:{top:T,left:F},onClose:()=>{a({...t,open:!1})},anchorOrigin:{vertical:y,horizontal:C},transformOrigin:{vertical:P,horizontal:R},children:Object(g.jsx)(u.a,{className:e.typography,children:"The content of the Popover."})}),Object(g.jsxs)(m.a,{container:!0,spacing:2,children:[Object(g.jsx)(m.a,{item:!0,xs:12,sm:6,children:Object(g.jsxs)(i.a,{component:"fieldset",children:[Object(g.jsx)(c.a,{component:"legend",children:"anchorReference"}),Object(g.jsxs)(s.a,{row:!0,"aria-label":"anchor reference",name:"anchorReference",value:N,onChange:z,children:[Object(g.jsx)(l.a,{value:"anchorEl",control:Object(g.jsx)(p.a,{}),label:"anchorEl"}),Object(g.jsx)(l.a,{value:"anchorPosition",control:Object(g.jsx)(p.a,{}),label:"anchorPosition"})]})]})}),Object(g.jsxs)(m.a,{item:!0,xs:12,sm:6,children:[Object(g.jsxs)(i.a,{className:e.formControl,children:[Object(g.jsx)(O.a,{htmlFor:"position-top",children:"anchorPosition.top"}),Object(g.jsx)(f.a,{id:"position-top",type:"number",value:T,onChange:L("positionTop")})]}),"\xa0",Object(g.jsxs)(i.a,{className:e.formControl,children:[Object(g.jsx)(O.a,{htmlFor:"position-left",children:"anchorPosition.left"}),Object(g.jsx)(f.a,{id:"position-left",type:"number",value:F,onChange:L("positionLeft")})]})]}),Object(g.jsx)(m.a,{item:!0,xs:12,sm:6,children:Object(g.jsxs)(i.a,{component:"fieldset",children:[Object(g.jsx)(c.a,{component:"legend",children:"anchorOrigin.vertical"}),Object(g.jsxs)(s.a,{"aria-label":"anchor origin vertical",name:"anchorOriginVertical",value:y,onChange:z,children:[Object(g.jsx)(l.a,{value:"top",control:Object(g.jsx)(p.a,{classes:k}),label:"Top"}),Object(g.jsx)(l.a,{value:"center",control:Object(g.jsx)(p.a,{classes:k}),label:"Center"}),Object(g.jsx)(l.a,{value:"bottom",control:Object(g.jsx)(p.a,{classes:k}),label:"Bottom"})]})]})}),Object(g.jsx)(m.a,{item:!0,xs:12,sm:6,children:Object(g.jsxs)(i.a,{component:"fieldset",children:[Object(g.jsx)(c.a,{component:"legend",children:"transformOrigin.vertical"}),Object(g.jsxs)(s.a,{"aria-label":"transform origin vertical",name:"transformOriginVertical",value:P,onChange:z,children:[Object(g.jsx)(l.a,{value:"top",control:Object(g.jsx)(p.a,{color:"primary"}),label:"Top"}),Object(g.jsx)(l.a,{value:"center",control:Object(g.jsx)(p.a,{color:"primary"}),label:"Center"}),Object(g.jsx)(l.a,{value:"bottom",control:Object(g.jsx)(p.a,{color:"primary"}),label:"Bottom"})]})]})}),Object(g.jsx)(m.a,{item:!0,xs:12,sm:6,children:Object(g.jsxs)(i.a,{component:"fieldset",children:[Object(g.jsx)(c.a,{component:"legend",children:"anchorOrigin.horizontal"}),Object(g.jsxs)(s.a,{row:!0,"aria-label":"anchor origin horizontal",name:"anchorOriginHorizontal",value:C,onChange:z,children:[Object(g.jsx)(l.a,{value:"left",control:Object(g.jsx)(p.a,{classes:k}),label:"Left"}),Object(g.jsx)(l.a,{value:"center",control:Object(g.jsx)(p.a,{classes:k}),label:"Center"}),Object(g.jsx)(l.a,{value:"right",control:Object(g.jsx)(p.a,{classes:k}),label:"Right"})]})]})}),Object(g.jsx)(m.a,{item:!0,xs:12,sm:6,children:Object(g.jsxs)(i.a,{component:"fieldset",children:[Object(g.jsx)(c.a,{component:"legend",children:"transformOrigin.horizontal"}),Object(g.jsxs)(s.a,{row:!0,"aria-label":"transform origin horizontal",name:"transformOriginHorizontal",value:R,onChange:z,children:[Object(g.jsx)(l.a,{value:"left",control:Object(g.jsx)(p.a,{color:"primary"}),label:"Left"}),Object(g.jsx)(l.a,{value:"center",control:Object(g.jsx)(p.a,{color:"primary"}),label:"Center"}),Object(g.jsx)(l.a,{value:"right",control:Object(g.jsx)(p.a,{color:"primary"}),label:"Right"})]})]})})]}),Object(g.jsx)(h.a,{code:S,language:"jsx"})]})}))},2122:function(n,e,o){"use strict";o.r(e),e.default='import React from \'react\';\nimport PropTypes from \'prop-types\';\nimport { withStyles } from \'@material-ui/core/styles\';\nimport FormControl from \'@material-ui/core/FormControl\';\nimport FormLabel from \'@material-ui/core/FormLabel\';\nimport FormControlLabel from \'@material-ui/core/FormControlLabel\';\nimport RadioGroup from \'@material-ui/core/RadioGroup\';\nimport Radio from \'@material-ui/core/Radio\';\nimport HighlightedCode from \'app/main/documentation/material-ui-components/utils/HighlightedCode\';\nimport Grid from \'@material-ui/core/Grid\';\nimport { green } from \'@material-ui/core/colors\';\nimport Typography from \'@material-ui/core/Typography\';\nimport Button from \'@material-ui/core/Button\';\nimport Popover from \'@material-ui/core/Popover\';\nimport Input from \'@material-ui/core/Input\';\nimport InputLabel from \'@material-ui/core/InputLabel\';\n\nconst styles = (theme) => ({\n buttonWrapper: {\n position: \'relative\',\n marginBottom: theme.spacing(4),\n },\n anchor: {\n backgroundColor: green[500],\n width: 10,\n height: 10,\n borderRadius: \'50%\',\n position: \'absolute\',\n },\n radioAnchor: {\n color: green[600],\n \'&$checked\': {\n color: green[500],\n },\n },\n checked: {},\n typography: {\n margin: theme.spacing(2),\n },\n});\n\nconst inlineStyles = {\n anchorVertical: {\n top: {\n top: -5,\n },\n center: {\n top: \'calc(50% - 5px)\',\n },\n bottom: {\n bottom: -5,\n },\n },\n anchorHorizontal: {\n left: {\n left: -5,\n },\n center: {\n left: \'calc(50% - 5px)\',\n },\n right: {\n right: -5,\n },\n },\n};\n\nfunction AnchorPlayground(props) {\n const { classes } = props;\n const anchorRef = React.useRef();\n\n const [state, setState] = React.useState({\n open: false,\n anchorOriginVertical: \'top\',\n anchorOriginHorizontal: \'left\',\n transformOriginVertical: \'top\',\n transformOriginHorizontal: \'left\',\n positionTop: 200, // Just so the popover can be spotted more easily\n positionLeft: 400, // Same as above\n anchorReference: \'anchorEl\',\n });\n\n const {\n open,\n anchorOriginVertical,\n anchorOriginHorizontal,\n transformOriginVertical,\n transformOriginHorizontal,\n positionTop,\n positionLeft,\n anchorReference,\n } = state;\n\n const handleChange = (event) => {\n setState({\n ...state,\n [event.target.name]: event.target.value,\n });\n };\n\n const handleNumberInputChange = (key) => (event) => {\n setState({\n ...state,\n [key]: parseInt(event.target.value, 10),\n });\n };\n\n const handleClickButton = () => {\n setState({\n ...state,\n open: true,\n });\n };\n\n const handleClose = () => {\n setState({\n ...state,\n open: false,\n });\n };\n\n let mode = \'\';\n\n if (anchorReference === \'anchorPosition\') {\n mode = `\n anchorReference="${anchorReference}"\n anchorPosition={{ top: ${positionTop}, left: ${positionLeft} }}`;\n }\n\n const jsx = `\n<Popover ${mode}\n anchorOrigin={{\n vertical: \'${anchorOriginVertical}\',\n horizontal: \'${anchorOriginHorizontal}\',\n }}\n transformOrigin={{\n vertical: \'${transformOriginVertical}\',\n horizontal: \'${transformOriginHorizontal}\',\n }}\n>\n The content of the Popover.\n</Popover>\n`;\n\n const radioAnchorClasses = { root: classes.radioAnchor, checked: classes.checked };\n\n return (\n <div>\n <Grid container justifyContent="center">\n <Grid item className={classes.buttonWrapper}>\n <Button ref={anchorRef} variant="contained" onClick={handleClickButton}>\n Open Popover\n </Button>\n {anchorReference === \'anchorEl\' && (\n <div\n className={classes.anchor}\n style={{\n ...inlineStyles.anchorVertical[anchorOriginVertical],\n ...inlineStyles.anchorHorizontal[anchorOriginHorizontal],\n }}\n />\n )}\n </Grid>\n </Grid>\n <Popover\n open={open}\n anchorEl={anchorRef.current}\n anchorReference={anchorReference}\n anchorPosition={{ top: positionTop, left: positionLeft }}\n onClose={handleClose}\n anchorOrigin={{\n vertical: anchorOriginVertical,\n horizontal: anchorOriginHorizontal,\n }}\n transformOrigin={{\n vertical: transformOriginVertical,\n horizontal: transformOriginHorizontal,\n }}\n >\n <Typography className={classes.typography}>The content of the Popover.</Typography>\n </Popover>\n <Grid container spacing={2}>\n <Grid item xs={12} sm={6}>\n <FormControl component="fieldset">\n <FormLabel component="legend">anchorReference</FormLabel>\n <RadioGroup\n row\n aria-label="anchor reference"\n name="anchorReference"\n value={anchorReference}\n onChange={handleChange}\n >\n <FormControlLabel value="anchorEl" control={<Radio />} label="anchorEl" />\n <FormControlLabel value="anchorPosition" control={<Radio />} label="anchorPosition" />\n </RadioGroup>\n </FormControl>\n </Grid>\n <Grid item xs={12} sm={6}>\n <FormControl className={classes.formControl}>\n <InputLabel htmlFor="position-top">anchorPosition.top</InputLabel>\n <Input\n id="position-top"\n type="number"\n value={positionTop}\n onChange={handleNumberInputChange(\'positionTop\')}\n />\n </FormControl>\n \n <FormControl className={classes.formControl}>\n <InputLabel htmlFor="position-left">anchorPosition.left</InputLabel>\n <Input\n id="position-left"\n type="number"\n value={positionLeft}\n onChange={handleNumberInputChange(\'positionLeft\')}\n />\n </FormControl>\n </Grid>\n <Grid item xs={12} sm={6}>\n <FormControl component="fieldset">\n <FormLabel component="legend">anchorOrigin.vertical</FormLabel>\n <RadioGroup\n aria-label="anchor origin vertical"\n name="anchorOriginVertical"\n value={anchorOriginVertical}\n onChange={handleChange}\n >\n <FormControlLabel\n value="top"\n control={<Radio classes={radioAnchorClasses} />}\n label="Top"\n />\n <FormControlLabel\n value="center"\n control={<Radio classes={radioAnchorClasses} />}\n label="Center"\n />\n <FormControlLabel\n value="bottom"\n control={<Radio classes={radioAnchorClasses} />}\n label="Bottom"\n />\n </RadioGroup>\n </FormControl>\n </Grid>\n <Grid item xs={12} sm={6}>\n <FormControl component="fieldset">\n <FormLabel component="legend">transformOrigin.vertical</FormLabel>\n <RadioGroup\n aria-label="transform origin vertical"\n name="transformOriginVertical"\n value={transformOriginVertical}\n onChange={handleChange}\n >\n <FormControlLabel value="top" control={<Radio color="primary" />} label="Top" />\n <FormControlLabel value="center" control={<Radio color="primary" />} label="Center" />\n <FormControlLabel value="bottom" control={<Radio color="primary" />} label="Bottom" />\n </RadioGroup>\n </FormControl>\n </Grid>\n <Grid item xs={12} sm={6}>\n <FormControl component="fieldset">\n <FormLabel component="legend">anchorOrigin.horizontal</FormLabel>\n <RadioGroup\n row\n aria-label="anchor origin horizontal"\n name="anchorOriginHorizontal"\n value={anchorOriginHorizontal}\n onChange={handleChange}\n >\n <FormControlLabel\n value="left"\n control={<Radio classes={radioAnchorClasses} />}\n label="Left"\n />\n <FormControlLabel\n value="center"\n control={<Radio classes={radioAnchorClasses} />}\n label="Center"\n />\n <FormControlLabel\n value="right"\n control={<Radio classes={radioAnchorClasses} />}\n label="Right"\n />\n </RadioGroup>\n </FormControl>\n </Grid>\n <Grid item xs={12} sm={6}>\n <FormControl component="fieldset">\n <FormLabel component="legend">transformOrigin.horizontal</FormLabel>\n <RadioGroup\n row\n aria-label="transform origin horizontal"\n name="transformOriginHorizontal"\n value={transformOriginHorizontal}\n onChange={handleChange}\n >\n <FormControlLabel value="left" control={<Radio color="primary" />} label="Left" />\n <FormControlLabel value="center" control={<Radio color="primary" />} label="Center" />\n <FormControlLabel value="right" control={<Radio color="primary" />} label="Right" />\n </RadioGroup>\n </FormControl>\n </Grid>\n </Grid>\n <HighlightedCode code={jsx} language="jsx" />\n </div>\n );\n}\n\nAnchorPlayground.propTypes = {\n classes: PropTypes.object.isRequired,\n};\n\nexport default withStyles(styles)(AnchorPlayground);\n'},2123:function(n,e,o){"use strict";o.r(e),o.d(e,"default",(function(){return p}));var t=o(0),r=o.n(t),a=o(1031),i=o(194),c=o(1072),l=o(1);const s=Object(c.a)((n=>({popover:{pointerEvents:"none"},paper:{padding:n.spacing(1)}})));function p(){const n=s(),[e,o]=r.a.useState(null),t=()=>{o(null)},c=Boolean(e);return Object(l.jsxs)("div",{children:[Object(l.jsx)(i.a,{"aria-owns":c?"mouse-over-popover":void 0,"aria-haspopup":"true",onMouseEnter:n=>{o(n.currentTarget)},onMouseLeave:t,children:"Hover with a Popover."}),Object(l.jsx)(a.a,{id:"mouse-over-popover",className:n.popover,classes:{paper:n.paper},open:c,anchorEl:e,anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"},onClose:t,disableRestoreFocus:!0,children:Object(l.jsx)(i.a,{children:"I use Popover."})})]})}},2124:function(n,e,o){"use strict";o.r(e),e.default="import React from 'react';\nimport Popover from '@material-ui/core/Popover';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n popover: {\n pointerEvents: 'none',\n },\n paper: {\n padding: theme.spacing(1),\n },\n}));\n\nexport default function MouseOverPopover() {\n const classes = useStyles();\n const [anchorEl, setAnchorEl] = React.useState(null);\n\n const handlePopoverOpen = (event) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handlePopoverClose = () => {\n setAnchorEl(null);\n };\n\n const open = Boolean(anchorEl);\n\n return (\n <div>\n <Typography\n aria-owns={open ? 'mouse-over-popover' : undefined}\n aria-haspopup=\"true\"\n onMouseEnter={handlePopoverOpen}\n onMouseLeave={handlePopoverClose}\n >\n Hover with a Popover.\n </Typography>\n <Popover\n id=\"mouse-over-popover\"\n className={classes.popover}\n classes={{\n paper: classes.paper,\n }}\n open={open}\n anchorEl={anchorEl}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'left',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'left',\n }}\n onClose={handlePopoverClose}\n disableRestoreFocus\n >\n <Typography>I use Popover.</Typography>\n </Popover>\n </div>\n );\n}\n"},2125:function(n,e,o){"use strict";o.r(e),o.d(e,"default",(function(){return p}));o(0);var t=o(194),r=o(1304),a=o(1098),i=o(1031),c=o(1356),l=o.n(c),s=o(1);function p(){return Object(s.jsx)(l.a,{variant:"popover",popupId:"demo-popup-popover",children:n=>Object(s.jsxs)("div",{children:[Object(s.jsx)(a.a,{variant:"contained",color:"primary",...Object(c.bindTrigger)(n),children:"Open Popover"}),Object(s.jsx)(i.a,{...Object(c.bindPopover)(n),anchorOrigin:{vertical:"bottom",horizontal:"center"},transformOrigin:{vertical:"top",horizontal:"center"},children:Object(s.jsx)(r.a,{p:2,children:Object(s.jsx)(t.a,{children:"The content of the Popover."})})})]})})}},2126:function(n,e,o){"use strict";o.r(e),e.default="import React from 'react';\nimport Typography from '@material-ui/core/Typography';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Popover from '@material-ui/core/Popover';\nimport PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';\n\nexport default function PopoverPopupState() {\n return (\n <PopupState variant=\"popover\" popupId=\"demo-popup-popover\">\n {(popupState) => (\n <div>\n <Button variant=\"contained\" color=\"primary\" {...bindTrigger(popupState)}>\n Open Popover\n </Button>\n <Popover\n {...bindPopover(popupState)}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'center',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'center',\n }}\n >\n <Box p={2}>\n <Typography>The content of the Popover.</Typography>\n </Box>\n </Popover>\n </div>\n )}\n </PopupState>\n );\n}\n"},2595:function(n,e,o){"use strict";o.r(e);var t=o(1130),r=o(1098),a=o(1090),i=o(194),c=o(1072),l=o(1);const s=Object(c.a)((n=>({layoutRoot:{"& .description":{marginBottom:16}}})));e.default=function(n){return s(),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/popover",target:"_blank",role:"button",children:[Object(l.jsx)(a.a,{children:"link"}),Object(l.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(l.jsx)(i.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Popover"}),Object(l.jsx)(i.a,{className:"description",children:"A Popover can be used to display some content on top of another."}),Object(l.jsxs)(i.a,{className:"mb-16",component:"div",children:["Things to know when using the ",Object(l.jsx)("code",{children:"Popover"})," component:"]}),Object(l.jsxs)("ul",{children:[Object(l.jsxs)("li",{children:["The component is built on top of the"," ",Object(l.jsx)("a",{href:"/components/modal/",children:Object(l.jsx)("code",{children:"Modal"})})," ","component."]}),Object(l.jsxs)("li",{children:["The scroll and click away are blocked unlike with the"," ",Object(l.jsx)("a",{href:"/components/popper/",children:Object(l.jsx)("code",{children:"Popper"})})," ","component."]})]}),Object(l.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple Popover"}),Object(l.jsx)(i.a,{className:"mb-16",component:"div",children:Object(l.jsx)(t.a,{className:"my-24",iframe:!1,component:o(2119).default,raw:o(2120)})}),Object(l.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Anchor playground"}),Object(l.jsxs)(i.a,{className:"mb-16",component:"div",children:["Use the radio buttons to adjust the ",Object(l.jsx)("code",{children:"anchorOrigin"})," and"," ",Object(l.jsx)("code",{children:"transformOrigin"})," positions. You can also set the ",Object(l.jsx)("code",{children:"anchorReference"})," to"," ",Object(l.jsx)("code",{children:"anchorPosition"})," or ",Object(l.jsx)("code",{children:"anchorEl"}),". When it is ",Object(l.jsx)("code",{children:"anchorPosition"}),", the component will, instead of ",Object(l.jsx)("code",{children:"anchorEl"}),", refer to the"," ",Object(l.jsx)("code",{children:"anchorPosition"})," prop which you can adjust to set the position of the popover."]}),Object(l.jsx)(i.a,{className:"mb-16",component:"div",children:Object(l.jsx)(t.a,{className:"my-24",iframe:!1,component:o(2121).default,raw:o(2122)})}),Object(l.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Mouse over interaction"}),Object(l.jsxs)(i.a,{className:"mb-16",component:"div",children:["This demonstrates how to use the ",Object(l.jsx)("code",{children:"Popover"})," component to implement a popover behavior based on the mouse over event."]}),Object(l.jsx)(i.a,{className:"mb-16",component:"div",children:Object(l.jsx)(t.a,{className:"my-24",iframe:!1,component:o(2123).default,raw:o(2124)})}),Object(l.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Complementary projects"}),Object(l.jsx)(i.a,{className:"mb-16",component:"div",children:"For more advanced use cases you might be able to take advantage of:"}),Object(l.jsx)(i.a,{className:"text-24 mt-32 mb-8",component:"h3",children:"PopupState helper"}),Object(l.jsxs)(i.a,{className:"mb-16",component:"div",children:["There is a 3rd party package"," ",Object(l.jsx)("a",{href:"https://github.com/jcoreio/material-ui-popup-state",children:Object(l.jsx)("code",{children:"material-ui-popup-state"})})," ","that takes care of popover state for you in most cases."]}),Object(l.jsx)(i.a,{className:"mb-16",component:"div",children:Object(l.jsx)(t.a,{className:"my-24",iframe:!1,component:o(2125).default,raw:o(2126)})})]})}}}]);
Zerion Mini Shell 1.0