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

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

@@ -1,30 +1,204 @@
-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 _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 Helmet from'react-helmet';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import appConfig from'@shopgate/pwa-common/helpers/config';import event from'@shopgate/pwa-core/classes/Event';import{router}from'@virtuous/conductor';import{RouteContext}from'@shopgate/pwa-common/context';import{EVENT_KEYBOARD_WILL_CHANGE}from'@shopgate/pwa-core/constants/AppEvents';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{VIEW_CONTENT}from'@shopgate/pwa-common/constants/Portals';import{useScrollContainer,isIOs}from'@shopgate/engage/core/helpers';import{ConditionalWrapper}from"../../../ConditionalWrapper";import Above from"../Above";import Below from"../Below";import ParallaxProvider from"./components/ParallaxProvider";import{container,containerInner}from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.string.replace.js";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import ResponsiveContainer from '@shopgate/engage/components/ResponsiveContainer';
+import appConfig from '@shopgate/pwa-common/helpers/config';
+import event from '@shopgate/pwa-core/classes/Event';
+import { router } from '@virtuous/conductor';
+import { RouteContext } from '@shopgate/pwa-common/context';
+import { EVENT_KEYBOARD_WILL_CHANGE } from '@shopgate/pwa-core/constants/AppEvents';
+import SurroundPortals from '@shopgate/pwa-common/components/SurroundPortals';
+import { VIEW_CONTENT } from '@shopgate/pwa-common/constants/Portals';
+import { useScrollContainer, isIOs } from '@shopgate/engage/core/helpers';
+import { ConditionalWrapper } from "../../../ConditionalWrapper";
+import Above from "../Above";
+import Below from "../Below";
+import ParallaxProvider from "./components/ParallaxProvider";
+import { container, containerInner } from "./style";
+
+/**
  * The ViewContent component.
- */var ViewContent=/*#__PURE__*/function(_Component){/**
+ */
+class ViewContent extends Component {
+  /**
    * @param {Object} props The component props.
-   */function ViewContent(props){var _this2;_classCallCheck(this,ViewContent);_this2=_callSuper(this,ViewContent,[props]);/**
-   * Handles focus changes on the window to detect if an input is focused.
-   * @param {FocusEvent} e The event payload
-   */_defineProperty(_this2,"handleInputFocusChange",function(e){var el=e.target;var isInputTarget=el.tagName==='INPUT'&&['text','password','email','number','search','tel','url'].includes(el.type)||el.tagName==='TEXTAREA'||el.isContentEditable;if(isInputTarget){_this2.setState({isInputFocused:e.type==='focusin'});}});/**
-   * Handles a keyboard change event.
-   * @param {boolean} open If the keyboard is now open.
-   * @param {boolean} overlap The height of the keyboard.
-   */_defineProperty(_this2,"handleKeyboardChange",function(_ref){var open=_ref.open,overlap=_ref.overlap;if(_this2.props.noKeyboardListener){return;}var height=open?overlap:0;if(_this2.props.visible&&height!==_this2.state.keyboardHeight){_this2.setState({keyboardHeight:height});}});_this2.ref=React.createRef();_this2.state={keyboardHeight:0,isInputFocused:false};_this2.scrollContainer=useScrollContainer();if(!_this2.scrollContainer){_this2.ref.current=window;}_this2.props.setContentRef(_this2.ref);event.addCallback(EVENT_KEYBOARD_WILL_CHANGE,_this2.handleKeyboardChange);if(isIOs){window.addEventListener('focusin',_this2.handleInputFocusChange);window.addEventListener('focusout',_this2.handleInputFocusChange);}return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Handles focus changes on the window to detect if an input is focused.
+     * @param {FocusEvent} e The event payload
+     */
+    this.handleInputFocusChange = e => {
+      const el = e.target;
+      const isInputTarget = el.tagName === 'INPUT' && ['text', 'password', 'email', 'number', 'search', 'tel', 'url'].includes(el.type) || el.tagName === 'TEXTAREA' || el.isContentEditable;
+      if (isInputTarget) {
+        this.setState({
+          isInputFocused: e.type === 'focusin'
+        });
+      }
+    };
+    /**
+     * Handles a keyboard change event.
+     * @param {boolean} open If the keyboard is now open.
+     * @param {boolean} overlap The height of the keyboard.
+     */
+    this.handleKeyboardChange = ({
+      open,
+      overlap
+    }) => {
+      if (this.props.noKeyboardListener) {
+        return;
+      }
+      const height = open ? overlap : 0;
+      if (this.props.visible && height !== this.state.keyboardHeight) {
+        this.setState({
+          keyboardHeight: height
+        });
+      }
+    };
+    this.ref = /*#__PURE__*/React.createRef();
+    this.state = {
+      keyboardHeight: 0,
+      isInputFocused: false
+    };
+    this.scrollContainer = useScrollContainer();
+    if (!this.scrollContainer) {
+      this.ref.current = window;
+    }
+    this.props.setContentRef(this.ref);
+    event.addCallback(EVENT_KEYBOARD_WILL_CHANGE, this.handleKeyboardChange);
+    if (isIOs) {
+      window.addEventListener('focusin', this.handleInputFocusChange);
+      window.addEventListener('focusout', this.handleInputFocusChange);
+    }
+  }
+
+  /**
    * @param {Object} props The component props.
    * @param {Object} state The component state.
    * @returns {Object}
-   */_inherits(ViewContent,_Component);return _createClass(ViewContent,[{key:"componentDidMount",value:/**
+   */
+  static getDerivedStateFromProps(props, state) {
+    if (props.visible || state.keyboardHeight === 0) {
+      return null;
+    }
+    return {
+      keyboardHeight: 0
+    };
+  }
+
+  /**
    * Restore the scroll position of the page.
-   */function componentDidMount(){var _this3=this;var scrollTop=this.context.state.scrollTop;// This trick ensures the scroll position is restored correctly. Without it there where
-// situations where scroll position was restored before the content was rendered.
-// In that case restoration didn't have any effect.
-window.requestAnimationFrame(function(){if(_this3.ref.current===window){window.scrollTo(0,scrollTop||0);}else{_this3.ref.current.scrollTop=scrollTop;}});}/**
+   */
+  componentDidMount() {
+    const {
+      scrollTop
+    } = this.context.state;
+
+    // This trick ensures the scroll position is restored correctly. Without it there where
+    // situations where scroll position was restored before the content was rendered.
+    // In that case restoration didn't have any effect.
+    window.requestAnimationFrame(() => {
+      if (this.ref.current === window) {
+        window.scrollTo(0, scrollTop || 0);
+      } else {
+        this.ref.current.scrollTop = scrollTop;
+      }
+    });
+  }
+
+  /**
    * Removes the keyboardWillChange listener.
-   */},{key:"componentWillUnmount",value:function componentWillUnmount(){var scrollTop;if(this.ref.current===window){scrollTop=window.scrollY;}else{scrollTop=this.ref.current.scrollTop;}router.update(this.context.id,{scrollTop:scrollTop},false);event.removeCallback(EVENT_KEYBOARD_WILL_CHANGE,this.handleKeyboardChange);if(isIOs){window.removeEventListener('focusin',this.handleInputFocusChange);window.removeEventListener('focusout',this.handleInputFocusChange);}}/**
+   */
+  componentWillUnmount() {
+    let scrollTop;
+    if (this.ref.current === window) {
+      scrollTop = window.scrollY;
+    } else {
+      ({
+        scrollTop
+      } = this.ref.current);
+    }
+    router.update(this.context.id, {
+      scrollTop
+    }, false);
+    event.removeCallback(EVENT_KEYBOARD_WILL_CHANGE, this.handleKeyboardChange);
+    if (isIOs) {
+      window.removeEventListener('focusin', this.handleInputFocusChange);
+      window.removeEventListener('focusout', this.handleInputFocusChange);
+    }
+  }
+
+  /**
    * @returns {Object}
-   */},{key:"style",get:function get(){var noScrollOnKeyboard=this.props.noScrollOnKeyboard;var _this$state=this.state,keyboardHeight=_this$state.keyboardHeight,isInputFocused=_this$state.isInputFocused;var overflow='inherit';if(this.scrollContainer){overflow=noScrollOnKeyboard&&keyboardHeight>0?'hidden':'auto';}return{'--keyboard-height':"".concat(keyboardHeight,"px"),// Used on iOS devices to make the scroll container content always a bit taller than the
-// scroll container to enforce rubber band effect. Needs to be deactivated when input
-// is focused to prevent side effects (multiple scrollable content areas).
-'--extra-ios-scroll-space':isInputFocused?0:'12px',overflow:overflow};}},{key:"render",value:/**
+   */
+  get style() {
+    const {
+      noScrollOnKeyboard
+    } = this.props;
+    const {
+      keyboardHeight,
+      isInputFocused
+    } = this.state;
+    let overflow = 'inherit';
+    if (this.scrollContainer) {
+      overflow = noScrollOnKeyboard && keyboardHeight > 0 ? 'hidden' : 'auto';
+    }
+    return {
+      '--keyboard-height': `${keyboardHeight}px`,
+      // Used on iOS devices to make the scroll container content always a bit taller than the
+      // scroll container to enforce rubber band effect. Needs to be deactivated when input
+      // is focused to prevent side effects (multiple scrollable content areas).
+      '--extra-ios-scroll-space': isInputFocused ? 0 : '12px',
+      overflow
+    };
+  }
+  /**
    * @return {JSX.Element}
-   */function render(){return React.createElement(ParallaxProvider,{viewVisible:this.props.visible},React.createElement("article",{className:"".concat(container," engage__view__content ").concat(this.props.className),ref:this.scrollContainer?this.ref:null,style:this.style,role:"none"},React.createElement("div",{className:containerInner},React.createElement("div",{className:"engage__view__content__scrollable-content"},React.createElement(Helmet,{title:appConfig.shopName}),React.createElement(Above,null),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},this.props.visible?React.createElement("div",{id:"PageHeaderBelow"}):null),React.createElement(ConditionalWrapper,{condition:!this.props.noContentPortal,wrapper:function wrapper(children){return React.createElement(SurroundPortals,{portalName:VIEW_CONTENT},children);}},this.props.children),React.createElement(Below,null)))));}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(props,state){if(props.visible||state.keyboardHeight===0){return null;}return{keyboardHeight:0};}}]);}(Component);_defineProperty(ViewContent,"contextType",RouteContext);_defineProperty(ViewContent,"defaultProps",{className:'',children:null,noScrollOnKeyboard:false,noContentPortal:false,noKeyboardListener:false});export default(function(props){return React.createElement(RouteContext.Consumer,null,function(_ref2){var visible=_ref2.visible,_ref2$pattern=_ref2.pattern,pattern=_ref2$pattern===void 0?'':_ref2$pattern,_ref2$is=_ref2.is404,is404=_ref2$is===void 0?false:_ref2$is;return React.createElement(ViewContent,_extends({},props,{visible:visible,className:"route_".concat(is404?'404':pattern.replace(/[:/]/g,'_'))}));});});
+   */
+  render() {
+    return /*#__PURE__*/React.createElement(ParallaxProvider, {
+      viewVisible: this.props.visible
+    }, /*#__PURE__*/React.createElement("article", {
+      className: `${container} engage__view__content ${this.props.className}`,
+      ref: this.scrollContainer ? this.ref : null,
+      style: this.style,
+      role: "none"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: containerInner
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "engage__view__content__scrollable-content"
+    }, /*#__PURE__*/React.createElement(Helmet, {
+      title: appConfig.shopName
+    }), /*#__PURE__*/React.createElement(Above, null), /*#__PURE__*/React.createElement(ResponsiveContainer, {
+      breakpoint: ">xs",
+      webOnly: true
+    }, this.props.visible ? /*#__PURE__*/React.createElement("div", {
+      id: "PageHeaderBelow"
+    }) : null), /*#__PURE__*/React.createElement(ConditionalWrapper, {
+      condition: !this.props.noContentPortal,
+      wrapper: children => /*#__PURE__*/React.createElement(SurroundPortals, {
+        portalName: VIEW_CONTENT
+      }, children)
+    }, this.props.children), /*#__PURE__*/React.createElement(Below, null)))));
+  }
+}
+ViewContent.contextType = RouteContext;
+ViewContent.defaultProps = {
+  className: '',
+  children: null,
+  noScrollOnKeyboard: false,
+  noContentPortal: false,
+  noKeyboardListener: false
+};
+export default props => /*#__PURE__*/React.createElement(RouteContext.Consumer, null, ({
+  visible,
+  pattern = '',
+  is404 = false
+}) => /*#__PURE__*/React.createElement(ViewContent, _extends({}, props, {
+  visible: visible,
+  className: `route_${is404 ? '404' : pattern.replace(/[:/]/g, '_')}`
+})));

package/components/View/components/Content/style.js

@@ -1,3 +1,41 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{css}from'glamor';import{useScrollContainer,isIOs}from'@shopgate/engage/core/helpers';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';export var container=css(_extends({display:'flex',flexDirection:'column',width:'100vw'},useScrollContainer()?_extends({bottom:0,top:0,overflowScrolling:'touch',position:'absolute',WebkitOverflowScrolling:'touch'},IS_PAGE_PREVIEW_ACTIVE&&{scrollbarWidth:'thin',backgroundColor:'var(--page-background-color)'}):{height:'100%',backgroundColor:'var(--page-background-color)'},_defineProperty({},responsiveMediaQuery('>xs',{webOnly:true}),{width:'var(--page-content-width)'})));export var containerInner=css(_extends({},isIOs&&useScrollContainer()?{// Make the scroll container content a bit higher than the actual scroll container to
-// get a rubber band effect in all situations
-minHeight:'calc(100% + var(--extra-ios-scroll-space, 0px))'}:{},{':after':{content:"''",display:'block',pointerEvents:'none',paddingBottom:'calc(var(--page-content-offset-bottom) + var(--keyboard-height))'}}));
+import { css } from 'glamor';
+import { useScrollContainer, isIOs } from '@shopgate/engage/core/helpers';
+import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { IS_PAGE_PREVIEW_ACTIVE } from '@shopgate/engage/page/constants';
+export const container = css({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100vw',
+  ...(useScrollContainer() ? {
+    bottom: 0,
+    top: 0,
+    overflowScrolling: 'touch',
+    position: 'absolute',
+    WebkitOverflowScrolling: 'touch',
+    ...(IS_PAGE_PREVIEW_ACTIVE && {
+      scrollbarWidth: 'thin',
+      backgroundColor: 'var(--page-background-color)'
+    })
+  } : {
+    height: '100%',
+    backgroundColor: 'var(--page-background-color)'
+  }),
+  [responsiveMediaQuery('>xs', {
+    webOnly: true
+  })]: {
+    width: 'var(--page-content-width)'
+  }
+});
+export const containerInner = css({
+  ...(isIOs && useScrollContainer() ? {
+    // Make the scroll container content a bit higher than the actual scroll container to
+    // get a rubber band effect in all situations
+    minHeight: 'calc(100% + var(--extra-ios-scroll-space, 0px))'
+  } : {}),
+  ':after': {
+    content: "''",
+    display: 'block',
+    pointerEvents: 'none',
+    paddingBottom: 'calc(var(--page-content-offset-bottom) + var(--keyboard-height))'
+  }
+});

package/components/View/context.js

@@ -1 +1,16 @@
-import React from'react';import noop from'lodash/noop';export var ViewContext=React.createContext({top:null,bottom:null,ariaHidden:false,set:noop,setTop:noop,setBottom:noop,setContentRef:noop,getContentRef:function getContentRef(){return{current:null};},scrollTop:noop,setAriaHidden:noop});
+import React from 'react';
+import noop from 'lodash/noop';
+export const ViewContext = /*#__PURE__*/React.createContext({
+  top: null,
+  bottom: null,
+  ariaHidden: false,
+  set: noop,
+  setTop: noop,
+  setBottom: noop,
+  setContentRef: noop,
+  getContentRef: () => ({
+    current: null
+  }),
+  scrollTop: noop,
+  setAriaHidden: noop
+});

package/components/View/index.js

@@ -1,9 +1,71 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import PropTypes from'prop-types';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{RouteContext}from'@shopgate/pwa-common/context';import{setPageBackgroundColor}from"../../styles";import Content from"./components/Content";import ViewProvider from"./provider";import{ViewContext}from"./context";import styles from"./style";var colors=themeConfig.colors;// api: import { ViewContext } from '@shopgate/engage/components/View';
-export{ViewContext};/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { RouteContext } from '@shopgate/pwa-common/context';
+import { setPageBackgroundColor } from "../../styles";
+import Content from "./components/Content";
+import ViewProvider from "./provider";
+import { ViewContext } from "./context";
+import styles from "./style";
+const {
+  colors
+} = themeConfig;
+
+// api: import { ViewContext } from '@shopgate/engage/components/View';
+export { ViewContext };
+
+/**
  * The View container component.
  * @param {Object} props The component props.
  * @return {JSX.Element}
- */function ViewContainer(_ref){var background=_ref.background,children=_ref.children,noScrollOnKeyboard=_ref.noScrollOnKeyboard,visible=_ref.visible,ariaHidden=_ref['aria-hidden'],noContentPortal=_ref.noContentPortal,noKeyboardListener=_ref.noKeyboardListener;if(visible){setPageBackgroundColor(background);}var style={display:visible?'flex':'none'};return React.createElement(ViewProvider,null,React.createElement(ViewContext.Consumer,null,function(_ref2){var setContentRef=_ref2.setContentRef,ariaHiddenContext=_ref2.ariaHidden;return React.createElement("section",{className:"".concat(styles," engage__view"),style:style,"aria-hidden":ariaHidden||ariaHiddenContext},React.createElement(Content,{noScrollOnKeyboard:noScrollOnKeyboard,noKeyboardListener:noKeyboardListener,setContentRef:setContentRef,noContentPortal:noContentPortal},children));}));}ViewContainer.defaultProps={'aria-hidden':false,background:colors.light,children:null,noScrollOnKeyboard:false,noContentPortal:false,noKeyboardListener:false};/**
+ */
+function ViewContainer({
+  background,
+  children,
+  noScrollOnKeyboard,
+  visible,
+  'aria-hidden': ariaHidden,
+  noContentPortal,
+  noKeyboardListener
+}) {
+  if (visible) {
+    setPageBackgroundColor(background);
+  }
+  const style = {
+    display: visible ? 'flex' : 'none'
+  };
+  return /*#__PURE__*/React.createElement(ViewProvider, null, /*#__PURE__*/React.createElement(ViewContext.Consumer, null, ({
+    setContentRef,
+    ariaHidden: ariaHiddenContext
+  }) => /*#__PURE__*/React.createElement("section", {
+    className: `${styles} engage__view`,
+    style: style,
+    "aria-hidden": ariaHidden || ariaHiddenContext
+  }, /*#__PURE__*/React.createElement(Content, {
+    noScrollOnKeyboard: noScrollOnKeyboard,
+    noKeyboardListener: noKeyboardListener,
+    setContentRef: setContentRef,
+    noContentPortal: noContentPortal
+  }, children))));
+}
+ViewContainer.defaultProps = {
+  'aria-hidden': false,
+  background: colors.light,
+  children: null,
+  noScrollOnKeyboard: false,
+  noContentPortal: false,
+  noKeyboardListener: false
+};
+
+/**
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */export default function View(props){return React.createElement(RouteContext.Consumer,null,function(_ref3){var visible=_ref3.visible;return React.createElement(ViewContainer,_extends({},props,{visible:visible}));});}
+ */
+export default function View(props) {
+  return /*#__PURE__*/React.createElement(RouteContext.Consumer, null, ({
+    visible
+  }) => /*#__PURE__*/React.createElement(ViewContainer, _extends({}, props, {
+    visible: visible
+  })));
+}

package/components/View/provider.js

@@ -1,28 +1,146 @@
-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,{Component}from'react';import PropTypes from'prop-types';import delay from'lodash/delay';import{connect}from'react-redux';import{UIEvents}from'@shopgate/engage/core/events';import{getModalCount}from'@shopgate/engage/a11y/selectors';import{emitScrollEvents}from'@shopgate/engage/core/streams';import{MODAL_EVENTS}from'@shopgate/engage/components';import{ViewContext}from"./context";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import delay from 'lodash/delay';
+import { connect } from 'react-redux';
+import { UIEvents } from '@shopgate/engage/core/events';
+import { getModalCount } from '@shopgate/engage/a11y/selectors';
+import { emitScrollEvents } from '@shopgate/engage/core/streams';
+import { MODAL_EVENTS } from '@shopgate/engage/components';
+import { ViewContext } from "./context";
+
+/**
  * @param {Object} state State
  * @returns {Object}
- */var mapStateToProps=function mapStateToProps(state){return{modalCount:getModalCount(state)};};/**
+ */
+const mapStateToProps = state => ({
+  modalCount: getModalCount(state)
+});
+
+/**
  * The ViewProvider component.
- */var ViewProvider=/*#__PURE__*/function(_Component){function ViewProvider(props){var _this2;_classCallCheck(this,ViewProvider);_this2=_callSuper(this,ViewProvider,[props]);_defineProperty(_this2,"handleModalShow",function(){_this2.activeElement=document.activeElement;_this2.setAriaHidden(true);});_defineProperty(_this2,"handleModalHide",function(){if(_this2.activeElement&&_this2.activeElement.focus){_this2.activeElement.focus();}_this2.setAriaHidden(false);});/**
-   * @param {number} value The new top value;
-   */_defineProperty(_this2,"setTop",function(value){_this2.set('top',value);});/**
-   * @param {number} value The new bottom value;
-   */_defineProperty(_this2,"setBottom",function(value){_this2.set('bottom',value);});/**
-   * @param {boolean} value The new aria hidden value;
-   */_defineProperty(_this2,"setAriaHidden",function(value){_this2.set('ariaHidden',value);});/**
-   * @param {Object} ref A React reference to the page content wrapper.
-   */_defineProperty(_this2,"setContentRef",function(ref){_this2.set('contentRef',ref);// Delay to dispatch actual DOM node - implemented with CCP-2358
-delay(function(){return emitScrollEvents(ref.current);},250);});/**
-   * @return {Object}
-   */_defineProperty(_this2,"getContentRef",function(){return _this2.state.contentRef;});/**
-   * Scrolls the content ref to the top.
-   * @param {number} [value=0] A number indicating the new scroll position of the content ref.
-   */_defineProperty(_this2,"scrollTop",function(){var value=arguments.length>0&&arguments[0]!==undefined?arguments[0]:0;var current=_this2.state.contentRef.current;if(current){current.scrollTop=value;}});/**
-   * @param {string} property The state property to set.
-   * @param {*} value The value to set.
-   */_defineProperty(_this2,"set",function(property,value){if(_this2.state[property]!==value){_this2.setState(_defineProperty({},property,value));}});_this2.state={top:0,bottom:0,contentRef:{current:null},ariaHidden:props.modalCount>0};// Last view active element
-_this2.activeElement=null;return _this2;}/** @inheritDoc */_inherits(ViewProvider,_Component);return _createClass(ViewProvider,[{key:"componentDidMount",value:function componentDidMount(){UIEvents.addListener(MODAL_EVENTS.SHOW,this.handleModalShow);UIEvents.addListener(MODAL_EVENTS.HIDE,this.handleModalHide);}/** @inheritDoc */},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(prevProps.modalCount!==this.props.modalCount){this.setAriaHidden(this.props.modalCount>0);}}/** @inheritDoc */},{key:"componentWillUnmount",value:function componentWillUnmount(){UIEvents.removeListener(MODAL_EVENTS.SHOW,this.handleModalShow);UIEvents.removeListener(MODAL_EVENTS.HIDE,this.handleModalHide);}/**
+ */
+class ViewProvider extends Component {
+  /**
+   * @param {Object} props The component props.
+   */
+  constructor(props) {
+    super(props);
+    this.handleModalShow = () => {
+      this.activeElement = document.activeElement;
+      this.setAriaHidden(true);
+    };
+    this.handleModalHide = () => {
+      if (this.activeElement && this.activeElement.focus) {
+        this.activeElement.focus();
+      }
+      this.setAriaHidden(false);
+    };
+    /**
+     * @param {number} value The new top value;
+     */
+    this.setTop = value => {
+      this.set('top', value);
+    };
+    /**
+     * @param {number} value The new bottom value;
+     */
+    this.setBottom = value => {
+      this.set('bottom', value);
+    };
+    /**
+     * @param {boolean} value The new aria hidden value;
+     */
+    this.setAriaHidden = value => {
+      this.set('ariaHidden', value);
+    };
+    /**
+     * @param {Object} ref A React reference to the page content wrapper.
+     */
+    this.setContentRef = ref => {
+      this.set('contentRef', ref);
+      // Delay to dispatch actual DOM node - implemented with CCP-2358
+      delay(() => emitScrollEvents(ref.current), 250);
+    };
+    /**
+     * @return {Object}
+     */
+    this.getContentRef = () => this.state.contentRef;
+    /**
+     * Scrolls the content ref to the top.
+     * @param {number} [value=0] A number indicating the new scroll position of the content ref.
+     */
+    this.scrollTop = (value = 0) => {
+      const {
+        current
+      } = this.state.contentRef;
+      if (current) {
+        current.scrollTop = value;
+      }
+    };
+    /**
+     * @param {string} property The state property to set.
+     * @param {*} value The value to set.
+     */
+    this.set = (property, value) => {
+      if (this.state[property] !== value) {
+        this.setState({
+          [property]: value
+        });
+      }
+    };
+    this.state = {
+      top: 0,
+      bottom: 0,
+      contentRef: {
+        current: null
+      },
+      ariaHidden: props.modalCount > 0
+    };
+    // Last view active element
+    this.activeElement = null;
+  }
+
+  /** @inheritDoc */
+  componentDidMount() {
+    UIEvents.addListener(MODAL_EVENTS.SHOW, this.handleModalShow);
+    UIEvents.addListener(MODAL_EVENTS.HIDE, this.handleModalHide);
+  }
+
+  /** @inheritDoc */
+  componentDidUpdate(prevProps) {
+    if (prevProps.modalCount !== this.props.modalCount) {
+      this.setAriaHidden(this.props.modalCount > 0);
+    }
+  }
+
+  /** @inheritDoc */
+  componentWillUnmount() {
+    UIEvents.removeListener(MODAL_EVENTS.SHOW, this.handleModalShow);
+    UIEvents.removeListener(MODAL_EVENTS.HIDE, this.handleModalHide);
+  }
+
+  /**
    * @returns {Object}
-   */},{key:"providerContext",get:function get(){return _extends({},this.state,{set:this.set,setTop:this.setTop,setBottom:this.setBottom,setAriaHidden:this.setAriaHidden,setContentRef:this.setContentRef,getContentRef:this.getContentRef,scrollTop:this.scrollTop});}},{key:"render",value:/**
+   */
+  get providerContext() {
+    return {
+      ...this.state,
+      set: this.set,
+      setTop: this.setTop,
+      setBottom: this.setBottom,
+      setAriaHidden: this.setAriaHidden,
+      setContentRef: this.setContentRef,
+      getContentRef: this.getContentRef,
+      scrollTop: this.scrollTop
+    };
+  }
+  /**
    * @returns {JSX}
-   */function render(){return React.createElement(ViewContext.Provider,{value:this.providerContext},this.props.children);}}]);}(Component);export default connect(mapStateToProps)(ViewProvider);
+   */
+  render() {
+    return /*#__PURE__*/React.createElement(ViewContext.Provider, {
+      value: this.providerContext
+    }, this.props.children);
+  }
+}
+export default connect(mapStateToProps)(ViewProvider);

package/components/View/style.js

@@ -1 +1,12 @@
-import{css}from'glamor';import{useScrollContainer}from'@shopgate/engage/core';export default css(useScrollContainer()?{position:'absolute',top:0,left:0,width:'100%',height:'100%',zIndex:1}:{height:'100%'});
+import { css } from 'glamor';
+import { useScrollContainer } from '@shopgate/engage/core';
+export default css(useScrollContainer() ? {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  zIndex: 1
+} : {
+  height: '100%'
+});

package/components/constants.js

@@ -1 +1,5 @@
-export var PORTAL_PRODUCT_IMAGE='component.product-image';export var PORTAL_PRODUCT_MEDIA='component.product-media';export var PORTAL_PRODUCT_MEDIA_SECTION='component.product-media-section';export var PORTAL_PRODUCT_BADGES='component.product-badges';export var PORTAL_PRODUCT_IMAGE_SLIDER='component.product-image-slider';
+export const PORTAL_PRODUCT_IMAGE = 'component.product-image';
+export const PORTAL_PRODUCT_MEDIA = 'component.product-media';
+export const PORTAL_PRODUCT_MEDIA_SECTION = 'component.product-media-section';
+export const PORTAL_PRODUCT_BADGES = 'component.product-badges';
+export const PORTAL_PRODUCT_IMAGE_SLIDER = 'component.product-image-slider';