@ultraviolet/ui 1.43.0 → 1.43.1

package/dist/index.d.ts

@@ -2079,8 +2079,11 @@ declare const NumberInputV2: react.ForwardRefExoticComponent<{
     error?: string | undefined;
     success?: string | boolean | undefined;
     helper?: ReactNode;
-    value?: string | number | undefined;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus" | "id" | "aria-label" | "onFocus" | "onBlur" | "onChange" | "max" | "min" | "name" | "disabled" | "step" | "placeholder" | "readOnly" | "required"> & react.RefAttributes<HTMLInputElement>>;
+    value?: number | undefined;
+    onChange?: ((newValue: number) => void) | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus" | "id" | "aria-label" | "onFocus" | "onBlur" | "name" | "disabled" | "step" | "placeholder" | "readOnly" | "required"> & react.RefAttributes<HTMLInputElement>>;
 
 type PaginationProps = {
     /**

package/dist/src/components/NumberInputV2/index.js

@@ -9,6 +9,7 @@ import { Tooltip } from '../Tooltip/index.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const NUMBER_INPUT_MAX_STR_LENGTH = /*#__PURE__*/Number.MAX_SAFE_INTEGER.toString().length;
 const SIZES = {
   small: '30px',
   medium: '38px',
@@ -101,7 +102,7 @@ const Container = /*#__PURE__*/_styled("div", {
  */
 const NumberInputV2 = /*#__PURE__*/forwardRef(({
   disabled = false,
-  max = Infinity,
+  max = Number.MAX_SAFE_INTEGER,
   min = 0,
   name,
   onChange,
@@ -130,21 +131,35 @@ const NumberInputV2 = /*#__PURE__*/forwardRef(({
   useImperativeHandle(ref, () => localRef.current);
   const uniqueId = useId();
   const localId = id ?? uniqueId;
-  const createChangeEvent = newValue => ({
-    target: {
-      value: newValue
-    }
-  });
   const onClickSideButton = useCallback(direction => () => {
     if (direction === 'up') {
       localRef.current?.stepUp();
-      onChange?.(createChangeEvent(localRef.current?.value ?? min));
-    }
-    if (direction === 'down') {
+    } else if (direction === 'down') {
       localRef.current?.stepDown();
-      onChange?.(createChangeEvent(localRef.current?.value ?? min));
     }
+    onChange?.(parseInt(localRef.current?.value ?? '', 10) ?? min);
   }, [localRef, min, onChange]);
+  const onChangeValue = inputStr => {
+    if (onChange) {
+      let numericValue;
+      if (inputStr.length > NUMBER_INPUT_MAX_STR_LENGTH && inputStr.startsWith('-')) {
+        numericValue = min;
+      } else if (inputStr.length > NUMBER_INPUT_MAX_STR_LENGTH) {
+        numericValue = max;
+      } else {
+        numericValue = parseInt(inputStr, 10);
+        if (Number.isNaN(numericValue) || numericValue < min) {
+          numericValue = min;
+        } else if (numericValue > max) {
+          numericValue = max;
+        }
+      }
+      onChange(numericValue);
+      if (localRef.current) {
+        localRef.current.value = numericValue.toString();
+      }
+    }
+  };
   const isMinusDisabled = useMemo(() => {
     if (!localRef?.current?.value || localRef?.current?.value === '') {
       return false;
@@ -231,25 +246,23 @@ const NumberInputV2 = /*#__PURE__*/forwardRef(({
               name: name,
               id: localId,
               placeholder: placeholder,
+              onKeyDown: event => {
+                if (event.key === 'Enter') {
+                  onChangeValue(localRef.current?.value ?? '');
+                }
+              },
               onBlur: event => {
                 if (event.target.value === '') {
                   onBlur?.(event);
                   return;
                 }
-                const numericValue = Number(event.target.value);
-                const maxValue = typeof max === 'number' ? max : Number(max);
-                const minValue = typeof min === 'number' ? min : Number(min);
-                if (Number.isNaN(numericValue) || !Number.isNaN(minValue) && numericValue < minValue) {
-                  onChange?.(createChangeEvent(min.toString()));
-                }
-                if (Number.isNaN(numericValue) || !Number.isNaN(maxValue) && numericValue > maxValue) {
-                  onChange?.(createChangeEvent(max.toString()));
+                if (onChange) {
+                  onChangeValue(event.target.value);
                 }
                 onBlur?.(event);
               },
+              defaultValue: value,
               onFocus: onFocus,
-              onChange: onChange,
-              value: value,
               "data-size": size,
               step: step,
               disabled: disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.43.0",
+  "version": "1.43.1",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {