@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/components/Toggle/index.js

@@ -8,30 +8,33 @@ import { label, checkbox, thumb, container } from "./style";
  * @param {Object} props The component props
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Toggle = ({
   id,
   checked,
   className,
   onChange,
   disabled
-}) => /*#__PURE__*/React.createElement("div", {
-  className: className
-}, /*#__PURE__*/React.createElement("div", {
-  className: container
-}, /*#__PURE__*/React.createElement("input", {
-  type: "checkbox",
-  id: id,
-  className: classNames(checkbox),
-  checked: checked,
-  "aria-checked": checked,
-  onChange: onChange,
-  disabled: disabled,
-  "aria-labelledby": `${id}-label`
-}), /*#__PURE__*/React.createElement("div", {
-  className: label
-}), /*#__PURE__*/React.createElement("div", {
-  className: thumb
-})));
+}) => /*#__PURE__*/_jsx("div", {
+  className: className,
+  children: /*#__PURE__*/_jsxs("div", {
+    className: container,
+    children: [/*#__PURE__*/_jsx("input", {
+      type: "checkbox",
+      id: id,
+      className: classNames(checkbox),
+      checked: checked,
+      "aria-checked": checked,
+      onChange: onChange,
+      disabled: disabled,
+      "aria-labelledby": `${id}-label`
+    }), /*#__PURE__*/_jsx("div", {
+      className: label
+    }), /*#__PURE__*/_jsx("div", {
+      className: thumb
+    })]
+  })
+});
 Toggle.defaultProps = {
   checked: false,
   className: null,

package/components/Typography/Typography.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@shopgate/engage/styles';
@@ -9,6 +8,7 @@ import classNames from 'classnames';
  * @param {string} string The string to capitalize.
  * @returns {string} The string with the first letter capitalized.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const capitalize = string => string.charAt(0).toUpperCase() + string.slice(1);
 
 /**
@@ -160,7 +160,7 @@ const Typography = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...other
   } = props;
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/_jsx(Component, {
     className: classNames(classes.root, 'engage__typography', {
       [classes[variant]]: variant !== 'inherit',
       [`engage__typography_${variant}`]: variant !== 'inherit',
@@ -169,13 +169,13 @@ const Typography = /*#__PURE__*/React.forwardRef((props, ref) => {
       [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));
+    ref: ref,
+    ...other
+  });
 });
 Typography.defaultProps = {
   align: 'inherit',

package/components/VideoPlayer/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import ReactPlayer from 'react-player';
 import { UIEvents } from '@shopgate/pwa-core';
@@ -9,19 +9,19 @@ import { UI_VISIBILITY_CHANGE } from '@shopgate/pwa-common/constants/ui';
  * @param {Object} props props
  * @returns {JSX}
  */
-class VideoPlayer extends PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      ready: false,
-      playing: this.props.playing,
-      userPaused: false
-    };
+import { jsx as _jsx } from "react/jsx-runtime";
+let VideoPlayer = /*#__PURE__*/function (_PureComponent) {
+  /**
+   * @param {Object} props The component props
+   */
+  function VideoPlayer(props) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
     /** @returns {boolean} */
-    this.getPlayingState = () => this.state.ready && !this.state.userPaused && this.state.playing;
+    _this.getPlayingState = () => _this.state.ready && !_this.state.userPaused && _this.state.playing;
     /** @returns {void} */
-    this.handleReady = () => {
-      this.setState({
+    _this.handleReady = () => {
+      _this.setState({
         ready: true
       });
     };
@@ -29,50 +29,59 @@ class VideoPlayer extends PureComponent {
      * Not allowed autoplay error (User gesture permission)
      * @param {Object} error error
      */
-    this.handleError = error => {
+    _this.handleError = error => {
       if (error && error.name === 'NotAllowedError') {
-        this.setState({
+        _this.setState({
           playing: false
         });
       }
     };
     /** @returns {undefined} */
-    this.handlePause = () => {
+    _this.handlePause = () => {
       // Check if was not paused programmatically
-      if (this.state.playing) {
-        this.setState({
+      if (_this.state.playing) {
+        _this.setState({
           userPaused: true,
           playing: false
         });
       }
     };
     /** @returns {undefined} */
-    this.handlePlay = () => {
-      if (!this.state.playing) {
-        this.setState({
+    _this.handlePlay = () => {
+      if (!_this.state.playing) {
+        _this.setState({
           userPaused: false,
           playing: true
         });
       }
     };
     /** @returns {undefined} */
-    this.handleVisibilityChange = () => {
-      this.setState({
+    _this.handleVisibilityChange = () => {
+      _this.setState({
         playing: false
       });
     };
+    _this.state = {
+      ready: false,
+      playing: props.playing,
+      userPaused: false
+    };
+    return _this;
   }
+
   /**
    * @inheritDoc
    */
-  componentDidMount() {
+  _inheritsLoose(VideoPlayer, _PureComponent);
+  var _proto = VideoPlayer.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     UIEvents.addListener(UI_VISIBILITY_CHANGE, this.handleVisibilityChange);
   }
 
   /**
    * @inheritDoc
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+   */;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     const nextState = {
       playing: nextProps.playing
     };
@@ -84,24 +93,25 @@ class VideoPlayer extends PureComponent {
 
   /**
    * @inheritDoc
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     UIEvents.removeListener(UI_VISIBILITY_CHANGE, this.handleVisibilityChange);
-  }
+  };
   /**
    * @returns {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement(ReactPlayer, _extends({
-      playsinline: true
-    }, this.props, {
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx(ReactPlayer, {
+      playsinline: true,
+      ...this.props,
       playing: this.getPlayingState(),
       onReady: this.handleReady,
       onPause: this.handlePause,
       onPlay: this.handlePlay,
       onError: this.handleError
-    }));
-  }
-}
+    });
+  };
+  return VideoPlayer;
+}(PureComponent);
 VideoPlayer.defaultProps = ReactPlayer.defaultProps;
 export default VideoPlayer;

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

@@ -4,22 +4,25 @@ import { ViewContext } from "../../context";
 /**
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function ViewAbove() {
-  return /*#__PURE__*/React.createElement(ViewContext.Consumer, null, ({
-    top
-  }) => {
-    if (!top) {
-      return null;
+  return /*#__PURE__*/_jsx(ViewContext.Consumer, {
+    children: ({
+      top
+    }) => {
+      if (!top) {
+        return null;
+      }
+      const styles = {
+        flexShrink: 0,
+        height: `calc(${top}px + var(--safe-area-inset-top))`
+      };
+      return /*#__PURE__*/_jsx("div", {
+        "aria-hidden": true,
+        style: styles,
+        className: "engage__view__above"
+      });
     }
-    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

@@ -4,22 +4,25 @@ import { ViewContext } from "../../context";
 /**
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function ViewBelow() {
-  return /*#__PURE__*/React.createElement(ViewContext.Consumer, null, ({
-    bottom
-  }) => {
-    if (!bottom) {
-      return null;
+  return /*#__PURE__*/_jsx(ViewContext.Consumer, {
+    children: ({
+      bottom
+    }) => {
+      if (!bottom) {
+        return null;
+      }
+      const styles = {
+        flexShrink: 0,
+        height: `calc(${bottom}px + var(--safe-area-inset-bottom))`
+      };
+      return /*#__PURE__*/_jsx("div", {
+        "aria-hidden": true,
+        style: styles,
+        className: "engage__view__below"
+      });
     }
-    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

@@ -14,6 +14,7 @@ import { ViewContext } from '@shopgate/engage/components/View';
  * @param {Object} props.children The component children.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ParallaxProviderInner = ({
   scrollHeight,
   children
@@ -58,13 +59,15 @@ const ParallaxProvider = ({
   const {
     height
   } = useElementSize(mockedElementSizeRef);
-  return /*#__PURE__*/React.createElement(ParallaxProviderCmp
+  return /*#__PURE__*/_jsx(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));
+    scrollContainer: scrollContainerUsed ? viewRef.current : null,
+    children: /*#__PURE__*/_jsx(ParallaxProviderInner, {
+      scrollHeight: height,
+      children: children
+    })
+  });
 };
 export default ParallaxProvider;

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

@@ -1,4 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import "core-js/modules/es.string.replace.js";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -21,21 +22,23 @@ import { container, containerInner } from "./style";
 /**
  * The ViewContent component.
  */
-class ViewContent extends Component {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let ViewContent = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function ViewContent(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Handles focus changes on the window to detect if an input is focused.
      * @param {FocusEvent} e The event payload
      */
-    this.handleInputFocusChange = e => {
+    _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({
+        _this.setState({
           isInputFocused: e.type === 'focusin'
         });
       }
@@ -45,35 +48,36 @@ class ViewContent extends Component {
      * @param {boolean} open If the keyboard is now open.
      * @param {boolean} overlap The height of the keyboard.
      */
-    this.handleKeyboardChange = ({
+    _this.handleKeyboardChange = ({
       open,
       overlap
     }) => {
-      if (this.props.noKeyboardListener) {
+      if (_this.props.noKeyboardListener) {
         return;
       }
       const height = open ? overlap : 0;
-      if (this.props.visible && height !== this.state.keyboardHeight) {
-        this.setState({
+      if (_this.props.visible && height !== _this.state.keyboardHeight) {
+        _this.setState({
           keyboardHeight: height
         });
       }
     };
-    this.ref = /*#__PURE__*/React.createRef();
-    this.state = {
+    _this.ref = /*#__PURE__*/React.createRef();
+    _this.state = {
       keyboardHeight: 0,
       isInputFocused: false
     };
-    this.scrollContainer = useScrollContainer();
-    if (!this.scrollContainer) {
-      this.ref.current = window;
+    _this.scrollContainer = useScrollContainer();
+    if (!_this.scrollContainer) {
+      _this.ref.current = window;
     }
-    this.props.setContentRef(this.ref);
-    event.addCallback(EVENT_KEYBOARD_WILL_CHANGE, this.handleKeyboardChange);
+    _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);
+      window.addEventListener('focusin', _this.handleInputFocusChange);
+      window.addEventListener('focusout', _this.handleInputFocusChange);
     }
+    return _this;
   }
 
   /**
@@ -81,7 +85,8 @@ class ViewContent extends Component {
    * @param {Object} state The component state.
    * @returns {Object}
    */
-  static getDerivedStateFromProps(props, state) {
+  _inheritsLoose(ViewContent, _Component);
+  ViewContent.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
     if (props.visible || state.keyboardHeight === 0) {
       return null;
     }
@@ -92,8 +97,9 @@ class ViewContent extends Component {
 
   /**
    * Restore the scroll position of the page.
-   */
-  componentDidMount() {
+   */;
+  var _proto = ViewContent.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     const {
       scrollTop
     } = this.context.state;
@@ -104,16 +110,16 @@ class ViewContent extends Component {
     window.requestAnimationFrame(() => {
       if (this.ref.current === window) {
         window.scrollTo(0, scrollTop || 0);
-      } else {
-        this.ref.current.scrollTop = scrollTop;
+      } else if (this.ref.current?.scrollTop) {
+        this.ref.current.scrollTop = scrollTop || 0;
       }
     });
   }
 
   /**
    * Removes the keyboardWillChange listener.
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     let scrollTop;
     if (this.ref.current === window) {
       scrollTop = window.scrollY;
@@ -134,58 +140,68 @@ class ViewContent extends Component {
 
   /**
    * @returns {Object}
-   */
-  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}
    */
-  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)))));
-  }
-}
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx(ParallaxProvider, {
+      viewVisible: this.props.visible,
+      children: /*#__PURE__*/_jsx("article", {
+        className: `${container} engage__view__content ${this.props.className}`,
+        ref: this.scrollContainer ? this.ref : null,
+        style: this.style,
+        role: "none",
+        children: /*#__PURE__*/_jsx("div", {
+          className: containerInner,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: "engage__view__content__scrollable-content",
+            children: [/*#__PURE__*/_jsx(Helmet, {
+              title: appConfig.shopName
+            }), /*#__PURE__*/_jsx(Above, {}), /*#__PURE__*/_jsx(ResponsiveContainer, {
+              breakpoint: ">xs",
+              webOnly: true,
+              children: this.props.visible ? /*#__PURE__*/_jsx("div", {
+                id: "PageHeaderBelow"
+              }) : null
+            }), /*#__PURE__*/_jsx(ConditionalWrapper, {
+              condition: !this.props.noContentPortal,
+              wrapper: children => /*#__PURE__*/_jsx(SurroundPortals, {
+                portalName: VIEW_CONTENT,
+                children: children
+              }),
+              children: this.props.children
+            }), /*#__PURE__*/_jsx(Below, {})]
+          })
+        })
+      })
+    });
+  };
+  return _createClass(ViewContent, [{
+    key: "style",
+    get: function () {
+      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
+      };
+    }
+  }]);
+}(Component);
 ViewContent.contextType = RouteContext;
 ViewContent.defaultProps = {
   className: '',
@@ -194,11 +210,14 @@ ViewContent.defaultProps = {
   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, '_')}`
-})));
+export default props => /*#__PURE__*/_jsx(RouteContext.Consumer, {
+  children: ({
+    visible,
+    pattern = '',
+    is404 = false
+  }) => /*#__PURE__*/_jsx(ViewContent, {
+    ...props,
+    visible: visible,
+    className: `route_${is404 ? '404' : pattern.replace(/[:/]/g, '_')}`
+  })
+});