multiselect-react-dropdown - npm Package Compare versions

Comparing version 2.0.8 to 2.0.9

dist/multiselect-react-dropdown.cjs.development.js

@@ -125,2 +125,30 @@ 'use strict';
 };
+
+function useOutsideAlerter(ref, clickEvent) {
+  React.useEffect(function () {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        clickEvent();
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref]);
+}
+/**
+* Component that alerts if you click outside of it
+*/
+
+
+function OutsideAlerter(props) {
+  var wrapperRef = React.useRef(null);
+  useOutsideAlerter(wrapperRef, props.outsideClick);
+  return React__default.createElement("div", {
+    ref: wrapperRef
+  }, props.children);
+}
+
 var Multiselect = /*#__PURE__*/function (_React$Component) {
@@ -177,2 +205,3 @@ _inherits(Multiselect, _React$Component);
     _this.hideOnClickOutside = _this.hideOnClickOutside.bind(_assertThisInitialized(_this));
+    _this.onCloseOptionList = _this.onCloseOptionList.bind(_assertThisInitialized(_this));
     _this.isVisible = _this.isVisible.bind(_assertThisInitialized(_this));
@@ -772,2 +801,10 @@ return _this;
   }, {
+    key: "onCloseOptionList",
+    value: function onCloseOptionList() {
+      this.setState({
+        toggleOptionsList: false,
+        highlightOption: this.props.avoidHighlightFirstOption ? -1 : 0
+      });
+    }
+  }, {
     key: "onFocus",
@@ -786,3 +823,3 @@ value: function onFocus() {
       // @ts-ignore
-      this.optionTimeout = setTimeout(this.toggelOptionList, 250);
+      this.optionTimeout = setTimeout(this.onCloseOptionList, 250);
     }
@@ -861,3 +898,5 @@ }, {
     value: function render() {
-      return this.renderMultiselectContainer();
+      return React__default.createElement(OutsideAlerter, {
+        outsideClick: this.onCloseOptionList
+      }, this.renderMultiselectContainer());
     }
@@ -864,0 +903,0 @@ }]);

dist/multiselect-react-dropdown.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e;function i(e){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function n(e,t){return(n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function s(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}!function(e,t){void 0===t&&(t={});var i=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}('*,:after,:before{box-sizing:border-box}.multiSelectContainer{position:relative;text-align:left;width:100%}.disable_ms{pointer-events:none;opacity:.5}.searchWrapper{border:1px solid #ccc;border-radius:4px;padding:5px;min-height:22px;position:relative}.multiSelectContainer input{border:none;margin-top:3px;background:transparent}.multiSelectContainer input:focus{outline:none}.chip{padding:4px 10px;background:#0096fb;margin-right:5px;margin-bottom:5px;border-radius:11px;display:inline-flex;align-items:center;font-size:13px;line-height:19px;color:#fff}.chip,.singleChip{white-space:nowrap}.singleChip{background:none;border-radius:none;color:inherit}.singleChip i{display:none}.closeIcon{height:13px;width:13px;float:right;margin-left:5px;cursor:pointer}.optionListContainer{position:absolute;width:100%;background:#fff;border-radius:4px;margin-top:1px;z-index:2}.multiSelectContainer ul{display:block;padding:0;margin:0;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto}.multiSelectContainer li{padding:10px}.multiSelectContainer li:hover{background:#0096fb;color:#fff;cursor:pointer}.checkbox{margin-right:10px}.disableSelection{pointer-events:none;opacity:.5}.highlightOption{background:#0096fb;color:#fff}.displayBlock{display:block}.displayNone{display:none}.notFound{padding:10px;display:block}.singleSelect{padding-right:20px}li.groupHeading{color:#908e8e;pointer-events:none;padding:5px 15px}li.groupChildEle{padding-left:30px}.icon_down_dir{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:14px}.icon_down_dir:before{content:"\\e803"}.custom-close{display:flex}');var o={circle:"data:image/svg+xml,%3Csvg%20height%3D%22512px%22%20id%3D%22Layer_1%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%3B%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512px%22%20xml%3Aspace%3D%22preserve%22%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%20%20%20%20%20%20%20.st0%7B%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%23fff%3B%20%20%20%20%20%20%20%20%7D%20%3C%2Fstyle%3E%20%20%20%20%3Cg%3E%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M256%2C33C132.3%2C33%2C32%2C133.3%2C32%2C257c0%2C123.7%2C100.3%2C224%2C224%2C224c123.7%2C0%2C224-100.3%2C224-224C480%2C133.3%2C379.7%2C33%2C256%2C33z%20%20%20%20M364.3%2C332.5c1.5%2C1.5%2C2.3%2C3.5%2C2.3%2C5.6c0%2C2.1-0.8%2C4.2-2.3%2C5.6l-21.6%2C21.7c-1.6%2C1.6-3.6%2C2.3-5.6%2C2.3c-2%2C0-4.1-0.8-5.6-2.3L256%2C289.8%20%20%20l-75.4%2C75.7c-1.5%2C1.6-3.6%2C2.3-5.6%2C2.3c-2%2C0-4.1-0.8-5.6-2.3l-21.6-21.7c-1.5-1.5-2.3-3.5-2.3-5.6c0-2.1%2C0.8-4.2%2C2.3-5.6l75.7-76%20%20%20l-75.9-75c-3.1-3.1-3.1-8.2%2C0-11.3l21.6-21.7c1.5-1.5%2C3.5-2.3%2C5.6-2.3c2.1%2C0%2C4.1%2C0.8%2C5.6%2C2.3l75.7%2C74.7l75.7-74.7%20%20%20c1.5-1.5%2C3.5-2.3%2C5.6-2.3c2.1%2C0%2C4.1%2C0.8%2C5.6%2C2.3l21.6%2C21.7c3.1%2C3.1%2C3.1%2C8.2%2C0%2C11.3l-75.9%2C75L364.3%2C332.5z%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E",circle2:"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2096%2096%22%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%20%20%20%20%20%20%20.st0%7B%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%23fff%3B%20%20%20%20%20%20%20%20%7D%20%3C%2Fstyle%3E%20%20%20%20%3Cg%3E%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M48%2C0A48%2C48%2C0%2C1%2C0%2C96%2C48%2C48.0512%2C48.0512%2C0%2C0%2C0%2C48%2C0Zm0%2C84A36%2C36%2C0%2C1%2C1%2C84%2C48%2C36.0393%2C36.0393%2C0%2C0%2C1%2C48%2C84Z%22%2F%3E%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M64.2422%2C31.7578a5.9979%2C5.9979%2C0%2C0%2C0-8.4844%2C0L48%2C39.5156l-7.7578-7.7578a5.9994%2C5.9994%2C0%2C0%2C0-8.4844%2C8.4844L39.5156%2C48l-7.7578%2C7.7578a5.9994%2C5.9994%2C0%2C1%2C0%2C8.4844%2C8.4844L48%2C56.4844l7.7578%2C7.7578a5.9994%2C5.9994%2C0%2C0%2C0%2C8.4844-8.4844L56.4844%2C48l7.7578-7.7578A5.9979%2C5.9979%2C0%2C0%2C0%2C64.2422%2C31.7578Z%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E",close:"data:image/svg+xml,%3Csvg%20height%3D%22135.467mm%22%20style%3D%22shape-rendering%3AgeometricPrecision%3B%20text-rendering%3AgeometricPrecision%3B%20image-rendering%3AoptimizeQuality%3B%20fill-rule%3Aevenodd%3B%20clip-rule%3Aevenodd%22%20viewBox%3D%220%200%2013547%2013547%22%20width%3D%22135.467mm%22%20xml%3Aspace%3D%22preserve%22%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Cdefs%3E%20%20%20%20%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%20%20%20%20%20%20%20%20%20%20%20.fil0%20%7Bfill%3Anone%7D%20%20%20%20%20%20%20%20%20%20%20%20.fil1%20%7Bfill%3A%23fff%7D%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%20%20%20%20%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Ebene_x0020_1%22%3E%20%20%20%20%20%20%20%20%3Cpolygon%20class%3D%22fil0%22%20points%3D%220%2C0%2013547%2C0%2013547%2C13547%200%2C13547%20%22%2F%3E%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22fil1%22%20d%3D%22M714%2012832l12118%200%200%20-12117%20-12118%200%200%2012117zm4188%20-2990l1871%20-1871%201871%201871%201197%20-1197%20-1871%20-1871%201871%20-1871%20-1197%20-1197%20-1871%201871%20-1871%20-1871%20-1197%201197%201871%201871%20-1871%201871%201197%201197z%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E",cancel:"data:image/svg+xml,%3Csvg%20height%3D%22512px%22%20id%3D%22Layer_1%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%3B%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512px%22%20xml%3Aspace%3D%22preserve%22%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%20%20%20%20%20%20%20.st0%7B%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%23fff%3B%20%20%20%20%20%20%20%20%7D%20%3C%2Fstyle%3E%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M443.6%2C387.1L312.4%2C255.4l131.5-130c5.4-5.4%2C5.4-14.2%2C0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7%2C0-7.2%2C1.5-9.8%2C4%20%20L256%2C197.8L124.9%2C68.3c-2.6-2.6-6.1-4-9.8-4c-3.7%2C0-7.2%2C1.5-9.8%2C4L68%2C105.9c-5.4%2C5.4-5.4%2C14.2%2C0%2C19.6l131.5%2C130L68.4%2C387.1%20%20c-2.6%2C2.6-4.1%2C6.1-4.1%2C9.8c0%2C3.7%2C1.4%2C7.2%2C4.1%2C9.8l37.4%2C37.6c2.7%2C2.7%2C6.2%2C4.1%2C9.8%2C4.1c3.5%2C0%2C7.1-1.3%2C9.8-4.1L256%2C313.1l130.7%2C131.1%20%20c2.7%2C2.7%2C6.2%2C4.1%2C9.8%2C4.1c3.5%2C0%2C7.1-1.3%2C9.8-4.1l37.4-37.6c2.6-2.6%2C4.1-6.1%2C4.1-9.8C447.7%2C393.2%2C446.2%2C389.7%2C443.6%2C387.1z%22%2F%3E%3C%2Fsvg%3E"},l=function(e){function l(e){var n,r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,l),(n=!(r=i(l).call(this,e))||"object"!=typeof r&&"function"!=typeof r?s(this):r).state={inputValue:"",options:e.options,filteredOptions:e.options,unfilteredOptions:e.options,selectedValues:Object.assign([],e.selectedValues),preSelectedValues:Object.assign([],e.selectedValues),toggleOptionsList:!1,highlightOption:e.avoidHighlightFirstOption?-1:0,showCheckbox:e.showCheckbox,keepSearchTerm:e.keepSearchTerm,groupedObject:[],closeIconType:o[e.closeIcon]||o.circle},n.optionTimeout=null,n.searchWrapper=t.createRef(),n.searchBox=t.createRef(),n.onChange=n.onChange.bind(s(n)),n.onKeyPress=n.onKeyPress.bind(s(n)),n.onFocus=n.onFocus.bind(s(n)),n.onBlur=n.onBlur.bind(s(n)),n.renderMultiselectContainer=n.renderMultiselectContainer.bind(s(n)),n.renderSelectedList=n.renderSelectedList.bind(s(n)),n.onRemoveSelectedItem=n.onRemoveSelectedItem.bind(s(n)),n.toggelOptionList=n.toggelOptionList.bind(s(n)),n.onArrowKeyNavigation=n.onArrowKeyNavigation.bind(s(n)),n.onSelectItem=n.onSelectItem.bind(s(n)),n.filterOptionsByInput=n.filterOptionsByInput.bind(s(n)),n.removeSelectedValuesFromOptions=n.removeSelectedValuesFromOptions.bind(s(n)),n.isSelectedValue=n.isSelectedValue.bind(s(n)),n.fadeOutSelection=n.fadeOutSelection.bind(s(n)),n.isDisablePreSelectedValues=n.isDisablePreSelectedValues.bind(s(n)),n.renderGroupByOptions=n.renderGroupByOptions.bind(s(n)),n.renderNormalOption=n.renderNormalOption.bind(s(n)),n.listenerCallback=n.listenerCallback.bind(s(n)),n.resetSelectedValues=n.resetSelectedValues.bind(s(n)),n.getSelectedItems=n.getSelectedItems.bind(s(n)),n.getSelectedItemsCount=n.getSelectedItemsCount.bind(s(n)),n.hideOnClickOutside=n.hideOnClickOutside.bind(s(n)),n.isVisible=n.isVisible.bind(s(n)),n}var r;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&n(e,t)}(l,t.Component),(r=[{key:"initialSetValue",value:function(){var e=this.props,t=e.groupBy,i=this.state.options;e.showCheckbox||e.singleSelect||this.removeSelectedValuesFromOptions(!1),t&&this.groupByOptions(i)}},{key:"resetSelectedValues",value:function(){var e=this,t=this.state.unfilteredOptions;return new Promise((function(i){e.setState({selectedValues:[],preSelectedValues:[],options:t,filteredOptions:t},(function(){i(),e.initialSetValue()}))}))}},{key:"getSelectedItems",value:function(){return this.state.selectedValues}},{key:"getSelectedItemsCount",value:function(){return this.state.selectedValues.length}},{key:"componentDidMount",value:function(){this.initialSetValue(),this.searchWrapper.current.addEventListener("click",this.listenerCallback)}},{key:"componentDidUpdate",value:function(e){var t=this.props,i=t.options,n=t.selectedValues,s=e.selectedValues;JSON.stringify(e.options)!==JSON.stringify(i)&&this.setState({options:i,filteredOptions:i,unfilteredOptions:i},this.initialSetValue),JSON.stringify(s)!==JSON.stringify(n)&&this.setState({selectedValues:Object.assign([],n),preSelectedValues:Object.assign([],n)},this.initialSetValue)}},{key:"listenerCallback",value:function(){this.searchBox.current.focus()}},{key:"componentWillUnmount",value:function(){this.optionTimeout&&clearTimeout(this.optionTimeout),this.searchWrapper.current.removeEventListener("click",this.listenerCallback)}},{key:"removeSelectedValuesFromOptions",value:function(e){var t=this.props,i=t.isObject,n=t.displayValue,s=t.groupBy,o=this.state,l=o.selectedValues,r=void 0===l?[]:l,a=o.unfilteredOptions;if(!e&&s&&this.groupByOptions(o.options),r.length||e){if(i){var c=a.filter((function(e){return-1===r.findIndex((function(t){return t[n]===e[n]}))}));return s&&this.groupByOptions(c),void this.setState({options:c,filteredOptions:c},this.filterOptionsByInput)}var u=a.filter((function(e){return-1===r.indexOf(e)}));this.setState({options:u,filteredOptions:u},this.filterOptionsByInput)}}},{key:"groupByOptions",value:function(e){var t=this.props.groupBy,i=e.reduce((function(e,i){var n=i[t]||"Others";return e[n]=e[n]||[],e[n].push(i),e}),Object.create({}));this.setState({groupedObject:i})}},{key:"onChange",value:function(e){var t=this.props.onSearch;this.setState({inputValue:e.target.value},this.filterOptionsByInput),t&&t(e.target.value)}},{key:"onKeyPress",value:function(e){var t=this.props.onKeyPressFn;t&&t(e,e.target.value)}},{key:"filterOptionsByInput",value:function(){var e,t=this,i=this.state,n=i.inputValue,s=this.props,o=s.displayValue;e=i.filteredOptions.filter(s.isObject?function(e){return t.matchValues(e[o],n)}:function(e){return t.matchValues(e,n)}),this.groupByOptions(e),this.setState({options:e})}},{key:"matchValues",value:function(e,t){return this.props.caseSensitiveSearch?e.indexOf(t)>-1:e.toLowerCase?e.toLowerCase().indexOf(t.toLowerCase())>-1:e.toString().indexOf(t)>-1}},{key:"onArrowKeyNavigation",value:function(e){var t=this.state,i=t.options,n=t.highlightOption,s=t.toggleOptionsList,o=t.selectedValues;if(8!==e.keyCode||t.inputValue||this.props.disablePreSelectedValues||!o.length||this.onRemoveSelectedItem(o.length-1),i.length)if(38===e.keyCode)this.setState(n>0?function(e){return{highlightOption:e.highlightOption-1}}:{highlightOption:i.length-1});else if(40===e.keyCode)this.setState(n<i.length-1?function(e){return{highlightOption:e.highlightOption+1}}:{highlightOption:0});else if("Enter"===e.key&&i.length&&s){if(-1===n)return;this.onSelectItem(i[n])}}},{key:"onRemoveSelectedItem",value:function(e){var t,i=this,n=this.state.selectedValues,s=this.props,o=s.onRemove,l=s.showCheckbox,r=s.displayValue;t=s.isObject?n.findIndex((function(t){return t[r]===e[r]})):n.indexOf(e),n.splice(t,1),o(n,e),this.setState({selectedValues:n},(function(){l||i.removeSelectedValuesFromOptions(!0)})),this.props.closeOnSelect||this.searchBox.current.focus()}},{key:"onSelectItem",value:function(e){var t=this,i=this.state.selectedValues,n=this.props,s=n.selectionLimit,o=n.onSelect,l=n.singleSelect,r=n.showCheckbox;if(this.state.keepSearchTerm||this.setState({inputValue:""}),l)return this.onSingleSelect(e),void o([e],e);this.isSelectedValue(e)?this.onRemoveSelectedItem(e):s!=i.length&&(i.push(e),o(i,e),this.setState({selectedValues:i},(function(){r?t.filterOptionsByInput():t.removeSelectedValuesFromOptions(!0)})),this.props.closeOnSelect||this.searchBox.current.focus())}},{key:"onSingleSelect",value:function(e){this.setState({selectedValues:[e],toggleOptionsList:!1})}},{key:"isSelectedValue",value:function(e){var t=this.props,i=t.displayValue,n=this.state.selectedValues;return t.isObject?n.filter((function(t){return t[i]===e[i]})).length>0:n.filter((function(t){return t===e})).length>0}},{key:"renderOptionList",value:function(){var e=this.props,i=e.groupBy,n=e.style,s=e.emptyRecordMsg,o=e.loadingMessage,l=void 0===o?"loading...":o,r=this.state.options;return e.loading?t.createElement("ul",{className:"optionContainer",style:n.optionContainer},"string"==typeof l&&t.createElement("span",{style:n.loadingMessage,className:"notFound"},l),"string"!=typeof l&&l):t.createElement("ul",{className:"optionContainer",style:n.optionContainer},0===r.length&&t.createElement("span",{style:n.notFound,className:"notFound"},s),i?this.renderGroupByOptions():this.renderNormalOption())}},{key:"renderGroupByOptions",value:function(){var e=this,i=this.props,n=i.isObject,s=void 0!==n&&n,o=i.displayValue,l=i.showCheckbox,r=i.style,a=i.singleSelect,c=this.state.groupedObject;return Object.keys(c).map((function(i){return t.createElement(t.Fragment,{key:i},t.createElement("li",{className:"groupHeading",style:r.groupHeading},i),c[i].map((function(i,n){return t.createElement("li",{key:"option".concat(n),style:r.option,className:"\n               groupChildEle ".concat(e.fadeOutSelection(i)&&"disableSelection","\n                ").concat(e.isDisablePreSelectedValues(i)&&"disableSelection"," option\n              "),onClick:function(){return e.onSelectItem(i)}},l&&!a&&t.createElement("input",{type:"checkbox",className:"checkbox",readOnly:!0,checked:e.isSelectedValue(i)}),s?i[o]:(i||"").toString())})))}))}},{key:"renderNormalOption",value:function(){var e=this,i=this.props,n=i.isObject,s=void 0!==n&&n,o=i.displayValue,l=i.showCheckbox,r=i.style,a=i.singleSelect,c=this.state.highlightOption;return this.state.options.map((function(i,n){return t.createElement("li",{key:"option".concat(n),style:r.option,className:"\n              ".concat(c===n?"highlightOption highlight":""," \n              ").concat(e.fadeOutSelection(i)&&"disableSelection"," \n              ").concat(e.isDisablePreSelectedValues(i)&&"disableSelection"," option\n            "),onClick:function(){return e.onSelectItem(i)}},l&&!a&&t.createElement("input",{type:"checkbox",readOnly:!0,className:"checkbox",checked:e.isSelectedValue(i)}),s?i[o]:(i||"").toString())}))}},{key:"renderSelectedList",value:function(){var e=this,i=this.props,n=i.isObject,s=void 0!==n&&n,o=i.displayValue,l=i.style,r=i.singleSelect,a=i.customCloseIcon,c=this.state,u=c.closeIconType;return c.selectedValues.map((function(i,n){return t.createElement("span",{className:"chip  ".concat(r&&"singleChip"," ").concat(e.isDisablePreSelectedValues(i)&&"disableSelection"),key:n,style:l.chips},s?i[o]:(i||"").toString(),!e.isDisablePreSelectedValues(i)&&(a?t.createElement("i",{className:"custom-close",onClick:function(){return e.onRemoveSelectedItem(i)}},a):t.createElement("img",{className:"icon_cancel closeIcon",src:u,onClick:function(){return e.onRemoveSelectedItem(i)}})))}))}},{key:"isDisablePreSelectedValues",value:function(e){var t=this.props,i=t.displayValue,n=this.state.preSelectedValues;return!(!t.disablePreSelectedValues||!n.length)&&(t.isObject?n.filter((function(t){return t[i]===e[i]})).length>0:n.filter((function(t){return t===e})).length>0)}},{key:"fadeOutSelection",value:function(e){var t=this.props,i=t.selectionLimit;if(!t.singleSelect){var n=this.state.selectedValues;return-1!=i&&i==n.length&&(i==n.length?!t.showCheckbox||!this.isSelectedValue(e):void 0)}}},{key:"toggelOptionList",value:function(){this.setState({toggleOptionsList:!this.state.toggleOptionsList,highlightOption:this.props.avoidHighlightFirstOption?-1:0})}},{key:"onFocus",value:function(){this.state.toggleOptionsList?clearTimeout(this.optionTimeout):this.toggelOptionList()}},{key:"onBlur",value:function(){this.optionTimeout=setTimeout(this.toggelOptionList,250)}},{key:"isVisible",value:function(e){return!!e&&!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}},{key:"hideOnClickOutside",value:function(){var e=this,t=document.getElementsByClassName("multiselect-container")[0];document.addEventListener("click",(function(i){t&&!t.contains(i.target)&&e.isVisible(t)&&e.toggelOptionList()}))}},{key:"renderMultiselectContainer",value:function(){var e=this.state,i=e.inputValue,n=e.toggleOptionsList,s=e.selectedValues,o=this.props,l=o.placeholder,r=o.style,a=o.singleSelect,c=o.id,u=o.hidePlaceholder,p=o.disable,d=o.showArrow;return t.createElement("div",{className:"multiselect-container multiSelectContainer ".concat(p?"disable_ms":""),id:c||"multiselectContainerReact",style:r.multiselectContainer},t.createElement("div",{className:"search-wrapper searchWrapper ".concat(a?"singleSelect":""),ref:this.searchWrapper,style:r.searchBox,onClick:a?this.toggelOptionList:function(){}},this.renderSelectedList(),t.createElement("input",{type:"text",ref:this.searchBox,className:"searchBox",id:"".concat(c||"search","_input"),onChange:this.onChange,onKeyPress:this.onKeyPress,value:i,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:a&&s.length||u&&s.length?"":l,onKeyDown:this.onArrowKeyNavigation,style:r.inputField,autoComplete:"off",disabled:a||p}),(a||d)&&t.createElement("img",{src:"data:image/svg+xml,%3Csvg%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%20%20%3Cg%20id%3D%22background%22%3E%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22none%22%20height%3D%2232%22%20width%3D%2232%22%2F%3E%20%20%20%20%3C%2Fg%3E%20%20%20%20%3Cg%20id%3D%22arrow_x5F_down%22%3E%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%222.002%2C10%2016.001%2C24%2030.002%2C10%20%20%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E",className:"icon_cancel icon_down_dir"})),t.createElement("div",{className:"optionListContainer ".concat(n?"displayBlock":"displayNone"),onMouseDown:function(e){e.preventDefault()}},this.renderOptionList()))}},{key:"render",value:function(){return this.renderMultiselectContainer()}}])&&function(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}(l.prototype,r),l}();l.defaultProps={options:[],disablePreSelectedValues:!1,selectedValues:[],isObject:!0,displayValue:"model",showCheckbox:!1,selectionLimit:-1,placeholder:"Select",groupBy:"",style:{},emptyRecordMsg:"No Options Available",onSelect:function(){},onRemove:function(){},onKeyPressFn:function(){},closeIcon:"circle2",singleSelect:!1,caseSensitiveSearch:!1,id:"",closeOnSelect:!0,avoidHighlightFirstOption:!1,hidePlaceholder:!1,showArrow:!1,keepSearchTerm:!1,customCloseIcon:""},exports.Multiselect=l,exports.default=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),i=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function n(e){return(n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function s(e,t){return(s=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function o(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}!function(e,t){void 0===t&&(t={});var i=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}('*,:after,:before{box-sizing:border-box}.multiSelectContainer{position:relative;text-align:left;width:100%}.disable_ms{pointer-events:none;opacity:.5}.searchWrapper{border:1px solid #ccc;border-radius:4px;padding:5px;min-height:22px;position:relative}.multiSelectContainer input{border:none;margin-top:3px;background:transparent}.multiSelectContainer input:focus{outline:none}.chip{padding:4px 10px;background:#0096fb;margin-right:5px;margin-bottom:5px;border-radius:11px;display:inline-flex;align-items:center;font-size:13px;line-height:19px;color:#fff}.chip,.singleChip{white-space:nowrap}.singleChip{background:none;border-radius:none;color:inherit}.singleChip i{display:none}.closeIcon{height:13px;width:13px;float:right;margin-left:5px;cursor:pointer}.optionListContainer{position:absolute;width:100%;background:#fff;border-radius:4px;margin-top:1px;z-index:2}.multiSelectContainer ul{display:block;padding:0;margin:0;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto}.multiSelectContainer li{padding:10px}.multiSelectContainer li:hover{background:#0096fb;color:#fff;cursor:pointer}.checkbox{margin-right:10px}.disableSelection{pointer-events:none;opacity:.5}.highlightOption{background:#0096fb;color:#fff}.displayBlock{display:block}.displayNone{display:none}.notFound{padding:10px;display:block}.singleSelect{padding-right:20px}li.groupHeading{color:#908e8e;pointer-events:none;padding:5px 15px}li.groupChildEle{padding-left:30px}.icon_down_dir{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:14px}.icon_down_dir:before{content:"\\e803"}.custom-close{display:flex}');var l={circle:"data:image/svg+xml,%3Csvg%20height%3D%22512px%22%20id%3D%22Layer_1%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%3B%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512px%22%20xml%3Aspace%3D%22preserve%22%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%20%20%20%20%20%20%20.st0%7B%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%23fff%3B%20%20%20%20%20%20%20%20%7D%20%3C%2Fstyle%3E%20%20%20%20%3Cg%3E%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M256%2C33C132.3%2C33%2C32%2C133.3%2C32%2C257c0%2C123.7%2C100.3%2C224%2C224%2C224c123.7%2C0%2C224-100.3%2C224-224C480%2C133.3%2C379.7%2C33%2C256%2C33z%20%20%20%20M364.3%2C332.5c1.5%2C1.5%2C2.3%2C3.5%2C2.3%2C5.6c0%2C2.1-0.8%2C4.2-2.3%2C5.6l-21.6%2C21.7c-1.6%2C1.6-3.6%2C2.3-5.6%2C2.3c-2%2C0-4.1-0.8-5.6-2.3L256%2C289.8%20%20%20l-75.4%2C75.7c-1.5%2C1.6-3.6%2C2.3-5.6%2C2.3c-2%2C0-4.1-0.8-5.6-2.3l-21.6-21.7c-1.5-1.5-2.3-3.5-2.3-5.6c0-2.1%2C0.8-4.2%2C2.3-5.6l75.7-76%20%20%20l-75.9-75c-3.1-3.1-3.1-8.2%2C0-11.3l21.6-21.7c1.5-1.5%2C3.5-2.3%2C5.6-2.3c2.1%2C0%2C4.1%2C0.8%2C5.6%2C2.3l75.7%2C74.7l75.7-74.7%20%20%20c1.5-1.5%2C3.5-2.3%2C5.6-2.3c2.1%2C0%2C4.1%2C0.8%2C5.6%2C2.3l21.6%2C21.7c3.1%2C3.1%2C3.1%2C8.2%2C0%2C11.3l-75.9%2C75L364.3%2C332.5z%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E",circle2:"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2096%2096%22%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%20%20%20%20%20%20%20.st0%7B%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%23fff%3B%20%20%20%20%20%20%20%20%7D%20%3C%2Fstyle%3E%20%20%20%20%3Cg%3E%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M48%2C0A48%2C48%2C0%2C1%2C0%2C96%2C48%2C48.0512%2C48.0512%2C0%2C0%2C0%2C48%2C0Zm0%2C84A36%2C36%2C0%2C1%2C1%2C84%2C48%2C36.0393%2C36.0393%2C0%2C0%2C1%2C48%2C84Z%22%2F%3E%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M64.2422%2C31.7578a5.9979%2C5.9979%2C0%2C0%2C0-8.4844%2C0L48%2C39.5156l-7.7578-7.7578a5.9994%2C5.9994%2C0%2C0%2C0-8.4844%2C8.4844L39.5156%2C48l-7.7578%2C7.7578a5.9994%2C5.9994%2C0%2C1%2C0%2C8.4844%2C8.4844L48%2C56.4844l7.7578%2C7.7578a5.9994%2C5.9994%2C0%2C0%2C0%2C8.4844-8.4844L56.4844%2C48l7.7578-7.7578A5.9979%2C5.9979%2C0%2C0%2C0%2C64.2422%2C31.7578Z%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E",close:"data:image/svg+xml,%3Csvg%20height%3D%22135.467mm%22%20style%3D%22shape-rendering%3AgeometricPrecision%3B%20text-rendering%3AgeometricPrecision%3B%20image-rendering%3AoptimizeQuality%3B%20fill-rule%3Aevenodd%3B%20clip-rule%3Aevenodd%22%20viewBox%3D%220%200%2013547%2013547%22%20width%3D%22135.467mm%22%20xml%3Aspace%3D%22preserve%22%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Cdefs%3E%20%20%20%20%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%20%20%20%20%20%20%20%20%20%20%20.fil0%20%7Bfill%3Anone%7D%20%20%20%20%20%20%20%20%20%20%20%20.fil1%20%7Bfill%3A%23fff%7D%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%20%20%20%20%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Ebene_x0020_1%22%3E%20%20%20%20%20%20%20%20%3Cpolygon%20class%3D%22fil0%22%20points%3D%220%2C0%2013547%2C0%2013547%2C13547%200%2C13547%20%22%2F%3E%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22fil1%22%20d%3D%22M714%2012832l12118%200%200%20-12117%20-12118%200%200%2012117zm4188%20-2990l1871%20-1871%201871%201871%201197%20-1197%20-1871%20-1871%201871%20-1871%20-1197%20-1197%20-1871%201871%20-1871%20-1871%20-1197%201197%201871%201871%20-1871%201871%201197%201197z%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E",cancel:"data:image/svg+xml,%3Csvg%20height%3D%22512px%22%20id%3D%22Layer_1%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%3B%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512px%22%20xml%3Aspace%3D%22preserve%22%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%20%20%20%20%20%20%20.st0%7B%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%23fff%3B%20%20%20%20%20%20%20%20%7D%20%3C%2Fstyle%3E%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M443.6%2C387.1L312.4%2C255.4l131.5-130c5.4-5.4%2C5.4-14.2%2C0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7%2C0-7.2%2C1.5-9.8%2C4%20%20L256%2C197.8L124.9%2C68.3c-2.6-2.6-6.1-4-9.8-4c-3.7%2C0-7.2%2C1.5-9.8%2C4L68%2C105.9c-5.4%2C5.4-5.4%2C14.2%2C0%2C19.6l131.5%2C130L68.4%2C387.1%20%20c-2.6%2C2.6-4.1%2C6.1-4.1%2C9.8c0%2C3.7%2C1.4%2C7.2%2C4.1%2C9.8l37.4%2C37.6c2.7%2C2.7%2C6.2%2C4.1%2C9.8%2C4.1c3.5%2C0%2C7.1-1.3%2C9.8-4.1L256%2C313.1l130.7%2C131.1%20%20c2.7%2C2.7%2C6.2%2C4.1%2C9.8%2C4.1c3.5%2C0%2C7.1-1.3%2C9.8-4.1l37.4-37.6c2.6-2.6%2C4.1-6.1%2C4.1-9.8C447.7%2C393.2%2C446.2%2C389.7%2C443.6%2C387.1z%22%2F%3E%3C%2Fsvg%3E"};function r(e){var n,s,o=t.useRef(null);return s=e.outsideClick,t.useEffect((function(){function e(e){n.current&&!n.current.contains(e.target)&&s()}return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[n=o]),i.createElement("div",{ref:o},e.children)}var a=function(e){function t(e){var s,r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(s=!(r=n(t).call(this,e))||"object"!=typeof r&&"function"!=typeof r?o(this):r).state={inputValue:"",options:e.options,filteredOptions:e.options,unfilteredOptions:e.options,selectedValues:Object.assign([],e.selectedValues),preSelectedValues:Object.assign([],e.selectedValues),toggleOptionsList:!1,highlightOption:e.avoidHighlightFirstOption?-1:0,showCheckbox:e.showCheckbox,keepSearchTerm:e.keepSearchTerm,groupedObject:[],closeIconType:l[e.closeIcon]||l.circle},s.optionTimeout=null,s.searchWrapper=i.createRef(),s.searchBox=i.createRef(),s.onChange=s.onChange.bind(o(s)),s.onKeyPress=s.onKeyPress.bind(o(s)),s.onFocus=s.onFocus.bind(o(s)),s.onBlur=s.onBlur.bind(o(s)),s.renderMultiselectContainer=s.renderMultiselectContainer.bind(o(s)),s.renderSelectedList=s.renderSelectedList.bind(o(s)),s.onRemoveSelectedItem=s.onRemoveSelectedItem.bind(o(s)),s.toggelOptionList=s.toggelOptionList.bind(o(s)),s.onArrowKeyNavigation=s.onArrowKeyNavigation.bind(o(s)),s.onSelectItem=s.onSelectItem.bind(o(s)),s.filterOptionsByInput=s.filterOptionsByInput.bind(o(s)),s.removeSelectedValuesFromOptions=s.removeSelectedValuesFromOptions.bind(o(s)),s.isSelectedValue=s.isSelectedValue.bind(o(s)),s.fadeOutSelection=s.fadeOutSelection.bind(o(s)),s.isDisablePreSelectedValues=s.isDisablePreSelectedValues.bind(o(s)),s.renderGroupByOptions=s.renderGroupByOptions.bind(o(s)),s.renderNormalOption=s.renderNormalOption.bind(o(s)),s.listenerCallback=s.listenerCallback.bind(o(s)),s.resetSelectedValues=s.resetSelectedValues.bind(o(s)),s.getSelectedItems=s.getSelectedItems.bind(o(s)),s.getSelectedItemsCount=s.getSelectedItemsCount.bind(o(s)),s.hideOnClickOutside=s.hideOnClickOutside.bind(o(s)),s.onCloseOptionList=s.onCloseOptionList.bind(o(s)),s.isVisible=s.isVisible.bind(o(s)),s}var a;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&s(e,t)}(t,i.Component),(a=[{key:"initialSetValue",value:function(){var e=this.props,t=e.groupBy,i=this.state.options;e.showCheckbox||e.singleSelect||this.removeSelectedValuesFromOptions(!1),t&&this.groupByOptions(i)}},{key:"resetSelectedValues",value:function(){var e=this,t=this.state.unfilteredOptions;return new Promise((function(i){e.setState({selectedValues:[],preSelectedValues:[],options:t,filteredOptions:t},(function(){i(),e.initialSetValue()}))}))}},{key:"getSelectedItems",value:function(){return this.state.selectedValues}},{key:"getSelectedItemsCount",value:function(){return this.state.selectedValues.length}},{key:"componentDidMount",value:function(){this.initialSetValue(),this.searchWrapper.current.addEventListener("click",this.listenerCallback)}},{key:"componentDidUpdate",value:function(e){var t=this.props,i=t.options,n=t.selectedValues,s=e.selectedValues;JSON.stringify(e.options)!==JSON.stringify(i)&&this.setState({options:i,filteredOptions:i,unfilteredOptions:i},this.initialSetValue),JSON.stringify(s)!==JSON.stringify(n)&&this.setState({selectedValues:Object.assign([],n),preSelectedValues:Object.assign([],n)},this.initialSetValue)}},{key:"listenerCallback",value:function(){this.searchBox.current.focus()}},{key:"componentWillUnmount",value:function(){this.optionTimeout&&clearTimeout(this.optionTimeout),this.searchWrapper.current.removeEventListener("click",this.listenerCallback)}},{key:"removeSelectedValuesFromOptions",value:function(e){var t=this.props,i=t.isObject,n=t.displayValue,s=t.groupBy,o=this.state,l=o.selectedValues,r=void 0===l?[]:l,a=o.unfilteredOptions;if(!e&&s&&this.groupByOptions(o.options),r.length||e){if(i){var c=a.filter((function(e){return-1===r.findIndex((function(t){return t[n]===e[n]}))}));return s&&this.groupByOptions(c),void this.setState({options:c,filteredOptions:c},this.filterOptionsByInput)}var u=a.filter((function(e){return-1===r.indexOf(e)}));this.setState({options:u,filteredOptions:u},this.filterOptionsByInput)}}},{key:"groupByOptions",value:function(e){var t=this.props.groupBy,i=e.reduce((function(e,i){var n=i[t]||"Others";return e[n]=e[n]||[],e[n].push(i),e}),Object.create({}));this.setState({groupedObject:i})}},{key:"onChange",value:function(e){var t=this.props.onSearch;this.setState({inputValue:e.target.value},this.filterOptionsByInput),t&&t(e.target.value)}},{key:"onKeyPress",value:function(e){var t=this.props.onKeyPressFn;t&&t(e,e.target.value)}},{key:"filterOptionsByInput",value:function(){var e,t=this,i=this.state,n=i.inputValue,s=this.props,o=s.displayValue;e=i.filteredOptions.filter(s.isObject?function(e){return t.matchValues(e[o],n)}:function(e){return t.matchValues(e,n)}),this.groupByOptions(e),this.setState({options:e})}},{key:"matchValues",value:function(e,t){return this.props.caseSensitiveSearch?e.indexOf(t)>-1:e.toLowerCase?e.toLowerCase().indexOf(t.toLowerCase())>-1:e.toString().indexOf(t)>-1}},{key:"onArrowKeyNavigation",value:function(e){var t=this.state,i=t.options,n=t.highlightOption,s=t.toggleOptionsList,o=t.selectedValues;if(8!==e.keyCode||t.inputValue||this.props.disablePreSelectedValues||!o.length||this.onRemoveSelectedItem(o.length-1),i.length)if(38===e.keyCode)this.setState(n>0?function(e){return{highlightOption:e.highlightOption-1}}:{highlightOption:i.length-1});else if(40===e.keyCode)this.setState(n<i.length-1?function(e){return{highlightOption:e.highlightOption+1}}:{highlightOption:0});else if("Enter"===e.key&&i.length&&s){if(-1===n)return;this.onSelectItem(i[n])}}},{key:"onRemoveSelectedItem",value:function(e){var t,i=this,n=this.state.selectedValues,s=this.props,o=s.onRemove,l=s.showCheckbox,r=s.displayValue;t=s.isObject?n.findIndex((function(t){return t[r]===e[r]})):n.indexOf(e),n.splice(t,1),o(n,e),this.setState({selectedValues:n},(function(){l||i.removeSelectedValuesFromOptions(!0)})),this.props.closeOnSelect||this.searchBox.current.focus()}},{key:"onSelectItem",value:function(e){var t=this,i=this.state.selectedValues,n=this.props,s=n.selectionLimit,o=n.onSelect,l=n.singleSelect,r=n.showCheckbox;if(this.state.keepSearchTerm||this.setState({inputValue:""}),l)return this.onSingleSelect(e),void o([e],e);this.isSelectedValue(e)?this.onRemoveSelectedItem(e):s!=i.length&&(i.push(e),o(i,e),this.setState({selectedValues:i},(function(){r?t.filterOptionsByInput():t.removeSelectedValuesFromOptions(!0)})),this.props.closeOnSelect||this.searchBox.current.focus())}},{key:"onSingleSelect",value:function(e){this.setState({selectedValues:[e],toggleOptionsList:!1})}},{key:"isSelectedValue",value:function(e){var t=this.props,i=t.displayValue,n=this.state.selectedValues;return t.isObject?n.filter((function(t){return t[i]===e[i]})).length>0:n.filter((function(t){return t===e})).length>0}},{key:"renderOptionList",value:function(){var e=this.props,t=e.groupBy,n=e.style,s=e.emptyRecordMsg,o=e.loadingMessage,l=void 0===o?"loading...":o,r=this.state.options;return e.loading?i.createElement("ul",{className:"optionContainer",style:n.optionContainer},"string"==typeof l&&i.createElement("span",{style:n.loadingMessage,className:"notFound"},l),"string"!=typeof l&&l):i.createElement("ul",{className:"optionContainer",style:n.optionContainer},0===r.length&&i.createElement("span",{style:n.notFound,className:"notFound"},s),t?this.renderGroupByOptions():this.renderNormalOption())}},{key:"renderGroupByOptions",value:function(){var e=this,t=this.props,n=t.isObject,s=void 0!==n&&n,o=t.displayValue,l=t.showCheckbox,r=t.style,a=t.singleSelect,c=this.state.groupedObject;return Object.keys(c).map((function(t){return i.createElement(i.Fragment,{key:t},i.createElement("li",{className:"groupHeading",style:r.groupHeading},t),c[t].map((function(t,n){return i.createElement("li",{key:"option".concat(n),style:r.option,className:"\n               groupChildEle ".concat(e.fadeOutSelection(t)&&"disableSelection","\n                ").concat(e.isDisablePreSelectedValues(t)&&"disableSelection"," option\n              "),onClick:function(){return e.onSelectItem(t)}},l&&!a&&i.createElement("input",{type:"checkbox",className:"checkbox",readOnly:!0,checked:e.isSelectedValue(t)}),s?t[o]:(t||"").toString())})))}))}},{key:"renderNormalOption",value:function(){var e=this,t=this.props,n=t.isObject,s=void 0!==n&&n,o=t.displayValue,l=t.showCheckbox,r=t.style,a=t.singleSelect,c=this.state.highlightOption;return this.state.options.map((function(t,n){return i.createElement("li",{key:"option".concat(n),style:r.option,className:"\n              ".concat(c===n?"highlightOption highlight":""," \n              ").concat(e.fadeOutSelection(t)&&"disableSelection"," \n              ").concat(e.isDisablePreSelectedValues(t)&&"disableSelection"," option\n            "),onClick:function(){return e.onSelectItem(t)}},l&&!a&&i.createElement("input",{type:"checkbox",readOnly:!0,className:"checkbox",checked:e.isSelectedValue(t)}),s?t[o]:(t||"").toString())}))}},{key:"renderSelectedList",value:function(){var e=this,t=this.props,n=t.isObject,s=void 0!==n&&n,o=t.displayValue,l=t.style,r=t.singleSelect,a=t.customCloseIcon,c=this.state,u=c.closeIconType;return c.selectedValues.map((function(t,n){return i.createElement("span",{className:"chip  ".concat(r&&"singleChip"," ").concat(e.isDisablePreSelectedValues(t)&&"disableSelection"),key:n,style:l.chips},s?t[o]:(t||"").toString(),!e.isDisablePreSelectedValues(t)&&(a?i.createElement("i",{className:"custom-close",onClick:function(){return e.onRemoveSelectedItem(t)}},a):i.createElement("img",{className:"icon_cancel closeIcon",src:u,onClick:function(){return e.onRemoveSelectedItem(t)}})))}))}},{key:"isDisablePreSelectedValues",value:function(e){var t=this.props,i=t.displayValue,n=this.state.preSelectedValues;return!(!t.disablePreSelectedValues||!n.length)&&(t.isObject?n.filter((function(t){return t[i]===e[i]})).length>0:n.filter((function(t){return t===e})).length>0)}},{key:"fadeOutSelection",value:function(e){var t=this.props,i=t.selectionLimit;if(!t.singleSelect){var n=this.state.selectedValues;return-1!=i&&i==n.length&&(i==n.length?!t.showCheckbox||!this.isSelectedValue(e):void 0)}}},{key:"toggelOptionList",value:function(){this.setState({toggleOptionsList:!this.state.toggleOptionsList,highlightOption:this.props.avoidHighlightFirstOption?-1:0})}},{key:"onCloseOptionList",value:function(){this.setState({toggleOptionsList:!1,highlightOption:this.props.avoidHighlightFirstOption?-1:0})}},{key:"onFocus",value:function(){this.state.toggleOptionsList?clearTimeout(this.optionTimeout):this.toggelOptionList()}},{key:"onBlur",value:function(){this.optionTimeout=setTimeout(this.onCloseOptionList,250)}},{key:"isVisible",value:function(e){return!!e&&!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}},{key:"hideOnClickOutside",value:function(){var e=this,t=document.getElementsByClassName("multiselect-container")[0];document.addEventListener("click",(function(i){t&&!t.contains(i.target)&&e.isVisible(t)&&e.toggelOptionList()}))}},{key:"renderMultiselectContainer",value:function(){var e=this.state,t=e.inputValue,n=e.toggleOptionsList,s=e.selectedValues,o=this.props,l=o.placeholder,r=o.style,a=o.singleSelect,c=o.id,u=o.hidePlaceholder,p=o.disable,d=o.showArrow;return i.createElement("div",{className:"multiselect-container multiSelectContainer ".concat(p?"disable_ms":""),id:c||"multiselectContainerReact",style:r.multiselectContainer},i.createElement("div",{className:"search-wrapper searchWrapper ".concat(a?"singleSelect":""),ref:this.searchWrapper,style:r.searchBox,onClick:a?this.toggelOptionList:function(){}},this.renderSelectedList(),i.createElement("input",{type:"text",ref:this.searchBox,className:"searchBox",id:"".concat(c||"search","_input"),onChange:this.onChange,onKeyPress:this.onKeyPress,value:t,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:a&&s.length||u&&s.length?"":l,onKeyDown:this.onArrowKeyNavigation,style:r.inputField,autoComplete:"off",disabled:a||p}),(a||d)&&i.createElement("img",{src:"data:image/svg+xml,%3Csvg%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%20%20%3Cg%20id%3D%22background%22%3E%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22none%22%20height%3D%2232%22%20width%3D%2232%22%2F%3E%20%20%20%20%3C%2Fg%3E%20%20%20%20%3Cg%20id%3D%22arrow_x5F_down%22%3E%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%222.002%2C10%2016.001%2C24%2030.002%2C10%20%20%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E",className:"icon_cancel icon_down_dir"})),i.createElement("div",{className:"optionListContainer ".concat(n?"displayBlock":"displayNone"),onMouseDown:function(e){e.preventDefault()}},this.renderOptionList()))}},{key:"render",value:function(){return i.createElement(r,{outsideClick:this.onCloseOptionList},this.renderMultiselectContainer())}}])&&function(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}(t.prototype,a),t}();a.defaultProps={options:[],disablePreSelectedValues:!1,selectedValues:[],isObject:!0,displayValue:"model",showCheckbox:!1,selectionLimit:-1,placeholder:"Select",groupBy:"",style:{},emptyRecordMsg:"No Options Available",onSelect:function(){},onRemove:function(){},onKeyPressFn:function(){},closeIcon:"circle2",singleSelect:!1,caseSensitiveSearch:!1,id:"",closeOnSelect:!0,avoidHighlightFirstOption:!1,hidePlaceholder:!1,showArrow:!1,keepSearchTerm:!1,customCloseIcon:""},exports.Multiselect=a,exports.default=a;
 //# sourceMappingURL=multiselect-react-dropdown.cjs.production.min.js.map

dist/multiselect-react-dropdown.esm.js

@@ -1,2 +0,2 @@
-import React__default from 'react';
+import React__default, { useRef, useEffect } from 'react';
 
@@ -118,2 +118,30 @@ function _classCallCheck(instance, Constructor) {
 };
+
+function useOutsideAlerter(ref, clickEvent) {
+  useEffect(function () {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        clickEvent();
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref]);
+}
+/**
+* Component that alerts if you click outside of it
+*/
+
+
+function OutsideAlerter(props) {
+  var wrapperRef = useRef(null);
+  useOutsideAlerter(wrapperRef, props.outsideClick);
+  return React__default.createElement("div", {
+    ref: wrapperRef
+  }, props.children);
+}
+
 var Multiselect = /*#__PURE__*/function (_React$Component) {
@@ -170,2 +198,3 @@ _inherits(Multiselect, _React$Component);
     _this.hideOnClickOutside = _this.hideOnClickOutside.bind(_assertThisInitialized(_this));
+    _this.onCloseOptionList = _this.onCloseOptionList.bind(_assertThisInitialized(_this));
     _this.isVisible = _this.isVisible.bind(_assertThisInitialized(_this));
@@ -765,2 +794,10 @@ return _this;
   }, {
+    key: "onCloseOptionList",
+    value: function onCloseOptionList() {
+      this.setState({
+        toggleOptionsList: false,
+        highlightOption: this.props.avoidHighlightFirstOption ? -1 : 0
+      });
+    }
+  }, {
     key: "onFocus",
@@ -779,3 +816,3 @@ value: function onFocus() {
       // @ts-ignore
-      this.optionTimeout = setTimeout(this.toggelOptionList, 250);
+      this.optionTimeout = setTimeout(this.onCloseOptionList, 250);
     }
@@ -854,3 +891,5 @@ }, {
     value: function render() {
-      return this.renderMultiselectContainer();
+      return React__default.createElement(OutsideAlerter, {
+        outsideClick: this.onCloseOptionList
+      }, this.renderMultiselectContainer());
     }
@@ -857,0 +896,0 @@ }]);

dist/multiselect/multiselect.component.d.ts

@@ -57,2 +57,3 @@ import React from "react";
     toggelOptionList(): void;
+    onCloseOptionList(): void;
     onFocus(): void;
@@ -59,0 +60,0 @@ onBlur(): void;

package.json

 {
   "name": "multiselect-react-dropdown",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "React multiselect dropdown component with search and various features",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

231813

increased by3.84%

Lines of code

1894

increased by3.89%

Number of low supply chain risk alerts

13

decreased by-7.14%

No dependency changes