React 19

packages/survey-creator-react/package.json

@@ -44,8 +44,8 @@
     "@types/jquery": "3.3.29",
     "@types/lodash": "4.14.186",
     "@types/node": "7.0.4",
-    "@types/react": "17.0.1",
-    "@types/react-dom": "17.0.1",
+    "@types/react": "^17.0.83",
+    "@types/react-dom": "^17.0.1",
     "@types/react-test-renderer": "^17.0.1",
     "ajv": "8.17.1",
     "axe-core": "^3.5.6",
@@ -101,4 +101,4 @@
       "tag": true
     }
   }
-}
+}

packages/survey-creator-react/src/ActionButton.tsx

@@ -13,7 +13,7 @@ interface IActionButtonProps {
   allowBubble?: boolean;
 }
 export class ActionButton extends SurveyElementBase<IActionButtonProps, any> {
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const classes = new CssClassBuilder()
       .append(this.props.classes)
       .append("svc-action-button")
@@ -26,7 +26,7 @@ export class ActionButton extends SurveyElementBase<IActionButtonProps, any> {
     return this.renderButtonText(classes);
   }
 
-  renderButtonText(classes): JSX.Element {
+  renderButtonText(classes): React.JSX.Element {
     if (this.props.disabled) {
       return <span className={classes}>{this.props.text}</span>;
     }
@@ -50,7 +50,7 @@ export class ActionButton extends SurveyElementBase<IActionButtonProps, any> {
       </>
     );
   }
-  renderIcon(classes): JSX.Element {
+  renderIcon(classes): React.JSX.Element {
     classes += " svc-action-button--icon";
     if (this.props.disabled) {
       return <span className={classes}><SvgIcon size={"auto"} iconName={this.props.iconName}></SvgIcon></span>;

packages/survey-creator-react/src/AddQuestionButton.tsx

@@ -15,7 +15,7 @@ export class AddQuestionButtonComponent extends SurveyElementBase<{ item: Action
   public get model() {
     return this.props.item.data;
   }
-  protected renderTypeSelector(): JSX.Element {
+  protected renderTypeSelector(): React.JSX.Element {
     const questionTypeSelectorModel = this.model.questionTypeSelectorModel;
     return attachKey2click(<button
       type="button"
@@ -38,7 +38,7 @@ export class AddQuestionButtonComponent extends SurveyElementBase<{ item: Action
         : null}
     </button>);
   }
-  protected renderElement(): JSX.Element {
+  protected renderElement(): React.JSX.Element {
     const addButtonClass = this.props.buttonClass || "svc-btn";
     return <>
       {attachKey2click(<div

packages/survey-creator-react/src/ImageItemValueWrapper.tsx

@@ -8,7 +8,7 @@ import {
 import { CreatorModelElement } from "./ModelElement";
 
 interface ImageItemValueAdornerComponentProps {
-  element: JSX.Element;
+  element: React.JSX.Element;
   componentData: any;
   question: QuestionSelectBase;
   item: ImageItemValue;
@@ -62,7 +62,7 @@ export class ImageItemValueAdornerComponent extends CreatorModelElement<
     return <div className="svc-image-item-value__loading"><LoadingIndicatorComponent></LoadingIndicatorComponent></div>;
   }
 
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     this.model.item = this.props.item;
     const isNew = !this.props.question.isItemInList(this.props.item);
     this.model.isNew = isNew;

packages/survey-creator-react/src/ItemValueWrapper.tsx

@@ -9,7 +9,7 @@ import {
 import { CreatorModelElement } from "./ModelElement";
 
 interface ItemValueAdornerComponentProps {
-  element: JSX.Element;
+  element: React.JSX.Element;
   componentData: any;
   question: QuestionSelectBase;
   item: ItemValue;
@@ -59,7 +59,7 @@ export class ItemValueAdornerComponent extends CreatorModelElement<
     this.props.item.setRootElement(undefined);
   }
 
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     this.model.item = this.props.item;
     const button = this.model.allowAdd ? (
       attachKey2click(<span

packages/survey-creator-react/src/LogoImage.tsx

@@ -69,8 +69,8 @@ export class LogoImageComponent extends CreatorModelElement<ILogoImageComponentP
   renderLoadingIndicator() {
     return <div className="svc-logo-image__loading"><LoadingIndicatorComponent></LoadingIndicatorComponent></div>;
   }
-  render(): JSX.Element {
-    let content: JSX.Element = null;
+  render(): React.JSX.Element {
+    let content: React.JSX.Element = null;
     if (this.model.survey.locLogo.renderedHtml && !this.model.isUploading) {
       content = this.renderImage();
     }

packages/survey-creator-react/src/MatrixCellWrapper.tsx

@@ -9,7 +9,7 @@ import {
 import { CreatorModelElement } from "./ModelElement";
 
 interface MatrixCellAdornerComponentProps {
-  element: JSX.Element;
+  element: React.JSX.Element;
   componentData: any;
   question: QuestionSelectBase;
   cell: any;
@@ -50,7 +50,7 @@ export class MatrixCellAdornerComponent extends CreatorModelElement<
     return this.model;
   }
 
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     let controls = null;
     if (!!this.model.isSupportCellEditor) {
       controls = <div className="svc-matrix-cell__question-controls">

packages/survey-creator-react/src/Navigation.tsx

@@ -54,7 +54,7 @@ export class SurveyNavigation extends SurveyElementBase<any, any> {
       ? this.survey.isShowProgressBarOnTop
       : this.survey.isShowProgressBarOnBottom;
   }
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     return ReactElementFactory.Instance.createElement(
       this.survey.getProgressTypeComponent(),
       { survey: this.survey, css: this.survey.css, isTop: this.isTop }

packages/survey-creator-react/src/PageNavigator.tsx

@@ -55,7 +55,7 @@ export class SurveyPageNavigator extends CreatorModelElement<
     this.model.stopItemsContainerHeightObserver();
     this.model.setScrollableContainer(undefined);
   }
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     let className = "svc-page-navigator__selector svc-page-navigator__button";
     if (this.model.isPopupOpened)
       className += " svc-page-navigator__button--pressed";
@@ -94,7 +94,7 @@ export class SurveyPageNavigatorItem extends CreatorModelElement<any, any> {
   protected getStateElement(): Base {
     return this.props.item as Base;
   }
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const item = this.props.item;
     let className: string = "svc-page-navigator-item-content";
     if (unwrap(item.active)) {

packages/survey-creator-react/src/QuestionEditorContent.tsx

@@ -15,7 +15,7 @@ export class QuestionEditorContentComponent extends React.Component<
   get survey() {
     return this.props.survey;
   }
-  public createQuestionElement(question: Question): JSX.Element {
+  public createQuestionElement(question: Question): React.JSX.Element {
     return ReactQuestionFactory.Instance.createQuestion(
       !question.isDefaultRendering || question.isDefaultRendering()
         ? question.getTemplate()
@@ -33,11 +33,11 @@ export class QuestionEditorContentComponent extends React.Component<
   public questionErrorLocation(): string {
     return this.survey.questionErrorLocation;
   }
-  renderError(key: string, error: SurveyError, cssClasses: any): JSX.Element {
+  renderError(key: string, error: SurveyError, cssClasses: any): React.JSX.Element {
     return null;
   }
 
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     const question = this.survey.getAllQuestions()[0];
     return (
       <>

packages/survey-creator-react/src/QuestionEmbeddedSurvey.tsx

@@ -9,7 +9,7 @@ export class SurveyElementEmbeddedSurvey extends SurveyQuestionElementBase {
   protected get creator(): ISurveyCreator {
     return this.props.creator;
   }
-  public render(): JSX.Element {
+  public render(): React.JSX.Element {
     if (!this.embeddedSurvey) return null;
     const survey = this.embeddedSurvey.embeddedSurvey;
     if (!survey || !survey.currentPage) return null;

packages/survey-creator-react/src/QuestionError.tsx

@@ -10,7 +10,7 @@ export interface IQuestionErrorComponentProps {
 }
 
 export class QuestionErrorComponent extends React.Component<IQuestionErrorComponentProps, any> {
-  render(): JSX.Element | null {
+  render(): React.JSX.Element | null {
     return (
       <div>
         <SvgIcon aria-hidden="true" iconName="icon-alert_24x24" size="24" className={this.props.cssClasses.error.icon}></SvgIcon>

packages/survey-creator-react/src/QuestionLinkValue.tsx

@@ -10,7 +10,7 @@ export class SurveyQuestionLinkValue extends SurveyQuestionElementBase {
   protected get question(): QuestionLinkValueModel {
     return this.questionBase as QuestionLinkValueModel;
   }
-  protected renderClear(): JSX.Element {
+  protected renderClear(): React.JSX.Element {
     const showClear = (this.questionBase as any).showClear;
     if (!this.questionBase.isReadOnly && showClear) {
       return (
@@ -26,7 +26,7 @@ export class SurveyQuestionLinkValue extends SurveyQuestionElementBase {
       return null;
     }
   }
-  protected renderElement(): JSX.Element {
+  protected renderElement(): React.JSX.Element {
     return (
       <>
         <ActionButton

packages/survey-creator-react/src/Results.tsx

@@ -24,7 +24,7 @@ export class SurveyResults extends CreatorModelElement<
   protected getStateElement(): Base {
     return this.model;
   }
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     if (!this.model) {
       return null;
     }
@@ -52,7 +52,7 @@ export class SurveyResults extends CreatorModelElement<
       </div>
     );
   }
-  renderResultAsText(): JSX.Element {
+  renderResultAsText(): React.JSX.Element {
     if (this.model.resultViewType !== "text") {
       return null;
     }
@@ -62,7 +62,7 @@ export class SurveyResults extends CreatorModelElement<
       </div>
     );
   }
-  renderResultAsTable(): JSX.Element {
+  renderResultAsTable(): React.JSX.Element {
     if (this.model.resultViewType !== "table") {
       return null;
     }
@@ -84,7 +84,7 @@ export class SurveyResults extends CreatorModelElement<
       </div>
     );
   }
-  static renderRows(data: Array<any>): Array<JSX.Element> {
+  static renderRows(data: Array<any>): Array<React.JSX.Element> {
     const rows = [];
     for (var i = 0; i < data.length; i++) {
       rows.push(<SurveyResultsByRow key={i + 1} row={data[i]} />);
@@ -102,7 +102,7 @@ export class SurveyResultsByRow extends CreatorModelElement<any, any> {
     return this.row;
   }
 
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     return (
       <>
         {attachKey2click(<tr onClick={() => this.row.toggle()}>

packages/survey-creator-react/src/StringEditor.tsx

@@ -122,13 +122,18 @@ export class SurveyLocStringEditor extends CreatorModelElement<any, any> {
   private get className() {
     return this.baseModel.className(this.locString.renderedHtml);
   }
-  public render(): JSX.Element {
+  private htmlValue = {
+    __html: this.locString?.renderedHtml
+  };
+  public render(): React.JSX.Element {
     if (!this.locString) {
       return null;
     }
     let control = null;
     if (this.locString.hasHtml) {
-      const htmlValue = { __html: this.locString.renderedHtml };
+      if(this.htmlValue.__html !== this.locString.renderedHtml) {
+        this.htmlValue = { __html: this.locString.renderedHtml };
+      }
       control = (
         <span
           role="textbox"
@@ -140,13 +145,13 @@ export class SurveyLocStringEditor extends CreatorModelElement<any, any> {
           aria-label={this.placeholder || "content editable"}
           suppressContentEditableWarning={true}
           // style={this.style}
-          dangerouslySetInnerHTML={htmlValue}
+          dangerouslySetInnerHTML={this.htmlValue}
           onBlur={this.onBlur}
           onFocus={this.onFocus}
           onKeyDown={this.onKeyDown}
           onMouseUp={this.onMouseUp}
           onClick={this.edit}
-        />
+        ></span>
       );
     } else {
       control = (
@@ -207,4 +212,4 @@ ReactElementFactory.Instance.registerElement(
   (props) => {
     return React.createElement(SurveyLocStringEditor, props);
   }
-);
+);

packages/survey-creator-react/src/SurveyCreator.tsx

@@ -190,7 +190,7 @@ export class SurveyCreator extends SurveyCreatorModel {
   }
 
   //ISurveyCreator
-  public createQuestionElement(question: Question): JSX.Element {
+  public createQuestionElement(question: Question): React.JSX.Element {
     return ReactQuestionFactory.Instance.createQuestion(
       question.isDefaultRendering()
         ? question.getTemplate()
@@ -206,7 +206,7 @@ export class SurveyCreator extends SurveyCreatorModel {
     key: string,
     error: SurveyError,
     cssClasses: any
-  ): JSX.Element {
+  ): React.JSX.Element {
     return (
       <div key={key}>
         <span className={cssClasses.error.icon} aria-hidden="true" />

packages/survey-creator-react/src/TabbedMenu.tsx

@@ -34,7 +34,7 @@ export class TabbedMenuComponent extends SurveyElementBase<
     this.rootRef = React.createRef();
   }
 
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const items = this.model.renderedActions.map((item) => <TabbedMenuItemWrapper item={item} key={item.id} />);
     return (
       <div ref={this.rootRef} className="svc-tabbed-menu">
@@ -72,7 +72,7 @@ class TabbedMenuItemWrapper extends SurveyElementBase<
     return this.item;
   }
 
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     let css: string = "svc-tabbed-menu-item-container";
     if (this.item.css) {
       css += " " + this.item.css;
@@ -108,7 +108,7 @@ export class TabbedMenuItemComponent extends SurveyElementBase<
     return this.item;
   }
 
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     const item = this.item;
     return (attachKey2click(
       <div className={item.getRootCss()} onClick={() => item.action(item)}>

packages/survey-creator-react/src/adorners/CellQuestion.tsx

@@ -27,7 +27,7 @@ export class CellQuestionAdornerComponent extends CreatorModelElement<
   protected getUpdatedModelProps(): string[] {
     return ["question", "componentData"];
   }
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     return (
       <React.Fragment>
         <div

packages/survey-creator-react/src/adorners/CellQuestionDropdown.tsx

@@ -25,7 +25,7 @@ export class CellQuestionDropdownAdornerComponent extends CreatorModelElement<
   protected getStateElement(): Base {
     return this.model;
   }
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     const question = this.props.question as QuestionSelectBase;
     const textStyle = (this.props.question as any).textStyle;
     return (