survey-js-ui 2.2.5 → 2.2.6

package/fesm/survey-js-ui.mjs

@@ -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)
  */
@@ -1255,13 +1255,15 @@ class SurveyQuestionCommentItem extends ReactSurveyElement {
             const comment = this.textAreaModel.getTextValue() || "";
             return _$1("div", null, comment);
         }
-        return (_$1(TextAreaComponent, { viewModel: this.textAreaModel }));
+        return (_$1(TextAreaComponent, { key: this.getKey(), viewModel: this.textAreaModel }));
     }
+    getKey() { return undefined; }
 }
-class SurveyQuestionOtherValueItem extends SurveyQuestionCommentItem {
+class SurveyQuestionCommentValueItem extends SurveyQuestionCommentItem {
     getTextAreaModel() {
-        return this.props.question.otherTextAreaModel;
+        return this.props.question.getCommentTextAreaModel(this.props.item);
     }
+    getKey() { return this.props.item.normalizedId; }
 }
 ReactQuestionFactory.Instance.registerQuestion("comment", (props) => {
     return _$1(SurveyQuestionComment, props);
@@ -1978,7 +1980,7 @@ class PopupModal extends SurveyElementBase {
 PopupModal.modalDescriptors = [];
 
 /*!
- * 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)
  */
@@ -2048,7 +2050,7 @@ var iconsV1 = {
 };
 
 /*!
- * 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)
  */
@@ -2699,8 +2701,7 @@ class SurveyQuestionCheckbox extends SurveyQuestionElementBase {
             this.question.hasColumns
                 ? this.getColumnedBody(cssClasses)
                 : this.getBody(cssClasses),
-            this.getFooter(),
-            this.question.isOtherSelected ? this.renderOther() : null));
+            this.getFooter()));
     }
     getHeader() {
         if (this.question.hasHeadItems) {
@@ -2733,7 +2734,6 @@ class SurveyQuestionCheckbox extends SurveyQuestionElementBase {
         var renderedItems = [];
         for (var i = 0; i < choices.length; i++) {
             var item = choices[i];
-            "item" + item.value;
             var renderedItem = this.renderItem(item, i == 0, cssClasses, "" + i);
             if (!!renderedItem) {
                 renderedItems.push(renderedItem);
@@ -2744,11 +2744,6 @@ class SurveyQuestionCheckbox extends SurveyQuestionElementBase {
     get textStyle() {
         return null;
     }
-    renderOther() {
-        let cssClasses = this.question.cssClasses;
-        return (_$1("div", { className: this.question.getCommentAreaCss(true) },
-            _$1(SurveyQuestionOtherValueItem, { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode })));
-    }
     renderItem(item, isFirst, cssClasses, index) {
         const renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponent, {
             key: item.value,
@@ -2823,12 +2818,20 @@ class SurveyQuestionCheckboxItem extends ReactSurveyElement {
         return !!this.item && !!this.question;
     }
     renderElement() {
-        var isChecked = this.question.isItemSelected(this.item);
-        return this.renderCheckbox(isChecked, null);
+        const isChecked = this.question.isItemSelected(this.item);
+        return _$1(k$2, null,
+            this.renderCheckbox(isChecked, null),
+            this.renderComment());
     }
     get inputStyle() {
         return null; //{ marginRight: "3px" };
     }
+    renderComment() {
+        if (!this.item.isCommentShowing)
+            return null;
+        return _$1("div", { className: this.question.getCommentAreaCss(true) },
+            _$1(SurveyQuestionCommentValueItem, { question: this.question, item: this.item, isDisplayMode: this.isDisplayMode, cssClasses: this.question.cssClasses, otherCss: this.question.getCommentAreaCss(false) }));
+    }
     renderCheckbox(isChecked, otherItem) {
         const id = this.question.getItemId(this.item);
         const itemClass = this.question.getItemClass(this.item);
@@ -3290,9 +3293,11 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
         };
         return _$1("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: (element) => (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: (e) => { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus });
     }
-    renderOther(cssClasses) {
-        return (_$1("div", { className: this.question.getCommentAreaCss(true) },
-            _$1(SurveyQuestionOtherValueItem, { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode, isOther: true })));
+    renderOther(item, cssClasses) {
+        if (!item || !item.isCommentShowing)
+            return null;
+        return (_$1("div", { key: item.normalizedId, className: this.question.getCommentAreaCss(true) },
+            _$1(SurveyQuestionCommentValueItem, { question: this.question, item: item, isDisplayMode: this.isDisplayMode, cssClasses: this.question.cssClasses, otherCss: this.question.getCommentAreaCss(false) })));
     }
     renderEditorButtons() {
         return _$1(SurveyActionBar, { model: this.dropdownListModel.editorButtons });
@@ -3327,7 +3332,7 @@ class SurveyQuestionDropdown extends SurveyQuestionDropdownBase {
     }
     renderElement() {
         const cssClasses = this.question.cssClasses;
-        const comment = this.question.isOtherSelected ? this.renderOther(cssClasses) : null;
+        const comment = this.renderOther(this.question.selectedItem, cssClasses);
         const select = this.renderSelect(cssClasses);
         return (_$1("div", { className: this.question.renderCssRoot },
             select,
@@ -3386,7 +3391,7 @@ class SurveyQuestionTagbox extends SurveyQuestionDropdownBase {
     }
     renderElement() {
         const cssClasses = this.question.cssClasses;
-        const comment = this.question.isOtherSelected ? this.renderOther(cssClasses) : null;
+        const comment = this.renderOther(this.question.otherItem, cssClasses);
         const select = this.renderSelect(cssClasses);
         return (_$1("div", { className: this.question.renderCssRoot },
             select,
@@ -3902,7 +3907,6 @@ class SurveyQuestionRadiogroup extends SurveyQuestionElementBase {
                 ? this.getColumnedBody(cssClasses)
                 : this.getBody(cssClasses),
             this.getFooter(),
-            this.question.isOtherSelected ? this.renderOther(cssClasses) : null,
             clearButton));
     }
     getFooter() {
@@ -3941,10 +3945,6 @@ class SurveyQuestionRadiogroup extends SurveyQuestionElementBase {
     get textStyle() {
         return null; //{ display: "inline", position: "static" };
     }
-    renderOther(cssClasses) {
-        return (_$1("div", { className: this.question.getCommentAreaCss(true) },
-            _$1(SurveyQuestionOtherValueItem, { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode })));
-    }
     renderItem(item, value, cssClasses, index) {
         const renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponent, {
             key: item.value,
@@ -4029,6 +4029,17 @@ class SurveyQuestionRadioItem extends ReactSurveyElement {
         }
     }
     renderElement() {
+        return _$1(k$2, null,
+            this.renderRadioButton(),
+            this.renderComment());
+    }
+    renderComment() {
+        if (!this.item.isCommentShowing)
+            return null;
+        return _$1("div", { className: this.question.getCommentAreaCss(true) },
+            _$1(SurveyQuestionCommentValueItem, { question: this.question, item: this.item, isDisplayMode: this.isDisplayMode, cssClasses: this.question.cssClasses, otherCss: this.question.getCommentAreaCss(false) }));
+    }
+    renderRadioButton() {
         var itemClass = this.question.getItemClass(this.item);
         var labelClass = this.question.getLabelClass(this.item);
         var controlLabelClass = this.question.getControlLabelClass(this.item);
@@ -4652,7 +4663,7 @@ class SurveyQuestionMatrixDropdownCell extends SurveyQuestionAndErrorsCell {
     renderOtherComment() {
         const question = this.cell.question;
         const cssClasses = question.cssClasses || {};
-        return _$1(SurveyQuestionOtherValueItem, { question: question, cssClasses: cssClasses, otherCss: cssClasses.other, isDisplayMode: question.isInputReadOnly });
+        return _$1(SurveyQuestionCommentValueItem, { question: question, item: question.otherItem, cssClasses: cssClasses, otherCss: cssClasses.other, isDisplayMode: question.isInputReadOnly });
     }
     renderCellCheckboxButton() {
         var key = this.cell.question.id + "item" + this.cell.choiceIndex;
@@ -5330,7 +5341,7 @@ class SurveyQuestionExpression extends SurveyQuestionElementBase {
     }
     renderElement() {
         var cssClasses = this.question.cssClasses;
-        return (_$1("div", { id: this.question.inputId, className: cssClasses.root, ref: (div) => (this.setControl(div)) }, this.question.formatedValue));
+        return (_$1("div", { id: this.question.inputId, className: cssClasses.root, ref: (div) => (this.setControl(div)), "aria-live": "polite", "aria-label": this.question.formatedValue }, this.question.formatedValue));
     }
 }
 ReactQuestionFactory.Instance.registerQuestion("expression", (props) => {
@@ -5569,7 +5580,7 @@ class SurveyQuestionImagePickerItem extends ReactSurveyElement {
         }
         const renderedItem = (_$1("div", { className: itemClass },
             _$1("label", { className: cssClasses.label },
-                _$1("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 }),
+                _$1("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 }),
                 _$1("div", { className: this.question.cssClasses.itemDecorator },
                     _$1("div", { className: this.question.cssClasses.imageContainer },
                         !!this.question.cssClasses.checkedItemDecorator ?
@@ -6298,7 +6309,7 @@ SurveyModel.prototype["render"] = function (element = null) {
     }
 };
 const preact = React;
-checkLibraryVersion(`${"2.2.5"}`, "survey-js-ui");
+checkLibraryVersion(`${"2.2.6"}`, "survey-js-ui");
 
 export { CharacterCounterComponent, O as Children, x$2 as Component, ComponentsContainer, k$2 as Fragment, Header, HeaderCell, HeaderMobile, List, ListItemContent, ListItemGroup, LoadingIndicatorComponent, LogoImage, MatrixRow, NotifierComponent, Popup, PopupModal, PopupSurvey, N as PureComponent, QuestionErrorComponent, RatingDropdownItem, RatingItem, RatingItemSmiley, RatingItemStar, ReactElementFactory, ReactQuestionFactory, ReactSurveyElement, ReactSurveyElementsWrapper, Scroll, Skeleton, SliderLabelItem, Cn as StrictMode, Survey, SurveyActionBar, SurveyElementBase, SurveyElementErrors, SurveyFileChooseButton, SurveyFilePreview, SurveyFlowPanel, SurveyHeader, SurveyLocStringEditor, SurveyLocStringViewer, SurveyNavigationBase, SurveyNavigationButton, SurveyPage, SurveyPanel, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestion, SurveyQuestionAndErrorsCell, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionButtonGroup, SurveyQuestionButtonGroupDropdown, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionComment, SurveyQuestionCommentItem, SurveyQuestionComposite, SurveyQuestionCustom, SurveyQuestionDropdown, SurveyQuestionDropdownBase, SurveyQuestionDropdownSelect, SurveyQuestionElementBase, SurveyQuestionEmpty, SurveyQuestionExpression, SurveyQuestionFile, SurveyQuestionHtml, SurveyQuestionImage, SurveyQuestionImagePicker, SurveyQuestionMatrix, SurveyQuestionMatrixCell, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixRow, SurveyQuestionMultipleText, SurveyQuestionOptionItem, SurveyQuestionPanelDynamic, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicProgressText, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionRadioItem, SurveyQuestionRadiogroup, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionSignaturePad, SurveyQuestionSlider, SurveyQuestionTagbox, SurveyQuestionTagboxItem, SurveyQuestionText, SurveyRow, SurveyTimerPanel, SurveyWindow, P as Suspense, B as SuspenseList, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click, _n as cloneElement, K$1 as createContext, _$1 as createElement, dn as createFactory, $ as createPortal, b$1 as createRef, Sn as findDOMNode, En as flushSync, D as forwardRef, tn as hydrate, pn as isFragment, yn as isMemo, mn as isValidElement, z as lazy, M as memo, preact, nn as render, renderPopupSurvey, renderSurvey, R as startTransition, bn as unmountComponentAtNode, gn as unstable_batchedUpdates, q$1 as useCallback, x$1 as useContext, P$1 as useDebugValue, w as useDeferredValue, y as useEffect, g$1 as useId, F$1 as useImperativeHandle, I as useInsertionEffect, _ as useLayoutEffect, T$1 as useMemo, h as useReducer, A$1 as useRef, d as useState, C as useSyncExternalStore, k as useTransition, vn as version };
 //# sourceMappingURL=survey-js-ui.mjs.map