@xsolla/xui-toast 0.127.0 → 0.128.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 +2 -1
- package/native/index.d.mts +4 -1
- package/native/index.d.ts +4 -1
- package/native/index.js +55 -53
- package/native/index.js.map +1 -1
- package/native/index.mjs +39 -43
- package/native/index.mjs.map +1 -1
- package/package.json +4 -4
- package/web/index.d.mts +4 -1
- package/web/index.d.ts +4 -1
- package/web/index.js +55 -53
- package/web/index.js.map +1 -1
- package/web/index.mjs +39 -43
- package/web/index.mjs.map +1 -1
package/native/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx","../../src/Toast.tsx","../../src/ToastGroup.native.tsx","../../src/ToastProvider.tsx","../../src/ToastContext.tsx","../../src/useToast.ts"],"sourcesContent":["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 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 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,\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 from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } 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 useDesignSystem>[\"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\nexport const Toast: React.FC<ToastProps> = ({\n id,\n variant = \"info\",\n message,\n icon,\n onClose,\n}) => {\n const { theme } = useDesignSystem();\n const config = theme.sizing.toast();\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 >\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={onClose}\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, { memo } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Toast } from \"./Toast\";\nimport type { ToastGroupProps } from \"./types\";\n\nexport const ToastGroup = memo(\n ({ toasts, position = \"top\", onDismiss }: ToastGroupProps) => {\n const { theme } = useDesignSystem();\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={config.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 onClose={() => onDismiss(toast.id)}\n />\n ))}\n </Box>\n </Box>\n );\n }\n);\n\nToastGroup.displayName = \"ToastGroup\";\n","import React, {\n useCallback,\n useMemo,\n useState,\n useEffect,\n useRef,\n} 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 defaultDuration = 5000,\n}) => {\n const [toasts, setToasts] = useState<ToastData[]>([]);\n const timersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(\n new Map()\n );\n\n const clearTimer = useCallback((id: string) => {\n const timer = timersRef.current.get(id);\n if (timer) {\n clearTimeout(timer);\n timersRef.current.delete(id);\n }\n }, []);\n\n const dismissToast = useCallback(\n (id: string) => {\n clearTimer(id);\n setToasts((prev) => prev.filter((toast) => toast.id !== id));\n },\n [clearTimer]\n );\n\n const dismissAllToasts = useCallback(() => {\n timersRef.current.forEach((_, id) => clearTimer(id));\n setToasts([]);\n }, [clearTimer]);\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 // Set auto-dismiss timer if duration > 0\n if (duration > 0) {\n const timer = setTimeout(() => {\n dismissToast(id);\n }, duration);\n timersRef.current.set(id, timer);\n }\n\n return id;\n },\n [defaultDuration, dismissToast]\n );\n\n // Cleanup timers on unmount\n useEffect(() => {\n return () => {\n timersRef.current.forEach((timer) => clearTimeout(timer));\n timersRef.current.clear();\n };\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 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":["jsx","View","jsx","jsx","useDesignSystem","jsx","useDesignSystem","jsx","jsxs","useCallback","useCallback"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Toast.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx","../../src/ToastGroup.native.tsx","../../src/ToastProvider.tsx","../../src/ToastContext.tsx","../../src/useToast.ts"],"sourcesContent":["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 { useDesignSystem } 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 useDesignSystem>[\"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}) => {\n const { theme } = useDesignSystem();\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 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 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,\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 { useDesignSystem } from \"@xsolla/xui-core\";\nimport { Toast } from \"./Toast\";\nimport type { ToastGroupProps } from \"./types\";\n\nexport const ToastGroup = memo(\n ({ toasts, position = \"top\", maxWidth, onDismiss }: ToastGroupProps) => {\n const { theme } = useDesignSystem();\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 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 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":["jsx","View","jsx","jsx","useDesignSystem","jsx","useDesignSystem","useState","jsx","jsxs","useState","useCallback","useCallback"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-toast",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.128.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
"test:coverage": "vitest run --coverage"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-icons": "0.
|
|
19
|
-
"@xsolla/xui-primitives-core": "0.
|
|
17
|
+
"@xsolla/xui-core": "0.128.0",
|
|
18
|
+
"@xsolla/xui-icons": "0.128.0",
|
|
19
|
+
"@xsolla/xui-primitives-core": "0.128.0"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"react": ">=16.8.0",
|
package/web/index.d.mts
CHANGED
|
@@ -15,6 +15,7 @@ interface ToastProps {
|
|
|
15
15
|
variant?: ToastVariant;
|
|
16
16
|
message: string;
|
|
17
17
|
icon?: ReactNode;
|
|
18
|
+
duration?: number;
|
|
18
19
|
onClose?: () => void;
|
|
19
20
|
}
|
|
20
21
|
interface ToastOptions {
|
|
@@ -26,6 +27,7 @@ interface ToastOptions {
|
|
|
26
27
|
interface ToastGroupProps {
|
|
27
28
|
toasts: ToastData[];
|
|
28
29
|
position?: ToastPosition;
|
|
30
|
+
maxWidth?: number;
|
|
29
31
|
onDismiss: (id: string) => void;
|
|
30
32
|
}
|
|
31
33
|
interface ToastContextType {
|
|
@@ -38,11 +40,12 @@ interface ToastProviderProps {
|
|
|
38
40
|
children: ReactNode;
|
|
39
41
|
position?: ToastPosition;
|
|
40
42
|
defaultDuration?: number;
|
|
43
|
+
maxWidth?: number;
|
|
41
44
|
}
|
|
42
45
|
|
|
43
46
|
declare const Toast: React__default.FC<ToastProps>;
|
|
44
47
|
|
|
45
|
-
declare const ToastGroup: React__default.MemoExoticComponent<({ toasts, position, onDismiss }: ToastGroupProps) => React__default.ReactPortal | null>;
|
|
48
|
+
declare const ToastGroup: React__default.MemoExoticComponent<({ toasts, position, maxWidth, onDismiss }: ToastGroupProps) => React__default.ReactPortal | null>;
|
|
46
49
|
|
|
47
50
|
declare const ToastProvider: React__default.FC<ToastProviderProps>;
|
|
48
51
|
|
package/web/index.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ interface ToastProps {
|
|
|
15
15
|
variant?: ToastVariant;
|
|
16
16
|
message: string;
|
|
17
17
|
icon?: ReactNode;
|
|
18
|
+
duration?: number;
|
|
18
19
|
onClose?: () => void;
|
|
19
20
|
}
|
|
20
21
|
interface ToastOptions {
|
|
@@ -26,6 +27,7 @@ interface ToastOptions {
|
|
|
26
27
|
interface ToastGroupProps {
|
|
27
28
|
toasts: ToastData[];
|
|
28
29
|
position?: ToastPosition;
|
|
30
|
+
maxWidth?: number;
|
|
29
31
|
onDismiss: (id: string) => void;
|
|
30
32
|
}
|
|
31
33
|
interface ToastContextType {
|
|
@@ -38,11 +40,12 @@ interface ToastProviderProps {
|
|
|
38
40
|
children: ReactNode;
|
|
39
41
|
position?: ToastPosition;
|
|
40
42
|
defaultDuration?: number;
|
|
43
|
+
maxWidth?: number;
|
|
41
44
|
}
|
|
42
45
|
|
|
43
46
|
declare const Toast: React__default.FC<ToastProps>;
|
|
44
47
|
|
|
45
|
-
declare const ToastGroup: React__default.MemoExoticComponent<({ toasts, position, onDismiss }: ToastGroupProps) => React__default.ReactPortal | null>;
|
|
48
|
+
declare const ToastGroup: React__default.MemoExoticComponent<({ toasts, position, maxWidth, onDismiss }: ToastGroupProps) => React__default.ReactPortal | null>;
|
|
46
49
|
|
|
47
50
|
declare const ToastProvider: React__default.FC<ToastProviderProps>;
|
|
48
51
|
|
package/web/index.js
CHANGED
|
@@ -38,6 +38,9 @@ __export(index_exports, {
|
|
|
38
38
|
});
|
|
39
39
|
module.exports = __toCommonJS(index_exports);
|
|
40
40
|
|
|
41
|
+
// src/Toast.tsx
|
|
42
|
+
var import_react2 = require("react");
|
|
43
|
+
|
|
41
44
|
// ../primitives-web/src/Box.tsx
|
|
42
45
|
var import_react = __toESM(require("react"));
|
|
43
46
|
var import_styled_components = __toESM(require("styled-components"));
|
|
@@ -290,15 +293,33 @@ var getIconColor = (variant, colors) => {
|
|
|
290
293
|
return colors.content.inverse;
|
|
291
294
|
}
|
|
292
295
|
};
|
|
296
|
+
var ANIMATION_DURATION = 200;
|
|
293
297
|
var Toast = ({
|
|
294
298
|
id,
|
|
295
299
|
variant = "info",
|
|
296
300
|
message,
|
|
297
301
|
icon,
|
|
302
|
+
duration,
|
|
298
303
|
onClose
|
|
299
304
|
}) => {
|
|
300
305
|
const { theme } = (0, import_xui_core.useDesignSystem)();
|
|
301
306
|
const config = theme.sizing.toast();
|
|
307
|
+
const [visible, setVisible] = (0, import_react2.useState)(false);
|
|
308
|
+
const [dismissing, setDismissing] = (0, import_react2.useState)(false);
|
|
309
|
+
(0, import_react2.useEffect)(() => {
|
|
310
|
+
const frame = requestAnimationFrame(() => setVisible(true));
|
|
311
|
+
return () => cancelAnimationFrame(frame);
|
|
312
|
+
}, []);
|
|
313
|
+
const handleClose = () => {
|
|
314
|
+
if (dismissing) return;
|
|
315
|
+
setDismissing(true);
|
|
316
|
+
setTimeout(() => onClose?.(), ANIMATION_DURATION);
|
|
317
|
+
};
|
|
318
|
+
(0, import_react2.useEffect)(() => {
|
|
319
|
+
if (!duration || duration <= 0) return;
|
|
320
|
+
const timer = setTimeout(handleClose, duration);
|
|
321
|
+
return () => clearTimeout(timer);
|
|
322
|
+
}, [duration]);
|
|
302
323
|
const iconColor = getIconColor(variant, theme.colors);
|
|
303
324
|
const displayIcon = icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: config.iconSize, color: iconColor, children: icon }) : getDefaultIcon(variant, config.iconSize, iconColor);
|
|
304
325
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
@@ -316,6 +337,11 @@ var Toast = ({
|
|
|
316
337
|
role: "alert",
|
|
317
338
|
"aria-live": "polite",
|
|
318
339
|
"data-toast-id": id,
|
|
340
|
+
style: {
|
|
341
|
+
opacity: visible && !dismissing ? 1 : 0,
|
|
342
|
+
transform: visible && !dismissing ? "translateY(0)" : "translateY(-8px)",
|
|
343
|
+
transition: `opacity ${ANIMATION_DURATION}ms ease-out, transform ${ANIMATION_DURATION}ms ease-out`
|
|
344
|
+
},
|
|
319
345
|
children: [
|
|
320
346
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
321
347
|
Box,
|
|
@@ -342,7 +368,7 @@ var Toast = ({
|
|
|
342
368
|
onClose && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
343
369
|
Box,
|
|
344
370
|
{
|
|
345
|
-
onPress:
|
|
371
|
+
onPress: handleClose,
|
|
346
372
|
width: config.closeButtonSize,
|
|
347
373
|
height: config.closeButtonSize,
|
|
348
374
|
alignItems: "center",
|
|
@@ -360,12 +386,12 @@ var Toast = ({
|
|
|
360
386
|
Toast.displayName = "Toast";
|
|
361
387
|
|
|
362
388
|
// src/ToastGroup.web.tsx
|
|
363
|
-
var
|
|
389
|
+
var import_react3 = require("react");
|
|
364
390
|
var import_react_dom = __toESM(require("react-dom"));
|
|
365
391
|
var import_xui_core2 = require("@xsolla/xui-core");
|
|
366
392
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
367
|
-
var ToastGroup = (0,
|
|
368
|
-
({ toasts, position = "top", onDismiss }) => {
|
|
393
|
+
var ToastGroup = (0, import_react3.memo)(
|
|
394
|
+
({ toasts, position = "top", maxWidth, onDismiss }) => {
|
|
369
395
|
const { theme } = (0, import_xui_core2.useDesignSystem)();
|
|
370
396
|
const config = theme.sizing.toast();
|
|
371
397
|
if (toasts.length === 0 || typeof document === "undefined") {
|
|
@@ -388,7 +414,7 @@ var ToastGroup = (0, import_react2.memo)(
|
|
|
388
414
|
Box,
|
|
389
415
|
{
|
|
390
416
|
width: "100%",
|
|
391
|
-
maxWidth
|
|
417
|
+
maxWidth,
|
|
392
418
|
gap: config.groupGap,
|
|
393
419
|
flexDirection: "column",
|
|
394
420
|
children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
@@ -398,6 +424,7 @@ var ToastGroup = (0, import_react2.memo)(
|
|
|
398
424
|
variant: toast.variant,
|
|
399
425
|
message: toast.message,
|
|
400
426
|
icon: toast.icon,
|
|
427
|
+
duration: toast.duration,
|
|
401
428
|
onClose: () => onDismiss(toast.id)
|
|
402
429
|
},
|
|
403
430
|
toast.id
|
|
@@ -413,11 +440,11 @@ var ToastGroup = (0, import_react2.memo)(
|
|
|
413
440
|
ToastGroup.displayName = "ToastGroup";
|
|
414
441
|
|
|
415
442
|
// src/ToastProvider.tsx
|
|
416
|
-
var
|
|
443
|
+
var import_react5 = require("react");
|
|
417
444
|
|
|
418
445
|
// src/ToastContext.tsx
|
|
419
|
-
var
|
|
420
|
-
var ToastContext = (0,
|
|
446
|
+
var import_react4 = require("react");
|
|
447
|
+
var ToastContext = (0, import_react4.createContext)(null);
|
|
421
448
|
|
|
422
449
|
// src/ToastProvider.tsx
|
|
423
450
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
@@ -428,31 +455,17 @@ var generateToastId = () => {
|
|
|
428
455
|
var ToastProvider = ({
|
|
429
456
|
children,
|
|
430
457
|
position = "top",
|
|
431
|
-
defaultDuration = 5e3
|
|
458
|
+
defaultDuration = 5e3,
|
|
459
|
+
maxWidth
|
|
432
460
|
}) => {
|
|
433
|
-
const [toasts, setToasts] = (0,
|
|
434
|
-
const
|
|
435
|
-
|
|
436
|
-
);
|
|
437
|
-
const clearTimer = (0, import_react4.useCallback)((id) => {
|
|
438
|
-
const timer = timersRef.current.get(id);
|
|
439
|
-
if (timer) {
|
|
440
|
-
clearTimeout(timer);
|
|
441
|
-
timersRef.current.delete(id);
|
|
442
|
-
}
|
|
461
|
+
const [toasts, setToasts] = (0, import_react5.useState)([]);
|
|
462
|
+
const dismissToast = (0, import_react5.useCallback)((id) => {
|
|
463
|
+
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
|
443
464
|
}, []);
|
|
444
|
-
const
|
|
445
|
-
(id) => {
|
|
446
|
-
clearTimer(id);
|
|
447
|
-
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
|
448
|
-
},
|
|
449
|
-
[clearTimer]
|
|
450
|
-
);
|
|
451
|
-
const dismissAllToasts = (0, import_react4.useCallback)(() => {
|
|
452
|
-
timersRef.current.forEach((_, id) => clearTimer(id));
|
|
465
|
+
const dismissAllToasts = (0, import_react5.useCallback)(() => {
|
|
453
466
|
setToasts([]);
|
|
454
|
-
}, [
|
|
455
|
-
const addToast = (0,
|
|
467
|
+
}, []);
|
|
468
|
+
const addToast = (0, import_react5.useCallback)(
|
|
456
469
|
(options) => {
|
|
457
470
|
const id = generateToastId();
|
|
458
471
|
const duration = options.duration ?? defaultDuration;
|
|
@@ -464,23 +477,11 @@ var ToastProvider = ({
|
|
|
464
477
|
duration
|
|
465
478
|
};
|
|
466
479
|
setToasts((prev) => [...prev, newToast]);
|
|
467
|
-
if (duration > 0) {
|
|
468
|
-
const timer = setTimeout(() => {
|
|
469
|
-
dismissToast(id);
|
|
470
|
-
}, duration);
|
|
471
|
-
timersRef.current.set(id, timer);
|
|
472
|
-
}
|
|
473
480
|
return id;
|
|
474
481
|
},
|
|
475
|
-
[defaultDuration
|
|
482
|
+
[defaultDuration]
|
|
476
483
|
);
|
|
477
|
-
(0,
|
|
478
|
-
return () => {
|
|
479
|
-
timersRef.current.forEach((timer) => clearTimeout(timer));
|
|
480
|
-
timersRef.current.clear();
|
|
481
|
-
};
|
|
482
|
-
}, []);
|
|
483
|
-
const contextValue = (0, import_react4.useMemo)(
|
|
484
|
+
const contextValue = (0, import_react5.useMemo)(
|
|
484
485
|
() => ({
|
|
485
486
|
toasts,
|
|
486
487
|
addToast,
|
|
@@ -496,6 +497,7 @@ var ToastProvider = ({
|
|
|
496
497
|
{
|
|
497
498
|
toasts,
|
|
498
499
|
position,
|
|
500
|
+
maxWidth,
|
|
499
501
|
onDismiss: dismissToast
|
|
500
502
|
}
|
|
501
503
|
)
|
|
@@ -503,50 +505,50 @@ var ToastProvider = ({
|
|
|
503
505
|
};
|
|
504
506
|
|
|
505
507
|
// src/useToast.ts
|
|
506
|
-
var
|
|
508
|
+
var import_react6 = require("react");
|
|
507
509
|
var useToast = () => {
|
|
508
|
-
const context = (0,
|
|
510
|
+
const context = (0, import_react6.useContext)(ToastContext);
|
|
509
511
|
if (!context) {
|
|
510
512
|
throw new Error("useToast must be used within a ToastProvider");
|
|
511
513
|
}
|
|
512
514
|
const { addToast, dismissToast, dismissAllToasts } = context;
|
|
513
|
-
const toast = (0,
|
|
515
|
+
const toast = (0, import_react6.useCallback)(
|
|
514
516
|
(options) => {
|
|
515
517
|
return addToast(options);
|
|
516
518
|
},
|
|
517
519
|
[addToast]
|
|
518
520
|
);
|
|
519
|
-
const success = (0,
|
|
521
|
+
const success = (0, import_react6.useCallback)(
|
|
520
522
|
(message, options) => {
|
|
521
523
|
return addToast({ ...options, message, variant: "success" });
|
|
522
524
|
},
|
|
523
525
|
[addToast]
|
|
524
526
|
);
|
|
525
|
-
const info = (0,
|
|
527
|
+
const info = (0, import_react6.useCallback)(
|
|
526
528
|
(message, options) => {
|
|
527
529
|
return addToast({ ...options, message, variant: "info" });
|
|
528
530
|
},
|
|
529
531
|
[addToast]
|
|
530
532
|
);
|
|
531
|
-
const warning = (0,
|
|
533
|
+
const warning = (0, import_react6.useCallback)(
|
|
532
534
|
(message, options) => {
|
|
533
535
|
return addToast({ ...options, message, variant: "warning" });
|
|
534
536
|
},
|
|
535
537
|
[addToast]
|
|
536
538
|
);
|
|
537
|
-
const error = (0,
|
|
539
|
+
const error = (0, import_react6.useCallback)(
|
|
538
540
|
(message, options) => {
|
|
539
541
|
return addToast({ ...options, message, variant: "error" });
|
|
540
542
|
},
|
|
541
543
|
[addToast]
|
|
542
544
|
);
|
|
543
|
-
const dismiss = (0,
|
|
545
|
+
const dismiss = (0, import_react6.useCallback)(
|
|
544
546
|
(id) => {
|
|
545
547
|
dismissToast(id);
|
|
546
548
|
},
|
|
547
549
|
[dismissToast]
|
|
548
550
|
);
|
|
549
|
-
const dismissAll = (0,
|
|
551
|
+
const dismissAll = (0, import_react6.useCallback)(() => {
|
|
550
552
|
dismissAllToasts();
|
|
551
553
|
}, [dismissAllToasts]);
|
|
552
554
|
return {
|