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

package/components/Form/Builder/helpers/iso-3166-2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iso-3166-2.d.ts","sourceRoot":"","sources":["../../../../../components/Form/Builder/helpers/iso-3166-2.js"],"names":[],"mappings":""}

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

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

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

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

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

@@ -0,0 +1,22 @@
+export const TWO_COLUMN_LAYOUT: {
+    [x: string]: {
+        display: string;
+        flexDirection: string;
+        flexWrap: string;
+        margin: number;
+        marginTop: number;
+        marginBottom: number;
+        '>div': {
+            flex: string;
+            padding: string;
+            maxWidth: string;
+        };
+        '>.phonePicker': {
+            marginLeft: number;
+            marginRight: number;
+            flexBasis: string;
+        };
+    };
+};
+export function getOutlinedFormFields(theme: Object): Object;
+//# sourceMappingURL=stylePresets.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stylePresets.d.ts","sourceRoot":"","sources":["../../../../components/Form/Builder/stylePresets.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;EAmBE;AAOK,6CAHI,MAAM,GACJ,MAAM,CA+HjB"}

package/components/Form/Builder/stylePresets.js

@@ -25,7 +25,13 @@ export const TWO_COLUMN_LAYOUT = {
     }
   }
 };
-export const OUTLINED_FORM_FIELDS = {
+
+/**
+ * Outlined form field styles
+ * @param {Object} theme Engage theme from `makeStyles()(theme => …)`.
+ * @returns {Object}
+ */
+export const getOutlinedFormFields = theme => ({
   ' .formHelper': {
     minHeight: 32,
     ' .errorText': {
@@ -51,7 +57,7 @@ export const OUTLINED_FORM_FIELDS = {
   },
   ' .textField, .formElement:not(.radioGroup):not(.checkbox), .phonePicker': {
     paddingBottom: 8,
-    background: `var(--color-background-accent, ${colors.shade8})`,
+    background: 'var(--color-background-accent)',
     padding: 0,
     marginBottom: 32,
     borderTopLeftRadius: 4,
@@ -59,7 +65,7 @@ export const OUTLINED_FORM_FIELDS = {
     borderBottom: `1px solid ${colors.shade12}`
   },
   ' .phonePickerError': {
-    borderBottom: `2px solid var(--color-state-alert, ${colors.error})`
+    borderBottom: `2px solid ${theme.palette.error.main}`
   },
   ' .phonePickerFocused:not(.phonePickerError)': {
     borderBottom: '2px solid var(--color-primary)'
@@ -72,7 +78,7 @@ export const OUTLINED_FORM_FIELDS = {
   ' .textField label': {
     paddingLeft: 17,
     color: 'var(--color-text-low-emphasis)',
-    '.floating': {
+    '&.floating': {
       transform: 'translate3d(3px, -18px, 0) scale3d(0.75, 0.75, 0.75)'
     }
   },
@@ -92,7 +98,7 @@ export const OUTLINED_FORM_FIELDS = {
     ' input, select, svg': {
       opacity: 0.28
     },
-    ' .label': {
+    '&.label': {
       opacity: 0.6
     }
   },
@@ -150,4 +156,4 @@ export const OUTLINED_FORM_FIELDS = {
   ' .placeholder': {
     color: colors.shade12
   }
-};
+});

package/components/Form/Form.d.ts

@@ -0,0 +1,39 @@
+export default Form;
+/**
+ * Form component that handles keyboard submit, next buttons, ...
+ */
+declare class Form extends React.PureComponent<any, any, any> {
+    static propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        className: PropTypes.Requireable<string>;
+        onSubmit: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        className: null;
+        onSubmit: () => void;
+    };
+    /**
+     * Initializes the form component.
+     * @param {Object} props The components props.
+     */
+    constructor(props: Object);
+    formElement: React.RefObject<any>;
+    /**
+     * Handles the form submit.
+     * @param {Object} event The event that caused the submit.
+     */
+    handleSubmit: (event: Object) => void;
+    /**
+     * Handles form submits by key.
+     * @param {Object} event The event that caused the keypress.
+     */
+    handleKeyPress: (event: Object) => void;
+    /**
+     * Renders the component.
+     * @returns {JSX}
+     */
+    render(): JSX;
+}
+import React from 'react';
+import PropTypes from 'prop-types';
+//# sourceMappingURL=Form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../components/Form/Form.jsx"],"names":[],"mappings":";AAIA;;GAEG;AACH;IACE;;;;MAIE;IAEF;;;MAGE;IAEF;;;OAGG;IACH,mBAFW,MAAM,EAKhB;IADC,kCAAoC;IAGtC;;;OAGG;IACH,eAAgB,OAFL,MAEU,UAYnB;IAEF;;;OAGG;IACH,iBAAkB,OAFP,MAEY,UAKrB;IAEF;;;OAGG;IACH,UAFa,GAAG,CAgBf;CACF;kBA5EoC,OAAO;sBACtB,YAAY"}

package/components/Form/index.d.ts

@@ -0,0 +1,4 @@
+export { Builder as FormBuilder } from "./Builder";
+export { default as Form } from "./Form";
+export * as StylePresets from "./Builder/stylePresets";
+//# sourceMappingURL=index.d.ts.map

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

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

package/components/IntersectionVisibility/index.d.ts

@@ -0,0 +1,61 @@
+export default IntersectionVisibility;
+/**
+ * The IntersectionVisibility component.
+ * @example
+ *    <IntersectionVisibility>
+ *       {({ visible, ratio, setRef }) => (
+           <Video autoPlay={visible && ratio > 0.8} ref={setRef} />}
+        )}
+ *     </IntersectionVisibility>
+ */
+declare class IntersectionVisibility extends Component<any, any, any> {
+    /**
+     * Calculate threshold by number of steps
+     * Ex: 5 steps will be [0.20, 0.40, 0.60, 0.80, 1.00]
+     * @param {number} steps .
+     * @returns {number[]}
+     */
+    static buildThresholdList: (steps: number) => number[];
+    static propTypes: {
+        children: PropTypes.Validator<(...args: any[]) => any>;
+        thresholds: PropTypes.Requireable<(number | null | undefined)[]>;
+    };
+    static defaultProps: {
+        thresholds: number[];
+    };
+    /**
+     * Initializes the component state.
+     * @param {Object} props The components props.
+     */
+    constructor(props: Object);
+    state: {
+        visible: boolean;
+        ratio: number;
+        entries: null;
+    };
+    /**
+     * Start the observer when the component is mounted
+     */
+    componentDidMount(): void;
+    io: IntersectionObserver | undefined;
+    /**
+     * @inheritDoc
+     */
+    componentWillUnmount(): void;
+    /**
+     * @param {Object} ref ref
+     */
+    setRef: (ref: Object) => void;
+    node: Object | undefined;
+    /**
+     * @param {IntersectionObserverEntry[]} entries first entry
+     */
+    handleIntersectionEvent: (entries: IntersectionObserverEntry[]) => void;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/IntersectionVisibility/index.jsx"],"names":[],"mappings":";AAIA;;;;;;;;GAQG;AACH;IACE;;;;;OAKG;IACH,4BAA4B,OAHjB,MAGsB,KAFpB,MAAM,EAAE,CAInB;IAEF;;;MAGE;IAEF;;MAEE;IAEF;;;OAGG;IACH,mBAFW,MAAM,EAShB;IALC;;;;MAIC;IAGH;;OAEG;IACH,0BAOC;IANC,qCAEE;IAMJ;;OAEG;IACH,6BAIC;IAED;;OAEG;IACH,SAAU,KAFC,MAEE,UAQX;IAJA,yBAAe;IAMjB;;OAEG;IACH,0BAA2B,SAFhB,yBAAyB,EAEF,UAOhC;IAEF;;OAEG;IACH,UAFa,GAAG,CAAC,OAAO,CAOvB;CACF;0BArGyB,OAAO;sBACX,YAAY"}

package/components/Logo/connector.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("react-redux").InferableComponentEnhancerWithProps<Function & import("react-redux").DispatchProp<import("redux").AnyAction>, {}>;
+export default _default;
+//# sourceMappingURL=connector.d.ts.map

package/components/Logo/connector.d.ts.map

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

package/components/Logo/index.d.ts

@@ -0,0 +1,26 @@
+declare const _default: import("react-redux").ConnectedComponent<{
+    ({ className, onClick, showLogo }: {
+        className: any;
+        onClick: any;
+        showLogo: any;
+    }): JSX;
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        showLogo: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        className: string;
+        onClick: (...args: any[]) => void;
+        showLogo: boolean;
+    };
+}, {
+    className?: string | null | undefined;
+    onClick?: ((...args: any[]) => any) | null | undefined;
+    showLogo?: boolean | null | undefined;
+    context?: import("react-redux/es/components/Context").ReactReduxContextInstance | undefined;
+    store?: import("redux").Store | undefined;
+}>;
+export default _default;
+import PropTypes from 'prop-types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Logo/index.jsx"],"names":[],"mappings":";;;;;QA2BY,GAAG;;;;;;;;;;;;;;;;;;;sBA1BO,YAAY"}

package/components/Logo/index.js

@@ -1,29 +1,50 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import appConfig from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
+import appConfig, { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import noop from 'lodash/noop';
-import styles from "./style";
 import connect from "./connector";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  variables
+} = themeConfig;
+const useStyles = makeStyles()(theme => ({
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    flexGrow: 1
+  },
+  image: {
+    margin: '0 auto',
+    maxHeight: variables.navigator.height,
+    maxWidth: `calc(var(--page-content-width) - ${variables.navigator.height * 3 + theme.spacing(4)}px)`,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }
+}));
 
 /**
  * The Logo component.
  * @return {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Logo = ({
   className,
   onClick,
   showLogo
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (!showLogo) {
     return null;
   }
   return /*#__PURE__*/ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */_jsx("div", {
     onClick: onClick,
-    className: classNames(styles.container, className, 'engage__logo'),
+    className: cx(classes.container, className, 'engage__logo'),
     children: /*#__PURE__*/_jsx("img", {
-      className: styles.image,
+      className: classes.image,
       src: appConfig.logo || appConfig.logoFallback,
       alt: appConfig.shopName
     })

package/components/Menu/components/Item/index.d.ts

@@ -0,0 +1,24 @@
+export default Item;
+/**
+ * The Context Menu Item component.
+ * @param {Object} props The component props.
+ * @returns {JSX.Element}
+ */
+declare function Item({ children, closeMenu, onClick }: Object): JSX.Element;
+declare namespace Item {
+    namespace propTypes {
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let closeMenu: PropTypes.Requireable<(...args: any[]) => any>;
+        let onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace defaultProps {
+        let children_1: null;
+        export { children_1 as children };
+        export function closeMenu_1(): void;
+        export { closeMenu_1 as closeMenu };
+        export function onClick_1(): void;
+        export { onClick_1 as onClick };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=index.d.ts.map

package/components/Menu/components/Item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/Menu/components/Item/index.jsx"],"names":[],"mappings":";AA4BA;;;;GAIG;AACH,wDAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAsCvB;;;;;;;;;;QAUY,oCAAQ;;QACV,kCAAQ;;;;sBA/EG,YAAY"}

package/components/Menu/components/Item/index.js

@@ -2,13 +2,30 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import compose from 'lodash/fp/compose';
 import Glow from '@shopgate/pwa-ui-shared/Glow';
-import { getItemClass } from "./style";
+import Color from 'color';
+import { makeStyles, getCSSCustomProp } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()((theme, {
+  background
+}) => ({
+  item: {
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    padding: theme.spacing(1.75, 2.75),
+    lineHeight: 1,
+    zIndex: 1,
+    cursor: 'pointer',
+    ':hover': {
+      background
+    }
+  }
+}));
 
 /**
  * A delay in ms after that the closeMenu callback gets triggered.
  * @type {number}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const CLOSE_DELAY = 250;
 
 /**
@@ -21,6 +38,16 @@ const Item = ({
   closeMenu,
   onClick
 }) => {
+  let background = themeConfig.colors.shade8;
+  const customPropColor = getCSSCustomProp('--color-primary');
+  if (customPropColor) {
+    background = Color(customPropColor).alpha(0.04).toString();
+  }
+  const {
+    classes
+  } = useStyles({
+    background
+  });
   const handleClick = compose(onClick, () => setTimeout(closeMenu, CLOSE_DELAY));
   const handleKeyPress = useCallback(event => {
     if (event.key === 'Enter' || event.key === ' ') {
@@ -30,7 +57,7 @@ const Item = ({
   }, [handleClick]);
   return /*#__PURE__*/_jsx(Glow, {
     children: /*#__PURE__*/_jsx("div", {
-      className: getItemClass(),
+      className: classes.item,
       onClick: handleClick,
       role: "button",
       "data-test-id": "contextMenuButton",

package/components/Menu/components/Position/index.d.ts

@@ -0,0 +1,27 @@
+export default Position;
+/**
+ * The Context Menu Position component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
+ */
+declare function Position({ children, offset, }: Object): JSX.Element;
+declare namespace Position {
+    namespace propTypes {
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let offset: PropTypes.Requireable<PropTypes.InferProps<{
+            top: PropTypes.Requireable<number>;
+            left: PropTypes.Requireable<number>;
+        }>>;
+    }
+    namespace defaultProps {
+        let children_1: null;
+        export { children_1 as children };
+        export namespace offset_1 {
+            let top: number;
+            let left: number;
+        }
+        export { offset_1 as offset };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=index.d.ts.map

package/components/Menu/components/Position/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/Menu/components/Position/index.jsx"],"names":[],"mappings":";AAYA;;;;GAIG;AACH,iDAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAwCvB;;;;;;;;;;;;;;;;;;;sBAtDqB,YAAY"}

package/components/Menu/components/Position/index.js

@@ -1,70 +1,55 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import clamp from 'lodash/clamp';
-import styles from "./style";
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    position: 'absolute',
+    margin: theme.spacing(1)
+  }
+}));
 
 /**
  * The Context Menu Position component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let Position = /*#__PURE__*/function (_Component) {
-  /**
-   * The Constructor.
-   * @param {Object} props The component props.
-   */
-  function Position(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    _this.elementRef = null;
-    return _this;
-  }
-
-  /**
-   * Calculate and apply the correct menu position after mounting.
-   */
-  _inheritsLoose(Position, _Component);
-  var _proto = Position.prototype;
-  _proto.componentDidMount = function componentDidMount() {
-    const {
-      offset
-    } = this.props;
-
-    // Get ref to the actual child DOM element and calculate bounding rect.
-    const [child] = this.elementRef.childNodes;
+const Position = ({
+  children,
+  offset
+}) => {
+  const theme = useTheme();
+  const {
+    classes
+  } = useStyles();
+  const elementRef = useRef(null);
+  const gap = theme.spacing(1);
+  useEffect(() => {
+    const el = elementRef.current;
+    if (!el) {
+      return;
+    }
+    const [child] = el.childNodes;
+    if (!child) {
+      return;
+    }
     const bounds = child.getBoundingClientRect();
-
-    // Get window dimensions
     const width = window.innerWidth;
     const height = window.innerHeight;
-
-    // Get the outer gap from styles
-    const gap = styles.outerGap;
-
-    // Calculate clamped menu position
     const left = clamp(offset.left, 0, width - bounds.width - gap * 2);
     const top = clamp(offset.top - gap, 0, height - bounds.height - gap * 2);
-
-    // Assign position directly w/o re-rendering the component
-    this.elementRef.style.left = `${left}px`;
-    this.elementRef.style.top = `${top}px`;
-  }
-
-  /**
-   * Renders the component.
-   * @returns {JSX}
-   */;
-  _proto.render = function render() {
-    return /*#__PURE__*/_jsx("div", {
-      ref: ref => {
-        this.elementRef = ref;
-      },
-      className: styles.container,
-      children: this.props.children
-    });
-  };
-  return Position;
-}(Component);
+    el.style.left = `${left}px`;
+    el.style.top = `${top}px`;
+    /* eslint-disable-next-line react-hooks/exhaustive-deps --
+     * match legacy componentDidMount: position once */
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    ref: elementRef,
+    className: classes.container,
+    children: children
+  });
+};
 Position.defaultProps = {
   children: null,
   offset: {

package/components/Menu/index.d.ts

@@ -0,0 +1,29 @@
+export default Menu;
+/**
+ * The Menu component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
+ */
+declare function Menu({ children, contextRef, isOpen, onClose, }: Object): JSX.Element;
+declare namespace Menu {
+    export { Item };
+    export namespace propTypes {
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let contextRef: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
+        let isOpen: PropTypes.Requireable<boolean>;
+        let onClose: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    export namespace defaultProps {
+        let children_1: null;
+        export { children_1 as children };
+        let contextRef_1: null;
+        export { contextRef_1 as contextRef };
+        let isOpen_1: boolean;
+        export { isOpen_1 as isOpen };
+        export function onClose_1(): void;
+        export { onClose_1 as onClose };
+    }
+}
+import Item from './components/Item';
+import PropTypes from 'prop-types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Menu/index.jsx"],"names":[],"mappings":";AAgCA;;;;GAIG;AACH,kEAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAgDvB;;;;;;;;;;;;;;;;QAeU,kCAAQ;;;;iBAzFF,mBAAmB;sBANd,YAAY"}