survey-react-ui 1.12.57 → 1.12.58

package/fesm/survey-react-ui.mjs

@@ -1,10 +1,10 @@
 /*!
- * surveyjs - Survey JavaScript library v2.3.15
+ * surveyjs - Survey JavaScript library v2.5.0
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
 
-import { SurveyModel, Helpers, createSvg, createPopupViewModel, CssClassBuilder, ActionDropdownViewModel, RendererFactory, doKey2ClickUp, SvgRegistry, settings, createPopupModalViewModel, ScrollViewModel, doKey2ClickBlur, doKey2ClickDown, addIconsToThemeSet, Question, SurveyProgressModel, ProgressButtonsResponsivityManager, PopupSurveyModel, ButtonGroupItemModel, LocalizableString, checkLibraryVersion } from 'survey-core';
+import { SurveyModel, Helpers, createSvg, LocalizableString, createPopupViewModel, CssClassBuilder, ActionDropdownViewModel, RendererFactory, doKey2ClickUp, SvgRegistry, settings, createPopupModalViewModel, ScrollViewModel, doKey2ClickBlur, doKey2ClickDown, addIconsToThemeSet, Question, SurveyProgressModel, ProgressButtonsResponsivityManager, PopupSurveyModel, ButtonGroupItemModel, checkLibraryVersion } from 'survey-core';
 export { SurveyModel as Model, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings } from 'survey-core';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -92,7 +92,7 @@ class SurveyElementBase extends React.Component {
         return ReactElementFactory.Instance.createElement(locStr.renderAs, {
             locStr: locStr.renderAsData,
             style: style,
-            key: key,
+            key: key
         });
     }
     static renderQuestionDescription(question) {
@@ -420,6 +420,65 @@ ReactElementFactory.Instance.registerElement("sv-action-bar-separator", (props)
     return React.createElement(SurveyActionBarSeparator, props);
 });
 
+class SurveyLocStringViewer extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onChangedHandler = (sender, options) => {
+            if (this.isRendering)
+                return;
+            this.setState({ changed: !!this.state && this.state.changed ? this.state.changed + 1 : 1 });
+        };
+        this.rootRef = React.createRef();
+    }
+    get locStr() {
+        return this.props.locStr;
+    }
+    get style() {
+        return this.props.style;
+    }
+    get textClass() {
+        return this.props.textClass;
+    }
+    componentDidMount() {
+        this.reactOnStrChanged();
+    }
+    componentWillUnmount() {
+        if (!this.locStr)
+            return;
+        this.locStr.onStringChanged.remove(this.onChangedHandler);
+    }
+    componentDidUpdate(prevProps, prevState) {
+        if (!!prevProps.locStr) {
+            prevProps.locStr.onStringChanged.remove(this.onChangedHandler);
+        }
+        this.reactOnStrChanged();
+    }
+    reactOnStrChanged() {
+        if (!this.locStr)
+            return;
+        this.locStr.onStringChanged.add(this.onChangedHandler);
+    }
+    render() {
+        if (!this.locStr)
+            return null;
+        this.isRendering = true;
+        const strEl = this.renderString();
+        this.isRendering = false;
+        return strEl;
+    }
+    renderString() {
+        const className = this.locStr.getStringViewerClassName(this.textClass);
+        if (this.locStr.hasHtml) {
+            let htmlValue = { __html: this.locStr.renderedHtml };
+            return React.createElement("span", { ref: this.rootRef, className: className, style: this.style, dangerouslySetInnerHTML: htmlValue });
+        }
+        return React.createElement("span", { ref: this.rootRef, className: className, style: this.style }, this.locStr.renderedHtml);
+    }
+}
+ReactElementFactory.Instance.registerElement(LocalizableString.defaultRenderer, (props) => {
+    return React.createElement(SurveyLocStringViewer, props);
+});
+
 class SurveyAction extends SurveyElementBase {
     constructor(props) {
         super(props);
@@ -438,7 +497,7 @@ class SurveyAction extends SurveyElementBase {
         const itemComponent = ReactElementFactory.Instance.createElement(this.item.component || "sv-action-bar-item", {
             item: this.item,
         });
-        return (React.createElement("div", { className: itemClass, id: this.item.id, ref: this.ref },
+        return (React.createElement("div", { className: itemClass, id: "" + this.item.uniqueId, ref: this.ref },
             React.createElement("div", { className: "sv-action__content" },
                 separator,
                 itemComponent)));
@@ -480,8 +539,7 @@ class SurveyActionBarItem extends SurveyElementBase {
     renderText() {
         if (!this.item.hasTitle)
             return null;
-        const titleClass = this.item.getActionBarItemTitleCss();
-        return React.createElement("span", { className: titleClass }, this.item.title);
+        return React.createElement(SurveyLocStringViewer, { locStr: this.item.locTitle, textClass: this.item.getActionBarItemTitleCss() });
     }
     renderButtonContent() {
         const text = this.renderText();
@@ -1056,7 +1114,7 @@ class PopupModal extends SurveyElementBase {
 PopupModal.modalDescriptors = [];
 
 /*!
- * surveyjs - Survey JavaScript library v2.3.15
+ * surveyjs - Survey JavaScript library v2.5.0
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1126,7 +1184,7 @@ var iconsV1 = {
 };
 
 /*!
- * surveyjs - Survey JavaScript library v2.3.15
+ * surveyjs - Survey JavaScript library v2.5.0
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1719,8 +1777,10 @@ class SurveyRow extends SurveyElementBase {
     componentWillUnmount() {
         super.componentWillUnmount();
         if (!!this.row) {
-            this.row.setRootElement(undefined);
-            this.stopLazyRendering();
+            if (!this.row.hasActiveUISubscribers) {
+                this.row.setRootElement(undefined);
+                this.stopLazyRendering();
+            }
         }
     }
     createElement(element, elementIndex) {
@@ -3668,15 +3728,18 @@ class SurveyQuestionFile extends SurveyQuestionElementBase {
         const video = this.question.isPlayingVideo ? this.renderVideo() : null;
         const fileDecorator = this.question.showFileDecorator ? this.renderFileDecorator() : null;
         const fileNavigator = this.question.fileNavigatorVisible ? (React.createElement(SurveyActionBar, { model: this.question.fileNavigator })) : null;
+        const acceptedTypes = this.question.renderedAcceptedTypes;
+        const className = !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss();
+        const style = this.isDisplayMode ? { color: "transparent" } : {};
         let fileInput;
         if (this.question.isReadOnlyAttr) {
-            fileInput = React.createElement("input", { readOnly: true, type: "file", className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: input => (this.setControl(input)), style: !this.isDisplayMode ? {} : { color: "transparent" }, multiple: this.question.allowMultiple, placeholder: this.question.title, accept: this.question.acceptedTypes });
+            fileInput = React.createElement("input", { readOnly: true, type: "file", className: className, id: this.question.inputId, ref: input => (this.setControl(input)), style: style, multiple: this.question.allowMultiple, placeholder: this.question.title, accept: acceptedTypes });
         }
         else if (this.question.isDisabledAttr) {
-            fileInput = React.createElement("input", { disabled: true, type: "file", className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: input => (this.setControl(input)), style: !this.isDisplayMode ? {} : { color: "transparent" }, multiple: this.question.allowMultiple, placeholder: this.question.title, accept: this.question.acceptedTypes });
+            fileInput = React.createElement("input", { disabled: true, type: "file", className: className, id: this.question.inputId, ref: input => (this.setControl(input)), style: style, multiple: this.question.allowMultiple, placeholder: this.question.title, accept: acceptedTypes });
         }
         else if (this.question.hasFileUI) {
-            fileInput = React.createElement("input", { type: "file", disabled: this.isDisplayMode, tabIndex: -1, className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: input => (this.setControl(input)), style: !this.isDisplayMode ? {} : { color: "transparent" }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, multiple: this.question.allowMultiple, title: this.question.inputTitle, accept: this.question.acceptedTypes, capture: this.question.renderCapture });
+            fileInput = React.createElement("input", { type: "file", disabled: this.isDisplayMode, tabIndex: -1, className: className, id: this.question.inputId, ref: input => (this.setControl(input)), style: style, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, multiple: this.question.allowMultiple, title: this.question.inputTitle, accept: acceptedTypes, capture: this.question.renderCapture });
         }
         else {
             fileInput = null;
@@ -4198,7 +4261,7 @@ class MatrixRow extends SurveyElementBase {
         const model = this.model;
         if (!model.visible)
             return null;
-        return (React.createElement("tr", { ref: this.root, className: model.className, "data-sv-drop-target-matrix-row": model.dropTargetId, onPointerDown: (event) => this.onPointerDownHandler(event) }, this.props.children));
+        return (React.createElement("tr", { ref: this.root, className: model.className, "data-sv-drop-target-matrix-row": model.dropTargetId }, this.props.children));
     }
 }
 ReactElementFactory.Instance.registerElement("sv-matrix-row", (props) => {
@@ -4209,8 +4272,11 @@ class SurveyQuestionMatrixDynamicDragDropIcon extends ReactSurveyElement {
     get question() {
         return this.props.item.data.question;
     }
+    get row() {
+        return this.props.item.data.row;
+    }
     renderElement() {
-        return React.createElement("div", null, this.renderIcon());
+        return React.createElement("div", { onPointerDown: (event) => { this.question.onPointerDown(event.nativeEvent, this.row); } }, this.renderIcon());
     }
     renderIcon() {
         if (this.question.iconDragElement) {
@@ -5914,62 +5980,6 @@ ReactElementFactory.Instance.registerElement("sv-nav-btn", (props) => {
     return React.createElement(SurveyNavigationButton, props);
 });
 
-class SurveyLocStringViewer extends React.Component {
-    constructor(props) {
-        super(props);
-        this.onChangedHandler = (sender, options) => {
-            if (this.isRendering)
-                return;
-            this.setState({ changed: !!this.state && this.state.changed ? this.state.changed + 1 : 1 });
-        };
-        this.rootRef = React.createRef();
-    }
-    get locStr() {
-        return this.props.locStr;
-    }
-    get style() {
-        return this.props.style;
-    }
-    componentDidMount() {
-        this.reactOnStrChanged();
-    }
-    componentWillUnmount() {
-        if (!this.locStr)
-            return;
-        this.locStr.onStringChanged.remove(this.onChangedHandler);
-    }
-    componentDidUpdate(prevProps, prevState) {
-        if (!!prevProps.locStr) {
-            prevProps.locStr.onStringChanged.remove(this.onChangedHandler);
-        }
-        this.reactOnStrChanged();
-    }
-    reactOnStrChanged() {
-        if (!this.locStr)
-            return;
-        this.locStr.onStringChanged.add(this.onChangedHandler);
-    }
-    render() {
-        if (!this.locStr)
-            return null;
-        this.isRendering = true;
-        const strEl = this.renderString();
-        this.isRendering = false;
-        return strEl;
-    }
-    renderString() {
-        const className = this.locStr.allowLineBreaks ? "sv-string-viewer sv-string-viewer--multiline" : "sv-string-viewer";
-        if (this.locStr.hasHtml) {
-            let htmlValue = { __html: this.locStr.renderedHtml };
-            return React.createElement("span", { ref: this.rootRef, className: className, style: this.style, dangerouslySetInnerHTML: htmlValue });
-        }
-        return React.createElement("span", { ref: this.rootRef, className: className, style: this.style }, this.locStr.renderedHtml);
-    }
-}
-ReactElementFactory.Instance.registerElement(LocalizableString.defaultRenderer, (props) => {
-    return React.createElement(SurveyLocStringViewer, props);
-});
-
 class QuestionErrorComponent extends React.Component {
     render() {
         const error = this.props.error;
@@ -6153,7 +6163,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"2.3.15"}`, "survey-react-ui");
+checkLibraryVersion(`${"2.5.0"}`, "survey-react-ui");
 
 export { CharacterCounterComponent, ComponentsContainer, Header, HeaderCell, HeaderMobile, List, ListItemContent, ListItemGroup, LoadingIndicatorComponent, LogoImage, MatrixRow, NotifierComponent, Popup, PopupModal, PopupSurvey, QuestionErrorComponent, RatingDropdownItem, RatingItem, RatingItemSmiley, RatingItemStar, ReactElementFactory, ReactQuestionFactory, ReactSurveyElement, ReactSurveyElementsWrapper, Scroll, Skeleton, SliderLabelItem, Survey, SurveyActionBar, SurveyElementBase, SurveyElementErrors, SurveyFileChooseButton, SurveyFileItem, SurveyFilePreview, SurveyFlowPanel, SurveyHeader, SurveyLocStringEditor, SurveyLocStringViewer, SurveyNavigationBase, SurveyNavigationButton, SurveyPage, SurveyPanel, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestion, SurveyQuestionAndErrorsCell, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionButtonGroup, SurveyQuestionButtonGroupDropdown, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionComment, SurveyQuestionCommentItem, SurveyQuestionComposite, SurveyQuestionCustom, SurveyQuestionDropdown, SurveyQuestionDropdownBase, SurveyQuestionDropdownSelect, SurveyQuestionElementBase, SurveyQuestionEmpty, SurveyQuestionExpression, SurveyQuestionFile, SurveyQuestionHtml, SurveyQuestionImage, SurveyQuestionImagePicker, SurveyQuestionMatrix, SurveyQuestionMatrixCell, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixRow, SurveyQuestionMultipleText, SurveyQuestionOptionItem, SurveyQuestionPanelDynamic, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicProgressText, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionRadioItem, SurveyQuestionRadiogroup, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionSignaturePad, SurveyQuestionSlider, SurveyQuestionTagbox, SurveyQuestionTagboxItem, SurveyQuestionText, SurveyRow, SurveyTimerPanel, SurveyWindow, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click };
 //# sourceMappingURL=survey-react-ui.mjs.map