@linzjs/step-ag-grid 16.0.0 → 17.0.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "16.0.0",
+  "version": "17.0.1",
   "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": {
@@ -81,80 +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": "^7.2.2",
-    "@storybook/addon-interactions": "^7.2.2",
+    "@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.2",
-    "@storybook/react": "^7.2.2",
-    "@storybook/react-webpack5": "^7.2.2",
+    "@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/jest": "^29.5.3",
     "@types/lodash-es": "^4.17.8",
-    "@types/node": "^20.4.9",
+    "@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.60.0",
-    "babel-jest": "^29.5.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "babel-jest": "^29.6.2",
     "babel-preset-react-app": "^10.0.1",
     "chromatic": "^6.21.0",
-    "conventional-changelog-conventionalcommits": "^5.0.0",
+    "conventional-changelog-conventionalcommits": "^6.1.0",
     "css-loader": "^6.8.1",
-    "eslint": "^8.41.0",
-    "eslint-config-prettier": "^8.8.0",
+    "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-storybook": "^0.6.13",
-    "eslint-plugin-testing-library": "^5.11.1",
+    "eslint-plugin-testing-library": "^6.0.0",
     "jest": "^29.6.2",
-    "jest-canvas-mock": "^2.5.1",
-    "jest-environment-jsdom": "^29.5.0",
+    "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",
-    "storybook": "^7.2.2",
+    "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 { AgGridEvent, 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]);
 
@@ -471,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);
       }
@@ -551,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>());
 
@@ -583,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}
@@ -602,8 +611,8 @@ export const Grid = ({
           onColumnVisible={() => {
             setInitialContentSize();
           }}
-          onRowDataChanged={onRowDataChanged}
-          onCellKeyPress={onCellKeyPress}
+          onRowDataUpdated={onRowDataChanged}
+          onCellKeyDown={onCellKeyPress}
           onCellClicked={onCellClicked}
           onCellDoubleClicked={onCellDoubleClick}
           onCellEditingStarted={refreshSelectedRows}

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/GridNoRowsOverlay.tsx

@@ -1,8 +1,10 @@
-export const GridNoRowsOverlay = (params: {
+export interface GridNoRowsOverlayProps {
   rowCount: number | undefined | null;
   filteredRowCount: number;
   noRowsOverlayText: string | undefined;
-}) => {
+}
+
+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;

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -1,5 +1,5 @@
 import { isEmpty } from "lodash-es";
-import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, ReactElement, useCallback, useEffect, useRef, useState } from "react";
 
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
@@ -28,11 +28,11 @@ export interface SelectedMenuOptionResult<RowType extends GridBaseRow> extends M
 }
 
 export interface MenuOption<RowType extends GridBaseRow> {
-  label: JSX.Element | string | MenuSeparatorType;
+  label: ReactElement | string | MenuSeparatorType;
   action?: (props: { selectedRows: RowType[]; menuOption: SelectedMenuOptionResult<RowType> }) => Promise<void>;
   disabled?: string | boolean;
   hidden?: boolean;
-  subComponent?: (props: any) => JSX.Element;
+  subComponent?: (props: any) => ReactElement;
 }
 
 /**
@@ -141,7 +141,7 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
                     disabled={!!item.disabled}
                     title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
                   >
-                    {item.label as JSX.Element | string}
+                    {item.label as ReactElement | string}
                   </MenuItem>
                   {item.subComponent && subComponentSelected === item && (
                     <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>

package/src/components/gridForm/GridFormSubComponentTextArea.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useCallback, useContext, useEffect } from "react";
+import { ReactElement, useCallback, useContext, useEffect } from "react";
 
 import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
 import { TextAreaInput } from "../../lui/TextAreaInput";
@@ -19,7 +19,7 @@ export interface GridSubComponentTextAreaProps<RowType extends GridBaseRow>
 
 export const GridFormSubComponentTextArea = <RowType extends GridBaseRow>(
   props: GridSubComponentTextAreaProps<RowType>,
-): JSX.Element => {
+): ReactElement => {
   const { value, data, setValue, setValid, context } = useContext(GridSubComponentContext);
 
   const helpText = props.helpText ?? "Press tab to save";

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect } from "react";
+import { ReactElement, useCallback, useContext, useEffect } from "react";
 
 import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
@@ -17,7 +17,7 @@ export interface GridFormSubComponentTextInputProps<RowType extends GridBaseRow>
 
 export const GridFormSubComponentTextInput = <RowType extends GridBaseRow>(
   props: GridFormSubComponentTextInputProps<RowType>,
-): JSX.Element => {
+): ReactElement => {
   const { value, setValue, setValid, data, context } = useContext(GridSubComponentContext);
 
   const helpText = props.helpText ?? "Press enter or tab to save";

package/src/components/gridForm/GridFormTextArea.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { ReactElement, useCallback, useMemo, useState } from "react";
 
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { TextAreaInput } from "../../lui/TextAreaInput";
@@ -16,7 +16,7 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow>
   helpText?: string;
 }
 
-export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>): JSX.Element => {
+export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>): ReactElement => {
   const { field, value: initialVale, data } = useGridPopoverContext<RowType>();
 
   const initValue = useMemo(() => (initialVale == null ? "" : `${initialVale}`), [initialVale]);

package/src/components/gridPopoverEdit/GridPopoverMessage.ts

@@ -9,7 +9,7 @@ export const GridPopoverMessage = <RowType extends GridBaseRow>(
 ): ColDefT<RowType> =>
   GridCell(
     {
-      resizable: false,
+      resizable: true,
       ...colDef,
       cellRendererParams: {
         singleClickEdit: true,

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -5,6 +5,7 @@ import {
   ValueFormatterParams,
   ValueGetterParams,
 } from "ag-grid-community/dist/lib/entities/colDef";
+import { ReactElement } from "react";
 
 import { GridBaseRow } from "../Grid";
 import { ColDefT } from "../GridCell";
@@ -40,7 +41,7 @@ export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDefT<
 
 export interface GenericCellRendererParams<RowType extends GridBaseRow> {
   singleClickEdit?: boolean;
-  rightHoverElement?: JSX.Element | undefined;
+  rightHoverElement?: ReactElement | undefined;
   editAction?: (selectedRows: RowType[]) => void;
   shortcutKeys?: Record<string, ((params: SuppressKeyboardEventParams) => boolean | void) | undefined>;
   warning?: (props: RowICellRendererParams<RowType>) => string | string[] | boolean | null | undefined;