@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.4

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

@@ -1,25 +1,14 @@
+import React from 'react';
+export type MenuItemProps = {
+    index?: number;
+    value?: string | React.ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    divider?: boolean;
+    header?: boolean;
+    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;
-declare function MenuItem(props: any): any;
-declare namespace MenuItem {
-    namespace defaultProps {
-        const disabled: boolean;
-        function onSelect(): void;
-        function closeMenu(): void;
-        function onMouseEnter(): void;
-    }
-    namespace propTypes {
-        export const value: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        export const divider: PropTypes.Requireable<boolean>;
-        export const header: PropTypes.Requireable<boolean>;
-        const onSelect_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onSelect_1 as onSelect };
-        export const index: PropTypes.Requireable<number>;
-        const closeMenu_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { closeMenu_1 as closeMenu };
-        const onMouseEnter_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onMouseEnter_1 as onMouseEnter };
-    }
-}
-import PropTypes from "prop-types";

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

@@ -2,20 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
 const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 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 { value, divider, disabled, active, onSelect, header, index, closeMenu, onMouseEnter } = props;
-    if (value && value.type === DropdownSubmenu_1.default) {
+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 menuLink = (0, jsx_runtime_1.jsx)("a", Object.assign({ role: 'menuitem' }, { children: value }));
-    const onSelectItem = event => {
+    const handleSelectItem = (event) => {
         if (!disabled) {
             onSelect(index, event);
             if (closeMenu) {
@@ -23,7 +24,7 @@ const MenuItem = props => {
             }
         }
     };
-    const onItemMouseEnter = event => {
+    const handleItemMouseEnter = (event) => {
         if (!disabled) {
             onMouseEnter(event);
         }
@@ -31,22 +32,6 @@ const MenuItem = props => {
     if (header) {
         return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { label: value, center: false });
     }
-    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ role: role, className: classes, onClick: onSelectItem, onMouseEnter: onItemMouseEnter, "data-item-index": index }, { children: header ? value : menuLink })));
-};
-MenuItem.defaultProps = {
-    disabled: false,
-    onSelect: () => { },
-    closeMenu: () => { },
-    onMouseEnter: () => { },
-};
-MenuItem.propTypes = {
-    value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    disabled: prop_types_1.default.bool,
-    divider: prop_types_1.default.bool,
-    header: prop_types_1.default.bool,
-    onSelect: prop_types_1.default.func,
-    index: prop_types_1.default.number,
-    closeMenu: prop_types_1.default.func,
-    onMouseEnter: prop_types_1.default.func,
+    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ role: role, className: classes, onClick: handleSelectItem, onMouseEnter: handleItemMouseEnter, "data-item-index": index }, { children: header ? value : menuLink })));
 };
 exports.default = MenuItem;

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

@@ -10,7 +10,7 @@ const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 exports.AppNavigationBar = (0, react_1.forwardRef)((props, ref) => {
     const { className, title, right, onNavigateBack } = props, remainingProps = tslib_1.__rest(props, ["className", "title", "right", "onNavigateBack"]);
     const navigationClasses = (0, classnames_1.default)('AppNavigationBar', 'width-100pct display-flex align-items-center justify-content-between height-45 user-select-none padding-x-10', className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref }, remainingProps, { className: navigationClasses }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex align-items-center' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'width-30 text-size-20 text-color-darkest' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-arrow-left', onClick: onNavigateBack }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-medium text-color-darker' }, { children: title }))] })), (0, jsx_runtime_1.jsx)("div", { children: right })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref }, remainingProps, { className: navigationClasses }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex align-items-center' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'width-30 text-size-20 text-color-darkest' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-arrow-left cursor-pointer', onClick: onNavigateBack }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-medium text-color-darker' }, { children: title }))] })), (0, jsx_runtime_1.jsx)("div", { children: right })] })));
 });
 exports.AppNavigationBar.defaultProps = {
     onNavigateBack: noop_1.default,

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

@@ -2,11 +2,36 @@ import { type ReactNode } from 'react';
 import type { TooltipWidth } from '../tooltip/Tooltip';
 import { type Placement } from '../../values/Placement';
 export type NoDataProps = {
+    /**
+     * The actual translated "No data" text.
+     */
     text: string | ReactNode;
-    className?: string;
+    /**
+     * Additional explanation shown inside a tooltip.
+     */
     tooltip?: string | 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?: 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) => JSX.Element;
+declare const NoData: (props: NoDataProps) => import("react/jsx-runtime").JSX.Element;
 export default NoData;

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

@@ -1,7 +1,7 @@
 export default NotificationsContainer;
 declare function NotificationsContainer({ stacked }: {
     stacked: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare namespace NotificationsContainer {
     namespace defaultProps {
         const stacked: boolean;

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

@@ -1,3 +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>>;
 export default NumberControl;
-declare const NumberControl: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

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

@@ -2,30 +2,31 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 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.defaultProps.min, max = NumberInput_1.defaultProps.max, step = NumberInput_1.defaultProps.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 { 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"]);
     // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
     const callback = onChange || onValueChanged;
-    const timeout = (0, react_1.useRef)();
+    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 = callback => {
-        clearTimeout(timeout.current);
+    const initialTimeout = (callbackFn) => {
+        if (timeout.current !== null) {
+            clearTimeout(timeout.current);
+        }
         timeout.current = setTimeout(() => {
-            callback();
+            callbackFn();
         }, INITIAL_TICK);
     };
-    const recursiveTimeout = callback => {
+    const recursiveTimeout = (callbackFn) => {
         timeout.current = setTimeout(() => {
-            callback();
+            callbackFn();
         }, TICK_TIME);
     };
     // Update internal state if external value has changed
@@ -43,7 +44,7 @@ const NumberControl = (0, react_1.forwardRef)((props, ref) => {
     (0, react_1.useEffect)(() => {
         // Call increment function for a loop when button is holding down
         if (isHoldingDownInc && !disabled) {
-            initialTimeout(incrementRecusively);
+            initialTimeout(incrementRecursively);
         }
         // Call decrement function for a loop when button is holding down
         if (isHoldingDownDec && !disabled) {
@@ -52,7 +53,7 @@ const NumberControl = (0, react_1.forwardRef)((props, ref) => {
     }, [isHoldingDownInc, isHoldingDownDec]);
     const incrementInternalValue = () => {
         setInternalValue(val => {
-            const currentValue = (0, NumberInput_1.convertNonIntegerToDefault)(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;
@@ -60,15 +61,15 @@ const NumberControl = (0, react_1.forwardRef)((props, ref) => {
     };
     const decrementInternalValue = () => {
         setInternalValue(val => {
-            const currentValue = (0, NumberInput_1.convertNonIntegerToDefault)(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 incrementRecusively = () => {
+    const incrementRecursively = () => {
         incrementInternalValue();
-        recursiveTimeout(incrementRecusively);
+        recursiveTimeout(incrementRecursively);
     };
     const decrementRecursively = () => {
         decrementInternalValue();
@@ -91,37 +92,24 @@ const NumberControl = (0, react_1.forwardRef)((props, ref) => {
         decrementInternalValue();
     };
     const handleStopHolding = () => {
-        clearTimeout(timeout.current);
+        if (timeout.current !== null) {
+            clearTimeout(timeout.current);
+        }
         setIsHoldingDownInc(false);
         setIsHoldingDownDec(false);
     };
-    const handleUpdatedNumberInputValue = value => {
+    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 (value !== undefined && !(isHoldingDownDec && isHoldingDownInc)) {
-            setInternalValue(Number(value));
+        if (newValue !== undefined && !(isHoldingDownDec && isHoldingDownInc)) {
+            setInternalValue(Number(newValue));
         }
-        callback(value);
+        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' }) }))] }))] })) })));
 });
-NumberControl.propTypes = {
-    min: prop_types_1.default.number,
-    max: prop_types_1.default.number,
-    value: prop_types_1.default.number,
-    step: prop_types_1.default.number,
-    disabled: prop_types_1.default.bool,
-    onChange: prop_types_1.default.func,
-    onValueChanged: prop_types_1.default.func,
-    bsSize: prop_types_1.default.string,
-    className: prop_types_1.default.string,
-    unit: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    inputAddon: prop_types_1.default.string,
-    digitPrecision: prop_types_1.default.number,
-    placeholder: prop_types_1.default.string,
-};
 exports.default = NumberControl;

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

@@ -1,10 +1,77 @@
-export namespace defaultProps {
-    export const min: number;
-    export const max: number;
-    export { DEFAULT_STEP as step };
-}
-export function convertNonIntegerToDefault(value: any): any;
+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 = {
+    /**
+     * 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;
+    /**
+     * 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
+     */
+    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
+     */
+    onValueChanged?: (value?: number) => 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;
+    /**
+     * 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<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
 export default NumberInput;
-declare const DEFAULT_STEP: 1;
-declare const NumberInput: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

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

@@ -1,29 +1,47 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertNonIntegerToDefault = exports.defaultProps = void 0;
+exports.convertNonIntegerToDefault = exports.DEFAULT_MAX = exports.DEFAULT_MIN = exports.DEFAULT_STEP = exports.DEFAULT_VALUE = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const useAfterMount_1 = tslib_1.__importDefault(require("../../hooks/useAfterMount"));
 const DEFAULT_DIGIT_PRECISION = 3;
-const DEFAULT_VALUE = 0;
-const DEFAULT_STEP = 1;
+exports.DEFAULT_VALUE = 0;
+exports.DEFAULT_STEP = 1;
+exports.DEFAULT_MIN = 0;
+exports.DEFAULT_MAX = Number.MAX_VALUE;
+const validKeys = [
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '.',
+    ',',
+    '-',
+    'Backspace',
+    'Tab',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowDown',
+    'ArrowUp',
+];
 // 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
-exports.defaultProps = {
-    min: 0,
-    max: Number.MAX_VALUE,
-    step: DEFAULT_STEP,
-};
 const getValueFromProps = (val, min, max, placeholder) => {
     // Show placeholders if given instead of 0
     if (val === undefined && placeholder) {
         return '';
     }
-    return clampNumber(Number(val), min, max) || DEFAULT_VALUE;
+    return clampNumber(Number(val), min, max) || exports.DEFAULT_VALUE;
 };
 const clampNumber = (value, min, max) => {
     if (value < min) {
@@ -34,20 +52,23 @@ const clampNumber = (value, min, max) => {
     }
     return value;
 };
-const convertNonIntegerToDefault = value => {
-    let currentValue = value;
-    if (!Number.isFinite(currentValue)) {
-        currentValue = DEFAULT_VALUE;
-    }
-    return currentValue;
+const convertNonIntegerToDefault = (value, fallback) => {
+    return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
 };
 exports.convertNonIntegerToDefault = convertNonIntegerToDefault;
-const NumberInput = react_1.default.forwardRef((props, ref) => {
-    const { unit, inputAddon, className, bsSize, disabled, onChange, onValueChanged = () => { }, min: propMin, max: propMax, value: propValue, step = DEFAULT_STEP, digitPrecision = DEFAULT_DIGIT_PRECISION, placeholder } = props, remainingProps = tslib_1.__rest(props, ["unit", "inputAddon", "className", "bsSize", "disabled", "onChange", "onValueChanged", "min", "max", "value", "step", "digitPrecision", "placeholder"]);
+const isMultipleKeyInput = (key, event, previousKeyRef) => {
+    return event.key === key && previousKeyRef.current.includes(key);
+};
+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 previousKeyRef = (0, react_1.useRef)('');
     // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
     const callback = onChange || onValueChanged;
-    const min = Number.isFinite(propMin) ? propMin : exports.defaultProps.min;
-    const max = Number.isFinite(propMax) ? propMax : exports.defaultProps.max;
+    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);
     // Define local state and define initial values
     const [state, setState] = (0, react_1.useState)({
@@ -63,7 +84,7 @@ const NumberInput = react_1.default.forwardRef((props, ref) => {
             isValid: true,
         });
     }, [propValue, clampNumber]);
-    const applyValue = newValue => {
+    const applyValue = (newValue) => {
         if (newValue === '-' || newValue === '') {
             setState({
                 value: newValue,
@@ -83,48 +104,60 @@ const NumberInput = react_1.default.forwardRef((props, ref) => {
         // Only call back the caller for valid values
         isValid && callback(newValidValue);
     };
-    const handleOnChange = event => {
+    const handleOnChange = (event) => {
+        console.log(event.target.value);
         applyValue(event.target.value);
     };
-    // Prevent entering exponent to avoide side effects
+    // Prevent entering exponent to avoid side effects
     // See https://bugzilla.mozilla.org/show_bug.cgi?id=1398528
-    const handleKeyDown = event => {
-        if (event.key === 'e' || event.key === 'E') {
+    // Also preventing letter inputs or multiple consecutive characters
+    // that is possible by Firefox and Safari
+    const handleKeyDown = (event) => {
+        // Allow for key combination like "ctrl + a"
+        if (event.ctrlKey || event.altKey || event.metaKey) {
+            return;
+        }
+        // Check for multiple dots, commas or dashes (consecutive)
+        if (isMultipleKeyInput('.', event, previousKeyRef) ||
+            isMultipleKeyInput(',', event, previousKeyRef) ||
+            isMultipleKeyInput('-', event, previousKeyRef) ||
+            isInvalidAfter(',', ['.', '-'], event, previousKeyRef) ||
+            isInvalidAfter('.', [',', '-'], event, previousKeyRef) ||
+            isInvalidAfter('-', ['.', ','], event, previousKeyRef) ||
+            event.key === 'Process' ||
+            event.key === 'Dead' ||
+            event.shiftKey) {
             event.preventDefault();
         }
+        // Filter out everything that is not a number
+        if (!validKeys.includes(event.key)) {
+            event.preventDefault();
+        }
+        previousKeyRef.current = event.key;
     };
-    const handleBlur = event => {
+    const handleBlur = () => {
         // When the value is removed, keep the input empty but trigger the outside callback
         // since the user has finished his input
         const lastEnteredValue = state.enteredValue;
         if (lastEnteredValue === '') {
-            callback(lastEnteredValue);
+            callback();
             return;
         }
         // Otherwise, validate the input, round it according to digitPrecision,
-        // and clamp the value if the entered value exeeds the limitations
-        const convertedEnteredValue = (0, exports.convertNonIntegerToDefault)(Number(lastEnteredValue));
-        const validNumber = clampNumber(Number(convertedEnteredValue).toFixed(digitPrecision), min, max);
+        // and clamp the value if the entered value exceeds the limitations
+        const convertedEnteredValue = (0, exports.convertNonIntegerToDefault)(Number(lastEnteredValue), exports.DEFAULT_VALUE);
+        const validNumber = clampNumber(Number(convertedEnteredValue.toFixed(digitPrecision)), min, max);
         applyValue(validNumber);
     };
+    const handleWheel = (event) => {
+        const target = event.target;
+        if (target instanceof HTMLInputElement) {
+            target.blur();
+        }
+    };
     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: event => event.target.blur() })));
+    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);
 });
-NumberInput.propTypes = {
-    min: prop_types_1.default.number,
-    max: prop_types_1.default.number,
-    value: prop_types_1.default.number,
-    step: prop_types_1.default.number,
-    disabled: prop_types_1.default.bool,
-    onChange: prop_types_1.default.func,
-    onValueChanged: prop_types_1.default.func,
-    bsSize: prop_types_1.default.oneOf(['sm', 'lg', 'small', 'large']),
-    className: prop_types_1.default.string,
-    unit: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    inputAddon: prop_types_1.default.string,
-    digitPrecision: prop_types_1.default.number,
-    placeholder: prop_types_1.default.string,
-};
 exports.default = NumberInput;

package/lib/es/components/overlay/OverlayTrigger.d.ts

@@ -1,20 +1,8 @@
-import { type PropsWithChildren, type ReactNode } from 'react';
-import type { delayProp } from '../../types';
-import { type Placement } from '../../values/Placement';
-import { type Trigger } from '../../values/Trigger';
-export type OverlayTriggerProps = {
-    trigger?: Trigger;
-    delay?: number | delayProp;
-    placement: Placement;
-    show?: boolean;
-    defaultShow?: boolean;
-    onToggle?: VoidFunction;
-    overlay: ReactNode;
-    popperConfig?: object;
-    rootClose?: boolean;
-};
+import { type PropsWithChildren } from 'react';
+import { type OverlayTriggerProps as BSOverlayTriggerProps } from 'react-bootstrap/OverlayTrigger';
+export type OverlayTriggerProps = Omit<BSOverlayTriggerProps, 'children'>;
 declare const OverlayTrigger: {
-    (props: PropsWithChildren<OverlayTriggerProps>): JSX.Element;
+    (props: PropsWithChildren<OverlayTriggerProps>): import("react/jsx-runtime").JSX.Element;
     TRIGGER_CLICK: "click";
     TRIGGER_HOVER: "hover";
     TRIGGER_FOCUS: "focus";

package/lib/es/components/overlay/OverlayTrigger.js

@@ -5,12 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore-next-line importsNotUsedAsValues
 require("react");
 const OverlayTrigger_1 = tslib_1.__importDefault(require("react-bootstrap/OverlayTrigger"));
+const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
 const Placement_1 = require("../../values/Placement");
 const Trigger_1 = require("../../values/Trigger");
 const OverlayTrigger = (props) => {
-    const { rootClose = true } = props, remainingProps = tslib_1.__rest(props, ["rootClose"]);
+    const usedProps = Object.assign({ rootClose: true }, (0, omit_1.default)(props, 'children'));
+    const { children } = props;
     // @ts-ignore
-    return (0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ rootClose: rootClose }, remainingProps));
+    return (0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({}, usedProps, { children: children }));
 };
 OverlayTrigger.TRIGGER_CLICK = Trigger_1.TRIGGER.CLICK;
 OverlayTrigger.TRIGGER_HOVER = Trigger_1.TRIGGER.HOVER;