@shopgate/pwa-common 7.30.3 → 7.31.0-alpha.1

package/App.js

@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { CookiesProvider } from 'react-cookie';
-import { loadCustomStyles } from '@shopgate/engage/styles';
 import ErrorBoundary from "./components/ErrorBoundary";
 import { appDidStart } from "./action-creators/app";
 import I18n from "./components/I18n";
@@ -43,7 +42,6 @@ let App = /*#__PURE__*/function (_Component) {
       this.props.store.dispatch(appDidStart(`${window.location.pathname}${window.location.search}`));
     };
     performAppStart();
-    loadCustomStyles();
   }
 
   /**

package/actions/app/handleLink.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/web.url.js";
 import "core-js/modules/web.url.to-json.js";

package/collections/AuthRoutes.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import pathMatch from 'path-match';
 
 /**

package/collections/PersistedReducers.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 /**
  * Class to maintain the persisted redux reducers.
  */

package/collections/media-providers/Vimeo.js

@@ -87,7 +87,7 @@ let VimeoMediaProvider = /*#__PURE__*/function (_MediaProvider) {
    * sandbox attributes to improve security and layout behavior.
    *
    * @param {Document} document - The DOM document containing iframes to optimize.
-   * @returns {YouTubeMediaProvider}
+   * @returns {VimeoMediaProvider}
    */;
   _proto.applyIframeOptimizations = function applyIframeOptimizations(document) {
     const iframes = this.getMediaContainers(document);

package/collections/media-providers/style.js

@@ -1,4 +1,4 @@
-import { css } from 'glamor';
+import { css } from '@shopgate/engage/styles';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 const {
   colors

package/components/Backdrop/index.js

@@ -1,15 +1,27 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
+import { makeStyles } from '@shopgate/engage/styles';
 import { toggleBodyScroll } from '@shopgate/engage/styles/helpers';
-import style from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  backdrop: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    // Prevents that content behind the backdrop is clickable
+    pointerEvents: 'all',
+    touchAction: 'none'
+  }
+});
 
 /**
  * Backdrop component
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function Backdrop({
   className,
   color,
@@ -20,6 +32,9 @@ function Backdrop({
   onClick,
   opacity
 }) {
+  const {
+    classes
+  } = useStyles();
   // Stable id for body scroll lock
   const bodyScrollRef = useRef(Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2));
   const nodeRef = useRef(null);
@@ -66,7 +81,7 @@ function Backdrop({
       pointerEvents: 'none'
     }
   }), [targetOpacity]);
-  const combinedClassName = `${style} ${className} common__backdrop`;
+  const combinedClassName = `${classes.backdrop} ${className} common__backdrop`;
   return /*#__PURE__*/_jsx(Transition, {
     in: isVisible,
     timeout: duration,

package/components/Button/index.js

@@ -1,64 +1,52 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import style from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  root: {
+    '&:focus': {
+      outline: 0
+    }
+  }
+}));
 
 /**
  * The button component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let Button = /*#__PURE__*/function (_Component) {
-  function Button() {
-    return _Component.apply(this, arguments) || this;
-  }
-  _inheritsLoose(Button, _Component);
-  var _proto = Button.prototype;
-  /**
-   * Renders the component.
-   * @returns {JSX.Element}
-   */
-  _proto.render = function render() {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/button-has-type
-      _jsx("button", {
-        "data-test-id": this.props.testId,
-        ...this.buttonProps,
-        children: this.props.children
-      })
-    );
+const Button = ({
+  children,
+  className,
+  disabled,
+  onClick,
+  testId,
+  ...rest
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const buttonProps = {
+    className: cx(classes.root, 'common__button', className),
+    disabled,
+    onClick: disabled ? null : onClick,
+    ...rest
   };
-  return _createClass(Button, [{
-    key: "buttonProps",
-    get:
-    /**
-     * Getter for the calculated button props.
-     * @returns {Object}
-     */
-    function () {
-      const {
-        children,
-        testId,
-        className,
-        disabled,
-        onClick,
-        ...props
-      } = this.props;
-      const buttonProps = {
-        className: `${className} ${style} common__button`,
-        disabled,
-        onClick: disabled ? null : onClick,
-        ...props
-      };
-      return buttonProps;
-    }
-  }]);
-}(Component);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/button-has-type
+    _jsx("button", {
+      "data-test-id": testId,
+      ...buttonProps,
+      children: children
+    })
+  );
+};
 Button.defaultProps = {
   className: '',
   disabled: false,
   onClick: null,
   testId: 'Button'
 };
-export default Button;
+export default /*#__PURE__*/memo(Button);

package/components/Checkbox/index.js

@@ -39,7 +39,7 @@ let Checkbox = /*#__PURE__*/function (_Component) {
      */
     _this.isChecked = () => typeof _this.props.defaultChecked === 'undefined' ? _this.props.checked // Controlled.
     : _this.state.checked // Uncontrolled.
-    ;
+;
     /**
      * Inverts the current "checked" value and calls the callback function with it.
      * If the checkbox is uncontrolled, it keeps track of the value.

package/components/Drawer/index.js

@@ -1,148 +1,134 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useState, useEffect, useRef, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from "./style";
+import { makeStyles, keyframes } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const duration = 150;
+const easing = 'ease';
+const slideInBaseDrawer = keyframes({
+  '0%': {
+    transform: 'translateY(100%)'
+  },
+  '100%': {
+    transform: 'translateY(0)'
+  }
+});
+const slideOutBaseDrawer = keyframes({
+  '0%': {
+    transform: 'translateY(0)'
+  },
+  '100%': {
+    transform: 'translateY(100%)'
+  }
+});
+const useStyles = makeStyles()(() => ({
+  container: {
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    zIndex: 5
+  },
+  animationIn: {
+    animation: `${slideInBaseDrawer} ${duration}ms 1 forwards ${easing}`
+  },
+  animationOut: {
+    animation: `${slideOutBaseDrawer} ${duration}ms 1 forwards ${easing}`
+  }
+}));
 
 /**
  * Drawer component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element|null}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let Drawer = /*#__PURE__*/function (_Component) {
-  /**
-   * Initializes the Drawer component.
-   * @param {Object} props The components props.
-   */
-  function Drawer(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    /**
-     * Syncs the internal active state when an animation ends.
-     */
-    _this.handleAnimationEnd = () => {
-      _this.setState({
-        active: _this.props.isOpen
-      });
-      if (!_this.props.isOpen) {
-        _this.props.onDidClose();
-      } else {
-        _this.props.onDidOpen();
-      }
-    };
-    _this.sheetRef = /*#__PURE__*/React.createRef();
-    _this.state = {
-      active: props.isOpen
-    };
-    return _this;
-  }
-
-  /** inheritdoc */
-  _inheritsLoose(Drawer, _Component);
-  var _proto = Drawer.prototype;
-  _proto.componentDidMount = function componentDidMount() {
-    if (this.props.isOpen) {
-      if (this.sheetRef.current) {
-        this.sheetRef.current.focus();
-      }
+const Drawer = ({
+  animation,
+  children,
+  className,
+  isOpen,
+  onOpen,
+  onClose,
+  onDidClose,
+  onDidOpen
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [active, setActive] = useState(isOpen);
+  const sheetRef = useRef(null);
+  const isFirstIsOpenSync = useRef(true);
+  const onOpenRef = useRef(onOpen);
+  const onCloseRef = useRef(onClose);
+  onOpenRef.current = onOpen;
+  onCloseRef.current = onClose;
+  useEffect(() => {
+    if (isFirstIsOpenSync.current) {
+      isFirstIsOpenSync.current = false;
+      return;
     }
-  }
-
-  /**
-   * Update state when isOpen changes.
-   * @param {Object} nextProps The next component props.
-   */;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.isOpen !== nextProps.isOpen) {
-      if (nextProps.isOpen) {
-        if (typeof nextProps.onOpen === 'function') {
-          nextProps.onOpen();
-        }
-        this.setState({
-          active: true
-        });
-      } else if (typeof nextProps.onClose === 'function') {
-        nextProps.onClose();
-      }
+    if (isOpen) {
+      onOpenRef.current();
+      setActive(true);
+    } else {
+      onCloseRef.current();
     }
-  }
-
-  /**
-   * Set focus for a11y when sheet opens
-   * @param {Object} prevProps The previous component props.
-   */;
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (!prevProps.isOpen && this.props.isOpen) {
-      if (this.sheetRef.current) {
-        this.sheetRef.current.focus();
-      }
+  }, [isOpen]);
+  useEffect(() => {
+    if (isOpen && sheetRef.current) {
+      sheetRef.current.focus();
     }
-  };
-  /**
-   * Renders the component.
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const {
-      className,
-      children,
-      isOpen,
-      animation
-    } = this.props;
-    const {
-      active
-    } = this.state;
-    const animationIn = animation.in || styles.animation.in;
-    const animationOut = animation.out || styles.animation.out;
-    const combinedClassName = classNames(className, styles.container, {
-      [animationIn]: isOpen
-    }, {
-      [animationOut]: !isOpen
-    }, 'common__drawer');
-    const style = {};
-    if (typeof animation.duration === 'number') {
-      style.animationDuration = `${animation.duration}ms`;
+  }, [isOpen]);
+  const handleAnimationEnd = useCallback(() => {
+    setActive(isOpen);
+    if (!isOpen) {
+      onDidClose();
+    } else {
+      onDidOpen();
     }
-    return active ? /*#__PURE__*/_jsx("div", {
-      ref: this.sheetRef,
-      className: combinedClassName,
-      style: style,
-      onAnimationEnd: () => {
-        this.handleAnimationEnd();
-        // clear any residual animation style to fix a11y issue on Android
-        // (focus ring is misaligned)
-        if (this.sheetRef?.style) {
-          this.sheetRef.style.animation = '';
-          this.sheetRef.style.transform = 'none';
-        }
-      },
-      role: "dialog",
-      "aria-modal": true,
-      tabIndex: -1,
-      children: children
-    }) : null;
-  };
-  return Drawer;
-}(Component);
-/**
- * The component prop types.
- * @type {Object}
- */
-/**
- * The component default props.
- * @type {Object}
- */
+  }, [isOpen, onDidClose, onDidOpen]);
+  const animationIn = animation.in || classes.animationIn;
+  const animationOut = animation.out || classes.animationOut;
+  const combinedClassName = cx(classes.container, {
+    [animationIn]: isOpen
+  }, {
+    [animationOut]: !isOpen
+  }, className, 'common__drawer');
+  const style = {};
+  if (typeof animation.duration === 'number') {
+    style.animationDuration = `${animation.duration}ms`;
+  }
+  if (!active) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    ref: sheetRef,
+    className: combinedClassName,
+    style: style,
+    onAnimationEnd: () => {
+      handleAnimationEnd();
+      if (sheetRef?.current?.style) {
+        sheetRef.current.style.animation = '';
+        sheetRef.current.style.transform = 'none';
+      }
+    },
+    role: "dialog",
+    "aria-modal": true,
+    tabIndex: -1,
+    children: children
+  });
+};
 Drawer.defaultProps = {
-  className: '',
+  animation: {
+    duration: null,
+    in: '',
+    out: ''
+  },
   children: null,
+  className: '',
   isOpen: false,
   onOpen: () => {},
   onClose: () => {},
   onDidClose: () => {},
-  onDidOpen: () => {},
-  animation: {
-    duration: null,
-    in: '',
-    out: ''
-  }
+  onDidOpen: () => {}
 };
-export default Drawer;
+export default /*#__PURE__*/memo(Drawer);

package/components/Drawer/spec.js

@@ -53,9 +53,10 @@ describe('<Drawer />', () => {
     wrapper.setProps({
       isOpen: true
     });
+    wrapper.update();
     expect(onOpen).toBeCalled();
     expect(onDidOpen).not.toBeCalled();
-    wrapper.simulate('animationEnd');
+    wrapper.find('[role="dialog"]').simulate('animationEnd');
     expect(onDidOpen).toBeCalled();
   });
   it('should execute callback when drawer close animation did end', () => {
@@ -69,9 +70,10 @@ describe('<Drawer />', () => {
     wrapper.setProps({
       isOpen: false
     });
+    wrapper.update();
     expect(onClose).toBeCalled();
     expect(onDidClose).not.toBeCalled();
-    wrapper.simulate('animationEnd');
+    wrapper.find('[role="dialog"]').simulate('animationEnd');
     expect(onDidClose).toBeCalled();
   });
 });

package/components/Dropdown/index.js

@@ -1,78 +1,62 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useState, useLayoutEffect, memo } from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
 import Transition from "../Transition";
-import styles from "./style";
 import transitions from "./transitions";
-
-/**
- * This component slides it's child content up or down based on it's isOpen property.
- * @returns {JSX}
- */
 import { jsx as _jsx } from "react/jsx-runtime";
-let Dropdown = /*#__PURE__*/function (_Component) {
-  /**
-   * Constructor
-   * @param {Object} props Props of the Component
-   */
-  function Dropdown(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    _this.state = {
-      initialRender: true
-    };
-    return _this;
+const useStyles = makeStyles()(() => ({
+  container: {
+    overflow: 'hidden'
   }
+}));
 
-  /**
-   * Update the initialRender state if the isOpen state changes from false to true
-   * @param {Object} nextProps The new props
-   */
-  _inheritsLoose(Dropdown, _Component);
-  var _proto = Dropdown.prototype;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.isOpen === false && nextProps.isOpen === true) {
-      this.setState({
-        initialRender: false
-      });
+/**
+ * This component slides its child content up or down based on its isOpen property.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
+ */
+const Dropdown = ({
+  children,
+  className,
+  duration,
+  easing,
+  isOpen,
+  onComplete,
+  onStart
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [initialRender, setInitialRender] = useState(true);
+  useLayoutEffect(() => {
+    if (isOpen === true) {
+      setInitialRender(false);
     }
+  }, [isOpen]);
+  let transitionProps;
+  if (isOpen && initialRender) {
+    transitionProps = transitions.initialOpen;
+  } else if (isOpen) {
+    transitionProps = transitions.open;
+  } else if (initialRender) {
+    transitionProps = transitions.initialClose;
+  } else {
+    transitionProps = transitions.close;
   }
-
-  /**
-   * Only update the component if isOpen changed
-   * @param {Object} nextProps The new props
-   * @returns {boolean}
-   */;
-  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
-    return this.props.isOpen !== nextProps.isOpen;
-  }
-
-  /**
-   * Renders the component.
-   * @returns {JSX}
-   */;
-  _proto.render = function render() {
-    let transitionProps;
-    if (this.props.isOpen) {
-      transitionProps = this.state.initialRender ? transitions.initialOpen : transitions.open;
-    } else {
-      transitionProps = this.state.initialRender ? transitions.initialClose : transitions.close;
-    }
-    return /*#__PURE__*/_jsx(Transition, {
-      ...transitionProps,
-      onComplete: this.props.onComplete,
-      onStart: this.props.onStart,
-      duration: this.props.duration,
-      easing: this.props.easing,
-      children: /*#__PURE__*/_jsx("div", {
-        className: `${styles} ${this.props.className} common__dropdown`,
-        "aria-hidden": !this.props.isOpen,
-        children: this.props.children
-      })
-    });
-  };
-  return Dropdown;
-}(Component);
+  return /*#__PURE__*/_jsx(Transition, {
+    ...transitionProps,
+    onComplete: onComplete,
+    onStart: onStart,
+    duration: duration,
+    easing: easing,
+    children: /*#__PURE__*/_jsx("div", {
+      className: cx(classes.container, className, 'common__dropdown'),
+      "aria-hidden": !isOpen,
+      children: children
+    })
+  });
+};
 Dropdown.defaultProps = {
   className: '',
   children: null,
@@ -82,4 +66,4 @@ Dropdown.defaultProps = {
   onComplete: () => {},
   onStart: () => {}
 };
-export default Dropdown;
+export default /*#__PURE__*/memo(Dropdown, (prev, next) => prev.isOpen === next.isOpen);