@xsolla/xui-toast 0.158.0 → 0.160.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +124 -166
- package/native/index.d.mts +48 -19
- package/native/index.d.ts +48 -19
- package/native/index.js +248 -86
- package/native/index.js.map +1 -1
- package/native/index.mjs +260 -87
- package/native/index.mjs.map +1 -1
- package/package.json +5 -4
- package/web/index.d.mts +48 -19
- package/web/index.d.ts +48 -19
- package/web/index.js +248 -86
- package/web/index.js.map +1 -1
- package/web/index.mjs +260 -87
- package/web/index.mjs.map +1 -1
package/native/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../src/Toast.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../../../foundation/primitives-native/src/Icon.tsx","../../src/ToastGroup.native.tsx","../../src/ToastProvider.tsx","../../src/ToastContext.tsx","../../src/useToast.ts"],"sourcesContent":["export { Toast } from \"./Toast\";\nexport { ToastGroup } from \"./ToastGroup\";\nexport { ToastProvider } from \"./ToastProvider\";\nexport { ToastContext } from \"./ToastContext\";\nexport { useToast } from \"./useToast\";\nexport type { UseToastReturn } from \"./useToast\";\nexport * from \"./types\";\n","import React, { useEffect, useState } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport { Check, AlertCircle, X } from \"@xsolla/xui-icons\";\nimport type { ToastProps, ToastVariant } from \"./types\";\n\nconst getDefaultIcon = (\n variant: ToastVariant,\n size: number,\n color: string\n): React.ReactNode => {\n switch (variant) {\n case \"success\":\n return <Check size={size} color={color} />;\n case \"info\":\n case \"warning\":\n case \"error\":\n default:\n return <AlertCircle size={size} color={color} />;\n }\n};\n\nconst getIconColor = (\n variant: ToastVariant,\n colors: ReturnType<typeof useResolvedTheme>[\"theme\"][\"colors\"]\n): string => {\n switch (variant) {\n case \"success\":\n return colors.content.success.primary;\n case \"warning\":\n return colors.content.warning.primary;\n case \"error\":\n return colors.content.alert.primary;\n case \"info\":\n default:\n return colors.content.inverse;\n }\n};\n\nconst ANIMATION_DURATION = 200;\n\nexport const Toast: React.FC<ToastProps> = ({\n id,\n variant = \"info\",\n message,\n icon,\n duration,\n onClose,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const config = theme.sizing.toast();\n const [visible, setVisible] = useState(false);\n const [dismissing, setDismissing] = useState(false);\n\n useEffect(() => {\n const frame = requestAnimationFrame(() => setVisible(true));\n return () => cancelAnimationFrame(frame);\n }, []);\n\n const handleClose = () => {\n if (dismissing) return;\n setDismissing(true);\n setTimeout(() => onClose?.(), ANIMATION_DURATION);\n };\n\n useEffect(() => {\n if (!duration || duration <= 0) return;\n const timer = setTimeout(handleClose, duration);\n return () => clearTimeout(timer);\n }, [duration]);\n\n const iconColor = getIconColor(variant, theme.colors);\n const displayIcon =\n icon !== undefined ? (\n <Icon size={config.iconSize} color={iconColor}>\n {icon}\n </Icon>\n ) : (\n getDefaultIcon(variant, config.iconSize, iconColor)\n );\n\n return (\n <Box\n backgroundColor={theme.colors.background.inverse}\n borderRadius={config.borderRadius}\n paddingHorizontal={config.paddingHorizontal}\n paddingVertical={config.paddingVertical}\n minHeight={config.minHeight}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={config.gap}\n width=\"100%\"\n role=\"alert\"\n aria-live=\"polite\"\n data-toast-id={id}\n style={{\n opacity: visible && !dismissing ? 1 : 0,\n transform:\n visible && !dismissing ? \"translateY(0)\" : \"translateY(-8px)\",\n transition: `opacity ${ANIMATION_DURATION}ms ease-out, transform ${ANIMATION_DURATION}ms ease-out`,\n }}\n >\n <Box\n width={config.iconSize}\n height={config.iconSize}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n >\n {displayIcon}\n </Box>\n\n <Box flex={1} minWidth={0}>\n <Text\n color={theme.colors.content.inverse}\n fontSize={config.fontSize}\n lineHeight={config.lineHeight}\n fontWeight=\"500\"\n numberOfLines={2}\n >\n {message}\n </Text>\n </Box>\n\n {onClose && (\n <Box\n onPress={handleClose}\n width={config.closeButtonSize}\n height={config.closeButtonSize}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n role=\"button\"\n aria-label=\"Dismiss toast\"\n >\n <X size={config.closeIconSize} color={theme.colors.content.inverse} />\n </Box>\n )}\n </Box>\n );\n};\n\nToast.displayName = \"Toast\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return <View style={style}>{childrenWithProps}</View>;\n};\n","import React, { memo } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport { Toast } from \"./Toast\";\nimport type { ToastGroupProps } from \"./types\";\n\nexport const ToastGroup = memo(\n ({\n toasts,\n position = \"top\",\n maxWidth,\n onDismiss,\n themeMode,\n themeProductContext,\n }: ToastGroupProps) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const config = theme.sizing.toast();\n\n if (toasts.length === 0) {\n return null;\n }\n\n const positionStyles =\n position === \"top\"\n ? { top: config.containerPadding, bottom: undefined }\n : { top: undefined, bottom: config.containerPadding };\n\n return (\n <Box\n position=\"absolute\"\n left={0}\n right={0}\n zIndex={9999}\n alignItems=\"center\"\n paddingHorizontal={config.containerPadding}\n pointerEvents=\"box-none\"\n {...positionStyles}\n >\n <Box\n width=\"100%\"\n maxWidth={maxWidth}\n gap={config.groupGap}\n flexDirection=\"column\"\n >\n {toasts.map((toast) => (\n <Toast\n key={toast.id}\n id={toast.id}\n variant={toast.variant}\n message={toast.message}\n icon={toast.icon}\n duration={toast.duration}\n onClose={() => onDismiss(toast.id)}\n />\n ))}\n </Box>\n </Box>\n );\n }\n);\n\nToastGroup.displayName = \"ToastGroup\";\n","import React, { useCallback, useMemo, useState } from \"react\";\nimport { ToastContext } from \"./ToastContext\";\nimport { ToastGroup } from \"./ToastGroup\";\nimport type { ToastProviderProps, ToastData, ToastOptions } from \"./types\";\n\nlet toastIdCounter = 0;\n\nconst generateToastId = (): string => {\n return `toast-${++toastIdCounter}-${Date.now()}`;\n};\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ({\n children,\n position = \"top\",\n align = \"center\",\n defaultDuration = 5000,\n maxWidth,\n}) => {\n const [toasts, setToasts] = useState<ToastData[]>([]);\n\n const dismissToast = useCallback((id: string) => {\n setToasts((prev) => prev.filter((toast) => toast.id !== id));\n }, []);\n\n const dismissAllToasts = useCallback(() => {\n setToasts([]);\n }, []);\n\n const addToast = useCallback(\n (options: ToastOptions): string => {\n const id = generateToastId();\n const duration = options.duration ?? defaultDuration;\n\n const newToast: ToastData = {\n id,\n variant: options.variant ?? \"info\",\n message: options.message,\n icon: options.icon,\n duration,\n };\n\n setToasts((prev) => [...prev, newToast]);\n\n return id;\n },\n [defaultDuration]\n );\n\n const contextValue = useMemo(\n () => ({\n toasts,\n addToast,\n dismissToast,\n dismissAllToasts,\n }),\n [toasts, addToast, dismissToast, dismissAllToasts]\n );\n\n return (\n <ToastContext.Provider value={contextValue}>\n {children}\n <ToastGroup\n toasts={toasts}\n position={position}\n align={align}\n maxWidth={maxWidth}\n onDismiss={dismissToast}\n />\n </ToastContext.Provider>\n );\n};\n","import { createContext } from \"react\";\nimport type { ToastContextType } from \"./types\";\n\nexport const ToastContext = createContext<ToastContextType | null>(null);\n","import { useContext, useCallback } from \"react\";\nimport { ToastContext } from \"./ToastContext\";\nimport type { ToastOptions } from \"./types\";\n\nexport interface UseToastReturn {\n /** Show a toast with custom options */\n toast: (options: ToastOptions) => string;\n /** Show a success toast */\n success: (\n message: string,\n options?: Omit<ToastOptions, \"message\" | \"variant\">\n ) => string;\n /** Show an info toast */\n info: (\n message: string,\n options?: Omit<ToastOptions, \"message\" | \"variant\">\n ) => string;\n /** Show a warning toast */\n warning: (\n message: string,\n options?: Omit<ToastOptions, \"message\" | \"variant\">\n ) => string;\n /** Show an error toast */\n error: (\n message: string,\n options?: Omit<ToastOptions, \"message\" | \"variant\">\n ) => string;\n /** Dismiss a specific toast by ID */\n dismiss: (id: string) => void;\n /** Dismiss all toasts */\n dismissAll: () => void;\n}\n\nexport const useToast = (): UseToastReturn => {\n const context = useContext(ToastContext);\n\n if (!context) {\n throw new Error(\"useToast must be used within a ToastProvider\");\n }\n\n const { addToast, dismissToast, dismissAllToasts } = context;\n\n const toast = useCallback(\n (options: ToastOptions): string => {\n return addToast(options);\n },\n [addToast]\n );\n\n const success = useCallback(\n (\n message: string,\n options?: Omit<ToastOptions, \"message\" | \"variant\">\n ): string => {\n return addToast({ ...options, message, variant: \"success\" });\n },\n [addToast]\n );\n\n const info = useCallback(\n (\n message: string,\n options?: Omit<ToastOptions, \"message\" | \"variant\">\n ): string => {\n return addToast({ ...options, message, variant: \"info\" });\n },\n [addToast]\n );\n\n const warning = useCallback(\n (\n message: string,\n options?: Omit<ToastOptions, \"message\" | \"variant\">\n ): string => {\n return addToast({ ...options, message, variant: \"warning\" });\n },\n [addToast]\n );\n\n const error = useCallback(\n (\n message: string,\n options?: Omit<ToastOptions, \"message\" | \"variant\">\n ): string => {\n return addToast({ ...options, message, variant: \"error\" });\n },\n [addToast]\n );\n\n const dismiss = useCallback(\n (id: string): void => {\n dismissToast(id);\n },\n [dismissToast]\n );\n\n const dismissAll = useCallback((): void => {\n dismissAllToasts();\n }, [dismissAllToasts]);\n\n return {\n toast,\n success,\n info,\n warning,\n error,\n dismiss,\n dismissAll,\n };\n};\n"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime","import_react","import_xui_core","import_jsx_runtime","import_react","import_react","import_jsx_runtime","import_react"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../src/Toast.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../../../foundation/primitives-native/src/Icon.tsx","../../src/ToastGroup.native.tsx","../../src/ToastProvider.tsx","../../src/ToastContext.tsx","../../src/useToast.ts"],"sourcesContent":["export { Toast } from \"./Toast\";\nexport { ToastGroup } from \"./ToastGroup\";\nexport { ToastProvider } from \"./ToastProvider\";\nexport { ToastContext } from \"./ToastContext\";\nexport { useToast } from \"./useToast\";\nexport type { UseToastReturn } from \"./useToast\";\nexport * from \"./types\";\n","import React, {\n cloneElement,\n isValidElement,\n useEffect,\n useState,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport {\n CheckCr,\n ExclamationMarkCr,\n InfoCr,\n Remove,\n Warning as WarningIcon,\n} from \"@xsolla/xui-icons-base\";\nimport type { ToastColorScheme, ToastProps, ToastType } from \"./types\";\n\nconst TOAST_COLORS: Record<ToastType, string> = {\n alert: \"#ff553d\",\n success: \"#47d94a\",\n neutral: \"#7899a1\",\n warning: \"#ffb95c\",\n};\nconst DEFAULT_COLOR_SCHEME: ToastColorScheme = {\n background: \"#34474b\",\n text: \"#ffffff\",\n descriptionText: \"rgba(255, 255, 255, 0.7)\",\n divider: \"rgba(255, 255, 255, 0.16)\",\n actionText: \"#ffffff\",\n};\n\nconst getDefaultIcon = (\n type: ToastType,\n size: number,\n color: string\n): React.ReactNode => {\n switch (type) {\n case \"success\":\n return (\n <CheckCr\n variant=\"solid\"\n size={size}\n color={color}\n data-testid=\"toast-icon-success\"\n />\n );\n case \"neutral\":\n return (\n <InfoCr\n variant=\"solid\"\n size={size}\n color={color}\n data-testid=\"toast-icon-neutral\"\n />\n );\n case \"warning\":\n return (\n <WarningIcon\n variant=\"solid\"\n size={size}\n color={color}\n data-testid=\"toast-icon-warning\"\n />\n );\n case \"alert\":\n default:\n return (\n <ExclamationMarkCr\n variant=\"solid\"\n size={size}\n color={color}\n data-testid=\"toast-icon-alert\"\n />\n );\n }\n};\n\nconst ANIMATION_DURATION = 200;\nconst PROGRESS_HEIGHT = 4;\nconst TOAST_CONFIG = {\n minHeight: 56,\n paddingHorizontal: 16,\n paddingVertical: 12,\n borderRadius: 4,\n gap: 12,\n iconSize: 24,\n closeButtonSize: 24,\n closeIconSize: 20,\n fontSize: 16,\n lineHeight: 20,\n maxWidth: 440,\n};\n\ntype ActionProps = {\n children?: React.ReactNode;\n size?: \"xs\";\n variant?: \"inverse\";\n background?: boolean;\n themeMode?: ToastProps[\"themeMode\"];\n themeProductContext?: ToastProps[\"themeProductContext\"];\n};\n\nexport const Toast: React.FC<ToastProps> = ({\n id,\n type = \"neutral\",\n title,\n description,\n icon = true,\n action,\n showCloseButton = true,\n progress = false,\n duration,\n onClose,\n colorScheme = DEFAULT_COLOR_SCHEME,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n useResolvedTheme({ themeMode, themeProductContext });\n const config = TOAST_CONFIG;\n const [visible, setVisible] = useState(false);\n const [dismissing, setDismissing] = useState(false);\n\n useEffect(() => {\n const frame = requestAnimationFrame(() => setVisible(true));\n return () => cancelAnimationFrame(frame);\n }, []);\n\n const handleClose = () => {\n if (dismissing) return;\n setDismissing(true);\n setTimeout(() => onClose?.(), ANIMATION_DURATION);\n };\n\n useEffect(() => {\n if (!duration || duration <= 0) return;\n const timer = setTimeout(handleClose, duration);\n return () => clearTimeout(timer);\n }, [duration]);\n\n const iconColor = TOAST_COLORS[type];\n const shouldShowIcon = icon !== false;\n const displayIcon =\n icon === true || icon === undefined\n ? getDefaultIcon(type, config.iconSize, iconColor)\n : icon;\n const renderedAction =\n isValidElement<ActionProps>(action) && typeof action.type !== \"string\"\n ? cloneElement(action, {\n size: \"xs\",\n variant: \"inverse\",\n background: false,\n themeMode: \"dark\",\n themeProductContext,\n children: (\n <span style={{ color: colorScheme.actionText }}>\n {action.props.children}\n </span>\n ),\n })\n : action;\n const hasAction = Boolean(action);\n const hasCloseButton = showCloseButton && Boolean(onClose);\n const hasActions = hasAction || hasCloseButton;\n const role = type === \"neutral\" || type === \"success\" ? \"status\" : \"alert\";\n const ariaLive =\n type === \"neutral\" || type === \"success\" ? \"polite\" : \"assertive\";\n\n return (\n <Box\n testID={testID}\n backgroundColor={colorScheme.background}\n borderRadius={config.borderRadius}\n minHeight={config.minHeight}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n overflow=\"hidden\"\n width={config.maxWidth}\n maxWidth=\"100%\"\n role={role}\n aria-live={ariaLive}\n data-toast-id={id}\n style={{\n opacity: visible && !dismissing ? 1 : 0,\n transform:\n visible && !dismissing ? \"translateY(0)\" : \"translateY(-8px)\",\n transition: `opacity ${ANIMATION_DURATION}ms ease-out, transform ${ANIMATION_DURATION}ms ease-out`,\n boxShadow: colorScheme.shadow,\n backdropFilter: colorScheme.backdropFilter,\n }}\n >\n <Box\n flex={1}\n minHeight={config.minHeight}\n minWidth={0}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={config.gap}\n paddingHorizontal={config.paddingHorizontal}\n paddingVertical={config.paddingVertical}\n >\n {shouldShowIcon && (\n <Box\n width={config.iconSize}\n height={config.iconSize}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n >\n {icon === true || icon === undefined ? (\n displayIcon\n ) : (\n <Icon size={config.iconSize} color={iconColor}>\n {displayIcon}\n </Icon>\n )}\n </Box>\n )}\n\n <Box flex={1} minWidth={0} gap={2}>\n {title && (\n <Text\n color={colorScheme.text}\n fontSize={config.fontSize}\n lineHeight={config.lineHeight}\n fontWeight=\"500\"\n numberOfLines={1}\n >\n {title}\n </Text>\n )}\n {description && (\n <Text\n color={colorScheme.descriptionText}\n fontSize={14}\n lineHeight={18}\n numberOfLines={1}\n >\n {description}\n </Text>\n )}\n </Box>\n\n {hasActions && (\n <Box\n height={32}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={config.gap}\n flexShrink={0}\n >\n {renderedAction}\n\n {hasAction && hasCloseButton && (\n <Box\n width={1}\n height=\"100%\"\n backgroundColor={colorScheme.divider}\n testID=\"toast-divider\"\n />\n )}\n\n {hasCloseButton && (\n <Box\n onPress={handleClose}\n width={config.closeButtonSize}\n height={config.closeButtonSize}\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n role=\"button\"\n aria-label=\"Dismiss notification\"\n >\n <Remove\n variant=\"line\"\n size={config.closeIconSize}\n color={colorScheme.text}\n />\n </Box>\n )}\n </Box>\n )}\n </Box>\n\n {progress && (\n <Box\n position=\"absolute\"\n left={0}\n right={0}\n bottom={0}\n height={PROGRESS_HEIGHT}\n backgroundColor={iconColor}\n />\n )}\n </Box>\n );\n};\n\nToast.displayName = \"Toast\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n testID,\n \"data-testid\": dataTestId,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={dataTestId || testID || id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({\n children,\n color,\n size,\n testID,\n \"data-testid\": dataTestId,\n}) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return (\n <View style={style} testID={dataTestId || testID}>\n {childrenWithProps}\n </View>\n );\n};\n","import React, { memo } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport { Toast } from \"./Toast\";\nimport type { ToastGroupProps } from \"./types\";\n\nconst TOAST_GROUP_CONFIG = {\n containerPadding: 12,\n groupGap: 8,\n};\n\nexport const ToastGroup = memo(\n ({\n toasts,\n position = \"top\",\n maxWidth,\n onDismiss,\n testID,\n themeMode,\n themeProductContext,\n }: ToastGroupProps) => {\n useResolvedTheme({ themeMode, themeProductContext });\n const config = TOAST_GROUP_CONFIG;\n\n if (toasts.length === 0) {\n return null;\n }\n\n const positionStyles =\n position === \"top\"\n ? { top: config.containerPadding, bottom: undefined }\n : { top: undefined, bottom: config.containerPadding };\n\n return (\n <Box\n testID={testID}\n position=\"absolute\"\n left={0}\n right={0}\n zIndex={9999}\n alignItems=\"center\"\n paddingHorizontal={config.containerPadding}\n pointerEvents=\"box-none\"\n {...positionStyles}\n >\n <Box\n width=\"100%\"\n maxWidth={maxWidth}\n gap={config.groupGap}\n flexDirection=\"column\"\n >\n {toasts.map((toast) => (\n <Toast\n key={toast.id}\n id={toast.id}\n type={toast.type}\n title={toast.title}\n description={toast.description}\n icon={toast.icon}\n action={toast.action}\n showCloseButton={toast.showCloseButton}\n progress={toast.progress}\n duration={toast.duration}\n onClose={() => onDismiss(toast.id)}\n />\n ))}\n </Box>\n </Box>\n );\n }\n);\n\nToastGroup.displayName = \"ToastGroup\";\n","import React, { useCallback, useMemo, useState } from \"react\";\nimport { ToastContext } from \"./ToastContext\";\nimport { ToastGroup } from \"./ToastGroup\";\nimport type { ToastProviderProps, ToastData, ToastOptions } from \"./types\";\n\nlet toastIdCounter = 0;\n\nconst generateToastId = (): string => {\n return `toast-${++toastIdCounter}-${Date.now()}`;\n};\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ({\n children,\n position = \"top\",\n align = \"center\",\n defaultDuration = 5000,\n maxWidth,\n testID,\n}) => {\n const [toasts, setToasts] = useState<ToastData[]>([]);\n\n const dismissToast = useCallback((id: string) => {\n setToasts((prev) => prev.filter((toast) => toast.id !== id));\n }, []);\n\n const dismissAllToasts = useCallback(() => {\n setToasts([]);\n }, []);\n\n const addToast = useCallback(\n (options: ToastOptions): string => {\n const id = generateToastId();\n const duration = options.duration ?? defaultDuration;\n\n const newToast: ToastData = {\n id,\n type: options.type ?? \"neutral\",\n title: options.title,\n description: options.description,\n icon: options.icon,\n action: options.action,\n showCloseButton: options.showCloseButton,\n progress: options.progress,\n duration,\n };\n\n setToasts((prev) => [...prev, newToast]);\n\n return id;\n },\n [defaultDuration]\n );\n\n const contextValue = useMemo(\n () => ({\n toasts,\n addToast,\n dismissToast,\n dismissAllToasts,\n }),\n [toasts, addToast, dismissToast, dismissAllToasts]\n );\n\n return (\n <ToastContext.Provider value={contextValue}>\n {children}\n <ToastGroup\n toasts={toasts}\n position={position}\n align={align}\n maxWidth={maxWidth}\n onDismiss={dismissToast}\n testID={testID}\n />\n </ToastContext.Provider>\n );\n};\n","import { createContext } from \"react\";\nimport type { ToastContextType } from \"./types\";\n\nexport const ToastContext = createContext<ToastContextType | null>(null);\n","import { useContext, useCallback } from \"react\";\nimport { ToastContext } from \"./ToastContext\";\nimport type { ToastOptions } from \"./types\";\n\nexport interface UseToastReturn {\n /** Show a toast with custom options */\n toast: (options: ToastOptions) => string;\n /** Show an alert toast */\n alert: (options: Omit<ToastOptions, \"type\">) => string;\n /** Show a success toast */\n success: (options: Omit<ToastOptions, \"type\">) => string;\n /** Show a neutral toast */\n neutral: (options: Omit<ToastOptions, \"type\">) => string;\n /** Show a warning toast */\n warning: (options: Omit<ToastOptions, \"type\">) => string;\n /** Dismiss a specific toast by ID */\n dismiss: (id: string) => void;\n /** Dismiss all toasts */\n dismissAll: () => void;\n}\n\nexport const useToast = (): UseToastReturn => {\n const context = useContext(ToastContext);\n\n if (!context) {\n throw new Error(\"useToast must be used within a ToastProvider\");\n }\n\n const { addToast, dismissToast, dismissAllToasts } = context;\n\n const toast = useCallback(\n (options: ToastOptions): string => {\n return addToast(options);\n },\n [addToast]\n );\n\n const alert = useCallback(\n (options: Omit<ToastOptions, \"type\">): string => {\n return addToast({ ...options, type: \"alert\" });\n },\n [addToast]\n );\n\n const success = useCallback(\n (options: Omit<ToastOptions, \"type\">): string => {\n return addToast({ ...options, type: \"success\" });\n },\n [addToast]\n );\n\n const neutral = useCallback(\n (options: Omit<ToastOptions, \"type\">): string => {\n return addToast({ ...options, type: \"neutral\" });\n },\n [addToast]\n );\n\n const warning = useCallback(\n (options: Omit<ToastOptions, \"type\">): string => {\n return addToast({ ...options, type: \"warning\" });\n },\n [addToast]\n );\n\n const dismiss = useCallback(\n (id: string): void => {\n dismissToast(id);\n },\n [dismissToast]\n );\n\n const dismissAll = useCallback((): void => {\n dismissAllToasts();\n }, [dismissAllToasts]);\n\n return {\n toast,\n alert,\n success,\n neutral,\n warning,\n dismiss,\n dismissAll,\n };\n};\n"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime","WarningIcon","import_react","import_xui_core","import_jsx_runtime","import_react","import_react","import_jsx_runtime","import_react"]}
|
package/native/index.mjs
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
// src/Toast.tsx
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
cloneElement,
|
|
4
|
+
isValidElement,
|
|
5
|
+
useEffect,
|
|
6
|
+
useState
|
|
7
|
+
} from "react";
|
|
3
8
|
|
|
4
9
|
// ../../foundation/primitives-native/src/Box.tsx
|
|
5
10
|
import {
|
|
@@ -209,6 +214,8 @@ var Text = ({
|
|
|
209
214
|
numberOfLines,
|
|
210
215
|
id,
|
|
211
216
|
role,
|
|
217
|
+
testID,
|
|
218
|
+
"data-testid": dataTestId,
|
|
212
219
|
style: styleProp,
|
|
213
220
|
...props
|
|
214
221
|
}) => {
|
|
@@ -238,7 +245,7 @@ var Text = ({
|
|
|
238
245
|
{
|
|
239
246
|
style: baseStyle,
|
|
240
247
|
numberOfLines,
|
|
241
|
-
testID: id,
|
|
248
|
+
testID: dataTestId || testID || id,
|
|
242
249
|
accessibilityRole,
|
|
243
250
|
children
|
|
244
251
|
}
|
|
@@ -249,7 +256,13 @@ var Text = ({
|
|
|
249
256
|
import React from "react";
|
|
250
257
|
import { View as View2 } from "react-native";
|
|
251
258
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
252
|
-
var Icon = ({
|
|
259
|
+
var Icon = ({
|
|
260
|
+
children,
|
|
261
|
+
color,
|
|
262
|
+
size,
|
|
263
|
+
testID,
|
|
264
|
+
"data-testid": dataTestId
|
|
265
|
+
}) => {
|
|
253
266
|
const style = {
|
|
254
267
|
width: typeof size === "number" ? size : void 0,
|
|
255
268
|
height: typeof size === "number" ? size : void 0,
|
|
@@ -266,50 +279,110 @@ var Icon = ({ children, color, size }) => {
|
|
|
266
279
|
}
|
|
267
280
|
return child;
|
|
268
281
|
});
|
|
269
|
-
return /* @__PURE__ */ jsx3(View2, { style, children: childrenWithProps });
|
|
282
|
+
return /* @__PURE__ */ jsx3(View2, { style, testID: dataTestId || testID, children: childrenWithProps });
|
|
270
283
|
};
|
|
271
284
|
|
|
272
285
|
// src/Toast.tsx
|
|
273
286
|
import { useResolvedTheme } from "@xsolla/xui-core";
|
|
274
|
-
import {
|
|
287
|
+
import {
|
|
288
|
+
CheckCr,
|
|
289
|
+
ExclamationMarkCr,
|
|
290
|
+
InfoCr,
|
|
291
|
+
Remove,
|
|
292
|
+
Warning as WarningIcon
|
|
293
|
+
} from "@xsolla/xui-icons-base";
|
|
275
294
|
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
276
|
-
var
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
295
|
+
var TOAST_COLORS = {
|
|
296
|
+
alert: "#ff553d",
|
|
297
|
+
success: "#47d94a",
|
|
298
|
+
neutral: "#7899a1",
|
|
299
|
+
warning: "#ffb95c"
|
|
300
|
+
};
|
|
301
|
+
var DEFAULT_COLOR_SCHEME = {
|
|
302
|
+
background: "#34474b",
|
|
303
|
+
text: "#ffffff",
|
|
304
|
+
descriptionText: "rgba(255, 255, 255, 0.7)",
|
|
305
|
+
divider: "rgba(255, 255, 255, 0.16)",
|
|
306
|
+
actionText: "#ffffff"
|
|
286
307
|
};
|
|
287
|
-
var
|
|
288
|
-
switch (
|
|
308
|
+
var getDefaultIcon = (type, size, color) => {
|
|
309
|
+
switch (type) {
|
|
289
310
|
case "success":
|
|
290
|
-
return
|
|
311
|
+
return /* @__PURE__ */ jsx4(
|
|
312
|
+
CheckCr,
|
|
313
|
+
{
|
|
314
|
+
variant: "solid",
|
|
315
|
+
size,
|
|
316
|
+
color,
|
|
317
|
+
"data-testid": "toast-icon-success"
|
|
318
|
+
}
|
|
319
|
+
);
|
|
320
|
+
case "neutral":
|
|
321
|
+
return /* @__PURE__ */ jsx4(
|
|
322
|
+
InfoCr,
|
|
323
|
+
{
|
|
324
|
+
variant: "solid",
|
|
325
|
+
size,
|
|
326
|
+
color,
|
|
327
|
+
"data-testid": "toast-icon-neutral"
|
|
328
|
+
}
|
|
329
|
+
);
|
|
291
330
|
case "warning":
|
|
292
|
-
return
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
331
|
+
return /* @__PURE__ */ jsx4(
|
|
332
|
+
WarningIcon,
|
|
333
|
+
{
|
|
334
|
+
variant: "solid",
|
|
335
|
+
size,
|
|
336
|
+
color,
|
|
337
|
+
"data-testid": "toast-icon-warning"
|
|
338
|
+
}
|
|
339
|
+
);
|
|
340
|
+
case "alert":
|
|
296
341
|
default:
|
|
297
|
-
return
|
|
342
|
+
return /* @__PURE__ */ jsx4(
|
|
343
|
+
ExclamationMarkCr,
|
|
344
|
+
{
|
|
345
|
+
variant: "solid",
|
|
346
|
+
size,
|
|
347
|
+
color,
|
|
348
|
+
"data-testid": "toast-icon-alert"
|
|
349
|
+
}
|
|
350
|
+
);
|
|
298
351
|
}
|
|
299
352
|
};
|
|
300
353
|
var ANIMATION_DURATION = 200;
|
|
354
|
+
var PROGRESS_HEIGHT = 4;
|
|
355
|
+
var TOAST_CONFIG = {
|
|
356
|
+
minHeight: 56,
|
|
357
|
+
paddingHorizontal: 16,
|
|
358
|
+
paddingVertical: 12,
|
|
359
|
+
borderRadius: 4,
|
|
360
|
+
gap: 12,
|
|
361
|
+
iconSize: 24,
|
|
362
|
+
closeButtonSize: 24,
|
|
363
|
+
closeIconSize: 20,
|
|
364
|
+
fontSize: 16,
|
|
365
|
+
lineHeight: 20,
|
|
366
|
+
maxWidth: 440
|
|
367
|
+
};
|
|
301
368
|
var Toast = ({
|
|
302
369
|
id,
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
370
|
+
type = "neutral",
|
|
371
|
+
title,
|
|
372
|
+
description,
|
|
373
|
+
icon = true,
|
|
374
|
+
action,
|
|
375
|
+
showCloseButton = true,
|
|
376
|
+
progress = false,
|
|
306
377
|
duration,
|
|
307
378
|
onClose,
|
|
379
|
+
colorScheme = DEFAULT_COLOR_SCHEME,
|
|
380
|
+
testID,
|
|
308
381
|
themeMode,
|
|
309
382
|
themeProductContext
|
|
310
383
|
}) => {
|
|
311
|
-
|
|
312
|
-
const config =
|
|
384
|
+
useResolvedTheme({ themeMode, themeProductContext });
|
|
385
|
+
const config = TOAST_CONFIG;
|
|
313
386
|
const [visible, setVisible] = useState(false);
|
|
314
387
|
const [dismissing, setDismissing] = useState(false);
|
|
315
388
|
useEffect(() => {
|
|
@@ -326,63 +399,147 @@ var Toast = ({
|
|
|
326
399
|
const timer = setTimeout(handleClose, duration);
|
|
327
400
|
return () => clearTimeout(timer);
|
|
328
401
|
}, [duration]);
|
|
329
|
-
const iconColor =
|
|
330
|
-
const
|
|
402
|
+
const iconColor = TOAST_COLORS[type];
|
|
403
|
+
const shouldShowIcon = icon !== false;
|
|
404
|
+
const displayIcon = icon === true || icon === void 0 ? getDefaultIcon(type, config.iconSize, iconColor) : icon;
|
|
405
|
+
const renderedAction = isValidElement(action) && typeof action.type !== "string" ? cloneElement(action, {
|
|
406
|
+
size: "xs",
|
|
407
|
+
variant: "inverse",
|
|
408
|
+
background: false,
|
|
409
|
+
themeMode: "dark",
|
|
410
|
+
themeProductContext,
|
|
411
|
+
children: /* @__PURE__ */ jsx4("span", { style: { color: colorScheme.actionText }, children: action.props.children })
|
|
412
|
+
}) : action;
|
|
413
|
+
const hasAction = Boolean(action);
|
|
414
|
+
const hasCloseButton = showCloseButton && Boolean(onClose);
|
|
415
|
+
const hasActions = hasAction || hasCloseButton;
|
|
416
|
+
const role = type === "neutral" || type === "success" ? "status" : "alert";
|
|
417
|
+
const ariaLive = type === "neutral" || type === "success" ? "polite" : "assertive";
|
|
331
418
|
return /* @__PURE__ */ jsxs(
|
|
332
419
|
Box,
|
|
333
420
|
{
|
|
334
|
-
|
|
421
|
+
testID,
|
|
422
|
+
backgroundColor: colorScheme.background,
|
|
335
423
|
borderRadius: config.borderRadius,
|
|
336
|
-
paddingHorizontal: config.paddingHorizontal,
|
|
337
|
-
paddingVertical: config.paddingVertical,
|
|
338
424
|
minHeight: config.minHeight,
|
|
339
425
|
flexDirection: "row",
|
|
340
426
|
alignItems: "center",
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
427
|
+
justifyContent: "center",
|
|
428
|
+
overflow: "hidden",
|
|
429
|
+
width: config.maxWidth,
|
|
430
|
+
maxWidth: "100%",
|
|
431
|
+
role,
|
|
432
|
+
"aria-live": ariaLive,
|
|
345
433
|
"data-toast-id": id,
|
|
346
434
|
style: {
|
|
347
435
|
opacity: visible && !dismissing ? 1 : 0,
|
|
348
436
|
transform: visible && !dismissing ? "translateY(0)" : "translateY(-8px)",
|
|
349
|
-
transition: `opacity ${ANIMATION_DURATION}ms ease-out, transform ${ANIMATION_DURATION}ms ease-out
|
|
437
|
+
transition: `opacity ${ANIMATION_DURATION}ms ease-out, transform ${ANIMATION_DURATION}ms ease-out`,
|
|
438
|
+
boxShadow: colorScheme.shadow,
|
|
439
|
+
backdropFilter: colorScheme.backdropFilter
|
|
350
440
|
},
|
|
351
441
|
children: [
|
|
352
|
-
/* @__PURE__ */
|
|
442
|
+
/* @__PURE__ */ jsxs(
|
|
353
443
|
Box,
|
|
354
444
|
{
|
|
355
|
-
|
|
356
|
-
|
|
445
|
+
flex: 1,
|
|
446
|
+
minHeight: config.minHeight,
|
|
447
|
+
minWidth: 0,
|
|
448
|
+
flexDirection: "row",
|
|
357
449
|
alignItems: "center",
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
450
|
+
gap: config.gap,
|
|
451
|
+
paddingHorizontal: config.paddingHorizontal,
|
|
452
|
+
paddingVertical: config.paddingVertical,
|
|
453
|
+
children: [
|
|
454
|
+
shouldShowIcon && /* @__PURE__ */ jsx4(
|
|
455
|
+
Box,
|
|
456
|
+
{
|
|
457
|
+
width: config.iconSize,
|
|
458
|
+
height: config.iconSize,
|
|
459
|
+
alignItems: "center",
|
|
460
|
+
justifyContent: "center",
|
|
461
|
+
flexShrink: 0,
|
|
462
|
+
children: icon === true || icon === void 0 ? displayIcon : /* @__PURE__ */ jsx4(Icon, { size: config.iconSize, color: iconColor, children: displayIcon })
|
|
463
|
+
}
|
|
464
|
+
),
|
|
465
|
+
/* @__PURE__ */ jsxs(Box, { flex: 1, minWidth: 0, gap: 2, children: [
|
|
466
|
+
title && /* @__PURE__ */ jsx4(
|
|
467
|
+
Text,
|
|
468
|
+
{
|
|
469
|
+
color: colorScheme.text,
|
|
470
|
+
fontSize: config.fontSize,
|
|
471
|
+
lineHeight: config.lineHeight,
|
|
472
|
+
fontWeight: "500",
|
|
473
|
+
numberOfLines: 1,
|
|
474
|
+
children: title
|
|
475
|
+
}
|
|
476
|
+
),
|
|
477
|
+
description && /* @__PURE__ */ jsx4(
|
|
478
|
+
Text,
|
|
479
|
+
{
|
|
480
|
+
color: colorScheme.descriptionText,
|
|
481
|
+
fontSize: 14,
|
|
482
|
+
lineHeight: 18,
|
|
483
|
+
numberOfLines: 1,
|
|
484
|
+
children: description
|
|
485
|
+
}
|
|
486
|
+
)
|
|
487
|
+
] }),
|
|
488
|
+
hasActions && /* @__PURE__ */ jsxs(
|
|
489
|
+
Box,
|
|
490
|
+
{
|
|
491
|
+
height: 32,
|
|
492
|
+
flexDirection: "row",
|
|
493
|
+
alignItems: "center",
|
|
494
|
+
gap: config.gap,
|
|
495
|
+
flexShrink: 0,
|
|
496
|
+
children: [
|
|
497
|
+
renderedAction,
|
|
498
|
+
hasAction && hasCloseButton && /* @__PURE__ */ jsx4(
|
|
499
|
+
Box,
|
|
500
|
+
{
|
|
501
|
+
width: 1,
|
|
502
|
+
height: "100%",
|
|
503
|
+
backgroundColor: colorScheme.divider,
|
|
504
|
+
testID: "toast-divider"
|
|
505
|
+
}
|
|
506
|
+
),
|
|
507
|
+
hasCloseButton && /* @__PURE__ */ jsx4(
|
|
508
|
+
Box,
|
|
509
|
+
{
|
|
510
|
+
onPress: handleClose,
|
|
511
|
+
width: config.closeButtonSize,
|
|
512
|
+
height: config.closeButtonSize,
|
|
513
|
+
alignItems: "center",
|
|
514
|
+
justifyContent: "center",
|
|
515
|
+
flexShrink: 0,
|
|
516
|
+
role: "button",
|
|
517
|
+
"aria-label": "Dismiss notification",
|
|
518
|
+
children: /* @__PURE__ */ jsx4(
|
|
519
|
+
Remove,
|
|
520
|
+
{
|
|
521
|
+
variant: "line",
|
|
522
|
+
size: config.closeIconSize,
|
|
523
|
+
color: colorScheme.text
|
|
524
|
+
}
|
|
525
|
+
)
|
|
526
|
+
}
|
|
527
|
+
)
|
|
528
|
+
]
|
|
529
|
+
}
|
|
530
|
+
)
|
|
531
|
+
]
|
|
361
532
|
}
|
|
362
533
|
),
|
|
363
|
-
|
|
364
|
-
Text,
|
|
365
|
-
{
|
|
366
|
-
color: theme.colors.content.inverse,
|
|
367
|
-
fontSize: config.fontSize,
|
|
368
|
-
lineHeight: config.lineHeight,
|
|
369
|
-
fontWeight: "500",
|
|
370
|
-
numberOfLines: 2,
|
|
371
|
-
children: message
|
|
372
|
-
}
|
|
373
|
-
) }),
|
|
374
|
-
onClose && /* @__PURE__ */ jsx4(
|
|
534
|
+
progress && /* @__PURE__ */ jsx4(
|
|
375
535
|
Box,
|
|
376
536
|
{
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
role: "button",
|
|
384
|
-
"aria-label": "Dismiss toast",
|
|
385
|
-
children: /* @__PURE__ */ jsx4(X, { size: config.closeIconSize, color: theme.colors.content.inverse })
|
|
537
|
+
position: "absolute",
|
|
538
|
+
left: 0,
|
|
539
|
+
right: 0,
|
|
540
|
+
bottom: 0,
|
|
541
|
+
height: PROGRESS_HEIGHT,
|
|
542
|
+
backgroundColor: iconColor
|
|
386
543
|
}
|
|
387
544
|
)
|
|
388
545
|
]
|
|
@@ -395,17 +552,22 @@ Toast.displayName = "Toast";
|
|
|
395
552
|
import { memo } from "react";
|
|
396
553
|
import { useResolvedTheme as useResolvedTheme2 } from "@xsolla/xui-core";
|
|
397
554
|
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
555
|
+
var TOAST_GROUP_CONFIG = {
|
|
556
|
+
containerPadding: 12,
|
|
557
|
+
groupGap: 8
|
|
558
|
+
};
|
|
398
559
|
var ToastGroup = memo(
|
|
399
560
|
({
|
|
400
561
|
toasts,
|
|
401
562
|
position = "top",
|
|
402
563
|
maxWidth,
|
|
403
564
|
onDismiss,
|
|
565
|
+
testID,
|
|
404
566
|
themeMode,
|
|
405
567
|
themeProductContext
|
|
406
568
|
}) => {
|
|
407
|
-
|
|
408
|
-
const config =
|
|
569
|
+
useResolvedTheme2({ themeMode, themeProductContext });
|
|
570
|
+
const config = TOAST_GROUP_CONFIG;
|
|
409
571
|
if (toasts.length === 0) {
|
|
410
572
|
return null;
|
|
411
573
|
}
|
|
@@ -413,6 +575,7 @@ var ToastGroup = memo(
|
|
|
413
575
|
return /* @__PURE__ */ jsx5(
|
|
414
576
|
Box,
|
|
415
577
|
{
|
|
578
|
+
testID,
|
|
416
579
|
position: "absolute",
|
|
417
580
|
left: 0,
|
|
418
581
|
right: 0,
|
|
@@ -432,9 +595,13 @@ var ToastGroup = memo(
|
|
|
432
595
|
Toast,
|
|
433
596
|
{
|
|
434
597
|
id: toast.id,
|
|
435
|
-
|
|
436
|
-
|
|
598
|
+
type: toast.type,
|
|
599
|
+
title: toast.title,
|
|
600
|
+
description: toast.description,
|
|
437
601
|
icon: toast.icon,
|
|
602
|
+
action: toast.action,
|
|
603
|
+
showCloseButton: toast.showCloseButton,
|
|
604
|
+
progress: toast.progress,
|
|
438
605
|
duration: toast.duration,
|
|
439
606
|
onClose: () => onDismiss(toast.id)
|
|
440
607
|
},
|
|
@@ -466,7 +633,8 @@ var ToastProvider = ({
|
|
|
466
633
|
position = "top",
|
|
467
634
|
align = "center",
|
|
468
635
|
defaultDuration = 5e3,
|
|
469
|
-
maxWidth
|
|
636
|
+
maxWidth,
|
|
637
|
+
testID
|
|
470
638
|
}) => {
|
|
471
639
|
const [toasts, setToasts] = useState2([]);
|
|
472
640
|
const dismissToast = useCallback((id) => {
|
|
@@ -481,9 +649,13 @@ var ToastProvider = ({
|
|
|
481
649
|
const duration = options.duration ?? defaultDuration;
|
|
482
650
|
const newToast = {
|
|
483
651
|
id,
|
|
484
|
-
|
|
485
|
-
|
|
652
|
+
type: options.type ?? "neutral",
|
|
653
|
+
title: options.title,
|
|
654
|
+
description: options.description,
|
|
486
655
|
icon: options.icon,
|
|
656
|
+
action: options.action,
|
|
657
|
+
showCloseButton: options.showCloseButton,
|
|
658
|
+
progress: options.progress,
|
|
487
659
|
duration
|
|
488
660
|
};
|
|
489
661
|
setToasts((prev) => [...prev, newToast]);
|
|
@@ -509,7 +681,8 @@ var ToastProvider = ({
|
|
|
509
681
|
position,
|
|
510
682
|
align,
|
|
511
683
|
maxWidth,
|
|
512
|
-
onDismiss: dismissToast
|
|
684
|
+
onDismiss: dismissToast,
|
|
685
|
+
testID
|
|
513
686
|
}
|
|
514
687
|
)
|
|
515
688
|
] });
|
|
@@ -529,27 +702,27 @@ var useToast = () => {
|
|
|
529
702
|
},
|
|
530
703
|
[addToast]
|
|
531
704
|
);
|
|
532
|
-
const
|
|
533
|
-
(
|
|
534
|
-
return addToast({ ...options,
|
|
705
|
+
const alert = useCallback2(
|
|
706
|
+
(options) => {
|
|
707
|
+
return addToast({ ...options, type: "alert" });
|
|
535
708
|
},
|
|
536
709
|
[addToast]
|
|
537
710
|
);
|
|
538
|
-
const
|
|
539
|
-
(
|
|
540
|
-
return addToast({ ...options,
|
|
711
|
+
const success = useCallback2(
|
|
712
|
+
(options) => {
|
|
713
|
+
return addToast({ ...options, type: "success" });
|
|
541
714
|
},
|
|
542
715
|
[addToast]
|
|
543
716
|
);
|
|
544
|
-
const
|
|
545
|
-
(
|
|
546
|
-
return addToast({ ...options,
|
|
717
|
+
const neutral = useCallback2(
|
|
718
|
+
(options) => {
|
|
719
|
+
return addToast({ ...options, type: "neutral" });
|
|
547
720
|
},
|
|
548
721
|
[addToast]
|
|
549
722
|
);
|
|
550
|
-
const
|
|
551
|
-
(
|
|
552
|
-
return addToast({ ...options,
|
|
723
|
+
const warning = useCallback2(
|
|
724
|
+
(options) => {
|
|
725
|
+
return addToast({ ...options, type: "warning" });
|
|
553
726
|
},
|
|
554
727
|
[addToast]
|
|
555
728
|
);
|
|
@@ -564,10 +737,10 @@ var useToast = () => {
|
|
|
564
737
|
}, [dismissAllToasts]);
|
|
565
738
|
return {
|
|
566
739
|
toast,
|
|
740
|
+
alert,
|
|
567
741
|
success,
|
|
568
|
-
|
|
742
|
+
neutral,
|
|
569
743
|
warning,
|
|
570
|
-
error,
|
|
571
744
|
dismiss,
|
|
572
745
|
dismissAll
|
|
573
746
|
};
|