New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-functional-select

Package Overview
Dependencies
Maintainers
1
Versions
100
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-functional-select - npm Package Compare versions

Comparing version 2.4.0 to 2.4.1

179

dist/index-dev.umd.js

@@ -1,178 +0,1 @@

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("styled-components"),require("react-window")):"function"==typeof define&&define.amd?define(["exports","react","styled-components","react-window"],n):n((e=e||self).ReactFunctionalSelect={},e.React,e.StyledComponents,e.ReactWindow)}(this,(function(e,n,t,o){"use strict";var i="default"in n?n.default:n,r="default"in t?t.default:t;const a=t.keyframes`
0%, 80%, 100% {
transform: scale(0);
} 40% {
transform: scale(1.0);
}
`,l=t.keyframes`
from {
opacity: 0;
} to {
opacity: 1;
}
`,s=t.css`${a} 1.19s ease-in-out infinite`,d=t.css`${l} 0.225s ease-in-out forwards`;var c=Object.freeze({color:{border:"#ced4da",danger:"#dc3545",primary:"#007bff",disabled:"#e9ecef",placeholder:"#6E7276",dangerLight:"rgba(220, 53, 69, 0.25)"},input:{},select:{},loader:{size:"0.625rem",padding:"0.375rem 0.75rem",animation:s,color:"rgba(0, 123, 255, 0.42)"},icon:{color:"#cccccc",hoverColor:"#A6A6A6",padding:"0 0.9375rem",clear:{width:"14px",height:"16px",animation:d,transition:"color 0.15s ease-in-out"},caret:{size:"7px",transition:"transform 0.25s ease-in-out, color 0.15s ease-in-out"}},control:{minHeight:"38px",borderWidth:"1px",borderStyle:"solid",borderRadius:"0.25rem",boxShadow:"0 0 0 0.2rem",padding:"0.375rem 0.75rem",boxShadowColor:"rgba(0, 123, 255, 0.25)",focusedBorderColor:"rgba(0, 123, 255, 0.75)",transition:"box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out"},menu:{width:"100%",margin:"0.5rem 0",padding:"0.15rem 0",borderRadius:"0.25rem",backgroundColor:"#fff",animation:d,boxShadow:"0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 11px rgba(0, 0, 0, 0.1)",option:{textAlign:"left",selectedColor:"#fff",selectedBgColor:"#007bff",padding:"0.375rem 0.75rem",focusedBgColor:"rgba(0, 123, 255, 0.20)"}},noOptions:{fontSize:"1.25rem",margin:"0.25rem 0",color:"hsl(0, 0%, 60%)",padding:"0.375rem 0.75rem"},multiValue:{margin:"1px 2px",borderRadius:"0.25rem",backgroundColor:"#e7edf3",animation:d,label:{fontSize:"0.825em",borderRadius:"0.25rem",padding:"1px 2px 1px 6px"},clear:{fontWeight:700,padding:"0 7px",fontSize:"0.67em",alignItems:"center",borderRadius:"0.25rem",transition:"color 0.15s ease-in-out, background-color 0.15s ease-in-out"}}});const u=[],p=[],m={index:-1},f=/(auto|scroll)/,g=/[\u0300-\u036f]/g,h=/(MSIE|Trident\/|Edge\/|Edg\/)/i;function b(e){return e===document.documentElement||e===document.body||e===window}function v(e){return b(e)?window.pageYOffset:e.scrollTop}function w(e){let n=getComputedStyle(e);const t="absolute"===n.position;if("fixed"===n.position)return document.documentElement;for(let o=e;o=o?o.parentElement:null;)if(n=getComputedStyle(o),(!t||"static"!==n.position)&&f.test(`${n.overflow}${n.overflowY}${n.overflowX}`))return o;return document.documentElement}function $(e,n,t=300,o){let i=0;const r=v(e),a=n-r;window.requestAnimationFrame((function n(){i+=5;const l=a*((s=(s=i)/t-1)*s*s+1)+r;var s;!function(e,n){b(e)?window.scrollTo(0,n):e.scrollTop=n}(e,l),i<t?window.requestAnimationFrame(n):o&&o()}))}function x(e){return Array.isArray(e)&&!!e.length}function y(e){return e&&"object"==typeof e&&!Array.isArray(e)}function O(e,n,t){let o=e.trim();return n&&(o=o.toLowerCase()),t?function(e){return e.normalize("NFD").replace(g,"")}(o):o}function E(e,n,t){const o=Array.isArray(e)?e.filter(Boolean):y(e)?[e]:p;return n&&t&&x(o)?o.map(e=>({data:e,value:n(e),label:t(e)})):o}const C=i.memo(({index:e,style:n,data:{menuOptions:t,selectOption:o,renderOptionLabel:r,focusedOptionIndex:a}})=>{const{data:l,value:s,label:d,isDisabled:c,isSelected:u}=t[e],p=function(e,n,t){let o="rfs-option";return e&&(o+=" rfs-option-disabled"),n&&(o+=" rfs-option-selected"),t&&(o+=" rfs-option-focused"),o}(c,u,e===a),m=c?void 0:()=>o({data:l,value:s,label:d},u);return i.createElement("div",{style:n,className:p,onClick:m},r(l))},o.areEqual);C.displayName="Option";const S=r.div`
text-align: center;
${({theme:{noOptions:e}})=>`\n color: ${e.color};\n margin: ${e.margin};\n padding: ${e.padding};\n font-size: ${e.fontSize};\n ${e.css||""}\n `}
`,M=i.forwardRef(({width:e,height:t,itemSize:r,isLoading:a,loadingMsg:l,menuOptions:s,selectOption:d,noOptionsMsg:c,overscanCount:u,renderOptionLabel:p,focusedOptionIndex:m},f)=>{const g=n.useMemo(()=>({menuOptions:s,selectOption:d,renderOptionLabel:p,focusedOptionIndex:m}),[s,m,d,p]);return a?i.createElement(S,null,l):i.createElement(n.Fragment,null,i.createElement(o.FixedSizeList,{ref:f,width:e,height:t,itemSize:r,itemData:g,overscanCount:u,itemCount:s.length},C),!x(s)&&i.createElement(S,null,c))});M.displayName="Menu";const k=r.div`
min-width: 0;
display: flex;
animation: ${({theme:e})=>t.css`${e.multiValue.animation}`};
${({theme:{multiValue:e}})=>`\n margin: ${e.margin};\n border-radius: ${e.borderRadius};\n background-color: ${e.backgroundColor};\n ${e.css||""}\n `}
`,I=r.div`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
${({theme:{multiValue:{label:e}}})=>`\n padding: ${e.padding};\n font-size: ${e.fontSize};\n border-radius: ${e.borderRadius};\n `}
`,D=r.div`
display: flex;
${({isFocused:e,theme:{color:n,multiValue:{clear:t}}})=>`\n padding: ${t.padding};\n font-size: ${t.fontSize};\n transition: ${t.transition};\n align-items: ${t.alignItems};\n font-weight: ${t.fontWeight};\n border-radius: ${t.borderRadius};\n background-color: ${e?n.dangerLight:"transparent"};\n :hover {\n color: ${n.danger};\n background-color: ${n.dangerLight};\n }\n `}
`,z=({data:e,value:n,isFocused:t,isTouchDevice:o,renderOptionLabel:r,removeSelectedOption:a})=>i.createElement(k,null,i.createElement(I,null,r(e)),i.createElement(D,{isFocused:t,"data-testid":void 0,onMouseDown:e=>a(n,e),onTouchEnd:o?e=>a(n,e):void 0},"X")),T=r.div`
top: 50%;
overflow: hidden;
position: absolute;
white-space: nowrap;
box-sizing: border-box;
text-overflow: ellipsis;
transform: translateY(-50%);
max-width: calc(100% - 0.5rem);
`,L=r.div`
top: 50%;
overflow: hidden;
position: absolute;
white-space: nowrap;
box-sizing: border-box;
text-overflow: ellipsis;
transform: translateY(-50%);
color: ${({theme:e})=>e.color.placeholder};
`,R=i.memo(({isMulti:e,inputValue:t,placeholder:o,isTouchDevice:r,selectedOption:a,focusedMultiValue:l,renderOptionLabel:s,renderMultiOptions:d,removeSelectedOption:c})=>{if(t&&(!e||e&&(!x(a)||d)))return null;if(!x(a))return i.createElement(L,null,o);if(!e){const e=s(a[0].data);return i.createElement(T,null,e)}return i.createElement(n.Fragment,null,d?d({selected:a,renderOptionLabel:s}):a.map(({data:e,value:n})=>i.createElement(z,{key:n,data:e,value:n,isTouchDevice:r,renderOptionLabel:s,isFocused:n===l,removeSelectedOption:c})))});R.displayName="Value";const N={type:"text",spellCheck:!1,autoCorrect:"off",autoComplete:"off",autoCapitalize:"none","aria-autocomplete":"list","data-testid":void 0},A=r.div`
top: 0;
left: 0;
height: 0;
overflow: scroll;
white-space: pre;
position: absolute;
visibility: hidden;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
${({theme:e})=>e.input.css}
`,F=r.input`
border: 0;
outline: 0;
padding: 0;
cursor: text;
background: 0;
color: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
box-sizing: content-box;
:read-only {
opacity: 0;
cursor: default;
}
${({theme:e})=>e.input.css}
${"undefined"!=typeof navigator&&h.test(navigator.userAgent)&&"::-ms-clear { display: none; }"}
`,B=i.memo(i.forwardRef(({id:e,onBlur:t,onFocus:o,readOnly:r,onChange:a,ariaLabel:l,inputValue:s,addClassNames:d,ariaLabelledBy:c},u)=>{const p=n.useRef(null),[m,f]=n.useState(2),g=Object.assign({},N,{"aria-label":l,"aria-labelledby":c,style:{width:m}});return n.useEffect(()=>{p.current&&f(p.current.scrollWidth+2)},[s]),i.createElement(n.Fragment,null,i.createElement(F,Object.assign({id:e,ref:u,onBlur:t,onFocus:o,value:s,readOnly:r},g,{onChange:r?void 0:a,className:d?"rfs-autosize-input":void 0})),i.createElement(A,{ref:p},s))}));B.displayName="AutosizeInput";const V=r.div`
display: flex;
align-self: center;
text-align: center;
margin-right: 0.25rem;
padding: ${({theme:e})=>e.loader.padding};
> div {
border-radius: 100%;
display: inline-block;
animation: ${({theme:e})=>t.css`${e.loader.animation}`};
${({theme:{loader:e}})=>`\n width: ${e.size};\n height: ${e.size};\n background-color: ${e.color};\n `}
:nth-of-type(1) {
animation-delay: -0.272s;
}
:nth-of-type(2) {
animation-delay: -0.136s;
}
}
`,P=({addClassNames:e})=>i.createElement(V,{"aria-hidden":"true",className:e?"rfs-loading-dots":void 0},i.createElement("div",null),i.createElement("div",null),i.createElement("div",null)),j=r.div`
display: flex;
flex-shrink: 0;
align-items: center;
align-self: stretch;
box-sizing: border-box;
`,W=r.div`
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
${({theme:{icon:e}})=>`\n color: ${e.color};\n padding: ${e.padding};\n :hover {\n color: ${e.hoverColor};\n }\n `}
${({theme:e})=>e.icon.css}
`,Y=r.svg`
fill: currentColor;
animation: ${({theme:e})=>t.css`${e.icon.clear.animation}`};
${({theme:{icon:{clear:e}}})=>`\n width: ${e.width};\n height: ${e.height};\n transition: ${e.transition};\n `}
`,q=r.div`
${({theme:{icon:{caret:e}}})=>`\n transition: ${e.transition};\n border-top: ${e.size} dashed;\n border-left: ${e.size} solid transparent;\n border-right: ${e.size} solid transparent;\n `}
${({menuOpen:e,isInvalid:n,theme:{color:t}})=>e&&`\n transform: rotate(180deg);\n color: ${n?t.danger:t.caretActive||t.primary};\n `}
`,U=r.div`
width: 1px;
margin: 0.5rem 0;
align-self: stretch;
box-sizing: border-box;
background-color: ${({theme:e})=>e.color.iconSeparator||e.color.border};
`,H=i.memo(({menuOpen:e,clearIcon:n,caretIcon:t,isInvalid:o,showClear:r,isLoading:a,isDisabled:l,loadingNode:s,isTouchDevice:d,addClassNames:c,onCaretMouseDown:u,onClearMouseDown:p})=>{const m="function"==typeof t||"function"==typeof n?{menuOpen:e,isLoading:!!a,isInvalid:!!o,isDisabled:!!l}:void 0,f=e=>"function"==typeof e?e(m):e;return i.createElement(j,null,r&&!a&&i.createElement(W,{onMouseDown:p,"data-testid":void 0,onTouchEnd:d?p:void 0},f(n)||i.createElement(Y,{"aria-hidden":"true",viewBox:"0 0 14 16",className:c?"rfs-clear-icon":void 0},i.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"}))),a&&(s||i.createElement(P,{addClassNames:c})),i.createElement(U,null),i.createElement(W,{onMouseDown:u,"data-testid":void 0,onTouchEnd:d?u:void 0},f(t)||i.createElement(q,{"aria-hidden":"true",menuOpen:e,isInvalid:o,className:c?"rfs-caret-icon":void 0})))});H.displayName="IndicatorIcons";const K=r.span`
border: 0;
padding: 0;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
`,X=({menuOpen:e,isFocused:n,ariaLabel:t,inputValue:o,optionCount:r,isSearchable:a,focusedOption:l,selectedOption:s})=>{if(!n)return null;const{value:d,label:c,index:u,isDisabled:p}=l,m="Selected option: "+(x(s)?s.map(({label:e})=>e).join(" "):"N/A"),f=`${r} result(s) available${o?" for search input "+o:""}.`,g=d?`Focused option: ${c}${p?" - disabled":""}, ${u+1} of ${r}.`:"",h=e?"Use Up and Down arrow keys to choose options, press Enter or Tab to select the currently focused option, press Escape to close the menu.":`${t||"Select"} is focused${a?", type to filter options":""}, press Down arrow key to open the menu.`;return i.createElement(K,{"aria-live":"polite","data-testid":void 0},i.createElement("p",null,m),i.createElement("p",null,`${g} ${f} ${h}`))};var _,G;(_=e.MenuPositionEnum||(e.MenuPositionEnum={})).TOP="top",_.AUTO="auto",_.BOTTOM="bottom",(G=e.FilterMatchEnum||(e.FilterMatchEnum={})).ANY="any",G.START="start";const J=0,Q=1,Z=0,ee=1,ne=2,te=3,oe=(t,o,i,r,a,l,s,d,c,p,m,f,g)=>{const[h,b]=n.useState(u),v=g?"":o,w="boolean"!=typeof f?!!m:f;return n.useEffect(()=>{const n=i===e.FilterMatchEnum.ANY,o=O(v,c,p),u=r.length?r.map(({value:e})=>e):void 0,m=s||(e=>!!e.isDisabled),f=d||(e=>"string"==typeof e.label?e.label:""+e.label),g=e=>{const t=a(e),i=Object.assign({data:e,value:t,label:l(e)},m(e)&&{isDisabled:!0},u&&u.includes(t)&&{isSelected:!0});if(!(o&&!(e=>{const t=O(f(e),c,p);return n?t.indexOf(o)>-1:t.substr(0,o.length)===o})(i)||w&&i.isSelected))return i},h=t.reduce((e,n)=>{const t=g(n);return t&&e.push(t),e},[]);b(h)},[t,r,v,w,i,c,p,d,s,a,l]),h},ie=(e,t)=>{const o=n.useRef(!0);n.useEffect(()=>{if(!o.current)return e();o.current=!1},t)},re=(t,o,i,r,a,l,s,d)=>{const c=n.useRef(!1),u=n.useRef(!1),[p,m]=n.useState(r),[f,g]=n.useState(i===e.MenuPositionEnum.TOP);return n.useEffect(()=>{u.current=f},[f]),n.useEffect(()=>{const n=i===e.MenuPositionEnum.TOP||i===e.MenuPositionEnum.AUTO&&!function(e){if(!e)return!0;const n=e.getBoundingClientRect(),t=w(e),o=v(t);return t.getBoundingClientRect().height-o-n.top>=n.height}(t.current);g(n)},[t,i]),ie(()=>{if(o){const e=e=>{s&&s(),e&&(c.current=!0,m(e))};u.current?e():function(e,n,t,o){if(!e)return void o();const i=window.innerHeight,r=e.getBoundingClientRect();if(i-r.top>=r.height)return void o();const a=w(e),l=v(a),s=a.getBoundingClientRect().height-l-r.top,d=s<r.height;if(d||!t){return void o(d?s:void 0)}const c=parseInt(getComputedStyle(e).marginBottom||"0",10);$(a,r.bottom-i+l+c,n,o)}(t.current,a,l,e)}else d&&d(),c.current&&(c.current=!1,m(r))},[t,o,d,s,r,l,a]),[p,f]},ae=r.div`
position: relative;
box-sizing: border-box;
${({theme:e})=>e.select.css}
`,le=r.div`
flex: 1 1 0%;
display: flex;
flex-wrap: wrap;
overflow: hidden;
position: relative;
align-items: center;
box-sizing: border-box;
padding: ${({theme:e})=>e.control.padding};
`,se=r.div`
outline: 0;
display: flex;
flex-wrap: wrap;
cursor: default;
position: relative;
align-items: center;
box-sizing: border-box;
justify-content: space-between;
${({isDisabled:e,isFocused:n,isInvalid:t,theme:{control:o,color:i}})=>`\n min-height: ${o.minHeight};\n transition: ${o.transition};\n border-style: ${o.borderStyle};\n border-width: ${o.borderWidth};\n border-radius: ${o.borderRadius};\n border-color: ${t?i.danger:n?o.focusedBorderColor:i.border};\n ${e?"pointer-events: none;":""}\n ${o.height?`height: ${o.height};`:""}\n ${o.backgroundColor||e?`background-color: ${e?i.disabled:o.backgroundColor};`:""}\n ${n?`box-shadow: ${o.boxShadow} ${t?i.dangerLight:o.boxShadowColor};`:""}\n ${o.css||""}\n `}
`,de=r.div`
z-index: 999;
cursor: default;
position: absolute;
${({menuTop:e,hideMenu:n,theme:{menu:t}})=>`\n width: ${t.width};\n margin: ${t.margin};\n padding: ${t.padding};\n box-shadow: ${t.boxShadow};\n border-radius: ${t.borderRadius};\n background-color: ${t.backgroundColor};\n ${n?"display: none;":""}\n ${e?`top: ${e};`:""}\n `}
animation: ${({theme:e})=>t.css`${e.menu.animation}`};
${({theme:e})=>e.menu.css}
.${"rfs-option"} {
display: block;
overflow: hidden;
user-select: none;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-tap-highlight-color: transparent;
${({theme:{menu:{option:e}}})=>`\n padding: ${e.padding};\n text-align: ${e.textAlign};\n\n &.rfs-option-focused,\n &:hover:not(.rfs-option-disabled):not(.rfs-option-selected) {\n background-color: ${e.focusedBgColor};\n }\n\n &.rfs-option-selected {\n color: ${e.selectedColor};\n background-color: ${e.selectedBgColor};\n }\n\n &.rfs-option-disabled {\n opacity: 0.35;\n }\n `}
}
`,ce=i.forwardRef(({async:o,isMulti:r,inputId:a,selectId:l,autoFocus:s,isLoading:d,onKeyDown:f,clearIcon:g,caretIcon:h,isInvalid:b,ariaLabel:v,menuWidth:w,isDisabled:$,inputDelay:O,onMenuOpen:C,onMenuClose:S,onInputBlur:k,isClearable:I,themeConfig:D,loadingNode:z,initialValue:T,onInputFocus:L,onInputChange:N,addClassNames:A,ariaLabelledBy:F,onOptionChange:V,onSearchChange:P,getOptionLabel:j,getOptionValue:W,openMenuOnFocus:Y,isAriaLiveEnabled:q,menuOverscanCount:U,blurInputOnSelect:K,renderOptionLabel:_,renderMultiOptions:G,menuScrollDuration:ce,filterIgnoreAccents:ue,hideSelectedOptions:pe,getIsOptionDisabled:me,getFilterOptionString:fe,isSearchable:ge=!0,openMenuOnClick:he=!0,filterIgnoreCase:be=!0,tabSelectsOption:ve=!0,closeMenuOnSelect:we=!0,scrollMenuIntoView:$e=!0,backspaceClearsValue:xe=!0,filterMatchFrom:ye=e.FilterMatchEnum.ANY,menuPosition:Oe=e.MenuPositionEnum.BOTTOM,options:Ee=u,loadingMsg:Ce="Loading...",placeholder:Se="Select option...",noOptionsMsg:Me="No options",menuItemSize:ke=35,menuMaxHeight:Ie=300},De)=>{const ze=n.useRef(),Te=n.useRef(!1),Le=n.useRef(null),Re=n.useRef(null),Ne=n.useRef(null),Ae=n.useRef(null),Fe=(()=>{const e=n.useRef(null);return null===e.current?"undefined"==typeof navigator||"undefined"==typeof window?(e.current=!1,e.current):(e.current="ontouchstart"in window||!!navigator.maxTouchPoints,e.current):e.current})(),Be="boolean"==typeof K?K:Fe,[Ve,Pe]=n.useState(""),[je,We]=n.useState(!1),[Ye,qe]=n.useState(!1),[Ue,He]=n.useState(m),[Ke,Xe]=n.useState(null),_e=n.useMemo(()=>y(D)?function e(n,t){const o=Object.assign({},n);return Object.keys(t).forEach(i=>{o[i]=y(t[i])&&"animation"!==i?i in n?e(n[i],t[i]):t[i]:t[i]||""}),o}(c,D):c,[D]),Ge=n.useMemo(()=>j||(e=>e.label),[j]),Je=n.useMemo(()=>W||(e=>e.value),[W]),Qe=n.useMemo(()=>_||Ge,[_,Ge]),Ze=((e,t)=>{const[o,i]=n.useState(e);return n.useEffect(()=>{if(void 0===t)return;const n=setTimeout(()=>{i(e)},t);return()=>{clearTimeout(n)}},[e,t]),void 0===t?e:o})(Ve,O),[en,nn]=n.useState(()=>E(T,Je,Ge)),[tn,on]=re(Re,je,Oe,Ie,ce,$e,C,S),rn=oe(Ee,Ze,ye,en,Je,Ge,me,fe,be,ue,r,pe,o),an=()=>{Ne.current.blur()},ln=()=>{Ne.current.focus()},sn=e=>{Le.current&&Le.current.scrollToItem(e)},dn=n.useCallback((e,n)=>{n&&(n.stopPropagation(),"mousedown"===n.type&&n.preventDefault()),nn(n=>n.filter(({value:n})=>n!==e))},[]),cn=n.useCallback(e=>{if(!x(rn))return void We(!0);const n=r?-1:rn.findIndex(({isSelected:e})=>e),t=n>-1?n:e===ne?0:rn.length-1;We(!0),He(Object.assign({index:t},rn[t])),sn(t)},[r,rn]),un=n.useCallback((e,n)=>{n?r&&dn(e.value):nn(n=>r?[...n,e]:[e]),Be?an():we&&(We(!1),Pe(""))},[r,we,dn,Be]);n.useImperativeHandle(De,()=>({blur:an,focus:ln,clearValue:()=>{nn(p),He(m)},setValue:e=>{const n=function(e,n,t){if(null==e)return p;const o=E(e).reduce((e,n)=>(y(n)&&e.push(t(n)),e),[]);if(!x(o))return p;const i=[],r=[...new Set(o)];for(const e of n)if(r.includes(t(e))&&(i.push(e),r.length===i.length))break;return i}(e,rn,Je);nn(n)},toggleMenu:e=>{!0===e||void 0===e&&!je?(!Ye&&ln(),cn(ne)):an()}})),n.useEffect(()=>{s&&ln()},[s]),n.useEffect(()=>{Ye&&Y&&cn(ne)},[Ye,Y,cn]),n.useEffect(()=>{P&&Te.current&&(Te.current=!1,P(Ze))},[P,Ze]),ie(()=>{if(V){const e=r?en.map(({data:e})=>e):x(en)?en[0].data:null;V(e)}},[r,en,V]),ie(()=>{const e=rn.length,n=e>0&&(o||e!==Ee.length||0===ze.current);0===e?He(m):(1===e||n)&&(He(Object.assign({index:0},rn[0])),sn(0)),ze.current=e},[o,Ee,rn]);const pn=()=>{const{data:e,value:n,label:t,isSelected:o,isDisabled:i}=Ue;e&&!i&&un({data:e,value:n,label:t},o)},mn=e=>{if(!x(en))return;let n=-1;const t=en.length-1,o=Ke?en.findIndex(({value:e})=>e===Ke):-1;switch(e){case J:n=o>-1&&o<t?o+1:-1;break;case Q:n=0!==o?-1===o?t:o-1:0}const i=n>=0?en[n].value:null;Ue.data&&He(m),i!==Ke&&Xe(i)},fn=e=>{if(!x(rn))return;const n=e===ee?(Ue.index+1)%rn.length:Ue.index>0?Ue.index-1:rn.length-1;Ke&&Xe(null),He(Object.assign({index:n},rn[n])),sn(n)},gn=e=>{if($)return;Ye||ln();const n="INPUT"!==e.currentTarget.tagName;je?n&&(We(!1),Ve&&Pe("")):he&&cn(ne),n&&e.preventDefault()},hn=n.useCallback(e=>{k&&k(e),qe(!1),We(!1),Pe("")},[k]),bn=n.useCallback(e=>{L&&L(e),qe(!0)},[L]),vn=n.useCallback(e=>{Te.current=!0,N&&N(e.currentTarget.value||""),We(!0),Pe(e.currentTarget.value||"")},[N]),wn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),nn(p),ln()},[]),$n=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),ln(),je?We(!1):cn(ne)},[je,cn]),xn=Math.min(tn,rn.length*ke);return i.createElement(t.ThemeProvider,{theme:_e},i.createElement(ae,{id:l,role:"combobox","aria-haspopup":"listbox","aria-controls":a,onKeyDown:e=>{if(!($||f&&(f(e),e.defaultPrevented))){switch(e.key){case"ArrowDown":je?fn(ee):cn(ne);break;case"ArrowUp":je?fn(Z):cn(te);break;case"ArrowLeft":if(!r||Ve||G)return;mn(Q);break;case"ArrowRight":if(!r||Ve||G)return;mn(J);break;case" ":if(Ve)return;if(!je){cn(ne);break}if(!Ue.data)return;pn();break;case"Enter":je&&229!==e.keyCode&&pn();break;case"Escape":je&&(We(!1),Pe(""));break;case"Tab":if(!je||!ve||!Ue.data||e.shiftKey)return;pn();break;case"Delete":case"Backspace":if(Ve)return;if(Ke){const e=en.findIndex(({value:e})=>e===Ke),n=e>-1&&e<en.length-1?en[e+1].value:null;dn(Ke),Xe(n)}else{if(!xe)return;if(x(en))if(r&&!G){const{value:e}=en[en.length-1];dn(e)}else I&&nn(p)}break;default:return}e.preventDefault()}},"data-testid":void 0,"aria-expanded":je?"true":"false",className:A?"rfs-select-container":void 0},i.createElement(se,{ref:Ae,isInvalid:b,isFocused:Ye,isDisabled:$,onMouseDown:gn,"data-testid":void 0,className:A?"rfs-control-container":void 0,onTouchEnd:Fe?gn:void 0},i.createElement(le,null,i.createElement(R,{isMulti:r,inputValue:Ve,placeholder:Se,isTouchDevice:Fe,selectedOption:en,focusedMultiValue:Ke,renderOptionLabel:Qe,renderMultiOptions:G,removeSelectedOption:dn}),i.createElement(B,{id:a,ref:Ne,ariaLabel:v,inputValue:Ve,onBlur:hn,onFocus:bn,addClassNames:A,onChange:vn,ariaLabelledBy:F,readOnly:$||!ge||!!Ke})),i.createElement(H,{menuOpen:je,clearIcon:g,caretIcon:h,isInvalid:b,isLoading:d,isDisabled:$,loadingNode:z,addClassNames:A,isTouchDevice:Fe,onClearMouseDown:wn,showClear:!(!I||$||!x(en)),onCaretMouseDown:$||he?void 0:$n})),i.createElement(de,{ref:Re,hideMenu:!je,menuTop:on?((e,n,t)=>{const o=e>0||!n?e:n.getBoundingClientRect().height,i=t?t.getBoundingClientRect().height:0,r=n&&getComputedStyle(n),a=r?parseInt(r.marginBottom||"0",10):0,l=r?parseInt(r.marginTop||"0",10):0;return`calc(${-Math.abs(o+i)}px + ${a+l}px)`})(xn,Re.current,Ae.current):void 0,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),ln()},"data-testid":void 0,className:A?"rfs-menu-container":void 0},i.createElement(M,{ref:Le,isLoading:d,height:xn,itemSize:ke,loadingMsg:Ce,menuOptions:rn,noOptionsMsg:Me,selectOption:un,overscanCount:U,width:w||_e.menu.width,renderOptionLabel:Qe,focusedOptionIndex:Ue.index})),q&&i.createElement(X,{menuOpen:je,isFocused:Ye,ariaLabel:v,inputValue:Ve,isSearchable:ge,focusedOption:Ue,selectedOption:en,optionCount:rn.length})))});ce.displayName="Select",e.Select=ce,Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("styled-components"),require("react-window")):"function"==typeof define&&define.amd?define(["exports","react","styled-components","react-window"],n):n((e=e||self).ReactFunctionalSelect={},e.React,e.StyledComponents,e.ReactWindow)}(this,(function(e,n,t,o){"use strict";var i="default"in n?n.default:n,r="default"in t?t.default:t;const a=t.keyframes(["0%,80%,100%{transform:scale(0);}40%{transform:scale(1.0);}"]),s=t.keyframes(["from{opacity:0;}to{opacity:1;}"]),l=t.css([""," 1.19s ease-in-out infinite"],a),d=t.css([""," 0.225s ease-in-out forwards"],s);var c=Object.freeze({color:{border:"#ced4da",danger:"#dc3545",primary:"#007bff",disabled:"#e9ecef",placeholder:"#6E7276",dangerLight:"rgba(220, 53, 69, 0.25)"},input:{},select:{},loader:{size:"0.625rem",padding:"0.375rem 0.75rem",animation:l,color:"rgba(0, 123, 255, 0.42)"},icon:{color:"#cccccc",hoverColor:"#A6A6A6",padding:"0 0.9375rem",clear:{width:"14px",height:"16px",animation:d,transition:"color 0.15s ease-in-out"},caret:{size:"7px",transition:"transform 0.25s ease-in-out, color 0.15s ease-in-out"}},control:{minHeight:"38px",borderWidth:"1px",borderStyle:"solid",borderRadius:"0.25rem",boxShadow:"0 0 0 0.2rem",padding:"0.375rem 0.75rem",boxShadowColor:"rgba(0, 123, 255, 0.25)",focusedBorderColor:"rgba(0, 123, 255, 0.75)",transition:"box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out"},menu:{width:"100%",margin:"0.5rem 0",padding:"0.15rem 0",borderRadius:"0.25rem",backgroundColor:"#fff",animation:d,boxShadow:"0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 11px rgba(0, 0, 0, 0.1)",option:{textAlign:"left",selectedColor:"#fff",selectedBgColor:"#007bff",padding:"0.375rem 0.75rem",focusedBgColor:"rgba(0, 123, 255, 0.20)"}},noOptions:{fontSize:"1.25rem",margin:"0.25rem 0",color:"hsl(0, 0%, 60%)",padding:"0.375rem 0.75rem"},multiValue:{margin:"1px 2px",borderRadius:"0.25rem",backgroundColor:"#e7edf3",animation:d,label:{fontSize:"0.825em",borderRadius:"0.25rem",padding:"1px 2px 1px 6px"},clear:{fontWeight:700,padding:"0 7px",fontSize:"0.67em",alignItems:"center",borderRadius:"0.25rem",transition:"color 0.15s ease-in-out, background-color 0.15s ease-in-out"}}});const u=[],p=[],m={index:-1},f=/(auto|scroll)/,g=/[\u0300-\u036f]/g,h=/(MSIE|Trident\/|Edge\/|Edg\/)/i;function b(e){return e===document.documentElement||e===document.body||e===window}function v(e){return b(e)?window.pageYOffset:e.scrollTop}function w(e){let n=getComputedStyle(e);const t="absolute"===n.position;if("fixed"===n.position)return document.documentElement;for(let o=e;o=o?o.parentElement:null;)if(n=getComputedStyle(o),(!t||"static"!==n.position)&&f.test(`${n.overflow}${n.overflowY}${n.overflowX}`))return o;return document.documentElement}function y(e,n,t=300,o){let i=0;const r=v(e),a=n-r;window.requestAnimationFrame((function n(){i+=5;const s=a*((l=(l=i)/t-1)*l*l+1)+r;var l;!function(e,n){b(e)?window.scrollTo(0,n):e.scrollTop=n}(e,s),i<t?window.requestAnimationFrame(n):o&&o()}))}function $(e){return Array.isArray(e)&&!!e.length}function x(e){return e&&"object"==typeof e&&!Array.isArray(e)}function C(e,n,t){let o=e.trim();return n&&(o=o.toLowerCase()),t?function(e){return e.normalize("NFD").replace(g,"")}(o):o}function O(e,n,t){const o=Array.isArray(e)?e.filter(Boolean):x(e)?[e]:p;return n&&t&&$(o)?o.map(e=>({data:e,value:n(e),label:t(e)})):o}const E=i.memo(({index:e,style:n,data:{menuOptions:t,selectOption:o,renderOptionLabel:r,focusedOptionIndex:a}})=>{const{data:s,value:l,label:d,isDisabled:c,isSelected:u}=t[e],p=function(e,n,t){let o="rfs-option";return e&&(o+=" rfs-option-disabled"),n&&(o+=" rfs-option-selected"),t&&(o+=" rfs-option-focused"),o}(c,u,e===a),m=c?void 0:()=>o({data:s,value:l,label:d},u);return i.createElement("div",{style:n,className:p,onClick:m},r(s))},o.areEqual);E.displayName="Option";const S=r.div.withConfig({displayName:"NoOptionsMsg",componentId:"sc-mcprzj"})`text-align:center;${({theme:{noOptions:e}})=>`\n color: ${e.color};\n margin: ${e.margin};\n padding: ${e.padding};\n font-size: ${e.fontSize};\n ${e.css||""}\n `}`,I=i.forwardRef(({width:e,height:t,itemSize:r,isLoading:a,loadingMsg:s,menuOptions:l,selectOption:d,noOptionsMsg:c,overscanCount:u,renderOptionLabel:p,focusedOptionIndex:m},f)=>{const g=n.useMemo(()=>({menuOptions:l,selectOption:d,renderOptionLabel:p,focusedOptionIndex:m}),[l,m,d,p]);return a?i.createElement(S,null,s):i.createElement(n.Fragment,null,i.createElement(o.FixedSizeList,{ref:f,width:e,height:t,itemSize:r,itemData:g,overscanCount:u,itemCount:l.length},E),!$(l)&&i.createElement(S,null,c))});I.displayName="Menu";const M=r.div.withConfig({displayName:"MultiValueWrapper",componentId:"sc-qgkr0l"})`min-width:0;display:flex;animation:${({theme:e})=>t.css(["",""],e.multiValue.animation)};${({theme:{multiValue:e}})=>`\n margin: ${e.margin};\n border-radius: ${e.borderRadius};\n background-color: ${e.backgroundColor};\n ${e.css||""}\n `}`,k=r.div.withConfig({displayName:"Label",componentId:"sc-18i6dc"})`overflow:hidden;white-space:nowrap;text-overflow:ellipsis;${({theme:{multiValue:{label:e}}})=>`\n padding: ${e.padding};\n font-size: ${e.fontSize};\n border-radius: ${e.borderRadius};\n `}`,N=r.div.withConfig({displayName:"Clear",componentId:"sc-1j1biyk"})`display:flex;${({isFocused:e,theme:{color:n,multiValue:{clear:t}}})=>`\n padding: ${t.padding};\n font-size: ${t.fontSize};\n transition: ${t.transition};\n align-items: ${t.alignItems};\n font-weight: ${t.fontWeight};\n border-radius: ${t.borderRadius};\n background-color: ${e?n.dangerLight:"transparent"};\n :hover {\n color: ${n.danger};\n background-color: ${n.dangerLight};\n }\n `}`,z=({data:e,value:n,isFocused:t,isTouchDevice:o,renderOptionLabel:r,removeSelectedOption:a})=>i.createElement(M,null,i.createElement(k,null,r(e)),i.createElement(N,{isFocused:t,"data-testid":void 0,onMouseDown:e=>a(n,e),onTouchEnd:o?e=>a(n,e):void 0},"X")),D=r.div.withConfig({displayName:"SingleValue",componentId:"sc-1oju30n"})`top:50%;overflow:hidden;position:absolute;white-space:nowrap;box-sizing:border-box;text-overflow:ellipsis;transform:translateY(-50%);max-width:calc(100% - 0.5rem);`,T=r.div.withConfig({displayName:"Placeholder",componentId:"sc-1676tqj"})`top:50%;overflow:hidden;position:absolute;white-space:nowrap;box-sizing:border-box;text-overflow:ellipsis;transform:translateY(-50%);color:${({theme:e})=>e.color.placeholder};`,L=i.memo(({isMulti:e,inputValue:t,placeholder:o,isTouchDevice:r,selectedOption:a,focusedMultiValue:s,renderOptionLabel:l,renderMultiOptions:d,removeSelectedOption:c})=>{if(t&&(!e||e&&(!$(a)||d)))return null;if(!$(a))return i.createElement(T,null,o);if(!e){const e=l(a[0].data);return i.createElement(D,null,e)}return i.createElement(n.Fragment,null,d?d({selected:a,renderOptionLabel:l}):a.map(({data:e,value:n})=>i.createElement(z,{key:n,data:e,value:n,isTouchDevice:r,renderOptionLabel:l,isFocused:n===s,removeSelectedOption:c})))});L.displayName="Value";const R={type:"text",spellCheck:!1,autoCorrect:"off",autoComplete:"off",autoCapitalize:"none","aria-autocomplete":"list","data-testid":void 0},A=r.div.withConfig({displayName:"SizerDiv",componentId:"sc-1z0swd1"})`top:0;left:0;height:0;overflow:scroll;white-space:pre;position:absolute;visibility:hidden;font-size:inherit;font-weight:inherit;font-family:inherit;${({theme:e})=>e.input.css}`,F=r.input.withConfig({displayName:"Input",componentId:"sc-1kosmhe"})`border:0;outline:0;padding:0;cursor:text;background:0;color:inherit;font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:content-box;:read-only{opacity:0;cursor:default;}${({theme:e})=>e.input.css} ${"undefined"!=typeof navigator&&h.test(navigator.userAgent)&&"::-ms-clear{display:none;}"}`,B=i.memo(i.forwardRef(({id:e,onBlur:t,onFocus:o,readOnly:r,onChange:a,ariaLabel:s,inputValue:l,addClassNames:d,ariaLabelledBy:c},u)=>{const p=n.useRef(null),[m,f]=n.useState(2),g=Object.assign({},R,{"aria-label":s,"aria-labelledby":c,style:{width:m}});return n.useEffect(()=>{p.current&&f(p.current.scrollWidth+2)},[l]),i.createElement(n.Fragment,null,i.createElement(F,Object.assign({id:e,ref:u,onBlur:t,onFocus:o,value:l,readOnly:r},g,{onChange:r?void 0:a,className:d?"rfs-autosize-input":void 0})),i.createElement(A,{ref:p},l))}));B.displayName="AutosizeInput";const V=r.div.withConfig({displayName:"StyledLoadingDots",componentId:"sc-6y8z83"})`display:flex;align-self:center;text-align:center;margin-right:0.25rem;padding:${({theme:e})=>e.loader.padding};> div{border-radius:100%;display:inline-block;animation:${({theme:e})=>t.css(["",""],e.loader.animation)};${({theme:{loader:e}})=>`\n width: ${e.size};\n height: ${e.size};\n background-color: ${e.color};\n `}:nth-of-type(1){animation-delay:-0.272s;}:nth-of-type(2){animation-delay:-0.136s;}}`,P=({addClassNames:e})=>i.createElement(V,{"aria-hidden":"true",className:e?"rfs-loading-dots":void 0},i.createElement("div",null),i.createElement("div",null),i.createElement("div",null)),j=r.div.withConfig({displayName:"IndicatorIconsWrapper",componentId:"sc-j1n2s1"})`display:flex;flex-shrink:0;align-items:center;align-self:stretch;box-sizing:border-box;`,W=r.div.withConfig({displayName:"IndicatorIcon",componentId:"sc-95nhz3"})`height:100%;display:flex;align-items:center;box-sizing:border-box;${({theme:{icon:e}})=>`\n color: ${e.color};\n padding: ${e.padding};\n :hover {\n color: ${e.hoverColor};\n }\n `} ${({theme:e})=>e.icon.css}`,q=r.svg.withConfig({displayName:"ClearSvg",componentId:"sc-1a76zwu"})`fill:currentColor;animation:${({theme:e})=>t.css(["",""],e.icon.clear.animation)};${({theme:{icon:{clear:e}}})=>`\n width: ${e.width};\n height: ${e.height};\n transition: ${e.transition};\n `}`,Y=r.div.withConfig({displayName:"Caret",componentId:"sc-1wsfe6u"})`${({theme:{icon:{caret:e}}})=>`\n transition: ${e.transition};\n border-top: ${e.size} dashed;\n border-left: ${e.size} solid transparent;\n border-right: ${e.size} solid transparent;\n `} ${({menuOpen:e,isInvalid:n,theme:{color:t}})=>e&&`\n transform: rotate(180deg);\n color: ${n?t.danger:t.caretActive||t.primary};\n `}`,U=r.div.withConfig({displayName:"Separator",componentId:"sc-m89sf0"})`width:1px;margin:0.5rem 0;align-self:stretch;box-sizing:border-box;background-color:${({theme:e})=>e.color.iconSeparator||e.color.border};`,H=i.memo(({menuOpen:e,clearIcon:n,caretIcon:t,isInvalid:o,showClear:r,isLoading:a,isDisabled:s,loadingNode:l,isTouchDevice:d,addClassNames:c,onCaretMouseDown:u,onClearMouseDown:p})=>{const m="function"==typeof t||"function"==typeof n?{menuOpen:e,isLoading:!!a,isInvalid:!!o,isDisabled:!!s}:void 0,f=e=>"function"==typeof e?e(m):e;return i.createElement(j,null,r&&!a&&i.createElement(W,{onMouseDown:p,"data-testid":void 0,onTouchEnd:d?p:void 0},f(n)||i.createElement(q,{"aria-hidden":"true",viewBox:"0 0 14 16",className:c?"rfs-clear-icon":void 0},i.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"}))),a&&(l||i.createElement(P,{addClassNames:c})),i.createElement(U,null),i.createElement(W,{onMouseDown:u,"data-testid":void 0,onTouchEnd:d?u:void 0},f(t)||i.createElement(Y,{"aria-hidden":"true",menuOpen:e,isInvalid:o,className:c?"rfs-caret-icon":void 0})))});H.displayName="IndicatorIcons";const K=r.span.withConfig({displayName:"A11yText",componentId:"sc-1uzhrak"})`border:0;padding:0;width:1px;height:1px;margin:-1px;overflow:hidden;position:absolute;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);`,X=({menuOpen:e,isFocused:n,ariaLabel:t,inputValue:o,optionCount:r,isSearchable:a,focusedOption:s,selectedOption:l})=>{if(!n)return null;const{value:d,label:c,index:u,isDisabled:p}=s,m="Selected option: "+($(l)?l.map(({label:e})=>e).join(" "):"N/A"),f=`${r} result(s) available${o?" for search input "+o:""}.`,g=d?`Focused option: ${c}${p?" - disabled":""}, ${u+1} of ${r}.`:"",h=e?"Use Up and Down arrow keys to choose options, press Enter or Tab to select the currently focused option, press Escape to close the menu.":`${t||"Select"} is focused${a?", type to filter options":""}, press Down arrow key to open the menu.`;return i.createElement(K,{"aria-live":"polite","data-testid":void 0},i.createElement("p",null,m),i.createElement("p",null,`${g} ${f} ${h}`))};var _,G;(_=e.MenuPositionEnum||(e.MenuPositionEnum={})).TOP="top",_.AUTO="auto",_.BOTTOM="bottom",(G=e.FilterMatchEnum||(e.FilterMatchEnum={})).ANY="any",G.START="start";const J=0,Q=1,Z=0,ee=1,ne=2,te=3,oe=(t,o,i,r,a,s,l,d,c,p,m,f,g)=>{const[h,b]=n.useState(u),v=g?"":o,w="boolean"!=typeof f?!!m:f;return n.useEffect(()=>{const n=i===e.FilterMatchEnum.ANY,o=C(v,c,p),u=r.length?r.map(({value:e})=>e):void 0,m=l||(e=>!!e.isDisabled),f=d||(e=>"string"==typeof e.label?e.label:""+e.label),g=e=>{const t=a(e),i=Object.assign({data:e,value:t,label:s(e)},m(e)&&{isDisabled:!0},u&&u.includes(t)&&{isSelected:!0});if(!(o&&!(e=>{const t=C(f(e),c,p);return n?t.indexOf(o)>-1:t.substr(0,o.length)===o})(i)||w&&i.isSelected))return i},h=t.reduce((e,n)=>{const t=g(n);return t&&e.push(t),e},[]);b(h)},[t,r,v,w,i,c,p,d,l,a,s]),h},ie=(e,t)=>{const o=n.useRef(!0);n.useEffect(()=>{if(!o.current)return e();o.current=!1},t)},re=(t,o,i,r,a,s,l,d)=>{const c=n.useRef(!1),u=n.useRef(!1),[p,m]=n.useState(r),[f,g]=n.useState(i===e.MenuPositionEnum.TOP);return n.useEffect(()=>{u.current=f},[f]),n.useEffect(()=>{const n=i===e.MenuPositionEnum.TOP||i===e.MenuPositionEnum.AUTO&&!function(e){if(!e)return!0;const n=e.getBoundingClientRect(),t=w(e),o=v(t);return t.getBoundingClientRect().height-o-n.top>=n.height}(t.current);g(n)},[t,i]),ie(()=>{if(o){const e=e=>{l&&l(),e&&(c.current=!0,m(e))};u.current?e():function(e,n,t,o){if(!e)return void o();const i=window.innerHeight,r=e.getBoundingClientRect();if(i-r.top>=r.height)return void o();const a=w(e),s=v(a),l=a.getBoundingClientRect().height-s-r.top,d=l<r.height;if(d||!t){return void o(d?l:void 0)}const c=parseInt(getComputedStyle(e).marginBottom||"0",10);y(a,r.bottom-i+s+c,n,o)}(t.current,a,s,e)}else d&&d(),c.current&&(c.current=!1,m(r))},[t,o,d,l,r,s,a]),[p,f]},ae=r.div.withConfig({displayName:"SelectWrapper",componentId:"sc-16q6iuz"})`position:relative;box-sizing:border-box;${({theme:e})=>e.select.css}`,se=r.div.withConfig({displayName:"ValueWrapper",componentId:"sc-yuq4ck"})`flex:1 1 0%;display:flex;flex-wrap:wrap;overflow:hidden;position:relative;align-items:center;box-sizing:border-box;padding:${({theme:e})=>e.control.padding};`,le=r.div.withConfig({displayName:"ControlWrapper",componentId:"sc-b0802r"})`outline:0;display:flex;flex-wrap:wrap;cursor:default;position:relative;align-items:center;box-sizing:border-box;justify-content:space-between;${({isDisabled:e,isFocused:n,isInvalid:t,theme:{control:o,color:i}})=>`\n min-height: ${o.minHeight};\n transition: ${o.transition};\n border-style: ${o.borderStyle};\n border-width: ${o.borderWidth};\n border-radius: ${o.borderRadius};\n border-color: ${t?i.danger:n?o.focusedBorderColor:i.border};\n ${e?"pointer-events: none;":""}\n ${o.height?`height: ${o.height};`:""}\n ${o.backgroundColor||e?`background-color: ${e?i.disabled:o.backgroundColor};`:""}\n ${n?`box-shadow: ${o.boxShadow} ${t?i.dangerLight:o.boxShadowColor};`:""}\n ${o.css||""}\n `}`,de=r.div.withConfig({displayName:"MenuWrapper",componentId:"sc-1wen7ck"})`z-index:999;cursor:default;position:absolute;${({menuTop:e,hideMenu:n,theme:{menu:t}})=>`\n width: ${t.width};\n margin: ${t.margin};\n padding: ${t.padding};\n box-shadow: ${t.boxShadow};\n border-radius: ${t.borderRadius};\n background-color: ${t.backgroundColor};\n ${n?"display: none;":""}\n ${e?`top: ${e};`:""}\n `} animation:${({theme:e})=>t.css(["",""],e.menu.animation)};${({theme:e})=>e.menu.css} .${"rfs-option"}{display:block;overflow:hidden;user-select:none;white-space:nowrap;text-overflow:ellipsis;-webkit-tap-highlight-color:transparent;${({theme:{menu:{option:e}}})=>`\n padding: ${e.padding};\n text-align: ${e.textAlign};\n\n &.rfs-option-focused,\n &:hover:not(.rfs-option-disabled):not(.rfs-option-selected) {\n background-color: ${e.focusedBgColor};\n }\n\n &.rfs-option-selected {\n color: ${e.selectedColor};\n background-color: ${e.selectedBgColor};\n }\n\n &.rfs-option-disabled {\n opacity: 0.35;\n }\n `}}`,ce=i.forwardRef(({async:o,isMulti:r,inputId:a,selectId:s,autoFocus:l,isLoading:d,onKeyDown:f,clearIcon:g,caretIcon:h,isInvalid:b,ariaLabel:v,menuWidth:w,isDisabled:y,inputDelay:C,onMenuOpen:E,onMenuClose:S,onInputBlur:M,isClearable:k,themeConfig:N,loadingNode:z,initialValue:D,onInputFocus:T,onInputChange:R,addClassNames:A,ariaLabelledBy:F,onOptionChange:V,onSearchChange:P,getOptionLabel:j,getOptionValue:W,openMenuOnFocus:q,isAriaLiveEnabled:Y,menuOverscanCount:U,blurInputOnSelect:K,renderOptionLabel:_,renderMultiOptions:G,menuScrollDuration:ce,filterIgnoreAccents:ue,hideSelectedOptions:pe,getIsOptionDisabled:me,getFilterOptionString:fe,isSearchable:ge=!0,openMenuOnClick:he=!0,filterIgnoreCase:be=!0,tabSelectsOption:ve=!0,closeMenuOnSelect:we=!0,scrollMenuIntoView:ye=!0,backspaceClearsValue:$e=!0,filterMatchFrom:xe=e.FilterMatchEnum.ANY,menuPosition:Ce=e.MenuPositionEnum.BOTTOM,options:Oe=u,loadingMsg:Ee="Loading...",placeholder:Se="Select option...",noOptionsMsg:Ie="No options",menuItemSize:Me=35,menuMaxHeight:ke=300},Ne)=>{const ze=n.useRef(),De=n.useRef(!1),Te=n.useRef(null),Le=n.useRef(null),Re=n.useRef(null),Ae=n.useRef(null),Fe=(()=>{const e=n.useRef(null);return null===e.current?"undefined"==typeof navigator||"undefined"==typeof window?(e.current=!1,e.current):(e.current="ontouchstart"in window||!!navigator.maxTouchPoints,e.current):e.current})(),Be="boolean"==typeof K?K:Fe,[Ve,Pe]=n.useState(""),[je,We]=n.useState(!1),[qe,Ye]=n.useState(!1),[Ue,He]=n.useState(m),[Ke,Xe]=n.useState(null),_e=n.useMemo(()=>x(N)?function e(n,t){const o=Object.assign({},n);return Object.keys(t).forEach(i=>{o[i]=x(t[i])&&"animation"!==i?i in n?e(n[i],t[i]):t[i]:t[i]||""}),o}(c,N):c,[N]),Ge=n.useMemo(()=>j||(e=>e.label),[j]),Je=n.useMemo(()=>W||(e=>e.value),[W]),Qe=n.useMemo(()=>_||Ge,[_,Ge]),Ze=((e,t)=>{const[o,i]=n.useState(e);return n.useEffect(()=>{if(void 0===t)return;const n=setTimeout(()=>{i(e)},t);return()=>{clearTimeout(n)}},[e,t]),void 0===t?e:o})(Ve,C),[en,nn]=n.useState(()=>O(D,Je,Ge)),[tn,on]=re(Le,je,Ce,ke,ce,ye,E,S),rn=oe(Oe,Ze,xe,en,Je,Ge,me,fe,be,ue,r,pe,o),an=()=>{Re.current.blur()},sn=()=>{Re.current.focus()},ln=e=>{Te.current&&Te.current.scrollToItem(e)},dn=n.useCallback((e,n)=>{n&&(n.stopPropagation(),"mousedown"===n.type&&n.preventDefault()),nn(n=>n.filter(({value:n})=>n!==e))},[]),cn=n.useCallback(e=>{if(!$(rn))return void We(!0);const n=r?-1:rn.findIndex(({isSelected:e})=>e),t=n>-1?n:e===ne?0:rn.length-1;We(!0),He(Object.assign({index:t},rn[t])),ln(t)},[r,rn]),un=n.useCallback((e,n)=>{n?r&&dn(e.value):nn(n=>r?[...n,e]:[e]),Be?an():we&&(We(!1),Pe(""))},[r,we,dn,Be]);n.useImperativeHandle(Ne,()=>({blur:an,focus:sn,clearValue:()=>{nn(p),He(m)},setValue:e=>{const n=function(e,n,t){if(null==e)return p;const o=O(e).reduce((e,n)=>(x(n)&&e.push(t(n)),e),[]);if(!$(o))return p;const i=[];for(const e of n)!i.includes(e)&&o.includes(t(e))&&i.push(e);return i}(e,rn,Je);nn(n)},toggleMenu:e=>{!0===e||void 0===e&&!je?(!qe&&sn(),cn(ne)):an()}})),n.useEffect(()=>{l&&sn()},[l]),n.useEffect(()=>{qe&&q&&cn(ne)},[qe,q,cn]),n.useEffect(()=>{P&&De.current&&(De.current=!1,P(Ze))},[P,Ze]),ie(()=>{if(V){const e=r?en.map(({data:e})=>e):$(en)?en[0].data:null;V(e)}},[r,en,V]),ie(()=>{const e=rn.length,n=e>0&&(o||e!==Oe.length||0===ze.current);0===e?He(m):(1===e||n)&&(He(Object.assign({index:0},rn[0])),ln(0)),ze.current=e},[o,Oe,rn]);const pn=()=>{const{data:e,value:n,label:t,isSelected:o,isDisabled:i}=Ue;e&&!i&&un({data:e,value:n,label:t},o)},mn=e=>{if(!$(en))return;let n=-1;const t=en.length-1,o=Ke?en.findIndex(({value:e})=>e===Ke):-1;switch(e){case J:n=o>-1&&o<t?o+1:-1;break;case Q:n=0!==o?-1===o?t:o-1:0}const i=n>=0?en[n].value:null;Ue.data&&He(m),i!==Ke&&Xe(i)},fn=e=>{if(!$(rn))return;const n=e===ee?(Ue.index+1)%rn.length:Ue.index>0?Ue.index-1:rn.length-1;Ke&&Xe(null),He(Object.assign({index:n},rn[n])),ln(n)},gn=e=>{if(y)return;qe||sn();const n="INPUT"!==e.currentTarget.tagName;je?n&&(We(!1),Ve&&Pe("")):he&&cn(ne),n&&e.preventDefault()},hn=n.useCallback(e=>{M&&M(e),Ye(!1),We(!1),Pe("")},[M]),bn=n.useCallback(e=>{T&&T(e),Ye(!0)},[T]),vn=n.useCallback(e=>{De.current=!0,R&&R(e.currentTarget.value||""),We(!0),Pe(e.currentTarget.value||"")},[R]),wn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),nn(p),sn()},[]),yn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),sn(),je?We(!1):cn(ne)},[je,cn]),$n=Math.min(tn,rn.length*Me),xn=on?((e,n,t)=>{const o=e>0||!n?e:n.getBoundingClientRect().height,i=t?t.getBoundingClientRect().height:0,r=n&&getComputedStyle(n),a=r?parseInt(r.marginBottom||"0",10):0,s=r?parseInt(r.marginTop||"0",10):0;return`calc(${-Math.abs(o+i)}px + ${a+s}px)`})($n,Le.current,Ae.current):void 0;return i.createElement(t.ThemeProvider,{theme:_e},i.createElement(ae,{id:s,role:"combobox","aria-haspopup":"listbox","aria-controls":a,onKeyDown:e=>{if(!(y||f&&(f(e),e.defaultPrevented))){switch(e.key){case"ArrowDown":je?fn(ee):cn(ne);break;case"ArrowUp":je?fn(Z):cn(te);break;case"ArrowLeft":if(!r||Ve||G)return;mn(Q);break;case"ArrowRight":if(!r||Ve||G)return;mn(J);break;case" ":if(Ve)return;if(!je){cn(ne);break}if(!Ue.data)return;pn();break;case"Enter":je&&229!==e.keyCode&&pn();break;case"Escape":je&&(We(!1),Pe(""));break;case"Tab":if(!je||!ve||!Ue.data||e.shiftKey)return;pn();break;case"Delete":case"Backspace":if(Ve)return;if(Ke){const e=en.findIndex(({value:e})=>e===Ke),n=e>-1&&e<en.length-1?en[e+1].value:null;dn(Ke),Xe(n)}else{if(!$e)return;if($(en))if(r&&!G){const{value:e}=en[en.length-1];dn(e)}else k&&nn(p)}break;default:return}e.preventDefault()}},"data-testid":void 0,"aria-expanded":je?"true":"false",className:A?"rfs-select-container":void 0},i.createElement(le,{ref:Ae,isInvalid:b,isFocused:qe,isDisabled:y,onMouseDown:gn,"data-testid":void 0,className:A?"rfs-control-container":void 0,onTouchEnd:Fe?gn:void 0},i.createElement(se,null,i.createElement(L,{isMulti:r,inputValue:Ve,placeholder:Se,isTouchDevice:Fe,selectedOption:en,focusedMultiValue:Ke,renderOptionLabel:Qe,renderMultiOptions:G,removeSelectedOption:dn}),i.createElement(B,{id:a,ref:Re,ariaLabel:v,inputValue:Ve,onBlur:hn,onFocus:bn,addClassNames:A,onChange:vn,ariaLabelledBy:F,readOnly:y||!ge||!!Ke})),i.createElement(H,{menuOpen:je,clearIcon:g,caretIcon:h,isInvalid:b,isLoading:d,isDisabled:y,loadingNode:z,addClassNames:A,isTouchDevice:Fe,onClearMouseDown:wn,showClear:!(!k||y||!$(en)),onCaretMouseDown:y||he?void 0:yn})),i.createElement(de,{ref:Le,hideMenu:!je,menuTop:xn,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),sn()},"data-testid":void 0,className:A?"rfs-menu-container":void 0},i.createElement(I,{ref:Te,isLoading:d,height:$n,itemSize:Me,loadingMsg:Ee,menuOptions:rn,noOptionsMsg:Ie,selectOption:un,overscanCount:U,width:w||_e.menu.width,renderOptionLabel:Qe,focusedOptionIndex:Ue.index})),Y&&i.createElement(X,{menuOpen:je,isFocused:qe,ariaLabel:v,inputValue:Ve,isSearchable:ge,focusedOption:Ue,selectedOption:en,optionCount:rn.length})))});ce.displayName="Select",e.Select=ce,Object.defineProperty(e,"__esModule",{value:!0})}));

179

dist/index-prod.umd.js

@@ -1,178 +0,1 @@

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("styled-components"),require("react-window")):"function"==typeof define&&define.amd?define(["exports","react","styled-components","react-window"],n):n((e=e||self).ReactFunctionalSelect={},e.React,e.StyledComponents,e.ReactWindow)}(this,(function(e,n,t,o){"use strict";var i="default"in n?n.default:n,r="default"in t?t.default:t;const a=t.keyframes`
0%, 80%, 100% {
transform: scale(0);
} 40% {
transform: scale(1.0);
}
`,l=t.keyframes`
from {
opacity: 0;
} to {
opacity: 1;
}
`,s=t.css`${a} 1.19s ease-in-out infinite`,d=t.css`${l} 0.225s ease-in-out forwards`;var c=Object.freeze({color:{border:"#ced4da",danger:"#dc3545",primary:"#007bff",disabled:"#e9ecef",placeholder:"#6E7276",dangerLight:"rgba(220, 53, 69, 0.25)"},input:{},select:{},loader:{size:"0.625rem",padding:"0.375rem 0.75rem",animation:s,color:"rgba(0, 123, 255, 0.42)"},icon:{color:"#cccccc",hoverColor:"#A6A6A6",padding:"0 0.9375rem",clear:{width:"14px",height:"16px",animation:d,transition:"color 0.15s ease-in-out"},caret:{size:"7px",transition:"transform 0.25s ease-in-out, color 0.15s ease-in-out"}},control:{minHeight:"38px",borderWidth:"1px",borderStyle:"solid",borderRadius:"0.25rem",boxShadow:"0 0 0 0.2rem",padding:"0.375rem 0.75rem",boxShadowColor:"rgba(0, 123, 255, 0.25)",focusedBorderColor:"rgba(0, 123, 255, 0.75)",transition:"box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out"},menu:{width:"100%",margin:"0.5rem 0",padding:"0.15rem 0",borderRadius:"0.25rem",backgroundColor:"#fff",animation:d,boxShadow:"0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 11px rgba(0, 0, 0, 0.1)",option:{textAlign:"left",selectedColor:"#fff",selectedBgColor:"#007bff",padding:"0.375rem 0.75rem",focusedBgColor:"rgba(0, 123, 255, 0.20)"}},noOptions:{fontSize:"1.25rem",margin:"0.25rem 0",color:"hsl(0, 0%, 60%)",padding:"0.375rem 0.75rem"},multiValue:{margin:"1px 2px",borderRadius:"0.25rem",backgroundColor:"#e7edf3",animation:d,label:{fontSize:"0.825em",borderRadius:"0.25rem",padding:"1px 2px 1px 6px"},clear:{fontWeight:700,padding:"0 7px",fontSize:"0.67em",alignItems:"center",borderRadius:"0.25rem",transition:"color 0.15s ease-in-out, background-color 0.15s ease-in-out"}}});const u=[],p=[],m={index:-1},f=/(auto|scroll)/,g=/[\u0300-\u036f]/g,h=/(MSIE|Trident\/|Edge\/|Edg\/)/i;function b(e){return e===document.documentElement||e===document.body||e===window}function v(e){return b(e)?window.pageYOffset:e.scrollTop}function w(e){let n=getComputedStyle(e);const t="absolute"===n.position;if("fixed"===n.position)return document.documentElement;for(let o=e;o=o?o.parentElement:null;)if(n=getComputedStyle(o),(!t||"static"!==n.position)&&f.test(`${n.overflow}${n.overflowY}${n.overflowX}`))return o;return document.documentElement}function $(e,n,t=300,o){let i=0;const r=v(e),a=n-r;window.requestAnimationFrame((function n(){i+=5;const l=a*((s=(s=i)/t-1)*s*s+1)+r;var s;!function(e,n){b(e)?window.scrollTo(0,n):e.scrollTop=n}(e,l),i<t?window.requestAnimationFrame(n):o&&o()}))}function x(e){return Array.isArray(e)&&!!e.length}function y(e){return e&&"object"==typeof e&&!Array.isArray(e)}function O(e,n,t){let o=e.trim();return n&&(o=o.toLowerCase()),t?function(e){return e.normalize("NFD").replace(g,"")}(o):o}function E(e,n,t){const o=Array.isArray(e)?e.filter(Boolean):y(e)?[e]:p;return n&&t&&x(o)?o.map(e=>({data:e,value:n(e),label:t(e)})):o}const C=i.memo(({index:e,style:n,data:{menuOptions:t,selectOption:o,renderOptionLabel:r,focusedOptionIndex:a}})=>{const{data:l,value:s,label:d,isDisabled:c,isSelected:u}=t[e],p=function(e,n,t){let o="rfs-option";return e&&(o+=" rfs-option-disabled"),n&&(o+=" rfs-option-selected"),t&&(o+=" rfs-option-focused"),o}(c,u,e===a),m=c?void 0:()=>o({data:l,value:s,label:d},u);return i.createElement("div",{style:n,className:p,onClick:m},r(l))},o.areEqual);C.displayName="Option";const S=r.div`
text-align: center;
${({theme:{noOptions:e}})=>`\n color: ${e.color};\n margin: ${e.margin};\n padding: ${e.padding};\n font-size: ${e.fontSize};\n ${e.css||""}\n `}
`,M=i.forwardRef(({width:e,height:t,itemSize:r,isLoading:a,loadingMsg:l,menuOptions:s,selectOption:d,noOptionsMsg:c,overscanCount:u,renderOptionLabel:p,focusedOptionIndex:m},f)=>{const g=n.useMemo(()=>({menuOptions:s,selectOption:d,renderOptionLabel:p,focusedOptionIndex:m}),[s,m,d,p]);return a?i.createElement(S,null,l):i.createElement(n.Fragment,null,i.createElement(o.FixedSizeList,{ref:f,width:e,height:t,itemSize:r,itemData:g,overscanCount:u,itemCount:s.length},C),!x(s)&&i.createElement(S,null,c))});M.displayName="Menu";const k=r.div`
min-width: 0;
display: flex;
animation: ${({theme:e})=>t.css`${e.multiValue.animation}`};
${({theme:{multiValue:e}})=>`\n margin: ${e.margin};\n border-radius: ${e.borderRadius};\n background-color: ${e.backgroundColor};\n ${e.css||""}\n `}
`,I=r.div`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
${({theme:{multiValue:{label:e}}})=>`\n padding: ${e.padding};\n font-size: ${e.fontSize};\n border-radius: ${e.borderRadius};\n `}
`,D=r.div`
display: flex;
${({isFocused:e,theme:{color:n,multiValue:{clear:t}}})=>`\n padding: ${t.padding};\n font-size: ${t.fontSize};\n transition: ${t.transition};\n align-items: ${t.alignItems};\n font-weight: ${t.fontWeight};\n border-radius: ${t.borderRadius};\n background-color: ${e?n.dangerLight:"transparent"};\n :hover {\n color: ${n.danger};\n background-color: ${n.dangerLight};\n }\n `}
`,z=({data:e,value:n,isFocused:t,isTouchDevice:o,renderOptionLabel:r,removeSelectedOption:a})=>i.createElement(k,null,i.createElement(I,null,r(e)),i.createElement(D,{isFocused:t,"data-testid":void 0,onMouseDown:e=>a(n,e),onTouchEnd:o?e=>a(n,e):void 0},"X")),T=r.div`
top: 50%;
overflow: hidden;
position: absolute;
white-space: nowrap;
box-sizing: border-box;
text-overflow: ellipsis;
transform: translateY(-50%);
max-width: calc(100% - 0.5rem);
`,L=r.div`
top: 50%;
overflow: hidden;
position: absolute;
white-space: nowrap;
box-sizing: border-box;
text-overflow: ellipsis;
transform: translateY(-50%);
color: ${({theme:e})=>e.color.placeholder};
`,R=i.memo(({isMulti:e,inputValue:t,placeholder:o,isTouchDevice:r,selectedOption:a,focusedMultiValue:l,renderOptionLabel:s,renderMultiOptions:d,removeSelectedOption:c})=>{if(t&&(!e||e&&(!x(a)||d)))return null;if(!x(a))return i.createElement(L,null,o);if(!e){const e=s(a[0].data);return i.createElement(T,null,e)}return i.createElement(n.Fragment,null,d?d({selected:a,renderOptionLabel:s}):a.map(({data:e,value:n})=>i.createElement(z,{key:n,data:e,value:n,isTouchDevice:r,renderOptionLabel:s,isFocused:n===l,removeSelectedOption:c})))});R.displayName="Value";const N={type:"text",spellCheck:!1,autoCorrect:"off",autoComplete:"off",autoCapitalize:"none","aria-autocomplete":"list","data-testid":void 0},A=r.div`
top: 0;
left: 0;
height: 0;
overflow: scroll;
white-space: pre;
position: absolute;
visibility: hidden;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
${({theme:e})=>e.input.css}
`,F=r.input`
border: 0;
outline: 0;
padding: 0;
cursor: text;
background: 0;
color: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
box-sizing: content-box;
:read-only {
opacity: 0;
cursor: default;
}
${({theme:e})=>e.input.css}
${"undefined"!=typeof navigator&&h.test(navigator.userAgent)&&"::-ms-clear { display: none; }"}
`,B=i.memo(i.forwardRef(({id:e,onBlur:t,onFocus:o,readOnly:r,onChange:a,ariaLabel:l,inputValue:s,addClassNames:d,ariaLabelledBy:c},u)=>{const p=n.useRef(null),[m,f]=n.useState(2),g=Object.assign({},N,{"aria-label":l,"aria-labelledby":c,style:{width:m}});return n.useEffect(()=>{p.current&&f(p.current.scrollWidth+2)},[s]),i.createElement(n.Fragment,null,i.createElement(F,Object.assign({id:e,ref:u,onBlur:t,onFocus:o,value:s,readOnly:r},g,{onChange:r?void 0:a,className:d?"rfs-autosize-input":void 0})),i.createElement(A,{ref:p},s))}));B.displayName="AutosizeInput";const V=r.div`
display: flex;
align-self: center;
text-align: center;
margin-right: 0.25rem;
padding: ${({theme:e})=>e.loader.padding};
> div {
border-radius: 100%;
display: inline-block;
animation: ${({theme:e})=>t.css`${e.loader.animation}`};
${({theme:{loader:e}})=>`\n width: ${e.size};\n height: ${e.size};\n background-color: ${e.color};\n `}
:nth-of-type(1) {
animation-delay: -0.272s;
}
:nth-of-type(2) {
animation-delay: -0.136s;
}
}
`,P=({addClassNames:e})=>i.createElement(V,{"aria-hidden":"true",className:e?"rfs-loading-dots":void 0},i.createElement("div",null),i.createElement("div",null),i.createElement("div",null)),j=r.div`
display: flex;
flex-shrink: 0;
align-items: center;
align-self: stretch;
box-sizing: border-box;
`,W=r.div`
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
${({theme:{icon:e}})=>`\n color: ${e.color};\n padding: ${e.padding};\n :hover {\n color: ${e.hoverColor};\n }\n `}
${({theme:e})=>e.icon.css}
`,Y=r.svg`
fill: currentColor;
animation: ${({theme:e})=>t.css`${e.icon.clear.animation}`};
${({theme:{icon:{clear:e}}})=>`\n width: ${e.width};\n height: ${e.height};\n transition: ${e.transition};\n `}
`,q=r.div`
${({theme:{icon:{caret:e}}})=>`\n transition: ${e.transition};\n border-top: ${e.size} dashed;\n border-left: ${e.size} solid transparent;\n border-right: ${e.size} solid transparent;\n `}
${({menuOpen:e,isInvalid:n,theme:{color:t}})=>e&&`\n transform: rotate(180deg);\n color: ${n?t.danger:t.caretActive||t.primary};\n `}
`,U=r.div`
width: 1px;
margin: 0.5rem 0;
align-self: stretch;
box-sizing: border-box;
background-color: ${({theme:e})=>e.color.iconSeparator||e.color.border};
`,H=i.memo(({menuOpen:e,clearIcon:n,caretIcon:t,isInvalid:o,showClear:r,isLoading:a,isDisabled:l,loadingNode:s,isTouchDevice:d,addClassNames:c,onCaretMouseDown:u,onClearMouseDown:p})=>{const m="function"==typeof t||"function"==typeof n?{menuOpen:e,isLoading:!!a,isInvalid:!!o,isDisabled:!!l}:void 0,f=e=>"function"==typeof e?e(m):e;return i.createElement(j,null,r&&!a&&i.createElement(W,{onMouseDown:p,"data-testid":void 0,onTouchEnd:d?p:void 0},f(n)||i.createElement(Y,{"aria-hidden":"true",viewBox:"0 0 14 16",className:c?"rfs-clear-icon":void 0},i.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"}))),a&&(s||i.createElement(P,{addClassNames:c})),i.createElement(U,null),i.createElement(W,{onMouseDown:u,"data-testid":void 0,onTouchEnd:d?u:void 0},f(t)||i.createElement(q,{"aria-hidden":"true",menuOpen:e,isInvalid:o,className:c?"rfs-caret-icon":void 0})))});H.displayName="IndicatorIcons";const K=r.span`
border: 0;
padding: 0;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
`,X=({menuOpen:e,isFocused:n,ariaLabel:t,inputValue:o,optionCount:r,isSearchable:a,focusedOption:l,selectedOption:s})=>{if(!n)return null;const{value:d,label:c,index:u,isDisabled:p}=l,m="Selected option: "+(x(s)?s.map(({label:e})=>e).join(" "):"N/A"),f=`${r} result(s) available${o?" for search input "+o:""}.`,g=d?`Focused option: ${c}${p?" - disabled":""}, ${u+1} of ${r}.`:"",h=e?"Use Up and Down arrow keys to choose options, press Enter or Tab to select the currently focused option, press Escape to close the menu.":`${t||"Select"} is focused${a?", type to filter options":""}, press Down arrow key to open the menu.`;return i.createElement(K,{"aria-live":"polite","data-testid":void 0},i.createElement("p",null,m),i.createElement("p",null,`${g} ${f} ${h}`))};var _,G;(_=e.MenuPositionEnum||(e.MenuPositionEnum={})).TOP="top",_.AUTO="auto",_.BOTTOM="bottom",(G=e.FilterMatchEnum||(e.FilterMatchEnum={})).ANY="any",G.START="start";const J=0,Q=1,Z=0,ee=1,ne=2,te=3,oe=(t,o,i,r,a,l,s,d,c,p,m,f,g)=>{const[h,b]=n.useState(u),v=g?"":o,w="boolean"!=typeof f?!!m:f;return n.useEffect(()=>{const n=i===e.FilterMatchEnum.ANY,o=O(v,c,p),u=r.length?r.map(({value:e})=>e):void 0,m=s||(e=>!!e.isDisabled),f=d||(e=>"string"==typeof e.label?e.label:""+e.label),g=e=>{const t=a(e),i=Object.assign({data:e,value:t,label:l(e)},m(e)&&{isDisabled:!0},u&&u.includes(t)&&{isSelected:!0});if(!(o&&!(e=>{const t=O(f(e),c,p);return n?t.indexOf(o)>-1:t.substr(0,o.length)===o})(i)||w&&i.isSelected))return i},h=t.reduce((e,n)=>{const t=g(n);return t&&e.push(t),e},[]);b(h)},[t,r,v,w,i,c,p,d,s,a,l]),h},ie=(e,t)=>{const o=n.useRef(!0);n.useEffect(()=>{if(!o.current)return e();o.current=!1},t)},re=(t,o,i,r,a,l,s,d)=>{const c=n.useRef(!1),u=n.useRef(!1),[p,m]=n.useState(r),[f,g]=n.useState(i===e.MenuPositionEnum.TOP);return n.useEffect(()=>{u.current=f},[f]),n.useEffect(()=>{const n=i===e.MenuPositionEnum.TOP||i===e.MenuPositionEnum.AUTO&&!function(e){if(!e)return!0;const n=e.getBoundingClientRect(),t=w(e),o=v(t);return t.getBoundingClientRect().height-o-n.top>=n.height}(t.current);g(n)},[t,i]),ie(()=>{if(o){const e=e=>{s&&s(),e&&(c.current=!0,m(e))};u.current?e():function(e,n,t,o){if(!e)return void o();const i=window.innerHeight,r=e.getBoundingClientRect();if(i-r.top>=r.height)return void o();const a=w(e),l=v(a),s=a.getBoundingClientRect().height-l-r.top,d=s<r.height;if(d||!t){return void o(d?s:void 0)}const c=parseInt(getComputedStyle(e).marginBottom||"0",10);$(a,r.bottom-i+l+c,n,o)}(t.current,a,l,e)}else d&&d(),c.current&&(c.current=!1,m(r))},[t,o,d,s,r,l,a]),[p,f]},ae=r.div`
position: relative;
box-sizing: border-box;
${({theme:e})=>e.select.css}
`,le=r.div`
flex: 1 1 0%;
display: flex;
flex-wrap: wrap;
overflow: hidden;
position: relative;
align-items: center;
box-sizing: border-box;
padding: ${({theme:e})=>e.control.padding};
`,se=r.div`
outline: 0;
display: flex;
flex-wrap: wrap;
cursor: default;
position: relative;
align-items: center;
box-sizing: border-box;
justify-content: space-between;
${({isDisabled:e,isFocused:n,isInvalid:t,theme:{control:o,color:i}})=>`\n min-height: ${o.minHeight};\n transition: ${o.transition};\n border-style: ${o.borderStyle};\n border-width: ${o.borderWidth};\n border-radius: ${o.borderRadius};\n border-color: ${t?i.danger:n?o.focusedBorderColor:i.border};\n ${e?"pointer-events: none;":""}\n ${o.height?`height: ${o.height};`:""}\n ${o.backgroundColor||e?`background-color: ${e?i.disabled:o.backgroundColor};`:""}\n ${n?`box-shadow: ${o.boxShadow} ${t?i.dangerLight:o.boxShadowColor};`:""}\n ${o.css||""}\n `}
`,de=r.div`
z-index: 999;
cursor: default;
position: absolute;
${({menuTop:e,hideMenu:n,theme:{menu:t}})=>`\n width: ${t.width};\n margin: ${t.margin};\n padding: ${t.padding};\n box-shadow: ${t.boxShadow};\n border-radius: ${t.borderRadius};\n background-color: ${t.backgroundColor};\n ${n?"display: none;":""}\n ${e?`top: ${e};`:""}\n `}
animation: ${({theme:e})=>t.css`${e.menu.animation}`};
${({theme:e})=>e.menu.css}
.${"rfs-option"} {
display: block;
overflow: hidden;
user-select: none;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-tap-highlight-color: transparent;
${({theme:{menu:{option:e}}})=>`\n padding: ${e.padding};\n text-align: ${e.textAlign};\n\n &.rfs-option-focused,\n &:hover:not(.rfs-option-disabled):not(.rfs-option-selected) {\n background-color: ${e.focusedBgColor};\n }\n\n &.rfs-option-selected {\n color: ${e.selectedColor};\n background-color: ${e.selectedBgColor};\n }\n\n &.rfs-option-disabled {\n opacity: 0.35;\n }\n `}
}
`,ce=i.forwardRef(({async:o,isMulti:r,inputId:a,selectId:l,autoFocus:s,isLoading:d,onKeyDown:f,clearIcon:g,caretIcon:h,isInvalid:b,ariaLabel:v,menuWidth:w,isDisabled:$,inputDelay:O,onMenuOpen:C,onMenuClose:S,onInputBlur:k,isClearable:I,themeConfig:D,loadingNode:z,initialValue:T,onInputFocus:L,onInputChange:N,addClassNames:A,ariaLabelledBy:F,onOptionChange:V,onSearchChange:P,getOptionLabel:j,getOptionValue:W,openMenuOnFocus:Y,isAriaLiveEnabled:q,menuOverscanCount:U,blurInputOnSelect:K,renderOptionLabel:_,renderMultiOptions:G,menuScrollDuration:ce,filterIgnoreAccents:ue,hideSelectedOptions:pe,getIsOptionDisabled:me,getFilterOptionString:fe,isSearchable:ge=!0,openMenuOnClick:he=!0,filterIgnoreCase:be=!0,tabSelectsOption:ve=!0,closeMenuOnSelect:we=!0,scrollMenuIntoView:$e=!0,backspaceClearsValue:xe=!0,filterMatchFrom:ye=e.FilterMatchEnum.ANY,menuPosition:Oe=e.MenuPositionEnum.BOTTOM,options:Ee=u,loadingMsg:Ce="Loading...",placeholder:Se="Select option...",noOptionsMsg:Me="No options",menuItemSize:ke=35,menuMaxHeight:Ie=300},De)=>{const ze=n.useRef(),Te=n.useRef(!1),Le=n.useRef(null),Re=n.useRef(null),Ne=n.useRef(null),Ae=n.useRef(null),Fe=(()=>{const e=n.useRef(null);return null===e.current?"undefined"==typeof navigator||"undefined"==typeof window?(e.current=!1,e.current):(e.current="ontouchstart"in window||!!navigator.maxTouchPoints,e.current):e.current})(),Be="boolean"==typeof K?K:Fe,[Ve,Pe]=n.useState(""),[je,We]=n.useState(!1),[Ye,qe]=n.useState(!1),[Ue,He]=n.useState(m),[Ke,Xe]=n.useState(null),_e=n.useMemo(()=>y(D)?function e(n,t){const o=Object.assign({},n);return Object.keys(t).forEach(i=>{o[i]=y(t[i])&&"animation"!==i?i in n?e(n[i],t[i]):t[i]:t[i]||""}),o}(c,D):c,[D]),Ge=n.useMemo(()=>j||(e=>e.label),[j]),Je=n.useMemo(()=>W||(e=>e.value),[W]),Qe=n.useMemo(()=>_||Ge,[_,Ge]),Ze=((e,t)=>{const[o,i]=n.useState(e);return n.useEffect(()=>{if(void 0===t)return;const n=setTimeout(()=>{i(e)},t);return()=>{clearTimeout(n)}},[e,t]),void 0===t?e:o})(Ve,O),[en,nn]=n.useState(()=>E(T,Je,Ge)),[tn,on]=re(Re,je,Oe,Ie,ce,$e,C,S),rn=oe(Ee,Ze,ye,en,Je,Ge,me,fe,be,ue,r,pe,o),an=()=>{Ne.current.blur()},ln=()=>{Ne.current.focus()},sn=e=>{Le.current&&Le.current.scrollToItem(e)},dn=n.useCallback((e,n)=>{n&&(n.stopPropagation(),"mousedown"===n.type&&n.preventDefault()),nn(n=>n.filter(({value:n})=>n!==e))},[]),cn=n.useCallback(e=>{if(!x(rn))return void We(!0);const n=r?-1:rn.findIndex(({isSelected:e})=>e),t=n>-1?n:e===ne?0:rn.length-1;We(!0),He(Object.assign({index:t},rn[t])),sn(t)},[r,rn]),un=n.useCallback((e,n)=>{n?r&&dn(e.value):nn(n=>r?[...n,e]:[e]),Be?an():we&&(We(!1),Pe(""))},[r,we,dn,Be]);n.useImperativeHandle(De,()=>({blur:an,focus:ln,clearValue:()=>{nn(p),He(m)},setValue:e=>{const n=function(e,n,t){if(null==e)return p;const o=E(e).reduce((e,n)=>(y(n)&&e.push(t(n)),e),[]);if(!x(o))return p;const i=[],r=[...new Set(o)];for(const e of n)if(r.includes(t(e))&&(i.push(e),r.length===i.length))break;return i}(e,rn,Je);nn(n)},toggleMenu:e=>{!0===e||void 0===e&&!je?(!Ye&&ln(),cn(ne)):an()}})),n.useEffect(()=>{s&&ln()},[s]),n.useEffect(()=>{Ye&&Y&&cn(ne)},[Ye,Y,cn]),n.useEffect(()=>{P&&Te.current&&(Te.current=!1,P(Ze))},[P,Ze]),ie(()=>{if(V){const e=r?en.map(({data:e})=>e):x(en)?en[0].data:null;V(e)}},[r,en,V]),ie(()=>{const e=rn.length,n=e>0&&(o||e!==Ee.length||0===ze.current);0===e?He(m):(1===e||n)&&(He(Object.assign({index:0},rn[0])),sn(0)),ze.current=e},[o,Ee,rn]);const pn=()=>{const{data:e,value:n,label:t,isSelected:o,isDisabled:i}=Ue;e&&!i&&un({data:e,value:n,label:t},o)},mn=e=>{if(!x(en))return;let n=-1;const t=en.length-1,o=Ke?en.findIndex(({value:e})=>e===Ke):-1;switch(e){case J:n=o>-1&&o<t?o+1:-1;break;case Q:n=0!==o?-1===o?t:o-1:0}const i=n>=0?en[n].value:null;Ue.data&&He(m),i!==Ke&&Xe(i)},fn=e=>{if(!x(rn))return;const n=e===ee?(Ue.index+1)%rn.length:Ue.index>0?Ue.index-1:rn.length-1;Ke&&Xe(null),He(Object.assign({index:n},rn[n])),sn(n)},gn=e=>{if($)return;Ye||ln();const n="INPUT"!==e.currentTarget.tagName;je?n&&(We(!1),Ve&&Pe("")):he&&cn(ne),n&&e.preventDefault()},hn=n.useCallback(e=>{k&&k(e),qe(!1),We(!1),Pe("")},[k]),bn=n.useCallback(e=>{L&&L(e),qe(!0)},[L]),vn=n.useCallback(e=>{Te.current=!0,N&&N(e.currentTarget.value||""),We(!0),Pe(e.currentTarget.value||"")},[N]),wn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),nn(p),ln()},[]),$n=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),ln(),je?We(!1):cn(ne)},[je,cn]),xn=Math.min(tn,rn.length*ke);return i.createElement(t.ThemeProvider,{theme:_e},i.createElement(ae,{id:l,role:"combobox","aria-haspopup":"listbox","aria-controls":a,onKeyDown:e=>{if(!($||f&&(f(e),e.defaultPrevented))){switch(e.key){case"ArrowDown":je?fn(ee):cn(ne);break;case"ArrowUp":je?fn(Z):cn(te);break;case"ArrowLeft":if(!r||Ve||G)return;mn(Q);break;case"ArrowRight":if(!r||Ve||G)return;mn(J);break;case" ":if(Ve)return;if(!je){cn(ne);break}if(!Ue.data)return;pn();break;case"Enter":je&&229!==e.keyCode&&pn();break;case"Escape":je&&(We(!1),Pe(""));break;case"Tab":if(!je||!ve||!Ue.data||e.shiftKey)return;pn();break;case"Delete":case"Backspace":if(Ve)return;if(Ke){const e=en.findIndex(({value:e})=>e===Ke),n=e>-1&&e<en.length-1?en[e+1].value:null;dn(Ke),Xe(n)}else{if(!xe)return;if(x(en))if(r&&!G){const{value:e}=en[en.length-1];dn(e)}else I&&nn(p)}break;default:return}e.preventDefault()}},"data-testid":void 0,"aria-expanded":je?"true":"false",className:A?"rfs-select-container":void 0},i.createElement(se,{ref:Ae,isInvalid:b,isFocused:Ye,isDisabled:$,onMouseDown:gn,"data-testid":void 0,className:A?"rfs-control-container":void 0,onTouchEnd:Fe?gn:void 0},i.createElement(le,null,i.createElement(R,{isMulti:r,inputValue:Ve,placeholder:Se,isTouchDevice:Fe,selectedOption:en,focusedMultiValue:Ke,renderOptionLabel:Qe,renderMultiOptions:G,removeSelectedOption:dn}),i.createElement(B,{id:a,ref:Ne,ariaLabel:v,inputValue:Ve,onBlur:hn,onFocus:bn,addClassNames:A,onChange:vn,ariaLabelledBy:F,readOnly:$||!ge||!!Ke})),i.createElement(H,{menuOpen:je,clearIcon:g,caretIcon:h,isInvalid:b,isLoading:d,isDisabled:$,loadingNode:z,addClassNames:A,isTouchDevice:Fe,onClearMouseDown:wn,showClear:!(!I||$||!x(en)),onCaretMouseDown:$||he?void 0:$n})),i.createElement(de,{ref:Re,hideMenu:!je,menuTop:on?((e,n,t)=>{const o=e>0||!n?e:n.getBoundingClientRect().height,i=t?t.getBoundingClientRect().height:0,r=n&&getComputedStyle(n),a=r?parseInt(r.marginBottom||"0",10):0,l=r?parseInt(r.marginTop||"0",10):0;return`calc(${-Math.abs(o+i)}px + ${a+l}px)`})(xn,Re.current,Ae.current):void 0,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),ln()},"data-testid":void 0,className:A?"rfs-menu-container":void 0},i.createElement(M,{ref:Le,isLoading:d,height:xn,itemSize:ke,loadingMsg:Ce,menuOptions:rn,noOptionsMsg:Me,selectOption:un,overscanCount:U,width:w||_e.menu.width,renderOptionLabel:Qe,focusedOptionIndex:Ue.index})),q&&i.createElement(X,{menuOpen:je,isFocused:Ye,ariaLabel:v,inputValue:Ve,isSearchable:ge,focusedOption:Ue,selectedOption:en,optionCount:rn.length})))});ce.displayName="Select",e.Select=ce,Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("styled-components"),require("react-window")):"function"==typeof define&&define.amd?define(["exports","react","styled-components","react-window"],n):n((e=e||self).ReactFunctionalSelect={},e.React,e.StyledComponents,e.ReactWindow)}(this,(function(e,n,t,o){"use strict";var i="default"in n?n.default:n,r="default"in t?t.default:t;const a=t.keyframes(["0%,80%,100%{transform:scale(0);}40%{transform:scale(1.0);}"]),s=t.keyframes(["from{opacity:0;}to{opacity:1;}"]),l=t.css([""," 1.19s ease-in-out infinite"],a),d=t.css([""," 0.225s ease-in-out forwards"],s);var c=Object.freeze({color:{border:"#ced4da",danger:"#dc3545",primary:"#007bff",disabled:"#e9ecef",placeholder:"#6E7276",dangerLight:"rgba(220, 53, 69, 0.25)"},input:{},select:{},loader:{size:"0.625rem",padding:"0.375rem 0.75rem",animation:l,color:"rgba(0, 123, 255, 0.42)"},icon:{color:"#cccccc",hoverColor:"#A6A6A6",padding:"0 0.9375rem",clear:{width:"14px",height:"16px",animation:d,transition:"color 0.15s ease-in-out"},caret:{size:"7px",transition:"transform 0.25s ease-in-out, color 0.15s ease-in-out"}},control:{minHeight:"38px",borderWidth:"1px",borderStyle:"solid",borderRadius:"0.25rem",boxShadow:"0 0 0 0.2rem",padding:"0.375rem 0.75rem",boxShadowColor:"rgba(0, 123, 255, 0.25)",focusedBorderColor:"rgba(0, 123, 255, 0.75)",transition:"box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out"},menu:{width:"100%",margin:"0.5rem 0",padding:"0.15rem 0",borderRadius:"0.25rem",backgroundColor:"#fff",animation:d,boxShadow:"0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 11px rgba(0, 0, 0, 0.1)",option:{textAlign:"left",selectedColor:"#fff",selectedBgColor:"#007bff",padding:"0.375rem 0.75rem",focusedBgColor:"rgba(0, 123, 255, 0.20)"}},noOptions:{fontSize:"1.25rem",margin:"0.25rem 0",color:"hsl(0, 0%, 60%)",padding:"0.375rem 0.75rem"},multiValue:{margin:"1px 2px",borderRadius:"0.25rem",backgroundColor:"#e7edf3",animation:d,label:{fontSize:"0.825em",borderRadius:"0.25rem",padding:"1px 2px 1px 6px"},clear:{fontWeight:700,padding:"0 7px",fontSize:"0.67em",alignItems:"center",borderRadius:"0.25rem",transition:"color 0.15s ease-in-out, background-color 0.15s ease-in-out"}}});const u=[],p=[],m={index:-1},f=/(auto|scroll)/,g=/[\u0300-\u036f]/g,h=/(MSIE|Trident\/|Edge\/|Edg\/)/i;function b(e){return e===document.documentElement||e===document.body||e===window}function v(e){return b(e)?window.pageYOffset:e.scrollTop}function w(e){let n=getComputedStyle(e);const t="absolute"===n.position;if("fixed"===n.position)return document.documentElement;for(let o=e;o=o?o.parentElement:null;)if(n=getComputedStyle(o),(!t||"static"!==n.position)&&f.test(`${n.overflow}${n.overflowY}${n.overflowX}`))return o;return document.documentElement}function y(e,n,t=300,o){let i=0;const r=v(e),a=n-r;window.requestAnimationFrame((function n(){i+=5;const s=a*((l=(l=i)/t-1)*l*l+1)+r;var l;!function(e,n){b(e)?window.scrollTo(0,n):e.scrollTop=n}(e,s),i<t?window.requestAnimationFrame(n):o&&o()}))}function $(e){return Array.isArray(e)&&!!e.length}function x(e){return e&&"object"==typeof e&&!Array.isArray(e)}function C(e,n,t){let o=e.trim();return n&&(o=o.toLowerCase()),t?function(e){return e.normalize("NFD").replace(g,"")}(o):o}function O(e,n,t){const o=Array.isArray(e)?e.filter(Boolean):x(e)?[e]:p;return n&&t&&$(o)?o.map(e=>({data:e,value:n(e),label:t(e)})):o}const E=i.memo(({index:e,style:n,data:{menuOptions:t,selectOption:o,renderOptionLabel:r,focusedOptionIndex:a}})=>{const{data:s,value:l,label:d,isDisabled:c,isSelected:u}=t[e],p=function(e,n,t){let o="rfs-option";return e&&(o+=" rfs-option-disabled"),n&&(o+=" rfs-option-selected"),t&&(o+=" rfs-option-focused"),o}(c,u,e===a),m=c?void 0:()=>o({data:s,value:l,label:d},u);return i.createElement("div",{style:n,className:p,onClick:m},r(s))},o.areEqual);E.displayName="Option";const S=r.div.withConfig({displayName:"NoOptionsMsg",componentId:"sc-mcprzj"})`text-align:center;${({theme:{noOptions:e}})=>`\n color: ${e.color};\n margin: ${e.margin};\n padding: ${e.padding};\n font-size: ${e.fontSize};\n ${e.css||""}\n `}`,I=i.forwardRef(({width:e,height:t,itemSize:r,isLoading:a,loadingMsg:s,menuOptions:l,selectOption:d,noOptionsMsg:c,overscanCount:u,renderOptionLabel:p,focusedOptionIndex:m},f)=>{const g=n.useMemo(()=>({menuOptions:l,selectOption:d,renderOptionLabel:p,focusedOptionIndex:m}),[l,m,d,p]);return a?i.createElement(S,null,s):i.createElement(n.Fragment,null,i.createElement(o.FixedSizeList,{ref:f,width:e,height:t,itemSize:r,itemData:g,overscanCount:u,itemCount:l.length},E),!$(l)&&i.createElement(S,null,c))});I.displayName="Menu";const M=r.div.withConfig({displayName:"MultiValueWrapper",componentId:"sc-qgkr0l"})`min-width:0;display:flex;animation:${({theme:e})=>t.css(["",""],e.multiValue.animation)};${({theme:{multiValue:e}})=>`\n margin: ${e.margin};\n border-radius: ${e.borderRadius};\n background-color: ${e.backgroundColor};\n ${e.css||""}\n `}`,k=r.div.withConfig({displayName:"Label",componentId:"sc-18i6dc"})`overflow:hidden;white-space:nowrap;text-overflow:ellipsis;${({theme:{multiValue:{label:e}}})=>`\n padding: ${e.padding};\n font-size: ${e.fontSize};\n border-radius: ${e.borderRadius};\n `}`,N=r.div.withConfig({displayName:"Clear",componentId:"sc-1j1biyk"})`display:flex;${({isFocused:e,theme:{color:n,multiValue:{clear:t}}})=>`\n padding: ${t.padding};\n font-size: ${t.fontSize};\n transition: ${t.transition};\n align-items: ${t.alignItems};\n font-weight: ${t.fontWeight};\n border-radius: ${t.borderRadius};\n background-color: ${e?n.dangerLight:"transparent"};\n :hover {\n color: ${n.danger};\n background-color: ${n.dangerLight};\n }\n `}`,z=({data:e,value:n,isFocused:t,isTouchDevice:o,renderOptionLabel:r,removeSelectedOption:a})=>i.createElement(M,null,i.createElement(k,null,r(e)),i.createElement(N,{isFocused:t,"data-testid":void 0,onMouseDown:e=>a(n,e),onTouchEnd:o?e=>a(n,e):void 0},"X")),D=r.div.withConfig({displayName:"SingleValue",componentId:"sc-1oju30n"})`top:50%;overflow:hidden;position:absolute;white-space:nowrap;box-sizing:border-box;text-overflow:ellipsis;transform:translateY(-50%);max-width:calc(100% - 0.5rem);`,T=r.div.withConfig({displayName:"Placeholder",componentId:"sc-1676tqj"})`top:50%;overflow:hidden;position:absolute;white-space:nowrap;box-sizing:border-box;text-overflow:ellipsis;transform:translateY(-50%);color:${({theme:e})=>e.color.placeholder};`,L=i.memo(({isMulti:e,inputValue:t,placeholder:o,isTouchDevice:r,selectedOption:a,focusedMultiValue:s,renderOptionLabel:l,renderMultiOptions:d,removeSelectedOption:c})=>{if(t&&(!e||e&&(!$(a)||d)))return null;if(!$(a))return i.createElement(T,null,o);if(!e){const e=l(a[0].data);return i.createElement(D,null,e)}return i.createElement(n.Fragment,null,d?d({selected:a,renderOptionLabel:l}):a.map(({data:e,value:n})=>i.createElement(z,{key:n,data:e,value:n,isTouchDevice:r,renderOptionLabel:l,isFocused:n===s,removeSelectedOption:c})))});L.displayName="Value";const R={type:"text",spellCheck:!1,autoCorrect:"off",autoComplete:"off",autoCapitalize:"none","aria-autocomplete":"list","data-testid":void 0},A=r.div.withConfig({displayName:"SizerDiv",componentId:"sc-1z0swd1"})`top:0;left:0;height:0;overflow:scroll;white-space:pre;position:absolute;visibility:hidden;font-size:inherit;font-weight:inherit;font-family:inherit;${({theme:e})=>e.input.css}`,F=r.input.withConfig({displayName:"Input",componentId:"sc-1kosmhe"})`border:0;outline:0;padding:0;cursor:text;background:0;color:inherit;font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:content-box;:read-only{opacity:0;cursor:default;}${({theme:e})=>e.input.css} ${"undefined"!=typeof navigator&&h.test(navigator.userAgent)&&"::-ms-clear{display:none;}"}`,B=i.memo(i.forwardRef(({id:e,onBlur:t,onFocus:o,readOnly:r,onChange:a,ariaLabel:s,inputValue:l,addClassNames:d,ariaLabelledBy:c},u)=>{const p=n.useRef(null),[m,f]=n.useState(2),g=Object.assign({},R,{"aria-label":s,"aria-labelledby":c,style:{width:m}});return n.useEffect(()=>{p.current&&f(p.current.scrollWidth+2)},[l]),i.createElement(n.Fragment,null,i.createElement(F,Object.assign({id:e,ref:u,onBlur:t,onFocus:o,value:l,readOnly:r},g,{onChange:r?void 0:a,className:d?"rfs-autosize-input":void 0})),i.createElement(A,{ref:p},l))}));B.displayName="AutosizeInput";const V=r.div.withConfig({displayName:"StyledLoadingDots",componentId:"sc-6y8z83"})`display:flex;align-self:center;text-align:center;margin-right:0.25rem;padding:${({theme:e})=>e.loader.padding};> div{border-radius:100%;display:inline-block;animation:${({theme:e})=>t.css(["",""],e.loader.animation)};${({theme:{loader:e}})=>`\n width: ${e.size};\n height: ${e.size};\n background-color: ${e.color};\n `}:nth-of-type(1){animation-delay:-0.272s;}:nth-of-type(2){animation-delay:-0.136s;}}`,P=({addClassNames:e})=>i.createElement(V,{"aria-hidden":"true",className:e?"rfs-loading-dots":void 0},i.createElement("div",null),i.createElement("div",null),i.createElement("div",null)),j=r.div.withConfig({displayName:"IndicatorIconsWrapper",componentId:"sc-j1n2s1"})`display:flex;flex-shrink:0;align-items:center;align-self:stretch;box-sizing:border-box;`,W=r.div.withConfig({displayName:"IndicatorIcon",componentId:"sc-95nhz3"})`height:100%;display:flex;align-items:center;box-sizing:border-box;${({theme:{icon:e}})=>`\n color: ${e.color};\n padding: ${e.padding};\n :hover {\n color: ${e.hoverColor};\n }\n `} ${({theme:e})=>e.icon.css}`,q=r.svg.withConfig({displayName:"ClearSvg",componentId:"sc-1a76zwu"})`fill:currentColor;animation:${({theme:e})=>t.css(["",""],e.icon.clear.animation)};${({theme:{icon:{clear:e}}})=>`\n width: ${e.width};\n height: ${e.height};\n transition: ${e.transition};\n `}`,Y=r.div.withConfig({displayName:"Caret",componentId:"sc-1wsfe6u"})`${({theme:{icon:{caret:e}}})=>`\n transition: ${e.transition};\n border-top: ${e.size} dashed;\n border-left: ${e.size} solid transparent;\n border-right: ${e.size} solid transparent;\n `} ${({menuOpen:e,isInvalid:n,theme:{color:t}})=>e&&`\n transform: rotate(180deg);\n color: ${n?t.danger:t.caretActive||t.primary};\n `}`,U=r.div.withConfig({displayName:"Separator",componentId:"sc-m89sf0"})`width:1px;margin:0.5rem 0;align-self:stretch;box-sizing:border-box;background-color:${({theme:e})=>e.color.iconSeparator||e.color.border};`,H=i.memo(({menuOpen:e,clearIcon:n,caretIcon:t,isInvalid:o,showClear:r,isLoading:a,isDisabled:s,loadingNode:l,isTouchDevice:d,addClassNames:c,onCaretMouseDown:u,onClearMouseDown:p})=>{const m="function"==typeof t||"function"==typeof n?{menuOpen:e,isLoading:!!a,isInvalid:!!o,isDisabled:!!s}:void 0,f=e=>"function"==typeof e?e(m):e;return i.createElement(j,null,r&&!a&&i.createElement(W,{onMouseDown:p,"data-testid":void 0,onTouchEnd:d?p:void 0},f(n)||i.createElement(q,{"aria-hidden":"true",viewBox:"0 0 14 16",className:c?"rfs-clear-icon":void 0},i.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"}))),a&&(l||i.createElement(P,{addClassNames:c})),i.createElement(U,null),i.createElement(W,{onMouseDown:u,"data-testid":void 0,onTouchEnd:d?u:void 0},f(t)||i.createElement(Y,{"aria-hidden":"true",menuOpen:e,isInvalid:o,className:c?"rfs-caret-icon":void 0})))});H.displayName="IndicatorIcons";const K=r.span.withConfig({displayName:"A11yText",componentId:"sc-1uzhrak"})`border:0;padding:0;width:1px;height:1px;margin:-1px;overflow:hidden;position:absolute;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);`,X=({menuOpen:e,isFocused:n,ariaLabel:t,inputValue:o,optionCount:r,isSearchable:a,focusedOption:s,selectedOption:l})=>{if(!n)return null;const{value:d,label:c,index:u,isDisabled:p}=s,m="Selected option: "+($(l)?l.map(({label:e})=>e).join(" "):"N/A"),f=`${r} result(s) available${o?" for search input "+o:""}.`,g=d?`Focused option: ${c}${p?" - disabled":""}, ${u+1} of ${r}.`:"",h=e?"Use Up and Down arrow keys to choose options, press Enter or Tab to select the currently focused option, press Escape to close the menu.":`${t||"Select"} is focused${a?", type to filter options":""}, press Down arrow key to open the menu.`;return i.createElement(K,{"aria-live":"polite","data-testid":void 0},i.createElement("p",null,m),i.createElement("p",null,`${g} ${f} ${h}`))};var _,G;(_=e.MenuPositionEnum||(e.MenuPositionEnum={})).TOP="top",_.AUTO="auto",_.BOTTOM="bottom",(G=e.FilterMatchEnum||(e.FilterMatchEnum={})).ANY="any",G.START="start";const J=0,Q=1,Z=0,ee=1,ne=2,te=3,oe=(t,o,i,r,a,s,l,d,c,p,m,f,g)=>{const[h,b]=n.useState(u),v=g?"":o,w="boolean"!=typeof f?!!m:f;return n.useEffect(()=>{const n=i===e.FilterMatchEnum.ANY,o=C(v,c,p),u=r.length?r.map(({value:e})=>e):void 0,m=l||(e=>!!e.isDisabled),f=d||(e=>"string"==typeof e.label?e.label:""+e.label),g=e=>{const t=a(e),i=Object.assign({data:e,value:t,label:s(e)},m(e)&&{isDisabled:!0},u&&u.includes(t)&&{isSelected:!0});if(!(o&&!(e=>{const t=C(f(e),c,p);return n?t.indexOf(o)>-1:t.substr(0,o.length)===o})(i)||w&&i.isSelected))return i},h=t.reduce((e,n)=>{const t=g(n);return t&&e.push(t),e},[]);b(h)},[t,r,v,w,i,c,p,d,l,a,s]),h},ie=(e,t)=>{const o=n.useRef(!0);n.useEffect(()=>{if(!o.current)return e();o.current=!1},t)},re=(t,o,i,r,a,s,l,d)=>{const c=n.useRef(!1),u=n.useRef(!1),[p,m]=n.useState(r),[f,g]=n.useState(i===e.MenuPositionEnum.TOP);return n.useEffect(()=>{u.current=f},[f]),n.useEffect(()=>{const n=i===e.MenuPositionEnum.TOP||i===e.MenuPositionEnum.AUTO&&!function(e){if(!e)return!0;const n=e.getBoundingClientRect(),t=w(e),o=v(t);return t.getBoundingClientRect().height-o-n.top>=n.height}(t.current);g(n)},[t,i]),ie(()=>{if(o){const e=e=>{l&&l(),e&&(c.current=!0,m(e))};u.current?e():function(e,n,t,o){if(!e)return void o();const i=window.innerHeight,r=e.getBoundingClientRect();if(i-r.top>=r.height)return void o();const a=w(e),s=v(a),l=a.getBoundingClientRect().height-s-r.top,d=l<r.height;if(d||!t){return void o(d?l:void 0)}const c=parseInt(getComputedStyle(e).marginBottom||"0",10);y(a,r.bottom-i+s+c,n,o)}(t.current,a,s,e)}else d&&d(),c.current&&(c.current=!1,m(r))},[t,o,d,l,r,s,a]),[p,f]},ae=r.div.withConfig({displayName:"SelectWrapper",componentId:"sc-16q6iuz"})`position:relative;box-sizing:border-box;${({theme:e})=>e.select.css}`,se=r.div.withConfig({displayName:"ValueWrapper",componentId:"sc-yuq4ck"})`flex:1 1 0%;display:flex;flex-wrap:wrap;overflow:hidden;position:relative;align-items:center;box-sizing:border-box;padding:${({theme:e})=>e.control.padding};`,le=r.div.withConfig({displayName:"ControlWrapper",componentId:"sc-b0802r"})`outline:0;display:flex;flex-wrap:wrap;cursor:default;position:relative;align-items:center;box-sizing:border-box;justify-content:space-between;${({isDisabled:e,isFocused:n,isInvalid:t,theme:{control:o,color:i}})=>`\n min-height: ${o.minHeight};\n transition: ${o.transition};\n border-style: ${o.borderStyle};\n border-width: ${o.borderWidth};\n border-radius: ${o.borderRadius};\n border-color: ${t?i.danger:n?o.focusedBorderColor:i.border};\n ${e?"pointer-events: none;":""}\n ${o.height?`height: ${o.height};`:""}\n ${o.backgroundColor||e?`background-color: ${e?i.disabled:o.backgroundColor};`:""}\n ${n?`box-shadow: ${o.boxShadow} ${t?i.dangerLight:o.boxShadowColor};`:""}\n ${o.css||""}\n `}`,de=r.div.withConfig({displayName:"MenuWrapper",componentId:"sc-1wen7ck"})`z-index:999;cursor:default;position:absolute;${({menuTop:e,hideMenu:n,theme:{menu:t}})=>`\n width: ${t.width};\n margin: ${t.margin};\n padding: ${t.padding};\n box-shadow: ${t.boxShadow};\n border-radius: ${t.borderRadius};\n background-color: ${t.backgroundColor};\n ${n?"display: none;":""}\n ${e?`top: ${e};`:""}\n `} animation:${({theme:e})=>t.css(["",""],e.menu.animation)};${({theme:e})=>e.menu.css} .${"rfs-option"}{display:block;overflow:hidden;user-select:none;white-space:nowrap;text-overflow:ellipsis;-webkit-tap-highlight-color:transparent;${({theme:{menu:{option:e}}})=>`\n padding: ${e.padding};\n text-align: ${e.textAlign};\n\n &.rfs-option-focused,\n &:hover:not(.rfs-option-disabled):not(.rfs-option-selected) {\n background-color: ${e.focusedBgColor};\n }\n\n &.rfs-option-selected {\n color: ${e.selectedColor};\n background-color: ${e.selectedBgColor};\n }\n\n &.rfs-option-disabled {\n opacity: 0.35;\n }\n `}}`,ce=i.forwardRef(({async:o,isMulti:r,inputId:a,selectId:s,autoFocus:l,isLoading:d,onKeyDown:f,clearIcon:g,caretIcon:h,isInvalid:b,ariaLabel:v,menuWidth:w,isDisabled:y,inputDelay:C,onMenuOpen:E,onMenuClose:S,onInputBlur:M,isClearable:k,themeConfig:N,loadingNode:z,initialValue:D,onInputFocus:T,onInputChange:R,addClassNames:A,ariaLabelledBy:F,onOptionChange:V,onSearchChange:P,getOptionLabel:j,getOptionValue:W,openMenuOnFocus:q,isAriaLiveEnabled:Y,menuOverscanCount:U,blurInputOnSelect:K,renderOptionLabel:_,renderMultiOptions:G,menuScrollDuration:ce,filterIgnoreAccents:ue,hideSelectedOptions:pe,getIsOptionDisabled:me,getFilterOptionString:fe,isSearchable:ge=!0,openMenuOnClick:he=!0,filterIgnoreCase:be=!0,tabSelectsOption:ve=!0,closeMenuOnSelect:we=!0,scrollMenuIntoView:ye=!0,backspaceClearsValue:$e=!0,filterMatchFrom:xe=e.FilterMatchEnum.ANY,menuPosition:Ce=e.MenuPositionEnum.BOTTOM,options:Oe=u,loadingMsg:Ee="Loading...",placeholder:Se="Select option...",noOptionsMsg:Ie="No options",menuItemSize:Me=35,menuMaxHeight:ke=300},Ne)=>{const ze=n.useRef(),De=n.useRef(!1),Te=n.useRef(null),Le=n.useRef(null),Re=n.useRef(null),Ae=n.useRef(null),Fe=(()=>{const e=n.useRef(null);return null===e.current?"undefined"==typeof navigator||"undefined"==typeof window?(e.current=!1,e.current):(e.current="ontouchstart"in window||!!navigator.maxTouchPoints,e.current):e.current})(),Be="boolean"==typeof K?K:Fe,[Ve,Pe]=n.useState(""),[je,We]=n.useState(!1),[qe,Ye]=n.useState(!1),[Ue,He]=n.useState(m),[Ke,Xe]=n.useState(null),_e=n.useMemo(()=>x(N)?function e(n,t){const o=Object.assign({},n);return Object.keys(t).forEach(i=>{o[i]=x(t[i])&&"animation"!==i?i in n?e(n[i],t[i]):t[i]:t[i]||""}),o}(c,N):c,[N]),Ge=n.useMemo(()=>j||(e=>e.label),[j]),Je=n.useMemo(()=>W||(e=>e.value),[W]),Qe=n.useMemo(()=>_||Ge,[_,Ge]),Ze=((e,t)=>{const[o,i]=n.useState(e);return n.useEffect(()=>{if(void 0===t)return;const n=setTimeout(()=>{i(e)},t);return()=>{clearTimeout(n)}},[e,t]),void 0===t?e:o})(Ve,C),[en,nn]=n.useState(()=>O(D,Je,Ge)),[tn,on]=re(Le,je,Ce,ke,ce,ye,E,S),rn=oe(Oe,Ze,xe,en,Je,Ge,me,fe,be,ue,r,pe,o),an=()=>{Re.current.blur()},sn=()=>{Re.current.focus()},ln=e=>{Te.current&&Te.current.scrollToItem(e)},dn=n.useCallback((e,n)=>{n&&(n.stopPropagation(),"mousedown"===n.type&&n.preventDefault()),nn(n=>n.filter(({value:n})=>n!==e))},[]),cn=n.useCallback(e=>{if(!$(rn))return void We(!0);const n=r?-1:rn.findIndex(({isSelected:e})=>e),t=n>-1?n:e===ne?0:rn.length-1;We(!0),He(Object.assign({index:t},rn[t])),ln(t)},[r,rn]),un=n.useCallback((e,n)=>{n?r&&dn(e.value):nn(n=>r?[...n,e]:[e]),Be?an():we&&(We(!1),Pe(""))},[r,we,dn,Be]);n.useImperativeHandle(Ne,()=>({blur:an,focus:sn,clearValue:()=>{nn(p),He(m)},setValue:e=>{const n=function(e,n,t){if(null==e)return p;const o=O(e).reduce((e,n)=>(x(n)&&e.push(t(n)),e),[]);if(!$(o))return p;const i=[];for(const e of n)!i.includes(e)&&o.includes(t(e))&&i.push(e);return i}(e,rn,Je);nn(n)},toggleMenu:e=>{!0===e||void 0===e&&!je?(!qe&&sn(),cn(ne)):an()}})),n.useEffect(()=>{l&&sn()},[l]),n.useEffect(()=>{qe&&q&&cn(ne)},[qe,q,cn]),n.useEffect(()=>{P&&De.current&&(De.current=!1,P(Ze))},[P,Ze]),ie(()=>{if(V){const e=r?en.map(({data:e})=>e):$(en)?en[0].data:null;V(e)}},[r,en,V]),ie(()=>{const e=rn.length,n=e>0&&(o||e!==Oe.length||0===ze.current);0===e?He(m):(1===e||n)&&(He(Object.assign({index:0},rn[0])),ln(0)),ze.current=e},[o,Oe,rn]);const pn=()=>{const{data:e,value:n,label:t,isSelected:o,isDisabled:i}=Ue;e&&!i&&un({data:e,value:n,label:t},o)},mn=e=>{if(!$(en))return;let n=-1;const t=en.length-1,o=Ke?en.findIndex(({value:e})=>e===Ke):-1;switch(e){case J:n=o>-1&&o<t?o+1:-1;break;case Q:n=0!==o?-1===o?t:o-1:0}const i=n>=0?en[n].value:null;Ue.data&&He(m),i!==Ke&&Xe(i)},fn=e=>{if(!$(rn))return;const n=e===ee?(Ue.index+1)%rn.length:Ue.index>0?Ue.index-1:rn.length-1;Ke&&Xe(null),He(Object.assign({index:n},rn[n])),ln(n)},gn=e=>{if(y)return;qe||sn();const n="INPUT"!==e.currentTarget.tagName;je?n&&(We(!1),Ve&&Pe("")):he&&cn(ne),n&&e.preventDefault()},hn=n.useCallback(e=>{M&&M(e),Ye(!1),We(!1),Pe("")},[M]),bn=n.useCallback(e=>{T&&T(e),Ye(!0)},[T]),vn=n.useCallback(e=>{De.current=!0,R&&R(e.currentTarget.value||""),We(!0),Pe(e.currentTarget.value||"")},[R]),wn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),nn(p),sn()},[]),yn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),sn(),je?We(!1):cn(ne)},[je,cn]),$n=Math.min(tn,rn.length*Me),xn=on?((e,n,t)=>{const o=e>0||!n?e:n.getBoundingClientRect().height,i=t?t.getBoundingClientRect().height:0,r=n&&getComputedStyle(n),a=r?parseInt(r.marginBottom||"0",10):0,s=r?parseInt(r.marginTop||"0",10):0;return`calc(${-Math.abs(o+i)}px + ${a+s}px)`})($n,Le.current,Ae.current):void 0;return i.createElement(t.ThemeProvider,{theme:_e},i.createElement(ae,{id:s,role:"combobox","aria-haspopup":"listbox","aria-controls":a,onKeyDown:e=>{if(!(y||f&&(f(e),e.defaultPrevented))){switch(e.key){case"ArrowDown":je?fn(ee):cn(ne);break;case"ArrowUp":je?fn(Z):cn(te);break;case"ArrowLeft":if(!r||Ve||G)return;mn(Q);break;case"ArrowRight":if(!r||Ve||G)return;mn(J);break;case" ":if(Ve)return;if(!je){cn(ne);break}if(!Ue.data)return;pn();break;case"Enter":je&&229!==e.keyCode&&pn();break;case"Escape":je&&(We(!1),Pe(""));break;case"Tab":if(!je||!ve||!Ue.data||e.shiftKey)return;pn();break;case"Delete":case"Backspace":if(Ve)return;if(Ke){const e=en.findIndex(({value:e})=>e===Ke),n=e>-1&&e<en.length-1?en[e+1].value:null;dn(Ke),Xe(n)}else{if(!$e)return;if($(en))if(r&&!G){const{value:e}=en[en.length-1];dn(e)}else k&&nn(p)}break;default:return}e.preventDefault()}},"data-testid":void 0,"aria-expanded":je?"true":"false",className:A?"rfs-select-container":void 0},i.createElement(le,{ref:Ae,isInvalid:b,isFocused:qe,isDisabled:y,onMouseDown:gn,"data-testid":void 0,className:A?"rfs-control-container":void 0,onTouchEnd:Fe?gn:void 0},i.createElement(se,null,i.createElement(L,{isMulti:r,inputValue:Ve,placeholder:Se,isTouchDevice:Fe,selectedOption:en,focusedMultiValue:Ke,renderOptionLabel:Qe,renderMultiOptions:G,removeSelectedOption:dn}),i.createElement(B,{id:a,ref:Re,ariaLabel:v,inputValue:Ve,onBlur:hn,onFocus:bn,addClassNames:A,onChange:vn,ariaLabelledBy:F,readOnly:y||!ge||!!Ke})),i.createElement(H,{menuOpen:je,clearIcon:g,caretIcon:h,isInvalid:b,isLoading:d,isDisabled:y,loadingNode:z,addClassNames:A,isTouchDevice:Fe,onClearMouseDown:wn,showClear:!(!k||y||!$(en)),onCaretMouseDown:y||he?void 0:yn})),i.createElement(de,{ref:Le,hideMenu:!je,menuTop:xn,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),sn()},"data-testid":void 0,className:A?"rfs-menu-container":void 0},i.createElement(I,{ref:Te,isLoading:d,height:$n,itemSize:Me,loadingMsg:Ee,menuOptions:rn,noOptionsMsg:Ie,selectOption:un,overscanCount:U,width:w||_e.menu.width,renderOptionLabel:Qe,focusedOptionIndex:Ue.index})),Y&&i.createElement(X,{menuOpen:je,isFocused:qe,ariaLabel:v,inputValue:Ve,isSearchable:ge,focusedOption:Ue,selectedOption:en,optionCount:rn.length})))});ce.displayName="Select",e.Select=ce,Object.defineProperty(e,"__esModule",{value:!0})}));

1590

dist/index.cjs.js

@@ -1,494 +0,2 @@

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var reactWindow = require('react-window');
const _bounce_keyframes = styled.keyframes`
0%, 80%, 100% {
transform: scale(0);
} 40% {
transform: scale(1.0);
}
`;
const _fade_in_keyframes = styled.keyframes`
from {
opacity: 0;
} to {
opacity: 1;
}
`;
const BOUNCE_ANIMATION_CSS = styled.css`${_bounce_keyframes} 1.19s ease-in-out infinite`;
const FADE_IN_ANIMATION_CSS = styled.css`${_fade_in_keyframes} 0.225s ease-in-out forwards`;
var DefaultThemeObj = Object.freeze({
color: {
border: '#ced4da',
danger: '#dc3545',
primary: '#007bff',
disabled: '#e9ecef',
placeholder: '#6E7276',
dangerLight: 'rgba(220, 53, 69, 0.25)'
},
input: {},
select: {},
loader: {
size: '0.625rem',
padding: '0.375rem 0.75rem',
animation: BOUNCE_ANIMATION_CSS,
color: 'rgba(0, 123, 255, 0.42)'
},
icon: {
color: '#cccccc',
hoverColor: '#A6A6A6',
padding: '0 0.9375rem',
clear: {
width: '14px',
height: '16px',
animation: FADE_IN_ANIMATION_CSS,
transition: 'color 0.15s ease-in-out'
},
caret: {
size: '7px',
transition: 'transform 0.25s ease-in-out, color 0.15s ease-in-out'
}
},
control: {
minHeight: '38px',
borderWidth: '1px',
borderStyle: 'solid',
borderRadius: '0.25rem',
boxShadow: '0 0 0 0.2rem',
padding: '0.375rem 0.75rem',
boxShadowColor: 'rgba(0, 123, 255, 0.25)',
focusedBorderColor: 'rgba(0, 123, 255, 0.75)',
transition: 'box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out'
},
menu: {
width: '100%',
margin: '0.5rem 0',
padding: '0.15rem 0',
borderRadius: '0.25rem',
backgroundColor: '#fff',
animation: FADE_IN_ANIMATION_CSS,
boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 11px rgba(0, 0, 0, 0.1)',
option: {
textAlign: 'left',
selectedColor: '#fff',
selectedBgColor: '#007bff',
padding: '0.375rem 0.75rem',
focusedBgColor: 'rgba(0, 123, 255, 0.20)'
}
},
noOptions: {
fontSize: '1.25rem',
margin: '0.25rem 0',
color: 'hsl(0, 0%, 60%)',
padding: '0.375rem 0.75rem'
},
multiValue: {
margin: '1px 2px',
borderRadius: '0.25rem',
backgroundColor: '#e7edf3',
animation: FADE_IN_ANIMATION_CSS,
label: {
fontSize: '0.825em',
borderRadius: '0.25rem',
padding: '1px 2px 1px 6px'
},
clear: {
fontWeight: 700,
padding: '0 7px',
fontSize: '0.67em',
alignItems: 'center',
borderRadius: '0.25rem',
transition: 'color 0.15s ease-in-out, background-color 0.15s ease-in-out'
}
}
});
const MENU_ITEM_SIZE_DEFAULT = 35;
const MENU_MAX_HEIGHT_DEFAULT = 300;
const FOCUSED_MULTI_DEFAULT = null;
const ON_CHANGE_SINGLE_VALUE_DEFAULT = null;
const LOADING_MSG_DEFAULT = 'Loading...';
const NO_OPTIONS_MSG_DEFAULT = 'No options';
const PLACEHOLDER_DEFAULT = 'Select option...';
const OPTIONS_DEFAULT = [];
const SELECTED_OPTION_DEFAULT = [];
const FOCUSED_OPTION_DEFAULT = {
index: -1
};
const OVERFLOW_REGEXP = /(auto|scroll)/;
const DIACRITICS_REGEXP = /[\u0300-\u036f]/g;
const IE_EDGE_BROWSER_REGEXP = /(MSIE|Trident\/|Edge\/|Edg\/)/i;
const _isTest = process.env.NODE_ENV === 'test';
const IME_KEY_CODE = 229;
const MOUSE_DOWN_EVENT_TYPE = 'mousedown';
const OPTION_CLS = 'rfs-option';
const OPTION_FOCUSED_CLS = `${OPTION_CLS}-focused`;
const OPTION_SELECTED_CLS = `${OPTION_CLS}-selected`;
const OPTION_DISABLED_CLS = `${OPTION_CLS}-disabled`;
const CARET_ICON_CLS = 'rfs-caret-icon';
const CLEAR_ICON_CLS = 'rfs-clear-icon';
const LOADING_DOTS_CLS = 'rfs-loading-dots';
const AUTOSIZE_INPUT_CLS = 'rfs-autosize-input';
const MENU_CONTAINER_CLS = 'rfs-menu-container';
const SELECT_CONTAINER_CLS = 'rfs-select-container';
const CONTROL_CONTAINER_CLS = 'rfs-control-container';
const ARIA_LIVE_TESTID = _isTest ? 'rfs-aria-live' : undefined;
const CLEAR_ICON_TESTID = _isTest ? CLEAR_ICON_CLS : undefined;
const CARET_ICON_TESTID = _isTest ? CARET_ICON_CLS : undefined;
const AUTOSIZE_INPUT_TESTID = _isTest ? AUTOSIZE_INPUT_CLS : undefined;
const MENU_CONTAINER_TESTID = _isTest ? MENU_CONTAINER_CLS : undefined;
const CLEAR_ICON_MV_TESTID = _isTest ? `${CLEAR_ICON_CLS}-mv` : undefined;
const SELECT_CONTAINER_TESTID = _isTest ? SELECT_CONTAINER_CLS : undefined;
const CONTROL_CONTAINER_TESTID = _isTest ? CONTROL_CONTAINER_CLS : undefined;
function stripDiacritics(value) {
return value.normalize('NFD').replace(DIACRITICS_REGEXP, '');
}
function isDocumentElement(el) {
return el === document.documentElement || el === document.body || el === window;
}
function easeOutCubic(t, s, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + s;
}
function getScrollTop(el) {
return isDocumentElement(el) ? window.pageYOffset : el.scrollTop;
}
function scrollTo(el, top) {
isDocumentElement(el) ? window.scrollTo(0, top) : el.scrollTop = top;
}
function getScrollParent(el) {
let style = getComputedStyle(el);
const excludeStaticParent = style.position === 'absolute';
if (style.position === 'fixed') {
return document.documentElement;
}
for (let parent = el; parent = parent ? parent.parentElement : null;) {
style = getComputedStyle(parent);
if (excludeStaticParent && style.position === 'static') {
continue;
} else if (OVERFLOW_REGEXP.test(`${style.overflow}${style.overflowY}${style.overflowX}`)) {
return parent;
}
}
return document.documentElement;
}
function smoothScrollTo(element, to, duration = 300, callback) {
let currentTime = 0;
const start = getScrollTop(element);
const change = to - start;
function smoothScroller() {
currentTime += 5;
const top = easeOutCubic(currentTime, start, change, duration);
scrollTo(element, top);
if (currentTime < duration) {
window.requestAnimationFrame(smoothScroller);
} else {
callback && callback();
}
}
window.requestAnimationFrame(smoothScroller);
}
const isEdgeOrIE = () => typeof navigator !== 'undefined' && IE_EDGE_BROWSER_REGEXP.test(navigator.userAgent);
function isArrayWithLength(test) {
return Array.isArray(test) && !!test.length;
}
function isPlainObject(test) {
return test && typeof test === 'object' && !Array.isArray(test);
}
function optionClassName(isDisabled, isSelected, isFocused) {
let className = OPTION_CLS;
if (isDisabled) className += ' ' + OPTION_DISABLED_CLS;
if (isSelected) className += ' ' + OPTION_SELECTED_CLS;
if (isFocused) className += ' ' + OPTION_FOCUSED_CLS;
return className;
}
function trimAndFormatFilterStr(value, filterIgnoreCase, filterIgnoreAccents) {
let trimVal = value.trim();
if (filterIgnoreCase) {
trimVal = trimVal.toLowerCase();
}
return !filterIgnoreAccents ? trimVal : stripDiacritics(trimVal);
}
function mergeDeep(target, source) {
const output = Object.assign({}, target);
Object.keys(source).forEach(key => {
output[key] = isPlainObject(source[key]) && key !== 'animation' ? key in target ? mergeDeep(target[key], source[key]) : source[key] : source[key] || '';
});
return output;
}
const calculateMenuTop = (menuHeight, menuEl, controlEl) => {
const menuHeightOrDefault = menuHeight > 0 || !menuEl ? menuHeight : menuEl.getBoundingClientRect().height;
const controlHeight = controlEl ? controlEl.getBoundingClientRect().height : 0;
const menuElStyle = menuEl && getComputedStyle(menuEl);
const marginBottom = menuElStyle ? parseInt(menuElStyle.marginBottom || '0', 10) : 0;
const marginTop = menuElStyle ? parseInt(menuElStyle.marginTop || '0', 10) : 0;
return `calc(${-Math.abs(menuHeightOrDefault + controlHeight)}px + ${marginBottom + marginTop}px)`;
};
function menuFitsBelowControl(menuEl) {
if (!menuEl) return true;
const menuRect = menuEl.getBoundingClientRect();
const scrollParent = getScrollParent(menuEl);
const scrollTop = getScrollTop(scrollParent);
const scrollSpaceBelow = scrollParent.getBoundingClientRect().height - scrollTop - menuRect.top;
return scrollSpaceBelow >= menuRect.height;
}
function scrollMenuIntoViewOnOpen(menuEl, menuScrollDuration, scrollMenuIntoView, handleOnMenuOpen) {
if (!menuEl) {
handleOnMenuOpen();
return;
}
const viewInner = window.innerHeight;
const menuRect = menuEl.getBoundingClientRect();
const viewSpaceBelow = viewInner - menuRect.top;
if (viewSpaceBelow >= menuRect.height) {
handleOnMenuOpen();
return;
}
const scrollParent = getScrollParent(menuEl);
const scrollTop = getScrollTop(scrollParent);
const scrollSpaceBelow = scrollParent.getBoundingClientRect().height - scrollTop - menuRect.top;
const notEnoughSpaceBelow = scrollSpaceBelow < menuRect.height;
if (notEnoughSpaceBelow || !scrollMenuIntoView) {
const condensedMenuHeight = notEnoughSpaceBelow ? scrollSpaceBelow : undefined;
handleOnMenuOpen(condensedMenuHeight);
return;
}
const marginBottom = parseInt(getComputedStyle(menuEl).marginBottom || '0', 10);
const scrollDown = menuRect.bottom - viewInner + scrollTop + marginBottom;
smoothScrollTo(scrollParent, scrollDown, menuScrollDuration, handleOnMenuOpen);
}
function validateSetValueParam(values, menuOptions, getOptionValue) {
if (values === null || values === undefined) {
return SELECTED_OPTION_DEFAULT;
}
const normalizedVal = normalizeValue(values);
const validValues = normalizedVal.reduce((acc, x) => {
isPlainObject(x) && acc.push(getOptionValue(x));
return acc;
}, []);
if (!isArrayWithLength(validValues)) {
return SELECTED_OPTION_DEFAULT;
}
const results = [];
const validValuesUniq = [...new Set(validValues)];
for (const option of menuOptions) {
if (validValuesUniq.includes(getOptionValue(option))) {
results.push(option);
if (validValuesUniq.length === results.length) {
break;
}
}
}
return results;
}
function normalizeValue(value, getOptionValue, getOptionLabel) {
const initialValues = Array.isArray(value) ? value.filter(Boolean) : isPlainObject(value) ? [value] : SELECTED_OPTION_DEFAULT;
if (!getOptionValue || !getOptionLabel || !isArrayWithLength(initialValues)) {
return initialValues;
}
return initialValues.map(initVal => ({
data: initVal,
value: getOptionValue(initVal),
label: getOptionLabel(initVal)
}));
}
const Option = /*#__PURE__*/React__default.memo(({
index,
style,
data: {
menuOptions,
selectOption,
renderOptionLabel,
focusedOptionIndex
}
}) => {
const {
data,
value,
label,
isDisabled,
isSelected
} = menuOptions[index];
const className = optionClassName(isDisabled, isSelected, index === focusedOptionIndex);
const onClickHandler = !isDisabled ? () => selectOption({
data,
value,
label
}, isSelected) : undefined;
return /*#__PURE__*/React__default.createElement("div", {
style: style,
className: className,
onClick: onClickHandler
}, renderOptionLabel(data));
}, reactWindow.areEqual);
Option.displayName = 'Option';
const NoOptionsMsg = styled__default.div`
text-align: center;
${({
theme: {
noOptions
}
}) => `
color: ${noOptions.color};
margin: ${noOptions.margin};
padding: ${noOptions.padding};
font-size: ${noOptions.fontSize};
${noOptions.css || ''}
`}
`;
const Menu = /*#__PURE__*/React__default.forwardRef(({
width,
height,
itemSize,
isLoading,
loadingMsg,
menuOptions,
selectOption,
noOptionsMsg,
overscanCount,
renderOptionLabel,
focusedOptionIndex
}, ref) => {
const itemData = React.useMemo(() => ({
menuOptions,
selectOption,
renderOptionLabel,
focusedOptionIndex
}), [menuOptions, focusedOptionIndex, selectOption, renderOptionLabel]);
if (isLoading) {
return /*#__PURE__*/React__default.createElement(NoOptionsMsg, null, loadingMsg);
}
return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(reactWindow.FixedSizeList, {
ref: ref,
width: width,
height: height,
itemSize: itemSize,
itemData: itemData,
overscanCount: overscanCount,
itemCount: menuOptions.length
}, Option), !isArrayWithLength(menuOptions) && /*#__PURE__*/React__default.createElement(NoOptionsMsg, null, noOptionsMsg));
});
Menu.displayName = 'Menu';
const MultiValueWrapper = styled__default.div`
min-width: 0;
display: flex;
animation: ${({
theme
}) => styled.css`${theme.multiValue.animation}`};
${({
theme: {
multiValue
}
}) => `
margin: ${multiValue.margin};
border-radius: ${multiValue.borderRadius};
background-color: ${multiValue.backgroundColor};
${multiValue.css || ''}
`}
`;
const Label = styled__default.div`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
${({
theme: {
multiValue: {
label
}
}
}) => `
padding: ${label.padding};
font-size: ${label.fontSize};
border-radius: ${label.borderRadius};
`}
`;
const Clear = styled__default.div`
display: flex;
${({
isFocused,
theme: {
color,
multiValue: {
clear
}
}
}) => `
padding: ${clear.padding};
font-size: ${clear.fontSize};
transition: ${clear.transition};
align-items: ${clear.alignItems};
font-weight: ${clear.fontWeight};
border-radius: ${clear.borderRadius};
background-color: ${isFocused ? color.dangerLight : 'transparent'};
:hover {
color: ${color.danger};
background-color: ${color.dangerLight};
}
`}
`;
const MultiValue = ({
data,
value,
isFocused,
isTouchDevice,
renderOptionLabel,
removeSelectedOption
}) => /*#__PURE__*/React__default.createElement(MultiValueWrapper, null, /*#__PURE__*/React__default.createElement(Label, null, renderOptionLabel(data)), /*#__PURE__*/React__default.createElement(Clear, {
isFocused: isFocused,
"data-testid": CLEAR_ICON_MV_TESTID,
onMouseDown: e => removeSelectedOption(value, e),
onTouchEnd: isTouchDevice ? e => removeSelectedOption(value, e) : undefined
}, "X"));
const SingleValue = styled__default.div`
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),o=require("styled-components"),i=e(o),r=require("react-window");const a=o.keyframes(["0%,80%,100%{transform:scale(0);}40%{transform:scale(1.0);}"]),s=o.keyframes(["from{opacity:0;}to{opacity:1;}"]),l=o.css([""," 1.19s ease-in-out infinite"],a),d=o.css([""," 0.225s ease-in-out forwards"],s);var c=Object.freeze({color:{border:"#ced4da",danger:"#dc3545",primary:"#007bff",disabled:"#e9ecef",placeholder:"#6E7276",dangerLight:"rgba(220, 53, 69, 0.25)"},input:{},select:{},loader:{size:"0.625rem",padding:"0.375rem 0.75rem",animation:l,color:"rgba(0, 123, 255, 0.42)"},icon:{color:"#cccccc",hoverColor:"#A6A6A6",padding:"0 0.9375rem",clear:{width:"14px",height:"16px",animation:d,transition:"color 0.15s ease-in-out"},caret:{size:"7px",transition:"transform 0.25s ease-in-out, color 0.15s ease-in-out"}},control:{minHeight:"38px",borderWidth:"1px",borderStyle:"solid",borderRadius:"0.25rem",boxShadow:"0 0 0 0.2rem",padding:"0.375rem 0.75rem",boxShadowColor:"rgba(0, 123, 255, 0.25)",focusedBorderColor:"rgba(0, 123, 255, 0.75)",transition:"box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out"},menu:{width:"100%",margin:"0.5rem 0",padding:"0.15rem 0",borderRadius:"0.25rem",backgroundColor:"#fff",animation:d,boxShadow:"0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 11px rgba(0, 0, 0, 0.1)",option:{textAlign:"left",selectedColor:"#fff",selectedBgColor:"#007bff",padding:"0.375rem 0.75rem",focusedBgColor:"rgba(0, 123, 255, 0.20)"}},noOptions:{fontSize:"1.25rem",margin:"0.25rem 0",color:"hsl(0, 0%, 60%)",padding:"0.375rem 0.75rem"},multiValue:{margin:"1px 2px",borderRadius:"0.25rem",backgroundColor:"#e7edf3",animation:d,label:{fontSize:"0.825em",borderRadius:"0.25rem",padding:"1px 2px 1px 6px"},clear:{fontWeight:700,padding:"0 7px",fontSize:"0.67em",alignItems:"center",borderRadius:"0.25rem",transition:"color 0.15s ease-in-out, background-color 0.15s ease-in-out"}}});const u=[],p=[],m={index:-1},f=/(auto|scroll)/,g=/[\u0300-\u036f]/g,h=/(MSIE|Trident\/|Edge\/|Edg\/)/i,b="test"===process.env.NODE_ENV,v=b?"rfs-aria-live":void 0,w=b?"rfs-clear-icon":void 0,x=b?"rfs-caret-icon":void 0,y=b?"rfs-autosize-input":void 0,$=b?"rfs-menu-container":void 0,C=b?"rfs-clear-icon-mv":void 0,O=b?"rfs-select-container":void 0,E=b?"rfs-control-container":void 0;function S(e){return e===document.documentElement||e===document.body||e===window}function I(e){return S(e)?window.pageYOffset:e.scrollTop}function M(e){let n=getComputedStyle(e);const t="absolute"===n.position;if("fixed"===n.position)return document.documentElement;for(let o=e;o=o?o.parentElement:null;)if(n=getComputedStyle(o),(!t||"static"!==n.position)&&f.test(`${n.overflow}${n.overflowY}${n.overflowX}`))return o;return document.documentElement}function k(e,n,t=300,o){let i=0;const r=I(e),a=n-r;window.requestAnimationFrame((function n(){i+=5;const s=a*((l=(l=i)/t-1)*l*l+1)+r;var l;!function(e,n){S(e)?window.scrollTo(0,n):e.scrollTop=n}(e,s),i<t?window.requestAnimationFrame(n):o&&o()}))}function N(e){return Array.isArray(e)&&!!e.length}function z(e){return e&&"object"==typeof e&&!Array.isArray(e)}function D(e,n,t){let o=e.trim();return n&&(o=o.toLowerCase()),t?function(e){return e.normalize("NFD").replace(g,"")}(o):o}function L(e,n,t){const o=Array.isArray(e)?e.filter(Boolean):z(e)?[e]:p;return n&&t&&N(o)?o.map(e=>({data:e,value:n(e),label:t(e)})):o}const T=t.memo(({index:e,style:n,data:{menuOptions:o,selectOption:i,renderOptionLabel:r,focusedOptionIndex:a}})=>{const{data:s,value:l,label:d,isDisabled:c,isSelected:u}=o[e],p=function(e,n,t){let o="rfs-option";return e&&(o+=" rfs-option-disabled"),n&&(o+=" rfs-option-selected"),t&&(o+=" rfs-option-focused"),o}(c,u,e===a),m=c?void 0:()=>i({data:s,value:l,label:d},u);return t.createElement("div",{style:n,className:p,onClick:m},r(s))},r.areEqual);T.displayName="Option";const R=i.div.withConfig({displayName:"NoOptionsMsg",componentId:"sc-mcprzj"})`text-align:center;${({theme:{noOptions:e}})=>`\n color: ${e.color};\n margin: ${e.margin};\n padding: ${e.padding};\n font-size: ${e.fontSize};\n ${e.css||""}\n `}`,A=t.forwardRef(({width:e,height:o,itemSize:i,isLoading:a,loadingMsg:s,menuOptions:l,selectOption:d,noOptionsMsg:c,overscanCount:u,renderOptionLabel:p,focusedOptionIndex:m},f)=>{const g=n.useMemo(()=>({menuOptions:l,selectOption:d,renderOptionLabel:p,focusedOptionIndex:m}),[l,m,d,p]);return a?t.createElement(R,null,s):t.createElement(n.Fragment,null,t.createElement(r.FixedSizeList,{ref:f,width:e,height:o,itemSize:i,itemData:g,overscanCount:u,itemCount:l.length},T),!N(l)&&t.createElement(R,null,c))});A.displayName="Menu";const F=i.div.withConfig({displayName:"MultiValueWrapper",componentId:"sc-qgkr0l"})`min-width:0;display:flex;animation:${({theme:e})=>o.css(["",""],e.multiValue.animation)};${({theme:{multiValue:e}})=>`\n margin: ${e.margin};\n border-radius: ${e.borderRadius};\n background-color: ${e.backgroundColor};\n ${e.css||""}\n `}`,B=i.div.withConfig({displayName:"Label",componentId:"sc-18i6dc"})`overflow:hidden;white-space:nowrap;text-overflow:ellipsis;${({theme:{multiValue:{label:e}}})=>`\n padding: ${e.padding};\n font-size: ${e.fontSize};\n border-radius: ${e.borderRadius};\n `}`,V=i.div.withConfig({displayName:"Clear",componentId:"sc-1j1biyk"})`display:flex;${({isFocused:e,theme:{color:n,multiValue:{clear:t}}})=>`\n padding: ${t.padding};\n font-size: ${t.fontSize};\n transition: ${t.transition};\n align-items: ${t.alignItems};\n font-weight: ${t.fontWeight};\n border-radius: ${t.borderRadius};\n background-color: ${e?n.dangerLight:"transparent"};\n :hover {\n color: ${n.danger};\n background-color: ${n.dangerLight};\n }\n `}`,P=({data:e,value:n,isFocused:o,isTouchDevice:i,renderOptionLabel:r,removeSelectedOption:a})=>t.createElement(F,null,t.createElement(B,null,r(e)),t.createElement(V,{isFocused:o,"data-testid":C,onMouseDown:e=>a(n,e),onTouchEnd:i?e=>a(n,e):void 0},"X")),j=i.div`
top: 50%;

@@ -502,4 +10,3 @@ overflow: hidden;

max-width: calc(100% - 0.5rem);
`;
const Placeholder = styled__default.div`
`,W=i.div`
top: 50%;

@@ -512,311 +19,7 @@ overflow: hidden;

transform: translateY(-50%);
color: ${({
theme
}) => theme.color.placeholder};
`;
const Value = /*#__PURE__*/React__default.memo(({
isMulti,
inputValue,
placeholder,
isTouchDevice,
selectedOption,
focusedMultiValue,
renderOptionLabel,
renderMultiOptions,
removeSelectedOption
}) => {
if (inputValue && (!isMulti || isMulti && (!isArrayWithLength(selectedOption) || renderMultiOptions))) {
return null;
}
if (!isArrayWithLength(selectedOption)) {
return /*#__PURE__*/React__default.createElement(Placeholder, null, placeholder);
}
if (!isMulti) {
const optionLabel = renderOptionLabel(selectedOption[0].data);
return /*#__PURE__*/React__default.createElement(SingleValue, null, optionLabel);
}
return /*#__PURE__*/React__default.createElement(React.Fragment, null, renderMultiOptions ? renderMultiOptions({
selected: selectedOption,
renderOptionLabel
}) : selectedOption.map(({
data,
value
}) => /*#__PURE__*/React__default.createElement(MultiValue, {
key: value,
data: data,
value: value,
isTouchDevice: isTouchDevice,
renderOptionLabel: renderOptionLabel,
isFocused: value === focusedMultiValue,
removeSelectedOption: removeSelectedOption
})));
});
Value.displayName = 'Value';
const INPUT_MIN_WIDTH_PX = 2;
const STATIC_ATTRIBUTES = {
type: 'text',
spellCheck: false,
autoCorrect: 'off',
autoComplete: 'off',
autoCapitalize: 'none',
'aria-autocomplete': 'list',
'data-testid': AUTOSIZE_INPUT_TESTID
};
const SizerDiv = styled__default.div`
top: 0;
left: 0;
height: 0;
overflow: scroll;
white-space: pre;
position: absolute;
visibility: hidden;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
${({
theme
}) => theme.input.css}
`;
const Input = styled__default.input`
color: ${({theme:e})=>e.color.placeholder};
`,q=t.memo(({isMulti:e,inputValue:o,placeholder:i,isTouchDevice:r,selectedOption:a,focusedMultiValue:s,renderOptionLabel:l,renderMultiOptions:d,removeSelectedOption:c})=>{if(o&&(!e||e&&(!N(a)||d)))return null;if(!N(a))return t.createElement(W,null,i);if(!e){const e=l(a[0].data);return t.createElement(j,null,e)}return t.createElement(n.Fragment,null,d?d({selected:a,renderOptionLabel:l}):a.map(({data:e,value:n})=>t.createElement(P,{key:n,data:e,value:n,isTouchDevice:r,renderOptionLabel:l,isFocused:n===s,removeSelectedOption:c})))});q.displayName="Value";const Y={type:"text",spellCheck:!1,autoCorrect:"off",autoComplete:"off",autoCapitalize:"none","aria-autocomplete":"list","data-testid":y},U=i.div.withConfig({displayName:"SizerDiv",componentId:"sc-1z0swd1"})`top:0;left:0;height:0;overflow:scroll;white-space:pre;position:absolute;visibility:hidden;font-size:inherit;font-weight:inherit;font-family:inherit;${({theme:e})=>e.input.css}`,H=i.input.withConfig({displayName:"Input",componentId:"sc-1kosmhe"})`border:0;outline:0;padding:0;cursor:text;background:0;color:inherit;font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:content-box;:read-only{opacity:0;cursor:default;}${({theme:e})=>e.input.css} ${"undefined"!=typeof navigator&&h.test(navigator.userAgent)&&"::-ms-clear{display:none;}"}`,K=t.memo(t.forwardRef(({id:e,onBlur:o,onFocus:i,readOnly:r,onChange:a,ariaLabel:s,inputValue:l,addClassNames:d,ariaLabelledBy:c},u)=>{const p=n.useRef(null),[m,f]=n.useState(2),g=Object.assign({},Y,{"aria-label":s,"aria-labelledby":c,style:{width:m}});return n.useEffect(()=>{p.current&&f(p.current.scrollWidth+2)},[l]),t.createElement(n.Fragment,null,t.createElement(H,Object.assign({id:e,ref:u,onBlur:o,onFocus:i,value:l,readOnly:r},g,{onChange:r?void 0:a,className:d?"rfs-autosize-input":void 0})),t.createElement(U,{ref:p},l))}));K.displayName="AutosizeInput";const _=i.div.withConfig({displayName:"StyledLoadingDots",componentId:"sc-6y8z83"})`display:flex;align-self:center;text-align:center;margin-right:0.25rem;padding:${({theme:e})=>e.loader.padding};> div{border-radius:100%;display:inline-block;animation:${({theme:e})=>o.css(["",""],e.loader.animation)};${({theme:{loader:e}})=>`\n width: ${e.size};\n height: ${e.size};\n background-color: ${e.color};\n `}:nth-of-type(1){animation-delay:-0.272s;}:nth-of-type(2){animation-delay:-0.136s;}}`,X=({addClassNames:e})=>t.createElement(_,{"aria-hidden":"true",className:e?"rfs-loading-dots":void 0},t.createElement("div",null),t.createElement("div",null),t.createElement("div",null)),G=i.div.withConfig({displayName:"IndicatorIconsWrapper",componentId:"sc-j1n2s1"})`display:flex;flex-shrink:0;align-items:center;align-self:stretch;box-sizing:border-box;`,J=i.div.withConfig({displayName:"IndicatorIcon",componentId:"sc-95nhz3"})`height:100%;display:flex;align-items:center;box-sizing:border-box;${({theme:{icon:e}})=>`\n color: ${e.color};\n padding: ${e.padding};\n :hover {\n color: ${e.hoverColor};\n }\n `} ${({theme:e})=>e.icon.css}`,Q=i.svg.withConfig({displayName:"ClearSvg",componentId:"sc-1a76zwu"})`fill:currentColor;animation:${({theme:e})=>o.css(["",""],e.icon.clear.animation)};${({theme:{icon:{clear:e}}})=>`\n width: ${e.width};\n height: ${e.height};\n transition: ${e.transition};\n `}`,Z=i.div.withConfig({displayName:"Caret",componentId:"sc-1wsfe6u"})`${({theme:{icon:{caret:e}}})=>`\n transition: ${e.transition};\n border-top: ${e.size} dashed;\n border-left: ${e.size} solid transparent;\n border-right: ${e.size} solid transparent;\n `} ${({menuOpen:e,isInvalid:n,theme:{color:t}})=>e&&`\n transform: rotate(180deg);\n color: ${n?t.danger:t.caretActive||t.primary};\n `}`,ee=i.div.withConfig({displayName:"Separator",componentId:"sc-m89sf0"})`width:1px;margin:0.5rem 0;align-self:stretch;box-sizing:border-box;background-color:${({theme:e})=>e.color.iconSeparator||e.color.border};`,ne=t.memo(({menuOpen:e,clearIcon:n,caretIcon:o,isInvalid:i,showClear:r,isLoading:a,isDisabled:s,loadingNode:l,isTouchDevice:d,addClassNames:c,onCaretMouseDown:u,onClearMouseDown:p})=>{const m="function"==typeof o||"function"==typeof n?{menuOpen:e,isLoading:!!a,isInvalid:!!i,isDisabled:!!s}:void 0,f=e=>"function"==typeof e?e(m):e;return t.createElement(G,null,r&&!a&&t.createElement(J,{onMouseDown:p,"data-testid":w,onTouchEnd:d?p:void 0},f(n)||t.createElement(Q,{"aria-hidden":"true",viewBox:"0 0 14 16",className:c?"rfs-clear-icon":void 0},t.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"}))),a&&(l||t.createElement(X,{addClassNames:c})),t.createElement(ee,null),t.createElement(J,{onMouseDown:u,"data-testid":x,onTouchEnd:d?u:void 0},f(o)||t.createElement(Z,{"aria-hidden":"true",menuOpen:e,isInvalid:i,className:c?"rfs-caret-icon":void 0})))});ne.displayName="IndicatorIcons";const te=i.span`
border: 0;
outline: 0;
padding: 0;
cursor: text;
background: 0;
color: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
box-sizing: content-box;
:read-only {
opacity: 0;
cursor: default;
}
${({
theme
}) => theme.input.css}
${isEdgeOrIE() && '::-ms-clear { display: none; }'}
`;
const AutosizeInput = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef(({
id,
onBlur,
onFocus,
readOnly,
onChange,
ariaLabel,
inputValue,
addClassNames,
ariaLabelledBy
}, ref) => {
const sizerRef = React.useRef(null);
const [inputWidth, setInputWidth] = React.useState(INPUT_MIN_WIDTH_PX);
const autosizeInputAttrs = Object.assign({}, STATIC_ATTRIBUTES, {
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
'style': {
width: inputWidth
}
});
React.useEffect(() => {
if (sizerRef.current) {
setInputWidth(sizerRef.current.scrollWidth + INPUT_MIN_WIDTH_PX);
}
}, [inputValue]);
return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Input, Object.assign({
id: id,
ref: ref,
onBlur: onBlur,
onFocus: onFocus,
value: inputValue,
readOnly: readOnly
}, autosizeInputAttrs, {
onChange: !readOnly ? onChange : undefined,
className: addClassNames ? AUTOSIZE_INPUT_CLS : undefined
})), /*#__PURE__*/React__default.createElement(SizerDiv, {
ref: sizerRef
}, inputValue));
}));
AutosizeInput.displayName = 'AutosizeInput';
const StyledLoadingDots = styled__default.div`
display: flex;
align-self: center;
text-align: center;
margin-right: 0.25rem;
padding: ${({
theme
}) => theme.loader.padding};
> div {
border-radius: 100%;
display: inline-block;
animation: ${({
theme
}) => styled.css`${theme.loader.animation}`};
${({
theme: {
loader
}
}) => `
width: ${loader.size};
height: ${loader.size};
background-color: ${loader.color};
`}
:nth-of-type(1) {
animation-delay: -0.272s;
}
:nth-of-type(2) {
animation-delay: -0.136s;
}
}
`;
const LoadingDots = ({
addClassNames
}) => /*#__PURE__*/React__default.createElement(StyledLoadingDots, {
"aria-hidden": 'true',
className: addClassNames ? LOADING_DOTS_CLS : undefined
}, /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement("div", null));
const IndicatorIconsWrapper = styled__default.div`
display: flex;
flex-shrink: 0;
align-items: center;
align-self: stretch;
box-sizing: border-box;
`;
const IndicatorIcon = styled__default.div`
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
${({
theme: {
icon
}
}) => `
color: ${icon.color};
padding: ${icon.padding};
:hover {
color: ${icon.hoverColor};
}
`}
${({
theme
}) => theme.icon.css}
`;
const ClearSVG = styled__default.svg`
fill: currentColor;
animation: ${({
theme
}) => styled.css`${theme.icon.clear.animation}`};
${({
theme: {
icon: {
clear
}
}
}) => `
width: ${clear.width};
height: ${clear.height};
transition: ${clear.transition};
`}
`;
const Caret = styled__default.div`
${({
theme: {
icon: {
caret
}
}
}) => `
transition: ${caret.transition};
border-top: ${caret.size} dashed;
border-left: ${caret.size} solid transparent;
border-right: ${caret.size} solid transparent;
`}
${({
menuOpen,
isInvalid,
theme: {
color
}
}) => menuOpen && `
transform: rotate(180deg);
color: ${isInvalid ? color.danger : color.caretActive || color.primary};
`}
`;
const Separator = styled__default.div`
width: 1px;
margin: 0.5rem 0;
align-self: stretch;
box-sizing: border-box;
background-color: ${({
theme
}) => theme.color.iconSeparator || theme.color.border};
`;
const IndicatorIcons = /*#__PURE__*/React__default.memo(({
menuOpen,
clearIcon,
caretIcon,
isInvalid,
showClear,
isLoading,
isDisabled,
loadingNode,
isTouchDevice,
addClassNames,
onCaretMouseDown,
onClearMouseDown
}) => {
const forwardState = typeof caretIcon === 'function' || typeof clearIcon === 'function' ? {
menuOpen,
isLoading: !!isLoading,
isInvalid: !!isInvalid,
isDisabled: !!isDisabled
} : undefined;
const renderCustomIcon = iconProp => {
return typeof iconProp === 'function' ? iconProp(forwardState) : iconProp;
};
return /*#__PURE__*/React__default.createElement(IndicatorIconsWrapper, null, showClear && !isLoading && /*#__PURE__*/React__default.createElement(IndicatorIcon, {
onMouseDown: onClearMouseDown,
"data-testid": CLEAR_ICON_TESTID,
onTouchEnd: isTouchDevice ? onClearMouseDown : undefined
}, renderCustomIcon(clearIcon) || /*#__PURE__*/React__default.createElement(ClearSVG, {
"aria-hidden": 'true',
viewBox: '0 0 14 16',
className: addClassNames ? CLEAR_ICON_CLS : undefined
}, /*#__PURE__*/React__default.createElement("path", {
fillRule: 'evenodd',
d: 'M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z'
}))), isLoading && (loadingNode || /*#__PURE__*/React__default.createElement(LoadingDots, {
addClassNames: addClassNames
})), /*#__PURE__*/React__default.createElement(Separator, null), /*#__PURE__*/React__default.createElement(IndicatorIcon, {
onMouseDown: onCaretMouseDown,
"data-testid": CARET_ICON_TESTID,
onTouchEnd: isTouchDevice ? onCaretMouseDown : undefined
}, renderCustomIcon(caretIcon) || /*#__PURE__*/React__default.createElement(Caret, {
"aria-hidden": 'true',
menuOpen: menuOpen,
isInvalid: isInvalid,
className: addClassNames ? CARET_ICON_CLS : undefined
})));
});
IndicatorIcons.displayName = 'IndicatorIcons';
const A11yText = styled__default.span`
border: 0;
padding: 0;
width: 1px;
height: 1px;

@@ -829,785 +32,2 @@ margin: -1px;

clip-path: inset(50%);
`;
const AriaLiveRegion = ({
menuOpen,
isFocused,
ariaLabel,
inputValue,
optionCount,
isSearchable,
focusedOption,
selectedOption
}) => {
if (!isFocused) {
return null;
}
const {
value: focusedOptionValue,
label: focusedOptionLabel,
index: focusedOptionIndex,
isDisabled: isFocusedOptionDisabled
} = focusedOption;
const selectedOptionLabel = isArrayWithLength(selectedOption) ? selectedOption.map(({
label
}) => label).join(' ') : 'N/A';
const selectedOptionMsg = `Selected option: ${selectedOptionLabel}`;
const optionsMsg = `${optionCount} result(s) available${inputValue ? ` for search input ${inputValue}` : ''}.`;
const focusedMsg = focusedOptionValue ? `Focused option: ${focusedOptionLabel}${isFocusedOptionDisabled ? ' - disabled' : ''}, ${focusedOptionIndex + 1} of ${optionCount}.` : '';
const menuMsg = menuOpen ? 'Use Up and Down arrow keys to choose options, press Enter or Tab to select the currently focused option, press Escape to close the menu.' : `${ariaLabel || 'Select'} is focused${isSearchable ? ', type to filter options' : ''}, press Down arrow key to open the menu.`;
return /*#__PURE__*/React__default.createElement(A11yText, {
"aria-live": 'polite',
"data-testid": ARIA_LIVE_TESTID
}, /*#__PURE__*/React__default.createElement("p", null, selectedOptionMsg), /*#__PURE__*/React__default.createElement("p", null, `${focusedMsg} ${optionsMsg} ${menuMsg}`));
};
(function (MenuPositionEnum) {
MenuPositionEnum["TOP"] = "top";
MenuPositionEnum["AUTO"] = "auto";
MenuPositionEnum["BOTTOM"] = "bottom";
})(exports.MenuPositionEnum || (exports.MenuPositionEnum = {}));
(function (FilterMatchEnum) {
FilterMatchEnum["ANY"] = "any";
FilterMatchEnum["START"] = "start";
})(exports.FilterMatchEnum || (exports.FilterMatchEnum = {}));
const ValueIndexEnum = {
NEXT: 0,
PREVIOUS: 1
};
const OptionIndexEnum = {
UP: 0,
DOWN: 1,
FIRST: 2,
LAST: 3
};
const useDebounce = (value, delay) => {
const [debouncedValue, setDebouncedValue] = React.useState(value);
React.useEffect(() => {
if (delay === undefined) return;
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return delay === undefined ? value : debouncedValue;
};
const useMenuOptions = (options, debouncedInputValue, filterMatchFrom, selectedOption, getOptionValue, getOptionLabel, getIsOptionDisabled, getFilterOptionString, filterIgnoreCase, filterIgnoreAccents, isMulti, hideSelectedOptions, async) => {
const [menuOptions, setMenuOptions] = React.useState(OPTIONS_DEFAULT);
const searchValue = !async ? debouncedInputValue : '';
const hideSelectedOptionsOrDefault = typeof hideSelectedOptions !== 'boolean' ? !!isMulti : hideSelectedOptions;
React.useEffect(() => {
const matchAny = filterMatchFrom === exports.FilterMatchEnum.ANY;
const normalizedInput = trimAndFormatFilterStr(searchValue, filterIgnoreCase, filterIgnoreAccents);
const selectedValues = selectedOption.length ? selectedOption.map(({
value
}) => value) : undefined;
const getIsOptionDisabledOrDefault = getIsOptionDisabled || (data => !!data.isDisabled);
const getFilterOptionStringOrDefault = getFilterOptionString || (option => typeof option.label === 'string' ? option.label : `${option.label}`);
const isOptionFilterMatch = menuOption => {
const optionStr = getFilterOptionStringOrDefault(menuOption);
const normalizedOptionLabel = trimAndFormatFilterStr(optionStr, filterIgnoreCase, filterIgnoreAccents);
return matchAny ? normalizedOptionLabel.indexOf(normalizedInput) > -1 : normalizedOptionLabel.substr(0, normalizedInput.length) === normalizedInput;
};
const parseMenuOption = data => {
const value = getOptionValue(data);
const menuOption = Object.assign({
data,
value,
label: getOptionLabel(data)
}, getIsOptionDisabledOrDefault(data) && {
isDisabled: true
}, selectedValues && selectedValues.includes(value) && {
isSelected: true
});
if (normalizedInput && !isOptionFilterMatch(menuOption) || hideSelectedOptionsOrDefault && menuOption.isSelected) {
return;
}
return menuOption;
};
const menuOptionsOrDefault = options.reduce((acc, data) => {
const option = parseMenuOption(data);
option && acc.push(option);
return acc;
}, []);
setMenuOptions(menuOptionsOrDefault);
}, [options, selectedOption, searchValue, hideSelectedOptionsOrDefault, filterMatchFrom, filterIgnoreCase, filterIgnoreAccents, getFilterOptionString, getIsOptionDisabled, getOptionValue, getOptionLabel]);
return menuOptions;
};
const useUpdateEffect = (effect, deps) => {
const isFirstRender = React.useRef(true);
React.useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
} else {
return effect();
}
}, deps);
};
const useIsTouchDevice = () => {
const isTouchDevice = React.useRef(null);
if (isTouchDevice.current === null) {
if (typeof navigator === 'undefined' || typeof window === 'undefined') {
isTouchDevice.current = false;
return isTouchDevice.current;
}
isTouchDevice.current = 'ontouchstart' in window || !!navigator.maxTouchPoints;
return isTouchDevice.current;
}
return isTouchDevice.current;
};
const useMenuPositioner = (menuRef, menuOpen, menuPosition, menuHeightDefault, menuScrollDuration, scrollMenuIntoView, onMenuOpen, onMenuClose) => {
const resetMenuHeightRef = React.useRef(false);
const isMenuTopPositionRef = React.useRef(false);
const [menuHeight, setMenuHeight] = React.useState(menuHeightDefault);
const [isMenuTopPosition, setIsMenuTopPosition] = React.useState(menuPosition === exports.MenuPositionEnum.TOP);
React.useEffect(() => {
isMenuTopPositionRef.current = isMenuTopPosition;
}, [isMenuTopPosition]);
React.useEffect(() => {
const isTopPos = menuPosition === exports.MenuPositionEnum.TOP || menuPosition === exports.MenuPositionEnum.AUTO && !menuFitsBelowControl(menuRef.current);
setIsMenuTopPosition(isTopPos);
}, [menuRef, menuPosition]);
useUpdateEffect(() => {
if (menuOpen) {
const handleOnMenuOpen = availableSpace => {
onMenuOpen && onMenuOpen();
if (availableSpace) {
resetMenuHeightRef.current = true;
setMenuHeight(availableSpace);
}
};
!isMenuTopPositionRef.current ? scrollMenuIntoViewOnOpen(menuRef.current, menuScrollDuration, scrollMenuIntoView, handleOnMenuOpen) : handleOnMenuOpen();
} else {
onMenuClose && onMenuClose();
if (resetMenuHeightRef.current) {
resetMenuHeightRef.current = false;
setMenuHeight(menuHeightDefault);
}
}
}, [menuRef, menuOpen, onMenuClose, onMenuOpen, menuHeightDefault, scrollMenuIntoView, menuScrollDuration]);
return [menuHeight, isMenuTopPosition];
};
const SelectWrapper = styled__default.div`
position: relative;
box-sizing: border-box;
${({
theme
}) => theme.select.css}
`;
const ValueWrapper = styled__default.div`
flex: 1 1 0%;
display: flex;
flex-wrap: wrap;
overflow: hidden;
position: relative;
align-items: center;
box-sizing: border-box;
padding: ${({
theme
}) => theme.control.padding};
`;
const ControlWrapper = styled__default.div`
outline: 0;
display: flex;
flex-wrap: wrap;
cursor: default;
position: relative;
align-items: center;
box-sizing: border-box;
justify-content: space-between;
${({
isDisabled,
isFocused,
isInvalid,
theme: {
control,
color
}
}) => `
min-height: ${control.minHeight};
transition: ${control.transition};
border-style: ${control.borderStyle};
border-width: ${control.borderWidth};
border-radius: ${control.borderRadius};
border-color: ${isInvalid ? color.danger : isFocused ? control.focusedBorderColor : color.border};
${isDisabled ? 'pointer-events: none;' : ''}
${control.height ? `height: ${control.height};` : ''}
${control.backgroundColor || isDisabled ? `background-color: ${isDisabled ? color.disabled : control.backgroundColor};` : ''}
${isFocused ? `box-shadow: ${control.boxShadow} ${isInvalid ? color.dangerLight : control.boxShadowColor};` : ''}
${control.css || ''}
`}
`;
const MenuWrapper = styled__default.div`
z-index: 999;
cursor: default;
position: absolute;
${({
menuTop,
hideMenu,
theme: {
menu
}
}) => `
width: ${menu.width};
margin: ${menu.margin};
padding: ${menu.padding};
box-shadow: ${menu.boxShadow};
border-radius: ${menu.borderRadius};
background-color: ${menu.backgroundColor};
${hideMenu ? 'display: none;' : ''}
${menuTop ? `top: ${menuTop};` : ''}
`}
animation: ${({
theme
}) => styled.css`${theme.menu.animation}`};
${({
theme
}) => theme.menu.css}
.${OPTION_CLS} {
display: block;
overflow: hidden;
user-select: none;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-tap-highlight-color: transparent;
${({
theme: {
menu: {
option
}
}
}) => `
padding: ${option.padding};
text-align: ${option.textAlign};
&.${OPTION_FOCUSED_CLS},
&:hover:not(.${OPTION_DISABLED_CLS}):not(.${OPTION_SELECTED_CLS}) {
background-color: ${option.focusedBgColor};
}
&.${OPTION_SELECTED_CLS} {
color: ${option.selectedColor};
background-color: ${option.selectedBgColor};
}
&.${OPTION_DISABLED_CLS} {
opacity: 0.35;
}
`}
}
`;
const Select = /*#__PURE__*/React__default.forwardRef(({
async,
isMulti,
inputId,
selectId,
autoFocus,
isLoading,
onKeyDown,
clearIcon,
caretIcon,
isInvalid,
ariaLabel,
menuWidth,
isDisabled,
inputDelay,
onMenuOpen,
onMenuClose,
onInputBlur,
isClearable,
themeConfig,
loadingNode,
initialValue,
onInputFocus,
onInputChange,
addClassNames,
ariaLabelledBy,
onOptionChange,
onSearchChange,
getOptionLabel,
getOptionValue,
openMenuOnFocus,
isAriaLiveEnabled,
menuOverscanCount,
blurInputOnSelect,
renderOptionLabel,
renderMultiOptions,
menuScrollDuration,
filterIgnoreAccents,
hideSelectedOptions,
getIsOptionDisabled,
getFilterOptionString,
isSearchable = true,
openMenuOnClick = true,
filterIgnoreCase = true,
tabSelectsOption = true,
closeMenuOnSelect = true,
scrollMenuIntoView = true,
backspaceClearsValue = true,
filterMatchFrom = exports.FilterMatchEnum.ANY,
menuPosition = exports.MenuPositionEnum.BOTTOM,
options = OPTIONS_DEFAULT,
loadingMsg = LOADING_MSG_DEFAULT,
placeholder = PLACEHOLDER_DEFAULT,
noOptionsMsg = NO_OPTIONS_MSG_DEFAULT,
menuItemSize = MENU_ITEM_SIZE_DEFAULT,
menuMaxHeight = MENU_MAX_HEIGHT_DEFAULT
}, ref) => {
const prevMenuOptionsLength = React.useRef();
const onChangeEventValue = React.useRef(false);
const listRef = React.useRef(null);
const menuRef = React.useRef(null);
const inputRef = React.useRef(null);
const controlRef = React.useRef(null);
const isTouchDevice = useIsTouchDevice();
const blurInputOnSelectOrTouch = typeof blurInputOnSelect === 'boolean' ? blurInputOnSelect : isTouchDevice;
const [inputValue, setInputValue] = React.useState('');
const [menuOpen, setMenuOpen] = React.useState(false);
const [isFocused, setIsFocused] = React.useState(false);
const [focusedOption, setFocusedOption] = React.useState(FOCUSED_OPTION_DEFAULT);
const [focusedMultiValue, setFocusedMultiValue] = React.useState(FOCUSED_MULTI_DEFAULT);
const theme = React.useMemo(() => {
return isPlainObject(themeConfig) ? mergeDeep(DefaultThemeObj, themeConfig) : DefaultThemeObj;
}, [themeConfig]);
const getOptionLabelFn = React.useMemo(() => getOptionLabel || (data => data.label), [getOptionLabel]);
const getOptionValueFn = React.useMemo(() => getOptionValue || (data => data.value), [getOptionValue]);
const renderOptionLabelFn = React.useMemo(() => renderOptionLabel || getOptionLabelFn, [renderOptionLabel, getOptionLabelFn]);
const debouncedInputValue = useDebounce(inputValue, inputDelay);
const [selectedOption, setSelectedOption] = React.useState(() => normalizeValue(initialValue, getOptionValueFn, getOptionLabelFn));
const [menuHeight, isMenuTopPosition] = useMenuPositioner(menuRef, menuOpen, menuPosition, menuMaxHeight, menuScrollDuration, scrollMenuIntoView, onMenuOpen, onMenuClose);
const menuOptions = useMenuOptions(options, debouncedInputValue, filterMatchFrom, selectedOption, getOptionValueFn, getOptionLabelFn, getIsOptionDisabled, getFilterOptionString, filterIgnoreCase, filterIgnoreAccents, isMulti, hideSelectedOptions, async);
const blurInput = () => {
inputRef.current.blur();
};
const focusInput = () => {
inputRef.current.focus();
};
const scrollToItemIndex = index => {
if (listRef.current) {
listRef.current.scrollToItem(index);
}
};
const removeSelectedOption = React.useCallback((removeValue, e) => {
if (e) {
e.stopPropagation();
e.type === MOUSE_DOWN_EVENT_TYPE && e.preventDefault();
}
setSelectedOption(prevSelectedOption => prevSelectedOption.filter(({
value
}) => value !== removeValue));
}, []);
const openMenuAndFocusOption = React.useCallback(position => {
if (!isArrayWithLength(menuOptions)) {
setMenuOpen(true);
return;
}
const selectedIndex = !isMulti ? menuOptions.findIndex(({
isSelected
}) => isSelected) : -1;
const index = selectedIndex > -1 ? selectedIndex : position === OptionIndexEnum.FIRST ? 0 : menuOptions.length - 1;
setMenuOpen(true);
setFocusedOption(Object.assign({
index
}, menuOptions[index]));
scrollToItemIndex(index);
}, [isMulti, menuOptions]);
const selectOption = React.useCallback((option, isSelected) => {
if (isSelected) {
isMulti && removeSelectedOption(option.value);
} else {
setSelectedOption(prevSelectedOption => !isMulti ? [option] : [...prevSelectedOption, option]);
}
if (blurInputOnSelectOrTouch) {
blurInput();
} else if (closeMenuOnSelect) {
setMenuOpen(false);
setInputValue('');
}
}, [isMulti, closeMenuOnSelect, removeSelectedOption, blurInputOnSelectOrTouch]);
React.useImperativeHandle(ref, () => ({
blur: blurInput,
focus: focusInput,
clearValue: () => {
setSelectedOption(SELECTED_OPTION_DEFAULT);
setFocusedOption(FOCUSED_OPTION_DEFAULT);
},
setValue: option => {
const validatedSelectedOption = validateSetValueParam(option, menuOptions, getOptionValueFn);
setSelectedOption(validatedSelectedOption);
},
toggleMenu: state => {
if (state === true || state === undefined && !menuOpen) {
!isFocused && focusInput();
openMenuAndFocusOption(OptionIndexEnum.FIRST);
} else {
blurInput();
}
}
}));
React.useEffect(() => {
autoFocus && focusInput();
}, [autoFocus]);
React.useEffect(() => {
if (isFocused && openMenuOnFocus) {
openMenuAndFocusOption(OptionIndexEnum.FIRST);
}
}, [isFocused, openMenuOnFocus, openMenuAndFocusOption]);
React.useEffect(() => {
if (onSearchChange && onChangeEventValue.current) {
onChangeEventValue.current = false;
onSearchChange(debouncedInputValue);
}
}, [onSearchChange, debouncedInputValue]);
useUpdateEffect(() => {
if (onOptionChange) {
const normalizedOptionValue = isMulti ? selectedOption.map(({
data
}) => data) : isArrayWithLength(selectedOption) ? selectedOption[0].data : ON_CHANGE_SINGLE_VALUE_DEFAULT;
onOptionChange(normalizedOptionValue);
}
}, [isMulti, selectedOption, onOptionChange]);
useUpdateEffect(() => {
const curLength = menuOptions.length;
const inputChanged = curLength > 0 && (async || curLength !== options.length || prevMenuOptionsLength.current === 0);
if (curLength === 0) {
setFocusedOption(FOCUSED_OPTION_DEFAULT);
} else if (curLength === 1 || inputChanged) {
setFocusedOption(Object.assign({
index: 0
}, menuOptions[0]));
scrollToItemIndex(0);
}
prevMenuOptionsLength.current = curLength;
}, [async, options, menuOptions]);
const selectOptionFromFocused = () => {
const {
data,
value,
label,
isSelected,
isDisabled: focOptionDisabled
} = focusedOption;
if (data && !focOptionDisabled) {
selectOption({
data,
value,
label
}, isSelected);
}
};
const focusValueOnArrowKey = direction => {
if (!isArrayWithLength(selectedOption)) return;
let nextFocusedIndex = -1;
const lastValueIndex = selectedOption.length - 1;
const curFocusedIndex = focusedMultiValue ? selectedOption.findIndex(({
value
}) => value === focusedMultiValue) : -1;
switch (direction) {
case ValueIndexEnum.NEXT:
nextFocusedIndex = curFocusedIndex > -1 && curFocusedIndex < lastValueIndex ? curFocusedIndex + 1 : -1;
break;
case ValueIndexEnum.PREVIOUS:
nextFocusedIndex = curFocusedIndex !== 0 ? curFocusedIndex === -1 ? lastValueIndex : curFocusedIndex - 1 : 0;
break;
}
const nextFocusedVal = nextFocusedIndex >= 0 ? selectedOption[nextFocusedIndex].value : FOCUSED_MULTI_DEFAULT;
if (focusedOption.data) setFocusedOption(FOCUSED_OPTION_DEFAULT);
if (nextFocusedVal !== focusedMultiValue) setFocusedMultiValue(nextFocusedVal);
};
const focusOptionOnArrowKey = direction => {
if (!isArrayWithLength(menuOptions)) return;
const index = direction === OptionIndexEnum.DOWN ? (focusedOption.index + 1) % menuOptions.length : focusedOption.index > 0 ? focusedOption.index - 1 : menuOptions.length - 1;
focusedMultiValue && setFocusedMultiValue(FOCUSED_MULTI_DEFAULT);
setFocusedOption(Object.assign({
index
}, menuOptions[index]));
scrollToItemIndex(index);
};
const handleOnKeyDown = e => {
if (isDisabled) return;
if (onKeyDown) {
onKeyDown(e);
if (e.defaultPrevented) return;
}
switch (e.key) {
case 'ArrowDown':
menuOpen ? focusOptionOnArrowKey(OptionIndexEnum.DOWN) : openMenuAndFocusOption(OptionIndexEnum.FIRST);
break;
case 'ArrowUp':
menuOpen ? focusOptionOnArrowKey(OptionIndexEnum.UP) : openMenuAndFocusOption(OptionIndexEnum.LAST);
break;
case 'ArrowLeft':
if (!isMulti || inputValue || renderMultiOptions) return;
focusValueOnArrowKey(ValueIndexEnum.PREVIOUS);
break;
case 'ArrowRight':
if (!isMulti || inputValue || renderMultiOptions) return;
focusValueOnArrowKey(ValueIndexEnum.NEXT);
break;
case ' ':
if (inputValue) {
return;
} else if (!menuOpen) {
openMenuAndFocusOption(OptionIndexEnum.FIRST);
break;
} else if (!focusedOption.data) {
return;
}
selectOptionFromFocused();
break;
case 'Enter':
if (menuOpen && e.keyCode !== IME_KEY_CODE) {
selectOptionFromFocused();
}
break;
case 'Escape':
if (menuOpen) {
setMenuOpen(false);
setInputValue('');
}
break;
case 'Tab':
if (!menuOpen || !tabSelectsOption || !focusedOption.data || e.shiftKey) {
return;
}
selectOptionFromFocused();
break;
case 'Delete':
case 'Backspace':
if (inputValue) return;
if (focusedMultiValue) {
const clearFocusedIndex = selectedOption.findIndex(({
value
}) => value === focusedMultiValue);
const nexFocusedMultiValue = clearFocusedIndex > -1 && clearFocusedIndex < selectedOption.length - 1 ? selectedOption[clearFocusedIndex + 1].value : FOCUSED_MULTI_DEFAULT;
removeSelectedOption(focusedMultiValue);
setFocusedMultiValue(nexFocusedMultiValue);
} else {
if (!backspaceClearsValue) return;
if (isArrayWithLength(selectedOption)) {
if (isMulti && !renderMultiOptions) {
const {
value
} = selectedOption[selectedOption.length - 1];
removeSelectedOption(value);
} else if (isClearable) {
setSelectedOption(SELECTED_OPTION_DEFAULT);
}
}
}
break;
default:
return;
}
e.preventDefault();
};
const handleOnControlMouseDown = e => {
if (isDisabled) return;
if (!isFocused) focusInput();
const tagNameNotInput = e.currentTarget.tagName !== 'INPUT';
if (!menuOpen) {
openMenuOnClick && openMenuAndFocusOption(OptionIndexEnum.FIRST);
} else if (tagNameNotInput) {
setMenuOpen(false);
inputValue && setInputValue('');
}
if (tagNameNotInput) {
e.preventDefault();
}
};
const handleOnMenuMouseDown = e => {
e.stopPropagation();
e.preventDefault();
focusInput();
};
const handleOnInputBlur = React.useCallback(e => {
onInputBlur && onInputBlur(e);
setIsFocused(false);
setMenuOpen(false);
setInputValue('');
}, [onInputBlur]);
const handleOnInputFocus = React.useCallback(e => {
onInputFocus && onInputFocus(e);
setIsFocused(true);
}, [onInputFocus]);
const handleOnInputChange = React.useCallback(e => {
onChangeEventValue.current = true;
onInputChange && onInputChange(e.currentTarget.value || '');
setMenuOpen(true);
setInputValue(e.currentTarget.value || '');
}, [onInputChange]);
const handleOnClearMouseDown = React.useCallback(e => {
e.stopPropagation();
e.type === MOUSE_DOWN_EVENT_TYPE && e.preventDefault();
setSelectedOption(SELECTED_OPTION_DEFAULT);
focusInput();
}, []);
const handleOnCaretMouseDown = React.useCallback(e => {
e.stopPropagation();
if (e.type === MOUSE_DOWN_EVENT_TYPE) {
e.preventDefault();
}
focusInput();
menuOpen ? setMenuOpen(false) : openMenuAndFocusOption(OptionIndexEnum.FIRST);
}, [menuOpen, openMenuAndFocusOption]);
const calcMenuHeight = Math.min(menuHeight, menuOptions.length * menuItemSize);
const getMenuStyleTop = () => isMenuTopPosition ? calculateMenuTop(calcMenuHeight, menuRef.current, controlRef.current) : undefined;
return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
theme: theme
}, /*#__PURE__*/React__default.createElement(SelectWrapper, {
id: selectId,
role: 'combobox',
"aria-haspopup": 'listbox',
"aria-controls": inputId,
onKeyDown: handleOnKeyDown,
"data-testid": SELECT_CONTAINER_TESTID,
"aria-expanded": menuOpen ? 'true' : 'false',
className: addClassNames ? SELECT_CONTAINER_CLS : undefined
}, /*#__PURE__*/React__default.createElement(ControlWrapper, {
ref: controlRef,
isInvalid: isInvalid,
isFocused: isFocused,
isDisabled: isDisabled,
onMouseDown: handleOnControlMouseDown,
"data-testid": CONTROL_CONTAINER_TESTID,
className: addClassNames ? CONTROL_CONTAINER_CLS : undefined,
onTouchEnd: isTouchDevice ? handleOnControlMouseDown : undefined
}, /*#__PURE__*/React__default.createElement(ValueWrapper, null, /*#__PURE__*/React__default.createElement(Value, {
isMulti: isMulti,
inputValue: inputValue,
placeholder: placeholder,
isTouchDevice: isTouchDevice,
selectedOption: selectedOption,
focusedMultiValue: focusedMultiValue,
renderOptionLabel: renderOptionLabelFn,
renderMultiOptions: renderMultiOptions,
removeSelectedOption: removeSelectedOption
}), /*#__PURE__*/React__default.createElement(AutosizeInput, {
id: inputId,
ref: inputRef,
ariaLabel: ariaLabel,
inputValue: inputValue,
onBlur: handleOnInputBlur,
onFocus: handleOnInputFocus,
addClassNames: addClassNames,
onChange: handleOnInputChange,
ariaLabelledBy: ariaLabelledBy,
readOnly: isDisabled || !isSearchable || !!focusedMultiValue
})), /*#__PURE__*/React__default.createElement(IndicatorIcons, {
menuOpen: menuOpen,
clearIcon: clearIcon,
caretIcon: caretIcon,
isInvalid: isInvalid,
isLoading: isLoading,
isDisabled: isDisabled,
loadingNode: loadingNode,
addClassNames: addClassNames,
isTouchDevice: isTouchDevice,
onClearMouseDown: handleOnClearMouseDown,
showClear: !!(isClearable && !isDisabled && isArrayWithLength(selectedOption)),
onCaretMouseDown: !isDisabled && !openMenuOnClick ? handleOnCaretMouseDown : undefined
})), /*#__PURE__*/React__default.createElement(MenuWrapper, {
ref: menuRef,
hideMenu: !menuOpen,
menuTop: getMenuStyleTop(),
onMouseDown: handleOnMenuMouseDown,
"data-testid": MENU_CONTAINER_TESTID,
className: addClassNames ? MENU_CONTAINER_CLS : undefined
}, /*#__PURE__*/React__default.createElement(Menu, {
ref: listRef,
isLoading: isLoading,
height: calcMenuHeight,
itemSize: menuItemSize,
loadingMsg: loadingMsg,
menuOptions: menuOptions,
noOptionsMsg: noOptionsMsg,
selectOption: selectOption,
overscanCount: menuOverscanCount,
width: menuWidth || theme.menu.width,
renderOptionLabel: renderOptionLabelFn,
focusedOptionIndex: focusedOption.index
})), isAriaLiveEnabled && /*#__PURE__*/React__default.createElement(AriaLiveRegion, {
menuOpen: menuOpen,
isFocused: isFocused,
ariaLabel: ariaLabel,
inputValue: inputValue,
isSearchable: isSearchable,
focusedOption: focusedOption,
selectedOption: selectedOption,
optionCount: menuOptions.length
})));
});
Select.displayName = 'Select';
exports.Select = Select;
`,oe=({menuOpen:e,isFocused:n,ariaLabel:o,inputValue:i,optionCount:r,isSearchable:a,focusedOption:s,selectedOption:l})=>{if(!n)return null;const{value:d,label:c,index:u,isDisabled:p}=s,m="Selected option: "+(N(l)?l.map(({label:e})=>e).join(" "):"N/A"),f=`${r} result(s) available${i?" for search input "+i:""}.`,g=d?`Focused option: ${c}${p?" - disabled":""}, ${u+1} of ${r}.`:"",h=e?"Use Up and Down arrow keys to choose options, press Enter or Tab to select the currently focused option, press Escape to close the menu.":`${o||"Select"} is focused${a?", type to filter options":""}, press Down arrow key to open the menu.`;return t.createElement(te,{"aria-live":"polite","data-testid":v},t.createElement("p",null,m),t.createElement("p",null,`${g} ${f} ${h}`))};var ie,re;(ie=exports.MenuPositionEnum||(exports.MenuPositionEnum={})).TOP="top",ie.AUTO="auto",ie.BOTTOM="bottom",(re=exports.FilterMatchEnum||(exports.FilterMatchEnum={})).ANY="any",re.START="start";const ae=0,se=1,le=0,de=1,ce=2,ue=3,pe=(e,t,o,i,r,a,s,l,d,c,p,m,f)=>{const[g,h]=n.useState(u),b=f?"":t,v="boolean"!=typeof m?!!p:m;return n.useEffect(()=>{const n=o===exports.FilterMatchEnum.ANY,t=D(b,d,c),u=i.length?i.map(({value:e})=>e):void 0,p=s||(e=>!!e.isDisabled),m=l||(e=>"string"==typeof e.label?e.label:""+e.label),f=e=>{const o=r(e),i=Object.assign({data:e,value:o,label:a(e)},p(e)&&{isDisabled:!0},u&&u.includes(o)&&{isSelected:!0});if(!(t&&!(e=>{const o=D(m(e),d,c);return n?o.indexOf(t)>-1:o.substr(0,t.length)===t})(i)||v&&i.isSelected))return i},g=e.reduce((e,n)=>{const t=f(n);return t&&e.push(t),e},[]);h(g)},[e,i,b,v,o,d,c,l,s,r,a]),g},me=(e,t)=>{const o=n.useRef(!0);n.useEffect(()=>{if(!o.current)return e();o.current=!1},t)},fe=(e,t,o,i,r,a,s,l)=>{const d=n.useRef(!1),c=n.useRef(!1),[u,p]=n.useState(i),[m,f]=n.useState(o===exports.MenuPositionEnum.TOP);return n.useEffect(()=>{c.current=m},[m]),n.useEffect(()=>{const n=o===exports.MenuPositionEnum.TOP||o===exports.MenuPositionEnum.AUTO&&!function(e){if(!e)return!0;const n=e.getBoundingClientRect(),t=M(e),o=I(t);return t.getBoundingClientRect().height-o-n.top>=n.height}(e.current);f(n)},[e,o]),me(()=>{if(t){const n=e=>{s&&s(),e&&(d.current=!0,p(e))};c.current?n():function(e,n,t,o){if(!e)return void o();const i=window.innerHeight,r=e.getBoundingClientRect();if(i-r.top>=r.height)return void o();const a=M(e),s=I(a),l=a.getBoundingClientRect().height-s-r.top,d=l<r.height;if(d||!t){return void o(d?l:void 0)}const c=parseInt(getComputedStyle(e).marginBottom||"0",10);k(a,r.bottom-i+s+c,n,o)}(e.current,r,a,n)}else l&&l(),d.current&&(d.current=!1,p(i))},[e,t,l,s,i,a,r]),[u,m]},ge=i.div.withConfig({displayName:"SelectWrapper",componentId:"sc-16q6iuz"})`position:relative;box-sizing:border-box;${({theme:e})=>e.select.css}`,he=i.div.withConfig({displayName:"ValueWrapper",componentId:"sc-yuq4ck"})`flex:1 1 0%;display:flex;flex-wrap:wrap;overflow:hidden;position:relative;align-items:center;box-sizing:border-box;padding:${({theme:e})=>e.control.padding};`,be=i.div.withConfig({displayName:"ControlWrapper",componentId:"sc-b0802r"})`outline:0;display:flex;flex-wrap:wrap;cursor:default;position:relative;align-items:center;box-sizing:border-box;justify-content:space-between;${({isDisabled:e,isFocused:n,isInvalid:t,theme:{control:o,color:i}})=>`\n min-height: ${o.minHeight};\n transition: ${o.transition};\n border-style: ${o.borderStyle};\n border-width: ${o.borderWidth};\n border-radius: ${o.borderRadius};\n border-color: ${t?i.danger:n?o.focusedBorderColor:i.border};\n ${e?"pointer-events: none;":""}\n ${o.height?`height: ${o.height};`:""}\n ${o.backgroundColor||e?`background-color: ${e?i.disabled:o.backgroundColor};`:""}\n ${n?`box-shadow: ${o.boxShadow} ${t?i.dangerLight:o.boxShadowColor};`:""}\n ${o.css||""}\n `}`,ve=i.div.withConfig({displayName:"MenuWrapper",componentId:"sc-1wen7ck"})`z-index:999;cursor:default;position:absolute;${({menuTop:e,hideMenu:n,theme:{menu:t}})=>`\n width: ${t.width};\n margin: ${t.margin};\n padding: ${t.padding};\n box-shadow: ${t.boxShadow};\n border-radius: ${t.borderRadius};\n background-color: ${t.backgroundColor};\n ${n?"display: none;":""}\n ${e?`top: ${e};`:""}\n `} animation:${({theme:e})=>o.css(["",""],e.menu.animation)};${({theme:e})=>e.menu.css} .${"rfs-option"}{display:block;overflow:hidden;user-select:none;white-space:nowrap;text-overflow:ellipsis;-webkit-tap-highlight-color:transparent;${({theme:{menu:{option:e}}})=>`\n padding: ${e.padding};\n text-align: ${e.textAlign};\n\n &.rfs-option-focused,\n &:hover:not(.rfs-option-disabled):not(.rfs-option-selected) {\n background-color: ${e.focusedBgColor};\n }\n\n &.rfs-option-selected {\n color: ${e.selectedColor};\n background-color: ${e.selectedBgColor};\n }\n\n &.rfs-option-disabled {\n opacity: 0.35;\n }\n `}}`,we=t.forwardRef(({async:e,isMulti:i,inputId:r,selectId:a,autoFocus:s,isLoading:l,onKeyDown:d,clearIcon:f,caretIcon:g,isInvalid:h,ariaLabel:b,menuWidth:v,isDisabled:w,inputDelay:x,onMenuOpen:y,onMenuClose:C,onInputBlur:S,isClearable:I,themeConfig:M,loadingNode:k,initialValue:D,onInputFocus:T,onInputChange:R,addClassNames:F,ariaLabelledBy:B,onOptionChange:V,onSearchChange:P,getOptionLabel:j,getOptionValue:W,openMenuOnFocus:Y,isAriaLiveEnabled:U,menuOverscanCount:H,blurInputOnSelect:_,renderOptionLabel:X,renderMultiOptions:G,menuScrollDuration:J,filterIgnoreAccents:Q,hideSelectedOptions:Z,getIsOptionDisabled:ee,getFilterOptionString:te,isSearchable:ie=!0,openMenuOnClick:re=!0,filterIgnoreCase:we=!0,tabSelectsOption:xe=!0,closeMenuOnSelect:ye=!0,scrollMenuIntoView:$e=!0,backspaceClearsValue:Ce=!0,filterMatchFrom:Oe=exports.FilterMatchEnum.ANY,menuPosition:Ee=exports.MenuPositionEnum.BOTTOM,options:Se=u,loadingMsg:Ie="Loading...",placeholder:Me="Select option...",noOptionsMsg:ke="No options",menuItemSize:Ne=35,menuMaxHeight:ze=300},De)=>{const Le=n.useRef(),Te=n.useRef(!1),Re=n.useRef(null),Ae=n.useRef(null),Fe=n.useRef(null),Be=n.useRef(null),Ve=(()=>{const e=n.useRef(null);return null===e.current?"undefined"==typeof navigator||"undefined"==typeof window?(e.current=!1,e.current):(e.current="ontouchstart"in window||!!navigator.maxTouchPoints,e.current):e.current})(),Pe="boolean"==typeof _?_:Ve,[je,We]=n.useState(""),[qe,Ye]=n.useState(!1),[Ue,He]=n.useState(!1),[Ke,_e]=n.useState(m),[Xe,Ge]=n.useState(null),Je=n.useMemo(()=>z(M)?function e(n,t){const o=Object.assign({},n);return Object.keys(t).forEach(i=>{o[i]=z(t[i])&&"animation"!==i?i in n?e(n[i],t[i]):t[i]:t[i]||""}),o}(c,M):c,[M]),Qe=n.useMemo(()=>j||(e=>e.label),[j]),Ze=n.useMemo(()=>W||(e=>e.value),[W]),en=n.useMemo(()=>X||Qe,[X,Qe]),nn=((e,t)=>{const[o,i]=n.useState(e);return n.useEffect(()=>{if(void 0===t)return;const n=setTimeout(()=>{i(e)},t);return()=>{clearTimeout(n)}},[e,t]),void 0===t?e:o})(je,x),[tn,on]=n.useState(()=>L(D,Ze,Qe)),[rn,an]=fe(Ae,qe,Ee,ze,J,$e,y,C),sn=pe(Se,nn,Oe,tn,Ze,Qe,ee,te,we,Q,i,Z,e),ln=()=>{Fe.current.blur()},dn=()=>{Fe.current.focus()},cn=e=>{Re.current&&Re.current.scrollToItem(e)},un=n.useCallback((e,n)=>{n&&(n.stopPropagation(),"mousedown"===n.type&&n.preventDefault()),on(n=>n.filter(({value:n})=>n!==e))},[]),pn=n.useCallback(e=>{if(!N(sn))return void Ye(!0);const n=i?-1:sn.findIndex(({isSelected:e})=>e),t=n>-1?n:e===ce?0:sn.length-1;Ye(!0),_e(Object.assign({index:t},sn[t])),cn(t)},[i,sn]),mn=n.useCallback((e,n)=>{n?i&&un(e.value):on(n=>i?[...n,e]:[e]),Pe?ln():ye&&(Ye(!1),We(""))},[i,ye,un,Pe]);n.useImperativeHandle(De,()=>({blur:ln,focus:dn,clearValue:()=>{on(p),_e(m)},setValue:e=>{const n=function(e,n,t){if(null==e)return p;const o=L(e).reduce((e,n)=>(z(n)&&e.push(t(n)),e),[]);if(!N(o))return p;const i=[];for(const e of n)!i.includes(e)&&o.includes(t(e))&&i.push(e);return i}(e,sn,Ze);on(n)},toggleMenu:e=>{!0===e||void 0===e&&!qe?(!Ue&&dn(),pn(ce)):ln()}})),n.useEffect(()=>{s&&dn()},[s]),n.useEffect(()=>{Ue&&Y&&pn(ce)},[Ue,Y,pn]),n.useEffect(()=>{P&&Te.current&&(Te.current=!1,P(nn))},[P,nn]),me(()=>{if(V){const e=i?tn.map(({data:e})=>e):N(tn)?tn[0].data:null;V(e)}},[i,tn,V]),me(()=>{const n=sn.length,t=n>0&&(e||n!==Se.length||0===Le.current);0===n?_e(m):(1===n||t)&&(_e(Object.assign({index:0},sn[0])),cn(0)),Le.current=n},[e,Se,sn]);const fn=()=>{const{data:e,value:n,label:t,isSelected:o,isDisabled:i}=Ke;e&&!i&&mn({data:e,value:n,label:t},o)},gn=e=>{if(!N(tn))return;let n=-1;const t=tn.length-1,o=Xe?tn.findIndex(({value:e})=>e===Xe):-1;switch(e){case ae:n=o>-1&&o<t?o+1:-1;break;case se:n=0!==o?-1===o?t:o-1:0}const i=n>=0?tn[n].value:null;Ke.data&&_e(m),i!==Xe&&Ge(i)},hn=e=>{if(!N(sn))return;const n=e===de?(Ke.index+1)%sn.length:Ke.index>0?Ke.index-1:sn.length-1;Xe&&Ge(null),_e(Object.assign({index:n},sn[n])),cn(n)},bn=e=>{if(w)return;Ue||dn();const n="INPUT"!==e.currentTarget.tagName;qe?n&&(Ye(!1),je&&We("")):re&&pn(ce),n&&e.preventDefault()},vn=n.useCallback(e=>{S&&S(e),He(!1),Ye(!1),We("")},[S]),wn=n.useCallback(e=>{T&&T(e),He(!0)},[T]),xn=n.useCallback(e=>{Te.current=!0,R&&R(e.currentTarget.value||""),Ye(!0),We(e.currentTarget.value||"")},[R]),yn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),on(p),dn()},[]),$n=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),dn(),qe?Ye(!1):pn(ce)},[qe,pn]),Cn=Math.min(rn,sn.length*Ne),On=an?((e,n,t)=>{const o=e>0||!n?e:n.getBoundingClientRect().height,i=t?t.getBoundingClientRect().height:0,r=n&&getComputedStyle(n),a=r?parseInt(r.marginBottom||"0",10):0,s=r?parseInt(r.marginTop||"0",10):0;return`calc(${-Math.abs(o+i)}px + ${a+s}px)`})(Cn,Ae.current,Be.current):void 0;return t.createElement(o.ThemeProvider,{theme:Je},t.createElement(ge,{id:a,role:"combobox","aria-haspopup":"listbox","aria-controls":r,onKeyDown:e=>{if(!(w||d&&(d(e),e.defaultPrevented))){switch(e.key){case"ArrowDown":qe?hn(de):pn(ce);break;case"ArrowUp":qe?hn(le):pn(ue);break;case"ArrowLeft":if(!i||je||G)return;gn(se);break;case"ArrowRight":if(!i||je||G)return;gn(ae);break;case" ":if(je)return;if(!qe){pn(ce);break}if(!Ke.data)return;fn();break;case"Enter":qe&&229!==e.keyCode&&fn();break;case"Escape":qe&&(Ye(!1),We(""));break;case"Tab":if(!qe||!xe||!Ke.data||e.shiftKey)return;fn();break;case"Delete":case"Backspace":if(je)return;if(Xe){const e=tn.findIndex(({value:e})=>e===Xe),n=e>-1&&e<tn.length-1?tn[e+1].value:null;un(Xe),Ge(n)}else{if(!Ce)return;if(N(tn))if(i&&!G){const{value:e}=tn[tn.length-1];un(e)}else I&&on(p)}break;default:return}e.preventDefault()}},"data-testid":O,"aria-expanded":qe?"true":"false",className:F?"rfs-select-container":void 0},t.createElement(be,{ref:Be,isInvalid:h,isFocused:Ue,isDisabled:w,onMouseDown:bn,"data-testid":E,className:F?"rfs-control-container":void 0,onTouchEnd:Ve?bn:void 0},t.createElement(he,null,t.createElement(q,{isMulti:i,inputValue:je,placeholder:Me,isTouchDevice:Ve,selectedOption:tn,focusedMultiValue:Xe,renderOptionLabel:en,renderMultiOptions:G,removeSelectedOption:un}),t.createElement(K,{id:r,ref:Fe,ariaLabel:b,inputValue:je,onBlur:vn,onFocus:wn,addClassNames:F,onChange:xn,ariaLabelledBy:B,readOnly:w||!ie||!!Xe})),t.createElement(ne,{menuOpen:qe,clearIcon:f,caretIcon:g,isInvalid:h,isLoading:l,isDisabled:w,loadingNode:k,addClassNames:F,isTouchDevice:Ve,onClearMouseDown:yn,showClear:!(!I||w||!N(tn)),onCaretMouseDown:w||re?void 0:$n})),t.createElement(ve,{ref:Ae,hideMenu:!qe,menuTop:On,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),dn()},"data-testid":$,className:F?"rfs-menu-container":void 0},t.createElement(A,{ref:Re,isLoading:l,height:Cn,itemSize:Ne,loadingMsg:Ie,menuOptions:sn,noOptionsMsg:ke,selectOption:mn,overscanCount:H,width:v||Je.menu.width,renderOptionLabel:en,focusedOptionIndex:Ke.index})),U&&t.createElement(oe,{menuOpen:qe,isFocused:Ue,ariaLabel:b,inputValue:je,isSearchable:ie,focusedOption:Ke,selectedOption:tn,optionCount:sn.length})))});we.displayName="Select",exports.Select=we;

1607

dist/index.esm.js

@@ -1,1606 +0,1 @@

import React, { useMemo, Fragment, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
import styled, { keyframes, css, ThemeProvider } from 'styled-components';
import { areEqual, FixedSizeList } from 'react-window';
const _bounce_keyframes = keyframes`
0%, 80%, 100% {
transform: scale(0);
} 40% {
transform: scale(1.0);
}
`;
const _fade_in_keyframes = keyframes`
from {
opacity: 0;
} to {
opacity: 1;
}
`;
const BOUNCE_ANIMATION_CSS = css`${_bounce_keyframes} 1.19s ease-in-out infinite`;
const FADE_IN_ANIMATION_CSS = css`${_fade_in_keyframes} 0.225s ease-in-out forwards`;
var DefaultThemeObj = Object.freeze({
color: {
border: '#ced4da',
danger: '#dc3545',
primary: '#007bff',
disabled: '#e9ecef',
placeholder: '#6E7276',
dangerLight: 'rgba(220, 53, 69, 0.25)'
},
input: {},
select: {},
loader: {
size: '0.625rem',
padding: '0.375rem 0.75rem',
animation: BOUNCE_ANIMATION_CSS,
color: 'rgba(0, 123, 255, 0.42)'
},
icon: {
color: '#cccccc',
hoverColor: '#A6A6A6',
padding: '0 0.9375rem',
clear: {
width: '14px',
height: '16px',
animation: FADE_IN_ANIMATION_CSS,
transition: 'color 0.15s ease-in-out'
},
caret: {
size: '7px',
transition: 'transform 0.25s ease-in-out, color 0.15s ease-in-out'
}
},
control: {
minHeight: '38px',
borderWidth: '1px',
borderStyle: 'solid',
borderRadius: '0.25rem',
boxShadow: '0 0 0 0.2rem',
padding: '0.375rem 0.75rem',
boxShadowColor: 'rgba(0, 123, 255, 0.25)',
focusedBorderColor: 'rgba(0, 123, 255, 0.75)',
transition: 'box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out'
},
menu: {
width: '100%',
margin: '0.5rem 0',
padding: '0.15rem 0',
borderRadius: '0.25rem',
backgroundColor: '#fff',
animation: FADE_IN_ANIMATION_CSS,
boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 11px rgba(0, 0, 0, 0.1)',
option: {
textAlign: 'left',
selectedColor: '#fff',
selectedBgColor: '#007bff',
padding: '0.375rem 0.75rem',
focusedBgColor: 'rgba(0, 123, 255, 0.20)'
}
},
noOptions: {
fontSize: '1.25rem',
margin: '0.25rem 0',
color: 'hsl(0, 0%, 60%)',
padding: '0.375rem 0.75rem'
},
multiValue: {
margin: '1px 2px',
borderRadius: '0.25rem',
backgroundColor: '#e7edf3',
animation: FADE_IN_ANIMATION_CSS,
label: {
fontSize: '0.825em',
borderRadius: '0.25rem',
padding: '1px 2px 1px 6px'
},
clear: {
fontWeight: 700,
padding: '0 7px',
fontSize: '0.67em',
alignItems: 'center',
borderRadius: '0.25rem',
transition: 'color 0.15s ease-in-out, background-color 0.15s ease-in-out'
}
}
});
const MENU_ITEM_SIZE_DEFAULT = 35;
const MENU_MAX_HEIGHT_DEFAULT = 300;
const FOCUSED_MULTI_DEFAULT = null;
const ON_CHANGE_SINGLE_VALUE_DEFAULT = null;
const LOADING_MSG_DEFAULT = 'Loading...';
const NO_OPTIONS_MSG_DEFAULT = 'No options';
const PLACEHOLDER_DEFAULT = 'Select option...';
const OPTIONS_DEFAULT = [];
const SELECTED_OPTION_DEFAULT = [];
const FOCUSED_OPTION_DEFAULT = {
index: -1
};
const OVERFLOW_REGEXP = /(auto|scroll)/;
const DIACRITICS_REGEXP = /[\u0300-\u036f]/g;
const IE_EDGE_BROWSER_REGEXP = /(MSIE|Trident\/|Edge\/|Edg\/)/i;
const _isTest = process.env.NODE_ENV === 'test';
const IME_KEY_CODE = 229;
const MOUSE_DOWN_EVENT_TYPE = 'mousedown';
const OPTION_CLS = 'rfs-option';
const OPTION_FOCUSED_CLS = `${OPTION_CLS}-focused`;
const OPTION_SELECTED_CLS = `${OPTION_CLS}-selected`;
const OPTION_DISABLED_CLS = `${OPTION_CLS}-disabled`;
const CARET_ICON_CLS = 'rfs-caret-icon';
const CLEAR_ICON_CLS = 'rfs-clear-icon';
const LOADING_DOTS_CLS = 'rfs-loading-dots';
const AUTOSIZE_INPUT_CLS = 'rfs-autosize-input';
const MENU_CONTAINER_CLS = 'rfs-menu-container';
const SELECT_CONTAINER_CLS = 'rfs-select-container';
const CONTROL_CONTAINER_CLS = 'rfs-control-container';
const ARIA_LIVE_TESTID = _isTest ? 'rfs-aria-live' : undefined;
const CLEAR_ICON_TESTID = _isTest ? CLEAR_ICON_CLS : undefined;
const CARET_ICON_TESTID = _isTest ? CARET_ICON_CLS : undefined;
const AUTOSIZE_INPUT_TESTID = _isTest ? AUTOSIZE_INPUT_CLS : undefined;
const MENU_CONTAINER_TESTID = _isTest ? MENU_CONTAINER_CLS : undefined;
const CLEAR_ICON_MV_TESTID = _isTest ? `${CLEAR_ICON_CLS}-mv` : undefined;
const SELECT_CONTAINER_TESTID = _isTest ? SELECT_CONTAINER_CLS : undefined;
const CONTROL_CONTAINER_TESTID = _isTest ? CONTROL_CONTAINER_CLS : undefined;
function stripDiacritics(value) {
return value.normalize('NFD').replace(DIACRITICS_REGEXP, '');
}
function isDocumentElement(el) {
return el === document.documentElement || el === document.body || el === window;
}
function easeOutCubic(t, s, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + s;
}
function getScrollTop(el) {
return isDocumentElement(el) ? window.pageYOffset : el.scrollTop;
}
function scrollTo(el, top) {
isDocumentElement(el) ? window.scrollTo(0, top) : el.scrollTop = top;
}
function getScrollParent(el) {
let style = getComputedStyle(el);
const excludeStaticParent = style.position === 'absolute';
if (style.position === 'fixed') {
return document.documentElement;
}
for (let parent = el; parent = parent ? parent.parentElement : null;) {
style = getComputedStyle(parent);
if (excludeStaticParent && style.position === 'static') {
continue;
} else if (OVERFLOW_REGEXP.test(`${style.overflow}${style.overflowY}${style.overflowX}`)) {
return parent;
}
}
return document.documentElement;
}
function smoothScrollTo(element, to, duration = 300, callback) {
let currentTime = 0;
const start = getScrollTop(element);
const change = to - start;
function smoothScroller() {
currentTime += 5;
const top = easeOutCubic(currentTime, start, change, duration);
scrollTo(element, top);
if (currentTime < duration) {
window.requestAnimationFrame(smoothScroller);
} else {
callback && callback();
}
}
window.requestAnimationFrame(smoothScroller);
}
const isEdgeOrIE = () => typeof navigator !== 'undefined' && IE_EDGE_BROWSER_REGEXP.test(navigator.userAgent);
function isArrayWithLength(test) {
return Array.isArray(test) && !!test.length;
}
function isPlainObject(test) {
return test && typeof test === 'object' && !Array.isArray(test);
}
function optionClassName(isDisabled, isSelected, isFocused) {
let className = OPTION_CLS;
if (isDisabled) className += ' ' + OPTION_DISABLED_CLS;
if (isSelected) className += ' ' + OPTION_SELECTED_CLS;
if (isFocused) className += ' ' + OPTION_FOCUSED_CLS;
return className;
}
function trimAndFormatFilterStr(value, filterIgnoreCase, filterIgnoreAccents) {
let trimVal = value.trim();
if (filterIgnoreCase) {
trimVal = trimVal.toLowerCase();
}
return !filterIgnoreAccents ? trimVal : stripDiacritics(trimVal);
}
function mergeDeep(target, source) {
const output = Object.assign({}, target);
Object.keys(source).forEach(key => {
output[key] = isPlainObject(source[key]) && key !== 'animation' ? key in target ? mergeDeep(target[key], source[key]) : source[key] : source[key] || '';
});
return output;
}
const calculateMenuTop = (menuHeight, menuEl, controlEl) => {
const menuHeightOrDefault = menuHeight > 0 || !menuEl ? menuHeight : menuEl.getBoundingClientRect().height;
const controlHeight = controlEl ? controlEl.getBoundingClientRect().height : 0;
const menuElStyle = menuEl && getComputedStyle(menuEl);
const marginBottom = menuElStyle ? parseInt(menuElStyle.marginBottom || '0', 10) : 0;
const marginTop = menuElStyle ? parseInt(menuElStyle.marginTop || '0', 10) : 0;
return `calc(${-Math.abs(menuHeightOrDefault + controlHeight)}px + ${marginBottom + marginTop}px)`;
};
function menuFitsBelowControl(menuEl) {
if (!menuEl) return true;
const menuRect = menuEl.getBoundingClientRect();
const scrollParent = getScrollParent(menuEl);
const scrollTop = getScrollTop(scrollParent);
const scrollSpaceBelow = scrollParent.getBoundingClientRect().height - scrollTop - menuRect.top;
return scrollSpaceBelow >= menuRect.height;
}
function scrollMenuIntoViewOnOpen(menuEl, menuScrollDuration, scrollMenuIntoView, handleOnMenuOpen) {
if (!menuEl) {
handleOnMenuOpen();
return;
}
const viewInner = window.innerHeight;
const menuRect = menuEl.getBoundingClientRect();
const viewSpaceBelow = viewInner - menuRect.top;
if (viewSpaceBelow >= menuRect.height) {
handleOnMenuOpen();
return;
}
const scrollParent = getScrollParent(menuEl);
const scrollTop = getScrollTop(scrollParent);
const scrollSpaceBelow = scrollParent.getBoundingClientRect().height - scrollTop - menuRect.top;
const notEnoughSpaceBelow = scrollSpaceBelow < menuRect.height;
if (notEnoughSpaceBelow || !scrollMenuIntoView) {
const condensedMenuHeight = notEnoughSpaceBelow ? scrollSpaceBelow : undefined;
handleOnMenuOpen(condensedMenuHeight);
return;
}
const marginBottom = parseInt(getComputedStyle(menuEl).marginBottom || '0', 10);
const scrollDown = menuRect.bottom - viewInner + scrollTop + marginBottom;
smoothScrollTo(scrollParent, scrollDown, menuScrollDuration, handleOnMenuOpen);
}
function validateSetValueParam(values, menuOptions, getOptionValue) {
if (values === null || values === undefined) {
return SELECTED_OPTION_DEFAULT;
}
const normalizedVal = normalizeValue(values);
const validValues = normalizedVal.reduce((acc, x) => {
isPlainObject(x) && acc.push(getOptionValue(x));
return acc;
}, []);
if (!isArrayWithLength(validValues)) {
return SELECTED_OPTION_DEFAULT;
}
const results = [];
const validValuesUniq = [...new Set(validValues)];
for (const option of menuOptions) {
if (validValuesUniq.includes(getOptionValue(option))) {
results.push(option);
if (validValuesUniq.length === results.length) {
break;
}
}
}
return results;
}
function normalizeValue(value, getOptionValue, getOptionLabel) {
const initialValues = Array.isArray(value) ? value.filter(Boolean) : isPlainObject(value) ? [value] : SELECTED_OPTION_DEFAULT;
if (!getOptionValue || !getOptionLabel || !isArrayWithLength(initialValues)) {
return initialValues;
}
return initialValues.map(initVal => ({
data: initVal,
value: getOptionValue(initVal),
label: getOptionLabel(initVal)
}));
}
const Option = /*#__PURE__*/React.memo(({
index,
style,
data: {
menuOptions,
selectOption,
renderOptionLabel,
focusedOptionIndex
}
}) => {
const {
data,
value,
label,
isDisabled,
isSelected
} = menuOptions[index];
const className = optionClassName(isDisabled, isSelected, index === focusedOptionIndex);
const onClickHandler = !isDisabled ? () => selectOption({
data,
value,
label
}, isSelected) : undefined;
return /*#__PURE__*/React.createElement("div", {
style: style,
className: className,
onClick: onClickHandler
}, renderOptionLabel(data));
}, areEqual);
Option.displayName = 'Option';
const NoOptionsMsg = styled.div`
text-align: center;
${({
theme: {
noOptions
}
}) => `
color: ${noOptions.color};
margin: ${noOptions.margin};
padding: ${noOptions.padding};
font-size: ${noOptions.fontSize};
${noOptions.css || ''}
`}
`;
const Menu = /*#__PURE__*/React.forwardRef(({
width,
height,
itemSize,
isLoading,
loadingMsg,
menuOptions,
selectOption,
noOptionsMsg,
overscanCount,
renderOptionLabel,
focusedOptionIndex
}, ref) => {
const itemData = useMemo(() => ({
menuOptions,
selectOption,
renderOptionLabel,
focusedOptionIndex
}), [menuOptions, focusedOptionIndex, selectOption, renderOptionLabel]);
if (isLoading) {
return /*#__PURE__*/React.createElement(NoOptionsMsg, null, loadingMsg);
}
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FixedSizeList, {
ref: ref,
width: width,
height: height,
itemSize: itemSize,
itemData: itemData,
overscanCount: overscanCount,
itemCount: menuOptions.length
}, Option), !isArrayWithLength(menuOptions) && /*#__PURE__*/React.createElement(NoOptionsMsg, null, noOptionsMsg));
});
Menu.displayName = 'Menu';
const MultiValueWrapper = styled.div`
min-width: 0;
display: flex;
animation: ${({
theme
}) => css`${theme.multiValue.animation}`};
${({
theme: {
multiValue
}
}) => `
margin: ${multiValue.margin};
border-radius: ${multiValue.borderRadius};
background-color: ${multiValue.backgroundColor};
${multiValue.css || ''}
`}
`;
const Label = styled.div`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
${({
theme: {
multiValue: {
label
}
}
}) => `
padding: ${label.padding};
font-size: ${label.fontSize};
border-radius: ${label.borderRadius};
`}
`;
const Clear = styled.div`
display: flex;
${({
isFocused,
theme: {
color,
multiValue: {
clear
}
}
}) => `
padding: ${clear.padding};
font-size: ${clear.fontSize};
transition: ${clear.transition};
align-items: ${clear.alignItems};
font-weight: ${clear.fontWeight};
border-radius: ${clear.borderRadius};
background-color: ${isFocused ? color.dangerLight : 'transparent'};
:hover {
color: ${color.danger};
background-color: ${color.dangerLight};
}
`}
`;
const MultiValue = ({
data,
value,
isFocused,
isTouchDevice,
renderOptionLabel,
removeSelectedOption
}) => /*#__PURE__*/React.createElement(MultiValueWrapper, null, /*#__PURE__*/React.createElement(Label, null, renderOptionLabel(data)), /*#__PURE__*/React.createElement(Clear, {
isFocused: isFocused,
"data-testid": CLEAR_ICON_MV_TESTID,
onMouseDown: e => removeSelectedOption(value, e),
onTouchEnd: isTouchDevice ? e => removeSelectedOption(value, e) : undefined
}, "X"));
const SingleValue = styled.div`
top: 50%;
overflow: hidden;
position: absolute;
white-space: nowrap;
box-sizing: border-box;
text-overflow: ellipsis;
transform: translateY(-50%);
max-width: calc(100% - 0.5rem);
`;
const Placeholder = styled.div`
top: 50%;
overflow: hidden;
position: absolute;
white-space: nowrap;
box-sizing: border-box;
text-overflow: ellipsis;
transform: translateY(-50%);
color: ${({
theme
}) => theme.color.placeholder};
`;
const Value = /*#__PURE__*/React.memo(({
isMulti,
inputValue,
placeholder,
isTouchDevice,
selectedOption,
focusedMultiValue,
renderOptionLabel,
renderMultiOptions,
removeSelectedOption
}) => {
if (inputValue && (!isMulti || isMulti && (!isArrayWithLength(selectedOption) || renderMultiOptions))) {
return null;
}
if (!isArrayWithLength(selectedOption)) {
return /*#__PURE__*/React.createElement(Placeholder, null, placeholder);
}
if (!isMulti) {
const optionLabel = renderOptionLabel(selectedOption[0].data);
return /*#__PURE__*/React.createElement(SingleValue, null, optionLabel);
}
return /*#__PURE__*/React.createElement(Fragment, null, renderMultiOptions ? renderMultiOptions({
selected: selectedOption,
renderOptionLabel
}) : selectedOption.map(({
data,
value
}) => /*#__PURE__*/React.createElement(MultiValue, {
key: value,
data: data,
value: value,
isTouchDevice: isTouchDevice,
renderOptionLabel: renderOptionLabel,
isFocused: value === focusedMultiValue,
removeSelectedOption: removeSelectedOption
})));
});
Value.displayName = 'Value';
const INPUT_MIN_WIDTH_PX = 2;
const STATIC_ATTRIBUTES = {
type: 'text',
spellCheck: false,
autoCorrect: 'off',
autoComplete: 'off',
autoCapitalize: 'none',
'aria-autocomplete': 'list',
'data-testid': AUTOSIZE_INPUT_TESTID
};
const SizerDiv = styled.div`
top: 0;
left: 0;
height: 0;
overflow: scroll;
white-space: pre;
position: absolute;
visibility: hidden;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
${({
theme
}) => theme.input.css}
`;
const Input = styled.input`
border: 0;
outline: 0;
padding: 0;
cursor: text;
background: 0;
color: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
box-sizing: content-box;
:read-only {
opacity: 0;
cursor: default;
}
${({
theme
}) => theme.input.css}
${isEdgeOrIE() && '::-ms-clear { display: none; }'}
`;
const AutosizeInput = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
id,
onBlur,
onFocus,
readOnly,
onChange,
ariaLabel,
inputValue,
addClassNames,
ariaLabelledBy
}, ref) => {
const sizerRef = useRef(null);
const [inputWidth, setInputWidth] = useState(INPUT_MIN_WIDTH_PX);
const autosizeInputAttrs = Object.assign({}, STATIC_ATTRIBUTES, {
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
'style': {
width: inputWidth
}
});
useEffect(() => {
if (sizerRef.current) {
setInputWidth(sizerRef.current.scrollWidth + INPUT_MIN_WIDTH_PX);
}
}, [inputValue]);
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Input, Object.assign({
id: id,
ref: ref,
onBlur: onBlur,
onFocus: onFocus,
value: inputValue,
readOnly: readOnly
}, autosizeInputAttrs, {
onChange: !readOnly ? onChange : undefined,
className: addClassNames ? AUTOSIZE_INPUT_CLS : undefined
})), /*#__PURE__*/React.createElement(SizerDiv, {
ref: sizerRef
}, inputValue));
}));
AutosizeInput.displayName = 'AutosizeInput';
const StyledLoadingDots = styled.div`
display: flex;
align-self: center;
text-align: center;
margin-right: 0.25rem;
padding: ${({
theme
}) => theme.loader.padding};
> div {
border-radius: 100%;
display: inline-block;
animation: ${({
theme
}) => css`${theme.loader.animation}`};
${({
theme: {
loader
}
}) => `
width: ${loader.size};
height: ${loader.size};
background-color: ${loader.color};
`}
:nth-of-type(1) {
animation-delay: -0.272s;
}
:nth-of-type(2) {
animation-delay: -0.136s;
}
}
`;
const LoadingDots = ({
addClassNames
}) => /*#__PURE__*/React.createElement(StyledLoadingDots, {
"aria-hidden": 'true',
className: addClassNames ? LOADING_DOTS_CLS : undefined
}, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null));
const IndicatorIconsWrapper = styled.div`
display: flex;
flex-shrink: 0;
align-items: center;
align-self: stretch;
box-sizing: border-box;
`;
const IndicatorIcon = styled.div`
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
${({
theme: {
icon
}
}) => `
color: ${icon.color};
padding: ${icon.padding};
:hover {
color: ${icon.hoverColor};
}
`}
${({
theme
}) => theme.icon.css}
`;
const ClearSVG = styled.svg`
fill: currentColor;
animation: ${({
theme
}) => css`${theme.icon.clear.animation}`};
${({
theme: {
icon: {
clear
}
}
}) => `
width: ${clear.width};
height: ${clear.height};
transition: ${clear.transition};
`}
`;
const Caret = styled.div`
${({
theme: {
icon: {
caret
}
}
}) => `
transition: ${caret.transition};
border-top: ${caret.size} dashed;
border-left: ${caret.size} solid transparent;
border-right: ${caret.size} solid transparent;
`}
${({
menuOpen,
isInvalid,
theme: {
color
}
}) => menuOpen && `
transform: rotate(180deg);
color: ${isInvalid ? color.danger : color.caretActive || color.primary};
`}
`;
const Separator = styled.div`
width: 1px;
margin: 0.5rem 0;
align-self: stretch;
box-sizing: border-box;
background-color: ${({
theme
}) => theme.color.iconSeparator || theme.color.border};
`;
const IndicatorIcons = /*#__PURE__*/React.memo(({
menuOpen,
clearIcon,
caretIcon,
isInvalid,
showClear,
isLoading,
isDisabled,
loadingNode,
isTouchDevice,
addClassNames,
onCaretMouseDown,
onClearMouseDown
}) => {
const forwardState = typeof caretIcon === 'function' || typeof clearIcon === 'function' ? {
menuOpen,
isLoading: !!isLoading,
isInvalid: !!isInvalid,
isDisabled: !!isDisabled
} : undefined;
const renderCustomIcon = iconProp => {
return typeof iconProp === 'function' ? iconProp(forwardState) : iconProp;
};
return /*#__PURE__*/React.createElement(IndicatorIconsWrapper, null, showClear && !isLoading && /*#__PURE__*/React.createElement(IndicatorIcon, {
onMouseDown: onClearMouseDown,
"data-testid": CLEAR_ICON_TESTID,
onTouchEnd: isTouchDevice ? onClearMouseDown : undefined
}, renderCustomIcon(clearIcon) || /*#__PURE__*/React.createElement(ClearSVG, {
"aria-hidden": 'true',
viewBox: '0 0 14 16',
className: addClassNames ? CLEAR_ICON_CLS : undefined
}, /*#__PURE__*/React.createElement("path", {
fillRule: 'evenodd',
d: 'M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z'
}))), isLoading && (loadingNode || /*#__PURE__*/React.createElement(LoadingDots, {
addClassNames: addClassNames
})), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(IndicatorIcon, {
onMouseDown: onCaretMouseDown,
"data-testid": CARET_ICON_TESTID,
onTouchEnd: isTouchDevice ? onCaretMouseDown : undefined
}, renderCustomIcon(caretIcon) || /*#__PURE__*/React.createElement(Caret, {
"aria-hidden": 'true',
menuOpen: menuOpen,
isInvalid: isInvalid,
className: addClassNames ? CARET_ICON_CLS : undefined
})));
});
IndicatorIcons.displayName = 'IndicatorIcons';
const A11yText = styled.span`
border: 0;
padding: 0;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
`;
const AriaLiveRegion = ({
menuOpen,
isFocused,
ariaLabel,
inputValue,
optionCount,
isSearchable,
focusedOption,
selectedOption
}) => {
if (!isFocused) {
return null;
}
const {
value: focusedOptionValue,
label: focusedOptionLabel,
index: focusedOptionIndex,
isDisabled: isFocusedOptionDisabled
} = focusedOption;
const selectedOptionLabel = isArrayWithLength(selectedOption) ? selectedOption.map(({
label
}) => label).join(' ') : 'N/A';
const selectedOptionMsg = `Selected option: ${selectedOptionLabel}`;
const optionsMsg = `${optionCount} result(s) available${inputValue ? ` for search input ${inputValue}` : ''}.`;
const focusedMsg = focusedOptionValue ? `Focused option: ${focusedOptionLabel}${isFocusedOptionDisabled ? ' - disabled' : ''}, ${focusedOptionIndex + 1} of ${optionCount}.` : '';
const menuMsg = menuOpen ? 'Use Up and Down arrow keys to choose options, press Enter or Tab to select the currently focused option, press Escape to close the menu.' : `${ariaLabel || 'Select'} is focused${isSearchable ? ', type to filter options' : ''}, press Down arrow key to open the menu.`;
return /*#__PURE__*/React.createElement(A11yText, {
"aria-live": 'polite',
"data-testid": ARIA_LIVE_TESTID
}, /*#__PURE__*/React.createElement("p", null, selectedOptionMsg), /*#__PURE__*/React.createElement("p", null, `${focusedMsg} ${optionsMsg} ${menuMsg}`));
};
var MenuPositionEnum;
(function (MenuPositionEnum) {
MenuPositionEnum["TOP"] = "top";
MenuPositionEnum["AUTO"] = "auto";
MenuPositionEnum["BOTTOM"] = "bottom";
})(MenuPositionEnum || (MenuPositionEnum = {}));
var FilterMatchEnum;
(function (FilterMatchEnum) {
FilterMatchEnum["ANY"] = "any";
FilterMatchEnum["START"] = "start";
})(FilterMatchEnum || (FilterMatchEnum = {}));
const ValueIndexEnum = {
NEXT: 0,
PREVIOUS: 1
};
const OptionIndexEnum = {
UP: 0,
DOWN: 1,
FIRST: 2,
LAST: 3
};
const useDebounce = (value, delay) => {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
if (delay === undefined) return;
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return delay === undefined ? value : debouncedValue;
};
const useMenuOptions = (options, debouncedInputValue, filterMatchFrom, selectedOption, getOptionValue, getOptionLabel, getIsOptionDisabled, getFilterOptionString, filterIgnoreCase, filterIgnoreAccents, isMulti, hideSelectedOptions, async) => {
const [menuOptions, setMenuOptions] = useState(OPTIONS_DEFAULT);
const searchValue = !async ? debouncedInputValue : '';
const hideSelectedOptionsOrDefault = typeof hideSelectedOptions !== 'boolean' ? !!isMulti : hideSelectedOptions;
useEffect(() => {
const matchAny = filterMatchFrom === FilterMatchEnum.ANY;
const normalizedInput = trimAndFormatFilterStr(searchValue, filterIgnoreCase, filterIgnoreAccents);
const selectedValues = selectedOption.length ? selectedOption.map(({
value
}) => value) : undefined;
const getIsOptionDisabledOrDefault = getIsOptionDisabled || (data => !!data.isDisabled);
const getFilterOptionStringOrDefault = getFilterOptionString || (option => typeof option.label === 'string' ? option.label : `${option.label}`);
const isOptionFilterMatch = menuOption => {
const optionStr = getFilterOptionStringOrDefault(menuOption);
const normalizedOptionLabel = trimAndFormatFilterStr(optionStr, filterIgnoreCase, filterIgnoreAccents);
return matchAny ? normalizedOptionLabel.indexOf(normalizedInput) > -1 : normalizedOptionLabel.substr(0, normalizedInput.length) === normalizedInput;
};
const parseMenuOption = data => {
const value = getOptionValue(data);
const menuOption = Object.assign({
data,
value,
label: getOptionLabel(data)
}, getIsOptionDisabledOrDefault(data) && {
isDisabled: true
}, selectedValues && selectedValues.includes(value) && {
isSelected: true
});
if (normalizedInput && !isOptionFilterMatch(menuOption) || hideSelectedOptionsOrDefault && menuOption.isSelected) {
return;
}
return menuOption;
};
const menuOptionsOrDefault = options.reduce((acc, data) => {
const option = parseMenuOption(data);
option && acc.push(option);
return acc;
}, []);
setMenuOptions(menuOptionsOrDefault);
}, [options, selectedOption, searchValue, hideSelectedOptionsOrDefault, filterMatchFrom, filterIgnoreCase, filterIgnoreAccents, getFilterOptionString, getIsOptionDisabled, getOptionValue, getOptionLabel]);
return menuOptions;
};
const useUpdateEffect = (effect, deps) => {
const isFirstRender = useRef(true);
useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
} else {
return effect();
}
}, deps);
};
const useIsTouchDevice = () => {
const isTouchDevice = useRef(null);
if (isTouchDevice.current === null) {
if (typeof navigator === 'undefined' || typeof window === 'undefined') {
isTouchDevice.current = false;
return isTouchDevice.current;
}
isTouchDevice.current = 'ontouchstart' in window || !!navigator.maxTouchPoints;
return isTouchDevice.current;
}
return isTouchDevice.current;
};
const useMenuPositioner = (menuRef, menuOpen, menuPosition, menuHeightDefault, menuScrollDuration, scrollMenuIntoView, onMenuOpen, onMenuClose) => {
const resetMenuHeightRef = useRef(false);
const isMenuTopPositionRef = useRef(false);
const [menuHeight, setMenuHeight] = useState(menuHeightDefault);
const [isMenuTopPosition, setIsMenuTopPosition] = useState(menuPosition === MenuPositionEnum.TOP);
useEffect(() => {
isMenuTopPositionRef.current = isMenuTopPosition;
}, [isMenuTopPosition]);
useEffect(() => {
const isTopPos = menuPosition === MenuPositionEnum.TOP || menuPosition === MenuPositionEnum.AUTO && !menuFitsBelowControl(menuRef.current);
setIsMenuTopPosition(isTopPos);
}, [menuRef, menuPosition]);
useUpdateEffect(() => {
if (menuOpen) {
const handleOnMenuOpen = availableSpace => {
onMenuOpen && onMenuOpen();
if (availableSpace) {
resetMenuHeightRef.current = true;
setMenuHeight(availableSpace);
}
};
!isMenuTopPositionRef.current ? scrollMenuIntoViewOnOpen(menuRef.current, menuScrollDuration, scrollMenuIntoView, handleOnMenuOpen) : handleOnMenuOpen();
} else {
onMenuClose && onMenuClose();
if (resetMenuHeightRef.current) {
resetMenuHeightRef.current = false;
setMenuHeight(menuHeightDefault);
}
}
}, [menuRef, menuOpen, onMenuClose, onMenuOpen, menuHeightDefault, scrollMenuIntoView, menuScrollDuration]);
return [menuHeight, isMenuTopPosition];
};
const SelectWrapper = styled.div`
position: relative;
box-sizing: border-box;
${({
theme
}) => theme.select.css}
`;
const ValueWrapper = styled.div`
flex: 1 1 0%;
display: flex;
flex-wrap: wrap;
overflow: hidden;
position: relative;
align-items: center;
box-sizing: border-box;
padding: ${({
theme
}) => theme.control.padding};
`;
const ControlWrapper = styled.div`
outline: 0;
display: flex;
flex-wrap: wrap;
cursor: default;
position: relative;
align-items: center;
box-sizing: border-box;
justify-content: space-between;
${({
isDisabled,
isFocused,
isInvalid,
theme: {
control,
color
}
}) => `
min-height: ${control.minHeight};
transition: ${control.transition};
border-style: ${control.borderStyle};
border-width: ${control.borderWidth};
border-radius: ${control.borderRadius};
border-color: ${isInvalid ? color.danger : isFocused ? control.focusedBorderColor : color.border};
${isDisabled ? 'pointer-events: none;' : ''}
${control.height ? `height: ${control.height};` : ''}
${control.backgroundColor || isDisabled ? `background-color: ${isDisabled ? color.disabled : control.backgroundColor};` : ''}
${isFocused ? `box-shadow: ${control.boxShadow} ${isInvalid ? color.dangerLight : control.boxShadowColor};` : ''}
${control.css || ''}
`}
`;
const MenuWrapper = styled.div`
z-index: 999;
cursor: default;
position: absolute;
${({
menuTop,
hideMenu,
theme: {
menu
}
}) => `
width: ${menu.width};
margin: ${menu.margin};
padding: ${menu.padding};
box-shadow: ${menu.boxShadow};
border-radius: ${menu.borderRadius};
background-color: ${menu.backgroundColor};
${hideMenu ? 'display: none;' : ''}
${menuTop ? `top: ${menuTop};` : ''}
`}
animation: ${({
theme
}) => css`${theme.menu.animation}`};
${({
theme
}) => theme.menu.css}
.${OPTION_CLS} {
display: block;
overflow: hidden;
user-select: none;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-tap-highlight-color: transparent;
${({
theme: {
menu: {
option
}
}
}) => `
padding: ${option.padding};
text-align: ${option.textAlign};
&.${OPTION_FOCUSED_CLS},
&:hover:not(.${OPTION_DISABLED_CLS}):not(.${OPTION_SELECTED_CLS}) {
background-color: ${option.focusedBgColor};
}
&.${OPTION_SELECTED_CLS} {
color: ${option.selectedColor};
background-color: ${option.selectedBgColor};
}
&.${OPTION_DISABLED_CLS} {
opacity: 0.35;
}
`}
}
`;
const Select = /*#__PURE__*/React.forwardRef(({
async,
isMulti,
inputId,
selectId,
autoFocus,
isLoading,
onKeyDown,
clearIcon,
caretIcon,
isInvalid,
ariaLabel,
menuWidth,
isDisabled,
inputDelay,
onMenuOpen,
onMenuClose,
onInputBlur,
isClearable,
themeConfig,
loadingNode,
initialValue,
onInputFocus,
onInputChange,
addClassNames,
ariaLabelledBy,
onOptionChange,
onSearchChange,
getOptionLabel,
getOptionValue,
openMenuOnFocus,
isAriaLiveEnabled,
menuOverscanCount,
blurInputOnSelect,
renderOptionLabel,
renderMultiOptions,
menuScrollDuration,
filterIgnoreAccents,
hideSelectedOptions,
getIsOptionDisabled,
getFilterOptionString,
isSearchable = true,
openMenuOnClick = true,
filterIgnoreCase = true,
tabSelectsOption = true,
closeMenuOnSelect = true,
scrollMenuIntoView = true,
backspaceClearsValue = true,
filterMatchFrom = FilterMatchEnum.ANY,
menuPosition = MenuPositionEnum.BOTTOM,
options = OPTIONS_DEFAULT,
loadingMsg = LOADING_MSG_DEFAULT,
placeholder = PLACEHOLDER_DEFAULT,
noOptionsMsg = NO_OPTIONS_MSG_DEFAULT,
menuItemSize = MENU_ITEM_SIZE_DEFAULT,
menuMaxHeight = MENU_MAX_HEIGHT_DEFAULT
}, ref) => {
const prevMenuOptionsLength = useRef();
const onChangeEventValue = useRef(false);
const listRef = useRef(null);
const menuRef = useRef(null);
const inputRef = useRef(null);
const controlRef = useRef(null);
const isTouchDevice = useIsTouchDevice();
const blurInputOnSelectOrTouch = typeof blurInputOnSelect === 'boolean' ? blurInputOnSelect : isTouchDevice;
const [inputValue, setInputValue] = useState('');
const [menuOpen, setMenuOpen] = useState(false);
const [isFocused, setIsFocused] = useState(false);
const [focusedOption, setFocusedOption] = useState(FOCUSED_OPTION_DEFAULT);
const [focusedMultiValue, setFocusedMultiValue] = useState(FOCUSED_MULTI_DEFAULT);
const theme = useMemo(() => {
return isPlainObject(themeConfig) ? mergeDeep(DefaultThemeObj, themeConfig) : DefaultThemeObj;
}, [themeConfig]);
const getOptionLabelFn = useMemo(() => getOptionLabel || (data => data.label), [getOptionLabel]);
const getOptionValueFn = useMemo(() => getOptionValue || (data => data.value), [getOptionValue]);
const renderOptionLabelFn = useMemo(() => renderOptionLabel || getOptionLabelFn, [renderOptionLabel, getOptionLabelFn]);
const debouncedInputValue = useDebounce(inputValue, inputDelay);
const [selectedOption, setSelectedOption] = useState(() => normalizeValue(initialValue, getOptionValueFn, getOptionLabelFn));
const [menuHeight, isMenuTopPosition] = useMenuPositioner(menuRef, menuOpen, menuPosition, menuMaxHeight, menuScrollDuration, scrollMenuIntoView, onMenuOpen, onMenuClose);
const menuOptions = useMenuOptions(options, debouncedInputValue, filterMatchFrom, selectedOption, getOptionValueFn, getOptionLabelFn, getIsOptionDisabled, getFilterOptionString, filterIgnoreCase, filterIgnoreAccents, isMulti, hideSelectedOptions, async);
const blurInput = () => {
inputRef.current.blur();
};
const focusInput = () => {
inputRef.current.focus();
};
const scrollToItemIndex = index => {
if (listRef.current) {
listRef.current.scrollToItem(index);
}
};
const removeSelectedOption = useCallback((removeValue, e) => {
if (e) {
e.stopPropagation();
e.type === MOUSE_DOWN_EVENT_TYPE && e.preventDefault();
}
setSelectedOption(prevSelectedOption => prevSelectedOption.filter(({
value
}) => value !== removeValue));
}, []);
const openMenuAndFocusOption = useCallback(position => {
if (!isArrayWithLength(menuOptions)) {
setMenuOpen(true);
return;
}
const selectedIndex = !isMulti ? menuOptions.findIndex(({
isSelected
}) => isSelected) : -1;
const index = selectedIndex > -1 ? selectedIndex : position === OptionIndexEnum.FIRST ? 0 : menuOptions.length - 1;
setMenuOpen(true);
setFocusedOption(Object.assign({
index
}, menuOptions[index]));
scrollToItemIndex(index);
}, [isMulti, menuOptions]);
const selectOption = useCallback((option, isSelected) => {
if (isSelected) {
isMulti && removeSelectedOption(option.value);
} else {
setSelectedOption(prevSelectedOption => !isMulti ? [option] : [...prevSelectedOption, option]);
}
if (blurInputOnSelectOrTouch) {
blurInput();
} else if (closeMenuOnSelect) {
setMenuOpen(false);
setInputValue('');
}
}, [isMulti, closeMenuOnSelect, removeSelectedOption, blurInputOnSelectOrTouch]);
useImperativeHandle(ref, () => ({
blur: blurInput,
focus: focusInput,
clearValue: () => {
setSelectedOption(SELECTED_OPTION_DEFAULT);
setFocusedOption(FOCUSED_OPTION_DEFAULT);
},
setValue: option => {
const validatedSelectedOption = validateSetValueParam(option, menuOptions, getOptionValueFn);
setSelectedOption(validatedSelectedOption);
},
toggleMenu: state => {
if (state === true || state === undefined && !menuOpen) {
!isFocused && focusInput();
openMenuAndFocusOption(OptionIndexEnum.FIRST);
} else {
blurInput();
}
}
}));
useEffect(() => {
autoFocus && focusInput();
}, [autoFocus]);
useEffect(() => {
if (isFocused && openMenuOnFocus) {
openMenuAndFocusOption(OptionIndexEnum.FIRST);
}
}, [isFocused, openMenuOnFocus, openMenuAndFocusOption]);
useEffect(() => {
if (onSearchChange && onChangeEventValue.current) {
onChangeEventValue.current = false;
onSearchChange(debouncedInputValue);
}
}, [onSearchChange, debouncedInputValue]);
useUpdateEffect(() => {
if (onOptionChange) {
const normalizedOptionValue = isMulti ? selectedOption.map(({
data
}) => data) : isArrayWithLength(selectedOption) ? selectedOption[0].data : ON_CHANGE_SINGLE_VALUE_DEFAULT;
onOptionChange(normalizedOptionValue);
}
}, [isMulti, selectedOption, onOptionChange]);
useUpdateEffect(() => {
const curLength = menuOptions.length;
const inputChanged = curLength > 0 && (async || curLength !== options.length || prevMenuOptionsLength.current === 0);
if (curLength === 0) {
setFocusedOption(FOCUSED_OPTION_DEFAULT);
} else if (curLength === 1 || inputChanged) {
setFocusedOption(Object.assign({
index: 0
}, menuOptions[0]));
scrollToItemIndex(0);
}
prevMenuOptionsLength.current = curLength;
}, [async, options, menuOptions]);
const selectOptionFromFocused = () => {
const {
data,
value,
label,
isSelected,
isDisabled: focOptionDisabled
} = focusedOption;
if (data && !focOptionDisabled) {
selectOption({
data,
value,
label
}, isSelected);
}
};
const focusValueOnArrowKey = direction => {
if (!isArrayWithLength(selectedOption)) return;
let nextFocusedIndex = -1;
const lastValueIndex = selectedOption.length - 1;
const curFocusedIndex = focusedMultiValue ? selectedOption.findIndex(({
value
}) => value === focusedMultiValue) : -1;
switch (direction) {
case ValueIndexEnum.NEXT:
nextFocusedIndex = curFocusedIndex > -1 && curFocusedIndex < lastValueIndex ? curFocusedIndex + 1 : -1;
break;
case ValueIndexEnum.PREVIOUS:
nextFocusedIndex = curFocusedIndex !== 0 ? curFocusedIndex === -1 ? lastValueIndex : curFocusedIndex - 1 : 0;
break;
}
const nextFocusedVal = nextFocusedIndex >= 0 ? selectedOption[nextFocusedIndex].value : FOCUSED_MULTI_DEFAULT;
if (focusedOption.data) setFocusedOption(FOCUSED_OPTION_DEFAULT);
if (nextFocusedVal !== focusedMultiValue) setFocusedMultiValue(nextFocusedVal);
};
const focusOptionOnArrowKey = direction => {
if (!isArrayWithLength(menuOptions)) return;
const index = direction === OptionIndexEnum.DOWN ? (focusedOption.index + 1) % menuOptions.length : focusedOption.index > 0 ? focusedOption.index - 1 : menuOptions.length - 1;
focusedMultiValue && setFocusedMultiValue(FOCUSED_MULTI_DEFAULT);
setFocusedOption(Object.assign({
index
}, menuOptions[index]));
scrollToItemIndex(index);
};
const handleOnKeyDown = e => {
if (isDisabled) return;
if (onKeyDown) {
onKeyDown(e);
if (e.defaultPrevented) return;
}
switch (e.key) {
case 'ArrowDown':
menuOpen ? focusOptionOnArrowKey(OptionIndexEnum.DOWN) : openMenuAndFocusOption(OptionIndexEnum.FIRST);
break;
case 'ArrowUp':
menuOpen ? focusOptionOnArrowKey(OptionIndexEnum.UP) : openMenuAndFocusOption(OptionIndexEnum.LAST);
break;
case 'ArrowLeft':
if (!isMulti || inputValue || renderMultiOptions) return;
focusValueOnArrowKey(ValueIndexEnum.PREVIOUS);
break;
case 'ArrowRight':
if (!isMulti || inputValue || renderMultiOptions) return;
focusValueOnArrowKey(ValueIndexEnum.NEXT);
break;
case ' ':
if (inputValue) {
return;
} else if (!menuOpen) {
openMenuAndFocusOption(OptionIndexEnum.FIRST);
break;
} else if (!focusedOption.data) {
return;
}
selectOptionFromFocused();
break;
case 'Enter':
if (menuOpen && e.keyCode !== IME_KEY_CODE) {
selectOptionFromFocused();
}
break;
case 'Escape':
if (menuOpen) {
setMenuOpen(false);
setInputValue('');
}
break;
case 'Tab':
if (!menuOpen || !tabSelectsOption || !focusedOption.data || e.shiftKey) {
return;
}
selectOptionFromFocused();
break;
case 'Delete':
case 'Backspace':
if (inputValue) return;
if (focusedMultiValue) {
const clearFocusedIndex = selectedOption.findIndex(({
value
}) => value === focusedMultiValue);
const nexFocusedMultiValue = clearFocusedIndex > -1 && clearFocusedIndex < selectedOption.length - 1 ? selectedOption[clearFocusedIndex + 1].value : FOCUSED_MULTI_DEFAULT;
removeSelectedOption(focusedMultiValue);
setFocusedMultiValue(nexFocusedMultiValue);
} else {
if (!backspaceClearsValue) return;
if (isArrayWithLength(selectedOption)) {
if (isMulti && !renderMultiOptions) {
const {
value
} = selectedOption[selectedOption.length - 1];
removeSelectedOption(value);
} else if (isClearable) {
setSelectedOption(SELECTED_OPTION_DEFAULT);
}
}
}
break;
default:
return;
}
e.preventDefault();
};
const handleOnControlMouseDown = e => {
if (isDisabled) return;
if (!isFocused) focusInput();
const tagNameNotInput = e.currentTarget.tagName !== 'INPUT';
if (!menuOpen) {
openMenuOnClick && openMenuAndFocusOption(OptionIndexEnum.FIRST);
} else if (tagNameNotInput) {
setMenuOpen(false);
inputValue && setInputValue('');
}
if (tagNameNotInput) {
e.preventDefault();
}
};
const handleOnMenuMouseDown = e => {
e.stopPropagation();
e.preventDefault();
focusInput();
};
const handleOnInputBlur = useCallback(e => {
onInputBlur && onInputBlur(e);
setIsFocused(false);
setMenuOpen(false);
setInputValue('');
}, [onInputBlur]);
const handleOnInputFocus = useCallback(e => {
onInputFocus && onInputFocus(e);
setIsFocused(true);
}, [onInputFocus]);
const handleOnInputChange = useCallback(e => {
onChangeEventValue.current = true;
onInputChange && onInputChange(e.currentTarget.value || '');
setMenuOpen(true);
setInputValue(e.currentTarget.value || '');
}, [onInputChange]);
const handleOnClearMouseDown = useCallback(e => {
e.stopPropagation();
e.type === MOUSE_DOWN_EVENT_TYPE && e.preventDefault();
setSelectedOption(SELECTED_OPTION_DEFAULT);
focusInput();
}, []);
const handleOnCaretMouseDown = useCallback(e => {
e.stopPropagation();
if (e.type === MOUSE_DOWN_EVENT_TYPE) {
e.preventDefault();
}
focusInput();
menuOpen ? setMenuOpen(false) : openMenuAndFocusOption(OptionIndexEnum.FIRST);
}, [menuOpen, openMenuAndFocusOption]);
const calcMenuHeight = Math.min(menuHeight, menuOptions.length * menuItemSize);
const getMenuStyleTop = () => isMenuTopPosition ? calculateMenuTop(calcMenuHeight, menuRef.current, controlRef.current) : undefined;
return /*#__PURE__*/React.createElement(ThemeProvider, {
theme: theme
}, /*#__PURE__*/React.createElement(SelectWrapper, {
id: selectId,
role: 'combobox',
"aria-haspopup": 'listbox',
"aria-controls": inputId,
onKeyDown: handleOnKeyDown,
"data-testid": SELECT_CONTAINER_TESTID,
"aria-expanded": menuOpen ? 'true' : 'false',
className: addClassNames ? SELECT_CONTAINER_CLS : undefined
}, /*#__PURE__*/React.createElement(ControlWrapper, {
ref: controlRef,
isInvalid: isInvalid,
isFocused: isFocused,
isDisabled: isDisabled,
onMouseDown: handleOnControlMouseDown,
"data-testid": CONTROL_CONTAINER_TESTID,
className: addClassNames ? CONTROL_CONTAINER_CLS : undefined,
onTouchEnd: isTouchDevice ? handleOnControlMouseDown : undefined
}, /*#__PURE__*/React.createElement(ValueWrapper, null, /*#__PURE__*/React.createElement(Value, {
isMulti: isMulti,
inputValue: inputValue,
placeholder: placeholder,
isTouchDevice: isTouchDevice,
selectedOption: selectedOption,
focusedMultiValue: focusedMultiValue,
renderOptionLabel: renderOptionLabelFn,
renderMultiOptions: renderMultiOptions,
removeSelectedOption: removeSelectedOption
}), /*#__PURE__*/React.createElement(AutosizeInput, {
id: inputId,
ref: inputRef,
ariaLabel: ariaLabel,
inputValue: inputValue,
onBlur: handleOnInputBlur,
onFocus: handleOnInputFocus,
addClassNames: addClassNames,
onChange: handleOnInputChange,
ariaLabelledBy: ariaLabelledBy,
readOnly: isDisabled || !isSearchable || !!focusedMultiValue
})), /*#__PURE__*/React.createElement(IndicatorIcons, {
menuOpen: menuOpen,
clearIcon: clearIcon,
caretIcon: caretIcon,
isInvalid: isInvalid,
isLoading: isLoading,
isDisabled: isDisabled,
loadingNode: loadingNode,
addClassNames: addClassNames,
isTouchDevice: isTouchDevice,
onClearMouseDown: handleOnClearMouseDown,
showClear: !!(isClearable && !isDisabled && isArrayWithLength(selectedOption)),
onCaretMouseDown: !isDisabled && !openMenuOnClick ? handleOnCaretMouseDown : undefined
})), /*#__PURE__*/React.createElement(MenuWrapper, {
ref: menuRef,
hideMenu: !menuOpen,
menuTop: getMenuStyleTop(),
onMouseDown: handleOnMenuMouseDown,
"data-testid": MENU_CONTAINER_TESTID,
className: addClassNames ? MENU_CONTAINER_CLS : undefined
}, /*#__PURE__*/React.createElement(Menu, {
ref: listRef,
isLoading: isLoading,
height: calcMenuHeight,
itemSize: menuItemSize,
loadingMsg: loadingMsg,
menuOptions: menuOptions,
noOptionsMsg: noOptionsMsg,
selectOption: selectOption,
overscanCount: menuOverscanCount,
width: menuWidth || theme.menu.width,
renderOptionLabel: renderOptionLabelFn,
focusedOptionIndex: focusedOption.index
})), isAriaLiveEnabled && /*#__PURE__*/React.createElement(AriaLiveRegion, {
menuOpen: menuOpen,
isFocused: isFocused,
ariaLabel: ariaLabel,
inputValue: inputValue,
isSearchable: isSearchable,
focusedOption: focusedOption,
selectedOption: selectedOption,
optionCount: menuOptions.length
})));
});
Select.displayName = 'Select';
export { FilterMatchEnum, MenuPositionEnum, Select };
import e,{useMemo as n,Fragment as t,useRef as o,useState as i,useEffect as r,useCallback as a,useImperativeHandle as l}from"react";import s,{keyframes as d,css as c,ThemeProvider as u}from"styled-components";import{areEqual as p,FixedSizeList as m}from"react-window";const f=d(["0%,80%,100%{transform:scale(0);}40%{transform:scale(1.0);}"]),g=d(["from{opacity:0;}to{opacity:1;}"]),h=c([""," 1.19s ease-in-out infinite"],f),b=c([""," 0.225s ease-in-out forwards"],g);var v=Object.freeze({color:{border:"#ced4da",danger:"#dc3545",primary:"#007bff",disabled:"#e9ecef",placeholder:"#6E7276",dangerLight:"rgba(220, 53, 69, 0.25)"},input:{},select:{},loader:{size:"0.625rem",padding:"0.375rem 0.75rem",animation:h,color:"rgba(0, 123, 255, 0.42)"},icon:{color:"#cccccc",hoverColor:"#A6A6A6",padding:"0 0.9375rem",clear:{width:"14px",height:"16px",animation:b,transition:"color 0.15s ease-in-out"},caret:{size:"7px",transition:"transform 0.25s ease-in-out, color 0.15s ease-in-out"}},control:{minHeight:"38px",borderWidth:"1px",borderStyle:"solid",borderRadius:"0.25rem",boxShadow:"0 0 0 0.2rem",padding:"0.375rem 0.75rem",boxShadowColor:"rgba(0, 123, 255, 0.25)",focusedBorderColor:"rgba(0, 123, 255, 0.75)",transition:"box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out"},menu:{width:"100%",margin:"0.5rem 0",padding:"0.15rem 0",borderRadius:"0.25rem",backgroundColor:"#fff",animation:b,boxShadow:"0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 11px rgba(0, 0, 0, 0.1)",option:{textAlign:"left",selectedColor:"#fff",selectedBgColor:"#007bff",padding:"0.375rem 0.75rem",focusedBgColor:"rgba(0, 123, 255, 0.20)"}},noOptions:{fontSize:"1.25rem",margin:"0.25rem 0",color:"hsl(0, 0%, 60%)",padding:"0.375rem 0.75rem"},multiValue:{margin:"1px 2px",borderRadius:"0.25rem",backgroundColor:"#e7edf3",animation:b,label:{fontSize:"0.825em",borderRadius:"0.25rem",padding:"1px 2px 1px 6px"},clear:{fontWeight:700,padding:"0 7px",fontSize:"0.67em",alignItems:"center",borderRadius:"0.25rem",transition:"color 0.15s ease-in-out, background-color 0.15s ease-in-out"}}});const w=[],y=[],$={index:-1},x=/(auto|scroll)/,C=/[\u0300-\u036f]/g,O=/(MSIE|Trident\/|Edge\/|Edg\/)/i,I="test"===process.env.NODE_ENV,E=I?"rfs-aria-live":void 0,N=I?"rfs-clear-icon":void 0,S=I?"rfs-caret-icon":void 0,k=I?"rfs-autosize-input":void 0,z=I?"rfs-menu-container":void 0,D=I?"rfs-clear-icon-mv":void 0,M=I?"rfs-select-container":void 0,T=I?"rfs-control-container":void 0;function L(e){return e===document.documentElement||e===document.body||e===window}function A(e){return L(e)?window.pageYOffset:e.scrollTop}function B(e){let n=getComputedStyle(e);const t="absolute"===n.position;if("fixed"===n.position)return document.documentElement;for(let o=e;o=o?o.parentElement:null;)if(n=getComputedStyle(o),(!t||"static"!==n.position)&&x.test(`${n.overflow}${n.overflowY}${n.overflowX}`))return o;return document.documentElement}function V(e,n,t=300,o){let i=0;const r=A(e),a=n-r;window.requestAnimationFrame((function n(){i+=5;const l=a*((s=(s=i)/t-1)*s*s+1)+r;var s;!function(e,n){L(e)?window.scrollTo(0,n):e.scrollTop=n}(e,l),i<t?window.requestAnimationFrame(n):o&&o()}))}function R(e){return Array.isArray(e)&&!!e.length}function F(e){return e&&"object"==typeof e&&!Array.isArray(e)}function j(e,n,t){let o=e.trim();return n&&(o=o.toLowerCase()),t?function(e){return e.normalize("NFD").replace(C,"")}(o):o}function P(e,n,t){const o=Array.isArray(e)?e.filter(Boolean):F(e)?[e]:y;return n&&t&&R(o)?o.map(e=>({data:e,value:n(e),label:t(e)})):o}const W=e.memo(({index:n,style:t,data:{menuOptions:o,selectOption:i,renderOptionLabel:r,focusedOptionIndex:a}})=>{const{data:l,value:s,label:d,isDisabled:c,isSelected:u}=o[n],p=function(e,n,t){let o="rfs-option";return e&&(o+=" rfs-option-disabled"),n&&(o+=" rfs-option-selected"),t&&(o+=" rfs-option-focused"),o}(c,u,n===a),m=c?void 0:()=>i({data:l,value:s,label:d},u);return e.createElement("div",{style:t,className:p,onClick:m},r(l))},p);W.displayName="Option";const Y=s.div.withConfig({displayName:"NoOptionsMsg",componentId:"sc-mcprzj"})`text-align:center;${({theme:{noOptions:e}})=>`\n color: ${e.color};\n margin: ${e.margin};\n padding: ${e.padding};\n font-size: ${e.fontSize};\n ${e.css||""}\n `}`,q=e.forwardRef(({width:o,height:i,itemSize:r,isLoading:a,loadingMsg:l,menuOptions:s,selectOption:d,noOptionsMsg:c,overscanCount:u,renderOptionLabel:p,focusedOptionIndex:f},g)=>{const h=n(()=>({menuOptions:s,selectOption:d,renderOptionLabel:p,focusedOptionIndex:f}),[s,f,d,p]);return a?e.createElement(Y,null,l):e.createElement(t,null,e.createElement(m,{ref:g,width:o,height:i,itemSize:r,itemData:h,overscanCount:u,itemCount:s.length},W),!R(s)&&e.createElement(Y,null,c))});q.displayName="Menu";const U=s.div.withConfig({displayName:"MultiValueWrapper",componentId:"sc-qgkr0l"})`min-width:0;display:flex;animation:${({theme:e})=>c(["",""],e.multiValue.animation)};${({theme:{multiValue:e}})=>`\n margin: ${e.margin};\n border-radius: ${e.borderRadius};\n background-color: ${e.backgroundColor};\n ${e.css||""}\n `}`,H=s.div.withConfig({displayName:"Label",componentId:"sc-18i6dc"})`overflow:hidden;white-space:nowrap;text-overflow:ellipsis;${({theme:{multiValue:{label:e}}})=>`\n padding: ${e.padding};\n font-size: ${e.fontSize};\n border-radius: ${e.borderRadius};\n `}`,K=s.div.withConfig({displayName:"Clear",componentId:"sc-1j1biyk"})`display:flex;${({isFocused:e,theme:{color:n,multiValue:{clear:t}}})=>`\n padding: ${t.padding};\n font-size: ${t.fontSize};\n transition: ${t.transition};\n align-items: ${t.alignItems};\n font-weight: ${t.fontWeight};\n border-radius: ${t.borderRadius};\n background-color: ${e?n.dangerLight:"transparent"};\n :hover {\n color: ${n.danger};\n background-color: ${n.dangerLight};\n }\n `}`,X=({data:n,value:t,isFocused:o,isTouchDevice:i,renderOptionLabel:r,removeSelectedOption:a})=>e.createElement(U,null,e.createElement(H,null,r(n)),e.createElement(K,{isFocused:o,"data-testid":D,onMouseDown:e=>a(t,e),onTouchEnd:i?e=>a(t,e):void 0},"X")),_=s.div.withConfig({displayName:"SingleValue",componentId:"sc-1oju30n"})`top:50%;overflow:hidden;position:absolute;white-space:nowrap;box-sizing:border-box;text-overflow:ellipsis;transform:translateY(-50%);max-width:calc(100% - 0.5rem);`,G=s.div.withConfig({displayName:"Placeholder",componentId:"sc-1676tqj"})`top:50%;overflow:hidden;position:absolute;white-space:nowrap;box-sizing:border-box;text-overflow:ellipsis;transform:translateY(-50%);color:${({theme:e})=>e.color.placeholder};`,J=e.memo(({isMulti:n,inputValue:o,placeholder:i,isTouchDevice:r,selectedOption:a,focusedMultiValue:l,renderOptionLabel:s,renderMultiOptions:d,removeSelectedOption:c})=>{if(o&&(!n||n&&(!R(a)||d)))return null;if(!R(a))return e.createElement(G,null,i);if(!n){const n=s(a[0].data);return e.createElement(_,null,n)}return e.createElement(t,null,d?d({selected:a,renderOptionLabel:s}):a.map(({data:n,value:t})=>e.createElement(X,{key:t,data:n,value:t,isTouchDevice:r,renderOptionLabel:s,isFocused:t===l,removeSelectedOption:c})))});J.displayName="Value";const Q={type:"text",spellCheck:!1,autoCorrect:"off",autoComplete:"off",autoCapitalize:"none","aria-autocomplete":"list","data-testid":k},Z=s.div.withConfig({displayName:"SizerDiv",componentId:"sc-1z0swd1"})`top:0;left:0;height:0;overflow:scroll;white-space:pre;position:absolute;visibility:hidden;font-size:inherit;font-weight:inherit;font-family:inherit;${({theme:e})=>e.input.css}`,ee=s.input.withConfig({displayName:"Input",componentId:"sc-1kosmhe"})`border:0;outline:0;padding:0;cursor:text;background:0;color:inherit;font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:content-box;:read-only{opacity:0;cursor:default;}${({theme:e})=>e.input.css} ${"undefined"!=typeof navigator&&O.test(navigator.userAgent)&&"::-ms-clear{display:none;}"}`,ne=e.memo(e.forwardRef(({id:n,onBlur:a,onFocus:l,readOnly:s,onChange:d,ariaLabel:c,inputValue:u,addClassNames:p,ariaLabelledBy:m},f)=>{const g=o(null),[h,b]=i(2),v=Object.assign({},Q,{"aria-label":c,"aria-labelledby":m,style:{width:h}});return r(()=>{g.current&&b(g.current.scrollWidth+2)},[u]),e.createElement(t,null,e.createElement(ee,Object.assign({id:n,ref:f,onBlur:a,onFocus:l,value:u,readOnly:s},v,{onChange:s?void 0:d,className:p?"rfs-autosize-input":void 0})),e.createElement(Z,{ref:g},u))}));ne.displayName="AutosizeInput";const te=s.div.withConfig({displayName:"StyledLoadingDots",componentId:"sc-6y8z83"})`display:flex;align-self:center;text-align:center;margin-right:0.25rem;padding:${({theme:e})=>e.loader.padding};> div{border-radius:100%;display:inline-block;animation:${({theme:e})=>c(["",""],e.loader.animation)};${({theme:{loader:e}})=>`\n width: ${e.size};\n height: ${e.size};\n background-color: ${e.color};\n `}:nth-of-type(1){animation-delay:-0.272s;}:nth-of-type(2){animation-delay:-0.136s;}}`,oe=({addClassNames:n})=>e.createElement(te,{"aria-hidden":"true",className:n?"rfs-loading-dots":void 0},e.createElement("div",null),e.createElement("div",null),e.createElement("div",null)),ie=s.div.withConfig({displayName:"IndicatorIconsWrapper",componentId:"sc-j1n2s1"})`display:flex;flex-shrink:0;align-items:center;align-self:stretch;box-sizing:border-box;`,re=s.div.withConfig({displayName:"IndicatorIcon",componentId:"sc-95nhz3"})`height:100%;display:flex;align-items:center;box-sizing:border-box;${({theme:{icon:e}})=>`\n color: ${e.color};\n padding: ${e.padding};\n :hover {\n color: ${e.hoverColor};\n }\n `} ${({theme:e})=>e.icon.css}`,ae=s.svg.withConfig({displayName:"ClearSvg",componentId:"sc-1a76zwu"})`fill:currentColor;animation:${({theme:e})=>c(["",""],e.icon.clear.animation)};${({theme:{icon:{clear:e}}})=>`\n width: ${e.width};\n height: ${e.height};\n transition: ${e.transition};\n `}`,le=s.div.withConfig({displayName:"Caret",componentId:"sc-1wsfe6u"})`${({theme:{icon:{caret:e}}})=>`\n transition: ${e.transition};\n border-top: ${e.size} dashed;\n border-left: ${e.size} solid transparent;\n border-right: ${e.size} solid transparent;\n `} ${({menuOpen:e,isInvalid:n,theme:{color:t}})=>e&&`\n transform: rotate(180deg);\n color: ${n?t.danger:t.caretActive||t.primary};\n `}`,se=s.div.withConfig({displayName:"Separator",componentId:"sc-m89sf0"})`width:1px;margin:0.5rem 0;align-self:stretch;box-sizing:border-box;background-color:${({theme:e})=>e.color.iconSeparator||e.color.border};`,de=e.memo(({menuOpen:n,clearIcon:t,caretIcon:o,isInvalid:i,showClear:r,isLoading:a,isDisabled:l,loadingNode:s,isTouchDevice:d,addClassNames:c,onCaretMouseDown:u,onClearMouseDown:p})=>{const m="function"==typeof o||"function"==typeof t?{menuOpen:n,isLoading:!!a,isInvalid:!!i,isDisabled:!!l}:void 0,f=e=>"function"==typeof e?e(m):e;return e.createElement(ie,null,r&&!a&&e.createElement(re,{onMouseDown:p,"data-testid":N,onTouchEnd:d?p:void 0},f(t)||e.createElement(ae,{"aria-hidden":"true",viewBox:"0 0 14 16",className:c?"rfs-clear-icon":void 0},e.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"}))),a&&(s||e.createElement(oe,{addClassNames:c})),e.createElement(se,null),e.createElement(re,{onMouseDown:u,"data-testid":S,onTouchEnd:d?u:void 0},f(o)||e.createElement(le,{"aria-hidden":"true",menuOpen:n,isInvalid:i,className:c?"rfs-caret-icon":void 0})))});de.displayName="IndicatorIcons";const ce=s.span.withConfig({displayName:"A11yText",componentId:"sc-1uzhrak"})`border:0;padding:0;width:1px;height:1px;margin:-1px;overflow:hidden;position:absolute;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);`,ue=({menuOpen:n,isFocused:t,ariaLabel:o,inputValue:i,optionCount:r,isSearchable:a,focusedOption:l,selectedOption:s})=>{if(!t)return null;const{value:d,label:c,index:u,isDisabled:p}=l,m="Selected option: "+(R(s)?s.map(({label:e})=>e).join(" "):"N/A"),f=`${r} result(s) available${i?" for search input "+i:""}.`,g=d?`Focused option: ${c}${p?" - disabled":""}, ${u+1} of ${r}.`:"",h=n?"Use Up and Down arrow keys to choose options, press Enter or Tab to select the currently focused option, press Escape to close the menu.":`${o||"Select"} is focused${a?", type to filter options":""}, press Down arrow key to open the menu.`;return e.createElement(ce,{"aria-live":"polite","data-testid":E},e.createElement("p",null,m),e.createElement("p",null,`${g} ${f} ${h}`))};var pe,me;!function(e){e.TOP="top",e.AUTO="auto",e.BOTTOM="bottom"}(pe||(pe={})),function(e){e.ANY="any",e.START="start"}(me||(me={}));const fe=0,ge=1,he=0,be=1,ve=2,we=3,ye=(e,n,t,o,a,l,s,d,c,u,p,m,f)=>{const[g,h]=i(w),b=f?"":n,v="boolean"!=typeof m?!!p:m;return r(()=>{const n=t===me.ANY,i=j(b,c,u),r=o.length?o.map(({value:e})=>e):void 0,p=s||(e=>!!e.isDisabled),m=d||(e=>"string"==typeof e.label?e.label:""+e.label),f=e=>{const t=a(e),o=Object.assign({data:e,value:t,label:l(e)},p(e)&&{isDisabled:!0},r&&r.includes(t)&&{isSelected:!0});if(!(i&&!(e=>{const t=j(m(e),c,u);return n?t.indexOf(i)>-1:t.substr(0,i.length)===i})(o)||v&&o.isSelected))return o},g=e.reduce((e,n)=>{const t=f(n);return t&&e.push(t),e},[]);h(g)},[e,o,b,v,t,c,u,d,s,a,l]),g},$e=(e,n)=>{const t=o(!0);r(()=>{if(!t.current)return e();t.current=!1},n)},xe=(e,n,t,a,l,s,d,c)=>{const u=o(!1),p=o(!1),[m,f]=i(a),[g,h]=i(t===pe.TOP);return r(()=>{p.current=g},[g]),r(()=>{const n=t===pe.TOP||t===pe.AUTO&&!function(e){if(!e)return!0;const n=e.getBoundingClientRect(),t=B(e),o=A(t);return t.getBoundingClientRect().height-o-n.top>=n.height}(e.current);h(n)},[e,t]),$e(()=>{if(n){const n=e=>{d&&d(),e&&(u.current=!0,f(e))};p.current?n():function(e,n,t,o){if(!e)return void o();const i=window.innerHeight,r=e.getBoundingClientRect();if(i-r.top>=r.height)return void o();const a=B(e),l=A(a),s=a.getBoundingClientRect().height-l-r.top,d=s<r.height;if(d||!t){return void o(d?s:void 0)}const c=parseInt(getComputedStyle(e).marginBottom||"0",10);V(a,r.bottom-i+l+c,n,o)}(e.current,l,s,n)}else c&&c(),u.current&&(u.current=!1,f(a))},[e,n,c,d,a,s,l]),[m,g]},Ce=s.div.withConfig({displayName:"SelectWrapper",componentId:"sc-16q6iuz"})`position:relative;box-sizing:border-box;${({theme:e})=>e.select.css}`,Oe=s.div.withConfig({displayName:"ValueWrapper",componentId:"sc-yuq4ck"})`flex:1 1 0%;display:flex;flex-wrap:wrap;overflow:hidden;position:relative;align-items:center;box-sizing:border-box;padding:${({theme:e})=>e.control.padding};`,Ie=s.div.withConfig({displayName:"ControlWrapper",componentId:"sc-b0802r"})`outline:0;display:flex;flex-wrap:wrap;cursor:default;position:relative;align-items:center;box-sizing:border-box;justify-content:space-between;${({isDisabled:e,isFocused:n,isInvalid:t,theme:{control:o,color:i}})=>`\n min-height: ${o.minHeight};\n transition: ${o.transition};\n border-style: ${o.borderStyle};\n border-width: ${o.borderWidth};\n border-radius: ${o.borderRadius};\n border-color: ${t?i.danger:n?o.focusedBorderColor:i.border};\n ${e?"pointer-events: none;":""}\n ${o.height?`height: ${o.height};`:""}\n ${o.backgroundColor||e?`background-color: ${e?i.disabled:o.backgroundColor};`:""}\n ${n?`box-shadow: ${o.boxShadow} ${t?i.dangerLight:o.boxShadowColor};`:""}\n ${o.css||""}\n `}`,Ee=s.div.withConfig({displayName:"MenuWrapper",componentId:"sc-1wen7ck"})`z-index:999;cursor:default;position:absolute;${({menuTop:e,hideMenu:n,theme:{menu:t}})=>`\n width: ${t.width};\n margin: ${t.margin};\n padding: ${t.padding};\n box-shadow: ${t.boxShadow};\n border-radius: ${t.borderRadius};\n background-color: ${t.backgroundColor};\n ${n?"display: none;":""}\n ${e?`top: ${e};`:""}\n `} animation:${({theme:e})=>c(["",""],e.menu.animation)};${({theme:e})=>e.menu.css} .${"rfs-option"}{display:block;overflow:hidden;user-select:none;white-space:nowrap;text-overflow:ellipsis;-webkit-tap-highlight-color:transparent;${({theme:{menu:{option:e}}})=>`\n padding: ${e.padding};\n text-align: ${e.textAlign};\n\n &.rfs-option-focused,\n &:hover:not(.rfs-option-disabled):not(.rfs-option-selected) {\n background-color: ${e.focusedBgColor};\n }\n\n &.rfs-option-selected {\n color: ${e.selectedColor};\n background-color: ${e.selectedBgColor};\n }\n\n &.rfs-option-disabled {\n opacity: 0.35;\n }\n `}}`,Ne=e.forwardRef(({async:t,isMulti:s,inputId:d,selectId:c,autoFocus:p,isLoading:m,onKeyDown:f,clearIcon:g,caretIcon:h,isInvalid:b,ariaLabel:x,menuWidth:C,isDisabled:O,inputDelay:I,onMenuOpen:E,onMenuClose:N,onInputBlur:S,isClearable:k,themeConfig:D,loadingNode:L,initialValue:A,onInputFocus:B,onInputChange:V,addClassNames:j,ariaLabelledBy:W,onOptionChange:Y,onSearchChange:U,getOptionLabel:H,getOptionValue:K,openMenuOnFocus:X,isAriaLiveEnabled:_,menuOverscanCount:G,blurInputOnSelect:Q,renderOptionLabel:Z,renderMultiOptions:ee,menuScrollDuration:te,filterIgnoreAccents:oe,hideSelectedOptions:ie,getIsOptionDisabled:re,getFilterOptionString:ae,isSearchable:le=!0,openMenuOnClick:se=!0,filterIgnoreCase:ce=!0,tabSelectsOption:Ne=!0,closeMenuOnSelect:Se=!0,scrollMenuIntoView:ke=!0,backspaceClearsValue:ze=!0,filterMatchFrom:De=me.ANY,menuPosition:Me=pe.BOTTOM,options:Te=w,loadingMsg:Le="Loading...",placeholder:Ae="Select option...",noOptionsMsg:Be="No options",menuItemSize:Ve=35,menuMaxHeight:Re=300},Fe)=>{const je=o(),Pe=o(!1),We=o(null),Ye=o(null),qe=o(null),Ue=o(null),He=(()=>{const e=o(null);return null===e.current?"undefined"==typeof navigator||"undefined"==typeof window?(e.current=!1,e.current):(e.current="ontouchstart"in window||!!navigator.maxTouchPoints,e.current):e.current})(),Ke="boolean"==typeof Q?Q:He,[Xe,_e]=i(""),[Ge,Je]=i(!1),[Qe,Ze]=i(!1),[en,nn]=i($),[tn,on]=i(null),rn=n(()=>F(D)?function e(n,t){const o=Object.assign({},n);return Object.keys(t).forEach(i=>{o[i]=F(t[i])&&"animation"!==i?i in n?e(n[i],t[i]):t[i]:t[i]||""}),o}(v,D):v,[D]),an=n(()=>H||(e=>e.label),[H]),ln=n(()=>K||(e=>e.value),[K]),sn=n(()=>Z||an,[Z,an]),dn=((e,n)=>{const[t,o]=i(e);return r(()=>{if(void 0===n)return;const t=setTimeout(()=>{o(e)},n);return()=>{clearTimeout(t)}},[e,n]),void 0===n?e:t})(Xe,I),[cn,un]=i(()=>P(A,ln,an)),[pn,mn]=xe(Ye,Ge,Me,Re,te,ke,E,N),fn=ye(Te,dn,De,cn,ln,an,re,ae,ce,oe,s,ie,t),gn=()=>{qe.current.blur()},hn=()=>{qe.current.focus()},bn=e=>{We.current&&We.current.scrollToItem(e)},vn=a((e,n)=>{n&&(n.stopPropagation(),"mousedown"===n.type&&n.preventDefault()),un(n=>n.filter(({value:n})=>n!==e))},[]),wn=a(e=>{if(!R(fn))return void Je(!0);const n=s?-1:fn.findIndex(({isSelected:e})=>e),t=n>-1?n:e===ve?0:fn.length-1;Je(!0),nn(Object.assign({index:t},fn[t])),bn(t)},[s,fn]),yn=a((e,n)=>{n?s&&vn(e.value):un(n=>s?[...n,e]:[e]),Ke?gn():Se&&(Je(!1),_e(""))},[s,Se,vn,Ke]);l(Fe,()=>({blur:gn,focus:hn,clearValue:()=>{un(y),nn($)},setValue:e=>{const n=function(e,n,t){if(null==e)return y;const o=P(e).reduce((e,n)=>(F(n)&&e.push(t(n)),e),[]);if(!R(o))return y;const i=[];for(const e of n)!i.includes(e)&&o.includes(t(e))&&i.push(e);return i}(e,fn,ln);un(n)},toggleMenu:e=>{!0===e||void 0===e&&!Ge?(!Qe&&hn(),wn(ve)):gn()}})),r(()=>{p&&hn()},[p]),r(()=>{Qe&&X&&wn(ve)},[Qe,X,wn]),r(()=>{U&&Pe.current&&(Pe.current=!1,U(dn))},[U,dn]),$e(()=>{if(Y){const e=s?cn.map(({data:e})=>e):R(cn)?cn[0].data:null;Y(e)}},[s,cn,Y]),$e(()=>{const e=fn.length,n=e>0&&(t||e!==Te.length||0===je.current);0===e?nn($):(1===e||n)&&(nn(Object.assign({index:0},fn[0])),bn(0)),je.current=e},[t,Te,fn]);const $n=()=>{const{data:e,value:n,label:t,isSelected:o,isDisabled:i}=en;e&&!i&&yn({data:e,value:n,label:t},o)},xn=e=>{if(!R(cn))return;let n=-1;const t=cn.length-1,o=tn?cn.findIndex(({value:e})=>e===tn):-1;switch(e){case fe:n=o>-1&&o<t?o+1:-1;break;case ge:n=0!==o?-1===o?t:o-1:0}const i=n>=0?cn[n].value:null;en.data&&nn($),i!==tn&&on(i)},Cn=e=>{if(!R(fn))return;const n=e===be?(en.index+1)%fn.length:en.index>0?en.index-1:fn.length-1;tn&&on(null),nn(Object.assign({index:n},fn[n])),bn(n)},On=e=>{if(O)return;Qe||hn();const n="INPUT"!==e.currentTarget.tagName;Ge?n&&(Je(!1),Xe&&_e("")):se&&wn(ve),n&&e.preventDefault()},In=a(e=>{S&&S(e),Ze(!1),Je(!1),_e("")},[S]),En=a(e=>{B&&B(e),Ze(!0)},[B]),Nn=a(e=>{Pe.current=!0,V&&V(e.currentTarget.value||""),Je(!0),_e(e.currentTarget.value||"")},[V]),Sn=a(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),un(y),hn()},[]),kn=a(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),hn(),Ge?Je(!1):wn(ve)},[Ge,wn]),zn=Math.min(pn,fn.length*Ve),Dn=mn?((e,n,t)=>{const o=e>0||!n?e:n.getBoundingClientRect().height,i=t?t.getBoundingClientRect().height:0,r=n&&getComputedStyle(n),a=r?parseInt(r.marginBottom||"0",10):0,l=r?parseInt(r.marginTop||"0",10):0;return`calc(${-Math.abs(o+i)}px + ${a+l}px)`})(zn,Ye.current,Ue.current):void 0;return e.createElement(u,{theme:rn},e.createElement(Ce,{id:c,role:"combobox","aria-haspopup":"listbox","aria-controls":d,onKeyDown:e=>{if(!(O||f&&(f(e),e.defaultPrevented))){switch(e.key){case"ArrowDown":Ge?Cn(be):wn(ve);break;case"ArrowUp":Ge?Cn(he):wn(we);break;case"ArrowLeft":if(!s||Xe||ee)return;xn(ge);break;case"ArrowRight":if(!s||Xe||ee)return;xn(fe);break;case" ":if(Xe)return;if(!Ge){wn(ve);break}if(!en.data)return;$n();break;case"Enter":Ge&&229!==e.keyCode&&$n();break;case"Escape":Ge&&(Je(!1),_e(""));break;case"Tab":if(!Ge||!Ne||!en.data||e.shiftKey)return;$n();break;case"Delete":case"Backspace":if(Xe)return;if(tn){const e=cn.findIndex(({value:e})=>e===tn),n=e>-1&&e<cn.length-1?cn[e+1].value:null;vn(tn),on(n)}else{if(!ze)return;if(R(cn))if(s&&!ee){const{value:e}=cn[cn.length-1];vn(e)}else k&&un(y)}break;default:return}e.preventDefault()}},"data-testid":M,"aria-expanded":Ge?"true":"false",className:j?"rfs-select-container":void 0},e.createElement(Ie,{ref:Ue,isInvalid:b,isFocused:Qe,isDisabled:O,onMouseDown:On,"data-testid":T,className:j?"rfs-control-container":void 0,onTouchEnd:He?On:void 0},e.createElement(Oe,null,e.createElement(J,{isMulti:s,inputValue:Xe,placeholder:Ae,isTouchDevice:He,selectedOption:cn,focusedMultiValue:tn,renderOptionLabel:sn,renderMultiOptions:ee,removeSelectedOption:vn}),e.createElement(ne,{id:d,ref:qe,ariaLabel:x,inputValue:Xe,onBlur:In,onFocus:En,addClassNames:j,onChange:Nn,ariaLabelledBy:W,readOnly:O||!le||!!tn})),e.createElement(de,{menuOpen:Ge,clearIcon:g,caretIcon:h,isInvalid:b,isLoading:m,isDisabled:O,loadingNode:L,addClassNames:j,isTouchDevice:He,onClearMouseDown:Sn,showClear:!(!k||O||!R(cn)),onCaretMouseDown:O||se?void 0:kn})),e.createElement(Ee,{ref:Ye,hideMenu:!Ge,menuTop:Dn,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),hn()},"data-testid":z,className:j?"rfs-menu-container":void 0},e.createElement(q,{ref:We,isLoading:m,height:zn,itemSize:Ve,loadingMsg:Le,menuOptions:fn,noOptionsMsg:Be,selectOption:yn,overscanCount:G,width:C||rn.menu.width,renderOptionLabel:sn,focusedOptionIndex:en.index})),_&&e.createElement(ue,{menuOpen:Ge,isFocused:Qe,ariaLabel:x,inputValue:Xe,isSearchable:le,focusedOption:en,selectedOption:cn,optionCount:fn.length})))});Ne.displayName="Select";export{me as FilterMatchEnum,pe as MenuPositionEnum,Ne as Select};

31

package.json
{
"name": "react-functional-select",
"version": "2.4.0",
"version": "2.4.1",
"author": "Matt Areddia <mareddia@protonmail.com> (https://github.com/based-ghost/)",

@@ -46,10 +46,10 @@ "description": "Miro-sized and micro-optimized select component for React.js",

"@babel/cli": "^7.10.1",
"@babel/core": "^7.10.1",
"@babel/core": "^7.10.2",
"@babel/plugin-proposal-class-properties": "^7.10.1",
"@babel/plugin-proposal-object-rest-spread": "^7.10.1",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.10.1",
"@babel/preset-env": "^7.10.1",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"@babel/preset-typescript": "^7.10.1",
"@rollup/plugin-babel": "^5.0.3",
"@storybook/addon-storysource": "^5.3.19",

@@ -59,18 +59,19 @@ "@storybook/addons": "^5.3.19",

"@storybook/react": "^5.3.19",
"@testing-library/jest-dom": "^5.9.0",
"@testing-library/react": "^10.0.4",
"@types/jest": "^25.2.3",
"@types/node": "^14.0.6",
"@types/react": "^16.9.35",
"@testing-library/jest-dom": "^5.10.0",
"@testing-library/react": "^10.2.1",
"@types/jest": "^26.0.0",
"@types/node": "^14.0.13",
"@types/react": "^16.9.36",
"@types/react-dom": "^16.9.8",
"@types/react-window": "^1.8.2",
"@types/styled-components": "^5.1.0",
"@typescript-eslint/eslint-plugin": "^3.0.2",
"@typescript-eslint/parser": "^3.0.2",
"@typescript-eslint/eslint-plugin": "^3.2.0",
"@typescript-eslint/parser": "^3.2.0",
"babel-jest": "^26.0.1",
"babel-loader": "^8.1.0",
"babel-plugin-styled-components": "^1.10.7",
"concurrently": "^5.2.0",
"cross-env": "^7.0.2",
"enzyme": "^3.11.0",
"eslint": "^7.1.0",
"eslint": "^7.2.0",
"eslint-config-poetez": "^0.2.0",

@@ -93,4 +94,3 @@ "eslint-config-prettier": "^6.11.0",

"rimraf": "^3.0.2",
"rollup": "^2.11.2",
"rollup-plugin-babel": "^4.4.0",
"rollup": "^2.15.0",
"rollup-plugin-commonjs": "^10.1.0",

@@ -106,3 +106,4 @@ "rollup-plugin-node-resolve": "^5.2.0",

"tslint-plugin-prettier": "^2.3.0",
"typescript": "^3.9.3",
"typescript": "^3.9.5",
"typescript-plugin-styled-components": "^1.4.4",
"webpack": "^4.43.0",

@@ -109,0 +110,0 @@ "webpack-merge": "^4.2.2"

4

README.md

@@ -12,3 +12,3 @@ # react-functional-select

- Fully-featured package that is truly lightweight: ~7.85 KB (gzipped)!
- Fully-featured package that is truly lightweight: 8 KB (gzipped)!
- Extensible styling API with [`styled-components`](https://github.com/styled-components/styled-components)

@@ -113,3 +113,3 @@ - Opt-in properties to make the component fully accessible

> <strong><em>Note that the following non-primitive properties should be properly memoized if defined:</em></strong><br>`clearIcon`, `caretIcon`, `options`, `renderOptionLabel`, `onMenuOpen`, `onOptionChange`, `onKeyDown`, `getOptionLabel`, `getOptionLabel`, `getOptionValue`, `onInputBlur`, `onInputFocus`, `onInputChange`, `onSearchChange`, `getIsOptionDisabled`, `getFilterOptionString`, `themeConfig`
> <strong><em>Note that the following non-primitive properties should be properly memoized if defined:</em></strong><br>`clearIcon`, `caretIcon`, `options`, `renderOptionLabel`, `renderMultiOptions`, `onMenuOpen`, `onOptionChange`, `onKeyDown`, `getOptionLabel`, `getOptionLabel`, `getOptionValue`, `onInputBlur`, `onInputFocus`, `onInputChange`, `onSearchChange`, `getIsOptionDisabled`, `getFilterOptionString`, `themeConfig`

@@ -116,0 +116,0 @@ | Property | Type | Default | Description

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc