react-functional-select - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

dist/hooks/index.d.ts

 export { useDebounce } from './useDebounce';
 export { useMenuOptions } from './useMenuOptions';
 export { useUpdateEffect } from './useUpdateEffect';
+export { useIsTouchDevice } from './useIsTouchDevice';
 export { useMenuPositioner } from './useMenuPositioner';

dist/index-dev.umd.js

@@ -13,6 +13,6 @@ !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`
   }
-`,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:{fontWeight:900,fontSize:"0.85em",animation:d,transition:"color 0.15s ease-in-out",fontFamily:"Helvetica, Arial, sans-serif"},caret:{size:"7px",transition:"transform 0.225s 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=/MSIE|Trident/,h=/[\u0300-\u036f]/g;function b(e){return e===document.documentElement||e===document.body||e===window}function v(e){return b(e)?window.pageYOffset:e.scrollTop}function $(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 w(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(h,"")}(o):o}function C(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 E=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);E.displayName="Option";const S=r.div`
+`,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.225s 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=/MSIE|Trident/,h=/[\u0300-\u036f]/g;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(h,"")}(o):o}function C(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 E=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);E.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  `}
-`,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},E),!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},E),!x(s)&&i.createElement(S,null,c))});M.displayName="Menu";const k=r.div`
   min-width: 0;
@@ -27,6 +27,6 @@ display: flex;
   ${({theme:{multiValue:{label:e}}})=>`\n    padding: ${e.padding};\n    font-size: ${e.fontSize};\n    border-radius: ${e.borderRadius};\n  `}
-`,z=r.div`
+`,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  `}
-`,D=({data:e,value:n,isFocused:t,renderOptionLabel:o,removeSelectedOption:r})=>i.createElement(M,null,i.createElement(I,null,o(e)),i.createElement(z,{"aria-hidden":"true",isFocused:t,"data-testid":void 0,onTouchEnd:e=>r(n,e),onMouseDown:e=>r(n,e)},"X")),R=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%;
@@ -40,3 +40,3 @@ overflow: hidden;
   max-width: calc(100% - 0.5rem);
-`,L=r.div`
+`,R=r.div`
   top: 50%;
@@ -50,3 +50,3 @@ overflow: hidden;
   color: ${({theme:e})=>e.color.placeholder};
-`,N=i.memo(({isMulti:e,inputValue:t,placeholder:o,selectedOption:r,focusedMultiValue:a,renderOptionLabel:l,removeSelectedOption:s})=>{if(t&&(!e||e&&!x(r)))return null;if(!x(r))return i.createElement(L,null,o);if(!e){const e=l(r[0].data);return i.createElement(R,null,e)}return i.createElement(n.Fragment,null,r.map(({data:e,value:n})=>i.createElement(D,{key:n,data:e,value:n,renderOptionLabel:l,isFocused:n===a,removeSelectedOption:s})))});N.displayName="Value";const T={type:"text",spellCheck:!1,autoCorrect:"off",autoComplete:"off",autoCapitalize:"none","aria-autocomplete":"list","data-testid":void 0},F=r.div`
+`,L=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(R,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})))});L.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;
@@ -63,3 +63,3 @@ left: 0;
   ${({theme:e})=>e.input.css}
-`,A=r.input`
+`,F=r.input`
   border: 0;
@@ -83,3 +83,3 @@ outline: 0;
   ${()=>g.test(window.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({},T),{},{"aria-label":l,"aria-labelledby":c});return n.useEffect(()=>{p.current&&f(p.current.scrollWidth+2)},[s]),i.createElement(n.Fragment,null,i.createElement(A,Object.assign({id:e,ref:u,onBlur:t,onFocus:o,value:s,readOnly:r},g,{style:{width:m},onChange:r?void 0:a,className:d?"rfs-autosize-input":void 0})),i.createElement(F,{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(Object.assign({},N),{},{"aria-label":l,"aria-labelledby":c});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,{style:{width:m},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;
@@ -118,6 +118,6 @@ align-self: center;
   ${({theme:e})=>e.icon.css}
-`,Y=r.div`
-  overflow: hidden;
+`,Y=r.svg`
+  fill: currentColor;
   animation: ${({theme:e})=>t.css`${e.icon.clear.animation}`};
-  ${({theme:{icon:{clear:e}}})=>`\n    font-size: ${e.fontSize};\n    transition: ${e.transition};\n    font-weight: ${e.fontWeight};\n    font-family: ${e.fontFamily};\n  `}
+  ${({theme:{icon:{clear:e}}})=>`\n    width: ${e.width};\n    height: ${e.height};\n    transition: ${e.transition};\n  `}
 `,q=r.div`
@@ -127,3 +127,3 @@ ${({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    `}
-`,H=r.div`
+`,U=r.div`
   width: 1px;
@@ -134,3 +134,3 @@ margin: 0.5rem 0;
   background-color: ${({theme:e})=>e.color.iconSeparator||e.color.border};
-`,U=i.memo(({menuOpen:e,clearIcon:n,caretIcon:t,isInvalid:o,showClear:r,isLoading:a,loadingNode:l,addClassNames:s,onCaretMouseDown:d,onClearMouseDown:c})=>i.createElement(j,null,r&&!a&&i.createElement(W,{"aria-hidden":"true",onTouchEnd:c,onMouseDown:c,"data-testid":void 0},n||i.createElement(Y,{className:s?"rfs-clear-icon":void 0},"X")),a&&(l||i.createElement(P,{addClassNames:s})),i.createElement(H,null),i.createElement(W,{"aria-hidden":"true",onTouchEnd:d,onMouseDown:d,"data-testid":void 0},t||i.createElement(q,{menuOpen:e,isInvalid:o,className:s?"rfs-caret-icon":void 0}))));U.displayName="IndicatorIcons";const K=r.span`
+`,H=i.memo(({menuOpen:e,clearIcon:n,caretIcon:t,isInvalid:o,showClear:r,isLoading:a,loadingNode:l,isTouchDevice:s,addClassNames:d,onCaretMouseDown:c,onClearMouseDown:u})=>i.createElement(j,null,r&&!a&&i.createElement(W,{onMouseDown:u,"data-testid":void 0,onTouchEnd:s?u:void 0},n||i.createElement(Y,{"aria-hidden":"true",viewBox:"0 0 14 16",className:d?"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:d})),i.createElement(U,null),i.createElement(W,{onMouseDown:c,"data-testid":void 0,onTouchEnd:s?c:void 0},t||i.createElement(q,{"aria-hidden":"true",menuOpen:e,isInvalid:o,className:d?"rfs-caret-icon":void 0}))));H.displayName="IndicatorIcons";const K=r.span`
   border: 0;
@@ -146,3 +146,3 @@ padding: 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,$="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)||$&&i.isSelected))return i},h=t.reduce((e,n)=>{const t=g(n);return t&&e.push(t),e},[]);b(h)},[t,r,v,$,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=$(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=$(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);w(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(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;
@@ -188,2 +188,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:$,isDisabled:w,inputDelay:O,onMenuOpen:E,onMenuClose:S,onInputBlur:M,isClearable:I,themeConfig:z,loadingNode:D,initialValue:R,onInputFocus:L,onInputChange:T,addClassNames:F,ariaLabelledBy:A,onOptionChange:V,onSearchChange:P,getOptionLabel:j,getOptionValue:W,openMenuOnFocus:Y,isAriaLiveEnabled:q,menuOverscanCount:H,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:$e=!0,backspaceClearsValue:we=!0,filterMatchFrom:xe=e.FilterMatchEnum.ANY,menuPosition:ye=e.MenuPositionEnum.BOTTOM,options:Oe=u,loadingMsg:Ce="Loading...",placeholder:Ee="Select option...",noOptionsMsg:Se="No options",menuItemSize:ke=35,menuMaxHeight:Me=300},Ie)=>{const ze=n.useRef(),De=n.useRef(!1),Re=n.useRef(null),Le=n.useRef(null),Ne=n.useRef(null),Te=n.useRef(null),[Fe,Ae]=n.useState(""),[Be,Ve]=n.useState(!1),[Pe,je]=n.useState(!1),[We,Ye]=n.useState(m),[qe,He]=n.useState(null),Ue=n.useMemo(()=>y(z)?function e(n,t){const o=Object.assign({},n);return Object.keys(t).forEach(i=>{const r=t[i];o[i]=y(r)&&"animation"!==i?i in n?e(n[i],r):r:r||""}),o}(c,z):c,[z]),Ke=n.useMemo(()=>j||(e=>e.label),[j]),Xe=n.useMemo(()=>W||(e=>e.value),[W]),_e=n.useMemo(()=>_||Ke,[_,Ke]),Ge=((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})(Fe,O),[Je,Qe]=n.useState(()=>C(R,Xe,Ke)),[Ze,en]=re(Le,Be,ye,Me,G,$e,E,S),nn=oe(Oe,Ge,xe,Je,Xe,Ke,pe,me,he,ce,r,ue,o),tn=()=>{Ne.current.blur()},on=()=>{Ne.current.focus()},rn=e=>{Re.current&&Re.current.scrollToItem(e)},an=n.useCallback((e,n)=>{n&&(n.stopPropagation(),"mousedown"===n.type&&n.preventDefault()),Qe(n=>n.filter(n=>n.value!==e))},[]),ln=n.useCallback(e=>{if(!x(nn))return void Ve(!0);const n=r?-1:nn.findIndex(({isSelected:e})=>e),t=n>-1?n:e===ne?0:nn.length-1;Ve(!0),Ye(Object.assign({index:t},nn[t])),rn(t)},[r,nn]),sn=n.useCallback((e,n)=>{n?r&&an(e.value):Qe(n=>r?[...n,e]:[e]),("boolean"==typeof K?K:window.matchMedia("(pointer: coarse)").matches)?tn():ve&&(Ve(!1),Ae(""))},[r,ve,K,an]);n.useImperativeHandle(Ie,()=>({blur:tn,focus:on,clearValue:()=>{Qe(p),Ye(m)},setValue:e=>{const n=function(e,n,t){if(null==e)return p;const o=C(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,nn,Xe);Qe(n)},toggleMenu:e=>{!0===e||void 0===e&&!Be?(!Pe&&on(),ln(ne)):tn()}})),n.useEffect(()=>{s&&on()},[s]),n.useEffect(()=>{Pe&&Y&&ln(ne)},[Pe,Y,ln]),n.useEffect(()=>{P&&De.current&&(De.current=!1,P(Ge))},[P,Ge]),ie(()=>{if(V){const e=r?Je.map(({data:e})=>e):x(Je)?Je[0].data:null;V(e)}},[r,Je,V]),ie(()=>{const e=nn.length,n=e>0&&(o||e!==Oe.length||0===ze.current);0===e?Ye(m):(1===e||n)&&(Ye(Object.assign({index:0},nn[0])),rn(0)),ze.current=e},[o,Oe,nn]);const dn=()=>{const{data:e,value:n,label:t,isSelected:o,isDisabled:i}=We;e&&!i&&sn({data:e,value:n,label:t},o)},cn=e=>{if(!x(Je))return;let n=-1;const t=Je.length-1,o=qe?Je.findIndex(({value:e})=>e===qe):-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?Je[n].value:null;We.data&&Ye(m),i!==qe&&He(i)},un=e=>{if(!x(nn))return;const n=e===ee?(We.index+1)%nn.length:We.index>0?We.index-1:nn.length-1;qe&&He(null),Ye(Object.assign({index:n},nn[n])),rn(n)},pn=e=>{if(w)return;Pe||on();const n="INPUT"!==e.currentTarget.tagName;Be?n&&(Ve(!1),Fe&&Ae("")):ge&&ln(ne),n&&e.preventDefault()},mn=n.useCallback(e=>{M&&M(e),je(!1),Ve(!1),Ae("")},[M]),fn=n.useCallback(e=>{L&&L(e),je(!0)},[L]),gn=n.useCallback(e=>{De.current=!0,T&&T(e.currentTarget.value||""),Ve(!0),Ae(e.currentTarget.value||"")},[T]),hn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),Qe(p),on()},[]),bn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),on(),Be?Ve(!1):ln(ne)},[Be,ln]),vn=Math.min(Ze,nn.length*ke);return i.createElement(t.ThemeProvider,{theme:Ue},i.createElement(ae,{id:l,role:"combobox","aria-haspopup":"listbox","aria-controls":a,onKeyDown:e=>{if(!(w||f&&(f(e),e.defaultPrevented))){switch(e.key){case"ArrowDown":Be?un(ee):ln(ne);break;case"ArrowUp":Be?un(Z):ln(te);break;case"ArrowLeft":if(!r||Fe)return;cn(Q);break;case"ArrowRight":if(!r||Fe)return;cn(J);break;case" ":if(Fe)return;if(!Be){ln(ne);break}if(!We.data)return;dn();break;case"Enter":Be&&229!==e.keyCode&&dn();break;case"Escape":Be&&(Ve(!1),Ae(""));break;case"Tab":if(!Be||!be||!We.data||e.shiftKey)return;dn();break;case"Delete":case"Backspace":if(Fe)return;if(qe){const e=Je.findIndex(({value:e})=>e===qe),n=e>-1&&e<Je.length-1?Je[e+1].value:null;an(qe),He(n)}else{if(!we)return;if(x(Je))if(r){const{value:e}=Je[Je.length-1];an(e)}else I&&Qe(p)}break;default:return}e.preventDefault()}},"data-testid":void 0,"aria-expanded":Be?"true":"false",className:F?"rfs-select-container":void 0},i.createElement(se,{ref:Te,isInvalid:b,isFocused:Pe,isDisabled:w,onTouchEnd:pn,onMouseDown:pn,"data-testid":void 0,className:F?"rfs-control-container":void 0},i.createElement(le,null,i.createElement(N,{isMulti:r,inputValue:Fe,placeholder:Ee,selectedOption:Je,focusedMultiValue:qe,renderOptionLabel:_e,removeSelectedOption:an}),i.createElement(B,{id:a,ref:Ne,ariaLabel:v,inputValue:Fe,onBlur:mn,onFocus:fn,addClassNames:F,onChange:gn,ariaLabelledBy:A,readOnly:w||!fe||!!qe})),i.createElement(U,{menuOpen:Be,clearIcon:g,caretIcon:h,isInvalid:b,isLoading:d,loadingNode:D,addClassNames:F,onClearMouseDown:hn,showClear:!(!I||w||!x(Je)),onCaretMouseDown:w||ge?void 0:bn})),i.createElement(de,{ref:Le,hideMenu:!Be,menuTop:en?((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)`})(vn,Le.current,Te.current):void 0,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),on()},"data-testid":void 0,className:F?"rfs-menu-container":void 0},i.createElement(k,{ref:Re,isLoading:d,height:vn,itemSize:ke,loadingMsg:Ce,menuOptions:nn,noOptionsMsg:Se,selectOption:sn,overscanCount:H,width:$||Ue.menu.width,renderOptionLabel:_e,focusedOptionIndex:We.index})),q&&i.createElement(X,{menuOpen:Be,isFocused:Pe,ariaLabel:v,inputValue:Fe,isSearchable:fe,focusedOption:We,selectedOption:Je,optionCount:nn.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:E,onMenuClose:S,onInputBlur:k,isClearable:I,themeConfig:D,loadingNode:z,initialValue:T,onInputFocus:R,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:Ce="Loading...",placeholder:Ee="Select option...",noOptionsMsg:Se="No options",menuItemSize:Me=35,menuMaxHeight:ke=300},Ie)=>{const De=n.useRef(),ze=n.useRef(!1),Te=n.useRef(null),Re=n.useRef(null),Le=n.useRef(null),Ne=n.useRef(null),Ae=(()=>{const e=n.useRef(null);return null===e.current?(e.current=window.matchMedia("(pointer: coarse)").matches,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=>{const r=t[i];o[i]=y(r)&&"animation"!==i?i in n?e(n[i],r):r:r||""}),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(()=>C(T,Ge,_e)),[nn,tn]=re(Re,Pe,ye,ke,G,we,E,S),on=oe(Oe,Qe,xe,Ze,Ge,_e,pe,me,he,ce,r,ue,o),rn=()=>{Le.current.blur()},an=()=>{Le.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(n=>n.value!==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=C(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=>{k&&k(e),Ye(!1),je(!1),Ve("")},[k]),hn=n.useCallback(e=>{R&&R(e),Ye(!0)},[R]),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*Me);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(L,{isMulti:r,inputValue:Be,placeholder:Ee,isTouchDevice:Ae,selectedOption:Ze,focusedMultiValue:He,renderOptionLabel:Je,removeSelectedOption:sn}),i.createElement(B,{id:a,ref:Le,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,loadingNode:z,addClassNames:A,isTouchDevice:Ae,onClearMouseDown:vn,showClear:!(!I||$||!x(Ze)),onCaretMouseDown:$||ge?void 0:wn})),i.createElement(de,{ref:Re,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,Re.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(M,{ref:Te,isLoading:d,height:$n,itemSize:Me,loadingMsg:Ce,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})}));

dist/index-prod.umd.js

@@ -13,6 +13,6 @@ !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`
   }
-`,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:{fontWeight:900,fontSize:"0.85em",animation:d,transition:"color 0.15s ease-in-out",fontFamily:"Helvetica, Arial, sans-serif"},caret:{size:"7px",transition:"transform 0.225s 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=/MSIE|Trident/,h=/[\u0300-\u036f]/g;function b(e){return e===document.documentElement||e===document.body||e===window}function v(e){return b(e)?window.pageYOffset:e.scrollTop}function $(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 w(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(h,"")}(o):o}function C(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 E=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);E.displayName="Option";const S=r.div`
+`,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.225s 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=/MSIE|Trident/,h=/[\u0300-\u036f]/g;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(h,"")}(o):o}function C(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 E=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);E.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  `}
-`,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},E),!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},E),!x(s)&&i.createElement(S,null,c))});M.displayName="Menu";const k=r.div`
   min-width: 0;
@@ -27,6 +27,6 @@ display: flex;
   ${({theme:{multiValue:{label:e}}})=>`\n    padding: ${e.padding};\n    font-size: ${e.fontSize};\n    border-radius: ${e.borderRadius};\n  `}
-`,z=r.div`
+`,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  `}
-`,D=({data:e,value:n,isFocused:t,renderOptionLabel:o,removeSelectedOption:r})=>i.createElement(M,null,i.createElement(I,null,o(e)),i.createElement(z,{"aria-hidden":"true",isFocused:t,"data-testid":void 0,onTouchEnd:e=>r(n,e),onMouseDown:e=>r(n,e)},"X")),R=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%;
@@ -40,3 +40,3 @@ overflow: hidden;
   max-width: calc(100% - 0.5rem);
-`,L=r.div`
+`,R=r.div`
   top: 50%;
@@ -50,3 +50,3 @@ overflow: hidden;
   color: ${({theme:e})=>e.color.placeholder};
-`,N=i.memo(({isMulti:e,inputValue:t,placeholder:o,selectedOption:r,focusedMultiValue:a,renderOptionLabel:l,removeSelectedOption:s})=>{if(t&&(!e||e&&!x(r)))return null;if(!x(r))return i.createElement(L,null,o);if(!e){const e=l(r[0].data);return i.createElement(R,null,e)}return i.createElement(n.Fragment,null,r.map(({data:e,value:n})=>i.createElement(D,{key:n,data:e,value:n,renderOptionLabel:l,isFocused:n===a,removeSelectedOption:s})))});N.displayName="Value";const T={type:"text",spellCheck:!1,autoCorrect:"off",autoComplete:"off",autoCapitalize:"none","aria-autocomplete":"list","data-testid":void 0},F=r.div`
+`,L=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(R,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})))});L.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;
@@ -63,3 +63,3 @@ left: 0;
   ${({theme:e})=>e.input.css}
-`,A=r.input`
+`,F=r.input`
   border: 0;
@@ -83,3 +83,3 @@ outline: 0;
   ${()=>g.test(window.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({},T),{},{"aria-label":l,"aria-labelledby":c});return n.useEffect(()=>{p.current&&f(p.current.scrollWidth+2)},[s]),i.createElement(n.Fragment,null,i.createElement(A,Object.assign({id:e,ref:u,onBlur:t,onFocus:o,value:s,readOnly:r},g,{style:{width:m},onChange:r?void 0:a,className:d?"rfs-autosize-input":void 0})),i.createElement(F,{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(Object.assign({},N),{},{"aria-label":l,"aria-labelledby":c});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,{style:{width:m},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;
@@ -118,6 +118,6 @@ align-self: center;
   ${({theme:e})=>e.icon.css}
-`,Y=r.div`
-  overflow: hidden;
+`,Y=r.svg`
+  fill: currentColor;
   animation: ${({theme:e})=>t.css`${e.icon.clear.animation}`};
-  ${({theme:{icon:{clear:e}}})=>`\n    font-size: ${e.fontSize};\n    transition: ${e.transition};\n    font-weight: ${e.fontWeight};\n    font-family: ${e.fontFamily};\n  `}
+  ${({theme:{icon:{clear:e}}})=>`\n    width: ${e.width};\n    height: ${e.height};\n    transition: ${e.transition};\n  `}
 `,q=r.div`
@@ -127,3 +127,3 @@ ${({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    `}
-`,H=r.div`
+`,U=r.div`
   width: 1px;
@@ -134,3 +134,3 @@ margin: 0.5rem 0;
   background-color: ${({theme:e})=>e.color.iconSeparator||e.color.border};
-`,U=i.memo(({menuOpen:e,clearIcon:n,caretIcon:t,isInvalid:o,showClear:r,isLoading:a,loadingNode:l,addClassNames:s,onCaretMouseDown:d,onClearMouseDown:c})=>i.createElement(j,null,r&&!a&&i.createElement(W,{"aria-hidden":"true",onTouchEnd:c,onMouseDown:c,"data-testid":void 0},n||i.createElement(Y,{className:s?"rfs-clear-icon":void 0},"X")),a&&(l||i.createElement(P,{addClassNames:s})),i.createElement(H,null),i.createElement(W,{"aria-hidden":"true",onTouchEnd:d,onMouseDown:d,"data-testid":void 0},t||i.createElement(q,{menuOpen:e,isInvalid:o,className:s?"rfs-caret-icon":void 0}))));U.displayName="IndicatorIcons";const K=r.span`
+`,H=i.memo(({menuOpen:e,clearIcon:n,caretIcon:t,isInvalid:o,showClear:r,isLoading:a,loadingNode:l,isTouchDevice:s,addClassNames:d,onCaretMouseDown:c,onClearMouseDown:u})=>i.createElement(j,null,r&&!a&&i.createElement(W,{onMouseDown:u,"data-testid":void 0,onTouchEnd:s?u:void 0},n||i.createElement(Y,{"aria-hidden":"true",viewBox:"0 0 14 16",className:d?"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:d})),i.createElement(U,null),i.createElement(W,{onMouseDown:c,"data-testid":void 0,onTouchEnd:s?c:void 0},t||i.createElement(q,{"aria-hidden":"true",menuOpen:e,isInvalid:o,className:d?"rfs-caret-icon":void 0}))));H.displayName="IndicatorIcons";const K=r.span`
   border: 0;
@@ -146,3 +146,3 @@ padding: 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,$="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)||$&&i.isSelected))return i},h=t.reduce((e,n)=>{const t=g(n);return t&&e.push(t),e},[]);b(h)},[t,r,v,$,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=$(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=$(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);w(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(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;
@@ -188,2 +188,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:$,isDisabled:w,inputDelay:O,onMenuOpen:E,onMenuClose:S,onInputBlur:M,isClearable:I,themeConfig:z,loadingNode:D,initialValue:R,onInputFocus:L,onInputChange:T,addClassNames:F,ariaLabelledBy:A,onOptionChange:V,onSearchChange:P,getOptionLabel:j,getOptionValue:W,openMenuOnFocus:Y,isAriaLiveEnabled:q,menuOverscanCount:H,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:$e=!0,backspaceClearsValue:we=!0,filterMatchFrom:xe=e.FilterMatchEnum.ANY,menuPosition:ye=e.MenuPositionEnum.BOTTOM,options:Oe=u,loadingMsg:Ce="Loading...",placeholder:Ee="Select option...",noOptionsMsg:Se="No options",menuItemSize:ke=35,menuMaxHeight:Me=300},Ie)=>{const ze=n.useRef(),De=n.useRef(!1),Re=n.useRef(null),Le=n.useRef(null),Ne=n.useRef(null),Te=n.useRef(null),[Fe,Ae]=n.useState(""),[Be,Ve]=n.useState(!1),[Pe,je]=n.useState(!1),[We,Ye]=n.useState(m),[qe,He]=n.useState(null),Ue=n.useMemo(()=>y(z)?function e(n,t){const o=Object.assign({},n);return Object.keys(t).forEach(i=>{const r=t[i];o[i]=y(r)&&"animation"!==i?i in n?e(n[i],r):r:r||""}),o}(c,z):c,[z]),Ke=n.useMemo(()=>j||(e=>e.label),[j]),Xe=n.useMemo(()=>W||(e=>e.value),[W]),_e=n.useMemo(()=>_||Ke,[_,Ke]),Ge=((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})(Fe,O),[Je,Qe]=n.useState(()=>C(R,Xe,Ke)),[Ze,en]=re(Le,Be,ye,Me,G,$e,E,S),nn=oe(Oe,Ge,xe,Je,Xe,Ke,pe,me,he,ce,r,ue,o),tn=()=>{Ne.current.blur()},on=()=>{Ne.current.focus()},rn=e=>{Re.current&&Re.current.scrollToItem(e)},an=n.useCallback((e,n)=>{n&&(n.stopPropagation(),"mousedown"===n.type&&n.preventDefault()),Qe(n=>n.filter(n=>n.value!==e))},[]),ln=n.useCallback(e=>{if(!x(nn))return void Ve(!0);const n=r?-1:nn.findIndex(({isSelected:e})=>e),t=n>-1?n:e===ne?0:nn.length-1;Ve(!0),Ye(Object.assign({index:t},nn[t])),rn(t)},[r,nn]),sn=n.useCallback((e,n)=>{n?r&&an(e.value):Qe(n=>r?[...n,e]:[e]),("boolean"==typeof K?K:window.matchMedia("(pointer: coarse)").matches)?tn():ve&&(Ve(!1),Ae(""))},[r,ve,K,an]);n.useImperativeHandle(Ie,()=>({blur:tn,focus:on,clearValue:()=>{Qe(p),Ye(m)},setValue:e=>{const n=function(e,n,t){if(null==e)return p;const o=C(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,nn,Xe);Qe(n)},toggleMenu:e=>{!0===e||void 0===e&&!Be?(!Pe&&on(),ln(ne)):tn()}})),n.useEffect(()=>{s&&on()},[s]),n.useEffect(()=>{Pe&&Y&&ln(ne)},[Pe,Y,ln]),n.useEffect(()=>{P&&De.current&&(De.current=!1,P(Ge))},[P,Ge]),ie(()=>{if(V){const e=r?Je.map(({data:e})=>e):x(Je)?Je[0].data:null;V(e)}},[r,Je,V]),ie(()=>{const e=nn.length,n=e>0&&(o||e!==Oe.length||0===ze.current);0===e?Ye(m):(1===e||n)&&(Ye(Object.assign({index:0},nn[0])),rn(0)),ze.current=e},[o,Oe,nn]);const dn=()=>{const{data:e,value:n,label:t,isSelected:o,isDisabled:i}=We;e&&!i&&sn({data:e,value:n,label:t},o)},cn=e=>{if(!x(Je))return;let n=-1;const t=Je.length-1,o=qe?Je.findIndex(({value:e})=>e===qe):-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?Je[n].value:null;We.data&&Ye(m),i!==qe&&He(i)},un=e=>{if(!x(nn))return;const n=e===ee?(We.index+1)%nn.length:We.index>0?We.index-1:nn.length-1;qe&&He(null),Ye(Object.assign({index:n},nn[n])),rn(n)},pn=e=>{if(w)return;Pe||on();const n="INPUT"!==e.currentTarget.tagName;Be?n&&(Ve(!1),Fe&&Ae("")):ge&&ln(ne),n&&e.preventDefault()},mn=n.useCallback(e=>{M&&M(e),je(!1),Ve(!1),Ae("")},[M]),fn=n.useCallback(e=>{L&&L(e),je(!0)},[L]),gn=n.useCallback(e=>{De.current=!0,T&&T(e.currentTarget.value||""),Ve(!0),Ae(e.currentTarget.value||"")},[T]),hn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),Qe(p),on()},[]),bn=n.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),on(),Be?Ve(!1):ln(ne)},[Be,ln]),vn=Math.min(Ze,nn.length*ke);return i.createElement(t.ThemeProvider,{theme:Ue},i.createElement(ae,{id:l,role:"combobox","aria-haspopup":"listbox","aria-controls":a,onKeyDown:e=>{if(!(w||f&&(f(e),e.defaultPrevented))){switch(e.key){case"ArrowDown":Be?un(ee):ln(ne);break;case"ArrowUp":Be?un(Z):ln(te);break;case"ArrowLeft":if(!r||Fe)return;cn(Q);break;case"ArrowRight":if(!r||Fe)return;cn(J);break;case" ":if(Fe)return;if(!Be){ln(ne);break}if(!We.data)return;dn();break;case"Enter":Be&&229!==e.keyCode&&dn();break;case"Escape":Be&&(Ve(!1),Ae(""));break;case"Tab":if(!Be||!be||!We.data||e.shiftKey)return;dn();break;case"Delete":case"Backspace":if(Fe)return;if(qe){const e=Je.findIndex(({value:e})=>e===qe),n=e>-1&&e<Je.length-1?Je[e+1].value:null;an(qe),He(n)}else{if(!we)return;if(x(Je))if(r){const{value:e}=Je[Je.length-1];an(e)}else I&&Qe(p)}break;default:return}e.preventDefault()}},"data-testid":void 0,"aria-expanded":Be?"true":"false",className:F?"rfs-select-container":void 0},i.createElement(se,{ref:Te,isInvalid:b,isFocused:Pe,isDisabled:w,onTouchEnd:pn,onMouseDown:pn,"data-testid":void 0,className:F?"rfs-control-container":void 0},i.createElement(le,null,i.createElement(N,{isMulti:r,inputValue:Fe,placeholder:Ee,selectedOption:Je,focusedMultiValue:qe,renderOptionLabel:_e,removeSelectedOption:an}),i.createElement(B,{id:a,ref:Ne,ariaLabel:v,inputValue:Fe,onBlur:mn,onFocus:fn,addClassNames:F,onChange:gn,ariaLabelledBy:A,readOnly:w||!fe||!!qe})),i.createElement(U,{menuOpen:Be,clearIcon:g,caretIcon:h,isInvalid:b,isLoading:d,loadingNode:D,addClassNames:F,onClearMouseDown:hn,showClear:!(!I||w||!x(Je)),onCaretMouseDown:w||ge?void 0:bn})),i.createElement(de,{ref:Le,hideMenu:!Be,menuTop:en?((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)`})(vn,Le.current,Te.current):void 0,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),on()},"data-testid":void 0,className:F?"rfs-menu-container":void 0},i.createElement(k,{ref:Re,isLoading:d,height:vn,itemSize:ke,loadingMsg:Ce,menuOptions:nn,noOptionsMsg:Se,selectOption:sn,overscanCount:H,width:$||Ue.menu.width,renderOptionLabel:_e,focusedOptionIndex:We.index})),q&&i.createElement(X,{menuOpen:Be,isFocused:Pe,ariaLabel:v,inputValue:Fe,isSearchable:fe,focusedOption:We,selectedOption:Je,optionCount:nn.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:E,onMenuClose:S,onInputBlur:k,isClearable:I,themeConfig:D,loadingNode:z,initialValue:T,onInputFocus:R,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:Ce="Loading...",placeholder:Ee="Select option...",noOptionsMsg:Se="No options",menuItemSize:Me=35,menuMaxHeight:ke=300},Ie)=>{const De=n.useRef(),ze=n.useRef(!1),Te=n.useRef(null),Re=n.useRef(null),Le=n.useRef(null),Ne=n.useRef(null),Ae=(()=>{const e=n.useRef(null);return null===e.current?(e.current=window.matchMedia("(pointer: coarse)").matches,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=>{const r=t[i];o[i]=y(r)&&"animation"!==i?i in n?e(n[i],r):r:r||""}),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(()=>C(T,Ge,_e)),[nn,tn]=re(Re,Pe,ye,ke,G,we,E,S),on=oe(Oe,Qe,xe,Ze,Ge,_e,pe,me,he,ce,r,ue,o),rn=()=>{Le.current.blur()},an=()=>{Le.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(n=>n.value!==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=C(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=>{k&&k(e),Ye(!1),je(!1),Ve("")},[k]),hn=n.useCallback(e=>{R&&R(e),Ye(!0)},[R]),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*Me);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(L,{isMulti:r,inputValue:Be,placeholder:Ee,isTouchDevice:Ae,selectedOption:Ze,focusedMultiValue:He,renderOptionLabel:Je,removeSelectedOption:sn}),i.createElement(B,{id:a,ref:Le,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,loadingNode:z,addClassNames:A,isTouchDevice:Ae,onClearMouseDown:vn,showClear:!(!I||$||!x(Ze)),onCaretMouseDown:$||ge?void 0:wn})),i.createElement(de,{ref:Re,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,Re.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(M,{ref:Te,isLoading:d,height:$n,itemSize:Me,loadingMsg:Ce,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})}));

dist/index.cjs.js

@@ -54,7 +54,6 @@ 'use strict';
     clear: {
-      fontWeight: 900,
-      fontSize: '0.85em',
+      width: '14px',
+      height: '16px',
       animation: FADE_IN_ANIMATION_CSS,
-      transition: 'color 0.15s ease-in-out',
-      fontFamily: 'Helvetica, Arial, sans-serif'
+      transition: 'color 0.15s ease-in-out'
     },
@@ -232,5 +231,2 @@ caret: {
 }
-function isTouchDevice() {
-  return window.matchMedia('(pointer: coarse)').matches;
-}
 function isBrowserIE() {
@@ -314,3 +310,4 @@ return IE_BROWSER_REGEXP.test(window.navigator.userAgent);
 
-  const validValues = normalizeValue(values).reduce((acc, x) => {
+  const normalizedVal = normalizeValue(values);
+  const validValues = normalizedVal.reduce((acc, x) => {
     isPlainObject(x) && acc.push(getOptionValueCB(x));
@@ -496,10 +493,10 @@ return acc;
   isFocused,
+  isTouchDevice,
   renderOptionLabel,
   removeSelectedOption
 }) => React__default.createElement(MultiValueWrapper, null, React__default.createElement(Label, null, renderOptionLabel(data)), React__default.createElement(Clear, {
-  "aria-hidden": 'true',
   isFocused: isFocused,
   "data-testid": CLEAR_ICON_MV_TESTID,
-  onTouchEnd: e => removeSelectedOption(value, e),
-  onMouseDown: e => removeSelectedOption(value, e)
+  onMouseDown: e => removeSelectedOption(value, e),
+  onTouchEnd: isTouchDevice ? e => removeSelectedOption(value, e) : undefined
 }, "X"));
@@ -533,2 +530,3 @@
   placeholder,
+  isTouchDevice,
   selectedOption,
@@ -559,2 +557,3 @@ focusedMultiValue,
     value: value,
+    isTouchDevice: isTouchDevice,
     renderOptionLabel: renderOptionLabel,
@@ -724,4 +723,4 @@ isFocused: value === focusedMultiValue,
 `;
-const Clear$1 = styled__default.div`
-  overflow: hidden;
+const ClearSVG = styled__default.svg`
+  fill: currentColor;
   animation: ${({
@@ -737,6 +736,5 @@ theme
 }) => `
-    font-size: ${clear.fontSize};
+    width: ${clear.width};
+    height: ${clear.height};
     transition: ${clear.transition};
-    font-weight: ${clear.fontWeight};
-    font-family: ${clear.fontFamily};
   `}
@@ -786,2 +784,3 @@ `;
   loadingNode,
+  isTouchDevice,
   addClassNames,
@@ -791,16 +790,20 @@ onCaretMouseDown,
 }) => React__default.createElement(IndicatorIconsWrapper, null, showClear && !isLoading && React__default.createElement(IndicatorIcon, {
+  onMouseDown: onClearMouseDown,
+  "data-testid": CLEAR_ICON_TESTID,
+  onTouchEnd: isTouchDevice ? onClearMouseDown : undefined
+}, clearIcon || React__default.createElement(ClearSVG, {
   "aria-hidden": 'true',
-  onTouchEnd: onClearMouseDown,
-  onMouseDown: onClearMouseDown,
-  "data-testid": CLEAR_ICON_TESTID
-}, clearIcon || React__default.createElement(Clear$1, {
+  viewBox: '0 0 14 16',
   className: addClassNames ? CLEAR_ICON_CLS : undefined
-}, "X")), isLoading && (loadingNode || React__default.createElement(LoadingDots, {
+}, 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, {
   addClassNames: addClassNames
 })), React__default.createElement(Separator, null), React__default.createElement(IndicatorIcon, {
-  "aria-hidden": 'true',
-  onTouchEnd: onCaretMouseDown,
   onMouseDown: onCaretMouseDown,
-  "data-testid": CARET_ICON_TESTID
+  "data-testid": CARET_ICON_TESTID,
+  onTouchEnd: isTouchDevice ? onCaretMouseDown : undefined
 }, caretIcon || React__default.createElement(Caret, {
+  "aria-hidden": 'true',
   menuOpen: menuOpen,
@@ -858,19 +861,2 @@ isInvalid: isInvalid,
 
-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;
-};
-
 (function (MenuPositionEnum) {
@@ -898,2 +884,19 @@ MenuPositionEnum["TOP"] = "top";
 
+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, getOptionValueCB, getOptionLabelCB, getIsOptionDisabled, getFilterOptionString, filterIgnoreCase, filterIgnoreAccents, isMulti, hideSelectedOptions, async) => {
@@ -960,2 +963,13 @@ const [menuOptions, setMenuOptions] = React.useState(OPTIONS_DEFAULT);
 
+const useIsTouchDevice = () => {
+  const isTouchDevice = React.useRef(null);
+
+  if (isTouchDevice.current === null) {
+    isTouchDevice.current = window.matchMedia('(pointer: coarse)').matches;
+    return isTouchDevice.current;
+  }
+
+  return isTouchDevice.current;
+};
+
 const useMenuPositioner = (menuRef, menuOpen, menuPosition, menuHeightDefault, menuScrollDuration, scrollMenuIntoView, onMenuOpen, onMenuClose) => {
@@ -1170,2 +1184,4 @@ const resetMenuHeightRef = React.useRef(false);
   const controlRef = React.useRef(null);
+  const isTouchDevice = useIsTouchDevice();
+  const blurInputOnSelectOrTouch = typeof blurInputOnSelect === 'boolean' ? blurInputOnSelect : isTouchDevice;
   const [inputValue, setInputValue] = React.useState('');
@@ -1232,5 +1248,3 @@ const [menuOpen, setMenuOpen] = React.useState(false);
 
-    const blurInputOnSelectOrDefault = typeof blurInputOnSelect === 'boolean' ? blurInputOnSelect : isTouchDevice();
-
-    if (blurInputOnSelectOrDefault) {
+    if (blurInputOnSelectOrTouch) {
       blurInput();
@@ -1241,3 +1255,3 @@ } else if (closeMenuOnSelect) {
     }
-  }, [isMulti, closeMenuOnSelect, blurInputOnSelect, removeSelectedOption]);
+  }, [isMulti, closeMenuOnSelect, removeSelectedOption, blurInputOnSelectOrTouch]);
   React.useImperativeHandle(ref, () => ({
@@ -1526,6 +1540,6 @@ blur: blurInput,
     isDisabled: isDisabled,
-    onTouchEnd: handleOnControlMouseDown,
     onMouseDown: handleOnControlMouseDown,
     "data-testid": CONTROL_CONTAINER_TESTID,
-    className: addClassNames ? CONTROL_CONTAINER_CLS : undefined
+    className: addClassNames ? CONTROL_CONTAINER_CLS : undefined,
+    onTouchEnd: isTouchDevice ? handleOnControlMouseDown : undefined
   }, React__default.createElement(ValueWrapper, null, React__default.createElement(Value, {
@@ -1535,2 +1549,3 @@ isMulti: isMulti,
     placeholder: placeholder,
+    isTouchDevice: isTouchDevice,
     selectedOption: selectedOption,
@@ -1559,2 +1574,3 @@ focusedMultiValue: focusedMultiValue,
     addClassNames: addClassNames,
+    isTouchDevice: isTouchDevice,
     onClearMouseDown: handleOnClearMouseDown,
@@ -1561,0 +1577,0 @@ showClear: !!(isClearable && !isDisabled && isArrayWithLength(selectedOption)),

dist/index.esm.js

@@ -46,7 +46,6 @@ import React, { useMemo, Fragment, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
     clear: {
-      fontWeight: 900,
-      fontSize: '0.85em',
+      width: '14px',
+      height: '16px',
       animation: FADE_IN_ANIMATION_CSS,
-      transition: 'color 0.15s ease-in-out',
-      fontFamily: 'Helvetica, Arial, sans-serif'
+      transition: 'color 0.15s ease-in-out'
     },
@@ -224,5 +223,2 @@ caret: {
 }
-function isTouchDevice() {
-  return window.matchMedia('(pointer: coarse)').matches;
-}
 function isBrowserIE() {
@@ -306,3 +302,4 @@ return IE_BROWSER_REGEXP.test(window.navigator.userAgent);
 
-  const validValues = normalizeValue(values).reduce((acc, x) => {
+  const normalizedVal = normalizeValue(values);
+  const validValues = normalizedVal.reduce((acc, x) => {
     isPlainObject(x) && acc.push(getOptionValueCB(x));
@@ -488,10 +485,10 @@ return acc;
   isFocused,
+  isTouchDevice,
   renderOptionLabel,
   removeSelectedOption
 }) => React.createElement(MultiValueWrapper, null, React.createElement(Label, null, renderOptionLabel(data)), React.createElement(Clear, {
-  "aria-hidden": 'true',
   isFocused: isFocused,
   "data-testid": CLEAR_ICON_MV_TESTID,
-  onTouchEnd: e => removeSelectedOption(value, e),
-  onMouseDown: e => removeSelectedOption(value, e)
+  onMouseDown: e => removeSelectedOption(value, e),
+  onTouchEnd: isTouchDevice ? e => removeSelectedOption(value, e) : undefined
 }, "X"));
@@ -525,2 +522,3 @@
   placeholder,
+  isTouchDevice,
   selectedOption,
@@ -551,2 +549,3 @@ focusedMultiValue,
     value: value,
+    isTouchDevice: isTouchDevice,
     renderOptionLabel: renderOptionLabel,
@@ -716,4 +715,4 @@ isFocused: value === focusedMultiValue,
 `;
-const Clear$1 = styled.div`
-  overflow: hidden;
+const ClearSVG = styled.svg`
+  fill: currentColor;
   animation: ${({
@@ -729,6 +728,5 @@ theme
 }) => `
-    font-size: ${clear.fontSize};
+    width: ${clear.width};
+    height: ${clear.height};
     transition: ${clear.transition};
-    font-weight: ${clear.fontWeight};
-    font-family: ${clear.fontFamily};
   `}
@@ -778,2 +776,3 @@ `;
   loadingNode,
+  isTouchDevice,
   addClassNames,
@@ -783,16 +782,20 @@ onCaretMouseDown,
 }) => React.createElement(IndicatorIconsWrapper, null, showClear && !isLoading && React.createElement(IndicatorIcon, {
+  onMouseDown: onClearMouseDown,
+  "data-testid": CLEAR_ICON_TESTID,
+  onTouchEnd: isTouchDevice ? onClearMouseDown : undefined
+}, clearIcon || React.createElement(ClearSVG, {
   "aria-hidden": 'true',
-  onTouchEnd: onClearMouseDown,
-  onMouseDown: onClearMouseDown,
-  "data-testid": CLEAR_ICON_TESTID
-}, clearIcon || React.createElement(Clear$1, {
+  viewBox: '0 0 14 16',
   className: addClassNames ? CLEAR_ICON_CLS : undefined
-}, "X")), isLoading && (loadingNode || React.createElement(LoadingDots, {
+}, 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, {
   addClassNames: addClassNames
 })), React.createElement(Separator, null), React.createElement(IndicatorIcon, {
-  "aria-hidden": 'true',
-  onTouchEnd: onCaretMouseDown,
   onMouseDown: onCaretMouseDown,
-  "data-testid": CARET_ICON_TESTID
+  "data-testid": CARET_ICON_TESTID,
+  onTouchEnd: isTouchDevice ? onCaretMouseDown : undefined
 }, caretIcon || React.createElement(Caret, {
+  "aria-hidden": 'true',
   menuOpen: menuOpen,
@@ -850,19 +853,2 @@ isInvalid: isInvalid,
 
-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;
-};
-
 var MenuPositionEnum;
@@ -894,2 +880,19 @@
 
+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, getOptionValueCB, getOptionLabelCB, getIsOptionDisabled, getFilterOptionString, filterIgnoreCase, filterIgnoreAccents, isMulti, hideSelectedOptions, async) => {
@@ -956,2 +959,13 @@ const [menuOptions, setMenuOptions] = useState(OPTIONS_DEFAULT);
 
+const useIsTouchDevice = () => {
+  const isTouchDevice = useRef(null);
+
+  if (isTouchDevice.current === null) {
+    isTouchDevice.current = window.matchMedia('(pointer: coarse)').matches;
+    return isTouchDevice.current;
+  }
+
+  return isTouchDevice.current;
+};
+
 const useMenuPositioner = (menuRef, menuOpen, menuPosition, menuHeightDefault, menuScrollDuration, scrollMenuIntoView, onMenuOpen, onMenuClose) => {
@@ -1166,2 +1180,4 @@ const resetMenuHeightRef = useRef(false);
   const controlRef = useRef(null);
+  const isTouchDevice = useIsTouchDevice();
+  const blurInputOnSelectOrTouch = typeof blurInputOnSelect === 'boolean' ? blurInputOnSelect : isTouchDevice;
   const [inputValue, setInputValue] = useState('');
@@ -1228,5 +1244,3 @@ const [menuOpen, setMenuOpen] = useState(false);
 
-    const blurInputOnSelectOrDefault = typeof blurInputOnSelect === 'boolean' ? blurInputOnSelect : isTouchDevice();
-
-    if (blurInputOnSelectOrDefault) {
+    if (blurInputOnSelectOrTouch) {
       blurInput();
@@ -1237,3 +1251,3 @@ } else if (closeMenuOnSelect) {
     }
-  }, [isMulti, closeMenuOnSelect, blurInputOnSelect, removeSelectedOption]);
+  }, [isMulti, closeMenuOnSelect, removeSelectedOption, blurInputOnSelectOrTouch]);
   useImperativeHandle(ref, () => ({
@@ -1522,6 +1536,6 @@ blur: blurInput,
     isDisabled: isDisabled,
-    onTouchEnd: handleOnControlMouseDown,
     onMouseDown: handleOnControlMouseDown,
     "data-testid": CONTROL_CONTAINER_TESTID,
-    className: addClassNames ? CONTROL_CONTAINER_CLS : undefined
+    className: addClassNames ? CONTROL_CONTAINER_CLS : undefined,
+    onTouchEnd: isTouchDevice ? handleOnControlMouseDown : undefined
   }, React.createElement(ValueWrapper, null, React.createElement(Value, {
@@ -1531,2 +1545,3 @@ isMulti: isMulti,
     placeholder: placeholder,
+    isTouchDevice: isTouchDevice,
     selectedOption: selectedOption,
@@ -1555,2 +1570,3 @@ focusedMultiValue: focusedMultiValue,
     addClassNames: addClassNames,
+    isTouchDevice: isTouchDevice,
     onClearMouseDown: handleOnClearMouseDown,
@@ -1557,0 +1573,0 @@ showClear: !!(isClearable && !isDisabled && isArrayWithLength(selectedOption)),

dist/utils.d.ts

@@ -5,3 +5,2 @@ import { ReactText } from 'react';
 export declare function isPlainObject(test: any): boolean;
-export declare function isTouchDevice(): boolean;
 export declare function isBrowserIE(): boolean;
@@ -8,0 +7,0 @@ export declare function optionClassName(isDisabled?: boolean, isSelected?: boolean, isFocused?: boolean): string;

package.json

 {
   "name": "react-functional-select",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "author": "Matt Areddia <[e-mail]> (https://github.com/based-ghost/)",
@@ -88,3 +88,3 @@ "description": "Miro-sized and micro-optimized select component for React.js",
     "react-syntax-highlighter": "^12.2.1",
-    "react-toastify": "^6.0.1",
+    "react-toastify": "^6.0.2",
     "react-window": "^1.8.5",
@@ -98,3 +98,3 @@ "rimraf": "^3.0.2",
     "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-typescript2": "^0.27.0",
+    "rollup-plugin-typescript2": "^0.27.1",
     "styled-components": "^5.1.0",
@@ -101,0 +101,0 @@ "tslint": "^6.1.2",

No alert changes

Improved metrics

Total package byte prevSize

167681

increased by1.13%

Number of package files

31

increased by3.33%

Lines of code

3584

increased by0.87%

No dependency changes