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

package/ScannerOverlay/components/ScannerBar/index.js

@@ -13,23 +13,28 @@ import styles from "./style";
  * @param {Function} props.onToggleFlashlight The toggle event triggered by the user.
  * @returns {React.ReactPortal} A React portal that renders the scanner bar in the AppFooter.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ScannerBar = ({
   flashlightState,
   onToggleFlashlight
-}) => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(SurroundPortals, {
+}) => /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(SurroundPortals, {
   portalName: SCANNER_BAR,
   portalProps: {
     flashlightState,
     onToggleFlashlight
-  }
-}, /*#__PURE__*/React.createElement(Grid, {
-  className: `${styles.container} ui-shared__scanner-bar`
-}, /*#__PURE__*/React.createElement(Grid.Item, {
-  className: styles.column
-}, /*#__PURE__*/React.createElement(FlashlightButton, {
-  onToggle: onToggleFlashlight,
-  flashlightState: flashlightState
-})), /*#__PURE__*/React.createElement(Grid.Item, {
-  className: styles.column
-}, /*#__PURE__*/React.createElement(ScannerInstructions, null)))), document.getElementById('AppFooter'));
+  },
+  children: /*#__PURE__*/_jsxs(Grid, {
+    className: `${styles.container} ui-shared__scanner-bar`,
+    children: [/*#__PURE__*/_jsx(Grid.Item, {
+      className: styles.column,
+      children: /*#__PURE__*/_jsx(FlashlightButton, {
+        onToggle: onToggleFlashlight,
+        flashlightState: flashlightState
+      })
+    }), /*#__PURE__*/_jsx(Grid.Item, {
+      className: styles.column,
+      children: /*#__PURE__*/_jsx(ScannerInstructions, {})
+    })]
+  })
+}), document.getElementById('AppFooter'));
 export default ScannerBar;

package/ScannerOverlay/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Fragment, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import AppScanner from '@shopgate/pwa-core/classes/Scanner';
@@ -7,44 +8,52 @@ import ScannerBar from "./components/ScannerBar";
 /**
  * The scanner overlay component.
  */
-class ScannerOverlay extends PureComponent {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+let ScannerOverlay = /*#__PURE__*/function (_PureComponent) {
   /**
    * Initializes the component.
    * @param {Object} props The components props.
    */
-  constructor(props) {
-    super(props);
-    this.handleToggleFlashlight = () => {
-      this.setState({
+  function ScannerOverlay(props) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
+    _this.handleToggleFlashlight = () => {
+      _this.setState({
         flashlight: AppScanner.toggleFlashlight()
       });
     };
-    this.state = {
+    _this.state = {
       flashlight: props.flashlight
     };
+    return _this;
   }
 
   /**
    * @param {Object} nextProps New props to apply.
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(ScannerOverlay, _PureComponent);
+  var _proto = ScannerOverlay.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.state.flashlight !== nextProps.flashlight) {
       this.setState({
         flashlight: nextProps.flashlight
       });
     }
-  }
+  };
   /**
    * Render the camera overlay and the bottom bar with its contents.
    * @returns {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CameraOverlay, null), /*#__PURE__*/React.createElement(ScannerBar, {
-      flashlightState: this.state.flashlight,
-      onToggleFlashlight: this.handleToggleFlashlight
-    }));
-  }
-}
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(CameraOverlay, {}), /*#__PURE__*/_jsx(ScannerBar, {
+        flashlightState: this.state.flashlight,
+        onToggleFlashlight: this.handleToggleFlashlight
+      })]
+    });
+  };
+  return ScannerOverlay;
+}(PureComponent);
 ScannerOverlay.defaultProps = {
   flashlight: false
 };

package/Sheet/components/Header/components/SearchBar/index.js

@@ -9,39 +9,46 @@ import styles from "./style";
 /**
  * @return {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SearchBar = ({
   handleChange
 }) => {
   const [query, setQuery] = useState('');
   const name = 'search';
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: "ui-shared__sheet__search-field",
-    "data-test-id": "SearchField"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.container
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.inputWrapper
-  }, /*#__PURE__*/React.createElement("form", {
-    onSubmit: e => {
-      e.preventDefault();
-    }
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: name,
-    className: styles.label
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.icon
-  }, /*#__PURE__*/React.createElement(MagnifierIcon, null)), !query.length && /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "search.placeholder"
-  })), /*#__PURE__*/React.createElement(Input, {
-    name: name,
-    autoComplete: false,
-    className: classNames(styles.input),
-    onChange: value => {
-      handleChange(value);
-      setQuery(value);
-    },
-    value: query,
-    type: "search"
-  })))));
+    "data-test-id": "SearchField",
+    children: /*#__PURE__*/_jsx("div", {
+      className: styles.container,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.inputWrapper,
+        children: /*#__PURE__*/_jsxs("form", {
+          onSubmit: e => {
+            e.preventDefault();
+          },
+          children: [/*#__PURE__*/_jsxs("label", {
+            htmlFor: name,
+            className: styles.label,
+            children: [/*#__PURE__*/_jsx("div", {
+              className: styles.icon,
+              children: /*#__PURE__*/_jsx(MagnifierIcon, {})
+            }), !query.length && /*#__PURE__*/_jsx(I18n.Text, {
+              string: "search.placeholder"
+            })]
+          }), /*#__PURE__*/_jsx(Input, {
+            name: name,
+            autoComplete: false,
+            className: classNames(styles.input),
+            onChange: value => {
+              handleChange(value);
+              setQuery(value);
+            },
+            value: query,
+            type: "search"
+          })]
+        })
+      })
+    })
+  });
 };
 export default SearchBar;

package/Sheet/components/Header/components/SearchBar/spec.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import SearchBar from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<SearchBar />', () => {
   it('should call handleChange on input', async () => {
     const handleChange = jest.fn();
-    const wrapper = await mount(/*#__PURE__*/React.createElement(SearchBar, {
+    const wrapper = await mount(/*#__PURE__*/_jsx(SearchBar, {
       handleChange: handleChange
     }));
     expect(wrapper).toMatchSnapshot();

package/Sheet/components/Header/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 classNames from 'classnames';
@@ -11,20 +11,26 @@ import SearchBar from "./components/SearchBar";
 /**
  * Header component.
  */
-class Header extends Component {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let Header = /*#__PURE__*/function (_Component) {
+  function Header() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(Header, _Component);
+  var _proto = Header.prototype;
   /**
    * @param {Object} nextProps Next Props
    * @returns {boolean}
    */
-  shouldComponentUpdate(nextProps) {
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
     return this.props.shadow !== nextProps.shadow || this.props.title !== nextProps.title;
   }
 
   /**
    * Renders the component.
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     const {
       allowClose
     } = this.props;
@@ -32,37 +38,44 @@ class Header extends Component {
     const {
       __
     } = this.context.i18n();
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsxs("div", {
       className: classNames({
         [styles.shadow]: this.props.shadow
-      })
-    }, /*#__PURE__*/React.createElement(Grid, {
-      className: classes,
-      component: "div",
-      wrap: false
-    }, allowClose ? /*#__PURE__*/React.createElement("button", {
-      className: styles.closeButton,
-      onClick: this.props.onToggleClose,
-      "aria-label": __('common.close'),
-      type: "button"
-    }, /*#__PURE__*/React.createElement(Ripple, {
-      className: styles.closeIcon
-    }, /*#__PURE__*/React.createElement(CrossIcon, {
-      size: 24
-    }))) : /*#__PURE__*/React.createElement("div", {
-      className: styles.closePlaceholder
-    }), /*#__PURE__*/React.createElement(Grid.Item, _extends({
-      className: styles.title,
-      component: "div",
-      grow: 1,
-      role: "heading"
-    }, allowClose ? {
-      tabIndex: 0
-    } : null), this.props.title)), this.props.showSearch && /*#__PURE__*/React.createElement(SearchBar, {
-      handleChange: this.props.handleChange
-    }));
-  }
-}
+      }),
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        className: classes,
+        component: "div",
+        wrap: false,
+        children: [allowClose ? /*#__PURE__*/_jsx("button", {
+          className: styles.closeButton,
+          onClick: this.props.onToggleClose,
+          "aria-label": __('common.close'),
+          type: "button",
+          children: /*#__PURE__*/_jsx(Ripple, {
+            className: styles.closeIcon,
+            children: /*#__PURE__*/_jsx(CrossIcon, {
+              size: 24
+            })
+          })
+        }) : /*#__PURE__*/_jsx("div", {
+          className: styles.closePlaceholder
+        }), /*#__PURE__*/_jsx(Grid.Item, {
+          className: styles.title,
+          component: "div",
+          grow: 1,
+          role: "heading",
+          ...(allowClose ? {
+            tabIndex: 0
+          } : null),
+          children: this.props.title
+        })]
+      }), this.props.showSearch && /*#__PURE__*/_jsx(SearchBar, {
+        handleChange: this.props.handleChange
+      })]
+    });
+  };
+  return Header;
+}(Component);
 /**
  * The component's default props.
  * @type {Object}

package/Sheet/components/Header/spec.js

@@ -2,10 +2,11 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
 import Header from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Header />', () => {
   it('should render with correct title', () => {
     const title = 'My Title';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Header, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Header, {
       title: title
     }), mockRenderOptions);
     expect(wrapper).toMatchSnapshot();

package/Sheet/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 throttle from 'lodash/throttle';
@@ -8,6 +10,7 @@ import Drawer from '@shopgate/pwa-common/components/Drawer';
 import ProgressBar from "../ProgressBar";
 import Header from "./components/Header";
 import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const SHEET_EVENTS = {
   OPEN: 'Sheet.open',
   CLOSE: 'Sheet.close'
@@ -16,20 +19,21 @@ export const SHEET_EVENTS = {
 /**
  * Sheet component.
  */
-class Sheet extends Component {
+let Sheet = /*#__PURE__*/function (_Component) {
   /**
    * The constructor.
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function Sheet(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Close the Sheet.
      */
-    this.handleScroll = throttle(() => {
-      const scrolled = this.content.current.scrollTop !== 0;
-      if (this.state.scrolled !== scrolled) {
-        this.setState({
+    _this.handleScroll = throttle(() => {
+      const scrolled = _this.content.current.scrollTop !== 0;
+      if (_this.state.scrolled !== scrolled) {
+        _this.setState({
           scrolled
         });
       }
@@ -37,45 +41,48 @@ class Sheet extends Component {
     /**
      * Close the Sheet.
      */
-    this.handleClose = () => {
-      this.props.onClose();
-      this.setState({
+    _this.handleClose = () => {
+      _this.props.onClose();
+      _this.setState({
         isOpen: false,
         scrolled: false
       });
     };
     /** The Sheet is opened */
-    this.handleDidOpen = () => {
+    _this.handleDidOpen = () => {
       UIEvents.emit(SHEET_EVENTS.OPEN);
-      this.props.onDidOpen();
+      _this.props.onDidOpen();
     };
     /** The Sheet is closed */
-    this.handleDidClose = () => {
+    _this.handleDidClose = () => {
       UIEvents.emit(SHEET_EVENTS.CLOSE);
-      this.props.onDidClose();
+      _this.props.onDidClose();
     };
     /**
      * New value from SearchBar
      * @param {string} value .
      */
-    this.handleSearchInput = value => {
-      this.setState({
+    _this.handleSearchInput = value => {
+      _this.setState({
         query: value
       });
     };
-    this.content = /*#__PURE__*/React.createRef();
-    this.state = {
+    _this.content = /*#__PURE__*/React.createRef();
+    _this.state = {
       isOpen: props.isOpen,
       scrolled: false,
       query: ''
     };
+    return _this;
   }
 
   /**
    * Change isOpen state for new incoming props.
    * @param {Object} nextProps The next component props.
    */
-  UNSAFE_componentWillReceiveProps({
+  _inheritsLoose(Sheet, _Component);
+  var _proto = Sheet.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps({
     isOpen
   }) {
     if (this.state.isOpen !== isOpen) {
@@ -83,23 +90,12 @@ class Sheet extends Component {
         isOpen
       });
     }
-  }
-  /**
-   * Getter for the animation props of the Sheet.
-   * @returns {Object}
-   */
-  get animationProps() {
-    return {
-      duration: this.props.duration,
-      ...styles.drawerAnimation,
-      ...this.props.animation
-    };
-  }
+  };
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       allowClose
     } = this.props;
@@ -119,41 +115,60 @@ class Sheet extends Component {
     }, {
       [styles.shadow]: !this.props.backdrop
     });
-    return /*#__PURE__*/React.createElement("section", {
+    return /*#__PURE__*/_jsxs("section", {
       className: classNames('ui-shared__sheet', {
         [styles.section]: this.state.isOpen
-      })
-    }, /*#__PURE__*/React.createElement(Drawer, {
-      className: drawerClassNames,
-      isOpen: this.state.isOpen,
-      onDidOpen: this.handleDidOpen,
-      onDidClose: this.handleDidClose,
-      onOpen: this.props.onOpen,
-      onClose: this.handleClose,
-      animation: this.animationProps
-    }, this.props.title && /*#__PURE__*/React.createElement(Sheet.Header, {
-      showSearch: this.props.showSearch,
-      handleChange: this.handleSearchInput,
-      onToggleClose: this.handleClose,
-      shadow: this.state.scrolled,
-      title: this.props.title,
-      allowClose: allowClose
-    }), /*#__PURE__*/React.createElement("div", {
-      className: styles.progressBarContainer
-    }, /*#__PURE__*/React.createElement(ProgressBar, {
-      isVisible: this.props.isLoading
-    })), /*#__PURE__*/React.createElement("div", {
-      ref: this.content,
-      onScroll: this.handleScroll,
-      className: contentClassNames
-    }, children)), this.props.backdrop && /*#__PURE__*/React.createElement(Backdrop, {
-      isVisible: this.state.isOpen,
-      level: 4,
-      onClick: allowClose ? this.handleClose : () => {},
-      opacity: 20
-    }));
-  }
-}
+      }),
+      children: [/*#__PURE__*/_jsxs(Drawer, {
+        className: drawerClassNames,
+        isOpen: this.state.isOpen,
+        onDidOpen: this.handleDidOpen,
+        onDidClose: this.handleDidClose,
+        onOpen: this.props.onOpen,
+        onClose: this.handleClose,
+        animation: this.animationProps,
+        children: [this.props.title && /*#__PURE__*/_jsx(Sheet.Header, {
+          showSearch: this.props.showSearch,
+          handleChange: this.handleSearchInput,
+          onToggleClose: this.handleClose,
+          shadow: this.state.scrolled,
+          title: this.props.title,
+          allowClose: allowClose
+        }), /*#__PURE__*/_jsx("div", {
+          className: styles.progressBarContainer,
+          children: /*#__PURE__*/_jsx(ProgressBar, {
+            isVisible: this.props.isLoading
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          ref: this.content,
+          onScroll: this.handleScroll,
+          className: contentClassNames,
+          children: children
+        })]
+      }), this.props.backdrop && /*#__PURE__*/_jsx(Backdrop, {
+        isVisible: this.state.isOpen,
+        level: 4,
+        onClick: allowClose ? this.handleClose : () => {},
+        opacity: 20
+      })]
+    });
+  };
+  return _createClass(Sheet, [{
+    key: "animationProps",
+    get:
+    /**
+     * Getter for the animation props of the Sheet.
+     * @returns {Object}
+     */
+    function () {
+      return {
+        duration: this.props.duration,
+        ...styles.drawerAnimation,
+        ...this.props.animation
+      };
+    }
+  }]);
+}(Component);
 Sheet.Header = Header;
 /**
  * The component default props.

package/Sheet/spec.js

@@ -3,6 +3,7 @@ import { shallow, mount } from 'enzyme';
 import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
 import UIEvents from '@shopgate/pwa-core/emitters/ui';
 import Sheet, { SHEET_EVENTS } from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 window.requestAnimationFrame = () => {};
 jest.mock('@shopgate/pwa-core/emitters/ui', () => ({
   emit: jest.fn()
@@ -10,30 +11,36 @@ jest.mock('@shopgate/pwa-core/emitters/ui', () => ({
 jest.mock('@shopgate/engage/a11y/components');
 describe('<Sheet />', () => {
   it('should render closed without content', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Sheet, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Sheet, {}));
     expect(wrapper).toMatchSnapshot();
   });
   it('should render opened without content', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Sheet, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Sheet, {
       isOpen: true
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should render with content and title', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Sheet, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Sheet, {
       isOpen: true,
-      title: "Test-Title"
-    }, /*#__PURE__*/React.createElement("div", null, "Test")));
+      title: "Test-Title",
+      children: /*#__PURE__*/_jsx("div", {
+        children: "Test"
+      })
+    }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should call onDidOpen callback when the Sheet was opened', () => {
     const onOpen = jest.fn();
     const onDidOpen = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(Sheet, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Sheet, {
       isOpen: false,
       onOpen: onOpen,
-      onDidOpen: onDidOpen
-    }, /*#__PURE__*/React.createElement("div", null, "Test")), mockRenderOptions);
+      onDidOpen: onDidOpen,
+      children: /*#__PURE__*/_jsx("div", {
+        children: "Test"
+      })
+    }), mockRenderOptions);
     expect(onOpen).not.toHaveBeenCalled();
     expect(onDidOpen).not.toHaveBeenCalled();
     wrapper.setProps({
@@ -46,11 +53,14 @@ describe('<Sheet />', () => {
   });
   it('should trigger onClose callback and close the Sheet', () => {
     const onCloseSpy = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(Sheet, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Sheet, {
       isOpen: true,
       title: "Test-Title",
-      onClose: onCloseSpy
-    }, /*#__PURE__*/React.createElement("div", null, "Test")), mockRenderOptions);
+      onClose: onCloseSpy,
+      children: /*#__PURE__*/_jsx("div", {
+        children: "Test"
+      })
+    }), mockRenderOptions);
 
     // Trigger a click on the close button of the Sheet.
     wrapper.find('button').first().simulate('click');
@@ -71,10 +81,13 @@ describe('<Sheet />', () => {
     });
   });
   it('should open', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Sheet, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Sheet, {
       isOpen: false,
-      title: "Test-Title"
-    }, /*#__PURE__*/React.createElement("div", null, "Test")), mockRenderOptions);
+      title: "Test-Title",
+      children: /*#__PURE__*/_jsx("div", {
+        children: "Test"
+      })
+    }), mockRenderOptions);
     wrapper.setProps({
       isOpen: true
     });