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

package/components/Input/index.js

@@ -2,18 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import SimpleInput from "./components/SimpleInput";
 import MultiLineInput from "./components/MultiLineInput";
-import DateInput from "./components/DateInput";
-
-/**
- * @returns {boolean}
- */
-const isDateSupported = () => {
-  const input = document.createElement('input');
-  const value = 'a';
-  input.setAttribute('type', 'date');
-  input.setAttribute('value', value);
-  return input.value !== value;
-};
 
 /**
  * Input component.
@@ -21,14 +9,16 @@ const isDateSupported = () => {
  * @param {Object} props Props
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Factory = props => {
-  if (props.type === 'date' && !isDateSupported()) {
-    return /*#__PURE__*/React.createElement(DateInput, props);
-  }
   if (props.multiLine) {
-    return /*#__PURE__*/React.createElement(MultiLineInput, props);
+    return /*#__PURE__*/_jsx(MultiLineInput, {
+      ...props
+    });
   }
-  return /*#__PURE__*/React.createElement(SimpleInput, props);
+  return /*#__PURE__*/_jsx(SimpleInput, {
+    ...props
+  });
 };
 Factory.defaultProps = {
   multiLine: false,

package/components/Input/spec.js

@@ -1,21 +1,22 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import Input from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Input />', () => {
   it('should render a simple input field', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, null));
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {}));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('input').length).toBe(1);
   });
   it('should render the input as password', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       password: true
     }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('input[type="password"]').length).toBe(1);
   });
   it('should render the input with a default value', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       value: "FooBar"
     }));
     expect(wrapper).toMatchSnapshot();
@@ -23,7 +24,7 @@ describe('<Input />', () => {
   });
   it('should trigger the onChange callback', () => {
     const onChangeMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       onChange: onChangeMock
     }));
     wrapper.find('input').simulate('change', {
@@ -35,7 +36,7 @@ describe('<Input />', () => {
     expect(wrapper.find('input').props().value).toEqual('a');
   });
   it('should receive the correct value while typing', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, null));
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {}));
     const input = wrapper.find('input');
     input.simulate('change', {
       target: {
@@ -46,7 +47,7 @@ describe('<Input />', () => {
     expect(wrapper.find('SimpleInput').instance().value).toBe('foobar');
   });
   it('should sanitize the input', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       onSanitize: value => value.toUpperCase()
     }));
     const input = wrapper.find('input');
@@ -59,7 +60,7 @@ describe('<Input />', () => {
     expect(wrapper.find('SimpleInput').instance().value).toBe('FOOBAR');
   });
   it('should validate the input', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       onValidate: () => false
     }));
     expect(wrapper).toMatchSnapshot();
@@ -67,7 +68,7 @@ describe('<Input />', () => {
   });
   it('should focus the input', () => {
     const onFocusMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       onFocusChange: onFocusMock
     }));
     const input = wrapper.find('input');
@@ -79,7 +80,7 @@ describe('<Input />', () => {
     expect(wrapper.find('SimpleInput').instance().isFocused).toBe(false);
   });
   it('should change the value on user input', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       value: "My initial value"
     }));
     expect(wrapper).toMatchSnapshot();
@@ -96,7 +97,7 @@ describe('<Input />', () => {
     const multiLineValue = `dfsdsdf
     sdfdsff
     dsf`;
-    const wrapper = mount(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
       value: "",
       multiLine: true
     }));
@@ -108,7 +109,7 @@ describe('<Input />', () => {
     expect(wrapper.find('textarea').getDOMNode().innerHTML).toEqual(multiLineValue);
   });
   it('should render additional html attributes', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Input, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Input, {
       type: "date",
       attributes: {
         min: '1970-01-01',

package/components/KeyboardConsumer/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Event from '@shopgate/pwa-core/classes/Event';
@@ -6,10 +7,11 @@ import { EVENT_KEYBOARD_WILL_CHANGE } from '@shopgate/pwa-core/constants/AppEven
 /**
  * Keyboard state consumer.
  */
-class KeyboardConsumer extends PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
+let KeyboardConsumer = /*#__PURE__*/function (_PureComponent) {
+  function KeyboardConsumer(...args) {
+    var _this;
+    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
+    _this.state = {
       open: false,
       overlap: 0,
       duration: 0
@@ -17,36 +19,40 @@ class KeyboardConsumer extends PureComponent {
     /**
      * Stores current keyboard state.
      */
-    this.handleKeyboardChange = ({
+    _this.handleKeyboardChange = ({
       open,
       overlap,
       duration
     }) => {
-      this.setState({
+      _this.setState({
         open,
         overlap,
         duration
       });
     };
+    return _this;
   }
+  _inheritsLoose(KeyboardConsumer, _PureComponent);
+  var _proto = KeyboardConsumer.prototype;
   /**
    * Listen to keyboard changes as soon as the component mounts.
    */
-  componentDidMount() {
+  _proto.componentDidMount = function componentDidMount() {
     Event.addCallback(EVENT_KEYBOARD_WILL_CHANGE, this.handleKeyboardChange);
   }
 
   /**
    * Remove listener when component will unmount.
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     Event.removeCallback(EVENT_KEYBOARD_WILL_CHANGE, this.handleKeyboardChange);
-  }
+  };
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     return this.props.children(this.state);
-  }
-}
+  };
+  return KeyboardConsumer;
+}(PureComponent);
 export default KeyboardConsumer;

package/components/Link/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import "core-js/modules/es.string.replace.js";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -10,34 +11,36 @@ import styles from "./style";
  * @param {Object} props Props for the component.
  * @returns {JSX}
  */
-class Link extends Component {
-  constructor(...args) {
-    super(...args);
+import { jsx as _jsx } from "react/jsx-runtime";
+let Link = /*#__PURE__*/function (_Component) {
+  function Link(...args) {
+    var _this;
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
     /**
      * Opens the link.
      * @param {Event} e An event object.
      */
-    this.handleOpenLink = e => {
+    _this.handleOpenLink = e => {
       e.preventDefault();
-      if (this.props.disabled) {
+      if (_this.props.disabled) {
         return;
       }
       const params = {
-        pathname: this.props.href,
+        pathname: _this.props.href,
         state: {
-          ...(this.props.state || {}),
-          ...(this.props.target ? {
-            target: this.props.target
+          ...(_this.props.state || {}),
+          ...(_this.props.target ? {
+            target: _this.props.target
           } : {})
         }
       };
 
       // setTimeout prevents double click while VoiceOver is active
       setTimeout(() => {
-        if (this.props.replace) {
-          this.props.historyReplace(params);
+        if (_this.props.replace) {
+          _this.props.historyReplace(params);
         } else {
-          this.props.historyPush(params);
+          _this.props.historyPush(params);
         }
       }, 0);
     };
@@ -45,17 +48,20 @@ class Link extends Component {
      * key listener for screen readers
      * @param {Object} event The event object
      */
-    this.handleKeyDown = event => {
+    _this.handleKeyDown = event => {
       if (event.key === 'Enter' || event.key === ' ') {
-        this.handleOpenLink(event);
+        _this.handleOpenLink(event);
       }
     };
+    return _this;
   }
+  _inheritsLoose(Link, _Component);
+  var _proto = Link.prototype;
   /**
    * Renders the component.
    * @returns {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       tag,
       className,
@@ -74,7 +80,7 @@ class Link extends Component {
        */
       Tag = 'span';
     }
-    return /*#__PURE__*/React.createElement(Tag, {
+    return /*#__PURE__*/_jsx(Tag, {
       className: `${styles} ${className} common__link`,
       onClick: this.handleOpenLink,
       onKeyDown: this.handleKeyDown,
@@ -83,10 +89,12 @@ class Link extends Component {
       "aria-label": ariaLabel,
       tabIndex: tabIndex,
       "aria-hidden": ariaHidden,
-      href: href && Tag === 'a' ? href : null
-    }, children);
-  }
-}
+      href: href && Tag === 'a' ? href : null,
+      children: children
+    });
+  };
+  return Link;
+}(Component);
 Link.defaultProps = {
   'aria-hidden': null,
   'aria-label': null,

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