%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[46],{1130:function(e,n,t){"use strict";t.d(n,"a",(function(){return C}));var o=t(118),r=t(1100),a=t(1109),i=t(1090),c=t(1117),s=t(1119),l=t(5),p=t(0),d=t(1024),m=t(551),u=t(1087),h=t(1099),b=t(11),j=t(370),f=t(371),g=t(1131),x=t.n(g),v=t(1);const O=Object(d.a)({productionPrefix:"iframe-"});class y extends p.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(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:e,classes:n,theme:t}=this.props;return Object(v.jsx)(x.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(v.jsx)(u.b,{jss:this.state.jss,generateClassName:O,sheetsManager:this.state.sheetsManager,children:Object(v.jsx)(h.a,{theme:t,children:Object(p.cloneElement)(e,{container:this.state.container})})}):null})}}var w=Object(b.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(y);function P(e){const[n,t]=Object(p.useState)(e.currentTabIndex),{component:d,raw:m,iframe:u,className:h}=e;return Object(v.jsxs)(a.a,{className:Object(l.a)(h,"shadow"),children:[Object(v.jsx)(r.a,{position:"static",color:"default",className:"shadow-0",children:Object(v.jsxs)(s.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){t(n)},children:[d&&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===n?"flex flex-1 max-w-full":"hidden",children:d&&(u?Object(v.jsx)(w,{children:Object(v.jsx)(d,{})}):Object(v.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(v.jsx)(d,{})}))}),Object(v.jsx)("div",{className:1===n?"flex flex-1":"hidden",children:m&&Object(v.jsx)("div",{className:"flex flex-1",children:Object(v.jsx)(o.a,{component:"pre",className:"language-javascript w-full",children:m.default})})})]})]})}P.defaultProps={currentTabIndex:0};var C=P},1172:function(e,n,t){"use strict";var o=t(7),r=t(2),a=t(0),i=t(8),c=t(11),s=[0,1,2,3,4,5,6,7,8,9,10],l=["auto",!0,1,2,3,4,5,6,7,8,9,10,11,12];function p(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,t=parseFloat(e);return"".concat(t/n).concat(String(e).replace(String(t),"")||"px")}var d=a.forwardRef((function(e,n){var t=e.alignContent,c=void 0===t?"stretch":t,s=e.alignItems,l=void 0===s?"stretch":s,p=e.classes,d=e.className,m=e.component,u=void 0===m?"div":m,h=e.container,b=void 0!==h&&h,j=e.direction,f=void 0===j?"row":j,g=e.item,x=void 0!==g&&g,v=e.justify,O=e.justifyContent,y=void 0===O?"flex-start":O,w=e.lg,P=void 0!==w&&w,C=e.md,k=void 0!==C&&C,S=e.sm,T=void 0!==S&&S,N=e.spacing,B=void 0===N?0:N,E=e.wrap,R=void 0===E?"wrap":E,D=e.xl,F=void 0!==D&&D,G=e.xs,A=void 0!==G&&G,M=e.zeroMinWidth,I=void 0!==M&&M,W=Object(o.a)(e,["alignContent","alignItems","classes","className","component","container","direction","item","justify","justifyContent","lg","md","sm","spacing","wrap","xl","xs","zeroMinWidth"]),L=Object(i.a)(p.root,d,b&&[p.container,0!==B&&p["spacing-xs-".concat(String(B))]],x&&p.item,I&&p.zeroMinWidth,"row"!==f&&p["direction-xs-".concat(String(f))],"wrap"!==R&&p["wrap-xs-".concat(String(R))],"stretch"!==l&&p["align-items-xs-".concat(String(l))],"stretch"!==c&&p["align-content-xs-".concat(String(c))],"flex-start"!==(v||y)&&p["justify-content-xs-".concat(String(v||y))],!1!==A&&p["grid-xs-".concat(String(A))],!1!==T&&p["grid-sm-".concat(String(T))],!1!==k&&p["grid-md-".concat(String(k))],!1!==P&&p["grid-lg-".concat(String(P))],!1!==F&&p["grid-xl-".concat(String(F))]);return a.createElement(u,Object(r.a)({className:L,ref:n},W))})),m=Object(c.a)((function(e){return Object(r.a)({root:{},container:{boxSizing:"border-box",display:"flex",flexWrap:"wrap",width:"100%"},item:{boxSizing:"border-box",margin:"0"},zeroMinWidth:{minWidth:0},"direction-xs-column":{flexDirection:"column"},"direction-xs-column-reverse":{flexDirection:"column-reverse"},"direction-xs-row-reverse":{flexDirection:"row-reverse"},"wrap-xs-nowrap":{flexWrap:"nowrap"},"wrap-xs-wrap-reverse":{flexWrap:"wrap-reverse"},"align-items-xs-center":{alignItems:"center"},"align-items-xs-flex-start":{alignItems:"flex-start"},"align-items-xs-flex-end":{alignItems:"flex-end"},"align-items-xs-baseline":{alignItems:"baseline"},"align-content-xs-center":{alignContent:"center"},"align-content-xs-flex-start":{alignContent:"flex-start"},"align-content-xs-flex-end":{alignContent:"flex-end"},"align-content-xs-space-between":{alignContent:"space-between"},"align-content-xs-space-around":{alignContent:"space-around"},"justify-content-xs-center":{justifyContent:"center"},"justify-content-xs-flex-end":{justifyContent:"flex-end"},"justify-content-xs-space-between":{justifyContent:"space-between"},"justify-content-xs-space-around":{justifyContent:"space-around"},"justify-content-xs-space-evenly":{justifyContent:"space-evenly"}},function(e,n){var t={};return s.forEach((function(o){var r=e.spacing(o);0!==r&&(t["spacing-".concat(n,"-").concat(o)]={margin:"-".concat(p(r,2)),width:"calc(100% + ".concat(p(r),")"),"& > $item":{padding:p(r,2)}})})),t}(e,"xs"),e.breakpoints.keys.reduce((function(n,t){return function(e,n,t){var o={};l.forEach((function(e){var n="grid-".concat(t,"-").concat(e);if(!0!==e)if("auto"!==e){var r="".concat(Math.round(e/12*1e8)/1e6,"%");o[n]={flexBasis:r,flexGrow:0,maxWidth:r}}else o[n]={flexBasis:"auto",flexGrow:0,maxWidth:"none"};else o[n]={flexBasis:0,flexGrow:1,maxWidth:"100%"}})),"xs"===t?Object(r.a)(e,o):e[n.breakpoints.up(t)]=o}(n,e,t),n}),{}))}),{name:"MuiGrid"})(d);n.a=m},1189:function(e,n,t){"use strict";var o=t(0),r=t(381),a=t(1);const i=Object(o.forwardRef)((function(e,n){const{code:t,language:o,...i}=e;return Object(a.jsx)(r.a,{component:"pre",className:"language-".concat(o||"jsx"),ref:n,...i,children:t})}));n.a=i},1194:function(e,n,t){"use strict";var o=t(2),r=t(7),a=t(0),i=t(8),c=t(11),s=a.forwardRef((function(e,n){var t=e.classes,c=e.className,s=e.dividers,l=void 0!==s&&s,p=Object(r.a)(e,["classes","className","dividers"]);return a.createElement("div",Object(o.a)({className:Object(i.a)(t.root,c,l&&t.dividers),ref:n},p))}));n.a=Object(c.a)((function(e){return{root:{flex:"1 1 auto",WebkitOverflowScrolling:"touch",overflowY:"auto",padding:"8px 24px","&:first-child":{paddingTop:20}},dividers:{padding:"16px 24px",borderTop:"1px solid ".concat(e.palette.divider),borderBottom:"1px solid ".concat(e.palette.divider)}}}),{name:"MuiDialogContent"})(s)},1196:function(e,n,t){"use strict";var o=t(2),r=t(7),a=t(0),i=t(8),c=t(11),s=a.forwardRef((function(e,n){var t=e.disableSpacing,c=void 0!==t&&t,s=e.classes,l=e.className,p=Object(r.a)(e,["disableSpacing","classes","className"]);return a.createElement("div",Object(o.a)({className:Object(i.a)(s.root,l,!c&&s.spacing),ref:n},p))}));n.a=Object(c.a)({root:{display:"flex",alignItems:"center",padding:8,justifyContent:"flex-end",flex:"0 0 auto"},spacing:{"& > :not(:first-child)":{marginLeft:8}}},{name:"MuiDialogActions"})(s)},1247:function(e,n,t){"use strict";var o=t(2),r=t(7),a=t(0),i=t(8),c=t(11),s=t(194),l=a.forwardRef((function(e,n){var t=e.children,c=e.classes,l=e.className,p=e.disableTypography,d=void 0!==p&&p,m=Object(r.a)(e,["children","classes","className","disableTypography"]);return a.createElement("div",Object(o.a)({className:Object(i.a)(c.root,l),ref:n},m),d?t:a.createElement(s.a,{component:"h2",variant:"h6"},t))}));n.a=Object(c.a)({root:{margin:0,padding:"16px 24px",flex:"0 0 auto"}},{name:"MuiDialogTitle"})(l)},1290:function(e,n,t){"use strict";var o=t(2),r=t(0),a=t(11),i=t(194),c=r.forwardRef((function(e,n){return r.createElement(i.a,Object(o.a)({component:"p",variant:"body1",color:"textSecondary",ref:n},e))}));n.a=Object(a.a)({root:{marginBottom:12}},{name:"MuiDialogContentText"})(c)},2127:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return l}));var o=t(0),r=t.n(o),a=t(1072),i=t(1041),c=t(1);const s=Object(a.a)((e=>({paper:{border:"1px solid",padding:e.spacing(1),backgroundColor:e.palette.background.paper}})));function l(){const e=s(),[n,t]=r.a.useState(null),o=Boolean(n),a=o?"simple-popper":void 0;return Object(c.jsxs)("div",{children:[Object(c.jsx)("button",{"aria-describedby":a,type:"button",onClick:e=>{t(n?null:e.currentTarget)},children:"Toggle Popper"}),Object(c.jsx)(i.a,{id:a,open:o,anchorEl:n,children:Object(c.jsx)("div",{className:e.paper,children:"The content of the Popper."})})]})}},2128:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Popper from '@material-ui/core/Popper';\n\nconst useStyles = makeStyles((theme) => ({\n paper: {\n border: '1px solid',\n padding: theme.spacing(1),\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function SimplePopper() {\n const classes = useStyles();\n const [anchorEl, setAnchorEl] = React.useState(null);\n\n const handleClick = (event) => {\n setAnchorEl(anchorEl ? null : event.currentTarget);\n };\n\n const open = Boolean(anchorEl);\n const id = open ? 'simple-popper' : undefined;\n\n return (\n <div>\n <button aria-describedby={id} type=\"button\" onClick={handleClick}>\n Toggle Popper\n </button>\n <Popper id={id} open={open} anchorEl={anchorEl}>\n <div className={classes.paper}>The content of the Popper.</div>\n </Popper>\n </div>\n );\n}\n"},2129:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return p}));var o=t(0),r=t.n(o),a=t(1072),i=t(1041),c=t(546),s=t(1);const l=Object(a.a)((e=>({paper:{border:"1px solid",padding:e.spacing(1),backgroundColor:e.palette.background.paper}})));function p(){const e=l(),[n,t]=r.a.useState(null),o=Boolean(n),a=o?"transitions-popper":void 0;return Object(s.jsxs)("div",{children:[Object(s.jsx)("button",{"aria-describedby":a,type:"button",onClick:e=>{t(n?null:e.currentTarget)},children:"Toggle Popper"}),Object(s.jsx)(i.a,{id:a,open:o,anchorEl:n,transition:!0,children:n=>{let{TransitionProps:t}=n;return Object(s.jsx)(c.a,{...t,timeout:350,children:Object(s.jsx)("div",{className:e.paper,children:"The content of the Popper."})})}})]})}},2130:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Popper from '@material-ui/core/Popper';\nimport Fade from '@material-ui/core/Fade';\n\nconst useStyles = makeStyles((theme) => ({\n paper: {\n border: '1px solid',\n padding: theme.spacing(1),\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nexport default function TransitionsPopper() {\n const classes = useStyles();\n const [anchorEl, setAnchorEl] = React.useState(null);\n\n const handleClick = (event) => {\n setAnchorEl(anchorEl ? null : event.currentTarget);\n };\n\n const open = Boolean(anchorEl);\n const id = open ? 'transitions-popper' : undefined;\n\n return (\n <div>\n <button aria-describedby={id} type=\"button\" onClick={handleClick}>\n Toggle Popper\n </button>\n <Popper id={id} open={open} anchorEl={anchorEl} transition>\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <div className={classes.paper}>The content of the Popper.</div>\n </Fade>\n )}\n </Popper>\n </div>\n );\n}\n"},2131:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return d}));var o=t(0),r=t.n(o),a=t(1072),i=t(1041),c=t(1447),s=t(1);const l=Object(a.a)((e=>({paper:{border:"1px solid",padding:e.spacing(1),backgroundColor:e.palette.background.paper}}))),p=r.a.forwardRef((function(e,n){const{in:t,children:o,onEnter:r,onExited:a,...i}=e,l=Object(c.useSpring)({from:{opacity:0},to:{opacity:t?1:0},onStart:()=>{t&&r&&r()},onRest:()=>{!t&&a&&a()}});return Object(s.jsx)(c.animated.div,{ref:n,style:l,...i,children:o})}));function d(){const e=l(),[n,t]=r.a.useState(null),o=Boolean(n),a=o?"spring-popper":void 0;return Object(s.jsxs)("div",{children:[Object(s.jsx)("button",{"aria-describedby":a,type:"button",onClick:e=>{t(n?null:e.currentTarget)},children:"Toggle Popper"}),Object(s.jsx)(i.a,{id:a,open:o,anchorEl:n,transition:!0,children:n=>{let{TransitionProps:t}=n;return Object(s.jsx)(p,{...t,children:Object(s.jsx)("div",{className:e.paper,children:"The content of the Popper."})})}})]})}},2132:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Popper from '@material-ui/core/Popper';\nimport { useSpring, animated } from 'react-spring/web.cjs'; // web.cjs is required for IE 11 support\n\nconst useStyles = makeStyles((theme) => ({\n paper: {\n border: '1px solid',\n padding: theme.spacing(1),\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\nconst Fade = React.forwardRef(function Fade(props, ref) {\n const { in: open, children, onEnter, onExited, ...other } = props;\n const style = useSpring({\n from: { opacity: 0 },\n to: { opacity: open ? 1 : 0 },\n onStart: () => {\n if (open && onEnter) {\n onEnter();\n }\n },\n onRest: () => {\n if (!open && onExited) {\n onExited();\n }\n },\n });\n\n return (\n <animated.div ref={ref} style={style} {...other}>\n {children}\n </animated.div>\n );\n});\n\nFade.propTypes = {\n children: PropTypes.element,\n in: PropTypes.bool,\n onEnter: PropTypes.func,\n onExited: PropTypes.func,\n};\n\nexport default function SpringPopper() {\n const classes = useStyles();\n const [anchorEl, setAnchorEl] = React.useState(null);\n\n const handleClick = (event) => {\n setAnchorEl(anchorEl ? null : event.currentTarget);\n };\n\n const open = Boolean(anchorEl);\n const id = open ? 'spring-popper' : undefined;\n\n return (\n <div>\n <button aria-describedby={id} type=\"button\" onClick={handleClick}>\n Toggle Popper\n </button>\n <Popper id={id} open={open} anchorEl={anchorEl} transition>\n {({ TransitionProps }) => (\n <Fade {...TransitionProps}>\n <div className={classes.paper}>The content of the Popper.</div>\n </Fade>\n )}\n </Popper>\n </div>\n );\n}\n"},2133:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return h}));var o=t(0),r=t.n(o),a=t(1072),i=t(1041),c=t(194),s=t(1172),l=t(1098),p=t(546),d=t(193),m=t(1);const u=Object(a.a)((e=>({root:{width:500},typography:{padding:e.spacing(2)}})));function h(){const[e,n]=r.a.useState(null),[t,o]=r.a.useState(!1),[a,h]=r.a.useState(),b=u(),j=e=>t=>{n(t.currentTarget),o((n=>a!==e||!n)),h(e)};return Object(m.jsxs)("div",{className:b.root,children:[Object(m.jsx)(i.a,{open:t,anchorEl:e,placement:a,transition:!0,children:e=>{let{TransitionProps:n}=e;return Object(m.jsx)(p.a,{...n,timeout:350,children:Object(m.jsx)(d.a,{children:Object(m.jsx)(c.a,{className:b.typography,children:"The content of the Popper."})})})}}),Object(m.jsx)(s.a,{container:!0,justifyContent:"center",children:Object(m.jsxs)(s.a,{item:!0,children:[Object(m.jsx)(l.a,{onClick:j("top-start"),children:"top-start"}),Object(m.jsx)(l.a,{onClick:j("top"),children:"top"}),Object(m.jsx)(l.a,{onClick:j("top-end"),children:"top-end"})]})}),Object(m.jsxs)(s.a,{container:!0,justifyContent:"center",children:[Object(m.jsxs)(s.a,{item:!0,xs:6,children:[Object(m.jsx)(l.a,{onClick:j("left-start"),children:"left-start"}),Object(m.jsx)("br",{}),Object(m.jsx)(l.a,{onClick:j("left"),children:"left"}),Object(m.jsx)("br",{}),Object(m.jsx)(l.a,{onClick:j("left-end"),children:"left-end"})]}),Object(m.jsxs)(s.a,{item:!0,container:!0,xs:6,alignItems:"flex-end",direction:"column",children:[Object(m.jsx)(s.a,{item:!0,children:Object(m.jsx)(l.a,{onClick:j("right-start"),children:"right-start"})}),Object(m.jsx)(s.a,{item:!0,children:Object(m.jsx)(l.a,{onClick:j("right"),children:"right"})}),Object(m.jsx)(s.a,{item:!0,children:Object(m.jsx)(l.a,{onClick:j("right-end"),children:"right-end"})})]})]}),Object(m.jsx)(s.a,{container:!0,justifyContent:"center",children:Object(m.jsxs)(s.a,{item:!0,children:[Object(m.jsx)(l.a,{onClick:j("bottom-start"),children:"bottom-start"}),Object(m.jsx)(l.a,{onClick:j("bottom"),children:"bottom"}),Object(m.jsx)(l.a,{onClick:j("bottom-end"),children:"bottom-end"})]})})]})}},2134:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Popper from '@material-ui/core/Popper';\nimport Typography from '@material-ui/core/Typography';\nimport Grid from '@material-ui/core/Grid';\nimport Button from '@material-ui/core/Button';\nimport Fade from '@material-ui/core/Fade';\nimport Paper from '@material-ui/core/Paper';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: 500,\n },\n typography: {\n padding: theme.spacing(2),\n },\n}));\n\nexport default function PositionedPopper() {\n const [anchorEl, setAnchorEl] = React.useState(null);\n const [open, setOpen] = React.useState(false);\n const [placement, setPlacement] = React.useState();\n const classes = useStyles();\n\n const handleClick = (newPlacement) => (event) => {\n setAnchorEl(event.currentTarget);\n setOpen((prev) => placement !== newPlacement || !prev);\n setPlacement(newPlacement);\n };\n\n return (\n <div className={classes.root}>\n <Popper open={open} anchorEl={anchorEl} placement={placement} transition>\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Paper>\n <Typography className={classes.typography}>The content of the Popper.</Typography>\n </Paper>\n </Fade>\n )}\n </Popper>\n <Grid container justifyContent=\"center\">\n <Grid item>\n <Button onClick={handleClick('top-start')}>top-start</Button>\n <Button onClick={handleClick('top')}>top</Button>\n <Button onClick={handleClick('top-end')}>top-end</Button>\n </Grid>\n </Grid>\n <Grid container justifyContent=\"center\">\n <Grid item xs={6}>\n <Button onClick={handleClick('left-start')}>left-start</Button>\n <br />\n <Button onClick={handleClick('left')}>left</Button>\n <br />\n <Button onClick={handleClick('left-end')}>left-end</Button>\n </Grid>\n <Grid item container xs={6} alignItems=\"flex-end\" direction=\"column\">\n <Grid item>\n <Button onClick={handleClick('right-start')}>right-start</Button>\n </Grid>\n <Grid item>\n <Button onClick={handleClick('right')}>right</Button>\n </Grid>\n <Grid item>\n <Button onClick={handleClick('right-end')}>right-end</Button>\n </Grid>\n </Grid>\n </Grid>\n <Grid container justifyContent=\"center\">\n <Grid item>\n <Button onClick={handleClick('bottom-start')}>bottom-start</Button>\n <Button onClick={handleClick('bottom')}>bottom</Button>\n <Button onClick={handleClick('bottom-end')}>bottom-end</Button>\n </Grid>\n </Grid>\n </div>\n );\n}\n"},2135:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return O}));var o=t(0),r=t.n(o),a=t(1072),i=t(1094),c=t(1189),s=t(1172),l=t(194),p=t(1098),d=t(1041),m=t(193),u=t(1196),h=t(1194),b=t(1290),j=t(1247),f=t(1095),g=t(1096),x=t(1);const v=Object(a.a)((e=>({root:{flexGrow:1},scrollContainer:{height:400,overflow:"auto",marginBottom:e.spacing(3)},scroll:{position:"relative",width:"230%",backgroundColor:e.palette.background.paper,height:"230%"},legend:{marginTop:e.spacing(2),maxWidth:300},paper:{maxWidth:400,overflow:"auto"},select:{width:200},popper:{zIndex:1,'&[x-placement*="bottom"] $arrow':{top:0,left:0,marginTop:"-0.9em",width:"3em",height:"1em","&::before":{borderWidth:"0 1em 1em 1em",borderColor:"transparent transparent ".concat(e.palette.background.paper," transparent")}},'&[x-placement*="top"] $arrow':{bottom:0,left:0,marginBottom:"-0.9em",width:"3em",height:"1em","&::before":{borderWidth:"1em 1em 0 1em",borderColor:"".concat(e.palette.background.paper," transparent transparent transparent")}},'&[x-placement*="right"] $arrow':{left:0,marginLeft:"-0.9em",height:"3em",width:"1em","&::before":{borderWidth:"1em 1em 1em 0",borderColor:"transparent ".concat(e.palette.background.paper," transparent transparent")}},'&[x-placement*="left"] $arrow':{right:0,marginRight:"-0.9em",height:"3em",width:"1em","&::before":{borderWidth:"1em 0 1em 1em",borderColor:"transparent transparent transparent ".concat(e.palette.background.paper)}}},arrow:{position:"absolute",fontSize:7,width:"3em",height:"3em","&::before":{content:'""',margin:"auto",display:"block",width:0,height:0,borderStyle:"solid"}}})));function O(){const e=r.a.useRef(null),[n,t]=r.a.useState(null),[o,a]=r.a.useState(!1),[O,y]=r.a.useState(!1),[w,P]=r.a.useState(!0),[C,k]=r.a.useState(!1),[S,T]=r.a.useState("bottom"),[N,B]=r.a.useState("scrollParent"),E=()=>{k((e=>!e))},R=v(),D='\n <Popper\n placement="'.concat(S,'"\n disablePortal={').concat(O,"}\n modifiers={{\n flip: {\n enabled: ").concat(w,",\n },\n preventOverflow: {\n enabled: ").concat("disabled"!==N,",\n boundariesElement: '").concat("disabled"===N?"scrollParent":N,"',\n },\n arrow: {\n enabled: ").concat(o,",\n element: arrowRef,\n },\n }}\n >\n "),F=C?"scroll-playground":null;return Object(x.jsxs)("div",{className:R.root,children:[Object(x.jsx)("div",{className:R.scrollContainer,children:Object(x.jsx)(s.a,{className:R.scroll,container:!0,alignItems:"center",justifyContent:"center",ref:e=>{if(!e)return;const n=e.parentElement;n.scrollTop=e.clientHeight/4,n.scrollLeft=e.clientWidth/4},children:Object(x.jsxs)("div",{children:[Object(x.jsx)(p.a,{ref:e,variant:"contained",onClick:E,"aria-describedby":F,children:"Toggle Popper"}),Object(x.jsx)(l.a,{className:R.legend,children:"Scroll around this container to experiment with flip and preventOverflow modifiers."}),Object(x.jsxs)(d.a,{id:F,open:C,anchorEl:e.current,placement:S,disablePortal:O,className:R.popper,modifiers:{flip:{enabled:w},arrow:{enabled:o,element:n},preventOverflow:{enabled:"disabled"!==N,boundariesElement:"disabled"===N?"scrollParent":N}},children:[o?Object(x.jsx)("span",{className:R.arrow,ref:t}):null,Object(x.jsxs)(m.a,{className:R.paper,children:[Object(x.jsx)(j.a,{children:"Use Google's location service?"}),Object(x.jsx)(h.a,{children:Object(x.jsx)(b.a,{children:"Let Google help apps determine location."})}),Object(x.jsxs)(u.a,{children:[Object(x.jsx)(p.a,{onClick:E,color:"primary",children:"Disagree"}),Object(x.jsx)(p.a,{onClick:E,color:"primary",children:"Agree"})]})]})]})]})})}),Object(x.jsxs)(s.a,{container:!0,spacing:2,children:[Object(x.jsxs)(s.a,{item:!0,xs:12,sm:6,children:[Object(x.jsx)(l.a,{gutterBottom:!0,variant:"h6",children:"Appearance"}),Object(x.jsx)("div",{children:Object(x.jsxs)(g.a,{margin:"normal",className:R.select,label:"Placement",select:!0,InputLabelProps:{id:"scroll-playground-placement-label"},SelectProps:{native:!0,inputProps:{"aria-labelledby":"scroll-playground-placement-label"}},value:S,onChange:e=>{T(e.target.value)},children:[Object(x.jsx)("option",{value:"top-start",children:"top-start"}),Object(x.jsx)("option",{value:"top",children:"top"}),Object(x.jsx)("option",{value:"top-end",children:"top-end"}),Object(x.jsx)("option",{value:"left-start",children:"left-start"}),Object(x.jsx)("option",{value:"left",children:"left"}),Object(x.jsx)("option",{value:"left-end",children:"left-end"}),Object(x.jsx)("option",{value:"right-start",children:"right-start"}),Object(x.jsx)("option",{value:"right",children:"right"}),Object(x.jsx)("option",{value:"right-end",children:"right-end"}),Object(x.jsx)("option",{value:"bottom-start",children:"bottom-start"}),Object(x.jsx)("option",{value:"bottom",children:"bottom"}),Object(x.jsx)("option",{value:"bottom-end",children:"bottom-end"})]})}),Object(x.jsx)(i.a,{control:Object(x.jsx)(f.a,{checked:O,onChange:e=>{y(e.target.checked)},value:"disablePortal"}),label:"Disable portal (the children stay within it's parent DOM hierarchy)"})]}),Object(x.jsxs)(s.a,{item:!0,xs:12,sm:6,children:[Object(x.jsx)(l.a,{gutterBottom:!0,variant:"h6",children:"Modifiers (options from Popper.js)"}),Object(x.jsx)("div",{children:Object(x.jsxs)(g.a,{margin:"normal",className:R.select,label:"Prevent overflow",select:!0,InputLabelProps:{id:"scroll-playground-overflow-label"},SelectProps:{native:!0,inputProps:{"aria-labelledby":"scroll-playground-overflow-label"}},value:N,onChange:e=>{B(e.target.value)},children:[Object(x.jsx)("option",{value:"disabled",children:"disabled"}),Object(x.jsx)("option",{value:"scrollParent",children:"scrollParent"}),Object(x.jsx)("option",{value:"viewport",children:"viewport"}),Object(x.jsx)("option",{value:"window",children:"window"})]})}),Object(x.jsx)(i.a,{control:Object(x.jsx)(f.a,{checked:w,onChange:e=>{P(e.target.checked)},value:"flip"}),label:["Flip","(flip the popper\u2019s placement when it starts to overlap its reference element)"].join(" ")}),Object(x.jsx)(i.a,{control:Object(x.jsx)(f.a,{checked:o,onChange:e=>{a(e.target.checked)},value:"arrow"}),label:"Arrow"})]})]}),Object(x.jsx)(c.a,{code:D,language:"jsx"})]})}},2136:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport HighlightedCode from 'app/main/documentation/material-ui-components/utils/HighlightedCode';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport Button from '@material-ui/core/Button';\nimport Popper from '@material-ui/core/Popper';\nimport Paper from '@material-ui/core/Paper';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Switch from '@material-ui/core/Switch';\nimport TextField from '@material-ui/core/TextField';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n scrollContainer: {\n height: 400,\n overflow: 'auto',\n marginBottom: theme.spacing(3),\n },\n scroll: {\n position: 'relative',\n width: '230%',\n backgroundColor: theme.palette.background.paper,\n height: '230%',\n },\n legend: {\n marginTop: theme.spacing(2),\n maxWidth: 300,\n },\n paper: {\n maxWidth: 400,\n overflow: 'auto',\n },\n select: {\n width: 200,\n },\n popper: {\n zIndex: 1,\n '&[x-placement*=\"bottom\"] $arrow': {\n top: 0,\n left: 0,\n marginTop: '-0.9em',\n width: '3em',\n height: '1em',\n '&::before': {\n borderWidth: '0 1em 1em 1em',\n borderColor: `transparent transparent ${theme.palette.background.paper} transparent`,\n },\n },\n '&[x-placement*=\"top\"] $arrow': {\n bottom: 0,\n left: 0,\n marginBottom: '-0.9em',\n width: '3em',\n height: '1em',\n '&::before': {\n borderWidth: '1em 1em 0 1em',\n borderColor: `${theme.palette.background.paper} transparent transparent transparent`,\n },\n },\n '&[x-placement*=\"right\"] $arrow': {\n left: 0,\n marginLeft: '-0.9em',\n height: '3em',\n width: '1em',\n '&::before': {\n borderWidth: '1em 1em 1em 0',\n borderColor: `transparent ${theme.palette.background.paper} transparent transparent`,\n },\n },\n '&[x-placement*=\"left\"] $arrow': {\n right: 0,\n marginRight: '-0.9em',\n height: '3em',\n width: '1em',\n '&::before': {\n borderWidth: '1em 0 1em 1em',\n borderColor: `transparent transparent transparent ${theme.palette.background.paper}`,\n },\n },\n },\n arrow: {\n position: 'absolute',\n fontSize: 7,\n width: '3em',\n height: '3em',\n '&::before': {\n content: '\"\"',\n margin: 'auto',\n display: 'block',\n width: 0,\n height: 0,\n borderStyle: 'solid',\n },\n },\n}));\n\nexport default function ScrollPlayground() {\n const anchorRef = React.useRef(null);\n const [arrowRef, setArrowRef] = React.useState(null);\n\n const [arrow, setArrow] = React.useState(false);\n const [disablePortal, setDisablePortal] = React.useState(false);\n const [flip, setFlip] = React.useState(true);\n const [open, setOpen] = React.useState(false);\n const [placement, setPlacement] = React.useState('bottom');\n const [preventOverflow, setPreventOverflow] = React.useState('scrollParent');\n\n const handleClickButton = () => {\n setOpen((prevOpen) => !prevOpen);\n };\n\n const centerScroll = (element) => {\n if (!element) {\n return;\n }\n\n const container = element.parentElement;\n container.scrollTop = element.clientHeight / 4;\n container.scrollLeft = element.clientWidth / 4;\n };\n\n const classes = useStyles();\n\n const jsx = `\n <Popper\n placement=\"${placement}\"\n disablePortal={${disablePortal}}\n modifiers={{\n flip: {\n enabled: ${flip},\n },\n preventOverflow: {\n enabled: ${preventOverflow !== 'disabled'},\n boundariesElement: '${preventOverflow === 'disabled' ? 'scrollParent' : preventOverflow}',\n },\n arrow: {\n enabled: ${arrow},\n element: arrowRef,\n },\n }}\n >\n `;\n const id = open ? 'scroll-playground' : null;\n\n return (\n <div className={classes.root}>\n <div className={classes.scrollContainer}>\n <Grid\n className={classes.scroll}\n container\n alignItems=\"center\"\n justifyContent=\"center\"\n ref={centerScroll}\n >\n <div>\n <Button\n ref={anchorRef}\n variant=\"contained\"\n onClick={handleClickButton}\n aria-describedby={id}\n >\n Toggle Popper\n </Button>\n <Typography className={classes.legend}>\n Scroll around this container to experiment with flip and preventOverflow modifiers.\n </Typography>\n <Popper\n id={id}\n open={open}\n anchorEl={anchorRef.current}\n placement={placement}\n disablePortal={disablePortal}\n className={classes.popper}\n modifiers={{\n flip: {\n enabled: flip,\n },\n arrow: {\n enabled: arrow,\n element: arrowRef,\n },\n preventOverflow: {\n enabled: preventOverflow !== 'disabled',\n boundariesElement:\n preventOverflow === 'disabled' ? 'scrollParent' : preventOverflow,\n },\n }}\n >\n {arrow ? <span className={classes.arrow} ref={setArrowRef} /> : null}\n <Paper className={classes.paper}>\n <DialogTitle>{\"Use Google's location service?\"}</DialogTitle>\n <DialogContent>\n <DialogContentText>Let Google help apps determine location.</DialogContentText>\n </DialogContent>\n <DialogActions>\n <Button onClick={handleClickButton} color=\"primary\">\n Disagree\n </Button>\n <Button onClick={handleClickButton} color=\"primary\">\n Agree\n </Button>\n </DialogActions>\n </Paper>\n </Popper>\n </div>\n </Grid>\n </div>\n <Grid container spacing={2}>\n <Grid item xs={12} sm={6}>\n <Typography gutterBottom variant=\"h6\">\n Appearance\n </Typography>\n <div>\n <TextField\n margin=\"normal\"\n className={classes.select}\n label=\"Placement\"\n select\n InputLabelProps={{ id: 'scroll-playground-placement-label' }}\n SelectProps={{\n native: true,\n inputProps: { 'aria-labelledby': 'scroll-playground-placement-label' },\n }}\n value={placement}\n onChange={(event) => {\n setPlacement(event.target.value);\n }}\n >\n <option value=\"top-start\">top-start</option>\n <option value=\"top\">top</option>\n <option value=\"top-end\">top-end</option>\n <option value=\"left-start\">left-start</option>\n <option value=\"left\">left</option>\n <option value=\"left-end\">left-end</option>\n <option value=\"right-start\">right-start</option>\n <option value=\"right\">right</option>\n <option value=\"right-end\">right-end</option>\n <option value=\"bottom-start\">bottom-start</option>\n <option value=\"bottom\">bottom</option>\n <option value=\"bottom-end\">bottom-end</option>\n </TextField>\n </div>\n <FormControlLabel\n control={\n <Switch\n checked={disablePortal}\n onChange={(event) => {\n setDisablePortal(event.target.checked);\n }}\n value=\"disablePortal\"\n />\n }\n label=\"Disable portal (the children stay within it's parent DOM hierarchy)\"\n />\n </Grid>\n <Grid item xs={12} sm={6}>\n <Typography gutterBottom variant=\"h6\">\n Modifiers (options from Popper.js)\n </Typography>\n <div>\n <TextField\n margin=\"normal\"\n className={classes.select}\n label=\"Prevent overflow\"\n select\n InputLabelProps={{ id: 'scroll-playground-overflow-label' }}\n SelectProps={{\n native: true,\n inputProps: { 'aria-labelledby': 'scroll-playground-overflow-label' },\n }}\n value={preventOverflow}\n onChange={(event) => {\n setPreventOverflow(event.target.value);\n }}\n >\n <option value=\"disabled\">disabled</option>\n <option value=\"scrollParent\">scrollParent</option>\n <option value=\"viewport\">viewport</option>\n <option value=\"window\">window</option>\n </TextField>\n </div>\n <FormControlLabel\n control={\n <Switch\n checked={flip}\n onChange={(event) => {\n setFlip(event.target.checked);\n }}\n value=\"flip\"\n />\n }\n label={[\n 'Flip',\n '(flip the popper\u2019s placement when it starts to overlap its reference element)',\n ].join(' ')}\n />\n <FormControlLabel\n control={\n <Switch\n checked={arrow}\n onChange={(event) => {\n setArrow(event.target.checked);\n }}\n value=\"arrow\"\n />\n }\n label=\"Arrow\"\n />\n </Grid>\n </Grid>\n <HighlightedCode code={jsx} language=\"jsx\" />\n </div>\n );\n}\n"},2137:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return m}));var o=t(0),r=t.n(o),a=t(1072),i=t(1041),c=t(194),s=t(546),l=t(193),p=t(1);const d=Object(a.a)((e=>({typography:{padding:e.spacing(2)}})));function m(){const[e,n]=r.a.useState(!1),[t,o]=r.a.useState(null),a=d(),m=()=>{n(!1)},u=e?"faked-reference-popper":void 0;return Object(p.jsxs)("div",{onMouseLeave:m,children:[Object(p.jsx)(c.a,{"aria-describedby":u,onMouseUp:()=>{const e=window.getSelection();if(!e||e.anchorOffset===e.focusOffset)return void m();const t=()=>e.getRangeAt(0).getBoundingClientRect();n(!0),o({clientWidth:t().width,clientHeight:t().height,getBoundingClientRect:t})},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(p.jsx)(i.a,{id:u,open:e,anchorEl:t,transition:!0,placement:"bottom-start",children:e=>{let{TransitionProps:n}=e;return Object(p.jsx)(s.a,{...n,timeout:350,children:Object(p.jsx)(l.a,{children:Object(p.jsx)(c.a,{className:a.typography,children:"The content of the Popper."})})})}})]})}},2138:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Popper from '@material-ui/core/Popper';\nimport Typography from '@material-ui/core/Typography';\nimport Fade from '@material-ui/core/Fade';\nimport Paper from '@material-ui/core/Paper';\n\nconst useStyles = makeStyles((theme) => ({\n typography: {\n padding: theme.spacing(2),\n },\n}));\n\nexport default function FakedReferencePopper() {\n const [open, setOpen] = React.useState(false);\n const [anchorEl, setAnchorEl] = React.useState(null);\n const classes = useStyles();\n\n const handleClose = () => {\n setOpen(false);\n };\n\n const handleMouseUp = () => {\n const selection = window.getSelection();\n\n // Resets when the selection has a length of 0\n if (!selection || selection.anchorOffset === selection.focusOffset) {\n handleClose();\n return;\n }\n\n const getBoundingClientRect = () => selection.getRangeAt(0).getBoundingClientRect();\n\n setOpen(true);\n setAnchorEl({\n clientWidth: getBoundingClientRect().width,\n clientHeight: getBoundingClientRect().height,\n getBoundingClientRect,\n });\n };\n\n const id = open ? 'faked-reference-popper' : undefined;\n\n return (\n <div onMouseLeave={handleClose}>\n <Typography aria-describedby={id} onMouseUp={handleMouseUp}>\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 <Popper id={id} open={open} anchorEl={anchorEl} transition placement=\"bottom-start\">\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Paper>\n <Typography className={classes.typography}>The content of the Popper.</Typography>\n </Paper>\n </Fade>\n )}\n </Popper>\n </div>\n );\n}\n"},2139:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return u}));t(0);var o=t(1072),r=t(194),a=t(1098),i=t(1041),c=t(1356),s=t.n(c),l=t(546),p=t(193),d=t(1);const m=Object(o.a)((e=>({typography:{padding:e.spacing(2)}})));function u(){const e=m();return Object(d.jsx)(s.a,{variant:"popper",popupId:"demo-popup-popper",children:n=>Object(d.jsxs)("div",{children:[Object(d.jsx)(a.a,{variant:"contained",color:"primary",...Object(c.bindToggle)(n),children:"Toggle Popper"}),Object(d.jsx)(i.a,{...Object(c.bindPopper)(n),transition:!0,children:n=>{let{TransitionProps:t}=n;return Object(d.jsx)(l.a,{...t,timeout:350,children:Object(d.jsx)(p.a,{children:Object(d.jsx)(r.a,{className:e.typography,children:"The content of the Popper."})})})}})]})})}},2140:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Button from '@material-ui/core/Button';\nimport Popper from '@material-ui/core/Popper';\nimport PopupState, { bindToggle, bindPopper } from 'material-ui-popup-state';\nimport Fade from '@material-ui/core/Fade';\nimport Paper from '@material-ui/core/Paper';\n\nconst useStyles = makeStyles((theme) => ({\n typography: {\n padding: theme.spacing(2),\n },\n}));\n\nexport default function PopperPopupState() {\n const classes = useStyles();\n\n return (\n <PopupState variant=\"popper\" popupId=\"demo-popup-popper\">\n {(popupState) => (\n <div>\n <Button variant=\"contained\" color=\"primary\" {...bindToggle(popupState)}>\n Toggle Popper\n </Button>\n <Popper {...bindPopper(popupState)} transition>\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Paper>\n <Typography className={classes.typography}>The content of the Popper.</Typography>\n </Paper>\n </Fade>\n )}\n </Popper>\n </div>\n )}\n </PopupState>\n );\n}\n"},2596:function(e,n,t){"use strict";t.r(n);var o=t(1130),r=t(1098),a=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)(r.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/popper",target:"_blank",role:"button",children:[Object(s.jsx)(a.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:"Popper"}),Object(s.jsx)(i.a,{className:"description",children:"A Popper can be used to display some content on top of another. It's an alternative to react-popper."}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:["Some important features of the ",Object(s.jsx)("code",{children:"Popper"})," component:"]}),Object(s.jsxs)("ul",{children:[Object(s.jsxs)("li",{children:["\ud83d\udd77 Popper relies on the 3rd party library (",Object(s.jsx)("a",{href:"https://github.com/FezVrasta/popper.js",children:"Popper.js"}),") for perfect positioning."]}),Object(s.jsx)("li",{children:"\ud83d\udc84 It's an alternative API to react-popper. It aims for simplicity."}),Object(s.jsxs)("li",{children:["\ud83d\udce6 ",Object(s.jsx)("a",{href:"/size-snapshot",children:"10 kB gzipped"})," (",Object(s.jsx)("a",{href:"https://bundlephobia.com/result?p=popper.js",children:"7 kB"})," from Popper.js)."]}),Object(s.jsxs)("li",{children:["The children is"," ",Object(s.jsx)("a",{href:"/components/portal/",children:Object(s.jsx)("code",{children:"Portal"})})," ","to the body of the document to avoid rendering problems. You can disable this behavior with ",Object(s.jsx)("code",{children:"disablePortal"}),"."]}),Object(s.jsxs)("li",{children:["The scroll isn't blocked like with the"," ",Object(s.jsx)("a",{href:"/components/popover/",children:Object(s.jsx)("code",{children:"Popover"})})," ","component. The placement of the popper updates with the available area in the viewport."]}),Object(s.jsxs)("li",{children:["Clicking away does not hide the ",Object(s.jsx)("code",{children:"Popper"})," component. If you need this behavior, you can use"," ",Object(s.jsx)("a",{href:"/components/click-away-listener/",children:Object(s.jsx)("code",{children:"ClickAwayListener"})})," ","- see the example in the"," ",Object(s.jsx)("a",{href:"/components/menus/#menulist-composition",children:"menu documentation section"}),"."]}),Object(s.jsxs)("li",{children:["The ",Object(s.jsx)("code",{children:"anchorEl"})," is passed as the reference object to create a new"," ",Object(s.jsx)("code",{children:"Popper.js"})," instance."]})]}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple Popper"}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2127).default,raw:t(2128)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Transitions"}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:"The open/close state of the popper can be animated with a render prop child and a transition component. This component should respect the following conditions:"}),Object(s.jsxs)("ul",{children:[Object(s.jsx)("li",{children:"Be a direct child descendent of the popper."}),Object(s.jsxs)("li",{children:["Call the ",Object(s.jsx)("code",{children:"onEnter"})," callback prop when the enter transition starts."]}),Object(s.jsxs)("li",{children:["Call the ",Object(s.jsx)("code",{children:"onExited"})," callback prop when the exit transition is completed. These two callbacks allow the popper to unmount the child content when closed and fully transitioned."]})]}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:["Popper has built-in support for"," ",Object(s.jsx)("a",{href:"https://github.com/reactjs/react-transition-group",children:"react-transition-group"}),"."]}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2129).default,raw:t(2130)})}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:["Alternatively, you can use"," ",Object(s.jsx)("a",{href:"https://github.com/react-spring/react-spring",children:"react-spring"}),"."]}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2131).default,raw:t(2132)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Positioned Popper"}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2133).default,raw:t(2134)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Scroll playground"}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2135).default,raw:t(2136)})}),Object(s.jsx)(i.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Faked reference object"}),Object(s.jsxs)(i.a,{className:"mb-16",component:"div",children:["The ",Object(s.jsx)("code",{children:"anchorEl"})," property can be a reference to a fake DOM element. You just need to create an object shaped like the"," ",Object(s.jsx)("a",{href:"https://github.com/FezVrasta/popper.js/blob/0642ce0ddeffe3c7c033a412d4d60ce7ec8193c3/packages/popper/index.d.ts#L118-L123",children:Object(s.jsx)("code",{children:"ReferenceObject"})}),"."]}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:"Highlight part of the text to see the popper:"}),Object(s.jsx)(i.a,{className:"mb-16",component:"div",children:Object(s.jsx)(o.a,{className:"my-24",iframe:!1,component:t(2137).default,raw:t(2138)})}),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 popper 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(2139).default,raw:t(2140)})})]})}}}]);
Zerion Mini Shell 1.0