survey-react-ui 1.9.104 → 1.9.106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.9.104",
+  "version": "1.9.106",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",
@@ -21,7 +21,7 @@
   },
   "typings": "survey-react-ui.d.ts",
   "dependencies": {
-    "survey-core": "1.9.104",
+    "survey-core": "1.9.106",
     "react": "^16.5.0 || ^17.0.1 || ^18.1.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0"
   }

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.104
+ * surveyjs - Survey JavaScript library v1.9.106
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -690,7 +690,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.104", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.106", "survey-react-ui");
 
 
 /***/ }),
@@ -1441,11 +1441,11 @@ var ComponentsContainer = /** @class */ (function (_super) {
         }
         if (!needRenderWrapper) {
             return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, components.map(function (component) {
-                return _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.createElement(component.component, { survey: _this.props.survey, model: component.data, key: component.id });
+                return _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.createElement(component.component, { survey: _this.props.survey, model: component.data, container: _this.props.container, key: component.id });
             }));
         }
         return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-components-column" }, components.map(function (component) {
-            return _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.createElement(component.component, { survey: _this.props.survey, model: component.data, key: component.id });
+            return _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.createElement(component.component, { survey: _this.props.survey, model: component.data, container: _this.props.container, key: component.id });
         }));
     };
     return ComponentsContainer;
@@ -1644,6 +1644,12 @@ var List = /** @class */ (function (_super) {
             this.model.initListContainerHtmlElement(this.listContainerRef.current);
         }
     };
+    List.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        if (!!this.model) {
+            this.model.initListContainerHtmlElement(undefined);
+        }
+    };
     List.prototype.renderElement = function () {
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.cssClasses.root, ref: this.listContainerRef },
             this.searchElementContent(),
@@ -2450,6 +2456,10 @@ var Popup = /** @class */ (function (_super) {
         _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
         this.setTargetElement();
     };
+    Popup.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        this.popup.resetComponentElement();
+    };
     Popup.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         var _a;
         if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
@@ -5018,6 +5028,8 @@ var Survey = /** @class */ (function (_super) {
     };
     Survey.prototype.destroySurvey = function () {
         if (this.survey) {
+            this.survey.renderCallback = undefined;
+            this.survey.onPartialSend.clear();
             this.survey.stopTimer();
             this.survey.destroyResizeObserver();
         }
@@ -5040,6 +5052,9 @@ var Survey = /** @class */ (function (_super) {
         else if (this.survey.state == "loading") {
             renderResult = this.renderLoading();
         }
+        else if (this.survey.state == "empty") {
+            renderResult = this.renderEmptySurvey();
+        }
         else {
             renderResult = this.renderSurvey();
         }
@@ -5088,11 +5103,11 @@ var Survey = /** @class */ (function (_super) {
     };
     Survey.prototype.renderCompletedBefore = function () {
         var htmlValue = { __html: this.survey.processedCompletedBeforeHtml };
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { dangerouslySetInnerHTML: htmlValue, className: this.css.body }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { dangerouslySetInnerHTML: htmlValue, className: this.survey.completedBeforeCss }));
     };
     Survey.prototype.renderLoading = function () {
         var htmlValue = { __html: this.survey.processedLoadingHtml };
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { dangerouslySetInnerHTML: htmlValue, className: this.css.body }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { dangerouslySetInnerHTML: htmlValue, className: this.survey.loadingBodyCss }));
     };
     Survey.prototype.renderSurvey = function () {
         var activePage = this.survey.activePage
@@ -5101,10 +5116,6 @@ var Survey = /** @class */ (function (_super) {
         var isStaring = this.survey.isShowStartingPage;
         var pageId = this.survey.activePage ? this.survey.activePage.id : "";
         var className = this.survey.bodyCss;
-        if (!activePage) {
-            className = this.css.bodyEmpty;
-            activePage = this.renderEmptySurvey();
-        }
         var style = {};
         if (!!this.survey.renderedWidth) {
             style.maxWidth = this.survey.renderedWidth;
@@ -5121,7 +5132,7 @@ var Survey = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_page__WEBPACK_IMPORTED_MODULE_2__["SurveyPage"], { survey: this.survey, page: page, css: this.css, creator: this }));
     };
     Survey.prototype.renderEmptySurvey = function () {
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, this.survey.emptySurveyText);
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.bodyEmpty }, this.survey.emptySurveyText);
     };
     Survey.prototype.createSurvey = function (newProps) {
         if (!newProps)
@@ -5379,7 +5390,7 @@ var SurveyProgress = /** @class */ (function (_super) {
         var progressStyle = {
             width: this.progress + "%",
         };
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.survey.getProgressCssClasses() },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.survey.getProgressCssClasses(this.props.container) },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { style: progressStyle, className: this.css.progressBar, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100 },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: survey_core__WEBPACK_IMPORTED_MODULE_1__["SurveyProgressModel"].getProgressTextInBarCss(this.css) }, this.progressText)),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: survey_core__WEBPACK_IMPORTED_MODULE_1__["SurveyProgressModel"].getProgressTextUnderBarCss(this.css) }, this.progressText)));
@@ -5590,7 +5601,7 @@ _element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.re
 /*!*************************************!*\
   !*** ./src/react/reactquestion.tsx ***!
   \*************************************/
-/*! exports provided: SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsWrapped, SurveyQuestionAndErrorsCell */
+/*! exports provided: SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsWrapped, SurveyQuestionAndErrorsCell, SurveyQuestionErrorCell */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5599,16 +5610,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyElementErrors", function() { return SurveyElementErrors; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionAndErrorsWrapped", function() { return SurveyQuestionAndErrorsWrapped; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionAndErrorsCell", function() { return SurveyQuestionAndErrorsCell; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionErrorCell", function() { return SurveyQuestionErrorCell; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactsurveymodel */ "./src/react/reactsurveymodel.tsx");
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
-/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
-/* harmony import */ var _reactquestion_comment__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./reactquestion_comment */ "./src/react/reactquestion_comment.tsx");
-/* harmony import */ var _custom_widget__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./custom-widget */ "./src/react/custom-widget.tsx");
-/* harmony import */ var _element_header__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./element-header */ "./src/react/element-header.tsx");
+/* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactsurveymodel */ "./src/react/reactsurveymodel.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
+/* harmony import */ var _reactquestion_comment__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactquestion_comment */ "./src/react/reactquestion_comment.tsx");
+/* harmony import */ var _custom_widget__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./custom-widget */ "./src/react/custom-widget.tsx");
+/* harmony import */ var _element_header__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./element-header */ "./src/react/element-header.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -5631,7 +5641,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
 var SurveyQuestion = /** @class */ (function (_super) {
     __extends(SurveyQuestion, _super);
     function SurveyQuestion(props) {
@@ -5647,7 +5656,7 @@ var SurveyQuestion = /** @class */ (function (_super) {
         if (!customWidget) {
             return creator.createQuestionElement(question);
         }
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_custom_widget__WEBPACK_IMPORTED_MODULE_6__["SurveyCustomWidget"], { creator: creator, question: question });
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_custom_widget__WEBPACK_IMPORTED_MODULE_5__["SurveyCustomWidget"], { creator: creator, question: question });
     };
     SurveyQuestion.prototype.getStateElement = function () {
         return this.question;
@@ -5725,9 +5734,6 @@ var SurveyQuestion = /** @class */ (function (_super) {
             ? this.renderErrors(cssClasses, "bottom")
             : null;
         var comment = question && question.hasComment ? this.renderComment(cssClasses) : null;
-        var errorsTooltip = this.question.isErrorsModeTooltip
-            ? this.renderErrors(cssClasses, "tooltip")
-            : null;
         var descriptionUnderInput = question.hasDescriptionUnderInput
             ? this.renderDescription()
             : null;
@@ -5736,7 +5742,6 @@ var SurveyQuestion = /** @class */ (function (_super) {
             questionRender,
             comment,
             errorsBottom,
-            errorsTooltip,
             descriptionUnderInput));
     };
     SurveyQuestion.prototype.renderElement = function () {
@@ -5765,7 +5770,7 @@ var SurveyQuestion = /** @class */ (function (_super) {
         var survey = this.question.survey;
         var wrapper = null;
         if (survey) {
-            wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_2__["ReactSurveyElementsWrapper"].wrapElement(survey, element, this.question);
+            wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElementsWrapper"].wrapElement(survey, element, this.question);
         }
         return wrapper !== null && wrapper !== void 0 ? wrapper : element;
     };
@@ -5773,7 +5778,7 @@ var SurveyQuestion = /** @class */ (function (_super) {
         var survey = this.question.survey;
         var wrapper = null;
         if (survey) {
-            wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_2__["ReactSurveyElementsWrapper"].wrapQuestionContent(survey, element, this.question);
+            wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElementsWrapper"].wrapQuestionContent(survey, element, this.question);
         }
         return wrapper !== null && wrapper !== void 0 ? wrapper : element;
     };
@@ -5781,24 +5786,24 @@ var SurveyQuestion = /** @class */ (function (_super) {
         return SurveyQuestion.renderQuestionBody(this.creator, this.question);
     };
     SurveyQuestion.prototype.renderDescription = function () {
-        return _reactquestion_element__WEBPACK_IMPORTED_MODULE_4__["SurveyElementBase"].renderQuestionDescription(this.question);
+        return _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"].renderQuestionDescription(this.question);
     };
     SurveyQuestion.prototype.renderComment = function (cssClasses) {
-        var commentText = _reactquestion_element__WEBPACK_IMPORTED_MODULE_4__["SurveyElementBase"].renderLocString(this.question.locCommentText);
+        var commentText = _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"].renderLocString(this.question.locCommentText);
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getCommentAreaCss() },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null, commentText),
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_reactquestion_comment__WEBPACK_IMPORTED_MODULE_5__["SurveyQuestionCommentItem"], { question: this.question, cssClasses: cssClasses, otherCss: cssClasses.other, isDisplayMode: this.question.isInputReadOnly })));
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_reactquestion_comment__WEBPACK_IMPORTED_MODULE_4__["SurveyQuestionCommentItem"], { question: this.question, cssClasses: cssClasses, otherCss: cssClasses.other, isDisplayMode: this.question.isInputReadOnly })));
     };
     SurveyQuestion.prototype.renderHeader = function (question) {
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_element_header__WEBPACK_IMPORTED_MODULE_7__["SurveyElementHeader"], { element: question });
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_element_header__WEBPACK_IMPORTED_MODULE_6__["SurveyElementHeader"], { element: question });
     };
     SurveyQuestion.prototype.renderErrors = function (cssClasses, location) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyElementErrors, { element: this.question, cssClasses: cssClasses, creator: this.creator, location: location, id: this.question.id + "_errors" }));
     };
     return SurveyQuestion;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_4__["SurveyElementBase"]));
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"]));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.registerElement("question", function (props) {
+_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.registerElement("question", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestion, props);
 });
 var SurveyElementErrors = /** @class */ (function (_super) {
@@ -5806,7 +5811,6 @@ var SurveyElementErrors = /** @class */ (function (_super) {
     function SurveyElementErrors(props) {
         var _this = _super.call(this, props) || this;
         _this.state = _this.getState();
-        _this.tooltipRef = react__WEBPACK_IMPORTED_MODULE_0__["createRef"]();
         return _this;
     }
     Object.defineProperty(SurveyElementErrors.prototype, "id", {
@@ -5844,26 +5848,7 @@ var SurveyElementErrors = /** @class */ (function (_super) {
     SurveyElementErrors.prototype.canRender = function () {
         return !!this.element && this.element.hasVisibleErrors;
     };
-    SurveyElementErrors.prototype.componentDidUpdate = function (prevProps, prevState) {
-        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
-        if (this.props.location == "tooltip") {
-            if (this.tooltipRef.current && !this.tooltipManager) {
-                this.tooltipManager = new survey_core__WEBPACK_IMPORTED_MODULE_1__["TooltipManager"](this.tooltipRef.current);
-            }
-            if (!!this.tooltipManager && !this.tooltipRef.current) {
-                this.disposeTooltipManager();
-            }
-        }
-    };
     SurveyElementErrors.prototype.componentWillUnmount = function () {
-        if (!!this.tooltipManager) {
-            this.disposeTooltipManager();
-        }
-    };
-    SurveyElementErrors.prototype.disposeTooltipManager = function () {
-        var _a;
-        (_a = this.tooltipManager) === null || _a === void 0 ? void 0 : _a.dispose();
-        this.tooltipManager = undefined;
     };
     SurveyElementErrors.prototype.renderElement = function () {
         var errors = [];
@@ -5871,10 +5856,10 @@ var SurveyElementErrors = /** @class */ (function (_super) {
             var key = "error" + i;
             errors.push(this.creator.renderError(key, this.element.errors[i], this.cssClasses));
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { role: "alert", "aria-live": "polite", className: this.element.cssError, id: this.id, ref: this.tooltipRef }, errors));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { role: "alert", "aria-live": "polite", className: this.element.cssError, id: this.id }, errors));
     };
     return SurveyElementErrors;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_4__["ReactSurveyElement"]));
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["ReactSurveyElement"]));
 
 var SurveyQuestionAndErrorsWrapped = /** @class */ (function (_super) {
     __extends(SurveyQuestionAndErrorsWrapped, _super);
@@ -5920,23 +5905,9 @@ var SurveyQuestionAndErrorsWrapped = /** @class */ (function (_super) {
     SurveyQuestionAndErrorsWrapped.prototype.canRender = function () {
         return !!this.question;
     };
-    SurveyQuestionAndErrorsWrapped.prototype.renderErrors = function (errorsLocation) {
-        return this.getShowErrors() ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyElementErrors, { element: this.question, cssClasses: this.cssClasses, creator: this.creator, location: errorsLocation })) : null;
-    };
     SurveyQuestionAndErrorsWrapped.prototype.renderContent = function () {
-        var errorsLocation = this.creator.questionErrorLocation();
-        var errors = this.renderErrors(errorsLocation);
-        var errorsTop = this.question.showErrorOnTop
-            ? errors
-            : null;
-        var errorsBottom = this.question.showErrorOnBottom
-            ? errors
-            : null;
         var renderedQuestion = this.renderQuestion();
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
-            errorsTop,
-            renderedQuestion,
-            errorsBottom));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, renderedQuestion));
     };
     SurveyQuestionAndErrorsWrapped.prototype.getShowErrors = function () {
         return this.question.isVisible;
@@ -5945,7 +5916,7 @@ var SurveyQuestionAndErrorsWrapped = /** @class */ (function (_super) {
         return SurveyQuestion.renderQuestionBody(this.creator, this.question);
     };
     return SurveyQuestionAndErrorsWrapped;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_4__["ReactSurveyElement"]));
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["ReactSurveyElement"]));
 
 var SurveyQuestionAndErrorsCell = /** @class */ (function (_super) {
     __extends(SurveyQuestionAndErrorsCell, _super);
@@ -5965,7 +5936,9 @@ var SurveyQuestionAndErrorsCell = /** @class */ (function (_super) {
     };
     SurveyQuestionAndErrorsCell.prototype.renderElement = function () {
         var style = this.getCellStyle();
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { ref: this.cellRef, className: this.itemCss, colSpan: this.props.cell.colSpans, "data-responsive-title": this.getHeaderText(), title: this.props.cell.getTitle(), style: style }, this.wrapCell(this.props.cell, (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.cellQuestionWrapper }, this.renderQuestion())))));
+        var cell = this.props.cell;
+        var focusIn = function () { cell.focusIn(); };
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { ref: this.cellRef, className: this.itemCss, colSpan: cell.colSpans, "data-responsive-title": this.getHeaderText(), title: cell.getTitle(), style: style, onFocus: focusIn }, this.wrapCell(this.props.cell, (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.cellQuestionWrapper }, this.renderQuestion())))));
     };
     SurveyQuestionAndErrorsCell.prototype.getCellStyle = function () {
         return null;
@@ -5980,13 +5953,63 @@ var SurveyQuestionAndErrorsCell = /** @class */ (function (_super) {
         var survey = this.question.survey;
         var wrapper = null;
         if (survey) {
-            wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_2__["ReactSurveyElementsWrapper"].wrapMatrixCell(survey, element, cell, this.props.reason);
+            wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElementsWrapper"].wrapMatrixCell(survey, element, cell, this.props.reason);
         }
         return wrapper !== null && wrapper !== void 0 ? wrapper : element;
     };
     return SurveyQuestionAndErrorsCell;
 }(SurveyQuestionAndErrorsWrapped));
 
+var SurveyQuestionErrorCell = /** @class */ (function (_super) {
+    __extends(SurveyQuestionErrorCell, _super);
+    function SurveyQuestionErrorCell(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            changed: 0
+        };
+        if (_this.question) {
+            _this.registerCallback(_this.question);
+        }
+        return _this;
+    }
+    Object.defineProperty(SurveyQuestionErrorCell.prototype, "question", {
+        get: function () {
+            return this.props.question;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionErrorCell.prototype.update = function () {
+        this.setState({ changed: this.state.changed + 1 });
+    };
+    SurveyQuestionErrorCell.prototype.registerCallback = function (question) {
+        var _this = this;
+        question.registerFunctionOnPropertyValueChanged("errors", function () {
+            _this.update();
+        }, "__reactSubscription");
+    };
+    SurveyQuestionErrorCell.prototype.unRegisterCallback = function (question) {
+        question.unRegisterFunctionOnPropertyValueChanged("errors", "__reactSubscription");
+    };
+    SurveyQuestionErrorCell.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.question && prevProps.question !== this.question) {
+            this.unRegisterCallback(prevProps.cell);
+        }
+        if (this.question) {
+            this.registerCallback(this.question);
+        }
+    };
+    SurveyQuestionErrorCell.prototype.componentWillUnmount = function () {
+        if (this.question) {
+            this.unRegisterCallback(this.question);
+        }
+    };
+    SurveyQuestionErrorCell.prototype.render = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyElementErrors, { element: this.question, creator: this.props.creator, cssClasses: this.question.cssClasses });
+    };
+    return SurveyQuestionErrorCell;
+}(react__WEBPACK_IMPORTED_MODULE_0__["Component"]));
+
 
 
 /***/ }),
@@ -6469,7 +6492,7 @@ var SurveyQuestionCommentItem = /** @class */ (function (_super) {
         return this.props.question.commentId;
     };
     SurveyQuestionCommentItem.prototype.getPlaceholder = function () {
-        return this.props.question.commentPlaceholder;
+        return this.props.question.renderedCommentPlaceholder;
     };
     SurveyQuestionCommentItem.prototype.renderElement = function () {
         var _this = this;
@@ -7269,7 +7292,7 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
             noFileChosen = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.noFileChosen }, this.question.noFileChosenCaption));
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getFileDecoratorCss() },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.dragAreaPlaceholder }, this.question.dragAreaPlaceholder),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.dragAreaPlaceholder }, this.question.renderedPlaceholder),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.wrapper },
                 chooseFile,
                 noFileChosen)));
@@ -7649,14 +7672,13 @@ _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__["ReactQuestionFactory"].Inst
 /*!********************************************************!*\
   !*** ./src/react/reactquestion_matrixdropdownbase.tsx ***!
   \********************************************************/
-/*! exports provided: SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownErrorCell */
+/*! exports provided: SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDropdownBase", function() { return SurveyQuestionMatrixDropdownBase; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDropdownCell", function() { return SurveyQuestionMatrixDropdownCell; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDropdownErrorCell", function() { return SurveyQuestionMatrixDropdownErrorCell; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
@@ -7867,7 +7889,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         }
         if (cell.isErrorsCell) {
             if (cell.isErrorsCell) {
-                return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixDropdownErrorCell, { cell: cell, creator: this.creator }));
+                return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_reactquestion__WEBPACK_IMPORTED_MODULE_2__["SurveyQuestionErrorCell"], { question: cell.question, creator: this.creator }));
             }
         }
         if (!cellContent)
@@ -8016,56 +8038,6 @@ var SurveyQuestionMatrixDropdownCell = /** @class */ (function (_super) {
     return SurveyQuestionMatrixDropdownCell;
 }(_reactquestion__WEBPACK_IMPORTED_MODULE_2__["SurveyQuestionAndErrorsCell"]));
 
-var SurveyQuestionMatrixDropdownErrorCell = /** @class */ (function (_super) {
-    __extends(SurveyQuestionMatrixDropdownErrorCell, _super);
-    function SurveyQuestionMatrixDropdownErrorCell(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            changed: 0
-        };
-        if (_this.cell) {
-            _this.registerCallback(_this.cell);
-        }
-        return _this;
-    }
-    Object.defineProperty(SurveyQuestionMatrixDropdownErrorCell.prototype, "cell", {
-        get: function () {
-            return this.props.cell;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SurveyQuestionMatrixDropdownErrorCell.prototype.update = function () {
-        this.setState({ changed: this.state.changed + 1 });
-    };
-    SurveyQuestionMatrixDropdownErrorCell.prototype.registerCallback = function (cell) {
-        var _this = this;
-        cell.question.registerFunctionOnPropertyValueChanged("errors", function () {
-            _this.update();
-        }, "__reactSubscription");
-    };
-    SurveyQuestionMatrixDropdownErrorCell.prototype.unRegisterCallback = function (cell) {
-        cell.question.unRegisterFunctionOnPropertyValueChanged("errors", "__reactSubscription");
-    };
-    SurveyQuestionMatrixDropdownErrorCell.prototype.componentDidUpdate = function (prevProps) {
-        if (prevProps.cell && prevProps.cell !== this.cell) {
-            this.unRegisterCallback(prevProps.cell);
-        }
-        if (this.cell) {
-            this.registerCallback(this.cell);
-        }
-    };
-    SurveyQuestionMatrixDropdownErrorCell.prototype.componentWillUnmount = function () {
-        if (this.cell) {
-            this.unRegisterCallback(this.cell);
-        }
-    };
-    SurveyQuestionMatrixDropdownErrorCell.prototype.render = function () {
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_reactquestion__WEBPACK_IMPORTED_MODULE_2__["SurveyElementErrors"], { element: this.cell.question, creator: this.props.creator, cssClasses: this.cell.question.cssClasses });
-    };
-    return SurveyQuestionMatrixDropdownErrorCell;
-}(react__WEBPACK_IMPORTED_MODULE_0__["Component"]));
-
 
 
 /***/ }),
@@ -8256,18 +8228,30 @@ var SurveyQuestionMultipleText = /** @class */ (function (_super) {
         var tableRows = this.question.getRows();
         var rows = [];
         for (var i = 0; i < tableRows.length; i++) {
-            rows.push(this.renderRow(i, tableRows[i], cssClasses));
+            if (tableRows[i].isVisible) {
+                rows.push(this.renderRow(i, tableRows[i].cells, cssClasses));
+            }
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("table", { className: cssClasses.root },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tbody", null, rows)));
     };
-    SurveyQuestionMultipleText.prototype.renderRow = function (rowIndex, items, cssClasses) {
+    SurveyQuestionMultipleText.prototype.renderCell = function (cell, cssClasses, index) {
+        var cellContent;
+        var focusIn = function () { cell.item.focusIn(); };
+        if (cell.isErrorsCell) {
+            cellContent = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_reactquestion__WEBPACK_IMPORTED_MODULE_2__["SurveyQuestionErrorCell"], { question: cell.item.editor, creator: this.creator });
+        }
+        else {
+            cellContent = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyMultipleTextItem, { question: this.question, item: cell.item, creator: this.creator, cssClasses: cssClasses });
+        }
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: "item" + index, className: cell.className, onFocus: focusIn }, cellContent));
+    };
+    SurveyQuestionMultipleText.prototype.renderRow = function (rowIndex, cells, cssClasses) {
         var key = "item" + rowIndex;
         var tds = [];
-        for (var i = 0; i < items.length; i++) {
-            var item = items[i];
-            tds.push(react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: "item" + i, className: this.question.cssClasses.cell },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyMultipleTextItem, { question: this.question, item: item, creator: this.creator, cssClasses: cssClasses })));
+        for (var i = 0; i < cells.length; i++) {
+            var cell = cells[i];
+            tds.push(this.renderCell(cell, cssClasses, i));
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tr", { key: key, className: cssClasses.row }, tds));
     };
@@ -8309,11 +8293,7 @@ var SurveyMultipleTextItem = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: this.question.getItemLabelCss(item) },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.itemTitle },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_title_title_content__WEBPACK_IMPORTED_MODULE_4__["TitleContent"], { element: item.editor, cssClasses: item.editor.cssClasses })),
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyMultipleTextItemEditor, { cssClasses: cssClasses, itemCss: this.question.getItemCss(), question: item.editor, creator: this.creator }),
-            this.renderItemTooltipError(item, cssClasses)));
-    };
-    SurveyMultipleTextItem.prototype.renderItemTooltipError = function (item, cssClasses) {
-        return this.item.editor.isErrorsModeTooltip ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_reactquestion__WEBPACK_IMPORTED_MODULE_2__["SurveyElementErrors"], { element: item.editor, cssClasses: cssClasses, creator: this.creator, location: "tooltip" })) : null;
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyMultipleTextItemEditor, { cssClasses: cssClasses, itemCss: this.question.getItemCss(), question: item.editor, creator: this.creator })));
     };
     return SurveyMultipleTextItem;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
@@ -9518,7 +9498,7 @@ var SurveyRow = /** @class */ (function (_super) {
             var css = element.cssClassesValue;
             var focusIn = function () {
                 var el = element;
-                if (el && !el.isDisposed && el.isQuestion) {
+                if (el && el.isQuestion) {
                     el.focusIn();
                 }
             };
@@ -9637,9 +9617,15 @@ var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.root, ref: function (root) { return (_this.setControl(root)); }, style: { height: this.question.signatureHeight, width: this.question.signatureWidth } },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.placeholder, style: { display: this.question.needShowPlaceholder() ? "" : "none" } }, this.question.placeHolderText),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("canvas", { tabIndex: 0 })),
+                this.renderBackgroundImage(),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("canvas", { tabIndex: 0, className: this.question.cssClasses.canvas })),
             clearButton));
     };
+    SurveyQuestionSignaturePad.prototype.renderBackgroundImage = function () {
+        if (!this.question.backgroundImage)
+            return null;
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("img", { className: this.question.cssClasses.backgroundImage, src: this.question.backgroundImage, width: this.question.signatureWidth, height: this.question.signatureHeight });
+    };
     SurveyQuestionSignaturePad.prototype.renderCleanButton = function () {
         var _this = this;
         if (!this.question.canShowClearButton)