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

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

"use strict";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 l=c.value}catch(e){n(e);return}if(c.done){r(l)}else{Promise.resolve(l).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,l,"next",e)}function l(e){t(i,o,a,c,l,"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 l(){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 u(){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 s(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)||l()}function v(e){return n(e)||i(e)||h(e)||u()}function m(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 l([e,r])}}function l(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}}}var y=Object.create;var x=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var k=function(e,r){for(var n in r)x(e,n,{get:r[n],enumerable:!0})},O=function(e,r,n,t){var o=true,a=false,i=undefined;if(r&&(typeof r==="undefined"?"undefined":m(r))=="object"||typeof r=="function")try{var c=function(){var o=u.value;!S.call(e,o)&&o!==n&&x(e,o,{get:function(){return r[o]},enumerable:!(t=g(r,o))||t.enumerable})};for(var l=w(r)[Symbol.iterator](),u;!(o=(u=l.next()).done);o=true)c()}catch(e){a=true;i=e}finally{try{if(!o&&l.return!=null){l.return()}}finally{if(a){throw i}}}return e};var C=function(e,r,n){return n=e!=null?y(j(e)):{},O(r||!e||!e.__esModule?x(n,"default",{value:e,enumerable:!0}):n,e)},E=function(e){return O(x({},"__esModule",{value:!0}),e)};var A={};k(A,{Dropdown:function(){return eh},MultiSelect:function(){return ex},SelectItem:function(){return er},SelectPanel:function(){return ec}});module.exports=E(A);function P(e){var r=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},n=r.insertAt;if(!e||(typeof document==="undefined"?"undefined":m(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))}P(".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");var N=C(require("react")),R=require("react/jsx-runtime"),I={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"},_={value:[],hasSelectAll:!0,className:"multi-select",debounceDuration:200,options:[]},D=N.default.createContext({}),T=function(e){var r=e.props,n=e.children;var t=p((0,N.useState)(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])||I[e]};return(0,N.useEffect)(function(){a(r.options)},[r.options]),(0,R.jsx)(D.Provider,{value:f(s({t:i},_,r),{options:o,setOptions:a}),children:n})},q=function(){return N.default.useContext(D)};var M=require("react");var W=require("react");function L(e,r){var n=(0,W.useRef)(!1);(0,W.useEffect)(function(){n.current?e():n.current=!0},r)}var U=require("react"),F={when:!0,eventTypes:["keydown"]};function z(e,r,n){var t=(0,U.useMemo)(function(){return Array.isArray(e)?e:[e]},[e]),o=Object.assign({},F,n),a=o.when,i=o.eventTypes,c=(0,U.useRef)(r),l=o.target;(0,U.useEffect)(function(){c.current=r});var u=(0,U.useCallback)(function(e){t.some(function(r){return e.key===r||e.code===r})&&c.current(e)},[t]);(0,U.useEffect)(function(){if(a&&(typeof window==="undefined"?"undefined":m(window))<"u"){var e=l?l.current:window;return i.forEach(function(r){e&&e.addEventListener(r,u)}),function(){i.forEach(function(r){e&&e.removeEventListener(r,u)})}}},[a,i,t,l,r])}var B={ARROW_DOWN:"ArrowDown",ARROW_UP:"ArrowUp",ENTER:"Enter",ESCAPE:"Escape",SPACE:"Space"};var G=require("react");var H=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}var $=require("react/jsx-runtime"),J=function(){return(0,$.jsxs)("svg",{width:"24",height:"24",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"dropdown-search-clear-icon gray",children:[(0,$.jsx)("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),(0,$.jsx)("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})};var K=require("react");var Q=require("react/jsx-runtime"),X=function(e){var r=e.checked,n=e.option,t=e.onClick,o=e.disabled;return(0,Q.jsxs)("div",{className:"item-renderer ".concat(o?"disabled":""),children:[(0,Q.jsx)("input",{type:"checkbox",onChange:t,checked:r,tabIndex:-1,disabled:o}),(0,Q.jsx)("span",{children:n.label})]})},Y=X;var Z=require("react/jsx-runtime"),ee=function(e){var r=e.itemRenderer,n=r===void 0?Y:r,t=e.option,o=e.checked,a=e.tabIndex,i=e.disabled,c=e.onSelectionChanged,l=e.onClick;var u=(0,K.useRef)(null),s=function(e){d(),e.preventDefault()},d=function(){i||c(!o)},f=function(e){d(),l(e)};return z([B.ENTER,B.SPACE],s,{target:u}),(0,Z.jsx)("label",{className:"select-item ".concat(o?"selected":""),role:"option","aria-selected":o,tabIndex:a,ref:u,children:(0,Z.jsx)(n,{option:t,checked:o,onClick:f,disabled:i})})},er=ee;var en=require("react/jsx-runtime"),et=function(e){var r=e.options,n=e.onClick,t=e.skipIndex;var o=q(),a=o.disabled,i=o.value,c=o.onChange,l=o.ItemRenderer,u=function(e,r){a||c(r?v(i).concat([e]):i.filter(function(r){return r.value!==e.value}))};return(0,en.jsx)(en.Fragment,{children:r.map(function(e,r){var o=r+t;return(0,en.jsx)("li",{children:(0,en.jsx)(er,{tabIndex:o,option:e,onSelectionChanged:function(r){return u(e,r)},checked:!!i.find(function(r){return r.value===e.value}),onClick:function(e){return n(e,o)},itemRenderer:l,disabled:e.disabled||a})},(e===null||e===void 0?void 0:e.key)||r)})})},eo=et;var ea=require("react/jsx-runtime");var ei=function(){var e=q(),r=e.t,n=e.onChange,t=e.options,a=e.setOptions,i=e.value,c=e.filterOptions,l=e.ItemRenderer,u=e.disabled,s=e.disableSearch,d=e.hasSelectAll,f=e.ClearIcon,m=e.debounceDuration,h=e.isCreatable,y=e.onCreateOption,x=(0,G.useRef)(null),g=(0,G.useRef)(null),w=p((0,G.useState)(""),2),j=w[0],S=w[1],k=p((0,G.useState)(t),2),O=k[0],C=k[1],E=p((0,G.useState)(""),2),A=E[0],P=E[1],N=p((0,G.useState)(0),2),R=N[0],I=N[1],_=(0,G.useCallback)(H(function(e){return P(e)},m),[]),D=(0,G.useMemo)(function(){var e=0;return s||(e+=1),d&&(e+=1),e},[s,d]),T={label:r(j?"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=v(i.map(function(e){return e.value})).concat(v(r));return(c?O:t).filter(function(e){return n.includes(e.value)})}return i.filter(function(e){return!r.includes(e.value)})},W=function(e){var r=M(e);n(r)},L=function(e){_(e.target.value),S(e.target.value),I(0)},U=function(){var e;P(""),S(""),g===null||g===void 0?void 0:(e=g.current)===null||e===void 0?void 0:e.focus()},F=function(e){return I(e)},$=function(e){switch(e.code){case B.ARROW_UP:Y(-1);break;case B.ARROW_DOWN:Y(1);break;default:return}e.stopPropagation(),e.preventDefault()};z([B.ARROW_DOWN,B.ARROW_UP],$,{target:x});var K=function(){I(0)},Q=/*#__PURE__*/function(){var e=o(function(){var e,r;return b(this,function(o){switch(o.label){case 0:e={label:j,value:j,__isNew__:!0};r=y;if(!r)return[3,2];return[4,y(j)];case 1:r=e=o.sent();o.label=2;case 2:r,a([e].concat(v(t))),U(),n(v(i).concat([e]));return[2]}})});return function r(){return e.apply(this,arguments)}}(),X=/*#__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,A)];case 1:e=r.sent();return[3,3];case 2:e=V(t,A);r.label=3;case 3:return[2,e]}})});return function r(){return e.apply(this,arguments)}}(),Y=function(e){var r=R+e;r=Math.max(0,r),r=Math.min(r,t.length+Math.max(D-1,0)),I(r)};(0,G.useEffect)(function(){var e,r;x===null||x===void 0?void 0:(r=x.current)===null||r===void 0?void 0:(e=r.querySelector("[tabIndex='".concat(R,"']")))===null||e===void 0?void 0:e.focus()},[R]);var Z=p((0,G.useMemo)(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),ee=Z[0],en=Z[1];(0,G.useEffect)(function(){X().then(C)},[A,t]);var et=(0,G.useRef)(null);z([B.ENTER],Q,{target:et});var ei=h&&j&&!O.some(function(e){return(e===null||e===void 0?void 0:e.value)===j});return(0,ea.jsxs)("div",{className:"select-panel",role:"listbox",ref:x,children:[!s&&(0,ea.jsxs)("div",{className:"search",children:[(0,ea.jsx)("input",{placeholder:r("search"),type:"text","aria-describedby":r("search"),onChange:L,onFocus:K,value:j,ref:g,tabIndex:0}),(0,ea.jsx)("button",{type:"button",className:"search-clear-button",hidden:!j,onClick:U,"aria-label":r("clearSearch"),children:f||(0,ea.jsx)(J,{})})]}),(0,ea.jsxs)("ul",{className:"options",children:[d&&en&&(0,ea.jsx)(er,{tabIndex:D===1?0:1,checked:ee,option:T,onSelectionChanged:W,onClick:function(){return F(1)},itemRenderer:l,disabled:u}),O.length?(0,ea.jsx)(eo,{skipIndex:D,options:O,onClick:function(e,r){return F(r)}}):ei?(0,ea.jsx)("li",{onClick:Q,className:"select-item creatable",tabIndex:1,ref:et,children:"".concat(r("create"),' "').concat(j,'"')}):(0,ea.jsx)("li",{className:"no-options",children:r("noOptions")})]})]})},ec=ei;var el=require("react/jsx-runtime"),eu=function(e){var r=e.expanded;return(0,el.jsx)("svg",{width:"24",height:"24",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"dropdown-heading-dropdown-arrow gray",children:(0,el.jsx)("path",{d:r?"M18 15 12 9 6 15":"M6 9L12 15 18 9"})})};var es=require("react/jsx-runtime"),ed=function(){var e=q(),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?(0,es.jsx)("span",{className:"gray",children:c||r("selectSomeItems")}):(0,es.jsx)("span",{children:c||(i?r("allItemsAreSelected"):n.map(function(e){return e.label}).join(", "))})};var ef=require("react/jsx-runtime"),ep=function(e){var r=e.size,n=r===void 0?24:r;return(0,ef.jsx)("span",{style:{width:n,marginRight:"0.2rem"},children:(0,ef.jsx)("svg",{width:n,height:n,className:"spinner",viewBox:"0 0 50 50",style:{display:"inline",verticalAlign:"middle"},children:(0,ef.jsx)("circle",{cx:"25",cy:"25",r:"20",fill:"none",className:"path"})})})};var ev=require("react/jsx-runtime"),em=function(){var e=q(),r=e.t,n=e.onMenuToggle,t=e.ArrowRenderer,o=e.shouldToggleOnHover,a=e.isLoading,i=e.disabled,c=e.onChange,l=e.labelledBy,u=e.value,s=e.isOpen,d=e.defaultIsOpen,f=e.ClearSelectedIcon,v=e.closeOnChangedValue;(0,M.useEffect)(function(){v&&g(!1)},[u]);var m=p((0,M.useState)(!0),2),h=m[0],b=m[1],y=p((0,M.useState)(d),2),x=y[0],g=y[1],w=p((0,M.useState)(!1),2),j=w[0],S=w[1],k=t||eu,O=(0,M.useRef)(null);L(function(){n&&n(x)},[x]),(0,M.useEffect)(function(){d===void 0&&typeof s=="boolean"&&(b(!1),g(s))},[s]);var C=function(e){var r;["text","button"].includes(e.target.type)&&[B.SPACE,B.ENTER].includes(e.code)||(h&&(e.code===B.ESCAPE?(g(!1),O===null||O===void 0?void 0:(r=O.current)===null||r===void 0?void 0:r.focus()):g(!0)),e.preventDefault())};z([B.ENTER,B.ARROW_DOWN,B.SPACE,B.ESCAPE],C,{target:O});var E=function(e){h&&o&&g(e)},A=function(){return!j&&S(!0)},P=function(e){!e.currentTarget.contains(e.relatedTarget)&&h&&(S(!1),g(!1))},N=function(){return E(!0)},R=function(){return E(!1)},I=function(){h&&g(a||i?!1:!x)},_=function(e){e.stopPropagation(),c([]),h&&g(!1)};return(0,ev.jsxs)("div",{tabIndex:0,className:"dropdown-container","aria-labelledby":l,"aria-expanded":x,"aria-readonly":!0,"aria-disabled":i,ref:O,onFocus:A,onBlur:P,onMouseEnter:N,onMouseLeave:R,children:[(0,ev.jsxs)("div",{className:"dropdown-heading",onClick:I,children:[(0,ev.jsx)("div",{className:"dropdown-heading-value",children:(0,ev.jsx)(ed,{})}),a&&(0,ev.jsx)(ep,{}),u.length>0&&f!==null&&(0,ev.jsx)("button",{type:"button",className:"clear-selected-button",onClick:_,disabled:i,"aria-label":r("clearSelected"),children:f||(0,ev.jsx)(J,{})}),(0,ev.jsx)(k,{expanded:x})]}),x&&(0,ev.jsx)("div",{className:"dropdown-content",children:(0,ev.jsx)("div",{className:"panel-content",children:(0,ev.jsx)(ec,{})})})]})},eh=em;var eb=require("react/jsx-runtime"),ey=function(e){return(0,eb.jsx)(T,{props:e,children:(0,eb.jsx)("div",{className:"rmsc ".concat(e.className||"multi-select"),children:(0,eb.jsx)(eh,{})})})},ex=ey;0&&(module.exports={Dropdown:Dropdown,MultiSelect:MultiSelect,SelectItem:SelectItem,SelectPanel:SelectPanel});