react-functional-select - npm Package Compare versions

Comparing version 2.3.5 to 2.4.0

dist/constants/enums.d.ts

@@ -11,7 +11,3 @@ import { OptionIndex, ValueIndex } from '../types';
 }
-export declare const ValueIndexEnum: {
-    [key: string]: ValueIndex;
-};
-export declare const OptionIndexEnum: {
-    [key: string]: OptionIndex;
-};
+export declare const ValueIndexEnum: Record<string, ValueIndex>;
+export declare const OptionIndexEnum: Record<string, OptionIndex>;

dist/hooks/useMenuOptions.d.ts

 import { ReactText } from 'react';
 import { OptionData, MenuOption, SelectedOption } from '../types';
-export declare const useMenuOptions: (options: OptionData[], debouncedInputValue: string, filterMatchFrom: 'any' | 'start', selectedOption: SelectedOption[], getOptionValueCB: (data: OptionData) => ReactText, getOptionLabelCB: (data: OptionData) => ReactText, getIsOptionDisabled?: ((data: OptionData) => boolean) | undefined, getFilterOptionString?: ((option: MenuOption) => string) | undefined, filterIgnoreCase?: boolean | undefined, filterIgnoreAccents?: boolean | undefined, isMulti?: boolean | undefined, hideSelectedOptions?: boolean | undefined, async?: boolean | undefined) => MenuOption[];
+export declare const useMenuOptions: (options: OptionData[], debouncedInputValue: string, filterMatchFrom: 'any' | 'start', selectedOption: SelectedOption[], getOptionValue: (data: OptionData) => ReactText, getOptionLabel: (data: OptionData) => ReactText, getIsOptionDisabled?: ((data: OptionData) => boolean) | undefined, getFilterOptionString?: ((option: MenuOption) => string) | undefined, filterIgnoreCase?: boolean | undefined, filterIgnoreAccents?: boolean | undefined, isMulti?: boolean | undefined, hideSelectedOptions?: boolean | undefined, async?: boolean | undefined) => MenuOption[];

dist/index-dev.umd.js

@@ -16,3 +16,3 @@ !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`
   ${({theme:{noOptions:e}})=>`\n    color: ${e.color};\n    margin: ${e.margin};\n    padding: ${e.padding};\n    font-size: ${e.fontSize};\n    ${e.css||""}\n  `}
-`,k=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))});k.displayName="Menu";const M=r.div`
+`,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;
@@ -30,3 +30,3 @@ 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(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`
+`,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%;
@@ -49,3 +49,3 @@ overflow: hidden;
   color: ${({theme:e})=>e.color.placeholder};
-`,R=i.memo(({isMulti:e,inputValue:t,placeholder:o,isTouchDevice:r,selectedOption:a,focusedMultiValue:l,renderOptionLabel:s,removeSelectedOption:d})=>{if(t&&(!e||e&&!x(a)))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,a.map(({data:e,value:n})=>i.createElement(z,{key:n,data:e,value:n,isTouchDevice:r,renderOptionLabel:s,isFocused:n===l,removeSelectedOption:d})))});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`
+`,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;
@@ -81,3 +81,3 @@ left: 0;
   ${"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(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`
+`,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;
@@ -141,3 +141,3 @@ align-self: center;
   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(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`
+`,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;
@@ -183,2 +183,2 @@ box-sizing: border-box;
   }
-`,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:M,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:_,menuScrollDuration:G,filterIgnoreAccents:ce,hideSelectedOptions:ue,getIsOptionDisabled:pe,getFilterOptionString:me,isSearchable:fe=!0,openMenuOnClick:ge=!0,filterIgnoreCase:he=!0,tabSelectsOption:be=!0,closeMenuOnSelect:ve=!0,scrollMenuIntoView:we=!0,backspaceClearsValue:$e=!0,filterMatchFrom:xe=e.FilterMatchEnum.ANY,menuPosition:ye=e.MenuPositionEnum.BOTTOM,options:Oe=u,loadingMsg:Ee="Loading...",placeholder:Ce="Select option...",noOptionsMsg:Se="No options",menuItemSize:ke=35,menuMaxHeight:Me=300},Ie)=>{const De=n.useRef(),ze=n.useRef(!1),Te=n.useRef(null),Le=n.useRef(null),Re=n.useRef(null),Ne=n.useRef(null),Ae=(()=>{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})(),Fe="boolean"==typeof K?K:Ae,[Be,Ve]=n.useState(""),[Pe,je]=n.useState(!1),[We,Ye]=n.useState(!1),[qe,Ue]=n.useState(m),[He,Ke]=n.useState(null),Xe=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]),_e=n.useMemo(()=>j||(e=>e.label),[j]),Ge=n.useMemo(()=>W||(e=>e.value),[W]),Je=n.useMemo(()=>_||_e,[_,_e]),Qe=((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})(Be,O),[Ze,en]=n.useState(()=>E(T,Ge,_e)),[nn,tn]=re(Le,Pe,ye,Me,G,we,C,S),on=oe(Oe,Qe,xe,Ze,Ge,_e,pe,me,he,ce,r,ue,o),rn=()=>{Re.current.blur()},an=()=>{Re.current.focus()},ln=e=>{Te.current&&Te.current.scrollToItem(e)},sn=n.useCallback((e,n)=>{n&&(n.stopPropagation(),"mousedown"===n.type&&n.preventDefault()),en(n=>n.filter(({value:n})=>n!==e))},[]),dn=n.useCallback(e=>{if(!x(on))return void je(!0);const n=r?-1:on.findIndex(({isSelected:e})=>e),t=n>-1?n:e===ne?0:on.length-1;je(!0),Ue(Object.assign({index:t},on[t])),ln(t)},[r,on]),cn=n.useCallback((e,n)=>{n?r&&sn(e.value):en(n=>r?[...n,e]:[e]),Fe?rn():ve&&(je(!1),Ve(""))},[r,ve,sn,Fe]);n.useImperativeHandle(Ie,()=>({blur:rn,focus:an,clearValue:()=>{en(p),Ue(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,on,Ge);en(n)},toggleMenu:e=>{!0===e||void 0===e&&!Pe?(!We&&an(),dn(ne)):rn()}})),n.useEffect(()=>{s&&an()},[s]),n.useEffect(()=>{We&&Y&&dn(ne)},[We,Y,dn]),n.useEffect(()=>{P&&ze.current&&(ze.current=!1,P(Qe))},[P,Qe]),ie(()=>{if(V){const e=r?Ze.map(({data:e})=>e):x(Ze)?Ze[0].data:null;V(e)}},[r,Ze,V]),ie(()=>{const e=on.length,n=e>0&&(o||e!==Oe.length||0===De.current);0===e?Ue(m):(1===e||n)&&(Ue(Object.assign({index:0},on[0])),ln(0)),De.current=e},[o,Oe,on]);const un=()=>{const{data:e,value:n,label:t,isSelected:o,isDisabled:i}=qe;e&&!i&&cn({data:e,value:n,label:t},o)},pn=e=>{if(!x(Ze))return;let n=-1;const t=Ze.length-1,o=He?Ze.findIndex(({value:e})=>e===He):-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?Ze[n].value:null;qe.data&&Ue(m),i!==He&&Ke(i)},mn=e=>{if(!x(on))return;const n=e===ee?(qe.index+1)%on.length:qe.index>0?qe.index-1:on.length-1;He&&Ke(null),Ue(Object.assign({index:n},on[n])),ln(n)},fn=e=>{if($)return;We||an();const n="INPUT"!==e.currentTarget.tagName;Pe?n&&(je(!1),Be&&Ve("")):ge&&dn(ne),n&&e.preventDefault()},gn=n.useCallback(e=>{M&&M(e),Ye(!1),je(!1),Ve("")},[M]),hn=n.useCallback(e=>{L&&L(e),Ye(!0)},[L]),bn=n.useCallback(e=>{ze.current=!0,N&&N(e.currentTarget.value||""),je(!0),Ve(e.currentTarget.value||"")},[N]),vn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),en(p),an()},[]),wn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),an(),Pe?je(!1):dn(ne)},[Pe,dn]),$n=Math.min(nn,on.length*ke);return i.createElement(t.ThemeProvider,{theme:Xe},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":Pe?mn(ee):dn(ne);break;case"ArrowUp":Pe?mn(Z):dn(te);break;case"ArrowLeft":if(!r||Be)return;pn(Q);break;case"ArrowRight":if(!r||Be)return;pn(J);break;case" ":if(Be)return;if(!Pe){dn(ne);break}if(!qe.data)return;un();break;case"Enter":Pe&&229!==e.keyCode&&un();break;case"Escape":Pe&&(je(!1),Ve(""));break;case"Tab":if(!Pe||!be||!qe.data||e.shiftKey)return;un();break;case"Delete":case"Backspace":if(Be)return;if(He){const e=Ze.findIndex(({value:e})=>e===He),n=e>-1&&e<Ze.length-1?Ze[e+1].value:null;sn(He),Ke(n)}else{if(!$e)return;if(x(Ze))if(r){const{value:e}=Ze[Ze.length-1];sn(e)}else I&&en(p)}break;default:return}e.preventDefault()}},"data-testid":void 0,"aria-expanded":Pe?"true":"false",className:A?"rfs-select-container":void 0},i.createElement(se,{ref:Ne,isInvalid:b,isFocused:We,isDisabled:$,onMouseDown:fn,"data-testid":void 0,className:A?"rfs-control-container":void 0,onTouchEnd:Ae?fn:void 0},i.createElement(le,null,i.createElement(R,{isMulti:r,inputValue:Be,placeholder:Ce,isTouchDevice:Ae,selectedOption:Ze,focusedMultiValue:He,renderOptionLabel:Je,removeSelectedOption:sn}),i.createElement(B,{id:a,ref:Re,ariaLabel:v,inputValue:Be,onBlur:gn,onFocus:hn,addClassNames:A,onChange:bn,ariaLabelledBy:F,readOnly:$||!fe||!!He})),i.createElement(H,{menuOpen:Pe,clearIcon:g,caretIcon:h,isInvalid:b,isLoading:d,isDisabled:$,loadingNode:z,addClassNames:A,isTouchDevice:Ae,onClearMouseDown:vn,showClear:!(!I||$||!x(Ze)),onCaretMouseDown:$||ge?void 0:wn})),i.createElement(de,{ref:Le,hideMenu:!Pe,menuTop:tn?((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)`})($n,Le.current,Ne.current):void 0,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),an()},"data-testid":void 0,className:A?"rfs-menu-container":void 0},i.createElement(k,{ref:Te,isLoading:d,height:$n,itemSize:ke,loadingMsg:Ee,menuOptions:on,noOptionsMsg:Se,selectOption:cn,overscanCount:U,width:w||Xe.menu.width,renderOptionLabel:Je,focusedOptionIndex:qe.index})),q&&i.createElement(X,{menuOpen:Pe,isFocused:We,ariaLabel:v,inputValue:Be,isSearchable:fe,focusedOption:qe,selectedOption:Ze,optionCount:on.length})))});ce.displayName="Select",e.Select=ce,Object.defineProperty(e,"__esModule",{value:!0})}));
+`,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})}));

dist/index-prod.umd.js

@@ -16,3 +16,3 @@ !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`
   ${({theme:{noOptions:e}})=>`\n    color: ${e.color};\n    margin: ${e.margin};\n    padding: ${e.padding};\n    font-size: ${e.fontSize};\n    ${e.css||""}\n  `}
-`,k=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))});k.displayName="Menu";const M=r.div`
+`,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;
@@ -30,3 +30,3 @@ 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(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`
+`,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%;
@@ -49,3 +49,3 @@ overflow: hidden;
   color: ${({theme:e})=>e.color.placeholder};
-`,R=i.memo(({isMulti:e,inputValue:t,placeholder:o,isTouchDevice:r,selectedOption:a,focusedMultiValue:l,renderOptionLabel:s,removeSelectedOption:d})=>{if(t&&(!e||e&&!x(a)))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,a.map(({data:e,value:n})=>i.createElement(z,{key:n,data:e,value:n,isTouchDevice:r,renderOptionLabel:s,isFocused:n===l,removeSelectedOption:d})))});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`
+`,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;
@@ -81,3 +81,3 @@ left: 0;
   ${"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(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`
+`,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;
@@ -141,3 +141,3 @@ align-self: center;
   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(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`
+`,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;
@@ -183,2 +183,2 @@ box-sizing: border-box;
   }
-`,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:M,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:_,menuScrollDuration:G,filterIgnoreAccents:ce,hideSelectedOptions:ue,getIsOptionDisabled:pe,getFilterOptionString:me,isSearchable:fe=!0,openMenuOnClick:ge=!0,filterIgnoreCase:he=!0,tabSelectsOption:be=!0,closeMenuOnSelect:ve=!0,scrollMenuIntoView:we=!0,backspaceClearsValue:$e=!0,filterMatchFrom:xe=e.FilterMatchEnum.ANY,menuPosition:ye=e.MenuPositionEnum.BOTTOM,options:Oe=u,loadingMsg:Ee="Loading...",placeholder:Ce="Select option...",noOptionsMsg:Se="No options",menuItemSize:ke=35,menuMaxHeight:Me=300},Ie)=>{const De=n.useRef(),ze=n.useRef(!1),Te=n.useRef(null),Le=n.useRef(null),Re=n.useRef(null),Ne=n.useRef(null),Ae=(()=>{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})(),Fe="boolean"==typeof K?K:Ae,[Be,Ve]=n.useState(""),[Pe,je]=n.useState(!1),[We,Ye]=n.useState(!1),[qe,Ue]=n.useState(m),[He,Ke]=n.useState(null),Xe=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]),_e=n.useMemo(()=>j||(e=>e.label),[j]),Ge=n.useMemo(()=>W||(e=>e.value),[W]),Je=n.useMemo(()=>_||_e,[_,_e]),Qe=((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})(Be,O),[Ze,en]=n.useState(()=>E(T,Ge,_e)),[nn,tn]=re(Le,Pe,ye,Me,G,we,C,S),on=oe(Oe,Qe,xe,Ze,Ge,_e,pe,me,he,ce,r,ue,o),rn=()=>{Re.current.blur()},an=()=>{Re.current.focus()},ln=e=>{Te.current&&Te.current.scrollToItem(e)},sn=n.useCallback((e,n)=>{n&&(n.stopPropagation(),"mousedown"===n.type&&n.preventDefault()),en(n=>n.filter(({value:n})=>n!==e))},[]),dn=n.useCallback(e=>{if(!x(on))return void je(!0);const n=r?-1:on.findIndex(({isSelected:e})=>e),t=n>-1?n:e===ne?0:on.length-1;je(!0),Ue(Object.assign({index:t},on[t])),ln(t)},[r,on]),cn=n.useCallback((e,n)=>{n?r&&sn(e.value):en(n=>r?[...n,e]:[e]),Fe?rn():ve&&(je(!1),Ve(""))},[r,ve,sn,Fe]);n.useImperativeHandle(Ie,()=>({blur:rn,focus:an,clearValue:()=>{en(p),Ue(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,on,Ge);en(n)},toggleMenu:e=>{!0===e||void 0===e&&!Pe?(!We&&an(),dn(ne)):rn()}})),n.useEffect(()=>{s&&an()},[s]),n.useEffect(()=>{We&&Y&&dn(ne)},[We,Y,dn]),n.useEffect(()=>{P&&ze.current&&(ze.current=!1,P(Qe))},[P,Qe]),ie(()=>{if(V){const e=r?Ze.map(({data:e})=>e):x(Ze)?Ze[0].data:null;V(e)}},[r,Ze,V]),ie(()=>{const e=on.length,n=e>0&&(o||e!==Oe.length||0===De.current);0===e?Ue(m):(1===e||n)&&(Ue(Object.assign({index:0},on[0])),ln(0)),De.current=e},[o,Oe,on]);const un=()=>{const{data:e,value:n,label:t,isSelected:o,isDisabled:i}=qe;e&&!i&&cn({data:e,value:n,label:t},o)},pn=e=>{if(!x(Ze))return;let n=-1;const t=Ze.length-1,o=He?Ze.findIndex(({value:e})=>e===He):-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?Ze[n].value:null;qe.data&&Ue(m),i!==He&&Ke(i)},mn=e=>{if(!x(on))return;const n=e===ee?(qe.index+1)%on.length:qe.index>0?qe.index-1:on.length-1;He&&Ke(null),Ue(Object.assign({index:n},on[n])),ln(n)},fn=e=>{if($)return;We||an();const n="INPUT"!==e.currentTarget.tagName;Pe?n&&(je(!1),Be&&Ve("")):ge&&dn(ne),n&&e.preventDefault()},gn=n.useCallback(e=>{M&&M(e),Ye(!1),je(!1),Ve("")},[M]),hn=n.useCallback(e=>{L&&L(e),Ye(!0)},[L]),bn=n.useCallback(e=>{ze.current=!0,N&&N(e.currentTarget.value||""),je(!0),Ve(e.currentTarget.value||"")},[N]),vn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),en(p),an()},[]),wn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),an(),Pe?je(!1):dn(ne)},[Pe,dn]),$n=Math.min(nn,on.length*ke);return i.createElement(t.ThemeProvider,{theme:Xe},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":Pe?mn(ee):dn(ne);break;case"ArrowUp":Pe?mn(Z):dn(te);break;case"ArrowLeft":if(!r||Be)return;pn(Q);break;case"ArrowRight":if(!r||Be)return;pn(J);break;case" ":if(Be)return;if(!Pe){dn(ne);break}if(!qe.data)return;un();break;case"Enter":Pe&&229!==e.keyCode&&un();break;case"Escape":Pe&&(je(!1),Ve(""));break;case"Tab":if(!Pe||!be||!qe.data||e.shiftKey)return;un();break;case"Delete":case"Backspace":if(Be)return;if(He){const e=Ze.findIndex(({value:e})=>e===He),n=e>-1&&e<Ze.length-1?Ze[e+1].value:null;sn(He),Ke(n)}else{if(!$e)return;if(x(Ze))if(r){const{value:e}=Ze[Ze.length-1];sn(e)}else I&&en(p)}break;default:return}e.preventDefault()}},"data-testid":void 0,"aria-expanded":Pe?"true":"false",className:A?"rfs-select-container":void 0},i.createElement(se,{ref:Ne,isInvalid:b,isFocused:We,isDisabled:$,onMouseDown:fn,"data-testid":void 0,className:A?"rfs-control-container":void 0,onTouchEnd:Ae?fn:void 0},i.createElement(le,null,i.createElement(R,{isMulti:r,inputValue:Be,placeholder:Ce,isTouchDevice:Ae,selectedOption:Ze,focusedMultiValue:He,renderOptionLabel:Je,removeSelectedOption:sn}),i.createElement(B,{id:a,ref:Re,ariaLabel:v,inputValue:Be,onBlur:gn,onFocus:hn,addClassNames:A,onChange:bn,ariaLabelledBy:F,readOnly:$||!fe||!!He})),i.createElement(H,{menuOpen:Pe,clearIcon:g,caretIcon:h,isInvalid:b,isLoading:d,isDisabled:$,loadingNode:z,addClassNames:A,isTouchDevice:Ae,onClearMouseDown:vn,showClear:!(!I||$||!x(Ze)),onCaretMouseDown:$||ge?void 0:wn})),i.createElement(de,{ref:Le,hideMenu:!Pe,menuTop:tn?((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)`})($n,Le.current,Ne.current):void 0,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),an()},"data-testid":void 0,className:A?"rfs-menu-container":void 0},i.createElement(k,{ref:Te,isLoading:d,height:$n,itemSize:ke,loadingMsg:Ee,menuOptions:on,noOptionsMsg:Se,selectOption:cn,overscanCount:U,width:w||Xe.menu.width,renderOptionLabel:Je,focusedOptionIndex:qe.index})),q&&i.createElement(X,{menuOpen:Pe,isFocused:We,ariaLabel:v,inputValue:Be,isSearchable:fe,focusedOption:qe,selectedOption:Ze,optionCount:on.length})))});ce.displayName="Select",e.Select=ce,Object.defineProperty(e,"__esModule",{value:!0})}));
+`,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})}));

dist/index.cjs.js

@@ -176,7 +176,3 @@ 'use strict';
 function scrollTo(el, top) {
-  if (isDocumentElement(el)) {
-    window.scrollTo(0, top);
-  } else {
-    el.scrollTop = top;
-  }
+  isDocumentElement(el) ? window.scrollTo(0, top) : el.scrollTop = top;
 }
@@ -301,3 +297,3 @@
 }
-function validateSetValueParam(values, menuOptions, getOptionValueCB) {
+function validateSetValueParam(values, menuOptions, getOptionValue) {
   if (values === null || values === undefined) {
@@ -309,3 +305,3 @@ return SELECTED_OPTION_DEFAULT;
   const validValues = normalizedVal.reduce((acc, x) => {
-    isPlainObject(x) && acc.push(getOptionValueCB(x));
+    isPlainObject(x) && acc.push(getOptionValue(x));
     return acc;
@@ -322,3 +318,3 @@ }, []);
   for (const option of menuOptions) {
-    if (validValuesUniq.includes(getOptionValueCB(option))) {
+    if (validValuesUniq.includes(getOptionValue(option))) {
       results.push(option);
@@ -334,6 +330,6 @@
 }
-function normalizeValue(value, getOptionValueCB, getOptionLabelCB) {
+function normalizeValue(value, getOptionValue, getOptionLabel) {
   const initialValues = Array.isArray(value) ? value.filter(Boolean) : isPlainObject(value) ? [value] : SELECTED_OPTION_DEFAULT;
 
-  if (!getOptionValueCB || !getOptionLabelCB || !isArrayWithLength(initialValues)) {
+  if (!getOptionValue || !getOptionLabel || !isArrayWithLength(initialValues)) {
     return initialValues;
@@ -344,8 +340,8 @@ }
     data: initVal,
-    value: getOptionValueCB(initVal),
-    label: getOptionLabelCB(initVal)
+    value: getOptionValue(initVal),
+    label: getOptionLabel(initVal)
   }));
 }
 
-const Option = React__default.memo(({
+const Option = /*#__PURE__*/React__default.memo(({
   index,
@@ -373,3 +369,3 @@ style,
   }, isSelected) : undefined;
-  return React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     style: style,
@@ -396,3 +392,3 @@ className: className,
 `;
-const Menu = React__default.forwardRef(({
+const Menu = /*#__PURE__*/React__default.forwardRef(({
   width,
@@ -418,6 +414,6 @@ height,
   if (isLoading) {
-    return React__default.createElement(NoOptionsMsg, null, loadingMsg);
+    return /*#__PURE__*/React__default.createElement(NoOptionsMsg, null, loadingMsg);
   }
 
-  return React__default.createElement(React.Fragment, null, React__default.createElement(reactWindow.FixedSizeList, {
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(reactWindow.FixedSizeList, {
     ref: ref,
@@ -430,3 +426,3 @@ width: width,
     itemCount: menuOptions.length
-  }, Option), !isArrayWithLength(menuOptions) && React__default.createElement(NoOptionsMsg, null, noOptionsMsg));
+  }, Option), !isArrayWithLength(menuOptions) && /*#__PURE__*/React__default.createElement(NoOptionsMsg, null, noOptionsMsg));
 });
@@ -500,3 +496,3 @@ Menu.displayName = 'Menu';
   removeSelectedOption
-}) => React__default.createElement(MultiValueWrapper, null, React__default.createElement(Label, null, renderOptionLabel(data)), React__default.createElement(Clear, {
+}) => /*#__PURE__*/React__default.createElement(MultiValueWrapper, null, /*#__PURE__*/React__default.createElement(Label, null, renderOptionLabel(data)), /*#__PURE__*/React__default.createElement(Clear, {
   isFocused: isFocused,
@@ -530,3 +526,3 @@ "data-testid": CLEAR_ICON_MV_TESTID,
 `;
-const Value = React__default.memo(({
+const Value = /*#__PURE__*/React__default.memo(({
   isMulti,
@@ -539,5 +535,6 @@ inputValue,
   renderOptionLabel,
+  renderMultiOptions,
   removeSelectedOption
 }) => {
-  if (inputValue && (!isMulti || isMulti && !isArrayWithLength(selectedOption))) {
+  if (inputValue && (!isMulti || isMulti && (!isArrayWithLength(selectedOption) || renderMultiOptions))) {
     return null;
@@ -547,3 +544,3 @@ }
   if (!isArrayWithLength(selectedOption)) {
-    return React__default.createElement(Placeholder, null, placeholder);
+    return /*#__PURE__*/React__default.createElement(Placeholder, null, placeholder);
   }
@@ -553,9 +550,12 @@
     const optionLabel = renderOptionLabel(selectedOption[0].data);
-    return React__default.createElement(SingleValue, null, optionLabel);
+    return /*#__PURE__*/React__default.createElement(SingleValue, null, optionLabel);
   }
 
-  return React__default.createElement(React.Fragment, null, selectedOption.map(({
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, renderMultiOptions ? renderMultiOptions({
+    selected: selectedOption,
+    renderOptionLabel
+  }) : selectedOption.map(({
     data,
     value
-  }) => React__default.createElement(MultiValue, {
+  }) => /*#__PURE__*/React__default.createElement(MultiValue, {
     key: value,
@@ -619,3 +619,3 @@ data: data,
 `;
-const AutosizeInput = React__default.memo(React__default.forwardRef(({
+const AutosizeInput = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef(({
   id,
@@ -633,3 +633,3 @@ onBlur,
   const [inputWidth, setInputWidth] = React.useState(INPUT_MIN_WIDTH_PX);
-  const autosizeInputAttrs = Object.assign(Object.assign({}, STATIC_ATTRIBUTES), {}, {
+  const autosizeInputAttrs = Object.assign({}, STATIC_ATTRIBUTES, {
     'aria-label': ariaLabel,
@@ -646,3 +646,3 @@ 'aria-labelledby': ariaLabelledBy,
   }, [inputValue]);
-  return React__default.createElement(React.Fragment, null, React__default.createElement(Input, Object.assign({
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Input, Object.assign({
     id: id,
@@ -657,3 +657,3 @@ ref: ref,
     className: addClassNames ? AUTOSIZE_INPUT_CLS : undefined
-  })), React__default.createElement(SizerDiv, {
+  })), /*#__PURE__*/React__default.createElement(SizerDiv, {
     ref: sizerRef
@@ -701,6 +701,6 @@ }, inputValue));
   addClassNames
-}) => React__default.createElement(StyledLoadingDots, {
+}) => /*#__PURE__*/React__default.createElement(StyledLoadingDots, {
   "aria-hidden": 'true',
   className: addClassNames ? LOADING_DOTS_CLS : undefined
-}, React__default.createElement("div", null), React__default.createElement("div", null), React__default.createElement("div", null));
+}, /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement("div", null));
 
@@ -785,3 +785,3 @@ const IndicatorIconsWrapper = styled__default.div`
 `;
-const IndicatorIcons = React__default.memo(({
+const IndicatorIcons = /*#__PURE__*/React__default.memo(({
   menuOpen,
@@ -811,20 +811,20 @@ clearIcon,
 
-  return React__default.createElement(IndicatorIconsWrapper, null, showClear && !isLoading && React__default.createElement(IndicatorIcon, {
+  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) || React__default.createElement(ClearSVG, {
+  }, renderCustomIcon(clearIcon) || /*#__PURE__*/React__default.createElement(ClearSVG, {
     "aria-hidden": 'true',
     viewBox: '0 0 14 16',
     className: addClassNames ? CLEAR_ICON_CLS : undefined
-  }, React__default.createElement("path", {
+  }, /*#__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 || React__default.createElement(LoadingDots, {
+  }))), isLoading && (loadingNode || /*#__PURE__*/React__default.createElement(LoadingDots, {
     addClassNames: addClassNames
-  })), React__default.createElement(Separator, null), React__default.createElement(IndicatorIcon, {
+  })), /*#__PURE__*/React__default.createElement(Separator, null), /*#__PURE__*/React__default.createElement(IndicatorIcon, {
     onMouseDown: onCaretMouseDown,
     "data-testid": CARET_ICON_TESTID,
     onTouchEnd: isTouchDevice ? onCaretMouseDown : undefined
-  }, renderCustomIcon(caretIcon) || React__default.createElement(Caret, {
+  }, renderCustomIcon(caretIcon) || /*#__PURE__*/React__default.createElement(Caret, {
     "aria-hidden": 'true',
@@ -878,6 +878,6 @@ menuOpen: menuOpen,
   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 React__default.createElement(A11yText, {
+  return /*#__PURE__*/React__default.createElement(A11yText, {
     "aria-live": 'polite',
     "data-testid": ARIA_LIVE_TESTID
-  }, React__default.createElement("p", null, selectedOptionMsg), React__default.createElement("p", null, `${focusedMsg} ${optionsMsg} ${menuMsg}`));
+  }, /*#__PURE__*/React__default.createElement("p", null, selectedOptionMsg), /*#__PURE__*/React__default.createElement("p", null, `${focusedMsg} ${optionsMsg} ${menuMsg}`));
 };
@@ -921,3 +921,3 @@
 
-const useMenuOptions = (options, debouncedInputValue, filterMatchFrom, selectedOption, getOptionValueCB, getOptionLabelCB, getIsOptionDisabled, getFilterOptionString, filterIgnoreCase, filterIgnoreAccents, isMulti, hideSelectedOptions, async) => {
+const useMenuOptions = (options, debouncedInputValue, filterMatchFrom, selectedOption, getOptionValue, getOptionLabel, getIsOptionDisabled, getFilterOptionString, filterIgnoreCase, filterIgnoreAccents, isMulti, hideSelectedOptions, async) => {
   const [menuOptions, setMenuOptions] = React.useState(OPTIONS_DEFAULT);
@@ -944,10 +944,10 @@ const searchValue = !async ? debouncedInputValue : '';
     const parseMenuOption = data => {
-      const value = getOptionValueCB(data);
-      const menuOption = Object.assign(Object.assign({
+      const value = getOptionValue(data);
+      const menuOption = Object.assign({
         data,
         value,
-        label: getOptionLabelCB(data)
+        label: getOptionLabel(data)
       }, getIsOptionDisabledOrDefault(data) && {
         isDisabled: true
-      }), selectedValues && selectedValues.includes(value) && {
+      }, selectedValues && selectedValues.includes(value) && {
         isSelected: true
@@ -969,3 +969,3 @@ });
     setMenuOptions(menuOptionsOrDefault);
-  }, [options, selectedOption, searchValue, hideSelectedOptionsOrDefault, filterMatchFrom, filterIgnoreCase, filterIgnoreAccents, getFilterOptionString, getIsOptionDisabled, getOptionValueCB, getOptionLabelCB]);
+  }, [options, selectedOption, searchValue, hideSelectedOptionsOrDefault, filterMatchFrom, filterIgnoreCase, filterIgnoreAccents, getFilterOptionString, getIsOptionDisabled, getOptionValue, getOptionLabel]);
   return menuOptions;
@@ -1148,3 +1148,3 @@ };
 `;
-const Select = React__default.forwardRef(({
+const Select = /*#__PURE__*/React__default.forwardRef(({
   async,
@@ -1184,2 +1184,3 @@ isMulti,
   renderOptionLabel,
+  renderMultiOptions,
   menuScrollDuration,
@@ -1222,9 +1223,9 @@ filterIgnoreAccents,
   }, [themeConfig]);
-  const getOptionLabelCB = React.useMemo(() => getOptionLabel || (data => data.label), [getOptionLabel]);
-  const getOptionValueCB = React.useMemo(() => getOptionValue || (data => data.value), [getOptionValue]);
-  const renderOptionLabelCB = React.useMemo(() => renderOptionLabel || getOptionLabelCB, [renderOptionLabel, getOptionLabelCB]);
+  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, getOptionValueCB, getOptionLabelCB));
+  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, getOptionValueCB, getOptionLabelCB, getIsOptionDisabled, getFilterOptionString, filterIgnoreCase, filterIgnoreAccents, isMulti, hideSelectedOptions, async);
+  const menuOptions = useMenuOptions(options, debouncedInputValue, filterMatchFrom, selectedOption, getOptionValueFn, getOptionLabelFn, getIsOptionDisabled, getFilterOptionString, filterIgnoreCase, filterIgnoreAccents, isMulti, hideSelectedOptions, async);
 
@@ -1293,3 +1294,3 @@ const blurInput = () => {
     setValue: option => {
-      const validatedSelectedOption = validateSetValueParam(option, menuOptions, getOptionValueCB);
+      const validatedSelectedOption = validateSetValueParam(option, menuOptions, getOptionValueFn);
       setSelectedOption(validatedSelectedOption);
@@ -1413,3 +1414,3 @@ },
       case 'ArrowLeft':
-        if (!isMulti || inputValue) return;
+        if (!isMulti || inputValue || renderMultiOptions) return;
         focusValueOnArrowKey(ValueIndexEnum.PREVIOUS);
@@ -1419,3 +1420,3 @@ break;
       case 'ArrowRight':
-        if (!isMulti || inputValue) return;
+        if (!isMulti || inputValue || renderMultiOptions) return;
         focusValueOnArrowKey(ValueIndexEnum.NEXT);
@@ -1475,3 +1476,3 @@ break;
           if (isArrayWithLength(selectedOption)) {
-            if (isMulti) {
+            if (isMulti && !renderMultiOptions) {
               const {
@@ -1555,5 +1556,5 @@ value
 
-  return React__default.createElement(styled.ThemeProvider, {
+  return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
     theme: theme
-  }, React__default.createElement(SelectWrapper, {
+  }, /*#__PURE__*/React__default.createElement(SelectWrapper, {
     id: selectId,
@@ -1567,3 +1568,3 @@ role: 'combobox',
     className: addClassNames ? SELECT_CONTAINER_CLS : undefined
-  }, React__default.createElement(ControlWrapper, {
+  }, /*#__PURE__*/React__default.createElement(ControlWrapper, {
     ref: controlRef,
@@ -1577,3 +1578,3 @@ isInvalid: isInvalid,
     onTouchEnd: isTouchDevice ? handleOnControlMouseDown : undefined
-  }, React__default.createElement(ValueWrapper, null, React__default.createElement(Value, {
+  }, /*#__PURE__*/React__default.createElement(ValueWrapper, null, /*#__PURE__*/React__default.createElement(Value, {
     isMulti: isMulti,
@@ -1585,5 +1586,6 @@ inputValue: inputValue,
     focusedMultiValue: focusedMultiValue,
-    renderOptionLabel: renderOptionLabelCB,
+    renderOptionLabel: renderOptionLabelFn,
+    renderMultiOptions: renderMultiOptions,
     removeSelectedOption: removeSelectedOption
-  }), React__default.createElement(AutosizeInput, {
+  }), /*#__PURE__*/React__default.createElement(AutosizeInput, {
     id: inputId,
@@ -1599,3 +1601,3 @@ ref: inputRef,
     readOnly: isDisabled || !isSearchable || !!focusedMultiValue
-  })), React__default.createElement(IndicatorIcons, {
+  })), /*#__PURE__*/React__default.createElement(IndicatorIcons, {
     menuOpen: menuOpen,
@@ -1613,3 +1615,3 @@ clearIcon: clearIcon,
     onCaretMouseDown: !isDisabled && !openMenuOnClick ? handleOnCaretMouseDown : undefined
-  })), React__default.createElement(MenuWrapper, {
+  })), /*#__PURE__*/React__default.createElement(MenuWrapper, {
     ref: menuRef,
@@ -1621,3 +1623,3 @@ hideMenu: !menuOpen,
     className: addClassNames ? MENU_CONTAINER_CLS : undefined
-  }, React__default.createElement(Menu, {
+  }, /*#__PURE__*/React__default.createElement(Menu, {
     ref: listRef,
@@ -1633,5 +1635,5 @@ isLoading: isLoading,
     width: menuWidth || theme.menu.width,
-    renderOptionLabel: renderOptionLabelCB,
+    renderOptionLabel: renderOptionLabelFn,
     focusedOptionIndex: focusedOption.index
-  })), isAriaLiveEnabled && React__default.createElement(AriaLiveRegion, {
+  })), isAriaLiveEnabled && /*#__PURE__*/React__default.createElement(AriaLiveRegion, {
     menuOpen: menuOpen,
@@ -1638,0 +1640,0 @@ isFocused: isFocused,

dist/index.d.ts

@@ -6,3 +6,4 @@ import * as SelectModule from './Select';
 export declare type SelectProps = SelectModule.SelectProps;
+export declare type MultiParams = SelectModule.MultiParams;
 export { default as Select } from './Select';
 export { FilterMatchEnum, MenuPositionEnum } from './constants/enums';

dist/index.esm.js

@@ -168,7 +168,3 @@ import React, { useMemo, Fragment, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
 function scrollTo(el, top) {
-  if (isDocumentElement(el)) {
-    window.scrollTo(0, top);
-  } else {
-    el.scrollTop = top;
-  }
+  isDocumentElement(el) ? window.scrollTo(0, top) : el.scrollTop = top;
 }
@@ -293,3 +289,3 @@
 }
-function validateSetValueParam(values, menuOptions, getOptionValueCB) {
+function validateSetValueParam(values, menuOptions, getOptionValue) {
   if (values === null || values === undefined) {
@@ -301,3 +297,3 @@ return SELECTED_OPTION_DEFAULT;
   const validValues = normalizedVal.reduce((acc, x) => {
-    isPlainObject(x) && acc.push(getOptionValueCB(x));
+    isPlainObject(x) && acc.push(getOptionValue(x));
     return acc;
@@ -314,3 +310,3 @@ }, []);
   for (const option of menuOptions) {
-    if (validValuesUniq.includes(getOptionValueCB(option))) {
+    if (validValuesUniq.includes(getOptionValue(option))) {
       results.push(option);
@@ -326,6 +322,6 @@
 }
-function normalizeValue(value, getOptionValueCB, getOptionLabelCB) {
+function normalizeValue(value, getOptionValue, getOptionLabel) {
   const initialValues = Array.isArray(value) ? value.filter(Boolean) : isPlainObject(value) ? [value] : SELECTED_OPTION_DEFAULT;
 
-  if (!getOptionValueCB || !getOptionLabelCB || !isArrayWithLength(initialValues)) {
+  if (!getOptionValue || !getOptionLabel || !isArrayWithLength(initialValues)) {
     return initialValues;
@@ -336,8 +332,8 @@ }
     data: initVal,
-    value: getOptionValueCB(initVal),
-    label: getOptionLabelCB(initVal)
+    value: getOptionValue(initVal),
+    label: getOptionLabel(initVal)
   }));
 }
 
-const Option = React.memo(({
+const Option = /*#__PURE__*/React.memo(({
   index,
@@ -365,3 +361,3 @@ style,
   }, isSelected) : undefined;
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     style: style,
@@ -388,3 +384,3 @@ className: className,
 `;
-const Menu = React.forwardRef(({
+const Menu = /*#__PURE__*/React.forwardRef(({
   width,
@@ -410,6 +406,6 @@ height,
   if (isLoading) {
-    return React.createElement(NoOptionsMsg, null, loadingMsg);
+    return /*#__PURE__*/React.createElement(NoOptionsMsg, null, loadingMsg);
   }
 
-  return React.createElement(Fragment, null, React.createElement(FixedSizeList, {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FixedSizeList, {
     ref: ref,
@@ -422,3 +418,3 @@ width: width,
     itemCount: menuOptions.length
-  }, Option), !isArrayWithLength(menuOptions) && React.createElement(NoOptionsMsg, null, noOptionsMsg));
+  }, Option), !isArrayWithLength(menuOptions) && /*#__PURE__*/React.createElement(NoOptionsMsg, null, noOptionsMsg));
 });
@@ -492,3 +488,3 @@ Menu.displayName = 'Menu';
   removeSelectedOption
-}) => React.createElement(MultiValueWrapper, null, React.createElement(Label, null, renderOptionLabel(data)), React.createElement(Clear, {
+}) => /*#__PURE__*/React.createElement(MultiValueWrapper, null, /*#__PURE__*/React.createElement(Label, null, renderOptionLabel(data)), /*#__PURE__*/React.createElement(Clear, {
   isFocused: isFocused,
@@ -522,3 +518,3 @@ "data-testid": CLEAR_ICON_MV_TESTID,
 `;
-const Value = React.memo(({
+const Value = /*#__PURE__*/React.memo(({
   isMulti,
@@ -531,5 +527,6 @@ inputValue,
   renderOptionLabel,
+  renderMultiOptions,
   removeSelectedOption
 }) => {
-  if (inputValue && (!isMulti || isMulti && !isArrayWithLength(selectedOption))) {
+  if (inputValue && (!isMulti || isMulti && (!isArrayWithLength(selectedOption) || renderMultiOptions))) {
     return null;
@@ -539,3 +536,3 @@ }
   if (!isArrayWithLength(selectedOption)) {
-    return React.createElement(Placeholder, null, placeholder);
+    return /*#__PURE__*/React.createElement(Placeholder, null, placeholder);
   }
@@ -545,9 +542,12 @@
     const optionLabel = renderOptionLabel(selectedOption[0].data);
-    return React.createElement(SingleValue, null, optionLabel);
+    return /*#__PURE__*/React.createElement(SingleValue, null, optionLabel);
   }
 
-  return React.createElement(Fragment, null, selectedOption.map(({
+  return /*#__PURE__*/React.createElement(Fragment, null, renderMultiOptions ? renderMultiOptions({
+    selected: selectedOption,
+    renderOptionLabel
+  }) : selectedOption.map(({
     data,
     value
-  }) => React.createElement(MultiValue, {
+  }) => /*#__PURE__*/React.createElement(MultiValue, {
     key: value,
@@ -611,3 +611,3 @@ data: data,
 `;
-const AutosizeInput = React.memo(React.forwardRef(({
+const AutosizeInput = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
   id,
@@ -625,3 +625,3 @@ onBlur,
   const [inputWidth, setInputWidth] = useState(INPUT_MIN_WIDTH_PX);
-  const autosizeInputAttrs = Object.assign(Object.assign({}, STATIC_ATTRIBUTES), {}, {
+  const autosizeInputAttrs = Object.assign({}, STATIC_ATTRIBUTES, {
     'aria-label': ariaLabel,
@@ -638,3 +638,3 @@ 'aria-labelledby': ariaLabelledBy,
   }, [inputValue]);
-  return React.createElement(Fragment, null, React.createElement(Input, Object.assign({
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Input, Object.assign({
     id: id,
@@ -649,3 +649,3 @@ ref: ref,
     className: addClassNames ? AUTOSIZE_INPUT_CLS : undefined
-  })), React.createElement(SizerDiv, {
+  })), /*#__PURE__*/React.createElement(SizerDiv, {
     ref: sizerRef
@@ -693,6 +693,6 @@ }, inputValue));
   addClassNames
-}) => React.createElement(StyledLoadingDots, {
+}) => /*#__PURE__*/React.createElement(StyledLoadingDots, {
   "aria-hidden": 'true',
   className: addClassNames ? LOADING_DOTS_CLS : undefined
-}, React.createElement("div", null), React.createElement("div", null), React.createElement("div", null));
+}, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null));
 
@@ -777,3 +777,3 @@ const IndicatorIconsWrapper = styled.div`
 `;
-const IndicatorIcons = React.memo(({
+const IndicatorIcons = /*#__PURE__*/React.memo(({
   menuOpen,
@@ -803,20 +803,20 @@ clearIcon,
 
-  return React.createElement(IndicatorIconsWrapper, null, showClear && !isLoading && React.createElement(IndicatorIcon, {
+  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) || React.createElement(ClearSVG, {
+  }, renderCustomIcon(clearIcon) || /*#__PURE__*/React.createElement(ClearSVG, {
     "aria-hidden": 'true',
     viewBox: '0 0 14 16',
     className: addClassNames ? CLEAR_ICON_CLS : undefined
-  }, React.createElement("path", {
+  }, /*#__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 || React.createElement(LoadingDots, {
+  }))), isLoading && (loadingNode || /*#__PURE__*/React.createElement(LoadingDots, {
     addClassNames: addClassNames
-  })), React.createElement(Separator, null), React.createElement(IndicatorIcon, {
+  })), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(IndicatorIcon, {
     onMouseDown: onCaretMouseDown,
     "data-testid": CARET_ICON_TESTID,
     onTouchEnd: isTouchDevice ? onCaretMouseDown : undefined
-  }, renderCustomIcon(caretIcon) || React.createElement(Caret, {
+  }, renderCustomIcon(caretIcon) || /*#__PURE__*/React.createElement(Caret, {
     "aria-hidden": 'true',
@@ -870,6 +870,6 @@ menuOpen: menuOpen,
   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 React.createElement(A11yText, {
+  return /*#__PURE__*/React.createElement(A11yText, {
     "aria-live": 'polite',
     "data-testid": ARIA_LIVE_TESTID
-  }, React.createElement("p", null, selectedOptionMsg), React.createElement("p", null, `${focusedMsg} ${optionsMsg} ${menuMsg}`));
+  }, /*#__PURE__*/React.createElement("p", null, selectedOptionMsg), /*#__PURE__*/React.createElement("p", null, `${focusedMsg} ${optionsMsg} ${menuMsg}`));
 };
@@ -917,3 +917,3 @@
 
-const useMenuOptions = (options, debouncedInputValue, filterMatchFrom, selectedOption, getOptionValueCB, getOptionLabelCB, getIsOptionDisabled, getFilterOptionString, filterIgnoreCase, filterIgnoreAccents, isMulti, hideSelectedOptions, async) => {
+const useMenuOptions = (options, debouncedInputValue, filterMatchFrom, selectedOption, getOptionValue, getOptionLabel, getIsOptionDisabled, getFilterOptionString, filterIgnoreCase, filterIgnoreAccents, isMulti, hideSelectedOptions, async) => {
   const [menuOptions, setMenuOptions] = useState(OPTIONS_DEFAULT);
@@ -940,10 +940,10 @@ const searchValue = !async ? debouncedInputValue : '';
     const parseMenuOption = data => {
-      const value = getOptionValueCB(data);
-      const menuOption = Object.assign(Object.assign({
+      const value = getOptionValue(data);
+      const menuOption = Object.assign({
         data,
         value,
-        label: getOptionLabelCB(data)
+        label: getOptionLabel(data)
       }, getIsOptionDisabledOrDefault(data) && {
         isDisabled: true
-      }), selectedValues && selectedValues.includes(value) && {
+      }, selectedValues && selectedValues.includes(value) && {
         isSelected: true
@@ -965,3 +965,3 @@ });
     setMenuOptions(menuOptionsOrDefault);
-  }, [options, selectedOption, searchValue, hideSelectedOptionsOrDefault, filterMatchFrom, filterIgnoreCase, filterIgnoreAccents, getFilterOptionString, getIsOptionDisabled, getOptionValueCB, getOptionLabelCB]);
+  }, [options, selectedOption, searchValue, hideSelectedOptionsOrDefault, filterMatchFrom, filterIgnoreCase, filterIgnoreAccents, getFilterOptionString, getIsOptionDisabled, getOptionValue, getOptionLabel]);
   return menuOptions;
@@ -1144,3 +1144,3 @@ };
 `;
-const Select = React.forwardRef(({
+const Select = /*#__PURE__*/React.forwardRef(({
   async,
@@ -1180,2 +1180,3 @@ isMulti,
   renderOptionLabel,
+  renderMultiOptions,
   menuScrollDuration,
@@ -1218,9 +1219,9 @@ filterIgnoreAccents,
   }, [themeConfig]);
-  const getOptionLabelCB = useMemo(() => getOptionLabel || (data => data.label), [getOptionLabel]);
-  const getOptionValueCB = useMemo(() => getOptionValue || (data => data.value), [getOptionValue]);
-  const renderOptionLabelCB = useMemo(() => renderOptionLabel || getOptionLabelCB, [renderOptionLabel, getOptionLabelCB]);
+  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, getOptionValueCB, getOptionLabelCB));
+  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, getOptionValueCB, getOptionLabelCB, getIsOptionDisabled, getFilterOptionString, filterIgnoreCase, filterIgnoreAccents, isMulti, hideSelectedOptions, async);
+  const menuOptions = useMenuOptions(options, debouncedInputValue, filterMatchFrom, selectedOption, getOptionValueFn, getOptionLabelFn, getIsOptionDisabled, getFilterOptionString, filterIgnoreCase, filterIgnoreAccents, isMulti, hideSelectedOptions, async);
 
@@ -1289,3 +1290,3 @@ const blurInput = () => {
     setValue: option => {
-      const validatedSelectedOption = validateSetValueParam(option, menuOptions, getOptionValueCB);
+      const validatedSelectedOption = validateSetValueParam(option, menuOptions, getOptionValueFn);
       setSelectedOption(validatedSelectedOption);
@@ -1409,3 +1410,3 @@ },
       case 'ArrowLeft':
-        if (!isMulti || inputValue) return;
+        if (!isMulti || inputValue || renderMultiOptions) return;
         focusValueOnArrowKey(ValueIndexEnum.PREVIOUS);
@@ -1415,3 +1416,3 @@ break;
       case 'ArrowRight':
-        if (!isMulti || inputValue) return;
+        if (!isMulti || inputValue || renderMultiOptions) return;
         focusValueOnArrowKey(ValueIndexEnum.NEXT);
@@ -1471,3 +1472,3 @@ break;
           if (isArrayWithLength(selectedOption)) {
-            if (isMulti) {
+            if (isMulti && !renderMultiOptions) {
               const {
@@ -1551,5 +1552,5 @@ value
 
-  return React.createElement(ThemeProvider, {
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
-  }, React.createElement(SelectWrapper, {
+  }, /*#__PURE__*/React.createElement(SelectWrapper, {
     id: selectId,
@@ -1563,3 +1564,3 @@ role: 'combobox',
     className: addClassNames ? SELECT_CONTAINER_CLS : undefined
-  }, React.createElement(ControlWrapper, {
+  }, /*#__PURE__*/React.createElement(ControlWrapper, {
     ref: controlRef,
@@ -1573,3 +1574,3 @@ isInvalid: isInvalid,
     onTouchEnd: isTouchDevice ? handleOnControlMouseDown : undefined
-  }, React.createElement(ValueWrapper, null, React.createElement(Value, {
+  }, /*#__PURE__*/React.createElement(ValueWrapper, null, /*#__PURE__*/React.createElement(Value, {
     isMulti: isMulti,
@@ -1581,5 +1582,6 @@ inputValue: inputValue,
     focusedMultiValue: focusedMultiValue,
-    renderOptionLabel: renderOptionLabelCB,
+    renderOptionLabel: renderOptionLabelFn,
+    renderMultiOptions: renderMultiOptions,
     removeSelectedOption: removeSelectedOption
-  }), React.createElement(AutosizeInput, {
+  }), /*#__PURE__*/React.createElement(AutosizeInput, {
     id: inputId,
@@ -1595,3 +1597,3 @@ ref: inputRef,
     readOnly: isDisabled || !isSearchable || !!focusedMultiValue
-  })), React.createElement(IndicatorIcons, {
+  })), /*#__PURE__*/React.createElement(IndicatorIcons, {
     menuOpen: menuOpen,
@@ -1609,3 +1611,3 @@ clearIcon: clearIcon,
     onCaretMouseDown: !isDisabled && !openMenuOnClick ? handleOnCaretMouseDown : undefined
-  })), React.createElement(MenuWrapper, {
+  })), /*#__PURE__*/React.createElement(MenuWrapper, {
     ref: menuRef,
@@ -1617,3 +1619,3 @@ hideMenu: !menuOpen,
     className: addClassNames ? MENU_CONTAINER_CLS : undefined
-  }, React.createElement(Menu, {
+  }, /*#__PURE__*/React.createElement(Menu, {
     ref: listRef,
@@ -1629,5 +1631,5 @@ isLoading: isLoading,
     width: menuWidth || theme.menu.width,
-    renderOptionLabel: renderOptionLabelCB,
+    renderOptionLabel: renderOptionLabelFn,
     focusedOptionIndex: focusedOption.index
-  })), isAriaLiveEnabled && React.createElement(AriaLiveRegion, {
+  })), isAriaLiveEnabled && /*#__PURE__*/React.createElement(AriaLiveRegion, {
     menuOpen: menuOpen,
@@ -1634,0 +1636,0 @@ isFocused: isFocused,

dist/Select.d.ts

 import React, { KeyboardEventHandler, FocusEventHandler, ReactNode, ReactText } from 'react';
 import { DefaultTheme } from 'styled-components';
-import { IndicatorIconsProps } from './types';
+import { SelectedOption, IndicatorIconsProps } from './types';
 declare type OptionData = any;
@@ -20,2 +20,6 @@ export declare type Theme = Partial<DefaultTheme>;
 };
+export declare type MultiParams = {
+    readonly selected: SelectedOption[];
+    readonly renderOptionLabel: (data: OptionData) => ReactNode;
+};
 export declare type SelectProps = {
@@ -74,2 +78,3 @@ readonly async?: boolean;
     readonly getFilterOptionString?: (option: MenuOption) => string;
+    readonly renderMultiOptions?: (params: MultiParams) => ReactNode;
     readonly clearIcon?: ReactNode | ((state: Partial<IndicatorIconsProps>) => ReactNode);
@@ -76,0 +81,0 @@ readonly caretIcon?: ReactNode | ((state: Partial<IndicatorIconsProps>) => ReactNode);

dist/utils.d.ts

@@ -12,3 +12,3 @@ import { ReactText } from 'react';
 export declare function scrollMenuIntoViewOnOpen(menuEl: HTMLElement | null, menuScrollDuration: number | undefined, scrollMenuIntoView: boolean | undefined, handleOnMenuOpen: (availableSpace?: number) => void): void;
-export declare function validateSetValueParam(values: any, menuOptions: MenuOption[], getOptionValueCB: (data: OptionData) => ReactText): SelectedOption[];
-export declare function normalizeValue(value: any, getOptionValueCB?: (data: OptionData) => ReactText, getOptionLabelCB?: (data: OptionData) => ReactText): SelectedOption[];
+export declare function validateSetValueParam(values: any, menuOptions: MenuOption[], getOptionValue: (data: OptionData) => ReactText): SelectedOption[];
+export declare function normalizeValue(value: any, getOptionValue?: (data: OptionData) => ReactText, getOptionLabel?: (data: OptionData) => ReactText): SelectedOption[];

package.json

 {
   "name": "react-functional-select",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "author": "Matt Areddia <[e-mail]> (https://github.com/based-ghost/)",
@@ -45,19 +45,19 @@ "description": "Miro-sized and micro-optimized select component for React.js",
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.6",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
+    "@babel/cli": "^7.10.1",
+    "@babel/core": "^7.10.1",
+    "@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.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "@babel/preset-react": "^7.9.4",
-    "@babel/preset-typescript": "^7.9.0",
-    "@storybook/addon-storysource": "^5.3.18",
-    "@storybook/addons": "^5.3.18",
-    "@storybook/preset-create-react-app": "^2.1.2",
-    "@storybook/react": "^5.3.18",
-    "@testing-library/jest-dom": "^5.8.0",
+    "@babel/plugin-transform-runtime": "^7.10.1",
+    "@babel/preset-env": "^7.10.1",
+    "@babel/preset-react": "^7.10.1",
+    "@babel/preset-typescript": "^7.10.1",
+    "@storybook/addon-storysource": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/preset-create-react-app": "^3.0.0",
+    "@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.4",
+    "@types/node": "^14.0.6",
     "@types/react": "^16.9.35",
@@ -67,4 +67,4 @@ "@types/react-dom": "^16.9.8",
     "@types/styled-components": "^5.1.0",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
+    "@typescript-eslint/eslint-plugin": "^3.0.2",
+    "@typescript-eslint/parser": "^3.0.2",
     "babel-jest": "^26.0.1",
@@ -75,3 +75,3 @@ "babel-loader": "^8.1.0",
     "enzyme": "^3.11.0",
-    "eslint": "^7.0.0",
+    "eslint": "^7.1.0",
     "eslint-config-poetez": "^0.2.0",
@@ -94,3 +94,3 @@ "eslint-config-prettier": "^6.11.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.10.5",
+    "rollup": "^2.11.2",
     "rollup-plugin-babel": "^4.4.0",
@@ -100,5 +100,5 @@ "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-terser": "^5.3.0",
+    "rollup-plugin-terser": "^6.1.0",
     "rollup-plugin-typescript2": "^0.27.1",
-    "styled-components": "^5.1.0",
+    "styled-components": "^5.1.1",
     "tslint": "^6.1.2",
@@ -109,3 +109,2 @@ "tslint-config-poetez": "^2.0.0",
     "typescript": "^3.9.3",
-    "unorm": "^1.6.0",
     "webpack": "^4.43.0",
@@ -112,0 +111,0 @@ "webpack-merge": "^4.2.2"

README.md

@@ -167,2 +167,3 @@ # react-functional-select
 |`renderOptionLabel`| (data: any): ReactNode | `undefined` | Formats option labels in the menu and control as JSX.Elements or React Components (by default will use `getOptionLabel`)
+|`renderMultiOptions`| (params: MultiParams): ReactNode | `undefined` | Allows for customization as to how multi-select options should be formatted. The `MultiParams` contains the array of selected options `{ selected: Array<{ data: any, value: ReactText, label: ReactText}>, renderOptionLabel: (data: any): ReactNode }`. Left and right arrow key navigation will also be disabled when this property is defined.
 |`getIsOptionDisabled`| (data: any): boolean | `undefined` | When defined will evaluate each option to determine whether it is disabled or not (if not specified, each option will be evaluated as to whether or not it contains a property of `isDisabled` with a value of `true`)
@@ -169,0 +170,0 @@ |`getFilterOptionString`| (option: any): string | `undefined` | When defined will take each option and generate a string used in the filtering process (by default, will use option.label)

No alert changes

Improved metrics

Total package byte prevSize

172525

increased by1.43%

Dev dependency count

61

decreased by-1.61%

Lines of code

3618

increased by0.17%

Number of lines in readme file

178

increased by0.56%

No dependency changes