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

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

@@ -1,15 +1,16 @@
-import { type ReactNode } from 'react';
+import React from 'react';
 import type { TooltipWidth } from '../tooltip/Tooltip';
-import { type Placement } from '../../values/Placement';
+import { PLACEMENT } from '../../values/Placement';
+import type { ObjectValues } from '../../utils/ObjectValues';
 export type NoDataProps = {
     /**
      * The actual translated "No data" text.
      */
-    text: string | ReactNode;
+    text: string | React.ReactNode;
     /**
      * Additional explanation shown inside a tooltip.
      */
-    tooltip?: string | ReactNode;
+    tooltip?: string | React.ReactNode;
     /**
      * Sets the direction the Tooltip is positioned towards.
      *
@@ -20,7 +21,7 @@ export type NoDataProps = {
      * `right-start`, `right`, `right-end`,
      * `left-start`, `left`, `left-end`
      */
-    tooltipPlacement?: Placement;
+    tooltipPlacement?: ObjectValues<typeof PLACEMENT>;
     /**
      * The width of the tooltip.
      *

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

@@ -11,8 +11,8 @@ const NoData = (props) => {
     const { text, className = '', tooltip, tooltipPlacement = Placement_1.PLACEMENT.BOTTOM, tooltipWidth = 'auto' } = props, remainingProps = tslib_1.__rest(props, ["text", "className", "tooltip", "tooltipPlacement", "tooltipWidth"]);
     const noDataClasses = (0, classnames_1.default)('NoData', className);
     if (tooltip) {
-        return ((0, jsx_runtime_1.jsxs)("span", Object.assign({}, remainingProps, { className: noDataClasses }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'pointer-events-none' }, { children: text })), (0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, Object.assign({ 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.jsxs)("span", Object.assign({}, remainingProps, { className: noDataClasses }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'pointer-events-none user-select-none' }, { children: text })), (0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, Object.assign({ 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", Object.assign({}, remainingProps, { className: noDataClasses }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'pointer-events-none' }, { children: text })) })));
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({}, remainingProps, { className: noDataClasses }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'pointer-events-none user-select-none' }, { children: text })) })));
 };
 exports.default = NoData;

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

@@ -1 +1,32 @@
-export default Notification;
+import React from 'react';
+type TriggerFunction = (
+/**
+ * The message to be shown.
+ */
+message: string | React.ReactNode, 
+/**
+ * The title to be shown.
+ */
+title?: string | React.ReactNode, 
+/**
+ * The popup timeout in milliseconds.
+ *
+ * If you do not want it to automatically disappear you can define a very high timeOut.
+ */
+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.
+ */
+priority?: boolean) => void;
+type NotificationTypeStub = {
+    success: TriggerFunction;
+    info: TriggerFunction;
+    warning: TriggerFunction;
+    error: TriggerFunction;
+};
+declare const _default: NotificationTypeStub;
+export default _default;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+// @ts-ignore-next-line 7016
 const react_notifications_1 = require("react-notifications");
-// TODO: implement: if callback + missing time => sticky
-//const STICKY_TIME = 10000;
 exports.default = react_notifications_1.NotificationManager;

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

@@ -1,14 +1,8 @@
+export type NotificationsContainerProps = {
+    /**
+     * Defines whether the notification are stacked.
+     */
+    stacked?: boolean;
+};
+declare const NotificationsContainer: ({ stacked }: NotificationsContainerProps) => import("react/jsx-runtime").JSX.Element;
 export default NotificationsContainer;
-declare function NotificationsContainer({ stacked }: {
-    stacked: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace NotificationsContainer {
-    namespace defaultProps {
-        const stacked: boolean;
-    }
-    namespace propTypes {
-        const stacked_1: PropTypes.Requireable<boolean>;
-        export { stacked_1 as stacked };
-    }
-}
-import PropTypes from "prop-types";

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

@@ -2,18 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+// @ts-ignore-next-line 7016
 const react_notifications_1 = require("react-notifications");
 const NotificationsContainer = ({ stacked }) => {
     const wrapperClasses = (0, classnames_1.default)('notification-container-wrapper', stacked && 'stacked');
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: wrapperClasses }, { children: (0, jsx_runtime_1.jsx)(react_notifications_1.NotificationContainer, {}) })));
 };
-NotificationsContainer.defaultProps = {
-    stacked: false,
-};
-NotificationsContainer.propTypes = {
-    stacked: prop_types_1.default.bool,
-};
 exports.default = NotificationsContainer;

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

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

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

@@ -4,12 +4,13 @@ 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 { min = NumberInput_1.DEFAULT_MIN, max = NumberInput_1.DEFAULT_MAX, step = NumberInput_1.DEFAULT_STEP, value, onChange, onValueChanged = () => { }, disabled, bsSize, className, unit, inputAddon, digitPrecision = DEFAULT_DIGIT_PRECISION, placeholder } = props, remainingProps = tslib_1.__rest(props, ["min", "max", "step", "value", "onChange", "onValueChanged", "disabled", "bsSize", "className", "unit", "inputAddon", "digitPrecision", "placeholder"]);
+    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 } = props, remainingProps = tslib_1.__rest(props, ["id", "min", "max", "step", "value", "onChange", "onValueChanged", "onKeyDown", "disabled", "bsSize", "className", "unit", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace", "digitPrecision", "placeholder", "noDefault"]);
     // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
     const callback = onChange || onValueChanged;
     const timeout = (0, react_1.useRef)(null);
@@ -108,8 +109,8 @@ const NumberControl = (0, react_1.forwardRef)((props, ref) => {
         }
         callback(newValue);
     };
-    const classes = (0, classnames_1.default)('NumberControl', 'form-group', className);
-    const inputGroupClassNames = (0, classnames_1.default)('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: classes }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: inputGroupClassNames }, { children: [inputAddon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: inputAddon }) }))), (0, jsx_runtime_1.jsx)(NumberInput_1.default, { ref: ref, min: min, max: max, value: internalValue, step: step, disabled: disabled, onChange: handleUpdatedNumberInputValue, digitPrecision: digitPrecision, placeholder: placeholder }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group-addon' }, { children: [unit && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'margin-right-5' }, { children: unit })), (0, jsx_runtime_1.jsx)("div", Object.assign({ onMouseDown: handleMouseDownOnDecrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'decrement-button', className: 'decrementButton text-color-gray hover-text-color-dark' }, { children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-minus scale-90' }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ onMouseDown: handleMouseDownOnIncrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'increment-button', className: 'incrementButton text-color-gray hover-text-color-dark margin-left-5' }, { children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-plus scale-90' }) }))] }))] })) })));
+    const classes = (0, classnames_1.default)('NumberControl', className);
+    const controls = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex padding-left-10', onMouseOut: handleStopHolding, onBlur: handleStopHolding }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ onMouseDown: handleMouseDownOnDecrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'decrement-button', className: 'decrementButton text-color-gray hover-text-color-dark' }, { children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-minus scale-90' }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ onMouseDown: handleMouseDownOnIncrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'increment-button', className: 'incrementButton text-color-gray hover-text-color-dark margin-left-5' }, { children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-plus scale-90' }) }))] })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, 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/components/numberInput/NumberInput.d.ts

@@ -4,67 +4,115 @@ 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 = {
+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.
+     * 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
-     * @returns
+     * 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;
     /**
-     * Note: "onChange" should replace "onValueChanged" in the future but it's still widely used
-     * @deprecated Please use `onChange`
-     * @param value
-     * @returns
+     * @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.
+     * 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;
@@ -73,5 +121,5 @@ export type NumberInputProps = {
      */
     className?: string;
 };
-declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+declare const NumberInput: React.ForwardRefExoticComponent<Omit<NumberInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default NumberInput;

package/lib/es/components/numberInput/NumberInput.js

@@ -36,9 +36,9 @@ const validKeys = [
 // Note: even if limits are set and input type is number, many browsers allow to enter invalid data
 // like entering characters or values outside the boundaries, hence we have to check the input here
 // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
-const getValueFromProps = (val, min, max, placeholder) => {
-    // Show placeholders if given instead of 0
-    if (val === undefined && placeholder) {
+const getValueFromProps = (val, min, max, placeholder, noDefault) => {
+    // Show placeholder or nothing if given instead of 0 if requested for
+    if (val === undefined && (placeholder || noDefault)) {
         return '';
     }
     return clampNumber(Number(val), min, max) || exports.DEFAULT_VALUE;
@@ -47,7 +47,7 @@ const clampNumber = (value, min, max) => {
     if (value < min) {
         return min;
     }
-    else if (value > max) {
+    if (value > max) {
         return max;
     }
     return value;
@@ -63,13 +63,12 @@ const isInvalidAfter = (key, possiblePreviousKeys, event, previousKeyRef) => {
     return event.key === key && possiblePreviousKeys.includes(previousKeyRef.current);
 };
 const NumberInput = (0, react_1.forwardRef)((props, ref) => {
-    const { min: propMin, max: propMax, value: propValue, step = exports.DEFAULT_STEP, disabled = false, onChange, onValueChanged = noop_1.default, bsSize = 'md', unit, inputAddon, placeholder, digitPrecision = DEFAULT_DIGIT_PRECISION, className = '' } = props, remainingProps = tslib_1.__rest(props, ["min", "max", "value", "step", "disabled", "onChange", "onValueChanged", "bsSize", "unit", "inputAddon", "placeholder", "digitPrecision", "className"]);
+    const { id, min: propMin, max: propMax, value: propValue, step = exports.DEFAULT_STEP, disabled = false, noDefault = false, onChange, onValueChanged = noop_1.default, onKeyDown = noop_1.default, bsSize = 'md', unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', controls, placeholder, digitPrecision = DEFAULT_DIGIT_PRECISION, className = '' } = props, remainingProps = tslib_1.__rest(props, ["id", "min", "max", "value", "step", "disabled", "noDefault", "onChange", "onValueChanged", "onKeyDown", "bsSize", "unit", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace", "controls", "placeholder", "digitPrecision", "className"]);
     const previousKeyRef = (0, react_1.useRef)('');
-    // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
     const callback = onChange || onValueChanged;
     const min = (0, exports.convertNonIntegerToDefault)(propMin, exports.DEFAULT_MIN);
     const max = (0, exports.convertNonIntegerToDefault)(propMax, exports.DEFAULT_MAX);
-    const value = getValueFromProps(propValue, min, max, placeholder);
+    const value = getValueFromProps(propValue, min, max, placeholder, noDefault);
     // Define local state and define initial values
     const [state, setState] = (0, react_1.useState)({
         value,
@@ -79,11 +78,11 @@ const NumberInput = (0, react_1.forwardRef)((props, ref) => {
     // Update internal value whenever the value prop from outside changes
     (0, useAfterMount_1.default)(() => {
         setState({
-            value: getValueFromProps(propValue, min, max, placeholder),
+            value: getValueFromProps(propValue, min, max, placeholder, noDefault),
             enteredValue: value,
             isValid: true,
         });
-    }, [propValue, clampNumber]);
+    }, [propValue, min, max, placeholder, noDefault, value]);
     const applyValue = (newValue) => {
         if (newValue === '-' || newValue === '') {
             setState({
@@ -124,8 +123,7 @@ const NumberInput = (0, react_1.forwardRef)((props, ref) => {
             isInvalidAfter('.', [',', '-'], event, previousKeyRef) ||
             isInvalidAfter('-', ['.', ','], event, previousKeyRef) ||
             event.key === 'Process' ||
-            event.key === 'Dead' ||
-            event.shiftKey) {
+            event.key === 'Dead') {
             event.preventDefault();
         }
         // Filter out everything that is not a number
@@ -133,6 +131,7 @@ const NumberInput = (0, react_1.forwardRef)((props, ref) => {
             event.preventDefault();
         }
         previousKeyRef.current = event.key;
+        onKeyDown(event);
     };
     const handleBlur = () => {
         // When the value is removed, keep the input empty but trigger the outside callback
@@ -142,6 +141,11 @@ const NumberInput = (0, react_1.forwardRef)((props, ref) => {
             callback();
             return;
         }
+        // If there is no value defined and a placeholder is given or the default is not wanted,
+        // keep the input empty
+        if (!state.value && (noDefault || placeholder)) {
+            return;
+        }
         // Otherwise, validate the input, round it according to digitPrecision,
         // and clamp the value if the entered value exceeds the limitations
         const convertedEnteredValue = (0, exports.convertNonIntegerToDefault)(Number(lastEnteredValue), exports.DEFAULT_VALUE);
@@ -156,7 +160,10 @@ const NumberInput = (0, react_1.forwardRef)((props, ref) => {
     };
     const inputGroupClassNames = (0, classnames_1.default)('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
     const inputClassNames = (0, classnames_1.default)('form-control', 'no-controls', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', className);
-    const input = ((0, jsx_runtime_1.jsx)("input", Object.assign({}, remainingProps, { type: 'number', step: step, min: min, max: max, value: state.isValid ? state.value : state.enteredValue, className: inputClassNames, disabled: disabled, onBlur: handleBlur, onChange: handleOnChange, onKeyDown: handleKeyDown, ref: ref, "aria-label": 'number-input', placeholder: placeholder, onWheel: handleWheel })));
-    return unit || inputAddon ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: inputGroupClassNames }, { children: [inputAddon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: inputAddon }) }))), input, unit && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: unit }))] }))) : (input);
+    const hasFeedback = errorMessage || warningMessage;
+    const input = ((0, jsx_runtime_1.jsx)("input", Object.assign({}, remainingProps, { id: id, type: 'number', step: step, min: min, max: max, value: state.isValid ? state.value : state.enteredValue, className: inputClassNames, disabled: disabled, onBlur: handleBlur, 
+        // onChange={state.value ? handleOnChange : undefined}
+        onChange: handleOnChange, onKeyDown: handleKeyDown, ref: ref, "aria-label": 'number-input', placeholder: placeholder, onWheel: handleWheel })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: inputGroupClassNames }, { children: [inputAddon && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: inputAddon }) }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'form-control-feedback-wrapper' }, { children: [input, hasFeedback && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `help-block white-space-${messageWhiteSpace}` }, { children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage || warningMessage }) }))] }))] })), (unit || controls) && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `input-group-addon ${disabled ? 'disabled pointer-events-none' : ''}` }, { children: [unit && unit, controls && controls] })))] })));
 });
 exports.default = NumberInput;

package/lib/es/components/onboarding/OnboardingTip.d.ts

@@ -1,63 +1,146 @@
-declare function OnboardingTip(props: any): any;
-declare namespace OnboardingTip {
-    const AUTO_START: "auto-start";
-    const AUTO: "auto";
-    const AUTO_END: "auto-end";
-    const TOP_START: "top-start";
-    const TOP: "top";
-    const TOP_END: "top-end";
-    const BOTTOM_START: "bottom-start";
-    const BOTTOM: "bottom";
-    const BOTTOM_END: "bottom-end";
-    const RIGHT_START: "right-start";
-    const RIGHT: "right";
-    const RIGHT_END: "right-end";
-    const LEFT_START: "left-start";
-    const LEFT: "left";
-    const LEFT_END: "left-end";
-    const TEXT_ALIGNMENT_LEFT: "left";
-    const TEXT_ALIGNMENT_CENTER: "center";
-    const TEXT_ALIGNMENT_RIGHT: "right";
-    namespace defaultProps {
-        export const show: boolean;
-        export function onHide(): void;
-        export const showCloseIcon: boolean;
-        import textAlignment = OnboardingTip.TEXT_ALIGNMENT_LEFT;
-        export { textAlignment };
-        export const useInDialog: boolean;
-        export const className: string;
-        export const clickflow: boolean;
-        import placement = OnboardingTip.BOTTOM;
-        export { placement };
-        export const width: null;
-        export const preventOverflow: boolean;
-    }
-    namespace propTypes {
-        export const id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        const show_1: PropTypes.Validator<boolean>;
-        export { show_1 as show };
-        const showCloseIcon_1: PropTypes.Requireable<boolean>;
-        export { showCloseIcon_1 as showCloseIcon };
-        const textAlignment_1: PropTypes.Requireable<"right" | "left" | "center">;
-        export { textAlignment_1 as textAlignment };
-        const onHide_1: PropTypes.Validator<(...args: any[]) => any>;
-        export { onHide_1 as onHide };
-        const useInDialog_1: PropTypes.Requireable<boolean>;
-        export { useInDialog_1 as useInDialog };
-        export const title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const content: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const clickflow_1: PropTypes.Requireable<boolean>;
-        export { clickflow_1 as clickflow };
-        export { OnboardingTipPlacementType as placement };
-        const width_1: PropTypes.Requireable<string | number>;
-        export { width_1 as width };
-        const preventOverflow_1: PropTypes.Requireable<boolean>;
-        export { preventOverflow_1 as preventOverflow };
-        export const popperConfig: PropTypes.Requireable<object>;
-    }
-}
+import React, { type PropsWithChildren, type ReactNode } from 'react';
+import type { OverlayProps } from 'react-bootstrap';
+import { type TooltipWidth } from '../tooltip/Tooltip';
+import { type TextAlignment } from '../../values/TextAlignment';
+import { type Placement } from '../../values/Placement';
+type PopperConfig = OverlayProps['popperConfig'];
+export type OnboardingButton = {
+    text: string | React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    iconName?: string;
+};
+export type OnboardingTipProps = {
+    /**
+     * The ID of the DOM element.
+     */
+    id?: string;
+    /**
+     * Indicates whether the onboarding tip is shown.
+     *
+     * @default false
+     */
+    show: boolean;
+    /**
+     * Defines whether to show a close icon.
+     *
+     * @default true
+     */
+    showCloseIcon?: boolean;
+    /**
+     * Define how the text should be aligned.
+     *
+     * Possible values are: `left`, `center` or `right`.
+     *
+     * @default 'left'
+     */
+    textAlignment?: TextAlignment;
+    /**
+     * The tooltip's width.
+     *
+     * Possible values are:
+     * - `auto`
+     * - 100
+     * - 150
+     * - 200
+     * - 250
+     * - 300
+     * - 350
+     * - 400
+     * - 450
+     * - 500
+     */
+    width?: TooltipWidth;
+    /**
+     * Callback function for when the component shall be hidden.
+     *
+     * @default noop
+     */
+    onHide: VoidFunction;
+    /**
+     * Defines whether to have a clickflow journey.
+     *
+     * @default false
+     */
+    clickflow?: boolean;
+    /**
+     * Adds a button to navigate to the previous onboarding tip when using the click flow onboarding.
+     */
+    previousButton?: OnboardingButton;
+    /**
+     * Adds a button to navigate to the next onboarding tip when using the click flow onboarding.
+     */
+    nextButton?: OnboardingButton;
+    /**
+     * Changes the z-index.
+     *
+     * @default false
+     */
+    useInDialog?: boolean;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+    /**
+     * The title of the onboarding tip.
+     */
+    title?: string | ReactNode;
+    /**
+     * The content of the onboarding tip.
+     */
+    content?: string | ReactNode;
+    /**
+     * Prevents onboarding tips from being cut off horizontally at screen borders.
+     *
+     * @default true
+     */
+    preventOverflow?: boolean;
+    /**
+     * A Popper.js config object passed to the underlying popper instance.
+     */
+    popperConfig?: PopperConfig;
+    /**
+     * Define how the component should be placed.
+     *
+     * Possible values are:
+     * - `auto-start`
+     * - `auto`
+     * - `auto-end`
+     * - `top-start`
+     * - `top`
+     * - `top-end`
+     * - `right-start`
+     * - `right`
+     * - `right-end`
+     * - `bottom-start`
+     * - `bottom`
+     * - `bottom-end`
+     * - `left-start`
+     * - `left`
+     * - `left-end`
+     *
+     * @default 'bottom'
+     */
+    placement?: Placement;
+};
+declare const OnboardingTip: {
+    (props: PropsWithChildren<OnboardingTipProps>): import("react/jsx-runtime").JSX.Element;
+    AUTO_START: "auto-start";
+    AUTO: "auto";
+    AUTO_END: "auto-end";
+    TOP_START: "top-start";
+    TOP: "top";
+    TOP_END: "top-end";
+    BOTTOM_START: "bottom-start";
+    BOTTOM: "bottom";
+    BOTTOM_END: "bottom-end";
+    RIGHT_START: "right-start";
+    RIGHT: "right";
+    RIGHT_END: "right-end";
+    LEFT_START: "left-start";
+    LEFT: "left";
+    LEFT_END: "left-end";
+    TEXT_ALIGNMENT_LEFT: "left";
+    TEXT_ALIGNMENT_CENTER: "center";
+    TEXT_ALIGNMENT_RIGHT: "right";
+};
 export default OnboardingTip;
-export const OnboardingTipPlacementType: PropTypes.Requireable<"auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-start" | "bottom" | "bottom-end" | "left-start" | "left" | "left-end">;
-import PropTypes from "prop-types";