survey-react-ui 2.3.10 → 2.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "2.3.10",
+  "version": "2.3.12",
   "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",
@@ -29,7 +29,7 @@
     }
   },
   "peerDependencies": {
-    "survey-core": "2.3.10",
+    "survey-core": "2.3.12",
     "react": "^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0"
   }

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.3.10
+ * surveyjs - Survey JavaScript library v2.3.12
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -28,7 +28,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   icons: () => (/* binding */ iconsV1)
 /* harmony export */ });
 /*!
- * surveyjs - Survey JavaScript library v2.3.10
+ * surveyjs - Survey JavaScript library v2.3.12
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -114,7 +114,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   icons: () => (/* binding */ iconsV2)
 /* harmony export */ });
 /*!
- * surveyjs - Survey JavaScript library v2.3.10
+ * surveyjs - Survey JavaScript library v2.3.12
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -3867,7 +3867,7 @@ var SliderLabelItem = /** @class */ (function (_super) {
         else {
             labelText = react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.labelText }, this.renderLocString(locText));
         }
-        return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { key: this.item.id, className: getLabelCss(locText), style: { left: getPercent(value) + "%" }, onPointerUp: function (e) { handleLabelPointerUp(e.nativeEvent, value); } },
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { key: this.item.uniqueId, className: getLabelCss(locText), style: { left: getPercent(value) + "%" }, onPointerUp: function (e) { handleLabelPointerUp(e.nativeEvent, value); } },
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.labelTick }),
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.labelTextContainer },
                 labelText,
@@ -4304,13 +4304,20 @@ var TitleActions = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(TitleActions.prototype, "renderActions", {
+        get: function () {
+            return this.props.renderActions === undefined ? true : this.props.renderActions;
+        },
+        enumerable: false,
+        configurable: true
+    });
     TitleActions.prototype.render = function () {
         var titleContent = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_title_content__WEBPACK_IMPORTED_MODULE_4__.TitleContent, { element: this.element, cssClasses: this.cssClasses });
         if (!this.element.hasTitleActions)
             return titleContent;
         return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: "sv-title-actions" },
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", { className: "sv-title-actions__title" }, titleContent),
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_3__.SurveyActionBar, { model: this.element.getTitleToolbar() })));
+            (this.renderActions ? react__WEBPACK_IMPORTED_MODULE_0__.createElement(_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_3__.SurveyActionBar, { model: this.element.getTitleToolbar() }) : null)));
     };
     return TitleActions;
 }(react__WEBPACK_IMPORTED_MODULE_0__.Component));
@@ -4472,7 +4479,7 @@ var TitleElement = /** @class */ (function (_super) {
             return null;
         var ariaLabel = element.titleAriaLabel || undefined;
         var titleExpandableSvg = this.renderTitleExpandableSvg();
-        var titleContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_title_actions__WEBPACK_IMPORTED_MODULE_2__.TitleActions, { element: element, cssClasses: element.cssClasses }));
+        var titleContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_title_actions__WEBPACK_IMPORTED_MODULE_2__.TitleActions, { element: element, cssClasses: element.cssClasses, renderActions: this.props.renderActions }));
         var onClick = undefined;
         var onKeyUp = undefined;
         if (element.hasTitleEvents) {
@@ -4745,7 +4752,7 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
     SurveyQuestionDropdownBase.prototype.renderOther = function (item, cssClasses) {
         if (!item || !item.isCommentShowing)
             return null;
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { key: item.normalizedId, className: this.question.getCommentAreaCss(true) },
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { key: item.uniqueId, className: this.question.getCommentAreaCss(true) },
             react__WEBPACK_IMPORTED_MODULE_0__.createElement(_reactquestion_comment__WEBPACK_IMPORTED_MODULE_4__.SurveyQuestionCommentValueItem, { question: this.question, item: item, cssClasses: this.question.cssClasses })));
     };
     SurveyQuestionDropdownBase.prototype.renderEditorButtons = function () {
@@ -4921,7 +4928,7 @@ var SurveyQuestionDropdownSelect = /** @class */ (function (_super) {
         react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { id: this.question.inputId, className: this.question.getControlClass(), disabled: true }, this.question.readOnlyText)) :
             (react__WEBPACK_IMPORTED_MODULE_0__.createElement("select", { id: this.question.inputId, className: this.question.getControlClass(), ref: function (select) { return (_this.setControl(select)); }, autoComplete: this.question.autocomplete, onChange: this.updateValueOnEvent, onInput: this.updateValueOnEvent, onClick: click, onKeyUp: keyup, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage, required: this.question.isRequired },
                 this.question.allowClear ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement("option", { value: "" }, this.question.placeholder)) : null,
-                this.question.visibleChoices.map(function (item, i) { return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_dropdown_item__WEBPACK_IMPORTED_MODULE_4__.SurveyQuestionOptionItem, { key: "item" + i, item: item }); })));
+                this.question.visibleChoices.map(function (item) { return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_dropdown_item__WEBPACK_IMPORTED_MODULE_4__.SurveyQuestionOptionItem, { key: item.uniqueId, item: item }); })));
         return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.selectWrapper },
             selectElement,
             this.createChevronButton()));
@@ -5521,7 +5528,7 @@ var SurveyQuestionImagePicker = /** @class */ (function (_super) {
         var _this = this;
         return this.question.columns.map(function (column, ci) {
             var items = column.map(function (item, ii) {
-                return _this.renderItem("item" + ii, item, cssClasses);
+                return _this.renderItem(item, cssClasses);
             });
             return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { key: "column" + ci + _this.question.getItemsColumnKey(column), className: _this.question.getColumnClass(), role: "presentation" }, items));
         });
@@ -5530,8 +5537,7 @@ var SurveyQuestionImagePicker = /** @class */ (function (_super) {
         var items = [];
         for (var i = 0; i < this.question.visibleChoices.length; i++) {
             var item = this.question.visibleChoices[i];
-            var key = "item" + i;
-            items.push(this.renderItem(key, item, cssClasses));
+            items.push(this.renderItem(item, cssClasses));
         }
         return items;
     };
@@ -5542,8 +5548,8 @@ var SurveyQuestionImagePicker = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionImagePicker.prototype.renderItem = function (key, item, cssClasses) {
-        var renderedItem = react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionImagePickerItem, { key: key, question: this.question, item: item, cssClasses: cssClasses });
+    SurveyQuestionImagePicker.prototype.renderItem = function (item, cssClasses) {
+        var renderedItem = react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionImagePickerItem, { key: item.uniqueId, question: this.question, item: item, cssClasses: cssClasses });
         var survey = this.question.survey;
         var wrappedItem = null;
         if (!!survey) {
@@ -7738,7 +7744,7 @@ var SurveyQuestionCommentValueItem = /** @class */ (function (_super) {
     SurveyQuestionCommentValueItem.prototype.getTextAreaModel = function () {
         return this.props.question.getCommentTextAreaModel(this.props.item);
     };
-    SurveyQuestionCommentValueItem.prototype.getKey = function () { return this.props.item.normalizedId; };
+    SurveyQuestionCommentValueItem.prototype.getKey = function () { return this.props.item.uniqueId; };
     return SurveyQuestionCommentValueItem;
 }(SurveyQuestionCommentItem));
 
@@ -7942,6 +7948,16 @@ var SurveyElementBase = /** @class */ (function (_super) {
                 });
             }
         };
+        _this.onArrayChangedCallback = function (stateElement, options) {
+            if (_this.isRendering)
+                return;
+            _this.changedStatePropNameValue = options.name;
+            _this.setState(function (state) {
+                var newState = {};
+                newState[options.name] = options.newValue;
+                return newState;
+            });
+        };
         return _this;
     }
     SurveyElementBase.renderLocString = function (locStr, style, key) {
@@ -8097,16 +8113,7 @@ var SurveyElementBase = /** @class */ (function (_super) {
             var val = hash[key];
             if (Array.isArray(val)) {
                 var val = val;
-                val["onArrayChanged"] = function (arrayChanges) {
-                    if (_this.isRendering)
-                        return;
-                    _this.changedStatePropNameValue = key;
-                    _this.setState(function (state) {
-                        var newState = {};
-                        newState[key] = val;
-                        return newState;
-                    });
-                };
+                stateElement.addOnArrayChangedCallback(val, _this.onArrayChangedCallback);
             }
         });
         stateElement.setPropertyValueCoreHandler = this.propertyValueChangedHandler;
@@ -8115,6 +8122,7 @@ var SurveyElementBase = /** @class */ (function (_super) {
         return true;
     };
     SurveyElementBase.prototype.unMakeBaseElementReact = function (stateElement) {
+        var _this = this;
         if (!this.canMakeReact(stateElement))
             return;
         if (!this.isCurrentStateElement(stateElement)) {
@@ -8127,7 +8135,7 @@ var SurveyElementBase = /** @class */ (function (_super) {
             var val = hash[key];
             if (Array.isArray(val)) {
                 var val = val;
-                val["onArrayChanged"] = function () { };
+                stateElement.removeOnArrayChangedCallback(val, _this.onArrayChangedCallback);
             }
         });
     };
@@ -8707,21 +8715,19 @@ var SurveyQuestionMatrix = /** @class */ (function (_super) {
         var headers = [];
         for (var i = 0; i < this.question.visibleColumns.length; i++) {
             var column = this.question.visibleColumns[i];
-            var key = "column" + i;
             var columText = this.renderLocString(column.locText);
             var style = {};
             if (!!this.question.columnMinWidth) {
                 style.minWidth = this.question.columnMinWidth;
                 style.width = this.question.columnMinWidth;
             }
-            headers.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement("th", { className: this.question.cssClasses.headerCell, style: style, key: key }, this.wrapCell({ column: column }, columText, "column-header")));
+            headers.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement("th", { className: this.question.cssClasses.headerCell, style: style, key: column.uniqueId }, this.wrapCell({ column: column }, columText, "column-header")));
         }
         var rows = [];
         var visibleRows = this.question.visibleRows;
         for (var i = 0; i < visibleRows.length; i++) {
             var row = visibleRows[i];
-            var key = "row-" + row.name + "-" + i;
-            rows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionMatrixRow, { key: key, question: this.question, cssClasses: cssClasses, row: row, isFirst: i == 0 }));
+            rows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionMatrixRow, { key: row.uniqueId, question: this.question, cssClasses: cssClasses, row: row, isFirst: i == 0 }));
         }
         var header = !this.question.showHeader ? null : (react__WEBPACK_IMPORTED_MODULE_0__.createElement("thead", { role: "presentation" },
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("tr", null,
@@ -8799,7 +8805,7 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
         var _loop_1 = function () {
             var td = null;
             var column = this_1.question.visibleColumns[i];
-            var key = "value" + i;
+            var key = column.uniqueId;
             var itemClass = this_1.question.getItemClass(row, column);
             if (this_1.question.hasCellText) {
                 var getHandler = function (column) { return function () { return _this.cellClick(row, column); }; };
@@ -9627,7 +9633,7 @@ var SurveyQuestionMultipleText = /** @class */ (function (_super) {
         else {
             cellContent = react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyMultipleTextItem, { question: this.question, item: cell.item, creator: this.creator, cssClasses: cssClasses });
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("td", { key: "item" + index, className: cell.className, onFocus: focusIn }, cellContent));
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("td", { key: cell.item.id, className: cell.className, onFocus: focusIn }, cellContent));
     };
     SurveyQuestionMultipleText.prototype.renderRow = function (rowIndex, cells, cssClasses) {
         var key = "item" + rowIndex;
@@ -10135,7 +10141,7 @@ var SurveyQuestionRanking = /** @class */ (function (_super) {
         var index = i;
         var indexText = this.question.getNumberByIndex(index);
         var tabIndex = this.question.getItemTabIndex(item);
-        var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionRankingItem, { key: item.value, text: text, index: index, indexText: indexText, itemTabIndex: tabIndex, handleKeydown: handleKeydown, handlePointerDown: handlePointerDown, handlePointerUp: handlePointerUp, cssClasses: cssClasses, itemClass: itemClass, question: question, unrankedItem: unrankedItem, item: item }));
+        var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionRankingItem, { key: item.uniqueId, text: text, index: index, indexText: indexText, itemTabIndex: tabIndex, handleKeydown: handleKeydown, handlePointerDown: handlePointerDown, handlePointerUp: handlePointerUp, cssClasses: cssClasses, itemClass: itemClass, question: question, unrankedItem: unrankedItem, item: item }));
         var survey = this.question.survey;
         var wrappedItem = null;
         if (!!survey) {
@@ -10496,7 +10502,7 @@ var SurveyQuestionSelectbase = /** @class */ (function (_super) {
     });
     SurveyQuestionSelectbase.prototype.renderItem = function (item, isFirst, cssClasses, index, isChecked) {
         var renderedItem = _element_factory__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.createElement(this.question.itemComponent, {
-            key: item.value,
+            key: item.uniqueId,
             question: this.question,
             cssClasses: cssClasses,
             isDisplayMode: this.isDisplayMode,
@@ -12115,7 +12121,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_0__.checkLibraryVersion)("".concat("2.3.10"), "survey-react-ui");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_0__.checkLibraryVersion)("".concat("2.3.12"), "survey-react-ui");
 
 })();