@xsolla/xui-toast 0.158.0 → 0.160.0

package/web/index.mjs

@@ -1,5 +1,10 @@
 // src/Toast.tsx
-import { useEffect, useState } from "react";
+import {
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useState
+} from "react";
 
 // ../../foundation/primitives-web/src/Box.tsx
 import React2 from "react";
@@ -271,6 +276,8 @@ var Text = ({
   className,
   id,
   role,
+  testID,
+  "data-testid": dataTestId,
   numberOfLines: _numberOfLines,
   ...props
 }) => {
@@ -281,7 +288,8 @@ var Text = ({
       style,
       className,
       id,
-      role
+      role,
+      "data-testid": dataTestId || testID
     }
   );
 };
@@ -305,51 +313,116 @@ var StyledIcon = styled3(FilteredDiv2)`
     stroke: currentColor;
   }
 `;
-var Icon = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx3(StyledIcon, { ...props, children });
+var Icon = ({
+  children,
+  testID,
+  "data-testid": dataTestId,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx3(StyledIcon, { "data-testid": dataTestId || testID, ...props, children });
 };
 
 // src/Toast.tsx
 import { useResolvedTheme } from "@xsolla/xui-core";
-import { Check, AlertCircle, X } from "@xsolla/xui-icons";
+import {
+  CheckCr,
+  ExclamationMarkCr,
+  InfoCr,
+  Remove,
+  Warning as WarningIcon
+} from "@xsolla/xui-icons-base";
 import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-var getDefaultIcon = (variant, size, color) => {
-  switch (variant) {
-    case "success":
-      return /* @__PURE__ */ jsx4(Check, { size, color });
-    case "info":
-    case "warning":
-    case "error":
-    default:
-      return /* @__PURE__ */ jsx4(AlertCircle, { size, color });
-  }
+var TOAST_COLORS = {
+  alert: "#ff553d",
+  success: "#47d94a",
+  neutral: "#7899a1",
+  warning: "#ffb95c"
 };
-var getIconColor = (variant, colors) => {
-  switch (variant) {
+var DEFAULT_COLOR_SCHEME = {
+  background: "#34474b",
+  text: "#ffffff",
+  descriptionText: "rgba(255, 255, 255, 0.7)",
+  divider: "rgba(255, 255, 255, 0.16)",
+  actionText: "#ffffff"
+};
+var getDefaultIcon = (type, size, color) => {
+  switch (type) {
     case "success":
-      return colors.content.success.primary;
+      return /* @__PURE__ */ jsx4(
+        CheckCr,
+        {
+          variant: "solid",
+          size,
+          color,
+          "data-testid": "toast-icon-success"
+        }
+      );
+    case "neutral":
+      return /* @__PURE__ */ jsx4(
+        InfoCr,
+        {
+          variant: "solid",
+          size,
+          color,
+          "data-testid": "toast-icon-neutral"
+        }
+      );
     case "warning":
-      return colors.content.warning.primary;
-    case "error":
-      return colors.content.alert.primary;
-    case "info":
+      return /* @__PURE__ */ jsx4(
+        WarningIcon,
+        {
+          variant: "solid",
+          size,
+          color,
+          "data-testid": "toast-icon-warning"
+        }
+      );
+    case "alert":
     default:
-      return colors.content.inverse;
+      return /* @__PURE__ */ jsx4(
+        ExclamationMarkCr,
+        {
+          variant: "solid",
+          size,
+          color,
+          "data-testid": "toast-icon-alert"
+        }
+      );
   }
 };
 var ANIMATION_DURATION = 200;
+var PROGRESS_HEIGHT = 4;
+var TOAST_CONFIG = {
+  minHeight: 56,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  borderRadius: 4,
+  gap: 12,
+  iconSize: 24,
+  closeButtonSize: 24,
+  closeIconSize: 20,
+  fontSize: 16,
+  lineHeight: 20,
+  maxWidth: 440
+};
 var Toast = ({
   id,
-  variant = "info",
-  message,
-  icon,
+  type = "neutral",
+  title,
+  description,
+  icon = true,
+  action,
+  showCloseButton = true,
+  progress = false,
   duration,
   onClose,
+  colorScheme = DEFAULT_COLOR_SCHEME,
+  testID,
   themeMode,
   themeProductContext
 }) => {
-  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
-  const config = theme.sizing.toast();
+  useResolvedTheme({ themeMode, themeProductContext });
+  const config = TOAST_CONFIG;
   const [visible, setVisible] = useState(false);
   const [dismissing, setDismissing] = useState(false);
   useEffect(() => {
@@ -366,63 +439,147 @@ var Toast = ({
     const timer = setTimeout(handleClose, duration);
     return () => clearTimeout(timer);
   }, [duration]);
-  const iconColor = getIconColor(variant, theme.colors);
-  const displayIcon = icon !== void 0 ? /* @__PURE__ */ jsx4(Icon, { size: config.iconSize, color: iconColor, children: icon }) : getDefaultIcon(variant, config.iconSize, iconColor);
+  const iconColor = TOAST_COLORS[type];
+  const shouldShowIcon = icon !== false;
+  const displayIcon = icon === true || icon === void 0 ? getDefaultIcon(type, config.iconSize, iconColor) : icon;
+  const renderedAction = isValidElement(action) && typeof action.type !== "string" ? cloneElement(action, {
+    size: "xs",
+    variant: "inverse",
+    background: false,
+    themeMode: "dark",
+    themeProductContext,
+    children: /* @__PURE__ */ jsx4("span", { style: { color: colorScheme.actionText }, children: action.props.children })
+  }) : action;
+  const hasAction = Boolean(action);
+  const hasCloseButton = showCloseButton && Boolean(onClose);
+  const hasActions = hasAction || hasCloseButton;
+  const role = type === "neutral" || type === "success" ? "status" : "alert";
+  const ariaLive = type === "neutral" || type === "success" ? "polite" : "assertive";
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      backgroundColor: theme.colors.background.inverse,
+      testID,
+      backgroundColor: colorScheme.background,
       borderRadius: config.borderRadius,
-      paddingHorizontal: config.paddingHorizontal,
-      paddingVertical: config.paddingVertical,
       minHeight: config.minHeight,
       flexDirection: "row",
       alignItems: "center",
-      gap: config.gap,
-      width: "100%",
-      role: "alert",
-      "aria-live": "polite",
+      justifyContent: "center",
+      overflow: "hidden",
+      width: config.maxWidth,
+      maxWidth: "100%",
+      role,
+      "aria-live": ariaLive,
       "data-toast-id": id,
       style: {
         opacity: visible && !dismissing ? 1 : 0,
         transform: visible && !dismissing ? "translateY(0)" : "translateY(-8px)",
-        transition: `opacity ${ANIMATION_DURATION}ms ease-out, transform ${ANIMATION_DURATION}ms ease-out`
+        transition: `opacity ${ANIMATION_DURATION}ms ease-out, transform ${ANIMATION_DURATION}ms ease-out`,
+        boxShadow: colorScheme.shadow,
+        backdropFilter: colorScheme.backdropFilter
       },
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs(
           Box,
           {
-            width: config.iconSize,
-            height: config.iconSize,
+            flex: 1,
+            minHeight: config.minHeight,
+            minWidth: 0,
+            flexDirection: "row",
             alignItems: "center",
-            justifyContent: "center",
-            flexShrink: 0,
-            children: displayIcon
+            gap: config.gap,
+            paddingHorizontal: config.paddingHorizontal,
+            paddingVertical: config.paddingVertical,
+            children: [
+              shouldShowIcon && /* @__PURE__ */ jsx4(
+                Box,
+                {
+                  width: config.iconSize,
+                  height: config.iconSize,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0,
+                  children: icon === true || icon === void 0 ? displayIcon : /* @__PURE__ */ jsx4(Icon, { size: config.iconSize, color: iconColor, children: displayIcon })
+                }
+              ),
+              /* @__PURE__ */ jsxs(Box, { flex: 1, minWidth: 0, gap: 2, children: [
+                title && /* @__PURE__ */ jsx4(
+                  Text,
+                  {
+                    color: colorScheme.text,
+                    fontSize: config.fontSize,
+                    lineHeight: config.lineHeight,
+                    fontWeight: "500",
+                    numberOfLines: 1,
+                    children: title
+                  }
+                ),
+                description && /* @__PURE__ */ jsx4(
+                  Text,
+                  {
+                    color: colorScheme.descriptionText,
+                    fontSize: 14,
+                    lineHeight: 18,
+                    numberOfLines: 1,
+                    children: description
+                  }
+                )
+              ] }),
+              hasActions && /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  height: 32,
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: config.gap,
+                  flexShrink: 0,
+                  children: [
+                    renderedAction,
+                    hasAction && hasCloseButton && /* @__PURE__ */ jsx4(
+                      Box,
+                      {
+                        width: 1,
+                        height: "100%",
+                        backgroundColor: colorScheme.divider,
+                        testID: "toast-divider"
+                      }
+                    ),
+                    hasCloseButton && /* @__PURE__ */ jsx4(
+                      Box,
+                      {
+                        onPress: handleClose,
+                        width: config.closeButtonSize,
+                        height: config.closeButtonSize,
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexShrink: 0,
+                        role: "button",
+                        "aria-label": "Dismiss notification",
+                        children: /* @__PURE__ */ jsx4(
+                          Remove,
+                          {
+                            variant: "line",
+                            size: config.closeIconSize,
+                            color: colorScheme.text
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ jsx4(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ jsx4(
-          Text,
-          {
-            color: theme.colors.content.inverse,
-            fontSize: config.fontSize,
-            lineHeight: config.lineHeight,
-            fontWeight: "500",
-            numberOfLines: 2,
-            children: message
-          }
-        ) }),
-        onClose && /* @__PURE__ */ jsx4(
+        progress && /* @__PURE__ */ jsx4(
           Box,
           {
-            onPress: handleClose,
-            width: config.closeButtonSize,
-            height: config.closeButtonSize,
-            alignItems: "center",
-            justifyContent: "center",
-            flexShrink: 0,
-            role: "button",
-            "aria-label": "Dismiss toast",
-            children: /* @__PURE__ */ jsx4(X, { size: config.closeIconSize, color: theme.colors.content.inverse })
+            position: "absolute",
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: PROGRESS_HEIGHT,
+            backgroundColor: iconColor
           }
         )
       ]
@@ -436,6 +593,10 @@ import { memo } from "react";
 import ReactDOM from "react-dom";
 import { useResolvedTheme as useResolvedTheme2 } from "@xsolla/xui-core";
 import { jsx as jsx5 } from "react/jsx-runtime";
+var TOAST_GROUP_CONFIG = {
+  containerPadding: 12,
+  groupGap: 8
+};
 var ToastGroup = memo(
   ({
     toasts,
@@ -443,11 +604,12 @@ var ToastGroup = memo(
     align = "center",
     maxWidth,
     onDismiss,
+    testID,
     themeMode,
     themeProductContext
   }) => {
-    const { theme } = useResolvedTheme2({ themeMode, themeProductContext });
-    const config = theme.sizing.toast();
+    useResolvedTheme2({ themeMode, themeProductContext });
+    const config = TOAST_GROUP_CONFIG;
     if (toasts.length === 0 || typeof document === "undefined") {
       return null;
     }
@@ -461,6 +623,7 @@ var ToastGroup = memo(
       /* @__PURE__ */ jsx5(
         Box,
         {
+          testID,
           position: "fixed",
           left: 0,
           right: 0,
@@ -480,9 +643,13 @@ var ToastGroup = memo(
                 Toast,
                 {
                   id: toast.id,
-                  variant: toast.variant,
-                  message: toast.message,
+                  type: toast.type,
+                  title: toast.title,
+                  description: toast.description,
                   icon: toast.icon,
+                  action: toast.action,
+                  showCloseButton: toast.showCloseButton,
+                  progress: toast.progress,
                   duration: toast.duration,
                   onClose: () => onDismiss(toast.id)
                 },
@@ -516,7 +683,8 @@ var ToastProvider = ({
   position = "top",
   align = "center",
   defaultDuration = 5e3,
-  maxWidth
+  maxWidth,
+  testID
 }) => {
   const [toasts, setToasts] = useState2([]);
   const dismissToast = useCallback((id) => {
@@ -531,9 +699,13 @@ var ToastProvider = ({
       const duration = options.duration ?? defaultDuration;
       const newToast = {
         id,
-        variant: options.variant ?? "info",
-        message: options.message,
+        type: options.type ?? "neutral",
+        title: options.title,
+        description: options.description,
         icon: options.icon,
+        action: options.action,
+        showCloseButton: options.showCloseButton,
+        progress: options.progress,
         duration
       };
       setToasts((prev) => [...prev, newToast]);
@@ -559,7 +731,8 @@ var ToastProvider = ({
         position,
         align,
         maxWidth,
-        onDismiss: dismissToast
+        onDismiss: dismissToast,
+        testID
       }
     )
   ] });
@@ -579,27 +752,27 @@ var useToast = () => {
     },
     [addToast]
   );
-  const success = useCallback2(
-    (message, options) => {
-      return addToast({ ...options, message, variant: "success" });
+  const alert = useCallback2(
+    (options) => {
+      return addToast({ ...options, type: "alert" });
     },
     [addToast]
   );
-  const info = useCallback2(
-    (message, options) => {
-      return addToast({ ...options, message, variant: "info" });
+  const success = useCallback2(
+    (options) => {
+      return addToast({ ...options, type: "success" });
     },
     [addToast]
   );
-  const warning = useCallback2(
-    (message, options) => {
-      return addToast({ ...options, message, variant: "warning" });
+  const neutral = useCallback2(
+    (options) => {
+      return addToast({ ...options, type: "neutral" });
     },
     [addToast]
   );
-  const error = useCallback2(
-    (message, options) => {
-      return addToast({ ...options, message, variant: "error" });
+  const warning = useCallback2(
+    (options) => {
+      return addToast({ ...options, type: "warning" });
     },
     [addToast]
   );
@@ -614,10 +787,10 @@ var useToast = () => {
   }, [dismissAllToasts]);
   return {
     toast,
+    alert,
     success,
-    info,
+    neutral,
     warning,
-    error,
     dismiss,
     dismissAll
   };