@ultraviolet/ui 1.43.2 → 1.45.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 = {
@@ -1996,10 +1997,10 @@ type NoticeProps = {
  */
 declare const Notice: ({ children, className, "data-testid": dataTestId, }: NoticeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type CheckboxGroupCheckboxProps = Omit<ComponentProps<typeof Checkbox>, 'onChange' | 'checked' | 'required'> & {
+type CheckboxGroupCheckboxProps = Omit<ComponentProps<typeof Checkbox>, 'onChange' | 'checked'> & {
     value: string;
 };
-declare const CheckboxGroupCheckbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, }: CheckboxGroupCheckboxProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const CheckboxGroupCheckbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, }: CheckboxGroupCheckboxProps) => _emotion_react_jsx_runtime.JSX.Element;
 type CheckboxGroupProps = {
     legend: string;
     value?: string[];
@@ -2015,7 +2016,7 @@ type CheckboxGroupProps = {
  */
 declare const CheckboxGroup: {
     ({ legend, value, className, helper, error, direction, children, onChange, name, required, }: CheckboxGroupProps): _emotion_react_jsx_runtime.JSX.Element;
-    Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, }: CheckboxGroupCheckboxProps) => _emotion_react_jsx_runtime.JSX.Element;
+    Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, }: CheckboxGroupCheckboxProps) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
 declare const containerSizes: {
@@ -2505,13 +2506,15 @@ type SkeletonProps = {
     length?: number;
     col?: number;
     className?: string;
+    'aria-label'?: string;
+    'data-testid'?: string;
 };
 /**
  * Skeleton component is used to indicate that the data is loading.
  * It is used to provide a better user experience by showing a temporary placeholder reflecting the dimensions of the
  * content that will eventually be loaded on the screen.
  */
-declare const Skeleton: ({ variant, length, col, className, }: SkeletonProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Skeleton: ({ variant, length, col, className, "aria-label": ariaLabel, "data-testid": dataTestId, }: SkeletonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Prefixes = 'lines' | 'command';
 type SnippetProps = {

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

@@ -4,14 +4,15 @@ import { jsx } from '@emotion/react/jsx-runtime';
 
 const formatTextToAvatar = text => {
   if (!text) return '';
-  if (text.length <= 2) {
-    return text.toUpperCase();
+  const textCleaned = text.replace(/\s+/g, ' ').trim();
+  if (textCleaned.length <= 2) {
+    return textCleaned.toUpperCase();
   }
-  if (text.split(' ').length > 1) {
-    const [a, b] = text.split(' ');
+  if (textCleaned.split(' ').length > 1) {
+    const [a, b] = textCleaned.split(' ');
     return `${a[0]}${b[0]}`.toUpperCase();
   }
-  return text.substring(0, 2).toUpperCase();
+  return textCleaned.substring(0, 2).toUpperCase();
 };
 const StyledTextAvatar = /*#__PURE__*/_styled("span", {
   target: "ec0473m1"

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

@@ -8,6 +8,16 @@ import { jsx, jsxs } 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 CheckboxGroupContext = /*#__PURE__*/createContext(undefined);
+const StyledCheckbox = /*#__PURE__*/_styled(Checkbox, {
+  target: "e1k5uyng2"
+})(process.env.NODE_ENV === "production" ? {
+  name: "6vgcqf",
+  styles: "label{width:fit-content;}"
+} : {
+  name: "6vgcqf",
+  styles: "label{width:fit-content;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 const CheckboxGroupCheckbox = ({
   onFocus,
   onBlur,
@@ -19,7 +29,8 @@ const CheckboxGroupCheckbox = ({
   helper,
   className,
   autoFocus,
-  'data-testid': dataTestId
+  'data-testid': dataTestId,
+  required
 }) => {
   const context = useContext(CheckboxGroupContext);
   if (!context) {
@@ -32,7 +43,7 @@ const CheckboxGroupCheckbox = ({
   } = context;
   const checkboxName = `${groupName}.${name ?? ''}`;
   const checkboxValue = `${value}`;
-  return jsx(Checkbox, {
+  return jsx(StyledCheckbox, {
     onChange: onChange,
     checked: groupValues?.includes(checkboxValue),
     onFocus: onFocus,
@@ -45,6 +56,7 @@ const CheckboxGroupCheckbox = ({
     className: className,
     autoFocus: autoFocus,
     "data-testid": dataTestId,
+    required: required,
     children: children
   });
 };
@@ -86,8 +98,9 @@ const CheckboxGroup = ({
   const contextValue = useMemo(() => ({
     groupName: name,
     groupValues: value ?? [],
-    onChange
-  }), [name, value, onChange]);
+    onChange,
+    required
+  }), [name, value, onChange, required]);
   return jsx(CheckboxGroupContext.Provider, {
     value: contextValue,
     children: jsxs(Stack, {

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,28 +228,13 @@ 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;
-                }
-                if (onChange) {
-                  onChangeValue(event.target.value);
-                }
-                onBlur?.(event);
-              },
-              defaultValue: value?.toString(),
+              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/SelectInput/index.js

@@ -2,7 +2,6 @@ import _styled from '@emotion/styled/base';
 import { useTheme, css } from '@emotion/react';
 import { Icon } from '@ultraviolet/icons';
 import { forwardRef, useState, useId, useMemo, useEffect } from 'react';
-import flattenChildren from 'react-flatten-children';
 import Select, { components } from 'react-select';
 import isJSONString from '../../helpers/isJSON.js';
 import * as animations from '../../utils/animations.js';
@@ -531,7 +530,7 @@ const FwdSelectInput = ({
   const currentValue = value?.value;
 
   // Options need to keep the same reference otherwise react-select doesn't focus the selected option
-  const selectOptions = useMemo(() => options || flattenChildren(children).map(({
+  const selectOptions = useMemo(() => options || (children ?? []).map(({
     props: {
       children: label,
       ...subProps

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

@@ -105,7 +105,7 @@ const SelectableCardGroup = ({
         className: className,
         children: jsxs(Stack, {
           gap: 1.5,
-          children: [jsxs(Text, {
+          children: [legend ? jsxs(Text, {
             as: "legend",
             variant: "bodyStrong",
             children: [legend && jsxs(Fragment, {
@@ -115,7 +115,7 @@ const SelectableCardGroup = ({
               color: "danger",
               size: 8
             }) : null]
-          }), jsx(Row, {
+          }) : null, jsx(Row, {
             gap: 2,
             templateColumns: `repeat(${columns}, auto)`,
             children: children

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"
@@ -26,7 +26,7 @@ const StyledHr = /*#__PURE__*/_styled('hr', {
 }) => direction === 'horizontal' ? `${thickness}px` : 'auto', ";flex-shrink:0;background-color:", ({
   theme,
   color
-}) => theme.colors[color].border, ";", ({
+}) => theme.colors[color].borderWeak, ";", ({
   hasIcon
 }) => hasIcon && `flex: 1;`, ";");
 /**

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

@@ -61,13 +61,17 @@ const Skeleton = ({
   variant = 'blocks',
   length,
   col,
-  className
+  className,
+  'aria-label': ariaLabel,
+  'data-testid': dataTestId
 }) => {
   const Component = variants[variant];
   return jsxs(StyledContainer, {
     className: className,
     "aria-busy": true,
     "aria-live": "polite",
+    "aria-label": ariaLabel,
+    "data-testid": dataTestId,
     children: [jsx(Component, {
       length: length,
       col: col

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

@@ -1,7 +1,6 @@
 import _styled from '@emotion/styled/base';
 import { keyframes, css } from '@emotion/react';
 import { Children, Fragment } from 'react';
-import flattenChildren from 'react-flatten-children';
 import { Bullet } from '../Bullet/index.js';
 import { Text } from '../Text/index.js';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
@@ -121,7 +120,7 @@ const Stepper = ({
     "data-testid": dataTestId,
     labelPosition: labelPosition,
     size: size,
-    children: flattenChildren(children).map((child, index) => {
+    children: Children.map(children, (child, index) => {
       const getTemporal = () => {
         if (selected > index) return 'previous';
         if (selected === index) return 'current';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.43.2",
+  "version": "1.45.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,13 +39,13 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.24.0",
+    "@babel/core": "7.24.3",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
-    "@types/react": "18.2.61",
+    "@types/react": "18.2.64",
     "@types/react-datepicker": "4.19.6",
-    "@types/react-dom": "18.2.19",
+    "@types/react-dom": "18.2.21",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -56,18 +56,16 @@
     "@nivo/line": "0.80.0",
     "@nivo/pie": "0.80.0",
     "@nivo/scales": "0.80.0",
-    "@nivo/tooltip": "0.80.0",
-    "@scaleway/random-name": "4.0.3",
+    "@scaleway/random-name": "5.0.0",
     "@scaleway/use-media": "2.0.1",
     "deepmerge": "4.3.1",
     "react-datepicker": "4.25.0",
-    "react-flatten-children": "1.1.2",
     "react-select": "5.8.0",
     "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.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",