@shopgate/pwa-common 7.30.0-alpha.6 → 7.30.0-alpha.8

package/components/Input/components/SimpleInput.js

@@ -1,51 +1,227 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+/**
  * A component that takes care of rendering and validation of input fields.
  * 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.
- */var SimpleInput=/*#__PURE__*/function(_Component){/**
+ */
+class SimpleInput extends Component {
+  /**
    * Creates a new input component.
    * @param {Object} props The component properties.
-   */function SimpleInput(props){var _this2;_classCallCheck(this,SimpleInput);_this2=_callSuper(this,SimpleInput,[props]);/**
-   * Internal focus event handler.
-   * @param {Object} e The event object.
-   */_defineProperty(_this2,"handleFocus",function(e){_this2.setState({isFocused:true});_this2.props.onFocusChange(true,e);});/**
-   * Internal blur event handler.
-   * @param {Object} e The event object.
-   */_defineProperty(_this2,"handleBlur",function(e){var newState={isFocused:false};if(_this2.props.validateOnBlur){// Validate the value.
-newState.isValid=_this2.props.onValidate(_this2.value,false);}_this2.setState(newState);_this2.props.onFocusChange(false,e);});/**
-   * Internal change event handler.
-   * @param {Object} event The event object.
-   */_defineProperty(_this2,"handleChange",function(event){var _event$target,_event$target$validit;var value=_this2.state.value;var type=_this2.props.type;// Special handling to prevent invalid characters within number inputs on Firefox /  Safari
-if(type==='number'&&(event===null||event===void 0?void 0:(_event$target=event.target)===null||_event$target===void 0?void 0:(_event$target$validit=_event$target.validity)===null||_event$target$validit===void 0?void 0:_event$target$validit.badInput)){event.preventDefault();event.stopPropagation();_this2.ref.value=value;return;}// Sanitize the input value.
-var sanitizedValue=_this2.props.onSanitize(event.target.value||'');// Update the state.
-_this2.updateValue(sanitizedValue,!_this2.props.isControlled);// Emit an event.
-_this2.props.onChange(sanitizedValue,event);});_this2.ref=null;// Initially sanitize the value.
-var _sanitizedValue=_this2.props.onSanitize(_this2.props.value||'');_this2.state={value:_sanitizedValue,isValid:_this2.props.onValidate(_sanitizedValue,true),isFocused:false};return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Internal focus event handler.
+     * @param {Object} e The event object.
+     */
+    this.handleFocus = e => {
+      this.setState({
+        isFocused: true
+      });
+      this.props.onFocusChange(true, e);
+    };
+    /**
+     * Internal blur event handler.
+     * @param {Object} e The event object.
+     */
+    this.handleBlur = e => {
+      const newState = {
+        isFocused: false
+      };
+      if (this.props.validateOnBlur) {
+        // Validate the value.
+        newState.isValid = this.props.onValidate(this.value, false);
+      }
+      this.setState(newState);
+      this.props.onFocusChange(false, e);
+    };
+    /**
+     * Internal change event handler.
+     * @param {Object} event The event object.
+     */
+    this.handleChange = event => {
+      const {
+        value
+      } = this.state;
+      const {
+        type
+      } = 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;
+        return;
+      }
+
+      // Sanitize the input value.
+      const sanitizedValue = this.props.onSanitize(event.target.value || '');
+
+      // Update the state.
+      this.updateValue(sanitizedValue, !this.props.isControlled);
+
+      // Emit an event.
+      this.props.onChange(sanitizedValue, event);
+    };
+    this.ref = null;
+    // Initially sanitize the value.
+    const _sanitizedValue = this.props.onSanitize(this.props.value || '');
+    this.state = {
+      value: _sanitizedValue,
+      isValid: this.props.onValidate(_sanitizedValue, true),
+      isFocused: false
+    };
+  }
+
+  /**
    * Initially trigger onChange() to set the initial value.
-   */_inherits(SimpleInput,_Component);return _createClass(SimpleInput,[{key:"componentDidMount",value:function componentDidMount(){var sanitizedValue=this.props.onSanitize(this.props.value||'');this.props.onChange(sanitizedValue);}/**
+   */
+  componentDidMount() {
+    const sanitizedValue = this.props.onSanitize(this.props.value || '');
+    this.props.onChange(sanitizedValue);
+  }
+
+  /**
    * Updates the value of the input field if the props has been modified.
    * @param {Object} nextProps The new properties.
-   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    /**
      * Only set the state value if the value prop has been changed,
      * otherwise use the current input state.
-     */var sanitizedValue=this.props.onSanitize(nextProps.value||'');if(sanitizedValue!==this.state.value){this.updateValue(sanitizedValue,true);}}/**
+     */
+    const sanitizedValue = this.props.onSanitize(nextProps.value || '');
+    if (sanitizedValue !== this.state.value) {
+      this.updateValue(sanitizedValue, true);
+    }
+  }
+
+  /**
    * @returns {boolean} Whether the current value of the input field is valid.
-   */},{key:"isValid",get:function get(){return this.state.isValid;}/**
+   */
+  get isValid() {
+    return this.state.isValid;
+  }
+
+  /**
    * @return {boolean} Whether the input field is focused.
-   */},{key:"isFocused",get:function get(){return this.state.isFocused;}/**
+   */
+  get isFocused() {
+    return this.state.isFocused;
+  }
+
+  /**
    * @returns {string} The current value of the input field.
-   */},{key:"value",get:function get(){return this.state.value;}},{key:"handleRef",value:/**
+   */
+  get value() {
+    return this.state.value;
+  }
+  /**
    * Handles reference passing to callback and assignation.
    * @param {HTMLElement} ref The element
-   */function handleRef(ref){this.ref=ref;this.props.setRef(ref);}/**
+   */
+  handleRef(ref) {
+    this.ref = ref;
+    this.props.setRef(ref);
+  }
+
+  /**
    * 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.
-   */},{key:"updateValue",value:function updateValue(newValue,setOwnState){var newState={value:newValue};if(!this.props.validateOnBlur){// Validate while typing.
-newState.isValid=this.props.onValidate(newValue,false);}// Uncontrolled when setOwnState is true
-if(setOwnState){this.setState(newState);}}/**
+   */
+  updateValue(newValue, setOwnState) {
+    const newState = {
+      value: newValue
+    };
+    if (!this.props.validateOnBlur) {
+      // Validate while typing.
+      newState.isValid = this.props.onValidate(newValue, false);
+    }
+
+    // Uncontrolled when setOwnState is true
+    if (setOwnState) {
+      this.setState(newState);
+    }
+  }
+
+  /**
    * Renders the component.
    * @returns {JSX.Element}
-   */},{key:"render",value:function render(){var _this3=this;var _this$props=this.props,attributes=_this$props.attributes,className=_this$props.className,disabled=_this$props.disabled,id=_this$props.id,name=_this$props.name,password=_this$props.password,onKeyPress=_this$props.onKeyPress,maxLength=_this$props.maxLength,required=_this$props.required;var type=password?'password':this.props.type;var value=this.state.value;var autoComplete=this.props.autoComplete?'on':'off';var autoCorrect=this.props.autoCorrect?'on':'off';var InputComponent=this.props.inputComponent;return React.createElement(InputComponent,_extends({id:id,name:name,ref:function ref(_ref){return _this3.handleRef(_ref);},className:classNames(className,'simpleInput','common__simple-input'),type:type,inputMode:type==='number'?'decimal':null,pattern:type==='number'?'[0-9]*':null,min:type==='number'?0:null,step:type==='number'?'any':null,value:value,onKeyPress:onKeyPress// Use onInput for number fields to enable handling for invalid values
-// (onChange might to be triggered when the input is invalid)
-,onInput:type==='number'?this.handleChange:null,onChange:type!=='number'?this.handleChange:function(){},onFocus:this.handleFocus,onBlur:this.handleBlur,disabled:disabled,autoCorrect:autoCorrect,autoComplete:autoComplete,maxLength:maxLength,required:required},attributes));}}]);}(Component);_defineProperty(SimpleInput,"defaultProps",{attributes:null,autoComplete:false,autoCorrect:false,className:'',disabled:false,id:null,isControlled:false,maxLength:'',name:null,onChange:function onChange(){},onFocusChange:function onFocusChange(){},onKeyPress:function onKeyPress(){},onSanitize:function onSanitize(value){return value;},onValidate:function onValidate(){return true;},password:false,required:false,setRef:function setRef(){},type:'text',validateOnBlur:true,value:'',inputComponent:'input'});export default SimpleInput;
+   */
+  render() {
+    const {
+      attributes,
+      className,
+      disabled,
+      id,
+      name,
+      password,
+      onKeyPress,
+      maxLength,
+      required
+    } = this.props;
+    const type = password ? 'password' : this.props.type;
+    const {
+      value
+    } = this.state;
+    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({
+      id: id,
+      name: name,
+      ref: ref => this.handleRef(ref),
+      className: classNames(className, 'simpleInput', 'common__simple-input'),
+      type: type,
+      inputMode: type === 'number' ? 'decimal' : null,
+      pattern: type === 'number' ? '[0-9]*' : null,
+      min: type === 'number' ? 0 : null,
+      step: type === 'number' ? 'any' : null,
+      value: value,
+      onKeyPress: onKeyPress
+      // Use onInput for number fields to enable handling for invalid values
+      // (onChange might to be triggered when the input is invalid)
+      ,
+      onInput: type === 'number' ? this.handleChange : null,
+      onChange: type !== 'number' ? this.handleChange : () => {},
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      disabled: disabled,
+      autoCorrect: autoCorrect,
+      autoComplete: autoComplete,
+      maxLength: maxLength,
+      required: required
+    }, attributes));
+  }
+}
+SimpleInput.defaultProps = {
+  attributes: null,
+  autoComplete: false,
+  autoCorrect: false,
+  className: '',
+  disabled: false,
+  id: null,
+  isControlled: false,
+  maxLength: '',
+  name: null,
+  onChange: () => {},
+  onFocusChange: () => {},
+  onKeyPress: () => {},
+  onSanitize: value => value,
+  onValidate: () => true,
+  password: false,
+  required: false,
+  setRef: () => {},
+  type: 'text',
+  validateOnBlur: true,
+  value: '',
+  inputComponent: 'input'
+};
+export default SimpleInput;

package/components/Input/index.js

@@ -1,8 +1,37 @@
-import React from'react';import PropTypes from'prop-types';import SimpleInput from"./components/SimpleInput";import MultiLineInput from"./components/MultiLineInput";import DateInput from"./components/DateInput";/**
+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}
- */var isDateSupported=function isDateSupported(){var input=document.createElement('input');var value='a';input.setAttribute('type','date');input.setAttribute('value',value);return input.value!==value;};/**
+ */
+const isDateSupported = () => {
+  const input = document.createElement('input');
+  const value = 'a';
+  input.setAttribute('type', 'date');
+  input.setAttribute('value', value);
+  return input.value !== value;
+};
+
+/**
  * Input component.
  *
  * @param {Object} props Props
  * @return {JSX}
- */var Factory=function Factory(props){if(props.type==='date'&&!isDateSupported()){return React.createElement(DateInput,props);}if(props.multiLine){return React.createElement(MultiLineInput,props);}return React.createElement(SimpleInput,props);};Factory.defaultProps={multiLine:false,type:null};export default(function(props){return Factory(props);});
+ */
+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__*/React.createElement(SimpleInput, props);
+};
+Factory.defaultProps = {
+  multiLine: false,
+  type: null
+};
+export default props => Factory(props);

package/components/Input/spec.js

@@ -1 +1,122 @@
-import React from'react';import{mount,shallow}from'enzyme';import Input from"./index";describe('<Input />',function(){it('should render a simple input field',function(){var wrapper=mount(React.createElement(Input,null));expect(wrapper).toMatchSnapshot();expect(wrapper.find('input').length).toBe(1);});it('should render the input as password',function(){var wrapper=mount(React.createElement(Input,{password:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('input[type="password"]').length).toBe(1);});it('should render the input with a default value',function(){var wrapper=mount(React.createElement(Input,{value:"FooBar"}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('input[value="FooBar"]').length).toBe(1);});it('should trigger the onChange callback',function(){var onChangeMock=jest.fn();var wrapper=mount(React.createElement(Input,{onChange:onChangeMock}));wrapper.find('input').simulate('change',{target:{value:'a'}});expect(onChangeMock).toHaveBeenCalledTimes(2);expect(wrapper.find('input').props().value).toEqual('a');});it('should receive the correct value while typing',function(){var wrapper=mount(React.createElement(Input,null));var input=wrapper.find('input');input.simulate('change',{target:{value:'foobar'}});expect(wrapper).toMatchSnapshot();expect(wrapper.find('SimpleInput').instance().value).toBe('foobar');});it('should sanitize the input',function(){var wrapper=mount(React.createElement(Input,{onSanitize:function onSanitize(value){return value.toUpperCase();}}));var input=wrapper.find('input');input.simulate('change',{target:{value:'foobar'}});expect(wrapper).toMatchSnapshot();expect(wrapper.find('SimpleInput').instance().value).toBe('FOOBAR');});it('should validate the input',function(){var wrapper=mount(React.createElement(Input,{onValidate:function onValidate(){return false;}}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('SimpleInput').instance().isValid).toBe(false);});it('should focus the input',function(){var onFocusMock=jest.fn();var wrapper=mount(React.createElement(Input,{onFocusChange:onFocusMock}));var input=wrapper.find('input');expect(wrapper).toMatchSnapshot();expect(wrapper.find('SimpleInput').instance().isFocused).toBe(false);input.simulate('focus');expect(wrapper.find('SimpleInput').instance().isFocused).toBe(true);input.simulate('blur');expect(wrapper.find('SimpleInput').instance().isFocused).toBe(false);});it('should change the value on user input',function(){var wrapper=mount(React.createElement(Input,{value:"My initial value"}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('SimpleInput').instance().value).toBe('My initial value');var input=wrapper.find('input');input.simulate('change',{target:{value:'foobar'}});expect(wrapper.find('SimpleInput').instance().value).toBe('foobar');});it('should render a multiline input with empty content and react on change',function(){var multiLineValue="dfsdsdf\n    sdfdsff\n    dsf";var wrapper=mount(React.createElement(Input,{value:"",multiLine:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('MultiLineInput').instance().value).toEqual('');wrapper.setProps({value:multiLineValue});expect(wrapper.find('textarea').getDOMNode().innerHTML).toEqual(multiLineValue);});it('should render additional html attributes',function(){var wrapper=shallow(React.createElement(Input,{type:"date",attributes:{min:'1970-01-01',max:'2010-01-01'}})).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.prop('min')).toEqual('1970-01-01');expect(wrapper.prop('max')).toEqual('2010-01-01');});});
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import Input from "./index";
+describe('<Input />', () => {
+  it('should render a simple input field', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Input, null));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('input').length).toBe(1);
+  });
+  it('should render the input as password', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(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, {
+      value: "FooBar"
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('input[value="FooBar"]').length).toBe(1);
+  });
+  it('should trigger the onChange callback', () => {
+    const onChangeMock = jest.fn();
+    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+      onChange: onChangeMock
+    }));
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: 'a'
+      }
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    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 input = wrapper.find('input');
+    input.simulate('change', {
+      target: {
+        value: 'foobar'
+      }
+    });
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('SimpleInput').instance().value).toBe('foobar');
+  });
+  it('should sanitize the input', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+      onSanitize: value => value.toUpperCase()
+    }));
+    const input = wrapper.find('input');
+    input.simulate('change', {
+      target: {
+        value: 'foobar'
+      }
+    });
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('SimpleInput').instance().value).toBe('FOOBAR');
+  });
+  it('should validate the input', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+      onValidate: () => false
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('SimpleInput').instance().isValid).toBe(false);
+  });
+  it('should focus the input', () => {
+    const onFocusMock = jest.fn();
+    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+      onFocusChange: onFocusMock
+    }));
+    const input = wrapper.find('input');
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('SimpleInput').instance().isFocused).toBe(false);
+    input.simulate('focus');
+    expect(wrapper.find('SimpleInput').instance().isFocused).toBe(true);
+    input.simulate('blur');
+    expect(wrapper.find('SimpleInput').instance().isFocused).toBe(false);
+  });
+  it('should change the value on user input', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+      value: "My initial value"
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('SimpleInput').instance().value).toBe('My initial value');
+    const input = wrapper.find('input');
+    input.simulate('change', {
+      target: {
+        value: 'foobar'
+      }
+    });
+    expect(wrapper.find('SimpleInput').instance().value).toBe('foobar');
+  });
+  it('should render a multiline input with empty content and react on change', () => {
+    const multiLineValue = `dfsdsdf
+    sdfdsff
+    dsf`;
+    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+      value: "",
+      multiLine: true
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('MultiLineInput').instance().value).toEqual('');
+    wrapper.setProps({
+      value: multiLineValue
+    });
+    expect(wrapper.find('textarea').getDOMNode().innerHTML).toEqual(multiLineValue);
+  });
+  it('should render additional html attributes', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Input, {
+      type: "date",
+      attributes: {
+        min: '1970-01-01',
+        max: '2010-01-01'
+      }
+    })).dive();
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.prop('min')).toEqual('1970-01-01');
+    expect(wrapper.prop('max')).toEqual('2010-01-01');
+  });
+});

package/components/KeyboardConsumer/index.js

@@ -1,11 +1,52 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import{PureComponent}from'react';import PropTypes from'prop-types';import Event from'@shopgate/pwa-core/classes/Event';import{EVENT_KEYBOARD_WILL_CHANGE}from'@shopgate/pwa-core/constants/AppEvents';/**
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Event from '@shopgate/pwa-core/classes/Event';
+import { EVENT_KEYBOARD_WILL_CHANGE } from '@shopgate/pwa-core/constants/AppEvents';
+
+/**
  * Keyboard state consumer.
- */var KeyboardConsumer=/*#__PURE__*/function(_PureComponent){function KeyboardConsumer(){var _this2;_classCallCheck(this,KeyboardConsumer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,KeyboardConsumer,[].concat(args));_defineProperty(_this2,"state",{open:false,overlap:0,duration:0});/**
-   * Stores current keyboard state.
-   */_defineProperty(_this2,"handleKeyboardChange",function(_ref){var open=_ref.open,overlap=_ref.overlap,duration=_ref.duration;_this2.setState({open:open,overlap:overlap,duration:duration});});return _this2;}_inherits(KeyboardConsumer,_PureComponent);return _createClass(KeyboardConsumer,[{key:"componentDidMount",value:/**
+ */
+class KeyboardConsumer extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      open: false,
+      overlap: 0,
+      duration: 0
+    };
+    /**
+     * Stores current keyboard state.
+     */
+    this.handleKeyboardChange = ({
+      open,
+      overlap,
+      duration
+    }) => {
+      this.setState({
+        open,
+        overlap,
+        duration
+      });
+    };
+  }
+  /**
    * Listen to keyboard changes as soon as the component mounts.
-   */function componentDidMount(){Event.addCallback(EVENT_KEYBOARD_WILL_CHANGE,this.handleKeyboardChange);}/**
+   */
+  componentDidMount() {
+    Event.addCallback(EVENT_KEYBOARD_WILL_CHANGE, this.handleKeyboardChange);
+  }
+
+  /**
    * Remove listener when component will unmount.
-   */},{key:"componentWillUnmount",value:function componentWillUnmount(){Event.removeCallback(EVENT_KEYBOARD_WILL_CHANGE,this.handleKeyboardChange);}},{key:"render",value:/**
+   */
+  componentWillUnmount() {
+    Event.removeCallback(EVENT_KEYBOARD_WILL_CHANGE, this.handleKeyboardChange);
+  }
+  /**
    * @returns {JSX}
-   */function render(){return this.props.children(this.state);}}]);}(PureComponent);export default KeyboardConsumer;
+   */
+  render() {
+    return this.props.children(this.state);
+  }
+}
+export default KeyboardConsumer;

package/components/Link/connector.js

@@ -1 +1,7 @@
-import{connect}from'react-redux';import{historyPush,historyReplace}from"../../actions/router";var mapDispatchToProps={historyPush:historyPush,historyReplace:historyReplace};export default connect(null,mapDispatchToProps);
+import { connect } from 'react-redux';
+import { historyPush, historyReplace } from "../../actions/router";
+const mapDispatchToProps = {
+  historyPush,
+  historyReplace
+};
+export default connect(null, mapDispatchToProps);

package/components/Link/index.js

@@ -1,18 +1,103 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import{hasWebBridge}from'@shopgate/engage/core';import connect from"./connector";import styles from"./style";/**
+import "core-js/modules/es.string.replace.js";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { hasWebBridge } from '@shopgate/engage/core';
+import connect from "./connector";
+import styles from "./style";
+
+/**
  * Link component.
  * @param {Object} props Props for the component.
  * @returns {JSX}
- */var Link=/*#__PURE__*/function(_Component){function Link(){var _this2;_classCallCheck(this,Link);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Link,[].concat(args));/**
-   * Opens the link.
-   * @param {Event} e An event object.
-   */_defineProperty(_this2,"handleOpenLink",function(e){e.preventDefault();if(_this2.props.disabled){return;}var params={pathname:_this2.props.href,state:_extends({},_this2.props.state||{},{},_this2.props.target?{target:_this2.props.target}:{})};// setTimeout prevents double click while VoiceOver is active
-setTimeout(function(){if(_this2.props.replace){_this2.props.historyReplace(params);}else{_this2.props.historyPush(params);}},0);});/**
-   * key listener for screen readers
-   * @param {Object} event The event object
-   */_defineProperty(_this2,"handleKeyDown",function(event){if(event.key==='Enter'||event.key===' '){_this2.handleOpenLink(event);}});return _this2;}_inherits(Link,_Component);return _createClass(Link,[{key:"render",value:/**
+ */
+class Link extends Component {
+  constructor(...args) {
+    super(...args);
+    /**
+     * Opens the link.
+     * @param {Event} e An event object.
+     */
+    this.handleOpenLink = e => {
+      e.preventDefault();
+      if (this.props.disabled) {
+        return;
+      }
+      const params = {
+        pathname: this.props.href,
+        state: {
+          ...(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);
+        } else {
+          this.props.historyPush(params);
+        }
+      }, 0);
+    };
+    /**
+     * key listener for screen readers
+     * @param {Object} event The event object
+     */
+    this.handleKeyDown = event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        this.handleOpenLink(event);
+      }
+    };
+  }
+  /**
    * Renders the component.
    * @returns {JSX.Element}
-   */function render(){var _this$props=this.props,tag=_this$props.tag,className=_this$props.className,href=_this$props.href,children=_this$props.children,role=_this$props.role,ariaLabel=_this$props['aria-label'],ariaHidden=_this$props['aria-hidden'],tabIndex=_this$props.tabIndex;var Tag=tag;if(!hasWebBridge()&&tag==='a'){/**
+   */
+  render() {
+    const {
+      tag,
+      className,
+      href,
+      children,
+      role,
+      'aria-label': ariaLabel,
+      'aria-hidden': ariaHidden,
+      tabIndex
+    } = this.props;
+    let Tag = tag;
+    if (!hasWebBridge() && tag === 'a') {
+      /**
        * Don't use link tags on apps. Sometimes links are really opened since the preventDefault
        * doesn't work as expected which results in white pages.
-       */Tag='span';}return React.createElement(Tag,{className:"".concat(styles," ").concat(className," common__link"),onClick:this.handleOpenLink,onKeyDown:this.handleKeyDown,role:role,"data-test-id":"link: ".concat(href),"aria-label":ariaLabel,tabIndex:tabIndex,"aria-hidden":ariaHidden,href:href&&Tag==='a'?href:null},children);}}]);}(Component);_defineProperty(Link,"defaultProps",{'aria-hidden':null,'aria-label':null,className:'',disabled:false,replace:false,role:'link',tag:'div',tabIndex:null,target:null,state:{}});export var Disconnected=Link;export default connect(Link);
+       */
+      Tag = 'span';
+    }
+    return /*#__PURE__*/React.createElement(Tag, {
+      className: `${styles} ${className} common__link`,
+      onClick: this.handleOpenLink,
+      onKeyDown: this.handleKeyDown,
+      role: role,
+      "data-test-id": `link: ${href}`,
+      "aria-label": ariaLabel,
+      tabIndex: tabIndex,
+      "aria-hidden": ariaHidden,
+      href: href && Tag === 'a' ? href : null
+    }, children);
+  }
+}
+Link.defaultProps = {
+  'aria-hidden': null,
+  'aria-label': null,
+  className: '',
+  disabled: false,
+  replace: false,
+  role: 'link',
+  tag: 'div',
+  tabIndex: null,
+  target: null,
+  state: {}
+};
+export const Disconnected = Link;
+export default connect(Link);