@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.2

package/components/ChipLayout/index.js

@@ -1,21 +1,15 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useRef, useEffect, useMemo, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
-import I18n from '@shopgate/pwa-common/components/I18n';
+import { I18n } from '@shopgate/engage/components';
 import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import styles from "./style";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 
 /**
  * The height of one row.
  * @type {number}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const CHIP_ROW_HEIGHT = 34;
 
 /**
@@ -23,67 +17,86 @@ export const CHIP_ROW_HEIGHT = 34;
  * @type {number}
  */
 export const CHIP_MINIMUM_WIDTH = 60;
+const useStyles = makeStyles()((theme, {
+  maxRows
+}) => ({
+  container: {
+    position: 'relative',
+    maxHeight: CHIP_ROW_HEIGHT * maxRows + 8,
+    overflow: 'hidden',
+    marginBottom: theme.spacing(1)
+  },
+  layout: {
+    display: 'flex',
+    alignContent: 'flex-start',
+    flexWrap: 'wrap',
+    padding: '8px 5px',
+    overflow: 'hidden'
+  },
+  moreButtonWrapper: {
+    position: 'absolute',
+    right: 0,
+    bottom: 6,
+    marginLeft: 'auto'
+  },
+  moreButton: {
+    marginLeft: 'auto',
+    outline: 0,
+    padding: 9,
+    fontSize: '0.8rem',
+    fontWeight: 500,
+    textTransform: 'uppercase'
+  },
+  moreButtonInverted: {
+    marginLeft: 'auto',
+    outline: 0,
+    padding: 9,
+    fontSize: '0.8rem',
+    fontWeight: 500,
+    textTransform: 'uppercase'
+  }
+}));
 
 /**
  * The ChipLayout component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-let ChipLayout = /*#__PURE__*/function (_Component) {
-  function ChipLayout(...args) {
-    var _this;
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    /**
-     * Debounced, eg. layout effect
-     */
-    _this.processHiddenElementsDebounced = debounce(_this.processHiddenElements, 50);
-    return _this;
-  }
-  _inheritsLoose(ChipLayout, _Component);
-  var _proto = ChipLayout.prototype;
-  /**
-   * When the component mounts we need to initially process all children.
-   */
-  _proto.componentDidMount = function componentDidMount() {
-    this.processHiddenElementsDebounced();
-  }
-
-  /**
-   * Eveyry time pathname or other prop changes this callback is called.
-   * This funtion will start processing hidden elements in order to check if "more" button
-   * should be rendered.
-   *
-   * It must be done on every prop change, including the pathname.
-   * Sometimes this component is rendered invisible, then since `.processHiddenElements` uses
-   * refs.clientHeight it would always be zero.
-   */;
-  _proto.componentDidUpdate = function componentDidUpdate() {
-    this.processHiddenElementsDebounced();
-  }
-
-  /**
-   * Returns the maximum height the container should have.
-   * @returns {number}
-   */;
-  /**
-   * Loops through all children to make sure the more button appears if there is too much content.
-   */
-  _proto.processHiddenElements = function processHiddenElements() {
-    if (!this.containerRef) {
+const ChipLayout = ({
+  children,
+  handleMoreButton,
+  invertMoreButton,
+  maxRows,
+  moreLabel,
+  pathname
+}) => {
+  const theme = useTheme();
+  const {
+    classes,
+    cx
+  } = useStyles({
+    maxRows
+  });
+  const containerRef = useRef(null);
+  const layoutRef = useRef(null);
+  const moreButtonRef = useRef(null);
+  const maxContentHeight = CHIP_ROW_HEIGHT * maxRows + 8;
+  const processHiddenElements = useCallback(() => {
+    const containerEl = containerRef.current;
+    const layoutEl = layoutRef.current;
+    const moreBtnEl = moreButtonRef.current;
+    if (!containerEl || !layoutEl || !moreBtnEl) {
       return;
     }
-    // Find out if there are overflowing elements.
     let lastVisibleElement = 0;
-    const showMoreButton = this.containerRef.scrollHeight > this.containerRef.clientHeight;
-    const containerHeight = this.containerRef.clientHeight;
-    const chips = Array.from(this.layoutRef.children);
-    this.moreButtonRef.style.display = showMoreButton ? 'block' : 'none';
-    this.layoutRef.style.minHeight = showMoreButton ? `${this.maxContentHeight}px` : '0px';
-
-    // If the more button is not visible we don't need to process anything.
+    const showMoreButton = containerEl.scrollHeight > containerEl.clientHeight;
+    const containerHeight = containerEl.clientHeight;
+    const chips = Array.from(layoutEl.children);
+    moreBtnEl.style.display = showMoreButton ? 'block' : 'none';
+    layoutEl.style.minHeight = showMoreButton ? `${maxContentHeight}px` : '0px';
     if (!showMoreButton) {
       return;
     }
-
-    // Hide or show chips that are hidden due to overflow.
     chips.forEach((child, index) => {
       const isVisible = child.offsetTop + child.clientHeight < containerHeight;
       child.setAttribute('style', `display: ${isVisible ? 'flex' : 'none'};`);
@@ -91,21 +104,17 @@ let ChipLayout = /*#__PURE__*/function (_Component) {
         lastVisibleElement = index;
       }
     });
-
-    // Hide the more button if previous assumption was incorrect.
     if (lastVisibleElement === chips.length - 1) {
-      this.moreButtonRef.style.display = 'none';
+      moreBtnEl.style.display = 'none';
       return;
     }
-
-    // Hide elements so that the 'more button' has enough space.
     chips.slice(0, lastVisibleElement + 1).reverse().every(element => {
       const offsetBottom = element.offsetTop + element.clientHeight;
-      if (this.moreButtonRef.offsetTop > offsetBottom) {
+      if (moreBtnEl.offsetTop > offsetBottom) {
         return true;
       }
-      const buttonSpaceRequired = this.moreButtonRef.clientWidth + variables.gap.big;
-      const elementRight = this.containerRef.clientWidth - (element.offsetLeft + element.clientWidth);
+      const buttonSpaceRequired = moreBtnEl.clientWidth + theme.spacing(2);
+      const elementRight = containerEl.clientWidth - (element.offsetLeft + element.clientWidth);
       const spaceDiff = buttonSpaceRequired - elementRight;
       const remainingChipWidth = element.clientWidth - spaceDiff;
       if (remainingChipWidth > CHIP_MINIMUM_WIDTH) {
@@ -119,61 +128,37 @@ let ChipLayout = /*#__PURE__*/function (_Component) {
       element.setAttribute('style', 'display: none');
       return true;
     });
-  };
-  /**
-   * Renders the component.
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    return /*#__PURE__*/_jsxs("div", {
-      ref: element => {
-        this.containerRef = element;
-      },
-      className: `${styles.container(this.maxContentHeight)} engage__chip-layout`,
-      children: [/*#__PURE__*/_jsx("div", {
-        ref: element => {
-          this.layoutRef = element;
-        },
-        className: styles.layout,
-        children: this.props.children
-      }), /*#__PURE__*/_jsx("div", {
-        ref: element => {
-          this.moreButtonRef = element;
-        },
-        className: styles.moreButtonWrapper,
-        children: /*#__PURE__*/_jsx(RippleButton, {
-          fill: true,
-          type: "plain",
-          className: this.moreButtonStyles,
-          onClick: this.props.handleMoreButton,
-          children: /*#__PURE__*/_jsx(I18n.Text, {
-            string: this.props.moreLabel
-          })
+  }, [maxContentHeight, theme]);
+  const processHiddenElementsDebounced = useMemo(() => debounce(processHiddenElements, 50), [processHiddenElements]);
+  useEffect(() => {
+    processHiddenElementsDebounced();
+  }, [children, pathname, maxRows, invertMoreButton, moreLabel, handleMoreButton, processHiddenElementsDebounced]);
+  useEffect(() => () => {
+    processHiddenElementsDebounced.cancel();
+  }, [processHiddenElementsDebounced]);
+  const moreButtonClassName = invertMoreButton ? classes.moreButtonInverted : classes.moreButton;
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    className: cx(classes.container, 'engage__chip-layout'),
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: layoutRef,
+      className: classes.layout,
+      children: children
+    }), /*#__PURE__*/_jsx("div", {
+      ref: moreButtonRef,
+      className: classes.moreButtonWrapper,
+      children: /*#__PURE__*/_jsx(RippleButton, {
+        fill: true,
+        type: "plain",
+        className: moreButtonClassName,
+        onClick: handleMoreButton,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: moreLabel
         })
-      })]
-    });
-  };
-  return _createClass(ChipLayout, [{
-    key: "maxContentHeight",
-    get: function () {
-      // 8 -> container padding.
-      return CHIP_ROW_HEIGHT * this.props.maxRows + 8;
-    }
-
-    /**
-     * Returns the more button styles.
-     * @return {string} The store button class name.
-     */
-  }, {
-    key: "moreButtonStyles",
-    get: function () {
-      if (this.props.invertMoreButton) {
-        return styles.moreButtonInverted;
-      }
-      return styles.moreButton;
-    }
-  }]);
-}(Component);
+      })
+    })]
+  });
+};
 ChipLayout.defaultProps = {
   children: null,
   handleMoreButton: () => {},
@@ -182,4 +167,4 @@ ChipLayout.defaultProps = {
   moreLabel: 'more',
   pathname: ''
 };
-export default ChipLayout;
+export default /*#__PURE__*/memo(ChipLayout);

package/components/ConditionalWrapper/ConditionalWrapper.d.ts

@@ -0,0 +1,25 @@
+export default ConditionalWrapper;
+/**
+ * Conditionally wraps React children with another component.
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */
+declare function ConditionalWrapper({ condition, wrapper, wrapperFalsy, children, }: Object): JSX;
+declare namespace ConditionalWrapper {
+    namespace propTypes {
+        let condition: PropTypes.Validator<boolean>;
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let wrapper: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        let wrapperFalsy: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+    }
+    namespace defaultProps {
+        let children_1: null;
+        export { children_1 as children };
+        let wrapper_1: null;
+        export { wrapper_1 as wrapper };
+        let wrapperFalsy_1: null;
+        export { wrapperFalsy_1 as wrapperFalsy };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=ConditionalWrapper.d.ts.map

package/components/ConditionalWrapper/ConditionalWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalWrapper.d.ts","sourceRoot":"","sources":["../../../components/ConditionalWrapper/ConditionalWrapper.jsx"],"names":[],"mappings":";AAEA;;;;GAIG;AACH,qFAHW,MAAM,GACJ,GAAG,CAaf;;;;;;;;;;;;;;;;;sBAlBqB,YAAY"}

package/components/ConditionalWrapper/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ConditionalWrapper } from "./ConditionalWrapper";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/ConditionalWrapper/index.js"],"names":[],"mappings":""}

package/components/ConnectedReactPortal/index.d.ts

@@ -0,0 +1,27 @@
+export default ConnectedReactPortal;
+/**
+ * The connected react portal component rendering its children into a react portal node.
+ * @param {Object} props The component props
+ * @param {boolean} props.isOpened Whether the portal is open
+ * @param {React.ReactNode} props.children The children to render inside the portal
+ * @private
+ * @returns {React.ReactPortal|null}
+ */
+declare function ConnectedReactPortal({ children, isOpened }: {
+    isOpened: boolean;
+    children: React.ReactNode;
+}): React.ReactPortal | null;
+declare namespace ConnectedReactPortal {
+    namespace propTypes {
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let isOpened: PropTypes.Requireable<boolean>;
+    }
+    namespace defaultProps {
+        let children_1: null;
+        export { children_1 as children };
+        let isOpened_1: boolean;
+        export { isOpened_1 as isOpened };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/ConnectedReactPortal/index.jsx"],"names":[],"mappings":";AAKA;;;;;;;GAOG;AACH,8DALG;IAAuB,QAAQ,EAAvB,OAAO;IACgB,QAAQ,EAA/B,KAAK,CAAC,SAAS;CACvB,GACU,KAAK,CAAC,WAAW,GAAC,IAAI,CAMlC;;;;;;;;;;;;;sBAjBqB,YAAY"}

package/components/Footer/Footer.d.ts

@@ -0,0 +1,18 @@
+export default Footer;
+/**
+ * The footer component.
+ * @param {Object} props The component props.
+ * @returns {JSX.Element}
+ */
+declare function Footer({ children }: Object): JSX.Element;
+declare namespace Footer {
+    namespace propTypes {
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }
+    namespace defaultProps {
+        let children_1: null;
+        export { children_1 as children };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=Footer.d.ts.map

package/components/Footer/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../components/Footer/Footer.jsx"],"names":[],"mappings":";AAqBA;;;;GAIG;AACH,sCAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CA4DvB;;;;;;;;;;sBAnFqB,YAAY"}

package/components/Footer/Footer.js

@@ -1,22 +1,33 @@
 import React, { useRef, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
 import { UIEvents } from '@shopgate/engage/core/events';
-import { getAbsoluteHeight } from '@shopgate/engage/core/helpers';
+import { getAbsoluteHeight, applyScrollContainer } from '@shopgate/engage/core/helpers';
 import { SHEET_EVENTS } from '@shopgate/engage/components';
-import * as classes from "./Footer.style";
 import { handleSafeAreaInsets, updateFooterHeight } from "./helpers";
 import { APP_FOOTER_ID, DATA_IGNORED } from "./constants";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  footer: {
+    bottom: 0,
+    flexShrink: 1,
+    position: applyScrollContainer() ? 'relative' : 'sticky',
+    zIndex: 1
+  }
+}));
 
 /**
  * The footer component.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Footer = ({
   children
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const footerRef = useRef(null);
   const performFooterUpdate = useCallback(() => {
     handleSafeAreaInsets(footerRef.current);
@@ -55,7 +66,7 @@ const Footer = ({
     };
   }, [performFooterUpdate]);
   return /*#__PURE__*/_jsx("div", {
-    className: classNames(classes.footer, 'engage__footer'),
+    className: cx(classes.footer, 'engage__footer'),
     children: /*#__PURE__*/_jsx("div", {
       id: APP_FOOTER_ID,
       ref: footerRef,

package/components/Footer/constants.d.ts

@@ -0,0 +1,3 @@
+export const APP_FOOTER_ID: "AppFooter";
+export const DATA_IGNORED: "data-footer-inset-update-ignore";
+//# sourceMappingURL=constants.d.ts.map

package/components/Footer/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../components/Footer/constants.js"],"names":[],"mappings":"AAAA,4BAA6B,WAAW,CAAC;AACzC,2BAA4B,iCAAiC,CAAC"}

package/components/Footer/helpers.d.ts

@@ -0,0 +1,5 @@
+export function isElementVisible(el: HTMLElement): boolean;
+export function getElementBackgroundColor(container: HTMLElement): string | null;
+export function handleSafeAreaInsets(footerEl: HTMLElement): void;
+export function updateFooterHeight(height: number): void;
+//# sourceMappingURL=helpers.d.ts.map

package/components/Footer/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../components/Footer/helpers.js"],"names":[],"mappings":"AAaO,qCAHI,WAAW,GACT,OAAO,CAwBnB;AAUM,qDAHI,WAAW,GACT,MAAM,GAAC,IAAI,CA+CvB;AA2FM,+CAFI,WAAW,QAqCrB;AAQM,2CAFI,MAAM,QA6BhB"}

package/components/Footer/helpers.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import { logger, isDev } from '@shopgate/engage/core/helpers';
 import { DATA_IGNORED } from "./constants";
 

package/components/Footer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Footer } from "./Footer";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Footer/index.js"],"names":[],"mappings":""}

package/components/Form/Builder/Builder.constants.d.ts

@@ -0,0 +1,14 @@
+export const ELEMENT_TYPE_EMAIL: "email";
+export const ELEMENT_TYPE_PASSWORD: "password";
+export const ELEMENT_TYPE_TEXT: "text";
+export const ELEMENT_TYPE_NUMBER: "number";
+export const ELEMENT_TYPE_SELECT: "select";
+export const ELEMENT_TYPE_MULTISELECT: "multiselect";
+export const ELEMENT_TYPE_COUNTRY: "country";
+export const ELEMENT_TYPE_PROVINCE: "province";
+export const ELEMENT_TYPE_CHECKBOX: "checkbox";
+export const ELEMENT_TYPE_RADIO: "radio";
+export const ELEMENT_TYPE_DATE: "date";
+export const ELEMENT_TYPE_PHONE: "phone";
+export const ELEMENT_TYPE_PHONE_PICKER: "phone_picker";
+//# sourceMappingURL=Builder.constants.d.ts.map

package/components/Form/Builder/Builder.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Builder.constants.d.ts","sourceRoot":"","sources":["../../../../components/Form/Builder/Builder.constants.js"],"names":[],"mappings":"AAAA,iCAAkC,OAAO,CAAC;AAC1C,oCAAqC,UAAU,CAAC;AAChD,gCAAiC,MAAM,CAAC;AACxC,kCAAmC,QAAQ,CAAC;AAC5C,kCAAmC,QAAQ,CAAC;AAC5C,uCAAwC,aAAa,CAAC;AACtD,mCAAoC,SAAS,CAAC;AAC9C,oCAAqC,UAAU,CAAC;AAChD,oCAAqC,UAAU,CAAC;AAChD,iCAAkC,OAAO,CAAC;AAC1C,gCAAiC,MAAM,CAAC;AACxC,iCAAkC,OAAO,CAAC;AAC1C,wCAAyC,cAAc,CAAC"}