survey-react-ui 2.0.3 → 2.0.5

package/fesm/survey-react-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.0.3
+ * surveyjs - Survey JavaScript library v2.0.5
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1369,21 +1369,13 @@ class SurveyQuestion extends SurveyElementBase {
         };
         var cssClasses = question.cssClasses;
         var questionRender = this.renderQuestion();
-        var errorsTop = this.question.showErrorOnTop
-            ? this.renderErrors(cssClasses, "top")
-            : null;
-        var errorsBottom = this.question.showErrorOnBottom
-            ? this.renderErrors(cssClasses, "bottom")
-            : null;
         var comment = question && question.hasComment ? this.renderComment(cssClasses) : null;
         var descriptionUnderInput = question.hasDescriptionUnderInput
             ? this.renderDescription()
             : null;
         return (React.createElement("div", { className: question.cssContent || undefined, style: contentStyle, role: "presentation" },
-            errorsTop,
             questionRender,
             comment,
-            errorsBottom,
             descriptionUnderInput));
     }
     renderElement() {
@@ -1401,7 +1393,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,
@@ -1460,9 +1452,6 @@ class SurveyElementErrors extends ReactSurveyElement {
     get creator() {
         return this.props.creator;
     }
-    get location() {
-        return this.props.location;
-    }
     getState(prevState = null) {
         return !prevState ? { error: 0 } : { error: prevState.error + 1 };
     }
@@ -1842,7 +1831,7 @@ class PopupModal extends SurveyElementBase {
 PopupModal.modalDescriptors = [];
 
 /*!
- * surveyjs - Survey JavaScript library v2.0.3
+ * surveyjs - Survey JavaScript library v2.0.5
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1910,7 +1899,7 @@ var iconsV1 = {
 };
 
 /*!
- * surveyjs - Survey JavaScript library v2.0.3
+ * surveyjs - Survey JavaScript library v2.0.5
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -2580,8 +2569,9 @@ class SurveyQuestionCheckbox extends SurveyQuestionElementBase {
         if (this.question.blockedRow) {
             return React.createElement("div", { className: cssClasses.rootRow }, this.getItems(cssClasses, this.question.dataChoices));
         }
-        else
+        else {
             return React.createElement(React.Fragment, null, this.getItems(cssClasses, this.question.bodyItems));
+        }
     }
     getItems(cssClasses, choices) {
         var renderedItems = [];
@@ -3118,7 +3108,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,
@@ -3329,14 +3319,14 @@ class SurveyQuestionMatrix extends SurveyQuestionElementBase {
             var key = "row-" + row.name + "-" + i;
             rows.push(React.createElement(SurveyQuestionMatrixRow, { key: key, question: this.question, cssClasses: cssClasses, row: row, isFirst: i == 0 }));
         }
-        var header = !this.question.showHeader ? null : (React.createElement("thead", null,
+        var header = !this.question.showHeader ? null : (React.createElement("thead", { role: "presentation" },
             React.createElement("tr", null,
                 rowsTH,
                 headers)));
         return (React.createElement("div", { className: cssClasses.tableWrapper, ref: root => (this.setControl(root)) },
-            React.createElement("fieldset", null,
-                React.createElement("legend", { className: "sv-hidden" }, this.question.locTitle.renderedHtml),
-                React.createElement("table", { className: this.question.getTableCss() },
+            React.createElement("fieldset", { role: "radiogroup" },
+                React.createElement("legend", { className: "sv-visuallyhidden" }, this.question.locTitle.renderedHtml),
+                React.createElement("table", { className: this.question.getTableCss(), role: "presentation" },
                     header,
                     React.createElement("tbody", null, rows)))));
     }
@@ -3514,24 +3504,6 @@ class LoadingIndicatorComponent extends React.Component {
     }
 }
 
-class SurveyFileChooseButton extends ReactSurveyElement {
-    constructor(props) {
-        super(props);
-    }
-    get question() {
-        return (this.props.item && this.props.item.data.question) || this.props.data.question;
-    }
-    render() {
-        return attachKey2click(React.createElement("label", { tabIndex: 0, className: this.question.getChooseFileCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonText, onClick: (e) => this.question.chooseFile(e.nativeEvent) },
-            (!!this.question.cssClasses.chooseFileIconId) ? React.createElement(SvgIcon, { title: this.question.chooseButtonText, iconName: this.question.cssClasses.chooseFileIconId, size: "auto" }) : null,
-            React.createElement("span", null, this.question.chooseButtonText)));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-file-choose-btn", (props) => {
-    return React.createElement(SurveyFileChooseButton, props);
-});
-
-// import { ReactElementFactory, SurveyFileChooseButton } from "../entries/react-ui-model";
 class SurveyQuestionFile extends SurveyQuestionElementBase {
     constructor(props) {
         super(props);
@@ -3544,8 +3516,6 @@ class SurveyQuestionFile extends SurveyQuestionElementBase {
         const loadingIndicator = this.question.showLoadingIndicator ? this.renderLoadingIndicator() : null;
         const video = this.question.isPlayingVideo ? this.renderVideo() : null;
         const fileDecorator = this.question.showFileDecorator ? this.renderFileDecorator() : null;
-        const clearButton = this.question.showRemoveButton ? this.renderClearButton(this.question.cssClasses.removeButton) : null;
-        const clearButtonBottom = this.question.showRemoveButtonBottom ? this.renderClearButton(this.question.cssClasses.removeButtonBottom) : null;
         const fileNavigator = this.question.fileNavigatorVisible ? (React.createElement(SurveyActionBar, { model: this.question.fileNavigator })) : null;
         let fileInput;
         if (this.question.isReadOnlyAttr) {
@@ -3566,30 +3536,18 @@ class SurveyQuestionFile extends SurveyQuestionElementBase {
                 fileDecorator,
                 loadingIndicator,
                 video,
-                clearButton,
                 preview,
-                clearButtonBottom,
                 fileNavigator)));
     }
     renderFileDecorator() {
-        const chooseButton = this.question.showChooseButton ? this.renderChooseButton() : null;
         const actionsContainer = this.question.actionsContainerVisible ? React.createElement(SurveyActionBar, { model: this.question.actionsContainer }) : null;
         const noFileChosen = this.question.isEmpty() ? (React.createElement("span", { className: this.question.cssClasses.noFileChosen }, this.question.noFileChosenCaption)) : null;
         return (React.createElement("div", { className: this.question.getFileDecoratorCss() },
             React.createElement("span", { className: this.question.cssClasses.dragAreaPlaceholder }, this.renderLocString(this.question.locRenderedPlaceholder)),
             React.createElement("div", { className: this.question.cssClasses.wrapper },
-                chooseButton,
                 actionsContainer,
                 noFileChosen)));
     }
-    renderChooseButton() {
-        return React.createElement(SurveyFileChooseButton, { data: { question: this.question } });
-    }
-    renderClearButton(className) {
-        return !this.question.isUploading ? (React.createElement("button", { type: "button", onClick: this.question.doClean, className: className },
-            React.createElement("span", null, this.question.clearButtonCaption),
-            (!!this.question.cssClasses.removeButtonIconId) ? React.createElement(SvgIcon, { iconName: this.question.cssClasses.removeButtonIconId, size: "auto", title: this.question.clearButtonCaption }) : null)) : null;
-    }
     renderPreview() {
         return ReactElementFactory.Instance.createElement("sv-file-preview", { question: this.question });
     }
@@ -3609,6 +3567,23 @@ ReactQuestionFactory.Instance.registerQuestion("file", props => {
     return React.createElement(SurveyQuestionFile, props);
 });
 
+class SurveyFileChooseButton extends ReactSurveyElement {
+    constructor(props) {
+        super(props);
+    }
+    get question() {
+        return (this.props.item && this.props.item.data.question) || this.props.data.question;
+    }
+    render() {
+        return attachKey2click(React.createElement("label", { tabIndex: 0, className: this.question.getChooseFileCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonText, onClick: (e) => this.question.chooseFile(e.nativeEvent) },
+            (!!this.question.cssClasses.chooseFileIconId) ? React.createElement(SvgIcon, { title: this.question.chooseButtonText, iconName: this.question.cssClasses.chooseFileIconId, size: "auto" }) : null,
+            React.createElement("span", null, this.question.chooseButtonText)));
+    }
+}
+ReactElementFactory.Instance.registerElement("sv-file-choose-btn", (props) => {
+    return React.createElement(SurveyFileChooseButton, props);
+});
+
 class SurveyFileItem extends SurveyElementBase {
     get question() {
         return this.props.question;
@@ -3667,8 +3642,7 @@ class SurveyFilePreview extends SurveyElementBase {
                 }, title: val.name, download: val.name, style: { width: this.question.imageWidth } }, val.name)));
     }
     renderElement() {
-        const content = this.question.supportFileNavigator ? this.question.renderedPages.map((page, index) => { return (React.createElement(SurveyFilePage, { page: page, question: this.question, key: page.id })); })
-            : this.question.previewValue.map((item, index) => { return (React.createElement(SurveyFileItem, { item: item, question: this.question, key: index })); });
+        const content = this.question.renderedPages.map((page, index) => { return (React.createElement(SurveyFilePage, { page: page, question: this.question, key: page.id })); });
         return React.createElement("div", { className: this.question.cssClasses.fileList || undefined }, content);
     }
     canRender() {
@@ -3796,8 +3770,9 @@ class SurveyQuestionRadiogroup extends SurveyQuestionElementBase {
         if (this.question.blockedRow) {
             return React.createElement("div", { className: cssClasses.rootRow }, this.getItems(cssClasses, this.question.dataChoices));
         }
-        else
+        else {
             return React.createElement(React.Fragment, null, this.getItems(cssClasses, this.question.bodyItems));
+        }
     }
     getItems(cssClasses, choices) {
         var items = [];
@@ -4036,7 +4011,7 @@ class SurveyQuestionBoolean extends SurveyQuestionElementBase {
         const cssClasses = this.question.cssClasses;
         const itemClass = this.question.getItemCss();
         return (React.createElement("div", { className: cssClasses.root, onKeyDown: this.handleOnKeyDown },
-            React.createElement("label", { className: itemClass, onClick: this.handleOnClick },
+            React.createElement("label", { className: itemClass },
                 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.control, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.booleanValue || false, onChange: this.handleOnChange, 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 }),
@@ -4068,7 +4043,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 },
@@ -4379,10 +4354,7 @@ class SurveyQuestionMatrixDropdownBase extends SurveyQuestionElementBase {
         return this.renderTableDiv();
     }
     renderTableDiv() {
-        var divStyle = this.question.showHorizontalScroll
-            ? { overflowX: "scroll" }
-            : {};
-        return (React.createElement("div", { style: divStyle, className: this.question.cssClasses.tableWrapper, ref: (root) => (this.setControl(root)) },
+        return (React.createElement("div", { className: this.question.cssClasses.tableWrapper, ref: (root) => (this.setControl(root)) },
             React.createElement(SurveyQuestionMatrixTable, { question: this.question, creator: this.creator, wrapCell: (cell, element, reason) => this.wrapCell(cell, element, reason) })));
     }
 }
@@ -4471,7 +4443,7 @@ class SurveyQuestionMatrixDropdownCell extends SurveyQuestionAndErrorsCell {
                 row: this.cell.row,
                 column: this.cell.cell.column,
             };
-            this.question.survey.matrixAfterCellRender(this.question, options);
+            this.question.survey.matrixAfterCellRender(options);
             this.question.afterRenderCore(el);
         }
     }
@@ -4616,77 +4588,6 @@ ReactElementFactory.Instance.registerElement("sv-matrixdynamic-add-btn", (props)
     return React.createElement(SurveyQuestionMatrixDynamicAddButton, props);
 });
 
-class SurveyQuestionPanelDynamicAction extends ReactSurveyElement {
-    constructor(props) {
-        super(props);
-    }
-    get data() {
-        return (this.props.item && this.props.item.data) || this.props.data;
-    }
-    get question() {
-        return (this.props.item && this.props.item.data.question) || this.props.data.question;
-    }
-}
-class SurveyQuestionPanelDynamicAddButton extends SurveyQuestionPanelDynamicAction {
-    constructor() {
-        super(...arguments);
-        this.handleClick = (event) => {
-            this.question.addPanelUI();
-        };
-    }
-    renderElement() {
-        if (!this.question.canAddPanel)
-            return null;
-        const btnText = this.renderLocString(this.question.locAddPanelText);
-        return (React.createElement("button", { type: "button", id: this.question.addButtonId, className: this.question.getAddButtonCss(), onClick: this.handleClick },
-            React.createElement("span", { className: this.question.cssClasses.buttonAddText }, btnText)));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-paneldynamic-add-btn", (props) => {
-    return React.createElement(SurveyQuestionPanelDynamicAddButton, props);
-});
-
-class SurveyQuestionPanelDynamicNextButton extends SurveyQuestionPanelDynamicAction {
-    constructor() {
-        super(...arguments);
-        this.handleClick = (event) => {
-            this.question.goToNextPanel();
-        };
-    }
-    renderElement() {
-        return (React.createElement("div", { title: this.question.panelNextText, onClick: this.handleClick, className: this.question.getNextButtonCss() },
-            React.createElement(SvgIcon, { iconName: this.question.cssClasses.progressBtnIcon, size: "auto" })));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-paneldynamic-next-btn", (props) => {
-    return React.createElement(SurveyQuestionPanelDynamicNextButton, props);
-});
-
-class SurveyQuestionPanelDynamicPrevButton extends SurveyQuestionPanelDynamicAction {
-    constructor() {
-        super(...arguments);
-        this.handleClick = (event) => {
-            this.question.goToPrevPanel();
-        };
-    }
-    renderElement() {
-        return (React.createElement("div", { title: this.question.panelPrevText, onClick: this.handleClick, className: this.question.getPrevButtonCss() },
-            React.createElement(SvgIcon, { iconName: this.question.cssClasses.progressBtnIcon, size: "auto" })));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-paneldynamic-prev-btn", (props) => {
-    return React.createElement(SurveyQuestionPanelDynamicPrevButton, props);
-});
-
-class SurveyQuestionPanelDynamicProgressText extends SurveyQuestionPanelDynamicAction {
-    renderElement() {
-        return (React.createElement("div", { className: this.question.cssClasses.progressText }, this.question.progressText));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-paneldynamic-progress-text", (props) => {
-    return React.createElement(SurveyQuestionPanelDynamicProgressText, props);
-});
-
 class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
     constructor(props) {
         super(props);
@@ -4724,14 +4625,8 @@ class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
         this.question.renderedPanels.forEach((panel, index) => {
             panels.push(React.createElement(SurveyQuestionPanelDynamicItem, { key: panel.id, element: panel, question: this.question, index: index, cssClasses: this.question.cssClasses, isDisplayMode: this.isDisplayMode, creator: this.creator }));
         });
-        const btnAdd = this.question.isRenderModeList && this.question["showLegacyNavigation"]
-            ? this.renderAddRowButton()
-            : null;
-        const navTop = this.question.isProgressTopShowing
-            ? this.renderNavigator()
-            : null;
-        const navBottom = this.question.isProgressBottomShowing
-            ? this.renderNavigator()
+        const rangeTop = this.question.isRangeShowing && this.question.isProgressTopShowing
+            ? this.renderRange()
             : null;
         const navV2 = this.renderNavigatorV2();
         const noEntriesPlaceholder = this.renderPlaceholder();
@@ -4739,46 +4634,10 @@ class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
             this.question.hasTabbedMenu ? React.createElement("div", { className: this.question.getTabsContainerCss() },
                 React.createElement(SurveyActionBar, { model: this.question.tabbedMenu })) : null,
             noEntriesPlaceholder,
-            navTop,
+            rangeTop,
             React.createElement("div", { className: this.question.cssClasses.panelsContainer }, panels),
-            navBottom,
-            btnAdd,
             navV2));
     }
-    renderNavigator() {
-        if (!this.question["showLegacyNavigation"]) {
-            if (this.question.isRangeShowing && this.question.isProgressTopShowing) {
-                return this.renderRange();
-            }
-            else {
-                return null;
-            }
-        }
-        const range = this.question.isRangeShowing ? this.renderRange() : null;
-        const btnPrev = this.rendrerPrevButton();
-        const btnNext = this.rendrerNextButton();
-        const btnAdd = this.renderAddRowButton();
-        const progressClass = this.question.isProgressTopShowing
-            ? this.question.cssClasses.progressTop
-            : this.question.cssClasses.progressBottom;
-        return (React.createElement("div", { className: progressClass },
-            React.createElement("div", { style: { clear: "both" } },
-                React.createElement("div", { className: this.question.cssClasses.progressContainer },
-                    btnPrev,
-                    range,
-                    btnNext),
-                btnAdd,
-                this.renderProgressText())));
-    }
-    renderProgressText() {
-        return (React.createElement(SurveyQuestionPanelDynamicProgressText, { data: { question: this.question } }));
-    }
-    rendrerPrevButton() {
-        return (React.createElement(SurveyQuestionPanelDynamicPrevButton, { data: { question: this.question } }));
-    }
-    rendrerNextButton() {
-        return (React.createElement(SurveyQuestionPanelDynamicNextButton, { data: { question: this.question } }));
-    }
     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" })));
@@ -5768,6 +5627,36 @@ ReactElementFactory.Instance.registerElement("sv-matrix-detail-button", props =>
     return React.createElement(SurveyQuestionMatrixDetailButton, props);
 });
 
+class SurveyQuestionPanelDynamicAction extends ReactSurveyElement {
+    constructor(props) {
+        super(props);
+    }
+    get data() {
+        return (this.props.item && this.props.item.data) || this.props.data;
+    }
+    get question() {
+        return (this.props.item && this.props.item.data.question) || this.props.data.question;
+    }
+}
+class SurveyQuestionPanelDynamicAddButton extends SurveyQuestionPanelDynamicAction {
+    constructor() {
+        super(...arguments);
+        this.handleClick = (event) => {
+            this.question.addPanelUI();
+        };
+    }
+    renderElement() {
+        if (!this.question.canAddPanel)
+            return null;
+        const btnText = this.renderLocString(this.question.locAddPanelText);
+        return (React.createElement("button", { type: "button", id: this.question.addButtonId, className: this.question.getAddButtonCss(), onClick: this.handleClick },
+            React.createElement("span", { className: this.question.cssClasses.buttonAddText }, btnText)));
+    }
+}
+ReactElementFactory.Instance.registerElement("sv-paneldynamic-add-btn", (props) => {
+    return React.createElement(SurveyQuestionPanelDynamicAddButton, props);
+});
+
 class SurveyQuestionPanelDynamicRemoveButton extends SurveyQuestionPanelDynamicAction {
     constructor() {
         super(...arguments);
@@ -5787,6 +5676,47 @@ ReactElementFactory.Instance.registerElement("sv-paneldynamic-remove-btn", (prop
     return React.createElement(SurveyQuestionPanelDynamicRemoveButton, props);
 });
 
+class SurveyQuestionPanelDynamicPrevButton extends SurveyQuestionPanelDynamicAction {
+    constructor() {
+        super(...arguments);
+        this.handleClick = (event) => {
+            this.question.goToPrevPanel();
+        };
+    }
+    renderElement() {
+        return (React.createElement("div", { title: this.question.panelPrevText, onClick: this.handleClick, className: this.question.getPrevButtonCss() },
+            React.createElement(SvgIcon, { iconName: this.question.cssClasses.progressBtnIcon, size: "auto" })));
+    }
+}
+ReactElementFactory.Instance.registerElement("sv-paneldynamic-prev-btn", (props) => {
+    return React.createElement(SurveyQuestionPanelDynamicPrevButton, props);
+});
+
+class SurveyQuestionPanelDynamicNextButton extends SurveyQuestionPanelDynamicAction {
+    constructor() {
+        super(...arguments);
+        this.handleClick = (event) => {
+            this.question.goToNextPanel();
+        };
+    }
+    renderElement() {
+        return (React.createElement("div", { title: this.question.panelNextText, onClick: this.handleClick, className: this.question.getNextButtonCss() },
+            React.createElement(SvgIcon, { iconName: this.question.cssClasses.progressBtnIcon, size: "auto" })));
+    }
+}
+ReactElementFactory.Instance.registerElement("sv-paneldynamic-next-btn", (props) => {
+    return React.createElement(SurveyQuestionPanelDynamicNextButton, props);
+});
+
+class SurveyQuestionPanelDynamicProgressText extends SurveyQuestionPanelDynamicAction {
+    renderElement() {
+        return (React.createElement("div", { className: this.question.cssClasses.progressText }, this.question.progressText));
+    }
+}
+ReactElementFactory.Instance.registerElement("sv-paneldynamic-progress-text", (props) => {
+    return React.createElement(SurveyQuestionPanelDynamicProgressText, props);
+});
+
 class SurveyNavigationButton extends ReactSurveyElement {
     get item() {
         return this.props.item;
@@ -6003,7 +5933,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"2.0.3"}`, "survey-react-ui");
+checkLibraryVersion(`${"2.0.5"}`, "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, 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