@ultraviolet/ui 1.35.0 → 1.37.0

package/dist/index.d.ts

@@ -529,6 +529,14 @@ declare const extendTheme: (extendedTheme: RecursivePartial<UltravioletUITheme>)
                         fillWeak: string;
                         fillWeakDisabled: string;
                     };
+                    original: {
+                        fill: string;
+                        fillDisabled: string;
+                        fillStrong: string;
+                        fillStrongDisabled: string;
+                        fillWeak: string;
+                        fillWeakDisabled: string;
+                    };
                     primary: {
                         fill: string;
                         fillDisabled: string;
@@ -2041,8 +2049,7 @@ type NumberInputProps = {
     error?: string | boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'defaultValue'>;
 /**
- * NumberInput component is used to increment / decrement a number value by clicking on + / - buttons or
- * by typing into input.
+ * @deprecated This component is deprecated. Please use `NumberInputV2` instead.
  */
 declare const NumberInput: ({ disabled, maxValue, minValue, name, onChange, onFocus, onBlur, onMaxCrossed, onMinCrossed, size, step, text, defaultValue, value, disabledTooltip, className, label, id, placeholder, error, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "data-testid": dataTestId, }: NumberInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
@@ -2690,12 +2697,13 @@ declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttri
     Body: ({ children }: {
         children: ReactNode;
     }) => _emotion_react_jsx_runtime.JSX.Element;
-    Row: ({ children, className, id, selectDisabled, "data-testid": dataTestid, }: {
+    Row: ({ children, className, id, selectDisabled, highlightAnimation, "data-testid": dataTestid, }: {
         children: ReactNode;
         className?: string | undefined;
         id: string;
         'data-testid'?: string | undefined;
         selectDisabled?: string | boolean | undefined;
+        highlightAnimation?: boolean | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     Cell: ({ children, className, colSpan, rowSpan }: {
         children?: ReactNode;
@@ -3200,7 +3208,12 @@ type VerificationCodeProps = {
  */
 declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, inputStyle, size, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, }: VerificationCodeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type RadioGroupRadioProps = Omit<ComponentProps<typeof Radio>, 'onChange' | 'checked' | 'required'>;
+type RadioGroupRadioProps = Omit<ComponentProps<typeof Radio>, 'onChange' | 'checked' | 'required'> & {
+    /**
+     * @deprecated you don't need to use `name` anymore, the name will be passed from the parent `RadioGroup`.
+     */
+    name?: string;
+};
 type RadioGroupProps = {
     legend: string;
     value: string | number;

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

@@ -13,11 +13,11 @@ const contractString = str => {
 const StyledOl = /*#__PURE__*/_styled("ol", {
   target: "ej0p0s41"
 })(process.env.NODE_ENV === "production" ? {
-  name: "55j7or",
-  styles: "list-style:none;margin:0;padding:0;display:flex;align-items:center"
+  name: "105zz11",
+  styles: "list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center"
 } : {
-  name: "55j7or",
-  styles: "list-style:none;margin:0;padding:0;display:flex;align-items:center",
+  name: "105zz11",
+  styles: "list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const ItemContainer = /*#__PURE__*/_styled("li", {

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

@@ -79,8 +79,7 @@ const StyledContainer = /*#__PURE__*/_styled('div', {
   theme
 }) => theme.colors.primary.borderHover, ";}}");
 /**
- * NumberInput component is used to increment / decrement a number value by clicking on + / - buttons or
- * by typing into input.
+ * @deprecated This component is deprecated. Please use `NumberInputV2` instead.
  */
 const NumberInput = ({
   disabled = false,

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

@@ -107,7 +107,7 @@ const NumberInputV2 = /*#__PURE__*/forwardRef(({
   onChange,
   onFocus,
   onBlur,
-  size = 'medium',
+  size = 'large',
   step,
   unit,
   value,

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

@@ -31,15 +31,14 @@ const RadioGroupRadio = ({
     onChange,
     groupValue
   } = context;
-  const radioName = `${groupName}-${name ?? ''}`;
   return jsx(Radio, {
     onChange: onChange,
-    checked: `${groupName}-${groupValue}` === radioName,
+    checked: groupValue === value,
     onFocus: onFocus,
     onBlur: onBlur,
     disabled: disabled,
     error: error,
-    name: radioName,
+    name: groupName ?? name,
     value: value,
     label: label,
     helper: helper,

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

@@ -1,14 +1,15 @@
 import _styled from '@emotion/styled/base';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useRef, useCallback } from 'react';
 import { Checkbox } from '../Checkbox/index.js';
 import { Radio } from '../Radio/index.js';
+import { Stack } from '../Stack/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 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 Container = /*#__PURE__*/_styled("div", {
+const Container = /*#__PURE__*/_styled(Stack, {
   target: "e1s5n3hj2"
-})("display:inline-flex;flex-direction:column;align-items:start;padding:", ({
+})("padding:", ({
   theme
 }) => theme.space['2'], ";border-radius:", ({
   theme
@@ -87,8 +88,23 @@ const SelectableCard = /*#__PURE__*/forwardRef(({
   'data-testid': dataTestId
 }, ref) => {
   const innerRef = useRef(null);
-  return jsx(Tooltip, {
-    text: tooltip,
+  const ParentContainer = useCallback(({
+    children: subChildren
+  }) => {
+    if (tooltip) {
+      return jsx(Stack, {
+        flex: 1,
+        children: jsx(Tooltip, {
+          text: tooltip,
+          children: subChildren
+        })
+      });
+    }
+    return jsx(Tooltip, {
+      children: subChildren
+    });
+  }, [tooltip]);
+  return jsx(ParentContainer, {
     children: jsxs(Container, {
       onClick: () => {
         if (innerRef?.current) {
@@ -102,6 +118,10 @@ const SelectableCard = /*#__PURE__*/forwardRef(({
       "data-testid": dataTestId,
       "data-type": type,
       ref: ref,
+      alignItems: "start",
+      direction: "column",
+      gap: 0.5,
+      flex: 1,
       children: [type === 'radio' ? jsx(StyledRadio, {
         name: name,
         value: value,

package/dist/src/components/Table/Row.js

@@ -1,4 +1,5 @@
 import _styled from '@emotion/styled/base';
+import { keyframes } from '@emotion/react';
 import { useEffect } from 'react';
 import { Checkbox } from '../Checkbox/index.js';
 import { Tooltip } from '../Tooltip/index.js';
@@ -6,16 +7,41 @@ import { Cell } from './Cell.js';
 import { useTableContext } from './TableContext.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 StyledCheckboxContainer = /*#__PURE__*/_styled("div", {
+  target: "e1qvrbgq1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "zjik7",
+  styles: "display:flex"
+} : {
+  name: "zjik7",
+  styles: "display:flex",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+// We start at 5% and finish at 80% to leave the original background color
+// as we can't know if the table will be stripped or not
+const colorChange = theme => keyframes`
+  5% {
+    background-color: ${theme.colors.primary.background};
+  }
+  80% {
+    background-color: ${theme.colors.primary.background};
+  }
+`;
+const StyledTr = /*#__PURE__*/_styled('tr', {
+  shouldForwardProp: prop => !['highlightAnimation'].includes(prop),
   target: "e1qvrbgq0"
-})("display:flex;background:", ({
+})("animation:", ({
+  highlightAnimation,
   theme
-}) => theme.colors.neutral.background, ";");
+}) => highlightAnimation ? colorChange(theme) : undefined, " 3s linear;");
 const Row = ({
   children,
   className,
   id,
   selectDisabled,
+  highlightAnimation,
   'data-testid': dataTestid
 }) => {
   const {
@@ -33,9 +59,10 @@ const Row = ({
     }
     return undefined;
   }, [id, registerSelectableRow, selectDisabled]);
-  return jsxs("tr", {
+  return jsxs(StyledTr, {
     className: className,
     "data-testid": dataTestid,
+    highlightAnimation: highlightAnimation,
     children: [selectable ? jsx(Cell, {
       children: jsx(StyledCheckboxContainer, {
         "data-visibility": allRowSelectValue === false ? 'hover' : undefined,

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

@@ -101,7 +101,7 @@ const TagInput = ({
   label,
   labelDescription,
   required = false,
-  size = 'medium',
+  size = 'large',
   error,
   success,
   helper,

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

@@ -1,6 +1,6 @@
 import _styled from '@emotion/styled/base';
 import { useTheme, Global, ClassNames, css } from '@emotion/react';
-import { toast as toast$1, ToastContainer as ToastContainer$1 } from 'react-toastify';
+import { toast as toast$1, ToastContainer as ToastContainer$1, Slide } from 'react-toastify';
 import css_248z from '../../../react-toastify/dist/ReactToastify.min.css.js';
 import { Button } from '../Button/index.js';
 import { Stack } from '../Stack/index.js';
@@ -12,7 +12,7 @@ const PREFIX = '.Toastify';
 const AUTOCLOSE_DELAY = 6000; // Delay to close the toast in ms
 
 const styles = {
-  toast: theme => /*#__PURE__*/css("border-radius:", theme.radii.default, ";min-height:52px;padding:", theme.space['2'], ";text-size:", theme.typography.bodySmallStrong.fontSize, ";", PREFIX, "__toast-container{width:344px;}", PREFIX, "__toast-body{margin:0;}&", PREFIX, "__toast--success{background-color:", theme.colors.neutral.backgroundStronger, ";color:", theme.colors.neutral.textStronger, ";}&", PREFIX, "__toast--info{background-color:", theme.colors.info.backgroundStrong, ";color:", theme.colors.neutral.textStronger, ";}&", PREFIX, "__toast--error{background-color:", theme.colors.danger.backgroundStrong, ";color:", theme.colors.neutral.textStronger, ";}&", PREFIX, "__toast--warning{background-color:", theme.colors.warning.backgroundStrong, ";color:", theme.colors.warning.textStrong, ";}")
+  toast: theme => /*#__PURE__*/css("border-radius:", theme.radii.default, ";min-height:52px;", PREFIX, "__toast-container{width:344px;}", PREFIX, "__toast-body{margin:0;padding:0;}&", PREFIX, "__toast--success{background-color:", theme.colors.neutral.backgroundStronger, ";color:", theme.colors.neutral.textStronger, ";padding:", theme.space['2'], ";}&", PREFIX, "__toast--info{background-color:", theme.colors.info.backgroundStrong, ";color:", theme.colors.neutral.textStronger, ";padding:", theme.space['2'], ";}&", PREFIX, "__toast--error{background-color:", theme.colors.danger.backgroundStrong, ";color:", theme.colors.neutral.textStronger, ";padding:", theme.space['2'], ";}&", PREFIX, "__toast--warning{background-color:", theme.colors.warning.backgroundStrong, ";color:", theme.colors.warning.textStrong, ";padding:", theme.space['2'], ";}")
 };
 const StyledButton = /*#__PURE__*/_styled(Button, {
   target: "e1eb63990"
@@ -40,7 +40,7 @@ const Content = ({
   gap: 2,
   direction: "row",
   children: jsx(Text, {
-    variant: "body",
+    variant: "bodySmallStrong",
     as: "span",
     children: children
   })
@@ -116,7 +116,8 @@ const ToastContainer = ({
         position: position,
         stacked: true,
         hideProgressBar: true,
-        className: className
+        className: className,
+        transition: Slide
       })
     })]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.35.0",
+  "version": "1.37.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -66,8 +66,8 @@
     "react-toastify": "10.0.4",
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
-    "@ultraviolet/themes": "1.8.0",
-    "@ultraviolet/icons": "2.8.4"
+    "@ultraviolet/themes": "1.9.0",
+    "@ultraviolet/icons": "2.9.0"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",