@rio-cloud/rio-uikit 0.16.4-beta.26 → 0.16.4-beta.27

package/components/assetTree/AssetTree.js

@@ -26,7 +26,7 @@ const getCurrentCategoryElement = (children, currentCategoryId) => {
 };
 const renderTreesOffscreen = (children, categoryId) => {
     return React.Children.map(children, child => {
-        const offscreenClasses = classNames('TreeOffscreenWrapper', child && child.props.id !== categoryId && 'position-offscreen');
+        const offscreenClasses = classNames('TreeOffscreenWrapper', 'height-100pct', child && child.props.id !== categoryId && 'position-offscreen');
         return _jsx("div", Object.assign({ className: offscreenClasses }, { children: child }));
     });
 };

package/components/datepicker/DatePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import moment, { type Moment } from 'moment';
+import type { Moment } from 'moment';
 import Datetime, { type DatetimepickerProps } from 'react-datetime';
 export type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {
     /**
@@ -107,12 +107,12 @@ declare const DatePicker: React.ForwardRefExoticComponent<Omit<Datetime.Datetime
     /**
      * Default value of the DatePicker (date or moment).
      */
-    initialValue?: Date | moment.Moment | undefined;
+    initialValue?: Date | Moment | undefined;
     /**
      * Value of the DatePicker (date or moment). Use this only if you want to use
      * this component as a controlled component
      */
-    value?: string | Date | moment.Moment | undefined;
+    value?: string | Date | Moment | undefined;
     dateFormat?: string | boolean | undefined;
     timeFormat?: string | boolean | undefined;
     inputProps?: React.HTMLProps<HTMLInputElement> | undefined;

package/components/datepicker/DatePicker.js

@@ -2,24 +2,23 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, forwardRef } from 'react';
 import classNames from 'classnames';
-import moment from 'moment';
 import Datetime from 'react-datetime';
 import noop from 'lodash/fp/noop';
-import isEmpty from 'lodash/fp/isEmpty';
 const DEFAULT_LOCALE = 'en-GB';
 const DEFAULT_MIN_WIDTH = 0;
-const isValidDate = (date) => typeof date === 'object' && moment(date).isValid();
 const DatePicker = forwardRef((props, ref) => {
     const { id, dropup = false, alignRight = false, locale = DEFAULT_LOCALE, minWidth = DEFAULT_MIN_WIDTH, onChange = noop, mandatory = true, dateValidation, clearableInput = false, closeOnSelect = true, inputProps, className } = props, remainingProp = __rest(props, ["id", "dropup", "alignRight", "locale", "minWidth", "onChange", "mandatory", "dateValidation", "clearableInput", "closeOnSelect", "inputProps", "className"]);
     const [hasError, setHasError] = useState(false);
     const validateDate = (dateToValidate) => {
-        if (dateValidation) {
-            return dateValidation(dateToValidate);
-        }
-        // if the date is mandatory, convert it to a moment object to validate
-        const value = isEmpty(dateToValidate) ? undefined : dateToValidate;
-        const dateValue = typeof value === 'string' ? moment(value) : value;
-        return isValidDate(dateValue);
+        // If the entered date complies with the defined dateFormat, the Datetime component
+        // returns a moment object, otherwise the return value is a string.
+        // Note, using a isValid() function from moment or the Date object itself will result in
+        // different outcome in various browsers.
+        // For instance `new Date('1')` or `moment('1')` are valid dates in Chrome where it defaults
+        // to "01/01/2001" whereas in Firefox it is an invalid date.
+        // The solution is to compare the entered value to the date format which is done by React Datetime.
+        const isDateObject = typeof dateToValidate === 'object';
+        return dateValidation ? dateValidation(dateToValidate) : isDateObject;
     };
     const handleChange = (date) => {
         const isValid = mandatory ? validateDate(date) : true;

package/components/numberControl/NumberControl.js

@@ -7,7 +7,7 @@ const INITIAL_TICK = 700;
 const TICK_TIME = 50;
 const DEFAULT_DIGIT_PRECISION = 3;
 const NumberControl = forwardRef((props, ref) => {
-    const { id, min = DEFAULT_MIN, max = DEFAULT_MAX, step = DEFAULT_STEP, value, onChange, onValueChanged = () => { }, disabled, bsSize, className, unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace, digitPrecision = DEFAULT_DIGIT_PRECISION, placeholder } = props, remainingProps = __rest(props, ["id", "min", "max", "step", "value", "onChange", "onValueChanged", "disabled", "bsSize", "className", "unit", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace", "digitPrecision", "placeholder"]);
+    const { id, min = DEFAULT_MIN, max = DEFAULT_MAX, step = DEFAULT_STEP, value, onChange, onValueChanged = () => { }, disabled, bsSize, className, unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace, digitPrecision = DEFAULT_DIGIT_PRECISION, placeholder, noDefault } = props, remainingProps = __rest(props, ["id", "min", "max", "step", "value", "onChange", "onValueChanged", "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 = useRef(null);
@@ -108,6 +108,6 @@ const NumberControl = forwardRef((props, ref) => {
     };
     const classes = classNames('NumberControl', className);
     const controls = (_jsxs("div", Object.assign({ className: 'display-flex padding-left-10' }, { children: [_jsx("div", Object.assign({ onMouseDown: handleMouseDownOnDecrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'decrement-button', className: 'decrementButton text-color-gray hover-text-color-dark' }, { children: _jsx("div", { className: 'rioglyph rioglyph-minus scale-90' }) })), _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: _jsx("div", { className: 'rioglyph rioglyph-plus scale-90' }) }))] })));
-    return (_jsx("div", Object.assign({}, remainingProps, { className: classes }, { children: _jsx(NumberInput, { 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, digitPrecision: digitPrecision, placeholder: placeholder }) })));
+    return (_jsx("div", Object.assign({}, remainingProps, { className: classes }, { children: _jsx(NumberInput, { 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, digitPrecision: digitPrecision, placeholder: placeholder, noDefault: noDefault }) })));
 });
 export default NumberControl;

package/components/numberInput/NumberInput.d.ts

@@ -24,6 +24,12 @@ export type NumberInputProps = {
      * @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

package/components/numberInput/NumberInput.js

@@ -33,9 +33,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) || DEFAULT_VALUE;
@@ -59,13 +59,13 @@ const isInvalidAfter = (key, possiblePreviousKeys, event, previousKeyRef) => {
     return event.key === key && possiblePreviousKeys.includes(previousKeyRef.current);
 };
 const NumberInput = forwardRef((props, ref) => {
-    const { id, min: propMin, max: propMax, value: propValue, step = DEFAULT_STEP, disabled = false, onChange, onValueChanged = noop, bsSize = 'md', unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', controls, placeholder, digitPrecision = DEFAULT_DIGIT_PRECISION, className = '' } = props, remainingProps = __rest(props, ["id", "min", "max", "value", "step", "disabled", "onChange", "onValueChanged", "bsSize", "unit", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace", "controls", "placeholder", "digitPrecision", "className"]);
+    const { id, min: propMin, max: propMax, value: propValue, step = DEFAULT_STEP, disabled = false, noDefault = false, onChange, onValueChanged = noop, bsSize = 'md', unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', controls, placeholder, digitPrecision = DEFAULT_DIGIT_PRECISION, className = '' } = props, remainingProps = __rest(props, ["id", "min", "max", "value", "step", "disabled", "noDefault", "onChange", "onValueChanged", "bsSize", "unit", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace", "controls", "placeholder", "digitPrecision", "className"]);
     const previousKeyRef = useRef('');
     // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
     const callback = onChange || onValueChanged;
     const min = convertNonIntegerToDefault(propMin, DEFAULT_MIN);
     const max = convertNonIntegerToDefault(propMax, 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] = useState({
         value,
@@ -75,7 +75,7 @@ const NumberInput = forwardRef((props, ref) => {
     // Update internal value whenever the value prop from outside changes
     useAfterMount(() => {
         setState({
-            value: getValueFromProps(propValue, min, max, placeholder),
+            value: getValueFromProps(propValue, min, max, placeholder, noDefault),
             enteredValue: value,
             isValid: true,
         });
@@ -137,6 +137,11 @@ const NumberInput = 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 = convertNonIntegerToDefault(Number(lastEnteredValue), DEFAULT_VALUE);
@@ -152,7 +157,9 @@ const NumberInput = forwardRef((props, ref) => {
     const inputGroupClassNames = classNames('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
     const inputClassNames = classNames('form-control', 'no-controls', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', className);
     const hasFeedback = errorMessage || warningMessage;
-    const input = (_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: handleOnChange, onKeyDown: handleKeyDown, ref: ref, "aria-label": 'number-input', placeholder: placeholder, onWheel: handleWheel })));
+    const input = (_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 (_jsxs("div", Object.assign({ className: inputGroupClassNames }, { children: [inputAddon && (_jsx("div", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: inputAddon }) }))), _jsxs("div", Object.assign({ className: 'form-control-feedback-wrapper' }, { children: [input, hasFeedback && (_jsxs(_Fragment, { children: [errorMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), _jsx("span", Object.assign({ className: `help-block white-space-${messageWhiteSpace}` }, { children: _jsx("span", { children: errorMessage || warningMessage }) }))] }))] })), (unit || controls) && (_jsxs("div", Object.assign({ className: `input-group-addon ${disabled ? 'disabled pointer-events-none' : ''}` }, { children: [unit && unit, controls && controls] })))] })));
 });
 export default NumberInput;

package/lib/es/components/assetTree/AssetTree.js

@@ -28,7 +28,7 @@ const getCurrentCategoryElement = (children, currentCategoryId) => {
 };
 const renderTreesOffscreen = (children, categoryId) => {
     return react_1.default.Children.map(children, child => {
-        const offscreenClasses = (0, classnames_1.default)('TreeOffscreenWrapper', child && child.props.id !== categoryId && 'position-offscreen');
+        const offscreenClasses = (0, classnames_1.default)('TreeOffscreenWrapper', 'height-100pct', child && child.props.id !== categoryId && 'position-offscreen');
         return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: offscreenClasses }, { children: child }));
     });
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import moment, { type Moment } from 'moment';
+import type { Moment } from 'moment';
 import Datetime, { type DatetimepickerProps } from 'react-datetime';
 export type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {
     /**
@@ -107,12 +107,12 @@ declare const DatePicker: React.ForwardRefExoticComponent<Omit<Datetime.Datetime
     /**
      * Default value of the DatePicker (date or moment).
      */
-    initialValue?: Date | moment.Moment | undefined;
+    initialValue?: Date | Moment | undefined;
     /**
      * Value of the DatePicker (date or moment). Use this only if you want to use
      * this component as a controlled component
      */
-    value?: string | Date | moment.Moment | undefined;
+    value?: string | Date | Moment | undefined;
     dateFormat?: string | boolean | undefined;
     timeFormat?: string | boolean | undefined;
     inputProps?: React.HTMLProps<HTMLInputElement> | undefined;

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

@@ -4,24 +4,23 @@ 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 moment_1 = tslib_1.__importDefault(require("moment"));
 const react_datetime_1 = tslib_1.__importDefault(require("react-datetime"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const DEFAULT_LOCALE = 'en-GB';
 const DEFAULT_MIN_WIDTH = 0;
-const isValidDate = (date) => typeof date === 'object' && (0, moment_1.default)(date).isValid();
 const DatePicker = (0, react_1.forwardRef)((props, ref) => {
     const { id, dropup = false, alignRight = false, locale = DEFAULT_LOCALE, minWidth = DEFAULT_MIN_WIDTH, onChange = noop_1.default, mandatory = true, dateValidation, clearableInput = false, closeOnSelect = true, inputProps, className } = props, remainingProp = tslib_1.__rest(props, ["id", "dropup", "alignRight", "locale", "minWidth", "onChange", "mandatory", "dateValidation", "clearableInput", "closeOnSelect", "inputProps", "className"]);
     const [hasError, setHasError] = (0, react_1.useState)(false);
     const validateDate = (dateToValidate) => {
-        if (dateValidation) {
-            return dateValidation(dateToValidate);
-        }
-        // if the date is mandatory, convert it to a moment object to validate
-        const value = (0, isEmpty_1.default)(dateToValidate) ? undefined : dateToValidate;
-        const dateValue = typeof value === 'string' ? (0, moment_1.default)(value) : value;
-        return isValidDate(dateValue);
+        // If the entered date complies with the defined dateFormat, the Datetime component
+        // returns a moment object, otherwise the return value is a string.
+        // Note, using a isValid() function from moment or the Date object itself will result in
+        // different outcome in various browsers.
+        // For instance `new Date('1')` or `moment('1')` are valid dates in Chrome where it defaults
+        // to "01/01/2001" whereas in Firefox it is an invalid date.
+        // The solution is to compare the entered value to the date format which is done by React Datetime.
+        const isDateObject = typeof dateToValidate === 'object';
+        return dateValidation ? dateValidation(dateToValidate) : isDateObject;
     };
     const handleChange = (date) => {
         const isValid = mandatory ? validateDate(date) : true;

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

@@ -9,7 +9,7 @@ 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 = () => { }, disabled, bsSize, className, unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace, digitPrecision = DEFAULT_DIGIT_PRECISION, placeholder } = props, remainingProps = tslib_1.__rest(props, ["id", "min", "max", "step", "value", "onChange", "onValueChanged", "disabled", "bsSize", "className", "unit", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace", "digitPrecision", "placeholder"]);
+    const { id, min = NumberInput_1.DEFAULT_MIN, max = NumberInput_1.DEFAULT_MAX, step = NumberInput_1.DEFAULT_STEP, value, onChange, onValueChanged = () => { }, 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", "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);
@@ -110,6 +110,6 @@ const NumberControl = (0, react_1.forwardRef)((props, ref) => {
     };
     const classes = (0, classnames_1.default)('NumberControl', className);
     const controls = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex padding-left-10' }, { 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, digitPrecision: digitPrecision, placeholder: placeholder }) })));
+    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, digitPrecision: digitPrecision, placeholder: placeholder, noDefault: noDefault }) })));
 });
 exports.default = NumberControl;

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

@@ -24,6 +24,12 @@ export type NumberInputProps = {
      * @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

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;
@@ -63,13 +63,13 @@ const isInvalidAfter = (key, possiblePreviousKeys, event, previousKeyRef) => {
     return event.key === key && possiblePreviousKeys.includes(previousKeyRef.current);
 };
 const NumberInput = (0, react_1.forwardRef)((props, ref) => {
-    const { id, min: propMin, max: propMax, value: propValue, step = exports.DEFAULT_STEP, disabled = false, onChange, onValueChanged = 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", "onChange", "onValueChanged", "bsSize", "unit", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace", "controls", "placeholder", "digitPrecision", "className"]);
+    const { id, min: propMin, max: propMax, value: propValue, step = exports.DEFAULT_STEP, disabled = false, noDefault = false, onChange, onValueChanged = 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", "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,7 +79,7 @@ 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,
         });
@@ -141,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 +161,9 @@ 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 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: handleOnChange, onKeyDown: handleKeyDown, ref: ref, "aria-label": 'number-input', placeholder: placeholder, onWheel: handleWheel })));
+    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/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.4-beta.26"
+    "version": "0.16.4-beta.27"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.4-beta.26",
+    "version": "0.16.4-beta.27",
     "description": "The RIO UIKIT component library",
     "repository": "https://bitbucket.collaboration-man.com/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -144,4 +144,4 @@
         "Firefox ESR",
         "not dead"
     ]
-}
+}

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.4-beta.26"
+    "version": "0.16.4-beta.27"
 }