@ultraviolet/ui 1.34.0 → 1.35.0

package/dist/index.d.ts

@@ -3103,6 +3103,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 +3117,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/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.35.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {