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

package/ContextMenu/index.js

@@ -25,6 +25,7 @@ import ContextMenuProvider from "./ContextMenuProvider";
   * @param {boolean} props.showToggle Whether the toggle button should be shown.
   * @returns {JSX}
   */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ContextMenu = props => {
   const {
     children,
@@ -75,52 +76,61 @@ const ContextMenu = props => {
     left: 0
   };
   const useScroll = typeof scroll === 'boolean' && !!scroll;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     "data-test-id": "contextMenu",
     ref: elementRef,
-    className: classNames(styles.container, classes.container, 'ui-shared__context-menu')
-  }, showToggle && /*#__PURE__*/React.createElement("button", {
-    className: classNames(styles.button, classes.button, {
-      [styles.disabled]: disabled
-    }),
-    onClick: handleMenuToggle,
-    disabled: disabled,
-    type: "button",
-    "aria-label": i18n.text('navigation.open_menu'),
-    "aria-haspopup": "true",
-    "aria-expanded": active,
-    "aria-controls": "contextMenuDialog"
-  }, /*#__PURE__*/React.createElement(MoreVertIcon, {
-    "aria-hidden": true
-  })), /*#__PURE__*/React.createElement(ConnectedReactPortal, {
-    isOpened: active
-  }, /*#__PURE__*/React.createElement(FocusTrap, {
-    active: active
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.overlay
-  }, /*#__PURE__*/React.createElement(Backdrop, {
-    isVisible: true,
-    level: 0,
-    opacity: 0,
-    onClick: handleMenuToggle
-  }), /*#__PURE__*/React.createElement(Position, {
-    offset: offset
-  }, /*#__PURE__*/React.createElement(ContextMenuProvider, {
-    handleMenuToggle: handleMenuToggle
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.menu, {
-      [styles.scrollable]: useScroll
-    }),
-    ref: menuRef,
-    tabIndex: "-1",
-    "aria-modal": "true",
-    role: "dialog"
-  }, children, /*#__PURE__*/React.createElement("button", {
-    onClick: handleMenuToggle,
-    className: "sr-only",
-    "aria-label": i18n.text('common.close'),
-    type: "button"
-  }, i18n.text('common.close')))))))));
+    className: classNames(styles.container, classes.container, 'ui-shared__context-menu'),
+    children: [showToggle && /*#__PURE__*/_jsx("button", {
+      className: classNames(styles.button, classes.button, {
+        [styles.disabled]: disabled
+      }),
+      onClick: handleMenuToggle,
+      disabled: disabled,
+      type: "button",
+      "aria-label": i18n.text('navigation.open_menu'),
+      "aria-haspopup": "true",
+      "aria-expanded": active,
+      "aria-controls": "contextMenuDialog",
+      children: /*#__PURE__*/_jsx(MoreVertIcon, {
+        "aria-hidden": true
+      })
+    }), /*#__PURE__*/_jsx(ConnectedReactPortal, {
+      isOpened: active,
+      children: /*#__PURE__*/_jsx(FocusTrap, {
+        active: active,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: styles.overlay,
+          children: [/*#__PURE__*/_jsx(Backdrop, {
+            isVisible: true,
+            level: 0,
+            opacity: 0,
+            onClick: handleMenuToggle
+          }), /*#__PURE__*/_jsx(Position, {
+            offset: offset,
+            children: /*#__PURE__*/_jsx(ContextMenuProvider, {
+              handleMenuToggle: handleMenuToggle,
+              children: /*#__PURE__*/_jsxs("div", {
+                className: classNames(styles.menu, {
+                  [styles.scrollable]: useScroll
+                }),
+                ref: menuRef,
+                tabIndex: "-1",
+                "aria-modal": "true",
+                role: "dialog",
+                children: [children, /*#__PURE__*/_jsx("button", {
+                  onClick: handleMenuToggle,
+                  className: "sr-only",
+                  "aria-label": i18n.text('common.close'),
+                  type: "button",
+                  children: i18n.text('common.close')
+                })]
+              })
+            })
+          })]
+        })
+      })
+    })]
+  });
 };
 ContextMenu.defaultProps = {
   children: null,

package/ContextMenu/spec.js

@@ -3,7 +3,9 @@ import { mount, shallow } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import Backdrop from '@shopgate/pwa-common/components/Backdrop';
 import ContextMenu from "./index";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components');
+jest.mock('@shopgate/engage/a11y/components');
 global.requestAnimationFrame = fn => fn();
 jest.useFakeTimers();
 describe('<ContextMenu />', () => {
@@ -12,25 +14,30 @@ describe('<ContextMenu />', () => {
   const numMenuItems = 2;
   describe('Snapshot test', () => {
     it('should match snapshot', () => {
-      const wrapper = shallow(/*#__PURE__*/React.createElement(ContextMenu, {
-        isOpened: true
-      }, /*#__PURE__*/React.createElement(ContextMenu.Item, {
-        onClick: mockItemAClick,
-        className: "menu-active-item"
-      }, 'Item A'), /*#__PURE__*/React.createElement(ContextMenu.Item, {
-        onClick: mockItemBClick,
-        className: "menu-active-item"
-      }, 'Item B')));
+      const wrapper = shallow(/*#__PURE__*/_jsxs(ContextMenu, {
+        isOpened: true,
+        children: [/*#__PURE__*/_jsx(ContextMenu.Item, {
+          onClick: mockItemAClick,
+          className: "menu-active-item",
+          children: "Item A"
+        }), /*#__PURE__*/_jsx(ContextMenu.Item, {
+          onClick: mockItemBClick,
+          className: "menu-active-item",
+          children: "Item B"
+        })]
+      }));
       expect(wrapper).toMatchSnapshot();
     });
     it('should match snapshot without toggle', () => {
-      const wrapper = shallow(/*#__PURE__*/React.createElement(ContextMenu, {
+      const wrapper = shallow(/*#__PURE__*/_jsx(ContextMenu, {
         isOpened: true,
-        showToggle: false
-      }, /*#__PURE__*/React.createElement(ContextMenu.Item, {
-        onClick: mockItemAClick,
-        className: "menu-active-item"
-      }, 'Item A')));
+        showToggle: false,
+        children: /*#__PURE__*/_jsx(ContextMenu.Item, {
+          onClick: mockItemAClick,
+          className: "menu-active-item",
+          children: "Item A"
+        })
+      }));
       expect(wrapper).toMatchSnapshot();
     });
   });
@@ -41,11 +48,15 @@ describe('<ContextMenu />', () => {
      * The view component
      */
     const renderComponent = () => {
-      renderedElement = mount(/*#__PURE__*/React.createElement(ContextMenu, null, /*#__PURE__*/React.createElement(ContextMenu.Item, {
-        onClick: mockItemAClick
-      }, "Item A"), /*#__PURE__*/React.createElement(ContextMenu.Item, {
-        onClick: mockItemBClick
-      }, "Item B")));
+      renderedElement = mount(/*#__PURE__*/_jsxs(ContextMenu, {
+        children: [/*#__PURE__*/_jsx(ContextMenu.Item, {
+          onClick: mockItemAClick,
+          children: "Item A"
+        }), /*#__PURE__*/_jsx(ContextMenu.Item, {
+          onClick: mockItemBClick,
+          children: "Item B"
+        })]
+      }));
     };
     beforeEach(renderComponent);
     it('should match snapshot', () => {

package/Dialog/components/HtmlContentDialog/index.js

@@ -8,18 +8,20 @@ import BasicDialog from "../BasicDialog";
  * @param {Object} props The component properties.
  * @returns {JSX.Element} The rendered component.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const HtmlContentDialog = ({
   actions,
   message,
   title
-}) => /*#__PURE__*/React.createElement(BasicDialog, {
+}) => /*#__PURE__*/_jsx(BasicDialog, {
   title: title,
-  actions: actions
-}, /*#__PURE__*/React.createElement("div", {
-  dangerouslySetInnerHTML: {
-    __html: message
-  }
-}));
+  actions: actions,
+  children: /*#__PURE__*/_jsx("div", {
+    dangerouslySetInnerHTML: {
+      __html: message
+    }
+  })
+});
 HtmlContentDialog.defaultProps = {
   title: BasicDialog.defaultProps.title
 };

package/Dialog/components/HtmlContentDialog/spec.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import HtmlContentDialog from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const message = '<p><i>This is a html message.</i></p>';
 const title = 'This is the title.';
 jest.mock('@shopgate/engage/a11y/components');
 describe('<HtmlContentDialog />', () => {
   it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HtmlContentDialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(HtmlContentDialog, {
       message: message,
       actions: []
     }));
@@ -14,7 +15,7 @@ describe('<HtmlContentDialog />', () => {
     expect(wrapper.html()).toMatch(message);
   });
   it('should render with title and html message', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HtmlContentDialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(HtmlContentDialog, {
       title: title,
       message: message,
       actions: []
@@ -23,7 +24,7 @@ describe('<HtmlContentDialog />', () => {
     expect(wrapper.html()).toMatch(title);
   });
   it('should render with title, html message and messageParams', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HtmlContentDialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(HtmlContentDialog, {
       title: title,
       message: "Message with {name}",
       params: {
@@ -38,7 +39,7 @@ describe('<HtmlContentDialog />', () => {
       label: 'fooAction',
       action: () => {}
     }];
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HtmlContentDialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(HtmlContentDialog, {
       title: title,
       message: message,
       actions: actions
@@ -47,8 +48,10 @@ describe('<HtmlContentDialog />', () => {
     expect(wrapper.html()).toMatch(actions[0].label);
   });
   it('should pass title through', () => {
-    const customTitle = /*#__PURE__*/React.createElement("div", null, "Title");
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HtmlContentDialog, {
+    const customTitle = /*#__PURE__*/_jsx("div", {
+      children: "Title"
+    });
+    const wrapper = shallow(/*#__PURE__*/_jsx(HtmlContentDialog, {
       title: customTitle,
       message: message,
       params: {},

package/Dialog/components/PipelineErrorDialog/index.js

@@ -1,3 +1,5 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import I18n from '@shopgate/pwa-common/components/I18n';
@@ -6,6 +8,7 @@ import BasicDialog from "../BasicDialog";
 /**
  * The number of taps required until the dialog switches to/from developer mode.
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const requiredTapsToSwitchModes = 10;
 
 /**
@@ -18,45 +21,46 @@ const switchModeTapTimeout = 4000 / requiredTapsToSwitchModes;
  * The special behaviour of this message is that the user may tap the message body
  * ten times until it reveals additional information about the error that occurred.
  */
-class PipelineErrorDialog extends Component {
+let PipelineErrorDialog = /*#__PURE__*/function (_Component) {
   /**
    * Creates the component.
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function PipelineErrorDialog(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Clears the tap counter once the
      */
-    this.handleTapTimeout = () => {
-      this.tapCounter = 0;
+    _this.handleTapTimeout = () => {
+      _this.tapCounter = 0;
     };
     /**
      * User tapped the message, increase the tap counter and switch view modes if required.
      */
-    this.handleClick = () => {
-      this.tapCounter += 1;
-      if (this.tapTimeout) {
+    _this.handleClick = () => {
+      _this.tapCounter += 1;
+      if (_this.tapTimeout) {
         // Clear the timeout.
-        clearTimeout(this.tapTimeout);
+        clearTimeout(_this.tapTimeout);
       }
-      if (this.tapCounter >= requiredTapsToSwitchModes) {
+      if (_this.tapCounter >= requiredTapsToSwitchModes) {
         // Switch modes and reset the tap counter.
-        this.tapCounter = 0;
-        this.setState(({
+        _this.tapCounter = 0;
+        _this.setState(({
           devMode
         }) => ({
           devMode: !devMode
         }));
       } else {
-        this.tapTimeout = setTimeout(this.handleTapTimeout, switchModeTapTimeout);
+        _this.tapTimeout = setTimeout(_this.handleTapTimeout, switchModeTapTimeout);
       }
     };
     /**
      * Renders the error message in developer mode.
      * @returns {JSX}
      */
-    this.renderDevErrorMessage = () => {
+    _this.renderDevErrorMessage = () => {
       /**
        * Checks the input to be truthy, "0" or "false" and enables it to be rendered then.
        * @param {Object|string|number|boolean} value The value to be checked if it should be rendered.
@@ -65,60 +69,115 @@ class PipelineErrorDialog extends Component {
       const checkValue = value => !!value || value === 0 || value === false;
       const {
         params
-      } = this.props;
-      return /*#__PURE__*/React.createElement("div", {
-        "aria-hidden": true
-      }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Pipeline:"), /*#__PURE__*/React.createElement("span", null, ` ${params.pipeline}`), /*#__PURE__*/React.createElement("br", null)), checkValue(params.entityId) && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Entity id:"), /*#__PURE__*/React.createElement("span", null, ` ${params.entityId}`), /*#__PURE__*/React.createElement("br", null)), checkValue(params.code) && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Code:"), /*#__PURE__*/React.createElement("span", null, ` ${params.code}`), /*#__PURE__*/React.createElement("br", null)), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Message:"), /*#__PURE__*/React.createElement("span", null, ` ${params.message}`), /*#__PURE__*/React.createElement("br", null)), checkValue(params.translated) && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Message Translated:"), /*#__PURE__*/React.createElement("span", null, ` ${params.translated.toString()}`), /*#__PURE__*/React.createElement("br", null)), checkValue(params.messageParams) && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("strong", null, "Message Params:"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", null, JSON.stringify(params.messageParams, null, ' ')), /*#__PURE__*/React.createElement("br", null)), checkValue(params.request) && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("strong", null, "Request Params:"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", null, JSON.stringify(params.request, null, ' ')), /*#__PURE__*/React.createElement("br", null)));
+      } = _this.props;
+      return /*#__PURE__*/_jsxs("div", {
+        "aria-hidden": true,
+        children: [/*#__PURE__*/_jsxs("span", {
+          children: [/*#__PURE__*/_jsx("strong", {
+            children: "Pipeline:"
+          }), /*#__PURE__*/_jsx("span", {
+            children: ` ${params.pipeline}`
+          }), /*#__PURE__*/_jsx("br", {})]
+        }), checkValue(params.entityId) && /*#__PURE__*/_jsxs("span", {
+          children: [/*#__PURE__*/_jsx("strong", {
+            children: "Entity id:"
+          }), /*#__PURE__*/_jsx("span", {
+            children: ` ${params.entityId}`
+          }), /*#__PURE__*/_jsx("br", {})]
+        }), checkValue(params.code) && /*#__PURE__*/_jsxs("span", {
+          children: [/*#__PURE__*/_jsx("strong", {
+            children: "Code:"
+          }), /*#__PURE__*/_jsx("span", {
+            children: ` ${params.code}`
+          }), /*#__PURE__*/_jsx("br", {})]
+        }), /*#__PURE__*/_jsxs("span", {
+          children: [/*#__PURE__*/_jsx("strong", {
+            children: "Message:"
+          }), /*#__PURE__*/_jsx("span", {
+            children: ` ${params.message}`
+          }), /*#__PURE__*/_jsx("br", {})]
+        }), checkValue(params.translated) && /*#__PURE__*/_jsxs("span", {
+          children: [/*#__PURE__*/_jsx("strong", {
+            children: "Message Translated:"
+          }), /*#__PURE__*/_jsx("span", {
+            children: ` ${params.translated.toString()}`
+          }), /*#__PURE__*/_jsx("br", {})]
+        }), checkValue(params.messageParams) && /*#__PURE__*/_jsxs("p", {
+          children: [/*#__PURE__*/_jsx("strong", {
+            children: "Message Params:"
+          }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("span", {
+            children: JSON.stringify(params.messageParams, null, ' ')
+          }), /*#__PURE__*/_jsx("br", {})]
+        }), checkValue(params.request) && /*#__PURE__*/_jsxs("p", {
+          children: [/*#__PURE__*/_jsx("strong", {
+            children: "Request Params:"
+          }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("span", {
+            children: JSON.stringify(params.request, null, ' ')
+          }), /*#__PURE__*/_jsx("br", {})]
+        })]
+      });
     };
     /**
      * Renders the regular error message in user mode.
      * @returns {JSX}
      */
-    this.renderUserErrorMessage = () => {
+    _this.renderUserErrorMessage = () => {
       const {
         message = '',
         params = {}
-      } = this.props;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, !!params.translated && (message || params.message || /*#__PURE__*/React.createElement(I18n.Text, {
-        string: "modal.body_error"
-      })), !params.translated && /*#__PURE__*/React.createElement(I18n.Text, {
-        string: message || params.message || 'modal.body_error',
-        params: params.messageParams || {}
-      }));
+      } = _this.props;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!!params.translated && (message || params.message || /*#__PURE__*/_jsx(I18n.Text, {
+          string: "modal.body_error"
+        })), !params.translated && /*#__PURE__*/_jsx(I18n.Text, {
+          string: message || params.message || 'modal.body_error',
+          params: params.messageParams || {}
+        })]
+      });
     };
-    this.tapTimeout = null;
-    this.tapCounter = 0;
-    this.state = {
+    _this.tapTimeout = null;
+    _this.tapCounter = 0;
+    _this.state = {
       devMode: false // Indicating whether we are in dev mode.
     };
+    return _this;
   }
 
   /**
    * @return {string} The title based on the current state of the dialog.
    */
-  get title() {
-    return this.state.devMode ? 'Pipeline Error' : 'modal.title_error';
-  }
-
-  /**
-   * @return {JSX} The content component based on the the current state of the dialog.
-   */
-  get content() {
-    return this.state.devMode ? this.renderDevErrorMessage() : this.renderUserErrorMessage();
-  }
+  _inheritsLoose(PipelineErrorDialog, _Component);
+  var _proto = PipelineErrorDialog.prototype;
   /**
    * Renders the error message depending on the current mode.
    * @return {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement(BasicDialog, {
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx(BasicDialog, {
       title: this.title,
-      actions: this.props.actions
-    }, /*#__PURE__*/React.createElement("div", {
-      onClick: this.handleClick
-    }, this.content));
-  }
-}
+      actions: this.props.actions,
+      children: /*#__PURE__*/_jsx("div", {
+        onClick: this.handleClick,
+        children: this.content
+      })
+    });
+  };
+  return _createClass(PipelineErrorDialog, [{
+    key: "title",
+    get: function () {
+      return this.state.devMode ? 'Pipeline Error' : 'modal.title_error';
+    }
+
+    /**
+     * @return {JSX} The content component based on the the current state of the dialog.
+     */
+  }, {
+    key: "content",
+    get: function () {
+      return this.state.devMode ? this.renderDevErrorMessage() : this.renderUserErrorMessage();
+    }
+  }]);
+}(Component);
 PipelineErrorDialog.defaultProps = {
   message: ''
 };

package/Dialog/components/PipelineErrorDialog/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import PipelineErrorDialog from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/a11y/components');
 describe('<PipelineErrorDialog />', () => {
   const defaultParams = {
@@ -10,7 +11,7 @@ describe('<PipelineErrorDialog />', () => {
     request: {}
   };
   it('should render with minimal props', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(PipelineErrorDialog, {
+    const wrapper = mount(/*#__PURE__*/_jsx(PipelineErrorDialog, {
       actions: [],
       params: defaultParams
     }));
@@ -18,7 +19,7 @@ describe('<PipelineErrorDialog />', () => {
   });
   it('should show a custom message if a message is is provided', () => {
     const message = 'Custom message';
-    const wrapper = mount(/*#__PURE__*/React.createElement(PipelineErrorDialog, {
+    const wrapper = mount(/*#__PURE__*/_jsx(PipelineErrorDialog, {
       actions: [],
       message: message,
       params: defaultParams
@@ -27,7 +28,7 @@ describe('<PipelineErrorDialog />', () => {
     expect(wrapper.html()).toMatch(message);
   });
   it('should switch modes on tap', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(PipelineErrorDialog, {
+    const wrapper = mount(/*#__PURE__*/_jsx(PipelineErrorDialog, {
       actions: [],
       params: defaultParams
     }));
@@ -51,7 +52,7 @@ describe('<PipelineErrorDialog />', () => {
   });
   it('should not switch modes if tapped too slow', () => {
     jest.useFakeTimers();
-    const wrapper = mount(/*#__PURE__*/React.createElement(PipelineErrorDialog, {
+    const wrapper = mount(/*#__PURE__*/_jsx(PipelineErrorDialog, {
       actions: [],
       params: defaultParams
     }));

package/Dialog/components/TextMessageDialog/index.js

@@ -10,20 +10,22 @@ import BasicDialog from "../BasicDialog";
  * @param {Object} props The component properties.
  * @returns {JSX} The rendered component.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TextMessageDialog = ({
   actions,
   message,
   title,
   params,
   children
-}) => /*#__PURE__*/React.createElement(BasicDialog, {
+}) => /*#__PURE__*/_jsxs(BasicDialog, {
   title: title,
-  actions: actions
-}, /*#__PURE__*/React.createElement("span", {
-  dangerouslySetInnerHTML: {
-    __html: nl2br(i18n.text(message, params))
-  }
-}), children);
+  actions: actions,
+  children: [/*#__PURE__*/_jsx("span", {
+    dangerouslySetInnerHTML: {
+      __html: nl2br(i18n.text(message, params))
+    }
+  }), children]
+});
 TextMessageDialog.defaultProps = {
   title: BasicDialog.defaultProps.title,
   params: I18n.Text.defaultProps.params,

package/Dialog/components/TextMessageDialog/spec.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import TextMessageDialog from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const message = 'This is the message.';
 const title = 'This is the title.';
 jest.mock('@shopgate/engage/a11y/components');
 describe('<TextMessageDialog />', () => {
   it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
       message: message,
       actions: []
     }));
@@ -14,7 +15,7 @@ describe('<TextMessageDialog />', () => {
     expect(wrapper.html()).toMatch(message);
   });
   it('should render with title and message', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
       title: title,
       message: message,
       actions: []
@@ -23,7 +24,7 @@ describe('<TextMessageDialog />', () => {
     expect(wrapper.html()).toMatch(title);
   });
   it('should render with title, message and messageParams', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
       title: title,
       message: "Message with {name}",
       params: {
@@ -38,7 +39,7 @@ describe('<TextMessageDialog />', () => {
       label: 'fooAction',
       action: () => {}
     }];
-    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
       title: title,
       message: message,
       actions: actions
@@ -47,8 +48,10 @@ describe('<TextMessageDialog />', () => {
     expect(wrapper.html()).toMatch(actions[0].label);
   });
   it('should pass title through', () => {
-    const customTitle = /*#__PURE__*/React.createElement("div", null, "Title");
-    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+    const customTitle = /*#__PURE__*/_jsx("div", {
+      children: "Title"
+    });
+    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
       title: customTitle,
       message: message,
       params: {},

package/Dialog/components/VariantSelectModal/index.js

@@ -14,6 +14,7 @@ import connect from "./connector";
  * @param {string} navigate The navigate action.
  * @return {Array} Reordered and extended actions.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const reorderActions = (actions, {
   productId
 }, navigate) => {
@@ -61,12 +62,13 @@ const VariantSelectModal = ({
   params
 }) => {
   const parsedActions = reorderActions(actions, params, navigate);
-  return /*#__PURE__*/React.createElement(BasicDialog, {
+  return /*#__PURE__*/_jsx(BasicDialog, {
     title: title,
-    actions: parsedActions
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: message
-  }));
+    actions: parsedActions,
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: message
+    })
+  });
 };
 VariantSelectModal.defaultProps = {
   params: {