survey-react-ui 3.0.0-beta.3 → 3.0.0-beta.4

package/index.html

@@ -11,7 +11,6 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
     <script src="./node_modules/survey-core/survey.core.js"></script>
     <script src="./node_modules/survey-core/themes/index.js"></script>
-    <script src="./node_modules/survey-core/themes/test.js"></script>
     <link rel="stylesheet" href="./node_modules/survey-core/survey-core.css" />
     <script src="./build/survey-react-ui.js"></script>
 </head>
@@ -20,7 +19,7 @@
     <div id="surveyElement" style="position: fixed; top: 0; left: 0; bottom: 0; right: 0;"></div>
     <div id="surveyResultElement"></div>
     <script type="text/babel" src="./index.js"></script>
-    <script defer src="survey-react-ui.js"></script>
+    <script defer src="./build/survey-react-ui.js"></script>
 </body>
 
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.4",
   "license": "MIT",
   "author": "DevSoft Baltic OU <info@devsoftbaltic.com>",
   "homepage": "https://surveyjs.io/",
@@ -51,7 +51,7 @@
     }
   },
   "peerDependencies": {
-    "survey-core": "3.0.0-beta.3",
+    "survey-core": "3.0.0-beta.4",
     "react": "^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0"
   }

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v3.0.0-beta.3
+ * surveyjs - Survey JavaScript library v3.0.0-beta.4
  * Copyright (c) 2015-2026 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -537,7 +537,7 @@
             return _super.call(this, props) || this;
         }
         SurveyActionBarSeparator.prototype.render = function () {
-            var className = "sv-action-bar-separator ".concat(this.props.cssClasses);
+            var className = "sd-action-bar__separator ".concat(this.props.cssClasses);
             return React__namespace.createElement("div", { className: className });
         };
         return SurveyActionBarSeparator;
@@ -645,7 +645,7 @@
                 item: this.item,
             });
             return (React__namespace.createElement("div", { className: itemClass, id: "" + this.item.uniqueId, ref: this.ref },
-                React__namespace.createElement("div", { className: "sv-action__content" },
+                React__namespace.createElement("div", { className: this.item.getActionRootContentCss() },
                     separator,
                     itemComponent)));
         };
@@ -710,10 +710,9 @@
         SurveyActionBarItem.prototype.renderInnerButton = function () {
             var _this = this;
             var className = this.item.getActionBarItemCss();
-            var title = this.item.tooltip || this.item.title;
             var buttonContent = this.renderButtonContent();
             var tabIndex = this.item.disableTabStop ? -1 : undefined;
-            var button = attachKey2click(React__namespace.createElement("button", { ref: this.ref, className: className, type: "button", disabled: this.item.disabled, onMouseDown: function (args) { return _this.item.doMouseDown(args); }, onFocus: function (args) { return _this.item.doFocus(args); }, onClick: function (args) { return _this.item.doAction(args); }, title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, "aria-controls": this.item.ariaControls, "aria-labelledby": this.item.ariaLabelledBy, role: this.item.ariaRole }, buttonContent), this.item, { processEsc: false });
+            var button = attachKey2click(React__namespace.createElement("button", { ref: this.ref, className: className, type: "button", disabled: this.item.disabled, onMouseDown: function (args) { return _this.item.doMouseDown(args); }, onFocus: function (args) { return _this.item.doFocus(args); }, onClick: function (args) { return _this.item.doAction(args); }, title: this.item.getTooltip(), tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, "aria-controls": this.item.ariaControls, "aria-labelledby": this.item.ariaLabelledBy, role: this.item.ariaRole }, buttonContent), this.item, { processEsc: false });
             return button;
         };
         SurveyActionBarItem.prototype.componentDidMount = function () {
@@ -888,7 +887,7 @@
         }
         PopupDropdownContainer.prototype.renderHeaderPopup = function (popupModel) {
             var popupDropdownModel = popupModel;
-            if (!popupDropdownModel)
+            if (!popupDropdownModel || !popupDropdownModel.showHeader)
                 return null;
             return (React__namespace.createElement("span", { style: {
                     left: popupDropdownModel.pointerTarget.left,
@@ -1413,6 +1412,8 @@
 
     var chevronright_16x16 = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.35 8.34627L7.35 12.3463C7.25 12.4463 7.12 12.4963 7 12.4963C6.88 12.4963 6.74 12.4463 6.65 12.3463C6.45 12.1463 6.45 11.8363 6.65 11.6363L10.3 7.98627L6.65 4.34627C6.45 4.15627 6.45 3.83627 6.65 3.64627C6.85 3.45627 7.16 3.44627 7.35 3.64627L11.35 7.64627C11.55 7.84627 11.55 8.15627 11.35 8.35627V8.34627Z\"/></svg>";
 
+    var chevronright_24x24 = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.2263 7.46872L15.2263 11.4687C15.3763 11.6187 15.4463 11.8087 15.4463 11.9987C15.4463 12.1887 15.3763 12.3787 15.2263 12.5287L11.2263 16.5287C10.9363 16.8187 10.4563 16.8187 10.1663 16.5287C9.87629 16.2387 9.87629 15.7587 10.1663 15.4687L13.6363 11.9987L10.1663 8.52872C9.87629 8.23872 9.87629 7.75872 10.1663 7.46872C10.4563 7.17872 10.9363 7.17872 11.2263 7.46872Z\"/></svg>";
+
     var clear_16x16 = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.35 11.65C12.55 11.85 12.55 12.16 12.35 12.36C12.25 12.46 12.12 12.51 12 12.51C11.88 12.51 11.74 12.46 11.65 12.36L8 8.71L4.35 12.36C4.25 12.46 4.12 12.51 4 12.51C3.88 12.51 3.74 12.46 3.65 12.36C3.45 12.16 3.45 11.85 3.65 11.65L7.3 8L3.65 4.35C3.45 4.16 3.45 3.84 3.65 3.65C3.85 3.46 4.16 3.45 4.35 3.65L8 7.3L11.65 3.65C11.85 3.45 12.16 3.45 12.36 3.65C12.56 3.85 12.56 4.16 12.36 4.36L8.71 8.01L12.36 11.66L12.35 11.65Z\"/></svg>";
 
     var clear_24x24 = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20.12 10.9325C20.64 10.4125 20.93 9.7225 20.93 8.9925C20.93 8.2625 20.64 7.5725 20.12 7.0525L16.95 3.8825C15.88 2.8125 14.13 2.8125 13.06 3.8825L3.88 13.0525C3.36 13.5725 3.07 14.2625 3.07 14.9925C3.07 15.7225 3.36 16.4125 3.88 16.9325L5.64 18.6925C6.57 19.6225 7.78 20.0825 9 20.0825C10.22 20.0825 11.43 19.6225 12.36 18.6925L20.12 10.9325ZM14.12 4.9325C14.36 4.6925 14.67 4.5625 15 4.5625C15.33 4.5625 15.65 4.6925 15.88 4.9325L19.05 8.1025C19.54 8.5925 19.54 9.3825 19.05 9.8725L12.99 15.9325L8.05 10.9925L14.12 4.9325ZM6.7 17.6325L4.94 15.8725C4.45 15.3825 4.45 14.5925 4.94 14.1025L7 12.0425L11.94 16.9825L11.3 17.6225C10.07 18.8525 7.93 18.8525 6.7 17.6225V17.6325ZM22.75 20.9925C22.75 21.4025 22.41 21.7425 22 21.7425H14C13.59 21.7425 13.25 21.4025 13.25 20.9925C13.25 20.5825 13.59 20.2425 14 20.2425H22C22.41 20.2425 22.75 20.5825 22.75 20.9925ZM4.75 20.9925C4.75 21.4025 4.41 21.7425 4 21.7425H2C1.59 21.7425 1.25 21.4025 1.25 20.9925C1.25 20.5825 1.59 20.2425 2 20.2425H4C4.41 20.2425 4.75 20.5825 4.75 20.9925Z\"/></svg>";
@@ -1520,6 +1521,7 @@
       "check-24x24": check_24x24,
       "chevrondown-24x24": chevrondown_24x24,
       "chevronright-16x16": chevronright_16x16,
+      "chevronright-24x24": chevronright_24x24,
       "clear-16x16": clear_16x16,
       "clear-24x24": clear_24x24,
       "close-16x16": close_16x16,
@@ -3431,13 +3433,13 @@
             configurable: true
         });
         SurveyQuestionSelectBaseItem.prototype.renderComment = function () {
-            if (!this.item.isCommentShowing)
+            if (!this.item.renderedIsCommentShowing)
                 return null;
             return React__namespace.createElement("div", { className: this.question.getCommentAreaCss(true) },
                 React__namespace.createElement(SurveyQuestionCommentValueItem, { question: this.question, item: this.item, cssClasses: this.question.cssClasses }));
         };
         SurveyQuestionSelectBaseItem.prototype.renderPanel = function () {
-            if (this.item.isPanelShowing) {
+            if (this.item.renderedIsPanelShowing) {
                 var panel = this.item.panel;
                 return (React__namespace.createElement(SurveyPanel, { key: panel.id, element: panel, survey: this.question.survey, cssClasses: this.props.cssClasses, isDisplayMode: this.isDisplayMode, creator: this.props.creator }));
             }
@@ -4040,12 +4042,13 @@
             return this.questionBase.renderedValue;
         };
         SurveyQuestionDropdownBase.prototype.renderReadOnlyElement = function () {
+            if (this.question.showInputFieldComponent) {
+                return (React__namespace.createElement("div", { className: this.question.cssClasses.controlValue }, this.renderValueElement()));
+            }
             if (this.question.readOnlyText) {
                 return (React__namespace.createElement("div", { className: this.question.cssClasses.controlValue }, this.renderLocString(this.question.locReadOnlyText)));
             }
-            else {
-                return null;
-            }
+            return null;
         };
         SurveyQuestionDropdownBase.prototype.renderSelect = function (cssClasses) {
             var _this = this;
@@ -4067,7 +4070,9 @@
         };
         SurveyQuestionDropdownBase.prototype.renderValueElement = function () {
             if (this.question.showInputFieldComponent) {
-                return ReactElementFactory.Instance.createElement(this.question.inputFieldComponentName, { item: this.dropdownListModel.getSelectedAction(), question: this.question });
+                var listModel = this.dropdownListModel;
+                var actionItem = !!listModel ? listModel.getSelectedAction() : this.question.selectedItem;
+                return ReactElementFactory.Instance.createElement(this.question.inputFieldComponentName, { item: actionItem, question: this.question });
             }
             else if (this.question.showSelectedItemLocText) {
                 return this.renderLocString(this.question.selectedItemLocText);
@@ -4639,9 +4644,9 @@
         });
         SurveyFileChooseButton.prototype.render = function () {
             var _this = this;
-            return attachKey2click(React__namespace.createElement("label", { tabIndex: 0, className: this.question.getChooseFileCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonText, onClick: function (e) { return _this.question.chooseFile(e.nativeEvent); } },
-                (!!this.question.cssClasses.chooseFileIconId) ? React__namespace.createElement(SvgIcon, { title: this.question.chooseButtonText, iconName: this.question.cssClasses.chooseFileIconId, size: "auto" }) : null,
-                React__namespace.createElement("span", null, this.question.chooseButtonText)));
+            return attachKey2click(React__namespace.createElement("label", { tabIndex: 0, className: this.props.item.getActionBarItemCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonText, onClick: function (e) { return _this.question.chooseFile(e.nativeEvent); } },
+                !!this.props.item.iconName ? React__namespace.createElement(SvgIcon, { title: this.question.chooseButtonText, iconName: this.question.cssClasses.chooseFileIconId, size: "auto", className: this.props.item.cssClasses.itemIcon }) : null,
+                this.props.item.hasTitle ? React__namespace.createElement(SurveyLocStringViewer, { model: this.props.item.locTitle, textClass: this.props.item.getActionBarItemTitleCss() }) : null));
         };
         return SurveyFileChooseButton;
     }(ReactSurveyElement));
@@ -4746,10 +4751,7 @@
                 this.renderFileSign(this.question.cssClasses.fileSign, val),
                 React__namespace.createElement("div", { className: this.question.getImageWrapperCss(val) },
                     this.question.canPreviewImage(val) ? (React__namespace.createElement("img", { src: val.content, style: { height: this.question.imageHeight, width: this.question.imageWidth }, alt: "File preview" })) : (this.question.cssClasses.defaultImage ? (React__namespace.createElement(SvgIcon, { iconName: this.question.cssClasses.defaultImageIconId, size: "auto", className: this.question.cssClasses.defaultImage })) : null),
-                    val.name && !this.question.isReadOnly ? (React__namespace.createElement("div", { className: this.question.getRemoveButtonCss(), onClick: function (event) { return _this.question.doRemoveFile(val, event); } },
-                        React__namespace.createElement("span", { className: this.question.cssClasses.removeFile }, this.question.removeFileCaption),
-                        (this.question.cssClasses.removeFileSvgIconId) ?
-                            (React__namespace.createElement(SvgIcon, { title: this.question.removeFileCaption, iconName: this.question.cssClasses.removeFileSvgIconId, size: "auto", className: this.question.cssClasses.removeFileSvg })) : null)) : null),
+                    val.name && !this.question.isReadOnly ? (React__namespace.createElement(SurveyAction, { item: this.question.getRemoveFileButton(val) })) : null),
                 this.renderFileSign(this.question.cssClasses.fileSignBottom, val)));
         };
         SurveyFileItem.prototype.canRender = function () {
@@ -6202,10 +6204,11 @@
                     React__namespace.createElement("button", { className: this.model.cssClasses.searchClearButtonIcon, onClick: function (event) { _this.model.onClickSearchClearButton(event); } },
                         React__namespace.createElement(SvgIcon, { iconName: "icon-searchclear", size: "auto" })) : null;
                 return (React__namespace.createElement("div", { className: this.model.cssClasses.filter },
-                    React__namespace.createElement("div", { className: this.model.cssClasses.filterIcon },
-                        React__namespace.createElement(SvgIcon, { iconName: "icon-search", size: "auto" })),
-                    React__namespace.createElement("input", { type: "text", className: this.model.cssClasses.filterInput, "aria-label": this.model.filterStringPlaceholder, placeholder: this.model.filterStringPlaceholder, value: this.state.filterString, onKeyUp: onKeyUp, onChange: onChange }),
-                    clearButton));
+                    React__namespace.createElement("div", { className: this.model.cssClasses.filterBox },
+                        React__namespace.createElement("div", { className: this.model.cssClasses.filterIcon },
+                            React__namespace.createElement(SvgIcon, { iconName: "icon-search", size: "auto" })),
+                        React__namespace.createElement("input", { type: "text", className: this.model.cssClasses.filterInput, "aria-label": this.model.filterStringPlaceholder, placeholder: this.model.filterStringPlaceholder, value: this.state.filterString, onKeyUp: onKeyUp, onChange: onChange }),
+                        clearButton)));
             }
         };
         List.prototype.emptyContent = function () {
@@ -6266,6 +6269,10 @@
             this.question.setValueFromClick(event.target.value);
             this.setState({ value: this.question.value });
         };
+        SurveyQuestionRating.prototype.componentDidMount = function () {
+            _super.prototype.componentDidMount.call(this);
+            this.setState({ value: this.question.value });
+        };
         SurveyQuestionRating.prototype.renderItem = function (item, index) {
             var renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponent, {
                 question: this.question,
@@ -6449,12 +6456,7 @@
             var _this = this;
             var header = this.renderWindowHeader();
             var body = this.renderBody();
-            var style = {};
-            if (!!this.popup.renderedWidth) {
-                style.width = this.popup.renderedWidth;
-                style.maxWidth = this.popup.renderedWidth;
-            }
-            return (React__namespace.createElement("div", { className: this.popup.cssRoot, style: style, onScroll: function () { return _this.popup.onScroll(); } },
+            return (React__namespace.createElement("div", { className: this.popup.cssRoot, style: this.popup.renderedStyle, onScroll: function () { return _this.popup.onScroll(); } },
                 React__namespace.createElement("div", { className: this.popup.cssRootContent },
                     header,
                     body)));
@@ -6819,13 +6821,13 @@
             var _this = this;
             var cssClasses = this.question.cssClasses;
             var loadingIndicator = this.question.showLoadingIndicator ? this.renderLoadingIndicator() : null;
-            var clearButton = this.renderCleanButton();
+            var toolbar = this.renderToolbar();
             return (React__namespace.createElement("div", { className: cssClasses.root, ref: function (root) { return (_this.setControl(root)); }, style: { width: this.question.renderedCanvasWidth } },
                 React__namespace.createElement("div", { className: cssClasses.placeholder, style: { display: this.question.needShowPlaceholder() ? "" : "none" } }, this.renderLocString(this.question.locRenderedPlaceholder)),
                 React__namespace.createElement("div", null,
                     this.renderBackgroundImage(),
                     React__namespace.createElement("canvas", { tabIndex: -1, className: this.question.cssClasses.canvas, onBlur: function (event) { _this.question.onBlur(event); } })),
-                clearButton,
+                toolbar,
                 loadingIndicator));
         };
         SurveyQuestionSignaturePad.prototype.renderBackgroundImage = function () {
@@ -6837,15 +6839,8 @@
             return React__namespace.createElement("div", { className: this.question.cssClasses.loadingIndicator },
                 React__namespace.createElement(LoadingIndicatorComponent, null));
         };
-        SurveyQuestionSignaturePad.prototype.renderCleanButton = function () {
-            var _this = this;
-            if (!this.question.canShowClearButton)
-                return null;
-            var cssClasses = this.question.cssClasses;
-            return React__namespace.createElement("div", { className: cssClasses.controls },
-                React__namespace.createElement("button", { type: "button", className: cssClasses.clearButton, title: this.question.clearButtonCaption, onClick: function () { return _this.question.clearValueFromUI(); } },
-                    this.question.cssClasses.clearButtonIconId ? React__namespace.createElement(SvgIcon, { iconName: this.question.cssClasses.clearButtonIconId, size: "auto" }) : React__namespace.createElement("span", null, "\u2716"),
-                    " "));
+        SurveyQuestionSignaturePad.prototype.renderToolbar = function () {
+            return React__namespace.createElement(SurveyActionBar, { model: this.question.toolbar });
         };
         return SurveyQuestionSignaturePad;
     }(SurveyQuestionElementBase));
@@ -6976,6 +6971,13 @@
             }
             return res;
         };
+        SurveyQuestionCustom.prototype.getRenderedElements = function () {
+            var res = _super.prototype.getRenderedElements.call(this);
+            if (!!this.question.contentQuestion) {
+                res.push(this.question.contentQuestion);
+            }
+            return res;
+        };
         SurveyQuestionCustom.prototype.renderElement = function () {
             return SurveyQuestion.renderQuestionBody(this.creator, this.question.contentQuestion);
         };
@@ -7418,7 +7420,7 @@
         return React__namespace.createElement(SurveyLocStringEditor, props);
     });
 
-    surveyCore.checkLibraryVersion("".concat("3.0.0-beta.3"), "survey-react-ui");
+    surveyCore.checkLibraryVersion("".concat("3.0.0-beta.4"), "survey-react-ui");
 
     Object.defineProperty(exports, "Model", {
         enumerable: true,