@shopgate/engage 7.30.3 → 7.31.0-alpha.1

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

@@ -1,7 +1,6 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.replace.js";
-import React, { Component } from 'react';
+import React, { useRef, useState, useEffect, useLayoutEffect, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import ResponsiveContainer from '@shopgate/engage/components/ResponsiveContainer';
@@ -12,197 +11,196 @@ 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 { applyScrollContainer, isIOs } from '@shopgate/engage/core/helpers';
+import { makeStyles, cx, responsiveMediaQuery } from '@shopgate/engage/styles';
+import { IS_PAGE_PREVIEW_ACTIVE } from '@shopgate/engage/page/constants';
 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.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let ViewContent = /*#__PURE__*/function (_Component) {
-  /**
-   * @param {Object} props The component 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 => {
-      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;
+const useStyles = makeStyles()({
+  containerBase: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100vw',
+    [responsiveMediaQuery('>xs', {
+      webOnly: true
+    })]: {
+      width: 'var(--page-content-width)'
     }
-    _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);
+  },
+  containerScroll: {
+    bottom: 0,
+    top: 0,
+    overflowScrolling: 'touch',
+    position: 'absolute',
+    WebkitOverflowScrolling: 'touch',
+    ...(IS_PAGE_PREVIEW_ACTIVE && {
+      scrollbarWidth: 'thin',
+      backgroundColor: 'var(--page-background-color)'
+    })
+  },
+  containerWindow: {
+    height: '100%',
+    backgroundColor: 'var(--page-background-color)'
+  },
+  containerInner: {
+    ':after': {
+      content: "''",
+      display: 'block',
+      pointerEvents: 'none',
+      paddingBottom: 'calc(var(--page-content-offset-bottom) + var(--keyboard-height))'
     }
-    return _this;
+  },
+  containerInnerIosScroll: {
+    minHeight: 'calc(100% + var(--extra-ios-scroll-space, 0px))'
   }
+});
 
-  /**
-   * @param {Object} props The component props.
-   * @param {Object} state The component state.
-   * @returns {Object}
-   */
-  _inheritsLoose(ViewContent, _Component);
-  ViewContent.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    if (props.visible || state.keyboardHeight === 0) {
+/**
+ * The ViewContent component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
+ */
+const ViewContent = ({
+  setContentRef,
+  visible,
+  children,
+  className,
+  noContentPortal,
+  noKeyboardListener,
+  noScrollOnKeyboard
+}) => {
+  const routeContext = useContext(RouteContext);
+  const scrollContainer = applyScrollContainer();
+  const {
+    classes
+  } = useStyles();
+  const ref = useRef((() => {
+    if (scrollContainer) {
       return null;
     }
-    return {
-      keyboardHeight: 0
-    };
-  }
-
-  /**
-   * Restore the scroll position of the page.
-   */;
-  var _proto = ViewContent.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+    if (typeof window !== 'undefined') {
+      return window;
+    }
+    return null;
+  })());
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  useLayoutEffect(() => {
+    setContentRef(ref);
+  }, [setContentRef]);
+  useEffect(() => {
+    if (!visible) {
+      setKeyboardHeight(0);
+    }
+  }, [visible]);
+  useLayoutEffect(() => {
     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) {
+    } = routeContext.state;
+    const raf = window.requestAnimationFrame(() => {
+      if (ref.current === window) {
         window.scrollTo(0, scrollTop || 0);
-      } else if (typeof this.ref.current?.scrollTop !== 'undefined') {
-        this.ref.current.scrollTop = scrollTop || 0;
+      } else if (ref.current?.scrollTop !== undefined) {
+        ref.current.scrollTop = scrollTop || 0;
       }
     });
-  }
-
-  /**
-   * Removes the keyboardWillChange listener.
-   */;
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    let scrollTop;
-    if (this.ref.current === window) {
-      scrollTop = window.scrollY;
-    } else {
-      ({
-        scrollTop
-      } = this.ref.current);
+    return () => window.cancelAnimationFrame(raf);
+    // Restore scroll once on mount (matches former componentDidMount).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleInputFocusChange = useCallback(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) {
+      setIsInputFocused(e.type === 'focusin');
     }
-    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);
+  }, []);
+  const handleKeyboardChange = useCallback(({
+    open,
+    overlap
+  }) => {
+    if (noKeyboardListener) {
+      return;
+    }
+    const height = open ? overlap : 0;
+    if (visible && height !== keyboardHeight) {
+      setKeyboardHeight(height);
+    }
+  }, [noKeyboardListener, visible, keyboardHeight]);
+  useLayoutEffect(() => {
+    event.addCallback(EVENT_KEYBOARD_WILL_CHANGE, handleKeyboardChange);
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      const node = ref.current;
+      let scrollTop;
+      if (node === window) {
+        scrollTop = window.scrollY;
+      } else if (node) {
+        ({
+          scrollTop
+        } = node);
+      }
+      router.update(routeContext.id, {
+        scrollTop
+      }, false);
+      event.removeCallback(EVENT_KEYBOARD_WILL_CHANGE, handleKeyboardChange);
+    };
+  }, [handleKeyboardChange, routeContext.id]);
+  useEffect(() => {
+    if (!isIOs) {
+      return undefined;
     }
+    window.addEventListener('focusin', handleInputFocusChange);
+    window.addEventListener('focusout', handleInputFocusChange);
+    return () => {
+      window.removeEventListener('focusin', handleInputFocusChange);
+      window.removeEventListener('focusout', handleInputFocusChange);
+    };
+  }, [handleInputFocusChange]);
+  let overflow = 'inherit';
+  if (scrollContainer) {
+    overflow = noScrollOnKeyboard && keyboardHeight > 0 ? 'hidden' : 'auto';
   }
-
-  /**
-   * @returns {Object}
-   */;
-  /**
-   * @return {JSX.Element}
-   */
-  _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, {})]
-          })
+  const style = {
+    '--keyboard-height': `${keyboardHeight}px`,
+    '--extra-ios-scroll-space': isInputFocused ? 0 : '12px',
+    overflow
+  };
+  return /*#__PURE__*/_jsx(ParallaxProvider, {
+    viewVisible: visible,
+    children: /*#__PURE__*/_jsx("article", {
+      className: cx(classes.containerBase, scrollContainer ? classes.containerScroll : classes.containerWindow, 'engage__view__content', className),
+      ref: scrollContainer ? ref : null,
+      style: style,
+      role: "none",
+      children: /*#__PURE__*/_jsx("div", {
+        className: cx(classes.containerInner, isIOs && scrollContainer && classes.containerInnerIosScroll),
+        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: visible ? /*#__PURE__*/_jsx("div", {
+              id: "PageHeaderBelow"
+            }) : null
+          }), /*#__PURE__*/_jsx(ConditionalWrapper, {
+            condition: !noContentPortal,
+            wrapper: portalChildren => /*#__PURE__*/_jsx(SurroundPortals, {
+              portalName: VIEW_CONTENT,
+              children: portalChildren
+            }),
+            children: 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: '',
   children: null,

package/components/View/context.d.ts

@@ -0,0 +1,16 @@
+export const ViewContext: React.Context<{
+    top: null;
+    bottom: null;
+    ariaHidden: boolean;
+    set: (...args: any[]) => void;
+    setTop: (...args: any[]) => void;
+    setBottom: (...args: any[]) => void;
+    setContentRef: (...args: any[]) => void;
+    getContentRef: () => {
+        current: null;
+    };
+    scrollTop: (...args: any[]) => void;
+    setAriaHidden: (...args: any[]) => void;
+}>;
+import React from 'react';
+//# sourceMappingURL=context.d.ts.map

package/components/View/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../components/View/context.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAWG;kBAde,OAAO"}

package/components/View/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @param {Object} props The component props.
+ * @returns {JSX.Element}
+ */
+export default function View(props: Object): JSX.Element;
+export { ViewContext };
+import { ViewContext } from './context';
+//# sourceMappingURL=index.d.ts.map

package/components/View/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/View/index.jsx"],"names":[],"mappings":"AA4FA;;;GAGG;AACH,oCAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAUvB;;4BA/F2B,WAAW"}

package/components/View/index.js

@@ -1,16 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
+import { applyScrollContainer } from '@shopgate/engage/core/helpers';
 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";
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
   colors
 } = themeConfig;
+const useStyles = makeStyles()(() => ({
+  root: applyScrollContainer() ? {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    zIndex: 1
+  } : {
+    height: '100%'
+  }
+}));
 
 // api: import { ViewContext } from '@shopgate/engage/components/View';
 export { ViewContext };
@@ -29,6 +42,10 @@ function ViewContainer({
   noContentPortal,
   noKeyboardListener
 }) {
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (visible) {
     setPageBackgroundColor(background);
   }
@@ -41,7 +58,7 @@ function ViewContainer({
         setContentRef,
         ariaHidden: ariaHiddenContext
       }) => /*#__PURE__*/_jsx("section", {
-        className: `${styles} engage__view`,
+        className: cx(classes.root, 'engage__view'),
         style: style,
         "aria-hidden": ariaHidden || ariaHiddenContext,
         children: /*#__PURE__*/_jsx(Content, {

package/components/View/provider.d.ts

@@ -0,0 +1,82 @@
+declare const _default: import("react-redux").ConnectedComponent<typeof ViewProvider, {
+    children: NonNullable<PropTypes.ReactNodeLike>;
+    modalCount: number;
+    context?: import("react-redux/es/components/Context").ReactReduxContextInstance | undefined;
+    store?: import("redux").Store | undefined;
+} | {
+    children: NonNullable<PropTypes.ReactNodeLike>;
+    modalCount: number;
+    store?: import("redux").Store | undefined;
+}>;
+export default _default;
+/**
+ * The ViewProvider component.
+ */
+declare class ViewProvider extends React.Component<any, any, any> {
+    static propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        modalCount: PropTypes.Validator<number>;
+    };
+    /**
+     * @param {Object} props The component props.
+     */
+    constructor(props: Object);
+    state: {
+        top: number;
+        bottom: number;
+        contentRef: {
+            current: null;
+        };
+        ariaHidden: boolean;
+    };
+    activeElement: Element | null;
+    /** @inheritDoc */
+    componentDidMount(): void;
+    /** @inheritDoc */
+    componentDidUpdate(prevProps: any): void;
+    /** @inheritDoc */
+    componentWillUnmount(): void;
+    /**
+     * @returns {Object}
+     */
+    get providerContext(): Object;
+    handleModalShow: () => void;
+    handleModalHide: () => void;
+    /**
+     * @param {number} value The new top value;
+     */
+    setTop: (value: number) => void;
+    /**
+     * @param {number} value The new bottom value;
+     */
+    setBottom: (value: number) => void;
+    /**
+     * @param {boolean} value The new aria hidden value;
+     */
+    setAriaHidden: (value: boolean) => void;
+    /**
+     * @param {Object} ref A React reference to the page content wrapper.
+     */
+    setContentRef: (ref: Object) => void;
+    /**
+     * @return {Object}
+     */
+    getContentRef: () => Object;
+    /**
+     * Scrolls the content ref to the top.
+     * @param {number} [value=0] A number indicating the new scroll position of the content ref.
+     */
+    scrollTop: (value?: number) => void;
+    /**
+     * @param {string} property The state property to set.
+     * @param {*} value The value to set.
+     */
+    set: (property: string, value: any) => void;
+    /**
+     * @returns {JSX}
+     */
+    render(): JSX;
+}
+import PropTypes from 'prop-types';
+import React from 'react';
+//# sourceMappingURL=provider.d.ts.map

package/components/View/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../components/View/provider.jsx"],"names":[],"mappings":";;;;;;;;;;;AAkBA;;GAEG;AACH;IACE;;;MAGE;IAEF;;OAEG;IACH,mBAFW,MAAM,EAahB;IARC;;;;;;;MAKC;IAED,8BAAyB;IAG3B,kBAAkB;IAClB,0BAGC;IAED,kBAAkB;IAClB,yCAIC;IAED,kBAAkB;IAClB,6BAGC;IAED;;OAEG;IACH,uBAFa,MAAM,CAalB;IAED,4BAGE;IAEF,4BAKE;IAEF;;OAEG;IACH,SAAU,OAFC,MAEI,UAEb;IAEF;;OAEG;IACH,YAAa,OAFF,MAEO,UAEhB;IAEF;;OAEG;IACH,gBAAiB,OAFN,OAEW,UAEpB;IAEF;;OAEG;IACH,gBAAiB,KAFN,MAES,UAIlB;IAEF;;OAEG;IACH,qBAFY,MAAM,CAE0B;IAE5C;;;OAGG;IACH,YAAa,QAFF,MAEW,UAKpB;IAEF;;;OAGG;IACH,MAAO,UAHI,MAGI,EAAE,OAFN,GAEW,UAMpB;IAEF;;OAEG;IACH,UAFa,GAAG,CAQf;CACF;sBA7JqB,YAAY;kBADD,OAAO"}