@rio-cloud/rio-uikit 0.16.4-beta.7 → 1.0.0

package/components/assetTree/TypeCounter.d.ts

@@ -1,3 +1,46 @@
+import React from 'react';
+export type TypeCounterProps = {
+    /**
+     * The item type for that counter. This will be used as a return value for the onClick callback.
+     */
+    type?: string;
+    /**
+     * The icon name. Note, when using the built-in generic type counter, the icon name will the
+     * same as the item type. So make sure there is a corresponding icon for the defined type.
+     */
+    icon?: string;
+    /**
+     * Sets the active styling if active
+     */
+    isActive?: boolean;
+    /**
+     * Should be set when there is a type filter set in the tree to style the counter accordingly.
+     *
+     * @default false
+     */
+    hasFilter?: boolean;
+    /**
+     * Allows for interactivity. Use this prop when you allow clicking on the counter.
+     *
+     * @default false
+     */
+    enableActivity?: boolean;
+    /**
+     * Defines if the counter is rendered at all when the value is not defined ot 0.
+     *
+     * @default false
+     */
+    hideOnZero?: boolean;
+    /**
+     * Callback function when the counter is clicked. It returns the type value.
+     * @param type
+     * @returns
+     */
+    onClick?: (type: string) => void;
+    /**
+     * A custom value to be shown in the counter.
+     */
+    value?: string | React.ReactNode | number;
+};
+declare const TypeCounter: React.ForwardRefExoticComponent<TypeCounterProps & React.RefAttributes<HTMLDivElement>>;
 export default TypeCounter;
-declare const TypeCounter: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

package/components/assetTree/TypeCounter.js

@@ -1,32 +1,22 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore-next-line importsNotUsedAsValues
+import { forwardRef, useRef } from 'react';
 import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+import useHover from '../../hooks/useHover';
+import mergeRefs from '../../utils/mergeRefs';
 const TypeCounter = forwardRef((props, ref) => {
-    const { icon, value, isActive, hasFilter, enableActivity, onClick, type, hideOnZero } = props, remainingProps = __rest(props, ["icon", "value", "isActive", "hasFilter", "enableActivity", "onClick", "type", "hideOnZero"]);
-    const wrapperClassName = classNames('TypeCounter', 'display-flex align-items-center', 'user-select-none', enableActivity ? 'cursor-pointer' : 'pointer-events-none', enableActivity && hasFilter && !isActive && 'opacity-50');
-    const counterClassNames = classNames('TreeLabelCount', 'label label-condensed', isActive ? 'label-primary' : 'label-muted label-filled');
-    const handleClick = () => onClick(type);
+    const { icon, value, isActive, hasFilter = false, enableActivity = false, onClick = noop, type, hideOnZero = false } = props, remainingProps = __rest(props, ["icon", "value", "isActive", "hasFilter", "enableActivity", "onClick", "type", "hideOnZero"]);
+    const internalRef = useRef(null);
+    const mergedRef = mergeRefs([ref, internalRef]);
+    const isHover = useHover(internalRef);
+    const wrapperClassName = classNames('TypeCounter', 'display-flex align-items-center', 'user-select-none', 'margin-right-2', enableActivity ? 'cursor-pointer' : 'pointer-events-none', enableActivity && hasFilter && !isActive && !isHover && 'opacity-50');
+    const counterClassNames = classNames('TreeLabelCount', 'label label-condensed', isHover && !isActive && 'bg-white text-color-darker', isHover && !isActive && 'border-color-gray', isHover && isActive && 'border-color-primary', isActive ? 'label-primary' : 'label-muted label-filled');
+    const handleClick = () => type && onClick(type);
     if (hideOnZero && !value) {
         return null;
     }
-    return (_jsxs("div", Object.assign({ ref: ref }, remainingProps, { className: wrapperClassName, onClick: handleClick }, { children: [_jsx("span", { className: `rioglyph rioglyph-${icon} text-size-16 margin-right-2 margin-left--4` }), _jsx("span", Object.assign({ className: counterClassNames }, { children: value || 0 }))] })));
+    return (_jsxs("div", Object.assign({ ref: mergedRef }, remainingProps, { className: wrapperClassName, onClick: handleClick }, { children: [_jsx("span", { className: `rioglyph rioglyph-${icon} text-size-16 margin-right-2` }), _jsx("span", Object.assign({ className: counterClassNames }, { children: value || 0 }))] })));
 });
-TypeCounter.defaultProps = {
-    hideOnZero: false,
-};
-TypeCounter.propTypes = {
-    type: PropTypes.string,
-    icon: PropTypes.string,
-    // Highlights the current active filter
-    isActive: PropTypes.bool,
-    // Defined if there is a filter
-    hasFilter: PropTypes.bool,
-    // Allow the counter to be clickable
-    enableActivity: PropTypes.bool,
-    hideOnZero: PropTypes.bool,
-    onClick: PropTypes.func,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
-};
 export default TypeCounter;

package/components/assetTree/excludeFromList.d.ts

@@ -0,0 +1 @@
+export function excludeFromList(list: any, itemId: any): any;

package/components/assetTree/excludeFromList.js

@@ -0,0 +1 @@
+export const excludeFromList = (list, itemId) => list.filter(item => item !== itemId);

package/components/assetTree/treeReducer.d.ts

@@ -0,0 +1,47 @@
+import type { GroupedItem, TreeItem, TreeGroup } from './Tree';
+import type { TreeSummaryCounts, AssetType } from './TreeSummary';
+export type State = {
+    groupedItems: GroupedItem[];
+    flatItems: TreeItem[];
+    allChecked: boolean;
+    searchValue: string;
+    assetCounts: TreeSummaryCounts;
+    typeFilter: string[];
+    visibleTypeCounters: AssetType[];
+    emptyGroups: TreeGroup[];
+};
+type Action = {
+    type: 'assetCounted';
+    payload: TreeSummaryCounts;
+} | {
+    type: 'allCheckedChanged';
+    payload: boolean;
+} | {
+    type: 'searchValueChanged';
+    payload: string;
+} | {
+    type: 'flatItemsChanged';
+    payload: TreeItem[];
+} | {
+    type: 'groupedItemsChanged';
+    payload: GroupedItem[];
+} | {
+    type: 'typeFilterChanged';
+    payload: string[];
+} | {
+    type: 'visibleTypeCountersChanged';
+    payload: AssetType[];
+} | {
+    type: 'emptyGroupsChanged';
+    payload: TreeGroup[];
+};
+export declare const assetCounted: (payload: TreeSummaryCounts) => Action;
+export declare const allCheckedChanged: (payload: boolean) => Action;
+export declare const searchValueChanged: (payload: string) => Action;
+export declare const flatItemsChanged: (payload: TreeItem[]) => Action;
+export declare const groupedItemsChanged: (payload: GroupedItem[]) => Action;
+export declare const typeFilterChanged: (payload: string[]) => Action;
+export declare const visibleTypeCountersChanged: (payload: AssetType[]) => Action;
+export declare const emptyGroupsChanged: (payload: TreeGroup[]) => Action;
+export declare const treeReducer: (state: State, action: Action) => State;
+export {};

package/components/assetTree/treeReducer.js

@@ -0,0 +1,34 @@
+import invariant from 'tiny-invariant';
+export const assetCounted = (payload) => ({ type: 'assetCounted', payload });
+export const allCheckedChanged = (payload) => ({ type: 'allCheckedChanged', payload });
+export const searchValueChanged = (payload) => ({ type: 'searchValueChanged', payload });
+export const flatItemsChanged = (payload) => ({ type: 'flatItemsChanged', payload });
+export const groupedItemsChanged = (payload) => ({ type: 'groupedItemsChanged', payload });
+export const typeFilterChanged = (payload) => ({ type: 'typeFilterChanged', payload });
+export const visibleTypeCountersChanged = (payload) => ({
+    type: 'visibleTypeCountersChanged',
+    payload,
+});
+export const emptyGroupsChanged = (payload) => ({ type: 'emptyGroupsChanged', payload });
+export const treeReducer = (state, action) => {
+    switch (action.type) {
+        case 'assetCounted':
+            return Object.assign(Object.assign({}, state), { assetCounts: action.payload });
+        case 'allCheckedChanged':
+            return Object.assign(Object.assign({}, state), { allChecked: action.payload });
+        case 'searchValueChanged':
+            return Object.assign(Object.assign({}, state), { searchValue: action.payload, allChecked: false });
+        case 'flatItemsChanged':
+            return Object.assign(Object.assign({}, state), { flatItems: action.payload });
+        case 'groupedItemsChanged':
+            return Object.assign(Object.assign({}, state), { groupedItems: action.payload });
+        case 'typeFilterChanged':
+            return Object.assign(Object.assign({}, state), { typeFilter: action.payload });
+        case 'visibleTypeCountersChanged':
+            return Object.assign(Object.assign({}, state), { visibleTypeCounters: action.payload });
+        case 'emptyGroupsChanged':
+            return Object.assign(Object.assign({}, state), { emptyGroups: action.payload });
+        default:
+            invariant(false, 'Unknown action type in tree reducer');
+    }
+};

package/components/assetTree/treeUtils.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="lodash" />
+/// <reference types="lodash" />
+import type { TreeItem, TreeGroup, GroupedItems } from './Tree';
+export declare const notEqual: (value: any, other: any) => boolean;
+export declare const notEmpty: (value?: any) => boolean;
+export declare const filterOutByItemId: (list: string[]) => (item: TreeItem | TreeGroup) => boolean;
+export declare const containsItemById: (list: string[]) => (item: TreeGroup) => boolean;
+export declare const getListIds: (list: TreeItem[] | TreeGroup[]) => string[];
+export declare const getTypeCounts: (items: TreeItem[]) => import("lodash").Dictionary<number>;
+export declare const getSubTypeCounts: (items: TreeItem[]) => import("lodash").Dictionary<number>;
+export declare const debounceFn: <T extends (...args: any[]) => any>(fn: T) => import("lodash").DebouncedFunc<T>;
+export declare const getFullName: (item: TreeItem) => string;
+export declare const getFlatItems: (items: TreeItem[], searchValue: string) => TreeItem[];
+export declare const filterEmptyGroups: import("lodash/fp").LodashFilter2x1<GroupedItems>;
+export declare const filterAssetByType: (types?: string[]) => import("lodash/fp").LodashFilter2x1<TreeItem>;
+export declare const excludeFromList: <T>(list: T[], itemId: T) => T[];
+export declare const sortGroupsByName: (groups: GroupedItems) => TreeItem[];
+export declare const sortGroupItemsByName: (groups: GroupedItems) => GroupedItems;
+export declare const getMappedItemsToGroups: (groups: TreeGroup[], items: TreeItem[]) => GroupedItems;
+export declare const addOrRemoveFromList: <T>(list: T[], item: T) => T[];

package/components/assetTree/treeUtils.js

@@ -0,0 +1,88 @@
+import isEmpty from 'lodash/fp/isEmpty';
+import isEqual from 'lodash/fp/isEqual';
+import orderBy from 'lodash/fp/orderBy';
+import isObject from 'lodash/fp/isObject';
+import debounce from 'lodash/fp/debounce';
+import countBy from 'lodash/fp/countBy';
+import flow from 'lodash/fp/flow';
+import filter from 'lodash/fp/filter';
+import negate from 'lodash/fp/negate';
+import mapValues from 'lodash/fp/mapValues';
+import { searchNormalized } from '../../utils/searchNormalized';
+const SEARCH_DEBOUNCE = 100;
+export const notEqual = negate(isEqual);
+export const notEmpty = negate(isEmpty);
+export const filterOutByItemId = (list) => (item) => !list.includes(item.id);
+export const containsItemById = (list) => (item) => list.includes(item.id);
+export const getListIds = (list) => list.map(listItem => listItem.id);
+export const getTypeCounts = (items) => countBy(item => item.type, items);
+export const getSubTypeCounts = (items) => countBy(item => item.subType, items);
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+export const debounceFn = (fn) => debounce(SEARCH_DEBOUNCE, fn);
+const isNameObject = (item) => isObject(item.name);
+export const getFullName = (item) => `${item.name.firstName} ${item.name.lastName}`;
+const getName = (item) => (isNameObject(item) ? getFullName(item) : item.name);
+const orderByName = orderBy([
+    (item) => {
+        var _a;
+        return isNameObject(item)
+            ? item.name.lastName.toLowerCase()
+            : (_a = item.name.toLowerCase()) !== null && _a !== void 0 ? _a : '';
+    },
+], ['asc']);
+// TODO: extend to use provided external search function instead?
+const filterByName = (searchValue) => (item) => {
+    if (searchValue) {
+        return searchNormalized(getName(item), searchValue);
+    }
+    return true;
+};
+export const getFlatItems = (items, searchValue) => flow(filter(filterByName(searchValue)), orderByName)(items);
+export const filterEmptyGroups = filter((group) => notEmpty(group.items));
+export const filterAssetByType = (types = []) => filter((asset) => types.includes(asset.type));
+export const excludeFromList = (list, itemId) => list.filter(item => item !== itemId);
+export const sortGroupsByName = (groups) => {
+    const fixedGroups = {};
+    const sortableGroups = {};
+    mapValues((group) => {
+        if (group.position === 'last') {
+            fixedGroups[group.id] = Object.assign({}, group);
+        }
+        else {
+            sortableGroups[group.id] = Object.assign({}, group);
+        }
+    })(groups);
+    const sortedGroups = orderByName(sortableGroups);
+    return isEmpty(fixedGroups) ? sortedGroups : Object.assign(Object.assign({}, sortedGroups), fixedGroups);
+};
+export const sortGroupItemsByName = (groups) => {
+    return mapValues((group) => (Object.assign(Object.assign({}, group), { items: orderByName(group.items) })))(groups);
+};
+export const getMappedItemsToGroups = (groups, items) => {
+    const mappedGroups = {};
+    // build an object for listing the groups by id
+    groups.forEach(group => {
+        mappedGroups[group.id] = Object.assign(Object.assign({}, group), { items: [] });
+    });
+    items.forEach(item => {
+        // add items to the respective group
+        const groupIds = item.groupIds || [];
+        groupIds.forEach(groupId => {
+            const mappedGroup = mappedGroups[groupId];
+            if (mappedGroup) {
+                mappedGroup.items.push(item);
+            }
+        });
+    });
+    return mappedGroups;
+};
+export const addOrRemoveFromList = (list, item) => {
+    const listSet = new Set(list);
+    if (listSet.has(item)) {
+        listSet.delete(item);
+    }
+    else {
+        listSet.add(item);
+    }
+    return [...listSet];
+};

package/components/autosuggest/AutoSuggest.d.ts

@@ -1,7 +1,23 @@
 import React from 'react';
 export type AutoSuggestSuggestion = {
-    label: string;
+    /**
+     * 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 = {
@@ -9,6 +25,10 @@ export type SelectedSuggestion = {
     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.
      */
@@ -79,7 +99,11 @@ export type AutoSuggestInputProps = {
      */
     className?: string;
 };
-export type AutoSuggestProps = {
+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.
@@ -88,6 +112,10 @@ export type AutoSuggestProps = {
     /**
      * 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[];
     /**
@@ -138,6 +166,11 @@ export type AutoSuggestProps = {
      * @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

package/components/autosuggest/AutoSuggest.js

@@ -15,7 +15,8 @@ import AutoSuggestAddons from './AutoSuggestAddons';
 import DropdownSpinner from './DropdownSpinner';
 import NoItemMessage from './NoItemMessage';
 export const AutoSuggest = (props) => {
-    const { onSuggestionSelected = noop, onSuggestionsFetchRequested = noop, onSuggestionHighlighted = noop, renderSuggestion = suggestion => suggestion.label, getSuggestionValue = suggestion => suggestion.label, suggestions = [], autoDropDirection = true, pullRight = false, dropup = false, isLoading = false, openOnFocus = false, closeOnSelect = true, showSelectedItemsInInput = true, autoComplete = 'off', inputProps = {
+    const { id, onSuggestionSelected = noop, onSuggestionsFetchRequested = noop, onSuggestionHighlighted = noop, 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,
         onClear: noop,
@@ -26,7 +27,7 @@ export const AutoSuggest = (props) => {
         tabIndex: 0,
         value: undefined,
         icon: undefined,
-    }, leadingInputAddons, trailingInputAddons, noItemMessage, dropdownClassName = '', className = '' } = props, remainingProps = __rest(props, ["onSuggestionSelected", "onSuggestionsFetchRequested", "onSuggestionHighlighted", "renderSuggestion", "getSuggestionValue", "suggestions", "autoDropDirection", "pullRight", "dropup", "isLoading", "openOnFocus", "closeOnSelect", "showSelectedItemsInInput", "autoComplete", "inputProps", "leadingInputAddons", "trailingInputAddons", "noItemMessage", "dropdownClassName", "className"]);
+    }, leadingInputAddons, trailingInputAddons, noItemMessage, dropdownClassName = '', className = '' } = props, remainingProps = __rest(props, ["id", "onSuggestionSelected", "onSuggestionsFetchRequested", "onSuggestionHighlighted", "renderSuggestion", "customSuggestionKey", "getSuggestionValue", "suggestions", "autoDropDirection", "pullRight", "dropup", "isLoading", "openOnFocus", "closeOnSelect", "showSelectedItemsInInput", "autoComplete", "inputProps", "leadingInputAddons", "trailingInputAddons", "noItemMessage", "dropdownClassName", "className"]);
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState(inputProps.value || '');
     const [highlightedItemIndex, setHighlightedItemIndex] = useState(-1);
@@ -48,7 +49,8 @@ export const AutoSuggest = (props) => {
     // has an overflow and can scroll. In this case, we need to scroll to the highlighted suggestion
     // so the user can see it
     useEffect(() => {
-        scrollItemIntoView(direction, dropdownMenuRef.current, getFocusedOptionNode());
+        const focusedItem = getFocusedOptionNode();
+        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.
@@ -157,30 +159,30 @@ export const AutoSuggest = (props) => {
             inputProps.onClear(event);
         }
     };
+    const getDefaultSuggestionValue = (suggestion) => {
+        var _a, _b;
+        return (_b = (_a = suggestion.label) !== null && _a !== void 0 ? _a : suggestion[customSuggestionKey !== null && customSuggestionKey !== void 0 ? customSuggestionKey : '']) !== null && _b !== void 0 ? _b : '';
+    };
     const onSuggestionClicked = (event, suggestion) => {
-        updateInputValue(getSuggestionValue(suggestion), event, closeOnSelect);
+        const getSuggestionValueFunction = getSuggestionValue ? getSuggestionValue : getDefaultSuggestionValue;
+        const suggestionValue = getSuggestionValueFunction(suggestion);
+        updateInputValue(suggestionValue, event, closeOnSelect);
         // fire callback with the selected item
         onSuggestionSelected(event, {
             suggestion,
-            suggestionValue: getSuggestionValue(suggestion),
+            suggestionValue,
         });
     };
-    const onMouseEnter = (event) => {
-        const newIndex = event.currentTarget.getAttribute('data-item-index');
-        if (newIndex) {
-            setHighlightedItemIndex(Number(newIndex));
-            handleHighlightedSuggestionChanged(Number(newIndex));
-        }
-    };
     const renderInput = () => {
-        const { icon, value: ignoredExternalValue } = inputProps, remainingInputProps = __rest(inputProps, ["icon", "value"]);
-        const clearableProps = Object.assign(Object.assign({}, remainingInputProps), { onClick: () => openMenu });
-        const input = (_jsx(ClearableInput, Object.assign({}, clearableProps, { ref: inputRef, autoComplete: autoComplete, onChange: handleInputChange, onClear: clearInputValue, onFocus: handleFocus, value: showSelectedItemsInInput ? value : '' })));
+        const { id: inputPropId, icon, value: ignoredExternalValue } = inputProps, remainingInputProps = __rest(inputProps, ["id", "icon", "value"]);
+        const clearableProps = Object.assign({ id: id !== null && id !== void 0 ? id : inputPropId }, remainingInputProps);
+        const input = (_jsx(ClearableInput, Object.assign({}, clearableProps, { ref: inputRef, autoComplete: autoComplete, onChange: handleInputChange, onClear: clearInputValue, onFocus: handleFocus, onClick: openMenu, value: showSelectedItemsInInput ? value : '' })));
         if (icon || leadingInputAddons || trailingInputAddons) {
             return (_jsx(AutoSuggestAddons, Object.assign({ icon: icon, leadingInputAddons: leadingInputAddons, trailingInputAddons: trailingInputAddons }, { children: input })));
         }
         return input;
     };
+    const renderDefaultSuggestion = (suggestion) => suggestion.label;
     const renderDropdownMenu = () => {
         const dropdownMenuClasses = classNames('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);
         if (isLoading) {
@@ -191,10 +193,18 @@ export const AutoSuggest = (props) => {
             return null;
         }
         return (_jsxs("ul", Object.assign({ role: 'menu', className: dropdownMenuClasses, ref: dropdownMenuRef }, { children: [hasNoSuggestions && noItemMessage && _jsx(NoItemMessage, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
-                    if (suggestion.header) {
-                        return _jsx(DropdownHeader, { label: suggestion.label }, suggestion.label);
+                    var _a;
+                    // 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-${(_a = suggestion.label) !== null && _a !== void 0 ? _a : suggestion[customSuggestionKey !== null && customSuggestionKey !== void 0 ? customSuggestionKey : '']}`;
+                    if (suggestion.header && suggestion.label) {
+                        return _jsx(DropdownHeader, { label: suggestion.label }, key);
                     }
-                    return (_jsx(MenuItem, { active: index === highlightedItemIndex, disabled: suggestion.disabled, value: suggestion.customSuggestion ? suggestion.customSuggestion : renderSuggestion(suggestion), onSelect: (_, event) => onSuggestionClicked(event, suggestion), index: index, onMouseEnter: onMouseEnter }, `index-${suggestion.label}`));
+                    const renderFunction = renderSuggestion ? renderSuggestion : renderDefaultSuggestion;
+                    return (_jsx(MenuItem, { active: index === highlightedItemIndex, disabled: suggestion.disabled, value: suggestion.customSuggestion ? suggestion.customSuggestion : renderFunction(suggestion), onSelect: (_, event) => onSuggestionClicked(event, suggestion), index: index }, key));
                 })] })));
     };
     const classes = classNames('AutoSuggest', 'dropdown', isOpen && 'open', dropDirection.dropup && 'dropup', className);

package/components/bottomSheet/BottomSheet.d.ts

@@ -1,4 +1,4 @@
-import React, { MutableRefObject, PropsWithChildren, ReactNode } from 'react';
+import React, { type MutableRefObject, type PropsWithChildren, type ReactNode } from 'react';
 export type BottomSheetProps = {
     /**
      * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.
@@ -52,7 +52,7 @@ export type BottomSheetProps = {
      * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.
      * @default false
      */
-    useBackdrop?: boolean;
+    hasBackdrop?: boolean;
     /**
      * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.
      */

package/components/bottomSheet/BottomSheet.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import isFunction from 'lodash/fp/isFunction';
@@ -9,7 +9,7 @@ import { getOrCreatePortalRoot } from '../../utils/portalRoot';
 const OFFSET_POSITION = -1000;
 const DEFAULT_OFFSET_PX = 15;
 const BottomSheet = (props) => {
-    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 = __rest(props, ["show", "onClose", "width", "height", "title", "detach", "detachOffset", "useBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children", "onBackdropClick"]);
+    const { show = false, onClose, width, height, title, detach = false, detachOffset = DEFAULT_OFFSET_PX, hasBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { } } = props, remainingProps = __rest(props, ["show", "onClose", "width", "height", "title", "detach", "detachOffset", "hasBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children", "onBackdropClick"]);
     const [isShown, setIsShown] = useState(show);
     const [isMaxHeight, setIsMaxHeight] = useState(false);
     useEffect(() => setIsShown(show), [show]);
@@ -50,6 +50,6 @@ const BottomSheet = (props) => {
                     height: isShown ? sheetHeight : 0,
                 } }, { children: [_jsxs("div", Object.assign({ className: 'bottom-sheet-header' }, { children: [title && (_jsx("div", Object.assign({ className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' +
                                     'border border-top-none border-left-none border-right-none border-color-lighter' }, { children: _jsx("div", Object.assign({ className: 'text-size-18' }, { children: title })) }))), showCloseButton && (_jsx("div", Object.assign({ className: 'bottom-sheet-close position-absolute top-10 right-10' }, { children: _jsx("button", Object.assign({ type: 'button', className: 'btn btn-muted btn-sm btn-icon-only', onClick: handleToggle }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) })) }))), showMaximizeButton && (_jsx("div", Object.assign({ className: 'bottom-sheet-maximize height-30 ' +
-                                    'position-absolute top-5 left-50pct translate-x-50 cursor-pointer', onClick: handleMaximize }, { children: _jsx("div", { className: 'height-5 width-40 rounded bg-lighter' }) })))] })), _jsx("div", Object.assign({ className: sheetBodyClasses, ref: bodyRef }, { children: isShown && children }))] })), useBackdrop && isShown && _jsx("div", { className: 'bottom-sheet-backdrop', onClick: handleBackdropClick })] }), modalRoot);
+                                    'position-absolute top-5 left-50pct translate-x-50 cursor-pointer', onClick: handleMaximize }, { children: _jsx("div", { className: 'height-5 width-40 rounded bg-lighter' }) })))] })), _jsx("div", Object.assign({ className: sheetBodyClasses, ref: bodyRef }, { children: isShown && children }))] })), hasBackdrop && isShown && _jsx("div", { className: 'bottom-sheet-backdrop', onClick: handleBackdropClick })] }), modalRoot);
 };
 export default BottomSheet;

package/components/bottomSheet/TimedBottomSheet.d.ts

@@ -0,0 +1,98 @@
+import { type PropsWithChildren } from 'react';
+type TimedBottomSheetProps = {
+    /**
+     * The `dismissed` flag can be used to tell this component that the user has clicked on the content
+     * of the component like a button or a link. In this case, the bottom sheet will store a flag in the
+     * localStorage to hide the bottom sheet for the next time and it will close the sheet right away.
+     */
+    dismissed?: boolean;
+    /**
+     * The `featureName` prop is used to name the localStorage flag that is used to control the visibility.
+     * It should be unique to avoid conflicts with other timed bottom sheets.
+     */
+    featureName: string;
+    /**
+     * Defines the time in milliseconds when the bottom sheet shall be shown. Default value is 0 to show it right away.
+     *
+     * @default 0
+     */
+    showAfter?: number;
+    /**
+     * Defines the time in milliseconds when the bottom sheet hides itself automatically. Default value is 3_600_000
+     * to hide it after 1 hour. In this case, the localStorage flag is not set and the bottom sheet will be shown
+     * on the next page load.
+     *
+     * @default 3_600_000
+     */
+    hideAfter?: number;
+    /**
+     * With this enabled, the BottomSheet will not hide automatically.
+     * @default false
+     */
+    alwaysOn?: boolean;
+    /**
+     * Enables or disabled the close button.
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Optional width of the bottom sheet. Alternatively, you can set a `max-width-xxx` via className instead.
+     */
+    width?: number;
+    /**
+     * Flag to allow to remove the localStorage flag again once the component is not needed anymore.
+     */
+    cleanupLocalStorage?: boolean;
+    /**
+     * A prefix that will be used for the local storage flag to store whether the bottom sheet should be hidden.
+     *
+     * Use this prefix for your service name for instance.
+     */
+    localStoragePrefix?: string;
+    /**
+     * Callback function that gets triggered when the user closed the bottom sheet with the close button.
+     * @returns void
+     */
+    onClose?: () => void;
+    /**
+     * Optional className to be set on the body.
+     */
+    bodyClassName?: string;
+    /**
+     * Optional className to be set on the component. Use this to define a max-width value.
+     */
+    className?: string;
+};
+/**
+ * A wrapper component for the BottomSheet that allows to control it's visibility via timers and to use
+ * the localStorage to save user interaction.
+ *
+ * Don't forget to cleanup the localStorage for the user when removing a feature
+ * by setting "cleanupLocalStorage" to "true" and deploy it like this.
+ * The cleanup will remove the localStorage flag on mount and will not show the bottom sheet.
+ *
+ * @example
+    const [isDismissed, setIsDismissed] = useState(false);
+
+    const handleClose = () => { // If needed trigger Google Analytics here };
+
+    return (
+        <TimedBottomSheet
+            dismissed={isDismissed}
+            featureName='dummyBottomSheet'
+            showAfter={1_000}
+            hideAfter={15_000}
+            className='max-width-500'
+            onClose={handleClose}
+        >
+            <div className='display-flex align-items-center gap-20'>
+                Lorem ipsum dolor sit amet
+                <Button bsStyle={Button.PRIMARY} onClick={() => setIsDismissed(true)}>
+                    Got it
+                </Button>
+            </div>
+        </TimedBottomSheet>
+    );
+ */
+export declare const TimedBottomSheet: (props: PropsWithChildren<TimedBottomSheetProps>) => import("react/jsx-runtime").JSX.Element;
+export default TimedBottomSheet;