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