@semcore/feedback-form 16.2.0 → 17.0.0-prerelease.18

package/lib/cjs/component/feedback-rating/FeedbackRating.js

@@ -1,17 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+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 _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
 var _baseComponents = require("@semcore/base-components");
@@ -36,75 +30,63 @@ var _CheckboxButton = _interopRequireDefault(require("../checkbox-button/Checkbo
 var _FeedbackItem = require("../feedback-item/FeedbackItem");
 var _SliderRating = _interopRequireDefault(require("../slider-rating/SliderRating"));
 var _SubmitButton = require("../submit-button/SubmitButton");
-var _excluded = ["header", "submitText", "formConfig", "notificationText", "notificationTitle", "learnMoreLink", "Children", "styles", "forwardRef", "status", "theme", "background", "rating", "visible", "onVisibleChange", "notificationVisible", "onNotificationClose", "getI18nText", "errorFeedbackEmail", "modalWidth", "Illustration", "Notice"];
 /*!__reshadow-styles__:"../../style/feedback-rating.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SFeedbackRating_rhp4z_gg_ ul{margin:0;padding:0;list-style:none}.___SFeedbackRating_rhp4z_gg_ li{list-style:none}.___SFeedbackRating_rhp4z_gg_ .___SHeader_rhp4z_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);font-weight:var(--intergalactic-bold, 700);margin:var(--intergalactic-spacing-4x, 16px)0;text-align:center}", /*__inner_css_end__*/"rhp4z_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SFeedbackRating_lr4d3_gg_ ul{margin:0;padding:0;list-style:none}.___SFeedbackRating_lr4d3_gg_ li{list-style:none}.___SFeedbackRating_lr4d3_gg_ .___SHeader_lr4d3_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);font-weight:var(--intergalactic-bold, 700);margin:var(--intergalactic-spacing-4x, 16px)0;text-align:center}", /*__inner_css_end__*/"lr4d3_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SFeedbackRating": "___SFeedbackRating_rhp4z_gg_",
-  "__SHeader": "___SHeader_rhp4z_gg_"
+  "__SFeedbackRating": "___SFeedbackRating_lr4d3_gg_",
+  "__SHeader": "___SHeader_lr4d3_gg_"
 });
-var FeedbackRatingRoot = /*#__PURE__*/function (_Component) {
-  function FeedbackRatingRoot() {
-    var _this;
-    (0, _classCallCheck2["default"])(this, FeedbackRatingRoot);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2["default"])(this, FeedbackRatingRoot, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "state", {
+class FeedbackRatingRoot extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
       error: false
     });
-    (0, _defineProperty2["default"])(_this, "manager", new _noticeBubble.NoticeBubbleManager());
-    (0, _defineProperty2["default"])(_this, "focusDecorator", (0, _finalFormFocus["default"])());
-    (0, _defineProperty2["default"])(_this, "handleChangeRating", function (rating) {
+    (0, _defineProperty2.default)(this, "manager", new _noticeBubble.NoticeBubbleManager());
+    (0, _defineProperty2.default)(this, "focusDecorator", (0, _finalFormFocus.default)());
+    (0, _defineProperty2.default)(this, "handleChangeRating", rating => {
       if (rating > 0) {
-        _this.asProps.onVisibleChange(true, rating);
+        this.asProps.onVisibleChange(true, rating);
       }
     });
-    (0, _defineProperty2["default"])(_this, "handelCloseModal", function () {
-      _this.asProps.onVisibleChange(false, _this.asProps.rating);
+    (0, _defineProperty2.default)(this, "handelCloseModal", () => {
+      this.asProps.onVisibleChange(false, this.asProps.rating);
     });
-    (0, _defineProperty2["default"])(_this, "handleChange", function (fn) {
-      return function (_value, e) {
-        fn(e);
-      };
+    (0, _defineProperty2.default)(this, "handleChange", fn => (_value, e) => {
+      fn(e);
     });
-    (0, _defineProperty2["default"])(_this, "renderCheckbox", function (config, index) {
-      var initialValue = _this.props.initialValues[config.key];
-      return /*#__PURE__*/_react["default"].createElement(_reactFinalForm.Field, {
+    (0, _defineProperty2.default)(this, "renderCheckbox", (config, index) => {
+      const initialValue = this.props.initialValues[config.key];
+      return /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
         name: config.key,
         initialValue: initialValue,
         type: "checkbox",
         key: config.key
-      }, function (_ref7) {
-        var input = _ref7.input;
-        return /*#__PURE__*/_react["default"].createElement(FeedbackRating.Checkbox, (0, _extends2["default"])({}, input, {
-          id: config.key,
-          label: config.label,
-          onChange: function onChange(_checked, e) {
-            return input.onChange(e);
-          },
-          focused: index === 0
-        }));
-      });
+      }, ({
+        input
+      }) => /*#__PURE__*/_react.default.createElement(FeedbackRating.Checkbox, (0, _extends2.default)({}, input, {
+        id: config.key,
+        label: config.label,
+        onChange: (_checked, e) => input.onChange(e),
+        focused: index === 0
+      })));
     });
-    (0, _defineProperty2["default"])(_this, "renderTextField", function (config) {
-      var _config$description;
-      var initialValue = _this.props.initialValues[config.key];
-      var label = typeof config.label === 'string' ? /*#__PURE__*/_react["default"].createElement(_typography.Text, {
+    (0, _defineProperty2.default)(this, "renderTextField", config => {
+      const initialValue = this.props.initialValues[config.key];
+      const label = typeof config.label === 'string' ? /*#__PURE__*/_react.default.createElement(_typography.Text, {
         mb: 2,
         size: 200
       }, config.label) : config.label;
-      var isDescriptionReactFragment = ((_config$description = config.description) === null || _config$description === void 0 ? void 0 : _config$description.type) === _react["default"].Fragment;
-      return /*#__PURE__*/_react["default"].createElement(_baseComponents.Flex, {
+      const isDescriptionReactFragment = config.description?.type === _react.default.Fragment;
+      return /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, {
         direction: "column"
-      }, /*#__PURE__*/_react["default"].createElement(_baseComponents.Flex, {
+      }, /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, {
         tag: "label",
         mt: 4,
         htmlFor: config.key,
         key: config.key
-      }, label), /*#__PURE__*/_react["default"].createElement(FeedbackRating.Item, {
+      }, label), /*#__PURE__*/_react.default.createElement(FeedbackRating.Item, {
         name: config.key,
         validate: config.validate,
         initialValue: initialValue,
@@ -113,12 +95,13 @@ var FeedbackRatingRoot = /*#__PURE__*/function (_Component) {
           fallbackPlacements: ['right-start', 'bottom']
         },
         "aria-describedby": config.description ? config.key + '-description' : undefined
-      }, function (_ref8) {
-        var input = _ref8.input;
+      }, ({
+        input
+      }) => {
         if (config.type === 'textarea') {
-          return /*#__PURE__*/_react["default"].createElement(_textarea["default"], (0, _extends2["default"])({}, input, {
+          return /*#__PURE__*/_react.default.createElement(_textarea.default, (0, _extends2.default)({}, input, {
             h: 80,
-            onChange: _this.handleChange(input.onChange),
+            onChange: this.handleChange(input.onChange),
             id: config.key
           }));
         }
@@ -127,254 +110,237 @@ var FeedbackRatingRoot = /*#__PURE__*/function (_Component) {
             input.autoComplete = 'email';
             input.type = 'email';
           }
-          return /*#__PURE__*/_react["default"].createElement(_input["default"], {
+          return /*#__PURE__*/_react.default.createElement(_input.default, {
             state: input.state
-          }, /*#__PURE__*/_react["default"].createElement(_input["default"].Value, (0, _extends2["default"])({}, input, {
-            onChange: _this.handleChange(input.onChange),
+          }, /*#__PURE__*/_react.default.createElement(_input.default.Value, (0, _extends2.default)({}, input, {
+            onChange: this.handleChange(input.onChange),
             id: config.key
           })));
         }
         return null;
-      }), config.description && /*#__PURE__*/_react["default"].createElement(_baseComponents.Box, {
+      }), config.description && /*#__PURE__*/_react.default.createElement(_baseComponents.Box, {
         mt: 2
-      }, typeof config.description === 'string' || isDescriptionReactFragment ? /*#__PURE__*/_react["default"].createElement(_typography.Text, {
+      }, typeof config.description === 'string' || isDescriptionReactFragment ? /*#__PURE__*/_react.default.createElement(_typography.Text, {
         size: 200,
         color: "text-secondary",
         id: config.key + '-description'
       }, config.description) : config.description));
     });
-    return _this;
   }
-  (0, _inherits2["default"])(FeedbackRatingRoot, _Component);
-  return (0, _createClass2["default"])(FeedbackRatingRoot, [{
-    key: "headerId",
-    get: function get() {
-      var uid = this.asProps.uid;
-      return "".concat(uid, "-feedback-rating-header");
-    }
-  }, {
-    key: "getHeaderProps",
-    value: function getHeaderProps() {
-      return {
-        id: this.headerId
-      };
-    }
-  }, {
-    key: "getItemProps",
-    value: function getItemProps() {
-      var validateOnBlur = this.asProps.validateOnBlur;
-      return {
-        validateOnBlur: validateOnBlur
-      };
-    }
-  }, {
-    key: "getNoticeTextId",
-    value: function getNoticeTextId() {
-      var uid = this.asProps.uid;
-      return "".concat(uid, "-feedback-rating-notice");
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
-      var _this$asProps = this.asProps,
-        status = _this$asProps.status,
-        getI18nText = _this$asProps.getI18nText;
-      if (prevProps.status !== status) {
+  get headerId() {
+    const {
+      uid
+    } = this.asProps;
+    return `${uid}-feedback-rating-header`;
+  }
+  getHeaderProps() {
+    return {
+      id: this.headerId
+    };
+  }
+  getItemProps() {
+    const {
+      validateOnBlur
+    } = this.asProps;
+    return {
+      validateOnBlur
+    };
+  }
+  getNoticeTextId() {
+    const {
+      uid
+    } = this.asProps;
+    return `${uid}-feedback-rating-notice`;
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      status,
+      getI18nText
+    } = this.asProps;
+    if (prevProps.status !== status) {
+      this.setState({
+        error: false
+      });
+      if (status === 'success') {
+        // showing notice with delay for SR, less than 100ms is not enough
+        setTimeout(() => {
+          this.manager.add({
+            icon: /*#__PURE__*/_react.default.createElement(_m.default, {
+              color: "green-400"
+            }),
+            children: getI18nText('successMessage'),
+            initialAnimation: true,
+            duration: 5000
+          });
+        }, 300);
+      } else if (status === 'error') {
         this.setState({
-          error: false
+          error: true
         });
-        if (status === 'success') {
-          // showing notice with delay for SR, less than 100ms is not enough
-          setTimeout(function () {
-            _this2.manager.add({
-              icon: /*#__PURE__*/_react["default"].createElement(_m["default"], {
-                color: "green-400"
-              }),
-              children: getI18nText('successMessage'),
-              initialAnimation: true,
-              duration: 5000
-            });
-          }, 300);
-        } else if (status === 'error') {
-          this.setState({
-            error: true
-          });
-        }
       }
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref2 = this.asProps,
-        _ref4,
-        _this3 = this;
-      var _this$asProps2 = this.asProps,
-        header = _this$asProps2.header,
-        submitText = _this$asProps2.submitText,
-        formConfig = _this$asProps2.formConfig,
-        notificationText = _this$asProps2.notificationText,
-        notificationTitle = _this$asProps2.notificationTitle,
-        learnMoreLink = _this$asProps2.learnMoreLink,
-        _Children = _this$asProps2.Children,
-        styles = _this$asProps2.styles,
-        forwardRef = _this$asProps2.forwardRef,
-        status = _this$asProps2.status,
-        theme = _this$asProps2.theme,
-        background = _this$asProps2.background,
-        rating = _this$asProps2.rating,
-        visible = _this$asProps2.visible,
-        _onVisibleChange = _this$asProps2.onVisibleChange,
-        notificationVisible = _this$asProps2.notificationVisible,
-        onNotificationClose = _this$asProps2.onNotificationClose,
-        getI18nText = _this$asProps2.getI18nText,
-        errorFeedbackEmail = _this$asProps2.errorFeedbackEmail,
-        modalWidth = _this$asProps2.modalWidth,
-        Illustration = _this$asProps2.Illustration,
-        NoticeComponent = _this$asProps2.Notice,
-        other = (0, _objectWithoutProperties2["default"])(_this$asProps2, _excluded);
-      var SFeedbackRating = _modal["default"];
-      var checkboxFields = formConfig.filter(function (item) {
-        return item.type === 'checkbox';
-      });
-      var textFields = formConfig.filter(function (item) {
-        return item.type === 'textarea' || item.type === 'input' || item.type === 'email';
-      });
-      var notificationId = this.getNoticeTextId();
-      return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_baseComponents.Box, (0, _core.assignProps)({}, _ref2), /*#__PURE__*/_react["default"].createElement(NoticeComponent, _ref4.cn("NoticeComponent", {
-        "visible": notificationVisible,
-        "aria-label": getI18nText('leaveFeedback'),
-        "tag": _baseComponents.Flex,
-        "alignItems": notificationTitle ? 'flex-start' : 'center'
-      }), /*#__PURE__*/_react["default"].createElement(NoticeComponent.Label, {
-        mr: 3,
-        "aria-hidden": true
-      }, /*#__PURE__*/_react["default"].createElement(Illustration, _ref4.cn("Illustration", {}))), /*#__PURE__*/_react["default"].createElement(NoticeComponent.Content, null, notificationTitle ? /*#__PURE__*/_react["default"].createElement(NoticeComponent.Title, null, notificationTitle) : null, /*#__PURE__*/_react["default"].createElement(NoticeComponent.Text, {
-        gap: 3,
-        tag: _baseComponents.Flex,
-        alignItems: notificationTitle ? 'flex-start' : 'center'
-      }, /*#__PURE__*/_react["default"].createElement(_typography.Text, _ref4.cn("Text", {
-        "id": notificationId
-      }), notificationText), /*#__PURE__*/_react["default"].createElement(NoticeComponent.Actions, {
-        mt: 0
-      }, /*#__PURE__*/_react["default"].createElement(_SliderRating["default"], _ref4.cn("SliderRating", {
-        "value": rating,
-        "onChange": this.handleChangeRating,
-        "aria-labelledby": notificationId
-      }))), learnMoreLink && /*#__PURE__*/_react["default"].createElement(_link["default"], _ref4.cn("Link", {
-        "href": learnMoreLink
-      }), getI18nText('learnMore')))), /*#__PURE__*/_react["default"].createElement(NoticeComponent.Close, {
-        onClick: onNotificationClose
-      })), /*#__PURE__*/_react["default"].createElement(SFeedbackRating, _ref4.cn("SFeedbackRating", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+  }
+  render() {
+    var _ref = this.asProps,
+      _ref2 = this.asProps,
+      _ref4;
+    const {
+      header,
+      submitText,
+      formConfig,
+      notificationText,
+      notificationTitle,
+      learnMoreLink,
+      Children: _Children,
+      styles,
+      forwardRef,
+      status,
+      theme,
+      background,
+      rating,
+      visible,
+      onVisibleChange: _onVisibleChange,
+      notificationVisible,
+      onNotificationClose,
+      getI18nText,
+      errorFeedbackEmail,
+      modalWidth,
+      Illustration,
+      Notice: NoticeComponent,
+      ...other
+    } = this.asProps;
+    const SFeedbackRating = _modal.default;
+    const checkboxFields = formConfig.filter(item => item.type === 'checkbox');
+    const textFields = formConfig.filter(item => item.type === 'textarea' || item.type === 'input' || item.type === 'email');
+    const notificationId = this.getNoticeTextId();
+    return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_baseComponents.Box, (0, _core.assignProps)({}, _ref2), /*#__PURE__*/_react.default.createElement(NoticeComponent, _ref4.cn("NoticeComponent", {
+      "visible": notificationVisible,
+      "aria-label": getI18nText('leaveFeedback'),
+      "tag": _baseComponents.Flex,
+      "alignItems": notificationTitle ? 'flex-start' : 'center'
+    }), /*#__PURE__*/_react.default.createElement(NoticeComponent.Label, {
+      mr: 3,
+      "aria-hidden": true
+    }, /*#__PURE__*/_react.default.createElement(Illustration, _ref4.cn("Illustration", {}))), /*#__PURE__*/_react.default.createElement(NoticeComponent.Content, null, notificationTitle ? /*#__PURE__*/_react.default.createElement(NoticeComponent.Title, null, notificationTitle) : null, /*#__PURE__*/_react.default.createElement(NoticeComponent.Text, {
+      gap: 3,
+      tag: _baseComponents.Flex,
+      alignItems: notificationTitle ? 'flex-start' : 'center'
+    }, /*#__PURE__*/_react.default.createElement(_typography.Text, _ref4.cn("Text", {
+      "id": notificationId
+    }), notificationText), /*#__PURE__*/_react.default.createElement(NoticeComponent.Actions, {
+      mt: 0
+    }, /*#__PURE__*/_react.default.createElement(_SliderRating.default, _ref4.cn("SliderRating", {
+      "value": rating,
+      "onChange": this.handleChangeRating,
+      "aria-labelledby": notificationId
+    }))), learnMoreLink && /*#__PURE__*/_react.default.createElement(_link.default, _ref4.cn("Link", {
+      "href": learnMoreLink
+    }), getI18nText('learnMore')))), /*#__PURE__*/_react.default.createElement(NoticeComponent.Close, {
+      onClick: onNotificationClose
+    })), /*#__PURE__*/_react.default.createElement(SFeedbackRating, _ref4.cn("SFeedbackRating", {
+      ...(0, _core.assignProps)({
         "visible": visible,
         "onClose": this.handelCloseModal,
         "p": 0,
-        "use:w": modalWidth !== null && modalWidth !== void 0 ? modalWidth : 440,
+        "use:w": modalWidth ?? 440,
         "aria-labelledby": this.headerId
-      }, _ref))), /*#__PURE__*/_react["default"].createElement(_reactFinalForm.Form, _ref4.cn("Form", (0, _objectSpread2["default"])({
-        "decorators": [this.focusDecorator]
-      }, other)), function (api) {
-        var _ref5;
-        return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_spinContainer["default"], _ref5.cn("SpinContainer", {
-          "background": background,
-          "theme": theme,
-          "size": 'xl',
-          "loading": status !== 'loading' ? api.submitting : status === 'loading',
-          "p": 1,
-          "m": 9
-        }), /*#__PURE__*/_react["default"].createElement(_baseComponents.Flex, _ref5.cn("Flex", {
-          "justifyContent": 'center'
-        }), /*#__PURE__*/_react["default"].createElement(_SliderRating["default"], _ref5.cn("SliderRating", {
-          "value": rating,
-          "readonly": true
-        }))), (header === null || header === void 0 ? void 0 : header.type) === FeedbackRating.Header ? header : /*#__PURE__*/_react["default"].createElement(FeedbackRating.Header, null, header), /*#__PURE__*/_react["default"].createElement(_baseComponents.Box, _ref5.cn("Box", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-          "tag": 'form',
-          "noValidate": true,
-          "method": 'POST',
-          "ref": forwardRef
-        }, other), {}, {
-          "onSubmit": api.handleSubmit
-        })), /*#__PURE__*/_react["default"].createElement(_reactFinalForm.Field, _ref5.cn("Field", {
-          "name": 'rating',
-          "initialValue": rating
-        }), function (_ref9) {
-          var input = _ref9.input;
-          return /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, input, {
-            type: "hidden"
-          }));
-        }), /*#__PURE__*/_react["default"].createElement("div", _ref5.cn("div", {
-          "role": 'group',
-          "aria-labelledby": _this3.headerId
-        }), checkboxFields.map(function (formConfigItem, index) {
-          return _this3.renderCheckbox(formConfigItem, index);
-        })), textFields.map(function (formConfigItem) {
-          return _this3.renderTextField(formConfigItem);
-        }), _this3.state.error && /*#__PURE__*/_react["default"].createElement(_notice["default"], _ref5.cn("SemcoreNotice", {
-          "theme": 'warning',
-          "mt": 4,
-          "mb": 4
-        }), /*#__PURE__*/_react["default"].createElement(_notice["default"].Label, null, /*#__PURE__*/_react["default"].createElement(_m2["default"], _ref5.cn("WarnM", {}))), /*#__PURE__*/_react["default"].createElement(_notice["default"].Content, null, getI18nText('errorMessage', {
-          // todo: Brauer Ilia - think how to fix type
-          // @ts-ignore
-          email: /*#__PURE__*/_react["default"].createElement(_link["default"], _ref5.cn("Link", {
-            "href": "mailto:".concat(errorFeedbackEmail)
-          }), errorFeedbackEmail)
-        }))), /*#__PURE__*/_react["default"].createElement(_baseComponents.Flex, _ref5.cn("Flex", {
-          "mt": 4,
-          "justifyContent": 'center'
-        }), /*#__PURE__*/_react["default"].createElement(FeedbackRating.Submit, {
-          loading: status !== 'loading' ? api.submitting : status === 'loading',
-          size: "l"
-        }, submitText !== null && submitText !== void 0 ? submitText : getI18nText('submitButton')))));
-      })), /*#__PURE__*/_react["default"].createElement(_noticeBubble.NoticeBubbleContainer, _ref4.cn("NoticeBubbleContainer", {
-        "manager": this.manager
-      })));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(FeedbackRatingRoot, "displayName", 'FeedbackRatingForm');
-(0, _defineProperty2["default"])(FeedbackRatingRoot, "style", style);
-(0, _defineProperty2["default"])(FeedbackRatingRoot, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages), (0, _uniqueID["default"])()]);
-(0, _defineProperty2["default"])(FeedbackRatingRoot, "defaultProps", {
-  onSubmit: function onSubmit() {},
+      }, _ref)
+    }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Form, _ref4.cn("Form", {
+      "decorators": [this.focusDecorator],
+      ...other
+    }), api => {
+      var _ref5;
+      return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_spinContainer.default, _ref5.cn("SpinContainer", {
+        "background": background,
+        "theme": theme,
+        "size": 'xl',
+        "loading": status !== 'loading' ? api.submitting : status === 'loading',
+        "p": 1,
+        "m": 9
+      }), /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, _ref5.cn("Flex", {
+        "justifyContent": 'center'
+      }), /*#__PURE__*/_react.default.createElement(_SliderRating.default, _ref5.cn("SliderRating", {
+        "value": rating,
+        "readonly": true
+      }))), header?.type === FeedbackRating.Header ? header : /*#__PURE__*/_react.default.createElement(FeedbackRating.Header, null, header), /*#__PURE__*/_react.default.createElement(_baseComponents.Box, _ref5.cn("Box", {
+        "tag": 'form',
+        "noValidate": true,
+        "method": 'POST',
+        "ref": forwardRef,
+        ...other,
+        "onSubmit": api.handleSubmit
+      }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, _ref5.cn("Field", {
+        "name": 'rating',
+        "initialValue": rating
+      }), ({
+        input
+      }) => /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, input, {
+        type: "hidden"
+      }))), /*#__PURE__*/_react.default.createElement("div", _ref5.cn("div", {
+        "role": 'group',
+        "aria-labelledby": this.headerId
+      }), checkboxFields.map((formConfigItem, index) => this.renderCheckbox(formConfigItem, index))), textFields.map(formConfigItem => this.renderTextField(formConfigItem)), this.state.error && /*#__PURE__*/_react.default.createElement(_notice.default, _ref5.cn("SemcoreNotice", {
+        "theme": 'warning',
+        "mt": 4,
+        "mb": 4
+      }), /*#__PURE__*/_react.default.createElement(_notice.default.Label, null, /*#__PURE__*/_react.default.createElement(_m2.default, _ref5.cn("WarnM", {}))), /*#__PURE__*/_react.default.createElement(_notice.default.Content, null, getI18nText('errorMessage', {
+        // todo: Brauer Ilia - think how to fix type
+        // @ts-ignore
+        email: /*#__PURE__*/_react.default.createElement(_link.default, _ref5.cn("Link", {
+          "href": `mailto:${errorFeedbackEmail}`
+        }), errorFeedbackEmail)
+      }))), /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, _ref5.cn("Flex", {
+        "mt": 4,
+        "justifyContent": 'center'
+      }), /*#__PURE__*/_react.default.createElement(FeedbackRating.Submit, {
+        loading: status !== 'loading' ? api.submitting : status === 'loading',
+        size: "l"
+      }, submitText ?? getI18nText('submitButton')))));
+    })), /*#__PURE__*/_react.default.createElement(_noticeBubble.NoticeBubbleContainer, _ref4.cn("NoticeBubbleContainer", {
+      "manager": this.manager
+    })));
+  }
+}
+(0, _defineProperty2.default)(FeedbackRatingRoot, "displayName", 'FeedbackRatingForm');
+(0, _defineProperty2.default)(FeedbackRatingRoot, "style", style);
+(0, _defineProperty2.default)(FeedbackRatingRoot, "enhance", [(0, _i18nEnhance.default)(_intergalacticDynamicLocales.localizedMessages), (0, _uniqueID.default)()]);
+(0, _defineProperty2.default)(FeedbackRatingRoot, "defaultProps", {
+  onSubmit: () => {},
   i18n: _intergalacticDynamicLocales.localizedMessages,
   locale: 'en',
-  Illustration: _Feedback["default"],
-  Notice: _notice["default"]
+  Illustration: _Feedback.default,
+  Notice: _notice.default
 });
-(0, _defineProperty2["default"])(FeedbackRatingRoot, "validate", {
-  description: function description(error) {
-    return function () {
-      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-      var words = value.split(/\s+/);
-      var symbols = words.join(' ');
-      if (Boolean(value) && (symbols.length < 10 || words.length < 3)) {
-        return error;
-      }
-    };
+(0, _defineProperty2.default)(FeedbackRatingRoot, "validate", {
+  description: error => (value = '') => {
+    const words = value.split(/\s+/);
+    const symbols = words.join(' ');
+    if (Boolean(value) && (symbols.length < 10 || words.length < 3)) {
+      return error;
+    }
   },
-  email: function email(error) {
-    return function () {
-      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-      if (Boolean(value) && !/.+@.+\..+/i.test(String(value).toLowerCase())) {
-        return error;
-      }
-    };
+  email: error => (value = '') => {
+    if (Boolean(value) && !/.+@.+\..+/i.test(String(value).toLowerCase())) {
+      return error;
+    }
   }
 });
 function Header(props) {
   var _ref3 = arguments[0],
     _ref6;
-  var styles = props.styles;
-  var SHeader = _modal["default"].Title;
-  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SHeader, _ref6.cn("SHeader", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref3))));
+  const {
+    styles
+  } = props;
+  const SHeader = _modal.default.Title;
+  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SHeader, _ref6.cn("SHeader", {
+    ...(0, _core.assignProps)({}, _ref3)
+  }));
 }
-var FeedbackRating = (0, _core.createComponent)(FeedbackRatingRoot, {
-  Header: Header,
+const FeedbackRating = (0, _core.createComponent)(FeedbackRatingRoot, {
+  Header,
   Item: _FeedbackItem.FeedbackItem,
-  Checkbox: _CheckboxButton["default"],
+  Checkbox: _CheckboxButton.default,
   Submit: _SubmitButton.SubmitButton
 });
-var _default = exports["default"] = FeedbackRating;
+var _default = exports.default = FeedbackRating;
 //# sourceMappingURL=FeedbackRating.js.map