survey-creator-react 1.12.6 → 1.12.8

package/index.html

@@ -16,7 +16,9 @@
   <script src="./node_modules/survey-core/survey.i18n.min.js"></script>
   <script src="./node_modules/survey-core/themes/index.js"></script>
   <script src="./node_modules/survey-react-ui/survey-react-ui.js"></script>
+  <script src="./node_modules/survey-creator-core/themes/index.js"></script>
   <script src="./node_modules/survey-creator-core/survey-creator-core.js"></script>
+  <script src="./node_modules/survey-creator-core/survey-creator-core.i18n.min.js"></script>
 
   <!--<script src="./build/survey-creator-react.js"></script>-->
   <link rel="stylesheet" type="text/css" href="./node_modules/survey-core/defaultV2.css" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-creator-react",
-  "version": "1.12.6",
+  "version": "1.12.8",
   "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.6",
-    "survey-react-ui": "1.12.6",
-    "survey-creator-core": "1.12.6"
+    "survey-core": "1.12.8",
+    "survey-react-ui": "1.12.8",
+    "survey-creator-core": "1.12.8"
   },
   "peerDependenciesMeta": {
     "ace-builds": {

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator React v1.12.6
+ * SurveyJS Creator React v1.12.8
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -118,7 +118,7 @@ var AddQuestionButtonComponent = /** @class */ (function (_super) {
                     _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("span", { className: "svc-text svc-text--normal svc-text--bold" }, this.model.addNewQuestionText),
+                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);
     };
@@ -783,7 +783,7 @@ var SurveyPageNavigatorItem = /** @class */ (function (_super) {
             } },
             react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", { className: "svc-page-navigator-item__dot", title: item.title }),
             react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", { className: "svc-page-navigator-item__banner" },
-                react__WEBPACK_IMPORTED_MODULE_4__.createElement("span", { className: "svc-text svc-text--small svc-text--bold" }, item.title),
+                react__WEBPACK_IMPORTED_MODULE_4__.createElement("span", { className: "svc-page-navigator-item__text" }, item.title),
                 react__WEBPACK_IMPORTED_MODULE_4__.createElement("span", { className: "svc-page-navigator-item__dot" }))))));
     };
     return SurveyPageNavigatorItem;
@@ -1414,6 +1414,8 @@ var SurveyCreatorComponent = /** @class */ (function (_super) {
         var areaClassName = "svc-full-container svc-creator__area svc-flex-column" + (this.props.creator.haveCommercialLicense ? "" : " svc-creator__area--with-banner");
         var contentWrapperClassName = "svc-creator__content-wrapper svc-flex-row" + (this.props.creator.isMobileView ? " svc-creator__content-wrapper--footer-toolbar" : "");
         var fullContainerClassName = "svc-flex-row svc-full-container" + (" svc-creator__side-bar--" + this.creator.sidebarLocation);
+        var creatorStyles = {};
+        (0,survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.assign)(creatorStyles, this.style, this.props.creator.themeVariables);
         var licenseBanner = null;
         if (!this.props.creator.haveCommercialLicense) {
             var htmlValue = { __html: this.props.creator.licenseText };
@@ -1421,8 +1423,9 @@ var SurveyCreatorComponent = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-creator__non-commercial-text", dangerouslySetInnerHTML: htmlValue })));
         }
         //AM: width unrecognized by react
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.creator.getRootCss(), ref: this.rootNode, style: this.style },
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.creator.getRootCss(), ref: this.rootNode, style: creatorStyles },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgBundleComponent, null),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.PopupModal, null),
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: areaClassName },
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: fullContainerClassName },
                     react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" },
@@ -1965,7 +1968,7 @@ var PanelAdornerComponent = /** @class */ (function (_super) {
                         _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("span", { className: "svc-text svc-text--normal svc-text--bold" }, this.model.addNewQuestionText))) : null)));
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-add-new-item-button__text" }, this.model.addNewQuestionText))) : null)));
     };
     PanelAdornerComponent.prototype.disableTabStop = function () {
         return true;
@@ -3242,8 +3245,7 @@ var PropertyGridComponent = /** @class */ (function (_super) {
         return _super.prototype.canRender.call(this);
     };
     PropertyGridComponent.prototype.renderElement = function () {
-        var rootClassName = this.model.searchEnabled ? "spg-container spg-container_search" : "spg-container";
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: rootClassName },
+        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(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Survey, { model: this.model.survey })));
     };
@@ -4129,7 +4131,7 @@ var TabLogicAddButtonComponent = /** @class */ (function (_super) {
                 e.stopPropagation();
                 _this.model.action();
             }, className: buttonClassName, title: this.model.title },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-text svc-text--normal svc-text--bold" }, this.model.title)));
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-add-new-item-button__text" }, this.model.title)));
     };
     return TabLogicAddButtonComponent;
 }(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
@@ -4225,7 +4227,7 @@ var TabPreviewTestSurveyAgainComponent = /** @class */ (function (_super) {
                 e.stopPropagation();
                 _this.model.action();
             }, className: buttonClassName, title: this.model.title },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-text svc-text--normal svc-text--bold" }, this.model.title)));
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-preview-test-again__text" }, this.model.title)));
     };
     return TabPreviewTestSurveyAgainComponent;
 }(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
@@ -4668,17 +4670,18 @@ var AdaptiveToolbox = /** @class */ (function (_super) {
     };
     AdaptiveToolbox.prototype.componentWillUnmount = function () {
         this.manager && (this.manager.dispose());
+        this.toolbox.unsubscribeRootElement();
         _super.prototype.componentWillUnmount.call(this);
     };
     AdaptiveToolbox.prototype.renderSearch = function () {
         var searchButton = this.toolbox.isCompactRendered ?
             react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ToolboxItem__WEBPACK_IMPORTED_MODULE_5__.SurveyCreatorToolboxTool, { item: this.toolbox.searchItem, creator: this.creator, parentModel: this.toolbox, isCompact: this.toolbox.isCompactRendered, key: "searchitem" }),
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__category-separator svc-toolbox__category-separator--search" })) :
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ToolboxItem__WEBPACK_IMPORTED_MODULE_5__.SurveyCreatorToolboxTool, { item: this.toolbox.searchItem, creator: this.creator, parentModel: this.toolbox, isCompact: this.toolbox.isCompactRendered, key: "searchitem" })) :
             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(_side_bar_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 () {
         var _this = this;
@@ -4688,12 +4691,15 @@ var AdaptiveToolbox = /** @class */ (function (_super) {
         var placeholder = this.toolbox.showPlaceholder ? react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__placeholder" }, this.toolbox.toolboxNoResultsFound) : null;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.rootRef, className: this.toolbox.classNames },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { onBlur: function (e) { return _this.toolbox.focusOut(e); }, className: "svc-toolbox__panel" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__scroller sv-drag-target-skipped", onScroll: function (event) { return _this.toolbox.onScroll(_this.toolbox, event); } },
-                    search,
-                    placeholder,
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__container" }, (this.toolbox.showInSingleCategory) ?
-                        (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__category" }, this.renderItems(this.toolbox.renderedActions, this.toolbox.isCompactRendered)))
-                        : this.renderCategories())))));
+                search,
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { onBlur: function (e) { return _this.toolbox.focusOut(e); }, className: "svc-toolbox__scroll-wrapper" },
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__scroller sv-drag-target-skipped", onScroll: function (event) { return _this.toolbox.onScroll(_this.toolbox, event); } },
+                        placeholder,
+                        react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__container" }, (this.toolbox.showInSingleCategory) ?
+                            (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__category" }, this.renderItems(this.toolbox.renderedActions, this.toolbox.isCompactRendered)))
+                            : this.renderCategories())),
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__scrollbar", onScroll: function (event) { return _this.toolbox.onScrollbarScroll(event.nativeEvent); } },
+                        react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__scrollbar-sizer" }))))));
     };
     return AdaptiveToolbox;
 }(_Toolbox__WEBPACK_IMPORTED_MODULE_4__.Toolbox));
@@ -4838,7 +4844,7 @@ var SurveyCreatorToolboxCategory = /** @class */ (function (_super) {
         var header = this.renderCategoryHeader();
         var items = this.renderCategoryContent();
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.class, key: this.category.name },
-            header,
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__category-header-wrapper" }, header),
             items));
     };
     SurveyCreatorToolboxCategory.prototype.renderCategoryHeader = function () {
@@ -4952,13 +4958,9 @@ var SurveyCreatorToolboxTool = /** @class */ (function (_super) {
         });
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: item.css, key: item.id },
             (item.needSeparator && !this.creator.toolbox.showCategoryTitles) ? (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__category-separator" })) : null,
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "sv-action__content", onPointerDown: function (event) {
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__tool-content sv-action__content", onPointerDown: function (event) {
                     event.persist();
                     _this.model.onPointerDown(event);
-                }, onMouseOver: function (event) {
-                    _this.model.onMouseOverTool(item, event);
-                }, onMouseLeave: function (event) {
-                    _this.model.onMouseLeave(item, event);
                 } }, itemComponent)));
     };
     return SurveyCreatorToolboxTool;
@@ -4998,17 +5000,27 @@ var SurveyCreatorToolboxItem = /** @class */ (function (_super) {
     };
     SurveyCreatorToolboxItem.prototype.render = function () {
         var _this = this;
-        return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__item " + this.item.className, tabIndex: 0, role: "button", "aria-label": this.item.tooltip, title: this.item.tooltip, onClick: function (event) {
+        var banner = (this.props.isCompact ?
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-toolbox__item-banner", onClick: function (event) {
+                    event.persist();
+                    _this.model.click(event);
+                } },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 24, iconName: this.item.iconName, className: "svc-toolbox__item-icon", title: this.item.tooltip }),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", null, this.item.title))
+            :
+                null);
+        var item = (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.item.renderedCss, tabIndex: 0, role: "button", "aria-label": this.item.tooltip, onClick: function (event) {
                 event.persist();
                 _this.model.click(event);
             } },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-toolbox__item-container" }, !!this.item.iconName ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 24, iconName: this.item.iconName, title: this.item.tooltip }) : null),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-toolbox__item-container" }, !!this.item.iconName ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 24, iconName: this.item.iconName }) : null),
             (this.props.isCompact ?
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-toolbox__item-banner svc-item__banner" },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 24, iconName: this.item.iconName, className: "svc-toolbox__item-icon", title: this.item.tooltip }),
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-toolbox__item-title" }, this.item.title))
+                null
                 :
                     react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-toolbox__item-title" }, this.item.title))));
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
+            item,
+            banner));
     };
     return SurveyCreatorToolboxItem;
 }(_ModelElement__WEBPACK_IMPORTED_MODULE_4__.CreatorModelElement));
@@ -5093,8 +5105,8 @@ var SurveyCreatorToolboxItemGroup = /** @class */ (function (_super) {
         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, 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 }));
+                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;
 }(_ModelElement__WEBPACK_IMPORTED_MODULE_3__.CreatorModelElement));
@@ -5442,7 +5454,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.6");
+Version = "".concat("1.12.8");
 // import "@survey/creator/survey-creator-core.css";
 
 
@@ -5516,7 +5528,7 @@ Version = "".concat("1.12.6");
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_64__.checkLibraryVersion)("".concat("1.12.6"), "survey-creator-react");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_64__.checkLibraryVersion)("".concat("1.12.8"), "survey-creator-react");
 
 })();