@ultraviolet/ui 1.43.0 → 1.43.2

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 | null | undefined;
+    onChange?: ((newValue: number | null) => 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,28 @@ const NumberInputV2 = /*#__PURE__*/forwardRef(({
               name: name,
               id: localId,
               placeholder: placeholder,
+              onKeyDown: event => {
+                if (event.key === 'Enter') {
+                  if (!localRef.current?.value) {
+                    onChange?.(null);
+                  } else if (onChange) {
+                    onChangeValue(localRef.current?.value ?? '');
+                  }
+                }
+              },
               onBlur: event => {
                 if (event.target.value === '') {
                   onBlur?.(event);
+                  onChange?.(null);
                   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?.toString(),
               onFocus: onFocus,
-              onChange: onChange,
-              value: value,
               "data-size": size,
               step: step,
               disabled: disabled,

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

@@ -58,7 +58,7 @@ const StyledInputWrapper = /*#__PURE__*/_styled('div', {
   theme
 }) => theme.colors.success.border, ";}&[data-error='true']{border-color:", ({
   theme
-}) => theme.colors.danger.border, ";}&[data-readOnly='true']{background:", ({
+}) => theme.colors.danger.border, ";}&[data-readonly='true']{background:", ({
   theme
 }) => theme.colors.neutral.backgroundWeak, ";border-color:", ({
   theme
@@ -70,7 +70,7 @@ const StyledInputWrapper = /*#__PURE__*/_styled('div', {
   theme
 }) => theme.colors.neutral.textDisabled, ";&::placeholder{color:", ({
   theme
-}) => theme.colors.neutral.textWeakDisabled, ";}}}&:not([data-disabled='true']):not([data-readOnly]):hover{border-color:", ({
+}) => theme.colors.neutral.textWeakDisabled, ";}}}&:not([data-disabled='true']):not([data-readonly]):hover{border-color:", ({
   theme
 }) => theme.colors.primary.border, ";}", ({
   theme,
@@ -159,7 +159,7 @@ const TextInputV2 = /*#__PURE__*/forwardRef(({
         children: jsxs(StyledInputWrapper, {
           hasFocus: hasFocus,
           "data-disabled": disabled,
-          "data-readOnly": readOnly,
+          "data-readonly": readOnly,
           "data-success": !!success,
           "data-error": !!error,
           size: size,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.43.0",
+  "version": "1.43.2",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -63,7 +63,7 @@
     "react-datepicker": "4.25.0",
     "react-flatten-children": "1.1.2",
     "react-select": "5.8.0",
-    "react-toastify": "10.0.4",
+    "react-toastify": "10.0.5",
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.9.0",