survey-react-ui 2.0.8 → 2.0.9

package/fesm/survey-react-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.0.8
+ * surveyjs - Survey JavaScript library v2.0.9
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -525,7 +525,7 @@ class SurveyRow extends SurveyElementBase {
         }
         if (!!el && !this.row.isNeedRender) {
             var rowContainerDiv = el;
-            setTimeout(() => {
+            this.lazyRenderingTimeout = setTimeout(() => {
                 this.row.startLazyRendering(rowContainerDiv);
             }, 10);
         }
@@ -543,6 +543,7 @@ class SurveyRow extends SurveyElementBase {
         return true;
     }
     stopLazyRendering() {
+        clearTimeout(this.lazyRenderingTimeout);
         this.row.stopLazyRendering();
         this.row.isNeedRender = !this.row.isLazyRendering();
     }
@@ -1924,7 +1925,7 @@ class PopupModal extends SurveyElementBase {
 PopupModal.modalDescriptors = [];
 
 /*!
- * surveyjs - Survey JavaScript library v2.0.8
+ * surveyjs - Survey JavaScript library v2.0.9
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1994,7 +1995,7 @@ var iconsV1 = {
 };
 
 /*!
- * surveyjs - Survey JavaScript library v2.0.8
+ * surveyjs - Survey JavaScript library v2.0.9
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -2068,6 +2069,11 @@ class Scroll extends React.Component {
         super(props);
         this.rootRef = React.createRef();
         this.model = new ScrollViewModel();
+        this.model.onInnerHeightChanged = (hasScroll) => {
+            if (!!this.props.onInnerHeightChanged) {
+                this.props.onInnerHeightChanged(hasScroll);
+            }
+        };
     }
     componentDidMount() {
         const container = this.rootRef.current;
@@ -4752,7 +4758,7 @@ class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
     }
     renderRange() {
         return (React.createElement("div", { className: this.question.cssClasses.progress },
-            React.createElement("div", { className: this.question.cssClasses.progressBar, style: { width: this.question.progress }, role: "progressbar" })));
+            React.createElement("div", { className: this.question.cssClasses.progressBar, style: { width: this.question.progress }, role: "progressbar", "aria-label": this.question.progressBarAriaLabel })));
     }
     renderAddRowButton() {
         return ReactElementFactory.Instance.createElement("sv-paneldynamic-add-btn", {
@@ -4843,12 +4849,15 @@ class SurveyProgress extends SurveyNavigationBase {
     get progressText() {
         return this.survey.progressText;
     }
+    get progressBarAriaLabel() {
+        return this.survey.progressBarAriaLabel;
+    }
     render() {
         var progressStyle = {
             width: this.progress + "%",
         };
         return (React.createElement("div", { className: this.survey.getProgressCssClasses(this.props.container) },
-            React.createElement("div", { style: progressStyle, className: this.css.progressBar, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "progress" },
+            React.createElement("div", { style: progressStyle, className: this.css.progressBar, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": this.progressBarAriaLabel },
                 React.createElement("span", { className: SurveyProgressModel.getProgressTextInBarCss(this.css) }, this.progressText)),
             React.createElement("span", { className: SurveyProgressModel.getProgressTextUnderBarCss(this.css) }, this.progressText)));
     }
@@ -4889,7 +4898,7 @@ class SurveyProgressButtons extends SurveyNavigationBase {
         this.setState({ canShowFooter: !this.model.showItemTitles });
     }
     render() {
-        return (React.createElement("div", { className: this.model.getRootCss(this.props.container), style: { "maxWidth": this.model.progressWidth }, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "progress" },
+        return (React.createElement("div", { className: this.model.getRootCss(this.props.container), style: { "maxWidth": this.model.progressWidth }, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": this.model.progressBarAriaLabel },
             this.state.canShowHeader ? React.createElement("div", { className: this.css.progressButtonsHeader },
                 React.createElement("div", { className: this.css.progressButtonsPageTitle, title: this.model.headerText }, this.model.headerText)) : null,
             React.createElement("div", { className: this.css.progressButtonsContainer },
@@ -4971,7 +4980,7 @@ class ListItem extends SurveyElementBase {
         const style = {
             display: isVisible ? null : "none"
         };
-        return attachKey2click(React.createElement("li", { className: className, role: "option", style: style, id: this.item.elementId, "aria-selected": this.model.isItemSelected(this.item), onClick: (event) => {
+        return attachKey2click(React.createElement("li", { className: className, role: this.model.listItemRole, style: style, id: this.item.elementId, "aria-selected": this.model.getA11yItemAriaSelected(this.item), "aria-checked": this.model.getA11yItemAriaChecked(this.item), onClick: (event) => {
                 this.model.onItemClick(this.item);
                 event.stopPropagation();
             }, onPointerDown: (event) => this.model.onPointerDown(event, this.item) },
@@ -5042,7 +5051,7 @@ class List extends SurveyElementBase {
             return null;
         const items = this.renderItems();
         const ulStyle = { display: this.model.isEmpty ? "none" : null };
-        return (React.createElement("ul", { className: this.model.getListClass(), style: ulStyle, role: "listbox", id: this.model.elementId, onMouseDown: (e) => {
+        return (React.createElement("ul", { className: this.model.getListClass(), style: ulStyle, role: this.model.listRole, "aria-label": this.model.a11yInputAriaLabel, id: this.model.elementId, onMouseDown: (e) => {
                 e.preventDefault();
             }, onKeyDown: this.handleKeydown, onMouseMove: this.handleMouseMove }, items));
     }
@@ -5460,15 +5469,13 @@ class SurveyQuestionImage extends SurveyQuestionElementBase {
         }
         var control = null;
         if (this.question.renderedMode === "image") {
-            control = (React.createElement("img", { className: cssClasses, src: this.question.locImageLink.renderedHtml || null, alt: this.question.altText || this.question.title, width: this.question.renderedWidth, height: this.question.renderedHeight, 
-                //alt={item.text || item.value}
-                style: style, onLoad: (event) => { this.question.onLoadHandler(); }, onError: (event) => { this.question.onErrorHandler(); } }));
+            control = (React.createElement("img", { className: cssClasses, src: this.question.locImageLink.renderedHtml || null, alt: this.question.renderedAltText, width: this.question.renderedWidth, height: this.question.renderedHeight, style: style, onLoad: (event) => { this.question.onLoadHandler(); }, onError: (event) => { this.question.onErrorHandler(); } }));
         }
         if (this.question.renderedMode === "video") {
             control = (React.createElement("video", { controls: true, className: cssClasses, src: this.question.locImageLink.renderedHtml, width: this.question.renderedWidth, height: this.question.renderedHeight, style: style, onLoadedMetadata: (event) => { this.question.onLoadHandler(); }, onError: (event) => { this.question.onErrorHandler(); } }));
         }
         if (this.question.renderedMode === "youtube") {
-            control = (React.createElement("iframe", { className: cssClasses, src: this.question.locImageLink.renderedHtml, width: this.question.renderedWidth, height: this.question.renderedHeight, style: style }));
+            control = (React.createElement("iframe", { className: cssClasses, src: this.question.locImageLink.renderedHtml, width: this.question.renderedWidth, height: this.question.renderedHeight, style: style, title: this.question.renderedAltText }));
         }
         var noImage = null;
         if (!this.question.imageLink || this.question.contentNotLoaded) {
@@ -5764,7 +5771,7 @@ class SurveyQuestionMatrixDetailButton extends ReactSurveyElement {
         var isExpanded = this.row.isDetailPanelShowing;
         var ariaExpanded = isExpanded;
         var ariaControls = isExpanded ? this.row.detailPanelId : undefined;
-        return (React.createElement("button", { type: "button", onClick: this.handleOnShowHideClick, className: this.question.getDetailPanelButtonCss(this.row), "aria-expanded": ariaExpanded, "aria-controls": ariaControls },
+        return (React.createElement("button", { type: "button", title: this.props.item.title, onClick: this.handleOnShowHideClick, className: this.question.getDetailPanelButtonCss(this.row), "aria-expanded": ariaExpanded, "aria-controls": ariaControls },
             React.createElement(SvgIcon, { className: this.question.getDetailPanelIconCss(this.row), iconName: this.question.getDetailPanelIconId(this.row), size: "auto" })));
     }
 }
@@ -6078,7 +6085,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"2.0.8"}`, "survey-react-ui");
+checkLibraryVersion(`${"2.0.9"}`, "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, SurveyQuestionTagbox, SurveyQuestionTagboxItem, SurveyQuestionText, SurveyRow, SurveyTimerPanel, SurveyWindow, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click };
 //# sourceMappingURL=survey-react-ui.mjs.map