@rio-cloud/rio-uikit 0.16.4-beta.1 → 0.16.4-beta.2

package/lib/es/components/selects/Multiselect.js

@@ -1,507 +1,326 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Multiselect = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _reactOnclickoutside = _interopRequireDefault(require("react-onclickoutside"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _isEqual = _interopRequireDefault(require("lodash/fp/isEqual"));
-var _logDeprecatedWarnings = _interopRequireDefault(require("../../utils/logDeprecatedWarnings"));
-var _BaseDropdownMenu = require("./BaseDropdownMenu");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var warningProps = [{
-  prop: 'autoDropDirection'
-}];
-var Multiselect = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(Multiselect, _Component);
-  var _super = _createSuper(Multiselect);
-  function Multiselect(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, Multiselect);
-    _this = _super.call(this, props);
-    _this.state = {
-      isOpen: false,
-      selectedItems: props.value || [],
-      isFilterActive: false,
-      filterValue: '',
-      filteredOptions: props.options,
-      itemDOMValues: [],
-      keyboardUsed: false
-    };
-
-    // necessary for using the uikit as submodule
-    _this.onToggle = _this.onToggle.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleClickOutside = _this.handleClickOutside.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleFilterChange = _this.handleFilterChange.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.onOptionChange = _this.onOptionChange.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.updateDOMValues = _this.updateDOMValues.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.closeMenu = _this.closeMenu.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.onOpenMenu = _this.onOpenMenu.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleToggleKeyDown = _this.handleToggleKeyDown.bind((0, _assertThisInitialized2["default"])(_this));
-    return _this;
-  }
-  (0, _createClass2["default"])(Multiselect, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      this.updateSelectedItems(this.props.options, this.props.value);
-    }
-
-    // eslint-disable-next-line camelcase
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      this.updateSelectedItems(nextProps.options, nextProps.value);
-      if (!(0, _isEqual["default"])(nextProps.options, this.props.options)) {
-        this.setState({
-          filteredOptions: nextProps.options,
-          requestItemDOMValues: true
-        });
-      }
-    }
-  }, {
-    key: "updateSelectedItems",
-    value: function updateSelectedItems(options, value) {
-      if (value) {
-        this.setState(function () {
-          return {
-            selectedItems: value
-          };
-        });
-      } else if (options) {
-        this.setState(function () {
-          return {
-            selectedItems: options.filter(function (item) {
-              return item.selected ? item.id : false;
-            }).map(function (option) {
-              return option.id;
-            })
-          };
-        });
-      }
-    }
-  }, {
-    key: "updateDOMValues",
-    value: function updateDOMValues(itemDOMValues) {
-      this.setState(function () {
-        return {
-          itemDOMValues: itemDOMValues,
-          requestItemDOMValues: false
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Multiselect = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const react_onclickoutside_1 = tslib_1.__importDefault(require("react-onclickoutside"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
+const logDeprecatedWarnings_1 = tslib_1.__importDefault(require("../../utils/logDeprecatedWarnings"));
+const BaseDropdownMenu_1 = require("./BaseDropdownMenu");
+const warningProps = [
+    {
+        prop: 'autoDropDirection',
+    },
+];
+class Multiselect extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isOpen: false,
+            selectedItems: props.value || [],
+            isFilterActive: false,
+            filterValue: '',
+            filteredOptions: props.options,
+            itemDOMValues: [],
+            keyboardUsed: false,
         };
-      });
+        // necessary for using the uikit as submodule
+        this.onToggle = this.onToggle.bind(this);
+        this.handleClickOutside = this.handleClickOutside.bind(this);
+        this.handleFilterChange = this.handleFilterChange.bind(this);
+        this.onOptionChange = this.onOptionChange.bind(this);
+        this.updateDOMValues = this.updateDOMValues.bind(this);
+        this.closeMenu = this.closeMenu.bind(this);
+        this.onOpenMenu = this.onOpenMenu.bind(this);
+        this.handleToggleKeyDown = this.handleToggleKeyDown.bind(this);
+    }
+    UNSAFE_componentWillMount() {
+        this.updateSelectedItems(this.props.options, this.props.value);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        className = _this$props.className,
-        hasError = _this$props.hasError;
-      var dropup = this.isAutoDropActive() ? this.state.dropup : this.props.dropup;
-      var wrapperClasses = (0, _classnames["default"])('select', 'multiselect', dropup && 'dropup', 'dropdown', hasError && 'has-error', this.state.isOpen && 'open', className && className);
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: wrapperClasses,
-        ref: function ref(multiselectWrapper) {
-          return _this2.multiselectWrapper = multiselectWrapper;
+    // eslint-disable-next-line camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        this.updateSelectedItems(nextProps.options, nextProps.value);
+        if (!(0, isEqual_1.default)(nextProps.options, this.props.options)) {
+            this.setState({
+                filteredOptions: nextProps.options,
+                requestItemDOMValues: true,
+            });
         }
-      }, this.renderToggle(), this.renderDropdownMenu());
     }
-  }, {
-    key: "buildSelectionRepresentation",
-    value: function buildSelectionRepresentation(options) {
-      var _this3 = this;
-      var _this$props2 = this.props,
-        showSelectedItemIcon = _this$props2.showSelectedItemIcon,
-        showUnselectedItemIcons = _this$props2.showUnselectedItemIcons;
-      if (!options || !options.length) {
-        return '';
-      }
-      var selectionTags = options.filter(function (option) {
-        return showUnselectedItemIcons ? !option.header : _this3.isItemSelected(option);
-      }).map(function (option, index) {
-        return _this3.renderSelectionItem(option, index);
-      });
-      var optionListClassNames = (0, _classnames["default"])(!showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list');
-      return /*#__PURE__*/_react["default"].createElement("span", {
-        className: optionListClassNames
-      }, selectionTags);
+    updateSelectedItems(options, value) {
+        if (value) {
+            this.setState(() => ({
+                selectedItems: value,
+            }));
+        }
+        else if (options) {
+            this.setState(() => ({
+                selectedItems: options
+                    .filter(item => {
+                    return item.selected ? item.id : false;
+                })
+                    .map(option => option.id),
+            }));
+        }
     }
-  }, {
-    key: "renderCounterMessage",
-    value: function renderCounterMessage(selectedItems, counterMessage, _renderCounterMessage) {
-      if (_renderCounterMessage) {
-        return _renderCounterMessage(selectedItems.length);
-      } else if (counterMessage) {
-        var message = selectedItems.length === 1 ? counterMessage.one : counterMessage.many;
-        return /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "option-counter margin-right-1"
-        }, selectedItems.length), /*#__PURE__*/_react["default"].createElement("span", {
-          className: "counter-message margin-left-1"
-        }, message));
-      }
+    updateDOMValues(itemDOMValues) {
+        this.setState(() => ({
+            itemDOMValues,
+            requestItemDOMValues: false,
+        }));
     }
-  }, {
-    key: "isItemSelected",
-    value: function isItemSelected(item) {
-      return this.state.selectedItems.indexOf(item.id) !== -1;
+    render() {
+        const { className, hasError } = this.props;
+        const dropup = this.isAutoDropActive() ? this.state.dropup : this.props.dropup;
+        const wrapperClasses = (0, classnames_1.default)('select', 'multiselect', dropup && 'dropup', 'dropdown', hasError && 'has-error', this.state.isOpen && 'open', className && className);
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: wrapperClasses, ref: multiselectWrapper => (this.multiselectWrapper = multiselectWrapper) }, { children: [this.renderToggle(), this.renderDropdownMenu()] })));
     }
-  }, {
-    key: "renderSelectionItem",
-    value: function renderSelectionItem(item, index) {
-      var _this4 = this;
-      if (this.props.showSelectedItemIcon) {
-        var inactiveClassNames = (0, _classnames["default"])('margin-right-5', !this.isItemSelected(item) && 'inactiveIcon');
-        return /*#__PURE__*/_react["default"].createElement("span", {
-          key: item.id,
-          className: inactiveClassNames
-        }, item.icon);
-      }
-      return /*#__PURE__*/_react["default"].createElement("span", {
-        key: index,
-        className: "selected-option"
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "selected-label"
-      }, item.icon && /*#__PURE__*/_react["default"].createElement("span", {
-        className: "margin-right-5"
-      }, item.icon), item.label), /*#__PURE__*/_react["default"].createElement("span", {
-        className: "removeIcon",
-        onClick: function onClick(event) {
-          _this4.removeSelectedItem(event, item.id);
+    buildSelectionRepresentation(options) {
+        const { showSelectedItemIcon, showUnselectedItemIcons } = this.props;
+        if (!options || !options.length) {
+            return '';
         }
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "rioglyph rioglyph-remove"
-      })));
+        const selectionTags = options
+            .filter(option => (showUnselectedItemIcons ? !option.header : this.isItemSelected(option)))
+            .map((option, index) => this.renderSelectionItem(option, index));
+        const optionListClassNames = (0, classnames_1.default)(!showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list');
+        return (0, jsx_runtime_1.jsx)("span", Object.assign({ className: optionListClassNames }, { children: selectionTags }));
     }
-  }, {
-    key: "renderSelection",
-    value: function renderSelection() {
-      var _this$props3 = this.props,
-        options = _this$props3.options,
-        counterMessage = _this$props3.counterMessage,
-        renderCounterMessage = _this$props3.renderCounterMessage;
-      var selectedItems = this.state.selectedItems;
-      return counterMessage || renderCounterMessage ? this.renderCounterMessage(selectedItems, counterMessage, renderCounterMessage) : this.buildSelectionRepresentation(options);
+    renderCounterMessage(selectedItems, counterMessage, renderCounterMessage) {
+        if (renderCounterMessage) {
+            return renderCounterMessage(selectedItems.length);
+        }
+        else if (counterMessage) {
+            const message = selectedItems.length === 1 ? counterMessage.one : counterMessage.many;
+            return ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'option-counter margin-right-1' }, { children: selectedItems.length })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'counter-message margin-left-1' }, { children: message }))] }));
+        }
     }
-  }, {
-    key: "renderPlaceholder",
-    value: function renderPlaceholder(placeholder) {
-      return placeholder ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: "placeholder"
-      }, placeholder) : /*#__PURE__*/_react["default"].createElement("span", null);
+    isItemSelected(item) {
+        return this.state.selectedItems.indexOf(item.id) !== -1;
     }
-  }, {
-    key: "renderToggle",
-    value: function renderToggle() {
-      var _this5 = this;
-      var _this$state = this.state,
-        isOpen = _this$state.isOpen,
-        selectedItems = _this$state.selectedItems;
-      var _this$props4 = this.props,
-        name = _this$props4.name,
-        _this$props4$id = _this$props4.id,
-        id = _this$props4$id === void 0 ? name : _this$props4$id,
-        tabIndex = _this$props4.tabIndex,
-        disabled = _this$props4.disabled,
-        useFilter = _this$props4.useFilter,
-        bsSize = _this$props4.bsSize,
-        placeholder = _this$props4.placeholder,
-        counterMessage = _this$props4.counterMessage,
-        renderCounterMessage = _this$props4.renderCounterMessage;
-      (0, _logDeprecatedWarnings["default"])(warningProps, this.props, 'Multiselect');
-      var wrapperClassNames = (0, _classnames["default"])('dropdown-toggle', 'form-control', 'text-left', bsSize === 'large' && 'input-lg',
-      // TODO: deprecate since it's not consistent
-      bsSize === 'small' && 'input-sm',
-      // TODO: deprecate since it's not consistent
-      bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
-      var showPlaceholder = !selectedItems.length && !this.props.showUnselectedItemIcons;
-
-      // Note: due to issues with nested events in Firefox (for toggle and inside the remove)
-      // the toggle element must not be a <button> but a div.
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        type: "button",
-        id: id,
-        name: name,
-        className: wrapperClassNames,
-        "data-toggle": "dropdown",
-        tabIndex: tabIndex,
-        "aria-haspopup": "true",
-        "aria-expanded": isOpen,
-        onClick: this.onToggle,
-        onKeyDown: this.handleToggleKeyDown,
-        ref: function ref(node) {
-          return _this5.refToggle = node;
+    renderSelectionItem(item, index) {
+        if (this.props.showSelectedItemIcon) {
+            const inactiveClassNames = (0, classnames_1.default)('margin-right-5', !this.isItemSelected(item) && 'inactiveIcon');
+            return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: inactiveClassNames }, { children: item.icon }), item.id));
         }
-      }, showPlaceholder ? this.renderPlaceholder(placeholder) : this.renderSelection(), useFilter && isOpen && !counterMessage && !renderCounterMessage && this.renderFilterInput(), /*#__PURE__*/_react["default"].createElement("span", {
-        className: "caret"
-      }));
+        return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'selected-option' }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'selected-label' }, { children: [item.icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: item.icon })), item.label] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'removeIcon', onClick: event => {
+                        this.removeSelectedItem(event, item.id);
+                    } }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) }))] }), index));
     }
-  }, {
-    key: "renderDropdownMenu",
-    value: function renderDropdownMenu() {
-      var _this6 = this;
-      var _this$props5 = this.props,
-        pullRight = _this$props5.pullRight,
-        noItemMessage = _this$props5.noItemMessage;
-      var options = this.state.filteredOptions.map(function (option) {
-        option.selected = _this6.state.selectedItems.indexOf(option.id) !== -1;
-        return option;
-      });
-      return /*#__PURE__*/_react["default"].createElement(_BaseDropdownMenu.BaseDropdownMenu, {
-        isOpen: this.state.isOpen,
-        options: options,
-        keyboardUsed: this.state.keyboardUsed,
-        updateDOMValues: this.updateDOMValues,
-        onOpen: this.onOpenMenu,
-        onSelect: this.onOptionChange,
-        onClose: this.closeMenu,
-        noItemMessage: noItemMessage,
-        pullRight: pullRight,
-        useActiveClass: true
-      });
+    renderSelection() {
+        const { options, counterMessage, renderCounterMessage } = this.props;
+        const { selectedItems } = this.state;
+        return counterMessage || renderCounterMessage
+            ? this.renderCounterMessage(selectedItems, counterMessage, renderCounterMessage)
+            : this.buildSelectionRepresentation(options);
     }
-  }, {
-    key: "renderFilterInput",
-    value: function renderFilterInput() {
-      var inputClasses = (0, _classnames["default"])('multiselect-filter-input', !this.state.selectedItems.length && 'multiselect-filter-input-placeholder', (this.state.isFilterActive || this.state.filterValue) && 'multiselect-filter-input-active');
-      return /*#__PURE__*/_react["default"].createElement("input", {
-        type: "text",
-        className: inputClasses,
-        autoFocus: true,
-        onChange: this.handleFilterChange,
-        defaultValue: this.state.filterValue
-      });
+    renderPlaceholder(placeholder) {
+        return placeholder ? (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'placeholder' }, { children: placeholder })) : (0, jsx_runtime_1.jsx)("span", {});
     }
-  }, {
-    key: "filterOptions",
-    value: function filterOptions(itemDOMValues, filterValue, options) {
-      var filteredDOMValues = itemDOMValues.filter(function (item) {
-        return item.text.toLowerCase().includes(filterValue.toLowerCase());
-      });
-
-      // Filter the options accodring to the filtered DOM values and map the IDs since the filter cannot be done
-      // on the options itself as they might contain arbitrary components
-      return options.filter(function (option) {
-        return filteredDOMValues.find(function (value) {
-          return value.id === option.id;
+    renderToggle() {
+        const { isOpen, selectedItems } = this.state;
+        const { name, id = name, tabIndex, disabled, useFilter, bsSize, placeholder, counterMessage, renderCounterMessage, } = this.props;
+        (0, logDeprecatedWarnings_1.default)(warningProps, this.props, 'Multiselect');
+        const wrapperClassNames = (0, classnames_1.default)('dropdown-toggle', 'form-control', 'text-left', bsSize === 'large' && 'input-lg', // TODO: deprecate since it's not consistent
+        bsSize === 'small' && 'input-sm', // TODO: deprecate since it's not consistent
+        bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
+        const showPlaceholder = !selectedItems.length && !this.props.showUnselectedItemIcons;
+        // Note: due to issues with nested events in Firefox (for toggle and inside the remove)
+        // the toggle element must not be a <button> but a div.
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ type: 'button', id: id, name: name, className: wrapperClassNames, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: this.onToggle, onKeyDown: this.handleToggleKeyDown, ref: node => (this.refToggle = node) }, { children: [showPlaceholder ? this.renderPlaceholder(placeholder) : this.renderSelection(), useFilter && isOpen && !counterMessage && !renderCounterMessage && this.renderFilterInput(), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] })));
+    }
+    renderDropdownMenu() {
+        const { pullRight, noItemMessage } = this.props;
+        const options = this.state.filteredOptions.map(option => {
+            option.selected = this.state.selectedItems.indexOf(option.id) !== -1;
+            return option;
         });
-      });
+        return ((0, jsx_runtime_1.jsx)(BaseDropdownMenu_1.BaseDropdownMenu, { isOpen: this.state.isOpen, options: options, keyboardUsed: this.state.keyboardUsed, updateDOMValues: this.updateDOMValues, onOpen: this.onOpenMenu, onSelect: this.onOptionChange, onClose: this.closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, useActiveClass: true }));
     }
-  }, {
-    key: "handleFilterChange",
-    value: function handleFilterChange(event) {
-      event.preventDefault();
-      var filterValue = event.currentTarget.value;
-      var filteredOptions = this.filterOptions(this.state.itemDOMValues, filterValue, this.props.options);
-
-      // highlight the first item of the search result if at least one item was found
-      var newFocusedItemIndex = filteredOptions.length > 0 ? 0 : -1;
-      this.setState(function () {
-        return {
-          isFilterActive: true,
-          filterValue: filterValue,
-          filteredOptions: filteredOptions,
-          keyboardUsed: true,
-          focusedItemIndex: newFocusedItemIndex
-        };
-      });
+    renderFilterInput() {
+        const inputClasses = (0, classnames_1.default)('multiselect-filter-input', !this.state.selectedItems.length && 'multiselect-filter-input-placeholder', (this.state.isFilterActive || this.state.filterValue) && 'multiselect-filter-input-active');
+        return ((0, jsx_runtime_1.jsx)("input", { type: 'text', className: inputClasses, autoFocus: true, onChange: this.handleFilterChange, defaultValue: this.state.filterValue }));
     }
-  }, {
-    key: "onOptionChange",
-    value: function onOptionChange(event, selectedItem) {
-      var _this7 = this;
-      event.preventDefault();
-
-      // prevent selecting disabled Items
-      if (selectedItem !== null && selectedItem !== void 0 && selectedItem.disabled) {
-        return;
-      }
-      var newSelectedItems = this.updateSelection(selectedItem.id);
-      this.setState(function () {
-        return {
-          selectedItems: newSelectedItems,
-          isFilterActive: false,
-          filterValue: '',
-          filteredOptions: _this7.props.options
-        };
-      });
-      this.props.onChange(this.state.selectedItems);
+    filterOptions(itemDOMValues, filterValue, options) {
+        const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));
+        // Filter the options accodring to the filtered DOM values and map the IDs since the filter cannot be done
+        // on the options itself as they might contain arbitrary components
+        return options.filter(option => {
+            return filteredDOMValues.find(value => value.id === option.id);
+        });
     }
-  }, {
-    key: "updateSelection",
-    value: function updateSelection(selectedItemId) {
-      var newSelectedItems = this.state.selectedItems;
-      var itemIndex = this.state.selectedItems.indexOf(selectedItemId);
-      if (itemIndex !== -1) {
-        newSelectedItems.splice(itemIndex, 1);
-      } else {
-        newSelectedItems.push(selectedItemId);
-      }
-      return newSelectedItems;
+    handleFilterChange(event) {
+        event.preventDefault();
+        const filterValue = event.currentTarget.value;
+        const filteredOptions = this.filterOptions(this.state.itemDOMValues, filterValue, this.props.options);
+        // highlight the first item of the search result if at least one item was found
+        const newFocusedItemIndex = filteredOptions.length > 0 ? 0 : -1;
+        this.setState(() => ({
+            isFilterActive: true,
+            filterValue,
+            filteredOptions,
+            keyboardUsed: true,
+            focusedItemIndex: newFocusedItemIndex,
+        }));
     }
-  }, {
-    key: "removeSelectedItem",
-    value: function removeSelectedItem(event, itemId) {
-      event.stopPropagation();
-      var newSelectedItems = this.updateSelection(itemId);
-      this.setState(function () {
-        return {
-          selectedItems: newSelectedItems
-        };
-      });
-      if (this.props.onChange) {
+    onOptionChange(event, selectedItem) {
+        event.preventDefault();
+        // prevent selecting disabled Items
+        if (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.disabled) {
+            return;
+        }
+        const newSelectedItems = this.updateSelection(selectedItem.id);
+        this.setState(() => ({
+            selectedItems: newSelectedItems,
+            isFilterActive: false,
+            filterValue: '',
+            filteredOptions: this.props.options,
+        }));
         this.props.onChange(this.state.selectedItems);
-      }
     }
-  }, {
-    key: "isAutoDropActive",
-    value: function isAutoDropActive() {
-      return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
+    updateSelection(selectedItemId) {
+        const newSelectedItems = this.state.selectedItems;
+        const itemIndex = this.state.selectedItems.indexOf(selectedItemId);
+        if (itemIndex !== -1) {
+            newSelectedItems.splice(itemIndex, 1);
+        }
+        else {
+            newSelectedItems.push(selectedItemId);
+        }
+        return newSelectedItems;
     }
-  }, {
-    key: "handleToggleKeyDown",
-    value: function handleToggleKeyDown(event) {
-      switch (event.keyCode) {
-        case 32:
-          if (!this.state.isOpen) {
-            // open on space
-            event.preventDefault();
-            this.onToggle(event);
-          }
-          break;
-        case 13:
-          if (!this.state.isOpen) {
-            // open on enter
-            event.preventDefault();
-            this.onToggle(event);
-          }
-          break;
-        default:
-          break;
-      }
+    removeSelectedItem(event, itemId) {
+        event.stopPropagation();
+        const newSelectedItems = this.updateSelection(itemId);
+        this.setState(() => ({
+            selectedItems: newSelectedItems,
+        }));
+        if (this.props.onChange) {
+            this.props.onChange(this.state.selectedItems);
+        }
     }
-  }, {
-    key: "onToggle",
-    value: function onToggle(event) {
-      // Dont toggle when component is disabled or an item in the toggle was clicked in order to remove from selection
-      // neither close when filter is active, means entering some filter value
-      // in order to avoid closing menu on space but allow to use it for filtering
-      if (this.props.disabled || this.state.isFilterActive) {
-        return;
-      }
-
-      // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of
-      // type submit by default in HTML. In order to differentiate between real click and a synthetic event
-      // caused by they keyboard, use the event details. A synthetic event is always 0.
-      var keyboardUsed = event.detail === 0;
-      this.setState({
-        isOpen: !this.state.isOpen,
-        keyboardUsed: keyboardUsed
-      });
+    isAutoDropActive() {
+        return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
     }
-  }, {
-    key: "onOpenMenu",
-    value: function onOpenMenu(dropup) {
-      var node = _reactDom["default"].findDOMNode(this);
-      if (dropup) {
-        node.classList.add('dropup');
-      } else {
-        node.classList.remove('dropup');
-      }
+    handleToggleKeyDown(event) {
+        switch (event.keyCode) {
+            case 32:
+                if (!this.state.isOpen) {
+                    // open on space
+                    event.preventDefault();
+                    this.onToggle(event);
+                }
+                break;
+            case 13:
+                if (!this.state.isOpen) {
+                    // open on enter
+                    event.preventDefault();
+                    this.onToggle(event);
+                }
+                break;
+            default:
+                break;
+        }
     }
-  }, {
-    key: "closeMenu",
-    value: function closeMenu() {
-      if (this.state.isOpen) {
-        this.setState(function () {
-          return {
-            isOpen: false,
-            isFilterActive: false,
-            keyboardUsed: false
-          };
+    onToggle(event) {
+        // Dont toggle when component is disabled or an item in the toggle was clicked in order to remove from selection
+        // neither close when filter is active, means entering some filter value
+        // in order to avoid closing menu on space but allow to use it for filtering
+        if (this.props.disabled || this.state.isFilterActive) {
+            return;
+        }
+        // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of
+        // type submit by default in HTML. In order to differentiate between real click and a synthetic event
+        // caused by they keyboard, use the event details. A synthetic event is always 0.
+        const keyboardUsed = event.detail === 0;
+        this.setState({
+            isOpen: !this.state.isOpen,
+            keyboardUsed,
         });
-        this.refToggle.focus();
-      }
     }
-  }, {
-    key: "handleClickOutside",
-    value: function handleClickOutside() {
-      this.closeMenu();
+    onOpenMenu(dropup) {
+        const node = react_dom_1.default.findDOMNode(this);
+        if (dropup) {
+            node.classList.add('dropup');
+        }
+        else {
+            node.classList.remove('dropup');
+        }
+    }
+    closeMenu() {
+        if (this.state.isOpen) {
+            this.setState(() => ({
+                isOpen: false,
+                isFilterActive: false,
+                keyboardUsed: false,
+            }));
+            this.refToggle.focus();
+        }
+    }
+    handleClickOutside() {
+        this.closeMenu();
     }
-  }]);
-  return Multiselect;
-}(_react.Component);
+}
 exports.Multiselect = Multiselect;
 Multiselect.defaultProps = {
-  onChange: function onChange() {},
-  options: [],
-  selectedItems: [],
-  disabled: false,
-  pullRight: false,
-  hasError: false,
-  useFilter: false,
-  tabIndex: 0,
-  showSelectedItemIcon: false,
-  showUnselectedItemIcons: false
+    onChange: () => { },
+    options: [],
+    selectedItems: [],
+    disabled: false,
+    pullRight: false,
+    hasError: false,
+    useFilter: false,
+    tabIndex: 0,
+    showSelectedItemIcon: false,
+    showUnselectedItemIcons: false,
 };
 Multiselect.propTypes = {
-  id: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    // Identify an option
-    id: _propTypes["default"].string.isRequired,
-    // A label to show in body
-    label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
-    // An icon to show in body
-    icon: _propTypes["default"].node,
-    // Mark option as selected
-    selected: _propTypes["default"].bool,
-    // Mark option as disabled
-    disabled: _propTypes["default"].bool,
-    // Mark option as groupHeader
-    header: _propTypes["default"].bool
-  })),
-  // Callback params: option to change
-  onChange: _propTypes["default"].func,
-  // Text to display when no menu item is selected
-  placeholder: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  dropup: _propTypes["default"].bool,
-  pullRight: _propTypes["default"].bool,
-  autoDropDirection: _propTypes["default"].bool,
-  value: _propTypes["default"].array,
-  // FIXME: should be removed - use options.selected instead
-  bsSize: _propTypes["default"].oneOf(['sm', 'lg', 'small', 'large']),
-  disabled: _propTypes["default"].bool,
-  className: _propTypes["default"].string,
-  tabIndex: _propTypes["default"].number,
-  hasError: _propTypes["default"].bool,
-  useFilter: _propTypes["default"].bool,
-  // Text to display when no menu item is selected
-  noItemMessage: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  // Text to display a counter for selected items
-  counterMessage: _propTypes["default"].shape({
-    one: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
-    many: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired
-  }),
-  // External function to render a counter message for selected items
-  renderCounterMessage: _propTypes["default"].func,
-  // shows icons as selected values
-  showSelectedItemIcon: _propTypes["default"].bool,
-  // shows icons always with active or inactive state
-  showUnselectedItemIcons: _propTypes["default"].bool
+    id: prop_types_1.default.string,
+    name: prop_types_1.default.string,
+    options: prop_types_1.default.arrayOf(prop_types_1.default.shape({
+        // Identify an option
+        id: prop_types_1.default.string.isRequired,
+        // A label to show in body
+        label: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]).isRequired,
+        // An icon to show in body
+        icon: prop_types_1.default.node,
+        // Mark option as selected
+        selected: prop_types_1.default.bool,
+        // Mark option as disabled
+        disabled: prop_types_1.default.bool,
+        // Mark option as groupHeader
+        header: prop_types_1.default.bool,
+    })),
+    // Callback params: option to change
+    onChange: prop_types_1.default.func,
+    // Text to display when no menu item is selected
+    placeholder: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    dropup: prop_types_1.default.bool,
+    pullRight: prop_types_1.default.bool,
+    autoDropDirection: prop_types_1.default.bool,
+    value: prop_types_1.default.array,
+    bsSize: prop_types_1.default.oneOf(['sm', 'lg', 'small', 'large']),
+    disabled: prop_types_1.default.bool,
+    className: prop_types_1.default.string,
+    tabIndex: prop_types_1.default.number,
+    hasError: prop_types_1.default.bool,
+    useFilter: prop_types_1.default.bool,
+    // Text to display when no menu item is selected
+    noItemMessage: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    // Text to display a counter for selected items
+    counterMessage: prop_types_1.default.shape({
+        one: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]).isRequired,
+        many: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]).isRequired,
+    }),
+    // External function to render a counter message for selected items
+    renderCounterMessage: prop_types_1.default.func,
+    // shows icons as selected values
+    showSelectedItemIcon: prop_types_1.default.bool,
+    // shows icons always with active or inactive state
+    showUnselectedItemIcons: prop_types_1.default.bool,
 };
-var _default = (0, _reactOnclickoutside["default"])(Multiselect);
-exports["default"] = _default;
+exports.default = (0, react_onclickoutside_1.default)(Multiselect);