multiselect-react-dropdown
Version:
React multiselect dropdown component with search and various features
3 lines (2 loc) • 20.9 kB
JavaScript
"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,t){return(n=Object.setPrototypeOf?Object.setPrototypeOf.bind():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))}}('.multiSelectContainer,.multiSelectContainer *,.multiSelectContainer :after,.multiSelectContainer :before{box-sizing:border-box}.multiSelectContainer{position:relative;text-align:left;width:100%}.disable_ms{opacity:.5;pointer-events:none}.display-none{display:none}.searchWrapper{border:1px solid #ccc;border-radius:4px;min-height:22px;padding:5px;position:relative}.multiSelectContainer input{background:transparent;border:none;margin-top:3px}.multiSelectContainer input:focus{outline:none}.chip{align-items:center;background:#0096fb;border-radius:11px;color:#fff;display:inline-flex;font-size:13px;line-height:19px;margin-bottom:5px;margin-right:5px;padding:4px 10px}.chip,.singleChip{white-space:nowrap}.singleChip{background:none;border-radius:none;color:inherit}.singleChip i{display:none}.closeIcon{cursor:pointer;float:right;height:13px;margin-left:5px;width:13px}.optionListContainer{background:#fff;border-radius:4px;margin-top:1px;position:absolute;width:100%;z-index:2}.multiSelectContainer ul{border:1px solid #ccc;border-radius:4px;display:block;margin:0;max-height:250px;overflow-y:auto;padding:0}.multiSelectContainer li{padding:10px}.multiSelectContainer li:hover{background:#0096fb;color:#fff;cursor:pointer}.checkbox{margin-right:10px}.disableSelection{opacity:.5;pointer-events:none}.highlightOption{background:#0096fb;color:#fff}.displayBlock{display:block}.displayNone{display:none}.notFound{display:block;padding:10px}.singleSelect{padding-right:20px}li.groupHeading{color:#908e8e;padding:5px 15px;pointer-events:none}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"};function l(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 r=function(e){var t,r;function c(t){var n;return(n=e.call(this,t)||this).state={inputValue:"",options:t.options,filteredOptions:t.options,unfilteredOptions:t.options,selectedValues:Object.assign([],t.selectedValues),preSelectedValues:Object.assign([],t.selectedValues),toggleOptionsList:!1,highlightOption:t.avoidHighlightFirstOption?-1:0,showCheckbox:t.showCheckbox,keepSearchTerm:t.keepSearchTerm,groupedObject:[],closeIconType:o[t.closeIcon]||o.circle},n.optionTimeout=null,n.searchWrapper=i.createRef(),n.searchBox=i.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.onCloseOptionList=n.onCloseOptionList.bind(s(n)),n.isVisible=n.isVisible.bind(s(n)),n}r=e,(t=c).prototype=Object.create(r.prototype),t.prototype.constructor=t,n(t,r);var a=c.prototype;return a.initialSetValue=function(){var e=this.props,t=e.groupBy,i=this.state.options;e.showCheckbox||e.singleSelect||this.removeSelectedValuesFromOptions(!1),t&&this.groupByOptions(i)},a.resetSelectedValues=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()}))}))},a.getSelectedItems=function(){return this.state.selectedValues},a.getSelectedItemsCount=function(){return this.state.selectedValues.length},a.componentDidMount=function(){this.initialSetValue(),this.searchWrapper.current.addEventListener("click",this.listenerCallback)},a.componentDidUpdate=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)},a.listenerCallback=function(){this.searchBox.current.focus()},a.componentWillUnmount=function(){this.optionTimeout&&clearTimeout(this.optionTimeout),this.searchWrapper.current.removeEventListener("click",this.listenerCallback)},a.removeSelectedValuesFromOptions=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,c=o.unfilteredOptions;if(!e&&s&&this.groupByOptions(o.options),r.length||e){if(i){var a=c.filter((function(e){return-1===r.findIndex((function(t){return t[n]===e[n]}))}));return s&&this.groupByOptions(a),void this.setState({options:a,filteredOptions:a},this.filterOptionsByInput)}var p=c.filter((function(e){return-1===r.indexOf(e)}));this.setState({options:p,filteredOptions:p},this.filterOptionsByInput)}},a.groupByOptions=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})},a.onChange=function(e){var t=this.props.onSearch;this.setState({inputValue:e.target.value},this.filterOptionsByInput),t&&t(e.target.value)},a.onKeyPress=function(e){var t=this.props.onKeyPressFn;t&&t(e,e.target.value)},a.filterOptionsByInput=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})},a.matchValues=function(e,t){return this.props.caseSensitiveSearch?e.indexOf(t)>-1:e.toLowerCase?e.toLowerCase().indexOf(t.toLowerCase())>-1:e.toString().indexOf(t)>-1},a.onArrowKeyNavigation=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])}},a.onRemoveSelectedItem=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()},a.onSelectItem=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())},a.onSingleSelect=function(e){this.setState({selectedValues:[e],toggleOptionsList:!1})},a.isSelectedValue=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},a.renderOptionList=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())},a.renderGroupByOptions=function(){var e=this,t=this.props,n=t.isObject,s=void 0!==n&&n,o=t.displayValue,l=t.showCheckbox,r=t.style,c=t.singleSelect,a=this.state.groupedObject;return Object.keys(a).map((function(t){return i.createElement(i.Fragment,{key:t},i.createElement("li",{className:"groupHeading",style:r.groupHeading},t),a[t].map((function(t,n){var a=e.isSelectedValue(t);return i.createElement("li",{key:"option"+n,style:r.option,className:"groupChildEle option "+(a?"selected":"")+" "+(e.fadeOutSelection(t)?"disableSelection":"")+" "+(e.isDisablePreSelectedValues(t)?"disableSelection":""),onClick:function(){return e.onSelectItem(t)}},l&&!c&&i.createElement("input",{type:"checkbox",className:"checkbox",readOnly:!0,checked:a}),e.props.optionValueDecorator(s?t[o]:(t||"").toString(),t))})))}))},a.renderNormalOption=function(){var e=this,t=this.props,n=t.isObject,s=void 0!==n&&n,o=t.displayValue,l=t.showCheckbox,r=t.style,c=t.singleSelect,a=this.state.highlightOption;return this.state.options.map((function(t,n){var p=e.isSelectedValue(t);return i.createElement("li",{key:"option"+n,style:r.option,className:"option "+(p?"selected":"")+" "+(a===n?"highlightOption highlight":"")+" "+(e.fadeOutSelection(t)?"disableSelection":"")+" "+(e.isDisablePreSelectedValues(t)?"disableSelection":""),onClick:function(){return e.onSelectItem(t)}},l&&!c&&i.createElement("input",{type:"checkbox",readOnly:!0,className:"checkbox",checked:p}),e.props.optionValueDecorator(s?t[o]:(t||"").toString(),t))}))},a.renderSelectedList=function(){var e=this,t=this.props,n=t.isObject,s=void 0!==n&&n,o=t.displayValue,l=t.style,r=t.singleSelect,c=t.customCloseIcon,a=this.state,p=a.closeIconType;return a.selectedValues.map((function(t,n){return i.createElement("span",{className:"chip "+(r&&"singleChip")+" "+(e.isDisablePreSelectedValues(t)&&"disableSelection"),key:n,style:l.chips},e.props.selectedValueDecorator(s?t[o]:(t||"").toString(),t),!e.isDisablePreSelectedValues(t)&&(c?i.createElement("i",{className:"custom-close",onClick:function(){return e.onRemoveSelectedItem(t)}},c):i.createElement("img",{className:"icon_cancel closeIcon",src:p,onClick:function(){return e.onRemoveSelectedItem(t)}})))}))},a.isDisablePreSelectedValues=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)},a.fadeOutSelection=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)}},a.toggelOptionList=function(){this.setState({toggleOptionsList:!this.state.toggleOptionsList,highlightOption:this.props.avoidHighlightFirstOption?-1:0})},a.onCloseOptionList=function(){this.setState({toggleOptionsList:!1,highlightOption:this.props.avoidHighlightFirstOption?-1:0,inputValue:""})},a.onFocus=function(){this.state.toggleOptionsList?clearTimeout(this.optionTimeout):this.toggelOptionList()},a.onBlur=function(){this.setState({inputValue:""},this.filterOptionsByInput),this.optionTimeout=setTimeout(this.onCloseOptionList,250)},a.isVisible=function(e){return!!e&&!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},a.hideOnClickOutside=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()}))},a.renderMultiselectContainer=function(){var e=this.state,t=e.inputValue,n=e.toggleOptionsList,s=e.selectedValues,o=this.props,l=o.placeholder,r=o.style,c=o.singleSelect,a=o.id,p=o.name,u=o.hidePlaceholder,d=o.disable,h=o.showArrow,C=o.customArrow;return i.createElement("div",{className:"multiselect-container multiSelectContainer "+(d?"disable_ms":"")+" "+(o.className||""),id:a||"multiselectContainerReact",style:r.multiselectContainer},i.createElement("div",{className:"search-wrapper searchWrapper "+(c?"singleSelect":""),ref:this.searchWrapper,style:r.searchBox,onClick:c?this.toggelOptionList:function(){}},!o.hideSelectedList&&this.renderSelectedList(),i.createElement("input",{type:"text",ref:this.searchBox,className:"searchBox "+(c&&s.length?"display-none":""),id:(a||"search")+"_input",name:(p||"search_name")+"_input",onChange:this.onChange,onKeyPress:this.onKeyPress,value:t,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:c&&s.length||u&&s.length?"":l,onKeyDown:this.onArrowKeyNavigation,style:r.inputField,autoComplete:"off",disabled:c||d}),(c||h)&&i.createElement(i.Fragment,null,C?i.createElement("span",{className:"icon_down_dir"},C):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 "+(n?"displayBlock":"displayNone"),onMouseDown:function(e){e.preventDefault()}},this.renderOptionList()))},a.render=function(){return i.createElement(l,{outsideClick:this.onCloseOptionList},this.renderMultiselectContainer())},c}(i.Component);r.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:"",name:"",closeOnSelect:!0,avoidHighlightFirstOption:!1,hidePlaceholder:!1,showArrow:!1,keepSearchTerm:!1,customCloseIcon:"",className:"",customArrow:void 0,selectedValueDecorator:function(e){return e},optionValueDecorator:function(e){return e}},exports.Multiselect=r,exports.default=r;
//# sourceMappingURL=multiselect-react-dropdown.cjs.production.min.js.map