@ultraviolet/ui 1.43.1 → 1.44.0

package/dist/index.d.ts

@@ -1682,13 +1682,14 @@ type ExpandableProps = {
     minHeight?: number;
     className?: string;
     'data-testid'?: string;
+    animationDuration?: number;
 };
 /**
  * The Expandable component is a dynamic React component that allows for the expansion of its children content
  * based on its height. The component comes with a sleek and smooth animation, providing a visually pleasing
  * user experience.
  */
-declare const Expandable: ({ children, opened, minHeight, className, "data-testid": dataTestId, }: ExpandableProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Expandable: ({ children, opened, minHeight, className, "data-testid": dataTestId, animationDuration, }: ExpandableProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Transformer = (value: DatumValue) => string;
 type CustomLegendProps = {
@@ -2079,8 +2080,8 @@ declare const NumberInputV2: react.ForwardRefExoticComponent<{
     error?: string | undefined;
     success?: string | boolean | undefined;
     helper?: ReactNode;
-    value?: number | undefined;
-    onChange?: ((newValue: number) => void) | undefined;
+    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>>;

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

@@ -5,9 +5,13 @@ import { jsx } from '@emotion/react/jsx-runtime';
 const ANIMATION_DURATION = 300; // in ms
 
 const StyledExpandable = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['opened', 'minHeight'].includes(prop),
+  shouldForwardProp: prop => !['opened', 'minHeight', 'animationDuration'].includes(prop),
   target: "e5hc7t70"
-})("transition:max-height ", ANIMATION_DURATION, "ms ease-out,opacity ", ANIMATION_DURATION, "ms ease-out;overflow:", ({
+})("transition:max-height ", ({
+  animationDuration
+}) => animationDuration, "ms ease-out,opacity ", ({
+  animationDuration
+}) => animationDuration, "ms ease-out;overflow:", ({
   opened
 }) => opened ? 'visible' : 'hidden', ";height:auto;max-height:", ({
   opened,
@@ -24,7 +28,8 @@ const Expandable = ({
   opened,
   minHeight = 0,
   className,
-  'data-testid': dataTestId
+  'data-testid': dataTestId,
+  animationDuration = ANIMATION_DURATION
 }) => {
   const [height, setHeight] = useState(null);
   const transitionTimer = useRef();
@@ -76,6 +81,7 @@ const Expandable = ({
     className: className,
     opened: opened,
     minHeight: minHeight,
+    animationDuration: animationDuration,
     children: children
   });
 };

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

@@ -9,7 +9,6 @@ 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',
@@ -139,27 +138,6 @@ const NumberInputV2 = /*#__PURE__*/forwardRef(({
     }
     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;
@@ -191,6 +169,10 @@ const NumberInputV2 = /*#__PURE__*/forwardRef(({
     }
     return 'neutral';
   }, [error, success]);
+  let inputValue;
+  if (value !== undefined) {
+    inputValue = value !== null && Number.isInteger(value) ? value.toString() : '';
+  }
   return jsxs(Stack, {
     gap: "0.5",
     className: className,
@@ -246,23 +228,13 @@ 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;
-                }
-                if (onChange) {
-                  onChangeValue(event.target.value);
-                }
-                onBlur?.(event);
-              },
-              defaultValue: value,
+              onChange: onChange ? event => {
+                const newNumber = parseInt(event.target.value, 10);
+                onChange(Number.isNaN(newNumber) ? null : newNumber);
+              } : undefined,
+              value: inputValue,
               onFocus: onFocus,
+              onBlur: onBlur,
               "data-size": size,
               step: step,
               disabled: disabled,

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

@@ -13,7 +13,7 @@ const StyledIcon = /*#__PURE__*/_styled(Icon, {
 })("fill:", ({
   color,
   theme
-}) => theme.colors[color].border, ";");
+}) => theme.colors[color].borderWeak, ";");
 const StyledHr = /*#__PURE__*/_styled('hr', {
   shouldForwardProp: prop => !['direction', 'thickness', 'color', 'hasIcon'].includes(prop),
   target: "e1d1zom90"

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.1",
+  "version": "1.44.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,7 +39,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.24.0",
+    "@babel/core": "7.24.1",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
@@ -63,11 +63,11 @@
     "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",
-    "@ultraviolet/icons": "2.10.1"
+    "@ultraviolet/icons": "2.11.0"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",