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

package/Button/spec.js

@@ -3,30 +3,36 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Button from "./index";
 import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Button />', () => {
   it('should render as a regular button if type is omitted', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, null, "Press me"));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Button, {
+      children: "Press me"
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.render().text()).toEqual('Press me');
   });
   it('should render as a regular button if type is explicitly defined', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
-      type: "regular"
-    }, "Press me"));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Button, {
+      type: "regular",
+      children: "Press me"
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(trim(wrapper.prop('className'))).toEqual(`ui-shared__button ${styles.regular(false).button}`);
   });
   it('should render as a primary button', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
-      type: "primary"
-    }, "Press me"));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Button, {
+      type: "primary",
+      children: "Press me"
+    }));
     expect(trim(wrapper.prop('className'))).toEqual(`ui-shared__button ${styles.primary(false, false).button}`);
     expect(wrapper).toMatchSnapshot();
   });
   it('should render as a secondary button', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
-      type: "secondary"
-    }, "Press me"));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Button, {
+      type: "secondary",
+      children: "Press me"
+    }));
     expect(trim(wrapper.prop('className'))).toEqual(`ui-shared__button ${styles.secondary(false, false).button}`);
     expect(wrapper).toMatchSnapshot();
   });

package/ButtonLink/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 ActionButton from "../ActionButton";
@@ -7,35 +7,43 @@ import connect from "./connector";
 /**
  * Simple wrapper around ActionButton so it's easy to render buttons which behave as links.
  */
-class ButtonLink extends Component {
-  constructor(...args) {
-    super(...args);
+import { jsx as _jsx } from "react/jsx-runtime";
+let ButtonLink = /*#__PURE__*/function (_Component) {
+  function ButtonLink(...args) {
+    var _this;
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
     /**
      * Opens the given url on click.
      * @returns {undefined}
      */
-    this.handleClick = () => {
-      this.props.navigate(this.props.href);
+    _this.handleClick = () => {
+      _this.props.navigate(_this.props.href);
     };
+    return _this;
   }
+  _inheritsLoose(ButtonLink, _Component);
+  var _proto = ButtonLink.prototype;
   /**
    * Renders an ActionButton and handles link handling.
    * @returns {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       children,
       href,
       navigate,
       ...props
     } = this.props;
-    return /*#__PURE__*/React.createElement(ActionButton, _extends({
+    return /*#__PURE__*/_jsx(ActionButton, {
       className: "ui-shared__button-link",
       onClick: this.handleClick,
-      type: "secondary"
-    }, props), children);
-  }
-}
+      type: "secondary",
+      ...props,
+      children: children
+    });
+  };
+  return ButtonLink;
+}(Component);
 ButtonLink.defaultProps = {
   disabled: false,
   className: '',

package/ButtonLink/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import ActionButton from "../ActionButton";
 import { UnwrappedButtonLink as ButtonLink } from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<ButtonLink>', () => {
   describe('On click action', () => {
     beforeAll(() => {
@@ -10,10 +11,11 @@ describe('<ButtonLink>', () => {
     it('should create component and open page on click', () => {
       const mockedNavigate = jest.fn();
       const link = 'https://example.com';
-      const component = shallow(/*#__PURE__*/React.createElement(ButtonLink, {
+      const component = shallow(/*#__PURE__*/_jsx(ButtonLink, {
         href: link,
-        navigate: mockedNavigate
-      }, "Text inside"));
+        navigate: mockedNavigate,
+        children: "Text inside"
+      }));
       expect(component).toMatchSnapshot();
       component.simulate('click');
       expect(mockedNavigate).toHaveBeenCalledTimes(1);

package/Card/index.js

@@ -7,14 +7,16 @@ import styles from "./style";
  * @param {Object} props The component properties.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Card = ({
   className,
   children,
   id
-}) => /*#__PURE__*/React.createElement("div", {
+}) => /*#__PURE__*/_jsx("div", {
   className: `ui-shared__card ${styles} ${className}`,
-  id: id
-}, children);
+  id: id,
+  children: children
+});
 Card.defaultProps = {
   className: '',
   id: null

package/CardList/components/Item/index.js

@@ -8,6 +8,7 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Item = ({
   children,
   className,
@@ -16,10 +17,11 @@ const Item = ({
   if (!Children.count(children)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(ListItem, {
+  return /*#__PURE__*/_jsx(ListItem, {
     className: `${styles} ${className}`,
-    isSelected: isSelected
-  }, children);
+    isSelected: isSelected,
+    children: children
+  });
 };
 Item.defaultProps = {
   children: null,

package/CardList/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component, Children, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import List from '@shopgate/pwa-common/components/List';
@@ -6,12 +7,18 @@ import Item from "./components/Item";
 /**
  * The CardList component.
  */
-class CardList extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let CardList = /*#__PURE__*/function (_Component) {
+  function CardList() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(CardList, _Component);
+  var _proto = CardList.prototype;
   /**
    * Renders the component.
    * @return {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       children,
       className
@@ -19,16 +26,18 @@ class CardList extends Component {
     if (!Children.count(children)) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(List, {
-      className: `ui-shared__card-list ${className}`
-    }, Children.map(children, child => {
-      if (! /*#__PURE__*/isValidElement(child)) {
-        return null;
-      }
-      return child;
-    }));
-  }
-}
+    return /*#__PURE__*/_jsx(List, {
+      className: `ui-shared__card-list ${className}`,
+      children: Children.map(children, child => {
+        if (! /*#__PURE__*/isValidElement(child)) {
+          return null;
+        }
+        return child;
+      })
+    });
+  };
+  return CardList;
+}(Component);
 CardList.Item = Item;
 CardList.defaultProps = {
   children: null,

package/CartTotalLine/components/Amount/index.js

@@ -8,6 +8,7 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Amount = ({
   amount,
   currency
@@ -15,14 +16,15 @@ const Amount = ({
   if (amount === null) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.amount
-  }, typeof amount === 'string' && /*#__PURE__*/React.createElement(I18n.Text, {
-    string: amount
-  }), typeof amount === 'number' && /*#__PURE__*/React.createElement(I18n.Price, {
-    price: amount,
-    currency: currency
-  }));
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.amount,
+    children: [typeof amount === 'string' && /*#__PURE__*/_jsx(I18n.Text, {
+      string: amount
+    }), typeof amount === 'number' && /*#__PURE__*/_jsx(I18n.Price, {
+      price: amount,
+      currency: currency
+    })]
+  });
 };
 Amount.defaultProps = {
   amount: null,

package/CartTotalLine/components/Hint/index.js

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

package/CartTotalLine/components/Label/index.js

@@ -9,6 +9,7 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX|null}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Label({
   label,
   showSeparator,
@@ -16,19 +17,20 @@ function Label({
   suffix
 }) {
   if (!label) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: styles.label
     });
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.label
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: label,
-    params: labelParams,
-    className: classNames({
-      [styles.labelWithSuffix]: !!suffix
-    })
-  }), suffix, `${showSeparator ? ':' : ''}`);
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.label,
+    children: [/*#__PURE__*/_jsx(I18n.Text, {
+      string: label,
+      params: labelParams,
+      className: classNames({
+        [styles.labelWithSuffix]: !!suffix
+      })
+    }), suffix, `${showSeparator ? ':' : ''}`]
+  });
 }
 Label.defaultProps = {
   label: null,

package/CartTotalLine/components/Spacer/index.js

@@ -5,12 +5,14 @@ import PropTypes from 'prop-types';
  * @param {props} The component props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Spacer = ({
   children,
   className
-}) => /*#__PURE__*/React.createElement("div", {
-  className: className
-}, children);
+}) => /*#__PURE__*/_jsx("div", {
+  className: className,
+  children: children
+});
 Spacer.defaultProps = {
   children: null,
   className: null

package/CartTotalLine/index.js

@@ -10,6 +10,7 @@ import styles from "./style";
 /**
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CartTotalLine = ({
   children,
   type,
@@ -19,13 +20,14 @@ const CartTotalLine = ({
   if (!children) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: classNames(className, `ui-shared__cart-total-line ui-shared__cart-${type}-line`, styles.line, {
       [styles.disabled]: isDisabled,
       [styles[type] || styles.base]: true
     }),
-    "data-test-id": `${type}CartTotal`
-  }, children);
+    "data-test-id": `${type}CartTotal`,
+    children: children
+  });
 };
 CartTotalLine.defaultProps = {
   children: null,

package/Checkbox/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -15,20 +14,22 @@ import styles from "./style";
  * @param {string} props.unCheckedClassName Class for unchecked icon.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Checkbox = ({
   checkedClassName,
   unCheckedClassName,
   className,
   ...props
-}) => /*#__PURE__*/React.createElement(BaseCheckbox, _extends({}, props, {
+}) => /*#__PURE__*/_jsx(BaseCheckbox, {
+  ...props,
   className: `ui-shared__checkbox ${className}`,
-  checkedIcon: /*#__PURE__*/React.createElement(CheckedIcon, {
+  checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {
     className: classNames(styles.icon, checkedClassName, 'checkedIcon')
   }),
-  uncheckedIcon: /*#__PURE__*/React.createElement(UncheckedIcon, {
+  uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {
     className: classNames(styles.icon, unCheckedClassName, 'uncheckedIcon')
   })
-}));
+});
 Checkbox.defaultProps = {
   checkedClassName: styles.checkedIcon,
   className: '',

package/Chip/index.js

@@ -10,6 +10,7 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Chip(props) {
   const {
     removable,
@@ -28,30 +29,35 @@ function Chip(props) {
   useEffect(() => {
     ref.current.removeAttribute('style');
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     className: `ui-shared__chip ${styles.chip(removable, invert)}`,
-    "data-test-id": id
-  }, removable && /*#__PURE__*/React.createElement(Button, {
-    className: styles.removeButton,
-    onClick: handleRemove,
-    testId: "removeFilter",
-    "aria-label": removeLabel
-  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: "<=xs",
-    appAlways: true
-  }, /*#__PURE__*/React.createElement(CrossIcon, {
-    size: 16
-  })), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: ">xs",
-    webOnly: true
-  }, /*#__PURE__*/React.createElement(CrossIcon, {
-    size: 18
-  }))), /*#__PURE__*/React.createElement(Button, {
-    className: styles.name,
-    onClick: onClick,
-    "aria-label": editLabel
-  }, children));
+    "data-test-id": id,
+    children: [removable && /*#__PURE__*/_jsxs(Button, {
+      className: styles.removeButton,
+      onClick: handleRemove,
+      testId: "removeFilter",
+      "aria-label": removeLabel,
+      children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
+        breakpoint: "<=xs",
+        appAlways: true,
+        children: /*#__PURE__*/_jsx(CrossIcon, {
+          size: 16
+        })
+      }), /*#__PURE__*/_jsx(ResponsiveContainer, {
+        breakpoint: ">xs",
+        webOnly: true,
+        children: /*#__PURE__*/_jsx(CrossIcon, {
+          size: 18
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Button, {
+      className: styles.name,
+      onClick: onClick,
+      "aria-label": editLabel,
+      children: children
+    })]
+  });
 }
 Chip.defaultProps = {
   invert: false,

package/Chip/spec.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Chip from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Chip />', () => {
   it('should render a tag', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Chip, {
-      id: "some-id"
-    }, "text"));
+    const wrapper = mount(/*#__PURE__*/_jsx(Chip, {
+      id: "some-id",
+      children: "text"
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('button').length).toEqual(2);
     expect(wrapper.find('button').at(1).text()).toEqual('text');
@@ -13,10 +15,11 @@ describe('<Chip />', () => {
 });
 describe('<Chip />', () => {
   it('should render a without removable icon', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Chip, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Chip, {
       id: "some-id",
-      removable: false
-    }, "text"));
+      removable: false,
+      children: "text"
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('button').length).toEqual(1);
     expect(wrapper.find('button').at(0).text()).toEqual('text');

package/ContextMenu/ContextMenuProvider.js

@@ -10,6 +10,7 @@ import Context from "./ContextMenuProvider.context";
  * @param {Object} props.handleMenuToggle Toggles visibility of the ContextMenu.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ContextMenuProvider = ({
   children,
   handleMenuToggle
@@ -17,9 +18,10 @@ const ContextMenuProvider = ({
   const value = useMemo(() => ({
     handleMenuToggle
   }), [handleMenuToggle]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
 };
 ContextMenuProvider.defaultProps = {
   handleMenuToggle: () => {}

package/ContextMenu/components/Item/index.js

@@ -10,6 +10,7 @@ import { useContextMenu } from "../../ContextMenu.hooks";
  * A delay in ms after that the closeMenu callback gets triggered.
  * @type {number}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CLOSE_DELAY = 250;
 
 /**
@@ -56,17 +57,19 @@ const Item = ({
       handleClick(event);
     }
   }, [handleClick]);
-  return /*#__PURE__*/React.createElement(Glow, {
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(getItemClass(disabled), className),
-    onClick: disabled ? noop : handleClick,
-    "data-test-id": "contextMenuButton",
-    "aria-disabled": disabled,
-    role: "button",
-    tabIndex: disabled ? -1 : 0,
-    onKeyDown: !disabled ? handleKeyPress : undefined
-  }, children));
+  return /*#__PURE__*/_jsx(Glow, {
+    disabled: disabled,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classNames(getItemClass(disabled), className),
+      onClick: disabled ? noop : handleClick,
+      "data-test-id": "contextMenuButton",
+      "aria-disabled": disabled,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: !disabled ? handleKeyPress : undefined,
+      children: children
+    })
+  });
 };
 Item.defaultProps = {
   autoClose: true,

package/ContextMenu/components/Position/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import clamp from 'lodash/clamp';
@@ -6,20 +7,25 @@ import styles from "./style";
 /**
  * The Context Menu Position component.
  */
-class Position extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Position = /*#__PURE__*/function (_Component) {
   /**
    * The Constructor.
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
-    this.elementRef = null;
+  function Position(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.elementRef = null;
+    return _this;
   }
 
   /**
    * Calculate and apply the correct menu position after mounting.
    */
-  componentDidMount() {
+  _inheritsLoose(Position, _Component);
+  var _proto = Position.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     const {
       offset
     } = this.props;
@@ -47,16 +53,18 @@ class Position extends Component {
   /**
    * Renders the component.
    * @returns {JSX}
-   */
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
+   */;
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx("div", {
       ref: ref => {
         this.elementRef = ref;
       },
-      className: styles.container
-    }, this.props.children);
-  }
-}
+      className: styles.container,
+      children: this.props.children
+    });
+  };
+  return Position;
+}(Component);
 Position.defaultProps = {
   children: null,
   offset: {