survey-react-ui 1.9.119 → 1.9.121

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.9.119",
+  "version": "1.9.121",
   "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.119",
+    "survey-core": "1.9.121",
     "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.119
+ * surveyjs - Survey JavaScript library v1.9.121
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1991,7 +1991,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, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, 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, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent */
+/*! 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, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, 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, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2268,6 +2268,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_79__ = __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_79__["LoadingIndicatorComponent"]; });
 
+/* harmony import */ var _react_svgbundle__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../react/svgbundle */ "./src/react/svgbundle.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SvgBundleComponent", function() { return _react_svgbundle__WEBPACK_IMPORTED_MODULE_80__["SvgBundleComponent"]; });
+
 // react
 
 
@@ -2347,6 +2350,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 
 //Uncomment to include the "date" question type.
@@ -2359,7 +2363,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, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, 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, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, 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, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, 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, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings, Model, ResponsivityManager, VerticalResponsivityManager, unwrap */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2557,6 +2561,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LoadingIndicatorComponent", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["LoadingIndicatorComponent"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SvgBundleComponent", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SvgBundleComponent"]; });
+
 /* 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"]; });
 
@@ -2586,7 +2592,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.119", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.121", "survey-react-ui");
 
 
 /***/ }),
@@ -9749,7 +9755,7 @@ var englishStrings = {
     panelDynamicProgressText: "{0} of {1}",
     panelDynamicTabTextFormat: "Panel {panelIndex}",
     questionsProgressText: "Answered {0}/{1} questions",
-    emptySurvey: "The survey doesn't contain visible pages or questions.",
+    emptySurvey: "The survey doesn't contain any visible elements.",
     completingSurvey: "Thank you for completing the survey",
     completingSurveyBefore: "Our records show that you have already completed this survey.",
     loadingSurvey: "Loading Survey...",
@@ -10408,7 +10414,7 @@ var SurveyActionBar = /** @class */ (function (_super) {
             return;
         var container = this.rootRef.current;
         if (!!container) {
-            this.model.initResponsivityManager(container);
+            this.model.initResponsivityManager(container, function (callback) { setTimeout(callback); });
         }
     };
     SurveyActionBar.prototype.componentWillUnmount = function () {
@@ -10816,7 +10822,7 @@ var HeaderMobile = /** @class */ (function (_super) {
             this.model.survey.hasTitle ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-header__title", style: { maxWidth: this.model.textAreaWidth } },
                 react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_title_title_element__WEBPACK_IMPORTED_MODULE_3__["TitleElement"], { element: this.model.survey }))) : null,
             this.model.survey.renderedHasDescription ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-header__description", style: { maxWidth: this.model.textAreaWidth } },
-                react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h5", { className: this.model.survey.css.description }, _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"].renderLocString(this.model.survey.locDescription)))) : null));
+                react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.survey.css.description }, _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"].renderLocString(this.model.survey.locDescription)))) : null));
     };
     return HeaderMobile;
 }(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));
@@ -10847,7 +10853,7 @@ var HeaderCell = /** @class */ (function (_super) {
                 this.model.showTitle ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-header__title", style: { maxWidth: this.model.textAreaWidth } },
                     react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_title_title_element__WEBPACK_IMPORTED_MODULE_3__["TitleElement"], { element: this.model.survey }))) : null,
                 this.model.showDescription ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-header__description", style: { maxWidth: this.model.textAreaWidth } },
-                    react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h5", { className: this.model.survey.css.description }, _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"].renderLocString(this.model.survey.locDescription)))) : null)));
+                    react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.survey.css.description }, _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"].renderLocString(this.model.survey.locDescription)))) : null)));
     };
     return HeaderCell;
 }(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));
@@ -12604,7 +12610,7 @@ var SurveyHeader = /** @class */ (function (_super) {
         var description = _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"].renderLocString(this.survey.locDescription);
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.css.headerText, style: { maxWidth: this.survey.titleMaxWidth } },
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_title_title_element__WEBPACK_IMPORTED_MODULE_3__["TitleElement"], { element: this.survey }),
-            this.survey.renderedHasDescription ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h5", { className: this.css.description }, description) : null));
+            this.survey.renderedHasDescription ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.css.description }, description) : null));
     };
     SurveyHeader.prototype.renderLogoImage = function (isRender) {
         if (!isRender)
@@ -13176,7 +13182,7 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
         if (!this.question.allowClear || !this.question.cssClasses.cleanButtonIconId)
             return null;
         var style = { display: !this.question.showClearButton ? "none" : "" };
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.cleanButton, style: style, onClick: this.clear, tabIndex: this.question.showClearButton ? 0 : -1 },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.cleanButton, style: style, onClick: this.clear, "aria-hidden": "true" },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: this.question.cssClasses.cleanButtonSvg, iconName: this.question.cssClasses.cleanButtonIconId, title: this.question.clearCaption, size: "auto" })));
     };
     SurveyQuestionDropdownBase.prototype.createChevronButton = function () {
@@ -14619,6 +14625,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_brand_info__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/brand-info */ "./src/react/components/brand-info.tsx");
 /* harmony import */ var _components_notifier__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/notifier */ "./src/react/components/notifier.tsx");
 /* harmony import */ var _components_components_container__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/components-container */ "./src/react/components/components-container.tsx");
+/* harmony import */ var _svgbundle__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./svgbundle */ "./src/react/svgbundle.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -14656,6 +14663,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 
+
 var Survey = /** @class */ (function (_super) {
     __extends(Survey, _super);
     function Survey(props) {
@@ -14726,9 +14734,6 @@ var Survey = /** @class */ (function (_super) {
         this.destroySurvey();
     };
     Survey.prototype.doRender = function () {
-        if (this.survey["needRenderIcons"]) {
-            survey_core__WEBPACK_IMPORTED_MODULE_1__["SvgRegistry"].renderIcons();
-        }
         var renderResult;
         if (this.survey.state == "completed") {
             renderResult = this.renderCompleted();
@@ -14757,6 +14762,7 @@ var Survey = /** @class */ (function (_super) {
         var rootCss = this.survey.getRootCss();
         var cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses, style: this.survey.themeVariables },
+            this.survey.needRenderIcons ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svgbundle__WEBPACK_IMPORTED_MODULE_11__["SvgBundleComponent"], null) : null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.survey.wrapperFormCss },
                 backgroundImage,
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("form", { onSubmit: onSubmit },
@@ -14811,10 +14817,12 @@ var Survey = /** @class */ (function (_super) {
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.survey.bodyContainerCss },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "left" }),
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: pageId, className: className, style: style },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "contentTop" }),
-                activePage,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "contentBottom" })),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: "sv-components-column sv-components-column--expandable" },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "center" }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: pageId, className: className, style: style },
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "contentTop" }),
+                    activePage,
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "contentBottom" }))),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "right" })));
     };
     Survey.prototype.renderPage = function (page) {
@@ -17986,8 +17994,13 @@ var SurveyMultipleTextItem = /** @class */ (function (_super) {
     SurveyMultipleTextItem.prototype.renderElement = function () {
         var item = this.item;
         var cssClasses = this.cssClasses;
+        var titleStyle = {};
+        if (!!this.question.itemTitleWidth) {
+            titleStyle.minWidth = this.question.itemTitleWidth;
+            titleStyle.width = this.question.itemTitleWidth;
+        }
         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"]("span", { className: cssClasses.itemTitle, style: titleStyle },
                 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 })));
     };
@@ -18549,12 +18562,15 @@ var SurveyQuestionRanking = /** @class */ (function (_super) {
                     this.getItems(this.question.unRankingChoices, unrankedItem),
                     this.question.unRankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder },
                         " ",
-                        this.question.selectToRankEmptyRankedAreaText,
+                        this.renderLocString(this.question.locSelectToRankEmptyRankedAreaText),
                         " ") : null),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containersDivider }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getContainerClasses("to"), "data-ranking": "to-container" },
                     this.getItems(),
-                    this.question.rankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder }, this.question.selectToRankEmptyUnrankedAreaText) : null)));
+                    this.question.rankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder },
+                        " ",
+                        this.renderLocString(this.question.locSelectToRankEmptyUnrankedAreaText),
+                        " ") : null)));
         }
     };
     SurveyQuestionRanking.prototype.getItems = function (choices, unrankedItem) {
@@ -19272,6 +19288,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
 /* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
 /* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+/* harmony import */ var _components_loading_indicator__WEBPACK_IMPORTED_MODULE_4__ = __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 ||
@@ -19291,6 +19308,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
     __extends(SurveyQuestionSignaturePad, _super);
     function SurveyQuestionSignaturePad(props) {
@@ -19308,19 +19326,25 @@ var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
     SurveyQuestionSignaturePad.prototype.renderElement = function () {
         var _this = this;
         var cssClasses = this.question.cssClasses;
+        var loadingIndicator = this.question.showLoadingIndicator ? this.renderLoadingIndicator() : null;
         var clearButton = this.renderCleanButton();
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.root, ref: function (root) { return (_this.setControl(root)); }, style: { width: this.question.renderedCanvasWidth } },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.placeholder, style: { display: this.question.needShowPlaceholder() ? "" : "none" } }, this.renderLocString(this.question.locPlaceholder)),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null,
                 this.renderBackgroundImage(),
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("canvas", { tabIndex: 0, className: this.question.cssClasses.canvas })),
-            clearButton));
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("canvas", { tabIndex: 0, className: this.question.cssClasses.canvas, onBlur: this.question.onBlur })),
+            clearButton,
+            loadingIndicator));
     };
     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, style: { width: this.question.renderedCanvasWidth } });
     };
+    SurveyQuestionSignaturePad.prototype.renderLoadingIndicator = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.loadingIndicator },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_loading_indicator__WEBPACK_IMPORTED_MODULE_4__["LoadingIndicatorComponent"], null));
+    };
     SurveyQuestionSignaturePad.prototype.renderCleanButton = function () {
         var _this = this;
         if (!this.question.canShowClearButton)
@@ -19534,6 +19558,62 @@ _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.re
 });
 
 
+/***/ }),
+
+/***/ "./src/react/svgbundle.tsx":
+/*!*********************************!*\
+  !*** ./src/react/svgbundle.tsx ***!
+  \*********************************/
+/*! exports provided: SvgBundleComponent */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SvgBundleComponent", function() { return SvgBundleComponent; });
+/* 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__);
+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 SvgBundleComponent = /** @class */ (function (_super) {
+    __extends(SvgBundleComponent, _super);
+    function SvgBundleComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.containerRef = react__WEBPACK_IMPORTED_MODULE_0___default.a.createRef();
+        return _this;
+    }
+    SvgBundleComponent.prototype.componentDidMount = function () {
+        if (!!this.containerRef.current) {
+            this.containerRef.current.innerHTML = survey_core__WEBPACK_IMPORTED_MODULE_1__["SvgRegistry"].iconsRenderedHtml();
+        }
+    };
+    SvgBundleComponent.prototype.render = function () {
+        var svgStyle = {
+            display: "none"
+        };
+        return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("svg", { style: svgStyle, id: "sv-icon-holder-global-container", ref: this.containerRef });
+    };
+    return SvgBundleComponent;
+}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));
+
+
+
 /***/ }),
 
 /***/ "./src/react/tagbox-filter.tsx":
@@ -20598,13 +20678,14 @@ var __extends = (undefined && undefined.__extends) || (function () {
 })();
 
 var ResponsivityManager = /** @class */ (function () {
-    function ResponsivityManager(container, model, itemsSelector, dotsItemSize) {
+    function ResponsivityManager(container, model, itemsSelector, dotsItemSize, delayedUpdateFunction) {
         var _this = this;
         if (dotsItemSize === void 0) { dotsItemSize = null; }
         this.container = container;
         this.model = model;
         this.itemsSelector = itemsSelector;
         this.dotsItemSize = dotsItemSize;
+        this.delayedUpdateFunction = delayedUpdateFunction;
         this.resizeObserver = undefined;
         this.isInitialized = false;
         this.minDimensionConst = 56;
@@ -20655,6 +20736,16 @@ var ResponsivityManager = /** @class */ (function () {
                 (currentAction.needSeparator ? this.separatorSize : 0)
             : currentAction.maxDimension;
     };
+    ResponsivityManager.prototype.getRenderedVisibleActionsCount = function () {
+        var _this = this;
+        var count = 0;
+        this.container.querySelectorAll(this.itemsSelector).forEach(function (item) {
+            if (_this.calcItemSize(item) > 0) {
+                count++;
+            }
+        });
+        return count;
+    };
     ResponsivityManager.prototype.calcItemsSizes = function () {
         var _this = this;
         var actions = this.model.actions;
@@ -20680,18 +20771,8 @@ var ResponsivityManager = /** @class */ (function () {
         if (this.isContainerVisible && !this.model.isResponsivenessDisabled) {
             if (!this.isInitialized) {
                 this.model.setActionsMode("large");
-                var recalcItemSizes = function () {
-                    _this.calcItemsSizes();
-                    _this.isInitialized = true;
-                };
-                if (queueMicrotask) {
-                    queueMicrotask(recalcItemSizes);
-                }
-                else {
-                    recalcItemSizes();
-                }
             }
-            var processResponsiveness = function () {
+            var processResponsiveness_1 = function () {
                 var _a;
                 var dotsItemSize = _this.dotsItemSize;
                 if (!_this.dotsItemSize) {
@@ -20700,11 +20781,29 @@ var ResponsivityManager = /** @class */ (function () {
                 }
                 _this.model.fit(_this.getAvailableSpace(), dotsItemSize);
             };
-            if (queueMicrotask) {
-                queueMicrotask(processResponsiveness);
+            if (!this.isInitialized) {
+                var callback = function () {
+                    _this.calcItemsSizes();
+                    _this.isInitialized = true;
+                    processResponsiveness_1();
+                };
+                if (this.getRenderedVisibleActionsCount() < this.model.visibleActions.length) {
+                    if (this.delayedUpdateFunction) {
+                        this.delayedUpdateFunction(callback);
+                    }
+                    else if (queueMicrotask) {
+                        queueMicrotask(callback);
+                    }
+                    else {
+                        callback();
+                    }
+                }
+                else {
+                    callback();
+                }
             }
             else {
-                processResponsiveness();
+                processResponsiveness_1();
             }
         }
     };
@@ -20719,9 +20818,9 @@ var ResponsivityManager = /** @class */ (function () {
 
 var VerticalResponsivityManager = /** @class */ (function (_super) {
     __extends(VerticalResponsivityManager, _super);
-    function VerticalResponsivityManager(container, model, itemsSelector, dotsItemSize, minDimension) {
+    function VerticalResponsivityManager(container, model, itemsSelector, dotsItemSize, minDimension, delayedUpdateFunction) {
         if (minDimension === void 0) { minDimension = 40; }
-        var _this = _super.call(this, container, model, itemsSelector, dotsItemSize) || this;
+        var _this = _super.call(this, container, model, itemsSelector, dotsItemSize, delayedUpdateFunction) || this;
         _this.minDimensionConst = minDimension;
         _this.recalcMinDimensionConst = false;
         return _this;