survey-react 1.11.14 → 1.12.2

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.14
+ * surveyjs - Survey JavaScript library v1.12.2
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -962,9 +962,9 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 
 /***/ "./src/entries/react.ts":
 /*!********************************************!*\
-  !*** ./src/entries/react.ts + 280 modules ***!
+  !*** ./src/entries/react.ts + 282 modules ***!
   \********************************************/
-/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, StylesManager, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, ListItemContent, ListItemGroup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
+/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, TextAreaModel, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, StylesManager, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, ListItemContent, ListItemGroup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
 /*! ModuleConcatenation bailout: Cannot concat with external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"} (<- Module is not an ECMAScript module) */
 /*! ModuleConcatenation bailout: Cannot concat with external {"root":"ReactDOM","commonjs2":"react-dom","commonjs":"react-dom","amd":"react-dom"} (<- Module is not an ECMAScript module) */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -1166,6 +1166,7 @@ __webpack_require__.d(__webpack_exports__, "InputMaskNumeric", function() { retu
 __webpack_require__.d(__webpack_exports__, "InputMaskDateTime", function() { return /* reexport */ mask_datetime_InputMaskDateTime; });
 __webpack_require__.d(__webpack_exports__, "InputMaskCurrency", function() { return /* reexport */ mask_currency_InputMaskCurrency; });
 __webpack_require__.d(__webpack_exports__, "CssClassBuilder", function() { return /* reexport */ CssClassBuilder; });
+__webpack_require__.d(__webpack_exports__, "TextAreaModel", function() { return /* reexport */ text_area_TextAreaModel; });
 __webpack_require__.d(__webpack_exports__, "surveyCss", function() { return /* reexport */ surveyCss; });
 __webpack_require__.d(__webpack_exports__, "defaultV2Css", function() { return /* reexport */ defaultV2Css; });
 __webpack_require__.d(__webpack_exports__, "defaultV2ThemeName", function() { return /* reexport */ defaultV2ThemeName; });
@@ -1891,7 +1892,7 @@ var helpers_Helpers = /** @class */ (function () {
                 return Helpers.convertDateTimeToString(val);
             return Helpers.convertDateToString(val);
         }
-        return val;
+        return this.getUnbindValue(val);
     };
     Helpers.compareVerions = function (ver1, ver2) {
         if (!ver1 && !ver2)
@@ -1914,6 +1915,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;
 }());
 
@@ -9665,6 +9678,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);
@@ -10180,6 +10195,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", {
@@ -10191,7 +10208,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;
@@ -10306,6 +10323,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;
@@ -10323,8 +10344,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") {
@@ -10363,16 +10385,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)
@@ -10416,16 +10428,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();
@@ -12337,7 +12341,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);
@@ -12356,7 +12359,6 @@ var animation_AnimationUtils = /** @class */ (function () {
             }, this.getAnimationDuration(element) + 10);
         }
         else {
-            this.afterAnimationRun(element, options);
             callback(true);
         }
     };
@@ -12391,6 +12393,7 @@ var animation_AnimationUtils = /** @class */ (function () {
                 element.classList.remove(cssClass);
             });
         }
+        this.afterAnimationRun(element, options);
     };
     AnimationUtils.prototype.onNextRender = function (callback, isCancel) {
         var _this = this;
@@ -12513,7 +12516,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);
             }
@@ -12546,8 +12549,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 () {
@@ -12568,6 +12576,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();
     };
@@ -12613,7 +12624,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)) {
@@ -12887,7 +12899,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({
@@ -13477,6 +13489,14 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyElement.prototype, "cssRequiredText", {
+        get: function () {
+            var css = this.cssClasses;
+            return css.requiredText || (css.panel && css.panel.requiredText);
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyElement.prototype.calcCssClasses = function (css) { return undefined; };
     SurveyElement.prototype.updateElementCssCore = function (cssClasses) { };
     Object.defineProperty(SurveyElement.prototype, "cssError", {
@@ -14056,17 +14076,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);
@@ -14076,8 +14097,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
                 };
@@ -14909,10 +14929,142 @@ function navigateToUrl(url) {
 function wrapUrlForBackgroundImage(url) {
     return !!url ? ["url(", url, ")"].join("") : "";
 }
+// new-name: old-name
+var renamedIcons = {
+    "flip-24x24": "changecamera",
+    "toolbox-file-24x24": "choosefile",
+    "clear-24x24": "clear",
+    "close-24x24": "closecamera",
+    "file-72x72": "defaultfile",
+    "chevronleft-16x16": "left",
+    "plus-32x32": "modernbooleancheckchecked",
+    "minus-32x32": "modernbooleancheckunchecked",
+    "more-24x24": "more",
+    "navmenu-24x24": "navmenu_24x24",
+    "error-24x24": "removefile",
+    "camera-32x32": "takepicture",
+    "camera-24x24": "takepicture_24x24",
+    "pg-quiz-24x24": "timercircle",
+    "check-16x16": "v2check",
+    "check-24x24": "v2check_24x24",
+    "restoredown-16x16": "back-to-panel_16x16",
+    "clear-16x16": "clear_16x16",
+    "close-16x16": "close_16x16",
+    "collapsedetails-16x16": "collapsedetail",
+    "expanddetails-16x16": "expanddetail",
+    "maximize-16x16": "full-screen_16x16",
+    "loading-48x48": "loading",
+    "minimize-16x16": "minimize_16x16",
+    "chevronright-16x16": "next_16x16",
+    "noimage-48x48": "no-image",
+    "reorder-24x24": "ranking-arrows",
+    "fullsize-16x16": "restore_16x16",
+    "search-24x24": "search",
+    "smiley-rate5-24x24": "average",
+    "smiley-rate9-24x24": "excellent",
+    "smiley-rate7-24x24": "good",
+    "smiley-rate6-24x24": "normal",
+    "smiley-rate4-24x24": "not-good",
+    "smiley-rate10-24x24": "perfect",
+    "smiley-rate3-24x24": "poor",
+    "smiley-rate1-24x24": "terrible",
+    "smiley-rate8-24x24": "very-good",
+    "smiley-rate2-24x24": "very-poor",
+    "add-16x16": "add_16x16",
+    "add-24x24": "add_24x24",
+    "warning-24x24": "alert_24x24",
+    "apply-24x24": "apply",
+    "arrowdown-24x24": "arrow-down",
+    "arrowleft-24x24": "arrow-left",
+    "arrowleft-16x16": "arrow-left_16x16",
+    "arrowright-24x24": "arrow-right",
+    "arrowright-16x16": "arrow-right_16x16",
+    "arrowup-24x24": "arrow-up",
+    "toolbox-boolean-24x24": "boolean",
+    "speechbubble-16x16": "change-question-type_16x16",
+    "toolbox-checkbox-24x24": "checkbox",
+    "minusbox-16x16": "collapse-detail_16x16",
+    "collapse-pg-24x24": "collapse-panel",
+    "collapse-16x16": "collapse_16x16",
+    "dropper-16x16": "color-picker",
+    "toolbox-longtext-24x24": "comment",
+    "wrench-24x24": "config",
+    "copy-24x24": "copy",
+    "toolbox-customquestion-24x24": "default",
+    "delete-16x16": "delete_16x16",
+    "delete-24x24": "delete_24x24",
+    "hidehint-24x24": "description-hide",
+    "hint-24x24": "description",
+    "desktop-24x24": "device-desktop",
+    "phone-24x24": "device-phone",
+    "rotate-24x24": "device-rotate",
+    "tablet-24x24": "device-tablet",
+    "download-24x24": "download",
+    "drag-24x24": "drag-area-indicator",
+    "draghorizontal-24x16": "drag-area-indicator_24x16",
+    "chevrondown-24x24": "drop-down-arrow",
+    "chevrondown-16x16": "drop-down-arrow_16x16",
+    "toolbox-dropdown-24x24": "dropdown",
+    "copy-16x16": "duplicate_16x16",
+    "edit-24x24": "edit",
+    "edit-16x16": "edit_16x16",
+    "finishedit-24x24": "editing-finish",
+    "error-16x16": "error",
+    "plusbox-16x16": "expand-detail_16x16",
+    "expand-pg-24x24": "expand-panel",
+    "expand-16x16": "expand_16x16",
+    "toolbox-expression-24x24": "expression",
+    "textedit-24x24": "fast-entry",
+    "fix-24x24": "fix",
+    "toolbox-html-24x24": "html",
+    "toolbox-image-24x24": "image",
+    "toolbox-imagepicker-24x24": "imagepicker",
+    "import-24x24": "import",
+    "invisible-24x24": "invisible-items",
+    "language-24x24": "language",
+    "folder-24x24": "load",
+    "collapsepage-16x16": "logic-collapse",
+    "expandpage-16x16": "logic-expand",
+    "image-48x48": "logo",
+    "toolbox-matrix-24x24": "matrix",
+    "toolbox-multimatrix-24x24": "matrixdropdown",
+    "toolbox-dynamicmatrix-24x24": "matrixdynamic",
+    "toolbox-multipletext-24x24": "multipletext",
+    "toolbox-panel-24x24": "panel",
+    "toolbox-dynamicpanel-24x24": "paneldynamic",
+    "preview-24x24": "preview",
+    "toolbox-radiogroup-24x24": "radiogroup",
+    "toolbox-ranking-24x24": "ranking",
+    "toolbox-rating-24x24": "rating",
+    "redo-24x24": "redo",
+    "remove-16x16": "remove_16x16",
+    "required-16x16": "required",
+    "restore-24x24": "reset",
+    "save-24x24": "save",
+    "selectpage-24x24": "select-page",
+    "settings-24x24": "settings",
+    "settings-16x16": "settings_16x16",
+    "toolbox-signature-24x24": "signaturepad",
+    "switchon-16x16": "switch-active_16x16",
+    "switchoff-16x16": "switch-inactive_16x16",
+    "toolbox-tagbox-24x24": "tagbox",
+    "toolbox-singleline-24x24": "text",
+    "theme-24x24": "theme",
+    "toolbox-24x24": "toolbox",
+    "undo-24x24": "undo",
+    "visible-24x24": "visible",
+    "wand-24x24": "wizard"
+};
 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) {
@@ -15307,6 +15459,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;
 }
@@ -16444,7 +16643,9 @@ var ValidatorResult = /** @class */ (function () {
 }());
 
 /**
- * Base SurveyJS validator class.
+ * A base class for all classes that implement validators.
+ *
+ * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
  */
 var validator_SurveyValidator = /** @class */ (function (_super) {
     validator_extends(SurveyValidator, _super);
@@ -16460,6 +16661,9 @@ var validator_SurveyValidator = /** @class */ (function (_super) {
             : null;
     };
     Object.defineProperty(SurveyValidator.prototype, "text", {
+        /**
+         * An error message to display when a value fails validation.
+         */
         get: function () {
             return this.getLocalizableStringText("text");
         },
@@ -16600,7 +16804,9 @@ var ValidatorRunner = /** @class */ (function () {
 }());
 
 /**
- * Validate numeric values.
+ * A class that implements a validator for numeric values.
+ *
+ * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
  */
 var validator_NumericValidator = /** @class */ (function (_super) {
     validator_extends(NumericValidator, _super);
@@ -16649,7 +16855,9 @@ var validator_NumericValidator = /** @class */ (function (_super) {
     };
     Object.defineProperty(NumericValidator.prototype, "minValue", {
         /**
-         * The minValue property.
+         * A minimum allowed numeric value.
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("minValue");
@@ -16662,7 +16870,9 @@ var validator_NumericValidator = /** @class */ (function (_super) {
     });
     Object.defineProperty(NumericValidator.prototype, "maxValue", {
         /**
-         * The maxValue property.
+         * A maximum allowed numeric value.
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("maxValue");
@@ -16677,7 +16887,9 @@ var validator_NumericValidator = /** @class */ (function (_super) {
 }(validator_SurveyValidator));
 
 /**
- * Validate text values.
+ * A class that implements a validator for text values.
+ *
+ * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
  */
 var TextValidator = /** @class */ (function (_super) {
     validator_extends(TextValidator, _super);
@@ -16716,7 +16928,11 @@ var TextValidator = /** @class */ (function (_super) {
     };
     Object.defineProperty(TextValidator.prototype, "minLength", {
         /**
-         * The minLength property.
+         * The minimum length of a text value measured in characters.
+         *
+         * Default value: 0
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("minLength");
@@ -16729,7 +16945,11 @@ var TextValidator = /** @class */ (function (_super) {
     });
     Object.defineProperty(TextValidator.prototype, "maxLength", {
         /**
-         * The maxLength property.
+         * The maximum length of a text value measured in characters.
+         *
+         * Default value: 0 (unlimited)
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("maxLength");
@@ -16742,7 +16962,9 @@ var TextValidator = /** @class */ (function (_super) {
     });
     Object.defineProperty(TextValidator.prototype, "allowDigits", {
         /**
-         * The allowDigits property.
+         * Specifies whether a text value can include numerical digits.
+         *
+         * Default value: `true`
          */
         get: function () {
             return this.getPropertyValue("allowDigits");
@@ -16757,7 +16979,9 @@ var TextValidator = /** @class */ (function (_super) {
 }(validator_SurveyValidator));
 
 /**
- * Validates the number of answers.
+ * A class that implements answer count validation in the question types that can have multiple values (for instance, [Checkboxes](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model)).
+ *
+ * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
  */
 var AnswerCountValidator = /** @class */ (function (_super) {
     validator_extends(AnswerCountValidator, _super);
@@ -16794,7 +17018,9 @@ var AnswerCountValidator = /** @class */ (function (_super) {
     };
     Object.defineProperty(AnswerCountValidator.prototype, "minCount", {
         /**
-         * The minCount property.
+         * A minimum number of selected answers.
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("minCount");
@@ -16807,7 +17033,9 @@ var AnswerCountValidator = /** @class */ (function (_super) {
     });
     Object.defineProperty(AnswerCountValidator.prototype, "maxCount", {
         /**
-         * The maxCount property.
+         * A maximum number of selected answers.
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("maxCount");
@@ -16822,7 +17050,7 @@ var AnswerCountValidator = /** @class */ (function (_super) {
 }(validator_SurveyValidator));
 
 /**
- * Use it to validate the text by regular expressions.
+ * A class that implements validation using regular expressions.
  *
  * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
  */
@@ -16860,7 +17088,9 @@ var RegexValidator = /** @class */ (function (_super) {
     };
     Object.defineProperty(RegexValidator.prototype, "regex", {
         /**
-         * The regex property.
+         * A regular expression used to validate values.
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("regex");
@@ -16871,24 +17101,39 @@ var RegexValidator = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(RegexValidator.prototype, "insensitive", {
+    Object.defineProperty(RegexValidator.prototype, "caseInsensitive", {
+        /**
+         * Specifies whether uppercase and lowercase letters must be treated as distinct or equivalent when validating values.
+         *
+         * Default value: `false` (uppercase and lowercase letters are treated as distinct)
+         */
         get: function () {
-            return this.getPropertyValue("insensitive");
+            return this.getPropertyValue("caseInsensitive");
         },
         set: function (val) {
-            this.setPropertyValue("insensitive", val);
+            this.setPropertyValue("caseInsensitive", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RegexValidator.prototype, "insensitive", {
+        get: function () { return this.caseInsensitive; },
+        set: function (val) {
+            this.caseInsensitive = val;
         },
         enumerable: false,
         configurable: true
     });
     RegexValidator.prototype.createRegExp = function () {
-        return new RegExp(this.regex, this.insensitive ? "i" : "");
+        return new RegExp(this.regex, this.caseInsensitive ? "i" : "");
     };
     return RegexValidator;
 }(validator_SurveyValidator));
 
 /**
- * Validate e-mail address in the text input
+ * A class that implements a validator for e-mail addresses.
+ *
+ * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
  */
 var EmailValidator = /** @class */ (function (_super) {
     validator_extends(EmailValidator, _super);
@@ -16917,7 +17162,9 @@ var EmailValidator = /** @class */ (function (_super) {
 }(validator_SurveyValidator));
 
 /**
- * Show error if expression returns false
+ * A class that implements validation using [expressions](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions).
+ *
+ * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
  */
 var validator_ExpressionValidator = /** @class */ (function (_super) {
     validator_extends(ExpressionValidator, _super);
@@ -16996,7 +17243,9 @@ var validator_ExpressionValidator = /** @class */ (function (_super) {
     };
     Object.defineProperty(ExpressionValidator.prototype, "expression", {
         /**
-         * The expression property.
+         * A Boolean [expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions). If it evaluates to `false`, validation fails.
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("expression");
@@ -17024,7 +17273,7 @@ Serializer.addClass("textvalidator", [{ name: "minLength:number", default: 0 },
 Serializer.addClass("answercountvalidator", ["minCount:number", "maxCount:number"], function () {
     return new AnswerCountValidator();
 }, "surveyvalidator");
-Serializer.addClass("regexvalidator", ["regex", { name: "insensitive:boolean", visible: false }], function () {
+Serializer.addClass("regexvalidator", ["regex", { name: "caseInsensitive:boolean", alternativeName: "insensitive" }], function () {
     return new RegexValidator();
 }, "surveyvalidator");
 Serializer.addClass("emailvalidator", [], function () {
@@ -17254,6 +17503,188 @@ var RendererFactory = /** @class */ (function () {
 }());
 
 
+// CONCATENATED MODULE: ./packages/survey-core/src/utils/text-area.ts
+
+var text_area_TextAreaModel = /** @class */ (function () {
+    function TextAreaModel(options) {
+        var _this = this;
+        this.options = options;
+        this.onPropertyChangedCallback = function () {
+            if (_this.element) {
+                _this.element.value = _this.getTextValue();
+                if (_this.autoGrow) {
+                    increaseHeightByContent(_this.element);
+                }
+            }
+        };
+        this.question.registerFunctionOnPropertyValueChanged(this.options.propertyName, this.onPropertyChangedCallback, "__textarea");
+    }
+    TextAreaModel.prototype.setElement = function (element) {
+        if (!!element) {
+            this.element = element;
+        }
+    };
+    TextAreaModel.prototype.getTextValue = function () {
+        if (!!this.options.getTextValue)
+            return this.options.getTextValue();
+        return "";
+    };
+    TextAreaModel.prototype.onTextAreaChange = function (event) {
+        if (!!this.options.onTextAreaChange)
+            this.options.onTextAreaChange(event);
+    };
+    TextAreaModel.prototype.onTextAreaInput = function (event) {
+        if (!!this.options.onTextAreaInput)
+            this.options.onTextAreaInput(event);
+        if (this.element && this.autoGrow) {
+            increaseHeightByContent(this.element);
+        }
+    };
+    TextAreaModel.prototype.onTextAreaKeyDown = function (event) {
+        if (!!this.options.onTextAreaKeyDown)
+            this.options.onTextAreaKeyDown(event);
+    };
+    TextAreaModel.prototype.onTextAreaBlur = function (event) {
+        this.onTextAreaChange(event);
+        if (!!this.options.onTextAreaBlur)
+            this.options.onTextAreaBlur(event);
+    };
+    TextAreaModel.prototype.onTextAreaFocus = function (event) {
+        if (!!this.options.onTextAreaFocus)
+            this.options.onTextAreaFocus(event);
+    };
+    Object.defineProperty(TextAreaModel.prototype, "question", {
+        get: function () {
+            return this.options.question;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "id", {
+        get: function () {
+            return this.options.id();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "placeholder", {
+        get: function () {
+            return this.options.placeholder();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "className", {
+        get: function () {
+            return this.options.className();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "maxLength", {
+        get: function () {
+            if (this.options.maxLength)
+                return this.options.maxLength();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "autoGrow", {
+        get: function () {
+            if (this.options.autoGrow)
+                return this.options.autoGrow();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "rows", {
+        get: function () {
+            if (this.options.rows)
+                return this.options.rows();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "cols", {
+        get: function () {
+            if (this.options.cols)
+                return this.options.cols();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "isDisabledAttr", {
+        get: function () {
+            return this.options.isDisabledAttr();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "isReadOnlyAttr", {
+        get: function () {
+            if (this.options.isReadOnlyAttr)
+                return this.options.isReadOnlyAttr();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "ariaRequired", {
+        get: function () {
+            if (this.options.ariaRequired)
+                return this.options.ariaRequired();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "ariaLabel", {
+        get: function () {
+            if (this.options.ariaLabel)
+                return this.options.ariaLabel();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "ariaInvalid", {
+        get: function () {
+            if (this.options.ariaInvalid)
+                return this.options.ariaInvalid();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "ariaLabelledBy", {
+        get: function () {
+            if (this.options.ariaLabelledBy)
+                return this.options.ariaLabelledBy();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "ariaDescribedBy", {
+        get: function () {
+            if (this.options.ariaDescribedBy)
+                return this.options.ariaDescribedBy();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaModel.prototype, "ariaErrormessage", {
+        get: function () {
+            if (this.options.ariaErrormessage)
+                return this.options.ariaErrormessage();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TextAreaModel.prototype.dispose = function () {
+        if (this.question) {
+            this.question.unRegisterFunctionOnPropertyValueChanged(this.options.propertyName, "__textarea");
+        }
+    };
+    return TextAreaModel;
+}());
+
+
 // CONCATENATED MODULE: ./packages/survey-core/src/question.ts
 var question_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -17291,6 +17722,7 @@ var question_decorate = (undefined && undefined.__decorate) || function (decorat
 
 
 
+
 var TriggerExpressionInfo = /** @class */ (function () {
     function TriggerExpressionInfo(name, canRun, doComplete) {
         this.name = name;
@@ -17333,6 +17765,7 @@ var question_Question = /** @class */ (function (_super) {
         _this.createNewArray("validators", function (validator) {
             validator.errorOwner = _this;
         });
+        _this.commentTextAreaModel = new text_area_TextAreaModel(_this.getCommentTextAreaOptions());
         _this.addExpressionProperty("visibleIf", function (obj, res) { _this.visible = res === true; }, function (obj) { return !_this.areInvisibleElementsShowing; });
         _this.addExpressionProperty("enableIf", function (obj, res) { _this.readOnly = res === false; });
         _this.addExpressionProperty("requiredIf", function (obj, res) { _this.isRequired = res === true; });
@@ -17373,6 +17806,26 @@ var question_Question = /** @class */ (function (_super) {
     Question.getQuestionId = function () {
         return "sq_" + Question.questionCounter++;
     };
+    Question.prototype.getCommentTextAreaOptions = function () {
+        var _this = this;
+        var options = {
+            question: this,
+            id: function () { return _this.commentId; },
+            propertyName: "comment",
+            className: function () { return _this.cssClasses.comment; },
+            placeholder: function () { return _this.renderedCommentPlaceholder; },
+            isDisabledAttr: function () { return _this.isInputReadOnly || false; },
+            rows: function () { return _this.commentAreaRows; },
+            autoGrow: function () { return _this.autoGrowComment; },
+            maxLength: function () { return _this.getOthersMaxLength(); },
+            ariaRequired: function () { return _this.a11y_input_ariaRequired; },
+            ariaLabel: function () { return _this.a11y_input_ariaLabel; },
+            getTextValue: function () { return _this.comment; },
+            onTextAreaChange: function (e) { _this.onCommentChange(e); },
+            onTextAreaInput: function (e) { _this.onCommentInput(e); },
+        };
+        return options;
+    };
     Question.prototype.isReadOnlyRenderDiv = function () {
         return this.isReadOnly && settings.readOnly.commentRenderMode === "div";
     };
@@ -18295,13 +18748,6 @@ var question_Question = /** @class */ (function (_super) {
         configurable: true
     });
     Question.prototype.updateCommentElements = function () {
-        if (!this.autoGrowComment || !Array.isArray(this.commentElements))
-            return;
-        for (var i = 0; i < this.commentElements.length; i++) {
-            var el = this.commentElements[i];
-            if (el)
-                increaseHeightByContent(el);
-        }
     };
     Question.prototype.onCommentInput = function (event) {
         if (this.isInputTextUpdate) {
@@ -19398,11 +19844,11 @@ var question_Question = /** @class */ (function (_super) {
     });
     Object.defineProperty(Question.prototype, "resetValueIf", {
         /**
-         * A Boolean expression. If it evaluates to `true`, the question value is reset to [default](#defaultValue).
+         * A Boolean [expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions). If it evaluates to `true`, the question value is reset to [default](#defaultValue).
          *
          * A survey parses and runs all expressions on startup. If any values used in the expression change, the survey re-evaluates it.
          *
-         * [Expressions](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/trigger-setvalue/ (linkStyle))
          * @see setValueIf
          */
         get: function () {
@@ -19416,11 +19862,11 @@ var question_Question = /** @class */ (function (_super) {
     });
     Object.defineProperty(Question.prototype, "setValueIf", {
         /**
-         * A Boolean expression. If it evaluates to `true`, the question value is set to a value calculated using the [`setValueExpression`](#setValueExpression).
+         * A Boolean [expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions). If it evaluates to `true`, the question value is set to a value calculated using the [`setValueExpression`](#setValueExpression).
          *
          * A survey parses and runs all expressions on startup. If any values used in the expression change, the survey re-evaluates it.
          *
-         * [Expressions](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/trigger-setvalue/ (linkStyle))
          * @see resetValueIf
          */
         get: function () {
@@ -19434,11 +19880,11 @@ var question_Question = /** @class */ (function (_super) {
     });
     Object.defineProperty(Question.prototype, "setValueExpression", {
         /**
-         * An expression used to calculate the question value.
+         * An [expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions) used to calculate the question value.
          *
          * You can use `setValueExpression` as a standalone property or in conjunction with the [`setValueIf`](#setValueIf) expression, in which case the calculated question value applies only when `setValueIf` evaluates to `true`.
          *
-         * [Expressions](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/trigger-setvalue/ (linkStyle))
          * @see defaultValueExpression
          * @see resetValueIf
          */
@@ -19834,7 +20280,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);
@@ -19909,18 +20355,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();
@@ -19946,7 +20392,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);
@@ -21172,6 +21618,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;
     };
@@ -21943,52 +22395,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", {
         /**
@@ -22145,16 +22577,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;
@@ -22400,7 +22823,6 @@ var martixBase_decorate = (undefined && undefined.__decorate) || function (decor
 
 
 
-
 /**
  * A base class for all matrix question types.
  */
@@ -22411,7 +22833,6 @@ var martixBase_QuestionMatrixBaseModel = /** @class */ (function (_super) {
         _this.generatedVisibleRows = null;
         _this.generatedTotalRow = null;
         _this.filteredRows = null;
-        _this.filteredColumns = null;
         _this.columns = _this.createColumnValues();
         _this.rows = _this.createItemValues("rows");
         return _this;
@@ -22471,11 +22892,19 @@ var martixBase_QuestionMatrixBaseModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionMatrixBaseModel.prototype, "visibleColumns", {
         get: function () {
-            return !!this.filteredColumns ? this.filteredColumns : this.columns;
+            var _this = this;
+            var res = [];
+            this.columns.forEach(function (col) { if (_this.isColumnVisible(col)) {
+                res.push(col);
+            } });
+            return res;
         },
         enumerable: false,
         configurable: true
     });
+    QuestionMatrixBaseModel.prototype.isColumnVisible = function (column) {
+        return column.isVisible;
+    };
     Object.defineProperty(QuestionMatrixBaseModel.prototype, "rows", {
         /**
          * An array of matrix rows.
@@ -22490,7 +22919,6 @@ var martixBase_QuestionMatrixBaseModel = /** @class */ (function (_super) {
         set: function (newValue) {
             var newRows = this.processRowsOnSet(newValue);
             this.setPropertyValue("rows", newRows);
-            this.filterItems();
         },
         enumerable: false,
         configurable: true
@@ -22529,7 +22957,9 @@ var martixBase_QuestionMatrixBaseModel = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.setPropertyValue("rowsVisibleIf", val);
-            this.filterItems();
+            if (!this.isLoadingFromJsonValue) {
+                this.runCondition(this.getDataFilteredValues(), this.getDataFilteredProperties());
+            }
         },
         enumerable: false,
         configurable: true
@@ -22550,7 +22980,9 @@ var martixBase_QuestionMatrixBaseModel = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.setPropertyValue("columnsVisibleIf", val);
-            this.filterItems();
+            if (!this.isLoadingFromJson) {
+                this.runCondition(this.getDataFilteredValues(), this.getDataFilteredProperties());
+            }
         },
         enumerable: false,
         configurable: true
@@ -22559,15 +22991,6 @@ var martixBase_QuestionMatrixBaseModel = /** @class */ (function (_super) {
         _super.prototype.runCondition.call(this, values, properties);
         this.runItemsCondition(values, properties);
     };
-    QuestionMatrixBaseModel.prototype.filterItems = function () {
-        if (this.areInvisibleElementsShowing) {
-            this.onRowsChanged();
-            return false;
-        }
-        if (this.isLoadingFromJson || !this.data)
-            return false;
-        return this.runItemsCondition(this.getDataFilteredValues(), this.getDataFilteredProperties());
-    };
     QuestionMatrixBaseModel.prototype.onColumnsChanged = function () { };
     QuestionMatrixBaseModel.prototype.onRowsChanged = function () {
         this.updateVisibilityBasedOnRows();
@@ -22582,7 +23005,7 @@ var martixBase_QuestionMatrixBaseModel = /** @class */ (function (_super) {
         var res = _super.prototype.isVisibleCore.call(this);
         if (!res || !this.hideIfRowsEmpty)
             return res;
-        return this.rows.length > 0 && (!this.filteredRows || this.filteredRows.length > 0);
+        return this.visibleRows.length > 0;
     };
     QuestionMatrixBaseModel.prototype.shouldRunColumnExpression = function () {
         return !this.survey || !this.survey.areInvisibleElementsShowing;
@@ -22591,22 +23014,12 @@ var martixBase_QuestionMatrixBaseModel = /** @class */ (function (_super) {
         return true;
     };
     QuestionMatrixBaseModel.prototype.runItemsCondition = function (values, properties) {
-        var oldVisibleRows = null;
-        if (!!this.filteredRows && !helpers_Helpers.isValueEmpty(this.defaultValue)) {
-            oldVisibleRows = [];
-            for (var i = 0; i < this.filteredRows.length; i++) {
-                oldVisibleRows.push(this.filteredRows[i]);
-            }
-        }
         var hasChanges = this.hasRowsAsItems() && this.runConditionsForRows(values, properties);
         var hasColumnsChanged = this.runConditionsForColumns(values, properties);
         hasChanges = hasColumnsChanged || hasChanges;
         if (hasChanges) {
-            if (this.isClearValueOnHidden && (!!this.filteredColumns || !!this.filteredRows)) {
-                this.clearIncorrectValues();
-            }
-            if (!!oldVisibleRows) {
-                this.restoreNewVisibleRowsValues(oldVisibleRows);
+            if (this.isClearValueOnHidden && hasColumnsChanged) {
+                this.clearInvisibleColumnValues();
             }
             this.clearGeneratedRows();
             if (hasColumnsChanged) {
@@ -22614,16 +23027,15 @@ var martixBase_QuestionMatrixBaseModel = /** @class */ (function (_super) {
             }
             this.onRowsChanged();
         }
-        return hasChanges;
     };
+    QuestionMatrixBaseModel.prototype.isRowsFiltered = function () { return !!this.filteredRows; };
     QuestionMatrixBaseModel.prototype.clearGeneratedRows = function () {
         this.generatedVisibleRows = null;
     };
+    QuestionMatrixBaseModel.prototype.createRowsVisibleIfRunner = function () { return null; };
     QuestionMatrixBaseModel.prototype.runConditionsForRows = function (values, properties) {
         var showInvisibile = !!this.survey && this.survey.areInvisibleElementsShowing;
-        var runner = !showInvisibile && !!this.rowsVisibleIf
-            ? new ConditionRunner(this.rowsVisibleIf)
-            : null;
+        var runner = !showInvisibile ? this.createRowsVisibleIfRunner() : null;
         this.filteredRows = [];
         var hasChanged = itemvalue_ItemValue.runConditionsForItems(this.rows, this.filteredRows, runner, values, properties, !showInvisibile);
         itemvalue_ItemValue.runEnabledConditionsForItems(this.rows, undefined, values, properties);
@@ -22634,73 +23046,11 @@ var martixBase_QuestionMatrixBaseModel = /** @class */ (function (_super) {
     };
     QuestionMatrixBaseModel.prototype.runConditionsForColumns = function (values, properties) {
         var useColumnsExpression = !!this.survey && !this.survey.areInvisibleElementsShowing;
-        var runner = useColumnsExpression && !!this.columnsVisibleIf
-            ? new ConditionRunner(this.columnsVisibleIf)
-            : null;
-        this.filteredColumns = [];
-        var hasChanged = itemvalue_ItemValue.runConditionsForItems(this.columns, this.filteredColumns, runner, values, properties, this.shouldRunColumnExpression());
-        if (this.filteredColumns.length === this.columns.length) {
-            this.filteredColumns = null;
-        }
-        return hasChanged;
-    };
-    QuestionMatrixBaseModel.prototype.clearIncorrectValues = function () {
-        var val = this.value;
-        if (!val)
-            return;
-        var newVal = null;
-        var isChanged = false;
-        var rows = !!this.filteredRows ? this.filteredRows : this.rows;
-        var columns = !!this.filteredColumns ? this.filteredColumns : this.columns;
-        for (var key in val) {
-            if (itemvalue_ItemValue.getItemByValue(rows, key) &&
-                itemvalue_ItemValue.getItemByValue(columns, val[key])) {
-                if (newVal == null)
-                    newVal = {};
-                newVal[key] = val[key];
-            }
-            else {
-                isChanged = true;
-            }
-        }
-        if (isChanged) {
-            this.value = newVal;
-        }
-        _super.prototype.clearIncorrectValues.call(this);
-    };
-    QuestionMatrixBaseModel.prototype.clearInvisibleValuesInRows = function () {
-        if (this.isEmpty())
-            return;
-        var newData = this.getUnbindValue(this.value);
-        var rows = this.rows;
-        for (var i = 0; i < rows.length; i++) {
-            var key = rows[i].value;
-            if (!!newData[key] && !rows[i].isVisible) {
-                delete newData[key];
-            }
-        }
-        if (this.isTwoValueEquals(newData, this.value))
-            return;
-        this.value = newData;
-    };
-    QuestionMatrixBaseModel.prototype.restoreNewVisibleRowsValues = function (oldVisibleRows) {
-        var rows = !!this.filteredRows ? this.filteredRows : this.rows;
-        var val = this.defaultValue;
-        var newValue = this.getUnbindValue(this.value);
-        var isChanged = false;
-        for (var key in val) {
-            if (itemvalue_ItemValue.getItemByValue(rows, key) &&
-                !itemvalue_ItemValue.getItemByValue(oldVisibleRows, key)) {
-                if (newValue == null)
-                    newValue = {};
-                newValue[key] = val[key];
-                isChanged = true;
-            }
-        }
-        if (isChanged) {
-            this.value = newValue;
-        }
+        var runner = useColumnsExpression && !!this.columnsVisibleIf ? new ConditionRunner(this.columnsVisibleIf) : null;
+        return itemvalue_ItemValue.runConditionsForItems(this.columns, undefined, runner, values, properties, this.shouldRunColumnExpression());
     };
+    QuestionMatrixBaseModel.prototype.clearInvisibleColumnValues = function () { };
+    QuestionMatrixBaseModel.prototype.clearInvisibleValuesInRows = function () { };
     QuestionMatrixBaseModel.prototype.needResponsiveWidth = function () {
         //TODO: make it mor intelligent
         return true;
@@ -23402,8 +23752,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) {
@@ -24909,6 +25259,7 @@ var question_matrixdropdowncolumn_MatrixDropdownColumn = /** @class */ (function
         _this.colOwnerValue = null;
         _this.indexValue = -1;
         _this._hasVisibleCell = true;
+        _this.isColumnsVisibleIf = true;
         _this.previousChoicesId = undefined;
         _this.createLocalizableString("totalFormat", _this);
         _this.createLocalizableString("cellHint", _this);
@@ -25738,7 +26089,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);
@@ -25781,7 +26132,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];
                 });
@@ -25808,8 +26159,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);
         }
@@ -25993,6 +26344,7 @@ var question_matrixdropdownrendered_spreadArray = (undefined && undefined.__spre
 
 
 
+
 var question_matrixdropdownrendered_QuestionMatrixDropdownRenderedCell = /** @class */ (function () {
     function QuestionMatrixDropdownRenderedCell() {
         this.minWidth = "";
@@ -26323,9 +26675,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 {
@@ -26337,10 +26694,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 };
             }
         };
     };
@@ -26602,8 +26959,8 @@ var question_matrixdropdownrendered_QuestionMatrixDropdownRenderedTable = /** @c
             this.headerRow.cells.push(this.createHeaderCell(null));
         }
         if (this.matrix.isColumnLayoutHorizontal) {
-            for (var i = 0; i < this.matrix.visibleColumns.length; i++) {
-                var column = this.matrix.visibleColumns[i];
+            for (var i = 0; i < this.matrix.columns.length; i++) {
+                var column = this.matrix.columns[i];
                 if (!column.isColumnVisible)
                     continue;
                 if (this.matrix.IsMultiplyColumn(column)) {
@@ -27235,6 +27592,7 @@ var question_matrixdropdownbase_extends = (undefined && undefined.__extends) ||
 
 
 
+
 var question_matrixdropdownbase_MatrixDropdownCell = /** @class */ (function () {
     function MatrixDropdownCell(column, row, data) {
         this.column = column;
@@ -27404,6 +27762,7 @@ var question_matrixdropdownbase_MatrixDropdownRowModelBase = /** @class */ (func
         var _this = this;
         this.isSettingValue = false;
         this.detailPanelValue = null;
+        this.visibleValue = true;
         this.cells = [];
         this.isCreatingDetailPanel = false;
         this.data = data;
@@ -27449,6 +27808,24 @@ var question_matrixdropdownbase_MatrixDropdownRowModelBase = /** @class */ (func
     });
     MatrixDropdownRowModelBase.prototype.isRowEnabled = function () { return true; };
     MatrixDropdownRowModelBase.prototype.isRowHasEnabledCondition = function () { return false; };
+    Object.defineProperty(MatrixDropdownRowModelBase.prototype, "isVisible", {
+        get: function () { return this.visible && this.isItemVisible(); },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MatrixDropdownRowModelBase.prototype, "visible", {
+        get: function () { return this.visibleValue; },
+        set: function (val) {
+            var _a;
+            if (this.visible !== val) {
+                this.visibleValue = val;
+                (_a = this.data) === null || _a === void 0 ? void 0 : _a.onRowVisibilityChanged(this);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MatrixDropdownRowModelBase.prototype.isItemVisible = function () { return true; };
     Object.defineProperty(MatrixDropdownRowModelBase.prototype, "value", {
         get: function () {
             var result = {};
@@ -27606,15 +27983,23 @@ var question_matrixdropdownbase_MatrixDropdownRowModelBase = /** @class */ (func
         res[MatrixDropdownRowModelBase.IndexVariableName] = rowIndex;
         res[MatrixDropdownRowModelBase.RowValueVariableName] = this.rowName;
     };
-    MatrixDropdownRowModelBase.prototype.runCondition = function (values, properties) {
+    MatrixDropdownRowModelBase.prototype.runCondition = function (values, properties, rowsVisibleIf) {
         if (!!this.data) {
-            values[MatrixDropdownRowModelBase.OwnerVariableName] = this.data.value;
+            values[MatrixDropdownRowModelBase.OwnerVariableName] = this.data.getFilteredData();
         }
         var rowIndex = this.rowIndex;
         this.applyRowVariablesToValues(values, rowIndex);
         var newProps = helpers_Helpers.createCopy(properties);
         newProps[MatrixDropdownRowModelBase.RowVariableName] = this;
         var rowValues = rowIndex > 0 ? this.data.getRowValue(this.rowIndex - 1) : this.value;
+        if (!!rowsVisibleIf) {
+            values[MatrixDropdownRowModelBase.RowVariableName] = rowValues;
+            this.setRowsVisibleIfValues(values);
+            this.visible = new ConditionRunner(rowsVisibleIf).run(values, properties);
+        }
+        else {
+            this.visible = true;
+        }
         for (var i = 0; i < this.cells.length; i++) {
             if (i > 0) {
                 mergeValues(this.value, rowValues);
@@ -27629,6 +28014,7 @@ var question_matrixdropdownbase_MatrixDropdownRowModelBase = /** @class */ (func
             this.onQuestionReadOnlyChanged();
         }
     };
+    MatrixDropdownRowModelBase.prototype.setRowsVisibleIfValues = function (values) { };
     MatrixDropdownRowModelBase.prototype.getNamesWithDefaultValues = function () {
         var res = [];
         this.questions.forEach(function (q) {
@@ -28072,12 +28458,12 @@ var question_matrixdropdownbase_MatrixDropdownTotalRowModel = /** @class */ (fun
             this.data.onTotalValueChanged();
         }
     };
-    MatrixDropdownTotalRowModel.prototype.runCondition = function (values, properties) {
+    MatrixDropdownTotalRowModel.prototype.runCondition = function (values, properties, rowsVisibleIf) {
         var counter = 0;
         var prevValue;
         do {
             prevValue = helpers_Helpers.getUnbindValue(this.value);
-            _super.prototype.runCondition.call(this, values, properties);
+            _super.prototype.runCondition.call(this, values, properties, "");
             counter++;
         } while (!helpers_Helpers.isTwoValueEquals(prevValue, this.value) && counter < 3);
     };
@@ -28408,6 +28794,7 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
     };
     QuestionMatrixDropdownModelBase.prototype.onPointerDown = function (pointerDownEvent, row) { };
     QuestionMatrixDropdownModelBase.prototype.onRowsChanged = function () {
+        this.clearVisibleRows();
         this.resetRenderedTable();
         _super.prototype.onRowsChanged.call(this);
     };
@@ -28461,6 +28848,7 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
         this.fireCallback(this.onRenderedTableResetCallback);
     };
     QuestionMatrixDropdownModelBase.prototype.clearGeneratedRows = function () {
+        this.clearVisibleRows();
         if (!this.generatedVisibleRows)
             return;
         for (var i = 0; i < this.generatedVisibleRows.length; i++) {
@@ -28503,8 +28891,8 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
             cellQuestion: null,
             value: null,
         };
-        for (var i = 0; i < this.visibleColumns.length; i++) {
-            options.column = this.visibleColumns[i];
+        for (var i = 0; i < this.columns.length; i++) {
+            options.column = this.columns[i];
             options.columnName = options.column.name;
             var cell = row.cells[i];
             options.cell = cell;
@@ -28759,25 +29147,40 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
         return false;
     };
     QuestionMatrixDropdownModelBase.prototype.runCellsCondition = function (values, properties) {
-        if (!this.generatedVisibleRows)
-            return;
-        var newValues = this.getRowConditionValues(values);
         var rows = this.generatedVisibleRows;
-        for (var i = 0; i < rows.length; i++) {
-            rows[i].runCondition(newValues, properties);
+        if (!!rows) {
+            var newValues = this.getRowConditionValues(values);
+            for (var i = 0; i < rows.length; i++) {
+                rows[i].runCondition(newValues, properties, this.rowsVisibleIf);
+            }
         }
         this.checkColumnsVisibility();
         this.checkColumnsRenderedRequired();
     };
+    QuestionMatrixDropdownModelBase.prototype.runConditionsForColumns = function (values, properties) {
+        var _this = this;
+        this.columns.forEach(function (column) {
+            if (!_this.columnsVisibleIf) {
+                column.isColumnsVisibleIf = true;
+            }
+            else {
+                var condition = new ConditionRunner(_this.columnsVisibleIf);
+                values["item"] = column.name;
+                column.isColumnsVisibleIf = condition.run(values, properties) === true;
+            }
+        });
+        return false;
+    };
     QuestionMatrixDropdownModelBase.prototype.checkColumnsVisibility = function () {
         if (this.isDesignMode)
             return;
         var hasChanged = false;
-        for (var i = 0; i < this.visibleColumns.length; i++) {
-            var column = this.visibleColumns[i];
-            if (!column.visibleIf && !column.isFilteredMultipleColumns)
+        for (var i = 0; i < this.columns.length; i++) {
+            var column = this.columns[i];
+            var isCellsVisibilty = !!column.visibleIf || column.isFilteredMultipleColumns;
+            if (!isCellsVisibilty && !this.columnsVisibleIf && column.isColumnVisible)
                 continue;
-            hasChanged = this.isColumnVisibilityChanged(column) || hasChanged;
+            hasChanged = this.isColumnVisibilityChanged(column, isCellsVisibilty) || hasChanged;
         }
         if (hasChanged) {
             this.resetRenderedTable();
@@ -28785,9 +29188,11 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
     };
     QuestionMatrixDropdownModelBase.prototype.checkColumnsRenderedRequired = function () {
         var rows = this.generatedVisibleRows;
-        for (var i = 0; i < this.visibleColumns.length; i++) {
-            var column = this.visibleColumns[i];
-            if (!column.requiredIf)
+        if (!rows)
+            return;
+        for (var i = 0; i < this.columns.length; i++) {
+            var column = this.columns[i];
+            if (!column.requiredIf || !column.isColumnVisible)
                 continue;
             var required = rows.length > 0;
             for (var j = 0; j < rows.length; j++) {
@@ -28799,26 +29204,29 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
             column.updateIsRenderedRequired(required);
         }
     };
-    QuestionMatrixDropdownModelBase.prototype.isColumnVisibilityChanged = function (column) {
+    QuestionMatrixDropdownModelBase.prototype.isColumnVisibilityChanged = function (column, checkCellsVisiblity) {
         var curVis = column.isColumnVisible;
-        var isMultipleColumnsVisibility = column.isFilteredMultipleColumns;
+        var hasVisCell = !checkCellsVisiblity;
+        var rows = this.generatedVisibleRows;
+        var checkRows = checkCellsVisiblity && rows;
+        var isMultipleColumnsVisibility = checkRows && column.isFilteredMultipleColumns;
         var curVisibleChoices = isMultipleColumnsVisibility ? column.getVisibleChoicesInCell : [];
         var newVisibleChoices = new Array();
-        var hasVisCell = false;
-        var rows = this.generatedVisibleRows;
-        for (var i = 0; i < rows.length; i++) {
-            var cell = rows[i].cells[column.index];
-            var q = cell === null || cell === void 0 ? void 0 : cell.question;
-            if (!!q && q.isVisible) {
-                hasVisCell = true;
-                if (isMultipleColumnsVisibility) {
-                    this.updateNewVisibleChoices(q, newVisibleChoices);
+        if (checkRows) {
+            for (var i = 0; i < rows.length; i++) {
+                var cell = rows[i].cells[column.index];
+                var q = cell === null || cell === void 0 ? void 0 : cell.question;
+                if (!!q && q.isVisible) {
+                    hasVisCell = true;
+                    if (isMultipleColumnsVisibility) {
+                        this.updateNewVisibleChoices(q, newVisibleChoices);
+                    }
+                    else
+                        break;
                 }
-                else
-                    break;
             }
         }
-        column.hasVisibleCell = hasVisCell;
+        column.hasVisibleCell = hasVisCell && column.isColumnsVisibleIf;
         if (isMultipleColumnsVisibility) {
             column.setVisibleChoicesInCell(newVisibleChoices);
             if (!helpers_Helpers.isArraysEqual(curVisibleChoices, newVisibleChoices, true, false, false))
@@ -28993,20 +29401,46 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
         this.columns.push(column);
         return column;
     };
+    QuestionMatrixDropdownModelBase.prototype.clearVisibleRows = function () {
+        this.visibleRowsArray = null;
+    };
+    QuestionMatrixDropdownModelBase.prototype.isColumnVisible = function (column) {
+        return column.isColumnVisible;
+    };
     QuestionMatrixDropdownModelBase.prototype.getVisibleRows = function () {
-        var _this = this;
         if (this.isUpdateLocked)
             return null;
-        if (!this.generatedVisibleRows) {
+        if (this.isGenereatingRows)
+            return [];
+        if (!!this.visibleRowsArray)
+            return this.visibleRowsArray;
+        this.generateVisibleRowsIfNeeded();
+        this.visibleRowsArray = this.getVisibleFromGenerated(this.generatedVisibleRows);
+        return this.visibleRowsArray;
+    };
+    QuestionMatrixDropdownModelBase.prototype.generateVisibleRowsIfNeeded = function () {
+        var _this = this;
+        if (!this.isUpdateLocked && !this.generatedVisibleRows && !this.generatedVisibleRows) {
+            this.isGenereatingRows = true;
             this.generatedVisibleRows = this.generateRows();
+            this.isGenereatingRows = false;
             this.generatedVisibleRows.forEach(function (row) { return _this.onMatrixRowCreated(row); });
             if (this.data) {
                 this.runCellsCondition(this.data.getFilteredValues(), this.data.getFilteredProperties());
             }
-            this.updateValueOnRowsGeneration(this.generatedVisibleRows);
-            this.updateIsAnswered();
+            if (!!this.generatedVisibleRows) {
+                this.updateValueOnRowsGeneration(this.generatedVisibleRows);
+                this.updateIsAnswered();
+            }
         }
-        return this.generatedVisibleRows;
+    };
+    QuestionMatrixDropdownModelBase.prototype.getVisibleFromGenerated = function (rows) {
+        var res = [];
+        if (!rows)
+            return res;
+        rows.forEach(function (row) { if (row.isVisible)
+            res.push(row); });
+        return res.length === rows.length ? rows : res;
     };
     QuestionMatrixDropdownModelBase.prototype.updateValueOnRowsGeneration = function (rows) {
         var oldValue = this.createNewValue(true);
@@ -29594,7 +30028,7 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
             !this.generatedVisibleRows)
             return;
         this.isDoingonAnyValueChanged = true;
-        var rows = this.visibleRows;
+        var rows = this.generatedVisibleRows;
         for (var i = 0; i < rows.length; i++) {
             rows[i].onAnyValueChanged(name, questionName);
         }
@@ -29643,6 +30077,19 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionMatrixDropdownModelBase.prototype, "hasInvisibleRows", {
+        get: function () {
+            return !!this.visibleRowsArray && this.visibleRowsArray.length !== this.generatedVisibleRows.length;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QuestionMatrixDropdownModelBase.prototype.getFilteredData = function () {
+        if (this.isEmpty() || !this.generatedVisibleRows || !this.hasInvisibleRows)
+            return this.value;
+        return this.getFilteredDataCore();
+    };
+    QuestionMatrixDropdownModelBase.prototype.getFilteredDataCore = function () { return this.value; };
     QuestionMatrixDropdownModelBase.prototype.onRowChanging = function (row, columnName, rowValue) {
         if (!this.survey && !this.cellValueChangingCallback)
             return !!rowValue ? rowValue[columnName] : null;
@@ -29833,6 +30280,26 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
         return null;
     };
     QuestionMatrixDropdownModelBase.prototype.isMatrixReadOnly = function () { return this.isReadOnly; };
+    QuestionMatrixDropdownModelBase.prototype.onRowVisibilityChanged = function (row) {
+        this.clearVisibleRows();
+        this.resetRenderedTable();
+    };
+    QuestionMatrixDropdownModelBase.prototype.clearValueIfInvisibleCore = function (reason) {
+        _super.prototype.clearValueIfInvisibleCore.call(this, reason);
+        this.clearInvisibleValuesInRows();
+    };
+    QuestionMatrixDropdownModelBase.prototype.clearInvisibleValuesInRows = function () {
+        var _a;
+        if (this.isEmpty() || !this.isRowsFiltered)
+            return;
+        var sharedQuestions = ((_a = this.survey) === null || _a === void 0 ? void 0 : _a.questionsByValueName(this.getValueName())) || [];
+        if (sharedQuestions.length < 2) {
+            this.value = this.getFilteredData();
+        }
+    };
+    QuestionMatrixDropdownModelBase.prototype.isRowsFiltered = function () {
+        return _super.prototype.isRowsFiltered.call(this) || (this.visibleRows !== this.generatedVisibleRows);
+    };
     QuestionMatrixDropdownModelBase.prototype.getQuestionFromArray = function (name, index) {
         if (index >= this.visibleRows.length)
             return null;
@@ -29916,7 +30383,6 @@ Serializer.addClass("matrixdropdownbase", [
         visible: false,
         isLightSerializable: false,
     },
-    { name: "columnsVisibleIf", visible: false },
     {
         name: "detailPanelMode",
         choices: ["none", "underRow", "underRowSingle"],
@@ -30002,8 +30468,13 @@ var MatrixDropdownRowModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    MatrixDropdownRowModel.prototype.isItemVisible = function () { return this.item.isVisible; };
     MatrixDropdownRowModel.prototype.isRowEnabled = function () { return this.item.isEnabled; };
     MatrixDropdownRowModel.prototype.isRowHasEnabledCondition = function () { return !!this.item.enableIf; };
+    MatrixDropdownRowModel.prototype.setRowsVisibleIfValues = function (values) {
+        values["item"] = this.item.value;
+        values["choice"] = this.item.value;
+    };
     return MatrixDropdownRowModel;
 }(question_matrixdropdownbase_MatrixDropdownRowModelBase));
 
@@ -30019,11 +30490,11 @@ var question_matrixdropdown_QuestionMatrixDropdownModel = /** @class */ (functio
         _this.defaultValuesInRows = {};
         _this.createLocalizableString("totalText", _this, true);
         _this.registerPropertyChangedHandlers(["rows"], function () {
+            if (!_this.generatedVisibleRows)
+                return;
             _this.clearGeneratedRows();
             _this.resetRenderedTable();
-            if (!_this.filterItems()) {
-                _this.onRowsChanged();
-            }
+            _this.getVisibleRows();
             _this.clearIncorrectValues();
         });
         _this.registerPropertyChangedHandlers(["hideIfRowsEmpty"], function () {
@@ -30114,30 +30585,29 @@ var question_matrixdropdown_QuestionMatrixDropdownModel = /** @class */ (functio
         return helpers_Helpers.isValueObject(val, true);
     };
     QuestionMatrixDropdownModel.prototype.clearIncorrectValues = function () {
-        var val = this.value;
-        if (!val)
-            return;
-        var newVal = null;
-        var isChanged = false;
-        var rows = !!this.filteredRows ? this.filteredRows : this.rows;
-        for (var key in val) {
-            if (itemvalue_ItemValue.getItemByValue(rows, key)) {
-                if (newVal == null)
-                    newVal = {};
-                newVal[key] = val[key];
-            }
-            else {
-                isChanged = true;
+        if (!this.isEmpty()) {
+            this.getVisibleRows();
+            var newVal = {};
+            var val = this.value;
+            for (var key in val) {
+                var row = this.getRowByKey(key);
+                if (!!row && row.isVisible) {
+                    newVal[key] = val[key];
+                }
             }
-        }
-        if (isChanged) {
             this.value = newVal;
         }
         _super.prototype.clearIncorrectValues.call(this);
     };
-    QuestionMatrixDropdownModel.prototype.clearValueIfInvisibleCore = function (reason) {
-        _super.prototype.clearValueIfInvisibleCore.call(this, reason);
-        this.clearInvisibleValuesInRows();
+    QuestionMatrixDropdownModel.prototype.getRowByKey = function (val) {
+        var rows = this.generatedVisibleRows;
+        if (!rows)
+            return null;
+        for (var i = 0; i < rows.length; i++) {
+            if (rows[i].rowName === val)
+                return rows[i];
+        }
+        return null;
     };
     QuestionMatrixDropdownModel.prototype.clearGeneratedRows = function () {
         var _this = this;
@@ -30164,7 +30634,7 @@ var question_matrixdropdown_QuestionMatrixDropdownModel = /** @class */ (functio
     };
     QuestionMatrixDropdownModel.prototype.generateRows = function () {
         var result = new Array();
-        var rows = !!this.filteredRows ? this.filteredRows : this.rows;
+        var rows = this.rows;
         if (!rows || rows.length === 0)
             return result;
         var val = this.value;
@@ -30181,6 +30651,17 @@ var question_matrixdropdown_QuestionMatrixDropdownModel = /** @class */ (functio
     QuestionMatrixDropdownModel.prototype.createMatrixRow = function (item, value) {
         return new MatrixDropdownRowModel(item.value, item, this, value);
     };
+    QuestionMatrixDropdownModel.prototype.getFilteredDataCore = function () {
+        var res = {};
+        var val = this.createValueCopy();
+        this.generatedVisibleRows.forEach(function (row) {
+            var rowVal = val[row.rowName];
+            if (row.isVisible && !helpers_Helpers.isValueEmpty(rowVal)) {
+                res[row.rowName] = rowVal;
+            }
+        });
+        return res;
+    };
     QuestionMatrixDropdownModel.prototype.getSearchableItemValueKeys = function (keys) {
         keys.push("rows");
     };
@@ -30683,13 +31164,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);
@@ -31012,6 +31497,7 @@ var question_matrixdynamic_extends = (undefined && undefined.__extends) || (func
 
 
 
+
 var MatrixDynamicRowModel = /** @class */ (function (_super) {
     question_matrixdynamic_extends(MatrixDynamicRowModel, _super);
     function MatrixDynamicRowModel(index, data, value) {
@@ -31087,7 +31573,7 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
         _this.registerPropertyChangedHandlers(["hideColumnsIfEmpty", "allowAddRows"], function () {
             _this.updateShowTableAndAddRow();
         });
-        _this.registerPropertyChangedHandlers(["allowRowsDragAndDrop", "isReadOnly", "lockedRowCount"], function () { _this.clearRowsAndResetRenderedTable(); });
+        _this.registerPropertyChangedHandlers(["allowRowsDragAndDrop", "isReadOnly", "lockedRowCount"], function () { _this.resetRenderedTable(); });
         _this.dragOrClickHelper = new dragOrClickHelper_DragOrClickHelper(_this.startDragMatrixRow);
         return _this;
     }
@@ -31236,7 +31722,7 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
     };
     QuestionMatrixDynamicModel.prototype.initDataUI = function () {
         if (!this.generatedVisibleRows) {
-            this.visibleRows;
+            this.getVisibleRows();
         }
     };
     Object.defineProperty(QuestionMatrixDynamicModel.prototype, "rowCount", {
@@ -31265,6 +31751,7 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
             }
             if (this.generatedVisibleRows || prevValue == 0) {
                 if (!this.generatedVisibleRows) {
+                    this.clearGeneratedRows();
                     this.generatedVisibleRows = [];
                 }
                 this.generatedVisibleRows.splice(val);
@@ -31865,8 +32352,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));
         }
@@ -31957,6 +32444,20 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
         _super.prototype.updateValueFromSurvey.call(this, newValue, clearData);
         this.setRowCountValueFromData = false;
     };
+    QuestionMatrixDynamicModel.prototype.getFilteredDataCore = function () {
+        var res = [];
+        var val = this.createValueCopy();
+        if (!Array.isArray(val))
+            return res;
+        var rows = this.generatedVisibleRows;
+        for (var i = 0; i < rows.length && i < val.length; i++) {
+            var rowVal = val[i];
+            if (rows[i].isVisible && !helpers_Helpers.isValueEmpty(rowVal)) {
+                res.push(rowVal);
+            }
+        }
+        return res;
+    };
     QuestionMatrixDynamicModel.prototype.onBeforeValueChanged = function (val) {
         if (!val || !Array.isArray(val))
             return;
@@ -31981,7 +32482,7 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
         }
         else {
             this.clearGeneratedRows();
-            this.generatedVisibleRows = this.visibleRows;
+            this.getVisibleRows();
             this.onRowsChanged();
         }
         this.setRowCountValueFromData = false;
@@ -32057,7 +32558,6 @@ var QuestionMatrixDynamicRenderedTable = /** @class */ (function (_super) {
     return QuestionMatrixDynamicRenderedTable;
 }(question_matrixdropdownrendered_QuestionMatrixDropdownRenderedTable));
 Serializer.addClass("matrixdynamic", [
-    { name: "rowsVisibleIf:condition", visible: false },
     { name: "allowAddRows:boolean", default: true },
     { name: "allowRemoveRows:boolean", default: true },
     { name: "rowCount:number", default: 2, minValue: 0, isBindable: true },
@@ -32173,10 +32673,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",
@@ -32237,8 +32737,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",
@@ -32287,6 +32787,7 @@ var defaultV2Css = {
         emptyHeaderRoot: "sd-page__empty-header",
         title: "sd-title sd-page__title",
         description: "sd-description sd-page__description",
+        number: "sd-page__num",
         errorsContainer: "sd-page__errbox"
     },
     pageTitle: "sd-title sd-page__title",
@@ -32294,16 +32795,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",
+        contentEnter: "sd-element__content--enter",
+        contentLeave: "sd-element__content--leave",
+        enter: "sd-element-wrapper--enter",
+        leave: "sd-element-wrapper--leave",
         mobile: "sd-question--mobile",
-        fadeIn: "sd-element-wrapper--fade-in",
-        fadeOut: "sd-element-wrapper--fade-out",
         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",
@@ -32389,6 +32891,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",
@@ -32419,6 +32923,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",
@@ -32527,6 +33033,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",
@@ -32630,8 +33138,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",
@@ -32671,8 +33180,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",
@@ -32958,6 +33468,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",
@@ -33746,7 +34258,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();
@@ -34357,8 +34869,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; },
@@ -34369,16 +34881,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
                 };
             }
         };
@@ -34583,24 +35097,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
                 };
             }
         };
@@ -34878,7 +35390,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) {
@@ -34890,14 +35402,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;
@@ -35905,6 +36417,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++) {
@@ -36326,12 +36852,27 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
             return this.parent.getQuestionErrorLocation();
         return this.survey ? this.survey.questionErrorLocation : "top";
     };
+    //ITitleOwner
+    PanelModelBase.prototype.getTitleOwner = function () { return this; };
     Object.defineProperty(PanelModelBase.prototype, "no", {
-        //ITitleOwner
         get: function () { return ""; },
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(PanelModelBase.prototype, "cssTitleNumber", {
+        get: function () {
+            return this.cssClasses.panel.number;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PanelModelBase.prototype, "cssRequiredText", {
+        get: function () {
+            return this.cssClasses.panel.requiredText;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(PanelModelBase.prototype, "cssError", {
         get: function () {
             return this.getCssError(this.cssClasses);
@@ -36393,6 +36934,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) {
@@ -36496,7 +37038,6 @@ var panel_PanelModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    PanelModel.prototype.getTitleOwner = function () { return this; };
     Object.defineProperty(PanelModel.prototype, "showNumber", {
         /**
          * Specifies whether to show the panel number in the title.
@@ -36810,8 +37351,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) {
@@ -37190,11 +37739,6 @@ var page_PageModel = /** @class */ (function (_super) {
          * @see maxTimeToFinish
          */
         _this.timeSpent = 0;
-        _this.locTitle.onGetTextCallback = function (text) {
-            if (_this.canShowPageNumber() && text)
-                return _this.num + ". " + text;
-            return text;
-        };
         _this.createLocalizableString("navigationDescription", _this, true);
         _this.dragDropPageHelper = new drag_drop_page_helper_v1_DragDropPageHelperV1(_this);
         return _this;
@@ -37212,6 +37756,27 @@ var page_PageModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(PageModel.prototype, "no", {
+        get: function () {
+            return this.canShowPageNumber() ? this.num + ". " : "";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PageModel.prototype, "cssTitleNumber", {
+        get: function () {
+            return this.cssClasses.page.number;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PageModel.prototype, "cssRequiredText", {
+        get: function () {
+            return "";
+        },
+        enumerable: false,
+        configurable: true
+    });
     PageModel.prototype.canShowPageNumber = function () {
         return this.survey && this.survey.showPageNumbers;
     };
@@ -37316,7 +37881,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) {
@@ -37337,14 +37902,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);
@@ -37983,7 +38551,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
          *
          * For information on event handler parameters, refer to descriptions within the interface.
          *
-         * [Conditional Survey Logic (Triggers)](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-survey-logic-triggers (linkStyle)).
+         * [Conditional Survey Logic (Triggers)](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-survey-logic-triggers (linkStyle))
          * @see triggers
          * @see runTriggers
          */
@@ -39170,6 +39738,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;
@@ -46710,6 +47288,8 @@ 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.).
  */
@@ -46723,6 +47303,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;
@@ -46742,7 +47327,8 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         _this.registerPropertyChangedHandlers(["hideIfChoicesEmpty"], function () {
             _this.onVisibleChanged();
         });
-        _this.createNewArray("visibleChoices");
+        _this.otherTextAreaModel = new text_area_TextAreaModel(_this.getOtherTextAreaOptions());
+        _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");
@@ -46772,6 +47358,26 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionSelectBase.prototype.getOtherTextAreaOptions = function () {
+        var _this = this;
+        var options = {
+            question: this,
+            id: function () { return _this.otherId; },
+            propertyName: "otherValue",
+            className: function () { return _this.cssClasses.other; },
+            placeholder: function () { return _this.otherPlaceholder; },
+            isDisabledAttr: function () { return _this.isInputReadOnly || false; },
+            rows: function () { return _this.commentAreaRows; },
+            maxLength: function () { return _this.getOthersMaxLength(); },
+            autoGrow: function () { return _this.survey && _this.survey.autoGrowComment; },
+            ariaRequired: function () { return _this.ariaRequired || _this.a11y_input_ariaRequired; },
+            ariaLabel: function () { return _this.ariaLabel || _this.a11y_input_ariaLabel; },
+            getTextValue: function () { return _this.otherValue; },
+            onTextAreaChange: function (e) { _this.onOtherValueChange(e); },
+            onTextAreaInput: function (e) { _this.onOtherValueInput(e); },
+        };
+        return options;
+    };
     QuestionSelectBase.prototype.getType = function () {
         return "selectbase";
     };
@@ -47549,6 +48155,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.
@@ -47852,6 +48462,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 () {
@@ -48233,9 +48844,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;
@@ -48658,12 +49269,79 @@ 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]);
+            for (var i = 0; i < count; i++) {
+                if (this.renderedChoices[i]) {
+                    res.push(this.renderedChoices[i]);
+                }
+            }
             return res;
         },
         enumerable: false,
@@ -48673,9 +49351,12 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         get: function () {
             var count = (this.separateSpecialChoices || this.isDesignMode) ? this.footItemsCount : 0;
             var res = [];
-            var items = this.visibleChoices;
-            for (var i = 0; i < count; i++)
-                res.push(items[items.length - count + i]);
+            var items = this.renderedChoices;
+            for (var i = 0; i < count; i++) {
+                if (this.renderedChoices[items.length - count + i]) {
+                    res.push(this.renderedChoices[items.length - count + i]);
+                }
+            }
             return res;
         },
         enumerable: false,
@@ -48684,14 +49365,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
@@ -48714,9 +49395,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;
@@ -48902,9 +49583,11 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         return classes;
     };
     question_baseselect_decorate([
-        jsonobject_property({ onSet: function (newVal, target) {
+        jsonobject_property({
+            onSet: function (newVal, target) {
                 target.onSelectedItemValuesChangedHandler(newVal);
-            } })
+            }
+        })
     ], QuestionSelectBase.prototype, "selectedItemValues", void 0);
     question_baseselect_decorate([
         jsonobject_property()
@@ -48912,6 +49595,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));
 
@@ -49375,14 +50061,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();
@@ -49625,7 +50311,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 () {
@@ -51242,6 +51928,7 @@ var question_matrix_extends = (undefined && undefined.__extends) || (function ()
 
 
 
+
 var question_matrix_MatrixRowModel = /** @class */ (function (_super) {
     question_matrix_extends(MatrixRowModel, _super);
     function MatrixRowModel(item, fullName, data, value) {
@@ -51529,9 +52216,8 @@ var question_matrix_QuestionMatrixModel = /** @class */ (function (_super) {
             _this.onColumnsChanged();
         });
         _this.registerPropertyChangedHandlers(["rows"], function () {
-            if (!_this.filterItems()) {
-                _this.onRowsChanged();
-            }
+            _this.runCondition(_this.getDataFilteredValues(), _this.getDataFilteredProperties());
+            _this.onRowsChanged();
         });
         _this.registerPropertyChangedHandlers(["hideIfRowsEmpty"], function () {
             _this.updateVisibilityBasedOnRows();
@@ -51701,21 +52387,31 @@ var question_matrix_QuestionMatrixModel = /** @class */ (function (_super) {
         }
         return res;
     };
-    QuestionMatrixModel.prototype.runItemsCondition = function (values, properties) {
+    QuestionMatrixModel.prototype.runCondition = function (values, properties) {
         itemvalue_ItemValue.runEnabledConditionsForItems(this.rows, undefined, values, properties);
-        return _super.prototype.runItemsCondition.call(this, values, properties);
+        _super.prototype.runCondition.call(this, values, properties);
+    };
+    QuestionMatrixModel.prototype.createRowsVisibleIfRunner = function () {
+        return !!this.rowsVisibleIf ? new ConditionRunner(this.rowsVisibleIf) : null;
+    };
+    QuestionMatrixModel.prototype.onRowsChanged = function () {
+        this.clearGeneratedRows();
+        _super.prototype.onRowsChanged.call(this);
     };
     QuestionMatrixModel.prototype.getVisibleRows = function () {
+        if (!!this.generatedVisibleRows)
+            return this.generatedVisibleRows;
         var result = new Array();
         var val = this.value;
         if (!val)
             val = {};
-        var rows = !!this.filteredRows ? this.filteredRows : this.rows;
+        var rows = this.filteredRows || this.rows;
         for (var i = 0; i < rows.length; i++) {
             var row = rows[i];
             if (this.isValueEmpty(row.value))
                 continue;
-            result.push(this.createMatrixRow(row, this.id + "_" + row.value.toString().replace(/\s/g, "_"), val[row.value]));
+            var rowId = this.id + "_" + row.value.toString().replace(/\s/g, "_");
+            result.push(this.createMatrixRow(row, rowId, val[row.value]));
         }
         this.generatedVisibleRows = result;
         return result;
@@ -51731,6 +52427,8 @@ var question_matrix_QuestionMatrixModel = /** @class */ (function (_super) {
     QuestionMatrixModel.prototype.endLoadingFromJson = function () {
         _super.prototype.endLoadingFromJson.call(this);
         this.rows = this.sortVisibleRows(this.rows);
+        this.onRowsChanged();
+        this.onColumnsChanged();
     };
     QuestionMatrixModel.prototype.isNewValueCorrect = function (val) {
         return helpers_Helpers.isValueObject(val, true);
@@ -51792,11 +52490,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));
             }
@@ -51963,11 +52661,47 @@ var question_matrix_QuestionMatrixModel = /** @class */ (function (_super) {
         json["type"] = question.getType();
         return json;
     };
+    QuestionMatrixModel.prototype.clearIncorrectValues = function () {
+        this.clearInvisibleValuesInRowsAndColumns(true, true, true);
+        _super.prototype.clearIncorrectValues.call(this);
+    };
     QuestionMatrixModel.prototype.clearValueIfInvisibleCore = function (reason) {
         _super.prototype.clearValueIfInvisibleCore.call(this, reason);
-        if (this.hasRows) {
-            this.clearInvisibleValuesInRows();
+        this.clearInvisibleValuesInRowsAndColumns(true, true, false);
+    };
+    QuestionMatrixModel.prototype.clearInvisibleColumnValues = function () {
+        this.clearInvisibleValuesInRowsAndColumns(false, true, false);
+    };
+    QuestionMatrixModel.prototype.clearInvisibleValuesInRows = function () {
+        this.clearInvisibleValuesInRowsAndColumns(true, false, false);
+    };
+    QuestionMatrixModel.prototype.clearInvisibleValuesInRowsAndColumns = function (inRows, inColumns, inCorrectRows) {
+        if (this.isEmpty())
+            return;
+        var updatedData = this.getUnbindValue(this.value);
+        var newData = {};
+        var rows = this.rows;
+        for (var i = 0; i < rows.length; i++) {
+            var key = rows[i].value;
+            if (!!updatedData[key]) {
+                if (inRows && !rows[i].isVisible || inColumns && !this.getVisibleColumnByValue(updatedData[key])) {
+                    delete updatedData[key];
+                }
+                else {
+                    newData[key] = updatedData[key];
+                }
+            }
+        }
+        if (inCorrectRows) {
+            updatedData = newData;
         }
+        if (this.isTwoValueEquals(updatedData, this.value))
+            return;
+        this.value = updatedData;
+    };
+    QuestionMatrixModel.prototype.getVisibleColumnByValue = function (val) {
+        var col = itemvalue_ItemValue.getItemByValue(this.columns, val);
+        return !!col && col.isVisible ? col : null;
     };
     QuestionMatrixModel.prototype.getFirstInputElementId = function () {
         var rows = this.generatedVisibleRows;
@@ -52849,9 +53583,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) {
@@ -52873,6 +53607,7 @@ var question_text_QuestionTextModel = /** @class */ (function (_super) {
         }
         var valName = this.getValidatorTitle();
         var emailValidator = new EmailValidator();
+        emailValidator.errorOwner = this;
         if (this.inputType === "email" &&
             !this.validators.some(function (v) { return v.getType() === "emailvalidator"; })) {
             var validateResult = emailValidator.validate(this.value, valName);
@@ -52892,7 +53627,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))
@@ -55257,8 +55993,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()) {
@@ -57661,6 +58397,8 @@ var question_comment_extends = (undefined && undefined.__extends) || (function (
 
 
 
+
+
 /**
  * A class that describes the Long Text question type.
  *
@@ -57668,9 +58406,46 @@ var question_comment_extends = (undefined && undefined.__extends) || (function (
  */
 var question_comment_QuestionCommentModel = /** @class */ (function (_super) {
     question_comment_extends(QuestionCommentModel, _super);
-    function QuestionCommentModel() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function QuestionCommentModel(name) {
+        var _this_1 = _super.call(this, name) || this;
+        _this_1.textAreaModel = new text_area_TextAreaModel(_this_1.getTextAreaOptions());
+        return _this_1;
     }
+    QuestionCommentModel.prototype.getTextAreaOptions = function () {
+        var _this_1 = this;
+        var _this = this;
+        var updateQuestionValue = function (newValue) {
+            if (!helpers_Helpers.isTwoValueEquals(_this.value, newValue, false, true, false)) {
+                _this.value = newValue;
+            }
+        };
+        var options = {
+            question: this,
+            id: function () { return _this_1.inputId; },
+            propertyName: "value",
+            className: function () { return _this_1.className; },
+            placeholder: function () { return _this_1.renderedPlaceholder; },
+            isDisabledAttr: function () { return _this_1.isDisabledAttr; },
+            isReadOnlyAttr: function () { return _this_1.isReadOnlyAttr; },
+            autoGrow: function () { return _this_1.renderedAutoGrow; },
+            maxLength: function () { return _this_1.getMaxLength(); },
+            rows: function () { return _this_1.rows; },
+            cols: function () { return _this_1.cols; },
+            ariaRequired: function () { return _this_1.a11y_input_ariaRequired; },
+            ariaLabel: function () { return _this_1.a11y_input_ariaLabel; },
+            ariaLabelledBy: function () { return _this_1.a11y_input_ariaLabelledBy; },
+            ariaDescribedBy: function () { return _this_1.a11y_input_ariaDescribedBy; },
+            ariaInvalid: function () { return _this_1.a11y_input_ariaInvalid; },
+            ariaErrormessage: function () { return _this_1.a11y_input_ariaErrormessage; },
+            getTextValue: function () { return _this_1.value; },
+            onTextAreaChange: function (e) { updateQuestionValue(e.target.value); },
+            onTextAreaInput: function (event) { _this_1.onInput(event); },
+            onTextAreaKeyDown: function (event) { _this_1.onKeyDown(event); },
+            onTextAreaFocus: function (event) { _this_1.onFocus(event); },
+            onTextAreaBlur: function (event) { _this_1.onBlur(event); }
+        };
+        return options;
+    };
     Object.defineProperty(QuestionCommentModel.prototype, "rows", {
         /**
          * Specifies the visible height of the comment area, measured in lines.
@@ -57776,9 +58551,9 @@ var question_comment_QuestionCommentModel = /** @class */ (function (_super) {
         _super.prototype.afterRenderQuestionElement.call(this, el);
     };
     QuestionCommentModel.prototype.updateElement = function () {
-        var _this = this;
+        var _this_1 = this;
         if (this.element && this.renderedAutoGrow) {
-            setTimeout(function () { return increaseHeightByContent(_this.element); }, 1);
+            setTimeout(function () { return increaseHeightByContent(_this_1.element); }, 1);
         }
     };
     QuestionCommentModel.prototype.beforeDestroyQuestionElement = function (el) {
@@ -58178,8 +58953,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));
         }
@@ -61888,21 +62663,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.
  *
@@ -62127,7 +62891,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;
@@ -62147,9 +62911,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;
@@ -63642,8 +64405,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();
@@ -64093,34 +64863,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
@@ -64620,6 +65400,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.
@@ -64841,8 +65628,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;
             }
@@ -65367,13 +66155,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;
@@ -67876,6 +68669,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);
@@ -68599,6 +69395,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 || "");
     };
@@ -69241,8 +70040,8 @@ Serializer.addClass("currencymask", [
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.11.14";
-ReleaseDate = "" + "2024-09-04";
+Version = "" + "1.12.2";
+ReleaseDate = "" + "2024-09-16";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -69407,6 +70206,7 @@ function checkPrefix(prefix) {
 
 
 
+
 
 
 //Uncomment to include the "date" question type.
@@ -70301,6 +71101,7 @@ var modernCss = {
     page: {
         root: "sv-page sv-body__page",
         title: "sv-title sv-page__title",
+        number: "sv-page__num",
         description: "sv-description sv-page__description",
     },
     pageTitle: "sv-title sv-page__title",
@@ -74951,43 +75752,43 @@ var japaneseSurveyStrings = {
     otherItemText: "その他（説明）",
     noneItemText: "なし",
     refuseItemText: "回答を拒否する",
-    dontKnowItemText: "わかりません",
+    dontKnowItemText: "わからない",
     selectAllItemText: "すべて選択",
-    progressText: "{0}/{1}頁",
+    progressText: "ページ{0}/{1}",
     indexText: "{1}の{0}",
     panelDynamicProgressText: "{1}の{0}を記録する",
     panelDynamicTabTextFormat: "Panel {panelIndex}",
-    questionsProgressText: "{0}/{1}の質問に回答しました。",
-    emptySurvey: "この調査に表示できるページや質問はありません",
-    completingSurvey: "調査を完了してくれてありがとうございました",
-    completingSurveyBefore: "当社の記録によると、この調査はすでに完了しています。",
-    loadingSurvey: "調査をダウンロード中",
+    questionsProgressText: "{0}/{1}問回答済",
+    emptySurvey: "アンケートに表示可能な要素がありません。",
+    completingSurvey: "アンケートにご協力いただき、ありがとうございます。",
+    completingSurveyBefore: "このアンケートはすでに回答済みです。",
+    loadingSurvey: "アンケートを読み込んでいます...",
     placeholder: "選択",
-    ratingOptionsCaption: "選ぶ。。。",
-    value: "値打ち",
-    requiredError: "質問にお答え下さい",
-    requiredErrorInPanel: "最低でも1つの質問に答えてください。",
-    requiredInAllRowsError: "質問には全列で回答してください。",
-    eachRowUniqueError: "各行には一意の値が必要です。",
+    ratingOptionsCaption: "選択。。。",
+    value: "値",
+    requiredError: "回答が必要です",
+    requiredErrorInPanel: "回答が必要です：少なくとも1つの質問に答えてください。",
+    requiredInAllRowsError: "回答が必要です：すべての行の質問に答えてください。",
+    eachRowUniqueError: "各行に一意の値を入力してください。",
     numericError: "数字でご記入下さい",
-    minError: "値は {0} 値より小さくすることはできません",
-    maxError: "値は {0} を超えてはなりません。",
-    textMinLength: "{0} 文字以上で入力して下さい",
-    textMaxLength: "{0}文字以下で入力してください。",
-    textMinMaxLength: "{0}以上{1}未満の文字を入力してください。",
-    minRowCountError: "{0}行以上で入力して下さい",
-    minSelectError: "{0}種類以上を選択して下さい",
-    maxSelectError: "{0}以上のバリアントを選択しないでください。",
-    numericMinMax: "{0}は{1}以上であり、{2}以下であることが望ましい。",
-    numericMin: "'{0}' は同等か{1}より大きくなければなりません",
-    numericMax: "'{0}' は同等か{1}より小さくなければなりません",
-    invalidEmail: "有効なメールアドレスをご記入下さい",
-    invalidExpression: "式は {0}は'true'を返すべきです。",
+    minError: "値は {0} 以上である必要があります",
+    maxError: "値は {0} 以下である必要があります",
+    textMinLength: "少なくとも {0} 文字を入力してください。",
+    textMaxLength: "{0} 文字以内で入力してください。",
+    textMinMaxLength: "{0} 文字以上 {1} 文字以内で入力してください。",
+    minRowCountError: "少なくとも {0} 行を入力してください。",
+    minSelectError: "少なくとも {0} 個のオプションを選択してください。",
+    maxSelectError: "{0} 個以下の選択肢を選択してください。",
+    numericMinMax: "'{0}' は {1} 以上 {2} 以下である必要があります",
+    numericMin: "'{0}' は {1} 以上である必要があります",
+    numericMax: "'{0}' は {1} 以下である必要があります",
+    invalidEmail: "有効なメールアドレスを入力してください。",
+    invalidExpression: "式: {0} は 'true' を返す必要があります。",
     urlRequestError: "リクエストはエラー '{0}' を返しました。{1}",
     urlGetChoicesError: "リクエストが空のデータを返したか、'path' プロパティが正しくありません。",
     exceedMaxSize: "ファイルのサイズは{0}を超えてはいけません",
     noUploadFilesHandler: "ファイルはアップロードできません。「onUploadFiles」イベントのハンドラーを追加してください。",
-    otherRequiredError: "その他の値を入力してください。",
+    otherRequiredError: "回答が必要です：他の値を入力してください。",
     uploadingFile: "ファイルをアップロード中です。しばらくしてから再度お試し下さい",
     loadingFile: "読み込み中",
     chooseFile: "ファイルを選択",
@@ -74997,20 +75798,20 @@ var japaneseSurveyStrings = {
     keyDuplicationError: "この値は一意でなければなりません。",
     addColumn: "列の追加",
     addRow: "追加行",
-    removeRow: "除去",
-    emptyRowsText: "行はありません。",
+    removeRow: "削除",
+    emptyRowsText: "行がありません。",
     addPanel: "新規追加",
-    removePanel: "除去",
+    removePanel: "削除",
     showDetails: "詳細を表示",
-    hideDetails: "詳細を隠す",
-    choices_Item: "品目",
-    matrix_column: "コラム",
+    hideDetails: "詳細を非表示",
+    choices_Item: "項目",
+    matrix_column: "列",
     matrix_row: "行",
     multipletext_itemname: "テキスト",
-    savingData: "結果はサーバーに保存されています...。",
+    savingData: "結果を保存中...。",
     savingDataError: "エラーが発生し、結果を保存できませんでした。",
-    savingDataSuccess: "結果は無事に保存されました",
-    savingExceedSize: "回答は 64 KB を超えています。ファイルのサイズを小さくしてもう一度お試しいただくか、アンケートの所有者にお問い合わせください。",
+    savingDataSuccess: "結果が正常に保存されました",
+    savingExceedSize: "回答は 64 KB を超えています。ファイルのサイズを小さくしてもう一度お試しいただくか、アンケートの作成者にお問い合わせください。",
     saveAgainButton: "もう一度試してみてください。",
     timerMin: "僅少",
     timerSec: "セック",
@@ -75025,23 +75826,23 @@ var japaneseSurveyStrings = {
     signaturePlaceHolderReadOnly: "署名なし",
     chooseFileCaption: "ファイルを選択",
     takePhotoCaption: "写真を撮る",
-    photoPlaceholder: "下のボタンをクリックして、カメラを使用して写真を撮ります。",
-    fileOrPhotoPlaceholder: "アップロードするファイルをドラッグアンドドロップまたは選択するか、カメラを使用して写真を撮ります。",
-    replaceFileCaption: "ファイルの置換",
+    photoPlaceholder: "下のボタンをクリックしてカメラで写真を撮影してください。",
+    fileOrPhotoPlaceholder: "ファイルをドラッグ＆ドロップまたは選択してアップロードするか、カメラで写真を撮影してください。",
+    replaceFileCaption: "ファイルを置換",
     removeFileCaption: "このファイルを削除",
-    booleanCheckedLabel: "噫",
-    booleanUncheckedLabel: "否",
+    booleanCheckedLabel: "はい",
+    booleanUncheckedLabel: "いいえ",
     confirmRemoveFile: "このファイルを削除してもよろしいですか？{0}?",
     confirmRemoveAllFiles: "すべてのファイルを削除してもよろしいですか？",
-    questionTitlePatternText: "質問名",
+    questionTitlePatternText: "質問のタイトル",
     modalCancelButtonText: "キャンセル",
     modalApplyButtonText: "申し込む",
     filterStringPlaceholder: "検索するタイプ...",
     emptyMessage: "表示するデータがありません",
     noEntriesText: "エントリはまだありません。\n下のボタンをクリックして、新しいエントリを追加します。",
     noEntriesReadonlyText: "エントリはありません。",
-    tabTitlePlaceholder: "新規パネル",
-    more: "もっとその",
+    tabTitlePlaceholder: "新しいパネル",
+    more: "続きを見る",
     tagboxDoneButtonCaption: "わかりました",
     selectToRankEmptyRankedAreaText: "すべての選択肢がランク付けされます",
     selectToRankEmptyUnrankedAreaText: "ここに選択肢をドラッグアンドドロップしてランク付けします",
@@ -79116,6 +79917,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) {
@@ -79135,9 +79937,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();
         });
@@ -79152,6 +79959,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;
     };
@@ -79219,10 +80027,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] : [];
@@ -80414,28 +81226,27 @@ var title_content_TitleContent = /** @class */ (function (_super) {
         };
         var spans = [];
         if (element.isRequireTextOnStart) {
-            spans.push(this.renderRequireText(element, cssClasses));
+            spans.push(this.renderRequireText(element));
             spans.push(getSpaceSpan("req-sp"));
         }
         var questionNumber = element.no;
         if (questionNumber) {
-            var panelNumber = !!cssClasses.panel ? cssClasses.panel.number : undefined;
-            spans.push(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { "data-key": "q_num", key: "q_num", className: cssClasses.number || panelNumber, style: { position: "static" }, "aria-hidden": true }, questionNumber));
+            spans.push(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { "data-key": "q_num", key: "q_num", className: element.cssTitleNumber, style: { position: "static" }, "aria-hidden": true }, questionNumber));
             spans.push(getSpaceSpan("num-sp"));
         }
         if (element.isRequireTextBeforeTitle) {
-            spans.push(this.renderRequireText(element, cssClasses));
+            spans.push(this.renderRequireText(element));
             spans.push(getSpaceSpan("req-sp"));
         }
         spans.push(reactquestion_element_SurveyElementBase.renderLocString(element.locTitle, null, "q_title"));
         if (element.isRequireTextAfterTitle) {
             spans.push(getSpaceSpan("req-sp"));
-            spans.push(this.renderRequireText(element, cssClasses));
+            spans.push(this.renderRequireText(element));
         }
         return spans;
     };
-    TitleContent.prototype.renderRequireText = function (element, cssClasses) {
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { "data-key": "req-text", key: "req-text", className: cssClasses.requiredText || cssClasses.panel.requiredText, "aria-hidden": true }, element.requiredText));
+    TitleContent.prototype.renderRequireText = function (element) {
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { "data-key": "req-text", key: "req-text", className: element.cssRequiredText, "aria-hidden": true }, element.requiredText));
     };
     return TitleContent;
 }(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Component));
@@ -80611,6 +81422,56 @@ ReactElementFactory.Instance.registerElement("sv-character-counter", function (p
     return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(character_counter_CharacterCounterComponent, props);
 });
 
+// CONCATENATED MODULE: ./packages/survey-react-ui/src/components/text-area.tsx
+var text_area_extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+var text_area_TextAreaComponent = /** @class */ (function (_super) {
+    text_area_extends(TextAreaComponent, _super);
+    function TextAreaComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.initialValue = _this.viewModel.getTextValue() || "";
+        return _this;
+    }
+    Object.defineProperty(TextAreaComponent.prototype, "viewModel", {
+        get: function () {
+            return this.props.viewModel;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TextAreaComponent.prototype.canRender = function () {
+        return !!this.viewModel.question;
+    };
+    TextAreaComponent.prototype.renderElement = function () {
+        var _this = this;
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("textarea", { id: this.viewModel.id, className: this.viewModel.className, ref: function (textarea) { return (_this.viewModel.setElement(textarea)); }, disabled: this.viewModel.isDisabledAttr, readOnly: this.viewModel.isReadOnlyAttr, rows: this.viewModel.rows, cols: this.viewModel.cols, placeholder: this.viewModel.placeholder, maxLength: this.viewModel.maxLength, defaultValue: this.initialValue, onChange: function (event) { _this.viewModel.onTextAreaInput(event); }, onFocus: function (event) { _this.viewModel.onTextAreaFocus(event); }, onBlur: function (event) { _this.viewModel.onTextAreaBlur(event); }, onKeyDown: function (event) { _this.viewModel.onTextAreaKeyDown(event); }, "aria-required": this.viewModel.ariaRequired, "aria-label": this.viewModel.ariaLabel, "aria-labelledby": this.viewModel.ariaLabelledBy, "aria-describedby": this.viewModel.ariaDescribedBy, "aria-invalid": this.viewModel.ariaInvalid, "aria-errormessage": this.viewModel.ariaErrormessage, style: { resize: this.viewModel.question.resizeStyle } }));
+    };
+    TextAreaComponent.prototype.componentWillUnmount = function () {
+        this.viewModel.dispose();
+    };
+    return TextAreaComponent;
+}(reactquestion_element_SurveyElementBase));
+
+ReactElementFactory.Instance.registerElement("sv-text-area", function (props) {
+    return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(text_area_TextAreaComponent, props);
+});
+
 // CONCATENATED MODULE: ./packages/survey-react-ui/src/reactquestion_comment.tsx
 var reactquestion_comment_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -80637,31 +81498,21 @@ var reactquestion_comment_SurveyQuestionComment = /** @class */ (function (_supe
     function SurveyQuestionComment(props) {
         return _super.call(this, props) || this;
     }
+    SurveyQuestionComment.prototype.renderCharacterCounter = function () {
+        var counter = null;
+        if (!!this.question.getMaxLength()) {
+            counter = external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](character_counter_CharacterCounterComponent, { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter });
+        }
+        return counter;
+    };
     SurveyQuestionComment.prototype.renderElement = function () {
-        var _this = this;
-        var onBlur = function (e) {
-            if (!_this.question.isInputTextUpdate) {
-                _this.updateValueOnEvent(e);
-            }
-            _this.question.onBlur(e);
-        };
-        var onInput = function (event) {
-            if (_this.question.isInputTextUpdate) {
-                _this.updateValueOnEvent(event);
-            }
-            else {
-                _this.question.updateElement();
-            }
-            var newValue = event.target.value;
-            _this.question.updateRemainingCharacterCounter(newValue);
-        };
-        var placeholder = this.question.renderedPlaceholder;
         if (this.question.isReadOnlyRenderDiv()) {
             return external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", null, this.question.value);
         }
-        var counter = !!this.question.getMaxLength() ? (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](character_counter_CharacterCounterComponent, { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter })) : null;
+        var counter = this.renderCharacterCounter();
+        var textAreaModel = this.props.question.textAreaModel;
         return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](external_root_React_commonjs2_react_commonjs_react_amd_react_["Fragment"], null,
-            external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("textarea", { id: this.question.inputId, className: this.question.className, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, ref: function (textarea) { return (_this.setControl(textarea)); }, maxLength: this.question.getMaxLength(), placeholder: placeholder, onFocus: function (event) { _this.question.onFocus(event); }, onBlur: onBlur, onInput: onInput, onKeyDown: function (event) { _this.question.onKeyDown(event); }, cols: this.question.cols, rows: this.question.rows, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage, style: { resize: this.question.resizeStyle } }),
+            external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](text_area_TextAreaComponent, { viewModel: textAreaModel }),
             counter));
     };
     return SurveyQuestionComment;
@@ -80671,61 +81522,22 @@ var reactquestion_comment_SurveyQuestionCommentItem = /** @class */ (function (_
     reactquestion_comment_extends(SurveyQuestionCommentItem, _super);
     function SurveyQuestionCommentItem(props) {
         var _this = _super.call(this, props) || this;
-        _this.state = { comment: _this.getComment() || "" };
+        _this.textAreaModel = _this.getTextAreaModel();
         return _this;
     }
-    SurveyQuestionCommentItem.prototype.componentDidUpdate = function (prevProps, prevState) {
-        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
-        this.updateDomElement();
-    };
-    SurveyQuestionCommentItem.prototype.componentDidMount = function () {
-        _super.prototype.componentDidMount.call(this);
-        this.updateDomElement();
-    };
-    SurveyQuestionCommentItem.prototype.updateDomElement = function () {
-        if (!!this.control) {
-            var control = this.control;
-            var newValue = this.getComment() || "";
-            if (!helpers_Helpers.isTwoValueEquals(newValue, control.value, false, true, false)) {
-                control.value = newValue;
-            }
-        }
-    };
-    SurveyQuestionCommentItem.prototype.setControl = function (element) {
-        if (!!element) {
-            this.control = element;
-        }
-    };
     SurveyQuestionCommentItem.prototype.canRender = function () {
         return !!this.props.question;
     };
-    SurveyQuestionCommentItem.prototype.onCommentChange = function (event) {
-        this.props.question.onCommentChange(event);
-    };
-    SurveyQuestionCommentItem.prototype.onCommentInput = function (event) {
-        this.props.question.onCommentInput(event);
-    };
-    SurveyQuestionCommentItem.prototype.getComment = function () {
-        return this.props.question.comment;
-    };
-    SurveyQuestionCommentItem.prototype.setComment = function (value) {
-        this.props.question.comment = value;
-    };
-    SurveyQuestionCommentItem.prototype.getId = function () {
-        return this.props.question.commentId;
-    };
-    SurveyQuestionCommentItem.prototype.getPlaceholder = function () {
-        return this.props.question.renderedCommentPlaceholder;
+    SurveyQuestionCommentItem.prototype.getTextAreaModel = function () {
+        return this.props.question.commentTextAreaModel;
     };
     SurveyQuestionCommentItem.prototype.renderElement = function () {
-        var _this = this;
         var question = this.props.question;
-        var className = this.props.otherCss || this.cssClasses.comment;
         if (question.isReadOnlyRenderDiv()) {
-            var comment = this.getComment() || "";
+            var comment = this.textAreaModel.getTextValue() || "";
             return external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", null, comment);
         }
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("textarea", { id: this.getId(), className: className, ref: function (textarea) { return (_this.setControl(textarea)); }, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), rows: question.commentAreaRows, placeholder: this.getPlaceholder(), onBlur: function (e) { _this.onCommentChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, "aria-required": question.isRequired || question.a11y_input_ariaRequired, "aria-label": question.ariaLabel || question.a11y_input_ariaLabel, style: { resize: question.resizeStyle } }));
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](text_area_TextAreaComponent, { viewModel: this.textAreaModel }));
     };
     return SurveyQuestionCommentItem;
 }(ReactSurveyElement));
@@ -80735,23 +81547,8 @@ var SurveyQuestionOtherValueItem = /** @class */ (function (_super) {
     function SurveyQuestionOtherValueItem() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    SurveyQuestionOtherValueItem.prototype.onCommentChange = function (event) {
-        this.props.question.onOtherValueChange(event);
-    };
-    SurveyQuestionOtherValueItem.prototype.onCommentInput = function (event) {
-        this.props.question.onOtherValueInput(event);
-    };
-    SurveyQuestionOtherValueItem.prototype.getComment = function () {
-        return this.props.question.otherValue;
-    };
-    SurveyQuestionOtherValueItem.prototype.setComment = function (value) {
-        this.props.question.otherValue = value;
-    };
-    SurveyQuestionOtherValueItem.prototype.getId = function () {
-        return this.props.question.otherId;
-    };
-    SurveyQuestionOtherValueItem.prototype.getPlaceholder = function () {
-        return this.props.question.otherPlaceholder;
+    SurveyQuestionOtherValueItem.prototype.getTextAreaModel = function () {
+        return this.props.question.otherTextAreaModel;
     };
     return SurveyQuestionOtherValueItem;
 }(reactquestion_comment_SurveyQuestionCommentItem));
@@ -82367,7 +83164,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);
             });
         }
     };
@@ -82375,7 +83172,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);
             });
         }
     };
@@ -82386,7 +83183,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));
         });
@@ -82402,8 +83199,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);
             }
@@ -82422,9 +83219,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,
@@ -82450,6 +83247,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 () {
@@ -82497,11 +83295,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 ||
@@ -82526,7 +83333,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 ?
@@ -82538,6 +83345,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));
 
@@ -83062,10 +83881,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;
@@ -84280,7 +85099,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);
             });
         }
     };
@@ -84292,7 +85111,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));
         });
@@ -84309,7 +85128,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;
@@ -84325,9 +85144,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,
@@ -84353,6 +85172,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;
@@ -84421,12 +85241,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 ?
@@ -84437,6 +85268,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));
 
@@ -84894,6 +85737,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 })));
@@ -85524,7 +86370,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;