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

package/Form/Select/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';
@@ -9,54 +9,59 @@ import styles from "./style";
 /**
  * A component that provides a styled select for user input in material design.
  */
-class Select extends Component {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let Select = /*#__PURE__*/function (_Component) {
   /**
    * Creates a new text field component.
    * @param {Object} props The component properties.
    */
-  constructor(props) {
-    super(props);
+  function Select(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * @param {string} value The entered text.
      */
-    this.handleChange = ({
+    _this.handleChange = ({
       target
     }) => {
       const {
         multiple
-      } = this.props;
+      } = _this.props;
       let {
         value
       } = target;
       if (multiple) {
         value = Array.from(target.selectedOptions, option => option.value);
       }
-      if (!this.props.isControlled) {
-        this.setState({
+      if (!_this.props.isControlled) {
+        _this.setState({
           value
         });
       }
-      this.props.onChange(value);
+      _this.props.onChange(value);
     };
     /**
      * @param {boolean} isFocused focused
      */
-    this.handleFocusChange = isFocused => {
-      this.setState({
+    _this.handleFocusChange = isFocused => {
+      _this.setState({
         isFocused
       });
     };
-    this.state = {
+    _this.state = {
       value: props.value,
       isFocused: false
     };
+    return _this;
   }
 
   /**
    * Corrects the selected value to the first option when the initial value is not located within
    * the options.
    */
-  componentDidMount() {
+  _inheritsLoose(Select, _Component);
+  var _proto = Select.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     const {
       multiple,
       options
@@ -79,16 +84,16 @@ class Select extends Component {
   /**
    * Update state with new props.
    * @param {Object} nextProps The new props.
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+   */;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
       value: nextProps.value
     });
-  }
+  };
   /**
    * @return {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       name,
       options,
@@ -109,7 +114,7 @@ class Select extends Component {
       value,
       isFocused
     } = this.state;
-    return /*#__PURE__*/React.createElement(FormElement, {
+    return /*#__PURE__*/_jsxs(FormElement, {
       className: `${className} ui-shared__form__select`,
       placeholder: placeholder,
       htmlFor: name,
@@ -120,31 +125,35 @@ class Select extends Component {
       hasValue: !!value || !!options[''],
       hasPlaceholder: !disabled || value !== '',
       disabled: disabled,
-      showErrorText: showErrorText
-    }, /*#__PURE__*/React.createElement("select", _extends({
-      id: name,
-      name: name,
-      onChange: this.handleChange,
-      onFocus: () => this.handleFocusChange(true),
-      onBlur: () => this.handleFocusChange(false),
-      value: value,
-      className: classNames(styles.select, 'select'),
-      disabled: disabled,
-      required: required,
-      "aria-invalid": ariaInvalid,
-      "aria-describedby": ariaDescribedBy
-    }, multiple && {
-      multiple,
-      size
-    }), Object.keys(options).map(key => /*#__PURE__*/React.createElement("option", {
-      className: "option",
-      value: key,
-      key: `${name}_${key}`
-    }, options[key]))), /*#__PURE__*/React.createElement(Chevron, {
-      className: styles.chevron
-    }));
-  }
-}
+      showErrorText: showErrorText,
+      children: [/*#__PURE__*/_jsx("select", {
+        id: name,
+        name: name,
+        onChange: this.handleChange,
+        onFocus: () => this.handleFocusChange(true),
+        onBlur: () => this.handleFocusChange(false),
+        value: value,
+        className: classNames(styles.select, 'select'),
+        disabled: disabled,
+        required: required,
+        "aria-invalid": ariaInvalid,
+        "aria-describedby": ariaDescribedBy,
+        ...(multiple && {
+          multiple,
+          size
+        }),
+        children: Object.keys(options).map(key => /*#__PURE__*/_jsx("option", {
+          className: "option",
+          value: key,
+          children: options[key]
+        }, `${name}_${key}`))
+      }), /*#__PURE__*/_jsx(Chevron, {
+        className: styles.chevron
+      })]
+    });
+  };
+  return Select;
+}(Component);
 Select.defaultProps = {
   'aria-invalid': false,
   'aria-describedby': null,

package/Form/Select/spec.js

@@ -1,7 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { mount } from 'enzyme';
 import Select from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const inputProps = {
   name: 'test-name'
 };
@@ -29,7 +29,10 @@ describe('<Select />', () => {
     it(test, () => {
       const testFixtures = tests[test];
       // eslint-disable-next-line extra-rules/no-single-line-objects
-      const wrapper = mount(/*#__PURE__*/React.createElement(Select, _extends({}, inputProps, testFixtures)));
+      const wrapper = mount(/*#__PURE__*/_jsx(Select, {
+        ...inputProps,
+        ...testFixtures
+      }));
       expect(wrapper).toMatchSnapshot();
     });
   });

package/Form/SelectContextChoices/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, Fragment } from 'react';
+import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import { i18n } from '@shopgate/engage/core';
@@ -11,6 +11,7 @@ import styles from "./style";
  * @param {Object} props .
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SelectContextChoices = ({
   options,
   onChange,
@@ -34,37 +35,40 @@ const SelectContextChoices = ({
       // Eliminate value
       onChange(value.filter(v => v !== key));
     } else {
-      onChange([...value, key]);
+      onChange([].concat(value, [key]));
     }
   }, [onChange, value]);
   const hasValue = !!value && !!value.length;
   const values = hasValue ? Object.values(pick(options, value)) : [];
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(InfoField, {
+  return /*#__PURE__*/_jsxs(InfoField, {
     className: className,
     label: label,
     errorText: errorText,
     showErrorText: showErrorText,
     hasValue: true,
-    rightElement: /*#__PURE__*/React.createElement(Chevron, {
+    rightElement: /*#__PURE__*/_jsx(Chevron, {
       className: styles.chevron
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    role: "button",
-    onClick: () => setOpened(true),
-    "aria-hidden": true,
-    tabIndex: "0",
-    className: styles.toggle
-  }, !hasValue && (placeholder || i18n.text('common.please_choose')), hasValue && values.join(', ')), /*#__PURE__*/React.createElement(ContextMenu, {
-    isOpened: opened,
-    onStateChange: onMenuChange,
-    showToggle: false,
-    scroll: true
-  }, Object.keys(options).map(key => /*#__PURE__*/React.createElement(ContextMenu.Item, {
-    key: key,
-    autoClose: false,
-    onClick: () => onItemClick(key),
-    className: hasValue && value.includes(key) ? styles.itemSelected : ''
-  }, options[key])))));
+    }),
+    children: [/*#__PURE__*/_jsxs("div", {
+      role: "button",
+      onClick: () => setOpened(true),
+      "aria-hidden": true,
+      tabIndex: "0",
+      className: styles.toggle,
+      children: [!hasValue && (placeholder || i18n.text('common.please_choose')), hasValue && values.join(', ')]
+    }), /*#__PURE__*/_jsx(ContextMenu, {
+      isOpened: opened,
+      onStateChange: onMenuChange,
+      showToggle: false,
+      scroll: true,
+      children: Object.keys(options).map(key => /*#__PURE__*/_jsx(ContextMenu.Item, {
+        autoClose: false,
+        onClick: () => onItemClick(key),
+        className: hasValue && value.includes(key) ? styles.itemSelected : '',
+        children: options[key]
+      }, key))
+    })]
+  });
 };
 SelectContextChoices.defaultProps = {
   className: '',

package/Form/SelectContextChoices/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import SelectContextChoices from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/a11y/components');
 jest.mock('@shopgate/engage/components');
 describe('<SelectContextChoices />', () => {
@@ -26,7 +27,9 @@ describe('<SelectContextChoices />', () => {
   Object.keys(tests).forEach(test => {
     it(test, () => {
       const testFixtures = tests[test];
-      const wrapper = shallow(/*#__PURE__*/React.createElement(SelectContextChoices, testFixtures));
+      const wrapper = shallow(/*#__PURE__*/_jsx(SelectContextChoices, {
+        ...testFixtures
+      }));
       expect(wrapper).toMatchSnapshot();
     });
   });

package/Form/TextField/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 Input from '@shopgate/pwa-common/components/Input';
@@ -9,37 +9,42 @@ import style from "./style";
 /**
  * No operational
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const noop = () => {};
 
 /**
  * TextField component
  */
-class TextField extends Component {
+let TextField = /*#__PURE__*/function (_Component) {
   /**
    * Creates a new text field component.
    * @param {Object} props The component properties.
    */
-  constructor(props) {
-    super(props);
+  function TextField(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Internal focus event handler.
      * @param {boolean} isFocused Whether the input component is focused.
      */
-    this.handleFocusChange = isFocused => {
-      this.setState({
+    _this.handleFocusChange = isFocused => {
+      _this.setState({
         isFocused
       });
-      this.props.onFocusChange(isFocused);
+      _this.props.onFocusChange(isFocused);
     };
-    this.state = {
+    _this.state = {
       isFocused: false
     };
+    return _this;
   }
+  _inheritsLoose(TextField, _Component);
+  var _proto = TextField.prototype;
   /**
    * Renders the text field.
    * @return {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       className,
       placeholder,
@@ -50,7 +55,7 @@ class TextField extends Component {
       hasUnderline,
       ...props
     } = this.props;
-    return /*#__PURE__*/React.createElement(FormElement, {
+    return /*#__PURE__*/_jsx(FormElement, {
       className: `${className} ui-shared__form__text-field`,
       htmlFor: props.name,
       placeholder: placeholder,
@@ -59,26 +64,34 @@ class TextField extends Component {
       hasLeftElement: !!leftElement,
       hasUnderline: hasUnderline,
       hasValue: !!props.value,
-      isFocused: this.state.isFocused
-    }, /*#__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.container
-    }, /*#__PURE__*/React.createElement(Input, _extends({}, props, {
-      onFocusChange: this.handleFocusChange,
-      className: `
+      isFocused: this.state.isFocused,
+      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.container,
+          children: /*#__PURE__*/_jsx(Input, {
+            ...props,
+            onFocusChange: this.handleFocusChange,
+            className: `
                 ${style[props.multiLine ? 'multiLine' : 'input']} 
                 ${leftElement ? style.leftOffset : ''}
               `,
-      validateOnBlur: true
-    }))), rightElement && /*#__PURE__*/React.createElement(Grid.Item, {
-      grow: 0,
-      className: style.element
-    }, rightElement)));
-  }
-}
+            validateOnBlur: true
+          })
+        }), rightElement && /*#__PURE__*/_jsx(Grid.Item, {
+          grow: 0,
+          className: style.element,
+          children: rightElement
+        })]
+      })
+    });
+  };
+  return TextField;
+}(Component);
 TextField.defaultProps = {
   attributes: null,
   className: '',

package/Form/TextField/spec.js

@@ -1,35 +1,40 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { mount } from 'enzyme';
 import TextField from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const inputProps = {
   name: 'test-input'
 };
 describe('<TextField>', () => {
   it('should render a simple text field', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, inputProps));
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('input').length).toBe(1);
   });
   it('should render the text field as password', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       password: true
-    })));
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('input[type="password"]').length).toBe(1);
   });
   it('should render the text field with a default value', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       value: "FooBar"
-    })));
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('input[value="FooBar"]').length).toBe(1);
   });
   it('should trigger the onChange callback', () => {
     const onChangeMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       onChange: onChangeMock
-    })));
+    }));
     wrapper.find('input').simulate('change', {
       target: {
         value: 'a'
@@ -39,7 +44,9 @@ describe('<TextField>', () => {
     expect(wrapper.find('input').props().value).toEqual('a');
   });
   it('should receive the correct value while typing', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, inputProps));
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps
+    }));
     const input = wrapper.find('input');
     input.simulate('change', {
       target: {
@@ -50,9 +57,10 @@ describe('<TextField>', () => {
     expect(input.instance().value).toBe('foobar');
   });
   it('should sanitize the input', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       onSanitize: value => value.toUpperCase()
-    })));
+    }));
     const input = wrapper.find('input');
     input.simulate('change', {
       target: {
@@ -64,17 +72,19 @@ describe('<TextField>', () => {
   });
   it('should trigger the validation callback', () => {
     const onValidateMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       onValidate: onValidateMock
-    })));
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(onValidateMock).toHaveBeenCalled();
   });
   it('should focus the input', () => {
     const onFocusMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       onFocusChange: onFocusMock
-    })));
+    }));
     const input = wrapper.find('SimpleInput');
     expect(wrapper).toMatchSnapshot();
     expect(input.instance().isFocused).toBe(false);
@@ -85,25 +95,28 @@ describe('<TextField>', () => {
   });
   it('should show the error message', () => {
     const errorText = 'This is an error here';
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       errorText: errorText
-    })));
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('ErrorText').find('Translate').at(0).props().string).toEqual(errorText);
   });
   it('should show the label', () => {
     const label = 'This is the label';
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       label: label
-    })));
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('Label').find('Translate').props().string).toEqual(label);
   });
   it('should show the placeholder text', () => {
     const placeholder = 'This is the placeholder text';
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       placeholder: placeholder
-    })));
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('Placeholder').find('Translate').at(0).props().string).toEqual(placeholder);
   });

package/Form/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
@@ -5,53 +6,60 @@ import PropTypes from 'prop-types';
  * Form component that handles keyboard submit, next buttons, ...
  * @deprecated Use `@shopgate/engage/components/Form` instead.
  */
-class Form extends PureComponent {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Form = /*#__PURE__*/function (_PureComponent) {
   /**
    * Initializes the form component.
    * @param {Object} props The components props.
    */
-  constructor(props) {
-    super(props);
+  function Form(props) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
     /**
      * Handles the form submit.
      * @param {Object} event The event that caused the submit.
      */
-    this.handleSubmit = event => {
+    _this.handleSubmit = event => {
       event.preventDefault();
-      const inputFocused = [...this.formElement.current.querySelectorAll('input')].some(input => document.activeElement === input);
+      const inputFocused = [].concat(_this.formElement.current.querySelectorAll('input')).some(input => document.activeElement === input);
       if (inputFocused) {
         document.activeElement.blur();
       }
-      this.props.onSubmit();
+      _this.props.onSubmit();
     };
     /**
      * Handles form submits by key.
      * @param {Object} event The event that caused the keypress.
      */
-    this.handleKeyPress = event => {
+    _this.handleKeyPress = event => {
       // Enter key and on iOS also the "Done" button.
       if (event.which === 13) {
-        this.handleSubmit(event);
+        _this.handleSubmit(event);
       }
     };
-    this.formElement = /*#__PURE__*/React.createRef();
+    _this.formElement = /*#__PURE__*/React.createRef();
+    return _this;
   }
+  _inheritsLoose(Form, _PureComponent);
+  var _proto = Form.prototype;
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-    return /*#__PURE__*/React.createElement("form", {
+    return /*#__PURE__*/_jsx("form", {
       action: "#",
       onSubmit: this.handleSubmit,
       onKeyPress: this.handleKeyPress,
       ref: this.formElement,
-      className: "ui-shared__form"
-    }, this.props.children);
+      className: "ui-shared__form",
+      children: this.props.children
+    });
     /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
-  }
-}
+  };
+  return Form;
+}(PureComponent);
 Form.defaultProps = {
   onSubmit: () => {}
 };

package/FormElement/components/ErrorText/index.js

@@ -9,21 +9,23 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ErrorText = ({
   className,
   errorText,
   translate,
   elementName,
   ariaHidden
-}) => /*#__PURE__*/React.createElement("div", {
+}) => /*#__PURE__*/_jsxs("div", {
   id: `ariaError-${elementName}`,
   className: classNames(className, styles, 'errorText'),
   "aria-live": "assertive",
   "aria-atomic": "true",
-  "aria-hidden": ariaHidden
-}, translate && /*#__PURE__*/React.createElement(I18n.Text, {
-  string: errorText
-}), !translate && errorText);
+  "aria-hidden": ariaHidden,
+  children: [translate && /*#__PURE__*/_jsx(I18n.Text, {
+    string: errorText
+  }), !translate && errorText]
+});
 ErrorText.defaultProps = {
   className: null,
   errorText: null,

package/FormElement/components/Label/index.js

@@ -9,6 +9,7 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Label = ({
   hasErrorMessage,
   htmlFor,
@@ -18,14 +19,15 @@ const Label = ({
   labelStatic
 }) => {
   const labelStyles = styles.labelStyles(isFocused, isFloating, hasErrorMessage, labelStatic);
-  return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/label-has-associated-control */React.createElement("label", {
+  return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/label-has-associated-control */_jsx("label", {
     htmlFor: htmlFor,
     className: classNames(labelStyles, 'label', {
       floating: isFloating
+    }),
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: label
     })
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: label
-  }));
+  });
 };
 Label.defaultProps = {
   htmlFor: '',