@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/components/assetTree/useTreeScrollPosition.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTreeScrollPosition = void 0;
+const react_1 = require("react");
+const useTreeScrollPosition = (virtualizer, scrollElementRef) => {
+    const scrollOffsetRef = (0, react_1.useRef)(0);
+    const scrollToTop = (0, react_1.useCallback)(() => {
+        if (scrollElementRef.current) {
+            requestAnimationFrame(() => {
+                // Reset scroll position to top
+                scrollElementRef.current.scrollTop(0);
+                // Also reset the stored scroll offset
+                scrollOffsetRef.current = 0;
+                // Force virtualizer to sync
+                if (virtualizer) {
+                    virtualizer.scrollToOffset(0);
+                }
+            });
+        }
+    }, [scrollElementRef, virtualizer]);
+    return { scrollToTop };
+};
+exports.useTreeScrollPosition = useTreeScrollPosition;

package/lib/es/src/components/assetTree/useTreeVirtualization.d.ts

@@ -0,0 +1,17 @@
+import type { TreeItem, GroupedItem } from './Tree';
+type VirtualizedItem = {
+    type: 'group';
+    data: GroupedItem;
+    id: string;
+    isExpanded: boolean;
+} | {
+    type: 'leaf';
+    data: TreeItem;
+    id: string;
+    groupId: string;
+};
+export declare const useTreeVirtualization: (groupedItems: GroupedItem[], flatItems: TreeItem[], hasSearchValue: boolean, hasGroups: boolean, internalExpandedGroups: string[] | undefined, scrollElementRef: React.RefObject<HTMLDivElement>, overscan: number) => {
+    virtualizedItems: VirtualizedItem[];
+    virtualizer: import("@tanstack/virtual-core").Virtualizer<any, Element>;
+};
+export {};

package/lib/es/src/components/assetTree/useTreeVirtualization.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTreeVirtualization = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const map_1 = tslib_1.__importDefault(require("lodash/fp/map"));
+const react_virtual_1 = require("@tanstack/react-virtual");
+const useTreeVirtualization = (groupedItems, flatItems, hasSearchValue, hasGroups, internalExpandedGroups, scrollElementRef, overscan) => {
+    const virtualizedItems = (0, react_1.useMemo)(() => {
+        // When there's a search value, always show flat items (no groups)
+        if (hasSearchValue) {
+            return flatItems.map((item) => ({
+                type: 'leaf',
+                data: item,
+                id: item.id,
+            }));
+        }
+        // Virtualize grouped list, when there's no search value and we have groups
+        if (hasGroups) {
+            const flatList = [];
+            (0, map_1.default)((group) => {
+                const isExpanded = internalExpandedGroups?.includes(group.id) ?? false;
+                // Add the group header
+                flatList.push({
+                    type: 'group',
+                    data: group,
+                    id: group.id,
+                    isExpanded,
+                });
+                // Add expanded items
+                if (isExpanded) {
+                    group.items.forEach((item) => {
+                        flatList.push({
+                            type: 'leaf',
+                            data: item,
+                            id: item.id,
+                            groupId: group.id,
+                        });
+                    });
+                }
+            })(groupedItems);
+            return flatList;
+        }
+        // Virtualize flat list when no groups are provided initially
+        return flatItems.map((item) => ({
+            type: 'leaf',
+            data: item,
+            id: item.id,
+        }));
+    }, [groupedItems, flatItems, hasSearchValue, hasGroups, internalExpandedGroups]);
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: virtualizedItems.length,
+        // getScrollElement: () => scrollElementRef.current,
+        getScrollElement: () => {
+            // For SmoothScrollbars, we need to get the actual scroll container
+            if (scrollElementRef.current) {
+                // SmoothScrollbars exposes the scroll container through its view
+                const scrollbarsInstance = scrollElementRef.current;
+                // Access the internal scroll container
+                // This depends on how react-custom-scrollbars-2 exposes its internals
+                return scrollbarsInstance?.view;
+            }
+            return null;
+        },
+        estimateSize: () => 41, // typical single line height without line-break
+        measureElement: element => {
+            // This will measure the actual rendered height for more accuracy
+            return element?.children[0].clientHeight ?? 41;
+        },
+        overscan, // Render 10 extra items above and below visible area
+        // Add this to enable more aggressive remeasurement
+        lanes: 1,
+    });
+    return { virtualizedItems, virtualizer };
+};
+exports.useTreeVirtualization = useTreeVirtualization;

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

@@ -0,0 +1,232 @@
+import React from 'react';
+export type AutoSuggestSuggestion = {
+    /**
+     * The text label for a suggestion item. If present, this will be returned when selecting the suggestion.
+     */
+    label?: string;
+    /**
+     * Set to disable the suggestion and disallow selecting it.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional custom suggestion node that will be rendered as given. Example, this is used by the TagManager
+     * to render a placeholder with an icon next to it.
+     */
+    customSuggestion?: React.ReactNode;
+    /**
+     * Additional key-value pairs that are not relevant for rendering but may be handled on your side.
+     */
+    [name: string]: string | React.ReactNode;
+};
+export type SelectedSuggestion = {
+    suggestionValue: string | React.ReactElement;
+    suggestion: AutoSuggestSuggestion;
+};
+export type AutoSuggestInputProps = {
+    /**
+     * A native input id attribute. Passed through as HTML attribute to the input element.
+     */
+    id?: string;
+    /**
+     * 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<T = AutoSuggestSuggestion> = {
+    /**
+     * A native input id attribute on the component root. Passed through as HTML attribute to the input element.
+     */
+    id?: string;
+    /**
+     * 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.
+     *
+     * __Important__: in case you specify your own custom renderer via `renderSuggestion` prop, you
+     * can pass our own object that does not need to have a label. In this case you may want to
+     * specify the `customSuggestionKey` to avoid react throwing an error of rendering menu items with the same key.
+     */
+    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;
+    /**
+     * When rendering your own custom suggestions that do not have the `label` attribute, use this prop to specify
+     * a unique value for each suggestion which will be used as a react key for the individual menu items.
+     */
+    customSuggestionKey?: string;
+    /**
+     * 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;

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

@@ -0,0 +1,215 @@
+"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");
+// biome-ignore lint/style/useImportType: <explanation>
+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 { id, onSuggestionSelected = noop_1.default, onSuggestionsFetchRequested = noop_1.default, onSuggestionHighlighted = noop_1.default, renderSuggestion, customSuggestionKey, getSuggestionValue, suggestions = [], autoDropDirection = true, pullRight = false, dropup = false, isLoading = false, openOnFocus = false, closeOnSelect = true, showSelectedItemsInInput = true, autoComplete = 'off', inputProps = {
+        id,
+        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 = '', ...remainingProps } = props;
+    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 ?? '');
+    }
+    // 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)(() => {
+        const focusedItem = getFocusedOptionNode();
+        (0, scrollItemIntoView_1.scrollItemIntoView)(direction, dropdownMenuRef.current, focusedItem);
+    }, [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)(() => {
+        const optionNodes = Array.from(dropdownMenuRef.current?.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 getDefaultSuggestionValue = (suggestion) => {
+        return suggestion.label ?? suggestion[customSuggestionKey ?? ''] ?? '';
+    };
+    const onSuggestionClicked = (event, suggestion) => {
+        const getSuggestionValueFunction = getSuggestionValue ? getSuggestionValue : getDefaultSuggestionValue;
+        const suggestionValue = getSuggestionValueFunction(suggestion);
+        updateInputValue(suggestionValue, event, closeOnSelect);
+        // fire callback with the selected item
+        onSuggestionSelected(event, {
+            suggestion,
+            suggestionValue,
+        });
+    };
+    const renderInput = () => {
+        const { id: inputPropId, icon, value: ignoredExternalValue, ...remainingInputProps } = inputProps;
+        const clearableProps = { id: id ?? inputPropId, ...remainingInputProps };
+        const input = ((0, jsx_runtime_1.jsx)(ClearableInput_1.default, { ...clearableProps, ref: inputRef, autoComplete: autoComplete, onChange: handleInputChange, onClear: clearInputValue, onFocus: handleFocus, onClick: openMenu, value: showSelectedItemsInInput ? value : '' }));
+        if (icon || leadingInputAddons || trailingInputAddons) {
+            return ((0, jsx_runtime_1.jsx)(AutoSuggestAddons_1.default, { icon: icon, leadingInputAddons: leadingInputAddons, trailingInputAddons: trailingInputAddons, children: input }));
+        }
+        return input;
+    };
+    const renderDefaultSuggestion = (suggestion) => suggestion.label;
+    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", { role: 'menu', className: dropdownMenuClasses, ref: dropdownMenuRef, children: [hasNoSuggestions && noItemMessage && (0, jsx_runtime_1.jsx)(NoItemMessage_1.default, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
+                    // In case a custom renderer is used but the customSuggestionKey is not set, throw an error
+                    if (renderSuggestion && !suggestion.label && !customSuggestionKey) {
+                        throw new Error('The "customSuggestionKey" need to be set when using a custom renderer ' +
+                            'and not using the "label" prop for suggestions');
+                    }
+                    const key = `index-${suggestion.label ?? suggestion[customSuggestionKey ?? '']}`;
+                    if (suggestion.header && suggestion.label) {
+                        return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { label: suggestion.label }, key);
+                    }
+                    const renderFunction = renderSuggestion ? renderSuggestion : renderDefaultSuggestion;
+                    return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { active: index === highlightedItemIndex, disabled: suggestion.disabled, value: suggestion.customSuggestion ? suggestion.customSuggestion : renderFunction(suggestion), onSelect: (_, event) => onSuggestionClicked(event, suggestion), index: index }, key));
+                })] }));
+    };
+    const classes = (0, classnames_1.default)('AutoSuggest', 'dropdown', isOpen && 'open', dropDirection.dropup && 'dropup', className);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: classes, onKeyDown: handleKeyDown, ref: componentRef, children: [renderInput(), renderDropdownMenu()] }));
+};
+exports.AutoSuggest = AutoSuggest;
+exports.default = exports.AutoSuggest;

package/lib/es/src/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/src/components/autosuggest/AutoSuggestAddons.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AutoSuggestAddons = ({ icon, leadingInputAddons, trailingInputAddons, children, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'input-group width-100pct', children: [leadingInputAddons && leadingInputAddons, icon && ((0, jsx_runtime_1.jsx)("span", { 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/src/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/src/components/autosuggest/DropdownSpinner.js

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

package/lib/es/src/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/src/components/autosuggest/NoItemMessage.js

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

package/lib/es/src/components/avatar/Avatar.d.ts

@@ -0,0 +1,54 @@
+import { type ComponentProps } from 'react';
+export type AvatarProps = ComponentProps<'div'> & {
+    /**
+     * When a name is provided, the Avatar automatically generates and displays the initials of that name.
+     * The name also appears in a tooltip when hovered over.
+     */
+    name?: string;
+    /**
+     * The abbreviation can also be defined manually. It is recommended to limit abbreviations
+     * to a maximum of 2 to 3 characters.
+     */
+    abbr?: string;
+    /**
+     * The image to be shown. When an image is displayed, the abbreviation is not shown.
+     */
+    image?: string;
+    /**
+     * The image alt text. If not given, the name will be used.
+     */
+    alt?: string;
+    /**
+     * The name of an icon that should be shown instead of initials. If nothing is provided,
+     * a default icon will be shown.
+     *
+     * @default 'user'
+     */
+    iconName?: string;
+    /**
+     * The height and width of the component.
+     *
+     * @default 40
+     */
+    size?: number;
+    /**
+     * The background color for the component. By default, the text and icon color is derived from the background color.
+     *
+     * @default 'bg-lighter'
+     */
+    backgroundColor?: string;
+    /**
+     * The content of the Avatars tooltip. if nothing is provided, the name is used.
+     */
+    tooltip?: string | JSX.Element;
+    /**
+     * Additional classes set to the icon element.
+     */
+    iconClassName?: string;
+    /**
+     * Additional classes set to the wrapper element.
+     */
+    className?: string;
+};
+declare const Avatar: (props: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default Avatar;