survey-creator-react 3.0.0 → 3.0.1

package/package.json

@@ -1,33 +1,40 @@
 {
   "name": "survey-creator-react",
-  "version": "3.0.0",
-  "description": "A white-label drag-and-drop form builder for React that lets you design complex, interactive forms and surveys without writing code. It generates JSON schemas used by the SurveyJS Form Library to render dynamic forms in your React app.",
+  "version": "3.0.1",
+  "description": "Embeddable SurveyJS drag-and-drop form builder for JSON-based forms in React. Create dynamic surveys, polls, quizzes, and other forms, configure conditional logic and validation, and customize the editor UI.",
   "author": "DevSoft Baltic OU <info@devsoftbaltic.com>",
   "homepage": "https://surveyjs.io/",
   "license": "SEE LICENSE IN LICENSE",
   "licenseUrl": "https://surveyjs.io/licensing",
   "keywords": [
     "react",
+    "react-component",
+    "react-form-builder",
     "survey",
     "form",
     "surveyjs",
-    "survey-library",
-    "react-component",
+    "survey-creator",
+    "survey-builder",
+    "survey-editor",
     "form-builder",
-    "dynamic-form-builder",
+    "form-editor",
+    "json-form-builder",
+    "json-form-editor",
+    "json-forms",
     "drag-and-drop-form-builder",
-    "form-library",
-    "form-management",
+    "visual-form-builder",
+    "no-code-form-builder",
+    "dynamic-form-builder",
+    "conditional-logic",
+    "embeddable",
     "questionnaire",
     "data-collection",
-    "ui-component",
-    "json",
-    "json-schema",
-    "react-schema-form",
-    "survey-creator",
-    "survey-builder",
-    "client-side",
-    "frontend",
+    "bootstrap",
+    "bootswatch",
+    "mui",
+    "material-ui",
+    "shadcn",
+    "shadcn-ui",
     "javascript",
     "typescript"
   ],
@@ -60,9 +67,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": "3.0.0",
-    "survey-react-ui": "3.0.0",
-    "survey-creator-core": "3.0.0"
+    "survey-core": "3.0.1",
+    "survey-react-ui": "3.0.1",
+    "survey-creator-core": "3.0.1"
   },
   "peerDependenciesMeta": {
     "ace-builds": {

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v3.0.0
+ * SurveyJS Creator v3.0.1
  * (c) 2015-2026 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -190,6 +190,7 @@
                 React__namespace.createElement(surveyReactUi.SvgBundleComponent, null),
                 React__namespace.createElement(surveyReactUi.PopupModal, null),
                 React__namespace.createElement("div", { className: areaClassName },
+                    this.renderCollabBar(),
                     React__namespace.createElement("div", { className: fullContainerClassName },
                         React__namespace.createElement("div", { className: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" },
                             React__namespace.createElement("div", { className: "svc-top-bar" },
@@ -210,6 +211,15 @@
                     licenseBanner,
                     React__namespace.createElement(surveyReactUi.NotifierComponent, { notifier: creator.notifier }))));
         }
+        // The strip is a plain ComponentContainerModel, so the generic container
+        // component draws it. `collabBar` is typed as Base in creator-core to keep the
+        // creator free of a dependency on the collaboration plugin, hence the cast.
+        renderCollabBar() {
+            const bar = this.creator.collabBar;
+            if (!bar)
+                return null;
+            return surveyReactUi.ReactElementFactory.Instance.createElement("svc-component-container", { model: bar.container });
+        }
         renderActiveTab() {
             const creator = this.props.creator;
             return this.renderCreatorTab(creator.activeTabMenuItem);
@@ -779,6 +789,49 @@
         return React__namespace.createElement(CellQuestionDropdownAdornerComponent, props);
     });
 
+    // The flattened choice list of a dropdown/tagbox question in the translation side-by-side
+    // panes. Chrome-free: no designer adorner, no itemvalue wrappers - the choice texts render
+    // through the survey's string renderer (editable in the target pane, plain in the source one).
+    class TranslationDropdownQuestionComponent extends CreatorModelElement {
+        createModel(props) {
+            if (!!this.model) {
+                this.model.dispose();
+            }
+            this.model = new surveyCreatorCore.TranslationDropdownViewModel(props.question, props.componentData ? props.componentData.translation : undefined);
+        }
+        getUpdatedModelProps() {
+            return ["question", "componentData"];
+        }
+        getStateElement() {
+            return this.model;
+        }
+        componentWillUnmount() {
+            super.componentWillUnmount();
+            this.model.dispose();
+        }
+        renderElement() {
+            const question = this.props.question;
+            const textStyle = this.props.question.textStyle;
+            return (React__namespace.createElement(React__namespace.Fragment, null,
+                this.props.element,
+                React__namespace.createElement("div", { className: "st-dropdown-choices--wrapper" },
+                    React__namespace.createElement("div", { className: "svc-question__dropdown-choices" }, this.model.getRenderedItems().map((item, index) => (React__namespace.createElement("div", { className: this.model.getChoiceCss(), key: `translation_choice_${index}` }, surveyReactUi.ReactElementFactory.Instance.createElement(this.model.itemComponent, {
+                        question: question,
+                        cssClasses: question.cssClasses,
+                        isDisplayMode: true,
+                        item: item,
+                        textStyle: textStyle,
+                        index: index,
+                        isChecked: false
+                    }))))),
+                    this.model.needToCollapse ?
+                        surveyReactUi.ReactElementFactory.Instance.createElement("sv-action-bar-item", { item: this.model.collapseAction }) : null)));
+        }
+    }
+    surveyReactUi.ReactElementFactory.Instance.registerElement(surveyCreatorCore.translationDropdownComponentName, (props) => {
+        return React__namespace.createElement(TranslationDropdownQuestionComponent, props);
+    });
+
     const PageElementContent = React__namespace.memo(({ page, survey, creator }) => {
         return React__namespace.createElement(surveyReactUi.SurveyPage, { page: page, survey: survey, creator: creator });
     });
@@ -789,11 +842,15 @@
             this.rootRef = React__namespace.createRef();
         }
         createModel(props) {
+            var _a;
             if (this.model) {
-                this.model.attachToUI(props.page, this.rootRef.current);
+                this.model.dispose();
             }
             this.model = this.createPageAdorner(props.creator, props.page);
             this.model.isGhost = this.props.isGhost;
+            if (!!((_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.current)) {
+                this.model.attachToUI(props.page, this.rootRef.current);
+            }
         }
         createPageAdorner(creator, page) {
             return new surveyCreatorCore.PageAdorner(creator, page);
@@ -807,6 +864,7 @@
         }
         componentDidUpdate(prevProps, prevState) {
             super.componentDidUpdate(prevProps, prevState);
+            this.model.attachToUI(this.props.page, this.rootRef.current);
         }
         getUpdatedModelProps() {
             return ["creator", "page"];
@@ -2651,24 +2709,65 @@
             return (React__namespace.createElement("div", { className: "svc-creator-tab__content svc-translation-tab" + (this.model.isEmpty ? " svc-translation-tab--empty" : "") }, this.renderElementContent()));
         }
         renderElementContent() {
-            var _a, _b;
             if (this.model.isEmpty) {
                 return React__namespace.createElement(SurfacePlaceholder, { name: "translation", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText });
             }
-            else {
-                return (React__namespace.createElement("div", { className: "st-content" },
-                    React__namespace.createElement("div", { className: "svc-flex-column st-strings-wrapper" },
-                        React__namespace.createElement("div", { className: "svc-flex-row st-strings-header" },
-                            React__namespace.createElement(surveyReactUi.Survey, { key: (_a = this.model.stringsHeaderSurvey) === null || _a === void 0 ? void 0 : _a.elementIdPrefix, model: this.model.stringsHeaderSurvey })),
-                        React__namespace.createElement("div", { className: "svc-flex-row svc-plugin-tab__content st-strings" },
-                            React__namespace.createElement(surveyReactUi.Survey, { key: (_b = this.model.stringsSurvey) === null || _b === void 0 ? void 0 : _b.elementIdPrefix, model: this.model.stringsSurvey })))));
+            if (this.model.isSideBySideForms) {
+                return this.renderSideBySideContent(this.model);
             }
+            // The side-by-side grid view reuses the default strings-grid markup.
+            return this.renderStringsContent(this.model);
+        }
+        renderStringsContent(model) {
+            var _a, _b;
+            return (React__namespace.createElement("div", { className: "st-content" },
+                React__namespace.createElement("div", { className: "svc-flex-column st-strings-wrapper" },
+                    React__namespace.createElement("div", { className: "svc-flex-row st-strings-header" },
+                        React__namespace.createElement(surveyReactUi.Survey, { key: (_a = model.stringsHeaderSurvey) === null || _a === void 0 ? void 0 : _a.elementIdPrefix, model: model.stringsHeaderSurvey })),
+                    React__namespace.createElement("div", { className: "svc-flex-row svc-plugin-tab__content st-strings" },
+                        React__namespace.createElement(surveyReactUi.Survey, { key: (_b = model.stringsSurvey) === null || _b === void 0 ? void 0 : _b.elementIdPrefix, model: model.stringsSurvey })))));
+        }
+        renderSideBySideContent(model) {
+            var _a;
+            // No target language selected: the target pane is not rendered and the source pane takes
+            // the whole surface.
+            const targetSurvey = model.targetSurvey;
+            return (React__namespace.createElement("div", { className: "st-side-by-side" + (!targetSurvey ? " st-side-by-side--no-target" : "") },
+                React__namespace.createElement("div", { key: (_a = model.sourceSurvey) === null || _a === void 0 ? void 0 : _a.elementIdPrefix, className: "st-side-by-side__source", ref: (el) => { model.setSourceScrollElement(el); } },
+                    React__namespace.createElement(surveyReactUi.Survey, { model: model.sourceSurvey })),
+                !!targetSurvey ?
+                    React__namespace.createElement("div", { key: targetSurvey.elementIdPrefix, className: "st-side-by-side__target", ref: (el) => { model.setTargetScrollElement(el); } },
+                        React__namespace.createElement(surveyReactUi.Survey, { model: targetSurvey })) : null));
         }
     }
     surveyReactUi.ReactElementFactory.Instance.registerElement("svc-tab-translation", (props) => {
         return React__namespace.createElement(TabTranslationComponent, props);
     });
 
+    // An item of the target language dropdown: the language name and, at the right edge, how much of
+    // the survey is already translated into it. The counts are precomputed on the choices themselves
+    // (see updateTargetLocaleChoices) - a language with no translations carries none.
+    class TranslationLocaleItemComponent extends surveyReactUi.SurveyElementBase {
+        get item() {
+            return this.props.item;
+        }
+        getStateElement() {
+            return this.item;
+        }
+        renderElement() {
+            const item = this.item;
+            if (!item)
+                return null;
+            const progress = surveyCreatorCore.getTranslationLocaleProgress(item);
+            return (React__namespace.createElement("div", { className: "svc-translation-locale-item" },
+                React__namespace.createElement("span", { className: "svc-translation-locale-item__name" }, this.renderLocString(item.locTitle, undefined, "locString")),
+                !!progress ? React__namespace.createElement("span", { className: "svc-translation-locale-item__progress" }, progress) : null));
+        }
+    }
+    surveyReactUi.ReactElementFactory.Instance.registerElement(surveyCreatorCore.translationLocaleItemComponentName, (props) => {
+        return React__namespace.createElement(TranslationLocaleItemComponent, props);
+    });
+
     class ObjectSelectorComponent extends surveyReactUi.SurveyElementBase {
         get model() {
             return this.props.model;
@@ -2765,6 +2864,90 @@
         return React__namespace.createElement(SwitcherComponent, props);
     });
 
+    // The collaboration feature's only row renderer: a leading marker (avatar circle
+    // or icon), a title and an optional subtitle. Shared by the connection plate, a
+    // roster entry, a Version History row and the floating panel's title.
+    //
+    // Presentation only - it binds NO events. Interaction belongs to whatever wraps
+    // the row (the <li> of sv-list, the <button> of sv-action-bar) or to nothing at
+    // all, as for the connection plate. See CollabRowAction.
+    class CollabRowComponent extends surveyReactUi.SurveyElementBase {
+        get item() {
+            return this.props.item;
+        }
+        getStateElement() {
+            return this.item;
+        }
+        canRender() {
+            return !!this.item && this.item.visible && super.canRender();
+        }
+        renderMarker() {
+            const item = this.item;
+            if (item.hasMarkerText) {
+                return React__namespace.createElement("span", { className: item.markerCss }, item.markerText);
+            }
+            if (item.hasMarkerIcon) {
+                return (React__namespace.createElement("span", { className: "svc-collab-row__icon" },
+                    React__namespace.createElement(surveyReactUi.SvgIcon, { iconName: item.markerIconName, size: item.markerIconSize })));
+            }
+            return null;
+        }
+        renderElement() {
+            const item = this.item;
+            return (React__namespace.createElement("div", { className: item.rowCss, role: item.rowRole || undefined, "aria-expanded": item.ariaExpanded },
+                this.renderMarker(),
+                React__namespace.createElement("span", { className: "svc-collab-row__title" }, item.title),
+                item.hasSubtitle ? React__namespace.createElement("span", { className: "svc-collab-row__subtitle" }, item.subtitle) : null));
+        }
+    }
+    surveyReactUi.ReactElementFactory.Instance.registerElement("svc-collab-row", (props) => {
+        return React__namespace.createElement(CollabRowComponent, props);
+    });
+
+    // A non-modal window: docked to the viewport's right edge until its header is
+    // dragged, then free-floating. position:fixed, so it contributes nothing to the
+    // creator's flex layout while still living inside the themed root, where the
+    // --sjs2-* custom properties are defined.
+    //
+    // Markup only. The root node is handed to the model the way survey-core's popup
+    // views do, and the header's raw pointerdown is forwarded; geometry, listeners,
+    // focus and the drag itself all live in FloatingPanelModel. Hiding is part of
+    // `style` too, which is why the root is always rendered.
+    class FloatingPanelComponent extends surveyReactUi.SurveyElementBase {
+        constructor(props) {
+            super(props);
+            this.root = React__namespace.createRef();
+        }
+        get model() {
+            return this.props.model;
+        }
+        getStateElement() {
+            return this.model;
+        }
+        componentDidMount() {
+            super.componentDidMount();
+            this.model.setComponentElement(this.root.current);
+        }
+        componentWillUnmount() {
+            super.componentWillUnmount();
+            this.model.resetComponentElement();
+        }
+        renderElement() {
+            const model = this.model;
+            const content = surveyReactUi.ReactElementFactory.Instance.createElement(model.contentComponentName, model.contentComponentData);
+            return (React__namespace.createElement("div", { ref: this.root, className: model.rootCss, style: model.style, role: "dialog", "aria-modal": false, "aria-labelledby": model.titleId, tabIndex: -1, onPointerDownCapture: () => model.bringToFront() },
+                React__namespace.createElement("div", { className: model.headerCss, onPointerDown: (e) => model.onPointerDown(e.nativeEvent) },
+                    React__namespace.createElement("span", { id: model.titleId, className: "svc-floating-panel__title" }, model.titleText),
+                    React__namespace.createElement("span", { className: "svc-floating-panel__drag", "aria-hidden": "true" },
+                        React__namespace.createElement(surveyReactUi.SvgIcon, { iconName: "icon-draghorizontal-24x16", size: "auto" })),
+                    React__namespace.createElement(surveyReactUi.SurveyActionBar, { model: model.headerToolbar })),
+                React__namespace.createElement("div", { className: model.bodyCss }, content)));
+        }
+    }
+    surveyReactUi.ReactElementFactory.Instance.registerElement("svc-floating-panel", (props) => {
+        return React__namespace.createElement(FloatingPanelComponent, props);
+    });
+
     let ItemTemplateComponent$1 = class ItemTemplateComponent extends surveyReactUi.SurveyElementBase {
         render() {
             const item = this.props.item;
@@ -2986,8 +3169,8 @@
     });
 
     exports.Version = void 0;
-    exports.Version = `${"3.0.0"}`;
-    surveyCore.checkLibraryVersion(`${"3.0.0"}`, "survey-creator-react");
+    exports.Version = `${"3.0.1"}`;
+    surveyCore.checkLibraryVersion(`${"3.0.1"}`, "survey-creator-react");
 
     Object.defineProperty(exports, "PropertyGridEditorCollection", {
         enumerable: true,
@@ -3030,8 +3213,10 @@
     exports.AddQuestionButtonComponent = AddQuestionButtonComponent;
     exports.CellQuestionAdornerComponent = CellQuestionAdornerComponent;
     exports.CellQuestionDropdownAdornerComponent = CellQuestionDropdownAdornerComponent;
+    exports.CollabRowComponent = CollabRowComponent;
     exports.ComponentContainer = ComponentContainer;
     exports.CreatorSurveyPageComponent = CreatorSurveyPageComponent;
+    exports.FloatingPanelComponent = FloatingPanelComponent;
     exports.IconItem = IconItem;
     exports.ImageItemValueAdornerComponent = ImageItemValueAdornerComponent;
     exports.ItemValueAdornerComponent = ItemValueAdornerComponent;
@@ -3091,7 +3276,9 @@
     exports.TabbedMenuItemComponent = TabbedMenuItemComponent;
     exports.ToolboxList = ToolboxList;
     exports.TranslateFromAction = TranslateFromAction;
+    exports.TranslationDropdownQuestionComponent = TranslationDropdownQuestionComponent;
     exports.TranslationLineSkeleton = TranslationLineSkeleton;
+    exports.TranslationLocaleItemComponent = TranslationLocaleItemComponent;
 
 }));
 //# sourceMappingURL=survey-creator-react.js.map