@atlaskit/feedback-collector 15.5.0 → 16.0.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @atlaskit/feedback-collector
 
+## 16.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.6.0
+
+### Minor Changes
+
+- [`fcbbf3c80f95a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fcbbf3c80f95a) -
+  [ux] AX-2068 — Announce feedback collector validation errors to screen readers and move focus to
+  the first invalid field on failed submit by delegating validation to @atlaskit/form's built-in
+  Field validate API.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.5.0
 
 ### Minor Changes

package/FeedbackButton/package.json

@@ -4,12 +4,5 @@
   "module": "../dist/esm/entry-points/FeedbackButton.js",
   "module:es2019": "../dist/es2019/entry-points/FeedbackButton.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/FeedbackButton.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/FeedbackButton.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/FeedbackButton.d.ts"
 }

package/FeedbackFlag/package.json

@@ -4,12 +4,5 @@
   "module": "../dist/esm/entry-points/FeedbackFlag.js",
   "module:es2019": "../dist/es2019/entry-points/FeedbackFlag.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/FeedbackFlag.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/FeedbackFlag.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/FeedbackFlag.d.ts"
 }

package/FeedbackForm/package.json

@@ -4,12 +4,5 @@
   "module": "../dist/esm/entry-points/FeedbackForm.js",
   "module:es2019": "../dist/es2019/entry-points/FeedbackForm.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/FeedbackForm.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/FeedbackForm.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/FeedbackForm.d.ts"
 }

package/dist/cjs/components/FeedbackCollector.js

@@ -164,7 +164,7 @@ var FeedbackCollector = exports.default = /*#__PURE__*/function (_Component) {
   }, {
     key: "getPackageVersion",
     value: function getPackageVersion() {
-      return "15.4.0" || 'Unknown, at least 11.0.0';
+      return "15.6.0" || 'Unknown, at least 11.0.0';
     }
   }, {
     key: "getEntitlementInformation",

package/dist/cjs/components/FeedbackForm.js

@@ -7,7 +7,6 @@ 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -29,8 +28,6 @@ var _excluded = ["id"],
   _excluded2 = ["id"],
   _excluded3 = ["locale"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LinkWrapper = function LinkWrapper(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react.default.createElement("span", {
@@ -91,15 +88,20 @@ var FeedbackForm = function FeedbackForm(_ref2) {
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
     isSubmitting = _useState0[0],
     setIsSubmitting = _useState0[1];
-  var _useState1 = (0, _react.useState)({}),
-    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
-    validationErrors = _useState10[0],
-    setValidationErrors = _useState10[1];
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var isTypeSelected = function isTypeSelected() {
     return type !== 'empty';
   };
+  var validateType = function validateType(value) {
+    return showTypeField && (!value || value === 'empty') ? formatMessage(_messages.messages.validationErrorTypeRequired) : undefined;
+  };
+  var validateDescription = function validateDescription(value) {
+    if (!showDefaultTextFields || hasDescriptionDefaultValue) {
+      return undefined;
+    }
+    return !value || !value.trim() ? formatMessage(_messages.messages.validationErrorDescriptionRequired) : undefined;
+  };
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var handleCancel = function handleCancel() {
@@ -112,22 +114,7 @@ var FeedbackForm = function FeedbackForm(_ref2) {
     onClose.apply(void 0, args);
   };
   var canShowTextField = isTypeSelected() || !showTypeField;
-  var hasDescription = description || hasDescriptionDefaultValue;
   var isDisabled = isSubmitting || disableSubmitButton;
-  var getValidationErrors = function getValidationErrors() {
-    var errors = {};
-
-    // Validate type selection if showTypeField is true
-    if (showTypeField && !isTypeSelected()) {
-      errors.type = formatMessage(_messages.messages.validationErrorTypeRequired);
-    }
-
-    // Validate description if showDefaultTextFields is true
-    if (showDefaultTextFields && !hasDescription) {
-      errors.description = formatMessage(_messages.messages.validationErrorDescriptionRequired);
-    }
-    return errors;
-  };
   var getFieldLabels = function getFieldLabels(record) {
     var _record$bug, _record$comment, _record$suggestion, _record$question, _record$empty, _record$not_relevant, _record$not_accurate, _record$too_slow, _record$unhelpful_lin, _record$other;
     return {
@@ -200,60 +187,53 @@ var FeedbackForm = function FeedbackForm(_ref2) {
     shouldScrollInViewport: true
   }, (0, _platformFeatureFlags.fg)('platform-design_system_team-form_conversion') ? /*#__PURE__*/_react.default.createElement(_form.default, {
     onSubmit: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var errors;
       return _regenerator.default.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            errors = getValidationErrors();
-            if (!(Object.keys(errors).length > 0)) {
-              _context.next = 1;
-              break;
-            }
-            setValidationErrors(errors);
-            return _context.abrupt("return");
-          case 1:
             setIsSubmitting(true);
-            _context.prev = 2;
-            _context.next = 3;
+            _context.prev = 1;
+            _context.next = 2;
             return onSubmit({
               canBeContacted: canBeContacted,
               description: description,
               enrollInResearchGroup: enrollInResearchGroup,
               type: type
             });
-          case 3:
-            _context.prev = 3;
+          case 2:
+            _context.prev = 2;
             setIsSubmitting(false);
-            return _context.finish(3);
-          case 4:
+            return _context.finish(2);
+          case 3:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[2,, 3, 4]]);
+      }, _callee, null, [[1,, 2, 3]]);
     }))
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
     hasCloseButton: true
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, null, feedbackTitle || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.feedbackTitle))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, (0, _platformFeatureFlags.fg)('ak_feedback_collector_hide_required_summary') ? showRequiredFieldsSummary && requiredFieldsSummary : requiredFieldsSummary, feedbackTitleDetails, customContent, showTypeField ? /*#__PURE__*/_react.default.createElement(_form.Field, {
     name: "topic",
+    id: "topic",
     label: selectLabel || formatMessage(_messages.messages.selectionOptionDefaultLabel),
-    isRequired: true
+    isRequired: true,
+    validate: validateType
   }, function (_ref4) {
+    var _selectOptions$find;
     var _ref4$fieldProps = _ref4.fieldProps,
       id = _ref4$fieldProps.id,
-      restProps = (0, _objectWithoutProperties2.default)(_ref4$fieldProps, _excluded);
+      restProps = (0, _objectWithoutProperties2.default)(_ref4$fieldProps, _excluded),
+      error = _ref4.error;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, restProps, {
+      value: (_selectOptions$find = selectOptions.find(function (opt) {
+        return opt.value === type;
+      })) !== null && _selectOptions$find !== void 0 ? _selectOptions$find : null,
       onChange: function onChange(option) {
+        var _restProps$onChange;
         if (!option || option instanceof Array) {
           return;
         }
         setType(option.value);
-        if (validationErrors.type) {
-          setValidationErrors(function (prev) {
-            return _objectSpread(_objectSpread({}, prev), {}, {
-              type: undefined
-            });
-          });
-        }
+        (_restProps$onChange = restProps.onChange) === null || _restProps$onChange === void 0 || _restProps$onChange.call(restProps, option.value);
       },
       menuPosition: "fixed",
       options: selectOptions
@@ -261,30 +241,28 @@ var FeedbackForm = function FeedbackForm(_ref2) {
       ,
       ref: focusRef,
       placeholder: getDefaultPlaceholder(feedbackGroupLabels),
-      inputId: id
-    })), validationErrors.type && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, validationErrors.type));
+      inputId: id,
+      isInvalid: !!error
+    })), error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, error));
   }) : null, showDefaultTextFields && canShowTextField && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_form.Field, {
     label: showTypeField ? getFieldLabels(feedbackGroupLabels)[type] : customTextAreaLabel || formatMessage(_messages.messages.defaultCustomTextAreaLabel),
     isRequired: true,
-    name: "description"
+    name: "description",
+    id: "description",
+    validate: validateDescription
   }, function (_ref5) {
-    var fieldProps = _ref5.fieldProps;
+    var fieldProps = _ref5.fieldProps,
+      error = _ref5.error;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textarea.default, (0, _extends2.default)({}, fieldProps, {
       name: "foo",
       minimumRows: 6,
       placeholder: summaryPlaceholder || undefined,
       onChange: function onChange(e) {
         setDescription(e.target.value);
-        if (validationErrors.description) {
-          setValidationErrors(function (prev) {
-            return _objectSpread(_objectSpread({}, prev), {}, {
-              description: undefined
-            });
-          });
-        }
+        fieldProps.onChange(e.target.value);
       },
       value: description
-    })), validationErrors.description && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, validationErrors.description));
+    })), error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, error));
   }), !anonymousFeedback && /*#__PURE__*/_react.default.createElement(_form.Fieldset, null, /*#__PURE__*/_react.default.createElement("legend", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.optInOptionsLegend)), /*#__PURE__*/_react.default.createElement(_form.Field, {
     name: "can-be-contacted"
   }, function (_ref6) {
@@ -338,36 +316,27 @@ var FeedbackForm = function FeedbackForm(_ref2) {
     testId: "feedbackCollectorSubmitBtn"
   }, submitButtonLabel || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.submitButtonLabel)))) : /*#__PURE__*/_react.default.createElement(_form.default, {
     onSubmit: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-      var errors;
       return _regenerator.default.wrap(function (_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            errors = getValidationErrors();
-            if (!(Object.keys(errors).length > 0)) {
-              _context2.next = 1;
-              break;
-            }
-            setValidationErrors(errors);
-            return _context2.abrupt("return");
-          case 1:
             setIsSubmitting(true);
-            _context2.prev = 2;
-            _context2.next = 3;
+            _context2.prev = 1;
+            _context2.next = 2;
             return onSubmit({
               canBeContacted: canBeContacted,
               description: description,
               enrollInResearchGroup: enrollInResearchGroup,
               type: type
             });
-          case 3:
-            _context2.prev = 3;
+          case 2:
+            _context2.prev = 2;
             setIsSubmitting(false);
-            return _context2.finish(3);
-          case 4:
+            return _context2.finish(2);
+          case 3:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[2,, 3, 4]]);
+      }, _callee2, null, [[1,, 2, 3]]);
     }))
   }, function (_ref9) {
     var formProps = _ref9.formProps;
@@ -375,25 +344,27 @@ var FeedbackForm = function FeedbackForm(_ref2) {
       hasCloseButton: true
     }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, null, feedbackTitle || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.feedbackTitle))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, (0, _platformFeatureFlags.fg)('ak_feedback_collector_hide_required_summary') ? showRequiredFieldsSummary && requiredFieldsSummary : requiredFieldsSummary, feedbackTitleDetails, customContent, showTypeField ? /*#__PURE__*/_react.default.createElement(_form.Field, {
       name: "topic",
+      id: "topic",
       label: selectLabel || formatMessage(_messages.messages.selectionOptionDefaultLabel),
-      isRequired: true
+      isRequired: true,
+      validate: validateType
     }, function (_ref0) {
+      var _selectOptions$find2;
       var _ref0$fieldProps = _ref0.fieldProps,
         id = _ref0$fieldProps.id,
-        restProps = (0, _objectWithoutProperties2.default)(_ref0$fieldProps, _excluded2);
+        restProps = (0, _objectWithoutProperties2.default)(_ref0$fieldProps, _excluded2),
+        error = _ref0.error;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, restProps, {
+        value: (_selectOptions$find2 = selectOptions.find(function (opt) {
+          return opt.value === type;
+        })) !== null && _selectOptions$find2 !== void 0 ? _selectOptions$find2 : null,
         onChange: function onChange(option) {
+          var _restProps$onChange2;
           if (!option || option instanceof Array) {
             return;
           }
           setType(option.value);
-          if (validationErrors.type) {
-            setValidationErrors(function (prev) {
-              return _objectSpread(_objectSpread({}, prev), {}, {
-                type: undefined
-              });
-            });
-          }
+          (_restProps$onChange2 = restProps.onChange) === null || _restProps$onChange2 === void 0 || _restProps$onChange2.call(restProps, option.value);
         },
         menuPosition: "fixed",
         options: selectOptions
@@ -401,30 +372,28 @@ var FeedbackForm = function FeedbackForm(_ref2) {
         ,
         ref: focusRef,
         placeholder: getDefaultPlaceholder(feedbackGroupLabels),
-        inputId: id
-      })), validationErrors.type && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, validationErrors.type));
+        inputId: id,
+        isInvalid: !!error
+      })), error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, error));
     }) : null, showDefaultTextFields && canShowTextField && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_form.Field, {
       label: showTypeField ? getFieldLabels(feedbackGroupLabels)[type] : customTextAreaLabel || formatMessage(_messages.messages.defaultCustomTextAreaLabel),
       isRequired: true,
-      name: "description"
+      name: "description",
+      id: "description",
+      validate: validateDescription
     }, function (_ref1) {
-      var fieldProps = _ref1.fieldProps;
+      var fieldProps = _ref1.fieldProps,
+        error = _ref1.error;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textarea.default, (0, _extends2.default)({}, fieldProps, {
         name: "foo",
         minimumRows: 6,
         placeholder: summaryPlaceholder || undefined,
         onChange: function onChange(e) {
           setDescription(e.target.value);
-          if (validationErrors.description) {
-            setValidationErrors(function (prev) {
-              return _objectSpread(_objectSpread({}, prev), {}, {
-                description: undefined
-              });
-            });
-          }
+          fieldProps.onChange(e.target.value);
         },
         value: description
-      })), validationErrors.description && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, validationErrors.description));
+      })), error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, error));
     }), !anonymousFeedback && /*#__PURE__*/_react.default.createElement(_form.Fieldset, null, /*#__PURE__*/_react.default.createElement("legend", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.optInOptionsLegend)), /*#__PURE__*/_react.default.createElement(_form.Field, {
       name: "can-be-contacted"
     }, function (_ref10) {

package/dist/es2019/components/FeedbackCollector.js

@@ -92,7 +92,7 @@ export default class FeedbackCollector extends Component {
     return FeedbackCollector.defaultProps.url;
   }
   getPackageVersion() {
-    return "15.4.0" || 'Unknown, at least 11.0.0';
+    return "15.6.0" || 'Unknown, at least 11.0.0';
   }
   async getEntitlementInformation() {
     var _entitlementDetails, _entitlementDetails2, _productName, _entitlement, _productEntitlement;

package/dist/es2019/components/FeedbackForm.js

@@ -55,11 +55,17 @@ const FeedbackForm = ({
   const [enrollInResearchGroup, setEnrollInResearchGroup] = useState(false);
   const [type, setType] = useState('empty');
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [validationErrors, setValidationErrors] = useState({});
   const {
     formatMessage
   } = useIntl();
   const isTypeSelected = () => type !== 'empty';
+  const validateType = value => showTypeField && (!value || value === 'empty') ? formatMessage(messages.validationErrorTypeRequired) : undefined;
+  const validateDescription = value => {
+    if (!showDefaultTextFields || hasDescriptionDefaultValue) {
+      return undefined;
+    }
+    return !value || !value.trim() ? formatMessage(messages.validationErrorDescriptionRequired) : undefined;
+  };
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleCancel = (...args) => {
@@ -69,22 +75,7 @@ const FeedbackForm = ({
     onClose(...args);
   };
   const canShowTextField = isTypeSelected() || !showTypeField;
-  const hasDescription = description || hasDescriptionDefaultValue;
   const isDisabled = isSubmitting || disableSubmitButton;
-  const getValidationErrors = () => {
-    const errors = {};
-
-    // Validate type selection if showTypeField is true
-    if (showTypeField && !isTypeSelected()) {
-      errors.type = formatMessage(messages.validationErrorTypeRequired);
-    }
-
-    // Validate description if showDefaultTextFields is true
-    if (showDefaultTextFields && !hasDescription) {
-      errors.description = formatMessage(messages.validationErrorDescriptionRequired);
-    }
-    return errors;
-  };
   const getFieldLabels = record => {
     var _record$bug, _record$comment, _record$suggestion, _record$question, _record$empty, _record$not_relevant, _record$not_accurate, _record$too_slow, _record$unhelpful_lin, _record$other;
     return {
@@ -157,11 +148,6 @@ const FeedbackForm = ({
     shouldScrollInViewport: true
   }, fg('platform-design_system_team-form_conversion') ? /*#__PURE__*/React.createElement(Form, {
     onSubmit: async () => {
-      const errors = getValidationErrors();
-      if (Object.keys(errors).length > 0) {
-        setValidationErrors(errors);
-        return;
-      }
       setIsSubmitting(true);
       try {
         await onSubmit({
@@ -178,54 +164,56 @@ const FeedbackForm = ({
     hasCloseButton: true
   }, /*#__PURE__*/React.createElement(ModalTitle, null, feedbackTitle || /*#__PURE__*/React.createElement(FormattedMessage, messages.feedbackTitle))), /*#__PURE__*/React.createElement(ModalBody, null, fg('ak_feedback_collector_hide_required_summary') ? showRequiredFieldsSummary && requiredFieldsSummary : requiredFieldsSummary, feedbackTitleDetails, customContent, showTypeField ? /*#__PURE__*/React.createElement(Field, {
     name: "topic",
+    id: "topic",
     label: selectLabel || formatMessage(messages.selectionOptionDefaultLabel),
-    isRequired: true
+    isRequired: true,
+    validate: validateType
   }, ({
     fieldProps: {
       id,
       ...restProps
-    }
-  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, _extends({}, restProps, {
-    onChange: option => {
-      if (!option || option instanceof Array) {
-        return;
-      }
-      setType(option.value);
-      if (validationErrors.type) {
-        setValidationErrors(prev => ({
-          ...prev,
-          type: undefined
-        }));
-      }
     },
-    menuPosition: "fixed",
-    options: selectOptions
-    // @ts-ignore
-    ,
-    ref: focusRef,
-    placeholder: getDefaultPlaceholder(feedbackGroupLabels),
-    inputId: id
-  })), validationErrors.type && /*#__PURE__*/React.createElement(ErrorMessage, null, validationErrors.type))) : null, showDefaultTextFields && canShowTextField && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Field, {
+    error
+  }) => {
+    var _selectOptions$find;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, _extends({}, restProps, {
+      value: (_selectOptions$find = selectOptions.find(opt => opt.value === type)) !== null && _selectOptions$find !== void 0 ? _selectOptions$find : null,
+      onChange: option => {
+        var _restProps$onChange;
+        if (!option || option instanceof Array) {
+          return;
+        }
+        setType(option.value);
+        (_restProps$onChange = restProps.onChange) === null || _restProps$onChange === void 0 ? void 0 : _restProps$onChange.call(restProps, option.value);
+      },
+      menuPosition: "fixed",
+      options: selectOptions
+      // @ts-ignore
+      ,
+      ref: focusRef,
+      placeholder: getDefaultPlaceholder(feedbackGroupLabels),
+      inputId: id,
+      isInvalid: !!error
+    })), error && /*#__PURE__*/React.createElement(ErrorMessage, null, error));
+  }) : null, showDefaultTextFields && canShowTextField && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Field, {
     label: showTypeField ? getFieldLabels(feedbackGroupLabels)[type] : customTextAreaLabel || formatMessage(messages.defaultCustomTextAreaLabel),
     isRequired: true,
-    name: "description"
+    name: "description",
+    id: "description",
+    validate: validateDescription
   }, ({
-    fieldProps
+    fieldProps,
+    error
   }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextArea, _extends({}, fieldProps, {
     name: "foo",
     minimumRows: 6,
     placeholder: summaryPlaceholder || undefined,
     onChange: e => {
       setDescription(e.target.value);
-      if (validationErrors.description) {
-        setValidationErrors(prev => ({
-          ...prev,
-          description: undefined
-        }));
-      }
+      fieldProps.onChange(e.target.value);
     },
     value: description
-  })), validationErrors.description && /*#__PURE__*/React.createElement(ErrorMessage, null, validationErrors.description))), !anonymousFeedback && /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement("legend", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.optInOptionsLegend)), /*#__PURE__*/React.createElement(Field, {
+  })), error && /*#__PURE__*/React.createElement(ErrorMessage, null, error))), !anonymousFeedback && /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement("legend", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.optInOptionsLegend)), /*#__PURE__*/React.createElement(Field, {
     name: "can-be-contacted"
   }, ({
     fieldProps
@@ -268,11 +256,6 @@ const FeedbackForm = ({
     testId: "feedbackCollectorSubmitBtn"
   }, submitButtonLabel || /*#__PURE__*/React.createElement(FormattedMessage, messages.submitButtonLabel)))) : /*#__PURE__*/React.createElement(Form, {
     onSubmit: async () => {
-      const errors = getValidationErrors();
-      if (Object.keys(errors).length > 0) {
-        setValidationErrors(errors);
-        return;
-      }
       setIsSubmitting(true);
       try {
         await onSubmit({
@@ -291,54 +274,56 @@ const FeedbackForm = ({
     hasCloseButton: true
   }, /*#__PURE__*/React.createElement(ModalTitle, null, feedbackTitle || /*#__PURE__*/React.createElement(FormattedMessage, messages.feedbackTitle))), /*#__PURE__*/React.createElement(ModalBody, null, fg('ak_feedback_collector_hide_required_summary') ? showRequiredFieldsSummary && requiredFieldsSummary : requiredFieldsSummary, feedbackTitleDetails, customContent, showTypeField ? /*#__PURE__*/React.createElement(Field, {
     name: "topic",
+    id: "topic",
     label: selectLabel || formatMessage(messages.selectionOptionDefaultLabel),
-    isRequired: true
+    isRequired: true,
+    validate: validateType
   }, ({
     fieldProps: {
       id,
       ...restProps
-    }
-  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, _extends({}, restProps, {
-    onChange: option => {
-      if (!option || option instanceof Array) {
-        return;
-      }
-      setType(option.value);
-      if (validationErrors.type) {
-        setValidationErrors(prev => ({
-          ...prev,
-          type: undefined
-        }));
-      }
     },
-    menuPosition: "fixed",
-    options: selectOptions
-    // @ts-ignore
-    ,
-    ref: focusRef,
-    placeholder: getDefaultPlaceholder(feedbackGroupLabels),
-    inputId: id
-  })), validationErrors.type && /*#__PURE__*/React.createElement(ErrorMessage, null, validationErrors.type))) : null, showDefaultTextFields && canShowTextField && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Field, {
+    error
+  }) => {
+    var _selectOptions$find2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, _extends({}, restProps, {
+      value: (_selectOptions$find2 = selectOptions.find(opt => opt.value === type)) !== null && _selectOptions$find2 !== void 0 ? _selectOptions$find2 : null,
+      onChange: option => {
+        var _restProps$onChange2;
+        if (!option || option instanceof Array) {
+          return;
+        }
+        setType(option.value);
+        (_restProps$onChange2 = restProps.onChange) === null || _restProps$onChange2 === void 0 ? void 0 : _restProps$onChange2.call(restProps, option.value);
+      },
+      menuPosition: "fixed",
+      options: selectOptions
+      // @ts-ignore
+      ,
+      ref: focusRef,
+      placeholder: getDefaultPlaceholder(feedbackGroupLabels),
+      inputId: id,
+      isInvalid: !!error
+    })), error && /*#__PURE__*/React.createElement(ErrorMessage, null, error));
+  }) : null, showDefaultTextFields && canShowTextField && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Field, {
     label: showTypeField ? getFieldLabels(feedbackGroupLabels)[type] : customTextAreaLabel || formatMessage(messages.defaultCustomTextAreaLabel),
     isRequired: true,
-    name: "description"
+    name: "description",
+    id: "description",
+    validate: validateDescription
   }, ({
-    fieldProps
+    fieldProps,
+    error
   }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextArea, _extends({}, fieldProps, {
     name: "foo",
     minimumRows: 6,
     placeholder: summaryPlaceholder || undefined,
     onChange: e => {
       setDescription(e.target.value);
-      if (validationErrors.description) {
-        setValidationErrors(prev => ({
-          ...prev,
-          description: undefined
-        }));
-      }
+      fieldProps.onChange(e.target.value);
     },
     value: description
-  })), validationErrors.description && /*#__PURE__*/React.createElement(ErrorMessage, null, validationErrors.description))), !anonymousFeedback && /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement("legend", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.optInOptionsLegend)), /*#__PURE__*/React.createElement(Field, {
+  })), error && /*#__PURE__*/React.createElement(ErrorMessage, null, error))), !anonymousFeedback && /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement("legend", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.optInOptionsLegend)), /*#__PURE__*/React.createElement(Field, {
     name: "can-be-contacted"
   }, ({
     fieldProps