@shopgate/pwa-common 7.12.7-beta.1 → 7.20.0-beta.10

package/components/Image/index.js

@@ -1,31 +1,31 @@
-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 _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}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 _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{themeColors}from'@shopgate/pwa-common/helpers/config';import{getFullImageSource,logger}from'@shopgate/engage/core';import Transition from"../Transition";import styles from"./style";/**
+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 _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}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{themeColors}from'@shopgate/pwa-common/helpers/config';import{getFullImageSource,logger}from'@shopgate/engage/core';import Transition from"../Transition";import styles from"./style";/**
  * The image component. It supports lazy and progressive loading of images.
- */var Image=/*#__PURE__*/function(_Component){_inherits(Image,_Component);/**
+ */var Image=/*#__PURE__*/function(_Component){/**
    * Sets the initial state, to not render image slider component yet.
    * @param {Object} props The components props.
-   */function Image(props){var _this;_classCallCheck(this,Image);_this=_possibleConstructorReturn(this,_getPrototypeOf(Image).call(this,props));logger.assert(!props.srcmap,'Use of srcmap prop is deprecated. Use resolutions instead');/**
+   */function Image(props){var _this2;_classCallCheck(this,Image);_this2=_callSuper(this,Image,[props]);logger.assert(!props.srcmap,'Use of srcmap prop is deprecated. Use resolutions instead');/**
      * The initial component state.
      * Pre-loads all resolutions if already cached will
      * set the state for the resolution to true.
      * @type {Object}
-     */if(props.srcmap){_this.state={loaded:props.srcmap.map(function(image,index){return _this.loadImage(image,index);})};}else{_this.state={loaded:props.resolutions.map(function(resolution,index){return _this.loadImage(_this.props.src,index);})};}_this.mounted=false;return _this;}/**
+     */if(props.srcmap){_this2.state={loaded:props.srcmap.map(function(image,index){return _this2.loadImage(image,index);})};}else{_this2.state={loaded:props.resolutions.map(function(resolution,index){return _this2.loadImage(_this2.props.src,index);})};}_this2.mounted=false;return _this2;}/**
    * When component is added to the DOM.
-   */_createClass(Image,[{key:"componentDidMount",value:function componentDidMount(){this.mounted=true;}/**
+   */_inherits(Image,_Component);return _createClass(Image,[{key:"componentDidMount",value:function componentDidMount(){this.mounted=true;}/**
    * When component was removed from DOM.
    */},{key:"componentWillUnmount",value:function componentWillUnmount(){this.mounted=false;}/**
    * Sets the image ratio based on width and height.
    * @return {number} The image ratio.
-   */},{key:"imageLoaded",/**
+   */},{key:"imageRatio",get:function get(){if(this.props.ratio){var _this$props$ratio2=_slicedToArray(this.props.ratio,2),x=_this$props$ratio2[0],y=_this$props$ratio2[1];return(y/x*100).toFixed(3);}var _this$props$resolutio=this.props.resolutions[this.props.resolutions.length-1],width=_this$props$resolutio.width,height=_this$props$resolutio.height;return(height/width*100).toFixed(3);}/**
    * Image loaded event listener
    * @param {number} resolutionIndex The index of the loaded resolution
-   */value:function imageLoaded(resolutionIndex){if(!this.mounted){return;}this.setState(function(_ref){var loaded=_ref.loaded;return{loaded:loaded.map(function(entry,index){if(resolutionIndex===index){return true;}return entry;})};});if(!this.props.srcmap&&resolutionIndex===this.props.resolutions.length-1){this.props.highestResolutionLoaded();}if(this.props.srcmap&&resolutionIndex===this.props.srcmap.length-1){this.props.highestResolutionLoaded();}}/**
+   */},{key:"imageLoaded",value:function imageLoaded(resolutionIndex){if(!this.mounted){return;}this.setState(function(_ref){var loaded=_ref.loaded;return{loaded:loaded.map(function(entry,index){if(resolutionIndex===index){return true;}return entry;})};});if(!this.props.srcmap&&resolutionIndex===this.props.resolutions.length-1){this.props.highestResolutionLoaded();}if(this.props.srcmap&&resolutionIndex===this.props.srcmap.length-1){this.props.highestResolutionLoaded();}}/**
    * Pre-loads the given image in given resolution
    * @param {string} src Source to the image.
    * @param {number} resolutionIndex The index of the loaded resolution.
    * @returns {number} true if image is already in cache.
-   */},{key:"loadImage",value:function loadImage(src,resolutionIndex){var _this2=this;var image=new window.Image();image.onload=function(){_this2.imageLoaded(resolutionIndex);if(_this2.props.onLoad){_this2.props.onLoad();}};image.onerror=function(){if(_this2.props.onError){_this2.props.onError();}};if(!this.props.srcmap){image.src=getFullImageSource(src,this.props.resolutions[resolutionIndex]);}else{image.src=src;}return image.complete;}/**
+   */},{key:"loadImage",value:function loadImage(src,resolutionIndex){var _this3=this;var image=new window.Image();image.onload=function(){_this3.imageLoaded(resolutionIndex);if(_this3.props.onLoad){_this3.props.onLoad();}};image.onerror=function(){if(_this3.props.onError){_this3.props.onError();}};if(!this.props.srcmap){image.src=getFullImageSource(src,this.props.resolutions[resolutionIndex]);}else{image.src=src;}return image.complete;}/**
    * Renders the smooth image component.
    * @returns {JSX}
    */},{key:"render",value:function render(){var index=this.state.loaded.lastIndexOf(true);var src=null;if(index>-1){src=!this.props.srcmap?getFullImageSource(this.props.src,this.props.resolutions[index]):this.props.srcmap[index];}var innerImage=null;if(src&&!this.props.forcePlaceholder){// Applies a blur effect to every resolution that has the blur flag set to true.
 var inlineStyles={width:'100%'};if(!this.props.srcmap&&this.props.resolutions[index].blur){inlineStyles.filter="blur(".concat(this.props.resolutions[index].blur,"px)");}// Renders the actual image.
-innerImage=React.createElement("img",{className:this.props.classNameImg||styles.image,src:src,style:inlineStyles,alt:this.props.alt,"aria-label":this.props.alt,role:"presentation","data-test-id":"image"});}if(this.props.unwrapped){return innerImage;}var containerStyle=styles.container(this.props.backgroundColor,"".concat(this.imageRatio,"%"));if(!this.props.animating||!this.props.transition){return React.createElement("div",{className:"".concat(containerStyle," ").concat(this.props.className)},innerImage);}return React.createElement(Transition,{childrenStyles:this.props.transition,className:"".concat(containerStyle," ").concat(this.props.className)},innerImage);}},{key:"imageRatio",get:function get(){if(this.props.ratio){var _this$props$ratio=_slicedToArray(this.props.ratio,2),x=_this$props$ratio[0],y=_this$props$ratio[1];return(y/x*100).toFixed(3);}var _this$props$resolutio=this.props.resolutions[this.props.resolutions.length-1],width=_this$props$resolutio.width,height=_this$props$resolutio.height;return(height/width*100).toFixed(3);}}]);return Image;}(Component);_defineProperty(Image,"defaultProps",{alt:null,animating:true,backgroundColor:themeColors.placeholder,className:'',classNameImg:'',forcePlaceholder:false,highestResolutionLoaded:function highestResolutionLoaded(){},onError:null,onLoad:null,ratio:null,resolutions:[{width:440,height:440}],src:null,srcmap:null,transition:null,unwrapped:false});export default Image;
+innerImage=React.createElement("img",{className:"".concat(this.props.classNameImg||styles.image," common__image"),src:src,style:inlineStyles,alt:this.props.alt,"aria-label":this.props.alt,role:"presentation","data-test-id":"image"});}if(this.props.unwrapped){return innerImage;}var containerStyle=styles.container(this.props.backgroundColor,"".concat(this.imageRatio,"%"));if(!this.props.animating||!this.props.transition){return React.createElement("div",{className:"".concat(containerStyle," ").concat(this.props.className)},innerImage);}return React.createElement(Transition,{childrenStyles:this.props.transition,className:"".concat(containerStyle," ").concat(this.props.className)},innerImage);}}]);}(Component);_defineProperty(Image,"defaultProps",{alt:null,animating:true,backgroundColor:themeColors.placeholder,className:'',classNameImg:'',forcePlaceholder:false,highestResolutionLoaded:function highestResolutionLoaded(){},onError:null,onLoad:null,ratio:null,resolutions:[{width:440,height:440}],src:null,srcmap:null,transition:null,unwrapped:false});export default Image;

package/components/Image/spec.js

@@ -1,3 +1,3 @@
-function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}import React from'react';import{mount}from'enzyme';import Image from"./index";window.requestAnimationFrame=function(){};jest.unmock('@shopgate/pwa-core');describe('<Image />',function(){var loadedImages=[];global.Image=/*#__PURE__*/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 _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}import React from'react';import{mount}from'enzyme';import Image from"./index";window.requestAnimationFrame=function(){};jest.unmock('@shopgate/pwa-core');describe('<Image />',function(){var loadedImages=[];global.Image=/*#__PURE__*/function(){/**
      * Saves all images on init
-     */function _class(){_classCallCheck(this,_class);this.complete=true;loadedImages.push(this);}return _class;}();it('should render placeholders if forced to',function(){var wrapper=mount(React.createElement(Image,{src:"foo/bar",forcePlaceholder:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('img').length).toEqual(0);});it('should render placeholders if src is null',function(){var wrapper=mount(React.createElement(Image,{src:"foo/bar"}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('img').length).toEqual(1);});});
+     */function _class(){_classCallCheck(this,_class);this.complete=true;loadedImages.push(this);}return _createClass(_class);}();it('should render placeholders if forced to',function(){var wrapper=mount(React.createElement(Image,{src:"foo/bar",forcePlaceholder:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('img').length).toEqual(0);});it('should render placeholders if src is null',function(){var wrapper=mount(React.createElement(Image,{src:"foo/bar"}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('img').length).toEqual(1);});});

package/components/InfiniteContainer/index.js

@@ -1,31 +1,31 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";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 asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}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 _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 throttle from'lodash/throttle';import isEqual from'lodash/isEqual';import{router}from'@virtuous/conductor';import{RouteContext}from"../../context";import{ITEMS_PER_LOAD}from"../../constants/DisplayOptions";/**
+import _regeneratorRuntime from"@babel/runtime/regenerator";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 asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}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 throttle from'lodash/throttle';import isEqual from'lodash/isEqual';import{router}from'@virtuous/conductor';import{RouteContext}from"../../context";import{ITEMS_PER_LOAD}from"../../constants/DisplayOptions";/**
  * This component receives a data source and will then load
  * more items from it when the user reaches the end of the
  * (parent) scroll container.
- */var InfiniteContainer=/*#__PURE__*/function(_Component){_inherits(InfiniteContainer,_Component);/**
+ */var InfiniteContainer=/*#__PURE__*/function(_Component){/**
    * The component constructor.
    * @param {Object} props The component props.
    * @param {Object} context The component context.
-   */function InfiniteContainer(props,context){var _this;_classCallCheck(this,InfiniteContainer);_this=_possibleConstructorReturn(this,_getPrototypeOf(InfiniteContainer).call(this,props,context));_this.domElement=null;_this.domScrollContainer=null;/**
+   */function InfiniteContainer(props,context){var _this2;_classCallCheck(this,InfiniteContainer);_this2=_callSuper(this,InfiniteContainer,[props,context]);_this2.domElement=null;_this2.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(function(){if(props.enablePromiseBasedLoading){_this.handleLoadingPromise();}else{_this.handleLoading();}},10);// A flag to prevent concurrent loading requests.
-_this.isLoading=false;// Determine the initial offset of items.
-var items=props.items,limit=props.limit,initialLimit=props.initialLimit;var currentOffset=items.length?initialLimit:limit;var _ref=context||{},_ref$state=_ref.state;_ref$state=_ref$state===void 0?{}:_ref$state;var _ref$state$offset=_ref$state.offset,offset=_ref$state$offset===void 0?0:_ref$state$offset;_this.state={itemCount:items.length,offset:[offset,currentOffset],// A state flag that will be true as long as we await more items.
+     */_this2.handleLoadingProxy=throttle(function(){if(props.enablePromiseBasedLoading){_this2.handleLoadingPromise();}else{_this2.handleLoading();}},10);// A flag to prevent concurrent loading requests.
+_this2.isLoading=false;// Determine the initial offset of items.
+var items=props.items,limit=props.limit,initialLimit=props.initialLimit;var currentOffset=items.length?initialLimit:limit;var _ref=context||{},_ref$state=_ref.state,_ref$state2=_ref$state===void 0?{}:_ref$state,_ref$state2$offset=_ref$state2.offset,offset=_ref$state2$offset===void 0?0:_ref$state2$offset;_this2.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;}/**
+awaitingItems:true};return _this2;}/**
    * When the component is mounted, it tries to find a proper
    * parent scroll container if available.
    * After that it calls for the initial data to load.
-   */_createClass(InfiniteContainer,[{key:"componentDidMount",value:function componentDidMount(){var current=this.props.containerRef.current;if(current){this.domScrollContainer=current;this.bindEvents();}// Initially request items if none received.
-if(!this.props.items.length){var _this$state$offset=_slicedToArray(this.state.offset,1),start=_this$state$offset[0];this.props.loader(start);}this.verifyAllDone();}/**
+   */_inherits(InfiniteContainer,_Component);return _createClass(InfiniteContainer,[{key:"componentDidMount",value:function componentDidMount(){var current=this.props.containerRef.current;if(current){this.domScrollContainer=current;this.bindEvents();}// Initially request items if none received.
+if(!this.props.items.length){var _this$state$offset2=_slicedToArray(this.state.offset,1),start=_this$state$offset2[0];this.props.loader(start);}this.verifyAllDone();}/**
    * Checks if the component received new items or already received all items.
    * @param {Object} nextProps The next props.
-   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){var _this2=this;/**
+   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){var _this3=this;/**
      * 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.
-     */var finalize=function finalize(){var current=nextProps.containerRef.current;if(!_this2.domScrollContainer&&current){_this2.domScrollContainer=current;_this2.bindEvents();}if(_this2.receivedTotalItems(nextProps)){// Trigger loading if totalItems are available
-if(nextProps.enablePromiseBasedLoading){_this2.handleLoadingPromise(true,nextProps);}else{_this2.handleLoading(true,nextProps);}}_this2.verifyAllDone(nextProps);};if(nextProps.requestHash!==this.props.requestHash){this.resetComponent(function(){finalize();});return;}if(nextProps.items.length>=this.state.itemCount){this.setState({itemCount:nextProps.items.length},finalize());}else{this.resetComponent(function(){finalize();});}}/**
+     */var finalize=function finalize(){var current=nextProps.containerRef.current;if(!_this3.domScrollContainer&&current){_this3.domScrollContainer=current;_this3.bindEvents();}if(_this3.receivedTotalItems(nextProps)){// Trigger loading if totalItems are available
+if(nextProps.enablePromiseBasedLoading){_this3.handleLoadingPromise(true,nextProps);}else{_this3.handleLoading(true,nextProps);}}_this3.verifyAllDone(nextProps);};if(nextProps.requestHash!==this.props.requestHash){this.resetComponent(function(){finalize();});return;}if(nextProps.items.length>=this.state.itemCount){this.setState({itemCount:nextProps.items.length},finalize());}else{this.resetComponent(function(){finalize();});}}/**
    * Let the component only update when props.items or state changes.
    * @param {Object} nextProps The next component props.
    * @param {Object} nextState The next component state.
@@ -54,13 +54,13 @@ if(!this.props.enablePromiseBasedLoading){this.isLoading=false;}}/**
    * 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}
-   */},{key:"allItemsAreRendered",value:function allItemsAreRendered(){var props=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.props;var totalItems=props.totalItems,items=props.items;var _this$state$offset2=_slicedToArray(this.state.offset,2),offset=_this$state$offset2[0],limit=_this$state$offset2[1];if(props.enablePromiseBasedLoading){// At promise based loading the offset is increased after the response came in.
+   */},{key:"allItemsAreRendered",value:function allItemsAreRendered(){var props=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.props;var totalItems=props.totalItems,items=props.items;var _this$state$offset3=_slicedToArray(this.state.offset,2),offset=_this$state$offset3[0],limit=_this$state$offset3[1];if(props.enablePromiseBasedLoading){// At promise based loading the offset is increased after the response came in.
 // This method is invoked to evaluate if a new request needs to be dispatched, so we check
 // against the current offset state.
 return totalItems!==null&&(offset>=totalItems||offset===0&&Array.isArray(items)&&items.length===totalItems);}return!this.needsToReceiveItems(props)&&offset+limit>=totalItems;}/**
    * Increases the current offset by limit (from props).
    * @returns {Object}
-   */},{key:"increaseOffset",value:function increaseOffset(){var _this$state$offset3=_slicedToArray(this.state.offset,2),start=_this$state$offset3[0],length=_this$state$offset3[1];var newOffset=start+length;/**
+   */},{key:"increaseOffset",value:function increaseOffset(){var _this$state$offset4=_slicedToArray(this.state.offset,2),start=_this$state$offset4[0],length=_this$state$offset4[1];var newOffset=start+length;/**
      * When items are cached, the initial limit can be "6".
      * Then, new offset should be limited to the "normal" limit (30).
      * Otherwise, with cached items, this component would skip the initial number of items
@@ -70,7 +70,7 @@ newOffset=this.props.limit;}this.setState({offset:[newOffset,this.props.limit]})
    * 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.
-   */},{key:"resetComponent",value:function resetComponent(callback){var _this3=this;this.setState({offset:[0,this.props.limit],awaitingItems:true,itemCount:0},function(){_this3.unbindEvents();_this3.bindEvents();callback();});}/**
+   */},{key:"resetComponent",value:function resetComponent(callback){var _this4=this;this.setState({offset:[0,this.props.limit],awaitingItems:true,itemCount:0},function(){_this4.unbindEvents();_this4.bindEvents();callback();});}/**
    * Stops the lazy loading processes
    */},{key:"stopLazyLoading",value:function stopLazyLoading(){this.setState({awaitingItems:false});this.unbindEvents();}/**
    * Verifies if all items are loaded and shown, then set final state and unbind events.
@@ -85,7 +85,7 @@ newOffset=this.props.limit;}this.setState({offset:[newOffset,this.props.limit]})
    * @param {boolean} [force] If set to true, proceed independently of scroll validation.
    * @param {Object} [props] The current or next component props.
    */},{key:"handleLoading",value:function handleLoading(){var force=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;var props=arguments.length>1&&arguments[1]!==undefined?arguments[1]:this.props;// Do not load if there is an update in progress.
-if(this.isLoading){return;}if(this.verifyAllDone()){return;}var _this$state$offset4=_slicedToArray(this.state.offset,2),start=_this$state$offset4[0],length=_this$state$offset4[1];var items=props.items,totalItems=props.totalItems,loader=props.loader;var renderLength=start+length;if(force||this.validateScrollPosition()){// Check if we need to render items that we already received.
+if(this.isLoading){return;}if(this.verifyAllDone()){return;}var _this$state$offset5=_slicedToArray(this.state.offset,2),start=_this$state$offset5[0],length=_this$state$offset5[1];var items=props.items,totalItems=props.totalItems,loader=props.loader;var renderLength=start+length;if(force||this.validateScrollPosition()){// Check if we need to render items that we already received.
 if(renderLength<=items.length){// Render already received items by increasing the offset.
 this.isLoading=true;this.increaseOffset();}else if(items.length<totalItems){// We already rendered all received items but there are more available.
 // Therefore request new items.
@@ -98,13 +98,13 @@ if(renderLength<items.length+length){this.increaseOffset();}}}}/**
    * for offset handling.
    * @param {boolean} [force] If set to true, proceed independently of scroll validation.
    * @param {Object} [props] The current or next component props.
-   */},{key:"handleLoadingPromise",value:function(){var _handleLoadingPromise=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var force,props,loader,_this$state$offset5,offset,_args=arguments;return _regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:force=_args.length>0&&_args[0]!==undefined?_args[0]:false;props=_args.length>1&&_args[1]!==undefined?_args[1]:this.props;if(!this.isLoading){_context.next=4;break;}return _context.abrupt("return");case 4:if(!this.verifyAllDone()){_context.next=6;break;}return _context.abrupt("return");case 6:if(!(force||this.validateScrollPosition())){_context.next=20;break;}// Add isLoading state to prevent requests while the current one is running
-this.isLoading=true;loader=props.loader;_context.prev=9;_this$state$offset5=_slicedToArray(this.state.offset,1),offset=_this$state$offset5[0];// Dispatch the request
+   */},{key:"handleLoadingPromise",value:function(){var _handleLoadingPromise=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var force,props,loader,_this$state$offset7,offset,_args=arguments;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:force=_args.length>0&&_args[0]!==undefined?_args[0]:false;props=_args.length>1&&_args[1]!==undefined?_args[1]:this.props;if(!this.isLoading){_context.next=4;break;}return _context.abrupt("return");case 4:if(!this.verifyAllDone()){_context.next=6;break;}return _context.abrupt("return");case 6:if(!(force||this.validateScrollPosition())){_context.next=20;break;}// Add isLoading state to prevent requests while the current one is running
+this.isLoading=true;loader=props.loader;_context.prev=9;_this$state$offset7=_slicedToArray(this.state.offset,1),offset=_this$state$offset7[0];// Dispatch the request
 _context.next=13;return loader(offset);case 13:// Increase the offset for the next request
 this.increaseOffset();_context.next=19;break;case 16:_context.prev=16;_context.t0=_context["catch"](9);// Stop lazy loading processes on request error
 this.stopLazyLoading();case 19:// Remove the loading state to enable next request
-this.isLoading=false;case 20:case"end":return _context.stop();}}},_callee,this,[[9,16]]);}));function handleLoadingPromise(){return _handleLoadingPromise.apply(this,arguments);}return handleLoadingPromise;}()/**
+this.isLoading=false;case 20:case"end":return _context.stop();}},_callee,this,[[9,16]]);}));function handleLoadingPromise(){return _handleLoadingPromise.apply(this,arguments);}return handleLoadingPromise;}()/**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var _this4=this;var _this$props=this.props,wrapper=_this$props.wrapper,items=_this$props.items,iterator=_this$props.iterator,loadingIndicator=_this$props.loadingIndicator,columns=_this$props.columns;var awaitingItems=this.state.awaitingItems;var _this$state$offset6=_slicedToArray(this.state.offset,2),start=_this$state$offset6[0],length=_this$state$offset6[1];// Only show items in offset range. uses iterator component as item factory
-var children=items.slice(0,start+length).map(function(item){return iterator(_extends({},item,{columns:columns}));});var content=typeof wrapper==='function'?wrapper({children:children}):React.createElement(wrapper,{},children);return React.createElement("div",{ref:function ref(elementRef){_this4.domElement=elementRef;}},React.createElement("div",null,content),awaitingItems&&loadingIndicator);}}]);return InfiniteContainer;}(Component);_defineProperty(InfiniteContainer,"contextType",RouteContext);_defineProperty(InfiniteContainer,"defaultProps",{columns:2,containerRef:{current:null},initialLimit:10,limit:ITEMS_PER_LOAD,loadingIndicator:null,preloadMultiplier:2,requestHash:null,totalItems:null,wrapper:'div',enablePromiseBasedLoading:false});export default InfiniteContainer;
+   */},{key:"render",value:function render(){var _this5=this;var _this$props=this.props,wrapper=_this$props.wrapper,items=_this$props.items,iterator=_this$props.iterator,loadingIndicator=_this$props.loadingIndicator,columns=_this$props.columns;var awaitingItems=this.state.awaitingItems;var _this$state$offset8=_slicedToArray(this.state.offset,2),start=_this$state$offset8[0],length=_this$state$offset8[1];// Only show items in offset range. uses iterator component as item factory
+var children=items.slice(0,start+length).map(function(item){return iterator(_extends({},item,{columns:columns}));});var content=typeof wrapper==='function'?wrapper({children:children}):React.createElement(wrapper,{},children);return React.createElement("div",{ref:function ref(elementRef){_this5.domElement=elementRef;},className:"common__infinite-container"},React.createElement("div",null,content),awaitingItems&&loadingIndicator);}}]);}(Component);_defineProperty(InfiniteContainer,"contextType",RouteContext);_defineProperty(InfiniteContainer,"defaultProps",{columns:2,containerRef:{current:null},initialLimit:10,limit:ITEMS_PER_LOAD,loadingIndicator:null,preloadMultiplier:2,requestHash:null,totalItems:null,wrapper:'div',enablePromiseBasedLoading:false});export default InfiniteContainer;

package/components/Input/components/DateInput.js

@@ -1,4 +1,4 @@
-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;}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 _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useCallback,useState,useEffect,useRef}from'react';import PropTypes from'prop-types';import DayPicker from'react-day-picker';import MomentLocaleUtils from'react-day-picker/moment';import'react-day-picker/lib/style.css';import{css}from'glamor';import classNames from'classnames';import moment from'moment';import CalendarIcon from'@shopgate/pwa-ui-shared/icons/CalendarIcon';import appConfig,{themeConfig}from'@shopgate/pwa-common/helpers/config';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import{i18n}from'@shopgate/engage/core';import SimpleInput from"./SimpleInput";var variables=themeConfig.variables;var locale=appConfig.language.substring(0,2);/**
+var _excluded=["onFocusChange","onChange","type","value"];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;}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 _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useCallback,useState,useEffect,useRef}from'react';import PropTypes from'prop-types';import DayPicker from'react-day-picker';import MomentLocaleUtils from'react-day-picker/moment';import'react-day-picker/lib/style.css';import{css}from'glamor';import classNames from'classnames';import moment from'moment';import CalendarIcon from'@shopgate/pwa-ui-shared/icons/CalendarIcon';import appConfig,{themeConfig}from'@shopgate/pwa-common/helpers/config';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import{i18n}from'@shopgate/engage/core';import SimpleInput from"./SimpleInput";var variables=themeConfig.variables;var locale=appConfig.language.substring(0,2);/**
  * @param {Object|string} date The input date
  * @returns {string}
  */var getDateFromISO=function getDateFromISO(date){var result=moment(date);if(!result.isValid()){return null;}return result.toDate();};/**
@@ -14,4 +14,4 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  */var Caption=function Caption(_ref){var date=_ref.date,localeUtils=_ref.localeUtils,onChange=_ref.onChange;var months=localeUtils.getMonths(locale);var years=[];for(var i=fromMonth.getFullYear();i<=toMonth.getFullYear();i+=1){years.push(i);}var handleChange=function handleChange(e){var _e$target$form=e.target.form,year=_e$target$form.year,month=_e$target$form.month;onChange(new Date(year.value,month.value));};return React.createElement("div",{className:"DayPicker-Caption"},React.createElement("select",{name:"month",onChange:handleChange,value:date.getMonth(),className:styles.selectBox},months.map(function(month,i){return React.createElement("option",{key:month,value:i},month);})),React.createElement("select",{name:"year",onChange:handleChange,value:date.getFullYear(),className:styles.selectBox},years.map(function(year){return React.createElement("option",{key:year,value:year},year);})));};/**
  * @param {Object} props The components props
  * @returns {JSX}
- */var DateInput=function DateInput(_ref2){var onFocusChange=_ref2.onFocusChange,onChange=_ref2.onChange,type=_ref2.type,value=_ref2.value,rest=_objectWithoutProperties(_ref2,["onFocusChange","onChange","type","value"]);var wrapperRef=useRef(null);var _useState=useState(getLocaleFormattedDate(value)),_useState2=_slicedToArray(_useState,2),inputValue=_useState2[0],setInputValue=_useState2[1];var _useState3=useState(getDateFromISO(value)),_useState4=_slicedToArray(_useState3,2),pickerValue=_useState4[0],setPickerValue=_useState4[1];var _useState5=useState(false),_useState6=_slicedToArray(_useState5,2),isFocused=_useState6[0],setIsFocused=_useState6[1];var _useState7=useState(false),_useState8=_slicedToArray(_useState7,2),pickerVisible=_useState8[0],setPickerVisible=_useState8[1];useEffect(function(){var updated=getLocaleFormattedDate(value);if(updated){setInputValue(updated);setPickerValue(getDateFromISO(value));}},[value]);var needsPositionTop=useCallback(function(){var element=wrapperRef.current;if(!element){return false;}var _element$getBoundingC=element.getBoundingClientRect(),top=_element$getBoundingC.top,height=_element$getBoundingC.height;var distToBottom=document.body.offsetHeight-(top+height);return distToBottom<=300;},[wrapperRef]);var handleInputValueChange=useCallback(function(val){setInputValue(val);},[]);var handleFocusChange=useCallback(function(focused,e){if(!focused){setPickerValue(getDateFromISO(getISOFormattedDate(inputValue)));onChange(inputValue.length!==0?getISOFormattedDate(inputValue,false):null);}setIsFocused(focused);onFocusChange(focused,e);},[inputValue,onChange,onFocusChange]);var handlePickerChange=useCallback(function(date){setPickerVisible(false);setPickerValue(date);setInputValue(getLocaleFormattedDate(date));onChange(getISOFormattedDate(date));},[onChange]);var handleMonthChange=useCallback(function(date){setPickerValue(date);},[]);var handleIconClick=useCallback(function(){setPickerVisible(!pickerVisible);},[pickerVisible]);var handleBackdropClick=useCallback(function(){setPickerVisible(false);},[]);return React.createElement(React.Fragment,null,React.createElement("div",{ref:wrapperRef},React.createElement(SimpleInput,_extends({},rest,{attributes:{placeholder:isFocused?i18n.text('formats.date.pattern'):null},value:inputValue,type:"text",onFocusChange:handleFocusChange,onChange:handleInputValueChange})),React.createElement("div",{className:styles.iconWrapper,onClick:handleIconClick,role:"button",tabIndex:"0",onKeyDown:handleIconClick},React.createElement(CalendarIcon,null))),React.createElement("div",{className:classNames(styles.pickerWrapper,_defineProperty({},styles.hidden,!pickerVisible))},React.createElement(DayPicker,{className:classNames('DayPickerInput-Overlay',styles.picker,_defineProperty({},styles.pickerTop,needsPositionTop())),onDayClick:handlePickerChange,selectedDays:pickerValue,localeUtils:MomentLocaleUtils,locale:locale,todayButton:i18n.text('locations.your_current_timeslot.today'),onTodayButtonClick:handlePickerChange,month:pickerValue,showOutsideDays:true,captionElement:function captionElement(_ref3){var date=_ref3.date,localeUtils=_ref3.localeUtils;return React.createElement(Caption,{date:date,localeUtils:localeUtils,onChange:handleMonthChange});}})),pickerVisible&&React.createElement(Backdrop,{isVisible:true,level:11,opacity:0,onClick:handleBackdropClick}));};DateInput.defaultProps={onFocusChange:function onFocusChange(){},onChange:function onChange(){},type:null,value:null};export default DateInput;
+ */var DateInput=function DateInput(_ref2){var onFocusChange=_ref2.onFocusChange,onChange=_ref2.onChange,type=_ref2.type,value=_ref2.value,rest=_objectWithoutProperties(_ref2,_excluded);var wrapperRef=useRef(null);var _useState=useState(getLocaleFormattedDate(value)),_useState2=_slicedToArray(_useState,2),inputValue=_useState2[0],setInputValue=_useState2[1];var _useState3=useState(getDateFromISO(value)),_useState4=_slicedToArray(_useState3,2),pickerValue=_useState4[0],setPickerValue=_useState4[1];var _useState5=useState(false),_useState6=_slicedToArray(_useState5,2),isFocused=_useState6[0],setIsFocused=_useState6[1];var _useState7=useState(false),_useState8=_slicedToArray(_useState7,2),pickerVisible=_useState8[0],setPickerVisible=_useState8[1];useEffect(function(){var updated=getLocaleFormattedDate(value);if(updated){setInputValue(updated);setPickerValue(getDateFromISO(value));}},[value]);var needsPositionTop=useCallback(function(){var element=wrapperRef.current;if(!element){return false;}var _element$getBoundingC=element.getBoundingClientRect(),top=_element$getBoundingC.top,height=_element$getBoundingC.height;var distToBottom=document.body.offsetHeight-(top+height);return distToBottom<=300;},[wrapperRef]);var handleInputValueChange=useCallback(function(val){setInputValue(val);},[]);var handleFocusChange=useCallback(function(focused,e){if(!focused){setPickerValue(getDateFromISO(getISOFormattedDate(inputValue)));onChange(inputValue.length!==0?getISOFormattedDate(inputValue,false):null);}setIsFocused(focused);onFocusChange(focused,e);},[inputValue,onChange,onFocusChange]);var handlePickerChange=useCallback(function(date){setPickerVisible(false);setPickerValue(date);setInputValue(getLocaleFormattedDate(date));onChange(getISOFormattedDate(date));},[onChange]);var handleMonthChange=useCallback(function(date){setPickerValue(date);},[]);var handleIconClick=useCallback(function(){setPickerVisible(!pickerVisible);},[pickerVisible]);var handleBackdropClick=useCallback(function(){setPickerVisible(false);},[]);return React.createElement(React.Fragment,null,React.createElement("div",{ref:wrapperRef},React.createElement(SimpleInput,_extends({},rest,{attributes:{placeholder:isFocused?i18n.text('formats.date.pattern'):null},value:inputValue,type:"text",onFocusChange:handleFocusChange,onChange:handleInputValueChange})),React.createElement("div",{className:styles.iconWrapper,onClick:handleIconClick,role:"button",tabIndex:"0",onKeyDown:handleIconClick},React.createElement(CalendarIcon,null))),React.createElement("div",{className:classNames(styles.pickerWrapper,_defineProperty({},styles.hidden,!pickerVisible))},React.createElement(DayPicker,{className:classNames('DayPickerInput-Overlay',styles.picker,_defineProperty({},styles.pickerTop,needsPositionTop())),onDayClick:handlePickerChange,selectedDays:pickerValue,localeUtils:MomentLocaleUtils,locale:locale,todayButton:i18n.text('locations.your_current_timeslot.today'),onTodayButtonClick:handlePickerChange,month:pickerValue,showOutsideDays:true,captionElement:function captionElement(_ref3){var date=_ref3.date,localeUtils=_ref3.localeUtils;return React.createElement(Caption,{date:date,localeUtils:localeUtils,onChange:handleMonthChange});}})),pickerVisible&&React.createElement(Backdrop,{isVisible:true,level:11,opacity:0,onClick:handleBackdropClick}));};DateInput.defaultProps={onFocusChange:function onFocusChange(){},onChange:function onChange(){},type:null,value:null};export default DateInput;

package/components/Input/components/MultiLineInput.js

@@ -1,26 +1,26 @@
-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 _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 _get(target,property,receiver){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get;}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(receiver);}return desc.value;};}return _get(target,property,receiver||target);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}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 from'react';import classNames from'classnames';import{logger}from'@shopgate/pwa-core';import SimpleInput from"./SimpleInput";/**
+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 _get(target,property,receiver){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get;}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(receiver);}return desc.value;};}return _get(target,property,receiver||target);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}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 from'react';import classNames from'classnames';import{logger}from'@shopgate/pwa-core';import SimpleInput from"./SimpleInput";/**
  * 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 MultiLineInput=/*#__PURE__*/function(_SimpleInput){_inherits(MultiLineInput,_SimpleInput);/**
+ */var MultiLineInput=/*#__PURE__*/function(_SimpleInput){/**
    * Creates a new input component.
    * @param {Object} props The component properties.
-   */function MultiLineInput(props){var _this;_classCallCheck(this,MultiLineInput);_this=_possibleConstructorReturn(this,_getPrototypeOf(MultiLineInput).call(this,props));_defineProperty(_assertThisInitialized(_this),"setBaseHeight",function(){if(_this.baseHeight!==null){return;}_this.baseHeight=_this.ref.clientHeight;});_this.baseHeight=null;// First render must be empty.
-var sanitizedValue=_this.props.onSanitize('');_this.state={value:sanitizedValue,isValid:_this.props.onValidate(sanitizedValue,true),isFocused:false};return _this;}/**
+   */function MultiLineInput(props){var _this2;_classCallCheck(this,MultiLineInput);_this2=_callSuper(this,MultiLineInput,[props]);/**
+   * Sets an initial height of the multiline HTMLElement.
+   */_defineProperty(_this2,"setBaseHeight",function(){if(_this2.baseHeight!==null){return;}_this2.baseHeight=_this2.ref.clientHeight;});_this2.baseHeight=null;// First render must be empty.
+var sanitizedValue=_this2.props.onSanitize('');_this2.state={value:sanitizedValue,isValid:_this2.props.onValidate(sanitizedValue,true),isFocused:false};return _this2;}/**
    * Additional function to make avoid .setState use in componentDidMount
    * usage violation.
-   */_createClass(MultiLineInput,[{key:"doComponentDidMount",value:function doComponentDidMount(){var sanitizedValue=this.props.onSanitize(this.props.value||'');this.props.onChange(sanitizedValue);this.setState({value:sanitizedValue,isValid:this.props.onValidate(sanitizedValue,true),isFocused:false});}/**
+   */_inherits(MultiLineInput,_SimpleInput);return _createClass(MultiLineInput,[{key:"doComponentDidMount",value:function doComponentDidMount(){var sanitizedValue=this.props.onSanitize(this.props.value||'');this.props.onChange(sanitizedValue);this.setState({value:sanitizedValue,isValid:this.props.onValidate(sanitizedValue,true),isFocused:false});}/**
    * Set real value and trigger second render.
    * Initially trigger onChange() to set the initial value.
    */},{key:"componentDidMount",value:function componentDidMount(){// No super, would have to sanitize anyway.
 this.doComponentDidMount();}/**
    * Adjusts the element height.
-   */},{key:"componentDidUpdate",value:function componentDidUpdate(){if(!(this.ref instanceof HTMLElement)){logger.error('Ref is not an HTMLElement');return;}this.ref.style.height="".concat(this.baseHeight,"px");this.ref.style.height="".concat(this.ref.scrollHeight,"px");}/**
-   * Sets an initial height of the multiline HTMLElement.
-   */},{key:"handleRef",/**
+   */},{key:"componentDidUpdate",value:function componentDidUpdate(){if(!(this.ref instanceof HTMLElement)){logger.error('Ref is not an HTMLElement');return;}this.ref.style.height="".concat(this.baseHeight,"px");this.ref.style.height="".concat(this.ref.scrollHeight,"px");}},{key:"handleRef",value:/**
    * Handles reference passing to callback and assignation.
    * @param {HTMLElement} ref The element
-   */value:function handleRef(ref){_get(_getPrototypeOf(MultiLineInput.prototype),"handleRef",this).call(this,ref);this.setBaseHeight();}/**
+   */function handleRef(ref){_get(_getPrototypeOf(MultiLineInput.prototype),"handleRef",this).call(this,ref);this.setBaseHeight();}/**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var _this2=this;var _this$props=this.props,className=_this$props.className,password=_this$props.password,attributes=_this$props.attributes;var type=password?'password':this.props.type;var value=this.state.value;return React.createElement("textarea",_extends({id:this.props.id,name:this.props.name,ref:function ref(_ref){return _this2.handleRef(_ref);},className:classNames(className,'multiLineInput'),type:type,value:value,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur,disabled:this.props.disabled},attributes));}}]);return MultiLineInput;}(SimpleInput);export default MultiLineInput;
+   */},{key:"render",value:function render(){var _this3=this;var _this$props=this.props,className=_this$props.className,password=_this$props.password,attributes=_this$props.attributes;var type=password?'password':this.props.type;var value=this.state.value;return React.createElement("textarea",_extends({id:this.props.id,name:this.props.name,ref:function ref(_ref){return _this3.handleRef(_ref);},className:classNames(className,'multiLineInput','common__multi-line-input'),type:type,value:value,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur,disabled:this.props.disabled},attributes));}}]);}(SimpleInput);export default MultiLineInput;

package/components/Input/components/SimpleInput.js

@@ -1,19 +1,28 @@
-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 _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}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';/**
+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';/**
  * 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){_inherits(SimpleInput,_Component);/**
+ */var SimpleInput=/*#__PURE__*/function(_Component){/**
    * Creates a new input component.
    * @param {Object} props The component properties.
-   */function SimpleInput(props){var _this;_classCallCheck(this,SimpleInput);_this=_possibleConstructorReturn(this,_getPrototypeOf(SimpleInput).call(this,props));_defineProperty(_assertThisInitialized(_this),"handleFocus",function(e){_this.setState({isFocused:true});_this.props.onFocusChange(true,e);});_defineProperty(_assertThisInitialized(_this),"handleBlur",function(e){var 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);});_defineProperty(_assertThisInitialized(_this),"handleChange",function(event){var _event$target,_event$target$validit;var value=_this.state.value;var type=_this.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();_this.ref.value=value;return;}// Sanitize the input value.
-var 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.
-var _sanitizedValue=_this.props.onSanitize(_this.props.value||'');_this.state={value:_sanitizedValue,isValid:_this.props.onValidate(_sanitizedValue,true),isFocused:false};return _this;}/**
+   */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;}/**
    * Initially trigger onChange() to set the initial value.
-   */_createClass(SimpleInput,[{key:"componentDidMount",value:function componentDidMount(){var sanitizedValue=this.props.onSanitize(this.props.value||'');this.props.onChange(sanitizedValue);}/**
+   */_inherits(SimpleInput,_Component);return _createClass(SimpleInput,[{key:"componentDidMount",value:function componentDidMount(){var 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){/**
@@ -21,10 +30,14 @@ var _sanitizedValue=_this.props.onSanitize(_this.props.value||'');_this.state={v
      * otherwise use the current input state.
      */var 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:"handleRef",/**
+   */},{key:"isValid",get:function get(){return this.state.isValid;}/**
+   * @return {boolean} Whether the input field is focused.
+   */},{key:"isFocused",get:function get(){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:/**
    * Handles reference passing to callback and assignation.
    * @param {HTMLElement} ref The element
-   */value:function handleRef(ref){this.ref=ref;this.props.setRef(ref);}/**
+   */function 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.
@@ -33,13 +46,6 @@ newState.isValid=this.props.onValidate(newValue,false);}// Uncontrolled when set
 if(setOwnState){this.setState(newState);}}/**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var _this2=this;var _this$props=this.props,attributes=_this$props.attributes,className=_this$props.className,password=_this$props.password,onKeyPress=_this$props.onKeyPress;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:this.props.id,name:this.props.name,ref:function ref(_ref){return _this2.handleRef(_ref);},className:classNames(className,'simpleInput'),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
+   */},{key:"render",value:function render(){var _this3=this;var _this$props=this.props,attributes=_this$props.attributes,className=_this$props.className,password=_this$props.password,onKeyPress=_this$props.onKeyPress,maxLength=_this$props.maxLength;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:this.props.id,name:this.props.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:this.props.disabled,autoCorrect:autoCorrect,autoComplete:autoComplete},attributes));}},{key:"isValid",get:function get(){return this.state.isValid;}/**
-   * @return {boolean} Whether the input field is focused.
-   */},{key:"isFocused",get:function get(){return this.state.isFocused;}/**
-   * @returns {string} The current value of the input field.
-   */},{key:"value",get:function get(){return this.state.value;}/**
-   * Internal focus event handler.
-   * @param {Object} e The event object.
-   */}]);return SimpleInput;}(Component);_defineProperty(SimpleInput,"defaultProps",{attributes:null,autoComplete:false,autoCorrect:false,className:'',disabled:false,id:null,isControlled:false,name:null,onChange:function onChange(){},onFocusChange:function onFocusChange(){},onKeyPress:function onKeyPress(){},onSanitize:function onSanitize(value){return value;},onValidate:function onValidate(){return true;},password:false,setRef:function setRef(){},type:'text',validateOnBlur:true,value:'',inputComponent:'input'});export default SimpleInput;
+,onInput:type==='number'?this.handleChange:null,onChange:type!=='number'?this.handleChange:function(){},onFocus:this.handleFocus,onBlur:this.handleBlur,disabled:this.props.disabled,autoCorrect:autoCorrect,autoComplete:autoComplete,maxLength:maxLength},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,setRef:function setRef(){},type:'text',validateOnBlur:true,value:'',inputComponent:'input'});export default SimpleInput;

package/components/KeyboardConsumer/index.js

@@ -1,11 +1,11 @@
-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 _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}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';/**
+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';/**
  * Keyboard state consumer.
- */var KeyboardConsumer=/*#__PURE__*/function(_PureComponent){_inherits(KeyboardConsumer,_PureComponent);function KeyboardConsumer(){var _getPrototypeOf2;var _this;_classCallCheck(this,KeyboardConsumer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(KeyboardConsumer)).call.apply(_getPrototypeOf2,[this].concat(args)));_defineProperty(_assertThisInitialized(_this),"state",{open:false,overlap:0,duration:0});_defineProperty(_assertThisInitialized(_this),"handleKeyboardChange",function(_ref){var open=_ref.open,overlap=_ref.overlap,duration=_ref.duration;_this.setState({open:open,overlap:overlap,duration:duration});});return _this;}_createClass(KeyboardConsumer,[{key:"componentDidMount",/**
+ */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:/**
    * Listen to keyboard changes as soon as the component mounts.
-   */value:function componentDidMount(){Event.addCallback(EVENT_KEYBOARD_WILL_CHANGE,this.handleKeyboardChange);}/**
+   */function 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);}/**
-   * Stores current keyboard state.
-   */},{key:"render",/**
+   */},{key:"componentWillUnmount",value:function componentWillUnmount(){Event.removeCallback(EVENT_KEYBOARD_WILL_CHANGE,this.handleKeyboardChange);}},{key:"render",value:/**
    * @returns {JSX}
-   */value:function render(){return this.props.children(this.state);}}]);return KeyboardConsumer;}(PureComponent);export default KeyboardConsumer;
+   */function render(){return this.props.children(this.state);}}]);}(PureComponent);export default KeyboardConsumer;

package/components/Link/connector.js

@@ -1 +1 @@
-import{connect}from'react-redux';import{historyPush as _historyPush,historyReplace as _historyReplace}from"../../actions/router";var mapDispatchToProps={historyPush:function historyPush(params){return _historyPush(params);},historyReplace:function historyReplace(params){return _historyReplace(params);}};export default connect(null,mapDispatchToProps);
+import{connect}from'react-redux';import{historyPush,historyReplace}from"../../actions/router";var mapDispatchToProps={historyPush:historyPush,historyReplace:historyReplace};export default connect(null,mapDispatchToProps);

package/components/Link/index.js

@@ -1,12 +1,15 @@
-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 _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}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";/**
+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";/**
  * Link component.
  * @param {Object} props Props for the component.
  * @returns {JSX}
- */var Link=/*#__PURE__*/function(_Component){_inherits(Link,_Component);function Link(){var _getPrototypeOf2;var _this;_classCallCheck(this,Link);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(Link)).call.apply(_getPrototypeOf2,[this].concat(args)));_defineProperty(_assertThisInitialized(_this),"handleOpenLink",function(e){e.preventDefault();if(_this.props.disabled){return;}var params={pathname:_this.props.href,state:_extends({},_this.props.state||{},{},_this.props.target?{target:_this.props.target}:{})};// setTimeout prevents double click while VoiceOver is active
-setTimeout(function(){if(_this.props.replace){_this.props.historyReplace(params);}else{_this.props.historyPush(params);}},0);});return _this;}_createClass(Link,[{key:"render",/**
+ */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);});return _this2;}_inherits(Link,_Component);return _createClass(Link,[{key:"render",value:/**
    * Renders the component.
    * @returns {JSX}
-   */value: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'){/**
+   */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'){/**
        * 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),onClick:this.handleOpenLink,role:role,"data-test-id":"link: ".concat(href),"aria-label":ariaLabel,tabIndex:tabIndex,"aria-hidden":ariaHidden,href:href&&Tag==='a'?href:null},children);}}]);return Link;}(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 React.createElement(Tag,{className:"".concat(styles," ").concat(className," common__link"),onClick:this.handleOpenLink,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);

package/components/List/components/Item/index.js

@@ -2,4 +2,4 @@ import React from'react';import PropTypes from'prop-types';import styles from"./
  * The ListItem component.
  * @returns {JSX}
  */var ListItem=function ListItem(_ref){var children=_ref.children,className=_ref.className,isSelected=_ref.isSelected,role=_ref.role;if(!React.Children.count(children)){return null;}var classes=styles.item;if(className){classes+=" ".concat(className);}// Add selected or unselected styling.
-classes+=" ".concat(isSelected?styles.selected:styles.unselected);return React.createElement("li",{className:classes,"data-test-id":"listItem",role:role},children);};ListItem.defaultProps={className:null,children:null,isSelected:false,role:null};export default ListItem;
+classes+=" common__list__list-item ".concat(isSelected?styles.selected:styles.unselected);return React.createElement("li",{className:classes,"data-test-id":"listItem",role:role},children);};ListItem.defaultProps={className:null,children:null,isSelected:false,role:null};export default ListItem;

package/components/List/index.js

@@ -2,4 +2,4 @@ import React from'react';import PropTypes from'prop-types';import ListItem from"
  * The List component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var List=function List(_ref){var children=_ref.children,className=_ref.className,role=_ref.role;return React.createElement("ul",{className:className,role:role},children);};List.Item=ListItem;List.defaultProps={className:'',role:null};export default List;
+ */var List=function List(_ref){var children=_ref.children,className=_ref.className,role=_ref.role;return React.createElement("ul",{className:"".concat(className," common_list"),role:role},children);};List.Item=ListItem;List.defaultProps={className:'',role:null};export default List;

package/components/Modal/style.js

@@ -1 +1 @@
-import{css}from'glamor';var container=css({position:'fixed',top:0,bottom:0,left:0,right:0,overflow:'hidden',zIndex:2000}).toString();var layout=css({display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',height:'100%'}).toString();var content=css({position:'relative',maxWidth:'100vw',maxHeight:'100vh',paddingTop:'var(--safe-area-inset-top)',paddingBottom:'var(--safe-area-inset-bottom)',overflowY:'scroll'}).toString();export default{container:container,layout:layout,content:content};
+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{css}from'glamor';import{responsiveMediaQuery}from'@shopgate/engage/styles';var container=css({position:'fixed',top:0,bottom:0,left:0,right:0,overflow:'hidden',zIndex:2000}).toString();var layout=css({display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',height:'100%'}).toString();var content=css(_defineProperty({position:'relative',maxWidth:'100vw',maxHeight:'100vh',paddingTop:'var(--safe-area-inset-top)',paddingBottom:'var(--safe-area-inset-bottom)',overflowY:'scroll'},responsiveMediaQuery('>xs',{webOnly:true}),{overflowY:'initial'})).toString();export default{container:container,layout:layout,content:content};

package/components/Picker/components/List/index.js

@@ -1,4 +1,4 @@
 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 from'react';import PropTypes from'prop-types';import classNames from'classnames';import styles from"./style";/**
  * The default button for the Picker component.
  * @returns {JSX} The button component.
- */var PickerList=function PickerList(_ref){var items=_ref.items,onClose=_ref.onClose,onSelect=_ref.onSelect,selectedIndex=_ref.selectedIndex;return React.createElement("ul",null,items.map(function(item,currentIndex){return React.createElement("li",{key:item.value,className:classNames(_defineProperty({},styles.active,currentIndex===selectedIndex))},React.createElement("button",{className:styles.button,disabled:item.disabled,onClick:function onClick(){onSelect(item.value);onClose();},type:"button"},item.label));}));};PickerList.defaultProps={onClose:function onClose(){},selectedIndex:null};export default PickerList;
+ */var PickerList=function PickerList(_ref){var items=_ref.items,onClose=_ref.onClose,onSelect=_ref.onSelect,selectedIndex=_ref.selectedIndex;return React.createElement("ul",{className:"common__picker__list"},items.map(function(item,currentIndex){return React.createElement("li",{key:item.value,className:classNames(_defineProperty({},styles.active,currentIndex===selectedIndex))},React.createElement("button",{className:styles.button,disabled:item.disabled,onClick:function onClick(){onSelect(item.value);onClose();},type:"button"},item.label));}));};PickerList.defaultProps={onClose:function onClose(){},selectedIndex:null};export default PickerList;

package/components/Picker/components/Modal/index.js

@@ -1,14 +1,14 @@
-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 _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}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 styles from"./style";/**
+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 React,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import styles from"./style";/**
  * The picker modal.
- */var PickerModal=/*#__PURE__*/function(_Component){_inherits(PickerModal,_Component);/**
+ */var PickerModal=/*#__PURE__*/function(_Component){/**
    * The constructor.
    * @param {Object} props The props.
-   */function PickerModal(props){var _this;_classCallCheck(this,PickerModal);_this=_possibleConstructorReturn(this,_getPrototypeOf(PickerModal).call(this,props));_defineProperty(_assertThisInitialized(_this),"closeModal",function(){_this.setState({active:false});clearTimeout(_this.timeout);_this.timeout=setTimeout(_this.props.onClose,styles.duration);});_this.timeout=null;_this.state={active:true};return _this;}/**
+   */function PickerModal(props){var _this2;_classCallCheck(this,PickerModal);_this2=_callSuper(this,PickerModal,[props]);/**
+   * Closes the modal after the closing animations have finished.
+   */_defineProperty(_this2,"closeModal",function(){_this2.setState({active:false});clearTimeout(_this2.timeout);_this2.timeout=setTimeout(_this2.props.onClose,styles.duration);});_this2.timeout=null;_this2.state={active:true};return _this2;}/**
    * Update state when isOpen changes.
    * @param {Object} nextProps The next component props.
-   */_createClass(PickerModal,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.isOpen!==nextProps.isOpen){this.setState({active:nextProps.isOpen});}}/**
-   * Closes the modal after the closing animations have finished.
-   */},{key:"render",/**
+   */_inherits(PickerModal,_Component);return _createClass(PickerModal,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.isOpen!==nextProps.isOpen){this.setState({active:nextProps.isOpen});}}},{key:"render",value:/**
    * Render all the things!
    * @returns {JSX} The picker modal with the picker list inside.
-   */value:function render(){var backgroundClassName=classNames(styles.background.base,_defineProperty({},styles.background.inactive,!this.state.active));var containerClassName=classNames(styles.container.base,_defineProperty({},styles.container.inactive,!this.state.active));return this.props.isOpen?React.createElement("div",{className:styles.wrapper},React.createElement("div",{"aria-hidden":true,className:backgroundClassName,onClick:this.closeModal}),React.createElement("div",{className:containerClassName},React.cloneElement(this.props.children,{onClose:this.closeModal}))):null;}}]);return PickerModal;}(Component);export default PickerModal;
+   */function render(){var backgroundClassName=classNames(styles.background.base,_defineProperty({},styles.background.inactive,!this.state.active));var containerClassName=classNames(styles.container.base,_defineProperty({},styles.container.inactive,!this.state.active));return this.props.isOpen?React.createElement("div",{className:"".concat(styles.wrapper," common__picker__modal")},React.createElement("div",{"aria-hidden":true,className:backgroundClassName,onClick:this.closeModal}),React.createElement("div",{className:containerClassName},React.cloneElement(this.props.children,{onClose:this.closeModal}))):null;}}]);}(Component);export default PickerModal;