Fixed text and numeric editor marginThreshold set to 0

Renamed fixedColumnWidths onto columnWidths
Created a new logger
Renamed createFixedWidthMapping.ts into createColumnWidthsMapping.ts
Added white text on the logger to make the context more visible
Added a check on logger to check object or array and print directly

src/ApolloSpreadsheet.tsx

@@ -19,6 +19,7 @@ import { useApiEventHandler } from './api/useApiEventHandler'
 import { CELL_CLICK, CELL_DOUBLE_CLICK } from './api/eventConstants'
 import { ApolloSpreadsheetProps } from './ApolloSpreadsheetProps'
 import { useSort } from './sort/useSort'
+import { useLogger } from "./logger";
 
 const useStyles = makeStyles(() => ({
 	root: {
@@ -29,6 +30,7 @@ const useStyles = makeStyles(() => ({
 
 export const ApolloSpreadSheet = forwardRef(
 	(props: ApolloSpreadsheetProps, componentRef: React.Ref<HTMLDivElement>) => {
+		const logger = useLogger('ApolloSpreadSheet')
 		const classes = useStyles()
 		const minColumnWidth = props.minColumnWidth ?? 30
 		const [gridFocused, setGridFocused] = useState(true)
@@ -94,6 +96,7 @@ export const ApolloSpreadSheet = forwardRef(
 				return
 			}
 			if (props.outsideClickDeselects) {
+				logger.debug('Grid click away detected.')
 				setGridFocused(false)
 				apiRef.current.selectCell({
 					rowIndex: -1,
@@ -105,6 +108,7 @@ export const ApolloSpreadSheet = forwardRef(
 		//Detect if any element is clicked again to enable focus
 		const onCellMouseHandler = useCallback(() => {
 			if (!gridFocused) {
+				logger.debug('Grid focus restored.')
 				setGridFocused(true)
 			}
 		}, [gridFocused])

src/api/useApiEventHandler.ts

@@ -1,13 +1,16 @@
 import { useEffect  } from 'react'
 import { ApiRef } from './types/apiRef'
+import { useLogger } from "../logger";
 
 export function useApiEventHandler(
 	apiRef: ApiRef,
 	eventName: string,
 	handler?: (args: any) => void,
 ) {
+	const logger = useLogger('useApiEventHandler')
 	useEffect(() => {
 		if (handler && eventName) {
+			logger.debug(`Subscribing to ${eventName} with handler reference ${handler.name}`)
 			return apiRef.current.subscribeEvent(eventName, handler)
 		}
 

src/api/useApiExtends.ts

@@ -1,8 +1,10 @@
 import { useEffect } from "react"
 import { ApiRef } from "./types/apiRef"
 import { GridApi } from "./types/gridApi"
+import { useLogger } from "../logger"
 
 export function useApiExtends(apiRef: ApiRef, apiMethods: Partial<GridApi>, apiName: string) {
+	const logger = useLogger('useApiExtends')
 	useEffect(() => {
 		let hasMethodsInstalled = true
 		if (!apiRef.current.isInitialised) {
@@ -16,7 +18,7 @@ export function useApiExtends(apiRef: ApiRef, apiMethods: Partial<GridApi>, apiN
 		})
 
 		if (!hasMethodsInstalled) {
-			console.log(`Adding ${apiName} to apiRef`)
+			logger.debug(`Adding ${apiName} to apiRef`)
 			apiRef.current = Object.assign(apiRef.current, apiMethods) as GridApi
 		}
 	}, [apiRef.current.isInitialised, apiRef, apiMethods, apiName])

src/api/useApiFactory.ts

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from "react"
 import { useApiExtends } from './useApiExtends'
 import { ApiRef } from './types/apiRef'
 import { GridTheme } from "../types"
+import { useLogger } from "../logger"
 
 /**
  * Initializes a new api instance
@@ -13,6 +14,7 @@ export function useApiFactory(
 	apiRef: ApiRef,
 	theme?: GridTheme
 ): boolean {
+	const logger = useLogger('useApiFactory')
 	const [initialised, setInit] = useState(false)
 
 	const publishEvent = useCallback(
@@ -24,19 +26,19 @@ export function useApiFactory(
 
 	const subscribeEvent = useCallback(
 		(event: string, handler: (param: any) => void): (() => void) => {
-			console.debug(`Binding ${event} event`)
+			logger.debug(`Binding ${event} event`)
 			apiRef.current.on(event, handler)
 			const api = apiRef.current
 			return () => {
-				console.debug(`Clearing ${event} event`)
+				logger.debug(`Clearing ${event} event`)
 				api.removeListener(event, handler)
 			}
 		},
 		[apiRef],
 	)
 
 	useEffect(() => {
-		console.debug('Initializing grid api.')
+		logger.debug('Initializing grid api.')
 		apiRef.current.isInitialised = true
 		apiRef.current.rootElementRef = gridRootRef
 		apiRef.current.theme = theme
@@ -45,7 +47,7 @@ export function useApiFactory(
 		const api = apiRef.current
 
 		return () => {
-			console.debug('Clearing all events listeners')
+			logger.debug('Clearing all events listeners')
 			api.removeAllListeners()
 		}
 	}, [gridRootRef, apiRef, theme])

src/api/useApiRef.ts

@@ -2,11 +2,13 @@ import { useRef } from 'react'
 import { EventEmitter } from 'events'
 import { ApiRef } from "./types/apiRef"
 import { GridApi } from "./types/gridApi"
+import { useLogger } from "../logger"
 
 /**
  * Hook that instantiate an ApiRef to pass in component prop.
  */
 export function useApiRef(): ApiRef {
-	console.debug('Initializing grid api with EventEmitter.')
+	const logger = useLogger('useApiRef')
+	logger.debug('Initializing grid api with EventEmitter.')
 	return useRef<GridApi>(new EventEmitter() as GridApi)
 }

src/cellMeasurer/CellMeasureWrapper.tsx

@@ -10,7 +10,6 @@ function CellMeasureWrapper ({ rowSpan, colSpan, cellRenderer, rendererProps, st
 				alignItems: 'center',
 				overflow: 'hidden',
 				wordBreak: 'break-word',
-				// textOverflow: 'ellipsis',
 				textAlign: 'center',
 			}
 			const { rowIndex, cache } = props

src/columnGrid/__tests__/createFixedWidthMapping.spec.ts

@@ -1,4 +1,4 @@
-import { createFixedWidthMapping } from '../utils/createFixedWidthMapping'
+import { createColumnWidthsMapping } from '../utils/createColumnWidthsMapping'
 import { StretchMode } from '../../types/stretch-mode.enum'
 import { Column } from '../types/header.type'
 import { createColumnMock } from '../__mocks__/column-mock'
@@ -9,7 +9,7 @@ describe('createFixedWidthMapping()', () => {
 			totalSize: 0,
 			mapping: {},
 		}
-		const result = createFixedWidthMapping([], 0, 0, StretchMode.None, 0)
+		const result = createColumnWidthsMapping([], 0, 0, StretchMode.None, 0)
 		expect(result).toEqual(expected)
 	})
 
@@ -26,7 +26,7 @@ describe('createFixedWidthMapping()', () => {
 				0: 200,
 			},
 		}
-		const result = createFixedWidthMapping(columns, 1000, 10, StretchMode.None, 0)
+		const result = createColumnWidthsMapping(columns, 1000, 10, StretchMode.None, 0)
 		expect(result).toEqual(expected)
 	})
 
@@ -45,7 +45,7 @@ describe('createFixedWidthMapping()', () => {
 			}
 		}
 		//Total = 955 and column uses 950 but 5 are reversed to scroll so the other column must be at 0
-		const result = createFixedWidthMapping(columns, 975, 10, StretchMode.All, 5)
+		const result = createColumnWidthsMapping(columns, 975, 10, StretchMode.All, 5)
 		expect(result).toEqual(expected)
 	})
 
@@ -62,7 +62,7 @@ describe('createFixedWidthMapping()', () => {
 				0: 450,
 			},
 		}
-		const result = createFixedWidthMapping(columns, 500, 100, StretchMode.None, 0)
+		const result = createColumnWidthsMapping(columns, 500, 100, StretchMode.None, 0)
 		expect(result).toEqual(expected)
 	})
 
@@ -75,9 +75,9 @@ describe('createFixedWidthMapping()', () => {
 				createColumnMock(),
 			]
 			const expected = { totalSize: 10, mapping: { 0: 10 } }
-			const resultOfAll = createFixedWidthMapping(columns, 200, 5, StretchMode.All, 0)
-			const resultOfLast = createFixedWidthMapping(columns, 200, 5, StretchMode.Last, 0)
-			const resultOfNone = createFixedWidthMapping(columns, 200, 5, StretchMode.None, 0)
+			const resultOfAll = createColumnWidthsMapping(columns, 200, 5, StretchMode.All, 0)
+			const resultOfLast = createColumnWidthsMapping(columns, 200, 5, StretchMode.Last, 0)
+			const resultOfNone = createColumnWidthsMapping(columns, 200, 5, StretchMode.None, 0)
 			expect(resultOfAll).toEqual(expected)
 			expect(resultOfLast).toEqual(expected)
 			expect(resultOfNone).toEqual(expected)
@@ -96,7 +96,7 @@ describe('createFixedWidthMapping()', () => {
 					0: 450,
 				},
 			}
-			const result = createFixedWidthMapping(columns, containerWidth, 1, StretchMode.None, 0)
+			const result = createColumnWidthsMapping(columns, containerWidth, 1, StretchMode.None, 0)
 			expect(result).toEqual(expected)
 		})
 
@@ -113,7 +113,7 @@ describe('createFixedWidthMapping()', () => {
 					1: 150,
 				},
 			}
-			const result = createFixedWidthMapping(columns, containerWidth, 1, StretchMode.All, 0)
+			const result = createColumnWidthsMapping(columns, containerWidth, 1, StretchMode.All, 0)
 			expect(result).toEqual(expected)
 		})
 
@@ -131,7 +131,7 @@ describe('createFixedWidthMapping()', () => {
 					1: 200,
 				},
 			}
-			const result = createFixedWidthMapping(columns, containerWidth, 1, StretchMode.All, 0)
+			const result = createColumnWidthsMapping(columns, containerWidth, 1, StretchMode.All, 0)
 			expect(result).toEqual(expected)
 		})
 
@@ -148,7 +148,7 @@ describe('createFixedWidthMapping()', () => {
 					1: 200,
 				},
 			}
-			const result = createFixedWidthMapping(columns, containerWidth, 1, StretchMode.Last, 0)
+			const result = createColumnWidthsMapping(columns, containerWidth, 1, StretchMode.Last, 0)
 			expect(result).toEqual(expected)
 		})
 	})

src/columnGrid/useHeaders.tsx

@@ -5,8 +5,9 @@ import { StretchMode } from '../types/stretch-mode.enum'
 import { insertDummyCells } from '../gridWrapper/utils/insertDummyCells'
 import { ApiRef, COLUMNS_CHANGED, useApiExtends } from '../api'
 import { ColumnApi } from '../api/types/columnApi'
+import { useLogger } from "../logger";
 
-export interface FixedColumnWidthRecord {
+export interface ColumnWidthRecord {
 	totalSize: number
 	mapping: FixedColumnWidthDictionary
 }
@@ -46,6 +47,7 @@ export function useHeaders({
 	apiRef,
 	initialised,
 }: Props): HeadersState {
+	const logger = useLogger('useHeaders')
 	const columnsRef = useRef<Column[]>(columns)
 	const nestedHeadersRef = useRef<NestedHeader[][] | undefined>(nestedHeaders)
 	const [gridHeaders, setGridHeaders] = useState<GridHeader[][]>([[]])
@@ -57,6 +59,7 @@ export function useHeaders({
 		columns: Column[]
 		nestedHeaders?: Array<NestedHeader[]>
 	}) {
+		logger.debug('Creating grid headers.')
 		//Detect duplicated
 		const duplicateColumns = paramColumns.filter((column, i) => {
 			return paramColumns.findIndex(d => d.id === column.id) !== i
@@ -95,6 +98,7 @@ export function useHeaders({
 		)
 
 		if (paramNestedHeaders) {
+			logger.debug('Grid detected nested headers.')
 			//Check if any row passes the limit of spanning
 			paramNestedHeaders.forEach((row, i) => {
 				const spanSize = row.reduce((acc, e) => acc + (e.colSpan ?? 0), 0)
@@ -130,6 +134,7 @@ export function useHeaders({
 
 	const updateColumns = useCallback(
 		(updatedColumns: Column[]) => {
+			logger.debug('Updating columns.')
 			columnsRef.current = updatedColumns
 			createGridHeaders({ columns: updatedColumns, nestedHeaders: nestedHeadersRef.current })
 			apiRef.current.dispatchEvent(COLUMNS_CHANGED, { columns: updatedColumns })
@@ -145,11 +150,6 @@ export function useHeaders({
 		apiRef.current.dispatchEvent(COLUMNS_CHANGED, { columns: columns })
 	}, [columns, nestedHeaders])
 
-	//Stores the amount of columns that we want to calculate using the remaining width of the grid
-	const dynamicColumnCount = useMemo(() => {
-		return columns.filter(e => !e.width).length
-	}, [columns])
-
 	const getColumnAt = useCallback((index: number) => {
 		return columnsRef.current[index]
 	}, [])

src/columnGrid/utils/createFixedWidthMapping.ts → src/columnGrid/utils/createColumnWidthsMapping.ts

@@ -1,9 +1,9 @@
-import { parseColumnWidthsConfiguration } from "./parseColumnWidthsConfiguration";
-import { FixedColumnWidthDictionary } from "../types/fixed-column-width-dictionary";
-import { Column } from "../types/header.type";
-import { StretchMode } from "../../types/stretch-mode.enum";
-import memoizeOne from "memoize-one";
-import { dequal as isDeepEqual } from "dequal";
+import { parseColumnWidthsConfiguration } from "./parseColumnWidthsConfiguration"
+import { FixedColumnWidthDictionary } from "../types/fixed-column-width-dictionary"
+import { Column } from "../types/header.type"
+import { StretchMode } from "../../types/stretch-mode.enum"
+import memoizeOne from "memoize-one"
+import { dequal as isDeepEqual } from "dequal"
 
 /**
  * Creates an object indexing the fixed column widths by its index as key for fast lookup on dynamic widths
@@ -13,7 +13,7 @@ import { dequal as isDeepEqual } from "dequal";
  * @param minColumnWidth
  * @param stretchMode
  */
-export const createFixedWidthMapping = memoizeOne(
+export const createColumnWidthsMapping = memoizeOne(
 	(
 		columns: Column[],
 		containerWidth: number,

src/columnGrid/utils/index.ts

@@ -1,3 +1,3 @@
-export * from './createFixedWidthMapping'
+export * from './createColumnWidthsMapping'
 export * from './percentageToPixels'
-export * from './parseColumnWidthsConfiguration'
+export * from './parseColumnWidthsConfiguration'

src/data/useData.tsx

@@ -9,6 +9,7 @@ import { DATA_CHANGED, ROW_SELECTION_CHANGE, ROWS_CHANGED } from '../api/eventCo
 import { createData } from './createData'
 import { Row } from '../types'
 import { RowApi } from '../api/types'
+import { useLogger } from "../logger";
 
 interface Props {
 	rows: Row[]
@@ -22,6 +23,7 @@ interface Props {
  * `useData` handles all the rows and cells operations of this plugin
  */
 export function useData({ rows, columns, selection, initialised, apiRef }: Props) {
+	const logger = useLogger('useData')
 	const rowsRef = useRef<Row[]>(rows)
 	const originalRowsRef = useRef<Row[]>(rows)
 	const cells = useRef<GridCell[][]>([])
@@ -36,7 +38,7 @@ export function useData({ rows, columns, selection, initialised, apiRef }: Props
 			})
 
 			if (!updatedData) {
-				return console.error('No data has been returned from createData')
+				return logger.error('No data has been returned from createData, please review the dependencies')
 			}
 
 			cells.current = updatedData
@@ -48,6 +50,7 @@ export function useData({ rows, columns, selection, initialised, apiRef }: Props
 
 	const updateRows = useCallback(
 		(updatedRows: Row[]) => {
+			logger.debug('Updating rows.')
 			//Only update the current rows
 			rowsRef.current = updatedRows
 			apiRef.current.dispatchEvent(ROWS_CHANGED, { rows: updatedRows })
@@ -67,6 +70,7 @@ export function useData({ rows, columns, selection, initialised, apiRef }: Props
 	}, [rows, columns, updateRows, initialised, onRowsChangeHandle])
 
 	const onRowSelectionChange = useCallback(() => {
+		logger.debug('Row selection changed.')
 		onRowsChangeHandle({ rows: rowsRef.current, columns: columns })
 	}, [onRowsChangeHandle])
 

src/editorManager/components/NumericEditor.tsx

@@ -103,7 +103,7 @@ export const NumericEditor = forwardRef(
 				elevation={0}
 				TransitionProps={{ timeout: 0 }}
 				onClose={onEditorPortalClose}
-				marginThreshold={10}
+				marginThreshold={0}
 				disableRestoreFocus
 				PaperProps={{
 					style: {

src/editorManager/components/TextEditor.tsx

@@ -96,7 +96,7 @@ export const TextEditor = forwardRef(
 				elevation={0}
 				TransitionProps={{ timeout: 0 }}
 				onClose={onEditorPortalClose}
-				marginThreshold={10}
+				marginThreshold={0}
 				disableRestoreFocus
 				PaperProps={{
 					style: {