survey-creator-react 2.2.0 → 2.2.2

package/package.json

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

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator React v2.2.0
+ * SurveyJS Creator React v2.2.2
  * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -1332,12 +1332,12 @@ var SurveyLocStringEditor = /** @class */ (function (_super) {
             if (this.htmlValue.__html !== this.locString.renderedHtml) {
                 this.htmlValue = { __html: this.locString.renderedHtml };
             }
-            control = (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { role: "textbox", ref: this.svStringEditorRef, className: "sv-string-editor sv-string-editor--html", contentEditable: this.contentEditable, spellCheck: false, "aria-placeholder": this.placeholder, "aria-label": this.placeholder || "content editable", suppressContentEditableWarning: true, 
+            control = (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { role: "textbox", ref: this.svStringEditorRef, className: "sv-string-editor sv-string-editor--html", contentEditable: this.contentEditable, spellCheck: false, "aria-placeholder": this.placeholder, "aria-label": this.placeholder || "content editable", suppressContentEditableWarning: true, tabIndex: this.baseModel.tabIndex, 
                 // style={this.style}
                 dangerouslySetInnerHTML: this.htmlValue, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onMouseUp: this.onMouseUp, onClick: this.edit }));
         }
         else {
-            control = (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { role: "textbox", ref: this.svStringEditorRef, className: "sv-string-editor", contentEditable: this.contentEditable, spellCheck: false, "aria-placeholder": this.placeholder, "aria-label": this.placeholder || "content editable", suppressContentEditableWarning: true, 
+            control = (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { role: "textbox", ref: this.svStringEditorRef, className: "sv-string-editor", contentEditable: this.contentEditable, tabIndex: this.baseModel.tabIndex, spellCheck: false, "aria-placeholder": this.placeholder, "aria-label": this.placeholder || "content editable", suppressContentEditableWarning: true, 
                 // style={this.style}
                 key: this.locString.renderedHtml, onBlur: this.onBlur, onInput: this.onInput, onPaste: this.onPaste, onCompositionStart: this.onCompositionStart, onCompositionEnd: this.onCompositionEnd, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp, onMouseUp: this.onMouseUp, onClick: this.edit }, this.locString.renderedHtml));
         }
@@ -1618,11 +1618,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 react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ "react-dom");
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-core */ "survey-core");
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_4__);
-
+/* 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__);
 
 
 
@@ -1646,21 +1643,28 @@ var TabbedMenuComponent = /** @class */ (function (_super) {
     };
     TabbedMenuComponent.prototype.renderElement = function () {
         var items = this.model.renderedActions.map(function (item) { return react__WEBPACK_IMPORTED_MODULE_1__.createElement(TabbedMenuItemWrapper, { item: item, key: item.renderedId }); });
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.rootRef, className: "svc-tabbed-menu", role: "tablist" }, items));
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.rootRef, className: "svc-tabbed-menu", role: "tablist", style: this.model.getRootStyle() }, items));
+    };
+    TabbedMenuComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        var container = this.rootRef.current;
+        if (!container)
+            return;
+        this.model.initResponsivityManager(container);
     };
     TabbedMenuComponent.prototype.componentDidMount = function () {
         _super.prototype.componentDidMount.call(this);
         var container = this.rootRef.current;
         if (!container)
             return;
-        this.manager = new survey_core__WEBPACK_IMPORTED_MODULE_3__.ResponsivityManager(container, this.model);
+        this.model.initResponsivityManager(container);
     };
     TabbedMenuComponent.prototype.componentWillUnmount = function () {
-        this.manager && (this.manager.dispose());
+        this.model.resetResponsivityManager();
         _super.prototype.componentWillUnmount.call(this);
     };
     return TabbedMenuComponent;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.SurveyElementBase));
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
 
 var TabbedMenuItemWrapper = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(TabbedMenuItemWrapper, _super);
@@ -1685,7 +1689,7 @@ var TabbedMenuItemWrapper = /** @class */ (function (_super) {
             css += " " + this.item.css;
         }
         css += (!this.item.isVisible ? " sv-action--hidden" : "");
-        var component = survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.createElement(this.item.component || "svc-tabbed-menu-item", { item: this.item });
+        var component = survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.createElement(this.item.component || "svc-tabbed-menu-item", { item: this.item });
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { key: this.item.id, className: css, ref: this.ref },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "sv-action__content" }, component)));
     };
@@ -1714,7 +1718,7 @@ var TabbedMenuItemWrapper = /** @class */ (function (_super) {
         this.item.updateModeCallback = undefined;
     };
     return TabbedMenuItemWrapper;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.SurveyElementBase));
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
 var TabbedMenuItemComponent = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(TabbedMenuItemComponent, _super);
     function TabbedMenuItemComponent() {
@@ -1732,14 +1736,14 @@ var TabbedMenuItemComponent = /** @class */ (function (_super) {
     };
     TabbedMenuItemComponent.prototype.render = function () {
         var item = this.item;
-        return ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { role: "tab", id: "tab-" + item.id, "aria-selected": item.active, "aria-controls": "scrollableDiv-" + item.id, className: item.getRootCss(), onClick: function () { return item.action(item); } },
+        return ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { role: "tab", id: "tab-" + item.id, "aria-selected": item.active, "aria-controls": "scrollableDiv-" + item.id, 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_4__.SvgIcon, { iconName: item.iconName, className: item.getIconCss(), size: "auto", title: item.tooltip || 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_4__.SurveyElementBase));
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.registerElement("svc-tabbed-menu-item", function (props) {
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-tabbed-menu-item", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_1__.createElement(TabbedMenuItemComponent, props);
 });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TabbedMenuComponent);
@@ -3354,7 +3358,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_63__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_63___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_63__);
 var Version;
-Version = "".concat("2.2.0");
+Version = "".concat("2.2.2");
 // import "@survey/creator/survey-creator-core.css";
 
 
@@ -3426,7 +3430,7 @@ Version = "".concat("2.2.0");
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_63__.checkLibraryVersion)("".concat("2.2.0"), "survey-creator-react");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_63__.checkLibraryVersion)("".concat("2.2.2"), "survey-creator-react");
 
 
 /***/ }),
@@ -4935,14 +4939,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_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 _ToolboxItem__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ToolboxItem */ "./src/toolbox/ToolboxItem.tsx");
-/* harmony import */ var _components_Search__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/Search */ "./src/components/Search.tsx");
-/* harmony import */ var _ToolboxCategory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./ToolboxCategory */ "./src/toolbox/ToolboxCategory.tsx");
-
+/* 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 _ToolboxItem__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ToolboxItem */ "./src/toolbox/ToolboxItem.tsx");
+/* harmony import */ var _components_Search__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/Search */ "./src/components/Search.tsx");
+/* harmony import */ var _ToolboxCategory__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ToolboxCategory */ "./src/toolbox/ToolboxCategory.tsx");
 
 
 
@@ -4956,17 +4957,22 @@ var AdaptiveToolbox = /** @class */ (function (_super) {
         _this.rootRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
         return _this;
     }
+    AdaptiveToolbox.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        var container = this.rootRef.current;
+        if (container) {
+            this.toolbox.afterRender(container);
+        }
+    };
     AdaptiveToolbox.prototype.componentDidMount = function () {
         _super.prototype.componentDidMount.call(this);
         var container = this.rootRef.current;
-        this.toolbox.setRootElement(container);
-        if (!container)
-            return;
-        this.manager = new survey_core__WEBPACK_IMPORTED_MODULE_2__.VerticalResponsivityManager(this.toolbox.containerElement, this.toolbox);
+        if (container) {
+            this.toolbox.afterRender(container);
+        }
     };
     AdaptiveToolbox.prototype.componentWillUnmount = function () {
-        this.manager && (this.manager.dispose());
-        this.toolbox.setRootElement(undefined);
+        this.toolbox.beforeDestroy();
         _super.prototype.componentWillUnmount.call(this);
     };
     Object.defineProperty(AdaptiveToolbox.prototype, "creator", {
@@ -4990,43 +4996,41 @@ var AdaptiveToolbox = /** @class */ (function (_super) {
         var _this = this;
         if (isCompact === void 0) { isCompact = false; }
         return items.map(function (item, itemIndex) {
-            return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ToolboxItem__WEBPACK_IMPORTED_MODULE_4__.SurveyCreatorToolboxTool, { item: item, creator: _this.creator, parentModel: _this.toolbox, isCompact: isCompact, key: item.renderedId });
+            return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ToolboxItem__WEBPACK_IMPORTED_MODULE_3__.SurveyCreatorToolboxTool, { item: item, creator: _this.creator, parentModel: _this.toolbox, isCompact: isCompact, key: item.renderedId });
         });
     };
     AdaptiveToolbox.prototype.renderCategories = function () {
         var _this = this;
         return this.toolbox.categories.map(function (category, index) {
-            return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ToolboxCategory__WEBPACK_IMPORTED_MODULE_6__.SurveyCreatorToolboxCategory, { category: category, toolbox: _this.toolbox, key: "category" + index });
+            return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ToolboxCategory__WEBPACK_IMPORTED_MODULE_5__.SurveyCreatorToolboxCategory, { category: category, toolbox: _this.toolbox, key: "category" + index });
         });
     };
     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_4__.SurveyCreatorToolboxTool, { item: this.toolbox.searchItem, creator: this.creator, parentModel: this.toolbox, isCompact: this.toolbox.isCompactRendered, key: "searchitem" })) :
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ToolboxItem__WEBPACK_IMPORTED_MODULE_3__.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(_components_Search__WEBPACK_IMPORTED_MODULE_5__.SearchComponent, { model: this.toolbox.searchManager }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_Search__WEBPACK_IMPORTED_MODULE_4__.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;
-        if (!this.toolbox.hasActions)
-            return null;
         var search = this.toolbox.showSearch ? this.renderSearch() : null;
         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 },
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.rootRef, className: this.toolbox.classNames, style: this.toolbox.getRootStyle() },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { onBlur: function (e) { return _this.toolbox.focusOut(e); }, className: "svc-toolbox__panel" },
                 search,
                 placeholder,
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.Scroll, null, (this.toolbox.showInSingleCategory) ?
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Scroll, null, (this.toolbox.showInSingleCategory) ?
                     (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__category" }, this.renderItems(this.toolbox.renderedActions, this.toolbox.isCompactRendered)))
                     : this.renderCategories()))));
     };
     return AdaptiveToolbox;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-toolbox", function (props) {
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-toolbox", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_1__.createElement(AdaptiveToolbox, props);
 });