survey-react-ui 2.0.2 → 2.0.4

package/fesm/{survey-react-ui.js → survey-react-ui.mjs}

@@ -1,10 +1,10 @@
 /*!
- * surveyjs - Survey JavaScript library v2.0.2
+ * surveyjs - Survey JavaScript library v2.0.4
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
 
-import { SurveyModel, Helpers, createSvg, createPopupViewModel, CssClassBuilder, ActionDropdownViewModel, RendererFactory, doKey2ClickUp, Question, SvgRegistry, settings, createPopupModalViewModel, doKey2ClickBlur, doKey2ClickDown, addIconsToThemeSet, SurveyProgressModel, ProgressButtonsResponsivityManager, PopupSurveyModel, ButtonGroupItemModel, LocalizableString, checkLibraryVersion } from 'survey-core';
+import { SurveyModel, Helpers, createSvg, createPopupViewModel, CssClassBuilder, ActionDropdownViewModel, RendererFactory, doKey2ClickUp, Question, SvgRegistry, settings, createPopupModalViewModel, ScrollViewModel, doKey2ClickBlur, doKey2ClickDown, addIconsToThemeSet, SurveyProgressModel, ProgressButtonsResponsivityManager, PopupSurveyModel, ButtonGroupItemModel, LocalizableString, checkLibraryVersion } from 'survey-core';
 export { SurveyModel as Model, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings } from 'survey-core';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -1401,7 +1401,7 @@ class SurveyQuestion extends SurveyElementBase {
         let rootStyle = question.getRootStyle();
         let questionContent = this.wrapQuestionContent(this.renderQuestionContent());
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { ref: this.rootRef, id: question.id, className: question.getRootCss(), style: rootStyle, role: question.ariaRole, "aria-required": this.question.ariaRequired, "aria-invalid": this.question.ariaInvalid, "aria-labelledby": question.ariaLabelledBy, "aria-describedby": question.ariaDescribedBy, "aria-expanded": question.ariaExpanded, "data-name": question.name },
+            React.createElement("div", { ref: this.rootRef, id: question.id, className: question.getRootCss(), style: rootStyle, role: question.ariaRole, "aria-required": this.question.ariaRequired, "aria-invalid": this.question.ariaInvalid, "aria-label": this.question.ariaLabel, "aria-labelledby": question.ariaLabelledBy, "aria-describedby": question.ariaDescribedBy, "aria-expanded": question.ariaExpanded, "data-name": question.name },
                 errorsAboveQuestion,
                 headerTop,
                 questionContent,
@@ -1842,7 +1842,7 @@ class PopupModal extends SurveyElementBase {
 PopupModal.modalDescriptors = [];
 
 /*!
- * surveyjs - Survey JavaScript library v2.0.2
+ * surveyjs - Survey JavaScript library v2.0.4
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1910,7 +1910,7 @@ var iconsV1 = {
 };
 
 /*!
- * surveyjs - Survey JavaScript library v2.0.2
+ * surveyjs - Survey JavaScript library v2.0.4
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1977,6 +1977,36 @@ var iconsV2 = {
 	"smiley-rate9-24x24": "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.01 24C6.85767 24 1.15509 20.96 0.0145752 14.16C-0.0354475 13.87 0.0445888 13.57 0.234675 13.35C0.424761 13.13 0.704888 13 0.995019 13H23.005C23.2951 13 23.5752 13.13 23.7653 13.35C23.9554 13.57 24.0354 13.87 23.9854 14.16C22.8549 20.95 17.1423 24 11.99 24H12.01ZM2.25559 15C3.61621 19.82 8.0182 22 12.01 22C16.0018 22 20.4038 19.82 21.7644 15H2.25559ZM8.00819 6V2C8.00819 1.45 7.55799 1 7.00774 1C6.45749 1 6.00729 1.45 6.00729 2V6C6.00729 6.55 6.45749 7 7.00774 7C7.55799 7 8.00819 6.55 8.00819 6ZM18.0127 6V2C18.0127 1.45 17.5625 1 17.0123 1C16.462 1 16.0118 1.45 16.0118 2V6C16.0118 6.55 16.462 7 17.0123 7C17.5625 7 18.0127 6.55 18.0127 6Z\"></path></svg>"
 };
 
+class Scroll extends React.Component {
+    constructor(props) {
+        super(props);
+        this.rootRef = React.createRef();
+        this.model = new ScrollViewModel();
+    }
+    componentDidMount() {
+        const container = this.rootRef.current;
+        if (!container)
+            return;
+        this.model.setRootElement(container);
+    }
+    componentWillUnmount() {
+        this.model.unsubscribeRootElement();
+        this.model.setRootElement(undefined);
+    }
+    render() {
+        return this.props.disabled ?
+            React.createElement(React.Fragment, null, this.props.children) :
+            React.createElement("div", { ref: this.rootRef, className: "sv-scroll__wrapper" },
+                React.createElement("div", { className: "sv-scroll__scroller sv-drag-target-skipped", onScroll: () => this.model.onScrollContainer() },
+                    React.createElement("div", { className: "sv-scroll__container" }, this.props.children)),
+                React.createElement("div", { className: "sv-scroll__scrollbar", onScroll: () => this.model.onScrollScrollbar() },
+                    React.createElement("div", { className: "sv-scroll__scrollbar-sizer" })));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-scroll", (props) => {
+    return React.createElement(Scroll, props);
+});
+
 addIconsToThemeSet("v1", iconsV1);
 addIconsToThemeSet("v2", iconsV2);
 SvgRegistry.registerIcons(iconsV2);
@@ -2067,18 +2097,20 @@ class Survey extends SurveyElementBase {
         const rootCss = this.survey.getRootCss();
         const cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
         return (React.createElement("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses, style: this.survey.themeVariables, lang: this.survey.locale || "en", dir: this.survey.localeDir },
-            this.survey.needRenderIcons ? React.createElement(SvgBundleComponent, null) : null,
-            React.createElement(PopupModal, null),
-            React.createElement("div", { className: this.survey.wrapperFormCss },
-                backgroundImage,
-                React.createElement("form", { onSubmit: onSubmit },
-                    customHeader,
-                    React.createElement("div", { className: this.css.container },
-                        header,
-                        React.createElement(ComponentsContainer, { survey: this.survey, container: "header", needRenderWrapper: false }),
-                        renderResult,
-                        React.createElement(ComponentsContainer, { survey: this.survey, container: "footer", needRenderWrapper: false }))),
-                React.createElement(NotifierComponent, { notifier: this.survey.notifier }))));
+            React.createElement(Scroll, { disabled: this.survey.rootScrollDisabled },
+                this.survey.needRenderIcons ? React.createElement(SvgBundleComponent, null) : null,
+                React.createElement(PopupModal, null),
+                React.createElement("div", { className: this.survey.wrapperFormCss },
+                    backgroundImage,
+                    React.createElement("form", { onSubmit: onSubmit },
+                        React.createElement(Scroll, { disabled: this.survey.formScrollDisabled },
+                            customHeader,
+                            React.createElement("div", { className: this.css.container },
+                                header,
+                                React.createElement(ComponentsContainer, { survey: this.survey, container: "header", needRenderWrapper: false }),
+                                renderResult,
+                                React.createElement(ComponentsContainer, { survey: this.survey, container: "footer", needRenderWrapper: false })))),
+                    React.createElement(NotifierComponent, { notifier: this.survey.notifier })))));
     }
     renderElement() {
         return this.doRender();
@@ -3086,7 +3118,7 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
         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
             // @ts-ignore
-            disabled: this.question.isDisabledAttr, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, onFocus: this.focus, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, "aria-expanded": this.question.ariaExpanded, "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant, ref: (div) => (this.setControl(div)) },
+            disabled: this.question.isDisabledAttr, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, onFocus: this.focus, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-labelledby": this.question.ariaLabelledBy, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, "aria-expanded": this.question.ariaExpanded, "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant, ref: (div) => (this.setControl(div)) },
             dropdownListModel.showHintPrefix ?
                 (React.createElement("div", { className: this.question.cssClasses.hintPrefix },
                     React.createElement("span", null, dropdownListModel.hintStringPrefix))) : null,
@@ -4036,7 +4068,7 @@ class SurveyQuestionBooleanCheckbox extends SurveyQuestionBoolean {
                 React.createElement("label", { className: cssClasses.checkboxLabel },
                     React.createElement("input", { ref: this.checkRef, type: "checkbox", name: this.question.name, value: this.question.booleanValue === null
                             ? ""
-                            : this.question.booleanValue, id: this.question.inputId, className: cssClasses.controlCheckbox, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.booleanValue || false, onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+                            : this.question.booleanValue, id: this.question.inputId, className: cssClasses.controlCheckbox, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.booleanValue || false, onChange: this.handleOnChange, "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("span", { className: cssClasses.checkboxMaterialDecorator },
                         this.question.svgIcon ?
                             React.createElement("svg", { className: cssClasses.checkboxItemDecorator },
@@ -5074,6 +5106,11 @@ ReactElementFactory.Instance.registerElement("sv-list", (props) => {
 });
 
 class SurveyProgressToc extends SurveyNavigationBase {
+    componentDidMount() {
+        super.componentDidMount();
+        const tocModel = this.props.model;
+        tocModel.updateStickyTOCSize(this.survey.rootElement);
+    }
     render() {
         const tocModel = this.props.model;
         let content;
@@ -5966,7 +6003,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"2.0.2"}`, "survey-react-ui");
+checkLibraryVersion(`${"2.0.4"}`, "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, Skeleton, Survey, SurveyActionBar, SurveyElementBase, SurveyElementErrors, SurveyFileChooseButton, SurveyFilePreview, SurveyFlowPanel, SurveyHeader, SurveyLocStringEditor, SurveyLocStringViewer, SurveyNavigationBase, SurveyNavigationButton, SurveyPage, SurveyPanel, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestion, SurveyQuestionAndErrorsCell, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionButtonGroup, 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.js.map
+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, 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