@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/components/RadioCard/RadioCard.js

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import Card from '@shopgate/pwa-ui-shared/Card';
 import { useRadioGroup } from "../RadioGroup";
 import Radio from "../Radio";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -37,9 +38,10 @@ const styles = {
 const CardComponent = ({
   children,
   className
-}) => /*#__PURE__*/React.createElement(Card, {
-  className: classNames(styles.card, className)
-}, children);
+}) => /*#__PURE__*/_jsx(Card, {
+  className: classNames(styles.card, className),
+  children: children
+});
 CardComponent.defaultProps = {
   children: null,
   className: null
@@ -76,25 +78,27 @@ const RadioCard = ({
       } = radioGroup);
     }
   }
-  return /*#__PURE__*/React.createElement(RenderCard, {
-    className: classes.root
-  }, /*#__PURE__*/React.createElement(Radio, {
-    name: name,
-    value: value,
-    onChange: onChange,
-    disabled: disabled,
-    checked: checked,
-    attributes: attributes,
-    classes: {
-      root: styles.radio
-    }
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: `${name}_${value}`,
-    className: classNames(styles.content, {
-      [styles.contentDisabled]: disabled,
-      [classes.disabled]: disabled
-    })
-  }, children));
+  return /*#__PURE__*/_jsxs(RenderCard, {
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx(Radio, {
+      name: name,
+      value: value,
+      onChange: onChange,
+      disabled: disabled,
+      checked: checked,
+      attributes: attributes,
+      classes: {
+        root: styles.radio
+      }
+    }), /*#__PURE__*/_jsx("label", {
+      htmlFor: `${name}_${value}`,
+      className: classNames(styles.content, {
+        [styles.contentDisabled]: disabled,
+        [classes.disabled]: disabled
+      }),
+      children: children
+    })]
+  });
 };
 RadioCard.defaultProps = {
   children: null,

package/components/RadioGroup/RadioGroup.js

@@ -1,8 +1,9 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { css } from 'glamor';
 import classNames from 'classnames';
 import RadioGroupContext from "./RadioGroup.context";
+import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   root: css({
     display: 'flex',
@@ -34,17 +35,20 @@ const RadioGroup = ({
       onChange(event, event.target.value);
     }
   }, [onChange]);
-  return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
-    value: {
-      name,
-      onChange: handleChange,
-      value,
-      disabled
-    }
-  }, /*#__PURE__*/React.createElement(Component, {
-    role: "radiogroup",
-    className: classNames(styles.root, classes.root)
-  }, children));
+  const contextValue = useMemo(() => ({
+    name,
+    onChange: handleChange,
+    value,
+    disabled
+  }), [disabled, handleChange, name, value]);
+  return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(Component, {
+      role: "radiogroup",
+      className: classNames(styles.root, classes.root),
+      children: children
+    })
+  });
 };
 RadioGroup.defaultProps = {
   classes: {},

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
 import cxs from 'classnames';
@@ -13,6 +12,7 @@ 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 = props => {
   const {
     active,
@@ -27,12 +27,14 @@ const RangeSliderHandle = props => {
   const eventHandler = {
     [useMouseEvents ? 'onMouseDown' : 'onTouchStart']: event => onTouchStart(event, index)
   };
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsx("div", {
     className: cxs(classNames.handleOuter, styles, 'engage__range-slider__handle'),
-    style: style
-  }, eventHandler), /*#__PURE__*/React.createElement("div", {
-    className: classNames.handleInner
-  }));
+    style: style,
+    ...eventHandler,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classNames.handleInner
+    })
+  });
 };
 RangeSliderHandle.defaultProps = {
   active: false,

package/components/RangeSlider/index.js

@@ -1,3 +1,5 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cxs from 'classnames';
@@ -9,21 +11,23 @@ import { generateLinearEasingCallback, generateExponentialEasingCallback, getRan
 /**
  * The range slider component.
  */
-class RangeSlider extends PureComponent {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let RangeSlider = /*#__PURE__*/function (_PureComponent) {
   /**
    * Constructor
    * @param {Object} props The component properties
    */
-  constructor(props) {
-    super(props);
+  function RangeSlider(props) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
     /**
      * Processes touch start events on handles.
      * @param {Object} event The touch event
      * @param {number} index The index of the touched handle.
      */
-    this.handleTouchStart = (event, index) => {
-      this.addEventListeners();
-      this.draggedHandle = index;
+    _this.handleTouchStart = (event, index) => {
+      _this.addEventListeners();
+      _this.draggedHandle = index;
 
       // Calculate the relative offset to the handles center
       const handleDOMElement = event.target;
@@ -32,147 +36,113 @@ class RangeSlider extends PureComponent {
       // ... and calculate its absolute center.
       const handleCenterX = handleRect.left + handleDOMElement.offsetWidth / 2;
       // Store the signed distanced between the current touch offset and the handle center.
-      this.touchOffset = getTouchPositionX(event) - handleCenterX;
+      _this.touchOffset = getTouchPositionX(event) - handleCenterX;
     };
     /**
      * Processes move events on handles.
      * @param {Object} event The touch event
      */
-    this.handleTouchMove = event => {
-      if (this.props.min === this.props.max) {
+    _this.handleTouchMove = event => {
+      if (_this.props.min === _this.props.max) {
         return;
       }
-      if (this.draggedHandle === null) {
+      if (_this.draggedHandle === null) {
         return;
       }
       const {
         width: offsetWidth,
         left: offsetLeft
-      } = this.domElement.current.getBoundingClientRect();
+      } = _this.domElement.current.getBoundingClientRect();
 
       // Calculate the absolute offset where the element was touched...
-      let deltaX = getTouchPositionX(event) - offsetLeft - this.touchOffset;
+      let deltaX = getTouchPositionX(event) - offsetLeft - _this.touchOffset;
 
       // ...and convert it into a relative value between [0...1].
       deltaX = Math.max(0, Math.min(1, deltaX / offsetWidth));
       const stateUpdate = {};
-      if (this.draggedHandle === 1) {
+      if (_this.draggedHandle === 1) {
         // Right handle dragged
-        if (this.state.rangeMin < deltaX) {
+        if (_this.state.rangeMin < deltaX) {
           stateUpdate.rangeMax = Math.min(1, deltaX);
-          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMax - this.state.rangeMax);
+          _this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMax - _this.state.rangeMax);
         } else {
           // Not in valid range, swap handles
-          this.draggedHandle = 0;
-          stateUpdate.rangeMax = this.state.rangeMin;
+          _this.draggedHandle = 0;
+          stateUpdate.rangeMax = _this.state.rangeMin;
           stateUpdate.rangeMin = deltaX;
-          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMin - this.state.rangeMin);
+          _this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMin - _this.state.rangeMin);
         }
-      } else if (this.draggedHandle === 0) {
+      } else if (_this.draggedHandle === 0) {
         // Left handle dragged
-        if (this.state.rangeMax > deltaX) {
+        if (_this.state.rangeMax > deltaX) {
           stateUpdate.rangeMin = Math.max(0, deltaX);
-          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMin - this.state.rangeMin);
+          _this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMin - _this.state.rangeMin);
         } else {
           // Not in valid range, swap handles
-          this.draggedHandle = 1;
-          stateUpdate.rangeMin = this.state.rangeMax;
+          _this.draggedHandle = 1;
+          stateUpdate.rangeMin = _this.state.rangeMax;
           stateUpdate.rangeMax = deltaX;
-          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMax - this.state.rangeMax);
+          _this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMax - _this.state.rangeMax);
         }
       }
-      this.draggedHandlePixelOffset *= offsetWidth;
-      this.setState(stateUpdate, this.triggerChangeCallback);
+      _this.draggedHandlePixelOffset *= offsetWidth;
+      _this.setState(stateUpdate, _this.triggerChangeCallback);
     };
     /**
      * Processes global touch end events for handles.
      * @param {Object} e The touch event
      */
-    this.handleTouchEnd = () => {
-      this.removeEventListeners();
-      this.touchOffset = 0;
-      this.draggedHandle = null;
+    _this.handleTouchEnd = () => {
+      _this.removeEventListeners();
+      _this.touchOffset = 0;
+      _this.draggedHandle = null;
     };
     /**
      * Processes outer range touch end events.
      * @param {Object} event The touch event
      */
-    this.handleRangeTouch = event => {
+    _this.handleRangeTouch = event => {
       const {
         width: offsetWidth,
         left: offsetLeft
-      } = this.domElement.current.getBoundingClientRect();
+      } = _this.domElement.current.getBoundingClientRect();
       const dx = (getTouchPositionX(event) - offsetLeft) / offsetWidth;
-      const d0 = Math.abs(this.state.rangeMin - dx);
-      const d1 = Math.abs(this.state.rangeMax - dx);
+      const d0 = Math.abs(_this.state.rangeMin - dx);
+      const d1 = Math.abs(_this.state.rangeMax - dx);
       if (d0 < d1) {
-        this.draggedHandle = 0;
+        _this.draggedHandle = 0;
       } else {
-        this.draggedHandle = 1;
+        _this.draggedHandle = 1;
       }
-      this.handleTouchMove(event);
+      _this.handleTouchMove(event);
     };
-    /**
-     * Processes the input field values.
-     * @param {Object} event The change event.
-     */
-    this.handleInputChange = event => {
-      const {
-        max
-      } = this.props;
-      const {
-        value,
-        id
-      } = event.target;
-      const delta = Math.max(0, Math.min(1, value / (max / 100)));
-      const state = id === 'price_from' ? {
-        rangeMin: delta
-      } : {
-        rangeMax: delta
-      };
-      this.setState(state);
-    };
-    this.draggedHandle = null; // 0 for left handle, 1 for right handle or null
-    this.domElement = /*#__PURE__*/React.createRef();
-    this.touchOffset = 0;
-    this.draggedHandlePixelOffset = 0; // The absolute pixel delta of the last handle move event.
+    _this.draggedHandle = null; // 0 for left handle, 1 for right handle or null
+    _this.domElement = /*#__PURE__*/React.createRef();
+    _this.touchOffset = 0;
+    _this.draggedHandlePixelOffset = 0; // The absolute pixel delta of the last handle move event.
 
-    this.state = this.getRange(props);
-    this.useMouseEvents = !isTouchDevice();
+    _this.state = _this.getRange(props);
+    _this.useMouseEvents = !isTouchDevice();
+    return _this;
   }
 
   /**
    * Updates the component properties.
    * @param {Object} newProps The new component properties.
    */
-  UNSAFE_componentWillReceiveProps(newProps) {
+  _inheritsLoose(RangeSlider, _PureComponent);
+  var _proto = RangeSlider.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(newProps) {
     this.setState(this.getRange(newProps));
   }
 
   /**
    * Get the easing function.
-   */
-  get ease() {
-    return {
-      linear: generateLinearEasingCallback(this.props.resolution),
-      exponential: generateExponentialEasingCallback(this.props.factor)
-    }[this.props.easing];
-  }
-
-  /**
-   * Get the function to invert an eased value to it's original value.
-   */
-  get invertedEase() {
-    return {
-      linear: generateLinearEasingCallback(this.props.resolution),
-      exponential: generateExponentialEasingCallback(1 / this.props.factor)
-    }[this.props.easing];
-  }
-
+   */;
   /**
    * Adds event listeners
    */
-  addEventListeners() {
+  _proto.addEventListeners = function addEventListeners() {
     if (this.useMouseEvents) {
       document.addEventListener('mouseup', this.handleTouchEnd);
       document.addEventListener('mousemove', this.handleTouchMove);
@@ -184,8 +154,8 @@ class RangeSlider extends PureComponent {
 
   /**
    * Removes event listeners
-   */
-  removeEventListeners() {
+   */;
+  _proto.removeEventListeners = function removeEventListeners() {
     if (this.useMouseEvents) {
       document.removeEventListener('mouseup', this.handleTouchEnd);
       document.removeEventListener('mousemove', this.handleTouchMove);
@@ -199,8 +169,8 @@ class RangeSlider extends PureComponent {
    * Get range min and max from props.
    * @param {Object} props The component props.
    * @returns {Object} The new state
-   */
-  getRange(props) {
+   */;
+  _proto.getRange = function getRange(props) {
     const {
       value,
       min,
@@ -210,11 +180,11 @@ class RangeSlider extends PureComponent {
       rangeMin: this.invertedEase(getRelativeValue(value[0], min, max)),
       rangeMax: this.invertedEase(getRelativeValue(value[1], min, max))
     };
-  }
+  };
   /**
    * Calls the change callback in case of a state update.
    */
-  triggerChangeCallback() {
+  _proto.triggerChangeCallback = function triggerChangeCallback() {
     const {
       value,
       onChange,
@@ -233,39 +203,63 @@ class RangeSlider extends PureComponent {
   /**
    * Renders the component.
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     const {
       classNames,
       animationSpeed
     } = this.props;
     const speed = Math.round(1000 / animationSpeed * this.draggedHandlePixelOffset);
     const rangeStyle = getRangeStyle(this.state.rangeMin, this.state.rangeMax, speed > 10 ? speed : 0);
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: cxs(classNames.container, 'engage__range-slider'),
       onMouseDown: this.handleRangeTouch,
-      "aria-hidden": true
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cxs(classNames.outerRange, styles.outerRange),
-      ref: this.domElement
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cxs(classNames.range, styles.range),
-      style: rangeStyle
-    }, /*#__PURE__*/React.createElement(Handle, {
-      index: 0,
-      onTouchStart: this.handleTouchStart,
-      active: this.draggedHandle === 0,
-      classNames: classNames,
-      useMouseEvents: this.useMouseEvents
-    }), /*#__PURE__*/React.createElement(Handle, {
-      index: 1,
-      onTouchStart: this.handleTouchStart,
-      active: this.draggedHandle === 1,
-      classNames: classNames,
-      useMouseEvents: this.useMouseEvents
-    }))));
-  }
-}
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx("div", {
+        className: cxs(classNames.outerRange, styles.outerRange),
+        ref: this.domElement,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: cxs(classNames.range, styles.range),
+          style: rangeStyle,
+          children: [/*#__PURE__*/_jsx(Handle, {
+            index: 0,
+            onTouchStart: this.handleTouchStart,
+            active: this.draggedHandle === 0,
+            classNames: classNames,
+            useMouseEvents: this.useMouseEvents
+          }), /*#__PURE__*/_jsx(Handle, {
+            index: 1,
+            onTouchStart: this.handleTouchStart,
+            active: this.draggedHandle === 1,
+            classNames: classNames,
+            useMouseEvents: this.useMouseEvents
+          })]
+        })
+      })
+    });
+  };
+  return _createClass(RangeSlider, [{
+    key: "ease",
+    get: function () {
+      return {
+        linear: generateLinearEasingCallback(this.props.resolution),
+        exponential: generateExponentialEasingCallback(this.props.factor)
+      }[this.props.easing];
+    }
+
+    /**
+     * Get the function to invert an eased value to it's original value.
+     */
+  }, {
+    key: "invertedEase",
+    get: function () {
+      return {
+        linear: generateLinearEasingCallback(this.props.resolution),
+        exponential: generateExponentialEasingCallback(1 / this.props.factor)
+      }[this.props.easing];
+    }
+  }]);
+}(PureComponent);
 RangeSlider.defaultProps = {
   animationSpeed: 500,
   classNames: {},

package/components/RangeSlider/spec.js

@@ -1,3 +1,4 @@
+/* eslint-disable function-call-argument-newline */
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import RangeSlider from "./index";
@@ -9,6 +10,7 @@ import { generateLinearEasingCallback, generateExponentialEasingCallback, getAbs
  * @param {number} pageX the x page offset of the simulated touch event
  * @returns {Object} the new fake event containing only the properties required for testing.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const createTouchEvent = pageX => {
   // Simulate a handle of 16px width.
   const simulatedHandleWidth = 16;
@@ -75,7 +77,7 @@ const simulateInputTest = (pxWidth, pxOffset, min, max, value, easing, resolutio
       testCallback(config, from, to);
     }
   };
-  const wrapper = mount(/*#__PURE__*/React.createElement(RangeSlider, {
+  const wrapper = mount(/*#__PURE__*/_jsx(RangeSlider, {
     min: config.min,
     max: config.max,
     value: config.initialValue,
@@ -112,7 +114,7 @@ describe.skip('<RangeSlider />', () => {
    */
 
   it('renders with boundaries', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(RangeSlider, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(RangeSlider, {
       min: 0,
       max: 100
     }));
@@ -120,12 +122,12 @@ describe.skip('<RangeSlider />', () => {
     expect(wrapper.find(RangeSliderHandle).length).toBe(2);
   });
   it('renders without boundaries', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(RangeSlider, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(RangeSlider, {}));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(RangeSliderHandle).length).toBe(2);
   });
   it('renders without a value pair', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(RangeSlider, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(RangeSlider, {
       value: [10, 50]
     }));
     expect(wrapper).toMatchSnapshot();
@@ -168,7 +170,7 @@ describe.skip('<RangeSlider />', () => {
   it('emits onChange if the outer range was touched', () => {
     // eslint-disable-next-line require-jsdoc
     const callback = value => expect(value).toEqual([-80, 0]);
-    const wrapper = mount(/*#__PURE__*/React.createElement(RangeSlider, {
+    const wrapper = mount(/*#__PURE__*/_jsx(RangeSlider, {
       min: -100,
       max: 100,
       value: [0, 0],
@@ -187,4 +189,5 @@ describe.skip('<RangeSlider />', () => {
     });
     inst.handleRangeTouch(touchEvent);
   });
-});
+});
+/* eslint-enable function-call-argument-newline */

package/components/ScrollHeader/index.js

@@ -28,6 +28,7 @@ import { root, scrolledIn, scrolledOut, transition } from "./style";
  * @param {React.Ref<HTMLDivElement>} ref   Forwarded ref to the header `<div>`.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function ScrollHeaderBase({
   className,
   children,
@@ -57,13 +58,14 @@ function ScrollHeaderBase({
     }
     onChange(!shouldHideHeader);
   }, [onChange, shouldHideHeader]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     ref: ref,
     className: classNames(root, transition, className, {
       [classNames(scrolledIn, classes?.scrolledIn)]: !shouldHideHeader,
       [classNames(scrolledOut, classes?.scrolledOut)]: shouldHideHeader
-    })
-  }, children);
+    }),
+    children: children
+  });
 }
 
 /* eslint-enable react/prop-types */

package/components/SheetDrawer/index.js

@@ -1,9 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import { useTrackModalState } from '@shopgate/engage/a11y/hooks';
 import { Sheet } from '@shopgate/engage/components';
+import { jsx as _jsx } from "react/jsx-runtime";
 const node = document.getElementById('portals');
 
 /**
@@ -13,8 +13,9 @@ const node = document.getElementById('portals');
 function SheetDrawer(props) {
   // Track modal visibility for accessibility purposes.
   useTrackModalState(props.isOpen);
-  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Sheet, _extends({}, props, {
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(Sheet, {
+    ...props,
     className: classNames(props.className, 'engage__sheet-drawer')
-  })), node);
+  }), node);
 }
 export default SheetDrawer;