@shopgate/engage 7.12.7-beta.1 → 7.20.0-beta.10

package/components/Form/Builder/classes/ActionListener.js

@@ -1,10 +1,14 @@
-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 _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _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{logger}from'@shopgate/pwa-core/helpers';import{ELEMENT_TYPE_NUMBER,ELEMENT_TYPE_COUNTRY,ELEMENT_TYPE_PROVINCE,ELEMENT_TYPE_CHECKBOX}from"../Builder.constants";import{ACTION_TYPE_UPDATE_PROVINCE_ELEMENT,ACTION_TYPE_SET_VISIBILITY,ACTION_TYPE_SET_VALUE,ACTION_TYPE_TRANSFORM,ACTION_SET_VALUE_FIXED,ACTION_SET_VALUE_COPY_FROM,ACTION_SET_VALUE_LENGTH_OF,ACTION_RULE_TYPE_NOT_IN,ACTION_RULE_TYPE_ONE_OF,ACTION_RULE_TYPE_BOOLEAN,ACTION_RULE_TYPE_REGEX,ACTION_RULE_DATA_TYPES,ACTION_RULES_CONCAT_METHOD_ALL,ACTION_RULES_CONCAT_METHOD_ANY,ACTION_RULES_CONCAT_METHOD_NONE}from"./ActionListener.constants";/**
+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 _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 _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}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{logger}from'@shopgate/pwa-core/helpers';import{ELEMENT_TYPE_NUMBER,ELEMENT_TYPE_COUNTRY,ELEMENT_TYPE_PROVINCE,ELEMENT_TYPE_CHECKBOX}from"../Builder.constants";import{ACTION_TYPE_UPDATE_PROVINCE_ELEMENT,ACTION_TYPE_SET_VISIBILITY,ACTION_TYPE_SET_VALUE,ACTION_TYPE_TRANSFORM,ACTION_SET_VALUE_FIXED,ACTION_SET_VALUE_COPY_FROM,ACTION_SET_VALUE_LENGTH_OF,ACTION_RULE_TYPE_NOT_IN,ACTION_RULE_TYPE_ONE_OF,ACTION_RULE_TYPE_BOOLEAN,ACTION_RULE_TYPE_REGEX,ACTION_RULE_DATA_TYPES,ACTION_RULES_CONCAT_METHOD_ALL,ACTION_RULES_CONCAT_METHOD_ANY,ACTION_RULES_CONCAT_METHOD_NONE}from"./ActionListener.constants";/**
  * ActionListener and handler for the FormBuilder component
- */var ActionListener=/**
+ */var ActionListener=/*#__PURE__*/_createClass(/**
    * Constructor
    * @param {function(string)} getProvincesList Takes a country code and returns a list of provinces
    * @param {Object} defaults Form defaults
-   */function ActionListener(getProvincesList,defaults){var _this=this;_classCallCheck(this,ActionListener);_defineProperty(this,"attachAll",function(elementList){// Attach action listeners for element (context) actions
+   */function ActionListener(getProvincesList,defaults){var _this=this;_classCallCheck(this,ActionListener);/**
+   * Takes the elements to be rendered by the FormBuilder and attaches available action listeners
+   * to the component.
+   * @param {FormElement[]} elementList List of all elements
+   */_defineProperty(this,"attachAll",function(elementList){// Attach action listeners for element (context) actions
 elementList.forEach(function(element){var elementActions=element.actions;if(element.type===ELEMENT_TYPE_PROVINCE){elementActions=elementActions||[];// Requires a country element to create a "update provinces" action
 var countryElement=elementList.find(function(el){return el.type===ELEMENT_TYPE_COUNTRY;});if(countryElement){// Attach new action, which is always triggered, when the (only) country element changes
 elementActions.push({type:ACTION_TYPE_UPDATE_PROVINCE_ELEMENT,rules:[{context:countryElement.id}]});}}if(elementActions===undefined){return;}// Create listeners for all supported actions
@@ -12,29 +16,82 @@ elementActions.forEach(function(action){var actionRules=action.rules||[];// Alwa
 if(actionRules.length===0){// Define a basic rule if no rules given
 actionRules.push({context:element.id});}// Actions do have a fixed structure which needs to be fulfilled
 var normalizedAction=_extends({},action,{rules:actionRules});// Assign the action listeners to all contexts of the current element
-actionRules.forEach(function(rule){_this.attach(element,normalizedAction,rule);});});});});_defineProperty(this,"attach",function(element,action,rule){var actionListener;switch(action.type){case ACTION_TYPE_UPDATE_PROVINCE_ELEMENT:{actionListener=_this.createUpdateProvinceElementHandler(element,action);break;}case ACTION_TYPE_SET_VISIBILITY:{// Visibility is special and uses the result of the evaluation itself
-actionListener=_this.createSetVisibilityHandler(element,action);break;}case ACTION_TYPE_SET_VALUE:{actionListener=_this.createEvaluatedHandler(element,action,_this.createSetValueHandler(element,action));break;}case ACTION_TYPE_TRANSFORM:{actionListener=_this.createEvaluatedHandler(element,action,_this.createTransformHandler(element,action));break;}default:return;}_this.register(rule.context,actionListener);});_defineProperty(this,"createEvaluatedHandler",function(element,action,actionListener){return function(prevState,nextState){// Apply rules before accepting any changes
-if(!_this.evaluateRules(element,action,nextState)){return nextState;}return actionListener(prevState,nextState);};});_defineProperty(this,"createUpdateProvinceElementHandler",function(provinceEl,action){return function(prevState,nextState){var countryElementId=action.rules[0].context;var countryValue=nextState.formData[countryElementId];var countryDefault=_this.defaults[countryElementId];var newState=_extends({},nextState);// Overwrite province with the form's default, if country matches the default as well
+actionRules.forEach(function(rule){_this.attach(element,normalizedAction,rule);});});});});/**
+   * Attaches one or possibly multiple action listeners for the given rule
+   * @param {FormElement} element The current element that is modified by the action
+   * @param {FormFieldAction} action The action and it's params
+   * @param {FormFieldActionRule} rule The rule to check in case the action listener is triggered
+   */_defineProperty(this,"attach",function(element,action,rule){var actionListener;switch(action.type){case ACTION_TYPE_UPDATE_PROVINCE_ELEMENT:{actionListener=_this.createUpdateProvinceElementHandler(element,action);break;}case ACTION_TYPE_SET_VISIBILITY:{// Visibility is special and uses the result of the evaluation itself
+actionListener=_this.createSetVisibilityHandler(element,action);break;}case ACTION_TYPE_SET_VALUE:{actionListener=_this.createEvaluatedHandler(element,action,_this.createSetValueHandler(element,action));break;}case ACTION_TYPE_TRANSFORM:{actionListener=_this.createEvaluatedHandler(element,action,_this.createTransformHandler(element,action));break;}default:return;}_this.register(rule.context,actionListener);});/**
+   * Action listener creator to check all related rules before calling any further action listeners
+   * @param {FormElement} element The element for which the listener should be created for
+   * @param {FormFieldAction} action The action to be create a listener for
+   * @param {Function} actionListener The action listener to call if the rule applies
+   * @returns {Function} Returns a function to modify and return the modified state.
+   */_defineProperty(this,"createEvaluatedHandler",function(element,action,actionListener){return function(prevState,nextState){// Apply rules before accepting any changes
+if(!_this.evaluateRules(element,action,nextState)){return nextState;}return actionListener(prevState,nextState);};});/**
+   * Action listener creator to handle "updateCountryChange" action
+   * @param {FormElement} provinceEl The element for which the listener should be created for
+   * @param {FormFieldAction} action The action to be create a listener for
+   * @returns {Function} Returns a function to modify and return the modified state.
+   */_defineProperty(this,"createUpdateProvinceElementHandler",function(provinceEl,action){return function(prevState,nextState){var countryElementId=action.rules[0].context;var countryValue=nextState.formData[countryElementId];var countryDefault=_this.defaults[countryElementId];var newState=_extends({},nextState);// Overwrite province with the form's default, if country matches the default as well
 if(countryValue===countryDefault){newState.formData[provinceEl.id]=_this.defaults[provinceEl.id];}else{// Update province to first or no selection, based on "required" attribute
-newState.formData[provinceEl.id]=!provinceEl.required?'':Object.keys(_this.getProvincesList(countryValue))[0];}return newState;};});_defineProperty(this,"createSetVisibilityHandler",function(element,action){return function(prevState,nextState){var newState=_extends({},nextState,{elementVisibility:_extends({},nextState.elementVisibility,_defineProperty({},element.id,_this.evaluateRules(element,action,nextState))),// Copy form data to be able to check changes and all follow up actions
+newState.formData[provinceEl.id]=!provinceEl.required?'':Object.keys(_this.getProvincesList(countryValue))[0];}return newState;};});/**
+   * Action listener creator to handle "setVisibility" actions
+   * @param {FormElement} element The element for which the listener should be created for
+   * @param {FormFieldAction} action The action to be create a listener for
+   * @returns {Function} Returns a function to modify and return the modified state.
+   */_defineProperty(this,"createSetVisibilityHandler",function(element,action){return function(prevState,nextState){var newState=_extends({},nextState,{elementVisibility:_extends({},nextState.elementVisibility,_defineProperty({},element.id,_this.evaluateRules(element,action,nextState))),// Copy form data to be able to check changes and all follow up actions
 formData:_extends({},nextState.formData)});if(newState.formData[element.id]===undefined&&newState.elementVisibility[element.id]){newState.formData[element.id]=_this.defaults[element.id];}else if(!newState.elementVisibility[element.id]&&newState.formData[element.id]!==undefined){delete newState.formData[element.id];}// Notify follow up listeners about the current change
-if(nextState.formData[element.id]!==newState.formData[element.id]){newState=_this.notify(element.id,prevState,newState);}return newState;};});_defineProperty(this,"createSetValueHandler",function(element,action){return function(prevState,nextState){if(_typeof(action.params)!=='object'||Array.isArray(action.params)){logger.error("Error: Invalid or missing form action in element '".concat(element.id,"'. ")+'Params must be in the format: { "type": string, "value": string }');return nextState;}var value=action.params.value;// Check correctness of value data type
+if(nextState.formData[element.id]!==newState.formData[element.id]){newState=_this.notify(element.id,prevState,newState);}return newState;};});/**
+   * Action listener creator to handle "setValue" actions
+   * @param {FormElement} element The element for which the listener should be created for
+   * @param {FormFieldAction} action The action to be create a listener for
+   * @returns {Function} Returns the modified state.
+   */_defineProperty(this,"createSetValueHandler",function(element,action){return function(prevState,nextState){if(_typeof(action.params)!=='object'||Array.isArray(action.params)){logger.error("Error: Invalid or missing form action in element '".concat(element.id,"'. ")+'Params must be in the format: { "type": string, "value": string }');return nextState;}var value=action.params.value;// Check correctness of value data type
 switch(_typeof(value)){case'boolean':if(element.type!==ELEMENT_TYPE_CHECKBOX){logger.error("Error: Invalid form action param in element '".concat(element.id,"'. ")+"Allowed '".concat(ELEMENT_TYPE_CHECKBOX,"' data type for 'params.value' is: 'boolean'"));return nextState;}break;case'number':if(element.type!==ELEMENT_TYPE_NUMBER){logger.error("Error: Invalid form action param in element '".concat(element.id,"'. ")+"Allowed '".concat(ELEMENT_TYPE_NUMBER,"' data types for 'params.value' are: ")+"'number' and 'string'");return nextState;}break;case'string':if(element.type===ELEMENT_TYPE_CHECKBOX){logger.error("Error: Invalid form action param in element '".concat(element.id,"'. ")+"Allowed '".concat(ELEMENT_TYPE_CHECKBOX,"' data type for 'params.value' is: 'boolean'"));return nextState;}break;default:logger.error("Error: Invalid form action param in element '".concat(element.id,"'. ")+"Can not use '".concat(_typeof(value),"' data for elements of type '").concat(element.type,"'"));return nextState;}// Perform action based on "setValue" type, defined in params
 switch(action.params.type){case ACTION_SET_VALUE_LENGTH_OF:value="".concat(nextState.formData[action.params.value].length);break;case ACTION_SET_VALUE_COPY_FROM:value=nextState.formData[action.params.value];break;case undefined:case ACTION_SET_VALUE_FIXED:break;default:logger.error("Error: Invalid form action param 'type' in element '".concat(element.id,"'. ")+"Allowed param types are: '".concat(ACTION_SET_VALUE_LENGTH_OF,"', ")+"'".concat(ACTION_SET_VALUE_COPY_FROM,"', '").concat(ACTION_SET_VALUE_FIXED,"'"));return nextState;}var newState=_extends({},nextState,{formData:_extends({},nextState.formData,_defineProperty({},element.id,value))});// Notify follow up listeners about the current change, if there are any changes
-if(nextState.formData[element.id]!==value){newState=_this.notify(element.id,prevState,newState);}return newState;};});_defineProperty(this,"createTransformHandler",function(element,action){return function(prevState,nextState){/**
+if(nextState.formData[element.id]!==value){newState=_this.notify(element.id,prevState,newState);}return newState;};});/**
+   * Action listener creator to handle "transform" actions
+   * @param {FormElement} element The element for which the listener should be created for
+   * @param {FormFieldAction} action The action to be create a listener for
+   * @returns {Function} Returns a function to modify and return the modified state.
+   */_defineProperty(this,"createTransformHandler",function(element,action){return function(prevState,nextState){/**
      * Takes a string and applies a case function on it
      * @param {string|boolean|number} subject The subject to be transformed
      * @returns {string|boolean|number}
      */var transform=function transform(subject){// Get optional params to be applied in the transformation process
 var args=action.params.value||[];if(Array.isArray(action.params.value)){args=action.params.value;}switch(_typeof(subject)){case'string':{if(typeof String.prototype[action.params.type]!=='function'&&typeof String[action.params.type]!=='function'){logger.error("Error: Invalid transform function passed to actions 'params.type' "+"attribute in element '".concat(element.id,"'. Must be withing 'String.prototype'!"));return subject;}if(typeof String.prototype[action.params.type]==='function'){return String.prototype[action.params.type].apply(subject,args);}return String[action.params.type](subject);}case'boolean':{if(typeof Boolean.prototype[action.params.type]!=='function'&&typeof Boolean[action.params.type]!=='function'){logger.error("Error: Invalid transform function passed to actions 'params.type' "+"attribute in element '".concat(element.id,"'. Must be withing 'String.prototype'!"));return subject;}if(typeof Boolean.prototype[action.params.type]==='function'){return Boolean.prototype[action.params.type].apply(subject,args);}return Boolean[action.params.type](subject);}case'number':{if(typeof Number.prototype[action.params.type]!=='function'&&typeof Number[action.params.type]!=='function'){logger.error("Error: Invalid transform function passed to actions 'params.type' "+"attribute in element '".concat(element.id,"'. Must be withing 'String.prototype'!"));return subject;}if(typeof Number.prototype[action.params.type]==='function'){return Number.prototype[action.params.type].apply(subject,args);}return Number[action.params.type](subject);}default:logger.error("Error: The given data can not be transformed. Must be of type 'string', "+"'boolean' or 'number'");return subject;}};var newState=_extends({},nextState,{formData:_extends({},nextState.formData,_defineProperty({},element.id,transform(nextState.formData[element.id])))});// Notify follow up listeners about the current change
-if(nextState.formData[element.id]!==newState.formData[element.id]){newState=_this.notify(element.id,prevState,newState);}return newState;};});_defineProperty(this,"evaluateRules",function(element,action,nextState){var concatRules=_this.createConcatMethod(action.ruleConcatMethod);var resultInitValue=action.ruleConcatMethod!==ACTION_RULES_CONCAT_METHOD_ANY;var result=resultInitValue;action.rules.forEach(function(rule){var tmpResult=resultInitValue;var ruleType=rule.type;var ruleData=rule.data;// Default to rule type "boolean" and data true when type not given
+if(nextState.formData[element.id]!==newState.formData[element.id]){newState=_this.notify(element.id,prevState,newState);}return newState;};});/**
+   * Evaluates all action rules of a given element action
+   *
+   * @param {FormElement} element The element of which the action rules should be evaluated
+   * @param {FormFieldAction} action The current action to be evaluate rules for
+   * @param {Object} nextState The state at the time before the "action" event finished
+   * @returns {boolean}
+   */_defineProperty(this,"evaluateRules",function(element,action,nextState){var concatRules=_this.createConcatMethod(action.ruleConcatMethod);var resultInitValue=action.ruleConcatMethod!==ACTION_RULES_CONCAT_METHOD_ANY;var result=resultInitValue;action.rules.forEach(function(rule){var tmpResult=resultInitValue;var ruleType=rule.type;var ruleData=rule.data;// Default to rule type "boolean" and data true when type not given
 if(ruleType===undefined){ruleType=ACTION_RULE_TYPE_BOOLEAN;ruleData=true;}// Check rule validity
 if(!ACTION_RULE_DATA_TYPES[ruleType]){logger.error("Error: Unknown action rule type '".concat(ruleType,"'in element '").concat(element.id,"'"));return;}// Check type of ruleData
 var ruleDataType=ACTION_RULE_DATA_TYPES[ruleType];if(ruleDataType==='array'&&!Array.isArray(ruleData)){logger.error("Error: Invalid FormBuilder action rule in element '".concat(element.id,"': ")+"data must be an 'array' for rule type '".concat(ruleType,"'"));return;}// eslint-disable-next-line valid-typeof
 if(ruleDataType!=='array'&&_typeof(ruleData)!==ruleDataType){logger.error("Error: Invalid FormBuilder action rule in element '".concat(element.id,"': ")+"data must be '".concat(ruleDataType,"' for rule type '").concat(ruleType,"'"));return;}switch(ruleType){case ACTION_RULE_TYPE_ONE_OF:{tmpResult=ruleData.includes(nextState.formData[rule.context]);break;}case ACTION_RULE_TYPE_NOT_IN:{tmpResult=!ruleData.includes(nextState.formData[rule.context]);break;}case ACTION_RULE_TYPE_BOOLEAN:{tmpResult=ruleData;break;}case ACTION_RULE_TYPE_REGEX:{var regexParts=ruleData.split('/');var regexPattern='';var regexParam='';if(regexParts.length===1){var _regexParts=_slicedToArray(regexParts,1);regexPattern=_regexParts[0];}else if(regexParts.length===3){regexParts.shift();var _regexParts2=_slicedToArray(regexParts,2);regexPattern=_regexParts2[0];var _regexParts2$=_regexParts2[1];regexParam=_regexParts2$===void 0?'':_regexParts2$;}else{logger.error("Error: Invalid regex string in action rule in element ".concat(element.id));break;}var regex=new RegExp(regexPattern,regexParam);tmpResult=regex.test(nextState.formData[rule.context]);break;}default:break;}// Concat rules based on the rule concat method of the action
-result=concatRules(result,tmpResult);});return result;});_defineProperty(this,"createConcatMethod",function(method){return function(prev,next){switch(method){case ACTION_RULES_CONCAT_METHOD_NONE:return prev&&!next;case ACTION_RULES_CONCAT_METHOD_ANY:return prev||next;case ACTION_RULES_CONCAT_METHOD_ALL:default:return prev&&next;}};});_defineProperty(this,"register",function(elementId,handler){if(!_this.actionListeners[elementId]){_this.actionListeners[elementId]=[];}_this.actionListeners[elementId].push(handler);});_defineProperty(this,"notify",function(elementId,prevState,nextState){var newState=nextState;if(_this.actionListeners[elementId]){_this.actionListeners[elementId].forEach(function(notifyListener){// Note: The order of state changes is applied in the same order of listener registration
-newState=notifyListener(prevState,newState);});}return newState;});this.defaults=defaults;this.getProvincesList=getProvincesList;this.actionListeners={};}/**
-   * Takes the elements to be rendered by the FormBuilder and attaches available action listeners
-   * to the component.
-   * @param {FormElement[]} elementList List of all elements
-   */;export default ActionListener;
+result=concatRules(result,tmpResult);});return result;});/**
+   * Creates a concat function that defines how to concatenate action rule results
+   *
+   * @param {string} method The method defined by the action
+   * @returns {Function}
+   */_defineProperty(this,"createConcatMethod",function(method){return function(prev,next){switch(method){case ACTION_RULES_CONCAT_METHOD_NONE:return prev&&!next;case ACTION_RULES_CONCAT_METHOD_ANY:return prev||next;case ACTION_RULES_CONCAT_METHOD_ALL:default:return prev&&next;}};});/**
+   * Adds a "action" listener to a given context element
+   *
+   * @param {string} elementId the element to listen for
+   * @param {Function} handler The listener to call when something has changed
+   */_defineProperty(this,"register",function(elementId,handler){if(!_this.actionListeners[elementId]){_this.actionListeners[elementId]=[];}_this.actionListeners[elementId].push(handler);});/**
+   * Takes an element id, the state to work with and optional data and notifies all "action"
+   * listeners about the change. Every listener can manipulate the state.
+   * Returns the new state.
+   *
+   * @param {string} elementId The id of the element that was changed
+   * @param {Object} prevState The state before any changes took place
+   * @param {Object} nextState The state containing all updates before the listeners are executed
+   * @returns {Object} The new state after all handlers have been executed.
+   */_defineProperty(this,"notify",function(elementId,prevState,nextState){var newState=nextState;if(_this.actionListeners[elementId]){_this.actionListeners[elementId].forEach(function(notifyListener){// Note: The order of state changes is applied in the same order of listener registration
+newState=notifyListener(prevState,newState);});}return newState;});this.defaults=defaults;this.getProvincesList=getProvincesList;this.actionListeners={};});export default ActionListener;

package/components/Form/Builder/helpers/buildFormElements.js

@@ -1,4 +1,4 @@
-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);}import{logger}from'@shopgate/pwa-core/helpers';import{ELEMENT_TYPE_COUNTRY,ELEMENT_TYPE_PROVINCE}from"../Builder.constants";/** Noop function */var noop=function noop(){};/**
+var _excluded=["custom"];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);}import{logger}from'@shopgate/pwa-core/helpers';import{ELEMENT_TYPE_COUNTRY,ELEMENT_TYPE_PROVINCE}from"../Builder.constants";/** Noop function */var noop=function noop(){};/**
  * @typedef {Object} FormElement
  * @property {string} id
  * @property {boolean} custom
@@ -26,6 +26,6 @@ function _objectWithoutProperties(source,excluded){if(source==null)return{};var
    */var addFormElement=function addFormElement(id,field){var custom=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;// The "custom" field is just a placeholder for more fields
 if(typeof field.type!=='string'){return;}// Make sure country and province elements are only added once
 if(field.type===ELEMENT_TYPE_COUNTRY){if(hasCountryElement){logger.error("Error: Can not add multiple elements of type '".concat(field.type,"'"));return;}hasCountryElement=true;}if(field.type===ELEMENT_TYPE_PROVINCE){if(hasProvinceElement){logger.error("Error: Can not add multiple elements of type '".concat(field.type,"'"));return;}hasProvinceElement=true;}elementList.push(_extends({id:id},field,{custom:custom,handleChange:function handleChange(value){return elementChangeHandler(id,value);}}));};// Extract custom fields, do not mix with normal fields
-var _formConfig$fields=formConfig.fields,custom=_formConfig$fields.custom,restFields=_objectWithoutProperties(_formConfig$fields,["custom"]);// Add all non-custom attributes and mark them as such
+var _formConfig$fields=formConfig.fields,custom=_formConfig$fields.custom,restFields=_objectWithoutProperties(_formConfig$fields,_excluded);// Add all non-custom attributes and mark them as such
 Object.keys(restFields).forEach(function(id){addFormElement(id,formConfig.fields[id]);});// Add custom fields to the element list
 if(custom){Object.keys(custom).forEach(function(id){addFormElement(id,formConfig.fields.custom[id],true);});}return elementList;});

package/components/Form/Form.js

@@ -1,13 +1,16 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import classNames from'classnames';/**
+function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _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,{PureComponent}from'react';import PropTypes from'prop-types';import classNames from'classnames';/**
  * Form component that handles keyboard submit, next buttons, ...
- */var Form=/*#__PURE__*/function(_PureComponent){_inherits(Form,_PureComponent);function Form(props){var _this;_classCallCheck(this,Form);_this=_possibleConstructorReturn(this,_getPrototypeOf(Form).call(this,props));_defineProperty(_assertThisInitialized(_this),"handleSubmit",function(event){event.preventDefault();var inputFocused=[].concat(_this.formElement.current.querySelectorAll('input')).some(function(input){return document.activeElement===input;});if(inputFocused){document.activeElement.blur();}_this.props.onSubmit();});_defineProperty(_assertThisInitialized(_this),"handleKeyPress",function(event){// Enter key and on iOS also the "Done" button.
-if(event.which===13){_this.handleSubmit(event);}});_this.formElement=React.createRef();return _this;}/**
+ */var Form=/*#__PURE__*/function(_PureComponent){function Form(props){var _this2;_classCallCheck(this,Form);_this2=_callSuper(this,Form,[props]);/**
    * Handles the form submit.
    * @param {Object} event The event that caused the submit.
-   */_createClass(Form,[{key:"render",/**
+   */_defineProperty(_this2,"handleSubmit",function(event){event.preventDefault();var inputFocused=[].concat(_this2.formElement.current.querySelectorAll('input')).some(function(input){return document.activeElement===input;});if(inputFocused){document.activeElement.blur();}_this2.props.onSubmit();});/**
+   * Handles form submits by key.
+   * @param {Object} event The event that caused the keypress.
+   */_defineProperty(_this2,"handleKeyPress",function(event){// Enter key and on iOS also the "Done" button.
+if(event.which===13){_this2.handleSubmit(event);}});_this2.formElement=React.createRef();return _this2;}_inherits(Form,_PureComponent);return _createClass(Form,[{key:"render",value:/**
    * Renders the component.
    * @returns {JSX}
-   */value:function render(){/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */return React.createElement("form",{action:"#",className:classNames(this.props.className,'form'),onSubmit:this.handleSubmit,onKeyPress:this.handleKeyPress,ref:this.formElement},this.props.children);/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */}}]);return Form;}(PureComponent);_defineProperty(Form,"defaultProps",{className:null,onSubmit:function onSubmit(){}/**
+   */function render(){/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */return React.createElement("form",{action:"#",className:classNames(this.props.className,'form','engage__form'),onSubmit:this.handleSubmit,onKeyPress:this.handleKeyPress,ref:this.formElement},this.props.children);/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */}}]);}(PureComponent);_defineProperty(Form,"defaultProps",{className:null,onSubmit:function onSubmit(){}/**
    * Initializes the form component.
    * @param {Object} props The components props.
    */});export default Form;

package/components/IntersectionVisibility/index.js

@@ -1,4 +1,4 @@
-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 _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import{Component}from'react';import PropTypes from'prop-types';import'intersection-observer';var thresholds=[0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1.0];/**
+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';/**
  * The IntersectionVisibility component.
  * @example
  *    <IntersectionVisibility>
@@ -6,12 +6,19 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
            <Video autoPlay={visible && ratio > 0.8} ref={setRef} />}
         )}
  *     </IntersectionVisibility>
- */var IntersectionVisibility=/*#__PURE__*/function(_Component){_inherits(IntersectionVisibility,_Component);function IntersectionVisibility(){var _getPrototypeOf2;var _this;_classCallCheck(this,IntersectionVisibility);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(IntersectionVisibility)).call.apply(_getPrototypeOf2,[this].concat(args)));_defineProperty(_assertThisInitialized(_this),"state",{visible:true,ratio:1});_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(_ref){var _ref2=_slicedToArray(_ref,1),intersectionRatio=_ref2[0].intersectionRatio;_this.setState({visible:intersectionRatio>0,ratio:intersectionRatio});});return _this;}_createClass(IntersectionVisibility,[{key:"componentDidMount",/**
+ */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:/**
    * Start the observer when the component is mounted
-   */value:function componentDidMount(){this.io=new IntersectionObserver(this.handleIntersectionEvent,{threshold:this.props.thresholds});if(this.node){this.io.observe(this.node);}}/**
+   */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();}}/**
-   * @param {Object} ref ref
-   */},{key:"render",/**
+   */},{key:"componentWillUnmount",value:function componentWillUnmount(){if(this.io){this.io.disconnect();}}},{key:"render",value:/**
    * @returns {JSX.Element}
-   */value:function render(){return this.props.children(_extends({},this.state,{setRef:this.setRef}));}}]);return IntersectionVisibility;}(Component);_defineProperty(IntersectionVisibility,"defaultProps",{thresholds:thresholds});export default IntersectionVisibility;
+   */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;

package/components/Logo/connector.js

@@ -0,0 +1,4 @@
+import{connect}from'react-redux';import{hasWebBridge,makeGetShopSettingByKey,SHOP_SETTING_SHOW_SHOP_LOGO_IN_APP,SHOP_SETTING_SHOW_SHOP_LOGO_IN_WEB}from'@shopgate/engage/core';/**
+ * Creates the mapStateToProps connector function.
+ * @returns {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){var getShowShopLogoInApp=makeGetShopSettingByKey(SHOP_SETTING_SHOW_SHOP_LOGO_IN_APP);var getShowShopLogoInWeb=makeGetShopSettingByKey(SHOP_SETTING_SHOW_SHOP_LOGO_IN_WEB);return function(state){return{showLogo:hasWebBridge()?getShowShopLogoInWeb(state):getShowShopLogoInApp(state)};};};export default connect(makeMapStateToProps);

package/components/Logo/index.js

@@ -0,0 +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";/**
+ * 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);

package/components/Logo/spec.js

@@ -0,0 +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);});});

package/components/Logo/style.js

@@ -0,0 +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};

package/components/Menu/components/Position/index.js

@@ -1,11 +1,11 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import clamp from'lodash/clamp';import styles from"./style";/**
+function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import clamp from'lodash/clamp';import styles from"./style";/**
  * The Context Menu Position component.
- */var Position=/*#__PURE__*/function(_Component){_inherits(Position,_Component);/**
+ */var Position=/*#__PURE__*/function(_Component){/**
    * The Constructor.
    * @param {Object} props The component props.
-   */function Position(props){var _this;_classCallCheck(this,Position);_this=_possibleConstructorReturn(this,_getPrototypeOf(Position).call(this,props));_this.elementRef=null;return _this;}/**
+   */function Position(props){var _this2;_classCallCheck(this,Position);_this2=_callSuper(this,Position,[props]);_this2.elementRef=null;return _this2;}/**
    * Calculate and apply the correct menu position after mounting.
-   */_createClass(Position,[{key:"componentDidMount",value:function componentDidMount(){var offset=this.props.offset;// Get ref to the actual child DOM element and calculate bounding rect.
+   */_inherits(Position,_Component);return _createClass(Position,[{key:"componentDidMount",value:function componentDidMount(){var offset=this.props.offset;// Get ref to the actual child DOM element and calculate bounding rect.
 var _this$elementRef$chil=_slicedToArray(this.elementRef.childNodes,1),child=_this$elementRef$chil[0];var bounds=child.getBoundingClientRect();// Get window dimensions
 var width=window.innerWidth;var height=window.innerHeight;// Get the outer gap from styles
 var gap=styles.outerGap;// Calculate clamped menu position
@@ -13,4 +13,4 @@ var left=clamp(offset.left,0,width-bounds.width-gap*2);var top=clamp(offset.top-
 this.elementRef.style.left="".concat(left,"px");this.elementRef.style.top="".concat(top,"px");}/**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var _this2=this;return React.createElement("div",{ref:function ref(_ref){_this2.elementRef=_ref;},className:styles.container},this.props.children);}}]);return Position;}(Component);_defineProperty(Position,"defaultProps",{children:null,offset:{top:0,left:0}});export default Position;
+   */},{key:"render",value:function render(){var _this3=this;return React.createElement("div",{ref:function ref(_ref){_this3.elementRef=_ref;},className:styles.container},this.props.children);}}]);}(Component);_defineProperty(Position,"defaultProps",{children:null,offset:{top:0,left:0}});export default Position;

package/components/Menu/index.js

@@ -1,12 +1,12 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component,Children}from'react';import PropTypes from'prop-types';import Portal from'react-portal';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import Position from"./components/Position";import Item from"./components/Item";import styles from"./style";/**
+function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component,Children}from'react';import PropTypes from'prop-types';import Portal from'react-portal';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import Position from"./components/Position";import Item from"./components/Item";import styles from"./style";/**
  * The Menu component.
- */var Menu=/*#__PURE__*/function(_Component){_inherits(Menu,_Component);function Menu(){var _getPrototypeOf2;var _this;_classCallCheck(this,Menu);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(Menu)).call.apply(_getPrototypeOf2,[this].concat(args)));_defineProperty(_assertThisInitialized(_this),"handleMenuToggle",function(e){var _this$props$contextRe;if(e){e.preventDefault();e.stopPropagation();}if((_this$props$contextRe=_this.props.contextRef)===null||_this$props$contextRe===void 0?void 0:_this$props$contextRe.current){_this.props.onClose();}});return _this;}_createClass(Menu,[{key:"render",/**
-   * Renders the component.
-   * @returns {JSX}
-   */value:function render(){var _this$props=this.props,children=_this$props.children,isOpen=_this$props.isOpen,onClose=_this$props.onClose;return React.createElement(Portal,{isOpened:isOpen},React.createElement("div",{className:styles.overlay},React.createElement(Backdrop,{isVisible:true,level:0,opacity:0,onClick:onClose}),React.createElement(Position,{offset:this.offset},React.createElement("div",{className:styles.menu},Children.map(children,function(child){if(!child){return null;}return React.cloneElement(child,{closeMenu:onClose});})))));}},{key:"offset",/**
-   * Gets the offset of the DOM element.
-   * @returns {Object}
-   */get:function get(){var _this$props$contextRe2;if((_this$props$contextRe2=this.props.contextRef)===null||_this$props$contextRe2===void 0?void 0:_this$props$contextRe2.current){var bounds=this.props.contextRef.current.getBoundingClientRect();return{height:bounds.height,width:bounds.width,left:bounds.left,right:bounds.right,bottom:bounds.bottom,top:bounds.top+bounds.height};}return{top:0,left:0};}/**
+ */var Menu=/*#__PURE__*/function(_Component){function Menu(){var _this2;_classCallCheck(this,Menu);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Menu,[].concat(args));/**
    * Handles any menu toggling interactions.
    * @param {Object} [e] Event
-   */}]);return Menu;}(Component);_defineProperty(Menu,"Item",Item);_defineProperty(Menu,"defaultProps",{children:null,contextRef:null,isOpen:false,onClose:function onClose(){}});export default Menu;
+   */_defineProperty(_this2,"handleMenuToggle",function(e){var _this2$props$contextR;if(e){e.preventDefault();e.stopPropagation();}if((_this2$props$contextR=_this2.props.contextRef)===null||_this2$props$contextR===void 0?void 0:_this2$props$contextR.current){_this2.props.onClose();}});return _this2;}_inherits(Menu,_Component);return _createClass(Menu,[{key:"offset",get:/**
+   * Gets the offset of the DOM element.
+   * @returns {Object}
+   */function get(){var _this$props$contextRe;if((_this$props$contextRe=this.props.contextRef)===null||_this$props$contextRe===void 0?void 0:_this$props$contextRe.current){var bounds=this.props.contextRef.current.getBoundingClientRect();return{height:bounds.height,width:bounds.width,left:bounds.left,right:bounds.right,bottom:bounds.bottom,top:bounds.top+bounds.height};}return{top:0,left:0};}},{key:"render",value:/**
+   * Renders the component.
+   * @returns {JSX}
+   */function render(){var _this$props=this.props,children=_this$props.children,isOpen=_this$props.isOpen,onClose=_this$props.onClose;return React.createElement(Portal,{isOpened:isOpen},React.createElement("div",{className:styles.overlay},React.createElement(Backdrop,{isVisible:true,level:0,opacity:0,onClick:onClose}),React.createElement(Position,{offset:this.offset},React.createElement("div",{className:styles.menu},Children.map(children,function(child){if(!child){return null;}return React.cloneElement(child,{closeMenu:onClose});})))));}}]);}(Component);_defineProperty(Menu,"Item",Item);_defineProperty(Menu,"defaultProps",{children:null,contextRef:null,isOpen:false,onClose:function onClose(){}});export default Menu;

package/components/MessageBar/MessageBar.js

@@ -1,4 +1,4 @@
-import{hot}from'react-hot-loader/root';import*as React from'react';import classnames from'classnames';import{i18n,errorBehavior}from'@shopgate/engage/core';import StopIcon from'@shopgate/pwa-ui-shared/icons/StopIcon';import InfoIcon from'@shopgate/pwa-ui-shared/icons/InfoIcon';import WarningIcon from'@shopgate/pwa-ui-shared/icons/WarningIcon';import*as styles from"./MessageBar.style";var iconMapping={info:InfoIcon,warning:WarningIcon,error:StopIcon};/**
+import{hot}from'react-hot-loader/root';import*as React from'react';import PropTypes from'prop-types';import classnames from'classnames';import{i18n,errorBehavior}from'@shopgate/engage/core';import StopIcon from'@shopgate/pwa-ui-shared/icons/StopIcon';import InfoIcon from'@shopgate/pwa-ui-shared/icons/InfoIcon';import WarningIcon from'@shopgate/pwa-ui-shared/icons/WarningIcon';import*as styles from"./MessageBar.style";var iconMapping={info:InfoIcon,warning:WarningIcon,error:StopIcon};/**
  * The MessageBar component.
  * @param {Object} props The component props.
  * @property {Array} props.messages The message content.

package/components/MessageBar/index.js

@@ -1 +1 @@
-export{default as MessageBar}from"./MessageBar";// TYPES
+export{default as MessageBar}from"./MessageBar";

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 _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){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";/**
  * Handles
- */var NavigationHandler=/*#__PURE__*/function(_React$PureComponent){_inherits(NavigationHandler,_React$PureComponent);function NavigationHandler(props){var _this;_classCallCheck(this,NavigationHandler);_this=_possibleConstructorReturn(this,_getPrototypeOf(NavigationHandler).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;}/**
+ */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;}/**
    * Removes the event listeners.
-   */_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);}/**
+   */_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);}/**
    * @returns {null}
-   */},{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(){}/**
+   */},{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);

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(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();});});

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:styles.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 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;

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 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,{useMemo}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;return React.createElement("ul",null,items.map(function(item,currentIndex){return React.createElement("li",{key:item.value,className:classNames(_defineProperty({},styles.active,currentIndex===selectedIndex))},React.createElement("button",{className:styles.button,disabled:item.disabled,onClick:function onClick(){onSelect(item.value);onClose();},type:"button"},item.label));}));};PickerList.defaultProps={onClose:function onClose(){},selectedIndex:null};export default PickerList;
+ */var PickerList=function PickerList(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;

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

@@ -1,14 +1,14 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import styles from"./style";/**
+function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import styles from"./style";/**
  * The picker modal.
- */var PickerModal=/*#__PURE__*/function(_Component){_inherits(PickerModal,_Component);/**
+ */var PickerModal=/*#__PURE__*/function(_Component){/**
    * The constructor.
    * @param {Object} props The props.
-   */function PickerModal(props){var _this;_classCallCheck(this,PickerModal);_this=_possibleConstructorReturn(this,_getPrototypeOf(PickerModal).call(this,props));_defineProperty(_assertThisInitialized(_this),"closeModal",function(){_this.setState({active:false});clearTimeout(_this.timeout);_this.timeout=setTimeout(_this.props.onClose,styles.duration);});_this.timeout=null;_this.state={active:true};return _this;}/**
+   */function PickerModal(props){var _this2;_classCallCheck(this,PickerModal);_this2=_callSuper(this,PickerModal,[props]);/**
+   * Closes the modal after the closing animations have finished.
+   */_defineProperty(_this2,"closeModal",function(){_this2.setState({active:false});clearTimeout(_this2.timeout);_this2.timeout=setTimeout(_this2.props.onClose,styles.duration);});_this2.timeout=null;_this2.state={active:true};return _this2;}/**
    * Update state when isOpen changes.
    * @param {Object} nextProps The next component props.
-   */_createClass(PickerModal,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.isOpen!==nextProps.isOpen){this.setState({active:nextProps.isOpen});}}/**
-   * Closes the modal after the closing animations have finished.
-   */},{key:"render",/**
+   */_inherits(PickerModal,_Component);return _createClass(PickerModal,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.isOpen!==nextProps.isOpen){this.setState({active:nextProps.isOpen});}}},{key:"render",value:/**
    * Render all the things!
    * @returns {JSX} The picker modal with the picker list inside.
-   */value:function render(){var backgroundClassName=classNames(styles.background.base,_defineProperty({},styles.background.inactive,!this.state.active));var containerClassName=classNames(styles.container.base,_defineProperty({},styles.container.inactive,!this.state.active));if(!this.props.isOpen){return null;}return React.createElement("div",{className:styles.wrapper},React.createElement("div",{"aria-hidden":true,className:backgroundClassName,onClick:this.closeModal}),React.createElement("div",{className:containerClassName},React.cloneElement(this.props.children,{onClose:this.closeModal})));}}]);return PickerModal;}(Component);export default PickerModal;
+   */function render(){var backgroundClassName=classNames(styles.background.base,_defineProperty({},styles.background.inactive,!this.state.active));var containerClassName=classNames(styles.container.base,_defineProperty({},styles.container.inactive,!this.state.active));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;

package/components/Picker/index.js

@@ -1,4 +1,4 @@
-function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}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 Portal from'react-portal';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);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 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.
@@ -10,19 +10,28 @@ function _classCallCheck(instance,Constructor){if(!(instance instanceof Construc
  * @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){_inherits(Picker,_Component);/**
+ */var Picker=/*#__PURE__*/function(_Component){/**
    * The constructor.
    * @param {Object} props - The component props.
-   */function Picker(props){var _this;_classCallCheck(this,Picker);_this=_possibleConstructorReturn(this,_getPrototypeOf(Picker).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;}/**
+   */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;}/**
    * Updates the selected item when the value prop changes.
    * @param {Object} nextProps - The next props.
-   */_createClass(Picker,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){// Only update if a value is present and also changed.
+   */_inherits(Picker,_Component);return _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:"render",/**
+   */},{key:"selectedItem",get:function get(){return normalizeItem(this.props.items[this.state.selectedIndex]);}},{key:"render",value:/**
    * Renders the component.
    * @returns {JSX}
-   */value: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?null: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 React.createElement("div",{role:"button",className:this.props.className,ref:this.props.forwardedRef,tabIndex:0,"aria-haspopup":true},React.createElement(this.props.buttonComponent,buttonProps),React.createElement(Portal,{onClose:function onClose(){return _this2.toggleOpenState(false);},isOpened:true},React.createElement(this.props.modalComponent,modalProps,React.createElement(this.props.listComponent,listProps))));}},{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.
-   */}]);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);
+   */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(Portal,{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);