@shopgate/pwa-common 7.30.0-alpha.9 → 7.30.0-beta.2

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,

package/components/RangeSlider/components/Handle/index.js

@@ -11,20 +11,22 @@ import styles from "./style";
  * @param {Object} props.classNames (Optional) An additional style classes for the handle.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const RangeSliderHandle = ({
   active,
   index,
   onTouchStart,
   classNames
-}) => /*#__PURE__*/React.createElement("div", {
+}) => /*#__PURE__*/_jsx("div", {
   className: `${classNames.handleOuter || ''} ${styles}`,
   style: {
     zIndex: Number(active) || 0
   },
-  onTouchStart: event => onTouchStart(event, index)
-}, /*#__PURE__*/React.createElement("div", {
-  className: classNames.handleInner || ''
-}));
+  onTouchStart: event => onTouchStart(event, index),
+  children: /*#__PURE__*/_jsx("div", {
+    className: classNames.handleInner || ''
+  })
+});
 RangeSliderHandle.defaultProps = {
   active: false,
   classNames: {}