survey-react-ui 1.9.123 → 1.9.125

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.9.123",
+  "version": "1.9.125",
   "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",

package/survey-react-ui.js

@@ -1,6 +1,6 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.123
- * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
+ * surveyjs - Survey JavaScript library v1.9.125
+ * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -484,6 +484,13 @@ var Base = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Base.prototype, "isDesignModeV2", {
+        get: function () {
+            return _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].supportCreatorV2 && this.isDesignMode;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Base.prototype, "inSurvey", {
         /**
          * Returns `true` if the object is included in a survey.
@@ -659,6 +666,7 @@ var Base = /** @class */ (function () {
     Base.prototype.resetPropertyValue = function (name) {
         var locStr = this.localizableStrings ? this.localizableStrings[name] : undefined;
         if (locStr) {
+            this.setLocalizableStringText(name, undefined);
             locStr.clear();
         }
         else {
@@ -951,8 +959,8 @@ var Base = /** @class */ (function () {
     Base.prototype.createCustomLocalizableObj = function (name) {
         var locStr = this.getLocalizableString(name);
         if (locStr)
-            return;
-        this.createLocalizableString(name, this, false, true);
+            return locStr;
+        return this.createLocalizableString(name, this, false, true);
     };
     Base.prototype.getLocale = function () {
         var locOwner = this.getSurvey();
@@ -1993,7 +2001,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, SvgBundleComponent */
+/*! 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, SurveyQuestionMatrixCell, 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";
@@ -2091,6 +2099,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixRow", function() { return _react_reactquestion_matrix__WEBPACK_IMPORTED_MODULE_24__["SurveyQuestionMatrixRow"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixCell", function() { return _react_reactquestion_matrix__WEBPACK_IMPORTED_MODULE_24__["SurveyQuestionMatrixCell"]; });
+
 /* harmony import */ var _react_reactquestion_html__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../react/reactquestion_html */ "./src/react/reactquestion_html.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionHtml", function() { return _react_reactquestion_html__WEBPACK_IMPORTED_MODULE_25__["SurveyQuestionHtml"]; });
 
@@ -2365,7 +2375,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, SvgBundleComponent, 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, SurveyQuestionMatrixCell, 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";
@@ -2439,6 +2449,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixRow", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SurveyQuestionMatrixRow"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixCell", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SurveyQuestionMatrixCell"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionHtml", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SurveyQuestionHtml"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionFile", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SurveyQuestionFile"]; });
@@ -2594,7 +2606,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.123", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.125", "survey-react-ui");
 
 
 /***/ }),
@@ -7478,7 +7490,12 @@ var JsonObjectProperty = /** @class */ (function () {
             return this.isRequiredValue;
         },
         set: function (val) {
-            this.isRequiredValue = val;
+            if (val !== this.isRequired) {
+                this.isRequiredValue = val;
+                if (!!this.classInfo) {
+                    this.classInfo.resetAllProperties();
+                }
+            }
         },
         enumerable: false,
         configurable: true
@@ -7513,7 +7530,7 @@ var JsonObjectProperty = /** @class */ (function () {
     JsonObjectProperty.prototype.getDefaultValue = function (obj) {
         var result = !!this.defaultValueFunc ? this.defaultValueFunc(obj) : this.defaultValueValue;
         if (!!JsonObjectProperty.getItemValuesDefaultValue &&
-            JsonObject.metaData.isDescendantOf(this.className, "itemvalue")) {
+            Serializer.isDescendantOf(this.className, "itemvalue")) {
             result = JsonObjectProperty.getItemValuesDefaultValue(this.defaultValueValue || [], this.className);
         }
         return result;
@@ -7858,7 +7875,8 @@ var CustomPropertiesCollection = /** @class */ (function () {
         if (prop.isLocalizable &&
             prop.serializationProperty &&
             obj.createCustomLocalizableObj) {
-            obj.createCustomLocalizableObj(prop.name);
+            var locStr = obj.createCustomLocalizableObj(prop.name);
+            locStr.defaultValue = prop.defaultValue;
             var locDesc = {
                 get: function () {
                     return obj.getLocalizableString(prop.name);
@@ -7867,7 +7885,7 @@ var CustomPropertiesCollection = /** @class */ (function () {
             Object.defineProperty(obj, prop.serializationProperty, locDesc);
             var desc = {
                 get: function () {
-                    return obj.getLocalizableStringText(prop.name, prop.defaultValue);
+                    return obj.getLocalizableStringText(prop.name);
                 },
                 set: function (v) {
                     obj.setLocalizableStringText(prop.name, v);
@@ -7879,7 +7897,7 @@ var CustomPropertiesCollection = /** @class */ (function () {
             var defaultValue = prop.defaultValue;
             var isArrayProp = prop.isArray || prop.type === "multiplevalues";
             if (typeof obj.createNewArray === "function") {
-                if (JsonObject.metaData.isDescendantOf(prop.className, "itemvalue")) {
+                if (Serializer.isDescendantOf(prop.className, "itemvalue")) {
                     obj.createNewArray(prop.name, function (item) {
                         item.locOwner = obj;
                         item.ownerPropertyName = prop.name;
@@ -7970,8 +7988,20 @@ var JsonMetadataClass = /** @class */ (function () {
         this.fillAllProperties();
         return this.allProperties;
     };
+    JsonMetadataClass.prototype.getRequiredProperties = function () {
+        if (!!this.requiredProperties)
+            return this.requiredProperties;
+        this.requiredProperties = [];
+        var props = this.getAllProperties();
+        for (var i = 0; i < props.length; i++) {
+            if (props[i].isRequired)
+                this.requiredProperties.push(props[i]);
+        }
+        return this.requiredProperties;
+    };
     JsonMetadataClass.prototype.resetAllProperties = function () {
         this.allProperties = undefined;
+        this.requiredProperties = undefined;
         this.hashProperties = undefined;
         var childClasses = Serializer.getChildrenClasses(this.name);
         for (var i = 0; i < childClasses.length; i++) {
@@ -8241,6 +8271,7 @@ var JsonMetadata = /** @class */ (function () {
         this.classes = {};
         this.alternativeNames = {};
         this.childrenClasses = {};
+        this.dynamicPropsCache = {};
     }
     JsonMetadata.prototype.getObjPropertyValue = function (obj, name) {
         if (this.isObjWrapper(obj)) {
@@ -8353,14 +8384,18 @@ var JsonMetadata = /** @class */ (function () {
         if (dynamicType === void 0) { dynamicType = null; }
         if (!obj || !obj.getType || (!obj.getDynamicType && !dynamicType))
             return [];
+        var objType = obj.getType();
         var dType = !!dynamicType ? dynamicType : obj.getDynamicType();
         if (!dType)
             return [];
+        var cacheType = dType + "-" + objType;
+        if (this.dynamicPropsCache[cacheType])
+            return this.dynamicPropsCache[cacheType];
         var dynamicProps = this.getProperties(dType);
         if (!dynamicProps || dynamicProps.length == 0)
             return [];
         var hash = {};
-        var props = this.getProperties(obj.getType());
+        var props = this.getProperties(objType);
         for (var i = 0; i < props.length; i++) {
             hash[props[i].name] = props[i];
         }
@@ -8371,6 +8406,7 @@ var JsonMetadata = /** @class */ (function () {
                 res.push(dProp);
             }
         }
+        this.dynamicPropsCache[cacheType] = res;
         return res;
     };
     JsonMetadata.prototype.hasOriginalProperty = function (obj, propName) {
@@ -8480,12 +8516,13 @@ var JsonMetadata = /** @class */ (function () {
         return result;
     };
     JsonMetadata.prototype.getRequiredProperties = function (name) {
-        var properties = this.getProperties(name);
+        var metaClass = this.findClass(name);
+        if (!metaClass)
+            return [];
+        var props = metaClass.getRequiredProperties();
         var res = [];
-        for (var i = 0; i < properties.length; i++) {
-            if (properties[i].isRequired) {
-                res.push(properties[i].name);
-            }
+        for (var i = 0; i < props.length; i++) {
+            res.push(props[i].name);
         }
         return res;
     };
@@ -8504,6 +8541,7 @@ var JsonMetadata = /** @class */ (function () {
             return null;
         var property = metaDataClass.createProperty(propertyInfo, true);
         if (property) {
+            this.clearDynamicPropsCache(metaDataClass);
             metaDataClass.resetAllProperties();
         }
         return property;
@@ -8514,11 +8552,15 @@ var JsonMetadata = /** @class */ (function () {
             return false;
         var property = metaDataClass.find(propertyName);
         if (property) {
+            this.clearDynamicPropsCache(metaDataClass);
             this.removePropertyFromClass(metaDataClass, property);
             metaDataClass.resetAllProperties();
             CustomPropertiesCollection.removeProperty(metaDataClass.name, propertyName);
         }
     };
+    JsonMetadata.prototype.clearDynamicPropsCache = function (metaDataClass) {
+        this.dynamicPropsCache = {};
+    };
     JsonMetadata.prototype.removePropertyFromClass = function (metaDataClass, property) {
         var index = metaDataClass.properties.indexOf(property);
         if (index < 0)
@@ -8745,7 +8787,7 @@ var JsonUnknownPropertyError = /** @class */ (function (_super) {
             "' is unknown.") || this;
         _this.propertyName = propertyName;
         _this.className = className;
-        var properties = JsonObject.metaData.getProperties(className);
+        var properties = Serializer.getProperties(className);
         if (properties) {
             _this.description = "The list of available properties are: ";
             for (var i = 0; i < properties.length; i++) {
@@ -8768,7 +8810,7 @@ var JsonMissingTypeErrorBase = /** @class */ (function (_super) {
         _this.type = type;
         _this.message = message;
         _this.description = "The following types are available: ";
-        var types = JsonObject.metaData.getChildrenClasses(baseClassName, true);
+        var types = Serializer.getChildrenClasses(baseClassName, true);
         for (var i = 0; i < types.length; i++) {
             if (i > 0)
                 _this.description += ", ";
@@ -8874,9 +8916,9 @@ var JsonObject = /** @class */ (function () {
         var needAddErrors = true;
         if (obj.getType) {
             objType = obj.getType();
-            properties = JsonObject.metaData.getProperties(objType);
+            properties = Serializer.getProperties(objType);
             needAddErrors =
-                !!objType && !JsonObject.metaData.isDescendantOf(objType, "itemvalue");
+                !!objType && !Serializer.isDescendantOf(objType, "itemvalue");
         }
         if (!properties)
             return;
@@ -8916,7 +8958,7 @@ var JsonObject = /** @class */ (function () {
         if (property != null && !property.className) {
             result[JsonObject.typePropertyName] = property.getObjType(obj.getType());
         }
-        this.propertiesToJson(obj, JsonObject.metaData.getProperties(obj.getType()), result, storeDefaults);
+        this.propertiesToJson(obj, Serializer.getProperties(obj.getType()), result, storeDefaults);
         this.propertiesToJson(obj, this.getDynamicProperties(obj), result, storeDefaults);
         return result;
     };
@@ -9034,7 +9076,7 @@ var JsonObject = /** @class */ (function () {
         var result = { newObj: null, error: null };
         var className = this.getClassNameForNewObj(value, property);
         result.newObj = className
-            ? JsonObject.metaData.createClass(className, value)
+            ? Serializer.createClass(className, value)
             : null;
         result.error = this.checkNewObjectOnErrors(result.newObj, value, property, className);
         return result;
@@ -9076,16 +9118,18 @@ var JsonObject = /** @class */ (function () {
     JsonObject.prototype.getRequiredError = function (obj, jsonValue) {
         if (!obj.getType || typeof obj.getData === "function")
             return null;
-        var className = obj.getType();
-        var requiredProperties = JsonObject.metaData.getRequiredProperties(className);
-        if (!Array.isArray(requiredProperties))
+        var metaClass = Serializer.findClass(obj.getType());
+        if (!metaClass)
             return null;
-        for (var i = 0; i < requiredProperties.length; i++) {
-            var prop = Serializer.findProperty(className, requiredProperties[i]);
-            if (!prop || !_helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isValueEmpty(prop.defaultValue))
+        var props = metaClass.getRequiredProperties();
+        if (!Array.isArray(props))
+            return null;
+        for (var i = 0; i < props.length; i++) {
+            var prop = props[i];
+            if (!_helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isValueEmpty(prop.defaultValue))
                 continue;
             if (!jsonValue[prop.name]) {
-                return new JsonRequiredPropertyError(prop.name, className);
+                return new JsonRequiredPropertyError(prop.name, obj.getType());
             }
         }
         return null;
@@ -9301,7 +9345,7 @@ var LocalizableString = /** @class */ (function () {
                 }
             }
             if (!res)
-                res = "";
+                res = this.defaultValue || "";
             return res;
         },
         enumerable: false,
@@ -9799,6 +9843,7 @@ var englishStrings = {
     requiredError: "Response required.",
     requiredErrorInPanel: "Response required: answer at least one question.",
     requiredInAllRowsError: "Response required: answer questions in all rows.",
+    eachRowUniqueError: "Each row must have a unique value.",
     numericError: "The value should be numeric.",
     minError: "The value should not be less than {0}",
     maxError: "The value should not be greater than {0}",
@@ -17154,18 +17199,20 @@ _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__["ReactQuestionFactory"].Inst
 /*!********************************************!*\
   !*** ./src/react/reactquestion_matrix.tsx ***!
   \********************************************/
-/*! exports provided: SurveyQuestionMatrix, SurveyQuestionMatrixRow */
+/*! exports provided: SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrix", function() { return SurveyQuestionMatrix; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixRow", function() { return SurveyQuestionMatrixRow; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixCell", function() { return SurveyQuestionMatrixCell; });
 /* 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 _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
 /* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactsurveymodel */ "./src/react/reactsurveymodel.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -17185,6 +17232,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyQuestionMatrix = /** @class */ (function (_super) {
     __extends(SurveyQuestionMatrix, _super);
     function SurveyQuestionMatrix(props) {
@@ -17254,10 +17302,7 @@ var SurveyQuestionMatrix = /** @class */ (function (_super) {
 var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
     __extends(SurveyQuestionMatrixRow, _super);
     function SurveyQuestionMatrixRow(props) {
-        var _this = _super.call(this, props) || this;
-        _this.handleOnChange = _this.handleOnChange.bind(_this);
-        _this.handleOnMouseDown = _this.handleOnMouseDown.bind(_this);
-        return _this;
+        return _super.call(this, props) || this;
     }
     Object.defineProperty(SurveyQuestionMatrixRow.prototype, "question", {
         get: function () {
@@ -17273,13 +17318,6 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionMatrixRow.prototype.handleOnChange = function (event) {
-        this.row.value = event.target.value;
-        this.setState({ value: this.row.value });
-    };
-    SurveyQuestionMatrixRow.prototype.handleOnMouseDown = function (event) {
-        this.question.onMouseDown();
-    };
     SurveyQuestionMatrixRow.prototype.wrapCell = function (cell, element, reason) {
         if (!reason) {
             return element;
@@ -17314,33 +17352,35 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
         var _this = this;
         var tds = [];
         var row = this.row;
-        for (var i = 0; i < this.question.visibleColumns.length; i++) {
+        var cellComponent = this.question.cellComponent;
+        var _loop_1 = function () {
             var td = null;
-            var column = this.question.visibleColumns[i];
+            var column = this_1.question.visibleColumns[i];
             var key = "value" + i;
-            var isChecked = row.value == column.value;
-            var itemClass = this.question.getItemClass(row, column);
-            var inputId = this.question.inputId + "_" + row.name + "_" + i;
-            if (this.question.hasCellText) {
-                var getHandler = !this.question.isInputReadOnly
+            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;
-                td = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: key, className: itemClass, onClick: getHandler ? getHandler(column) : function () { } }, this.renderLocString(this.question.getCellDisplayLocText(row.name, 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 {
-                var mobileSpan = this.question.isMobile ?
-                    (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.cellResponsiveTitle }, this.renderLocString(column.locText)))
-                    : undefined;
-                td = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: key, "data-responsive-title": column.locText.renderedHtml, className: this.question.cssClasses.cell },
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: itemClass },
-                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: row.fullName, value: column.value, disabled: this.isDisplayMode, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }),
-                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
-                            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
-                                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.itemSvgIcon })) :
-                            null),
-                        mobileSpan)));
+                var renderedCell = _element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.createElement(cellComponent, {
+                    question: this_1.question,
+                    row: this_1.row,
+                    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));
             }
             tds.push(td);
+        };
+        var this_1 = this;
+        for (var i = 0; i < this.question.visibleColumns.length; i++) {
+            _loop_1();
         }
         return tds;
     };
@@ -17351,6 +17391,77 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
     return SurveyQuestionMatrixRow;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
 
+var SurveyQuestionMatrixCell = /** @class */ (function (_super) {
+    __extends(SurveyQuestionMatrixCell, _super);
+    function SurveyQuestionMatrixCell(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleOnMouseDown = _this.handleOnMouseDown.bind(_this);
+        _this.handleOnChange = _this.handleOnChange.bind(_this);
+        return _this;
+    }
+    SurveyQuestionMatrixCell.prototype.handleOnChange = function (event) {
+        if (!!this.props.cellChanged) {
+            this.props.cellChanged();
+        }
+    };
+    SurveyQuestionMatrixCell.prototype.handleOnMouseDown = function (event) {
+        this.question.onMouseDown();
+    };
+    Object.defineProperty(SurveyQuestionMatrixCell.prototype, "question", {
+        get: function () {
+            return this.props.question;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionMatrixCell.prototype, "row", {
+        get: function () {
+            return this.props.row;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionMatrixCell.prototype, "column", {
+        get: function () {
+            return this.props.column;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionMatrixCell.prototype, "columnIndex", {
+        get: function () {
+            return this.props.columnIndex;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionMatrixCell.prototype.canRender = function () {
+        return !!this.question && !!this.row;
+    };
+    SurveyQuestionMatrixCell.prototype.renderElement = function () {
+        var isChecked = this.row.value == this.column.value;
+        var inputId = this.question.inputId + "_" + this.row.name + "_" + this.columnIndex;
+        var itemClass = this.question.getItemClass(this.row, this.column);
+        var mobileSpan = this.question.isMobile ?
+            (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.cellResponsiveTitle }, this.renderLocString(this.column.locText)))
+            : undefined;
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: itemClass },
+            this.renderInput(inputId, isChecked),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.itemSvgIcon })) :
+                null),
+            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 SurveyQuestionMatrixCell;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.registerElement("survey-matrix-cell", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixCell, props);
+});
 _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__["ReactQuestionFactory"].Instance.registerQuestion("matrix", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrix, props);
 });
@@ -19854,7 +19965,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "settings", function() { return settings; });
 /* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
 
-var document = globalThis.document;
+var document = typeof globalThis !== "undefined" ? globalThis.document : undefined.document;
 var defaultEnvironment = (!!document ? {
     root: document,
     _rootElement: document.body,
@@ -20032,12 +20143,12 @@ var settings = {
      * import { ItemValue, settings } from "survey-core";
      *
      * // `itemValueSerializeAsObject` example
-     * settings.localization.itemValueSerializeAsObject = true;
+     * settings.serialization.itemValueSerializeAsObject = true;
      * const item = new ItemValue(5);
      * const itemString = item.toJSON(); // Produces { value: 5 } instead of 5
      *
      * // `itemValueSerializeDisplayText` example
-     * settings.localization.itemValueSerializeDisplayText = true;
+     * settings.serialization.itemValueSerializeDisplayText = true;
      * const item = new ItemValue("item1");
      * const itemString = item.toJSON(); // Produces { value: "item1", text: "item1" } instead of "item1"
      * ```