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

package/SnackBar/index.js

@@ -5,17 +5,10 @@ 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));
@@ -101,106 +94,48 @@ 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 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.
+  const visibleRef = useRef(visible);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    visibleRef.current = visible;
+  }, [visible]);
   useEffect(() => {
     setVisible(toasts.length > 0);
   }, [toasts.length]);
-  useEffect(() => () => {
-    clearTimeout(autoHideTimer.current);
-    clearTimeout(exitTimer.current);
-  }, []);
   const snack = useMemo(() => {
-    const raw = current || defaultToast;
+    const raw = toasts.length ? toasts[0] : defaultToast;
     return {
       ...raw,
       message: i18n.text(raw.message || '', raw.messageParams || {}),
       actionLabel: i18n.text(raw.actionLabel || '')
     };
-  }, [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.
+  }, [toasts]);
   const hide = useCallback(() => {
-    clearTimeout(autoHideTimer.current);
-    clearTimeout(exitTimer.current);
+    clearTimeout(timerRef.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(() => {
-    current?.action?.();
-    hide();
-  }, [current, hide]);
-  const handleLongPress = useCallback(() => {
-    pressingRef.current = false;
-    if (snack.onLongPress) {
-      snack.onLongPress();
+    clearTimeout(timerRef.current);
+    if (toasts[0]) {
+      toasts[0].action();
     }
     hide();
-  }, [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]);
+  const handleRest = useCallback(() => {
+    if (visibleRef.current) {
+      const duration = toasts[0]?.duration || 2500;
+      timerRef.current = setTimeout(hide, duration);
+    } else {
+      removeToast();
     }
-  }, [currentId, scheduleAutoHide]);
-  const longPressHandlers = useLongPress(handleLongPress, {
-    threshold: 4000,
-    onStart: handlePressStart,
-    onCancel: handlePressCancel
-  });
+  }, [toasts, hide, removeToast]);
   const {
     action = null,
     actionLabel = null,
-    message = null,
-    onLongPress = null
+    message = null
   } = snack;
-
-  // 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
-  } : {
+  const boxProps = {
     ...(action && !actionLabel && {
       onClick: handleAction
     })
@@ -222,6 +157,7 @@ const SnackBar = ({
       config: config.stiff,
       reverse: !visible,
       force: true,
+      onRest: handleRest,
       children: springProps =>
       /*#__PURE__*/
       // eslint-disable-next-line max-len

package/package.json

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

package/SnackBar/spec.js

@@ -1,293 +0,0 @@
-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);
-  });
-});