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

package/components/Router/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import "core-js/modules/es.string.replace.js";
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -16,6 +17,7 @@ import connect from "./connector";
  * Adds additional history listeners to compensate bugs and improve the behaviour within
  * browser environments.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const createBrowserListeners = () => {
   const {
     history
@@ -63,17 +65,18 @@ const createBrowserListeners = () => {
 /**
  * The Router component.
  */
-class Router extends React.Component {
+let Router = /*#__PURE__*/function (_React$Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function Router(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
     /**
      * Updates the user initialized component state
      */
-    this.setUserInitialized = () => {
-      this.setState({
+    _this.setUserInitialized = () => {
+      _this.setState({
         userInitialized: true
       });
     };
@@ -81,7 +84,7 @@ class Router extends React.Component {
      * Determines the current location from the browser history
      * @returns {string}
      */
-    this.getHistoryLocation = () => {
+    _this.getHistoryLocation = () => {
       const {
         hash,
         pathname,
@@ -93,11 +96,11 @@ class Router extends React.Component {
      * Determines if the current route is a protected route
      * @returns {null|string}
      */
-    this.getRouteProtector = () => authRoutes.getProtector(this.getHistoryLocation());
+    _this.getRouteProtector = () => authRoutes.getProtector(_this.getHistoryLocation());
     /**
      * @param {Object} data Data for the update method
      */
-    this.update = data => {
+    _this.update = data => {
       const {
         prev,
         next
@@ -107,12 +110,12 @@ class Router extends React.Component {
          * The only change right now compared to the original component. When invoked for "onUpdate"
          * only the updated route is passed instead of an object with prev and next.
          */
-        this.setState({
+        _this.setState({
           updated: Date.now()
         });
         return;
       }
-      this.setState({
+      _this.setState({
         prev: prev ? prev.id : null,
         next: next.id,
         updated: Date.now()
@@ -121,22 +124,24 @@ class Router extends React.Component {
     if (typeof props.history === 'function') {
       router.constructor(props.history);
     }
-    this.state = {
+    _this.contextValue = null;
+    _this.state = {
       prev: null,
       next: null,
       updated: null,
       userInitialized: false,
-      initialRouteProtected: !!this.getRouteProtector()
+      initialRouteProtected: !!_this.getRouteProtector()
     };
-    UIEvents.addListener(EVENT_USER_INITIALIZED, this.setUserInitialized);
-    onDidPush(this.update);
-    onDidPop(this.update);
-    onDidReplace(this.update);
-    onDidReset(this.update);
-    onUpdate(this.update);
+    UIEvents.addListener(EVENT_USER_INITIALIZED, _this.setUserInitialized);
+    onDidPush(_this.update);
+    onDidPop(_this.update);
+    onDidReplace(_this.update);
+    onDidReset(_this.update);
+    onUpdate(_this.update);
     if (hasWebBridge() || hasSGJavaScriptBridge()) {
       createBrowserListeners();
     }
+    return _this;
   }
 
   /**
@@ -144,7 +149,9 @@ class Router extends React.Component {
    * @param {Object} nextState The next component state.
    * @returns {boolean}
    */
-  shouldComponentUpdate(nextProps, nextState) {
+  _inheritsLoose(Router, _React$Component);
+  var _proto = Router.prototype;
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
     const {
       isUserLoggedIn
     } = this.props;
@@ -159,8 +166,8 @@ class Router extends React.Component {
    * Replaces the initial route with a protector if necessary
    * @param {Object} nextProps The next component props
    * @param {Object} nextState The next components state
-   */
-  UNSAFE_componentWillUpdate(nextProps, nextState) {
+   */;
+  _proto.UNSAFE_componentWillUpdate = function UNSAFE_componentWillUpdate(nextProps, nextState) {
     const {
       isUserLoggedIn
     } = nextProps;
@@ -203,6 +210,8 @@ class Router extends React.Component {
           }
         }
       });
+
+      // eslint-disable-next-line react/no-will-update-set-state
       this.setState({
         initialRouteProtected: false
       });
@@ -211,14 +220,14 @@ class Router extends React.Component {
 
   /**
    * Removes the listener for the EVENT_USER_INITIALIZED event
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     UIEvents.removeListener(EVENT_USER_INITIALIZED, this.setUserInitialized);
-  }
+  };
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       children
     } = this.props;
@@ -236,15 +245,23 @@ class Router extends React.Component {
       return null;
     }
     const stack = Array.from(routeStack.getAll());
-    return /*#__PURE__*/React.createElement(RouterContext.Provider, {
-      value: {
-        prev,
-        next,
-        stack
-      }
-    }, children);
-  }
-}
+    const nextContextValue = {
+      prev,
+      next,
+      stack
+    };
+
+    // Only update the reference if something actually changed.
+    if (!this.contextValue || this.contextValue.prev !== prev || this.contextValue.next !== next || this.contextValue.stack !== stack) {
+      this.contextValue = nextContextValue;
+    }
+    return /*#__PURE__*/_jsx(RouterContext.Provider, {
+      value: this.contextValue,
+      children: children
+    });
+  };
+  return Router;
+}(React.Component);
 Router.defaultProps = {
   history: null,
   isUserLoggedIn: false

package/components/ScannerContainer/index.js

@@ -1,4 +1,5 @@
-import React, { Fragment, PureComponent } from 'react';
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import AppScanner from '@shopgate/pwa-core/classes/Scanner';
 import connect from "./connector";
@@ -7,11 +8,16 @@ import connect from "./connector";
  * Wraps the Scanner overlay with functionality to automatically open and close the scanner,
  * as well as triggering the removal and reset of the background.
  */
-class ScannerContainer extends PureComponent {
+let ScannerContainer = /*#__PURE__*/function (_PureComponent) {
+  function ScannerContainer() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(ScannerContainer, _PureComponent);
+  var _proto = ScannerContainer.prototype;
   /**
    * Starts up the app scanner.
    */
-  async componentDidMount() {
+  _proto.componentDidMount = async function componentDidMount() {
     // Avoid trying to open the scanner if the app does not support it.
     if (!this.props.hasScannerSupport) {
       return;
@@ -22,8 +28,8 @@ class ScannerContainer extends PureComponent {
 
   /**
    * Shut down the app scanner.
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     if (!this.props.hasScannerSupport) {
       return;
     }
@@ -34,11 +40,12 @@ class ScannerContainer extends PureComponent {
   /**
    * Does not render anything when the app does not support the scanner.
    * @returns {JSX}
-   */
-  render() {
-    return /*#__PURE__*/React.createElement(Fragment, null, this.props.hasScannerSupport && this.props.children);
-  }
-}
+   */;
+  _proto.render = function render() {
+    return this.props.hasScannerSupport && this.props.children;
+  };
+  return ScannerContainer;
+}(PureComponent);
 ScannerContainer.defaultProps = {
   children: null,
   scannerDidClose: () => {},

package/components/Select/components/Item/index.js

@@ -8,10 +8,12 @@ import styles from "./style";
  * @param {React.Children} props.children - Some content to display inside.
  * @returns {JSX}
  */
-const SelectItem = props => /*#__PURE__*/React.createElement("div", {
+import { jsx as _jsx } from "react/jsx-runtime";
+const SelectItem = props => /*#__PURE__*/_jsx("div", {
   className: `${styles} ${props.className}`,
-  onTouchEnd: () => props.onSelect(props.value, props.label)
-}, props.label);
+  onTouchEnd: () => props.onSelect(props.value, props.label),
+  children: props.label
+});
 
 /**
  * The component prop types.

package/components/Select/index.js

@@ -1,7 +1,9 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styles from "./style";
 import SelectItem from "./components/Item";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_PLACEHOLDER_TEXT = 'Select ...';
 
 /**
@@ -28,23 +30,24 @@ const normalizeItem = item => ({
  * @param {Object} props - The component props.
  * @param {React.Children} props.children - Some content to display inside.
  */
-class Select extends Component {
+let Select = /*#__PURE__*/function (_Component) {
   /**
    * The constructor.
    * @param {Object} props - The component props.
    */
-  constructor(props) {
-    super(props);
+  function Select(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Triggers the onChange callback if the selected value has changed.
      * @param {Object} nextState - The next state.
      */
-    this.triggerChangeCallback = nextState => {
-      if (this.state.selected && this.state.selected.value === nextState.selected.value) {
+    _this.triggerChangeCallback = nextState => {
+      if (_this.state.selected && _this.state.selected.value === nextState.selected.value) {
         return;
       }
-      if (this.props.onChange instanceof Function) {
-        this.props.onChange(nextState.selected.value);
+      if (_this.props.onChange instanceof Function) {
+        _this.props.onChange(nextState.selected.value);
       }
     };
     /**
@@ -52,9 +55,9 @@ class Select extends Component {
      * In this case the select gets closed.
      * @param {Event} event - The event of the user interaction (e.g. TouchEvent).
      */
-    this.handleInteractionOutside = event => {
-      if (!this.domElement.contains(event.target)) {
-        this.setState({
+    _this.handleInteractionOutside = event => {
+      if (!_this.domElement.contains(event.target)) {
+        _this.setState({
           isOpen: false
         });
       }
@@ -64,7 +67,7 @@ class Select extends Component {
      * @param {*} value - The selected value.
      * @param {string} label - The selected label.
      */
-    this.handleItemSelect = (value, label) => {
+    _this.handleItemSelect = (value, label) => {
       const stateUpdate = {
         selected: {
           label,
@@ -72,41 +75,44 @@ class Select extends Component {
         },
         isOpen: false
       };
-      this.triggerChangeCallback(stateUpdate);
-      this.setState(stateUpdate);
+      _this.triggerChangeCallback(stateUpdate);
+      _this.setState(stateUpdate);
     };
     /**
      * Toggles the open state of the component.
      */
-    this.toggleOpenState = () => {
-      this.setState(({
+    _this.toggleOpenState = () => {
+      _this.setState(({
         isOpen
       }) => ({
         isOpen: !isOpen
       }));
     };
-    this.state = {
+    _this.state = {
       selected: null,
       isOpen: false
     };
-    this.domElement = null;
+    _this.domElement = null;
     if (props.value) {
-      this.state.selected = normalizeItem(findItemByValue(props.items, props.value));
+      _this.state.selected = normalizeItem(findItemByValue(props.items, props.value));
     }
+    return _this;
   }
 
   /**
    * Adds event listener when the component is mounted.
    */
-  componentDidMount() {
+  _inheritsLoose(Select, _Component);
+  var _proto = Select.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     document.addEventListener('touchstart', this.handleInteractionOutside);
   }
 
   /**
    * Updates the selected item when the value prop changes.
    * @param {Object} nextProps - The next props.
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+   */;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (!this.state.selected || nextProps.value !== this.state.selected.value) {
       this.state.selected = normalizeItem(findItemByValue(nextProps.items, nextProps.value));
     }
@@ -114,42 +120,48 @@ class Select extends Component {
 
   /**
    * Removes event listener when the component will unmount.
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     document.removeEventListener('touchstart', this.handleInteractionOutside);
-  }
+  };
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const hasSelection = this.state.selected && this.state.selected.value !== undefined;
     const selectedLabel = hasSelection ? this.state.selected.label : this.props.placeholder;
-    const items = this.state.isOpen ? /*#__PURE__*/React.createElement("div", {
-      className: styles.items
-    }, this.props.items.map(item => {
-      const normalizedItem = normalizeItem(item);
-      const selected = hasSelection && this.state.selected.value === normalizedItem.value;
-      return /*#__PURE__*/React.createElement(SelectItem, {
-        key: normalizedItem.value,
-        value: normalizedItem.value,
-        label: normalizedItem.label,
-        selected: selected,
-        onSelect: this.handleItemSelect
-      });
-    })) : null;
-    return /*#__PURE__*/React.createElement("div", {
+    const items = this.state.isOpen ? /*#__PURE__*/_jsx("div", {
+      className: styles.items,
+      children: this.props.items.map(item => {
+        const normalizedItem = normalizeItem(item);
+        const selected = hasSelection && this.state.selected.value === normalizedItem.value;
+        return /*#__PURE__*/_jsx(SelectItem, {
+          value: normalizedItem.value,
+          label: normalizedItem.label,
+          selected: selected,
+          onSelect: this.handleItemSelect
+        }, normalizedItem.value);
+      })
+    }) : null;
+    return /*#__PURE__*/_jsxs("div", {
       className: `${styles.container} ${this.props.className} common_select`,
       ref: ref => {
         this.domElement = ref;
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      onTouchStart: this.toggleOpenState
-    }, /*#__PURE__*/React.createElement("span", null, selectedLabel), /*#__PURE__*/React.createElement("span", {
-      className: styles.selectHandle
-    }, "\u25BE")), items);
-  }
-}
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        onTouchStart: this.toggleOpenState,
+        children: [/*#__PURE__*/_jsx("span", {
+          children: selectedLabel
+        }), /*#__PURE__*/_jsx("span", {
+          className: styles.selectHandle,
+          children: "\u25BE"
+        })]
+      }), items]
+    });
+  };
+  return Select;
+}(Component);
 /**
  * The component prop types.
  * @type {Object}

package/components/Select/spec.js

@@ -2,10 +2,11 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import Select from "./index";
 import SelectItem from "./components/Item";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Select />', () => {
   jest.useFakeTimers();
   it('opens and closes the item list', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Select, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Select, {}));
     let previousOpenState = wrapper.state('isOpen');
     wrapper.instance().toggleOpenState();
     expect(wrapper.state('isOpen')).toBe(!previousOpenState);
@@ -14,14 +15,14 @@ describe('<Select />', () => {
     expect(wrapper.state('isOpen')).toBe(!previousOpenState);
   });
   it('renders without items', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Select, null));
+    const wrapper = mount(/*#__PURE__*/_jsx(Select, {}));
     wrapper.instance().toggleOpenState();
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(SelectItem).length).toBe(0);
   });
   it('renders with implicit items (closed)', () => {
     const items = ['a', 'b', 'c', 'd', 'e', 'f'];
-    const wrapper = mount(/*#__PURE__*/React.createElement(Select, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Select, {
       items: items
     }));
     expect(wrapper).toMatchSnapshot();
@@ -29,7 +30,7 @@ describe('<Select />', () => {
   });
   it('renders with implicit items (opened)', () => {
     const items = ['a', 'b', 'c', 'd', 'e', 'f'];
-    const wrapper = mount(/*#__PURE__*/React.createElement(Select, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Select, {
       items: items
     }));
     wrapper.instance().toggleOpenState();
@@ -44,7 +45,7 @@ describe('<Select />', () => {
       value: 'e',
       label: 'E'
     }, 'f'];
-    const wrapper = mount(/*#__PURE__*/React.createElement(Select, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Select, {
       items: items
     }));
     wrapper.instance().toggleOpenState();
@@ -75,7 +76,7 @@ describe('<Select />', () => {
     const callback = value => {
       expect(value).toBe(items[selectionIndex]);
     };
-    const wrapper = mount(/*#__PURE__*/React.createElement(Select, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Select, {
       items: items,
       onChange: callback
     }));

package/components/SelectBox/components/Item/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -9,27 +10,32 @@ import { item } from "./style";
  * @param {Object} props The components props.
  * @returns {JSX}
  */
-class SelectBoxItem extends Component {
-  constructor(...args) {
-    super(...args);
+import { jsx as _jsx } from "react/jsx-runtime";
+let SelectBoxItem = /*#__PURE__*/function (_Component) {
+  function SelectBoxItem(...args) {
+    var _this;
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
     /**
      * Calls the handleSelectionUpdate prop and prevents further events.
      */
-    this.handleSelectionUpdate = () => {
-      this.props.handleSelectionUpdate(this.props.value);
+    _this.handleSelectionUpdate = () => {
+      _this.props.handleSelectionUpdate(_this.props.value);
     };
+    return _this;
   }
+  _inheritsLoose(SelectBoxItem, _Component);
+  var _proto = SelectBoxItem.prototype;
   /**
    * Renders the component
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const Wrapper = this.props.wrapper;
     const {
       selectItem,
       selectItemSelected
     } = this.props.classNames;
-    return /*#__PURE__*/React.createElement("li", {
+    return /*#__PURE__*/_jsx("li", {
       className: classNames(selectItem, item, {
         [selectItemSelected]: this.props.isSelected
       }),
@@ -39,12 +45,16 @@ class SelectBoxItem extends Component {
       role: "menuitem",
       ref: this.props.forwardedRef,
       tabIndex: this.props.isSelected ? '0' : '-1',
-      "aria-current": this.props.isSelected
-    }, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(I18n.Text, {
-      string: this.props.label
-    })));
-  }
-}
+      "aria-current": this.props.isSelected,
+      children: /*#__PURE__*/_jsx(Wrapper, {
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: this.props.label
+        })
+      })
+    });
+  };
+  return SelectBoxItem;
+}(Component);
 SelectBoxItem.defaultProps = {
   forwardedRef: null,
   classNames: {}