@transferwise/components 0.0.0-experimental-c20c070 → 0.0.0-experimental-b2b287d

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/_deprecated/Select/Select.tsx

@@ -141,7 +141,7 @@ export interface SelectProps {
 const defaultClassNames = {};
 
 /**
- * @deprecated Use `SelectInput` instead (https://storybook.wise.design/?path=/docs/forms-selectinput--docs)
+ * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
  */
 export default function Select({
   placeholder,

package/src/_deprecated/Select/_stories/Select.story.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import Select, { SelectItem, SelectOptionItem } from '..';
 
 /**
- * @deprecated Use **`SelectInput`** instead <br/> [https://storybook.wise.design/?path=/docs/forms-selectinput--docs](https://storybook.wise.design/?path=/docs/forms-selectinput--docs)
+ * @deprecated Use **`SelectInput`** instead <br/> [https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput](https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
  */
 const meta: Meta<typeof Select> = {
   component: Select,

package/src/common/BottomSheet/BottomSheet.tsx

@@ -36,7 +36,9 @@ export type BottomSheetProps = PropsWithChildren<
 >;
 
 /**
- * Design guidance: https://docs.wise.design/components/bottom-sheet/
+ * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/
+ *
+ * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
 const BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {

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

@@ -135,7 +135,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

@@ -31322,75 +31322,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;
 }
-.snackbar__text-container-enter-active {
-  transform: translateY(-16px);
-  transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
+.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;
 }
-@media (min-width: 600px) {
-  .snackbar__text-container-enter-active {
-    transform: translateY(-24px);
+.wds-Snackbar__body {
+  display: block;
+}
+.wds-Snackbar-container-appear,
+.wds-Snackbar-container-enter {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+}
+.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,

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.docs.mdx

@@ -1,122 +0,0 @@
-import { Meta, Source } from '@storybook/addon-docs/blocks';
-
-<Meta title="Prompts/CriticalBanner/Developer Guide" tags={['new']} />
-
-# Developer Guide
-
-**Note:** Any usages of `Layout`, `Flow` or `HashRouterFlow` rely on the `global-critical-banner` feature flag being enabled. Whilst this flag is currently disabled in production, it's recommended to test with this flag enabled in staging, to ensure the critical banner behaves as expected for your users.
-
-Typically `CriticalBanner` should be used in one of three ways. Pick the one that matches the page or flow you're building and avoid using CriticalBanner as a standalone component.
-
-- `Layout` via `@transferwise/navigation-ui` - Fetched automatically from navigation-service (for non-flow layouts)
-- `Flow` / `HashRouterFlow` via `@transferwise/flow` - Fetched automatically from navigation-service (for flows)
-- `FlowNavigation` via `@transferwise/components` - Passed in by you through the `banner` prop (for custom solutions)
-
-If your page uses `Layout`, `Flow` or `HashRouterFlow`, you don't need to render `CriticalBanner` yourself. These components fetch the banner, cache it and render it for you automatically.
-
-## Layout from @transferwise/navigation-ui
-
-`Layout` has no banner prop. It fetches the critical banner from navigation-service on the client and renders it above the page content.
-
-Requirements:
-
-- `@transferwise/navigation-ui` `4.46.0` or later
-- The page must use the composable layout, and `global-critical-banner` feature flags in navigation-service control this. The legacy layout doesn't render the banner.
-
-<Source
-  code={`import { Layout, fetchNavigationData, type NavigationData } from '@transferwise/navigation-ui';
-
-// Optional: fetch initial navigation data server side, so the banner cache is scoped correctly.
-export const getServerSideProps = async () => {
-    const navigationData = await fetchNavigationData({
-      httpClient,
-      navigationServiceUrl: process.env.NAVIGATION_SERVICE_URL,
-    });
-
-    return { props: { navigationData } };
-};
-
-const Page = ({ navigationData }: { navigationData: NavigationData }) => (
-    <Layout navigationData={navigationData} onMixpanelEvent={trackEvent}>
-      { /* Page content */ }
-    </Layout>
-);
-`}
-  language="typescript"
-  dark
-/>
-
-`Layout` also handles:
-
-- saving the collapsed or expanded state when the user toggles the banner
-- caching the banner for the session, so the entry animation only plays for new or changed banners
-- sending Mixpanel events for toggles and action clicks through `onMixpanelEvent`
-
-
-## Flow / HashRouterFlow from @transferwise/flow
-
-`Flow` and `HashRouterFlow`, from `@transferwise/flow` render `FlowNavigationWrapper` from `@transferwise/navigation-ui`. It fetches, caches and renders the critical banner the same way `Layout` does. You don't need to pass a banner, but do require `@transferwise/navigation-ui` as a dependency.
-
-Requirements:
-
-- `@transferwise/flow` `13.0.0` or later
-- `@transferwise/navigation-ui` `4.51.0` or later, which is a required peer dependency
-
-You can pass two optional properties in the `navigation` options:
-
-- `navigationData`: initial navigation data, usually fetched server side, so the banner cache is scoped correctly. If you leave it out, the banner is fetched on the client.
-- `onMixpanelEvent`: called when the user toggles the banner or clicks its action.
-
-<Source
-  code={`import { HashRouterFlow } from '@transferwise/flow';
-import type { NavigationData } from '@transferwise/navigation-ui';
-
-const SendFlow = ({ navigationData }: { navigationData?: NavigationData }) => (
-    <HashRouterFlow
-      steps={steps}
-      trackEvent={trackEvent}
-      navigation={{
-      profile,
-      onClose,
-      navigationData,
-      onMixpanelEvent: trackEvent,
-      }}
-    />
-);
-`}
-  language="typescript"
-  dark
-/>
-
-## FlowNavigation from @transferwise/components
-
-`FlowNavigation` from `@transferwise/components` renders a critical banner above the navigation when you pass a `banner` prop. Use this if you build your flow with `FlowNavigation` directly. You're responsible for getting the banner data.
-
-`banner` accepts either:
-
-- `CriticalBannerProps`, the same props `CriticalBanner` takes
-- the legacy `CriticalBannerData` shape returned by navigation-service. `FlowNavigation` maps it to `CriticalBannerProps` for you.
-
-<Source
-  code={`import { FlowNavigation, type CriticalBannerProps } from '@transferwise/components';
-
-    const banner: CriticalBannerProps = {
-      sentiment: 'negative',
-      title: 'Action required',
-      description: 'Please verify your identity to continue with this transfer.',
-      action: { label: 'Verify now', onClick: handleVerify },
-    };
-
-    <FlowNavigation
-      banner={banner}
-      steps={steps}
-      activeStep={activeStep}
-      avatar={avatar}
-      onClose={onClose}
-    />;
-`}
-  language="typescript"
-  dark
-/>
-
-Requires `@transferwise/components` `46.162.0` or later. Support for the legacy `CriticalBannerData` shape was added in `46.164.0`.