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

package/lib/es/components/autosuggest/AutoSuggest.js

@@ -1,322 +1,207 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutoSuggest = 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 classnames_1 = tslib_1.__importDefault(require("classnames"));
-const react_onclickoutside_1 = tslib_1.__importDefault(require("react-onclickoutside"));
-const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
-const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
-const get_1 = tslib_1.__importDefault(require("lodash/fp/get"));
-const ClearableInput_1 = tslib_1.__importDefault(require("../clearableInput/ClearableInput"));
-const Spinner_1 = tslib_1.__importDefault(require("../spinner/Spinner"));
-const scrollItemIntoView_1 = require("../../utils/scrollItemIntoView");
-const getDropDirection_1 = tslib_1.__importDefault(require("../../utils/getDropDirection"));
-const DropdownHeader_1 = tslib_1.__importDefault(require("../selects/DropdownHeader"));
-const MenuItem_1 = tslib_1.__importDefault(require("../menuItems/MenuItem"));
-const NoItemMessage = ({ message }) => ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: 'no-item-message disabled', disabled: true }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ role: 'button' }, { children: (0, jsx_runtime_1.jsx)("i", { children: message }) })) })));
-class AutoSuggest extends react_1.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            open: false,
-            value: props.inputProps.value || '',
-            dropup: props.dropup,
-            pullRight: props.pullRight,
-            highlightedItemIndex: -1,
-        };
-        this.openMenu = this.openMenu.bind(this);
-        this.closeMenu = this.closeMenu.bind(this);
-        this.setInputValue = this.setInputValue.bind(this);
-        this.clearInputValue = this.clearInputValue.bind(this);
-        this.handleKeyDown = this.handleKeyDown.bind(this);
-        this.handleInputChange = this.handleInputChange.bind(this);
-        this.handleFocus = this.handleFocus.bind(this);
-        this.onMouseEnter = this.onMouseEnter.bind(this);
-    }
-    UNSAFE_componentWillMount() {
-        this.props.onSuggestionsFetchRequested({ value: this.state.value });
-    }
-    componentDidUpdate(prevProps, prevState) {
-        if (this.props.onSuggestionHighlighted) {
-            const currentHighlightedSuggestion = this.getHighlightedSuggestion();
-            const prevHighlightedSuggestion = prevState.highlightedSuggestion;
-            if (currentHighlightedSuggestion !== prevHighlightedSuggestion) {
-                this.props.onSuggestionHighlighted({
-                    suggestion: currentHighlightedSuggestion,
-                });
-            }
-        }
-        // Update internal value state from outside
-        const updatedValueFromProps = (0, get_1.default)('inputProps.value')(this.props);
-        if (!(0, isEqual_1.default)(updatedValueFromProps, this.state.value)) {
-            this.setState(() => ({
-                value: updatedValueFromProps,
-            }));
-        }
-    }
-    getHighlightedSuggestion() {
-        if (this.state.highlightedItemIndex === -1) {
-            return null;
-        }
-        return this.props.suggestions[this.state.highlightedItemIndex];
-    }
-    openMenu( /* event*/) {
-        let dropDirection = {};
-        if (this.refDropdownMenu && this.isAutoDropActive() && !this.state.open) {
-            dropDirection = (0, getDropDirection_1.default)(this.refDropdownMenu.parentNode, this.refDropdownMenu);
-        }
-        this.setState(Object.assign({ open: true }, dropDirection));
-    }
-    closeMenu() {
-        this.setState({
-            open: false,
-        });
-    }
-    handleClickOutside() {
-        this.closeMenu();
-    }
-    handleFocus(event) {
-        const { openOnFocus, inputProps } = this.props;
-        if (openOnFocus) {
-            this.openMenu();
-        }
-        if (inputProps.onFocus) {
-            inputProps.onFocus(event);
-        }
-    }
-    isAutoDropActive() {
-        return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
-    }
-    getDropdownDOMNode() {
-        return react_dom_1.default.findDOMNode(this.refDropdownMenu);
-    }
-    handleKeyDown(event) {
-        const { keyCode } = event;
-        const { highlightedItemIndex } = this.state;
-        const { suggestions } = this.props;
-        switch (keyCode) {
-            case 40:
-                // select below on arrow down key
-                if (this.state.open && suggestions.length > highlightedItemIndex + 1) {
-                    this.setState({
-                        highlightedItemIndex: highlightedItemIndex + 1,
-                    }, () => {
-                        (0, scrollItemIntoView_1.scrollItemIntoView)(scrollItemIntoView_1.DOWN, this.getDropdownDOMNode(), this.getFocusedOptionNode());
-                    });
-                }
-                return;
-            case 38:
-                // select above on arrow up key
-                if (this.state.open && highlightedItemIndex > 0) {
-                    this.setState({
-                        highlightedItemIndex: highlightedItemIndex - 1,
-                    }, () => {
-                        (0, scrollItemIntoView_1.scrollItemIntoView)(scrollItemIntoView_1.UP, this.getDropdownDOMNode(), this.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;
-        }
-    }
-    getOptionNodes() {
-        const node = react_dom_1.default.findDOMNode(this.refDropdownMenu);
-        return (node && node.getElementsByTagName('li')) || [];
-    }
-    getFocusedOptionNode() {
-        const optionNodes = this.getOptionNodes();
-        return [...optionNodes].find(item => item.className.includes('active'));
-    }
-    handleInputChange(value, event) {
-        if (this.state.value !== value) {
-            this.setInputValue(value, event);
-        }
-    }
-    setInputValue(newValue, event = {}, shouldCloseMenu = false) {
-        const 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 });
-        const { value, onChange = () => { } } = this.props.inputProps;
-        if (newValue !== value) {
-            onChange(event, { newValue });
-        }
-    }
-    getInputNode() {
-        return this.refComponent.getElementsByTagName('input')[0];
-    }
-    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
-        const node = this.getInputNode();
-        if (node) {
-            react_dom_1.default.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);
-        }
-    }
-    onSuggestionClicked(event, suggestion) {
-        this.setInputValue(this.props.getSuggestionValue(suggestion), event, this.props.closeOnSelect);
-        // fire callback with the selected item
-        this.props.onSuggestionSelected(event, {
-            suggestion,
-            suggestionValue: this.props.getSuggestionValue(suggestion),
-            highlightedItemIndex: -1,
-        });
-    }
-    onMouseEnter(event) {
-        const newIndex = event.currentTarget.getAttribute('data-item-index');
-        if (newIndex) {
-            this.setState(() => ({
-                highlightedItemIndex: newIndex,
-            }));
-        }
-    }
-    wrapAddons(iconClass, leadingInputAddons, child, trailingInputAddons) {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group width-100pct' }, { children: [leadingInputAddons && leadingInputAddons, iconClass && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${iconClass}`, "aria-hidden": 'true' }) }))), child, trailingInputAddons && trailingInputAddons] })));
-    }
-    renderInput() {
-        const { leadingInputAddons, trailingInputAddons } = this.props;
-        const _a = this.props.inputProps, { icon, 
-        // tabIndex,
-        // hasError,
-        // placeholder,
-        value, 
-        // className,
-        // disabled,
-        // onBlur,
-        // onFocus,
-        // inputRef,
-        showSelectedItemsInInput } = _a, remainingProps = tslib_1.__rest(_a, ["icon", "value", "showSelectedItemsInInput"]);
-        const input = ((0, jsx_runtime_1.jsx)(ClearableInput_1.default, Object.assign({}, 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;
-    }
-    renderLoadingIndicator(dropdownMenuClasses) {
-        return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: dropdownMenuClasses }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'display-flex justify-content-center padding-10' }, { children: (0, jsx_runtime_1.jsx)(Spinner_1.default, {}) })) })));
-    }
-    renderDropdownMenu() {
-        const { suggestions, pullRight, dropdownClassName, noItemMessage, isLoading, renderSuggestion } = this.props;
-        const dropdownMenuClasses = (0, classnames_1.default)('dropdown-menu', pullRight && 'pull-right', dropdownClassName && dropdownClassName);
-        if (isLoading) {
-            return this.renderLoadingIndicator(dropdownMenuClasses);
-        }
-        const hasNoSuggestions = (0, isEmpty_1.default)(suggestions);
-        if (hasNoSuggestions && !noItemMessage) {
-            return null;
-        }
-        return ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ role: 'menu', className: dropdownMenuClasses, ref: node => (this.refDropdownMenu = node) }, { children: [hasNoSuggestions && noItemMessage && (0, jsx_runtime_1.jsx)(NoItemMessage, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
-                    if (suggestion.header) {
-                        return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { label: suggestion.label }, suggestion.label);
-                    }
-                    const item = {
-                        value: suggestion.customSuggestion ? suggestion.customSuggestion : renderSuggestion(suggestion),
-                        onSelect: (idx, event) => this.onSuggestionClicked(event, suggestion),
-                        active: index === this.state.highlightedItemIndex,
-                        disabled: suggestion.disabled,
-                    };
-                    return (0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({}, item, { index: index, onMouseEnter: this.onMouseEnter }), index);
-                })] })));
-    }
-    render() {
-        const classes = (0, classnames_1.default)('AutoSuggest', 'dropdown', this.state.open && 'open', this.state.dropup && 'dropup', this.props.className && this.props.className);
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes, onKeyDown: this.handleKeyDown, ref: node => (this.refComponent = node) }, { children: [this.renderInput(), this.renderDropdownMenu()] })));
-    }
-}
-exports.AutoSuggest = AutoSuggest;
-AutoSuggest.defaultProps = {
-    onSuggestionSelected: () => { },
-    onSuggestionsFetchRequested: () => { },
-    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: () => { },
-        onClear: () => { },
-        onBlur: () => { },
-        onFocus: () => { },
-        placeholder: 'Start typing ...',
-        hasError: false,
-        tabIndex: 0,
-    },
-};
-AutoSuggest.propTypes = {
-    onSuggestionSelected: prop_types_1.default.func.isRequired,
-    onSuggestionsFetchRequested: prop_types_1.default.func.isRequired,
-    onSuggestionHighlighted: prop_types_1.default.func,
-    suggestions: prop_types_1.default.array.isRequired,
-    renderSuggestion: prop_types_1.default.func,
-    getSuggestionValue: prop_types_1.default.func,
-    dropup: prop_types_1.default.bool,
-    pullRight: prop_types_1.default.bool,
-    autoDropDirection: prop_types_1.default.bool,
-    className: prop_types_1.default.string,
-    dropdownClassName: prop_types_1.default.string,
-    isLoading: prop_types_1.default.bool,
-    openOnFocus: prop_types_1.default.bool,
-    closeOnSelect: prop_types_1.default.bool,
-    showSelectedItemsInInput: prop_types_1.default.bool,
-    autoComplete: prop_types_1.default.string,
-    noItemMessage: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    inputProps: prop_types_1.default.shape({
-        disabled: prop_types_1.default.bool,
-        onChange: prop_types_1.default.func,
-        onClear: prop_types_1.default.func,
-        onFocus: prop_types_1.default.func,
-        onBlur: prop_types_1.default.func,
-        className: prop_types_1.default.string,
-        placeholder: prop_types_1.default.string,
-        icon: prop_types_1.default.string,
-        value: prop_types_1.default.string,
-        hasError: prop_types_1.default.bool,
-        tabIndex: prop_types_1.default.number,
-        inputRef: prop_types_1.default.func,
-    }).isRequired,
-    leadingInputAddons: prop_types_1.default.oneOfType([prop_types_1.default.node]),
-    trailingInputAddons: prop_types_1.default.oneOfType([prop_types_1.default.node]),
-};
-exports.default = (0, react_onclickoutside_1.default)(AutoSuggest);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoSuggest = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const ClearableInput_1 = tslib_1.__importDefault(require("../clearableInput/ClearableInput"));
+const scrollItemIntoView_1 = require("../../utils/scrollItemIntoView");
+const useDropDirection_1 = require("../../utils/useDropDirection");
+const DropdownHeader_1 = tslib_1.__importDefault(require("../selects/DropdownHeader"));
+const MenuItem_1 = tslib_1.__importDefault(require("../menuItems/MenuItem"));
+const useClickOutside_1 = tslib_1.__importDefault(require("../../hooks/useClickOutside"));
+const AutoSuggestAddons_1 = tslib_1.__importDefault(require("./AutoSuggestAddons"));
+const DropdownSpinner_1 = tslib_1.__importDefault(require("./DropdownSpinner"));
+const NoItemMessage_1 = tslib_1.__importDefault(require("./NoItemMessage"));
+const AutoSuggest = (props) => {
+    const { onSuggestionSelected = noop_1.default, onSuggestionsFetchRequested = noop_1.default, onSuggestionHighlighted = noop_1.default, 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_1.default,
+        onClear: noop_1.default,
+        onBlur: noop_1.default,
+        onFocus: noop_1.default,
+        placeholder: 'Start typing ...',
+        hasError: false,
+        tabIndex: 0,
+        value: undefined,
+        icon: undefined,
+    }, leadingInputAddons, trailingInputAddons, noItemMessage, dropdownClassName = '', className = '' } = props, remainingProps = tslib_1.__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] = (0, react_1.useState)(false);
+    const [value, setValue] = (0, react_1.useState)(inputProps.value || '');
+    const [highlightedItemIndex, setHighlightedItemIndex] = (0, react_1.useState)(-1);
+    const [direction, setDirection] = (0, react_1.useState)(scrollItemIntoView_1.DOWN);
+    const componentRef = (0, useClickOutside_1.default)(() => closeMenu());
+    const dropdownMenuRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const optionNodesRef = (0, react_1.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 (!(0, isNil_1.default)(externalValue) && value !== externalValue) {
+        setValue(externalValue !== null && externalValue !== void 0 ? externalValue : '');
+    }
+    // Fetch suggestions on mounting the component by using the external
+    // fetch callback
+    (0, react_1.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
+    (0, react_1.useEffect)(() => {
+        (0, scrollItemIntoView_1.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.
+    (0, react_1.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 = (0, useDropDirection_1.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(scrollItemIntoView_1.DOWN);
+                }
+                return;
+            }
+            case 'ArrowUp':
+                // select above on arrow up key
+                if (isOpen && highlightedItemIndex > 0) {
+                    const newHighlightedIndex = highlightedItemIndex - 1;
+                    setHighlightedItemIndex(newHighlightedIndex);
+                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));
+                    setDirection(scrollItemIntoView_1.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 = tslib_1.__rest(inputProps, ["icon", "value"]);
+        const clearableProps = Object.assign(Object.assign({}, remainingInputProps), { onClick: () => openMenu });
+        const input = ((0, jsx_runtime_1.jsx)(ClearableInput_1.default, Object.assign({}, clearableProps, { ref: inputRef, autoComplete: autoComplete, onChange: handleInputChange, onClear: clearInputValue, onFocus: handleFocus, value: showSelectedItemsInInput ? value : '' })));
+        if (icon || leadingInputAddons || trailingInputAddons) {
+            return ((0, jsx_runtime_1.jsx)(AutoSuggestAddons_1.default, Object.assign({ icon: icon, leadingInputAddons: leadingInputAddons, trailingInputAddons: trailingInputAddons }, { children: input })));
+        }
+        return input;
+    };
+    const renderDropdownMenu = () => {
+        const dropdownMenuClasses = (0, classnames_1.default)('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);
+        if (isLoading) {
+            return (0, jsx_runtime_1.jsx)(DropdownSpinner_1.default, { className: dropdownMenuClasses });
+        }
+        const hasNoSuggestions = (0, isEmpty_1.default)(suggestions);
+        if (hasNoSuggestions && !noItemMessage) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ role: 'menu', className: dropdownMenuClasses, ref: dropdownMenuRef }, { children: [hasNoSuggestions && noItemMessage && (0, jsx_runtime_1.jsx)(NoItemMessage_1.default, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
+                    if (suggestion.header) {
+                        return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { label: suggestion.label }, suggestion.label);
+                    }
+                    return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { 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 = (0, classnames_1.default)('AutoSuggest', 'dropdown', isOpen && 'open', dropDirection.dropup && 'dropup', className);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, onKeyDown: handleKeyDown, ref: componentRef }, { children: [renderInput(), renderDropdownMenu()] })));
+};
+exports.AutoSuggest = AutoSuggest;
+exports.default = exports.AutoSuggest;

package/lib/es/components/autosuggest/AutoSuggestAddons.d.ts

@@ -0,0 +1,8 @@
+import React, { type PropsWithChildren } from 'react';
+export type AutoSuggestAddonsProps = {
+    icon?: string;
+    leadingInputAddons?: React.ReactNode[];
+    trailingInputAddons?: React.ReactNode[];
+};
+declare const AutoSuggestAddons: ({ icon, leadingInputAddons, trailingInputAddons, children, }: PropsWithChildren<AutoSuggestAddonsProps>) => import("react/jsx-runtime").JSX.Element;
+export default AutoSuggestAddons;

package/lib/es/components/autosuggest/AutoSuggestAddons.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const AutoSuggestAddons = ({ icon, leadingInputAddons, trailingInputAddons, children, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group width-100pct' }, { children: [leadingInputAddons && leadingInputAddons, icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true' }) }))), children, trailingInputAddons && trailingInputAddons] })));
+};
+exports.default = AutoSuggestAddons;

package/lib/es/components/autosuggest/DropdownSpinner.d.ts

@@ -0,0 +1,4 @@
+declare const DropdownSpinner: ({ className }: {
+    className: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DropdownSpinner;

package/lib/es/components/autosuggest/DropdownSpinner.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+const Spinner_1 = tslib_1.__importDefault(require("../spinner/Spinner"));
+const DropdownSpinner = ({ className }) => ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: className }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'display-flex justify-content-center padding-10' }, { children: (0, jsx_runtime_1.jsx)(Spinner_1.default, {}) })) })));
+exports.default = DropdownSpinner;

package/lib/es/components/autosuggest/NoItemMessage.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const NoItemMessage: ({ message }: {
+    message: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default NoItemMessage;

package/lib/es/components/autosuggest/NoItemMessage.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const NoItemMessage = ({ message }) => ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: 'no-item-message disabled pointer-events-none' }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ role: 'button', href: 'any' }, { children: (0, jsx_runtime_1.jsx)("i", { children: message }) })) })));
+exports.default = NoItemMessage;