@gsretail.com/gui-core/build/core/Select/GuiSelect.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__rest as e,__assign as l}from"../../node_modules/tslib/tslib.es6.js";import t from"react";import{Box as a,FormControl as i,InputLabel as r,Select as n}from"@mui/material";import{GuiMenuItem as o}from"../Menu/GuiMenuItem.js";import{GuiIconButton as s}from"../Button/GuiIconButton.js";import{ExpandMore as m,Close as d}from"../../node_modules/@gsretail.com/gui-icons/dist/index.js";import c from"./GuiSelect.styled.js";var u={PaperProps:{style:{maxHeight:396}}},p=c((function(c){var p=c.label,b=c.labelWidth,g=c.labelTextAlign,h=c.required,x=c.width,f=c.size,y=c.placeholder,E=c.disabled,A=c.readOnly,j=c.textAlign,v=c.arrOption,N=c.onClear,P=c.children,C=c.className,w=c.boxProps,z=e(c,["label","labelWidth","labelTextAlign","required","width","size","placeholder","disabled","readOnly","textAlign","arrOption","onClear","children","className","boxProps"]),M=p?b:"0";return t.createElement(a,l({className:["gui-form gui-select",C&&C].join(" "),width:x},w),p&&t.createElement(a,{minWidth:b},t.createElement("label",{className:["gui-label",g&&"textAlign-"+g,h&&"Mui-required"].join(" ")},p)),t.createElement(a,{className:"gui-select-body",style:{maxWidth:"calc("+x+" - "+M+")"}},t.createElement(i,{variant:"outlined",size:f,style:{width:"100%"}},t.createElement(r,null,y),t.createElement(n,l({displayEmpty:!0,IconComponent:m,MenuProps:u,disabled:E,className:A?"Gui-readonly":null,style:{textAlign:j},inputProps:{readOnly:A}},z),!v&&P,null==v?void 0:v.map((function(e,l){return t.createElement(o,{key:l,value:e.value||""},e.label)})))),N&&t.createElement(a,{className:"btnClear"},t.createElement(s,{size:"tiny",variant:"clear",onClick:N},t.createElement(d,{color:"rgba(0, 0, 0, 0.54)"})))))}));p.defaultProps={labelWidth:"auto",labelTextAlign:"left",textAlign:"left",width:"100%",size:"small"};export{p as default};