survey-creator-react 3.0.0-beta.9 → 3.0.1

package/fesm/survey-creator-react.mjs

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v3.0.0-beta.9
+ * 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
@@ -8,7 +8,7 @@
 import * as React from 'react';
 import { createElement, Fragment } from 'react';
 import { ReactElementFactory, SurveyElementBase, attachKey2click, SvgIcon, Survey, ReactQuestionFactory, SurveyLocStringViewer, SvgBundleComponent, PopupModal, SurveyActionBar, NotifierComponent, TitleElement, ReactSurveyElementsWrapper, LoadingIndicatorComponent, SurveyPage, LogoImage, SurveyQuestionElementBase, SurveyQuestion, SurveyPanel, Popup, Scroll, CharacterCounterComponent, SurveyQuestionDropdown, SurveyHeader, List, SurveyQuestionText } from 'survey-react-ui';
-import { SurveyCreatorModel, assign, RowViewModel, QuestionAdornerViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, QuestionRatingAdornerViewModel, PageAdorner, PanelAdornerViewModel, LogoImageViewModel, editorLocalization, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, MatrixCellWrapperViewModel, SurveyResultsModel, ToolboxToolViewModel, editableStringRendererName, StringEditorViewModelBase, initLogicOperator, PageNavigatorViewModel } from 'survey-creator-core';
+import { SurveyCreatorModel, assign, RowViewModel, QuestionAdornerViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, QuestionRatingAdornerViewModel, translationDropdownComponentName, TranslationDropdownViewModel, PageAdorner, PanelAdornerViewModel, LogoImageViewModel, editorLocalization, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, MatrixCellWrapperViewModel, SurveyResultsModel, ToolboxToolViewModel, editableStringRendererName, StringEditorViewModelBase, initLogicOperator, PageNavigatorViewModel, translationLocaleItemComponentName, getTranslationLocaleProgress } from 'survey-creator-core';
 export { PropertyGridEditorCollection, SurveyLogic, SurveyLogicUI, SurveyQuestionEditorDefinition, ToolboxToolViewModel, editorLocalization, localization, settings, svgBundle } from 'survey-creator-core';
 import * as ReactDOM from 'react-dom';
 import { CssClassBuilder, settings, RendererFactory, unwrap, checkLibraryVersion } from 'survey-core';
@@ -172,6 +172,7 @@ class SurveyCreatorComponent extends SurveyElementBase {
             React.createElement(SvgBundleComponent, null),
             React.createElement(PopupModal, null),
             React.createElement("div", { className: areaClassName },
+                this.renderCollabBar(),
                 React.createElement("div", { className: fullContainerClassName },
                     React.createElement("div", { className: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" },
                         React.createElement("div", { className: "svc-top-bar" },
@@ -192,6 +193,15 @@ class SurveyCreatorComponent extends SurveyElementBase {
                 licenseBanner,
                 React.createElement(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 ReactElementFactory.Instance.createElement("svc-component-container", { model: bar.container });
+    }
     renderActiveTab() {
         const creator = this.props.creator;
         return this.renderCreatorTab(creator.activeTabMenuItem);
@@ -761,6 +771,49 @@ ReactElementFactory.Instance.registerElement("svc-cell-dropdown-question", (prop
     return React.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 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.createElement(React.Fragment, null,
+            this.props.element,
+            React.createElement("div", { className: "st-dropdown-choices--wrapper" },
+                React.createElement("div", { className: "svc-question__dropdown-choices" }, this.model.getRenderedItems().map((item, index) => (React.createElement("div", { className: this.model.getChoiceCss(), key: `translation_choice_${index}` }, ReactElementFactory.Instance.createElement(this.model.itemComponent, {
+                    question: question,
+                    cssClasses: question.cssClasses,
+                    isDisplayMode: true,
+                    item: item,
+                    textStyle: textStyle,
+                    index: index,
+                    isChecked: false
+                }))))),
+                this.model.needToCollapse ?
+                    ReactElementFactory.Instance.createElement("sv-action-bar-item", { item: this.model.collapseAction }) : null)));
+    }
+}
+ReactElementFactory.Instance.registerElement(translationDropdownComponentName, (props) => {
+    return React.createElement(TranslationDropdownQuestionComponent, props);
+});
+
 const PageElementContent = React.memo(({ page, survey, creator }) => {
     return React.createElement(SurveyPage, { page: page, survey: survey, creator: creator });
 });
@@ -771,11 +824,15 @@ class CreatorSurveyPageComponent extends CreatorModelElement {
         this.rootRef = React.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 PageAdorner(creator, page);
@@ -789,6 +846,7 @@ class CreatorSurveyPageComponent extends CreatorModelElement {
     }
     componentDidUpdate(prevProps, prevState) {
         super.componentDidUpdate(prevProps, prevState);
+        this.model.attachToUI(this.props.page, this.rootRef.current);
     }
     getUpdatedModelProps() {
         return ["creator", "page"];
@@ -2633,24 +2691,65 @@ class TabTranslationComponent extends SurveyElementBase {
         return (React.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.createElement(SurfacePlaceholder, { name: "translation", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText });
         }
-        else {
-            return (React.createElement("div", { className: "st-content" },
-                React.createElement("div", { className: "svc-flex-column st-strings-wrapper" },
-                    React.createElement("div", { className: "svc-flex-row st-strings-header" },
-                        React.createElement(Survey, { key: (_a = this.model.stringsHeaderSurvey) === null || _a === void 0 ? void 0 : _a.elementIdPrefix, model: this.model.stringsHeaderSurvey })),
-                    React.createElement("div", { className: "svc-flex-row svc-plugin-tab__content st-strings" },
-                        React.createElement(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.createElement("div", { className: "st-content" },
+            React.createElement("div", { className: "svc-flex-column st-strings-wrapper" },
+                React.createElement("div", { className: "svc-flex-row st-strings-header" },
+                    React.createElement(Survey, { key: (_a = model.stringsHeaderSurvey) === null || _a === void 0 ? void 0 : _a.elementIdPrefix, model: model.stringsHeaderSurvey })),
+                React.createElement("div", { className: "svc-flex-row svc-plugin-tab__content st-strings" },
+                    React.createElement(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.createElement("div", { className: "st-side-by-side" + (!targetSurvey ? " st-side-by-side--no-target" : "") },
+            React.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.createElement(Survey, { model: model.sourceSurvey })),
+            !!targetSurvey ?
+                React.createElement("div", { key: targetSurvey.elementIdPrefix, className: "st-side-by-side__target", ref: (el) => { model.setTargetScrollElement(el); } },
+                    React.createElement(Survey, { model: targetSurvey })) : null));
     }
 }
 ReactElementFactory.Instance.registerElement("svc-tab-translation", (props) => {
     return React.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 SurveyElementBase {
+    get item() {
+        return this.props.item;
+    }
+    getStateElement() {
+        return this.item;
+    }
+    renderElement() {
+        const item = this.item;
+        if (!item)
+            return null;
+        const progress = getTranslationLocaleProgress(item);
+        return (React.createElement("div", { className: "svc-translation-locale-item" },
+            React.createElement("span", { className: "svc-translation-locale-item__name" }, this.renderLocString(item.locTitle, undefined, "locString")),
+            !!progress ? React.createElement("span", { className: "svc-translation-locale-item__progress" }, progress) : null));
+    }
+}
+ReactElementFactory.Instance.registerElement(translationLocaleItemComponentName, (props) => {
+    return React.createElement(TranslationLocaleItemComponent, props);
+});
+
 class ObjectSelectorComponent extends SurveyElementBase {
     get model() {
         return this.props.model;
@@ -2747,6 +2846,90 @@ ReactElementFactory.Instance.registerElement("svc-switcher", (props) => {
     return React.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 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.createElement("span", { className: item.markerCss }, item.markerText);
+        }
+        if (item.hasMarkerIcon) {
+            return (React.createElement("span", { className: "svc-collab-row__icon" },
+                React.createElement(SvgIcon, { iconName: item.markerIconName, size: item.markerIconSize })));
+        }
+        return null;
+    }
+    renderElement() {
+        const item = this.item;
+        return (React.createElement("div", { className: item.rowCss, role: item.rowRole || undefined, "aria-expanded": item.ariaExpanded },
+            this.renderMarker(),
+            React.createElement("span", { className: "svc-collab-row__title" }, item.title),
+            item.hasSubtitle ? React.createElement("span", { className: "svc-collab-row__subtitle" }, item.subtitle) : null));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-collab-row", (props) => {
+    return React.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 SurveyElementBase {
+    constructor(props) {
+        super(props);
+        this.root = React.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 = ReactElementFactory.Instance.createElement(model.contentComponentName, model.contentComponentData);
+        return (React.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.createElement("div", { className: model.headerCss, onPointerDown: (e) => model.onPointerDown(e.nativeEvent) },
+                React.createElement("span", { id: model.titleId, className: "svc-floating-panel__title" }, model.titleText),
+                React.createElement("span", { className: "svc-floating-panel__drag", "aria-hidden": "true" },
+                    React.createElement(SvgIcon, { iconName: "icon-draghorizontal-24x16", size: "auto" })),
+                React.createElement(SurveyActionBar, { model: model.headerToolbar })),
+            React.createElement("div", { className: model.bodyCss }, content)));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-floating-panel", (props) => {
+    return React.createElement(FloatingPanelComponent, props);
+});
+
 let ItemTemplateComponent$1 = class ItemTemplateComponent extends SurveyElementBase {
     render() {
         const item = this.props.item;
@@ -2955,7 +3138,8 @@ class SurveyQuestionFileEditorButton extends SurveyElementBase {
     renderElement() {
         return (React.createElement("div", null,
             attachKey2click(React.createElement("label", { onClick: event => this.question.chooseFiles(event.nativeEvent), className: this.item.getActionBarItemCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonCaption },
-                React.createElement(SvgIcon, { iconName: this.item.iconName, size: "auto", title: this.item.title, className: this.item.cssClasses.itemIcon }))),
+                React.createElement(SvgIcon, { iconName: this.item.iconName, size: "auto", title: this.item.title, className: this.item.cssClasses.itemIcon }),
+                React.createElement("span", { className: "sv-visuallyhidden" }, this.question.chooseButtonCaption))),
             React.createElement("input", { type: "file", disabled: this.item.disabled, className: this.question.cssClasses.fileInput, id: this.question.inputId, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy, multiple: false, title: this.question.inputTitle, accept: this.question.acceptedTypes, tabIndex: -1, onChange: (event) => this.question.onFileInputChange(event.nativeEvent) })));
     }
 }
@@ -2967,8 +3151,8 @@ ReactElementFactory.Instance.registerElement("sv-fileedit-button", (props) => {
 });
 
 let Version;
-Version = `${"3.0.0-beta.9"}`;
-checkLibraryVersion(`${"3.0.0-beta.9"}`, "survey-creator-react");
+Version = `${"3.0.1"}`;
+checkLibraryVersion(`${"3.0.1"}`, "survey-creator-react");
 
-export { ActionButton, AdaptiveToolbox, AddQuestionButtonComponent, CellQuestionAdornerComponent, CellQuestionDropdownAdornerComponent, ComponentContainer, CreatorSurveyPageComponent, IconItem, ImageItemValueAdornerComponent, ItemValueAdornerComponent, LogoImageComponent, MatrixCellAdornerComponent, PanelAdornerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionAdornerComponent, QuestionBanner, QuestionDropdownAdornerComponent, QuestionEditorContentComponent, QuestionErrorComponent, QuestionImageAdornerComponent, QuestionRatingAdornerComponent, QuestionWidgetAdornerComponent, QuestionWrapperFooter, QuestionWrapperHeader, ReactDragEvent, ReactMouseEvent, RowWrapper, SearchComponent, SideBarDefaultHeader, SideBarLaunchCard, SidebarComponent, SurveyCreator, SurveyCreatorComponent, SurveyCreatorToolboxCategory, SurveyCreatorToolboxItem, SurveyCreatorToolboxItemGroup, SurveyCreatorToolboxTool, SurveyElementEmbeddedSurvey, SurveyLocStringEditor, SurveyLogicOpertor, SurveyNavigation, SurveyQuestionColor, SurveyQuestionFileEditor, SurveyQuestionFileEditorButton, SurveyQuestionLinkValue, SurveyQuestionSpinEditor, SurveyResults, SurveyResultsByRow, SurveySimulator, SurveySpinEditorButton, SwitcherComponent, TabButtonComponent, TabContainerComponent, TabDesignerComponent, TabJsonEditorAceComponent, TabJsonEditorErrorsComponent, TabJsonEditorTextareaComponent, TabLogicComponent, TabPreviewSurveyComponent, TabThemeSurveyComponent, TabTranslationComponent, TabbedMenuComponent, TabbedMenuItemComponent, ToolboxList, TranslateFromAction, TranslationLineSkeleton, Version };
+export { ActionButton, AdaptiveToolbox, AddQuestionButtonComponent, CellQuestionAdornerComponent, CellQuestionDropdownAdornerComponent, CollabRowComponent, ComponentContainer, CreatorSurveyPageComponent, FloatingPanelComponent, IconItem, ImageItemValueAdornerComponent, ItemValueAdornerComponent, LogoImageComponent, MatrixCellAdornerComponent, PanelAdornerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionAdornerComponent, QuestionBanner, QuestionDropdownAdornerComponent, QuestionEditorContentComponent, QuestionErrorComponent, QuestionImageAdornerComponent, QuestionRatingAdornerComponent, QuestionWidgetAdornerComponent, QuestionWrapperFooter, QuestionWrapperHeader, ReactDragEvent, ReactMouseEvent, RowWrapper, SearchComponent, SideBarDefaultHeader, SideBarLaunchCard, SidebarComponent, SurveyCreator, SurveyCreatorComponent, SurveyCreatorToolboxCategory, SurveyCreatorToolboxItem, SurveyCreatorToolboxItemGroup, SurveyCreatorToolboxTool, SurveyElementEmbeddedSurvey, SurveyLocStringEditor, SurveyLogicOpertor, SurveyNavigation, SurveyQuestionColor, SurveyQuestionFileEditor, SurveyQuestionFileEditorButton, SurveyQuestionLinkValue, SurveyQuestionSpinEditor, SurveyResults, SurveyResultsByRow, SurveySimulator, SurveySpinEditorButton, SwitcherComponent, TabButtonComponent, TabContainerComponent, TabDesignerComponent, TabJsonEditorAceComponent, TabJsonEditorErrorsComponent, TabJsonEditorTextareaComponent, TabLogicComponent, TabPreviewSurveyComponent, TabThemeSurveyComponent, TabTranslationComponent, TabbedMenuComponent, TabbedMenuItemComponent, ToolboxList, TranslateFromAction, TranslationDropdownQuestionComponent, TranslationLineSkeleton, TranslationLocaleItemComponent, Version };
 //# sourceMappingURL=survey-creator-react.mjs.map