survey-creator-react 1.12.13 → 1.12.15

package/index.html

@@ -8,8 +8,8 @@
   <meta name="description" content="SurveyJS Creator Demo" />
   <title>SurveyJS Creator React</title>
   <!-- <script src="https://cdn.accesslint.com/accesslint-1.1.2.js"></script> -->
-  <script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
+  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
 
   <script src="./node_modules/survey-core/survey.core.js"></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-creator-react",
-  "version": "1.12.13",
+  "version": "1.12.15",
   "description": "Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.",
   "keywords": [
     "Survey",
@@ -27,11 +27,11 @@
   "typings": "./typings/entries/index.d.ts",
   "peerDependencies": {
     "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.13",
-    "survey-react-ui": "1.12.13",
-    "survey-creator-core": "1.12.13"
+    "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": "1.12.15",
+    "survey-react-ui": "1.12.15",
+    "survey-creator-core": "1.12.15"
   },
   "peerDependenciesMeta": {
     "ace-builds": {

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator React v1.12.13
+ * SurveyJS Creator React v1.12.15
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -737,38 +737,15 @@ var SurveyPageNavigator = /** @class */ (function (_super) {
     SurveyPageNavigator.prototype.getStateElement = function () {
         return this.model;
     };
-    Object.defineProperty(SurveyPageNavigator.prototype, "scrollableContainer", {
-        get: function () {
-            var el = this.containerRef.current;
-            if (!!el) {
-                var self_1 = this;
-                return el.parentElement.parentElement.parentElement;
-            }
-            return el;
-        },
-        enumerable: false,
-        configurable: true
-    });
     SurveyPageNavigator.prototype.componentDidMount = function () {
         _super.prototype.componentDidMount.call(this);
         if (this.props.pageEditMode !== "bypage") {
             var el = this.containerRef.current;
-            if (!!el) {
-                var self_2 = this;
-                el.parentElement.parentElement.parentElement.onscroll = function (ev) {
-                    return self_2.model.onContainerScroll(ev.currentTarget);
-                };
-                self_2.model.setItemsContainer(el.parentElement);
-                self_2.model.setScrollableContainer(el.parentElement.parentElement.parentElement);
-            }
+            this.model.attachToUI(el);
         }
     };
     SurveyPageNavigator.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
-        var el = this.containerRef.current;
-        if (!!el) {
-            el.parentElement.parentElement.parentElement.onscroll = undefined;
-        }
         this.model.stopItemsContainerHeightObserver();
         this.model.setScrollableContainer(undefined);
     };
@@ -807,10 +784,12 @@ var SurveyPageNavigatorItem = /** @class */ (function (_super) {
                 item.action(item);
                 e.stopPropagation();
             } },
-            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__dot", title: item.title },
+                react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", { className: "svc-page-navigator-item__dot-content" })),
             react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", { className: "svc-page-navigator-item__banner" },
                 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" }))))));
+                react__WEBPACK_IMPORTED_MODULE_4__.createElement("span", { className: "svc-page-navigator-item__dot" },
+                    react__WEBPACK_IMPORTED_MODULE_4__.createElement("span", { className: "svc-page-navigator-item__dot-content" })))))));
     };
     return SurveyPageNavigatorItem;
 }(_ModelElement__WEBPACK_IMPORTED_MODULE_5__.CreatorModelElement));
@@ -1182,7 +1161,9 @@ __webpack_require__.r(__webpack_exports__);
 var SurveyLocStringEditor = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyLocStringEditor, _super);
     function SurveyLocStringEditor(props) {
-        var _this = _super.call(this, props) || this;
+        var _this = this;
+        var _a;
+        _this = _super.call(this, props) || this;
         _this.onChangedHandler = function (sender, options) {
             _this.setState({ changed: !!_this.state && _this.state.changed ? _this.state.changed + 1 : 1 });
         };
@@ -1231,6 +1212,9 @@ var SurveyLocStringEditor = /** @class */ (function (_super) {
             _this.locString["__isEditing"] = true;
             _this.baseModel.onClick(event);
         };
+        _this.htmlValue = {
+            __html: (_a = _this.locString) === null || _a === void 0 ? void 0 : _a.renderedHtml
+        };
         _this.state = { changed: 0 };
         _this.svStringEditorRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
         return _this;
@@ -1332,10 +1316,12 @@ var SurveyLocStringEditor = /** @class */ (function (_super) {
         }
         var control = null;
         if (this.locString.hasHtml) {
-            var htmlValue = { __html: this.locString.renderedHtml };
+            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, 
                 // style={this.style}
-                dangerouslySetInnerHTML: htmlValue, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onMouseUp: this.onMouseUp, onClick: this.edit }));
+                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, 
@@ -3856,6 +3842,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _PageNavigator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../PageNavigator */ "./src/PageNavigator.tsx");
 /* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+/* harmony import */ var _components_Scroll__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/Scroll */ "./src/components/Scroll.tsx");
+
 
 
 
@@ -3941,7 +3929,8 @@ var TabDesignerComponent = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-flex-column" }, this.model.isToolboxVisible ? survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement("svc-toolbox", { model: this.creator }) : null),
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: designerTabClassName, onClick: function () { return _this.model.clickDesigner(); } },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-tab-designer_content" }, this.model.showPlaceholder ? this.renderPlaceHolder() : this.renderTabContent()))));
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_Scroll__WEBPACK_IMPORTED_MODULE_5__.ScrollComponent, null,
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-tab-designer_content" }, this.model.showPlaceholder ? this.renderPlaceHolder() : this.renderTabContent())))));
     };
     TabDesignerComponent.prototype.renderHeader = function (condition) {
         if (!condition)
@@ -3965,22 +3954,22 @@ var TabDesignerComponent = /** @class */ (function (_super) {
     TabDesignerComponent.prototype.renderTabContent = function () {
         var survey = this.creator.survey;
         var surveyHeader = this.renderHeader(this.creator.allowEditSurveyTitle);
-        var style = (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__assign)({}, this.creator.designTabSurveyThemeVariables);
-        if (!!survey.width) {
-            style.maxWidth = survey.renderedWidth;
-        }
+        var style = (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__assign)({}, this.model.surveyThemeVariables);
+        style.maxWidth = survey.renderedWidth;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.model.designerCss, style: style },
                 surveyHeader,
                 this.getRenderedPages()),
-            this.creator.showPageNavigator ?
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-tab-designer__page-navigator" },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(_PageNavigator__WEBPACK_IMPORTED_MODULE_3__.SurveyPageNavigator, { pagesController: this.model.pagesController, pageEditMode: this.model.creator.pageEditMode }))
-                : 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.surfaceToolbar, handleClick: false }))
-                : null));
+            !this.creator.isMobileView ? react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-tab-designer__tools" }, [
+                this.creator.showPageNavigator ?
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { key: 1, className: "svc-tab-designer__page-navigator" },
+                        react__WEBPACK_IMPORTED_MODULE_1__.createElement(_PageNavigator__WEBPACK_IMPORTED_MODULE_3__.SurveyPageNavigator, { pagesController: this.model.pagesController, pageEditMode: this.model.creator.pageEditMode }))
+                    : null,
+                this.model.hasToolbar ?
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { key: 2, className: "svc-tab-designer__toolbar" },
+                        react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.model.surfaceToolbar, handleClick: false }))
+                    : null
+            ]) : null));
     };
     return TabDesignerComponent;
 }(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
@@ -4749,12 +4738,17 @@ var AdaptiveToolbox = /** @class */ (function (_super) {
         return _this;
     }
     AdaptiveToolbox.prototype.componentDidMount = function () {
+        var _this = this;
         _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, this.toolbox.itemSelector, null, undefined, function (callback) { return setTimeout(callback); });
+        this.manager = new survey_core__WEBPACK_IMPORTED_MODULE_2__.VerticalResponsivityManager(this.toolbox.containerElement, this.toolbox, this.toolbox.itemSelector, null, undefined, function (callback) { return setTimeout(function () {
+            if (!_this.toolbox.isResponsivenessDisabled) {
+                callback();
+            }
+        }, 10); });
     };
     AdaptiveToolbox.prototype.componentWillUnmount = function () {
         this.manager && (this.manager.dispose());
@@ -5491,7 +5485,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("1.12.13");
+Version = "".concat("1.12.15");
 // import "@survey/creator/survey-creator-core.css";
 
 
@@ -5564,7 +5558,7 @@ Version = "".concat("1.12.13");
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_63__.checkLibraryVersion)("".concat("1.12.13"), "survey-creator-react");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_63__.checkLibraryVersion)("".concat("1.12.15"), "survey-creator-react");
 
 })();