fix: failing e2e

Author: yordan-st

packages/pluggableWidgets/datagrid-web/src/components/CellElement.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { DOMAttributes, forwardRef, JSX, memo, ReactElement, ReactNode } from "react";
+import { ComponentPropsWithoutRef, DOMAttributes, forwardRef, memo, ReactElement, ReactNode } from "react";
 import { AlignmentEnum } from "typings/DatagridProps";
 
 export type CellElementProps = {
@@ -14,7 +14,7 @@ export type CellElementProps = {
     wrapText?: boolean;
     ["aria-hidden"]?: boolean;
     tabIndex?: number;
-} & Omit<JSX.IntrinsicElements["div"], "ref" | "children">;
+} & Omit<ComponentPropsWithoutRef<"div">, "children">;
 
 const component = forwardRef<HTMLDivElement, CellElementProps>(function CellElement(
     { className, borderTop, clickable, previewAsHidden, wrapText, alignment, tabIndex, ...rest }: CellElementProps,

packages/pluggableWidgets/datagrid-web/src/components/Grid.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
-import { JSX, ReactElement } from "react";
+import { ComponentPropsWithoutRef, ReactElement } from "react";
 
-type P = Omit<JSX.IntrinsicElements["div"], "role" | "ref">;
+type P = Omit<ComponentPropsWithoutRef<"div">, "role">;
 
 export interface GridProps extends P {
     className?: string;

packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import { PaginationEnum } from "../../typings/DatagridProps";
 
 type WidgetFooterProps = {
@@ -8,7 +8,7 @@ type WidgetFooterProps = {
     loadMoreButtonCaption?: string;
     hasMoreItems: boolean;
     setPage?: (computePage: (prevPage: number) => number) => void;
-} & React.JSX.IntrinsicElements["div"];
+} & ComponentPropsWithoutRef<"div">;
 
 export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
     const { pagination, selectionCount, paginationType, loadMoreButtonCaption, hasMoreItems, setPage, ...rest } = props;

packages/pluggableWidgets/datagrid-web/src/components/WidgetHeader.tsx

@@ -1,8 +1,8 @@
-import { JSX, ReactElement } from "react";
+import { ComponentPropsWithoutRef, ReactElement } from "react";
 
 type WidgetHeaderProps = {
     headerTitle?: string;
-} & JSX.IntrinsicElements["div"];
+} & ComponentPropsWithoutRef<"div">;
 
 export function WidgetHeader(props: WidgetHeaderProps): ReactElement | null {
     const { children, headerTitle, ...rest } = props;

packages/pluggableWidgets/datagrid-web/src/components/WidgetRoot.tsx

@@ -1,8 +1,8 @@
 import classNames from "classnames";
-import { JSX, ReactElement, useMemo, useRef } from "react";
+import { ComponentPropsWithoutRef, ReactElement, useMemo, useRef } from "react";
 import { SelectionMethod } from "../helpers/SelectActionHelper";
 
-type P = JSX.IntrinsicElements["div"];
+type P = ComponentPropsWithoutRef<"div">;
 
 export interface WidgetRootProps extends P {
     className?: string;

packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx

@@ -1,9 +1,9 @@
-import { ReactElement, ReactNode } from "react";
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 
 type WidgetTopBarProps = {
     pagination: ReactNode;
     selectionCount: ReactNode;
-} & JSX.IntrinsicElements["div"];
+} & ComponentPropsWithoutRef<"div">;
 
 export function WidgetTopBar(props: WidgetTopBarProps): ReactElement {
     const { pagination, selectionCount, ...rest } = props;

packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnStore.tsx

@@ -7,7 +7,7 @@ import {
     ObjectItem,
     ValueStatus
 } from "mendix";
-import { JSX, KeyboardEvent, ReactElement, ReactNode } from "react";
+import { ComponentPropsWithoutRef, KeyboardEvent, ReactElement, ReactNode } from "react";
 import { AlignmentEnum, ColumnsType } from "../../../../typings/DatagridProps";
 import { ColumnId, GridColumn } from "../../../typings/GridColumn";
 import { Big } from "big.js";
@@ -269,7 +269,7 @@ function CustomContent({
     children: ReactNode;
     allowEventPropagation: boolean;
 }): ReactElement {
-    const wrapperProps: JSX.IntrinsicElements["div"] = allowEventPropagation
+    const wrapperProps: ComponentPropsWithoutRef<"div"> = allowEventPropagation
         ? {}
         : {
               onClick: stopPropagation,

packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx

@@ -7,7 +7,7 @@ import { getColumnAndRowBasedOnIndex } from "@mendix/widget-plugin-grid/selectio
 import { getGlobalSortContext } from "@mendix/widget-plugin-sorting/react/context";
 import { SortStoreHost } from "@mendix/widget-plugin-sorting/stores/SortStoreHost";
 import { GUID, ObjectItem } from "mendix";
-import { createElement, ReactElement, ReactNode, useCallback, useMemo } from "react";
+import { createElement, ReactElement, ReactNode, RefObject, useCallback, useMemo } from "react";
 import { GalleryPreviewProps } from "../typings/GalleryProps";
 import { Gallery as GalleryComponent } from "./components/Gallery";
 import { useItemEventsController } from "./features/item-interaction/ItemEventsController";
@@ -64,7 +64,7 @@ function Preview(props: GalleryPreviewProps): ReactElement {
     );
 
     return (
-        <div ref={containerRef as React.RefObject<HTMLDivElement>}>
+        <div ref={containerRef as RefObject<HTMLDivElement>}>
             <GalleryComponent
                 className={props.class}
                 desktopItems={props.desktopItems!}