survey-react-ui 2.2.4 → 2.2.6

package/fesm/survey-react-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.2.4
+ * 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)
  */
@@ -1202,13 +1202,15 @@ class SurveyQuestionCommentItem extends ReactSurveyElement {
             const comment = this.textAreaModel.getTextValue() || "";
             return React.createElement("div", null, comment);
         }
-        return (React.createElement(TextAreaComponent, { viewModel: this.textAreaModel }));
+        return (React.createElement(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 React.createElement(SurveyQuestionComment, props);
@@ -1925,7 +1927,7 @@ class PopupModal extends SurveyElementBase {
 PopupModal.modalDescriptors = [];
 
 /*!
- * surveyjs - Survey JavaScript library v2.2.4
+ * 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)
  */
@@ -1995,7 +1997,7 @@ var iconsV1 = {
 };
 
 /*!
- * surveyjs - Survey JavaScript library v2.2.4
+ * 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)
  */
@@ -2646,8 +2648,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) {
@@ -2680,7 +2681,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);
@@ -2691,11 +2691,6 @@ class SurveyQuestionCheckbox extends SurveyQuestionElementBase {
     get textStyle() {
         return null;
     }
-    renderOther() {
-        let cssClasses = this.question.cssClasses;
-        return (React.createElement("div", { className: this.question.getCommentAreaCss(true) },
-            React.createElement(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,
@@ -2770,12 +2765,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 React.createElement(React.Fragment, null,
+            this.renderCheckbox(isChecked, null),
+            this.renderComment());
     }
     get inputStyle() {
         return null; //{ marginRight: "3px" };
     }
+    renderComment() {
+        if (!this.item.isCommentShowing)
+            return null;
+        return React.createElement("div", { className: this.question.getCommentAreaCss(true) },
+            React.createElement(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);
@@ -2971,7 +2974,7 @@ class RatingItem extends RatingItemBase {
     render() {
         var itemText = this.renderLocString(this.item.locText);
         return (React.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClassByText(this.item.itemValue, this.item.text) },
-            React.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: () => { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            React.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: () => { }, "aria-label": this.question.ariaLabel }),
             React.createElement("span", { className: this.question.cssClasses.itemText, "data-text": this.item.text }, itemText)));
     }
     componentDidMount() {
@@ -2985,7 +2988,7 @@ ReactElementFactory.Instance.registerElement("sv-rating-item", (props) => {
 class RatingItemStar extends RatingItemBase {
     render() {
         return (React.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClass(this.item.itemValue), onMouseOver: e => this.question.onItemMouseIn(this.item), onMouseOut: e => this.question.onItemMouseOut(this.item), title: this.item.text },
-            React.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: () => { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            React.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: () => { }, "aria-label": this.question.ariaLabel }),
             React.createElement(SvgIcon, { className: "sv-star", size: "auto", iconName: this.question.itemStarIcon }),
             React.createElement(SvgIcon, { className: "sv-star-2", size: "auto", iconName: this.question.itemStarIconAlt })));
     }
@@ -2997,7 +3000,7 @@ ReactElementFactory.Instance.registerElement("sv-rating-item-star", (props) => {
 class RatingItemSmiley extends RatingItemBase {
     render() {
         return (React.createElement("label", { onMouseDown: this.handleOnMouseDown, style: this.question.getItemStyle(this.item.itemValue, this.item.highlight), className: this.question.getItemClass(this.item.itemValue), onMouseOver: e => this.question.onItemMouseIn(this.item), onMouseOut: e => this.question.onItemMouseOut(this.item), title: this.item.text },
-            React.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: () => { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            React.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: () => { }, "aria-label": this.question.ariaLabel }),
             React.createElement(SvgIcon, { size: "auto", iconName: this.question.getItemSmileyIconName(this.item.itemValue) })));
     }
 }
@@ -3237,9 +3240,11 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
         };
         return React.createElement("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 (React.createElement("div", { className: this.question.getCommentAreaCss(true) },
-            React.createElement(SurveyQuestionOtherValueItem, { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode, isOther: true })));
+    renderOther(item, cssClasses) {
+        if (!item || !item.isCommentShowing)
+            return null;
+        return (React.createElement("div", { key: item.normalizedId, className: this.question.getCommentAreaCss(true) },
+            React.createElement(SurveyQuestionCommentValueItem, { question: this.question, item: item, isDisplayMode: this.isDisplayMode, cssClasses: this.question.cssClasses, otherCss: this.question.getCommentAreaCss(false) })));
     }
     renderEditorButtons() {
         return React.createElement(SurveyActionBar, { model: this.dropdownListModel.editorButtons });
@@ -3274,7 +3279,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 (React.createElement("div", { className: this.question.renderCssRoot },
             select,
@@ -3333,7 +3338,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 (React.createElement("div", { className: this.question.renderCssRoot },
             select,
@@ -3849,7 +3854,6 @@ class SurveyQuestionRadiogroup extends SurveyQuestionElementBase {
                 ? this.getColumnedBody(cssClasses)
                 : this.getBody(cssClasses),
             this.getFooter(),
-            this.question.isOtherSelected ? this.renderOther(cssClasses) : null,
             clearButton));
     }
     getFooter() {
@@ -3888,10 +3892,6 @@ class SurveyQuestionRadiogroup extends SurveyQuestionElementBase {
     get textStyle() {
         return null; //{ display: "inline", position: "static" };
     }
-    renderOther(cssClasses) {
-        return (React.createElement("div", { className: this.question.getCommentAreaCss(true) },
-            React.createElement(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,
@@ -3976,6 +3976,17 @@ class SurveyQuestionRadioItem extends ReactSurveyElement {
         }
     }
     renderElement() {
+        return React.createElement(React.Fragment, null,
+            this.renderRadioButton(),
+            this.renderComment());
+    }
+    renderComment() {
+        if (!this.item.isCommentShowing)
+            return null;
+        return React.createElement("div", { className: this.question.getCommentAreaCss(true) },
+            React.createElement(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);
@@ -4599,7 +4610,7 @@ class SurveyQuestionMatrixDropdownCell extends SurveyQuestionAndErrorsCell {
     renderOtherComment() {
         const question = this.cell.question;
         const cssClasses = question.cssClasses || {};
-        return React.createElement(SurveyQuestionOtherValueItem, { question: question, cssClasses: cssClasses, otherCss: cssClasses.other, isDisplayMode: question.isInputReadOnly });
+        return React.createElement(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;
@@ -5161,7 +5172,7 @@ class SurveyQuestionRating extends SurveyQuestionElementBase {
             ? this.renderLocString(this.question.locMaxRateDescription)
             : null;
         return (React.createElement("div", { className: this.question.ratingRootCss, ref: (div) => (this.setControl(div)) },
-            React.createElement("fieldset", { role: "radiogroup" },
+            React.createElement("fieldset", { role: this.question.a11y_input_ariaRole, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage },
                 React.createElement("legend", { role: "presentation", className: "sv-hidden" }),
                 !!this.question.hasMinLabel ? React.createElement("span", { className: cssClasses.minText }, minText) : null,
                 this.question.renderedRateItems.map((item, index) => this.renderItem(item, index)),
@@ -5277,7 +5288,7 @@ class SurveyQuestionExpression extends SurveyQuestionElementBase {
     }
     renderElement() {
         var cssClasses = this.question.cssClasses;
-        return (React.createElement("div", { id: this.question.inputId, className: cssClasses.root, ref: (div) => (this.setControl(div)) }, this.question.formatedValue));
+        return (React.createElement("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) => {
@@ -5516,7 +5527,7 @@ class SurveyQuestionImagePickerItem extends ReactSurveyElement {
         }
         const renderedItem = (React.createElement("div", { className: itemClass },
             React.createElement("label", { className: cssClasses.label },
-                React.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.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.createElement("div", { className: this.question.cssClasses.itemDecorator },
                     React.createElement("div", { className: this.question.cssClasses.imageContainer },
                         !!this.question.cssClasses.checkedItemDecorator ?
@@ -6196,7 +6207,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"2.2.4"}`, "survey-react-ui");
+checkLibraryVersion(`${"2.2.6"}`, "survey-react-ui");
 
 export { CharacterCounterComponent, ComponentsContainer, Header, HeaderCell, HeaderMobile, List, ListItemContent, ListItemGroup, LoadingIndicatorComponent, LogoImage, MatrixRow, NotifierComponent, Popup, PopupModal, PopupSurvey, QuestionErrorComponent, RatingDropdownItem, RatingItem, RatingItemSmiley, RatingItemStar, ReactElementFactory, ReactQuestionFactory, ReactSurveyElement, ReactSurveyElementsWrapper, Scroll, Skeleton, SliderLabelItem, 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, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click };
 //# sourceMappingURL=survey-react-ui.mjs.map