[WC-3065]: Update to React 19

package.json

@@ -1,85 +1,86 @@
 {
     "name": "web-widgets",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
+    "license": "Apache-2.0",
     "repository": {
         "type": "git",
         "url": "https://github.com/mendix/web-widgets.git"
     },
-    "license": "Apache-2.0",
     "scripts": {
-        "prepare": "husky install",
-        "lint": "turbo run lint --continue --concurrency 1",
-        "test": "turbo run test --continue --concurrency 1",
-        "verify": "turbo run verify --continue --concurrency 1",
         "build": "turbo run build",
-        "release": "turbo run release",
+        "changelog": "pnpm --filter @mendix/automation-utils run changelog",
         "create-gh-release": "turbo run create-gh-release --concurrency 1",
         "create-translation": "turbo run create-translation",
-        "publish-marketplace": "turbo run publish-marketplace",
-        "version": "pnpm --filter @mendix/automation-utils run version",
-        "changelog": "pnpm --filter @mendix/automation-utils run changelog",
+        "postinstall": "turbo run agent-rules",
+        "lint": "turbo run lint --continue --concurrency 1",
+        "prepare": "husky install",
         "prepare-release": "pnpm --filter @mendix/automation-utils run prepare-release",
-        "postinstall": "turbo run agent-rules"
+        "publish-marketplace": "turbo run publish-marketplace",
+        "release": "turbo run release",
+        "test": "turbo run test --continue --concurrency 1",
+        "verify": "turbo run verify --continue --concurrency 1",
+        "version": "pnpm --filter @mendix/automation-utils run version"
     },
     "devDependencies": {
         "husky": "^8.0.3",
         "turbo": "^2.5.4"
     },
+    "prettier": "@mendix/prettier-config-web-widgets",
+    "packageManager": "[email protected]+sha512.fce8a3dd29a4ed2ec566fb53efbb04d8c44a0f05bc6f24a73046910fb9c3ce7afa35a0980500668fa3573345bd644644fa98338fa168235c80f4aa17aa17fbef",
     "engines": {
         "node": ">=22",
         "pnpm": "10.17.0"
     },
-    "packageManager": "[email protected]+sha512.fce8a3dd29a4ed2ec566fb53efbb04d8c44a0f05bc6f24a73046910fb9c3ce7afa35a0980500668fa3573345bd644644fa98338fa168235c80f4aa17aa17fbef",
     "pnpm": {
         "peerDependencyRules": {
             "allowedVersions": {
-                "react": "^18.0.0",
-                "react-dom": "^18.0.0"
+                "react": ">=18.0.0 <19.0.0",
+                "react-dom": ">=18.0.0 <19.0.0"
             },
             "ignoreMissing": [
                 "react-native"
             ]
         },
+        "onlyBuiltDependencies": [
+            "@swc/core",
+            "canvas"
+        ],
         "overrides": {
+            "@codemirror/state": "^6.5.2",
+            "@codemirror/view": "^6.38.1",
             "@mendix/pluggable-widgets-tools": "10.21.2",
-            "react": "^18.0.0",
-            "react-dom": "^18.0.0",
-            "prettier": "3.5.3",
+            "@types/big.js": "^6.2.2",
             "@types/node": "~22.14.0",
             "@types/react": ">=18.2.36",
-            "@types/big.js": "^6.2.2",
             "d3-color@<3.1.0": ">=3.1.0",
-            "loader-utils@1": "^1.4.2",
-            "loader-utils@3": "^3.2.1",
             "decode-uri-component@<0.2.1": ">=0.2.1",
+            "enzyme>cheerio": "1.0.0-rc.10",
             "jest": "^29.7.0",
             "jest-environment-jsdom": "^29.7.0",
-            "[email protected]": ">=1.0.2",
             "[email protected]": ">=1.0.2",
-            "@codemirror/view": "^6.38.1",
-            "@codemirror/state": "^6.5.2",
-            "enzyme>cheerio": "1.0.0-rc.10",
-            "ts-node": "10.9.2",
+            "[email protected]": ">=1.0.2",
+            "loader-utils@1": "^1.4.2",
+            "loader-utils@3": "^3.2.1",
+            "prettier": "3.5.3",
+            "react": ">=18.0.0 <19.0.0",
             "react-big-calendar@1>clsx": "2.1.1",
+            "react-dom": ">=18.0.0 <19.0.0",
+            "rollup": "catalog:",
+            "ts-node": "10.9.2",
             "typescript": ">5.8.0"
         },
         "patchedDependencies": {
-            "[email protected]": "patches/[email protected]",
-            "[email protected]": "patches/[email protected]",
-            "[email protected]": "patches/[email protected]",
             "mime-types": "patches/mime-types.patch",
+            "[email protected]": "patches/[email protected]",
+            "[email protected]": "patches/[email protected]",
             "rc-trigger": "patches/rc-trigger.patch",
+            "[email protected]": "patches/[email protected]",
             "react-dropzone": "patches/react-dropzone.patch"
         },
-        "onlyBuiltDependencies": [
-            "@swc/core",
-            "canvas"
-        ],
         "ignoredBuiltDependencies": [
             "@parcel/watcher",
             "core-js",
             "es5-ext"
         ]
-    },
-    "prettier": "@mendix/prettier-config-web-widgets"
+    }
 }

packages/customWidgets/calendar-custom-web/src/components/Calendar.ts

@@ -1,4 +1,4 @@
-import { Component, createElement, CSSProperties, ReactChild, ReactNode } from "react";
+import { Component, createElement, CSSProperties, ReactNode } from "react";
 
 import { Alert } from "./Alert";
 import { Container, Style } from "../utils/namespaces";
@@ -20,18 +20,18 @@
 const DragAndDropCalendar = withDragAndDrop(BigCalendar);
 
 export interface CalendarProps {
-    alertMessage?: ReactChild;
+    alertMessage?: ReactNode;
     className?: string;
     events: CalendarEvent[];
     color?: string;
-    formats?: {};
+    formats?: object;
     enableCreate: boolean;
     height: number;
     heightUnit: Style.HeightUnitType;
     defaultView: Style.View;
     loading?: boolean;
     startPosition?: Date;
-    messages: {};
+    messages: object;
     editable: string;
     titleFormat?: (date: Date) => void;
     weekdayFormat?: (date: Date) => void;
@@ -141,7 +141,7 @@
 
     private renderCalendar(): ReactNode {
         const wrapToolbar =
-            (injectedProps: HOCToolbarProps): Function =>
+            (injectedProps: HOCToolbarProps): ((toolbarProps: Container.ToolbarProps) => void) =>
             (toolbarProps: Container.ToolbarProps) =>
                 createElement(CustomToolbar as any, { ...injectedProps, ...toolbarProps });
 
@@ -199,17 +199,17 @@
         return toolbarProps.map(customView => ({ ...customView, onClickToolbarButton: this.onRangeChange }));
     }
 
     private allDayAccessor = (event: Container.ViewOptions) => event.allDay;
 
     private eventColor = (events: CalendarEvent) => ({ style: { backgroundColor: events.color } });
 
     private onRangeChange = (date: object) => {
         if (this.props.onRangeChangeAction && date) {
             this.props.onRangeChangeAction(date);
         }
     };
 
     private onEventDrop = (eventInfo: Container.EventInfo) => {
         if (
             eventInfo.start.getTime() !== eventInfo.event.start.getTime() &&
             this.props.editable === "default" &&
@@ -219,7 +219,7 @@
         }
     };
 
     private onEventResize = (_resizeType: string, eventInfo: Container.EventInfo) => {
         if (
             (eventInfo.start.getTime() !== eventInfo.event.start.getTime() ||
                 eventInfo.end.getTime() !== eventInfo.event.end.getTime()) &&
@@ -231,13 +231,13 @@
         }
     };
 
     private onSelectEvent = (eventInfo: object) => {
         if (this.props.onSelectEventAction) {
             this.props.onSelectEventAction(eventInfo);
         }
     };
 
     private onSelectSlot = (slotInfo: object) => {
         if (this.props.onSelectSlotAction) {
             this.props.onSelectSlotAction(slotInfo);
         }

packages/customWidgets/calendar-custom-web/src/utils/validation.ts

@@ -1,7 +1,7 @@
 import { Container } from "./namespaces";
-import { createElement, ReactChild } from "react";
+import { createElement, ReactNode } from "react";
 
-export function validateProps(props: Container.CalendarContainerProps): ReactChild {
+export function validateProps(props: Container.CalendarContainerProps): ReactNode {
     const errorMessages: string[] = [];
 
     if (props.onClickEvent === "callMicroflow" && !props.onClickMicroflow) {
@@ -53,7 +53,7 @@ export function validateProps(props: Container.CalendarContainerProps): ReactChi
     return "";
 }
 
-export function validateCustomFormats(props: Container.CalendarContainerProps): ReactChild {
+export function validateCustomFormats(props: Container.CalendarContainerProps): ReactNode {
     const errorMessages: string[] = [];
 
     try {
@@ -68,7 +68,7 @@ export function validateCustomFormats(props: Container.CalendarContainerProps):
                 window.mx.parser.formatValue(date, "datetime", { datePattern: customView.gutterTimeFormat });
             });
         }
-    } catch (error) {
+    } catch (_error) {
         errorMessages.push(`${props.friendlyId}: Invalid format value`);
     }
     if (errorMessages.length) {

packages/customWidgets/signature-web/src/components/Alert.tsx

@@ -1,13 +1,12 @@
-import { createElement, FC, PropsWithChildren } from "react";
+import { FC, PropsWithChildren } from "react";
 import classNames from "classnames";
 
 export interface AlertProps extends PropsWithChildren {
     bootstrapStyle?: "default" | "primary" | "success" | "info" | "warning" | "danger";
     className?: string;
 }
 
-export const Alert: FC<AlertProps> = ({ bootstrapStyle, className, children }) =>
+export const Alert: FC<AlertProps> = ({ bootstrapStyle = "danger", className, children }) =>
     children ? <div className={classNames(`alert alert-${bootstrapStyle}`, className)}>{children}</div> : null;
 
 Alert.displayName = "Alert";
-Alert.defaultProps = { bootstrapStyle: "danger" };

packages/customWidgets/signature-web/src/components/Grid.tsx

@@ -1,4 +1,4 @@
-import { createElement, FC } from "react";
+import { FC } from "react";
 
 export interface GridBackgroundProps {
     gridCellWidth: number;
@@ -12,7 +12,7 @@ export const Grid: FC<GridBackgroundProps> = ({
     gridCellHeight,
     gridBorderColor,
     gridBorderWidth,
-    showGrid
+    showGrid = true
 }) => {
     const id = `grid${Math.floor(Math.random() * 1000000)}`;
     return showGrid ? (
@@ -43,4 +43,3 @@ export const Grid: FC<GridBackgroundProps> = ({
 };
 
 Grid.displayName = "Grid";
-Grid.defaultProps = { showGrid: true };

packages/customWidgets/signature-web/src/components/Signature.tsx

@@ -1,6 +1,6 @@
-import { createElement, PureComponent, ReactNode } from "react";
+import { PureComponent, ReactNode } from "react";
 
-// @ts-ignore
+// @ts-expect-error signature_pad has no types
 import SignaturePad, { IOptions } from "signature_pad";
 import classNames from "classnames";
 import ReactResizeDetector from "react-resize-detector";
@@ -31,7 +31,7 @@ export type penOptions = "fountain" | "ballpoint" | "marker";
 
 export class Signature extends PureComponent<SignatureProps> {
     private canvasNode: HTMLCanvasElement | null = null;
-    // @ts-expect-error
+    // @ts-expect-error signature_pad has no types
     private signaturePad: SignaturePad;
 
     render(): ReactNode {
@@ -48,7 +48,9 @@ export class Signature extends PureComponent<SignatureProps> {
                 <Grid {...this.props} />
                 <canvas
                     className="widget-signature-canvas"
-                    ref={(node: HTMLCanvasElement) => (this.canvasNode = node)}
+                    ref={(node: HTMLCanvasElement | null): void => {
+                        this.canvasNode = node;
+                    }}
                 />
                 <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
             </SizeContainer>

packages/customWidgets/signature-web/src/components/SizeContainer.ts

@@ -28,7 +28,7 @@ export const SizeContainer: FC<SizeProps> = ({
     height,
     children,
     style,
-    readOnly
+    readOnly = false
 }) => {
     const styleWidth = widthUnit === "percentage" ? `${width}%` : `${width}px`;
     return createElement(
@@ -62,7 +62,6 @@ export const SizeContainer: FC<SizeProps> = ({
 };
 
 SizeContainer.displayName = "SizeContainer";
-SizeContainer.defaultProps = { readOnly: false };
 
 const getHeight = (
     heightUnit: HeightUnitType,

packages/customWidgets/signature-web/src/components/__tests__/Alert.spec.ts

@@ -1,10 +1,10 @@
 import { shallow, ShallowWrapper } from "enzyme";
-import { createElement, ReactChild } from "react";
+import { createElement, ReactNode } from "react";
 
 import { Alert, AlertProps } from "../Alert";
 
 describe("Alert", () => {
-    const renderAlert = (props: AlertProps, message: ReactChild): ShallowWrapper<AlertProps, any> =>
+    const renderAlert = (props: AlertProps, message: ReactNode): ShallowWrapper<AlertProps, any> =>
         shallow(createElement(Alert, props, message));
     const alertMessage = "This is an error";
 

packages/customWidgets/signature-web/src/components/__tests__/Signature.spec.ts

@@ -41,7 +41,7 @@ describe("Signature", () => {
         });
         const canvasInstance: any = canvas.instance();
         canvasInstance.canvasNode = document.createElement("canvas");
-        const signaturePadOptions = spyOn(canvasInstance, "signaturePadOptions").and.callThrough();
+        const signaturePadOptions = jest.spyOn(canvasInstance, "signaturePadOptions");
         canvasInstance.componentDidMount();
         expect(signaturePadOptions).toHaveBeenCalled();
     });

packages/customWidgets/signature-web/tsconfig.json

@@ -20,8 +20,7 @@
         "noUnusedParameters": true,
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true,
-        "jsx": "react",
-        "jsxFactory": "createElement"
+        "jsx": "react-jsx"
     },
     "files": ["./node_modules/mendix-client/index.d.ts"],
     "include": ["./src", "./typings"],

packages/pluggableWidgets/accessibility-helper-web/src/AccessibilityHelper.tsx

@@ -1,4 +1,4 @@
-import { createElement, MutableRefObject, ReactElement, useCallback, useEffect, useMemo, useRef } from "react";
+import { MutableRefObject, ReactElement, useCallback, useEffect, useMemo, useRef } from "react";
 
 import { DynamicValue, ValueStatus } from "mendix";
 
@@ -43,6 +43,7 @@ const AccessibilityHelper = (props: AccessibilityHelperContainerProps): ReactEle
         } catch (error) {
             console.error(`Accessibility Helper selector ${props.targetSelector} is not valid`, error);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.targetSelector, conditions, contentRef.current]);
 
     useEffect(() => {
@@ -89,6 +90,7 @@ const AccessibilityHelper = (props: AccessibilityHelperContainerProps): ReactEle
                 };
             }
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [contentRef.current, props.targetSelector, conditions]);
 
     return <div ref={contentRef}>{props.content}</div>;

packages/pluggableWidgets/accessibility-helper-web/tsconfig.json

@@ -18,8 +18,8 @@
         "skipLibCheck": true,
         "noUnusedLocals": true,
         "noUnusedParameters": true,
-        "jsx": "react",
-        "jsxFactory": "createElement",
+        "jsx": "react-jsx",
+        "jsxImportSource": "react",
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true,
         "useUnknownInCatchVariables": false,

packages/pluggableWidgets/accordion-web/src/Accordion.editorPreview.tsx

@@ -1,6 +1,6 @@
 import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { mapPreviewIconToWebIcon } from "@mendix/widget-plugin-platform/preview/map-icon";
-import { createElement, ReactElement } from "react";
+import { ReactElement } from "react";
 
 import { Accordion } from "./components/Accordion";
 import { useIconGenerator } from "./utils/iconGenerator";

packages/pluggableWidgets/accordion-web/src/Accordion.tsx

@@ -1,4 +1,4 @@
-import { createElement, ReactElement, useMemo, useRef } from "react";
+import { ReactElement, useMemo, useRef } from "react";
 import { ValueStatus } from "mendix";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 

packages/pluggableWidgets/accordion-web/src/components/Accordion.tsx

@@ -1,13 +1,4 @@
-import {
-    createElement,
-    Dispatch,
-    MutableRefObject,
-    ReactElement,
-    useCallback,
-    useMemo,
-    useReducer,
-    useRef
-} from "react";
+import { Dispatch, MutableRefObject, ReactElement, useCallback, useMemo, useReducer, useRef } from "react";
 
 import { AccordionGroup, AccordionGroupProps, Target } from "./AccordionGroup";
 import { CollapsedAccordionGroupsReducerAction, getCollapsedAccordionGroupsReducer } from "../utils/reducers";

packages/pluggableWidgets/accordion-web/src/components/AccordionGroup.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { createElement, KeyboardEvent, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { Key, KeyboardEvent, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { LoadContentEnum } from "typings/AccordionProps";
 import { CallResizeObserver, useDebouncedResizeObserver } from "../utils/resizeObserver";
 import "../ui/accordion-main.scss";
@@ -28,6 +28,7 @@ export interface AccordionGroupProps {
     generateHeaderIcon?: (collapsed: boolean) => ReactElement;
     showHeaderIcon?: "right" | "left" | "no";
     loadContent: LoadContentEnum;
+    key?: Key;
 }
 
 export function AccordionGroup(props: AccordionGroupProps): ReactElement | null {

packages/pluggableWidgets/accordion-web/src/components/Header.tsx

@@ -1,4 +1,4 @@
-import { createElement, JSX, PropsWithChildren, ReactElement } from "react";
+import { JSX, PropsWithChildren, ReactElement } from "react";
 
 export interface HeaderProps {
     heading: "headingOne" | "headingTwo" | "headingThree" | "headingFour" | "headingFive" | "headingSix";

packages/pluggableWidgets/accordion-web/src/components/Icon.tsx

@@ -1,4 +1,4 @@
-import { createElement, ReactElement } from "react";
+import { ReactElement } from "react";
 import classNames from "classnames";
 import { WebIcon } from "mendix";
 import { IconInternal } from "@mendix/widget-plugin-component-kit/IconInternal";

packages/pluggableWidgets/accordion-web/src/components/__tests__/Accordion.spec.tsx

@@ -1,5 +1,4 @@
 import "@testing-library/jest-dom";
-import { createElement } from "react";
 import { act, render, RenderResult } from "@testing-library/react";
 import userEvent, { UserEvent } from "@testing-library/user-event";
 import { Accordion, AccordionProps } from "../Accordion";