@shopgate/engage 7.30.0-alpha.8 → 7.30.0-beta.1

package/components/Form/Builder/ElementCheckbox.js

@@ -11,6 +11,7 @@ import FormHelper from "./FormHelper";
  * @param {Object} props.element The data of the element to be rendered
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ElementCheckbox = props => {
   const {
     element,
@@ -23,25 +24,26 @@ const ElementCheckbox = props => {
   if (!visible) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames('container-checkbox', _camelCase(name), 'engage__form-checkbox', 'formBuilderField', {
       validationError: !!errorText
-    })
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    name: name,
-    errorText: errorText,
-    checked: !!value,
-    label: element.label,
-    onChange: element.handleChange,
-    translateErrorText: false,
-    showErrorText: false,
-    disabled: element.disabled
-  }), /*#__PURE__*/React.createElement(FormHelper, {
-    errorText: errorText,
-    element: element,
-    formName: formName,
-    elementName: name
-  }));
+    }),
+    children: [/*#__PURE__*/_jsx(Checkbox, {
+      name: name,
+      errorText: errorText,
+      checked: !!value,
+      label: element.label,
+      onChange: element.handleChange,
+      translateErrorText: false,
+      showErrorText: false,
+      disabled: element.disabled
+    }), /*#__PURE__*/_jsx(FormHelper, {
+      errorText: errorText,
+      element: element,
+      formName: formName,
+      elementName: name
+    })]
+  });
 };
 ElementCheckbox.defaultProps = {
   value: false,

package/components/Form/Builder/ElementMultiSelect.js

@@ -13,6 +13,7 @@ import FormHelper from "./FormHelper";
  * @param {Object} props.element The data of the element to be rendered
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ElementMultiSelect = props => {
   const {
     element,
@@ -26,46 +27,49 @@ const ElementMultiSelect = props => {
     return null;
   }
   const values = [].concat(value).filter(Boolean);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames(_camelCase(name), 'engage__form-multi-select', 'formBuilderField', {
       validationError: !!errorText
-    })
-  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    appAlways: true,
-    breakpoint: "xs"
-  }, /*#__PURE__*/React.createElement(Select, {
-    name: name,
-    required: element?.required,
-    label: element.label,
-    placeholder: element.placeholder,
-    value: values,
-    options: element.options,
-    onChange: element.handleChange,
-    errorText: errorText,
-    isControlled: true,
-    translateErrorText: false,
-    showErrorText: false,
-    disabled: element.disabled,
-    multiple: true,
-    "aria-invalid": !!errorText,
-    "aria-describedby": errorText.length > 0 ? `ariaError-${name}` : null
-  })), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    webOnly: true,
-    breakpoint: ">xs"
-  }, /*#__PURE__*/React.createElement(SelectContextChoices, {
-    label: element.label,
-    placeholder: element.placeholder,
-    value: values,
-    options: element.options,
-    onChange: element.handleChange,
-    errorText: errorText,
-    showErrorText: false
-  })), /*#__PURE__*/React.createElement(FormHelper, {
-    errorText: errorText,
-    element: element,
-    formName: formName,
-    elementName: name
-  }));
+    }),
+    children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
+      appAlways: true,
+      breakpoint: "xs",
+      children: /*#__PURE__*/_jsx(Select, {
+        name: name,
+        required: element?.required,
+        label: element.label,
+        placeholder: element.placeholder,
+        value: values,
+        options: element.options,
+        onChange: element.handleChange,
+        errorText: errorText,
+        isControlled: true,
+        translateErrorText: false,
+        showErrorText: false,
+        disabled: element.disabled,
+        multiple: true,
+        "aria-invalid": !!errorText,
+        "aria-describedby": errorText.length > 0 ? `ariaError-${name}` : null
+      })
+    }), /*#__PURE__*/_jsx(ResponsiveContainer, {
+      webOnly: true,
+      breakpoint: ">xs",
+      children: /*#__PURE__*/_jsx(SelectContextChoices, {
+        label: element.label,
+        placeholder: element.placeholder,
+        value: values,
+        options: element.options,
+        onChange: element.handleChange,
+        errorText: errorText,
+        showErrorText: false
+      })
+    }), /*#__PURE__*/_jsx(FormHelper, {
+      errorText: errorText,
+      element: element,
+      formName: formName,
+      elementName: name
+    })]
+  });
 };
 ElementMultiSelect.defaultProps = {
   value: '',

package/components/Form/Builder/ElementPhoneNumber.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _isEqual from "lodash/isEqual";
 import _upperCase from "lodash/upperCase";
 import _camelCase from "lodash/camelCase";
@@ -21,6 +20,7 @@ import { css } from 'glamor';
 import { themeConfig } from '@shopgate/engage';
 import Label from '@shopgate/pwa-ui-shared/TextField/components/Label';
 import FormHelper from "./FormHelper";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables,
   colors
@@ -167,13 +167,13 @@ const UnwrappedElementPhoneNumber = /*#__PURE__*/React.memo(props => {
      * of the counties array.
      */
     const sanitizedCountrySortOrder = countrySortOrder.filter(countryCode => countries.includes(countryCode));
-    const countryListsEqual = _isEqual([...countries].sort(), [...sanitizedCountrySortOrder].sort());
+    const countryListsEqual = _isEqual([].concat(countries).sort(), [].concat(sanitizedCountrySortOrder).sort());
     /**
      * When list with supported countries has the same entries as the country sort order, we don't
      * need to add a separator to the countryOptionsOrder array since the country picker lists
      * will not show a section with unordered countries.
      */
-    return sanitizedCountrySortOrder.length ? [...sanitizedCountrySortOrder, ...(countryListsEqual ? [] : ['|'])] : [];
+    return sanitizedCountrySortOrder.length ? [].concat(sanitizedCountrySortOrder, countryListsEqual ? [] : ['|']) : [];
   }, [countries, countrySortOrder]);
   const hasCountrySelect = React.useMemo(() => countries.length > 1, [countries.length]);
   const handleChangeWrapped = React.useCallback(phoneValue => {
@@ -197,41 +197,44 @@ const UnwrappedElementPhoneNumber = /*#__PURE__*/React.memo(props => {
     return null;
   }
   const Component = hasCountrySelect ? PhoneInputCountrySelect : PhoneInput;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classnames('formBuilderField', 'engage__form-phone-number', {
       validationError: !!errorText
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: phoneClasses
-  }, /*#__PURE__*/React.createElement(Label, {
-    label: label,
-    isFocused: isFocused,
-    isFloating: isFocused || !!value
-  }), /*#__PURE__*/React.createElement(Component, _extends({
-    defaultCountry: defaultCountry,
-    name: name,
-    value: value || '',
-    onChange: handleChangeWrapped,
-    onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false),
-    disabled: disabled,
-    required: required,
-    "aria-invalid": !!errorText,
-    "aria-describedby": errorText.length > 0 ? `ariaError-${name}` : null
-  }, hasCountrySelect ? {
-    countryOptionsOrder,
-    addInternationalOption: false,
-    flags,
-    countries,
-    labels
-  } : {
-    className: 'PhoneInputInput'
-  }))), /*#__PURE__*/React.createElement(FormHelper, {
-    errorText: errorText,
-    element: element,
-    formName: formName,
-    elementName: name
-  }));
+    }),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: phoneClasses,
+      children: [/*#__PURE__*/_jsx(Label, {
+        label: label,
+        isFocused: isFocused,
+        isFloating: isFocused || !!value
+      }), /*#__PURE__*/_jsx(Component, {
+        defaultCountry: defaultCountry,
+        name: name,
+        value: value || '',
+        onChange: handleChangeWrapped,
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
+        disabled: disabled,
+        required: required,
+        "aria-invalid": !!errorText,
+        "aria-describedby": errorText.length > 0 ? `ariaError-${name}` : null,
+        ...(hasCountrySelect ? {
+          countryOptionsOrder,
+          addInternationalOption: false,
+          flags,
+          countries,
+          labels
+        } : {
+          className: 'PhoneInputInput'
+        })
+      })]
+    }), /*#__PURE__*/_jsx(FormHelper, {
+      errorText: errorText,
+      element: element,
+      formName: formName,
+      elementName: name
+    })]
+  });
 });
 UnwrappedElementPhoneNumber.defaultProps = {
   value: '',

package/components/Form/Builder/ElementRadio.js

@@ -12,6 +12,7 @@ import FormHelper from "./FormHelper";
  * @param {Object} props.element The data of the element to be rendered
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ElementRadio = props => {
   const {
     element,
@@ -24,31 +25,32 @@ const ElementRadio = props => {
   if (!visible) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames(_camelCase(name), 'engage__form-radio', 'formBuilderField', {
       validationError: !!errorText
-    })
-  }, /*#__PURE__*/React.createElement(RadioGroup, {
-    name: name,
-    label: element.label,
-    value: value,
-    onChange: element.handleChange,
-    errorText: errorText,
-    isControlled: true,
-    translateErrorText: false,
-    showErrorText: false,
-    disabled: element.disabled
-  }, Object.keys(element.options).map(itemName => /*#__PURE__*/React.createElement(RadioItem, {
-    key: `${name}_${itemName}`,
-    id: `${name}_${_camelCase(itemName)}`,
-    name: itemName,
-    label: element.options[itemName]
-  }))), /*#__PURE__*/React.createElement(FormHelper, {
-    errorText: errorText,
-    element: element,
-    formName: formName,
-    elementName: name
-  }));
+    }),
+    children: [/*#__PURE__*/_jsx(RadioGroup, {
+      name: name,
+      label: element.label,
+      value: value,
+      onChange: element.handleChange,
+      errorText: errorText,
+      isControlled: true,
+      translateErrorText: false,
+      showErrorText: false,
+      disabled: element.disabled,
+      children: Object.keys(element.options).map(itemName => /*#__PURE__*/_jsx(RadioItem, {
+        id: `${name}_${_camelCase(itemName)}`,
+        name: itemName,
+        label: element.options[itemName]
+      }, `${name}_${itemName}`))
+    }), /*#__PURE__*/_jsx(FormHelper, {
+      errorText: errorText,
+      element: element,
+      formName: formName,
+      elementName: name
+    })]
+  });
 };
 ElementRadio.defaultProps = {
   value: '',

package/components/Form/Builder/ElementSelect.js

@@ -11,6 +11,7 @@ import FormHelper from "./FormHelper";
  * @param {Object} props.element The data of the element to be rendered
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ElementSelect = props => {
   const {
     element,
@@ -31,31 +32,32 @@ const ElementSelect = props => {
     disabled,
     handleChange
   } = element;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames(_camelCase(name), 'engage__form-select', 'formBuilderField', {
       validationError: !!errorText
-    })
-  }, /*#__PURE__*/React.createElement(Select, {
-    name: name,
-    required: required,
-    label: label,
-    placeholder: placeholder,
-    value: value,
-    options: options,
-    onChange: handleChange,
-    errorText: errorText,
-    isControlled: true,
-    translateErrorText: false,
-    showErrorText: false,
-    disabled: disabled,
-    "aria-invalid": !!errorText,
-    "aria-describedby": errorText.length > 0 ? `ariaError-${name}` : null
-  }), /*#__PURE__*/React.createElement(FormHelper, {
-    errorText: errorText,
-    element: element,
-    formName: formName,
-    elementName: name
-  }));
+    }),
+    children: [/*#__PURE__*/_jsx(Select, {
+      name: name,
+      required: required,
+      label: label,
+      placeholder: placeholder,
+      value: value,
+      options: options,
+      onChange: handleChange,
+      errorText: errorText,
+      isControlled: true,
+      translateErrorText: false,
+      showErrorText: false,
+      disabled: disabled,
+      "aria-invalid": !!errorText,
+      "aria-describedby": errorText.length > 0 ? `ariaError-${name}` : null
+    }), /*#__PURE__*/_jsx(FormHelper, {
+      errorText: errorText,
+      element: element,
+      formName: formName,
+      elementName: name
+    })]
+  });
 };
 ElementSelect.defaultProps = {
   value: '',

package/components/Form/Builder/ElementText.js

@@ -7,6 +7,7 @@ import FormHelper from "./FormHelper";
 import { ELEMENT_TYPE_TEXT, ELEMENT_TYPE_NUMBER, ELEMENT_TYPE_EMAIL, ELEMENT_TYPE_PASSWORD, ELEMENT_TYPE_DATE, ELEMENT_TYPE_PHONE } from "./Builder.constants";
 
 // Map element type to input type
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const mapping = {
   [ELEMENT_TYPE_TEXT]: 'text',
   [ELEMENT_TYPE_NUMBER]: 'number',
@@ -41,28 +42,29 @@ const ElementText = props => {
     label
   } = element;
   const type = mapping[element.type];
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames(_camelCase(name), 'engage__form-text', 'formBuilderField', {
       validationError: !!errorText
-    })
-  }, /*#__PURE__*/React.createElement(TextField, {
-    required: required,
-    type: type,
-    name: name,
-    label: label,
-    value: value,
-    onChange: handleChange,
-    errorText: errorText,
-    isControlled: true,
-    translateErrorText: false,
-    showErrorText: false,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(FormHelper, {
-    errorText: errorText,
-    element: element,
-    formName: formName,
-    elementName: name
-  }));
+    }),
+    children: [/*#__PURE__*/_jsx(TextField, {
+      required: required,
+      type: type,
+      name: name,
+      label: label,
+      value: value,
+      onChange: handleChange,
+      errorText: errorText,
+      isControlled: true,
+      translateErrorText: false,
+      showErrorText: false,
+      disabled: disabled
+    }), /*#__PURE__*/_jsx(FormHelper, {
+      errorText: errorText,
+      element: element,
+      formName: formName,
+      elementName: name
+    })]
+  });
 };
 ElementText.defaultProps = {
   value: '',

package/components/Form/Builder/FormHelper.js

@@ -9,26 +9,29 @@ import { sanitizePortalName } from "./helpers/common";
  * @param {Object} props Component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const FormHelper = ({
   errorText,
   element,
   formName,
   elementName
-}) => /*#__PURE__*/React.createElement("div", {
-  className: "formHelper"
-}, /*#__PURE__*/React.createElement(SurroundPortals, {
-  portalName: `${sanitizePortalName(formName)}.${sanitizePortalName(element.id)}.formHelper`,
-  portalProps: {
-    formName,
-    element,
-    errorText
-  }
-}, !!errorText && /*#__PURE__*/React.createElement(ErrorTextCmp, {
-  errorText: errorText,
-  translate: false,
-  elementName: elementName,
-  ariaHidden: true
-})));
+}) => /*#__PURE__*/_jsx("div", {
+  className: "formHelper",
+  children: /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: `${sanitizePortalName(formName)}.${sanitizePortalName(element.id)}.formHelper`,
+    portalProps: {
+      formName,
+      element,
+      errorText
+    },
+    children: !!errorText && /*#__PURE__*/_jsx(ErrorTextCmp, {
+      errorText: errorText,
+      translate: false,
+      elementName: elementName,
+      ariaHidden: true
+    })
+  })
+});
 FormHelper.defaultProps = {
   errorText: null,
   elementName: null