@ultraviolet/ui 1.44.0 → 1.45.0

package/dist/index.d.ts

@@ -1997,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[];
@@ -2016,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: {
@@ -2506,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/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

@@ -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.44.0",
+  "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.1",
+    "@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.11.0"
+    "@ultraviolet/icons": "2.11.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",