survey-creator-js 3.0.0-beta.3 → 3.0.0-beta.4

package/fesm/survey-creator-js.mjs

@@ -1,18 +1,15 @@
 /*!
- * SurveyJS Creator v3.0.0-beta.3
+ * 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
  */
 
-import * as React from 'react';
-import { createElement, Fragment } from 'react';
-import { ReactElementFactory, SurveyElementBase, attachKey2click, SvgIcon, Survey, SvgBundleComponent, PopupModal, SurveyActionBar, NotifierComponent, ReactQuestionFactory, SurveyLocStringViewer, TitleElement, ReactSurveyElementsWrapper, LoadingIndicatorComponent, SurveyPage, Popup, LogoImage, SurveyQuestionElementBase, SurveyQuestion, SurveyPanel, Scroll, CharacterCounterComponent, SurveyQuestionDropdown, SurveyHeader, List, SurveyQuestionText } from 'survey-react-ui';
-import { assign, SurveyCreatorModel, RowViewModel, QuestionAdornerViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, QuestionRatingAdornerViewModel, PageAdorner, LogoImageViewModel, editorLocalization, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, MatrixCellWrapperViewModel, SurveyResultsModel, ToolboxToolViewModel, editableStringRendererName, StringEditorViewModelBase, initLogicOperator, PageNavigatorViewModel } from 'survey-creator-core';
+import * as React from 'survey-js-ui';
+import { ReactElementFactory, SurveyElementBase, attachKey2click, SvgIcon, Survey, SvgBundleComponent, PopupModal, SurveyActionBar, NotifierComponent, ReactQuestionFactory, SurveyLocStringViewer, TitleElement, ReactSurveyElementsWrapper, LoadingIndicatorComponent, SurveyPage, LogoImage, SurveyQuestionElementBase, SurveyQuestion, SurveyPanel, createElement, Popup, Scroll, CharacterCounterComponent, SurveyQuestionDropdown, SurveyHeader, List, Fragment, SurveyQuestionText, preact } from 'survey-js-ui';
+import { assign, SurveyCreatorModel, RowViewModel, QuestionAdornerViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, QuestionRatingAdornerViewModel, PageAdorner, PanelAdornerViewModel, LogoImageViewModel, editorLocalization, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, MatrixCellWrapperViewModel, SurveyResultsModel, ToolboxToolViewModel, editableStringRendererName, StringEditorViewModelBase, initLogicOperator, PageNavigatorViewModel } from 'survey-creator-core';
 export { PropertyGridEditorCollection, SurveyLogic, SurveyLogicUI, SurveyQuestionEditorDefinition, ToolboxToolViewModel, editorLocalization, localization, settings, svgBundle } from 'survey-creator-core';
-import * as ReactDOM from 'react-dom';
 import { CssClassBuilder, settings, RendererFactory, unwrap, checkLibraryVersion } from 'survey-core';
-import { preact } from 'survey-js-ui';
 
 class TabbedMenuComponent extends SurveyElementBase {
     get model() {
@@ -65,10 +62,10 @@ class TabbedMenuItemWrapper extends SurveyElementBase {
         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" : "");
         const component = ReactElementFactory.Instance.createElement(this.item.component || "svc-tabbed-menu-item", { item: this.item });
         return (React.createElement("span", { key: this.item.id, className: css, ref: this.ref },
-            React.createElement("div", { className: "sv-action__content" }, component)));
+            React.createElement("div", { className: "svc-tabbed-menu-item-container__content" }, component)));
     }
     componentDidMount() {
         super.componentDidMount();
@@ -82,8 +79,8 @@ class TabbedMenuItemWrapper extends SurveyElementBase {
                 }
             };
             queueMicrotask(() => {
-                if (ReactDOM["flushSync"]) {
-                    ReactDOM["flushSync"](() => {
+                if (React["flushSync"]) {
+                    React["flushSync"](() => {
                         update();
                     });
                 }
@@ -206,7 +203,8 @@ class SurveyCreatorComponent extends SurveyElementBase {
             : ReactElementFactory.Instance.createElement(tab.componentContent, {
                 creator: creator,
                 survey: creator.survey,
-                data: tab.data.model
+                data: tab.data.model,
+                model: tab.data.model
             });
         const className = "svc-creator-tab" + (creator.toolboxLocation == "right" ? " svc-creator__toolbox--right" : "");
         return (React.createElement("div", { role: "tabpanel", key: tab.id, id: "scrollableDiv-" + tab.id, "aria-labelledby": "tab-" + tab.id, className: className }, component));
@@ -599,8 +597,9 @@ class QuestionDropdownAdornerComponent extends QuestionAdornerComponent {
                     isChecked: this.question.value === item.value
                 }), this.question, item))))),
                 this.dropdownModel.needToCollapse ?
-                    React.createElement(ActionButton, { click: this.dropdownModel.switchCollapse, text: this.dropdownModel.getButtonText(), allowBubble: true }) :
-                    null)));
+                    ReactElementFactory.Instance.createElement("sv-action-bar-item", {
+                        item: this.dropdownModel.collapseAction,
+                    }) : null)));
     }
 }
 ReactElementFactory.Instance.registerElement("svc-dropdown-question", (props) => {
@@ -631,8 +630,7 @@ class QuestionImageAdornerComponent extends QuestionAdornerComponent {
                 React.createElement(LoadingIndicatorComponent, null))));
     }
     renderChooseButton() {
-        return (React.createElement("div", { className: "svc-image-question-controls" }, this.model.allowEdit ? attachKey2click(React.createElement("span", { className: "svc-context-button", onClick: () => this.imageModel.chooseFile(this.imageModel) },
-            React.createElement(SvgIcon, { size: "auto", iconName: "icon-choosefile" }))) : null));
+        return React.createElement(SurveyActionBar, { model: this.imageModel.imageActionsContainer });
     }
     renderElementPlaceholder() {
         return this.imageModel.isUploading ? this.renderLoadingPlaceholder() : this.renderChooseButton();
@@ -683,11 +681,7 @@ class QuestionRatingAdornerComponent extends CreatorModelElement {
         const model = this.ratingModel;
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: "svc-rating-question-content" },
-                React.createElement("div", { className: model.controlsClassNames },
-                    model.allowRemove ? attachKey2click(React.createElement("span", { role: "button", className: model.removeClassNames, "aria-label": model.removeTooltip, onClick: () => model.removeItem(model) },
-                        React.createElement(SvgIcon, { size: "auto", iconName: "icon-remove_16x16", title: model.removeTooltip }))) : null,
-                    model.allowAdd ? attachKey2click(React.createElement("span", { role: "button", className: model.addClassNames, "aria-label": model.addTooltip, onClick: () => model.addItem(model) },
-                        React.createElement(SvgIcon, { size: "auto", iconName: "icon-add_16x16", title: model.addTooltip }))) : null),
+                React.createElement(SurveyActionBar, { model: model.rateActionsContainer }),
                 this.props.element)));
     }
 }
@@ -860,31 +854,24 @@ ReactElementFactory.Instance.registerElement("svc-page", (props) => {
 
 class AddQuestionButtonComponent extends SurveyElementBase {
     get model() {
-        return this.props.item.data;
+        return this.item.data;
+    }
+    get item() {
+        return this.props.item;
+    }
+    getStateElement() {
+        return this.item;
     }
     renderTypeSelector() {
-        const questionTypeSelectorModel = this.model.questionTypeSelectorModel;
-        return attachKey2click(React.createElement("button", { type: "button", onClick: (e) => {
-                e.stopPropagation();
-                questionTypeSelectorModel.action();
-            }, className: "svc-element__question-type-selector", title: this.model.addNewQuestionText, role: "button" },
-            React.createElement("span", { className: "svc-element__question-type-selector-icon" },
-                React.createElement(SvgIcon, { iconName: questionTypeSelectorModel.iconName, size: "auto", title: this.model.addNewQuestionText })),
-            this.props.renderPopup === undefined || this.props.renderPopup ?
-                React.createElement(Popup, { model: questionTypeSelectorModel.popupModel })
-                : null));
+        return React.createElement("div", { className: this.item.cssClasses.itemTypeSelector }, ReactElementFactory.Instance.createElement("sv-action-bar-item-dropdown", { item: this.model.questionTypeSelectorModel }));
     }
     renderElement() {
-        const addButtonClass = this.props.buttonClass || "svc-btn";
-        return React.createElement(React.Fragment, null,
-            attachKey2click(React.createElement("div", { className: "svc-element__add-new-question " + addButtonClass, onClick: (e) => {
-                    e.stopPropagation();
-                    this.model.addNewQuestion(this.model, new ReactMouseEvent(e));
-                }, onMouseOver: (e) => this.model.hoverStopper && this.model.hoverStopper(e.nativeEvent, e.currentTarget) },
-                React.createElement(SvgIcon, { className: "svc-panel__add-new-question-icon", iconName: "icon-add_24x24", size: "auto" }),
-                React.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.createElement(React.Fragment, null, attachKey2click(React.createElement("div", { className: this.item.getActionBarItemCss(), onClick: (e) => {
+                e.stopPropagation();
+                this.model.addNewQuestion(this.model, new ReactMouseEvent(e));
+            }, onMouseOver: (e) => this.model.hoverStopper && this.model.hoverStopper(e.nativeEvent, e.currentTarget) },
+            React.createElement("span", { className: this.item.getActionBarItemTitleCss() }, this.model.addNewQuestionText),
+            this.renderTypeSelector())));
     }
 }
 ReactElementFactory.Instance.registerElement("svc-add-new-question-btn", (props) => {
@@ -899,23 +886,17 @@ class PanelAdornerComponent extends QuestionAdornerComponent {
         return (React.createElement("div", { className: "svc-panel__placeholder_frame-wrapper" },
             React.createElement("div", { className: "svc-panel__placeholder_frame" },
                 React.createElement("div", { className: "svc-panel__placeholder" }, this.model.placeholderText),
-                this.model.showAddQuestionButton ? attachKey2click(React.createElement("div", { className: "svc-panel__add-new-question svc-action-button", onClick: (e) => {
-                        e.stopPropagation();
-                        this.model.addNewQuestion();
-                    } },
-                    React.createElement(SvgIcon, { className: "svc-panel__add-new-question-icon", iconName: "icon-add_24x24", size: "auto" }),
-                    React.createElement("span", { className: "svc-add-new-item-button__text" }, this.model.addNewQuestionText))) : null)));
+                this.model.showAddQuestionButton ? React.createElement(SurveyActionBar, { model: this.model.addQuestionActionsContainer }) : null)));
     }
     disableTabStop() {
         return true;
     }
+    createQuestionViewModel(props) {
+        return new PanelAdornerViewModel(props.componentData, props.question, null);
+    }
     renderFooter() {
         return (React.createElement(React.Fragment, null,
-            !this.model.isEmptyElement && this.model.element.isPanel && this.model.showAddQuestionButton ? (React.createElement("div", { className: "svc-panel__add-new-question-container" },
-                React.createElement("div", { className: "svc-panel__question-type-selector-popup" },
-                    React.createElement(Popup, { model: this.model.questionTypeSelectorModel.popupModel })),
-                React.createElement("div", { className: "svc-panel__add-new-question-wrapper" },
-                    React.createElement(AddQuestionButtonComponent, { item: { data: this.model }, buttonClass: "svc-action-button", renderPopup: false })))) : null,
+            !this.model.isEmptyElement && this.model.element.isPanel && this.model.showAddQuestionButton ? (React.createElement(SurveyActionBar, { model: this.model.addQuestionActionsContainer, handleClick: false })) : null,
             super.renderFooter()));
     }
 }
@@ -945,18 +926,8 @@ class LogoImageComponent extends CreatorModelElement {
         super.componentDidMount();
         this.model.root = this.rootRef.current;
     }
-    renderChooseButton() {
-        return attachKey2click(React.createElement("span", { className: "svc-context-button", onClick: () => this.model.chooseFile(this.model) },
-            React.createElement(SvgIcon, { size: "auto", iconName: "icon-choosefile" })));
-    }
-    renderClearButton() {
-        return attachKey2click(React.createElement("span", { className: "svc-context-button svc-context-button--danger", onClick: () => this.model.remove(this.model) },
-            React.createElement(SvgIcon, { size: "auto", iconName: "icon-clear" })));
-    }
     renderButtons() {
-        return (React.createElement("div", { className: "svc-context-container svc-logo-image-controls" },
-            this.renderChooseButton(),
-            this.renderClearButton()));
+        return React.createElement(SurveyActionBar, { model: this.model.actionsContainer });
     }
     renderImage() {
         return React.createElement("div", { className: this.model.containerCss },
@@ -1117,18 +1088,18 @@ class ItemValueAdornerComponent extends CreatorModelElement {
         super.componentWillUnmount();
         this.props.item.setRootElement(undefined);
     }
+    renderButton(action) {
+        return ReactElementFactory.Instance.createElement("sv-action-bar-item", {
+            item: action,
+        });
+    }
     render() {
         this.model.item = this.props.item;
-        const button = this.model.allowAdd ? (attachKey2click(React.createElement("span", { role: "button", className: "svc-item-value-controls__button svc-item-value-controls__add", "aria-label": this.model.tooltip, onClick: () => {
-                this.model.add(this.model);
-                this.model.isNew = false;
-            } },
-            React.createElement(SvgIcon, { size: "auto", iconName: "icon-add_16x16", title: this.model.tooltip })))) : (React.createElement(React.Fragment, null,
+        const button = this.model.allowAdd ? (this.renderButton(this.model.addAction)) : (React.createElement(React.Fragment, null,
             " ",
-            this.model.isDraggable ? (React.createElement("span", { className: "svc-item-value-controls__button svc-item-value-controls__drag" },
+            this.model.isDraggable ? (React.createElement("span", { className: "svc-item-value-controls__drag" },
                 React.createElement(SvgIcon, { className: "svc-item-value-controls__drag-icon", size: "auto", iconName: "icon-drag-24x24", title: this.model.dragTooltip }))) : null,
-            this.model.allowRemove ? attachKey2click(React.createElement("span", { role: "button", className: "svc-item-value-controls__button svc-item-value-controls__remove", "aria-label": this.model.tooltip, onClick: () => this.model.remove(this.model) },
-                React.createElement(SvgIcon, { size: "auto", iconName: "icon-remove_16x16", title: this.model.tooltip }))) : null));
+            this.model.allowRemove ? this.renderButton(this.model.removeAction) : null));
         const itemkey = this.props.element.key + (this.model.allowAdd ? "_new" : "");
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { ref: this.rootRef, className: "svc-item-value-wrapper" +
@@ -1146,16 +1117,11 @@ class ItemValueAdornerComponent extends CreatorModelElement {
     renderPanelAction() {
         if (!this.model.canShowPanel())
             return null;
-        const isShowPanel = this.model.showPanel;
-        const icName = isShowPanel ? "icon-collapsepanel-16x16" : "icon-expandpanel-16x16";
-        const btn = attachKey2click(React.createElement("span", { role: "button", className: "svc-item-value-controls__button svc-item-value-controls__add svc-choice-elements-button", onClick: () => {
-                this.model.togglePanel();
-            } },
-            React.createElement(SvgIcon, { size: "auto", iconName: icName })));
+        const btn = this.renderButton(this.model.expandPanelAction);
         return React.createElement("div", { className: "svc-item-value-controls svc-choice-elements-button-container" }, btn);
     }
     renderPanel() {
-        if (!this.model.showPanel)
+        if (!this.model.renderedShowPanel)
             return null;
         const creator = this.model.creator;
         const survey = creator.survey;
@@ -1203,13 +1169,11 @@ class ImageItemValueAdornerComponent extends CreatorModelElement {
             React.createElement(LoadingIndicatorComponent, null));
     }
     renderNewItemControls() {
-        const addButton = attachKey2click(React.createElement("span", { className: this.model.addButtonCss, onClick: () => this.model.chooseNewFile(this.model) }, this.model.showChooseButtonAsIcon ?
-            React.createElement(SvgIcon, { size: "auto", iconName: "icon-add-lg", title: this.model.addFileTitle }) :
-            React.createElement("span", null, this.model.chooseImageText)));
+        const controls = React.createElement(SurveyActionBar, { model: this.model.actionsContainer });
         const placeholder = this.model.showPlaceholder ? React.createElement("span", { className: "svc-image-item-value__placeholder" }, this.model.placeholderText) : null;
         return React.createElement(React.Fragment, null,
             placeholder,
-            addButton);
+            controls);
     }
     render() {
         this.model.item = this.props.item;
@@ -1230,17 +1194,7 @@ class ImageItemValueAdornerComponent extends CreatorModelElement {
         else {
             content = (React.createElement(React.Fragment, null,
                 React.createElement("div", { className: "svc-image-item-value__item" }, this.props.element),
-                this.model.isDraggable && this.model.canRenderControls ?
-                    React.createElement("span", { className: "svc-context-button svc-image-item-value-controls__drag-area-indicator", onPointerDown: (event) => this.model.onPointerDown(event) },
-                        React.createElement(SvgIcon, { size: "auto", iconName: "icon-drag-24x24" }))
-                    : null,
-                this.model.canRenderControls ?
-                    React.createElement("div", { className: "svc-context-container svc-image-item-value-controls" },
-                        this.model.allowRemove && !this.model.isUploading ? attachKey2click(React.createElement("span", { className: "svc-context-button", onClick: () => this.model.chooseFile(this.model) },
-                            React.createElement(SvgIcon, { role: "button", size: "auto", iconName: "icon-choosefile", title: this.model.selectFileTitle }))) : null,
-                        this.model.allowRemove && !this.model.isUploading ? attachKey2click(React.createElement("span", { className: "svc-context-button svc-context-button--danger", onClick: () => this.model.remove(this.model) },
-                            React.createElement(SvgIcon, { role: "button", size: "auto", iconName: "icon-delete", title: this.model.removeFileTitle }))) : null)
-                    : null));
+                this.model.canRenderControls ? React.createElement(SurveyActionBar, { model: this.model.topActionsContainer }) : null));
         }
         return (React.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: (event) => this.model.onPointerDown(event), onDragStart: this.preventDragHandler, onDrop: this.model.onDrop, onDragEnter: this.model.onDragEnter, onDragOver: this.model.onDragOver, onDragLeave: this.model.onDragLeave },
             React.createElement("div", { className: "svc-image-item-value-wrapper__ghost", style: imageStyle }),
@@ -1255,6 +1209,15 @@ class ImageItemValueAdornerComponent extends CreatorModelElement {
                 content)));
     }
 }
+class ImageItemDragAction extends SurveyElementBase {
+    renderElement() {
+        return React.createElement("span", { className: this.props.item.getActionBarItemCss(), onPointerDown: (event) => this.props.item.data.model.onPointerDown(event) },
+            React.createElement(SvgIcon, { size: "auto", iconName: this.props.item.iconName, className: this.props.item.cssClasses.itemIcon }));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-image-item-drag-action", (props) => {
+    return React.createElement(ImageItemDragAction, props);
+});
 ReactElementFactory.Instance.registerElement("svc-image-item-value", (props) => {
     return React.createElement(ImageItemValueAdornerComponent, props);
 });
@@ -1288,8 +1251,9 @@ class MatrixCellAdornerComponent extends CreatorModelElement {
     render() {
         let controls = null;
         if (!!this.model.isSupportCellEditor) {
-            controls = React.createElement("div", { className: "svc-matrix-cell__question-controls" }, attachKey2click(React.createElement("span", { className: "svc-matrix-cell__question-controls-button svc-context-button", onClick: (event) => this.model.editQuestion(this.model, event) },
-                React.createElement(SvgIcon, { size: "auto", iconName: "icon-edit" }))));
+            controls = React.createElement("div", { className: "svc-matrix-cell__question-controls" }, ReactElementFactory.Instance.createElement("sv-action-bar-item", {
+                item: this.model.editAction,
+            }));
         }
         return (React.createElement("div", { className: "svc-matrix-cell", tabIndex: -1, key: this.props.element.key, onClick: (e) => !this.props.question && this.model.selectContext(this.model, e), onMouseOut: e => this.model.hover(e.nativeEvent, e.currentTarget), onMouseOver: e => this.model.hover(e.nativeEvent, e.currentTarget) },
             React.createElement("div", { className: "svc-matrix-cell--selected" + (this.model.isSelected ? " svc-visible" : "") }),
@@ -1407,7 +1371,7 @@ class SurveyCreatorToolboxTool extends CreatorModelElement {
         });
         return (React.createElement("div", { className: item.css, key: item.id, ref: this.rootRef },
             (item.needSeparator && !this.creator.toolbox.showCategoryTitles) ? (React.createElement("div", { className: "svc-toolbox__category-separator" })) : null,
-            React.createElement("div", { className: "svc-toolbox__tool-content sv-action__content", onPointerDown: (event) => {
+            React.createElement("div", { className: "svc-toolbox__tool-content", onPointerDown: (event) => {
                     event.persist();
                     this.model.onPointerDown(event);
                 } }, itemComponent)));
@@ -1420,8 +1384,8 @@ class SurveyCreatorToolboxTool extends CreatorModelElement {
         super.componentDidMount();
         this.item.updateModeCallback = (mode, callback) => {
             queueMicrotask(() => {
-                if (ReactDOM["flushSync"]) {
-                    ReactDOM["flushSync"](() => {
+                if (React["flushSync"]) {
+                    React["flushSync"](() => {
                         this.item.mode = mode;
                     });
                 }
@@ -1779,11 +1743,10 @@ class TabButtonComponent extends SurveyElementBase {
         const model = this.props.model;
         if (!model.visible)
             return null;
-        const button = attachKey2click(React.createElement("div", { className: model.buttonClassName, title: model.tooltip, onClick: () => { model.action(); } },
-            React.createElement("div", { className: "svc-menu-action__icon" },
-                React.createElement("div", { className: "svc-menu-action__icon-container" },
-                    React.createElement(SvgIcon, { iconName: model.iconName, size: "auto" })))), model);
-        return (React.createElement("div", { className: "svc-menu-action" }, button));
+        const itemComponent = ReactElementFactory.Instance.createElement(this.props.model.component || "sv-action-bar-item", {
+            item: this.props.model,
+        });
+        return (React.createElement("div", { className: "svc-sidebar-tabs__item" }, itemComponent));
     }
 }
 
@@ -1856,7 +1819,7 @@ class SideBarPropertyGridHeader extends SurveyElementBase {
         return this.objectSelectionAction;
     }
     renderElement() {
-        const button = attachKey2click(React.createElement("div", { className: this.objectSelectionAction.buttonClassName, onClick: () => this.objectSelectionAction.action() },
+        const button = attachKey2click(React.createElement("div", { className: this.objectSelectionAction.getActionBarItemCss() + " svc-sidebar__header-object-selector", onClick: () => this.objectSelectionAction.action() },
             React.createElement("div", { className: "svc-sidebar__header-caption" },
                 React.createElement("span", { className: "svc-sidebar__header-title" }, this.objectSelectionAction.title),
                 React.createElement("span", { className: "svc-sidebar__header-subtitle" }, this.objectSelectionAction.tooltip))), this.props.model);
@@ -1954,6 +1917,26 @@ ReactElementFactory.Instance.registerElement("svc-side-bar", (props) => {
     return React.createElement(SidebarComponent, props);
 });
 
+class SideBarLaunchCard extends React.Component {
+    render() {
+        const model = this.props.model;
+        if (!model)
+            return null;
+        return (React.createElement("div", { className: "spg-launch" },
+            React.createElement("button", { className: "spg-launch__card", onClick: model.onClick },
+                React.createElement("div", { className: "spg-launch__container" },
+                    React.createElement("div", { className: "spg-launch__text" }, model.title),
+                    React.createElement("div", { className: "spg-launch__text2" }, model.description)),
+                React.createElement("div", { className: "spg-launch__icon" },
+                    React.createElement("div", { className: "spg-launch__chevron-right-16-x-16" },
+                        React.createElement("div", { className: "spg-launch__icon2" },
+                            React.createElement(SvgIcon, { size: "auto", iconName: "chevrondown-24x24" })))))));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-side-bar-launch-card", (props) => {
+    return React.createElement(SideBarLaunchCard, props);
+});
+
 class TranslationLineSkeleton extends React.Component {
     render() {
         return (React.createElement("div", { className: "sd-translation-line-skeleton" }));
@@ -2194,10 +2177,8 @@ class SurveyPageNavigator extends CreatorModelElement {
     }
     componentDidMount() {
         super.componentDidMount();
-        if (this.props.pageEditMode !== "bypage") {
-            const el = this.containerRef.current;
-            this.model.attachToUI(el);
-        }
+        const el = this.containerRef.current;
+        this.model.attachToUI(el);
     }
     componentWillUnmount() {
         super.componentWillUnmount();
@@ -2205,14 +2186,8 @@ class SurveyPageNavigator extends CreatorModelElement {
         this.model.setScrollableContainer(undefined);
     }
     renderElement() {
-        let className = "svc-page-navigator__selector svc-page-navigator__button";
-        if (this.model.isPopupOpened)
-            className += " svc-page-navigator__button--pressed";
         return (React.createElement("div", { className: "svc-page-navigator", ref: this.containerRef, style: { display: this.model.visible ? "flex" : "none" } },
-            React.createElement("div", null,
-                attachKey2click(React.createElement("div", { role: "button", className: className, onClick: () => this.model.togglePageSelector(), title: this.model.pageSelectorCaption },
-                    React.createElement(SvgIcon, { className: "svc-page-navigator__button-icon", iconName: this.model.icon, size: "auto", title: this.model.pageSelectorCaption }))),
-                React.createElement(Popup, { model: this.model.popupModel })),
+            React.createElement("div", null, ReactElementFactory.Instance.createElement("sv-action-bar-item-dropdown", { item: this.model.selectorAction })),
             React.createElement("div", null, this.model.visibleItems.map((item) => (React.createElement(SurveyPageNavigatorItem, { key: item.id, item: item }))))));
     }
 }
@@ -2471,25 +2446,6 @@ ReactElementFactory.Instance.registerElement("svc-tab-json-editor-ace", (props)
     return React.createElement(TabJsonEditorAceComponent, props);
 });
 
-class TabLogicAddButtonComponent extends SurveyElementBase {
-    get model() {
-        return this.props.button;
-    }
-    getStateElement() {
-        return this.model;
-    }
-    renderElement() {
-        const buttonClassName = "svc-logic-tab__content-action svc-btn" + ((this.model.enabled !== undefined && !this.model.enabled) ? " svc-logic-tab__content-action--disabled" : "");
-        return attachKey2click(React.createElement("div", { role: "button", onClick: (e) => {
-                e.stopPropagation();
-                this.model.action();
-            }, className: buttonClassName, title: this.model.title },
-            React.createElement("span", { className: "svc-btn__text" }, this.model.title)));
-    }
-}
-ReactElementFactory.Instance.registerElement("svc-tab-logic-add-button", (props) => {
-    return React.createElement(TabLogicAddButtonComponent, props);
-});
 class TabLogicComponent extends SurveyElementBase {
     get model() {
         return this.props.data;
@@ -2505,21 +2461,26 @@ class TabLogicComponent extends SurveyElementBase {
     }
     renderViewContent() {
         const logicTabClassName = "svc-plugin-tab__content svc-logic-tab svc-logic-tab__content " + (this.model.hasItems ? "" : "svc-logic-tab--empty");
-        const addLogic = !this.model.readOnly ? React.createElement(TabLogicAddButtonComponent, { button: this.model.addNewButton }) : undefined;
+        const actions = !this.model.readOnly ? React.createElement(SurveyActionBar, { model: this.model.contentActionsContainer }) : undefined;
         return (React.createElement(Fragment, null,
             React.createElement("div", { className: logicTabClassName }, this.model.hasItems ?
                 (React.createElement(React.Fragment, null,
                     React.createElement(Survey, { model: this.model.itemsSurvey }),
-                    addLogic))
+                    actions))
                 : (React.createElement("div", { className: "svc-logic-tab__content-empty" },
                     React.createElement(SurfacePlaceholder, { name: "logic", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText }),
-                    addLogic)))));
+                    actions)))));
     }
 }
 ReactElementFactory.Instance.registerElement("svc-tab-logic", (props) => {
     return React.createElement(TabLogicComponent, props);
 });
 
+function simulatorShellStyle(overlayHeight) {
+    return overlayHeight
+        ? { ["--sv-popup-overlay-height"]: overlayHeight }
+        : {};
+}
 class SurveySimulator extends SurveyElementBase {
     get model() {
         return this.props.model;
@@ -2527,8 +2488,21 @@ class SurveySimulator extends SurveyElementBase {
     getStateElement() {
         return this.model;
     }
+    componentDidMount() {
+        super.componentDidMount();
+        this.model.queueSurveyLayoutRefresh();
+    }
+    componentDidUpdate(prevProps, prevState) {
+        super.componentDidUpdate(prevProps, prevState);
+        this.model.queueSurveyLayoutRefresh();
+    }
+    componentWillUnmount() {
+        this.model.cancelSurveyLayoutRefresh();
+        super.componentWillUnmount();
+    }
     renderElement() {
         const mainSimulatorClass = this.model.getRootCss();
+        const shellStyle = simulatorShellStyle(this.model.popupOverlayHeight);
         if (!this.model.survey) {
             return React.createElement("div", { className: mainSimulatorClass });
         }
@@ -2545,36 +2519,17 @@ class SurveySimulator extends SurveyElementBase {
                                 this.model.simulatorFrame.scale +
                                 ") translate(-50%, -50%)"
                         } },
-                        React.createElement("div", { className: "svd-simulator-content" },
+                        React.createElement("div", { className: "svd-simulator-content", style: shellStyle },
                             React.createElement(Survey, { model: this.model.survey }))))));
         }
         else {
             return (React.createElement("div", { className: mainSimulatorClass },
-                React.createElement("div", { className: "svd-simulator-content" },
+                React.createElement("div", { className: "svd-simulator-content", style: shellStyle },
                     React.createElement(Survey, { model: this.model.survey }))));
         }
     }
 }
 
-class TabPreviewTestSurveyAgainComponent extends SurveyElementBase {
-    get model() {
-        return this.props.model.testAgainAction;
-    }
-    getStateElement() {
-        return this.model;
-    }
-    renderElement() {
-        const buttonClassName = "svc-preview__test-again svc-btn";
-        return attachKey2click(React.createElement("div", { role: "button", onClick: (e) => {
-                e.stopPropagation();
-                this.model.action();
-            }, className: buttonClassName, title: this.model.title },
-            React.createElement("span", { className: "svc-btn__text" }, this.model.title)));
-    }
-}
-ReactElementFactory.Instance.registerElement("svc-complete-page", (props) => {
-    return React.createElement(TabPreviewTestSurveyAgainComponent, props);
-});
 class TabPreviewSurveyComponent extends SurveyElementBase {
     constructor(props) {
         super(props);
@@ -2594,7 +2549,7 @@ class TabPreviewSurveyComponent extends SurveyElementBase {
             this.model.showResults ? React.createElement(SurveyResults, { survey: this.model.simulator.survey }) : null));
     }
     renderElement() {
-        const tabContentClassName = "svc-creator-tab__content svc-test-tab__content" + (this.model.isPageToolbarVisible ? " svc-creator-tab__content--with-toolbar" : "");
+        const tabContentClassName = "svc-creator-tab__content svc-test-tab__content " + this.model.tabContentAdditionalCss;
         return (React.createElement("div", { className: tabContentClassName },
             this.model.simulator.survey.isEmpty ? this.renderPlaceholder() : this.renderSimulator(),
             this.getBottomToolbar()));
@@ -2644,7 +2599,7 @@ class TabThemeSurveyComponent extends SurveyElementBase {
             this.model.showResults ? React.createElement(SurveyResults, { survey: this.model.simulator.survey }) : null));
     }
     renderElement() {
-        const tabContentClassName = "svc-creator-tab__content svc-test-tab__content" + (this.model.isPageToolbarVisible ? " svc-creator-tab__content--with-toolbar" : "");
+        const tabContentClassName = "svc-creator-tab__content svc-test-tab__content " + this.model.tabContentAdditionalCss;
         return (React.createElement("div", { className: tabContentClassName },
             this.model.simulator.survey.isEmpty ? this.renderPlaceholder() : this.renderSimulator(),
             this.getBottomToolbar()));
@@ -2737,15 +2692,37 @@ class ComponentContainer extends React.Component {
         super(props);
     }
     render() {
-        return (React.createElement("div", { className: this.props.model.cssClass }, this.props.model.elements.map((element, index) => {
+        const children = this.props.model.elements.map((element, index) => {
             return ReactElementFactory.Instance.createElement(element.componentName, Object.assign(Object.assign({}, element.componentData), { key: index }));
-        })));
+        });
+        const inner = this.props.model.scrollable ? React.createElement(Scroll, null,
+            " ",
+            children,
+            " ") : children;
+        return (this.props.model.wrapped ? React.createElement("div", { className: this.props.model.cssClass },
+            " ",
+            inner,
+            " ") : React.createElement(React.Fragment, null, inner));
     }
 }
 ReactElementFactory.Instance.registerElement("svc-component-container", (props) => {
     return React.createElement(ComponentContainer, props);
 });
 
+class IconItem extends React.Component {
+    render() {
+        const item = this.props.item;
+        if (!item)
+            return null;
+        return (React.createElement("div", { className: "svc-icon-item" },
+            React.createElement(SvgIcon, { className: "svc-icon-item__icon", size: "auto", iconName: item.value }),
+            React.createElement("span", { className: "svc-icon-item__text" }, item.title)));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-presets-icon-item", (props) => {
+    return React.createElement(IconItem, props);
+});
+
 class SwitcherComponent extends SurveyElementBase {
     get item() {
         return this.props.item;
@@ -2789,6 +2766,24 @@ ReactElementFactory.Instance.registerElement("json-error-item", (props) => {
     return React.createElement(ItemTemplateComponent$1, props);
 });
 
+class TabContainerComponent extends SurveyElementBase {
+    constructor(props) {
+        super(props);
+    }
+    getStateElement() {
+        return this.model;
+    }
+    get model() {
+        return this.props.data;
+    }
+    renderElement() {
+        return React.createElement(ComponentContainer, { model: this.model.containerModel });
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-tab-container", (props) => {
+    return React.createElement(TabContainerComponent, props);
+});
+
 class SurveyQuestionSpinEditor extends SurveyQuestionText {
     constructor(props) {
         super(props);
@@ -2949,8 +2944,8 @@ ReactQuestionFactory.Instance.registerQuestion("sv-boolean-switch", (props) => {
 RendererFactory.Instance.registerRenderer("boolean", "switch", "sv-boolean-switch");
 
 let Version;
-Version = `${"3.0.0-beta.3"}`;
-checkLibraryVersion(`${"3.0.0-beta.3"}`, "survey-creator-react");
+Version = `${"3.0.0-beta.4"}`;
+checkLibraryVersion(`${"3.0.0-beta.4"}`, "survey-creator-react");
 
 function renderSurveyCreator(creator, element, props = {}) {
     let node = element;
@@ -2979,5 +2974,5 @@ if (typeof window !== "undefined") {
     }
 }
 
-export { ActionButton, AdaptiveToolbox, CellQuestionAdornerComponent, CellQuestionDropdownAdornerComponent, ComponentContainer, CreatorSurveyPageComponent, ImageItemValueAdornerComponent, ItemValueAdornerComponent, LogoImageComponent, MatrixCellAdornerComponent, PanelAdornerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionAdornerComponent, QuestionBanner, QuestionDropdownAdornerComponent, QuestionEditorContentComponent, QuestionErrorComponent, QuestionImageAdornerComponent, QuestionRatingAdornerComponent, QuestionWidgetAdornerComponent, QuestionWrapperFooter, QuestionWrapperHeader, ReactDragEvent, ReactMouseEvent, RowWrapper, SearchComponent, SideBarDefaultHeader, SidebarComponent, SurveyCreator, SurveyCreatorComponent, SurveyCreatorToolboxCategory, SurveyCreatorToolboxItem, SurveyCreatorToolboxItemGroup, SurveyCreatorToolboxTool, SurveyElementEmbeddedSurvey, SurveyLocStringEditor, SurveyLogicOpertor, SurveyNavigation, SurveyQuestionBooleanSwitch, SurveyQuestionColor, SurveyQuestionFileEditor, SurveyQuestionFileEditorButton, SurveyQuestionLinkValue, SurveyQuestionSpinEditor, SurveyResults, SurveyResultsByRow, SurveySimulator, SurveySpinEditorButton, SwitcherComponent, TabButtonComponent, TabDesignerComponent, TabJsonEditorAceComponent, TabJsonEditorErrorsComponent, TabJsonEditorTextareaComponent, TabLogicAddButtonComponent, TabLogicComponent, TabPreviewSurveyComponent, TabPreviewTestSurveyAgainComponent, TabThemeSurveyComponent, TabTranslationComponent, TabbedMenuComponent, TabbedMenuItemComponent, ToolboxList, TranslateFromAction, TranslationLineSkeleton, Version, renderSurveyCreator };
+export { ActionButton, AdaptiveToolbox, AddQuestionButtonComponent, CellQuestionAdornerComponent, CellQuestionDropdownAdornerComponent, ComponentContainer, CreatorSurveyPageComponent, IconItem, ImageItemValueAdornerComponent, ItemValueAdornerComponent, LogoImageComponent, MatrixCellAdornerComponent, PanelAdornerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionAdornerComponent, QuestionBanner, QuestionDropdownAdornerComponent, QuestionEditorContentComponent, QuestionErrorComponent, QuestionImageAdornerComponent, QuestionRatingAdornerComponent, QuestionWidgetAdornerComponent, QuestionWrapperFooter, QuestionWrapperHeader, ReactDragEvent, ReactMouseEvent, RowWrapper, SearchComponent, SideBarDefaultHeader, SideBarLaunchCard, SidebarComponent, SurveyCreator, SurveyCreatorComponent, SurveyCreatorToolboxCategory, SurveyCreatorToolboxItem, SurveyCreatorToolboxItemGroup, SurveyCreatorToolboxTool, SurveyElementEmbeddedSurvey, SurveyLocStringEditor, SurveyLogicOpertor, SurveyNavigation, SurveyQuestionBooleanSwitch, SurveyQuestionColor, SurveyQuestionFileEditor, SurveyQuestionFileEditorButton, SurveyQuestionLinkValue, SurveyQuestionSpinEditor, SurveyResults, SurveyResultsByRow, SurveySimulator, SurveySpinEditorButton, SwitcherComponent, TabButtonComponent, TabContainerComponent, TabDesignerComponent, TabJsonEditorAceComponent, TabJsonEditorErrorsComponent, TabJsonEditorTextareaComponent, TabLogicComponent, TabPreviewSurveyComponent, TabThemeSurveyComponent, TabTranslationComponent, TabbedMenuComponent, TabbedMenuItemComponent, ToolboxList, TranslateFromAction, TranslationLineSkeleton, Version, renderSurveyCreator };
 //# sourceMappingURL=survey-creator-js.mjs.map