survey-js-ui 2.2.5 → 2.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-js-ui",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "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",
@@ -31,7 +31,7 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "survey-core": "2.2.5",
+    "survey-core": "2.2.6",
     "@types/react-dom": "*",
     "@types/react": "*"
   }

package/survey-js-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.2.5
+ * surveyjs - Survey JavaScript library v2.2.6
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -23,7 +23,7 @@ return /******/ (() => { // webpackBootstrap
 /***/ (function(module) {
 
 /*!
- * surveyjs - Survey JavaScript library v2.2.5
+ * surveyjs - Survey JavaScript library v2.2.6
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -830,7 +830,7 @@ path.keys().forEach(function (key) {
 /***/ (function(module) {
 
 /*!
- * surveyjs - Survey JavaScript library v2.2.5
+ * surveyjs - Survey JavaScript library v2.2.6
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -6155,9 +6155,11 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
         };
         return react__WEBPACK_IMPORTED_MODULE_0__.createElement("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, role: dropdownListModel.ariaInputRole, "aria-required": dropdownListModel.ariaInputRequired, "aria-invalid": dropdownListModel.ariaInputInvalid, "aria-errormessage": dropdownListModel.ariaInputErrorMessage, "aria-expanded": dropdownListModel.ariaInputExpanded, "aria-label": dropdownListModel.ariaInputLabel, "aria-labelledby": dropdownListModel.ariaInputLabelledby, "aria-describedby": dropdownListModel.ariaInputDescribedby, "aria-controls": dropdownListModel.ariaInputControls, "aria-activedescendant": dropdownListModel.ariaInputActivedescendant, placeholder: dropdownListModel.placeholderRendered, readOnly: dropdownListModel.filterReadOnly ? true : undefined, tabIndex: dropdownListModel.noTabIndex ? undefined : -1, disabled: this.question.isDisabledAttr, inputMode: dropdownListModel.inputMode, onChange: function (e) { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus });
     };
-    SurveyQuestionDropdownBase.prototype.renderOther = function (cssClasses) {
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.getCommentAreaCss(true) },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_reactquestion_comment__WEBPACK_IMPORTED_MODULE_4__.SurveyQuestionOtherValueItem, { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode, isOther: true })));
+    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) },
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_reactquestion_comment__WEBPACK_IMPORTED_MODULE_4__.SurveyQuestionCommentValueItem, { question: this.question, item: item, isDisplayMode: this.isDisplayMode, cssClasses: this.question.cssClasses, otherCss: this.question.getCommentAreaCss(false) })));
     };
     SurveyQuestionDropdownBase.prototype.renderEditorButtons = function () {
         return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_6__.SurveyActionBar, { model: this.dropdownListModel.editorButtons });
@@ -7064,7 +7066,7 @@ var SurveyQuestionImagePickerItem = /** @class */ (function (_super) {
         }
         var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: itemClass },
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("label", { className: cssClasses.label },
-                react__WEBPACK_IMPORTED_MODULE_0__.createElement("input", { className: cssClasses.itemControl, id: this.question.getItemId(item), type: this.question.inputType, name: this.question.questionName, checked: isChecked, value: item.value, disabled: !this.question.getItemEnabled(item), readOnly: this.question.isReadOnlyAttr, onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": item.locText.renderedHtml, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+                react__WEBPACK_IMPORTED_MODULE_0__.createElement("input", { className: cssClasses.itemControl, id: this.question.getItemId(item), type: this.question.inputType, name: this.question.questionName, checked: isChecked, value: item.value, disabled: !this.question.getItemEnabled(item), readOnly: this.question.isReadOnlyAttr, onChange: this.handleOnChange, required: this.question.inputRequiredAttribute, "aria-label": item.locText.renderedHtml, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
                 react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.itemDecorator },
                     react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.imageContainer },
                         !!this.question.cssClasses.checkedItemDecorator ?
@@ -8996,8 +8998,7 @@ var SurveyQuestionCheckbox = /** @class */ (function (_super) {
             this.question.hasColumns
                 ? this.getColumnedBody(cssClasses)
                 : this.getBody(cssClasses),
-            this.getFooter(),
-            this.question.isOtherSelected ? this.renderOther() : null));
+            this.getFooter()));
     };
     SurveyQuestionCheckbox.prototype.getHeader = function () {
         var _this = this;
@@ -9039,7 +9040,6 @@ var SurveyQuestionCheckbox = /** @class */ (function (_super) {
         var renderedItems = [];
         for (var i = 0; i < choices.length; i++) {
             var item = choices[i];
-            var key = "item" + item.value;
             var renderedItem = this.renderItem(item, i == 0, cssClasses, "" + i);
             if (!!renderedItem) {
                 renderedItems.push(renderedItem);
@@ -9054,11 +9054,6 @@ var SurveyQuestionCheckbox = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionCheckbox.prototype.renderOther = function () {
-        var cssClasses = this.question.cssClasses;
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.getCommentAreaCss(true) },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_reactquestion_comment__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionOtherValueItem, { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode })));
-    };
     SurveyQuestionCheckbox.prototype.renderItem = function (item, isFirst, cssClasses, index) {
         var renderedItem = _element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.createElement(this.question.itemComponent, {
             key: item.value,
@@ -9166,7 +9161,9 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
     };
     SurveyQuestionCheckboxItem.prototype.renderElement = function () {
         var isChecked = this.question.isItemSelected(this.item);
-        return this.renderCheckbox(isChecked, null);
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,
+            this.renderCheckbox(isChecked, null),
+            this.renderComment());
     };
     Object.defineProperty(SurveyQuestionCheckboxItem.prototype, "inputStyle", {
         get: function () {
@@ -9175,6 +9172,12 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyQuestionCheckboxItem.prototype.renderComment = function () {
+        if (!this.item.isCommentShowing)
+            return null;
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.getCommentAreaCss(true) },
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_reactquestion_comment__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionCommentValueItem, { question: this.question, item: this.item, isDisplayMode: this.isDisplayMode, cssClasses: this.question.cssClasses, otherCss: this.question.getCommentAreaCss(false) }));
+    };
     SurveyQuestionCheckboxItem.prototype.renderCheckbox = function (isChecked, otherItem) {
         var id = this.question.getItemId(this.item);
         var itemClass = this.question.getItemClass(this.item);
@@ -9228,7 +9231,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   SurveyQuestionComment: () => (/* binding */ SurveyQuestionComment),
 /* harmony export */   SurveyQuestionCommentItem: () => (/* binding */ SurveyQuestionCommentItem),
-/* harmony export */   SurveyQuestionOtherValueItem: () => (/* binding */ SurveyQuestionOtherValueItem)
+/* harmony export */   SurveyQuestionCommentValueItem: () => (/* binding */ SurveyQuestionCommentValueItem)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/preact/compat/dist/compat.module.js");
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "../survey-react-ui/src/reactquestion_element.tsx");
@@ -9299,20 +9302,22 @@ var SurveyQuestionCommentItem = /** @class */ (function (_super) {
             var comment = this.textAreaModel.getTextValue() || "";
             return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", null, comment);
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_text_area__WEBPACK_IMPORTED_MODULE_4__.TextAreaComponent, { viewModel: this.textAreaModel }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_text_area__WEBPACK_IMPORTED_MODULE_4__.TextAreaComponent, { key: this.getKey(), viewModel: this.textAreaModel }));
     };
+    SurveyQuestionCommentItem.prototype.getKey = function () { return undefined; };
     return SurveyQuestionCommentItem;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__.ReactSurveyElement));
 
-var SurveyQuestionOtherValueItem = /** @class */ (function (_super) {
-    __extends(SurveyQuestionOtherValueItem, _super);
-    function SurveyQuestionOtherValueItem() {
+var SurveyQuestionCommentValueItem = /** @class */ (function (_super) {
+    __extends(SurveyQuestionCommentValueItem, _super);
+    function SurveyQuestionCommentValueItem() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    SurveyQuestionOtherValueItem.prototype.getTextAreaModel = function () {
-        return this.props.question.otherTextAreaModel;
+    SurveyQuestionCommentValueItem.prototype.getTextAreaModel = function () {
+        return this.props.question.getCommentTextAreaModel(this.props.item);
     };
-    return SurveyQuestionOtherValueItem;
+    SurveyQuestionCommentValueItem.prototype.getKey = function () { return this.props.item.normalizedId; };
+    return SurveyQuestionCommentValueItem;
 }(SurveyQuestionCommentItem));
 
 _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("comment", function (props) {
@@ -9440,7 +9445,7 @@ var SurveyQuestionDropdown = /** @class */ (function (_super) {
     }
     SurveyQuestionDropdown.prototype.renderElement = function () {
         var cssClasses = this.question.cssClasses;
-        var comment = this.question.isOtherSelected ? this.renderOther(cssClasses) : null;
+        var comment = this.renderOther(this.question.selectedItem, cssClasses);
         var select = this.renderSelect(cssClasses);
         return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.renderCssRoot },
             select,
@@ -9969,7 +9974,7 @@ var SurveyQuestionExpression = /** @class */ (function (_super) {
     SurveyQuestionExpression.prototype.renderElement = function () {
         var _this = this;
         var cssClasses = this.question.cssClasses;
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { id: this.question.inputId, className: cssClasses.root, ref: function (div) { return (_this.setControl(div)); } }, this.question.formatedValue));
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { id: this.question.inputId, className: cssClasses.root, ref: function (div) { return (_this.setControl(div)); }, "aria-live": "polite", "aria-label": this.question.formatedValue }, this.question.formatedValue));
     };
     return SurveyQuestionExpression;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__.SurveyQuestionElementBase));
@@ -10957,7 +10962,7 @@ var SurveyQuestionMatrixDropdownCell = /** @class */ (function (_super) {
     SurveyQuestionMatrixDropdownCell.prototype.renderOtherComment = function () {
         var question = this.cell.question;
         var cssClasses = question.cssClasses || {};
-        return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_reactquestion_comment__WEBPACK_IMPORTED_MODULE_9__.SurveyQuestionOtherValueItem, { question: question, cssClasses: cssClasses, otherCss: cssClasses.other, isDisplayMode: question.isInputReadOnly });
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_reactquestion_comment__WEBPACK_IMPORTED_MODULE_9__.SurveyQuestionCommentValueItem, { question: question, item: question.otherItem, cssClasses: cssClasses, otherCss: cssClasses.other, isDisplayMode: question.isInputReadOnly });
     };
     SurveyQuestionMatrixDropdownCell.prototype.renderCellCheckboxButton = function () {
         var key = this.cell.question.id + "item" + this.cell.choiceIndex;
@@ -11540,7 +11545,6 @@ var SurveyQuestionRadiogroup = /** @class */ (function (_super) {
                 ? this.getColumnedBody(cssClasses)
                 : this.getBody(cssClasses),
             this.getFooter(),
-            this.question.isOtherSelected ? this.renderOther(cssClasses) : null,
             clearButton));
     };
     SurveyQuestionRadiogroup.prototype.getFooter = function () {
@@ -11589,10 +11593,6 @@ var SurveyQuestionRadiogroup = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionRadiogroup.prototype.renderOther = function (cssClasses) {
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.getCommentAreaCss(true) },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_reactquestion_comment__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionOtherValueItem, { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode })));
-    };
     SurveyQuestionRadiogroup.prototype.renderItem = function (item, value, cssClasses, index) {
         var renderedItem = _element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.createElement(this.question.itemComponent, {
             key: item.value,
@@ -11709,6 +11709,17 @@ var SurveyQuestionRadioItem = /** @class */ (function (_super) {
         }
     };
     SurveyQuestionRadioItem.prototype.renderElement = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,
+            this.renderRadioButton(),
+            this.renderComment());
+    };
+    SurveyQuestionRadioItem.prototype.renderComment = function () {
+        if (!this.item.isCommentShowing)
+            return null;
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.getCommentAreaCss(true) },
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_reactquestion_comment__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionCommentValueItem, { question: this.question, item: this.item, isDisplayMode: this.isDisplayMode, cssClasses: this.question.cssClasses, otherCss: this.question.getCommentAreaCss(false) }));
+    };
+    SurveyQuestionRadioItem.prototype.renderRadioButton = function () {
         var itemClass = this.question.getItemClass(this.item);
         var labelClass = this.question.getLabelClass(this.item);
         var controlLabelClass = this.question.getControlLabelClass(this.item);
@@ -12375,7 +12386,7 @@ var SurveyQuestionTagbox = /** @class */ (function (_super) {
     };
     SurveyQuestionTagbox.prototype.renderElement = function () {
         var cssClasses = this.question.cssClasses;
-        var comment = this.question.isOtherSelected ? this.renderOther(cssClasses) : null;
+        var comment = this.renderOther(this.question.otherItem, cssClasses);
         var select = this.renderSelect(cssClasses);
         return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.renderCssRoot },
             select,
@@ -13790,7 +13801,7 @@ var preact = react__WEBPACK_IMPORTED_MODULE_0__;
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_2__.checkLibraryVersion)("".concat("2.2.5"), "survey-js-ui");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_2__.checkLibraryVersion)("".concat("2.2.6"), "survey-js-ui");
 
 })();