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

package/components/SelectBox/spec.js

@@ -7,7 +7,8 @@ import SelectBox from "./index";
  * Mock Icon component.
  * @returns {JSX}
  */
-const MockIconComponent = () => /*#__PURE__*/React.createElement("span", {
+import { jsx as _jsx } from "react/jsx-runtime";
+const MockIconComponent = () => /*#__PURE__*/_jsx("span", {
   id: "icon"
 });
 
@@ -19,7 +20,9 @@ const MockIconComponent = () => /*#__PURE__*/React.createElement("span", {
  */
 const MockItemComponent = ({
   children
-}) => /*#__PURE__*/React.createElement("div", null, children);
+}) => /*#__PURE__*/_jsx("div", {
+  children: children
+});
 describe('<SelectBox>', () => {
   const dummyItems = [{
     label: 'My item #1',
@@ -32,7 +35,7 @@ describe('<SelectBox>', () => {
     value: 'item_3'
   }];
   it('should render the selectbox with given mock components', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(SelectBox, {
+    const wrapper = mount(/*#__PURE__*/_jsx(SelectBox, {
       icon: MockIconComponent,
       item: MockItemComponent,
       items: dummyItems
@@ -42,7 +45,7 @@ describe('<SelectBox>', () => {
     expect(wrapper.find(MockItemComponent).length).toEqual(3);
   });
   it('should render with a default text', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(SelectBox, {
+    const wrapper = mount(/*#__PURE__*/_jsx(SelectBox, {
       icon: MockIconComponent,
       item: MockItemComponent,
       items: dummyItems,
@@ -52,7 +55,7 @@ describe('<SelectBox>', () => {
     expect(wrapper.find('span').at(0).text()).toEqual('Foo');
   });
   it('should render with a preselected selection', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(SelectBox, {
+    const wrapper = mount(/*#__PURE__*/_jsx(SelectBox, {
       icon: MockIconComponent,
       item: MockItemComponent,
       items: dummyItems,

package/components/SurroundPortals/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Portal from "../Portal";
 import { AFTER, BEFORE } from "../../constants/Portals";
@@ -15,20 +15,24 @@ import { AFTER, BEFORE } from "../../constants/Portals";
  * @param {React.ReactNode} props.children Component children
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const SurroundPortals = ({
   portalName,
   portalProps,
   children
-}) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Portal, {
-  name: `${portalName}.${BEFORE}`,
-  props: portalProps
-}), /*#__PURE__*/React.createElement(Portal, {
-  name: portalName,
-  props: portalProps
-}, children), /*#__PURE__*/React.createElement(Portal, {
-  name: `${portalName}.${AFTER}`,
-  props: portalProps
-}));
+}) => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Portal, {
+    name: `${portalName}.${BEFORE}`,
+    props: portalProps
+  }), /*#__PURE__*/_jsx(Portal, {
+    name: portalName,
+    props: portalProps,
+    children: children
+  }), /*#__PURE__*/_jsx(Portal, {
+    name: `${portalName}.${AFTER}`,
+    props: portalProps
+  })]
+});
 SurroundPortals.defaultProps = {
   children: null,
   portalProps: null

package/components/Swiper/components/SwiperItem/index.js

@@ -1,8 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-// eslint-disable-next-line import/no-unresolved
 import { SwiperSlide } from 'swiper/react';
 import { item } from "./styles";
 
@@ -15,15 +13,18 @@ import { item } from "./styles";
  * @param {SwiperSlideProps} props The component props.
  * @returns {React.Node}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function SwiperItem({
   children,
   className,
   ...slideProps
 }) {
-  return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, slideProps, {
+  return /*#__PURE__*/_jsx(SwiperSlide, {
+    ...slideProps,
     className: classNames(item, className),
-    "data-test-id": "Slider"
-  }), children);
+    "data-test-id": "Slider",
+    children: children
+  });
 }
 SwiperItem.displayName = 'SwiperSlide';
 SwiperItem.defaultProps = {

package/components/Swiper/components/SwiperItem/spec.js

@@ -1,20 +1,24 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import SwiperItem from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
   useLayoutEffect: jest.requireActual('react').useEffect
 }));
 describe('<SwiperItem />', () => {
   it('should not render without children', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(SwiperItem, null, /*#__PURE__*/React.createElement("div", null)));
+    const wrapper = shallow(/*#__PURE__*/_jsx(SwiperItem, {
+      children: /*#__PURE__*/_jsx("div", {})
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.html()).toEqual('<div class="swiper-slide css-10a4qrv" data-test-id="Slider"><div></div></div>');
   });
   it('should add custom className', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(SwiperItem, {
-      className: "test"
-    }, /*#__PURE__*/React.createElement("div", null)));
+    const wrapper = shallow(/*#__PURE__*/_jsx(SwiperItem, {
+      className: "test",
+      children: /*#__PURE__*/_jsx("div", {})
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.html()).toEqual('<div class="swiper-slide css-10a4qrv test" data-test-id="Slider"><div></div></div>');
   });

package/components/Swiper/index.js

@@ -1,16 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo, useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
 import { A11y, Autoplay, FreeMode, Navigation, Pagination, Zoom } from 'swiper/modules';
-/* eslint-disable import/no-unresolved */
 import { Swiper as OriginalSwiper } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/a11y';
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';
 import 'swiper/css/zoom';
-/* eslint-enable import/no-unresolved */
 import { useReduceMotion } from '@shopgate/engage/a11y/hooks';
 import SwiperItem from "./components/SwiperItem";
 import { container, innerContainer, zoomFix, buttonNext, buttonPrev } from "./styles";
@@ -28,6 +25,7 @@ import { container, innerContainer, zoomFix, buttonNext, buttonPrev } from "./st
  * @param {SwiperClass} swiper Swiper instance
  * @param {boolean} loop Whether the loop mode should be enabled or not.
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const handleLoopPropUpdate = (swiper, loop) => {
   const realIndex = swiper?.realIndex || 0;
 
@@ -102,7 +100,7 @@ const Swiper = ({
    * @type {SwiperCmpProps}
    */
   const internalProps = useMemo(() => ({
-    modules: [A11y, Autoplay, FreeMode, Navigation, Pagination, Zoom, ...(Array.isArray(additionalModules) ? additionalModules : [])],
+    modules: [A11y, Autoplay, FreeMode, Navigation, Pagination, Zoom].concat(Array.isArray(additionalModules) ? additionalModules : []),
     className: cls(innerContainer, classNames.container, {
       [zoomFix]: swiperProps?.zoom
     }),
@@ -188,23 +186,28 @@ const Swiper = ({
       onBreakpoint(swiper, breakpoint);
     }
   }, [delay, loopProp, onBreakpoint]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: cls(container, className, 'common__swiper'),
-    "aria-hidden": ariaHidden
-  }, /*#__PURE__*/React.createElement(OriginalSwiper, _extends({
-    "aria-live": "off",
-    a11y: {
-      enabled: false
-    }
-  }, internalProps, swiperProps, {
-    loop: shouldLoop,
-    onBreakpoint: handleOnBreakpoint,
-    ref: swiperRef
-  }), children, hasControls && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: `swiper-button-next ${buttonNext}`
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `swiper-button-prev ${buttonPrev}`
-  }))));
+    "aria-hidden": ariaHidden,
+    children: /*#__PURE__*/_jsxs(OriginalSwiper, {
+      "aria-live": "off",
+      a11y: {
+        enabled: false
+      },
+      ...internalProps,
+      ...swiperProps,
+      loop: shouldLoop,
+      onBreakpoint: handleOnBreakpoint,
+      ref: swiperRef,
+      children: [children, hasControls && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
+          className: `swiper-button-next ${buttonNext}`
+        }), /*#__PURE__*/_jsx("div", {
+          className: `swiper-button-prev ${buttonPrev}`
+        })]
+      })]
+    })
+  });
 };
 Swiper.Item = SwiperItem;
 Swiper.defaultProps = {

package/components/Toaster/index.js

@@ -6,7 +6,10 @@ import ToastContext from "../../providers/toast/context";
  * The Toaster component.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Toaster = ({
   render
-}) => /*#__PURE__*/React.createElement(ToastContext.Consumer, null, context => render(context));
+}) => /*#__PURE__*/_jsx(ToastContext.Consumer, {
+  children: context => render(context)
+});
 export default Toaster;

package/components/Transition/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import isEqual from 'lodash/isEqual';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -8,19 +9,24 @@ import gsap from 'gsap';
  * Handles a transition of an object.
  * This component only can have one child element at a time!
  */
-class Transition extends Component {
+let Transition = /*#__PURE__*/function (_Component) {
+  function Transition() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(Transition, _Component);
+  var _proto = Transition.prototype;
   /**
    * Runs the transition animation initially.
    */
-  componentDidMount() {
+  _proto.componentDidMount = function componentDidMount() {
     this.animate();
   }
 
   /**
    * Checks if transition related props (from/to) have updated and runs the animation.
    * @param {Object} nextProps - The received props.
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+   */;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (!isEqual(this.props.from, nextProps.from) || !isEqual(this.props.to, nextProps.to)) {
       this.animate(nextProps);
     }
@@ -29,8 +35,8 @@ class Transition extends Component {
   /**
    * Returns the first child of children.
    * @returns {React.Element}
-   */
-  getFirstChild() {
+   */;
+  _proto.getFirstChild = function getFirstChild() {
     return React.Children.map(this.props.children, (element, idx) => (/*#__PURE__*/React.cloneElement(element, {
       ref: idx
     })))[0];
@@ -39,8 +45,8 @@ class Transition extends Component {
   /**
    * Sets the transition state and runs the transition animation.
    * @param {Object} props - The props object the animation should be based upon.
-   */
-  animate(props = this.props) {
+   */;
+  _proto.animate = function animate(props = this.props) {
     // eslint-disable-next-line react/no-find-dom-node, react/no-string-refs
     const element = findDOMNode(this.refs[0]);
     const duration = props.duration / 1000;
@@ -83,11 +89,12 @@ class Transition extends Component {
   /**
    * Renders the component.
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     return React.Children.only(this.getFirstChild());
-  }
-}
+  };
+  return Transition;
+}(Component);
 Transition.defaultProps = {
   easing: 'Power1.easeOut',
   origin: '0 0 0',

package/components/Widgets/components/Widget/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
@@ -7,12 +8,18 @@ import styles from "./style";
 /**
  * The widget component.
  */
-class Widget extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Widget = /*#__PURE__*/function (_Component) {
+  function Widget() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(Widget, _Component);
+  var _proto = Widget.prototype;
   /**
    * @param {Object} nextProps The next component props.
    * @return {boolean}
    */
-  shouldComponentUpdate(nextProps) {
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
     if (this.props.component !== nextProps.component) return true;
     if (!isEqual(this.props.config, nextProps.config)) return true;
     return false;
@@ -20,8 +27,8 @@ class Widget extends Component {
 
   /**
    * @return {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     const {
       col,
       row,
@@ -32,24 +39,28 @@ class Widget extends Component {
     if (!this.props.component) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(Grid.Item, {
+    return /*#__PURE__*/_jsx(Grid.Item, {
       className: `common__widgets__widget ${styles.widgetCell({
         col,
         row,
         height,
         width
       })}`,
-      component: "div"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.content
-    }, /*#__PURE__*/React.createElement(Suspense, {
-      fallback: /*#__PURE__*/React.createElement(Loading, null)
-    }, /*#__PURE__*/React.createElement(this.props.component, {
-      settings,
-      ratio: [width, height]
-    }))));
-  }
-}
+      component: "div",
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.content,
+        children: /*#__PURE__*/_jsx(Suspense, {
+          fallback: /*#__PURE__*/_jsx(Loading, {}),
+          children: /*#__PURE__*/React.createElement(this.props.component, {
+            settings,
+            ratio: [width, height]
+          })
+        })
+      })
+    });
+  };
+  return Widget;
+}(Component);
 Widget.defaultProps = {
   component: null
 };

package/components/Widgets/components/Widget/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Grid from "../../../Grid";
 import Widget from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
   Suspense: function Suspense({
@@ -15,7 +16,7 @@ jest.mock('react', () => ({
  * A dummy component.
  * @returns {JSX}
  */
-const MyComponent = () => /*#__PURE__*/React.createElement("div", null);
+const MyComponent = () => /*#__PURE__*/_jsx("div", {});
 const widgets = {
   '@shopgate/commerce-widgets/image': MyComponent
 };
@@ -28,7 +29,7 @@ describe('<Widget />', () => {
       width: 12,
       height: 6
     };
-    const wrapper = mount(/*#__PURE__*/React.createElement(Widget, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Widget, {
       config: config,
       component: widgets[config.type]
     }));
@@ -43,7 +44,7 @@ describe('<Widget />', () => {
       width: 6,
       height: 6
     };
-    const wrapper = mount(/*#__PURE__*/React.createElement(Widget, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Widget, {
       config: config,
       component: widgets[config.type],
       cellSize: 100
@@ -60,7 +61,7 @@ describe('<Widget />', () => {
       width: 12,
       height: 6
     };
-    const wrapper = mount(/*#__PURE__*/React.createElement(Widget, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Widget, {
       config: config,
       component: widgets[config.type]
     }));

package/components/Widgets/components/WidgetGrid/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
@@ -9,12 +10,18 @@ import shouldShowWidget from "../../helpers/shouldShowWidget";
 /**
  * The WidgetGrid component.
  */
-class WidgetGrid extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let WidgetGrid = /*#__PURE__*/function (_Component) {
+  function WidgetGrid() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(WidgetGrid, _Component);
+  var _proto = WidgetGrid.prototype;
   /**
    * @param {Object} nextProps The next component props.
    * @return {boolean}
    */
-  shouldComponentUpdate(nextProps) {
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
     if (!isEqual(this.props.components, nextProps.components)) return true;
     if (!isEqual(this.props.config, nextProps.config)) return true;
     return false;
@@ -23,8 +30,8 @@ class WidgetGrid extends Component {
   /**
    * Render the component.
    * @return {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     const {
       components,
       config
@@ -36,21 +43,22 @@ class WidgetGrid extends Component {
     // TODO: This should not happen within every render call.
     // Sort the widgets by row. This has to happen to take care of the z-index flow.
     const widgets = sortBy(config, ['row']).filter(w => shouldShowWidget(w.settings));
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${styles} common__widgets__widget-grid`
-    }, Object.keys(widgets).map(key => {
-      const widget = widgets[key];
-      const widgetKey = `w${key}`;
-      // Map to the correct widget component using the `type` key inside the widget.
-      const WidgetComponent = components[widget.type];
-      return /*#__PURE__*/React.createElement(Widget, {
-        config: widget,
-        component: WidgetComponent,
-        key: widgetKey
-      });
-    }));
-  }
-}
+    return /*#__PURE__*/_jsx("div", {
+      className: `${styles} common__widgets__widget-grid`,
+      children: Object.keys(widgets).map(key => {
+        const widget = widgets[key];
+        const widgetKey = `w${key}`;
+        // Map to the correct widget component using the `type` key inside the widget.
+        const WidgetComponent = components[widget.type];
+        return /*#__PURE__*/_jsx(Widget, {
+          config: widget,
+          component: WidgetComponent
+        }, widgetKey);
+      })
+    });
+  };
+  return WidgetGrid;
+}(Component);
 WidgetGrid.defaultProps = {
   config: []
 };

package/components/Widgets/components/WidgetGrid/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import WidgetGrid from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
   Suspense: function Suspense({
@@ -14,7 +15,7 @@ jest.mock('react', () => ({
  * A mock Image component.
  * @returns {JSX}
  */
-const Image = () => /*#__PURE__*/React.createElement("div", null);
+const Image = () => /*#__PURE__*/_jsx("div", {});
 const components = {
   '@shopgate/commerce-widgets/image': Image
 };
@@ -31,7 +32,7 @@ describe('<WidgetGrid />', () => {
       },
       type: '@shopgate/commerce-widgets/image'
     }];
-    const wrapper = mount(/*#__PURE__*/React.createElement(WidgetGrid, {
+    const wrapper = mount(/*#__PURE__*/_jsx(WidgetGrid, {
       config: config,
       components: components
     }));
@@ -39,7 +40,7 @@ describe('<WidgetGrid />', () => {
     expect(wrapper.find(Image).length).toEqual(1);
   });
   it('should not render without a `config` prop', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(WidgetGrid, {
+    const wrapper = mount(/*#__PURE__*/_jsx(WidgetGrid, {
       components: components
     }));
     expect(wrapper).toMatchSnapshot();