survey-js-ui 1.11.13 → 1.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-js-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",
@@ -23,7 +23,7 @@
   "typings": "./typings/src/entries/js-ui.d.ts",
   "dependencies": {},
   "peerDependencies": {
-    "survey-core": "1.11.13",
+    "survey-core": "1.12.1",
     "@types/react-dom": "*",
     "@types/react": "*"
   }

package/survey-js-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)
  */
@@ -446,6 +446,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) {
@@ -465,9 +466,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();
         });
@@ -482,6 +488,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;
     };
@@ -549,10 +556,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] : [];
@@ -1337,7 +1348,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(Rn.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(Rn.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;
@@ -3693,7 +3704,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);
             });
         }
     };
@@ -3701,7 +3712,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);
             });
         }
     };
@@ -3712,7 +3723,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 (preact_module_("div", { key: "column" + ci + _this.question.getItemsColumnKey(column), className: _this.question.getColumnClass(), role: "presentation" }, items));
         });
@@ -3728,8 +3739,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);
             }
@@ -3748,9 +3759,9 @@ var reactquestion_checkbox_SurveyQuestionCheckbox = /** @class */ (function (_su
         return (preact_module_("div", { className: this.question.getCommentAreaCss(true) },
             preact_module_(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,
@@ -3776,6 +3787,7 @@ var reactquestion_checkbox_SurveyQuestionCheckboxItem = /** @class */ (function
         _this.handleOnChange = function (event) {
             _this.question.clickItemHandler(_this.item, event.target.checked);
         };
+        _this.rootRef = m();
         return _this;
     }
     SurveyQuestionCheckboxItem.prototype.getStateElement = function () {
@@ -3823,11 +3835,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 ||
@@ -3852,7 +3873,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 ? preact_module_("span", { className: this.cssClasses.controlLabel }, this.renderLocString(this.item.locText, this.textStyle)) : null;
-        return (preact_module_("div", { className: itemClass, role: "presentation" },
+        return (preact_module_("div", { className: itemClass, role: "presentation", ref: this.rootRef },
             preact_module_("label", { className: labelClass },
                 preact_module_("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 ?
@@ -3864,6 +3885,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));
 
@@ -4388,10 +4421,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;
@@ -5606,7 +5639,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);
             });
         }
     };
@@ -5618,7 +5651,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 (preact_module_("div", { key: "column" + ci + _this.question.getItemsColumnKey(column), className: _this.question.getColumnClass(), role: "presentation" }, items));
         });
@@ -5635,7 +5668,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;
@@ -5651,9 +5684,9 @@ var reactquestion_radiogroup_SurveyQuestionRadiogroup = /** @class */ (function
         return (preact_module_("div", { className: this.question.getCommentAreaCss(true) },
             preact_module_(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,
@@ -5679,6 +5712,7 @@ var reactquestion_radiogroup_SurveyQuestionRadioItem = /** @class */ (function (
     reactquestion_radiogroup_extends(SurveyQuestionRadioItem, _super);
     function SurveyQuestionRadioItem(props) {
         var _this = _super.call(this, props) || this;
+        _this.rootRef = m();
         _this.handleOnChange = _this.handleOnChange.bind(_this);
         _this.handleOnMouseDown = _this.handleOnMouseDown.bind(_this);
         return _this;
@@ -5747,12 +5781,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 ? preact_module_("span", { className: controlLabelClass }, this.renderLocString(this.item.locText, this.textStyle)) : null;
-        return (preact_module_("div", { className: itemClass, role: "presentation" },
+        return (preact_module_("div", { className: itemClass, role: "presentation", ref: this.rootRef },
             preact_module_("label", { onMouseDown: this.handleOnMouseDown, className: labelClass },
                 preact_module_("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 ?
@@ -5763,6 +5808,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));
 
@@ -6220,6 +6277,9 @@ var drag_drop_icon_SurveyQuestionMatrixDynamicDragDropIcon = /** @class */ (func
         configurable: true
     });
     SurveyQuestionMatrixDynamicDragDropIcon.prototype.renderElement = function () {
+        return Rn.createElement("div", null, this.renderIcon());
+    };
+    SurveyQuestionMatrixDynamicDragDropIcon.prototype.renderIcon = function () {
         if (this.question.iconDragElement) {
             return (Rn.createElement("svg", { className: this.question.cssClasses.dragElementDecorator },
                 Rn.createElement("use", { xlinkHref: this.question.iconDragElement })));
@@ -6850,7 +6910,7 @@ var paneldynamic_add_btn_SurveyQuestionPanelDynamicAddButton = /** @class */ (fu
         if (!this.question.canAddPanel)
             return null;
         var btnText = this.renderLocString(this.question.locPanelAddText);
-        return (Rn.createElement("button", { type: "button", className: this.question.getAddButtonCss(), onClick: this.handleClick },
+        return (Rn.createElement("button", { type: "button", id: this.question.addButtonId, className: this.question.getAddButtonCss(), onClick: this.handleClick },
             Rn.createElement("span", { className: this.question.cssClasses.buttonAddText }, btnText)));
     };
     return SurveyQuestionPanelDynamicAddButton;
@@ -7422,7 +7482,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 = Rn.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 ? Rn.createElement("div", { className: this.model.cssClasses.itemSeparator }) : null;
@@ -9337,7 +9397,7 @@ var preact = compat_module_namespaceObject;
 
 
 
-Object(external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["checkLibraryVersion"])("" + "1.11.13", "survey-js-ui");
+Object(external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["checkLibraryVersion"])("" + "1.12.1", "survey-js-ui");
 
 
 /***/ }),