survey-react-ui 1.11.13 → 1.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.11.13",
+  "version": "1.12.1",
   "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",
@@ -21,7 +21,7 @@
   },
   "typings": "./typings/src/entries/react-ui.d.ts",
   "peerDependencies": {
-    "survey-core": "1.11.13",
+    "survey-core": "1.12.1",
     "react": "^16.5.0 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.2.0"
   }

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.13
+ * surveyjs - Survey JavaScript library v1.12.1
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -345,6 +345,7 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     function SurveyElementBase(props) {
         var _this = _super.call(this, props) || this;
         _this._allowComponentUpdate = true;
+        _this.prevStateElements = [];
         return _this;
     }
     SurveyElementBase.renderLocString = function (locStr, style, key) {
@@ -364,9 +365,14 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     };
     SurveyElementBase.prototype.componentWillUnmount = function () {
         this.unMakeBaseElementsReact();
+        this.disableStateElementsRerenderEvent(this.getStateElements());
     };
     SurveyElementBase.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
         this.makeBaseElementsReact();
+        var stateElements = this.getStateElements();
+        this.disableStateElementsRerenderEvent(((_a = this.prevStateElements) !== null && _a !== void 0 ? _a : []).filter(function (el) { return !stateElements.includes(el); }));
+        this.prevStateElements = [];
         this.getStateElements().forEach(function (el) {
             el.afterRerender();
         });
@@ -381,6 +387,7 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     SurveyElementBase.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         if (this._allowComponentUpdate) {
             this.unMakeBaseElementsReact();
+            this.prevStateElements = this.getStateElements();
         }
         return this._allowComponentUpdate;
     };
@@ -448,10 +455,14 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     SurveyElementBase.prototype.unMakeBaseElementsReact = function () {
         var els = this.getStateElements();
         for (var i = 0; i < els.length; i++) {
-            els[i].disableOnElementRenderedEvent();
             this.unMakeBaseElementReact(els[i]);
         }
     };
+    SurveyElementBase.prototype.disableStateElementsRerenderEvent = function (els) {
+        els.forEach(function (el) {
+            el.disableOnElementRenderedEvent();
+        });
+    };
     SurveyElementBase.prototype.getStateElements = function () {
         var el = this.getStateElement();
         return !!el ? [el] : [];
@@ -1236,7 +1247,7 @@ var action_bar_item_SurveyActionBarItem = /** @class */ (function (_super) {
         var title = this.item.tooltip || this.item.title;
         var buttonContent = this.renderButtonContent();
         var tabIndex = this.item.disableTabStop ? -1 : undefined;
-        var button = attachKey2click(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("button", { className: className, type: "button", disabled: this.item.disabled, onMouseDown: function () { return _this.item.doMouseDown(); }, onFocus: function (args) { return _this.item.doFocus(args); }, onClick: function (args) { return _this.item.doAction(args); }, title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, role: this.item.ariaRole }, buttonContent), this.item, { processEsc: false });
+        var button = attachKey2click(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("button", { className: className, type: "button", disabled: this.item.disabled, onMouseDown: function (args) { return _this.item.doMouseDown(args); }, onFocus: function (args) { return _this.item.doFocus(args); }, onClick: function (args) { return _this.item.doAction(args); }, title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, role: this.item.ariaRole }, buttonContent), this.item, { processEsc: false });
         return button;
     };
     return SurveyActionBarItem;
@@ -3596,7 +3607,7 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         var _this = this;
         if (this.question.hasHeadItems) {
             return this.question.headItems.map(function (item, ii) {
-                return _this.renderItem("item_h" + ii, item, false, _this.question.cssClasses);
+                return _this.renderItem(item, false, _this.question.cssClasses);
             });
         }
     };
@@ -3604,7 +3615,7 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         var _this = this;
         if (this.question.hasFootItems) {
             return this.question.footItems.map(function (item, ii) {
-                return _this.renderItem("item_f" + ii, item, false, _this.question.cssClasses);
+                return _this.renderItem(item, false, _this.question.cssClasses);
             });
         }
     };
@@ -3615,7 +3626,7 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         var _this = this;
         return this.question.columns.map(function (column, ci) {
             var items = column.map(function (item, ii) {
-                return _this.renderItem("item" + ii, item, ci === 0 && ii === 0, cssClasses, "" + ci + ii);
+                return _this.renderItem(item, ci === 0 && ii === 0, cssClasses, "" + ci + ii);
             });
             return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { key: "column" + ci + _this.question.getItemsColumnKey(column), className: _this.question.getColumnClass(), role: "presentation" }, items));
         });
@@ -3631,8 +3642,8 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         var renderedItems = [];
         for (var i = 0; i < choices.length; i++) {
             var item = choices[i];
-            var key = "item" + i;
-            var renderedItem = this.renderItem(key, item, i == 0, cssClasses, "" + i);
+            var key = "item" + item.value;
+            var renderedItem = this.renderItem(item, i == 0, cssClasses, "" + i);
             if (!!renderedItem) {
                 renderedItems.push(renderedItem);
             }
@@ -3651,9 +3662,9 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: this.question.getCommentAreaCss(true) },
             external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](SurveyQuestionOtherValueItem, { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode })));
     };
-    SurveyQuestionCheckbox.prototype.renderItem = function (key, item, isFirst, cssClasses, index) {
+    SurveyQuestionCheckbox.prototype.renderItem = function (item, isFirst, cssClasses, index) {
         var renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponent, {
-            key: key,
+            key: item.value,
             question: this.question,
             cssClasses: cssClasses,
             isDisplayMode: this.isDisplayMode,
@@ -3679,6 +3690,7 @@ var reactquestion_checkbox_SurveyQuestionCheckboxItem = /** @class */ (function
         _this.handleOnChange = function (event) {
             _this.question.clickItemHandler(_this.item, event.target.checked);
         };
+        _this.rootRef = external_root_React_commonjs2_react_commonjs_react_amd_react_["createRef"]();
         return _this;
     }
     SurveyQuestionCheckboxItem.prototype.getStateElement = function () {
@@ -3726,11 +3738,20 @@ var reactquestion_checkbox_SurveyQuestionCheckboxItem = /** @class */ (function
         enumerable: false,
         configurable: true
     });
+    SurveyQuestionCheckboxItem.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (prevProps.item !== this.props.item && !this.question.isDesignMode) {
+            if (this.props.item) {
+                this.props.item.setRootElement(this.rootRef.current);
+            }
+            if (prevProps.item) {
+                prevProps.item.setRootElement(undefined);
+            }
+        }
+    };
     SurveyQuestionCheckboxItem.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
             return false;
-        if (!this.question)
-            return false;
         return (!this.question.customWidget ||
             !!this.question.customWidgetData.isNeedRender ||
             !!this.question.customWidget.widgetJson.isDefaultRender ||
@@ -3755,7 +3776,7 @@ var reactquestion_checkbox_SurveyQuestionCheckboxItem = /** @class */ (function
         var itemClass = this.question.getItemClass(this.item);
         var labelClass = this.question.getLabelClass(this.item);
         var itemLabel = !this.hideCaption ? external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("span", { className: this.cssClasses.controlLabel }, this.renderLocString(this.item.locText, this.textStyle)) : null;
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: itemClass, role: "presentation" },
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: itemClass, role: "presentation", ref: this.rootRef },
             external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("label", { className: labelClass },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", name: this.question.name + this.item.id, value: this.item.value, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, checked: isChecked, onChange: this.handleOnChange, required: this.question.hasRequiredError() }),
                 this.cssClasses.materialDecorator ?
@@ -3767,6 +3788,18 @@ var reactquestion_checkbox_SurveyQuestionCheckboxItem = /** @class */ (function
                 itemLabel),
             otherItem));
     };
+    SurveyQuestionCheckboxItem.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(this.rootRef.current);
+        }
+    };
+    SurveyQuestionCheckboxItem.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(undefined);
+        }
+    };
     return SurveyQuestionCheckboxItem;
 }(ReactSurveyElement));
 
@@ -4291,10 +4324,10 @@ var tagbox_filter_TagboxFilterString = /** @class */ (function (_super) {
         this.model.inputKeyHandler(e);
     };
     TagboxFilterString.prototype.onBlur = function (e) {
-        this.model.onBlur(e);
+        this.question.onBlur(e);
     };
     TagboxFilterString.prototype.onFocus = function (e) {
-        this.model.onFocus(e);
+        this.question.onFocus(e);
     };
     TagboxFilterString.prototype.getStateElement = function () {
         return this.model;
@@ -5509,7 +5542,7 @@ var reactquestion_radiogroup_SurveyQuestionRadiogroup = /** @class */ (function
         var _this = this;
         if (this.question.hasFootItems) {
             return this.question.footItems.map(function (item, ii) {
-                return _this.renderItem("item_f" + ii, item, false, _this.question.cssClasses);
+                return _this.renderItem(item, false, _this.question.cssClasses);
             });
         }
     };
@@ -5521,7 +5554,7 @@ var reactquestion_radiogroup_SurveyQuestionRadiogroup = /** @class */ (function
         var value = this.getStateValue();
         return this.question.columns.map(function (column, ci) {
             var items = column.map(function (item, ii) {
-                return _this.renderItem("item" + ci + ii, item, value, cssClasses, "" + ci + ii);
+                return _this.renderItem(item, value, cssClasses, "" + ci + ii);
             });
             return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { key: "column" + ci + _this.question.getItemsColumnKey(column), className: _this.question.getColumnClass(), role: "presentation" }, items));
         });
@@ -5538,7 +5571,7 @@ var reactquestion_radiogroup_SurveyQuestionRadiogroup = /** @class */ (function
         var value = this.getStateValue();
         for (var i = 0; i < choices.length; i++) {
             var item = choices[i];
-            var renderedItem = this.renderItem("item" + i, item, value, cssClasses, "" + i);
+            var renderedItem = this.renderItem(item, value, cssClasses, "" + i);
             items.push(renderedItem);
         }
         return items;
@@ -5554,9 +5587,9 @@ var reactquestion_radiogroup_SurveyQuestionRadiogroup = /** @class */ (function
         return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: this.question.getCommentAreaCss(true) },
             external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](SurveyQuestionOtherValueItem, { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode })));
     };
-    SurveyQuestionRadiogroup.prototype.renderItem = function (key, item, value, cssClasses, index) {
+    SurveyQuestionRadiogroup.prototype.renderItem = function (item, value, cssClasses, index) {
         var renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponent, {
-            key: key,
+            key: item.value,
             question: this.question,
             cssClasses: cssClasses,
             isDisplayMode: this.isDisplayMode,
@@ -5582,6 +5615,7 @@ var reactquestion_radiogroup_SurveyQuestionRadioItem = /** @class */ (function (
     reactquestion_radiogroup_extends(SurveyQuestionRadioItem, _super);
     function SurveyQuestionRadioItem(props) {
         var _this = _super.call(this, props) || this;
+        _this.rootRef = external_root_React_commonjs2_react_commonjs_react_amd_react_["createRef"]();
         _this.handleOnChange = _this.handleOnChange.bind(_this);
         _this.handleOnMouseDown = _this.handleOnMouseDown.bind(_this);
         return _this;
@@ -5650,12 +5684,23 @@ var reactquestion_radiogroup_SurveyQuestionRadioItem = /** @class */ (function (
     SurveyQuestionRadioItem.prototype.canRender = function () {
         return !!this.question && !!this.item;
     };
+    SurveyQuestionRadioItem.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (prevProps.item !== this.props.item && !this.question.isDesignMode) {
+            if (this.props.item) {
+                this.props.item.setRootElement(this.rootRef.current);
+            }
+            if (prevProps.item) {
+                prevProps.item.setRootElement(undefined);
+            }
+        }
+    };
     SurveyQuestionRadioItem.prototype.renderElement = function () {
         var itemClass = this.question.getItemClass(this.item);
         var labelClass = this.question.getLabelClass(this.item);
         var controlLabelClass = this.question.getControlLabelClass(this.item);
         var itemLabel = !this.hideCaption ? external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("span", { className: controlLabelClass }, this.renderLocString(this.item.locText, this.textStyle)) : null;
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: itemClass, role: "presentation" },
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: itemClass, role: "presentation", ref: this.rootRef },
             external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: labelClass },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("input", { "aria-errormessage": this.question.ariaErrormessage, className: this.cssClasses.itemControl, id: this.question.getItemId(this.item), type: "radio", name: this.question.questionName, checked: this.isChecked, value: this.item.value, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, onChange: this.handleOnChange }),
                 this.cssClasses.materialDecorator ?
@@ -5666,6 +5711,18 @@ var reactquestion_radiogroup_SurveyQuestionRadioItem = /** @class */ (function (
                     null,
                 itemLabel)));
     };
+    SurveyQuestionRadioItem.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(this.rootRef.current);
+        }
+    };
+    SurveyQuestionRadioItem.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(undefined);
+        }
+    };
     return SurveyQuestionRadioItem;
 }(ReactSurveyElement));
 
@@ -6123,6 +6180,9 @@ var drag_drop_icon_SurveyQuestionMatrixDynamicDragDropIcon = /** @class */ (func
         configurable: true
     });
     SurveyQuestionMatrixDynamicDragDropIcon.prototype.renderElement = function () {
+        return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", null, this.renderIcon());
+    };
+    SurveyQuestionMatrixDynamicDragDropIcon.prototype.renderIcon = function () {
         if (this.question.iconDragElement) {
             return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("svg", { className: this.question.cssClasses.dragElementDecorator },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("use", { xlinkHref: this.question.iconDragElement })));
@@ -6753,7 +6813,7 @@ var paneldynamic_add_btn_SurveyQuestionPanelDynamicAddButton = /** @class */ (fu
         if (!this.question.canAddPanel)
             return null;
         var btnText = this.renderLocString(this.question.locPanelAddText);
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("button", { type: "button", className: this.question.getAddButtonCss(), onClick: this.handleClick },
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("button", { type: "button", id: this.question.addButtonId, className: this.question.getAddButtonCss(), onClick: this.handleClick },
             external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { className: this.question.cssClasses.buttonAddText }, btnText)));
     };
     return SurveyQuestionPanelDynamicAddButton;
@@ -7325,7 +7385,7 @@ var list_item_ListItem = /** @class */ (function (_super) {
             paddingInlineStart: this.model.getItemIndent(this.item)
         };
         var className = this.model.getItemClass(this.item);
-        var itemContent = this.item.component || "sv-list-item-content";
+        var itemContent = this.item.component || this.model.itemComponent;
         var newElement = ReactElementFactory.Instance.createElement(itemContent, { item: this.item, key: this.item.id, model: this.model });
         var contentWrap = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { style: contentWrapStyle, className: this.model.cssClasses.itemBody, title: this.item.locTitle.calculatedText, onMouseOver: function (event) { _this.model.onItemHover(_this.item); }, onMouseLeave: function (event) { _this.model.onItemLeave(_this.item); } }, newElement);
         var separator = this.item.needSeparator ? external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: this.model.cssClasses.itemSeparator }) : null;
@@ -9168,7 +9228,7 @@ ReactElementFactory.Instance.registerElement(external_root_Survey_commonjs2_surv
 
 
 
-Object(external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["checkLibraryVersion"])("" + "1.11.13", "survey-react-ui");
+Object(external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["checkLibraryVersion"])("" + "1.12.1", "survey-react-ui");
 
 
 /***/ }),