chore: remove direct usage of JSX namespace. Use ReactElement or JSX from react

r0b1n · r0b1n · commit 129a55e2f5af · 2025-04-09T09:42:38.000+02:00
diff --git a/packages/pluggableWidgets/accordion-web/src/components/AccordionGroup.tsx b/packages/pluggableWidgets/accordion-web/src/components/AccordionGroup.tsx
@@ -4,14 +4,12 @@ import { LoadContentEnum } from "typings/AccordionProps";
 import { useDebouncedResizeObserver, CallResizeObserver } from "../utils/resizeObserver";
 import "../ui/accordion-main.scss";
 
-/* eslint-disable no-unused-vars */
 export const enum Target {
     FIRST = "first",
     LAST = "last",
     PREVIOUS = "previous",
     NEXT = "next"
 }
-/* eslint-enable no-unused-vars */
 
 export type AccordionGroupIcon = { icon: ReactNode } | { expandIcon: ReactNode; collapseIcon: ReactNode };
 
diff --git a/packages/pluggableWidgets/accordion-web/src/components/Header.tsx b/packages/pluggableWidgets/accordion-web/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import { createElement, PropsWithChildren, ReactElement } from "react";
+import { createElement, JSX, PropsWithChildren, ReactElement } from "react";
 
 export interface HeaderProps {
     heading: "headingOne" | "headingTwo" | "headingThree" | "headingFour" | "headingFive" | "headingSix";
diff --git a/packages/pluggableWidgets/combobox-web/src/components/ComboboxMenuWrapper.tsx b/packages/pluggableWidgets/combobox-web/src/components/ComboboxMenuWrapper.tsx
@@ -11,19 +11,19 @@ interface ComboboxMenuWrapperProps extends PropsWithChildren, Partial<UseCombobo
     isLoading: boolean;
     isOpen: boolean;
     lazyLoading: boolean;
-    loader: JSX.Element;
+    loader: ReactNode;
     menuFooterContent?: ReactNode;
     menuHeaderContent?: ReactNode;
     noOptionsText?: string;
     onOptionClick?: (e: MouseEvent) => void;
     onScroll?: (e: any) => void;
 }
 
-function PreventMenuCloseEventHandler(e: React.MouseEvent): void {
+function PreventMenuCloseEventHandler(e: MouseEvent): void {
     e.stopPropagation();
 }
 
-function ForcePreventMenuCloseEventHandler(e: React.MouseEvent): void {
+function ForcePreventMenuCloseEventHandler(e: MouseEvent): void {
     e.preventDefault();
     e.stopPropagation();
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/__tests__/perf.spec.tsx b/packages/pluggableWidgets/datagrid-web/src/__tests__/perf.spec.tsx
@@ -4,7 +4,7 @@ import "@testing-library/jest-dom";
 import { configure } from "@testing-library/dom";
 import { render } from "@testing-library/react";
 import { Big } from "big.js";
-import { createElement, Profiler } from "react";
+import { createElement, Profiler, ReactElement } from "react";
 import { ColumnsType, DatagridContainerProps } from "../../typings/DatagridProps";
 import Datagrid from "../Datagrid";
 import { data } from "./snapshot";
@@ -92,7 +92,7 @@ describe("Datagrid", () => {
         const user = userEvent.setup();
         let renderCount = 0;
         const onRender = (): number => ++renderCount;
-        const WithProfiler = (): JSX.Element => (
+        const WithProfiler = (): ReactElement => (
             <Profiler id="grid" onRender={onRender}>
                 <Datagrid {...props} />
             </Profiler>
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Grid.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Grid.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { ReactElement, createElement } from "react";
+import { ReactElement, createElement, JSX } from "react";
 import { PaginationEnum } from "../../typings/DatagridProps";
 import { useInfiniteControl } from "@mendix/widget-plugin-grid/components/InfiniteBody";
 
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/action-handlers.ts b/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/action-handlers.ts
@@ -2,6 +2,7 @@ import { ElementEntry, EventCaseEntry } from "@mendix/widget-plugin-grid/event-s
 import { ExecuteActionFx } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
 import { CellContext } from "./base";
 import { onOwnSpaceKeyDown } from "@mendix/widget-plugin-grid/selection";
+import { KeyboardEvent } from "react";
 
 const onClick = (execActionFx: ExecuteActionFx): EventCaseEntry<CellContext, HTMLDivElement, "onClick"> => ({
     eventName: "onClick",
@@ -28,7 +29,7 @@ const onDoubleClick = (
     handler: ({ item }) => execActionFx(item)
 });
 
-const canExecOnSpaceOrEnter = (ctx: CellContext, event: React.KeyboardEvent): boolean => {
+const canExecOnSpaceOrEnter = (ctx: CellContext, event: KeyboardEvent): boolean => {
     if (event.code === "Space" && ctx.clickTrigger !== "none") {
         return event.shiftKey ? ctx.selectionMethod === "none" : true;
     }
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/select-handlers.ts b/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/select-handlers.ts
@@ -9,6 +9,7 @@ import {
 } from "@mendix/widget-plugin-grid/selection";
 import { blockUserSelect, removeAllRanges, unblockUserSelect } from "@mendix/widget-plugin-grid/selection/utils";
 import { CellContext } from "./base";
+import { MouseEvent } from "react";
 
 const onSelect = (selectFx: SelectFx): EventCaseEntry<CellContext, HTMLDivElement, "onClick"> => ({
     eventName: "onClick",
@@ -34,7 +35,7 @@ const onSelect = (selectFx: SelectFx): EventCaseEntry<CellContext, HTMLDivElemen
 });
 
 const onMouseDown = (
-    handler: (ctx: CellContext, event: React.MouseEvent<Element>) => void
+    handler: (ctx: CellContext, event: MouseEvent<Element>) => void
 ): EventCaseEntry<CellContext, Element, "onMouseDown"> => ({
     eventName: "onMouseDown",
     filter: ctx => ctx.selectionMethod !== "none",
diff --git a/packages/pluggableWidgets/gallery-web/src/components/GalleryFooter.tsx b/packages/pluggableWidgets/gallery-web/src/components/GalleryFooter.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { createElement, ReactElement } from "react";
+import { createElement, JSX, ReactElement } from "react";
 
 type GalleryFooterProps = Omit<JSX.IntrinsicElements["div"], "ref">;
 
diff --git a/packages/pluggableWidgets/gallery-web/src/components/ListBox.tsx b/packages/pluggableWidgets/gallery-web/src/components/ListBox.tsx
@@ -1,6 +1,6 @@
 import { SelectionType } from "@mendix/widget-plugin-grid/selection";
 import classNames from "classnames";
-import { createElement, ReactElement } from "react";
+import { createElement, JSX, ReactElement } from "react";
 
 type ListBoxProps = Omit<JSX.IntrinsicElements["div"], "ref" | "role"> & {
     lg: number;
diff --git a/packages/pluggableWidgets/maps-web/src/components/LeafletMap.tsx b/packages/pluggableWidgets/maps-web/src/components/LeafletMap.tsx
@@ -22,8 +22,11 @@ export interface LeafletProps extends SharedProps {
  * If not, we reuse a leaflet icon that's the same as the default implementation should be.
  */
 const defaultMarkerIcon = new LeafletIcon({
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     iconRetinaUrl: require("leaflet/dist/images/marker-icon.png"),
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     iconUrl: require("leaflet/dist/images/marker-icon.png"),
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
     iconSize: [25, 41],
     iconAnchor: [12, 41]
diff --git a/packages/pluggableWidgets/range-slider-web/src/components/RangeSlider.tsx b/packages/pluggableWidgets/range-slider-web/src/components/RangeSlider.tsx
@@ -1,4 +1,4 @@
-import { createElement, CSSProperties, forwardRef, RefObject } from "react";
+import { createElement, CSSProperties, forwardRef, ReactElement, RefObject } from "react";
 import { Range, RangeProps } from "rc-slider";
 import classNames from "classnames";
 
@@ -11,7 +11,7 @@ export const RangeSlider = forwardRef(
     (
         { className, classNameSlider, rootStyle, ...rcRangeProps }: RangeSliderProps,
         sliderRef: RefObject<HTMLDivElement>
-    ): JSX.Element => (
+    ): ReactElement => (
         <div
             ref={sliderRef}
             style={rootStyle}
diff --git a/packages/pluggableWidgets/range-slider-web/src/utils/createHandleGenerator.tsx b/packages/pluggableWidgets/range-slider-web/src/utils/createHandleGenerator.tsx
@@ -1,4 +1,4 @@
-import { createElement, RefObject } from "react";
+import { createElement, ReactElement, RefObject } from "react";
 import Tooltip from "rc-tooltip";
 import { Handle, HandleProps } from "rc-slider";
 import { DynamicValue } from "mendix";
@@ -9,7 +9,7 @@ interface HandleGeneratorProps extends HandleProps {
     index: number;
 }
 
-type HandleGenerator = (props: HandleGeneratorProps) => JSX.Element | undefined;
+type HandleGenerator = (props: HandleGeneratorProps) => ReactElement | undefined;
 
 type CreateHandleGeneratorParams = {
     showTooltip: boolean;
@@ -38,7 +38,7 @@ export function createHandleGenerator(props: CreateHandleGeneratorParams): Handl
         return;
     }
 
-    return function handleGenerator(generatorProps: HandleGeneratorProps): JSX.Element | undefined {
+    return function handleGenerator(generatorProps: HandleGeneratorProps): ReactElement | undefined {
         const { dragging, index, ...restProps } = generatorProps;
         const isCustomText = tooltipTypeCheck[index];
 
diff --git a/packages/pluggableWidgets/rich-text-web/src/RichText.tsx b/packages/pluggableWidgets/rich-text-web/src/RichText.tsx
@@ -1,12 +1,12 @@
 import { ValidationAlert } from "@mendix/widget-plugin-component-kit/Alert";
 import classNames from "classnames";
-import { createElement, Fragment, useEffect, useState } from "react";
+import { createElement, Fragment, ReactElement, useEffect, useState } from "react";
 import { RichTextContainerProps } from "../typings/RichTextProps";
 import EditorWrapper from "./components/EditorWrapper";
 import "./ui/RichText.scss";
 import { constructWrapperStyle } from "./utils/helpers";
 
-export default function RichText(props: RichTextContainerProps): JSX.Element {
+export default function RichText(props: RichTextContainerProps): ReactElement {
     const { stringAttribute, readOnlyStyle } = props;
 
     const wrapperStyle = constructWrapperStyle(props);
diff --git a/packages/pluggableWidgets/rich-text-web/src/store/EditorProvider.tsx b/packages/pluggableWidgets/rich-text-web/src/store/EditorProvider.tsx
@@ -1,10 +1,10 @@
-import { createElement, createContext, ReactNode, useReducer } from "react";
+import { createElement, createContext, ReactElement, ReactNode, useReducer } from "react";
 import { EditorAction, editorReducer, EditorState, initialState } from "./store";
 
 export const EditorContext = createContext<EditorState>(initialState);
 export const EditorDispatchContext = createContext<React.Dispatch<EditorAction> | null>(null);
 
-export function EditorProvider({ children }: { children: ReactNode }): JSX.Element {
+export function EditorProvider({ children }: { children: ReactNode }): ReactElement {
     const [state, dispatch] = useReducer(editorReducer, initialState);
 
     return (
diff --git a/packages/pluggableWidgets/slider-web/src/components/Slider.tsx b/packages/pluggableWidgets/slider-web/src/components/Slider.tsx
@@ -1,4 +1,4 @@
-import { createElement, CSSProperties, forwardRef, RefObject } from "react";
+import { createElement, CSSProperties, forwardRef, ReactElement, RefObject } from "react";
 import RcSlider, { SliderProps as RcSliderProps } from "rc-slider";
 import classNames from "classnames";
 
@@ -11,7 +11,7 @@ export const Slider = forwardRef(
     (
         { className, classNameSlider, rootStyle, ...rcSliderProps }: SliderProps,
         sliderRef: RefObject<HTMLDivElement>
-    ): JSX.Element => {
+    ): ReactElement => {
         return (
             <div
                 ref={sliderRef}
diff --git a/packages/pluggableWidgets/slider-web/src/utils/createHandleGenerator.tsx b/packages/pluggableWidgets/slider-web/src/utils/createHandleGenerator.tsx
@@ -1,4 +1,4 @@
-import { createElement, Ref, RefObject } from "react";
+import { createElement, ReactElement, ReactNode, Ref, RefObject } from "react";
 import Tooltip from "rc-tooltip";
 import { Handle, HandleProps } from "rc-slider";
 import { DynamicValue } from "mendix";
@@ -11,7 +11,7 @@ interface HandleGeneratorProps extends HandleProps {
     ref?: Ref<any>;
 }
 
-type HandleGenerator = (props: HandleGeneratorProps) => JSX.Element | undefined;
+type HandleGenerator = (props: HandleGeneratorProps) => ReactNode | undefined;
 
 type CreateHandleGeneratorParams = {
     showTooltip: boolean;
@@ -29,7 +29,7 @@ export function createHandleGenerator(props: CreateHandleGeneratorParams): Handl
         return;
     }
 
-    return function handleGenerator(generatorProps: HandleGeneratorProps): JSX.Element | undefined {
+    return function handleGenerator(generatorProps: HandleGeneratorProps): ReactElement | undefined {
         const { dragging, index, ...restProps } = generatorProps;
         const overlay = <div>{tooltip?.value ?? ""}</div>;
 
diff --git a/packages/pluggableWidgets/timeline-web/src/components/TimelineComponent.tsx b/packages/pluggableWidgets/timeline-web/src/components/TimelineComponent.tsx
@@ -86,7 +86,7 @@ function getBasicEventsFromDay(eventsOfDay: BasicItemType[]): ReactNode[] {
     ));
 }
 
-function getCustomEventsFromDay(eventsOfDay: CustomItemType[]): JSX.Element[] {
+function getCustomEventsFromDay(eventsOfDay: CustomItemType[]): ReactNode[] {
     return eventsOfDay.map((event, index) => (
         <li
             key={index}
diff --git a/packages/pluggableWidgets/video-player-web/src/VideoPlayer.editorPreview.tsx b/packages/pluggableWidgets/video-player-web/src/VideoPlayer.editorPreview.tsx
@@ -1,5 +1,5 @@
 import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
-import { Component, createElement } from "react";
+import { Component, createElement, ReactNode } from "react";
 import classNames from "classnames";
 
 import { SizeContainer } from "./components/SizeContainer";
@@ -10,7 +10,7 @@ import { VideoPlayerPreviewProps } from "../typings/VideoPlayerProps";
 declare function require(name: string): string;
 
 export class preview extends Component<VideoPlayerPreviewProps, NonNullable<unknown>> {
-    render(): JSX.Element {
+    render(): ReactNode {
         return (
             <SizeContainer
                 className={classNames("video-player-container", this.props.className)}
diff --git a/packages/pluggableWidgets/video-player-web/src/VideoPlayer.tsx b/packages/pluggableWidgets/video-player-web/src/VideoPlayer.tsx
@@ -1,4 +1,4 @@
-import { Component, createElement } from "react";
+import { Component, createElement, ReactNode } from "react";
 import classNames from "classnames";
 
 import { SizeContainer } from "./components/SizeContainer";
@@ -8,7 +8,7 @@ import { VideoPlayerContainerProps } from "../typings/VideoPlayerProps";
 import "./ui/VideoPlayer.scss";
 
 export default class VideoPlayer extends Component<VideoPlayerContainerProps> {
-    render(): JSX.Element {
+    render(): ReactNode {
         const useExpressionForLinks = this.props.type === "expression";
         const url = useExpressionForLinks ? this.props.urlExpression?.value : this.props.videoUrl?.value;
         const poster = useExpressionForLinks ? this.props.posterExpression?.value : this.props.posterUrl?.value;
diff --git a/packages/pluggableWidgets/video-player-web/src/components/Dailymotion.tsx b/packages/pluggableWidgets/video-player-web/src/components/Dailymotion.tsx
@@ -1,4 +1,4 @@
-import { Component, createElement } from "react";
+import { Component, createElement, ReactNode } from "react";
 import { validateUrl } from "../utils/Utils";
 
 export interface DailymotionProps {
@@ -12,7 +12,7 @@ export interface DailymotionProps {
 export class Dailymotion extends Component<DailymotionProps> {
     private handleAttributes = this.getUrlAttributes.bind(this);
 
-    render(): JSX.Element {
+    render(): ReactNode {
         return (
             <iframe
                 className="widget-video-player-iframe"
@@ -38,7 +38,7 @@ export class Dailymotion extends Component<DailymotionProps> {
                     return `https://www.dailymotion.com/embed/video/${id}${attributes}`;
                 }
             }
-        } catch (e) {
+        } catch (_e: unknown) {
             return url;
         }
         return url;
diff --git a/packages/pluggableWidgets/video-player-web/src/components/Html5.tsx b/packages/pluggableWidgets/video-player-web/src/components/Html5.tsx
@@ -1,4 +1,4 @@
-import { Component, createElement, createRef } from "react";
+import { Component, createElement, createRef, ReactNode } from "react";
 
 import classNames from "classnames";
 
@@ -20,7 +20,7 @@ export class Html5 extends Component<Html5PlayerProps> {
     private readonly handleOnSuccess = this.handleSuccess.bind(this);
     private readonly handleOnError = this.handleError.bind(this);
 
-    render(): JSX.Element {
+    render(): ReactNode {
         return (
             <div
                 className={classNames("widget-video-player-html5-container", {
@@ -63,8 +63,6 @@ export class Html5 extends Component<Html5PlayerProps> {
                             src={this.props.url}
                             type="video/mp4"
                             onError={this.handleOnError}
-                            /* https://github.com/jsx-eslint/eslint-plugin-react/issues/3505 */
-                            /* eslint-disable-next-line react/no-unknown-property */
                             onLoad={this.handleOnSuccess}
                         />
                     ) : null}
diff --git a/packages/pluggableWidgets/video-player-web/src/components/SizeContainer.tsx b/packages/pluggableWidgets/video-player-web/src/components/SizeContainer.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, Component, createElement, PropsWithChildren } from "react";
+import { CSSProperties, Component, createElement, PropsWithChildren, ReactNode } from "react";
 import classNames from "classnames";
 
 export type HeightUnitType = "percentageOfWidth" | "percentageOfParent" | "pixels" | "aspectRatio";
@@ -22,7 +22,7 @@ export interface SizeProps extends Dimensions, PropsWithChildren<any> {
 }
 
 export class SizeContainer extends Component<SizeProps> {
-    render(): JSX.Element {
+    render(): ReactNode {
         return (
             <div
                 className={classNames(this.props.className, "size-box")}
diff --git a/packages/pluggableWidgets/video-player-web/src/components/Video.tsx b/packages/pluggableWidgets/video-player-web/src/components/Video.tsx
@@ -1,4 +1,4 @@
-import { Component, createElement } from "react";
+import { Component, createElement, ReactElement, ReactNode } from "react";
 
 import { Dailymotion } from "./Dailymotion";
 import { Html5 } from "./Html5";
@@ -25,7 +25,7 @@ export class Video extends Component<VideoPlayerProps> {
     private readonly handleVimeoPlayerRender = this.renderVimeoPlayer.bind(this);
     private readonly handleDailymotionPlayerRender = this.renderDailymotionPlayer.bind(this);
 
-    render(): JSX.Element {
+    render(): ReactNode {
         const url = this.props.url || "";
         if (Youtube.canPlay(url)) {
             return this.handleYoutubePlayerRender(url);
@@ -37,7 +37,7 @@ export class Video extends Component<VideoPlayerProps> {
         return this.handleHtml5PlayerRender(url);
     }
 
-    private renderHtml5Player(url: string): JSX.Element {
+    private renderHtml5Player(url: string): ReactElement {
         return (
             <Html5
                 showControls={this.props.showControls}
@@ -52,7 +52,7 @@ export class Video extends Component<VideoPlayerProps> {
         );
     }
 
-    private renderYoutubePlayer(url: string): JSX.Element {
+    private renderYoutubePlayer(url: string): ReactElement {
         return (
             <Youtube
                 url={url}
@@ -65,7 +65,7 @@ export class Video extends Component<VideoPlayerProps> {
         );
     }
 
-    private renderVimeoPlayer(url: string): JSX.Element {
+    private renderVimeoPlayer(url: string): ReactElement | null {
         return (
             <Vimeo
                 url={url}
@@ -77,7 +77,7 @@ export class Video extends Component<VideoPlayerProps> {
         );
     }
 
-    private renderDailymotionPlayer(url: string): JSX.Element {
+    private renderDailymotionPlayer(url: string): ReactElement | null {
         return (
             <Dailymotion
                 url={url}
diff --git a/packages/pluggableWidgets/video-player-web/src/components/Vimeo.tsx b/packages/pluggableWidgets/video-player-web/src/components/Vimeo.tsx
diff --git a/packages/pluggableWidgets/video-player-web/src/components/Youtube.tsx b/packages/pluggableWidgets/video-player-web/src/components/Youtube.tsx
diff --git a/packages/pluggableWidgets/video-player-web/src/components/__tests__/Dailymotion.spec.tsx b/packages/pluggableWidgets/video-player-web/src/components/__tests__/Dailymotion.spec.tsx
diff --git a/packages/pluggableWidgets/video-player-web/src/components/__tests__/Html5.spec.tsx b/packages/pluggableWidgets/video-player-web/src/components/__tests__/Html5.spec.tsx
diff --git a/packages/pluggableWidgets/video-player-web/src/components/__tests__/Vimeo.spec.tsx b/packages/pluggableWidgets/video-player-web/src/components/__tests__/Vimeo.spec.tsx
diff --git a/packages/pluggableWidgets/video-player-web/src/components/__tests__/Youtube.spec.tsx b/packages/pluggableWidgets/video-player-web/src/components/__tests__/Youtube.spec.tsx
diff --git a/packages/shared/widget-plugin-component-kit/src/Alert.tsx b/packages/shared/widget-plugin-component-kit/src/Alert.tsx
diff --git a/packages/shared/widget-plugin-test-utils/src/builders/EditableValueBuilder.ts b/packages/shared/widget-plugin-test-utils/src/builders/EditableValueBuilder.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { createElement, PropsWithChildren, ReactElement } from "react";`
	`1`	`+import { createElement, JSX, PropsWithChildren, ReactElement } from "react";`
`2`	`2`
`3`	`3`	`export interface HeaderProps {`
`4`	`4`	`heading: "headingOne" \| "headingTwo" \| "headingThree" \| "headingFour" \| "headingFive" \| "headingSix";`