@astryxdesign/core 0.5.0 → 0.5.1-canary.f64186a

package/src/Toast/Toast.tsx

@@ -2,6 +2,21 @@
 
 'use client';
 
+/**
+ * @file Toast.tsx
+ * @input Uses React timers, touch/pen gesture events, Toast options, Button/Icon,
+ *   MediaTheme, tokens, and placement motion inherited from ToastViewport
+ * @output Exports the rendered Toast surface and its pause/swipe/dismiss behavior
+ * @position Core implementation; rendered by ToastViewport and documented by Toast.doc.mjs
+ *
+ * SYNC: When Toast layout, timer pause, media theme, or dismissal behavior changes,
+ *   update these files to stay in sync:
+ * - /packages/core/src/Toast/ToastViewport.test.tsx
+ * - /packages/core/src/Toast/Toast.doc.mjs
+ * - /apps/storybook/stories/Toast.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/Toast/ (showcase blocks)
+ */
+
 import {useCallback, useEffect, useRef} from 'react';
 import type {ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -18,25 +33,53 @@ import {
   typeScaleDefaults,
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
+import {INTERACTIVE_SELECTORS} from '../hooks/useClickableContainer';
 import {useTheme} from '../theme';
 import {MediaTheme} from '../theme/MediaTheme';
-import type {ToastType, ToastDismissReason} from './types';
+import type {
+  ToastType,
+  ToastDismissReason,
+  ToastContentRenderFn,
+} from './types';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
+import {useToastGesture, type ToastGestureDirection} from './useToastGesture';
+
+const SWIPE_INTERACTIVE_TARGET_SELECTOR = `${INTERACTIVE_SELECTORS},[tabindex],[contenteditable]:not([contenteditable="false"])`;
+
+function isInteractiveTarget(
+  target: EventTarget | null,
+  root: HTMLElement,
+): boolean {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  let current: Element | null = target;
+  while (current != null && current !== root && current !== document.body) {
+    if (current.matches(SWIPE_INTERACTIVE_TARGET_SELECTOR)) {
+      return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
 
+const TOAST_EDGE_DRIFT = spacingVars['--spacing-2'];
 const styles = stylex.create({
   root: {
     paddingBlock: spacingVars['--spacing-4'],
     paddingInline: spacingVars['--spacing-4'],
     borderRadius: radiusVars['--radius-container'],
+    boxSizing: 'border-box',
     width: 400,
-    maxWidth: 'min(100%, calc(100vw - 32px))',
+    maxWidth: '100%',
     boxShadow: shadowVars['--shadow-med'],
-    opacity: 1,
+    opacity: 'var(--_toast-swipe-opacity, 1)',
     fontFamily: typographyVars['--font-family-body'],
     fontSize: typeScaleDefaults['--text-body-size'],
     lineHeight: typeScaleDefaults['--text-body-leading'],
-    transform: 'translateY(0)',
+    transform:
+      'translateY(var(--_toast-swipe-y, 0px)) scale(var(--_toast-swipe-scale, 1))',
     transitionProperty: 'opacity, transform',
     transitionDuration: {
       default: durationVars['--duration-fast'],
@@ -45,15 +88,17 @@ const styles = stylex.create({
     transitionTimingFunction: easeVars['--ease-standard'],
     '@starting-style': {
       opacity: 0,
-      transform: 'translateY(8px)',
+      transform: `translateY(var(--_toast-slide-y, ${TOAST_EDGE_DRIFT}))`,
     },
   },
   variantDefault: {
     backgroundColor: colorVars['--color-background-inverted'],
   },
+
   inner: {
     display: 'flex',
     alignItems: 'flex-start',
+    flexWrap: 'nowrap',
     gap: spacingVars['--spacing-3'],
     width: '100%',
   },
@@ -63,17 +108,22 @@ const styles = stylex.create({
   content: {
     flex: 1,
     minWidth: 0,
+    overflowWrap: 'anywhere',
   },
   exiting: {
     opacity: 0,
-    transform: 'translateY(-8px)',
+    transform: `translateY(var(--_toast-swipe-exit-y, var(--_toast-swipe-y, var(--_toast-slide-y, ${TOAST_EDGE_DRIFT})))) scale(var(--_toast-swipe-scale, 1))`,
   },
   endContent: {
     flexShrink: 0,
     display: 'flex',
     alignItems: 'center',
     gap: spacingVars['--spacing-2'],
-    marginBlock: `calc(${spacingVars['--spacing-1']} * -1)`,
+    // Keep every trailing control centered on the first 20px body line, even
+    // when the body wraps or a consumer supplies a control taller than the
+    // built-in 28px dismiss button. The action label should still stay short;
+    // the wrappers above let it break rather than widen the Toast.
+    blockSize: `calc(${typeScaleDefaults['--text-body-size']} * ${typeScaleDefaults['--text-body-leading']})`,
     marginInlineEnd: `calc(${spacingVars['--spacing-1']} * -1)`,
   },
 });
@@ -86,6 +136,16 @@ export interface ToastProps {
   autoHideDuration: number;
   isExiting?: boolean;
   onDismiss: (reason: ToastDismissReason) => void;
+  /**
+   * Replaces the content of this toast's card with your own layout. Direct
+   * `Toast` renders use the same contract as `ToastOptions.renderContent`;
+   * apps normally set it per toast in the options passed to `useToast()`.
+   */
+  renderContent?: ToastContentRenderFn;
+}
+
+interface ToastSurfaceProps extends ToastProps {
+  gestureDirection: ToastGestureDirection;
 }
 
 /**
@@ -108,7 +168,11 @@ export interface ToastProps {
  * />
  * ```
  */
-export function Toast({
+export function Toast(props: ToastProps) {
+  return <ToastSurface {...props} gestureDirection={1} />;
+}
+
+export function ToastSurface({
   type,
   body,
   endContent,
@@ -116,7 +180,9 @@ export function Toast({
   autoHideDuration,
   isExiting = false,
   onDismiss,
-}: ToastProps) {
+  renderContent,
+  gestureDirection,
+}: ToastSurfaceProps) {
   const t = useTranslator();
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const isPausedRef = useRef(false);
@@ -192,6 +258,21 @@ export function Toast({
     };
   }, [isAutoHide, pauseTimer, resumeTimer]);
 
+  const isTimerPaused = useCallback(() => isPausedRef.current, []);
+  const dismissFromGesture = useCallback(() => {
+    onDismissRef.current('manual');
+  }, []);
+  const {rootRef, bindings: gestureBindings} = useToastGesture({
+    direction: gestureDirection,
+    enabled: !isExiting,
+    canPauseTimer: isAutoHide,
+    isTimerPaused,
+    pauseTimer,
+    resumeTimer,
+    dismiss: dismissFromGesture,
+    shouldIgnoreTarget: isInteractiveTarget,
+  });
+
   const handleDismiss = useCallback(() => {
     onDismiss('manual');
   }, [onDismiss]);
@@ -205,6 +286,7 @@ export function Toast({
 
   return (
     <div
+      ref={rootRef}
       role={isError ? 'alert' : 'status'}
       aria-live={isError ? 'assertive' : 'polite'}
       aria-atomic="true"
@@ -212,6 +294,7 @@ export function Toast({
       onMouseLeave={resumeTimer}
       onFocusCapture={pauseTimer}
       onBlurCapture={resumeTimer}
+      {...gestureBindings}
       {...mergeProps(
         themeProps('toast', {type}),
         stylex.props(
@@ -221,24 +304,36 @@ export function Toast({
         ),
       )}>
       <MediaTheme mode="auto" fallback={fallbackMediaMode}>
-        <div {...stylex.props(styles.inner)}>
-          <div {...stylex.props(styles.content)}>{body}</div>
-
-          <div {...stylex.props(styles.endContent)}>
-            {endContent}
-            <Button
-              variant="ghost"
-              size="sm"
-              icon={<Icon icon="close" size="sm" color="inherit" />}
-              label={t('@astryx.toast.dismiss')}
-              onClick={handleDismiss}
-              isIconOnly
-            />
+        {renderContent ? (
+          renderContent({
+            body,
+            endContent,
+            type,
+            isAutoHide,
+            autoHideDuration,
+            dismiss: handleDismiss,
+          })
+        ) : (
+          <div {...stylex.props(styles.inner)}>
+            <div {...stylex.props(styles.content)}>{body}</div>
+
+            <div {...stylex.props(styles.endContent)}>
+              {endContent}
+              <Button
+                variant="ghost"
+                size="sm"
+                icon={<Icon icon="close" size="sm" color="inherit" />}
+                label={t('@astryx.toast.dismiss')}
+                onClick={handleDismiss}
+                isIconOnly
+              />
+            </div>
           </div>
-        </div>
+        )}
       </MediaTheme>
     </div>
   );
 }
 
 Toast.displayName = 'Toast';
+ToastSurface.displayName = 'ToastSurface';