@start-base/react-form-elements/Select/index.mjs

Simplify form elements and form management. Selection of user friendly inputs and wide customization abilities to match your design and functionality.

import e,{forwardRef as l,useState as o,useCallback as a,useMemo as t,useId as r}from"react";import n from"clsx";import c from"react-select";export{components as SelectComponents}from"react-select";import u from"react-select/animated";var s=Object.defineProperty,i=Object.defineProperties,m=Object.getOwnPropertyDescriptors,d=Object.getOwnPropertySymbols,S=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,b=(e,l,o)=>l in e?s(e,l,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[l]=o,I=(e,l)=>{for(var o in l||(l={}))S.call(l,o)&&b(e,o,l[o]);if(d)for(var o of d(l))p.call(l,o)&&b(e,o,l[o]);return e},U="SUI-Select-module-root--Ti5s",v="SUI-Select-module-inputRoot-si5Tv",f="SUI-Select-module-label-UcKX8",h="SUI-Select-module-disableShrink-J-WRb",C="SUI-Select-module-disabledLabel-lEiU-",N="SUI-Select-module-labelPlaceholder-z-dST",y="SUI-Select-module-labelFocused-q50V-",O="SUI-Select-module-input-HAhy-",g="SUI-Select-module-focus-YF8bV",E="SUI-Select-module-inputError-o-svT",F="SUI-Select-module-errorLabel-tJ7RS",P="SUI-Select-module-disabled--iG97",j="SUI-Select-module-innerInput-PeI5U",x="SUI-Select-module-control-ehUuP",V="SUI-Select-module-menu-axmUL",k="SUI-Select-module-option-EdP-F",w="SUI-Select-module-optionFocused-2jC7x",R="SUI-Select-module-singleValue--cc8w",T="SUI-Select-module-placeholder-OAeGA",X="SUI-Select-module-indicatorSeparator-eEfnQ",A="SUI-Select-module-indicatorsContainer-2xCsm",B="SUI-Select-module-clearIndicator-O6EuX",D="SUI-Select-module-multiValueRemove-34fTi",G="SUI-Select-module-multiValue-9XkYX",L="SUI-Select-module-valueContainer-MGkpr",J=u(),Y=l((l,u)=>{var s=l,{name:b,onChange:Y,error:q=null,label:z=null,options:H=[],placeholder:K=null,value:M=null,inputClassName:Q=null,labelClassName:W=null,errorClassName:Z=null,disableShrink:$=!1,disabled:_=!1,classNames:ee=null,components:le=null,onFocus:oe=()=>({}),onBlur:ae=()=>({})}=s,te=((e,l)=>{var o={};for(var a in e)S.call(e,a)&&l.indexOf(a)<0&&(o[a]=e[a]);if(null!=e&&d)for(var a of d(e))l.indexOf(a)<0&&p.call(e,a)&&(o[a]=e[a]);return o})(s,["name","onChange","error","label","options","placeholder","value","inputClassName","labelClassName","errorClassName","disableShrink","disabled","classNames","components","onFocus","onBlur"]);const[re,ne]=o(!1),ce=a(e=>{Y({target:{name:b,value:e}})},[u,b,Y]),ue=t(()=>e.createElement("label",{htmlFor:b,className:n(f,{[h]:$,[C]:_,[N]:z&&K&&!$,[y]:z&&re&&!$||z&&M&&!$,[W]:W})},z),[_,b,$,z,K,re,M,W,u]),se=t(()=>q&&"string"==typeof q?q:q&&"object"==typeof q&&q.message?q.message:null,[q]);return e.createElement("div",{className:n(U)},e.createElement("div",{className:n(v)},z&&$?ue:null,e.createElement(c,I({value:M,ref:u,options:H,instanceId:r(),onChange:ce,classNames:(ie=I({input:()=>j,menu:()=>V,option:e=>e.isFocused||e.isSelected?w:k,singleValue:()=>R,placeholder:()=>T,indicatorSeparator:()=>X,indicatorsContainer:()=>A,clearIndicator:()=>B,multiValue:()=>G,valueContainer:()=>z&&!$?L:null,multiValueRemove:()=>D},ee),me={control:e=>{var l,o;return n(O,{[x]:!$&&z,[g]:e.isFocused,[E]:"boolean"==typeof q&&q,[P]:e.isDisabled,[Q]:Q,[null==(l=null==ee?void 0:ee.control)?void 0:l.call(ee,e)]:null==(o=null==ee?void 0:ee.control)?void 0:o.call(ee,e)})}},i(ie,m(me))),placeholder:K,name:b,isDisabled:_,onFocus:e=>{oe(e),ne(!0)},onBlur:e=>{ae(e),ne(!1)},components:I(I({},J),le)},te)),z&&!$?ue:null),se&&e.createElement("span",{className:n(F,I({},Z?{[Z]:!0}:{}))},se));var ie,me});Y.displayName="Select";var q=Y;export{q as default};