@transferwise/components 0.0.0-experimental-def0600 → 0.0.0-experimental-f4ca4fa

package/src/Snackbar/useSnackbarSwipeDismiss.ts

@@ -0,0 +1,169 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import { SNACKBAR_SWIPE_DISMISS_THRESHOLD } from './constants';
+
+const DISMISS_CLASS = 'wds-Snackbar--swipe-dismiss';
+const SETTLE_CLASS = 'wds-Snackbar--swipe-settle';
+
+type SwipePointer = {
+  id: number;
+  target: Element;
+  startX: number;
+  startY: number;
+  threshold: number;
+};
+
+/**
+ * Captures one primary pointer and follows downward, mostly vertical movement without re-rendering.
+ * Release dismisses at half the surface height; shorter/cancelled gestures settle back into place.
+ * The outer wrapper moves independently of entry/exit motion, and a committed swipe consumes its
+ * follow-up click so dragging from the action cannot activate it.
+ */
+const useSnackbarSwipeDismiss = ({
+  onDismissRequest,
+  onSwipeChange,
+  visible,
+}: {
+  onDismissRequest: () => void;
+  /** Reports when a gesture starts and ends so auto-dismiss can pause beneath the pointer. */
+  onSwipeChange: (swiping: boolean) => void;
+  visible: boolean;
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const pointerRef = useRef<SwipePointer | null>(null);
+  const suppressClick = useRef(false);
+
+  const clearSwipePosition = useCallback(() => {
+    const pointer = pointerRef.current;
+    pointerRef.current = null;
+    if (pointer) {
+      if (pointer.target.hasPointerCapture?.(pointer.id)) {
+        pointer.target.releasePointerCapture(pointer.id);
+      }
+      onSwipeChange(false);
+    }
+    suppressClick.current = false;
+    containerRef.current?.classList.remove(DISMISS_CLASS, SETTLE_CLASS);
+    containerRef.current?.style.removeProperty('transform');
+  }, [onSwipeChange]);
+
+  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0 || !event.isPrimary || pointerRef.current) {
+      return;
+    }
+
+    clearSwipePosition();
+    const target = event.target as Element;
+    target.setPointerCapture?.(event.pointerId);
+    pointerRef.current = {
+      id: event.pointerId,
+      target,
+      startX: event.clientX,
+      startY: event.clientY,
+      threshold: event.currentTarget.offsetHeight * SNACKBAR_SWIPE_DISMISS_THRESHOLD,
+    };
+    onSwipeChange(true);
+  };
+
+  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+    const pointer = pointerRef.current;
+    if (pointer?.id !== event.pointerId) {
+      return;
+    }
+
+    const offsetY = event.clientY - pointer.startY;
+    const offsetX = event.clientX - pointer.startX;
+    if (offsetY > 0 && offsetY > Math.abs(offsetX)) {
+      containerRef.current?.style.setProperty('transform', `translateY(${offsetY}px)`);
+    } else {
+      containerRef.current?.style.removeProperty('transform');
+    }
+  };
+
+  const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
+    const pointer = pointerRef.current;
+    if (pointer?.id !== event.pointerId) {
+      return;
+    }
+
+    const offsetY = event.clientY - pointer.startY;
+    const offsetX = event.clientX - pointer.startX;
+    const container = containerRef.current;
+    const bounds = pointer.target.closest('a, button')?.getBoundingClientRect();
+    clearSwipePosition();
+
+    if (offsetY >= pointer.threshold && offsetY > Math.abs(offsetX)) {
+      if (container) {
+        // Include wrapper padding and the safe area, not only the surface, to clear the viewport.
+        container.classList.add(DISMISS_CLASS);
+        container.style.setProperty(
+          'transform',
+          `translateY(${Math.max(offsetY, container.offsetHeight)}px)`,
+        );
+      }
+      suppressClick.current = true;
+      onDismissRequest();
+    } else {
+      // Capture retargets clicks to the pressed control even when released outside it.
+      suppressClick.current =
+        !!bounds &&
+        (offsetX !== 0 || offsetY !== 0) &&
+        (event.clientX < bounds.left ||
+          event.clientX > bounds.right ||
+          event.clientY < bounds.top ||
+          event.clientY > bounds.bottom);
+      container?.classList.add(SETTLE_CLASS);
+    }
+  };
+
+  const handlePointerCancel = useCallback(
+    (event: Pick<PointerEvent, 'pointerId'>) => {
+      if (pointerRef.current?.id !== event.pointerId) {
+        return;
+      }
+
+      clearSwipePosition();
+      containerRef.current?.classList.add(SETTLE_CLASS);
+    },
+    [clearSwipePosition],
+  );
+
+  useEffect(() => {
+    if (visible) {
+      clearSwipePosition();
+    } else if (pointerRef.current) {
+      // An exit starting mid-gesture (timeout, Escape, replacement) ends it without dismissing again.
+      handlePointerCancel({ pointerId: pointerRef.current.id });
+    }
+  }, [visible, clearSwipePosition, handlePointerCancel]);
+
+  useEffect(() => {
+    // Removed descendants report capture loss on their document, not the Snackbar surface.
+    const ownerDocument = containerRef.current?.ownerDocument;
+    ownerDocument?.addEventListener('lostpointercapture', handlePointerCancel);
+    return () => {
+      ownerDocument?.removeEventListener('lostpointercapture', handlePointerCancel);
+      clearSwipePosition();
+    };
+  }, [clearSwipePosition, handlePointerCancel]);
+
+  const handleClickCapture = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (suppressClick.current && event.detail > 0) {
+      suppressClick.current = false;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
+  return {
+    clearSwipePosition,
+    containerRef,
+    handleClickCapture,
+    handlePointerCancel,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+  };
+};
+
+export default useSnackbarSwipeDismiss;

package/src/i18n/en.json

@@ -38,6 +38,7 @@
   "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefix",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",
+  "neptune.Snackbar.escapeDismissHint": "Press Escape to dismiss.",
   "neptune.StatusIcon.iconLabel.error": "Error:",
   "neptune.StatusIcon.iconLabel.information": "Information:",
   "neptune.StatusIcon.iconLabel.pending": "Pending:",

package/src/index.ts

@@ -146,7 +146,7 @@ export type {
   SelectProps,
 } from './_deprecated/Select';
 export type { SlidingPanelProps } from './SlidingPanel';
-export type { SnackbarProps, SnackbarProviderProps } from './Snackbar';
+export type { SnackbarCreationProps, SnackbarProviderProps } from './Snackbar';
 export type { SnackbarContextType } from './Snackbar/SnackbarContext';
 export type { StatusIconProps, StatusIconSentiment } from './StatusIcon';
 export type { StickyProps } from './Sticky';

package/src/main.css

@@ -26948,15 +26948,14 @@ a[data-toggle="tooltip"] {
   color: var(--color-white);
 }
 .np-icon-button-minimal-default {
-  color: var(--color-interactive-primary);
-  background-color: var(--color-background-screen);
+  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
   background-color: transparent;
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-screen-hover);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-hover));
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-screen-active));
 }
 .np-icon-button-secondary-default {
   color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
@@ -31516,75 +31515,138 @@ button.np-link {
 [dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-left {
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }
-.snackbar {
-  text-align: center;
+.wds-Snackbar {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: var(--size-16);
+  padding-block-end: calc(var(--size-16) + env(safe-area-inset-bottom));
   position: fixed;
   inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
+  inset-inline: 0;
   z-index: 1060;
 }
-.snackbar__text {
-  background: #37517e;
-  color: #ffffff;
-  display: inline-flex;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  align-items: center;
-  justify-content: space-between;
+@media (min-width: 600px) {
+  .wds-Snackbar {
+    padding-block-end: var(--size-24);
+  }
+}
+.wds-Snackbar--swipe-dismiss {
+  transition: transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+.wds-Snackbar--swipe-settle {
+  transition: transform var(--Snackbar-exit-duration) cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-container {
+  --Prompt-border-radius: var(--radius-medium);
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
+  box-sizing: border-box;
+  max-inline-size: 480px;
   text-align: start;
-  font-size: var(--wds-font-size-body);
-  margin-block: 0;
-  margin-inline: var(--size-16);
-  padding-block: var(--size-8);
-  padding-inline: var(--size-16);
-  inline-size: calc(100% - var(--size-32));
-  transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  cursor: grab;
+  touch-action: pan-x pinch-zoom;
 }
-.np-theme-personal .snackbar__text {
-  box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
-  position: relative;
-  background: var(--color-contrast-theme);
-  border-radius: var(--radius-small);
-  color: var(--color-contrast-overlay);
+.wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto minmax(0, 1fr);
 }
-.np-theme-personal .snackbar__text::after {
-  display: block;
-  border-radius: inherit;
-  block-size: 100%;
-  inline-size: 100%;
-  content: "";
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  z-index: -1;
-  background-color: var(--color-background-neutral);
+@media (min-width: 600px) {
+  .wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
 }
-.np-theme-personal--dark .snackbar__text,
-.np-theme-personal--forest-green .snackbar__text {
-  box-shadow: none;
+.wds-Snackbar-container .wds-prompt__media-wrapper {
+  display: flex;
+  align-items: center;
+  min-block-size: max(var(--size-32), 1lh);
+  padding-block-start: 0;
+  color: var(--color-sentiment-content-primary);
+}
+.wds-Snackbar-container .wds-prompt__media-wrapper:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
+  min-block-size: max(var(--size-32), calc(1lh + var(--size-5) * 2));
+}
+.wds-Snackbar__media-asset {
+  display: flex;
+}
+.wds-Snackbar__media-asset svg {
+  inline-size: var(--size-24);
+  block-size: var(--size-24);
+}
+.wds-Snackbar__process-indicator .process-circle {
+  stroke: currentColor;
+}
+.wds-Snackbar-container .wds-prompt__dismiss {
+  display: none;
+  align-self: flex-start;
+  margin-block-start: calc(var(--size-4) - 1px);
 }
 @media (min-width: 600px) {
-  .snackbar__text {
-    inline-size: auto;
-    max-inline-size: 600px;
+  .wds-Snackbar-container .wds-prompt__dismiss {
+    display: flex;
   }
 }
-.snackbar__text__action {
+.wds-Snackbar__action {
   flex-shrink: 0;
-  margin-inline-start: var(--size-16);
 }
-.snackbar__text-container-enter,
-.snackbar__text-container-exit {
-  transform: translateY(calc(100% + 10px));
+.wds-Snackbar__content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--size-8);
+  flex: 1 0 0;
+  min-block-size: var(--size-32);
+  min-inline-size: 0;
+}
+.wds-Snackbar__message {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  inline-size: auto;
+  flex: 1 0 0;
+  min-inline-size: 0;
+  align-self: stretch;
+}
+.wds-Snackbar__body {
+  display: block;
 }
-.snackbar__text-container-enter-active {
-  transform: translateY(-16px);
-  transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
+.wds-Snackbar-container-appear,
+.wds-Snackbar-container-enter {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
 }
-@media (min-width: 600px) {
-  .snackbar__text-container-enter-active {
-    transform: translateY(-24px);
+.wds-Snackbar-container-appear-active,
+.wds-Snackbar-container-enter-active {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition: opacity 150ms linear, transform var(--Snackbar-enter-duration) cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-container-exit {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.wds-Snackbar-container-exit-active {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+  transition: opacity 50ms linear 50ms, transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-Snackbar--swipe-dismiss,
+  .wds-Snackbar--swipe-settle {
+    transition: none;
+  }
+  .wds-Snackbar-container-appear,
+  .wds-Snackbar-container-appear-active,
+  .wds-Snackbar-container-enter,
+  .wds-Snackbar-container-enter-active,
+  .wds-Snackbar-container-exit {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  .wds-Snackbar-container-exit-active {
+    opacity: 0;
+    transform: none;
+    transition: none;
   }
 }
 .status-circle.negative,