@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

package/components/autosuggest/AutoSuggest.js

@@ -1,473 +1,203 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-var _excluded = ["icon", "value", "showSelectedItemsInInput"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-import onClickOutside from 'react-onclickoutside';
-import isEmpty from 'lodash/fp/isEmpty';
-import isEqual from 'lodash/fp/isEqual';
-import get from 'lodash/fp/get';
-import ClearableInput from '../clearableInput/ClearableInput';
-import Spinner from '../spinner/Spinner';
-import scrollItemIntoView, { UP, DOWN } from '../../utils/scrollItemIntoView';
-import getDropDirection from '../../utils/getDropDirection';
-import DropdownHeader from '../selects/DropdownHeader';
-import MenuItem from '../menuItems/MenuItem';
-var NoItemMessage = function NoItemMessage(_ref) {
-  var message = _ref.message;
-  return /*#__PURE__*/React.createElement("li", {
-    className: 'no-item-message disabled',
-    disabled: true
-  }, /*#__PURE__*/React.createElement("a", {
-    role: 'button'
-  }, /*#__PURE__*/React.createElement("i", null, message)));
-};
-export var AutoSuggest = /*#__PURE__*/function (_Component) {
-  _inherits(AutoSuggest, _Component);
-  var _super = _createSuper(AutoSuggest);
-  function AutoSuggest(props) {
-    var _this;
-    _classCallCheck(this, AutoSuggest);
-    _this = _super.call(this, props);
-    _this.state = {
-      open: false,
-      value: props.inputProps.value || '',
-      dropup: props.dropup,
-      pullRight: props.pullRight,
-      highlightedItemIndex: -1
-    };
-    _this.openMenu = _this.openMenu.bind(_assertThisInitialized(_this));
-    _this.closeMenu = _this.closeMenu.bind(_assertThisInitialized(_this));
-    _this.setInputValue = _this.setInputValue.bind(_assertThisInitialized(_this));
-    _this.clearInputValue = _this.clearInputValue.bind(_assertThisInitialized(_this));
-    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
-    _this.handleInputChange = _this.handleInputChange.bind(_assertThisInitialized(_this));
-    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
-    _this.onMouseEnter = _this.onMouseEnter.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-  _createClass(AutoSuggest, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      this.props.onSuggestionsFetchRequested({
-        value: this.state.value
-      });
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (this.props.onSuggestionHighlighted) {
-        var currentHighlightedSuggestion = this.getHighlightedSuggestion();
-        var prevHighlightedSuggestion = prevState.highlightedSuggestion;
-        if (currentHighlightedSuggestion !== prevHighlightedSuggestion) {
-          this.props.onSuggestionHighlighted({
-            suggestion: currentHighlightedSuggestion
-          });
-        }
-      }
-
-      // Update internal value state from outside
-      var updatedValueFromProps = get('inputProps.value')(this.props);
-      if (!isEqual(updatedValueFromProps, this.state.value)) {
-        this.setState(function () {
-          return {
-            value: updatedValueFromProps
-          };
-        });
-      }
-    }
-  }, {
-    key: "getHighlightedSuggestion",
-    value: function getHighlightedSuggestion() {
-      if (this.state.highlightedItemIndex === -1) {
-        return null;
-      }
-      return this.props.suggestions[this.state.highlightedItemIndex];
-    }
-  }, {
-    key: "openMenu",
-    value: function openMenu( /*event*/
-    ) {
-      var dropDirection = {};
-      if (this.refDropdownMenu && this.isAutoDropActive() && !this.state.open) {
-        dropDirection = getDropDirection(this.refDropdownMenu.parentNode, this.refDropdownMenu);
-      }
-      this.setState(_objectSpread({
-        open: true
-      }, dropDirection));
-    }
-  }, {
-    key: "closeMenu",
-    value: function closeMenu() {
-      this.setState({
-        open: false
-      });
-    }
-  }, {
-    key: "handleClickOutside",
-    value: function handleClickOutside() {
-      this.closeMenu();
-    }
-  }, {
-    key: "handleFocus",
-    value: function handleFocus(event) {
-      var _this$props = this.props,
-        openOnFocus = _this$props.openOnFocus,
-        inputProps = _this$props.inputProps;
-      if (openOnFocus) {
-        this.openMenu();
-      }
-      if (inputProps.onFocus) {
-        inputProps.onFocus(event);
-      }
-    }
-  }, {
-    key: "isAutoDropActive",
-    value: function isAutoDropActive() {
-      return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
-    }
-  }, {
-    key: "getDropdownDOMNode",
-    value: function getDropdownDOMNode() {
-      return ReactDOM.findDOMNode(this.refDropdownMenu);
-    }
-  }, {
-    key: "handleKeyDown",
-    value: function handleKeyDown(event) {
-      var _this2 = this;
-      var keyCode = event.keyCode;
-      var highlightedItemIndex = this.state.highlightedItemIndex;
-      var suggestions = this.props.suggestions;
-      switch (keyCode) {
-        case 40:
-          // select below on arrow down key
-          if (this.state.open && suggestions.length > highlightedItemIndex + 1) {
-            this.setState({
-              highlightedItemIndex: highlightedItemIndex + 1
-            }, function () {
-              scrollItemIntoView(DOWN, _this2.getDropdownDOMNode(), _this2.getFocusedOptionNode());
-            });
-          }
-          return;
-        case 38:
-          // select above on arrow up key
-          if (this.state.open && highlightedItemIndex > 0) {
-            this.setState({
-              highlightedItemIndex: highlightedItemIndex - 1
-            }, function () {
-              scrollItemIntoView(UP, _this2.getDropdownDOMNode(), _this2.getFocusedOptionNode());
-            });
-          }
-          return;
-        case 13:
-          // select on enter
-          if (this.state.open && suggestions[highlightedItemIndex]) {
-            this.onSuggestionClicked(event, suggestions[highlightedItemIndex]);
-          } else {
-            this.openMenu(event);
-          }
-          break;
-        case 27:
-          // close on esc key or on tab
-          this.closeMenu();
-          break;
-        case 9:
-          // close on tab
-          this.closeMenu();
-          break;
-        default:
-          break;
-      }
-    }
-  }, {
-    key: "getOptionNodes",
-    value: function getOptionNodes() {
-      var node = ReactDOM.findDOMNode(this.refDropdownMenu);
-      return node && node.getElementsByTagName('li') || [];
-    }
-  }, {
-    key: "getFocusedOptionNode",
-    value: function getFocusedOptionNode() {
-      var optionNodes = this.getOptionNodes();
-      return _toConsumableArray(optionNodes).find(function (item) {
-        return item.className.includes('active');
-      });
-    }
-  }, {
-    key: "handleInputChange",
-    value: function handleInputChange(value, event) {
-      if (this.state.value !== value) {
-        this.setInputValue(value, event);
-      }
-    }
-  }, {
-    key: "setInputValue",
-    value: function setInputValue(newValue) {
-      var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      var shouldCloseMenu = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      var closeMenuEventually = shouldCloseMenu ? false : this.state.open;
-      this.setState({
-        open: !this.state.open ? true : closeMenuEventually,
-        value: newValue,
-        highlightedItemIndex: -1
-      });
-
-      // Fire callback so the parent component can filter the suggestions accordingly
-      this.props.onSuggestionsFetchRequested({
-        value: newValue
-      });
-      var _this$props$inputProp = this.props.inputProps,
-        value = _this$props$inputProp.value,
-        _this$props$inputProp2 = _this$props$inputProp.onChange,
-        onChange = _this$props$inputProp2 === void 0 ? function () {} : _this$props$inputProp2;
-      if (newValue !== value) {
-        onChange(event, {
-          newValue: newValue
-        });
-      }
-    }
-  }, {
-    key: "getInputNode",
-    value: function getInputNode() {
-      return this.refComponent.getElementsByTagName('input')[0];
-    }
-  }, {
-    key: "clearInputValue",
-    value: function clearInputValue(event) {
-      this.setState({
-        value: '',
-        highlightedItemIndex: -1
-      });
-
-      // Focus the input field after clearing it's value in order to allow
-      // entering new values right away
-      var node = this.getInputNode();
-      if (node) {
-        ReactDOM.findDOMNode(node).focus();
-      }
-
-      // Reset filter value so all suggestions are shown again
-      this.props.onSuggestionsFetchRequested({
-        value: ''
-      });
-
-      // Additionally, fire the onClear callback as the service may react on it
-      if (this.props.inputProps.onClear) {
-        this.props.inputProps.onClear(event);
-      }
-    }
-  }, {
-    key: "onSuggestionClicked",
-    value: function onSuggestionClicked(event, suggestion) {
-      this.setInputValue(this.props.getSuggestionValue(suggestion), event, this.props.closeOnSelect);
-
-      // fire callback with the selected item
-      this.props.onSuggestionSelected(event, {
-        suggestion: suggestion,
-        suggestionValue: this.props.getSuggestionValue(suggestion),
-        highlightedItemIndex: -1
-      });
-    }
-  }, {
-    key: "onMouseEnter",
-    value: function onMouseEnter(event) {
-      var newIndex = event.currentTarget.getAttribute('data-item-index');
-      if (newIndex) {
-        this.setState(function () {
-          return {
-            highlightedItemIndex: newIndex
-          };
-        });
-      }
-    }
-  }, {
-    key: "wrapAddons",
-    value: function wrapAddons(iconClass, leadingInputAddons, child, trailingInputAddons) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: 'input-group width-100pct'
-      }, leadingInputAddons && leadingInputAddons, iconClass && /*#__PURE__*/React.createElement("span", {
-        className: 'input-group-addon'
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "rioglyph ".concat(iconClass),
-        "aria-hidden": 'true'
-      })), child, trailingInputAddons && trailingInputAddons);
-    }
-  }, {
-    key: "renderInput",
-    value: function renderInput() {
-      var _this$props2 = this.props,
-        leadingInputAddons = _this$props2.leadingInputAddons,
-        trailingInputAddons = _this$props2.trailingInputAddons;
-      var _this$props$inputProp3 = this.props.inputProps,
-        icon = _this$props$inputProp3.icon,
-        value = _this$props$inputProp3.value,
-        showSelectedItemsInInput = _this$props$inputProp3.showSelectedItemsInInput,
-        remainingProps = _objectWithoutProperties(_this$props$inputProp3, _excluded);
-      var input = /*#__PURE__*/React.createElement(ClearableInput, _extends({}, remainingProps, {
-        autoComplete: this.props.autoComplete,
-        onChange: this.handleInputChange,
-        onClear: this.clearInputValue,
-        onClick: this.openMenu,
-        onFocus: this.handleFocus,
-        value: !showSelectedItemsInInput && value
-      }));
-      if (icon || leadingInputAddons || trailingInputAddons) {
-        return this.wrapAddons(icon, leadingInputAddons, input, trailingInputAddons);
-      }
-      return input;
-    }
-  }, {
-    key: "renderLoadingIndicator",
-    value: function renderLoadingIndicator(dropdownMenuClasses) {
-      return /*#__PURE__*/React.createElement("ul", {
-        className: dropdownMenuClasses
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'display-flex justify-content-center padding-10'
-      }, /*#__PURE__*/React.createElement(Spinner, null)));
-    }
-  }, {
-    key: "renderDropdownMenu",
-    value: function renderDropdownMenu() {
-      var _this3 = this;
-      var _this$props3 = this.props,
-        suggestions = _this$props3.suggestions,
-        pullRight = _this$props3.pullRight,
-        dropdownClassName = _this$props3.dropdownClassName,
-        noItemMessage = _this$props3.noItemMessage,
-        isLoading = _this$props3.isLoading,
-        renderSuggestion = _this$props3.renderSuggestion;
-      var dropdownMenuClasses = classNames('dropdown-menu', pullRight && 'pull-right', dropdownClassName && dropdownClassName);
-      if (isLoading) {
-        return this.renderLoadingIndicator(dropdownMenuClasses);
-      }
-      var hasNoSuggestions = isEmpty(suggestions);
-      if (hasNoSuggestions && !noItemMessage) {
-        return null;
-      }
-      return /*#__PURE__*/React.createElement("ul", {
-        role: 'menu',
-        className: dropdownMenuClasses,
-        ref: function ref(node) {
-          return _this3.refDropdownMenu = node;
-        }
-      }, hasNoSuggestions && noItemMessage && /*#__PURE__*/React.createElement(NoItemMessage, {
-        key: 'NoItemMessage',
-        message: noItemMessage
-      }), suggestions.map(function (suggestion, index) {
-        if (suggestion.header) {
-          return /*#__PURE__*/React.createElement(DropdownHeader, {
-            key: suggestion.label,
-            label: suggestion.label
-          });
-        }
-        var item = {
-          value: suggestion.customSuggestion ? suggestion.customSuggestion : renderSuggestion(suggestion),
-          onSelect: function onSelect(idx, event) {
-            return _this3.onSuggestionClicked(event, suggestion);
-          },
-          active: index === _this3.state.highlightedItemIndex,
-          disabled: suggestion.disabled
-        };
-        return /*#__PURE__*/React.createElement(MenuItem, _extends({
-          key: index
-        }, item, {
-          index: index,
-          onMouseEnter: _this3.onMouseEnter
-        }));
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-      var classes = classNames('AutoSuggest', 'dropdown', this.state.open && 'open', this.state.dropup && 'dropup', this.props.className && this.props.className);
-      return /*#__PURE__*/React.createElement("div", {
-        className: classes,
-        onKeyDown: this.handleKeyDown,
-        ref: function ref(node) {
-          return _this4.refComponent = node;
-        }
-      }, this.renderInput(), this.renderDropdownMenu());
-    }
-  }]);
-  return AutoSuggest;
-}(Component);
-AutoSuggest.defaultProps = {
-  onSuggestionSelected: function onSuggestionSelected() {},
-  onSuggestionsFetchRequested: function onSuggestionsFetchRequested() {},
-  renderSuggestion: function renderSuggestion(suggestion) {
-    return suggestion.label;
-  },
-  getSuggestionValue: function getSuggestionValue(suggestion) {
-    return suggestion.label;
-  },
-  suggestions: [],
-  autoDropDirection: true,
-  pullRight: false,
-  dropup: false,
-  isLoading: false,
-  openOnFocus: false,
-  closeOnSelect: true,
-  showSelectedItemsInInput: true,
-  autoComplete: 'off',
-  inputProps: {
-    disabled: false,
-    onChange: function onChange() {},
-    onClear: function onClear() {},
-    onBlur: function onBlur() {},
-    onFocus: function onFocus() {},
-    placeholder: 'Start typing ...',
-    hasError: false,
-    tabIndex: 0
-  }
-};
-AutoSuggest.propTypes = {
-  onSuggestionSelected: PropTypes.func.isRequired,
-  onSuggestionsFetchRequested: PropTypes.func.isRequired,
-  onSuggestionHighlighted: PropTypes.func,
-  suggestions: PropTypes.array.isRequired,
-  renderSuggestion: PropTypes.func,
-  getSuggestionValue: PropTypes.func,
-  dropup: PropTypes.bool,
-  pullRight: PropTypes.bool,
-  autoDropDirection: PropTypes.bool,
-  className: PropTypes.string,
-  dropdownClassName: PropTypes.string,
-  isLoading: PropTypes.bool,
-  openOnFocus: PropTypes.bool,
-  closeOnSelect: PropTypes.bool,
-  showSelectedItemsInInput: PropTypes.bool,
-  autoComplete: PropTypes.string,
-  noItemMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  inputProps: PropTypes.shape({
-    disabled: PropTypes.bool,
-    onChange: PropTypes.func,
-    onClear: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    className: PropTypes.string,
-    placeholder: PropTypes.string,
-    icon: PropTypes.string,
-    value: PropTypes.string,
-    hasError: PropTypes.bool,
-    tabIndex: PropTypes.number,
-    inputRef: PropTypes.func
-  }).isRequired,
-  leadingInputAddons: PropTypes.oneOfType([PropTypes.node]),
-  trailingInputAddons: PropTypes.oneOfType([PropTypes.node])
-};
-export default onClickOutside(AutoSuggest);
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash/fp/isEmpty';
+import isNil from 'lodash/fp/isNil';
+import noop from 'lodash/fp/noop';
+import ClearableInput from '../clearableInput/ClearableInput';
+import { scrollItemIntoView, UP, DOWN } from '../../utils/scrollItemIntoView';
+import { useDropDirection } from '../../utils/useDropDirection';
+import DropdownHeader from '../selects/DropdownHeader';
+import MenuItem from '../menuItems/MenuItem';
+import useClickOutside from '../../hooks/useClickOutside';
+import AutoSuggestAddons from './AutoSuggestAddons';
+import DropdownSpinner from './DropdownSpinner';
+import NoItemMessage from './NoItemMessage';
+export const AutoSuggest = (props) => {
+    const { onSuggestionSelected = noop, onSuggestionsFetchRequested = noop, onSuggestionHighlighted = noop, renderSuggestion = suggestion => suggestion.label, getSuggestionValue = suggestion => suggestion.label, suggestions = [], autoDropDirection = true, pullRight = false, dropup = false, isLoading = false, openOnFocus = false, closeOnSelect = true, showSelectedItemsInInput = true, autoComplete = 'off', inputProps = {
+        disabled: false,
+        onChange: noop,
+        onClear: noop,
+        onBlur: noop,
+        onFocus: noop,
+        placeholder: 'Start typing ...',
+        hasError: false,
+        tabIndex: 0,
+        value: undefined,
+        icon: undefined,
+    }, leadingInputAddons, trailingInputAddons, noItemMessage, dropdownClassName = '', className = '' } = props, remainingProps = __rest(props, ["onSuggestionSelected", "onSuggestionsFetchRequested", "onSuggestionHighlighted", "renderSuggestion", "getSuggestionValue", "suggestions", "autoDropDirection", "pullRight", "dropup", "isLoading", "openOnFocus", "closeOnSelect", "showSelectedItemsInInput", "autoComplete", "inputProps", "leadingInputAddons", "trailingInputAddons", "noItemMessage", "dropdownClassName", "className"]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(inputProps.value || '');
+    const [highlightedItemIndex, setHighlightedItemIndex] = useState(-1);
+    const [direction, setDirection] = useState(DOWN);
+    const componentRef = useClickOutside(() => closeMenu());
+    const dropdownMenuRef = useRef(null);
+    const inputRef = useRef(null);
+    const optionNodesRef = useRef([]);
+    // Update internal value state from outside when external input value is given.
+    // This is important for when this component is used as a controlled component
+    const externalValue = inputProps.value;
+    if (!isNil(externalValue) && value !== externalValue) {
+        setValue(externalValue !== null && externalValue !== void 0 ? externalValue : '');
+    }
+    // Fetch suggestions on mounting the component by using the external
+    // fetch callback
+    useEffect(() => onSuggestionsFetchRequested({ value }), []);
+    // When a new suggestion is highlighted it may be not in view as the dropdown menu
+    // has an overflow and can scroll. In this case, we need to scroll to the highlighted suggestion
+    // so the user can see it
+    useEffect(() => {
+        scrollItemIntoView(direction, dropdownMenuRef.current, getFocusedOptionNode());
+    }, [highlightedItemIndex, direction]);
+    // Used to store the list item reference to allow highlighting a single node.
+    // Update that list of nodes again when the suggestions change from the outside.
+    useEffect(() => {
+        var _a;
+        const optionNodes = Array.from(((_a = dropdownMenuRef.current) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('li')) || []);
+        optionNodesRef.current = optionNodes;
+    }, [suggestions]);
+    // Overwrite position of dropdown menu in case auto drop is enabled
+    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [suggestions]);
+    const openMenu = () => {
+        if (isOpen) {
+            return;
+        }
+        setIsOpen(true);
+    };
+    const closeMenu = () => {
+        setIsOpen(false);
+    };
+    const handleFocus = (event) => {
+        if (openOnFocus) {
+            openMenu();
+        }
+        if (inputProps.onFocus) {
+            inputProps.onFocus(event);
+        }
+    };
+    const handleKeyDown = (event) => {
+        switch (event.key) {
+            case 'ArrowDown': {
+                // select below on arrow down key
+                const newHighlightedIndex = highlightedItemIndex + 1;
+                if (isOpen && suggestions.length > newHighlightedIndex) {
+                    setHighlightedItemIndex(newHighlightedIndex);
+                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));
+                    setDirection(DOWN);
+                }
+                return;
+            }
+            case 'ArrowUp':
+                // select above on arrow up key
+                if (isOpen && highlightedItemIndex > 0) {
+                    const newHighlightedIndex = highlightedItemIndex - 1;
+                    setHighlightedItemIndex(newHighlightedIndex);
+                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));
+                    setDirection(UP);
+                }
+                return;
+            case 'Enter':
+                // select on enter
+                if (isOpen && suggestions[highlightedItemIndex]) {
+                    onSuggestionClicked(event, suggestions[highlightedItemIndex]);
+                }
+                else {
+                    openMenu();
+                }
+                break;
+            case 'Escape':
+            case 'Tab':
+                // close on esc key or on tab
+                closeMenu();
+                break;
+            default:
+                break;
+        }
+    };
+    const getFocusedOptionNode = () => {
+        return [...optionNodesRef.current].find((item) => item.className.includes('active'));
+    };
+    const handleInputChange = (newValue, event) => {
+        if (value !== newValue) {
+            updateInputValue(newValue, event);
+        }
+    };
+    const updateInputValue = (newValue, event, shouldCloseMenu = false) => {
+        const closeMenuEventually = shouldCloseMenu ? false : isOpen;
+        setIsOpen(!isOpen ? true : closeMenuEventually);
+        setValue(newValue);
+        setHighlightedItemIndex(-1);
+        // Fire callback so the parent component can filter the suggestions accordingly
+        onSuggestionsFetchRequested({ value: newValue });
+        handleHighlightedSuggestionChanged(-1);
+        // Trigger onChange callback to notify usage component only when value has actually changed
+        const { value: newExternalValue, onChange = () => { } } = inputProps;
+        if (newValue !== newExternalValue) {
+            onChange(event, { newValue });
+        }
+    };
+    const handleHighlightedSuggestionChanged = (currentHighlightedItemIndex) => {
+        const currentHighlightedSuggestion = currentHighlightedItemIndex === -1 ? null : suggestions[currentHighlightedItemIndex];
+        onSuggestionHighlighted(currentHighlightedSuggestion);
+    };
+    const clearInputValue = (event) => {
+        setValue('');
+        setHighlightedItemIndex(-1);
+        // Focus the input field after clearing it's value in order to allow
+        // entering new values right away
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+        // Reset filter value so all suggestions are shown again
+        onSuggestionsFetchRequested({ value: '' });
+        handleHighlightedSuggestionChanged(-1);
+        // Additionally, fire the onClear callback as the service may react on it
+        if (inputProps.onClear) {
+            inputProps.onClear(event);
+        }
+    };
+    const onSuggestionClicked = (event, suggestion) => {
+        updateInputValue(getSuggestionValue(suggestion), event, closeOnSelect);
+        // fire callback with the selected item
+        onSuggestionSelected(event, {
+            suggestion,
+            suggestionValue: getSuggestionValue(suggestion),
+        });
+    };
+    const onMouseEnter = (event) => {
+        const newIndex = event.currentTarget.getAttribute('data-item-index');
+        if (newIndex) {
+            setHighlightedItemIndex(Number(newIndex));
+            handleHighlightedSuggestionChanged(Number(newIndex));
+        }
+    };
+    const renderInput = () => {
+        const { icon, value: ignoredExternalValue } = inputProps, remainingInputProps = __rest(inputProps, ["icon", "value"]);
+        const clearableProps = Object.assign(Object.assign({}, remainingInputProps), { onClick: () => openMenu });
+        const input = (_jsx(ClearableInput, Object.assign({}, clearableProps, { ref: inputRef, autoComplete: autoComplete, onChange: handleInputChange, onClear: clearInputValue, onFocus: handleFocus, value: showSelectedItemsInInput ? value : '' })));
+        if (icon || leadingInputAddons || trailingInputAddons) {
+            return (_jsx(AutoSuggestAddons, Object.assign({ icon: icon, leadingInputAddons: leadingInputAddons, trailingInputAddons: trailingInputAddons }, { children: input })));
+        }
+        return input;
+    };
+    const renderDropdownMenu = () => {
+        const dropdownMenuClasses = classNames('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);
+        if (isLoading) {
+            return _jsx(DropdownSpinner, { className: dropdownMenuClasses });
+        }
+        const hasNoSuggestions = isEmpty(suggestions);
+        if (hasNoSuggestions && !noItemMessage) {
+            return null;
+        }
+        return (_jsxs("ul", Object.assign({ role: 'menu', className: dropdownMenuClasses, ref: dropdownMenuRef }, { children: [hasNoSuggestions && noItemMessage && _jsx(NoItemMessage, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
+                    if (suggestion.header) {
+                        return _jsx(DropdownHeader, { label: suggestion.label }, suggestion.label);
+                    }
+                    return (_jsx(MenuItem, { active: index === highlightedItemIndex, disabled: suggestion.disabled, value: suggestion.customSuggestion ? suggestion.customSuggestion : renderSuggestion(suggestion), onSelect: (_, event) => onSuggestionClicked(event, suggestion), index: index, onMouseEnter: onMouseEnter }, `index-${suggestion.label}`));
+                })] })));
+    };
+    const classes = classNames('AutoSuggest', 'dropdown', isOpen && 'open', dropDirection.dropup && 'dropup', className);
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: classes, onKeyDown: handleKeyDown, ref: componentRef }, { children: [renderInput(), renderDropdownMenu()] })));
+};
+export default AutoSuggest;