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

package/components/ScannerContainer/index.js

@@ -1,4 +1,5 @@
-import React, { Fragment, PureComponent } from 'react';
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import AppScanner from '@shopgate/pwa-core/classes/Scanner';
 import connect from "./connector";
@@ -7,11 +8,16 @@ import connect from "./connector";
  * Wraps the Scanner overlay with functionality to automatically open and close the scanner,
  * as well as triggering the removal and reset of the background.
  */
-class ScannerContainer extends PureComponent {
+let ScannerContainer = /*#__PURE__*/function (_PureComponent) {
+  function ScannerContainer() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(ScannerContainer, _PureComponent);
+  var _proto = ScannerContainer.prototype;
   /**
    * Starts up the app scanner.
    */
-  async componentDidMount() {
+  _proto.componentDidMount = async function componentDidMount() {
     // Avoid trying to open the scanner if the app does not support it.
     if (!this.props.hasScannerSupport) {
       return;
@@ -22,8 +28,8 @@ class ScannerContainer extends PureComponent {
 
   /**
    * Shut down the app scanner.
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     if (!this.props.hasScannerSupport) {
       return;
     }
@@ -34,11 +40,12 @@ class ScannerContainer extends PureComponent {
   /**
    * Does not render anything when the app does not support the scanner.
    * @returns {JSX}
-   */
-  render() {
-    return /*#__PURE__*/React.createElement(Fragment, null, this.props.hasScannerSupport && this.props.children);
-  }
-}
+   */;
+  _proto.render = function render() {
+    return this.props.hasScannerSupport && this.props.children;
+  };
+  return ScannerContainer;
+}(PureComponent);
 ScannerContainer.defaultProps = {
   children: null,
   scannerDidClose: () => {},

package/components/Select/components/Item/index.js

@@ -8,10 +8,12 @@ import styles from "./style";
  * @param {React.Children} props.children - Some content to display inside.
  * @returns {JSX}
  */
-const SelectItem = props => /*#__PURE__*/React.createElement("div", {
+import { jsx as _jsx } from "react/jsx-runtime";
+const SelectItem = props => /*#__PURE__*/_jsx("div", {
   className: `${styles} ${props.className}`,
-  onTouchEnd: () => props.onSelect(props.value, props.label)
-}, props.label);
+  onTouchEnd: () => props.onSelect(props.value, props.label),
+  children: props.label
+});
 
 /**
  * The component prop types.

package/components/Select/index.js

@@ -1,7 +1,9 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styles from "./style";
 import SelectItem from "./components/Item";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_PLACEHOLDER_TEXT = 'Select ...';
 
 /**
@@ -28,23 +30,24 @@ const normalizeItem = item => ({
  * @param {Object} props - The component props.
  * @param {React.Children} props.children - Some content to display inside.
  */
-class Select extends Component {
+let Select = /*#__PURE__*/function (_Component) {
   /**
    * The constructor.
    * @param {Object} props - The component props.
    */
-  constructor(props) {
-    super(props);
+  function Select(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Triggers the onChange callback if the selected value has changed.
      * @param {Object} nextState - The next state.
      */
-    this.triggerChangeCallback = nextState => {
-      if (this.state.selected && this.state.selected.value === nextState.selected.value) {
+    _this.triggerChangeCallback = nextState => {
+      if (_this.state.selected && _this.state.selected.value === nextState.selected.value) {
         return;
       }
-      if (this.props.onChange instanceof Function) {
-        this.props.onChange(nextState.selected.value);
+      if (_this.props.onChange instanceof Function) {
+        _this.props.onChange(nextState.selected.value);
       }
     };
     /**
@@ -52,9 +55,9 @@ class Select extends Component {
      * In this case the select gets closed.
      * @param {Event} event - The event of the user interaction (e.g. TouchEvent).
      */
-    this.handleInteractionOutside = event => {
-      if (!this.domElement.contains(event.target)) {
-        this.setState({
+    _this.handleInteractionOutside = event => {
+      if (!_this.domElement.contains(event.target)) {
+        _this.setState({
           isOpen: false
         });
       }
@@ -64,7 +67,7 @@ class Select extends Component {
      * @param {*} value - The selected value.
      * @param {string} label - The selected label.
      */
-    this.handleItemSelect = (value, label) => {
+    _this.handleItemSelect = (value, label) => {
       const stateUpdate = {
         selected: {
           label,
@@ -72,41 +75,44 @@ class Select extends Component {
         },
         isOpen: false
       };
-      this.triggerChangeCallback(stateUpdate);
-      this.setState(stateUpdate);
+      _this.triggerChangeCallback(stateUpdate);
+      _this.setState(stateUpdate);
     };
     /**
      * Toggles the open state of the component.
      */
-    this.toggleOpenState = () => {
-      this.setState(({
+    _this.toggleOpenState = () => {
+      _this.setState(({
         isOpen
       }) => ({
         isOpen: !isOpen
       }));
     };
-    this.state = {
+    _this.state = {
       selected: null,
       isOpen: false
     };
-    this.domElement = null;
+    _this.domElement = null;
     if (props.value) {
-      this.state.selected = normalizeItem(findItemByValue(props.items, props.value));
+      _this.state.selected = normalizeItem(findItemByValue(props.items, props.value));
     }
+    return _this;
   }
 
   /**
    * Adds event listener when the component is mounted.
    */
-  componentDidMount() {
+  _inheritsLoose(Select, _Component);
+  var _proto = Select.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     document.addEventListener('touchstart', this.handleInteractionOutside);
   }
 
   /**
    * Updates the selected item when the value prop changes.
    * @param {Object} nextProps - The next props.
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+   */;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (!this.state.selected || nextProps.value !== this.state.selected.value) {
       this.state.selected = normalizeItem(findItemByValue(nextProps.items, nextProps.value));
     }
@@ -114,42 +120,48 @@ class Select extends Component {
 
   /**
    * Removes event listener when the component will unmount.
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     document.removeEventListener('touchstart', this.handleInteractionOutside);
-  }
+  };
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const hasSelection = this.state.selected && this.state.selected.value !== undefined;
     const selectedLabel = hasSelection ? this.state.selected.label : this.props.placeholder;
-    const items = this.state.isOpen ? /*#__PURE__*/React.createElement("div", {
-      className: styles.items
-    }, this.props.items.map(item => {
-      const normalizedItem = normalizeItem(item);
-      const selected = hasSelection && this.state.selected.value === normalizedItem.value;
-      return /*#__PURE__*/React.createElement(SelectItem, {
-        key: normalizedItem.value,
-        value: normalizedItem.value,
-        label: normalizedItem.label,
-        selected: selected,
-        onSelect: this.handleItemSelect
-      });
-    })) : null;
-    return /*#__PURE__*/React.createElement("div", {
+    const items = this.state.isOpen ? /*#__PURE__*/_jsx("div", {
+      className: styles.items,
+      children: this.props.items.map(item => {
+        const normalizedItem = normalizeItem(item);
+        const selected = hasSelection && this.state.selected.value === normalizedItem.value;
+        return /*#__PURE__*/_jsx(SelectItem, {
+          value: normalizedItem.value,
+          label: normalizedItem.label,
+          selected: selected,
+          onSelect: this.handleItemSelect
+        }, normalizedItem.value);
+      })
+    }) : null;
+    return /*#__PURE__*/_jsxs("div", {
       className: `${styles.container} ${this.props.className} common_select`,
       ref: ref => {
         this.domElement = ref;
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      onTouchStart: this.toggleOpenState
-    }, /*#__PURE__*/React.createElement("span", null, selectedLabel), /*#__PURE__*/React.createElement("span", {
-      className: styles.selectHandle
-    }, "\u25BE")), items);
-  }
-}
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        onTouchStart: this.toggleOpenState,
+        children: [/*#__PURE__*/_jsx("span", {
+          children: selectedLabel
+        }), /*#__PURE__*/_jsx("span", {
+          className: styles.selectHandle,
+          children: "\u25BE"
+        })]
+      }), items]
+    });
+  };
+  return Select;
+}(Component);
 /**
  * The component prop types.
  * @type {Object}

package/components/Select/spec.js

@@ -2,10 +2,11 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import Select from "./index";
 import SelectItem from "./components/Item";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Select />', () => {
   jest.useFakeTimers();
   it('opens and closes the item list', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Select, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Select, {}));
     let previousOpenState = wrapper.state('isOpen');
     wrapper.instance().toggleOpenState();
     expect(wrapper.state('isOpen')).toBe(!previousOpenState);
@@ -14,14 +15,14 @@ describe('<Select />', () => {
     expect(wrapper.state('isOpen')).toBe(!previousOpenState);
   });
   it('renders without items', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Select, null));
+    const wrapper = mount(/*#__PURE__*/_jsx(Select, {}));
     wrapper.instance().toggleOpenState();
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(SelectItem).length).toBe(0);
   });
   it('renders with implicit items (closed)', () => {
     const items = ['a', 'b', 'c', 'd', 'e', 'f'];
-    const wrapper = mount(/*#__PURE__*/React.createElement(Select, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Select, {
       items: items
     }));
     expect(wrapper).toMatchSnapshot();
@@ -29,7 +30,7 @@ describe('<Select />', () => {
   });
   it('renders with implicit items (opened)', () => {
     const items = ['a', 'b', 'c', 'd', 'e', 'f'];
-    const wrapper = mount(/*#__PURE__*/React.createElement(Select, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Select, {
       items: items
     }));
     wrapper.instance().toggleOpenState();
@@ -44,7 +45,7 @@ describe('<Select />', () => {
       value: 'e',
       label: 'E'
     }, 'f'];
-    const wrapper = mount(/*#__PURE__*/React.createElement(Select, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Select, {
       items: items
     }));
     wrapper.instance().toggleOpenState();
@@ -75,7 +76,7 @@ describe('<Select />', () => {
     const callback = value => {
       expect(value).toBe(items[selectionIndex]);
     };
-    const wrapper = mount(/*#__PURE__*/React.createElement(Select, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Select, {
       items: items,
       onChange: callback
     }));

package/components/SelectBox/components/Item/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -9,27 +10,32 @@ import { item } from "./style";
  * @param {Object} props The components props.
  * @returns {JSX}
  */
-class SelectBoxItem extends Component {
-  constructor(...args) {
-    super(...args);
+import { jsx as _jsx } from "react/jsx-runtime";
+let SelectBoxItem = /*#__PURE__*/function (_Component) {
+  function SelectBoxItem(...args) {
+    var _this;
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
     /**
      * Calls the handleSelectionUpdate prop and prevents further events.
      */
-    this.handleSelectionUpdate = () => {
-      this.props.handleSelectionUpdate(this.props.value);
+    _this.handleSelectionUpdate = () => {
+      _this.props.handleSelectionUpdate(_this.props.value);
     };
+    return _this;
   }
+  _inheritsLoose(SelectBoxItem, _Component);
+  var _proto = SelectBoxItem.prototype;
   /**
    * Renders the component
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const Wrapper = this.props.wrapper;
     const {
       selectItem,
       selectItemSelected
     } = this.props.classNames;
-    return /*#__PURE__*/React.createElement("li", {
+    return /*#__PURE__*/_jsx("li", {
       className: classNames(selectItem, item, {
         [selectItemSelected]: this.props.isSelected
       }),
@@ -39,12 +45,16 @@ class SelectBoxItem extends Component {
       role: "menuitem",
       ref: this.props.forwardedRef,
       tabIndex: this.props.isSelected ? '0' : '-1',
-      "aria-current": this.props.isSelected
-    }, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(I18n.Text, {
-      string: this.props.label
-    })));
-  }
-}
+      "aria-current": this.props.isSelected,
+      children: /*#__PURE__*/_jsx(Wrapper, {
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: this.props.label
+        })
+      })
+    });
+  };
+  return SelectBoxItem;
+}(Component);
 SelectBoxItem.defaultProps = {
   forwardedRef: null,
   classNames: {}

package/components/SelectBox/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';
@@ -10,26 +11,22 @@ import styles from "./style";
 /**
  * The select box component.
  */
-class SelectBox extends Component {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let SelectBox = /*#__PURE__*/function (_Component) {
   /**
    * Initializes the component.
    * @param {Object} props The components props.
    */
-  constructor(props) {
-    super(props);
-    /**
-     * When dropdown animation is finished.
-     */
-    this.onDropdownComplete = () => {
-      this.dropdownCompleted = true;
-    };
+  function SelectBox(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Handles any interaction the user does outside of the component.
      * In this case the select gets closed.
      * @param {Object} event The event object.
      */
-    this.handleInteractionOutside = event => {
-      this.setState({
+    _this.handleInteractionOutside = event => {
+      _this.setState({
         isOpen: false
       });
       event.preventDefault();
@@ -38,61 +35,62 @@ class SelectBox extends Component {
     /**
      * Sets the open state to true
      */
-    this.handleOpenList = () => {
-      if (this.state.isOpen) {
+    _this.handleOpenList = () => {
+      if (_this.state.isOpen) {
         return;
       }
-      this.dropdownCompleted = false;
-      this.setState({
+      _this.setState({
         isOpen: true
       });
-      if (this.firstItemRef) {
-        this.firstItemRef.focus();
+      if (_this.firstItemRef) {
+        _this.firstItemRef.focus();
       }
     };
     /**
      * Sets the new active selection.
      * @param {string} value Value of the selected item.
      */
-    this.handleSelectionUpdate = value => {
-      const selection = find(this.props.items, {
+    _this.handleSelectionUpdate = value => {
+      const selection = find(_this.props.items, {
         value
       });
-      this.setState({
+      _this.setState({
         selected: selection,
         isOpen: false
       });
 
       // Delay the callback to make sure actions are fired after animations are done.
       setTimeout(() => {
-        this.props.handleSelectionUpdate(selection.value);
-      }, this.props.duration);
-      if (this.controlRef) {
-        this.controlRef.focus();
+        _this.props.handleSelectionUpdate(selection.value);
+      }, _this.props.duration);
+      if (_this.controlRef) {
+        _this.controlRef.focus();
       }
     };
     /** @param {HTMLElement} ref The element */
-    this.setControlRef = ref => {
-      this.controlRef = ref;
+    _this.setControlRef = ref => {
+      _this.controlRef = ref;
     };
     /** @param {HTMLElement} ref The element */
-    this.setFirstItemRef = ref => {
-      this.firstItemRef = ref;
+    _this.setFirstItemRef = ref => {
+      _this.firstItemRef = ref;
     };
-    this.dropdownCompleted = false;
-    this.state = {
+    _this.state = {
       isOpen: false,
       selected: find(props.items, {
         value: props.initialValue
       })
     };
+    return _this;
   }
 
   /**
    * Reset selected when changing the initial value.
     * @param {Object} nextProps The next props the component will receive.
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(SelectBox, _Component);
+  var _proto = SelectBox.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.initialValue !== nextProps.initialValue) {
       this.setState({
         selected: find(nextProps.items, {
@@ -100,12 +98,12 @@ class SelectBox extends Component {
         })
       });
     }
-  }
+  };
   /**
    * Renders the component
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const Icon = this.props.icon;
     const {
       icon,
@@ -120,54 +118,59 @@ class SelectBox extends Component {
     const iconClasses = classNames(icon, {
       [iconOpen]: this.state.isOpen && iconOpen !== null
     });
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsxs("div", {
       className: `${this.props.className} common__select-box`,
-      "data-test-id": this.props.testId
-    }, /*#__PURE__*/React.createElement("button", {
-      className: button,
-      onClick: this.handleOpenList,
-      "data-test-id": buttonLabel,
-      type: "button",
-      "aria-haspopup": true,
-      "aria-expanded": this.state.isOpen ? true : null,
-      "aria-controls": buttonLabel,
-      ref: this.setControlRef
-    }, /*#__PURE__*/React.createElement("span", {
-      className: selection
-    }, /*#__PURE__*/React.createElement(I18n.Text, {
-      string: buttonLabel
-    })), /*#__PURE__*/React.createElement("div", {
-      className: iconClasses
-    }, /*#__PURE__*/React.createElement(Icon, null))), /*#__PURE__*/React.createElement(Dropdown, {
-      className: dropdown,
-      isOpen: this.state.isOpen,
-      onComplete: this.onDropdownComplete,
-      duration: this.props.duration
-    }, /*#__PURE__*/React.createElement("ul", {
-      role: "menu",
-      id: buttonLabel,
-      tabIndex: "-1"
-    }, this.props.items.map(item => /*#__PURE__*/React.createElement(SelectBoxItem, {
-      classNames: {
-        selectItem,
-        selectItemSelected
-      },
-      wrapper: this.props.item,
-      key: item.value,
-      value: item.value,
-      label: item.label,
-      handleSelectionUpdate: this.handleSelectionUpdate,
-      isSelected: buttonLabel === item.label,
-      forwardedRef: buttonLabel === item.label ? this.setFirstItemRef : null
-    })))), this.state.isOpen && /*#__PURE__*/React.createElement("button", {
-      className: styles.overlay,
-      onClick: this.handleInteractionOutside,
-      onTouchMove: this.handleInteractionOutside,
-      type: "button",
-      "aria-hidden": true
-    }));
-  }
-}
+      "data-test-id": this.props.testId,
+      children: [/*#__PURE__*/_jsxs("button", {
+        className: button,
+        onClick: this.handleOpenList,
+        "data-test-id": buttonLabel,
+        type: "button",
+        "aria-haspopup": true,
+        "aria-expanded": this.state.isOpen ? true : null,
+        "aria-controls": buttonLabel,
+        ref: this.setControlRef,
+        children: [/*#__PURE__*/_jsx("span", {
+          className: selection,
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: buttonLabel
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: iconClasses,
+          children: /*#__PURE__*/_jsx(Icon, {})
+        })]
+      }), /*#__PURE__*/_jsx(Dropdown, {
+        className: dropdown,
+        isOpen: this.state.isOpen,
+        duration: this.props.duration,
+        children: /*#__PURE__*/_jsx("ul", {
+          role: "menu",
+          id: buttonLabel,
+          tabIndex: "-1",
+          children: this.props.items.map(item => /*#__PURE__*/_jsx(SelectBoxItem, {
+            classNames: {
+              selectItem,
+              selectItemSelected
+            },
+            wrapper: this.props.item,
+            value: item.value,
+            label: item.label,
+            handleSelectionUpdate: this.handleSelectionUpdate,
+            isSelected: buttonLabel === item.label,
+            forwardedRef: buttonLabel === item.label ? this.setFirstItemRef : null
+          }, item.value))
+        })
+      }), this.state.isOpen && /*#__PURE__*/_jsx("button", {
+        className: styles.overlay,
+        onClick: this.handleInteractionOutside,
+        onTouchMove: this.handleInteractionOutside,
+        type: "button",
+        "aria-hidden": true
+      })]
+    });
+  };
+  return SelectBox;
+}(Component);
 SelectBox.defaultProps = {
   className: '',
   classNames: {},