@ultraviolet/ui 1.42.0 → 1.43.1

package/dist/index.d.ts

@@ -1202,6 +1202,7 @@ type CommonProps = {
     sentiment?: SENTIMENT;
     disabled?: boolean;
     iconPosition?: 'left' | 'right';
+    iconVariant?: ComponentProps<typeof Icon>['variant'];
     fullWidth?: boolean;
     isLoading?: boolean;
     'aria-label'?: string;
@@ -1484,6 +1485,7 @@ type BulletSize = keyof typeof sizes;
 type ContentProps$1 = XOR<[
     {
         icon: ComponentProps<typeof Icon>['name'];
+        iconVariant?: ComponentProps<typeof Icon>['variant'];
     },
     {
         text: string;
@@ -1501,7 +1503,7 @@ type BulletProps = {
 /**
  * Bullet component is used to display a small icon or text with a colored background in a circle.
  */
-declare const Bullet: ({ className, sentiment, size, icon, text, tooltip, tooltipBaseId, "data-testid": dataTestId, prominence, }: BulletProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Bullet: ({ className, sentiment, size, icon, iconVariant, text, tooltip, tooltipBaseId, "data-testid": dataTestId, prominence, }: BulletProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type CardProps = {
     children: ReactNode;
@@ -2077,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/Bullet/index.js

@@ -72,6 +72,7 @@ const Bullet = ({
   sentiment = 'neutral',
   size = 'medium',
   icon,
+  iconVariant,
   text,
   tooltip,
   tooltipBaseId,
@@ -88,7 +89,8 @@ const Bullet = ({
     prominence: prominence,
     children: icon ? jsx(Icon, {
       name: icon,
-      size: "50%"
+      size: "50%",
+      variant: iconVariant
     }) : text
   })
 });

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

@@ -201,6 +201,7 @@ const Button = /*#__PURE__*/forwardRef(({
   disabled = false,
   icon,
   iconPosition = 'left',
+  iconVariant,
   fullWidth = false,
   isLoading = false,
   children,
@@ -226,7 +227,8 @@ const Button = /*#__PURE__*/forwardRef(({
   const content = jsxs(Fragment, {
     children: [!isLoading && icon ? jsx(Icon, {
       name: icon,
-      size: 16
+      size: "small",
+      variant: iconVariant
     }) : null, isLoading ? jsx(Loader, {
       active: true,
       trailColor: "transparent",

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.42.0",
+  "version": "1.43.1",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {