react-multi-select-component-19/dist/esm/index.js

Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all

function e(e,r){if(r==null||r>e.length)r=e.length;for(var n=0,t=new Array(r);n<r;n++)t[n]=e[n];return t}function r(e){if(Array.isArray(e))return e}function n(r){if(Array.isArray(r))return e(r)}function t(e,r,n,t,o,a,i){try{var c=e[a](i);var s=c.value}catch(e){n(e);return}if(c.done){r(s)}else{Promise.resolve(s).then(t,o)}}function o(e){return function(){var r=this,n=arguments;return new Promise(function(o,a){var i=e.apply(r,n);function c(e){t(i,o,a,c,s,"next",e)}function s(e){t(i,o,a,c,s,"throw",e)}c(undefined)})}}function a(e,r,n){if(r in e){Object.defineProperty(e,r,{value:n,enumerable:true,configurable:true,writable:true})}else{e[r]=n}return e}function i(e){if(typeof Symbol!=="undefined"&&e[Symbol.iterator]!=null||e["@@iterator"]!=null)return Array.from(e)}function c(e,r){var n=e==null?null:typeof Symbol!=="undefined"&&e[Symbol.iterator]||e["@@iterator"];if(n==null)return;var t=[];var o=true;var a=false;var i,c;try{for(n=n.call(e);!(o=(i=n.next()).done);o=true){t.push(i.value);if(r&&t.length===r)break}}catch(e){a=true;c=e}finally{try{if(!o&&n["return"]!=null)n["return"]()}finally{if(a)throw c}}return t}function s(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function l(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function u(e){for(var r=1;r<arguments.length;r++){var n=arguments[r]!=null?arguments[r]:{};var t=Object.keys(n);if(typeof Object.getOwnPropertySymbols==="function"){t=t.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))}t.forEach(function(r){a(e,r,n[r])})}return e}function d(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);if(r){t=t.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})}n.push.apply(n,t)}return n}function f(e,r){r=r!=null?r:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(e,Object.getOwnPropertyDescriptors(r))}else{d(Object(r)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})}return e}function p(e,n){return r(e)||c(e,n)||h(e,n)||s()}function m(e){return n(e)||i(e)||h(e)||l()}function v(e){"@swc/helpers - typeof";return e&&typeof Symbol!=="undefined"&&e.constructor===Symbol?"symbol":typeof e}function h(r,n){if(!r)return;if(typeof r==="string")return e(r,n);var t=Object.prototype.toString.call(r).slice(8,-1);if(t==="Object"&&r.constructor)t=r.constructor.name;if(t==="Map"||t==="Set")return Array.from(t);if(t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return e(r,n)}function b(e,r){var n,t,o,a,i={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]};return a={next:c(0),"throw":c(1),"return":c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(e){return function(r){return s([e,r])}}function s(a){if(n)throw new TypeError("Generator is already executing.");while(i)try{if(n=1,t&&(o=a[0]&2?t["return"]:a[0]?t["throw"]||((o=t["return"])&&o.call(t),0):t.next)&&!(o=o.call(t,a[1])).done)return o;if(t=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;t=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(o=i.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(a[0]===6&&i.label<o[1]){i.label=o[1];o=a;break}if(o&&i.label<o[2]){i.label=o[2];i.ops.push(a);break}if(o[2])i.ops.pop();i.trys.pop();continue}a=r.call(e,i)}catch(e){a=[6,e];t=0}finally{n=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}}function y(e){var r=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},n=r.insertAt;if(!e||(typeof document==="undefined"?"undefined":v(document))>"u")return;var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",n==="top"&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}y(".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-offset:-1px;outline-color:var(--rmsc-primary)}.rmsc .select-item:hover{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;font-size:1em}.rmsc .search input:focus{background:var(--rmsc-hover)}.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}}\n");import g,{useEffect as x,useState as w}from"react";import{jsx as k}from"react/jsx-runtime";var S={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"},j={value:[],hasSelectAll:!0,className:"multi-select",debounceDuration:200,options:[]},O=g.createContext({}),C=function(e){var r=e.props,n=e.children;var t=p(w(r.options),2),o=t[0],a=t[1],i=function(e){var n;return((n=r.overrideStrings)===null||n===void 0?void 0:n[e])||S[e]};return x(function(){a(r.options)},[r.options]),k(O.Provider,{value:f(u({t:i},j,r),{options:o,setOptions:a}),children:n})},A=function(){return g.useContext(O)};import{useEffect as E,useRef as N,useState as R}from"react";import{useEffect as P,useRef as I}from"react";function T(e,r){var n=I(!1);P(function(){n.current?e():n.current=!0},r)}import{useCallback as _,useEffect as D,useMemo as W,useRef as M}from"react";var L={when:!0,eventTypes:["keydown"]};function U(e,r,n){var t=W(function(){return Array.isArray(e)?e:[e]},[e]),o=Object.assign({},L,n),a=o.when,i=o.eventTypes,c=M(r),s=o.target;D(function(){c.current=r});var l=_(function(e){t.some(function(r){return e.key===r||e.code===r})&&c.current(e)},[t]);D(function(){if(a&&(typeof window==="undefined"?"undefined":v(window))<"u"){var e=s?s.current:window;return i.forEach(function(r){e&&e.addEventListener(r,l)}),function(){i.forEach(function(r){e&&e.removeEventListener(r,l)})}}},[a,i,t,s,r])}var z={ARROW_DOWN:"ArrowDown",ARROW_UP:"ArrowUp",ENTER:"Enter",ESCAPE:"Escape",SPACE:"Space"};import{useCallback as F,useEffect as B,useMemo as q,useRef as G,useState as H}from"react";var J=function(e,r){var n;return function t(){for(var t=arguments.length,o=new Array(t),a=0;a<t;a++){o[a]=arguments[a]}clearTimeout(n),n=setTimeout(function(){e.apply(null,o)},r)}};function V(e,r){return r?e.filter(function(e){var n=e.label,t=e.value;return n!=null&&t!=null&&n.toLowerCase().includes(r.toLowerCase())}):e}import{jsx as $,jsxs as K}from"react/jsx-runtime";var Q=function(){return K("svg",{width:"24",height:"24",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"dropdown-search-clear-icon gray",children:[$("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),$("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})};import{useRef as X}from"react";import{jsx as Y,jsxs as Z}from"react/jsx-runtime";var ee=function(e){var r=e.checked,n=e.option,t=e.onClick,o=e.disabled;return Z("div",{className:"item-renderer ".concat(o?"disabled":""),children:[Y("input",{type:"checkbox",onChange:t,checked:r,tabIndex:-1,disabled:o}),Y("span",{children:n.label})]})},er=ee;import{jsx as en}from"react/jsx-runtime";var et=function(e){var r=e.itemRenderer,n=r===void 0?er:r,t=e.option,o=e.checked,a=e.tabIndex,i=e.disabled,c=e.onSelectionChanged,s=e.onClick;var l=X(null),u=function(e){d(),e.preventDefault()},d=function(){i||c(!o)},f=function(e){d(),s(e)};return U([z.ENTER,z.SPACE],u,{target:l}),en("label",{className:"select-item ".concat(o?"selected":""),role:"option","aria-selected":o,tabIndex:a,ref:l,children:en(n,{option:t,checked:o,onClick:f,disabled:i})})},eo=et;import{Fragment as ea,jsx as ei}from"react/jsx-runtime";var ec=function(e){var r=e.options,n=e.onClick,t=e.skipIndex;var o=A(),a=o.disabled,i=o.value,c=o.onChange,s=o.ItemRenderer,l=function(e,r){a||c(r?m(i).concat([e]):i.filter(function(r){return r.value!==e.value}))};return ei(ea,{children:r.map(function(e,r){var o=r+t;return ei("li",{children:ei(eo,{tabIndex:o,option:e,onSelectionChanged:function(r){return l(e,r)},checked:!!i.find(function(r){return r.value===e.value}),onClick:function(e){return n(e,o)},itemRenderer:s,disabled:e.disabled||a})},(e===null||e===void 0?void 0:e.key)||r)})})},es=ec;import{jsx as el,jsxs as eu}from"react/jsx-runtime";var ed=function(){var e=A(),r=e.t,n=e.onChange,t=e.options,a=e.setOptions,i=e.value,c=e.filterOptions,s=e.ItemRenderer,l=e.disabled,u=e.disableSearch,d=e.hasSelectAll,f=e.ClearIcon,v=e.debounceDuration,h=e.isCreatable,y=e.onCreateOption,g=G(null),x=G(null),w=p(H(""),2),k=w[0],S=w[1],j=p(H(t),2),O=j[0],C=j[1],E=p(H(""),2),N=E[0],R=E[1],P=p(H(0),2),I=P[0],T=P[1],_=F(J(function(e){return R(e)},v),[]),D=q(function(){var e=0;return u||(e+=1),d&&(e+=1),e},[u,d]),W={label:r(k?"selectAllFiltered":"selectAll"),value:""},M=function(e){var r=O.filter(function(e){return!e.disabled}).map(function(e){return e.value});if(e){var n=m(i.map(function(e){return e.value})).concat(m(r));return(c?O:t).filter(function(e){return n.includes(e.value)})}return i.filter(function(e){return!r.includes(e.value)})},L=function(e){var r=M(e);n(r)},$=function(e){_(e.target.value),S(e.target.value),T(0)},K=function(){var e;R(""),S(""),x===null||x===void 0?void 0:(e=x.current)===null||e===void 0?void 0:e.focus()},X=function(e){return T(e)},Y=function(e){switch(e.code){case z.ARROW_UP:en(-1);break;case z.ARROW_DOWN:en(1);break;default:return}e.stopPropagation(),e.preventDefault()};U([z.ARROW_DOWN,z.ARROW_UP],Y,{target:g});var Z=function(){T(0)},ee=/*#__PURE__*/function(){var e=o(function(){var e,r;return b(this,function(o){switch(o.label){case 0:e={label:k,value:k,__isNew__:!0};r=y;if(!r)return[3,2];return[4,y(k)];case 1:r=e=o.sent();o.label=2;case 2:r,a([e].concat(m(t))),K(),n(m(i).concat([e]));return[2]}})});return function r(){return e.apply(this,arguments)}}(),er=/*#__PURE__*/function(){var e=o(function(){var e;return b(this,function(r){switch(r.label){case 0:if(!c)return[3,2];return[4,c(t,N)];case 1:e=r.sent();return[3,3];case 2:e=V(t,N);r.label=3;case 3:return[2,e]}})});return function r(){return e.apply(this,arguments)}}(),en=function(e){var r=I+e;r=Math.max(0,r),r=Math.min(r,t.length+Math.max(D-1,0)),T(r)};B(function(){var e,r;g===null||g===void 0?void 0:(r=g.current)===null||r===void 0?void 0:(e=r.querySelector("[tabIndex='".concat(I,"']")))===null||e===void 0?void 0:e.focus()},[I]);var et=p(q(function(){var e=O.filter(function(e){return!e.disabled});return[e.every(function(e){return i.findIndex(function(r){return r.value===e.value})!==-1}),e.length!==0]},[O,i]),2),ea=et[0],ei=et[1];B(function(){er().then(C)},[N,t]);var ec=G(null);U([z.ENTER],ee,{target:ec});var ed=h&&k&&!O.some(function(e){return(e===null||e===void 0?void 0:e.value)===k});return eu("div",{className:"select-panel",role:"listbox",ref:g,children:[!u&&eu("div",{className:"search",children:[el("input",{placeholder:r("search"),type:"text","aria-describedby":r("search"),onChange:$,onFocus:Z,value:k,ref:x,tabIndex:0}),el("button",{type:"button",className:"search-clear-button",hidden:!k,onClick:K,"aria-label":r("clearSearch"),children:f||el(Q,{})})]}),eu("ul",{className:"options",children:[d&&ei&&el(eo,{tabIndex:D===1?0:1,checked:ea,option:W,onSelectionChanged:L,onClick:function(){return X(1)},itemRenderer:s,disabled:l}),O.length?el(es,{skipIndex:D,options:O,onClick:function(e,r){return X(r)}}):ed?el("li",{onClick:ee,className:"select-item creatable",tabIndex:1,ref:ec,children:"".concat(r("create"),' "').concat(k,'"')}):el("li",{className:"no-options",children:r("noOptions")})]})]})},ef=ed;import{jsx as ep}from"react/jsx-runtime";var em=function(e){var r=e.expanded;return ep("svg",{width:"24",height:"24",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"dropdown-heading-dropdown-arrow gray",children:ep("path",{d:r?"M18 15 12 9 6 15":"M6 9L12 15 18 9"})})};import{jsx as ev}from"react/jsx-runtime";var eh=function(){var e=A(),r=e.t,n=e.value,t=e.options,o=e.valueRenderer,a=n.length===0,i=n.length===t.length,c=o&&o(n,t);return a?ev("span",{className:"gray",children:c||r("selectSomeItems")}):ev("span",{children:c||(i?r("allItemsAreSelected"):n.map(function(e){return e.label}).join(", "))})};import{jsx as eb}from"react/jsx-runtime";var ey=function(e){var r=e.size,n=r===void 0?24:r;return eb("span",{style:{width:n,marginRight:"0.2rem"},children:eb("svg",{width:n,height:n,className:"spinner",viewBox:"0 0 50 50",style:{display:"inline",verticalAlign:"middle"},children:eb("circle",{cx:"25",cy:"25",r:"20",fill:"none",className:"path"})})})};import{jsx as eg,jsxs as ex}from"react/jsx-runtime";var ew=function(){var e=A(),r=e.t,n=e.onMenuToggle,t=e.ArrowRenderer,o=e.shouldToggleOnHover,a=e.isLoading,i=e.disabled,c=e.onChange,s=e.labelledBy,l=e.value,u=e.isOpen,d=e.defaultIsOpen,f=e.ClearSelectedIcon,m=e.closeOnChangedValue;E(function(){m&&x(!1)},[l]);var v=p(R(!0),2),h=v[0],b=v[1],y=p(R(d),2),g=y[0],x=y[1],w=p(R(!1),2),k=w[0],S=w[1],j=t||em,O=N(null);T(function(){n&&n(g)},[g]),E(function(){d===void 0&&typeof u=="boolean"&&(b(!1),x(u))},[u]);var C=function(e){var r;["text","button"].includes(e.target.type)&&[z.SPACE,z.ENTER].includes(e.code)||(h&&(e.code===z.ESCAPE?(x(!1),O===null||O===void 0?void 0:(r=O.current)===null||r===void 0?void 0:r.focus()):x(!0)),e.preventDefault())};U([z.ENTER,z.ARROW_DOWN,z.SPACE,z.ESCAPE],C,{target:O});var P=function(e){h&&o&&x(e)},I=function(){return!k&&S(!0)},_=function(e){!e.currentTarget.contains(e.relatedTarget)&&h&&(S(!1),x(!1))},D=function(){return P(!0)},W=function(){return P(!1)},M=function(){h&&x(a||i?!1:!g)},L=function(e){e.stopPropagation(),c([]),h&&x(!1)};return ex("div",{tabIndex:0,className:"dropdown-container","aria-labelledby":s,"aria-expanded":g,"aria-readonly":!0,"aria-disabled":i,ref:O,onFocus:I,onBlur:_,onMouseEnter:D,onMouseLeave:W,children:[ex("div",{className:"dropdown-heading",onClick:M,children:[eg("div",{className:"dropdown-heading-value",children:eg(eh,{})}),a&&eg(ey,{}),l.length>0&&f!==null&&eg("button",{type:"button",className:"clear-selected-button",onClick:L,disabled:i,"aria-label":r("clearSelected"),children:f||eg(Q,{})}),eg(j,{expanded:g})]}),g&&eg("div",{className:"dropdown-content",children:eg("div",{className:"panel-content",children:eg(ef,{})})})]})},ek=ew;import{jsx as eS}from"react/jsx-runtime";var ej=function(e){return eS(C,{props:e,children:eS("div",{className:"rmsc ".concat(e.className||"multi-select"),children:eS(ek,{})})})},eO=ej;export{ek as Dropdown,eO as MultiSelect,eo as SelectItem,ef as SelectPanel};