@shopgate/pwa-ui-material 7.32.0-beta.2 → 7.32.0-beta.21

package/AppBar/components/Title/index.js

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
+import htmlToText from '@shopgate/pwa-common/helpers/html/htmlToText';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
@@ -25,7 +26,10 @@ const AppBarTitle = ({
     classes,
     cx
   } = useStyles();
-  if (!title) {
+  // Titles can contain HTML entities (e.g. product names). They are decoded to plain text, since
+  // titles might originate from untrusted sources like URL parameters and must not render as HTML.
+  const text = useMemo(() => htmlToText(title), [title]);
+  if (!text) {
     return null;
   }
   return /*#__PURE__*/_jsx(Typography, {
@@ -36,15 +40,13 @@ const AppBarTitle = ({
     role: "heading",
     "aria-labelledby": "titleLabel",
     "aria-level": "1",
-    "data-test-id": `title: ${title}`,
+    "data-test-id": `title: ${text}`,
     tabIndex: -1,
     children: /*#__PURE__*/_jsx("span", {
       role: "presentation",
       onClick: onClick,
       id: "titleLabel",
-      dangerouslySetInnerHTML: {
-        __html: title
-      }
+      children: text
     })
   });
 };

package/BaseDialog/components/Buttons/index.js

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { I18n, Button } from '@shopgate/engage/components';
+import { I18n } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -27,8 +28,8 @@ const Buttons = ({
     disabled = false
   }) => /*#__PURE__*/_jsx(Button, {
     className: classes.button,
-    flat: true,
-    type: "primary",
+    variant: "text",
+    color: "secondary",
     onClick: action,
     disabled: disabled,
     children: /*#__PURE__*/_jsx(I18n.Text, {

package/SnackBar/index.js

@@ -4,9 +4,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 { Button } from '@shopgate/engage/components/v2';
 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 useStyles = makeStyles()(theme => ({
   container: {
     position: 'fixed',
@@ -48,12 +56,8 @@ const useStyles = makeStyles()(theme => ({
     overflow: 'hidden'
   },
   actionButton: {
-    color: theme.palette.secondary.main,
-    fontWeight: theme.typography.fontWeightMedium,
-    height: 36,
-    letterSpacing: 'inherit',
     margin: '0 -8px 0 8px',
-    outline: 0,
+    minWidth: 0,
     padding: '0 8px',
     textTransform: 'uppercase'
   }
@@ -88,48 +92,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
     })
@@ -151,7 +213,6 @@ const SnackBar = ({
       config: config.stiff,
       reverse: !visible,
       force: true,
-      onRest: handleRest,
       children: springProps =>
       /*#__PURE__*/
       // eslint-disable-next-line max-len
@@ -172,10 +233,12 @@ const SnackBar = ({
               role: "status",
               children: message
             })
-          }), action && actionLabel && /*#__PURE__*/_jsx("button", {
+          }), action && actionLabel && /*#__PURE__*/_jsx(Button, {
             className: classes.actionButton,
+            variant: "text",
+            size: "small",
+            color: "secondary",
             onClick: handleAction,
-            type: "button",
             "aria-hidden": true,
             children: actionLabel
           })]

package/package.json

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

package/Accordion/components/AccordionContent/spec.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import AccordionContent from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock('react-spring', () => ({
-  ...jest.requireActual('react-spring'),
-  useSpring: jest.fn().mockReturnValue({
-    hook: 'useSpring return value'
-  })
-}));
-describe('<AccordionContent />', () => {
-  it('should render as closed', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(AccordionContent, {
-      id: "some-id",
-      children: /*#__PURE__*/_jsx("div", {
-        id: "test",
-        children: "Some Child"
-      })
-    }));
-    expect(wrapper.find('#test').text()).toEqual('Some Child');
-    expect(wrapper.find('div').get(0).props['aria-hidden']).toEqual(true);
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should render as open', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(AccordionContent, {
-      open: true,
-      id: "some-id",
-      children: /*#__PURE__*/_jsx("div", {
-        id: "test",
-        children: "Some Child"
-      })
-    }));
-    expect(wrapper.find('#test').text()).toEqual('Some Child');
-    expect(wrapper.find('div').get(0).props['aria-hidden']).toEqual(false);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

package/Accordion/spec.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Accordion from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.unmock('@shopgate/pwa-ui-shared');
-jest.mock('@shopgate/engage/components');
-jest.mock('react-spring', () => ({
-  ...jest.requireActual('react-spring'),
-  useSpring: jest.fn().mockReturnValue({
-    hook: 'useSpring return value'
-  })
-}));
-describe('<Accordion />', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  it('should render with renderLabel prop and children', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Accordion, {
-      renderLabel: () => /*#__PURE__*/_jsx("div", {}),
-      testId: "Some Thing",
-      children: "Some content."
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('AccordionContent').exists()).toBe(true);
-  });
-  it('should not render without a renderLabel prop', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Accordion, {
-      testId: "Some Thing"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.instance()).toEqual(null);
-  });
-  it('should not render without children', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Accordion, {
-      renderLabel: () => {},
-      testId: "Some Thing"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.instance()).toEqual(null);
-  });
-});

package/BaseDialog/components/Buttons/spec.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Button from '@shopgate/pwa-ui-shared/Button';
-import Buttons from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-const actions = [{
-  label: 'action0',
-  action: jest.fn()
-}, {
-  label: 'action1',
-  action: jest.fn()
-}, {
-  label: 'action2',
-  action: jest.fn()
-}];
-describe('<Buttons />', () => {
-  it('should not render if no actions are passed', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Buttons, {}));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.instance()).toEqual(null);
-  });
-  it('should render buttons', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Buttons, {
-      actions: actions
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Button).length).toBe(actions.length);
-  });
-});

package/BaseDialog/components/Content/spec.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Content from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('<Content />', () => {
-  it('should not render if no content is passed', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Content, {}));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.instance()).toEqual(null);
-  });
-  it('should render content components', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Content, {
-      content: "Hello World"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('[id="basicDialogDesc"]').length).toBe(1);
-  });
-});

package/BaseDialog/components/Title/spec.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Title from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('<Title />', () => {
-  it('should not render without a title', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Title, {}));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.instance()).toEqual(null);
-  });
-  it('should render with a title', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Title, {
-      title: "Some test title"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('[id="basicDialogTitle"]').length).toBe(1);
-  });
-});

package/BaseDialog/spec.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Title from "./components/Title";
-import Content from "./components/Content";
-import Buttons from "./components/Buttons";
-import BasicDialog from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-const props = {
-  title: 'Hello World',
-  children: /*#__PURE__*/_jsx("div", {
-    children: "Hello World"
-  }),
-  actions: [{
-    label: 'action0',
-    action: jest.fn()
-  }, {
-    label: 'action1',
-    action: jest.fn()
-  }, {
-    label: 'action2',
-    action: jest.fn()
-  }]
-};
-jest.mock('@shopgate/engage/a11y/components');
-describe('<BasicDialog />', () => {
-  it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(BasicDialog, {
-      actions: []
-    }));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should render as expected', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(BasicDialog, {
-      ...props
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Title).length).toBe(1);
-    expect(wrapper.find(Title).props().title).toEqual(props.title);
-    expect(wrapper.find(Content).length).toBe(1);
-    expect(wrapper.find(Content).props().content).toEqual(props.children);
-    expect(wrapper.find(Buttons).length).toBe(1);
-    expect(wrapper.find(Buttons).props().actions).toEqual(props.actions);
-  });
-});

package/NavDrawer/components/Divider/spec.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Divider from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('<NavDrawerDivider />', () => {
-  it('should match the snapshot', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Divider, {}));
-    expect(wrapper).toMatchSnapshot();
-  });
-});

package/NavDrawer/spec.js

@@ -1,139 +0,0 @@
-import "core-js/modules/es.array.reduce.js";
-/* eslint-disable global-require, extra-rules/no-single-line-objects */
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import Transition from 'react-transition-group/Transition';
-jest.unmock('@shopgate/pwa-core');
-jest.mock('@shopgate/engage/styles', () => ({
-  makeStyles: () => function mockUseStylesFactory(defs) {
-    return function useStylesMock() {
-      const keys = Object.keys(defs);
-      const classes = keys.reduce((acc, key) => {
-        acc[key] = `mock-class-${key}`;
-        return acc;
-      }, {});
-      const cx = (...parts) => parts.filter(Boolean).join(' ');
-      return {
-        classes,
-        cx
-      };
-    };
-  }
-}));
-jest.mock('@shopgate/engage/components', () => {
-  const mockReact = require('react');
-  const mockPropTypes = require('prop-types');
-  function Backdrop(props) {
-    const {
-      isVisible,
-      onClick
-    } = props;
-    if (!isVisible) {
-      return null;
-    }
-    return mockReact.createElement('button', {
-      type: 'button',
-      'aria-label': 'Close',
-      'data-test-id': 'NavDrawerBackdrop',
-      onClick
-    });
-  }
-  Backdrop.propTypes = {
-    isVisible: mockPropTypes.bool,
-    onClick: mockPropTypes.func
-  };
-  Backdrop.defaultProps = {
-    isVisible: false,
-    onClick: undefined
-  };
-  Backdrop.displayName = 'Backdrop';
-  return {
-    Backdrop
-  };
-});
-jest.mock('@shopgate/engage/a11y/components', () => {
-  const mockPropTypes = require('prop-types');
-  function ModalStateTracker(props) {
-    return props.children;
-  }
-  ModalStateTracker.propTypes = {
-    children: mockPropTypes.node
-  };
-  ModalStateTracker.defaultProps = {
-    children: null
-  };
-  return {
-    ModalStateTracker
-  };
-});
-jest.mock("./components/Item", () => {
-  const mockReact = require('react');
-  const mockPropTypes = require('prop-types');
-  const ItemWithRef = mockReact.forwardRef((props, ref) => mockReact.createElement('button', {
-    type: 'button',
-    ref,
-    'data-test-id': 'nav-drawer-item'
-  }, props.label));
-  ItemWithRef.propTypes = {
-    label: mockPropTypes.string
-  };
-  ItemWithRef.defaultProps = {
-    label: ''
-  };
-  return {
-    __esModule: true,
-    default: ItemWithRef
-  };
-});
-
-// eslint-disable-next-line import/first
-import NavDrawer from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('NavDrawer', () => {
-  it('should match the snapshot', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(NavDrawer, {
-      children: "Content"
-    }));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should open and close with an event', () => {
-    const onOpen = jest.fn();
-    const onClose = jest.fn();
-    const wrapper = mount(/*#__PURE__*/_jsx(NavDrawer, {
-      onOpen: onOpen,
-      onClose: onClose,
-      children: "Content"
-    }));
-    act(() => {
-      NavDrawer.open();
-    });
-    wrapper.update();
-    expect(wrapper.find(Transition).prop('in')).toEqual(true);
-    expect(onOpen).toHaveBeenCalled();
-    expect(onClose).not.toHaveBeenCalled();
-    act(() => {
-      NavDrawer.close();
-    });
-    wrapper.update();
-    expect(wrapper.find(Transition).prop('in')).toEqual(false);
-    expect(onClose).toHaveBeenCalled();
-  });
-  it('should close when Backdrop is clicked', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(NavDrawer, {
-      children: "Content"
-    }));
-    act(() => {
-      NavDrawer.open();
-    });
-    wrapper.update();
-    expect(wrapper.find(Transition).prop('in')).toEqual(true);
-    const backdrop = wrapper.find('[data-test-id="NavDrawerBackdrop"]');
-    act(() => {
-      backdrop.simulate('click');
-    });
-    wrapper.update();
-    expect(wrapper.find(Transition).prop('in')).toEqual(false);
-  });
-});
-/* eslint-enable global-require, extra-rules/no-single-line-objects */

package/tsconfig.build.json

@@ -1,16 +0,0 @@
-{
-  "extends": "@shopgate/engage/tsconfig.build.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "."
-  },
-  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": [
-    "dist",
-    "node_modules",
-    "**/*.spec.*",
-    "**/__tests__/**",
-    "**/__snapshots__/**",
-    "coverage"
-  ]
-}

package/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "@shopgate/engage/tsconfig.json",
-}