survey-creator-react 1.12.9 → 1.12.11

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator React v1.12.9
+ * SurveyJS Creator React v1.12.11
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -31,8 +31,11 @@ __webpack_require__.r(__webpack_exports__);
 /* 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__);
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-core */ "survey-core");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
+
 
 
 
@@ -42,25 +45,48 @@ var ActionButton = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     ActionButton.prototype.renderElement = function () {
-        var _this = this;
-        var classes = this.props.classes + " svc-action-button";
-        if (this.props.selected) {
-            classes += " svc-action-button--selected";
+        var classes = new survey_core__WEBPACK_IMPORTED_MODULE_2__.CssClassBuilder()
+            .append(this.props.classes)
+            .append("svc-action-button")
+            .append("svc-action-button--selected", !!this.props.selected)
+            .append("svc-action-button--disabled", !!this.props.disabled)
+            .toString();
+        if (this.props.iconName) {
+            return this.renderIcon(classes);
         }
+        return this.renderButtonText(classes);
+    };
+    ActionButton.prototype.renderButtonText = function (classes) {
+        var _this = this;
         if (this.props.disabled) {
-            classes += " svc-action-button--disabled";
             return react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: classes }, this.props.text);
         }
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null, (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { role: "button", className: classes, onClick: function (e) {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null, (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { role: "button", className: classes, onClick: function (e) {
                 if (!_this.props.allowBubble) {
                     e.stopPropagation();
                 }
                 _this.props.click();
             }, title: this.props.title }, this.props.text))));
     };
+    ActionButton.prototype.renderIcon = function (classes) {
+        var _this = this;
+        classes += " svc-action-button--icon";
+        if (this.props.disabled) {
+            return react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: classes },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: "auto", iconName: this.props.iconName }));
+        }
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null, (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: classes, onClick: function (e) {
+                if (!_this.props.allowBubble) {
+                    e.stopPropagation();
+                }
+                _this.props.click();
+            }, title: this.props.title },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: "auto", iconName: this.props.iconName })))));
+    };
     return ActionButton;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
 
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-action-button", function (props) { return react__WEBPACK_IMPORTED_MODULE_1__.createElement(ActionButton, props); });
 
 
 /***/ }),
@@ -104,7 +130,7 @@ var AddQuestionButtonComponent = /** @class */ (function (_super) {
                 questionTypeSelectorModel.action();
             }, className: "svc-element__question-type-selector", title: this.model.addNewQuestionText },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-element__question-type-selector-icon" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: questionTypeSelectorModel.iconName, size: 24, title: this.model.addNewQuestionText })),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: questionTypeSelectorModel.iconName, size: "auto", title: this.model.addNewQuestionText })),
             this.props.renderPopup === undefined || this.props.renderPopup ?
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Popup, { model: questionTypeSelectorModel.popupModel })
                 : null));
@@ -117,7 +143,7 @@ var AddQuestionButtonComponent = /** @class */ (function (_super) {
                     e.stopPropagation();
                     _this.model.addNewQuestion(_this.model, new _events__WEBPACK_IMPORTED_MODULE_3__.ReactMouseEvent(e));
                 }, onMouseOver: function (e) { return _this.model.hoverStopper && _this.model.hoverStopper(e.nativeEvent, e.currentTarget); } },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-panel__add-new-question-icon", iconName: "icon-add_24x24", size: 24 }),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-panel__add-new-question-icon", iconName: "icon-add_24x24", size: "auto" }),
                 react__WEBPACK_IMPORTED_MODULE_1__.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);
@@ -208,21 +234,21 @@ var ImageItemValueAdornerComponent = /** @class */ (function (_super) {
                         react__WEBPACK_IMPORTED_MODULE_2__.createElement("label", { className: "sd-imagepicker__label" },
                             react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { style: imageStyle, className: "sd-imagepicker__image" }, this.model.isUploading ? this.renderLoadingIndicator() : null)))),
                 react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-item-value-controls" }, this.model.allowAdd && !this.model.isUploading ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-context-button svc-image-item-value-controls__add", onClick: function () { return _this.model.chooseNewFile(_this.model); } },
-                    react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 24, iconName: "icon-add-lg", title: this.model.addFileTitle }))) : null)));
+                    react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: "auto", iconName: "icon-add-lg", title: this.model.addFileTitle }))) : null)));
         }
         else {
             content = (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
                 react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-item-value__item" }, this.props.element),
                 this.model.isDraggable && this.model.canRenderControls ?
                     react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-context-button svc-image-item-value-controls__drag-area-indicator", onPointerDown: function (event) { return _this.model.onPointerDown(event); } },
-                        react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 24, iconName: "icon-drag-24x24" }))
+                        react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: "auto", iconName: "icon-drag-24x24" }))
                     : null,
                 this.model.canRenderControls ?
                     react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-context-container svc-image-item-value-controls" },
                         this.model.allowRemove && !this.model.isUploading ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-context-button", onClick: function () { return _this.model.chooseFile(_this.model); } },
-                            react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { role: "button", size: 24, iconName: "icon-choosefile", title: this.model.selectFileTitle }))) : null,
+                            react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { role: "button", size: "auto", iconName: "icon-choosefile", title: this.model.selectFileTitle }))) : null,
                         this.model.allowRemove && !this.model.isUploading ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-context-button svc-context-button--danger", onClick: function () { return _this.model.remove(_this.model); } },
-                            react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { role: "button", size: 24, iconName: "icon-delete", title: this.model.removeFileTitle }))) : null)
+                            react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { role: "button", size: "auto", iconName: "icon-delete", title: this.model.removeFileTitle }))) : null)
                     : null));
         }
         return (react__WEBPACK_IMPORTED_MODULE_2__.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 },
@@ -314,7 +340,7 @@ var ItemValueAdornerComponent = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 16, iconName: "icon-add_16x16", title: this.model.tooltip })))) : (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
             " ",
             this.model.isDraggable ? (react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-item-value-controls__button svc-item-value-controls__drag" },
-                react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { className: "svc-item-value-controls__drag-icon", size: 24, iconName: "icon-drag-24x24", title: this.model.dragTooltip }))) : null,
+                react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { className: "svc-item-value-controls__drag-icon", size: "auto", iconName: "icon-drag-24x24", title: this.model.dragTooltip }))) : null,
             this.model.allowRemove ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { 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__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 16, iconName: "icon-remove_16x16", title: this.model.tooltip }))) : null));
         var itemkey = this.props.element.key + (this.model.allowAdd ? "_new" : "");
@@ -388,12 +414,12 @@ var LogoImageComponent = /** @class */ (function (_super) {
     LogoImageComponent.prototype.renderChooseButton = function () {
         var _this = this;
         return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-context-button", onClick: function () { return _this.model.chooseFile(_this.model); } },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { size: 24, iconName: "icon-choosefile" })));
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { size: "auto", iconName: "icon-choosefile" })));
     };
     LogoImageComponent.prototype.renderClearButton = function () {
         var _this = this;
         return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-context-button svc-context-button--danger", onClick: function () { return _this.model.remove(_this.model); } },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { size: 24, iconName: "icon-clear" })));
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { size: "auto", iconName: "icon-clear" })));
     };
     LogoImageComponent.prototype.renderButtons = function () {
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-context-container svc-logo-image-controls" },
@@ -500,8 +526,8 @@ var MatrixCellAdornerComponent = /** @class */ (function (_super) {
         var _this = this;
         var controls = null;
         if (!!this.model.isSupportCellEditor) {
-            controls = react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-matrix-cell__question-controls" }, (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-matrix-cell__question-controls-button", onClick: function (event) { return _this.model.editQuestion(_this.model, event); } },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 24, iconName: "icon-edit" }))));
+            controls = react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-matrix-cell__question-controls" }, (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-matrix-cell__question-controls-button svc-context-button", onClick: function (event) { return _this.model.editQuestion(_this.model, event); } },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: "auto", iconName: "icon-edit" }))));
         }
         return (react__WEBPACK_IMPORTED_MODULE_1__.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__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-matrix-cell--selected" + (this.model.isSelected ? " svc-visible" : "") }),
@@ -748,12 +774,12 @@ var SurveyPageNavigator = /** @class */ (function (_super) {
     };
     SurveyPageNavigator.prototype.renderElement = function () {
         var _this = this;
-        var className = "svc-page-navigator__selector";
+        var className = "svc-page-navigator__selector svc-page-navigator__button";
         if (this.model.isPopupOpened)
-            className += " svc-page-navigator__selector--opened";
+            className += " svc-page-navigator__button--pressed";
         return (react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", { className: "svc-page-navigator", ref: this.containerRef, style: { display: this.model.visible ? "flex" : "none" } },
             (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", { className: className, onClick: function () { return _this.model.togglePageSelector(); }, title: this.model.pageSelectorCaption },
-                react__WEBPACK_IMPORTED_MODULE_4__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-page-navigator__navigator-icon", iconName: this.model.icon, size: 24, title: this.model.pageSelectorCaption }),
+                react__WEBPACK_IMPORTED_MODULE_4__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-page-navigator__button-icon", iconName: this.model.icon, size: "auto", title: this.model.pageSelectorCaption }),
                 react__WEBPACK_IMPORTED_MODULE_4__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Popup, { model: this.model.popupModel }))),
             react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", null, this.model.visibleItems.map(function (item) { return (react__WEBPACK_IMPORTED_MODULE_4__.createElement(SurveyPageNavigatorItem, { key: item.id, item: item })); }))));
     };
@@ -999,7 +1025,7 @@ var SurveyQuestionLinkValue = /** @class */ (function (_super) {
     SurveyQuestionLinkValue.prototype.renderElement = function () {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ActionButton__WEBPACK_IMPORTED_MODULE_4__.ActionButton, { classes: this.question.linkSetButtonCssClasses, click: function () { return _this.question.doLinkClick(); }, selected: this.question.isSelected, disabled: !this.question.isClickable, text: this.question.linkValueText, title: this.question.tooltip }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ActionButton__WEBPACK_IMPORTED_MODULE_4__.ActionButton, { classes: this.question.linkSetButtonCssClasses, click: function () { return _this.question.doLinkClick(); }, selected: this.question.isSelected, disabled: !this.question.isClickable, text: this.question.linkValueText, title: this.question.tooltip, iconName: this.question.iconName }),
             this.renderClear()));
     };
     return SurveyQuestionLinkValue;
@@ -1856,6 +1882,14 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
             this.model.attachToUI(props.page, this.rootRef.current);
         }
         this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.PageAdorner(props.creator, props.page);
+        this.model.isGhost = this.props.isGhost;
+    };
+    CreatorSurveyPageComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        var res = _super.prototype.shouldComponentUpdate.call(this, nextProps, nextState);
+        if (this.model) {
+            this.model.isGhost = this.props.isGhost;
+        }
+        return res;
     };
     CreatorSurveyPageComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
         _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
@@ -1869,16 +1903,14 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
     CreatorSurveyPageComponent.prototype.componentDidMount = function () {
         _super.prototype.componentDidMount.call(this);
         this.model.attachToUI(this.props.page, this.rootRef.current);
+        this.model.isGhost = this.props.isGhost;
     };
     CreatorSurveyPageComponent.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
         this.model.detachFromUI();
     };
     CreatorSurveyPageComponent.prototype.canRender = function () {
-        return (!!this.model &&
-            this.model.isPageLive &&
-            !!this.model.page &&
-            !!this.model.page.survey);
+        return _super.prototype.canRender.call(this);
     };
     CreatorSurveyPageComponent.prototype.renderElement = function () {
         var _this = this;
@@ -1912,7 +1944,7 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
             return actions;
         }
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-question__drag-area", onPointerDown: function (event) { return _this.model.onPointerDown(event); } },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-question__drag-element", size: 24, iconName: "icon-drag-area-indicator_24x16" }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-question__drag-element", size: "auto", iconName: "icon-drag-area-indicator_24x16" }),
             actions));
     };
     CreatorSurveyPageComponent.prototype.renderFooter = function () {
@@ -1967,7 +1999,7 @@ var PanelAdornerComponent = /** @class */ (function (_super) {
                         e.stopPropagation();
                         _this.model.addNewQuestion();
                     } },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-panel__add-new-question-icon", iconName: "icon-add_24x24", size: 24 }),
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-panel__add-new-question-icon", iconName: "icon-add_24x24", size: "auto" }),
                     react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-add-new-item-button__text" }, this.model.addNewQuestionText))) : null)));
     };
     PanelAdornerComponent.prototype.disableTabStop = function () {
@@ -2063,7 +2095,7 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
     };
     QuestionAdornerComponent.prototype.renderContent = function (allowInteractions) {
         var _this = this;
-        var content = this.renderElementContent();
+        var content = this.model.needToRenderContent ? this.renderElementContent() : null;
         //if (!allowInteractions) return <>{content}{this.renderFooter()}</>;
         return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: this.model.css(), onClick: function (e) { return _this.model.select(_this.model, new _events__WEBPACK_IMPORTED_MODULE_3__.ReactMouseEvent(e)); } },
             react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--left" }),
@@ -2072,7 +2104,7 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }),
             allowInteractions ? this.renderHeader() : null,
             content,
-            this.renderFooter()), undefined, { disableTabStop: this.disableTabStop() });
+            this.model.needToRenderContent ? this.renderFooter() : null), undefined, { disableTabStop: this.disableTabStop() });
     };
     QuestionAdornerComponent.prototype.renderHeader = function () {
         return survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.createElement("svc-question-header", { model: this.model });
@@ -2092,9 +2124,11 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
         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", { 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))));
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { ref: function (node) { return node && (!_this.model.renderedCollapsed ?
+                node.setAttribute("inert", "") : node.removeAttribute("inert")); }, className: this.model.cssCollapsedHiddenHeader }, (element.hasTitle ?
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.TitleElement, { element: element }) :
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: this.model.cssCollapsedHiddenTitle },
+                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,
@@ -2319,7 +2353,7 @@ var QuestionWrapperHeader = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-question__drag-area", onPointerDown: function (event) {
                 return _this.props.model.onPointerDown(event);
             } },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-question__drag-element", size: 24, iconName: "icon-drag-area-indicator_24x16" }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-question__drag-element", size: "auto", iconName: "icon-drag-area-indicator_24x16" }),
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-question__top-actions" },
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.props.model.topActionContainer, handleClick: false }))));
     };
@@ -2390,7 +2424,7 @@ var QuestionImageAdornerComponent = /** @class */ (function (_super) {
     QuestionImageAdornerComponent.prototype.renderChooseButton = function () {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-question-controls" }, this.model.allowEdit ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-context-button", onClick: function () { return _this.imageModel.chooseFile(_this.imageModel); } },
-            react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 24, iconName: "icon-choosefile" }))) : null));
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: "auto", iconName: "icon-choosefile" }))) : null));
     };
     QuestionImageAdornerComponent.prototype.renderElementPlaceholder = function () {
         return this.imageModel.isUploading ? this.renderLoadingPlaceholder() : this.renderChooseButton();
@@ -2581,6 +2615,9 @@ var RowWrapper = /** @class */ (function (_super) {
         return _super.call(this, props) || this;
     }
     RowWrapper.prototype.createModel = function (props) {
+        if (!!this.model) {
+            this.model.dispose();
+        }
         this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.RowViewModel(props.componentData.creator, props.row, null);
     };
     RowWrapper.prototype.getUpdatedModelProps = function () {
@@ -2589,6 +2626,14 @@ var RowWrapper = /** @class */ (function (_super) {
     RowWrapper.prototype.getStateElement = function () {
         return this.model;
     };
+    RowWrapper.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        this.model.subscribeElementChanges();
+    };
+    RowWrapper.prototype.componentWillUnmount = function () {
+        this.model.unsubscribeElementChanges();
+        _super.prototype.componentWillUnmount.call(this);
+    };
     RowWrapper.prototype.render = function () {
         return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { key: "svc-row-" + this.props.row.id, className: this.model.cssClasses },
             react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-row__drop-indicator svc-row__drop-indicator--top" }),
@@ -2603,6 +2648,74 @@ survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.regist
 });
 
 
+/***/ }),
+
+/***/ "./src/components/Search.tsx":
+/*!***********************************!*\
+  !*** ./src/components/Search.tsx ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SearchComponent: () => (/* binding */ SearchComponent)
+/* 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_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-core */ "survey-core");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
+
+
+
+
+var SearchComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SearchComponent, _super);
+    function SearchComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            filterString: _this.model.filterString || ""
+        };
+        return _this;
+    }
+    Object.defineProperty(SearchComponent.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SearchComponent.prototype.getStateElement = function () {
+        return this.model;
+    };
+    SearchComponent.prototype.renderElement = function () {
+        var _this = this;
+        if (!this.model.isVisible)
+            return null;
+        var onChange = function (e) {
+            var root = survey_core__WEBPACK_IMPORTED_MODULE_2__.settings.environment.root;
+            if (e.target === root.activeElement) {
+                _this.model.filterString = e.target.value;
+            }
+        };
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-search" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-search__search-icon" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { iconName: "icon-search", size: "auto" })),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { type: "text", className: "svc-search__input", "aria-label": this.model.filterStringPlaceholder, placeholder: this.model.filterStringPlaceholder, value: this.state.filterString, onChange: onChange }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-search__toolbar" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-search__toolbar-counter" }, this.model.matchCounterText),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyActionBar, { model: this.model.searchActionBar }))));
+    };
+    return SearchComponent;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-search", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SearchComponent, props);
+});
+
+
 /***/ }),
 
 /***/ "./src/components/SurfacePlaceholder.tsx":
@@ -3219,7 +3332,7 @@ __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 _Search__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Search */ "./src/side-bar/Search.tsx");
+/* harmony import */ var _components_Search__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components/Search */ "./src/components/Search.tsx");
 
 
 
@@ -3246,7 +3359,7 @@ var PropertyGridComponent = /** @class */ (function (_super) {
     };
     PropertyGridComponent.prototype.renderElement = function () {
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.model.rootCss },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Search__WEBPACK_IMPORTED_MODULE_3__.SearchComponent, { model: this.model.searchManager }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_Search__WEBPACK_IMPORTED_MODULE_3__.SearchComponent, { model: this.model.searchManager }),
             react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Survey, { model: this.model.survey })));
     };
     return PropertyGridComponent;
@@ -3306,74 +3419,6 @@ survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.regist
 });
 
 
-/***/ }),
-
-/***/ "./src/side-bar/Search.tsx":
-/*!*********************************!*\
-  !*** ./src/side-bar/Search.tsx ***!
-  \*********************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   SearchComponent: () => (/* binding */ SearchComponent)
-/* 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_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-core */ "survey-core");
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
-
-
-
-
-var SearchComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SearchComponent, _super);
-    function SearchComponent(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            filterString: _this.model.filterString || ""
-        };
-        return _this;
-    }
-    Object.defineProperty(SearchComponent.prototype, "model", {
-        get: function () {
-            return this.props.model;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SearchComponent.prototype.getStateElement = function () {
-        return this.model;
-    };
-    SearchComponent.prototype.renderElement = function () {
-        var _this = this;
-        if (!this.model.isVisible)
-            return null;
-        var onChange = function (e) {
-            var root = survey_core__WEBPACK_IMPORTED_MODULE_2__.settings.environment.root;
-            if (e.target === root.activeElement) {
-                _this.model.filterString = e.target.value;
-            }
-        };
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-search-editor_container" },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-search-editor_search-icon" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { iconName: "icon-search", size: "auto" })),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { type: "text", className: "spg-search-editor_input", "aria-label": this.model.filterStringPlaceholder, placeholder: this.model.filterStringPlaceholder, value: this.state.filterString, onChange: onChange }),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-search-editor_toolbar" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-search-editor_toolbar-counter" }, this.model.matchCounterText),
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyActionBar, { model: this.model.searchActionBar }))));
-    };
-    return SearchComponent;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
-
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-search", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SearchComponent, props);
-});
-
-
 /***/ }),
 
 /***/ "./src/side-bar/SideBar.tsx":
@@ -3587,11 +3632,8 @@ __webpack_require__.r(__webpack_exports__);
 /* 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_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-core */ "survey-core");
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
-
+/* 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__);
 
 
 
@@ -3612,18 +3654,19 @@ var SideBarPropertyGridHeader = /** @class */ (function (_super) {
     };
     SideBarPropertyGridHeader.prototype.renderElement = function () {
         var _this = this;
+        var button = (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.objectSelectionAction.buttonClassName, onClick: function () { return _this.objectSelectionAction.action(); } },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header-caption" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-sidebar__header-title" }, this.objectSelectionAction.title),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-sidebar__header-subtitle" }, this.objectSelectionAction.tooltip))), this.props.model);
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header svc-sidebar__header--tabbed" },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header-content", onClick: function () { return _this.objectSelectionAction.action(); } },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.objectSelectionAction.buttonClassName },
-                        react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header-caption" },
-                            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-sidebar__header-title" }, this.objectSelectionAction.title),
-                            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-sidebar__header-subtitle" }, this.objectSelectionAction.tooltip))),
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.Popup, { model: this.objectSelectionAction.popupModel, getTarget: survey_core__WEBPACK_IMPORTED_MODULE_2__.getActionDropdownButtonTarget })))));
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header-content" },
+                    button,
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Popup, { model: this.objectSelectionAction.popupModel })))));
     };
     return SideBarPropertyGridHeader;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-side-bar-property-grid-header", function (props) {
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-side-bar-property-grid-header", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SideBarPropertyGridHeader, props);
 });
 
@@ -3658,11 +3701,11 @@ var TabButtonComponent = /** @class */ (function (_super) {
     };
     TabButtonComponent.prototype.renderElement = function () {
         var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-menu-action" },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.props.model.buttonClassName, title: this.props.model.tooltip, onClick: function () { _this.props.model.action(); } },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-menu-action__icon" },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-menu-action__icon-container" },
-                        react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.props.model.iconName, size: 24 }))))));
+        var button = (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.props.model.buttonClassName, title: this.props.model.tooltip, onClick: function () { _this.props.model.action(); } },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-menu-action__icon" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-menu-action__icon-container" },
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.props.model.iconName, size: "auto" })))), this.props.model);
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-menu-action" }, button));
     };
     return TabButtonComponent;
 }(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
@@ -3808,13 +3851,10 @@ var TabDesignerComponent = /** @class */ (function (_super) {
         var _this = this;
         var renderedPages = [];
         if (this.creator.pageEditMode !== "bypage") {
-            var pages = this.creator.survey.pages;
+            var pages = this.model.pages;
             pages.forEach(function (page) {
-                renderedPages.push(_this.createRenderedPage(page));
+                renderedPages.push(_this.createRenderedPage(page, page == _this.model.newPage));
             });
-            if (this.model.showNewPage) {
-                renderedPages.push(this.renderNewPage("svc-page", this.model.newPage.id + "-ghost-new-page"));
-            }
         }
         else {
             var page2Display = this.model.pagesController.page2Display;
@@ -3825,15 +3865,15 @@ var TabDesignerComponent = /** @class */ (function (_super) {
         return renderedPages;
     };
     TabDesignerComponent.prototype.createRenderedPage = function (page, isGhostPage) {
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-page", "data-sv-drop-target-page": page.name, "data-sv-drop-target-survey-element": isGhostPage ? "newGhostPage" : page.name, key: page.id }, this.renderPage(page)));
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-page", "data-sv-drop-target-page": page.name, "data-sv-drop-target-survey-element": isGhostPage ? "newGhostPage" : page.name, key: page.id }, this.renderPage(page, isGhostPage)));
     };
     TabDesignerComponent.prototype.renderNewPage = function (className, key) {
         if (key === void 0) { key = ""; }
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, { key: key },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: className, "data-sv-drop-target-survey-element": "newGhostPage" }, !!this.model.newPage ? this.renderPage(this.model.newPage) : null)));
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: className, "data-sv-drop-target-survey-element": "newGhostPage" }, !!this.model.newPage ? this.renderPage(this.model.newPage, true) : null)));
     };
-    TabDesignerComponent.prototype.renderPage = function (pageV) {
-        return survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement("svc-page", { survey: this.creator.survey, page: pageV, creator: this.creator });
+    TabDesignerComponent.prototype.renderPage = function (pageV, isGhost) {
+        return survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement("svc-page", { survey: this.creator.survey, page: pageV, creator: this.creator, isGhost: isGhost });
     };
     TabDesignerComponent.prototype.renderElement = function () {
         var _this = this;
@@ -3879,7 +3919,7 @@ var TabDesignerComponent = /** @class */ (function (_super) {
                 : null,
             this.model.hasToolbar ?
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-tab-designer__toolbar" },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.model.actionContainer, handleClick: false }))
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.model.surfaceToolbar, handleClick: false }))
                 : null));
     };
     return TabDesignerComponent;
@@ -4631,7 +4671,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _Toolbox__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Toolbox */ "./src/toolbox/Toolbox.tsx");
 /* harmony import */ var _ToolboxItem__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ToolboxItem */ "./src/toolbox/ToolboxItem.tsx");
-/* harmony import */ var _side_bar_Search__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../side-bar/Search */ "./src/side-bar/Search.tsx");
+/* harmony import */ var _components_Search__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../components/Search */ "./src/components/Search.tsx");
 
 
 
@@ -4657,6 +4697,7 @@ var AdaptiveToolbox = /** @class */ (function (_super) {
     AdaptiveToolbox.prototype.componentWillUnmount = function () {
         this.manager && (this.manager.dispose());
         this.toolbox.unsubscribeRootElement();
+        this.toolbox.setRootElement(undefined);
         _super.prototype.componentWillUnmount.call(this);
     };
     AdaptiveToolbox.prototype.renderSearch = function () {
@@ -4666,7 +4707,7 @@ var AdaptiveToolbox = /** @class */ (function (_super) {
             null;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__search-container" },
             searchButton,
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_side_bar_Search__WEBPACK_IMPORTED_MODULE_6__.SearchComponent, { model: this.toolbox.searchManager }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_Search__WEBPACK_IMPORTED_MODULE_6__.SearchComponent, { model: this.toolbox.searchManager }),
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__category-separator svc-toolbox__category-separator--search" })));
     };
     AdaptiveToolbox.prototype.render = function () {
@@ -5092,7 +5133,7 @@ var SurveyCreatorToolboxItemGroup = /** @class */ (function (_super) {
             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: "auto", 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 })));
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Popup, { model: this.item.popupModel })));
     };
     return SurveyCreatorToolboxItemGroup;
 }(_ModelElement__WEBPACK_IMPORTED_MODULE_3__.CreatorModelElement));
@@ -5288,7 +5329,7 @@ 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.
+// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
 (() => {
 /*!******************************!*\
   !*** ./src/entries/index.ts ***!
@@ -5321,7 +5362,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   ReactDragEvent: () => (/* reexport safe */ _events__WEBPACK_IMPORTED_MODULE_51__.ReactDragEvent),
 /* harmony export */   ReactMouseEvent: () => (/* reexport safe */ _events__WEBPACK_IMPORTED_MODULE_51__.ReactMouseEvent),
 /* harmony export */   RowWrapper: () => (/* reexport safe */ _adorners_Row__WEBPACK_IMPORTED_MODULE_1__.RowWrapper),
-/* harmony export */   SearchComponent: () => (/* reexport safe */ _side_bar_Search__WEBPACK_IMPORTED_MODULE_54__.SearchComponent),
+/* harmony export */   SearchComponent: () => (/* reexport safe */ _components_Search__WEBPACK_IMPORTED_MODULE_54__.SearchComponent),
 /* harmony export */   SideBarDefaultHeader: () => (/* reexport safe */ _side_bar_SideBarDefaultHeader__WEBPACK_IMPORTED_MODULE_32__.SideBarDefaultHeader),
 /* harmony export */   SidebarComponent: () => (/* reexport safe */ _side_bar_SideBar__WEBPACK_IMPORTED_MODULE_35__.SidebarComponent),
 /* harmony export */   StylesManager: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_63__.StylesManager),
@@ -5426,7 +5467,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _events__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! ../events */ "./src/events.ts");
 /* harmony import */ var _side_bar_ObjectSelector__WEBPACK_IMPORTED_MODULE_52__ = __webpack_require__(/*! ../side-bar/ObjectSelector */ "./src/side-bar/ObjectSelector.tsx");
 /* harmony import */ var _side_bar_PropertyGrid__WEBPACK_IMPORTED_MODULE_53__ = __webpack_require__(/*! ../side-bar/PropertyGrid */ "./src/side-bar/PropertyGrid.tsx");
-/* harmony import */ var _side_bar_Search__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ../side-bar/Search */ "./src/side-bar/Search.tsx");
+/* harmony import */ var _components_Search__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ../components/Search */ "./src/components/Search.tsx");
 /* harmony import */ var _Switcher__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../Switcher */ "./src/Switcher.tsx");
 /* harmony import */ var _tabs_JsonErrorItem__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ../tabs/JsonErrorItem */ "./src/tabs/JsonErrorItem.tsx");
 /* harmony import */ var _custom_questions_SpinEditor__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ../custom-questions/SpinEditor */ "./src/custom-questions/SpinEditor.tsx");
@@ -5440,7 +5481,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.9");
+Version = "".concat("1.12.11");
 // import "@survey/creator/survey-creator-core.css";
 
 
@@ -5514,7 +5555,7 @@ Version = "".concat("1.12.9");
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_64__.checkLibraryVersion)("".concat("1.12.9"), "survey-creator-react");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_64__.checkLibraryVersion)("".concat("1.12.11"), "survey-creator-react");
 
 })();