survey-react-ui 1.9.125 → 1.9.127

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.125
+ * surveyjs - Survey JavaScript library v1.9.127
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -420,6 +420,20 @@ var Base = /** @class */ (function () {
         }
         return _helpers__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isValueEmpty(value);
     };
+    Base.prototype.equals = function (obj) {
+        if (!obj)
+            return false;
+        if (this.isDisposed || obj.isDisposed)
+            return false;
+        if (this.getType() != obj.getType())
+            return false;
+        return this.equalsCore(obj);
+    };
+    Base.prototype.equalsCore = function (obj) {
+        if (this.name !== obj.name)
+            return false;
+        return _helpers__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(this.toJSON(), obj.toJSON(), false, true, false);
+    };
     Base.prototype.trimValue = function (value) {
         if (!!value && (typeof value === "string" || value instanceof String))
             return value.trim();
@@ -547,8 +561,8 @@ var Base = /** @class */ (function () {
      * Returns a JSON object that corresponds to the current SurveyJS object.
      * @see fromJSON
      */
-    Base.prototype.toJSON = function () {
-        return new _jsonobject__WEBPACK_IMPORTED_MODULE_2__["JsonObject"]().toJsonObject(this);
+    Base.prototype.toJSON = function (options) {
+        return new _jsonobject__WEBPACK_IMPORTED_MODULE_2__["JsonObject"]().toJsonObject(this, options);
     };
     /**
      * Assigns a new configuration to the current SurveyJS object. This configuration is taken from a passed JSON object.
@@ -2606,7 +2620,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.125", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.127", "survey-react-ui");
 
 
 /***/ }),
@@ -6941,21 +6955,11 @@ var Helpers = /** @class */ (function () {
             return x == y;
         if (!Helpers.isValueObject(x) || !Helpers.isValueObject(y))
             return false;
-        if (x["equals"])
+        if (x["equals"] && y["equals"])
             return x.equals(y);
-        if (!!x.toJSON && !!y.toJSON && !!x.getType && !!y.getType) {
-            if (x.isDisposed || y.isDisposed)
-                return false;
-            if (x.getType() !== y.getType())
-                return false;
-            if (!!x.name && x.name !== y.name)
-                return false;
-            return this.isTwoValueEquals(x.toJSON(), y.toJSON(), ignoreOrder, caseSensitive, trimStrings);
-        }
-        if (Array.isArray(x) && Array.isArray(y))
+        if (Array.isArray(x) && Array.isArray(y)) {
             return Helpers.isArraysEqual(x, y, ignoreOrder, caseSensitive, trimStrings);
-        if (!!x.equalsTo && y.equalsTo)
-            return x.equalsTo(y);
+        }
         for (var p in x) {
             if (!x.hasOwnProperty(p))
                 continue;
@@ -7231,6 +7235,27 @@ var Helpers = /** @class */ (function () {
         }
         return val;
     };
+    Helpers.compareVerions = function (ver1, ver2) {
+        if (!ver1 && !ver2)
+            return 0;
+        var ver1Ar = ver1.split(".");
+        var ver2Ar = ver2.split(".");
+        var len1 = ver1Ar.length;
+        var len2 = ver2Ar.length;
+        for (var i = 0; i < len1 && i < len2; i++) {
+            var str1 = ver1Ar[i];
+            var str2 = ver2Ar[i];
+            if (str1.length === str2.length) {
+                if (str1 !== str2) {
+                    return str1 < str2 ? -1 : 1;
+                }
+            }
+            else {
+                return str1.length < str2.length ? -1 : 1;
+            }
+        }
+        return len1 === len2 ? 0 : (len1 < len2 ? -1 : 1);
+    };
     return Helpers;
 }());
 
@@ -7690,6 +7715,21 @@ var JsonObjectProperty = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    JsonObjectProperty.prototype.isAvailableInVersion = function (ver) {
+        if (!!this.alternativeName)
+            return true;
+        return this.isAvailableInVersionCore(ver);
+    };
+    JsonObjectProperty.prototype.getSerializedName = function (ver) {
+        if (!this.alternativeName)
+            return this.name;
+        return this.isAvailableInVersionCore(ver) ? this.name : this.alternativeName;
+    };
+    JsonObjectProperty.prototype.isAvailableInVersionCore = function (ver) {
+        if (!ver || !this.version)
+            return true;
+        return _helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].compareVerions(this.version, ver) <= 0;
+    };
     Object.defineProperty(JsonObjectProperty.prototype, "isLocalizable", {
         get: function () {
             return this.isLocalizableValue != null ? this.isLocalizableValue : false;
@@ -7770,6 +7810,7 @@ var JsonObjectProperty = /** @class */ (function () {
         "className",
         "alternativeName",
         "layout",
+        "version",
         "classNamePart",
         "baseClassName",
         "defaultValue",
@@ -8218,6 +8259,9 @@ var JsonMetadataClass = /** @class */ (function () {
             if (propInfo.layout) {
                 prop.layout = propInfo.layout;
             }
+            if (propInfo.version) {
+                prop.version = propInfo.version;
+            }
             if (propInfo.dependsOn) {
                 this.addDependsOnProperties(prop, propInfo.dependsOn);
             }
@@ -8362,36 +8406,54 @@ var JsonMetadata = /** @class */ (function () {
     JsonMetadata.prototype.getPropertiesByObj = function (obj) {
         if (!obj || !obj.getType)
             return [];
-        var res = {};
         var props = this.getProperties(obj.getType());
-        for (var i = 0; i < props.length; i++) {
-            res[props[i].name] = props[i];
-        }
-        var dynamicProps = !!obj.getDynamicType
-            ? this.getProperties(obj.getDynamicType())
-            : null;
-        if (dynamicProps && dynamicProps.length > 0) {
-            for (var i = 0; i < dynamicProps.length; i++) {
-                var dProp = dynamicProps[i];
-                if (!!res[dProp.name])
-                    continue;
-                res[dProp.name] = dProp;
+        var dynamicProps = this.getDynamicPropertiesByObj(obj);
+        return [].concat(props).concat(dynamicProps);
+    };
+    JsonMetadata.prototype.addDynamicPropertiesIntoObj = function (dest, src, props) {
+        var _this = this;
+        props.forEach(function (prop) {
+            _this.addDynamicPropertyIntoObj(dest, src, prop.name, false);
+            if (prop.serializationProperty) {
+                _this.addDynamicPropertyIntoObj(dest, src, prop.serializationProperty, true);
             }
+            if (prop.alternativeName) {
+                _this.addDynamicPropertyIntoObj(dest, src, prop.alternativeName, false);
+            }
+        });
+    };
+    JsonMetadata.prototype.addDynamicPropertyIntoObj = function (dest, src, propName, isReadOnly) {
+        var desc = {
+            configurable: true,
+            get: function () {
+                return src[propName];
+            },
+        };
+        if (!isReadOnly) {
+            desc["set"] = function (v) {
+                src[propName] = v;
+            };
         }
-        return Object.keys(res).map(function (key) { return res[key]; });
+        Object.defineProperty(dest, propName, desc);
     };
     JsonMetadata.prototype.getDynamicPropertiesByObj = function (obj, dynamicType) {
         if (dynamicType === void 0) { dynamicType = null; }
-        if (!obj || !obj.getType || (!obj.getDynamicType && !dynamicType))
+        if (!obj || !obj.getType)
+            return [];
+        if (!!obj.getDynamicProperties)
+            return obj.getDynamicProperties();
+        if (!obj.getDynamicType && !dynamicType)
             return [];
-        var objType = obj.getType();
         var dType = !!dynamicType ? dynamicType : obj.getDynamicType();
-        if (!dType)
+        return this.getDynamicPropertiesByTypes(obj.getType(), dType);
+    };
+    JsonMetadata.prototype.getDynamicPropertiesByTypes = function (objType, dynamicType, invalidNames) {
+        if (!dynamicType)
             return [];
-        var cacheType = dType + "-" + objType;
+        var cacheType = dynamicType + "-" + objType;
         if (this.dynamicPropsCache[cacheType])
             return this.dynamicPropsCache[cacheType];
-        var dynamicProps = this.getProperties(dType);
+        var dynamicProps = this.getProperties(dynamicType);
         if (!dynamicProps || dynamicProps.length == 0)
             return [];
         var hash = {};
@@ -8400,9 +8462,11 @@ var JsonMetadata = /** @class */ (function () {
             hash[props[i].name] = props[i];
         }
         var res = [];
-        for (var i = 0; i < dynamicProps.length; i++) {
-            var dProp = dynamicProps[i];
-            if (!hash[dProp.name]) {
+        if (!invalidNames)
+            invalidNames = [];
+        for (var i_1 = 0; i_1 < dynamicProps.length; i_1++) {
+            var dProp = dynamicProps[i_1];
+            if (!hash[dProp.name] && invalidNames.indexOf(dProp.name) < 0) {
                 res.push(dProp);
             }
         }
@@ -8897,9 +8961,8 @@ var JsonObject = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    JsonObject.prototype.toJsonObject = function (obj, storeDefaults) {
-        if (storeDefaults === void 0) { storeDefaults = false; }
-        return this.toJsonObjectCore(obj, null, storeDefaults);
+    JsonObject.prototype.toJsonObject = function (obj, options) {
+        return this.toJsonObjectCore(obj, null, options);
     };
     JsonObject.prototype.toObject = function (jsonObj, obj, options) {
         this.toObjectCore(jsonObj, obj, options);
@@ -8948,8 +9011,7 @@ var JsonObject = /** @class */ (function () {
             obj.endLoadingFromJson();
         }
     };
-    JsonObject.prototype.toJsonObjectCore = function (obj, property, storeDefaults) {
-        if (storeDefaults === void 0) { storeDefaults = false; }
+    JsonObject.prototype.toJsonObjectCore = function (obj, property, options) {
         if (!obj || !obj.getType)
             return obj;
         if (typeof obj.getData === "function")
@@ -8958,61 +9020,67 @@ var JsonObject = /** @class */ (function () {
         if (property != null && !property.className) {
             result[JsonObject.typePropertyName] = property.getObjType(obj.getType());
         }
-        this.propertiesToJson(obj, Serializer.getProperties(obj.getType()), result, storeDefaults);
-        this.propertiesToJson(obj, this.getDynamicProperties(obj), result, storeDefaults);
+        var storeDefaults = options === true;
+        if (!options || options === true) {
+            options = {};
+        }
+        if (storeDefaults) {
+            options.storeDefaults = storeDefaults;
+        }
+        this.propertiesToJson(obj, Serializer.getProperties(obj.getType()), result, options);
+        this.propertiesToJson(obj, this.getDynamicProperties(obj), result, options);
         return result;
     };
     JsonObject.prototype.getDynamicProperties = function (obj) {
         return Serializer.getDynamicPropertiesByObj(obj);
     };
-    JsonObject.prototype.addDynamicProperties = function (obj, jsonObj, properties) {
-        if (!obj.getDynamicPropertyName)
-            return properties;
-        var dynamicPropName = obj.getDynamicPropertyName();
-        if (!dynamicPropName)
-            return properties;
-        if (jsonObj[dynamicPropName]) {
-            obj[dynamicPropName] = jsonObj[dynamicPropName];
-        }
-        var dynamicProperties = this.getDynamicProperties(obj);
-        var res = [];
-        for (var i = 0; i < properties.length; i++) {
-            res.push(properties[i]);
-        }
-        for (var i = 0; i < dynamicProperties.length; i++) {
-            res.push(dynamicProperties[i]);
+    JsonObject.prototype.addDynamicProperties = function (obj, jsonObj, props) {
+        if (!obj.getDynamicPropertyName && !obj.getDynamicProperties)
+            return props;
+        if (obj.getDynamicPropertyName) {
+            var dynamicPropName = obj.getDynamicPropertyName();
+            if (!dynamicPropName)
+                return props;
+            if (dynamicPropName && jsonObj[dynamicPropName]) {
+                obj[dynamicPropName] = jsonObj[dynamicPropName];
+            }
         }
-        return res;
+        var dynamicProps = this.getDynamicProperties(obj);
+        return dynamicProps.length === 0 ? props : [].concat(props).concat(dynamicProps);
     };
-    JsonObject.prototype.propertiesToJson = function (obj, properties, json, storeDefaults) {
-        if (storeDefaults === void 0) { storeDefaults = false; }
+    JsonObject.prototype.propertiesToJson = function (obj, properties, json, options) {
         for (var i = 0; i < properties.length; i++) {
-            this.valueToJson(obj, json, properties[i], storeDefaults);
+            this.valueToJson(obj, json, properties[i], options);
         }
     };
-    JsonObject.prototype.valueToJson = function (obj, result, property, storeDefaults) {
-        if (storeDefaults === void 0) { storeDefaults = false; }
-        if (property.isSerializable === false ||
-            (property.isLightSerializable === false && this.lightSerializing))
+    JsonObject.prototype.valueToJson = function (obj, result, prop, options) {
+        if (!options)
+            options = {};
+        if (prop.isSerializable === false || (prop.isLightSerializable === false && this.lightSerializing))
+            return;
+        if (options.version && !prop.isAvailableInVersion(options.version))
             return;
-        var value = property.getSerializableValue(obj);
-        if (!storeDefaults && property.isDefaultValueByObj(obj, value))
+        var value = prop.getSerializableValue(obj);
+        if (!options.storeDefaults && prop.isDefaultValueByObj(obj, value))
             return;
         if (this.isValueArray(value)) {
             var arrValue = [];
             for (var i = 0; i < value.length; i++) {
-                arrValue.push(this.toJsonObjectCore(value[i], property, storeDefaults));
+                arrValue.push(this.toJsonObjectCore(value[i], prop, options));
             }
             value = arrValue.length > 0 ? arrValue : null;
         }
         else {
-            value = this.toJsonObjectCore(value, property, storeDefaults);
+            value = this.toJsonObjectCore(value, prop, options);
         }
+        if (value === undefined || value === null)
+            return;
+        var name = prop.getSerializedName(options.version);
         var hasValue = typeof obj["getPropertyValue"] === "function" &&
-            obj["getPropertyValue"](property.name, null) !== null;
-        if ((storeDefaults && hasValue) || !property.isDefaultValueByObj(obj, value)) {
-            if (!Serializer.onSerializingProperty || !Serializer.onSerializingProperty(obj, property, value, result)) {
-                result[property.name] = value;
+            obj["getPropertyValue"](name, null) !== null;
+        if ((options.storeDefaults && hasValue) || !prop.isDefaultValueByObj(obj, value)) {
+            if (!Serializer.onSerializingProperty || !Serializer.onSerializingProperty(obj, prop, value, result)) {
+                result[name] = this.removePosOnValueToJson(prop, value);
             }
         }
     };
@@ -9052,6 +9120,14 @@ var JsonObject = /** @class */ (function () {
             }
         }
     };
+    JsonObject.prototype.removePosOnValueToJson = function (property, value) {
+        if (!property.isCustom || !value)
+            return value;
+        if (!!value[JsonObject.positionPropertyName]) {
+            delete value[JsonObject.positionPropertyName];
+        }
+        return value;
+    };
     JsonObject.prototype.removePos = function (property, value) {
         if (!property || !property.type || property.type.indexOf("value") < 0)
             return;
@@ -10172,7 +10248,7 @@ var SurveyQuestionBoolean = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: itemClass, onClick: this.handleOnClick },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { ref: this.checkRef, type: "checkbox", name: this.question.name, value: this.question.booleanValue === null
                         ? ""
-                        : this.question.booleanValue, id: this.question.inputId, className: cssClasses.control, disabled: this.isDisplayMode, checked: this.question.booleanValue || false, onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy }),
+                        : this.question.booleanValue, id: this.question.inputId, className: cssClasses.control, disabled: this.isDisplayMode, checked: this.question.booleanValue || false, onChange: this.handleOnChange, 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"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, false); } },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.getLabelCss(false) }, this.renderLocString(this.question.locLabelFalse))),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.switch, onClick: this.handleOnSwitchClick },
@@ -11712,8 +11788,9 @@ var SurveyQuestionPanelDynamicAddButton = /** @class */ (function (_super) {
     SurveyQuestionPanelDynamicAddButton.prototype.renderElement = function () {
         if (!this.question.canAddPanel)
             return null;
+        var btnText = this.renderLocString(this.question.locPanelAddText);
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { type: "button", className: this.question.getAddButtonCss(), onClick: this.handleClick },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.buttonAddText }, this.question.panelAddText)));
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.buttonAddText }, btnText)));
     };
     return SurveyQuestionPanelDynamicAddButton;
 }(SurveyQuestionPanelDynamicAction));
@@ -11931,8 +12008,9 @@ var SurveyQuestionPanelDynamicRemoveButton = /** @class */ (function (_super) {
         return _this;
     }
     SurveyQuestionPanelDynamicRemoveButton.prototype.renderElement = function () {
+        var btnText = this.renderLocString(this.question.locPanelRemoveText);
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { className: this.question.getPanelRemoveButtonCss(), onClick: this.handleClick, type: "button" },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.buttonRemoveText }, this.question.panelRemoveText),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.buttonRemoveText }, btnText),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.iconRemove })));
     };
     return SurveyQuestionPanelDynamicRemoveButton;
@@ -14575,11 +14653,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyWindow", function() { return SurveyWindow; });
 /* 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 _reactSurvey__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactSurvey */ "./src/react/reactSurvey.tsx");
-/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-core */ "survey-core");
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+/* 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 _reactSurvey__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactSurvey */ "./src/react/reactSurvey.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");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -14599,7 +14676,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
 var PopupSurvey = /** @class */ (function (_super) {
     __extends(PopupSurvey, _super);
     function PopupSurvey(props) {
@@ -14617,46 +14693,65 @@ var PopupSurvey = /** @class */ (function (_super) {
         return _super.prototype.canRender.call(this) && this.popup.isShowing;
     };
     PopupSurvey.prototype.renderElement = function () {
+        var _this = this;
         var header = this.renderWindowHeader();
-        var body = this.popup.isExpanded ? this.renderBody() : null;
-        var style = {
-            position: "fixed",
-            bottom: 3,
-            right: 10
-        };
+        var body = this.renderBody();
+        var style = {};
         if (!!this.popup.renderedWidth) {
             style.width = this.popup.renderedWidth;
             style.maxWidth = this.popup.renderedWidth;
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssRoot, style: style },
-            header,
-            body));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssRoot, style: style, onScroll: function () { return _this.popup.onScroll(); } },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssRootContent },
+                header,
+                body)));
     };
     PopupSurvey.prototype.renderWindowHeader = function () {
-        var _this = this;
-        var styleA = { width: "100%", cursor: "pointer" };
-        var styleTitle = { paddingRight: "10px" };
-        var glyphClassName = this.popup.cssButton;
-        glyphClassName = "glyphicon pull-right " + glyphClassName;
-        var title = _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"].renderLocString(this.survey.locTitle);
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssHeaderRoot },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { onClick: this.handleOnExpanded, style: styleA },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.popup.cssHeaderTitle, style: styleTitle }, title),
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: glyphClassName, "aria-hidden": "true" })),
-            this.popup.allowClose ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.popup.cssHeaderButton, onClick: function () { _this.popup.hide(); }, style: { transform: "rotate(45deg)", float: "right", cursor: "pointer", width: "24px", height: "24px" } },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { iconName: "icon-expanddetail", size: 16 }))) : null,
-            this.popup.isExpanded ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.popup.cssHeaderButton, onClick: this.handleOnExpanded, style: { float: "right", cursor: "pointer", width: "24px", height: "24px" } },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { iconName: "icon-collapsedetail", size: 16 }))) : null));
+        var popup = this.popup;
+        var headerCss = popup.cssHeaderRoot;
+        var titleCollapsed = null;
+        var expandCollapseIcon;
+        var closeButton = null;
+        if (popup.isCollapsed) {
+            headerCss += " " + popup.cssRootCollapsedMod;
+            titleCollapsed = this.renderTitleCollapsed(popup);
+            expandCollapseIcon = this.renderExpandIcon();
+        }
+        else {
+            expandCollapseIcon = this.renderCollapseIcon();
+        }
+        if (popup.allowClose) {
+            closeButton = this.renderCloseButton(this.popup);
+        }
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderRoot },
+            titleCollapsed,
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderButtonsContainer },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderCollapseButton, onClick: this.handleOnExpanded }, expandCollapseIcon),
+                closeButton)));
+    };
+    PopupSurvey.prototype.renderTitleCollapsed = function (popup) {
+        if (!popup.locTitle)
+            return null;
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderTitleCollapsed }, popup.locTitle.renderedHtml);
+    };
+    PopupSurvey.prototype.renderExpandIcon = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-restore_16x16", size: 16 });
+    };
+    PopupSurvey.prototype.renderCollapseIcon = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-minimize_16x16", size: 16 });
+    };
+    PopupSurvey.prototype.renderCloseButton = function (popup) {
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderCloseButton, onClick: function () { popup.hide(); } },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-close_16x16", size: 16 })));
     };
     PopupSurvey.prototype.renderBody = function () {
-        var _this = this;
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssBody, onScroll: function () { return _this.popup.onScroll(); } }, this.doRender());
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssBody }, this.doRender());
     };
     PopupSurvey.prototype.createSurvey = function (newProps) {
         if (!newProps)
             newProps = {};
         _super.prototype.createSurvey.call(this, newProps);
-        this.popup = new survey_core__WEBPACK_IMPORTED_MODULE_3__["PopupSurveyModel"](null, this.survey);
+        this.popup = new survey_core__WEBPACK_IMPORTED_MODULE_1__["PopupSurveyModel"](null, this.survey);
         if (newProps.closeOnCompleteTimeout) {
             this.popup.closeOnCompleteTimeout = newProps.closeOnCompleteTimeout;
         }
@@ -14666,7 +14761,7 @@ var PopupSurvey = /** @class */ (function (_super) {
             this.popup.expand();
     };
     return PopupSurvey;
-}(_reactSurvey__WEBPACK_IMPORTED_MODULE_1__["Survey"]));
+}(_reactSurvey__WEBPACK_IMPORTED_MODULE_2__["Survey"]));
 
 /**
  * Obsolete. Please use PopupSurvey
@@ -15319,13 +15414,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressToc", function() { return SurveyProgressToc; });
 /* 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 _reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactSurveyNavigationBase */ "./src/react/reactSurveyNavigationBase.tsx");
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
-/* harmony import */ var _components_list_list__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/list/list */ "./src/react/components/list/list.tsx");
-/* harmony import */ var _components_popup_popup__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/popup/popup */ "./src/react/components/popup/popup.tsx");
-/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+/* harmony import */ var _reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactSurveyNavigationBase */ "./src/react/reactSurveyNavigationBase.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _components_list_list__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/list/list */ "./src/react/components/list/list.tsx");
+/* harmony import */ var _components_popup_popup__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/popup/popup */ "./src/react/components/popup/popup.tsx");
+/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/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 ||
@@ -15347,29 +15440,28 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
 var SurveyProgressToc = /** @class */ (function (_super) {
     __extends(SurveyProgressToc, _super);
     function SurveyProgressToc() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     SurveyProgressToc.prototype.render = function () {
-        var tocModel = new survey_core__WEBPACK_IMPORTED_MODULE_1__["TOCModel"](this.props.model);
+        var tocModel = this.props.model;
         var content;
         if (tocModel.isMobile) {
             content = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { onClick: tocModel.togglePopup },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_6__["SvgIcon"], { iconName: tocModel.icon, size: 24 }),
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_popup_popup__WEBPACK_IMPORTED_MODULE_5__["Popup"], { model: tocModel.popupModel }));
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_5__["SvgIcon"], { iconName: tocModel.icon, size: 24 }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_popup_popup__WEBPACK_IMPORTED_MODULE_4__["Popup"], { model: tocModel.popupModel }));
         }
         else {
-            content = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_list_list__WEBPACK_IMPORTED_MODULE_4__["List"], { model: tocModel.listModel });
+            content = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_list_list__WEBPACK_IMPORTED_MODULE_3__["List"], { model: tocModel.listModel });
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: tocModel.containerCss }, content));
     };
     return SurveyProgressToc;
-}(_reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_2__["SurveyNavigationBase"]));
+}(_reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_1__["SurveyNavigationBase"]));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.registerElement("sv-progress-toc", function (props) {
+_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.registerElement("sv-navigation-toc", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyProgressToc, props);
 });
 
@@ -17283,7 +17375,7 @@ var SurveyQuestionMatrix = /** @class */ (function (_super) {
         for (var i = 0; i < visibleRows.length; i++) {
             var row = visibleRows[i];
             var key = "row-" + row.name + "-" + i;
-            rows.push(react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixRow, { key: key, question: this.question, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode, row: row, isFirst: i == 0 }));
+            rows.push(react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixRow, { key: key, question: this.question, cssClasses: cssClasses, row: row, isFirst: i == 0 }));
         }
         var header = !this.question.showHeader ? null : (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("thead", null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tr", null,
@@ -17304,6 +17396,11 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
     function SurveyQuestionMatrixRow(props) {
         return _super.call(this, props) || this;
     }
+    SurveyQuestionMatrixRow.prototype.getStateElement = function () {
+        if (!!this.row)
+            return this.row.item;
+        return _super.prototype.getStateElement.call(this);
+    };
     Object.defineProperty(SurveyQuestionMatrixRow.prototype, "question", {
         get: function () {
             return this.props.question;
@@ -17341,7 +17438,7 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
                 style.minWidth = this.question.rowTitleWidth;
                 style.width = this.question.rowTitleWidth;
             }
-            rowsTD = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { style: style, className: this.question.cssClasses.rowTextCell }, this.wrapCell({ row: this.row }, rowText, "row-header"));
+            rowsTD = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { style: style, className: this.row.rowTextClasses }, this.wrapCell({ row: this.row }, rowText, "row-header"));
         }
         var tds = this.generateTds();
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tr", { className: this.row.rowClasses || undefined },
@@ -17359,9 +17456,7 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
             var key = "value" + i;
             var itemClass = this_1.question.getItemClass(row, column);
             if (this_1.question.hasCellText) {
-                var getHandler = !this_1.question.isInputReadOnly
-                    ? function (column) { return function () { return _this.cellClick(row, column); }; }
-                    : null;
+                var getHandler = function (column) { return function () { return _this.cellClick(row, column); }; };
                 td = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: key, className: itemClass, onClick: getHandler ? getHandler(column) : function () { } }, this_1.renderLocString(this_1.question.getCellDisplayLocText(row.name, column))));
             }
             else {
@@ -17371,7 +17466,6 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
                     column: column,
                     columnIndex: i,
                     cssClasses: this_1.cssClasses,
-                    isDisplayMode: this_1.isDisplayMode,
                     cellChanged: function () { _this.cellClick(_this.row, column); }
                 });
                 td = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: key, "data-responsive-title": column.locText.renderedHtml, className: this_1.question.cssClasses.cell }, renderedCell));
@@ -17454,7 +17548,7 @@ var SurveyQuestionMatrixCell = /** @class */ (function (_super) {
             mobileSpan));
     };
     SurveyQuestionMatrixCell.prototype.renderInput = function (inputId, isChecked) {
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: this.row.fullName, value: this.column.value, disabled: this.isDisplayMode, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(this.row.locText.renderedHtml, this.column.locText.renderedHtml), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: this.row.fullName, value: this.column.value, disabled: this.row.isReadOnly, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(this.row.locText.renderedHtml, this.column.locText.renderedHtml), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }));
     };
     return SurveyQuestionMatrixCell;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
@@ -19484,7 +19578,7 @@ var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
             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, onBlur: this.question.onBlur })),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("canvas", { tabIndex: -1, className: this.question.cssClasses.canvas, onBlur: this.question.onBlur })),
             clearButton,
             loadingIndicator));
     };
@@ -20391,8 +20485,8 @@ var settings = {
      * @param message A message to be displayed in the confirm dialog window.
      * @param callback A callback function that should be called with `true` if a user confirms an action or `false` otherwise.
      */
-    confirmActionAsync: function (message, callback, applyTitle) {
-        return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["showConfirmDialog"])(message, callback, applyTitle);
+    confirmActionAsync: function (message, callback, applyTitle, locale) {
+        return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["showConfirmDialog"])(message, callback, applyTitle, locale);
     },
     /**
      * A minimum width value for all survey elements.
@@ -21000,7 +21094,7 @@ function confirmAction(message) {
         return _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].confirmActionFunc(message);
     return confirm(message);
 }
-function confirmActionAsync(message, funcOnYes, funcOnNo) {
+function confirmActionAsync(message, funcOnYes, funcOnNo, locale) {
     var callbackFunc = function (res) {
         if (res)
             funcOnYes();
@@ -21008,7 +21102,7 @@ function confirmActionAsync(message, funcOnYes, funcOnNo) {
             funcOnNo();
     };
     if (!!_settings__WEBPACK_IMPORTED_MODULE_1__["settings"] && !!_settings__WEBPACK_IMPORTED_MODULE_1__["settings"].confirmActionAsync) {
-        if (_settings__WEBPACK_IMPORTED_MODULE_1__["settings"].confirmActionAsync(message, callbackFunc))
+        if (_settings__WEBPACK_IMPORTED_MODULE_1__["settings"].confirmActionAsync(message, callbackFunc, undefined, locale))
             return;
     }
     callbackFunc(confirmAction(message));
@@ -21115,7 +21209,7 @@ function scrollElementByChildId(id) {
         return;
     var scrollableEl = findScrollableParent(el);
     if (!!scrollableEl) {
-        scrollableEl.dispatchEvent(new CustomEvent("scroll"));
+        setTimeout(function () { return scrollableEl.dispatchEvent(new CustomEvent("scroll")); }, 10);
     }
 }
 function navigateToUrl(url) {
@@ -21357,7 +21451,7 @@ var Logger = /** @class */ (function () {
     return Logger;
 }());
 
-function showConfirmDialog(message, callback, applyTitle) {
+function showConfirmDialog(message, callback, applyTitle, locale) {
     var locStr = new _localizablestring__WEBPACK_IMPORTED_MODULE_0__["LocalizableString"](undefined);
     var popupViewModel = _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].showDialog({
         componentName: "sv-string-viewer",
@@ -21378,9 +21472,9 @@ function showConfirmDialog(message, callback, applyTitle) {
     var toolbar = popupViewModel.footerToolbar;
     var applyBtn = toolbar.getActionById("apply");
     var cancelBtn = toolbar.getActionById("cancel");
-    cancelBtn.title = _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("cancel");
+    cancelBtn.title = _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("cancel", locale);
     cancelBtn.innerCss = "sv-popup__body-footer-item sv-popup__button sd-btn sd-btn--small";
-    applyBtn.title = applyTitle || _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("ok");
+    applyBtn.title = applyTitle || _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("ok", locale);
     applyBtn.innerCss = "sv-popup__body-footer-item sv-popup__button sv-popup__button--danger sd-btn sd-btn--small sd-btn--danger";
     popupViewModel.width = "452px";
     return true;