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

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');

package/components/Input/components/MultiLineInput.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React from 'react';
 import classNames from 'classnames';
 import { logger } from '@shopgate/pwa-core';
@@ -9,37 +9,42 @@ import SimpleInput from "./SimpleInput";
  * This component has no styling and should not be used directly.
  * You may want to use an appropriate form field component from the template instead.
  */
-class MultiLineInput extends SimpleInput {
+import { jsx as _jsx } from "react/jsx-runtime";
+let MultiLineInput = /*#__PURE__*/function (_SimpleInput) {
   /**
    * Creates a new input component.
    * @param {Object} props The component properties.
    */
-  constructor(props) {
-    super(props);
+  function MultiLineInput(props) {
+    var _this;
+    _this = _SimpleInput.call(this, props) || this;
     /**
      * Sets an initial height of the multiline HTMLElement.
      */
-    this.setBaseHeight = () => {
-      if (this.baseHeight !== null) {
+    _this.setBaseHeight = () => {
+      if (_this.baseHeight !== null) {
         return;
       }
-      this.baseHeight = this.ref.clientHeight;
+      _this.baseHeight = _this.ref.clientHeight;
     };
-    this.baseHeight = null;
+    _this.baseHeight = null;
     // First render must be empty.
-    const sanitizedValue = this.props.onSanitize('');
-    this.state = {
+    const sanitizedValue = _this.props.onSanitize('');
+    _this.state = {
       value: sanitizedValue,
-      isValid: this.props.onValidate(sanitizedValue, true),
+      isValid: _this.props.onValidate(sanitizedValue, true),
       isFocused: false
     };
+    return _this;
   }
 
   /**
    * Additional function to make avoid .setState use in componentDidMount
    * usage violation.
    */
-  doComponentDidMount() {
+  _inheritsLoose(MultiLineInput, _SimpleInput);
+  var _proto = MultiLineInput.prototype;
+  _proto.doComponentDidMount = function doComponentDidMount() {
     const sanitizedValue = this.props.onSanitize(this.props.value || '');
     this.props.onChange(sanitizedValue);
     this.setState({
@@ -52,37 +57,37 @@ class MultiLineInput extends SimpleInput {
   /**
    * Set real value and trigger second render.
    * Initially trigger onChange() to set the initial value.
-   */
-  componentDidMount() {
+   */;
+  _proto.componentDidMount = function componentDidMount() {
     // No super, would have to sanitize anyway.
     this.doComponentDidMount();
   }
 
   /**
    * Adjusts the element height.
-   */
-  componentDidUpdate() {
+   */;
+  _proto.componentDidUpdate = function componentDidUpdate() {
     if (!(this.ref instanceof HTMLElement)) {
       logger.error('Ref is not an HTMLElement');
       return;
     }
     this.ref.style.height = `${this.baseHeight}px`;
     this.ref.style.height = `${this.ref.scrollHeight}px`;
-  }
+  };
   /**
    * Handles reference passing to callback and assignation.
    * @param {HTMLElement} ref The element
    */
-  handleRef(ref) {
-    super.handleRef(ref);
+  _proto.handleRef = function handleRef(ref) {
+    _SimpleInput.prototype.handleRef.call(this, ref);
     this.setBaseHeight();
   }
 
   /**
    * Renders the component.
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     const {
       className,
       password,
@@ -94,7 +99,7 @@ class MultiLineInput extends SimpleInput {
     const {
       value
     } = this.state;
-    return /*#__PURE__*/React.createElement("textarea", _extends({
+    return /*#__PURE__*/_jsx("textarea", {
       id: this.props.id,
       name: this.props.name,
       ref: ref => this.handleRef(ref),
@@ -105,8 +110,10 @@ class MultiLineInput extends SimpleInput {
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       required: required,
-      disabled: disabled
-    }, attributes));
-  }
-}
+      disabled: disabled,
+      ...attributes
+    });
+  };
+  return MultiLineInput;
+}(SimpleInput);
 export default MultiLineInput;

package/components/Input/components/SimpleInput.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 classNames from 'classnames';
@@ -8,81 +9,86 @@ import classNames from 'classnames';
  * This component has no styling and should not be used directly.
  * You may want to use an appropriate form field component from the template instead.
  */
-class SimpleInput extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let SimpleInput = /*#__PURE__*/function (_Component) {
   /**
    * Creates a new input component.
    * @param {Object} props The component properties.
    */
-  constructor(props) {
-    super(props);
+  function SimpleInput(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Internal focus event handler.
      * @param {Object} e The event object.
      */
-    this.handleFocus = e => {
-      this.setState({
+    _this.handleFocus = e => {
+      _this.setState({
         isFocused: true
       });
-      this.props.onFocusChange(true, e);
+      _this.props.onFocusChange(true, e);
     };
     /**
      * Internal blur event handler.
      * @param {Object} e The event object.
      */
-    this.handleBlur = e => {
+    _this.handleBlur = e => {
       const newState = {
         isFocused: false
       };
-      if (this.props.validateOnBlur) {
+      if (_this.props.validateOnBlur) {
         // Validate the value.
-        newState.isValid = this.props.onValidate(this.value, false);
+        newState.isValid = _this.props.onValidate(_this.value, false);
       }
-      this.setState(newState);
-      this.props.onFocusChange(false, e);
+      _this.setState(newState);
+      _this.props.onFocusChange(false, e);
     };
     /**
      * Internal change event handler.
      * @param {Object} event The event object.
      */
-    this.handleChange = event => {
+    _this.handleChange = event => {
       const {
         value
-      } = this.state;
+      } = _this.state;
       const {
         type
-      } = this.props;
+      } = _this.props;
 
       // Special handling to prevent invalid characters within number inputs on Firefox /  Safari
       if (type === 'number' && event?.target?.validity?.badInput) {
         event.preventDefault();
         event.stopPropagation();
-        this.ref.value = value;
+        _this.ref.value = value;
         return;
       }
 
       // Sanitize the input value.
-      const sanitizedValue = this.props.onSanitize(event.target.value || '');
+      const sanitizedValue = _this.props.onSanitize(event.target.value || '');
 
       // Update the state.
-      this.updateValue(sanitizedValue, !this.props.isControlled);
+      _this.updateValue(sanitizedValue, !_this.props.isControlled);
 
       // Emit an event.
-      this.props.onChange(sanitizedValue, event);
+      _this.props.onChange(sanitizedValue, event);
     };
-    this.ref = null;
+    _this.ref = null;
     // Initially sanitize the value.
-    const _sanitizedValue = this.props.onSanitize(this.props.value || '');
-    this.state = {
+    const _sanitizedValue = _this.props.onSanitize(_this.props.value || '');
+    _this.state = {
       value: _sanitizedValue,
-      isValid: this.props.onValidate(_sanitizedValue, true),
+      isValid: _this.props.onValidate(_sanitizedValue, true),
       isFocused: false
     };
+    return _this;
   }
 
   /**
    * Initially trigger onChange() to set the initial value.
    */
-  componentDidMount() {
+  _inheritsLoose(SimpleInput, _Component);
+  var _proto = SimpleInput.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     const sanitizedValue = this.props.onSanitize(this.props.value || '');
     this.props.onChange(sanitizedValue);
   }
@@ -90,8 +96,8 @@ class SimpleInput extends Component {
   /**
    * Updates the value of the input field if the props has been modified.
    * @param {Object} nextProps The new properties.
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+   */;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     /**
      * Only set the state value if the value prop has been changed,
      * otherwise use the current input state.
@@ -102,31 +108,15 @@ class SimpleInput extends Component {
     }
   }
 
+  /* eslint-disable react/no-unused-class-component-methods */
   /**
    * @returns {boolean} Whether the current value of the input field is valid.
-   */
-  get isValid() {
-    return this.state.isValid;
-  }
-
-  /**
-   * @return {boolean} Whether the input field is focused.
-   */
-  get isFocused() {
-    return this.state.isFocused;
-  }
-
-  /**
-   * @returns {string} The current value of the input field.
-   */
-  get value() {
-    return this.state.value;
-  }
+   */;
   /**
    * Handles reference passing to callback and assignation.
    * @param {HTMLElement} ref The element
    */
-  handleRef(ref) {
+  _proto.handleRef = function handleRef(ref) {
     this.ref = ref;
     this.props.setRef(ref);
   }
@@ -135,8 +125,8 @@ class SimpleInput extends Component {
    * Updates and validates the internal state value of the input field.
    * @param {string} newValue The new value.
    * @param {boolean} setOwnState Specifies whether or not to update the internal state.
-   */
-  updateValue(newValue, setOwnState) {
+   */;
+  _proto.updateValue = function updateValue(newValue, setOwnState) {
     const newState = {
       value: newValue
     };
@@ -154,8 +144,8 @@ class SimpleInput extends Component {
   /**
    * Renders the component.
    * @returns {JSX.Element}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     const {
       attributes,
       className,
@@ -174,7 +164,7 @@ class SimpleInput extends Component {
     const autoComplete = this.props.autoComplete ? 'on' : 'off';
     const autoCorrect = this.props.autoCorrect ? 'on' : 'off';
     const InputComponent = this.props.inputComponent;
-    return /*#__PURE__*/React.createElement(InputComponent, _extends({
+    return /*#__PURE__*/_jsx(InputComponent, {
       id: id,
       name: name,
       ref: ref => this.handleRef(ref),
@@ -197,10 +187,36 @@ class SimpleInput extends Component {
       autoCorrect: autoCorrect,
       autoComplete: autoComplete,
       maxLength: maxLength,
-      required: required
-    }, attributes));
-  }
-}
+      required: required,
+      ...attributes
+    });
+  };
+  return _createClass(SimpleInput, [{
+    key: "isValid",
+    get: function () {
+      return this.state.isValid;
+    }
+
+    /**
+     * @return {boolean} Whether the input field is focused.
+     */
+  }, {
+    key: "isFocused",
+    get: function () {
+      return this.state.isFocused;
+    }
+    /* eslint-enable react/no-unused-class-component-methods */
+
+    /**
+     * @returns {string} The current value of the input field.
+     */
+  }, {
+    key: "value",
+    get: function () {
+      return this.state.value;
+    }
+  }]);
+}(Component);
 SimpleInput.defaultProps = {
   attributes: null,
   autoComplete: false,