survey-react 1.11.13 → 1.12.1

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.13
+ * surveyjs - Survey JavaScript library v1.12.1
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1914,6 +1914,18 @@ var helpers_Helpers = /** @class */ (function () {
         }
         return len1 === len2 ? 0 : (len1 < len2 ? -1 : 1);
     };
+    Helpers.isUrlYoutubeVideo = function (url) {
+        if (!url)
+            return false;
+        var youtubeDomains = ["www.youtube.com", "m.youtube.com", "youtube.com", "youtu.be"];
+        url = url.toLowerCase();
+        url = url.replace(/^https?:\/\//, "");
+        for (var i = 0; i < youtubeDomains.length; i++) {
+            if (url.indexOf(youtubeDomains[i] + "/") === 0)
+                return true;
+        }
+        return false;
+    };
     return Helpers;
 }());
 
@@ -1941,6 +1953,7 @@ var englishStrings = {
     refuseItemText: "Refuse to answer",
     dontKnowItemText: "Don't know",
     selectAllItemText: "Select All",
+    deselectAllItemText: "Deselect all",
     progressText: "Page {0} of {1}",
     indexText: "{0} of {1}",
     panelDynamicProgressText: "{0} of {1}",
@@ -3376,13 +3389,27 @@ var JsonMetadata = /** @class */ (function () {
             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) {
+            if (invalidNames.indexOf(dProp.name) < 0 && this.canAddDybamicProp(dProp, hash[dProp.name])) {
                 res.push(dProp);
             }
         }
         this.dynamicPropsCache[cacheType] = res;
         return res;
     };
+    JsonMetadata.prototype.canAddDybamicProp = function (dProp, orgProp) {
+        if (!orgProp)
+            return true;
+        if (dProp === orgProp)
+            return false;
+        var classInfo = dProp.classInfo;
+        while (classInfo && classInfo.parentName) {
+            dProp = this.findProperty(classInfo.parentName, dProp.name);
+            if (dProp && dProp === orgProp)
+                return true;
+            classInfo = !!dProp ? dProp.classInfo : undefined;
+        }
+        return false;
+    };
     JsonMetadata.prototype.hasOriginalProperty = function (obj, propName) {
         return !!this.getOriginalProperty(obj, propName);
     };
@@ -4847,16 +4874,16 @@ function dateFromFirstParameterOrToday(params) {
     }
     return date;
 }
-function year(params) {
+function functionsfactory_year(params) {
     var date = dateFromFirstParameterOrToday(params);
     return date.getFullYear();
 }
-functionsfactory_FunctionFactory.Instance.register("year", year);
-function month(params) {
+functionsfactory_FunctionFactory.Instance.register("year", functionsfactory_year);
+function functionsfactory_month(params) {
     var date = dateFromFirstParameterOrToday(params);
     return date.getMonth() + 1;
 }
-functionsfactory_FunctionFactory.Instance.register("month", month);
+functionsfactory_FunctionFactory.Instance.register("month", functionsfactory_month);
 function day(params) {
     var date = dateFromFirstParameterOrToday(params);
     return date.getDate();
@@ -4870,6 +4897,13 @@ functionsfactory_FunctionFactory.Instance.register("weekday", weekday);
 function getQuestionValueByContext(context, name) {
     if (!context || !name)
         return undefined;
+    var q = context.question;
+    while (q && q.parent) {
+        var res = q.parent.getQuestionByName(name);
+        if (!!res)
+            return res;
+        q = q.parentQuestion;
+    }
     var keys = ["row", "panel", "survey"];
     for (var i = 0; i < keys.length; i++) {
         var ctx = context[keys[i]];
@@ -4881,15 +4915,31 @@ function getQuestionValueByContext(context, name) {
     }
     return null;
 }
+function getDisplayValueReturnResult(q, params) {
+    if (params.length > 1 && !helpers_Helpers.isValueEmpty(params[1]))
+        return q.getDisplayValue(true, params[1]);
+    return q.displayValue;
+}
 function displayValue(params) {
+    var _this = this;
     var q = getQuestionValueByContext(this, params[0]);
     if (!q)
         return "";
-    if (params.length > 1 && !helpers_Helpers.isValueEmpty(params[1]))
-        return q.getDisplayValue(true, params[1]);
-    return q.displayValue;
+    if (q.isReady) {
+        this.returnResult(getDisplayValueReturnResult(q, params));
+    }
+    else {
+        var displayValueOnReadyChanged_1 = function (sender, options) {
+            if (sender.isReady) {
+                sender.onReadyChanged.remove(displayValueOnReadyChanged_1);
+                _this.returnResult(getDisplayValueReturnResult(sender, params));
+            }
+        };
+        q.onReadyChanged.add(displayValueOnReadyChanged_1);
+    }
+    return undefined;
 }
-functionsfactory_FunctionFactory.Instance.register("displayValue", displayValue);
+functionsfactory_FunctionFactory.Instance.register("displayValue", displayValue, true);
 function propertyValue(params) {
     if (params.length !== 2 || !params[0] || !params[1])
         return undefined;
@@ -9627,6 +9677,8 @@ var base_Base = /** @class */ (function () {
             name: name,
             oldValue: oldValue,
             newValue: newValue,
+            arrayChanges: arrayChanges,
+            target: target
         });
         this.doPropertyValueChangedCallback(name, oldValue, newValue, arrayChanges, this);
         this.checkConditionPropertyChanged(name);
@@ -10142,6 +10194,8 @@ var base_Base = /** @class */ (function () {
         this.onElementRenderedEventEnabled = true;
     };
     Base.prototype.disableOnElementRenderedEvent = function () {
+        var _a;
+        (_a = this.onElementRerendered) === null || _a === void 0 ? void 0 : _a.fire(this, { isCancel: true });
         this.onElementRenderedEventEnabled = false;
     };
     Object.defineProperty(Base.prototype, "onElementRerendered", {
@@ -10153,7 +10207,7 @@ var base_Base = /** @class */ (function () {
     });
     Base.prototype.afterRerender = function () {
         var _a;
-        (_a = this.onElementRerendered) === null || _a === void 0 ? void 0 : _a.fire(this, undefined);
+        (_a = this.onElementRerendered) === null || _a === void 0 ? void 0 : _a.fire(this, { isCancel: false });
     };
     Base.currentDependencis = undefined;
     return Base;
@@ -10268,6 +10322,10 @@ var responsivity_manager_ResponsivityManager = /** @class */ (function () {
     function ResponsivityManager(container, model, itemsSelector, dotsItemSize, delayedUpdateFunction) {
         var _this = this;
         if (dotsItemSize === void 0) { dotsItemSize = null; }
+        if (delayedUpdateFunction === void 0) { delayedUpdateFunction = function (callback) { if (queueMicrotask)
+            queueMicrotask(callback);
+        else
+            callback(); }; }
         this.container = container;
         this.model = model;
         this.itemsSelector = itemsSelector;
@@ -10285,8 +10343,9 @@ var responsivity_manager_ResponsivityManager = /** @class */ (function () {
             return DomDocumentHelper.getComputedStyle(elt);
         };
         this.model.updateCallback = function (isResetInitialized) {
-            if (isResetInitialized)
+            if (isResetInitialized) {
                 _this.isInitialized = false;
+            }
             setTimeout(function () { _this.process(); }, 1);
         };
         if (typeof ResizeObserver !== "undefined") {
@@ -10325,16 +10384,6 @@ var responsivity_manager_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;
         if (this.isInitialized)
@@ -10378,16 +10427,8 @@ var responsivity_manager_ResponsivityManager = /** @class */ (function () {
                     _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();
-                    }
+                if (this.delayedUpdateFunction) {
+                    this.delayedUpdateFunction(callback);
                 }
                 else {
                     callback();
@@ -11192,6 +11233,9 @@ var list_ListModel = /** @class */ (function (_super) {
     list_decorate([
         jsonobject_property({ defaultValue: false })
     ], ListModel.prototype, "textWrapEnabled", void 0);
+    list_decorate([
+        jsonobject_property({ defaultValue: "sv-list-item-content" })
+    ], ListModel.prototype, "itemComponent", void 0);
     return ListModel;
 }(container_ActionContainer));
 
@@ -11824,7 +11868,7 @@ var action_Action = /** @class */ (function (_super) {
         evt.stopPropagation();
         return true;
     };
-    Action.prototype.doMouseDown = function () {
+    Action.prototype.doMouseDown = function (args) {
         this.isMouseDown = true;
     };
     Action.prototype.doFocus = function (args) {
@@ -12296,7 +12340,6 @@ var animation_AnimationUtils = /** @class */ (function () {
         var animationsCount = this.getAnimationsCount(element);
         var onEndCallback = function (isCancel) {
             if (isCancel === void 0) { isCancel = true; }
-            _this.afterAnimationRun(element, options);
             callback(isCancel);
             clearTimeout(cancelTimeout);
             _this.removeCancelCallback(onEndCallback);
@@ -12315,7 +12358,6 @@ var animation_AnimationUtils = /** @class */ (function () {
             }, this.getAnimationDuration(element) + 10);
         }
         else {
-            this.afterAnimationRun(element, options);
             callback(true);
         }
     };
@@ -12350,6 +12392,7 @@ var animation_AnimationUtils = /** @class */ (function () {
                 element.classList.remove(cssClass);
             });
         }
+        this.afterAnimationRun(element, options);
     };
     AnimationUtils.prototype.onNextRender = function (callback, isCancel) {
         var _this = this;
@@ -12472,7 +12515,7 @@ var animation_AnimationProperty = /** @class */ (function () {
         this.update = update;
         this.getCurrentValue = getCurrentValue;
         this._debouncedSync = debounce(function (newValue) {
-            _this.animation.cancel();
+            _this.cancelAnimations();
             try {
                 _this._sync(newValue);
             }
@@ -12505,8 +12548,13 @@ var animation_AnimationProperty = /** @class */ (function () {
                 rerenderEvent.remove(nextRenderCallback_1);
                 _this.cancelCallback = undefined;
             };
-            var nextRenderCallback_1 = function () {
-                callback();
+            var nextRenderCallback_1 = function (_, options) {
+                if (options.isCancel) {
+                    onCancel && onCancel();
+                }
+                else {
+                    callback();
+                }
                 clear_1();
             };
             this.cancelCallback = function () {
@@ -12527,6 +12575,9 @@ var animation_AnimationProperty = /** @class */ (function () {
     };
     AnimationProperty.prototype.cancel = function () {
         this._debouncedSync.cancel();
+        this.cancelAnimations();
+    };
+    AnimationProperty.prototype.cancelAnimations = function () {
         this.cancelCallback && this.cancelCallback();
         this.animation.cancel();
     };
@@ -12572,7 +12623,8 @@ var animation_AnimationGroup = /** @class */ (function (_super) {
     AnimationGroup.prototype._sync = function (newValue) {
         var _this = this;
         var _a, _b;
-        var oldValue = this.getCurrentValue();
+        newValue = [].concat(newValue);
+        var oldValue = [].concat(this.getCurrentValue());
         var allowSyncRemovalAddition = (_a = this.animationOptions.allowSyncRemovalAddition) !== null && _a !== void 0 ? _a : true;
         var _c = compareArrays(oldValue, newValue, (_b = this.animationOptions.getKey) !== null && _b !== void 0 ? _b : (function (item) { return item; })), addedItems = _c.addedItems, deletedItems = _c.deletedItems, reorderedItems = _c.reorderedItems, mergedItems = _c.mergedItems;
         if (!allowSyncRemovalAddition && (reorderedItems.length > 0 || addedItems.length > 0)) {
@@ -12846,7 +12898,7 @@ var survey_element_SurveyElementCore = /** @class */ (function (_super) {
     });
     SurveyElementCore.prototype.getIsTitleRenderedAsString = function () { return !this.isTitleOwner; };
     survey_element_decorate([
-        jsonobject_property()
+        jsonobject_property({})
     ], SurveyElementCore.prototype, "hasDescription", void 0);
     survey_element_decorate([
         jsonobject_property({
@@ -14015,17 +14067,18 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
         var _this = this;
         var beforeRunAnimation = function (el) {
             _this.isAnimatingCollapseExpand = true;
-            el.style.setProperty("--animation-height", el.offsetHeight + "px");
+            prepareElementForVerticalAnimation(el);
         };
         var afterRunAnimation = function (el) {
             _this.isAnimatingCollapseExpand = false;
+            cleanHtmlElementAfterAnimation(el);
         };
         return {
             getRerenderEvent: function () { return _this.onElementRerendered; },
             getEnterOptions: function () {
                 var cssClasses = _this.isPanel ? _this.cssClasses.panel : _this.cssClasses;
                 return {
-                    cssClass: cssClasses.contentFadeIn,
+                    cssClass: cssClasses.contentEnter,
                     onBeforeRunAnimation: beforeRunAnimation,
                     onAfterRunAnimation: function (el) {
                         afterRunAnimation(el);
@@ -14035,8 +14088,7 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
             },
             getLeaveOptions: function () {
                 var cssClasses = _this.isPanel ? _this.cssClasses.panel : _this.cssClasses;
-                return {
-                    cssClass: cssClasses.contentFadeOut,
+                return { cssClass: cssClasses.contentLeave,
                     onBeforeRunAnimation: beforeRunAnimation,
                     onAfterRunAnimation: afterRunAnimation
                 };
@@ -14868,10 +14920,20 @@ function navigateToUrl(url) {
 function wrapUrlForBackgroundImage(url) {
     return !!url ? ["url(", url, ")"].join("") : "";
 }
+//new-name: old-name
+var renamedIcons = {
+    "folder": "chooseFile"
+};
 function getIconNameFromProxy(iconName) {
     if (!iconName)
         return iconName;
     var proxyName = settings.customIcons[iconName];
+    if (!proxyName) {
+        var oldName = renamedIcons[iconName];
+        if (!!oldName) {
+            proxyName = settings.customIcons[oldName];
+        }
+    }
     return !!proxyName ? proxyName : iconName;
 }
 function createSvg(size, width, height, iconName, svgElem, title) {
@@ -15266,6 +15328,53 @@ function compareArrays(oldValue, newValue, getKey) {
     });
     return { reorderedItems: reorderedItems, deletedItems: deletedItems, addedItems: addedItems, mergedItems: mergedItems };
 }
+function getVerticalDimensions(el) {
+    if (DomDocumentHelper.isAvailable()) {
+        var _a = DomDocumentHelper.getComputedStyle(el), paddingTop = _a.paddingTop, paddingBottom = _a.paddingBottom, borderTopWidth = _a.borderTopWidth, borderBottomWidth = _a.borderBottomWidth, marginTop = _a.marginTop, marginBottom = _a.marginBottom, boxSizing = _a.boxSizing;
+        var heightTo = el.offsetHeight + "px";
+        if (boxSizing == "content-box") {
+            var heightPx_1 = el.offsetHeight;
+            [borderBottomWidth, borderTopWidth, paddingBottom, paddingTop].forEach(function (style) {
+                heightPx_1 -= parseFloat(style);
+            });
+            heightTo = heightPx_1 + "px";
+        }
+        return {
+            paddingTop: paddingTop,
+            paddingBottom: paddingBottom,
+            borderTopWidth: borderTopWidth,
+            borderBottomWidth: borderBottomWidth,
+            marginTop: marginTop,
+            marginBottom: marginBottom,
+            heightFrom: "0px",
+            heightTo: heightTo
+        };
+    }
+    else {
+        return undefined;
+    }
+}
+function setPropertiesOnElementForAnimation(el, styles, prefix) {
+    var _a;
+    if (prefix === void 0) { prefix = "--animation-"; }
+    el["__sv_created_properties"] = (_a = el["__sv_created_properties"]) !== null && _a !== void 0 ? _a : [];
+    Object.keys(styles).forEach(function (key) {
+        var propertyName = "" + prefix + key.split(/\.?(?=[A-Z])/).join("-").toLowerCase();
+        el.style.setProperty(propertyName, styles[key]);
+        el["__sv_created_properties"].push(propertyName);
+    });
+}
+function prepareElementForVerticalAnimation(el) {
+    setPropertiesOnElementForAnimation(el, getVerticalDimensions(el));
+}
+function cleanHtmlElementAfterAnimation(el) {
+    if (Array.isArray(el["__sv_created_properties"])) {
+        el["__sv_created_properties"].forEach(function (propertyName) {
+            el.style.removeProperty(propertyName);
+        });
+        delete el["__sv_created_properties"];
+    }
+}
 function roundTo2Decimals(number) {
     return Math.round(number * 100) / 100;
 }
@@ -15758,7 +15867,7 @@ var settings = {
      * Nested properties:
      *
      * - `lifetime`: `number`\
-     * Specifies a time period during which a notification is displayed; measured in milliseconds.
+     * Specifies a time period during which a notification is displayed; measured in milliseconds. Default value: 2000.
      */
     notifications: {
         lifetime: 2000
@@ -17325,7 +17434,7 @@ var question_Question = /** @class */ (function (_super) {
         _this.registerFunctionOnPropertiesValueChanged(["no", "readOnly", "hasVisibleErrors", "containsErrors"], function () {
             _this.updateQuestionCss();
         });
-        _this.registerPropertyChangedHandlers(["isMobile"], function () { _this.onMobileChanged(); });
+        _this.registerPropertyChangedHandlers(["_isMobile"], function () { _this.onMobileChanged(); });
         _this.registerPropertyChangedHandlers(["colSpan"], function () { var _a; (_a = _this.parent) === null || _a === void 0 ? void 0 : _a.updateColumns(); });
         return _this;
     }
@@ -17342,8 +17451,22 @@ var question_Question = /** @class */ (function (_super) {
         this.setIsMobile(this.survey._isMobile);
     };
     Question.prototype.setIsMobile = function (val) {
-        this.isMobile = val && (this.allowMobileInDesignMode() || !this.isDesignMode);
+        var newVal = val && (this.allowMobileInDesignMode() || !this.isDesignMode);
+        this.isMobile = newVal;
+    };
+    Question.prototype.getIsMobile = function () {
+        return this._isMobile;
     };
+    Object.defineProperty(Question.prototype, "isMobile", {
+        get: function () {
+            return this.getIsMobile();
+        },
+        set: function (val) {
+            this._isMobile = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Question.prototype.themeChanged = function (theme) { };
     Question.prototype.getDefaultTitle = function () { return this.name; };
     Question.prototype.createLocTitleProperty = function () {
@@ -18539,6 +18662,7 @@ var question_Question = /** @class */ (function (_super) {
     Question.prototype.getRootCss = function () {
         return new CssClassBuilder()
             .append(this.cssRoot)
+            .append(this.cssClasses.mobile, this.isMobile)
             .append(this.cssClasses.readOnly, this.isReadOnlyStyle)
             .append(this.cssClasses.disabled, this.isDisabledStyle)
             .append(this.cssClasses.preview, this.isPreviewStyle)
@@ -19709,7 +19833,8 @@ var question_Question = /** @class */ (function (_super) {
     Object.defineProperty(Question.prototype, "validators", {
         /**
          * Question validators.
-         * @see [Data Validation](https://surveyjs.io/form-library/documentation/data-validation)
+         *
+         * [Data Validation](https://surveyjs.io/form-library/documentation/data-validation (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("validators");
@@ -19777,7 +19902,7 @@ var question_Question = /** @class */ (function (_super) {
     Question.prototype.hasErrors = function (fireCallback, rec) {
         if (fireCallback === void 0) { fireCallback = true; }
         if (rec === void 0) { rec = null; }
-        var errors = this.checkForErrors(!!rec && rec.isOnValueChanged === true);
+        var errors = this.checkForErrors(!!rec && rec.isOnValueChanged === true, fireCallback);
         if (fireCallback) {
             if (!!this.survey) {
                 this.survey.beforeSettingQuestionErrors(this, errors);
@@ -19852,18 +19977,18 @@ var question_Question = /** @class */ (function (_super) {
         if (index !== -1)
             errors.splice(index, 1);
     };
-    Question.prototype.checkForErrors = function (isOnValueChanged) {
+    Question.prototype.checkForErrors = function (isOnValueChanged, fireCallback) {
         var qErrors = new Array();
         if (this.isVisible && this.canCollectErrors()) {
-            this.collectErrors(qErrors, isOnValueChanged);
+            this.collectErrors(qErrors, isOnValueChanged, fireCallback);
         }
         return qErrors;
     };
     Question.prototype.canCollectErrors = function () {
         return !this.isReadOnly || settings.readOnly.enableValidation;
     };
-    Question.prototype.collectErrors = function (qErrors, isOnValueChanged) {
-        this.onCheckForErrors(qErrors, isOnValueChanged);
+    Question.prototype.collectErrors = function (qErrors, isOnValueChanged, fireCallback) {
+        this.onCheckForErrors(qErrors, isOnValueChanged, fireCallback);
         if (qErrors.length > 0 || !this.canRunValidators(isOnValueChanged))
             return;
         var errors = this.runValidators();
@@ -19889,7 +20014,7 @@ var question_Question = /** @class */ (function (_super) {
             return this.validateValueCallback();
         return this.survey ? this.survey.validateQuestion(this) : null;
     };
-    Question.prototype.onCheckForErrors = function (errors, isOnValueChanged) {
+    Question.prototype.onCheckForErrors = function (errors, isOnValueChanged, fireCallback) {
         var _this = this;
         if ((!isOnValueChanged || this.isOldAnswered) && this.hasRequiredError()) {
             var err = new AnswerRequiredError(this.requiredErrorText, this);
@@ -20482,7 +20607,7 @@ var question_Question = /** @class */ (function (_super) {
     Question.questionCounter = 100;
     question_decorate([
         jsonobject_property({ defaultValue: false })
-    ], Question.prototype, "isMobile", void 0);
+    ], Question.prototype, "_isMobile", void 0);
     question_decorate([
         jsonobject_property()
     ], Question.prototype, "forceIsInputReadOnly", void 0);
@@ -21115,6 +21240,12 @@ var itemvalue_ItemValue = /** @class */ (function (_super) {
     ItemValue.prototype.setComponent = function (val) {
         this.componentValue = val;
     };
+    ItemValue.prototype.setRootElement = function (val) {
+        this._htmlElement = val;
+    };
+    ItemValue.prototype.getRootElement = function () {
+        return this._htmlElement;
+    };
     ItemValue.prototype.getEnabled = function () {
         return this.isEnabled;
     };
@@ -21886,52 +22017,32 @@ var choicesRestful_ChoicesRestful = /** @class */ (function (_super) {
         }
         return res;
     };
+    ChoicesRestful.prototype.getAllPropertiesNames = function () {
+        var res = new Array();
+        Serializer.getPropertiesByObj(this).forEach(function (prop) { return res.push(prop.name); });
+        this.getCustomPropertiesNames().forEach(function (prop) { return res.push(prop); });
+        return res;
+    };
     ChoicesRestful.prototype.setData = function (json) {
-        this.clear();
-        if (json.url)
-            this.url = json.url;
-        if (json.path)
-            this.path = json.path;
-        if (json.valueName)
-            this.valueName = json.valueName;
-        if (json.titleName)
-            this.titleName = json.titleName;
-        if (json.imageLinkName)
-            this.imageLinkName = json.imageLinkName;
-        if (json.allowEmptyResponse !== undefined)
-            this.allowEmptyResponse = json.allowEmptyResponse;
-        if (json.attachOriginalItems !== undefined)
-            this.attachOriginalItems = json.attachOriginalItems;
-        var properties = this.getCustomPropertiesNames();
-        for (var i = 0; i < properties.length; i++) {
-            if (json[properties[i]])
-                this[properties[i]] = json[properties[i]];
-        }
+        var _this = this;
+        if (!json)
+            json = {};
+        this.getAllPropertiesNames().forEach(function (name) {
+            _this[name] = json[name];
+        });
     };
     ChoicesRestful.prototype.getData = function () {
-        if (this.isEmpty)
-            return null;
+        var _this = this;
         var res = {};
-        if (this.url)
-            res["url"] = this.url;
-        if (this.path)
-            res["path"] = this.path;
-        if (this.valueName)
-            res["valueName"] = this.valueName;
-        if (this.titleName)
-            res["titleName"] = this.titleName;
-        if (this.imageLinkName)
-            res["imageLinkName"] = this.imageLinkName;
-        if (this.allowEmptyResponse)
-            res["allowEmptyResponse"] = this.allowEmptyResponse;
-        if (this.attachOriginalItems)
-            res["attachOriginalItems"] = this.attachOriginalItems;
-        var properties = this.getCustomPropertiesNames();
-        for (var i = 0; i < properties.length; i++) {
-            if (this[properties[i]])
-                res[properties[i]] = this[properties[i]];
-        }
-        return res;
+        var hasValue = false;
+        this.getAllPropertiesNames().forEach(function (name) {
+            var val = _this[name];
+            if (!_this.isValueEmpty(val) && val !== _this.getDefaultPropertyValue(name)) {
+                res[name] = val;
+                hasValue = true;
+            }
+        });
+        return hasValue ? res : null;
     };
     Object.defineProperty(ChoicesRestful.prototype, "url", {
         /**
@@ -22088,16 +22199,7 @@ var choicesRestful_ChoicesRestful = /** @class */ (function (_super) {
         configurable: true
     });
     ChoicesRestful.prototype.clear = function () {
-        this.url = undefined;
-        this.path = undefined;
-        this.valueName = undefined;
-        this.titleName = undefined;
-        this.imageLinkName = undefined;
-        var properties = this.getCustomPropertiesNames();
-        for (var i = 0; i < properties.length; i++) {
-            if (this[properties[i]])
-                this[properties[i]] = "";
-        }
+        this.setData(undefined);
     };
     ChoicesRestful.prototype.beforeSendRequest = function () {
         this.isRunningValue = true;
@@ -22694,6 +22796,25 @@ var martixBase_QuestionMatrixBaseModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionMatrixBaseModel.prototype, "displayMode", {
+        get: function () {
+            return this.getPropertyValue("displayMode");
+        },
+        /**
+         * Specifies how to arrange matrix questions.
+         *
+         * Possible values:
+         *
+         * - `"table"` - Displays matrix questions in a table.
+         * - `"list"` - Displays matrix questions one under another as a list.
+         * - `"auto"` (default) - Uses the `"table"` mode if the survey has sufficient width to fit the table or the `"list"` mode otherwise.
+         */
+        set: function (val) {
+            this.setPropertyValue("displayMode", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     //a11y
     QuestionMatrixBaseModel.prototype.getCellAriaLabel = function (rowTitle, columnTitle) {
         var row = (this.getLocalizationString("matrix_row") || "row").toLocaleLowerCase();
@@ -22707,6 +22828,12 @@ var martixBase_QuestionMatrixBaseModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    // EO a11y
+    QuestionMatrixBaseModel.prototype.getIsMobile = function () {
+        if (this.displayMode == "auto")
+            return _super.prototype.getIsMobile.call(this);
+        return this.displayMode === "list";
+    };
     martixBase_decorate([
         jsonobject_property()
     ], QuestionMatrixBaseModel.prototype, "verticalAlign", void 0);
@@ -22727,7 +22854,13 @@ Serializer.addClass("matrixbase", [
         choices: ["top", "middle"],
         default: "middle",
     },
-    { name: "alternateRows:boolean", default: false }
+    { name: "alternateRows:boolean", default: false },
+    {
+        name: "displayMode",
+        default: "auto",
+        choices: ["auto", "table", "list"],
+        visible: false
+    },
 ], undefined, "question");
 
 // CONCATENATED MODULE: ./packages/survey-core/src/textPreProcessor.ts
@@ -23314,8 +23447,8 @@ var question_custom_QuestionCustomModelBase = /** @class */ (function (_super) {
         _super.prototype.setNewValue.call(this, newValue);
         this.updateElementCss();
     };
-    QuestionCustomModelBase.prototype.onCheckForErrors = function (errors, isOnValueChanged) {
-        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged);
+    QuestionCustomModelBase.prototype.onCheckForErrors = function (errors, isOnValueChanged, fireCallback) {
+        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged, fireCallback);
         if (!!this.customQuestion) {
             var text = this.customQuestion.onGetErrorText(this);
             if (!!text) {
@@ -25650,7 +25783,7 @@ var question_matrixdropdowncolumn_MatrixDropdownColumn = /** @class */ (function
         this.templateQuestion.locOwner = this;
         this.addProperties(curCellType);
         this.templateQuestion.onPropertyChanged.add(function (sender, options) {
-            _this.propertyValueChanged(options.name, options.oldValue, options.newValue);
+            _this.propertyValueChanged(options.name, options.oldValue, options.newValue, options.arrayChanges, options.target);
         });
         this.templateQuestion.onItemValuePropertyChanged.add(function (sender, options) {
             _this.doItemValuePropertyChanged(options.propertyName, options.obj, options.name, options.newValue, options.oldValue);
@@ -25693,7 +25826,7 @@ var question_matrixdropdowncolumn_MatrixDropdownColumn = /** @class */ (function
                 delete json["choices"];
             }
             delete json["itemComponent"];
-            if (this.jsonObj) {
+            if (this.jsonObj && json.type === "rating") {
                 Object.keys(this.jsonObj).forEach(function (prop) {
                     json[prop] = _this.jsonObj[prop];
                 });
@@ -25720,8 +25853,8 @@ var question_matrixdropdowncolumn_MatrixDropdownColumn = /** @class */ (function
             };
         }
     };
-    MatrixDropdownColumn.prototype.propertyValueChanged = function (name, oldValue, newValue) {
-        _super.prototype.propertyValueChanged.call(this, name, oldValue, newValue);
+    MatrixDropdownColumn.prototype.propertyValueChanged = function (name, oldValue, newValue, arrayChanges, target) {
+        _super.prototype.propertyValueChanged.call(this, name, oldValue, newValue, arrayChanges, target);
         if (name === "isRequired") {
             this.updateIsRenderedRequired(newValue);
         }
@@ -25905,6 +26038,7 @@ var question_matrixdropdownrendered_spreadArray = (undefined && undefined.__spre
 
 
 
+
 var question_matrixdropdownrendered_QuestionMatrixDropdownRenderedCell = /** @class */ (function () {
     function QuestionMatrixDropdownRenderedCell() {
         this.minWidth = "";
@@ -26235,9 +26369,14 @@ var question_matrixdropdownrendered_QuestionMatrixDropdownRenderedTable = /** @c
     };
     QuestionMatrixDropdownRenderedTable.prototype.getRenderedRowsAnimationOptions = function () {
         var _this = this;
-        var beforeAnimationRun = function (el) {
+        var onBeforeRunAnimation = function (el) {
+            el.querySelectorAll(":scope > td > *").forEach(function (el) {
+                prepareElementForVerticalAnimation(el);
+            });
+        };
+        var onAfterRunAnimation = function (el) {
             el.querySelectorAll(":scope > td > *").forEach(function (el) {
-                el.style.setProperty("--animation-height", el.offsetHeight + "px");
+                cleanHtmlElementAfterAnimation(el);
             });
         };
         return {
@@ -26249,10 +26388,10 @@ var question_matrixdropdownrendered_QuestionMatrixDropdownRenderedTable = /** @c
                 return el.getRootElement();
             },
             getLeaveOptions: function () {
-                return { cssClass: _this.cssClasses.rowFadeOut, onBeforeRunAnimation: beforeAnimationRun };
+                return { cssClass: _this.cssClasses.rowLeave, onBeforeRunAnimation: onBeforeRunAnimation, onAfterRunAnimation: onAfterRunAnimation };
             },
-            getEnterOptions: function () {
-                return { cssClass: _this.cssClasses.rowFadeIn, onBeforeRunAnimation: beforeAnimationRun };
+            getEnterOptions: function (_, info) {
+                return { cssClass: _this.cssClasses.rowEnter, onBeforeRunAnimation: onBeforeRunAnimation, onAfterRunAnimation: onAfterRunAnimation };
             }
         };
     };
@@ -28031,12 +28170,10 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
             "rowCount",
             "hasFooter",
             "detailPanelMode",
+            "displayMode"
         ], function () {
             _this.resetRenderedTable();
         });
-        _this.registerPropertyChangedHandlers(["isMobile"], function () {
-            _this.resetRenderedTable();
-        });
         return _this;
     }
     Object.defineProperty(QuestionMatrixDropdownModelBase, "defaultCellType", {
@@ -29800,6 +29937,10 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
         enumerable: false,
         configurable: true
     });
+    QuestionMatrixDropdownModelBase.prototype.onMobileChanged = function () {
+        _super.prototype.onMobileChanged.call(this);
+        this.resetRenderedTable();
+    };
     QuestionMatrixDropdownModelBase.prototype.getRootCss = function () {
         return new CssClassBuilder().append(_super.prototype.getRootCss.call(this)).append(this.cssClasses.rootScroll, this.horizontalScroll).toString();
     };
@@ -30593,13 +30734,17 @@ var core_DragDropCore = /** @class */ (function () {
     DragDropCore.prototype.afterDragOver = function (dropTargetNode) { };
     DragDropCore.prototype.findDropTargetNodeFromPoint = function (clientX, clientY) {
         var displayProp = this.domAdapter.draggedElementShortcut.style.display;
-        //this.domAdapter.draggedElementShortcut.hidden = true;
         this.domAdapter.draggedElementShortcut.style.display = "none";
         if (!DomDocumentHelper.isAvailable())
             return null;
-        var dragOverNode = this.domAdapter.documentOrShadowRoot.elementFromPoint(clientX, clientY);
-        // this.domAdapter.draggedElementShortcut.hidden = false;
+        var dragOverNodes = this.domAdapter.documentOrShadowRoot.elementsFromPoint(clientX, clientY);
         this.domAdapter.draggedElementShortcut.style.display = displayProp || "block";
+        var index = 0;
+        var dragOverNode = dragOverNodes[index];
+        while (dragOverNode && dragOverNode.className && typeof dragOverNode.className.indexOf == "function" && dragOverNode.className.indexOf("sv-drag-target-skipped") != -1) {
+            index++;
+            dragOverNode = dragOverNodes[index];
+        }
         if (!dragOverNode)
             return null;
         return this.findDropTargetNodeByDragOverNode(dragOverNode);
@@ -31775,8 +31920,8 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
         enumerable: false,
         configurable: true
     });
-    QuestionMatrixDynamicModel.prototype.onCheckForErrors = function (errors, isOnValueChanged) {
-        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged);
+    QuestionMatrixDynamicModel.prototype.onCheckForErrors = function (errors, isOnValueChanged, fireCallback) {
+        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged, fireCallback);
         if (!isOnValueChanged && this.hasErrorInMinRows()) {
             errors.push(new error_MinRowCountError(this.minRowCount, this));
         }
@@ -32083,10 +32228,10 @@ var defaultV2Css = {
         edit: "sd-btn sd-btn--small",
     },
     panel: {
-        contentFadeIn: "sd-element__content--fade-in",
-        contentFadeOut: "sd-element__content--fade-out",
-        fadeIn: "sd-element-wrapper--fade-in",
-        fadeOut: "sd-element-wrapper--fade-out",
+        contentEnter: "sd-element__content--enter",
+        contentLeave: "sd-element__content--leave",
+        enter: "sd-element-wrapper--enter",
+        leave: "sd-element-wrapper--leave",
         asPage: "sd-panel--as-page",
         number: "sd-element__num",
         title: "sd-title sd-element__title sd-panel__title",
@@ -32147,8 +32292,8 @@ var defaultV2Css = {
         footerButtonsContainer: "sd-paneldynamic__buttons-container",
         panelsContainer: "sd-paneldynamic__panels-container",
         panelWrapperInRow: "sd-paneldynamic__panel-wrapper--in-row",
-        panelWrapperFadeIn: "sd-paneldynamic__panel-wrapper--fade-in",
-        panelWrapperFadeOut: "sd-paneldynamic__panel-wrapper--fade-out",
+        panelWrapperEnter: "sd-paneldynamic__panel-wrapper--enter",
+        panelWrapperLeave: "sd-paneldynamic__panel-wrapper--leave",
         panelWrapperList: "sd-paneldynamic__panel-wrapper--list",
         progressBtnIcon: "icon-progressbuttonv2",
         noEntriesPlaceholder: "sd-paneldynamic__placeholder sd-question__placeholder",
@@ -32204,15 +32349,17 @@ var defaultV2Css = {
     row: "sd-row sd-clearfix",
     rowMultiple: "sd-row--multiple",
     rowCompact: "sd-row--compact",
-    rowFadeIn: "sd-row--fade-in",
-    rowDelayedFadeIn: "sd-row--delayed-fade-in",
-    rowFadeOut: "sd-row--fade-out",
+    rowEnter: "sd-row--enter",
+    rowDelayedEnter: "sd-row--delayed-enter",
+    rowLeave: "sd-row--leave",
+    rowReplace: "sd-row--replace",
     pageRow: "sd-page__row",
     question: {
-        contentFadeIn: "sd-element__content--fade-in",
-        contentFadeOut: "sd-element__content--fade-out",
-        fadeIn: "sd-element-wrapper--fade-in",
-        fadeOut: "sd-element-wrapper--fade-out",
+        contentEnter: "sd-element__content--enter",
+        contentLeave: "sd-element__content--leave",
+        enter: "sd-element-wrapper--enter",
+        leave: "sd-element-wrapper--leave",
+        mobile: "sd-question--mobile",
         mainRoot: "sd-element sd-question sd-row__question",
         flowRoot: "sd-element sd-question sd-row__question sd-row__question--flow",
         withFrame: "sd-element--with-frame",
@@ -32298,6 +32445,8 @@ var defaultV2Css = {
         rootRow: "sd-selectbase--row",
         rootMultiColumn: "sd-selectbase--multi-column",
         item: "sd-item sd-checkbox sd-selectbase__item",
+        itemEnter: "sd-item--enter",
+        itemLeave: "sd-item--leave",
         itemOnError: "sd-item--error",
         itemSelectAll: "sd-checkbox--selectall",
         itemNone: "sd-checkbox--none",
@@ -32328,6 +32477,8 @@ var defaultV2Css = {
         itemInline: "sd-selectbase__item--inline",
         label: "sd-selectbase__label",
         labelChecked: "",
+        itemEnter: "sd-item--enter",
+        itemLeave: "sd-item--leave",
         itemDisabled: "sd-item--disabled sd-radio--disabled",
         itemReadOnly: "sd-item--readonly sd-radio--readonly",
         itemPreview: "sd-item--preview sd-radio--preview",
@@ -32436,6 +32587,8 @@ var defaultV2Css = {
         other: "sd-input sd-comment sd-selectbase__other",
         onError: "sd-input--error",
         label: "sd-selectbase__label",
+        itemEnter: "sd-item--enter",
+        itemLeave: "sd-item--leave",
         item: "sd-item sd-radio sd-selectbase__item",
         itemDisabled: "sd-item--disabled sd-radio--disabled",
         itemChecked: "sd-item--checked sd-radio--checked",
@@ -32539,8 +32692,9 @@ var defaultV2Css = {
         errorsCellBottom: "sd-table__cell--error-bottom",
         itemCell: "sd-table__cell--item",
         row: "sd-table__row",
-        rowFadeIn: "sd-table__row--fade-in",
-        rowFadeOut: "sd-table__row--fade-out",
+        rowDelayedEnter: "sd-table__row--delayed-enter",
+        rowEnter: "sd-table__row--enter",
+        rowLeave: "sd-table__row--leave",
         expandedRow: "sd-table__row--expanded",
         rowHasPanel: "sd-table__row--has-panel",
         rowHasEndActions: "sd-table__row--has-end-actions",
@@ -32580,8 +32734,9 @@ var defaultV2Css = {
         cell: "sd-table__cell",
         cellResponsiveTitle: "sd-table__responsive-title",
         row: "sd-table__row",
-        rowFadeIn: "sd-table__row--fade-in",
-        rowFadeOut: "sd-table__row--fade-out",
+        rowDelayedEnter: "sd-table__row--delayed-enter",
+        rowEnter: "sd-table__row--enter",
+        rowLeave: "sd-table__row--leave",
         rowHasPanel: "sd-table__row--has-panel",
         rowHasEndActions: "sd-table__row--has-end-actions",
         expandedRow: "sd-table__row--expanded",
@@ -32867,6 +33022,8 @@ var defaultV2Css = {
         itemHover: "sd-item--allowhover sd-checkbox--allowhover",
         itemControl: "sd-visuallyhidden sd-item__control sd-checkbox__control",
         itemDecorator: "sd-item__svg sd-checkbox__svg",
+        itemEnter: "sd-item--enter",
+        itemLeave: "sd-item--leave",
         cleanButton: "sd-tagbox_clean-button sd-dropdown_clean-button",
         cleanButtonSvg: "sd-tagbox_clean-button-svg sd-dropdown_clean-button-svg",
         cleanButtonIconId: "icon-clear",
@@ -33655,7 +33812,7 @@ var header_Cover = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Cover.prototype.propertyValueChanged = function (name, oldValue, newValue) {
+    Cover.prototype.propertyValueChanged = function (name, oldValue, newValue, arrayChanges, target) {
         _super.prototype.propertyValueChanged.call(this, name, oldValue, newValue);
         if (name === "backgroundColor" || name === "backgroundImage" || name === "overlapEnabled") {
             this.updateHeaderClasses();
@@ -34266,8 +34423,8 @@ var panel_QuestionRowModel = /** @class */ (function (_super) {
     QuestionRowModel.prototype.getVisibleElementsAnimationOptions = function () {
         var _this = this;
         var beforeRunAnimation = function (el) {
-            el.style.setProperty("--animation-height", el.offsetHeight + "px");
-            el.style.setProperty("--animation-width", getElementWidth(el) + "px");
+            prepareElementForVerticalAnimation(el);
+            setPropertiesOnElementForAnimation(el, { width: getElementWidth(el) + "px" });
         };
         return {
             getRerenderEvent: function () { return _this.onElementRerendered; },
@@ -34278,16 +34435,18 @@ var panel_QuestionRowModel = /** @class */ (function (_super) {
                 var surveyElement = element;
                 var cssClasses = element.isPanel ? surveyElement.cssClasses.panel : surveyElement.cssClasses;
                 return {
-                    cssClass: cssClasses.fadeOut,
-                    onBeforeRunAnimation: beforeRunAnimation
+                    cssClass: cssClasses.leave,
+                    onBeforeRunAnimation: beforeRunAnimation,
+                    onAfterRunAnimation: cleanHtmlElementAfterAnimation
                 };
             },
             getEnterOptions: function (element) {
                 var surveyElement = element;
                 var cssClasses = element.isPanel ? surveyElement.cssClasses.panel : surveyElement.cssClasses;
                 return {
-                    cssClass: cssClasses.fadeIn,
-                    onBeforeRunAnimation: beforeRunAnimation
+                    cssClass: cssClasses.enter,
+                    onBeforeRunAnimation: beforeRunAnimation,
+                    onAfterRunAnimation: cleanHtmlElementAfterAnimation
                 };
             }
         };
@@ -34492,24 +34651,22 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
     };
     PanelModelBase.prototype.getRowsAnimationOptions = function () {
         var _this = this;
-        var beforeRunAnimation = function (el) {
-            el.style.setProperty("--animation-height", el.offsetHeight + "px");
-        };
         return {
             getRerenderEvent: function () { return _this.onElementRerendered; },
             isAnimationEnabled: function () { return _this.animationAllowed; },
             getAnimatedElement: function (row) { return row.getRootElement(); },
-            getLeaveOptions: function (_) {
-                return {
-                    cssClass: _this.cssClasses.rowFadeOut,
-                    onBeforeRunAnimation: beforeRunAnimation
+            getLeaveOptions: function (row, info) {
+                return { cssClass: _this.cssClasses.rowLeave,
+                    onBeforeRunAnimation: prepareElementForVerticalAnimation,
+                    onAfterRunAnimation: cleanHtmlElementAfterAnimation,
                 };
             },
             getEnterOptions: function (_, animationInfo) {
                 var cssClasses = _this.cssClasses;
                 return {
-                    cssClass: new CssClassBuilder().append(cssClasses.rowFadeIn).append(cssClasses.rowDelayedFadeIn, animationInfo.isDeletingRunning).toString(),
-                    onBeforeRunAnimation: beforeRunAnimation
+                    cssClass: new CssClassBuilder().append(cssClasses.rowEnter).append(cssClasses.rowDelayedEnter, animationInfo.isDeletingRunning).toString(),
+                    onBeforeRunAnimation: prepareElementForVerticalAnimation,
+                    onAfterRunAnimation: cleanHtmlElementAfterAnimation
                 };
             }
         };
@@ -34787,7 +34944,7 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
         configurable: true
     });
     PanelModelBase.prototype.calcCssClasses = function (css) {
-        var classes = { panel: {}, error: {}, row: "", rowFadeIn: "", rowFadeOut: "", rowDelayedFadeIn: "", rowMultiple: "", pageRow: "", rowCompact: "" };
+        var classes = { panel: {}, error: {}, row: "", rowEnter: "", rowLeave: "", rowDelayedEnter: "", rowMultiple: "", pageRow: "", rowCompact: "" };
         this.copyCssClasses(classes.panel, css.panel);
         this.copyCssClasses(classes.error, css.error);
         if (!!css.pageRow) {
@@ -34799,14 +34956,14 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
         if (!!css.row) {
             classes.row = css.row;
         }
-        if (!!css.rowFadeIn) {
-            classes.rowFadeIn = css.rowFadeIn;
+        if (!!css.rowEnter) {
+            classes.rowEnter = css.rowEnter;
         }
-        if (!!css.rowFadeOut) {
-            classes.rowFadeOut = css.rowFadeOut;
+        if (!!css.rowLeave) {
+            classes.rowLeave = css.rowLeave;
         }
-        if (!!css.rowDelayedFadeIn) {
-            classes.rowDelayedFadeIn = css.rowDelayedFadeIn;
+        if (!!css.rowDelayedEnter) {
+            classes.rowDelayedEnter = css.rowDelayedEnter;
         }
         if (!!css.rowMultiple) {
             classes.rowMultiple = css.rowMultiple;
@@ -35814,6 +35971,20 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
             }
         }
     };
+    PanelModelBase.prototype.disableLazyRenderingBeforeElement = function (el) {
+        var row = el ? this.findRowByElement(el) : undefined;
+        var index = el ? this.rows.indexOf(row) : this.rows.length - 1;
+        for (var i = index; i >= 0; i--) {
+            var currentRow = this.rows[i];
+            if (currentRow.isNeedRender) {
+                break;
+            }
+            else {
+                currentRow.isNeedRender = true;
+                currentRow.stopLazyRendering();
+            }
+        }
+    };
     PanelModelBase.prototype.findRowByElement = function (el) {
         var rows = this.rows;
         for (var i = 0; i < rows.length; i++) {
@@ -36302,6 +36473,7 @@ var panel_PanelModel = /** @class */ (function (_super) {
     function PanelModel(name) {
         if (name === void 0) { name = ""; }
         var _this = _super.call(this, name) || this;
+        _this.forcusFirstQuestionOnExpand = true;
         _this.createNewArray("footerActions");
         _this.registerPropertyChangedHandlers(["width"], function () {
             if (!!_this.parent) {
@@ -36719,8 +36891,16 @@ var panel_PanelModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    PanelModel.prototype.expand = function (focusFirstQuestion) {
+        if (focusFirstQuestion === void 0) { focusFirstQuestion = true; }
+        this.forcusFirstQuestionOnExpand = focusFirstQuestion;
+        _super.prototype.expand.call(this);
+    };
     PanelModel.prototype.onElementExpanded = function (elementIsRendered) {
         var _this = this;
+        if (!this.forcusFirstQuestionOnExpand) {
+            return;
+        }
         if (this.survey != null && !this.isLoadingFromJson) {
             var q_1 = this.getFirstQuestionToFocus(false);
             if (!!q_1) {
@@ -37225,7 +37405,7 @@ var page_PageModel = /** @class */ (function (_super) {
         configurable: true
     });
     PageModel.prototype.calcCssClasses = function (css) {
-        var classes = { page: {}, error: {}, pageTitle: "", pageDescription: "", row: "", rowMultiple: "", pageRow: "", rowCompact: "", rowFadeIn: "", rowFadeOut: "", rowDelayedFadeIn: "" };
+        var classes = { page: {}, error: {}, pageTitle: "", pageDescription: "", row: "", rowMultiple: "", pageRow: "", rowCompact: "", rowEnter: "", rowLeave: "", rowDelayedEnter: "", rowReplace: "" };
         this.copyCssClasses(classes.page, css.page);
         this.copyCssClasses(classes.error, css.error);
         if (!!css.pageTitle) {
@@ -37246,14 +37426,17 @@ var page_PageModel = /** @class */ (function (_super) {
         if (!!css.rowCompact) {
             classes.rowCompact = css.rowCompact;
         }
-        if (!!css.rowFadeIn) {
-            classes.rowFadeIn = css.rowFadeIn;
+        if (!!css.rowEnter) {
+            classes.rowEnter = css.rowEnter;
+        }
+        if (!!css.rowDelayedEnter) {
+            classes.rowDelayedEnter = css.rowDelayedEnter;
         }
-        if (!!css.rowDelayedFadeIn) {
-            classes.rowDelayedFadeIn = css.rowDelayedFadeIn;
+        if (!!css.rowLeave) {
+            classes.rowLeave = css.rowLeave;
         }
-        if (!!css.rowFadeOut) {
-            classes.rowFadeOut = css.rowFadeOut;
+        if (!!css.rowReplace) {
+            classes.rowReplace = css.rowReplace;
         }
         if (this.survey) {
             this.survey.updatePageCssClasses(this, classes);
@@ -38587,6 +38770,10 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         _this.isNavigationButtonPressed = false;
         _this.mouseDownPage = null;
         _this.isCalculatingProgressText = false;
+        /**
+         * An event that is raised when the survey's width or height is changed.
+         */
+        _this.onResize = new EventBase();
         _this.isCurrentPageRendering = true;
         _this.isCurrentPageRendered = undefined;
         _this.isTriggerIsRunning = false;
@@ -39075,6 +39262,16 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyModel.prototype.disableLazyRenderingBeforeElement = function (el) {
+        if (this.isDesignMode) {
+            var page = this.getPageByElement(el);
+            var index = this.pages.indexOf(page);
+            for (var i = index; i >= 0; i--) {
+                var currentPage = this.pages[i];
+                currentPage.disableLazyRenderingBeforeElement(currentPage == page ? el : undefined);
+            }
+        }
+    };
     SurveyModel.prototype.updateLazyRenderingRowsOnRemovingElements = function () {
         if (!this.isLazyRendering)
             return;
@@ -43256,7 +43453,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
                             isProcessed_1 = false;
                         }
                         else {
-                            isProcessed_1 = _this.processResponsiveness(observedElement.offsetWidth, mobileWidth_1);
+                            isProcessed_1 = _this.processResponsiveness(observedElement.offsetWidth, mobileWidth_1, observedElement.offsetHeight);
                         }
                     });
                 });
@@ -43270,13 +43467,16 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         this.rootElement = htmlElement;
         this.addScrollEventListener();
     };
-    SurveyModel.prototype.processResponsiveness = function (width, mobileWidth) {
+    SurveyModel.prototype.processResponsiveness = function (width, mobileWidth, height) {
         var isMobile = width < mobileWidth;
         var isMobileChanged = this.isMobile !== isMobile;
-        if (isMobileChanged) {
-            this.setIsMobile(isMobile);
-        }
+        this.setIsMobile(isMobile);
         this.layoutElements.forEach(function (layoutElement) { return layoutElement.processResponsiveness && layoutElement.processResponsiveness(width); });
+        var options = {
+            height: height,
+            width: width,
+        };
+        this.onResize.fire(this, options);
         return isMobileChanged;
     };
     SurveyModel.prototype.triggerResponsiveness = function (hard) {
@@ -43685,36 +43885,6 @@ var survey_SurveyModel = /** @class */ (function (_super) {
             this.uploadFilesCore(name, files, callback);
         }
     };
-    /**
-     * Downloads a file from a server.
-     *
-     * The following code shows how to call this method:
-     *
-     * ```js
-     * const question = survey.getQuestionByName("myFileQuestion");
-     * survey.downloadFile(
-     *   question,
-     *   question.name,
-     *   // Download the first uploaded file
-     *   question.value[0],
-     *   (status, data) => {
-     *     if (status === "success") {
-     *       // Use `data` to retrieve the file
-     *     }
-     *     if (status === "error") {
-     *       // Handle error
-     *     }
-     *   }
-     * );
-     * ```
-     *
-     * @param question A [File Upload question instance](https://surveyjs.io/form-library/documentation/api-reference/file-model).
-     * @param questionName The File Upload question's [`name`](https://surveyjs.io/form-library/documentation/api-reference/file-model#name).
-     * @param fileValue An object from File Upload's [`value`](https://surveyjs.io/form-library/documentation/api-reference/file-model#value) array. This object contains metadata about the file you want to download.
-     * @param callback A callback function that allows you to get the download status (`"success"` or `"error"`) and the file identifier (URL, file name, etc.) that you can use to retrieve the file.
-     * @see onDownloadFile
-     * @see uploadFiles
-     */
     SurveyModel.prototype.downloadFile = function (question, questionName, fileValue, callback) {
         if (this.onDownloadFile.isEmpty) {
             !!callback && callback("skipped", fileValue.content || fileValue);
@@ -45500,6 +45670,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
          * A survey width in CSS values.
          *
          * Default value: `undefined` (the survey inherits the width from its container)
+         * @see onResize
          */
         get: function () {
             return this.getPropertyValue("width");
@@ -46641,6 +46812,7 @@ var question_baseselect_decorate = (undefined && undefined.__decorate) || functi
 
 
 
+
 /**
  * A base class for multiple-choice question types ([Checkboxes](https://surveyjs.io/form-library/documentation/questioncheckboxmodel), [Dropdown](https://surveyjs.io/form-library/documentation/questiondropdownmodel), [Radio Button Group](https://surveyjs.io/form-library/documentation/questionradiogroupmodel), etc.).
  */
@@ -46654,6 +46826,11 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         _this.isRunningChoices = false;
         _this.isFirstLoadChoicesFromUrl = true;
         _this.isUpdatingChoicesDependedQuestions = false;
+        _this._renderedChoices = [];
+        _this.renderedChoicesAnimation = new animation_AnimationGroup(_this.getRenderedChoicesAnimationOptions(), function (val) {
+            _this._renderedChoices = val;
+            _this.renderedChoicesChangedCallback && _this.renderedChoicesChangedCallback();
+        }, function () { return _this._renderedChoices; });
         _this.headItemsCount = 0;
         _this.footItemsCount = 0;
         _this.prevIsOtherSelected = false;
@@ -46673,7 +46850,7 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         _this.registerPropertyChangedHandlers(["hideIfChoicesEmpty"], function () {
             _this.onVisibleChanged();
         });
-        _this.createNewArray("visibleChoices");
+        _this.createNewArray("visibleChoices", function () { return _this.updateRenderedChoices(); }, function () { return _this.updateRenderedChoices(); });
         _this.setNewRestfulProperty();
         var locOtherText = _this.createLocalizableString("otherText", _this.otherItemValue, true, "otherItemText");
         _this.createLocalizableString("otherErrorText", _this, true, "otherRequiredError");
@@ -47291,6 +47468,7 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
     QuestionSelectBase.prototype.clearValue = function (keepComment) {
         _super.prototype.clearValue.call(this, keepComment);
         this.prevOtherValue = undefined;
+        this.selectedItemValues = undefined;
     };
     QuestionSelectBase.prototype.updateCommentFromSurvey = function (newValue) {
         _super.prototype.updateCommentFromSurvey.call(this, newValue);
@@ -47479,6 +47657,10 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         var itemValue = itemvalue_ItemValue.getItemByValue(this.getFilteredChoices(), val);
         return !!itemValue && !itemValue.isEnabled;
     };
+    QuestionSelectBase.prototype.endLoadingFromJson = function () {
+        _super.prototype.endLoadingFromJson.call(this);
+        this.updateVisibleChoices();
+    };
     Object.defineProperty(QuestionSelectBase.prototype, "choicesByUrl", {
         /**
          * Configures access to a RESTful service that returns choice items. Refer to the [`ChoicesRestful`](https://surveyjs.io/form-library/documentation/choicesrestful) class description for more information. You can also specify additional application-wide settings using the [`settings.web`](https://surveyjs.io/form-library/documentation/api-reference/settings#web) object.
@@ -47782,6 +47964,7 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         var oldValue = this.visibleChoices;
         if (!this.isTwoValueEquals(oldValue, newValue) || this.choicesLazyLoadEnabled) {
             this.setArrayPropertyDirectly("visibleChoices", newValue);
+            this.updateRenderedChoices();
         }
     };
     QuestionSelectBase.prototype.calcVisibleChoices = function () {
@@ -48163,9 +48346,9 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         return (!this.isDesignMode ||
             this.getPropertyByName(propName).visible);
     };
-    QuestionSelectBase.prototype.onCheckForErrors = function (errors, isOnValueChanged) {
+    QuestionSelectBase.prototype.onCheckForErrors = function (errors, isOnValueChanged, fireCallback) {
         var _this = this;
-        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged);
+        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged, fireCallback);
         if (!this.hasOther || !this.isOtherSelected || this.otherValue
             || isOnValueChanged && !this.prevOtherErrorValue)
             return;
@@ -48588,12 +48771,76 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
             .append(this.cssClasses.controlLabelChecked, this.isItemSelected(item))
             .toString() || undefined;
     };
+    QuestionSelectBase.prototype.updateRenderedChoices = function () {
+        this.renderedChoices = this.onGetRenderedChoicesCallback ? this.onGetRenderedChoicesCallback(this.visibleChoices) : this.visibleChoices;
+    };
+    QuestionSelectBase.prototype.getRenderedChoicesAnimationOptions = function () {
+        var _this = this;
+        return {
+            isAnimationEnabled: function () {
+                return _this.animationAllowed;
+            },
+            getRerenderEvent: function () {
+                return _this.onElementRerendered;
+            },
+            getKey: function (item) { return item != _this.newItemValue ? item.value : _this.newItemValue; },
+            getLeaveOptions: function (item) {
+                var cssClass = _this.cssClasses.itemLeave;
+                if (_this.hasColumns) {
+                    var index = _this.bodyItems.indexOf(item);
+                    if (index !== -1 && index !== _this.bodyItems.length - 1) {
+                        cssClass = "";
+                    }
+                }
+                return {
+                    cssClass: cssClass,
+                    onBeforeRunAnimation: prepareElementForVerticalAnimation,
+                    onAfterRunAnimation: cleanHtmlElementAfterAnimation
+                };
+            },
+            getAnimatedElement: function (item) {
+                return item.getRootElement();
+            },
+            getEnterOptions: function (item) {
+                var cssClass = _this.cssClasses.itemEnter;
+                if (_this.hasColumns) {
+                    var index = _this.bodyItems.indexOf(item);
+                    if (index !== -1 && index !== _this.bodyItems.length - 1) {
+                        cssClass = "";
+                    }
+                }
+                return {
+                    cssClass: cssClass,
+                    onBeforeRunAnimation: function (el) {
+                        if (_this.getCurrentColCount() == 0 && _this.bodyItems.indexOf(item) >= 0) {
+                            var leftPosition = el.parentElement.firstElementChild.offsetLeft;
+                            if (el.offsetLeft > leftPosition) {
+                                setPropertiesOnElementForAnimation(el, { moveAnimationDuration: "0s", fadeAnimationDelay: "0s" }, "--");
+                            }
+                        }
+                        prepareElementForVerticalAnimation(el);
+                    },
+                    onAfterRunAnimation: cleanHtmlElementAfterAnimation
+                };
+            }
+        };
+    };
+    Object.defineProperty(QuestionSelectBase.prototype, "renderedChoices", {
+        get: function () {
+            return this._renderedChoices;
+        },
+        set: function (val) {
+            this.renderedChoicesAnimation.sync(val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionSelectBase.prototype, "headItems", {
         get: function () {
             var count = (this.separateSpecialChoices || this.isDesignMode) ? this.headItemsCount : 0;
             var res = [];
             for (var i = 0; i < count; i++)
-                res.push(this.visibleChoices[i]);
+                this.renderedChoices[i] && res.push(this.renderedChoices[i]);
             return res;
         },
         enumerable: false,
@@ -48603,9 +48850,9 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         get: function () {
             var count = (this.separateSpecialChoices || this.isDesignMode) ? this.footItemsCount : 0;
             var res = [];
-            var items = this.visibleChoices;
+            var items = this.renderedChoices;
             for (var i = 0; i < count; i++)
-                res.push(items[items.length - count + i]);
+                this.renderedChoices[items.length - count + i] && res.push(this.renderedChoices[items.length - count + i]);
             return res;
         },
         enumerable: false,
@@ -48614,14 +48861,14 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
     Object.defineProperty(QuestionSelectBase.prototype, "dataChoices", {
         get: function () {
             var _this = this;
-            return this.visibleChoices.filter(function (item) { return !_this.isBuiltInChoice(item); });
+            return this.renderedChoices.filter(function (item) { return !_this.isBuiltInChoice(item); });
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(QuestionSelectBase.prototype, "bodyItems", {
         get: function () {
-            return (this.hasHeadItems || this.hasFootItems) ? this.dataChoices : this.visibleChoices;
+            return (this.hasHeadItems || this.hasFootItems) ? this.dataChoices : this.renderedChoices;
         },
         enumerable: false,
         configurable: true
@@ -48644,9 +48891,9 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         get: function () {
             var columns = [];
             var colCount = this.getCurrentColCount();
-            if (this.hasColumns && this.visibleChoices.length > 0) {
+            if (this.hasColumns && this.renderedChoices.length > 0) {
                 var choicesToBuildColumns = (!this.separateSpecialChoices && !this.isDesignMode) ?
-                    this.visibleChoices : this.dataChoices;
+                    this.renderedChoices : this.dataChoices;
                 if (settings.showItemsInOrder == "column") {
                     var prevIndex = 0;
                     var leftElementsCount = choicesToBuildColumns.length % colCount;
@@ -48842,6 +49089,9 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
     question_baseselect_decorate([
         jsonobject_property({ localizable: true })
     ], QuestionSelectBase.prototype, "otherPlaceholder", void 0);
+    question_baseselect_decorate([
+        propertyArray()
+    ], QuestionSelectBase.prototype, "_renderedChoices", void 0);
     return QuestionSelectBase;
 }(question_Question));
 
@@ -49305,14 +49555,14 @@ var popup_view_model_PopupBaseViewModel = /** @class */ (function (_super) {
         this.model.onHiding();
     };
     PopupBaseViewModel.prototype.getLeaveOptions = function () {
-        return { cssClass: "sv-popup--animate-leave", onBeforeRunAnimation: function (el) {
+        return { cssClass: "sv-popup--leave", onBeforeRunAnimation: function (el) {
                 el.setAttribute("inert", "");
             },
             onAfterRunAnimation: function (el) { return el.removeAttribute("inert"); }
         };
     };
     PopupBaseViewModel.prototype.getEnterOptions = function () {
-        return { cssClass: "sv-popup--animate-enter" };
+        return { cssClass: "sv-popup--enter" };
     };
     PopupBaseViewModel.prototype.getAnimatedElement = function () {
         return this.getAnimationContainer();
@@ -49555,7 +49805,7 @@ var popup_view_model_PopupBaseViewModel = /** @class */ (function (_super) {
     };
     PopupBaseViewModel.prototype.updateOnHiding = function () {
         if (this.isFocusedContent && this.prevActiveElement) {
-            this.prevActiveElement.focus();
+            this.prevActiveElement.focus({ preventScroll: true });
         }
     };
     PopupBaseViewModel.prototype.focusContainer = function () {
@@ -51722,11 +51972,11 @@ var question_matrix_QuestionMatrixModel = /** @class */ (function (_super) {
     QuestionMatrixModel.prototype.supportGoNextPageAutomatic = function () {
         return this.isMouseDown === true && this.hasValuesInAllRows();
     };
-    QuestionMatrixModel.prototype.onCheckForErrors = function (errors, isOnValueChanged) {
-        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged);
+    QuestionMatrixModel.prototype.onCheckForErrors = function (errors, isOnValueChanged, fireCallback) {
+        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged, fireCallback);
         if (!isOnValueChanged || this.hasCssError()) {
             var rowsErrors = { noValue: false, isNotUnique: false };
-            this.checkErrorsAllRows(true, rowsErrors);
+            this.checkErrorsAllRows(fireCallback, rowsErrors);
             if (rowsErrors.noValue) {
                 errors.push(new RequiredInAllRowsError(null, this));
             }
@@ -52779,9 +53029,9 @@ var question_text_QuestionTextModel = /** @class */ (function (_super) {
         }
         return _super.prototype.valueFromDataCore.call(this, val);
     };
-    QuestionTextModel.prototype.onCheckForErrors = function (errors, isOnValueChanged) {
+    QuestionTextModel.prototype.onCheckForErrors = function (errors, isOnValueChanged, fireCallback) {
         var _this = this;
-        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged);
+        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged, fireCallback);
         if (isOnValueChanged)
             return;
         if (this.isValueLessMin) {
@@ -52822,7 +53072,8 @@ var question_text_QuestionTextModel = /** @class */ (function (_super) {
         return isValid;
     };
     QuestionTextModel.prototype.convertFuncValuetoQuestionValue = function (val) {
-        return helpers_Helpers.convertValToQuestionVal(val, this.inputType);
+        var type = this.maskTypeIsEmpty ? this.inputType : this.maskSettings.getTypeForExpressions();
+        return helpers_Helpers.convertValToQuestionVal(val, type);
     };
     QuestionTextModel.prototype.getMinMaxErrorText = function (errorText, value) {
         if (helpers_Helpers.isValueEmpty(value))
@@ -52964,8 +53215,11 @@ var question_text_QuestionTextModel = /** @class */ (function (_super) {
         }
         if (this.inputType === "month") {
             var d = new Date(newValue);
-            var m = d.getMonth() + 1;
-            return d.getFullYear() + "-" + (m < 10 ? "0" : "") + m;
+            var isUtc = d.toISOString().indexOf(newValue) == 0 && newValue.indexOf("T") == -1;
+            var month = isUtc ? d.getUTCMonth() : d.getMonth();
+            var year = isUtc ? d.getUTCFullYear() : d.getFullYear();
+            var m = month + 1;
+            return year + "-" + (m < 10 ? "0" : "") + m;
         }
         return newValue;
     };
@@ -54865,9 +55119,9 @@ var question_checkbox_QuestionCheckboxModel = /** @class */ (function (_super) {
         _this.isChangingValueOnClearIncorrect = false;
         _this.selectAllItemValue = new itemvalue_ItemValue("");
         _this.selectAllItemValue.id = "selectall";
-        var selectAllItemText = _this.createLocalizableString("selectAllText", _this.selectAllItem, true, "selectAllItemText");
+        _this.selectAllItemText = _this.createLocalizableString("selectAllText", _this.selectAllItem, true, "selectAllItemText");
         _this.selectAllItem.locOwner = _this;
-        _this.selectAllItem.setLocText(selectAllItemText);
+        _this.selectAllItem.setLocText(_this.selectAllItemText);
         _this.registerPropertyChangedHandlers(["showSelectAllItem", "selectAllText"], function () {
             _this.onVisibleChoicesChanged();
         });
@@ -54974,28 +55228,7 @@ var question_checkbox_QuestionCheckboxModel = /** @class */ (function (_super) {
          * @see showSelectAllItem
          */
         get: function () {
-            var noneItems = this.getNoneItems();
-            for (var i = 0; i < noneItems.length; i++) {
-                if (this.isItemSelected(noneItems[i]))
-                    return false;
-            }
-            var items = this.getVisibleEnableItems();
-            if (items.length === 0)
-                return false;
-            var val = this.value;
-            if (!val || !Array.isArray(val) || val.length === 0)
-                return false;
-            if (val.length < items.length)
-                return false;
-            var rVal = [];
-            for (var i = 0; i < val.length; i++) {
-                rVal.push(this.getRealValue(val[i]));
-            }
-            for (var i = 0; i < items.length; i++) {
-                if (rVal.indexOf(items[i].value) < 0)
-                    return false;
-            }
-            return true;
+            return this.allElementsSelected();
         },
         set: function (val) {
             if (val) {
@@ -55011,6 +55244,30 @@ var question_checkbox_QuestionCheckboxModel = /** @class */ (function (_super) {
     QuestionCheckboxModel.prototype.toggleSelectAll = function () {
         this.isAllSelected = !this.isAllSelected;
     };
+    QuestionCheckboxModel.prototype.allElementsSelected = function () {
+        var noneItems = this.getNoneItems();
+        for (var i = 0; i < noneItems.length; i++) {
+            if (this.isItemSelected(noneItems[i]))
+                return false;
+        }
+        var items = this.getVisibleEnableItems();
+        if (items.length === 0)
+            return false;
+        var val = this.value;
+        if (!val || !Array.isArray(val) || val.length === 0)
+            return false;
+        if (val.length < items.length)
+            return false;
+        var rVal = [];
+        for (var i = 0; i < val.length; i++) {
+            rVal.push(this.getRealValue(val[i]));
+        }
+        for (var i = 0; i < items.length; i++) {
+            if (rVal.indexOf(items[i].value) < 0)
+                return false;
+        }
+        return true;
+    };
     /**
      * Selects all choice items, except "Other" and "None".
      *
@@ -55181,8 +55438,8 @@ var question_checkbox_QuestionCheckboxModel = /** @class */ (function (_super) {
         return val.map(function (item) { return _this.createItemValue(item); });
     };
     QuestionCheckboxModel.prototype.getAnswerCorrectIgnoreOrder = function () { return true; };
-    QuestionCheckboxModel.prototype.onCheckForErrors = function (errors, isOnValueChanged) {
-        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged);
+    QuestionCheckboxModel.prototype.onCheckForErrors = function (errors, isOnValueChanged, fireCallback) {
+        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged, fireCallback);
         if (isOnValueChanged)
             return;
         if (this.minSelectedChoices > 0 && this.checkMinSelectedChoicesUnreached()) {
@@ -55874,6 +56131,9 @@ var dropdownMultiSelectListModel_DropdownMultiSelectListModel = /** @class */ (f
     };
     DropdownMultiSelectListModel.prototype.selectAllItems = function () {
         this.question.toggleSelectAll();
+        if (this.question.isAllSelected && this.question.hideSelectedItems) {
+            this.popupModel.hide();
+        }
         this.updateListState();
     };
     DropdownMultiSelectListModel.prototype.selectNoneItem = function () {
@@ -56004,6 +56264,7 @@ var question_tagbox_QuestionTagboxModel = /** @class */ (function (_super) {
         _this.createLocalizableString("placeholder", _this, false, true);
         _this.createLocalizableString("clearCaption", _this, false, true);
         _this.createLocalizableString("readOnlyText", _this, true);
+        _this.deselectAllItemText = _this.createLocalizableString("deselectAllText", _this.selectAllItem, true, "deselectAllItemText");
         _this.registerPropertyChangedHandlers(["value", "renderAs", "showOtherItem", "otherText", "placeholder", "choices", "visibleChoices"], function () {
             _this.updateReadOnlyText();
         });
@@ -56193,6 +56454,14 @@ var question_tagbox_QuestionTagboxModel = /** @class */ (function (_super) {
         (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onFocus(event);
         _super.prototype.onFocusCore.call(this, event);
     };
+    QuestionTagboxModel.prototype.allElementsSelected = function () {
+        var result = _super.prototype.allElementsSelected.call(this);
+        this.updateSelectAllItemText(result);
+        return result;
+    };
+    QuestionTagboxModel.prototype.updateSelectAllItemText = function (isAllSelected) {
+        this.selectAllItem.setLocText(isAllSelected ? this.deselectAllItemText : this.selectAllItemText);
+    };
     QuestionTagboxModel.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
         if (!!this.dropdownListModel) {
@@ -58090,8 +58359,8 @@ var question_file_QuestionFileModelBase = /** @class */ (function (_super) {
             return;
         this.survey.clearFiles(this, this.name, this.value, null, function () { });
     };
-    QuestionFileModelBase.prototype.onCheckForErrors = function (errors, isOnValueChanged) {
-        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged);
+    QuestionFileModelBase.prototype.onCheckForErrors = function (errors, isOnValueChanged, fireCallback) {
+        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged, fireCallback);
         if (this.isUploading && this.waitForUpload) {
             errors.push(new UploadingFileError(this.getLocalizationString("uploadingFile"), this));
         }
@@ -59896,12 +60165,14 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
             return;
         if (QuestionRatingModel.colorsCalculated)
             return;
+        function getColorFromProperty(varName) {
+            var style = getComputedStyle(DomDocumentHelper.getDocumentElement());
+            return style.getPropertyValue && style.getPropertyValue(varName);
+        }
         function getRGBColor(colorName, varName) {
             var str = !!themeVariables && themeVariables[colorName];
-            if (!str) {
-                var style = getComputedStyle(DomDocumentHelper.getDocumentElement());
-                str = style.getPropertyValue && style.getPropertyValue(varName);
-            }
+            if (!str)
+                str = getColorFromProperty(varName);
             if (!str)
                 return null;
             var canvasElement = DomDocumentHelper.createElement("canvas");
@@ -59909,6 +60180,9 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
                 return null;
             var ctx = canvasElement.getContext("2d");
             ctx.fillStyle = str;
+            if (ctx.fillStyle == "#000000") {
+                ctx.fillStyle = getColorFromProperty(varName);
+            }
             var newStr = ctx.fillStyle;
             if (newStr.startsWith("rgba")) {
                 return newStr.substring(5, newStr.length - 1).split(",").map(function (c) { return +(c.trim()); });
@@ -61795,21 +62069,10 @@ var question_image_decorate = (undefined && undefined.__decorate) || function (d
 
 
 
-var youtubeDomains = ["www.youtube.com", "m.youtube.com", "youtube.com", "youtu.be"];
+
 var videoSuffics = [".mp4", ".mov", ".wmv", ".flv", ".avi", ".mkv"];
 var youtubeUrl = "https://www.youtube.com/";
 var youtubeEmbed = "embed";
-function isUrlYoutubeVideo(url) {
-    if (!url)
-        return false;
-    url = url.toLowerCase();
-    url = url.replace(/^https?:\/\//, "");
-    for (var i = 0; i < youtubeDomains.length; i++) {
-        if (url.indexOf(youtubeDomains[i] + "/") === 0)
-            return true;
-    }
-    return false;
-}
 /**
   * A class that describes the Image question type. Unlike other question types, Image cannot have a title or value.
  *
@@ -62034,7 +62297,7 @@ var question_image_QuestionImageModel = /** @class */ (function (_super) {
         }
     };
     QuestionImageModel.prototype.isYoutubeVideo = function () {
-        return isUrlYoutubeVideo(this.imageLink);
+        return helpers_Helpers.isUrlYoutubeVideo(this.imageLink);
     };
     QuestionImageModel.prototype.isVideo = function () {
         var link = this.imageLink;
@@ -62054,9 +62317,8 @@ var question_image_QuestionImageModel = /** @class */ (function (_super) {
 }(QuestionNonValue));
 
 function getCorrectImageLink(val, isYouTube) {
-    if (!val || !isUrlYoutubeVideo(val))
+    if (!val || !helpers_Helpers.isUrlYoutubeVideo(val))
         return isYouTube ? "" : val;
-    //if(!val || !isUrlYoutubeVideo(val)) return val;
     var res = val.toLocaleLowerCase();
     if (res.indexOf(youtubeEmbed) > -1)
         return val;
@@ -62792,7 +63054,7 @@ var question_signaturepad_QuestionSignaturePadModel = /** @class */ (function (_
         };
     };
     QuestionSignaturePadModel.prototype.refreshCanvas = function () {
-        if (!this.canvas)
+        if (!this.signaturePad || !this.canvas)
             return;
         if (!this.value) {
             this.canvas.getContext("2d").clearRect(0, 0, this.canvas.width * this.scale, this.canvas.height * this.scale);
@@ -63522,7 +63784,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         _this.registerPropertyChangedHandlers(["panelsState"], function () {
             _this.setPanelsState();
         });
-        _this.registerPropertyChangedHandlers(["isMobile", "newPanelPosition", "displayMode", "showProgressBar"], function () {
+        _this.registerPropertyChangedHandlers(["newPanelPosition", "displayMode", "showProgressBar"], function () {
             _this.updateFooterActions();
         });
         _this.registerPropertyChangedHandlers(["allowAddPanel"], function () { _this.updateNoEntriesTextDefaultLoc(); });
@@ -63549,8 +63811,15 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
             if (!!res)
                 return res;
         }
+        if (this.showAddPanelButton && (!withError || this.currentErrorCount > 0))
+            return this;
         return null;
     };
+    QuestionPanelDynamicModel.prototype.getFirstInputElementId = function () {
+        if (this.showAddPanelButton)
+            return this.addButtonId;
+        return _super.prototype.getFirstInputElementId.call(this);
+    };
     QuestionPanelDynamicModel.prototype.setSurveyImpl = function (value, isLight) {
         _super.prototype.setSurveyImpl.call(this, value, isLight);
         this.setTemplatePanelSurveyImpl();
@@ -64000,34 +64269,44 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
                 }
             },
             getEnterOptions: function () {
-                var cssClass = new CssClassBuilder().append(_this.cssClasses.panelWrapperFadeIn).append(getDirectionCssClass()).toString();
+                var cssClass = new CssClassBuilder().append(_this.cssClasses.panelWrapperEnter).append(getDirectionCssClass()).toString();
                 return {
                     onBeforeRunAnimation: function (el) {
-                        var _a;
                         if (_this.focusNewPanelCallback) {
                             var scolledElement = _this.isRenderModeList ? el : el.parentElement;
                             survey_element_SurveyElement.ScrollElementToViewCore(scolledElement, false, false, { behavior: "smooth" });
                         }
-                        if (!_this.isRenderModeList) {
-                            (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("--animation-height-to", el.offsetHeight + "px");
+                        if (!_this.isRenderModeList && el.parentElement) {
+                            setPropertiesOnElementForAnimation(el.parentElement, { heightTo: el.offsetHeight + "px" });
                         }
                         else {
-                            el.style.setProperty("--animation-height", el.offsetHeight + "px");
+                            prepareElementForVerticalAnimation(el);
+                        }
+                    },
+                    onAfterRunAnimation: function (el) {
+                        cleanHtmlElementAfterAnimation(el);
+                        if (el.parentElement) {
+                            cleanHtmlElementAfterAnimation(el.parentElement);
                         }
                     },
                     cssClass: cssClass
                 };
             },
             getLeaveOptions: function () {
-                var cssClass = new CssClassBuilder().append(_this.cssClasses.panelWrapperFadeOut).append(getDirectionCssClass()).toString();
+                var cssClass = new CssClassBuilder().append(_this.cssClasses.panelWrapperLeave).append(getDirectionCssClass()).toString();
                 return {
                     onBeforeRunAnimation: function (el) {
-                        var _a;
-                        if (!_this.isRenderModeList) {
-                            (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("--animation-height-from", el.offsetHeight + "px");
+                        if (!_this.isRenderModeList && el.parentElement) {
+                            setPropertiesOnElementForAnimation(el.parentElement, { heightFrom: el.offsetHeight + "px" });
                         }
                         else {
-                            el.style.setProperty("--animation-height", el.offsetHeight + "px");
+                            prepareElementForVerticalAnimation(el);
+                        }
+                    },
+                    onAfterRunAnimation: function (el) {
+                        cleanHtmlElementAfterAnimation(el);
+                        if (el.parentElement) {
+                            cleanHtmlElementAfterAnimation(el.parentElement);
                         }
                     },
                     cssClass: cssClass
@@ -64527,6 +64806,13 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "addButtonId", {
+        get: function () {
+            return this.id + "addPanel";
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "newPanelPosition", {
         /**
          * Specifies the position of newly added panels.
@@ -64748,8 +65034,9 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
             return 0;
         var onSurveyNumbering = this.showQuestionNumbers === "onSurvey";
         var startIndex = onSurveyNumbering ? value : 0;
-        for (var i = 0; i < this.visiblePanelsCore.length; i++) {
-            var counter = this.setPanelVisibleIndex(this.visiblePanelsCore[i], startIndex, this.showQuestionNumbers != "off");
+        var panels = this.isDesignMode ? [this.template] : this.visiblePanelsCore;
+        for (var i = 0; i < panels.length; i++) {
+            var counter = this.setPanelVisibleIndex(panels[i], startIndex, this.showQuestionNumbers != "off");
             if (onSurveyNumbering) {
                 startIndex += counter;
             }
@@ -64917,12 +65204,11 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         return true;
     };
     /**
-     * Add a new dynamic panel based on the template Panel. It checks if canAddPanel returns true and then calls addPanel method.
-     * If a displayMode is different from "list" and the current panel has erros, then
-     * @see template
+     * Adds a new panel based on the [template](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#template).
+     *
+     * Unlike the [`addPanel()`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#addPanel) method, `addPanelUI()` performs additional actions: checks whether a new panel [can be added](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#canAddPanel), expands and focuses the new panel, and runs animated effects.
      * @see panelCount
      * @see panels
-     * @see canAddPanel
      */
     QuestionPanelDynamicModel.prototype.addPanelUI = function () {
         if (!this.canAddPanel)
@@ -65006,13 +65292,11 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         }
     };
     /**
-     * Call removePanel function. Do nothing is canRemovePanel returns false. If confirmDelete set to true, it shows the confirmation dialog first.
-     * @param value a panel or panel index
-     * @see removePanel
-     * @see confirmDelete
-     * @see confirmDeleteText
-     * @see canRemovePanel
+     * Deletes a panel from the [`panels`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#panels) array.
      *
+     * Unlike the [`removePanel()`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#removePanel) method, `removePanelUI()` performs additional actions: checks whether the panel [can be removed](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#canRemovePanel) and displays a confirmation dialog (if the [`confirmDelete`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#confirmDelete) property is enabled).
+     * @param value A `PanelModel` instance or zero-based panel index.
+     * @see addPanelUI
      */
     QuestionPanelDynamicModel.prototype.removePanelUI = function (value) {
         var _this = this;
@@ -65055,6 +65339,11 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
             return;
         this.currentIndex--;
     };
+    /**
+     * Deletes a panel from the [`panels`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#panels) array.
+     * @param value A `PanelModel` instance or zero-based panel index.
+     * @see addPanel
+     */
     QuestionPanelDynamicModel.prototype.removePanel = function (value) {
         var visIndex = this.getVisualPanelIndex(value);
         if (visIndex < 0 || visIndex >= this.visiblePanelCount)
@@ -65272,13 +65561,18 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
             }
         }
         this.updateIsReady();
-        if (this.isReadOnly || !this.allowAddPanel) {
+        if (!this.showAddPanelButton) {
             this.updateNoEntriesTextDefaultLoc();
         }
         this.updateFooterActions();
         this.isBuildingPanelsFirstTime = false;
         this.releaseAnimations();
     };
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "showAddPanelButton", {
+        get: function () { return this.allowAddPanel && !this.isReadOnly; },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "wasNotRenderedInSurvey", {
         get: function () {
             return !this.hasPanelBuildFirstTime && !this.wasRendered && !!this.survey;
@@ -65509,11 +65803,12 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         for (var i = 0; i < panels.length; i++) {
             this.setOnCompleteAsyncInPanel(panels[i]);
         }
-        for (var i = 0; i < panels.length; i++) {
-            var pnlError = panels[i].hasErrors(fireCallback, !!rec && rec.focusOnFirstError, rec);
-            pnlError = this.isValueDuplicated(panels[i], keyValues, rec, fireCallback) || pnlError;
-            if (!this.isRenderModeList && pnlError && !res) {
-                this.currentIndex = i;
+        var focusOnError = !!rec && rec.focusOnFirstError;
+        for (var i_1 = 0; i_1 < panels.length; i_1++) {
+            var pnlError = panels[i_1].hasErrors(fireCallback, focusOnError, rec);
+            pnlError = this.isValueDuplicated(panels[i_1], keyValues, rec, fireCallback) || pnlError;
+            if (!this.isRenderModeList && pnlError && !res && focusOnError) {
+                this.currentIndex = i_1;
             }
             res = pnlError || res;
         }
@@ -66106,6 +66401,10 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         }
         return classes;
     };
+    QuestionPanelDynamicModel.prototype.onMobileChanged = function () {
+        _super.prototype.onMobileChanged.call(this);
+        this.updateFooterActions();
+    };
     QuestionPanelDynamicModel.maxCheckCount = 3;
     question_paneldynamic_decorate([
         propertyArray({})
@@ -67776,6 +68075,9 @@ var mask_base_InputMaskBase = /** @class */ (function (_super) {
     InputMaskBase.prototype.getUnmaskedValue = function (src) { return src; };
     InputMaskBase.prototype.getMaskedValue = function (src) { return src; };
     InputMaskBase.prototype.getTextAlignment = function () { return "auto"; };
+    InputMaskBase.prototype.getTypeForExpressions = function () {
+        return "text";
+    };
     mask_base_decorate([
         jsonobject_property()
     ], InputMaskBase.prototype, "saveMaskedValue", void 0);
@@ -68499,6 +68801,9 @@ var mask_datetime_InputMaskDateTime = /** @class */ (function (_super) {
     InputMaskDateTime.prototype.getType = function () {
         return "datetimemask";
     };
+    InputMaskDateTime.prototype.getTypeForExpressions = function () {
+        return this.hasTimePart ? "datetime-local" : "datetime";
+    };
     InputMaskDateTime.prototype.updateLiterals = function () {
         this.lexems = getDateTimeLexems(this.pattern || "");
     };
@@ -68515,6 +68820,9 @@ var mask_datetime_InputMaskDateTime = /** @class */ (function (_super) {
         var _this = this;
         var date = new Date(str);
         this.initInputDateTimeData();
+        if (!this.hasTimePart) {
+            date = new Date(str + "T00:00:00");
+        }
         if (!this.hasDatePart) {
             date = new Date(this.defaultDate + str);
         }
@@ -69138,8 +69446,8 @@ Serializer.addClass("currencymask", [
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.11.13";
-ReleaseDate = "" + "2024-08-27";
+Version = "" + "1.12.1";
+ReleaseDate = "" + "2024-09-10";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -79013,6 +79321,7 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     function SurveyElementBase(props) {
         var _this = _super.call(this, props) || this;
         _this._allowComponentUpdate = true;
+        _this.prevStateElements = [];
         return _this;
     }
     SurveyElementBase.renderLocString = function (locStr, style, key) {
@@ -79032,9 +79341,14 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     };
     SurveyElementBase.prototype.componentWillUnmount = function () {
         this.unMakeBaseElementsReact();
+        this.disableStateElementsRerenderEvent(this.getStateElements());
     };
     SurveyElementBase.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
         this.makeBaseElementsReact();
+        var stateElements = this.getStateElements();
+        this.disableStateElementsRerenderEvent(((_a = this.prevStateElements) !== null && _a !== void 0 ? _a : []).filter(function (el) { return !stateElements.includes(el); }));
+        this.prevStateElements = [];
         this.getStateElements().forEach(function (el) {
             el.afterRerender();
         });
@@ -79049,6 +79363,7 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     SurveyElementBase.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         if (this._allowComponentUpdate) {
             this.unMakeBaseElementsReact();
+            this.prevStateElements = this.getStateElements();
         }
         return this._allowComponentUpdate;
     };
@@ -79116,10 +79431,14 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     SurveyElementBase.prototype.unMakeBaseElementsReact = function () {
         var els = this.getStateElements();
         for (var i = 0; i < els.length; i++) {
-            els[i].disableOnElementRenderedEvent();
             this.unMakeBaseElementReact(els[i]);
         }
     };
+    SurveyElementBase.prototype.disableStateElementsRerenderEvent = function (els) {
+        els.forEach(function (el) {
+            el.disableOnElementRenderedEvent();
+        });
+    };
     SurveyElementBase.prototype.getStateElements = function () {
         var el = this.getStateElement();
         return !!el ? [el] : [];
@@ -79904,7 +80223,7 @@ var action_bar_item_SurveyActionBarItem = /** @class */ (function (_super) {
         var title = this.item.tooltip || this.item.title;
         var buttonContent = this.renderButtonContent();
         var tabIndex = this.item.disableTabStop ? -1 : undefined;
-        var button = attachKey2click(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("button", { className: className, type: "button", disabled: this.item.disabled, onMouseDown: function () { return _this.item.doMouseDown(); }, onFocus: function (args) { return _this.item.doFocus(args); }, onClick: function (args) { return _this.item.doAction(args); }, title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, role: this.item.ariaRole }, buttonContent), this.item, { processEsc: false });
+        var button = attachKey2click(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("button", { className: className, type: "button", disabled: this.item.disabled, onMouseDown: function (args) { return _this.item.doMouseDown(args); }, onFocus: function (args) { return _this.item.doFocus(args); }, onClick: function (args) { return _this.item.doAction(args); }, title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, role: this.item.ariaRole }, buttonContent), this.item, { processEsc: false });
         return button;
     };
     return SurveyActionBarItem;
@@ -82264,7 +82583,7 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         var _this = this;
         if (this.question.hasHeadItems) {
             return this.question.headItems.map(function (item, ii) {
-                return _this.renderItem("item_h" + ii, item, false, _this.question.cssClasses);
+                return _this.renderItem(item, false, _this.question.cssClasses);
             });
         }
     };
@@ -82272,7 +82591,7 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         var _this = this;
         if (this.question.hasFootItems) {
             return this.question.footItems.map(function (item, ii) {
-                return _this.renderItem("item_f" + ii, item, false, _this.question.cssClasses);
+                return _this.renderItem(item, false, _this.question.cssClasses);
             });
         }
     };
@@ -82283,7 +82602,7 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         var _this = this;
         return this.question.columns.map(function (column, ci) {
             var items = column.map(function (item, ii) {
-                return _this.renderItem("item" + ii, item, ci === 0 && ii === 0, cssClasses, "" + ci + ii);
+                return _this.renderItem(item, ci === 0 && ii === 0, cssClasses, "" + ci + ii);
             });
             return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { key: "column" + ci + _this.question.getItemsColumnKey(column), className: _this.question.getColumnClass(), role: "presentation" }, items));
         });
@@ -82299,8 +82618,8 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         var renderedItems = [];
         for (var i = 0; i < choices.length; i++) {
             var item = choices[i];
-            var key = "item" + i;
-            var renderedItem = this.renderItem(key, item, i == 0, cssClasses, "" + i);
+            var key = "item" + item.value;
+            var renderedItem = this.renderItem(item, i == 0, cssClasses, "" + i);
             if (!!renderedItem) {
                 renderedItems.push(renderedItem);
             }
@@ -82319,9 +82638,9 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: this.question.getCommentAreaCss(true) },
             external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](SurveyQuestionOtherValueItem, { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode })));
     };
-    SurveyQuestionCheckbox.prototype.renderItem = function (key, item, isFirst, cssClasses, index) {
+    SurveyQuestionCheckbox.prototype.renderItem = function (item, isFirst, cssClasses, index) {
         var renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponent, {
-            key: key,
+            key: item.value,
             question: this.question,
             cssClasses: cssClasses,
             isDisplayMode: this.isDisplayMode,
@@ -82347,6 +82666,7 @@ var reactquestion_checkbox_SurveyQuestionCheckboxItem = /** @class */ (function
         _this.handleOnChange = function (event) {
             _this.question.clickItemHandler(_this.item, event.target.checked);
         };
+        _this.rootRef = external_root_React_commonjs2_react_commonjs_react_amd_react_["createRef"]();
         return _this;
     }
     SurveyQuestionCheckboxItem.prototype.getStateElement = function () {
@@ -82394,11 +82714,20 @@ var reactquestion_checkbox_SurveyQuestionCheckboxItem = /** @class */ (function
         enumerable: false,
         configurable: true
     });
+    SurveyQuestionCheckboxItem.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (prevProps.item !== this.props.item && !this.question.isDesignMode) {
+            if (this.props.item) {
+                this.props.item.setRootElement(this.rootRef.current);
+            }
+            if (prevProps.item) {
+                prevProps.item.setRootElement(undefined);
+            }
+        }
+    };
     SurveyQuestionCheckboxItem.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
             return false;
-        if (!this.question)
-            return false;
         return (!this.question.customWidget ||
             !!this.question.customWidgetData.isNeedRender ||
             !!this.question.customWidget.widgetJson.isDefaultRender ||
@@ -82423,7 +82752,7 @@ var reactquestion_checkbox_SurveyQuestionCheckboxItem = /** @class */ (function
         var itemClass = this.question.getItemClass(this.item);
         var labelClass = this.question.getLabelClass(this.item);
         var itemLabel = !this.hideCaption ? external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("span", { className: this.cssClasses.controlLabel }, this.renderLocString(this.item.locText, this.textStyle)) : null;
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: itemClass, role: "presentation" },
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: itemClass, role: "presentation", ref: this.rootRef },
             external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("label", { className: labelClass },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", name: this.question.name + this.item.id, value: this.item.value, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, checked: isChecked, onChange: this.handleOnChange, required: this.question.hasRequiredError() }),
                 this.cssClasses.materialDecorator ?
@@ -82435,6 +82764,18 @@ var reactquestion_checkbox_SurveyQuestionCheckboxItem = /** @class */ (function
                 itemLabel),
             otherItem));
     };
+    SurveyQuestionCheckboxItem.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(this.rootRef.current);
+        }
+    };
+    SurveyQuestionCheckboxItem.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(undefined);
+        }
+    };
     return SurveyQuestionCheckboxItem;
 }(ReactSurveyElement));
 
@@ -82959,10 +83300,10 @@ var tagbox_filter_TagboxFilterString = /** @class */ (function (_super) {
         this.model.inputKeyHandler(e);
     };
     TagboxFilterString.prototype.onBlur = function (e) {
-        this.model.onBlur(e);
+        this.question.onBlur(e);
     };
     TagboxFilterString.prototype.onFocus = function (e) {
-        this.model.onFocus(e);
+        this.question.onFocus(e);
     };
     TagboxFilterString.prototype.getStateElement = function () {
         return this.model;
@@ -84177,7 +84518,7 @@ var reactquestion_radiogroup_SurveyQuestionRadiogroup = /** @class */ (function
         var _this = this;
         if (this.question.hasFootItems) {
             return this.question.footItems.map(function (item, ii) {
-                return _this.renderItem("item_f" + ii, item, false, _this.question.cssClasses);
+                return _this.renderItem(item, false, _this.question.cssClasses);
             });
         }
     };
@@ -84189,7 +84530,7 @@ var reactquestion_radiogroup_SurveyQuestionRadiogroup = /** @class */ (function
         var value = this.getStateValue();
         return this.question.columns.map(function (column, ci) {
             var items = column.map(function (item, ii) {
-                return _this.renderItem("item" + ci + ii, item, value, cssClasses, "" + ci + ii);
+                return _this.renderItem(item, value, cssClasses, "" + ci + ii);
             });
             return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { key: "column" + ci + _this.question.getItemsColumnKey(column), className: _this.question.getColumnClass(), role: "presentation" }, items));
         });
@@ -84206,7 +84547,7 @@ var reactquestion_radiogroup_SurveyQuestionRadiogroup = /** @class */ (function
         var value = this.getStateValue();
         for (var i = 0; i < choices.length; i++) {
             var item = choices[i];
-            var renderedItem = this.renderItem("item" + i, item, value, cssClasses, "" + i);
+            var renderedItem = this.renderItem(item, value, cssClasses, "" + i);
             items.push(renderedItem);
         }
         return items;
@@ -84222,9 +84563,9 @@ var reactquestion_radiogroup_SurveyQuestionRadiogroup = /** @class */ (function
         return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: this.question.getCommentAreaCss(true) },
             external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](SurveyQuestionOtherValueItem, { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode })));
     };
-    SurveyQuestionRadiogroup.prototype.renderItem = function (key, item, value, cssClasses, index) {
+    SurveyQuestionRadiogroup.prototype.renderItem = function (item, value, cssClasses, index) {
         var renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponent, {
-            key: key,
+            key: item.value,
             question: this.question,
             cssClasses: cssClasses,
             isDisplayMode: this.isDisplayMode,
@@ -84250,6 +84591,7 @@ var reactquestion_radiogroup_SurveyQuestionRadioItem = /** @class */ (function (
     reactquestion_radiogroup_extends(SurveyQuestionRadioItem, _super);
     function SurveyQuestionRadioItem(props) {
         var _this = _super.call(this, props) || this;
+        _this.rootRef = external_root_React_commonjs2_react_commonjs_react_amd_react_["createRef"]();
         _this.handleOnChange = _this.handleOnChange.bind(_this);
         _this.handleOnMouseDown = _this.handleOnMouseDown.bind(_this);
         return _this;
@@ -84318,12 +84660,23 @@ var reactquestion_radiogroup_SurveyQuestionRadioItem = /** @class */ (function (
     SurveyQuestionRadioItem.prototype.canRender = function () {
         return !!this.question && !!this.item;
     };
+    SurveyQuestionRadioItem.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (prevProps.item !== this.props.item && !this.question.isDesignMode) {
+            if (this.props.item) {
+                this.props.item.setRootElement(this.rootRef.current);
+            }
+            if (prevProps.item) {
+                prevProps.item.setRootElement(undefined);
+            }
+        }
+    };
     SurveyQuestionRadioItem.prototype.renderElement = function () {
         var itemClass = this.question.getItemClass(this.item);
         var labelClass = this.question.getLabelClass(this.item);
         var controlLabelClass = this.question.getControlLabelClass(this.item);
         var itemLabel = !this.hideCaption ? external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("span", { className: controlLabelClass }, this.renderLocString(this.item.locText, this.textStyle)) : null;
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: itemClass, role: "presentation" },
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: itemClass, role: "presentation", ref: this.rootRef },
             external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: labelClass },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("input", { "aria-errormessage": this.question.ariaErrormessage, className: this.cssClasses.itemControl, id: this.question.getItemId(this.item), type: "radio", name: this.question.questionName, checked: this.isChecked, value: this.item.value, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, onChange: this.handleOnChange }),
                 this.cssClasses.materialDecorator ?
@@ -84334,6 +84687,18 @@ var reactquestion_radiogroup_SurveyQuestionRadioItem = /** @class */ (function (
                     null,
                 itemLabel)));
     };
+    SurveyQuestionRadioItem.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(this.rootRef.current);
+        }
+    };
+    SurveyQuestionRadioItem.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(undefined);
+        }
+    };
     return SurveyQuestionRadioItem;
 }(ReactSurveyElement));
 
@@ -84791,6 +85156,9 @@ var drag_drop_icon_SurveyQuestionMatrixDynamicDragDropIcon = /** @class */ (func
         configurable: true
     });
     SurveyQuestionMatrixDynamicDragDropIcon.prototype.renderElement = function () {
+        return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", null, this.renderIcon());
+    };
+    SurveyQuestionMatrixDynamicDragDropIcon.prototype.renderIcon = function () {
         if (this.question.iconDragElement) {
             return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("svg", { className: this.question.cssClasses.dragElementDecorator },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("use", { xlinkHref: this.question.iconDragElement })));
@@ -85421,7 +85789,7 @@ var paneldynamic_add_btn_SurveyQuestionPanelDynamicAddButton = /** @class */ (fu
         if (!this.question.canAddPanel)
             return null;
         var btnText = this.renderLocString(this.question.locPanelAddText);
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("button", { type: "button", className: this.question.getAddButtonCss(), onClick: this.handleClick },
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("button", { type: "button", id: this.question.addButtonId, className: this.question.getAddButtonCss(), onClick: this.handleClick },
             external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { className: this.question.cssClasses.buttonAddText }, btnText)));
     };
     return SurveyQuestionPanelDynamicAddButton;
@@ -85993,7 +86361,7 @@ var list_item_ListItem = /** @class */ (function (_super) {
             paddingInlineStart: this.model.getItemIndent(this.item)
         };
         var className = this.model.getItemClass(this.item);
-        var itemContent = this.item.component || "sv-list-item-content";
+        var itemContent = this.item.component || this.model.itemComponent;
         var newElement = ReactElementFactory.Instance.createElement(itemContent, { item: this.item, key: this.item.id, model: this.model });
         var contentWrap = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { style: contentWrapStyle, className: this.model.cssClasses.itemBody, title: this.item.locTitle.calculatedText, onMouseOver: function (event) { _this.model.onItemHover(_this.item); }, onMouseLeave: function (event) { _this.model.onItemLeave(_this.item); } }, newElement);
         var separator = this.item.needSeparator ? external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: this.model.cssClasses.itemSeparator }) : null;