@shopgate/pwa-ui-material 7.31.4 → 7.31.5-beta.1

package/SnackBar/index.js

@@ -5,10 +5,17 @@ import { config } from 'react-spring';
 import { Spring } from 'react-spring/renderprops.cjs';
 import Ellipsis from '@shopgate/pwa-common/components/Ellipsis';
 import { i18n } from '@shopgate/engage/core/helpers';
+import { useLongPress } from '@shopgate/engage/core/hooks/events';
 import { themeColors, themeShadows } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultToast = {};
+
+// Approximate settle time of the slide-out (config.stiff). The current toast is removed from the
+// queue this long after it starts sliding out, so the exit animation is fully visible before the
+// next toast slides in. Timer-driven removal keeps queue advancement independent of the spring's
+// onRest callback, which fires unreliably during the toast-to-toast handoff.
+const EXIT_ANIMATION_MS = 500;
 const backgroundColor = themeColors.lightDark;
 const buttonColor = themeColors.accent;
 const buttonColorContrast = Color(buttonColor).contrast(Color(backgroundColor));
@@ -94,48 +101,106 @@ const SnackBar = ({
     cx
   } = useStyles();
   const toasts = useMemo(() => toastsProp || [], [toastsProp]);
+  const current = toasts.length ? toasts[0] : null;
+  const currentId = current ? current.id : null;
   const [visible, setVisible] = useState(true);
-  const visibleRef = useRef(visible);
-  const timerRef = useRef(null);
-  useEffect(() => {
-    visibleRef.current = visible;
-  }, [visible]);
+  const autoHideTimer = useRef(null);
+  const exitTimer = useRef(null);
+  const pressingRef = useRef(false);
+
+  // Latest values reachable from the stable timer callbacks below without re-creating them.
+  const durationRef = useRef();
+  durationRef.current = current && current.duration || 2500;
+  const removeToastRef = useRef(removeToast);
+  removeToastRef.current = removeToast;
+
+  // Show whenever there is a toast to display; hide when the queue drains. Reacting to the queue
+  // length is what slides the next toast in after the current one has been removed.
   useEffect(() => {
     setVisible(toasts.length > 0);
   }, [toasts.length]);
+  useEffect(() => () => {
+    clearTimeout(autoHideTimer.current);
+    clearTimeout(exitTimer.current);
+  }, []);
   const snack = useMemo(() => {
-    const raw = toasts.length ? toasts[0] : defaultToast;
+    const raw = current || defaultToast;
     return {
       ...raw,
       message: i18n.text(raw.message || '', raw.messageParams || {}),
       actionLabel: i18n.text(raw.actionLabel || '')
     };
-  }, [toasts]);
+  }, [current]);
+
+  // Slide the current toast out, then advance the queue once the exit animation has played. The
+  // removal is timer-driven (not the spring's onRest), so it fires exactly once for the toast being
+  // dismissed and can't be re-triggered by the spring re-settling as the next toast slides in.
   const hide = useCallback(() => {
-    clearTimeout(timerRef.current);
+    clearTimeout(autoHideTimer.current);
+    clearTimeout(exitTimer.current);
     setVisible(false);
+    exitTimer.current = setTimeout(() => removeToastRef.current(), EXIT_ANIMATION_MS);
   }, []);
+
+  // (Re)starts the auto-hide countdown. Stable identity (reads the duration via a ref), so the
+  // effect below only re-runs when the shown toast actually changes.
+  const scheduleAutoHide = useCallback(() => {
+    clearTimeout(autoHideTimer.current);
+    autoHideTimer.current = setTimeout(hide, durationRef.current);
+  }, [hide]);
+
+  // Start the countdown once per shown toast, keyed on its id — NOT on the spring's onRest. With
+  // `force`, onRest fires on every re-render, so scheduling the auto-hide there restarted the
+  // countdown on each render and could keep a toast on screen far longer than its duration.
+  useEffect(() => {
+    if (!currentId) {
+      return undefined;
+    }
+    scheduleAutoHide();
+    return () => clearTimeout(autoHideTimer.current);
+  }, [currentId, scheduleAutoHide]);
   const handleAction = useCallback(() => {
-    clearTimeout(timerRef.current);
-    if (toasts[0]) {
-      toasts[0].action();
+    current?.action?.();
+    hide();
+  }, [current, hide]);
+  const handleLongPress = useCallback(() => {
+    pressingRef.current = false;
+    if (snack.onLongPress) {
+      snack.onLongPress();
     }
     hide();
-  }, [toasts, hide]);
-  const handleRest = useCallback(() => {
-    if (visibleRef.current) {
-      const duration = toasts[0]?.duration || 2500;
-      timerRef.current = setTimeout(hide, duration);
-    } else {
-      removeToast();
+  }, [snack, hide]);
+
+  // While a long press is held, freeze the auto-hide countdown so the toast can't disappear
+  // mid-press. A press released before the threshold resumes the countdown from the start.
+  const handlePressStart = useCallback(() => {
+    pressingRef.current = true;
+    clearTimeout(autoHideTimer.current);
+  }, []);
+  const handlePressCancel = useCallback(() => {
+    pressingRef.current = false;
+    if (currentId) {
+      scheduleAutoHide();
     }
-  }, [toasts, hide, removeToast]);
+  }, [currentId, scheduleAutoHide]);
+  const longPressHandlers = useLongPress(handleLongPress, {
+    threshold: 4000,
+    onStart: handlePressStart,
+    onCancel: handlePressCancel
+  });
   const {
     action = null,
     actionLabel = null,
-    message = null
+    message = null,
+    onLongPress = null
   } = snack;
-  const boxProps = {
+
+  // A toast is either long-pressable or has a whole-box click action — never both. Attaching both
+  // would let a single long press fire onLongPress (at the threshold) and then handleAction (on the
+  // release click). Long-press takes precedence.
+  const boxProps = onLongPress ? {
+    ...longPressHandlers
+  } : {
     ...(action && !actionLabel && {
       onClick: handleAction
     })
@@ -157,7 +222,6 @@ const SnackBar = ({
       config: config.stiff,
       reverse: !visible,
       force: true,
-      onRest: handleRest,
       children: springProps =>
       /*#__PURE__*/
       // eslint-disable-next-line max-len

package/SnackBar/spec.js

@@ -0,0 +1,293 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import SnackBar from "./index";
+
+// Use the real long-press hook (the barrel would otherwise drag in appEvents/pwa-core).
+import { jsx as _jsx } from "react/jsx-runtime";
+jest.mock('@shopgate/engage/core/hooks/events', () => ({
+  __esModule: true,
+  useLongPress: jest.requireActual('@shopgate/engage/core/hooks/events/useLongPress').default
+}));
+jest.mock('@shopgate/engage/core/helpers', () => ({
+  i18n: {
+    text: input => input || ''
+  }
+}));
+jest.mock('@shopgate/pwa-common/helpers/config', () => ({
+  themeColors: {
+    light: '#ffffff',
+    lightDark: '#333333',
+    accent: '#00aaff'
+  },
+  themeShadows: {
+    toast: 'none'
+  }
+}));
+jest.mock('@shopgate/pwa-common/components/Ellipsis', () => ({
+  __esModule: true,
+  default: ({
+    children
+  }) => children
+}));
+jest.mock('@shopgate/engage/styles', () => ({
+  makeStyles: () => () => () => ({
+    classes: new Proxy({}, {
+      get: (_, prop) => prop
+    }),
+    cx: (...args) => args.filter(Boolean).join(' ')
+  })
+}));
+
+// Render the Spring render-prop child immediately without animating. onRest is fired on a 0ms
+// timer to mirror react-spring calling it after the commit — this drives the auto-hide countdown.
+jest.mock('react-spring', () => ({
+  config: {
+    stiff: {}
+  }
+}));
+jest.mock('react-spring/renderprops.cjs', () => {
+  // eslint-disable-next-line global-require
+  const {
+    useEffect: useSpringEffect
+  } = require('react');
+  return {
+    Spring: ({
+      children,
+      onRest
+    }) => {
+      useSpringEffect(() => {
+        const id = setTimeout(() => onRest && onRest(), 0);
+        return () => clearTimeout(id);
+      });
+      return children({});
+    }
+  };
+});
+describe('<SnackBar />', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+  it('should invoke onLongPress after a long press on a toast that provides one', () => {
+    const onLongPress = jest.fn();
+    const toasts = [{
+      id: 'pipeline.error',
+      message: 'error.general',
+      onLongPress,
+      duration: 5000
+    }];
+    render(/*#__PURE__*/_jsx(SnackBar, {
+      removeToast: jest.fn(),
+      toasts: toasts
+    }));
+    const message = screen.getByText('error.general');
+    fireEvent.mouseDown(message);
+    act(() => {
+      jest.advanceTimersByTime(4000);
+    });
+    fireEvent.mouseUp(message);
+    expect(onLongPress).toHaveBeenCalledTimes(1);
+  });
+  it('should keep the toast open while it is being long-pressed instead of auto-hiding', () => {
+    const onLongPress = jest.fn();
+    const removeToast = jest.fn();
+    const toasts = [{
+      id: 'pipeline.error',
+      message: 'error.general',
+      onLongPress,
+      duration: 2500
+    }];
+    render(/*#__PURE__*/_jsx(SnackBar, {
+      removeToast: removeToast,
+      toasts: toasts
+    }));
+    const message = screen.getByText('error.general');
+    fireEvent.mouseDown(message);
+
+    // Hold well past the toast's 2500ms lifetime: the auto-hide countdown must be frozen, so the
+    // toast neither hides nor gets removed while the press is ongoing.
+    act(() => {
+      jest.advanceTimersByTime(3000);
+    });
+    expect(onLongPress).not.toHaveBeenCalled();
+    expect(removeToast).not.toHaveBeenCalled();
+
+    // The long press still completes at its 4000ms threshold.
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+    expect(onLongPress).toHaveBeenCalledTimes(1);
+  });
+  it('should invoke the pressed toast\'s handler even if the toast is mutated in place mid-press', () => {
+    // ToastProvider updates a same-id toast by mutating it in place, so the long-press must fire
+    // the handler captured when the press started, not whatever toasts[0].onLongPress became.
+    const pressedHandler = jest.fn();
+    const replacementHandler = jest.fn();
+    const toasts = [{
+      id: 'pipeline.error',
+      message: 'error.general',
+      onLongPress: pressedHandler,
+      duration: 5000
+    }];
+    render(/*#__PURE__*/_jsx(SnackBar, {
+      removeToast: jest.fn(),
+      toasts: toasts
+    }));
+    const message = screen.getByText('error.general');
+    fireEvent.mouseDown(message);
+    // A second pipeline error arrives during the press and overwrites the toast's handler in place.
+    toasts[0].onLongPress = replacementHandler;
+    act(() => {
+      jest.advanceTimersByTime(4000);
+    });
+    fireEvent.mouseUp(message);
+    expect(pressedHandler).toHaveBeenCalledTimes(1);
+    expect(replacementHandler).not.toHaveBeenCalled();
+  });
+  it('should not also fire the box click action on a long press when onLongPress is present', () => {
+    const onLongPress = jest.fn();
+    const action = jest.fn();
+    const toasts = [{
+      id: 'pipeline.error',
+      message: 'error.general',
+      onLongPress,
+      action,
+      // no actionLabel → would otherwise become a whole-box onClick
+      duration: 5000
+    }];
+    render(/*#__PURE__*/_jsx(SnackBar, {
+      removeToast: jest.fn(),
+      toasts: toasts
+    }));
+    const message = screen.getByText('error.general');
+    fireEvent.mouseDown(message);
+    act(() => {
+      jest.advanceTimersByTime(4000);
+    });
+    fireEvent.mouseUp(message);
+    // The pointer release also produces a click, which must not run the action too.
+    fireEvent.click(message);
+    expect(onLongPress).toHaveBeenCalledTimes(1);
+    expect(action).not.toHaveBeenCalled();
+  });
+  it('should not invoke onLongPress when the press is released before the threshold', () => {
+    const onLongPress = jest.fn();
+    const toasts = [{
+      id: 'pipeline.error',
+      message: 'error.general',
+      onLongPress,
+      duration: 5000
+    }];
+    render(/*#__PURE__*/_jsx(SnackBar, {
+      removeToast: jest.fn(),
+      toasts: toasts
+    }));
+    const message = screen.getByText('error.general');
+    fireEvent.mouseDown(message);
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+    fireEvent.mouseUp(message);
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+    expect(onLongPress).not.toHaveBeenCalled();
+  });
+  it('should not attach long-press handlers when the toast has no onLongPress', () => {
+    const toasts = [{
+      id: 'pipeline.error',
+      message: 'error.general',
+      duration: 5000
+    }];
+    render(/*#__PURE__*/_jsx(SnackBar, {
+      removeToast: jest.fn(),
+      toasts: toasts
+    }));
+
+    // A long press must be a no-op (and must not throw) when no handler is provided.
+    const message = screen.getByText('error.general');
+    fireEvent.mouseDown(message);
+    expect(() => act(() => {
+      jest.advanceTimersByTime(500);
+    })).not.toThrow();
+  });
+  it('should play each queued toast in turn — the second is not skipped or instantly removed', () => {
+    // Mirrors ToastProvider: a FIFO queue whose head is dropped (immutably) on removeToast.
+    const Harness = () => {
+      const [toasts, setToasts] = useState([{
+        id: 'a',
+        message: 'first.toast',
+        duration: 2500
+      }, {
+        id: 'b',
+        message: 'second.toast',
+        duration: 2500
+      }]);
+      const removeToast = useCallback(() => setToasts(t => t.slice(1)), []);
+      if (!toasts.length) return null;
+      return /*#__PURE__*/_jsx(SnackBar, {
+        removeToast: removeToast,
+        toasts: toasts
+      });
+    };
+    render(/*#__PURE__*/_jsx(Harness, {}));
+
+    // First toast is shown; the second is still queued, not yet rendered.
+    expect(screen.getByText('first.toast')).toBeTruthy();
+    expect(screen.queryByText('second.toast')).toBe(null);
+
+    // First toast dwells (2500ms), then slides out and is removed after the exit animation.
+    act(() => {
+      jest.advanceTimersByTime(2500 + 600);
+    });
+
+    // The second toast is now on screen — it got its turn rather than being dropped instantly.
+    expect(screen.getByText('second.toast')).toBeTruthy();
+    expect(screen.queryByText('first.toast')).toBe(null);
+
+    // It in turn dwells and is removed, draining the queue.
+    act(() => {
+      jest.advanceTimersByTime(2500 + 600);
+    });
+    expect(screen.queryByText('second.toast')).toBe(null);
+  });
+  it('auto-hides within its duration even when the parent re-renders repeatedly', () => {
+    // The spring re-settles (and fires onRest) on every render because of `force`. The auto-hide
+    // countdown must therefore NOT be tied to onRest, or frequent parent re-renders would keep
+    // resetting it and the toast would outlive its duration.
+    const removeToast = jest.fn();
+    const Harness = () => {
+      const [, tick] = useState(0);
+      useEffect(() => {
+        const id = setInterval(() => tick(n => n + 1), 500); // re-render every 500ms (< duration)
+        return () => clearInterval(id);
+      }, []);
+      const toasts = [{
+        id: 'a',
+        message: 'error.general',
+        duration: 2500
+      }];
+      return /*#__PURE__*/_jsx(SnackBar, {
+        removeToast: removeToast,
+        toasts: toasts
+      });
+    };
+    render(/*#__PURE__*/_jsx(Harness, {}));
+
+    // Not yet gone before its duration elapses.
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+    expect(removeToast).not.toHaveBeenCalled();
+
+    // Removed shortly after its duration (dwell + exit animation), despite the periodic re-renders.
+    act(() => {
+      jest.advanceTimersByTime(500 + 600);
+    });
+    expect(removeToast).toHaveBeenCalledTimes(1);
+  });
+});

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@shopgate/pwa-ui-material",
-  "version": "7.31.4",
+  "version": "7.31.5-beta.1",
   "description": "Shopgate's material design UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.31.4",
+    "@shopgate/pwa-common": "7.31.5-beta.1",
     "@types/color": "^4.2.0",
     "@types/react-transition-group": "^4.4.12",
     "react": "^17.0.2",