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

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 List=function List(props){var items=props.items,onClose=props.onClose,onSelect=props.onSelect,selectedIndex=props.selectedIndex,query=props.query;var filteredItems=items;if(query&&query.length){filteredItems=items.filter(function(_ref){var _ref$label=_ref.label,label=_ref$label===void 0?'':_ref$label;var searchLabel=label.replaceAll(' ','').toLowerCase();var searchValue=query.replaceAll(' ','').toLowerCase();return searchLabel.includes(searchValue);});}return/*#__PURE__*/React.createElement("ul",{className:"engage__picker_list"},filteredItems.map(function(item,currentIndex){return/*#__PURE__*/React.createElement("li",{key:item.value,className:classNames(_defineProperty({},styles.active,currentIndex===selectedIndex))},/*#__PURE__*/React.createElement("button",{className:styles.button,disabled:item.disabled,onClick:function onClick(){onSelect(item.value);onClose();},type:"button"},item.label));}));};List.defaultProps={onClose:function onClose(){},selectedIndex:null,query:''};export default List;
+ */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){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import styles from"./style";/**
+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 Modal=/*#__PURE__*/function(_Component){_inherits(Modal,_Component);var _super=_createSuper(Modal);/**
+ */var PickerModal=/*#__PURE__*/function(_Component){/**
    * The constructor.
    * @param {Object} props The props.
-   */function Modal(props){var _this;_classCallCheck(this,Modal);_this=_super.call(this,props);_defineProperty(_assertThisInitialized(_this),"closeModal",function(){_this.setState({active:false});clearTimeout(_this.timeout);_this.timeout=setTimeout(_this.props.onClose,styles.duration);});_this.timeout=null;_this.state={active:true};return _this;}/**
+   */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(Modal,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.isOpen!==nextProps.isOpen){this.setState({active:nextProps.isOpen});}}/**
-   * Closes the modal after the closing animations have finished.
-   */},{key:"render",value:/**
+   */_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.
-   */function render(){var backgroundClassName=classNames(styles.background.base,_defineProperty({},styles.background.inactive,!this.state.active));var containerClassName=classNames(styles.container.base,_defineProperty({},styles.container.inactive,!this.state.active));if(!this.props.isOpen){return null;}return/*#__PURE__*/React.createElement("div",{className:"".concat(styles.wrapper," engage__picker_modal")},/*#__PURE__*/React.createElement("div",{"aria-hidden":true,className:backgroundClassName,onClick:this.closeModal}),/*#__PURE__*/React.createElement("div",{className:containerClassName},/*#__PURE__*/React.cloneElement(this.props.children,{onClose:this.closeModal})));}}]);return Modal;}(Component);export default Modal;
+   */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,28 +1,37 @@
-function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}import React,{Component}from'react';import PropTypes from'prop-types';import Portal from'react-portal';import{withForwardedRef}from"../../core";import PickerModal from"./components/Modal";import PickerButton from"./components/Button";import PickerList from"./components/List";/**
+function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}import React,{Component}from'react';import PropTypes from'prop-types';import{ConnectedReactPortal}from'@shopgate/engage/components';import{withForwardedRef}from"../../core";import PickerModal from"./components/Modal";import PickerButton from"./components/Button";import PickerList from"./components/List";/**
  * Converts an item of any type (e.g. string or number)
  * to an object representation containing value and label properties.
  * @param {*} item - An item of any type.
  * @returns {Object} An object representation of the item.
- */var normalizeItem=function normalizeItem(item){if(item!==null&&typeof item!=='undefined'){var itemDefaults={value:item.value||item,label:item.label||item.value||item,disabled:item.disabled||false};if(_typeof(item)==='object'){return _extends({},itemDefaults,item);}return itemDefaults;}return null;};/**
+ */var normalizeItem=function normalizeItem(item){if(item!==null&&typeof item!=='undefined'){var itemDefaults={value:item.value||item,label:item.label||item.value||item,disabled:item.disabled||false};if(_typeof(item)==='object'){return _extends({},itemDefaults,{},item);}return itemDefaults;}return null;};/**
  * Finds an item index in a list of items by value.
  * @param {Array} items - The list of items.
  * @param {*} value - The value to look for.
  * @returns {number} The found item index or undefined.
  */var findItemIndexByValue=function findItemIndexByValue(items,value){return items.map(normalizeItem).findIndex(function(item){return item.value===value;});};/**
  * The picker component (acts like a selectbox).
- */var Picker=/*#__PURE__*/function(_Component){_inherits(Picker,_Component);var _super=_createSuper(Picker);/**
+ */var Picker=/*#__PURE__*/function(_Component){/**
    * The constructor.
    * @param {Object} props - The component props.
-   */function Picker(props){var _this;_classCallCheck(this,Picker);_this=_super.call(this,props);_defineProperty(_assertThisInitialized(_this),"triggerChangeCallback",function(nextValue){var nextSelectedIndex=findItemIndexByValue(_this.props.items,nextValue);if(nextSelectedIndex>-1&&_this.state.selectedIndex!==nextSelectedIndex){_this.props.onChange(nextValue);}_this.props.onSelect(nextValue);});_defineProperty(_assertThisInitialized(_this),"triggerCloseCallback",function(nextOpenState){if(_this.state.isOpen&&!nextOpenState){_this.props.onClose();}});_defineProperty(_assertThisInitialized(_this),"handleItemSelect",function(value){_this.triggerChangeCallback(value);_this.setState({selectedIndex:findItemIndexByValue(_this.props.items,value)});});_defineProperty(_assertThisInitialized(_this),"toggleOpenState",function(open){_this.setState(function(_ref){var isOpen=_ref.isOpen;var nextIsOpen=typeof open==='boolean'?open:!isOpen;_this.triggerCloseCallback(nextIsOpen);return{isOpen:nextIsOpen};});});_this.state={selectedIndex:findItemIndexByValue(props.items,props.value),isOpen:props.isOpen};return _this;}/**
+   */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:"selectedItem",get:function get(){return normalizeItem(this.props.items[this.state.selectedIndex]);}/**
-   * Triggers the onChange callback if the selected value has changed.
-   * @param {Object} nextValue - The value the user picked.
-   */},{key:"render",value:/**
+   */},{key:"selectedItem",get:function get(){return normalizeItem(this.props.items[this.state.selectedIndex]);}},{key:"render",value:/**
    * Renders the component.
    * @returns {JSX}
-   */function render(){var _this2=this;var hasSelection=!!this.selectedItem;var buttonValue=hasSelection?this.selectedItem.label:'';var buttonLabel=hasSelection?this.props.label:this.props.placeholder;var buttonProps=_extends({},this.props.buttonProps,{label:buttonLabel,value:buttonValue,disabled:this.props.disabled,openList:this.props.disabled?function(){}:function(){_this2.toggleOpenState(true);}});var modalProps={isOpen:this.state.isOpen,duration:this.props.duration,onClose:function onClose(){return _this2.toggleOpenState(false);}};var listProps={items:this.props.items.map(normalizeItem),selectedIndex:this.state.selectedIndex,onSelect:this.handleItemSelect};return/*#__PURE__*/React.createElement("div",{role:"button",className:"".concat(this.props.className," engage__picker"),ref:this.props.forwardedRef,tabIndex:0,"aria-haspopup":true},/*#__PURE__*/React.createElement(this.props.buttonComponent,buttonProps),/*#__PURE__*/React.createElement(Portal,{onClose:function onClose(){return _this2.toggleOpenState(false);},isOpened:true},/*#__PURE__*/React.createElement(this.props.modalComponent,modalProps,/*#__PURE__*/React.createElement(this.props.listComponent,listProps))));}}]);return Picker;}(Component);_defineProperty(Picker,"defaultProps",{buttonComponent:PickerButton,buttonProps:{},duration:300,disabled:false,forwardedRef:null,label:'',listComponent:PickerList,modalComponent:PickerModal,className:'',isOpen:false,items:[],onChange:function onChange(){},onClose:function onClose(){},onSelect:function onSelect(){},placeholder:'Pick ...',value:null});export default withForwardedRef(Picker);
+   */function render(){var _this3=this;var hasSelection=!!this.selectedItem;var buttonValue=hasSelection?this.selectedItem.label:'';var buttonLabel=hasSelection?this.props.label:this.props.placeholder;var buttonProps=_extends({},this.props.buttonProps,{label:buttonLabel,value:buttonValue,disabled:this.props.disabled,openList:this.props.disabled?null:function(){_this3.toggleOpenState(true);}});var modalProps={isOpen:this.state.isOpen,duration:this.props.duration,onClose:function onClose(){return _this3.toggleOpenState(false);}};var listProps={items:this.props.items.map(normalizeItem),selectedIndex:this.state.selectedIndex,onSelect:this.handleItemSelect};return React.createElement("div",{role:"button",className:"".concat(this.props.className," engage__picker"),ref:this.props.forwardedRef,tabIndex:0,"aria-haspopup":true},React.createElement(this.props.buttonComponent,buttonProps),React.createElement(ConnectedReactPortal,{onClose:function onClose(){return _this3.toggleOpenState(false);},isOpened:true},React.createElement(this.props.modalComponent,modalProps,React.createElement(this.props.listComponent,listProps))));}}]);}(Component);_defineProperty(Picker,"defaultProps",{buttonComponent:PickerButton,buttonProps:{},duration:300,disabled:false,forwardedRef:null,label:'',listComponent:PickerList,modalComponent:PickerModal,className:'',isOpen:false,items:[],onChange:function onChange(){},onClose:function onClose(){},onSelect:function onSelect(){},placeholder:'Pick ...',value:null});export default withForwardedRef(Picker);

package/components/Picker/spec.js

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

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

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

package/components/PickerUtilize/index.js

@@ -1,15 +1,17 @@
-function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}var _excluded=["hasButton","sheetProps"];function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import{SheetList,Picker as BasePicker,Sheet}from'@shopgate/engage/components';import{ViewContext}from'@shopgate/engage/components/View';import Button from"./components/Button";import styles from"./style";/**
+var _excluded=["hasButton","sheetProps"];function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import{SheetList,Picker as BasePicker,Sheet}from'@shopgate/engage/components';import{ViewContext}from'@shopgate/engage/components/View';import Button from"./components/Button";import styles from"./style";/**
  * The template version of the Picker component.
  * @param {Object} props The same component props as in the base Picker component.
- */var PickerUtilize=/*#__PURE__*/function(_Component){_inherits(PickerUtilize,_Component);var _super=_createSuper(PickerUtilize);/**
+ */var PickerUtilize=/*#__PURE__*/function(_Component){/**
    * Constructor
    * @param {Object} props Props of the component
-   */function PickerUtilize(props){var _this;_classCallCheck(this,PickerUtilize);_this=_super.call(this,props);_defineProperty(_assertThisInitialized(_this),"onDidOpen",function(){_this.props.setViewAriaHidden(true);if(_this.firstSelectableItemRef.current){_this.firstSelectableItemRef.current.focus();}});_defineProperty(_assertThisInitialized(_this),"onClose",function(){_this.props.setViewAriaHidden(false);if(_this.pickerRef.current){_this.pickerRef.current.focus();}});_this.modalComponent=function(sheetProps){return/*#__PURE__*/React.createElement(Sheet,_extends({},_extends({},_this.props.sheetProps,sheetProps),{title:_this.props.label,onDidOpen:_this.onDidOpen}));};_this.pickerRef=/*#__PURE__*/React.createRef();_this.firstSelectableItemRef=/*#__PURE__*/React.createRef();_this.listComponent=function(prps){return/*#__PURE__*/React.createElement(SheetList,null,prps.items.map(function(item,index){return/*#__PURE__*/React.createElement(SheetList.Item,{key:item.value,title:item.label,onClick:function onClick(){setTimeout(function(){prps.onSelect(item.value);prps.onClose();},_this.props.clickDelay);},isDisabled:item.disabled,isSelected:index===prps.selectedIndex,rightComponent:item.rightComponent,testId:item.label,ref:index===prps.selectedIndex?_this.firstSelectableItemRef:null});}));};return _this;}/**
+   */function PickerUtilize(props){var _this2;_classCallCheck(this,PickerUtilize);_this2=_callSuper(this,PickerUtilize,[props]);/**
    * Focuses the picker button for screen readers.
-   */_createClass(PickerUtilize,[{key:"render",value:/**
+   */_defineProperty(_this2,"onDidOpen",function(){_this2.props.setViewAriaHidden(true);if(_this2.firstSelectableItemRef.current){_this2.firstSelectableItemRef.current.focus();}});/**
+   * Focuses the first selectable item for screen readers.
+   */_defineProperty(_this2,"onClose",function(){_this2.props.setViewAriaHidden(false);if(_this2.pickerRef.current){_this2.pickerRef.current.focus();}});_this2.modalComponent=function(sheetProps){return React.createElement(Sheet,_extends({},_extends({},_this2.props.sheetProps,{},sheetProps),{title:_this2.props.label,onDidOpen:_this2.onDidOpen}));};_this2.pickerRef=React.createRef();_this2.firstSelectableItemRef=React.createRef();_this2.listComponent=function(prps){return React.createElement(SheetList,null,prps.items.map(function(item,index){return React.createElement(SheetList.Item,{key:item.value,title:item.label,onClick:function onClick(){setTimeout(function(){prps.onSelect(item.value);prps.onClose();},_this2.props.clickDelay);},isDisabled:item.disabled,isSelected:index===prps.selectedIndex,rightComponent:item.rightComponent,testId:item.label,ref:index===prps.selectedIndex?_this2.firstSelectableItemRef:null});}));};return _this2;}_inherits(PickerUtilize,_Component);return _createClass(PickerUtilize,[{key:"render",value:/**
    * Render
    * @returns {JSX}
-   */function render(){var _this$props=this.props,hasButton=_this$props.hasButton,ignore=_this$props.sheetProps,restProps=_objectWithoutProperties(_this$props,_excluded);return/*#__PURE__*/React.createElement(BasePicker,_extends({},restProps,{className:"".concat(hasButton?styles:''," engage__picker-utilize"),modalComponent:this.modalComponent,buttonProps:this.props.buttonProps,buttonComponent:this.props.buttonComponent||Button,listComponent:this.listComponent,onClose:this.onClose,ref:this.pickerRef}));}}]);return PickerUtilize;}(Component);_defineProperty(PickerUtilize,"defaultProps",{buttonComponent:null,buttonProps:{},/**
+   */function render(){var _this$props=this.props,hasButton=_this$props.hasButton,ignore=_this$props.sheetProps,restProps=_objectWithoutProperties(_this$props,_excluded);return React.createElement(BasePicker,_extends({},restProps,{className:"".concat(hasButton?styles:''," engage__picker-utilize"),modalComponent:this.modalComponent,buttonProps:this.props.buttonProps,buttonComponent:this.props.buttonComponent||Button,listComponent:this.listComponent,onClose:this.onClose,ref:this.pickerRef}));}}]);}(Component);_defineProperty(PickerUtilize,"defaultProps",{buttonComponent:null,buttonProps:{},/**
      * Time in ms that delays picker interaction in order
      * to let animations complete first.
-     */clickDelay:150,hasButton:true,sheetProps:{}});export default(function(props){return/*#__PURE__*/React.createElement(ViewContext.Consumer,null,function(_ref){var setAriaHidden=_ref.setAriaHidden;return/*#__PURE__*/React.createElement(PickerUtilize,_extends({},props,{setViewAriaHidden:setAriaHidden}));});});
+     */clickDelay:150,hasButton:true,sheetProps:{}});export default(function(props){return React.createElement(ViewContext.Consumer,null,function(_ref){var setAriaHidden=_ref.setAriaHidden;return React.createElement(PickerUtilize,_extends({},props,{setViewAriaHidden:setAriaHidden}));});});

package/components/PickerUtilize/spec.js

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

package/components/QuantityInput/QuantityInput.js

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

package/components/QuantityLabel/QuantityLabel.js

@@ -0,0 +1,4 @@
+import React,{useMemo}from'react';import PropTypes from'prop-types';import{formatFloat}from"../QuantityInput/helper";/**
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */var QuantityLabel=function QuantityLabel(_ref){var value=_ref.value,maxDecimals=_ref.maxDecimals,unit=_ref.unit,className=_ref.className;var output=useMemo(function(){var formatted=formatFloat(value,maxDecimals);return unit?"".concat(formatted," ").concat(unit):formatted;},[maxDecimals,unit,value]);return React.createElement("span",{className:className},output);};QuantityLabel.defaultProps={className:'',maxDecimals:2,unit:null};export default QuantityLabel;

package/components/QuantityLabel/index.js

@@ -0,0 +1 @@
+export{default}from"./QuantityLabel";

package/components/Radio/Radio.js

@@ -0,0 +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;}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{hot}from'react-hot-loader/root';import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{css}from'glamor';import CheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioCheckedIcon';import UncheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';import{Ripple}from'@shopgate/engage/components';import{useRadioGroup}from"../RadioGroup";var styles={root:css({display:'inline-flex',alignItems:'inherit',justifyContent:'inherit',position:'relative',borderRadius:'50%'}).toString(),input:css({top:0,left:0,margin:0,opacity:0,padding:0,position:'absolute',zIndex:1,width:'100%',height:'100%'}).toString(),radioContainer:css({display:'flex',position:'relative',width:24,height:24}).toString(),radio:css({height:'100%',width:'100%'}).toString(),radioChecked:css({color:'var(--color-primary)'}).toString(),radioDisabled:css({opacity:0.5,pointerEvents:'none'}).toString(),ripple:css({padding:12}).toString()};/**
+ * The Radio component
+ * @param {Object} props The component props
+ * @returns {JSX}
+ */var Radio=function Radio(_ref){var classes=_ref.classes,nameProp=_ref.name,onChangeProp=_ref.onChange,checkedProp=_ref.checked,disabledProp=_ref.disabled,valueProp=_ref.value,attributes=_ref.attributes;var radioGroup=useRadioGroup();var name=nameProp;var checked=checkedProp;var onChange=onChangeProp;if(radioGroup){if(checked===null){checked=radioGroup.value===valueProp;}if(typeof radioGroup.name!=='undefined'){name=radioGroup.name;}if(typeof radioGroup.onChange!=='undefined'){onChange=radioGroup.onChange;}}return React.createElement("span",{className:classNames(styles.root,classes.root)},React.createElement(Ripple,{className:styles.ripple,color:"var(--color-primary)"},React.createElement("input",_extends({className:styles.input,type:"radio",name:name,value:valueProp,checked:checked,onChange:onChange,disabled:disabledProp,id:"".concat(name,"_").concat(valueProp)},attributes)),React.createElement("div",{className:classNames(styles.radioContainer,_defineProperty(_defineProperty({},styles.radioDisabled,disabledProp),classes.disabled,disabledProp))},checked&&React.createElement(CheckedIcon,{className:classNames(styles.radio,styles.radioChecked,classes.radioChecked,'checkedIcon')}),!checked&&React.createElement(UncheckedIcon,{className:classNames(styles.radio,classes.radioUnchecked,'uncheckedIcon')}))));};Radio.defaultProps={classes:{},checked:null,disabled:false,onChange:null,name:null,value:null,attributes:null};export default hot(Radio);

package/components/Radio/index.js

@@ -0,0 +1 @@
+export{default}from"./Radio";

package/components/RadioCard/RadioCard.js

@@ -0,0 +1,9 @@
+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{hot}from'react-hot-loader/root';import React from'react';import PropTypes from'prop-types';import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import classNames from'classnames';import Card from'@shopgate/pwa-ui-shared/Card';import{useRadioGroup}from"../RadioGroup";import Radio from"../Radio";var variables=themeConfig.variables;var styles={card:css({borderRadius:4,padding:'8px 8px 8px 4px',display:'flex',alignItems:'center'}).toString(),content:css({padding:"".concat(variables.gap.small,"px ").concat(variables.gap.small,"px ").concat(variables.gap.small,"px 0"),width:'100%'}).toString(),contentDisabled:css({opacity:0.5,pointerEvents:'none'}).toString(),radio:css({alignItems:'center'}).toString()};/**
+ * The default card component
+ * @param {Object} props The component props
+ * @returns {JSX}
+ */var CardComponent=function CardComponent(_ref){var children=_ref.children,className=_ref.className;return React.createElement(Card,{className:classNames(styles.card,className)},children);};CardComponent.defaultProps={children:null,className:null};/**
+ * The RadioCard component
+ * @param {Object} props The component props
+ * @returns {JSX}
+ */var RadioCard=function RadioCard(_ref2){var children=_ref2.children,nameProp=_ref2.name,onChange=_ref2.onChange,checked=_ref2.checked,disabledProp=_ref2.disabled,value=_ref2.value,attributes=_ref2.attributes,classes=_ref2.classes,RenderCard=_ref2.renderCard;var radioGroup=useRadioGroup();var name=nameProp;var disabled=disabledProp;if(radioGroup){if(typeof radioGroup.name!=='undefined'){name=radioGroup.name;}if(typeof radioGroup.disabled!=='undefined'){disabled=radioGroup.disabled;}}return React.createElement(RenderCard,{className:classes.root},React.createElement(Radio,{name:name,value:value,onChange:onChange,disabled:disabled,checked:checked,attributes:attributes,classes:{root:styles.radio}}),React.createElement("label",{htmlFor:"".concat(name,"_").concat(value),className:classNames(styles.content,_defineProperty(_defineProperty({},styles.contentDisabled,disabled),classes.disabled,disabled))},children));};RadioCard.defaultProps={children:null,checked:null,classes:{},disabled:false,onChange:null,name:null,value:null,attributes:null,renderCard:CardComponent};export default hot(RadioCard);

package/components/RadioCard/index.js

@@ -0,0 +1 @@
+export{default}from"./RadioCard";

package/components/RadioGroup/RadioGroup.context.js

@@ -0,0 +1 @@
+import React from'react';var initialContext={};export default React.createContext(initialContext);

package/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,4 @@
+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;}import{hot}from'react-hot-loader/root';import React,{useState,useCallback,useEffect}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import RadioGroupContext from"./RadioGroup.context";var styles={root:css({display:'flex',flexDirection:'column'}).toString()};/**
+ * @param {Object} props The component props
+ * @returns {JSX}
+ */var RadioGroup=function RadioGroup(_ref){var classes=_ref.classes,children=_ref.children,name=_ref.name,disabled=_ref.disabled,valueProp=_ref.value,defaultValue=_ref.defaultValue,onChange=_ref.onChange,Component=_ref.component;var _useState=useState(valueProp||defaultValue),_useState2=_slicedToArray(_useState,2),value=_useState2[0],setValue=_useState2[1];useEffect(function(){setValue(valueProp||defaultValue);},[defaultValue,valueProp]);var handleChange=useCallback(function(event){setValue(event.target.value);if(onChange){onChange(event,event.target.value);}},[onChange]);return React.createElement(RadioGroupContext.Provider,{value:{name:name,onChange:handleChange,value:value,disabled:disabled}},React.createElement(Component,{role:"radiogroup",className:classNames(styles.root,classes.root)},children));};RadioGroup.defaultProps={classes:{},children:null,defaultValue:null,disabled:false,value:null,onChange:null,component:'div'};export default hot(RadioGroup);

package/components/RadioGroup/index.js

@@ -0,0 +1 @@
+export{default}from"./RadioGroup";export{default as useRadioGroup}from"./useRadioGroup";

package/components/RadioGroup/useRadioGroup.js

@@ -0,0 +1,4 @@
+import{useContext}from'react';import RadioGroupContext from"./RadioGroup.context";/**
+ * Provides a radio group context
+ * @returns {Object}
+ */export default function useRadioGroup(){return useContext(RadioGroupContext);}

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

@@ -1,4 +1,4 @@
-import React from'react';import PropTypes from'prop-types';import cxs from'classnames';import styles from"./style";/**
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React from'react';import PropTypes from'prop-types';import cxs from'classnames';import styles from"./style";/**
  * The range slider handle component.
  * @param {Object} props The component properties
  * @param {boolean} props.active Whether this handle is currently touched or was recently touched.
@@ -6,4 +6,4 @@ import React from'react';import PropTypes from'prop-types';import cxs from'class
  * @param {Function} props.onTouchStart The touch start event callback.
  * @param {Object} props.classNames (Optional) An additional style classes for the handle.
  * @returns {JSX}
- */var RangeSliderHandle=function RangeSliderHandle(props){var active=props.active,index=props.index,_onTouchStart=props.onTouchStart,classNames=props.classNames;var style={zIndex:Number(active)||0};return/*#__PURE__*/React.createElement("div",{className:cxs(classNames.handleOuter,styles,'engage__range-slider__handle'),style:style,onTouchStart:function onTouchStart(event){return _onTouchStart(event,index);}},/*#__PURE__*/React.createElement("div",{className:classNames.handleInner}));};RangeSliderHandle.defaultProps={active:false,classNames:{handleOuter:null,handleInner:null}};export default RangeSliderHandle;
+ */var RangeSliderHandle=function RangeSliderHandle(props){var active=props.active,index=props.index,onTouchStart=props.onTouchStart,classNames=props.classNames,useMouseEvents=props.useMouseEvents;var style={zIndex:Number(active)||0};var eventHandler=_defineProperty({},useMouseEvents?'onMouseDown':'onTouchStart',function(event){return onTouchStart(event,index);});return React.createElement("div",_extends({className:cxs(classNames.handleOuter,styles,'engage__range-slider__handle'),style:style},eventHandler),React.createElement("div",{className:classNames.handleInner}));};RangeSliderHandle.defaultProps={active:false,classNames:{handleOuter:null,handleInner:null}};export default RangeSliderHandle;

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

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

package/components/RangeSlider/helper.js

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

package/components/RangeSlider/index.js

@@ -1,42 +1,54 @@
-function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import cxs from'classnames';import styles from"./style";import Handle from"./components/Handle";import{generateLinearEasingCallback,generateExponentialEasingCallback,getRangeStyle,getTouchPositionX,getAbsoluteValue,getRelativeValue}from"./helper";/**
+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 cxs from'classnames';import styles from"./style";import Handle from"./components/Handle";import{isTouchDevice}from"../../core";import{generateLinearEasingCallback,generateExponentialEasingCallback,getRangeStyle,getTouchPositionX,getAbsoluteValue,getRelativeValue}from"./helper";/**
  * The range slider component.
- */var RangeSlider=/*#__PURE__*/function(_PureComponent){_inherits(RangeSlider,_PureComponent);var _super=_createSuper(RangeSlider);/**
+ */var RangeSlider=/*#__PURE__*/function(_PureComponent){/**
    * Constructor
    * @param {Object} props The component properties
-   */function RangeSlider(props){var _this;_classCallCheck(this,RangeSlider);_this=_super.call(this,props);_defineProperty(_assertThisInitialized(_this),"handleTouchStart",function(event,index){_this.draggedHandle=index;// Calculate the relative offset to the handles center
+   */function RangeSlider(props){var _this2;_classCallCheck(this,RangeSlider);_this2=_callSuper(this,RangeSlider,[props]);/**
+   * Processes touch start events on handles.
+   * @param {Object} event The touch event
+   * @param {number} index The index of the touched handle.
+   */_defineProperty(_this2,"handleTouchStart",function(event,index){_this2.addEventListeners();_this2.draggedHandle=index;// Calculate the relative offset to the handles center
 var handleDOMElement=event.target;// Get the handles bounding rectangle ...
 var handleRect=handleDOMElement.getBoundingClientRect();// ... and calculate its absolute center.
 var handleCenterX=handleRect.left+handleDOMElement.offsetWidth/2;// Store the signed distanced between the current touch offset and the handle center.
-_this.touchOffset=getTouchPositionX(event)-handleCenterX;});_defineProperty(_assertThisInitialized(_this),"handleTouchMove",function(event){if(_this.props.min===_this.props.max){return;}if(_this.draggedHandle===null){return;}var _this$domElement$curr=_this.domElement.current,offsetWidth=_this$domElement$curr.offsetWidth,offsetLeft=_this$domElement$curr.offsetLeft;// Calculate the absolute offset where the element was touched...
-var deltaX=getTouchPositionX(event)-offsetLeft-_this.touchOffset;// ...and convert it into a relative value between [0...1].
-deltaX=Math.max(0,Math.min(1,deltaX/offsetWidth));var stateUpdate={};if(_this.draggedHandle===1){// Right handle dragged
-if(_this.state.rangeMin<deltaX){stateUpdate.rangeMax=Math.min(1,deltaX);_this.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMax-_this.state.rangeMax);}else{// Not in valid range, swap handles
-_this.draggedHandle=0;stateUpdate.rangeMax=_this.state.rangeMin;stateUpdate.rangeMin=deltaX;_this.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMin-_this.state.rangeMin);}}else if(_this.draggedHandle===0){// Left handle dragged
-if(_this.state.rangeMax>deltaX){stateUpdate.rangeMin=Math.max(0,deltaX);_this.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMin-_this.state.rangeMin);}else{// Not in valid range, swap handles
-_this.draggedHandle=1;stateUpdate.rangeMin=_this.state.rangeMax;stateUpdate.rangeMax=deltaX;_this.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMax-_this.state.rangeMax);}}_this.draggedHandlePixelOffset*=_this.domElement.current.offsetWidth;_this.setState(stateUpdate,_this.triggerChangeCallback);});_defineProperty(_assertThisInitialized(_this),"handleTouchEnd",function(){_this.touchOffset=0;_this.draggedHandle=null;});_defineProperty(_assertThisInitialized(_this),"handleRangeTouch",function(event){var _this$domElement$curr2=_this.domElement.current,offsetWidth=_this$domElement$curr2.offsetWidth,offsetLeft=_this$domElement$curr2.offsetLeft;var dx=(getTouchPositionX(event)-offsetLeft)/offsetWidth;var d0=Math.abs(_this.state.rangeMin-dx);var d1=Math.abs(_this.state.rangeMax-dx);if(d0<d1){_this.draggedHandle=0;}else{_this.draggedHandle=1;}_this.handleTouchMove(event);});_defineProperty(_assertThisInitialized(_this),"handleInputChange",function(event){var max=_this.props.max;var _event$target=event.target,value=_event$target.value,id=_event$target.id;var delta=Math.max(0,Math.min(1,value/(max/100)));var state=id==='price_from'?{rangeMin:delta}:{rangeMax:delta};_this.setState(state);});_this.draggedHandle=null;// 0 for left handle, 1 for right handle or null
-_this.domElement=/*#__PURE__*/React.createRef();_this.touchOffset=0;_this.draggedHandlePixelOffset=0;// The absolute pixel delta of the last handle move event.
-_this.state=_this.getRange(props);return _this;}/**
-   * Sets the global event listeners when component mounts.
-   */_createClass(RangeSlider,[{key:"componentDidMount",value:function componentDidMount(){document.addEventListener('touchend',this.handleTouchEnd);document.addEventListener('touchmove',this.handleTouchMove);}/**
+_this2.touchOffset=getTouchPositionX(event)-handleCenterX;});/**
+   * Processes move events on handles.
+   * @param {Object} event The touch event
+   */_defineProperty(_this2,"handleTouchMove",function(event){if(_this2.props.min===_this2.props.max){return;}if(_this2.draggedHandle===null){return;}var _this2$domElement$cur=_this2.domElement.current.getBoundingClientRect(),offsetWidth=_this2$domElement$cur.width,offsetLeft=_this2$domElement$cur.left;// Calculate the absolute offset where the element was touched...
+var deltaX=getTouchPositionX(event)-offsetLeft-_this2.touchOffset;// ...and convert it into a relative value between [0...1].
+deltaX=Math.max(0,Math.min(1,deltaX/offsetWidth));var stateUpdate={};if(_this2.draggedHandle===1){// Right handle dragged
+if(_this2.state.rangeMin<deltaX){stateUpdate.rangeMax=Math.min(1,deltaX);_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMax-_this2.state.rangeMax);}else{// Not in valid range, swap handles
+_this2.draggedHandle=0;stateUpdate.rangeMax=_this2.state.rangeMin;stateUpdate.rangeMin=deltaX;_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMin-_this2.state.rangeMin);}}else if(_this2.draggedHandle===0){// Left handle dragged
+if(_this2.state.rangeMax>deltaX){stateUpdate.rangeMin=Math.max(0,deltaX);_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMin-_this2.state.rangeMin);}else{// Not in valid range, swap handles
+_this2.draggedHandle=1;stateUpdate.rangeMin=_this2.state.rangeMax;stateUpdate.rangeMax=deltaX;_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMax-_this2.state.rangeMax);}}_this2.draggedHandlePixelOffset*=offsetWidth;_this2.setState(stateUpdate,_this2.triggerChangeCallback);});/**
+   * Processes global touch end events for handles.
+   * @param {Object} e The touch event
+   */_defineProperty(_this2,"handleTouchEnd",function(){_this2.removeEventListeners();_this2.touchOffset=0;_this2.draggedHandle=null;});/**
+   * Processes outer range touch end events.
+   * @param {Object} event The touch event
+   */_defineProperty(_this2,"handleRangeTouch",function(event){var _this2$domElement$cur2=_this2.domElement.current.getBoundingClientRect(),offsetWidth=_this2$domElement$cur2.width,offsetLeft=_this2$domElement$cur2.left;var dx=(getTouchPositionX(event)-offsetLeft)/offsetWidth;var d0=Math.abs(_this2.state.rangeMin-dx);var d1=Math.abs(_this2.state.rangeMax-dx);if(d0<d1){_this2.draggedHandle=0;}else{_this2.draggedHandle=1;}_this2.handleTouchMove(event);});/**
+   * Processes the input field values.
+   * @param {Object} event The change event.
+   */_defineProperty(_this2,"handleInputChange",function(event){var max=_this2.props.max;var _event$target=event.target,value=_event$target.value,id=_event$target.id;var delta=Math.max(0,Math.min(1,value/(max/100)));var state=id==='price_from'?{rangeMin:delta}:{rangeMax:delta};_this2.setState(state);});_this2.draggedHandle=null;// 0 for left handle, 1 for right handle or null
+_this2.domElement=React.createRef();_this2.touchOffset=0;_this2.draggedHandlePixelOffset=0;// The absolute pixel delta of the last handle move event.
+_this2.state=_this2.getRange(props);_this2.useMouseEvents=!isTouchDevice();return _this2;}/**
    * Updates the component properties.
    * @param {Object} newProps The new component properties.
-   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(newProps){this.setState(this.getRange(newProps));}/**
-   * Removes the global event listeners when component unmounts.
-   */},{key:"componentWillUnmount",value:function componentWillUnmount(){document.removeEventListener('touchend',this.handleTouchEnd);document.removeEventListener('touchmove',this.handleTouchMove);}/**
+   */_inherits(RangeSlider,_PureComponent);return _createClass(RangeSlider,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(newProps){this.setState(this.getRange(newProps));}/**
    * Get the easing function.
    */},{key:"ease",get:function get(){return{linear:generateLinearEasingCallback(this.props.resolution),exponential:generateExponentialEasingCallback(this.props.factor)}[this.props.easing];}/**
    * Get the function to invert an eased value to it's original value.
    */},{key:"invertedEase",get:function get(){return{linear:generateLinearEasingCallback(this.props.resolution),exponential:generateExponentialEasingCallback(1/this.props.factor)}[this.props.easing];}/**
+   * Adds event listeners
+   */},{key:"addEventListeners",value:function addEventListeners(){if(this.useMouseEvents){document.addEventListener('mouseup',this.handleTouchEnd);document.addEventListener('mousemove',this.handleTouchMove);}else{document.addEventListener('touchend',this.handleTouchEnd);document.addEventListener('touchmove',this.handleTouchMove);}}/**
+   * Removes event listeners
+   */},{key:"removeEventListeners",value:function removeEventListeners(){if(this.useMouseEvents){document.removeEventListener('mouseup',this.handleTouchEnd);document.removeEventListener('mousemove',this.handleTouchMove);}else{document.removeEventListener('touchend',this.handleTouchEnd);document.removeEventListener('touchmove',this.handleTouchMove);}}/**
    * Get range min and max from props.
    * @param {Object} props The component props.
    * @returns {Object} The new state
-   */},{key:"getRange",value:function getRange(props){var value=props.value,min=props.min,max=props.max;return{rangeMin:this.invertedEase(getRelativeValue(value[0],min,max)),rangeMax:this.invertedEase(getRelativeValue(value[1],min,max))};}/**
-   * Processes touch start events on handles.
-   * @param {Object} event The touch event
-   * @param {number} index The index of the touched handle.
-   */},{key:"triggerChangeCallback",value:/**
+   */},{key:"getRange",value:function getRange(props){var value=props.value,min=props.min,max=props.max;return{rangeMin:this.invertedEase(getRelativeValue(value[0],min,max)),rangeMax:this.invertedEase(getRelativeValue(value[1],min,max))};}},{key:"triggerChangeCallback",value:/**
    * Calls the change callback in case of a state update.
    */function triggerChangeCallback(){var _this$props=this.props,value=_this$props.value,onChange=_this$props.onChange,min=_this$props.min,max=_this$props.max;if(!onChange){return;}var newRange=[getAbsoluteValue(this.ease(this.state.rangeMin),min,max,true),getAbsoluteValue(this.ease(this.state.rangeMax),min,max,true)];if(newRange!==value){onChange(newRange);}}/**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var _this$props2=this.props,classNames=_this$props2.classNames,animationSpeed=_this$props2.animationSpeed;var speed=Math.round(1000/animationSpeed*this.draggedHandlePixelOffset);var rangeStyle=getRangeStyle(this.state.rangeMin,this.state.rangeMax,speed>10?speed:0);return/*#__PURE__*/React.createElement("div",{className:cxs(classNames.container,'engage__range-slider'),onTouchStart:this.handleRangeTouch,"aria-hidden":true},/*#__PURE__*/React.createElement("div",{className:cxs(classNames.outerRange,styles.outerRange),ref:this.domElement},/*#__PURE__*/React.createElement("div",{className:cxs(classNames.range,styles.range),style:rangeStyle},/*#__PURE__*/React.createElement(Handle,{index:0,onTouchStart:this.handleTouchStart,active:this.draggedHandle===0,classNames:classNames}),/*#__PURE__*/React.createElement(Handle,{index:1,onTouchStart:this.handleTouchStart,active:this.draggedHandle===1,classNames:classNames}))));}}]);return RangeSlider;}(PureComponent);_defineProperty(RangeSlider,"defaultProps",{animationSpeed:500,classNames:{},easing:'linear',factor:2,max:100,min:0,resolution:1,value:[0,100],onChange:null});export default RangeSlider;
+   */},{key:"render",value:function render(){var _this$props2=this.props,classNames=_this$props2.classNames,animationSpeed=_this$props2.animationSpeed;var speed=Math.round(1000/animationSpeed*this.draggedHandlePixelOffset);var rangeStyle=getRangeStyle(this.state.rangeMin,this.state.rangeMax,speed>10?speed:0);return React.createElement("div",{className:cxs(classNames.container,'engage__range-slider'),onMouseDown:this.handleRangeTouch,"aria-hidden":true},React.createElement("div",{className:cxs(classNames.outerRange,styles.outerRange),ref:this.domElement},React.createElement("div",{className:cxs(classNames.range,styles.range),style:rangeStyle},React.createElement(Handle,{index:0,onTouchStart:this.handleTouchStart,active:this.draggedHandle===0,classNames:classNames,useMouseEvents:this.useMouseEvents}),React.createElement(Handle,{index:1,onTouchStart:this.handleTouchStart,active:this.draggedHandle===1,classNames:classNames,useMouseEvents:this.useMouseEvents}))));}}]);}(PureComponent);_defineProperty(RangeSlider,"defaultProps",{animationSpeed:500,classNames:{},easing:'linear',factor:2,max:100,min:0,resolution:1,value:[0,100],onChange:null});export default RangeSlider;

package/components/RangeSlider/spec.js

@@ -1,4 +1,4 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React from'react';import{shallow,mount}from'enzyme';import RangeSlider from"./index";import RangeSliderHandle from"./components/Handle";import{generateLinearEasingCallback,generateExponentialEasingCallback,getAbsoluteValue,getRelativeValue}from"./helper";/**
+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;}import React from'react';import{shallow,mount}from'enzyme';import RangeSlider from"./index";import RangeSliderHandle from"./components/Handle";import{generateLinearEasingCallback,generateExponentialEasingCallback,getAbsoluteValue,getRelativeValue}from"./helper";/**
  * Creates a (fake) touch event.
  * @param {number} pageX the x page offset of the simulated touch event
  * @returns {Object} the new fake event containing only the properties required for testing.
@@ -19,10 +19,10 @@ left:pageX-simulatedHandleHalfWidth};}},touches:[{pageX:pageX}]};return touchEve
  * @param {Array} simulateSteps A set of relative horizontal pixel movements to simulate.
  * @param {Function} testCallback An optional callback for the onChange event of the slider.
  */var simulateInputTest=function simulateInputTest(pxWidth,pxOffset,min,max,value,easing,resolutionOrFactor,simulateSteps,testCallback){var config={totalPixelWidth:pxWidth,leftPixelOffset:pxOffset,min:min,max:max,easing:easing,resolution:resolutionOrFactor,factor:resolutionOrFactor,initialValue:value,valuePixelSize:pxWidth/(max-min),currentTouchDeltaX:0};config.currentTouchDeltaX=config.valuePixelSize*value[1];var ease={linear:generateLinearEasingCallback(config.resolution),exponential:generateExponentialEasingCallback(config.factor)}[config.easing];// eslint-disable-next-line require-jsdoc
-var callback=function callback(_ref){var _ref2=_slicedToArray(_ref,2),from=_ref2[0],to=_ref2[1];var currentTouchDeltaX=config.currentTouchDeltaX,valuePixelSize=config.valuePixelSize;var relativeValue=getRelativeValue(currentTouchDeltaX/valuePixelSize,min,max);var expected=getAbsoluteValue(ease(relativeValue),config.min,config.max,true);expect(expected===from||expected===to).toBe(true);if(testCallback){testCallback(config,from,to);}};var wrapper=mount(/*#__PURE__*/React.createElement(RangeSlider,{min:config.min,max:config.max,value:config.initialValue,easing:easing,resolution:config.resolution,factor:config.factor,onChange:callback}));expect(wrapper).toMatchSnapshot();// Create a simulated touch event.
+var callback=function callback(_ref){var _ref2=_slicedToArray(_ref,2),from=_ref2[0],to=_ref2[1];var currentTouchDeltaX=config.currentTouchDeltaX,valuePixelSize=config.valuePixelSize;var relativeValue=getRelativeValue(currentTouchDeltaX/valuePixelSize,min,max);var expected=getAbsoluteValue(ease(relativeValue),config.min,config.max,true);expect(expected===from||expected===to).toBe(true);if(testCallback){testCallback(config,from,to);}};var wrapper=mount(React.createElement(RangeSlider,{min:config.min,max:config.max,value:config.initialValue,easing:easing,resolution:config.resolution,factor:config.factor,onChange:callback}));expect(wrapper).toMatchSnapshot();// Create a simulated touch event.
 var pageX=config.leftPixelOffset+config.currentTouchDeltaX;var touchEvent=createTouchEvent(pageX);var inst=wrapper.instance();inst.handleTouchStart(touchEvent,1);simulateSteps.forEach(function(deltaX){config.currentTouchDeltaX+=deltaX;touchEvent.touches[0].pageX=config.leftPixelOffset+config.currentTouchDeltaX;Object.defineProperty(inst.domElement,'offsetLeft',{get:function get(){return config.leftPixelOffset;},configurable:true});Object.defineProperty(inst.domElement,'offsetWidth',{get:function get(){return config.totalPixelWidth;},configurable:true});inst.handleTouchMove(touchEvent);});inst.handleTouchEnd();};describe.skip('<RangeSlider />',function(){/**
    * Simple attribute tests
-   */it('renders with boundaries',function(){var wrapper=shallow(/*#__PURE__*/React.createElement(RangeSlider,{min:0,max:100}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RangeSliderHandle).length).toBe(2);});it('renders without boundaries',function(){var wrapper=shallow(/*#__PURE__*/React.createElement(RangeSlider,null));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RangeSliderHandle).length).toBe(2);});it('renders without a value pair',function(){var wrapper=shallow(/*#__PURE__*/React.createElement(RangeSlider,{value:[10,50]}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RangeSliderHandle).length).toBe(2);});/**
+   */it('renders with boundaries',function(){var wrapper=shallow(React.createElement(RangeSlider,{min:0,max:100}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RangeSliderHandle).length).toBe(2);});it('renders without boundaries',function(){var wrapper=shallow(React.createElement(RangeSlider,null));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RangeSliderHandle).length).toBe(2);});it('renders without a value pair',function(){var wrapper=shallow(React.createElement(RangeSlider,{value:[10,50]}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RangeSliderHandle).length).toBe(2);});/**
    * Callback tests
    */it('emits onChange if handle was touched (linear)',function(){simulateInputTest(100,73,// Range slider pixel width and offset.
 0,100,// Range slider minimum and maximum value.
@@ -37,5 +37,5 @@ var pageX=config.leftPixelOffset+config.currentTouchDeltaX;var touchEvent=create
 0.01,// Resolution.
 [// A series of pixel offsets to move the slider handle.
 +10,+10,+10,+10,+10,+10,+10,+10,-10,-10,-10,-10,-10,-10,-10,-10,+3,-15,+17,-80,+104,-23,-12,+67]);});it('emits onChange if the outer range was touched',function(){// eslint-disable-next-line require-jsdoc
-var callback=function callback(value){return expect(value).toEqual([-80,0]);};var wrapper=mount(/*#__PURE__*/React.createElement(RangeSlider,{min:-100,max:100,value:[0,0],onChange:callback}));// Create a simulated touch event at a page x offset of 20px.
+var callback=function callback(value){return expect(value).toEqual([-80,0]);};var wrapper=mount(React.createElement(RangeSlider,{min:-100,max:100,value:[0,0],onChange:callback}));// Create a simulated touch event at a page x offset of 20px.
 var touchEvent=createTouchEvent(20);var inst=wrapper.instance();Object.defineProperty(inst.domElement,'offsetLeft',{get:function get(){return 0;},configurable:true});Object.defineProperty(inst.domElement,'offsetWidth',{get:function get(){return 200;},configurable:true});inst.handleRangeTouch(touchEvent);});});

package/components/ResponsiveContainer/ResponsiveContainer.js

@@ -0,0 +1,6 @@
+import PropTypes from'prop-types';import{useResponsiveValue}from"./hooks";/**
+ * Renders a responsive container that allows to render based on width.
+ * @param {Object} props Component props.
+ * @returns {React.Node}
+ */var ResponsiveContainer=function ResponsiveContainer(_ref){var breakpoint=_ref.breakpoint,webOnly=_ref.webOnly,webAlways=_ref.webAlways,appOnly=_ref.appOnly,appAlways=_ref.appAlways,children=_ref.children;var render=useResponsiveValue(breakpoint,{webOnly:webOnly,webAlways:webAlways,appOnly:appOnly,appAlways:appAlways});if(!render){return null;}return children;};ResponsiveContainer.propTypes={appAlways:PropTypes.bool,appOnly:PropTypes.bool,breakpoint:PropTypes.string,// eslint-disable-next-line react/forbid-prop-types
+children:PropTypes.any,webAlways:PropTypes.bool,webOnly:PropTypes.bool};ResponsiveContainer.defaultProps={children:null,breakpoint:'>=xs',appAlways:false,webAlways:false,webOnly:false,appOnly:false};export default ResponsiveContainer;

package/components/ResponsiveContainer/breakpoints.js

@@ -0,0 +1,14 @@
+// Ugly imports to avoid breaking tests due to circular dependencies
+import{isIOSTheme}from'@shopgate/engage/core/helpers/isIOSTheme';import{hasWebBridge}from'@shopgate/engage/core/helpers/bridge';import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';var iosThemeActive=isIOSTheme();/* eslint-disable extra-rules/no-single-line-objects */var breakpoints=[{name:'xs',from:0,to:600},{name:'sm',from:600,to:960},{name:'md',from:960,to:1280},{name:'lg',from:1280,to:1920},{name:'xl',from:1920,to:Number.MAX_VALUE}];/* eslint-enable extra-rules/no-single-line-objects */ /**
+ * Generates a media query for different breakpoints and platform.
+ * @param {Object} comparators Comparators.
+ * @param {string} breakpoint Breakpoint rule.
+ * @param {Object} params Parameters needed to generation.
+ * @returns {string}
+ */export var parser=function parser(comparators,breakpoint){var _ref=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{},_ref$appAlways=_ref.appAlways,appAlways=_ref$appAlways===void 0?false:_ref$appAlways,_ref$appOnly=_ref.appOnly,appOnly=_ref$appOnly===void 0?false:_ref$appOnly,_ref$webOnly=_ref.webOnly,webOnly=_ref$webOnly===void 0?false:_ref$webOnly,_ref$webAlways=_ref.webAlways,webAlways=_ref$webAlways===void 0?false:_ref$webAlways;// Parse breakpoint prop into the comparator and the breakpoint name.
+var breakpointStart=breakpoint.search(/[a-zA-Z]/);var comparatorString=breakpoint.substring(0,breakpointStart===-1?0:breakpointStart);var breakpointString=breakpoint.substring(breakpointStart===-1?0:breakpointStart);// Get configuration.
+var comparator=comparators[comparatorString];var config=breakpoints.find(function(b){return b.name===breakpointString;});// Web / App config.
+// Handle iOS theme as app for now so that media queries in shared components only work for app
+var isWeb=hasWebBridge()&&!iosThemeActive&&!IS_PAGE_PREVIEW_ACTIVE;// Always mode.
+if(webAlways&&isWeb||appAlways&&!isWeb){return true;}// Return media query that never evaluates for now.
+if(appOnly&&isWeb||webOnly&&!isWeb){return false;}return comparator(config.from,config.to,window.innerWidth);};export default breakpoints;

package/components/ResponsiveContainer/condition.js

@@ -0,0 +1,6 @@
+import{parser}from"./breakpoints";var comparators={'>=':function _(from,to,width){return width>=from;},'>':function _(from,to,width){return width>=to;},'<':function _(from,to,width){return width<from;},'<=':function _(from,to,width){return width<to;},'':function _(from,to,width){return width>=from&&width<to;}};/**
+ * Tests if responsive condition applies.
+ * @param {string} breakpoint Breakpoint rule.
+ * @param {Object} params Parameters needed to generation.
+ * @returns {string}
+ */export var responsiveCondition=function responsiveCondition(breakpoint){var params=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var parsed=parser(comparators,breakpoint,params);return parsed;};