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

package/Form/Builder/spec.js

@@ -2,9 +2,11 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import FormBuilder from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+jest.mock('@shopgate/engage/components');
 describe('<FormBuilder />', () => {
   it('should render empty form', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(FormBuilder, {
+    const wrapper = mount(/*#__PURE__*/_jsx(FormBuilder, {
       config: {
         fields: {}
       },
@@ -14,7 +16,7 @@ describe('<FormBuilder />', () => {
     expect(wrapper).toMatchSnapshot();
   });
   it('should render two text fields', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(FormBuilder, {
+    const wrapper = mount(/*#__PURE__*/_jsx(FormBuilder, {
       config: {
         fields: {
           firstName: {
@@ -36,7 +38,7 @@ describe('<FormBuilder />', () => {
     expect(wrapper.find('TextField').length).toEqual(2);
   });
   it('should not render invisible field', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(FormBuilder, {
+    const wrapper = mount(/*#__PURE__*/_jsx(FormBuilder, {
       config: {
         fields: {
           firstName: {
@@ -53,7 +55,7 @@ describe('<FormBuilder />', () => {
     expect(wrapper.find('TextField').length).toEqual(0);
   });
   it('should hide element if setVisibilty rule applies', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(FormBuilder, {
+    const wrapper = mount(/*#__PURE__*/_jsx(FormBuilder, {
       config: {
         fields: {
           foo: {
@@ -95,7 +97,7 @@ describe('<FormBuilder />', () => {
     expect(wrapper.find('TextField').length).toEqual(1);
   });
   it('should reset value when rule applies', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(FormBuilder, {
+    const wrapper = mount(/*#__PURE__*/_jsx(FormBuilder, {
       config: {
         fields: {
           foo: {
@@ -149,7 +151,7 @@ describe('<FormBuilder />', () => {
   });
   it('should call onChange callback when input is changed', () => {
     const handleUpdate = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(FormBuilder, {
+    const wrapper = mount(/*#__PURE__*/_jsx(FormBuilder, {
       config: {
         fields: {
           foo: {
@@ -186,9 +188,10 @@ describe('<FormBuilder />', () => {
   });
   describe('FormBuilder::elementChangeHandler', () => {
     it('should take the updated state from action listener', () => {
-      // Create mocked Form builder.
       const handleUpdate = jest.fn();
-      const builder = new FormBuilder({
+      const ref = /*#__PURE__*/React.createRef();
+      mount(/*#__PURE__*/_jsx(FormBuilder, {
+        ref: ref,
         validationErrors: [],
         config: {
           fields: {
@@ -200,9 +203,11 @@ describe('<FormBuilder />', () => {
             }
           }
         },
-        handleUpdate
-      });
-      builder.actionListener.notify = () => ({
+        name: "foo",
+        id: "foo",
+        handleUpdate: handleUpdate
+      }));
+      ref.current.actionListener.notify = () => ({
         formData: {
           foo: 'bar'
         },
@@ -213,7 +218,7 @@ describe('<FormBuilder />', () => {
       });
 
       // Trigger update
-      builder.elementChangeHandler('foo', 'bar');
+      ref.current.elementChangeHandler('foo', 'bar');
 
       // Test
       expect(handleUpdate).toHaveBeenCalledWith({
@@ -223,7 +228,9 @@ describe('<FormBuilder />', () => {
     it('should consider backend validations', () => {
       // Create mocked Form builder.
       const handleUpdate = jest.fn();
-      const builder = new FormBuilder({
+      const ref = /*#__PURE__*/React.createRef();
+      mount(/*#__PURE__*/_jsx(FormBuilder, {
+        ref: ref,
         validationErrors: [{}],
         config: {
           fields: {
@@ -235,9 +242,11 @@ describe('<FormBuilder />', () => {
             }
           }
         },
-        handleUpdate
-      });
-      builder.actionListener.notify = () => ({
+        name: "foo",
+        id: "foo",
+        handleUpdate: handleUpdate
+      }));
+      ref.current.actionListener.notify = () => ({
         formData: {
           foo: 'bar'
         },
@@ -248,7 +257,7 @@ describe('<FormBuilder />', () => {
       });
 
       // Trigger update
-      builder.elementChangeHandler('foo', 'bar');
+      ref.current.elementChangeHandler('foo', 'bar');
 
       // Test
       expect(handleUpdate).toHaveBeenCalledWith({
@@ -293,7 +302,7 @@ describe('<FormBuilder />', () => {
         ...field1,
         sortOrder: 2
       }];
-      expect(fields.sort(builder.elementSortFunc)).toEqual([...fields]);
+      expect(fields.sort(builder.elementSortFunc)).toEqual([].concat(fields));
     });
   });
 });

package/Form/Checkbox/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -27,11 +27,17 @@ import style from "./style";
  * @extends {React.Component<Props>}
  * @returns {JSX.Element}
  */
-class Checkbox extends PureComponent {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Checkbox = /*#__PURE__*/function (_PureComponent) {
+  function Checkbox() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(Checkbox, _PureComponent);
+  var _proto = Checkbox.prototype;
   /**
    * @return {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       name,
       label,
@@ -43,7 +49,7 @@ class Checkbox extends PureComponent {
       checkboxClassName,
       ...restProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(FormElement, {
+    return /*#__PURE__*/_jsx(FormElement, {
       className: classNames(className, style.root, 'checkbox', 'ui-shared__form__checkbox'),
       htmlFor: name,
       errorText: errorText,
@@ -51,23 +57,27 @@ class Checkbox extends PureComponent {
       hasUnderline: false,
       hasPlaceholder: false,
       disabled: restProps.disabled,
-      showErrorText: showErrorText
-    }, /*#__PURE__*/React.createElement(UICheckbox, _extends({}, restProps, {
-      className: checkboxClassName,
-      name: name,
-      onCheck: onChange,
-      checkedClassName: `${className} ${style.checked}`,
-      unCheckedClassName: className,
-      labelPosition: "right",
-      label: typeof label === 'string' ? /*#__PURE__*/React.createElement("div", {
-        className: classNames(style.labelWrapper, 'label')
-      }, /*#__PURE__*/React.createElement(I18n.Text, {
-        className: style.label,
-        string: label
-      })) : label
-    })));
-  }
-}
+      showErrorText: showErrorText,
+      children: /*#__PURE__*/_jsx(UICheckbox, {
+        ...restProps,
+        className: checkboxClassName,
+        name: name,
+        onCheck: onChange,
+        checkedClassName: `${className} ${style.checked}`,
+        unCheckedClassName: className,
+        labelPosition: "right",
+        label: typeof label === 'string' ? /*#__PURE__*/_jsx("div", {
+          className: classNames(style.labelWrapper, 'label'),
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            className: style.label,
+            string: label
+          })
+        }) : label
+      })
+    });
+  };
+  return Checkbox;
+}(PureComponent);
 Checkbox.defaultProps = {
   className: '',
   checkboxClassName: undefined,

package/Form/InfoField/index.js

@@ -8,6 +8,7 @@ import style from "./style";
  * @param {Object} props .
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const InfoField = props => {
   const {
     className,
@@ -20,24 +21,30 @@ const InfoField = props => {
     hasValue,
     showErrorText
   } = props;
-  return /*#__PURE__*/React.createElement(FormElement, {
+  return /*#__PURE__*/_jsx(FormElement, {
     className: className,
     label: label,
     errorText: errorText,
     hasUnderline: hasUnderline,
     isFocused: false,
     hasValue: hasValue,
-    showErrorText: showErrorText
-  }, /*#__PURE__*/React.createElement(Grid, null, leftElement && /*#__PURE__*/React.createElement(Grid.Item, {
-    grow: 0,
-    className: style.element
-  }, leftElement), /*#__PURE__*/React.createElement(Grid.Item, {
-    grow: 1,
-    className: `${style.info} info-field`
-  }, children), rightElement && /*#__PURE__*/React.createElement(Grid.Item, {
-    grow: 0,
-    className: style.element
-  }, rightElement)));
+    showErrorText: showErrorText,
+    children: /*#__PURE__*/_jsxs(Grid, {
+      children: [leftElement && /*#__PURE__*/_jsx(Grid.Item, {
+        grow: 0,
+        className: style.element,
+        children: leftElement
+      }), /*#__PURE__*/_jsx(Grid.Item, {
+        grow: 1,
+        className: `${style.info} info-field`,
+        children: children
+      }), rightElement && /*#__PURE__*/_jsx(Grid.Item, {
+        grow: 0,
+        className: style.element,
+        children: rightElement
+      })]
+    })
+  });
 };
 InfoField.defaultProps = {
   className: '',

package/Form/InfoField/spec.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import InfoField from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<InfoField>', () => {
   it('should render info field', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(InfoField, null, 'Some info text'));
+    const wrapper = shallow(/*#__PURE__*/_jsx(InfoField, {
+      children: "Some info text"
+    }));
     expect(wrapper).toMatchSnapshot();
   });
 });

package/Form/Password/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 ToggleIcon from "../../ToggleIcon";
 import VisibilityIcon from "../../icons/VisibilityIcon";
@@ -9,47 +9,54 @@ import style from "./style";
 /**
  * A component that provides a password field with visibility toggle.
  */
-class Password extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Password = /*#__PURE__*/function (_Component) {
   /**
    * Initializes the component.
    * @param {Object} props The components props.
    */
-  constructor(props) {
-    super(props);
+  function Password(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * @param {boolean} isVisible The next isVisible state.
      */
-    this.togglePasswordVisibility = isVisible => {
-      this.setState({
+    _this.togglePasswordVisibility = isVisible => {
+      _this.setState({
         isVisible
       });
     };
-    this.state = {
+    _this.state = {
       isVisible: false
     };
+    return _this;
   }
+  _inheritsLoose(Password, _Component);
+  var _proto = Password.prototype;
   /**
    * @return {*}
    */
-  render() {
+  _proto.render = function render() {
     const {
       isVisible
     } = this.state;
-    return /*#__PURE__*/React.createElement(TextField, _extends({}, this.props, {
+    return /*#__PURE__*/_jsx(TextField, {
+      ...this.props,
       className: `ui-shared__form__password ${this.props.className}`,
-      rightElement: /*#__PURE__*/React.createElement(ToggleIcon, {
+      rightElement: /*#__PURE__*/_jsx(ToggleIcon, {
         on: isVisible,
-        onIcon: /*#__PURE__*/React.createElement(VisibilityIcon, {
+        onIcon: /*#__PURE__*/_jsx(VisibilityIcon, {
           size: 24
         }),
-        offIcon: /*#__PURE__*/React.createElement(VisibilityOffIcon, {
+        offIcon: /*#__PURE__*/_jsx(VisibilityOffIcon, {
           size: 24,
           className: style.visOff
         }),
         toggleHandler: this.togglePasswordVisibility
       }),
       type: isVisible ? 'text' : 'password'
-    }));
-  }
-}
+    });
+  };
+  return Password;
+}(Component);
 export default Password;

package/Form/Password/spec.js

@@ -1,21 +1,24 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { mount } from 'enzyme';
 import Password from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const inputProps = {
   name: 'test-input'
 };
 describe('<Password>', () => {
   it('should render a password field', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Password, inputProps));
+    const wrapper = mount(/*#__PURE__*/_jsx(Password, {
+      ...inputProps
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('input[type="password"]').length).toBe(1);
   });
   it('should trigger the onChange callback', () => {
     const onChangeMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(Password, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Password, {
+      ...inputProps,
       onChange: onChangeMock
-    })));
+    }));
     wrapper.find('input').simulate('change', {
       target: {
         value: 'a'
@@ -25,7 +28,9 @@ describe('<Password>', () => {
     expect(wrapper.find('input').props().value).toEqual('a');
   });
   it('should toggle password visibility', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Password, inputProps));
+    const wrapper = mount(/*#__PURE__*/_jsx(Password, {
+      ...inputProps
+    }));
     const input = wrapper.find('ToggleIcon');
     expect(wrapper.find('input[type="password"]').length).toBe(1);
     input.simulate('click');

package/Form/RadioGroup/components/Item/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import _camelCase from "lodash/camelCase";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -9,12 +9,18 @@ import style from "./style";
 /**
  * RadioItem component.
  */
-class RadioItem extends PureComponent {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let RadioItem = /*#__PURE__*/function (_PureComponent) {
+  function RadioItem() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(RadioItem, _PureComponent);
+  var _proto = RadioItem.prototype;
   /**
    * Renders the component.
    * @returns {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       label: ItemLabel,
       name,
@@ -27,31 +33,34 @@ class RadioItem extends PureComponent {
     const {
       disabled
     } = attributes || {};
-    return /*#__PURE__*/React.createElement("label", {
+    return /*#__PURE__*/_jsxs("label", {
       className: classNames(style.container, className, {
         [style.disabled]: !!disabled
       }, _camelCase(name), 'radioItem'),
-      htmlFor: id || name
-    }, checked && /*#__PURE__*/React.createElement(CheckedIcon, {
-      className: classNames(style.active, style.icon, 'checkedIcon')
-    }), !checked && /*#__PURE__*/React.createElement(UncheckedIcon, {
-      className: classNames(style.icon, 'uncheckedIcon')
-    }), /*#__PURE__*/React.createElement("input", _extends({
-      className: classNames('sr-only', 'input'),
-      checked: checked,
-      id: id || name,
-      type: "radio",
-      name: name,
-      onChange: onChange,
-      "aria-labelledby": `${id || name}-label`
-    }, attributes)), /*#__PURE__*/React.createElement(I18n.Text, {
-      string: ItemLabel,
-      "aria-hidden": true,
-      id: `${id || name}-label`,
-      className: classNames(style.label, 'label')
-    }));
-  }
-}
+      htmlFor: id || name,
+      children: [checked && /*#__PURE__*/_jsx(CheckedIcon, {
+        className: classNames(style.active, style.icon, 'checkedIcon')
+      }), !checked && /*#__PURE__*/_jsx(UncheckedIcon, {
+        className: classNames(style.icon, 'uncheckedIcon')
+      }), /*#__PURE__*/_jsx("input", {
+        className: classNames('sr-only', 'input'),
+        checked: checked,
+        id: id || name,
+        type: "radio",
+        name: name,
+        onChange: onChange,
+        "aria-labelledby": `${id || name}-label`,
+        ...attributes
+      }), /*#__PURE__*/_jsx(I18n.Text, {
+        string: ItemLabel,
+        "aria-hidden": true,
+        id: `${id || name}-label`,
+        className: classNames(style.label, 'label')
+      })]
+    });
+  };
+  return RadioItem;
+}(PureComponent);
 RadioItem.defaultProps = {
   attributes: null,
   id: null,

package/Form/RadioGroup/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -7,51 +8,56 @@ import style from "./style";
 /**
  * RadioGroup component.
  */
-class RadioGroup extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let RadioGroup = /*#__PURE__*/function (_Component) {
   /**
    * Initializes the component.
    * @param {Object} props The components props.
    */
-  constructor(props) {
-    super(props);
+  function RadioGroup(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * @param {string} event click from radio element
      */
-    this.handleChange = ({
+    _this.handleChange = ({
       target: {
         name
       }
     }) => {
-      if (this.props.disabled) {
+      if (_this.props.disabled) {
         return;
       }
-      if (!this.props.isControlled) {
-        this.setState({
+      if (!_this.props.isControlled) {
+        _this.setState({
           value: name
         });
       }
-      this.props.onChange(name);
+      _this.props.onChange(name);
     };
-    this.state = {
+    _this.state = {
       value: props.value
     };
+    return _this;
   }
 
   /**
    * @param {Object} nextProps props
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(RadioGroup, _Component);
+  var _proto = RadioGroup.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.isControlled && this.state.value !== nextProps.value) {
       this.setState({
         value: nextProps.value
       });
     }
-  }
+  };
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       children,
       className,
@@ -63,7 +69,7 @@ class RadioGroup extends Component {
       disabled,
       showErrorText
     } = this.props;
-    return /*#__PURE__*/React.createElement(FormElement, {
+    return /*#__PURE__*/_jsx(FormElement, {
       className: classNames(className, 'radioGroup', 'ui-shared__form__radio-group', {
         disabled
       }),
@@ -74,21 +80,24 @@ class RadioGroup extends Component {
       showErrorText: showErrorText,
       htmlFor: "none",
       hasUnderline: false,
-      hasValue: true
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames(style.container(direction), 'radioGroup')
-    }, Children.map(children, child => {
-      if (!child) {
-        return null;
-      }
-      return /*#__PURE__*/cloneElement(child, {
-        key: `${name}_${child.props.name}`,
-        checked: this.state.value === child.props.name,
-        onChange: this.handleChange
-      });
-    })));
-  }
-}
+      hasValue: true,
+      children: /*#__PURE__*/_jsx("div", {
+        className: classNames(style.container(direction), 'radioGroup'),
+        children: Children.map(children, child => {
+          if (!child) {
+            return null;
+          }
+          return /*#__PURE__*/cloneElement(child, {
+            key: `${name}_${child.props.name}`,
+            checked: this.state.value === child.props.name,
+            onChange: this.handleChange
+          });
+        })
+      })
+    });
+  };
+  return RadioGroup;
+}(Component);
 RadioGroup.defaultProps = {
   onChange: () => {},
   children: null,