@shopgate/pwa-common 7.30.0-alpha.8 → 7.30.0-beta.1

package/components/SelectBox/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';
@@ -10,26 +11,22 @@ import styles from "./style";
 /**
  * The select box component.
  */
-class SelectBox extends Component {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let SelectBox = /*#__PURE__*/function (_Component) {
   /**
    * Initializes the component.
    * @param {Object} props The components props.
    */
-  constructor(props) {
-    super(props);
-    /**
-     * When dropdown animation is finished.
-     */
-    this.onDropdownComplete = () => {
-      this.dropdownCompleted = true;
-    };
+  function SelectBox(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Handles any interaction the user does outside of the component.
      * In this case the select gets closed.
      * @param {Object} event The event object.
      */
-    this.handleInteractionOutside = event => {
-      this.setState({
+    _this.handleInteractionOutside = event => {
+      _this.setState({
         isOpen: false
       });
       event.preventDefault();
@@ -38,61 +35,62 @@ class SelectBox extends Component {
     /**
      * Sets the open state to true
      */
-    this.handleOpenList = () => {
-      if (this.state.isOpen) {
+    _this.handleOpenList = () => {
+      if (_this.state.isOpen) {
         return;
       }
-      this.dropdownCompleted = false;
-      this.setState({
+      _this.setState({
         isOpen: true
       });
-      if (this.firstItemRef) {
-        this.firstItemRef.focus();
+      if (_this.firstItemRef) {
+        _this.firstItemRef.focus();
       }
     };
     /**
      * Sets the new active selection.
      * @param {string} value Value of the selected item.
      */
-    this.handleSelectionUpdate = value => {
-      const selection = find(this.props.items, {
+    _this.handleSelectionUpdate = value => {
+      const selection = find(_this.props.items, {
         value
       });
-      this.setState({
+      _this.setState({
         selected: selection,
         isOpen: false
       });
 
       // Delay the callback to make sure actions are fired after animations are done.
       setTimeout(() => {
-        this.props.handleSelectionUpdate(selection.value);
-      }, this.props.duration);
-      if (this.controlRef) {
-        this.controlRef.focus();
+        _this.props.handleSelectionUpdate(selection.value);
+      }, _this.props.duration);
+      if (_this.controlRef) {
+        _this.controlRef.focus();
       }
     };
     /** @param {HTMLElement} ref The element */
-    this.setControlRef = ref => {
-      this.controlRef = ref;
+    _this.setControlRef = ref => {
+      _this.controlRef = ref;
     };
     /** @param {HTMLElement} ref The element */
-    this.setFirstItemRef = ref => {
-      this.firstItemRef = ref;
+    _this.setFirstItemRef = ref => {
+      _this.firstItemRef = ref;
     };
-    this.dropdownCompleted = false;
-    this.state = {
+    _this.state = {
       isOpen: false,
       selected: find(props.items, {
         value: props.initialValue
       })
     };
+    return _this;
   }
 
   /**
    * Reset selected when changing the initial value.
     * @param {Object} nextProps The next props the component will receive.
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(SelectBox, _Component);
+  var _proto = SelectBox.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.initialValue !== nextProps.initialValue) {
       this.setState({
         selected: find(nextProps.items, {
@@ -100,12 +98,12 @@ class SelectBox extends Component {
         })
       });
     }
-  }
+  };
   /**
    * Renders the component
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const Icon = this.props.icon;
     const {
       icon,
@@ -120,54 +118,59 @@ class SelectBox extends Component {
     const iconClasses = classNames(icon, {
       [iconOpen]: this.state.isOpen && iconOpen !== null
     });
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsxs("div", {
       className: `${this.props.className} common__select-box`,
-      "data-test-id": this.props.testId
-    }, /*#__PURE__*/React.createElement("button", {
-      className: button,
-      onClick: this.handleOpenList,
-      "data-test-id": buttonLabel,
-      type: "button",
-      "aria-haspopup": true,
-      "aria-expanded": this.state.isOpen ? true : null,
-      "aria-controls": buttonLabel,
-      ref: this.setControlRef
-    }, /*#__PURE__*/React.createElement("span", {
-      className: selection
-    }, /*#__PURE__*/React.createElement(I18n.Text, {
-      string: buttonLabel
-    })), /*#__PURE__*/React.createElement("div", {
-      className: iconClasses
-    }, /*#__PURE__*/React.createElement(Icon, null))), /*#__PURE__*/React.createElement(Dropdown, {
-      className: dropdown,
-      isOpen: this.state.isOpen,
-      onComplete: this.onDropdownComplete,
-      duration: this.props.duration
-    }, /*#__PURE__*/React.createElement("ul", {
-      role: "menu",
-      id: buttonLabel,
-      tabIndex: "-1"
-    }, this.props.items.map(item => /*#__PURE__*/React.createElement(SelectBoxItem, {
-      classNames: {
-        selectItem,
-        selectItemSelected
-      },
-      wrapper: this.props.item,
-      key: item.value,
-      value: item.value,
-      label: item.label,
-      handleSelectionUpdate: this.handleSelectionUpdate,
-      isSelected: buttonLabel === item.label,
-      forwardedRef: buttonLabel === item.label ? this.setFirstItemRef : null
-    })))), this.state.isOpen && /*#__PURE__*/React.createElement("button", {
-      className: styles.overlay,
-      onClick: this.handleInteractionOutside,
-      onTouchMove: this.handleInteractionOutside,
-      type: "button",
-      "aria-hidden": true
-    }));
-  }
-}
+      "data-test-id": this.props.testId,
+      children: [/*#__PURE__*/_jsxs("button", {
+        className: button,
+        onClick: this.handleOpenList,
+        "data-test-id": buttonLabel,
+        type: "button",
+        "aria-haspopup": true,
+        "aria-expanded": this.state.isOpen ? true : null,
+        "aria-controls": buttonLabel,
+        ref: this.setControlRef,
+        children: [/*#__PURE__*/_jsx("span", {
+          className: selection,
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: buttonLabel
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: iconClasses,
+          children: /*#__PURE__*/_jsx(Icon, {})
+        })]
+      }), /*#__PURE__*/_jsx(Dropdown, {
+        className: dropdown,
+        isOpen: this.state.isOpen,
+        duration: this.props.duration,
+        children: /*#__PURE__*/_jsx("ul", {
+          role: "menu",
+          id: buttonLabel,
+          tabIndex: "-1",
+          children: this.props.items.map(item => /*#__PURE__*/_jsx(SelectBoxItem, {
+            classNames: {
+              selectItem,
+              selectItemSelected
+            },
+            wrapper: this.props.item,
+            value: item.value,
+            label: item.label,
+            handleSelectionUpdate: this.handleSelectionUpdate,
+            isSelected: buttonLabel === item.label,
+            forwardedRef: buttonLabel === item.label ? this.setFirstItemRef : null
+          }, item.value))
+        })
+      }), this.state.isOpen && /*#__PURE__*/_jsx("button", {
+        className: styles.overlay,
+        onClick: this.handleInteractionOutside,
+        onTouchMove: this.handleInteractionOutside,
+        type: "button",
+        "aria-hidden": true
+      })]
+    });
+  };
+  return SelectBox;
+}(Component);
 SelectBox.defaultProps = {
   className: '',
   classNames: {},

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,16 +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
 };