survey-react-ui 1.10.6 → 1.11.2

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.10.6
+ * surveyjs - Survey JavaScript library v1.11.2
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -145,6 +145,11 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
 
 
 
@@ -167,7 +172,9 @@ function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOpti
         if (newAction.hasTitle) {
             newAction.title = item.title;
         }
-        originalSelectionChanged(item, params);
+        if (originalSelectionChanged) {
+            originalSelectionChanged(item, params);
+        }
     };
     var popupModel = createPopupModelWithListModel(listOptions, popupOptions);
     var newActionOptions = Object.assign({}, actionOptions, {
@@ -186,7 +193,9 @@ function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOpti
 function createPopupModelWithListModel(listOptions, popupOptions) {
     var listModel = new _list__WEBPACK_IMPORTED_MODULE_3__["ListModel"](listOptions);
     listModel.onSelectionChanged = function (item) {
-        listOptions.onSelectionChanged(item);
+        if (listOptions.onSelectionChanged) {
+            listOptions.onSelectionChanged(item);
+        }
         popupModel.hide();
     };
     var _popupOptions = popupOptions || {};
@@ -208,6 +217,7 @@ var BaseAction = /** @class */ (function (_super) {
     function BaseAction() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.rendredIdValue = BaseAction.getNextRendredId();
+        _this.markerIconSize = 16;
         return _this;
     }
     BaseAction.getNextRendredId = function () { return BaseAction.renderedId++; };
@@ -351,6 +361,46 @@ var BaseAction = /** @class */ (function (_super) {
         }
         return args.isTrusted;
     };
+    BaseAction.prototype.showPopup = function () {
+        if (!!this.popupModel) {
+            this.popupModel.show();
+        }
+    };
+    BaseAction.prototype.hidePopup = function () {
+        if (!!this.popupModel) {
+            this.popupModel.hide();
+        }
+    };
+    BaseAction.prototype.clearPopupTimeouts = function () {
+        if (this.showPopupTimeout)
+            clearTimeout(this.showPopupTimeout);
+        if (this.hidePopupTimeout)
+            clearTimeout(this.hidePopupTimeout);
+    };
+    BaseAction.prototype.showPopupDelayed = function (delay) {
+        var _this = this;
+        this.clearPopupTimeouts();
+        this.showPopupTimeout = setTimeout(function () {
+            _this.clearPopupTimeouts();
+            _this.showPopup();
+        }, delay);
+    };
+    BaseAction.prototype.hidePopupDelayed = function (delay) {
+        var _this = this;
+        var _a;
+        if ((_a = this.popupModel) === null || _a === void 0 ? void 0 : _a.isVisible) {
+            this.clearPopupTimeouts();
+            this.hidePopupTimeout = setTimeout(function () {
+                _this.clearPopupTimeouts();
+                _this.hidePopup();
+                _this.isHovered = false;
+            }, delay);
+        }
+        else {
+            this.clearPopupTimeouts();
+            this.isHovered = false;
+        }
+    };
     BaseAction.renderedId = 1;
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
@@ -412,9 +462,21 @@ var BaseAction = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: 24 })
     ], BaseAction.prototype, "iconSize", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
+    ], BaseAction.prototype, "markerIconName", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
+    ], BaseAction.prototype, "markerIconSize", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], BaseAction.prototype, "css", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: false })
+    ], BaseAction.prototype, "isPressed", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: false })
+    ], BaseAction.prototype, "isHovered", void 0);
     return BaseAction;
 }(_base__WEBPACK_IMPORTED_MODULE_0__["Base"]));
 
@@ -452,6 +514,14 @@ var Action = /** @class */ (function (_super) {
     Action.prototype.createLocTitle = function () {
         return this.createLocalizableString("title", this, true);
     };
+    Action.prototype.setItems = function (items, onSelectionChanged) {
+        this.markerIconName = "icon-next_16x16";
+        this.component = "sv-list-item-group";
+        this.items = __spreadArray([], items);
+        var popupModel = createPopupModelWithListModel({ items: items, onSelectionChanged: onSelectionChanged, searchEnabled: false }, { horizontalPosition: "right", showPointer: false, canShrink: false });
+        popupModel.cssClass = "sv-popup-inner";
+        this.popupModel = popupModel;
+    };
     Action.prototype.getLocTitle = function () {
         return this.locTitleValue;
     };
@@ -668,9 +738,6 @@ var AdaptiveActionContainer = /** @class */ (function (_super) {
             tooltip: _surveyStrings__WEBPACK_IMPORTED_MODULE_3__["surveyLocalization"].getString("more"),
         }, {
             items: [],
-            onSelectionChanged: function (item) {
-                _this.hiddenItemSelected(item);
-            },
             allowSelection: false
         });
         return _this;
@@ -736,11 +803,6 @@ var AdaptiveActionContainer = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    AdaptiveActionContainer.prototype.hiddenItemSelected = function (item) {
-        if (!!item && typeof item.action === "function") {
-            item.action();
-        }
-    };
     AdaptiveActionContainer.prototype.onSet = function () {
         var _this = this;
         this.actions.forEach(function (action) { return action.updateCallback = function (isResetInitialized) { return _this.raiseUpdate(isResetInitialized); }; });
@@ -997,6 +1059,21 @@ var ActionContainer = /** @class */ (function (_super) {
             this.sortItems();
         }
     };
+    ActionContainer.prototype.popupAfterShowCallback = function (itemValue) {
+    };
+    ActionContainer.prototype.mouseOverHandler = function (itemValue) {
+        var _this = this;
+        itemValue.isHovered = true;
+        this.actions.forEach(function (action) {
+            if (action === itemValue && !!itemValue.popupModel) {
+                itemValue.showPopupDelayed(_this.subItemsShowDelay);
+                _this.popupAfterShowCallback(itemValue);
+            }
+            else if (!!action.popupModel && action.popupModel.isVisible) {
+                action.hidePopupDelayed(_this.subItemsHideDelay);
+            }
+        });
+    };
     ActionContainer.prototype.initResponsivityManager = function (container, delayedUpdateFunction) {
         return;
     };
@@ -1032,6 +1109,12 @@ var ActionContainer = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: false })
     ], ActionContainer.prototype, "isEmpty", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: 300 })
+    ], ActionContainer.prototype, "subItemsShowDelay", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: 300 })
+    ], ActionContainer.prototype, "subItemsHideDelay", void 0);
     return ActionContainer;
 }(_base__WEBPACK_IMPORTED_MODULE_1__["Base"]));
 
@@ -1307,6 +1390,10 @@ var Base = /** @class */ (function () {
         this.onItemValuePropertyChanged = this.addEvent();
         this.isCreating = true;
         this.animationAllowedLock = 0;
+        //remove when knockout obsolete
+        this.supportOnElementRenderedEvent = true;
+        this.onElementRenderedEventEnabled = false;
+        this._onElementRerendered = new EventBase();
         this.bindingsValue = new Bindings(this);
         _jsonobject__WEBPACK_IMPORTED_MODULE_2__["CustomPropertiesCollection"].createProperties(this);
         this.onBaseCreating();
@@ -2235,7 +2322,7 @@ var Base = /** @class */ (function () {
         configurable: true
     });
     Base.prototype.getIsAnimationAllowed = function () {
-        return _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].animationEnabled && this.animationAllowedLock >= 0 && !this.isLoadingFromJson && !this.isDisposed;
+        return _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].animationEnabled && this.animationAllowedLock >= 0 && !this.isLoadingFromJson && !this.isDisposed && (!!this.onElementRerendered || !this.supportOnElementRenderedEvent);
     };
     Base.prototype.blockAnimations = function () {
         this.animationAllowedLock--;
@@ -2243,6 +2330,22 @@ var Base = /** @class */ (function () {
     Base.prototype.releaseAnimations = function () {
         this.animationAllowedLock++;
     };
+    Base.prototype.enableOnElementRenderedEvent = function () {
+        this.onElementRenderedEventEnabled = true;
+    };
+    Base.prototype.disableOnElementRenderedEvent = function () {
+        this.onElementRenderedEventEnabled = false;
+    };
+    Object.defineProperty(Base.prototype, "onElementRerendered", {
+        get: function () {
+            return this.supportOnElementRenderedEvent && this.onElementRenderedEventEnabled ? this._onElementRerendered : undefined;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Base.prototype.afterRerender = function () {
+        this.onElementRerendered.fire(this, undefined);
+    };
     Base.currentDependencis = undefined;
     return Base;
 }());
@@ -2286,8 +2389,9 @@ var Event = /** @class */ (function () {
     Event.prototype.fire = function (sender, options) {
         if (!this.callbacks)
             return;
-        for (var i = 0; i < this.callbacks.length; i++) {
-            this.callbacks[i](sender, options);
+        var callbacks = [].concat(this.callbacks);
+        for (var i = 0; i < callbacks.length; i++) {
+            callbacks[i](sender, options);
             if (!this.callbacks)
                 return;
         }
@@ -3045,7 +3149,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!***************************************!*\
   !*** ./src/entries/react-ui-model.ts ***!
   \***************************************/
-/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
+/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, 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 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3105,6 +3209,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRankingItem", function() { return _react_reactquestion_ranking__WEBPACK_IMPORTED_MODULE_12__["SurveyQuestionRankingItem"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRankingItemContent", function() { return _react_reactquestion_ranking__WEBPACK_IMPORTED_MODULE_12__["SurveyQuestionRankingItemContent"]; });
+
 /* harmony import */ var _react_components_rating_rating_item__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../react/components/rating/rating-item */ "./src/react/components/rating/rating-item.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RatingItem", function() { return _react_components_rating_rating_item__WEBPACK_IMPORTED_MODULE_13__["RatingItem"]; });
 
@@ -3245,90 +3351,96 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _react_components_popup_popup__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ../react/components/popup/popup */ "./src/react/components/popup/popup.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Popup", function() { return _react_components_popup_popup__WEBPACK_IMPORTED_MODULE_54__["Popup"]; });
 
-/* harmony import */ var _react_components_list_list__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../react/components/list/list */ "./src/react/components/list/list.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "List", function() { return _react_components_list_list__WEBPACK_IMPORTED_MODULE_55__["List"]; });
+/* harmony import */ var _react_components_list_list_item_content__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../react/components/list/list-item-content */ "./src/react/components/list/list-item-content.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ListItemContent", function() { return _react_components_list_list_item_content__WEBPACK_IMPORTED_MODULE_55__["ListItemContent"]; });
+
+/* harmony import */ var _react_components_list_list_item_group__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ../react/components/list/list-item-group */ "./src/react/components/list/list-item-group.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ListItemGroup", function() { return _react_components_list_list_item_group__WEBPACK_IMPORTED_MODULE_56__["ListItemGroup"]; });
+
+/* harmony import */ var _react_components_list_list__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ../react/components/list/list */ "./src/react/components/list/list.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "List", function() { return _react_components_list_list__WEBPACK_IMPORTED_MODULE_57__["List"]; });
 
-/* harmony import */ var _react_components_title_title_actions__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ../react/components/title/title-actions */ "./src/react/components/title/title-actions.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TitleActions", function() { return _react_components_title_title_actions__WEBPACK_IMPORTED_MODULE_56__["TitleActions"]; });
+/* harmony import */ var _react_components_title_title_actions__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ../react/components/title/title-actions */ "./src/react/components/title/title-actions.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TitleActions", function() { return _react_components_title_title_actions__WEBPACK_IMPORTED_MODULE_58__["TitleActions"]; });
 
-/* harmony import */ var _react_components_title_title_element__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ../react/components/title/title-element */ "./src/react/components/title/title-element.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TitleElement", function() { return _react_components_title_title_element__WEBPACK_IMPORTED_MODULE_57__["TitleElement"]; });
+/* harmony import */ var _react_components_title_title_element__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__(/*! ../react/components/title/title-element */ "./src/react/components/title/title-element.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TitleElement", function() { return _react_components_title_title_element__WEBPACK_IMPORTED_MODULE_59__["TitleElement"]; });
 
-/* harmony import */ var _react_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ../react/components/action-bar/action-bar */ "./src/react/components/action-bar/action-bar.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyActionBar", function() { return _react_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_58__["SurveyActionBar"]; });
+/* harmony import */ var _react_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__(/*! ../react/components/action-bar/action-bar */ "./src/react/components/action-bar/action-bar.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyActionBar", function() { return _react_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_60__["SurveyActionBar"]; });
 
-/* harmony import */ var _react_components_survey_header_logo_image__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__(/*! ../react/components/survey-header/logo-image */ "./src/react/components/survey-header/logo-image.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LogoImage", function() { return _react_components_survey_header_logo_image__WEBPACK_IMPORTED_MODULE_59__["LogoImage"]; });
+/* harmony import */ var _react_components_survey_header_logo_image__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__(/*! ../react/components/survey-header/logo-image */ "./src/react/components/survey-header/logo-image.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LogoImage", function() { return _react_components_survey_header_logo_image__WEBPACK_IMPORTED_MODULE_61__["LogoImage"]; });
 
-/* harmony import */ var _react_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__(/*! ../react/components/survey-header/survey-header */ "./src/react/components/survey-header/survey-header.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyHeader", function() { return _react_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_60__["SurveyHeader"]; });
+/* harmony import */ var _react_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_62__ = __webpack_require__(/*! ../react/components/survey-header/survey-header */ "./src/react/components/survey-header/survey-header.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyHeader", function() { return _react_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_62__["SurveyHeader"]; });
 
-/* harmony import */ var _react_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__(/*! ../react/components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SvgIcon", function() { return _react_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_61__["SvgIcon"]; });
+/* harmony import */ var _react_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_63__ = __webpack_require__(/*! ../react/components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SvgIcon", function() { return _react_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_63__["SvgIcon"]; });
 
-/* harmony import */ var _react_components_matrix_actions_remove_button_remove_button__WEBPACK_IMPORTED_MODULE_62__ = __webpack_require__(/*! ../react/components/matrix-actions/remove-button/remove-button */ "./src/react/components/matrix-actions/remove-button/remove-button.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDynamicRemoveButton", function() { return _react_components_matrix_actions_remove_button_remove_button__WEBPACK_IMPORTED_MODULE_62__["SurveyQuestionMatrixDynamicRemoveButton"]; });
+/* harmony import */ var _react_components_matrix_actions_remove_button_remove_button__WEBPACK_IMPORTED_MODULE_64__ = __webpack_require__(/*! ../react/components/matrix-actions/remove-button/remove-button */ "./src/react/components/matrix-actions/remove-button/remove-button.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDynamicRemoveButton", function() { return _react_components_matrix_actions_remove_button_remove_button__WEBPACK_IMPORTED_MODULE_64__["SurveyQuestionMatrixDynamicRemoveButton"]; });
 
-/* harmony import */ var _react_components_matrix_actions_detail_button_detail_button__WEBPACK_IMPORTED_MODULE_63__ = __webpack_require__(/*! ../react/components/matrix-actions/detail-button/detail-button */ "./src/react/components/matrix-actions/detail-button/detail-button.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDetailButton", function() { return _react_components_matrix_actions_detail_button_detail_button__WEBPACK_IMPORTED_MODULE_63__["SurveyQuestionMatrixDetailButton"]; });
+/* harmony import */ var _react_components_matrix_actions_detail_button_detail_button__WEBPACK_IMPORTED_MODULE_65__ = __webpack_require__(/*! ../react/components/matrix-actions/detail-button/detail-button */ "./src/react/components/matrix-actions/detail-button/detail-button.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDetailButton", function() { return _react_components_matrix_actions_detail_button_detail_button__WEBPACK_IMPORTED_MODULE_65__["SurveyQuestionMatrixDetailButton"]; });
 
-/* harmony import */ var _react_components_matrix_actions_drag_drop_icon_drag_drop_icon__WEBPACK_IMPORTED_MODULE_64__ = __webpack_require__(/*! ../react/components/matrix-actions/drag-drop-icon/drag-drop-icon */ "./src/react/components/matrix-actions/drag-drop-icon/drag-drop-icon.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDynamicDragDropIcon", function() { return _react_components_matrix_actions_drag_drop_icon_drag_drop_icon__WEBPACK_IMPORTED_MODULE_64__["SurveyQuestionMatrixDynamicDragDropIcon"]; });
+/* harmony import */ var _react_components_matrix_actions_drag_drop_icon_drag_drop_icon__WEBPACK_IMPORTED_MODULE_66__ = __webpack_require__(/*! ../react/components/matrix-actions/drag-drop-icon/drag-drop-icon */ "./src/react/components/matrix-actions/drag-drop-icon/drag-drop-icon.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDynamicDragDropIcon", function() { return _react_components_matrix_actions_drag_drop_icon_drag_drop_icon__WEBPACK_IMPORTED_MODULE_66__["SurveyQuestionMatrixDynamicDragDropIcon"]; });
 
-/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_add_btn__WEBPACK_IMPORTED_MODULE_65__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-add-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-add-btn.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicAddButton", function() { return _react_components_paneldynamic_actions_paneldynamic_add_btn__WEBPACK_IMPORTED_MODULE_65__["SurveyQuestionPanelDynamicAddButton"]; });
+/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_add_btn__WEBPACK_IMPORTED_MODULE_67__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-add-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-add-btn.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicAddButton", function() { return _react_components_paneldynamic_actions_paneldynamic_add_btn__WEBPACK_IMPORTED_MODULE_67__["SurveyQuestionPanelDynamicAddButton"]; });
 
-/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_remove_btn__WEBPACK_IMPORTED_MODULE_66__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-remove-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-remove-btn.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicRemoveButton", function() { return _react_components_paneldynamic_actions_paneldynamic_remove_btn__WEBPACK_IMPORTED_MODULE_66__["SurveyQuestionPanelDynamicRemoveButton"]; });
+/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_remove_btn__WEBPACK_IMPORTED_MODULE_68__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-remove-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-remove-btn.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicRemoveButton", function() { return _react_components_paneldynamic_actions_paneldynamic_remove_btn__WEBPACK_IMPORTED_MODULE_68__["SurveyQuestionPanelDynamicRemoveButton"]; });
 
-/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_prev_btn__WEBPACK_IMPORTED_MODULE_67__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-prev-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-prev-btn.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicPrevButton", function() { return _react_components_paneldynamic_actions_paneldynamic_prev_btn__WEBPACK_IMPORTED_MODULE_67__["SurveyQuestionPanelDynamicPrevButton"]; });
+/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_prev_btn__WEBPACK_IMPORTED_MODULE_69__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-prev-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-prev-btn.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicPrevButton", function() { return _react_components_paneldynamic_actions_paneldynamic_prev_btn__WEBPACK_IMPORTED_MODULE_69__["SurveyQuestionPanelDynamicPrevButton"]; });
 
-/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_next_btn__WEBPACK_IMPORTED_MODULE_68__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-next-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-next-btn.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicNextButton", function() { return _react_components_paneldynamic_actions_paneldynamic_next_btn__WEBPACK_IMPORTED_MODULE_68__["SurveyQuestionPanelDynamicNextButton"]; });
+/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_next_btn__WEBPACK_IMPORTED_MODULE_70__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-next-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-next-btn.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicNextButton", function() { return _react_components_paneldynamic_actions_paneldynamic_next_btn__WEBPACK_IMPORTED_MODULE_70__["SurveyQuestionPanelDynamicNextButton"]; });
 
-/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_progress_text__WEBPACK_IMPORTED_MODULE_69__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-progress-text */ "./src/react/components/paneldynamic-actions/paneldynamic-progress-text.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicProgressText", function() { return _react_components_paneldynamic_actions_paneldynamic_progress_text__WEBPACK_IMPORTED_MODULE_69__["SurveyQuestionPanelDynamicProgressText"]; });
+/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_progress_text__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-progress-text */ "./src/react/components/paneldynamic-actions/paneldynamic-progress-text.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicProgressText", function() { return _react_components_paneldynamic_actions_paneldynamic_progress_text__WEBPACK_IMPORTED_MODULE_71__["SurveyQuestionPanelDynamicProgressText"]; });
 
-/* harmony import */ var _react_components_survey_actions_survey_nav_button__WEBPACK_IMPORTED_MODULE_70__ = __webpack_require__(/*! ../react/components/survey-actions/survey-nav-button */ "./src/react/components/survey-actions/survey-nav-button.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyNavigationButton", function() { return _react_components_survey_actions_survey_nav_button__WEBPACK_IMPORTED_MODULE_70__["SurveyNavigationButton"]; });
+/* harmony import */ var _react_components_survey_actions_survey_nav_button__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ../react/components/survey-actions/survey-nav-button */ "./src/react/components/survey-actions/survey-nav-button.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyNavigationButton", function() { return _react_components_survey_actions_survey_nav_button__WEBPACK_IMPORTED_MODULE_72__["SurveyNavigationButton"]; });
 
-/* harmony import */ var _react_components_question_error__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ../react/components/question-error */ "./src/react/components/question-error.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "QuestionErrorComponent", function() { return _react_components_question_error__WEBPACK_IMPORTED_MODULE_71__["QuestionErrorComponent"]; });
+/* harmony import */ var _react_components_question_error__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ../react/components/question-error */ "./src/react/components/question-error.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "QuestionErrorComponent", function() { return _react_components_question_error__WEBPACK_IMPORTED_MODULE_73__["QuestionErrorComponent"]; });
 
-/* harmony import */ var _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ../react/components/matrix/row */ "./src/react/components/matrix/row.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MatrixRow", function() { return _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_72__["MatrixRow"]; });
+/* harmony import */ var _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../react/components/matrix/row */ "./src/react/components/matrix/row.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MatrixRow", function() { return _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_74__["MatrixRow"]; });
 
-/* harmony import */ var _react_components_skeleton__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ../react/components/skeleton */ "./src/react/components/skeleton.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Skeleton", function() { return _react_components_skeleton__WEBPACK_IMPORTED_MODULE_73__["Skeleton"]; });
+/* harmony import */ var _react_components_skeleton__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../react/components/skeleton */ "./src/react/components/skeleton.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Skeleton", function() { return _react_components_skeleton__WEBPACK_IMPORTED_MODULE_75__["Skeleton"]; });
 
-/* harmony import */ var _react_components_notifier__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../react/components/notifier */ "./src/react/components/notifier.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "NotifierComponent", function() { return _react_components_notifier__WEBPACK_IMPORTED_MODULE_74__["NotifierComponent"]; });
+/* harmony import */ var _react_components_notifier__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ../react/components/notifier */ "./src/react/components/notifier.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "NotifierComponent", function() { return _react_components_notifier__WEBPACK_IMPORTED_MODULE_76__["NotifierComponent"]; });
 
-/* harmony import */ var _react_components_components_container__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../react/components/components-container */ "./src/react/components/components-container.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ComponentsContainer", function() { return _react_components_components_container__WEBPACK_IMPORTED_MODULE_75__["ComponentsContainer"]; });
+/* harmony import */ var _react_components_components_container__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../react/components/components-container */ "./src/react/components/components-container.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ComponentsContainer", function() { return _react_components_components_container__WEBPACK_IMPORTED_MODULE_77__["ComponentsContainer"]; });
 
-/* harmony import */ var _react_components_character_counter__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ../react/components/character-counter */ "./src/react/components/character-counter.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CharacterCounterComponent", function() { return _react_components_character_counter__WEBPACK_IMPORTED_MODULE_76__["CharacterCounterComponent"]; });
+/* harmony import */ var _react_components_character_counter__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ../react/components/character-counter */ "./src/react/components/character-counter.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CharacterCounterComponent", function() { return _react_components_character_counter__WEBPACK_IMPORTED_MODULE_78__["CharacterCounterComponent"]; });
 
-/* harmony import */ var _react_components_header__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../react/components/header */ "./src/react/components/header.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderMobile", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_77__["HeaderMobile"]; });
+/* harmony import */ var _react_components_header__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../react/components/header */ "./src/react/components/header.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderMobile", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_79__["HeaderMobile"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderCell", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_77__["HeaderCell"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderCell", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_79__["HeaderCell"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Header", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_77__["Header"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Header", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_79__["Header"]; });
 
-/* harmony import */ var _react_string_viewer__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ../react/string-viewer */ "./src/react/string-viewer.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringViewer", function() { return _react_string_viewer__WEBPACK_IMPORTED_MODULE_78__["SurveyLocStringViewer"]; });
+/* harmony import */ var _react_string_viewer__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../react/string-viewer */ "./src/react/string-viewer.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringViewer", function() { return _react_string_viewer__WEBPACK_IMPORTED_MODULE_80__["SurveyLocStringViewer"]; });
 
-/* harmony import */ var _react_string_editor__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../react/string-editor */ "./src/react/string-editor.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringEditor", function() { return _react_string_editor__WEBPACK_IMPORTED_MODULE_79__["SurveyLocStringEditor"]; });
+/* harmony import */ var _react_string_editor__WEBPACK_IMPORTED_MODULE_81__ = __webpack_require__(/*! ../react/string-editor */ "./src/react/string-editor.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringEditor", function() { return _react_string_editor__WEBPACK_IMPORTED_MODULE_81__["SurveyLocStringEditor"]; });
 
-/* harmony import */ var _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../react/components/loading-indicator */ "./src/react/components/loading-indicator.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LoadingIndicatorComponent", function() { return _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_80__["LoadingIndicatorComponent"]; });
+/* harmony import */ var _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_82__ = __webpack_require__(/*! ../react/components/loading-indicator */ "./src/react/components/loading-indicator.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LoadingIndicatorComponent", function() { return _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_82__["LoadingIndicatorComponent"]; });
 
-/* harmony import */ var _react_svgbundle__WEBPACK_IMPORTED_MODULE_81__ = __webpack_require__(/*! ../react/svgbundle */ "./src/react/svgbundle.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SvgBundleComponent", function() { return _react_svgbundle__WEBPACK_IMPORTED_MODULE_81__["SvgBundleComponent"]; });
+/* harmony import */ var _react_svgbundle__WEBPACK_IMPORTED_MODULE_83__ = __webpack_require__(/*! ../react/svgbundle */ "./src/react/svgbundle.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SvgBundleComponent", function() { return _react_svgbundle__WEBPACK_IMPORTED_MODULE_83__["SvgBundleComponent"]; });
 
 // react
 
@@ -3410,6 +3522,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 
 
 
@@ -3423,7 +3537,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*********************************!*\
   !*** ./src/entries/react-ui.ts ***!
   \*********************************/
-/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings, Model, ResponsivityManager, VerticalResponsivityManager, unwrap */
+/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, 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, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings, Model, ResponsivityManager, VerticalResponsivityManager, unwrap */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3471,6 +3585,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRankingItem", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SurveyQuestionRankingItem"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRankingItemContent", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SurveyQuestionRankingItemContent"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RatingItem", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["RatingItem"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RatingItemStar", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["RatingItemStar"]; });
@@ -3569,6 +3685,10 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Popup", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["Popup"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ListItemContent", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["ListItemContent"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ListItemGroup", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["ListItemGroup"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "List", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["List"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TitleActions", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["TitleActions"]; });
@@ -3656,7 +3776,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.10.6", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.11.2", "survey-react-ui");
 
 
 /***/ }),
@@ -7148,7 +7268,7 @@ var FunctionOperand = /** @class */ (function (_super) {
         return this.evaluateCore(processValue);
     };
     FunctionOperand.prototype.evaluateCore = function (processValue) {
-        return _functionsfactory__WEBPACK_IMPORTED_MODULE_1__["FunctionFactory"].Instance.run(this.originalValue, this.parameters.evaluate(processValue), processValue.properties);
+        return _functionsfactory__WEBPACK_IMPORTED_MODULE_1__["FunctionFactory"].Instance.run(this.originalValue, this.parameters.evaluate(processValue), processValue.properties, this.parameters.values);
     };
     FunctionOperand.prototype.toString = function (func) {
         if (func === void 0) { func = undefined; }
@@ -7494,7 +7614,7 @@ var FunctionFactory = /** @class */ (function () {
         }
         return result.sort();
     };
-    FunctionFactory.prototype.run = function (name, params, properties) {
+    FunctionFactory.prototype.run = function (name, params, properties, originalParams) {
         if (properties === void 0) { properties = null; }
         var func = this.functionHash[name];
         if (!func) {
@@ -7509,7 +7629,7 @@ var FunctionFactory = /** @class */ (function () {
                 classRunner[key] = properties[key];
             }
         }
-        return classRunner.func(params);
+        return classRunner.func(params, originalParams);
     };
     FunctionFactory.Instance = new FunctionFactory();
     return FunctionFactory;
@@ -7581,7 +7701,7 @@ function avg(params) {
     return arr.length > 0 ? res / arr.length : 0;
 }
 FunctionFactory.Instance.register("avg", avg);
-function getInArrayParams(params) {
+function getInArrayParams(params, originalParams) {
     if (params.length < 2 || params.length > 3)
         return null;
     var arr = params[0];
@@ -7592,10 +7712,16 @@ function getInArrayParams(params) {
     var name = params[1];
     if (typeof name !== "string" && !(name instanceof String))
         return null;
-    var expression = params.length === 3 ? params[2] : undefined;
+    var expression = params.length > 2 ? params[2] : undefined;
     if (typeof expression !== "string" && !(expression instanceof String)) {
         expression = undefined;
     }
+    if (!expression) {
+        var operand = Array.isArray(originalParams) && originalParams.length > 2 ? originalParams[2] : undefined;
+        if (operand && !!operand.toString()) {
+            expression = operand.toString();
+        }
+    }
     return { data: arr, name: name, expression: expression };
 }
 function convertToNumber(val) {
@@ -7611,9 +7737,9 @@ function processItemInArray(item, name, res, func, needToConvert, condition) {
     var val = needToConvert ? convertToNumber(item[name]) : 1;
     return func(res, val);
 }
-function calcInArray(params, func, needToConvert) {
+function calcInArray(params, originalParams, func, needToConvert) {
     if (needToConvert === void 0) { needToConvert = true; }
-    var v = getInArrayParams(params);
+    var v = getInArrayParams(params, originalParams);
     if (!v)
         return undefined;
     var condition = !!v.expression ? new _conditions__WEBPACK_IMPORTED_MODULE_3__["ConditionRunner"](v.expression) : undefined;
@@ -7633,8 +7759,8 @@ function calcInArray(params, func, needToConvert) {
     }
     return res;
 }
-function sumInArray(params) {
-    var res = calcInArray(params, function (res, val) {
+function sumInArray(params, originalParams) {
+    var res = calcInArray(params, originalParams, function (res, val) {
         if (res == undefined)
             res = 0;
         if (val == undefined || val == null)
@@ -7644,8 +7770,8 @@ function sumInArray(params) {
     return res !== undefined ? res : 0;
 }
 FunctionFactory.Instance.register("sumInArray", sumInArray);
-function minInArray(params) {
-    return calcInArray(params, function (res, val) {
+function minInArray(params, originalParams) {
+    return calcInArray(params, originalParams, function (res, val) {
         if (res == undefined)
             return val;
         if (val == undefined || val == null)
@@ -7654,8 +7780,8 @@ function minInArray(params) {
     });
 }
 FunctionFactory.Instance.register("minInArray", minInArray);
-function maxInArray(params) {
-    return calcInArray(params, function (res, val) {
+function maxInArray(params, originalParams) {
+    return calcInArray(params, originalParams, function (res, val) {
         if (res == undefined)
             return val;
         if (val == undefined || val == null)
@@ -7664,8 +7790,8 @@ function maxInArray(params) {
     });
 }
 FunctionFactory.Instance.register("maxInArray", maxInArray);
-function countInArray(params) {
-    var res = calcInArray(params, function (res, val) {
+function countInArray(params, originalParams) {
+    var res = calcInArray(params, originalParams, function (res, val) {
         if (res == undefined)
             res = 0;
         if (val == undefined || val == null)
@@ -7675,11 +7801,11 @@ function countInArray(params) {
     return res !== undefined ? res : 0;
 }
 FunctionFactory.Instance.register("countInArray", countInArray);
-function avgInArray(params) {
-    var count = countInArray(params);
+function avgInArray(params, originalParams) {
+    var count = countInArray(params, originalParams);
     if (count == 0)
         return 0;
-    return sumInArray(params) / count;
+    return sumInArray(params, originalParams) / count;
 }
 FunctionFactory.Instance.register("avgInArray", avgInArray);
 function iif(params) {
@@ -7696,23 +7822,31 @@ function getDate(params) {
     return new Date(params[0]);
 }
 FunctionFactory.Instance.register("getDate", getDate);
+function dateDiffMonths(date1Param, date2Param, type) {
+    if (type === "days")
+        return diffDays([date1Param, date2Param]);
+    var date1 = !!date1Param ? new Date(date1Param) : new Date();
+    var date2 = !!date2Param ? new Date(date2Param) : new Date();
+    var age = date2.getFullYear() - date1.getFullYear();
+    type = type || "years";
+    var ageInMonths = age * 12 + date2.getMonth() - date1.getMonth();
+    if (date2.getDate() < date1.getDate()) {
+        ageInMonths -= 1;
+    }
+    return type === "months" ? ageInMonths : ~~(ageInMonths / 12);
+}
 function age(params) {
-    if (!params && params.length < 1)
-        return null;
-    if (!params[0])
+    if (!Array.isArray(params) || params.length < 1 || !params[0])
         return null;
-    var birthDate = new Date(params[0]);
-    var today = new Date();
-    var age = today.getFullYear() - birthDate.getFullYear();
-    if (age > 0) {
-        var m = today.getMonth() - birthDate.getMonth();
-        if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
-            age -= 1;
-        }
-    }
-    return age;
+    return dateDiffMonths(params[0], undefined, (params.length > 1 ? params[1] : "") || "years");
 }
 FunctionFactory.Instance.register("age", age);
+function dateDiff(params) {
+    if (!Array.isArray(params) || params.length < 2 || !params[0] || !params[1])
+        return null;
+    return dateDiffMonths(params[0], params[1], (params.length > 2 ? params[2] : "") || "days");
+}
+FunctionFactory.Instance.register("dateDiff", dateDiff);
 function isContainerReadyCore(container) {
     if (!container)
         return false;
@@ -10580,8 +10714,10 @@ var defaultListCss = {
     itemWithIcon: "sv-list__item--with-icon",
     itemDisabled: "sv-list__item--disabled",
     itemFocused: "sv-list__item--focused",
+    itemHovered: "sv-list__item--hovered",
     itemTextWrap: "sv-list__item-text--wrap",
     itemIcon: "sv-list__item-icon",
+    itemMarkerIcon: "sv-list-item__marker-icon",
     itemSeparator: "sv-list__item-separator",
     itemBody: "sv-list__item-body",
     itemsContainer: "sv-list",
@@ -10607,10 +10743,17 @@ var ListModel = /** @class */ (function (_super) {
             if (_this.allowSelection) {
                 _this.selectedItem = itemValue;
             }
+            var action = itemValue.action;
+            if (!!action) {
+                action(itemValue);
+            }
             if (!!_this.onSelectionChanged) {
                 _this.onSelectionChanged(itemValue);
             }
         };
+        _this.onItemHover = function (itemValue) {
+            _this.mouseOverHandler(itemValue);
+        };
         _this.isItemDisabled = function (itemValue) {
             return itemValue.enabled !== undefined && !itemValue.enabled;
         };
@@ -10633,6 +10776,7 @@ var ListModel = /** @class */ (function (_super) {
                 .append(_this.cssClasses.itemDisabled, _this.isItemDisabled(itemValue))
                 .append(_this.cssClasses.itemFocused, _this.isItemFocused(itemValue))
                 .append(_this.cssClasses.itemSelected, _this.isItemSelected(itemValue))
+                .append(_this.cssClasses.itemHovered, itemValue.isHovered)
                 .append(_this.cssClasses.itemTextWrap, _this.textWrapEnabled)
                 .append(itemValue.css)
                 .toString();
@@ -10678,6 +10822,26 @@ var ListModel = /** @class */ (function (_super) {
     ListModel.prototype.isItemVisible = function (item) {
         return item.visible && (!this.shouldProcessFilter || this.hasText(item, this.filterString));
     };
+    ListModel.prototype.getRenderedActions = function () {
+        var actions = _super.prototype.getRenderedActions.call(this);
+        if (this.filterString) {
+            var newActions_1 = [];
+            actions.forEach(function (action) {
+                newActions_1.push(action);
+                if (action.items) {
+                    action.items.forEach(function (item) {
+                        var a = new _actions_action__WEBPACK_IMPORTED_MODULE_2__["Action"](item);
+                        if (!a.iconName) {
+                            a.iconName = action.iconName;
+                        }
+                        newActions_1.push(a);
+                    });
+                }
+            });
+            return newActions_1;
+        }
+        return actions;
+    };
     Object.defineProperty(ListModel.prototype, "visibleItems", {
         get: function () {
             var _this = this;
@@ -10738,6 +10902,14 @@ var ListModel = /** @class */ (function (_super) {
     ListModel.prototype.getDefaultCssClasses = function () {
         return defaultListCss;
     };
+    ListModel.prototype.popupAfterShowCallback = function (itemValue) {
+        this.addScrollEventListener(function () {
+            itemValue.hidePopup();
+        });
+    };
+    ListModel.prototype.onItemLeave = function (itemValue) {
+        itemValue.hidePopupDelayed(this.subItemsHideDelay);
+    };
     ListModel.prototype.areSameItems = function (item1, item2) {
         if (!!this.areSameItemsCallback)
             return this.areSameItemsCallback(item1, item2);
@@ -11842,6 +12014,9 @@ var PopupModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false })
     ], PopupModel.prototype, "isModal", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: true })
+    ], PopupModel.prototype, "canShrink", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: true })
     ], PopupModel.prototype, "isFocusedContent", void 0);
@@ -11941,7 +12116,7 @@ var SurveyQuestionBooleanCheckbox = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: cssClasses.checkboxLabel },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { ref: this.checkRef, type: "checkbox", name: this.question.name, value: this.question.booleanValue === null
                             ? ""
-                            : this.question.booleanValue, id: this.question.inputId, className: cssClasses.controlCheckbox, disabled: this.isDisplayMode, checked: this.question.booleanValue || false, onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+                            : this.question.booleanValue, id: this.question.inputId, className: cssClasses.controlCheckbox, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.booleanValue || false, onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.checkboxMaterialDecorator },
                         this.question.svgIcon ?
                             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: cssClasses.checkboxItemDecorator },
@@ -12010,7 +12185,7 @@ var SurveyQuestionBooleanRadio = /** @class */ (function (_super) {
         var cssClasses = this.question.cssClasses;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { role: "presentation", className: this.question.getRadioItemClass(cssClasses, value) },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: cssClasses.radioLabel },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "radio", name: this.question.name, value: value, "aria-errormessage": this.question.ariaErrormessage, checked: value === this.question.booleanValueRendered, disabled: this.question.isInputReadOnly, className: cssClasses.itemRadioControl, onChange: this.handleOnChange }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "radio", name: this.question.name, value: value, "aria-errormessage": this.question.ariaErrormessage, checked: value === this.question.booleanValueRendered, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, className: cssClasses.itemRadioControl, onChange: this.handleOnChange }),
                 this.question.cssClasses.materialRadioDecorator ?
                     (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.materialRadioDecorator }, this.question.itemSvgIcon ?
                         (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: cssClasses.itemRadioDecorator },
@@ -12135,7 +12310,7 @@ var SurveyQuestionBoolean = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: itemClass, onClick: this.handleOnClick },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { ref: this.checkRef, type: "checkbox", name: this.question.name, value: this.question.booleanValue === null
                         ? ""
-                        : this.question.booleanValue, id: this.question.inputId, className: cssClasses.control, disabled: this.isDisplayMode, checked: this.question.booleanValue || false, onChange: this.handleOnChange, role: this.question.a11y_input_ariaRole, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }),
+                        : this.question.booleanValue, id: this.question.inputId, className: cssClasses.control, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.booleanValue || false, onChange: this.handleOnChange, role: this.question.a11y_input_ariaRole, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, _this.question.swapOrder); } },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.getLabelCss(this.question.swapOrder) }, this.renderLocString(this.question.locLabelLeft))),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.switch, onClick: this.handleOnSwitchClick },
@@ -12792,11 +12967,11 @@ var SurveyFilePreview = /** @class */ (function (_super) {
         var previews = this.question.previewValue.map(function (val, index) {
             if (!val)
                 return null;
-            return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { key: _this.question.inputId + "_" + index, className: _this.question.cssClasses.previewItem, style: { display: _this.question.isPreviewVisible(index) ? undefined : "none" } },
+            return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { key: _this.question.inputId + "_" + index, className: _this.question.cssClasses.previewItem, onClick: function (event) { return _this.question.doDownloadFileFromContainer(event); }, style: { display: _this.question.isPreviewVisible(index) ? undefined : "none" } },
                 _this.renderFileSign(_this.question.cssClasses.fileSign, val),
                 react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: _this.question.getImageWrapperCss(val) },
                     _this.question.canPreviewImage(val) ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", { src: val.content, style: { height: _this.question.imageHeight, width: _this.question.imageWidth }, alt: "File preview" })) : (_this.question.cssClasses.defaultImage ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { iconName: _this.question.cssClasses.defaultImageIconId, size: "auto", className: _this.question.cssClasses.defaultImage })) : null),
-                    val.name && !_this.question.isReadOnly ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: _this.question.getRemoveButtonCss(), onClick: function () { return _this.question.doRemoveFile(val); } },
+                    val.name && !_this.question.isReadOnly ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: _this.question.getRemoveButtonCss(), onClick: function (event) { return _this.question.doRemoveFile(val, event); } },
                         react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: _this.question.cssClasses.removeFile }, _this.question.removeFileCaption),
                         (_this.question.cssClasses.removeFileSvgIconId) ?
                             (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { title: _this.question.removeFileCaption, iconName: _this.question.cssClasses.removeFileSvgIconId, size: "auto", className: _this.question.cssClasses.removeFileSvg })) : null)) : null),
@@ -12953,6 +13128,166 @@ _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.re
 });
 
 
+/***/ }),
+
+/***/ "./src/react/components/list/list-item-content.tsx":
+/*!*********************************************************!*\
+  !*** ./src/react/components/list/list-item-content.tsx ***!
+  \*********************************************************/
+/*! exports provided: ListItemContent */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ListItemContent", function() { return ListItemContent; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../reactquestion_element */ "./src/react/reactquestion_element.tsx");
+/* harmony import */ var _svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __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 ListItemContent = /** @class */ (function (_super) {
+    __extends(ListItemContent, _super);
+    function ListItemContent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(ListItemContent.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ListItemContent.prototype, "item", {
+        get: function () {
+            return this.props.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ListItemContent.prototype.getStateElement = function () {
+        return this.item;
+    };
+    ListItemContent.prototype.render = function () {
+        if (!this.item)
+            return null;
+        var content = [];
+        var text = this.renderLocString(this.item.locTitle, undefined, "locString");
+        if (this.item.iconName) {
+            var icon = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { key: "icon", className: this.model.cssClasses.itemIcon, iconName: this.item.iconName, size: this.item.iconSize, "aria-label": this.item.title });
+            content.push(icon);
+            content.push(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { key: "text" }, text));
+        }
+        else {
+            content.push(text);
+        }
+        if (this.item.markerIconName) {
+            var icon = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { key: "marker", className: this.item.cssClasses.itemMarkerIcon, iconName: this.item.markerIconName, size: this.item.markerIconSize });
+            content.push(icon);
+        }
+        return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, content);
+    };
+    return ListItemContent;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.registerElement("sv-list-item-content", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ListItemContent, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/react/components/list/list-item-group.tsx":
+/*!*******************************************************!*\
+  !*** ./src/react/components/list/list-item-group.tsx ***!
+  \*******************************************************/
+/*! exports provided: ListItemGroup */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ListItemGroup", function() { return ListItemGroup; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../reactquestion_element */ "./src/react/reactquestion_element.tsx");
+/* harmony import */ var _popup_popup__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../popup/popup */ "./src/react/components/popup/popup.tsx");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+
+var ListItemGroup = /** @class */ (function (_super) {
+    __extends(ListItemGroup, _super);
+    function ListItemGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(ListItemGroup.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ListItemGroup.prototype, "item", {
+        get: function () {
+            return this.props.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ListItemGroup.prototype.getStateElement = function () {
+        return this.item;
+    };
+    ListItemGroup.prototype.render = function () {
+        var _a;
+        if (!this.item)
+            return null;
+        var newElement = _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.createElement("sv-list-item-content", { item: this.item, key: "content" + this.item.id, model: this.model });
+        return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null,
+            newElement,
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_popup_popup__WEBPACK_IMPORTED_MODULE_3__["Popup"], { model: (_a = this.item) === null || _a === void 0 ? void 0 : _a.popupModel }));
+    };
+    return ListItemGroup;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.registerElement("sv-list-item-group", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ListItemGroup, props);
+});
+
+
 /***/ }),
 
 /***/ "./src/react/components/list/list-item.tsx":
@@ -12970,7 +13305,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../element-factory */ "./src/react/element-factory.tsx");
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../reactquestion_element */ "./src/react/reactquestion_element.tsx");
 /* harmony import */ var _reactSurvey__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../reactSurvey */ "./src/react/reactSurvey.tsx");
-/* harmony import */ var _svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -12990,7 +13324,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
 var ListItem = /** @class */ (function (_super) {
     __extends(ListItem, _super);
     function ListItem() {
@@ -13025,25 +13358,9 @@ var ListItem = /** @class */ (function (_super) {
             paddingInlineStart: this.model.getItemIndent(this.item)
         };
         var className = this.model.getItemClass(this.item);
-        var content = [];
-        if (!this.item.component) {
-            var text = this.renderLocString(this.item.locTitle, undefined, "locString");
-            if (this.item.iconName) {
-                var icon = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { key: 1, className: this.model.cssClasses.itemIcon, iconName: this.item.iconName, size: this.item.iconSize, "aria-label": this.item.title });
-                content.push(icon);
-                content.push(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { key: 2 }, text));
-            }
-            else {
-                content.push(text);
-            }
-        }
-        else {
-            var newElement = _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.createElement(this.item.component, { item: this.item, key: this.item.id });
-            if (!!newElement) {
-                content.push(newElement);
-            }
-        }
-        var contentWrap = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { style: contentWrapStyle, className: this.model.cssClasses.itemBody, title: this.item.locTitle.calculatedText }, content);
+        var itemContent = this.item.component || "sv-list-item-content";
+        var newElement = _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.createElement(itemContent, { item: this.item, key: this.item.id, model: this.model });
+        var contentWrap = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { style: contentWrapStyle, className: this.model.cssClasses.itemBody, title: this.item.locTitle.calculatedText, onMouseOver: function (event) { _this.model.onItemHover(_this.item); }, onMouseLeave: function (event) { _this.model.onItemLeave(_this.item); } }, newElement);
         var separator = this.item.needSeparator ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.cssClasses.itemSeparator }) : null;
         var isVisible = this.model.isItemVisible(this.item);
         var style = {
@@ -14015,7 +14332,7 @@ var Popup = /** @class */ (function (_super) {
     };
     Popup.prototype.setTargetElement = function () {
         var container = this.containerRef.current;
-        this.popup.setComponentElement(container, this.props.getTarget ? this.props.getTarget(container) : undefined);
+        this.popup.setComponentElement(container, this.props.getTarget ? this.props.getTarget(container) : undefined, this.props.getArea ? this.props.getArea(container) : undefined);
     };
     Popup.prototype.componentDidMount = function () {
         _super.prototype.componentDidMount.call(this);
@@ -14344,7 +14661,7 @@ var RatingItemSmiley = /** @class */ (function (_super) {
     RatingItemSmiley.prototype.render = function () {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, style: this.question.getItemStyle(this.item.itemValue, this.item.highlight), className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); } },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { size: "auto", iconName: this.question.getItemSmileyIconName(this.item.itemValue), title: this.item.text })));
     };
     return RatingItemSmiley;
@@ -14399,7 +14716,7 @@ var RatingItemStar = /** @class */ (function (_super) {
     RatingItemStar.prototype.render = function () {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); } },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { className: "sv-star", size: "auto", iconName: this.question.itemStarIcon, title: this.item.text }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { className: "sv-star-2", size: "auto", iconName: this.question.itemStarIconAlt, title: this.item.text })));
     };
@@ -14491,7 +14808,7 @@ var RatingItem = /** @class */ (function (_super) {
     RatingItem.prototype.render = function () {
         var itemText = this.renderLocString(this.item.locText);
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClassByText(this.item.itemValue, this.item.text) },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.itemText }, itemText)));
     };
     RatingItem.prototype.componentDidMount = function () {
@@ -15267,7 +15584,7 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
             var text = (this.question.selectedItemLocText) ? this.renderLocString(this.question.selectedItemLocText) : "";
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            selectElement = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), disabled: true },
+            selectElement = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, tabIndex: this.question.isDisabledAttr ? undefined : 0, className: this.question.getControlClass() },
                 text,
                 this.renderReadOnlyElement());
         }
@@ -15301,7 +15618,7 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.noTabIndex ? undefined : 0, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant },
+            disabled: this.question.isDisabledAttr, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant },
             dropdownListModel.showHintPrefix ?
                 (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintPrefix },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, dropdownListModel.hintStringPrefix))) : null,
@@ -15311,7 +15628,7 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, dropdownListModel.inputStringRendered),
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, dropdownListModel.hintStringSuffix))) : null,
                 valueElement,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, role: dropdownListModel.filterStringEnabled ? this.question.ariaRole : undefined, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant, placeholder: dropdownListModel.placeholderRendered, readOnly: dropdownListModel.filterReadOnly ? true : undefined, tabIndex: dropdownListModel.noTabIndex ? undefined : -1, disabled: this.question.isInputReadOnly, inputMode: dropdownListModel.inputMode, onChange: function (e) { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus })),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, role: dropdownListModel.filterStringEnabled ? this.question.ariaRole : undefined, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant, placeholder: dropdownListModel.placeholderRendered, readOnly: dropdownListModel.filterReadOnly ? true : undefined, tabIndex: dropdownListModel.noTabIndex ? undefined : -1, disabled: this.question.isDisabledAttr, inputMode: dropdownListModel.inputMode, onChange: function (e) { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus })),
             this.createClearButton()));
     };
     SurveyQuestionDropdownBase.prototype.createClearButton = function () {
@@ -16158,6 +16475,8 @@ var SurveyQuestionImagePickerItem = /** @class */ (function (_super) {
         configurable: true
     });
     SurveyQuestionImagePickerItem.prototype.handleOnChange = function (event) {
+        if (this.question.isReadOnlyAttr)
+            return;
         if (this.question.multiSelect) {
             if (event.target.checked) {
                 this.question.value = this.question.value.concat(event.target.value);
@@ -16204,7 +16523,7 @@ var SurveyQuestionImagePickerItem = /** @class */ (function (_super) {
         }
         var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: cssClasses.label },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: cssClasses.itemControl, id: this.question.getItemId(item), type: this.question.inputType, name: this.question.questionName, checked: isChecked, value: item.value, disabled: !this.question.getItemEnabled(item), onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: cssClasses.itemControl, id: this.question.getItemId(item), type: this.question.inputType, name: this.question.questionName, checked: isChecked, value: item.value, disabled: !this.question.getItemEnabled(item), readOnly: this.question.isReadOnlyAttr, onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.itemDecorator },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.imageContainer },
                         !!this.question.cssClasses.checkedItemDecorator ?
@@ -18269,7 +18588,7 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
         var itemLabel = !this.hideCaption ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.controlLabel }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass, role: "presentation" },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: labelClass },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", role: "option", name: this.question.name + this.item.id, value: this.item.value, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), checked: isChecked, onChange: this.handleOnChange }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", role: "option", 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 }),
                 this.cssClasses.materialDecorator ?
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
@@ -18355,7 +18674,7 @@ var SurveyQuestionComment = /** @class */ (function (_super) {
         }
         var counter = !!this.question.getMaxLength() ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_character_counter__WEBPACK_IMPORTED_MODULE_4__["CharacterCounterComponent"], { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter })) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.question.inputId, className: this.question.className, disabled: this.question.isInputReadOnly, readOnly: this.question.isInputReadOnly, ref: function (textarea) { return (_this.setControl(textarea)); }, maxLength: this.question.getMaxLength(), placeholder: placeholder, 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 } }),
+            react__WEBPACK_IMPORTED_MODULE_0__["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, 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 } }),
             counter));
     };
     return SurveyQuestionComment;
@@ -18656,6 +18975,9 @@ var SurveyElementBase = /** @class */ (function (_super) {
     };
     SurveyElementBase.prototype.componentDidUpdate = function (prevProps, prevState) {
         this.makeBaseElementsReact();
+        this.getStateElements().forEach(function (el) {
+            el.afterRerender();
+        });
     };
     SurveyElementBase.prototype.allowComponentUpdate = function () {
         this._allowComponentUpdate = true;
@@ -18727,12 +19049,14 @@ var SurveyElementBase = /** @class */ (function (_super) {
     SurveyElementBase.prototype.makeBaseElementsReact = function () {
         var els = this.getStateElements();
         for (var i = 0; i < els.length; i++) {
+            els[i].enableOnElementRenderedEvent();
             this.makeBaseElementReact(els[i]);
         }
     };
     SurveyElementBase.prototype.unMakeBaseElementsReact = function () {
         var els = this.getStateElements();
         for (var i = 0; i < els.length; i++) {
+            els[i].disableOnElementRenderedEvent();
             this.unMakeBaseElementReact(els[i]);
         }
     };
@@ -19184,9 +19508,19 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
         var clearButton = this.question.showRemoveButton ? this.renderClearButton(this.question.cssClasses.removeButton) : null;
         var clearButtonBottom = this.question.showRemoveButtonBottom ? this.renderClearButton(this.question.cssClasses.removeButtonBottom) : null;
         var fileNavigator = this.question.fileNavigatorVisible ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: this.question.fileNavigator })) : null;
-        var fileInput = (this.isDisplayMode ?
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "file", disabled: this.isDisplayMode, className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, multiple: this.question.allowMultiple, placeholder: this.question.title, accept: this.question.acceptedTypes }) : this.question.hasFileUI ?
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "file", disabled: this.isDisplayMode, tabIndex: -1, className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, multiple: this.question.allowMultiple, title: this.question.inputTitle, accept: this.question.acceptedTypes, capture: this.question.renderCapture }) : null);
+        var fileInput;
+        if (this.question.isReadOnlyAttr) {
+            fileInput = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { readOnly: true, type: "file", className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, multiple: this.question.allowMultiple, placeholder: this.question.title, accept: this.question.acceptedTypes });
+        }
+        else if (this.question.isDisabledAttr) {
+            fileInput = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { disabled: true, type: "file", className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, multiple: this.question.allowMultiple, placeholder: this.question.title, accept: this.question.acceptedTypes });
+        }
+        else if (this.question.hasFileUI) {
+            fileInput = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "file", disabled: this.isDisplayMode, tabIndex: -1, className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, multiple: this.question.allowMultiple, title: this.question.inputTitle, accept: this.question.acceptedTypes, capture: this.question.renderCapture });
+        }
+        else {
+            fileInput = null;
+        }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.fileRootCss },
             fileInput,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.dragArea, onDrop: this.question.onDrop, onDragOver: this.question.onDragOver, onDragLeave: this.question.onDragLeave, onDragEnter: this.question.onDragEnter },
@@ -19578,7 +19912,7 @@ var SurveyQuestionMatrixCell = /** @class */ (function (_super) {
             mobileSpan));
     };
     SurveyQuestionMatrixCell.prototype.renderInput = function (inputId, isChecked) {
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: this.row.fullName, value: this.column.value, disabled: this.row.isReadOnly, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(this.row.locText.renderedHtml, this.column.locText.renderedHtml), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: this.row.fullName, value: this.column.value, disabled: this.row.isDisabledAttr, readOnly: this.row.isReadOnlyAttr, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(this.row.locText.renderedHtml, this.column.locText.renderedHtml), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }));
     };
     return SurveyQuestionMatrixCell;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
@@ -19689,71 +20023,39 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
-    __extends(SurveyQuestionMatrixDropdownBase, _super);
-    function SurveyQuestionMatrixDropdownBase(props) {
-        var _this = _super.call(this, props) || this;
-        //Create rendered table in contructor and not on rendering
-        var table = _this.question.renderedTable;
-        _this.state = _this.getState();
-        return _this;
+var SurveyQuestionMatrixTable = /** @class */ (function (_super) {
+    __extends(SurveyQuestionMatrixTable, _super);
+    function SurveyQuestionMatrixTable() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    Object.defineProperty(SurveyQuestionMatrixDropdownBase.prototype, "question", {
+    Object.defineProperty(SurveyQuestionMatrixTable.prototype, "question", {
         get: function () {
-            return this.questionBase;
+            return this.props.question;
         },
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionMatrixDropdownBase.prototype.getState = function (prevState) {
-        if (prevState === void 0) { prevState = null; }
-        return { rowCounter: !prevState ? 0 : prevState.rowCounter + 1 };
-    };
-    SurveyQuestionMatrixDropdownBase.prototype.updateStateOnCallback = function () {
-        if (this.isRendering)
-            return;
-        this.setState(this.getState(this.state));
-    };
-    SurveyQuestionMatrixDropdownBase.prototype.componentDidMount = function () {
-        var _this = this;
-        _super.prototype.componentDidMount.call(this);
-        this.question.visibleRowsChangedCallback = function () {
-            _this.updateStateOnCallback();
-        };
-        this.question.onRenderedTableResetCallback = function () {
-            _this.question.renderedTable.renderedRowsChangedCallback = function () {
-                _this.updateStateOnCallback();
-            };
-            _this.updateStateOnCallback();
-        };
-        this.question.renderedTable.renderedRowsChangedCallback = function () {
-            _this.updateStateOnCallback();
-        };
-    };
-    SurveyQuestionMatrixDropdownBase.prototype.componentWillUnmount = function () {
-        _super.prototype.componentWillUnmount.call(this);
-        this.question.visibleRowsChangedCallback = function () { };
-        this.question.onRenderedTableResetCallback = function () { };
-        this.question.renderedTable.renderedRowsChangedCallback = function () { };
-    };
-    SurveyQuestionMatrixDropdownBase.prototype.renderElement = function () {
-        return this.renderTableDiv();
+    Object.defineProperty(SurveyQuestionMatrixTable.prototype, "creator", {
+        get: function () {
+            return this.props.creator;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionMatrixTable.prototype, "table", {
+        get: function () {
+            return this.question.renderedTable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionMatrixTable.prototype.getStateElement = function () {
+        return this.table;
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderTableDiv = function () {
-        var _this = this;
-        var header = this.renderHeader();
-        var footers = this.renderFooter();
-        var rows = this.renderRows();
-        var divStyle = this.question.showHorizontalScroll
-            ? { overflowX: "scroll" }
-            : {};
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { style: divStyle, className: this.question.cssClasses.tableWrapper, ref: function (root) { return (_this.setControl(root)); } },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("table", { className: this.question.getTableCss() },
-                header,
-                rows,
-                footers)));
+    SurveyQuestionMatrixTable.prototype.wrapCell = function (cell, element, reason) {
+        return this.props.wrapCell(cell, element, reason);
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderHeader = function () {
+    SurveyQuestionMatrixTable.prototype.renderHeader = function () {
         var table = this.question.renderedTable;
         if (!table.showHeader)
             return null;
@@ -19781,14 +20083,14 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("thead", null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tr", null, headers)));
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderFooter = function () {
+    SurveyQuestionMatrixTable.prototype.renderFooter = function () {
         var table = this.question.renderedTable;
         if (!table.showFooter)
             return null;
         var row = this.renderRow("footer", table.footerRow, this.question.cssClasses, "row-footer");
         return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tfoot", null, row);
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderRows = function () {
+    SurveyQuestionMatrixTable.prototype.renderRows = function () {
         var cssClasses = this.question.cssClasses;
         var rows = [];
         var renderedRows = this.question.renderedTable.renderedRows;
@@ -19797,7 +20099,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         }
         return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tbody", null, rows);
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderRow = function (keyValue, row, cssClasses, reason) {
+    SurveyQuestionMatrixTable.prototype.renderRow = function (keyValue, row, cssClasses, reason) {
         var matrixrow = [];
         var cells = row.cells;
         for (var i = 0; i < cells.length; i++) {
@@ -19806,7 +20108,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         var key = "row" + keyValue;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], { key: key }, (reason == "row-footer") ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tr", null, matrixrow) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_matrix_row__WEBPACK_IMPORTED_MODULE_7__["MatrixRow"], { model: row, parentMatrix: this.question }, matrixrow)));
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderCell = function (cell, index, cssClasses, reason) {
+    SurveyQuestionMatrixTable.prototype.renderCell = function (cell, index, cssClasses, reason) {
         var key = "cell" + index;
         if (cell.hasQuestion) {
             return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixDropdownCell, { key: key, cssClasses: cssClasses, cell: cell, creator: this.creator, reason: reason }));
@@ -19826,7 +20128,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { className: cell.className, key: key, style: cellStyle, colSpan: cell.colSpans, "data-responsive-title": cell.headers, title: cell.getTitle() }, cellContent));
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderCellContent = function (cell, reason, cssClasses) {
+    SurveyQuestionMatrixTable.prototype.renderCellContent = function (cell, reason, cssClasses) {
         var cellContent = null;
         var cellStyle = null;
         if (!!cell.width || !!cell.minWidth) {
@@ -19868,6 +20170,64 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         var readyCell = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, cellContent));
         return this.wrapCell(cell, readyCell, reason);
     };
+    SurveyQuestionMatrixTable.prototype.renderElement = function () {
+        var header = this.renderHeader();
+        var footers = this.renderFooter();
+        var rows = this.renderRows();
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("table", { className: this.question.getTableCss() },
+            header,
+            rows,
+            footers));
+    };
+    return SurveyQuestionMatrixTable;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"]));
+var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
+    __extends(SurveyQuestionMatrixDropdownBase, _super);
+    function SurveyQuestionMatrixDropdownBase(props) {
+        var _this = _super.call(this, props) || this;
+        //Create rendered table in contructor and not on rendering
+        var table = _this.question.renderedTable;
+        _this.state = _this.getState();
+        return _this;
+    }
+    Object.defineProperty(SurveyQuestionMatrixDropdownBase.prototype, "question", {
+        get: function () {
+            return this.questionBase;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionMatrixDropdownBase.prototype.getState = function (prevState) {
+        if (prevState === void 0) { prevState = null; }
+        return { rowCounter: !prevState ? 0 : prevState.rowCounter + 1 };
+    };
+    SurveyQuestionMatrixDropdownBase.prototype.updateStateOnCallback = function () {
+        if (this.isRendering)
+            return;
+        this.setState(this.getState(this.state));
+    };
+    SurveyQuestionMatrixDropdownBase.prototype.componentDidMount = function () {
+        var _this = this;
+        _super.prototype.componentDidMount.call(this);
+        this.question.onRenderedTableResetCallback = function () {
+            _this.updateStateOnCallback();
+        };
+    };
+    SurveyQuestionMatrixDropdownBase.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        this.question.onRenderedTableResetCallback = function () { };
+    };
+    SurveyQuestionMatrixDropdownBase.prototype.renderElement = function () {
+        return this.renderTableDiv();
+    };
+    SurveyQuestionMatrixDropdownBase.prototype.renderTableDiv = function () {
+        var _this = this;
+        var divStyle = this.question.showHorizontalScroll
+            ? { overflowX: "scroll" }
+            : {};
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { style: divStyle, className: this.question.cssClasses.tableWrapper, ref: function (root) { return (_this.setControl(root)); } },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixTable, { question: this.question, creator: this.creator, wrapCell: function (cell, element, reason) { return _this.wrapCell(cell, element, reason); } })));
+    };
     return SurveyQuestionMatrixDropdownBase;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyQuestionElementBase"]));
 
@@ -20742,7 +21102,7 @@ var SurveyQuestionRadioItem = /** @class */ (function (_super) {
         var itemLabel = !this.hideCaption ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: controlLabelClass }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass, role: "presentation" },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: labelClass },
-                react__WEBPACK_IMPORTED_MODULE_0__["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), onChange: this.handleOnChange }),
+                react__WEBPACK_IMPORTED_MODULE_0__["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 ?
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
@@ -20768,18 +21128,20 @@ _reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__["ReactQuestionFactory"].Inst
 /*!*********************************************!*\
   !*** ./src/react/reactquestion_ranking.tsx ***!
   \*********************************************/
-/*! exports provided: SurveyQuestionRanking, SurveyQuestionRankingItem */
+/*! exports provided: SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRanking", function() { return SurveyQuestionRanking; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRankingItem", function() { return SurveyQuestionRankingItem; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRankingItemContent", function() { return SurveyQuestionRankingItemContent; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
 /* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
 /* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactsurveymodel */ "./src/react/reactsurveymodel.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -20799,6 +21161,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyQuestionRanking = /** @class */ (function (_super) {
     __extends(SurveyQuestionRanking, _super);
     function SurveyQuestionRanking() {
@@ -20820,15 +21183,15 @@ var SurveyQuestionRanking = /** @class */ (function (_super) {
             var unrankedItem = true;
             return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.rootClass, ref: function (root) { return (_this.setControl(root)); } },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getContainerClasses("from"), "data-ranking": "from-container" },
-                    this.getItems(this.question.unRankingChoices, unrankedItem),
-                    this.question.unRankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder },
+                    this.getItems(this.question.renderedUnRankingChoices, unrankedItem),
+                    this.question.renderedUnRankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder },
                         " ",
                         this.renderLocString(this.question.locSelectToRankEmptyRankedAreaText),
                         " ") : null),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containersDivider }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getContainerClasses("to"), "data-ranking": "to-container" },
                     this.getItems(),
-                    this.question.rankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder },
+                    this.question.renderedRankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder },
                         " ",
                         this.renderLocString(this.question.locSelectToRankEmptyUnrankedAreaText),
                         " ") : null)));
@@ -20836,7 +21199,7 @@ var SurveyQuestionRanking = /** @class */ (function (_super) {
     };
     SurveyQuestionRanking.prototype.getItems = function (choices, unrankedItem) {
         var _this = this;
-        if (choices === void 0) { choices = this.question.rankingChoices; }
+        if (choices === void 0) { choices = this.question.renderedRankingChoices; }
         var items = [];
         var _loop_1 = function (i) {
             var item = choices[i];
@@ -20969,6 +21332,7 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.dashSvgIcon })));
     };
     SurveyQuestionRankingItem.prototype.renderElement = function () {
+        var itemContentComponent = _element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.createElement(this.question.itemContentComponent, { item: this.item, cssClasses: this.cssClasses });
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: this.itemTabIndex, className: this.itemClass, onKeyDown: this.handleKeydown, onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, "data-sv-drop-target-ranking-item": this.index },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: -1, style: { outline: "none" } },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.itemGhostNode }),
@@ -20979,11 +21343,39 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.question.getIconFocusCss() },
                             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.arrowsSvgIcon }))),
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getItemIndexClasses(this.item) }, (!this.unrankedItem && this.indexText) ? this.indexText : this.renderEmptyIcon()),
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.controlLabel }, this.text)))));
+                    itemContentComponent))));
     };
     return SurveyQuestionRankingItem;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
 
+var SurveyQuestionRankingItemContent = /** @class */ (function (_super) {
+    __extends(SurveyQuestionRankingItemContent, _super);
+    function SurveyQuestionRankingItemContent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SurveyQuestionRankingItemContent.prototype, "item", {
+        get: function () {
+            return this.props.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionRankingItemContent.prototype, "cssClasses", {
+        get: function () {
+            return this.props.cssClasses;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionRankingItemContent.prototype.renderElement = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.controlLabel }, _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"].renderLocString(this.item.locText));
+    };
+    return SurveyQuestionRankingItemContent;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.registerElement("sv-ranking-item-content", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRankingItemContent, props);
+});
 _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__["ReactQuestionFactory"].Instance.registerQuestion("ranking", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRanking, props);
 });
@@ -21214,7 +21606,9 @@ var SurveyQuestionText = /** @class */ (function (_super) {
         }
         var counter = !!this.question.getMaxLength() ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_character_counter__WEBPACK_IMPORTED_MODULE_3__["CharacterCounterComponent"], { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter })) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: this.question.inputId, disabled: this.isDisplayMode, className: inputClass, type: this.question.inputType, 
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: this.question.inputId, 
+                // disabled={this.isDisplayMode}
+                disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, className: inputClass, type: this.question.inputType, 
                 //ref={this.controlRef}
                 ref: function (input) { return (_this.setControl(input)); }, style: this.question.inputStyle, maxLength: this.question.getMaxLength(), min: this.question.renderedMin, max: this.question.renderedMax, step: this.question.renderedStep, size: this.question.inputSize, placeholder: placeholder, list: this.question.dataListId, autoComplete: this.question.autocomplete, onBlur: this.question.onBlur, onFocus: this.question.onFocus, onChange: this.question.onChange, onKeyUp: this.question.onKeyUp, onKeyDown: this.question.onKeyDown, onCompositionUpdate: function (event) { return _this.question.onCompositionUpdate(event.nativeEvent); }, "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 }),
             counter));
@@ -23107,12 +23501,12 @@ var SurveyElement = /** @class */ (function (_super) {
         }
         return info;
     };
-    SurveyElement.ScrollElementToTop = function (elementId, scrollIfVisible) {
+    SurveyElement.ScrollElementToTop = function (elementId, scrollIfVisible, scrollIntoViewOptions) {
         var root = _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root;
         if (!elementId || typeof root === "undefined")
             return false;
         var el = root.getElementById(elementId);
-        return SurveyElement.ScrollElementToViewCore(el, false, scrollIfVisible);
+        return SurveyElement.ScrollElementToViewCore(el, false, scrollIfVisible, scrollIntoViewOptions);
     };
     SurveyElement.ScrollElementToViewCore = function (el, checkLeft, scrollIfVisible, scrollIntoViewOptions) {
         if (!el || !el.scrollIntoView)
@@ -24203,6 +24597,8 @@ var SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyElement.prototype.onElementExpanded = function (elementIsRendered) {
+    };
     SurveyElement.prototype.getExpandCollapseAnimationOptions = function () {
         var _this = this;
         var beforeRunAnimation = function (el) {
@@ -24213,12 +24609,16 @@ var SurveyElement = /** @class */ (function (_super) {
             _this.isAnimatingCollapseExpand = false;
         };
         return {
+            getRerenderEvent: function () { return _this.onElementRerendered; },
             getEnterOptions: function () {
                 var cssClasses = _this.isPanel ? _this.cssClasses.panel : _this.cssClasses;
                 return {
                     cssClass: cssClasses.contentFadeIn,
                     onBeforeRunAnimation: beforeRunAnimation,
-                    onAfterRunAnimation: afterRunAnimation,
+                    onAfterRunAnimation: function (el) {
+                        afterRunAnimation(el);
+                        _this.onElementExpanded(true);
+                    },
                 };
             },
             getLeaveOptions: function () {
@@ -24239,15 +24639,26 @@ var SurveyElement = /** @class */ (function (_super) {
                 }
                 return undefined;
             },
-            isAnimationEnabled: function () { return _this.animationAllowed && !_this.isDesignMode; }
+            isAnimationEnabled: function () { return _this.isExpandCollapseAnimationEnabled; }
         };
     };
+    Object.defineProperty(SurveyElement.prototype, "isExpandCollapseAnimationEnabled", {
+        get: function () {
+            return this.animationAllowed && !this.isDesignMode;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyElement.prototype, "renderedIsExpanded", {
         get: function () {
             return !!this._renderedIsExpanded;
         },
         set: function (val) {
+            var oldValue = this._renderedIsExpanded;
             this.animationCollapsed.sync(val);
+            if (!this.isExpandCollapseAnimationEnabled && !oldValue && this.renderedIsExpanded) {
+                this.onElementExpanded(false);
+            }
         },
         enumerable: false,
         configurable: true
@@ -24415,8 +24826,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationBoolean", function() { return AnimationBoolean; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationGroup", function() { return AnimationGroup; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationTab", function() { return AnimationTab; });
-/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../global_variables_utils */ "./src/global_variables_utils.ts");
-/* harmony import */ var _taskmanager__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./taskmanager */ "./src/utils/taskmanager.ts");
+/* harmony import */ var _taskmanager__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./taskmanager */ "./src/utils/taskmanager.ts");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ "./src/utils/utils.ts");
+/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../global_variables_utils */ "./src/global_variables_utils.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -24434,6 +24846,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 })();
 
 
+
 var AnimationUtils = /** @class */ (function () {
     function AnimationUtils() {
         this.cancelQueue = [];
@@ -24477,7 +24890,7 @@ var AnimationUtils = /** @class */ (function () {
         var animationsCount = this.getAnimationsCount(element);
         var onEndCallback = function (isCancel) {
             if (isCancel === void 0) { isCancel = true; }
-            options.onAfterRunAnimation && options.onAfterRunAnimation(element);
+            _this.afterAnimationRun(element, options);
             callback(isCancel);
             clearTimeout(cancelTimeout);
             _this.removeCancelCallback(onEndCallback);
@@ -24496,9 +24909,15 @@ var AnimationUtils = /** @class */ (function () {
             }, this.getAnimationDuration(element) + 10);
         }
         else {
+            this.afterAnimationRun(element, options);
             callback(true);
         }
     };
+    AnimationUtils.prototype.afterAnimationRun = function (element, options) {
+        if (element && options) {
+            options.onAfterRunAnimation && options.onAfterRunAnimation(element);
+        }
+    };
     AnimationUtils.prototype.beforeAnimationRun = function (element, options) {
         if (element && options) {
             options.onBeforeRunAnimation && options.onBeforeRunAnimation(element);
@@ -24508,7 +24927,7 @@ var AnimationUtils = /** @class */ (function () {
         return options.cssClass.replace(/\s+$/, "").split(/\s+/);
     };
     AnimationUtils.prototype.runAnimation = function (element, options, callback) {
-        if (element && options.cssClass) {
+        if (element && (options === null || options === void 0 ? void 0 : options.cssClass)) {
             this.reflow(element);
             this.getCssClasses(options).forEach(function (cssClass) {
                 element.classList.add(cssClass);
@@ -24526,30 +24945,24 @@ var AnimationUtils = /** @class */ (function () {
             });
         }
     };
-    AnimationUtils.prototype.onNextRender = function (callback, runEarly, isCancel) {
+    AnimationUtils.prototype.onNextRender = function (callback, isCancel) {
         var _this = this;
         if (isCancel === void 0) { isCancel = false; }
-        if (!isCancel && _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].isAvailable()) {
+        if (!isCancel && _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomWindowHelper"].isAvailable()) {
             var cancelCallback_1 = function () {
-                callback();
+                callback(true);
                 cancelAnimationFrame(latestRAF_1);
             };
-            var latestRAF_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-                if (runEarly && runEarly()) {
-                    callback();
+            var latestRAF_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomWindowHelper"].requestAnimationFrame(function () {
+                latestRAF_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomWindowHelper"].requestAnimationFrame(function () {
+                    callback(false);
                     _this.removeCancelCallback(cancelCallback_1);
-                }
-                else {
-                    latestRAF_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-                        callback();
-                        _this.removeCancelCallback(cancelCallback_1);
-                    });
-                }
+                });
             });
             this.addCancelCallback(cancelCallback_1);
         }
         else {
-            callback();
+            callback(true);
         }
     };
     AnimationUtils.prototype.cancel = function () {
@@ -24567,25 +24980,23 @@ var AnimationPropertyUtils = /** @class */ (function (_super) {
     }
     AnimationPropertyUtils.prototype.onEnter = function (options) {
         var _this = this;
-        this.onNextRender(function () {
-            var htmlElement = options.getAnimatedElement();
-            var enterOptions = options.getEnterOptions();
-            _this.beforeAnimationRun(htmlElement, enterOptions);
-            _this.runAnimation(htmlElement, enterOptions, function () {
-                _this.clearHtmlElement(htmlElement, enterOptions);
-            });
-        }, function () { return !!options.getAnimatedElement(); });
+        var htmlElement = options.getAnimatedElement();
+        var enterOptions = options.getEnterOptions ? options.getEnterOptions() : {};
+        this.beforeAnimationRun(htmlElement, enterOptions);
+        this.runAnimation(htmlElement, enterOptions, function () {
+            _this.clearHtmlElement(htmlElement, enterOptions);
+        });
     };
     AnimationPropertyUtils.prototype.onLeave = function (options, callback) {
         var _this = this;
         var htmlElement = options.getAnimatedElement();
-        var leaveOptions = options.getLeaveOptions();
+        var leaveOptions = options.getLeaveOptions ? options.getLeaveOptions() : {};
         this.beforeAnimationRun(htmlElement, leaveOptions);
         this.runAnimation(htmlElement, leaveOptions, function (isCancel) {
             callback();
             _this.onNextRender(function () {
                 _this.clearHtmlElement(htmlElement, leaveOptions);
-            }, undefined, isCancel);
+            }, isCancel);
         });
     };
     return AnimationPropertyUtils;
@@ -24596,40 +25007,54 @@ var AnimationGroupUtils = /** @class */ (function (_super) {
     function AnimationGroupUtils() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    AnimationGroupUtils.prototype.runGroupAnimation = function (options, addedElements, removedElements, callback) {
+    AnimationGroupUtils.prototype.runGroupAnimation = function (options, addedItems, removedItems, reorderedItems, callback) {
         var _this = this;
-        this.onNextRender(function () {
-            var addedHtmlElements = addedElements.map(function (el) { return options.getAnimatedElement(el); });
-            var enterOptions = addedElements.map(function (el) { return options.getEnterOptions(el); });
-            var removedHtmlElements = removedElements.map(function (el) { return options.getAnimatedElement(el); });
-            var leaveOptions = removedElements.map(function (el) { return options.getLeaveOptions(el); });
-            addedElements.forEach(function (_, i) {
-                _this.beforeAnimationRun(addedHtmlElements[i], enterOptions[i]);
-            });
-            removedElements.forEach(function (_, i) {
-                _this.beforeAnimationRun(removedHtmlElements[i], leaveOptions[i]);
-            });
-            var counter = addedElements.length + removedElements.length;
-            var onAnimationEndCallback = function (isCancel) {
-                if (--counter <= 0) {
-                    callback && callback();
-                    _this.onNextRender(function () {
-                        addedElements.forEach(function (_, i) {
-                            _this.clearHtmlElement(addedHtmlElements[i], enterOptions[i]);
-                        });
-                        removedElements.forEach(function (_, i) {
-                            _this.clearHtmlElement(removedHtmlElements[i], leaveOptions[i]);
-                        });
-                    }, undefined, isCancel);
-                }
-            };
-            addedElements.forEach(function (_, i) {
-                _this.runAnimation(addedHtmlElements[i], enterOptions[i], onAnimationEndCallback);
-            });
-            removedElements.forEach(function (_, i) {
-                _this.runAnimation(removedHtmlElements[i], leaveOptions[i], onAnimationEndCallback);
-            });
-        }, function () { return addedElements.length == 0 || addedElements.some(function (el) { return !!options.getAnimatedElement(el); }); });
+        var info = {
+            isAddingRunning: addedItems.length > 0,
+            isDeletingRunning: removedItems.length > 0,
+            isReorderingRunning: reorderedItems.length > 0
+        };
+        var addedHtmlElements = addedItems.map(function (el) { return options.getAnimatedElement(el); });
+        var enterOptions = addedItems.map(function (el) { return options.getEnterOptions ? options.getEnterOptions(el, info) : {}; });
+        var removedHtmlElements = removedItems.map(function (el) { return options.getAnimatedElement(el); });
+        var leaveOptions = removedItems.map(function (el) { return options.getLeaveOptions ? options.getLeaveOptions(el, info) : {}; });
+        var reorderedHtmlElements = reorderedItems.map(function (el) { return options.getAnimatedElement(el.item); });
+        var reorderedOptions = reorderedItems.map(function (el) { return options.getReorderOptions ? options.getReorderOptions(el.item, el.movedForward, info) : {}; });
+        addedItems.forEach(function (_, i) {
+            _this.beforeAnimationRun(addedHtmlElements[i], enterOptions[i]);
+        });
+        removedItems.forEach(function (_, i) {
+            _this.beforeAnimationRun(removedHtmlElements[i], leaveOptions[i]);
+        });
+        reorderedItems.forEach(function (_, i) {
+            _this.beforeAnimationRun(reorderedHtmlElements[i], reorderedOptions[i]);
+        });
+        var counter = addedItems.length + removedItems.length + reorderedHtmlElements.length;
+        var onAnimationEndCallback = function (isCancel) {
+            if (--counter <= 0) {
+                callback && callback();
+                _this.onNextRender(function () {
+                    addedItems.forEach(function (_, i) {
+                        _this.clearHtmlElement(addedHtmlElements[i], enterOptions[i]);
+                    });
+                    removedItems.forEach(function (_, i) {
+                        _this.clearHtmlElement(removedHtmlElements[i], leaveOptions[i]);
+                    });
+                    reorderedItems.forEach(function (_, i) {
+                        _this.clearHtmlElement(reorderedHtmlElements[i], reorderedOptions[i]);
+                    });
+                }, isCancel);
+            }
+        };
+        addedItems.forEach(function (_, i) {
+            _this.runAnimation(addedHtmlElements[i], enterOptions[i], onAnimationEndCallback);
+        });
+        removedItems.forEach(function (_, i) {
+            _this.runAnimation(removedHtmlElements[i], leaveOptions[i], onAnimationEndCallback);
+        });
+        reorderedItems.forEach(function (_, i) {
+            _this.runAnimation(reorderedHtmlElements[i], reorderedOptions[i], onAnimationEndCallback);
+        });
     };
     return AnimationGroupUtils;
 }(AnimationUtils));
@@ -24640,11 +25065,51 @@ var AnimationProperty = /** @class */ (function () {
         this.animationOptions = animationOptions;
         this.update = update;
         this.getCurrentValue = getCurrentValue;
-        this._debouncedSync = Object(_taskmanager__WEBPACK_IMPORTED_MODULE_1__["debounce"])(function (newValue) {
+        this._debouncedSync = Object(_taskmanager__WEBPACK_IMPORTED_MODULE_0__["debounce"])(function (newValue) {
             _this.animation.cancel();
-            _this._sync(newValue);
+            try {
+                _this._sync(newValue);
+            }
+            catch (_a) {
+                _this.update(newValue);
+            }
         });
     }
+    AnimationProperty.prototype.onNextRender = function (callback, onCancel) {
+        var _this = this;
+        var rerenderEvent = this.animationOptions.getRerenderEvent();
+        if (!rerenderEvent) {
+            if (_global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomWindowHelper"].isAvailable()) {
+                var raf_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomWindowHelper"].requestAnimationFrame(function () {
+                    callback();
+                    _this.cancelCallback = undefined;
+                });
+                this.cancelCallback = function () {
+                    onCancel && onCancel();
+                    cancelAnimationFrame(raf_1);
+                    _this.cancelCallback = undefined;
+                };
+            }
+            else {
+                throw new Error("Can't get next render");
+            }
+        }
+        else {
+            var clear_1 = function () {
+                rerenderEvent.remove(nextRenderCallback_1);
+                _this.cancelCallback = undefined;
+            };
+            var nextRenderCallback_1 = function () {
+                callback();
+                clear_1();
+            };
+            this.cancelCallback = function () {
+                onCancel && onCancel();
+                clear_1();
+            };
+            rerenderEvent.add(nextRenderCallback_1);
+        }
+    };
     AnimationProperty.prototype.sync = function (newValue) {
         if (this.animationOptions.isAnimationEnabled()) {
             this._debouncedSync.run(newValue);
@@ -24655,8 +25120,9 @@ var AnimationProperty = /** @class */ (function () {
         }
     };
     AnimationProperty.prototype.cancel = function () {
-        this.animation.cancel();
         this._debouncedSync.cancel();
+        this.cancelCallback && this.cancelCallback();
+        this.animation.cancel();
     };
     return AnimationProperty;
 }());
@@ -24672,8 +25138,10 @@ var AnimationBoolean = /** @class */ (function (_super) {
         var _this = this;
         if (newValue !== this.getCurrentValue()) {
             if (newValue) {
+                this.onNextRender(function () {
+                    _this.animation.onEnter(_this.animationOptions);
+                });
                 this.update(newValue);
-                this.animation.onEnter(this.animationOptions);
             }
             else {
                 this.animation.onLeave(this.animationOptions, function () {
@@ -24697,15 +25165,34 @@ var AnimationGroup = /** @class */ (function (_super) {
     }
     AnimationGroup.prototype._sync = function (newValue) {
         var _this = this;
+        var _a, _b;
         var oldValue = this.getCurrentValue();
-        var itemsToAdd = newValue.filter(function (el) { return oldValue.indexOf(el) < 0; });
-        var deletedItems = oldValue.filter(function (el) { return newValue.indexOf(el) < 0; });
-        if (itemsToAdd.length == 0 && (deletedItems === null || deletedItems === void 0 ? void 0 : deletedItems.length) > 0) {
-            this.animation.runGroupAnimation(this.animationOptions, [], deletedItems, function () { return _this.update(newValue); });
+        var allowSyncRemovalAddition = (_a = this.animationOptions.allowSyncRemovalAddition) !== null && _a !== void 0 ? _a : true;
+        var _c = Object(_utils__WEBPACK_IMPORTED_MODULE_1__["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)) {
+            deletedItems = [];
+            mergedItems = newValue;
+        }
+        var runAnimationCallback = function () {
+            _this.animation.runGroupAnimation(_this.animationOptions, addedItems, deletedItems, reorderedItems, function () {
+                if (deletedItems.length > 0) {
+                    _this.update(newValue);
+                }
+            });
+        };
+        if ([addedItems, deletedItems, reorderedItems].some(function (arr) { return arr.length > 0; })) {
+            if (deletedItems.length <= 0 || reorderedItems.length > 0 || addedItems.length > 0) {
+                this.onNextRender(runAnimationCallback, function () {
+                    _this.update(newValue);
+                });
+                this.update(mergedItems);
+            }
+            else {
+                runAnimationCallback();
+            }
         }
         else {
             this.update(newValue);
-            this.animation.runGroupAnimation(this.animationOptions, itemsToAdd, []);
         }
     };
     return AnimationGroup;
@@ -24724,10 +25211,12 @@ var AnimationTab = /** @class */ (function (_super) {
         var oldValue = [].concat(this.getCurrentValue());
         if (oldValue[0] !== newValue[0]) {
             var tempValue = !!this.mergeValues ? this.mergeValues(newValue, oldValue) : [].concat(oldValue, newValue);
+            this.onNextRender(function () {
+                _this.animation.runGroupAnimation(_this.animationOptions, newValue, oldValue, [], function () {
+                    _this.update(newValue);
+                });
+            }, function () { return _this.update(newValue); });
             this.update(tempValue, true);
-            this.animation.runGroupAnimation(this.animationOptions, newValue, oldValue, function () {
-                _this.update(newValue);
-            });
         }
         else {
             this.update(newValue);
@@ -25100,7 +25589,7 @@ function debounce(func) {
 /*!****************************!*\
   !*** ./src/utils/utils.ts ***!
   \****************************/
-/*! exports provided: unwrap, getRenderedSize, getRenderedStyleSize, doKey2ClickBlur, doKey2ClickUp, doKey2ClickDown, sanitizeEditableContent, Logger, showConfirmDialog, configConfirmDialog, mergeValues, getElementWidth, isContainerVisible, classesToSelector, compareVersions, confirmAction, confirmActionAsync, detectIEOrEdge, detectIEBrowser, loadFileFromBase64, isMobile, isShadowDOM, getElement, isElementVisible, findScrollableParent, scrollElementByChildId, navigateToUrl, wrapUrlForBackgroundImage, createSvg, getIconNameFromProxy, increaseHeightByContent, getOriginalEvent, preventDefaults, findParentByClassNames, getFirstVisibleChild, chooseFiles */
+/*! exports provided: unwrap, getRenderedSize, getRenderedStyleSize, doKey2ClickBlur, doKey2ClickUp, doKey2ClickDown, sanitizeEditableContent, Logger, showConfirmDialog, configConfirmDialog, compareArrays, mergeValues, getElementWidth, isContainerVisible, classesToSelector, compareVersions, confirmAction, confirmActionAsync, detectIEOrEdge, detectIEBrowser, loadFileFromBase64, isMobile, isShadowDOM, getElement, isElementVisible, findScrollableParent, scrollElementByChildId, navigateToUrl, wrapUrlForBackgroundImage, createSvg, getIconNameFromProxy, increaseHeightByContent, getOriginalEvent, preventDefaults, findParentByClassNames, getFirstVisibleChild, chooseFiles */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -25115,6 +25604,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Logger", function() { return Logger; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showConfirmDialog", function() { return showConfirmDialog; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "configConfirmDialog", function() { return configConfirmDialog; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "compareArrays", function() { return compareArrays; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mergeValues", function() { return mergeValues; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getElementWidth", function() { return getElementWidth; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isContainerVisible", function() { return isContainerVisible; });
@@ -25435,6 +25925,8 @@ function preventDefaults(event) {
     event.stopPropagation();
 }
 function classesToSelector(str) {
+    if (!str)
+        return str;
     var re = /\s*?([\w-]+)\s*?/g;
     return str.replace(re, ".$1");
 }
@@ -25583,6 +26075,100 @@ function chooseFiles(input, callback) {
     };
     input.click();
 }
+function compareArrays(oldValue, newValue, getKey) {
+    var oldItemsMap = new Map();
+    var newItemsMap = new Map();
+    var commonItemsInNewMap = new Map();
+    var commonItemsInOldMap = new Map();
+    oldValue.forEach(function (item) {
+        var itemKey = getKey(item);
+        if (!oldItemsMap.has(itemKey)) {
+            oldItemsMap.set(getKey(item), item);
+        }
+        else {
+            //if keys are set incorrectly do not process comparing
+            throw new Error("keys must be unique");
+        }
+    });
+    newValue.forEach(function (item) {
+        var itemKey = getKey(item);
+        if (!newItemsMap.has(itemKey)) {
+            newItemsMap.set(itemKey, item);
+        }
+        else {
+            //if keys are set incorrectly do not process comparing
+            throw new Error("keys must be unique");
+        }
+    });
+    var addedItems = [];
+    var deletedItems = [];
+    //calculating addedItems and items that exist in both arrays
+    newItemsMap.forEach(function (item, key) {
+        if (!oldItemsMap.has(key)) {
+            addedItems.push(item);
+        }
+        else {
+            commonItemsInNewMap.set(key, commonItemsInNewMap.size);
+        }
+    });
+    //calculating deletedItems and items that exist in both arrays
+    oldItemsMap.forEach(function (item, key) {
+        if (!newItemsMap.has(key)) {
+            deletedItems.push(item);
+        }
+        else {
+            commonItemsInOldMap.set(key, commonItemsInOldMap.size);
+        }
+    });
+    //calculating reordered items
+    var reorderedItems = [];
+    commonItemsInNewMap.forEach(function (index, key) {
+        var oldIndex = commonItemsInOldMap.get(key);
+        var item = newItemsMap.get(key);
+        if (oldIndex !== index)
+            reorderedItems.push({ item: item, movedForward: oldIndex < index });
+    });
+    //calculating merged array if multiple operations are applied at once
+    var oldItemsWithCorrectOrder = new Array(oldValue.length);
+    var commonItemsIndex = 0;
+    var commonItemsKeysOrder = Array.from(commonItemsInNewMap.keys());
+    oldValue.forEach(function (item, index) {
+        if (commonItemsInNewMap.has(getKey(item))) {
+            oldItemsWithCorrectOrder[index] = newItemsMap.get(commonItemsKeysOrder[commonItemsIndex]);
+            commonItemsIndex++;
+        }
+        else {
+            oldItemsWithCorrectOrder[index] = item;
+        }
+    });
+    var valuesToInsertBeforeKey = new Map();
+    var tempValuesArray = [];
+    oldItemsWithCorrectOrder.forEach(function (item) {
+        var itemKey = getKey(item);
+        if (newItemsMap.has(itemKey)) {
+            if (tempValuesArray.length > 0) {
+                valuesToInsertBeforeKey.set(itemKey, tempValuesArray);
+                tempValuesArray = [];
+            }
+        }
+        else {
+            tempValuesArray.push(item);
+        }
+    });
+    var mergedItems = new Array();
+    newItemsMap.forEach(function (item, key) {
+        if (valuesToInsertBeforeKey.has(key)) {
+            valuesToInsertBeforeKey.get(key).forEach(function (item) {
+                mergedItems.push(item);
+            });
+        }
+        mergedItems.push(item);
+    });
+    tempValuesArray.forEach(function (item) {
+        mergedItems.push(item);
+    });
+    return { reorderedItems: reorderedItems, deletedItems: deletedItems, addedItems: addedItems, mergedItems: mergedItems };
+}