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

package/Accordion/components/AccordionContent/index.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useSpring, animated } from 'react-spring';
-import useMeasure from 'react-use/lib/useMeasure';
+import { useMeasure } from 'react-use';
 import * as styles from "./style";
 
 /**
@@ -10,6 +10,7 @@ import * as styles from "./style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function AccordionContent(props) {
   const {
     children,
@@ -36,16 +37,19 @@ function AccordionContent(props) {
     },
     height: open ? contentHeight : 0
   });
-  return /*#__PURE__*/React.createElement(animated.div, {
+  return /*#__PURE__*/_jsx(animated.div, {
     className: classnames('ui-material__accordion-content', styles.content),
     style: expand,
     id: id,
-    "aria-hidden": !open
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles.contentInner, className)
-  }, children)));
+    "aria-hidden": !open,
+    children: /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      children: /*#__PURE__*/_jsx("div", {
+        className: classnames(styles.contentInner, className),
+        children: children
+      })
+    })
+  });
 }
 AccordionContent.defaultProps = {
   open: false,

package/Accordion/components/AccordionContent/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import AccordionContent from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('react-spring', () => ({
   ...jest.requireActual('react-spring'),
   useSpring: jest.fn().mockReturnValue({
@@ -9,22 +10,26 @@ jest.mock('react-spring', () => ({
 }));
 describe('<AccordionContent />', () => {
   it('should render as closed', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(AccordionContent, {
-      id: "some-id"
-    }, /*#__PURE__*/React.createElement("div", {
-      id: "test"
-    }, "Some Child")));
+    const wrapper = mount(/*#__PURE__*/_jsx(AccordionContent, {
+      id: "some-id",
+      children: /*#__PURE__*/_jsx("div", {
+        id: "test",
+        children: "Some Child"
+      })
+    }));
     expect(wrapper.find('#test').text()).toEqual('Some Child');
     expect(wrapper.find('div').get(0).props['aria-hidden']).toEqual(true);
     expect(wrapper).toMatchSnapshot();
   });
   it('should render as open', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(AccordionContent, {
+    const wrapper = mount(/*#__PURE__*/_jsx(AccordionContent, {
       open: true,
-      id: "some-id"
-    }, /*#__PURE__*/React.createElement("div", {
-      id: "test"
-    }, "Some Child")));
+      id: "some-id",
+      children: /*#__PURE__*/_jsx("div", {
+        id: "test",
+        children: "Some Child"
+      })
+    }));
     expect(wrapper.find('#test').text()).toEqual('Some Child');
     expect(wrapper.find('div').get(0).props['aria-hidden']).toEqual(false);
     expect(wrapper).toMatchSnapshot();

package/Accordion/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.string.replace.js";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -28,6 +27,8 @@ import * as styles from "./style";
  * for the accordion header
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 function Accordion(props) {
   const {
     renderLabel,
@@ -47,48 +48,57 @@ function Accordion(props) {
     return null;
   }
   const controlsId = testId ? `${testId}-content`.replace(/[^\w\s]/gi, '-').replace(' ', '-') : 'accordion-content';
-  return /*#__PURE__*/React.createElement("div", {
-    className: "ui-material__accordion-container"
-  }, /*#__PURE__*/React.createElement(AccordionContainer, {
-    open: startOpened
-  }, ({
-    handleOpen,
-    handleClose,
-    open
-  }) => {
-    const clickHandlers = {
-      onClick: open ? handleClose : handleOpen,
-      onKeyDown: open ? handleClose : handleOpen,
-      role
-    };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: classnames('ui-material__accordion-title', className, styles.toggle),
-      "data-test-id": testId
-    }, /*#__PURE__*/React.createElement("div", _extends({}, openWithChevron ? {} : clickHandlers, {
-      key: "accordion-toggle",
-      "aria-expanded": open,
-      "aria-controls": controlsId,
-      "aria-label": handleLabel,
-      className: classnames(styles.labelContainer, {
-        [styles.toggleLeftAligned]: chevronPosition === 'left'
-      })
-    }), renderLabel({
-      open
-    }), /*#__PURE__*/React.createElement("div", _extends({
-      className: classnames(styles.chevronContainer, chevronClassName, {
-        [styles.clickable]: openWithChevron
-      })
-    }, openWithChevron ? clickHandlers : {}, {
-      "aria-label": i18n.text(open ? 'favorites.close_list' : 'favorites.open_list')
-    }), /*#__PURE__*/React.createElement(ChevronIcon, {
-      className: open ? styles.chevronOpen : styles.chevronClosed
-    }))), renderAdditionalHeaderContent && /*#__PURE__*/React.createElement("div", null, renderAdditionalHeaderContent())), /*#__PURE__*/React.createElement(AccordionContent, {
-      open: open,
-      id: controlsId,
-      key: controlsId,
-      className: contentClassName
-    }, children));
-  }));
+  return /*#__PURE__*/_jsx("div", {
+    className: "ui-material__accordion-container",
+    children: /*#__PURE__*/_jsx(AccordionContainer, {
+      open: startOpened,
+      children: ({
+        handleOpen,
+        handleClose,
+        open
+      }) => {
+        const clickHandlers = {
+          onClick: open ? handleClose : handleOpen,
+          onKeyDown: open ? handleClose : handleOpen,
+          role
+        };
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: classnames('ui-material__accordion-title', className, styles.toggle),
+            "data-test-id": testId,
+            children: [/*#__PURE__*/_createElement("div", {
+              ...(openWithChevron ? {} : clickHandlers),
+              key: "accordion-toggle",
+              "aria-expanded": open,
+              "aria-controls": controlsId,
+              "aria-label": handleLabel,
+              className: classnames(styles.labelContainer, {
+                [styles.toggleLeftAligned]: chevronPosition === 'left'
+              })
+            }, renderLabel({
+              open
+            }), /*#__PURE__*/_jsx("div", {
+              className: classnames(styles.chevronContainer, chevronClassName, {
+                [styles.clickable]: openWithChevron
+              }),
+              ...(openWithChevron ? clickHandlers : {}),
+              "aria-label": i18n.text(open ? 'favorites.close_list' : 'favorites.open_list'),
+              children: /*#__PURE__*/_jsx(ChevronIcon, {
+                className: open ? styles.chevronOpen : styles.chevronClosed
+              })
+            })), renderAdditionalHeaderContent && /*#__PURE__*/_jsx("div", {
+              children: renderAdditionalHeaderContent()
+            })]
+          }), /*#__PURE__*/_jsx(AccordionContent, {
+            open: open,
+            id: controlsId,
+            className: contentClassName,
+            children: children
+          }, controlsId)]
+        });
+      }
+    })
+  });
 }
 Accordion.defaultProps = {
   children: null,

package/Accordion/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Accordion from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.unmock('@shopgate/pwa-ui-shared');
 jest.mock('@shopgate/engage/components');
 jest.mock('react-spring', () => ({
@@ -14,22 +15,23 @@ describe('<Accordion />', () => {
     jest.clearAllMocks();
   });
   it('should render with renderLabel prop and children', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Accordion, {
-      renderLabel: () => /*#__PURE__*/React.createElement("div", null),
-      testId: "Some Thing"
-    }, "Some content."));
+    const wrapper = mount(/*#__PURE__*/_jsx(Accordion, {
+      renderLabel: () => /*#__PURE__*/_jsx("div", {}),
+      testId: "Some Thing",
+      children: "Some content."
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('AccordionContent').exists()).toBe(true);
   });
   it('should not render without a renderLabel prop', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Accordion, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Accordion, {
       testId: "Some Thing"
     }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.instance()).toEqual(null);
   });
   it('should not render without children', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Accordion, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Accordion, {
       renderLabel: () => {},
       testId: "Some Thing"
     }));

package/AppBar/components/Below/index.js

@@ -7,18 +7,20 @@ import { APP_BAR_BELOW, APP_BAR_BELOW_BEFORE, APP_BAR_BELOW_AFTER } from '@shopg
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Below({
   elements
 }) {
-  return /*#__PURE__*/React.createElement(Fragment, {
-    key: "below"
-  }, /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_BELOW_BEFORE
-  }), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_BELOW
-  }, elements), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_BELOW_AFTER
-  }));
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_BELOW_BEFORE
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_BELOW,
+      children: elements
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_BELOW_AFTER
+    })]
+  }, "below");
 }
 Below.defaultProps = {
   elements: null

package/AppBar/components/Center/index.js

@@ -7,18 +7,20 @@ import { APP_BAR_CENTER, APP_BAR_CENTER_BEFORE, APP_BAR_CENTER_AFTER } from '@sh
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Center({
   elements
 }) {
-  return /*#__PURE__*/React.createElement(Fragment, {
-    key: "center"
-  }, /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_CENTER_BEFORE
-  }), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_CENTER
-  }, elements), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_CENTER_AFTER
-  }));
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_CENTER_BEFORE
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_CENTER,
+      children: elements
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_CENTER_AFTER
+    })]
+  }, "center");
 }
 Center.defaultProps = {
   elements: null

package/AppBar/components/Field/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styles from "./style";
@@ -5,11 +6,17 @@ import styles from "./style";
 /**
  * The AppBarField component.
  */
-class AppBarField extends PureComponent {
+import { jsx as _jsx } from "react/jsx-runtime";
+let AppBarField = /*#__PURE__*/function (_PureComponent) {
+  function AppBarField() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(AppBarField, _PureComponent);
+  var _proto = AppBarField.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       fieldRef,
       onChange,
@@ -18,18 +25,20 @@ class AppBarField extends PureComponent {
     const {
       __
     } = this.context.i18n();
-    return /*#__PURE__*/React.createElement("form", {
+    return /*#__PURE__*/_jsx("form", {
       className: styles.form,
-      onSubmit: onSubmit
-    }, /*#__PURE__*/React.createElement("input", {
-      className: styles.field,
-      onChange: onChange,
-      placeholder: __('search.placeholder'),
-      ref: fieldRef,
-      "data-test-id": "searchInput"
-    }));
-  }
-}
+      onSubmit: onSubmit,
+      children: /*#__PURE__*/_jsx("input", {
+        className: styles.field,
+        onChange: onChange,
+        placeholder: __('search.placeholder'),
+        ref: fieldRef,
+        "data-test-id": "searchInput"
+      })
+    });
+  };
+  return AppBarField;
+}(PureComponent);
 AppBarField.defaultProps = {
   fieldRef: null,
   onChange: null,

package/AppBar/components/Icon/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styles from "./style";
@@ -5,11 +6,17 @@ import styles from "./style";
 /**
  * The AppBarIcon component.
  */
-class AppBarIcon extends PureComponent {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let AppBarIcon = /*#__PURE__*/function (_PureComponent) {
+  function AppBarIcon() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(AppBarIcon, _PureComponent);
+  var _proto = AppBarIcon.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       background,
       badge: Badge,
@@ -20,7 +27,7 @@ class AppBarIcon extends PureComponent {
       'aria-hidden': ariaHidden,
       'aria-label': ariaLabel
     } = this.props;
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/_jsxs("button", {
       className: styles,
       onClick: onClick,
       style: {
@@ -30,10 +37,12 @@ class AppBarIcon extends PureComponent {
       "data-test-id": testId,
       "aria-hidden": ariaHidden,
       "aria-label": ariaLabel,
-      type: "button"
-    }, /*#__PURE__*/React.createElement(Icon, null), Badge && /*#__PURE__*/React.createElement(Badge, null));
-  }
-}
+      type: "button",
+      children: [/*#__PURE__*/_jsx(Icon, {}), Badge && /*#__PURE__*/_jsx(Badge, {})]
+    });
+  };
+  return AppBarIcon;
+}(PureComponent);
 AppBarIcon.defaultProps = {
   'aria-hidden': null,
   'aria-label': null,

package/AppBar/components/Left/index.js

@@ -7,18 +7,20 @@ import { APP_BAR_LEFT, APP_BAR_LEFT_BEFORE, APP_BAR_LEFT_AFTER } from '@shopgate
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Left({
   elements
 }) {
-  return /*#__PURE__*/React.createElement(Fragment, {
-    key: "left"
-  }, /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_LEFT_BEFORE
-  }), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_LEFT
-  }, elements), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_LEFT_AFTER
-  }));
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_LEFT_BEFORE
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_LEFT,
+      children: elements
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_LEFT_AFTER
+    })]
+  }, "left");
 }
 Left.defaultProps = {
   elements: null

package/AppBar/components/Right/index.js

@@ -7,18 +7,20 @@ import { APP_BAR_RIGHT, APP_BAR_RIGHT_BEFORE, APP_BAR_RIGHT_AFTER } from '@shopg
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Right({
   elements
 }) {
-  return /*#__PURE__*/React.createElement(Fragment, {
-    key: "right"
-  }, /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_RIGHT_BEFORE
-  }), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_RIGHT
-  }, elements), /*#__PURE__*/React.createElement(Portal, {
-    name: APP_BAR_RIGHT_AFTER
-  }));
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_RIGHT_BEFORE
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_RIGHT,
+      children: elements
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: APP_BAR_RIGHT_AFTER
+    })]
+  }, "right");
 }
 Right.defaultProps = {
   elements: null

package/AppBar/components/Title/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -6,33 +7,41 @@ import styles from "./style";
 /**
  * The AppBarTitle component.
  */
-class AppBarTitle extends PureComponent {
+import { jsx as _jsx } from "react/jsx-runtime";
+let AppBarTitle = /*#__PURE__*/function (_PureComponent) {
+  function AppBarTitle() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(AppBarTitle, _PureComponent);
+  var _proto = AppBarTitle.prototype;
   /**
    * @returns {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       onClick,
       title
     } = this.props;
     if (!title) return null;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: classNames(styles, 'theme__app-bar__title'),
       role: "heading",
       "aria-labelledby": "titleLabel",
       "aria-level": "1",
       "data-test-id": `title: ${title}`,
-      tabIndex: -1
-    }, /*#__PURE__*/React.createElement("span", {
-      role: "presentation",
-      onClick: onClick,
-      id: "titleLabel",
-      dangerouslySetInnerHTML: {
-        __html: title
-      }
-    }));
-  }
-}
+      tabIndex: -1,
+      children: /*#__PURE__*/_jsx("span", {
+        role: "presentation",
+        onClick: onClick,
+        id: "titleLabel",
+        dangerouslySetInnerHTML: {
+          __html: title
+        }
+      })
+    });
+  };
+  return AppBarTitle;
+}(PureComponent);
 AppBarTitle.defaultProps = {
   onClick: null
 };

package/AppBar/index.js

@@ -18,6 +18,7 @@ import styles from "./style";
  * Updates the --app-bar-height custom property
  * @param {Object} ref The app bar ref.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const updateAppBarHeight = ref => {
   if (!ref.current) {
     return;
@@ -57,25 +58,28 @@ const AppBar = ({
       observer.disconnect();
     };
   }, [contentRef, observer]);
-  return /*#__PURE__*/React.createElement("header", {
+  return /*#__PURE__*/_jsxs("header", {
     ref: contentRef,
     className: `${styles.outer} ui-material__app-bar`,
     "data-test-id": "Navigator",
     role: "banner",
-    style: style
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: APP_BAR_CONTENT
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.inner
-  }, /*#__PURE__*/React.createElement(Left, {
-    elements: left
-  }), /*#__PURE__*/React.createElement(Center, {
-    elements: center
-  }), /*#__PURE__*/React.createElement(Right, {
-    elements: right
-  }))), /*#__PURE__*/React.createElement(Below, {
-    elements: below
-  }));
+    style: style,
+    children: [/*#__PURE__*/_jsx(SurroundPortals, {
+      portalName: APP_BAR_CONTENT,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: styles.inner,
+        children: [/*#__PURE__*/_jsx(Left, {
+          elements: left
+        }), /*#__PURE__*/_jsx(Center, {
+          elements: center
+        }), /*#__PURE__*/_jsx(Right, {
+          elements: right
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Below, {
+      elements: below
+    })]
+  });
 };
 AppBar.defaultProps = {
   backgroundColor: themeColors.light,

package/BaseDialog/components/Buttons/index.js

@@ -8,22 +8,23 @@ import styles from "../../style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Buttons = ({
   actions
 }) => actions.map(({
   label,
   action,
   disabled = false
-}) => /*#__PURE__*/React.createElement(Button, {
-  key: label,
+}) => /*#__PURE__*/_jsx(Button, {
   className: styles.button,
   flat: true,
   type: "primary",
   onClick: action,
-  disabled: disabled
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  string: label
-})));
+  disabled: disabled,
+  children: /*#__PURE__*/_jsx(I18n.Text, {
+    string: label
+  })
+}, label));
 Buttons.defaultProps = {
   actions: []
 };

package/BaseDialog/components/Buttons/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Button from '@shopgate/pwa-ui-shared/Button';
 import Buttons from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const actions = [{
   label: 'action0',
   action: jest.fn()
@@ -14,12 +15,12 @@ const actions = [{
 }];
 describe('<Buttons />', () => {
   it('should not render if no actions are passed', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Buttons, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Buttons, {}));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.instance()).toEqual(null);
   });
   it('should render buttons', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Buttons, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Buttons, {
       actions: actions
     }));
     expect(wrapper).toMatchSnapshot();