@atlaskit/feedback-collector 10.3.2 → 10.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/feedback-collector
 
+## 10.4.0
+
+### Minor Changes
+
+- [`271e4374f58`](https://bitbucket.org/atlassian/atlassian-frontend/commits/271e4374f58) - [ux] Add support for i18n
+
 ## 10.3.2
 
 ### Patch Changes

package/dist/cjs/components/FeedbackButton.js

@@ -21,12 +21,14 @@ var _flag = require("@atlaskit/flag");
 
 var _feedback = _interopRequireDefault(require("@atlaskit/icon/glyph/feedback"));
 
+var _IntlProviderWithResolvedMessages = require("../components/IntlProviderWithResolvedMessages");
+
+var _messages = require("../messages");
+
 var _FeedbackCollector = _interopRequireDefault(require("./FeedbackCollector"));
 
 var _FeedbackFlag = _interopRequireDefault(require("./FeedbackFlag"));
 
-var _messages = require("./messages");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -46,12 +48,15 @@ var FeedbackButton = function FeedbackButton(props) {
       setDisplayFlag = _useState4[1];
 
   var _useIntl = (0, _reactIntlNext.useIntl)(),
+      locale = _useIntl.locale,
       formatMessage = _useIntl.formatMessage;
 
   var embeddableKey = props.embeddableKey,
       requestTypeId = props.requestTypeId,
       email = props.email;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+  return /*#__PURE__*/_react.default.createElement(_IntlProviderWithResolvedMessages.IntlProviderWithResolvedMessages, {
+    locale: locale
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
     onClick: function onClick() {
       return setIsOpen(true);
     },

package/dist/cjs/components/FeedbackCollector.js

@@ -448,7 +448,8 @@ var FeedbackCollector = /*#__PURE__*/function (_Component) {
         cancelButtonLabel: this.props.cancelButtonLabel,
         feedbackGroupLabels: this.props.feedbackGroupLabels,
         onSubmit: this.postFeedback,
-        onClose: this.props.onClose
+        onClose: this.props.onClose,
+        locale: this.props.locale
       });
     }
   }]);

package/dist/cjs/components/FeedbackFlag.js

@@ -7,10 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _flag = require("@atlaskit/flag");
 
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
@@ -19,17 +21,37 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var FeedbackFlag = function FeedbackFlag(props) {
-  return /*#__PURE__*/_react.default.createElement(_flag.AutoDismissFlag, (0, _extends2.default)({
+var _messages = require("../messages");
+
+var _IntlProviderWithResolvedMessages = require("./IntlProviderWithResolvedMessages");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var FeedbackFlag = function FeedbackFlag(_ref) {
+  var description = _ref.description,
+      title = _ref.title;
+
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+      formatMessage = _useIntl.formatMessage;
+
+  return /*#__PURE__*/_react.default.createElement(_flag.AutoDismissFlag, {
     icon: /*#__PURE__*/_react.default.createElement(_checkCircle.default, {
       primaryColor: (0, _tokens.token)('color.icon.success', _colors.G300),
       label: "Success"
     }),
     id: "feedbackSent",
-    description: props.description ? props.description : 'Your valuable feedback helps us continually improve our products.',
-    title: props.title ? props.title : 'Thanks!'
-  }, props));
+    description: description || formatMessage(_objectSpread({}, _messages.messages.feedbackSuccessFlagDescription)),
+    title: title || formatMessage(_objectSpread({}, _messages.messages.feedbackSuccessFlagTitle))
+  });
+};
+
+var FeedbackFlagWithIntl = function FeedbackFlagWithIntl(props) {
+  return /*#__PURE__*/_react.default.createElement(_IntlProviderWithResolvedMessages.IntlProviderWithResolvedMessages, {
+    locale: props.locale
+  }, /*#__PURE__*/_react.default.createElement(FeedbackFlag, props));
 };
 
-var _default = FeedbackFlag;
+var _default = FeedbackFlagWithIntl;
 exports.default = _default;

package/dist/cjs/components/FeedbackForm.js

@@ -9,24 +9,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
 var _checkbox = require("@atlaskit/checkbox");
@@ -39,6 +33,12 @@ var _select = _interopRequireDefault(require("@atlaskit/select"));
 
 var _textarea = _interopRequireDefault(require("@atlaskit/textarea"));
 
+var _messages = require("../messages");
+
+var _IntlProviderWithResolvedMessages = require("./IntlProviderWithResolvedMessages");
+
+var _excluded = ["locale"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -47,181 +47,168 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var getFieldLabels = function getFieldLabels(record) {
-  return {
-    bug: record !== null && record !== void 0 && record.bug.fieldLabel ? record.bug.fieldLabel : 'Describe the bug or issue',
-    comment: record !== null && record !== void 0 && record.comment.fieldLabel ? record.comment.fieldLabel : "Let us know what's on your mind",
-    suggestion: record !== null && record !== void 0 && record.suggestion.fieldLabel ? record.suggestion.fieldLabel : "Let us know what you'd like to improve",
-    question: record !== null && record !== void 0 && record.question.fieldLabel ? record.question.fieldLabel : 'What would you like to know?',
-    empty: record !== null && record !== void 0 && record.empty.fieldLabel ? record.empty.fieldLabel : 'Select an option'
+var FeedbackForm = function FeedbackForm(_ref) {
+  var _ref$showTypeField = _ref.showTypeField,
+      showTypeField = _ref$showTypeField === void 0 ? true : _ref$showTypeField,
+      onClose = _ref.onClose,
+      _onSubmit = _ref.onSubmit,
+      feedbackTitle = _ref.feedbackTitle,
+      feedbackTitleDetails = _ref.feedbackTitleDetails,
+      feedbackGroupLabels = _ref.feedbackGroupLabels,
+      summaryPlaceholder = _ref.summaryPlaceholder,
+      canBeContactedLabel = _ref.canBeContactedLabel,
+      enrolInResearchLabel = _ref.enrolInResearchLabel,
+      submitButtonLabel = _ref.submitButtonLabel,
+      cancelButtonLabel = _ref.cancelButtonLabel;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      canBeContacted = _useState2[0],
+      setCanBeContacted = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      description = _useState4[0],
+      setDescription = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      enrollInResearchGroup = _useState6[0],
+      setEnrollInResearchGroup = _useState6[1];
+
+  var _useState7 = (0, _react.useState)('empty'),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      type = _useState8[0],
+      setType = _useState8[1];
+
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+      formatMessage = _useIntl.formatMessage;
+
+  var isTypeSelected = function isTypeSelected() {
+    return type !== 'empty';
   };
-};
-
-var getSelectOptions = function getSelectOptions(record) {
-  return [{
-    label: record !== null && record !== void 0 && record.question.selectOptionLabel ? record.question.selectOptionLabel : 'Ask a question',
-    value: 'question'
-  }, {
-    label: record !== null && record !== void 0 && record.comment.selectOptionLabel ? record.comment.selectOptionLabel : 'Leave a comment',
-    value: 'comment'
-  }, {
-    label: record !== null && record !== void 0 && record.bug.selectOptionLabel ? record.bug.selectOptionLabel : 'Report a bug',
-    value: 'bug'
-  }, {
-    label: record !== null && record !== void 0 && record.suggestion.selectOptionLabel ? record.suggestion.selectOptionLabel : 'Suggest an improvement',
-    value: 'suggestion'
-  }];
-};
 
-var getDefaultSelectValue = function getDefaultSelectValue(record) {
-  return {
-    label: record !== null && record !== void 0 && record.empty.selectOptionLabel ? record.empty.selectOptionLabel : 'I want to...',
-    value: 'empty'
+  var canShowTextField = isTypeSelected() || !showTypeField;
+  var isDisabled = showTypeField ? !isTypeSelected() || !description : !description;
+
+  var getFieldLabels = function getFieldLabels(record) {
+    return {
+      bug: (record === null || record === void 0 ? void 0 : record.bug.fieldLabel) || formatMessage(_messages.messages.formBugLabel),
+      comment: (record === null || record === void 0 ? void 0 : record.comment.fieldLabel) || formatMessage(_messages.messages.formCommentLabel),
+      suggestion: (record === null || record === void 0 ? void 0 : record.suggestion.fieldLabel) || formatMessage(_messages.messages.formSuggestionLabel),
+      question: (record === null || record === void 0 ? void 0 : record.question.fieldLabel) || formatMessage(_messages.messages.formQuestionLabel),
+      empty: (record === null || record === void 0 ? void 0 : record.empty.fieldLabel) || formatMessage(_messages.messages.formEmptyLabel)
+    };
   };
-};
-
-var FeedbackForm = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(FeedbackForm, _Component);
-
-  var _super = _createSuper(FeedbackForm);
 
-  function FeedbackForm() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, FeedbackForm);
+  var getSelectOptions = function getSelectOptions(record) {
+    return [{
+      label: (record === null || record === void 0 ? void 0 : record.question.selectOptionLabel) || formatMessage(_messages.messages.selectionOptionQuestionLabel),
+      value: 'question'
+    }, {
+      label: (record === null || record === void 0 ? void 0 : record.comment.selectOptionLabel) || formatMessage(_messages.messages.selectionOptionCommentLabel),
+      value: 'comment'
+    }, {
+      label: (record === null || record === void 0 ? void 0 : record.bug.selectOptionLabel) || formatMessage(_messages.messages.selectionOptionBugLabel),
+      value: 'bug'
+    }, {
+      label: (record === null || record === void 0 ? void 0 : record.suggestion.selectOptionLabel) || formatMessage(_messages.messages.selectionOptionSuggestionLabel),
+      value: 'suggestion'
+    }];
+  };
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var getDefaultSelectValue = function getDefaultSelectValue(record) {
+    return {
+      label: (record === null || record === void 0 ? void 0 : record.empty.selectOptionLabel) || formatMessage(_messages.messages.selectionOptionDefaultLabel),
+      value: 'empty'
+    };
+  };
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      type: 'empty',
-      description: '',
-      canBeContacted: false,
-      enrollInResearchGroup: false
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isTypeSelected", function () {
-      return _this.state.type !== 'empty';
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSubmit", function () {
-      var _this$state = _this.state,
-          type = _this$state.type,
-          description = _this$state.description,
-          canBeContacted = _this$state.canBeContacted,
-          enrollInResearchGroup = _this$state.enrollInResearchGroup;
-
-      _this.props.onSubmit({
-        type: type,
-        description: description,
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    onClose: onClose,
+    testId: "feedbackCollectorModalDialog"
+  }, /*#__PURE__*/_react.default.createElement(_form.default, {
+    onSubmit: function onSubmit() {
+      _onSubmit({
         canBeContacted: canBeContacted,
-        enrollInResearchGroup: enrollInResearchGroup
+        description: description,
+        enrollInResearchGroup: enrollInResearchGroup,
+        type: type
       });
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(FeedbackForm, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var showTypeField = this.props.showTypeField;
-      var canShowTextField = this.isTypeSelected() || !showTypeField;
-      var isDisabled = showTypeField ? !this.isTypeSelected() || !this.state.description : !this.state.description;
-      return /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
-        onClose: this.props.onClose
-      }, /*#__PURE__*/_react.default.createElement(_form.default, {
-        onSubmit: this.onSubmit
-      }, function (_ref) {
-        var formProps = _ref.formProps;
-        return /*#__PURE__*/_react.default.createElement("form", formProps, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, null, _this2.props.feedbackTitle)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, _this2.props.feedbackTitleDetails, showTypeField ? /*#__PURE__*/_react.default.createElement(_select.default, {
-          onChange: function onChange(option) {
-            if (!option || option instanceof Array) {
-              return;
-            }
-
-            _this2.setState({
-              type: option.value
-            });
-          },
-          menuPortalTarget: document.body,
-          styles: {
-            menuPortal: function menuPortal(base) {
-              return _objectSpread(_objectSpread({}, base), {}, {
-                zIndex: 9999
-              });
-            }
-          },
-          defaultValue: getDefaultSelectValue(_this2.props.feedbackGroupLabels),
-          options: getSelectOptions(_this2.props.feedbackGroupLabels)
-        }) : null, canShowTextField ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_form.Field, {
-          label: showTypeField ? getFieldLabels(_this2.props.feedbackGroupLabels)[_this2.state.type] : null,
-          isRequired: true,
-          name: "description"
-        }, function (_ref2) {
-          var fieldProps = _ref2.fieldProps;
-          return /*#__PURE__*/_react.default.createElement(_textarea.default, (0, _extends2.default)({}, fieldProps, {
-            name: "foo",
-            minimumRows: 6,
-            placeholder: _this2.props.summaryPlaceholder,
-            onChange: function onChange(e) {
-              return _this2.setState({
-                description: e.target.value
-              });
-            },
-            value: _this2.state.description
-          }));
-        }), /*#__PURE__*/_react.default.createElement(_form.Field, {
-          name: "can-be-contacted"
-        }, function (_ref3) {
-          var fieldProps = _ref3.fieldProps;
-          return /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, (0, _extends2.default)({}, fieldProps, {
-            label: _this2.props.canBeContactedLabel,
-            onChange: function onChange(event) {
-              return _this2.setState({
-                canBeContacted: event.target.checked
-              });
-            }
-          }));
-        }), /*#__PURE__*/_react.default.createElement(_form.Field, {
-          name: "enroll-in-research-group"
-        }, function (_ref4) {
-          var fieldProps = _ref4.fieldProps;
-          return /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, (0, _extends2.default)({}, fieldProps, {
-            label: _this2.props.enrolInResearchLabel,
-            onChange: function onChange(event) {
-              return _this2.setState({
-                enrollInResearchGroup: event.target.checked
-              });
-            }
-          }));
-        })) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
-          appearance: "subtle",
-          onClick: _this2.props.onClose
-        }, _this2.props.cancelButtonLabel), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
-          appearance: "primary",
-          type: "submit",
-          isDisabled: isDisabled
-        }, _this2.props.submitButtonLabel)));
-      }));
     }
-  }]);
-  return FeedbackForm;
-}(_react.Component);
-
-exports.default = FeedbackForm;
-(0, _defineProperty2.default)(FeedbackForm, "defaultProps", {
-  showTypeField: true,
-  feedbackTitle: 'Share your thoughts',
-  enrolInResearchLabel: "I'd like to participate in product research",
-  canBeContactedLabel: 'Atlassian can contact me about this feedback',
-  submitButtonLabel: 'Send feedback',
-  cancelButtonLabel: 'Cancel',
-  onClose: function onClose() {},
-  onSubmit: function onSubmit() {}
-});
+  }, function (_ref2) {
+    var formProps = _ref2.formProps;
+    return /*#__PURE__*/_react.default.createElement("form", formProps, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, null, feedbackTitle || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.feedbackTitle))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, feedbackTitleDetails, showTypeField ? /*#__PURE__*/_react.default.createElement(_select.default, {
+      onChange: function onChange(option) {
+        if (!option || option instanceof Array) {
+          return;
+        }
+
+        setType(option.value);
+      },
+      menuPortalTarget: document.body,
+      styles: {
+        menuPortal: function menuPortal(base) {
+          return _objectSpread(_objectSpread({}, base), {}, {
+            zIndex: 9999
+          });
+        }
+      },
+      defaultValue: getDefaultSelectValue(feedbackGroupLabels),
+      options: getSelectOptions(feedbackGroupLabels)
+    }) : null, canShowTextField && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_form.Field, {
+      label: showTypeField ? getFieldLabels(feedbackGroupLabels)[type] : null,
+      isRequired: true,
+      name: "description"
+    }, function (_ref3) {
+      var fieldProps = _ref3.fieldProps;
+      return /*#__PURE__*/_react.default.createElement(_textarea.default, (0, _extends2.default)({}, fieldProps, {
+        name: "foo",
+        minimumRows: 6,
+        placeholder: summaryPlaceholder || formatMessage(_messages.messages.summaryPlaceholder),
+        onChange: function onChange(e) {
+          return setDescription(e.target.value);
+        },
+        value: description
+      }));
+    }), /*#__PURE__*/_react.default.createElement(_form.Field, {
+      name: "can-be-contacted"
+    }, function (_ref4) {
+      var fieldProps = _ref4.fieldProps;
+      return /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, (0, _extends2.default)({}, fieldProps, {
+        label: canBeContactedLabel || formatMessage(_messages.messages.canBeContactedLabel),
+        onChange: function onChange(event) {
+          return setCanBeContacted(event.target.checked);
+        }
+      }));
+    }), /*#__PURE__*/_react.default.createElement(_form.Field, {
+      name: "enroll-in-research-group"
+    }, function (_ref5) {
+      var fieldProps = _ref5.fieldProps;
+      return /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, (0, _extends2.default)({}, fieldProps, {
+        label: enrolInResearchLabel || formatMessage(_messages.messages.enrolInResearchLabel),
+        onChange: function onChange(event) {
+          return setEnrollInResearchGroup(event.target.checked);
+        }
+      }));
+    }))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+      appearance: "subtle",
+      onClick: onClose
+    }, cancelButtonLabel || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.cancelButtonLabel)), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+      appearance: "primary",
+      type: "submit",
+      isDisabled: isDisabled
+    }, submitButtonLabel || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.submitButtonLabel))));
+  }));
+};
+
+var FeedbackFormWithIntl = function FeedbackFormWithIntl(_ref6) {
+  var locale = _ref6.locale,
+      props = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_IntlProviderWithResolvedMessages.IntlProviderWithResolvedMessages, {
+    locale: locale
+  }, /*#__PURE__*/_react.default.createElement(FeedbackForm, props));
+};
+
+var _default = FeedbackFormWithIntl;
+exports.default = _default;

package/dist/cjs/components/IntlProviderWithResolvedMessages.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IntlProviderWithResolvedMessages = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _i18nGetMessagesForLocale = require("../utils/i18n-get-messages-for-locale");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var IntlProviderWithResolvedMessages = function IntlProviderWithResolvedMessages(_ref) {
+  var children = _ref.children,
+      locale = _ref.locale;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      resolvedMessagesForLocale = _useState2[0],
+      setResolvedMessagesForLocale = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var fetchMessageLocale = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var messages;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!locale) {
+                  _context.next = 5;
+                  break;
+                }
+
+                _context.next = 3;
+                return (0, _i18nGetMessagesForLocale.getMessagesForLocale)(locale);
+
+              case 3:
+                messages = _context.sent;
+                setResolvedMessagesForLocale(messages);
+
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function fetchMessageLocale() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    fetchMessageLocale();
+  }, [locale]);
+  return /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+    locale: locale || 'en',
+    defaultLocale: "en",
+    messages: resolvedMessagesForLocale
+  }, children);
+};
+
+exports.IntlProviderWithResolvedMessages = IntlProviderWithResolvedMessages;

package/dist/cjs/i18n/fr.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//French (France)
+var _default = {};
+exports.default = _default;

package/dist/cjs/i18n/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "fr", {
+  enumerable: true,
+  get: function get() {
+    return _fr.default;
+  }
+});
+
+var _fr = _interopRequireDefault(require("./fr"));