Created a new HoC (GridContainer) to determinate and calculate the wi…

…dth and other necessary measures.

Horizontal scroll is now broken but arrow navigation is in sync and perfectly working
Added a custom alignment on the storybook demo, a delete row and expanded header tooltipProps to receive PaperProps for the underlying component. Tooltips now doesn't come with arrow by default
Removed onCellClick from GridWrapper and instead we invoke directly selectCell.
useCallbacks were also removed in general where it was not needed and affecting performance
Added enter keyboard control to select checkbox
Text and Numerical editor have a resize-detector that stops editing if the target anchoring changes
Added props.width on ColumnGrid to recomputeGridSizes when the width changes

package.json

@@ -32,17 +32,20 @@
     "@material-ui/pickers": "^3.2.10",
     "@testing-library/react-hooks": "^3.4.2",
     "@types/react-virtualized": "^9.21.10",
+    "@xobotyi/scrollbar-width": "^1.9.5",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
     "clipboardy": "^2.3.0",
     "clsx": "^1.1.1",
     "dayjs": "^1.9.1",
+    "element-resize-detector": "^1.2.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
     "json2csv": "^5.0.1",
     "react-datepicker": "^3.2.2",
     "react-virtualized": "^9.21.2",
+    "resize-detector": "^0.2.2",
     "rxjs": "^6.6.3"
   },
   "devDependencies": {

src/cellMeasurer/CellMeasureWrapper.tsx

@@ -3,8 +3,7 @@ import { CellMeasurer } from 'react-virtualized'
 import { CellMeasureWrapperProps } from './cellMeasureWrapperProps'
 import { getMaxSum } from './utils/getMaxSum'
 
-const CellMeasureWrapper = React.memo(
-	({ rowSpan, colSpan, cellRenderer, rendererProps, style, ...props }: CellMeasureWrapperProps) => {
+function CellMeasureWrapper ({ rowSpan, colSpan, cellRenderer, rendererProps, style, ...props }: CellMeasureWrapperProps) {
 		const initializeStyles = () => {
 			const defaultStyle: React.CSSProperties = {
 				transform: 'translate3d(0, 0, 0)',
@@ -58,6 +57,9 @@ const CellMeasureWrapper = React.memo(
 		}
 
 		const spanningStyle = initializeStyles()
+		if (isNaN(Number(spanningStyle.width))){
+			console.error("WIDTH NAN AT SPANNING STYLE")
+		}
 		return (
 			<CellMeasurer {...props}>
 				{({ registerChild }) =>
@@ -69,7 +71,6 @@ const CellMeasureWrapper = React.memo(
 				}
 			</CellMeasurer>
 		)
-	},
-)
+}
 
 export default CellMeasureWrapper

src/cellMeasurer/cellMeasureWrapperProps.ts

@@ -1,13 +1,12 @@
 import React from 'react'
-import { RegisterChildFn } from '../core/interfaces/registerChildFn'
-import { GetColumnWidthFn } from '../core/interfaces/getColumnWidthFn'
 import { CellMeasurerCache } from 'react-virtualized'
-import { GridCell } from '../types/row.interface'
 import { MeasuredCellParent } from 'react-virtualized/dist/es/CellMeasurer'
+import { GetColumnWidthFn } from '../gridWrapper/interfaces/getColumnWidthFn'
+import { GridCell } from '../gridWrapper/interfaces/gridCell'
 
 interface CellMeasureRendererProps {
-	style: React.CSSProperties
-	ref?: RegisterChildFn
+	// style: React.CSSProperties
+	// ref?: RegisterChildFn
 }
 
 export interface MeasurerRendererProps {
@@ -18,7 +17,9 @@ export interface MeasurerRendererProps {
 	getColumnWidth: GetColumnWidthFn
 }
 
-export type CellMeasureRenderer = (props: CellMeasureRendererProps) => any
+export interface CellMeasureRenderer {
+	(props: any): unknown
+}
 
 export interface CellMeasureWrapperProps {
 	rowSpan?: number

src/columnGrid/ColumnGrid.tsx

@@ -43,11 +43,11 @@ export const ColumnGrid = React.memo(
 		}))
 		const gridRef = useRef<Grid | null>(null)
 
-		// clear cache and recompute when data changes
+		// clear cache and recompute when data changes OR when the container width changes
 		useEffect(() => {
-			cache?.clearAll()
+			cache.clearAll()
 			gridRef.current?.recomputeGridSize()
-		}, [props.data])
+		}, [props.data, props.width])
 
 		function getSortIndicatorComponent(order: string | undefined) {
 			if (!order) {
@@ -68,7 +68,7 @@ export const ColumnGrid = React.memo(
 				const children = renderer ? (
 					(renderer(cell) as any)
 				) : cell.tooltip ? (
-					<Tooltip title={title} arrow placement={'top'} {...cell.tooltipProps}>
+					<Tooltip title={title} placement={'top'} {...cell.tooltipProps}>
 						<span>{title}</span>
 					</Tooltip>
 				) : (
@@ -90,6 +90,7 @@ export const ColumnGrid = React.memo(
 					headerClassName = clsx(headerClassName, props.theme?.currentColumnClass)
 				}
 
+
 				return (
 					<div
 						ref={ref}
@@ -149,11 +150,16 @@ export const ColumnGrid = React.memo(
 					userSelect: 'none',
 				}
 
+
 				const rendererProps: MeasurerRendererProps = {
 					...args,
 					cell,
 					getColumnWidth: props.getColumnWidth,
 				}
+
+				if (isNaN(Number(style.width))){
+					console.error("WIDTH NAN AT CELL MEASURER WRAPPER STYLE")
+				}
 				return (
 					<CellMeasurer
 						cache={cache}
@@ -198,6 +204,7 @@ export const ColumnGrid = React.memo(
 				overscanColumnCount={props.overscanColumnCount ?? 2}
 				width={props.width}
 				columnWidth={props.getColumnWidth}
+				height={100} //Its going to be ignored due to autoHeight
 				autoHeight
 			/>
 		)

src/columnGrid/column-grid-props.ts

@@ -14,9 +14,8 @@ export interface ColumnGridProps {
 	getColumnWidth: ({ index }: { index: number }) => number
 
 	width: number
-	scrollLeft: number
-	isScrolling: boolean
-	height: number
+	// scrollLeft: number
+	// isScrolling: boolean
 	theme?: GridTheme
 	coords: NavigationCoords
 	/** @default StretchMode.None  */

src/columnGrid/types/header.type.ts

@@ -2,6 +2,7 @@ import React from 'react'
 import { TooltipProps } from '@material-ui/core'
 import { NavigationCoords } from '../../navigation/types/navigation-coords.type'
 import { EditorRef } from '../../editorManager/useEditorManager'
+import { PopperProps } from '@material-ui/core/Popper/Popper'
 
 export interface CellRendererProps<TRow = unknown> {
 	row: TRow
@@ -44,6 +45,7 @@ export interface Header<Key = string> {
 		open?: boolean
 		/** @default top **/
 		placement?: TooltipProps['placement']
+		PopperProps?: Partial<PopperProps>
 	}
 	/** @default 500 **/
 	maxLength?: number

src/editorManager/components/NumericEditor.tsx

@@ -1,14 +1,15 @@
 import React, {
 	CSSProperties,
 	forwardRef,
-	useCallback,
+	useCallback, useEffect,
 	useImperativeHandle,
 	useMemo,
 	useState,
 } from 'react'
 import { EditorProps } from '../editorProps'
 import { Popover, TextareaAutosize, TextField } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
+import { addListener, removeListener } from 'resize-detector'
 
 const useStyles = makeStyles(() => ({
 	input: {
@@ -31,6 +32,19 @@ export const NumericEditor = forwardRef(
 		const [editingValue, setEditingValue] = useState<string>(
 			isNaN(Number(value)) ? '0' : String(value),
 		)
+
+		function onAnchorResize() {
+			stopEditing()
+		}
+
+		//Watch for DOM Changes on the target anchor and close editor because Popover does not change
+		useEffect(() => {
+			addListener(anchorRef, onAnchorResize)
+			return () => {
+				removeListener(anchorRef, onAnchorResize)
+			}
+		}, [])
+
 		useImperativeHandle(
 			componentRef,
 			() => ({

src/editorManager/components/TextEditor.tsx

@@ -13,6 +13,7 @@ import { NavigationKey } from '../enums/navigation-key.enum'
 import { isCaretAtEndPosition } from '../utils/isCaretAtEndPosition'
 import { EditorProps } from '../editorProps'
 import { makeStyles } from '@material-ui/core/styles'
+import { addListener, removeListener } from 'resize-detector'
 
 const useStyles = makeStyles(() => ({
 	input: {
@@ -32,6 +33,19 @@ export const TextEditor = forwardRef(
 	({ value, stopEditing, anchorRef, maxLength, validatorHook }: EditorProps, componentRef) => {
 		const classes = useStyles()
 		const [editingValue, setEditingValue] = useState(String(value))
+
+		function onAnchorResize() {
+			stopEditing()
+		}
+
+		//Watch for DOM Changes on the target anchor and close editor because Popover does not change
+		useEffect(() => {
+			addListener(anchorRef, onAnchorResize)
+			return () => {
+				removeListener(anchorRef, onAnchorResize)
+			}
+		}, [])
+
 		useImperativeHandle(
 			componentRef,
 			() => ({

src/editorManager/editorProps.ts

@@ -5,7 +5,7 @@ import { StopEditingParams } from './useEditorManager'
 export interface EditorProps {
 	value: string
 	stopEditing: (params?: StopEditingParams) => void
-	anchorRef: Element
+	anchorRef: HTMLElement
 	cellStyle?: CSSProperties
 	maxLength: number
 	validatorHook?: (value: unknown) => boolean

src/editorManager/useEditorManager.tsx

@@ -24,7 +24,7 @@ export interface IEditorState {
 	rowIndex: number
 	colIndex: number
 	initialValue: React.ReactText
-	targetElement: Element
+	targetElement: HTMLElement
 	validatorHook?: (value: unknown) => boolean
 	/**
 	 * Useful to prevent navigation interception on second arms
@@ -46,7 +46,7 @@ export interface EditorManagerProps<TRow = unknown> {
 
 export interface BeginEditingParams {
 	coords: NavigationCoords
-	targetElement: Element
+	targetElement: HTMLElement
 	defaultKey?: string
 }
 
@@ -65,6 +65,7 @@ export function useEditorManager<TRow>({ getColumnAt, rows, onCellChange }: Edit
 	const [editorNode, setEditorNode] = useState<JSX.Element | null>(null)
 	const [scheduleMove, setScheduleMove] = useState<string | null>(null)
 
+
 	//Effect used to perform the move (keyPress) after editor closes
 	useEffect(() => {
 		if (!scheduleMove) {