Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-functional-select

Package Overview
Dependencies
Maintainers
1
Versions
100
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-functional-select - npm Package Compare versions

Comparing version 1.0.0-beta.20 to 1.0.0-beta.21

2

dist/index-dev.umd.js

@@ -224,2 +224,2 @@ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("styled-components"),require("react-window")):"function"==typeof define&&define.amd?define(["exports","react","styled-components","react-window"],t):t((e=e||self).ReactFunctionalSelect={},e.React,e.StyledComponents,e.ReactWindow)}(this,(function(e,t,o,n){"use strict";var i="default"in t?t.default:t,r="default"in o?o.default:o;const a=o.keyframes`

}
`,_=i.forwardRef(({inputId:e,selectId:o,idSuffix:n,isLoading:r,onKeyDown:a,clearIcon:l,caretIcon:s,isInvalid:c,ariaLabel:d,menuWidth:f,isDisabled:m,inputDelay:x,onMenuOpen:$,onMenuClose:S,onInputBlur:C,isClearable:E,onInputFocus:k,initialValue:z,addClassNames:D,ariaLabelledBy:N,onOptionChange:L,getOptionLabel:j,getOptionValue:R,openMenuOnFocus:T,isAriaLiveEnabled:A,menuOverscanCount:M,blurInputOnSelect:B,renderOptionLabel:V,getIsOptionDisabled:P,filterIsCaseSensitive:_,getFilterOptionString:G,isSearchable:J=!0,tabSelectsOption:Q=!0,closeMenuOnSelect:Z=!0,scrollMenuIntoView:ee=!0,backspaceClearsValue:te=!0,options:oe=h,placeholder:ne="Select option..",noOptionsMsg:ie="No options",menuItemSize:re=35,menuMaxHeight:ae=300},le)=>{const se=t.useRef(),ce=t.useRef(null),de=t.useRef(null),ue=t.useRef(null),[pe,fe]=t.useState(""),[me,be]=t.useState(!1),[he,ge]=t.useState(!1),[ve,we]=t.useState(v),[Oe,xe]=t.useState(w),$e=((e,o)=>{const[n,i]=t.useState(e);return t.useEffect(()=>{if(void 0===o)return;const t=setTimeout(()=>{i(e)},o);return()=>{clearTimeout(t)}},[e,o]),void 0===o?e:n})(pe,x),{data:ye,value:Se,label:Ce,initFlag:Ee}=Oe,{data:Ie,value:ke,label:ze,index:De,isDisabled:Ne}=ve,Fe=t.useCallback(e=>j?j(e):e.label,[j]),Le=t.useCallback(e=>R?R(e):e.value,[R]),je=t.useCallback(e=>V?V(e):Fe(e),[V,Fe]),Re=((e,o,n,i,r,a)=>{const[l,s]=t.useState(n),c=t.useCallback(e=>{e&&s(e),r&&r()},[r]);return t.useEffect(()=>{o?b(e.current,i,c):(s(n),a&&a())},[e,o,a,c,n,i]),l})(de,me,ae,ee,$,S),Te=O(oe,$e,Le,Fe,P,G,_),Ae=()=>{ue.current&&ue.current.blur()},Me=()=>{ue.current&&ue.current.focus()},Be=e=>{ce.current&&ce.current.scrollToItem(e)},Ve=t.useCallback((e,t)=>{t?be(!1):xe(e||g)},[]),We=t.useCallback(e=>{if(!u(Te))return void be(!0);const t=Oe.value?Te.findIndex(e=>e.value===Oe.value):-1,o=t>-1?t:e===q.FIRST?0:Te.length-1;be(!0),we(Object.assign({index:o},Te[o])),Be(o)},[Te,Oe]);t.useImperativeHandle(le,()=>({blur:Ae,focus:Me,clearValue:()=>{Ve(),we(v)},setValue:e=>{const t=function(e,t,o){if(null==e||Array.isArray(e))return;const n=e&&e!==Object(e)?e:o(e);return t.find(e=>e.value===n)||void 0}(e,Te,Le);Ve(t)}})),t.useEffect(()=>{he&&T&&We(q.FIRST)},[he,T,We]),t.useEffect(()=>{Ee&&p(z)&&Ve({data:z,value:Le(z),label:Fe(z)})},[Ve,z,Ee,Le,Fe]),t.useEffect(()=>{L&&L(ye||null),!ye&&we(v),B&&ye?Ae():Z&&(be(!1),fe(""))},[ye,L,Z,B]),t.useEffect(()=>{(1===Te.length||Te.length&&(Te.length!==oe.length||0===se.current))&&(we(Object.assign({index:0},Te[0])),Be(0)),se.current=Te.length},[oe,Te]);const Pe=()=>{Ie&&!Ne&&(Z&&Se===ke?be(!1):Ve({data:Ie,value:ke,label:ze}))},Ue=e=>{if(!u(Te))return;const t=e===q.DOWN?(De+1)%Te.length:De>0?De-1:Te.length-1;we(Object.assign({index:t},Te[t])),Be(t)},qe=e=>{m||(he||Me(),me?"INPUT"!==e.currentTarget.tagName&&(be(!1),pe&&fe("")):We(q.FIRST),"INPUT"!==e.currentTarget.tagName&&e.preventDefault())},He=t.useCallback(e=>{C&&C(e),ge(!1),be(!1),fe("")},[C]),Ke=t.useCallback(e=>{k&&k(e),ge(!0)},[k]),Ye=t.useCallback(e=>{be(!0),fe(e.currentTarget.value||"")},[]),Xe=t.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),xe(g),Me()},[]);return i.createElement(H,{id:o,onKeyDown:e=>{if(!(m||a&&(a(e),e.defaultPrevented))){switch(e.key){case"ArrowDown":me?Ue(q.DOWN):We(q.FIRST);break;case"ArrowUp":me?Ue(q.UP):We(q.LAST);break;case" ":if(pe)return;me?Pe():We(q.FIRST);break;case"Enter":229!==e.keyCode&&Pe();break;case"Escape":be(!1),fe("");break;case"Tab":if(e.shiftKey||!me||!Ie)return;Q?Pe():(be(!1),fe(""));break;case"Delete":case"Backspace":if(pe||!te||!E)return;Ve();break;default:return}e.preventDefault()}},"data-testid":"rfs-select-container",className:D?"rfs-select-container":void 0},i.createElement(Y,{isInvalid:c,isFocused:he,isDisabled:m,onTouchEnd:qe,onMouseDown:qe,"data-testid":"rfs-control-container",className:D?"rfs-control-container":void 0},i.createElement(K,null,i.createElement(I,{inputValue:pe,placeholder:ne,selectedOptionData:ye,renderOptionLabel:je}),i.createElement(F,{id:e,ref:ue,disabled:m,ariaLabel:d,inputValue:pe,onBlur:He,isSearchable:J,onFocus:Ke,addClassNames:D,onChange:Ye,ariaLabelledBy:N})),i.createElement(W,{menuOpen:me,clearIcon:l,caretIcon:s,isInvalid:c,isLoading:r,addClassNames:D,onClearMouseDown:Xe,showClear:!(!E||m||!ye)})),i.createElement(X,{ref:de,hideMenu:!me,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),Me()},"data-testid":"rfs-menu-container",className:D?"rfs-menu-container":void 0},i.createElement(y,{ref:ce,width:f,idSuffix:n,maxHeight:Re,itemSize:re,menuOptions:Te,noOptionsMsg:ie,selectOption:Ve,overscanCount:M,focusedOptionIndex:De,renderOptionLabel:je,selectedOptionValue:Se})),A&&he&&i.createElement(U,{menuOpen:me,ariaLabel:d,inputValue:pe,isSearchable:J,optionCount:Te.length,focusedOptionLabel:ze,focusedOptionIndex:De,selectedOptionLabel:Ce,isFocusedOptionDisabled:Ne}))});_.displayName="Select";var G=Object.freeze({color:{accent:"#007bff",border:"#ced4da",invalid:"#dc3545",disabled:"#e9ecef",placeholder:"#6E7276",invalidFocus:"rgba(220, 53, 69, 0.25)"},select:{},loader:{opacity:"0.42",size:"0.625rem",color:"#007bff",padding:"0.375rem 0.75rem"},icon:{color:"#cccccc",padding:"0.5rem 0.9375rem",hoverColor:"#A6A6A6",clear:{fontWeight:900,fontSize:"0.85em",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:{borderWidth:"1px",borderStyle:"solid",borderRadius:"0.25rem",boxShadow:"0 0 0 0.2rem",padding:"0.375rem 0.75rem",height:"calc(1.5em + 0.75rem + 2px)",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",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"}});const J=i.forwardRef((e,n)=>{let{inputId:r,selectId:a,idSuffix:l,menuWidth:s,themeConfig:c,blurInputOnSelect:d}=e,u=function(e,t){if(null==e)return{};var o,n,i={},r=Object.keys(e);for(n=0;n<r.length;n++)o=r[n],t.indexOf(o)>=0||(i[o]=e[o]);return i}(e,["inputId","selectId","idSuffix","menuWidth","themeConfig","blurInputOnSelect"]);const m=t.useMemo(()=>p(c)?function e(t,o){const n=Object.assign({},t);return Object.keys(o).forEach(i=>{p(o[i])?n[i]=i in t?e(t[i],o[i]):o[i]:n[i]=o[i]}),n}(G,c):Object.assign({},G),[c]),b="boolean"==typeof d?d:(()=>window.matchMedia("(pointer: coarse)").matches)(),h=Object.assign({},u,{idSuffix:l,inputId:f(r,l),selectId:f(a,l),menuWidth:s||m.menu.width,blurInputOnSelect:b});return i.createElement(o.ThemeProvider,{theme:m},i.createElement(_,Object.assign({ref:n},h)))});J.displayName="SelectWrapper",e.Select=J,Object.defineProperty(e,"__esModule",{value:!0})}));
`,_=i.forwardRef(({inputId:e,selectId:o,idSuffix:n,isLoading:r,onKeyDown:a,clearIcon:l,caretIcon:s,isInvalid:c,ariaLabel:d,menuWidth:f,isDisabled:m,inputDelay:x,onMenuOpen:$,onMenuClose:S,onInputBlur:C,isClearable:E,onInputFocus:k,initialValue:z,addClassNames:D,ariaLabelledBy:N,onOptionChange:L,getOptionLabel:j,getOptionValue:R,openMenuOnFocus:T,isAriaLiveEnabled:A,menuOverscanCount:M,blurInputOnSelect:B,renderOptionLabel:V,getIsOptionDisabled:P,filterIsCaseSensitive:_,getFilterOptionString:G,isSearchable:J=!0,tabSelectsOption:Q=!0,closeMenuOnSelect:Z=!0,scrollMenuIntoView:ee=!0,backspaceClearsValue:te=!0,options:oe=h,placeholder:ne="Select option..",noOptionsMsg:ie="No options",menuItemSize:re=35,menuMaxHeight:ae=300},le)=>{const se=t.useRef(),ce=t.useRef(null),de=t.useRef(null),ue=t.useRef(null),[pe,fe]=t.useState(""),[me,be]=t.useState(!1),[he,ge]=t.useState(!1),[ve,we]=t.useState(v),[Oe,xe]=t.useState(w),$e=((e,o)=>{const[n,i]=t.useState(e);return t.useEffect(()=>{if(void 0===o)return;const t=setTimeout(()=>{i(e)},o);return()=>{clearTimeout(t)}},[e,o]),void 0===o?e:n})(pe,x),{data:ye,value:Se,label:Ce,initFlag:Ee}=Oe,{data:Ie,value:ke,label:ze,index:De,isDisabled:Ne}=ve,Fe=t.useCallback(e=>j?j(e):e.label,[j]),Le=t.useCallback(e=>R?R(e):e.value,[R]),je=t.useCallback(e=>V?V(e):Fe(e),[V,Fe]),Re=((e,o,n,i,r,a)=>{const[l,s]=t.useState(n);return t.useEffect(()=>{if(o){const t=e=>{e&&s(e),r&&r()};b(e.current,i,t)}else s(n),a&&a()},[e,o,a,r,n,i]),l})(de,me,ae,ee,$,S),Te=O(oe,$e,Le,Fe,P,G,_),Ae=()=>{ue.current&&ue.current.blur()},Me=()=>{ue.current&&ue.current.focus()},Be=e=>{ce.current&&ce.current.scrollToItem(e)},Ve=t.useCallback((e,t)=>{t?be(!1):xe(e||g)},[]),We=t.useCallback(e=>{if(!u(Te))return void be(!0);const t=Oe.value?Te.findIndex(e=>e.value===Oe.value):-1,o=t>-1?t:e===q.FIRST?0:Te.length-1;be(!0),we(Object.assign({index:o},Te[o])),Be(o)},[Te,Oe]);t.useImperativeHandle(le,()=>({blur:Ae,focus:Me,clearValue:()=>{Ve(),we(v)},setValue:e=>{const t=function(e,t,o){if(null==e||Array.isArray(e))return;const n=e&&e!==Object(e)?e:o(e);return t.find(e=>e.value===n)||void 0}(e,Te,Le);Ve(t)}})),t.useEffect(()=>{he&&T&&We(q.FIRST)},[he,T,We]),t.useEffect(()=>{Ee&&p(z)&&Ve({data:z,value:Le(z),label:Fe(z)})},[Ve,z,Ee,Le,Fe]),t.useEffect(()=>{L&&L(ye||null),!ye&&we(v),B&&ye?Ae():Z&&(be(!1),fe(""))},[ye,L,Z,B]),t.useEffect(()=>{(1===Te.length||Te.length&&(Te.length!==oe.length||0===se.current))&&(we(Object.assign({index:0},Te[0])),Be(0)),se.current=Te.length},[oe,Te]);const Pe=()=>{Ie&&!Ne&&(Z&&Se===ke?be(!1):Ve({data:Ie,value:ke,label:ze}))},Ue=e=>{if(!u(Te))return;const t=e===q.DOWN?(De+1)%Te.length:De>0?De-1:Te.length-1;we(Object.assign({index:t},Te[t])),Be(t)},qe=e=>{m||(he||Me(),me?"INPUT"!==e.currentTarget.tagName&&(be(!1),pe&&fe("")):We(q.FIRST),"INPUT"!==e.currentTarget.tagName&&e.preventDefault())},He=t.useCallback(e=>{C&&C(e),ge(!1),be(!1),fe("")},[C]),Ke=t.useCallback(e=>{k&&k(e),ge(!0)},[k]),Ye=t.useCallback(e=>{be(!0),fe(e.currentTarget.value||"")},[]),Xe=t.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),xe(g),Me()},[]);return i.createElement(H,{id:o,onKeyDown:e=>{if(!(m||a&&(a(e),e.defaultPrevented))){switch(e.key){case"ArrowDown":me?Ue(q.DOWN):We(q.FIRST);break;case"ArrowUp":me?Ue(q.UP):We(q.LAST);break;case" ":if(pe)return;me?Pe():We(q.FIRST);break;case"Enter":229!==e.keyCode&&Pe();break;case"Escape":be(!1),fe("");break;case"Tab":if(e.shiftKey||!me||!Ie)return;Q?Pe():(be(!1),fe(""));break;case"Delete":case"Backspace":if(pe||!te||!E)return;Ve();break;default:return}e.preventDefault()}},"data-testid":"rfs-select-container",className:D?"rfs-select-container":void 0},i.createElement(Y,{isInvalid:c,isFocused:he,isDisabled:m,onTouchEnd:qe,onMouseDown:qe,"data-testid":"rfs-control-container",className:D?"rfs-control-container":void 0},i.createElement(K,null,i.createElement(I,{inputValue:pe,placeholder:ne,selectedOptionData:ye,renderOptionLabel:je}),i.createElement(F,{id:e,ref:ue,disabled:m,ariaLabel:d,inputValue:pe,onBlur:He,isSearchable:J,onFocus:Ke,addClassNames:D,onChange:Ye,ariaLabelledBy:N})),i.createElement(W,{menuOpen:me,clearIcon:l,caretIcon:s,isInvalid:c,isLoading:r,addClassNames:D,onClearMouseDown:Xe,showClear:!(!E||m||!ye)})),i.createElement(X,{ref:de,hideMenu:!me,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),Me()},"data-testid":"rfs-menu-container",className:D?"rfs-menu-container":void 0},i.createElement(y,{ref:ce,width:f,idSuffix:n,maxHeight:Re,itemSize:re,menuOptions:Te,noOptionsMsg:ie,selectOption:Ve,overscanCount:M,focusedOptionIndex:De,renderOptionLabel:je,selectedOptionValue:Se})),A&&he&&i.createElement(U,{menuOpen:me,ariaLabel:d,inputValue:pe,isSearchable:J,optionCount:Te.length,focusedOptionLabel:ze,focusedOptionIndex:De,selectedOptionLabel:Ce,isFocusedOptionDisabled:Ne}))});_.displayName="Select";var G=Object.freeze({color:{accent:"#007bff",border:"#ced4da",invalid:"#dc3545",disabled:"#e9ecef",placeholder:"#6E7276",invalidFocus:"rgba(220, 53, 69, 0.25)"},select:{},loader:{opacity:"0.42",size:"0.625rem",color:"#007bff",padding:"0.375rem 0.75rem"},icon:{color:"#cccccc",padding:"0.5rem 0.9375rem",hoverColor:"#A6A6A6",clear:{fontWeight:900,fontSize:"0.85em",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:{borderWidth:"1px",borderStyle:"solid",borderRadius:"0.25rem",boxShadow:"0 0 0 0.2rem",padding:"0.375rem 0.75rem",height:"calc(1.5em + 0.75rem + 2px)",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",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"}});const J=i.forwardRef((e,n)=>{let{inputId:r,selectId:a,idSuffix:l,menuWidth:s,themeConfig:c,blurInputOnSelect:d}=e,u=function(e,t){if(null==e)return{};var o,n,i={},r=Object.keys(e);for(n=0;n<r.length;n++)o=r[n],t.indexOf(o)>=0||(i[o]=e[o]);return i}(e,["inputId","selectId","idSuffix","menuWidth","themeConfig","blurInputOnSelect"]);const m=t.useMemo(()=>p(c)?function e(t,o){const n=Object.assign({},t);return Object.keys(o).forEach(i=>{p(o[i])?n[i]=i in t?e(t[i],o[i]):o[i]:n[i]=o[i]}),n}(G,c):Object.assign({},G),[c]),b="boolean"==typeof d?d:(()=>window.matchMedia("(pointer: coarse)").matches)(),h=Object.assign({},u,{idSuffix:l,inputId:f(r,l),selectId:f(a,l),menuWidth:s||m.menu.width,blurInputOnSelect:b});return i.createElement(o.ThemeProvider,{theme:m},i.createElement(_,Object.assign({ref:n},h)))});J.displayName="SelectWrapper",e.Select=J,Object.defineProperty(e,"__esModule",{value:!0})}));

2

dist/index-prod.umd.js

@@ -224,2 +224,2 @@ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("styled-components"),require("react-window")):"function"==typeof define&&define.amd?define(["exports","react","styled-components","react-window"],t):t((e=e||self).ReactFunctionalSelect={},e.React,e.StyledComponents,e.ReactWindow)}(this,(function(e,t,o,n){"use strict";var i="default"in t?t.default:t,r="default"in o?o.default:o;const a=o.keyframes`

}
`,_=i.forwardRef(({inputId:e,selectId:o,idSuffix:n,isLoading:r,onKeyDown:a,clearIcon:l,caretIcon:s,isInvalid:c,ariaLabel:d,menuWidth:f,isDisabled:m,inputDelay:x,onMenuOpen:$,onMenuClose:S,onInputBlur:C,isClearable:E,onInputFocus:k,initialValue:z,addClassNames:D,ariaLabelledBy:N,onOptionChange:L,getOptionLabel:j,getOptionValue:R,openMenuOnFocus:T,isAriaLiveEnabled:A,menuOverscanCount:M,blurInputOnSelect:B,renderOptionLabel:V,getIsOptionDisabled:P,filterIsCaseSensitive:_,getFilterOptionString:G,isSearchable:J=!0,tabSelectsOption:Q=!0,closeMenuOnSelect:Z=!0,scrollMenuIntoView:ee=!0,backspaceClearsValue:te=!0,options:oe=h,placeholder:ne="Select option..",noOptionsMsg:ie="No options",menuItemSize:re=35,menuMaxHeight:ae=300},le)=>{const se=t.useRef(),ce=t.useRef(null),de=t.useRef(null),ue=t.useRef(null),[pe,fe]=t.useState(""),[me,be]=t.useState(!1),[he,ge]=t.useState(!1),[ve,we]=t.useState(v),[Oe,xe]=t.useState(w),$e=((e,o)=>{const[n,i]=t.useState(e);return t.useEffect(()=>{if(void 0===o)return;const t=setTimeout(()=>{i(e)},o);return()=>{clearTimeout(t)}},[e,o]),void 0===o?e:n})(pe,x),{data:ye,value:Se,label:Ce,initFlag:Ee}=Oe,{data:Ie,value:ke,label:ze,index:De,isDisabled:Ne}=ve,Fe=t.useCallback(e=>j?j(e):e.label,[j]),Le=t.useCallback(e=>R?R(e):e.value,[R]),je=t.useCallback(e=>V?V(e):Fe(e),[V,Fe]),Re=((e,o,n,i,r,a)=>{const[l,s]=t.useState(n),c=t.useCallback(e=>{e&&s(e),r&&r()},[r]);return t.useEffect(()=>{o?b(e.current,i,c):(s(n),a&&a())},[e,o,a,c,n,i]),l})(de,me,ae,ee,$,S),Te=O(oe,$e,Le,Fe,P,G,_),Ae=()=>{ue.current&&ue.current.blur()},Me=()=>{ue.current&&ue.current.focus()},Be=e=>{ce.current&&ce.current.scrollToItem(e)},Ve=t.useCallback((e,t)=>{t?be(!1):xe(e||g)},[]),We=t.useCallback(e=>{if(!u(Te))return void be(!0);const t=Oe.value?Te.findIndex(e=>e.value===Oe.value):-1,o=t>-1?t:e===q.FIRST?0:Te.length-1;be(!0),we(Object.assign({index:o},Te[o])),Be(o)},[Te,Oe]);t.useImperativeHandle(le,()=>({blur:Ae,focus:Me,clearValue:()=>{Ve(),we(v)},setValue:e=>{const t=function(e,t,o){if(null==e||Array.isArray(e))return;const n=e&&e!==Object(e)?e:o(e);return t.find(e=>e.value===n)||void 0}(e,Te,Le);Ve(t)}})),t.useEffect(()=>{he&&T&&We(q.FIRST)},[he,T,We]),t.useEffect(()=>{Ee&&p(z)&&Ve({data:z,value:Le(z),label:Fe(z)})},[Ve,z,Ee,Le,Fe]),t.useEffect(()=>{L&&L(ye||null),!ye&&we(v),B&&ye?Ae():Z&&(be(!1),fe(""))},[ye,L,Z,B]),t.useEffect(()=>{(1===Te.length||Te.length&&(Te.length!==oe.length||0===se.current))&&(we(Object.assign({index:0},Te[0])),Be(0)),se.current=Te.length},[oe,Te]);const Pe=()=>{Ie&&!Ne&&(Z&&Se===ke?be(!1):Ve({data:Ie,value:ke,label:ze}))},Ue=e=>{if(!u(Te))return;const t=e===q.DOWN?(De+1)%Te.length:De>0?De-1:Te.length-1;we(Object.assign({index:t},Te[t])),Be(t)},qe=e=>{m||(he||Me(),me?"INPUT"!==e.currentTarget.tagName&&(be(!1),pe&&fe("")):We(q.FIRST),"INPUT"!==e.currentTarget.tagName&&e.preventDefault())},He=t.useCallback(e=>{C&&C(e),ge(!1),be(!1),fe("")},[C]),Ke=t.useCallback(e=>{k&&k(e),ge(!0)},[k]),Ye=t.useCallback(e=>{be(!0),fe(e.currentTarget.value||"")},[]),Xe=t.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),xe(g),Me()},[]);return i.createElement(H,{id:o,onKeyDown:e=>{if(!(m||a&&(a(e),e.defaultPrevented))){switch(e.key){case"ArrowDown":me?Ue(q.DOWN):We(q.FIRST);break;case"ArrowUp":me?Ue(q.UP):We(q.LAST);break;case" ":if(pe)return;me?Pe():We(q.FIRST);break;case"Enter":229!==e.keyCode&&Pe();break;case"Escape":be(!1),fe("");break;case"Tab":if(e.shiftKey||!me||!Ie)return;Q?Pe():(be(!1),fe(""));break;case"Delete":case"Backspace":if(pe||!te||!E)return;Ve();break;default:return}e.preventDefault()}},"data-testid":void 0,className:D?"rfs-select-container":void 0},i.createElement(Y,{isInvalid:c,isFocused:he,isDisabled:m,onTouchEnd:qe,onMouseDown:qe,"data-testid":void 0,className:D?"rfs-control-container":void 0},i.createElement(K,null,i.createElement(I,{inputValue:pe,placeholder:ne,selectedOptionData:ye,renderOptionLabel:je}),i.createElement(F,{id:e,ref:ue,disabled:m,ariaLabel:d,inputValue:pe,onBlur:He,isSearchable:J,onFocus:Ke,addClassNames:D,onChange:Ye,ariaLabelledBy:N})),i.createElement(W,{menuOpen:me,clearIcon:l,caretIcon:s,isInvalid:c,isLoading:r,addClassNames:D,onClearMouseDown:Xe,showClear:!(!E||m||!ye)})),i.createElement(X,{ref:de,hideMenu:!me,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),Me()},"data-testid":void 0,className:D?"rfs-menu-container":void 0},i.createElement(y,{ref:ce,width:f,idSuffix:n,maxHeight:Re,itemSize:re,menuOptions:Te,noOptionsMsg:ie,selectOption:Ve,overscanCount:M,focusedOptionIndex:De,renderOptionLabel:je,selectedOptionValue:Se})),A&&he&&i.createElement(U,{menuOpen:me,ariaLabel:d,inputValue:pe,isSearchable:J,optionCount:Te.length,focusedOptionLabel:ze,focusedOptionIndex:De,selectedOptionLabel:Ce,isFocusedOptionDisabled:Ne}))});_.displayName="Select";var G=Object.freeze({color:{accent:"#007bff",border:"#ced4da",invalid:"#dc3545",disabled:"#e9ecef",placeholder:"#6E7276",invalidFocus:"rgba(220, 53, 69, 0.25)"},select:{},loader:{opacity:"0.42",size:"0.625rem",color:"#007bff",padding:"0.375rem 0.75rem"},icon:{color:"#cccccc",padding:"0.5rem 0.9375rem",hoverColor:"#A6A6A6",clear:{fontWeight:900,fontSize:"0.85em",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:{borderWidth:"1px",borderStyle:"solid",borderRadius:"0.25rem",boxShadow:"0 0 0 0.2rem",padding:"0.375rem 0.75rem",height:"calc(1.5em + 0.75rem + 2px)",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",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"}});const J=i.forwardRef((e,n)=>{let{inputId:r,selectId:a,idSuffix:l,menuWidth:s,themeConfig:c,blurInputOnSelect:d}=e,u=function(e,t){if(null==e)return{};var o,n,i={},r=Object.keys(e);for(n=0;n<r.length;n++)o=r[n],t.indexOf(o)>=0||(i[o]=e[o]);return i}(e,["inputId","selectId","idSuffix","menuWidth","themeConfig","blurInputOnSelect"]);const m=t.useMemo(()=>p(c)?function e(t,o){const n=Object.assign({},t);return Object.keys(o).forEach(i=>{p(o[i])?n[i]=i in t?e(t[i],o[i]):o[i]:n[i]=o[i]}),n}(G,c):Object.assign({},G),[c]),b="boolean"==typeof d?d:(()=>window.matchMedia("(pointer: coarse)").matches)(),h=Object.assign({},u,{idSuffix:l,inputId:f(r,l),selectId:f(a,l),menuWidth:s||m.menu.width,blurInputOnSelect:b});return i.createElement(o.ThemeProvider,{theme:m},i.createElement(_,Object.assign({ref:n},h)))});J.displayName="SelectWrapper",e.Select=J,Object.defineProperty(e,"__esModule",{value:!0})}));
`,_=i.forwardRef(({inputId:e,selectId:o,idSuffix:n,isLoading:r,onKeyDown:a,clearIcon:l,caretIcon:s,isInvalid:c,ariaLabel:d,menuWidth:f,isDisabled:m,inputDelay:x,onMenuOpen:$,onMenuClose:S,onInputBlur:C,isClearable:E,onInputFocus:k,initialValue:z,addClassNames:D,ariaLabelledBy:N,onOptionChange:L,getOptionLabel:j,getOptionValue:R,openMenuOnFocus:T,isAriaLiveEnabled:A,menuOverscanCount:M,blurInputOnSelect:B,renderOptionLabel:V,getIsOptionDisabled:P,filterIsCaseSensitive:_,getFilterOptionString:G,isSearchable:J=!0,tabSelectsOption:Q=!0,closeMenuOnSelect:Z=!0,scrollMenuIntoView:ee=!0,backspaceClearsValue:te=!0,options:oe=h,placeholder:ne="Select option..",noOptionsMsg:ie="No options",menuItemSize:re=35,menuMaxHeight:ae=300},le)=>{const se=t.useRef(),ce=t.useRef(null),de=t.useRef(null),ue=t.useRef(null),[pe,fe]=t.useState(""),[me,be]=t.useState(!1),[he,ge]=t.useState(!1),[ve,we]=t.useState(v),[Oe,xe]=t.useState(w),$e=((e,o)=>{const[n,i]=t.useState(e);return t.useEffect(()=>{if(void 0===o)return;const t=setTimeout(()=>{i(e)},o);return()=>{clearTimeout(t)}},[e,o]),void 0===o?e:n})(pe,x),{data:ye,value:Se,label:Ce,initFlag:Ee}=Oe,{data:Ie,value:ke,label:ze,index:De,isDisabled:Ne}=ve,Fe=t.useCallback(e=>j?j(e):e.label,[j]),Le=t.useCallback(e=>R?R(e):e.value,[R]),je=t.useCallback(e=>V?V(e):Fe(e),[V,Fe]),Re=((e,o,n,i,r,a)=>{const[l,s]=t.useState(n);return t.useEffect(()=>{if(o){const t=e=>{e&&s(e),r&&r()};b(e.current,i,t)}else s(n),a&&a()},[e,o,a,r,n,i]),l})(de,me,ae,ee,$,S),Te=O(oe,$e,Le,Fe,P,G,_),Ae=()=>{ue.current&&ue.current.blur()},Me=()=>{ue.current&&ue.current.focus()},Be=e=>{ce.current&&ce.current.scrollToItem(e)},Ve=t.useCallback((e,t)=>{t?be(!1):xe(e||g)},[]),We=t.useCallback(e=>{if(!u(Te))return void be(!0);const t=Oe.value?Te.findIndex(e=>e.value===Oe.value):-1,o=t>-1?t:e===q.FIRST?0:Te.length-1;be(!0),we(Object.assign({index:o},Te[o])),Be(o)},[Te,Oe]);t.useImperativeHandle(le,()=>({blur:Ae,focus:Me,clearValue:()=>{Ve(),we(v)},setValue:e=>{const t=function(e,t,o){if(null==e||Array.isArray(e))return;const n=e&&e!==Object(e)?e:o(e);return t.find(e=>e.value===n)||void 0}(e,Te,Le);Ve(t)}})),t.useEffect(()=>{he&&T&&We(q.FIRST)},[he,T,We]),t.useEffect(()=>{Ee&&p(z)&&Ve({data:z,value:Le(z),label:Fe(z)})},[Ve,z,Ee,Le,Fe]),t.useEffect(()=>{L&&L(ye||null),!ye&&we(v),B&&ye?Ae():Z&&(be(!1),fe(""))},[ye,L,Z,B]),t.useEffect(()=>{(1===Te.length||Te.length&&(Te.length!==oe.length||0===se.current))&&(we(Object.assign({index:0},Te[0])),Be(0)),se.current=Te.length},[oe,Te]);const Pe=()=>{Ie&&!Ne&&(Z&&Se===ke?be(!1):Ve({data:Ie,value:ke,label:ze}))},Ue=e=>{if(!u(Te))return;const t=e===q.DOWN?(De+1)%Te.length:De>0?De-1:Te.length-1;we(Object.assign({index:t},Te[t])),Be(t)},qe=e=>{m||(he||Me(),me?"INPUT"!==e.currentTarget.tagName&&(be(!1),pe&&fe("")):We(q.FIRST),"INPUT"!==e.currentTarget.tagName&&e.preventDefault())},He=t.useCallback(e=>{C&&C(e),ge(!1),be(!1),fe("")},[C]),Ke=t.useCallback(e=>{k&&k(e),ge(!0)},[k]),Ye=t.useCallback(e=>{be(!0),fe(e.currentTarget.value||"")},[]),Xe=t.useCallback(e=>{e.stopPropagation(),"mousedown"===e.type&&e.preventDefault(),xe(g),Me()},[]);return i.createElement(H,{id:o,onKeyDown:e=>{if(!(m||a&&(a(e),e.defaultPrevented))){switch(e.key){case"ArrowDown":me?Ue(q.DOWN):We(q.FIRST);break;case"ArrowUp":me?Ue(q.UP):We(q.LAST);break;case" ":if(pe)return;me?Pe():We(q.FIRST);break;case"Enter":229!==e.keyCode&&Pe();break;case"Escape":be(!1),fe("");break;case"Tab":if(e.shiftKey||!me||!Ie)return;Q?Pe():(be(!1),fe(""));break;case"Delete":case"Backspace":if(pe||!te||!E)return;Ve();break;default:return}e.preventDefault()}},"data-testid":void 0,className:D?"rfs-select-container":void 0},i.createElement(Y,{isInvalid:c,isFocused:he,isDisabled:m,onTouchEnd:qe,onMouseDown:qe,"data-testid":void 0,className:D?"rfs-control-container":void 0},i.createElement(K,null,i.createElement(I,{inputValue:pe,placeholder:ne,selectedOptionData:ye,renderOptionLabel:je}),i.createElement(F,{id:e,ref:ue,disabled:m,ariaLabel:d,inputValue:pe,onBlur:He,isSearchable:J,onFocus:Ke,addClassNames:D,onChange:Ye,ariaLabelledBy:N})),i.createElement(W,{menuOpen:me,clearIcon:l,caretIcon:s,isInvalid:c,isLoading:r,addClassNames:D,onClearMouseDown:Xe,showClear:!(!E||m||!ye)})),i.createElement(X,{ref:de,hideMenu:!me,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),Me()},"data-testid":void 0,className:D?"rfs-menu-container":void 0},i.createElement(y,{ref:ce,width:f,idSuffix:n,maxHeight:Re,itemSize:re,menuOptions:Te,noOptionsMsg:ie,selectOption:Ve,overscanCount:M,focusedOptionIndex:De,renderOptionLabel:je,selectedOptionValue:Se})),A&&he&&i.createElement(U,{menuOpen:me,ariaLabel:d,inputValue:pe,isSearchable:J,optionCount:Te.length,focusedOptionLabel:ze,focusedOptionIndex:De,selectedOptionLabel:Ce,isFocusedOptionDisabled:Ne}))});_.displayName="Select";var G=Object.freeze({color:{accent:"#007bff",border:"#ced4da",invalid:"#dc3545",disabled:"#e9ecef",placeholder:"#6E7276",invalidFocus:"rgba(220, 53, 69, 0.25)"},select:{},loader:{opacity:"0.42",size:"0.625rem",color:"#007bff",padding:"0.375rem 0.75rem"},icon:{color:"#cccccc",padding:"0.5rem 0.9375rem",hoverColor:"#A6A6A6",clear:{fontWeight:900,fontSize:"0.85em",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:{borderWidth:"1px",borderStyle:"solid",borderRadius:"0.25rem",boxShadow:"0 0 0 0.2rem",padding:"0.375rem 0.75rem",height:"calc(1.5em + 0.75rem + 2px)",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",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"}});const J=i.forwardRef((e,n)=>{let{inputId:r,selectId:a,idSuffix:l,menuWidth:s,themeConfig:c,blurInputOnSelect:d}=e,u=function(e,t){if(null==e)return{};var o,n,i={},r=Object.keys(e);for(n=0;n<r.length;n++)o=r[n],t.indexOf(o)>=0||(i[o]=e[o]);return i}(e,["inputId","selectId","idSuffix","menuWidth","themeConfig","blurInputOnSelect"]);const m=t.useMemo(()=>p(c)?function e(t,o){const n=Object.assign({},t);return Object.keys(o).forEach(i=>{p(o[i])?n[i]=i in t?e(t[i],o[i]):o[i]:n[i]=o[i]}),n}(G,c):Object.assign({},G),[c]),b="boolean"==typeof d?d:(()=>window.matchMedia("(pointer: coarse)").matches)(),h=Object.assign({},u,{idSuffix:l,inputId:f(r,l),selectId:f(a,l),menuWidth:s||m.menu.width,blurInputOnSelect:b});return i.createElement(o.ThemeProvider,{theme:m},i.createElement(_,Object.assign({ref:n},h)))});J.displayName="SelectWrapper",e.Select=J,Object.defineProperty(e,"__esModule",{value:!0})}));

11

dist/index.cjs.js

@@ -208,8 +208,9 @@ 'use strict';

const [menuHeight, setMenuHeight] = React.useState(menuHeightDefault);
const handleOnMenuOpen = React.useCallback(availableSpace => {
availableSpace && setMenuHeight(availableSpace);
onMenuOpen && onMenuOpen();
}, [onMenuOpen]);
React.useEffect(() => {
if (menuOpen) {
const handleOnMenuOpen = availableSpace => {
availableSpace && setMenuHeight(availableSpace);
onMenuOpen && onMenuOpen();
};
scrollMenuIntoViewOnOpen(menuRef.current, scrollMenuIntoView, handleOnMenuOpen);

@@ -220,3 +221,3 @@ } else {

}
}, [menuRef, menuOpen, onMenuClose, handleOnMenuOpen, menuHeightDefault, scrollMenuIntoView]);
}, [menuRef, menuOpen, onMenuClose, onMenuOpen, menuHeightDefault, scrollMenuIntoView]);
return menuHeight;

@@ -223,0 +224,0 @@ };

13

dist/index.esm.js

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

import React, { useState, useEffect, useCallback, useMemo, Fragment, useRef, useImperativeHandle } from 'react';
import React, { useState, useEffect, useMemo, Fragment, useRef, useCallback, useImperativeHandle } from 'react';
import styled, { keyframes, css, ThemeProvider } from 'styled-components';

@@ -200,8 +200,9 @@ import { areEqual, FixedSizeList } from 'react-window';

const [menuHeight, setMenuHeight] = useState(menuHeightDefault);
const handleOnMenuOpen = useCallback(availableSpace => {
availableSpace && setMenuHeight(availableSpace);
onMenuOpen && onMenuOpen();
}, [onMenuOpen]);
useEffect(() => {
if (menuOpen) {
const handleOnMenuOpen = availableSpace => {
availableSpace && setMenuHeight(availableSpace);
onMenuOpen && onMenuOpen();
};
scrollMenuIntoViewOnOpen(menuRef.current, scrollMenuIntoView, handleOnMenuOpen);

@@ -212,3 +213,3 @@ } else {

}
}, [menuRef, menuOpen, onMenuClose, handleOnMenuOpen, menuHeightDefault, scrollMenuIntoView]);
}, [menuRef, menuOpen, onMenuClose, onMenuOpen, menuHeightDefault, scrollMenuIntoView]);
return menuHeight;

@@ -215,0 +216,0 @@ };

2

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

@@ -5,0 +5,0 @@ "description": "Miro-sized and micro-optimized select component for ReactJS",

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc