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

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v3.0.0-beta.2
+ * SurveyJS Creator v3.0.0-beta.4
  * (c) 2015-2026 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -142,10 +142,10 @@
             if (this.item.css) {
                 css += " " + this.item.css;
             }
-            css += (!this.item.isVisible ? " sv-action--hidden" : "");
+            css += (!this.item.isVisible ? " svc-tabbed-menu-item-container--hidden" : "");
             var component = surveyReactUi.ReactElementFactory.Instance.createElement(this.item.component || "svc-tabbed-menu-item", { item: this.item });
             return (React__namespace.createElement("span", { key: this.item.id, className: css, ref: this.ref },
-                React__namespace.createElement("div", { className: "sv-action__content" }, component)));
+                React__namespace.createElement("div", { className: "svc-tabbed-menu-item-container__content" }, component)));
         };
         TabbedMenuItemWrapper.prototype.componentDidMount = function () {
             var _this = this;
@@ -304,7 +304,8 @@
                 : surveyReactUi.ReactElementFactory.Instance.createElement(tab.componentContent, {
                     creator: creator,
                     survey: creator.survey,
-                    data: tab.data.model
+                    data: tab.data.model,
+                    model: tab.data.model
                 });
             var className = "svc-creator-tab" + (creator.toolboxLocation == "right" ? " svc-creator__toolbox--right" : "");
             return (React__namespace.createElement("div", { role: "tabpanel", key: tab.id, id: "scrollableDiv-" + tab.id, "aria-labelledby": "tab-" + tab.id, className: className }, component));
@@ -795,8 +796,9 @@
                         isChecked: _this.question.value === item.value
                     }), _this.question, item))); })),
                     this.dropdownModel.needToCollapse ?
-                        React__namespace.createElement(ActionButton, { click: this.dropdownModel.switchCollapse, text: this.dropdownModel.getButtonText(), allowBubble: true }) :
-                        null)));
+                        surveyReactUi.ReactElementFactory.Instance.createElement("sv-action-bar-item", {
+                            item: this.dropdownModel.collapseAction,
+                        }) : null)));
         };
         return QuestionDropdownAdornerComponent;
     }(QuestionAdornerComponent));
@@ -836,9 +838,7 @@
                     React__namespace.createElement(surveyReactUi.LoadingIndicatorComponent, null))));
         };
         QuestionImageAdornerComponent.prototype.renderChooseButton = function () {
-            var _this = this;
-            return (React__namespace.createElement("div", { className: "svc-image-question-controls" }, this.model.allowEdit ? surveyReactUi.attachKey2click(React__namespace.createElement("span", { className: "svc-context-button", onClick: function () { return _this.imageModel.chooseFile(_this.imageModel); } },
-                React__namespace.createElement(surveyReactUi.SvgIcon, { size: "auto", iconName: "icon-choosefile" }))) : null));
+            return React__namespace.createElement(surveyReactUi.SurveyActionBar, { model: this.imageModel.imageActionsContainer });
         };
         QuestionImageAdornerComponent.prototype.renderElementPlaceholder = function () {
             return this.imageModel.isUploading ? this.renderLoadingPlaceholder() : this.renderChooseButton();
@@ -902,11 +902,7 @@
             var model = this.ratingModel;
             return (React__namespace.createElement(React__namespace.Fragment, null,
                 React__namespace.createElement("div", { className: "svc-rating-question-content" },
-                    React__namespace.createElement("div", { className: model.controlsClassNames },
-                        model.allowRemove ? surveyReactUi.attachKey2click(React__namespace.createElement("span", { role: "button", className: model.removeClassNames, "aria-label": model.removeTooltip, onClick: function () { return model.removeItem(model); } },
-                            React__namespace.createElement(surveyReactUi.SvgIcon, { size: "auto", iconName: "icon-remove_16x16", title: model.removeTooltip }))) : null,
-                        model.allowAdd ? surveyReactUi.attachKey2click(React__namespace.createElement("span", { role: "button", className: model.addClassNames, "aria-label": model.addTooltip, onClick: function () { return model.addItem(model); } },
-                            React__namespace.createElement(surveyReactUi.SvgIcon, { size: "auto", iconName: "icon-add_16x16", title: model.addTooltip }))) : null),
+                    React__namespace.createElement(surveyReactUi.SurveyActionBar, { model: model.rateActionsContainer }),
                     this.props.element)));
         };
         return QuestionRatingAdornerComponent;
@@ -1110,35 +1106,32 @@
         }
         Object.defineProperty(AddQuestionButtonComponent.prototype, "model", {
             get: function () {
-                return this.props.item.data;
+                return this.item.data;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AddQuestionButtonComponent.prototype, "item", {
+            get: function () {
+                return this.props.item;
             },
             enumerable: false,
             configurable: true
         });
+        AddQuestionButtonComponent.prototype.getStateElement = function () {
+            return this.item;
+        };
         AddQuestionButtonComponent.prototype.renderTypeSelector = function () {
-            var questionTypeSelectorModel = this.model.questionTypeSelectorModel;
-            return surveyReactUi.attachKey2click(React__namespace.createElement("button", { type: "button", onClick: function (e) {
-                    e.stopPropagation();
-                    questionTypeSelectorModel.action();
-                }, className: "svc-element__question-type-selector", title: this.model.addNewQuestionText, role: "button" },
-                React__namespace.createElement("span", { className: "svc-element__question-type-selector-icon" },
-                    React__namespace.createElement(surveyReactUi.SvgIcon, { iconName: questionTypeSelectorModel.iconName, size: "auto", title: this.model.addNewQuestionText })),
-                this.props.renderPopup === undefined || this.props.renderPopup ?
-                    React__namespace.createElement(surveyReactUi.Popup, { model: questionTypeSelectorModel.popupModel })
-                    : null));
+            return React__namespace.createElement("div", { className: this.item.cssClasses.itemTypeSelector }, surveyReactUi.ReactElementFactory.Instance.createElement("sv-action-bar-item-dropdown", { item: this.model.questionTypeSelectorModel }));
         };
         AddQuestionButtonComponent.prototype.renderElement = function () {
             var _this = this;
-            var addButtonClass = this.props.buttonClass || "svc-btn";
-            return React__namespace.createElement(React__namespace.Fragment, null,
-                surveyReactUi.attachKey2click(React__namespace.createElement("div", { className: "svc-element__add-new-question " + addButtonClass, onClick: function (e) {
-                        e.stopPropagation();
-                        _this.model.addNewQuestion(_this.model, new ReactMouseEvent(e));
-                    }, onMouseOver: function (e) { return _this.model.hoverStopper && _this.model.hoverStopper(e.nativeEvent, e.currentTarget); } },
-                    React__namespace.createElement(surveyReactUi.SvgIcon, { className: "svc-panel__add-new-question-icon", iconName: "icon-add_24x24", size: "auto" }),
-                    React__namespace.createElement("span", { className: "svc-add-new-item-button__text" }, this.model.addNewQuestionText),
-                    this.props.renderPopup !== false ? this.renderTypeSelector() : null)),
-                this.props.renderPopup === false ? this.renderTypeSelector() : null);
+            return React__namespace.createElement(React__namespace.Fragment, null, surveyReactUi.attachKey2click(React__namespace.createElement("div", { className: this.item.getActionBarItemCss(), onClick: function (e) {
+                    e.stopPropagation();
+                    _this.model.addNewQuestion(_this.model, new ReactMouseEvent(e));
+                }, onMouseOver: function (e) { return _this.model.hoverStopper && _this.model.hoverStopper(e.nativeEvent, e.currentTarget); } },
+                React__namespace.createElement("span", { className: this.item.getActionBarItemTitleCss() }, this.model.addNewQuestionText),
+                this.renderTypeSelector())));
         };
         return AddQuestionButtonComponent;
     }(surveyReactUi.SurveyElementBase));
@@ -1152,30 +1145,23 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         PanelAdornerComponent.prototype.renderElementPlaceholder = function () {
-            var _this = this;
             if (!this.model.isEmptyElement) {
                 return null;
             }
             return (React__namespace.createElement("div", { className: "svc-panel__placeholder_frame-wrapper" },
                 React__namespace.createElement("div", { className: "svc-panel__placeholder_frame" },
                     React__namespace.createElement("div", { className: "svc-panel__placeholder" }, this.model.placeholderText),
-                    this.model.showAddQuestionButton ? surveyReactUi.attachKey2click(React__namespace.createElement("div", { className: "svc-panel__add-new-question svc-action-button", onClick: function (e) {
-                            e.stopPropagation();
-                            _this.model.addNewQuestion();
-                        } },
-                        React__namespace.createElement(surveyReactUi.SvgIcon, { className: "svc-panel__add-new-question-icon", iconName: "icon-add_24x24", size: "auto" }),
-                        React__namespace.createElement("span", { className: "svc-add-new-item-button__text" }, this.model.addNewQuestionText))) : null)));
+                    this.model.showAddQuestionButton ? React__namespace.createElement(surveyReactUi.SurveyActionBar, { model: this.model.addQuestionActionsContainer }) : null)));
         };
         PanelAdornerComponent.prototype.disableTabStop = function () {
             return true;
         };
+        PanelAdornerComponent.prototype.createQuestionViewModel = function (props) {
+            return new surveyCreatorCore.PanelAdornerViewModel(props.componentData, props.question, null);
+        };
         PanelAdornerComponent.prototype.renderFooter = function () {
             return (React__namespace.createElement(React__namespace.Fragment, null,
-                !this.model.isEmptyElement && this.model.element.isPanel && this.model.showAddQuestionButton ? (React__namespace.createElement("div", { className: "svc-panel__add-new-question-container" },
-                    React__namespace.createElement("div", { className: "svc-panel__question-type-selector-popup" },
-                        React__namespace.createElement(surveyReactUi.Popup, { model: this.model.questionTypeSelectorModel.popupModel })),
-                    React__namespace.createElement("div", { className: "svc-panel__add-new-question-wrapper" },
-                        React__namespace.createElement(AddQuestionButtonComponent, { item: { data: this.model }, buttonClass: "svc-action-button", renderPopup: false })))) : null,
+                !this.model.isEmptyElement && this.model.element.isPanel && this.model.showAddQuestionButton ? (React__namespace.createElement(surveyReactUi.SurveyActionBar, { model: this.model.addQuestionActionsContainer, handleClick: false })) : null,
                 _super.prototype.renderFooter.call(this)));
         };
         return PanelAdornerComponent;
@@ -1208,20 +1194,8 @@
             _super.prototype.componentDidMount.call(this);
             this.model.root = this.rootRef.current;
         };
-        LogoImageComponent.prototype.renderChooseButton = function () {
-            var _this = this;
-            return surveyReactUi.attachKey2click(React__namespace.createElement("span", { className: "svc-context-button", onClick: function () { return _this.model.chooseFile(_this.model); } },
-                React__namespace.createElement(surveyReactUi.SvgIcon, { size: "auto", iconName: "icon-choosefile" })));
-        };
-        LogoImageComponent.prototype.renderClearButton = function () {
-            var _this = this;
-            return surveyReactUi.attachKey2click(React__namespace.createElement("span", { className: "svc-context-button svc-context-button--danger", onClick: function () { return _this.model.remove(_this.model); } },
-                React__namespace.createElement(surveyReactUi.SvgIcon, { size: "auto", iconName: "icon-clear" })));
-        };
         LogoImageComponent.prototype.renderButtons = function () {
-            return (React__namespace.createElement("div", { className: "svc-context-container svc-logo-image-controls" },
-                this.renderChooseButton(),
-                this.renderClearButton()));
+            return React__namespace.createElement(surveyReactUi.SurveyActionBar, { model: this.model.actionsContainer });
         };
         LogoImageComponent.prototype.renderImage = function () {
             return React__namespace.createElement("div", { className: this.model.containerCss },
@@ -1417,19 +1391,19 @@
             _super.prototype.componentWillUnmount.call(this);
             this.props.item.setRootElement(undefined);
         };
+        ItemValueAdornerComponent.prototype.renderButton = function (action) {
+            return surveyReactUi.ReactElementFactory.Instance.createElement("sv-action-bar-item", {
+                item: action,
+            });
+        };
         ItemValueAdornerComponent.prototype.render = function () {
             var _this = this;
             this.model.item = this.props.item;
-            var button = this.model.allowAdd ? (surveyReactUi.attachKey2click(React__namespace.createElement("span", { role: "button", className: "svc-item-value-controls__button svc-item-value-controls__add", "aria-label": this.model.tooltip, onClick: function () {
-                    _this.model.add(_this.model);
-                    _this.model.isNew = false;
-                } },
-                React__namespace.createElement(surveyReactUi.SvgIcon, { size: "auto", iconName: "icon-add_16x16", title: this.model.tooltip })))) : (React__namespace.createElement(React__namespace.Fragment, null,
+            var button = this.model.allowAdd ? (this.renderButton(this.model.addAction)) : (React__namespace.createElement(React__namespace.Fragment, null,
                 " ",
-                this.model.isDraggable ? (React__namespace.createElement("span", { className: "svc-item-value-controls__button svc-item-value-controls__drag" },
+                this.model.isDraggable ? (React__namespace.createElement("span", { className: "svc-item-value-controls__drag" },
                     React__namespace.createElement(surveyReactUi.SvgIcon, { className: "svc-item-value-controls__drag-icon", size: "auto", iconName: "icon-drag-24x24", title: this.model.dragTooltip }))) : null,
-                this.model.allowRemove ? surveyReactUi.attachKey2click(React__namespace.createElement("span", { role: "button", className: "svc-item-value-controls__button svc-item-value-controls__remove", "aria-label": this.model.tooltip, onClick: function () { return _this.model.remove(_this.model); } },
-                    React__namespace.createElement(surveyReactUi.SvgIcon, { size: "auto", iconName: "icon-remove_16x16", title: this.model.tooltip }))) : null));
+                this.model.allowRemove ? this.renderButton(this.model.removeAction) : null));
             var itemkey = this.props.element.key + (this.model.allowAdd ? "_new" : "");
             return (React__namespace.createElement(React__namespace.Fragment, null,
                 React__namespace.createElement("div", { ref: this.rootRef, className: "svc-item-value-wrapper" +
@@ -1445,19 +1419,13 @@
                 this.renderPanel()));
         };
         ItemValueAdornerComponent.prototype.renderPanelAction = function () {
-            var _this = this;
             if (!this.model.canShowPanel())
                 return null;
-            var isShowPanel = this.model.showPanel;
-            var icName = isShowPanel ? "icon-collapsepanel-16x16" : "icon-expandpanel-16x16";
-            var btn = surveyReactUi.attachKey2click(React__namespace.createElement("span", { role: "button", className: "svc-item-value-controls__button svc-item-value-controls__add svc-choice-elements-button", onClick: function () {
-                    _this.model.togglePanel();
-                } },
-                React__namespace.createElement(surveyReactUi.SvgIcon, { size: "auto", iconName: icName })));
+            var btn = this.renderButton(this.model.expandPanelAction);
             return React__namespace.createElement("div", { className: "svc-item-value-controls svc-choice-elements-button-container" }, btn);
         };
         ItemValueAdornerComponent.prototype.renderPanel = function () {
-            if (!this.model.showPanel)
+            if (!this.model.renderedShowPanel)
                 return null;
             var creator = this.model.creator;
             var survey = creator.survey;
@@ -1513,14 +1481,11 @@
                 React__namespace.createElement(surveyReactUi.LoadingIndicatorComponent, null));
         };
         ImageItemValueAdornerComponent.prototype.renderNewItemControls = function () {
-            var _this = this;
-            var addButton = surveyReactUi.attachKey2click(React__namespace.createElement("span", { className: this.model.addButtonCss, onClick: function () { return _this.model.chooseNewFile(_this.model); } }, this.model.showChooseButtonAsIcon ?
-                React__namespace.createElement(surveyReactUi.SvgIcon, { size: "auto", iconName: "icon-add-lg", title: this.model.addFileTitle }) :
-                React__namespace.createElement("span", null, this.model.chooseImageText)));
+            var controls = React__namespace.createElement(surveyReactUi.SurveyActionBar, { model: this.model.actionsContainer });
             var placeholder = this.model.showPlaceholder ? React__namespace.createElement("span", { className: "svc-image-item-value__placeholder" }, this.model.placeholderText) : null;
             return React__namespace.createElement(React__namespace.Fragment, null,
                 placeholder,
-                addButton);
+                controls);
         };
         ImageItemValueAdornerComponent.prototype.render = function () {
             var _this = this;
@@ -1542,17 +1507,7 @@
             else {
                 content = (React__namespace.createElement(React__namespace.Fragment, null,
                     React__namespace.createElement("div", { className: "svc-image-item-value__item" }, this.props.element),
-                    this.model.isDraggable && this.model.canRenderControls ?
-                        React__namespace.createElement("span", { className: "svc-context-button svc-image-item-value-controls__drag-area-indicator", onPointerDown: function (event) { return _this.model.onPointerDown(event); } },
-                            React__namespace.createElement(surveyReactUi.SvgIcon, { size: "auto", iconName: "icon-drag-24x24" }))
-                        : null,
-                    this.model.canRenderControls ?
-                        React__namespace.createElement("div", { className: "svc-context-container svc-image-item-value-controls" },
-                            this.model.allowRemove && !this.model.isUploading ? surveyReactUi.attachKey2click(React__namespace.createElement("span", { className: "svc-context-button", onClick: function () { return _this.model.chooseFile(_this.model); } },
-                                React__namespace.createElement(surveyReactUi.SvgIcon, { role: "button", size: "auto", iconName: "icon-choosefile", title: this.model.selectFileTitle }))) : null,
-                            this.model.allowRemove && !this.model.isUploading ? surveyReactUi.attachKey2click(React__namespace.createElement("span", { className: "svc-context-button svc-context-button--danger", onClick: function () { return _this.model.remove(_this.model); } },
-                                React__namespace.createElement(surveyReactUi.SvgIcon, { role: "button", size: "auto", iconName: "icon-delete", title: this.model.removeFileTitle }))) : null)
-                        : null));
+                    this.model.canRenderControls ? React__namespace.createElement(surveyReactUi.SurveyActionBar, { model: this.model.topActionsContainer }) : null));
             }
             return (React__namespace.createElement("div", { ref: this.rootRef, className: this.model.getRootCss(), key: this.props.element.key, "data-sv-drop-target-item-value": this.model.isDraggable ? this.model.item.value : undefined, onPointerDown: function (event) { return _this.model.onPointerDown(event); }, onDragStart: this.preventDragHandler, onDrop: this.model.onDrop, onDragEnter: this.model.onDragEnter, onDragOver: this.model.onDragOver, onDragLeave: this.model.onDragLeave },
                 React__namespace.createElement("div", { className: "svc-image-item-value-wrapper__ghost", style: imageStyle }),
@@ -1568,6 +1523,21 @@
         };
         return ImageItemValueAdornerComponent;
     }(CreatorModelElement));
+    var ImageItemDragAction = /** @class */ (function (_super) {
+        __extends(ImageItemDragAction, _super);
+        function ImageItemDragAction() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ImageItemDragAction.prototype.renderElement = function () {
+            var _this = this;
+            return React__namespace.createElement("span", { className: this.props.item.getActionBarItemCss(), onPointerDown: function (event) { return _this.props.item.data.model.onPointerDown(event); } },
+                React__namespace.createElement(surveyReactUi.SvgIcon, { size: "auto", iconName: this.props.item.iconName, className: this.props.item.cssClasses.itemIcon }));
+        };
+        return ImageItemDragAction;
+    }(surveyReactUi.SurveyElementBase));
+    surveyReactUi.ReactElementFactory.Instance.registerElement("svc-image-item-drag-action", function (props) {
+        return React__namespace.createElement(ImageItemDragAction, props);
+    });
     surveyReactUi.ReactElementFactory.Instance.registerElement("svc-image-item-value", function (props) {
         return React__namespace.createElement(ImageItemValueAdornerComponent, props);
     });
@@ -1606,8 +1576,9 @@
             var _this = this;
             var controls = null;
             if (!!this.model.isSupportCellEditor) {
-                controls = React__namespace.createElement("div", { className: "svc-matrix-cell__question-controls" }, surveyReactUi.attachKey2click(React__namespace.createElement("span", { className: "svc-matrix-cell__question-controls-button svc-context-button", onClick: function (event) { return _this.model.editQuestion(_this.model, event); } },
-                    React__namespace.createElement(surveyReactUi.SvgIcon, { size: "auto", iconName: "icon-edit" }))));
+                controls = React__namespace.createElement("div", { className: "svc-matrix-cell__question-controls" }, surveyReactUi.ReactElementFactory.Instance.createElement("sv-action-bar-item", {
+                    item: this.model.editAction,
+                }));
             }
             return (React__namespace.createElement("div", { className: "svc-matrix-cell", tabIndex: -1, key: this.props.element.key, onClick: function (e) { return !_this.props.question && _this.model.selectContext(_this.model, e); }, onMouseOut: function (e) { return _this.model.hover(e.nativeEvent, e.currentTarget); }, onMouseOver: function (e) { return _this.model.hover(e.nativeEvent, e.currentTarget); } },
                 React__namespace.createElement("div", { className: "svc-matrix-cell--selected" + (this.model.isSelected ? " svc-visible" : "") }),
@@ -1757,7 +1728,7 @@
             });
             return (React__namespace.createElement("div", { className: item.css, key: item.id, ref: this.rootRef },
                 (item.needSeparator && !this.creator.toolbox.showCategoryTitles) ? (React__namespace.createElement("div", { className: "svc-toolbox__category-separator" })) : null,
-                React__namespace.createElement("div", { className: "svc-toolbox__tool-content sv-action__content", onPointerDown: function (event) {
+                React__namespace.createElement("div", { className: "svc-toolbox__tool-content", onPointerDown: function (event) {
                         event.persist();
                         _this.model.onPointerDown(event);
                     } }, itemComponent)));
@@ -2243,11 +2214,10 @@
             var model = this.props.model;
             if (!model.visible)
                 return null;
-            var button = surveyReactUi.attachKey2click(React__namespace.createElement("div", { className: model.buttonClassName, title: model.tooltip, onClick: function () { model.action(); } },
-                React__namespace.createElement("div", { className: "svc-menu-action__icon" },
-                    React__namespace.createElement("div", { className: "svc-menu-action__icon-container" },
-                        React__namespace.createElement(surveyReactUi.SvgIcon, { iconName: model.iconName, size: "auto" })))), model);
-            return (React__namespace.createElement("div", { className: "svc-menu-action" }, button));
+            var itemComponent = surveyReactUi.ReactElementFactory.Instance.createElement(this.props.model.component || "sv-action-bar-item", {
+                item: this.props.model,
+            });
+            return (React__namespace.createElement("div", { className: "svc-sidebar-tabs__item" }, itemComponent));
         };
         return TabButtonComponent;
     }(surveyReactUi.SurveyElementBase));
@@ -2343,7 +2313,7 @@
         };
         SideBarPropertyGridHeader.prototype.renderElement = function () {
             var _this = this;
-            var button = surveyReactUi.attachKey2click(React__namespace.createElement("div", { className: this.objectSelectionAction.buttonClassName, onClick: function () { return _this.objectSelectionAction.action(); } },
+            var button = surveyReactUi.attachKey2click(React__namespace.createElement("div", { className: this.objectSelectionAction.getActionBarItemCss() + " svc-sidebar__header-object-selector", onClick: function () { return _this.objectSelectionAction.action(); } },
                 React__namespace.createElement("div", { className: "svc-sidebar__header-caption" },
                     React__namespace.createElement("span", { className: "svc-sidebar__header-title" }, this.objectSelectionAction.title),
                     React__namespace.createElement("span", { className: "svc-sidebar__header-subtitle" }, this.objectSelectionAction.tooltip))), this.props.model);
@@ -2468,6 +2438,31 @@
         return React__namespace.createElement(SidebarComponent, props);
     });
 
+    var SideBarLaunchCard = /** @class */ (function (_super) {
+        __extends(SideBarLaunchCard, _super);
+        function SideBarLaunchCard() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        SideBarLaunchCard.prototype.render = function () {
+            var model = this.props.model;
+            if (!model)
+                return null;
+            return (React__namespace.createElement("div", { className: "spg-launch" },
+                React__namespace.createElement("button", { className: "spg-launch__card", onClick: model.onClick },
+                    React__namespace.createElement("div", { className: "spg-launch__container" },
+                        React__namespace.createElement("div", { className: "spg-launch__text" }, model.title),
+                        React__namespace.createElement("div", { className: "spg-launch__text2" }, model.description)),
+                    React__namespace.createElement("div", { className: "spg-launch__icon" },
+                        React__namespace.createElement("div", { className: "spg-launch__chevron-right-16-x-16" },
+                            React__namespace.createElement("div", { className: "spg-launch__icon2" },
+                                React__namespace.createElement(surveyReactUi.SvgIcon, { size: "auto", iconName: "chevrondown-24x24" })))))));
+        };
+        return SideBarLaunchCard;
+    }(React__namespace.Component));
+    surveyReactUi.ReactElementFactory.Instance.registerElement("svc-side-bar-launch-card", function (props) {
+        return React__namespace.createElement(SideBarLaunchCard, props);
+    });
+
     var TranslationLineSkeleton = /** @class */ (function (_super) {
         __extends(TranslationLineSkeleton, _super);
         function TranslationLineSkeleton() {
@@ -2763,10 +2758,8 @@
         };
         SurveyPageNavigator.prototype.componentDidMount = function () {
             _super.prototype.componentDidMount.call(this);
-            if (this.props.pageEditMode !== "bypage") {
-                var el = this.containerRef.current;
-                this.model.attachToUI(el);
-            }
+            var el = this.containerRef.current;
+            this.model.attachToUI(el);
         };
         SurveyPageNavigator.prototype.componentWillUnmount = function () {
             _super.prototype.componentWillUnmount.call(this);
@@ -2774,15 +2767,8 @@
             this.model.setScrollableContainer(undefined);
         };
         SurveyPageNavigator.prototype.renderElement = function () {
-            var _this = this;
-            var className = "svc-page-navigator__selector svc-page-navigator__button";
-            if (this.model.isPopupOpened)
-                className += " svc-page-navigator__button--pressed";
             return (React__namespace.createElement("div", { className: "svc-page-navigator", ref: this.containerRef, style: { display: this.model.visible ? "flex" : "none" } },
-                React__namespace.createElement("div", null,
-                    surveyReactUi.attachKey2click(React__namespace.createElement("div", { role: "button", className: className, onClick: function () { return _this.model.togglePageSelector(); }, title: this.model.pageSelectorCaption },
-                        React__namespace.createElement(surveyReactUi.SvgIcon, { className: "svc-page-navigator__button-icon", iconName: this.model.icon, size: "auto", title: this.model.pageSelectorCaption }))),
-                    React__namespace.createElement(surveyReactUi.Popup, { model: this.model.popupModel })),
+                React__namespace.createElement("div", null, surveyReactUi.ReactElementFactory.Instance.createElement("sv-action-bar-item-dropdown", { item: this.model.selectorAction })),
                 React__namespace.createElement("div", null, this.model.visibleItems.map(function (item) { return (React__namespace.createElement(SurveyPageNavigatorItem, { key: item.id, item: item })); }))));
         };
         return SurveyPageNavigator;
@@ -3091,35 +3077,6 @@
         return React__namespace.createElement(TabJsonEditorAceComponent, props);
     });
 
-    var TabLogicAddButtonComponent = /** @class */ (function (_super) {
-        __extends(TabLogicAddButtonComponent, _super);
-        function TabLogicAddButtonComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(TabLogicAddButtonComponent.prototype, "model", {
-            get: function () {
-                return this.props.button;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TabLogicAddButtonComponent.prototype.getStateElement = function () {
-            return this.model;
-        };
-        TabLogicAddButtonComponent.prototype.renderElement = function () {
-            var _this = this;
-            var buttonClassName = "svc-logic-tab__content-action svc-btn" + ((this.model.enabled !== undefined && !this.model.enabled) ? " svc-logic-tab__content-action--disabled" : "");
-            return surveyReactUi.attachKey2click(React__namespace.createElement("div", { role: "button", onClick: function (e) {
-                    e.stopPropagation();
-                    _this.model.action();
-                }, className: buttonClassName, title: this.model.title },
-                React__namespace.createElement("span", { className: "svc-btn__text" }, this.model.title)));
-        };
-        return TabLogicAddButtonComponent;
-    }(surveyReactUi.SurveyElementBase));
-    surveyReactUi.ReactElementFactory.Instance.registerElement("svc-tab-logic-add-button", function (props) {
-        return React__namespace.createElement(TabLogicAddButtonComponent, props);
-    });
     var TabLogicComponent = /** @class */ (function (_super) {
         __extends(TabLogicComponent, _super);
         function TabLogicComponent() {
@@ -3143,15 +3100,15 @@
         };
         TabLogicComponent.prototype.renderViewContent = function () {
             var logicTabClassName = "svc-plugin-tab__content svc-logic-tab svc-logic-tab__content " + (this.model.hasItems ? "" : "svc-logic-tab--empty");
-            var addLogic = !this.model.readOnly ? React__namespace.createElement(TabLogicAddButtonComponent, { button: this.model.addNewButton }) : undefined;
+            var actions = !this.model.readOnly ? React__namespace.createElement(surveyReactUi.SurveyActionBar, { model: this.model.contentActionsContainer }) : undefined;
             return (React__namespace.createElement(React.Fragment, null,
                 React__namespace.createElement("div", { className: logicTabClassName }, this.model.hasItems ?
                     (React__namespace.createElement(React__namespace.Fragment, null,
                         React__namespace.createElement(surveyReactUi.Survey, { model: this.model.itemsSurvey }),
-                        addLogic))
+                        actions))
                     : (React__namespace.createElement("div", { className: "svc-logic-tab__content-empty" },
                         React__namespace.createElement(SurfacePlaceholder, { name: "logic", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText }),
-                        addLogic)))));
+                        actions)))));
         };
         return TabLogicComponent;
     }(surveyReactUi.SurveyElementBase));
@@ -3159,6 +3116,12 @@
         return React__namespace.createElement(TabLogicComponent, props);
     });
 
+    function simulatorShellStyle(overlayHeight) {
+        var _a;
+        return overlayHeight
+            ? (_a = {}, _a["--sv-popup-overlay-height"] = overlayHeight, _a)
+            : {};
+    }
     var SurveySimulator = /** @class */ (function (_super) {
         __extends(SurveySimulator, _super);
         function SurveySimulator() {
@@ -3174,9 +3137,22 @@
         SurveySimulator.prototype.getStateElement = function () {
             return this.model;
         };
+        SurveySimulator.prototype.componentDidMount = function () {
+            _super.prototype.componentDidMount.call(this);
+            this.model.queueSurveyLayoutRefresh();
+        };
+        SurveySimulator.prototype.componentDidUpdate = function (prevProps, prevState) {
+            _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+            this.model.queueSurveyLayoutRefresh();
+        };
+        SurveySimulator.prototype.componentWillUnmount = function () {
+            this.model.cancelSurveyLayoutRefresh();
+            _super.prototype.componentWillUnmount.call(this);
+        };
         SurveySimulator.prototype.renderElement = function () {
             var _this = this;
             var mainSimulatorClass = this.model.getRootCss();
+            var shellStyle = simulatorShellStyle(this.model.popupOverlayHeight);
             if (!this.model.survey) {
                 return React__namespace.createElement("div", { className: mainSimulatorClass });
             }
@@ -3193,47 +3169,18 @@
                                     this.model.simulatorFrame.scale +
                                     ") translate(-50%, -50%)"
                             } },
-                            React__namespace.createElement("div", { className: "svd-simulator-content" },
+                            React__namespace.createElement("div", { className: "svd-simulator-content", style: shellStyle },
                                 React__namespace.createElement(surveyReactUi.Survey, { model: this.model.survey }))))));
             }
             else {
                 return (React__namespace.createElement("div", { className: mainSimulatorClass },
-                    React__namespace.createElement("div", { className: "svd-simulator-content" },
+                    React__namespace.createElement("div", { className: "svd-simulator-content", style: shellStyle },
                         React__namespace.createElement(surveyReactUi.Survey, { model: this.model.survey }))));
             }
         };
         return SurveySimulator;
     }(surveyReactUi.SurveyElementBase));
 
-    var TabPreviewTestSurveyAgainComponent = /** @class */ (function (_super) {
-        __extends(TabPreviewTestSurveyAgainComponent, _super);
-        function TabPreviewTestSurveyAgainComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(TabPreviewTestSurveyAgainComponent.prototype, "model", {
-            get: function () {
-                return this.props.model.testAgainAction;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TabPreviewTestSurveyAgainComponent.prototype.getStateElement = function () {
-            return this.model;
-        };
-        TabPreviewTestSurveyAgainComponent.prototype.renderElement = function () {
-            var _this = this;
-            var buttonClassName = "svc-preview__test-again svc-btn";
-            return surveyReactUi.attachKey2click(React__namespace.createElement("div", { role: "button", onClick: function (e) {
-                    e.stopPropagation();
-                    _this.model.action();
-                }, className: buttonClassName, title: this.model.title },
-                React__namespace.createElement("span", { className: "svc-btn__text" }, this.model.title)));
-        };
-        return TabPreviewTestSurveyAgainComponent;
-    }(surveyReactUi.SurveyElementBase));
-    surveyReactUi.ReactElementFactory.Instance.registerElement("svc-complete-page", function (props) {
-        return React__namespace.createElement(TabPreviewTestSurveyAgainComponent, props);
-    });
     var TabPreviewSurveyComponent = /** @class */ (function (_super) {
         __extends(TabPreviewSurveyComponent, _super);
         function TabPreviewSurveyComponent(props) {
@@ -3258,7 +3205,7 @@
                 this.model.showResults ? React__namespace.createElement(SurveyResults, { survey: this.model.simulator.survey }) : null));
         };
         TabPreviewSurveyComponent.prototype.renderElement = function () {
-            var tabContentClassName = "svc-creator-tab__content svc-test-tab__content" + (this.model.isPageToolbarVisible ? " svc-creator-tab__content--with-toolbar" : "");
+            var tabContentClassName = "svc-creator-tab__content svc-test-tab__content " + this.model.tabContentAdditionalCss;
             return (React__namespace.createElement("div", { className: tabContentClassName },
                 this.model.simulator.survey.isEmpty ? this.renderPlaceholder() : this.renderSimulator(),
                 this.getBottomToolbar()));
@@ -3322,7 +3269,7 @@
                 this.model.showResults ? React__namespace.createElement(SurveyResults, { survey: this.model.simulator.survey }) : null));
         };
         TabThemeSurveyComponent.prototype.renderElement = function () {
-            var tabContentClassName = "svc-creator-tab__content svc-test-tab__content" + (this.model.isPageToolbarVisible ? " svc-creator-tab__content--with-toolbar" : "");
+            var tabContentClassName = "svc-creator-tab__content svc-test-tab__content " + this.model.tabContentAdditionalCss;
             return (React__namespace.createElement("div", { className: tabContentClassName },
                 this.model.simulator.survey.isEmpty ? this.renderPlaceholder() : this.renderSimulator(),
                 this.getBottomToolbar()));
@@ -3444,9 +3391,17 @@
             return _super.call(this, props) || this;
         }
         ComponentContainer.prototype.render = function () {
-            return (React__namespace.createElement("div", { className: this.props.model.cssClass }, this.props.model.elements.map(function (element, index) {
+            var children = this.props.model.elements.map(function (element, index) {
                 return surveyReactUi.ReactElementFactory.Instance.createElement(element.componentName, __assign(__assign({}, element.componentData), { key: index }));
-            })));
+            });
+            var inner = this.props.model.scrollable ? React__namespace.createElement(surveyReactUi.Scroll, null,
+                " ",
+                children,
+                " ") : children;
+            return (this.props.model.wrapped ? React__namespace.createElement("div", { className: this.props.model.cssClass },
+                " ",
+                inner,
+                " ") : React__namespace.createElement(React__namespace.Fragment, null, inner));
         };
         return ComponentContainer;
     }(React__namespace.Component));
@@ -3454,6 +3409,25 @@
         return React__namespace.createElement(ComponentContainer, props);
     });
 
+    var IconItem = /** @class */ (function (_super) {
+        __extends(IconItem, _super);
+        function IconItem() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        IconItem.prototype.render = function () {
+            var item = this.props.item;
+            if (!item)
+                return null;
+            return (React__namespace.createElement("div", { className: "svc-icon-item" },
+                React__namespace.createElement(surveyReactUi.SvgIcon, { className: "svc-icon-item__icon", size: "auto", iconName: item.value }),
+                React__namespace.createElement("span", { className: "svc-icon-item__text" }, item.title)));
+        };
+        return IconItem;
+    }(React__namespace.Component));
+    surveyReactUi.ReactElementFactory.Instance.registerElement("svc-presets-icon-item", function (props) {
+        return React__namespace.createElement(IconItem, props);
+    });
+
     var SwitcherComponent = /** @class */ (function (_super) {
         __extends(SwitcherComponent, _super);
         function SwitcherComponent() {
@@ -3512,6 +3486,30 @@
         return React__namespace.createElement(ItemTemplateComponent$1, props);
     });
 
+    var TabContainerComponent = /** @class */ (function (_super) {
+        __extends(TabContainerComponent, _super);
+        function TabContainerComponent(props) {
+            return _super.call(this, props) || this;
+        }
+        TabContainerComponent.prototype.getStateElement = function () {
+            return this.model;
+        };
+        Object.defineProperty(TabContainerComponent.prototype, "model", {
+            get: function () {
+                return this.props.data;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TabContainerComponent.prototype.renderElement = function () {
+            return React__namespace.createElement(ComponentContainer, { model: this.model.containerModel });
+        };
+        return TabContainerComponent;
+    }(surveyReactUi.SurveyElementBase));
+    surveyReactUi.ReactElementFactory.Instance.registerElement("svc-tab-container", function (props) {
+        return React__namespace.createElement(TabContainerComponent, props);
+    });
+
     var SurveyQuestionSpinEditor = /** @class */ (function (_super) {
         __extends(SurveyQuestionSpinEditor, _super);
         function SurveyQuestionSpinEditor(props) {
@@ -3539,15 +3537,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 +3620,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 +3635,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 +3664,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 +3738,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.4");
+    surveyCore.checkLibraryVersion("".concat("3.0.0-beta.4"), "survey-creator-react");
 
     Object.defineProperty(exports, "PropertyGridEditorCollection", {
         enumerable: true,
@@ -3733,10 +3779,12 @@
     });
     exports.ActionButton = ActionButton;
     exports.AdaptiveToolbox = AdaptiveToolbox;
+    exports.AddQuestionButtonComponent = AddQuestionButtonComponent;
     exports.CellQuestionAdornerComponent = CellQuestionAdornerComponent;
     exports.CellQuestionDropdownAdornerComponent = CellQuestionDropdownAdornerComponent;
     exports.ComponentContainer = ComponentContainer;
     exports.CreatorSurveyPageComponent = CreatorSurveyPageComponent;
+    exports.IconItem = IconItem;
     exports.ImageItemValueAdornerComponent = ImageItemValueAdornerComponent;
     exports.ItemValueAdornerComponent = ItemValueAdornerComponent;
     exports.LogoImageComponent = LogoImageComponent;
@@ -3759,6 +3807,7 @@
     exports.RowWrapper = RowWrapper;
     exports.SearchComponent = SearchComponent;
     exports.SideBarDefaultHeader = SideBarDefaultHeader;
+    exports.SideBarLaunchCard = SideBarLaunchCard;
     exports.SidebarComponent = SidebarComponent;
     exports.SurveyCreator = SurveyCreator;
     exports.SurveyCreatorComponent = SurveyCreatorComponent;
@@ -3773,21 +3822,22 @@
     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.TabContainerComponent = TabContainerComponent;
     exports.TabDesignerComponent = TabDesignerComponent;
     exports.TabJsonEditorAceComponent = TabJsonEditorAceComponent;
     exports.TabJsonEditorErrorsComponent = TabJsonEditorErrorsComponent;
     exports.TabJsonEditorTextareaComponent = TabJsonEditorTextareaComponent;
-    exports.TabLogicAddButtonComponent = TabLogicAddButtonComponent;
     exports.TabLogicComponent = TabLogicComponent;
     exports.TabPreviewSurveyComponent = TabPreviewSurveyComponent;
-    exports.TabPreviewTestSurveyAgainComponent = TabPreviewTestSurveyAgainComponent;
     exports.TabThemeSurveyComponent = TabThemeSurveyComponent;
     exports.TabTranslationComponent = TabTranslationComponent;
     exports.TabbedMenuComponent = TabbedMenuComponent;