@shopgate/pwa-common 7.26.0-beta.1 → 7.26.0-beta.2

package/components/Backdrop/style.js

@@ -1 +1,2 @@
-import{css}from'glamor';export default css({position:'fixed',top:0,right:0,bottom:0,left:0});
+import{css}from'glamor';export default css({position:'fixed',top:0,right:0,bottom:0,left:0,// Prevents that content behind the backdrop is clickable
+pointerEvents:'all',touchAction:'none'});

package/components/CountdownTimer/index.js

@@ -33,5 +33,5 @@ var deltaTime=Math.max(0,this.remainingTime);var isExpired=deltaTime<=0;if(isExp
 clearInterval(this.intervalHandle);this.intervalHandle=null;// The timer just expired, invoke the callback.
 if(this.props.onExpire){this.props.onExpire();}}this.setState({formattedTime:createFormattedTime(deltaTime)});}/**
    * Renders the element.
-   * @return {JSX}
+   * @return {JSX.Element}
    */},{key:"render",value:function render(){return React.createElement(I18n.Text,{string:this.state.formattedTime.string,params:this.state.formattedTime.params,className:"".concat(this.props.className," common__countdown-timer")});}}]);}(Component);_defineProperty(CountdownTimer,"defaultProps",{className:'',onExpire:null});export default CountdownTimer;

package/components/Drawer/index.js

@@ -1,25 +1,25 @@
-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{FocusTrap}from'focus-trap-react';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";/**
  * Drawer component.
  */var Drawer=/*#__PURE__*/function(_Component){/**
    * Initializes the Drawer component.
    * @param {Object} props The components props.
    */function Drawer(props){var _this2;_classCallCheck(this,Drawer);_this2=_callSuper(this,Drawer,[props]);/**
    * Syncs the internal active state when an animation ends.
-   */_defineProperty(_this2,"handleAnimationEnd",function(){_this2.setState({active:_this2.props.isOpen});if(!_this2.props.isOpen){_this2.props.onDidClose();}else{_this2.props.onDidOpen();}});_this2.sheetRef=React.createRef();_this2.state={active:props.isOpen};return _this2;}/**
+   */_defineProperty(_this2,"handleAnimationEnd",function(){_this2.setState({active:_this2.props.isOpen});if(!_this2.props.isOpen){_this2.props.onDidClose();}else{_this2.props.onDidOpen();}});_this2.sheetRef=React.createRef();_this2.state={active:props.isOpen};return _this2;}/** inheritdoc */_inherits(Drawer,_Component);return _createClass(Drawer,[{key:"componentDidMount",value:function componentDidMount(){if(this.props.isOpen){if(this.sheetRef.current){this.sheetRef.current.focus();}}}/**
    * Update state when isOpen changes.
    * @param {Object} nextProps The next component props.
-   */_inherits(Drawer,_Component);return _createClass(Drawer,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.isOpen!==nextProps.isOpen){if(nextProps.isOpen){if(typeof nextProps.onOpen==='function'){nextProps.onOpen();}this.setState({active:true});}else if(typeof nextProps.onClose==='function'){nextProps.onClose();}}}/**
+   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.isOpen!==nextProps.isOpen){if(nextProps.isOpen){if(typeof nextProps.onOpen==='function'){nextProps.onOpen();}this.setState({active:true});}else if(typeof nextProps.onClose==='function'){nextProps.onClose();}}}/**
    * Set focus for a11y when sheet opens
    * @param {Object} prevProps The previous component props.
    */},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(!prevProps.isOpen&&this.props.isOpen){if(this.sheetRef.current){this.sheetRef.current.focus();}}}},{key:"render",value:/**
    * Renders the component.
    * @returns {JSX}
-   */function render(){var _this3=this;var _this$props=this.props,alwaysActive=_this$props.alwaysActive,className=_this$props.className,children=_this$props.children,isOpen=_this$props.isOpen,animation=_this$props.animation;var active=this.state.active;var animationIn=animation["in"]||styles.animation["in"];var animationOut=animation.out||styles.animation.out;var combinedClassName=classNames(className,styles.container,_defineProperty({},animationIn,isOpen),_defineProperty({},animationOut,!isOpen),'common__drawer');var style={};if(typeof animation.duration==='number'){style.animationDuration="".concat(animation.duration,"ms");}return active||alwaysActive?React.createElement(FocusTrap,{active:isOpen},React.createElement("div",{ref:this.sheetRef,className:combinedClassName,style:style,onAnimationEnd:function onAnimationEnd(){var _this3$sheetRef;_this3.handleAnimationEnd();// clear any residual animation style to fix a11y issue on Android
+   */function render(){var _this3=this;var _this$props=this.props,className=_this$props.className,children=_this$props.children,isOpen=_this$props.isOpen,animation=_this$props.animation;var active=this.state.active;var animationIn=animation["in"]||styles.animation["in"];var animationOut=animation.out||styles.animation.out;var combinedClassName=classNames(className,styles.container,_defineProperty({},animationIn,isOpen),_defineProperty({},animationOut,!isOpen),'common__drawer');var style={};if(typeof animation.duration==='number'){style.animationDuration="".concat(animation.duration,"ms");}return active?React.createElement("div",{ref:this.sheetRef,className:combinedClassName,style:style,onAnimationEnd:function onAnimationEnd(){var _this3$sheetRef;_this3.handleAnimationEnd();// clear any residual animation style to fix a11y issue on Android
 // (focus ring is misaligned)
-if((_this3$sheetRef=_this3.sheetRef)===null||_this3$sheetRef===void 0?void 0:_this3$sheetRef.style){_this3.sheetRef.style.animation='';_this3.sheetRef.style.transform='none';}},role:"dialog","aria-modal":true,tabIndex:-1},children)):null;}}]);}(Component);/**
+if((_this3$sheetRef=_this3.sheetRef)===null||_this3$sheetRef===void 0?void 0:_this3$sheetRef.style){_this3.sheetRef.style.animation='';_this3.sheetRef.style.transform='none';}},role:"dialog","aria-modal":true,tabIndex:-1},children):null;}}]);}(Component);/**
    * The component prop types.
    * @type {Object}
    */ /**
    * The component default props.
    * @type {Object}
-   */_defineProperty(Drawer,"defaultProps",{alwaysActive:false,className:'',children:null,isOpen:false,onOpen:function onOpen(){},onClose:function onClose(){},onDidClose:function onDidClose(){},onDidOpen:function onDidOpen(){},animation:{duration:null,"in":'',out:''}});export default Drawer;
+   */_defineProperty(Drawer,"defaultProps",{className:'',children:null,isOpen:false,onOpen:function onOpen(){},onClose:function onClose(){},onDidClose:function onDidClose(){},onDidOpen:function onDidOpen(){},animation:{duration:null,"in":'',out:''}});export default Drawer;

package/components/Drawer/spec.js

@@ -1 +1 @@
-import React from'react';import{mount,shallow}from'enzyme';import Drawer from"./index";describe('<Drawer />',function(){var onOpen=jest.fn();var onClose=jest.fn();var onDidOpen=jest.fn();var onDidClose=jest.fn();beforeEach(function(){jest.clearAllMocks();});it('should render',function(){var wrapper=shallow(React.createElement(Drawer,null));expect(wrapper).toMatchSnapshot();});it('should execute callback when drawer is opened',function(){var wrapper=mount(React.createElement(Drawer,{onOpen:onOpen}));wrapper.setProps({isOpen:true});expect(onOpen).toBeCalled();});it('should execute callback when drawer is closed',function(){var wrapper=mount(React.createElement(Drawer,{isOpen:true,onClose:onClose}));wrapper.setProps({isOpen:false});expect(onClose).toBeCalled();});it('should add custom classes',function(){var wrapper=mount(React.createElement(Drawer,{className:"custom-class-name",isOpen:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.hasClass('custom-class-name')).toEqual(true);});it('should execute callback when drawer open animation did end',function(){var wrapper=mount(React.createElement(Drawer,{className:"custom-class-name",isOpen:false,onOpen:onOpen,onDidOpen:onDidOpen}));expect(wrapper).toMatchSnapshot();wrapper.setProps({isOpen:true});expect(onOpen).toBeCalled();expect(onDidOpen).not.toBeCalled();wrapper.simulate('animationEnd');expect(onDidOpen).toBeCalled();});it('should execute callback when drawer close animation did end',function(){var wrapper=mount(React.createElement(Drawer,{className:"custom-class-name",isOpen:true,onClose:onClose,onDidClose:onDidClose}));expect(wrapper).toMatchSnapshot();wrapper.setProps({isOpen:false});expect(onClose).toBeCalled();expect(onDidClose).not.toBeCalled();wrapper.simulate('animationEnd');expect(onDidClose).toBeCalled();});});
+import React from'react';import{mount,shallow}from'enzyme';import Drawer from"./index";jest.mock('@shopgate/engage/a11y/components');describe('<Drawer />',function(){var onOpen=jest.fn();var onClose=jest.fn();var onDidOpen=jest.fn();var onDidClose=jest.fn();beforeEach(function(){jest.clearAllMocks();});it('should render',function(){var wrapper=shallow(React.createElement(Drawer,null));expect(wrapper).toMatchSnapshot();});it('should execute callback when drawer is opened',function(){var wrapper=mount(React.createElement(Drawer,{onOpen:onOpen}));wrapper.setProps({isOpen:true});expect(onOpen).toBeCalled();});it('should execute callback when drawer is closed',function(){var wrapper=mount(React.createElement(Drawer,{isOpen:true,onClose:onClose}));wrapper.setProps({isOpen:false});expect(onClose).toBeCalled();});it('should add custom classes',function(){var wrapper=mount(React.createElement(Drawer,{className:"custom-class-name",isOpen:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.hasClass('custom-class-name')).toEqual(true);});it('should execute callback when drawer open animation did end',function(){var wrapper=mount(React.createElement(Drawer,{className:"custom-class-name",isOpen:false,onOpen:onOpen,onDidOpen:onDidOpen}));expect(wrapper).toMatchSnapshot();wrapper.setProps({isOpen:true});expect(onOpen).toBeCalled();expect(onDidOpen).not.toBeCalled();wrapper.simulate('animationEnd');expect(onDidOpen).toBeCalled();});it('should execute callback when drawer close animation did end',function(){var wrapper=mount(React.createElement(Drawer,{className:"custom-class-name",isOpen:true,onClose:onClose,onDidClose:onDidClose}));expect(wrapper).toMatchSnapshot();wrapper.setProps({isOpen:false});expect(onClose).toBeCalled();expect(onDidClose).not.toBeCalled();wrapper.simulate('animationEnd');expect(onDidClose).toBeCalled();});});

package/components/Image/Image.js

@@ -37,4 +37,4 @@ observer.disconnect();};},[lazy,sources.preview]);/**
    * - `aspectRatio` {string} - The aspect ratio in the format `width / height` (e.g., `16 / 9`).
    * - `paddingHackRatio` {string} - The CSS padding-hack ratio as a percentage for older browsers
    * (e.g., `56.250%` for a 16:9 ratio).
-   */var _useMemo=useMemo(function(){var width;var height;if(ratio){var _ratio=_slicedToArray(ratio,2);width=_ratio[0];height=_ratio[1];}else{var _resolutions=resolutions[resolutions.length-1];width=_resolutions.width;height=_resolutions.height;}var divisor=gcd(width,height);return{aspectRatio:"".concat(width/divisor," / ").concat(height/divisor),paddingHackRatio:"".concat((height/width*100).toFixed(3),"%")};},[ratio,resolutions]),aspectRatio=_useMemo.aspectRatio,paddingHackRatio=_useMemo.paddingHackRatio;if(unwrapped){if(!(src&&!parentRendersPlaceholder))return null;return React.createElement(ImageInner,{ref:imgRef,src:sources.main,className:classNames(classNameImg),style:_extends({aspectRatio:aspectRatio},isInView&&sources.preview&&{backgroundImage:"url(".concat(sources.preview,")"),backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center'}),alt:alt,lazy:lazy,onLoad:handleOnLoad,onError:handleOnError});}var containerStyle=styles.container(backgroundColor,paddingHackRatio);return React.createElement("div",{className:classNames(containerStyle,className)},src&&!parentRendersPlaceholder&&React.createElement(ImageInner,{ref:imgRef,src:sources.main,className:classNames(classNameImg),style:_extends({aspectRatio:aspectRatio},isInView&&sources.preview&&{backgroundImage:"url(".concat(sources.preview,")"),backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center'}),alt:alt,lazy:lazy,onLoad:handleOnLoad,onError:handleOnError}));};var defaultResolutions=[{width:440,height:440}];Image.defaultProps={alt:null,backgroundColor:themeColors.placeholder,className:'',classNameImg:'',forcePlaceholder:false,highestResolutionLoaded:noop,onError:noop,onLoad:noop,ratio:null,resolutions:defaultResolutions,src:null,unwrapped:false,lazy:true};export default memo(Image);
+   */var _useMemo=useMemo(function(){var width;var height;if(ratio){var _ratio=_slicedToArray(ratio,2);width=_ratio[0];height=_ratio[1];}else{var _resolutions=resolutions[resolutions.length-1];width=_resolutions.width;height=_resolutions.height;}var divisor=gcd(width,height);return{aspectRatio:"".concat(width/divisor," / ").concat(height/divisor),paddingHackRatio:"".concat((height/width*100).toFixed(3),"%")};},[ratio,resolutions]),aspectRatio=_useMemo.aspectRatio,paddingHackRatio=_useMemo.paddingHackRatio;if(unwrapped){if(!(src&&!parentRendersPlaceholder))return null;return React.createElement(ImageInner,{ref:imgRef,src:sources.main,className:classNames(classNameImg),style:_extends({aspectRatio:aspectRatio},isInView&&sources.preview&&{backgroundImage:"url(".concat(sources.preview,")"),backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center'}),alt:alt,lazy:lazy,onLoad:handleOnLoad,onError:handleOnError});}var containerStyle=styles.container(backgroundColor,paddingHackRatio);return React.createElement("div",{className:classNames(containerStyle,className,'common__image__container')},src&&!parentRendersPlaceholder&&React.createElement(ImageInner,{ref:imgRef,src:sources.main,className:classNames(classNameImg),style:_extends({aspectRatio:aspectRatio},isInView&&sources.preview&&{backgroundImage:"url(".concat(sources.preview,")"),backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center'}),alt:alt,lazy:lazy,onLoad:handleOnLoad,onError:handleOnError}));};var defaultResolutions=[{width:440,height:440}];Image.defaultProps={alt:null,backgroundColor:themeColors.placeholder,className:'',classNameImg:'',forcePlaceholder:false,highestResolutionLoaded:noop,onError:noop,onLoad:noop,ratio:null,resolutions:defaultResolutions,src:null,unwrapped:false,lazy:true};export default memo(Image);

package/components/Image/ImageInner.js

@@ -3,4 +3,4 @@ import React,{forwardRef}from'react';import PropTypes from'prop-types';import cl
  * @param {Object} props The component props
  * @param {Function} ref The component reference
  * @returns {JSX.Element}
- */var ImageInner=forwardRef(function(_ref,ref){var src=_ref.src,className=_ref.className,alt=_ref.alt,lazy=_ref.lazy,onLoad=_ref.onLoad,onError=_ref.onError,style=_ref.style;return React.createElement("img",{ref:ref,loading:lazy?'lazy':'eager',src:src,className:classNames(className,styles.image,'common__image'),alt:alt,"aria-label":alt,role:"presentation","data-test-id":"image",onLoad:onLoad,onError:onError,style:style});});ImageInner.propTypes={alt:PropTypes.string,className:PropTypes.string,lazy:PropTypes.bool,onError:PropTypes.func,onLoad:PropTypes.func,src:PropTypes.string,style:PropTypes.shape()};ImageInner.defaultProps={src:null,alt:null,className:null,lazy:false,style:null,onError:noop,onLoad:noop};export default ImageInner;
+ */var ImageInner=forwardRef(function(_ref,ref){var src=_ref.src,className=_ref.className,alt=_ref.alt,lazy=_ref.lazy,onLoad=_ref.onLoad,onError=_ref.onError,style=_ref.style;return React.createElement("img",{ref:ref,loading:lazy?'lazy':'eager',src:src,className:classNames(className,styles.image,'common__image'),alt:alt,"aria-label":alt,"aria-hidden":!alt,"data-test-id":"image",onLoad:onLoad,onError:onError,style:style});});ImageInner.propTypes={alt:PropTypes.string,className:PropTypes.string,lazy:PropTypes.bool,onError:PropTypes.func,onLoad:PropTypes.func,src:PropTypes.string,style:PropTypes.shape()};ImageInner.defaultProps={src:null,alt:null,className:null,lazy:false,style:null,onError:noop,onLoad:noop};export default ImageInner;

package/components/Image/style.js

@@ -2,4 +2,4 @@ import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/con
  * @param {string} [background=themeColors.placeholder] The background color.
  * @param {string} [paddingTop='100%'] The padding top value.
  * @returns {string} The compiled class names.
- */var container=function container(){var background=arguments.length>0&&arguments[0]!==undefined?arguments[0]:themeColors.placeholder;var paddingTop=arguments.length>1&&arguments[1]!==undefined?arguments[1]:'100%';return css({background:background,position:'relative',zIndex:0,':before':{display:'block',content:'""',width:'100%',paddingTop:paddingTop}}).toString();};var image=css({position:'absolute',top:0,left:0,width:'100%',maxHeight:'100%',WebkitTouchCallout:'none'}).toString();export default{container:container,image:image};
+ */var container=function container(){var background=arguments.length>0&&arguments[0]!==undefined?arguments[0]:themeColors.placeholder;var paddingTop=arguments.length>1&&arguments[1]!==undefined?arguments[1]:'100%';return css({background:background,position:'relative',zIndex:0,':before':{display:'block',content:'""',width:'100%',paddingTop:paddingTop}}).toString();};var image=css({position:'absolute',top:0,left:0,width:'100%',maxHeight:'100%',WebkitTouchCallout:'none',fontSize:0}).toString();export default{container:container,image:image};

package/components/Link/index.js

@@ -6,10 +6,13 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    * Opens the link.
    * @param {Event} e An event object.
    */_defineProperty(_this2,"handleOpenLink",function(e){e.preventDefault();if(_this2.props.disabled){return;}var params={pathname:_this2.props.href,state:_extends({},_this2.props.state||{},{},_this2.props.target?{target:_this2.props.target}:{})};// setTimeout prevents double click while VoiceOver is active
-setTimeout(function(){if(_this2.props.replace){_this2.props.historyReplace(params);}else{_this2.props.historyPush(params);}},0);});return _this2;}_inherits(Link,_Component);return _createClass(Link,[{key:"render",value:/**
+setTimeout(function(){if(_this2.props.replace){_this2.props.historyReplace(params);}else{_this2.props.historyPush(params);}},0);});/**
+   * key listener for screen readers
+   * @param {Object} event The event object
+   */_defineProperty(_this2,"handleKeyDown",function(event){if(event.key==='Enter'||event.key===' '){_this2.handleOpenLink(event);}});return _this2;}_inherits(Link,_Component);return _createClass(Link,[{key:"render",value:/**
    * Renders the component.
-   * @returns {JSX}
+   * @returns {JSX.Element}
    */function render(){var _this$props=this.props,tag=_this$props.tag,className=_this$props.className,href=_this$props.href,children=_this$props.children,role=_this$props.role,ariaLabel=_this$props['aria-label'],ariaHidden=_this$props['aria-hidden'],tabIndex=_this$props.tabIndex;var Tag=tag;if(!hasWebBridge()&&tag==='a'){/**
        * Don't use link tags on apps. Sometimes links are really opened since the preventDefault
        * doesn't work as expected which results in white pages.
-       */Tag='span';}return React.createElement(Tag,{className:"".concat(styles," ").concat(className," common__link"),onClick:this.handleOpenLink,role:role,"data-test-id":"link: ".concat(href),"aria-label":ariaLabel,tabIndex:tabIndex,"aria-hidden":ariaHidden,href:href&&Tag==='a'?href:null},children);}}]);}(Component);_defineProperty(Link,"defaultProps",{'aria-hidden':false,'aria-label':null,className:'',disabled:false,replace:false,role:'link',tag:'div',tabIndex:null,target:null,state:{}});export var Disconnected=Link;export default connect(Link);
+       */Tag='span';}return React.createElement(Tag,{className:"".concat(styles," ").concat(className," common__link"),onClick:this.handleOpenLink,onKeyDown:this.handleKeyDown,role:role,"data-test-id":"link: ".concat(href),"aria-label":ariaLabel,tabIndex:tabIndex,"aria-hidden":ariaHidden,href:href&&Tag==='a'?href:null},children);}}]);}(Component);_defineProperty(Link,"defaultProps",{'aria-hidden':null,'aria-label':null,className:'',disabled:false,replace:false,role:'link',tag:'div',tabIndex:null,target:null,state:{}});export var Disconnected=Link;export default connect(Link);

package/components/Modal/index.js

@@ -1,5 +1,7 @@
-import React from'react';import PropTypes from'prop-types';import{ConnectedReactPortal}from'@shopgate/engage/components';import classNames from'classnames';import styles from"./style";/**
+var _excluded=["children","classes"];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;}import React,{forwardRef}from'react';import PropTypes from'prop-types';import{createPortal}from'react-dom';import{useTrackModalState}from'@shopgate/engage/a11y/hooks';import classNames from'classnames';import styles from"./style";/**
  * The Modal component.
  * @param {Object} props The component props.
+ * @param {Object} props.classes The component classes.
  * @returns {JSX.Element}
- */var Modal=function Modal(_ref){var children=_ref.children,classes=_ref.classes;return React.createElement(ConnectedReactPortal,{isOpened:true},React.createElement("div",{className:classNames(styles.container,classes===null||classes===void 0?void 0:classes.container,'common__modal')},React.createElement("div",{className:classNames(styles.layout,classes===null||classes===void 0?void 0:classes.layout)},React.createElement("div",{className:classNames(styles.content,classes===null||classes===void 0?void 0:classes.content)},children))));};Modal.defaultProps={children:null,classes:{container:'',layout:'',content:''}};export default Modal;
+ */var Modal=forwardRef(function(_ref,ref){var children=_ref.children,classes=_ref.classes,props=_objectWithoutProperties(_ref,_excluded);// Track modal visibility for accessibility purposes.
+useTrackModalState();return createPortal(React.createElement("div",_extends({className:classNames(styles.container,classes===null||classes===void 0?void 0:classes.container,'common__modal'),role:"alertdialog","aria-modal":true},props,{ref:ref}),React.createElement("div",{className:classNames(styles.layout,classes===null||classes===void 0?void 0:classes.layout)},React.createElement("div",{className:classNames(styles.content,classes===null||classes===void 0?void 0:classes.content)},children))),document.getElementById('portals'));});Modal.defaultProps={children:null,classes:{container:'',layout:'',content:''}};export default Modal;

package/components/ModalContainer/index.js

@@ -1,6 +1,7 @@
-import React,{useEffect,useRef}from'react';import PropTypes from'prop-types';import UIEvents from'@shopgate/pwa-core/emitters/ui';import connect from"./connector";export var MODAL_EVENTS={SHOW:'Modal.show',HIDE:'Modal.hide'};/**
+import React from'react';import PropTypes from'prop-types';import connect from"./connector";export var MODAL_EVENTS={SHOW:'Modal.show',HIDE:'Modal.hide'};/**
  * The ModalContainer is connected to the modal state
  * and renders the currently active modal.
  * @param {Object} props The component props.
- * @return {JSX|null}
- */var ModalContainer=function ModalContainer(_ref){var component=_ref.component,confirm=_ref.confirm,dismiss=_ref.dismiss,modal=_ref.modal;var ref=useRef(false);useEffect(function(){if(modal&&!ref.current){ref.current=true;UIEvents.emit(MODAL_EVENTS.SHOW);}if(!modal&&ref.current){ref.current=false;UIEvents.emit(MODAL_EVENTS.HIDE);}},[modal]);if(!modal){return null;}var componentProps={modal:modal,onConfirm:function onConfirm(){return confirm(modal.id);},onDismiss:function onDismiss(){return dismiss(modal.id);}};if(React.isValidElement(component)){return React.cloneElement(component,componentProps);}return React.createElement(component,componentProps);};ModalContainer.defaultProps={confirm:function confirm(){},dismiss:function dismiss(){},modal:null};export default connect(ModalContainer);
+ * @returns {JSX.Element}
+ */var ModalContainer=function ModalContainer(_ref){var component=_ref.component,confirm=_ref.confirm,dismiss=_ref.dismiss,modal=_ref.modal;if(!modal){return null;}var componentProps={modal:modal,// A11Y focus is handled by the modal container itself.
+onConfirm:function onConfirm(){return confirm(modal.id);},onDismiss:function onDismiss(){return dismiss(modal.id);}};if(React.isValidElement(component)){return React.cloneElement(component,componentProps);}return React.createElement(component,componentProps);};ModalContainer.defaultProps={confirm:function confirm(){},dismiss:function dismiss(){},modal:null};export default connect(ModalContainer);

package/components/Swiper/index.js

@@ -1,4 +1,4 @@
-var _excluded=["maxIndicators","indicators","controls","aria-hidden","disabled","autoPlay","interval","classNames","className","onSlideChange","additionalModules","children"];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);}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,{useMemo,useCallback}from'react';import PropTypes from'prop-types';import cls from'classnames';import{A11y,Autoplay,FreeMode,Navigation,Pagination,Zoom}from'swiper/modules';import'swiper/swiper.min.css';import'swiper/modules/a11y.min.css';import'swiper/modules/pagination.min.css';import'swiper/modules/navigation.min.css';import'swiper/modules/zoom.min.css';import SwiperItem from"./components/SwiperItem";import OriginalSwiper from"./components/OriginalSwiper";import{container,innerContainer,zoomFix,buttonNext,buttonPrev}from"./styles";/**
+var _excluded=["maxIndicators","indicators","controls","aria-hidden","disabled","autoPlay","interval","classNames","className","onSlideChange","additionalModules","children"];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);}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,{useMemo,useCallback,useEffect,useRef}from'react';import PropTypes from'prop-types';import cls from'classnames';import{A11y,Autoplay,FreeMode,Navigation,Pagination,Zoom}from'swiper/modules';import'swiper/swiper.min.css';import'swiper/modules/a11y.min.css';import'swiper/modules/pagination.min.css';import'swiper/modules/navigation.min.css';import'swiper/modules/zoom.min.css';import{useReduceMotion}from'@shopgate/engage/a11y/hooks';import SwiperItem from"./components/SwiperItem";import OriginalSwiper from"./components/OriginalSwiper";import{container,innerContainer,zoomFix,buttonNext,buttonPrev}from"./styles";/**
  * @typedef {import('swiper/react').SwiperProps} SwiperCmpProps
  */ /**
  * The basic Swiper component. It acts as a wrapper for the Swiper JS library component.
@@ -7,8 +7,8 @@ var _excluded=["maxIndicators","indicators","controls","aria-hidden","disabled",
  * Refer to the [Swiper documentation](https://swiperjs.com/react) for details on the available props.
  *
  * @param {SwiperCmpProps} props The component props.
- * @returns {React.Node}
- */var Swiper=function Swiper(_ref){var maxIndicators=_ref.maxIndicators,indicators=_ref.indicators,controls=_ref.controls,ariaHidden=_ref['aria-hidden'],disabled=_ref.disabled,autoPlay=_ref.autoPlay,interval=_ref.interval,classNames=_ref.classNames,className=_ref.className,onSlideChange=_ref.onSlideChange,additionalModules=_ref.additionalModules,children=_ref.children,swiperProps=_objectWithoutProperties(_ref,_excluded);var useFraction=maxIndicators&&maxIndicators<children.length;var paginationType=useFraction?'fraction':'bullets';var showPagination=indicators&&children.length>1;var hasControls=typeof controls==='boolean'&&controls===true;var navigation;if(hasControls){navigation={// Important to use dot notation (swiper internally use it as selector)
-nextEl:".swiper-button-next.".concat(buttonNext),prevEl:".swiper-button-prev.".concat(buttonPrev)};}if(_typeof(controls)==='object'){navigation=controls;}var handleSlideChange=useCallback(function(swiper){if(typeof onSlideChange==='function'){onSlideChange(swiper.realIndex,swiper);}},[onSlideChange]);/**
+ * @returns {JSX.Element}
+ */var Swiper=function Swiper(_ref){var maxIndicators=_ref.maxIndicators,indicators=_ref.indicators,controls=_ref.controls,ariaHidden=_ref['aria-hidden'],disabled=_ref.disabled,autoPlay=_ref.autoPlay,interval=_ref.interval,classNames=_ref.classNames,className=_ref.className,onSlideChange=_ref.onSlideChange,additionalModules=_ref.additionalModules,children=_ref.children,swiperProps=_objectWithoutProperties(_ref,_excluded);var useFraction=maxIndicators&&maxIndicators<children.length;var paginationType=useFraction?'fraction':'bullets';var showPagination=indicators&&children.length>1;var hasControls=typeof controls==='boolean'&&controls===true;var reduceMotion=useReduceMotion();var swiperRef=useRef(null);var navigation=useMemo(function(){var nav;if(hasControls){nav={// Important to use dot notation (swiper uses it as selector internally)
+nextEl:".swiper-button-next.".concat(buttonNext),prevEl:".swiper-button-prev.".concat(buttonPrev)};}if(_typeof(controls)==='object'){nav=controls;}return nav;},[controls,hasControls]);var handleSlideChange=useCallback(function(swiper){if(typeof onSlideChange==='function'){onSlideChange(swiper.realIndex,swiper);}},[onSlideChange]);/**
    * @type {SwiperCmpProps}
-   */var internalProps=useMemo(function(){return _extends({modules:[A11y,Autoplay,FreeMode,Navigation,Pagination,Zoom].concat(Array.isArray(additionalModules)?additionalModules:[]),className:cls(innerContainer,classNames.container,_defineProperty({},zoomFix,swiperProps===null||swiperProps===void 0?void 0:swiperProps.zoom)),autoplay:autoPlay?{delay:interval}:false,navigation:navigation},showPagination&&{pagination:{el:undefined,type:paginationType,bulletClass:classNames.bulletClass||'swiper-pagination-bullet',bulletActiveClass:classNames.bulletActiveClass||'swiper-pagination-bullet-active',dynamicBullets:true,clickable:true,enabled:indicators&&children.length>1}},{allowSlidePrev:!disabled,allowSlideNext:!disabled,onSlideChange:handleSlideChange});},[autoPlay,additionalModules,children.length,classNames.bulletActiveClass,classNames.bulletClass,classNames.container,disabled,indicators,interval,navigation,paginationType,showPagination,handleSlideChange,swiperProps]);return React.createElement("div",{className:cls(container,className),"aria-hidden":ariaHidden},React.createElement(OriginalSwiper,_extends({},internalProps,swiperProps),children,hasControls&&React.createElement(React.Fragment,null,React.createElement("div",{className:"swiper-button-next ".concat(buttonNext)}),React.createElement("div",{className:"swiper-button-prev ".concat(buttonPrev)}))));};Swiper.Item=SwiperItem;Swiper.defaultProps={'aria-hidden':false,additionalModules:null,autoPlay:false,className:null,classNames:{},controls:false,indicators:false,interval:3000,maxIndicators:null,disabled:false,onSlideChange:null};export default Swiper;
+   */var internalProps=useMemo(function(){return _extends({modules:[A11y,Autoplay,FreeMode,Navigation,Pagination,Zoom].concat(Array.isArray(additionalModules)?additionalModules:[]),className:cls(innerContainer,classNames.container,_defineProperty({},zoomFix,swiperProps===null||swiperProps===void 0?void 0:swiperProps.zoom)),autoplay:autoPlay?{delay:interval}:false,navigation:navigation},showPagination&&{pagination:{el:undefined,type:paginationType,bulletClass:classNames.bulletClass||'swiper-pagination-bullet',bulletActiveClass:classNames.bulletActiveClass||'swiper-pagination-bullet-active',dynamicBullets:true,clickable:true,enabled:indicators&&children.length>1}},{allowSlidePrev:!disabled,allowSlideNext:!disabled,onSlideChange:handleSlideChange});},[additionalModules,classNames.container,classNames.bulletClass,classNames.bulletActiveClass,swiperProps,autoPlay,interval,navigation,showPagination,paginationType,indicators,children.length,disabled,handleSlideChange]);useEffect(function(){var _swiperRef$current,_swiperRef$current$sw;if(!internalProps.autoplay&&!swiperProps.autoplay){return;}if((_swiperRef$current=swiperRef.current)===null||_swiperRef$current===void 0?void 0:(_swiperRef$current$sw=_swiperRef$current.swiper)===null||_swiperRef$current$sw===void 0?void 0:_swiperRef$current$sw.autoplay){if(reduceMotion){swiperRef.current.swiper.autoplay.stop();}else{swiperRef.current.swiper.autoplay.start();}}},[internalProps.autoplay,reduceMotion,swiperProps.autoplay]);return React.createElement("div",{className:cls(container,className,'common__swiper'),"aria-hidden":ariaHidden},React.createElement(OriginalSwiper,_extends({"aria-live":"off",a11y:{enabled:false}},internalProps,swiperProps,{ref:swiperRef}),children,hasControls&&React.createElement(React.Fragment,null,React.createElement("div",{className:"swiper-button-next ".concat(buttonNext)}),React.createElement("div",{className:"swiper-button-prev ".concat(buttonPrev)}))));};Swiper.Item=SwiperItem;Swiper.defaultProps={'aria-hidden':false,additionalModules:null,autoPlay:false,className:null,classNames:{},controls:false,indicators:false,interval:3000,maxIndicators:null,disabled:false,onSlideChange:null};export default Swiper;

package/helpers/data/index.js

@@ -16,6 +16,10 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
  * @param {string} url The URL to check.
  * @return {boolean}
  */export var isExternal=function isExternal(url){return url.includes('http://')||url.includes('https://')||url.includes('//');};/**
+ * Checks whether the url is an HTTPS url.
+ * @param {string} url The url to open.
+ * @return {boolean}
+ */export var isHTTPS=function isHTTPS(){var url=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'';return url.startsWith('https://');};/**
  * Returns the actual url to the image, by adding url parameters with the dimensions for img-cdn
  * @param {string} src Source to the image.
  * @param {Object} dimension Dimension of the requested image.

package/helpers/environment/index.js

@@ -1,2 +1,2 @@
-// Environment variables.
-var ENV_KEY_DEVELOPMENT='development';var ENV_KEY_TEST='test';var ENV_KEY_STAGING='staging';var ENV_KEY_PRODUCTION='production';var env=process.env.NODE_ENV||ENV_KEY_DEVELOPMENT;module.exports={env:env,isDev:env===ENV_KEY_DEVELOPMENT||env===ENV_KEY_TEST,isProd:env===ENV_KEY_PRODUCTION,isStaging:env===ENV_KEY_STAGING,isRemote:!!process.env.REMOTE};
+var _ref,_window,_window$navigator;// Environment variables.
+var ENV_KEY_DEVELOPMENT='development';var ENV_KEY_TEST='test';var ENV_KEY_STAGING='staging';var ENV_KEY_PRODUCTION='production';var env=process.env.NODE_ENV||ENV_KEY_DEVELOPMENT;module.exports={env:env,isDev:env===ENV_KEY_DEVELOPMENT||env===ENV_KEY_TEST,isProd:env===ENV_KEY_PRODUCTION,isStaging:env===ENV_KEY_STAGING,isRemote:!!process.env.REMOTE,isWindows:((_ref=(_window=window)===null||_window===void 0?void 0:(_window$navigator=_window.navigator)===null||_window$navigator===void 0?void 0:_window$navigator.userAgent)!==null&&_ref!==void 0?_ref:'').toLowerCase().includes('win')};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.26.0-beta.1",
+  "version": "7.26.0-beta.2",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/browser": "6.0.1",
-    "@shopgate/pwa-benchmark": "7.26.0-beta.1",
+    "@shopgate/pwa-benchmark": "7.26.0-beta.2",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -43,7 +43,7 @@
     "url-search-params": "^0.10.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.26.0-beta.1",
+    "@shopgate/pwa-core": "7.26.0-beta.2",
     "@types/react-portal": "^3.0.9",
     "lodash": "^4.17.4",
     "prop-types": "~15.8.1",