react-multi-select-component - npm Package Compare versions

Comparing version 4.2.8 to 4.2.9

dist/esm/index.js

@@ -1,2 +0,2 @@
-var Me=Object.defineProperty,De=Object.defineProperties;var Te=Object.getOwnPropertyDescriptors;var se=Object.getOwnPropertySymbols;var Fe=Object.prototype.hasOwnProperty,Le=Object.prototype.propertyIsEnumerable;var le=(e,r,t)=>r in e?Me(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,$=(e,r)=>{for(var t in r||(r={}))Fe.call(r,t)&&le(e,t,r[t]);if(se)for(var t of se(r))Le.call(r,t)&&le(e,t,r[t]);return e},ae=(e,r)=>De(e,Te(r));function j(e,{insertAt:r}={}){if(!e||typeof document>"u")return;let t=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",r==="top"&&t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}j(`.rmsc{--rmsc-main: #4285f4;--rmsc-hover: #f1f3f5;--rmsc-selected: #e2e6ea;--rmsc-border: #ccc;--rmsc-gray: #aaa;--rmsc-bg: #fff;--rmsc-p: 10px;--rmsc-radius: 4px;--rmsc-h: 38px}.rmsc *{box-sizing:border-box;transition:all .2s ease}.rmsc .gray{color:var(--rmsc-gray)}.rmsc .dropdown-content{position:absolute;z-index:1;top:100%;width:100%;padding-top:8px}.rmsc .dropdown-content .panel-content{overflow:hidden;border-radius:var(--rmsc-radius);background:var(--rmsc-bg);box-shadow:0 0 0 1px #0000001a,0 4px 11px #0000001a}.rmsc .dropdown-container{position:relative;outline:0;background-color:var(--rmsc-bg);border:1px solid var(--rmsc-border);border-radius:var(--rmsc-radius)}.rmsc .dropdown-container[aria-disabled=true]:focus-within{box-shadow:var(--rmsc-gray) 0 0 0 1px;border-color:var(--rmsc-gray)}.rmsc .dropdown-container:focus-within{box-shadow:var(--rmsc-main) 0 0 0 1px;border-color:var(--rmsc-main)}.rmsc .dropdown-heading{position:relative;padding:0 var(--rmsc-p);display:flex;align-items:center;width:100%;height:var(--rmsc-h);cursor:default;outline:0}.rmsc .dropdown-heading .dropdown-heading-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.rmsc .clear-selected-button{cursor:pointer;background:none;border:0;padding:0;display:flex}.rmsc .options{max-height:260px;overflow-y:auto;margin:0;padding-left:0}.rmsc .options li{list-style:none;margin:0}.rmsc .select-item{box-sizing:border-box;cursor:pointer;display:block;padding:var(--rmsc-p);outline:0}.rmsc .select-item:hover,.rmsc .select-item:focus{background:var(--rmsc-hover)}.rmsc .select-item.selected{background:var(--rmsc-selected)}.rmsc .no-options{padding:var(--rmsc-p);text-align:center;color:var(--rmsc-gray)}.rmsc .search{width:100%;position:relative;border-bottom:1px solid var(--rmsc-border)}.rmsc .search input{background:none;height:var(--rmsc-h);padding:0 var(--rmsc-p);width:100%;outline:0;border:0}.rmsc .search-clear-button{cursor:pointer;position:absolute;top:0;right:0;bottom:0;background:none;border:0;padding:0 calc(var(--rmsc-p) / 2)}.rmsc .search-clear-button [hidden]{display:none}.rmsc .item-renderer{display:flex;align-items:baseline}.rmsc .item-renderer input{margin:0 5px 0 0}.rmsc .item-renderer.disabled{opacity:.5}.rmsc .spinner{animation:rotate 2s linear infinite}.rmsc .spinner .path{stroke:var(--rmsc-border);stroke-width:4px;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
-`);import ee from"react";import Y,{useEffect as Ke,useState as We}from"react";var _e={allItemsAreSelected:"All items are selected.",clearSearch:"Clear Search",clearSelected:"Clear Selected",noOptions:"No options",search:"Search",selectAll:"Select All",selectAllFiltered:"Select All (Filtered)",selectSomeItems:"Select...",create:"Create"},Re={value:[],hasSelectAll:!0,className:"multi-select",debounceDuration:200,options:[]},ie=Y.createContext({}),ce=({props:e,children:r})=>{let[t,n]=We(e.options),l=c=>{var m;return((m=e.overrideStrings)==null?void 0:m[c])||_e[c]};return Ke(()=>{n(e.options)},[e.options]),Y.createElement(ie.Provider,{value:ae($($({t:l},Re),e),{options:t,setOptions:n})},r)},O=()=>Y.useContext(ie);import v,{useEffect as Oe,useRef as Xe,useState as X}from"react";import{useEffect as He,useRef as Be}from"react";function de(e,r){let t=Be(!1);He(()=>{t.current?e():t.current=!0},r)}import{useCallback as Ue,useEffect as pe,useMemo as Ve,useRef as $e}from"react";var je={when:!0,eventTypes:["keydown"]};function E(e,r,t){let n=Ve(()=>Array.isArray(e)?e:[e],[e]),l=Object.assign({},je,t),{when:c,eventTypes:m}=l,b=$e(r),{target:s}=l;pe(()=>{b.current=r});let p=Ue(i=>{n.some(a=>i.key===a||i.code===a)&&b.current(i)},[n]);pe(()=>{if(c&&typeof window<"u"){let i=s?s.current:window;return m.forEach(a=>{i&&i.addEventListener(a,p)}),()=>{m.forEach(a=>{i&&i.removeEventListener(a,p)})}}},[c,m,n,s,r])}var u={ARROW_DOWN:"ArrowDown",ARROW_UP:"ArrowUp",ENTER:"Enter",ESCAPE:"Escape",SPACE:"Space"};import x,{useCallback as Je,useEffect as ge,useMemo as ve,useRef as G,useState as K}from"react";var me=(e,r)=>{let t;return function(...n){clearTimeout(t),t=setTimeout(()=>{e.apply(null,n)},r)}};function ue(e,r){return r?e.filter(({label:t,value:n})=>t!=null&&n!=null&&t.toLowerCase().includes(r.toLowerCase())):e}import q from"react";var F=()=>q.createElement("svg",{width:"24",height:"24",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"dropdown-search-clear-icon gray"},q.createElement("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),q.createElement("line",{x1:"6",y1:"6",x2:"18",y2:"18"}));import he,{useRef as qe}from"react";import z from"react";var Ye=({checked:e,option:r,onClick:t,disabled:n})=>z.createElement("div",{className:`item-renderer ${n&&"disabled"}`},z.createElement("input",{type:"checkbox",onChange:t,checked:e,tabIndex:-1,disabled:n}),z.createElement("span",null,r.label)),fe=Ye;var ze=({itemRenderer:e=fe,option:r,checked:t,tabIndex:n,disabled:l,onSelectionChanged:c,onClick:m})=>{let b=qe(),s=a=>{p(),a.preventDefault()},p=()=>{l||c(!t)},i=a=>{p(),m(a)};return E([u.ENTER,u.SPACE],s,{target:b}),he.createElement("label",{className:`select-item ${t&&"selected"}`,role:"option","aria-selected":t,tabIndex:n,ref:b},he.createElement(e,{option:r,checked:t,onClick:i,disabled:l}))},M=ze;import L from"react";var Ge=({options:e,onClick:r,skipIndex:t})=>{let{disabled:n,value:l,onChange:c,ItemRenderer:m}=O(),b=(s,p)=>{n||c(p?[...l,s]:l.filter(i=>i.value!==s.value))};return L.createElement(L.Fragment,null,e.map((s,p)=>{let i=p+t;return L.createElement("li",{key:(s==null?void 0:s.key)||p},L.createElement(M,{tabIndex:i,option:s,onSelectionChanged:a=>b(s,a),checked:!!l.find(a=>a.value===s.value),onClick:a=>r(a,i),itemRenderer:m,disabled:s.disabled||n}))}))},be=Ge;var Qe=()=>{let{t:e,onChange:r,options:t,setOptions:n,value:l,filterOptions:c,ItemRenderer:m,disabled:b,disableSearch:s,hasSelectAll:p,ClearIcon:i,debounceDuration:a,isCreatable:W,onCreateOption:C}=O(),k=G(),g=G(),[f,D]=K(""),[S,_]=K(t),[y,T]=K(""),[I,A]=K(0),R=Je(me(o=>T(o),a),[]),P=ve(()=>{let o=0;return s||(o+=1),p&&(o+=1),o},[s,p]),H={label:e(f?"selectAllFiltered":"selectAll"),value:""},B=o=>{let d=S.filter(w=>!w.disabled).map(w=>w.value);if(o){let Ne=[...l.map(V=>V.value),...d];return(c?S:t).filter(V=>Ne.includes(V.value))}return l.filter(w=>!d.includes(w.value))},U=o=>{let d=B(o);r(d)},h=o=>{R(o.target.value),D(o.target.value),A(0)},N=()=>{var o;T(""),D(""),(o=g==null?void 0:g.current)==null||o.focus()},te=o=>A(o),ke=o=>{switch(o.code){case u.ARROW_UP:oe(-1);break;case u.ARROW_DOWN:oe(1);break;default:return}o.stopPropagation(),o.preventDefault()};E([u.ARROW_DOWN,u.ARROW_UP],ke,{target:k});let Ee=()=>{A(0)},re=async()=>{let o={label:f,value:f,__isNew__:!0};C&&(o=await C(f)),n([o,...t]),N(),r([...l,o])},Ie=async()=>c?await c(t,y):ue(t,y),oe=o=>{let d=I+o;d=Math.max(0,d),d=Math.min(d,t.length+Math.max(P-1,0)),A(d)};ge(()=>{var o,d;(d=(o=k==null?void 0:k.current)==null?void 0:o.querySelector(`[tabIndex='${I}']`))==null||d.focus()},[I]);let[Ae,Pe]=ve(()=>{let o=S.filter(d=>!d.disabled);return[o.every(d=>l.findIndex(w=>w.value===d.value)!==-1),o.length!==0]},[S,l]);ge(()=>{Ie().then(_)},[y,t]);let ne=G();return E([u.ENTER],re,{target:ne}),x.createElement("div",{className:"select-panel",role:"listbox",ref:k},!s&&x.createElement("div",{className:"search"},x.createElement("input",{placeholder:e("search"),type:"text","aria-describedby":e("search"),onChange:h,onFocus:Ee,value:f,ref:g,tabIndex:0}),x.createElement("button",{type:"button",className:"search-clear-button",hidden:!f,onClick:N,"aria-label":e("clearSearch")},i||x.createElement(F,null))),x.createElement("ul",{className:"options"},p&&Pe&&x.createElement(M,{tabIndex:P===1?0:1,checked:Ae,option:H,onSelectionChanged:U,onClick:()=>te(1),itemRenderer:m,disabled:b}),S.length?x.createElement(be,{skipIndex:P,options:S,onClick:(o,d)=>te(d)}):W?x.createElement("li",{onClick:re,className:"select-item creatable",tabIndex:P===1?0:1,ref:ne},`${e("create")} "${f}"`):x.createElement("li",{className:"no-options"},e("noOptions"))))},J=Qe;import xe from"react";var Se=({expanded:e})=>xe.createElement("svg",{width:"24",height:"24",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"dropdown-heading-dropdown-arrow gray"},xe.createElement("path",{d:e?"M18 15 12 9 6 15":"M6 9L12 15 18 9"}));import ye from"react";var Ce=()=>{let{t:e,value:r,options:t,valueRenderer:n}=O(),l=r.length===0,c=r.length===t.length,m=n&&n(r,t);return l?ye.createElement("span",{className:"gray"},m||e("selectSomeItems")):ye.createElement("span",null,m||(c?e("allItemsAreSelected"):(()=>r.map(s=>s.label).join(", "))()))};import Q from"react";var we=({size:e=24})=>Q.createElement("span",{style:{width:e,marginRight:"0.2rem"}},Q.createElement("svg",{width:e,height:e,className:"spinner",viewBox:"0 0 50 50",style:{display:"inline",verticalAlign:"middle"}},Q.createElement("circle",{cx:"25",cy:"25",r:"20",fill:"none",className:"path"})));var Ze=()=>{let{t:e,onMenuToggle:r,ArrowRenderer:t,shouldToggleOnHover:n,isLoading:l,disabled:c,onChange:m,labelledBy:b,value:s,isOpen:p,defaultIsOpen:i,ClearSelectedIcon:a,closeOnChangedValue:W}=O();Oe(()=>{W&&f(!1)},[s]);let[C,k]=X(!0),[g,f]=X(i),[D,S]=X(!1),_=t||Se,y=Xe();de(()=>{r&&r(g)},[g]),Oe(()=>{i===void 0&&typeof p=="boolean"&&(k(!1),f(p))},[p]);let T=h=>{var N;["text","button"].includes(h.target.type)&&[u.SPACE,u.ENTER].includes(h.code)||(C&&(h.code===u.ESCAPE?(f(!1),(N=y==null?void 0:y.current)==null||N.focus()):f(!0)),h.preventDefault())};E([u.ENTER,u.ARROW_DOWN,u.SPACE,u.ESCAPE],T,{target:y});let I=h=>{C&&n&&f(h)},A=()=>!D&&S(!0),R=h=>{!h.currentTarget.contains(h.relatedTarget)&&C&&(S(!1),f(!1))},P=()=>I(!0),H=()=>I(!1),B=()=>{C&&f(l||c?!1:!g)},U=h=>{h.stopPropagation(),m([]),C&&f(!1)};return v.createElement("div",{tabIndex:0,className:"dropdown-container","aria-labelledby":b,"aria-expanded":g,"aria-readonly":!0,"aria-disabled":c,ref:y,onFocus:A,onBlur:R,onMouseEnter:P,onMouseLeave:H},v.createElement("div",{className:"dropdown-heading",onClick:B},v.createElement("div",{className:"dropdown-heading-value"},v.createElement(Ce,null)),l&&v.createElement(we,null),s.length>0&&a!==null&&v.createElement("button",{type:"button",className:"clear-selected-button",onClick:U,disabled:c,"aria-label":e("clearSelected")},a||v.createElement(F,null)),v.createElement(_,{expanded:g})),g&&v.createElement("div",{className:"dropdown-content"},v.createElement("div",{className:"panel-content"},v.createElement(J,null))))},Z=Ze;var et=e=>ee.createElement(ce,{props:e},ee.createElement("div",{className:`rmsc ${e.className||"multi-select"}`},ee.createElement(Z,null))),tt=et;export{Z as Dropdown,tt as MultiSelect,M as SelectItem,J as SelectPanel};
+var De=Object.defineProperty,Te=Object.defineProperties;var Fe=Object.getOwnPropertyDescriptors;var se=Object.getOwnPropertySymbols;var Le=Object.prototype.hasOwnProperty,Ke=Object.prototype.propertyIsEnumerable;var ae=(e,r,t)=>r in e?De(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,$=(e,r)=>{for(var t in r||(r={}))Le.call(r,t)&&ae(e,t,r[t]);if(se)for(var t of se(r))Ke.call(r,t)&&ae(e,t,r[t]);return e},le=(e,r)=>Te(e,Fe(r));function j(e,{insertAt:r}={}){if(!e||typeof document>"u")return;let t=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",r==="top"&&t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}j(`.rmsc{--rmsc-main: #4285f4;--rmsc-hover: #f1f3f5;--rmsc-selected: #e2e6ea;--rmsc-border: #ccc;--rmsc-gray: #aaa;--rmsc-bg: #fff;--rmsc-p: 10px;--rmsc-radius: 4px;--rmsc-h: 38px}.rmsc *{box-sizing:border-box;transition:all .2s ease}.rmsc .gray{color:var(--rmsc-gray)}.rmsc .dropdown-content{position:absolute;z-index:1;top:100%;width:100%;padding-top:8px}.rmsc .dropdown-content .panel-content{overflow:hidden;border-radius:var(--rmsc-radius);background:var(--rmsc-bg);box-shadow:0 0 0 1px #0000001a,0 4px 11px #0000001a}.rmsc .dropdown-container{position:relative;outline:0;background-color:var(--rmsc-bg);border:1px solid var(--rmsc-border);border-radius:var(--rmsc-radius)}.rmsc .dropdown-container[aria-disabled=true]:focus-within{box-shadow:var(--rmsc-gray) 0 0 0 1px;border-color:var(--rmsc-gray)}.rmsc .dropdown-container:focus-within{box-shadow:var(--rmsc-main) 0 0 0 1px;border-color:var(--rmsc-main)}.rmsc .dropdown-heading{position:relative;padding:0 var(--rmsc-p);display:flex;align-items:center;width:100%;height:var(--rmsc-h);cursor:default;outline:0}.rmsc .dropdown-heading .dropdown-heading-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.rmsc .clear-selected-button{cursor:pointer;background:none;border:0;padding:0;display:flex}.rmsc .options{max-height:260px;overflow-y:auto;margin:0;padding-left:0}.rmsc .options li{list-style:none;margin:0}.rmsc .select-item{box-sizing:border-box;cursor:pointer;display:block;padding:var(--rmsc-p);outline:0}.rmsc .select-item:hover,.rmsc .select-item:focus{background:var(--rmsc-hover)}.rmsc .select-item.selected{background:var(--rmsc-selected)}.rmsc .no-options{padding:var(--rmsc-p);text-align:center;color:var(--rmsc-gray)}.rmsc .search{width:100%;position:relative;border-bottom:1px solid var(--rmsc-border)}.rmsc .search input{background:none;height:var(--rmsc-h);padding:0 var(--rmsc-p);width:100%;outline:0;border:0}.rmsc .search-clear-button{cursor:pointer;position:absolute;top:0;right:0;bottom:0;background:none;border:0;padding:0 calc(var(--rmsc-p) / 2)}.rmsc .search-clear-button [hidden]{display:none}.rmsc .item-renderer{display:flex;align-items:baseline}.rmsc .item-renderer input{margin:0 5px 0 0}.rmsc .item-renderer.disabled{opacity:.5}.rmsc .spinner{animation:rotate 2s linear infinite}.rmsc .spinner .path{stroke:var(--rmsc-border);stroke-width:4px;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
+`);import ee from"react";import Y,{useEffect as We,useState as _e}from"react";var Re={allItemsAreSelected:"All items are selected.",clearSearch:"Clear Search",clearSelected:"Clear Selected",noOptions:"No options",search:"Search",selectAll:"Select All",selectAllFiltered:"Select All (Filtered)",selectSomeItems:"Select...",create:"Create"},He={value:[],hasSelectAll:!0,className:"multi-select",debounceDuration:200,options:[]},ie=Y.createContext({}),ce=({props:e,children:r})=>{let[t,n]=_e(e.options),a=c=>{var u;return((u=e.overrideStrings)==null?void 0:u[c])||Re[c]};return We(()=>{n(e.options)},[e.options]),Y.createElement(ie.Provider,{value:le($($({t:a},He),e),{options:t,setOptions:n})},r)},O=()=>Y.useContext(ie);import v,{useEffect as Oe,useRef as Ze,useState as X}from"react";import{useEffect as Be,useRef as Ue}from"react";function de(e,r){let t=Ue(!1);Be(()=>{t.current?e():t.current=!0},r)}import{useCallback as Ve,useEffect as me,useMemo as $e,useRef as je}from"react";var Ye={when:!0,eventTypes:["keydown"]};function E(e,r,t){let n=$e(()=>Array.isArray(e)?e:[e],[e]),a=Object.assign({},Ye,t),{when:c,eventTypes:u}=a,b=je(r),{target:s}=a;me(()=>{b.current=r});let m=Ve(i=>{n.some(l=>i.key===l||i.code===l)&&b.current(i)},[n]);me(()=>{if(c&&typeof window<"u"){let i=s?s.current:window;return u.forEach(l=>{i&&i.addEventListener(l,m)}),()=>{u.forEach(l=>{i&&i.removeEventListener(l,m)})}}},[c,u,n,s,r])}var f={ARROW_DOWN:"ArrowDown",ARROW_UP:"ArrowUp",ENTER:"Enter",ESCAPE:"Escape",SPACE:"Space"};import S,{useCallback as Qe,useEffect as ge,useMemo as ve,useRef as G,useState as K}from"react";var pe=(e,r)=>{let t;return function(...n){clearTimeout(t),t=setTimeout(()=>{e.apply(null,n)},r)}};function ue(e,r){return r?e.filter(({label:t,value:n})=>t!=null&&n!=null&&t.toLowerCase().includes(r.toLowerCase())):e}import q from"react";var F=()=>q.createElement("svg",{width:"24",height:"24",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"dropdown-search-clear-icon gray"},q.createElement("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),q.createElement("line",{x1:"6",y1:"6",x2:"18",y2:"18"}));import he,{useRef as ze}from"react";import z from"react";var qe=({checked:e,option:r,onClick:t,disabled:n})=>z.createElement("div",{className:`item-renderer ${n&&"disabled"}`},z.createElement("input",{type:"checkbox",onChange:t,checked:e,tabIndex:-1,disabled:n}),z.createElement("span",null,r.label)),fe=qe;var Ge=({itemRenderer:e=fe,option:r,checked:t,tabIndex:n,disabled:a,onSelectionChanged:c,onClick:u})=>{let b=ze(),s=l=>{m(),l.preventDefault()},m=()=>{a||c(!t)},i=l=>{m(),u(l)};return E([f.ENTER,f.SPACE],s,{target:b}),he.createElement("label",{className:`select-item ${t&&"selected"}`,role:"option","aria-selected":t,tabIndex:n,ref:b},he.createElement(e,{option:r,checked:t,onClick:i,disabled:a}))},M=Ge;import L from"react";var Je=({options:e,onClick:r,skipIndex:t})=>{let{disabled:n,value:a,onChange:c,ItemRenderer:u}=O(),b=(s,m)=>{n||c(m?[...a,s]:a.filter(i=>i.value!==s.value))};return L.createElement(L.Fragment,null,e.map((s,m)=>{let i=m+t;return L.createElement("li",{key:(s==null?void 0:s.key)||m},L.createElement(M,{tabIndex:i,option:s,onSelectionChanged:l=>b(s,l),checked:!!a.find(l=>l.value===s.value),onClick:l=>r(l,i),itemRenderer:u,disabled:s.disabled||n}))}))},be=Je;var Xe=()=>{let{t:e,onChange:r,options:t,setOptions:n,value:a,filterOptions:c,ItemRenderer:u,disabled:b,disableSearch:s,hasSelectAll:m,ClearIcon:i,debounceDuration:l,isCreatable:W,onCreateOption:C}=O(),k=G(),g=G(),[p,D]=K(""),[x,_]=K(t),[y,T]=K(""),[I,A]=K(0),R=Qe(pe(o=>T(o),l),[]),P=ve(()=>{let o=0;return s||(o+=1),m&&(o+=1),o},[s,m]),H={label:e(p?"selectAllFiltered":"selectAll"),value:""},B=o=>{let d=x.filter(w=>!w.disabled).map(w=>w.value);if(o){let Me=[...a.map(V=>V.value),...d];return(c?x:t).filter(V=>Me.includes(V.value))}return a.filter(w=>!d.includes(w.value))},U=o=>{let d=B(o);r(d)},h=o=>{R(o.target.value),D(o.target.value),A(0)},N=()=>{var o;T(""),D(""),(o=g==null?void 0:g.current)==null||o.focus()},te=o=>A(o),ke=o=>{switch(o.code){case f.ARROW_UP:oe(-1);break;case f.ARROW_DOWN:oe(1);break;default:return}o.stopPropagation(),o.preventDefault()};E([f.ARROW_DOWN,f.ARROW_UP],ke,{target:k});let Ee=()=>{A(0)},re=async()=>{let o={label:p,value:p,__isNew__:!0};C&&(o=await C(p)),n([o,...t]),N(),r([...a,o])},Ie=async()=>c?await c(t,y):ue(t,y),oe=o=>{let d=I+o;d=Math.max(0,d),d=Math.min(d,t.length+Math.max(P-1,0)),A(d)};ge(()=>{var o,d;(d=(o=k==null?void 0:k.current)==null?void 0:o.querySelector(`[tabIndex='${I}']`))==null||d.focus()},[I]);let[Ae,Pe]=ve(()=>{let o=x.filter(d=>!d.disabled);return[o.every(d=>a.findIndex(w=>w.value===d.value)!==-1),o.length!==0]},[x,a]);ge(()=>{Ie().then(_)},[y,t]);let ne=G();E([f.ENTER],re,{target:ne});let Ne=W&&p&&!x.some(o=>(o==null?void 0:o.value)===p);return S.createElement("div",{className:"select-panel",role:"listbox",ref:k},!s&&S.createElement("div",{className:"search"},S.createElement("input",{placeholder:e("search"),type:"text","aria-describedby":e("search"),onChange:h,onFocus:Ee,value:p,ref:g,tabIndex:0}),S.createElement("button",{type:"button",className:"search-clear-button",hidden:!p,onClick:N,"aria-label":e("clearSearch")},i||S.createElement(F,null))),S.createElement("ul",{className:"options"},m&&Pe&&S.createElement(M,{tabIndex:P===1?0:1,checked:Ae,option:H,onSelectionChanged:U,onClick:()=>te(1),itemRenderer:u,disabled:b}),x.length?S.createElement(be,{skipIndex:P,options:x,onClick:(o,d)=>te(d)}):Ne?S.createElement("li",{onClick:re,className:"select-item creatable",tabIndex:P===1?0:1,ref:ne},`${e("create")} "${p}"`):S.createElement("li",{className:"no-options"},e("noOptions"))))},J=Xe;import xe from"react";var Se=({expanded:e})=>xe.createElement("svg",{width:"24",height:"24",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"dropdown-heading-dropdown-arrow gray"},xe.createElement("path",{d:e?"M18 15 12 9 6 15":"M6 9L12 15 18 9"}));import ye from"react";var Ce=()=>{let{t:e,value:r,options:t,valueRenderer:n}=O(),a=r.length===0,c=r.length===t.length,u=n&&n(r,t);return a?ye.createElement("span",{className:"gray"},u||e("selectSomeItems")):ye.createElement("span",null,u||(c?e("allItemsAreSelected"):(()=>r.map(s=>s.label).join(", "))()))};import Q from"react";var we=({size:e=24})=>Q.createElement("span",{style:{width:e,marginRight:"0.2rem"}},Q.createElement("svg",{width:e,height:e,className:"spinner",viewBox:"0 0 50 50",style:{display:"inline",verticalAlign:"middle"}},Q.createElement("circle",{cx:"25",cy:"25",r:"20",fill:"none",className:"path"})));var et=()=>{let{t:e,onMenuToggle:r,ArrowRenderer:t,shouldToggleOnHover:n,isLoading:a,disabled:c,onChange:u,labelledBy:b,value:s,isOpen:m,defaultIsOpen:i,ClearSelectedIcon:l,closeOnChangedValue:W}=O();Oe(()=>{W&&p(!1)},[s]);let[C,k]=X(!0),[g,p]=X(i),[D,x]=X(!1),_=t||Se,y=Ze();de(()=>{r&&r(g)},[g]),Oe(()=>{i===void 0&&typeof m=="boolean"&&(k(!1),p(m))},[m]);let T=h=>{var N;["text","button"].includes(h.target.type)&&[f.SPACE,f.ENTER].includes(h.code)||(C&&(h.code===f.ESCAPE?(p(!1),(N=y==null?void 0:y.current)==null||N.focus()):p(!0)),h.preventDefault())};E([f.ENTER,f.ARROW_DOWN,f.SPACE,f.ESCAPE],T,{target:y});let I=h=>{C&&n&&p(h)},A=()=>!D&&x(!0),R=h=>{!h.currentTarget.contains(h.relatedTarget)&&C&&(x(!1),p(!1))},P=()=>I(!0),H=()=>I(!1),B=()=>{C&&p(a||c?!1:!g)},U=h=>{h.stopPropagation(),u([]),C&&p(!1)};return v.createElement("div",{tabIndex:0,className:"dropdown-container","aria-labelledby":b,"aria-expanded":g,"aria-readonly":!0,"aria-disabled":c,ref:y,onFocus:A,onBlur:R,onMouseEnter:P,onMouseLeave:H},v.createElement("div",{className:"dropdown-heading",onClick:B},v.createElement("div",{className:"dropdown-heading-value"},v.createElement(Ce,null)),a&&v.createElement(we,null),s.length>0&&l!==null&&v.createElement("button",{type:"button",className:"clear-selected-button",onClick:U,disabled:c,"aria-label":e("clearSelected")},l||v.createElement(F,null)),v.createElement(_,{expanded:g})),g&&v.createElement("div",{className:"dropdown-content"},v.createElement("div",{className:"panel-content"},v.createElement(J,null))))},Z=et;var tt=e=>ee.createElement(ce,{props:e},ee.createElement("div",{className:`rmsc ${e.className||"multi-select"}`},ee.createElement(Z,null))),rt=tt;export{Z as Dropdown,rt as MultiSelect,M as SelectItem,J as SelectPanel};

dist/index.js

@@ -1,2 +0,2 @@
-var Me=Object.create;var L=Object.defineProperty,De=Object.defineProperties,Te=Object.getOwnPropertyDescriptor,Fe=Object.getOwnPropertyDescriptors,Le=Object.getOwnPropertyNames,ce=Object.getOwnPropertySymbols,Ke=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty,We=Object.prototype.propertyIsEnumerable;var de=(e,r,t)=>r in e?L(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,te=(e,r)=>{for(var t in r||(r={}))pe.call(r,t)&&de(e,t,r[t]);if(ce)for(var t of ce(r))We.call(r,t)&&de(e,t,r[t]);return e},me=(e,r)=>De(e,Fe(r));var _e=(e,r)=>{for(var t in r)L(e,t,{get:r[t],enumerable:!0})},ue=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of Le(r))!pe.call(e,s)&&s!==t&&L(e,s,{get:()=>r[s],enumerable:!(o=Te(r,s))||o.enumerable});return e};var S=(e,r,t)=>(t=e!=null?Me(Ke(e)):{},ue(r||!e||!e.__esModule?L(t,"default",{value:e,enumerable:!0}):t,e)),Re=e=>ue(L({},"__esModule",{value:!0}),e);var Ge={};_e(Ge,{Dropdown:()=>Y,MultiSelect:()=>Oe,SelectItem:()=>T,SelectPanel:()=>$});module.exports=Re(Ge);function re(e,{insertAt:r}={}){if(!e||typeof document>"u")return;let t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",r==="top"&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}re(`.rmsc{--rmsc-main: #4285f4;--rmsc-hover: #f1f3f5;--rmsc-selected: #e2e6ea;--rmsc-border: #ccc;--rmsc-gray: #aaa;--rmsc-bg: #fff;--rmsc-p: 10px;--rmsc-radius: 4px;--rmsc-h: 38px}.rmsc *{box-sizing:border-box;transition:all .2s ease}.rmsc .gray{color:var(--rmsc-gray)}.rmsc .dropdown-content{position:absolute;z-index:1;top:100%;width:100%;padding-top:8px}.rmsc .dropdown-content .panel-content{overflow:hidden;border-radius:var(--rmsc-radius);background:var(--rmsc-bg);box-shadow:0 0 0 1px #0000001a,0 4px 11px #0000001a}.rmsc .dropdown-container{position:relative;outline:0;background-color:var(--rmsc-bg);border:1px solid var(--rmsc-border);border-radius:var(--rmsc-radius)}.rmsc .dropdown-container[aria-disabled=true]:focus-within{box-shadow:var(--rmsc-gray) 0 0 0 1px;border-color:var(--rmsc-gray)}.rmsc .dropdown-container:focus-within{box-shadow:var(--rmsc-main) 0 0 0 1px;border-color:var(--rmsc-main)}.rmsc .dropdown-heading{position:relative;padding:0 var(--rmsc-p);display:flex;align-items:center;width:100%;height:var(--rmsc-h);cursor:default;outline:0}.rmsc .dropdown-heading .dropdown-heading-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.rmsc .clear-selected-button{cursor:pointer;background:none;border:0;padding:0;display:flex}.rmsc .options{max-height:260px;overflow-y:auto;margin:0;padding-left:0}.rmsc .options li{list-style:none;margin:0}.rmsc .select-item{box-sizing:border-box;cursor:pointer;display:block;padding:var(--rmsc-p);outline:0}.rmsc .select-item:hover,.rmsc .select-item:focus{background:var(--rmsc-hover)}.rmsc .select-item.selected{background:var(--rmsc-selected)}.rmsc .no-options{padding:var(--rmsc-p);text-align:center;color:var(--rmsc-gray)}.rmsc .search{width:100%;position:relative;border-bottom:1px solid var(--rmsc-border)}.rmsc .search input{background:none;height:var(--rmsc-h);padding:0 var(--rmsc-p);width:100%;outline:0;border:0}.rmsc .search-clear-button{cursor:pointer;position:absolute;top:0;right:0;bottom:0;background:none;border:0;padding:0 calc(var(--rmsc-p) / 2)}.rmsc .search-clear-button [hidden]{display:none}.rmsc .item-renderer{display:flex;align-items:baseline}.rmsc .item-renderer input{margin:0 5px 0 0}.rmsc .item-renderer.disabled{opacity:.5}.rmsc .spinner{animation:rotate 2s linear infinite}.rmsc .spinner .path{stroke:var(--rmsc-border);stroke-width:4px;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
-`);var q=S(require("react"));var E=S(require("react")),He={allItemsAreSelected:"All items are selected.",clearSearch:"Clear Search",clearSelected:"Clear Selected",noOptions:"No options",search:"Search",selectAll:"Select All",selectAllFiltered:"Select All (Filtered)",selectSomeItems:"Select...",create:"Create"},Be={value:[],hasSelectAll:!0,className:"multi-select",debounceDuration:200,options:[]},fe=E.default.createContext({}),he=({props:e,children:r})=>{let[t,o]=(0,E.useState)(e.options),s=p=>{var f;return((f=e.overrideStrings)==null?void 0:f[p])||He[p]};return(0,E.useEffect)(()=>{o(e.options)},[e.options]),E.default.createElement(fe.Provider,{value:me(te(te({t:s},Be),e),{options:t,setOptions:o})},r)},I=()=>E.default.useContext(fe);var c=S(require("react"));var H=require("react");function be(e,r){let t=(0,H.useRef)(!1);(0,H.useEffect)(()=>{t.current?e():t.current=!0},r)}var w=require("react"),Ue={when:!0,eventTypes:["keydown"]};function P(e,r,t){let o=(0,w.useMemo)(()=>Array.isArray(e)?e:[e],[e]),s=Object.assign({},Ue,t),{when:p,eventTypes:f}=s,v=(0,w.useRef)(r),{target:a}=s;(0,w.useEffect)(()=>{v.current=r});let u=(0,w.useCallback)(d=>{o.some(i=>d.key===i||d.code===i)&&v.current(d)},[o]);(0,w.useEffect)(()=>{if(p&&typeof window<"u"){let d=a?a.current:window;return f.forEach(i=>{d&&d.addEventListener(i,u)}),()=>{f.forEach(i=>{d&&d.removeEventListener(i,u)})}}},[p,f,o,a,r])}var h={ARROW_DOWN:"ArrowDown",ARROW_UP:"ArrowUp",ENTER:"Enter",ESCAPE:"Escape",SPACE:"Space"};var l=S(require("react"));var ge=(e,r)=>{let t;return function(...o){clearTimeout(t),t=setTimeout(()=>{e.apply(null,o)},r)}};function ve(e,r){return r?e.filter(({label:t,value:o})=>t!=null&&o!=null&&t.toLowerCase().includes(r.toLowerCase())):e}var B=S(require("react")),U=()=>B.default.createElement("svg",{width:"24",height:"24",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"dropdown-search-clear-icon gray"},B.default.createElement("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),B.default.createElement("line",{x1:"6",y1:"6",x2:"18",y2:"18"}));var K=S(require("react"));var V=S(require("react")),Ve=({checked:e,option:r,onClick:t,disabled:o})=>V.default.createElement("div",{className:`item-renderer ${o&&"disabled"}`},V.default.createElement("input",{type:"checkbox",onChange:t,checked:e,tabIndex:-1,disabled:o}),V.default.createElement("span",null,r.label)),xe=Ve;var $e=({itemRenderer:e=xe,option:r,checked:t,tabIndex:o,disabled:s,onSelectionChanged:p,onClick:f})=>{let v=(0,K.useRef)(),a=i=>{u(),i.preventDefault()},u=()=>{s||p(!t)},d=i=>{u(),f(i)};return P([h.ENTER,h.SPACE],a,{target:v}),K.default.createElement("label",{className:`select-item ${t&&"selected"}`,role:"option","aria-selected":t,tabIndex:o,ref:v},K.default.createElement(e,{option:r,checked:t,onClick:d,disabled:s}))},T=$e;var W=S(require("react"));var je=({options:e,onClick:r,skipIndex:t})=>{let{disabled:o,value:s,onChange:p,ItemRenderer:f}=I(),v=(a,u)=>{o||p(u?[...s,a]:s.filter(d=>d.value!==a.value))};return W.default.createElement(W.default.Fragment,null,e.map((a,u)=>{let d=u+t;return W.default.createElement("li",{key:(a==null?void 0:a.key)||u},W.default.createElement(T,{tabIndex:d,option:a,onSelectionChanged:i=>v(a,i),checked:!!s.find(i=>i.value===a.value),onClick:i=>r(i,d),itemRenderer:f,disabled:a.disabled||o}))}))},Se=je;var Ye=()=>{let{t:e,onChange:r,options:t,setOptions:o,value:s,filterOptions:p,ItemRenderer:f,disabled:v,disableSearch:a,hasSelectAll:u,ClearIcon:d,debounceDuration:i,isCreatable:z,onCreateOption:O}=I(),A=(0,l.useRef)(),x=(0,l.useRef)(),[b,_]=(0,l.useState)(""),[y,G]=(0,l.useState)(t),[C,R]=(0,l.useState)(""),[N,M]=(0,l.useState)(0),J=(0,l.useCallback)(ge(n=>R(n),i),[]),D=(0,l.useMemo)(()=>{let n=0;return a||(n+=1),u&&(n+=1),n},[a,u]),Q={label:e(b?"selectAllFiltered":"selectAll"),value:""},X=n=>{let m=y.filter(k=>!k.disabled).map(k=>k.value);if(n){let Ne=[...s.map(ee=>ee.value),...m];return(p?y:t).filter(ee=>Ne.includes(ee.value))}return s.filter(k=>!m.includes(k.value))},Z=n=>{let m=X(n);r(m)},g=n=>{J(n.target.value),_(n.target.value),M(0)},F=()=>{var n;R(""),_(""),(n=x==null?void 0:x.current)==null||n.focus()},se=n=>M(n),ke=n=>{switch(n.code){case h.ARROW_UP:ae(-1);break;case h.ARROW_DOWN:ae(1);break;default:return}n.stopPropagation(),n.preventDefault()};P([h.ARROW_DOWN,h.ARROW_UP],ke,{target:A});let Ee=()=>{M(0)},le=async()=>{let n={label:b,value:b,__isNew__:!0};O&&(n=await O(b)),o([n,...t]),F(),r([...s,n])},Ie=async()=>p?await p(t,C):ve(t,C),ae=n=>{let m=N+n;m=Math.max(0,m),m=Math.min(m,t.length+Math.max(D-1,0)),M(m)};(0,l.useEffect)(()=>{var n,m;(m=(n=A==null?void 0:A.current)==null?void 0:n.querySelector(`[tabIndex='${N}']`))==null||m.focus()},[N]);let[Ae,Pe]=(0,l.useMemo)(()=>{let n=y.filter(m=>!m.disabled);return[n.every(m=>s.findIndex(k=>k.value===m.value)!==-1),n.length!==0]},[y,s]);(0,l.useEffect)(()=>{Ie().then(G)},[C,t]);let ie=(0,l.useRef)();return P([h.ENTER],le,{target:ie}),l.default.createElement("div",{className:"select-panel",role:"listbox",ref:A},!a&&l.default.createElement("div",{className:"search"},l.default.createElement("input",{placeholder:e("search"),type:"text","aria-describedby":e("search"),onChange:g,onFocus:Ee,value:b,ref:x,tabIndex:0}),l.default.createElement("button",{type:"button",className:"search-clear-button",hidden:!b,onClick:F,"aria-label":e("clearSearch")},d||l.default.createElement(U,null))),l.default.createElement("ul",{className:"options"},u&&Pe&&l.default.createElement(T,{tabIndex:D===1?0:1,checked:Ae,option:Q,onSelectionChanged:Z,onClick:()=>se(1),itemRenderer:f,disabled:v}),y.length?l.default.createElement(Se,{skipIndex:D,options:y,onClick:(n,m)=>se(m)}):z?l.default.createElement("li",{onClick:le,className:"select-item creatable",tabIndex:D===1?0:1,ref:ie},`${e("create")} "${b}"`):l.default.createElement("li",{className:"no-options"},e("noOptions"))))},$=Ye;var oe=S(require("react")),ye=({expanded:e})=>oe.default.createElement("svg",{width:"24",height:"24",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"dropdown-heading-dropdown-arrow gray"},oe.default.createElement("path",{d:e?"M18 15 12 9 6 15":"M6 9L12 15 18 9"}));var ne=S(require("react"));var Ce=()=>{let{t:e,value:r,options:t,valueRenderer:o}=I(),s=r.length===0,p=r.length===t.length,f=o&&o(r,t);return s?ne.default.createElement("span",{className:"gray"},f||e("selectSomeItems")):ne.default.createElement("span",null,f||(p?e("allItemsAreSelected"):(()=>r.map(a=>a.label).join(", "))()))};var j=S(require("react")),we=({size:e=24})=>j.default.createElement("span",{style:{width:e,marginRight:"0.2rem"}},j.default.createElement("svg",{width:e,height:e,className:"spinner",viewBox:"0 0 50 50",style:{display:"inline",verticalAlign:"middle"}},j.default.createElement("circle",{cx:"25",cy:"25",r:"20",fill:"none",className:"path"})));var qe=()=>{let{t:e,onMenuToggle:r,ArrowRenderer:t,shouldToggleOnHover:o,isLoading:s,disabled:p,onChange:f,labelledBy:v,value:a,isOpen:u,defaultIsOpen:d,ClearSelectedIcon:i,closeOnChangedValue:z}=I();(0,c.useEffect)(()=>{z&&b(!1)},[a]);let[O,A]=(0,c.useState)(!0),[x,b]=(0,c.useState)(d),[_,y]=(0,c.useState)(!1),G=t||ye,C=(0,c.useRef)();be(()=>{r&&r(x)},[x]),(0,c.useEffect)(()=>{d===void 0&&typeof u=="boolean"&&(A(!1),b(u))},[u]);let R=g=>{var F;["text","button"].includes(g.target.type)&&[h.SPACE,h.ENTER].includes(g.code)||(O&&(g.code===h.ESCAPE?(b(!1),(F=C==null?void 0:C.current)==null||F.focus()):b(!0)),g.preventDefault())};P([h.ENTER,h.ARROW_DOWN,h.SPACE,h.ESCAPE],R,{target:C});let N=g=>{O&&o&&b(g)},M=()=>!_&&y(!0),J=g=>{!g.currentTarget.contains(g.relatedTarget)&&O&&(y(!1),b(!1))},D=()=>N(!0),Q=()=>N(!1),X=()=>{O&&b(s||p?!1:!x)},Z=g=>{g.stopPropagation(),f([]),O&&b(!1)};return c.default.createElement("div",{tabIndex:0,className:"dropdown-container","aria-labelledby":v,"aria-expanded":x,"aria-readonly":!0,"aria-disabled":p,ref:C,onFocus:M,onBlur:J,onMouseEnter:D,onMouseLeave:Q},c.default.createElement("div",{className:"dropdown-heading",onClick:X},c.default.createElement("div",{className:"dropdown-heading-value"},c.default.createElement(Ce,null)),s&&c.default.createElement(we,null),a.length>0&&i!==null&&c.default.createElement("button",{type:"button",className:"clear-selected-button",onClick:Z,disabled:p,"aria-label":e("clearSelected")},i||c.default.createElement(U,null)),c.default.createElement(G,{expanded:x})),x&&c.default.createElement("div",{className:"dropdown-content"},c.default.createElement("div",{className:"panel-content"},c.default.createElement($,null))))},Y=qe;var ze=e=>q.default.createElement(he,{props:e},q.default.createElement("div",{className:`rmsc ${e.className||"multi-select"}`},q.default.createElement(Y,null))),Oe=ze;0&&(module.exports={Dropdown,MultiSelect,SelectItem,SelectPanel});
+var De=Object.create;var L=Object.defineProperty,Te=Object.defineProperties,Fe=Object.getOwnPropertyDescriptor,Le=Object.getOwnPropertyDescriptors,Ke=Object.getOwnPropertyNames,ce=Object.getOwnPropertySymbols,We=Object.getPrototypeOf,me=Object.prototype.hasOwnProperty,_e=Object.prototype.propertyIsEnumerable;var de=(e,r,t)=>r in e?L(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,te=(e,r)=>{for(var t in r||(r={}))me.call(r,t)&&de(e,t,r[t]);if(ce)for(var t of ce(r))_e.call(r,t)&&de(e,t,r[t]);return e},pe=(e,r)=>Te(e,Le(r));var Re=(e,r)=>{for(var t in r)L(e,t,{get:r[t],enumerable:!0})},ue=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of Ke(r))!me.call(e,s)&&s!==t&&L(e,s,{get:()=>r[s],enumerable:!(n=Fe(r,s))||n.enumerable});return e};var S=(e,r,t)=>(t=e!=null?De(We(e)):{},ue(r||!e||!e.__esModule?L(t,"default",{value:e,enumerable:!0}):t,e)),He=e=>ue(L({},"__esModule",{value:!0}),e);var Je={};Re(Je,{Dropdown:()=>Y,MultiSelect:()=>Oe,SelectItem:()=>T,SelectPanel:()=>$});module.exports=He(Je);function re(e,{insertAt:r}={}){if(!e||typeof document>"u")return;let t=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",r==="top"&&t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}re(`.rmsc{--rmsc-main: #4285f4;--rmsc-hover: #f1f3f5;--rmsc-selected: #e2e6ea;--rmsc-border: #ccc;--rmsc-gray: #aaa;--rmsc-bg: #fff;--rmsc-p: 10px;--rmsc-radius: 4px;--rmsc-h: 38px}.rmsc *{box-sizing:border-box;transition:all .2s ease}.rmsc .gray{color:var(--rmsc-gray)}.rmsc .dropdown-content{position:absolute;z-index:1;top:100%;width:100%;padding-top:8px}.rmsc .dropdown-content .panel-content{overflow:hidden;border-radius:var(--rmsc-radius);background:var(--rmsc-bg);box-shadow:0 0 0 1px #0000001a,0 4px 11px #0000001a}.rmsc .dropdown-container{position:relative;outline:0;background-color:var(--rmsc-bg);border:1px solid var(--rmsc-border);border-radius:var(--rmsc-radius)}.rmsc .dropdown-container[aria-disabled=true]:focus-within{box-shadow:var(--rmsc-gray) 0 0 0 1px;border-color:var(--rmsc-gray)}.rmsc .dropdown-container:focus-within{box-shadow:var(--rmsc-main) 0 0 0 1px;border-color:var(--rmsc-main)}.rmsc .dropdown-heading{position:relative;padding:0 var(--rmsc-p);display:flex;align-items:center;width:100%;height:var(--rmsc-h);cursor:default;outline:0}.rmsc .dropdown-heading .dropdown-heading-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.rmsc .clear-selected-button{cursor:pointer;background:none;border:0;padding:0;display:flex}.rmsc .options{max-height:260px;overflow-y:auto;margin:0;padding-left:0}.rmsc .options li{list-style:none;margin:0}.rmsc .select-item{box-sizing:border-box;cursor:pointer;display:block;padding:var(--rmsc-p);outline:0}.rmsc .select-item:hover,.rmsc .select-item:focus{background:var(--rmsc-hover)}.rmsc .select-item.selected{background:var(--rmsc-selected)}.rmsc .no-options{padding:var(--rmsc-p);text-align:center;color:var(--rmsc-gray)}.rmsc .search{width:100%;position:relative;border-bottom:1px solid var(--rmsc-border)}.rmsc .search input{background:none;height:var(--rmsc-h);padding:0 var(--rmsc-p);width:100%;outline:0;border:0}.rmsc .search-clear-button{cursor:pointer;position:absolute;top:0;right:0;bottom:0;background:none;border:0;padding:0 calc(var(--rmsc-p) / 2)}.rmsc .search-clear-button [hidden]{display:none}.rmsc .item-renderer{display:flex;align-items:baseline}.rmsc .item-renderer input{margin:0 5px 0 0}.rmsc .item-renderer.disabled{opacity:.5}.rmsc .spinner{animation:rotate 2s linear infinite}.rmsc .spinner .path{stroke:var(--rmsc-border);stroke-width:4px;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
+`);var q=S(require("react"));var E=S(require("react")),Be={allItemsAreSelected:"All items are selected.",clearSearch:"Clear Search",clearSelected:"Clear Selected",noOptions:"No options",search:"Search",selectAll:"Select All",selectAllFiltered:"Select All (Filtered)",selectSomeItems:"Select...",create:"Create"},Ue={value:[],hasSelectAll:!0,className:"multi-select",debounceDuration:200,options:[]},fe=E.default.createContext({}),he=({props:e,children:r})=>{let[t,n]=(0,E.useState)(e.options),s=m=>{var h;return((h=e.overrideStrings)==null?void 0:h[m])||Be[m]};return(0,E.useEffect)(()=>{n(e.options)},[e.options]),E.default.createElement(fe.Provider,{value:pe(te(te({t:s},Ue),e),{options:t,setOptions:n})},r)},I=()=>E.default.useContext(fe);var c=S(require("react"));var H=require("react");function be(e,r){let t=(0,H.useRef)(!1);(0,H.useEffect)(()=>{t.current?e():t.current=!0},r)}var w=require("react"),Ve={when:!0,eventTypes:["keydown"]};function P(e,r,t){let n=(0,w.useMemo)(()=>Array.isArray(e)?e:[e],[e]),s=Object.assign({},Ve,t),{when:m,eventTypes:h}=s,v=(0,w.useRef)(r),{target:l}=s;(0,w.useEffect)(()=>{v.current=r});let u=(0,w.useCallback)(d=>{n.some(i=>d.key===i||d.code===i)&&v.current(d)},[n]);(0,w.useEffect)(()=>{if(m&&typeof window<"u"){let d=l?l.current:window;return h.forEach(i=>{d&&d.addEventListener(i,u)}),()=>{h.forEach(i=>{d&&d.removeEventListener(i,u)})}}},[m,h,n,l,r])}var b={ARROW_DOWN:"ArrowDown",ARROW_UP:"ArrowUp",ENTER:"Enter",ESCAPE:"Escape",SPACE:"Space"};var a=S(require("react"));var ge=(e,r)=>{let t;return function(...n){clearTimeout(t),t=setTimeout(()=>{e.apply(null,n)},r)}};function ve(e,r){return r?e.filter(({label:t,value:n})=>t!=null&&n!=null&&t.toLowerCase().includes(r.toLowerCase())):e}var B=S(require("react")),U=()=>B.default.createElement("svg",{width:"24",height:"24",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"dropdown-search-clear-icon gray"},B.default.createElement("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),B.default.createElement("line",{x1:"6",y1:"6",x2:"18",y2:"18"}));var K=S(require("react"));var V=S(require("react")),$e=({checked:e,option:r,onClick:t,disabled:n})=>V.default.createElement("div",{className:`item-renderer ${n&&"disabled"}`},V.default.createElement("input",{type:"checkbox",onChange:t,checked:e,tabIndex:-1,disabled:n}),V.default.createElement("span",null,r.label)),xe=$e;var je=({itemRenderer:e=xe,option:r,checked:t,tabIndex:n,disabled:s,onSelectionChanged:m,onClick:h})=>{let v=(0,K.useRef)(),l=i=>{u(),i.preventDefault()},u=()=>{s||m(!t)},d=i=>{u(),h(i)};return P([b.ENTER,b.SPACE],l,{target:v}),K.default.createElement("label",{className:`select-item ${t&&"selected"}`,role:"option","aria-selected":t,tabIndex:n,ref:v},K.default.createElement(e,{option:r,checked:t,onClick:d,disabled:s}))},T=je;var W=S(require("react"));var Ye=({options:e,onClick:r,skipIndex:t})=>{let{disabled:n,value:s,onChange:m,ItemRenderer:h}=I(),v=(l,u)=>{n||m(u?[...s,l]:s.filter(d=>d.value!==l.value))};return W.default.createElement(W.default.Fragment,null,e.map((l,u)=>{let d=u+t;return W.default.createElement("li",{key:(l==null?void 0:l.key)||u},W.default.createElement(T,{tabIndex:d,option:l,onSelectionChanged:i=>v(l,i),checked:!!s.find(i=>i.value===l.value),onClick:i=>r(i,d),itemRenderer:h,disabled:l.disabled||n}))}))},Se=Ye;var qe=()=>{let{t:e,onChange:r,options:t,setOptions:n,value:s,filterOptions:m,ItemRenderer:h,disabled:v,disableSearch:l,hasSelectAll:u,ClearIcon:d,debounceDuration:i,isCreatable:z,onCreateOption:O}=I(),A=(0,a.useRef)(),x=(0,a.useRef)(),[f,_]=(0,a.useState)(""),[y,G]=(0,a.useState)(t),[C,R]=(0,a.useState)(""),[N,M]=(0,a.useState)(0),J=(0,a.useCallback)(ge(o=>R(o),i),[]),D=(0,a.useMemo)(()=>{let o=0;return l||(o+=1),u&&(o+=1),o},[l,u]),Q={label:e(f?"selectAllFiltered":"selectAll"),value:""},X=o=>{let p=y.filter(k=>!k.disabled).map(k=>k.value);if(o){let Me=[...s.map(ee=>ee.value),...p];return(m?y:t).filter(ee=>Me.includes(ee.value))}return s.filter(k=>!p.includes(k.value))},Z=o=>{let p=X(o);r(p)},g=o=>{J(o.target.value),_(o.target.value),M(0)},F=()=>{var o;R(""),_(""),(o=x==null?void 0:x.current)==null||o.focus()},se=o=>M(o),ke=o=>{switch(o.code){case b.ARROW_UP:le(-1);break;case b.ARROW_DOWN:le(1);break;default:return}o.stopPropagation(),o.preventDefault()};P([b.ARROW_DOWN,b.ARROW_UP],ke,{target:A});let Ee=()=>{M(0)},ae=async()=>{let o={label:f,value:f,__isNew__:!0};O&&(o=await O(f)),n([o,...t]),F(),r([...s,o])},Ie=async()=>m?await m(t,C):ve(t,C),le=o=>{let p=N+o;p=Math.max(0,p),p=Math.min(p,t.length+Math.max(D-1,0)),M(p)};(0,a.useEffect)(()=>{var o,p;(p=(o=A==null?void 0:A.current)==null?void 0:o.querySelector(`[tabIndex='${N}']`))==null||p.focus()},[N]);let[Ae,Pe]=(0,a.useMemo)(()=>{let o=y.filter(p=>!p.disabled);return[o.every(p=>s.findIndex(k=>k.value===p.value)!==-1),o.length!==0]},[y,s]);(0,a.useEffect)(()=>{Ie().then(G)},[C,t]);let ie=(0,a.useRef)();P([b.ENTER],ae,{target:ie});let Ne=z&&f&&!y.some(o=>(o==null?void 0:o.value)===f);return a.default.createElement("div",{className:"select-panel",role:"listbox",ref:A},!l&&a.default.createElement("div",{className:"search"},a.default.createElement("input",{placeholder:e("search"),type:"text","aria-describedby":e("search"),onChange:g,onFocus:Ee,value:f,ref:x,tabIndex:0}),a.default.createElement("button",{type:"button",className:"search-clear-button",hidden:!f,onClick:F,"aria-label":e("clearSearch")},d||a.default.createElement(U,null))),a.default.createElement("ul",{className:"options"},u&&Pe&&a.default.createElement(T,{tabIndex:D===1?0:1,checked:Ae,option:Q,onSelectionChanged:Z,onClick:()=>se(1),itemRenderer:h,disabled:v}),y.length?a.default.createElement(Se,{skipIndex:D,options:y,onClick:(o,p)=>se(p)}):Ne?a.default.createElement("li",{onClick:ae,className:"select-item creatable",tabIndex:D===1?0:1,ref:ie},`${e("create")} "${f}"`):a.default.createElement("li",{className:"no-options"},e("noOptions"))))},$=qe;var oe=S(require("react")),ye=({expanded:e})=>oe.default.createElement("svg",{width:"24",height:"24",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"dropdown-heading-dropdown-arrow gray"},oe.default.createElement("path",{d:e?"M18 15 12 9 6 15":"M6 9L12 15 18 9"}));var ne=S(require("react"));var Ce=()=>{let{t:e,value:r,options:t,valueRenderer:n}=I(),s=r.length===0,m=r.length===t.length,h=n&&n(r,t);return s?ne.default.createElement("span",{className:"gray"},h||e("selectSomeItems")):ne.default.createElement("span",null,h||(m?e("allItemsAreSelected"):(()=>r.map(l=>l.label).join(", "))()))};var j=S(require("react")),we=({size:e=24})=>j.default.createElement("span",{style:{width:e,marginRight:"0.2rem"}},j.default.createElement("svg",{width:e,height:e,className:"spinner",viewBox:"0 0 50 50",style:{display:"inline",verticalAlign:"middle"}},j.default.createElement("circle",{cx:"25",cy:"25",r:"20",fill:"none",className:"path"})));var ze=()=>{let{t:e,onMenuToggle:r,ArrowRenderer:t,shouldToggleOnHover:n,isLoading:s,disabled:m,onChange:h,labelledBy:v,value:l,isOpen:u,defaultIsOpen:d,ClearSelectedIcon:i,closeOnChangedValue:z}=I();(0,c.useEffect)(()=>{z&&f(!1)},[l]);let[O,A]=(0,c.useState)(!0),[x,f]=(0,c.useState)(d),[_,y]=(0,c.useState)(!1),G=t||ye,C=(0,c.useRef)();be(()=>{r&&r(x)},[x]),(0,c.useEffect)(()=>{d===void 0&&typeof u=="boolean"&&(A(!1),f(u))},[u]);let R=g=>{var F;["text","button"].includes(g.target.type)&&[b.SPACE,b.ENTER].includes(g.code)||(O&&(g.code===b.ESCAPE?(f(!1),(F=C==null?void 0:C.current)==null||F.focus()):f(!0)),g.preventDefault())};P([b.ENTER,b.ARROW_DOWN,b.SPACE,b.ESCAPE],R,{target:C});let N=g=>{O&&n&&f(g)},M=()=>!_&&y(!0),J=g=>{!g.currentTarget.contains(g.relatedTarget)&&O&&(y(!1),f(!1))},D=()=>N(!0),Q=()=>N(!1),X=()=>{O&&f(s||m?!1:!x)},Z=g=>{g.stopPropagation(),h([]),O&&f(!1)};return c.default.createElement("div",{tabIndex:0,className:"dropdown-container","aria-labelledby":v,"aria-expanded":x,"aria-readonly":!0,"aria-disabled":m,ref:C,onFocus:M,onBlur:J,onMouseEnter:D,onMouseLeave:Q},c.default.createElement("div",{className:"dropdown-heading",onClick:X},c.default.createElement("div",{className:"dropdown-heading-value"},c.default.createElement(Ce,null)),s&&c.default.createElement(we,null),l.length>0&&i!==null&&c.default.createElement("button",{type:"button",className:"clear-selected-button",onClick:Z,disabled:m,"aria-label":e("clearSelected")},i||c.default.createElement(U,null)),c.default.createElement(G,{expanded:x})),x&&c.default.createElement("div",{className:"dropdown-content"},c.default.createElement("div",{className:"panel-content"},c.default.createElement($,null))))},Y=ze;var Ge=e=>q.default.createElement(he,{props:e},q.default.createElement("div",{className:`rmsc ${e.className||"multi-select"}`},q.default.createElement(Y,null))),Oe=Ge;0&&(module.exports={Dropdown,MultiSelect,SelectItem,SelectPanel});

package.json

 {
   "name": "react-multi-select-component",
-  "version": "4.2.8",
+  "version": "4.2.9",
   "description": "Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all",
@@ -5,0 +5,0 @@ "author": "harshzalavadiya",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36779

increased by0.3%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes