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

package/components/Picker/components/List/index.js

@@ -10,6 +10,7 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @returns {JSX} The button component.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const PickerList = props => {
   const {
     items,
@@ -30,22 +31,24 @@ const PickerList = props => {
       return searchLabel.includes(searchValue);
     });
   }, [items, query]);
-  return /*#__PURE__*/React.createElement("ul", {
-    className: "engage__picker_list"
-  }, filteredItems.map((item, currentIndex) => /*#__PURE__*/React.createElement("li", {
-    key: item.value,
-    className: classNames({
-      [styles.active]: currentIndex === selectedIndex
-    })
-  }, /*#__PURE__*/React.createElement("button", {
-    className: styles.button,
-    disabled: item.disabled,
-    onClick: () => {
-      onSelect(item.value);
-      onClose();
-    },
-    type: "button"
-  }, item.label))));
+  return /*#__PURE__*/_jsx("ul", {
+    className: "engage__picker_list",
+    children: filteredItems.map((item, currentIndex) => /*#__PURE__*/_jsx("li", {
+      className: classNames({
+        [styles.active]: currentIndex === selectedIndex
+      }),
+      children: /*#__PURE__*/_jsx("button", {
+        className: styles.button,
+        disabled: item.disabled,
+        onClick: () => {
+          onSelect(item.value);
+          onClose();
+        },
+        type: "button",
+        children: item.label
+      })
+    }, item.value))
+  });
 };
 PickerList.defaultProps = {
   onClose: () => {},

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,45 +7,50 @@ 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
     });
@@ -54,17 +60,20 @@ class PickerModal extends Component {
     if (!this.props.isOpen) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${styles.wrapper} engage__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
-    })));
-  }
-}
+    return /*#__PURE__*/_jsxs("div", {
+      className: `${styles.wrapper} engage__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
+        })
+      })]
+    });
+  };
+  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';
@@ -12,6 +14,7 @@ import PickerList from "./components/List";
  * @param {*} item - An item of any type.
  * @returns {Object} An object representation of the item.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const normalizeItem = item => {
   if (item !== null && typeof item !== 'undefined') {
     const itemDefaults = {
@@ -41,69 +44,73 @@ const findItemIndexByValue = (items, value) => items.map(normalizeItem).findInde
 /**
  * The picker component (acts like a selectbox).
  */
-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({
@@ -119,15 +126,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;
@@ -150,18 +154,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} engage__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');
 describe('<Picker />', () => {
   let renderedElement;
@@ -20,7 +21,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/PickerUtilize/components/Button/index.js

@@ -7,20 +7,24 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Button = ({
   disabled,
   label,
   openList,
   value
-}) => /*#__PURE__*/React.createElement("button", {
+}) => /*#__PURE__*/_jsxs("button", {
   className: `${disabled ? styles.buttonDisabled : styles.button}`,
   onClick: openList,
-  type: "button"
-}, /*#__PURE__*/React.createElement("span", {
-  className: styles.label
-}, label), value && /*#__PURE__*/React.createElement("span", {
-  className: styles.value
-}, value));
+  type: "button",
+  children: [/*#__PURE__*/_jsx("span", {
+    className: styles.label,
+    children: label
+  }), value && /*#__PURE__*/_jsx("span", {
+    className: styles.value,
+    children: value
+  })]
+});
 Button.defaultProps = {
   disabled: false,
   openList: () => {}

package/components/PickerUtilize/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { SheetList, Picker as BasePicker, Sheet } from '@shopgate/engage/components';
@@ -10,64 +10,73 @@ import styles from "./style";
  * The template version of the Picker component.
  * @param {Object} props The same component props as in the base Picker component.
  */
-class PickerUtilize extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let PickerUtilize = /*#__PURE__*/function (_Component) {
   /**
    * Constructor
    * @param {Object} props Props of the component
    */
-  constructor(props) {
-    super(props);
+  function PickerUtilize(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Focuses the picker button for screen readers.
      */
-    this.onDidOpen = () => {
-      this.props.setViewAriaHidden(true);
-      if (this.firstSelectableItemRef.current) {
-        this.firstSelectableItemRef.current.focus();
+    _this.onDidOpen = () => {
+      _this.props.setViewAriaHidden(true);
+      if (_this.firstSelectableItemRef.current) {
+        _this.firstSelectableItemRef.current.focus();
       }
     };
     /**
      * Focuses the first selectable item for screen readers.
      */
-    this.onClose = () => {
-      this.props.setViewAriaHidden(false);
-      if (this.pickerRef.current) {
-        this.pickerRef.current.focus();
+    _this.onClose = () => {
+      _this.props.setViewAriaHidden(false);
+      if (_this.pickerRef.current) {
+        _this.pickerRef.current.focus();
       }
     };
-    this.modalComponent = sheetProps => /*#__PURE__*/React.createElement(Sheet, _extends({}, this.props.sheetProps, sheetProps, {
-      title: this.props.label,
-      onDidOpen: this.onDidOpen
-    }));
-    this.pickerRef = /*#__PURE__*/React.createRef();
-    this.firstSelectableItemRef = /*#__PURE__*/React.createRef();
-    this.listComponent = prps => /*#__PURE__*/React.createElement(SheetList, null, prps.items.map((item, index) => /*#__PURE__*/React.createElement(SheetList.Item, {
-      key: item.value,
-      title: item.label,
-      onClick: () => {
-        setTimeout(() => {
-          prps.onSelect(item.value);
-          prps.onClose();
-        }, this.props.clickDelay);
-      },
-      isDisabled: item.disabled,
-      isSelected: index === prps.selectedIndex,
-      rightComponent: item.rightComponent,
-      testId: item.label,
-      ref: index === prps.selectedIndex ? this.firstSelectableItemRef : null
-    })));
+    _this.modalComponent = sheetProps => /*#__PURE__*/_jsx(Sheet, {
+      ..._this.props.sheetProps,
+      ...sheetProps,
+      title: _this.props.label,
+      onDidOpen: _this.onDidOpen
+    });
+    _this.pickerRef = /*#__PURE__*/React.createRef();
+    _this.firstSelectableItemRef = /*#__PURE__*/React.createRef();
+    _this.listComponent = prps => /*#__PURE__*/_jsx(SheetList, {
+      children: prps.items.map((item, index) => /*#__PURE__*/_jsx(SheetList.Item, {
+        title: item.label,
+        onClick: () => {
+          setTimeout(() => {
+            prps.onSelect(item.value);
+            prps.onClose();
+          }, _this.props.clickDelay);
+        },
+        isDisabled: item.disabled,
+        isSelected: index === prps.selectedIndex,
+        rightComponent: item.rightComponent,
+        testId: item.label,
+        ref: index === prps.selectedIndex ? _this.firstSelectableItemRef : null
+      }, item.value))
+    });
+    return _this;
   }
+  _inheritsLoose(PickerUtilize, _Component);
+  var _proto = PickerUtilize.prototype;
   /**
    * Render
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       hasButton,
       sheetProps: ignore,
       ...restProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(BasePicker, _extends({}, restProps, {
+    return /*#__PURE__*/_jsx(BasePicker, {
+      ...restProps,
       className: `${hasButton ? styles : ''} engage__picker-utilize`,
       modalComponent: this.modalComponent,
       buttonProps: this.props.buttonProps,
@@ -75,9 +84,10 @@ class PickerUtilize extends Component {
       listComponent: this.listComponent,
       onClose: this.onClose,
       ref: this.pickerRef
-    }));
-  }
-}
+    });
+  };
+  return PickerUtilize;
+}(Component);
 PickerUtilize.defaultProps = {
   buttonComponent: null,
   buttonProps: {},
@@ -89,8 +99,11 @@ PickerUtilize.defaultProps = {
   hasButton: true,
   sheetProps: {}
 };
-export default props => /*#__PURE__*/React.createElement(ViewContext.Consumer, null, ({
-  setAriaHidden
-}) => /*#__PURE__*/React.createElement(PickerUtilize, _extends({}, props, {
-  setViewAriaHidden: setAriaHidden
-})));
+export default props => /*#__PURE__*/_jsx(ViewContext.Consumer, {
+  children: ({
+    setAriaHidden
+  }) => /*#__PURE__*/_jsx(PickerUtilize, {
+    ...props,
+    setViewAriaHidden: setAriaHidden
+  })
+});

package/components/PickerUtilize/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Picker from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components/View');
 jest.mock('@shopgate/engage/components', () => {
   // eslint-disable-next-line require-jsdoc
@@ -24,7 +25,7 @@ jest.mock('@shopgate/engage/components', () => {
 describe('<Picker />', () => {
   it('should render the picker', () => {
     const label = 'Picker label';
-    const wrapper = mount(/*#__PURE__*/React.createElement(Picker, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Picker, {
       label: label
     }));
     expect(wrapper).toMatchSnapshot();

package/components/QuantityInput/QuantityInput.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useRef, useState, useCallback, useLayoutEffect, useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
@@ -9,6 +8,7 @@ import { parseFloatString, formatFloat } from "./helper";
  * A Quantity Input with unit support.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const QuantityInput = /*#__PURE__*/forwardRef(({
   className,
   onChange,
@@ -88,9 +88,9 @@ const QuantityInput = /*#__PURE__*/forwardRef(({
     });
   }, [inputRef]);
   const displayedValue = !isFocused && unit ? `${inputValue} ${unit}` : inputValue;
-  return /*#__PURE__*/React.createElement("input", _extends({
-    ref: inputRef
-  }, inputProps, {
+  return /*#__PURE__*/_jsx("input", {
+    ref: inputRef,
+    ...inputProps,
     inputMode: maxDecimals > 0 ? 'decimal' : 'numeric'
     /* Pattern signals some browsers to use specialized keyboard (if inputmode not supported */,
     pattern: maxDecimals > 0 ? '[0-9.,]*' : '[0–9]*',
@@ -107,7 +107,7 @@ const QuantityInput = /*#__PURE__*/forwardRef(({
         inputRef.current.focus();
       }
     }
-  }));
+  });
 });
 QuantityInput.defaultProps = {
   className: '',

package/components/QuantityLabel/QuantityLabel.js

@@ -6,6 +6,7 @@ import { formatFloat } from "../QuantityInput/helper";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const QuantityLabel = ({
   value,
   maxDecimals,
@@ -16,9 +17,10 @@ const QuantityLabel = ({
     const formatted = formatFloat(value, maxDecimals);
     return unit ? `${formatted} ${unit}` : formatted;
   }, [maxDecimals, unit, value]);
-  return /*#__PURE__*/React.createElement("span", {
-    className: className
-  }, output);
+  return /*#__PURE__*/_jsx("span", {
+    className: className,
+    children: output
+  });
 };
 QuantityLabel.defaultProps = {
   className: '',

package/components/Radio/Radio.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -7,6 +6,7 @@ import CheckedIcon from '@shopgate/pwa-ui-shared/icons/RadioCheckedIcon';
 import UncheckedIcon from '@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';
 import { Ripple } from '@shopgate/engage/components';
 import { useRadioGroup } from "../RadioGroup";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     display: 'inline-flex',
@@ -81,30 +81,34 @@ const Radio = ({
       } = radioGroup);
     }
   }
-  return /*#__PURE__*/React.createElement("span", {
-    className: classNames(styles.root, classes.root)
-  }, /*#__PURE__*/React.createElement(Ripple, {
-    className: styles.ripple,
-    color: "var(--color-primary)"
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    className: styles.input,
-    type: "radio",
-    name: name,
-    value: valueProp,
-    checked: checked,
-    onChange: onChange,
-    disabled: disabledProp,
-    id: `${name}_${valueProp}`
-  }, attributes)), /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.radioContainer, {
-      [styles.radioDisabled]: disabledProp,
-      [classes.disabled]: disabledProp
+  return /*#__PURE__*/_jsx("span", {
+    className: classNames(styles.root, classes.root),
+    children: /*#__PURE__*/_jsxs(Ripple, {
+      className: styles.ripple,
+      color: "var(--color-primary)",
+      children: [/*#__PURE__*/_jsx("input", {
+        className: styles.input,
+        type: "radio",
+        name: name,
+        value: valueProp,
+        checked: checked,
+        onChange: onChange,
+        disabled: disabledProp,
+        id: `${name}_${valueProp}`,
+        ...attributes
+      }), /*#__PURE__*/_jsxs("div", {
+        className: classNames(styles.radioContainer, {
+          [styles.radioDisabled]: disabledProp,
+          [classes.disabled]: disabledProp
+        }),
+        children: [checked && /*#__PURE__*/_jsx(CheckedIcon, {
+          className: classNames(styles.radio, styles.radioChecked, classes.radioChecked, 'checkedIcon')
+        }), !checked && /*#__PURE__*/_jsx(UncheckedIcon, {
+          className: classNames(styles.radio, classes.radioUnchecked, 'uncheckedIcon')
+        })]
+      })]
     })
-  }, checked && /*#__PURE__*/React.createElement(CheckedIcon, {
-    className: classNames(styles.radio, styles.radioChecked, classes.radioChecked, 'checkedIcon')
-  }), !checked && /*#__PURE__*/React.createElement(UncheckedIcon, {
-    className: classNames(styles.radio, classes.radioUnchecked, 'uncheckedIcon')
-  }))));
+  });
 };
 Radio.defaultProps = {
   classes: {},