survey-react-ui 2.2.5 → 2.3.0

package/fesm/survey-react-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.2.5
+ * surveyjs - Survey JavaScript library v2.3.0
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1202,13 +1202,18 @@ 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 {
+    constructor(props) {
+        super(props);
+    }
     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);
@@ -1518,7 +1523,7 @@ class SurveyQuestion extends SurveyElementBase {
         const commentText = SurveyElementBase.renderLocString(this.question.locCommentText);
         return (React.createElement("div", { className: this.question.getCommentAreaCss() },
             React.createElement("div", null, commentText),
-            React.createElement(SurveyQuestionCommentItem, { question: this.question, cssClasses: cssClasses, otherCss: cssClasses.other, isDisplayMode: this.question.isInputReadOnly })));
+            React.createElement(SurveyQuestionCommentItem, { question: this.question, cssClasses: cssClasses, isDisplayMode: this.question.isInputReadOnly })));
     }
     renderHeader(question) {
         if (question.singleInputHideHeader)
@@ -1560,7 +1565,7 @@ class SurveyElementErrors extends ReactSurveyElement {
             const key = "error" + i;
             errors.push(this.creator.renderError(key, this.element.errors[i], this.cssClasses, this.element));
         }
-        return (React.createElement("div", { role: "alert", "aria-live": "polite", className: this.element.cssError, id: this.id }, errors));
+        return (React.createElement("div", { className: this.element.cssError, id: this.id }, errors));
     }
 }
 class SurveyQuestionAndErrorsWrapped extends ReactSurveyElement {
@@ -1925,7 +1930,7 @@ class PopupModal extends SurveyElementBase {
 PopupModal.modalDescriptors = [];
 
 /*!
- * surveyjs - Survey JavaScript library v2.2.5
+ * surveyjs - Survey JavaScript library v2.3.0
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1995,7 +2000,7 @@ var iconsV1 = {
 };
 
 /*!
- * surveyjs - Survey JavaScript library v2.2.5
+ * surveyjs - Survey JavaScript library v2.3.0
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -2646,8 +2651,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 +2684,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 +2694,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 +2768,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, cssClasses: this.question.cssClasses }));
+    }
     renderCheckbox(isChecked, otherItem) {
         const id = this.question.getItemId(this.item);
         const itemClass = this.question.getItemClass(this.item);
@@ -3237,9 +3243,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, cssClasses: this.question.cssClasses })));
     }
     renderEditorButtons() {
         return React.createElement(SurveyActionBar, { model: this.dropdownListModel.editorButtons });
@@ -3274,7 +3282,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 +3341,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,
@@ -3509,8 +3517,8 @@ class SurveyQuestionMatrixRow extends ReactSurveyElement {
         return tds;
     }
     cellClick(row, column) {
-        row.value = column.value;
-        this.setState({ value: this.row.value });
+        row.cellClick(column);
+        this.setState({ value: row.value });
     }
 }
 class SurveyQuestionMatrixCell extends ReactSurveyElement {
@@ -3523,6 +3531,7 @@ class SurveyQuestionMatrixCell extends ReactSurveyElement {
         if (!!this.props.cellChanged) {
             this.props.cellChanged();
         }
+        this.setState({ value: this.row.isChecked(this.column) });
     }
     handleOnMouseDown(event) {
         this.question.onMouseDown();
@@ -3543,22 +3552,22 @@ class SurveyQuestionMatrixCell extends ReactSurveyElement {
         return !!this.question && !!this.row;
     }
     renderElement() {
-        const isChecked = this.row.value == this.column.value;
+        const isChecked = this.row.isChecked(this.column);
         const inputId = this.question.inputId + "_" + this.row.name + "_" + this.columnIndex;
         const itemClass = this.question.getItemClass(this.row, this.column);
+        const itemSvgIcon = this.question.getItemSvgIcon(this.row, this.column);
         const mobileSpan = this.question.isMobile ?
             (React.createElement("span", { className: this.question.cssClasses.cellResponsiveTitle }, this.renderLocString(this.column.locText)))
             : undefined;
         return (React.createElement("label", { onMouseDown: this.handleOnMouseDown, className: itemClass },
             this.renderInput(inputId, isChecked),
-            React.createElement("span", { className: this.question.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
-                React.createElement("svg", { className: this.cssClasses.itemDecorator },
-                    React.createElement("use", { xlinkHref: this.question.itemSvgIcon })) :
-                null),
+            React.createElement("span", { className: this.question.cssMaterialDecorator }, itemSvgIcon ?
+                React.createElement("svg", { className: this.question.cssItemDecorator },
+                    React.createElement("use", { xlinkHref: itemSvgIcon })) : null),
             mobileSpan));
     }
     renderInput(inputId, isChecked) {
-        return (React.createElement("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: this.row.fullName, value: this.column.value, disabled: this.row.isDisabledAttr, readOnly: this.row.isReadOnlyAttr, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(this.row, this.column), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }));
+        return (React.createElement("input", { id: inputId, type: this.question.checkType, className: this.question.cssItemValue, name: this.row.fullName, value: this.column.value, disabled: this.row.isDisabledAttr, readOnly: this.row.isReadOnlyAttr, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(this.row, this.column), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }));
     }
 }
 ReactElementFactory.Instance.registerElement("survey-matrix-cell", props => {
@@ -3849,7 +3858,6 @@ class SurveyQuestionRadiogroup extends SurveyQuestionElementBase {
                 ? this.getColumnedBody(cssClasses)
                 : this.getBody(cssClasses),
             this.getFooter(),
-            this.question.isOtherSelected ? this.renderOther(cssClasses) : null,
             clearButton));
     }
     getFooter() {
@@ -3888,10 +3896,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 +3980,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, cssClasses: this.question.cssClasses }));
+    }
+    renderRadioButton() {
         var itemClass = this.question.getItemClass(this.item);
         var labelClass = this.question.getLabelClass(this.item);
         var controlLabelClass = this.question.getControlLabelClass(this.item);
@@ -4599,7 +4614,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 });
     }
     renderCellCheckboxButton() {
         var key = this.cell.question.id + "item" + this.cell.choiceIndex;
@@ -5277,7 +5292,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 +5531,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 +6211,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"2.2.5"}`, "survey-react-ui");
+checkLibraryVersion(`${"2.3.0"}`, "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