@shopgate/engage 7.27.3-alpha.16 → 7.27.3-alpha.17

package/components/IntersectionVisibility/index.js

@@ -1,4 +1,4 @@
-var _IntersectionVisibility;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 _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{Component}from'react';import PropTypes from'prop-types';import'intersection-observer';/**
+function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_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 _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_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);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}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}});Object.defineProperty(subClass,"prototype",{writable:false});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 _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}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 _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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{Component}from'react';import PropTypes from'prop-types';import'intersection-observer';/**
  * The IntersectionVisibility component.
  * @example
  *    <IntersectionVisibility>
@@ -6,19 +6,12 @@ var _IntersectionVisibility;function _typeof(obj){if(typeof Symbol==="function"&
            <Video autoPlay={visible && ratio > 0.8} ref={setRef} />}
         )}
  *     </IntersectionVisibility>
- */var IntersectionVisibility=/*#__PURE__*/function(_Component){function IntersectionVisibility(){var _this2;_classCallCheck(this,IntersectionVisibility);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,IntersectionVisibility,[].concat(args));_defineProperty(_this2,"state",{visible:true,ratio:1,entries:null});/**
-   * @param {Object} ref ref
-   */_defineProperty(_this2,"setRef",function(ref){if(!ref){return;}_this2.node=ref;if(_this2.io){_this2.io.observe(_this2.node);}});/**
-   * @param {IntersectionObserverEntry[]} entries first entry
-   */_defineProperty(_this2,"handleIntersectionEvent",function(entries){var _entries=_slicedToArray(entries,1),intersectionRatio=_entries[0].intersectionRatio;_this2.setState({visible:intersectionRatio>0,ratio:intersectionRatio,entries:entries});});return _this2;}_inherits(IntersectionVisibility,_Component);return _createClass(IntersectionVisibility,[{key:"componentDidMount",value:/**
+ */var IntersectionVisibility=/*#__PURE__*/function(_Component){_inherits(IntersectionVisibility,_Component);var _super=_createSuper(IntersectionVisibility);function IntersectionVisibility(){var _this;_classCallCheck(this,IntersectionVisibility);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_super.call.apply(_super,[this].concat(args));_defineProperty(_assertThisInitialized(_this),"state",{visible:true,ratio:1,entries:null});_defineProperty(_assertThisInitialized(_this),"setRef",function(ref){if(!ref){return;}_this.node=ref;if(_this.io){_this.io.observe(_this.node);}});_defineProperty(_assertThisInitialized(_this),"handleIntersectionEvent",function(entries){var _entries=_slicedToArray(entries,1),intersectionRatio=_entries[0].intersectionRatio;_this.setState({visible:intersectionRatio>0,ratio:intersectionRatio,entries:entries});});return _this;}_createClass(IntersectionVisibility,[{key:"componentDidMount",value:/**
    * Start the observer when the component is mounted
    */function componentDidMount(){this.io=new IntersectionObserver(this.handleIntersectionEvent,{threshold:this.props.thresholds});if(this.node){this.io.observe(this.node);}}/**
    * @inheritDoc
-   */},{key:"componentWillUnmount",value:function componentWillUnmount(){if(this.io){this.io.disconnect();}}},{key:"render",value:/**
+   */},{key:"componentWillUnmount",value:function componentWillUnmount(){if(this.io){this.io.disconnect();}}/**
+   * @param {Object} ref ref
+   */},{key:"render",value:/**
    * @returns {JSX.Element}
-   */function render(){return this.props.children(_extends({},this.state,{setRef:this.setRef}));}}]);}(Component);_IntersectionVisibility=IntersectionVisibility;/**
-   * Calculate threshold by number of steps
-   * Ex: 5 steps will be [0.20, 0.40, 0.60, 0.80, 1.00]
-   * @param {number} steps .
-   * @returns {number[]}
-   */_defineProperty(IntersectionVisibility,"buildThresholdList",function(steps){return Array(steps).fill(0).map(function(v,i){return(i+1)/steps;});});_defineProperty(IntersectionVisibility,"defaultProps",{thresholds:_IntersectionVisibility.buildThresholdList(10)});export default IntersectionVisibility;
+   */function render(){return this.props.children(_extends({},this.state,{setRef:this.setRef}));}}]);return IntersectionVisibility;}(Component);_defineProperty(IntersectionVisibility,"buildThresholdList",function(steps){return Array(steps).fill(0).map(function(v,i){return(i+1)/steps;});});_defineProperty(IntersectionVisibility,"defaultProps",{thresholds:IntersectionVisibility.buildThresholdList(10)});export default IntersectionVisibility;

package/components/Logo/index.js

@@ -1,4 +1,4 @@
-import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import appConfig from'@shopgate/pwa-common/helpers/config';import noop from'lodash/noop';import styles from"./style";import connect from"./connector";/**
+import React from'react';import appConfig from'@shopgate/pwa-common/helpers/config';import styles from"./style";/**
  * The Logo component.
  * @return {JSX}
- */var Logo=function Logo(_ref){var className=_ref.className,onClick=_ref.onClick,showLogo=_ref.showLogo;if(!showLogo){return null;}return(/* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */React.createElement("div",{onClick:onClick,className:classNames(styles.container,className,'engage__logo')},React.createElement("img",{className:styles.image,src:appConfig.logo||appConfig.logoFallback,alt:appConfig.shopName}))/* eslint-enable jsx-a11y/no-static-element-interactions */ /* eslint-enable jsx-a11y/click-events-have-key-events */);};Logo.defaultProps={className:'',onClick:noop,showLogo:true};export default connect(Logo);
+ */var Logo=function Logo(){return/*#__PURE__*/React.createElement("div",{className:"".concat(styles.container," engage__logo")},/*#__PURE__*/React.createElement("img",{className:styles.image,src:appConfig.logo,alt:appConfig.shopName}));};export default Logo;

package/components/Logo/spec.js

@@ -1 +1 @@
-import React from'react';import{shallow}from'enzyme';import Logo from"./index";jest.mock("./connector",function(){return function(Component){return Component;};});describe('<Logo />',function(){it('should render an image',function(){var wrapper=shallow(React.createElement(Logo,null));expect(wrapper).toMatchSnapshot();expect(wrapper.find('img').exists()).toBe(true);});});
+import React from'react';import{shallow}from'enzyme';import Logo from"./index";describe('<Logo />',function(){it('should render an image',function(){var wrapper=shallow(/*#__PURE__*/React.createElement(Logo,null));expect(wrapper).toMatchSnapshot();expect(wrapper.find('img').exists()).toBe(true);});});

package/components/Logo/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;var container=css({alignItems:'center',display:'flex',flexGrow:1});var image=css({margin:'0 auto',maxHeight:variables.navigator.height,maxWidth:"calc(var(--page-content-width) - ".concat(variables.navigator.height*3+variables.gap.xbig,"px)"),overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'});export default{container:container,image:image};
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;var container=css({alignItems:'center',display:'flex',flexGrow:1});var image=css({margin:'0 auto',maxHeight:variables.navigator.height,maxWidth:"calc(100vw - ".concat(variables.navigator.height*3+variables.gap.xbig,"px)"),overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'});export default{container:container,image:image};

package/components/MessageBar/index.js

@@ -1 +1,7 @@
-export{default as MessageBar}from"./MessageBar";
+import React,{memo}from'react';import classnames from'classnames';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core';import styles from"./style";/**
+ * The MessageBar component.
+ * @param {Object} props The component props.
+ * @param {Array} props.messages The message content.
+ * @param {Object} props.classNames Styling.
+ * @return {JSX}
+ */var MessageBar=/*#__PURE__*/memo(function(_ref){var messages=_ref.messages,classNames=_ref.classNames;return/*#__PURE__*/React.createElement("div",{className:classnames(styles.container,classNames.container,'engage__message-bar'),role:messages.length>0?'alert':null},messages.map(function(item){var _item$type=item.type,type=_item$type===void 0?'info':_item$type,message=item.message,_item$messageParams=item.messageParams,messageParams=_item$messageParams===void 0?null:_item$messageParams,translated=item.translated;var messageOutput=!translated?i18n.text(message,messageParams):message;return/*#__PURE__*/React.createElement("div",{key:"".concat(type,"-").concat(message),className:classnames(classNames.message,styles[type])},/*#__PURE__*/React.createElement("span",{className:styles.srOnly},"".concat(i18n.text("cart.message_type_".concat(type)),": ").concat(messageOutput)),/*#__PURE__*/React.createElement("span",{"aria-hidden":true},messageOutput));}));});MessageBar.defaultProps={classNames:{container:null,message:null}};export default MessageBar;

package/components/MessageBar/spec.js

@@ -0,0 +1 @@
+import React from'react';import{mount}from'enzyme';import MessageBar from"./index";var MESSAGE1='This is some information';var MESSAGE2='This is an error that happened here.';var MESSAGE3='This is just a warning. Nothing to freak out about.';var MESSAGE4='Normal pre-translated message.';var MESSAGE5='Other normal pre-translated message.';var MESSAGE6='some.translation.string';var MESSAGE7='Message with messageParams';describe('<MessageBar />',function(){describe('General rendering',function(){it('should be empty if no messages have been set',function(){var wrapper=mount(/*#__PURE__*/React.createElement(MessageBar,{messages:[]}));expect(wrapper).toMatchSnapshot();});it('should render a message as info if type is missing',function(){var wrapper=mount(/*#__PURE__*/React.createElement(MessageBar,{messages:[{message:'something'}]}));expect(wrapper).toMatchSnapshot();});});describe('Multiple messages rendering',function(){it('should render messages without frontend translation',function(){var wrapper=mount(/*#__PURE__*/React.createElement(MessageBar,{messages:[{type:'info',message:MESSAGE1},{type:'error',message:MESSAGE2},{type:'warning',message:MESSAGE3},{message:MESSAGE4,translated:null},{message:MESSAGE5,translated:true}]}));expect(wrapper).toMatchSnapshot();});it('should translate and render all given messages',function(){var wrapper=mount(/*#__PURE__*/React.createElement(MessageBar,{messages:[{message:MESSAGE6,translated:false},{message:MESSAGE7,messageParams:{myCustomParam1:'-> TEST-VALUE #1 <-',myCustomParam2:'-> TEST-VALUE #2 <-'},translated:false}]}));expect(wrapper).toMatchSnapshot();});});it('should render with custom classNames',function(){var wrapper=mount(/*#__PURE__*/React.createElement(MessageBar,{messages:[{message:MESSAGE1}],classNames:{container:'cls-container',message:'cls-message'}}));expect(wrapper).toMatchSnapshot();});});

package/components/MessageBar/style.js

@@ -0,0 +1,2 @@
+import{css}from'glamor';// TODO: Remove the usage of themeConfig here
+import{themeConfig}from'@shopgate/pwa-common/helpers/config';var container=css({background:themeConfig.colors.background,display:'flex',flexDirection:'column',flexShrink:0}).toString();var messageBase={padding:"".concat(themeConfig.variables.gap.small,"px ").concat(themeConfig.variables.gap.big,"px"),fontSize:'0.875rem',fontWeight:500,':not(:last-child)':{marginBottom:themeConfig.variables.gap.small*0.5}};var info=css(messageBase,{background:themeConfig.colors.accent,color:themeConfig.colors.accentContrast}).toString();var error=css(messageBase,{background:themeConfig.colors.error,color:themeConfig.colors.light}).toString();var warning=css(messageBase,{background:themeConfig.colors.warning,color:themeConfig.colors.light}).toString();var srOnly=css({position:'absolute',width:1,height:1,padding:0,margin:-1,overflow:'hidden',clip:'rect(0, 0, 0, 0)',whiteSpace:'nowrap',border:0});export default{container:container,info:info,error:error,warning:warning,srOnly:srOnly};

package/components/NavigationHandler/connector.js

@@ -1,4 +1,4 @@
 import{connect}from'react-redux';import{historyPush}from'@shopgate/pwa-common/actions/router/historyPush';import{historyPop}from'@shopgate/pwa-common/actions/router/historyPop';import{historyReplace}from'@shopgate/pwa-common/actions/router/historyReplace';import{historyReset}from'@shopgate/pwa-common/actions/router/historyReset';/**
  * @param {Function} dispatch Dispatches redux actions.
  * @returns {Object}
- */function mapDispatchToProps(dispatch){return{push:function push(params){return dispatch(historyPush(params));},pop:function pop(){return dispatch(historyPop());},replace:function replace(params){return dispatch(historyReplace(params));},reset:function reset(){return dispatch(historyReset());}};}export default connect(null,mapDispatchToProps);
+ */function mapDispatchToProps(dispatch){return{push:function push(params){return dispatch(historyPush(params));},pop:function pop(){return dispatch(historyPop());},replace:function replace(params){return dispatch(historyReplace(params));},reset:function reset(){return dispatch(historyReset());}};}export default connect(null,mapDispatchToProps,null,{pure:function pure(){return null;}});

package/components/NavigationHandler/index.js

@@ -1,9 +1,9 @@
-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 from'react';import PropTypes from'prop-types';import{UIEvents}from'@shopgate/pwa-core';import{NAVIGATION_PUSH,NAVIGATION_POP,NAVIGATION_REPLACE,NAVIGATION_RESET}from"../../core/router/helpers";import connect from"./connector";/**
+function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_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);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}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}});Object.defineProperty(subClass,"prototype",{writable:false});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 _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}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 _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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{UIEvents}from'@shopgate/pwa-core';import{NAVIGATION_PUSH,NAVIGATION_POP,NAVIGATION_REPLACE,NAVIGATION_RESET}from"../../core/router/helpers";import connect from"./connector";/**
  * Handles
- */var NavigationHandler=/*#__PURE__*/function(_React$PureComponent){function NavigationHandler(props){var _this2;_classCallCheck(this,NavigationHandler);_this2=_callSuper(this,NavigationHandler,[props]);UIEvents.addListener(NAVIGATION_PUSH,props.push);UIEvents.addListener(NAVIGATION_POP,props.pop);UIEvents.addListener(NAVIGATION_REPLACE,props.replace);UIEvents.addListener(NAVIGATION_RESET,props.reset);return _this2;}/**
+ */var NavigationHandler=/*#__PURE__*/function(_React$PureComponent){_inherits(NavigationHandler,_React$PureComponent);var _super=_createSuper(NavigationHandler);/**
+   * @param {Object} props The component props.
+   */function NavigationHandler(props){var _this;_classCallCheck(this,NavigationHandler);_this=_super.call(this,props);UIEvents.addListener(NAVIGATION_PUSH,props.push);UIEvents.addListener(NAVIGATION_POP,props.pop);UIEvents.addListener(NAVIGATION_REPLACE,props.replace);UIEvents.addListener(NAVIGATION_RESET,props.reset);return _this;}/**
    * Removes the event listeners.
-   */_inherits(NavigationHandler,_React$PureComponent);return _createClass(NavigationHandler,[{key:"componentWillUnmount",value:function componentWillUnmount(){UIEvents.removeListener(NAVIGATION_PUSH,this.props.push);UIEvents.removeListener(NAVIGATION_POP,this.props.pop);UIEvents.removeListener(NAVIGATION_REPLACE,this.props.replace);UIEvents.removeListener(NAVIGATION_RESET,this.props.reset);}/**
+   */_createClass(NavigationHandler,[{key:"componentWillUnmount",value:function componentWillUnmount(){UIEvents.removeListener(NAVIGATION_PUSH,this.props.push);UIEvents.removeListener(NAVIGATION_POP,this.props.pop);UIEvents.removeListener(NAVIGATION_REPLACE,this.props.replace);UIEvents.removeListener(NAVIGATION_RESET,this.props.reset);}/**
    * @returns {null}
-   */},{key:"render",value:function render(){return this.props.children;}}]);}(React.PureComponent);_defineProperty(NavigationHandler,"defaultProps",{pop:function pop(){},push:function push(){},replace:function replace(){},reset:function reset(){}/**
-   * @param {Object} props The component props.
-   */});export default connect(NavigationHandler);
+   */},{key:"render",value:function render(){return this.props.children;}}]);return NavigationHandler;}(React.PureComponent);_defineProperty(NavigationHandler,"defaultProps",{pop:function pop(){},push:function push(){},replace:function replace(){},reset:function reset(){}});export default connect(NavigationHandler);

package/components/NavigationHandler/spec.js

@@ -1 +1 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";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);});};}import React from'react';import{Provider}from'react-redux';import{mount}from'enzyme';import{UIEvents}from'@shopgate/pwa-core';import{createMockStore}from'@shopgate/pwa-common/store';import NavigationHandler from"./index";import{NAVIGATION_PUSH,NAVIGATION_POP,NAVIGATION_REPLACE,NAVIGATION_RESET,push,pop,replace,reset}from"../../core/router/helpers";jest.mock('@shopgate/pwa-core',function(){var map={};return{UIEvents:{addListener:jest.fn(function(event,cb){map[event]=cb;}),removeListener:jest.fn(),emit:jest.fn(function(event,params){map[event](params);})}};});describe('<NavigationHandler />',function(){var store=createMockStore();var wrapper=mount(React.createElement(Provider,{store:store},React.createElement(NavigationHandler,null,React.createElement("div",null,"Some content"))));it('should render as expected',function(){expect(wrapper).toMatchSnapshot();});it('should trigger the push() callbacks on navigation.push event',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.next=2;return push({pathname:'/test'});case 2:expect(UIEvents.emit).toBeCalledWith(NAVIGATION_PUSH,{pathname:'/test'});UIEvents.emit.mockClear();case 4:case"end":return _context.stop();}},_callee);})));it('should trigger the pop() callbacks on navigation.pop event',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(){return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:_context2.next=2;return pop();case 2:expect(UIEvents.emit).toBeCalledWith(NAVIGATION_POP);UIEvents.emit.mockClear();case 4:case"end":return _context2.stop();}},_callee2);})));it('should trigger the replace() callbacks on navigation.replace event',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(){return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:_context3.next=2;return replace({pathname:'/test'});case 2:expect(UIEvents.emit).toBeCalledWith(NAVIGATION_REPLACE,{pathname:'/test'});UIEvents.emit.mockClear();case 4:case"end":return _context3.stop();}},_callee3);})));it('should trigger the reset() callbacks on navigation.reset event',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(){return _regeneratorRuntime.wrap(function _callee4$(_context4){while(1)switch(_context4.prev=_context4.next){case 0:_context4.next=2;return reset();case 2:expect(UIEvents.emit).toBeCalledWith(NAVIGATION_RESET);UIEvents.emit.mockClear();case 4:case"end":return _context4.stop();}},_callee4);})));it('should register the navigation event listener',function(){var props=wrapper.find('NavigationHandler').props();expect(UIEvents.addListener.mock.calls.length).toBe(4);expect(UIEvents.addListener.mock.calls[0][0]).toEqual(NAVIGATION_PUSH,props.push);expect(UIEvents.addListener.mock.calls[1][0]).toEqual(NAVIGATION_POP,props.pop);expect(UIEvents.addListener.mock.calls[2][0]).toEqual(NAVIGATION_REPLACE,props.replace);expect(UIEvents.addListener.mock.calls[3][0]).toEqual(NAVIGATION_RESET,props.reset);UIEvents.addListener.mockClear();});it('should unregister the navigation event listener when the component unmounts',function(){var props=wrapper.find('NavigationHandler').props();wrapper.unmount();expect(UIEvents.removeListener.mock.calls.length).toBe(4);expect(UIEvents.removeListener.mock.calls[0][0]).toEqual(NAVIGATION_PUSH,props.push);expect(UIEvents.removeListener.mock.calls[1][0]).toEqual(NAVIGATION_POP,props.pop);expect(UIEvents.removeListener.mock.calls[2][0]).toEqual(NAVIGATION_REPLACE,props.replace);expect(UIEvents.removeListener.mock.calls[3][0]).toEqual(NAVIGATION_RESET,props.reset);UIEvents.removeListener.mockClear();});});
+import _regeneratorRuntime from"@babel/runtime/regenerator";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);});};}import React from'react';import{Provider}from'react-redux';import{mount}from'enzyme';import{UIEvents}from'@shopgate/pwa-core';import{createMockStore}from'@shopgate/pwa-common/store';import NavigationHandler from"./index";import{NAVIGATION_PUSH,NAVIGATION_POP,NAVIGATION_REPLACE,NAVIGATION_RESET,push,pop,replace,reset}from"../../core/router/helpers";jest.mock('@shopgate/pwa-core',function(){var map={};return{UIEvents:{addListener:jest.fn(function(event,cb){map[event]=cb;}),removeListener:jest.fn(),emit:jest.fn(function(event,params){map[event](params);})}};});describe('<NavigationHandler />',function(){var store=createMockStore();var wrapper=mount(/*#__PURE__*/React.createElement(Provider,{store:store},/*#__PURE__*/React.createElement(NavigationHandler,null,/*#__PURE__*/React.createElement("div",null,"Some content"))));it('should render as expected',function(){expect(wrapper).toMatchSnapshot();});it('should trigger the push() callbacks on navigation.push event',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){return _regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:_context.next=2;return push({pathname:'/test'});case 2:expect(UIEvents.emit).toBeCalledWith(NAVIGATION_PUSH,{pathname:'/test'});UIEvents.emit.mockClear();case 4:case"end":return _context.stop();}}},_callee);})));it('should trigger the pop() callbacks on navigation.pop event',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(){return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1){switch(_context2.prev=_context2.next){case 0:_context2.next=2;return pop();case 2:expect(UIEvents.emit).toBeCalledWith(NAVIGATION_POP);UIEvents.emit.mockClear();case 4:case"end":return _context2.stop();}}},_callee2);})));it('should trigger the replace() callbacks on navigation.replace event',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(){return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1){switch(_context3.prev=_context3.next){case 0:_context3.next=2;return replace({pathname:'/test'});case 2:expect(UIEvents.emit).toBeCalledWith(NAVIGATION_REPLACE,{pathname:'/test'});UIEvents.emit.mockClear();case 4:case"end":return _context3.stop();}}},_callee3);})));it('should trigger the reset() callbacks on navigation.reset event',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(){return _regeneratorRuntime.wrap(function _callee4$(_context4){while(1){switch(_context4.prev=_context4.next){case 0:_context4.next=2;return reset();case 2:expect(UIEvents.emit).toBeCalledWith(NAVIGATION_RESET);UIEvents.emit.mockClear();case 4:case"end":return _context4.stop();}}},_callee4);})));it('should register the navigation event listener',function(){var props=wrapper.find('NavigationHandler').props();expect(UIEvents.addListener.mock.calls.length).toBe(4);expect(UIEvents.addListener.mock.calls[0][0]).toEqual(NAVIGATION_PUSH,props.push);expect(UIEvents.addListener.mock.calls[1][0]).toEqual(NAVIGATION_POP,props.pop);expect(UIEvents.addListener.mock.calls[2][0]).toEqual(NAVIGATION_REPLACE,props.replace);expect(UIEvents.addListener.mock.calls[3][0]).toEqual(NAVIGATION_RESET,props.reset);UIEvents.addListener.mockClear();});it('should unregister the navigation event listener when the component unmounts',function(){var props=wrapper.find('NavigationHandler').props();wrapper.unmount();expect(UIEvents.removeListener.mock.calls.length).toBe(4);expect(UIEvents.removeListener.mock.calls[0][0]).toEqual(NAVIGATION_PUSH,props.push);expect(UIEvents.removeListener.mock.calls[1][0]).toEqual(NAVIGATION_POP,props.pop);expect(UIEvents.removeListener.mock.calls[2][0]).toEqual(NAVIGATION_REPLACE,props.replace);expect(UIEvents.removeListener.mock.calls[3][0]).toEqual(NAVIGATION_RESET,props.reset);UIEvents.removeListener.mockClear();});});

package/components/Picker/components/Button/index.js

@@ -2,4 +2,4 @@ import React from'react';import PropTypes from'prop-types';import styles from"./
  * The default button for the Picker component.
  * @param {Object} props The component props.
  * @returns {JSX} The button component.
- */var PickerButton=function PickerButton(_ref){var value=_ref.value,label=_ref.label,openList=_ref.openList;return React.createElement("button",{className:"".concat(styles.button," engage__picker__button"),onClick:openList,type:"button"},React.createElement("span",{className:styles.label},label),value!==null&&React.createElement("span",{className:styles.value},value));};PickerButton.defaultProps={value:null};export default PickerButton;
+ */var Button=function Button(_ref){var value=_ref.value,label=_ref.label,openList=_ref.openList;return/*#__PURE__*/React.createElement("button",{className:"".concat(styles.button," engage__picker__button"),onClick:openList,type:"button"},/*#__PURE__*/React.createElement("span",{className:styles.label},label),value!==null&&/*#__PURE__*/React.createElement("span",{className:styles.value},value));};Button.defaultProps={value:null};export default Button;

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

@@ -1,5 +1,5 @@
-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,{useMemo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import styles from"./style";/**
+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.
  * @param {Object} props The component props.
  * @returns {JSX} The button component.
- */var PickerList=function PickerList(props){var items=props.items,onClose=props.onClose,onSelect=props.onSelect,selectedIndex=props.selectedIndex,query=props.query;var filteredItems=useMemo(function(){if(!query||!query.length){return items;}return items.filter(function(_ref){var _ref$label=_ref.label,label=_ref$label===void 0?'':_ref$label;var searchLabel=label.replaceAll(' ','').toLowerCase();var searchValue=query.replaceAll(' ','').toLowerCase();return searchLabel.includes(searchValue);});},[items,query]);return React.createElement("ul",{className:"engage__picker_list"},filteredItems.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,query:''};export default PickerList;
+ */var List=function List(props){var items=props.items,onClose=props.onClose,onSelect=props.onSelect,selectedIndex=props.selectedIndex,query=props.query;var filteredItems=items;if(query&&query.length){filteredItems=items.filter(function(_ref){var _ref$label=_ref.label,label=_ref$label===void 0?'':_ref$label;var searchLabel=label.replaceAll(' ','').toLowerCase();var searchValue=query.replaceAll(' ','').toLowerCase();return searchLabel.includes(searchValue);});}return/*#__PURE__*/React.createElement("ul",{className:"engage__picker_list"},filteredItems.map(function(item,currentIndex){return/*#__PURE__*/React.createElement("li",{key:item.value,className:classNames(_defineProperty({},styles.active,currentIndex===selectedIndex))},/*#__PURE__*/React.createElement("button",{className:styles.button,disabled:item.disabled,onClick:function onClick(){onSelect(item.value);onClose();},type:"button"},item.label));}));};List.defaultProps={onClose:function onClose(){},selectedIndex:null,query:''};export default List;

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 _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";/**
+function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_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);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}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}});Object.defineProperty(subClass,"prototype",{writable:false});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 _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}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 _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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){/**
+ */var Modal=/*#__PURE__*/function(_Component){_inherits(Modal,_Component);var _super=_createSuper(Modal);/**
    * The constructor.
    * @param {Object} props The props.
-   */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;}/**
+   */function Modal(props){var _this;_classCallCheck(this,Modal);_this=_super.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;}/**
    * Update state when isOpen changes.
    * @param {Object} nextProps The next component props.
-   */_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:/**
+   */_createClass(Modal,[{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",value:/**
    * Render all the things!
    * @returns {JSX} The picker modal with the picker list inside.
-   */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));if(!this.props.isOpen){return null;}return React.createElement("div",{className:"".concat(styles.wrapper," engage__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})));}}]);}(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));if(!this.props.isOpen){return null;}return/*#__PURE__*/React.createElement("div",{className:"".concat(styles.wrapper," engage__picker_modal")},/*#__PURE__*/React.createElement("div",{"aria-hidden":true,className:backgroundClassName,onClick:this.closeModal}),/*#__PURE__*/React.createElement("div",{className:containerClassName},/*#__PURE__*/React.cloneElement(this.props.children,{onClose:this.closeModal})));}}]);return Modal;}(Component);export default Modal;

package/components/Picker/index.js

@@ -1,37 +1,28 @@
-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;}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 _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);}import React,{Component}from'react';import PropTypes from'prop-types';import{ConnectedReactPortal}from'@shopgate/engage/components';import{withForwardedRef}from"../../core";import PickerModal from"./components/Modal";import PickerButton from"./components/Button";import PickerList from"./components/List";/**
+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);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}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}});Object.defineProperty(subClass,"prototype",{writable:false});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 _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}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 _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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 _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}import React,{Component}from'react';import PropTypes from'prop-types';import Portal from'react-portal';import{withForwardedRef}from"../../core";import PickerModal from"./components/Modal";import PickerButton from"./components/Button";import PickerList from"./components/List";/**
  * Converts an item of any type (e.g. string or number)
  * to an object representation containing value and label properties.
  * @param {*} item - An item of any type.
  * @returns {Object} An object representation of the item.
- */var normalizeItem=function normalizeItem(item){if(item!==null&&typeof item!=='undefined'){var itemDefaults={value:item.value||item,label:item.label||item.value||item,disabled:item.disabled||false};if(_typeof(item)==='object'){return _extends({},itemDefaults,{},item);}return itemDefaults;}return null;};/**
+ */var normalizeItem=function normalizeItem(item){if(item!==null&&typeof item!=='undefined'){var itemDefaults={value:item.value||item,label:item.label||item.value||item,disabled:item.disabled||false};if(_typeof(item)==='object'){return _extends({},itemDefaults,item);}return itemDefaults;}return null;};/**
  * Finds an item index in a list of items by value.
  * @param {Array} items - The list of items.
  * @param {*} value - The value to look for.
  * @returns {number} The found item index or undefined.
  */var findItemIndexByValue=function findItemIndexByValue(items,value){return items.map(normalizeItem).findIndex(function(item){return item.value===value;});};/**
  * The picker component (acts like a selectbox).
- */var Picker=/*#__PURE__*/function(_Component){/**
+ */var Picker=/*#__PURE__*/function(_Component){_inherits(Picker,_Component);var _super=_createSuper(Picker);/**
    * The constructor.
    * @param {Object} props - The component props.
-   */function Picker(props){var _this2;_classCallCheck(this,Picker);_this2=_callSuper(this,Picker,[props]);/**
-   * Triggers the onChange callback if the selected value has changed.
-   * @param {Object} nextValue - The value the user picked.
-   */_defineProperty(_this2,"triggerChangeCallback",function(nextValue){var nextSelectedIndex=findItemIndexByValue(_this2.props.items,nextValue);if(nextSelectedIndex>-1&&_this2.state.selectedIndex!==nextSelectedIndex){_this2.props.onChange(nextValue);}_this2.props.onSelect(nextValue);});/**
-   * Triggers the onChange callback if the selected value has changed.
-   * @param {Object} nextOpenState - The value the user picked.
-   */_defineProperty(_this2,"triggerCloseCallback",function(nextOpenState){if(_this2.state.isOpen&&!nextOpenState){_this2.props.onClose();}});/**
-   * Gets called when a new item is selected
-   * @param {string} value - The selected value.
-   */_defineProperty(_this2,"handleItemSelect",function(value){_this2.triggerChangeCallback(value);_this2.setState({selectedIndex:findItemIndexByValue(_this2.props.items,value)});});/**
-   * Sets or toggles the open state of the component.
-   * @param {boolean} [open] New open state.
-   */_defineProperty(_this2,"toggleOpenState",function(open){_this2.setState(function(_ref){var isOpen=_ref.isOpen;var nextIsOpen=typeof open==='boolean'?open:!isOpen;_this2.triggerCloseCallback(nextIsOpen);return{isOpen:nextIsOpen};});});_this2.state={selectedIndex:findItemIndexByValue(props.items,props.value),isOpen:props.isOpen};return _this2;}/**
+   */function Picker(props){var _this;_classCallCheck(this,Picker);_this=_super.call(this,props);_defineProperty(_assertThisInitialized(_this),"triggerChangeCallback",function(nextValue){var nextSelectedIndex=findItemIndexByValue(_this.props.items,nextValue);if(nextSelectedIndex>-1&&_this.state.selectedIndex!==nextSelectedIndex){_this.props.onChange(nextValue);}_this.props.onSelect(nextValue);});_defineProperty(_assertThisInitialized(_this),"triggerCloseCallback",function(nextOpenState){if(_this.state.isOpen&&!nextOpenState){_this.props.onClose();}});_defineProperty(_assertThisInitialized(_this),"handleItemSelect",function(value){_this.triggerChangeCallback(value);_this.setState({selectedIndex:findItemIndexByValue(_this.props.items,value)});});_defineProperty(_assertThisInitialized(_this),"toggleOpenState",function(open){_this.setState(function(_ref){var isOpen=_ref.isOpen;var nextIsOpen=typeof open==='boolean'?open:!isOpen;_this.triggerCloseCallback(nextIsOpen);return{isOpen:nextIsOpen};});});_this.state={selectedIndex:findItemIndexByValue(props.items,props.value),isOpen:props.isOpen};return _this;}/**
    * Updates the selected item when the value prop changes.
    * @param {Object} nextProps - The next props.
-   */_inherits(Picker,_Component);return _createClass(Picker,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){// Only update if a value is present and also changed.
+   */_createClass(Picker,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){// Only update if a value is present and also changed.
 if(!this.selectedItem||nextProps.value!==this.selectedItem.value){this.setState({selectedIndex:findItemIndexByValue(nextProps.items,nextProps.value)});}if(this.props.isOpen!==nextProps.isOpen&&nextProps.isOpen!==this.state.isOpen){this.setState({isOpen:nextProps.isOpen});}}/**
    * Getter for the selected item.
-   */},{key:"selectedItem",get:function get(){return normalizeItem(this.props.items[this.state.selectedIndex]);}},{key:"render",value:/**
+   */},{key:"selectedItem",get:function get(){return normalizeItem(this.props.items[this.state.selectedIndex]);}/**
+   * Triggers the onChange callback if the selected value has changed.
+   * @param {Object} nextValue - The value the user picked.
+   */},{key:"render",value:/**
    * Renders the component.
    * @returns {JSX}
-   */function render(){var _this3=this;var hasSelection=!!this.selectedItem;var buttonValue=hasSelection?this.selectedItem.label:'';var buttonLabel=hasSelection?this.props.label:this.props.placeholder;var buttonProps=_extends({},this.props.buttonProps,{label:buttonLabel,value:buttonValue,disabled:this.props.disabled,openList:this.props.disabled?null:function(){_this3.toggleOpenState(true);}});var modalProps={isOpen:this.state.isOpen,duration:this.props.duration,onClose:function onClose(){return _this3.toggleOpenState(false);}};var listProps={items:this.props.items.map(normalizeItem),selectedIndex:this.state.selectedIndex,onSelect:this.handleItemSelect};return React.createElement("div",{role:"button",className:"".concat(this.props.className," engage__picker"),ref:this.props.forwardedRef,tabIndex:0,"aria-haspopup":true},React.createElement(this.props.buttonComponent,buttonProps),React.createElement(ConnectedReactPortal,{onClose:function onClose(){return _this3.toggleOpenState(false);},isOpened:true},React.createElement(this.props.modalComponent,modalProps,React.createElement(this.props.listComponent,listProps))));}}]);}(Component);_defineProperty(Picker,"defaultProps",{buttonComponent:PickerButton,buttonProps:{},duration:300,disabled:false,forwardedRef:null,label:'',listComponent:PickerList,modalComponent:PickerModal,className:'',isOpen:false,items:[],onChange:function onChange(){},onClose:function onClose(){},onSelect:function onSelect(){},placeholder:'Pick ...',value:null});export default withForwardedRef(Picker);
+   */function render(){var _this2=this;var hasSelection=!!this.selectedItem;var buttonValue=hasSelection?this.selectedItem.label:'';var buttonLabel=hasSelection?this.props.label:this.props.placeholder;var buttonProps=_extends({},this.props.buttonProps,{label:buttonLabel,value:buttonValue,disabled:this.props.disabled,openList:this.props.disabled?function(){}:function(){_this2.toggleOpenState(true);}});var modalProps={isOpen:this.state.isOpen,duration:this.props.duration,onClose:function onClose(){return _this2.toggleOpenState(false);}};var listProps={items:this.props.items.map(normalizeItem),selectedIndex:this.state.selectedIndex,onSelect:this.handleItemSelect};return/*#__PURE__*/React.createElement("div",{role:"button",className:"".concat(this.props.className," engage__picker"),ref:this.props.forwardedRef,tabIndex:0,"aria-haspopup":true},/*#__PURE__*/React.createElement(this.props.buttonComponent,buttonProps),/*#__PURE__*/React.createElement(Portal,{onClose:function onClose(){return _this2.toggleOpenState(false);},isOpened:true},/*#__PURE__*/React.createElement(this.props.modalComponent,modalProps,/*#__PURE__*/React.createElement(this.props.listComponent,listProps))));}}]);return Picker;}(Component);_defineProperty(Picker,"defaultProps",{buttonComponent:PickerButton,buttonProps:{},duration:300,disabled:false,forwardedRef:null,label:'',listComponent:PickerList,modalComponent:PickerModal,className:'',isOpen:false,items:[],onChange:function onChange(){},onClose:function onClose(){},onSelect:function onSelect(){},placeholder:'Pick ...',value:null});export default withForwardedRef(Picker);

package/components/Picker/spec.js

@@ -1,4 +1,4 @@
-import React from'react';import{mount}from'enzyme';import Picker from"./index";import PickerList from"./components/List";jest.mock('@shopgate/engage/components');describe('<Picker />',function(){var renderedElement;var renderedInstance;var mockItems=['String only',{value:'Value only'},{value:'value',label:'Value and label'}];var mockOnChange=jest.fn();var mockOnSelect=jest.fn();/**
+import React from'react';import{mount}from'enzyme';import Picker from"./index";import PickerList from"./components/List";jest.mock('react-portal',function(){return function(_ref){var isOpened=_ref.isOpened,children=_ref.children;return isOpened?children:null;};});describe('<Picker />',function(){var renderedElement;var renderedInstance;var mockItems=['String only',{value:'Value only'},{value:'value',label:'Value and label'}];var mockOnChange=jest.fn();var mockOnSelect=jest.fn();/**
    * The view component
    * @param {Object} props The component props.
-   */var renderComponent=function renderComponent(props){renderedElement=mount(React.createElement(Picker,props));renderedInstance=renderedElement.find('Picker').instance();};beforeEach(function(){renderComponent({items:mockItems,onChange:mockOnChange,onSelect:mockOnSelect});renderedElement.update();});describe('Given the component was mounted to the DOM',function(){it('should match snapshot',function(){expect(renderedElement).toMatchSnapshot();});it('should have no selected value',function(){expect(renderedInstance.selectedItem).toBe(null);});describe('Given picker component gets opened',function(){beforeEach(function(){renderedInstance.toggleOpenState(true);renderedElement.update();});it('should have isOpen state',function(){expect(renderedInstance.state.isOpen).toBe(true);});it('should render the picker list',function(){expect(renderedElement.find(PickerList).length).toBe(1);});it('should render the picker items',function(){expect(renderedElement.find('li button').length).toBe(mockItems.length);});describe('Given a item gets selected',function(){jest.useFakeTimers();beforeEach(function(){jest.clearAllMocks();renderedElement.find('li button').first().simulate('click');jest.runAllTimers();});afterEach(function(){jest.clearAllTimers();});it('should trigger onChange when the value changed',function(){expect(mockOnChange).toHaveBeenCalledTimes(1);});it('should trigger onSelect when the value changed',function(){expect(mockOnSelect).toHaveBeenCalledTimes(1);});it('should not trigger onChange when the value did not change, but trigger onSelect',function(){renderedInstance.setState({selectedIndex:0});renderedInstance.toggleOpenState(true);renderedElement.find('li button').first().simulate('click');jest.runAllTimers();expect(mockOnChange).toHaveBeenCalledTimes(1);expect(mockOnSelect).toHaveBeenCalledTimes(2);});});});});});
+   */var renderComponent=function renderComponent(props){renderedElement=mount(/*#__PURE__*/React.createElement(Picker,props));renderedInstance=renderedElement.find('Picker').instance();};beforeEach(function(){renderComponent({items:mockItems,onChange:mockOnChange,onSelect:mockOnSelect});renderedElement.update();});describe('Given the component was mounted to the DOM',function(){it('should match snapshot',function(){expect(renderedElement).toMatchSnapshot();});it('should have no selected value',function(){expect(renderedInstance.selectedItem).toBe(null);});describe('Given picker component gets opened',function(){beforeEach(function(){renderedInstance.toggleOpenState(true);renderedElement.update();});it('should have isOpen state',function(){expect(renderedInstance.state.isOpen).toBe(true);});it('should render the picker list',function(){expect(renderedElement.find(PickerList).length).toBe(1);});it('should render the picker items',function(){expect(renderedElement.find('li button').length).toBe(mockItems.length);});describe('Given a item gets selected',function(){jest.useFakeTimers();beforeEach(function(){jest.clearAllMocks();renderedElement.find('li button').first().simulate('click');jest.runAllTimers();});afterEach(function(){jest.clearAllTimers();});it('should trigger onChange when the value changed',function(){expect(mockOnChange).toHaveBeenCalledTimes(1);});it('should trigger onSelect when the value changed',function(){expect(mockOnSelect).toHaveBeenCalledTimes(1);});it('should not trigger onChange when the value did not change, but trigger onSelect',function(){renderedInstance.setState({selectedIndex:0});renderedInstance.toggleOpenState(true);renderedElement.find('li button').first().simulate('click');jest.runAllTimers();expect(mockOnChange).toHaveBeenCalledTimes(1);expect(mockOnSelect).toHaveBeenCalledTimes(2);});});});});});

package/components/PickerUtilize/components/Button/index.js

@@ -2,4 +2,4 @@ import React from'react';import PropTypes from'prop-types';import styles from"./
  * The Picker Button component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Button=function Button(_ref){var disabled=_ref.disabled,label=_ref.label,openList=_ref.openList,value=_ref.value;return React.createElement("button",{className:"".concat(disabled?styles.buttonDisabled:styles.button),onClick:openList,type:"button"},React.createElement("span",{className:styles.label},label),value&&React.createElement("span",{className:styles.value},value));};Button.defaultProps={disabled:false,openList:function openList(){}};export default Button;
+ */var Button=function Button(_ref){var disabled=_ref.disabled,label=_ref.label,openList=_ref.openList,value=_ref.value;return/*#__PURE__*/React.createElement("button",{className:"".concat(disabled?styles.buttonDisabled:styles.button),onClick:openList,type:"button"},/*#__PURE__*/React.createElement("span",{className:styles.label},label),value&&/*#__PURE__*/React.createElement("span",{className:styles.value},value));};Button.defaultProps={disabled:false,openList:function openList(){}};export default Button;

package/components/PickerUtilize/index.js

@@ -1,17 +1,15 @@
-var _excluded=["hasButton","sheetProps"];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 _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;}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{SheetList,Picker as BasePicker,Sheet}from'@shopgate/engage/components';import{ViewContext}from'@shopgate/engage/components/View';import Button from"./components/Button";import styles from"./style";/**
+function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}var _excluded=["hasButton","sheetProps"];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;}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);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}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}});Object.defineProperty(subClass,"prototype",{writable:false});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 _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}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 _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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{SheetList,Picker as BasePicker,Sheet}from'@shopgate/engage/components';import{ViewContext}from'@shopgate/engage/components/View';import Button from"./components/Button";import styles from"./style";/**
  * The template version of the Picker component.
  * @param {Object} props The same component props as in the base Picker component.
- */var PickerUtilize=/*#__PURE__*/function(_Component){/**
+ */var PickerUtilize=/*#__PURE__*/function(_Component){_inherits(PickerUtilize,_Component);var _super=_createSuper(PickerUtilize);/**
    * Constructor
    * @param {Object} props Props of the component
-   */function PickerUtilize(props){var _this2;_classCallCheck(this,PickerUtilize);_this2=_callSuper(this,PickerUtilize,[props]);/**
+   */function PickerUtilize(props){var _this;_classCallCheck(this,PickerUtilize);_this=_super.call(this,props);_defineProperty(_assertThisInitialized(_this),"onDidOpen",function(){_this.props.setViewAriaHidden(true);if(_this.firstSelectableItemRef.current){_this.firstSelectableItemRef.current.focus();}});_defineProperty(_assertThisInitialized(_this),"onClose",function(){_this.props.setViewAriaHidden(false);if(_this.pickerRef.current){_this.pickerRef.current.focus();}});_this.modalComponent=function(sheetProps){return/*#__PURE__*/React.createElement(Sheet,_extends({},_extends({},_this.props.sheetProps,sheetProps),{title:_this.props.label,onDidOpen:_this.onDidOpen}));};_this.pickerRef=/*#__PURE__*/React.createRef();_this.firstSelectableItemRef=/*#__PURE__*/React.createRef();_this.listComponent=function(prps){return/*#__PURE__*/React.createElement(SheetList,null,prps.items.map(function(item,index){return/*#__PURE__*/React.createElement(SheetList.Item,{key:item.value,title:item.label,onClick:function onClick(){setTimeout(function(){prps.onSelect(item.value);prps.onClose();},_this.props.clickDelay);},isDisabled:item.disabled,isSelected:index===prps.selectedIndex,rightComponent:item.rightComponent,testId:item.label,ref:index===prps.selectedIndex?_this.firstSelectableItemRef:null});}));};return _this;}/**
    * Focuses the picker button for screen readers.
-   */_defineProperty(_this2,"onDidOpen",function(){_this2.props.setViewAriaHidden(true);if(_this2.firstSelectableItemRef.current){_this2.firstSelectableItemRef.current.focus();}});/**
-   * Focuses the first selectable item for screen readers.
-   */_defineProperty(_this2,"onClose",function(){_this2.props.setViewAriaHidden(false);if(_this2.pickerRef.current){_this2.pickerRef.current.focus();}});_this2.modalComponent=function(sheetProps){return React.createElement(Sheet,_extends({},_extends({},_this2.props.sheetProps,{},sheetProps),{title:_this2.props.label,onDidOpen:_this2.onDidOpen}));};_this2.pickerRef=React.createRef();_this2.firstSelectableItemRef=React.createRef();_this2.listComponent=function(prps){return React.createElement(SheetList,null,prps.items.map(function(item,index){return React.createElement(SheetList.Item,{key:item.value,title:item.label,onClick:function onClick(){setTimeout(function(){prps.onSelect(item.value);prps.onClose();},_this2.props.clickDelay);},isDisabled:item.disabled,isSelected:index===prps.selectedIndex,rightComponent:item.rightComponent,testId:item.label,ref:index===prps.selectedIndex?_this2.firstSelectableItemRef:null});}));};return _this2;}_inherits(PickerUtilize,_Component);return _createClass(PickerUtilize,[{key:"render",value:/**
+   */_createClass(PickerUtilize,[{key:"render",value:/**
    * Render
    * @returns {JSX}
-   */function render(){var _this$props=this.props,hasButton=_this$props.hasButton,ignore=_this$props.sheetProps,restProps=_objectWithoutProperties(_this$props,_excluded);return React.createElement(BasePicker,_extends({},restProps,{className:"".concat(hasButton?styles:''," engage__picker-utilize"),modalComponent:this.modalComponent,buttonProps:this.props.buttonProps,buttonComponent:this.props.buttonComponent||Button,listComponent:this.listComponent,onClose:this.onClose,ref:this.pickerRef}));}}]);}(Component);_defineProperty(PickerUtilize,"defaultProps",{buttonComponent:null,buttonProps:{},/**
+   */function render(){var _this$props=this.props,hasButton=_this$props.hasButton,ignore=_this$props.sheetProps,restProps=_objectWithoutProperties(_this$props,_excluded);return/*#__PURE__*/React.createElement(BasePicker,_extends({},restProps,{className:"".concat(hasButton?styles:''," engage__picker-utilize"),modalComponent:this.modalComponent,buttonProps:this.props.buttonProps,buttonComponent:this.props.buttonComponent||Button,listComponent:this.listComponent,onClose:this.onClose,ref:this.pickerRef}));}}]);return PickerUtilize;}(Component);_defineProperty(PickerUtilize,"defaultProps",{buttonComponent:null,buttonProps:{},/**
      * Time in ms that delays picker interaction in order
      * to let animations complete first.
-     */clickDelay:150,hasButton:true,sheetProps:{}});export default(function(props){return React.createElement(ViewContext.Consumer,null,function(_ref){var setAriaHidden=_ref.setAriaHidden;return React.createElement(PickerUtilize,_extends({},props,{setViewAriaHidden:setAriaHidden}));});});
+     */clickDelay:150,hasButton:true,sheetProps:{}});export default(function(props){return/*#__PURE__*/React.createElement(ViewContext.Consumer,null,function(_ref){var setAriaHidden=_ref.setAriaHidden;return/*#__PURE__*/React.createElement(PickerUtilize,_extends({},props,{setViewAriaHidden:setAriaHidden}));});});

package/components/PickerUtilize/spec.js

@@ -1,2 +1 @@
-import React from'react';import{mount}from'enzyme';import Picker from"./index";jest.mock('@shopgate/engage/components/View');jest.mock('@shopgate/engage/components',function(){// eslint-disable-next-line require-jsdoc
-function SheetList(_ref){var children=_ref.children;return children;}SheetList.Item=function Item(){return null;};return{SheetList:SheetList,Sheet:function Sheet(_ref2){var children=_ref2.children;return children;},Picker:jest.requireActual('@shopgate/engage/components/Picker')["default"],ConnectedReactPortal:jest.requireActual('@shopgate/engage/components/ConnectedReactPortal/__mocks__')["default"]};});describe('<Picker />',function(){it('should render the picker',function(){var label='Picker label';var wrapper=mount(React.createElement(Picker,{label:label}));expect(wrapper).toMatchSnapshot();});});
+import React from'react';import{mount}from'enzyme';import Picker from"./index";jest.mock('@shopgate/engage/components/View');describe('<Picker />',function(){it('should render the picker',function(){var label='Picker label';var wrapper=mount(/*#__PURE__*/React.createElement(Picker,{label:label}));expect(wrapper).toMatchSnapshot();});});

package/components/QuantityInput/QuantityInput.js

@@ -1,9 +1,8 @@
-var _excluded=["className","onChange","onFocus","onBlur","value","maxDecimals","unit","minValue","maxValue","onKeyDown"];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,{useRef,useState,useCallback,useLayoutEffect,useEffect,forwardRef}from'react';import PropTypes from'prop-types';import noop from'lodash/noop';import{isIOs}from'@shopgate/pwa-core';import{parseFloatString,formatFloat}from"./helper";/**
+var _excluded=["className","onChange","onFocus","onBlur","value","maxDecimals","unit","minValue","maxValue"];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)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_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,{useRef,useState,useCallback,useLayoutEffect,useEffect,forwardRef}from'react';import PropTypes from'prop-types';import{isIOs}from'@shopgate/pwa-core';import{parseFloatString,formatFloat}from"./helper";/**
  * A Quantity Input with unit support.
  * @returns {JSX}
- */var QuantityInput=forwardRef(function(_ref,outerInputRef){var className=_ref.className,onChange=_ref.onChange,customOnFocus=_ref.onFocus,customOnBlur=_ref.onBlur,value=_ref.value,maxDecimals=_ref.maxDecimals,unit=_ref.unit,minValue=_ref.minValue,maxValue=_ref.maxValue,onKeyDown=_ref.onKeyDown,inputProps=_objectWithoutProperties(_ref,_excluded);var inputRef=outerInputRef||useRef();var _useState=useState(formatFloat(value,maxDecimals)),_useState2=_slicedToArray(_useState,2),inputValue=_useState2[0],setInputValue=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isFocused=_useState4[0],setIsFocused=_useState4[1];var onFocus=useCallback(function(event){customOnFocus(event);setIsFocused(true);},[customOnFocus]);var onBlur=useCallback(function(event){var newValue=parseFloatString(inputValue,maxDecimals);setIsFocused(false);// If invalid switch to old value.
-if(Number.isNaN(parseFloat(inputValue))){setInputValue(formatFloat(value,maxDecimals));return;}if(minValue&&newValue<minValue){newValue=minValue;}if(maxValue&&newValue>maxValue){newValue=maxValue;}setInputValue("".concat(newValue));if(newValue!==value){onChange(newValue);}customOnBlur(event,newValue);},[customOnBlur,inputValue,maxDecimals,maxValue,minValue,onChange,value]);var handleChange=useCallback(function(event){var newValue=event.target.value;setInputValue(newValue);},[]);var handleKeyDown=useCallback(function(event){if(event.key==='Enter'){// Prevents false positive validation error when enter key is pressed inside input
-event.preventDefault();if(inputRef.current){inputRef.current.blur();}}if(typeof onKeyDown==='function'){onKeyDown(event);}},[inputRef,onKeyDown]);// Select the current input value after focus.
+ */var QuantityInput=/*#__PURE__*/forwardRef(function(_ref,outerInputRef){var className=_ref.className,onChange=_ref.onChange,customOnFocus=_ref.onFocus,customOnBlur=_ref.onBlur,value=_ref.value,maxDecimals=_ref.maxDecimals,unit=_ref.unit,minValue=_ref.minValue,maxValue=_ref.maxValue,inputProps=_objectWithoutProperties(_ref,_excluded);var inputRef=outerInputRef||useRef();var _useState=useState(formatFloat(value,maxDecimals)),_useState2=_slicedToArray(_useState,2),inputValue=_useState2[0],setInputValue=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isFocused=_useState4[0],setIsFocused=_useState4[1];var onFocus=useCallback(function(event){customOnFocus(event);setIsFocused(true);},[customOnFocus]);var onBlur=useCallback(function(event){var newValue=parseFloatString(inputValue,maxDecimals);setIsFocused(false);// If invalid switch to old value.
+if(Number.isNaN(parseFloat(inputValue))){setInputValue(formatFloat(value,maxDecimals));return;}onChange(newValue);customOnBlur(event,newValue);},[customOnBlur,inputValue,maxDecimals,onChange,value]);var handleChange=useCallback(function(event){var newValue=event.target.value;if(newValue!==''){if(minValue&&newValue<minValue){newValue="".concat(minValue);}if(maxValue&&newValue>maxValue){newValue="".concat(maxValue);}}setInputValue(newValue);},[maxValue,minValue]);// Select the current input value after focus.
 useLayoutEffect(function(){if(isFocused&&isIOs){inputRef.current.select();}},[inputRef,isFocused]);// Sync actual float value with displayed content.
 useEffect(function(){setInputValue(formatFloat(value,maxDecimals));},[maxDecimals,value]);// Stop the context menu from opening.
-useLayoutEffect(function(){inputRef.current.addEventListener('contextmenu',function(event){event.preventDefault();event.stopPropagation();return false;});},[inputRef]);var displayedValue=!isFocused&&unit?"".concat(inputValue," ").concat(unit):inputValue;return React.createElement("input",_extends({ref:inputRef},inputProps,{inputMode:maxDecimals>0?'decimal':'numeric'/* Pattern signals some browsers to use specialized keyboard (if inputmode not supported */,pattern:maxDecimals>0?'[0-9.,]*':'[0–9]*',onFocus:onFocus,onBlur:onBlur,className:className,value:displayedValue,onChange:handleChange,onKeyDown:handleKeyDown,onClick:function onClick(event){event.preventDefault();event.stopPropagation();if(inputRef.current){inputRef.current.focus();}}}));});QuantityInput.defaultProps={className:'',maxDecimals:2,unit:null,minValue:null,maxValue:null,onFocus:noop,onChange:noop,onBlur:noop,onKeyDown:noop};export default QuantityInput;
+useLayoutEffect(function(){inputRef.current.addEventListener('contextmenu',function(event){event.preventDefault();event.stopPropagation();return false;});},[inputRef]);var displayedValue=!isFocused&&unit?"".concat(inputValue," ").concat(unit):inputValue;return/*#__PURE__*/React.createElement("input",_extends({ref:inputRef},inputProps,{inputMode:"decimal"/* Pattern signals some browsers to use specialized keyboard (if inputmode not supported */,pattern:"[0-9.,]*",onFocus:onFocus,onBlur:onBlur,className:className,value:displayedValue,onChange:handleChange}));});QuantityInput.defaultProps={className:'',maxDecimals:2,unit:null,minValue:null,maxValue:null,onFocus:function onFocus(){},onChange:function onChange(){},onBlur:function onBlur(){}};export default QuantityInput;

package/components/RangeSlider/components/Handle/index.js

@@ -1,4 +1,4 @@
-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 _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 cxs from'classnames';import styles from"./style";/**
+import React from'react';import PropTypes from'prop-types';import cxs from'classnames';import styles from"./style";/**
  * The range slider handle component.
  * @param {Object} props The component properties
  * @param {boolean} props.active Whether this handle is currently touched or was recently touched.
@@ -6,4 +6,4 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {Function} props.onTouchStart The touch start event callback.
  * @param {Object} props.classNames (Optional) An additional style classes for the handle.
  * @returns {JSX}
- */var RangeSliderHandle=function RangeSliderHandle(props){var active=props.active,index=props.index,onTouchStart=props.onTouchStart,classNames=props.classNames,useMouseEvents=props.useMouseEvents;var style={zIndex:Number(active)||0};var eventHandler=_defineProperty({},useMouseEvents?'onMouseDown':'onTouchStart',function(event){return onTouchStart(event,index);});return React.createElement("div",_extends({className:cxs(classNames.handleOuter,styles,'engage__range-slider__handle'),style:style},eventHandler),React.createElement("div",{className:classNames.handleInner}));};RangeSliderHandle.defaultProps={active:false,classNames:{handleOuter:null,handleInner:null}};export default RangeSliderHandle;
+ */var RangeSliderHandle=function RangeSliderHandle(props){var active=props.active,index=props.index,_onTouchStart=props.onTouchStart,classNames=props.classNames;var style={zIndex:Number(active)||0};return/*#__PURE__*/React.createElement("div",{className:cxs(classNames.handleOuter,styles,'engage__range-slider__handle'),style:style,onTouchStart:function onTouchStart(event){return _onTouchStart(event,index);}},/*#__PURE__*/React.createElement("div",{className:classNames.handleInner}));};RangeSliderHandle.defaultProps={active:false,classNames:{handleOuter:null,handleInner:null}};export default RangeSliderHandle;

package/components/RangeSlider/components/Handle/style.js

@@ -1 +1 @@
-import{css}from'glamor';export default css({top:'50%',position:'absolute',cursor:'pointer',':first-child':{left:0,transform:'translate(-50%, -50%)'},':last-child':{left:'auto',right:0,transform:'translate(50%, -50%)'}}).toString();
+import{css}from'glamor';export default css({top:'50%',position:'absolute',':first-child':{left:0,transform:'translate(-50%, -50%)'},':last-child':{left:'auto',right:0,transform:'translate(50%, -50%)'}}).toString();

package/components/RangeSlider/helper.js

@@ -23,10 +23,10 @@
  * @param {number} transitionDuration The duration of the transition.
  * @returns {Object} The generated style object
  */export var getRangeStyle=function getRangeStyle(min,max,transitionDuration){return{left:"".concat(Math.min(1,Math.max(0,min))*100,"%"),right:"".concat((1-Math.min(1,Math.max(0,max)))*100,"%"),transition:transitionDuration>0?"left ".concat(transitionDuration,"ms, right ").concat(transitionDuration,"ms"):null};};/**
- * Shortcut for retrieving x position of a touch or mouse event.
- * @param {Event} event The event
+ * Shortcut for retrieving x position of a touch event.
+ * @param {TouchEvent} event The TouchEvent
  * @returns {number} The x position
- */export var getTouchPositionX=function getTouchPositionX(event){if(event.touches){return event.touches[0].pageX;}return event.pageX;};/**
+ */export var getTouchPositionX=function getTouchPositionX(event){return event.touches[0].pageX;};/**
  * Converts a relative slider value into an absolute value.
  * A relative value is a value between [0...1] indicating the position
  * on the slider given its absolute width.