@ultraviolet/ui 1.34.0 → 1.36.0

package/dist/index.d.ts

@@ -2690,12 +2690,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;
@@ -3103,6 +3104,11 @@ type ToastContainerProps = {
      */
     position?: ToastOptions['position'];
     'data-testid'?: string;
+    className?: string;
+    /**
+     * Delay before the toast is automatically closed, if not set the default value is 6000ms
+     */
+    autoClose?: number;
 };
 /**
  * Display short information about an event that happen in the interface in a floating alert.
@@ -3112,7 +3118,7 @@ type ToastContainerProps = {
  * Toaster is separated in two parts, first the `ToastContainer` which is where the div of the toast will be rendered,
  * and second the `toast()` function which is used to display the toast.
  */
-declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, }: ToastContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, className, autoClose, }: ToastContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /**
  * Toggle component is used to toggle between two states (on/off, true/false, etc.).

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/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/Toaster/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;width:344px;padding:", theme.space['2'], ";text-size:", theme.typography.bodySmallStrong.fontSize, ";", 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;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, ";}")
 };
 const StyledButton = /*#__PURE__*/_styled(Button, {
   target: "e1eb63990"
@@ -95,7 +95,9 @@ const ToastContainer = ({
   newestOnTop,
   limit,
   position = 'top-right',
-  'data-testid': dataTestId
+  'data-testid': dataTestId,
+  className,
+  autoClose
 }) => {
   const theme = useTheme();
   return jsxs(Fragment, {
@@ -107,14 +109,14 @@ const ToastContainer = ({
       }) => jsx(ToastContainer$1, {
         "data-testid": dataTestId,
         toastClassName: localCss(styles.toast(theme)),
-        autoClose: AUTOCLOSE_DELAY,
+        autoClose: autoClose ?? AUTOCLOSE_DELAY,
         icon: false,
         newestOnTop: newestOnTop,
         limit: limit,
         position: position,
-        css: /*#__PURE__*/css("top:100px;right:calc(0% + ", theme.space['2'], ");"),
         stacked: true,
-        hideProgressBar: true
+        hideProgressBar: true,
+        className: className
       })
     })]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.34.0",
+  "version": "1.36.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {