@ultraviolet/ui 1.33.0 → 1.35.0

package/dist/index.d.ts

@@ -3081,8 +3081,12 @@ declare const TimeInput: TimeInputType;
 
 declare const toast: {
     error: (children: ReactNode, options?: ToastOptions) => number | string;
+    /**
+     * @deprecated "Deprecated, please use another variant instead"
+     */
     info: (children: ReactNode, options?: ToastOptions) => number | string;
     success: (children: ReactNode, options?: ToastOptions) => number | string;
+    warning: (children: ReactNode, options?: ToastOptions) => number | string;
 };
 type ToastContainerProps = {
     /**
@@ -3099,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.
@@ -3108,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

@@ -1,73 +1,87 @@
 import _styled from '@emotion/styled/base';
 import { useTheme, Global, ClassNames, css } from '@emotion/react';
-import { Icon } from '@ultraviolet/icons';
 import { toast as toast$1, ToastContainer as ToastContainer$1 } 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';
 import { Text } from '../Text/index.js';
 import { jsx, jsxs, Fragment } 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 PREFIX = '.Toastify';
 const AUTOCLOSE_DELAY = 6000; // Delay to close the toast in ms
 
-const TOAST_ICONS = {
-  warning: 'alert',
-  info: 'information-outline',
-  success: 'checkbox-circle-outline',
-  danger: 'alert'
-};
 const styles = {
-  toast: theme => /*#__PURE__*/css("border-radius:", theme.radii.default, ";box-shadow:", theme.shadows.dropdown, ";min-height:44px;margin-bottom:", theme.space['2'], ";", PREFIX, "__toast-body{margin:0;padding:0;}&", PREFIX, "__toast--success{background-color:", theme.colors.success.background, ";color:", theme.colors.success.text, ";", PREFIX, "__progress-bar--success{background-color:", theme.colors.success.backgroundStrong, ";height:4px;}}&", PREFIX, "__toast--info{background-color:", theme.colors.info.background, ";color:", theme.colors.info.text, ";", PREFIX, "__progress-bar--info{background-color:", theme.colors.info.backgroundStrong, ";height:4px;}}&", PREFIX, "__toast--error{background-color:", theme.colors.danger.background, ";color:", theme.colors.danger.text, ";", PREFIX, "__progress-bar--danger{background-color:", theme.colors.danger.backgroundStrong, ";height:4px;}}")
+  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 CloseButtonWrapper = /*#__PURE__*/_styled("button", {
-  target: "e1eb63991"
-})("background:none;border:none;cursor:pointer;color:inherit;padding:0;margin:0;margin-bottom:", ({
-  theme
-}) => theme.space['2'], ";");
-const IconWithLeftMargin = /*#__PURE__*/_styled(Icon, {
+const StyledButton = /*#__PURE__*/_styled(Button, {
   target: "e1eb63990"
-})("margin-left:", ({
-  theme
-}) => theme.space['1'], ";");
+})(process.env.NODE_ENV === "production" ? {
+  name: "1nobnvq",
+  styles: "background:none;margin:auto;&:hover,&:active{background:none;}"
+} : {
+  name: "1nobnvq",
+  styles: "background:none;margin:auto;&:hover,&:active{background:none;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 const CloseButton = ({
-  closeToast
-}) => jsx(CloseButtonWrapper, {
-  type: "button",
+  closeToast,
+  sentiment = 'success'
+}) => jsx(StyledButton, {
+  "aria-label": "close",
+  icon: "close",
   onClick: closeToast,
-  children: jsx(IconWithLeftMargin, {
-    name: "close",
-    size: 18
-  })
+  sentiment: sentiment,
+  size: "xsmall"
 });
 const Content = ({
-  sentiment,
   children
-}) => jsxs(Stack, {
+}) => jsx(Stack, {
   gap: 2,
   direction: "row",
-  children: [jsx(Icon, {
-    name: TOAST_ICONS[sentiment],
-    size: 24
-  }), jsx(Text, {
+  children: jsx(Text, {
     variant: "body",
     as: "span",
-    sentiment: sentiment,
     children: children
-  })]
+  })
 });
 const toast = {
   error: (children, options) => toast$1.error(jsx(Content, {
-    sentiment: "danger",
     children: children
-  }), options),
+  }), {
+    ...options,
+    closeButton: jsx(CloseButton, {
+      sentiment: "danger"
+    })
+  }),
+  /**
+   * @deprecated "Deprecated, please use another variant instead"
+   */
+  // eslint-disable-next-line deprecation/deprecation
   info: (children, options) => toast$1.info(jsx(Content, {
-    sentiment: "info",
     children: children
-  }), options),
+  }), {
+    ...options,
+    closeButton: jsx(CloseButton, {
+      sentiment: "info"
+    })
+  }),
   success: (children, options) => toast$1.success(jsx(Content, {
-    sentiment: "success",
     children: children
-  }), options)
+  }), {
+    ...options,
+    closeButton: jsx(CloseButton, {
+      sentiment: "success"
+    })
+  }),
+  warning: (children, options) => toast$1.warn(jsx(Content, {
+    children: children
+  }), {
+    ...options,
+    closeButton: jsx(CloseButton, {
+      sentiment: "warning"
+    })
+  })
 };
 /**
  * Display short information about an event that happen in the interface in a floating alert.
@@ -81,7 +95,9 @@ const ToastContainer = ({
   newestOnTop,
   limit,
   position = 'top-right',
-  'data-testid': dataTestId
+  'data-testid': dataTestId,
+  className,
+  autoClose
 }) => {
   const theme = useTheme();
   return jsxs(Fragment, {
@@ -92,14 +108,15 @@ const ToastContainer = ({
         css: localCss
       }) => jsx(ToastContainer$1, {
         "data-testid": dataTestId,
-        closeButton: jsx(CloseButton, {}),
         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,
+        className: className
       })
     })]
   });

package/package.json

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