@xsolla/xui-toast 0.158.0 → 0.160.0

package/web/index.js

@@ -311,6 +311,8 @@ var Text = ({
   className,
   id,
   role,
+  testID,
+  "data-testid": dataTestId,
   numberOfLines: _numberOfLines,
   ...props
 }) => {
@@ -321,7 +323,8 @@ var Text = ({
       style,
       className,
       id,
-      role
+      role,
+      "data-testid": dataTestId || testID
     }
   );
 };
@@ -345,51 +348,110 @@ var StyledIcon = (0, import_styled_components3.default)(FilteredDiv2)`
     stroke: currentColor;
   }
 `;
-var Icon = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledIcon, { ...props, children });
+var Icon = ({
+  children,
+  testID,
+  "data-testid": dataTestId,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledIcon, { "data-testid": dataTestId || testID, ...props, children });
 };
 
 // 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_react3.useState)(false);
   const [dismissing, setDismissing] = (0, import_react3.useState)(false);
   (0, import_react3.useEffect)(() => {
@@ -406,63 +468,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_react3.isValidElement)(action) && typeof action.type !== "string" ? (0, import_react3.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
           }
         )
       ]
@@ -476,6 +622,10 @@ var import_react4 = require("react");
 var import_react_dom = __toESM(require("react-dom"));
 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_react4.memo)(
   ({
     toasts,
@@ -483,11 +633,12 @@ var ToastGroup = (0, import_react4.memo)(
     align = "center",
     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 || typeof document === "undefined") {
       return null;
     }
@@ -501,6 +652,7 @@ var ToastGroup = (0, import_react4.memo)(
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         Box,
         {
+          testID,
           position: "fixed",
           left: 0,
           right: 0,
@@ -520,9 +672,13 @@ var ToastGroup = (0, import_react4.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)
                 },
@@ -556,7 +712,8 @@ var ToastProvider = ({
   position = "top",
   align = "center",
   defaultDuration = 5e3,
-  maxWidth
+  maxWidth,
+  testID
 }) => {
   const [toasts, setToasts] = (0, import_react6.useState)([]);
   const dismissToast = (0, import_react6.useCallback)((id) => {
@@ -571,9 +728,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]);
@@ -599,7 +760,8 @@ var ToastProvider = ({
         position,
         align,
         maxWidth,
-        onDismiss: dismissToast
+        onDismiss: dismissToast,
+        testID
       }
     )
   ] });
@@ -619,27 +781,27 @@ var useToast = () => {
     },
     [addToast]
   );
-  const success = (0, import_react7.useCallback)(
-    (message, options) => {
-      return addToast({ ...options, message, variant: "success" });
+  const alert = (0, import_react7.useCallback)(
+    (options) => {
+      return addToast({ ...options, type: "alert" });
     },
     [addToast]
   );
-  const info = (0, import_react7.useCallback)(
-    (message, options) => {
-      return addToast({ ...options, message, variant: "info" });
+  const success = (0, import_react7.useCallback)(
+    (options) => {
+      return addToast({ ...options, type: "success" });
     },
     [addToast]
   );
-  const warning = (0, import_react7.useCallback)(
-    (message, options) => {
-      return addToast({ ...options, message, variant: "warning" });
+  const neutral = (0, import_react7.useCallback)(
+    (options) => {
+      return addToast({ ...options, type: "neutral" });
     },
     [addToast]
   );
-  const error = (0, import_react7.useCallback)(
-    (message, options) => {
-      return addToast({ ...options, message, variant: "error" });
+  const warning = (0, import_react7.useCallback)(
+    (options) => {
+      return addToast({ ...options, type: "warning" });
     },
     [addToast]
   );
@@ -654,10 +816,10 @@ var useToast = () => {
   }, [dismissAllToasts]);
   return {
     toast,
+    alert,
     success,
-    info,
+    neutral,
     warning,
-    error,
     dismiss,
     dismissAll
   };