@shopgate/pwa-common 7.27.2-beta.4 → 7.27.2-beta.7

package/components/Backdrop/index.js

@@ -16,7 +16,7 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    */},{key:"componentWillUnmount",value:function componentWillUnmount(){var lockBodyScroll=this.props.lockBodyScroll;if(lockBodyScroll){toggleBodyScroll(false,this.bodyScrollRef);}}/**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var opacity=this.props.opacity/100;var transition={base:{background:this.props.color,opacity:0,transition:"opacity ".concat(this.props.duration,"ms ease-out"),zIndex:this.props.level},appear:{opacity:opacity},enter:{opacity:opacity},leave:{opacity:0}};var className="".concat(style," ").concat(this.props.className," common__backdrop");return React.createElement(Transition,{childrenStyles:transition},this.props.isVisible?React.createElement("div",{"data-test-id":"Backdrop","aria-hidden":true,className:className,onClick:this.props.onClick}):null);}}]);}(Component);/**
+   */},{key:"render",value:function render(){var opacity=this.props.opacity/100;var transition={base:{background:this.props.color,opacity:0,transition:"opacity ".concat(this.props.duration,"ms ease-out"),zIndex:this.props.level,pointerEvents:'auto'},appear:{opacity:opacity,pointerEvents:'auto'},enter:{opacity:opacity,pointerEvents:'auto'},leave:{opacity:0,pointerEvents:'none'}};var className="".concat(style," ").concat(this.props.className," common__backdrop");return React.createElement(Transition,{childrenStyles:transition},this.props.isVisible?React.createElement("div",{"data-test-id":"Backdrop",key:"backdrop","aria-hidden":true,className:className,onClick:this.props.onClick}):null);}}]);}(Component);/**
    * The component prop types.
    * @type {Object}
    */ /**

package/components/Icon/index.js

@@ -5,5 +5,5 @@ import React from'react';import PropTypes from'prop-types';import styles from"./
  * @param {string} [props.className] Additional CSS styles for this component
  * @param {string} [props.viewBox] The viewBox attribute passed to the SVG
  * @param {number} [props.size=24] The icon size
- * @returns {JSX}
+ * @returns {JSX.Element}
  */var Icon=function Icon(props){return React.createElement("svg",{className:"".concat(styles," ").concat(props.className," common__icon"),viewBox:props.viewBox,xmlns:"http://www.w3.org/2000/svg",dangerouslySetInnerHTML:{__html:props.content},style:{fontSize:props.size,fill:props.color}});};Icon.defaultProps={className:'',color:null,viewBox:'0 0 24 24',size:'inherit'};export default Icon;

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,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";/**
+var _excluded=["maxIndicators","indicators","controls","aria-hidden","disabled","autoPlay","interval","classNames","className","onSlideChange","additionalModules","children","paginationType"];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.
@@ -8,7 +8,7 @@ var _excluded=["maxIndicators","indicators","controls","aria-hidden","disabled",
  *
  * @param {SwiperCmpProps} props The component props.
  * @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)
+ */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,paginationTypeProp=_ref.paginationType,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});},[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;
+   */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:paginationTypeProp||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,paginationTypeProp,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,paginationType:null};export default Swiper;

package/components/Swiper/styles.js

@@ -1,7 +1,7 @@
 import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';export var container=css({position:'relative',maxHeight:'100%'// This needs to be 100vw to compensate a chrome 80 bug - see related ticket / pr. (PWA-2509)
 // commented out for now since it causes issues in the responsive layout
 // width: '100vw',
-}).toString();export var innerContainer=css({overflow:'hidden','--swiper-navigation-color':themeColors.gray,' .swiper-wrapper':{alignItems:'stretch'},' .swiper-slide':{height:'auto'},' .swiper-pagination':{' .swiper-pagination-bullet':{background:themeColors.gray,opacity:'.5',margin:'0 4px',transition:'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)'},' .swiper-pagination-bullet-active.swiper-pagination-bullet-active-main':{opacity:1}}}).toString();/**
+}).toString();export var innerContainer=css({overflow:'hidden','--swiper-navigation-color':themeColors.gray,' .swiper-wrapper':{alignItems:'stretch'},' .swiper-slide':{height:'auto'},' .swiper-pagination':{' .swiper-pagination-bullet':{background:themeColors.gray,opacity:'.5',margin:'0 4px',transition:'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)',border:"1px solid ".concat(themeColors.dark)},' .swiper-pagination-bullet-active.swiper-pagination-bullet-active-main':{opacity:1}},' .swiper-pagination-fraction':{top:'var(--swiper-pagination-fraction-top-offset, 4px)',left:'auto',right:0,bottom:'auto',fontSize:12,background:themeColors.background,borderRadius:'50px',width:'fit-content',padding:'4px 8px',margin:'4px 16px',transition:'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)'},' .swiper-pagination-progressbar':{background:themeColors.shade7,' .swiper-pagination-progressbar-fill':{background:themeColors.dark}}}).toString();/**
  * Prevents a visible shrink animation of swiped out slides which where in a zoomed state before.
  */export var zoomFix=css({' .swiper-slide':{overflow:'hidden'}}).toString();export var wrapper=css({flexShrink:0});export var buttonNext=css({backgroundImage:"url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23808080'%2F%3E%3C%2Fsvg%3E\") !important",// Hide original SwiperJS chevron
 ':after':{color:'transparent'}}).toString();export var buttonPrev=css({backgroundImage:"url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23808080'%2F%3E%3C%2Fsvg%3E\") !important",// Hide original SwiperJS chevron

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.27.2-beta.4",
+  "version": "7.27.2-beta.7",
   "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.27.2-beta.4",
+    "@shopgate/pwa-benchmark": "7.27.2-beta.7",
     "@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.27.2-beta.4",
+    "@shopgate/pwa-core": "7.27.2-beta.7",
     "@types/react-portal": "^3.0.9",
     "lodash": "^4.17.4",
     "prop-types": "~15.8.1",