react-multiselect-dropdown-configurable
Version:
fully configurable react multi select component
12 lines (11 loc) • 26.3 kB
JavaScript
;var e,n=require("react"),r={exports:{}},t={};var o,a,i={};
/**
* @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 l(){return o||(o=1,"production"!==process.env.NODE_ENV&&function(){function e(n){if(null==n)return null;if("function"==typeof n)return n.$$typeof===S?null:n.displayName||n.name||null;if("string"==typeof n)return n;switch(n){case m:return"Fragment";case v:return"Profiler";case h:return"StrictMode";case g:return"Suspense";case w:return"SuspenseList";case j:return"Activity"}if("object"==typeof n)switch("number"==typeof n.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),n.$$typeof){case f:return"Portal";case b:return(n.displayName||"Context")+".Provider";case y:return(n._context.displayName||"Context")+".Consumer";case x:var r=n.render;return(n=n.displayName)||(n=""!==(n=r.displayName||r.name||"")?"ForwardRef("+n+")":"ForwardRef"),n;case k:return null!==(r=n.displayName||null)?r:e(n.type)||"Memo";case C:r=n._payload,n=n._init;try{return e(n(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(n){if(n===m)return"<>";if("object"==typeof n&&null!==n&&n.$$typeof===C)return"<...>";try{var r=e(n);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function l(){var n=e(this.type);return T[n]||(T[n]=!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!==(n=this.props.ref)?n:null}function c(n,r,o,a,i,c,u,f){var m,h=r.children;if(void 0!==h)if(a)if(R(h)){for(a=0;a<h.length;a++)s(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 s(h);if(O.call(r,"key")){h=e(n);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(O.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(){d||(d=!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 n?n.displayName||n.name||"Unknown":n),function(e,n,r,t,o,a,i,c){return r=a.ref,e={$$typeof:p,type:e,key:n,props:a,_owner:o},null!==(void 0!==r?r:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:l}):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:i}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:c}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(n,h,c,0,null===(m=E.A)?null:m.getOwner(),o,u,f)}function s(e){"object"==typeof e&&null!==e&&e.$$typeof===p&&e._store&&(e._store.validated=1)}var d,u=n,p=Symbol.for("react.transitional.element"),f=Symbol.for("react.portal"),m=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"),C=Symbol.for("react.lazy"),j=Symbol.for("react.activity"),S=Symbol.for("react.client.reference"),E=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,R=Array.isArray,N=console.createTask?console.createTask:function(){return null},T={},A=(u={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(u,a)(),P=N(o(a)),I={};i.Fragment=m,i.jsx=function(e,n,r,t,a){var i=1e4>E.recentlyCreatedOwnerStacks++;return c(e,n,r,!1,0,a,i?Error("react-stack-top-frame"):A,i?N(o(e)):P)},i.jsxs=function(e,n,r,t,a){var i=1e4>E.recentlyCreatedOwnerStacks++;return c(e,n,r,!0,0,a,i?Error("react-stack-top-frame"):A,i?N(o(e)):P)}}()),i}var c=(a||(a=1,"production"===process.env.NODE_ENV?r.exports=function(){if(e)return t;e=1;var n=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function o(e,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:n,type:e,key:o,ref:void 0!==r?r:null,props:t}}return t.Fragment=r,t.jsx=o,t.jsxs=o,t}():r.exports=l()),r.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 s={when:!0,eventTypes:["keydown"]};function d(e,r,t){var o=n.useMemo((function(){return Array.isArray(e)?e:[e]}),[e]),a=Object.assign({},s,t),i=a.when,l=a.eventTypes,c=n.useRef(r),d=a.target;n.useEffect((function(){c.current=r}));var u=n.useCallback((function(e){o.some((function(n){return e.key===n||e.code===n}))&&c.current(e)}),[o]);n.useEffect((function(){if(i&&"undefined"!=typeof window){var e=d?d.current:window;return l.forEach((function(n){e&&e.addEventListener(n,u)})),function(){l.forEach((function(n){e&&e.removeEventListener(n,u)}))}}}),[i,l,o,d,r])}var u=function(){return u=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},u.apply(this,arguments)};function p(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 f(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 m(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 h=n.createContext({});h.displayName="MultiSelectContext";var v={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"},y={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},b=function(e){var r=e.props,t=e.children,o=u(u(u({searchText:"",filteredOptions:[],searchTextForFilter:"",focusIndex:0},y),r),{options:r.options,t:function(e){var n;return(null===(n=r.overrideStrings)||void 0===n?void 0:n[e])||v[e]}}),a=n.useReducer((function(e,n){return console.log("dispatching ",n.payload,e),"dispatch"===n.type?u(u({},e),n.payload):e}),o),i=a[0],l=a[1];return n.useEffect((function(){l({type:"dispatch",payload:{options:r.options,filteredOptions:r.options}})}),[r.options]),n.useEffect((function(){l({type:"dispatch",payload:{value:r.value}})}),[r.value]),c.jsx(h.Provider,{value:{store:i,dispatch:l},children:t})};b.displayName="MultiSelectProvider";var x=function(){var e=n.useContext(h);if(!e)throw new Error("useMultiSelect must be used within a UserProvider");return e},g={ARROW_DOWN:"ArrowDown",ARROW_UP:"ArrowUp",ENTER:"Enter",ESCAPE:"Escape",SPACE:"Space"};var w=function(e){e.checked;var n=e.option,r=e.onClick,t=e.disabled;return c.jsx("div",{className:"item-renderer ".concat(t?"disabled":""),onClick:r,tabIndex:-1,children:c.jsx("span",{children:n.label})})},k=function(e){var n=e.color;return c.jsx("svg",{viewBox:"0 0 10 7",fill:"none",width:"10px",height:"10px",color:n,children:c.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"})})},C=function(e){var r=e.itemRenderer,t=void 0===r?w:r,o=e.option,a=e.checked,i=e.tabIndex,l=e.disabled,s=e.onSelectionChanged,u=e.onClick,p=e.showCheckedOnSelectedItems,f=void 0!==p&&p,m=n.useRef(null),h=function(){l||s(!a)};return d([g.ENTER,g.SPACE],(function(e){h(),e.preventDefault()}),{target:m}),c.jsxs("label",{className:"select-item ".concat(a?"selected":""," ").concat(l?"disabled":""),role:"option","aria-selected":a,tabIndex:i,ref:m,onClick:function(e){h(),u(e)},children:[f&&a&&c.jsx(k,{color:"gray"}),c.jsx(t,{option:o,checked:a,disabled:l})]})},j=n.memo((function(e){var n=e.options,r=e.onClick,t=e.skipIndex,o=x(),a=o.store,i=o.dispatch,l=a.disabled,s=a.value,d=a.onChange,u=a.ItemRenderer,p=a.hidePickedOptions,f=a.showCheckedOnSelectedItems;return c.jsx(c.Fragment,{children:(p?n.filter((function(e){return!s.some((function(n){return n.value===e.value}))})):n).map((function(e,n){var o=n+t;return c.jsx("li",{children:c.jsx(C,{tabIndex:o,option:e,onSelectionChanged:function(n){return r=e,t=n,void(l||(d(t?m(m([],s,!0),[r],!1):s.filter((function(e){return e.value!==r.value}))),i({type:"dispatch",payload:{searchText:""}}),i({type:"dispatch",payload:{searchTextForFilter:""}})));var r,t},checked:!!s.find((function(n){return n.value===e.value})),onClick:function(){return r(o)},itemRenderer:u,disabled:e.disabled||l,showCheckedOnSelectedItems:f})},(null==e?void 0:e.key)||n)}))})})),S=function(){var e=x(),r=e.store,t=e.dispatch,o=r.t,a=r.onChange,i=r.options,l=r.value,s=r.searchFilterFunction,u=r.disableSearch,h=r.isCreatable,v=r.onCreateOption,y=r.searchText,b=r.searchTextForFilter,w=r.focusIndex,k=r.filteredOptions,C=n.useRef(null),S=n.useMemo((function(){var e=0;return u||(e+=1),e}),[u]);d([g.ARROW_DOWN,g.ARROW_UP],(function(e){switch(e.code){case g.ARROW_UP:O(-1);break;case g.ARROW_DOWN:O(1);break;default:return}e.stopPropagation(),e.preventDefault()}),{target:C});var E=function(){return p(void 0,void 0,void 0,(function(){var e;return f(this,(function(n){switch(n.label){case 0:return e={label:y,value:y,__isNew__:!0},v?[4,v(y)]:[3,2];case 1:e=n.sent(),n.label=2;case 2:return a(m(m([],l,!0),[e],!1)),t({type:"dispatch",payload:{searchText:"",searchTextForFilter:"",option:m([e],i,!0)}}),t({type:"dispatch",payload:{searchTextForFilter:""}}),[2]}}))}))},O=function(e){var n=w+e;n=Math.max(0,n),n=Math.min(n,i.length+Math.max(S-1,0)),t({type:"dispatch",payload:{focusIndex:n}})};n.useEffect((function(){var e,n;null===(n=null===(e=null==C?void 0:C.current)||void 0===e?void 0:e.querySelector("[tabIndex='".concat(w,"']")))||void 0===n||n.focus()}),[w]),n.useEffect((function(){p(void 0,void 0,void 0,(function(){var e;return f(this,(function(n){switch(n.label){case 0:return s?[4,s(i,b)]:[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}(i,b),n.label=3;case 3:return[2,e]}}))})).then((function(e){t({type:"dispatch",payload:{filteredOptions:e}})}))}),[b,i]);var R=n.useRef(null);d([g.ENTER],E,{target:R});var N=h&&y&&!k.some((function(e){return(null==e?void 0:e.value)===y}));return c.jsx("div",{className:"select-panel",role:"listbox",ref:C,children:c.jsx("ul",{className:"options",children:k.length?c.jsx(j,{skipIndex:S,options:k,onClick:function(e){return function(e){t({type:"dispatch",payload:{focusIndex:e}})}(e)}}):N?c.jsx("li",{onClick:E,className:"select-item creatable",tabIndex:1,ref:R,children:"".concat(o("create"),' "').concat(y,'"')}):c.jsx("li",{className:"no-options",children:o("noResults")})})})},E=function(){return c.jsx("svg",{width:"14",height:"14",fill:"none",viewBox:"0 0 15 15",className:"dropdown-search-clear-icon gray",children:c.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"})})},O=function(){return c.jsx("svg",{width:"18",height:"18",viewBox:"0 0 15 15",fill:"none","data-chevron":"true",className:"dropdown-heading-dropdown-arrow",children:c.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"})})},R=function(e){var n=e.option,r=e.handlePillClose;return c.jsxs("div",{className:"rmsc pill ".concat(n.disabled?"disabledpill":""),children:[c.jsx("span",{className:"pilltext",children:n.label}),!n.disabled&&c.jsx("button",{className:"pillcrossbutton",onClick:function(){r(n)},children:c.jsx(E,{})})]})},N=n.memo((function(){var e,r=x(),t=r.store,o=r.dispatch,a=t.t,i=t.value,l=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,v=t.onChange,y=n.useRef(null),b=0===(null==i?void 0:i.length),g=(null==i?void 0:i.length)===(null==l?void 0:l.length);!function(e){e[e.SEARCH=0]="SEARCH",e[e.NONE=-1]="NONE"}(e||(e={}));var w,k,C,j=n.useCallback((w=function(e){return o({type:"dispatch",payload:{searchTextForFilter:e}})},k=u,function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];clearTimeout(C),C=setTimeout((function(){w.apply(null,e)}),k)}),[]),S=function(e){p||v(i.filter((function(n){return n.value!==e.value})))};return c.jsxs("div",{className:"rmsc pillcontainer",children:[c.jsx(c.Fragment,{children:g?a("allItemsAreSelected"):c.jsxs(c.Fragment,{children:[s?i.slice(0,h).map((function(e){return c.jsx(s,{selectedOption:e,handlePillClose:function(){return S(e)}})})):i.slice(0,h).map((function(e){return c.jsx(R,{option:e,handlePillClose:S})})),(null==i?void 0:i.length)-h>0&&c.jsxs("span",{className:"pillmore",children:[" ","+".concat(i.length-h," more")]})]})}),!d&&!p&&c.jsx("input",{placeholder:b?a("selectItems"):"",type:"text","aria-describedby":a("search"),onChange:function(n){j(n.target.value),o({type:"dispatch",payload:{searchText:n.target.value}}),o({type:"dispatch",payload:{focusIndex:e.SEARCH}})},onFocus:function(){o({type:"dispatch",payload:{focusIndex:e.SEARCH}})},value:f,ref:y,tabIndex:0,className:"searchinputactive"})]})})),T=function(e){var n=e.size,r=void 0===n?24:n;return c.jsx("span",{style:{width:r,marginRight:"0.2rem"},children:c.jsx("svg",{width:r,height:r,className:"spinner",viewBox:"0 0 50 50",style:{display:"inline",verticalAlign:"middle"},children:c.jsx("circle",{cx:"25",cy:"25",r:"20",fill:"none",className:"path"})})})},A=function(){var e=x(),r=e.store,t=e.dispatch,o=r.t,a=r.onMenuToggle,i=r.ArrowRenderer,l=r.shouldToggleOnHover,s=r.ClearIcon,u=r.isLoading,p=r.disabled,f=r.onChange,m=r.labelledBy,h=r.value,v=r.isOpen,y=r.defaultIsOpen,b=r.HideClearIcon,w=r.closeOnChangedValue,k=r.isError;n.useEffect((function(){w&&L(!1)}),[h,w]);var C,j,R,A=n.useState(!0),P=A[0],I=A[1],_=n.useState(y),F=_[0],L=_[1],M=n.useState(!1),z=M[0],D=M[1],W=i||O,U=n.useRef(null);C=function(){a&&a(F)},j=[F],R=n.useRef(!1),n.useEffect((function(){if(R.current)return C();R.current=!0}),j),n.useEffect((function(){void 0===y&&"boolean"==typeof v&&(I(!1),L(v))}),[v]);d([g.ENTER,g.ARROW_DOWN,g.SPACE,g.ESCAPE],(function(e){var n;["text","button"].includes(e.target.type)&&[g.SPACE,g.ENTER].includes(e.code)||(P&&(e.code===g.ESCAPE?(L(!1),null===(n=null==U?void 0:U.current)||void 0===n||n.focus()):L(!0)),e.preventDefault())}),{target:U});var $=function(e){P&&l&&L(e)};return c.jsxs("div",{tabIndex:0,className:"dropdown-container ".concat(k?"error":""),"aria-labelledby":m,"aria-expanded":F,"aria-readonly":!0,"aria-disabled":p,ref:U,onFocus:function(){return!z&&D(!0)},onBlur:function(e){!e.currentTarget.contains(e.relatedTarget)&&P&&(D(!1),L(!1))},onMouseEnter:function(){return $(!0)},onMouseLeave:function(){return $(!1)},children:[c.jsxs("div",{className:"dropdown-heading",onClick:function(){P&&L(!u&&!p&&!F)},children:[c.jsx("div",{className:"dropdown-heading-value",children:c.jsx(N,{})}),u&&c.jsx(T,{}),(null==h?void 0:h.length)>0&&null!==b?c.jsx("button",{type:"button",className:"clear-selected-button",onClick:function(e){e.stopPropagation(),f(h.filter((function(e){return e.disabled&&e.checked}))),P&&L(!1),t({type:"dispatch",payload:{searchText:""}}),t({type:"dispatch",payload:{searchTextForFilter:""}})},disabled:p,"aria-label":o("clearSelected"),children:!b&&c.jsxs(c.Fragment,{children:[" ",s||c.jsx(E,{})," "]})}):c.jsx(W,{expanded:F})]}),F&&c.jsx("div",{className:"dropdown-content",children:c.jsx("div",{className:"panel-content",children:c.jsx(S,{})})})]})};module.exports=function(e){return console.log("props ",e),c.jsx(c.Fragment,{children:c.jsx(b,{props:e,children:c.jsx("div",{className:"rmsc ".concat(e.className||"multi-select"),children:c.jsx(A,{})})})})};
//# sourceMappingURL=index.js.map