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

package/collections/media-providers/YouTube.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import URLSearchParams from 'url-search-params';
 import MediaProvider from "./MediaProvider";
 
@@ -6,13 +7,18 @@ import MediaProvider from "./MediaProvider";
 /**
  * The YouTube media provider class.
  */
-class YouTubeMediaProvider extends MediaProvider {
+let YouTubeMediaProvider = /*#__PURE__*/function (_MediaProvider) {
+  function YouTubeMediaProvider() {
+    return _MediaProvider.apply(this, arguments) || this;
+  }
+  _inheritsLoose(YouTubeMediaProvider, _MediaProvider);
+  var _proto = YouTubeMediaProvider.prototype;
   /**
    * Retrieves a list of media containers for YouTube.
    * @param {ParentNode} container A DOM container that may contain YouTube iframes.
    * @returns {NodeListOf<Element>}
    */
-  getMediaContainers(container) {
+  _proto.getMediaContainers = function getMediaContainers(container) {
     return container.querySelectorAll('iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"]');
   }
 
@@ -21,8 +27,8 @@ class YouTubeMediaProvider extends MediaProvider {
    * @override
    * @param {ParentNode} container A DOM container.
    * @returns {YouTubeMediaProvider}
-   */
-  add(container) {
+   */;
+  _proto.add = function add(container) {
     const iframes = this.getMediaContainers(container);
     if (!iframes.length) {
       return this;
@@ -38,8 +44,8 @@ class YouTubeMediaProvider extends MediaProvider {
    *
    * @param {Document} document - The DOM document containing iframes to optimize.
    * @returns {YouTubeMediaProvider}
-   */
-  applyIframeOptimizations(document) {
+   */;
+  _proto.applyIframeOptimizations = function applyIframeOptimizations(document) {
     const iframes = this.getMediaContainers(document);
     if (!iframes.length) {
       return this;
@@ -67,8 +73,8 @@ class YouTubeMediaProvider extends MediaProvider {
    * Stops all playing videos within the DOM containers.
    * @override
    * @returns {YouTubeMediaProvider}
-   */
-  stop() {
+   */;
+  _proto.stop = function stop() {
     // Select all iframes in the document. Actually this should be done via the iframes
     // registered in this.containers, but that doesn't seem to work reliably anymore.
     // Since we had to find a quick fix for CURB-5033 we now select all iframes in the document
@@ -84,8 +90,9 @@ class YouTubeMediaProvider extends MediaProvider {
       }
     });
     return this;
-  }
-}
+  };
+  return YouTubeMediaProvider;
+}(MediaProvider);
 export default YouTubeMediaProvider;
 
 /* eslint-enable class-methods-use-this */

package/components/Backdrop/index.js

@@ -9,6 +9,7 @@ import style from "./style";
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function Backdrop({
   className,
   color,
@@ -66,24 +67,25 @@ function Backdrop({
     }
   }), [targetOpacity]);
   const combinedClassName = `${style} ${className} common__backdrop`;
-  return /*#__PURE__*/React.createElement(Transition, {
+  return /*#__PURE__*/_jsx(Transition, {
     in: isVisible,
     timeout: duration,
     mountOnEnter: true,
     unmountOnExit: true,
     appear: true,
-    nodeRef: nodeRef
-  }, state => /*#__PURE__*/React.createElement("div", {
-    ref: nodeRef,
-    "data-test-id": "Backdrop",
-    "aria-hidden": true,
-    className: combinedClassName,
-    onClick: onClick,
-    style: {
-      ...baseStyle,
-      ...transitionStyles[state]
-    }
-  }));
+    nodeRef: nodeRef,
+    children: state => /*#__PURE__*/_jsx("div", {
+      ref: nodeRef,
+      "data-test-id": "Backdrop",
+      "aria-hidden": true,
+      className: combinedClassName,
+      onClick: onClick,
+      style: {
+        ...baseStyle,
+        ...transitionStyles[state]
+      }
+    })
+  });
 }
 Backdrop.defaultProps = {
   className: '',

package/components/Backdrop/spec.js

@@ -1,19 +1,20 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import Backdrop from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Backdrop />', () => {
   let mockOpen;
   beforeEach(() => {
     mockOpen = jest.fn();
   });
   it('should render', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Backdrop, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Backdrop, {
       isVisible: true
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should execute callback when Backdrop is clicked', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Backdrop, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Backdrop, {
       isVisible: true,
       onClick: mockOpen
     }));

package/components/Button/index.js

@@ -1,4 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import style from "./style";
@@ -6,43 +7,54 @@ import style from "./style";
 /**
  * The button component.
  */
-class Button extends Component {
-  /**
-   * Getter for the calculated button props.
-   * @returns {Object}
-   */
-  get buttonProps() {
-    const {
-      children,
-      testId,
-      className,
-      disabled,
-      onClick,
-      ...props
-    } = this.props;
-    const buttonProps = {
-      className: `${className} ${style} common__button`,
-      disabled,
-      onClick: disabled ? null : onClick,
-      ...props
-    };
-    return buttonProps;
+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}
    */
-  render() {
+  _proto.render = function render() {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/button-has-type
-      React.createElement("button", _extends({
-        "data-test-id": this.props.testId
-      }, this.buttonProps), this.props.children)
+      _jsx("button", {
+        "data-test-id": this.props.testId,
+        ...this.buttonProps,
+        children: this.props.children
+      })
     );
-  }
-}
+  };
+  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);
 Button.defaultProps = {
   className: '',
   disabled: false,

package/components/Button/spec.js

@@ -1,34 +1,40 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Button from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Button />', () => {
   it('should render the button', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, null, "My content"));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Button, {
+      children: "My content"
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('button').length).toBe(1);
   });
   it('should render the button in disabled state', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
-      disabled: true
-    }, "My content"));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Button, {
+      disabled: true,
+      children: "My content"
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('button[disabled]').length).toBe(1);
   });
   it('should trigger the click event', () => {
     const callback = jest.fn();
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
-      onClick: callback
-    }, "My content"));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Button, {
+      onClick: callback,
+      children: "My content"
+    }));
     wrapper.simulate('click');
     expect(wrapper).toMatchSnapshot();
     expect(callback).toHaveBeenCalled();
   });
   it('should not trigger the click event when disabled', () => {
     const callback = jest.fn();
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Button, {
       disabled: true,
-      onClick: callback
-    }, "My content"));
+      onClick: callback,
+      children: "My content"
+    }));
     wrapper.simulate('click');
     expect(wrapper).toMatchSnapshot();
     expect(callback).not.toHaveBeenCalled();

package/components/Checkbox/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';
@@ -21,66 +22,68 @@ import classNames from 'classnames';
  * @extends {React.Component<CheckboxProps>}
  * @returns {JSX.Element}
  */
-class Checkbox extends Component {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let Checkbox = /*#__PURE__*/function (_Component) {
   /**
    * The checkbox component constructor.
    * It checks if the checkbox is a controlled or uncontrolled input and sets an internal state if
    * uncontrolled to keep track of th checked-state.
    * @param {Object} props The Checkbox properties.
    */
-  constructor(props) {
-    super(props);
+  function Checkbox(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Returns if the checkbox is checked or not.
      * @return {boolean} Is the checkbox checked?
      */
-    this.isChecked = () => typeof this.props.defaultChecked === 'undefined' ? this.props.checked // Controlled.
-    : this.state.checked // Uncontrolled.
+    _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.
      */
-    this.handleCheck = () => {
-      if (this.props.disabled) {
+    _this.handleCheck = () => {
+      if (_this.props.disabled) {
         return;
       }
-      const checked = !this.isChecked();
-      if (typeof this.props.defaultChecked !== 'undefined') {
+      const checked = !_this.isChecked();
+      if (typeof _this.props.defaultChecked !== 'undefined') {
         // Uncontrolled.
-        this.setState({
+        _this.setState({
           checked
         });
       }
-      this.props.onCheck(checked);
+      _this.props.onCheck(checked);
     };
     /**
      * Handler for keyDown events of the checkbox
      * @param {Object} e The keyDown event payload
      */
-    this.handleKeyDown = e => {
+    _this.handleKeyDown = e => {
       if (e.key === ' ') {
         // Toggle checkbox on "space" - mocks behavior of native checkboxes
-        this.handleCheck();
+        _this.handleCheck();
       }
     };
     /**
      * Renders the checked/unchecked icon.
      * @returns {JSX}
      */
-    this.renderIcon = () => this.isChecked() ? this.props.checkedIcon : this.props.uncheckedIcon;
+    _this.renderIcon = () => _this.isChecked() ? _this.props.checkedIcon : _this.props.uncheckedIcon;
     /**
      * Renders an input if a "name" prop is provided.
      * @returns {JSX}
      */
-    this.renderInput = () => {
+    _this.renderInput = () => {
       const {
         props: {
           name
         },
         isChecked
-      } = this;
-      return this.props.name ? /*#__PURE__*/React.createElement("input", {
+      } = _this;
+      return _this.props.name ? /*#__PURE__*/_jsx("input", {
         className: "input",
         type: "hidden",
         name: name,
@@ -92,25 +95,28 @@ class Checkbox extends Component {
      * @param {string} side Used to check against which side to render the label on.
      * @returns {JSX}
      */
-    this.renderLabelIfItIsOnThe = side => this.props.labelPosition === side ? this.props.label : null;
+    _this.renderLabelIfItIsOnThe = side => _this.props.labelPosition === side ? _this.props.label : null;
     if (typeof props.defaultChecked !== 'undefined') {
       // Uncontrolled input.
-      this.state = {
+      _this.state = {
         checked: props.defaultChecked
       };
     } else {
       // Controlled input
-      this.state = {
+      _this.state = {
         checked: props.checked
       };
     }
+    return _this;
   }
 
   /**
    * Make sure state is updated with new checked value when input is controlled
    * @param {Object} nextProps Contains the new "checked" status
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(Checkbox, _Component);
+  var _proto = Checkbox.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     // Update only for controlled input
     if (typeof this.props.defaultChecked === 'undefined') {
       if (this.state.checked !== nextProps.checked) {
@@ -119,22 +125,24 @@ class Checkbox extends Component {
         });
       }
     }
-  }
+  };
   /**
    * Renders the checkbox component.
    * @returns {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsxs("div", {
       className: classNames(this.props.className, 'checkbox', 'common__checkbox'),
       onClick: this.handleCheck,
       onKeyDown: this.handleKeyDown,
       role: "checkbox",
       "aria-checked": this.props.checked,
-      tabIndex: 0
-    }, this.renderInput(), this.renderLabelIfItIsOnThe('left'), this.renderIcon(), this.renderLabelIfItIsOnThe('right'));
-  }
-}
+      tabIndex: 0,
+      children: [this.renderInput(), this.renderLabelIfItIsOnThe('left'), this.renderIcon(), this.renderLabelIfItIsOnThe('right')]
+    });
+  };
+  return Checkbox;
+}(Component);
 Checkbox.defaultProps = {
   checked: undefined,
   className: undefined,

package/components/Checkbox/spec.js

@@ -6,55 +6,68 @@ import Checkbox from "./index";
  * Checked Icon
  * @returns {JSX}
  */
-const Checked = () => /*#__PURE__*/React.createElement("div", null);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Checked = () => /*#__PURE__*/_jsx("div", {});
 
 /**
  * Unchecked Icon
  * @returns {JSX}
  */
-const Unchecked = () => /*#__PURE__*/React.createElement("div", null);
+const Unchecked = () => /*#__PURE__*/_jsx("div", {});
 describe('<Checkbox />', () => {
   it('should render the checkbox with the label before the icon', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Checkbox, {
-      label: /*#__PURE__*/React.createElement("span", null, "Test Label Deluxe"),
+    const wrapper = shallow(/*#__PURE__*/_jsx(Checkbox, {
+      label: /*#__PURE__*/_jsx("span", {
+        children: "Test Label Deluxe"
+      }),
       labelPosition: "left",
-      checkedIcon: /*#__PURE__*/React.createElement(Checked, null),
-      uncheckedIcon: /*#__PURE__*/React.createElement(Unchecked, null),
+      checkedIcon: /*#__PURE__*/_jsx(Checked, {}),
+      uncheckedIcon: /*#__PURE__*/_jsx(Unchecked, {}),
       checked: false
     }));
-    const expected = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "Test Label Deluxe"), /*#__PURE__*/React.createElement(Unchecked, null));
+    const expected = /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("span", {
+        children: "Test Label Deluxe"
+      }), /*#__PURE__*/_jsx(Unchecked, {})]
+    });
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.matchesElement(expected)).toBeTruthy();
   });
   it('should render the checkbox with the label after the icon', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Checkbox, {
-      label: /*#__PURE__*/React.createElement("span", null, "Test Label Deluxe"),
+    const wrapper = shallow(/*#__PURE__*/_jsx(Checkbox, {
+      label: /*#__PURE__*/_jsx("span", {
+        children: "Test Label Deluxe"
+      }),
       labelPosition: "right",
-      checkedIcon: /*#__PURE__*/React.createElement(Checked, null),
-      uncheckedIcon: /*#__PURE__*/React.createElement(Unchecked, null),
+      checkedIcon: /*#__PURE__*/_jsx(Checked, {}),
+      uncheckedIcon: /*#__PURE__*/_jsx(Unchecked, {}),
       checked: false
     }));
-    const expected = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Unchecked, null), /*#__PURE__*/React.createElement("span", null, "Test Label Deluxe"));
+    const expected = /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx(Unchecked, {}), /*#__PURE__*/_jsx("span", {
+        children: "Test Label Deluxe"
+      })]
+    });
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.matchesElement(expected)).toBeTruthy();
   });
   it('should render the unchecked icon if "checked" is false', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Checkbox, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Checkbox, {
       checked: false,
       label: "Test Label Deluxe",
-      checkedIcon: /*#__PURE__*/React.createElement(Checked, null),
-      uncheckedIcon: /*#__PURE__*/React.createElement(Unchecked, null)
+      checkedIcon: /*#__PURE__*/_jsx(Checked, {}),
+      uncheckedIcon: /*#__PURE__*/_jsx(Unchecked, {})
     }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(Checked).length).toBe(0);
     expect(wrapper.find(Unchecked).length).toBe(1);
   });
   it('should render the unchecked icon if "checked" is false', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Checkbox, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Checkbox, {
       checked: true,
       label: "Test Label Deluxe",
-      checkedIcon: /*#__PURE__*/React.createElement(Checked, null),
-      uncheckedIcon: /*#__PURE__*/React.createElement(Unchecked, null)
+      checkedIcon: /*#__PURE__*/_jsx(Checked, {}),
+      uncheckedIcon: /*#__PURE__*/_jsx(Unchecked, {})
     }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(Checked).length).toBe(1);
@@ -62,10 +75,10 @@ describe('<Checkbox />', () => {
   });
   it('should call the callback with the inverted value', () => {
     const spy = jest.fn();
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Checkbox, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Checkbox, {
       label: "Test Label Deluxe",
-      checkedIcon: /*#__PURE__*/React.createElement(Checked, null),
-      uncheckedIcon: /*#__PURE__*/React.createElement(Unchecked, null),
+      checkedIcon: /*#__PURE__*/_jsx(Checked, {}),
+      uncheckedIcon: /*#__PURE__*/_jsx(Unchecked, {}),
       checked: false,
       onCheck: spy
     }));
@@ -73,10 +86,10 @@ describe('<Checkbox />', () => {
     expect(spy).toHaveBeenCalledWith(true);
   });
   it('should render an <input> element if a name prop is provided', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Checkbox, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Checkbox, {
       label: "Test Label Deluxe",
-      checkedIcon: /*#__PURE__*/React.createElement(Checked, null),
-      uncheckedIcon: /*#__PURE__*/React.createElement(Unchecked, null),
+      checkedIcon: /*#__PURE__*/_jsx(Checked, {}),
+      uncheckedIcon: /*#__PURE__*/_jsx(Unchecked, {}),
       defaultChecked: false,
       name: "myCheckbox"
     }));
@@ -86,10 +99,10 @@ describe('<Checkbox />', () => {
     expect(input.prop('value')).toEqual(0);
   });
   it('should work as an uncontrolled input', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Checkbox, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Checkbox, {
       label: "Test Label Deluxe",
-      checkedIcon: /*#__PURE__*/React.createElement(Checked, null),
-      uncheckedIcon: /*#__PURE__*/React.createElement(Unchecked, null),
+      checkedIcon: /*#__PURE__*/_jsx(Checked, {}),
+      uncheckedIcon: /*#__PURE__*/_jsx(Unchecked, {}),
       defaultChecked: false
     }));
     wrapper.simulate('click');

package/components/Consume/index.js

@@ -8,11 +8,14 @@ import buildParams from "./helpers/buildParams";
  * @param {Object} props.props The props to create.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Consume = ({
   children,
   context: {
     Consumer
   },
   props
-}) => /*#__PURE__*/React.createElement(Consumer, null, value => children(buildParams(value, props)));
+}) => /*#__PURE__*/_jsx(Consumer, {
+  children: value => children(buildParams(value, props))
+});
 export default Consume;