From 0d433507c1198f35a56f8ea8572e19d63a3011a6 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Fri, 13 Dec 2024 19:16:24 +0400
Subject: [PATCH 1/6] Work for React 19

---
 packages/survey-creator-react/package.json    |  6 +-
 .../survey-creator-react/src/ActionButton.tsx |  6 +-
 .../src/AddQuestionButton.tsx                 |  4 +-
 .../src/ImageItemValueWrapper.tsx             |  4 +-
 .../src/ItemValueWrapper.tsx                  |  4 +-
 .../survey-creator-react/src/LogoImage.tsx    |  4 +-
 .../src/MatrixCellWrapper.tsx                 |  4 +-
 .../survey-creator-react/src/Navigation.tsx   |  2 +-
 .../src/PageNavigator.tsx                     |  4 +-
 .../src/QuestionEditorContent.tsx             |  6 +-
 .../src/QuestionEmbeddedSurvey.tsx            |  2 +-
 .../src/QuestionError.tsx                     |  2 +-
 .../src/QuestionLinkValue.tsx                 |  4 +-
 packages/survey-creator-react/src/Results.tsx | 10 +--
 .../survey-creator-react/src/StringEditor.tsx |  7 +-
 .../src/SurveyCreator.tsx                     |  4 +-
 .../survey-creator-react/src/TabbedMenu.tsx   |  6 +-
 .../src/adorners/CellQuestion.tsx             |  2 +-
 .../src/adorners/CellQuestionDropdown.tsx     |  2 +-
 .../src/adorners/Page.tsx                     | 12 +--
 .../src/adorners/Panel.tsx                    |  4 +-
 .../src/adorners/Question.tsx                 | 18 ++---
 .../src/adorners/QuestionBanner.tsx           |  2 +-
 .../src/adorners/QuestionDropdown.tsx         |  2 +-
 .../src/adorners/QuestionFooter.tsx           |  2 +-
 .../src/adorners/QuestionHeader.tsx           |  2 +-
 .../src/adorners/QuestionImage.tsx            | 10 +--
 .../src/adorners/QuestionRating.tsx           |  2 +-
 .../src/adorners/QuestionWidget.tsx           |  2 +-
 .../survey-creator-react/src/adorners/Row.tsx |  4 +-
 .../src/components/Scroll.tsx                 |  2 +-
 .../src/components/Search.tsx                 |  2 +-
 .../src/components/SurfacePlaceholder.tsx     |  2 +-
 .../src/custom-questions/BooleanSwitch.tsx    |  2 +-
 .../src/custom-questions/ColorQuestion.tsx    | 18 ++---
 .../src/custom-questions/FileEditQuestion.tsx | 22 +++---
 .../src/custom-questions/SpinEditor.tsx       | 10 +--
 .../TextWithResetQuestion.tsx                 |  4 +-
 .../src/side-bar/ObjectSelector.tsx           |  2 +-
 .../src/side-bar/PropertyGridPlaceholder.tsx  |  2 +-
 .../src/side-bar/SideBar.tsx                  |  4 +-
 .../src/side-bar/SideBarDefaultHeader.tsx     |  2 +-
 .../src/side-bar/SideBarHeader.tsx            |  2 +-
 .../side-bar/SideBarPropertyGridHeader.tsx    |  2 +-
 .../src/side-bar/TabButton.tsx                |  2 +-
 .../src/side-bar/TabControl.tsx               |  2 +-
 .../src/tabs/Designer.tsx                     | 14 ++--
 .../src/tabs/JsonEditorAce.tsx                |  2 +-
 .../src/tabs/JsonEditorTextarea.tsx           |  4 +-
 .../survey-creator-react/src/tabs/Logic.tsx   |  6 +-
 .../survey-creator-react/src/tabs/Preview.tsx | 10 +--
 .../src/tabs/SurveySimulator.tsx              |  2 +-
 .../survey-creator-react/src/tabs/Theme.tsx   |  8 +-
 .../src/tabs/logic-operator.tsx               |  2 +-
 .../src/tabs/translation/Translation.tsx      |  4 +-
 .../src/toolbox/AdaptiveToolbox.tsx           |  6 +-
 .../src/toolbox/ToolboxCategory.tsx           |  6 +-
 .../src/toolbox/ToolboxItem.tsx               |  6 +-
 .../src/toolbox/ToolboxItemGroup.tsx          |  2 +-
 .../testCafe-V2/by-page.html                  | 50 +++++++-----
 .../testCafe-V2/dropdown-collapse-view.html   | 50 +++++++-----
 .../testCafe-V2/preview-theme-switcher.html   | 56 +++++++------
 .../testCafe-V2/testcafe-no-license.html      | 49 +++++++-----
 .../testCafe-V2/testcafe-theme-tab.html       | 54 +++++++------
 .../testCafe-V2/testcafe-widget.html          | 49 +++++++-----
 .../testCafe-V2/testcafe.html                 | 78 ++++++++++---------
 .../testCafe-V2/testcafe_localized_ui.html    | 56 +++++++------
 .../testCafe-V2/theme-for-preview-option.html | 52 +++++++------
 .../testCafe/by-page.html                     | 50 +++++++-----
 .../testCafe/dropdown-collapse-view.html      | 50 +++++++-----
 .../testCafe/preview-theme-switcher.html      | 52 +++++++------
 .../testCafe/testcafe-no-license.html         | 49 +++++++-----
 .../testCafe/testcafe-theme-tab.html          | 50 +++++++-----
 .../testCafe/testcafe-widget.html             | 49 +++++++-----
 .../testCafe/testcafe.html                    | 74 ++++++++++--------
 .../testCafe/testcafe_localized_ui.html       | 56 +++++++------
 .../testCafe/theme-for-preview-option.html    | 52 +++++++------
 .../survey-creator-react/webpack.config.js    |  2 +-
 78 files changed, 709 insertions(+), 564 deletions(-)

diff --git a/packages/survey-creator-react/package.json b/packages/survey-creator-react/package.json
index de3351c5db..48c946ea80 100644
--- a/packages/survey-creator-react/package.json
+++ b/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
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/survey-creator-react/src/ActionButton.tsx b/packages/survey-creator-react/src/ActionButton.tsx
index 89b2b3e1c9..a50a4f8686 100644
--- a/packages/survey-creator-react/src/ActionButton.tsx
+++ b/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>;
diff --git a/packages/survey-creator-react/src/AddQuestionButton.tsx b/packages/survey-creator-react/src/AddQuestionButton.tsx
index 3c52187948..eb6566d6ba 100644
--- a/packages/survey-creator-react/src/AddQuestionButton.tsx
+++ b/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
diff --git a/packages/survey-creator-react/src/ImageItemValueWrapper.tsx b/packages/survey-creator-react/src/ImageItemValueWrapper.tsx
index 7fd2afa97a..1abdd95b88 100644
--- a/packages/survey-creator-react/src/ImageItemValueWrapper.tsx
+++ b/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;
diff --git a/packages/survey-creator-react/src/ItemValueWrapper.tsx b/packages/survey-creator-react/src/ItemValueWrapper.tsx
index b174d7fd7d..2662a4818d 100644
--- a/packages/survey-creator-react/src/ItemValueWrapper.tsx
+++ b/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
diff --git a/packages/survey-creator-react/src/LogoImage.tsx b/packages/survey-creator-react/src/LogoImage.tsx
index b9d233cb5d..3e6ab846e7 100644
--- a/packages/survey-creator-react/src/LogoImage.tsx
+++ b/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();
     }
diff --git a/packages/survey-creator-react/src/MatrixCellWrapper.tsx b/packages/survey-creator-react/src/MatrixCellWrapper.tsx
index 19f852aa1a..215ea00b0b 100644
--- a/packages/survey-creator-react/src/MatrixCellWrapper.tsx
+++ b/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">
diff --git a/packages/survey-creator-react/src/Navigation.tsx b/packages/survey-creator-react/src/Navigation.tsx
index 068998b32c..c8d70da595 100644
--- a/packages/survey-creator-react/src/Navigation.tsx
+++ b/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 }
diff --git a/packages/survey-creator-react/src/PageNavigator.tsx b/packages/survey-creator-react/src/PageNavigator.tsx
index cb80adb8d9..5e5952c256 100644
--- a/packages/survey-creator-react/src/PageNavigator.tsx
+++ b/packages/survey-creator-react/src/PageNavigator.tsx
@@ -74,7 +74,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";
@@ -113,7 +113,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)) {
diff --git a/packages/survey-creator-react/src/QuestionEditorContent.tsx b/packages/survey-creator-react/src/QuestionEditorContent.tsx
index c23801221b..fead48627d 100644
--- a/packages/survey-creator-react/src/QuestionEditorContent.tsx
+++ b/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 (
       <>
diff --git a/packages/survey-creator-react/src/QuestionEmbeddedSurvey.tsx b/packages/survey-creator-react/src/QuestionEmbeddedSurvey.tsx
index be1f8f5ae2..1f8c6390f4 100644
--- a/packages/survey-creator-react/src/QuestionEmbeddedSurvey.tsx
+++ b/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;
diff --git a/packages/survey-creator-react/src/QuestionError.tsx b/packages/survey-creator-react/src/QuestionError.tsx
index 980b5b1e60..4352c59aa2 100644
--- a/packages/survey-creator-react/src/QuestionError.tsx
+++ b/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>
diff --git a/packages/survey-creator-react/src/QuestionLinkValue.tsx b/packages/survey-creator-react/src/QuestionLinkValue.tsx
index 64aef4b363..19dd5c7c39 100644
--- a/packages/survey-creator-react/src/QuestionLinkValue.tsx
+++ b/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
diff --git a/packages/survey-creator-react/src/Results.tsx b/packages/survey-creator-react/src/Results.tsx
index 3c119c6fcf..fef0e7f3b2 100644
--- a/packages/survey-creator-react/src/Results.tsx
+++ b/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()}>
diff --git a/packages/survey-creator-react/src/StringEditor.tsx b/packages/survey-creator-react/src/StringEditor.tsx
index a699c85a3d..31d7c92d7c 100644
--- a/packages/survey-creator-react/src/StringEditor.tsx
+++ b/packages/survey-creator-react/src/StringEditor.tsx
@@ -122,13 +122,14 @@ export class SurveyLocStringEditor extends CreatorModelElement<any, any> {
   private get className() {
     return this.baseModel.className(this.locString.renderedHtml);
   }
-  public render(): JSX.Element {
+  public render(): React.JSX.Element {
     if (!this.locString) {
       return null;
     }
     let control = null;
     if (this.locString.hasHtml) {
-      const htmlValue = { __html: this.locString.renderedHtml };
+      const showText = this.baseModel.focused && this.baseModel.editAsText;
+      const htmlValue = { __html: showText ? null : this.locString.renderedHtml };
       control = (
         <span
           role="textbox"
@@ -146,7 +147,7 @@ export class SurveyLocStringEditor extends CreatorModelElement<any, any> {
           onKeyDown={this.onKeyDown}
           onMouseUp={this.onMouseUp}
           onClick={this.edit}
-        />
+        >{showText ? this.locString.calculatedText : null}</span>
       );
     } else {
       control = (
diff --git a/packages/survey-creator-react/src/SurveyCreator.tsx b/packages/survey-creator-react/src/SurveyCreator.tsx
index f2ce6d8633..fd34f0804f 100644
--- a/packages/survey-creator-react/src/SurveyCreator.tsx
+++ b/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" />
diff --git a/packages/survey-creator-react/src/TabbedMenu.tsx b/packages/survey-creator-react/src/TabbedMenu.tsx
index 2b619ce2f1..1d2ecf8672 100644
--- a/packages/survey-creator-react/src/TabbedMenu.tsx
+++ b/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)}>
diff --git a/packages/survey-creator-react/src/adorners/CellQuestion.tsx b/packages/survey-creator-react/src/adorners/CellQuestion.tsx
index 24f5ad8b5c..5e5f482c9e 100644
--- a/packages/survey-creator-react/src/adorners/CellQuestion.tsx
+++ b/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
diff --git a/packages/survey-creator-react/src/adorners/CellQuestionDropdown.tsx b/packages/survey-creator-react/src/adorners/CellQuestionDropdown.tsx
index f81c04ed7a..a765668652 100644
--- a/packages/survey-creator-react/src/adorners/CellQuestionDropdown.tsx
+++ b/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 (
diff --git a/packages/survey-creator-react/src/adorners/Page.tsx b/packages/survey-creator-react/src/adorners/Page.tsx
index 564c74d913..14ff86a9e7 100644
--- a/packages/survey-creator-react/src/adorners/Page.tsx
+++ b/packages/survey-creator-react/src/adorners/Page.tsx
@@ -47,7 +47,7 @@ export class CreatorSurveyPageComponent extends CreatorModelElement<
   }
   shouldComponentUpdate(nextProps: any, nextState: any): boolean {
     const res = super.shouldComponentUpdate(nextProps, nextState);
-    if(this.model) {
+    if (this.model) {
       this.model.isGhost = this.props.isGhost;
     }
     return res;
@@ -73,7 +73,7 @@ export class CreatorSurveyPageComponent extends CreatorModelElement<
   protected canRender(): boolean {
     return super.canRender();
   }
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     if (!this.props.page) return null;
     return (
       attachKey2click(<div
@@ -97,7 +97,7 @@ export class CreatorSurveyPageComponent extends CreatorModelElement<
       </div>)
     );
   }
-  protected renderPlaceholder(): JSX.Element {
+  protected renderPlaceholder(): React.JSX.Element {
     if (!this.model.showPlaceholder) return null;
     return (
       <div className="svc-page__placeholder_frame">
@@ -107,10 +107,10 @@ export class CreatorSurveyPageComponent extends CreatorModelElement<
       </div>
     );
   }
-  protected renderContent(): JSX.Element {
+  protected renderContent(): React.JSX.Element {
     return (<SurveyPage page={this.props.page} survey={this.props.survey} creator={this.props.creator} css={this.model.css}></SurveyPage>);
   }
-  protected renderHeader(): JSX.Element {
+  protected renderHeader(): React.JSX.Element {
     const actions = (<div className="svc-page__content-actions">
       <SurveyActionBar model={this.model.actionContainer}></SurveyActionBar>
     </div>);
@@ -126,7 +126,7 @@ export class CreatorSurveyPageComponent extends CreatorModelElement<
       </div>
     );
   }
-  protected renderFooter(): JSX.Element {
+  protected renderFooter(): React.JSX.Element {
     return <SurveyActionBar model={this.model.footerActionsBar}></SurveyActionBar>;
   }
 }
diff --git a/packages/survey-creator-react/src/adorners/Panel.tsx b/packages/survey-creator-react/src/adorners/Panel.tsx
index bba1a5339f..9e59497e5b 100644
--- a/packages/survey-creator-react/src/adorners/Panel.tsx
+++ b/packages/survey-creator-react/src/adorners/Panel.tsx
@@ -15,7 +15,7 @@ import { QuestionAdornerComponent, QuestionAdornerComponentProps } from "./Quest
 import { AddQuestionButtonComponent } from "../AddQuestionButton";
 
 export class PanelAdornerComponent extends QuestionAdornerComponent {
-  renderElementPlaceholder(): JSX.Element {
+  renderElementPlaceholder(): React.JSX.Element {
     if (!this.model.isEmptyElement) {
       return null;
     }
@@ -48,7 +48,7 @@ export class PanelAdornerComponent extends QuestionAdornerComponent {
   protected disableTabStop() {
     return true;
   }
-  protected renderFooter(): JSX.Element {
+  protected renderFooter(): React.JSX.Element {
     return (<React.Fragment>
       {!this.model.isEmptyElement && this.model.element.isPanel && this.model.showAddQuestionButton ? (
         <div className="svc-panel__add-new-question-container">
diff --git a/packages/survey-creator-react/src/adorners/Question.tsx b/packages/survey-creator-react/src/adorners/Question.tsx
index 346fe6a0ea..fcea4462c3 100644
--- a/packages/survey-creator-react/src/adorners/Question.tsx
+++ b/packages/survey-creator-react/src/adorners/Question.tsx
@@ -15,7 +15,7 @@ import {
 import { CreatorModelElement } from "../ModelElement";
 
 export interface QuestionAdornerComponentProps {
-  element: JSX.Element;
+  element: React.JSX.Element;
   question: Question;
   componentData: any;
 }
@@ -54,7 +54,7 @@ export class QuestionAdornerComponent extends CreatorModelElement<
     return this.model;
   }
 
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const allowInteractions = this.model.element
       .isInteractiveDesignElement;
     const titleForCollapsedState = this.renderQuestionTitle();
@@ -76,7 +76,7 @@ export class QuestionAdornerComponent extends CreatorModelElement<
   protected disableTabStop() {
     return true;
   }
-  protected renderContent(allowInteractions: boolean): JSX.Element {
+  protected renderContent(allowInteractions: boolean): React.JSX.Element {
     var content = this.model.needToRenderContent ? this.renderElementContent() : null;
     //if (!allowInteractions) return <>{content}{this.renderFooter()}</>;
     return attachKey2click(
@@ -94,20 +94,20 @@ export class QuestionAdornerComponent extends CreatorModelElement<
       </div>,
       undefined, { disableTabStop: this.disableTabStop() });
   }
-  protected renderHeader(): JSX.Element {
+  protected renderHeader(): React.JSX.Element {
     return ReactElementFactory.Instance.createElement("svc-question-header", { model: this.model });
   }
-  protected renderFooter(): JSX.Element {
+  protected renderFooter(): React.JSX.Element {
     const allowInteractions = this.model.element
       .isInteractiveDesignElement;
     return allowInteractions ? ReactElementFactory.Instance.createElement("svc-question-footer", { className: "svc-question__content-actions", model: this.model }) : null;
   }
-  protected renderCarryForwardBanner(): JSX.Element {
+  protected renderCarryForwardBanner(): React.JSX.Element {
     if (!this.model.isBannerShowing) return null;
     return ReactElementFactory.Instance.createElement("svc-question-banner", this.model.createBannerParams());
   }
 
-  protected renderQuestionTitle(): JSX.Element {
+  protected renderQuestionTitle(): React.JSX.Element {
     if (!this.model.showHiddenTitle) return null;
     const element = this.model.element as Question | PanelModel;
     return (
@@ -127,7 +127,7 @@ export class QuestionAdornerComponent extends CreatorModelElement<
     );
   }
 
-  protected renderElementContent(): JSX.Element {
+  protected renderElementContent(): React.JSX.Element {
     return (
       <>
         {this.props.element}
@@ -140,7 +140,7 @@ export class QuestionAdornerComponent extends CreatorModelElement<
     super.componentDidMount();
     this.model.attachToUI(this.props.question, this.rootRef.current);
   }
-  renderElementPlaceholder(): JSX.Element {
+  renderElementPlaceholder(): React.JSX.Element {
     if (!this.model.isEmptyElement) {
       return null;
     }
diff --git a/packages/survey-creator-react/src/adorners/QuestionBanner.tsx b/packages/survey-creator-react/src/adorners/QuestionBanner.tsx
index 019469fabd..9c459e125d 100644
--- a/packages/survey-creator-react/src/adorners/QuestionBanner.tsx
+++ b/packages/survey-creator-react/src/adorners/QuestionBanner.tsx
@@ -4,7 +4,7 @@ import { ReactElementFactory } from "survey-react-ui";
 import { ActionButton } from "../ActionButton";
 
 export class QuestionBanner extends React.Component<QuestionBannerParams, any> {
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     return (
       <div className="svc-carry-forward-panel-wrapper"><div className="svc-carry-forward-panel">
         <span>{this.props.text}{" "}</span>
diff --git a/packages/survey-creator-react/src/adorners/QuestionDropdown.tsx b/packages/survey-creator-react/src/adorners/QuestionDropdown.tsx
index 5f18d66a53..2026443e83 100644
--- a/packages/survey-creator-react/src/adorners/QuestionDropdown.tsx
+++ b/packages/survey-creator-react/src/adorners/QuestionDropdown.tsx
@@ -26,7 +26,7 @@ export class QuestionDropdownAdornerComponent extends QuestionAdornerComponent {
     return this.dropdownModel.question as QuestionSelectBase;
   }
 
-  renderElementPlaceholder(): JSX.Element {
+  renderElementPlaceholder(): React.JSX.Element {
     const textStyle = (this.question as any).textStyle;
     return (
       <div
diff --git a/packages/survey-creator-react/src/adorners/QuestionFooter.tsx b/packages/survey-creator-react/src/adorners/QuestionFooter.tsx
index e567ec9811..5925f6daa6 100644
--- a/packages/survey-creator-react/src/adorners/QuestionFooter.tsx
+++ b/packages/survey-creator-react/src/adorners/QuestionFooter.tsx
@@ -11,7 +11,7 @@ export interface QuestionWrapperFooterProps {
   model: QuestionAdornerViewModel;
 }
 export class QuestionWrapperFooter extends React.Component<QuestionWrapperFooterProps, any> {
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     return (<div className={this.props.className} onFocus={(e) => this.props.model.select(this.props.model, new ReactMouseEvent(e as any))}>
       <SurveyActionBar model={this.props.model.actionContainer} handleClick={false}></SurveyActionBar>
     </div>);
diff --git a/packages/survey-creator-react/src/adorners/QuestionHeader.tsx b/packages/survey-creator-react/src/adorners/QuestionHeader.tsx
index 592b957787..b1463c5d82 100644
--- a/packages/survey-creator-react/src/adorners/QuestionHeader.tsx
+++ b/packages/survey-creator-react/src/adorners/QuestionHeader.tsx
@@ -18,7 +18,7 @@ export interface QuestionWrapperHeaderProps {
 }
 
 export class QuestionWrapperHeader extends React.Component<QuestionWrapperHeaderProps, any> {
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     if (!this.props.model.allowDragging) return null;
     return (
       <div className={"svc-question__drag-area"}
diff --git a/packages/survey-creator-react/src/adorners/QuestionImage.tsx b/packages/survey-creator-react/src/adorners/QuestionImage.tsx
index 7d7bbf4fb8..b61a08a3a3 100644
--- a/packages/survey-creator-react/src/adorners/QuestionImage.tsx
+++ b/packages/survey-creator-react/src/adorners/QuestionImage.tsx
@@ -20,7 +20,7 @@ export class QuestionImageAdornerComponent extends QuestionAdornerComponent {
   public get imageModel(): QuestionImageAdornerViewModel {
     return this.model as QuestionImageAdornerViewModel;
   }
-  protected renderHeader(): JSX.Element {
+  protected renderHeader(): React.JSX.Element {
     return (<React.Fragment>
       <input
         type="file"
@@ -40,14 +40,14 @@ export class QuestionImageAdornerComponent extends QuestionAdornerComponent {
       {super.renderHeader()}
     </React.Fragment>);
   }
-  renderLoadingPlaceholder(): JSX.Element {
+  renderLoadingPlaceholder(): React.JSX.Element {
     return (<div className="svc-image-question__loading-placeholder">
       <div className="svc-image-question__loading">
         <LoadingIndicatorComponent></LoadingIndicatorComponent>
       </div>
     </div>);
   }
-  renderChooseButton(): JSX.Element {
+  renderChooseButton(): React.JSX.Element {
     return (<div className="svc-image-question-controls">
       {this.model.allowEdit ? attachKey2click(<span
         className="svc-context-button"
@@ -57,14 +57,14 @@ export class QuestionImageAdornerComponent extends QuestionAdornerComponent {
       </span>) : null}
     </div>);
   }
-  renderElementPlaceholder(): JSX.Element {
+  renderElementPlaceholder(): React.JSX.Element {
     return this.imageModel.isUploading ? this.renderLoadingPlaceholder() : this.renderChooseButton();
   }
   protected getStateElements(): Array<Base> {
     return [this.model, this.imageModel.filePresentationModel];
   }
 
-  protected renderElementContent(): JSX.Element {
+  protected renderElementContent(): React.JSX.Element {
     if (this.imageModel.isEmptyImageLink) {
       const fileQuestion = ReactQuestionFactory.Instance.createQuestion("file", {
         creator: this.imageModel.question.survey,
diff --git a/packages/survey-creator-react/src/adorners/QuestionRating.tsx b/packages/survey-creator-react/src/adorners/QuestionRating.tsx
index 7bbb0370f6..f0334836d2 100644
--- a/packages/survey-creator-react/src/adorners/QuestionRating.tsx
+++ b/packages/survey-creator-react/src/adorners/QuestionRating.tsx
@@ -30,7 +30,7 @@ export class QuestionRatingAdornerComponent extends CreatorModelElement<Question
   protected getStateElement(): Base {
     return this.model;
   }
-  protected renderElement(): JSX.Element {
+  protected renderElement(): React.JSX.Element {
     const model = this.ratingModel;
     return (<>
       <div className="svc-rating-question-content">
diff --git a/packages/survey-creator-react/src/adorners/QuestionWidget.tsx b/packages/survey-creator-react/src/adorners/QuestionWidget.tsx
index 5c4202a2a2..80c541b782 100644
--- a/packages/survey-creator-react/src/adorners/QuestionWidget.tsx
+++ b/packages/survey-creator-react/src/adorners/QuestionWidget.tsx
@@ -19,7 +19,7 @@ export class QuestionWidgetAdornerComponent extends QuestionAdornerComponent {
   public get widgetModel(): QuestionAdornerViewModel {
     return this.model as QuestionAdornerViewModel;
   }
-  protected renderElementContent(): JSX.Element {
+  protected renderElementContent(): React.JSX.Element {
     return (
       <div
         className={"svc-widget__content"}
diff --git a/packages/survey-creator-react/src/adorners/Row.tsx b/packages/survey-creator-react/src/adorners/Row.tsx
index 2d5a064510..936eb35f66 100644
--- a/packages/survey-creator-react/src/adorners/Row.tsx
+++ b/packages/survey-creator-react/src/adorners/Row.tsx
@@ -5,7 +5,7 @@ import { ReactElementFactory } from "survey-react-ui";
 import { CreatorModelElement } from "../ModelElement";
 
 interface RowWrapperComponentProps {
-  element: JSX.Element;
+  element: React.JSX.Element;
   componentData: any;
   row: QuestionRowModel;
 }
@@ -44,7 +44,7 @@ export class RowWrapper extends CreatorModelElement<
     super.componentWillUnmount();
   }
 
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     return (
       <div
         key={"svc-row-" + this.props.row.id}
diff --git a/packages/survey-creator-react/src/components/Scroll.tsx b/packages/survey-creator-react/src/components/Scroll.tsx
index 0c67554478..e8c565f56e 100644
--- a/packages/survey-creator-react/src/components/Scroll.tsx
+++ b/packages/survey-creator-react/src/components/Scroll.tsx
@@ -24,7 +24,7 @@ export class ScrollComponent extends React.Component<IScrollComponentProps, any>
     this.model.setRootElement(undefined);
   }
 
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     return <div ref={this.rootRef} className="svc-scroll__wrapper">
       <div className="svc-scroll__scroller sv-drag-target-skipped" onScroll={() => this.model.onScrollContainer()}>
         <div className="svc-scroll__container">
diff --git a/packages/survey-creator-react/src/components/Search.tsx b/packages/survey-creator-react/src/components/Search.tsx
index 36773c3dd3..33c642f4a2 100644
--- a/packages/survey-creator-react/src/components/Search.tsx
+++ b/packages/survey-creator-react/src/components/Search.tsx
@@ -21,7 +21,7 @@ export class SearchComponent extends SurveyElementBase<ISearchComponentProps, an
     };
   }
 
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     if (!this.model.isVisible) return null;
 
     const onChange = (e: any) => {
diff --git a/packages/survey-creator-react/src/components/SurfacePlaceholder.tsx b/packages/survey-creator-react/src/components/SurfacePlaceholder.tsx
index dc37764ce0..31d4aa7477 100644
--- a/packages/survey-creator-react/src/components/SurfacePlaceholder.tsx
+++ b/packages/survey-creator-react/src/components/SurfacePlaceholder.tsx
@@ -11,7 +11,7 @@ export class SurfacePlaceholder extends React.Component<ISurfacePlaceholderProps
   constructor(props: ISurfacePlaceholderProps) {
     super(props);
   }
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     return (
       <div className="svc-surface-placeholder" >
         <div className={"svc-surface-placeholder__image svc-surface-placeholder__image--" + this.props.name}></div >
diff --git a/packages/survey-creator-react/src/custom-questions/BooleanSwitch.tsx b/packages/survey-creator-react/src/custom-questions/BooleanSwitch.tsx
index bf92a35101..6cbe64a1a9 100644
--- a/packages/survey-creator-react/src/custom-questions/BooleanSwitch.tsx
+++ b/packages/survey-creator-react/src/custom-questions/BooleanSwitch.tsx
@@ -3,7 +3,7 @@ import { RendererFactory } from "survey-core";
 import { attachKey2click, ReactQuestionFactory, SurveyElementBase, SurveyQuestionElementBase } from "survey-react-ui";
 
 export class SurveyQuestionBooleanSwitch extends SurveyQuestionElementBase {
-  protected renderElement(): JSX.Element {
+  protected renderElement(): React.JSX.Element {
     const button = attachKey2click(<div className={"spg-boolean-switch__button" + (this.questionBase.value ? " spg-boolean-switch__button--checked" : "")} tabIndex={0}
       role="checkbox"
       aria-required={this.questionBase.ariaRequired}
diff --git a/packages/survey-creator-react/src/custom-questions/ColorQuestion.tsx b/packages/survey-creator-react/src/custom-questions/ColorQuestion.tsx
index 31daa7d5d7..5536508f68 100644
--- a/packages/survey-creator-react/src/custom-questions/ColorQuestion.tsx
+++ b/packages/survey-creator-react/src/custom-questions/ColorQuestion.tsx
@@ -20,7 +20,7 @@ export class SurveyQuestionColor extends SurveyQuestionText {
           placeholder={this.question.renderedPlaceholder}
           autoComplete="off"
           onKeyUp={(event) => this.question.onKeyUp(event.nativeEvent)}
-          onBlur={(event) => this.question.onBlur(event.nativeEvent) }
+          onBlur={(event) => this.question.onBlur(event.nativeEvent)}
           onChange={this.question.onChange}
           onBeforeInput={event => this.question.onBeforeInput(event.nativeEvent as InputEvent)}
           aria-required={this.question.ariaRequired}
@@ -31,25 +31,25 @@ export class SurveyQuestionColor extends SurveyQuestionText {
       </>
     );
   }
-  protected renderElement(): JSX.Element {
+  protected renderElement(): React.JSX.Element {
     return (
       <div className={this.question.cssClasses.root} onKeyDown={event => this.question.onKeyDown(event.nativeEvent)}>
-        { this.renderColorSwatch() }
-        { this.renderInput() }
-        { this.question.showDropdownAction ? this.renderDropdownAction() : null }
+        {this.renderColorSwatch()}
+        {this.renderInput()}
+        {this.question.showDropdownAction ? this.renderDropdownAction() : null}
       </div>
     );
   }
   protected getValueCore() {
     return this.question.renderedValue;
   }
-  protected renderColorSwatch(): JSX.Element {
+  protected renderColorSwatch(): React.JSX.Element {
     return <label className={this.question.getSwatchCss()} style={this.question.getSwatchStyle()}>
       <SvgIcon iconName={this.question.cssClasses.swatchIcon} size={"auto"}></SvgIcon>
-      <input type="color" disabled={this.isDisplayMode} value={this.question.renderedColorValue} className={this.question.cssClasses.colorInput} onChange={(event) => this.question.onColorInputChange(event.nativeEvent)} tabIndex={-1}/>
+      <input type="color" disabled={this.isDisplayMode} value={this.question.renderedColorValue} className={this.question.cssClasses.colorInput} onChange={(event) => this.question.onColorInputChange(event.nativeEvent)} tabIndex={-1} />
     </label>;
   }
-  protected renderDropdownAction(): JSX.Element {
+  protected renderDropdownAction(): React.JSX.Element {
     return (
       <>
         {ReactElementFactory.Instance.createElement("sv-action-bar-item", { item: this.question.dropdownAction })}
@@ -57,7 +57,7 @@ export class SurveyQuestionColor extends SurveyQuestionText {
       </>
     );
   }
-  protected renderPopup(): JSX.Element {
+  protected renderPopup(): React.JSX.Element {
     return <Popup model={this.question.dropdownAction.popupModel}></Popup>;
   }
 }
diff --git a/packages/survey-creator-react/src/custom-questions/FileEditQuestion.tsx b/packages/survey-creator-react/src/custom-questions/FileEditQuestion.tsx
index 3eb8471570..f34bed3fcf 100644
--- a/packages/survey-creator-react/src/custom-questions/FileEditQuestion.tsx
+++ b/packages/survey-creator-react/src/custom-questions/FileEditQuestion.tsx
@@ -22,13 +22,13 @@ export class SurveyQuestionFileEditor extends SurveyQuestionText {
           ref={(input) => (this.setControl(input))}
           autoComplete="off"
           type="text"
-          onBlur={(event) => this.questionFile.onInputBlur(event.nativeEvent) }
+          onBlur={(event) => this.questionFile.onInputBlur(event.nativeEvent)}
           onChange={(event) => this.questionFile.onInputChange(event.nativeEvent)}
         />
       </>
     );
   }
-  protected renderFileInput(): JSX.Element {
+  protected renderFileInput(): React.JSX.Element {
     return (
       <input
         type="file"
@@ -42,10 +42,10 @@ export class SurveyQuestionFileEditor extends SurveyQuestionText {
         multiple={false} title={this.questionFile.inputTitle}
         accept={this.questionFile.acceptedTypes}
         tabIndex={-1}
-        onChange={(event) => this.questionFile.onFileInputChange(event.nativeEvent) }/>
+        onChange={(event) => this.questionFile.onFileInputChange(event.nativeEvent)} />
     );
   }
-  protected renderButtons(): JSX.Element {
+  protected renderButtons(): React.JSX.Element {
     return (
       <div className={this.questionFile.cssClasses.buttonsContainer}>
         {this.renderClearButton()}
@@ -53,17 +53,17 @@ export class SurveyQuestionFileEditor extends SurveyQuestionText {
       </div>
     );
   }
-  protected renderClearButton(): JSX.Element {
+  protected renderClearButton(): React.JSX.Element {
     return attachKey2click((
       <button type="button"
         className={this.questionFile.cssClasses.clearButton}
         disabled={this.questionFile.getIsClearButtonDisabled()}
-        onClick={ this.questionFile.doClean}>
+        onClick={this.questionFile.doClean}>
         <SvgIcon iconName={this.questionFile.cssClasses.clearButtonIcon} size={"auto"} title={this.questionFile.clearButtonCaption}></SvgIcon>
       </button>
     ));
   }
-  protected renderChooseButton(): JSX.Element {
+  protected renderChooseButton(): React.JSX.Element {
     return (
       attachKey2click(
         <label role="button"
@@ -76,7 +76,7 @@ export class SurveyQuestionFileEditor extends SurveyQuestionText {
       )
     );
   }
-  protected renderElement(): JSX.Element {
+  protected renderElement(): React.JSX.Element {
     return (
       <div
         className={this.questionFile.cssClasses.root}
@@ -86,9 +86,9 @@ export class SurveyQuestionFileEditor extends SurveyQuestionText {
         onDrop={this.questionFile.onDrop}
         onDragLeave={this.questionFile.onDragLeave}
         onKeyDown={event => this.question.onKeyDown(event.nativeEvent)}>
-        { this.renderInput() }
-        { this.renderFileInput() }
-        { this.renderButtons() }
+        {this.renderInput()}
+        {this.renderFileInput()}
+        {this.renderButtons()}
       </div>
     );
   }
diff --git a/packages/survey-creator-react/src/custom-questions/SpinEditor.tsx b/packages/survey-creator-react/src/custom-questions/SpinEditor.tsx
index b72ec2957d..824f6e3e6f 100644
--- a/packages/survey-creator-react/src/custom-questions/SpinEditor.tsx
+++ b/packages/survey-creator-react/src/custom-questions/SpinEditor.tsx
@@ -19,7 +19,7 @@ export class SurveyQuestionSpinEditor extends SurveyQuestionText {
           ref={(input) => (this.setControl(input))}
           placeholder={this.question.renderedPlaceholder}
           autoComplete="off"
-          onBlur={(event) => this.question.onBlur(event.nativeEvent) }
+          onBlur={(event) => this.question.onBlur(event.nativeEvent)}
           onFocus={(event) => this.question.onFocus(event.nativeEvent)}
           onChange={this.question.onChange}
           onBeforeInput={event => this.question.onBeforeInput(event.nativeEvent as InputEvent)}
@@ -33,18 +33,18 @@ export class SurveyQuestionSpinEditor extends SurveyQuestionText {
       </>
     );
   }
-  protected renderElement(): JSX.Element {
+  protected renderElement(): React.JSX.Element {
     return (
       <div className={this.question.cssClasses.root} onKeyDown={event => this.question.onKeyDown(event.nativeEvent)}>
-        { this.renderInput() }
-        { this.renderButtons() }
+        {this.renderInput()}
+        {this.renderButtons()}
       </div>
     );
   }
   protected getValueCore() {
     return this.question.renderedValue;
   }
-  protected renderButtons(): JSX.Element {
+  protected renderButtons(): React.JSX.Element {
     return (
       <span className={this.question.cssClasses.buttonsContainer}>
         <button
diff --git a/packages/survey-creator-react/src/custom-questions/TextWithResetQuestion.tsx b/packages/survey-creator-react/src/custom-questions/TextWithResetQuestion.tsx
index 544b3da0fb..a90e62e8fc 100644
--- a/packages/survey-creator-react/src/custom-questions/TextWithResetQuestion.tsx
+++ b/packages/survey-creator-react/src/custom-questions/TextWithResetQuestion.tsx
@@ -6,7 +6,7 @@ export class SurveyQuestionTextWithReset extends SurveyQuestionElementBase {
   protected get question(): QuestionTextWithResetModel | QuestionCommentWithResetModel {
     return this.questionBase as unknown as (QuestionTextWithResetModel | QuestionCommentWithResetModel);
   }
-  protected renderElement(): JSX.Element {
+  protected renderElement(): React.JSX.Element {
     const textElement = this.renderInput();
     const resetButton = this.renderResetButton();
     return (
@@ -30,7 +30,7 @@ export class SurveyQuestionTextWithReset extends SurveyQuestionElementBase {
       className={this.question.cssClasses.resetButton}
       disabled={this.question.resetValueAdorner.isDisabled}
       title={this.question.resetValueAdorner.caption}
-      onClick={ () => this.question.resetValueAdorner.resetValue()}>
+      onClick={() => this.question.resetValueAdorner.resetValue()}>
       <SvgIcon iconName={this.question.cssClasses.resetButtonIcon} size={"auto"}></SvgIcon>
     </button>);
   }
diff --git a/packages/survey-creator-react/src/side-bar/ObjectSelector.tsx b/packages/survey-creator-react/src/side-bar/ObjectSelector.tsx
index 66b4a58df2..f85e7da347 100644
--- a/packages/survey-creator-react/src/side-bar/ObjectSelector.tsx
+++ b/packages/survey-creator-react/src/side-bar/ObjectSelector.tsx
@@ -13,7 +13,7 @@ class ObjectSelectorComponent extends SurveyElementBase<IObjectSelectorComponent
   protected getStateElement(): Base {
     return this.model;
   }
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     if (!this.model.isVisible) return null;
 
     return (<List model={this.model.list}></List>);
diff --git a/packages/survey-creator-react/src/side-bar/PropertyGridPlaceholder.tsx b/packages/survey-creator-react/src/side-bar/PropertyGridPlaceholder.tsx
index bedc8b4296..10f2db9e0b 100644
--- a/packages/survey-creator-react/src/side-bar/PropertyGridPlaceholder.tsx
+++ b/packages/survey-creator-react/src/side-bar/PropertyGridPlaceholder.tsx
@@ -4,7 +4,7 @@ import { ReactElementFactory } from "survey-react-ui";
 
 export class PropertyGridPlaceholderComponent extends React.Component<any, any> {
 
-  render(): JSX.Element | null {
+  render(): React.JSX.Element | null {
     return (
       <div className="svc-property-grid-placeholder">
         <div className="svc-property-grid-placeholder__header">
diff --git a/packages/survey-creator-react/src/side-bar/SideBar.tsx b/packages/survey-creator-react/src/side-bar/SideBar.tsx
index c83e3063bc..b6a394fc87 100644
--- a/packages/survey-creator-react/src/side-bar/SideBar.tsx
+++ b/packages/survey-creator-react/src/side-bar/SideBar.tsx
@@ -36,7 +36,7 @@ export class SidebarComponent extends SurveyElementBase<ISidebarComponentProps,
     return super.canRender();
   }
 
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const style = { display: this.model.renderRoot ? "" : "none" };
     const containerStyle = { display: this.model.renderContainer ? "" : "none" };
     const items = this.model.pages.map((page) => <SidebarPage page={page} key={page.id} />);
@@ -72,7 +72,7 @@ class SidebarPage extends SurveyElementBase<any, any> {
     return this.page;
   }
 
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     if (!this.page.visible) return null;
 
     const component = ReactElementFactory.Instance.createElement(this.page.componentName, { model: this.page.componentData });
diff --git a/packages/survey-creator-react/src/side-bar/SideBarDefaultHeader.tsx b/packages/survey-creator-react/src/side-bar/SideBarDefaultHeader.tsx
index 71c3545152..3a4b296f5f 100644
--- a/packages/survey-creator-react/src/side-bar/SideBarDefaultHeader.tsx
+++ b/packages/survey-creator-react/src/side-bar/SideBarDefaultHeader.tsx
@@ -16,7 +16,7 @@ export class SideBarDefaultHeader extends SurveyElementBase<ISideBarHeaderProps,
     return this.model;
   }
 
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const title = !!this.model.title ? (
       <div className="svc-side-bar__container-title">{this.model.title}</div>
     ) : null;
diff --git a/packages/survey-creator-react/src/side-bar/SideBarHeader.tsx b/packages/survey-creator-react/src/side-bar/SideBarHeader.tsx
index feb5c5ee7a..b3ecc56c4c 100644
--- a/packages/survey-creator-react/src/side-bar/SideBarHeader.tsx
+++ b/packages/survey-creator-react/src/side-bar/SideBarHeader.tsx
@@ -16,7 +16,7 @@ class SideBarHeader extends SurveyElementBase<ISideBarHeaderProps, any> {
     return this.model;
   }
 
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     return (
       <div className="svc-side-bar__container-header svc-sidebar__header-container">
         {(this.model.subTitle) ?
diff --git a/packages/survey-creator-react/src/side-bar/SideBarPropertyGridHeader.tsx b/packages/survey-creator-react/src/side-bar/SideBarPropertyGridHeader.tsx
index 04bc418b08..eddb53048d 100644
--- a/packages/survey-creator-react/src/side-bar/SideBarPropertyGridHeader.tsx
+++ b/packages/survey-creator-react/src/side-bar/SideBarPropertyGridHeader.tsx
@@ -16,7 +16,7 @@ class SideBarPropertyGridHeader extends SurveyElementBase<ISideBarPropertyGridHe
     return this.objectSelectionAction;
   }
 
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const button = attachKey2click(
       <div className={this.objectSelectionAction.buttonClassName} onClick={() => this.objectSelectionAction.action()}>
         <div className="svc-sidebar__header-caption">
diff --git a/packages/survey-creator-react/src/side-bar/TabButton.tsx b/packages/survey-creator-react/src/side-bar/TabButton.tsx
index d7f8bbbe27..42d1f90029 100644
--- a/packages/survey-creator-react/src/side-bar/TabButton.tsx
+++ b/packages/survey-creator-react/src/side-bar/TabButton.tsx
@@ -13,7 +13,7 @@ export class TabButtonComponent extends SurveyElementBase<{ model: MenuButton },
     return this.props.model;
   }
 
-  protected renderElement(): JSX.Element | null {
+  protected renderElement(): React.JSX.Element | null {
     const button = attachKey2click(
       <div
         className={this.props.model.buttonClassName}
diff --git a/packages/survey-creator-react/src/side-bar/TabControl.tsx b/packages/survey-creator-react/src/side-bar/TabControl.tsx
index 927e8dfe81..7a755715e3 100644
--- a/packages/survey-creator-react/src/side-bar/TabControl.tsx
+++ b/packages/survey-creator-react/src/side-bar/TabControl.tsx
@@ -59,7 +59,7 @@ class TabsComponent extends SurveyElementBase<{ model: ActionContainer }, any> {
     return this.props.model;
   }
 
-  protected renderElement(): JSX.Element | null {
+  protected renderElement(): React.JSX.Element | null {
     return <>{this.props.model.actions.map(
       (item: Action, itemIndex: number) => <TabButtonComponent model={item as MenuButton} key={"item" + itemIndex}></TabButtonComponent>
     )}</>;
diff --git a/packages/survey-creator-react/src/tabs/Designer.tsx b/packages/survey-creator-react/src/tabs/Designer.tsx
index 58bf9bfb26..700df853f3 100644
--- a/packages/survey-creator-react/src/tabs/Designer.tsx
+++ b/packages/survey-creator-react/src/tabs/Designer.tsx
@@ -55,7 +55,7 @@ export class TabDesignerComponent extends SurveyElementBase<ITabDesignerComponen
     return [this.model, this.model.survey, this.model.pagesController];
   }
 
-  protected getRenderedPages(): JSX.Element[] {
+  protected getRenderedPages(): React.JSX.Element[] {
     const renderedPages = [];
 
     if (this.creator.pageEditMode !== "bypage") {
@@ -95,10 +95,10 @@ export class TabDesignerComponent extends SurveyElementBase<ITabDesignerComponen
         </div>
       </React.Fragment>);
   }
-  protected renderPage(pageV: PageModel, isGhost: boolean): JSX.Element {
+  protected renderPage(pageV: PageModel, isGhost: boolean): React.JSX.Element {
     return ReactElementFactory.Instance.createElement("svc-page", { survey: this.creator.survey, page: pageV, creator: this.creator, isGhost });
   }
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const designerTabClassName = "svc-tab-designer " + this.model.getRootCss();
 
     return (
@@ -115,7 +115,7 @@ export class TabDesignerComponent extends SurveyElementBase<ITabDesignerComponen
     );
   }
 
-  renderHeader(condition: boolean): JSX.Element {
+  renderHeader(condition: boolean): React.JSX.Element {
     if (!condition) return null;
 
     const survey: SurveyModel = this.creator.survey;
@@ -125,7 +125,7 @@ export class TabDesignerComponent extends SurveyElementBase<ITabDesignerComponen
       </div>
     </React.Fragment>);
   }
-  renderPlaceHolder(): JSX.Element {
+  renderPlaceHolder(): React.JSX.Element {
     const surveyHeader = this.renderHeader(this.creator.allowEditSurveyTitle && this.creator.showHeaderInEmptySurvey);
 
     return (<React.Fragment>
@@ -136,10 +136,10 @@ export class TabDesignerComponent extends SurveyElementBase<ITabDesignerComponen
       </div>
     </React.Fragment>);
   }
-  renderPlaceHolderContent(): JSX.Element {
+  renderPlaceHolderContent(): React.JSX.Element {
     return <SurfacePlaceholder name={"designer"} placeholderTitleText={this.model.placeholderTitleText} placeholderDescriptionText={this.model.placeholderDescriptionText} />;
   }
-  renderTabContent(): JSX.Element {
+  renderTabContent(): React.JSX.Element {
     const survey: SurveyModel = this.creator.survey;
     const surveyHeader = this.renderHeader(this.creator.allowEditSurveyTitle);
     const style: any = { ...this.model.surveyThemeVariables };
diff --git a/packages/survey-creator-react/src/tabs/JsonEditorAce.tsx b/packages/survey-creator-react/src/tabs/JsonEditorAce.tsx
index 91c51c5d72..68f162cb24 100644
--- a/packages/survey-creator-react/src/tabs/JsonEditorAce.tsx
+++ b/packages/survey-creator-react/src/tabs/JsonEditorAce.tsx
@@ -26,7 +26,7 @@ export class TabJsonEditorAceComponent extends SurveyElementBase<
   componentDidMount() {
     this.model.init(ace.edit(this.aceEditorrRef.current as HTMLElement));
   }
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const errors = <TabJsonEditorErrorsComponent data={this.model} />;
     return (
       <div className="svc-creator-tab__content">
diff --git a/packages/survey-creator-react/src/tabs/JsonEditorTextarea.tsx b/packages/survey-creator-react/src/tabs/JsonEditorTextarea.tsx
index a00a736d9d..9b498f0b07 100644
--- a/packages/survey-creator-react/src/tabs/JsonEditorTextarea.tsx
+++ b/packages/survey-creator-react/src/tabs/JsonEditorTextarea.tsx
@@ -19,7 +19,7 @@ export class TabJsonEditorErrorsComponent extends SurveyElementBase<ITabJsonEdit
   private get model(): JsonEditorBaseModel {
     return this.props.data;
   }
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     return <div className="svc-json-editor-tab__errros_list" style={{ display: this.model.hasErrors ? "block" : "none" }}>
       <List model={this.model.errorList} />
     </div>;
@@ -39,7 +39,7 @@ export class TabJsonEditorTextareaComponent extends SurveyElementBase<
   private get model(): TextareaJsonEditorModel {
     return this.props.data;
   }
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const setControl = (el: HTMLTextAreaElement) => {
       this.model.textElement = el;
     };
diff --git a/packages/survey-creator-react/src/tabs/Logic.tsx b/packages/survey-creator-react/src/tabs/Logic.tsx
index 32d4474993..f2be23468b 100644
--- a/packages/survey-creator-react/src/tabs/Logic.tsx
+++ b/packages/survey-creator-react/src/tabs/Logic.tsx
@@ -13,7 +13,7 @@ export class TabLogicAddButtonComponent extends SurveyElementBase<any, any> {
     return this.model;
   }
 
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const buttonClassName = "svc-logic-tab__content-action svc-btn" + ((this.model.enabled !== undefined && !this.model.enabled) ? " svc-logic-tab__content-action--disabled" : "");
     return attachKey2click(<div
       role="button"
@@ -42,13 +42,13 @@ export class TabLogicComponent extends SurveyElementBase<any, any> {
     return this.model;
   }
 
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     var logic = this.model;
     var rootClass = "svc-creator-tab__content svc-logic-tab";
     var content = this.renderViewContent();
     return <div className={rootClass}>{content}</div>;
   }
-  private renderViewContent(): JSX.Element {
+  private renderViewContent(): React.JSX.Element {
     const logicTabClassName = "svc-plugin-tab__content svc-logic-tab svc-logic-tab__content " + (this.model.hasItems ? "" : "svc-logic-tab--empty");
     const addLogic = !this.model.readOnly ? <TabLogicAddButtonComponent button={this.model.addNewButton} /> : undefined;
     return (
diff --git a/packages/survey-creator-react/src/tabs/Preview.tsx b/packages/survey-creator-react/src/tabs/Preview.tsx
index e17f156fc5..2205b793b1 100644
--- a/packages/survey-creator-react/src/tabs/Preview.tsx
+++ b/packages/survey-creator-react/src/tabs/Preview.tsx
@@ -19,7 +19,7 @@ export class TabPreviewTestSurveyAgainComponent extends SurveyElementBase<any, a
     return this.model;
   }
 
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const buttonClassName = "svc-preview__test-again svc-btn";
     return attachKey2click(<div
       role="button"
@@ -50,19 +50,19 @@ export class TabPreviewSurveyComponent extends SurveyElementBase<any, any> {
   protected getStateElement(): Base {
     return this.model;
   }
-  renderPlaceholder(): JSX.Element {
+  renderPlaceholder(): React.JSX.Element {
     return (<div className="svc-test-tab--empty">
       <SurfacePlaceholder name={"preview"} placeholderTitleText={this.model.placeholderTitleText} placeholderDescriptionText={this.model.placeholderDescriptionText} />
     </div>);
   }
-  renderSimulator(): JSX.Element {
+  renderSimulator(): React.JSX.Element {
     return (<div className="svc-plugin-tab__content">
       <SurveySimulator model={this.model.simulator}></SurveySimulator>
       {this.model.showResults ? <SurveyResults survey={this.model.simulator.survey} /> : null}
     </div>);
   }
 
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const tabContentClassName = "svc-creator-tab__content svc-test-tab__content" + (this.model.isPageToolbarVisible ? " svc-creator-tab__content--with-toolbar" : "");
     return (
       <div className={tabContentClassName}>
@@ -71,7 +71,7 @@ export class TabPreviewSurveyComponent extends SurveyElementBase<any, any> {
       </div>
     );
   }
-  getBottomToolbar(): JSX.Element {
+  getBottomToolbar(): React.JSX.Element {
     if (this.model.isPageToolbarVisible) {
       return (
         <div className="svc-test-tab__content-actions">
diff --git a/packages/survey-creator-react/src/tabs/SurveySimulator.tsx b/packages/survey-creator-react/src/tabs/SurveySimulator.tsx
index f5f20b010f..68c95c9a5f 100644
--- a/packages/survey-creator-react/src/tabs/SurveySimulator.tsx
+++ b/packages/survey-creator-react/src/tabs/SurveySimulator.tsx
@@ -12,7 +12,7 @@ export class SurveySimulator extends SurveyElementBase<any, any> {
     return this.model;
   }
 
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const mainSimulatorClass = this.model.getRootCss();
     if (!this.model.survey) {
       return <div className={mainSimulatorClass}></div>;
diff --git a/packages/survey-creator-react/src/tabs/Theme.tsx b/packages/survey-creator-react/src/tabs/Theme.tsx
index 12f2708522..403c7a17fa 100644
--- a/packages/survey-creator-react/src/tabs/Theme.tsx
+++ b/packages/survey-creator-react/src/tabs/Theme.tsx
@@ -18,18 +18,18 @@ export class TabThemeSurveyComponent extends SurveyElementBase<any, any> {
   protected getStateElement(): Base {
     return this.model;
   }
-  renderPlaceholder(): JSX.Element {
+  renderPlaceholder(): React.JSX.Element {
     return (<div className="svc-test-tab--empty">
       <SurfacePlaceholder name={"theme"} placeholderTitleText={this.model.placeholderTitleText} placeholderDescriptionText={this.model.placeholderDescriptionText} />
     </div>);
   }
-  renderSimulator(): JSX.Element {
+  renderSimulator(): React.JSX.Element {
     return (<div className="svc-plugin-tab__content">
       <SurveySimulator model={this.model.simulator}></SurveySimulator>
       {this.model.showResults ? <SurveyResults survey={this.model.simulator.survey} /> : null}
     </div>);
   }
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     const tabContentClassName = "svc-creator-tab__content svc-test-tab__content" + (this.model.isPageToolbarVisible ? " svc-creator-tab__content--with-toolbar" : "");
     return (
       <div className={tabContentClassName}>
@@ -38,7 +38,7 @@ export class TabThemeSurveyComponent extends SurveyElementBase<any, any> {
       </div>
     );
   }
-  getBottomToolbar(): JSX.Element {
+  getBottomToolbar(): React.JSX.Element {
     if (this.model.isPageToolbarVisible) {
       return (
         <div className="svc-test-tab__content-actions">
diff --git a/packages/survey-creator-react/src/tabs/logic-operator.tsx b/packages/survey-creator-react/src/tabs/logic-operator.tsx
index 8001508bb0..9f91fafc6d 100644
--- a/packages/survey-creator-react/src/tabs/logic-operator.tsx
+++ b/packages/survey-creator-react/src/tabs/logic-operator.tsx
@@ -8,7 +8,7 @@ export class SurveyLogicOpertor extends SurveyQuestionDropdown {
     super(props);
   }
 
-  protected renderInput(): JSX.Element {
+  protected renderInput(): React.JSX.Element {
     const q = this.question as QuestionDropdownModel;
     initLogicOperator(q);
     const text = (q.selectedItemLocText) ? this.renderLocString(q.selectedItemLocText) : "";
diff --git a/packages/survey-creator-react/src/tabs/translation/Translation.tsx b/packages/survey-creator-react/src/tabs/translation/Translation.tsx
index 024a925257..0d9fa05b27 100644
--- a/packages/survey-creator-react/src/tabs/translation/Translation.tsx
+++ b/packages/survey-creator-react/src/tabs/translation/Translation.tsx
@@ -15,7 +15,7 @@ export class TabTranslationComponent extends SurveyElementBase<any, any> {
   protected getStateElement(): Base {
     return this.model;
   }
-  renderElement(): JSX.Element {
+  renderElement(): React.JSX.Element {
     if (!this.model) return null;
     return (
       <div className={"svc-creator-tab__content svc-translation-tab" + (this.model.isEmpty ? " svc-translation-tab--empty" : "")}>
@@ -23,7 +23,7 @@ export class TabTranslationComponent extends SurveyElementBase<any, any> {
       </div>
     );
   }
-  renderElementContent(): JSX.Element {
+  renderElementContent(): React.JSX.Element {
     if (this.model.isEmpty) {
       return <SurfacePlaceholder name={"translation"} placeholderTitleText={this.model.placeholderTitleText} placeholderDescriptionText={this.model.placeholderDescriptionText} />;
     } else {
diff --git a/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx b/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx
index 3ec763dc32..f801fb6f0a 100644
--- a/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx
+++ b/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx
@@ -29,7 +29,7 @@ export class AdaptiveToolbox extends SurveyElementBase<ISurveyCreatorToolboxProp
       this.toolbox.itemSelector,
       null,
       undefined,
-      (callback) => setTimeout(callback)
+      (callback) => setTimeout(callback, 10)
     );
   }
   componentWillUnmount() {
@@ -47,7 +47,7 @@ export class AdaptiveToolbox extends SurveyElementBase<ISurveyCreatorToolboxProp
     return this.toolbox;
   }
 
-  renderItems(items: Array<any>, isCompact = false): Array<JSX.Element> {
+  renderItems(items: Array<any>, isCompact = false): Array<React.JSX.Element> {
     const result = [];
     items.forEach((item, itemIndex) => {
       const tool = <SurveyCreatorToolboxTool item={(item as any)} creator={this.creator} parentModel={this.toolbox} isCompact={isCompact} key={"item" + itemIndex} ></SurveyCreatorToolboxTool>;
@@ -74,7 +74,7 @@ export class AdaptiveToolbox extends SurveyElementBase<ISurveyCreatorToolboxProp
     </div>);
   }
 
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     if (!this.toolbox.hasActions) return null;
     const search = this.toolbox.showSearch ? this.renderSearch() : null;
     const placeholder = this.toolbox.showPlaceholder ? <div className="svc-toolbox__placeholder">{this.toolbox.toolboxNoResultsFound}</div> : null;
diff --git a/packages/survey-creator-react/src/toolbox/ToolboxCategory.tsx b/packages/survey-creator-react/src/toolbox/ToolboxCategory.tsx
index 02e804d44f..c57d7b03b4 100644
--- a/packages/survey-creator-react/src/toolbox/ToolboxCategory.tsx
+++ b/packages/survey-creator-react/src/toolbox/ToolboxCategory.tsx
@@ -27,7 +27,7 @@ export class SurveyCreatorToolboxCategory extends SurveyElementBase<ISurveyCreat
     return (this.category as any);
   }
 
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     const header = this.renderCategoryHeader();
     const items = this.renderCategoryContent();
     return (
@@ -40,7 +40,7 @@ export class SurveyCreatorToolboxCategory extends SurveyElementBase<ISurveyCreat
     );
   }
 
-  renderCategoryHeader(): JSX.Element {
+  renderCategoryHeader(): React.JSX.Element {
     let className = "svc-toolbox__category-header";
     if (this.toolbox.canCollapseCategories) {
       className += " svc-toolbox__category-header--collapsed";
@@ -53,7 +53,7 @@ export class SurveyCreatorToolboxCategory extends SurveyElementBase<ISurveyCreat
     );
   }
 
-  renderButton(): JSX.Element {
+  renderButton(): React.JSX.Element {
     if (!this.toolbox.canCollapseCategories) return null;
 
     const iconName = this.category.collapsed ? "arrow-down" : "arrow-up";
diff --git a/packages/survey-creator-react/src/toolbox/ToolboxItem.tsx b/packages/survey-creator-react/src/toolbox/ToolboxItem.tsx
index 259e5749c2..317304fbfe 100644
--- a/packages/survey-creator-react/src/toolbox/ToolboxItem.tsx
+++ b/packages/survey-creator-react/src/toolbox/ToolboxItem.tsx
@@ -63,7 +63,7 @@ export class SurveyCreatorToolboxTool extends CreatorModelElement<
     return (this.item as any);
   }
 
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     const item = this.item;
     const itemComponent = ReactElementFactory.Instance.createElement(
       this.model.itemComponent,
@@ -96,7 +96,7 @@ export class SurveyCreatorToolboxTool extends CreatorModelElement<
 export class SurveyCreatorToolboxItem extends CreatorModelElement<
   ISurveyCreatorToolboxItemProps,
   any
-  > {
+> {
   constructor(props) {
     super(props);
   }
@@ -115,7 +115,7 @@ export class SurveyCreatorToolboxItem extends CreatorModelElement<
   protected getStateElement(): Base {
     return this.model;
   }
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     const banner = (this.props.isCompact ?
       <span className="svc-toolbox__item-banner"
         onClick={(event: any) => {
diff --git a/packages/survey-creator-react/src/toolbox/ToolboxItemGroup.tsx b/packages/survey-creator-react/src/toolbox/ToolboxItemGroup.tsx
index 0cafcbe99b..3dcff98941 100644
--- a/packages/survey-creator-react/src/toolbox/ToolboxItemGroup.tsx
+++ b/packages/survey-creator-react/src/toolbox/ToolboxItemGroup.tsx
@@ -30,7 +30,7 @@ export class SurveyCreatorToolboxItemGroup extends CreatorModelElement<ISurveyCr
   protected getStateElement(): Base {
     return this.item;
   }
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     return <>
       <SurveyCreatorToolboxItem item={this.item} creator={this.creator} model={this.model} parentModel={this.parentModel} isCompact={this.isCompact} ></SurveyCreatorToolboxItem >
       <div className="svc-toolbox__item-submenu-button"
diff --git a/packages/survey-creator-react/testCafe-V2/by-page.html b/packages/survey-creator-react/testCafe-V2/by-page.html
index 2b5da3e5cd..a2380b62f6 100644
--- a/packages/survey-creator-react/testCafe-V2/by-page.html
+++ b/packages/survey-creator-react/testCafe-V2/by-page.html
@@ -4,36 +4,44 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
-  <script src="./sc.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true, pageEditMode: "bypage" });
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true, pageEditMode: "bypage" });
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }));
+  })
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe-V2/dropdown-collapse-view.html b/packages/survey-creator-react/testCafe-V2/dropdown-collapse-view.html
index 520423fa00..4e21f571b7 100644
--- a/packages/survey-creator-react/testCafe-V2/dropdown-collapse-view.html
+++ b/packages/survey-creator-react/testCafe-V2/dropdown-collapse-view.html
@@ -4,36 +4,44 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
-  <script src="./sc.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const creator = new SurveyCreator.SurveyCreator({ maxVisibleChoices: 5 });
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const creator = new SurveyCreator.SurveyCreator({ maxVisibleChoices: 5 });
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }))
+  });
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe-V2/preview-theme-switcher.html b/packages/survey-creator-react/testCafe-V2/preview-theme-switcher.html
index bbd3b1b56c..6622f57823 100644
--- a/packages/survey-creator-react/testCafe-V2/preview-theme-switcher.html
+++ b/packages/survey-creator-react/testCafe-V2/preview-theme-switcher.html
@@ -4,40 +4,46 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
-  <!-- <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/modern.css" /> -->
-  <!-- <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/survey.css" /> -->
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
-  <script src="./sc.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const creator = new SurveyCreator.SurveyCreator();
-  creator.applyTheme(SurveyCreatorTheme.DefaultLight);
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const creator = new SurveyCreator.SurveyCreator();
+    creator.applyTheme(SurveyCreatorTheme.DefaultLight);
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }));
+  });
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe-V2/testcafe-no-license.html b/packages/survey-creator-react/testCafe-V2/testcafe-no-license.html
index a090463012..f1fc7fbf93 100644
--- a/packages/survey-creator-react/testCafe-V2/testcafe-no-license.html
+++ b/packages/survey-creator-react/testCafe-V2/testcafe-no-license.html
@@ -4,35 +4,44 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }))
+  })
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe-V2/testcafe-theme-tab.html b/packages/survey-creator-react/testCafe-V2/testcafe-theme-tab.html
index 8f156c66df..29052b0f03 100644
--- a/packages/survey-creator-react/testCafe-V2/testcafe-theme-tab.html
+++ b/packages/survey-creator-react/testCafe-V2/testcafe-theme-tab.html
@@ -4,38 +4,46 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
-  <script src="./sc.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const creator = new SurveyCreator.SurveyCreator({ showThemeTab: true });
-  creator.applyTheme(SurveyCreatorTheme.DefaultLight);
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const creator = new SurveyCreator.SurveyCreator({ showThemeTab: true });
+    creator.applyTheme(SurveyCreatorTheme.DefaultLight);
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }))
+  });
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe-V2/testcafe-widget.html b/packages/survey-creator-react/testCafe-V2/testcafe-widget.html
index 5942faffe5..db18e9e061 100644
--- a/packages/survey-creator-react/testCafe-V2/testcafe-widget.html
+++ b/packages/survey-creator-react/testCafe-V2/testcafe-widget.html
@@ -8,15 +8,24 @@
   <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
+
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
 
-  <script src="../build/survey-creator-react.js"></script>
   <script src="https://unpkg.com/jquery"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript"
     charset="utf-8"></script>
@@ -38,7 +47,7 @@
   <script src="https://unpkg.com/inputmask@5.0.3/dist/inputmask.js"></script>
   <script src="https://cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
   <script src="https://unpkg.com/jquery-bar-rating"></script>
-  <script src="./sc.js"></script>
+  <script src="./sc.js" defer></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
   <!-- Themes -->
   <link rel="stylesheet" href="https://unpkg.com/jquery-bar-rating@1.2.2/dist/themes/bars-1to10.css" />
@@ -51,7 +60,7 @@
   <link rel="stylesheet" href="https://unpkg.com/jquery-bar-rating@1.2.2/dist/themes/fontawesome-stars-o.css" />
   <script
     src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
-  <script src="https://unpkg.com/surveyjs-widgets@1.8.70/surveyjs-widgets.min.js"></script>
+  <script src="https://unpkg.com/surveyjs-widgets@1.8.70/surveyjs-widgets.min.js" defer></script>
 
 </head>
 
@@ -59,16 +68,18 @@
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }));
+  });
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe-V2/testcafe.html b/packages/survey-creator-react/testCafe-V2/testcafe.html
index da83beb8e8..cc069391b2 100644
--- a/packages/survey-creator-react/testCafe-V2/testcafe.html
+++ b/packages/survey-creator-react/testCafe-V2/testcafe.html
@@ -4,53 +4,61 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
-  <script src="./sc.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
-  creator.applyTheme(SurveyCreatorTheme.DefaultLight);
-  window.creator = creator;
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
+    creator.applyTheme(SurveyCreatorTheme.DefaultLight);
+    window.creator = creator;
 
-  class SurveyCreatorRenderComponent extends React.Component {
-    constructor(props) {
-      super(props);
-      this.state = { creator: creator };
-      window.updateCreatorModel = (options, json) => {
-        window.prevCreator = window.creator;
-        const creator = new SurveyCreator.SurveyCreator(options);
-        creator.JSON = json;
-        this.setState({ creator });
-        window.creator = creator;
+    class SurveyCreatorRenderComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = { creator: creator };
+        window.updateCreatorModel = (options, json) => {
+          window.prevCreator = window.creator;
+          const creator = new SurveyCreator.SurveyCreator(options);
+          creator.JSON = json;
+          this.setState({ creator });
+          window.creator = creator;
+        }
+      }
+      render() {
+        return React.createElement(SurveyCreator.SurveyCreatorComponent, { creator: this.state.creator });
       }
     }
-    render() {
-      return React.createElement(SurveyCreator.SurveyCreatorComponent, { creator: this.state.creator });
-    }
-  }
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreatorRenderComponent
-    )
-  }))
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreatorRenderComponent
+      )
+    }))
+  });
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe-V2/testcafe_localized_ui.html b/packages/survey-creator-react/testCafe-V2/testcafe_localized_ui.html
index a5a9eb0f75..22c0a53e7e 100644
--- a/packages/survey-creator-react/testCafe-V2/testcafe_localized_ui.html
+++ b/packages/survey-creator-react/testCafe-V2/testcafe_localized_ui.html
@@ -4,39 +4,47 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
-  <script src="./sc.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const loc = SurveyCreatorCore.localization.getLocale("de");
-  loc.ed.logic = "Miner Logik";
-  SurveyCreatorCore.localization.currentLocale = "de";
-  const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const loc = SurveyCreatorCore.localization.getLocale("de");
+    loc.ed.logic = "Miner Logik";
+    SurveyCreatorCore.localization.currentLocale = "de";
+    const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }))
+  });
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe-V2/theme-for-preview-option.html b/packages/survey-creator-react/testCafe-V2/theme-for-preview-option.html
index a1fd5a27dc..6ac2121557 100644
--- a/packages/survey-creator-react/testCafe-V2/theme-for-preview-option.html
+++ b/packages/survey-creator-react/testCafe-V2/theme-for-preview-option.html
@@ -4,38 +4,44 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
-  <!-- <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/modern.css" /> -->
-  <!-- <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/survey.css" /> -->
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
-  <script src="./sc.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const creator = new SurveyCreator.SurveyCreator({ themeForPreview: "modern" });
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const creator = new SurveyCreator.SurveyCreator({ themeForPreview: "modern" });
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }))
+  });
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe/by-page.html b/packages/survey-creator-react/testCafe/by-page.html
index 2b5da3e5cd..a2380b62f6 100644
--- a/packages/survey-creator-react/testCafe/by-page.html
+++ b/packages/survey-creator-react/testCafe/by-page.html
@@ -4,36 +4,44 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
-  <script src="./sc.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true, pageEditMode: "bypage" });
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true, pageEditMode: "bypage" });
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }));
+  })
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe/dropdown-collapse-view.html b/packages/survey-creator-react/testCafe/dropdown-collapse-view.html
index 520423fa00..4e21f571b7 100644
--- a/packages/survey-creator-react/testCafe/dropdown-collapse-view.html
+++ b/packages/survey-creator-react/testCafe/dropdown-collapse-view.html
@@ -4,36 +4,44 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
-  <script src="./sc.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const creator = new SurveyCreator.SurveyCreator({ maxVisibleChoices: 5 });
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const creator = new SurveyCreator.SurveyCreator({ maxVisibleChoices: 5 });
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }))
+  });
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe/preview-theme-switcher.html b/packages/survey-creator-react/testCafe/preview-theme-switcher.html
index 44247183cd..de97de05cd 100644
--- a/packages/survey-creator-react/testCafe/preview-theme-switcher.html
+++ b/packages/survey-creator-react/testCafe/preview-theme-switcher.html
@@ -4,38 +4,44 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
-  <!-- <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/modern.css" /> -->
-  <!-- <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/survey.css" /> -->
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
-  <script src="./sc.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const creator = new SurveyCreator.SurveyCreator();
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const creator = new SurveyCreator.SurveyCreator();
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }));
+  });
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe/testcafe-no-license.html b/packages/survey-creator-react/testCafe/testcafe-no-license.html
index a090463012..f1fc7fbf93 100644
--- a/packages/survey-creator-react/testCafe/testcafe-no-license.html
+++ b/packages/survey-creator-react/testCafe/testcafe-no-license.html
@@ -4,35 +4,44 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }))
+  })
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe/testcafe-theme-tab.html b/packages/survey-creator-react/testCafe/testcafe-theme-tab.html
index ebf8084157..289b3deefe 100644
--- a/packages/survey-creator-react/testCafe/testcafe-theme-tab.html
+++ b/packages/survey-creator-react/testCafe/testcafe-theme-tab.html
@@ -4,36 +4,44 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
-  <script src="./sc.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const creator = new SurveyCreator.SurveyCreator({ showThemeTab: true });
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const creator = new SurveyCreator.SurveyCreator({ showThemeTab: true });
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }))
+  });
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe/testcafe-widget.html b/packages/survey-creator-react/testCafe/testcafe-widget.html
index 5942faffe5..db18e9e061 100644
--- a/packages/survey-creator-react/testCafe/testcafe-widget.html
+++ b/packages/survey-creator-react/testCafe/testcafe-widget.html
@@ -8,15 +8,24 @@
   <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
+
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
 
-  <script src="../build/survey-creator-react.js"></script>
   <script src="https://unpkg.com/jquery"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript"
     charset="utf-8"></script>
@@ -38,7 +47,7 @@
   <script src="https://unpkg.com/inputmask@5.0.3/dist/inputmask.js"></script>
   <script src="https://cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
   <script src="https://unpkg.com/jquery-bar-rating"></script>
-  <script src="./sc.js"></script>
+  <script src="./sc.js" defer></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
   <!-- Themes -->
   <link rel="stylesheet" href="https://unpkg.com/jquery-bar-rating@1.2.2/dist/themes/bars-1to10.css" />
@@ -51,7 +60,7 @@
   <link rel="stylesheet" href="https://unpkg.com/jquery-bar-rating@1.2.2/dist/themes/fontawesome-stars-o.css" />
   <script
     src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
-  <script src="https://unpkg.com/surveyjs-widgets@1.8.70/surveyjs-widgets.min.js"></script>
+  <script src="https://unpkg.com/surveyjs-widgets@1.8.70/surveyjs-widgets.min.js" defer></script>
 
 </head>
 
@@ -59,16 +68,18 @@
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }));
+  });
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe/testcafe.html b/packages/survey-creator-react/testCafe/testcafe.html
index 62cb9db6da..d92d2f1677 100644
--- a/packages/survey-creator-react/testCafe/testcafe.html
+++ b/packages/survey-creator-react/testCafe/testcafe.html
@@ -4,51 +4,59 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
-  <script src="./sc.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
-  window.creator = creator;
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
+    window.creator = creator;
 
-  class SurveyCreatorRenderComponent extends React.Component {
-    constructor(props) {
-      super(props);
-      this.state = { creator: creator };
-      window.updateCreatorModel = (options, json) => {
-        window.prevCreator = window.creator;
-        const creator = new SurveyCreator.SurveyCreator(options);
-        creator.JSON = json;
-        this.setState({ creator });
-        window.creator = creator;
+    class SurveyCreatorRenderComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = { creator: creator };
+        window.updateCreatorModel = (options, json) => {
+          window.prevCreator = window.creator;
+          const creator = new SurveyCreator.SurveyCreator(options);
+          creator.JSON = json;
+          this.setState({ creator });
+          window.creator = creator;
+        }
+      }
+      render() {
+        return React.createElement(SurveyCreator.SurveyCreatorComponent, { creator: this.state.creator });
       }
     }
-    render() {
-      return React.createElement(SurveyCreator.SurveyCreatorComponent, { creator: this.state.creator });
-    }
-  }
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreatorRenderComponent
-    )
-  }))
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreatorRenderComponent
+      )
+    }))
+  });
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe/testcafe_localized_ui.html b/packages/survey-creator-react/testCafe/testcafe_localized_ui.html
index a5a9eb0f75..22c0a53e7e 100644
--- a/packages/survey-creator-react/testCafe/testcafe_localized_ui.html
+++ b/packages/survey-creator-react/testCafe/testcafe_localized_ui.html
@@ -4,39 +4,47 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
-  <script src="./sc.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const loc = SurveyCreatorCore.localization.getLocale("de");
-  loc.ed.logic = "Miner Logik";
-  SurveyCreatorCore.localization.currentLocale = "de";
-  const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const loc = SurveyCreatorCore.localization.getLocale("de");
+    loc.ed.logic = "Miner Logik";
+    SurveyCreatorCore.localization.currentLocale = "de";
+    const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true, showTranslationTab: true });
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }))
+  });
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/testCafe/theme-for-preview-option.html b/packages/survey-creator-react/testCafe/theme-for-preview-option.html
index a1fd5a27dc..6ac2121557 100644
--- a/packages/survey-creator-react/testCafe/theme-for-preview-option.html
+++ b/packages/survey-creator-react/testCafe/theme-for-preview-option.html
@@ -4,38 +4,44 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+  <script defer type="module">
+    import React from "https://esm.sh/react@19/?dev";
+    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev";
+    import ReactDOM from "https://esm.sh/react-dom@19.0.0?dev";
+    window.ReactDOMClient = ReactDOMClient;
+    window.React = React;
+    window.ReactDOM = ReactDOM;
+  </script>
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/defaultV2.css" />
-  <!-- <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/modern.css" /> -->
-  <!-- <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/survey.css" /> -->
   <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
   <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-react.min.css" /> -->
-  <script src="../node_modules/survey-core/survey.core.js"></script>
-  <script src="../node_modules/survey-core/survey.i18n.js"></script>
-  <script src="../node_modules/survey-core/themes/index.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
-  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
-  <script src="../node_modules/survey-react-ui/survey-react-ui.js"></script>
-  <script src="../build/survey-creator-react.js"></script>
-  <script src="./sc.js"></script>
+  <script src="../node_modules/survey-core/survey.core.js" defer></script>
+  <script src="../node_modules/survey-core/survey.i18n.js" defer></script>
+  <script src="../node_modules/survey-core/themes/index.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.js" defer></script>
+  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
+  <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
+  <script src="../build/survey-creator-react.js" defer></script>
+  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
   <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
 </body>
 <script>
-  window.surveyJSFramework = "react";
-  const creator = new SurveyCreator.SurveyCreator({ themeForPreview: "modern" });
-  window.creator = creator;
-  const root = ReactDOM.createRoot(document.getElementById("survey-creator"));
-  root.render(React.createElement(React.StrictMode, {
-    children: React.createElement(
-      SurveyCreator.SurveyCreatorComponent,
-      { creator: creator },
-      null
-    )
-  }))
+  window.addEventListener("DOMContentLoaded", () => {
+    window.surveyJSFramework = "react";
+    const creator = new SurveyCreator.SurveyCreator({ themeForPreview: "modern" });
+    window.creator = creator;
+    const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
+    root.render(React.createElement(React.StrictMode, {
+      children: React.createElement(
+        SurveyCreator.SurveyCreatorComponent,
+        { creator: creator },
+        null
+      )
+    }))
+  });
 </script>
 
 </html>
\ No newline at end of file
diff --git a/packages/survey-creator-react/webpack.config.js b/packages/survey-creator-react/webpack.config.js
index 43f8c9ede2..4855ca24eb 100644
--- a/packages/survey-creator-react/webpack.config.js
+++ b/packages/survey-creator-react/webpack.config.js
@@ -47,7 +47,7 @@ const buildPlatformJson = {
   typings: "./typings/entries/index.d.ts",
   peerDependencies: {
     "ace-builds": "^1.4.12",
-    "react": "^16.5.0 || ^17.0.1 || ^18.1.0",
+    "react": "^17.0.1 || ^18.1.0 || ^19.0.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0",
     "survey-core": packageJson.version,
     "survey-react-ui": packageJson.version,

From 6db642b13490ff5d8d805bff3643f186a4686222 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Sun, 15 Dec 2024 02:55:53 +0400
Subject: [PATCH 2/6] Fix string editor

---
 packages/survey-creator-react/src/StringEditor.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/survey-creator-react/src/StringEditor.tsx b/packages/survey-creator-react/src/StringEditor.tsx
index 31d7c92d7c..47faf52d30 100644
--- a/packages/survey-creator-react/src/StringEditor.tsx
+++ b/packages/survey-creator-react/src/StringEditor.tsx
@@ -122,14 +122,18 @@ export class SurveyLocStringEditor extends CreatorModelElement<any, any> {
   private get className() {
     return this.baseModel.className(this.locString.renderedHtml);
   }
+  private htmlValue = {
+    __html: this.locString?.renderedHtml
+  };
   public render(): React.JSX.Element {
     if (!this.locString) {
       return null;
     }
     let control = null;
     if (this.locString.hasHtml) {
-      const showText = this.baseModel.focused && this.baseModel.editAsText;
-      const htmlValue = { __html: showText ? null : this.locString.renderedHtml };
+      if(this.htmlValue.__html !== this.locString.renderedHtml) {
+        this.htmlValue = { __html: this.locString.renderedHtml };
+      }
       control = (
         <span
           role="textbox"
@@ -141,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}
-        >{showText ? this.locString.calculatedText : null}</span>
+        ></span>
       );
     } else {
       control = (
@@ -208,4 +212,4 @@ ReactElementFactory.Instance.registerElement(
   (props) => {
     return React.createElement(SurveyLocStringEditor, props);
   }
-);
\ No newline at end of file
+);

From 6ee9a18a2a3c09ecb8e9d91e9f3101bb60a4b85d Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Sun, 15 Dec 2024 19:22:07 +0400
Subject: [PATCH 3/6] Fix vr tests

---
 .../survey-creator-react/testCafe-V2/testcafe-no-license.html    | 1 -
 packages/survey-creator-react/testCafe/testcafe-no-license.html  | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/survey-creator-react/testCafe-V2/testcafe-no-license.html b/packages/survey-creator-react/testCafe-V2/testcafe-no-license.html
index f1fc7fbf93..d14b1cba19 100644
--- a/packages/survey-creator-react/testCafe-V2/testcafe-no-license.html
+++ b/packages/survey-creator-react/testCafe-V2/testcafe-no-license.html
@@ -22,7 +22,6 @@
   <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
   <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
   <script src="../build/survey-creator-react.js" defer></script>
-  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">
diff --git a/packages/survey-creator-react/testCafe/testcafe-no-license.html b/packages/survey-creator-react/testCafe/testcafe-no-license.html
index f1fc7fbf93..d14b1cba19 100644
--- a/packages/survey-creator-react/testCafe/testcafe-no-license.html
+++ b/packages/survey-creator-react/testCafe/testcafe-no-license.html
@@ -22,7 +22,6 @@
   <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js" defer></script>
   <script src="../node_modules/survey-react-ui/survey-react-ui.js" defer></script>
   <script src="../build/survey-creator-react.js" defer></script>
-  <script src="./sc.js" defer></script>
 </head>
 
 <body spellcheck="false">

From 8d79b0a4d76ebc38431390a38d37a33eb61199a7 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Sun, 15 Dec 2024 19:39:10 +0400
Subject: [PATCH 4/6] Try to fix f tests

---
 .../survey-creator-react/src/toolbox/AdaptiveToolbox.tsx    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx b/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx
index f801fb6f0a..1165c4c342 100644
--- a/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx
+++ b/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx
@@ -29,7 +29,11 @@ export class AdaptiveToolbox extends SurveyElementBase<ISurveyCreatorToolboxProp
       this.toolbox.itemSelector,
       null,
       undefined,
-      (callback) => setTimeout(callback, 10)
+      (callback) => setTimeout(() => { 
+        if(!this.toolbox.isResponsivenessDisabled) {
+          callback();
+        }
+      }, 10)
     );
   }
   componentWillUnmount() {

From 0e1f5dc272adc2c012d037466da6f17fa2087be5 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Sun, 15 Dec 2024 19:44:57 +0400
Subject: [PATCH 5/6] Fix lint errors

---
 packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx b/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx
index 1165c4c342..8812d06e64 100644
--- a/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx
+++ b/packages/survey-creator-react/src/toolbox/AdaptiveToolbox.tsx
@@ -29,8 +29,8 @@ export class AdaptiveToolbox extends SurveyElementBase<ISurveyCreatorToolboxProp
       this.toolbox.itemSelector,
       null,
       undefined,
-      (callback) => setTimeout(() => { 
-        if(!this.toolbox.isResponsivenessDisabled) {
+      (callback) => setTimeout(() => {
+        if (!this.toolbox.isResponsivenessDisabled) {
           callback();
         }
       }, 10)

From f9d4bbe0d552236a2ca09d7ce7b19ffe0e4dd1cb Mon Sep 17 00:00:00 2001
From: Dmitry <dk981234@gmail.com>
Date: Sun, 15 Dec 2024 20:47:06 +0400
Subject: [PATCH 6/6] Update react version

---
 packages/survey-creator-react/webpack.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/survey-creator-react/webpack.config.js b/packages/survey-creator-react/webpack.config.js
index 4855ca24eb..267ba6cb2d 100644
--- a/packages/survey-creator-react/webpack.config.js
+++ b/packages/survey-creator-react/webpack.config.js
@@ -47,8 +47,8 @@ const buildPlatformJson = {
   typings: "./typings/entries/index.d.ts",
   peerDependencies: {
     "ace-builds": "^1.4.12",
-    "react": "^17.0.1 || ^18.1.0 || ^19.0.0",
-    "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0",
+    "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": packageJson.version,
     "survey-react-ui": packageJson.version,
     "survey-creator-core": packageJson.version