{"version":3,"sources":["jsdelivr-header.js","/npm/react-async-search-dropdown@1.1.4/node_modules/tslib/tslib.es6.js","/npm/react-async-search-dropdown@1.1.4/src/index.tsx"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;ACoKA,SAAgB,qBAAqB,EAAQ,GAEzC,OADI,OAAO,eAAkB,OAAO,eAAe,EAAQ,MAAO,CAAE,MAAO,IAAiB,EAAO,IAAM,EAClG,C,CCpKX,I,sGAAM,UAAY,OAAO,IAAG,oCAAA,qBAAA,uiDAiCtB,MAAQ,OAAO,MAAK,oCAAA,qBAAA,6pBAiBpB,aAAe,OAAO,IAAG,oCAAA,qBAAA,uUAWzB,QAAU,OAAO,IAAG,oCAAA,qBAAA,6qBAiBpB,QAAU,OAAO,IAAG,oCAAA,qBAAA,2TASpB,WAAa,OAAO,IAAG,oCAAA,qBAAA,yiBAyEhB,oBAEP,SAAC,GACL,IAAI,EACA,EACA,EAAiB,KACf,EAAA,MAAA,SAAA,IAAC,EAAA,EAAA,GAAa,EAAA,EAAA,GACpB,EAAe,kBACf,EAAa,kBAEP,IAAA,EAAA,MAAA,SAAA,IAAC,EAAA,EAAA,GAAO,EAAA,EAAA,GACR,EAAA,MAAA,UAAA,GAAC,EAAA,EAAA,GAAe,EAAA,EAAA,GAChB,EAAA,MAAA,UAAA,GAAC,EAAA,EAAA,GAAc,EAAA,EAAA,GACf,EAAA,MAAA,SAAA,EAAA,aAAC,EAAA,EAAA,GAAkB,EAAA,EAAA,GAGnB,EAAA,MAAA,SAAA,IAAC,EAAA,EAAA,GAAe,EAAA,EAAA,GAUtB,SAAA,EAAwB,GACtB,GAAgB,KAAZ,EAAE,MACA,EAAe,GACjB,GAAgB,SAAA,GAAK,OAAA,EAAI,CAAC,SAEvB,GAAgB,KAAZ,EAAE,MACP,EAAe,EAAM,OAAS,GAChC,GAAgB,SAAA,GAAK,OAAA,EAAI,CAAC,SAEvB,GAAgB,KAAZ,EAAE,MAAc,CACzB,GAAI,GAAiB,GAAgB,EAEnC,EADqB,EAAM,GACG,E,MAEX,KAAZ,EAAE,OACX,GAAgB,E,CAIpB,SAAA,EAAyB,EAAgB,GAEvC,IAAI,GAAc,EASlB,GARA,EAAc,SAAQ,SAAA,GAChB,EAAE,KAAO,EAAK,KAChB,GAAc,E,IAMd,EAAa,CACf,IAAM,EAAO,EAAc,QACrB,EAAgB,EAAK,WAAU,SAAS,GAC5C,OAAO,EAAU,KAAO,EAAK,E,IAE/B,EAAK,OAAO,EAAe,GAC3B,EAAiB,GACjB,EAAM,SAAS,E,KACV,CACL,IAAM,EAAO,EAAc,QAC3B,EAAK,KAAK,GACV,EAAiB,GAGb,EAAK,OAAS,EAChB,GAAoB,SAAA,GAAK,OAAA,EAAI,MAAQ,EAAK,KAAK,IAE/C,EAAoB,EAAK,OAG3B,EAAe,IACf,EAAM,SAAS,GACf,GAAiB,E,CAEnB,G,CA0BF,SAAA,IACE,EAAY,YAAW,WACrB,GAAgB,E,GACf,I,CAEL,OA7FA,iBAAU,WAGR,OAFA,SAAS,iBAAiB,QAAS,GAE5B,WACL,SAAS,oBAAoB,QAAS,E,KA0FxC,oBAAC,UAAS,CACR,MAAO,EAAM,MACb,IAAK,EACL,OAAQ,WAAM,OAAA,GAAe,EAC7B,QAAS,WACH,EAAY,OAAS,GACvB,GAAgB,E,GAInB,EAAM,UAAY,oBAAC,WAAU,UAC9B,oBAAC,MAAK,CACJ,KAAK,SACL,MAAO,EACP,SAAU,SAAA,GAAK,OA3CrB,SAA4B,GAC1B,EAAE,UACF,EAAe,EAAE,OAAO,OACpB,EAAY,OAAS,EACvB,GAAgB,GAEhB,GAAgB,GAIlB,EAAM,SAAS,EAAE,OAAO,OAAO,MAAK,SAAC,GACnC,EAAS,E,IAgCQ,CAAmB,EAAE,EACpC,YAAa,GAAoB,EAAM,aAAe,mBAEvD,EAAM,aACL,oBAAC,aAAY,CAAC,QAAS,WAAM,OA9BjC,EAAiB,IACjB,EAAoB,IACpB,EAAe,SACf,EAAM,SAAS,GA2BiC,QAE7C,GACC,oBAAC,QAAO,CACN,IAAK,EACL,OAAQ,WAAM,OAAA,GAAe,EAC7B,QAAS,SAAA,GACP,aAAa,E,GAGG,IAAjB,EAAM,QACL,2BACE,MAAO,CACL,QAAS,OACT,WAAY,kBACZ,SAAU,OACV,WAAY,OACZ,eAAgB,WAGjB,EAAM,iBAAmB,gBAG7B,EAAM,KAAI,SAAC,EAAQ,GAClB,IAAM,EAAW,IAAiB,EAC9B,GAAa,EAMjB,OALA,EAAc,SAAQ,SAAA,GAChB,EAAE,KAAO,EAAE,KACb,GAAa,E,IAIf,2BACE,aAAc,WACZ,EAAgB,E,EAElB,aAAc,WACZ,GAAiB,E,EAEnB,IAAK,EACL,QAAS,WACP,EAAgB,E,IAGhB,EAAM,oBACR,EAAM,YACN,EAAM,WAAW,EAAG,EAAG,EAAU,EAAY,EAAE,KAC9C,EAAM,oBACL,oBAAC,QAAO,CACN,MAAO,CACL,gBAAiB,EAAW,UAAY,OACxC,OAAQ,EAAW,UAAY,WAGjC,2BACE,MAAO,CACL,OAAQ,QACR,SAAU,OACV,MAAO,EAAa,MAAQ,OAC5B,YAAa,SACd,KAIF,EAAE,O","file":"/npm/react-async-search-dropdown@1.1.4/dist/index.js","sourceRoot":"","sourcesContent":["/**\n * Minified by jsDelivr using Terser v5.39.0.\n * Original file: /npm/react-async-search-dropdown@1.1.4/dist/index.js\n *\n * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files\n */\n","/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation. All rights reserved.\r\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\r\nthis file except in compliance with the License. You may obtain a copy of the\r\nLicense at http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nTHIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\nKIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\r\nWARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\r\nMERCHANTABLITY OR NON-INFRINGEMENT.\r\n\r\nSee the Apache Version 2.0 License for specific language governing permissions\r\nand limitations under the License.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n    extendStatics = Object.setPrototypeOf ||\r\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\r\n    return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n    extendStatics(d, b);\r\n    function __() { this.constructor = d; }\r\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n    __assign = Object.assign || function __assign(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n        }\r\n        return t;\r\n    }\r\n    return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)\r\n            t[p[i]] = s[p[i]];\r\n    return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n    return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n    if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n    return new (P || (P = Promise))(function (resolve, reject) {\r\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\r\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n    });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n    function verb(n) { return function (v) { return step([n, v]); }; }\r\n    function step(op) {\r\n        if (f) throw new TypeError(\"Generator is already executing.\");\r\n        while (_) try {\r\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n            if (y = 0, t) op = [op[0] & 2, t.value];\r\n            switch (op[0]) {\r\n                case 0: case 1: t = op; break;\r\n                case 4: _.label++; return { value: op[1], done: false };\r\n                case 5: _.label++; y = op[1]; op = [0]; continue;\r\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n                default:\r\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n                    if (t[2]) _.ops.pop();\r\n                    _.trys.pop(); continue;\r\n            }\r\n            op = body.call(thisArg, _);\r\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n    }\r\n}\r\n\r\nexport function __exportStar(m, exports) {\r\n    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];\r\n}\r\n\r\nexport function __values(o) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator], i = 0;\r\n    if (m) return m.call(o);\r\n    return {\r\n        next: function () {\r\n            if (o && i >= o.length) o = void 0;\r\n            return { value: o && o[i++], done: !o };\r\n        }\r\n    };\r\n}\r\n\r\nexport function __read(o, n) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n    if (!m) return o;\r\n    var i = m.call(o), r, ar = [], e;\r\n    try {\r\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n    }\r\n    catch (error) { e = { error: error }; }\r\n    finally {\r\n        try {\r\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n        }\r\n        finally { if (e) throw e.error; }\r\n    }\r\n    return ar;\r\n}\r\n\r\nexport function __spread() {\r\n    for (var ar = [], i = 0; i < arguments.length; i++)\r\n        ar = ar.concat(__read(arguments[i]));\r\n    return ar;\r\n}\r\n\r\nexport function __await(v) {\r\n    return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n    return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n    function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n    function fulfill(value) { resume(\"next\", value); }\r\n    function reject(value) { resume(\"throw\", value); }\r\n    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n    var i, p;\r\n    return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var m = o[Symbol.asyncIterator], i;\r\n    return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n    if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n    return cooked;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\r\n    result.default = mod;\r\n    return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n    return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n","/**\n * @class AsyncSearch\n */\n\nimport * as React from 'react';\nimport { CSSProperties, RefObject, useEffect } from 'react';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  display: flex;\n  background-color: #fff;\n  height: 31px;\n  position: relative;\n  border-radius: 3px;\n  border: 1px solid rgba(208, 211, 212, 0.7);\n  width: 160px;\n  /*Removes the default x on input field in ie11*/\n  input[type='search']::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  input[type='search']::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  /* clears the 'X' from Chrome */\n  input[type='search']::-webkit-search-decoration,\n  input[type='search']::-webkit-search-cancel-button,\n  input[type='search']::-webkit-search-results-button,\n  input[type='search']::-webkit-search-results-decoration {\n    display: none;\n  }\n  &:hover {\n    cursor: text;\n  }\n  transition: box-shadow 0.2s ease-in-out;\n`;\n\nconst Input = styled.input`\n  border: none;\n  color: #333;\n  font-family: Lato, sans-serif;\n  font-size: 14px;\n  background-color: #fff;\n  border-radius: 3px;\n  width: 75%;\n  margin-left: 0.5em;\n  -webkit-appearance: none;\n  -webkit-moz-appearance: none;\n  appearance: none;\n  font-weight: bold;\n  &:focus:enabled {\n    outline: none;\n  }\n`;\nconst RemoveButton = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: 4px;\n  margin-left: 4px;\n\n  &:hover {\n    cursor: pointer;\n  }\n`;\nconst Popover = styled.div`\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 3px;\n  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.1);\n  padding: 0.5em;\n  z-index: 3;\n  top: 38px;\n  min-width: 160px;\n  max-height: 25em;\n  width: max-content;\n  max-width: 20em;\n  overflow-y: auto;\n  background-color: #fff;\n  //transition: 1s ease-in-out;\n`;\n\nconst ListDiv = styled.div`\n  padding: 0.5em;\n  align-items: center;\n  display: flex;\n  font-size: 14px;\n  font-family: Lato, sans-serif;\n  border-bottom: 1px solid grey;\n`;\n\nconst SearchIcon = styled.div`\n  color: rgb(255, 92, 57);\n  display: flex;\n  align-items: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  font-size: 18px;\n  -webkit-transform: rotate(45deg);\n  -moz-transform: rotate(-45deg);\n  -o-transform: rotate(-45deg);\n  transform: rotate(-45deg);\n`;\n\ninterface ItemType {\n  id: number;\n  label: string;\n}\n\ninterface IAsyncSearchDropdown {\n  /***\n   * if true, a default styled list will appear and you will not be able to use the RenderItem prop\n   */\n  defaultListStyling: boolean;\n  /**\n   * boolean if you want to render a searchIcon\n   */\n  leftIcon?: boolean;\n  /**\n   * A boolean for if the user can press the x button and clear all the selected items\n   */\n  canClearAll?: boolean;\n  /**\n   * Placeholder text for the input object,\n   * Will be replaced by the label of the items you select\n   */\n  placeholder?: string;\n  /**\n   * Will be called everytime there is a change in the selection of items, and returns the new items\n   * @param items\n   */\n  onChange: (items: Array<any>) => void;\n  /**\n   * When you want the dropdown to be disabled, grey's out the box and makes it unclickable\n   */\n  disabled?: boolean;\n  /**\n   * render prop for reusibility so you can style the list of items how you want it\n   * @param items that is returned by the getItems promise\n   * @param i the index of each item\n   * @param isActive boolean for if the item is active\n   */\n  renderItem?: (\n    items: Array<any>,\n    i: number,\n    isActive: boolean,\n    isSelected: boolean,\n    img: any\n  ) => React.ReactNode;\n  /**\n   * if you want to change the size of the dropdown\n   */\n  style?: CSSProperties;\n  /***\n   * Message when there are no items to render\n   */\n  noResultMessage?: string;\n  /**\n   *  returns a promise with the  items that renders in the dropdown\n   * @param input value from input\n   */\n  getItems: (input: string) => Promise<Array<any>>;\n}\n\nexport const AsyncSearchDropdown: React.FunctionComponent<\n  IAsyncSearchDropdown\n  > = (props: IAsyncSearchDropdown) => {\n  let containerRef: RefObject<any>;\n  let popoverRef: RefObject<any>;\n  let timeOutId: any = null;\n  const [searchValue, setSearchValue] = React.useState<string>('');\n  containerRef = React.createRef();\n  popoverRef = React.createRef();\n\n  const [items, setItems] = React.useState([]);\n  const [isPopoverOpen, setPopoverState] = React.useState(false);\n  const [hoveredIndex, sethoveredIndex] = React.useState(-1);\n  const [lastSelectedItem, setLastSelectedItem] = React.useState(\n    props.placeholder\n  );\n  const [selectedItems, setSelectedItems] = React.useState<Array<ItemType>>([]);\n\n  useEffect(() => {\n    document.addEventListener('keyup', handleKeyPress);\n\n    return () => {\n      document.removeEventListener('keyup', handleKeyPress);\n    };\n  });\n\n  function handleKeyPress(e: any) {\n    if (e.which === 38) {\n      if (hoveredIndex > 0) {\n        sethoveredIndex(c => c - 1);\n      }\n    } else if (e.which === 40) {\n      if (hoveredIndex < items.length - 1) {\n        sethoveredIndex(c => c + 1);\n      }\n    } else if (e.which === 13) {\n      if (isPopoverOpen && hoveredIndex > -1) {\n        const selectedItem = items[hoveredIndex];\n        handleClickItem(selectedItem, hoveredIndex);\n      }\n    } else if (e.which === 27) {\n      setPopoverState(false);\n    }\n  }\n\n  function handleClickItem(item: ItemType, index: number) {\n    // check if item is already selected\n    let isSelected2 = false;\n    selectedItems.forEach(t => {\n      if (t.id === item.id) {\n        isSelected2 = true;\n      }\n    });\n    /* creates a shallow copy of the selected items, then it pushes the new object into\n       the copy. After that it runs the setSelectedItems hook with the copy as value\n    */\n    if (isSelected2) {\n      const temp = selectedItems.slice();\n      const indexToRemove = temp.findIndex(function(tempValue: any) {\n        return tempValue.id === item.id;\n      });\n      temp.splice(indexToRemove, 1);\n      setSelectedItems(temp);\n      props.onChange(temp);\n    } else {\n      const copy = selectedItems.slice();\n      copy.push(item);\n      setSelectedItems(copy);\n\n      // Changes the placeholder text to the items that are chosen\n      if (copy.length > 1) {\n        setLastSelectedItem(c => c + '...' + item.label);\n      } else {\n        setLastSelectedItem(item.label);\n      }\n      // Empties the input's value, dispatches an onChange event, and closes the popover\n      setSearchValue('');\n      props.onChange(copy);\n      sethoveredIndex(-1);\n    }\n    onBlurHandler();\n  }\n\n  function handleSearchChange(e: any) {\n    e.persist();\n    setSearchValue(e.target.value);\n    if (searchValue.length > 1) {\n      setPopoverState(true);\n    } else {\n      setPopoverState(false);\n    }\n\n\n    props.getItems(e.target.value).then((result: any) => {\n      setItems(result);\n    });\n\n  }\n\n  function clearAllItems() {\n    setSelectedItems([]);\n    setLastSelectedItem('');\n    setSearchValue('');\n    props.onChange([]);\n  }\n\n  function onBlurHandler() {\n    timeOutId = setTimeout(() => {\n      setPopoverState(false);\n    }, 200);\n  }\n  return (\n    <Container\n      style={props.style}\n      ref={containerRef}\n      onBlur={() => onBlurHandler()}\n      onFocus={() => {\n        if (searchValue.length > 2) {\n          setPopoverState(true);\n        }\n      }}\n    >\n      {props.leftIcon && <SearchIcon>&#9906;</SearchIcon>}\n      <Input\n        type=\"search\"\n        value={searchValue}\n        onChange={e => handleSearchChange(e)}\n        placeholder={lastSelectedItem || props.placeholder || 'Search here...'}\n      />\n      {props.canClearAll && (\n        <RemoveButton onClick={() => clearAllItems()}>&#10005;</RemoveButton>\n      )}\n      {isPopoverOpen && (\n        <Popover\n          ref={popoverRef}\n          onBlur={() => onBlurHandler()}\n          onClick={e => {\n            clearTimeout(timeOutId);\n          }}\n        >\n          {items.length === 0 && (\n            <div\n              style={{\n                display: 'flex',\n                fontFamily: 'Lato,sans-serif',\n                fontSize: '14px',\n                fontWeight: 'bold',\n                justifyContent: 'center',\n              }}\n            >\n              {props.noResultMessage || 'No result...'}\n            </div>\n          )}\n          {items.map((c: any, i) => {\n            const isActive = hoveredIndex === i;\n            let isSelected = false;\n            selectedItems.forEach(t => {\n              if (t.id === c.id) {\n                isSelected = true;\n              }\n            });\n            return (\n              <div\n                onMouseEnter={() => {\n                  sethoveredIndex(i);\n                }}\n                onMouseLeave={() => {\n                  sethoveredIndex(-1);\n                }}\n                key={i}\n                onClick={() => {\n                  handleClickItem(c, i);\n                }}\n              >\n                {!props.defaultListStyling &&\n                props.renderItem &&\n                props.renderItem(c, i, isActive, isSelected, c.img)}\n                {props.defaultListStyling && (\n                  <ListDiv\n                    style={{\n                      backgroundColor: isActive ? '#00B0B9' : '#fff',\n                      cursor: isActive ? 'pointer' : 'normal',\n                    }}\n                  >\n                    <div\n                      style={{\n                        height: '1.6em',\n                        fontSize: '18px',\n                        color: isSelected ? 'red' : 'grey',\n                        marginRight: '.5em',\n                      }}\n                    >\n                      &#10003;\n                    </div>\n                    {c.label}\n                  </ListDiv>\n                )}\n              </div>\n            );\n          })}\n        </Popover>\n      )}\n    </Container>\n  );\n};\n"]}