%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[61],{1130:function(e,n,t){"use strict";t.d(n,"a",(function(){return N}));var l=t(118),a=t(1100),o=t(1109),i=t(1090),r=t(1117),s=t(1119),c=t(5),m=t(0),u=t(1024),d=t(551),p=t(1087),h=t(1099),j=t(11),b=t(370),v=t(371),x=t(1131),g=t.n(x),O=t(1);const f=Object(u.a)({productionPrefix:"iframe-"});class C extends m.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=e=>{this.contentDocument=e?e.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(b.a)({...Object(d.a)(),plugins:[...Object(d.a)().plugins,Object(v.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)(g.a,{head:this.renderHead(),ref:this.handleRef,className:Object(c.a)(n.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(O.jsx)(p.b,{jss:this.state.jss,generateClassName:f,sheetsManager:this.state.sheetsManager,children:Object(O.jsx)(h.a,{theme:t,children:Object(m.cloneElement)(e,{container:this.state.container})})}):null})}}var I=Object(j.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(C);function y(e){const[n,t]=Object(m.useState)(e.currentTabIndex),{component:u,raw:d,iframe:p,className:h}=e;return Object(O.jsxs)(o.a,{className:Object(c.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:[u&&Object(O.jsx)(r.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(i.a,{children:"remove_red_eye"})}),d&&Object(O.jsx)(r.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:u&&(p?Object(O.jsx)(I,{children:Object(O.jsx)(u,{})}):Object(O.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(O.jsx)(u,{})}))}),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)(l.a,{component:"pre",className:"language-javascript w-full",children:d.default})})})]})]})}y.defaultProps={currentTabIndex:0};var N=y},2175:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return p}));var l=t(0),a=t.n(l),o=t(1072),i=t(1038),r=t(1092),s=t(1039),c=t(1035),m=t(1044),u=t(1);const d=Object(o.a)((e=>({formControl:{margin:e.spacing(1),minWidth:120},selectEmpty:{marginTop:e.spacing(2)}})));function p(){const e=d(),[n,t]=a.a.useState(""),l=e=>{t(e.target.value)};return Object(u.jsxs)("div",{children:[Object(u.jsxs)(c.a,{className:e.formControl,children:[Object(u.jsx)(i.a,{id:"demo-simple-select-label",children:"Age"}),Object(u.jsxs)(m.a,{labelId:"demo-simple-select-label",id:"demo-simple-select",value:n,onChange:l,children:[Object(u.jsx)(r.a,{value:10,children:"Ten"}),Object(u.jsx)(r.a,{value:20,children:"Twenty"}),Object(u.jsx)(r.a,{value:30,children:"Thirty"})]})]}),Object(u.jsxs)(c.a,{className:e.formControl,children:[Object(u.jsx)(i.a,{id:"demo-simple-select-helper-label",children:"Age"}),Object(u.jsxs)(m.a,{labelId:"demo-simple-select-helper-label",id:"demo-simple-select-helper",value:n,onChange:l,children:[Object(u.jsx)(r.a,{value:"",children:Object(u.jsx)("em",{children:"None"})}),Object(u.jsx)(r.a,{value:10,children:"Ten"}),Object(u.jsx)(r.a,{value:20,children:"Twenty"}),Object(u.jsx)(r.a,{value:30,children:"Thirty"})]}),Object(u.jsx)(s.a,{children:"Some important helper text"})]}),Object(u.jsxs)(c.a,{className:e.formControl,children:[Object(u.jsxs)(m.a,{value:n,onChange:l,displayEmpty:!0,className:e.selectEmpty,inputProps:{"aria-label":"Without label"},children:[Object(u.jsx)(r.a,{value:"",children:Object(u.jsx)("em",{children:"None"})}),Object(u.jsx)(r.a,{value:10,children:"Ten"}),Object(u.jsx)(r.a,{value:20,children:"Twenty"}),Object(u.jsx)(r.a,{value:30,children:"Thirty"})]}),Object(u.jsx)(s.a,{children:"Without label"})]}),Object(u.jsxs)(c.a,{className:e.formControl,children:[Object(u.jsx)(i.a,{shrink:!0,id:"demo-simple-select-placeholder-label-label",children:"Age"}),Object(u.jsxs)(m.a,{labelId:"demo-simple-select-placeholder-label-label",id:"demo-simple-select-placeholder-label",value:n,onChange:l,displayEmpty:!0,className:e.selectEmpty,children:[Object(u.jsx)(r.a,{value:"",children:Object(u.jsx)("em",{children:"None"})}),Object(u.jsx)(r.a,{value:10,children:"Ten"}),Object(u.jsx)(r.a,{value:20,children:"Twenty"}),Object(u.jsx)(r.a,{value:30,children:"Thirty"})]}),Object(u.jsx)(s.a,{children:"Label + placeholder"})]}),Object(u.jsxs)(c.a,{className:e.formControl,disabled:!0,children:[Object(u.jsx)(i.a,{id:"demo-simple-select-disabled-label",children:"Name"}),Object(u.jsxs)(m.a,{labelId:"demo-simple-select-disabled-label",id:"demo-simple-select-disabled",value:n,onChange:l,children:[Object(u.jsx)(r.a,{value:"",children:Object(u.jsx)("em",{children:"None"})}),Object(u.jsx)(r.a,{value:10,children:"Ten"}),Object(u.jsx)(r.a,{value:20,children:"Twenty"}),Object(u.jsx)(r.a,{value:30,children:"Thirty"})]}),Object(u.jsx)(s.a,{children:"Disabled"})]}),Object(u.jsxs)(c.a,{className:e.formControl,error:!0,children:[Object(u.jsx)(i.a,{id:"demo-simple-select-error-label",children:"Name"}),Object(u.jsxs)(m.a,{labelId:"demo-simple-select-error-label",id:"demo-simple-select-error",value:n,onChange:l,renderValue:e=>"\u26a0\ufe0f - ".concat(e),children:[Object(u.jsx)(r.a,{value:"",children:Object(u.jsx)("em",{children:"None"})}),Object(u.jsx)(r.a,{value:10,children:"Ten"}),Object(u.jsx)(r.a,{value:20,children:"Twenty"}),Object(u.jsx)(r.a,{value:30,children:"Thirty"})]}),Object(u.jsx)(s.a,{children:"Error"})]}),Object(u.jsxs)(c.a,{className:e.formControl,children:[Object(u.jsx)(i.a,{id:"demo-simple-select-readonly-label",children:"Name"}),Object(u.jsxs)(m.a,{labelId:"demo-simple-select-readonly-label",id:"demo-simple-select-readonly",value:n,onChange:l,inputProps:{readOnly:!0},children:[Object(u.jsx)(r.a,{value:"",children:Object(u.jsx)("em",{children:"None"})}),Object(u.jsx)(r.a,{value:10,children:"Ten"}),Object(u.jsx)(r.a,{value:20,children:"Twenty"}),Object(u.jsx)(r.a,{value:30,children:"Thirty"})]}),Object(u.jsx)(s.a,{children:"Read only"})]}),Object(u.jsxs)(c.a,{className:e.formControl,children:[Object(u.jsx)(i.a,{id:"demo-simple-select-autowidth-label",children:"Age"}),Object(u.jsxs)(m.a,{labelId:"demo-simple-select-autowidth-label",id:"demo-simple-select-autowidth",value:n,onChange:l,autoWidth:!0,children:[Object(u.jsx)(r.a,{value:"",children:Object(u.jsx)("em",{children:"None"})}),Object(u.jsx)(r.a,{value:10,children:"Ten"}),Object(u.jsx)(r.a,{value:20,children:"Twenty"}),Object(u.jsx)(r.a,{value:30,children:"Thirty"})]}),Object(u.jsx)(s.a,{children:"Auto width"})]}),Object(u.jsxs)(c.a,{className:e.formControl,children:[Object(u.jsxs)(m.a,{value:n,onChange:l,displayEmpty:!0,className:e.selectEmpty,inputProps:{"aria-label":"Without label"},children:[Object(u.jsx)(r.a,{value:"",disabled:!0,children:"Placeholder"}),Object(u.jsx)(r.a,{value:10,children:"Ten"}),Object(u.jsx)(r.a,{value:20,children:"Twenty"}),Object(u.jsx)(r.a,{value:30,children:"Thirty"})]}),Object(u.jsx)(s.a,{children:"Placeholder"})]}),Object(u.jsxs)(c.a,{required:!0,className:e.formControl,children:[Object(u.jsx)(i.a,{id:"demo-simple-select-required-label",children:"Age"}),Object(u.jsxs)(m.a,{labelId:"demo-simple-select-required-label",id:"demo-simple-select-required",value:n,onChange:l,className:e.selectEmpty,children:[Object(u.jsx)(r.a,{value:"",children:Object(u.jsx)("em",{children:"None"})}),Object(u.jsx)(r.a,{value:10,children:"Ten"}),Object(u.jsx)(r.a,{value:20,children:"Twenty"}),Object(u.jsx)(r.a,{value:30,children:"Thirty"})]}),Object(u.jsx)(s.a,{children:"Required"})]}),Object(u.jsxs)(c.a,{variant:"outlined",className:e.formControl,children:[Object(u.jsx)(i.a,{id:"demo-simple-select-outlined-label",children:"Age"}),Object(u.jsxs)(m.a,{labelId:"demo-simple-select-outlined-label",id:"demo-simple-select-outlined",value:n,onChange:l,label:"Age",children:[Object(u.jsx)(r.a,{value:"",children:Object(u.jsx)("em",{children:"None"})}),Object(u.jsx)(r.a,{value:10,children:"Ten"}),Object(u.jsx)(r.a,{value:20,children:"Twenty"}),Object(u.jsx)(r.a,{value:30,children:"Thirty"})]})]}),Object(u.jsxs)(c.a,{variant:"filled",className:e.formControl,children:[Object(u.jsx)(i.a,{id:"demo-simple-select-filled-label",children:"Age"}),Object(u.jsxs)(m.a,{labelId:"demo-simple-select-filled-label",id:"demo-simple-select-filled",value:n,onChange:l,children:[Object(u.jsx)(r.a,{value:"",children:Object(u.jsx)("em",{children:"None"})}),Object(u.jsx)(r.a,{value:10,children:"Ten"}),Object(u.jsx)(r.a,{value:20,children:"Twenty"}),Object(u.jsx)(r.a,{value:30,children:"Thirty"})]})]})]})}},2176:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport InputLabel from \'@material-ui/core/InputLabel\';\nimport MenuItem from \'@material-ui/core/MenuItem\';\nimport FormHelperText from \'@material-ui/core/FormHelperText\';\nimport FormControl from \'@material-ui/core/FormControl\';\nimport Select from \'@material-ui/core/Select\';\n\nconst useStyles = makeStyles((theme) => ({\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n },\n selectEmpty: {\n marginTop: theme.spacing(2),\n },\n}));\n\nexport default function SimpleSelect() {\n const classes = useStyles();\n const [age, setAge] = React.useState(\'\');\n\n const handleChange = (event) => {\n setAge(event.target.value);\n };\n\n return (\n <div>\n <FormControl className={classes.formControl}>\n <InputLabel id="demo-simple-select-label">Age</InputLabel>\n <Select\n labelId="demo-simple-select-label"\n id="demo-simple-select"\n value={age}\n onChange={handleChange}\n >\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n </FormControl>\n <FormControl className={classes.formControl}>\n <InputLabel id="demo-simple-select-helper-label">Age</InputLabel>\n <Select\n labelId="demo-simple-select-helper-label"\n id="demo-simple-select-helper"\n value={age}\n onChange={handleChange}\n >\n <MenuItem value="">\n <em>None</em>\n </MenuItem>\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n <FormHelperText>Some important helper text</FormHelperText>\n </FormControl>\n <FormControl className={classes.formControl}>\n <Select\n value={age}\n onChange={handleChange}\n displayEmpty\n className={classes.selectEmpty}\n inputProps={{ \'aria-label\': \'Without label\' }}\n >\n <MenuItem value="">\n <em>None</em>\n </MenuItem>\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n <FormHelperText>Without label</FormHelperText>\n </FormControl>\n <FormControl className={classes.formControl}>\n <InputLabel shrink id="demo-simple-select-placeholder-label-label">\n Age\n </InputLabel>\n <Select\n labelId="demo-simple-select-placeholder-label-label"\n id="demo-simple-select-placeholder-label"\n value={age}\n onChange={handleChange}\n displayEmpty\n className={classes.selectEmpty}\n >\n <MenuItem value="">\n <em>None</em>\n </MenuItem>\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n <FormHelperText>Label + placeholder</FormHelperText>\n </FormControl>\n <FormControl className={classes.formControl} disabled>\n <InputLabel id="demo-simple-select-disabled-label">Name</InputLabel>\n <Select\n labelId="demo-simple-select-disabled-label"\n id="demo-simple-select-disabled"\n value={age}\n onChange={handleChange}\n >\n <MenuItem value="">\n <em>None</em>\n </MenuItem>\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n <FormHelperText>Disabled</FormHelperText>\n </FormControl>\n <FormControl className={classes.formControl} error>\n <InputLabel id="demo-simple-select-error-label">Name</InputLabel>\n <Select\n labelId="demo-simple-select-error-label"\n id="demo-simple-select-error"\n value={age}\n onChange={handleChange}\n renderValue={(value) => `\u26a0\ufe0f - ${value}`}\n >\n <MenuItem value="">\n <em>None</em>\n </MenuItem>\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n <FormHelperText>Error</FormHelperText>\n </FormControl>\n <FormControl className={classes.formControl}>\n <InputLabel id="demo-simple-select-readonly-label">Name</InputLabel>\n <Select\n labelId="demo-simple-select-readonly-label"\n id="demo-simple-select-readonly"\n value={age}\n onChange={handleChange}\n inputProps={{ readOnly: true }}\n >\n <MenuItem value="">\n <em>None</em>\n </MenuItem>\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n <FormHelperText>Read only</FormHelperText>\n </FormControl>\n <FormControl className={classes.formControl}>\n <InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel>\n <Select\n labelId="demo-simple-select-autowidth-label"\n id="demo-simple-select-autowidth"\n value={age}\n onChange={handleChange}\n autoWidth\n >\n <MenuItem value="">\n <em>None</em>\n </MenuItem>\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n <FormHelperText>Auto width</FormHelperText>\n </FormControl>\n <FormControl className={classes.formControl}>\n <Select\n value={age}\n onChange={handleChange}\n displayEmpty\n className={classes.selectEmpty}\n inputProps={{ \'aria-label\': \'Without label\' }}\n >\n <MenuItem value="" disabled>\n Placeholder\n </MenuItem>\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n <FormHelperText>Placeholder</FormHelperText>\n </FormControl>\n <FormControl required className={classes.formControl}>\n <InputLabel id="demo-simple-select-required-label">Age</InputLabel>\n <Select\n labelId="demo-simple-select-required-label"\n id="demo-simple-select-required"\n value={age}\n onChange={handleChange}\n className={classes.selectEmpty}\n >\n <MenuItem value="">\n <em>None</em>\n </MenuItem>\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n <FormHelperText>Required</FormHelperText>\n </FormControl>\n <FormControl variant="outlined" className={classes.formControl}>\n <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>\n <Select\n labelId="demo-simple-select-outlined-label"\n id="demo-simple-select-outlined"\n value={age}\n onChange={handleChange}\n label="Age"\n >\n <MenuItem value="">\n <em>None</em>\n </MenuItem>\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n </FormControl>\n <FormControl variant="filled" className={classes.formControl}>\n <InputLabel id="demo-simple-select-filled-label">Age</InputLabel>\n <Select\n labelId="demo-simple-select-filled-label"\n id="demo-simple-select-filled"\n value={age}\n onChange={handleChange}\n >\n <MenuItem value="">\n <em>None</em>\n </MenuItem>\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n </FormControl>\n </div>\n );\n}\n'},2177:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return p}));var l=t(0),a=t.n(l),o=t(1072),i=t(1038),r=t(1039),s=t(1035),c=t(1044),m=t(535),u=t(1);const d=Object(o.a)((e=>({formControl:{margin:e.spacing(1),minWidth:120},selectEmpty:{marginTop:e.spacing(2)}})));function p(){const e=d(),[n,t]=a.a.useState({age:"",name:"hai"}),l=e=>{const l=e.target.name;t({...n,[l]:e.target.value})};return Object(u.jsxs)("div",{children:[Object(u.jsxs)(s.a,{className:e.formControl,children:[Object(u.jsx)(i.a,{htmlFor:"age-native-simple",children:"Age"}),Object(u.jsxs)(c.a,{native:!0,value:n.age,onChange:l,inputProps:{name:"age",id:"age-native-simple"},children:[Object(u.jsx)("option",{"aria-label":"None",value:""}),Object(u.jsx)("option",{value:10,children:"Ten"}),Object(u.jsx)("option",{value:20,children:"Twenty"}),Object(u.jsx)("option",{value:30,children:"Thirty"})]})]}),Object(u.jsxs)(s.a,{className:e.formControl,children:[Object(u.jsx)(i.a,{htmlFor:"age-native-helper",children:"Age"}),Object(u.jsxs)(m.a,{value:n.age,onChange:l,inputProps:{name:"age",id:"age-native-helper"},children:[Object(u.jsx)("option",{"aria-label":"None",value:""}),Object(u.jsx)("option",{value:10,children:"Ten"}),Object(u.jsx)("option",{value:20,children:"Twenty"}),Object(u.jsx)("option",{value:30,children:"Thirty"})]}),Object(u.jsx)(r.a,{children:"Some important helper text"})]}),Object(u.jsxs)(s.a,{className:e.formControl,children:[Object(u.jsxs)(m.a,{value:n.age,onChange:l,name:"age",className:e.selectEmpty,inputProps:{"aria-label":"age"},children:[Object(u.jsx)("option",{value:"",children:"None"}),Object(u.jsx)("option",{value:10,children:"Ten"}),Object(u.jsx)("option",{value:20,children:"Twenty"}),Object(u.jsx)("option",{value:30,children:"Thirty"})]}),Object(u.jsx)(r.a,{children:"With visually hidden label"})]}),Object(u.jsxs)(s.a,{className:e.formControl,children:[Object(u.jsx)(i.a,{shrink:!0,htmlFor:"age-native-label-placeholder",children:"Age"}),Object(u.jsxs)(m.a,{value:n.age,onChange:l,inputProps:{name:"age",id:"age-native-label-placeholder"},children:[Object(u.jsx)("option",{value:"",children:"None"}),Object(u.jsx)("option",{value:10,children:"Ten"}),Object(u.jsx)("option",{value:20,children:"Twenty"}),Object(u.jsx)("option",{value:30,children:"Thirty"})]}),Object(u.jsx)(r.a,{children:"Label + placeholder"})]}),Object(u.jsxs)(s.a,{className:e.formControl,disabled:!0,children:[Object(u.jsx)(i.a,{htmlFor:"name-native-disabled",children:"Name"}),Object(u.jsxs)(m.a,{value:n.name,onChange:l,inputProps:{name:"name",id:"name-native-disabled"},children:[Object(u.jsx)("option",{value:"",children:"None"}),Object(u.jsx)("optgroup",{label:"Author",children:Object(u.jsx)("option",{value:"hai",children:"Hai"})}),Object(u.jsxs)("optgroup",{label:"Contributors",children:[Object(u.jsx)("option",{value:"olivier",children:"Olivier"}),Object(u.jsx)("option",{value:"kevin",children:"Kevin"})]})]}),Object(u.jsx)(r.a,{children:"Disabled"})]}),Object(u.jsxs)(s.a,{className:e.formControl,error:!0,children:[Object(u.jsx)(i.a,{htmlFor:"name-native-error",children:"Name"}),Object(u.jsxs)(m.a,{value:n.name,onChange:l,name:"name",inputProps:{id:"name-native-error"},children:[Object(u.jsx)("optgroup",{label:"Author",children:Object(u.jsx)("option",{value:"hai",children:"Hai"})}),Object(u.jsxs)("optgroup",{label:"Contributors",children:[Object(u.jsx)("option",{value:"olivier",children:"Olivier"}),Object(u.jsx)("option",{value:"kevin",children:"Kevin"})]})]}),Object(u.jsx)(r.a,{children:"Error"})]}),Object(u.jsxs)(s.a,{className:e.formControl,children:[Object(u.jsx)(i.a,{htmlFor:"uncontrolled-native",children:"Name"}),Object(u.jsxs)(m.a,{defaultValue:30,inputProps:{name:"name",id:"uncontrolled-native"},children:[Object(u.jsx)("option",{value:10,children:"Ten"}),Object(u.jsx)("option",{value:20,children:"Twenty"}),Object(u.jsx)("option",{value:30,children:"Thirty"})]}),Object(u.jsx)(r.a,{children:"Uncontrolled"})]}),Object(u.jsxs)(s.a,{className:e.formControl,children:[Object(u.jsxs)(m.a,{className:e.selectEmpty,value:n.age,name:"age",onChange:l,inputProps:{"aria-label":"age"},children:[Object(u.jsx)("option",{value:"",disabled:!0,children:"Placeholder"}),Object(u.jsx)("option",{value:10,children:"Ten"}),Object(u.jsx)("option",{value:20,children:"Twenty"}),Object(u.jsx)("option",{value:30,children:"Thirty"})]}),Object(u.jsx)(r.a,{children:"Placeholder"})]}),Object(u.jsxs)(s.a,{required:!0,className:e.formControl,children:[Object(u.jsx)(i.a,{htmlFor:"age-native-required",children:"Age"}),Object(u.jsxs)(c.a,{native:!0,value:n.age,onChange:l,name:"age",inputProps:{id:"age-native-required"},children:[Object(u.jsx)("option",{"aria-label":"None",value:""}),Object(u.jsx)("option",{value:10,children:"Ten"}),Object(u.jsx)("option",{value:20,children:"Twenty"}),Object(u.jsx)("option",{value:30,children:"Thirty"})]}),Object(u.jsx)(r.a,{children:"Required"})]}),Object(u.jsxs)(s.a,{variant:"outlined",className:e.formControl,children:[Object(u.jsx)(i.a,{htmlFor:"outlined-age-native-simple",children:"Age"}),Object(u.jsxs)(c.a,{native:!0,value:n.age,onChange:l,label:"Age",inputProps:{name:"age",id:"outlined-age-native-simple"},children:[Object(u.jsx)("option",{"aria-label":"None",value:""}),Object(u.jsx)("option",{value:10,children:"Ten"}),Object(u.jsx)("option",{value:20,children:"Twenty"}),Object(u.jsx)("option",{value:30,children:"Thirty"})]})]}),Object(u.jsxs)(s.a,{variant:"filled",className:e.formControl,children:[Object(u.jsx)(i.a,{htmlFor:"filled-age-native-simple",children:"Age"}),Object(u.jsxs)(c.a,{native:!0,value:n.age,onChange:l,inputProps:{name:"age",id:"filled-age-native-simple"},children:[Object(u.jsx)("option",{"aria-label":"None",value:""}),Object(u.jsx)("option",{value:10,children:"Ten"}),Object(u.jsx)("option",{value:20,children:"Twenty"}),Object(u.jsx)("option",{value:30,children:"Thirty"})]})]})]})}},2178:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport InputLabel from \'@material-ui/core/InputLabel\';\nimport FormHelperText from \'@material-ui/core/FormHelperText\';\nimport FormControl from \'@material-ui/core/FormControl\';\nimport Select from \'@material-ui/core/Select\';\nimport NativeSelect from \'@material-ui/core/NativeSelect\';\n\nconst useStyles = makeStyles((theme) => ({\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n },\n selectEmpty: {\n marginTop: theme.spacing(2),\n },\n}));\n\nexport default function NativeSelects() {\n const classes = useStyles();\n const [state, setState] = React.useState({\n age: \'\',\n name: \'hai\',\n });\n\n const handleChange = (event) => {\n const name = event.target.name;\n setState({\n ...state,\n [name]: event.target.value,\n });\n };\n\n return (\n <div>\n <FormControl className={classes.formControl}>\n <InputLabel htmlFor="age-native-simple">Age</InputLabel>\n <Select\n native\n value={state.age}\n onChange={handleChange}\n inputProps={{\n name: \'age\',\n id: \'age-native-simple\',\n }}\n >\n <option aria-label="None" value="" />\n <option value={10}>Ten</option>\n <option value={20}>Twenty</option>\n <option value={30}>Thirty</option>\n </Select>\n </FormControl>\n <FormControl className={classes.formControl}>\n <InputLabel htmlFor="age-native-helper">Age</InputLabel>\n <NativeSelect\n value={state.age}\n onChange={handleChange}\n inputProps={{\n name: \'age\',\n id: \'age-native-helper\',\n }}\n >\n <option aria-label="None" value="" />\n <option value={10}>Ten</option>\n <option value={20}>Twenty</option>\n <option value={30}>Thirty</option>\n </NativeSelect>\n <FormHelperText>Some important helper text</FormHelperText>\n </FormControl>\n <FormControl className={classes.formControl}>\n <NativeSelect\n value={state.age}\n onChange={handleChange}\n name="age"\n className={classes.selectEmpty}\n inputProps={{ \'aria-label\': \'age\' }}\n >\n <option value="">None</option>\n <option value={10}>Ten</option>\n <option value={20}>Twenty</option>\n <option value={30}>Thirty</option>\n </NativeSelect>\n <FormHelperText>With visually hidden label</FormHelperText>\n </FormControl>\n <FormControl className={classes.formControl}>\n <InputLabel shrink htmlFor="age-native-label-placeholder">\n Age\n </InputLabel>\n <NativeSelect\n value={state.age}\n onChange={handleChange}\n inputProps={{\n name: \'age\',\n id: \'age-native-label-placeholder\',\n }}\n >\n <option value="">None</option>\n <option value={10}>Ten</option>\n <option value={20}>Twenty</option>\n <option value={30}>Thirty</option>\n </NativeSelect>\n <FormHelperText>Label + placeholder</FormHelperText>\n </FormControl>\n <FormControl className={classes.formControl} disabled>\n <InputLabel htmlFor="name-native-disabled">Name</InputLabel>\n <NativeSelect\n value={state.name}\n onChange={handleChange}\n inputProps={{\n name: \'name\',\n id: \'name-native-disabled\',\n }}\n >\n <option value="">None</option>\n <optgroup label="Author">\n <option value="hai">Hai</option>\n </optgroup>\n <optgroup label="Contributors">\n <option value="olivier">Olivier</option>\n <option value="kevin">Kevin</option>\n </optgroup>\n </NativeSelect>\n <FormHelperText>Disabled</FormHelperText>\n </FormControl>\n <FormControl className={classes.formControl} error>\n <InputLabel htmlFor="name-native-error">Name</InputLabel>\n <NativeSelect\n value={state.name}\n onChange={handleChange}\n name="name"\n inputProps={{\n id: \'name-native-error\',\n }}\n >\n <optgroup label="Author">\n <option value="hai">Hai</option>\n </optgroup>\n <optgroup label="Contributors">\n <option value="olivier">Olivier</option>\n <option value="kevin">Kevin</option>\n </optgroup>\n </NativeSelect>\n <FormHelperText>Error</FormHelperText>\n </FormControl>\n <FormControl className={classes.formControl}>\n <InputLabel htmlFor="uncontrolled-native">Name</InputLabel>\n <NativeSelect\n defaultValue={30}\n inputProps={{\n name: \'name\',\n id: \'uncontrolled-native\',\n }}\n >\n <option value={10}>Ten</option>\n <option value={20}>Twenty</option>\n <option value={30}>Thirty</option>\n </NativeSelect>\n <FormHelperText>Uncontrolled</FormHelperText>\n </FormControl>\n <FormControl className={classes.formControl}>\n <NativeSelect\n className={classes.selectEmpty}\n value={state.age}\n name="age"\n onChange={handleChange}\n inputProps={{ \'aria-label\': \'age\' }}\n >\n <option value="" disabled>\n Placeholder\n </option>\n <option value={10}>Ten</option>\n <option value={20}>Twenty</option>\n <option value={30}>Thirty</option>\n </NativeSelect>\n <FormHelperText>Placeholder</FormHelperText>\n </FormControl>\n <FormControl required className={classes.formControl}>\n <InputLabel htmlFor="age-native-required">Age</InputLabel>\n <Select\n native\n value={state.age}\n onChange={handleChange}\n name="age"\n inputProps={{\n id: \'age-native-required\',\n }}\n >\n <option aria-label="None" value="" />\n <option value={10}>Ten</option>\n <option value={20}>Twenty</option>\n <option value={30}>Thirty</option>\n </Select>\n <FormHelperText>Required</FormHelperText>\n </FormControl>\n <FormControl variant="outlined" className={classes.formControl}>\n <InputLabel htmlFor="outlined-age-native-simple">Age</InputLabel>\n <Select\n native\n value={state.age}\n onChange={handleChange}\n label="Age"\n inputProps={{\n name: \'age\',\n id: \'outlined-age-native-simple\',\n }}\n >\n <option aria-label="None" value="" />\n <option value={10}>Ten</option>\n <option value={20}>Twenty</option>\n <option value={30}>Thirty</option>\n </Select>\n </FormControl>\n <FormControl variant="filled" className={classes.formControl}>\n <InputLabel htmlFor="filled-age-native-simple">Age</InputLabel>\n <Select\n native\n value={state.age}\n onChange={handleChange}\n inputProps={{\n name: \'age\',\n id: \'filled-age-native-simple\',\n }}\n >\n <option aria-label="None" value="" />\n <option value={10}>Ten</option>\n <option value={20}>Twenty</option>\n <option value={30}>Thirty</option>\n </Select>\n </FormControl>\n </div>\n );\n}\n'},2179:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return b}));var l=t(0),a=t.n(l),o=t(11),i=t(1072),r=t(1038),s=t(1092),c=t(1035),m=t(1044),u=t(535),d=t(549),p=t(1);const h=Object(o.a)((e=>({root:{"label + &":{marginTop:e.spacing(3)}},input:{borderRadius:4,position:"relative",backgroundColor:e.palette.background.paper,border:"1px solid #ced4da",fontSize:16,padding:"10px 26px 10px 12px",transition:e.transitions.create(["border-color","box-shadow"]),fontFamily:["-apple-system","BlinkMacSystemFont",'"Segoe UI"',"Roboto",'"Helvetica Neue"',"Arial","sans-serif",'"Apple Color Emoji"','"Segoe UI Emoji"','"Segoe UI Symbol"'].join(","),"&:focus":{borderRadius:4,borderColor:"#80bdff",boxShadow:"0 0 0 0.2rem rgba(0,123,255,.25)"}}})))(d.a),j=Object(i.a)((e=>({margin:{margin:e.spacing(1)}})));function b(){const e=j(),[n,t]=a.a.useState(""),l=e=>{t(e.target.value)};return Object(p.jsxs)("div",{children:[Object(p.jsxs)(c.a,{className:e.margin,children:[Object(p.jsx)(r.a,{htmlFor:"demo-customized-textbox",children:"Age"}),Object(p.jsx)(h,{id:"demo-customized-textbox"})]}),Object(p.jsxs)(c.a,{className:e.margin,children:[Object(p.jsx)(r.a,{id:"demo-customized-select-label",children:"Age"}),Object(p.jsxs)(m.a,{labelId:"demo-customized-select-label",id:"demo-customized-select",value:n,onChange:l,input:Object(p.jsx)(h,{}),children:[Object(p.jsx)(s.a,{value:"",children:Object(p.jsx)("em",{children:"None"})}),Object(p.jsx)(s.a,{value:10,children:"Ten"}),Object(p.jsx)(s.a,{value:20,children:"Twenty"}),Object(p.jsx)(s.a,{value:30,children:"Thirty"})]})]}),Object(p.jsxs)(c.a,{className:e.margin,children:[Object(p.jsx)(r.a,{htmlFor:"demo-customized-select-native",children:"Age"}),Object(p.jsxs)(u.a,{id:"demo-customized-select-native",value:n,onChange:l,input:Object(p.jsx)(h,{}),children:[Object(p.jsx)("option",{"aria-label":"None",value:""}),Object(p.jsx)("option",{value:10,children:"Ten"}),Object(p.jsx)("option",{value:20,children:"Twenty"}),Object(p.jsx)("option",{value:30,children:"Thirty"})]})]})]})}},2180:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport Select from '@material-ui/core/Select';\nimport NativeSelect from '@material-ui/core/NativeSelect';\nimport InputBase from '@material-ui/core/InputBase';\n\nconst BootstrapInput = withStyles((theme) => ({\n root: {\n 'label + &': {\n marginTop: theme.spacing(3),\n },\n },\n input: {\n borderRadius: 4,\n position: 'relative',\n backgroundColor: theme.palette.background.paper,\n border: '1px solid #ced4da',\n fontSize: 16,\n padding: '10px 26px 10px 12px',\n transition: theme.transitions.create(['border-color', 'box-shadow']),\n // Use the system font instead of the default Roboto font.\n fontFamily: [\n '-apple-system',\n 'BlinkMacSystemFont',\n '\"Segoe UI\"',\n 'Roboto',\n '\"Helvetica Neue\"',\n 'Arial',\n 'sans-serif',\n '\"Apple Color Emoji\"',\n '\"Segoe UI Emoji\"',\n '\"Segoe UI Symbol\"',\n ].join(','),\n '&:focus': {\n borderRadius: 4,\n borderColor: '#80bdff',\n boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',\n },\n },\n}))(InputBase);\n\nconst useStyles = makeStyles((theme) => ({\n margin: {\n margin: theme.spacing(1),\n },\n}));\n\nexport default function CustomizedSelects() {\n const classes = useStyles();\n const [age, setAge] = React.useState('');\n const handleChange = (event) => {\n setAge(event.target.value);\n };\n return (\n <div>\n <FormControl className={classes.margin}>\n <InputLabel htmlFor=\"demo-customized-textbox\">Age</InputLabel>\n <BootstrapInput id=\"demo-customized-textbox\" />\n </FormControl>\n <FormControl className={classes.margin}>\n <InputLabel id=\"demo-customized-select-label\">Age</InputLabel>\n <Select\n labelId=\"demo-customized-select-label\"\n id=\"demo-customized-select\"\n value={age}\n onChange={handleChange}\n input={<BootstrapInput />}\n >\n <MenuItem value=\"\">\n <em>None</em>\n </MenuItem>\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n </FormControl>\n <FormControl className={classes.margin}>\n <InputLabel htmlFor=\"demo-customized-select-native\">Age</InputLabel>\n <NativeSelect\n id=\"demo-customized-select-native\"\n value={age}\n onChange={handleChange}\n input={<BootstrapInput />}\n >\n <option aria-label=\"None\" value=\"\" />\n <option value={10}>Ten</option>\n <option value={20}>Twenty</option>\n <option value={30}>Thirty</option>\n </NativeSelect>\n </FormControl>\n </div>\n );\n}\n"},2181:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return f}));var l=t(0),a=t.n(l),o=t(5),i=t(1072),r=t(43),s=t(548),c=t(1038),m=t(1092),u=t(1035),d=t(1103),p=t(1044),h=t(1165),j=t(1192),b=t(1);const v=Object(i.a)((e=>({formControl:{margin:e.spacing(1),minWidth:120,maxWidth:300},chips:{display:"flex",flexWrap:"wrap"},chip:{margin:2},noLabel:{marginTop:e.spacing(3)}}))),x={PaperProps:{style:{maxHeight:224,width:250}}},g=["Oliver Hansen","Van Henry","April Tucker","Ralph Hubbard","Omar Alexander","Carlos Abbott","Miriam Wagner","Bradley Wilkerson","Virginia Andrews","Kelly Snyder"];function O(e,n,t){return{fontWeight:-1===n.indexOf(e)?t.typography.fontWeightRegular:t.typography.fontWeightMedium}}function f(){const e=v(),n=Object(r.a)(),[t,l]=a.a.useState([]),i=e=>{l(e.target.value)};return Object(b.jsxs)("div",{children:[Object(b.jsxs)(u.a,{className:e.formControl,children:[Object(b.jsx)(c.a,{id:"demo-mutiple-name-label",children:"Name"}),Object(b.jsx)(p.a,{labelId:"demo-mutiple-name-label",id:"demo-mutiple-name",multiple:!0,value:t,onChange:i,input:Object(b.jsx)(s.a,{}),MenuProps:x,children:g.map((e=>Object(b.jsx)(m.a,{value:e,style:O(e,t,n),children:e},e)))})]}),Object(b.jsxs)(u.a,{className:e.formControl,children:[Object(b.jsx)(c.a,{id:"demo-mutiple-checkbox-label",children:"Tag"}),Object(b.jsx)(p.a,{labelId:"demo-mutiple-checkbox-label",id:"demo-mutiple-checkbox",multiple:!0,value:t,onChange:i,input:Object(b.jsx)(s.a,{}),renderValue:e=>e.join(", "),MenuProps:x,children:g.map((e=>Object(b.jsxs)(m.a,{value:e,children:[Object(b.jsx)(h.a,{checked:t.indexOf(e)>-1}),Object(b.jsx)(d.a,{primary:e})]},e)))})]}),Object(b.jsxs)(u.a,{className:e.formControl,children:[Object(b.jsx)(c.a,{id:"demo-mutiple-chip-label",children:"Chip"}),Object(b.jsx)(p.a,{labelId:"demo-mutiple-chip-label",id:"demo-mutiple-chip",multiple:!0,value:t,onChange:i,input:Object(b.jsx)(s.a,{id:"select-multiple-chip"}),renderValue:n=>Object(b.jsx)("div",{className:e.chips,children:n.map((n=>Object(b.jsx)(j.a,{label:n,className:e.chip},n)))}),MenuProps:x,children:g.map((e=>Object(b.jsx)(m.a,{value:e,style:O(e,t,n),children:e},e)))})]}),Object(b.jsx)(u.a,{className:Object(o.a)(e.formControl,e.noLabel),children:Object(b.jsxs)(p.a,{multiple:!0,displayEmpty:!0,value:t,onChange:i,input:Object(b.jsx)(s.a,{}),renderValue:e=>0===e.length?Object(b.jsx)("em",{children:"Placeholder"}):e.join(", "),MenuProps:x,inputProps:{"aria-label":"Without label"},children:[Object(b.jsx)(m.a,{disabled:!0,value:"",children:Object(b.jsx)("em",{children:"Placeholder"})}),g.map((e=>Object(b.jsx)(m.a,{value:e,style:O(e,t,n),children:e},e)))]})}),Object(b.jsxs)(u.a,{className:e.formControl,children:[Object(b.jsx)(c.a,{shrink:!0,htmlFor:"select-multiple-native",children:"Native"}),Object(b.jsx)(p.a,{multiple:!0,native:!0,value:t,onChange:e=>{const{options:n}=e.target,t=[];for(let l=0,a=n.length;l<a;l+=1)n[l].selected&&t.push(n[l].value);l(t)},inputProps:{id:"select-multiple-native"},children:g.map((e=>Object(b.jsx)("option",{value:e,children:e},e)))})]})]})}},2182:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport clsx from 'clsx';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport Input from '@material-ui/core/Input';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Select from '@material-ui/core/Select';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Chip from '@material-ui/core/Chip';\n\nconst useStyles = makeStyles((theme) => ({\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n maxWidth: 300,\n },\n chips: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n chip: {\n margin: 2,\n },\n noLabel: {\n marginTop: theme.spacing(3),\n },\n}));\n\nconst ITEM_HEIGHT = 48;\nconst ITEM_PADDING_TOP = 8;\nconst MenuProps = {\n PaperProps: {\n style: {\n maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,\n width: 250,\n },\n },\n};\n\nconst names = [\n 'Oliver Hansen',\n 'Van Henry',\n 'April Tucker',\n 'Ralph Hubbard',\n 'Omar Alexander',\n 'Carlos Abbott',\n 'Miriam Wagner',\n 'Bradley Wilkerson',\n 'Virginia Andrews',\n 'Kelly Snyder',\n];\n\nfunction getStyles(name, personName, theme) {\n return {\n fontWeight:\n personName.indexOf(name) === -1\n ? theme.typography.fontWeightRegular\n : theme.typography.fontWeightMedium,\n };\n}\n\nexport default function MultipleSelect() {\n const classes = useStyles();\n const theme = useTheme();\n const [personName, setPersonName] = React.useState([]);\n\n const handleChange = (event) => {\n setPersonName(event.target.value);\n };\n\n const handleChangeMultiple = (event) => {\n const { options } = event.target;\n const value = [];\n for (let i = 0, l = options.length; i < l; i += 1) {\n if (options[i].selected) {\n value.push(options[i].value);\n }\n }\n setPersonName(value);\n };\n\n return (\n <div>\n <FormControl className={classes.formControl}>\n <InputLabel id=\"demo-mutiple-name-label\">Name</InputLabel>\n <Select\n labelId=\"demo-mutiple-name-label\"\n id=\"demo-mutiple-name\"\n multiple\n value={personName}\n onChange={handleChange}\n input={<Input />}\n MenuProps={MenuProps}\n >\n {names.map((name) => (\n <MenuItem key={name} value={name} style={getStyles(name, personName, theme)}>\n {name}\n </MenuItem>\n ))}\n </Select>\n </FormControl>\n <FormControl className={classes.formControl}>\n <InputLabel id=\"demo-mutiple-checkbox-label\">Tag</InputLabel>\n <Select\n labelId=\"demo-mutiple-checkbox-label\"\n id=\"demo-mutiple-checkbox\"\n multiple\n value={personName}\n onChange={handleChange}\n input={<Input />}\n renderValue={(selected) => selected.join(', ')}\n MenuProps={MenuProps}\n >\n {names.map((name) => (\n <MenuItem key={name} value={name}>\n <Checkbox checked={personName.indexOf(name) > -1} />\n <ListItemText primary={name} />\n </MenuItem>\n ))}\n </Select>\n </FormControl>\n <FormControl className={classes.formControl}>\n <InputLabel id=\"demo-mutiple-chip-label\">Chip</InputLabel>\n <Select\n labelId=\"demo-mutiple-chip-label\"\n id=\"demo-mutiple-chip\"\n multiple\n value={personName}\n onChange={handleChange}\n input={<Input id=\"select-multiple-chip\" />}\n renderValue={(selected) => (\n <div className={classes.chips}>\n {selected.map((value) => (\n <Chip key={value} label={value} className={classes.chip} />\n ))}\n </div>\n )}\n MenuProps={MenuProps}\n >\n {names.map((name) => (\n <MenuItem key={name} value={name} style={getStyles(name, personName, theme)}>\n {name}\n </MenuItem>\n ))}\n </Select>\n </FormControl>\n <FormControl className={clsx(classes.formControl, classes.noLabel)}>\n <Select\n multiple\n displayEmpty\n value={personName}\n onChange={handleChange}\n input={<Input />}\n renderValue={(selected) => {\n if (selected.length === 0) {\n return <em>Placeholder</em>;\n }\n\n return selected.join(', ');\n }}\n MenuProps={MenuProps}\n inputProps={{ 'aria-label': 'Without label' }}\n >\n <MenuItem disabled value=\"\">\n <em>Placeholder</em>\n </MenuItem>\n {names.map((name) => (\n <MenuItem key={name} value={name} style={getStyles(name, personName, theme)}>\n {name}\n </MenuItem>\n ))}\n </Select>\n </FormControl>\n <FormControl className={classes.formControl}>\n <InputLabel shrink htmlFor=\"select-multiple-native\">\n Native\n </InputLabel>\n <Select\n multiple\n native\n value={personName}\n onChange={handleChangeMultiple}\n inputProps={{\n id: 'select-multiple-native',\n }}\n >\n {names.map((name) => (\n <option key={name} value={name}>\n {name}\n </option>\n ))}\n </Select>\n </FormControl>\n </div>\n );\n}\n"},2183:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return p}));var l=t(0),a=t.n(l),o=t(1072),i=t(1038),r=t(1092),s=t(1035),c=t(1044),m=t(1098),u=t(1);const d=Object(o.a)((e=>({button:{display:"block",marginTop:e.spacing(2)},formControl:{margin:e.spacing(1),minWidth:120}})));function p(){const e=d(),[n,t]=a.a.useState(""),[l,o]=a.a.useState(!1),p=()=>{o(!0)};return Object(u.jsxs)("div",{children:[Object(u.jsx)(m.a,{className:e.button,onClick:p,children:"Open the select"}),Object(u.jsxs)(s.a,{className:e.formControl,children:[Object(u.jsx)(i.a,{id:"demo-controlled-open-select-label",children:"Age"}),Object(u.jsxs)(c.a,{labelId:"demo-controlled-open-select-label",id:"demo-controlled-open-select",open:l,onClose:()=>{o(!1)},onOpen:p,value:n,onChange:e=>{t(e.target.value)},children:[Object(u.jsx)(r.a,{value:"",children:Object(u.jsx)("em",{children:"None"})}),Object(u.jsx)(r.a,{value:10,children:"Ten"}),Object(u.jsx)(r.a,{value:20,children:"Twenty"}),Object(u.jsx)(r.a,{value:30,children:"Thirty"})]})]})]})}},2184:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport Select from '@material-ui/core/Select';\nimport Button from '@material-ui/core/Button';\n\nconst useStyles = makeStyles((theme) => ({\n button: {\n display: 'block',\n marginTop: theme.spacing(2),\n },\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n },\n}));\n\nexport default function ControlledOpenSelect() {\n const classes = useStyles();\n const [age, setAge] = React.useState('');\n const [open, setOpen] = React.useState(false);\n\n const handleChange = (event) => {\n setAge(event.target.value);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n const handleOpen = () => {\n setOpen(true);\n };\n\n return (\n <div>\n <Button className={classes.button} onClick={handleOpen}>\n Open the select\n </Button>\n <FormControl className={classes.formControl}>\n <InputLabel id=\"demo-controlled-open-select-label\">Age</InputLabel>\n <Select\n labelId=\"demo-controlled-open-select-label\"\n id=\"demo-controlled-open-select\"\n open={open}\n onClose={handleClose}\n onOpen={handleOpen}\n value={age}\n onChange={handleChange}\n >\n <MenuItem value=\"\">\n <em>None</em>\n </MenuItem>\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n </FormControl>\n </div>\n );\n}\n"},2185:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return x}));var l=t(0),a=t.n(l),o=t(1072),i=t(1098),r=t(1085),s=t(1196),c=t(1194),m=t(1247),u=t(1038),d=t(548),p=t(1092),h=t(1035),j=t(1044),b=t(1);const v=Object(o.a)((e=>({container:{display:"flex",flexWrap:"wrap"},formControl:{margin:e.spacing(1),minWidth:120}})));function x(){const e=v(),[n,t]=a.a.useState(!1),[l,o]=a.a.useState(""),x=e=>{o(Number(e.target.value)||"")},g=()=>{t(!1)};return Object(b.jsxs)("div",{children:[Object(b.jsx)(i.a,{onClick:()=>{t(!0)},children:"Open select dialog"}),Object(b.jsxs)(r.a,{open:n,onClose:g,children:[Object(b.jsx)(m.a,{children:"Fill the form"}),Object(b.jsx)(c.a,{children:Object(b.jsxs)("form",{className:e.container,children:[Object(b.jsxs)(h.a,{className:e.formControl,children:[Object(b.jsx)(u.a,{htmlFor:"demo-dialog-native",children:"Age"}),Object(b.jsxs)(j.a,{native:!0,value:l,onChange:x,input:Object(b.jsx)(d.a,{id:"demo-dialog-native"}),children:[Object(b.jsx)("option",{"aria-label":"None",value:""}),Object(b.jsx)("option",{value:10,children:"Ten"}),Object(b.jsx)("option",{value:20,children:"Twenty"}),Object(b.jsx)("option",{value:30,children:"Thirty"})]})]}),Object(b.jsxs)(h.a,{className:e.formControl,children:[Object(b.jsx)(u.a,{id:"demo-dialog-select-label",children:"Age"}),Object(b.jsxs)(j.a,{labelId:"demo-dialog-select-label",id:"demo-dialog-select",value:l,onChange:x,input:Object(b.jsx)(d.a,{}),children:[Object(b.jsx)(p.a,{value:"",children:Object(b.jsx)("em",{children:"None"})}),Object(b.jsx)(p.a,{value:10,children:"Ten"}),Object(b.jsx)(p.a,{value:20,children:"Twenty"}),Object(b.jsx)(p.a,{value:30,children:"Thirty"})]})]})]})}),Object(b.jsxs)(s.a,{children:[Object(b.jsx)(i.a,{onClick:g,color:"primary",children:"Cancel"}),Object(b.jsx)(i.a,{onClick:g,color:"primary",children:"Ok"})]})]})]})}},2186:function(e,n,t){"use strict";t.r(n),n.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport Input from '@material-ui/core/Input';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport Select from '@material-ui/core/Select';\n\nconst useStyles = makeStyles((theme) => ({\n container: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n },\n}));\n\nexport default function DialogSelect() {\n const classes = useStyles();\n const [open, setOpen] = React.useState(false);\n const [age, setAge] = React.useState('');\n\n const handleChange = (event) => {\n setAge(Number(event.target.value) || '');\n };\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n return (\n <div>\n <Button onClick={handleClickOpen}>Open select dialog</Button>\n <Dialog open={open} onClose={handleClose}>\n <DialogTitle>Fill the form</DialogTitle>\n <DialogContent>\n <form className={classes.container}>\n <FormControl className={classes.formControl}>\n <InputLabel htmlFor=\"demo-dialog-native\">Age</InputLabel>\n <Select\n native\n value={age}\n onChange={handleChange}\n input={<Input id=\"demo-dialog-native\" />}\n >\n <option aria-label=\"None\" value=\"\" />\n <option value={10}>Ten</option>\n <option value={20}>Twenty</option>\n <option value={30}>Thirty</option>\n </Select>\n </FormControl>\n <FormControl className={classes.formControl}>\n <InputLabel id=\"demo-dialog-select-label\">Age</InputLabel>\n <Select\n labelId=\"demo-dialog-select-label\"\n id=\"demo-dialog-select\"\n value={age}\n onChange={handleChange}\n input={<Input />}\n >\n <MenuItem value=\"\">\n <em>None</em>\n </MenuItem>\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n </FormControl>\n </form>\n </DialogContent>\n <DialogActions>\n <Button onClick={handleClose} color=\"primary\">\n Cancel\n </Button>\n <Button onClick={handleClose} color=\"primary\">\n Ok\n </Button>\n </DialogActions>\n </Dialog>\n </div>\n );\n}\n"},2187:function(e,n,t){"use strict";t.r(n),t.d(n,"default",(function(){return u}));t(0);var l=t(1072),a=t(1038),o=t(1092),i=t(1107),r=t(1035),s=t(1044),c=t(1);const m=Object(l.a)((e=>({formControl:{margin:e.spacing(1),minWidth:120}})));function u(){const e=m();return Object(c.jsxs)("div",{children:[Object(c.jsxs)(r.a,{className:e.formControl,children:[Object(c.jsx)(a.a,{htmlFor:"grouped-native-select",children:"Grouping"}),Object(c.jsxs)(s.a,{native:!0,defaultValue:"",id:"grouped-native-select",children:[Object(c.jsx)("option",{"aria-label":"None",value:""}),Object(c.jsxs)("optgroup",{label:"Category 1",children:[Object(c.jsx)("option",{value:1,children:"Option 1"}),Object(c.jsx)("option",{value:2,children:"Option 2"})]}),Object(c.jsxs)("optgroup",{label:"Category 2",children:[Object(c.jsx)("option",{value:3,children:"Option 3"}),Object(c.jsx)("option",{value:4,children:"Option 4"})]})]})]}),Object(c.jsxs)(r.a,{className:e.formControl,children:[Object(c.jsx)(a.a,{htmlFor:"grouped-select",children:"Grouping"}),Object(c.jsxs)(s.a,{defaultValue:"",id:"grouped-select",children:[Object(c.jsx)(o.a,{value:"",children:Object(c.jsx)("em",{children:"None"})}),Object(c.jsx)(i.a,{children:"Category 1"}),Object(c.jsx)(o.a,{value:1,children:"Option 1"}),Object(c.jsx)(o.a,{value:2,children:"Option 2"}),Object(c.jsx)(i.a,{children:"Category 2"}),Object(c.jsx)(o.a,{value:3,children:"Option 3"}),Object(c.jsx)(o.a,{value:4,children:"Option 4"})]})]})]})}},2188:function(e,n,t){"use strict";t.r(n),n.default='import React from \'react\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport InputLabel from \'@material-ui/core/InputLabel\';\nimport MenuItem from \'@material-ui/core/MenuItem\';\nimport ListSubheader from \'@material-ui/core/ListSubheader\';\nimport FormControl from \'@material-ui/core/FormControl\';\nimport Select from \'@material-ui/core/Select\';\n\nconst useStyles = makeStyles((theme) => ({\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n },\n}));\n\nexport default function GroupedSelect() {\n const classes = useStyles();\n\n return (\n <div>\n <FormControl className={classes.formControl}>\n <InputLabel htmlFor="grouped-native-select">Grouping</InputLabel>\n <Select native defaultValue="" id="grouped-native-select">\n <option aria-label="None" value="" />\n <optgroup label="Category 1">\n <option value={1}>Option 1</option>\n <option value={2}>Option 2</option>\n </optgroup>\n <optgroup label="Category 2">\n <option value={3}>Option 3</option>\n <option value={4}>Option 4</option>\n </optgroup>\n </Select>\n </FormControl>\n <FormControl className={classes.formControl}>\n <InputLabel htmlFor="grouped-select">Grouping</InputLabel>\n <Select defaultValue="" id="grouped-select">\n <MenuItem value="">\n <em>None</em>\n </MenuItem>\n <ListSubheader>Category 1</ListSubheader>\n <MenuItem value={1}>Option 1</MenuItem>\n <MenuItem value={2}>Option 2</MenuItem>\n <ListSubheader>Category 2</ListSubheader>\n <MenuItem value={3}>Option 3</MenuItem>\n <MenuItem value={4}>Option 4</MenuItem>\n </Select>\n </FormControl>\n </div>\n );\n}\n'},2600:function(e,n,t){"use strict";t.r(n);var l=t(1130),a=t(118),o=t(1098),i=t(1090),r=t(194),s=t(1072),c=t(1);const m=Object(s.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));n.default=function(e){return m(),Object(c.jsxs)(c.Fragment,{children:[Object(c.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(c.jsxs)(o.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/selects",target:"_blank",role:"button",children:[Object(c.jsx)(i.a,{children:"link"}),Object(c.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(c.jsx)(r.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Select"}),Object(c.jsx)(r.a,{className:"description",children:"Select components are used for collecting user provided information from a list of options."}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Simple Select"}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element."}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(l.a,{className:"my-24",iframe:!1,component:t(2175).default,raw:t(2176)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Advanced features"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["The Select component is meant to be interchangeable with a native ",Object(c.jsx)("code",{children:"<select>"})," ","element."]}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["If you are looking for more advanced features, like combobox, multiselect, autocomplete, async or creatable support, head to the"," ",Object(c.jsxs)("a",{href:"/components/autocomplete/",children:[Object(c.jsx)("code",{children:"Autocomplete"})," component"]}),'. It\'s meant to be an improved version of the "react-select" and "downshift" packages.']}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Native Select"}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"As the user experience can be improved on mobile using the native select of the platform, we allow such pattern."}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(l.a,{className:"my-24",iframe:!1,component:t(2177).default,raw:t(2178)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Text Fields"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["The ",Object(c.jsx)("code",{children:"TextField"})," wrapper component is a complete form control including a label, input and help text. You can find an example with the select mode"," ",Object(c.jsx)("a",{href:"/components/text-fields/#select",children:"in this section"}),"."]}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Customized selects"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["Here are some examples of customizing the component. You can learn more about this in the",Object(c.jsx)("a",{href:"/customization/components/",children:"overrides documentation page"}),"."]}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["The first step is to style the ",Object(c.jsx)("code",{children:"InputBase"})," component. Once it's styled, you can either use it directly as a text field or provide it to the select ",Object(c.jsx)("code",{children:"input"})," ","property to have a ",Object(c.jsx)("code",{children:"select"})," field."]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(l.a,{className:"my-24",iframe:!1,component:t(2179).default,raw:t(2180)})}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["\ud83c\udfa8 If you are looking for inspiration, you can check"," ",Object(c.jsx)("a",{href:"https://mui-treasury.com/styles/select",children:"MUI Treasury's customization examples"}),"."]}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Multiple Select"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["The ",Object(c.jsx)("code",{children:"Select"})," component can handle multiple selections. It's enabled with the"," ",Object(c.jsx)("code",{children:"multiple"})," property."]}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["Like with the single selection, you can pull out the new value by accessing"," ",Object(c.jsx)("code",{children:"event.target.value"})," in the ",Object(c.jsx)("code",{children:"onChange"})," callback. It's always an array."]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(l.a,{className:"my-24",iframe:!1,component:t(2181).default,raw:t(2182)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Controlled Open Select"}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(l.a,{className:"my-24",iframe:!1,component:t(2183).default,raw:t(2184)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"With a Dialog"}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:"While it's discouraged by the Material Design specification, you can use a select inside a dialog."}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(l.a,{className:"my-24",iframe:!1,component:t(2185).default,raw:t(2186)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Grouping"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["Display categories with the ",Object(c.jsx)("code",{children:"ListSubheader"})," component or the native"," ",Object(c.jsx)("code",{children:"<optgroup>"})," element."]}),Object(c.jsx)(r.a,{className:"mb-16",component:"div",children:Object(c.jsx)(l.a,{className:"my-24",iframe:!1,component:t(2187).default,raw:t(2188)})}),Object(c.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["To properly label your ",Object(c.jsx)("code",{children:"Select"})," input you need an extra element with an"," ",Object(c.jsx)("code",{children:"id"})," that contains a label. That ",Object(c.jsx)("code",{children:"id"})," needs to match the"," ",Object(c.jsx)("code",{children:"labelId"})," of the ",Object(c.jsx)("code",{children:"Select"})," e.g."]}),Object(c.jsx)(a.a,{component:"pre",className:"language-jsx",children:' \n<InputLabel id="label">Age</InputLabel>\n<Select labelId="label" id="select" value="20">\n <MenuItem value="10">Ten</MenuItem>\n <MenuItem value="20">Twenty</MenuItem>\n</Select>\n'}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["Alternatively a ",Object(c.jsx)("code",{children:"TextField"})," with an ",Object(c.jsx)("code",{children:"id"})," and ",Object(c.jsx)("code",{children:"label"})," ","creates the proper markup and ids for you:"]}),Object(c.jsx)(a.a,{component:"pre",className:"language-jsx",children:' \n<TextField id="select" label="Age" value="20" select>\n <MenuItem value="10">Ten</MenuItem>\n <MenuItem value="20">Twenty</MenuItem>\n</TextField>\n'}),Object(c.jsxs)(r.a,{className:"mb-16",component:"div",children:["For a ",Object(c.jsx)("a",{href:"#native-select",children:"native select"}),", you should mention a label by giving the value of the ",Object(c.jsx)("code",{children:"id"})," attribute of the select element to the ",Object(c.jsx)("code",{children:"InputLabel"}),"'s ",Object(c.jsx)("code",{children:"htmlFor"})," attribute:"]}),Object(c.jsx)(a.a,{component:"pre",className:"language-jsx",children:' \n<InputLabel htmlFor="select">Age</InputLabel>\n<NativeSelect id="select">\n <option value="10">Ten</option>\n <option value="20">Twenty</option>\n</NativeSelect>\n'})]})}}}]);
Zerion Mini Shell 1.0