survey-react-ui 2.1.0 → 2.1.1

package/fesm/survey-react-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.1.0
+ * surveyjs - Survey JavaScript library v2.1.1
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1925,7 +1925,7 @@ class PopupModal extends SurveyElementBase {
 PopupModal.modalDescriptors = [];
 
 /*!
- * surveyjs - Survey JavaScript library v2.1.0
+ * surveyjs - Survey JavaScript library v2.1.1
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1995,7 +1995,7 @@ var iconsV1 = {
 };
 
 /*!
- * surveyjs - Survey JavaScript library v2.1.0
+ * surveyjs - Survey JavaScript library v2.1.1
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -3162,6 +3162,9 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
             this.question.onFocus(event);
         };
     }
+    get dropdownListModel() {
+        return this.question["dropdownListModel"];
+    }
     getStateElement() {
         return this.question["dropdownListModel"];
     }
@@ -3173,7 +3176,7 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
     }
     renderReadOnlyElement() {
         if (this.question.locReadOnlyText) {
-            return this.renderLocString(this.question.locReadOnlyText);
+            return (React.createElement("div", { className: this.question.cssClasses.controlValue }, this.renderLocString(this.question.locReadOnlyText)));
         }
         else {
             return null;
@@ -3181,32 +3184,33 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
     }
     renderSelect(cssClasses) {
         let selectElement = null;
-        const dropdownListModel = this.question.dropdownListModel;
+        const dropdownListModel = this.dropdownListModel;
         if (this.question.isReadOnly) {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            selectElement = React.createElement("div", { id: this.question.inputId, role: dropdownListModel === null || dropdownListModel === void 0 ? void 0 : dropdownListModel.ariaQuestionRole, "aria-label": dropdownListModel === null || dropdownListModel === void 0 ? void 0 : dropdownListModel.ariaQuestionLabel, "aria-labelledby": dropdownListModel === null || dropdownListModel === void 0 ? void 0 : dropdownListModel.ariaQuestionLabelledby, "aria-describedby": dropdownListModel === null || dropdownListModel === void 0 ? void 0 : dropdownListModel.ariaQuestionDescribedby, "aria-expanded": "false", "aria-readonly": "true", "aria-disabled": "true", tabIndex: this.question.isDisabledAttr ? undefined : 0, className: this.question.getControlClass(), ref: (div) => (this.setControl(div)) }, this.renderReadOnlyElement());
+            selectElement = React.createElement("div", { id: this.question.inputId, role: dropdownListModel === null || dropdownListModel === void 0 ? void 0 : dropdownListModel.ariaQuestionRole, "aria-label": dropdownListModel === null || dropdownListModel === void 0 ? void 0 : dropdownListModel.ariaQuestionLabel, "aria-labelledby": dropdownListModel === null || dropdownListModel === void 0 ? void 0 : dropdownListModel.ariaQuestionLabelledby, "aria-describedby": dropdownListModel === null || dropdownListModel === void 0 ? void 0 : dropdownListModel.ariaQuestionDescribedby, "aria-expanded": "false", "aria-readonly": "true", "aria-disabled": "true", tabIndex: this.question.isDisabledAttr ? undefined : 0, className: this.question.getControlClass(), ref: (div) => (this.setControl(div)) },
+                this.renderReadOnlyElement(),
+                this.renderEditorButtons());
         }
         else {
             selectElement = React.createElement(React.Fragment, null,
-                this.renderInput(dropdownListModel),
+                this.renderInput(),
                 React.createElement(Popup, { model: dropdownListModel.popupModel }));
         }
-        return (React.createElement("div", { className: cssClasses.selectWrapper, onClick: this.click },
-            selectElement,
-            this.createChevronButton()));
+        return (React.createElement("div", { className: cssClasses.selectWrapper, onClick: this.click }, selectElement));
     }
-    renderValueElement(dropdownListModel) {
+    renderValueElement() {
         if (this.question.showInputFieldComponent) {
-            return ReactElementFactory.Instance.createElement(this.question.inputFieldComponentName, { item: dropdownListModel.getSelectedAction(), question: this.question });
+            return ReactElementFactory.Instance.createElement(this.question.inputFieldComponentName, { item: this.dropdownListModel.getSelectedAction(), question: this.question });
         }
         else if (this.question.showSelectedItemLocText) {
             return this.renderLocString(this.question.selectedItemLocText);
         }
         return null;
     }
-    renderInput(dropdownListModel) {
-        let valueElement = this.renderValueElement(dropdownListModel);
+    renderInput() {
+        const dropdownListModel = this.dropdownListModel;
+        let valueElement = this.renderValueElement();
         const { root } = settings.environment;
         const onInputChange = (e) => {
             if (e.target === root.activeElement) {
@@ -3227,25 +3231,15 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
                         React.createElement("span", null, dropdownListModel.hintStringSuffix))) : null,
                 valueElement,
                 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 })),
-            this.createClearButton()));
-    }
-    createClearButton() {
-        if (!this.question.allowClear || !this.question.cssClasses.cleanButtonIconId)
-            return null;
-        const style = { display: !this.question.showClearButton ? "none" : "" };
-        return (React.createElement("div", { className: this.question.cssClasses.cleanButton, style: style, onClick: this.clear, "aria-hidden": "true" },
-            React.createElement(SvgIcon, { className: this.question.cssClasses.cleanButtonSvg, iconName: this.question.cssClasses.cleanButtonIconId, title: this.question.clearCaption, size: "auto" })));
-    }
-    createChevronButton() {
-        if (!this.question.cssClasses.chevronButtonIconId)
-            return null;
-        return (React.createElement("div", { className: this.question.cssClasses.chevronButton, "aria-hidden": "true", onPointerDown: this.chevronPointerDown },
-            React.createElement(SvgIcon, { className: this.question.cssClasses.chevronButtonSvg, iconName: this.question.cssClasses.chevronButtonIconId, size: "auto" })));
+            this.renderEditorButtons()));
     }
     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 })));
     }
+    renderEditorButtons() {
+        return React.createElement(SurveyActionBar, { model: this.dropdownListModel.editorButtons });
+    }
     componentDidUpdate(prevProps, prevState) {
         super.componentDidUpdate(prevProps, prevState);
         this.updateInputDomElement();
@@ -3321,8 +3315,8 @@ class SurveyQuestionTagbox extends SurveyQuestionDropdownBase {
         const renderedItem = (React.createElement(SurveyQuestionTagboxItem, { key: key, question: this.question, item: item }));
         return renderedItem;
     }
-    renderInput(dropdownListModel) {
-        const dropdownMultiSelectListModel = dropdownListModel;
+    renderInput() {
+        const dropdownListModel = this.dropdownListModel;
         const items = this.question.selectedChoices.map((choice, index) => { return this.renderItem("item" + index, choice); });
         return (React.createElement("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.noTabIndex ? undefined : 0, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -3330,8 +3324,8 @@ class SurveyQuestionTagbox extends SurveyQuestionDropdownBase {
             disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: dropdownListModel.ariaQuestionRole, "aria-required": dropdownListModel.ariaQuestionRequired, "aria-invalid": dropdownListModel.ariaQuestionInvalid, "aria-errormessage": dropdownListModel.ariaQuestionErrorMessage, "aria-label": dropdownListModel.ariaQuestionLabel, "aria-labelledby": dropdownListModel.ariaQuestionLabelledby, "aria-describedby": dropdownListModel.ariaQuestionDescribedby, "aria-expanded": dropdownListModel.ariaQuestionExpanded, "aria-controls": dropdownListModel.ariaQuestionControls, "aria-activedescendant": dropdownListModel.ariaQuestionActivedescendant, ref: (div) => (this.setControl(div)) },
             React.createElement("div", { className: this.question.cssClasses.controlValue },
                 items,
-                React.createElement(TagboxFilterString, { model: dropdownMultiSelectListModel, question: this.question })),
-            this.createClearButton()));
+                React.createElement(TagboxFilterString, { model: dropdownListModel, question: this.question })),
+            this.renderEditorButtons()));
     }
     renderElement() {
         const cssClasses = this.question.cssClasses;
@@ -3341,14 +3335,6 @@ class SurveyQuestionTagbox extends SurveyQuestionDropdownBase {
             select,
             comment));
     }
-    renderReadOnlyElement() {
-        if (this.question.locReadOnlyText) {
-            return this.renderLocString(this.question.locReadOnlyText);
-        }
-        else {
-            return null;
-        }
-    }
 }
 ReactQuestionFactory.Instance.registerQuestion("tagbox", (props) => {
     return React.createElement(SurveyQuestionTagbox, props);
@@ -3376,6 +3362,12 @@ class SurveyQuestionDropdownSelect extends SurveyQuestionDropdown {
             selectElement,
             this.createChevronButton()));
     }
+    createChevronButton() {
+        if (!this.question.cssClasses.chevronButtonIconId)
+            return null;
+        return (React.createElement("div", { className: this.question.cssClasses.chevronButton, "aria-hidden": "true", onPointerDown: this.chevronPointerDown },
+            React.createElement(SvgIcon, { className: this.question.cssClasses.chevronButtonSvg, iconName: this.question.cssClasses.chevronButtonIconId, size: "auto" })));
+    }
 }
 ReactQuestionFactory.Instance.registerQuestion("sv-dropdown-select", (props) => {
     return React.createElement(SurveyQuestionDropdownSelect, props);
@@ -3562,7 +3554,7 @@ class SurveyQuestionMatrixCell extends ReactSurveyElement {
             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.locText.renderedHtml, this.column.locText.renderedHtml), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }));
+        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 }));
     }
 }
 ReactElementFactory.Instance.registerElement("survey-matrix-cell", props => {
@@ -4614,7 +4606,7 @@ class SurveyQuestionMatrixDropdownCell extends SurveyQuestionAndErrorsCell {
         return (React.createElement(SurveyQuestionRadioItem, { key: key, question: this.cell.question, cssClasses: this.cell.question.cssClasses, isDisplayMode: this.cell.question.isInputReadOnly, item: this.cell.item, index: this.cell.choiceIndex.toString(), isChecked: this.cell.question.value === this.cell.item.value, isDisabled: this.cell.question.isReadOnly || !this.cell.item.isEnabled, hideCaption: true, ariaLabel: this.getCellAriaLabel() }));
     }
     getCellAriaLabel() {
-        return this.question.parentQuestion.getCellAriaLabel(this.cell.row.locText.renderedHtml, this.cell.column.locTitle.renderedHtml);
+        return this.question.parentQuestion.getCellAriaLabel(this.cell.row, this.cell.column);
     }
 }
 
@@ -6179,7 +6171,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"2.1.0"}`, "survey-react-ui");
+checkLibraryVersion(`${"2.1.1"}`, "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, 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