@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.9

package/components/Typography/Typography.js

@@ -1,11 +1,193 @@
-var _excluded=["align","className","color","component","display","gutterBottom","noWrap","paragraph","variant","variantMapping","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 _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 _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*as React from'react';import PropTypes from'prop-types';import{withStyles}from'@shopgate/engage/styles';import classNames from'classnames';/**
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@shopgate/engage/styles';
+import classNames from 'classnames';
+
+/**
  * Capitalizes the first letter of a string.
  * @param {string} string The string to capitalize.
  * @returns {string} The string with the first letter capitalized.
- */var capitalize=function capitalize(string){return string.charAt(0).toUpperCase()+string.slice(1);};/**
+ */
+const capitalize = string => string.charAt(0).toUpperCase() + string.slice(1);
+
+/**
  * @typedef {import('../../styles').Theme} Theme
- */ /**
+ */
+
+/**
  * Creates the styles for the Typography component.
  * @param {Theme} theme The theme object.
  * @returns {Object} The styles object.
- */export var styles=function styles(theme){return{/* Styles applied to the root element. */root:{margin:0},/* Styles applied to the root element if `variant="body2"`. */body2:theme.typography.body2,/* Styles applied to the root element if `variant="body1"`. */body1:theme.typography.body1,/* Styles applied to the root element if `variant="caption"`. */caption:theme.typography.caption,/* Styles applied to the root element if `variant="button"`. */button:theme.typography.button,/* Styles applied to the root element if `variant="h1"`. */h1:theme.typography.h1,/* Styles applied to the root element if `variant="h2"`. */h2:theme.typography.h2,/* Styles applied to the root element if `variant="h3"`. */h3:theme.typography.h3,/* Styles applied to the root element if `variant="h4"`. */h4:theme.typography.h4,/* Styles applied to the root element if `variant="h5"`. */h5:theme.typography.h5,/* Styles applied to the root element if `variant="h6"`. */h6:theme.typography.h6,/* Styles applied to the root element if `variant="subtitle1"`. */subtitle1:theme.typography.subtitle1,/* Styles applied to the root element if `variant="subtitle2"`. */subtitle2:theme.typography.subtitle2,/* Styles applied to the root element if `variant="overline"`. */overline:theme.typography.overline,/* Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers. */srOnly:{position:'absolute',height:1,width:1,overflow:'hidden'},/* Styles applied to the root element if `align="left"`. */alignLeft:{textAlign:'left'},/* Styles applied to the root element if `align="center"`. */alignCenter:{textAlign:'center'},/* Styles applied to the root element if `align="right"`. */alignRight:{textAlign:'right'},/* Styles applied to the root element if `align="justify"`. */alignJustify:{textAlign:'justify'},/* Styles applied to the root element if `nowrap={true}`. */noWrap:{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'},/* Styles applied to the root element if `gutterBottom={true}`. */gutterBottom:{marginBottom:'0.35em'},/* Styles applied to the root element if `paragraph={true}`. */paragraph:{marginBottom:16},/* Styles applied to the root element if `color="inherit"`. */colorInherit:{color:'inherit'},/* Styles applied to the root element if `color="primary"`. */colorPrimary:{color:theme.palette.primary.main},/* Styles applied to the root element if `color="secondary"`. */colorSecondary:{color:theme.palette.secondary.main},/* Styles applied to the root element if `color="textPrimary"`. */colorTextPrimary:{color:theme.palette.text.primary},/* Styles applied to the root element if `color="textSecondary"`. */colorTextSecondary:{color:theme.palette.text.secondary},colorTextTertiary:{color:theme.palette.text.tertiary},/* Styles applied to the root element if `color="error"`. */colorError:{color:theme.palette.error.main},/* Styles applied to the root element if `color="warning"` */colorWarning:{color:theme.palette.warning.main},/* Styles applied to the root element if `color="success"` */colorSuccess:{color:theme.palette.success.main},/* Styles applied to the root element if `display="inline"`. */displayInline:{display:'inline'},/* Styles applied to the root element if `display="block"`. */displayBlock:{display:'block'}};};var defaultVariantMapping={h1:'h1',h2:'h2',h3:'h3',h4:'h4',h5:'h5',h6:'h6',subtitle1:'h6',subtitle2:'h6',body1:'p',body2:'p'};var Typography=React.forwardRef(function(props,ref){var _props$align=props.align,align=_props$align===void 0?'inherit':_props$align,className=props.className,_props$color=props.color,color=_props$color===void 0?'initial':_props$color,component=props.component,_props$display=props.display,display=_props$display===void 0?'initial':_props$display,_props$gutterBottom=props.gutterBottom,gutterBottom=_props$gutterBottom===void 0?false:_props$gutterBottom,_props$noWrap=props.noWrap,noWrap=_props$noWrap===void 0?false:_props$noWrap,_props$paragraph=props.paragraph,paragraph=_props$paragraph===void 0?false:_props$paragraph,_props$variant=props.variant,variant=_props$variant===void 0?'body1':_props$variant,_props$variantMapping=props.variantMapping,variantMapping=_props$variantMapping===void 0?defaultVariantMapping:_props$variantMapping,classes=props.classes,other=_objectWithoutProperties(props,_excluded);var Component=component||(paragraph?'p':variantMapping[variant]||defaultVariantMapping[variant])||'span';return React.createElement(Component,_extends({className:classNames(classes.root,'engage__typography',_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},classes[variant],variant!=='inherit'),"engage__typography_".concat(variant),variant!=='inherit'),classes["color".concat(capitalize(color))],color!=='initial'),classes.noWrap,noWrap),classes.gutterBottom,gutterBottom),'engage__typography__gutter-bottom',gutterBottom),classes.paragraph,paragraph),"engage__typography__paragraph",paragraph),classes["align".concat(capitalize(align))],align!=='inherit'),classes["display".concat(capitalize(display))],display!=='initial'),className),ref:ref},other));});Typography.defaultProps={align:'inherit',children:null,className:undefined,color:'initial',component:null,display:'initial',gutterBottom:false,noWrap:false,paragraph:false,variant:'body1',variantMapping:defaultVariantMapping};export default withStyles(Typography,styles);
+ */
+export const styles = theme => ({
+  /* Styles applied to the root element. */
+  root: {
+    margin: 0
+  },
+  /* Styles applied to the root element if `variant="body2"`. */
+  body2: theme.typography.body2,
+  /* Styles applied to the root element if `variant="body1"`. */
+  body1: theme.typography.body1,
+  /* Styles applied to the root element if `variant="caption"`. */
+  caption: theme.typography.caption,
+  /* Styles applied to the root element if `variant="button"`. */
+  button: theme.typography.button,
+  /* Styles applied to the root element if `variant="h1"`. */
+  h1: theme.typography.h1,
+  /* Styles applied to the root element if `variant="h2"`. */
+  h2: theme.typography.h2,
+  /* Styles applied to the root element if `variant="h3"`. */
+  h3: theme.typography.h3,
+  /* Styles applied to the root element if `variant="h4"`. */
+  h4: theme.typography.h4,
+  /* Styles applied to the root element if `variant="h5"`. */
+  h5: theme.typography.h5,
+  /* Styles applied to the root element if `variant="h6"`. */
+  h6: theme.typography.h6,
+  /* Styles applied to the root element if `variant="subtitle1"`. */
+  subtitle1: theme.typography.subtitle1,
+  /* Styles applied to the root element if `variant="subtitle2"`. */
+  subtitle2: theme.typography.subtitle2,
+  /* Styles applied to the root element if `variant="overline"`. */
+  overline: theme.typography.overline,
+  /* Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers. */
+  srOnly: {
+    position: 'absolute',
+    height: 1,
+    width: 1,
+    overflow: 'hidden'
+  },
+  /* Styles applied to the root element if `align="left"`. */
+  alignLeft: {
+    textAlign: 'left'
+  },
+  /* Styles applied to the root element if `align="center"`. */
+  alignCenter: {
+    textAlign: 'center'
+  },
+  /* Styles applied to the root element if `align="right"`. */
+  alignRight: {
+    textAlign: 'right'
+  },
+  /* Styles applied to the root element if `align="justify"`. */
+  alignJustify: {
+    textAlign: 'justify'
+  },
+  /* Styles applied to the root element if `nowrap={true}`. */
+  noWrap: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  /* Styles applied to the root element if `gutterBottom={true}`. */
+  gutterBottom: {
+    marginBottom: '0.35em'
+  },
+  /* Styles applied to the root element if `paragraph={true}`. */
+  paragraph: {
+    marginBottom: 16
+  },
+  /* Styles applied to the root element if `color="inherit"`. */
+  colorInherit: {
+    color: 'inherit'
+  },
+  /* Styles applied to the root element if `color="primary"`. */
+  colorPrimary: {
+    color: theme.palette.primary.main
+  },
+  /* Styles applied to the root element if `color="secondary"`. */
+  colorSecondary: {
+    color: theme.palette.secondary.main
+  },
+  /* Styles applied to the root element if `color="textPrimary"`. */
+  colorTextPrimary: {
+    color: theme.palette.text.primary
+  },
+  /* Styles applied to the root element if `color="textSecondary"`. */
+  colorTextSecondary: {
+    color: theme.palette.text.secondary
+  },
+  colorTextTertiary: {
+    color: theme.palette.text.tertiary
+  },
+  /* Styles applied to the root element if `color="error"`. */
+  colorError: {
+    color: theme.palette.error.main
+  },
+  /* Styles applied to the root element if `color="warning"` */
+  colorWarning: {
+    color: theme.palette.warning.main
+  },
+  /* Styles applied to the root element if `color="success"` */
+  colorSuccess: {
+    color: theme.palette.success.main
+  },
+  /* Styles applied to the root element if `display="inline"`. */
+  displayInline: {
+    display: 'inline'
+  },
+  /* Styles applied to the root element if `display="block"`. */
+  displayBlock: {
+    display: 'block'
+  }
+});
+const defaultVariantMapping = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  subtitle1: 'h6',
+  subtitle2: 'h6',
+  body1: 'p',
+  body2: 'p'
+};
+const Typography = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    align = 'inherit',
+    className,
+    color = 'initial',
+    component,
+    display = 'initial',
+    gutterBottom = false,
+    noWrap = false,
+    paragraph = false,
+    variant = 'body1',
+    variantMapping = defaultVariantMapping,
+    classes,
+    ...other
+  } = props;
+  const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classNames(classes.root, 'engage__typography', {
+      [classes[variant]]: variant !== 'inherit',
+      [`engage__typography_${variant}`]: variant !== 'inherit',
+      [classes[`color${capitalize(color)}`]]: color !== 'initial',
+      [classes.noWrap]: noWrap,
+      [classes.gutterBottom]: gutterBottom,
+      'engage__typography__gutter-bottom': gutterBottom,
+      [classes.paragraph]: paragraph,
+      // eslint-disable-next-line camelcase
+      engage__typography__paragraph: paragraph,
+      [classes[`align${capitalize(align)}`]]: align !== 'inherit',
+      [classes[`display${capitalize(display)}`]]: display !== 'initial'
+    }, className),
+    ref: ref
+  }, other));
+});
+Typography.defaultProps = {
+  align: 'inherit',
+  children: null,
+  className: undefined,
+  color: 'initial',
+  component: null,
+  display: 'initial',
+  gutterBottom: false,
+  noWrap: false,
+  paragraph: false,
+  variant: 'body1',
+  variantMapping: defaultVariantMapping
+};
+export default withStyles(Typography, styles);

package/components/Typography/index.js

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

package/components/VideoPlayer/index.js

@@ -1,17 +1,107 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import ReactPlayer from'react-player';import{UIEvents}from'@shopgate/pwa-core';import{UI_VISIBILITY_CHANGE}from'@shopgate/pwa-common/constants/ui';/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { PureComponent } from 'react';
+import ReactPlayer from 'react-player';
+import { UIEvents } from '@shopgate/pwa-core';
+import { UI_VISIBILITY_CHANGE } from '@shopgate/pwa-common/constants/ui';
+
+/**
  * Video player component
  * @param {Object} props props
  * @returns {JSX}
- */var VideoPlayer=/*#__PURE__*/function(_PureComponent){function VideoPlayer(){var _this2;_classCallCheck(this,VideoPlayer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,VideoPlayer,[].concat(args));_defineProperty(_this2,"state",{ready:false,playing:_this2.props.playing,userPaused:false/**
+ */
+class VideoPlayer extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      ready: false,
+      playing: this.props.playing,
+      userPaused: false
+    };
+    /** @returns {boolean} */
+    this.getPlayingState = () => this.state.ready && !this.state.userPaused && this.state.playing;
+    /** @returns {void} */
+    this.handleReady = () => {
+      this.setState({
+        ready: true
+      });
+    };
+    /**
+     * Not allowed autoplay error (User gesture permission)
+     * @param {Object} error error
+     */
+    this.handleError = error => {
+      if (error && error.name === 'NotAllowedError') {
+        this.setState({
+          playing: false
+        });
+      }
+    };
+    /** @returns {undefined} */
+    this.handlePause = () => {
+      // Check if was not paused programmatically
+      if (this.state.playing) {
+        this.setState({
+          userPaused: true,
+          playing: false
+        });
+      }
+    };
+    /** @returns {undefined} */
+    this.handlePlay = () => {
+      if (!this.state.playing) {
+        this.setState({
+          userPaused: false,
+          playing: true
+        });
+      }
+    };
+    /** @returns {undefined} */
+    this.handleVisibilityChange = () => {
+      this.setState({
+        playing: false
+      });
+    };
+  }
+  /**
    * @inheritDoc
-   */});/** @returns {boolean} */_defineProperty(_this2,"getPlayingState",function(){return _this2.state.ready&&!_this2.state.userPaused&&_this2.state.playing;});/** @returns {void} */_defineProperty(_this2,"handleReady",function(){_this2.setState({ready:true});});/**
-   * Not allowed autoplay error (User gesture permission)
-   * @param {Object} error error
-   */_defineProperty(_this2,"handleError",function(error){if(error&&error.name==='NotAllowedError'){_this2.setState({playing:false});}});/** @returns {undefined} */_defineProperty(_this2,"handlePause",function(){// Check if was not paused programmatically
-if(_this2.state.playing){_this2.setState({userPaused:true,playing:false});}});/** @returns {undefined} */_defineProperty(_this2,"handlePlay",function(){if(!_this2.state.playing){_this2.setState({userPaused:false,playing:true});}});/** @returns {undefined} */_defineProperty(_this2,"handleVisibilityChange",function(){_this2.setState({playing:false});});return _this2;}_inherits(VideoPlayer,_PureComponent);return _createClass(VideoPlayer,[{key:"componentDidMount",value:function componentDidMount(){UIEvents.addListener(UI_VISIBILITY_CHANGE,this.handleVisibilityChange);}/**
+   */
+  componentDidMount() {
+    UIEvents.addListener(UI_VISIBILITY_CHANGE, this.handleVisibilityChange);
+  }
+
+  /**
    * @inheritDoc
-   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){var nextState={playing:nextProps.playing};if(this.props.url!==nextProps.url){nextState.ready=false;}this.setState(nextState);}/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const nextState = {
+      playing: nextProps.playing
+    };
+    if (this.props.url !== nextProps.url) {
+      nextState.ready = false;
+    }
+    this.setState(nextState);
+  }
+
+  /**
    * @inheritDoc
-   */},{key:"componentWillUnmount",value:function componentWillUnmount(){UIEvents.removeListener(UI_VISIBILITY_CHANGE,this.handleVisibilityChange);}},{key:"render",value:/**
+   */
+  componentWillUnmount() {
+    UIEvents.removeListener(UI_VISIBILITY_CHANGE, this.handleVisibilityChange);
+  }
+  /**
    * @returns {JSX}
-   */function render(){return React.createElement(ReactPlayer,_extends({playsinline:true},this.props,{playing:this.getPlayingState(),onReady:this.handleReady,onPause:this.handlePause,onPlay:this.handlePlay,onError:this.handleError}));}}]);}(PureComponent);_defineProperty(VideoPlayer,"defaultProps",ReactPlayer.defaultProps);export default VideoPlayer;
+   */
+  render() {
+    return /*#__PURE__*/React.createElement(ReactPlayer, _extends({
+      playsinline: true
+    }, this.props, {
+      playing: this.getPlayingState(),
+      onReady: this.handleReady,
+      onPause: this.handlePause,
+      onPlay: this.handlePlay,
+      onError: this.handleError
+    }));
+  }
+}
+VideoPlayer.defaultProps = ReactPlayer.defaultProps;
+export default VideoPlayer;

package/components/View/components/Above/index.js

@@ -1,3 +1,25 @@
-import React from'react';import{ViewContext}from"../../context";/**
+import React from 'react';
+import { ViewContext } from "../../context";
+
+/**
  * @returns {JSX}
- */function ViewAbove(){return React.createElement(ViewContext.Consumer,null,function(_ref){var top=_ref.top;if(!top){return null;}var styles={flexShrink:0,height:"calc(".concat(top,"px + var(--safe-area-inset-top))")};return React.createElement("div",{"aria-hidden":true,style:styles,className:"engage__view__above"});});}export default ViewAbove;
+ */
+function ViewAbove() {
+  return /*#__PURE__*/React.createElement(ViewContext.Consumer, null, ({
+    top
+  }) => {
+    if (!top) {
+      return null;
+    }
+    const styles = {
+      flexShrink: 0,
+      height: `calc(${top}px + var(--safe-area-inset-top))`
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": true,
+      style: styles,
+      className: "engage__view__above"
+    });
+  });
+}
+export default ViewAbove;

package/components/View/components/Below/index.js

@@ -1,3 +1,25 @@
-import React from'react';import{ViewContext}from"../../context";/**
+import React from 'react';
+import { ViewContext } from "../../context";
+
+/**
  * @returns {JSX}
- */function ViewBelow(){return React.createElement(ViewContext.Consumer,null,function(_ref){var bottom=_ref.bottom;if(!bottom){return null;}var styles={flexShrink:0,height:"calc(".concat(bottom,"px + var(--safe-area-inset-bottom))")};return React.createElement("div",{"aria-hidden":true,style:styles,className:"engage__view__below"});});}export default ViewBelow;
+ */
+function ViewBelow() {
+  return /*#__PURE__*/React.createElement(ViewContext.Consumer, null, ({
+    bottom
+  }) => {
+    if (!bottom) {
+      return null;
+    }
+    const styles = {
+      flexShrink: 0,
+      height: `calc(${bottom}px + var(--safe-area-inset-bottom))`
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": true,
+      style: styles,
+      className: "engage__view__below"
+    });
+  });
+}
+export default ViewBelow;

package/components/View/components/Content/components/ParallaxProvider/index.js

@@ -1,19 +1,70 @@
-import React,{useEffect,useContext,useMemo}from'react';import PropTypes from'prop-types';import{ParallaxProvider as ParallaxProviderCmp,useParallaxController}from'react-scroll-parallax';import{useElementSize}from'@shopgate/engage/core/hooks';import{useScrollContainer}from'@shopgate/engage/core/helpers';import{useReduceMotion}from'@shopgate/engage/a11y/hooks';import{ViewContext}from'@shopgate/engage/components/View';/**
+import React, { useEffect, useContext, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { ParallaxProvider as ParallaxProviderCmp, useParallaxController } from 'react-scroll-parallax';
+import { useElementSize } from '@shopgate/engage/core/hooks';
+import { useScrollContainer } from '@shopgate/engage/core/helpers';
+import { useReduceMotion } from '@shopgate/engage/a11y/hooks';
+import { ViewContext } from '@shopgate/engage/components/View';
+
+/**
  * The ParallaxProviderInner component is used to update the parallax controller when the
  * scroll height changes.
  * @param {Object} props The component props.
  * @param {number} props.scrollHeight The height of the scroll container.
  * @param {Object} props.children The component children.
  * @returns {JSX.Element}
- */var ParallaxProviderInner=function ParallaxProviderInner(_ref){var scrollHeight=_ref.scrollHeight,children=_ref.children;var _useParallaxControlle=useParallaxController(),update=_useParallaxControlle.update;useEffect(function(){update();},[scrollHeight,update]);return children;};ParallaxProviderInner.propTypes={children:PropTypes.node.isRequired};/**
+ */
+const ParallaxProviderInner = ({
+  scrollHeight,
+  children
+}) => {
+  const {
+    update
+  } = useParallaxController();
+  useEffect(() => {
+    update();
+  }, [scrollHeight, update]);
+  return children;
+};
+ParallaxProviderInner.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+/**
  * The ParallaxProvider component wraps the parallax context from the react-scroll-parallax package
  * around its children.
  * @param {Object} props The component props.
  * @param {boolean} props.viewVisible Whether the view is currently visible.
  * @param {Object} props.children The component children.
  * @returns {JSX.Element}
- */var ParallaxProvider=function ParallaxProvider(_ref2){var viewVisible=_ref2.viewVisible,children=_ref2.children;var reduceMotion=useReduceMotion();// Determine if a scroll container is used. If false PWA is in curbside website mode and window
-// is used as scroll container.
-var scrollContainerUsed=useScrollContainer();var _useContext=useContext(ViewContext),viewRef=_useContext.contentRef;// Mocked ref for the useElementSize hook to track the size of the scroll container.
-var mockedElementSizeRef=useMemo(function(){var _viewRef$current;return{current:scrollContainerUsed?viewRef===null||viewRef===void 0?void 0:(_viewRef$current=viewRef.current)===null||_viewRef$current===void 0?void 0:_viewRef$current.querySelector('.engage__view__content__scrollable-content'):null};},[scrollContainerUsed,viewRef]);var _useElementSize=useElementSize(mockedElementSizeRef),height=_useElementSize.height;return React.createElement(ParallaxProviderCmp// For now Parallax is disabled when no scroll container is used.
-,{isDisabled:!scrollContainerUsed||reduceMotion||!viewVisible,scrollContainer:scrollContainerUsed?viewRef.current:null},React.createElement(ParallaxProviderInner,{scrollHeight:height},children));};export default ParallaxProvider;
+ */
+const ParallaxProvider = ({
+  viewVisible,
+  children
+}) => {
+  const reduceMotion = useReduceMotion();
+
+  // Determine if a scroll container is used. If false PWA is in curbside website mode and window
+  // is used as scroll container.
+  const scrollContainerUsed = useScrollContainer();
+  const {
+    contentRef: viewRef
+  } = useContext(ViewContext);
+
+  // Mocked ref for the useElementSize hook to track the size of the scroll container.
+  const mockedElementSizeRef = useMemo(() => ({
+    current: scrollContainerUsed ? viewRef?.current?.querySelector('.engage__view__content__scrollable-content') : null
+  }), [scrollContainerUsed, viewRef]);
+  const {
+    height
+  } = useElementSize(mockedElementSizeRef);
+  return /*#__PURE__*/React.createElement(ParallaxProviderCmp
+  // For now Parallax is disabled when no scroll container is used.
+  , {
+    isDisabled: !scrollContainerUsed || reduceMotion || !viewVisible,
+    scrollContainer: scrollContainerUsed ? viewRef.current : null
+  }, /*#__PURE__*/React.createElement(ParallaxProviderInner, {
+    scrollHeight: height
+  }, children));
+};
+export default ParallaxProvider;