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

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

@@ -1,14 +1,67 @@
-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";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from "./style";
+
+/**
  * The picker modal.
- */var PickerModal=/*#__PURE__*/function(_Component){/**
+ */
+class PickerModal extends Component {
+  /**
    * The constructor.
    * @param {Object} props The props.
-   */function PickerModal(props){var _this2;_classCallCheck(this,PickerModal);_this2=_callSuper(this,PickerModal,[props]);/**
-   * Closes the modal after the closing animations have finished.
-   */_defineProperty(_this2,"closeModal",function(){_this2.setState({active:false});clearTimeout(_this2.timeout);_this2.timeout=setTimeout(_this2.props.onClose,styles.duration);});_this2.timeout=null;_this2.state={active:true};return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Closes the modal after the closing animations have finished.
+     */
+    this.closeModal = () => {
+      this.setState({
+        active: false
+      });
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(this.props.onClose, styles.duration);
+    };
+    this.timeout = null;
+    this.state = {
+      active: true
+    };
+  }
+
+  /**
    * Update state when isOpen changes.
    * @param {Object} nextProps The next component props.
-   */_inherits(PickerModal,_Component);return _createClass(PickerModal,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.isOpen!==nextProps.isOpen){this.setState({active:nextProps.isOpen});}}},{key:"render",value:/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.isOpen !== nextProps.isOpen) {
+      this.setState({
+        active: nextProps.isOpen
+      });
+    }
+  }
+  /**
    * 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));return this.props.isOpen?React.createElement("div",{className:"".concat(styles.wrapper," common__picker__modal")},React.createElement("div",{"aria-hidden":true,className:backgroundClassName,onClick:this.closeModal}),React.createElement("div",{className:containerClassName},React.cloneElement(this.props.children,{onClose:this.closeModal}))):null;}}]);}(Component);export default PickerModal;
+   */
+  render() {
+    const backgroundClassName = classNames(styles.background.base, {
+      [styles.background.inactive]: !this.state.active
+    });
+    const containerClassName = classNames(styles.container.base, {
+      [styles.container.inactive]: !this.state.active
+    });
+    return this.props.isOpen ? /*#__PURE__*/React.createElement("div", {
+      className: `${styles.wrapper} common__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
+    }))) : null;
+  }
+}
+export default PickerModal;

package/components/Picker/components/Modal/style.js

@@ -1 +1,78 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var fadeDuration=150;var slideDuration=150;var easing='cubic-bezier(0.25, 0.1, 0.25, 1)';var slideInPickerModal=css.keyframes({'0%':{transform:'translateY(100%)'},'100%':{transform:'translateY(0)'}});var slideOutPickerModal=css.keyframes({'0%':{transform:'translateY(0)'},'100%':{transform:'translateY(100%)'}});var fadeInPickerBackground=css.keyframes({'0%':{opacity:0},'100%':{opacity:0.5}});var fadeOutPickerBackground=css.keyframes({'0%':{opacity:0.5},'100%':{opacity:0}});var wrapper=css({zIndex:1000,position:'fixed',top:0,bottom:0,left:0,right:0}).toString();var background={base:css({position:'absolute',top:0,bottom:0,left:0,right:0,backgroundColor:'black',animation:"".concat(fadeInPickerBackground," ").concat(fadeDuration,"ms 1 both")}).toString(),inactive:css({animation:"".concat(fadeOutPickerBackground," ").concat(fadeDuration,"ms 1 both")}).toString()};var container={base:css({position:'absolute',bottom:0,left:0,right:0,backgroundColor:themeColors.light,animation:"".concat(slideInPickerModal," ").concat(slideDuration,"ms 1 both ").concat(easing)}).toString(),inactive:css({animation:"".concat(slideOutPickerModal," ").concat(slideDuration,"ms 1 both ").concat(easing)}).toString()};export default{background:background,container:container,wrapper:wrapper,duration:Math.max(slideDuration,fadeDuration)};
+import { css } from 'glamor';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+const fadeDuration = 150;
+const slideDuration = 150;
+const easing = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
+const slideInPickerModal = css.keyframes({
+  '0%': {
+    transform: 'translateY(100%)'
+  },
+  '100%': {
+    transform: 'translateY(0)'
+  }
+});
+const slideOutPickerModal = css.keyframes({
+  '0%': {
+    transform: 'translateY(0)'
+  },
+  '100%': {
+    transform: 'translateY(100%)'
+  }
+});
+const fadeInPickerBackground = css.keyframes({
+  '0%': {
+    opacity: 0
+  },
+  '100%': {
+    opacity: 0.5
+  }
+});
+const fadeOutPickerBackground = css.keyframes({
+  '0%': {
+    opacity: 0.5
+  },
+  '100%': {
+    opacity: 0
+  }
+});
+const wrapper = css({
+  zIndex: 1000,
+  position: 'fixed',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0
+}).toString();
+const background = {
+  base: css({
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'black',
+    animation: `${fadeInPickerBackground} ${fadeDuration}ms 1 both`
+  }).toString(),
+  inactive: css({
+    animation: `${fadeOutPickerBackground} ${fadeDuration}ms 1 both`
+  }).toString()
+};
+const container = {
+  base: css({
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: themeColors.light,
+    animation: `${slideInPickerModal} ${slideDuration}ms 1 both ${easing}`
+  }).toString(),
+  inactive: css({
+    animation: `${slideOutPickerModal} ${slideDuration}ms 1 both ${easing}`
+  }).toString()
+};
+export default {
+  background,
+  container,
+  wrapper,
+  duration: Math.max(slideDuration, fadeDuration)
+};

package/components/Picker/index.js

@@ -1,40 +1,186 @@
-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'@shopgate/engage/core';import PickerModal from"./components/Modal";import PickerButton from"./components/Button";import PickerList from"./components/List";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { ConnectedReactPortal } from '@shopgate/engage/components';
+import { withForwardedRef } from '@shopgate/engage/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.
  * @deprecated Use Picker from engage instead
- */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;};/**
+ */
+const normalizeItem = item => {
+  if (item !== null && typeof item !== 'undefined') {
+    const itemDefaults = {
+      value: item.value || item,
+      label: item.label || item.value || item,
+      disabled: item.disabled || false
+    };
+    if (typeof item === 'object') {
+      return {
+        ...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;});};/**
+ */
+const findItemIndexByValue = (items, value) => items.map(normalizeItem).findIndex(item => item.value === value);
+
+/**
  * The picker component (acts like a selectbox).
  * @deprecated Will be remove in Engage v7.0.0.
  *             Please use `import { Picker } from '@shopgate/engage/components'` instead.
- */var Picker=/*#__PURE__*/function(_Component){/**
+ */
+class Picker extends Component {
+  /**
    * The constructor.
    * @param {Object} props - The component props.
-   */function Picker(props){var _this2;_classCallCheck(this,Picker);_this2=_callSuper(this,Picker,[props]);/**
-   * Triggers the onChange callback if the selected value has changed.
-   * @param {Object} nextValue - The value the user picked.
-   */_defineProperty(_this2,"triggerChangeCallback",function(nextValue){var nextSelectedIndex=findItemIndexByValue(_this2.props.items,nextValue);if(nextSelectedIndex>-1&&_this2.state.selectedIndex!==nextSelectedIndex){_this2.props.onChange(nextValue);}_this2.props.onSelect(nextValue);});/**
-   * Triggers the onChange callback if the selected value has changed.
-   * @param {Object} nextOpenState - The value the user picked.
-   */_defineProperty(_this2,"triggerCloseCallback",function(nextOpenState){if(_this2.state.isOpen&&!nextOpenState){_this2.props.onClose();}});/**
-   * Gets called when a new item is selected
-   * @param {string} value - The selected value.
-   */_defineProperty(_this2,"handleItemSelect",function(value){_this2.triggerChangeCallback(value);_this2.setState({selectedIndex:findItemIndexByValue(_this2.props.items,value)});});/**
-   * Sets or toggles the open state of the component.
-   * @param {boolean} [open] New open state.
-   */_defineProperty(_this2,"toggleOpenState",function(open){_this2.setState(function(_ref){var isOpen=_ref.isOpen;var nextIsOpen=typeof open==='boolean'?open:!isOpen;_this2.triggerCloseCallback(nextIsOpen);return{isOpen:nextIsOpen};});});_this2.state={selectedIndex:findItemIndexByValue(props.items,props.value),isOpen:props.isOpen};return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Triggers the onChange callback if the selected value has changed.
+     * @param {Object} nextValue - The value the user picked.
+     */
+    this.triggerChangeCallback = nextValue => {
+      const nextSelectedIndex = findItemIndexByValue(this.props.items, nextValue);
+      if (nextSelectedIndex > -1 && this.state.selectedIndex !== nextSelectedIndex) {
+        this.props.onChange(nextValue);
+      }
+      this.props.onSelect(nextValue);
+    };
+    /**
+     * Triggers the onChange callback if the selected value has changed.
+     * @param {Object} nextOpenState - The value the user picked.
+     */
+    this.triggerCloseCallback = nextOpenState => {
+      if (this.state.isOpen && !nextOpenState) {
+        this.props.onClose();
+      }
+    };
+    /**
+     * Gets called when a new item is selected
+     * @param {string} value - The selected value.
+     */
+    this.handleItemSelect = value => {
+      this.triggerChangeCallback(value);
+      this.setState({
+        selectedIndex: findItemIndexByValue(this.props.items, value)
+      });
+    };
+    /**
+     * Sets or toggles the open state of the component.
+     * @param {boolean} [open] New open state.
+     */
+    this.toggleOpenState = open => {
+      this.setState(({
+        isOpen
+      }) => {
+        const nextIsOpen = typeof open === 'boolean' ? open : !isOpen;
+        this.triggerCloseCallback(nextIsOpen);
+        return {
+          isOpen: nextIsOpen
+        };
+      });
+    };
+    this.state = {
+      selectedIndex: findItemIndexByValue(props.items, props.value),
+      isOpen: props.isOpen
+    };
+  }
+
+  /**
    * Updates the selected item when the value prop changes.
    * @param {Object} nextProps - The next props.
-   */_inherits(Picker,_Component);return _createClass(Picker,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){// Only update if a value is present and also changed.
-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});}}/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // Only update if a value is present and also changed.
+    if (!this.selectedItem || nextProps.value !== this.selectedItem.value) {
+      this.setState({
+        selectedIndex: findItemIndexByValue(nextProps.items, nextProps.value)
+      });
+    }
+    if (this.props.isOpen !== nextProps.isOpen && nextProps.isOpen !== this.state.isOpen) {
+      this.setState({
+        isOpen: nextProps.isOpen
+      });
+    }
+  }
+
+  /**
    * Getter for the selected item.
-   */},{key:"selectedItem",get:function get(){return normalizeItem(this.props.items[this.state.selectedIndex]);}},{key:"render",value:/**
+   */
+  get selectedItem() {
+    return normalizeItem(this.props.items[this.state.selectedIndex]);
+  }
+  /**
    * Renders the component.
    * @returns {JSX}
-   */function render(){var _this3=this;var hasSelection=!!this.selectedItem;var buttonValue=hasSelection?this.selectedItem.label:'';var buttonLabel=hasSelection?this.props.label:this.props.placeholder;var buttonProps=_extends({},this.props.buttonProps,{label:buttonLabel,value:buttonValue,disabled:this.props.disabled,openList:this.props.disabled?null:function(){_this3.toggleOpenState(true);}});var modalProps={isOpen:this.state.isOpen,duration:this.props.duration,onClose:function onClose(){return _this3.toggleOpenState(false);}};var listProps={items:this.props.items.map(normalizeItem),selectedIndex:this.state.selectedIndex,onSelect:this.handleItemSelect};return React.createElement("div",{role:"button",className:"".concat(this.props.className," common__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);
+   */
+  render() {
+    const hasSelection = !!this.selectedItem;
+    const buttonValue = hasSelection ? this.selectedItem.label : '';
+    const buttonLabel = hasSelection ? this.props.label : this.props.placeholder;
+    const buttonProps = {
+      ...this.props.buttonProps,
+      label: buttonLabel,
+      value: buttonValue,
+      disabled: this.props.disabled,
+      openList: this.props.disabled ? null : () => {
+        this.toggleOpenState(true);
+      }
+    };
+    const modalProps = {
+      isOpen: this.state.isOpen,
+      duration: this.props.duration,
+      onClose: () => this.toggleOpenState(false)
+    };
+    const listProps = {
+      items: this.props.items.map(normalizeItem),
+      selectedIndex: this.state.selectedIndex,
+      onSelect: this.handleItemSelect
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      role: "button",
+      className: `${this.props.className} common__picker`,
+      ref: this.props.forwardedRef,
+      tabIndex: 0,
+      "aria-haspopup": true
+    }, /*#__PURE__*/React.createElement(this.props.buttonComponent, buttonProps), /*#__PURE__*/React.createElement(ConnectedReactPortal, {
+      onClose: () => this.toggleOpenState(false),
+      isOpened: true
+    }, /*#__PURE__*/React.createElement(this.props.modalComponent, modalProps, /*#__PURE__*/React.createElement(this.props.listComponent, listProps))));
+  }
+}
+Picker.defaultProps = {
+  buttonComponent: PickerButton,
+  buttonProps: {},
+  duration: 300,
+  disabled: false,
+  forwardedRef: null,
+  label: '',
+  listComponent: PickerList,
+  modalComponent: PickerModal,
+  className: '',
+  isOpen: false,
+  items: [],
+  onChange: () => {},
+  onClose: () => {},
+  onSelect: () => {},
+  placeholder: 'Pick ...',
+  value: null
+};
+export default withForwardedRef(Picker);

package/components/Picker/spec.js

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

@@ -1,33 +1,144 @@
-var _excluded=["props"];function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _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 _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,Suspense}from'react';import PropTypes from'prop-types';import{logger}from'@shopgate/pwa-core/helpers';import Loading from"../Loading";import portalCollection from"../../helpers/portals/portalCollection";import{componentsConfig}from"../../helpers/config";/**
+import React, { PureComponent, Suspense } from 'react';
+import PropTypes from 'prop-types';
+import { logger } from '@shopgate/pwa-core/helpers';
+import Loading from "../Loading";
+import portalCollection from "../../helpers/portals/portalCollection";
+import { componentsConfig } from "../../helpers/config";
+
+/**
  * The Portal component.
- */var Portal=/*#__PURE__*/function(_PureComponent){/**
+ */
+class Portal extends PureComponent {
+  /**
    * Constructor.
    * @param {Object} props The component props.
-   */function Portal(_props){var _this2;_classCallCheck(this,Portal);_this2=_callSuper(this,Portal,[_props]);/**
-   * Returns the portal components.
-   * @param {Object} props - The props to pass to the component.
-   * @return {Array}
-   */_defineProperty(_this2,"getRenderedComponents",function(props){var propsFromProps=props.props,reducedProps=_objectWithoutProperties(props,_excluded);var componentProps=_extends({},propsFromProps,{},reducedProps);return _this2.components.map(function(_ref){var PortalComponent=_ref.PortalComponent,key=_ref.key;return React.createElement(Suspense,{fallback:React.createElement(Loading,null),key:key},React.createElement(PortalComponent,componentProps));});});/**
-   * Returns the portal components.
-   * @param {string} name Name of the portal position
-   * @return {Array}
-   */_defineProperty(_this2,"getPortalComponents",function(name){var components=[];var portals=portalCollection.getPortals();if(!portals){return components;}var config=portalCollection.getConfig();if(!config){config=componentsConfig.portals;}// Loop over the portal keys.
-Object.keys(config).forEach(function(key,index){var sourceTarget=config[key].target;var portalTarget=Array.isArray(sourceTarget)?sourceTarget:[sourceTarget];if(portalTarget.length===0){return;}portalTarget.forEach(function(target){// Stop if there is no key that matches the given name (prop).
-if(target!==name){return;}var PortalComponent=portals[key];// Check that the component is valid.
-if(PortalComponent){var componentKey="".concat(key,"-").concat(index);components.push({key:componentKey,PortalComponent:PortalComponent});}});});return components;});_this2.state={hasError:false};_this2.components=_this2.getPortalComponents(_props.name);return _this2;}/**
+   */
+  constructor(_props) {
+    super(_props);
+    /**
+     * Returns the portal components.
+     * @param {Object} props - The props to pass to the component.
+     * @return {Array}
+     */
+    this.getRenderedComponents = props => {
+      const {
+        props: propsFromProps,
+        ...reducedProps
+      } = props;
+      const componentProps = {
+        ...propsFromProps,
+        ...reducedProps
+      };
+      return this.components.map(({
+        PortalComponent,
+        key
+      }) => /*#__PURE__*/React.createElement(Suspense, {
+        fallback: /*#__PURE__*/React.createElement(Loading, null),
+        key: key
+      }, /*#__PURE__*/React.createElement(PortalComponent, componentProps)));
+    };
+    /**
+     * Returns the portal components.
+     * @param {string} name Name of the portal position
+     * @return {Array}
+     */
+    this.getPortalComponents = name => {
+      const components = [];
+      const portals = portalCollection.getPortals();
+      if (!portals) {
+        return components;
+      }
+      let config = portalCollection.getConfig();
+      if (!config) {
+        config = componentsConfig.portals;
+      }
+
+      // Loop over the portal keys.
+      Object.keys(config).forEach((key, index) => {
+        const {
+          target: sourceTarget
+        } = config[key];
+        const portalTarget = Array.isArray(sourceTarget) ? sourceTarget : [sourceTarget];
+        if (portalTarget.length === 0) {
+          return;
+        }
+        portalTarget.forEach(target => {
+          // Stop if there is no key that matches the given name (prop).
+          if (target !== name) {
+            return;
+          }
+          const PortalComponent = portals[key];
+
+          // Check that the component is valid.
+          if (PortalComponent) {
+            const componentKey = `${key}-${index}`;
+            components.push({
+              key: componentKey,
+              PortalComponent
+            });
+          }
+        });
+      });
+      return components;
+    };
+    this.state = {
+      hasError: false
+    };
+    this.components = this.getPortalComponents(_props.name);
+  }
+
+  /**
    * Catches errors.
    * @param {Error} error The caught error.
    * @param {Object} info The stacktrace info.
-   */_inherits(Portal,_PureComponent);return _createClass(Portal,[{key:"componentDidCatch",value:function componentDidCatch(error,info){this.setState({hasError:true});logger.error(error,info);}},{key:"render",value:/**
+   */
+  componentDidCatch(error, info) {
+    this.setState({
+      hasError: true
+    });
+    logger.error(error, info);
+  }
+  /**
    * Renders the component.
    * @return {JSX}
-   */function render(){var children=this.props.children;var hasError=this.state.hasError;var renderedComponents=this.getRenderedComponents(this.props);var hasComponents=renderedComponents.length>0;/**
+   */
+  render() {
+    const {
+      children
+    } = this.props;
+    const {
+      hasError
+    } = this.state;
+    const renderedComponents = this.getRenderedComponents(this.props);
+    const hasComponents = renderedComponents.length > 0;
+
+    /**
      * Render nothing if there are no children, matching components
      * via name or an error occurred.
-     */if(hasError||!(hasComponents||children)){return null;}/**
+     */
+    if (hasError || !(hasComponents || children)) {
+      return null;
+    }
+
+    /**
      * If there is a child component then we treat the match as an override
      * and we render the last match only.
-     */if(hasComponents){/**
+     */
+    if (hasComponents) {
+      /**
        * If there is a child component then we treat the match as an override
        * and we render the last match only.
-       */if(children){return renderedComponents[renderedComponents.length-1];}return renderedComponents;}return children;}}]);}(PureComponent);_defineProperty(Portal,"defaultProps",{children:null,props:null});export default Portal;
+       */
+      if (children) {
+        return renderedComponents[renderedComponents.length - 1];
+      }
+      return renderedComponents;
+    }
+    return children;
+  }
+}
+Portal.defaultProps = {
+  children: null,
+  props: null
+};
+export default Portal;