survey-creator-react 3.0.0-beta.2 → 3.0.0-beta.3

package/fesm/ui-preset-editor/index.mjs

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v3.0.0-beta.2
+ * SurveyJS Creator v3.0.0-beta.3
  * (c) 2015-2026 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-creator-react",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "description": "A white-label drag-and-drop form builder for React that lets you design complex, interactive forms and surveys without writing code. It generates JSON schemas used by the SurveyJS Form Library to render dynamic forms in your React app.",
   "author": "DevSoft Baltic OU <info@devsoftbaltic.com>",
   "homepage": "https://surveyjs.io/",
@@ -60,9 +60,9 @@
     "ace-builds": "^1.4.12",
     "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",
-    "survey-core": "3.0.0-beta.2",
-    "survey-react-ui": "3.0.0-beta.2",
-    "survey-creator-core": "3.0.0-beta.2"
+    "survey-core": "3.0.0-beta.3",
+    "survey-react-ui": "3.0.0-beta.3",
+    "survey-creator-core": "3.0.0-beta.3"
   },
   "peerDependenciesMeta": {
     "ace-builds": {

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v3.0.0-beta.2
+ * SurveyJS Creator v3.0.0-beta.3
  * (c) 2015-2026 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -3539,15 +3539,49 @@
             return this.question.renderedValue;
         };
         SurveyQuestionSpinEditor.prototype.renderButtons = function () {
-            var _this = this;
-            return (React__namespace.createElement("span", { className: this.question.cssClasses.buttonsContainer },
-                React__namespace.createElement("button", { tabIndex: -1, "aria-hidden": "true", className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onClick: this.question.onDownButtonClick, onMouseDown: this.question.onDownButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); } },
-                    React__namespace.createElement(surveyReactUi.SvgIcon, { iconName: this.question.cssClasses.decreaseButtonIcon, size: "auto" })),
-                React__namespace.createElement("button", { tabIndex: -1, "aria-hidden": "true", className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onClick: this.question.onUpButtonClick, onMouseDown: this.question.onUpButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); } },
-                    React__namespace.createElement(surveyReactUi.SvgIcon, { iconName: this.question.cssClasses.increaseButtonIcon, size: "auto" }))));
+            return React__namespace.createElement(surveyReactUi.SurveyActionBar, { model: this.question.inputActionsContainer });
         };
         return SurveyQuestionSpinEditor;
     }(surveyReactUi.SurveyQuestionText));
+    var SurveySpinEditorButton = /** @class */ (function (_super) {
+        __extends(SurveySpinEditorButton, _super);
+        function SurveySpinEditorButton() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(SurveySpinEditorButton.prototype, "item", {
+            get: function () {
+                return this.props.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SurveySpinEditorButton.prototype, "itemAction", {
+            get: function () {
+                return this.props.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SurveySpinEditorButton.prototype.getStateElement = function () {
+            return this.itemAction;
+        };
+        Object.defineProperty(SurveySpinEditorButton.prototype, "question", {
+            get: function () {
+                return this.item.data.question;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SurveySpinEditorButton.prototype.renderElement = function () {
+            var _this = this;
+            return React__namespace.createElement("button", { tabIndex: -1, "aria-hidden": "true", className: this.itemAction.getActionBarItemCss(), disabled: this.itemAction.disabled, onClick: function () { return _this.item.action(); }, onMouseDown: this.item.data.onMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); } },
+                React__namespace.createElement(surveyReactUi.SvgIcon, { className: this.itemAction.cssClasses.itemIcon, iconName: this.item.iconName, size: "auto" }));
+        };
+        return SurveySpinEditorButton;
+    }(surveyReactUi.SurveyElementBase));
+    surveyReactUi.ReactElementFactory.Instance.registerElement("sv-spinedit-button", function (props) {
+        return React__namespace.createElement(SurveySpinEditorButton, props);
+    });
     surveyReactUi.ReactQuestionFactory.Instance.registerQuestion("spinedit", function (props) {
         return React__namespace.createElement(SurveyQuestionSpinEditor, props);
     });
@@ -3588,10 +3622,11 @@
         };
         SurveyQuestionColor.prototype.renderElement = function () {
             var _this = this;
-            return (React__namespace.createElement("div", { className: this.question.cssClasses.root, onKeyDown: function (event) { return _this.question.onKeyDown(event.nativeEvent); } },
-                this.renderColorSwatch(),
-                this.renderInput(),
-                this.question.showDropdownAction ? this.renderDropdownAction() : null));
+            return (React__namespace.createElement("div", { className: this.question.cssClasses.rootWrapper },
+                React__namespace.createElement("div", { className: this.question.cssClasses.root, onKeyDown: function (event) { return _this.question.onKeyDown(event.nativeEvent); } },
+                    this.renderColorSwatch(),
+                    this.renderInput(),
+                    this.renderButtons())));
         };
         SurveyQuestionColor.prototype.getValueCore = function () {
             return this.question.renderedValue;
@@ -3602,13 +3637,8 @@
                 React__namespace.createElement(surveyReactUi.SvgIcon, { iconName: this.question.cssClasses.swatchIcon, size: "auto" }),
                 React__namespace.createElement("input", { type: "color", disabled: this.isDisplayMode, value: this.question.renderedColorValue, className: this.question.cssClasses.colorInput, onChange: function (event) { return _this.question.onColorInputChange(event.nativeEvent); }, tabIndex: -1, "aria-required": this.question.a11y_input_ariaRequired, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-label": this.question.a11y_input_ariaLabel, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }));
         };
-        SurveyQuestionColor.prototype.renderDropdownAction = function () {
-            return (React__namespace.createElement(React__namespace.Fragment, null,
-                React__namespace.createElement("div", { "aria-hidden": "true", className: this.question.cssClasses.choicesButtonWrapper }, surveyReactUi.ReactElementFactory.Instance.createElement("sv-action-bar-item", { item: this.question.dropdownAction })),
-                this.renderPopup()));
-        };
-        SurveyQuestionColor.prototype.renderPopup = function () {
-            return React__namespace.createElement(surveyReactUi.Popup, { model: this.question.dropdownAction.popupModel });
+        SurveyQuestionColor.prototype.renderButtons = function () {
+            return this.question.hasVisibleInputActions ? React__namespace.createElement(surveyReactUi.SurveyActionBar, { model: this.question.inputActionsContainer }) : null;
         };
         return SurveyQuestionColor;
     }(surveyReactUi.SurveyQuestionText));
@@ -3636,36 +3666,54 @@
             return (React__namespace.createElement(React__namespace.Fragment, null,
                 React__namespace.createElement("input", { disabled: this.question.isTextInputReadOnly, className: this.questionFile.cssClasses.control, placeholder: this.questionFile.renderedPlaceholder, ref: function (input) { return (_this.setControl(input)); }, autoComplete: "off", type: "text", onBlur: function (event) { return _this.questionFile.onInputBlur(event.nativeEvent); }, onChange: function (event) { return _this.questionFile.onInputChange(event.nativeEvent); } })));
         };
-        SurveyQuestionFileEditor.prototype.renderFileInput = function () {
-            var _this = this;
-            return (React__namespace.createElement("input", { type: "file", disabled: this.isDisplayMode, className: this.questionFile.cssClasses.fileInput, id: this.questionFile.inputId, "aria-required": this.questionFile.ariaRequired, "aria-label": this.questionFile.ariaLabel, "aria-invalid": this.questionFile.ariaInvalid, "aria-describedby": this.questionFile.ariaDescribedBy, multiple: false, title: this.questionFile.inputTitle, accept: this.questionFile.acceptedTypes, tabIndex: -1, onChange: function (event) { return _this.questionFile.onFileInputChange(event.nativeEvent); } }));
-        };
         SurveyQuestionFileEditor.prototype.renderButtons = function () {
-            return (React__namespace.createElement("div", { className: this.questionFile.cssClasses.buttonsContainer },
-                this.renderClearButton(),
-                this.renderChooseButton()));
-        };
-        SurveyQuestionFileEditor.prototype.renderClearButton = function () {
-            return surveyReactUi.attachKey2click((React__namespace.createElement("button", { className: this.questionFile.cssClasses.clearButton, title: this.questionFile.clearButtonCaption, disabled: this.questionFile.getIsClearButtonDisabled(), onClick: this.questionFile.doClean },
-                React__namespace.createElement(surveyReactUi.SvgIcon, { iconName: this.questionFile.cssClasses.clearButtonIcon, size: "auto" }))));
-        };
-        SurveyQuestionFileEditor.prototype.renderChooseButton = function () {
-            var _this = this;
-            return (surveyReactUi.attachKey2click(React__namespace.createElement("label", { onClick: function (event) { return _this.questionFile.chooseFiles(event.nativeEvent); }, className: this.questionFile.getChooseButtonCss(), htmlFor: this.questionFile.inputId, "aria-label": this.questionFile.chooseButtonCaption },
-                React__namespace.createElement(surveyReactUi.SvgIcon, { iconName: this.questionFile.cssClasses.chooseButtonIcon, size: "auto", title: this.questionFile.chooseButtonCaption }))));
+            return this.question.hasVisibleInputActions ? React__namespace.createElement(surveyReactUi.SurveyActionBar, { model: this.questionFile.inputActionsContainer }) : null;
         };
         SurveyQuestionFileEditor.prototype.renderElement = function () {
             var _this = this;
             return (React__namespace.createElement("div", { className: this.questionFile.cssClasses.root, ref: function (el) { return _this.setContent(el); }, onDragEnter: this.questionFile.onDragEnter, onDragOver: this.questionFile.onDragOver, onDrop: this.questionFile.onDrop, onDragLeave: this.questionFile.onDragLeave, onKeyDown: function (event) { return _this.question.onKeyDown(event.nativeEvent); } },
                 this.renderInput(),
-                this.renderFileInput(),
                 this.renderButtons()));
         };
         return SurveyQuestionFileEditor;
     }(surveyReactUi.SurveyQuestionText));
+    var SurveyQuestionFileEditorButton = /** @class */ (function (_super) {
+        __extends(SurveyQuestionFileEditorButton, _super);
+        function SurveyQuestionFileEditorButton() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(SurveyQuestionFileEditorButton.prototype, "item", {
+            get: function () {
+                return this.props.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SurveyQuestionFileEditorButton.prototype, "question", {
+            get: function () {
+                return this.props.item.data.question;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SurveyQuestionFileEditorButton.prototype.getStateElement = function () {
+            return this.item;
+        };
+        SurveyQuestionFileEditorButton.prototype.renderElement = function () {
+            var _this = this;
+            return (React__namespace.createElement("div", null,
+                surveyReactUi.attachKey2click(React__namespace.createElement("label", { onClick: function (event) { return _this.question.chooseFiles(event.nativeEvent); }, className: this.item.getActionBarItemCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonCaption },
+                    React__namespace.createElement(surveyReactUi.SvgIcon, { iconName: this.item.iconName, size: "auto", title: this.item.title, className: this.item.cssClasses.itemIcon }))),
+                React__namespace.createElement("input", { type: "file", disabled: this.item.disabled, className: this.question.cssClasses.fileInput, id: this.question.inputId, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy, multiple: false, title: this.question.inputTitle, accept: this.question.acceptedTypes, tabIndex: -1, onChange: function (event) { return _this.question.onFileInputChange(event.nativeEvent); } })));
+        };
+        return SurveyQuestionFileEditorButton;
+    }(surveyReactUi.SurveyElementBase));
     surveyReactUi.ReactQuestionFactory.Instance.registerQuestion("fileedit", function (props) {
         return React__namespace.createElement(SurveyQuestionFileEditor, props);
     });
+    surveyReactUi.ReactElementFactory.Instance.registerElement("sv-fileedit-button", function (props) {
+        return React__namespace.createElement(SurveyQuestionFileEditorButton, props);
+    });
 
     var SurveyQuestionBooleanSwitch = /** @class */ (function (_super) {
         __extends(SurveyQuestionBooleanSwitch, _super);
@@ -3692,8 +3740,8 @@
     surveyCore.RendererFactory.Instance.registerRenderer("boolean", "switch", "sv-boolean-switch");
 
     exports.Version = void 0;
-    exports.Version = "".concat("3.0.0-beta.2");
-    surveyCore.checkLibraryVersion("".concat("3.0.0-beta.2"), "survey-creator-react");
+    exports.Version = "".concat("3.0.0-beta.3");
+    surveyCore.checkLibraryVersion("".concat("3.0.0-beta.3"), "survey-creator-react");
 
     Object.defineProperty(exports, "PropertyGridEditorCollection", {
         enumerable: true,
@@ -3773,11 +3821,13 @@
     exports.SurveyQuestionBooleanSwitch = SurveyQuestionBooleanSwitch;
     exports.SurveyQuestionColor = SurveyQuestionColor;
     exports.SurveyQuestionFileEditor = SurveyQuestionFileEditor;
+    exports.SurveyQuestionFileEditorButton = SurveyQuestionFileEditorButton;
     exports.SurveyQuestionLinkValue = SurveyQuestionLinkValue;
     exports.SurveyQuestionSpinEditor = SurveyQuestionSpinEditor;
     exports.SurveyResults = SurveyResults;
     exports.SurveyResultsByRow = SurveyResultsByRow;
     exports.SurveySimulator = SurveySimulator;
+    exports.SurveySpinEditorButton = SurveySpinEditorButton;
     exports.SwitcherComponent = SwitcherComponent;
     exports.TabButtonComponent = TabButtonComponent;
     exports.TabDesignerComponent = TabDesignerComponent;