survey-creator-react 1.12.3 → 1.12.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-creator-react",
-  "version": "1.12.3",
+  "version": "1.12.5",
   "description": "Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.",
   "keywords": [
     "Survey",
@@ -29,9 +29,9 @@
     "ace-builds": "^1.4.12",
     "react": "^16.5.0 || ^17.0.1 || ^18.1.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0",
-    "survey-core": "1.12.3",
-    "survey-react-ui": "1.12.3",
-    "survey-creator-core": "1.12.3"
+    "survey-core": "1.12.5",
+    "survey-react-ui": "1.12.5",
+    "survey-creator-core": "1.12.5"
   },
   "peerDependenciesMeta": {
     "ace-builds": {

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator React v1.12.3
+ * SurveyJS Creator React v1.12.5
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -1476,8 +1476,7 @@ var SurveyCreatorComponent = /** @class */ (function (_super) {
     };
     SurveyCreatorComponent.prototype.renderSidebar = function () {
         if (!!this.creator.sidebar) {
-            var className = this.creator.isMobileView ? "sv-mobile-side-bar" : "";
-            return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: className }, survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.createElement("svc-side-bar", { model: this.creator.sidebar })));
+            return survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.createElement("svc-side-bar", { model: this.creator.sidebar });
         }
         else {
             return null;
@@ -1692,16 +1691,9 @@ var TabbedMenuItemComponent = /** @class */ (function (_super) {
     };
     TabbedMenuItemComponent.prototype.render = function () {
         var item = this.item;
-        var className = "svc-tabbed-menu-item";
-        if (item.active)
-            className += " svc-tabbed-menu-item--selected";
-        if (item.enabled !== undefined && !item.enabled)
-            className += " svc-tabbed-menu-item--disabled";
-        var titleClassName = "svc-text svc-tabbed-menu-item__text svc-text--normal";
-        if (item.active)
-            titleClassName += " svc-text--bold";
-        return ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: className, onClick: function () { return item.action(item); } },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: titleClassName }, item.title))));
+        return ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: item.getRootCss(), onClick: function () { return item.action(item); } },
+            item.hasTitle ? react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: item.getTitleCss() }, item.title) : null,
+            item.hasIcon ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { iconName: item.iconName, className: item.getIconCss(), size: "auto", title: item.tooltip || item.title }) : null)));
     };
     return TabbedMenuItemComponent;
 }(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
@@ -1874,6 +1866,13 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
         }
         this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.PageAdorner(props.creator, props.page);
     };
+    CreatorSurveyPageComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (!!((_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.current)) {
+            this.model.rootElement = this.rootRef.current;
+        }
+    };
     CreatorSurveyPageComponent.prototype.getUpdatedModelProps = function () {
         return ["creator", "page"];
     };
@@ -1881,17 +1880,14 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
         return this.model;
     };
     CreatorSurveyPageComponent.prototype.componentDidMount = function () {
-        var _this = this;
         _super.prototype.componentDidMount.call(this);
-        this.model.onPageSelectedCallback = function () {
-            if (!!_this.rootRef.current) {
-                survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.SurveyHelper.scrollIntoViewIfNeeded(_this.rootRef.current);
-            }
-        };
+        if (!!this.rootRef.current) {
+            this.model.rootElement = this.rootRef.current;
+        }
     };
     CreatorSurveyPageComponent.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
-        this.model.onPageSelectedCallback = undefined;
+        this.model.dispose();
     };
     CreatorSurveyPageComponent.prototype.canRender = function () {
         return (!!this.model &&
@@ -2029,8 +2025,10 @@ __webpack_require__.r(__webpack_exports__);
 
 var QuestionAdornerComponent = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionAdornerComponent, _super);
-    function QuestionAdornerComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function QuestionAdornerComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_2__.createRef();
+        return _this;
     }
     QuestionAdornerComponent.prototype.createModel = function (props) {
         if (this.modelValue) {
@@ -2061,8 +2059,11 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
         var _this = this;
         var allowInteractions = this.model.element
             .isInteractiveDesignElement;
+        var titleForCollapsedState = this.renderQuestionTitle();
         var content = this.renderContent(allowInteractions);
-        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { ref: this.rootRef, "data-sv-drop-target-survey-element": this.model.element.name || null, className: "svc-question__adorner " + this.model.rootCss(), onDoubleClick: function (e) { allowInteractions && _this.model.dblclick(e.nativeEvent); e.stopPropagation(); }, onMouseLeave: function (e) { return allowInteractions && _this.model.hover(e.nativeEvent, e.currentTarget); }, onMouseOver: function (e) { return allowInteractions && _this.model.hover(e.nativeEvent, e.currentTarget); } }, content));
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { ref: this.rootRef, "data-sv-drop-target-survey-element": this.model.element.name || null, className: this.model.rootCss(), onDoubleClick: function (e) { allowInteractions && _this.model.dblclick(e.nativeEvent); e.stopPropagation(); }, onMouseLeave: function (e) { return allowInteractions && _this.model.hover(e.nativeEvent, e.currentTarget); }, onMouseOver: function (e) { return allowInteractions && _this.model.hover(e.nativeEvent, e.currentTarget); } },
+            titleForCollapsedState,
+            content));
     };
     QuestionAdornerComponent.prototype.disableTabStop = function () {
         return true;
@@ -2094,19 +2095,31 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
         return survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.createElement("svc-question-banner", this.model.createBannerParams());
     };
     QuestionAdornerComponent.prototype.renderQuestionTitle = function () {
+        var _this = this;
         if (!this.model.showHiddenTitle)
             return null;
         var element = this.model.element;
         return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: this.model.cssCollapsedHiddenHeader },
-            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: this.model.cssCollapsedHiddenTitle }, element.title ? survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.SurveyElementBase.renderLocString(element.locTitle, null, "q_title") : react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-fake-title" }, element.name))));
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { ref: function (node) { return node && (!_this.model.renderedCollapsed ?
+                    node.setAttribute("inert", "") : node.removeAttribute("inert")); }, className: this.model.cssCollapsedHiddenTitle }, element.hasTitle ? survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.SurveyElementBase.renderLocString(element.locTitle, null, "q_title") : react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-fake-title" }, element.name))));
     };
     QuestionAdornerComponent.prototype.renderElementContent = function () {
         return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
-            this.renderQuestionTitle(),
             this.props.element,
             this.renderElementPlaceholder(),
             this.renderCarryForwardBanner()));
     };
+    QuestionAdornerComponent.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        this.model.rootElement = this.rootRef.current;
+    };
+    QuestionAdornerComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (((_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.current) && this.modelValue) {
+            this.modelValue.rootElement = this.rootRef.current;
+        }
+    };
     QuestionAdornerComponent.prototype.renderElementPlaceholder = function () {
         if (!this.model.isEmptyElement) {
             return null;
@@ -2115,6 +2128,11 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-panel__placeholder_frame" },
                 react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-panel__placeholder" }, this.model.placeholderText))));
     };
+    QuestionAdornerComponent.prototype.componentWillUnmount = function () {
+        if (this.model) {
+            this.model.dispose();
+        }
+    };
     return QuestionAdornerComponent;
 }(_ModelElement__WEBPACK_IMPORTED_MODULE_5__.CreatorModelElement));
 
@@ -2355,13 +2373,11 @@ __webpack_require__.r(__webpack_exports__);
 
 var QuestionImageAdornerComponent = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionImageAdornerComponent, _super);
-    function QuestionImageAdornerComponent(props) {
-        var _this = _super.call(this, props) || this;
-        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_2__.createRef();
-        return _this;
+    function QuestionImageAdornerComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     QuestionImageAdornerComponent.prototype.createQuestionViewModel = function (props) {
-        return new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.QuestionImageAdornerViewModel(props.componentData, props.question, null, null);
+        return new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.QuestionImageAdornerViewModel(props.componentData, props.question, null);
     };
     Object.defineProperty(QuestionImageAdornerComponent.prototype, "imageModel", {
         get: function () {
@@ -2370,10 +2386,6 @@ var QuestionImageAdornerComponent = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    QuestionImageAdornerComponent.prototype.componentDidMount = function () {
-        _super.prototype.componentDidMount.call(this);
-        this.imageModel.questionRoot = this.rootRef.current;
-    };
     QuestionImageAdornerComponent.prototype.renderHeader = function () {
         return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
             react__WEBPACK_IMPORTED_MODULE_2__.createElement("input", { type: "file", "aria-hidden": "true", tabIndex: -1, accept: this.imageModel.acceptedTypes, className: "svc-choose-file-input", style: {
@@ -2408,13 +2420,10 @@ var QuestionImageAdornerComponent = /** @class */ (function (_super) {
                 isDisplayMode: false,
                 question: this.imageModel.filePresentationModel
             });
-            return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
-                this.renderQuestionTitle(),
-                fileQuestion));
+            return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null, fileQuestion));
         }
         else {
             return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
-                this.renderQuestionTitle(),
                 this.props.element,
                 this.renderElementPlaceholder()));
         }
@@ -2609,6 +2618,46 @@ survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.regist
 });
 
 
+/***/ }),
+
+/***/ "./src/components/SurfacePlaceholder.tsx":
+/*!***********************************************!*\
+  !*** ./src/components/SurfacePlaceholder.tsx ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SurfacePlaceholder: () => (/* binding */ SurfacePlaceholder)
+/* harmony export */ });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
+
+
+
+var SurfacePlaceholder = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurfacePlaceholder, _super);
+    function SurfacePlaceholder(props) {
+        return _super.call(this, props) || this;
+    }
+    SurfacePlaceholder.prototype.render = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder__image svc-surface-placeholder__image--" + this.props.name }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder__text" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder__title" }, this.props.placeholderTitleText),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder__description" }, this.props.placeholderDescriptionText))));
+    };
+    return SurfacePlaceholder;
+}(react__WEBPACK_IMPORTED_MODULE_1__.Component));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-surface-placeholder", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurfacePlaceholder, props);
+});
+
+
 /***/ }),
 
 /***/ "./src/custom-questions/BooleanSwitch.tsx":
@@ -3393,20 +3442,21 @@ var SidebarComponent = /** @class */ (function (_super) {
     };
     SidebarComponent.prototype.renderElement = function () {
         var _this = this;
-        var style = { display: !this.model.renderedIsVisible ? "none" : "" };
-        var className = "svc-side-bar" + (this.model.flyoutPanelMode ? " svc-flyout-side-bar" : "");
+        var style = { display: this.model.renderRoot ? "" : "none" };
+        var containerStyle = { display: this.model.renderContainer ? "" : "none" };
         var items = this.model.pages.map(function (page) { return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SidebarPage, { page: page, key: page.id }); });
         var headerArea = survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement(this.model.header.component, { model: this.model.header.componentModel });
         var sideArea = null;
         if (this.model.sideAreaComponentName) {
             sideArea = survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement(this.model.sideAreaComponentName, { model: this.model.sideAreaComponentData });
         }
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: className, style: { display: !this.model.hasVisiblePages ? "none" : "" } },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__shadow", onClick: function () { return _this.model.collapseSidebar(); } }),
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.model.rootCss, style: style },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__shadow", onClick: function () { return _this.model.collapseSidebar(); }, style: containerStyle }),
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-flex-row svc-side-bar__wrapper" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.containerRef, style: style, className: "svc-side-bar__container" },
-                    headerArea,
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-content" }, items)),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-wrapper", style: containerStyle },
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.containerRef, className: "svc-side-bar__container" },
+                        headerArea,
+                        react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-content" }, items))),
                 sideArea)));
     };
     return SidebarComponent;
@@ -3717,6 +3767,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _PageNavigator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../PageNavigator */ "./src/PageNavigator.tsx");
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -3837,7 +3889,7 @@ var TabDesignerComponent = /** @class */ (function (_super) {
                 this.renderNewPage("svc-designer-placeholder-page"))));
     };
     TabDesignerComponent.prototype.renderPlaceHolderContent = function () {
-        return react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-designer-placeholder-text svc-text svc-text--normal" }, this.model.placeholderText);
+        return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_4__.SurfacePlaceholder, { name: "designer", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText });
     };
     TabDesignerComponent.prototype.renderTabContent = function () {
         var survey = this.creator.survey;
@@ -4066,6 +4118,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -4117,18 +4171,18 @@ var TabLogicComponent = /** @class */ (function (_super) {
     };
     TabLogicComponent.prototype.renderElement = function () {
         var logic = this.model;
-        var rootClass = "svc-creator-tab__content";
+        var rootClass = "svc-creator-tab__content svc-logic-tab";
         var content = this.renderViewContent();
         return react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: rootClass }, content);
     };
     TabLogicComponent.prototype.renderViewContent = function () {
-        var logicTabClassName = "svc-plugin-tab__content svc-logic-tab__content " + (this.model.hasItems ? "" : "svc-logic-tab__empty");
+        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__WEBPACK_IMPORTED_MODULE_1__.createElement(TabLogicAddButtonComponent, { button: this.model.addNewButton }) : undefined;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: logicTabClassName },
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Survey, { model: this.model.itemsSurvey }),
                 this.model.hasItems ? null : (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-logic-tab__content-empty" },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-text" }, this.model.emptyTabPlaceholder))),
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_3__.SurfacePlaceholder, { name: "logic", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText }))),
                 addLogic)));
     };
     return TabLogicComponent;
@@ -4159,6 +4213,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _SurveySimulator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./SurveySimulator */ "./src/tabs/SurveySimulator.tsx");
 /* harmony import */ var _Results__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Results */ "./src/Results.tsx");
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -4209,12 +4265,19 @@ var TabPreviewSurveyComponent = /** @class */ (function (_super) {
     TabPreviewSurveyComponent.prototype.getStateElement = function () {
         return this.model;
     };
+    TabPreviewSurveyComponent.prototype.renderPlaceholder = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-test-tab--empty" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_5__.SurfacePlaceholder, { name: "preview", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText })));
+    };
+    TabPreviewSurveyComponent.prototype.renderSimulator = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-plugin-tab__content" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_SurveySimulator__WEBPACK_IMPORTED_MODULE_3__.SurveySimulator, { model: this.model.simulator }),
+            this.model.showResults ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Results__WEBPACK_IMPORTED_MODULE_4__.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" : "");
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: tabContentClassName },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-plugin-tab__content" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(_SurveySimulator__WEBPACK_IMPORTED_MODULE_3__.SurveySimulator, { model: this.model.simulator }),
-                this.model.showResults ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Results__WEBPACK_IMPORTED_MODULE_4__.SurveyResults, { survey: this.model.simulator.survey }) : null),
+            this.model.simulator.survey.isEmpty ? this.renderPlaceholder() : this.renderSimulator(),
             this.getBottomToolbar()));
     };
     TabPreviewSurveyComponent.prototype.getBottomToolbar = function () {
@@ -4321,6 +4384,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _SurveySimulator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./SurveySimulator */ "./src/tabs/SurveySimulator.tsx");
 /* harmony import */ var _Results__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Results */ "./src/Results.tsx");
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -4341,12 +4406,19 @@ var TabThemeSurveyComponent = /** @class */ (function (_super) {
     TabThemeSurveyComponent.prototype.getStateElement = function () {
         return this.model;
     };
+    TabThemeSurveyComponent.prototype.renderPlaceholder = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-test-tab--empty" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_5__.SurfacePlaceholder, { name: "theme", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText })));
+    };
+    TabThemeSurveyComponent.prototype.renderSimulator = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-plugin-tab__content" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_SurveySimulator__WEBPACK_IMPORTED_MODULE_3__.SurveySimulator, { model: this.model.simulator }),
+            this.model.showResults ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Results__WEBPACK_IMPORTED_MODULE_4__.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" : "");
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: tabContentClassName },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-plugin-tab__content" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(_SurveySimulator__WEBPACK_IMPORTED_MODULE_3__.SurveySimulator, { model: this.model.simulator }),
-                this.model.showResults ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Results__WEBPACK_IMPORTED_MODULE_4__.SurveyResults, { survey: this.model.simulator.survey }) : null),
+            this.model.simulator.survey.isEmpty ? this.renderPlaceholder() : this.renderSimulator(),
             this.getBottomToolbar()));
     };
     TabThemeSurveyComponent.prototype.getBottomToolbar = function () {
@@ -4485,6 +4557,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -4506,12 +4580,11 @@ var TabTranslationComponent = /** @class */ (function (_super) {
     TabTranslationComponent.prototype.renderElement = function () {
         if (!this.model)
             return null;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-creator-tab__content svc-translation-tab" }, this.renderElementContent()));
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-creator-tab__content svc-translation-tab" + (this.model.isEmpty ? " svc-translation-tab--empty" : "") }, this.renderElementContent()));
     };
     TabTranslationComponent.prototype.renderElementContent = function () {
         if (this.model.isEmpty) {
-            return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "st-no-strings" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", null, this.model.noStringsText)));
+            return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_3__.SurfacePlaceholder, { name: "translation", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText });
         }
         else {
             return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "st-content" },
@@ -4891,6 +4964,7 @@ var SurveyCreatorToolboxTool = /** @class */ (function (_super) {
             item: item,
             creator: this.creator,
             parentModel: this.creator.toolbox,
+            model: this.model,
             isCompact: this.isCompact
         });
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: item.css, key: item.id },
@@ -4899,7 +4973,7 @@ var SurveyCreatorToolboxTool = /** @class */ (function (_super) {
                     event.persist();
                     _this.model.onPointerDown(event);
                 }, onMouseOver: function (event) {
-                    _this.model.onMouseOver(item, event);
+                    _this.model.onMouseOverTool(item, event);
                 }, onMouseLeave: function (event) {
                     _this.model.onMouseLeave(item, event);
                 } }, itemComponent)));
@@ -4912,10 +4986,6 @@ var SurveyCreatorToolboxItem = /** @class */ (function (_super) {
     function SurveyCreatorToolboxItem(props) {
         return _super.call(this, props) || this;
     }
-    SurveyCreatorToolboxItem.prototype.createModel = function (props) {
-        var toolboxItem = props.item;
-        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_2__.ToolboxToolViewModel(toolboxItem, props.creator, props.parentModel);
-    };
     SurveyCreatorToolboxItem.prototype.getUpdatedModelProps = function () {
         return ["creator", "item"];
     };
@@ -4933,6 +5003,13 @@ var SurveyCreatorToolboxItem = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyCreatorToolboxItem.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyCreatorToolboxItem.prototype.getStateElement = function () {
         return this.model;
     };
@@ -4997,6 +5074,13 @@ var SurveyCreatorToolboxItemGroup = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyCreatorToolboxItemGroup.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyCreatorToolboxItemGroup.prototype, "creator", {
         get: function () {
             return this.props.creator;
@@ -5022,8 +5106,11 @@ var SurveyCreatorToolboxItemGroup = /** @class */ (function (_super) {
         return this.item;
     };
     SurveyCreatorToolboxItemGroup.prototype.render = function () {
+        var _this = this;
         return react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ToolboxItem__WEBPACK_IMPORTED_MODULE_4__.SurveyCreatorToolboxItem, { item: this.item, creator: this.creator, parentModel: this.parentModel, isCompact: this.isCompact }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ToolboxItem__WEBPACK_IMPORTED_MODULE_4__.SurveyCreatorToolboxItem, { item: this.item, creator: this.creator, model: this.model, parentModel: this.parentModel, isCompact: this.isCompact }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__item-submenu-button", onMouseOver: function (event) { return _this.model.onMouseOver(_this.item, event); }, onMouseLeave: function (event) { return _this.model.onMouseLeave(_this.item, event); } },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { size: 24, iconName: this.item.subitemsButtonIcon })),
             react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Popup, { model: this.item.popupModel, getArea: this.item.getArea }));
     };
     return SurveyCreatorToolboxItemGroup;
@@ -5220,6 +5307,8 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_survey_react_ui__;
 /******/ 	
 /************************************************************************/
 var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
 /*!******************************!*\
   !*** ./src/entries/index.ts ***!
   \******************************/
@@ -5370,7 +5459,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_64__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_64___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_64__);
 var Version;
-Version = "".concat("1.12.3");
+Version = "".concat("1.12.5");
 // import "@survey/creator/survey-creator-core.css";
 
 
@@ -5444,7 +5533,9 @@ Version = "".concat("1.12.3");
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_64__.checkLibraryVersion)("".concat("1.12.3"), "survey-creator-react");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_64__.checkLibraryVersion)("".concat("1.12.5"), "survey-creator-react");
+
+})();
 
 /******/ 	return __webpack_exports__;
 /******/ })()