survey-react-ui 1.9.106 → 1.9.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.9.106",
+  "version": "1.9.108",
   "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.106",
+    "survey-core": "1.9.108",
     "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.106
+ * surveyjs - Survey JavaScript library v1.9.108
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -133,7 +133,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!***************************************!*\
   !*** ./src/entries/react-ui-model.ts ***!
   \***************************************/
-/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, SurveyLocStringViewer, SurveyLocStringEditor */
+/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -391,6 +391,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _react_string_editor__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../react/string-editor */ "./src/react/string-editor.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringEditor", function() { return _react_string_editor__WEBPACK_IMPORTED_MODULE_74__["SurveyLocStringEditor"]; });
 
+/* harmony import */ var _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../react/components/loading-indicator */ "./src/react/components/loading-indicator.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LoadingIndicatorComponent", function() { return _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_75__["LoadingIndicatorComponent"]; });
+
 // react
 
 
@@ -465,6 +468,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 
 //Uncomment to include the "date" question type.
@@ -477,7 +481,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*********************************!*\
   !*** ./src/entries/react-ui.ts ***!
   \*********************************/
-/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, SurveyLocStringViewer, SurveyLocStringEditor, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings, Model, ResponsivityManager, VerticalResponsivityManager, unwrap */
+/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings, Model, ResponsivityManager, VerticalResponsivityManager, unwrap */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -661,6 +665,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringEditor", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SurveyLocStringEditor"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LoadingIndicatorComponent", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["LoadingIndicatorComponent"]; });
+
 /* harmony import */ var _core_export__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./core-export */ "./src/entries/core-export.ts");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyModel", function() { return _core_export__WEBPACK_IMPORTED_MODULE_1__["SurveyModel"]; });
 
@@ -690,7 +696,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.106", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.108", "survey-react-ui");
 
 
 /***/ }),
@@ -1715,6 +1721,52 @@ _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.re
 });
 
 
+/***/ }),
+
+/***/ "./src/react/components/loading-indicator.tsx":
+/*!****************************************************!*\
+  !*** ./src/react/components/loading-indicator.tsx ***!
+  \****************************************************/
+/*! exports provided: LoadingIndicatorComponent */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LoadingIndicatorComponent", function() { return LoadingIndicatorComponent; });
+/* 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 _svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+var LoadingIndicatorComponent = /** @class */ (function (_super) {
+    __extends(LoadingIndicatorComponent, _super);
+    function LoadingIndicatorComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LoadingIndicatorComponent.prototype.render = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: "sd-loading-indicator" },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_1__["SvgIcon"], { iconName: "icon-loading", size: "auto" })));
+    };
+    return LoadingIndicatorComponent;
+}(react__WEBPACK_IMPORTED_MODULE_0__["Component"]));
+
+
+
 /***/ }),
 
 /***/ "./src/react/components/matrix-actions/detail-button/detail-button.tsx":
@@ -3912,6 +3964,129 @@ var SurveyElementHeader = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./src/react/element.tsx":
+/*!*******************************!*\
+  !*** ./src/react/element.tsx ***!
+  \*******************************/
+/*! exports provided: SurveyRowElement */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyRowElement", function() { return SurveyRowElement; });
+/* 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");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+var SurveyRowElement = /** @class */ (function (_super) {
+    __extends(SurveyRowElement, _super);
+    function SurveyRowElement(props) {
+        var _this = _super.call(this, props) || this;
+        _this.element.cssClasses;
+        return _this;
+    }
+    SurveyRowElement.prototype.getStateElement = function () {
+        return this.element;
+    };
+    Object.defineProperty(SurveyRowElement.prototype, "element", {
+        get: function () {
+            return this.props.element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "index", {
+        get: function () {
+            return this.props.index;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "row", {
+        get: function () {
+            return this.props.row;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "survey", {
+        get: function () {
+            return this.props.survey;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "creator", {
+        get: function () {
+            return this.props.creator;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "css", {
+        get: function () {
+            return this.props.css;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyRowElement.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
+            return false;
+        this.element.cssClasses;
+        return true;
+    };
+    SurveyRowElement.prototype.renderElement = function () {
+        var element = this.element;
+        var innerElement = this.createElement(element, this.index);
+        var css = element.cssClassesValue;
+        var focusIn = function () {
+            var el = element;
+            if (el && el.isQuestion) {
+                el.focusIn();
+            }
+        };
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: css.questionWrapper, style: element.rootStyle, "data-key": innerElement.key, key: innerElement.key, onFocus: focusIn }, this.row.isNeedRender ? innerElement : _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(element.skeletonComponentName, { element: element, css: this.css, })));
+    };
+    SurveyRowElement.prototype.createElement = function (element, elementIndex) {
+        var index = elementIndex ? "-" + elementIndex : 0;
+        var elementType = element.getType();
+        if (!_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.isElementRegistered(elementType)) {
+            elementType = "question";
+        }
+        return _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(elementType, {
+            key: element.name + index,
+            element: element,
+            creator: this.creator,
+            survey: this.survey,
+            css: this.css,
+        });
+    };
+    return SurveyRowElement;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"]));
+
+
+
 /***/ }),
 
 /***/ "./src/react/flow-panel.tsx":
@@ -5484,7 +5659,7 @@ var SurveyProgressButtons = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("li", { key: "listelement" + index, className: this.getListElementCss(index), onClick: this.isListElementClickable(index)
                 ? function () { return _this.clickListElement(index); }
                 : undefined },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageTitle, title: page.navigationTitle || page.name }, page.navigationTitle || page.name),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageTitle, title: page.renderedNavigationTitle }, page.renderedNavigationTitle),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageDescription, title: page.navigationDescription }, page.navigationDescription)));
     };
     SurveyProgressButtons.prototype.isListElementClickable = function (index) {
@@ -6201,7 +6376,7 @@ var SurveyQuestionCheckbox = /** @class */ (function (_super) {
     SurveyQuestionCheckbox.prototype.renderElement = function () {
         var _this = this;
         var cssClasses = this.question.cssClasses;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { role: "presentation", className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); } },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); }, role: this.question.a11y_input_ariaRole, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("legend", { role: "presentation", className: "sv-hidden" }),
             this.getHeader(),
             this.question.hasColumns
@@ -6381,8 +6556,8 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
             : this.handleOnChange;
         var itemLabel = !this.hideCaption ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.controlLabel }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass, role: "presentation" },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: labelClass, "aria-label": this.question.getAriaItemLabel(this.item) },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, role: "option", type: "checkbox", name: this.question.name, value: this.item.value != "selectall" ? this.item.value : undefined, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), checked: isChecked, onChange: onItemChanged, "aria-describedby": this.question.ariaDescribedBy }),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: labelClass },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", name: this.question.name, value: this.item.value != "selectall" ? this.item.value : undefined, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), checked: isChecked, onChange: onItemChanged }),
                 this.cssClasses.materialDecorator ?
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
@@ -6511,7 +6686,7 @@ var SurveyQuestionCommentItem = /** @class */ (function (_super) {
         if (question.isReadOnlyRenderDiv()) {
             return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null, comment);
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.getId(), className: className, value: comment, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), placeholder: this.getPlaceholder(), onChange: handleOnChange, onBlur: function (e) { _this.onCommentChange(e); handleOnChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, "aria-required": question.isRequired, "aria-label": question.locTitle.renderedHtml, style: { resize: question.resizeStyle } }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.getId(), className: className, value: comment, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), placeholder: this.getPlaceholder(), onChange: handleOnChange, onBlur: function (e) { _this.onCommentChange(e); handleOnChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, "aria-required": question.isRequired || question.a11y_input_ariaRequired, "aria-label": question.ariaLabel || question.a11y_input_ariaLabel, style: { resize: question.resizeStyle } }));
     };
     return SurveyQuestionCommentItem;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
@@ -7227,6 +7402,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
 /* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
 /* harmony import */ var _reactSurvey__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./reactSurvey */ "./src/react/reactSurvey.tsx");
+/* harmony import */ var _components_loading_indicator__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/loading-indicator */ "./src/react/components/loading-indicator.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -7248,6 +7424,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyQuestionFile = /** @class */ (function (_super) {
     __extends(SurveyQuestionFile, _super);
     function SurveyQuestionFile(props) {
@@ -7260,14 +7437,17 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyQuestionFile.prototype.renderLoadingIndicator = function () {
+        return this.question.showLoadingIndicator ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_loading_indicator__WEBPACK_IMPORTED_MODULE_6__["LoadingIndicatorComponent"], null) : null;
+    };
     SurveyQuestionFile.prototype.renderElement = function () {
         var _this = this;
         var preview = this.renderPreview();
         var fileInput = null;
         var fileDecorator = this.renderFileDecorator();
-        var clearButton = this.renderClearButton(this.question.showRemoveButton);
-        var clearButtonBottom = this.renderClearButton(this.question.showRemoveButtonBottom);
-        var mobileFileNavigator = this.question.mobileFileNavigatorVisible ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: this.question.mobileFileNavigator })) : null;
+        var clearButton = this.question.showRemoveButton ? this.renderClearButton(this.question.cssClasses.removeButton) : null;
+        var clearButtonBottom = this.question.showRemoveButtonBottom ? this.renderClearButton(this.question.cssClasses.removeButtonBottom) : null;
+        var fileNavigator = this.question.fileNavigatorVisible ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: this.question.fileNavigator })) : null;
         fileInput = (this.isDisplayMode ?
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "file", disabled: this.isDisplayMode, className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, onChange: !this.isDisplayMode ? this.question.doChange : (function () { }), multiple: this.question.allowMultiple, placeholder: this.question.title, accept: this.question.acceptedTypes })
             :
@@ -7279,26 +7459,34 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
                 clearButton,
                 preview,
                 clearButtonBottom,
-                mobileFileNavigator)));
+                fileNavigator)));
     };
     SurveyQuestionFile.prototype.renderFileDecorator = function () {
-        var questionCss = this.question.cssClasses;
+        var loadingIndicator = this.renderLoadingIndicator();
+        var chooseButton = this.renderChooseButton();
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getFileDecoratorCss() },
+            loadingIndicator,
+            chooseButton));
+    };
+    SurveyQuestionFile.prototype.renderChooseButton = function () {
         var noFileChosen = null;
         var chooseFile = null;
+        if (!this.question.showChooseButton)
+            return null;
         chooseFile = this.question.isReadOnly ? null : Object(_reactSurvey__WEBPACK_IMPORTED_MODULE_5__["attachKey2click"])(react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { role: "button", tabIndex: 0, className: this.question.getChooseFileCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonText },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, this.question.chooseButtonText),
             (!!this.question.cssClasses.chooseFileIconId) ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { title: this.question.chooseButtonText, iconName: this.question.cssClasses.chooseFileIconId, size: "auto" }) : null));
         if (this.question.isEmpty()) {
             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() },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
             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)));
     };
     SurveyQuestionFile.prototype.renderClearButton = function (className) {
-        return className ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("button", { type: "button", onClick: this.question.doClean, className: className },
+        return !this.question.isUploading ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("button", { type: "button", onClick: this.question.doClean, className: className },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, this.question.clearButtonCaption),
             (!!this.question.cssClasses.removeButtonIconId) ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { iconName: this.question.cssClasses.removeButtonIconId, size: "auto", title: this.question.clearButtonCaption }) : null)) : null;
     };
@@ -7313,7 +7501,7 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
     };
     SurveyQuestionFile.prototype.renderPreview = function () {
         var _this = this;
-        if (!this.question.previewValue || !this.question.previewValue.length)
+        if (!this.question.allowShowPreview)
             return null;
         var previews = this.question.previewValue.map(function (val, index) {
             if (!val)
@@ -8232,7 +8420,7 @@ var SurveyQuestionMultipleText = /** @class */ (function (_super) {
                 rows.push(this.renderRow(i, tableRows[i].cells, cssClasses));
             }
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("table", { className: cssClasses.root },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("table", { className: this.question.getQuestionRootCss() },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tbody", null, rows)));
     };
     SurveyQuestionMultipleText.prototype.renderCell = function (cell, cssClasses, index) {
@@ -8612,7 +8800,7 @@ var SurveyQuestionRadiogroup = /** @class */ (function (_super) {
             clearButton = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null,
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "button", className: this.question.cssClasses.clearButton, onClick: function () { return _this.question.clearValue(); }, value: this.question.clearButtonCaption })));
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { className: this.question.getSelectBaseRootCss(), role: "presentation", ref: function (fieldset) { return (_this.setControl(fieldset)); } },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); }, role: this.question.a11y_input_ariaRole, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy },
             this.question.hasColumns
                 ? this.getColumnedBody(cssClasses)
                 : this.getBody(cssClasses),
@@ -8771,7 +8959,7 @@ var SurveyQuestionRadioItem = /** @class */ (function (_super) {
         var controlLabelClass = this.question.getControlLabelClass(this.item);
         var itemLabel = !this.hideCaption ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: controlLabelClass }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass, role: "presentation" },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: labelClass, "aria-label": this.question.getAriaItemLabel(this.item) },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: labelClass },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { "aria-describedby": this.question.ariaDescribedBy, className: this.cssClasses.itemControl, id: this.question.getItemId(this.item), type: "radio", name: this.question.questionName, checked: this.isChecked, value: this.item.value, disabled: !this.question.getItemEnabled(this.item), onChange: this.handleOnChange }),
                 this.cssClasses.materialDecorator ?
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
@@ -9425,8 +9613,9 @@ __webpack_require__.r(__webpack_exports__);
 /* 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");
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
-/* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactsurveymodel */ "./src/react/reactsurveymodel.tsx");
+/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element */ "./src/react/element.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactsurveymodel */ "./src/react/reactsurveymodel.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -9446,6 +9635,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyRow = /** @class */ (function (_super) {
     __extends(SurveyRow, _super);
     function SurveyRow(props) {
@@ -9493,23 +9683,17 @@ var SurveyRow = /** @class */ (function (_super) {
     };
     SurveyRow.prototype.renderElementContent = function () {
         var _this = this;
-        var elements = this.row.visibleElements.map(function (element, index) {
-            var innerElement = _this.createElement(element, index);
-            var css = element.cssClassesValue;
-            var focusIn = function () {
-                var el = element;
-                if (el && el.isQuestion) {
-                    el.focusIn();
-                }
-            };
-            return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: css.questionWrapper, style: element.rootStyle, "data-key": innerElement.key, key: innerElement.key, onFocus: focusIn }, _this.row.isNeedRender ? innerElement : _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(element.skeletonComponentName, { element: element, css: _this.css, })));
+        var elements = this.row.visibleElements.map(function (element, elementIndex) {
+            var index = elementIndex ? "-" + elementIndex : 0;
+            var key = element.name + index;
+            return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_element__WEBPACK_IMPORTED_MODULE_2__["SurveyRowElement"], { element: element, index: elementIndex, row: _this.row, survey: _this.survey, creator: _this.creator, css: _this.css, key: key }));
         });
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { ref: this.rootRef, className: this.row.getRowCss() }, elements));
     };
     SurveyRow.prototype.renderElement = function () {
         var survey = this.survey;
         var content = this.renderElementContent();
-        var wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_3__["ReactSurveyElementsWrapper"].wrapRow(survey, content, this.row);
+        var wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_4__["ReactSurveyElementsWrapper"].wrapRow(survey, content, this.row);
         return wrapper || content;
     };
     SurveyRow.prototype.componentDidMount = function () {
@@ -9544,10 +9728,10 @@ var SurveyRow = /** @class */ (function (_super) {
     SurveyRow.prototype.createElement = function (element, elementIndex) {
         var index = elementIndex ? "-" + elementIndex : 0;
         var elementType = element.getType();
-        if (!_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.isElementRegistered(elementType)) {
+        if (!_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.isElementRegistered(elementType)) {
             elementType = "question";
         }
-        return _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(elementType, {
+        return _element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.createElement(elementType, {
             key: element.name + index,
             element: element,
             creator: this.creator,
@@ -10767,7 +10951,11 @@ var ResponsivityManager = /** @class */ (function () {
             setTimeout(function () { _this.process(); }, 1);
         };
         if (typeof ResizeObserver !== "undefined") {
-            this.resizeObserver = new ResizeObserver(function (_) { return _this.process(); });
+            this.resizeObserver = new ResizeObserver(function (entries) {
+                window.requestAnimationFrame(function () {
+                    _this.process();
+                });
+            });
             this.resizeObserver.observe(this.container.parentElement);
         }
     }