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

package/lib/es/components/applicationHeader/MobileHeaderModal.d.ts

@@ -6,5 +6,5 @@ export type MobileHeaderModalProps = {
     onClose?: () => void;
     className?: string;
 };
-declare const MobileHeaderModal: (props: PropsWithChildren<MobileHeaderModalProps>) => JSX.Element;
+declare const MobileHeaderModal: (props: PropsWithChildren<MobileHeaderModalProps>) => import("react/jsx-runtime").JSX.Element;
 export default MobileHeaderModal;

package/lib/es/components/applicationHeader/MobileSubmoduleNavigation.d.ts

@@ -5,5 +5,5 @@ export type MobileSubmoduleNavigationProps = {
     navItems?: ModulePropType[];
     className?: string;
 };
-declare const MobileSubmoduleNavigation: (props: MobileSubmoduleNavigationProps) => JSX.Element;
+declare const MobileSubmoduleNavigation: (props: MobileSubmoduleNavigationProps) => import("react/jsx-runtime").JSX.Element;
 export default MobileSubmoduleNavigation;

package/lib/es/components/applicationHeader/NavItems.d.ts

@@ -5,5 +5,5 @@ export type NavItemsProps = {
     containerWidth: number;
     actionBarItems?: React.ReactNode[];
 };
-export declare const NavItems: (props: NavItemsProps) => JSX.Element;
+export declare const NavItems: (props: NavItemsProps) => import("react/jsx-runtime").JSX.Element;
 export default NavItems;

package/lib/es/components/applicationLayout/ApplicationLayout.d.ts

@@ -3,8 +3,14 @@ import ApplicationLayoutHeader from './ApplicationLayoutHeader';
 import ApplicationLayoutSidebar from './ApplicationLayoutSidebar';
 import ApplicationLayoutBody from './ApplicationLayoutBody';
 export type ApplicationLayoutProps = {
-    className?: string;
+    /**
+     * A React ref function assigned to the wrapper element.
+     */
     layoutRef?: MutableRefObject<HTMLDivElement>;
+    /**
+     * Additional class names that are added to the respective component
+     */
+    className?: string;
 };
 type Props = PropsWithChildren<ApplicationLayoutProps>;
 type ApplicationLayoutType = ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>> & {

package/lib/es/components/applicationLayout/ApplicationLayoutBody.d.ts

@@ -1,13 +1,40 @@
 import React from 'react';
 export type ApplicationLayoutBodyProps = {
-    className?: string;
-    innerClassName?: string;
+    /**
+     * Show scroll to top button after scrolling the content.
+     * @default true
+     */
     enableScrollToTop?: boolean;
+    /**
+     * Always show vertical scrollbar to prevent the content from jumping.
+     * @default false
+     */
     forceScrollbar?: boolean;
+    /**
+     * The ApplicationLayoutBodyBanner component.
+     */
     banner?: React.ReactNode;
+    /**
+     * The `ApplicationLayoutBodyNavigation` component.
+     */
     navigation?: React.ReactNode;
+    /**
+     * Optional bottom bar component or a simple string.
+     */
     bottomBar?: React.ReactNode;
+    /**
+     * Height of the bottomBar in pixel.
+     * @default 54
+     */
     bottomBarHeight?: number;
+    /**
+     * Additional class names that are added to the inner module-content component.
+     */
+    innerClassName?: string;
+    /**
+     * Additional class names that are added to the respective component.
+     */
+    className?: string;
 };
 declare const ApplicationLayoutBody: React.ForwardRefExoticComponent<ApplicationLayoutBodyProps & {
     children?: React.ReactNode;

package/lib/es/components/applicationLayout/ApplicationLayoutBodyBanner.d.ts

@@ -1,8 +1,23 @@
 import React from 'react';
 export type ApplicationLayoutBodyBannerProps = {
+    /**
+     * One of the `text-color` utility classes.
+     * @default `text-color-white`
+     */
     textColor?: string;
+    /**
+     * One of the `bg-color` utility classes.
+     * @default `bg-primary`
+     */
     backgroundColor?: string;
+    /**
+     * Allows sticky banner while scrolling.
+     * @default false
+     */
     isSticky?: boolean;
+    /**
+     * Additional class names that are added to the respective component.
+     */
     className?: string;
 };
 declare const ApplicationLayoutBodyBanner: React.ForwardRefExoticComponent<ApplicationLayoutBodyBannerProps & {

package/lib/es/components/applicationLayout/ApplicationLayoutBodyBottomBar.d.ts

@@ -2,8 +2,23 @@ import { type PropsWithChildren, type ForwardRefExoticComponent, type RefAttribu
 type ButtonAlignmentLeft = 'left';
 type ButtonAlignmentRight = 'right';
 export type ApplicationLayoutBodyBottomBarProps = {
+    /**
+     * Additional class names that are added to the respective component
+     */
     className?: string;
+    /**
+     * Use same paddings (left and right) as the ApplicationLayoutBody.
+     * @default false
+     */
     useBodyPaddings?: boolean;
+    /**
+     * Tells the buttons if they are left or right aligned.
+     * Default behavior is: 1st button left and 2nd button right.
+     *
+     * Possible values are:
+     * `ApplicationLayoutBodyBottomBar.LEFT`, `ApplicationLayoutBodyBottomBar.RIGHT` or
+     * `left`, `right`
+     */
     buttonAlignment?: ButtonAlignmentLeft | ButtonAlignmentRight;
 };
 type Props = PropsWithChildren<ApplicationLayoutBodyBottomBarProps>;

package/lib/es/components/applicationLayout/ApplicationLayoutBodyNavigation.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 export type ApplicationLayoutBodyNavigationProps = {
+    /**
+     * Additional class names that are added to the respective component. Example: `has-offset`.
+     */
     className?: string;
 };
 declare const ApplicationLayoutBodyNavigation: React.ForwardRefExoticComponent<ApplicationLayoutBodyNavigationProps & {

package/lib/es/components/applicationLayout/ApplicationLayoutHeader.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 export type ApplicationLayoutHeaderProps = {
+    /**
+     * Additional class names that are added to the respective component.
+     */
     className?: string;
 };
 declare const ApplicationLayoutHeader: React.ForwardRefExoticComponent<ApplicationLayoutHeaderProps & {

package/lib/es/components/applicationLayout/ApplicationLayoutSidebar.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 export type ApplicationLayoutSidebarProps = {
+    /**
+     * Additional class names that are added to the respective component
+     */
     className?: string;
 };
 declare const ApplicationLayoutSidebar: React.ForwardRefExoticComponent<ApplicationLayoutSidebarProps & {

package/lib/es/components/aspectRatioPlaceholder/AspectRatioPlaceholder.d.ts

@@ -1,8 +1,11 @@
 import { type PropsWithChildren } from 'react';
 export type AspectRatioPlaceholderProps = {
+    /** Defines the aspect ratio width. @default 16 */
     height?: number;
+    /** Defines the aspect ratio height. @default 9 */
     width?: number;
+    /** Additional class names that are added to the wrapping element. */
     className?: string;
 };
-declare const AspectRatioPlaceholder: (props: AspectRatioPlaceholderProps & PropsWithChildren) => JSX.Element;
+declare const AspectRatioPlaceholder: (props: AspectRatioPlaceholderProps & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export default AspectRatioPlaceholder;

package/lib/es/components/assetTree/Tree.js

@@ -41,8 +41,7 @@ const SEARCH_DEBOUNCE = 100;
 const otherwise = stubTrue_1.default;
 const notEqual = (0, negate_1.default)(isEqual_1.default);
 const notEmpty = (0, negate_1.default)(isEmpty_1.default);
-const Divider = () => ((0, jsx_runtime_1.jsx)("div", { className: 'TreeSelectAllDivider bg-light width-2 height-15 ' +
-        'margin-top-2 margin-bottom-0 margin-left-10 margin-right-10' }));
+const Divider = () => (0, jsx_runtime_1.jsx)("div", { className: 'TreeSelectDivider bg-light padding-left-1 height-10 margin-top-2 margin-x-10' });
 const isNameObject = item => (0, isObject_1.default)(item.name);
 const getFullName = item => `${item.name.firstName} ${item.name.lastName}`;
 const getName = item => (isNameObject(item) ? getFullName(item) : item.name);

package/lib/es/components/assetTree/TreeLeafList.d.ts

@@ -1,5 +1,5 @@
 export default TreeLeafList;
-declare function TreeLeafList(props: any): JSX.Element[];
+declare function TreeLeafList(props: any): import("react/jsx-runtime").JSX.Element[];
 declare namespace TreeLeafList {
     const displayName: string;
     namespace propTypes {

package/lib/es/components/assetTree/TreeNodeContainer.d.ts

@@ -3,7 +3,7 @@ declare function TreeNodeContainer({ isOpen, groupId, children }: {
     isOpen: any;
     groupId: any;
     children: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare namespace TreeNodeContainer {
     const displayName: string;
     namespace propTypes {

package/lib/es/components/assetTree/TreeNothingFound.d.ts

@@ -1,3 +1,3 @@
 export default TreeNothingFound;
-declare const TreeNothingFound: React.MemoExoticComponent<() => JSX.Element>;
+declare const TreeNothingFound: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
 import React from "react";

package/lib/es/components/assetTree/TreeOption.d.ts

@@ -1,5 +1,5 @@
 export default TreeOption;
-declare function TreeOption(props: any): JSX.Element;
+declare function TreeOption(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace TreeOption {
     const displayName: string;
     namespace defaultProps {

package/lib/es/components/assetTree/TreeOption.js

@@ -8,8 +8,8 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Switch_1 = tslib_1.__importDefault(require("../switch/Switch"));
 const TreeOption = props => {
     const { isChecked, className, label, onChange } = props, remainingProps = tslib_1.__rest(props, ["isChecked", "className", "label", "onChange"]);
-    const optionClasses = (0, classnames_1.default)('TreeOption', 'display-flex', 'justify-content-start', 'cursor-pointer', className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: optionClasses, onClick: onChange }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'pointer-events-none scale-80' }, { children: (0, jsx_runtime_1.jsx)(Switch_1.default, { keyName: 'TreeOption-switch', checked: isChecked }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-left-5 padding-top-2' }, { children: label }))] })));
+    const optionClasses = (0, classnames_1.default)('TreeOption', 'display-flex', 'justify-content-start', 'align-items-center', 'gap-10', 'cursor-pointer', className);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: optionClasses, onClick: onChange }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'flex-1-1' }, { children: label })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'pointer-events-none scale-80' }, { children: (0, jsx_runtime_1.jsx)(Switch_1.default, { keyName: 'TreeOption-switch', checked: isChecked }) }))] })));
 };
 TreeOption.displayName = 'TreeOption';
 TreeOption.defaultProps = {

package/lib/es/components/assetTree/TreeOptions.d.ts

@@ -1,5 +1,5 @@
 export default TreeOptions;
-declare function TreeOptions(props: any): JSX.Element | null;
+declare function TreeOptions(props: any): import("react/jsx-runtime").JSX.Element | null;
 declare namespace TreeOptions {
     const displayName: string;
     namespace defaultProps {

package/lib/es/components/assetTree/TreeOptions.js

@@ -5,14 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const ButtonDropdown_1 = tslib_1.__importDefault(require("../dropdown/ButtonDropdown"));
 const lodash_1 = require("lodash");
+const ButtonDropdown_1 = tslib_1.__importDefault(require("../dropdown/ButtonDropdown"));
 const TreeOptions = props => {
     const { treeOptions, className } = props;
     if ((0, lodash_1.isEmpty)(treeOptions)) {
         return null;
     }
-    const dropdownClasses = (0, classnames_1.default)('width-250', 'padding-10', className);
+    const dropdownClasses = (0, classnames_1.default)('display-flex flex-column gap-10', 'width-250', 'padding-15', className);
     const customDropdown = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: dropdownClasses }, { children: treeOptions }));
     return ((0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { title: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-option-vertical', "aria-hidden": 'true' }), bsStyle: 'muted', customDropdown: customDropdown, className: 'TreeHeaderOptions', pullRight: true, iconOnly: true }));
 };

package/lib/es/components/assetTree/TreeRoot.d.ts

@@ -2,7 +2,7 @@ export default TreeRoot;
 declare function TreeRoot({ maxHeight, children }: {
     maxHeight: any;
     children: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare namespace TreeRoot {
     const displayName: string;
     namespace propTypes {

package/lib/es/components/assetTree/TreeSelectAll.d.ts

@@ -1,5 +1,5 @@
 export default TreeSelectAll;
-declare function TreeSelectAll(props: any): JSX.Element | null;
+declare function TreeSelectAll(props: any): import("react/jsx-runtime").JSX.Element | null;
 declare namespace TreeSelectAll {
     const displayName: string;
     namespace defaultProps {

package/lib/es/components/assetTree/TreeSummary.js

@@ -12,7 +12,7 @@ const DefaultAssetCounts = ({ assetCounts }) => {
 };
 const TreeSummary = react_1.default.memo(props => {
     const { className, assetCounts, children } = props;
-    const classes = (0, classnames_1.default)('TreeSummary', 'display-flex', 'align-items-center', className);
+    const classes = (0, classnames_1.default)('TreeSummary', 'display-flex', 'flex-wrap', 'align-items-center', 'column-gap-15', 'row-gap-5', className);
     return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes }, { children: children || (0, jsx_runtime_1.jsx)(DefaultAssetCounts, { assetCounts: assetCounts }) }));
 });
 TreeSummary.displayName = 'TreeSummary';

package/lib/es/components/assetTree/TypeCounter.js

@@ -7,13 +7,13 @@ const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const TypeCounter = (0, react_1.forwardRef)((props, ref) => {
     const { icon, value, isActive, hasFilter, enableActivity, onClick, type, hideOnZero } = props, remainingProps = tslib_1.__rest(props, ["icon", "value", "isActive", "hasFilter", "enableActivity", "onClick", "type", "hideOnZero"]);
-    const wrapperClassName = (0, classnames_1.default)('TypeCounter', 'display-flex align-items-center', 'user-select-none margin-right-15', enableActivity ? 'cursor-pointer' : 'pointer-events-none', enableActivity && hasFilter && !isActive && 'opacity-50');
+    const wrapperClassName = (0, classnames_1.default)('TypeCounter', 'display-flex align-items-center', 'user-select-none', enableActivity ? 'cursor-pointer' : 'pointer-events-none', enableActivity && hasFilter && !isActive && 'opacity-50');
     const counterClassNames = (0, classnames_1.default)('TreeLabelCount', 'label label-condensed', isActive ? 'label-primary' : 'label-muted label-filled');
     const handleClick = () => onClick(type);
     if (hideOnZero && !value) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref }, remainingProps, { className: wrapperClassName, onClick: handleClick }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${icon} text-size-16 margin-right-2` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: counterClassNames }, { children: value || 0 }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref }, remainingProps, { className: wrapperClassName, onClick: handleClick }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${icon} text-size-16 margin-right-2 margin-left--4` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: counterClassNames }, { children: value || 0 }))] })));
 });
 TypeCounter.defaultProps = {
     hideOnZero: false,

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

@@ -1,115 +1,200 @@
-export class AutoSuggest extends React.Component<any, any, any> {
-    constructor(props: any);
-    state: {
-        open: boolean;
-        value: any;
-        dropup: any;
-        pullRight: any;
-        highlightedItemIndex: number;
-    };
-    openMenu(): void;
-    closeMenu(): void;
-    setInputValue(newValue: any, event?: {}, shouldCloseMenu?: boolean): void;
-    clearInputValue(event: any): void;
-    handleKeyDown(event: any): void;
-    handleInputChange(value: any, event: any): void;
-    handleFocus(event: any): void;
-    onMouseEnter(event: any): void;
-    UNSAFE_componentWillMount(): void;
-    componentDidUpdate(prevProps: any, prevState: any): void;
-    getHighlightedSuggestion(): any;
-    handleClickOutside(): void;
-    isAutoDropActive(): boolean;
-    getDropdownDOMNode(): Element | Text | null;
-    getOptionNodes(): any;
-    getFocusedOptionNode(): any;
-    getInputNode(): HTMLInputElement;
-    onSuggestionClicked(event: any, suggestion: any): void;
-    wrapAddons(iconClass: any, leadingInputAddons: any, child: any, trailingInputAddons: any): JSX.Element;
-    renderInput(): JSX.Element;
-    renderLoadingIndicator(dropdownMenuClasses: any): JSX.Element;
-    renderDropdownMenu(): JSX.Element | null;
-    refDropdownMenu: HTMLUListElement | null | undefined;
-    render(): JSX.Element;
-    refComponent: HTMLDivElement | null | undefined;
-}
-export namespace AutoSuggest {
-    namespace defaultProps {
-        function onSuggestionSelected(): void;
-        function onSuggestionsFetchRequested(): void;
-        function renderSuggestion(suggestion: any): any;
-        function getSuggestionValue(suggestion: any): any;
-        const suggestions: never[];
-        const autoDropDirection: boolean;
-        const pullRight: boolean;
-        const dropup: boolean;
-        const isLoading: boolean;
-        const openOnFocus: boolean;
-        const closeOnSelect: boolean;
-        const showSelectedItemsInInput: boolean;
-        const autoComplete: string;
-        namespace inputProps {
-            const disabled: boolean;
-            function onChange(): void;
-            function onClear(): void;
-            function onBlur(): void;
-            function onFocus(): void;
-            const placeholder: string;
-            const hasError: boolean;
-            const tabIndex: number;
-        }
-    }
-    namespace propTypes {
-        const onSuggestionSelected_1: PropTypes.Validator<(...args: any[]) => any>;
-        export { onSuggestionSelected_1 as onSuggestionSelected };
-        const onSuggestionsFetchRequested_1: PropTypes.Validator<(...args: any[]) => any>;
-        export { onSuggestionsFetchRequested_1 as onSuggestionsFetchRequested };
-        export const onSuggestionHighlighted: PropTypes.Requireable<(...args: any[]) => any>;
-        const suggestions_1: PropTypes.Validator<any[]>;
-        export { suggestions_1 as suggestions };
-        const renderSuggestion_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { renderSuggestion_1 as renderSuggestion };
-        const getSuggestionValue_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { getSuggestionValue_1 as getSuggestionValue };
-        const dropup_1: PropTypes.Requireable<boolean>;
-        export { dropup_1 as dropup };
-        const pullRight_1: PropTypes.Requireable<boolean>;
-        export { pullRight_1 as pullRight };
-        const autoDropDirection_1: PropTypes.Requireable<boolean>;
-        export { autoDropDirection_1 as autoDropDirection };
-        export const className: PropTypes.Requireable<string>;
-        export const dropdownClassName: PropTypes.Requireable<string>;
-        const isLoading_1: PropTypes.Requireable<boolean>;
-        export { isLoading_1 as isLoading };
-        const openOnFocus_1: PropTypes.Requireable<boolean>;
-        export { openOnFocus_1 as openOnFocus };
-        const closeOnSelect_1: PropTypes.Requireable<boolean>;
-        export { closeOnSelect_1 as closeOnSelect };
-        const showSelectedItemsInInput_1: PropTypes.Requireable<boolean>;
-        export { showSelectedItemsInInput_1 as showSelectedItemsInInput };
-        const autoComplete_1: PropTypes.Requireable<string>;
-        export { autoComplete_1 as autoComplete };
-        export const noItemMessage: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const inputProps_1: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
-            disabled: PropTypes.Requireable<boolean>;
-            onChange: PropTypes.Requireable<(...args: any[]) => any>;
-            onClear: PropTypes.Requireable<(...args: any[]) => any>;
-            onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-            onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-            className: PropTypes.Requireable<string>;
-            placeholder: PropTypes.Requireable<string>;
-            icon: PropTypes.Requireable<string>;
-            value: PropTypes.Requireable<string>;
-            hasError: PropTypes.Requireable<boolean>;
-            tabIndex: PropTypes.Requireable<number>;
-            inputRef: PropTypes.Requireable<(...args: any[]) => any>;
-        }>>>;
-        export { inputProps_1 as inputProps };
-        export const leadingInputAddons: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const trailingInputAddons: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    }
-}
-declare const _default: any;
-export default _default;
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+export type AutoSuggestSuggestion = {
+    label: string;
+    disabled?: boolean;
+    [name: string]: string | React.ReactNode;
+};
+export type SelectedSuggestion = {
+    highlightedItemIndex: -1;
+    suggestionValue: string | React.ReactElement;
+    suggestion: AutoSuggestSuggestion;
+};
+export type AutoSuggestInputProps = {
+    /**
+     * The value to be set for the input. Using this prop the input can be controlled from the outside.
+     */
+    value?: string;
+    /**
+     * String that will be displayed inside the input when nothing is typed in.
+     * @default `Start typing ...`
+     */
+    placeholder?: string | React.ReactNode;
+    /**
+     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group
+     * and the icon will be set in an input-addon. Example: `rioglyph-search`.
+     */
+    icon?: string;
+    /**
+     * Callback function which will be called when the input changes. __This is usually not needed__ as
+     * the "onSuggestionsFetchRequested" callback takes care of any input change. It is listed here
+     * for completeness and for certain edge cases.
+     *
+     * __Note:__ It might be removed in the future when not needed.'
+     * @deprecated please use `onSuggestionsFetchRequested` instead
+     * @param changeEvent
+     * @param changeProps
+     * @returns
+     */
+    onChange?: (changeEvent: React.SyntheticEvent, changeProps: {
+        newValue: string;
+    }) => void;
+    /**
+     * Callback function which gets triggered when the input gaines focus.
+     */
+    onFocus?: VoidFunction;
+    /**
+     * Callback function which gets triggered when the input looses the focus.
+     */
+    onBlur?: VoidFunction;
+    /**
+     * Callback function which will be called when the input is cleared. __This is usually not needed__ as
+     * the "onSuggestionsFetchRequested" callback takes care of any input change. It is listed here
+     * for completeness and for certain edge cases.
+     *
+     * __Note:__ It might be removed in the future when not needed.
+     */
+    onClear?: VoidFunction;
+    /**
+     * Boolean value that adds the class `has-error` to the input
+     * component. Use this for validation use cases. The Autosuggest component
+     * should be wrapped in a `form-group` element with the class `has-feedback`.
+     * @default false
+     */
+    hasError?: boolean;
+    /**
+     * Defines the tab index to be added to the input element.
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Boolean value that disabled the input component.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The React ref for the underlying input.
+     */
+    inputRef?: React.MutableRefObject<HTMLInputElement>;
+    /**
+     * Additional class names that are added to the input component.
+     */
+    className?: string;
+};
+export type AutoSuggestProps = {
+    /**
+     * Object to define properties for the input component. For the input, the ClearableInput
+     * component is used.
+     */
+    inputProps?: AutoSuggestInputProps;
+    /**
+     * Array of items which will be displayed. Items can be arbitrary objects as long as they
+     * have a label defined.
+     */
+    suggestions?: AutoSuggestSuggestion[];
+    /**
+     * Text that will be shown when there is not match found. If nothing is defined the dropdown-menu
+     * will not be rendered.
+     */
+    noItemMessage?: string | React.ReactNode;
+    /**
+     * Callback function which will be called every time you need to recalculate suggestions e.i.
+     * when the filter is updates after each input. It will also be called when the input is
+     * cleared. The value would be an empty string in this case.
+     * @param result
+     * @returns
+     */
+    onSuggestionsFetchRequested?: (result: {
+        value: string;
+    }) => void;
+    /**
+     * Callback function which will be called when a suggestion is selected from the dropdown menu.
+     * @param event
+     * @param selectedSuggestion
+     * @returns
+     */
+    onSuggestionSelected?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>, selectedSuggestion: SelectedSuggestion) => void;
+    /**
+     * Callback function which will be called every time the highlighted selection changes.
+     * @param suggestion
+     * @returns
+     */
+    onSuggestionHighlighted?: (suggestion: AutoSuggestSuggestion | null) => void;
+    /**
+     * Function that returns a string which will be displayed inside the input.
+     * This is required when a custom render function for suggestions is provided.
+     * Overwrite this function to provide the value to be used for a suggestion.
+     * Default implementation is: `suggestion => suggestion.label`
+     *
+     * @param suggestion
+     * @returns
+     */
+    getSuggestionValue?: (suggestion: AutoSuggestSuggestion) => string;
+    /**
+     * Function that defines how suggestions are rendered on the dropdown-menu.
+     * Use this to customize the appearance for instance when you want to show an icon
+     * for a suggestion.
+     * Default implementation is: `suggestion => suggestion.label`
+     *
+     * @param suggestion
+     * @returns
+     */
+    renderSuggestion?: (suggestion: AutoSuggestSuggestion) => React.ReactNode;
+    /**
+     * Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle.
+     * @default false
+     */
+    dropup?: boolean;
+    /**
+     * Defines whether the dropdown opens right aligned or not.
+     * Set to true additionally disables autoDrop feature.
+     * @default false
+     */
+    pullRight?: boolean;
+    /**
+     * Boolean that enables autoDrop feature.
+     * @default true
+     */
+    autoDropDirection?: boolean;
+    /**
+     * Shows a loading spinner instead of the items if set to true.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Boolean that enables opening the dropdown menu when gaining focus.
+     * @default false
+     */
+    openOnFocus?: boolean;
+    /**
+     * Boolean that enables the selection of an item to close the dropdown or not.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Defines whether or not a selected item is shown in the input after it was selected.
+     * @default true
+     */
+    showSelectedItemsInInput?: boolean;
+    /**
+     * Sets autocomplete value for autosuggest forms.
+     */
+    autoComplete?: string;
+    /**
+     * Adds a list of input-addons elements in front of the input.
+     */
+    leadingInputAddons?: React.ReactNode[];
+    /**
+     * Adds a list of input-addons elements after the input.
+     */
+    trailingInputAddons?: React.ReactNode[];
+    /**
+     * Additional class names that are added to the dropdown element.
+     */
+    dropdownClassName?: string;
+    /**
+     * Additional class names that are added to the wrapping element.
+     */
+    className?: string;
+};
+export declare const AutoSuggest: (props: AutoSuggestProps) => import("react/jsx-runtime").JSX.Element;
+export default AutoSuggest;