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