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

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

@@ -18,7 +18,8 @@ const AutoSuggestAddons_1 = tslib_1.__importDefault(require("./AutoSuggestAddons
 const DropdownSpinner_1 = tslib_1.__importDefault(require("./DropdownSpinner"));
 const NoItemMessage_1 = tslib_1.__importDefault(require("./NoItemMessage"));
 const AutoSuggest = (props) => {
-    const { onSuggestionSelected = noop_1.default, onSuggestionsFetchRequested = noop_1.default, onSuggestionHighlighted = noop_1.default, renderSuggestion = suggestion => suggestion.label, getSuggestionValue = suggestion => suggestion.label, suggestions = [], autoDropDirection = true, pullRight = false, dropup = false, isLoading = false, openOnFocus = false, closeOnSelect = true, showSelectedItemsInInput = true, autoComplete = 'off', inputProps = {
+    const { id, onSuggestionSelected = noop_1.default, onSuggestionsFetchRequested = noop_1.default, onSuggestionHighlighted = noop_1.default, renderSuggestion, customSuggestionKey, getSuggestionValue, suggestions = [], autoDropDirection = true, pullRight = false, dropup = false, isLoading = false, openOnFocus = false, closeOnSelect = true, showSelectedItemsInInput = true, autoComplete = 'off', inputProps = {
+        id,
         disabled: false,
         onChange: noop_1.default,
         onClear: noop_1.default,
@@ -29,7 +30,7 @@ const AutoSuggest = (props) => {
         tabIndex: 0,
         value: undefined,
         icon: undefined,
-    }, leadingInputAddons, trailingInputAddons, noItemMessage, dropdownClassName = '', className = '' } = props, remainingProps = tslib_1.__rest(props, ["onSuggestionSelected", "onSuggestionsFetchRequested", "onSuggestionHighlighted", "renderSuggestion", "getSuggestionValue", "suggestions", "autoDropDirection", "pullRight", "dropup", "isLoading", "openOnFocus", "closeOnSelect", "showSelectedItemsInInput", "autoComplete", "inputProps", "leadingInputAddons", "trailingInputAddons", "noItemMessage", "dropdownClassName", "className"]);
+    }, leadingInputAddons, trailingInputAddons, noItemMessage, dropdownClassName = '', className = '' } = props, remainingProps = tslib_1.__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] = (0, react_1.useState)(false);
     const [value, setValue] = (0, react_1.useState)(inputProps.value || '');
     const [highlightedItemIndex, setHighlightedItemIndex] = (0, react_1.useState)(-1);
@@ -51,7 +52,8 @@ 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
     (0, react_1.useEffect)(() => {
-        (0, scrollItemIntoView_1.scrollItemIntoView)(direction, dropdownMenuRef.current, getFocusedOptionNode());
+        const focusedItem = getFocusedOptionNode();
+        (0, scrollItemIntoView_1.scrollItemIntoView)(direction, dropdownMenuRef.current, focusedItem);
     }, [highlightedItemIndex, direction]);
     // Used to store the list item reference to allow highlighting a single node.
     // Update that list of nodes again when the suggestions change from the outside.
@@ -160,30 +162,30 @@ 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 = tslib_1.__rest(inputProps, ["icon", "value"]);
-        const clearableProps = Object.assign(Object.assign({}, remainingInputProps), { onClick: () => openMenu });
-        const input = ((0, jsx_runtime_1.jsx)(ClearableInput_1.default, Object.assign({}, clearableProps, { ref: inputRef, autoComplete: autoComplete, onChange: handleInputChange, onClear: clearInputValue, onFocus: handleFocus, value: showSelectedItemsInInput ? value : '' })));
+        const { id: inputPropId, icon, value: ignoredExternalValue } = inputProps, remainingInputProps = tslib_1.__rest(inputProps, ["id", "icon", "value"]);
+        const clearableProps = Object.assign({ id: id !== null && id !== void 0 ? id : inputPropId }, remainingInputProps);
+        const input = ((0, jsx_runtime_1.jsx)(ClearableInput_1.default, Object.assign({}, clearableProps, { ref: inputRef, autoComplete: autoComplete, onChange: handleInputChange, onClear: clearInputValue, onFocus: handleFocus, onClick: openMenu, value: showSelectedItemsInInput ? value : '' })));
         if (icon || leadingInputAddons || trailingInputAddons) {
             return ((0, jsx_runtime_1.jsx)(AutoSuggestAddons_1.default, Object.assign({ icon: icon, leadingInputAddons: leadingInputAddons, trailingInputAddons: trailingInputAddons }, { children: input })));
         }
         return input;
     };
+    const renderDefaultSuggestion = (suggestion) => suggestion.label;
     const renderDropdownMenu = () => {
         const dropdownMenuClasses = (0, classnames_1.default)('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);
         if (isLoading) {
@@ -194,10 +196,18 @@ const AutoSuggest = (props) => {
             return null;
         }
         return ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ role: 'menu', className: dropdownMenuClasses, ref: dropdownMenuRef }, { children: [hasNoSuggestions && noItemMessage && (0, jsx_runtime_1.jsx)(NoItemMessage_1.default, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
-                    if (suggestion.header) {
-                        return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { label: suggestion.label }, suggestion.label);
+                    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 }, `index-${suggestion.label}`));
+                    const renderFunction = renderSuggestion ? renderSuggestion : renderDefaultSuggestion;
+                    return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { active: index === highlightedItemIndex, disabled: suggestion.disabled, value: suggestion.customSuggestion ? suggestion.customSuggestion : renderFunction(suggestion), onSelect: (_, event) => onSuggestionClicked(event, suggestion), index: index }, key));
                 })] })));
     };
     const classes = (0, classnames_1.default)('AutoSuggest', 'dropdown', isOpen && 'open', dropDirection.dropup && 'dropup', className);

package/lib/es/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/lib/es/components/bottomSheet/BottomSheet.js

@@ -11,7 +11,7 @@ const portalRoot_1 = require("../../utils/portalRoot");
 const OFFSET_POSITION = -1000;
 const DEFAULT_OFFSET_PX = 15;
 const BottomSheet = (props) => {
-    const { show = false, onClose, width, height, title, detach = false, detachOffset = DEFAULT_OFFSET_PX, useBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { } } = props, remainingProps = tslib_1.__rest(props, ["show", "onClose", "width", "height", "title", "detach", "detachOffset", "useBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children", "onBackdropClick"]);
+    const { 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 = tslib_1.__rest(props, ["show", "onClose", "width", "height", "title", "detach", "detachOffset", "hasBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children", "onBackdropClick"]);
     const [isShown, setIsShown] = (0, react_1.useState)(show);
     const [isMaxHeight, setIsMaxHeight] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => setIsShown(show), [show]);
@@ -52,6 +52,6 @@ const BottomSheet = (props) => {
                     height: isShown ? sheetHeight : 0,
                 } }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'bottom-sheet-header' }, { children: [title && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-size-18' }, { children: title })) }))), showCloseButton && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'bottom-sheet-close position-absolute top-10 right-10' }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', className: 'btn btn-muted btn-sm btn-icon-only', onClick: handleToggle }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })) }))), showMaximizeButton && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'bottom-sheet-maximize height-30 ' +
-                                    'position-absolute top-5 left-50pct translate-x-50 cursor-pointer', onClick: handleMaximize }, { children: (0, jsx_runtime_1.jsx)("div", { className: 'height-5 width-40 rounded bg-lighter' }) })))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: sheetBodyClasses, ref: bodyRef }, { children: isShown && children }))] })), useBackdrop && isShown && (0, jsx_runtime_1.jsx)("div", { className: 'bottom-sheet-backdrop', onClick: handleBackdropClick })] }), modalRoot);
+                                    'position-absolute top-5 left-50pct translate-x-50 cursor-pointer', onClick: handleMaximize }, { children: (0, jsx_runtime_1.jsx)("div", { className: 'height-5 width-40 rounded bg-lighter' }) })))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: sheetBodyClasses, ref: bodyRef }, { children: isShown && children }))] })), hasBackdrop && isShown && (0, jsx_runtime_1.jsx)("div", { className: 'bottom-sheet-backdrop', onClick: handleBackdropClick })] }), modalRoot);
 };
 exports.default = BottomSheet;

package/lib/es/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;

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimedBottomSheet = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const BottomSheet_1 = tslib_1.__importDefault(require("./BottomSheet"));
+const useTimeout_1 = tslib_1.__importDefault(require("../../hooks/useTimeout"));
+const useLocalStorage_1 = tslib_1.__importDefault(require("../../useLocalStorage"));
+const DEFAULT_SHOW_AFTER = 0; // immediately after mount
+const DEFAULT_HIDE_AFTER = 3600000; // after 1 hour
+const sanitizeFeatureName = (value) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`.replaceAll(' ', '');
+/**
+ * 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>
+    );
+ */
+const TimedBottomSheet = (props) => {
+    const { dismissed = false, featureName, showAfter = DEFAULT_SHOW_AFTER, hideAfter = DEFAULT_HIDE_AFTER, alwaysOn = false, showCloseButton = true, width, cleanupLocalStorage = false, onClose = noop_1.default, bodyClassName = 'padding-25 margin-right-25', localStoragePrefix = '', className, children } = props, remainingProps = tslib_1.__rest(props, ["dismissed", "featureName", "showAfter", "hideAfter", "alwaysOn", "showCloseButton", "width", "cleanupLocalStorage", "onClose", "bodyClassName", "localStoragePrefix", "className", "children"]);
+    const [showBottomSheet, setShowBottomSheet] = (0, react_1.useState)(false);
+    const [isHiddenByUser, setIsHiddenByUser, removeIsHiddenFlag] = (0, useLocalStorage_1.default)(`${localStoragePrefix}hide${sanitizeFeatureName(featureName)}`, false);
+    // In case the visibility is controlled by the outside, means the user clicked on the
+    // content of the bottom sheet, close the sheet and set the localStorage flag for not
+    // showing it again
+    const [prevDismissed, setPrevDismissed] = (0, react_1.useState)(dismissed);
+    if (dismissed && dismissed !== prevDismissed) {
+        setPrevDismissed(dismissed);
+        setIsHiddenByUser(true);
+        setShowBottomSheet(false);
+    }
+    // Show the bottom sheet automatically after a given amount of time
+    (0, useTimeout_1.default)(() => {
+        if (!dismissed && !isHiddenByUser && !cleanupLocalStorage) {
+            setShowBottomSheet(true);
+        }
+    }, showAfter);
+    // Hide the bottom sheet automatically after a given amount of time
+    (0, useTimeout_1.default)(() => setShowBottomSheet(alwaysOn ? true : false), showAfter + hideAfter);
+    // Cleanup functionality. The cleanup will remove the localStorage flag on mount
+    // and will not show the bottom sheet.
+    (0, react_1.useEffect)(() => {
+        if (cleanupLocalStorage) {
+            removeIsHiddenFlag();
+        }
+    }, []);
+    const handleCloseBottomSheet = () => {
+        setShowBottomSheet(false);
+        setIsHiddenByUser(true);
+        onClose();
+    };
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { children: (0, jsx_runtime_1.jsx)(BottomSheet_1.default, Object.assign({ show: showBottomSheet, width: width, detach: true, showCloseButton: showCloseButton, onClose: handleCloseBottomSheet, className: className, bodyClassName: bodyClassName }, { children: children })) })));
+};
+exports.TimedBottomSheet = TimedBottomSheet;
+exports.default = exports.TimedBottomSheet;

package/lib/es/components/button/Button.d.ts

@@ -1,6 +1,6 @@
-import { type PropsWithChildren, type SyntheticEvent } from 'react';
+import React, { type ForwardRefExoticComponent, type HTMLProps, type PropsWithChildren, type RefAttributes } from 'react';
 import type { ObjectValues } from '../../utils/ObjectValues';
-declare const STYLES_MAP: {
+export declare const STYLES_MAP: {
     readonly DEFAULT: "default";
     readonly PRIMARY: "primary";
     readonly SECONDARY: "secondary";
@@ -10,22 +10,22 @@ declare const STYLES_MAP: {
     readonly SUCCESS: "success";
     readonly MUTED: "muted";
 };
-type STYLE = ObjectValues<typeof STYLES_MAP>;
-declare const VARIANTS_MAP: {
+export type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;
+export declare const VARIANTS_MAP: {
     readonly VARIANT_LINK: "link";
     readonly VARIANT_LINK_INLINE: "link-inline";
     readonly VARIANT_OUTLINE: "outline";
     readonly VARIANT_ACTION: "action";
 };
-type VARIANT = ObjectValues<typeof VARIANTS_MAP>;
-declare const SIZES_MAP: {
+export type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;
+export declare const SIZES_MAP: {
     readonly XS: "xs";
     readonly SM: "sm";
     readonly MD: "md";
     readonly LG: "lg";
 };
-type SIZE = ObjectValues<typeof SIZES_MAP>;
-type RegularButtonProps = {
+export type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;
+type RegularButton = {
     /**
      * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.
      * @default false
@@ -35,9 +35,9 @@ type RegularButtonProps = {
      * Callback function triggered when clicking the button.
      * @param event The MouseEvent that triggered the click.
      */
-    onClick?: (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
-type ToggleButtonProps = {
+type ToggleButton = {
     /**
      * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.
      * @default false
@@ -49,23 +49,39 @@ type ToggleButtonProps = {
      */
     onClick?: (value: boolean) => void;
 };
-export type ButtonProps = {
+export type ButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick'> & {
+    /**
+     * Whether the button should be disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Set the button toggled. Should be used in combination with "asToggle" prop.
      * @default false
      */
     active?: boolean;
     /**
-     * Whether the button should be disabled.
-     *
-     * @default false
+     * Defines the type of the button. This may be used for form submit buttons.
+     * @default 'button'
      */
-    disabled?: boolean;
+    type?: 'button' | 'submit';
     /**
      * Use when the content of the button is an icon only to adapt the button spacing accordingly.
      * @default false
      */
     iconOnly?: boolean;
+    /**
+     * Adds right side spacing for an icon. This should be used when having navigation buttons
+     * that use an icon on the right side.
+     * @default false
+     */
+    iconRight?: boolean;
+    /**
+     * Optional rio-glyph icon name that comes in handy for icon only buttons for not adding
+     * a span tag for the icon which reduces boilerplate code.
+     */
+    iconName?: string;
     /**
      * Defines whether the button text break into multiple lines when the button space exceeds.
      *
@@ -82,41 +98,47 @@ export type ButtonProps = {
      * Sets the button style.
      * @default "default"
      */
-    bsStyle?: STYLE;
+    bsStyle?: BUTTON_STYLE;
     /**
      * Sets the button size.
      */
-    bsSize?: SIZE;
+    bsSize?: BUTTON_SIZE;
     /**
      * Sets the button variant.
      */
-    variant?: VARIANT;
+    variant?: BUTTON_VARIANT;
     /**
      * Whether the "ripple" effect should be suppressed on this button.
      */
     noRippleEffect?: boolean;
+    /**
+     * Number of the index used for keyboard support.
+     * @default 0
+     */
+    tabIndex?: number;
     /**
      * Additional classes to be set on the button element.
      */
     className?: string;
-} & (RegularButtonProps | ToggleButtonProps);
-declare const Button: {
-    (props: PropsWithChildren<ButtonProps>): import("react/jsx-runtime").JSX.Element;
-    DEFAULT: "default";
-    PRIMARY: "primary";
-    SECONDARY: "secondary";
-    INFO: "info";
-    WARNING: "warning";
-    DANGER: "danger";
-    SUCCESS: "success";
-    MUTED: "muted";
-    VARIANT_LINK: "link";
-    VARIANT_LINK_INLINE: "link-inline";
-    VARIANT_OUTLINE: "outline";
-    VARIANT_ACTION: "action";
-    XS: "xs";
-    SM: "sm";
-    MD: "md";
-    LG: "lg";
+} & (RegularButton | ToggleButton);
+type Props = PropsWithChildren<ButtonProps>;
+type ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {
+    DEFAULT: 'default';
+    PRIMARY: 'primary';
+    SECONDARY: 'secondary';
+    INFO: 'info';
+    WARNING: 'warning';
+    DANGER: 'danger';
+    SUCCESS: 'success';
+    MUTED: 'muted';
+    VARIANT_LINK: 'link';
+    VARIANT_LINK_INLINE: 'link-inline';
+    VARIANT_OUTLINE: 'outline';
+    VARIANT_ACTION: 'action';
+    XS: 'xs';
+    SM: 'sm';
+    MD: 'md';
+    LG: 'lg';
 };
+declare const Button: ButtonType;
 export default Button;

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

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIZES_MAP = exports.VARIANTS_MAP = exports.STYLES_MAP = void 0;
 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 buttonEffect_1 = require("../../utils/buttonEffect");
-const STYLES_MAP = {
+const useMergeRefs_1 = tslib_1.__importDefault(require("../../hooks/useMergeRefs"));
+exports.STYLES_MAP = {
     DEFAULT: 'default',
     PRIMARY: 'primary',
     SECONDARY: 'secondary',
@@ -16,23 +18,25 @@ const STYLES_MAP = {
     SUCCESS: 'success',
     MUTED: 'muted',
 };
-const VARIANTS_MAP = {
+exports.VARIANTS_MAP = {
     VARIANT_LINK: 'link',
     VARIANT_LINK_INLINE: 'link-inline',
     VARIANT_OUTLINE: 'outline',
     VARIANT_ACTION: 'action',
 };
-const SIZES_MAP = {
+exports.SIZES_MAP = {
     XS: 'xs',
     SM: 'sm',
     MD: 'md',
     LG: 'lg',
 };
-const Button = (props) => {
-    const { active = false, disabled = false, asToggle = false, onClick = noop_1.default, bsStyle = 'default', bsSize, variant, iconOnly = false, multiline = false, block = false, className = '', noRippleEffect = false, children } = props, remainingProps = tslib_1.__rest(props, ["active", "disabled", "asToggle", "onClick", "bsStyle", "bsSize", "variant", "iconOnly", "multiline", "block", "className", "noRippleEffect", "children"]);
+const Button = (0, react_1.forwardRef)((props, ref) => {
+    const { active = false, disabled = false, asToggle = false, onClick = noop_1.default, bsStyle = 'default', bsSize, variant, iconOnly = false, iconName, iconRight = false, multiline = false, block = false, className = '', noRippleEffect = false, type = 'button', tabIndex = 0, children } = props, remainingProps = tslib_1.__rest(props, ["active", "disabled", "asToggle", "onClick", "bsStyle", "bsSize", "variant", "iconOnly", "iconName", "iconRight", "multiline", "block", "className", "noRippleEffect", "type", "tabIndex", "children"]);
     const [isToggled, setIsToggled] = (0, react_1.useState)(active);
     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
+    // 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);
@@ -56,26 +60,10 @@ const Button = (props) => {
             onClick(event);
         }
     };
-    const buttonClassNames = (0, classnames_1.default)('btn', `btn-${bsStyle}`, variant === Button.VARIANT_LINK && 'btn-link', variant === Button.VARIANT_LINK_INLINE && 'btn-link btn-link-inline', variant === Button.VARIANT_OUTLINE && 'btn-outline', variant === Button.VARIANT_ACTION && 'btn-action', bsSize && `btn-${bsSize}`, asToggle && 'btn-toggle', isToggled && 'active', iconOnly && 'btn-icon-only', disabled && 'disabled', multiline && 'btn-multiline', block && 'btn-block', 'btn-component', className);
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: btnRef, type: 'button' }, remainingProps, { className: buttonClassNames, onClick: handleClick }, { children: children })));
-};
-// Button styles
-Button.DEFAULT = STYLES_MAP.DEFAULT;
-Button.PRIMARY = STYLES_MAP.PRIMARY;
-Button.SECONDARY = STYLES_MAP.SECONDARY;
-Button.INFO = STYLES_MAP.INFO;
-Button.WARNING = STYLES_MAP.WARNING;
-Button.DANGER = STYLES_MAP.DANGER;
-Button.SUCCESS = STYLES_MAP.SUCCESS;
-Button.MUTED = STYLES_MAP.MUTED;
-// Button Type
-Button.VARIANT_LINK = VARIANTS_MAP.VARIANT_LINK;
-Button.VARIANT_LINK_INLINE = VARIANTS_MAP.VARIANT_LINK_INLINE;
-Button.VARIANT_OUTLINE = VARIANTS_MAP.VARIANT_OUTLINE;
-Button.VARIANT_ACTION = VARIANTS_MAP.VARIANT_ACTION;
-// Button Size
-Button.XS = SIZES_MAP.XS;
-Button.SM = SIZES_MAP.SM;
-Button.MD = SIZES_MAP.MD;
-Button.LG = SIZES_MAP.LG;
+    const buttonClassNames = (0, classnames_1.default)('btn', `btn-${bsStyle}`, variant === exports.VARIANTS_MAP.VARIANT_LINK && 'btn-link', variant === exports.VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline', variant === exports.VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline', variant === exports.VARIANTS_MAP.VARIANT_ACTION && 'btn-action', bsSize && `btn-${bsSize}`, asToggle && 'btn-toggle', isToggled && 'active', iconOnly && 'btn-icon-only', iconRight && 'btn-icon-right', multiline && 'btn-multiline', block && 'btn-block', 'btn-component', className);
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: buttonRef, type: type }, remainingProps, { className: buttonClassNames, onClick: handleClick, disabled: disabled, tabIndex: tabIndex }, { children: [iconName && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${iconName}` }), children] })));
+});
+Object.assign(Button, exports.STYLES_MAP);
+Object.assign(Button, exports.VARIANTS_MAP);
+Object.assign(Button, exports.SIZES_MAP);
 exports.default = Button;

package/lib/es/components/button/ToggleButton.d.ts

@@ -1,6 +1,10 @@
 import { type PropsWithChildren } from 'react';
 import { type ButtonProps } from './Button';
-export type ToggleButtonProps = Omit<ButtonProps, 'asToggle' | 'onClick'> & {
+export type ToggleButtonProps = Omit<ButtonProps, 'onClick'> & {
+    /**
+     * Callback function triggered when clicking the button.
+     * @param value The new value of the toggle button.
+     */
     onClick?: (value: boolean) => void;
 };
 declare const ToggleButton: (props: PropsWithChildren<ToggleButtonProps>) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,5 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore-next-line importsNotUsedAsValues
 require("react");
 const Button_1 = tslib_1.__importDefault(require("./Button"));
+// @ts-ignore - the Button throws TS error due to refs that may be checked at a later point in time
 const ToggleButton = (props) => (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({}, props, { asToggle: true }));
 exports.default = ToggleButton;

package/lib/es/components/calendarStripe/CalendarStripe.d.ts

@@ -1,3 +1,67 @@
+import React from 'react';
+export type CalendarStripeProps = {
+    /**
+     * The minimum width in pixel of a single day column
+     *
+     * This value determines how many days are shown per page depending on the parent width.
+     *
+     * @default 200
+     */
+    minDayWith?: number;
+    /**
+     * The minimum amount of days that should be shown per page.
+     *
+     * @default 1
+     */
+    minDays?: number;
+    /**
+     * The maximum amount of days that should be shown per page.
+     *
+     * @default 7
+     */
+    maxDays?: number;
+    /**
+     * @deprecated Please use `renderDay` instead.
+     */
+    render?: React.ReactNode;
+    /**
+     * A function that renders each individual day to be displayed.
+     *
+     * @param date The day to render
+     */
+    renderDay?: (date: Date) => React.JSX.Element;
+    /**
+     * Defines whether the days for the weekends are included.
+     *
+     * @default false
+     */
+    skipWeekends?: boolean;
+    /**
+     * The date of the first day that are rendered.
+     *
+     * @default the current date
+     */
+    startDate?: Date;
+    /**
+     * Callback function for when the next button is clicked.
+     *
+     * @param newStartDate Date value that is now the start of the stripe.
+     */
+    onNextClick?: (newStartDate: Date) => void;
+    /**
+     * Callback function for when the previous button is clicked.
+     *
+     * @param newStartDate Date value that is now the start of the stripe.
+     */
+    onPreviousClick?: (newStartDate: Date) => void;
+    /**
+     * Additional classes set to the navigation buttons.
+     */
+    buttonClassName?: string;
+    /**
+     * Additional classes set to the calendar element.
+     */
+    className?: string;
+};
+declare const CalendarStripe: React.ForwardRefExoticComponent<CalendarStripeProps & React.RefAttributes<HTMLDivElement>>;
 export default CalendarStripe;
-declare const CalendarStripe: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";