@linzjs/step-ag-grid 15.1.3 → 17.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "15.1.3",
+  "version": "17.0.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -24,26 +24,26 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   },
   "peerDependencies": {
-    "@linzjs/lui": ">=17.60.0",
-    "ag-grid-community": ">=27",
-    "ag-grid-react": ">=27",
+    "@linzjs/lui": "^18",
+    "ag-grid-community": ">=28",
+    "ag-grid-react": ">=28",
     "lodash-es": ">=4",
     "react": ">=17",
     "react-dom": ">=17"
   },
   "dependencies": {
-    "@linzjs/lui": ">=17.60.0",
-    "ag-grid-community": ">=27",
-    "ag-grid-react": ">=27",
+    "@linzjs/lui": "^18",
+    "ag-grid-community": ">=28",
+    "ag-grid-react": ">=28",
     "debounce-promise": "^3.1.2",
     "lodash-es": ">=4",
     "matcher": "^5.0.0",
     "react": ">=17",
     "react-dom": ">=17",
-    "react-transition-state": "^2.0.2",
+    "react-transition-state": "^2.1.1",
     "uuid": "^9.0.0"
   },
   "scripts": {
@@ -56,8 +56,8 @@
     "test": "jest",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "deploy-storybook": "npx --yes -p @storybook/storybook-deployer storybook-to-ghpages",
     "chromatic": "chromatic --exit-zero-on-changes",
     "semantic-release": "semantic-release"
@@ -81,76 +81,80 @@
     ]
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.16",
-    "@storybook/test-runner": "^0.9.4",
-    "@storybook/testing-library": "^0.0.13",
-    "@testing-library/dom": "^9.3.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
+    "@storybook/addon-essentials": "^7.2.3",
+    "@storybook/addon-interactions": "^7.2.3",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/preset-create-react-app": "^7.2.3",
+    "@storybook/react": "^7.2.3",
+    "@storybook/react-webpack5": "^7.2.3",
+    "@storybook/test-runner": "^0.13.0",
+    "@storybook/testing-library": "^0.2.0",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/debounce-promise": "^3.1.6",
-    "@types/jest": "^29.5.2",
-    "@types/lodash-es": "^4.17.7",
-    "@types/node": "^20.2.5",
-    "@types/react": "^17.0.60",
-    "@types/react-dom": "^17.0.20",
-    "@types/uuid": "^9.0.1",
-    "@typescript-eslint/parser": "^5.60.0",
-    "babel-jest": "^29.5.0",
+    "@types/jest": "^29.5.3",
+    "@types/lodash-es": "^4.17.8",
+    "@types/node": "^18.17.5",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@types/uuid": "^9.0.2",
+    "@typescript-eslint/parser": "^5.62.0",
+    "babel-jest": "^29.6.2",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^6.18.0",
-    "conventional-changelog-conventionalcommits": "^5.0.0",
-    "eslint": "^8.41.0",
-    "eslint-config-prettier": "^8.8.0",
+    "chromatic": "^6.21.0",
+    "conventional-changelog-conventionalcommits": "^6.1.0",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-deprecation": "^1.4.1",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-deprecation": "^1.5.0",
+    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^5.11.0",
-    "jest": "^29.5.0",
-    "jest-canvas-mock": "^2.5.1",
-    "jest-environment-jsdom": "^29.5.0",
+    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-testing-library": "^6.0.0",
+    "jest": "^29.6.2",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^29.6.2",
     "jest-expect-message": "^1.1.3",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.24",
-    "postcss-loader": "^7.3.2",
+    "postcss": "^8.4.27",
+    "postcss-loader": "^7.3.3",
     "postcss-scss": "^4.0.6",
     "prettier": "^2.8.8",
     "react-app-polyfill": "^3.0.0",
     "react-scripts": "^5.0.1",
-    "rollup": "^3.23.0",
+    "rollup": "^3.28.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-typescript2": "^0.34.1",
-    "sass": "^1.62.1",
-    "sass-loader": "^13.3.1",
-    "semantic-release": "^19.0.5",
+    "rollup-plugin-typescript2": "^0.35.0",
+    "sass": "1.64.2",
+    "sass-loader": "^13.3.2",
+    "semantic-release": "^21.0.7",
+    "storybook": "^7.2.3",
+    "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^3.3.3",
-    "stylelint": "^14.16.1",
-    "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-recommended-scss": "^8.0.0",
-    "stylelint-config-standard": "^29.0.0",
-    "stylelint-prettier": "3.0.0",
-    "stylelint-scss": "5.0.0",
-    "tsconfig-paths-webpack-plugin": "^4.0.1",
+    "stylelint": "^15.10.2",
+    "stylelint-config-recommended-scss": "^12.0.0",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-prettier": "^3.0.0",
+    "stylelint-scss": "^5.1.0",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^4.9.5"
   },
   "babel": {

package/src/components/ComponentLoadingWrapper.tsx

@@ -1,14 +1,17 @@
+import { PropsWithChildren, ReactElement } from "react";
+
 import { LuiMiniSpinner } from "@linzjs/lui";
 
 /**
  * If loading is true this returns a loading spinner, otherwise it returns its children.
  */
-export const ComponentLoadingWrapper = (props: {
-  loading?: boolean;
-  saving?: boolean;
-  children: JSX.Element | undefined;
-  className: string | undefined;
-}): JSX.Element => {
+export const ComponentLoadingWrapper = (
+  props: PropsWithChildren<{
+    loading?: boolean;
+    saving?: boolean;
+    className: string | undefined;
+  }>,
+): ReactElement => {
   return props.loading ? (
     <LuiMiniSpinner size={22} divProps={{ role: "status", ["aria-label"]: "Loading", style: { padding: 16 } }} />
   ) : (

package/src/components/Grid.tsx

@@ -1,11 +1,17 @@
 import { CellClickedEvent, ColDef, ColGroupDef, ColumnResizedEvent, ModelUpdatedEvent } from "ag-grid-community";
 import { CellClassParams, EditableCallback, EditableCallbackParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
-import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
+import {
+  AgGridEvent,
+  CellEvent,
+  CellKeyDownEvent,
+  GridReadyEvent,
+  SelectionChangedEvent,
+} from "ag-grid-community/dist/lib/events";
 import { AgGridReact } from "ag-grid-react";
 import clsx from "clsx";
 import { defer, difference, isEmpty, last, omit, xorBy } from "lodash-es";
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
 import { GridContext } from "../contexts/GridContext";
 import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
@@ -87,12 +93,12 @@ export const Grid = ({
   "data-testid": dataTestId,
   rowSelection = "multiple",
   suppressColumnVirtualization = true,
-  theme = "ag-theme-alpine",
+  theme = "ag-theme-step-default",
   sizeColumns = "auto",
   selectColumnPinned = null,
   contextMenuSelectRow = false,
   ...params
-}: GridProps): JSX.Element => {
+}: GridProps): ReactElement => {
   const {
     gridReady,
     setApis,
@@ -114,9 +120,11 @@ export const Grid = ({
   const { prePopupOps } = useContext(GridContext);
 
   const gridDivRef = useRef<HTMLDivElement>(null);
-
   const lastSelectedIds = useRef<number[]>([]);
+
   const [staleGrid, setStaleGrid] = useState(false);
+  const [autoSized, setAutoSized] = useState(false);
+
   const postSortRows = usePostSortRowsHook({ setStaleGrid });
 
   /**
@@ -162,6 +170,7 @@ export const Grid = ({
     if (sizeColumns !== "none") {
       sizeColumnsToFit();
     }
+    setAutoSized(true);
     needsAutoSize.current = false;
   }, [autoSizeColumns, params, sizeColumns, sizeColumnsToFit]);
 
@@ -208,7 +217,7 @@ export const Grid = ({
       if (params.autoSelectFirstRow) {
         selectRowsById([firstRowId]);
       } else {
-        focusByRowById(firstRowId);
+        focusByRowById(firstRowId, true);
       }
     }
   }, [
@@ -357,6 +366,7 @@ export const Grid = ({
   const onGridReady = useCallback(
     (event: GridReadyEvent) => {
       setApis(event.api, event.columnApi, dataTestId);
+      event.api.showNoRowsOverlay();
       synchroniseExternallySelectedItemsToGrid();
     },
     [dataTestId, setApis, synchroniseExternallySelectedItemsToGrid],
@@ -389,19 +399,8 @@ export const Grid = ({
   /**
    * Show/hide no rows overlay when model changes.
    */
-  const isShowingNoRowsOverlay = useRef(false);
   const onModelUpdated = useCallback((event: ModelUpdatedEvent) => {
-    if (event.api.getDisplayedRowCount() === 0) {
-      if (!isShowingNoRowsOverlay.current) {
-        event.api.showNoRowsOverlay();
-        isShowingNoRowsOverlay.current = true;
-      }
-    } else {
-      if (isShowingNoRowsOverlay.current) {
-        event.api.hideOverlay();
-        isShowingNoRowsOverlay.current = false;
-      }
-    }
+    event.api.showNoRowsOverlay();
   }, []);
 
   /**
@@ -481,7 +480,7 @@ export const Grid = ({
    * Start editing on pressing Enter
    */
   const onCellKeyPress = useCallback(
-    (e: CellEvent) => {
+    (e: CellKeyDownEvent) => {
       if ((e.event as KeyboardEvent).key === "Enter") {
         if (!invokeEditAction(e)) startCellEditing(e);
       }
@@ -561,7 +560,7 @@ export const Grid = ({
   }, [sizeColumns, sizeColumnsToFit]);
 
   /**
-   * Set of column Id's that are prevented from auto-sizing as they are user set
+   * Set of column I'd's that are prevented from auto-sizing as they are user set
    */
   const userSizedColIds = useRef(new Set<string>());
 
@@ -593,7 +592,7 @@ export const Grid = ({
         "Grid-container",
         theme,
         staleGrid && "Grid-sortIsStale",
-        gridReady && params.rowData && "Grid-ready",
+        gridReady && params.rowData && autoSized && "Grid-ready",
       )}
     >
       {gridContextMenu.component}
@@ -612,8 +611,8 @@ export const Grid = ({
           onColumnVisible={() => {
             setInitialContentSize();
           }}
-          onRowDataChanged={onRowDataChanged}
-          onCellKeyPress={onCellKeyPress}
+          onRowDataUpdated={onRowDataChanged}
+          onCellKeyDown={onCellKeyPress}
           onCellClicked={onCellClicked}
           onCellDoubleClicked={onCellDoubleClick}
           onCellEditingStarted={refreshSelectedRows}
@@ -622,10 +621,16 @@ export const Grid = ({
           defaultColDef={{ minWidth: 48, ...omit(params.defaultColDef, ["editable"]) }}
           columnDefs={columnDefsAdjusted}
           rowData={params.rowData}
-          noRowsOverlayComponent={GridNoRowsOverlay}
-          noRowsOverlayComponentParams={{
-            rowData: params.rowData,
-            noRowsOverlayText: params.noRowsOverlayText,
+          noRowsOverlayComponent={(event: AgGridEvent) => {
+            let rowCount = 0;
+            event.api.forEachNode(() => rowCount++);
+            return (
+              <GridNoRowsOverlay
+                rowCount={rowCount}
+                filteredRowCount={event.api.getDisplayedRowCount()}
+                noRowsOverlayText={params.noRowsOverlayText}
+              />
+            );
           }}
           onModelUpdated={onModelUpdated}
           onGridReady={onGridReady}

package/src/components/GridCell.tsx

@@ -1,6 +1,6 @@
 import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
 import { SuppressKeyboardEventParams, ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
-import { forwardRef, useContext } from "react";
+import { ReactElement, forwardRef, useContext } from "react";
 
 import { GridPopoverContextProvider } from "../contexts/GridPopoverContextProvider";
 import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
@@ -18,7 +18,7 @@ import {
 
 export interface GenericCellEditorProps<E> {
   multiEdit?: boolean;
-  editor?: (editorProps: E) => JSX.Element;
+  editor?: (editorProps: E) => ReactElement;
   editorParams?: E;
 }
 
@@ -59,7 +59,7 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
 // This is so that typescript retains the row type to pass to the GridCells
 export interface ColDefT<RowType extends GridBaseRow> extends ColDef {
   _?: RowType;
-  editor?: (editorProps: any) => JSX.Element;
+  editor?: (editorProps: any) => ReactElement;
 }
 
 export const suppressCellKeyboardEvents = (e: SuppressKeyboardEventParams) => {
@@ -106,7 +106,7 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
   custom?: {
     multiEdit?: boolean;
     preventAutoEdit?: boolean;
-    editor?: (editorProps: Props) => JSX.Element;
+    editor?: (editorProps: Props) => ReactElement;
     editorParams?: Props;
   },
 ): ColDefT<RowType> => {
@@ -164,7 +164,7 @@ export interface CellEditorCommon {
   className?: string | undefined;
 }
 
-export const GenericCellEditorComponentWrapper = (editor?: (props: any) => JSX.Element) => {
+export const GenericCellEditorComponentWrapper = (editor?: (props: any) => ReactElement) => {
   const obj = { editor };
   return forwardRef(function GenericCellEditorComponentFr(cellEditorParams: ICellEditorParams, _) {
     const valueFormatted = cellEditorParams.formatValue

package/src/components/GridCellMultiEditor.tsx

@@ -1,13 +1,13 @@
 import { CellEditorSelectorResult } from "ag-grid-community/dist/lib/entities/colDef";
 import { ICellEditorParams } from "ag-grid-community/dist/lib/interfaces/iCellEditor";
-import { ComponentProps } from "react";
+import { ComponentProps, ReactElement } from "react";
 
 import { GridBaseRow } from "./Grid";
 import { ColDefT, GenericCellEditorComponentWrapper, GridCell } from "./GridCell";
 import { GridCellMultiSelectClassRules } from "./GridCellMultiSelectClassRules";
 import { GenericCellColDef } from "./gridRender";
 
-export const Editor = <FN extends (param: any) => JSX.Element>(props: {
+export const Editor = <FN extends (param: any) => ReactElement>(props: {
   multiEdit: boolean;
   editor: FN;
   editorParams: ComponentProps<FN>;

package/src/components/GridIcon.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { ReactElement } from "react";
 
 import { LuiIcon } from "@linzjs/lui";
 import { IconName, IconSize } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
@@ -9,7 +10,7 @@ export const GridIcon = (props: {
   size?: IconSize;
   disabled?: boolean;
   className?: string;
-}): JSX.Element => (
+}): ReactElement => (
   <LuiIcon
     name={props.icon}
     title={props.title}

package/src/components/GridNoRowsOverlay.tsx

@@ -1,12 +1,11 @@
-import { isEmpty } from "lodash-es";
-
-export const GridNoRowsOverlay = (params: {
-  rowData: any[] | null | undefined;
+export interface GridNoRowsOverlayProps {
+  rowCount: number | undefined | null;
+  filteredRowCount: number;
   noRowsOverlayText: string | undefined;
-}) => (
-  <span>
-    {isEmpty(params.rowData)
-      ? params.noRowsOverlayText ?? "There are currently no rows"
-      : "All rows have been filtered"}
-  </span>
-);
+}
+
+export const GridNoRowsOverlay = (params: GridNoRowsOverlayProps) => {
+  if (params.rowCount === 0) return <span>{params.noRowsOverlayText ?? "There are currently no rows"}</span>;
+  if (params.filteredRowCount === 0) return <span>All rows have been filtered</span>;
+  return <span />;
+};

package/src/components/GridPopoverHook.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { ReactElement, useCallback, useContext, useEffect, useRef, useState } from "react";
 
 import { GridContext } from "../contexts/GridContext";
 import { useGridPopoverContext } from "../contexts/GridPopoverContext";
@@ -10,8 +10,8 @@ import { GridBaseRow } from "./Grid";
 export interface GridPopoverHookProps<RowType> {
   className: string | undefined;
   invalid?: () =>
-    | Promise<JSX.Element | boolean | string | null | undefined>
-    | JSX.Element
+    | Promise<ReactElement | boolean | string | null | undefined>
+    | ReactElement
     | boolean
     | string
     | null
@@ -59,7 +59,7 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
   );
 
   const popoverWrapper = useCallback(
-    (children: JSX.Element) => {
+    (children: ReactElement) => {
       return (
         <>
           {anchorRef.current && (

package/src/components/GridWrapper.tsx

@@ -1,11 +1,10 @@
-import { ReactNode } from "react";
+import { PropsWithChildren } from "react";
 
 export interface GridWrapperProps {
-  children: ReactNode;
   maxHeight?: number | string;
 }
 
-export const GridWrapper = ({ children, maxHeight }: GridWrapperProps) => (
+export const GridWrapper = ({ children, maxHeight }: PropsWithChildren<GridWrapperProps>) => (
   <div className={"Grid-wrapper"} style={{ maxHeight }}>
     {children}
   </div>

package/src/components/PostSortRowsHook.ts

@@ -1,6 +1,6 @@
-import { RowNode } from "ag-grid-community";
+import { IRowNode } from "ag-grid-community";
 import { ColumnState } from "ag-grid-community/dist/lib/columns/columnModel";
-import { PostSortRowsParams } from "ag-grid-community/dist/lib/entities/iCallbackParams";
+import { PostSortRowsParams } from "ag-grid-community/dist/lib/interfaces/iCallbackParams";
 import { isEmpty } from "lodash-es";
 import { useCallback, useContext, useRef } from "react";
 
@@ -44,7 +44,7 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
 
       const previousRowSortIndex = previousRowSortIndexRef.current;
 
-      const hashNode = (node: RowNode | undefined) => {
+      const hashNode = (node: IRowNode | undefined) => {
         return node ? JSON.stringify(node.data) : "";
       };
 
@@ -124,7 +124,7 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
         }
       } else {
         let firstChangedNodeIndex = -1;
-        let lastNewNode: RowNode | undefined = undefined;
+        let lastNewNode: IRowNode | undefined = undefined;
         let changedRowCount = 0;
         let newRowCount = 0;
         let index = 0;

package/src/components/gridFilter/GridFilterButtons.tsx

@@ -1,5 +1,5 @@
 import clsx, { ClassValue } from "clsx";
-import { useMemo, useState } from "react";
+import { ReactElement, useMemo, useState } from "react";
 
 import { LuiButton, LuiButtonGroup } from "@linzjs/lui";
 import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
@@ -24,7 +24,7 @@ export const GridFilterButtons = <RowType extends GridBaseRow>({
   className,
   luiButtonProps,
   options,
-}: GridFilterButtonsProps<RowType>): JSX.Element => {
+}: GridFilterButtonsProps<RowType>): ReactElement => {
   // Select defaultSelected option, otherwise first option.  If no options select none.
   const [selectedOption, setSelectedOption] = useState(options.find((option) => option.defaultSelected) ?? options[0]);
 

package/src/components/gridFilter/GridFilterColumnsToggle.tsx

@@ -1,5 +1,5 @@
 import { isEmpty } from "lodash-es";
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { ReactElement, useCallback, useContext, useEffect, useMemo, useState } from "react";
 
 import { LuiCheckboxInput, LuiIcon } from "@linzjs/lui";
 
@@ -14,7 +14,7 @@ export interface GridFilterColumnsToggleProps {
   saveState?: boolean;
 }
 
-export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsToggleProps): JSX.Element => {
+export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsToggleProps): ReactElement => {
   const [loaded, setLoaded] = useState(false);
   const { getColumns, getColumnIds, invisibleColumnIds, setInvisibleColumnIds } = useContext(GridContext);
 

package/src/components/gridFilter/GridFilters.tsx

@@ -1,7 +1,5 @@
-import { ReactNode } from "react";
+import { PropsWithChildren } from "react";
 
-export interface GridFiltersProps {
-  children: ReactNode;
-}
-
-export const GridFilters = ({ children }: GridFiltersProps) => <div className="Grid-container-filters">{children}</div>;
+export const GridFilters = ({ children }: PropsWithChildren) => (
+  <div className="Grid-container-filters">{children}</div>
+);

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,6 +1,6 @@
 import debounce from "debounce-promise";
 import { isEmpty } from "lodash-es";
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
@@ -23,7 +23,7 @@ export interface GridPopoutEditDropDownSelectedItem<RowType> {
 
 interface FinalSelectOption {
   value: any;
-  label?: JSX.Element | string;
+  label?: ReactElement | string;
   disabled?: boolean | string;
   subComponent?: (props: any, ref: any) => any;
 }
@@ -189,8 +189,8 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
     dontSaveOnExternalClick: true,
   });
 
-  let lastHeader: JSX.Element | null = null;
-  let showHeader: JSX.Element | null = null;
+  let lastHeader: ReactElement | null = null;
+  let showHeader: ReactElement | null = null;
 
   return popoverWrapper(
     <>

package/src/components/gridForm/GridFormMessage.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useEffect, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
@@ -8,13 +8,13 @@ import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
 
 export interface GridFormMessageProps<RowType extends GridBaseRow> extends CellEditorCommon {
-  message: (selectedRows: RowType[]) => Promise<string | JSX.Element> | string | JSX.Element;
+  message: (selectedRows: RowType[]) => Promise<string | ReactElement> | string | ReactElement;
 }
 
 export const GridFormMessage = <RowType extends GridBaseRow>(props: GridFormMessageProps<RowType>) => {
   const { selectedRows } = useGridPopoverContext<RowType>();
 
-  const [message, setMessage] = useState<string | JSX.Element | null>(null);
+  const [message, setMessage] = useState<string | ReactElement | null>(null);
   const { popoverWrapper } = useGridPopoverHook({ className: props.className });
 
   useEffect(() => {

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -3,6 +3,7 @@ import {
   Dispatch,
   Fragment,
   KeyboardEvent,
+  ReactElement,
   SetStateAction,
   useCallback,
   useEffect,
@@ -31,7 +32,7 @@ type HeaderGroupType = Record<string, MultiSelectOption[]> | undefined;
 export interface MultiSelectOption {
   value: any;
   label?: string;
-  subComponent?: (props: any) => JSX.Element;
+  subComponent?: (props: any) => ReactElement;
   subValue?: any;
   filter?: string;
   checked?: boolean;