survey-react 1.9.87 → 1.9.88

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.87
+ * surveyjs - Survey JavaScript library v1.9.88
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -6797,7 +6797,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      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    ";
+        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), 0px 2px 6px 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");
@@ -7384,7 +7384,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      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.style.cssText = "\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1), 0px 2px 6px rgba(0, 0, 0, 0.1);\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;
@@ -7551,7 +7551,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          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        ";
+        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), 0px 2px 6px 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);
@@ -9659,7 +9659,7 @@ __webpack_require__.r(__webpack_exports__);
 // import "../../main.scss";
 //import "../../modern.scss";
 var Version;
-Version = "" + "1.9.87";
+Version = "" + "1.9.88";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -31415,6 +31415,10 @@ var PopupModel = /** @class */ (function (_super) {
         _this.title = title;
         return _this;
     }
+    PopupModel.prototype.refreshInnerModel = function () {
+        var innerModel = this.contentComponentData["model"];
+        innerModel && innerModel.refresh && innerModel.refresh();
+    };
     Object.defineProperty(PopupModel.prototype, "isVisible", {
         get: function () {
             return this.getPropertyValue("isVisible", false);
@@ -31425,9 +31429,8 @@ var PopupModel = /** @class */ (function (_super) {
             }
             this.setPropertyValue("isVisible", value);
             this.onVisibilityChanged.fire(this, { model: this, isVisible: value });
+            this.refreshInnerModel();
             if (this.isVisible) {
-                var innerModel = this.contentComponentData["model"];
-                innerModel && innerModel.refresh && innerModel.refresh();
                 this.onShow();
             }
             else {
@@ -37497,6 +37500,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
         if (operator == "contains" || operator == "notcontains") {
             json["type"] = "radiogroup";
         }
+        json["maxSelectedChoices"] = 0;
         return json;
     };
     QuestionCheckboxModel.prototype.isAnswerCorrect = function () {
@@ -48684,6 +48688,13 @@ var QuestionPanelDynamicItemTextProcessor = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicItemTextProcessor.prototype, "visiblePanelIndex", {
+        get: function () {
+            return !!this.data ? this.data.getVisibleItemIndex(this.panelItem) : -1;
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionPanelDynamicItemTextProcessor.prototype.getValues = function () {
         return this.panelItem.getAllValues();
     };
@@ -48713,6 +48724,14 @@ var QuestionPanelDynamicItemTextProcessor = /** @class */ (function (_super) {
                 return true;
             }
         }
+        if (textValue.name == QuestionPanelDynamicItem.VisibleIndexVariableName) {
+            var index = this.visiblePanelIndex;
+            if (index > -1) {
+                textValue.isExists = true;
+                textValue.value = index + 1;
+                return true;
+            }
+        }
         if (textValue.name.toLowerCase().indexOf(QuestionPanelDynamicItem.ParentItemVariableName + ".") == 0) {
             var q = this.data;
             if (!!q && !!q.parentQuestion && !!q.parent && !!q.parent.data) {
@@ -48798,8 +48817,11 @@ var QuestionPanelDynamicItem = /** @class */ (function () {
         values[QuestionPanelDynamicItem.ItemVariableName] = this.getAllValues();
         if (!!this.data) {
             var indexStr = QuestionPanelDynamicItem.IndexVariableName;
+            var visibleIndexStr = QuestionPanelDynamicItem.VisibleIndexVariableName;
             delete values[indexStr];
+            delete values[visibleIndexStr];
             values[indexStr.toLowerCase()] = this.data.getItemIndex(this);
+            values[visibleIndexStr.toLowerCase()] = this.data.getVisibleItemIndex(this);
             var q = this.data;
             if (!!q && !!q.parentQuestion && !!q.parent) {
                 values[QuestionPanelDynamicItem.ParentItemVariableName] = q.parent.getValue();
@@ -48824,6 +48846,7 @@ var QuestionPanelDynamicItem = /** @class */ (function () {
     QuestionPanelDynamicItem.ItemVariableName = "panel";
     QuestionPanelDynamicItem.ParentItemVariableName = "parentpanel";
     QuestionPanelDynamicItem.IndexVariableName = "panelIndex";
+    QuestionPanelDynamicItem.VisibleIndexVariableName = "visiblePanelIndex";
     return QuestionPanelDynamicItem;
 }());
 
@@ -48859,7 +48882,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             _this.recalculateIsReadyValue();
         };
         _this.isSetPanelItemData = {};
-        _this.createNewArray("panels");
+        _this.createNewArray("panels", function (panel) { _this.onPanelAdded(panel); }, function (panel) { _this.onPanelRemoved(panel); });
+        _this.createNewArray("visiblePanels");
         _this.templateValue = _this.createAndSetupNewPanelObject();
         _this.template.renderWidth = "100%";
         _this.template.selectedElementInDesign = _this;
@@ -48895,8 +48919,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionPanelDynamicModel.prototype.getFirstQuestionToFocus = function (withError) {
-        for (var i = 0; i < this.panels.length; i++) {
-            var res = this.panels[i].getFirstQuestionToFocus(withError);
+        for (var i = 0; i < this.visiblePanels.length; i++) {
+            var res = this.visiblePanels[i].getFirstQuestionToFocus(withError);
             if (!!res)
                 return res;
         }
@@ -49007,6 +49031,11 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "templateTitle", {
         /**
          * A template for panel titles.
+         *
+         * The template can contain the following placeholders:
+         *
+         * - `{panelIndex}` - A zero-based index of a panel in the [`panels`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#panels) array.
+         * - `{visiblePanelIndex}` - A zero-based index of a panel in the [`visiblePanels`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#visiblePanels) array.
          * @see template
          * @see templateDescription
          * @see templateElements
@@ -49032,6 +49061,11 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "templateTabTitle", {
         /**
          * A template for tab titles. Applies when [`renderMode`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#renderMode) is `"tab"`.
+         *
+         * The template can contain the following placeholders:
+         *
+         * - `{panelIndex}` - A zero-based index of a panel in the [`panels`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#panels) array.
+         * - `{visiblePanelIndex}` - A zero-based index of a panel in the [`visiblePanels`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#visiblePanels) array.
          * @see templateTitle
          * @see renderMode
          */
@@ -49076,6 +49110,27 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "templateVisibleIf", {
+        /**
+         * A Boolean expression that is evaluated against each panel. If the expression evaluates to `false`, the panel becomes hidden.
+         *
+         * A survey parses and runs all expressions on startup. If any values used in the expression change, the survey re-evaluates it.
+         *
+         * Use the `{panel}` placeholder to reference the current panel in the expression.
+         *
+         * Refer to the following help topic for more information: [Conditional Visibility](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-visibility).
+         * @see visibleIf
+         * @see visiblePanels
+         */
+        get: function () {
+            return this.template.visibleIf;
+        },
+        set: function (val) {
+            this.template.visibleIf = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "items", {
         get: function () {
             var res = [];
@@ -49100,6 +49155,53 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "visiblePanels", {
+        /**
+         * An array of currently visible panels ([`PanelModel`](https://surveyjs.io/form-library/documentation/api-reference/panel-model) objects).
+         * @see templateVisibleIf
+         */
+        get: function () {
+            return this.getPropertyValue("visiblePanels");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QuestionPanelDynamicModel.prototype.onPanelAdded = function (panel) {
+        this.onPanelRemovedCore(panel);
+        if (!panel.visible)
+            return;
+        var index = 0;
+        var panels = this.panels;
+        for (var i = 0; i < panels.length; i++) {
+            if (panels[i] === panel)
+                break;
+            if (panels[i].visible)
+                index++;
+        }
+        this.visiblePanels.splice(index, 0, panel);
+        this.addTabFromToolbar(panel, index);
+        if (!this.currentPanel) {
+            this.currentPanel = panel;
+        }
+    };
+    QuestionPanelDynamicModel.prototype.onPanelRemoved = function (panel) {
+        var index = this.onPanelRemovedCore(panel);
+        if (this.currentPanel === panel) {
+            var visPanels = this.visiblePanels;
+            if (index >= visPanels.length)
+                index = visPanels.length - 1;
+            this.currentPanel = index >= 0 ? visPanels[index] : null;
+        }
+    };
+    QuestionPanelDynamicModel.prototype.onPanelRemovedCore = function (panel) {
+        var visPanels = this.visiblePanels;
+        var index = visPanels.indexOf(panel);
+        if (index > -1) {
+            visPanels.splice(index, 1);
+            this.removeTabFromToolbar(panel);
+        }
+        return index;
+    };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "currentIndex", {
         /**
          * A zero-based index of the currently displayed panel.
@@ -49115,33 +49217,18 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 return -1;
             if (this.useTemplatePanel)
                 return 0;
-            if (this.currentIndexValue < 0 && this.panelCount > 0) {
-                this.currentIndexValue = 0;
-            }
-            if (this.currentIndexValue >= this.panelCount) {
-                this.currentIndexValue = this.panelCount - 1;
-            }
-            return this.currentIndexValue;
+            return this.visiblePanels.indexOf(this.currentPanel);
         },
         set: function (val) {
-            if (this.currentIndexValue !== val) {
-                if (val >= this.panelCount)
-                    val = this.panelCount - 1;
-                this.currentIndexValue = val;
-                this.updateFooterActions();
-                this.updateTabToolbarItemsPressedState();
-                this.fireCallback(this.currentIndexChangedCallback);
-            }
+            if (val < 0 || this.visiblePanelCount < 1)
+                return;
+            if (val >= this.visiblePanelCount)
+                val = this.visiblePanelCount - 1;
+            this.currentPanel = this.visiblePanels[val];
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(QuestionPanelDynamicModel.prototype, "currentIndexValue", {
-        get: function () { return this.getPropertyValue("currentIndexValue", -1); },
-        set: function (val) { this.setPropertyValue("currentIndexValue", val); },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "currentPanel", {
         /**
          * A `PanelModel` object that is the currently displayed panel.
@@ -49153,10 +49240,24 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
          * @see renderMode
          */
         get: function () {
-            var index = this.currentIndex;
-            if (index < 0 || index >= this.panels.length)
+            if (this.isRenderModeList || this.useTemplatePanel)
                 return null;
-            return this.panels[index];
+            var res = this.getPropertyValue("currentPanel", null);
+            if (!res && this.visiblePanelCount > 0) {
+                res = this.visiblePanels[0];
+                this.currentPanel = res;
+            }
+            return res;
+        },
+        set: function (val) {
+            if (this.isRenderModeList || this.useTemplatePanel)
+                return;
+            if (!!val && this.visiblePanels.indexOf(val) < 0 || val === this.getPropertyValue("currentPanel"))
+                return;
+            this.setPropertyValue("currentPanel", val);
+            this.updateFooterActions();
+            this.updateTabToolbarItemsPressedState();
+            this.fireCallback(this.currentIndexChangedCallback);
         },
         enumerable: false,
         configurable: true
@@ -49362,7 +49463,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
          * @see panelNextText
          */
         get: function () {
-            return this.currentIndex >= 0 && this.currentIndex < this.panelCount - 1;
+            return this.currentIndex >= 0 && this.currentIndex < this.visiblePanelCount - 1;
         },
         enumerable: false,
         configurable: true
@@ -49374,10 +49475,10 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "isRangeShowing", {
         /**
-         * Returns true when showRangeInProgress equals to true, renderMode doesn't equal to "list" and panelCount is >= 2.
+         * Returns true when showRangeInProgress equals to true, renderMode doesn't equal to "list" and visiblePanelCount is >= 2.
          */
         get: function () {
-            return (this.showRangeInProgress && this.currentIndex >= 0 && this.panelCount > 1);
+            return (this.showRangeInProgress && this.currentIndex >= 0 && this.visiblePanelCount > 1);
         },
         enumerable: false,
         configurable: true
@@ -49445,7 +49546,6 @@ 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();
@@ -49466,11 +49566,19 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             this.reRunCondition();
             this.updateFooterActions();
             this.fireCallback(this.panelCountChangedCallback);
-            (removedPanels.length > 0) && this.removeTabFromToolbar(removedPanels);
         },
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "visiblePanelCount", {
+        /**
+         * Returns the number of visible panels in Dynamic Panel.
+         * @see templateVisibleIf
+         */
+        get: function () { return this.visiblePanels.length; },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "panelsState", {
         /**
          * Specifies whether users can expand and collapse panels. Applies if `renderMode` is `"list"` and the `templateTitle` property is specified.
@@ -49745,7 +49853,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "hasTitleOnLeftTop", {
         get: function () {
-            if (this.isRenderModeTab && !!this.panelCount)
+            if (this.isRenderModeTab && this.visiblePanelCount > 0)
                 return true;
             if (!this.hasTitle)
                 return false;
@@ -49759,8 +49867,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (!this.isVisible)
             return 0;
         var startIndex = this.showQuestionNumbers == "onSurvey" ? value : 0;
-        for (var i = 0; i < this.panels.length; i++) {
-            var counter = this.setPanelVisibleIndex(this.panels[i], startIndex, this.showQuestionNumbers != "off");
+        for (var i = 0; i < this.visiblePanels.length; i++) {
+            var counter = this.setPanelVisibleIndex(this.visiblePanels[i], startIndex, this.showQuestionNumbers != "off");
             if (this.showQuestionNumbers == "onSurvey") {
                 startIndex += counter;
             }
@@ -49793,7 +49901,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         get: function () {
             if (this.isDesignMode)
                 return false;
-            if (this.isDefaultV2Theme && !this.legacyNavigation && !this.isRenderModeList && this.currentIndex < this.panelCount - 1) {
+            if (this.isDefaultV2Theme && !this.legacyNavigation && !this.isRenderModeList && this.currentIndex < this.visiblePanelCount - 1) {
                 return false;
             }
             return (this.allowAddPanel &&
@@ -49912,7 +50020,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         return true;
     };
     QuestionPanelDynamicModel.prototype.getProgressInfo = function () {
-        return _survey_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElement"].getProgressInfoByElements(this.panels, this.isRequired);
+        return _survey_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElement"].getProgressInfoByElements(this.visiblePanels, this.isRequired);
     };
     QuestionPanelDynamicModel.prototype.isRowEmpty = function (val) {
         for (var prop in val) {
@@ -50028,10 +50136,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
      * @see template
      */
     QuestionPanelDynamicModel.prototype.removePanel = function (value) {
-        var index = this.getPanelIndex(value);
-        if (index < 0 || index >= this.panelCount)
+        var visIndex = this.getVisualPanelIndex(value);
+        if (visIndex < 0 || visIndex >= this.visiblePanelCount)
+            return;
+        var panel = this.visiblePanels[visIndex];
+        var index = this.panels.indexOf(panel);
+        if (index < 0)
             return;
-        var panel = this.panels[index];
         if (this.survey && !this.survey.dynamicPanelRemoving(this, index, panel))
             return;
         this.panels.splice(index, 1);
@@ -50047,14 +50158,13 @@ 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) {
+    QuestionPanelDynamicModel.prototype.getVisualPanelIndex = function (val) {
         if (_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isNumber(val))
             return val;
-        var items = this.items;
-        for (var i = 0; i < this.panels.length; i++) {
-            if (this.panels[i] === val || items[i] === val)
+        var visPanels = this.visiblePanels;
+        for (var i = 0; i < visPanels.length; i++) {
+            if (visPanels[i] === val || visPanels[i].data === val)
                 return i;
         }
         return -1;
@@ -50318,7 +50428,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.getIsAnswered = function () {
         if (!_super.prototype.getIsAnswered.call(this))
             return false;
-        var panels = this.panels;
+        var panels = this.visiblePanels;
         for (var i = 0; i < panels.length; i++) {
             var visibleQuestions = [];
             panels[i].addQuestionsToList(visibleQuestions, true);
@@ -50356,8 +50466,9 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     QuestionPanelDynamicModel.prototype.getAllErrors = function () {
         var result = _super.prototype.getAllErrors.call(this);
-        for (var i = 0; i < this.panels.length; i++) {
-            var questions = this.panels[i].questions;
+        var panels = this.visiblePanels;
+        for (var i = 0; i < panels.length; i++) {
+            var questions = panels[i].questions;
             for (var j = 0; j < questions.length; j++) {
                 var errors = questions[j].getAllErrors();
                 if (errors && errors.length > 0) {
@@ -50403,7 +50514,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     QuestionPanelDynamicModel.prototype.hasErrorInPanels = function (fireCallback, rec) {
         var res = false;
-        var panels = this.panels;
+        var panels = this.visiblePanels;
         var keyValues = [];
         for (var i = 0; i < panels.length; i++) {
             this.setOnCompleteAsyncInPanel(panels[i]);
@@ -50486,6 +50597,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             return _this.getPanelActions(panel);
         };
         panel.footerToolbarCss = this.cssClasses.panelFooter;
+        panel.registerPropertyChangedHandlers(["visible"], function () {
+            if (panel.visible)
+                _this.onPanelAdded(panel);
+            else
+                _this.onPanelRemoved(panel);
+            _this.updateFooterActions();
+        });
         return panel;
     };
     QuestionPanelDynamicModel.prototype.createAndSetupNewPanelObject = function () {
@@ -50596,6 +50714,14 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         var res = this.items.indexOf(item);
         return res > -1 ? res : this.items.length;
     };
+    QuestionPanelDynamicModel.prototype.getVisibleItemIndex = function (item) {
+        var visPanels = this.visiblePanels;
+        for (var i = 0; i < visPanels.length; i++) {
+            if (visPanels[i].data === item)
+                return i;
+        }
+        return visPanels.length;
+    };
     QuestionPanelDynamicModel.prototype.getPanelItemData = function (item) {
         var items = this.items;
         var index = items.indexOf(item);
@@ -50699,7 +50825,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "progressText", {
         get: function () {
-            var rangeMax = this.panelCount;
+            var rangeMax = this.visiblePanelCount;
             return this.getLocalizationFormatString("panelDynamicProgressText", this.currentIndex + 1, rangeMax);
         },
         enumerable: false,
@@ -50707,7 +50833,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "progress", {
         get: function () {
-            return ((this.currentIndex + 1) / this.panelCount) * 100 + "%";
+            return ((this.currentIndex + 1) / this.visiblePanelCount) * 100 + "%";
         },
         enumerable: false,
         configurable: true
@@ -50780,7 +50906,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionPanelDynamicModel.prototype.getShowNoEntriesPlaceholder = function () {
-        return !!this.cssClasses.noEntriesPlaceholder && !this.isDesignMode && this.panelCount === 0;
+        return !!this.cssClasses.noEntriesPlaceholder && !this.isDesignMode && this.visiblePanelCount === 0;
     };
     QuestionPanelDynamicModel.prototype.needResponsiveWidth = function () {
         var panel = this.getPanel();
@@ -50840,7 +50966,6 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         var addBtn = new _actions_action__WEBPACK_IMPORTED_MODULE_11__["Action"]({
             id: "sv-pd-add-btn",
             component: "sv-paneldynamic-add-btn",
-            visible: new _base__WEBPACK_IMPORTED_MODULE_12__["ComputedUpdater"](function () { return _this.canAddPanel; }),
             data: { question: this }
         });
         var prevBtnIcon = new _actions_action__WEBPACK_IMPORTED_MODULE_11__["Action"]({
@@ -50865,8 +50990,9 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             var isMobile = _this.isMobile;
             var showNavigation = !isLegacyNavigation && !isRenderModeList;
             prevTextBtn.visible = showNavigation && _this.currentIndex > 0;
-            nextTextBtn.visible = showNavigation && _this.currentIndex < _this.panelCount - 1;
+            nextTextBtn.visible = showNavigation && _this.currentIndex < _this.visiblePanelCount - 1;
             nextTextBtn.needSpace = isMobile && nextTextBtn.visible && prevTextBtn.visible;
+            addBtn.visible = _this.canAddPanel;
             addBtn.needSpace = _this.isMobile && !nextTextBtn.visible && prevTextBtn.visible;
             progressText.visible = !_this.isRenderModeList && !isMobile;
             progressText.needSpace = !isLegacyNavigation && !_this.isMobile;
@@ -50907,9 +51033,9 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.updateTabToolbarItemsPressedState = function () {
         if (!this.isRenderModeTab)
             return;
-        if (this.currentIndex < 0 || this.currentIndex >= this.panels.length)
+        if (this.currentIndex < 0 || this.currentIndex >= this.visiblePanelCount)
             return;
-        var panel = this.panels[this.currentIndex];
+        var panel = this.visiblePanels[this.currentIndex];
         this.additionalTitleToolbar.renderedActions.forEach(function (action) { return action.pressed = action.id === panel.id; });
     };
     QuestionPanelDynamicModel.prototype.updateTabToolbar = function () {
@@ -50917,24 +51043,23 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (!this.isRenderModeTab)
             return;
         var items = [];
-        this.panels.forEach(function (panel) { return items.push(_this.createTabByPanel(panel)); });
+        this.visiblePanels.forEach(function (panel) { return items.push(_this.createTabByPanel(panel)); });
         this.additionalTitleToolbar.setItems(items);
     };
-    QuestionPanelDynamicModel.prototype.addTabFromToolbar = function (panel) {
+    QuestionPanelDynamicModel.prototype.addTabFromToolbar = function (panel, index) {
         if (!this.isRenderModeTab)
             return;
         var newItem = this.createTabByPanel(panel);
-        this.additionalTitleToolbar.actions.push(newItem);
+        this.additionalTitleToolbar.actions.splice(index, 0, newItem);
         this.updateTabToolbarItemsPressedState();
     };
-    QuestionPanelDynamicModel.prototype.removeTabFromToolbar = function (panels) {
-        var _this = this;
+    QuestionPanelDynamicModel.prototype.removeTabFromToolbar = function (panel) {
         if (!this.isRenderModeTab)
             return;
-        panels.forEach(function (panel) {
-            var removedItem = _this.additionalTitleToolbar.getActionById(panel.id);
-            _this.additionalTitleToolbar.actions.splice(_this.additionalTitleToolbar.actions.indexOf(removedItem), 1);
-        });
+        var removedItem = this.additionalTitleToolbar.getActionById(panel.id);
+        if (!removedItem)
+            return;
+        this.additionalTitleToolbar.actions.splice(this.additionalTitleToolbar.actions.indexOf(removedItem), 1);
         this.updateTabToolbarItemsPressedState();
     };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "showLegacyNavigation", {
@@ -51022,6 +51147,10 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_5__["Serializer"].addClass("paneldynamic",
         default: "default",
         choices: ["default", "top", "bottom", "left"],
     },
+    {
+        name: "templateVisibleIf:expression",
+        category: "logic"
+    },
     {
         name: "panelRemoveButtonLocation",
         default: "bottom",
@@ -52473,7 +52602,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         name: "autoGenerate",
         category: "rateValues",
         default: true,
-        choices: [{ value: true, text: "Generate" }, { value: false, text: "Enter manually" }],
+        choices: [true, false],
         visibleIndex: 4
     },
     {
@@ -55722,7 +55851,7 @@ var NotifierComponent = /** @class */ (function (_super) {
         if (!this.notifier.isDisplayed)
             return null;
         var style = { visibility: this.notifier.active ? "visible" : "hidden" };
-        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.notifier.css, style: style },
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.notifier.css, style: style, role: "alert", "aria-live": "polite" },
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, this.notifier.message),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_3__["SurveyActionBar"], { model: this.notifier.actionBar })));
     };
@@ -60863,6 +60992,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
 /* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
+/* harmony import */ var _reactSurvey__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./reactSurvey */ "./src/react/reactSurvey.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -60883,6 +61013,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyQuestionFile = /** @class */ (function (_super) {
     __extends(SurveyQuestionFile, _super);
     function SurveyQuestionFile(props) {
@@ -60920,7 +61051,7 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
         var questionCss = this.question.cssClasses;
         var noFileChosen = null;
         var chooseFile = null;
-        chooseFile = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { role: "button", tabIndex: 0, className: this.question.getChooseFileCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonCaption },
+        chooseFile = Object(_reactSurvey__WEBPACK_IMPORTED_MODULE_5__["attachKey2click"])(react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { role: "button", tabIndex: 0, className: this.question.getChooseFileCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonCaption },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, this.question.chooseButtonCaption),
             (!!this.question.cssClasses.chooseFileIconId) ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { title: this.question.chooseButtonCaption, iconName: this.question.cssClasses.chooseFileIconId, size: "auto" }) : null));
         if (this.question.isEmpty()) {
@@ -63567,9 +63698,6 @@ var SurveyQuestionTagboxItem = /** @class */ (function (_super) {
     function SurveyQuestionTagboxItem(props) {
         return _super.call(this, props) || this;
     }
-    SurveyQuestionTagboxItem.prototype.getStateElement = function () {
-        return this.item;
-    };
     Object.defineProperty(SurveyQuestionTagboxItem.prototype, "question", {
         get: function () {
             return this.props.question;
@@ -70514,8 +70642,8 @@ var SurveyModel = /** @class */ (function (_super) {
         this.stopTimer();
         this.isCompleted = true;
         this.clearUnusedValues();
-        this.setCookie();
         this.saveDataOnComplete(isCompleteOnTrigger);
+        this.setCookie();
         return true;
     };
     SurveyModel.prototype.saveDataOnComplete = function (isCompleteOnTrigger) {
@@ -74080,7 +74208,9 @@ __webpack_require__.r(__webpack_exports__);
 /* 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");
+/* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./base */ "./src/base.ts");
+/* harmony import */ var _list__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./list */ "./src/list.ts");
+
 
 
 function tryNavigateToPage(survey, index) {
@@ -74107,10 +74237,11 @@ function createTOCListModel(survey) {
                     !!document.activeElement.blur && document.activeElement.blur();
                 }
                 return tryNavigateToPage(survey, index);
-            }
+            },
+            visible: new _base__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () { return page.isVisible; })
         });
     });
-    var listModel = new _list__WEBPACK_IMPORTED_MODULE_1__["ListModel"](items, function (item) {
+    var listModel = new _list__WEBPACK_IMPORTED_MODULE_2__["ListModel"](items, function (item) {
         if (!!item.action()) {
             listModel.selectedItem = item;
         }
@@ -76003,7 +76134,7 @@ function mergeValues(src, dest) {
         return;
     for (var key in src) {
         var value = src[key];
-        if (value && typeof value === "object") {
+        if (!Array.isArray(value) && value && typeof value === "object") {
             if (!dest[key] || typeof dest[key] !== "object")
                 dest[key] = {};
             mergeValues(value, dest[key]);