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

package/components/Link/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { Disconnected as Link } from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Link />', () => {
   const historyPush = jest.fn();
   const historyReplace = jest.fn();
@@ -16,21 +17,23 @@ describe('<Link />', () => {
     jest.useRealTimers();
   });
   it('renders with children', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Link, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Link, {
       href: pathname,
       historyPush: historyPush,
-      historyReplace: historyReplace
-    }, /*#__PURE__*/React.createElement("span", null)));
+      historyReplace: historyReplace,
+      children: /*#__PURE__*/_jsx("span", {})
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('span').length).toBe(1);
   });
   it('handles a push', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Link, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Link, {
       href: pathname,
       state: state,
       historyPush: historyPush,
-      historyReplace: historyReplace
-    }, /*#__PURE__*/React.createElement("span", null)));
+      historyReplace: historyReplace,
+      children: /*#__PURE__*/_jsx("span", {})
+    }));
     wrapper.find('div').simulate('click');
     jest.runAllTimers();
     expect(historyPush).toHaveBeenLastCalledWith({
@@ -39,13 +42,14 @@ describe('<Link />', () => {
     });
   });
   it('handles a replace', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Link, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Link, {
       href: pathname,
       historyPush: historyPush,
       historyReplace: historyReplace,
       state: state,
-      replace: true
-    }, /*#__PURE__*/React.createElement("span", null)));
+      replace: true,
+      children: /*#__PURE__*/_jsx("span", {})
+    }));
     wrapper.find('div').simulate('click');
     jest.runAllTimers();
     expect(historyReplace).toHaveBeenLastCalledWith({

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

@@ -6,6 +6,7 @@ import styles from "./style";
  * The ListItem component.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ListItem = ({
   children,
   className,
@@ -22,11 +23,12 @@ const ListItem = ({
 
   // Add selected or unselected styling.
   classes += ` common__list__list-item ${isSelected ? styles.selected : styles.unselected}`;
-  return /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/_jsx("li", {
     className: classes,
     "data-test-id": "listItem",
-    role: role
-  }, children);
+    role: role,
+    children: children
+  });
 };
 ListItem.defaultProps = {
   className: null,

package/components/List/index.js

@@ -7,14 +7,16 @@ import ListItem from "./components/Item";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const List = ({
   children,
   className,
   role
-}) => /*#__PURE__*/React.createElement("ul", {
+}) => /*#__PURE__*/_jsx("ul", {
   className: `${className} common_list`,
-  role: role
-}, children);
+  role: role,
+  children: children
+});
 List.Item = ListItem;
 List.defaultProps = {
   className: '',

package/components/List/spec.js

@@ -2,27 +2,24 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import List from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 console.error = jest.fn();
 describe('<List />', () => {
-  const children = [/*#__PURE__*/React.createElement(List.Item, {
-    key: "0"
-  }), /*#__PURE__*/React.createElement(List.Item, {
-    key: "1"
-  }), /*#__PURE__*/React.createElement(List.Item, {
-    key: "2"
-  })];
+  const children = [/*#__PURE__*/_jsx(List.Item, {}, "0"), /*#__PURE__*/_jsx(List.Item, {}, "1"), /*#__PURE__*/_jsx(List.Item, {}, "2")];
   beforeEach(() => {
     jest.clearAllMocks();
   });
   it('renders with children', () => {
     const numChildren = children.length;
-    const wrapper = shallow(/*#__PURE__*/React.createElement(List, null, children));
+    const wrapper = shallow(/*#__PURE__*/_jsx(List, {
+      children: children
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(List.Item).length).toBe(numChildren);
     expect(console.error).not.toHaveBeenCalled();
   });
   it('renders without children', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(List, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(List, {}));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(List.Item).length).toBe(0);
     expect(console.error).toHaveBeenCalledTimes(1);

package/components/Loading/index.js

@@ -1,7 +1,5 @@
-import React, { Fragment } from 'react';
-
 /**
  * @return {null}
  */
-const Loading = () => /*#__PURE__*/React.createElement(Fragment, null, null);
+const Loading = () => null;
 export default Loading;

package/components/Modal/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
@@ -12,6 +11,7 @@ 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,
@@ -19,17 +19,20 @@ const Modal = /*#__PURE__*/forwardRef(({
 }, ref) => {
   // Track modal visibility for accessibility purposes.
   useTrackModalState();
-  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx("div", {
     className: classNames(styles.container, classes?.container, 'common__modal'),
     role: "alertdialog",
-    "aria-modal": true
-  }, props, {
-    ref: ref
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.layout, classes?.layout)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.content, classes?.content)
-  }, children))), document.getElementById('portals'));
+    "aria-modal": true,
+    ...props,
+    ref: ref,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classNames(styles.layout, classes?.layout),
+      children: /*#__PURE__*/_jsx("div", {
+        className: classNames(styles.content, classes?.content),
+        children: children
+      })
+    })
+  }), document.getElementById('portals'));
 });
 Modal.defaultProps = {
   children: null,

package/components/ModalContainer/spec.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-unused-vars */
+/* eslint-disable no-unused-vars, jsx-a11y/control-has-associated-label */
 import React from 'react';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
@@ -9,6 +9,7 @@ import ModalContainer from "./index";
 
 // const store = configureStore({ modal: modalReducer });
 // Replacement for commented out configureStore()
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const store = {};
 jest.mock('redux-logger', () => ({
   createLogger: () => () => next => action => next(action)
@@ -25,17 +26,18 @@ const MockModal = ({
   onConfirm,
   // eslint-disable-line react/prop-types
   onDismiss // eslint-disable-line react/prop-types
-}) => /*#__PURE__*/React.createElement("div", {
-  className: "modal"
-}, /*#__PURE__*/React.createElement("button", {
-  className: "confirmBtn",
-  onClick: onConfirm,
-  type: "button"
-}), /*#__PURE__*/React.createElement("button", {
-  className: "dismissBtn",
-  onClick: onDismiss,
-  type: "button"
-}));
+}) => /*#__PURE__*/_jsxs("div", {
+  className: "modal",
+  children: [/*#__PURE__*/_jsx("button", {
+    className: "confirmBtn",
+    onClick: onConfirm,
+    type: "button"
+  }), /*#__PURE__*/_jsx("button", {
+    className: "dismissBtn",
+    onClick: onDismiss,
+    type: "button"
+  })]
+});
 describe.skip('<ModalContainer />', () => {
   let renderedElement;
   const {
@@ -47,13 +49,15 @@ describe.skip('<ModalContainer />', () => {
    * The rendered component.
    */
   const renderComponent = () => {
-    renderedElement = mount(/*#__PURE__*/React.createElement(Provider, {
-      store: store
-    }, /*#__PURE__*/React.createElement("div", {
-      id: "container"
-    }, /*#__PURE__*/React.createElement(ModalContainer, {
-      component: MockModal
-    }))));
+    renderedElement = mount(/*#__PURE__*/_jsx(Provider, {
+      store: store,
+      children: /*#__PURE__*/_jsx("div", {
+        id: "container",
+        children: /*#__PURE__*/_jsx(ModalContainer, {
+          component: MockModal
+        })
+      })
+    }));
   };
   beforeEach(() => {
     // Reset the modals state before each test.
@@ -108,4 +112,4 @@ describe.skip('<ModalContainer />', () => {
   });
 });
 
-/* eslint-enable no-unused-vars */
+/* eslint-enable no-unused-vars, jsx-a11y/control-has-associated-label */

package/components/Picker/components/Button/index.js

@@ -6,29 +6,35 @@ import styles from "./style";
  * The default button for the Picker component.
  * @returns {JSX} The button component.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PickerButton = ({
   value,
   label,
   openList
 }) => {
   if (value !== null) {
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/_jsxs("button", {
       className: styles.button,
       onClick: openList,
-      type: "button"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.label
-    }, label), /*#__PURE__*/React.createElement("span", {
-      className: styles.value
-    }, value));
+      type: "button",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: styles.label,
+        children: label
+      }), /*#__PURE__*/_jsx("span", {
+        className: styles.value,
+        children: value
+      })]
+    });
   }
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/_jsx("button", {
     className: styles.button,
     onClick: openList,
-    type: "button"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles.label
-  }, label));
+    type: "button",
+    children: /*#__PURE__*/_jsx("span", {
+      className: styles.label,
+      children: label
+    })
+  });
 };
 PickerButton.defaultProps = {
   value: null

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

@@ -7,27 +7,30 @@ import styles from "./style";
  * The default button for the Picker component.
  * @returns {JSX} The button component.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const PickerList = ({
   items,
   onClose,
   onSelect,
   selectedIndex
-}) => /*#__PURE__*/React.createElement("ul", {
-  className: "common__picker__list"
-}, items.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))));
+}) => /*#__PURE__*/_jsx("ul", {
+  className: "common__picker__list",
+  children: items.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: () => {},
   selectedIndex: null

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(() => {