survey-react-ui 2.0.4 → 2.0.6

package/fesm/survey-react-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.0.4
+ * surveyjs - Survey JavaScript library v2.0.6
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1006,7 +1006,7 @@ class TitleContent extends React.Component {
     }
     render() {
         if (this.element.isTitleRenderedAsString)
-            return SurveyElementBase.renderLocString(this.element.locTitle);
+            return SurveyElementBase.renderLocString(this.element.locRenderedTitle);
         var spans = this.renderTitleSpans(this.element.getTitleOwner(), this.cssClasses);
         return React.createElement(React.Fragment, null, spans);
     }
@@ -1028,7 +1028,7 @@ class TitleContent extends React.Component {
             spans.push(this.renderRequireText(element));
             spans.push(getSpaceSpan("req-sp"));
         }
-        spans.push(SurveyElementBase.renderLocString(element.locTitle, null, "q_title"));
+        spans.push(SurveyElementBase.renderLocString(element.locRenderedTitle, null, "q_title"));
         if (element.isRequireTextAfterTitle) {
             spans.push(getSpaceSpan("req-sp"));
             spans.push(this.renderRequireText(element));
@@ -1296,6 +1296,81 @@ class SurveyElementHeader extends SurveyElementBase {
     }
 }
 
+class SurveyQuestionSigleInputSummary extends ReactSurveyElement {
+    constructor(props) {
+        super(props);
+    }
+    get css() {
+        return this.props.css;
+    }
+    get summary() {
+        return this.props.summary;
+    }
+    renderElement() {
+        if (!this.summary)
+            return null;
+        return this.summary.isEmpty() ? this.renderNoItems() : this.renderItems();
+    }
+    renderItems() {
+        return (React.createElement("div", { className: this.css.summary }, this.summary.items.map((item, index) => this.renderItem(item, index))));
+    }
+    renderNoItems() {
+        const q = this.summary.question;
+        const placeholder = ReactElementFactory.Instance.createElement("sv-placeholder-" + q.getTemplate(), { cssClasses: this.css, question: q });
+        return placeholder || React.createElement("div", null, this.renderLocString(this.summary.noEntry));
+    }
+    renderItem(item, index) {
+        const btnEdit = item.btnEdit ?
+            React.createElement("button", { className: this.css.summaryRowActionEdit, onClick: () => item.btnEdit.action(), title: item.btnEdit.title },
+                React.createElement(SvgIcon, { iconName: "icon-editsmall-16x16", iconSize: "auto" })) : null;
+        const btnDelete = item.showRemove && item.btnRemove ?
+            React.createElement("button", { className: this.css.summaryRowActionDelete, onClick: () => item.btnRemove.action(), title: item.btnRemove.title },
+                React.createElement(SvgIcon, { iconName: "icon-delete-16x16", iconSize: "auto" })) : null;
+        return React.createElement("div", { className: this.css.summaryRow, key: index },
+            React.createElement("div", { className: this.css.summaryRowContent }, this.renderLocString(item.locText)),
+            React.createElement("div", { className: this.css.summaryRowActions },
+                btnEdit,
+                btnDelete));
+    }
+}
+ReactElementFactory.Instance.registerElement("sv-singleinput-summary", (props) => {
+    return React.createElement(SurveyQuestionSigleInputSummary, props);
+});
+
+class SurveyBreadcrumbs extends SurveyElementBase {
+    constructor(props) {
+        super(props);
+    }
+    getStateElement() {
+        return this.props.model;
+    }
+    get items() {
+        return this.props.model.actions;
+    }
+    get css() {
+        return this.props.css;
+    }
+    renderElement() {
+        if (!this.items || !this.items.length)
+            return null;
+        const items = this.renderItems();
+        return (React.createElement("div", { className: this.css.breadcrumbsRoot }, items));
+    }
+    renderItems() {
+        const result = [];
+        this.items.concat([]).forEach((item, itemIndex) => {
+            if (itemIndex) {
+                result.push(React.createElement(SvgIcon, { key: item.renderedId + "_separator", className: this.css.breadcrumbsSeparator, iconName: "arrowright-16x16", size: "auto" }));
+            }
+            result.push(React.createElement(SurveyAction, { key: item.renderedId, item: item }));
+        });
+        return result;
+    }
+}
+ReactElementFactory.Instance.registerElement("sv-breadcrumbs", (props) => {
+    return React.createElement(SurveyBreadcrumbs, props);
+});
+
 class SurveyQuestion extends SurveyElementBase {
     static renderQuestionBody(creator, question) {
         // if (!question.isVisible) return null;
@@ -1369,21 +1444,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() {
@@ -1398,16 +1465,31 @@ class SurveyQuestion extends SurveyElementBase {
         const errorsBelowQuestion = this.question.showErrorsBelowQuestion
             ? this.renderErrors(cssClasses, "")
             : null;
-        let rootStyle = question.getRootStyle();
-        let questionContent = this.wrapQuestionContent(this.renderQuestionContent());
+        const rootStyle = question.getRootStyle();
+        const singleBreadcrumbs = question.singleInputHasActions ? this.renderSingleInputBreadcrumbs(question, cssClasses) : undefined;
+        const singleSummary = question.singleInputSummary ? this.renderSingleInputSummary(question, cssClasses) : undefined;
+        const singleInput = singleSummary || (question.singleInputQuestion ? this.renderSingleInputQuestion(question, cssClasses) : undefined);
+        const questionContent = singleInput || 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-label": this.question.ariaLabel, "aria-labelledby": question.ariaLabelledBy, "aria-describedby": question.ariaDescribedBy, "aria-expanded": question.ariaExpanded, "data-name": question.name },
+                singleBreadcrumbs,
                 errorsAboveQuestion,
                 headerTop,
                 questionContent,
                 headerBottom,
                 errorsBelowQuestion)));
     }
+    renderSingleInputQuestion(question, cssClasses) {
+        const singleQuestion = question.singleInputQuestion;
+        const key = singleQuestion.id;
+        return React.createElement(SurveyQuestion, { key: key, element: singleQuestion, creator: this.creator, css: cssClasses });
+    }
+    renderSingleInputBreadcrumbs(question, cssClasses) {
+        return React.createElement(SurveyBreadcrumbs, { model: question.singleInputActions, css: cssClasses });
+    }
+    renderSingleInputSummary(question, cssClasses) {
+        return React.createElement(SurveyQuestionSigleInputSummary, { summary: question.singleInputSummary, creator: this.creator, css: cssClasses });
+    }
     wrapElement(element) {
         const survey = this.question.survey;
         let wrapper = null;
@@ -1437,6 +1519,8 @@ class SurveyQuestion extends SurveyElementBase {
             React.createElement(SurveyQuestionCommentItem, { question: this.question, cssClasses: cssClasses, otherCss: cssClasses.other, isDisplayMode: this.question.isInputReadOnly })));
     }
     renderHeader(question) {
+        if (question.singleInputHideHeader)
+            return null;
         return React.createElement(SurveyElementHeader, { element: question });
     }
     renderErrors(cssClasses, location) {
@@ -1460,9 +1544,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 +1923,7 @@ class PopupModal extends SurveyElementBase {
 PopupModal.modalDescriptors = [];
 
 /*!
- * surveyjs - Survey JavaScript library v2.0.4
+ * surveyjs - Survey JavaScript library v2.0.6
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1872,9 +1953,11 @@ var iconsV1 = {
 	"close-24x24": "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.4101 12L20.7001 4.71C21.0901 4.32 21.0901 3.69 20.7001 3.3C20.3101 2.91 19.6801 2.91 19.2901 3.3L12.0001 10.59L4.71006 3.29C4.32006 2.9 3.68006 2.9 3.29006 3.29C2.90006 3.68 2.90006 4.32 3.29006 4.71L10.5801 12L3.29006 19.29C2.90006 19.68 2.90006 20.31 3.29006 20.7C3.49006 20.9 3.74006 20.99 4.00006 20.99C4.26006 20.99 4.51006 20.89 4.71006 20.7L12.0001 13.41L19.2901 20.7C19.4901 20.9 19.7401 20.99 20.0001 20.99C20.2601 20.99 20.5101 20.89 20.7101 20.7C21.1001 20.31 21.1001 19.68 20.7101 19.29L13.4201 12H13.4101Z\"></path></svg>",
 	"collapse-16x16": "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2 6L3 5L8 10L13 5L14 6L8 12L2 6Z\"></path></svg>",
 	"collapsedetails-16x16": "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13 7H3V9H13V7Z\"></path></svg>",
+	"delete-16x16": "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15 2H14H11V1C11 0.4 10.6 0 10 0H7C6.4 0 6 0.4 6 1V2H3H2V4H3V14C3 15.1 3.9 16 5 16H12C13.1 16 14 15.1 14 14V4H15V2ZM7 1H10V2H7V1ZM12 14H5V4H12V14ZM7 13H6V5H7V13ZM9 13H8V5H9V13ZM11 13H10V5H11V13Z\"></path></svg>",
 	"delete-24x24": "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M22 4H20H16V2C16 0.9 15.1 0 14 0H10C8.9 0 8 0.9 8 2V4H4H2V6H4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V6H22V4ZM10 2H14V4H10V2ZM18 20H6V6H8H16H18V20ZM14 8H16V18H14V8ZM11 8H13V18H11V8ZM8 8H10V18H8V8Z\"></path></svg>",
 	"drag-24x24": "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13 6C13 4.9 13.9 4 15 4C16.1 4 17 4.9 17 6C17 7.1 16.1 8 15 8C13.9 8 13 7.1 13 6ZM9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM9 10C7.9 10 7 10.9 7 12C7 13.1 7.9 14 9 14C10.1 14 11 13.1 11 12C11 10.9 10.1 10 9 10ZM15 16C13.9 16 13 16.9 13 18C13 19.1 13.9 20 15 20C16.1 20 17 19.1 17 18C17 16.9 16.1 16 15 16ZM9 16C7.9 16 7 16.9 7 18C7 19.1 7.9 20 9 20C10.1 20 11 19.1 11 18C11 16.9 10.1 16 9 16Z\"></path></svg>",
 	"draghorizontal-24x16": "<svg viewBox=\"0 0 24 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M18 9C19.1 9 20 9.9 20 11C20 12.1 19.1 13 18 13C16.9 13 16 12.1 16 11C16 9.9 16.9 9 18 9ZM20 5C20 3.9 19.1 3 18 3C16.9 3 16 3.9 16 5C16 6.1 16.9 7 18 7C19.1 7 20 6.1 20 5ZM14 11C14 9.9 13.1 9 12 9C10.9 9 10 9.9 10 11C10 12.1 10.9 13 12 13C13.1 13 14 12.1 14 11ZM14 5C14 3.9 13.1 3 12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5ZM8 11C8 9.9 7.1 9 6 9C4.9 9 4 9.9 4 11C4 12.1 4.9 13 6 13C7.1 13 8 12.1 8 11ZM8 5C8 3.9 7.1 3 6 3C4.9 3 4 3.9 4 5C4 6.1 4.9 7 6 7C7.1 7 8 6.1 8 5Z\"></path></svg>",
+	"editsmall-16x16": "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.59 4.5884L11.42 2.4184C11.03 2.0284 10.52 1.8284 10.01 1.8284C9.5 1.8284 8.99 2.0284 8.6 2.4184L3.76 7.2384C2.63 8.3684 2 9.8884 2 11.4784V12.9884C2 13.5384 2.45 13.9884 3 13.9884H4.51C6.1 13.9884 7.63 13.3584 8.75 12.2284L13.58 7.3984C14.36 6.6184 14.36 5.3484 13.58 4.5684L13.59 4.5884ZM7.35 10.8284C6.59 11.5884 5.59 11.9984 4.52 11.9984H4.01V11.4884C4.01 10.4184 4.43 9.4184 5.18 8.6584L7.72 6.1184L9.89 8.2884L7.35 10.8284ZM11.3 6.8784L9.13 4.7084L10.01 3.8284L12.18 5.9984L11.3 6.8784Z\"></path></svg>",
 	"expand-16x16": "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 14L5 13L10 8L5 3L6 2L12 8L6 14Z\"></path></svg>",
 	"expanddetails-16x16": "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13 7H9V3H7V7H3V9H7V13H9V9H13V7Z\"></path></svg>",
 	"file-72x72": "<svg viewBox=\"0 0 72 72\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M62.83 12.83L53.17 3.17C52.7982 2.79866 52.357 2.50421 51.8714 2.30346C51.3858 2.1027 50.8654 1.99959 50.34 2H14C12.4087 2 10.8826 2.63214 9.75735 3.75736C8.63214 4.88258 8 6.4087 8 8V64C8 65.5913 8.63214 67.1174 9.75735 68.2426C10.8826 69.3679 12.4087 70 14 70H58C59.5913 70 61.1174 69.3679 62.2426 68.2426C63.3679 67.1174 64 65.5913 64 64V15.66C64.0004 15.1346 63.8973 14.6142 63.6965 14.1286C63.4958 13.643 63.2013 13.2018 62.83 12.83ZM52 4.83L61.17 14H56C54.9391 14 53.9217 13.5786 53.1716 12.8284C52.4214 12.0783 52 11.0609 52 10V4.83ZM62 64C62 65.0609 61.5786 66.0783 60.8284 66.8284C60.0783 67.5786 59.0609 68 58 68H14C12.9391 68 11.9217 67.5786 11.1716 66.8284C10.4214 66.0783 10 65.0609 10 64V8C10 6.93914 10.4214 5.92172 11.1716 5.17157C11.9217 4.42143 12.9391 4 14 4H50V10C50 11.5913 50.6321 13.1174 51.7574 14.2426C52.8826 15.3679 54.4087 16 56 16H62V64ZM22 26H50V28H22V26ZM22 32H50V34H22V32ZM22 38H50V40H22V38ZM22 44H50V46H22V44Z\"></path></svg>",
@@ -1910,7 +1993,7 @@ var iconsV1 = {
 };
 
 /*!
- * surveyjs - Survey JavaScript library v2.0.4
+ * surveyjs - Survey JavaScript library v2.0.6
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1940,9 +2023,11 @@ var iconsV2 = {
 	"close-24x24": "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M19.5275 18.4675C19.8175 18.7575 19.8175 19.2375 19.5275 19.5275C19.3775 19.6775 19.1875 19.7475 18.9975 19.7475C18.8075 19.7475 18.6175 19.6775 18.4675 19.5275L11.9975 13.0575L5.5275 19.5275C5.3775 19.6775 5.1875 19.7475 4.9975 19.7475C4.8075 19.7475 4.6175 19.6775 4.4675 19.5275C4.1775 19.2375 4.1775 18.7575 4.4675 18.4675L10.9375 11.9975L4.4675 5.5275C4.1775 5.2375 4.1775 4.7575 4.4675 4.4675C4.7575 4.1775 5.2375 4.1775 5.5275 4.4675L11.9975 10.9375L18.4675 4.4675C18.7575 4.1775 19.2375 4.1775 19.5275 4.4675C19.8175 4.7575 19.8175 5.2375 19.5275 5.5275L13.0575 11.9975L19.5275 18.4675Z\"></path></svg>",
 	"collapse-16x16": "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.75 8C11.75 8.41 11.41 8.75 11 8.75H5C4.59 8.75 4.25 8.41 4.25 8C4.25 7.59 4.59 7.25 5 7.25H11C11.41 7.25 11.75 7.59 11.75 8Z\"></path></svg>",
 	"collapsedetails-16x16": "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.75 8C11.75 8.41 11.41 8.75 11 8.75H5C4.59 8.75 4.25 8.41 4.25 8C4.25 7.59 4.59 7.25 5 7.25H11C11.41 7.25 11.75 7.59 11.75 8Z\"></path></svg>",
+	"delete-16x16": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M13 3.25H10.75V3C10.75 2.04 9.96 1.25 9 1.25H7C6.04 1.25 5.25 2.04 5.25 3V3.25H3C2.59 3.25 2.25 3.59 2.25 4C2.25 4.41 2.59 4.75 3 4.75H3.25V13C3.25 13.96 4.04 14.75 5 14.75H11C11.96 14.75 12.75 13.96 12.75 13V4.75H13C13.41 4.75 13.75 4.41 13.75 4C13.75 3.59 13.41 3.25 13 3.25ZM6.75 3C6.75 2.86 6.86 2.75 7 2.75H9C9.14 2.75 9.25 2.86 9.25 3V3.25H6.75V3ZM11.25 13C11.25 13.14 11.14 13.25 11 13.25H5C4.86 13.25 4.75 13.14 4.75 13V4.75H11.25V13ZM9.25 6.25C9.66 6.25 10 6.59 10 7V11C10 11.41 9.66 11.75 9.25 11.75C8.84 11.75 8.5 11.41 8.5 11V7C8.5 6.59 8.84 6.25 9.25 6.25ZM7.5 7V11C7.5 11.41 7.16 11.75 6.75 11.75C6.34 11.75 6 11.41 6 11V7C6 6.59 6.34 6.25 6.75 6.25C7.16 6.25 7.5 6.59 7.5 7Z\"></path></svg>",
 	"delete-24x24": "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.75 9V17C12.75 17.41 12.41 17.75 12 17.75C11.59 17.75 11.25 17.41 11.25 17V9C11.25 8.59 11.59 8.25 12 8.25C12.41 8.25 12.75 8.59 12.75 9ZM14.25 9V17C14.25 17.41 14.59 17.75 15 17.75C15.41 17.75 15.75 17.41 15.75 17V9C15.75 8.59 15.41 8.25 15 8.25C14.59 8.25 14.25 8.59 14.25 9ZM9 8.25C8.59 8.25 8.25 8.59 8.25 9V17C8.25 17.41 8.59 17.75 9 17.75C9.41 17.75 9.75 17.41 9.75 17V9C9.75 8.59 9.41 8.25 9 8.25ZM20.75 6C20.75 6.41 20.41 6.75 20 6.75H18.75V18C18.75 19.52 17.52 20.75 16 20.75H8C6.48 20.75 5.25 19.52 5.25 18V6.75H4C3.59 6.75 3.25 6.41 3.25 6C3.25 5.59 3.59 5.25 4 5.25H8.25V4C8.25 3.04 9.04 2.25 10 2.25H14C14.96 2.25 15.75 3.04 15.75 4V5.25H20C20.41 5.25 20.75 5.59 20.75 6ZM9.75 5.25H14.25V4C14.25 3.86 14.14 3.75 14 3.75H10C9.86 3.75 9.75 3.86 9.75 4V5.25ZM17.25 6.75H6.75V18C6.75 18.69 7.31 19.25 8 19.25H16C16.69 19.25 17.25 18.69 17.25 18V6.75Z\"></path></svg>",
 	"drag-24x24": "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.5 8.75C15.19 8.75 15.75 8.19 15.75 7.5C15.75 6.81 15.19 6.25 14.5 6.25C13.81 6.25 13.25 6.81 13.25 7.5C13.25 8.19 13.81 8.75 14.5 8.75ZM14.5 7.25C14.64 7.25 14.75 7.36 14.75 7.5C14.75 7.78 14.25 7.78 14.25 7.5C14.25 7.36 14.36 7.25 14.5 7.25ZM9.5 6.25C8.81 6.25 8.25 6.81 8.25 7.5C8.25 8.19 8.81 8.75 9.5 8.75C10.19 8.75 10.75 8.19 10.75 7.5C10.75 6.81 10.19 6.25 9.5 6.25ZM9.25 7.5C9.25 7.36 9.36 7.25 9.5 7.25C9.64 7.25 9.75 7.36 9.75 7.5C9.75 7.78 9.25 7.78 9.25 7.5ZM14.5 11.25C13.81 11.25 13.25 11.81 13.25 12.5C13.25 13.19 13.81 13.75 14.5 13.75C15.19 13.75 15.75 13.19 15.75 12.5C15.75 11.81 15.19 11.25 14.5 11.25ZM14.25 12.5C14.25 12.36 14.36 12.25 14.5 12.25C14.64 12.25 14.75 12.36 14.75 12.5C14.75 12.78 14.25 12.78 14.25 12.5ZM9.5 11.25C8.81 11.25 8.25 11.81 8.25 12.5C8.25 13.19 8.81 13.75 9.5 13.75C10.19 13.75 10.75 13.19 10.75 12.5C10.75 11.81 10.19 11.25 9.5 11.25ZM9.25 12.5C9.25 12.36 9.36 12.25 9.5 12.25C9.64 12.25 9.75 12.36 9.75 12.5C9.75 12.78 9.25 12.78 9.25 12.5ZM14.5 16.25C13.81 16.25 13.25 16.81 13.25 17.5C13.25 18.19 13.81 18.75 14.5 18.75C15.19 18.75 15.75 18.19 15.75 17.5C15.75 16.81 15.19 16.25 14.5 16.25ZM14.25 17.5C14.25 17.36 14.36 17.25 14.5 17.25C14.64 17.25 14.75 17.36 14.75 17.5C14.75 17.78 14.25 17.78 14.25 17.5ZM9.5 16.25C8.81 16.25 8.25 16.81 8.25 17.5C8.25 18.19 8.81 18.75 9.5 18.75C10.19 18.75 10.75 18.19 10.75 17.5C10.75 16.81 10.19 16.25 9.5 16.25ZM9.25 17.5C9.25 17.36 9.36 17.25 9.5 17.25C9.64 17.25 9.75 17.36 9.75 17.5C9.75 17.78 9.25 17.78 9.25 17.5Z\"></path></svg>",
 	"draghorizontal-24x16": "<svg viewBox=\"0 0 24 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17.5 9.25C16.81 9.25 16.25 9.81 16.25 10.5C16.25 11.19 16.81 11.75 17.5 11.75C18.19 11.75 18.75 11.19 18.75 10.5C18.75 9.81 18.19 9.25 17.5 9.25ZM17.25 10.5C17.25 10.36 17.36 10.25 17.5 10.25C17.64 10.25 17.75 10.36 17.75 10.5C17.75 10.78 17.25 10.78 17.25 10.5ZM17.5 6.75C18.19 6.75 18.75 6.19 18.75 5.5C18.75 4.81 18.19 4.25 17.5 4.25C16.81 4.25 16.25 4.81 16.25 5.5C16.25 6.19 16.81 6.75 17.5 6.75ZM17.5 5.25C17.64 5.25 17.75 5.36 17.75 5.5C17.75 5.78 17.25 5.78 17.25 5.5C17.25 5.36 17.36 5.25 17.5 5.25ZM12.5 9.25C11.81 9.25 11.25 9.81 11.25 10.5C11.25 11.19 11.81 11.75 12.5 11.75C13.19 11.75 13.75 11.19 13.75 10.5C13.75 9.81 13.19 9.25 12.5 9.25ZM12.25 10.5C12.25 10.36 12.36 10.25 12.5 10.25C12.64 10.25 12.75 10.36 12.75 10.5C12.75 10.78 12.25 10.78 12.25 10.5ZM12.5 4.25C11.81 4.25 11.25 4.81 11.25 5.5C11.25 6.19 11.81 6.75 12.5 6.75C13.19 6.75 13.75 6.19 13.75 5.5C13.75 4.81 13.19 4.25 12.5 4.25ZM12.25 5.5C12.25 5.36 12.36 5.25 12.5 5.25C12.64 5.25 12.75 5.36 12.75 5.5C12.75 5.78 12.25 5.78 12.25 5.5ZM7.5 9.25C6.81 9.25 6.25 9.81 6.25 10.5C6.25 11.19 6.81 11.75 7.5 11.75C8.19 11.75 8.75 11.19 8.75 10.5C8.75 9.81 8.19 9.25 7.5 9.25ZM7.25 10.5C7.25 10.36 7.36 10.25 7.5 10.25C7.64 10.25 7.75 10.36 7.75 10.5C7.75 10.78 7.25 10.78 7.25 10.5ZM7.5 4.25C6.81 4.25 6.25 4.81 6.25 5.5C6.25 6.19 6.81 6.75 7.5 6.75C8.19 6.75 8.75 6.19 8.75 5.5C8.75 4.81 8.19 4.25 7.5 4.25ZM7.25 5.5C7.25 5.36 7.36 5.25 7.5 5.25C7.64 5.25 7.75 5.36 7.75 5.5C7.75 5.78 7.25 5.78 7.25 5.5Z\"></path></svg>",
+	"editsmall-16x16": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M13.1209 3.05249L12.9509 2.88249C11.8809 1.81249 10.1309 1.81249 9.06089 2.88249L3.47089 8.46249C3.37089 8.56249 3.31089 8.68249 3.27089 8.81249L2.27089 12.8125C2.21089 13.0625 2.28089 13.3425 2.47089 13.5225C2.61089 13.6625 2.80089 13.7425 3.00089 13.7425C3.06089 13.7425 3.12089 13.7425 3.18089 13.7225L7.18089 12.7225C7.31089 12.6925 7.43089 12.6225 7.53089 12.5225L13.1209 6.93249C14.1909 5.86249 14.1909 4.11249 13.1209 3.04249V3.05249ZM6.62089 11.3125L4.04089 11.9625L4.69089 9.38249L8.01089 6.06249L9.95089 8.00249L6.63089 11.3225L6.62089 11.3125ZM12.0609 5.87249L11.0009 6.93249L9.06089 4.99249L10.1209 3.93249C10.6109 3.44249 11.4009 3.44249 11.8909 3.93249L12.0609 4.10249C12.5509 4.59249 12.5509 5.38249 12.0609 5.87249Z\"></path></svg>",
 	"expand-16x16": "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.75 8C11.75 8.41 11.41 8.75 11 8.75H8.75V11C8.75 11.41 8.41 11.75 8 11.75C7.59 11.75 7.25 11.41 7.25 11V8.75H5C4.59 8.75 4.25 8.41 4.25 8C4.25 7.59 4.59 7.25 5 7.25H7.25V5C7.25 4.59 7.59 4.25 8 4.25C8.41 4.25 8.75 4.59 8.75 5V7.25H11C11.41 7.25 11.75 7.59 11.75 8Z\"></path></svg>",
 	"expanddetails-16x16": "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.75 8C11.75 8.41 11.41 8.75 11 8.75H8.75V11C8.75 11.41 8.41 11.75 8 11.75C7.59 11.75 7.25 11.41 7.25 11V8.75H5C4.59 8.75 4.25 8.41 4.25 8C4.25 7.59 4.59 7.25 5 7.25H7.25V5C7.25 4.59 7.59 4.25 8 4.25C8.41 4.25 8.75 4.59 8.75 5V7.25H11C11.41 7.25 11.75 7.59 11.75 8Z\"></path></svg>",
 	"file-72x72": "<svg viewBox=\"0 0 72 72\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M62.83 12.83L53.17 3.17C52.7982 2.79866 52.357 2.50421 51.8714 2.30346C51.3858 2.1027 50.8654 1.99959 50.34 2H14C12.4087 2 10.8826 2.63214 9.75735 3.75736C8.63214 4.88258 8 6.4087 8 8V64C8 65.5913 8.63214 67.1174 9.75735 68.2426C10.8826 69.3679 12.4087 70 14 70H58C59.5913 70 61.1174 69.3679 62.2426 68.2426C63.3679 67.1174 64 65.5913 64 64V15.66C64.0004 15.1346 63.8973 14.6142 63.6965 14.1286C63.4958 13.643 63.2013 13.2018 62.83 12.83ZM52 4.83L61.17 14H56C54.9391 14 53.9217 13.5786 53.1716 12.8284C52.4214 12.0783 52 11.0609 52 10V4.83ZM62 64C62 65.0609 61.5786 66.0783 60.8284 66.8284C60.0783 67.5786 59.0609 68 58 68H14C12.9391 68 11.9217 67.5786 11.1716 66.8284C10.4214 66.0783 10 65.0609 10 64V8C10 6.93914 10.4214 5.92172 11.1716 5.17157C11.9217 4.42143 12.9391 4 14 4H50V10C50 11.5913 50.6321 13.1174 51.7574 14.2426C52.8826 15.3679 54.4087 16 56 16H62V64ZM22 26H50V28H22V26ZM22 32H50V34H22V32ZM22 38H50V40H22V38ZM22 44H50V46H22V44Z\"></path></svg>",
@@ -2580,8 +2665,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 = [];
@@ -2819,7 +2905,7 @@ class SurveyQuestionRankingItem extends ReactSurveyElement {
     }
     renderElement() {
         let itemContent = ReactElementFactory.Instance.createElement(this.question.itemComponent, { item: this.item, cssClasses: this.cssClasses });
-        return (React.createElement("div", { tabIndex: this.itemTabIndex, className: this.itemClass, onKeyDown: this.handleKeydown, onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, "data-sv-drop-target-ranking-item": this.index },
+        return (React.createElement("div", { id: this.question.getItemId(this.item), tabIndex: this.itemTabIndex, className: this.itemClass, onKeyDown: this.handleKeydown, onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, "data-sv-drop-target-ranking-item": this.index },
             React.createElement("div", { tabIndex: -1, style: { outline: "none" } },
                 React.createElement("div", { className: this.cssClasses.itemGhostNode }),
                 React.createElement("div", { className: this.cssClasses.itemContent },
@@ -2888,10 +2974,10 @@ ReactElementFactory.Instance.registerElement("sv-rating-item", (props) => {
 
 class RatingItemStar extends RatingItemBase {
     render() {
-        return (React.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClass(this.item.itemValue), onMouseOver: e => this.question.onItemMouseIn(this.item), onMouseOut: e => this.question.onItemMouseOut(this.item) },
+        return (React.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClass(this.item.itemValue), onMouseOver: e => this.question.onItemMouseIn(this.item), onMouseOut: e => this.question.onItemMouseOut(this.item), title: this.item.text },
             React.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: () => { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
-            React.createElement(SvgIcon, { className: "sv-star", size: "auto", iconName: this.question.itemStarIcon, title: this.item.text }),
-            React.createElement(SvgIcon, { className: "sv-star-2", size: "auto", iconName: this.question.itemStarIconAlt, title: this.item.text })));
+            React.createElement(SvgIcon, { className: "sv-star", size: "auto", iconName: this.question.itemStarIcon }),
+            React.createElement(SvgIcon, { className: "sv-star-2", size: "auto", iconName: this.question.itemStarIconAlt })));
     }
 }
 ReactElementFactory.Instance.registerElement("sv-rating-item-star", (props) => {
@@ -2900,9 +2986,9 @@ ReactElementFactory.Instance.registerElement("sv-rating-item-star", (props) => {
 
 class RatingItemSmiley extends RatingItemBase {
     render() {
-        return (React.createElement("label", { onMouseDown: this.handleOnMouseDown, style: this.question.getItemStyle(this.item.itemValue, this.item.highlight), className: this.question.getItemClass(this.item.itemValue), onMouseOver: e => this.question.onItemMouseIn(this.item), onMouseOut: e => this.question.onItemMouseOut(this.item) },
+        return (React.createElement("label", { onMouseDown: this.handleOnMouseDown, style: this.question.getItemStyle(this.item.itemValue, this.item.highlight), className: this.question.getItemClass(this.item.itemValue), onMouseOver: e => this.question.onItemMouseIn(this.item), onMouseOut: e => this.question.onItemMouseOut(this.item), title: this.item.text },
             React.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: () => { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
-            React.createElement(SvgIcon, { size: "auto", iconName: this.question.getItemSmileyIconName(this.item.itemValue), title: this.item.text })));
+            React.createElement(SvgIcon, { size: "auto", iconName: this.question.getItemSmileyIconName(this.item.itemValue) })));
     }
 }
 ReactElementFactory.Instance.registerElement("sv-rating-item-smiley", (props) => {
@@ -3329,14 +3415,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 +3600,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 +3612,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,29 +3632,14 @@ 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;
+            this.question.showDragAreaPlaceholder ? React.createElement("span", { className: this.question.cssClasses.dragAreaPlaceholder }, this.renderLocString(this.question.locRenderedPlaceholder)) : false,
+            React.createElement("div", { className: this.question.cssClasses.wrapper }, actionsContainer)));
     }
     renderPreview() {
         return ReactElementFactory.Instance.createElement("sv-file-preview", { question: this.question });
@@ -3609,6 +3660,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 +3735,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 +3863,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 = [];
@@ -3950,7 +4018,7 @@ class SurveyQuestionText extends SurveyQuestionUncontrolledElement {
                 // disabled={this.isDisplayMode}
                 disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, className: inputClass, type: this.question.inputType, 
                 //ref={this.controlRef}
-                ref: (input) => (this.setControl(input)), style: this.question.inputStyle, maxLength: this.question.getMaxLength(), min: this.question.renderedMin, max: this.question.renderedMax, step: this.question.renderedStep, size: this.question.inputSize, placeholder: placeholder, list: this.question.dataListId, autoComplete: this.question.autocomplete, onBlur: (event) => { this.question.onBlur(event); }, onFocus: (event) => { this.question.onFocus(event); }, onChange: this.question.onChange, onKeyUp: this.question.onKeyUp, onKeyDown: this.question.onKeyDown, onCompositionUpdate: (event) => this.question.onCompositionUpdate(event.nativeEvent), "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 }),
+                ref: (input) => (this.setControl(input)), style: this.question.inputStyle, maxLength: this.question.getMaxLength(), min: this.question.renderedMin, max: this.question.renderedMax, step: this.question.renderedStep, size: this.question.inputSize, placeholder: placeholder, list: this.question.dataListId, autoComplete: this.question.autocomplete, onBlur: (event) => { this.question.onBlur(event); }, onFocus: (event) => { this.question.onFocus(event); }, onChange: this.question.onChange, onClick: this.question.readOnlyBlocker, onPointerDown: this.question.readOnlyBlocker, onKeyUp: this.question.onKeyUp, onKeyDown: this.question.onKeyDown, onCompositionUpdate: (event) => this.question.onCompositionUpdate(event.nativeEvent), "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 }),
             counter));
     }
     renderElement() {
@@ -4036,7 +4104,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 }),
@@ -4379,10 +4447,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 +4536,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);
         }
     }
@@ -4577,12 +4642,7 @@ class SurveyQuestionMatrixDynamic extends SurveyQuestionMatrixDropdownBase {
         return this.renderAddRowButton(cssClasses);
     }
     renderNoRowsContent(cssClasses) {
-        const text = this.renderLocString(this.matrix.locNoRowsText);
-        const textDiv = React.createElement("div", { className: cssClasses.noRowsText }, text);
-        const btn = this.matrix.renderedTable.showAddRow ? this.renderAddRowButton(cssClasses, true) : undefined;
-        return (React.createElement("div", { className: cssClasses.noRowsSection },
-            textDiv,
-            btn));
+        return ReactElementFactory.Instance.createElement("sv-placeholder-matrixdynamic", { cssClasses: cssClasses, question: this.matrix });
     }
     renderAddRowButton(cssClasses, isEmptySection = false) {
         return ReactElementFactory.Instance.createElement("sv-matrixdynamic-add-btn", {
@@ -4612,80 +4672,29 @@ class SurveyQuestionMatrixDynamicAddButton extends ReactSurveyElement {
         return (this.props.isEmptySection ? addButton : React.createElement("div", { className: this.props.cssClasses.footer }, addButton));
     }
 }
-ReactElementFactory.Instance.registerElement("sv-matrixdynamic-add-btn", (props) => {
-    return React.createElement(SurveyQuestionMatrixDynamicAddButton, props);
-});
-
-class SurveyQuestionPanelDynamicAction extends ReactSurveyElement {
+class SurveyQuestionMatrixDynamicPlaceholder 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();
-        };
+        const cssClasses = this.props.cssClasses;
+        const matrix = this.props.question;
+        const showAddButton = matrix.renderedTable.showAddRow;
+        const text = this.renderLocString(matrix.locNoRowsText);
+        const textDiv = React.createElement("div", { className: cssClasses.noRowsText }, text);
+        const btn = showAddButton ? this.renderAddRowButton(cssClasses, matrix) : undefined;
+        return (React.createElement("div", { className: cssClasses.noRowsSection },
+            textDiv,
+            btn));
     }
-    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" })));
+    renderAddRowButton(cssClasses, question) {
+        return ReactElementFactory.Instance.createElement("sv-matrixdynamic-add-btn", {
+            question: question, cssClasses: cssClasses, isEmptySection: true
+        });
     }
 }
-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);
-});
+ReactElementFactory.Instance.registerElement("sv-matrixdynamic-add-btn", (props) => { return React.createElement(SurveyQuestionMatrixDynamicAddButton, props); });
+ReactElementFactory.Instance.registerElement("sv-placeholder-matrixdynamic", (props) => { return React.createElement(SurveyQuestionMatrixDynamicPlaceholder, props); });
 
 class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
     constructor(props) {
@@ -4721,64 +4730,23 @@ class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
     }
     renderElement() {
         const panels = [];
+        const cssClasses = this.question.cssClasses;
         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 }));
+            panels.push(React.createElement(SurveyQuestionPanelDynamicItem, { key: panel.id, element: panel, question: this.question, index: index, cssClasses: 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();
-        return (React.createElement("div", { className: this.question.cssClasses.root },
+        const noEntriesPlaceholder = this.renderPlaceholder(cssClasses);
+        return (React.createElement("div", { className: cssClasses.root },
             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" })));
@@ -4798,12 +4766,9 @@ class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
             this.question.footerToolbar.visibleActions.length ? (React.createElement("div", { className: this.question.cssClasses.footerButtonsContainer },
                 React.createElement(SurveyActionBar, { model: this.question.footerToolbar }))) : null));
     }
-    renderPlaceholder() {
-        if (this.question.getShowNoEntriesPlaceholder()) {
-            return (React.createElement("div", { className: this.question.cssClasses.noEntriesPlaceholder },
-                React.createElement("span", null, this.renderLocString(this.question.locNoEntriesText)),
-                this.renderAddRowButton()));
-        }
+    renderPlaceholder(cssClasses) {
+        if (this.question.getShowNoEntriesPlaceholder())
+            return ReactElementFactory.Instance.createElement("sv-placeholder-paneldynamic", { cssClasses: cssClasses, question: this.question });
         return null;
     }
 }
@@ -4843,6 +4808,24 @@ class SurveyQuestionPanelDynamicItem extends SurveyPanel {
 ReactQuestionFactory.Instance.registerQuestion("paneldynamic", props => {
     return React.createElement(SurveyQuestionPanelDynamic, props);
 });
+class SurveyQuestionPanelDynamicPlaceholder extends ReactSurveyElement {
+    constructor(props) {
+        super(props);
+    }
+    renderElement() {
+        const cssClasses = this.props.cssClasses;
+        const question = this.props.question;
+        return (React.createElement("div", { className: cssClasses.noEntriesPlaceholder },
+            React.createElement("span", null, this.renderLocString(question.locNoEntriesText)),
+            this.renderAddRowButton(question)));
+    }
+    renderAddRowButton(question) {
+        return ReactElementFactory.Instance.createElement("sv-paneldynamic-add-btn", {
+            data: { question: question }
+        });
+    }
+}
+ReactElementFactory.Instance.registerElement("sv-placeholder-paneldynamic", (props) => { return React.createElement(SurveyQuestionPanelDynamicPlaceholder, props); });
 
 class SurveyProgress extends SurveyNavigationBase {
     constructor(props) {
@@ -5521,7 +5504,7 @@ class SurveyQuestionSignaturePad extends SurveyQuestionElementBase {
     renderBackgroundImage() {
         if (!this.question.backgroundImage)
             return null;
-        return React.createElement("img", { className: this.question.cssClasses.backgroundImage, src: this.question.backgroundImage, style: { width: this.question.renderedCanvasWidth } });
+        return React.createElement("img", { className: this.question.cssClasses.backgroundImage, src: this.question.backgroundImage, style: { width: this.question.renderedCanvasWidth }, role: "presentation" });
     }
     renderLoadingIndicator() {
         return React.createElement("div", { className: this.question.cssClasses.loadingIndicator },
@@ -5768,6 +5751,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 +5800,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 +6057,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"2.0.4"}`, "survey-react-ui");
+checkLibraryVersion(`${"2.0.6"}`, "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