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

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,

package/components/Input/index.js

@@ -2,18 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import SimpleInput from "./components/SimpleInput";
 import MultiLineInput from "./components/MultiLineInput";
-import DateInput from "./components/DateInput";
-
-/**
- * @returns {boolean}
- */
-const isDateSupported = () => {
-  const input = document.createElement('input');
-  const value = 'a';
-  input.setAttribute('type', 'date');
-  input.setAttribute('value', value);
-  return input.value !== value;
-};
 
 /**
  * Input component.
@@ -21,14 +9,16 @@ const isDateSupported = () => {
  * @param {Object} props Props
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Factory = props => {
-  if (props.type === 'date' && !isDateSupported()) {
-    return /*#__PURE__*/React.createElement(DateInput, props);
-  }
   if (props.multiLine) {
-    return /*#__PURE__*/React.createElement(MultiLineInput, props);
+    return /*#__PURE__*/_jsx(MultiLineInput, {
+      ...props
+    });
   }
-  return /*#__PURE__*/React.createElement(SimpleInput, props);
+  return /*#__PURE__*/_jsx(SimpleInput, {
+    ...props
+  });
 };
 Factory.defaultProps = {
   multiLine: false,

package/components/Input/spec.js

@@ -1,21 +1,22 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import Input from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Input />', () => {
   it('should render a simple input field', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, null));
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {}));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('input').length).toBe(1);
   });
   it('should render the input as password', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       password: true
     }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('input[type="password"]').length).toBe(1);
   });
   it('should render the input with a default value', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       value: "FooBar"
     }));
     expect(wrapper).toMatchSnapshot();
@@ -23,7 +24,7 @@ describe('<Input />', () => {
   });
   it('should trigger the onChange callback', () => {
     const onChangeMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       onChange: onChangeMock
     }));
     wrapper.find('input').simulate('change', {
@@ -35,7 +36,7 @@ describe('<Input />', () => {
     expect(wrapper.find('input').props().value).toEqual('a');
   });
   it('should receive the correct value while typing', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, null));
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {}));
     const input = wrapper.find('input');
     input.simulate('change', {
       target: {
@@ -46,7 +47,7 @@ describe('<Input />', () => {
     expect(wrapper.find('SimpleInput').instance().value).toBe('foobar');
   });
   it('should sanitize the input', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       onSanitize: value => value.toUpperCase()
     }));
     const input = wrapper.find('input');
@@ -59,7 +60,7 @@ describe('<Input />', () => {
     expect(wrapper.find('SimpleInput').instance().value).toBe('FOOBAR');
   });
   it('should validate the input', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       onValidate: () => false
     }));
     expect(wrapper).toMatchSnapshot();
@@ -67,7 +68,7 @@ describe('<Input />', () => {
   });
   it('should focus the input', () => {
     const onFocusMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       onFocusChange: onFocusMock
     }));
     const input = wrapper.find('input');
@@ -79,7 +80,7 @@ describe('<Input />', () => {
     expect(wrapper.find('SimpleInput').instance().isFocused).toBe(false);
   });
   it('should change the value on user input', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       value: "My initial value"
     }));
     expect(wrapper).toMatchSnapshot();
@@ -96,7 +97,7 @@ describe('<Input />', () => {
     const multiLineValue = `dfsdsdf
     sdfdsff
     dsf`;
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       value: "",
       multiLine: true
     }));
@@ -108,7 +109,7 @@ describe('<Input />', () => {
     expect(wrapper.find('textarea').getDOMNode().innerHTML).toEqual(multiLineValue);
   });
   it('should render additional html attributes', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Input, {
       type: "date",
       attributes: {
         min: '1970-01-01',

package/components/KeyboardConsumer/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Event from '@shopgate/pwa-core/classes/Event';
@@ -6,10 +7,11 @@ import { EVENT_KEYBOARD_WILL_CHANGE } from '@shopgate/pwa-core/constants/AppEven
 /**
  * Keyboard state consumer.
  */
-class KeyboardConsumer extends PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
+let KeyboardConsumer = /*#__PURE__*/function (_PureComponent) {
+  function KeyboardConsumer(...args) {
+    var _this;
+    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
+    _this.state = {
       open: false,
       overlap: 0,
       duration: 0
@@ -17,36 +19,40 @@ class KeyboardConsumer extends PureComponent {
     /**
      * Stores current keyboard state.
      */
-    this.handleKeyboardChange = ({
+    _this.handleKeyboardChange = ({
       open,
       overlap,
       duration
     }) => {
-      this.setState({
+      _this.setState({
         open,
         overlap,
         duration
       });
     };
+    return _this;
   }
+  _inheritsLoose(KeyboardConsumer, _PureComponent);
+  var _proto = KeyboardConsumer.prototype;
   /**
    * Listen to keyboard changes as soon as the component mounts.
    */
-  componentDidMount() {
+  _proto.componentDidMount = function componentDidMount() {
     Event.addCallback(EVENT_KEYBOARD_WILL_CHANGE, this.handleKeyboardChange);
   }
 
   /**
    * Remove listener when component will unmount.
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     Event.removeCallback(EVENT_KEYBOARD_WILL_CHANGE, this.handleKeyboardChange);
-  }
+  };
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     return this.props.children(this.state);
-  }
-}
+  };
+  return KeyboardConsumer;
+}(PureComponent);
 export default KeyboardConsumer;

package/components/Link/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import "core-js/modules/es.string.replace.js";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -10,34 +11,36 @@ import styles from "./style";
  * @param {Object} props Props for the component.
  * @returns {JSX}
  */
-class Link extends Component {
-  constructor(...args) {
-    super(...args);
+import { jsx as _jsx } from "react/jsx-runtime";
+let Link = /*#__PURE__*/function (_Component) {
+  function Link(...args) {
+    var _this;
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
     /**
      * Opens the link.
      * @param {Event} e An event object.
      */
-    this.handleOpenLink = e => {
+    _this.handleOpenLink = e => {
       e.preventDefault();
-      if (this.props.disabled) {
+      if (_this.props.disabled) {
         return;
       }
       const params = {
-        pathname: this.props.href,
+        pathname: _this.props.href,
         state: {
-          ...(this.props.state || {}),
-          ...(this.props.target ? {
-            target: this.props.target
+          ...(_this.props.state || {}),
+          ...(_this.props.target ? {
+            target: _this.props.target
           } : {})
         }
       };
 
       // setTimeout prevents double click while VoiceOver is active
       setTimeout(() => {
-        if (this.props.replace) {
-          this.props.historyReplace(params);
+        if (_this.props.replace) {
+          _this.props.historyReplace(params);
         } else {
-          this.props.historyPush(params);
+          _this.props.historyPush(params);
         }
       }, 0);
     };
@@ -45,17 +48,20 @@ class Link extends Component {
      * key listener for screen readers
      * @param {Object} event The event object
      */
-    this.handleKeyDown = event => {
+    _this.handleKeyDown = event => {
       if (event.key === 'Enter' || event.key === ' ') {
-        this.handleOpenLink(event);
+        _this.handleOpenLink(event);
       }
     };
+    return _this;
   }
+  _inheritsLoose(Link, _Component);
+  var _proto = Link.prototype;
   /**
    * Renders the component.
    * @returns {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       tag,
       className,
@@ -74,7 +80,7 @@ class Link extends Component {
        */
       Tag = 'span';
     }
-    return /*#__PURE__*/React.createElement(Tag, {
+    return /*#__PURE__*/_jsx(Tag, {
       className: `${styles} ${className} common__link`,
       onClick: this.handleOpenLink,
       onKeyDown: this.handleKeyDown,
@@ -83,10 +89,12 @@ class Link extends Component {
       "aria-label": ariaLabel,
       tabIndex: tabIndex,
       "aria-hidden": ariaHidden,
-      href: href && Tag === 'a' ? href : null
-    }, children);
-  }
-}
+      href: href && Tag === 'a' ? href : null,
+      children: children
+    });
+  };
+  return Link;
+}(Component);
 Link.defaultProps = {
   'aria-hidden': null,
   'aria-label': null,