survey-creator-js 2.3.3 → 2.3.5

package/fesm/survey-creator-js.mjs

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator UI v2.3.3
+ * SurveyJS Creator UI v2.3.5
  * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -99,7 +99,7 @@ class TabbedMenuItemComponent extends SurveyElementBase {
     }
     render() {
         const item = this.item;
-        return (attachKey2click(React.createElement("div", { role: "tab", id: "tab-" + item.id, "aria-selected": item.active, "aria-controls": "scrollableDiv-" + item.id, className: item.getRootCss(), onClick: () => item.action(item) },
+        return (attachKey2click(React.createElement("div", { role: "tab", id: "tab-" + item.id, "aria-selected": item.active, "aria-controls": "scrollableDiv-" + item.id, className: item.getRootCss(), onClick: () => item.doAction() },
             item.hasTitle ? React.createElement("span", { className: item.getTitleCss() }, item.title) : null,
             item.hasIcon ? React.createElement(SvgIcon, { iconName: item.iconName, className: item.getIconCss(), size: "auto", title: item.tooltip || item.title }) : null)));
     }
@@ -1410,7 +1410,7 @@ class SurveyCreatorToolboxItem extends CreatorModelElement {
             (this.props.isCompact ?
                 null
                 :
-                    React.createElement("span", { className: "svc-toolbox__item-title" }, this.item.title))));
+                    React.createElement("span", { className: "svc-toolbox__item-title" }, this.item.title))), undefined, { disableTabStop: !this.model.toolboxItem.enabled });
         return (React.createElement(React.Fragment, null,
             item,
             banner));
@@ -1559,7 +1559,7 @@ class SearchComponent extends SurveyElementBase {
         return (React.createElement("div", { className: "svc-search" },
             React.createElement("div", { className: "svc-search__search-icon" },
                 React.createElement(SvgIcon, { iconName: "icon-search", size: "auto" })),
-            React.createElement("input", { type: "text", className: "svc-search__input", "aria-label": this.model.filterStringPlaceholder, placeholder: this.model.filterStringPlaceholder, value: this.state.filterString, onChange: onChange }),
+            React.createElement("input", { type: "text", className: "svc-search__input", "aria-label": this.model.filterStringPlaceholder, placeholder: this.model.filterStringPlaceholder, value: this.state.filterString, onChange: onChange, tabIndex: this.model.getTabIndex() }),
             React.createElement("div", { className: "svc-search__toolbar" },
                 React.createElement("div", { className: "svc-search__toolbar-counter" }, this.model.matchCounterText),
                 React.createElement(SurveyActionBar, { model: this.model.searchActionBar }))));
@@ -2232,26 +2232,19 @@ class TabDesignerComponent extends SurveyElementBase {
         if (this.creator.pageEditMode !== "bypage") {
             const pages = this.model.pages;
             pages.forEach((page) => {
-                renderedPages.push(this.createRenderedPage(page, page == this.model.newPage));
+                renderedPages.push(this.createRenderedPage(page, "svc-page", page == this.model.newPage));
             });
         }
         else {
             const page2Display = this.model.pagesController.page2Display;
             if (!!page2Display) {
-                renderedPages.push(this.createRenderedPage(page2Display, this.model.newPage === page2Display));
+                renderedPages.push(this.createRenderedPage(page2Display, "svc-page", this.model.newPage === page2Display));
             }
         }
         return renderedPages;
     }
-    createRenderedPage(page, isGhostPage) {
-        return (React.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)));
-    }
-    renderNewPage(className, key = "") {
-        return (React.createElement(React.Fragment, { key: key },
-            React.createElement("div", { className: className, "data-sv-drop-target-survey-element": "newGhostPage" }, !!this.model.newPage ? this.renderPage(this.model.newPage, true) : null)));
-    }
-    renderPage(pageV, isGhost) {
-        return ReactElementFactory.Instance.createElement("svc-page", { survey: this.creator.survey, page: pageV, creator: this.creator, isGhost });
+    createRenderedPage(page, className, isGhostPage) {
+        return React.createElement(PageWrapperComponent, { key: page === null || page === void 0 ? void 0 : page.id, page: page, isGhost: isGhostPage, creator: this.creator, className: className });
     }
     renderElement() {
         const designerTabClassName = "svc-tab-designer " + this.model.getRootCss();
@@ -2275,7 +2268,7 @@ class TabDesignerComponent extends SurveyElementBase {
             surveyHeader,
             React.createElement("div", { className: "svc-designer__placeholder-container", "data-sv-drop-target-survey-element": "newGhostPage" },
                 this.renderPlaceHolderContent(),
-                this.renderNewPage("svc-designer-placeholder-page"))));
+                this.createRenderedPage(this.model.newPage, "svc-designer-placeholder-page", true))));
     }
     renderPlaceHolderContent() {
         return React.createElement(SurfacePlaceholder, { name: "designer", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText });
@@ -2310,6 +2303,43 @@ class TabDesignerComponent extends SurveyElementBase {
 ReactElementFactory.Instance.registerElement("svc-tab-designer", (props) => {
     return React.createElement(TabDesignerComponent, props);
 });
+class PageWrapperComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.id = `PageWrapperCallback_${++PageWrapperComponent.ID}`;
+        this.state = { changed: 0 };
+    }
+    render() {
+        var _a, _b;
+        const pageContent = !!this.props.page ? ReactElementFactory.Instance.createElement("svc-page", { survey: this.props.creator.survey, page: this.props.page, creator: this.props.creator, isGhost: this.props.isGhost }) : null;
+        return React.createElement("div", { className: this.props.className, "data-sv-drop-target-page": (_a = this.props.page) === null || _a === void 0 ? void 0 : _a.name, "data-sv-drop-target-survey-element": this.props.isGhost ? "newGhostPage" : (_b = this.props.page) === null || _b === void 0 ? void 0 : _b.name }, pageContent);
+    }
+    setupCallback(page) {
+        if (!page)
+            return;
+        page.registerFunctionOnPropertyValueChanged("name", () => {
+            this.setState({ changed: !!this.state && this.state.changed ? this.state.changed + 1 : 1 });
+        }, this.id);
+    }
+    clearCallback(page) {
+        if (!page)
+            return;
+        page.unRegisterFunctionOnPropertyValueChanged("name");
+    }
+    componentDidUpdate(prevProps, prevState) {
+        if (prevProps.page !== this.props.page) {
+            this.clearCallback(prevProps.page);
+            this.setupCallback(this.props.page);
+        }
+    }
+    componentDidMount() {
+        this.setupCallback(this.props.page);
+    }
+    componentWillUnmount() {
+        this.clearCallback(this.props.page);
+    }
+}
+PageWrapperComponent.ID = 0;
 
 class TabJsonEditorErrorsComponent extends SurveyElementBase {
     getStateElement() {
@@ -2849,8 +2879,8 @@ ReactQuestionFactory.Instance.registerQuestion("sv-boolean-switch", (props) => {
 RendererFactory.Instance.registerRenderer("boolean", "switch", "sv-boolean-switch");
 
 let Version;
-Version = `${"2.3.3"}`;
-checkLibraryVersion(`${"2.3.3"}`, "survey-creator-react");
+Version = `${"2.3.5"}`;
+checkLibraryVersion(`${"2.3.5"}`, "survey-creator-react");
 
 function renderSurveyCreator(creator, element, props = {}) {
     let node = element;