survey-react 1.12.6 → 1.12.7

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.6
+ * surveyjs - Survey JavaScript library v1.12.7
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */

package/defaultV2.min.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.6
+ * surveyjs - Survey JavaScript library v1.12.7
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */

package/modern.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.6
+ * surveyjs - Survey JavaScript library v1.12.7
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */

package/modern.min.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.6
+ * surveyjs - Survey JavaScript library v1.12.7
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react",
-  "version": "1.12.6",
+  "version": "1.12.7",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",

package/survey.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.6
+ * surveyjs - Survey JavaScript library v1.12.7
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */

package/survey.min.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.6
+ * surveyjs - Survey JavaScript library v1.12.7
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */

package/survey.react.d.ts

@@ -4972,7 +4972,7 @@ declare module "packages/survey-core/src/question_baseselect" {
          *
          * [View Dropdown Demo](https://surveyjs.io/form-library/examples/dropdown-box-with-custom-items/ (linkStyle))
          *
-         * [View Ranking Demo](https://surveyjs.io/form-library/examples/dropdown-box-with-custom-items/ (linkStyle))
+         * [View Ranking Demo](https://surveyjs.io/form-library/examples/ranking-with-custom-items/ (linkStyle))
          */
         get itemComponent(): string;
         set itemComponent(value: string);
@@ -7065,6 +7065,7 @@ declare module "packages/survey-core/src/question_paneldynamic" {
          * @see addPanelUI
          */
         removePanelUI(value: any): void;
+        getPanelRemoveButtonId(panel: PanelModel): string;
         isRequireConfirmOnDelete(val: any): boolean;
         /**
          * Switches Dynamic Panel to the next panel. Returns `true` in case of success, or `false` if `displayMode` is `"list"` or the current panel contains validation errors.
@@ -10699,7 +10700,7 @@ declare module "packages/survey-core/src/survey" {
          * - `"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.
          *
-         * > The `"onValueChanged"` doesn't work with date input fields because of the way browsers process date values. In most browsers, the value is considered changed as soon as a user starts entering the date in a text input field. This means that a user may only enter the day without having the chance to enter the month and year before validation is triggered. For this reason, date input fields are validated before the survey is switched to the next page or completed.
+         * > In SurveyJS Form Library v1.12.5 and earlier, the `"onValueChanged"` mode doesn't work with date input fields because of the way browsers process date values. In most browsers, the value is considered changed as soon as a user starts entering the date in a text input field. This means that a user may only enter the day without having the chance to enter the month and year before validation is triggered. For this reason, date input fields are validated before the survey is switched to the next page or completed. Starting with v1.12.6, `"onValueChanged"` works for date input fields as well as for input fields of other types.
          *
          * Refer to the following help topic for more information: [Data Validation](https://surveyjs.io/form-library/documentation/data-validation).
          * @see validationEnabled
@@ -12671,7 +12672,7 @@ declare module "packages/survey-core/src/survey-element" {
         static ScrollElementToTop(elementId: string, scrollIfVisible?: boolean, scrollIntoViewOptions?: ScrollIntoViewOptions, doneCallback?: () => void): boolean;
         static ScrollElementToViewCore(el: HTMLElement, checkLeft: boolean, scrollIfVisible?: boolean, scrollIntoViewOptions?: ScrollIntoViewOptions, doneCallback?: () => void): boolean;
         static GetFirstNonTextElement(elements: any, removeSpaces?: boolean): any;
-        static FocusElement(elementId: string): boolean;
+        static FocusElement(elementId: string, isTimeOut?: boolean, containerEl?: HTMLElement): boolean;
         private static focusElementCore;
         static CreateDisabledDesignElements: boolean;
         disableDesignActions: boolean;

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.6
+ * surveyjs - Survey JavaScript library v1.12.7
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -13080,22 +13080,22 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
         }
         return null;
     };
-    SurveyElement.FocusElement = function (elementId) {
+    SurveyElement.FocusElement = function (elementId, isTimeOut, containerEl) {
         if (!elementId || !DomDocumentHelper.isAvailable())
             return false;
-        var res = SurveyElement.focusElementCore(elementId);
+        var res = !isTimeOut ? SurveyElement.focusElementCore(elementId, containerEl) : false;
         if (!res) {
             setTimeout(function () {
-                SurveyElement.focusElementCore(elementId);
-            }, 10);
+                SurveyElement.focusElementCore(elementId, containerEl);
+            }, isTimeOut ? 100 : 10);
         }
         return res;
     };
-    SurveyElement.focusElementCore = function (elementId) {
+    SurveyElement.focusElementCore = function (elementId, containerEl) {
         var root = settings.environment.root;
-        if (!root)
+        if (!root && !containerEl)
             return false;
-        var el = root.getElementById(elementId);
+        var el = containerEl ? containerEl.querySelector("#" + CSS.escape(elementId)) : root.getElementById(elementId);
         // https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
         if (el && !el["disabled"] && el.style.display !== "none" && el.offsetParent !== null) {
             SurveyElement.ScrollElementToViewCore(el, true, false);
@@ -19289,8 +19289,10 @@ var question_Question = /** @class */ (function (_super) {
         }
     };
     Question.prototype.focusInputElement = function (onError) {
+        var _a;
         var id = !onError ? this.getFirstInputElementId() : this.getFirstErrorInputElementId();
-        if (survey_element_SurveyElement.FocusElement(id)) {
+        var surveyRoot = (_a = this.survey) === null || _a === void 0 ? void 0 : _a.rootElement;
+        if (survey_element_SurveyElement.FocusElement(id, false, surveyRoot)) {
             this.fireCallback(this.focusCallback);
         }
     };
@@ -39965,7 +39967,6 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         else {
             this.cssValue = value;
         }
-        this.updateCss();
         this.updateElementCss(false);
     };
     Object.defineProperty(SurveyModel.prototype, "cssTitle", {
@@ -40627,7 +40628,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
          * - `"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.
          *
-         * > The `"onValueChanged"` doesn't work with date input fields because of the way browsers process date values. In most browsers, the value is considered changed as soon as a user starts entering the date in a text input field. This means that a user may only enter the day without having the chance to enter the month and year before validation is triggered. For this reason, date input fields are validated before the survey is switched to the next page or completed.
+         * > In SurveyJS Form Library v1.12.5 and earlier, the `"onValueChanged"` mode doesn't work with date input fields because of the way browsers process date values. In most browsers, the value is considered changed as soon as a user starts entering the date in a text input field. This means that a user may only enter the day without having the chance to enter the month and year before validation is triggered. For this reason, date input fields are validated before the survey is switched to the next page or completed. Starting with v1.12.6, `"onValueChanged"` works for date input fields as well as for input fields of other types.
          *
          * Refer to the following help topic for more information: [Data Validation](https://surveyjs.io/form-library/documentation/data-validation).
          * @see validationEnabled
@@ -46181,11 +46182,13 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         if (!!question.page) {
             this.questionHashesAdded(question);
         }
-        if (!this.currentPage) {
-            this.updateCurrentPage();
+        if (!this.isLoadingFromJson) {
+            if (!this.currentPage) {
+                this.updateCurrentPage();
+            }
+            this.updateVisibleIndexes();
+            this.setCalculatedWidthModeUpdater();
         }
-        this.updateVisibleIndexes();
-        this.setCalculatedWidthModeUpdater();
         if (this.canFireAddElement()) {
             this.onQuestionAdded.fire(this, {
                 question: question,
@@ -46568,6 +46571,8 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     });
     SurveyModel.prototype.setCalculatedWidthModeUpdater = function () {
         var _this = this;
+        if (this.isLoadingFromJson)
+            return;
         if (this.calculatedWidthModeUpdater)
             this.calculatedWidthModeUpdater.dispose();
         this.calculatedWidthModeUpdater = new ComputedUpdater(function () { return _this.calculateWidthMode(); });
@@ -49991,7 +49996,8 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         return !this.isDisabledAttr && item.isEnabled;
     };
     QuestionSelectBase.prototype.focusOtherComment = function () {
-        survey_element_SurveyElement.FocusElement(this.otherId);
+        var _a;
+        survey_element_SurveyElement.FocusElement(this.otherId, false, (_a = this.survey) === null || _a === void 0 ? void 0 : _a.rootElement);
     };
     QuestionSelectBase.prototype.onValueChanged = function () {
         _super.prototype.onValueChanged.call(this);
@@ -50009,7 +50015,7 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
          *
          * [View Dropdown Demo](https://surveyjs.io/form-library/examples/dropdown-box-with-custom-items/ (linkStyle))
          *
-         * [View Ranking Demo](https://surveyjs.io/form-library/examples/dropdown-box-with-custom-items/ (linkStyle))
+         * [View Ranking Demo](https://surveyjs.io/form-library/examples/ranking-with-custom-items/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("itemComponent", this.getDefaultItemComponent());
@@ -66531,15 +66537,31 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
      */
     QuestionPanelDynamicModel.prototype.removePanelUI = function (value) {
         var _this = this;
+        var visIndex = this.getVisualPanelIndex(value);
+        if (visIndex < 0 || visIndex >= this.visiblePanelCount)
+            return;
         if (!this.canRemovePanel)
             return;
+        var removePanel = function () {
+            var _a;
+            _this.removePanel(visIndex);
+            var pnlCount = _this.visiblePanelCount;
+            var nextIndex = visIndex >= pnlCount ? pnlCount - 1 : visIndex;
+            var id = pnlCount === 0 ? _this.addButtonId : (nextIndex > -1 ? _this.getPanelRemoveButtonId(_this.visiblePanels[nextIndex]) : "");
+            if (!!id) {
+                survey_element_SurveyElement.FocusElement(id, true, (_a = _this.survey) === null || _a === void 0 ? void 0 : _a.rootElement);
+            }
+        };
         if (this.isRequireConfirmOnDelete(value)) {
-            confirmActionAsync(this.confirmDeleteText, function () { _this.removePanel(value); }, undefined, this.getLocale(), this.survey.rootElement);
+            confirmActionAsync(this.confirmDeleteText, function () { removePanel(); }, undefined, this.getLocale(), this.survey.rootElement);
         }
         else {
-            this.removePanel(value);
+            removePanel();
         }
     };
+    QuestionPanelDynamicModel.prototype.getPanelRemoveButtonId = function (panel) {
+        return panel.id + "_remove_button";
+    };
     QuestionPanelDynamicModel.prototype.isRequireConfirmOnDelete = function (val) {
         if (!this.confirmDelete)
             return false;
@@ -67034,7 +67056,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
     };
     QuestionPanelDynamicModel.prototype.hasErrorInPanels = function (fireCallback, rec) {
         var res = false;
-        var panels = this.visiblePanelsCore;
+        var panels = this.visiblePanels;
         var keyValues = [];
         for (var i = 0; i < panels.length; i++) {
             this.setOnCompleteAsyncInPanel(panels[i]);
@@ -70682,8 +70704,8 @@ Serializer.addClass("currencymask", [
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.12.6";
-ReleaseDate = "" + "2024-10-15";
+Version = "" + "1.12.7";
+ReleaseDate = "" + "2024-10-23";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -89052,7 +89074,8 @@ var paneldynamic_remove_btn_SurveyQuestionPanelDynamicRemoveButton = /** @class
     }
     SurveyQuestionPanelDynamicRemoveButton.prototype.renderElement = function () {
         var btnText = this.renderLocString(this.question.locPanelRemoveText);
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("button", { className: this.question.getPanelRemoveButtonCss(), onClick: this.handleClick, type: "button" },
+        var id = this.question.getPanelRemoveButtonId(this.data.panel);
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("button", { id: id, className: this.question.getPanelRemoveButtonCss(), onClick: this.handleClick, type: "button" },
             external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { className: this.question.cssClasses.buttonRemoveText }, btnText),
             external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { className: this.question.cssClasses.iconRemove })));
     };