@shopgate/pwa-ui-material 7.30.0-alpha.10 → 7.30.0-alpha.12

package/BaseDialog/components/Content/index.js

@@ -6,16 +6,18 @@ import styles from "../../style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Content = ({
   content
 }) => {
   if (!content) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: styles.body,
-    id: "basicDialogDesc"
-  }, content);
+    id: "basicDialogDesc",
+    children: content
+  });
 };
 Content.defaultProps = {
   content: null

package/BaseDialog/components/Content/spec.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Content from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Content />', () => {
   it('should not render if no content is passed', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Content, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Content, {}));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.instance()).toEqual(null);
   });
   it('should render content components', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Content, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Content, {
       content: "Hello World"
     }));
     expect(wrapper).toMatchSnapshot();

package/BaseDialog/components/Title/index.js

@@ -8,22 +8,25 @@ import styles from "../../style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Title = ({
   title
 }) => {
   if (!title) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: styles.title,
     id: "basicDialogTitle",
     role: "heading",
-    "aria-level": "2"
-  }, /*#__PURE__*/React.createElement(Ellipsis, {
-    rows: 3
-  }, typeof title === 'string' ? /*#__PURE__*/React.createElement(I18n.Text, {
-    string: title
-  }) : title));
+    "aria-level": "2",
+    children: /*#__PURE__*/_jsx(Ellipsis, {
+      rows: 3,
+      children: typeof title === 'string' ? /*#__PURE__*/_jsx(I18n.Text, {
+        string: title
+      }) : title
+    })
+  });
 };
 Title.defaultProps = {
   title: null

package/BaseDialog/components/Title/spec.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Title from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Title />', () => {
   it('should not render without a title', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Title, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Title, {}));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.instance()).toEqual(null);
   });
   it('should render with a title', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Title, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Title, {
       title: "Some test title"
     }));
     expect(wrapper).toMatchSnapshot();

package/BaseDialog/index.js

@@ -15,29 +15,36 @@ import styles from "./style";
  * @param {string | ReactNode} props.title The title of the dialog.
  * @return {JSX.Element} The rendered dialog.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BasicDialog = ({
   children,
   actions,
   title
-}) => /*#__PURE__*/React.createElement(FocusTrap, null, /*#__PURE__*/React.createElement("div", {
-  className: `${styles.container} ui-material__base-dialog`,
-  "data-test-id": "basicDialog",
-  role: "alertdialog",
-  "aria-modal": true,
-  "aria-labelledby": "basicDialogTitle basicDialogDesc"
-}, /*#__PURE__*/React.createElement("div", {
-  className: styles.content
-}, /*#__PURE__*/React.createElement(Title, {
-  title: title
-}), /*#__PURE__*/React.createElement(Content, {
-  content: children
-})), /*#__PURE__*/React.createElement("div", {
-  className: styles.actions
-}, /*#__PURE__*/React.createElement("div", {
-  className: styles.innerActions
-}, /*#__PURE__*/React.createElement(Buttons, {
-  actions: actions
-})))));
+}) => /*#__PURE__*/_jsx(FocusTrap, {
+  children: /*#__PURE__*/_jsxs("div", {
+    className: `${styles.container} ui-material__base-dialog`,
+    "data-test-id": "basicDialog",
+    role: "alertdialog",
+    "aria-modal": true,
+    "aria-labelledby": "basicDialogTitle basicDialogDesc",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: styles.content,
+      children: [/*#__PURE__*/_jsx(Title, {
+        title: title
+      }), /*#__PURE__*/_jsx(Content, {
+        content: children
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.actions,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.innerActions,
+        children: /*#__PURE__*/_jsx(Buttons, {
+          actions: actions
+        })
+      })
+    })]
+  })
+});
 BasicDialog.defaultProps = {
   children: null,
   actions: [],

package/BaseDialog/spec.js

@@ -4,9 +4,12 @@ import Title from "./components/Title";
 import Content from "./components/Content";
 import Buttons from "./components/Buttons";
 import BasicDialog from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const props = {
   title: 'Hello World',
-  children: /*#__PURE__*/React.createElement("div", null, "Hello World"),
+  children: /*#__PURE__*/_jsx("div", {
+    children: "Hello World"
+  }),
   actions: [{
     label: 'action0',
     action: jest.fn()
@@ -21,13 +24,15 @@ const props = {
 jest.mock('@shopgate/engage/a11y/components');
 describe('<BasicDialog />', () => {
   it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(BasicDialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(BasicDialog, {
       actions: []
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should render as expected', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(BasicDialog, props));
+    const wrapper = shallow(/*#__PURE__*/_jsx(BasicDialog, {
+      ...props
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(Title).length).toBe(1);
     expect(wrapper.find(Title).props().title).toEqual(props.title);

package/FloatingActionButton/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import colors from "../colors";
 import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
 const SIZE_BIG = 'big';
 const SIZE_SMALL = 'small';
 /**
@@ -29,21 +30,20 @@ const FloatingActionButton = props => {
     [styles.buttonLarge]: size === SIZE_BIG,
     [styles.buttonShadow]: raised
   });
-  return (
-    /*#__PURE__*/
+  return /*#__PURE__*/_jsx("button", {
+    className: classes,
+    disabled: disabled,
+    onClick: onClick,
+    ref: ref,
+    style: {
+      background
+    }
     // eslint-disable-next-line react/button-has-type
-    React.createElement("button", {
-      className: classes,
-      disabled: disabled,
-      onClick: onClick,
-      ref: ref,
-      style: {
-        background
-      },
-      type: type,
-      "data-test-id": props.testId
-    }, children)
-  );
+    ,
+    type: type,
+    "data-test-id": props.testId,
+    children: children
+  });
 };
 FloatingActionButton.defaultProps = {
   background: `var(--color-primary, ${colors.primary})`,

package/NavDrawer/components/Divider/index.js

@@ -4,7 +4,8 @@ import styles from "./style";
 /**
  * @returns {JSX}
  */
-const NavDrawerDivider = () => /*#__PURE__*/React.createElement("hr", {
+import { jsx as _jsx } from "react/jsx-runtime";
+const NavDrawerDivider = () => /*#__PURE__*/_jsx("hr", {
   "aria-hidden": true,
   className: styles
 });

package/NavDrawer/components/Divider/spec.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Divider from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<NavDrawerDivider />', () => {
   it('should match the snapshot', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Divider, null));
+    const wrapper = mount(/*#__PURE__*/_jsx(Divider, {}));
     expect(wrapper).toMatchSnapshot();
   });
 });

package/NavDrawer/components/Item/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { UIEvents } from '@shopgate/pwa-core';
@@ -8,30 +9,35 @@ import styles from "./style";
 /**
  * The NavDrawerItem component.
  */
-class NavDrawerItem extends Component {
-  constructor(...args) {
-    super(...args);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let NavDrawerItem = /*#__PURE__*/function (_Component) {
+  function NavDrawerItem(...args) {
+    var _this;
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
     /**
      * Handles an Item click by executing it's href.
      */
-    this.handleClick = () => {
+    _this.handleClick = () => {
       UIEvents.emit('navdrawer_close');
-      setTimeout(this.props.onClick, 300);
+      setTimeout(_this.props.onClick, 300);
     };
+    return _this;
   }
+  _inheritsLoose(NavDrawerItem, _Component);
+  var _proto = NavDrawerItem.prototype;
   /**
    * Only re-render when the label prop changes.
    * @param {Object} nextProps The next component props.
    * @returns {boolean}
    */
-  shouldComponentUpdate(nextProps) {
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
     return this.props.label !== nextProps.label || this.props['aria-label'] !== nextProps['aria-label'];
-  }
+  };
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       'aria-hidden': ariaHidden,
       'aria-label': ariaLabel,
@@ -43,7 +49,7 @@ class NavDrawerItem extends Component {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/_jsxs("button", {
       ref: forwardedRef,
       className: srOnly ? styles.srOnly : styles.button,
       "data-test-id": testId,
@@ -52,18 +58,21 @@ class NavDrawerItem extends Component {
       type: "button",
       "aria-hidden": ariaHidden,
       "aria-label": ariaLabel,
-      tabIndex: "0"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.iconWrapper
-    }, Icon && /*#__PURE__*/React.createElement(Icon, {
-      className: styles.icon,
-      size: 24
-    })), /*#__PURE__*/React.createElement(I18n.Text, {
-      className: styles.label,
-      string: label
-    }), Badge && /*#__PURE__*/React.createElement(Badge, null));
-  }
-}
+      tabIndex: "0",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: styles.iconWrapper,
+        children: Icon && /*#__PURE__*/_jsx(Icon, {
+          className: styles.icon,
+          size: 24
+        })
+      }), /*#__PURE__*/_jsx(I18n.Text, {
+        className: styles.label,
+        string: label
+      }), Badge && /*#__PURE__*/_jsx(Badge, {})]
+    });
+  };
+  return NavDrawerItem;
+}(Component);
 NavDrawerItem.defaultProps = {
   'aria-hidden': null,
   'aria-label': null,

package/NavDrawer/components/Section/index.js

@@ -9,6 +9,7 @@ import Divider from "../Divider";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const NavDrawerSection = ({
   children,
   title,
@@ -18,9 +19,11 @@ const NavDrawerSection = ({
   if (!children) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Fragment, null, dividerTop && /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Title, {
-    text: title
-  }), children, dividerBottom && /*#__PURE__*/React.createElement(Divider, null));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [dividerTop && /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Title, {
+      text: title
+    }), children, dividerBottom && /*#__PURE__*/_jsx(Divider, {})]
+  });
 };
 NavDrawerSection.Item = Item;
 NavDrawerSection.defaultProps = {

package/NavDrawer/components/Title/index.js

@@ -7,17 +7,19 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const NavDrawerTitle = ({
   text
 }) => {
   if (!text.length) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: text
-  }));
+  return /*#__PURE__*/_jsx("div", {
+    className: styles,
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: text
+    })
+  });
 };
 NavDrawerTitle.defaultProps = {
   text: ''

package/NavDrawer/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
@@ -11,58 +12,61 @@ import Section from "./components/Section";
 import Title from "./components/Title";
 import { contentStyle, drawerStyle } from "./style";
 import transition from "./transition";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const OPEN = 'navdrawer_open';
 const CLOSE = 'navdrawer_close';
 
 /**
  * The NavDrawer component
  */
-class NavDrawer extends Component {
+let NavDrawer = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
-    this.onEntering = () => {
-      this.props.onOpen();
+  function NavDrawer(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.onEntering = () => {
+      _this.props.onOpen();
     };
-    this.onEntered = () => {
-      if (this.a11yCloseRef.current) {
-        this.a11yCloseRef.current.focus();
+    _this.onEntered = () => {
+      if (_this.a11yCloseRef.current) {
+        _this.a11yCloseRef.current.focus();
       }
     };
-    this.onExited = () => {
-      this.contentRef.current.scrollTop = 0;
-      if (this.triggerElement && typeof this.triggerElement.focus === 'function') {
+    _this.onExited = () => {
+      _this.contentRef.current.scrollTop = 0;
+      if (_this.triggerElement && typeof _this.triggerElement.focus === 'function') {
         // Focus the element that triggered the NavDrawer after it closes
-        this.triggerElement.focus();
+        _this.triggerElement.focus();
       }
     };
-    this.onExiting = () => {
-      this.props.onClose();
+    _this.onExiting = () => {
+      _this.props.onClose();
     };
-    this.open = () => {
+    _this.open = () => {
       // Save a reference to the element that triggered the NavDrawer
-      this.triggerElement = document.activeElement;
-      this.setState({
+      _this.triggerElement = document.activeElement;
+      _this.setState({
         open: true
       });
     };
-    this.close = () => {
-      this.setState({
+    _this.close = () => {
+      _this.setState({
         open: false
       });
     };
-    this.contentRef = /*#__PURE__*/React.createRef();
-    this.a11yCloseRef = /*#__PURE__*/React.createRef();
-    this.state = {
+    _this.contentRef = /*#__PURE__*/React.createRef();
+    _this.a11yCloseRef = /*#__PURE__*/React.createRef();
+    _this.state = {
       open: false
     };
 
     // Save a reference to the element that triggered the NavDrawer
-    this.triggerElement = null;
-    UIEvents.addListener(OPEN, this.open);
-    UIEvents.addListener(CLOSE, this.close);
+    _this.triggerElement = null;
+    UIEvents.addListener(OPEN, _this.open);
+    UIEvents.addListener(CLOSE, _this.close);
+    return _this;
   }
 
   /**
@@ -70,66 +74,75 @@ class NavDrawer extends Component {
    * @param {Object} nextState The next component state.
    * @returns {JSX}
    */
-  shouldComponentUpdate(nextProps, nextState) {
+  _inheritsLoose(NavDrawer, _Component);
+  var _proto = NavDrawer.prototype;
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
     return this.state.open !== nextState.open;
   }
 
   /**
    * The unmount lifecycle hook
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     UIEvents.removeListener(OPEN, this.open);
     UIEvents.removeListener(CLOSE, this.close);
-  }
+  };
   /**
    * @returns {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Transition, {
-      onEntering: this.onEntering,
-      onEntered: this.onEntered,
-      onExited: this.onExited,
-      onExiting: this.onExiting,
-      in: this.state.open,
-      timeout: 300
-    }, state => {
-      const ariaHidden = this.props['aria-hidden'] || state === 'exited';
-      return /*#__PURE__*/React.createElement(ModalStateTracker, {
-        isVisible: this.state.open
-      }, /*#__PURE__*/React.createElement("section", {
-        className: `${drawerStyle} ui-material__nav-drawer`,
-        "data-test-id": "NavDrawer",
-        style: transition[state],
-        "aria-hidden": ariaHidden,
-        tabIndex: "-1"
-      }, /*#__PURE__*/React.createElement(Item, {
-        label: "common.close",
-        ref: this.a11yCloseRef,
-        srOnly: true
-      }), /*#__PURE__*/React.createElement("nav", {
-        className: contentStyle,
-        ref: this.contentRef
-      }, this.props.children)));
-    }), /*#__PURE__*/React.createElement(Backdrop, {
-      isVisible: this.state.open,
-      level: 4,
-      onClick: this.close,
-      opacity: 20
-    }));
-  }
-}
-NavDrawer.close = () => {
-  UIEvents.emit(CLOSE);
-};
-NavDrawer.open = () => {
-  UIEvents.emit(OPEN);
-};
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Transition, {
+        onEntering: this.onEntering,
+        onEntered: this.onEntered,
+        onExited: this.onExited,
+        onExiting: this.onExiting,
+        in: this.state.open,
+        timeout: 300,
+        children: state => {
+          const ariaHidden = this.props['aria-hidden'] || state === 'exited';
+          return /*#__PURE__*/_jsx(ModalStateTracker, {
+            isVisible: this.state.open,
+            children: /*#__PURE__*/_jsxs("section", {
+              className: `${drawerStyle} ui-material__nav-drawer`,
+              "data-test-id": "NavDrawer",
+              style: transition[state],
+              "aria-hidden": ariaHidden,
+              tabIndex: "-1",
+              children: [/*#__PURE__*/_jsx(Item, {
+                label: "common.close",
+                ref: this.a11yCloseRef,
+                srOnly: true
+              }), /*#__PURE__*/_jsx("nav", {
+                className: contentStyle,
+                ref: this.contentRef,
+                children: this.props.children
+              })]
+            })
+          });
+        }
+      }), /*#__PURE__*/_jsx(Backdrop, {
+        isVisible: this.state.open,
+        level: 4,
+        onClick: this.close,
+        opacity: 20
+      })]
+    });
+  };
+  return NavDrawer;
+}(Component);
 NavDrawer.EVENT_OPEN = OPEN;
 NavDrawer.EVENT_CLOSE = CLOSE;
 NavDrawer.Divider = Divider;
 NavDrawer.Item = Item;
 NavDrawer.Section = Section;
 NavDrawer.Title = Title;
+NavDrawer.close = () => {
+  UIEvents.emit(CLOSE);
+};
+NavDrawer.open = () => {
+  UIEvents.emit(OPEN);
+};
 NavDrawer.defaultProps = {
   'aria-hidden': false,
   onClose: noop,

package/NavDrawer/spec.js

@@ -1,21 +1,25 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import NavDrawer from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.unmock('@shopgate/pwa-core');
 jest.mock('@shopgate/engage/components');
 jest.mock('@shopgate/engage/a11y/components');
 describe('NavDrawer', () => {
   it('should match the snapshot', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(NavDrawer, null, "Content"));
+    const wrapper = shallow(/*#__PURE__*/_jsx(NavDrawer, {
+      children: "Content"
+    }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should open and close with an event', () => {
     const onOpen = jest.fn();
     const onClose = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(NavDrawer, {
+    const wrapper = mount(/*#__PURE__*/_jsx(NavDrawer, {
       onOpen: onOpen,
-      onClose: onClose
-    }, "Content"));
+      onClose: onClose,
+      children: "Content"
+    }));
     NavDrawer.open();
     expect(wrapper.state().open).toEqual(true);
     expect(onOpen).toHaveBeenCalled();
@@ -25,7 +29,9 @@ describe('NavDrawer', () => {
     expect(onClose).toHaveBeenCalled();
   });
   it('should close when Backdrop is clicked', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(NavDrawer, null, "Content"));
+    const wrapper = shallow(/*#__PURE__*/_jsx(NavDrawer, {
+      children: "Content"
+    }));
     const backdrop = wrapper.find('Backdrop');
     NavDrawer.open();
     expect(wrapper.state().open).toEqual(true);