@xsolla/xui-toast 0.158.0 → 0.159.0

package/native/index.d.ts

@@ -1,29 +1,54 @@
 import * as React from 'react';
-import React__default, { ReactNode } from 'react';
+import React__default, { ReactNode, ReactElement } from 'react';
 import { ThemeOverrideProps } from '@xsolla/xui-core';
 
-type ToastVariant = "success" | "info" | "warning" | "error";
+type ToastType = "alert" | "success" | "neutral" | "warning";
 type ToastPosition = "top" | "bottom";
 type ToastAlign = "left" | "center" | "right";
 interface ToastData {
     id: string;
-    variant: ToastVariant;
-    message: string;
-    icon?: ReactNode;
+    type: ToastType;
+    title?: string;
+    description?: string;
+    icon?: boolean | ReactNode;
+    action?: ReactElement;
+    showCloseButton?: boolean;
+    progress?: boolean;
     duration?: number;
 }
+interface ToastColorScheme {
+    background: string;
+    text: string;
+    descriptionText: string;
+    divider: string;
+    actionText: string;
+    shadow?: string;
+    backdropFilter?: string;
+}
 interface ToastProps extends ThemeOverrideProps {
     id: string;
-    variant?: ToastVariant;
-    message: string;
-    icon?: ReactNode;
+    type?: ToastType;
+    title?: string;
+    description?: string;
+    icon?: boolean | ReactNode;
+    action?: ReactElement;
+    showCloseButton?: boolean;
+    progress?: boolean;
     duration?: number;
     onClose?: () => void;
+    /** Internal color override for product-specific toast surfaces */
+    colorScheme?: ToastColorScheme;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 interface ToastOptions {
-    variant?: ToastVariant;
-    message: string;
-    icon?: ReactNode;
+    type?: ToastType;
+    title?: string;
+    description?: string;
+    icon?: boolean | ReactNode;
+    action?: ReactElement;
+    showCloseButton?: boolean;
+    progress?: boolean;
     duration?: number;
 }
 interface ToastGroupProps extends ThemeOverrideProps {
@@ -32,6 +57,8 @@ interface ToastGroupProps extends ThemeOverrideProps {
     align?: ToastAlign;
     maxWidth?: number;
     onDismiss: (id: string) => void;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 interface ToastContextType {
     toasts: ToastData[];
@@ -45,11 +72,13 @@ interface ToastProviderProps {
     align?: ToastAlign;
     defaultDuration?: number;
     maxWidth?: number;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 
 declare const Toast: React__default.FC<ToastProps>;
 
-declare const ToastGroup: React__default.MemoExoticComponent<({ toasts, position, align, maxWidth, onDismiss, themeMode, themeProductContext, }: ToastGroupProps) => React__default.ReactPortal | null>;
+declare const ToastGroup: React__default.MemoExoticComponent<({ toasts, position, align, maxWidth, onDismiss, testID, themeMode, themeProductContext, }: ToastGroupProps) => React__default.ReactPortal | null>;
 
 declare const ToastProvider: React__default.FC<ToastProviderProps>;
 
@@ -58,14 +87,14 @@ declare const ToastContext: React.Context<ToastContextType | null>;
 interface UseToastReturn {
     /** Show a toast with custom options */
     toast: (options: ToastOptions) => string;
+    /** Show an alert toast */
+    alert: (options: Omit<ToastOptions, "type">) => string;
     /** Show a success toast */
-    success: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
-    /** Show an info toast */
-    info: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
+    success: (options: Omit<ToastOptions, "type">) => string;
+    /** Show a neutral toast */
+    neutral: (options: Omit<ToastOptions, "type">) => string;
     /** Show a warning toast */
-    warning: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
-    /** Show an error toast */
-    error: (message: string, options?: Omit<ToastOptions, "message" | "variant">) => string;
+    warning: (options: Omit<ToastOptions, "type">) => string;
     /** Dismiss a specific toast by ID */
     dismiss: (id: string) => void;
     /** Dismiss all toasts */
@@ -73,4 +102,4 @@ interface UseToastReturn {
 }
 declare const useToast: () => UseToastReturn;
 
-export { Toast, type ToastAlign, ToastContext, type ToastContextType, type ToastData, ToastGroup, type ToastGroupProps, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, type UseToastReturn, useToast };
+export { Toast, type ToastAlign, type ToastColorScheme, ToastContext, type ToastContextType, type ToastData, ToastGroup, type ToastGroupProps, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastType, type UseToastReturn, useToast };

package/native/index.js

@@ -242,6 +242,8 @@ var Text = ({
   numberOfLines,
   id,
   role,
+  testID,
+  "data-testid": dataTestId,
   style: styleProp,
   ...props
 }) => {
@@ -271,7 +273,7 @@ var Text = ({
     {
       style: baseStyle,
       numberOfLines,
-      testID: id,
+      testID: dataTestId || testID || id,
       accessibilityRole,
       children
     }
@@ -282,7 +284,13 @@ var Text = ({
 var import_react = __toESM(require("react"));
 var import_react_native3 = require("react-native");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Icon = ({ children, color, size }) => {
+var Icon = ({
+  children,
+  color,
+  size,
+  testID,
+  "data-testid": dataTestId
+}) => {
   const style = {
     width: typeof size === "number" ? size : void 0,
     height: typeof size === "number" ? size : void 0,
@@ -299,50 +307,104 @@ var Icon = ({ children, color, size }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style, children: childrenWithProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style, testID: dataTestId || testID, children: childrenWithProps });
 };
 
 // src/Toast.tsx
 var import_xui_core = require("@xsolla/xui-core");
-var import_xui_icons = require("@xsolla/xui-icons");
+var import_xui_icons_base = require("@xsolla/xui-icons-base");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var getDefaultIcon = (variant, size, color) => {
-  switch (variant) {
-    case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons.Check, { size, color });
-    case "info":
-    case "warning":
-    case "error":
-    default:
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons.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__ */ (0, import_jsx_runtime4.jsx)(
+        import_xui_icons_base.CheckCr,
+        {
+          variant: "solid",
+          size,
+          color,
+          "data-testid": "toast-icon-success"
+        }
+      );
+    case "neutral":
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_xui_icons_base.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__ */ (0, import_jsx_runtime4.jsx)(
+        import_xui_icons_base.Warning,
+        {
+          variant: "solid",
+          size,
+          color,
+          "data-testid": "toast-icon-warning"
+        }
+      );
+    case "alert":
     default:
-      return colors.content.inverse;
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_xui_icons_base.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 } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
-  const config = theme.sizing.toast();
+  (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+  const config = TOAST_CONFIG;
   const [visible, setVisible] = (0, import_react2.useState)(false);
   const [dismissing, setDismissing] = (0, import_react2.useState)(false);
   (0, import_react2.useEffect)(() => {
@@ -359,63 +421,147 @@ var Toast = ({
     const timer = setTimeout(handleClose, duration);
     return () => clearTimeout(timer);
   }, [duration]);
-  const iconColor = getIconColor(variant, theme.colors);
-  const displayIcon = icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(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 = (0, import_react2.isValidElement)(action) && typeof action.type !== "string" ? (0, import_react2.cloneElement)(action, {
+    size: "xs",
+    variant: "inverse",
+    background: false,
+    themeMode: "dark",
+    themeProductContext,
+    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(
+                Box,
+                {
+                  width: config.iconSize,
+                  height: config.iconSize,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0,
+                  children: icon === true || icon === void 0 ? displayIcon : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: config.iconSize, color: iconColor, children: displayIcon })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Box, { flex: 1, minWidth: 0, gap: 2, children: [
+                title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  Text,
+                  {
+                    color: colorScheme.text,
+                    fontSize: config.fontSize,
+                    lineHeight: config.lineHeight,
+                    fontWeight: "500",
+                    numberOfLines: 1,
+                    children: title
+                  }
+                ),
+                description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  Text,
+                  {
+                    color: colorScheme.descriptionText,
+                    fontSize: 14,
+                    lineHeight: 18,
+                    numberOfLines: 1,
+                    children: description
+                  }
+                )
+              ] }),
+              hasActions && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                Box,
+                {
+                  height: 32,
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: config.gap,
+                  flexShrink: 0,
+                  children: [
+                    renderedAction,
+                    hasAction && hasCloseButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      Box,
+                      {
+                        width: 1,
+                        height: "100%",
+                        backgroundColor: colorScheme.divider,
+                        testID: "toast-divider"
+                      }
+                    ),
+                    hasCloseButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      Box,
+                      {
+                        onPress: handleClose,
+                        width: config.closeButtonSize,
+                        height: config.closeButtonSize,
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexShrink: 0,
+                        role: "button",
+                        "aria-label": "Dismiss notification",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          import_xui_icons_base.Remove,
+                          {
+                            variant: "line",
+                            size: config.closeIconSize,
+                            color: colorScheme.text
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          Text,
-          {
-            color: theme.colors.content.inverse,
-            fontSize: config.fontSize,
-            lineHeight: config.lineHeight,
-            fontWeight: "500",
-            numberOfLines: 2,
-            children: message
-          }
-        ) }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        progress && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Box,
           {
-            onPress: handleClose,
-            width: config.closeButtonSize,
-            height: config.closeButtonSize,
-            alignItems: "center",
-            justifyContent: "center",
-            flexShrink: 0,
-            role: "button",
-            "aria-label": "Dismiss toast",
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons.X, { size: config.closeIconSize, color: theme.colors.content.inverse })
+            position: "absolute",
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: PROGRESS_HEIGHT,
+            backgroundColor: iconColor
           }
         )
       ]
@@ -428,17 +574,22 @@ Toast.displayName = "Toast";
 var import_react3 = require("react");
 var import_xui_core2 = require("@xsolla/xui-core");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var TOAST_GROUP_CONFIG = {
+  containerPadding: 12,
+  groupGap: 8
+};
 var ToastGroup = (0, import_react3.memo)(
   ({
     toasts,
     position = "top",
     maxWidth,
     onDismiss,
+    testID,
     themeMode,
     themeProductContext
   }) => {
-    const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
-    const config = theme.sizing.toast();
+    (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
+    const config = TOAST_GROUP_CONFIG;
     if (toasts.length === 0) {
       return null;
     }
@@ -446,6 +597,7 @@ var ToastGroup = (0, import_react3.memo)(
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Box,
       {
+        testID,
         position: "absolute",
         left: 0,
         right: 0,
@@ -465,9 +617,13 @@ var ToastGroup = (0, import_react3.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)
               },
@@ -499,7 +655,8 @@ var ToastProvider = ({
   position = "top",
   align = "center",
   defaultDuration = 5e3,
-  maxWidth
+  maxWidth,
+  testID
 }) => {
   const [toasts, setToasts] = (0, import_react5.useState)([]);
   const dismissToast = (0, import_react5.useCallback)((id) => {
@@ -514,9 +671,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]);
@@ -542,7 +703,8 @@ var ToastProvider = ({
         position,
         align,
         maxWidth,
-        onDismiss: dismissToast
+        onDismiss: dismissToast,
+        testID
       }
     )
   ] });
@@ -562,27 +724,27 @@ var useToast = () => {
     },
     [addToast]
   );
-  const success = (0, import_react6.useCallback)(
-    (message, options) => {
-      return addToast({ ...options, message, variant: "success" });
+  const alert = (0, import_react6.useCallback)(
+    (options) => {
+      return addToast({ ...options, type: "alert" });
     },
     [addToast]
   );
-  const info = (0, import_react6.useCallback)(
-    (message, options) => {
-      return addToast({ ...options, message, variant: "info" });
+  const success = (0, import_react6.useCallback)(
+    (options) => {
+      return addToast({ ...options, type: "success" });
     },
     [addToast]
   );
-  const warning = (0, import_react6.useCallback)(
-    (message, options) => {
-      return addToast({ ...options, message, variant: "warning" });
+  const neutral = (0, import_react6.useCallback)(
+    (options) => {
+      return addToast({ ...options, type: "neutral" });
     },
     [addToast]
   );
-  const error = (0, import_react6.useCallback)(
-    (message, options) => {
-      return addToast({ ...options, message, variant: "error" });
+  const warning = (0, import_react6.useCallback)(
+    (options) => {
+      return addToast({ ...options, type: "warning" });
     },
     [addToast]
   );
@@ -597,10 +759,10 @@ var useToast = () => {
   }, [dismissAllToasts]);
   return {
     toast,
+    alert,
     success,
-    info,
+    neutral,
     warning,
-    error,
     dismiss,
     dismissAll
   };