survey-react 1.9.80 → 1.9.81

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.80
+ * surveyjs - Survey JavaScript library v1.9.81
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -5073,7 +5073,11 @@ var modernCss = {
         cleanButtonSvg: "sv-dropdown_clean-button-svg",
         cleanButtonIconId: "icon-clear_16x16",
         controlValue: "sv-dropdown__value",
-        controlInputFieldComponent: "sv_dropdown_control__input-field-component"
+        controlInputFieldComponent: "sv_dropdown_control__input-field-component",
+        itemSmiley: "sv-rating__item-smiley",
+        itemStar: "sv-rating__item-star",
+        itemSmileySelected: "sv-rating__item-smiley--selected",
+        itemStarSelected: "sv-rating__item-star--selected"
     },
     comment: {
         root: "sv-comment",
@@ -5382,6 +5386,8 @@ var defaultStandardCss = {
     paneldynamic: {
         root: "sv_panel_dynamic",
         title: "sv_p_title",
+        header: "sv-paneldynamic__header sv_header",
+        headerTab: "sv-paneldynamic__header-tab",
         button: "",
         buttonAdd: "sv-paneldynamic__add-btn",
         buttonRemove: "sv_p_remove_btn",
@@ -5454,6 +5460,10 @@ var defaultStandardCss = {
         minText: "sv_q_rating_min_text",
         itemText: "sv_q_rating_item_text",
         maxText: "sv_q_rating_max_text",
+        itemStar: "sv_q_rating__item-star",
+        itemStarSelected: "sv_q_rating__item-star--selected",
+        itemSmiley: "sv_q_rating__item-smiley",
+        itemSmileySelected: "sv_q_rating__item-smiley--selected",
     },
     text: {
         root: "sv_q_text_root",
@@ -5626,6 +5636,8 @@ var defaultV2Css = {
         root: "sd-paneldynamic",
         navigation: "sd-paneldynamic__navigation",
         title: "sd-title sd-element__title sd-question__title",
+        header: "sd-paneldynamic__header sd-element__header",
+        headerTab: "sd-paneldynamic__header-tab",
         button: "sd-action sd-paneldynamic__btn",
         buttonRemove: "sd-action--negative sd-paneldynamic__remove-btn",
         buttonAdd: "sd-paneldynamic__add-btn",
@@ -6206,6 +6218,443 @@ var DefaultTitleModel = /** @class */ (function () {
 
 
 
+/***/ }),
+
+/***/ "./src/drag-drop-helper-v1.ts":
+/*!************************************!*\
+  !*** ./src/drag-drop-helper-v1.ts ***!
+  \************************************/
+/*! exports provided: DragDropInfo */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragDropInfo", function() { return DragDropInfo; });
+var DragDropInfo = /** @class */ (function () {
+    function DragDropInfo(source, target, nestedPanelDepth) {
+        if (nestedPanelDepth === void 0) { nestedPanelDepth = -1; }
+        this.source = source;
+        this.target = target;
+        this.nestedPanelDepth = nestedPanelDepth;
+    }
+    return DragDropInfo;
+}());
+
+
+
+/***/ }),
+
+/***/ "./src/drag-drop-page-helper-v1.ts":
+/*!*****************************************!*\
+  !*** ./src/drag-drop-page-helper-v1.ts ***!
+  \*****************************************/
+/*! exports provided: DragDropPageHelperV1 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragDropPageHelperV1", function() { return DragDropPageHelperV1; });
+/* harmony import */ var _drag_drop_helper_v1__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./drag-drop-helper-v1 */ "./src/drag-drop-helper-v1.ts");
+/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
+
+
+var DragDropPageHelperV1 = /** @class */ (function () {
+    function DragDropPageHelperV1(page) {
+        this.page = page;
+    }
+    DragDropPageHelperV1.prototype.getDragDropInfo = function () { return this.dragDropInfo; };
+    DragDropPageHelperV1.prototype.dragDropStart = function (src, target, nestedPanelDepth) {
+        if (nestedPanelDepth === void 0) { nestedPanelDepth = -1; }
+        this.dragDropInfo = new _drag_drop_helper_v1__WEBPACK_IMPORTED_MODULE_0__["DragDropInfo"](src, target, nestedPanelDepth);
+    };
+    DragDropPageHelperV1.prototype.dragDropMoveTo = function (destination, isBottom, isEdge) {
+        if (isBottom === void 0) { isBottom = false; }
+        if (isEdge === void 0) { isEdge = false; }
+        if (!this.dragDropInfo)
+            return false;
+        this.dragDropInfo.destination = destination;
+        this.dragDropInfo.isBottom = isBottom;
+        this.dragDropInfo.isEdge = isEdge;
+        this.correctDragDropInfo(this.dragDropInfo);
+        if (!this.dragDropCanDropTagert())
+            return false;
+        if (!this.dragDropCanDropSource() || !this.dragDropAllowFromSurvey()) {
+            if (!!this.dragDropInfo.source) {
+                var row = this.page.dragDropFindRow(this.dragDropInfo.target);
+                this.page.updateRowsRemoveElementFromRow(this.dragDropInfo.target, row);
+            }
+            return false;
+        }
+        this.page.dragDropAddTarget(this.dragDropInfo);
+        return true;
+    };
+    DragDropPageHelperV1.prototype.correctDragDropInfo = function (dragDropInfo) {
+        if (!dragDropInfo.destination)
+            return;
+        var panel = dragDropInfo.destination.isPanel
+            ? dragDropInfo.destination
+            : null;
+        if (!panel)
+            return;
+        if (!dragDropInfo.target.isLayoutTypeSupported(panel.getChildrenLayoutType())) {
+            dragDropInfo.isEdge = true;
+        }
+    };
+    DragDropPageHelperV1.prototype.dragDropAllowFromSurvey = function () {
+        var dest = this.dragDropInfo.destination;
+        if (!dest || !this.page.survey)
+            return true;
+        var insertBefore = null;
+        var insertAfter = null;
+        var parent = dest.isPage || (!this.dragDropInfo.isEdge && dest.isPanel)
+            ? dest
+            : dest.parent;
+        if (!dest.isPage) {
+            var container = dest.parent;
+            if (!!container) {
+                var elements = container.elements;
+                var index = elements.indexOf(dest);
+                if (index > -1) {
+                    insertBefore = dest;
+                    insertAfter = dest;
+                    if (this.dragDropInfo.isBottom) {
+                        insertBefore =
+                            index < elements.length - 1 ? elements[index + 1] : null;
+                    }
+                    else {
+                        insertAfter = index > 0 ? elements[index - 1] : null;
+                    }
+                }
+            }
+        }
+        var options = {
+            allow: true,
+            target: this.dragDropInfo.target,
+            source: this.dragDropInfo.source,
+            parent: parent,
+            insertAfter: insertAfter,
+            insertBefore: insertBefore,
+        };
+        return this.page.survey.dragAndDropAllow(options);
+    };
+    DragDropPageHelperV1.prototype.dragDropFinish = function (isCancel) {
+        if (isCancel === void 0) { isCancel = false; }
+        if (!this.dragDropInfo)
+            return;
+        var target = this.dragDropInfo.target;
+        var src = this.dragDropInfo.source;
+        var dest = this.dragDropInfo.destination;
+        var row = this.page.dragDropFindRow(target);
+        var targetIndex = this.dragDropGetElementIndex(target, row);
+        this.page.updateRowsRemoveElementFromRow(target, row);
+        var elementsToSetSWNL = [];
+        var elementsToResetSWNL = [];
+        if (!isCancel && !!row) {
+            var isSamePanel = false;
+            if (this.page.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].supportCreatorV2) {
+                var srcRow = src && src.parent && src.parent.dragDropFindRow(src);
+                if (row.panel.elements[targetIndex] && row.panel.elements[targetIndex].startWithNewLine && row.elements.length > 1 && row.panel.elements[targetIndex] === dest) {
+                    elementsToSetSWNL.push(target);
+                    elementsToResetSWNL.push(row.panel.elements[targetIndex]);
+                }
+                if (target.startWithNewLine && row.elements.length > 1 && (!row.panel.elements[targetIndex] || !row.panel.elements[targetIndex].startWithNewLine)) {
+                    elementsToResetSWNL.push(target);
+                }
+                if (srcRow && srcRow.elements[0] === src && srcRow.elements[1]) {
+                    elementsToSetSWNL.push(srcRow.elements[1]);
+                }
+                if (row.elements.length <= 1) {
+                    elementsToSetSWNL.push(target);
+                }
+                if (target.startWithNewLine && row.elements.length > 1 && row.elements[0] !== dest) {
+                    elementsToResetSWNL.push(target);
+                }
+            }
+            if (!!src && !!src.parent) {
+                this.page.survey.startMovingQuestion();
+                isSamePanel = row.panel == src.parent;
+                if (isSamePanel) {
+                    row.panel.dragDropMoveElement(src, target, targetIndex);
+                    targetIndex = -1;
+                }
+                else {
+                    src.parent.removeElement(src);
+                }
+            }
+            if (targetIndex > -1) {
+                row.panel.addElement(target, targetIndex);
+            }
+            this.page.survey.stopMovingQuestion();
+        }
+        elementsToSetSWNL.map(function (e) { e.startWithNewLine = true; });
+        elementsToResetSWNL.map(function (e) { e.startWithNewLine = false; });
+        this.dragDropInfo = null;
+        return !isCancel ? target : null;
+    };
+    DragDropPageHelperV1.prototype.dragDropGetElementIndex = function (target, row) {
+        if (!row)
+            return -1;
+        var index = row.elements.indexOf(target);
+        if (row.index == 0)
+            return index;
+        var prevRow = row.panel.rows[row.index - 1];
+        var prevElement = prevRow.elements[prevRow.elements.length - 1];
+        return index + row.panel.elements.indexOf(prevElement) + 1;
+    };
+    DragDropPageHelperV1.prototype.dragDropCanDropTagert = function () {
+        var destination = this.dragDropInfo.destination;
+        if (!destination || destination.isPage)
+            return true;
+        return this.dragDropCanDropCore(this.dragDropInfo.target, destination);
+    };
+    DragDropPageHelperV1.prototype.dragDropCanDropSource = function () {
+        var source = this.dragDropInfo.source;
+        if (!source)
+            return true;
+        var destination = this.dragDropInfo.destination;
+        if (!this.dragDropCanDropCore(source, destination))
+            return false;
+        if (this.page.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].supportCreatorV2) {
+            var rowSource = this.page.dragDropFindRow(source);
+            var rowDestination = this.page.dragDropFindRow(destination);
+            if (rowSource !== rowDestination) {
+                if (!source.startWithNewLine && destination.startWithNewLine)
+                    return true;
+                if (source.startWithNewLine && !destination.startWithNewLine) {
+                    return true;
+                }
+            }
+            var row = this.page.dragDropFindRow(destination);
+            if (row && row.elements.length == 1)
+                return true;
+        }
+        return this.dragDropCanDropNotNext(source, destination, this.dragDropInfo.isEdge, this.dragDropInfo.isBottom);
+    };
+    DragDropPageHelperV1.prototype.dragDropCanDropCore = function (target, destination) {
+        if (!destination)
+            return true;
+        if (this.dragDropIsSameElement(destination, target))
+            return false;
+        if (target.isPanel) {
+            var pnl = target;
+            if (pnl.containsElement(destination) ||
+                !!pnl.getElementByName(destination.name))
+                return false;
+        }
+        return true;
+    };
+    DragDropPageHelperV1.prototype.dragDropCanDropNotNext = function (source, destination, isEdge, isBottom) {
+        if (!destination || (destination.isPanel && !isEdge))
+            return true;
+        if (typeof source.parent === "undefined" || source.parent !== destination.parent)
+            return true;
+        var pnl = source.parent;
+        var srcIndex = pnl.elements.indexOf(source);
+        var destIndex = pnl.elements.indexOf(destination);
+        if (destIndex < srcIndex && !isBottom)
+            destIndex--;
+        if (isBottom)
+            destIndex++;
+        return srcIndex < destIndex
+            ? destIndex - srcIndex > 1
+            : srcIndex - destIndex > 0;
+    };
+    DragDropPageHelperV1.prototype.dragDropIsSameElement = function (el1, el2) {
+        return el1 == el2 || el1.name == el2.name;
+    };
+    return DragDropPageHelperV1;
+}());
+
+
+
+/***/ }),
+
+/***/ "./src/drag-drop-panel-helper-v1.ts":
+/*!******************************************!*\
+  !*** ./src/drag-drop-panel-helper-v1.ts ***!
+  \******************************************/
+/*! exports provided: DragDropPanelHelperV1 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragDropPanelHelperV1", function() { return DragDropPanelHelperV1; });
+/* harmony import */ var _drag_drop_helper_v1__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./drag-drop-helper-v1 */ "./src/drag-drop-helper-v1.ts");
+/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
+
+
+var DragDropPanelHelperV1 = /** @class */ (function () {
+    function DragDropPanelHelperV1(panel) {
+        this.panel = panel;
+    }
+    DragDropPanelHelperV1.prototype.dragDropAddTarget = function (dragDropInfo) {
+        var prevRow = this.dragDropFindRow(dragDropInfo.target);
+        if (this.dragDropAddTargetToRow(dragDropInfo, prevRow)) {
+            this.panel.updateRowsRemoveElementFromRow(dragDropInfo.target, prevRow);
+        }
+    };
+    DragDropPanelHelperV1.prototype.dragDropFindRow = function (findElement) {
+        if (!findElement || findElement.isPage)
+            return null;
+        var element = findElement;
+        var rows = this.panel.rows;
+        for (var i = 0; i < rows.length; i++) {
+            if (rows[i].elements.indexOf(element) > -1)
+                return rows[i];
+        }
+        for (var i = 0; i < this.panel.elements.length; i++) {
+            var pnl = this.panel.elements[i].getPanel();
+            if (!pnl)
+                continue;
+            var row = pnl.dragDropFindRow(element);
+            if (!!row)
+                return row;
+        }
+        return null;
+    };
+    DragDropPanelHelperV1.prototype.dragDropMoveElement = function (src, target, targetIndex) {
+        var srcIndex = src.parent.elements.indexOf(src);
+        if (targetIndex > srcIndex) {
+            targetIndex--;
+        }
+        this.panel.removeElement(src);
+        this.panel.addElement(target, targetIndex);
+    };
+    DragDropPanelHelperV1.prototype.updateRowsOnElementAdded = function (element, index, dragDropInfo, thisElement) {
+        if (!dragDropInfo) {
+            dragDropInfo = new _drag_drop_helper_v1__WEBPACK_IMPORTED_MODULE_0__["DragDropInfo"](null, element);
+            dragDropInfo.target = element;
+            dragDropInfo.isEdge = this.panel.elements.length > 1;
+            if (this.panel.elements.length < 2) {
+                dragDropInfo.destination = thisElement;
+            }
+            else {
+                dragDropInfo.isBottom = index > 0;
+                if (index == 0) {
+                    dragDropInfo.destination = this.panel.elements[1];
+                }
+                else {
+                    dragDropInfo.destination = this.panel.elements[index - 1];
+                }
+            }
+        }
+        this.dragDropAddTargetToRow(dragDropInfo, null);
+    };
+    DragDropPanelHelperV1.prototype.dragDropAddTargetToRow = function (dragDropInfo, prevRow) {
+        if (!dragDropInfo.destination)
+            return true;
+        if (this.dragDropAddTargetToEmptyPanel(dragDropInfo))
+            return true;
+        var dest = dragDropInfo.destination;
+        var destRow = this.dragDropFindRow(dest);
+        if (!destRow)
+            return true;
+        if (_settings__WEBPACK_IMPORTED_MODULE_1__["settings"].supportCreatorV2 && this.panel.isDesignMode) {
+            if (destRow.elements.length > 1)
+                return this.dragDropAddTargetToExistingRow(dragDropInfo, destRow, prevRow);
+            else
+                return this.dragDropAddTargetToNewRow(dragDropInfo, destRow, prevRow);
+        }
+        if (!dragDropInfo.target.startWithNewLine)
+            return this.dragDropAddTargetToExistingRow(dragDropInfo, destRow, prevRow);
+        return this.dragDropAddTargetToNewRow(dragDropInfo, destRow, prevRow);
+    };
+    DragDropPanelHelperV1.prototype.dragDropAddTargetToEmptyPanel = function (dragDropInfo) {
+        if (dragDropInfo.destination.isPage) {
+            this.dragDropAddTargetToEmptyPanelCore(this.panel.root, dragDropInfo.target, dragDropInfo.isBottom);
+            return true;
+        }
+        var dest = dragDropInfo.destination;
+        if (dest.isPanel && !dragDropInfo.isEdge) {
+            var panel = dest;
+            if (dragDropInfo.target["template"] === dest) {
+                return false;
+            }
+            if (dragDropInfo.nestedPanelDepth < 0 ||
+                dragDropInfo.nestedPanelDepth >= panel.depth) {
+                this.dragDropAddTargetToEmptyPanelCore(dest, dragDropInfo.target, dragDropInfo.isBottom);
+                return true;
+            }
+        }
+        return false;
+    };
+    DragDropPanelHelperV1.prototype.dragDropAddTargetToExistingRow = function (dragDropInfo, destRow, prevRow) {
+        var index = destRow.elements.indexOf(dragDropInfo.destination);
+        if (index == 0 &&
+            !dragDropInfo.isBottom) {
+            if (this.panel.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].supportCreatorV2) {
+            }
+            else if (destRow.elements[0].startWithNewLine) {
+                if (destRow.index > 0) {
+                    dragDropInfo.isBottom = true;
+                    destRow = destRow.panel.rows[destRow.index - 1];
+                    dragDropInfo.destination =
+                        destRow.elements[destRow.elements.length - 1];
+                    return this.dragDropAddTargetToExistingRow(dragDropInfo, destRow, prevRow);
+                }
+                else {
+                    return this.dragDropAddTargetToNewRow(dragDropInfo, destRow, prevRow);
+                }
+            }
+        }
+        var prevRowIndex = -1;
+        if (prevRow == destRow) {
+            prevRowIndex = destRow.elements.indexOf(dragDropInfo.target);
+        }
+        if (dragDropInfo.isBottom)
+            index++;
+        var srcRow = this.panel.findRowByElement(dragDropInfo.source);
+        if (srcRow == destRow &&
+            srcRow.elements.indexOf(dragDropInfo.source) == index)
+            return false;
+        if (index == prevRowIndex)
+            return false;
+        if (prevRowIndex > -1) {
+            destRow.elements.splice(prevRowIndex, 1);
+            if (prevRowIndex < index)
+                index--;
+        }
+        destRow.elements.splice(index, 0, dragDropInfo.target);
+        destRow.updateVisible();
+        return prevRowIndex < 0;
+    };
+    DragDropPanelHelperV1.prototype.dragDropAddTargetToNewRow = function (dragDropInfo, destRow, prevRow) {
+        var targetRow = destRow.panel.createRowAndSetLazy(destRow.panel.rows.length);
+        if (this.panel.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].supportCreatorV2) {
+            targetRow.setIsLazyRendering(false);
+        }
+        targetRow.addElement(dragDropInfo.target);
+        var index = destRow.index;
+        if (dragDropInfo.isBottom) {
+            index++;
+        }
+        //same row
+        if (!!prevRow && prevRow.panel == targetRow.panel && prevRow.index == index)
+            return false;
+        var srcRow = this.panel.findRowByElement(dragDropInfo.source);
+        if (!!srcRow &&
+            srcRow.panel == targetRow.panel &&
+            srcRow.elements.length == 1 &&
+            srcRow.index == index)
+            return false;
+        destRow.panel.rows.splice(index, 0, targetRow);
+        return true;
+    };
+    DragDropPanelHelperV1.prototype.dragDropAddTargetToEmptyPanelCore = function (panel, target, isBottom) {
+        var targetRow = panel.createRow();
+        targetRow.addElement(target);
+        if (panel.elements.length == 0 || isBottom) {
+            panel.rows.push(targetRow);
+        }
+        else {
+            panel.rows.splice(0, 0, targetRow);
+        }
+    };
+    return DragDropPanelHelperV1;
+}());
+
+
+
 /***/ }),
 
 /***/ "./src/dragdrop/choices.ts":
@@ -6289,7 +6738,7 @@ var DragDropChoices = /** @class */ (function (_super) {
     };
     DragDropChoices.prototype.createImagePickerShortcut = function (item, text, draggedElementNode, event) {
         var draggedElementShortcut = document.createElement("div");
-        draggedElementShortcut.style.cssText = " \n      cursor: grabbing;\n      position: absolute;\n      z-index: 1000;\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);\n      padding: 4px;\n      border-radius: 4px;\n      background: white;\n    ";
+        draggedElementShortcut.style.cssText = " \n      cursor: grabbing;\n      position: absolute;\n      z-index: 1000;\n      filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1));\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);\n      padding: 4px;\n      border-radius: 4px;\n      background: white;\n    ";
         var itemValueNode = draggedElementNode.closest("[data-sv-drop-target-item-value]");
         var controlsNode = itemValueNode.querySelector(".svc-image-item-value-controls");
         var imageContainerNode = itemValueNode.querySelector(".sd-imagepicker__image-container");
@@ -6874,7 +7323,7 @@ var DragDropMatrixRows = /** @class */ (function (_super) {
         var row = (draggedElementNode
             .closest("[data-sv-drop-target-matrix-row]"));
         var clone = (row.cloneNode(isDeepClone));
-        clone.style.cssText = "\n      box-shadow: rgb(0 0 0 / 10%) 0px 8px 16px;\n      background-color: white;\n      display: flex;\n      flex-grow: 0;\n      flex-shrink: 0;\n      align-items: center;\n      line-height: 0;\n      width: " + row.offsetWidth + "px;\n    ";
+        clone.style.cssText = "\n      filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1));\n      box-shadow: rgb(0 0 0 / 10%) 0px 8px 16px;\n      background-color: white;\n      display: flex;\n      flex-grow: 0;\n      flex-shrink: 0;\n      align-items: center;\n      line-height: 0;\n      width: " + row.offsetWidth + "px;\n    ";
         clone.classList.remove("sv-matrix__drag-drop--moveup");
         clone.classList.remove("sv-matrix__drag-drop--movedown");
         this.draggedElement.isDragDropMoveDown = false;
@@ -7041,7 +7490,7 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
     DragDropRankingChoices.prototype.createDraggedElementShortcut = function (text, draggedElementNode, event) {
         var draggedElementShortcut = document.createElement("div");
         draggedElementShortcut.className = this.shortcutClass + " sv-ranking-shortcut";
-        draggedElementShortcut.style.cssText = " \n          cursor: grabbing;\n          position: absolute;\n          z-index: 1000;\n          border-radius: 36px;\n          min-width: 100px;\n          box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);\n          background-color: var(--background, white);\n          font-family: var(--font-family, $font-family);\n        ";
+        draggedElementShortcut.style.cssText = " \n          cursor: grabbing;\n          position: absolute;\n          z-index: 1000;\n          border-radius: 36px;\n          min-width: 100px;\n          filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1));\n          box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);\n          background-color: var(--background, white);\n          font-family: var(--font-family, $font-family);\n        ";
         var isDeepClone = true;
         var clone = draggedElementNode.cloneNode(isDeepClone);
         draggedElementShortcut.appendChild(clone);
@@ -7257,6 +7706,18 @@ var DragDropSurveyElements = /** @class */ (function (_super) {
         new _jsonobject__WEBPACK_IMPORTED_MODULE_1__["JsonObject"]().toObject(json, newElement);
         return newElement;
     };
+    DragDropSurveyElements.prototype.findDropTargetNodeByDragOverNode = function (dragOverNode) {
+        var ghostRow = dragOverNode.closest(".svc-row--ghost");
+        if (!!ghostRow) {
+            var ghostDataAttrSelector = "[data-sv-drop-target-survey-element='sv-drag-drop-ghost-survey-element-name']";
+            var ghostNode = dragOverNode.closest(ghostDataAttrSelector) || dragOverNode.querySelector(ghostDataAttrSelector);
+            if (!!ghostNode) {
+                return ghostNode;
+            }
+        }
+        var dropTargetNode = dragOverNode.closest(this.dropTargetDataAttributeName);
+        return dropTargetNode;
+    };
     DragDropSurveyElements.prototype.getDropTargetByDataAttributeValue = function (dataAttributeValue, dropTargetNode, event) {
         this.isEdge = this.calculateIsEdge(dropTargetNode, event.clientY);
         if (!dataAttributeValue) {
@@ -7982,10 +8443,12 @@ var DropdownListModel = /** @class */ (function (_super) {
             if (event.keyCode === 13 && this.question.searchEnabled && !this.inputString && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"] && !this._markdownMode && this.question.value) {
                 this._popupModel.isVisible = false;
                 this.onClear(event);
+                this.question.survey.questionEditFinishCallback(this.question, event);
             }
             else {
                 this.listModel.selectFocusedItem();
                 this.onFocus(event);
+                this.question.survey.questionEditFinishCallback(this.question, event);
             }
             event.preventDefault();
             event.stopPropagation();
@@ -8203,6 +8666,10 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
         }
         return new _multiSelectListModel__WEBPACK_IMPORTED_MODULE_3__["MultiSelectListModel"](visibleItems, _onSelectionChanged, false, undefined, undefined, this.listElementId);
     };
+    DropdownMultiSelectListModel.prototype.resetFilterString = function () {
+        _super.prototype.resetFilterString.call(this);
+        this.inputString = null;
+    };
     Object.defineProperty(DropdownMultiSelectListModel.prototype, "shouldResetAfterCancel", {
         get: function () {
             return _utils_devices__WEBPACK_IMPORTED_MODULE_5__["IsTouch"] && !this.closeOnSelect;
@@ -8604,7 +9071,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*************************************!*\
   !*** ./src/entries/chunks/model.ts ***!
   \*************************************/
-/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices */
+/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, getTocRootCss, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -8899,6 +9366,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createTOCListModel", function() { return _surveyToc__WEBPACK_IMPORTED_MODULE_55__["createTOCListModel"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getTocRootCss", function() { return _surveyToc__WEBPACK_IMPORTED_MODULE_55__["getTocRootCss"]; });
+
 /* harmony import */ var _surveyProgress__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ../../surveyProgress */ "./src/surveyProgress.ts");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressModel", function() { return _surveyProgress__WEBPACK_IMPORTED_MODULE_56__["SurveyProgressModel"]; });
 
@@ -9046,7 +9515,7 @@ __webpack_require__.r(__webpack_exports__);
 // import "../../main.scss";
 //import "../../modern.scss";
 var Version;
-Version = "" + "1.9.80";
+Version = "" + "1.9.81";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -9151,7 +9620,7 @@ function checkLibraryVersion(ver, libraryName) {
 /*!**************************************!*\
   !*** ./src/entries/core-wo-model.ts ***!
   \**************************************/
-/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper */
+/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, getTocRootCss, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -9393,6 +9862,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createTOCListModel", function() { return _chunks_model__WEBPACK_IMPORTED_MODULE_0__["createTOCListModel"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getTocRootCss", function() { return _chunks_model__WEBPACK_IMPORTED_MODULE_0__["getTocRootCss"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressModel", function() { return _chunks_model__WEBPACK_IMPORTED_MODULE_0__["SurveyProgressModel"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressButtonsModel", function() { return _chunks_model__WEBPACK_IMPORTED_MODULE_0__["SurveyProgressButtonsModel"]; });
@@ -9582,7 +10053,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*****************************!*\
   !*** ./src/entries/core.ts ***!
   \*****************************/
-/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper, Model */
+/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, getTocRootCss, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper, Model */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -9824,6 +10295,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createTOCListModel", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["createTOCListModel"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getTocRootCss", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["getTocRootCss"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressModel", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["SurveyProgressModel"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressButtonsModel", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["SurveyProgressButtonsModel"]; });
@@ -10373,7 +10846,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!******************************!*\
   !*** ./src/entries/react.ts ***!
   \******************************/
-/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, SurveyLocStringViewer, SurveyLocStringEditor */
+/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, getTocRootCss, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, SurveyLocStringViewer, SurveyLocStringEditor */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10615,6 +11088,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createTOCListModel", function() { return _core__WEBPACK_IMPORTED_MODULE_0__["createTOCListModel"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getTocRootCss", function() { return _core__WEBPACK_IMPORTED_MODULE_0__["getTocRootCss"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressModel", function() { return _core__WEBPACK_IMPORTED_MODULE_0__["SurveyProgressModel"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressButtonsModel", function() { return _core__WEBPACK_IMPORTED_MODULE_0__["SurveyProgressButtonsModel"]; });
@@ -17538,13 +18013,6 @@ var JsonObjectProperty = /** @class */ (function () {
             return objType;
         return objType.replace(this.classNamePart, "");
     };
-    JsonObjectProperty.prototype.getClassName = function (className) {
-        if (className)
-            className = className.toLowerCase();
-        return this.classNamePart && className.indexOf(this.classNamePart) < 0
-            ? className + this.classNamePart
-            : className;
-    };
     Object.defineProperty(JsonObjectProperty.prototype, "choices", {
         /**
          * Depricated, please use getChoices
@@ -18868,17 +19336,27 @@ var JsonObject = /** @class */ (function () {
     };
     JsonObject.prototype.createNewObj = function (value, property) {
         var result = { newObj: null, error: null };
-        var className = value[JsonObject.typePropertyName];
-        if (!className && property != null && property.className) {
-            className = property.className;
-        }
-        className = property.getClassName(className);
+        var className = this.getClassNameForNewObj(value, property);
         result.newObj = className
             ? JsonObject.metaData.createClass(className, value)
             : null;
         result.error = this.checkNewObjectOnErrors(result.newObj, value, property, className);
         return result;
     };
+    JsonObject.prototype.getClassNameForNewObj = function (value, property) {
+        var res = property != null && property.className ? property.className : undefined;
+        if (!res) {
+            res = value[JsonObject.typePropertyName];
+        }
+        if (!res)
+            return res;
+        res = res.toLowerCase();
+        var classNamePart = property.classNamePart;
+        if (classNamePart && res.indexOf(classNamePart) < 0) {
+            res += classNamePart;
+        }
+        return res;
+    };
     JsonObject.prototype.checkNewObjectOnErrors = function (newObj, value, property, className) {
         var error = null;
         if (newObj) {
@@ -19044,7 +19522,7 @@ var ListModel = /** @class */ (function (_super) {
         _this.onFilterStringChangedCallback = onFilterStringChangedCallback;
         _this.elementId = elementId;
         _this.onItemClick = function (itemValue) {
-            if (_this.isItemDisabled(itemValue) || _this.isItemSelected(itemValue)) {
+            if (_this.isItemDisabled(itemValue)) {
                 return;
             }
             _this.isExpanded = false;
@@ -19728,6 +20206,8 @@ var LocalizableString = /** @class */ (function () {
         return this.htmlValues[loc];
     };
     LocalizableString.prototype.deleteValuesEqualsToDefault = function (defaultValue) {
+        if (_settings__WEBPACK_IMPORTED_MODULE_2__["settings"].storeDuplicatedTranslations)
+            return;
         var keys = this.getValuesKeys();
         for (var i = 0; i < keys.length; i++) {
             if (keys[i] == this.defaultLoc)
@@ -20783,6 +21263,7 @@ var englishStrings = {
     progressText: "Page {0} of {1}",
     indexText: "{0} of {1}",
     panelDynamicProgressText: "{0} of {1}",
+    panelDynamicTabTextFormat: "Panel {0}",
     questionsProgressText: "Answered {0}/{1} questions",
     emptySurvey: "The survey doesn't contain visible pages or questions.",
     completingSurvey: "Thank you for completing the survey",
@@ -25800,7 +26281,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
 /* harmony import */ var _panel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./panel */ "./src/panel.ts");
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
-/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
+/* harmony import */ var _drag_drop_page_helper_v1__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./drag-drop-page-helper-v1 */ "./src/drag-drop-page-helper-v1.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -25849,6 +26330,7 @@ var PageModel = /** @class */ (function (_super) {
         };
         _this.createLocalizableString("navigationTitle", _this, true);
         _this.createLocalizableString("navigationDescription", _this, true);
+        _this.dragDropPageHelper = new _drag_drop_page_helper_v1__WEBPACK_IMPORTED_MODULE_3__["DragDropPageHelperV1"](_this);
         return _this;
     }
     PageModel.prototype.getType = function () {
@@ -26129,205 +26611,19 @@ var PageModel = /** @class */ (function (_super) {
             this.survey.pageVisibilityChanged(this, this.isVisible);
         }
     };
-    PageModel.prototype.getDragDropInfo = function () { return this.dragDropInfo; };
+    PageModel.prototype.getDragDropInfo = function () { return this.dragDropPageHelper.getDragDropInfo(); };
     PageModel.prototype.dragDropStart = function (src, target, nestedPanelDepth) {
         if (nestedPanelDepth === void 0) { nestedPanelDepth = -1; }
-        this.dragDropInfo = new _panel__WEBPACK_IMPORTED_MODULE_1__["DragDropInfo"](src, target, nestedPanelDepth);
+        this.dragDropPageHelper.dragDropStart(src, target, nestedPanelDepth);
     };
     PageModel.prototype.dragDropMoveTo = function (destination, isBottom, isEdge) {
         if (isBottom === void 0) { isBottom = false; }
         if (isEdge === void 0) { isEdge = false; }
-        if (!this.dragDropInfo)
-            return false;
-        this.dragDropInfo.destination = destination;
-        this.dragDropInfo.isBottom = isBottom;
-        this.dragDropInfo.isEdge = isEdge;
-        this.correctDragDropInfo(this.dragDropInfo);
-        if (!this.dragDropCanDropTagert())
-            return false;
-        if (!this.dragDropCanDropSource() || !this.dragDropAllowFromSurvey()) {
-            if (!!this.dragDropInfo.source) {
-                var row = this.dragDropFindRow(this.dragDropInfo.target);
-                this.updateRowsRemoveElementFromRow(this.dragDropInfo.target, row);
-            }
-            return false;
-        }
-        this.dragDropAddTarget(this.dragDropInfo);
-        return true;
-    };
-    PageModel.prototype.correctDragDropInfo = function (dragDropInfo) {
-        if (!dragDropInfo.destination)
-            return;
-        var panel = dragDropInfo.destination.isPanel
-            ? dragDropInfo.destination
-            : null;
-        if (!panel)
-            return;
-        if (!dragDropInfo.target.isLayoutTypeSupported(panel.getChildrenLayoutType())) {
-            dragDropInfo.isEdge = true;
-        }
-    };
-    PageModel.prototype.dragDropAllowFromSurvey = function () {
-        var dest = this.dragDropInfo.destination;
-        if (!dest || !this.survey)
-            return true;
-        var insertBefore = null;
-        var insertAfter = null;
-        var parent = dest.isPage || (!this.dragDropInfo.isEdge && dest.isPanel)
-            ? dest
-            : dest.parent;
-        if (!dest.isPage) {
-            var container = dest.parent;
-            if (!!container) {
-                var elements = container.elements;
-                var index = elements.indexOf(dest);
-                if (index > -1) {
-                    insertBefore = dest;
-                    insertAfter = dest;
-                    if (this.dragDropInfo.isBottom) {
-                        insertBefore =
-                            index < elements.length - 1 ? elements[index + 1] : null;
-                    }
-                    else {
-                        insertAfter = index > 0 ? elements[index - 1] : null;
-                    }
-                }
-            }
-        }
-        var options = {
-            allow: true,
-            target: this.dragDropInfo.target,
-            source: this.dragDropInfo.source,
-            parent: parent,
-            insertAfter: insertAfter,
-            insertBefore: insertBefore,
-        };
-        return this.survey.dragAndDropAllow(options);
+        return this.dragDropPageHelper.dragDropMoveTo(destination, isBottom, isEdge);
     };
     PageModel.prototype.dragDropFinish = function (isCancel) {
         if (isCancel === void 0) { isCancel = false; }
-        if (!this.dragDropInfo)
-            return;
-        var target = this.dragDropInfo.target;
-        var src = this.dragDropInfo.source;
-        var dest = this.dragDropInfo.destination;
-        var row = this.dragDropFindRow(target);
-        var targetIndex = this.dragDropGetElementIndex(target, row);
-        this.updateRowsRemoveElementFromRow(target, row);
-        var elementsToSetSWNL = [];
-        var elementsToResetSWNL = [];
-        if (!isCancel && !!row) {
-            var isSamePanel = false;
-            if (this.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].supportCreatorV2) {
-                var srcRow = src && src.parent && src.parent.dragDropFindRow(src);
-                if (row.panel.elements[targetIndex] && row.panel.elements[targetIndex].startWithNewLine && row.elements.length > 1 && row.panel.elements[targetIndex] === dest) {
-                    elementsToSetSWNL.push(target);
-                    elementsToResetSWNL.push(row.panel.elements[targetIndex]);
-                }
-                if (target.startWithNewLine && row.elements.length > 1 && (!row.panel.elements[targetIndex] || !row.panel.elements[targetIndex].startWithNewLine)) {
-                    elementsToResetSWNL.push(target);
-                }
-                if (srcRow && srcRow.elements[0] === src && srcRow.elements[1]) {
-                    elementsToSetSWNL.push(srcRow.elements[1]);
-                }
-                if (row.elements.length <= 1) {
-                    elementsToSetSWNL.push(target);
-                }
-                if (target.startWithNewLine && row.elements.length > 1 && row.elements[0] !== dest) {
-                    elementsToResetSWNL.push(target);
-                }
-            }
-            if (!!src && !!src.parent) {
-                this.survey.startMovingQuestion();
-                isSamePanel = row.panel == src.parent;
-                if (isSamePanel) {
-                    row.panel.dragDropMoveElement(src, target, targetIndex);
-                    targetIndex = -1;
-                }
-                else {
-                    src.parent.removeElement(src);
-                }
-            }
-            if (targetIndex > -1) {
-                row.panel.addElement(target, targetIndex);
-            }
-            this.survey.stopMovingQuestion();
-        }
-        elementsToSetSWNL.map(function (e) { e.startWithNewLine = true; });
-        elementsToResetSWNL.map(function (e) { e.startWithNewLine = false; });
-        this.dragDropInfo = null;
-        return !isCancel ? target : null;
-    };
-    PageModel.prototype.dragDropGetElementIndex = function (target, row) {
-        if (!row)
-            return -1;
-        var index = row.elements.indexOf(target);
-        if (row.index == 0)
-            return index;
-        var prevRow = row.panel.rows[row.index - 1];
-        var prevElement = prevRow.elements[prevRow.elements.length - 1];
-        return index + row.panel.elements.indexOf(prevElement) + 1;
-    };
-    PageModel.prototype.dragDropCanDropTagert = function () {
-        var destination = this.dragDropInfo.destination;
-        if (!destination || destination.isPage)
-            return true;
-        return this.dragDropCanDropCore(this.dragDropInfo.target, destination);
-    };
-    PageModel.prototype.dragDropCanDropSource = function () {
-        var source = this.dragDropInfo.source;
-        if (!source)
-            return true;
-        var destination = this.dragDropInfo.destination;
-        if (!this.dragDropCanDropCore(source, destination))
-            return false;
-        if (this.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].supportCreatorV2) {
-            var rowSource = this.dragDropFindRow(source);
-            var rowDestination = this.dragDropFindRow(destination);
-            if (rowSource !== rowDestination) {
-                if (!source.startWithNewLine && destination.startWithNewLine)
-                    return true;
-                if (source.startWithNewLine && !destination.startWithNewLine) {
-                    return true;
-                }
-            }
-            var row = this.dragDropFindRow(destination);
-            if (row && row.elements.length == 1)
-                return true;
-        }
-        return this.dragDropCanDropNotNext(source, destination, this.dragDropInfo.isEdge, this.dragDropInfo.isBottom);
-    };
-    PageModel.prototype.dragDropCanDropCore = function (target, destination) {
-        if (!destination)
-            return true;
-        if (this.dragDropIsSameElement(destination, target))
-            return false;
-        if (target.isPanel) {
-            var pnl = target;
-            if (pnl.containsElement(destination) ||
-                !!pnl.getElementByName(destination.name))
-                return false;
-        }
-        return true;
-    };
-    PageModel.prototype.dragDropCanDropNotNext = function (source, destination, isEdge, isBottom) {
-        if (!destination || (destination.isPanel && !isEdge))
-            return true;
-        if (typeof source.parent === "undefined" || source.parent !== destination.parent)
-            return true;
-        var pnl = source.parent;
-        var srcIndex = pnl.elements.indexOf(source);
-        var destIndex = pnl.elements.indexOf(destination);
-        if (destIndex < srcIndex && !isBottom)
-            destIndex--;
-        if (isBottom)
-            destIndex++;
-        return srcIndex < destIndex
-            ? destIndex - srcIndex > 1
-            : srcIndex - destIndex > 0;
-    };
-    PageModel.prototype.dragDropIsSameElement = function (el1, el2) {
-        return el1 == el2 || el1.name == el2.name;
+        return this.dragDropPageHelper.dragDropFinish(isCancel);
     };
     PageModel.prototype.ensureRowsVisibility = function () {
         _super.prototype.ensureRowsVisibility.call(this);
@@ -26373,12 +26669,11 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("page", [
 /*!**********************!*\
   !*** ./src/panel.ts ***!
   \**********************/
-/*! exports provided: DragDropInfo, QuestionRowModel, PanelModelBase, PanelModel */
+/*! exports provided: QuestionRowModel, PanelModelBase, PanelModel */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragDropInfo", function() { return DragDropInfo; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "QuestionRowModel", function() { return QuestionRowModel; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PanelModelBase", function() { return PanelModelBase; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PanelModel", function() { return PanelModel; });
@@ -26392,6 +26687,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
 /* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
+/* harmony import */ var _drag_drop_panel_helper_v1__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./drag-drop-panel-helper-v1 */ "./src/drag-drop-panel-helper-v1.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -26423,15 +26719,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
-var DragDropInfo = /** @class */ (function () {
-    function DragDropInfo(source, target, nestedPanelDepth) {
-        if (nestedPanelDepth === void 0) { nestedPanelDepth = -1; }
-        this.source = source;
-        this.target = target;
-        this.nestedPanelDepth = nestedPanelDepth;
-    }
-    return DragDropInfo;
-}());
 
 var QuestionRowModel = /** @class */ (function (_super) {
     __extends(QuestionRowModel, _super);
@@ -26682,6 +26969,7 @@ var PanelModelBase = /** @class */ (function (_super) {
         _this.registerPropertyChangedHandlers(["questionStartIndex", "showQuestionNumbers"], function () {
             _this.updateVisibleIndexes();
         });
+        _this.dragDropPanelHelper = new _drag_drop_panel_helper_v1__WEBPACK_IMPORTED_MODULE_10__["DragDropPanelHelperV1"](_this);
         return _this;
     }
     PanelModelBase.getPanelId = function () {
@@ -27510,7 +27798,10 @@ var PanelModelBase = /** @class */ (function (_super) {
         element.setSurveyImpl(this.surveyImpl);
         element.parent = this;
         this.markQuestionListDirty();
-        this.updateRowsOnElementAdded(element, index);
+        if (this.canBuildRows()) {
+            var dragDropInfo = _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].supportCreatorV2 ? this.getDragDropInfo() : undefined;
+            this.dragDropPanelHelper.updateRowsOnElementAdded(element, index, dragDropInfo, this);
+        }
         if (element.isPanel) {
             var p = element;
             if (this.survey) {
@@ -27611,29 +27902,6 @@ var PanelModelBase = /** @class */ (function (_super) {
         var page = this.getPage(this.parent);
         return !!page ? page.getDragDropInfo() : undefined;
     };
-    PanelModelBase.prototype.updateRowsOnElementAdded = function (element, index) {
-        if (!this.canBuildRows())
-            return;
-        var dragDropInfo = _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].supportCreatorV2 ? this.getDragDropInfo() : undefined;
-        if (!dragDropInfo) {
-            dragDropInfo = new DragDropInfo(null, element);
-            dragDropInfo.target = element;
-            dragDropInfo.isEdge = this.elements.length > 1;
-            if (this.elements.length < 2) {
-                dragDropInfo.destination = this;
-            }
-            else {
-                dragDropInfo.isBottom = index > 0;
-                if (index == 0) {
-                    dragDropInfo.destination = this.elements[1];
-                }
-                else {
-                    dragDropInfo.destination = this.elements[index - 1];
-                }
-            }
-        }
-        this.dragDropAddTargetToRow(dragDropInfo, null);
-    };
     PanelModelBase.prototype.updateRowsOnElementRemoved = function (element) {
         if (!this.canBuildRows())
             return;
@@ -27953,147 +28221,13 @@ var PanelModelBase = /** @class */ (function (_super) {
         }
     };
     PanelModelBase.prototype.dragDropAddTarget = function (dragDropInfo) {
-        var prevRow = this.dragDropFindRow(dragDropInfo.target);
-        if (this.dragDropAddTargetToRow(dragDropInfo, prevRow)) {
-            this.updateRowsRemoveElementFromRow(dragDropInfo.target, prevRow);
-        }
+        this.dragDropPanelHelper.dragDropAddTarget(dragDropInfo);
     };
     PanelModelBase.prototype.dragDropFindRow = function (findElement) {
-        if (!findElement || findElement.isPage)
-            return null;
-        var element = findElement;
-        var rows = this.rows;
-        for (var i = 0; i < rows.length; i++) {
-            if (rows[i].elements.indexOf(element) > -1)
-                return rows[i];
-        }
-        for (var i = 0; i < this.elements.length; i++) {
-            var pnl = this.elements[i].getPanel();
-            if (!pnl)
-                continue;
-            var row = pnl.dragDropFindRow(element);
-            if (!!row)
-                return row;
-        }
-        return null;
-    };
-    PanelModelBase.prototype.dragDropAddTargetToRow = function (dragDropInfo, prevRow) {
-        if (!dragDropInfo.destination)
-            return true;
-        if (this.dragDropAddTargetToEmptyPanel(dragDropInfo))
-            return true;
-        var dest = dragDropInfo.destination;
-        var destRow = this.dragDropFindRow(dest);
-        if (!destRow)
-            return true;
-        if (_settings__WEBPACK_IMPORTED_MODULE_7__["settings"].supportCreatorV2 && this.isDesignMode) {
-            if (destRow.elements.length > 1)
-                return this.dragDropAddTargetToExistingRow(dragDropInfo, destRow, prevRow);
-            else
-                return this.dragDropAddTargetToNewRow(dragDropInfo, destRow, prevRow);
-        }
-        if (!dragDropInfo.target.startWithNewLine)
-            return this.dragDropAddTargetToExistingRow(dragDropInfo, destRow, prevRow);
-        return this.dragDropAddTargetToNewRow(dragDropInfo, destRow, prevRow);
-    };
-    PanelModelBase.prototype.dragDropAddTargetToEmptyPanel = function (dragDropInfo) {
-        if (dragDropInfo.destination.isPage) {
-            this.dragDropAddTargetToEmptyPanelCore(this.root, dragDropInfo.target, dragDropInfo.isBottom);
-            return true;
-        }
-        var dest = dragDropInfo.destination;
-        if (dest.isPanel && !dragDropInfo.isEdge) {
-            var panel = dest;
-            if (dragDropInfo.target["template"] === dest) {
-                return false;
-            }
-            if (dragDropInfo.nestedPanelDepth < 0 ||
-                dragDropInfo.nestedPanelDepth >= panel.depth) {
-                this.dragDropAddTargetToEmptyPanelCore(dest, dragDropInfo.target, dragDropInfo.isBottom);
-                return true;
-            }
-        }
-        return false;
-    };
-    PanelModelBase.prototype.dragDropAddTargetToExistingRow = function (dragDropInfo, destRow, prevRow) {
-        var index = destRow.elements.indexOf(dragDropInfo.destination);
-        if (index == 0 &&
-            !dragDropInfo.isBottom) {
-            if (this.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].supportCreatorV2) {
-            }
-            else if (destRow.elements[0].startWithNewLine) {
-                if (destRow.index > 0) {
-                    dragDropInfo.isBottom = true;
-                    destRow = destRow.panel.rows[destRow.index - 1];
-                    dragDropInfo.destination =
-                        destRow.elements[destRow.elements.length - 1];
-                    return this.dragDropAddTargetToExistingRow(dragDropInfo, destRow, prevRow);
-                }
-                else {
-                    return this.dragDropAddTargetToNewRow(dragDropInfo, destRow, prevRow);
-                }
-            }
-        }
-        var prevRowIndex = -1;
-        if (prevRow == destRow) {
-            prevRowIndex = destRow.elements.indexOf(dragDropInfo.target);
-        }
-        if (dragDropInfo.isBottom)
-            index++;
-        var srcRow = this.findRowByElement(dragDropInfo.source);
-        if (srcRow == destRow &&
-            srcRow.elements.indexOf(dragDropInfo.source) == index)
-            return false;
-        if (index == prevRowIndex)
-            return false;
-        if (prevRowIndex > -1) {
-            destRow.elements.splice(prevRowIndex, 1);
-            if (prevRowIndex < index)
-                index--;
-        }
-        destRow.elements.splice(index, 0, dragDropInfo.target);
-        destRow.updateVisible();
-        return prevRowIndex < 0;
-    };
-    PanelModelBase.prototype.dragDropAddTargetToNewRow = function (dragDropInfo, destRow, prevRow) {
-        var targetRow = destRow.panel.createRowAndSetLazy(destRow.panel.rows.length);
-        if (this.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].supportCreatorV2) {
-            targetRow.setIsLazyRendering(false);
-        }
-        targetRow.addElement(dragDropInfo.target);
-        var index = destRow.index;
-        if (dragDropInfo.isBottom) {
-            index++;
-        }
-        //same row
-        if (!!prevRow && prevRow.panel == targetRow.panel && prevRow.index == index)
-            return false;
-        var srcRow = this.findRowByElement(dragDropInfo.source);
-        if (!!srcRow &&
-            srcRow.panel == targetRow.panel &&
-            srcRow.elements.length == 1 &&
-            srcRow.index == index)
-            return false;
-        destRow.panel.rows.splice(index, 0, targetRow);
-        return true;
-    };
-    PanelModelBase.prototype.dragDropAddTargetToEmptyPanelCore = function (panel, target, isBottom) {
-        var targetRow = panel.createRow();
-        targetRow.addElement(target);
-        if (panel.elements.length == 0 || isBottom) {
-            panel.rows.push(targetRow);
-        }
-        else {
-            panel.rows.splice(0, 0, targetRow);
-        }
+        return this.dragDropPanelHelper.dragDropFindRow(findElement);
     };
     PanelModelBase.prototype.dragDropMoveElement = function (src, target, targetIndex) {
-        var srcIndex = src.parent.elements.indexOf(src);
-        if (targetIndex > srcIndex) {
-            targetIndex--;
-        }
-        this.removeElement(src);
-        this.addElement(target, targetIndex);
+        this.dragDropPanelHelper.dragDropMoveElement(src, target, targetIndex);
     };
     PanelModelBase.prototype.needResponsiveWidth = function () {
         var result = false;
@@ -34316,6 +34450,18 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         return true;
     };
     QuestionSelectBase.prototype.onSelectedItemValuesChangedHandler = function (newValue) { };
+    QuestionSelectBase.prototype.getSingleSelectedItem = function () {
+        var selectedItemValues = this.selectedItemValues;
+        if (this.isEmpty())
+            return null;
+        var itemValue = _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].getItemByValue(this.visibleChoices, this.value);
+        this.onGetSingleSelectedItem(itemValue);
+        if (!itemValue && !selectedItemValues) {
+            this.updateSelectedItemValues();
+        }
+        return itemValue || selectedItemValues || (this.isOtherSelected ? this.otherItem : new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](this.value));
+    };
+    QuestionSelectBase.prototype.onGetSingleSelectedItem = function (selectedItemByValue) { };
     QuestionSelectBase.prototype.setConditionalChoicesRunner = function () {
         if (this.choicesVisibleIf) {
             if (!this.conditionChoicesVisibleIfRunner) {
@@ -38300,22 +38446,15 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(QuestionDropdownModel.prototype, "selectedItem", {
-        get: function () {
-            var selectedItemValues = this.selectedItemValues;
-            if (this.isEmpty())
-                return null;
-            var itemValue = _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].getItemByValue(this.visibleChoices, this.value);
-            if (!!itemValue) {
-                this.lastSelectedItemValue = itemValue;
-            }
-            else if (!selectedItemValues) {
-                this.updateSelectedItemValues();
-            }
-            return this.lastSelectedItemValue || selectedItemValues || (this.isOtherSelected ? this.otherItem : new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](this.value));
-        },
+        get: function () { return this.getSingleSelectedItem(); },
         enumerable: false,
         configurable: true
     });
+    QuestionDropdownModel.prototype.onGetSingleSelectedItem = function (selectedItemByValue) {
+        if (!!selectedItemByValue) {
+            this.lastSelectedItemValue = selectedItemByValue;
+        }
+    };
     QuestionDropdownModel.prototype.supportGoNextPageAutomatic = function () {
         return true;
     };
@@ -43405,7 +43544,8 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         return this.getColumnByName(columnName);
     };
     QuestionMatrixDropdownModelBase.prototype.getColumnWidth = function (column) {
-        return column.minWidth ? column.minWidth : this.columnMinWidth;
+        var _a;
+        return column.minWidth ? column.minWidth : this.columnMinWidth ? this.columnMinWidth : (((_a = _settings__WEBPACK_IMPORTED_MODULE_9__["settings"].matrix.columnWidthsByType[column.cellType]) === null || _a === void 0 ? void 0 : _a.minWidth) || "");
     };
     Object.defineProperty(QuestionMatrixDropdownModelBase.prototype, "choices", {
         /**
@@ -44275,10 +44415,10 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         return this.SurveyModel.getMatrixCellTemplateData(cell);
     };
     QuestionMatrixDropdownModelBase.prototype.getCellWrapperComponentName = function (cell) {
-        return this.SurveyModel.getElementWrapperComponentName(cell, "cell");
+        return this.SurveyModel.getElementWrapperComponentName(cell, cell.row instanceof MatrixDropdownTotalRowModel ? "row-footer" : "cell");
     };
     QuestionMatrixDropdownModelBase.prototype.getCellWrapperComponentData = function (cell) {
-        return this.SurveyModel.getElementWrapperComponentData(cell, "cell");
+        return this.SurveyModel.getElementWrapperComponentData(cell, cell.row instanceof MatrixDropdownTotalRowModel ? "row-footer" : "cell");
     };
     QuestionMatrixDropdownModelBase.prototype.getColumnHeaderWrapperComponentName = function (cell) {
         return this.SurveyModel.getElementWrapperComponentName(cell, "column-header");
@@ -45136,7 +45276,14 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("matrixdropdownc
         serializationProperty: "locRequiredErrorText",
     },
     "readOnly:boolean",
-    "minWidth",
+    {
+        name: "minWidth",
+        onPropertyEditorUpdate: function (obj, editor) {
+            if (!!obj && !!editor) {
+                editor.value = obj.minWidth;
+            }
+        }
+    },
     "width",
     "visibleIf:condition",
     "enableIf:condition",
@@ -48012,6 +48159,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
 /* harmony import */ var _actions_action__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./actions/action */ "./src/actions/action.ts");
 /* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./base */ "./src/base.ts");
+/* harmony import */ var _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./actions/adaptive-container */ "./src/actions/adaptive-container.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -48050,6 +48198,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 var QuestionPanelDynamicItemTextProcessor = /** @class */ (function (_super) {
     __extends(QuestionPanelDynamicItemTextProcessor, _super);
     function QuestionPanelDynamicItemTextProcessor(data, panelItem, variableName) {
@@ -48502,6 +48651,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                     val = this.panelCount - 1;
                 this.currentIndexValue = val;
                 this.updateFooterActions();
+                this.updateTabToolbarItemsPressedState();
                 this.fireCallback(this.currentIndexChangedCallback);
             }
         },
@@ -48810,6 +48960,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             for (var i = this.panelCount; i < val; i++) {
                 var panel = this.createNewPanel();
                 this.panels.push(panel);
+                this.addTabFromToolbar(panel);
                 if (this.renderMode == "list" && this.panelsState != "default") {
                     if (this.panelsState === "expand") {
                         panel.expand();
@@ -48821,13 +48972,16 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                     }
                 }
             }
-            if (val < this.panelCount)
-                this.panels.splice(val, this.panelCount - val);
+            var removedPanels = [];
+            if (val < this.panelCount) {
+                removedPanels = this.panels.splice(val, this.panelCount - val);
+            }
             this.setValueAfterPanelsCreating();
             this.setValueBasedOnPanelCount();
             this.reRunCondition();
             this.updateFooterActions();
             this.fireCallback(this.panelCountChangedCallback);
+            (removedPanels.length > 0) && this.removeTabFromToolbar(removedPanels);
         },
         enumerable: false,
         configurable: true
@@ -49069,6 +49223,19 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "tabAlign", {
+        get: function () {
+            return this.getPropertyValue("tabAlign");
+        },
+        set: function (val) {
+            this.setPropertyValue("tabAlign", val);
+            if (this.isRenderModeTab) {
+                this.additionalTitleToolbar.containerCss = this.getAdditionalTitleToolbarCss();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "isRenderModeList", {
         get: function () {
             return this.renderMode === "list";
@@ -49076,6 +49243,25 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "isRenderModeTab", {
+        get: function () {
+            return this.renderMode === "tab";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "hasTitleOnLeftTop", {
+        get: function () {
+            if (this.isRenderModeTab && !!this.panelCount)
+                return true;
+            if (!this.hasTitle)
+                return false;
+            var location = this.getTitleLocation();
+            return location === "left" || location === "top";
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionPanelDynamicModel.prototype.setVisibleIndex = function (value) {
         if (!this.isVisible)
             return 0;
@@ -49172,6 +49358,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         this.reRunCondition();
         this.updateFooterActions();
         this.fireCallback(this.panelCountChangedCallback);
+        this.updateTabToolbar();
     };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "defaultPanelValue", {
         /**
@@ -49367,6 +49554,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (this.survey)
             this.survey.dynamicPanelRemoved(this, index, panel);
         this.isValueChangingInternally = false;
+        this.removeTabFromToolbar([panel]);
     };
     QuestionPanelDynamicModel.prototype.getPanelIndex = function (val) {
         if (_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isNumber(val))
@@ -50024,6 +50212,18 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.getRootCss = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]().append(_super.prototype.getRootCss.call(this)).append(this.cssClasses.empty, this.getShowNoEntriesPlaceholder()).toString();
     };
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "cssHeader", {
+        get: function () {
+            var showTab = this.isRenderModeTab && !!this.panelCount;
+            return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
+                .append(this.cssClasses.header)
+                .append(this.cssClasses.headerTop, this.hasTitleOnTop || showTab)
+                .append(this.cssClasses.headerTab, showTab)
+                .toString();
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionPanelDynamicModel.prototype.getPanelWrapperCss = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
             .append(this.cssClasses.panelWrapper)
@@ -50085,6 +50285,22 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             return true;
         return false;
     };
+    QuestionPanelDynamicModel.prototype.getAdditionalTitleToolbar = function () {
+        if (!this.isRenderModeTab)
+            return null;
+        if (!this.additionalTitleToolbarValue) {
+            this.additionalTitleToolbarValue = new _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_12__["AdaptiveActionContainer"]();
+            this.additionalTitleToolbarValue.containerCss = this.getAdditionalTitleToolbarCss();
+            this.additionalTitleToolbarValue.cssClasses = {
+                item: "sv-tab-item",
+                itemPressed: "sv-tab-item--pressed",
+                itemAsIcon: "sv-tab-item--icon",
+                itemIcon: "sv-tab-item__icon",
+                itemTitle: "sv-tab-item__title"
+            };
+        }
+        return this.additionalTitleToolbarValue;
+    };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "footerToolbar", {
         get: function () {
             if (!this.footerToolbarValue) {
@@ -50159,6 +50375,64 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         this.updateFooterActionsCallback();
         this.footerToolbarValue.setItems(items);
     };
+    QuestionPanelDynamicModel.prototype.createTabByPanel = function (panel) {
+        var _this = this;
+        if (!this.isRenderModeTab)
+            return;
+        var index = this.getPanelIndex(panel);
+        var title = this.getLocalizationFormatString("panelDynamicTabTextFormat", index + 1);
+        var newItem = new _actions_action__WEBPACK_IMPORTED_MODULE_10__["Action"]({
+            id: index.toString(),
+            css: "sv-tab-item__root",
+            pressed: index === this.currentIndex,
+            title: title,
+            action: function () {
+                _this.currentIndex = parseInt(newItem.id);
+                _this.updateTabToolbarItemsPressedState();
+            }
+        });
+        return newItem;
+    };
+    QuestionPanelDynamicModel.prototype.getAdditionalTitleToolbarCss = function () {
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
+            .append("sv-tabs-toolbar")
+            .append("sv-tabs-toolbar--left", this.tabAlign === "left")
+            .append("sv-tabs-toolbar--right", this.tabAlign === "right")
+            .append("sv-tabs-toolbar--center", this.tabAlign === "center")
+            .toString();
+    };
+    QuestionPanelDynamicModel.prototype.updateTabToolbarItemsPressedState = function () {
+        var _this = this;
+        if (!this.isRenderModeTab)
+            return;
+        this.additionalTitleToolbar.renderedActions.forEach(function (action) { return action.pressed = parseInt(action.id) === _this.currentIndex; });
+    };
+    QuestionPanelDynamicModel.prototype.updateTabToolbar = function () {
+        var _this = this;
+        if (!this.isRenderModeTab)
+            return;
+        var items = [];
+        this.panels.forEach(function (panel) { return items.push(_this.createTabByPanel(panel)); });
+        this.additionalTitleToolbar.setItems(items);
+    };
+    QuestionPanelDynamicModel.prototype.addTabFromToolbar = function (panel) {
+        if (!this.isRenderModeTab)
+            return;
+        var newItem = this.createTabByPanel(panel);
+        this.additionalTitleToolbar.actions.push(newItem);
+        this.updateTabToolbarItemsPressedState();
+    };
+    QuestionPanelDynamicModel.prototype.removeTabFromToolbar = function (panels) {
+        var _this = this;
+        if (!this.isRenderModeTab)
+            return;
+        panels.forEach(function (panel) {
+            var index = _this.getPanelIndex(panel);
+            var removedItem = _this.additionalTitleToolbar.getActionById(index.toString());
+            _this.additionalTitleToolbar.actions.splice(_this.additionalTitleToolbar.actions.indexOf(removedItem), 1);
+        });
+        this.updateTabToolbarItemsPressedState();
+    };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "showLegacyNavigation", {
         get: function () {
             return !this.isDefaultV2Theme;
@@ -50232,7 +50506,10 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].addClass("paneldynamic",
     {
         name: "renderMode",
         default: "list",
-        choices: ["list", "progressTop", "progressBottom", "progressTopBottom"],
+        choices: ["list", "progressTop", "progressBottom", "progressTopBottom", "tab"],
+    },
+    {
+        name: "tabAlign", default: "center", choices: ["center", "left", "right"],
     },
     {
         name: "templateTitleLocation",
@@ -50267,9 +50544,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
 /* harmony import */ var _questionfactory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./questionfactory */ "./src/questionfactory.ts");
 /* harmony import */ var _question_baseselect__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./question_baseselect */ "./src/question_baseselect.ts");
-/* harmony import */ var _itemvalue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./itemvalue */ "./src/itemvalue.ts");
-/* harmony import */ var _actions_action__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./actions/action */ "./src/actions/action.ts");
-/* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./base */ "./src/base.ts");
+/* harmony import */ var _actions_action__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions/action */ "./src/actions/action.ts");
+/* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./base */ "./src/base.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -50290,7 +50566,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
 /**
  * A class that describes the Radiogroup question type.
  *
@@ -50328,16 +50603,7 @@ var QuestionRadiogroupModel = /** @class */ (function (_super) {
         /**
          * Returns the selected choice item. If no item is selected, returns `null`.
          */
-        get: function () {
-            var selectedItemValues = this.selectedItemValues;
-            if (this.isEmpty())
-                return null;
-            var itemValue = _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].getItemByValue(this.visibleChoices, this.value);
-            if (!itemValue && !selectedItemValues) {
-                this.updateSelectedItemValues();
-            }
-            return itemValue || selectedItemValues || (this.isOtherSelected ? this.otherItem : new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](this.value));
-        },
+        get: function () { return this.getSingleSelectedItem(); },
         enumerable: false,
         configurable: true
     });
@@ -50387,12 +50653,12 @@ var QuestionRadiogroupModel = /** @class */ (function (_super) {
         var _this = this;
         var actions = [];
         if (this.isDefaultV2Theme && !this.isDesignMode) {
-            var clearAction = new _actions_action__WEBPACK_IMPORTED_MODULE_4__["Action"]({
+            var clearAction = new _actions_action__WEBPACK_IMPORTED_MODULE_3__["Action"]({
                 title: this.clearButtonCaption,
                 id: "sv-clr-btn-" + this.id,
                 action: function () { _this.clearValue(); },
                 innerCss: this.cssClasses.clearButton,
-                visible: new _base__WEBPACK_IMPORTED_MODULE_5__["ComputedUpdater"](function () { return _this.canShowClearButton; })
+                visible: new _base__WEBPACK_IMPORTED_MODULE_4__["ComputedUpdater"](function () { return _this.canShowClearButton; })
             });
             actions.push(clearAction);
         }
@@ -52121,6 +52387,9 @@ var QuestionTextModel = /** @class */ (function (_super) {
             if (_this.isInputTextUpdate) {
                 _this._isWaitingForEnter = event.keyCode === 229;
             }
+            if (event.keyCode === 13) {
+                _this.survey.questionEditFinishCallback(_this, event);
+            }
         };
         _this.onChange = function (event) {
             if (event.target === document.activeElement) {
@@ -56404,8 +56673,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyElementHeader", function() { return SurveyElementHeader; });
 /* 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 _components_title_title_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/title/title-element */ "./src/react/components/title/title-element.tsx");
-/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
+/* harmony import */ var _components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/action-bar/action-bar */ "./src/react/components/action-bar/action-bar.tsx");
+/* harmony import */ var _components_title_title_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/title/title-element */ "./src/react/components/title/title-element.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -56424,6 +56694,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyElementHeader = /** @class */ (function (_super) {
     __extends(SurveyElementHeader, _super);
     function SurveyElementHeader() {
@@ -56438,13 +56709,15 @@ var SurveyElementHeader = /** @class */ (function (_super) {
     });
     SurveyElementHeader.prototype.render = function () {
         var element = this.element;
-        var title = element.hasTitle ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_title_title_element__WEBPACK_IMPORTED_MODULE_1__["TitleElement"], { element: element })) : null;
+        var title = element.hasTitle ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_title_title_element__WEBPACK_IMPORTED_MODULE_2__["TitleElement"], { element: element })) : null;
         var description = element.hasDescriptionUnderTitle
-            ? _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"].renderQuestionDescription(this.element)
+            ? _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"].renderQuestionDescription(this.element)
             : null;
+        var additionalTitleToolbarElement = !!element.additionalTitleToolbar ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: element.additionalTitleToolbar }) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: element.cssHeader, onClick: element.clickTitleFunction },
             title,
-            description));
+            description,
+            additionalTitleToolbarElement));
     };
     return SurveyElementHeader;
 }(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));
@@ -58081,7 +58354,8 @@ var SurveyProgressToc = /** @class */ (function (_super) {
     }
     SurveyProgressToc.prototype.render = function () {
         var listModel = Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["createTOCListModel"])(this.props.model);
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.props.containerCss || "sv_progress-toc" },
+        var rootCss = Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["getTocRootCss"])(this.props.model);
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: rootCss },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_list_list__WEBPACK_IMPORTED_MODULE_4__["List"], { model: listModel })));
     };
     return SurveyProgressToc;
@@ -58492,7 +58766,7 @@ var SurveyQuestionAndErrorsCell = /** @class */ (function (_super) {
         var survey = this.question.survey;
         var wrapper = null;
         if (survey) {
-            wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_2__["ReactSurveyElementsWrapper"].wrapMatrixCell(survey, element, cell);
+            wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_2__["ReactSurveyElementsWrapper"].wrapMatrixCell(survey, element, cell, this.props.reason);
         }
         return wrapper !== null && wrapper !== void 0 ? wrapper : element;
     };
@@ -60295,7 +60569,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         var table = this.question.renderedTable;
         if (!table.showFooter)
             return null;
-        var row = this.renderRow("footer", table.footerRow, this.question.cssClasses);
+        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 () {
@@ -60307,23 +60581,26 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         }
         return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tbody", null, rows);
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderRow = function (keyValue, row, cssClasses) {
+    SurveyQuestionMatrixDropdownBase.prototype.renderRow = function (keyValue, row, cssClasses, reason) {
         var matrixrow = [];
         var cells = row.cells;
         for (var i = 0; i < cells.length; i++) {
-            matrixrow.push(this.renderCell(cells[i], i, cssClasses));
+            matrixrow.push(this.renderCell(cells[i], i, cssClasses, reason));
         }
         var key = "row" + keyValue;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], { key: key },
             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) {
+    SurveyQuestionMatrixDropdownBase.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 }));
+            return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixDropdownCell, { key: key, cssClasses: cssClasses, cell: cell, creator: this.creator, reason: reason }));
+        }
+        var calcReason = reason;
+        if (!calcReason) {
+            calcReason = cell.hasTitle ? "row-header" : "";
         }
-        var reason = cell.hasTitle ? "row-header" : "";
-        var cellContent = this.renderCellContent(cell, reason, cssClasses);
+        var cellContent = this.renderCellContent(cell, calcReason, cssClasses);
         var cellStyle = null;
         if (!!cell.width || !!cell.minWidth) {
             cellStyle = {};
@@ -60943,10 +61220,10 @@ var SurveyQuestionPanelDynamic = /** @class */ (function (_super) {
     SurveyQuestionPanelDynamic.prototype.renderNavigatorV2 = function () {
         if (this.question.panelCount === 0 || this.question["showLegacyNavigation"])
             return null;
-        var range = this.question.isRangeShowing && !this.question.isProgressTopShowing ? this.renderRange() : null;
         if (!this.question.cssClasses.footer) {
             return null;
         }
+        var range = this.question.isRangeShowing && this.question.isProgressBottomShowing ? this.renderRange() : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.footer },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("hr", { className: this.question.cssClasses.separator }),
             range,
@@ -62495,6 +62772,10 @@ var RendererFactory = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "settings", function() { return settings; });
+var columnWidthsByType = {
+    "file": { minWidth: "240px" },
+    "comment": { minWidth: "200px" }
+};
 /**
  * Global settings that apply to all surveys on the page. To specify one of the settings, use the code below:
  *
@@ -62505,6 +62786,16 @@ __webpack_require__.r(__webpack_exports__);
  * ```
  */
 var settings = {
+    /**
+     * Specifies an action to perform when users press the Enter key within a survey.
+     *
+     * Possible values:
+     *
+     * - `"moveToNextEditor"` - Moves focus to the next editor.
+     * - `"loseFocus"` - Removes focus from the current editor.
+     * - `"default"` - Behaves as a standard `<input>` element.
+     */
+    enterKeyAction: "default",
     /**
      * An object that configures string comparison.
      *
@@ -62941,6 +63232,18 @@ var settings = {
             "email",
             "impp",
         ]
+    },
+    /**
+     * Contains properties that apply to [Single-Choice](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-question-model), [Multiple-Choice](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list), and [Dynamic Matrix](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model) questions.
+     *
+     * Nested properties:
+     *
+     * - `columnWidthsByType`: `Object`\
+     * An object that specifies fixed and minimum column width based on the column type.\
+     * Example: `settings.matrix.columnWidthsByType = { "tagbox": { minWidth: "240px", width: "300px" } }`
+     */
+    matrix: {
+        columnWidthsByType: columnWidthsByType
     }
 };
 
@@ -64495,6 +64798,16 @@ var SurveyElement = /** @class */ (function (_super) {
             this.toggleState();
         }
     };
+    Object.defineProperty(SurveyElement.prototype, "additionalTitleToolbar", {
+        get: function () {
+            return this.getAdditionalTitleToolbar();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyElement.prototype.getAdditionalTitleToolbar = function () {
+        return null;
+    };
     SurveyElement.prototype.getCssTitle = function (cssClasses) {
         var isExpandable = this.state !== "default";
         var numInlineLimit = 4;
@@ -64735,9 +65048,10 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onComplete = _this.addEvent();
         /**
-         * An event that is raised before the survey displays a [preview](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#preview-page). Use this event to cancel the preview.
-         *
+         * An event that is raised before the survey displays a [preview of given answers](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#preview-page). Use this event to cancel the preview.
          * @see showPreviewBeforeComplete
+         * @see showPreview
+         * @see cancelPreview
          */
         _this.onShowingPreview = _this.addEvent();
         /**
@@ -65581,9 +65895,10 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "pages", {
         /**
-         * Returns a list of all pages in the survey, including invisible pages.
+         * Returns an array of all pages in the survey.
+         *
+         * To get an array of only visible pages, use the [`visiblePages`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#visiblePages) array.
          * @see PageModel
-         * @see visiblePages
          */
         get: function () {
             return this.getPropertyValue("pages");
@@ -65789,11 +66104,7 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "calculatedValues", {
         /**
-         * Gets or sets a list of calculated values in the survey.
-         * @see CalculatedValue
-         *
-         * For more information, refer to [Calculated Values](https://surveyjs.io/form-library/documentation/design-survey-conditional-logic#calculated-values).
-         *
+         * An array of [calculated values](https://surveyjs.io/form-library/documentation/design-survey-conditional-logic#calculated-values).
          */
         get: function () {
             return this.getPropertyValue("calculatedValues");
@@ -66201,18 +66512,15 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "goNextPageAutomatic", {
         /**
-         * Gets or ses whether user proceeds to the next page without pressing the "Next" button after answering all page questions.
-         * The available options:
+         * Specifies whether the survey switches to the next page automatically after a user answers all questions on the current page.
          *
-         * - `true` - navigate to the next page and submit survey data automatically.
-         * - `autogonext` - navigate to the next page automatically but do not submit survey data.
-         * - `false` - do not navigate to the next page and do not submit survey data automatically.
+         * Default value: `false`
          *
-         * > If any of the following questions is answered last, the survey won't be switched to the next page: Checkbox, Boolean (rendered as Checkbox), Comment, Signature Pad, Image Picker (with Multi Select), File, Single-Choice Matrix (not all rows are answered), Dynamic Matrix, Panel Dynamic.
+         * If you enable this property, the survey is also completed automatically. Set the [`allowCompleteSurveyAutomatic`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#allowCompleteSurveyAutomatic) property to `false` if you want to disable this behavior.
          *
-         * @see showNavigationButtons
+         * > If any of the following questions is answered last, the survey does not switch to the next page: Checkbox, Boolean (rendered as Checkbox), Comment, Signature Pad, Image Picker (with Multi Select), File, Single-Choice Matrix (not all rows are answered), Dynamic Matrix, Panel Dynamic.
          *
-         * [View Demo](https://surveyjs.io/form-library/examples/survey-autonextpage/ (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/automatically-move-to-next-page-if-answer-selected/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("goNextPageAutomatic");
@@ -66225,8 +66533,9 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "allowCompleteSurveyAutomatic", {
         /**
-         * Gets or sets whether a survey is automatically completed when `goNextPageAutomatic = true`. Set it to `false` if you do not want to submit survey automatically on completing the last survey page.
-         * @see goNextPageAutomatic
+         * Specifies whether to complete the survey automatically after a user answers all questions on the last page. Applies only if the [`goNextPageAutomatic`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#goNextPageAutomatic) property is `true`.
+         *
+         * Default value: `true`
          */
         get: function () {
             return this.getPropertyValue("allowCompleteSurveyAutomatic", true);
@@ -66239,14 +66548,15 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "checkErrorsMode", {
         /**
-         * Gets or sets a value that specifies how the survey validates the question answers.
+         * Specifies when the survey validates answers.
          *
-         * The following options are available:
+         * Possible values:
          *
-         * - `onNextPage` (default) - check errors on navigating to the next page or on completing the survey.
-         * - `onValueChanged` - check errors on every question value (i.e., answer) changing.
-         * - `onValueChanging` - check errors before setting value into survey. If there is an error, then survey data is not changed, but question value will be keeped.
-         * - `onComplete` - to validate all visible questions on complete button click. If there are errors on previous pages, then the page with the first error becomes the current.
+         * - `"onNextPage"` (default) - Triggers validation before the survey is switched to the next page or completed.
+         * - `"onValueChanged"` - Triggers validation each time a question value is changed.
+         * - `"onComplete"` - Triggers validation when a user clicks the Complete button. If previous pages contain errors, the survey switches to the page with the first error.
+         *
+         * Refer to the following help topic for more information: [Data Validation](https://surveyjs.io/form-library/documentation/data-validation).
          */
         get: function () {
             return this.getPropertyValue("checkErrorsMode");
@@ -66259,9 +66569,11 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "autoGrowComment", {
         /**
-         * Specifies whether the text area of [comment](https://surveyjs.io/Documentation/Library?id=questioncommentmodel) questions/elements automatically expands its height to avoid the vertical scrollbar and to display the entire multi-line contents entered by respondents.
-         * Default value is false.
-         * @see QuestionCommentModel.autoGrow
+         * Specifies whether to increase the height of text areas to accommodate multi-line comments.
+         *
+         * Default value: `false`
+         *
+         * You can override this property for individual Comment questions: [`autoGrow`](https://surveyjs.io/form-library/documentation/api-reference/comment-field-model#autoGrow).
          */
         get: function () {
             return this.getPropertyValue("autoGrowComment");
@@ -66960,11 +67272,10 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "previewText", {
         /**
-         *  Gets or sets the 'Preview' button caption.
-         * @see locale
+         * Gets or sets a caption for the Preview button.
          * @see showPreviewBeforeComplete
-         * @see editText
          * @see showPreview
+         * @see editText
          */
         get: function () {
             return this.getLocalizableStringText("previewText");
@@ -66984,11 +67295,10 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "editText", {
         /**
-         *  Gets or sets the 'Edit' button caption.
-         * @see locale
+         * Gets or sets a caption for the Edit button displayed when the survey shows a [preview of given answers](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#preview-page).
          * @see showPreviewBeforeComplete
-         * @see previewText
          * @see cancelPreview
+         * @see previewText
          */
         get: function () {
             return this.getLocalizableStringText("editText");
@@ -67701,10 +68011,10 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "visiblePages", {
         /**
-         * Returns a list of visible pages. If all pages are visible, then this property returns the same list as the `pages` property.
-         * @see pages
-         * @see PageModel.visible
-         * @see PageModel.visibleIf
+         * Returns an array of visible pages without the start page.
+         *
+         * To get an array of all pages, use the [`pages`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#pages) property. If all pages are visible, the `pages` and `visiblePages` arrays are identical.
+         * @see [Conditional Visibility](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-visibility)
          */
         get: function () {
             if (this.isDesignMode)
@@ -67742,8 +68052,9 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "pageCount", {
         /**
-         * Returns the survey page count.
-         * @see visiblePageCount
+         * Returns a total number of survey pages.
+         *
+         * To get the number of visible pages, use the [`visiblePageCount`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#visiblePageCount) property.
          * @see pages
          */
         get: function () {
@@ -67754,9 +68065,11 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "visiblePageCount", {
         /**
-         * Returns a number of visible pages within the survey.
-         * @see pageCount
+         * Returns the number of visible survey pages.
+         *
+         * To get a total number of survey pages, use the [`pageCount`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#pageCount) property.
          * @see visiblePages
+         * @see [Conditional Visibility](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-visibility)
          */
         get: function () {
             return this.visiblePages.length;
@@ -67766,8 +68079,11 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "startedPage", {
         /**
-         * Returns the started page. This property works if the `firstPageIsStarted` property is set to `true`.
+         * Returns the start page. Applies only if the [`firstPageIsStarted`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#firstPageIsStarted) property is set to `true`.
+         *
+         * Refer to the following help topic for more information: [Start Page](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#start-page).
          * @see firstPageIsStarted
+         * @see activePage
          */
         get: function () {
             var page = this.firstPageIsStarted && this.pages.length > 1 ? this.pages[0] : null;
@@ -67782,7 +68098,17 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "currentPage", {
         /**
-         * Gets or sets the current survey page. If a survey is rendered, then this property returns a page that a user can see/edit.
+         * Gets or sets the current page.
+         *
+         * If you want to change the current page, set this property to a `PageModel` object. You can get this object in different ways. For example, you can call the [`getPageByName()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#getPageByName) method to obtain a `PageModel` object with a specific name:
+         *
+         * ```js
+         * survey.currentPage = survey.getPageByName("my-page-name");
+         * ```
+         *
+         * Alternatively, you can change the current page if you set the [`currentPageNo`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#currentPageNo) property to the index of the required page.
+         *
+         * The `currentPage` property does not return the start page even if it is current. Use the [`activePage`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#activePage) property instead if your survey contains a start page.
          */
         get: function () {
             return this.getPropertyValue("currentPage", null);
@@ -67835,10 +68161,10 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "activePage", {
         /**
-         * Returns the currentPage, unless the started page is showing. In this case returns the started page.
+         * Returns [`startedPage`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#startedPage) if the survey currently displays a start page; otherwise, returns [`currentPage`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#currentPage).
+         * @see startedPage
          * @see currentPage
          * @see firstPageIsStarted
-         * @see startedPage
          */
         get: function () {
             return this.getPropertyValue("activePage");
@@ -67892,9 +68218,10 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "currentPageNo", {
         /**
-         * The zero-based index of the current page in the visible pages array.
+         * A zero-based index of the current page in the [`visiblePages`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#visiblePages) array.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/survey-editprevious/ (linkStyle))
+         * @see visiblePages
          */
         get: function () {
             return this.visiblePages.indexOf(this.currentPage);
@@ -67910,13 +68237,16 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "questionsOrder", {
         /**
-         * Gets or sets the question display order. Use this property to randomize questions. You can randomize questions on a specific page.
+         * Specifies the sort order of questions in the survey.
          *
-         * The following options are available:
+         * Possible values:
+         *
+         * - `"initial"` (default) - Preserves the original order of questions.
+         * - `"random"` - Displays questions in random order.
          *
-         * - `random` - randomize questions
-         * - `initial` - keep questions in the same order, as in a survey model.
-         * @see SurveyPage.questionsOrder
+         * You can override this property for individual pages and panels.
+         * @see PageModel.questionsOrder
+         * @see PanelModel.questionsOrder
          */
         get: function () {
             return this.getPropertyValue("questionsOrder");
@@ -68076,16 +68406,13 @@ var SurveyModel = /** @class */ (function (_super) {
         this.notifier.notify(message, type, type === "error");
     };
     /**
-     * Clears the survey data and state. If the survey has a `completed` state, it will get a `running` state.
-     * @param clearData clear the data
-     * @param gotoFirstPage make the first page as a current page.
-     * @see data
-     * @see state
-     * @see currentPage
+     * Resets the survey [`state`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#state) and, optionally, [`data`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#data). If `state` is `"completed"`, it becomes `"running"`.
+     * @param clearData *Optional.* Specifies whether to clear survey data. Default value: `true`.
+     * @param goToFirstPage *Optional.* Specifies whether to switch the survey to the first page. Default value: `true`.
      */
-    SurveyModel.prototype.clear = function (clearData, gotoFirstPage) {
+    SurveyModel.prototype.clear = function (clearData, goToFirstPage) {
         if (clearData === void 0) { clearData = true; }
-        if (gotoFirstPage === void 0) { gotoFirstPage = true; }
+        if (goToFirstPage === void 0) { goToFirstPage = true; }
         this.isCompleted = false;
         this.isCompletedBefore = false;
         this.isLoading = false;
@@ -68101,7 +68428,7 @@ var SurveyModel = /** @class */ (function (_super) {
             this.pages[i].passed = false;
         }
         this.onFirstPageIsStartedChanged();
-        if (gotoFirstPage) {
+        if (goToFirstPage) {
             this.currentPage = this.firstVisiblePage;
         }
         if (clearData) {
@@ -68738,14 +69065,11 @@ var SurveyModel = /** @class */ (function (_super) {
         return this.navigationMouseDown();
     };
     /**
-     * Shows preview for the survey. Switches the survey to the "preview" state.
-     *
-     * Details: [Preview State](https://surveyjs.io/Documentation/Library#states-preview)
-     * @see showPreviewBeforeComplete
+     * Displays a [preview of given answers](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#preview-page). Returns `false` if the preview cannot be displayed because of validation errors.
      * @see cancelPreview
+     * @see showPreviewBeforeComplete
+     * @see onShowingPreview
      * @see state
-     * @see previewText
-     * @see editText
      */
     SurveyModel.prototype.showPreview = function () {
         this.resetNavigationButton();
@@ -68762,12 +69086,10 @@ var SurveyModel = /** @class */ (function (_super) {
         this.isShowingPreview = options.allowShowPreview && options.allow;
     };
     /**
-     * Cancels preview and switches back to the "running" state.
-     *
-     * Details: [Preview State](https://surveyjs.io/Documentation/Library#states-preview)
-     * @param curPage - A new current page. If the parameter is undefined then the last page becomes the current.
-     * @see showPreviewBeforeComplete
+     * Cancels a [preview of given answers](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#preview-page) and switches the survey to the page specified by the `curPage` parameter.
+     * @param curPage A new current page. If you do not specify this parameter, the survey displays the last page.
      * @see showPreview
+     * @see showPreviewBeforeComplete
      * @see state
      */
     SurveyModel.prototype.cancelPreview = function (curPage) {
@@ -68834,8 +69156,11 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "firstPageIsStarted", {
         /**
-         * Gets or sets whether the first survey page is a start page. Set this property to `true`, to make the first page a starting page.
-         * An end user cannot navigate to the start page and the start page does not affect a survey progress.
+         * Gets or sets a Boolean value that specifies whether the first page is a start page.
+         *
+         * Refer to the following help topic for more information: [Start Page](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#start-page).
+         * @see startedPage
+         * @see activePage
          */
         get: function () {
             return this.getPropertyValue("firstPageIsStarted");
@@ -69919,9 +70244,10 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     /**
      * Adds an existing page to the survey.
-     * @param page a newly added page
-     * @param index - a page index to where insert a page. It is -1 by default and the page will be added into the end.
+     * @param page A page to add.
+     * @param index An index at which to insert the page. If you do not specify this parameter, the page will be added to the end.
      * @see addNewPage
+     * @see createNewPage
      */
     SurveyModel.prototype.addPage = function (page, index) {
         if (index === void 0) { index = -1; }
@@ -69935,10 +70261,12 @@ var SurveyModel = /** @class */ (function (_super) {
         }
     };
     /**
-     * Creates a new page and adds it to a survey. Generates a new name if the `name` parameter is not specified.
-     * @param name a page name
-     * @param index - a page index to where insert a new page. It is -1 by default and the page will be added into the end.
+     * Creates a new page and adds it to the survey.
+     * @param name A page name. If you do not specify this parameter, it will be generated automatically.
+     * @param index An index at which to insert the page. If you do not specify this parameter, the page will be added to the end.
+     * @returns The created and added page.
      * @see addPage
+     * @see createNewPage
      */
     SurveyModel.prototype.addNewPage = function (name, index) {
         if (name === void 0) { name = null; }
@@ -70154,8 +70482,9 @@ var SurveyModel = /** @class */ (function (_super) {
         return result;
     };
     /**
-     * Creates and returns a new page, but do not add it into the survey.
-     * You can use addPage(page) function to add it into survey later.
+     * Creates and returns a new page but does not add it to the survey.
+     *
+     * Call the [`addPage(page)`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#addPage) method to add the created page to the survey later or the [`addNewPage(name, index)`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#addNewPage) method to create _and_ add a page to the survey.
      * @see addPage
      * @see addNewPage
      */
@@ -71829,6 +72158,20 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         return true;
     };
+    SurveyModel.prototype.questionEditFinishCallback = function (question, event) {
+        if (_settings__WEBPACK_IMPORTED_MODULE_14__["settings"].enterKeyAction == "loseFocus")
+            event.target.blur();
+        if (_settings__WEBPACK_IMPORTED_MODULE_14__["settings"].enterKeyAction == "moveToNextEditor") {
+            var allQuestions = this.currentPage.questions;
+            var questionIndex = allQuestions.indexOf(question);
+            if (questionIndex > -1 && questionIndex < allQuestions.length - 1) {
+                allQuestions[questionIndex + 1].focus();
+            }
+            else {
+                event.target.blur();
+            }
+        }
+    };
     SurveyModel.prototype.getElementWrapperComponentName = function (element, reason) {
         if (reason === "logo-image") {
             return "sv-logo-image";
@@ -71942,7 +72285,7 @@ var SurveyModel = /** @class */ (function (_super) {
                     }
                 }
             }
-            else if (isStrCiEqual(layoutElement.id, "toc-navigation") && this.showTOC) {
+            else if (!this.isShowingPreview && isStrCiEqual(layoutElement.id, "toc-navigation") && this.showTOC) {
                 if (container === "left") {
                     if (["left", "both"].indexOf(this.tocLocation) !== -1) {
                         containerLayoutElements.push(layoutElement);
@@ -72654,13 +72997,14 @@ var SurveyTimerModel = /** @class */ (function (_super) {
 /*!**************************!*\
   !*** ./src/surveyToc.ts ***!
   \**************************/
-/*! exports provided: tryNavigateToPage, createTOCListModel */
+/*! exports provided: tryNavigateToPage, createTOCListModel, getTocRootCss */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "tryNavigateToPage", function() { return tryNavigateToPage; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createTOCListModel", function() { return createTOCListModel; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTocRootCss", function() { return getTocRootCss; });
 /* harmony import */ var _actions_action__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./actions/action */ "./src/actions/action.ts");
 /* harmony import */ var _list__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./list */ "./src/list.ts");
 
@@ -72704,6 +73048,9 @@ function createTOCListModel(survey) {
     });
     return listModel;
 }
+function getTocRootCss(survey) {
+    return "sv_progress-toc" + (" sv_progress-toc--" + (survey.tocLocation || "").toLowerCase());
+}
 
 
 /***/ }),