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

package/components/I18n/components/Placeholder/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
@@ -7,6 +7,13 @@ import PropTypes from 'prop-types';
  * @param {Object} context The component context.
  * @returns {JSX}
  */
-const Placeholder = props => /*#__PURE__*/React.createElement(Fragment, null, props.children);
-Placeholder.format = props => /*#__PURE__*/React.createElement(Placeholder, props);
+import { jsx as _jsx } from "react/jsx-runtime";
+const Placeholder = props => props.children;
+Placeholder.format = props => /*#__PURE__*/_jsx(Placeholder, {
+  ...props
+});
+Placeholder.propTypes = {
+  children: PropTypes.node.isRequired,
+  forKey: PropTypes.string.isRequired
+};
 export default Placeholder;

package/components/I18n/components/Placeholder/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { i18n } from '@shopgate/engage/core';
 import I18n from "../../index";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 jest.unmock('@shopgate/engage/core/helpers/i18n');
 describe('<Placeholder />', () => {
   const locales = {
@@ -15,11 +16,17 @@ describe('<Placeholder />', () => {
   describe('Given the component was mounted to the DOM', () => {
     let renderedElement;
     it('should render', () => {
-      renderedElement = mount(/*#__PURE__*/React.createElement(I18n.Provider, null, /*#__PURE__*/React.createElement(I18n.Text, {
-        string: "greeting"
-      }, /*#__PURE__*/React.createElement(I18n.Placeholder, {
-        forKey: "world"
-      }, /*#__PURE__*/React.createElement("strong", null, "WORLD")), "/")));
+      renderedElement = mount(/*#__PURE__*/_jsx(I18n.Provider, {
+        children: /*#__PURE__*/_jsxs(I18n.Text, {
+          string: "greeting",
+          children: [/*#__PURE__*/_jsx(I18n.Placeholder, {
+            forKey: "world",
+            children: /*#__PURE__*/_jsx("strong", {
+              children: "WORLD"
+            })
+          }), "/"]
+        })
+      }));
       expect(renderedElement).toMatchSnapshot();
     });
     it('should render with a placeholder text', () => {

package/components/I18n/components/Translate/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.array.reduce.js";
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -24,6 +23,7 @@ import { i18n } from '@shopgate/engage/core/helpers/i18n';
  * also handle human readable texts that contain text replacement placeholders.
  * @returns {JSX.Element} The translated string as JSX component.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Translate = ({
   string,
   children,
@@ -38,10 +38,12 @@ const Translate = ({
     return string;
   }
   if (!i18n.ready) {
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/_jsx("span", {
       className: className,
-      role: role
-    }, rest), string);
+      role: role,
+      ...rest,
+      children: string
+    });
   }
 
   // When the input string is malformed, return the original string rather than raising an error.
@@ -64,14 +66,16 @@ const Translate = ({
 
     // Create a new array containing the separated chunks of the text and merge the substitutions.
     // The result can be an array with multiple strings and will be joined together.
-    formatted = stringParts.reduce((result, text, index) => [...result, text, childrenArray[index]], []);
+    formatted = stringParts.reduce((result, text, index) => [].concat(result, [text, childrenArray[index]]), []);
   } catch (e) {
     logger.error('i18n error for string %s', string, e);
   }
-  return /*#__PURE__*/React.createElement("span", _extends({
+  return /*#__PURE__*/_jsx("span", {
     className: className,
-    role: role
-  }, rest), !transform ? formatted : transform(renderToString(formatted)));
+    role: role,
+    ...rest,
+    children: !transform ? formatted : transform(renderToString(formatted))
+  });
 };
 Translate.defaultProps = {
   children: null,

package/components/I18n/components/Translate/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { i18n } from '@shopgate/engage/core';
 import I18n from "../../index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.unmock('@shopgate/engage/core/helpers/i18n');
 describe('<Translate />', () => {
   const locales = {
@@ -14,12 +15,14 @@ describe('<Translate />', () => {
   describe('Given the component was mounted to the DOM', () => {
     let renderedElement;
     it('should match snapshot', () => {
-      renderedElement = mount(/*#__PURE__*/React.createElement(I18n.Provider, null, /*#__PURE__*/React.createElement(I18n.Text, {
-        string: "greeting",
-        params: {
-          name: 'Test'
-        }
-      })));
+      renderedElement = mount(/*#__PURE__*/_jsx(I18n.Provider, {
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "greeting",
+          params: {
+            name: 'Test'
+          }
+        })
+      }));
       expect(renderedElement).toMatchSnapshot();
     });
     it('should render translated text', () => {

package/components/Icon/index.js

@@ -11,7 +11,8 @@ import styles from "./style";
  * @param {number} [props.size=24] The icon size
  * @returns {JSX.Element}
  */
-const Icon = props => /*#__PURE__*/React.createElement("svg", {
+import { jsx as _jsx } from "react/jsx-runtime";
+const Icon = props => /*#__PURE__*/_jsx("svg", {
   className: `${styles} ${props.className} common__icon`,
   viewBox: props.viewBox,
   xmlns: "http://www.w3.org/2000/svg",

package/components/Image/Image.js

@@ -6,6 +6,7 @@ import { themeConfig } from '@shopgate/engage';
 import { getFullImageSource } from '@shopgate/engage/core/helpers';
 import styles from "./style";
 import ImageInner from "./ImageInner";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   colors: themeColors
 } = themeConfig;
@@ -134,7 +135,7 @@ const Image = ({
   }, [ratio, resolutions]);
   if (unwrapped) {
     if (!(src && !parentRendersPlaceholder)) return null;
-    return /*#__PURE__*/React.createElement(ImageInner, {
+    return /*#__PURE__*/_jsx(ImageInner, {
       ref: imgRef,
       src: sources.main,
       className: classNames(classNameImg),
@@ -154,26 +155,27 @@ const Image = ({
     });
   }
   const containerStyle = styles.container(backgroundColor, paddingHackRatio);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(containerStyle, className, 'common__image__container')
-  }, src && !parentRendersPlaceholder && /*#__PURE__*/React.createElement(ImageInner, {
-    ref: imgRef,
-    src: sources.main,
-    className: classNames(classNameImg),
-    style: {
-      aspectRatio,
-      ...(isInView && sources.preview && {
-        backgroundImage: `url(${sources.preview})`,
-        backgroundSize: 'contain',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center'
-      })
-    },
-    alt: alt,
-    lazy: lazy,
-    onLoad: handleOnLoad,
-    onError: handleOnError
-  }));
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(containerStyle, className, 'common__image__container'),
+    children: src && !parentRendersPlaceholder && /*#__PURE__*/_jsx(ImageInner, {
+      ref: imgRef,
+      src: sources.main,
+      className: classNames(classNameImg),
+      style: {
+        aspectRatio,
+        ...(isInView && sources.preview && {
+          backgroundImage: `url(${sources.preview})`,
+          backgroundSize: 'contain',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center'
+        })
+      },
+      alt: alt,
+      lazy: lazy,
+      onLoad: handleOnLoad,
+      onError: handleOnError
+    })
+  });
 };
 const defaultResolutions = [{
   width: 440,

package/components/Image/ImageInner.js

@@ -10,6 +10,7 @@ import styles from "./style";
  * @param {Function} ref The component reference
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ImageInner = /*#__PURE__*/forwardRef(({
   src,
   className,
@@ -18,7 +19,7 @@ const ImageInner = /*#__PURE__*/forwardRef(({
   onLoad,
   onError,
   style
-}, ref) => /*#__PURE__*/React.createElement("img", {
+}, ref) => /*#__PURE__*/_jsx("img", {
   ref: ref,
   loading: lazy ? 'lazy' : 'eager',
   src: src,

package/components/InfiniteContainer/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
@@ -11,30 +12,31 @@ import { ITEMS_PER_LOAD } from "../../constants/DisplayOptions";
  * more items from it when the user reaches the end of the
  * (parent) scroll container.
  */
-class InfiniteContainer extends Component {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let InfiniteContainer = /*#__PURE__*/function (_Component) {
   /**
    * The component constructor.
    * @param {Object} props The component props.
    * @param {Object} context The component context.
    */
-  constructor(props, context) {
-    super(props, context);
-    this.domElement = null;
-    this.domScrollContainer = null;
+  function InfiniteContainer(props, context) {
+    var _this;
+    _this = _Component.call(this, props, context) || this;
+    _this.domScrollContainer = null;
     /**
      * 10ms was chosen because, on the one hand, it prevents the scroll event from flooding but,
      * on the other hand, it does not hinder users that scroll quickly from reloading next chunk.
      */
-    this.handleLoadingProxy = throttle(() => {
+    _this.handleLoadingProxy = throttle(() => {
       if (props.enablePromiseBasedLoading) {
-        this.handleLoadingPromise();
+        _this.handleLoadingPromise();
       } else {
-        this.handleLoading();
+        _this.handleLoading();
       }
     }, 10);
 
     // A flag to prevent concurrent loading requests.
-    this.isLoading = false;
+    _this.isLoading = false;
 
     // Determine the initial offset of items.
     const {
@@ -48,13 +50,14 @@ class InfiniteContainer extends Component {
         offset = 0
       } = {}
     } = context || {};
-    this.state = {
+    _this.state = {
       itemCount: items.length,
       offset: [offset, currentOffset],
       // A state flag that will be true as long as we await more items.
       // The loading indicator will be shown accordingly.
       awaitingItems: true
     };
+    return _this;
   }
 
   /**
@@ -62,7 +65,9 @@ class InfiniteContainer extends Component {
    * parent scroll container if available.
    * After that it calls for the initial data to load.
    */
-  componentDidMount() {
+  _inheritsLoose(InfiniteContainer, _Component);
+  var _proto = InfiniteContainer.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     const {
       current
     } = this.props.containerRef;
@@ -82,8 +87,8 @@ class InfiniteContainer extends Component {
   /**
    * Checks if the component received new items or already received all items.
    * @param {Object} nextProps The next props.
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+   */;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     /**
      * Downstream logic to process the props. It's wrapped into a separate function, since it might
      * be executed after the state was updated to avoid race conditions.
@@ -128,15 +133,15 @@ class InfiniteContainer extends Component {
    * @param {Object} nextProps The next component props.
    * @param {Object} nextState The next component state.
    * @returns {boolean}
-   */
-  shouldComponentUpdate(nextProps, nextState) {
+   */;
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
     return !isEqual(this.props.containerRef, nextProps.containerRef) || !isEqual(this.props.columns, nextProps.columns) || !isEqual(this.props.items, nextProps.items) || !isEqual(this.state, nextState);
   }
 
   /**
    * Reset the loading flag.
-   */
-  componentDidUpdate() {
+   */;
+  _proto.componentDidUpdate = function componentDidUpdate() {
     // When promise based implementation is active, `isLoading` is reset when response comes in.
     // In the legacy implementation this happens after the fetched items reached the component and
     // is not necessary here anymore.
@@ -147,8 +152,8 @@ class InfiniteContainer extends Component {
 
   /**
    * When the component will unmount it unbinds all previously bound event listeners.
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     router.update(this.context.id, {
       offset: this.state.offset[0]
     }, false);
@@ -157,8 +162,8 @@ class InfiniteContainer extends Component {
 
   /**
    * Adds scroll event listeners to the scroll container if available.
-   */
-  bindEvents() {
+   */;
+  _proto.bindEvents = function bindEvents() {
     if (this.domScrollContainer) {
       this.domScrollContainer.addEventListener('scroll', this.handleLoadingProxy);
     }
@@ -167,8 +172,8 @@ class InfiniteContainer extends Component {
   /**
    * Removes scroll event listeners from the scroll container.
    * @param {Node} container A reference to an old scroll container.
-   */
-  unbindEvents(container) {
+   */;
+  _proto.unbindEvents = function unbindEvents(container) {
     if (container) {
       container.removeEventListener('scroll', this.handleLoadingProxy);
     } else if (this.domScrollContainer) {
@@ -180,8 +185,8 @@ class InfiniteContainer extends Component {
    * Tests if there are more items to be received via items prop.
    * @param {Object} [props] The current or next component props.
    * @returns {boolean}
-   */
-  needsToReceiveItems(props = this.props) {
+   */;
+  _proto.needsToReceiveItems = function needsToReceiveItems(props = this.props) {
     return props.totalItems === null || props.items.length < props.totalItems;
   }
 
@@ -189,8 +194,8 @@ class InfiniteContainer extends Component {
    * Tests if the total amount of items has been received via totalItems prop.
    * @param {Object} nextProps The next component props.
    * @returns {boolean}
-   */
-  receivedTotalItems(nextProps) {
+   */;
+  _proto.receivedTotalItems = function receivedTotalItems(nextProps) {
     return nextProps.totalItems !== null && nextProps.totalItems !== this.props.totalItems;
   }
 
@@ -198,8 +203,8 @@ class InfiniteContainer extends Component {
    * Tests if all items have been received and are visible based on current offset.
    * @param {Object} [props] The current or next component props.
    * @returns {boolean}
-   */
-  allItemsAreRendered(props = this.props) {
+   */;
+  _proto.allItemsAreRendered = function allItemsAreRendered(props = this.props) {
     const {
       totalItems,
       items
@@ -217,8 +222,8 @@ class InfiniteContainer extends Component {
   /**
    * Increases the current offset by limit (from props).
    * @returns {Object}
-   */
-  increaseOffset() {
+   */;
+  _proto.increaseOffset = function increaseOffset() {
     const [start, length] = this.state.offset;
     let newOffset = start + length;
 
@@ -245,8 +250,8 @@ class InfiniteContainer extends Component {
    * Resets the state.
    * @param {Function} callback A callback which is invoked after the state was updated.
    *   This is necessary to avoid race conditions with downstream code.
-   */
-  resetComponent(callback) {
+   */;
+  _proto.resetComponent = function resetComponent(callback) {
     this.setState({
       offset: [0, this.props.limit],
       awaitingItems: true,
@@ -260,8 +265,8 @@ class InfiniteContainer extends Component {
 
   /**
    * Stops the lazy loading processes
-   */
-  stopLazyLoading() {
+   */;
+  _proto.stopLazyLoading = function stopLazyLoading() {
     this.setState({
       awaitingItems: false
     });
@@ -272,8 +277,8 @@ class InfiniteContainer extends Component {
    * Verifies if all items are loaded and shown, then set final state and unbind events.
    * @param {Object} [props] The current or next component props.
    * @returns {boolean} Returns true if the component has reached the final state.
-   */
-  verifyAllDone(props = this.props) {
+   */;
+  _proto.verifyAllDone = function verifyAllDone(props = this.props) {
     if (this.allItemsAreRendered(props)) {
       this.stopLazyLoading();
       return true;
@@ -285,8 +290,8 @@ class InfiniteContainer extends Component {
    * Tests if the current scroll position is near the bottom
    * of the scroll container.
    * @returns {boolean}
-   */
-  validateScrollPosition() {
+   */;
+  _proto.validateScrollPosition = function validateScrollPosition() {
     if (!this.domScrollContainer) {
       return true;
     }
@@ -319,8 +324,8 @@ class InfiniteContainer extends Component {
    * Handles incrementing of render offset and the request of new items if necessary.
    * @param {boolean} [force] If set to true, proceed independently of scroll validation.
    * @param {Object} [props] The current or next component props.
-   */
-  handleLoading(force = false, props = this.props) {
+   */;
+  _proto.handleLoading = function handleLoading(force = false, props = this.props) {
     // Do not load if there is an update in progress.
     if (this.isLoading) {
       return;
@@ -362,8 +367,8 @@ class InfiniteContainer extends Component {
    * for offset handling.
    * @param {boolean} [force] If set to true, proceed independently of scroll validation.
    * @param {Object} [props] The current or next component props.
-   */
-  async handleLoadingPromise(force = false, props = this.props) {
+   */;
+  _proto.handleLoadingPromise = async function handleLoadingPromise(force = false, props = this.props) {
     if (this.isLoading) {
       return;
     }
@@ -395,8 +400,8 @@ class InfiniteContainer extends Component {
   /**
    * Renders the component.
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     const {
       wrapper,
       items,
@@ -416,14 +421,15 @@ class InfiniteContainer extends Component {
     const content = typeof wrapper === 'function' ? wrapper({
       children
     }) : (/*#__PURE__*/React.createElement(wrapper, {}, children));
-    return /*#__PURE__*/React.createElement("div", {
-      ref: elementRef => {
-        this.domElement = elementRef;
-      },
-      className: "common__infinite-container"
-    }, /*#__PURE__*/React.createElement("div", null, content), awaitingItems && loadingIndicator);
-  }
-}
+    return /*#__PURE__*/_jsxs("div", {
+      className: "common__infinite-container",
+      children: [/*#__PURE__*/_jsx("div", {
+        children: content
+      }), awaitingItems && loadingIndicator]
+    });
+  };
+  return InfiniteContainer;
+}(Component);
 InfiniteContainer.contextType = RouteContext;
 InfiniteContainer.defaultProps = {
   columns: 2,

package/components/InfiniteContainer/spec.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { ITEMS_PER_LOAD } from "../../constants/DisplayOptions";
 import InfiniteContainer from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 global.console.error = jest.fn();
 const context = {
   state: {}
@@ -23,7 +24,9 @@ describe('<InfiniteContainer />', () => {
    * @param {Object} props The component props.
    */
   const renderComponent = props => {
-    renderedElement = shallow(/*#__PURE__*/React.createElement(InfiniteContainer, props), {
+    renderedElement = shallow(/*#__PURE__*/_jsx(InfiniteContainer, {
+      ...props
+    }), {
       context
     });
     renderedInstance = renderedElement.instance();
@@ -44,9 +47,9 @@ describe('<InfiniteContainer />', () => {
   };
   beforeEach(() => {
     mockLoader = jest.fn();
-    mockIterator = jest.fn(data => /*#__PURE__*/React.createElement("li", {
-      key: data.id
-    }, data.title));
+    mockIterator = jest.fn(data => /*#__PURE__*/_jsx("li", {
+      children: data.title
+    }, data.id));
   });
   describe('Given the component was mounted to the DOM', () => {
     beforeEach(() => {
@@ -182,7 +185,9 @@ describe('<InfiniteContainer />', () => {
         totalItems: mockData.length,
         requestHash: 'default'
       };
-      const wrapper = mount(/*#__PURE__*/React.createElement(InfiniteContainer, props));
+      const wrapper = mount(/*#__PURE__*/_jsx(InfiniteContainer, {
+        ...props
+      }));
       const instance = wrapper.instance();
       instance.componentDidMount();
       instance.domScrollContainer = document.createElement('div');