@gsretail.com/gui-core/build/esm/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"tslib";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 m}from"../Button/GuiIconButton.js";import{ExpandMore as s,Close as c}from"@gsretail.com/gui-icons";import d from"./GuiSelect.styled.js";var u={PaperProps:{style:{maxHeight:396}}},p=d((function(d){var p=d.label,b=d.labelWidth,g=d.labelTextAlign,h=d.required,f=d.width,y=d.size,x=d.placeholder,E=d.disabled,A=d.readOnly,v=d.textAlign,N=d.arrOption,P=d.onClear,j=d.children,w=d.className,z=d.boxProps,C=e(d,["label","labelWidth","labelTextAlign","required","width","size","placeholder","disabled","readOnly","textAlign","arrOption","onClear","children","className","boxProps"]),O=p?b:"0";return t.createElement(a,l({className:["gui-form gui-select",w&&w].join(" "),width:f},z),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("+f+" - "+O+")"}},t.createElement(i,{variant:"outlined",size:y,style:{width:"100%"}},t.createElement(r,null,x),t.createElement(n,l({displayEmpty:!0,IconComponent:s,MenuProps:u,disabled:E,className:A?"Gui-readonly":null,style:{textAlign:v},inputProps:{readOnly:A}},C),!N&&j,null==N?void 0:N.map((function(e,l){return t.createElement(o,{key:l,value:e.value||""},e.label)})))),P&&t.createElement(a,{className:"btnClear"},t.createElement(m,{size:"tiny",variant:"clear",onClick:P},t.createElement(c,{color:"rgba(0, 0, 0, 0.54)"})))))}));p.defaultProps={labelWidth:"auto",labelTextAlign:"left",textAlign:"left",width:"100%",size:"small"};export{p as default};