@shopgate/pwa-common 7.30.0-alpha.9 → 7.30.0-beta.2

package/components/CountdownTimer/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import padStart from 'lodash/padStart';
@@ -11,6 +12,7 @@ import I18n from "../I18n";
  * @param {number} seconds The remaining seconds.
  * @return {Object} String and params for the i18n component
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const getFormattedTimeString = (days, hours, minutes, seconds) => {
   const formattedHours = padStart(hours, 2, '0');
   const formattedMinutes = padStart(minutes, 2, '0');
@@ -44,27 +46,31 @@ const createFormattedTime = timeSpanInput => {
 /**
  * The Countdown timer component.
  */
-class CountdownTimer extends Component {
+let CountdownTimer = /*#__PURE__*/function (_Component) {
   /**
    * The component constructor.
    * @param {Object} props The component properties.
    */
-  constructor(props) {
-    super(props);
-    this.intervalHandle = null;
-    this.remainingTime = this.getRemainingTime();
-    this.expired = this.remainingTime <= 0;
+  function CountdownTimer(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.intervalHandle = null;
+    _this.remainingTime = _this.getRemainingTime();
+    _this.expired = _this.remainingTime <= 0;
 
     // Calculate the initial formatted time string.
-    this.state = {
-      formattedTime: createFormattedTime(this.remainingTime)
+    _this.state = {
+      formattedTime: createFormattedTime(_this.remainingTime)
     };
+    return _this;
   }
 
   /**
    * Installs a new interval to update the timer if the component did mount.
    */
-  componentDidMount() {
+  _inheritsLoose(CountdownTimer, _Component);
+  var _proto = CountdownTimer.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     // Install the interval.
     this.intervalHandle = setInterval(() => {
       /**
@@ -78,8 +84,8 @@ class CountdownTimer extends Component {
 
   /**
    * Clears the timer interval.
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     if (this.intervalHandle) {
       clearInterval(this.intervalHandle);
     }
@@ -87,15 +93,15 @@ class CountdownTimer extends Component {
 
   /**
    * @returns {number} The remaining time until the timer runs out.
-   */
-  getRemainingTime() {
+   */;
+  _proto.getRemainingTime = function getRemainingTime() {
     return Math.ceil(this.props.timeout - Date.now() / 1000);
   }
 
   /**
    * Updates the formatted time. Will not cause a re-rendering of the component.
-   */
-  updateTimer() {
+   */;
+  _proto.updateTimer = function updateTimer() {
     // Calculate the remaining time until the timer is expired. Also ignore negative durations.
     const deltaTime = Math.max(0, this.remainingTime);
     const isExpired = deltaTime <= 0;
@@ -119,15 +125,16 @@ class CountdownTimer extends Component {
   /**
    * Renders the element.
    * @return {JSX.Element}
-   */
-  render() {
-    return /*#__PURE__*/React.createElement(I18n.Text, {
+   */;
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx(I18n.Text, {
       string: this.state.formattedTime.string,
       params: this.state.formattedTime.params,
       className: `${this.props.className} common__countdown-timer`
     });
-  }
-}
+  };
+  return CountdownTimer;
+}(Component);
 CountdownTimer.defaultProps = {
   className: '',
   onExpire: null

package/components/CountdownTimer/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import CountdownTimer, { getFormattedTimeString } from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<CountdownTimer>', () => {
   jest.useFakeTimers();
 
@@ -16,7 +17,7 @@ describe('<CountdownTimer>', () => {
    */
   const createTimerElement = (remainingDays, remainingHours, remainingMinutes, remainingSeconds, callback) => {
     const timeout = Math.floor(Date.now() / 1000) + remainingDays * 86400 + remainingHours * 3600 + remainingMinutes * 60 + remainingSeconds;
-    const wrapper = shallow(/*#__PURE__*/React.createElement(CountdownTimer, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(CountdownTimer, {
       timeout: timeout,
       onExpire: callback
     }));

package/components/Drawer/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -6,34 +7,39 @@ import styles from "./style";
 /**
  * Drawer component.
  */
-class Drawer extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Drawer = /*#__PURE__*/function (_Component) {
   /**
    * Initializes the Drawer component.
    * @param {Object} props The components props.
    */
-  constructor(props) {
-    super(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
+    _this.handleAnimationEnd = () => {
+      _this.setState({
+        active: _this.props.isOpen
       });
-      if (!this.props.isOpen) {
-        this.props.onDidClose();
+      if (!_this.props.isOpen) {
+        _this.props.onDidClose();
       } else {
-        this.props.onDidOpen();
+        _this.props.onDidOpen();
       }
     };
-    this.sheetRef = /*#__PURE__*/React.createRef();
-    this.state = {
+    _this.sheetRef = /*#__PURE__*/React.createRef();
+    _this.state = {
       active: props.isOpen
     };
+    return _this;
   }
 
   /** inheritdoc */
-  componentDidMount() {
+  _inheritsLoose(Drawer, _Component);
+  var _proto = Drawer.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     if (this.props.isOpen) {
       if (this.sheetRef.current) {
         this.sheetRef.current.focus();
@@ -44,8 +50,8 @@ class Drawer extends Component {
   /**
    * Update state when isOpen changes.
    * @param {Object} nextProps The next component props.
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+   */;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.isOpen !== nextProps.isOpen) {
       if (nextProps.isOpen) {
         if (typeof nextProps.onOpen === 'function') {
@@ -63,19 +69,19 @@ class Drawer extends Component {
   /**
    * Set focus for a11y when sheet opens
    * @param {Object} prevProps The previous component props.
-   */
-  componentDidUpdate(prevProps) {
+   */;
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     if (!prevProps.isOpen && this.props.isOpen) {
       if (this.sheetRef.current) {
         this.sheetRef.current.focus();
       }
     }
-  }
+  };
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       className,
       children,
@@ -96,7 +102,7 @@ class Drawer extends Component {
     if (typeof animation.duration === 'number') {
       style.animationDuration = `${animation.duration}ms`;
     }
-    return active ? /*#__PURE__*/React.createElement("div", {
+    return active ? /*#__PURE__*/_jsx("div", {
       ref: this.sheetRef,
       className: combinedClassName,
       style: style,
@@ -111,10 +117,12 @@ class Drawer extends Component {
       },
       role: "dialog",
       "aria-modal": true,
-      tabIndex: -1
-    }, children) : null;
-  }
-}
+      tabIndex: -1,
+      children: children
+    }) : null;
+  };
+  return Drawer;
+}(Component);
 /**
  * The component prop types.
  * @type {Object}

package/components/Drawer/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import Drawer from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/a11y/components');
 describe('<Drawer />', () => {
   const onOpen = jest.fn();
@@ -11,11 +12,11 @@ describe('<Drawer />', () => {
     jest.clearAllMocks();
   });
   it('should render', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Drawer, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Drawer, {}));
     expect(wrapper).toMatchSnapshot();
   });
   it('should execute callback when drawer is opened', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Drawer, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Drawer, {
       onOpen: onOpen
     }));
     wrapper.setProps({
@@ -24,7 +25,7 @@ describe('<Drawer />', () => {
     expect(onOpen).toBeCalled();
   });
   it('should execute callback when drawer is closed', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Drawer, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Drawer, {
       isOpen: true,
       onClose: onClose
     }));
@@ -34,7 +35,7 @@ describe('<Drawer />', () => {
     expect(onClose).toBeCalled();
   });
   it('should add custom classes', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Drawer, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Drawer, {
       className: "custom-class-name",
       isOpen: true
     }));
@@ -42,7 +43,7 @@ describe('<Drawer />', () => {
     expect(wrapper.hasClass('custom-class-name')).toEqual(true);
   });
   it('should execute callback when drawer open animation did end', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Drawer, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Drawer, {
       className: "custom-class-name",
       isOpen: false,
       onOpen: onOpen,
@@ -58,7 +59,7 @@ describe('<Drawer />', () => {
     expect(onDidOpen).toBeCalled();
   });
   it('should execute callback when drawer close animation did end', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Drawer, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Drawer, {
       className: "custom-class-name",
       isOpen: true,
       onClose: onClose,

package/components/Dropdown/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Transition from "../Transition";
@@ -9,23 +9,28 @@ import transitions from "./transitions";
  * This component slides it's child content up or down based on it's isOpen property.
  * @returns {JSX}
  */
-class Dropdown extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Dropdown = /*#__PURE__*/function (_Component) {
   /**
    * Constructor
    * @param {Object} props Props of the Component
    */
-  constructor(props) {
-    super(props);
-    this.state = {
+  function Dropdown(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.state = {
       initialRender: true
     };
+    return _this;
   }
 
   /**
    * Update the initialRender state if the isOpen state changes from false to true
    * @param {Object} nextProps The new props
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _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
@@ -37,33 +42,37 @@ class Dropdown extends Component {
    * Only update the component if isOpen changed
    * @param {Object} nextProps The new props
    * @returns {boolean}
-   */
-  shouldComponentUpdate(nextProps) {
+   */;
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
     return this.props.isOpen !== nextProps.isOpen;
   }
 
   /**
    * Renders the component.
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _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__*/React.createElement(Transition, _extends({}, transitionProps, {
+    return /*#__PURE__*/_jsx(Transition, {
+      ...transitionProps,
       onComplete: this.props.onComplete,
       onStart: this.props.onStart,
       duration: this.props.duration,
-      easing: this.props.easing
-    }), /*#__PURE__*/React.createElement("div", {
-      className: `${styles} ${this.props.className} common__dropdown`,
-      "aria-hidden": !this.props.isOpen
-    }, this.props.children));
-  }
-}
+      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);
 Dropdown.defaultProps = {
   className: '',
   children: null,

package/components/Ellipsis/index.js

@@ -7,11 +7,13 @@ import Dotdotdot from 'react-dotdotdot';
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
-const Ellipsis = props => /*#__PURE__*/React.createElement(Dotdotdot, {
+import { jsx as _jsx } from "react/jsx-runtime";
+const Ellipsis = props => /*#__PURE__*/_jsx(Dotdotdot, {
   clamp: props.rows,
   className: `${props.className} common__ellipsis`,
-  useNativeClamp: true
-}, props.children);
+  useNativeClamp: true,
+  children: props.children
+});
 Ellipsis.defaultProps = {
   className: '',
   rows: 3

package/components/Ellipsis/spec.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Ellipsis from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const clamp = 3;
 const text = 'Some very long text that should be cut off by this ellipsis component.';
 describe('<Ellipsis />', () => {
   it('should render', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Ellipsis, {
-      rows: clamp
-    }, text));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Ellipsis, {
+      rows: clamp,
+      children: text
+    }));
     expect(wrapper).toMatchSnapshot();
   });
 });

package/components/EmbeddedMedia/index.js

@@ -7,6 +7,7 @@ import { embeddedMedia } from '@shopgate/pwa-common/collections';
  * EmbeddedMedia component. Handles loading of media related scripts e.g. the Vimeo Player.
  * @returns {JSX}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const EmbeddedMedia = ({
   children,
   cookieConsentSettings
@@ -45,12 +46,14 @@ const EmbeddedMedia = ({
     src: provider.remoteScriptUrl,
     type: 'text/javascript'
   }));
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Helmet, {
-    script: scripts
-    // Helmet doesn't support `onload` in script objects so we have to hack in our own
-    ,
-    onChangeClientState: (newState, addedTags) => updateProviderScripts(addedTags)
-  }), children);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Helmet, {
+      script: scripts
+      // Helmet doesn't support `onload` in script objects so we have to hack in our own
+      ,
+      onChangeClientState: (newState, addedTags) => updateProviderScripts(addedTags)
+    }), children]
+  });
 };
 EmbeddedMedia.defaultProps = {
   cookieConsentSettings: {

package/components/EmbeddedMedia/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { embeddedMedia } from '@shopgate/pwa-common/collections';
 import EmbeddedMedia from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/pwa-common/collections', () => ({
   embeddedMedia: {
     getHasPendingProviders: jest.fn(),
@@ -21,12 +22,20 @@ describe('<EmbeddedMedia />', () => {
   });
   it('should return children', () => {
     embeddedMedia.getHasPendingProviders.mockReturnValueOnce(false);
-    const wrapper = shallow(/*#__PURE__*/React.createElement(EmbeddedMedia, null, /*#__PURE__*/React.createElement("div", null, "Children")));
+    const wrapper = shallow(/*#__PURE__*/_jsx(EmbeddedMedia, {
+      children: /*#__PURE__*/_jsx("div", {
+        children: "Children"
+      })
+    }));
     expect(wrapper.html()).toEqual('<div>Children</div>');
   });
   it.skip('should render Helmet with a script', () => {
     embeddedMedia.getHasPendingProviders.mockReturnValueOnce(true);
-    const wrapper = shallow(/*#__PURE__*/React.createElement(EmbeddedMedia, null, /*#__PURE__*/React.createElement("div", null, "Content with embedded media (youtube, vimeo, etc)")));
+    const wrapper = shallow(/*#__PURE__*/_jsx(EmbeddedMedia, {
+      children: /*#__PURE__*/_jsx("div", {
+        children: "Content with embedded media (youtube, vimeo, etc)"
+      })
+    }));
     const helmetProps = wrapper.find('HelmetWrapper').props();
     expect(helmetProps).toEqual({
       defer: true,

package/components/ErrorBoundary/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import connector from "./connector";
@@ -5,27 +6,35 @@ import connector from "./connector";
 /**
  * The App error boundary component.
  */
-class ErrorBoundary extends PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      hasError: false
-    };
-  }
+let ErrorBoundary = /*#__PURE__*/function (_PureComponent) {
   /**
-   * @returns {{hasError: boolean}}
+   * Constructor for the ErrorBoundary component.
+   * @param {Object} props - The component props.
    */
-  static getDerivedStateFromError() {
-    return {
-      hasError: true
+  function ErrorBoundary(props) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
+    _this.state = {
+      hasError: false
     };
+    return _this;
   }
 
   /**
    * @param {Object} error The error object.
    * @param {Object} errorInfo The error information.
    */
-  componentDidCatch(error, errorInfo) {
+  _inheritsLoose(ErrorBoundary, _PureComponent);
+  /**
+   * @returns {{hasError: boolean}}
+   */
+  ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError() {
+    return {
+      hasError: true
+    };
+  };
+  var _proto = ErrorBoundary.prototype;
+  _proto.componentDidCatch = function componentDidCatch(error, errorInfo) {
     // eslint-disable-next-line no-param-reassign
     error.stack = errorInfo.componentStack;
     this.props.appError(error);
@@ -33,14 +42,15 @@ class ErrorBoundary extends PureComponent {
 
   /**
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     if (this.state.hasError) {
       return this.props.fallbackUi;
     }
     return this.props.children;
-  }
-}
+  };
+  return ErrorBoundary;
+}(PureComponent);
 ErrorBoundary.defaultProps = {
   fallbackUi: null
 };

package/components/Grid/components/Item/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { objectWithoutProps } from "../../../../helpers/data";
@@ -6,12 +7,17 @@ import styles from "./style";
 /**
  * The grid item component.
  */
-class GridItem extends Component {
+let GridItem = /*#__PURE__*/function (_Component) {
+  function GridItem() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(GridItem, _Component);
+  var _proto = GridItem.prototype;
   /**
    * Composes the props.
    * @returns {Object} The composed props.
    */
-  getProps() {
+  _proto.getProps = function getProps() {
     let {
       className
     } = this.props;
@@ -31,11 +37,12 @@ class GridItem extends Component {
   /**
    * Renders the component.
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     return /*#__PURE__*/React.createElement(this.props.component, this.getProps());
-  }
-}
+  };
+  return GridItem;
+}(Component);
 GridItem.defaultProps = {
   className: '',
   component: 'li',

package/components/Grid/components/Item/spec.js

@@ -1,20 +1,21 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import GridItem from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<GridItem />', () => {
   it('should render without any further props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(GridItem, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(GridItem, {}));
     expect(wrapper).toMatchSnapshot();
   });
   it('should be able to render a custom tag', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(GridItem, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(GridItem, {
       component: "section"
     }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.type()).toEqual('section');
   });
   it('should add custom classes on demand', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(GridItem, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(GridItem, {
       className: "custom-class-name"
     }));
     expect(wrapper).toMatchSnapshot();

package/components/Grid/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { objectWithoutProps } from "../../helpers/data";
@@ -7,12 +8,17 @@ import styles, { wrap } from "./style";
 /**
  * The grid component.
  */
-class Grid extends Component {
+let Grid = /*#__PURE__*/function (_Component) {
+  function Grid() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(Grid, _Component);
+  var _proto = Grid.prototype;
   /**
    * Composes the props.
    * @returns {Object} The composed props.
    */
-  getProps() {
+  _proto.getProps = function getProps() {
     let className = `${this.props.className} ${styles} common__grid`;
     if (this.props.wrap) {
       className += ` ${wrap(this.props.wrap)}`;
@@ -27,11 +33,12 @@ class Grid extends Component {
   /**
    * Renders the component.
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     return /*#__PURE__*/React.createElement(this.props.component, this.getProps());
-  }
-}
+  };
+  return Grid;
+}(Component);
 Grid.Item = GridItem;
 Grid.defaultProps = {
   className: '',