@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/components/menuItems/MenuItem.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export type MenuItemProps = {
+    index?: number;
+    value?: string | React.ReactNode;
+    active?: boolean;
+    /**
+     * Setting "disabled" to true will disable the respective item.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Will add a divider line between the items inside the dropdown.
+     *
+     * @default false
+     */
+    divider?: boolean;
+    header?: boolean;
+    /**
+     * Callback function triggered when an item is selected.
+     * @param value
+     * @param event
+     * @returns
+     */
+    onSelect?: (value: number | undefined, event: React.MouseEvent<HTMLLIElement>) => void;
+    closeMenu?: VoidFunction;
+    onMouseEnter?: (event: React.MouseEvent<HTMLLIElement>) => void;
+};
+declare const MenuItem: (props: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MenuItem;

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+const react_1 = tslib_1.__importDefault(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const DropdownSubmenu_1 = tslib_1.__importDefault(require("../dropdown/DropdownSubmenu"));
+const DropdownHeader_1 = tslib_1.__importDefault(require("../selects/DropdownHeader"));
+const MenuItem = (props) => {
+    const { index, value, divider = false, disabled = false, active = false, header = false, onSelect = noop_1.default, closeMenu = noop_1.default, onMouseEnter = noop_1.default, } = props;
+    if (react_1.default.isValidElement(value) && value.type === DropdownSubmenu_1.default) {
+        return value;
+    }
+    const role = divider ? 'separator' : 'presentation';
+    const classes = (0, classnames_1.default)(divider && 'divider pointer-events-none', disabled && 'disabled', active && 'active');
+    const handleSelectItem = (event) => {
+        if (!disabled) {
+            onSelect(index, event);
+            if (closeMenu) {
+                closeMenu();
+            }
+        }
+    };
+    const handleItemMouseEnter = (event) => {
+        if (!disabled) {
+            onMouseEnter(event);
+        }
+    };
+    if (header) {
+        return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { label: value, center: false });
+    }
+    return ((0, jsx_runtime_1.jsx)("li", { role: role, className: classes, onClick: handleSelectItem, onMouseEnter: handleItemMouseEnter, "data-item-index": index, children: (0, jsx_runtime_1.jsx)("a", { role: 'menuitem', children: value }) }));
+};
+exports.default = MenuItem;

package/lib/es/src/components/menuItems/MenuItemList.d.ts

@@ -0,0 +1,7 @@
+import React, { type HTMLProps } from 'react';
+type MenuItemListProps = {
+    pullRight?: boolean;
+    className?: string;
+} & HTMLProps<HTMLUListElement>;
+declare const MenuItemList: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<MenuItemListProps>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export default MenuItemList;

package/lib/es/src/components/menuItems/MenuItemList.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 MenuItemList = (0, react_1.forwardRef)((props, ref) => {
+    const { pullRight, className, children, ...remainingProps } = props;
+    const dropdownMenuClasses = (0, classnames_1.default)('dropdown-menu', pullRight && 'pull-right', className);
+    return ((0, jsx_runtime_1.jsx)("ul", { ...remainingProps, className: dropdownMenuClasses, ref: ref, role: 'menu', children: children }));
+});
+exports.default = MenuItemList;

package/lib/es/src/components/menuItems/MenuItems.d.ts

@@ -0,0 +1,8 @@
+import { type MenuItemProps as MenuItem } from './MenuItem';
+export type MenuItemsProps = {
+    items: MenuItem[];
+    closeMenu?: () => void;
+    onMouseEnter?: () => void;
+};
+declare const MenuItems: ({ items, closeMenu, onMouseEnter }: MenuItemsProps) => import("react/jsx-runtime").JSX.Element;
+export default MenuItems;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+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) => ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { ...item, index: item.index ?? index, closeMenu: closeMenu, onMouseEnter: onMouseEnter }, item.index ?? index))) }));
+};
+exports.default = MenuItems;

package/lib/es/src/components/navigation/AppNavigationBar.d.ts

@@ -0,0 +1,38 @@
+import React, { type MouseEvent, type ReactNode } from 'react';
+export type AppNavigationBarProps = {
+    /**
+     * The title for the content that is shown.
+     */
+    title?: string | ReactNode;
+    /**
+     * Defines the size of the title. Possible values are 'md' and 'lg'.
+     *
+     * @default 'md'
+     */
+    titleSize?: 'md' | 'lg';
+    /**
+     * Adds a subtitle below the title.
+     */
+    subtitle?: string | ReactNode;
+    /**
+     * Right side area for additional options of buttons like filter etc. that is relevant for the shown content..
+     */
+    right?: ReactNode;
+    backButtonText?: string | ReactNode;
+    /**
+     * Add a light bottom border to the wrapper element.
+     *
+     * @default false
+     */
+    border?: boolean;
+    /**
+     * Callback function for when the back navigation button is clicked.
+     */
+    onNavigateBack?: (event: MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Additional classes for the wrapper element.
+     */
+    className?: string;
+};
+export declare const AppNavigationBar: React.ForwardRefExoticComponent<AppNavigationBarProps & React.RefAttributes<HTMLDivElement>>;
+export default AppNavigationBar;

package/lib/es/src/components/navigation/AppNavigationBar.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppNavigationBar = 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 Button_1 = tslib_1.__importDefault(require("../button/Button"));
+exports.AppNavigationBar = (0, react_1.forwardRef)((props, ref) => {
+    const { className, title, right = (0, jsx_runtime_1.jsx)("span", {}), backButtonText = '', titleSize = 'md', subtitle, border = false, onNavigateBack = noop_1.default, ...remainingProps } = props;
+    const navigationClasses = (0, classnames_1.default)('AppNavigationBar', 'width-100pct height-45 user-select-none padding-x-10', 'display-grid grid-stack align-items-center', titleSize === 'md' && 'text-size-14', titleSize === 'lg' && 'text-size-16', border && 'border border-bottom-only border-color-lighter', className);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, ...remainingProps, className: navigationClasses, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'grid-stack-item display-flex align-items-center justify-content-between', children: [(0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', className: 'text-color-darkest', iconOnly: !backButtonText, iconName: 'rioglyph-arrow-left', onClick: onNavigateBack, children: backButtonText }), (0, jsx_runtime_1.jsx)("div", { className: 'btn-toolbar gap-2', children: right })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1', children: [(0, jsx_runtime_1.jsx)("div", { className: 'ellipsis-1', children: title }), subtitle && (0, jsx_runtime_1.jsx)("div", { className: 'text-size-12 line-height-12 text-normal margin-top--2', children: subtitle })] })] }));
+});
+exports.default = exports.AppNavigationBar;

package/lib/es/src/components/noData/NoData.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { TooltipWidth } from '../tooltip/Tooltip';
+import { PLACEMENT } from '../../values/Placement';
+import type { ObjectValues } from '../../utils/ObjectValues';
+export type NoDataProps = {
+    /**
+     * The actual translated "No data" text.
+     */
+    text: string | React.ReactNode;
+    /**
+     * Additional explanation shown inside a tooltip.
+     */
+    tooltip?: string | React.ReactNode;
+    /**
+     * Sets the direction the Tooltip is positioned towards.
+     *
+     * Possible values are:
+     * `auto-start`, `auto`, `auto-end`,
+     * `top-start`, `top`, `top-end`,
+     * `bottom-start`, `bottom`, `bottom-end`,
+     * `right-start`, `right`, `right-end`,
+     * `left-start`, `left`, `left-end`
+     */
+    tooltipPlacement?: ObjectValues<typeof PLACEMENT>;
+    /**
+     * The width of the tooltip.
+     *
+     * Possible values are:
+     * `auto`, `100`, `150`, `200`, `250`, `300`, `350`, `400`, `450`, `500`
+     */
+    tooltipWidth?: TooltipWidth;
+    /**
+     * Additional class names to be added to the wrapping element.
+     */
+    className?: string;
+};
+declare const NoData: (props: NoDataProps) => import("react/jsx-runtime").JSX.Element;
+export default NoData;

package/lib/es/src/components/noData/NoData.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const SimpleTooltip_1 = tslib_1.__importDefault(require("../tooltip/SimpleTooltip"));
+const Placement_1 = require("../../values/Placement");
+const NoData = (props) => {
+    const { text, className = '', tooltip, tooltipPlacement = Placement_1.PLACEMENT.BOTTOM, tooltipWidth = 'auto', ...remainingProps } = props;
+    const noDataClasses = (0, classnames_1.default)('NoData', className);
+    if (tooltip) {
+        return ((0, jsx_runtime_1.jsxs)("span", { ...remainingProps, className: noDataClasses, children: [(0, jsx_runtime_1.jsx)("span", { className: 'pointer-events-none user-select-none', children: text }), (0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, { content: tooltip, placement: tooltipPlacement, width: tooltipWidth, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-info-sign margin-left-5' }) })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("span", { ...remainingProps, className: noDataClasses, children: (0, jsx_runtime_1.jsx)("span", { className: 'pointer-events-none user-select-none', children: text }) }));
+};
+exports.default = NoData;

package/lib/es/src/components/notification/Notification.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+export declare const DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = 5000;
+export declare const NOTIFICATION_TIMEOUT_INFINITE = 999999;
+export type NotificationOptions = {
+    /**
+     * The title to be shown.
+     */
+    title?: string | React.ReactNode;
+    /**
+     * The timeout in milliseconds after which the notification disappears.
+     *
+     * If you don`t want it to automatically disappear, set a very high number.
+     */
+    timeout?: number;
+    /**
+     * A function that gets invoked when the notification is clicked.
+     */
+    callback?: VoidFunction;
+    /**
+     * If true, the message gets inserted at the top of the notification stack.
+     *
+     * @default false
+     * @deprecated
+     */
+    priority?: boolean;
+    /**
+     * Flag to enable a close button.
+     *
+     * @default false
+     */
+    closeButton?: boolean;
+    /**
+     * Flag to disable close on clicking on the notification.
+     *
+     * @default true
+     */
+    closeOnClick?: boolean;
+    /**
+     * Flag to show a progress bar. By default it is not shown.
+     *
+     * @default true
+     */
+    hideProgressBar?: boolean;
+};
+declare const Notification: {
+    default: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
+    success: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
+    info: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
+    warning: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
+    error: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
+};
+export default Notification;

package/lib/es/src/components/notification/Notification.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NOTIFICATION_TIMEOUT_INFINITE = exports.DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_toastify_1 = require("react-toastify");
+exports.DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = 5_000;
+exports.NOTIFICATION_TIMEOUT_INFINITE = 999_999;
+const baseOptions = {
+    position: 'top-right',
+    hideProgressBar: true,
+    pauseOnHover: true,
+    draggable: true,
+    theme: 'colored',
+    transition: react_toastify_1.Slide,
+};
+const ToastMessage = (props) => {
+    const { title, message } = props;
+    return ((0, jsx_runtime_1.jsx)("div", { className: 'notification', children: (0, jsx_runtime_1.jsxs)("div", { className: 'notification-message', role: 'alert', children: [title && (0, jsx_runtime_1.jsx)("h4", { className: 'title', children: title }), (0, jsx_runtime_1.jsx)("div", { className: 'message', children: message })] }) }));
+};
+const normalizeArgs = (optionsOrTitle, timeout, callback, priority) => {
+    // Handle the new options object format
+    if (optionsOrTitle && typeof optionsOrTitle === 'object' && !react_1.default.isValidElement(optionsOrTitle)) {
+        return { ...optionsOrTitle };
+    }
+    // Handle legacy format with multiple arguments
+    return {
+        title: typeof optionsOrTitle === 'string' ? optionsOrTitle : undefined,
+        timeout,
+        callback,
+        priority,
+    };
+};
+const mapOptions = (options) => {
+    const { timeout, callback, priority, // does not work like that with react-toastify, so we ignore it
+    iconClassName, closeButton = false, hideProgressBar = true, closeOnClick = true, } = options;
+    return {
+        ...baseOptions,
+        autoClose: timeout || exports.DEFAULT_NOTIFICATION_TIMEOUT_IN_MS,
+        onClick: callback,
+        hideProgressBar,
+        closeOnClick,
+        // replace the default built-in icons
+        icon: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${iconClassName}` }),
+        // in case a close button is requested, ignore the auto-injected "closeToast" prop
+        // as otherwise it will be passed onto the underlying DOM element
+        closeButton: closeButton
+            ? ({ closeToast: ignoreCloseToast }) => ((0, jsx_runtime_1.jsx)("button", { className: 'notification-close', type: 'button', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) }))
+            : false,
+    };
+};
+const Notification = (() => {
+    const notify = (type, message, optionsOrTitle, timeout, callback, priority) => {
+        // Normalize arguments
+        const { title, timeout: time, callback: cb, priority: prio, closeButton, closeOnClick, hideProgressBar, } = normalizeArgs(optionsOrTitle, timeout, callback, priority);
+        // Map icon class names based on type
+        const iconClassNames = {
+            default: '',
+            success: 'rioglyph-ok text-size-18',
+            info: 'rioglyph-info-sign text-size-20',
+            warn: 'rioglyph-exclamation-sign text-size-20',
+            error: 'rioglyph-error-sign text-size-20',
+        };
+        if (type === 'default') {
+            return (0, react_toastify_1.toast)((0, jsx_runtime_1.jsx)(ToastMessage, { message: message, title: title }), mapOptions({
+                timeout: time,
+                callback: cb,
+                priority: prio,
+                closeButton,
+                closeOnClick,
+                hideProgressBar,
+                iconClassName: iconClassNames[type],
+            }));
+        }
+        // Call the appropriate toast function
+        return react_toastify_1.toast[type]((0, jsx_runtime_1.jsx)(ToastMessage, { message: message, title: title }), mapOptions({
+            timeout: time,
+            callback: cb,
+            priority: prio,
+            closeButton,
+            closeOnClick,
+            hideProgressBar,
+            iconClassName: iconClassNames[type],
+        }));
+    };
+    // Wrappers for specific types
+    const defaultNotification = (message, optionsOrTitle, timeout, callback, priority) => notify('default', message, optionsOrTitle, timeout, callback, priority);
+    const info = (message, optionsOrTitle, timeout, callback, priority) => notify('info', message, optionsOrTitle, timeout, callback, priority);
+    const success = (message, optionsOrTitle, timeout, callback, priority) => notify('success', message, optionsOrTitle, timeout, callback, priority);
+    const warning = (message, optionsOrTitle, timeout, callback, priority) => notify('warn', message, optionsOrTitle, timeout, callback, priority);
+    const error = (message, optionsOrTitle, timeout, callback, priority) => notify('error', message, optionsOrTitle, timeout, callback, priority);
+    return {
+        default: defaultNotification,
+        success,
+        info,
+        warning,
+        error,
+    };
+})();
+exports.default = Notification;

package/lib/es/src/components/notification/NotificationsContainer.d.ts

@@ -0,0 +1,10 @@
+export type NotificationsContainerProps = {
+    /**
+     * Defines whether the notification are stacked.
+     *
+     * @deprecated
+     */
+    stacked?: boolean;
+};
+declare const NotificationsContainer: ({ stacked }: NotificationsContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default NotificationsContainer;

package/lib/es/src/components/notification/NotificationsContainer.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_toastify_1 = require("react-toastify");
+const NotificationsContainer = ({ stacked }) => {
+    const wrapperClasses = (0, classnames_1.default)('notification-container-wrapper', stacked && 'stacked');
+    return ((0, jsx_runtime_1.jsx)("div", { className: wrapperClasses, children: (0, jsx_runtime_1.jsx)(react_toastify_1.ToastContainer, { className: 'notification-container', stacked: false, limit: 5 }) }));
+};
+exports.default = NotificationsContainer;

package/lib/es/src/components/numberControl/NumberControl.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type NumberInputProps } from '../numberInput/NumberInput';
+export type NumberControlProps = NumberInputProps;
+declare const NumberControl: React.ForwardRefExoticComponent<Omit<NumberInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default NumberControl;

package/lib/es/src/components/numberControl/NumberControl.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 NumberInput_1 = tslib_1.__importStar(require("../numberInput/NumberInput"));
+const INITIAL_TICK = 700;
+const TICK_TIME = 50;
+const DEFAULT_DIGIT_PRECISION = 3;
+const NumberControl = (0, react_1.forwardRef)((props, ref) => {
+    const { id, min = NumberInput_1.DEFAULT_MIN, max = NumberInput_1.DEFAULT_MAX, step = NumberInput_1.DEFAULT_STEP, value, onChange, onValueChanged = () => { }, onKeyDown = noop_1.default, disabled, bsSize, className, unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace, digitPrecision = DEFAULT_DIGIT_PRECISION, placeholder, noDefault, ...remainingProps } = props;
+    // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
+    const callback = onChange || onValueChanged;
+    const timeout = (0, react_1.useRef)(null);
+    const [isHoldingDownInc, setIsHoldingDownInc] = (0, react_1.useState)(false);
+    const [isHoldingDownDec, setIsHoldingDownDec] = (0, react_1.useState)(false);
+    const [internalValue, setInternalValue] = (0, react_1.useState)(value);
+    const initialTimeout = (callbackFn) => {
+        if (timeout.current !== null) {
+            clearTimeout(timeout.current);
+        }
+        timeout.current = setTimeout(() => {
+            callbackFn();
+        }, INITIAL_TICK);
+    };
+    const recursiveTimeout = (callbackFn) => {
+        timeout.current = setTimeout(() => {
+            callbackFn();
+        }, TICK_TIME);
+    };
+    // Update internal state if external value has changed
+    (0, react_1.useEffect)(() => {
+        if (internalValue !== value) {
+            setInternalValue(value);
+        }
+    }, [value]);
+    // Notify external component if internal value has changed
+    (0, react_1.useEffect)(() => {
+        if (internalValue !== value) {
+            callback(internalValue);
+        }
+    }, [internalValue]);
+    (0, react_1.useEffect)(() => {
+        // Call increment function for a loop when button is holding down
+        if (isHoldingDownInc && !disabled) {
+            initialTimeout(incrementRecursively);
+        }
+        // Call decrement function for a loop when button is holding down
+        if (isHoldingDownDec && !disabled) {
+            initialTimeout(decrementRecursively);
+        }
+    }, [isHoldingDownInc, isHoldingDownDec]);
+    const incrementInternalValue = () => {
+        setInternalValue(val => {
+            const currentValue = (0, NumberInput_1.convertNonIntegerToDefault)(val, NumberInput_1.DEFAULT_VALUE);
+            const newValue = Number((currentValue + step).toFixed(digitPrecision));
+            const newValueLimited = newValue <= max ? newValue : val;
+            return newValueLimited;
+        });
+    };
+    const decrementInternalValue = () => {
+        setInternalValue(val => {
+            const currentValue = (0, NumberInput_1.convertNonIntegerToDefault)(val, NumberInput_1.DEFAULT_VALUE);
+            const newValue = Number((currentValue - step).toFixed(digitPrecision));
+            const newValueLimited = newValue >= min ? newValue : val;
+            return newValueLimited;
+        });
+    };
+    const incrementRecursively = () => {
+        incrementInternalValue();
+        recursiveTimeout(incrementRecursively);
+    };
+    const decrementRecursively = () => {
+        decrementInternalValue();
+        recursiveTimeout(decrementRecursively);
+    };
+    const handleMouseDownOnIncrement = () => {
+        if (disabled) {
+            return;
+        }
+        setIsHoldingDownInc(true);
+        // increment for first click
+        incrementInternalValue();
+    };
+    const handleMouseDownOnDecrement = () => {
+        if (disabled) {
+            return;
+        }
+        setIsHoldingDownDec(true);
+        // decrement for first click
+        decrementInternalValue();
+    };
+    const handleStopHolding = () => {
+        if (timeout.current !== null) {
+            clearTimeout(timeout.current);
+        }
+        setIsHoldingDownInc(false);
+        setIsHoldingDownDec(false);
+    };
+    const handleUpdatedNumberInputValue = (newValue) => {
+        // Set the internal value when the value of the actual input has changed,
+        // for instance the user has typed in a number manually and to
+        // use this number as base to increase or decrease from.
+        // Ignore empty value in case the user has removed it
+        if (newValue !== undefined && !(isHoldingDownDec && isHoldingDownInc)) {
+            setInternalValue(Number(newValue));
+        }
+        callback(newValue);
+    };
+    const classes = (0, classnames_1.default)('NumberControl', className);
+    const controls = ((0, jsx_runtime_1.jsxs)("div", { className: 'display-flex padding-left-10', onMouseOut: handleStopHolding, onBlur: handleStopHolding, children: [(0, jsx_runtime_1.jsx)("div", { onMouseDown: handleMouseDownOnDecrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'decrement-button', className: 'decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer', children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-minus scale-90' }) }), (0, jsx_runtime_1.jsx)("div", { onMouseDown: handleMouseDownOnIncrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'increment-button', className: 'incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5', children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-plus scale-90' }) })] }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: classes, children: (0, jsx_runtime_1.jsx)(NumberInput_1.default, { id: id, ref: ref, min: min, max: max, value: internalValue, step: step, bsSize: bsSize, disabled: disabled, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace, controls: controls, unit: unit, onChange: handleUpdatedNumberInputValue, onKeyDown: onKeyDown, digitPrecision: digitPrecision, placeholder: placeholder, noDefault: noDefault }) }));
+});
+exports.default = NumberControl;

package/lib/es/src/components/numberInput/NumberInput.d.ts

@@ -0,0 +1,125 @@
+import React from 'react';
+export declare const DEFAULT_VALUE = 0;
+export declare const DEFAULT_STEP = 1;
+export declare const DEFAULT_MIN = 0;
+export declare const DEFAULT_MAX: number;
+export declare const convertNonIntegerToDefault: (value: number | undefined, fallback: number) => number;
+export type NumberInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'controls'> & {
+    /**
+     * A native input id attribute.
+     *
+     * Passed through as HTML attribute to the input element.
+     */
+    id?: string;
+    /**
+     * The minimum value of the input.
+     *
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum value of the input.
+     *
+     * @default Number.MAX_VALUE
+     */
+    max?: number;
+    /**
+     * The initial value of the input.
+     *
+     * Used to control the component from the outside.
+     *
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Lets you omit the default value of "0" when the vale is not defined.
+     *
+     * The input will be empty in this case.
+     *
+     * @default false
+     */
+    noDefault?: boolean;
+    /**
+     * The size of increment or decrement (only works with number type).
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Enables or disabled the input.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback function triggered when the input value changes.
+     *
+     * When the value is removed by the user, the input is kept empty, but it triggers the callback without any value
+     * since the user has finished his input.
+     *
+     * @param value The new value of the input.
+     */
+    onChange?: (value?: number) => void;
+    /**
+     * @deprecated Please use `onChange` instead.
+     */
+    onValueChanged?: (value?: number) => void;
+    /**
+     * Callback function that gets triggered after filtering out invalid keystrokes.
+     *
+     * @param event The keyboard event.
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Defines the size of the input to be rendered.
+     *
+     * @default 'md'
+     */
+    bsSize?: 'sm' | 'md' | 'lg';
+    /**
+     * A unit for this value.
+     *
+     * This will be shown in a dedicated input addon.
+     */
+    unit?: string | React.ReactNode;
+    /**
+     * A rioglyph icon tio be shown in front of the input.
+     */
+    inputAddon?: string;
+    /**
+     * Input error message.
+     */
+    errorMessage?: string | React.ReactNode;
+    /**
+     * Input warning message.
+     */
+    warningMessage?: string | React.ReactNode;
+    /**
+     * Feedback message width.
+     *
+     * @default 'normal'
+     */
+    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';
+    /**
+     * This prop is used by the NumberControl component to pass on the +/- spinner controls.
+     *
+     * @internal
+     */
+    controls?: React.ReactNode;
+    /**
+     * The input placeholder if no value is given.
+     */
+    placeholder?: string;
+    /**
+     * Number of digits after the comma the value should be fixed to.
+     *
+     * @default 3
+     */
+    digitPrecision?: number;
+    /**
+     * Additional classes to be set on the component.
+     */
+    className?: string;
+};
+declare const NumberInput: React.ForwardRefExoticComponent<Omit<NumberInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default NumberInput;