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

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

@@ -3,320 +3,206 @@ 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 react_1 = require("react");
 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 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 Spinner_1 = tslib_1.__importDefault(require("../spinner/Spinner"));
 const scrollItemIntoView_1 = require("../../utils/scrollItemIntoView");
-const getDropDirection_1 = tslib_1.__importDefault(require("../../utils/getDropDirection"));
+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 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);
+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;
         }
-        this.setState(Object.assign({ open: true }, dropDirection));
-    }
-    closeMenu() {
-        this.setState({
-            open: false,
-        });
-    }
-    handleClickOutside() {
-        this.closeMenu();
-    }
-    handleFocus(event) {
-        const { openOnFocus, inputProps } = this.props;
+        setIsOpen(true);
+    };
+    const closeMenu = () => {
+        setIsOpen(false);
+    };
+    const handleFocus = (event) => {
         if (openOnFocus) {
-            this.openMenu();
+            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:
+    };
+    const handleKeyDown = (event) => {
+        switch (event.key) {
+            case 'ArrowDown': {
                 // 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());
-                    });
+                const newHighlightedIndex = highlightedItemIndex + 1;
+                if (isOpen && suggestions.length > newHighlightedIndex) {
+                    setHighlightedItemIndex(newHighlightedIndex);
+                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));
+                    setDirection(scrollItemIntoView_1.DOWN);
                 }
                 return;
-            case 38:
+            }
+            case 'ArrowUp':
                 // 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());
-                    });
+                if (isOpen && highlightedItemIndex > 0) {
+                    const newHighlightedIndex = highlightedItemIndex - 1;
+                    setHighlightedItemIndex(newHighlightedIndex);
+                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));
+                    setDirection(scrollItemIntoView_1.UP);
                 }
                 return;
-            case 13:
+            case 'Enter':
                 // select on enter
-                if (this.state.open && suggestions[highlightedItemIndex]) {
-                    this.onSuggestionClicked(event, suggestions[highlightedItemIndex]);
+                if (isOpen && suggestions[highlightedItemIndex]) {
+                    onSuggestionClicked(event, suggestions[highlightedItemIndex]);
                 }
                 else {
-                    this.openMenu(event);
+                    openMenu();
                 }
                 break;
-            case 27:
+            case 'Escape':
+            case 'Tab':
                 // close on esc key or on tab
-                this.closeMenu();
-                break;
-            case 9:
-                // close on tab
-                this.closeMenu();
+                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);
+    };
+    const getFocusedOptionNode = () => {
+        return [...optionNodesRef.current].find((item) => item.className.includes('active'));
+    };
+    const handleInputChange = (newValue, event) => {
+        if (value !== newValue) {
+            updateInputValue(newValue, 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,
-        });
+    };
+    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
-        this.props.onSuggestionsFetchRequested({ value: newValue });
-        const { value, onChange = () => { } } = this.props.inputProps;
-        if (newValue !== value) {
+        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 });
         }
-    }
-    getInputNode() {
-        return this.refComponent.getElementsByTagName('input')[0];
-    }
-    clearInputValue(event) {
-        this.setState({
-            value: '',
-            highlightedItemIndex: -1,
-        });
+    };
+    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
-        const node = this.getInputNode();
-        if (node) {
-            react_dom_1.default.findDOMNode(node).focus();
+        if (inputRef.current) {
+            inputRef.current.focus();
         }
         // Reset filter value so all suggestions are shown again
-        this.props.onSuggestionsFetchRequested({ value: '' });
+        onSuggestionsFetchRequested({ value: '' });
+        handleHighlightedSuggestionChanged(-1);
         // Additionally, fire the onClear callback as the service may react on it
-        if (this.props.inputProps.onClear) {
-            this.props.inputProps.onClear(event);
+        if (inputProps.onClear) {
+            inputProps.onClear(event);
         }
-    }
-    onSuggestionClicked(event, suggestion) {
-        this.setInputValue(this.props.getSuggestionValue(suggestion), event, this.props.closeOnSelect);
+    };
+    const onSuggestionClicked = (event, suggestion) => {
+        updateInputValue(getSuggestionValue(suggestion), event, closeOnSelect);
         // fire callback with the selected item
-        this.props.onSuggestionSelected(event, {
+        onSuggestionSelected(event, {
             suggestion,
-            suggestionValue: this.props.getSuggestionValue(suggestion),
+            suggestionValue: getSuggestionValue(suggestion),
             highlightedItemIndex: -1,
         });
-    }
-    onMouseEnter(event) {
+    };
+    const onMouseEnter = (event) => {
         const newIndex = event.currentTarget.getAttribute('data-item-index');
         if (newIndex) {
-            this.setState(() => ({
-                highlightedItemIndex: newIndex,
-            }));
+            setHighlightedItemIndex(Number(newIndex));
+            handleHighlightedSuggestionChanged(Number(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 })));
+    };
+    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 this.wrapAddons(icon, leadingInputAddons, input, trailingInputAddons);
+            return ((0, jsx_runtime_1.jsx)(AutoSuggestAddons_1.default, Object.assign({ icon: icon, leadingInputAddons: leadingInputAddons, trailingInputAddons: trailingInputAddons }, { children: input })));
         }
         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);
+    };
+    const renderDropdownMenu = () => {
+        const dropdownMenuClasses = (0, classnames_1.default)('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);
         if (isLoading) {
-            return this.renderLoadingIndicator(dropdownMenuClasses);
+            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: node => (this.refDropdownMenu = node) }, { children: [hasNoSuggestions && noItemMessage && (0, jsx_runtime_1.jsx)(NoItemMessage, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
+        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);
                     }
-                    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);
+                    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}`));
                 })] })));
-    }
-    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]),
+    };
+    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.default = (0, react_onclickoutside_1.default)(AutoSuggest);
+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;

package/lib/es/components/bottomSheet/BottomSheet.d.ts

@@ -1,18 +1,67 @@
 import React, { MutableRefObject, PropsWithChildren, ReactNode } from 'react';
 export type BottomSheetProps = {
+    /**
+     * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.
+     * @default false
+     */
     show: boolean;
+    /**
+     * Callback for when the sheet closes.
+     */
     onClose?: (isShown: boolean) => void;
+    /**
+     * The width of the bottom sheet. This is useful for desktop when not using the entire screen width.
+     * When no width is given it will take the width of the content and maximum `100%` of the screen.
+     * So it this case you might want to apply a `max-width-xxx` via `className` to control it better.
+     */
     width?: number | string;
+    /**
+     * The height of the bottom sheet. If no height is given, the height is automatically
+     * calculated from the content.
+     */
     height?: number | string;
+    /**
+     * The title content shown in the header. If no title is given, the bottom sheet header is not shown.
+     */
     title?: string | ReactNode;
+    /**
+     * Defines whether or not the close button is shown.
+     * @default true
+     */
     showCloseButton?: boolean;
+    /**
+     * Defines whether or not the maximize button in the header is shown.
+     * @default false
+     */
     showMaximizeButton?: boolean;
+    /**
+     * The callback function triggered when the maximize button is clicked and the height changes.
+     */
     onHeightChange?: VoidFunction;
+    /**
+     * Set to `true` to detach the bottom sheet from the left side and the bottom and create a little offset.
+     * @default false
+     */
     detach?: boolean;
+    /**
+     * Defines the amount of pixels for the sheet.
+     * @default 15
+     */
+    detachOffset?: number;
+    /**
+     * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.
+     * @default false
+     */
     useBackdrop?: boolean;
+    /**
+     * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.
+     */
     onBackdropClick?: VoidFunction;
-    bodyRef?: MutableRefObject<HTMLDivElement>;
+    /** A react ref added to the bottom sheet body. */
+    bodyRef?: MutableRefObject<HTMLDivElement | null>;
+    /** Additional classes to be set on the body element. */
     bodyClassName?: string;
+    /** Additional classes to be set on the wrapping element. */
     className?: string;
 };
 declare const BottomSheet: (props: BottomSheetProps & PropsWithChildren) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/lib/es/components/bottomSheet/BottomSheet.js

@@ -5,12 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const framer_motion_1 = require("framer-motion");
 const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
+const framer_motion_1 = require("framer-motion");
 const portalRoot_1 = require("../../utils/portalRoot");
 const OFFSET_POSITION = -1000;
+const DEFAULT_OFFSET_PX = 15;
 const BottomSheet = (props) => {
-    const { show = false, onClose, width, height, title, detach = false, useBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { } } = props, remainingProps = tslib_1.__rest(props, ["show", "onClose", "width", "height", "title", "detach", "useBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children", "onBackdropClick"]);
+    const { show = false, onClose, width, height, title, detach = false, detachOffset = DEFAULT_OFFSET_PX, useBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { } } = props, remainingProps = tslib_1.__rest(props, ["show", "onClose", "width", "height", "title", "detach", "detachOffset", "useBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children", "onBackdropClick"]);
     const [isShown, setIsShown] = (0, react_1.useState)(show);
     const [isMaxHeight, setIsMaxHeight] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => setIsShown(show), [show]);
@@ -33,14 +34,18 @@ const BottomSheet = (props) => {
         setIsMaxHeight(newValue);
         onHeightChange();
     };
-    const sheetClasses = (0, classnames_1.default)('bottom-sheet', 'position-fixed left-0', !width && 'width-100pct', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detach ? 'margin-15 rounded' : 'rounded-top-left rounded-top-right', className && className);
+    const sheetClasses = (0, classnames_1.default)('bottom-sheet', 'position-fixed left-0', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detach ? 'rounded' : 'rounded-top-left rounded-top-right', className && className);
     const sheetBodyClasses = (0, classnames_1.default)('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);
     const sheetHeight = isMaxHeight ? window.innerHeight : height;
     // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.
     // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.
     // That is the reason why there is no "AnimatePresence" with an "exit" animation here.
     // Instead, we change the "animate" values.
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, Object.assign({}, remainingProps, { className: sheetClasses, style: { width }, initial: { opacity: 0 }, animate: {
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, Object.assign({}, remainingProps, { className: sheetClasses, style: {
+                    width,
+                    maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',
+                    margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,
+                }, initial: { opacity: 0 }, animate: {
                     opacity: isShown ? 1 : 0,
                     y: 0,
                     bottom: isShown ? 0 : OFFSET_POSITION,