@shopgate/pwa-common 7.30.0-alpha.8 → 7.30.0-beta.1

package/components/Picker/components/Modal/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -6,62 +7,70 @@ import styles from "./style";
 /**
  * The picker modal.
  */
-class PickerModal extends Component {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let PickerModal = /*#__PURE__*/function (_Component) {
   /**
    * The constructor.
    * @param {Object} props The props.
    */
-  constructor(props) {
-    super(props);
+  function PickerModal(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Closes the modal after the closing animations have finished.
      */
-    this.closeModal = () => {
-      this.setState({
+    _this.closeModal = () => {
+      _this.setState({
         active: false
       });
-      clearTimeout(this.timeout);
-      this.timeout = setTimeout(this.props.onClose, styles.duration);
+      clearTimeout(_this.timeout);
+      _this.timeout = setTimeout(_this.props.onClose, styles.duration);
     };
-    this.timeout = null;
-    this.state = {
+    _this.timeout = null;
+    _this.state = {
       active: true
     };
+    return _this;
   }
 
   /**
    * Update state when isOpen changes.
    * @param {Object} nextProps The next component props.
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(PickerModal, _Component);
+  var _proto = PickerModal.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.isOpen !== nextProps.isOpen) {
       this.setState({
         active: nextProps.isOpen
       });
     }
-  }
+  };
   /**
    * Render all the things!
    * @returns {JSX} The picker modal with the picker list inside.
    */
-  render() {
+  _proto.render = function render() {
     const backgroundClassName = classNames(styles.background.base, {
       [styles.background.inactive]: !this.state.active
     });
     const containerClassName = classNames(styles.container.base, {
       [styles.container.inactive]: !this.state.active
     });
-    return this.props.isOpen ? /*#__PURE__*/React.createElement("div", {
-      className: `${styles.wrapper} common__picker__modal`
-    }, /*#__PURE__*/React.createElement("div", {
-      "aria-hidden": true,
-      className: backgroundClassName,
-      onClick: this.closeModal
-    }), /*#__PURE__*/React.createElement("div", {
-      className: containerClassName
-    }, /*#__PURE__*/React.cloneElement(this.props.children, {
-      onClose: this.closeModal
-    }))) : null;
-  }
-}
+    return this.props.isOpen ? /*#__PURE__*/_jsxs("div", {
+      className: `${styles.wrapper} common__picker__modal`,
+      children: [/*#__PURE__*/_jsx("div", {
+        "aria-hidden": true,
+        className: backgroundClassName,
+        onClick: this.closeModal
+      }), /*#__PURE__*/_jsx("div", {
+        className: containerClassName,
+        children: /*#__PURE__*/React.cloneElement(this.props.children, {
+          onClose: this.closeModal
+        })
+      })]
+    }) : null;
+  };
+  return PickerModal;
+}(Component);
 export default PickerModal;

package/components/Picker/index.js

@@ -1,3 +1,5 @@
+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';
@@ -13,6 +15,7 @@ import PickerList from "./components/List";
  * @returns {Object} An object representation of the item.
  * @deprecated Use Picker from engage instead
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const normalizeItem = item => {
   if (item !== null && typeof item !== 'undefined') {
     const itemDefaults = {
@@ -44,69 +47,73 @@ const findItemIndexByValue = (items, value) => items.map(normalizeItem).findInde
  * @deprecated Will be remove in Engage v7.0.0.
  *             Please use `import { Picker } from '@shopgate/engage/components'` instead.
  */
-class Picker extends Component {
+let Picker = /*#__PURE__*/function (_Component) {
   /**
    * The constructor.
    * @param {Object} props - The component props.
    */
-  constructor(props) {
-    super(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.triggerChangeCallback = nextValue => {
+      const nextSelectedIndex = findItemIndexByValue(_this.props.items, nextValue);
+      if (nextSelectedIndex > -1 && _this.state.selectedIndex !== nextSelectedIndex) {
+        _this.props.onChange(nextValue);
       }
-      this.props.onSelect(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();
+    _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)
+    _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(({
+    _this.toggleOpenState = open => {
+      _this.setState(({
         isOpen
       }) => {
         const nextIsOpen = typeof open === 'boolean' ? open : !isOpen;
-        this.triggerCloseCallback(nextIsOpen);
+        _this.triggerCloseCallback(nextIsOpen);
         return {
           isOpen: nextIsOpen
         };
       });
     };
-    this.state = {
+    _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.
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _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({
@@ -122,15 +129,12 @@ class Picker extends Component {
 
   /**
    * Getter for the selected item.
-   */
-  get selectedItem() {
-    return normalizeItem(this.props.items[this.state.selectedIndex]);
-  }
+   */;
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const hasSelection = !!this.selectedItem;
     const buttonValue = hasSelection ? this.selectedItem.label : '';
     const buttonLabel = hasSelection ? this.props.label : this.props.placeholder;
@@ -153,18 +157,25 @@ class Picker extends Component {
       selectedIndex: this.state.selectedIndex,
       onSelect: this.handleItemSelect
     };
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsxs("div", {
       role: "button",
       className: `${this.props.className} common__picker`,
       ref: this.props.forwardedRef,
       tabIndex: 0,
-      "aria-haspopup": true
-    }, /*#__PURE__*/React.createElement(this.props.buttonComponent, buttonProps), /*#__PURE__*/React.createElement(ConnectedReactPortal, {
-      onClose: () => this.toggleOpenState(false),
-      isOpened: true
-    }, /*#__PURE__*/React.createElement(this.props.modalComponent, modalProps, /*#__PURE__*/React.createElement(this.props.listComponent, listProps))));
-  }
-}
+      "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: {},

package/components/Picker/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Picker from "./index";
 import PickerList from "./components/List";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components');
 jest.mock('@shopgate/engage/core');
 describe('<Picker />', () => {
@@ -21,7 +22,9 @@ describe('<Picker />', () => {
    * @param {Object} props The component props.
    */
   const renderComponent = props => {
-    renderedElement = mount(/*#__PURE__*/React.createElement(Picker, props));
+    renderedElement = mount(/*#__PURE__*/_jsx(Picker, {
+      ...props
+    }));
     renderedInstance = renderedElement.find('Picker').instance();
   };
   beforeEach(() => {

package/components/Portal/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { logger } from '@shopgate/pwa-core/helpers';
@@ -8,19 +9,21 @@ import { componentsConfig } from "../../helpers/config";
 /**
  * The Portal component.
  */
-class Portal extends PureComponent {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Portal = /*#__PURE__*/function (_PureComponent) {
   /**
    * Constructor.
    * @param {Object} props The component props.
    */
-  constructor(_props) {
-    super(_props);
+  function Portal(_props) {
+    var _this;
+    _this = _PureComponent.call(this, _props) || this;
     /**
      * Returns the portal components.
      * @param {Object} props - The props to pass to the component.
      * @return {Array}
      */
-    this.getRenderedComponents = props => {
+    _this.getRenderedComponents = props => {
       const {
         props: propsFromProps,
         ...reducedProps
@@ -29,20 +32,22 @@ class Portal extends PureComponent {
         ...propsFromProps,
         ...reducedProps
       };
-      return this.components.map(({
+      return _this.components.map(({
         PortalComponent,
         key
-      }) => /*#__PURE__*/React.createElement(Suspense, {
-        fallback: /*#__PURE__*/React.createElement(Loading, null),
-        key: key
-      }, /*#__PURE__*/React.createElement(PortalComponent, componentProps)));
+      }) => /*#__PURE__*/_jsx(Suspense, {
+        fallback: /*#__PURE__*/_jsx(Loading, {}),
+        children: /*#__PURE__*/_jsx(PortalComponent, {
+          ...componentProps
+        })
+      }, key));
     };
     /**
      * Returns the portal components.
      * @param {string} name Name of the portal position
      * @return {Array}
      */
-    this.getPortalComponents = name => {
+    _this.getPortalComponents = name => {
       const components = [];
       const portals = portalCollection.getPortals();
       if (!portals) {
@@ -81,10 +86,11 @@ class Portal extends PureComponent {
       });
       return components;
     };
-    this.state = {
+    _this.state = {
       hasError: false
     };
-    this.components = this.getPortalComponents(_props.name);
+    _this.components = _this.getPortalComponents(_props.name);
+    return _this;
   }
 
   /**
@@ -92,17 +98,19 @@ class Portal extends PureComponent {
    * @param {Error} error The caught error.
    * @param {Object} info The stacktrace info.
    */
-  componentDidCatch(error, info) {
+  _inheritsLoose(Portal, _PureComponent);
+  var _proto = Portal.prototype;
+  _proto.componentDidCatch = function componentDidCatch(error, info) {
     this.setState({
       hasError: true
     });
     logger.error(error, info);
-  }
+  };
   /**
    * Renders the component.
    * @return {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       children
     } = this.props;
@@ -135,8 +143,9 @@ class Portal extends PureComponent {
       return renderedComponents;
     }
     return children;
-  }
-}
+  };
+  return Portal;
+}(PureComponent);
 Portal.defaultProps = {
   children: null,
   props: null

package/components/ProductCharacteristics/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import isMatch from 'lodash/isMatch';
@@ -12,23 +13,25 @@ import { isCharacteristicEnabled, getSelectedValue, prepareState, selectCharacte
  * @deprecated Please use the component via
  *            `import { ProductCharacteristics } from '@shopgate/engage/product'`
  */
-class ProductCharacteristics extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let ProductCharacteristics = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(_props) {
-    super(_props);
+  function ProductCharacteristics(_props) {
+    var _this;
+    _this = _Component.call(this, _props) || this;
     /**
      * Sets the refs to the characteristics selects.
      * @param {Object} props The props to check against.
      */
-    this.setRefs = props => {
+    _this.setRefs = props => {
       const {
         variants
       } = props;
       if (variants) {
         variants.characteristics.forEach(char => {
-          this.refsStore[char.id] = /*#__PURE__*/React.createRef();
+          _this.refsStore[char.id] = /*#__PURE__*/React.createRef();
         });
       }
     };
@@ -36,23 +39,23 @@ class ProductCharacteristics extends Component {
      * Checks if all selections have been made.
      * @return {boolean}
      */
-    this.checkSelection = () => {
+    _this.checkSelection = () => {
       const {
         characteristics
-      } = this.state;
+      } = _this.state;
       const {
         variants,
         variantId
-      } = this.props;
+      } = _this.props;
       if (!variants) {
         return true;
       }
       const filteredValues = Object.keys(characteristics).filter(key => !!characteristics[key]);
       const selected = !!(filteredValues.length === variants.characteristics.length && variantId);
       if (!selected) {
-        const firstUnselected = this.findUnselectedCharacteristic();
+        const firstUnselected = _this.findUnselectedCharacteristic();
         if (firstUnselected) {
-          const ref = this.refsStore[firstUnselected.id];
+          const ref = _this.refsStore[firstUnselected.id];
 
           // Focus the item for screen readers and broadcast a related live message.
           ref.current.focus();
@@ -74,22 +77,22 @@ class ProductCharacteristics extends Component {
               behavior: 'smooth'
             });
           }
-          this.setState({
+          _this.setState({
             highlight: firstUnselected.id
           });
         }
       }
       return selected;
     };
-    this.checkSelectedCharacteristics = () => {
+    _this.checkSelectedCharacteristics = () => {
       const {
         characteristics
-      } = this.state;
+      } = _this.state;
       const {
         variantId,
         variants,
         finishTimeout
-      } = this.props;
+      } = _this.props;
       if (!variants) {
         return;
       }
@@ -105,23 +108,23 @@ class ProductCharacteristics extends Component {
         return;
       }
       setTimeout(() => {
-        this.props.navigate(products[0].id);
+        _this.props.navigate(products[0].id);
       }, finishTimeout);
     };
     /**
      * Stores a selected characteristic into the local state.
      * @param {Object} selection The selected item.
      */
-    this.handleSelection = selection => {
+    _this.handleSelection = selection => {
       const {
         variants,
         setCharacteristics
-      } = this.props;
+      } = _this.props;
       const {
         id,
         value
       } = selection;
-      this.setState(({
+      _this.setState(({
         characteristics
       }) => {
         const state = prepareState(id, value, characteristics, variants.characteristics, variants.products);
@@ -132,7 +135,7 @@ class ProductCharacteristics extends Component {
           },
           highlight: null
         };
-      }, this.checkSelectedCharacteristics);
+      }, _this.checkSelectedCharacteristics);
     };
     /**
      * @param {Object} selections The selections stored in the state.
@@ -142,7 +145,7 @@ class ProductCharacteristics extends Component {
      * @param {string|null} selectedValue selectedValue
      * @return {Array}
      */
-    this.buildValues = (selections, charId, values, charIndex, selectedValue) => {
+    _this.buildValues = (selections, charId, values, charIndex, selectedValue) => {
       // If this is the first characteristic then all values are selectable.
       if (charIndex === 0) {
         return values.map(value => ({
@@ -153,7 +156,7 @@ class ProductCharacteristics extends Component {
       }
       const {
         variants
-      } = this.props;
+      } = _this.props;
       const subset = {};
       Object.keys(selections).forEach((item, index) => {
         if (index < charIndex) {
@@ -183,29 +186,32 @@ class ProductCharacteristics extends Component {
     /**
      * Resets the highlight state
      */
-    this.resetHighlight = () => {
-      this.setState({
+    _this.resetHighlight = () => {
+      _this.setState({
         highlight: null
       });
     };
-    this.refsStore = {};
-    this.state = {
+    _this.refsStore = {};
+    _this.state = {
       highlight: null,
       characteristics: selectCharacteristics(_props)
     };
-    this.setRefs(_props);
-    _props.conditioner.addConditioner('product-variants', this.checkSelection);
+    _this.setRefs(_props);
+    _props.conditioner.addConditioner('product-variants', _this.checkSelection);
+    return _this;
   }
 
   /** @inheritDoc */
-  componentDidMount() {
+  _inheritsLoose(ProductCharacteristics, _Component);
+  var _proto = ProductCharacteristics.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     this.checkSelectedCharacteristics();
   }
 
   /**
    * @param {Object} nextProps The next component props.
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+   */;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (!this.props.variants && nextProps.variants) {
       // Initialize refs and characteristics when the variants prop was updated with a valid value.
       this.setRefs(nextProps);
@@ -213,12 +219,12 @@ class ProductCharacteristics extends Component {
         characteristics: selectCharacteristics(nextProps)
       }, this.checkSelectedCharacteristics);
     }
-  }
+  };
   /**
    * Finds the first unselected characteristic.
    * @return {Object|null}
    */
-  findUnselectedCharacteristic() {
+  _proto.findUnselectedCharacteristic = function findUnselectedCharacteristic() {
     const {
       characteristics
     } = this.state;
@@ -231,8 +237,8 @@ class ProductCharacteristics extends Component {
 
   /**
    * @return {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     const {
       characteristics
     } = this.state;
@@ -242,29 +248,31 @@ class ProductCharacteristics extends Component {
     if (!variants) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(VariantsContext.Provider, {
-      value: this.state
-    }, variants.characteristics.map((char, index) => {
-      const disabled = !isCharacteristicEnabled(characteristics, index);
-      const selected = getSelectedValue(char.id, characteristics);
-      const values = this.buildValues(characteristics, char.id, char.values, index, selected);
-      return this.props.render({
-        charRef: this.refsStore[char.id],
-        disabled,
-        highlight: this.state.highlight === char.id,
-        id: char.id,
-        key: char.id,
-        label: char.label,
-        swatch: !!char.swatch,
-        // BETA
-        select: this.handleSelection,
-        selected,
-        values,
-        resetHighlight: this.resetHighlight
-      });
-    }));
-  }
-}
+    return /*#__PURE__*/_jsx(VariantsContext.Provider, {
+      value: this.state,
+      children: variants.characteristics.map((char, index) => {
+        const disabled = !isCharacteristicEnabled(characteristics, index);
+        const selected = getSelectedValue(char.id, characteristics);
+        const values = this.buildValues(characteristics, char.id, char.values, index, selected);
+        return this.props.render({
+          charRef: this.refsStore[char.id],
+          disabled,
+          highlight: this.state.highlight === char.id,
+          id: char.id,
+          key: char.id,
+          label: char.label,
+          swatch: !!char.swatch,
+          // BETA
+          select: this.handleSelection,
+          selected,
+          values,
+          resetHighlight: this.resetHighlight
+        });
+      })
+    });
+  };
+  return ProductCharacteristics;
+}(Component);
 ProductCharacteristics.defaultProps = {
   finishTimeout: 0,
   variantId: null,