@rio-cloud/rio-uikit 0.16.4-beta.23 → 0.16.4-beta.24

package/components/autosuggest/AutoSuggest.d.ts

@@ -1,7 +1,23 @@
 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 = {

package/components/autosuggest/AutoSuggest.js

@@ -15,7 +15,7 @@ import AutoSuggestAddons from './AutoSuggestAddons';
 import DropdownSpinner from './DropdownSpinner';
 import NoItemMessage from './NoItemMessage';
 export const AutoSuggest = (props) => {
-    const { id, onSuggestionSelected = noop, onSuggestionsFetchRequested = noop, onSuggestionHighlighted = noop, renderSuggestion = (suggestion) => suggestion.label, customSuggestionKey, getSuggestionValue = (suggestion) => { var _a; return (_a = suggestion.label) !== null && _a !== void 0 ? _a : suggestion === null || suggestion === void 0 ? void 0 : suggestion.customSuggestionKey; }, 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,
@@ -158,12 +158,18 @@ 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) => {
@@ -182,6 +188,7 @@ export const AutoSuggest = (props) => {
         }
         return input;
     };
+    const renderDefaultSuggestion = (suggestion) => suggestion.label;
     const renderDropdownMenu = () => {
         const dropdownMenuClasses = classNames('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);
         if (isLoading) {
@@ -193,11 +200,17 @@ export const AutoSuggest = (props) => {
         }
         return (_jsxs("ul", Object.assign({ role: 'menu', className: dropdownMenuClasses, ref: dropdownMenuRef }, { children: [hasNoSuggestions && noItemMessage && _jsx(NoItemMessage, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
                     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 }, key));
+                    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, onMouseEnter: onMouseEnter }, key));
                 })] })));
     };
     const classes = classNames('AutoSuggest', 'dropdown', isOpen && 'open', dropDirection.dropup && 'dropup', className);

package/components/button/Button.js

@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 import { createButtonRipple } from '../../utils/buttonEffect';
 import useMergeRefs from '../../hooks/useMergeRefs';
-import usePrevious from '../../hooks/usePrevious';
 export const STYLES_MAP = {
     DEFAULT: 'default',
     PRIMARY: 'primary',
@@ -34,9 +33,11 @@ const Button = React.forwardRef((props, ref) => {
     const btnRef = useRef(null);
     const buttonRef = useMergeRefs(btnRef, ref);
     // Update internal toggle state when used as controlled component and outside toggle state changes
-    const previousActive = usePrevious(active);
+    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here
+    const [previousActive, setPreviousActive] = useState(active);
     if (active !== previousActive) {
         setIsToggled(active);
+        setPreviousActive(active);
     }
     const handleClick = (event) => {
         var _a;

package/components/datepicker/DatePicker.d.ts

@@ -66,7 +66,7 @@ export type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialVal
      * @param isValid
      * @returns
      */
-    onChange?: (value: Moment, isValid: boolean) => void;
+    onChange?: (value: Moment | string, isValid: boolean) => void;
     /**
      * Defines whether the input shows an error when the date is invalid or cleared.
      *
@@ -79,7 +79,7 @@ export type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialVal
      * @param date
      * @returns
      */
-    dateValidation?: (date: Moment) => boolean;
+    dateValidation?: (date: Moment | string) => boolean;
     /**
      * Additional classes to be set on the DatePicker element.
      */
@@ -150,7 +150,7 @@ declare const DatePicker: React.ForwardRefExoticComponent<Omit<Datetime.Datetime
      * @param isValid
      * @returns
      */
-    onChange?: ((value: Moment, isValid: boolean) => void) | undefined;
+    onChange?: ((value: Moment | string, isValid: boolean) => void) | undefined;
     /**
      * Defines whether the input shows an error when the date is invalid or cleared.
      *
@@ -163,7 +163,7 @@ declare const DatePicker: React.ForwardRefExoticComponent<Omit<Datetime.Datetime
      * @param date
      * @returns
      */
-    dateValidation?: ((date: Moment) => boolean) | undefined;
+    dateValidation?: ((date: Moment | string) => boolean) | undefined;
     /**
      * Additional classes to be set on the DatePicker element.
      */

package/components/datepicker/DatePicker.js

@@ -2,28 +2,34 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, forwardRef } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
 import moment from 'moment';
 import Datetime from 'react-datetime';
+import noop from 'lodash/fp/noop';
+import isEmpty from 'lodash/fp/isEmpty';
 const DEFAULT_LOCALE = 'en-GB';
 const DEFAULT_MIN_WIDTH = 0;
-const isValidDate = (date) => typeof date === 'object';
+const isValidDate = (date) => typeof date === 'object' && moment(date).isValid();
 const DatePicker = forwardRef((props, ref) => {
     const { id, dropup = false, alignRight = false, locale = DEFAULT_LOCALE, minWidth = DEFAULT_MIN_WIDTH, onChange = noop, mandatory = true, dateValidation, clearableInput = false, closeOnSelect = true, inputProps, className } = props, remainingProp = __rest(props, ["id", "dropup", "alignRight", "locale", "minWidth", "onChange", "mandatory", "dateValidation", "clearableInput", "closeOnSelect", "inputProps", "className"]);
     const [hasError, setHasError] = useState(false);
     const validateDate = (dateToValidate) => {
-        return dateValidation ? dateValidation(dateToValidate) : isValidDate(dateToValidate);
+        if (dateValidation) {
+            return dateValidation(dateToValidate);
+        }
+        // if the date is mandatory, convert it to a moment object to validate
+        const value = isEmpty(dateToValidate) ? undefined : dateToValidate;
+        const dateValue = typeof value === 'string' ? moment(value) : value;
+        return isValidDate(dateValue);
     };
     const handleChange = (date) => {
-        const dateValue = typeof date === 'string' ? moment(date) : date;
-        const isValid = mandatory ? validateDate(dateValue) : true;
+        const isValid = mandatory ? validateDate(date) : true;
         setHasError(!isValid);
-        onChange(dateValue, isValid);
+        onChange(date, isValid);
     };
     const classes = classNames('DatePicker', 'form-group', hasError && 'has-error', dropup && 'dropup', alignRight && 'align-right', className && className);
     // This way we can expose the "id" as top level prop and not as part of the inputProps which
     // makes the use of the id much more convenient
-    const enhancedInputProps = Object.assign(Object.assign({}, inputProps), { id });
+    const enhancedInputProps = Object.assign({ id }, inputProps);
     return (_jsx(Datetime
     // TODO: add support for setting ref to the input. Maybe add a "inputRef" prop to react-datetime
     // ref={ref}

package/components/dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-export type bsSizeDialog = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullscreen';
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullscreen';
 export type BaseDialogProps = {
     /**
      * Opens the dialog when set to `true`.
@@ -22,7 +22,7 @@ export type BaseDialogProps = {
     /**
      * A callback function invoked when the dialog closes.
      */
-    onClose?: Function;
+    onClose?: () => void;
     /**
      * Defined how large the dialog will be rendered.
      * By default, the dialog has a medium size and thus it can be omitted.
@@ -30,7 +30,7 @@ export type BaseDialogProps = {
      * Possible values are: `xs`, `sm`, `lg` `xl` `fullwidth` `fullheight` `fullscreen`
      * @default 'md'
      */
-    bsSize?: bsSizeDialog;
+    bsSize?: DialogSize;
     /**
      * Enables or disabled closing the dialog via esc key.
      * @default false
@@ -55,7 +55,7 @@ export type DialogProps = BaseDialogProps & {
     /**
      * The dialog body content.
      */
-    body: React.ReactNode;
+    body?: React.ReactNode;
     /**
      * The dialog body content.
      */

package/components/dialog/Dialog.js

@@ -8,7 +8,7 @@ import noop from 'lodash/fp/noop';
 import { AnimatePresence, motion } from 'framer-motion';
 import { getOrCreatePortalRoot } from '../../utils/portalRoot';
 import useEsc from '../../hooks/useEsc';
-import useAfterMount from '../../hooks/useAfterMount';
+import '../../hooks/useAfterMount';
 import DialogHeader from './DialogHeader';
 import DialogBody from './DialogBody';
 import DialogFooter from './DialogFooter';
@@ -46,10 +46,12 @@ const Dialog = (props) => {
             usedEscapeKey && onEsc();
         }
     };
-    useAfterMount(() => {
+    const [previousShow, setPreviousShow] = useState(show);
+    if (show !== previousShow) {
         setOpen(show);
         toggleBodyClass(show);
-    }, [show]);
+        setPreviousShow(show);
+    }
     useEsc(() => {
         if (!dialogWrapperRef || !dialogWrapperRef.current) {
             return;
@@ -83,7 +85,7 @@ const Dialog = (props) => {
     const modalClasses = classNames('modal', 'show', className);
     const isSmallestDialog = bsSize === 'xs';
     const hasChildren = !!children;
-    const modalDialogClasses = classNames(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === 'xs' && 'modal-xs', bsSize === 'sm' && 'modal-sm', bsSize === 'lg' && 'modal-lg', bsSize === 'lg' && 'modal-xl', bsSize === 'full' && 'modal-full-width', bsSize === 'fullwidth' && 'modal-full-width', bsSize === 'fullheight' && 'modal-full-height', bsSize === 'fullscreen' && 'modal-fullscreen');
+    const modalDialogClasses = classNames(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === 'xs' && 'modal-xs', bsSize === 'sm' && 'modal-sm', bsSize === 'lg' && 'modal-lg', bsSize === 'xl' && 'modal-xl', bsSize === 'full' && 'modal-full-width', bsSize === 'fullwidth' && 'modal-full-width', bsSize === 'fullheight' && 'modal-full-height', bsSize === 'fullscreen' && 'modal-fullscreen');
     const spring = {
         type: 'spring',
         damping: 33,

package/components/dropdown/ButtonDropdown.js

@@ -26,7 +26,7 @@ const getPlacement = (pullRight, dropup) => {
     return 'bottom-start';
 };
 const ButtonDropdown = (props) => {
-    const { id = Math.random().toString(36).substr(2, 16), items = [], bsSize = 'md', bsStyle = 'default', disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop, onClose = noop, onLabelButtonClick = noop, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = __rest(props, ["id", "items", "bsSize", "bsStyle", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
+    const { id = Math.random().toString(36).substr(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop, onClose = noop, onLabelButtonClick = noop, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = __rest(props, ["id", "items", "bsSize", "bsStyle", "variant", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
     const [internalOpen, setInternalOpen] = useState(open);
     const [refDropdownToggle, setRefDropdownToggle] = useState(null);
     const [refDropdownMenu, setRefDropdownMenu] = useState(null);
@@ -76,6 +76,6 @@ const ButtonDropdown = (props) => {
     const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);
     const dropdownClasses = classNames(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
     const dropdownMenu = (_jsx(MenuItemList, Object.assign({ className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper }, attributes.popper, { children: customDropdown ? customDropdown : _jsx(MenuItems, { items: items, closeMenu: toggleOpen }) })));
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [_jsx(DropdownToggleButton, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, className: toggleClassName }, { children: _jsxs(_Fragment, { children: [title, shouldShowCaret && _jsx(Caret, {})] }) })), splitButton && (_jsx(SplitCaretButton, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [_jsx(DropdownToggleButton, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, className: toggleClassName }, { children: _jsxs(_Fragment, { children: [title, shouldShowCaret && _jsx(Caret, {})] }) })), splitButton && (_jsx(SplitCaretButton, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
 };
 export default ButtonDropdown;

package/components/dropdown/DropdownToggleButton.d.ts

@@ -1,5 +1,5 @@
 import React, { type HTMLProps } from 'react';
-import { type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';
+import { type BUTTON_VARIANT, type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';
 export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     id?: string;
     disabled?: boolean;
@@ -8,6 +8,7 @@ export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     bsSize: BUTTON_SIZE;
     bsStyle: BUTTON_STYLE;
+    variant?: BUTTON_VARIANT;
     className?: string;
 };
 declare const DropdownToggleButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<DropdownToggleButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/components/dropdown/DropdownToggleButton.js

@@ -4,8 +4,8 @@ import { forwardRef } from 'react';
 import classNames from 'classnames';
 import Button from '../button/Button';
 const DropdownToggleButton = forwardRef((props, ref) => {
-    const { id, disabled, bsSize, bsStyle, splitButton = false, onClick, className = '', children } = props, remainingProps = __rest(props, ["id", "disabled", "bsSize", "bsStyle", "splitButton", "onClick", "className", "children"]);
+    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children } = props, remainingProps = __rest(props, ["id", "disabled", "bsSize", "bsStyle", "variant", "splitButton", "onClick", "className", "children"]);
     const labelButtonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);
-    return (_jsx(Button, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, onClick: onClick, className: labelButtonClasses }, { children: children })));
+    return (_jsx(Button, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses }, { children: children })));
 });
 export default DropdownToggleButton;

package/components/editableContent/EditableContent.d.ts

@@ -66,6 +66,8 @@ export type EditableContentProps = {
     allowResize?: boolean;
     /**
      * Defines the number of rows to use by the internal textarea component.
+     * When a single line is used, the input is saved on "enter" key.
+     *
      * @default 1
      */
     inputRows?: number;

package/components/editableContent/EditableContent.js

@@ -60,9 +60,9 @@ const EditableContent = (props) => {
     };
     const { styles, attributes } = usePopper(referenceElement, popperElement, popperConfig);
     const handleEditMode = () => {
-        var _a;
+        var _a, _b;
         setIsEditMode(true);
-        setInputValue((_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.textContent) !== null && _a !== void 0 ? _a : '');
+        setInputValue((_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.textContent) === null || _a === void 0 ? void 0 : _a.trimEnd()) !== null && _b !== void 0 ? _b : '');
         onEditMode();
     };
     const handleInputChange = (event) => {
@@ -72,6 +72,8 @@ const EditableContent = (props) => {
         // Prevent line breaks when textarea is a single line
         if (event.key === 'Enter' && inputRows === DEFAULT_TEXTAREA_ROWS) {
             event.preventDefault();
+            // Save on "enter" when textarea has a single line
+            handleSaveChanges();
         }
     };
     const handleCloseEditMode = () => {
@@ -83,7 +85,7 @@ const EditableContent = (props) => {
         setHasError(!isInputValid);
         if (isInputValid) {
             setIsEditMode(false);
-            onSave(inputValue);
+            onSave(inputValue.trimEnd());
         }
     };
     // Control edit mode from outside for instance if text element got focus
@@ -103,8 +105,7 @@ const EditableContent = (props) => {
         minWidth: '100px',
         resize: allowResize ? 'vertical' : 'none',
     };
-    // &nbsp handling if coming from outside -> check textarea for empty string and nbsp
     return (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ ref: setReferenceElement, onClick: handleEditMode, className: textWrapperClasses }, { children: children })), isEditMode &&
-                createPortal(_jsxs("div", Object.assign({ className: overlayWrapperClasses, onClick: event => event.stopPropagation(), ref: setPopperElement, style: styles.popper }, attributes.popper, remainingProps, { children: [_jsxs("div", Object.assign({ className: inputWrapperClasses }, { children: [hasCustomControl && customEditor, !hasCustomControl && (_jsx("textarea", { ref: inputRef, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, style: inputStyle, rows: inputRows })), hasError && _jsx("div", Object.assign({ className: 'help-block position-relative' }, { children: errorMessage }))] })), _jsxs("div", Object.assign({ className: 'display-flex gap-5' }, { children: [_jsx("button", Object.assign({ type: 'button', onClick: handleCloseEditMode, className: `EditableContentCancel btn btn-default btn-icon-only btn-${size}` }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) })), _jsx("button", Object.assign({ type: 'button', onClick: handleSaveChanges, className: `EditableContentSave btn btn-primary btn-icon-only btn-${size}` }, { children: _jsx("span", { className: 'rioglyph rioglyph-ok' }) }))] }))] })), getOrCreatePortalRoot())] }));
+                createPortal(_jsxs("div", Object.assign({ className: overlayWrapperClasses, onClick: event => event.stopPropagation(), ref: setPopperElement, style: styles.popper }, attributes.popper, remainingProps, { children: [_jsxs("div", Object.assign({ className: inputWrapperClasses }, { children: [hasCustomControl && customEditor, !hasCustomControl && (_jsx("textarea", { ref: inputRef, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, style: inputStyle, rows: inputRows })), hasError && _jsx("div", Object.assign({ className: 'help-block position-relative' }, { children: errorMessage }))] })), _jsxs("div", Object.assign({ className: 'display-flex gap-5' }, { children: [_jsx("button", Object.assign({ type: 'button', onClick: handleCloseEditMode, className: `EditableContentCancel btn btn-default btn-icon-only btn-${size}`, "aria-label": 'EditableContent cancel button', "data-testid": 'EditableContentCancel' }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) })), _jsx("button", Object.assign({ type: 'button', onClick: handleSaveChanges, className: `EditableContentSave btn btn-primary btn-icon-only btn-${size}`, "aria-label": 'EditableContent save button', "data-testid": 'EditableContentSave' }, { children: _jsx("span", { className: 'rioglyph rioglyph-ok' }) }))] }))] })), getOrCreatePortalRoot())] }));
 };
 export default EditableContent;

package/components/menuItems/MenuItem.js

@@ -12,8 +12,6 @@ const MenuItem = (props) => {
     }
     const role = divider ? 'separator' : 'presentation';
     const classes = classNames(divider && 'divider pointer-events-none', disabled && 'disabled', active && 'active');
-    // biome-ignore lint/a11y/useValidAnchor: <explanation>
-    const menuLink = _jsx("a", Object.assign({ role: 'menuitem' }, { children: value }));
     const handleSelectItem = (event) => {
         if (!disabled) {
             onSelect(index, event);
@@ -30,6 +28,6 @@ const MenuItem = (props) => {
     if (header) {
         return _jsx(DropdownHeader, { label: value, center: false });
     }
-    return (_jsx("li", Object.assign({ role: role, className: classes, onClick: handleSelectItem, onMouseEnter: handleItemMouseEnter, "data-item-index": index }, { children: header ? value : menuLink })));
+    return (_jsx("li", Object.assign({ role: role, className: classes, onClick: handleSelectItem, onMouseEnter: handleItemMouseEnter, "data-item-index": index }, { children: _jsx("a", Object.assign({ role: 'menuitem' }, { children: value })) })));
 };
 export default MenuItem;

package/components/menuItems/MenuItems.js

@@ -4,8 +4,8 @@ import noop from 'lodash/fp/noop';
 import MenuItemComponent from './MenuItem';
 const MenuItems = ({ items, closeMenu = noop, onMouseEnter = noop }) => {
     return (_jsx(_Fragment, { children: items.map((item, index) => {
-            var _a;
-            return (_jsx(MenuItemComponent, Object.assign({}, item, { index: index, closeMenu: closeMenu, onMouseEnter: onMouseEnter }), (_a = item.index) !== null && _a !== void 0 ? _a : index));
+            var _a, _b;
+            return (_jsx(MenuItemComponent, Object.assign({}, item, { index: (_a = item.index) !== null && _a !== void 0 ? _a : index, closeMenu: closeMenu, onMouseEnter: onMouseEnter }), (_b = item.index) !== null && _b !== void 0 ? _b : index));
         }) }));
 };
 export default MenuItems;

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

@@ -1,7 +1,23 @@
 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 = {

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

@@ -18,7 +18,7 @@ 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 = (suggestion) => suggestion.label, customSuggestionKey, getSuggestionValue = (suggestion) => { var _a; return (_a = suggestion.label) !== null && _a !== void 0 ? _a : suggestion === null || suggestion === void 0 ? void 0 : suggestion.customSuggestionKey; }, suggestions = [], autoDropDirection = true, pullRight = false, dropup = false, isLoading = false, openOnFocus = false, closeOnSelect = true, showSelectedItemsInInput = true, autoComplete = 'off', inputProps = {
+    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,
@@ -161,12 +161,18 @@ 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) => {
@@ -185,6 +191,7 @@ const AutoSuggest = (props) => {
         }
         return input;
     };
+    const renderDefaultSuggestion = (suggestion) => suggestion.label;
     const renderDropdownMenu = () => {
         const dropdownMenuClasses = (0, classnames_1.default)('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);
         if (isLoading) {
@@ -196,11 +203,17 @@ const AutoSuggest = (props) => {
         }
         return ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ role: 'menu', className: dropdownMenuClasses, ref: dropdownMenuRef }, { children: [hasNoSuggestions && noItemMessage && (0, jsx_runtime_1.jsx)(NoItemMessage_1.default, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
                     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 (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { label: suggestion.label }, key);
                     }
-                    return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { active: index === highlightedItemIndex, disabled: suggestion.disabled, value: suggestion.customSuggestion ? suggestion.customSuggestion : renderSuggestion(suggestion), onSelect: (_, event) => onSuggestionClicked(event, suggestion), index: index, onMouseEnter: onMouseEnter }, 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, onMouseEnter: onMouseEnter }, key));
                 })] })));
     };
     const classes = (0, classnames_1.default)('AutoSuggest', 'dropdown', isOpen && 'open', dropDirection.dropup && 'dropup', className);

package/lib/es/components/button/Button.js

@@ -8,7 +8,6 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const buttonEffect_1 = require("../../utils/buttonEffect");
 const useMergeRefs_1 = tslib_1.__importDefault(require("../../hooks/useMergeRefs"));
-const usePrevious_1 = tslib_1.__importDefault(require("../../hooks/usePrevious"));
 exports.STYLES_MAP = {
     DEFAULT: 'default',
     PRIMARY: 'primary',
@@ -37,9 +36,11 @@ const Button = react_1.default.forwardRef((props, ref) => {
     const btnRef = (0, react_1.useRef)(null);
     const buttonRef = (0, useMergeRefs_1.default)(btnRef, ref);
     // Update internal toggle state when used as controlled component and outside toggle state changes
-    const previousActive = (0, usePrevious_1.default)(active);
+    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here
+    const [previousActive, setPreviousActive] = (0, react_1.useState)(active);
     if (active !== previousActive) {
         setIsToggled(active);
+        setPreviousActive(active);
     }
     const handleClick = (event) => {
         var _a;

package/lib/es/components/datepicker/DatePicker.d.ts

@@ -66,7 +66,7 @@ export type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialVal
      * @param isValid
      * @returns
      */
-    onChange?: (value: Moment, isValid: boolean) => void;
+    onChange?: (value: Moment | string, isValid: boolean) => void;
     /**
      * Defines whether the input shows an error when the date is invalid or cleared.
      *
@@ -79,7 +79,7 @@ export type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialVal
      * @param date
      * @returns
      */
-    dateValidation?: (date: Moment) => boolean;
+    dateValidation?: (date: Moment | string) => boolean;
     /**
      * Additional classes to be set on the DatePicker element.
      */
@@ -150,7 +150,7 @@ declare const DatePicker: React.ForwardRefExoticComponent<Omit<Datetime.Datetime
      * @param isValid
      * @returns
      */
-    onChange?: ((value: Moment, isValid: boolean) => void) | undefined;
+    onChange?: ((value: Moment | string, isValid: boolean) => void) | undefined;
     /**
      * Defines whether the input shows an error when the date is invalid or cleared.
      *
@@ -163,7 +163,7 @@ declare const DatePicker: React.ForwardRefExoticComponent<Omit<Datetime.Datetime
      * @param date
      * @returns
      */
-    dateValidation?: ((date: Moment) => boolean) | undefined;
+    dateValidation?: ((date: Moment | string) => boolean) | undefined;
     /**
      * Additional classes to be set on the DatePicker element.
      */

package/lib/es/components/datepicker/DatePicker.js

@@ -4,28 +4,34 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const moment_1 = tslib_1.__importDefault(require("moment"));
 const react_datetime_1 = tslib_1.__importDefault(require("react-datetime"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const DEFAULT_LOCALE = 'en-GB';
 const DEFAULT_MIN_WIDTH = 0;
-const isValidDate = (date) => typeof date === 'object';
+const isValidDate = (date) => typeof date === 'object' && (0, moment_1.default)(date).isValid();
 const DatePicker = (0, react_1.forwardRef)((props, ref) => {
     const { id, dropup = false, alignRight = false, locale = DEFAULT_LOCALE, minWidth = DEFAULT_MIN_WIDTH, onChange = noop_1.default, mandatory = true, dateValidation, clearableInput = false, closeOnSelect = true, inputProps, className } = props, remainingProp = tslib_1.__rest(props, ["id", "dropup", "alignRight", "locale", "minWidth", "onChange", "mandatory", "dateValidation", "clearableInput", "closeOnSelect", "inputProps", "className"]);
     const [hasError, setHasError] = (0, react_1.useState)(false);
     const validateDate = (dateToValidate) => {
-        return dateValidation ? dateValidation(dateToValidate) : isValidDate(dateToValidate);
+        if (dateValidation) {
+            return dateValidation(dateToValidate);
+        }
+        // if the date is mandatory, convert it to a moment object to validate
+        const value = (0, isEmpty_1.default)(dateToValidate) ? undefined : dateToValidate;
+        const dateValue = typeof value === 'string' ? (0, moment_1.default)(value) : value;
+        return isValidDate(dateValue);
     };
     const handleChange = (date) => {
-        const dateValue = typeof date === 'string' ? (0, moment_1.default)(date) : date;
-        const isValid = mandatory ? validateDate(dateValue) : true;
+        const isValid = mandatory ? validateDate(date) : true;
         setHasError(!isValid);
-        onChange(dateValue, isValid);
+        onChange(date, isValid);
     };
     const classes = (0, classnames_1.default)('DatePicker', 'form-group', hasError && 'has-error', dropup && 'dropup', alignRight && 'align-right', className && className);
     // This way we can expose the "id" as top level prop and not as part of the inputProps which
     // makes the use of the id much more convenient
-    const enhancedInputProps = Object.assign(Object.assign({}, inputProps), { id });
+    const enhancedInputProps = Object.assign({ id }, inputProps);
     return ((0, jsx_runtime_1.jsx)(react_datetime_1.default
     // TODO: add support for setting ref to the input. Maybe add a "inputRef" prop to react-datetime
     // ref={ref}

package/lib/es/components/dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-export type bsSizeDialog = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullscreen';
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullscreen';
 export type BaseDialogProps = {
     /**
      * Opens the dialog when set to `true`.
@@ -22,7 +22,7 @@ export type BaseDialogProps = {
     /**
      * A callback function invoked when the dialog closes.
      */
-    onClose?: Function;
+    onClose?: () => void;
     /**
      * Defined how large the dialog will be rendered.
      * By default, the dialog has a medium size and thus it can be omitted.
@@ -30,7 +30,7 @@ export type BaseDialogProps = {
      * Possible values are: `xs`, `sm`, `lg` `xl` `fullwidth` `fullheight` `fullscreen`
      * @default 'md'
      */
-    bsSize?: bsSizeDialog;
+    bsSize?: DialogSize;
     /**
      * Enables or disabled closing the dialog via esc key.
      * @default false
@@ -55,7 +55,7 @@ export type DialogProps = BaseDialogProps & {
     /**
      * The dialog body content.
      */
-    body: React.ReactNode;
+    body?: React.ReactNode;
     /**
      * The dialog body content.
      */

package/lib/es/components/dialog/Dialog.js

@@ -10,7 +10,7 @@ const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const framer_motion_1 = require("framer-motion");
 const portalRoot_1 = require("../../utils/portalRoot");
 const useEsc_1 = tslib_1.__importDefault(require("../../hooks/useEsc"));
-const useAfterMount_1 = tslib_1.__importDefault(require("../../hooks/useAfterMount"));
+require("../../hooks/useAfterMount");
 const DialogHeader_1 = tslib_1.__importDefault(require("./DialogHeader"));
 const DialogBody_1 = tslib_1.__importDefault(require("./DialogBody"));
 const DialogFooter_1 = tslib_1.__importDefault(require("./DialogFooter"));
@@ -48,10 +48,12 @@ const Dialog = (props) => {
             usedEscapeKey && onEsc();
         }
     };
-    (0, useAfterMount_1.default)(() => {
+    const [previousShow, setPreviousShow] = (0, react_1.useState)(show);
+    if (show !== previousShow) {
         setOpen(show);
         toggleBodyClass(show);
-    }, [show]);
+        setPreviousShow(show);
+    }
     (0, useEsc_1.default)(() => {
         if (!dialogWrapperRef || !dialogWrapperRef.current) {
             return;
@@ -85,7 +87,7 @@ const Dialog = (props) => {
     const modalClasses = (0, classnames_1.default)('modal', 'show', className);
     const isSmallestDialog = bsSize === 'xs';
     const hasChildren = !!children;
-    const modalDialogClasses = (0, classnames_1.default)(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === 'xs' && 'modal-xs', bsSize === 'sm' && 'modal-sm', bsSize === 'lg' && 'modal-lg', bsSize === 'lg' && 'modal-xl', bsSize === 'full' && 'modal-full-width', bsSize === 'fullwidth' && 'modal-full-width', bsSize === 'fullheight' && 'modal-full-height', bsSize === 'fullscreen' && 'modal-fullscreen');
+    const modalDialogClasses = (0, classnames_1.default)(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === 'xs' && 'modal-xs', bsSize === 'sm' && 'modal-sm', bsSize === 'lg' && 'modal-lg', bsSize === 'xl' && 'modal-xl', bsSize === 'full' && 'modal-full-width', bsSize === 'fullwidth' && 'modal-full-width', bsSize === 'fullheight' && 'modal-full-height', bsSize === 'fullscreen' && 'modal-fullscreen');
     const spring = {
         type: 'spring',
         damping: 33,

package/lib/es/components/dropdown/ButtonDropdown.js

@@ -28,7 +28,7 @@ const getPlacement = (pullRight, dropup) => {
     return 'bottom-start';
 };
 const ButtonDropdown = (props) => {
-    const { id = Math.random().toString(36).substr(2, 16), items = [], bsSize = 'md', bsStyle = 'default', disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop_1.default, onClose = noop_1.default, onLabelButtonClick = noop_1.default, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = tslib_1.__rest(props, ["id", "items", "bsSize", "bsStyle", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
+    const { id = Math.random().toString(36).substr(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop_1.default, onClose = noop_1.default, onLabelButtonClick = noop_1.default, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = tslib_1.__rest(props, ["id", "items", "bsSize", "bsStyle", "variant", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
     const [internalOpen, setInternalOpen] = (0, react_1.useState)(open);
     const [refDropdownToggle, setRefDropdownToggle] = (0, react_1.useState)(null);
     const [refDropdownMenu, setRefDropdownMenu] = (0, react_1.useState)(null);
@@ -78,6 +78,6 @@ const ButtonDropdown = (props) => {
     const wrapperClasses = (0, classnames_1.default)('dropdown', 'btn-group', isOpen && 'open', className);
     const dropdownClasses = (0, classnames_1.default)(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
     const dropdownMenu = ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, Object.assign({ className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper }, attributes.popper, { children: customDropdown ? customDropdown : (0, jsx_runtime_1.jsx)(MenuItems_1.default, { items: items, closeMenu: toggleOpen }) })));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [(0, jsx_runtime_1.jsx)(DropdownToggleButton_1.default, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, className: toggleClassName }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, shouldShowCaret && (0, jsx_runtime_1.jsx)(Caret_1.default, {})] }) })), splitButton && ((0, jsx_runtime_1.jsx)(SplitCaretButton_1.default, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && react_dom_1.default.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [(0, jsx_runtime_1.jsx)(DropdownToggleButton_1.default, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, className: toggleClassName }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, shouldShowCaret && (0, jsx_runtime_1.jsx)(Caret_1.default, {})] }) })), splitButton && ((0, jsx_runtime_1.jsx)(SplitCaretButton_1.default, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && react_dom_1.default.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
 };
 exports.default = ButtonDropdown;

package/lib/es/components/dropdown/DropdownToggleButton.d.ts

@@ -1,5 +1,5 @@
 import React, { type HTMLProps } from 'react';
-import { type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';
+import { type BUTTON_VARIANT, type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';
 export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     id?: string;
     disabled?: boolean;
@@ -8,6 +8,7 @@ export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     bsSize: BUTTON_SIZE;
     bsStyle: BUTTON_STYLE;
+    variant?: BUTTON_VARIANT;
     className?: string;
 };
 declare const DropdownToggleButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<DropdownToggleButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/lib/es/components/dropdown/DropdownToggleButton.js

@@ -6,8 +6,8 @@ const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Button_1 = tslib_1.__importDefault(require("../button/Button"));
 const DropdownToggleButton = (0, react_1.forwardRef)((props, ref) => {
-    const { id, disabled, bsSize, bsStyle, splitButton = false, onClick, className = '', children } = props, remainingProps = tslib_1.__rest(props, ["id", "disabled", "bsSize", "bsStyle", "splitButton", "onClick", "className", "children"]);
+    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children } = props, remainingProps = tslib_1.__rest(props, ["id", "disabled", "bsSize", "bsStyle", "variant", "splitButton", "onClick", "className", "children"]);
     const labelButtonClasses = (0, classnames_1.default)(!splitButton && 'dropdown-toggle', !splitButton && className);
-    return ((0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, onClick: onClick, className: labelButtonClasses }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses }, { children: children })));
 });
 exports.default = DropdownToggleButton;

package/lib/es/components/editableContent/EditableContent.d.ts

@@ -66,6 +66,8 @@ export type EditableContentProps = {
     allowResize?: boolean;
     /**
      * Defines the number of rows to use by the internal textarea component.
+     * When a single line is used, the input is saved on "enter" key.
+     *
      * @default 1
      */
     inputRows?: number;

package/lib/es/components/editableContent/EditableContent.js

@@ -62,9 +62,9 @@ const EditableContent = (props) => {
     };
     const { styles, attributes } = (0, react_popper_1.usePopper)(referenceElement, popperElement, popperConfig);
     const handleEditMode = () => {
-        var _a;
+        var _a, _b;
         setIsEditMode(true);
-        setInputValue((_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.textContent) !== null && _a !== void 0 ? _a : '');
+        setInputValue((_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.textContent) === null || _a === void 0 ? void 0 : _a.trimEnd()) !== null && _b !== void 0 ? _b : '');
         onEditMode();
     };
     const handleInputChange = (event) => {
@@ -74,6 +74,8 @@ const EditableContent = (props) => {
         // Prevent line breaks when textarea is a single line
         if (event.key === 'Enter' && inputRows === DEFAULT_TEXTAREA_ROWS) {
             event.preventDefault();
+            // Save on "enter" when textarea has a single line
+            handleSaveChanges();
         }
     };
     const handleCloseEditMode = () => {
@@ -85,7 +87,7 @@ const EditableContent = (props) => {
         setHasError(!isInputValid);
         if (isInputValid) {
             setIsEditMode(false);
-            onSave(inputValue);
+            onSave(inputValue.trimEnd());
         }
     };
     // Control edit mode from outside for instance if text element got focus
@@ -105,8 +107,7 @@ const EditableContent = (props) => {
         minWidth: '100px',
         resize: allowResize ? 'vertical' : 'none',
     };
-    // &nbsp handling if coming from outside -> check textarea for empty string and nbsp
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ ref: setReferenceElement, onClick: handleEditMode, className: textWrapperClasses }, { children: children })), isEditMode &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: overlayWrapperClasses, onClick: event => event.stopPropagation(), ref: setPopperElement, style: styles.popper }, attributes.popper, remainingProps, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: inputWrapperClasses }, { children: [hasCustomControl && customEditor, !hasCustomControl && ((0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, style: inputStyle, rows: inputRows })), hasError && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'help-block position-relative' }, { children: errorMessage }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex gap-5' }, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', onClick: handleCloseEditMode, className: `EditableContentCancel btn btn-default btn-icon-only btn-${size}` }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })), (0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', onClick: handleSaveChanges, className: `EditableContentSave btn btn-primary btn-icon-only btn-${size}` }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-ok' }) }))] }))] })), (0, portalRoot_1.getOrCreatePortalRoot)())] }));
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: overlayWrapperClasses, onClick: event => event.stopPropagation(), ref: setPopperElement, style: styles.popper }, attributes.popper, remainingProps, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: inputWrapperClasses }, { children: [hasCustomControl && customEditor, !hasCustomControl && ((0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, style: inputStyle, rows: inputRows })), hasError && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'help-block position-relative' }, { children: errorMessage }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex gap-5' }, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', onClick: handleCloseEditMode, className: `EditableContentCancel btn btn-default btn-icon-only btn-${size}`, "aria-label": 'EditableContent cancel button', "data-testid": 'EditableContentCancel' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })), (0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', onClick: handleSaveChanges, className: `EditableContentSave btn btn-primary btn-icon-only btn-${size}`, "aria-label": 'EditableContent save button', "data-testid": 'EditableContentSave' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-ok' }) }))] }))] })), (0, portalRoot_1.getOrCreatePortalRoot)())] }));
 };
 exports.default = EditableContent;

package/lib/es/components/menuItems/MenuItem.js

@@ -15,8 +15,6 @@ const MenuItem = (props) => {
     }
     const role = divider ? 'separator' : 'presentation';
     const classes = (0, classnames_1.default)(divider && 'divider pointer-events-none', disabled && 'disabled', active && 'active');
-    // biome-ignore lint/a11y/useValidAnchor: <explanation>
-    const menuLink = (0, jsx_runtime_1.jsx)("a", Object.assign({ role: 'menuitem' }, { children: value }));
     const handleSelectItem = (event) => {
         if (!disabled) {
             onSelect(index, event);
@@ -33,6 +31,6 @@ const MenuItem = (props) => {
     if (header) {
         return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { label: value, center: false });
     }
-    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ role: role, className: classes, onClick: handleSelectItem, onMouseEnter: handleItemMouseEnter, "data-item-index": index }, { children: header ? value : menuLink })));
+    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ role: role, className: classes, onClick: handleSelectItem, onMouseEnter: handleItemMouseEnter, "data-item-index": index }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ role: 'menuitem' }, { children: value })) })));
 };
 exports.default = MenuItem;

package/lib/es/components/menuItems/MenuItems.js

@@ -7,8 +7,8 @@ const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const MenuItem_1 = tslib_1.__importDefault(require("./MenuItem"));
 const MenuItems = ({ items, closeMenu = noop_1.default, onMouseEnter = noop_1.default }) => {
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.map((item, index) => {
-            var _a;
-            return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({}, item, { index: index, closeMenu: closeMenu, onMouseEnter: onMouseEnter }), (_a = item.index) !== null && _a !== void 0 ? _a : index));
+            var _a, _b;
+            return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({}, item, { index: (_a = item.index) !== null && _a !== void 0 ? _a : index, closeMenu: closeMenu, onMouseEnter: onMouseEnter }), (_b = item.index) !== null && _b !== void 0 ? _b : index));
         }) }));
 };
 exports.default = MenuItems;

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.4-beta.23"
+    "version": "0.16.4-beta.24"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.4-beta.23",
+    "version": "0.16.4-beta.24",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -48,36 +48,36 @@
         "**/*.*"
     ],
     "devDependencies": {
-        "@react-email/body": "0.0.4",
-        "@react-email/button": "0.0.11",
-        "@react-email/column": "0.0.8",
-        "@react-email/container": "0.0.10",
-        "@react-email/font": "0.0.4",
-        "@react-email/head": "0.0.6",
-        "@react-email/heading": "0.0.9",
-        "@react-email/hr": "0.0.6",
-        "@react-email/html": "0.0.6",
-        "@react-email/img": "0.0.6",
-        "@react-email/link": "0.0.6",
-        "@react-email/preview": "0.0.7",
-        "@react-email/render": "0.0.9",
-        "@react-email/row": "0.0.6",
-        "@react-email/section": "0.0.10",
-        "@react-email/text": "0.0.6",
+        "@react-email/body": "0.0.7",
+        "@react-email/button": "0.0.13",
+        "@react-email/column": "0.0.9",
+        "@react-email/container": "0.0.11",
+        "@react-email/font": "0.0.5",
+        "@react-email/head": "0.0.7",
+        "@react-email/heading": "0.0.11",
+        "@react-email/hr": "0.0.7",
+        "@react-email/html": "0.0.7",
+        "@react-email/img": "0.0.7",
+        "@react-email/link": "0.0.7",
+        "@react-email/preview": "0.0.8",
+        "@react-email/render": "0.0.10",
+        "@react-email/row": "0.0.7",
+        "@react-email/section": "0.0.11",
+        "@react-email/text": "0.0.7",
         "@testing-library/dom": "9.3.3",
         "@testing-library/jest-dom": "5.17.0",
         "@testing-library/react": "12.1.5",
         "@testing-library/user-event": "14.5.1",
         "@types/heremaps": "^3.1.14",
         "@types/lodash": "4.14.202",
-        "@types/react": "18.2.39",
+        "@types/react": "18.2.42",
         "@types/react-dom": "18.2.17",
         "@types/react-input-mask": "3.0.5",
-        "@types/react-redux": "7.1.31",
-        "@types/resize-observer-browser": "0.1.10",
-        "@typescript-eslint/eslint-plugin": "6.13.1",
-        "@typescript-eslint/parser": "6.13.1",
-        "@vitejs/plugin-react": "4.2.0",
+        "@types/react-redux": "7.1.32",
+        "@types/resize-observer-browser": "0.1.11",
+        "@typescript-eslint/eslint-plugin": "6.13.2",
+        "@typescript-eslint/parser": "6.13.2",
+        "@vitejs/plugin-react": "4.2.1",
         "@vitest/coverage-c8": "0.33.0",
         "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
         "autoprefixer": "10.4.16",
@@ -86,8 +86,8 @@
         "dotenv": "16.3.1",
         "enzyme": "3.11.0",
         "enzyme-adapter-react-16": "1.15.7",
-        "eslint": "8.54.0",
-        "eslint-config-prettier": "9.0.0",
+        "eslint": "8.55.0",
+        "eslint-config-prettier": "9.1.0",
         "eslint-plugin-compat": "4.2.0",
         "eslint-plugin-getsentry": "2.0.0",
         "eslint-plugin-import": "2.29.0",
@@ -99,7 +99,7 @@
         "jsdom-global": "3.0.2",
         "less": "4.2.0",
         "license-checker": "25.0.1",
-        "postcss": "8.4.31",
+        "postcss": "8.4.32",
         "postcss-preset-env": "8.5.1",
         "postcss-short": "5.0.0",
         "postcss-variable-compress": "2.1.0",
@@ -110,12 +110,12 @@
         "react-intl": "6.5.5",
         "rollup-plugin-copy": "3.5.0",
         "strip-ansi": "7.1.0",
-        "svgo": "3.0.4",
+        "svgo": "3.0.5",
         "tiny-invariant": "^1.3.1",
         "typescript": "4.9.5",
         "vite": "4.5.0",
         "vite-plugin-zip-pack": "1.0.6",
-        "vitest": "0.34.6",
+        "vitest": "1.0.1",
         "webfonts-generator": "github:rio-cloud/webfonts-generator#f666e60803da9155175a7f1775e09671d47a383b"
     },
     "peerDependencies": {
@@ -148,7 +148,7 @@
         "react-responsive": "9.0.2",
         "react-shadow-root": "6.2.0",
         "react-transition-group": "4.4.5",
-        "recharts": "2.10.2",
+        "recharts": "2.10.3",
         "tslib": "2.6.2"
     },
     "pre-commit": [

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.4-beta.23"
+    "version": "0.16.4-beta.24"
 }