@shopgate/pwa-common 7.30.3 → 7.31.0-alpha.1

package/components/Link/index.js

@@ -1,100 +1,91 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import "core-js/modules/es.string.replace.js";
-import React, { Component } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { hasWebBridge } from '@shopgate/engage/core';
+import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./connector";
-import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  link: {
+    padding: 0,
+    margin: 0,
+    border: 'none',
+    textAlign: 'left',
+    alignItems: 'stretch',
+    width: '100%',
+    cursor: 'pointer'
+  }
+});
 
 /**
  * Link component.
  * @param {Object} props Props for the component.
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let Link = /*#__PURE__*/function (_Component) {
-  function Link(...args) {
-    var _this;
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    /**
-     * Opens the link.
-     * @param {Event} e An event object.
-     */
-    _this.handleOpenLink = e => {
-      e.preventDefault();
-      if (_this.props.disabled) {
-        return;
+const Link = ({
+  children,
+  historyPush,
+  historyReplace,
+  href,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel,
+  className,
+  disabled,
+  replace,
+  role,
+  state,
+  tabIndex,
+  tag,
+  target
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const handleOpenLink = useCallback(e => {
+    e.preventDefault();
+    if (disabled) {
+      return;
+    }
+    const params = {
+      pathname: href,
+      state: {
+        ...(state || {}),
+        ...(target ? {
+          target
+        } : {})
       }
-      const params = {
-        pathname: _this.props.href,
-        state: {
-          ...(_this.props.state || {}),
-          ...(_this.props.target ? {
-            target: _this.props.target
-          } : {})
-        }
-      };
-
-      // setTimeout prevents double click while VoiceOver is active
-      setTimeout(() => {
-        if (_this.props.replace) {
-          _this.props.historyReplace(params);
-        } else {
-          _this.props.historyPush(params);
-        }
-      }, 0);
     };
-    /**
-     * key listener for screen readers
-     * @param {Object} event The event object
-     */
-    _this.handleKeyDown = event => {
-      if (event.key === 'Enter' || event.key === ' ') {
-        _this.handleOpenLink(event);
+    setTimeout(() => {
+      if (replace) {
+        historyReplace(params);
+      } else {
+        historyPush(params);
       }
-    };
-    return _this;
-  }
-  _inheritsLoose(Link, _Component);
-  var _proto = Link.prototype;
-  /**
-   * Renders the component.
-   * @returns {JSX.Element}
-   */
-  _proto.render = function render() {
-    const {
-      tag,
-      className,
-      href,
-      children,
-      role,
-      'aria-label': ariaLabel,
-      'aria-hidden': ariaHidden,
-      tabIndex
-    } = this.props;
-    let Tag = tag;
-    if (!hasWebBridge() && tag === 'a') {
-      /**
-       * Don't use link tags on apps. Sometimes links are really opened since the preventDefault
-       * doesn't work as expected which results in white pages.
-       */
-      Tag = 'span';
+    }, 0);
+  }, [disabled, href, historyPush, historyReplace, replace, state, target]);
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      handleOpenLink(event);
     }
-    return /*#__PURE__*/_jsx(Tag, {
-      className: `${styles} ${className} common__link`,
-      onClick: this.handleOpenLink,
-      onKeyDown: this.handleKeyDown,
-      role: role,
-      "data-test-id": `link: ${href}`,
-      "aria-label": ariaLabel,
-      tabIndex: tabIndex,
-      "aria-hidden": ariaHidden,
-      href: href && Tag === 'a' ? href : null,
-      children: children
-    });
-  };
-  return Link;
-}(Component);
+  }, [handleOpenLink]);
+  let Tag = tag;
+  if (!hasWebBridge() && tag === 'a') {
+    Tag = 'span';
+  }
+  return /*#__PURE__*/_jsx(Tag, {
+    className: cx(classes.link, className, 'common__link'),
+    onClick: handleOpenLink,
+    onKeyDown: handleKeyDown,
+    role: role,
+    "data-test-id": `link: ${href}`,
+    "aria-label": ariaLabel,
+    tabIndex: tabIndex,
+    "aria-hidden": ariaHidden,
+    href: href && Tag === 'a' ? href : null,
+    children: children
+  });
+};
 Link.defaultProps = {
   'aria-hidden': null,
   'aria-label': null,

package/components/List/components/Item/index.js

@@ -1,30 +1,39 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  item: {
+    display: 'block',
+    position: 'relative'
+  },
+  unselected: {
+    zIndex: 1
+  },
+  selected: {
+    zIndex: 2
+  }
+});
 
 /**
  * The ListItem component.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const ListItem = ({
   children,
   className,
   isSelected,
   role
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (!React.Children.count(children)) {
     return null;
   }
-  let classes = styles.item;
-  if (className) {
-    classes += ` ${className}`;
-  }
-
-  // Add selected or unselected styling.
-  classes += ` common__list__list-item ${isSelected ? styles.selected : styles.unselected}`;
   return /*#__PURE__*/_jsx("li", {
-    className: classes,
+    className: cx(classes.item, className, 'common__list__list-item', isSelected ? classes.selected : classes.unselected),
     "data-test-id": "listItem",
     role: role,
     children: children

package/components/List/spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import React from 'react';
 import { shallow } from 'enzyme';
 import List from "./index";
@@ -24,5 +23,4 @@ describe('<List />', () => {
     expect(wrapper.find(List.Item).length).toBe(0);
     expect(console.error).toHaveBeenCalledTimes(1);
   });
-});
-/* eslint-enable no-console */
+});

package/components/Loading/index.d.ts

@@ -0,0 +1,6 @@
+export default Loading;
+/**
+ * @return {null}
+ */
+declare function Loading(): null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Loading/index.jsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,4BAFY,IAAI,CAEU"}

package/components/Modal/index.js

@@ -2,8 +2,39 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
 import { useTrackModalState } from '@shopgate/engage/a11y/hooks';
-import classNames from 'classnames';
-import styles from "./style";
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  container: {
+    position: 'fixed',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    overflow: 'hidden',
+    zIndex: 2000
+  },
+  layout: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%'
+  },
+  content: {
+    position: 'relative',
+    maxWidth: '100vw',
+    maxHeight: '100vh',
+    paddingTop: 'var(--safe-area-inset-top)',
+    paddingBottom: 'var(--safe-area-inset-bottom)',
+    overflowY: 'scroll',
+    [responsiveMediaQuery('>xs', {
+      webOnly: true
+    })]: {
+      overflowY: 'initial'
+    }
+  }
+});
 
 /**
  * The Modal component.
@@ -11,24 +42,27 @@ import styles from "./style";
  * @param {Object} props.classes The component classes.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Modal = /*#__PURE__*/forwardRef(({
   children,
-  classes,
+  classes: customClasses,
   ...props
 }, ref) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   // Track modal visibility for accessibility purposes.
   useTrackModalState();
   return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx("div", {
-    className: classNames(styles.container, classes?.container, 'common__modal'),
+    className: cx(classes.container, customClasses?.container, 'common__modal'),
     role: "alertdialog",
     "aria-modal": true,
     ...props,
     ref: ref,
     children: /*#__PURE__*/_jsx("div", {
-      className: classNames(styles.layout, classes?.layout),
+      className: cx(classes.layout, customClasses?.layout),
       children: /*#__PURE__*/_jsx("div", {
-        className: classNames(styles.content, classes?.content),
+        className: cx(classes.content, customClasses?.content),
         children: children
       })
     })

package/components/Picker/index.js

@@ -1,197 +1,21 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ConnectedReactPortal } from '@shopgate/engage/components';
-import { withForwardedRef } from '@shopgate/engage/core';
-import PickerModal from "./components/Modal";
-import PickerButton from "./components/Button";
-import PickerList from "./components/List";
+import React, { useEffect, forwardRef } from 'react';
+import { logger } from '@shopgate/engage/core/helpers';
+import { Picker } from '@shopgate/engage/components';
 
 /**
- * Converts an item of any type (e.g. string or number)
- * to an object representation containing value and label properties.
- * @param {*} item - An item of any type.
- * @returns {Object} An object representation of the item.
- * @deprecated Use Picker from engage instead
+ * @deprecated Use `import { Picker } from '@shopgate/engage/components'` instead.
+ * @param {Object} props The component props.
+ * @param {Object} ref Forwarded ref.
+ * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const normalizeItem = item => {
-  if (item !== null && typeof item !== 'undefined') {
-    const itemDefaults = {
-      value: item.value || item,
-      label: item.label || item.value || item,
-      disabled: item.disabled || false
-    };
-    if (typeof item === 'object') {
-      return {
-        ...itemDefaults,
-        ...item
-      };
-    }
-    return itemDefaults;
-  }
-  return null;
-};
-
-/**
- * Finds an item index in a list of items by value.
- * @param {Array} items - The list of items.
- * @param {*} value - The value to look for.
- * @returns {number} The found item index or undefined.
- */
-const findItemIndexByValue = (items, value) => items.map(normalizeItem).findIndex(item => item.value === value);
-
-/**
- * The picker component (acts like a selectbox).
- * @deprecated Will be remove in Engage v7.0.0.
- *             Please use `import { Picker } from '@shopgate/engage/components'` instead.
- */
-let Picker = /*#__PURE__*/function (_Component) {
-  /**
-   * The constructor.
-   * @param {Object} props - The component props.
-   */
-  function Picker(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    /**
-     * Triggers the onChange callback if the selected value has changed.
-     * @param {Object} nextValue - The value the user picked.
-     */
-    _this.triggerChangeCallback = nextValue => {
-      const nextSelectedIndex = findItemIndexByValue(_this.props.items, nextValue);
-      if (nextSelectedIndex > -1 && _this.state.selectedIndex !== nextSelectedIndex) {
-        _this.props.onChange(nextValue);
-      }
-      _this.props.onSelect(nextValue);
-    };
-    /**
-     * Triggers the onChange callback if the selected value has changed.
-     * @param {Object} nextOpenState - The value the user picked.
-     */
-    _this.triggerCloseCallback = nextOpenState => {
-      if (_this.state.isOpen && !nextOpenState) {
-        _this.props.onClose();
-      }
-    };
-    /**
-     * Gets called when a new item is selected
-     * @param {string} value - The selected value.
-     */
-    _this.handleItemSelect = value => {
-      _this.triggerChangeCallback(value);
-      _this.setState({
-        selectedIndex: findItemIndexByValue(_this.props.items, value)
-      });
-    };
-    /**
-     * Sets or toggles the open state of the component.
-     * @param {boolean} [open] New open state.
-     */
-    _this.toggleOpenState = open => {
-      _this.setState(({
-        isOpen
-      }) => {
-        const nextIsOpen = typeof open === 'boolean' ? open : !isOpen;
-        _this.triggerCloseCallback(nextIsOpen);
-        return {
-          isOpen: nextIsOpen
-        };
-      });
-    };
-    _this.state = {
-      selectedIndex: findItemIndexByValue(props.items, props.value),
-      isOpen: props.isOpen
-    };
-    return _this;
-  }
-
-  /**
-   * Updates the selected item when the value prop changes.
-   * @param {Object} nextProps - The next props.
-   */
-  _inheritsLoose(Picker, _Component);
-  var _proto = Picker.prototype;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    // Only update if a value is present and also changed.
-    if (!this.selectedItem || nextProps.value !== this.selectedItem.value) {
-      this.setState({
-        selectedIndex: findItemIndexByValue(nextProps.items, nextProps.value)
-      });
-    }
-    if (this.props.isOpen !== nextProps.isOpen && nextProps.isOpen !== this.state.isOpen) {
-      this.setState({
-        isOpen: nextProps.isOpen
-      });
-    }
-  }
-
-  /**
-   * Getter for the selected item.
-   */;
-  /**
-   * Renders the component.
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const hasSelection = !!this.selectedItem;
-    const buttonValue = hasSelection ? this.selectedItem.label : '';
-    const buttonLabel = hasSelection ? this.props.label : this.props.placeholder;
-    const buttonProps = {
-      ...this.props.buttonProps,
-      label: buttonLabel,
-      value: buttonValue,
-      disabled: this.props.disabled,
-      openList: this.props.disabled ? null : () => {
-        this.toggleOpenState(true);
-      }
-    };
-    const modalProps = {
-      isOpen: this.state.isOpen,
-      duration: this.props.duration,
-      onClose: () => this.toggleOpenState(false)
-    };
-    const listProps = {
-      items: this.props.items.map(normalizeItem),
-      selectedIndex: this.state.selectedIndex,
-      onSelect: this.handleItemSelect
-    };
-    return /*#__PURE__*/_jsxs("div", {
-      role: "button",
-      className: `${this.props.className} common__picker`,
-      ref: this.props.forwardedRef,
-      tabIndex: 0,
-      "aria-haspopup": true,
-      children: [/*#__PURE__*/React.createElement(this.props.buttonComponent, buttonProps), /*#__PURE__*/_jsx(ConnectedReactPortal, {
-        isOpened: true,
-        children: /*#__PURE__*/React.createElement(this.props.modalComponent, modalProps, /*#__PURE__*/React.createElement(this.props.listComponent, listProps))
-      })]
-    });
-  };
-  return _createClass(Picker, [{
-    key: "selectedItem",
-    get: function () {
-      return normalizeItem(this.props.items[this.state.selectedIndex]);
-    }
-  }]);
-}(Component);
-Picker.defaultProps = {
-  buttonComponent: PickerButton,
-  buttonProps: {},
-  duration: 300,
-  disabled: false,
-  forwardedRef: null,
-  label: '',
-  listComponent: PickerList,
-  modalComponent: PickerModal,
-  className: '',
-  isOpen: false,
-  items: [],
-  onChange: () => {},
-  onClose: () => {},
-  onSelect: () => {},
-  placeholder: 'Pick ...',
-  value: null
-};
-export default withForwardedRef(Picker);
+import { jsx as _jsx } from "react/jsx-runtime";
+const DeprecatedPicker = /*#__PURE__*/forwardRef((props, ref) => {
+  useEffect(() => {
+    logger.warn('===== Picker deprecated =====\n' + 'The Picker component ' + '(@shopgate/pwa-common/components/Picker) is deprecated.\n' + 'Please use: import { Picker } from \'@shopgate/engage/components\'.\n' + '===================================');
+  }, []);
+  return /*#__PURE__*/_jsx(Picker, {
+    ...props,
+    ref: ref
+  });
+});
+export default DeprecatedPicker;

package/components/Portal/index.d.ts

@@ -0,0 +1,50 @@
+export default Portal;
+/**
+ * The Portal component.
+ */
+declare class Portal extends React.PureComponent<any, any, any> {
+    static propTypes: {
+        name: PropTypes.Validator<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        props: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
+    };
+    static defaultProps: {
+        children: null;
+        props: null;
+    };
+    /**
+     * Constructor.
+     * @param {Object} props The component props.
+     */
+    constructor(props: Object);
+    state: {
+        hasError: boolean;
+    };
+    components: any[];
+    /**
+     * Catches errors.
+     * @param {Error} error The caught error.
+     * @param {Object} info The stacktrace info.
+     */
+    componentDidCatch(error: Error, info: Object): void;
+    /**
+     * Returns the portal components.
+     * @param {Object} props - The props to pass to the component.
+     * @return {Array}
+     */
+    getRenderedComponents: (props: Object) => any[];
+    /**
+     * Returns the portal components.
+     * @param {string} name Name of the portal position
+     * @return {Array}
+     */
+    getPortalComponents: (name: string) => any[];
+    /**
+     * Renders the component.
+     * @return {JSX}
+     */
+    render(): JSX;
+}
+import React from 'react';
+import PropTypes from 'prop-types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Portal/index.jsx"],"names":[],"mappings":";AAOA;;GAEG;AACH;IACE;;;;MAIE;IAEF;;;MAGE;IAEF;;;OAGG;IACH,mBAFW,MAAM,EAUhB;IALC;;MAEC;IAED,kBAAsD;IAGxD;;;;OAIG;IACH,yBAHW,KAAK,QACL,MAAM,QAKhB;IAED;;;;OAIG;IACH,wBAAyB,OAHd,MAGmB,WAa5B;IAEF;;;;OAIG;IACH,sBAAuB,MAHZ,MAGgB,WA0CzB;IAEF;;;OAGG;IACH,UAFY,GAAG,CAiCd;CACF;kBAvJ8C,OAAO;sBAChC,YAAY"}