react-multiselect-dropdown-configurable/dist/index.mjs

fully configurable react multi select component

import e,{useRef as n,useEffect as r,useMemo as t,useCallback as o,createContext as a,useContext as i,useReducer as l,useState as c}from"react";var s,d={exports:{}},u={};var p,f,m={};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */function h(){return p||(p=1,"production"!==process.env.NODE_ENV&&function(){function n(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===S?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case f:return"Fragment";case v:return"Profiler";case h:return"StrictMode";case g:return"Suspense";case w:return"SuspenseList";case C:return"Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case p:return"Portal";case b:return(e.displayName||"Context")+".Provider";case y:return(e._context.displayName||"Context")+".Consumer";case x:var r=e.render;return(e=e.displayName)||(e=""!==(e=r.displayName||r.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case k:return null!==(r=e.displayName||null)?r:n(e.type)||"Memo";case j:r=e._payload,e=e._init;try{return n(e(r))}catch(e){}}return null}function r(e){return""+e}function t(e){try{r(e);var n=!1}catch(e){n=!0}if(n){var t=(n=console).error,o="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),r(e)}}function o(e){if(e===f)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===j)return"<...>";try{var r=n(e);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function i(){var e=n(this.type);return T[e]||(T[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function l(e,r,o,a,l,d,p,f){var m,h=r.children;if(void 0!==h)if(a)if(E(h)){for(a=0;a<h.length;a++)c(h[a]);Object.freeze&&Object.freeze(h)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else c(h);if(N.call(r,"key")){h=n(e);var v=Object.keys(r).filter((function(e){return"key"!==e}));a=0<v.length?"{key: someKey, "+v.join(": ..., ")+": ...}":"{key: someKey}",I[h+a]||(v=0<v.length?"{"+v.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',a,h,v,h),I[h+a]=!0)}if(h=null,void 0!==o&&(t(o),h=""+o),function(e){if(N.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return void 0!==e.key}(r)&&(t(r.key),h=""+r.key),"key"in r)for(var y in o={},r)"key"!==y&&(o[y]=r[y]);else o=r;return h&&function(e,n){function r(){s||(s=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}(o,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,n,r,t,o,a,l,c){return r=a.ref,e={$$typeof:u,type:e,key:n,props:a,_owner:o},null!==(void 0!==r?r:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:c}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,h,d,0,null===(m=O.A)?null:m.getOwner(),o,p,f)}function c(e){"object"==typeof e&&null!==e&&e.$$typeof===u&&e._store&&(e._store.validated=1)}var s,d=e,u=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),f=Symbol.for("react.fragment"),h=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),y=Symbol.for("react.consumer"),b=Symbol.for("react.context"),x=Symbol.for("react.forward_ref"),g=Symbol.for("react.suspense"),w=Symbol.for("react.suspense_list"),k=Symbol.for("react.memo"),j=Symbol.for("react.lazy"),C=Symbol.for("react.activity"),S=Symbol.for("react.client.reference"),O=d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,N=Object.prototype.hasOwnProperty,E=Array.isArray,R=console.createTask?console.createTask:function(){return null},T={},A=(d={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(d,a)(),P=R(o(a)),I={};m.Fragment=f,m.jsx=function(e,n,r,t,a){var i=1e4>O.recentlyCreatedOwnerStacks++;return l(e,n,r,!1,0,a,i?Error("react-stack-top-frame"):A,i?R(o(e)):P)},m.jsxs=function(e,n,r,t,a){var i=1e4>O.recentlyCreatedOwnerStacks++;return l(e,n,r,!0,0,a,i?Error("react-stack-top-frame"):A,i?R(o(e)):P)}}()),m}var v=(f||(f=1,"production"===process.env.NODE_ENV?d.exports=function(){if(s)return u;s=1;var e=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function r(n,r,t){var o=null;if(void 0!==t&&(o=""+t),void 0!==r.key&&(o=""+r.key),"key"in r)for(var a in t={},r)"key"!==a&&(t[a]=r[a]);else t=r;return r=t.ref,{$$typeof:e,type:n,key:o,ref:void 0!==r?r:null,props:t}}return u.Fragment=n,u.jsx=r,u.jsxs=r,u}():d.exports=h()),d.exports);!function(e,n){void 0===n&&(n={});var r=n.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('.rmsc {\n  --rmsc-main: #339af0;\n  --rmsc-hover: #f1f3f5;\n  --rmsc-selected: #f1f3f5;\n  --rmsc-border: #ced4da;\n  --rmsc-border-light: rgb(233, 236, 239);\n  --rmsc-gray: #adb5bd;\n  --rmsc-bg: #fff;\n  --rmsc-error: #f03e3e;\n  --rmsc-p: 10px;\n  --rmsc-radius: 4px;\n  --rmsc-h: 36px;\n  --rmsc-pill-gray: #f1f3f5;\n  --rmsc-pill-text: #495057;\n}\n\n.rmsc * {\n  box-sizing: border-box;\n  transition: all 0.2s ease;\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,\n    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";\n  font-size: small;\n}\n\n.rmsc .gray {\n  color: var(--rmsc-gray);\n}\n.rmsc .pillcontainer {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap : 6px;\n  align-items: center;\n  -webkit-box-flex-wrap: wrap;\n  padding-top: 3px;\n  padding-bottom: 3px;\n  /* margin-left: -5px; */\n  min-height: 34px;\n\n}\n.rmsc .pill {\n  background-color: var(--rmsc-pill-gray);\n  color: var(--rmsc-pill-text);\n  /* max-width: calc(100% - 20px); */\n  cursor: default;\n  border-radius: 8px;\n  font-size: 12px;\n  height: 22px;\n  /* margin: 3px 5px; */\n  padding-left: 12px;\n  /* padding-right: 0px; */\n  font-weight: 400;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  text-align: left;\n}\n.rmsc .disabledpill{\n  /* color: gray; */\n  padding-right: 12px;\n}\n.rmsc .pilltext {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rmsc .pillcrossbutton {\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin-left: 2px;\n}\n.rmsc .pillmore{\n  padding-left: 5px;\n}\n.rmsc .dropdown-content {\n  position: absolute;\n  z-index: 1;\n  top: 100%;\n  width: 100%;\n  padding-top: 4px;\n}\n\n.rmsc .dropdown-content .panel-content {\n  overflow: hidden;\n  border-radius: var(--rmsc-radius);\n  background: var(--rmsc-bg);\n  box-shadow: "(0, 0, 0, 0.05) 0px 1px 3px, rgba(0, 0, 0, 0.05) 0px 10px 15px -5px, rgba(0, 0, 0, 0.04) 0px 7px 7px -5px";\n  border: 1px solid var(--rmsc-border-light);\n}\n\n.rmsc .dropdown-container {\n  position: relative;\n  outline: 0;\n  background-color: var(--rmsc-bg);\n  border: 1px solid var(--rmsc-border);\n  border-radius: var(--rmsc-radius);\n}\n\n.rmsc .error {\n  border-color: var(--rmsc-error);\n}\n\n.rmsc .errorText {\n  color: var(--rmsc-error);\n}\n\n.rmsc .dropdown-container[aria-disabled="true"]:focus-within {\n  box-shadow: var(--rmsc-gray) 0 0 0 1px;\n  border-color: var(--rmsc-gray);\n}\n\n.rmsc .dropdown-container:focus-within {\n  /* box-shadow: var(--rmsc-main) 0 0 0 1px; */\n  border-color: var(--rmsc-main);\n}\n\n.rmsc .dropdown-heading {\n  position: relative;\n  padding: 0 var(--rmsc-p);\n  display: flex;\n  align-items: center;\n  width: 100%;\n  /* height: var(--rmsc-h); */\n  cursor: default;\n  outline: 0;\n}\n\n.rmsc .dropdown-heading .dropdown-heading-value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n}\n\n.rmsc .dropdown-heading-dropdown-arrow {\n  color: var(--rmsc-gray);\n}\n.rmsc .clear-selected-button {\n  cursor: pointer;\n  background: none;\n  border: 0;\n  padding: 0;\n  display: flex;\n}\n\n.rmsc .options {\n  max-height: 260px;\n  overflow-y: auto;\n  margin: 0;\n  padding-left: 0;\n}\n\n.rmsc .options li {\n  list-style: none;\n  margin: 0;\n}\n\n.rmsc .select-item {\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap : 8px;\n  padding: var(--rmsc-p);\n  outline-offset: -1px;\n  outline-color: var(--rmsc-primary);\n}\n\n.rmsc .select-item:hover {\n  background: var(--rmsc-hover);\n}\n\n/* .rmsc .select-item.selected {\n  background: var(--rmsc-selected);\n} */\n\n.rmsc .no-options {\n  padding: var(--rmsc-p);\n  text-align: center;\n  color: var(--rmsc-gray);\n}\n\n.rmsc .search {\n  width: 100%;\n  position: relative;\n  border-bottom: 1px solid var(--rmsc-border);\n}\n\n.rmsc .searchinput{\n  flex:1;\n  min-width: 60px;\n  background-color: transparent;\n  border: 0;\n  outline: 0;\n  font-size: 14px;\n  padding: 0;\n  color: inherit;\n  margin-left: 10px;\n  height: 0;\n  width: 0;\n}\n\n.rmsc .searchinputactive{\nheight: 22px;\nflex:1;\nmin-width: 60px;\nbackground-color: transparent;\nborder: 0;\noutline: 0;\nfont-size: 14px;\npadding: 0;\ncolor: inherit;\nmargin-left: 10px;\nwidth: 100%;\n\n}\n\n/* .rmsc .search input {\n  background: none;\n  height: var(--rmsc-h);\n  padding: 0 var(--rmsc-p);\n  width: 100%;\n  outline: 0;\n  border: 0;\n  font-size: 1em;\n}\n\n.rmsc .search input:focus {\n  background: var(--rmsc-hover);\n}\n\n.rmsc .search-clear-button {\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background: none;\n  border: 0;\n  padding: 0 calc(var(--rmsc-p) / 2);\n}\n\n.rmsc .search-clear-button [hidden] {\n  display: none;\n} */\n\n.rmsc .item-renderer {\n  display: flex;\n  align-items: center;\n  gap:8px;\n}\n\n.rmsc .item-renderer input {\n  margin: 0;\n  margin-right: 5px;\n}\n\n.rmsc .item-renderer .disabled {\n  opacity: 0.5;\n}\n.rmsc .disabled{\n  opacity: 0.5;\n}\n\n.rmsc .spinner {\n  animation: rotate 2s linear infinite;\n}\n\n.rmsc .spinner .path {\n  stroke: var(--rmsc-border);\n  stroke-width: 4px;\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\n  }\n}\n');var y={when:!0,eventTypes:["keydown"]};function b(e,a,i){var l=t((function(){return Array.isArray(e)?e:[e]}),[e]),c=Object.assign({},y,i),s=c.when,d=c.eventTypes,u=n(a),p=c.target;r((function(){u.current=a}));var f=o((function(e){l.some((function(n){return e.key===n||e.code===n}))&&u.current(e)}),[l]);r((function(){if(s&&"undefined"!=typeof window){var e=p?p.current:window;return d.forEach((function(n){e&&e.addEventListener(n,f)})),function(){d.forEach((function(n){e&&e.removeEventListener(n,f)}))}}}),[s,d,l,p,a])}var x=function(){return x=Object.assign||function(e){for(var n,r=1,t=arguments.length;r<t;r++)for(var o in n=arguments[r])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},x.apply(this,arguments)};function g(e,n,r,t){return new(r||(r=Promise))((function(o,a){function i(e){try{c(t.next(e))}catch(e){a(e)}}function l(e){try{c(t.throw(e))}catch(e){a(e)}}function c(e){var n;e.done?o(e.value):(n=e.value,n instanceof r?n:new r((function(e){e(n)}))).then(i,l)}c((t=t.apply(e,n||[])).next())}))}function w(e,n){var r,t,o,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return i.next=l(0),i.throw=l(1),i.return=l(2),"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function l(l){return function(c){return function(l){if(r)throw new TypeError("Generator is already executing.");for(;i&&(i=0,l[0]&&(a=0)),a;)try{if(r=1,t&&(o=2&l[0]?t.return:l[0]?t.throw||((o=t.return)&&o.call(t),0):t.next)&&!(o=o.call(t,l[1])).done)return o;switch(t=0,o&&(l=[2&l[0],o.value]),l[0]){case 0:case 1:o=l;break;case 4:return a.label++,{value:l[1],done:!1};case 5:a.label++,t=l[1],l=[0];continue;case 7:l=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==l[0]&&2!==l[0])){a=0;continue}if(3===l[0]&&(!o||l[1]>o[0]&&l[1]<o[3])){a.label=l[1];break}if(6===l[0]&&a.label<o[1]){a.label=o[1],o=l;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(l);break}o[2]&&a.ops.pop(),a.trys.pop();continue}l=n.call(e,a)}catch(e){l=[6,e],t=0}finally{r=o=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,c])}}}function k(e,n,r){if(r||2===arguments.length)for(var t,o=0,a=n.length;o<a;o++)!t&&o in n||(t||(t=Array.prototype.slice.call(n,0,o)),t[o]=n[o]);return e.concat(t||Array.prototype.slice.call(n))}"function"==typeof SuppressedError&&SuppressedError;var j=a({});j.displayName="MultiSelectContext";var C={allItemsAreSelected:"All items are selected.",clearSearch:"Clear Search",clearSelected:"Clear Selected",noResults:"No options",search:"Search",selectAll:"Select All",selectAllFiltered:"Select All (Filtered)",selectItems:"Pick all you want",create:"Create"},S={value:[],className:"multi-select",debounceDuration:200,options:[],labelledBy:"Select",showCheckedOnSelectedItems:!1,isLoading:!1,shouldToggleOnHover:!1,isCreatable:!0,HideClearIcon:!1,hidePickedOptions:!0,maxPillsToRender:2,disabled:!1,disableSearch:!1,defaultIsOpen:!1,closeOnChangedValue:!1,isError:!1},O=function(e){var n=e.props,t=e.children,o=x(x(x({searchText:"",filteredOptions:[],searchTextForFilter:"",focusIndex:0},S),n),{options:n.options,t:function(e){var r;return(null===(r=n.overrideStrings)||void 0===r?void 0:r[e])||C[e]}}),a=l((function(e,n){return console.log("dispatching ",n.payload,e),"dispatch"===n.type?x(x({},e),n.payload):e}),o),i=a[0],c=a[1];return r((function(){c({type:"dispatch",payload:{options:n.options,filteredOptions:n.options}})}),[n.options]),r((function(){c({type:"dispatch",payload:{value:n.value}})}),[n.value]),v.jsx(j.Provider,{value:{store:i,dispatch:c},children:t})};O.displayName="MultiSelectProvider";var N=function(){var e=i(j);if(!e)throw new Error("useMultiSelect must be used within a UserProvider");return e},E={ARROW_DOWN:"ArrowDown",ARROW_UP:"ArrowUp",ENTER:"Enter",ESCAPE:"Escape",SPACE:"Space"};var R=function(e){e.checked;var n=e.option,r=e.onClick,t=e.disabled;return v.jsx("div",{className:"item-renderer ".concat(t?"disabled":""),onClick:r,tabIndex:-1,children:v.jsx("span",{children:n.label})})},T=function(e){var n=e.color;return v.jsx("svg",{viewBox:"0 0 10 7",fill:"none",width:"10px",height:"10px",color:n,children:v.jsx("path",{d:"M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},A=function(e){var r=e.itemRenderer,t=void 0===r?R:r,o=e.option,a=e.checked,i=e.tabIndex,l=e.disabled,c=e.onSelectionChanged,s=e.onClick,d=e.showCheckedOnSelectedItems,u=void 0!==d&&d,p=n(null),f=function(){l||c(!a)};return b([E.ENTER,E.SPACE],(function(e){f(),e.preventDefault()}),{target:p}),v.jsxs("label",{className:"select-item ".concat(a?"selected":""," ").concat(l?"disabled":""),role:"option","aria-selected":a,tabIndex:i,ref:p,onClick:function(e){f(),s(e)},children:[u&&a&&v.jsx(T,{color:"gray"}),v.jsx(t,{option:o,checked:a,disabled:l})]})},P=e.memo((function(e){var n=e.options,r=e.onClick,t=e.skipIndex,o=N(),a=o.store,i=o.dispatch,l=a.disabled,c=a.value,s=a.onChange,d=a.ItemRenderer,u=a.hidePickedOptions,p=a.showCheckedOnSelectedItems;return v.jsx(v.Fragment,{children:(u?n.filter((function(e){return!c.some((function(n){return n.value===e.value}))})):n).map((function(e,n){var o=n+t;return v.jsx("li",{children:v.jsx(A,{tabIndex:o,option:e,onSelectionChanged:function(n){return r=e,t=n,void(l||(s(t?k(k([],c,!0),[r],!1):c.filter((function(e){return e.value!==r.value}))),i({type:"dispatch",payload:{searchText:""}}),i({type:"dispatch",payload:{searchTextForFilter:""}})));var r,t},checked:!!c.find((function(n){return n.value===e.value})),onClick:function(){return r(o)},itemRenderer:d,disabled:e.disabled||l,showCheckedOnSelectedItems:p})},(null==e?void 0:e.key)||n)}))})})),I=function(){var e=N(),o=e.store,a=e.dispatch,i=o.t,l=o.onChange,c=o.options,s=o.value,d=o.searchFilterFunction,u=o.disableSearch,p=o.isCreatable,f=o.onCreateOption,m=o.searchText,h=o.searchTextForFilter,y=o.focusIndex,x=o.filteredOptions,j=n(null),C=t((function(){var e=0;return u||(e+=1),e}),[u]);b([E.ARROW_DOWN,E.ARROW_UP],(function(e){switch(e.code){case E.ARROW_UP:O(-1);break;case E.ARROW_DOWN:O(1);break;default:return}e.stopPropagation(),e.preventDefault()}),{target:j});var S=function(){return g(void 0,void 0,void 0,(function(){var e;return w(this,(function(n){switch(n.label){case 0:return e={label:m,value:m,__isNew__:!0},f?[4,f(m)]:[3,2];case 1:e=n.sent(),n.label=2;case 2:return l(k(k([],s,!0),[e],!1)),a({type:"dispatch",payload:{searchText:"",searchTextForFilter:"",option:k([e],c,!0)}}),a({type:"dispatch",payload:{searchTextForFilter:""}}),[2]}}))}))},O=function(e){var n=y+e;n=Math.max(0,n),n=Math.min(n,c.length+Math.max(C-1,0)),a({type:"dispatch",payload:{focusIndex:n}})};r((function(){var e,n;null===(n=null===(e=null==j?void 0:j.current)||void 0===e?void 0:e.querySelector("[tabIndex='".concat(y,"']")))||void 0===n||n.focus()}),[y]),r((function(){g(void 0,void 0,void 0,(function(){var e;return w(this,(function(n){switch(n.label){case 0:return d?[4,d(c,h)]:[3,2];case 1:return e=n.sent(),[3,3];case 2:e=function(e,n){return n?e.filter((function(e){var r=e.label,t=e.value;return null!=r&&null!=t&&r.toLowerCase().includes(n.toLowerCase())})):e}(c,h),n.label=3;case 3:return[2,e]}}))})).then((function(e){a({type:"dispatch",payload:{filteredOptions:e}})}))}),[h,c]);var R=n(null);b([E.ENTER],S,{target:R});var T=p&&m&&!x.some((function(e){return(null==e?void 0:e.value)===m}));return v.jsx("div",{className:"select-panel",role:"listbox",ref:j,children:v.jsx("ul",{className:"options",children:x.length?v.jsx(P,{skipIndex:C,options:x,onClick:function(e){return function(e){a({type:"dispatch",payload:{focusIndex:e}})}(e)}}):T?v.jsx("li",{onClick:S,className:"select-item creatable",tabIndex:1,ref:R,children:"".concat(i("create"),' "').concat(m,'"')}):v.jsx("li",{className:"no-options",children:i("noResults")})})})},_=function(){return v.jsx("svg",{width:"14",height:"14",fill:"none",viewBox:"0 0 15 15",className:"dropdown-search-clear-icon gray",children:v.jsx("path",{d:"M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},F=function(){return v.jsx("svg",{width:"18",height:"18",viewBox:"0 0 15 15",fill:"none","data-chevron":"true",className:"dropdown-heading-dropdown-arrow",children:v.jsx("path",{d:"M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},L=function(e){var n=e.option,r=e.handlePillClose;return v.jsxs("div",{className:"rmsc pill ".concat(n.disabled?"disabledpill":""),children:[v.jsx("span",{className:"pilltext",children:n.label}),!n.disabled&&v.jsx("button",{className:"pillcrossbutton",onClick:function(){r(n)},children:v.jsx(_,{})})]})},z=e.memo((function(){var e,r=N(),t=r.store,a=r.dispatch,i=t.t,l=t.value,c=t.options,s=t.PillRenderer,d=t.disableSearch,u=t.debounceDuration,p=t.disabled,f=t.searchText,m=t.maxPillsToRender,h=void 0===m?2:m,y=t.onChange,b=n(null),x=0===(null==l?void 0:l.length),g=(null==l?void 0:l.length)===(null==c?void 0:c.length);!function(e){e[e.SEARCH=0]="SEARCH",e[e.NONE=-1]="NONE"}(e||(e={}));var w,k,j,C=o((w=function(e){return a({type:"dispatch",payload:{searchTextForFilter:e}})},k=u,function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];clearTimeout(j),j=setTimeout((function(){w.apply(null,e)}),k)}),[]),S=function(e){p||y(l.filter((function(n){return n.value!==e.value})))};return v.jsxs("div",{className:"rmsc pillcontainer",children:[v.jsx(v.Fragment,{children:g?i("allItemsAreSelected"):v.jsxs(v.Fragment,{children:[s?l.slice(0,h).map((function(e){return v.jsx(s,{selectedOption:e,handlePillClose:function(){return S(e)}})})):l.slice(0,h).map((function(e){return v.jsx(L,{option:e,handlePillClose:S})})),(null==l?void 0:l.length)-h>0&&v.jsxs("span",{className:"pillmore",children:[" ","+".concat(l.length-h," more")]})]})}),!d&&!p&&v.jsx("input",{placeholder:x?i("selectItems"):"",type:"text","aria-describedby":i("search"),onChange:function(n){C(n.target.value),a({type:"dispatch",payload:{searchText:n.target.value}}),a({type:"dispatch",payload:{focusIndex:e.SEARCH}})},onFocus:function(){a({type:"dispatch",payload:{focusIndex:e.SEARCH}})},value:f,ref:b,tabIndex:0,className:"searchinputactive"})]})})),D=function(e){var n=e.size,r=void 0===n?24:n;return v.jsx("span",{style:{width:r,marginRight:"0.2rem"},children:v.jsx("svg",{width:r,height:r,className:"spinner",viewBox:"0 0 50 50",style:{display:"inline",verticalAlign:"middle"},children:v.jsx("circle",{cx:"25",cy:"25",r:"20",fill:"none",className:"path"})})})},M=function(){var e=N(),t=e.store,o=e.dispatch,a=t.t,i=t.onMenuToggle,l=t.ArrowRenderer,s=t.shouldToggleOnHover,d=t.ClearIcon,u=t.isLoading,p=t.disabled,f=t.onChange,m=t.labelledBy,h=t.value,y=t.isOpen,x=t.defaultIsOpen,g=t.HideClearIcon,w=t.closeOnChangedValue,k=t.isError;r((function(){w&&L(!1)}),[h,w]);var j,C,S,O=c(!0),R=O[0],T=O[1],A=c(x),P=A[0],L=A[1],M=c(!1),W=M[0],U=M[1],$=l||F,B=n(null);j=function(){i&&i(P)},C=[P],S=n(!1),r((function(){if(S.current)return j();S.current=!0}),C),r((function(){void 0===x&&"boolean"==typeof y&&(T(!1),L(y))}),[y]);b([E.ENTER,E.ARROW_DOWN,E.SPACE,E.ESCAPE],(function(e){var n;["text","button"].includes(e.target.type)&&[E.SPACE,E.ENTER].includes(e.code)||(R&&(e.code===E.ESCAPE?(L(!1),null===(n=null==B?void 0:B.current)||void 0===n||n.focus()):L(!0)),e.preventDefault())}),{target:B});var H=function(e){R&&s&&L(e)};return v.jsxs("div",{tabIndex:0,className:"dropdown-container ".concat(k?"error":""),"aria-labelledby":m,"aria-expanded":P,"aria-readonly":!0,"aria-disabled":p,ref:B,onFocus:function(){return!W&&U(!0)},onBlur:function(e){!e.currentTarget.contains(e.relatedTarget)&&R&&(U(!1),L(!1))},onMouseEnter:function(){return H(!0)},onMouseLeave:function(){return H(!1)},children:[v.jsxs("div",{className:"dropdown-heading",onClick:function(){R&&L(!u&&!p&&!P)},children:[v.jsx("div",{className:"dropdown-heading-value",children:v.jsx(z,{})}),u&&v.jsx(D,{}),(null==h?void 0:h.length)>0&&null!==g?v.jsx("button",{type:"button",className:"clear-selected-button",onClick:function(e){e.stopPropagation(),f(h.filter((function(e){return e.disabled&&e.checked}))),R&&L(!1),o({type:"dispatch",payload:{searchText:""}}),o({type:"dispatch",payload:{searchTextForFilter:""}})},disabled:p,"aria-label":a("clearSelected"),children:!g&&v.jsxs(v.Fragment,{children:[" ",d||v.jsx(_,{})," "]})}):v.jsx($,{expanded:P})]}),P&&v.jsx("div",{className:"dropdown-content",children:v.jsx("div",{className:"panel-content",children:v.jsx(I,{})})})]})},W=function(e){return console.log("props ",e),v.jsx(v.Fragment,{children:v.jsx(O,{props:e,children:v.jsx("div",{className:"rmsc ".concat(e.className||"multi-select"),children:v.jsx(M,{})})})})};export{W as default};
//# sourceMappingURL=index.mjs.map