From 2b7e18a82908672ca741478ab9c2a7701bba0dcb Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sat, 31 Dec 2022 18:30:20 +0300 Subject: [PATCH 01/57] fix: focused row should always be rendered --- .../virtualization/useGridVirtualScroller.tsx | 30 ++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 0dd6ce0f3983..c27af7f5cd28 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -417,6 +417,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0; const columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0; + let isFocusedCellOutOfRange = true; const [firstRowToRender, lastRowToRender] = getRenderableIndexes({ firstIndex: nextRenderContext.firstRowIndex, @@ -443,8 +444,13 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { return null; } + const { cell } = apiRef.current.state.focus; for (let i = firstRowToRender; i < lastRowToRender; i += 1) { const row = currentPage.rows[i]; + if (cell && row.id === cell?.id) { + isFocusedCellOutOfRange = false; + } + renderedRows.push(row); apiRef.current.calculateColSpan({ rowId: row.id, @@ -453,6 +459,25 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { columns: visibleColumns, }); } + if (isFocusedCellOutOfRange && cell && !disableVirtualization) { + const rows = currentPage.rows.filter((row) => row.id === cell.id); + const focusedRow = rows.length > 0 && rows[0]; + + if (focusedRow) { + const index = currentPage.rows.indexOf(focusedRow); + if (index > firstRowToRender) { + renderedRows.push(focusedRow); + } else { + renderedRows.unshift(focusedRow); + } + apiRef.current.calculateColSpan({ + rowId: focusedRow.id, + minFirstColumn, + maxLastColumn, + columns: visibleColumns, + }); + } + } } const [initialFirstColumnToRender, lastColumnToRender] = getRenderableIndexes({ @@ -477,7 +502,10 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = 0; i < renderedRows.length; i += 1) { const { id, model } = renderedRows[i]; - const lastVisibleRowIndex = firstRowToRender + i === currentPage.rows.length - 1; + + const lastVisibleRowIndex = isFocusedCellOutOfRange + ? firstRowToRender + i === currentPage.rows.length + : firstRowToRender + i === currentPage.rows.length - 1; const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto'; From 259be171aca042c321e5a680be934b1f04d4070c Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sat, 31 Dec 2022 18:31:29 +0300 Subject: [PATCH 02/57] fix: dragStart should update state.focus --- .../src/hooks/features/rowReorder/useGridRowReorder.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx index 3292cd4495da..1e67f7230482 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx @@ -81,6 +81,7 @@ export const useGridRowReorder = ( }); originRowIndex.current = apiRef.current.getRowIndexRelativeToVisibleRows(params.id); + apiRef.current.setCellFocus(params.id, '__reorder__'); }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef], ); From 1bb1f067e73e496022a388a6e990ad45cd94fa0b Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sun, 1 Jan 2023 19:01:01 +0300 Subject: [PATCH 03/57] refa: code clean --- .../virtualization/useGridVirtualScroller.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index c27af7f5cd28..35ad8707bdd7 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -417,7 +417,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0; const columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0; - let isFocusedCellOutOfRange = true; + let isFocusedCellRendered = false; const [firstRowToRender, lastRowToRender] = getRenderableIndexes({ firstIndex: nextRenderContext.firstRowIndex, @@ -448,7 +448,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = firstRowToRender; i < lastRowToRender; i += 1) { const row = currentPage.rows[i]; if (cell && row.id === cell?.id) { - isFocusedCellOutOfRange = false; + isFocusedCellRendered = true; } renderedRows.push(row); @@ -459,7 +459,11 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { columns: visibleColumns, }); } - if (isFocusedCellOutOfRange && cell && !disableVirtualization) { + // If the selected row is not within the current range of rows being displayed, + // we need to render it at either the top or bottom of the rows, + // depending on whether it is above or below the range. + + if (!isFocusedCellRendered && cell && !disableVirtualization) { const rows = currentPage.rows.filter((row) => row.id === cell.id); const focusedRow = rows.length > 0 && rows[0]; @@ -503,7 +507,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = 0; i < renderedRows.length; i += 1) { const { id, model } = renderedRows[i]; - const lastVisibleRowIndex = isFocusedCellOutOfRange + const lastVisibleRowIndex = !isFocusedCellRendered ? firstRowToRender + i === currentPage.rows.length : firstRowToRender + i === currentPage.rows.length - 1; const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) From a806328c1e7e1c2728a0b9081c192a0428b4b79c Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Mon, 2 Jan 2023 10:52:30 +0300 Subject: [PATCH 04/57] fix: lastVisibleRowIndex fix --- .../features/virtualization/useGridVirtualScroller.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 35ad8707bdd7..1d353e936365 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -417,7 +417,9 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0; const columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0; + let isFocusedCellRendered = false; + const { cell } = apiRef.current.state.focus; const [firstRowToRender, lastRowToRender] = getRenderableIndexes({ firstIndex: nextRenderContext.firstRowIndex, @@ -444,7 +446,6 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { return null; } - const { cell } = apiRef.current.state.focus; for (let i = firstRowToRender; i < lastRowToRender; i += 1) { const row = currentPage.rows[i]; if (cell && row.id === cell?.id) { @@ -507,9 +508,10 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = 0; i < renderedRows.length; i += 1) { const { id, model } = renderedRows[i]; - const lastVisibleRowIndex = !isFocusedCellRendered - ? firstRowToRender + i === currentPage.rows.length - : firstRowToRender + i === currentPage.rows.length - 1; + const lastVisibleRowIndex = + !isFocusedCellRendered && cell + ? firstRowToRender + i === currentPage.rows.length + : firstRowToRender + i === currentPage.rows.length - 1; const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto'; From a110332353f6b6113a51702203800a9dda39021e Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Fri, 6 Jan 2023 21:35:55 +0300 Subject: [PATCH 05/57] fix: cell select horizontal virtualization added --- packages/grid/x-data-grid/src/components/GridRow.tsx | 5 ++++- .../virtualization/useGridVirtualScroller.tsx | 12 ++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 2122ee0734f1..4b48038c24a2 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -450,11 +450,14 @@ const GridRow = React.forwardRef< const rowType = apiRef.current.getRowNode(rowId)!.type; const cells: JSX.Element[] = []; + const isAdditionalColumnAdded = renderedColumns.length < lastColumnToRender - firstColumnToRender; for (let i = 0; i < renderedColumns.length; i += 1) { const column = renderedColumns[i]; const indexRelativeToAllColumns = firstColumnToRender + i; - const isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1; + const isLastColumn = isAdditionalColumnAdded + ? indexRelativeToAllColumns === visibleColumns.length + : indexRelativeToAllColumns === visibleColumns.length - 1; const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY; const showRightBorder = !isLastColumn ? rootProps.showCellVerticalBorder diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 1d353e936365..5db1ce11c7a2 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -502,6 +502,18 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { }); const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender); + if (cell) { + const selectedColumns = visibleColumns.filter((column) => column.field === cell.field); + if (selectedColumns.length > 0) { + const focusedColumn = selectedColumns[0]; + const focusedColumnIndex = visibleColumns.indexOf(focusedColumn); + if (firstColumnToRender > focusedColumnIndex) { + renderedColumns.unshift(focusedColumn); + } else if (lastColumnToRender < focusedColumnIndex) { + renderedColumns.push(focusedColumn); + } + } + } const rows: JSX.Element[] = []; From 6b73fd9f5e46fdb512dc5abbf58dff7fd75780ed Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sat, 7 Jan 2023 19:37:30 +0300 Subject: [PATCH 06/57] fix: pinned column fix --- .../virtualization/useGridVirtualScroller.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 5db1ce11c7a2..417b522af9ae 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -460,10 +460,10 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { columns: visibleColumns, }); } + // If the selected row is not within the current range of rows being displayed, // we need to render it at either the top or bottom of the rows, // depending on whether it is above or below the range. - if (!isFocusedCellRendered && cell && !disableVirtualization) { const rows = currentPage.rows.filter((row) => row.id === cell.id); const focusedRow = rows.length > 0 && rows[0]; @@ -502,11 +502,18 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { }); const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender); - if (cell) { + + // If the selected column is not within the current range of columns being displayed, + // we need to render it at either the left or right of the columns, + // depending on whether it is above or below the range. + const isAllColumnRendered = + maxLastColumn - minFirstColumn === lastColumnToRender - firstColumnToRender; + if (cell && !disableVirtualization && !isAllColumnRendered) { const selectedColumns = visibleColumns.filter((column) => column.field === cell.field); if (selectedColumns.length > 0) { const focusedColumn = selectedColumns[0]; const focusedColumnIndex = visibleColumns.indexOf(focusedColumn); + if (firstColumnToRender > focusedColumnIndex) { renderedColumns.unshift(focusedColumn); } else if (lastColumnToRender < focusedColumnIndex) { From f50b8656b1b7e63dedd2d7c31686a71eecd4d9da Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sun, 15 Jan 2023 14:09:52 +0300 Subject: [PATCH 07/57] fix: column pin fix --- .../features/virtualization/useGridVirtualScroller.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 417b522af9ae..9fcb9c4312bc 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -508,15 +508,15 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { // depending on whether it is above or below the range. const isAllColumnRendered = maxLastColumn - minFirstColumn === lastColumnToRender - firstColumnToRender; + if (cell && !disableVirtualization && !isAllColumnRendered) { const selectedColumns = visibleColumns.filter((column) => column.field === cell.field); if (selectedColumns.length > 0) { const focusedColumn = selectedColumns[0]; const focusedColumnIndex = visibleColumns.indexOf(focusedColumn); - - if (firstColumnToRender > focusedColumnIndex) { + if (firstColumnToRender > focusedColumnIndex && focusedColumnIndex >= minFirstColumn) { renderedColumns.unshift(focusedColumn); - } else if (lastColumnToRender < focusedColumnIndex) { + } else if (lastColumnToRender < focusedColumnIndex && focusedColumnIndex < maxLastColumn) { renderedColumns.push(focusedColumn); } } From 93b772ba2a95073ae78fca74404ae22e30619da0 Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sun, 15 Jan 2023 21:16:43 +0300 Subject: [PATCH 08/57] fix: hide added cell and row --- .../x-data-grid/src/components/GridRow.tsx | 27 ++++++++++++++++--- .../src/components/cell/GridCell.tsx | 24 ++++++++++++----- .../virtualization/useGridVirtualScroller.tsx | 25 ++++++++++------- 3 files changed, 56 insertions(+), 20 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 4b48038c24a2..7db245ebb1c8 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -33,6 +33,7 @@ import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRows import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector'; import { randomNumberBetween } from '../utils/utils'; import { GridCellProps } from './cell/GridCell'; +import { gridFocusCellSelector } from '../hooks'; export interface GridRowProps { rowId: GridRowId; @@ -54,6 +55,8 @@ export interface GridRowProps { position: 'left' | 'center' | 'right'; row?: GridRowModel; isLastVisible?: boolean; + isColumnWithFocusedCellRendered?: boolean; + visible?: boolean; onClick?: React.MouseEventHandler; onDoubleClick?: React.MouseEventHandler; onMouseEnter?: React.MouseEventHandler; @@ -116,6 +119,8 @@ const GridRow = React.forwardRef< cellTabIndex, editRowsState, isLastVisible = false, + isColumnWithFocusedCellRendered = false, + visible = true, onClick, onDoubleClick, onMouseEnter, @@ -389,6 +394,7 @@ const GridRow = React.forwardRef< ); const sizes = apiRef.current.unstable_getRowInternalSizes(rowId); + const focusedCell = gridFocusCellSelector(apiRef); let minHeight = rowHeight; if (minHeight === 'auto' && sizes) { @@ -412,10 +418,16 @@ const GridRow = React.forwardRef< const style = { ...styleProp, + maxHeight: rowHeight === 'auto' ? 'none' : rowHeight, // max-height doesn't support "auto" minHeight, }; + if (!visible) { + style.opacity = 0; + + style.width = 0; + } if (sizes?.spacingTop) { const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop'; style[property] = sizes.spacingTop; @@ -450,12 +462,11 @@ const GridRow = React.forwardRef< const rowType = apiRef.current.getRowNode(rowId)!.type; const cells: JSX.Element[] = []; - const isAdditionalColumnAdded = renderedColumns.length < lastColumnToRender - firstColumnToRender; for (let i = 0; i < renderedColumns.length; i += 1) { const column = renderedColumns[i]; const indexRelativeToAllColumns = firstColumnToRender + i; - const isLastColumn = isAdditionalColumnAdded + const isLastColumn = isColumnWithFocusedCellRendered ? indexRelativeToAllColumns === visibleColumns.length : indexRelativeToAllColumns === visibleColumns.length - 1; const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY; @@ -469,9 +480,19 @@ const GridRow = React.forwardRef< ); if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) { + const cellWidth = + focusedCell && isColumnWithFocusedCellRendered && focusedCell.field === column.field + ? 0 + : null; + if (rowType !== 'skeletonRow') { const { colSpan, width } = cellColSpanInfo.cellProps; - const cellProps = { width, colSpan, showRightBorder, indexRelativeToAllColumns }; + const cellProps = { + width: cellWidth != null ? cellWidth : width, + colSpan, + showRightBorder, + indexRelativeToAllColumns, + }; cells.push(getCell(column, cellProps)); } else { const { width } = cellColSpanInfo.cellProps; diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index 0b994b38cd73..df4bc8d6e6a9 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -180,13 +180,23 @@ function GridCell(props: GridCellProps) { [apiRef, field, rowId], ); - const style = { - minWidth: width, - maxWidth: width, - minHeight: height, - maxHeight: height === 'auto' ? 'none' : height, // max-height doesn't support "auto" - }; - + const style = React.useMemo(() => { + const styles = { + minWidth: width, + maxWidth: width, + minHeight: height, + maxHeight: height === 'auto' ? 'none' : height, // max-height doesn't support "auto" + }; + // + if (width === 0) { + return { + ...styles, + padding: 0, + opacity: 0, + }; + } + return styles; + }, [width, height]); React.useEffect(() => { if (!hasFocus || cellMode === GridCellModes.Edit) { return; diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 9fcb9c4312bc..5c1df1a38b84 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -418,7 +418,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0; const columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0; - let isFocusedCellRendered = false; + let isRowWithFocusedCellRendered = false; const { cell } = apiRef.current.state.focus; const [firstRowToRender, lastRowToRender] = getRenderableIndexes({ @@ -449,7 +449,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = firstRowToRender; i < lastRowToRender; i += 1) { const row = currentPage.rows[i]; if (cell && row.id === cell?.id) { - isFocusedCellRendered = true; + isRowWithFocusedCellRendered = true; } renderedRows.push(row); @@ -464,12 +464,13 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { // If the selected row is not within the current range of rows being displayed, // we need to render it at either the top or bottom of the rows, // depending on whether it is above or below the range. - if (!isFocusedCellRendered && cell && !disableVirtualization) { + if (!isRowWithFocusedCellRendered && cell && !disableVirtualization) { const rows = currentPage.rows.filter((row) => row.id === cell.id); const focusedRow = rows.length > 0 && rows[0]; if (focusedRow) { const index = currentPage.rows.indexOf(focusedRow); + if (index > firstRowToRender) { renderedRows.push(focusedRow); } else { @@ -508,16 +509,18 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { // depending on whether it is above or below the range. const isAllColumnRendered = maxLastColumn - minFirstColumn === lastColumnToRender - firstColumnToRender; - + let isColumnWithFocusedCellRendered = false; if (cell && !disableVirtualization && !isAllColumnRendered) { - const selectedColumns = visibleColumns.filter((column) => column.field === cell.field); - if (selectedColumns.length > 0) { - const focusedColumn = selectedColumns[0]; - const focusedColumnIndex = visibleColumns.indexOf(focusedColumn); + const focusedColumnIndex = visibleColumns.findIndex((column) => column.field === cell.field); + if (focusedColumnIndex > -1) { + const focusedColumn = visibleColumns[focusedColumnIndex]; + if (firstColumnToRender > focusedColumnIndex && focusedColumnIndex >= minFirstColumn) { renderedColumns.unshift(focusedColumn); + isColumnWithFocusedCellRendered = true; } else if (lastColumnToRender < focusedColumnIndex && focusedColumnIndex < maxLastColumn) { renderedColumns.push(focusedColumn); + isColumnWithFocusedCellRendered = true; } } } @@ -526,9 +529,9 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = 0; i < renderedRows.length; i += 1) { const { id, model } = renderedRows[i]; - + const isRowVisible = !isRowWithFocusedCellRendered && cell && cell.id === id; const lastVisibleRowIndex = - !isFocusedCellRendered && cell + !isRowWithFocusedCellRendered && cell ? firstRowToRender + i === currentPage.rows.length : firstRowToRender + i === currentPage.rows.length - 1; const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) @@ -547,6 +550,8 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { key={id} row={model} rowId={id} + isColumnWithFocusedCellRendered={isColumnWithFocusedCellRendered} + visible={!isRowVisible} rowHeight={baseRowHeight} cellFocus={cellFocus} // TODO move to inside the row cellTabIndex={cellTabIndex} // TODO move to inside the row From 86f74f938a8c7441a2abe70f6a03db6b91d34834 Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sat, 31 Dec 2022 18:30:20 +0300 Subject: [PATCH 09/57] fix: focused row should always be rendered --- .../virtualization/useGridVirtualScroller.tsx | 30 ++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 0dd6ce0f3983..c27af7f5cd28 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -417,6 +417,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0; const columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0; + let isFocusedCellOutOfRange = true; const [firstRowToRender, lastRowToRender] = getRenderableIndexes({ firstIndex: nextRenderContext.firstRowIndex, @@ -443,8 +444,13 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { return null; } + const { cell } = apiRef.current.state.focus; for (let i = firstRowToRender; i < lastRowToRender; i += 1) { const row = currentPage.rows[i]; + if (cell && row.id === cell?.id) { + isFocusedCellOutOfRange = false; + } + renderedRows.push(row); apiRef.current.calculateColSpan({ rowId: row.id, @@ -453,6 +459,25 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { columns: visibleColumns, }); } + if (isFocusedCellOutOfRange && cell && !disableVirtualization) { + const rows = currentPage.rows.filter((row) => row.id === cell.id); + const focusedRow = rows.length > 0 && rows[0]; + + if (focusedRow) { + const index = currentPage.rows.indexOf(focusedRow); + if (index > firstRowToRender) { + renderedRows.push(focusedRow); + } else { + renderedRows.unshift(focusedRow); + } + apiRef.current.calculateColSpan({ + rowId: focusedRow.id, + minFirstColumn, + maxLastColumn, + columns: visibleColumns, + }); + } + } } const [initialFirstColumnToRender, lastColumnToRender] = getRenderableIndexes({ @@ -477,7 +502,10 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = 0; i < renderedRows.length; i += 1) { const { id, model } = renderedRows[i]; - const lastVisibleRowIndex = firstRowToRender + i === currentPage.rows.length - 1; + + const lastVisibleRowIndex = isFocusedCellOutOfRange + ? firstRowToRender + i === currentPage.rows.length + : firstRowToRender + i === currentPage.rows.length - 1; const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto'; From 922596c338c4cde56fd1dd668dd8539267e6f7a3 Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sat, 31 Dec 2022 18:31:29 +0300 Subject: [PATCH 10/57] fix: dragStart should update state.focus --- .../src/hooks/features/rowReorder/useGridRowReorder.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx index a00ffb9fb40a..aafcba870aa7 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx @@ -81,6 +81,7 @@ export const useGridRowReorder = ( }); originRowIndex.current = apiRef.current.getRowIndexRelativeToVisibleRows(params.id); + apiRef.current.setCellFocus(params.id, '__reorder__'); }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef], ); From 46fafd129f932c9c9e12a47d1428f901a0378d80 Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sun, 1 Jan 2023 19:01:01 +0300 Subject: [PATCH 11/57] refa: code clean --- .../virtualization/useGridVirtualScroller.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index c27af7f5cd28..35ad8707bdd7 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -417,7 +417,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0; const columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0; - let isFocusedCellOutOfRange = true; + let isFocusedCellRendered = false; const [firstRowToRender, lastRowToRender] = getRenderableIndexes({ firstIndex: nextRenderContext.firstRowIndex, @@ -448,7 +448,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = firstRowToRender; i < lastRowToRender; i += 1) { const row = currentPage.rows[i]; if (cell && row.id === cell?.id) { - isFocusedCellOutOfRange = false; + isFocusedCellRendered = true; } renderedRows.push(row); @@ -459,7 +459,11 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { columns: visibleColumns, }); } - if (isFocusedCellOutOfRange && cell && !disableVirtualization) { + // If the selected row is not within the current range of rows being displayed, + // we need to render it at either the top or bottom of the rows, + // depending on whether it is above or below the range. + + if (!isFocusedCellRendered && cell && !disableVirtualization) { const rows = currentPage.rows.filter((row) => row.id === cell.id); const focusedRow = rows.length > 0 && rows[0]; @@ -503,7 +507,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = 0; i < renderedRows.length; i += 1) { const { id, model } = renderedRows[i]; - const lastVisibleRowIndex = isFocusedCellOutOfRange + const lastVisibleRowIndex = !isFocusedCellRendered ? firstRowToRender + i === currentPage.rows.length : firstRowToRender + i === currentPage.rows.length - 1; const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) From d23d73a03b5022c2797b1871841bee5e781e3599 Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Mon, 2 Jan 2023 10:52:30 +0300 Subject: [PATCH 12/57] fix: lastVisibleRowIndex fix --- .../features/virtualization/useGridVirtualScroller.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 35ad8707bdd7..1d353e936365 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -417,7 +417,9 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0; const columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0; + let isFocusedCellRendered = false; + const { cell } = apiRef.current.state.focus; const [firstRowToRender, lastRowToRender] = getRenderableIndexes({ firstIndex: nextRenderContext.firstRowIndex, @@ -444,7 +446,6 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { return null; } - const { cell } = apiRef.current.state.focus; for (let i = firstRowToRender; i < lastRowToRender; i += 1) { const row = currentPage.rows[i]; if (cell && row.id === cell?.id) { @@ -507,9 +508,10 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = 0; i < renderedRows.length; i += 1) { const { id, model } = renderedRows[i]; - const lastVisibleRowIndex = !isFocusedCellRendered - ? firstRowToRender + i === currentPage.rows.length - : firstRowToRender + i === currentPage.rows.length - 1; + const lastVisibleRowIndex = + !isFocusedCellRendered && cell + ? firstRowToRender + i === currentPage.rows.length + : firstRowToRender + i === currentPage.rows.length - 1; const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto'; From 74f767d2d9379fb54db39832977cc1d6e894b122 Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Fri, 6 Jan 2023 21:35:55 +0300 Subject: [PATCH 13/57] fix: cell select horizontal virtualization added --- packages/grid/x-data-grid/src/components/GridRow.tsx | 5 ++++- .../virtualization/useGridVirtualScroller.tsx | 12 ++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 77f2341c3d2b..7e7ecbd8b831 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -450,11 +450,14 @@ const GridRow = React.forwardRef< const rowType = apiRef.current.getRowNode(rowId)!.type; const cells: JSX.Element[] = []; + const isAdditionalColumnAdded = renderedColumns.length < lastColumnToRender - firstColumnToRender; for (let i = 0; i < renderedColumns.length; i += 1) { const column = renderedColumns[i]; const indexRelativeToAllColumns = firstColumnToRender + i; - const isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1; + const isLastColumn = isAdditionalColumnAdded + ? indexRelativeToAllColumns === visibleColumns.length + : indexRelativeToAllColumns === visibleColumns.length - 1; const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY; const showRightBorder = !isLastColumn ? rootProps.showCellVerticalBorder diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 1d353e936365..5db1ce11c7a2 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -502,6 +502,18 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { }); const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender); + if (cell) { + const selectedColumns = visibleColumns.filter((column) => column.field === cell.field); + if (selectedColumns.length > 0) { + const focusedColumn = selectedColumns[0]; + const focusedColumnIndex = visibleColumns.indexOf(focusedColumn); + if (firstColumnToRender > focusedColumnIndex) { + renderedColumns.unshift(focusedColumn); + } else if (lastColumnToRender < focusedColumnIndex) { + renderedColumns.push(focusedColumn); + } + } + } const rows: JSX.Element[] = []; From 49436c290cbe9fb53f58b0930c8376112445dd5b Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sat, 7 Jan 2023 19:37:30 +0300 Subject: [PATCH 14/57] fix: pinned column fix --- .../virtualization/useGridVirtualScroller.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 5db1ce11c7a2..417b522af9ae 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -460,10 +460,10 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { columns: visibleColumns, }); } + // If the selected row is not within the current range of rows being displayed, // we need to render it at either the top or bottom of the rows, // depending on whether it is above or below the range. - if (!isFocusedCellRendered && cell && !disableVirtualization) { const rows = currentPage.rows.filter((row) => row.id === cell.id); const focusedRow = rows.length > 0 && rows[0]; @@ -502,11 +502,18 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { }); const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender); - if (cell) { + + // If the selected column is not within the current range of columns being displayed, + // we need to render it at either the left or right of the columns, + // depending on whether it is above or below the range. + const isAllColumnRendered = + maxLastColumn - minFirstColumn === lastColumnToRender - firstColumnToRender; + if (cell && !disableVirtualization && !isAllColumnRendered) { const selectedColumns = visibleColumns.filter((column) => column.field === cell.field); if (selectedColumns.length > 0) { const focusedColumn = selectedColumns[0]; const focusedColumnIndex = visibleColumns.indexOf(focusedColumn); + if (firstColumnToRender > focusedColumnIndex) { renderedColumns.unshift(focusedColumn); } else if (lastColumnToRender < focusedColumnIndex) { From 79129050f89a6f67af64a43b1389ab05bb8a1fd6 Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sun, 15 Jan 2023 14:09:52 +0300 Subject: [PATCH 15/57] fix: column pin fix --- .../features/virtualization/useGridVirtualScroller.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 417b522af9ae..9fcb9c4312bc 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -508,15 +508,15 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { // depending on whether it is above or below the range. const isAllColumnRendered = maxLastColumn - minFirstColumn === lastColumnToRender - firstColumnToRender; + if (cell && !disableVirtualization && !isAllColumnRendered) { const selectedColumns = visibleColumns.filter((column) => column.field === cell.field); if (selectedColumns.length > 0) { const focusedColumn = selectedColumns[0]; const focusedColumnIndex = visibleColumns.indexOf(focusedColumn); - - if (firstColumnToRender > focusedColumnIndex) { + if (firstColumnToRender > focusedColumnIndex && focusedColumnIndex >= minFirstColumn) { renderedColumns.unshift(focusedColumn); - } else if (lastColumnToRender < focusedColumnIndex) { + } else if (lastColumnToRender < focusedColumnIndex && focusedColumnIndex < maxLastColumn) { renderedColumns.push(focusedColumn); } } From 35f3321584c16e7c456ad0512b10ff3d69693f2b Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sun, 15 Jan 2023 21:16:43 +0300 Subject: [PATCH 16/57] fix: hide added cell and row --- .../x-data-grid/src/components/GridRow.tsx | 27 ++++++++++++++++--- .../src/components/cell/GridCell.tsx | 24 ++++++++++++----- .../virtualization/useGridVirtualScroller.tsx | 25 ++++++++++------- 3 files changed, 56 insertions(+), 20 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 7e7ecbd8b831..aed21b5d6b8b 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -33,6 +33,7 @@ import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRows import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector'; import { randomNumberBetween } from '../utils/utils'; import { GridCellProps } from './cell/GridCell'; +import { gridFocusCellSelector } from '../hooks'; export interface GridRowProps { rowId: GridRowId; @@ -54,6 +55,8 @@ export interface GridRowProps { position: 'left' | 'center' | 'right'; row?: GridRowModel; isLastVisible?: boolean; + isColumnWithFocusedCellRendered?: boolean; + visible?: boolean; onClick?: React.MouseEventHandler; onDoubleClick?: React.MouseEventHandler; onMouseEnter?: React.MouseEventHandler; @@ -116,6 +119,8 @@ const GridRow = React.forwardRef< cellTabIndex, editRowsState, isLastVisible = false, + isColumnWithFocusedCellRendered = false, + visible = true, onClick, onDoubleClick, onMouseEnter, @@ -389,6 +394,7 @@ const GridRow = React.forwardRef< ); const sizes = apiRef.current.unstable_getRowInternalSizes(rowId); + const focusedCell = gridFocusCellSelector(apiRef); let minHeight = rowHeight; if (minHeight === 'auto' && sizes) { @@ -412,10 +418,16 @@ const GridRow = React.forwardRef< const style = { ...styleProp, + maxHeight: rowHeight === 'auto' ? 'none' : rowHeight, // max-height doesn't support "auto" minHeight, }; + if (!visible) { + style.opacity = 0; + + style.width = 0; + } if (sizes?.spacingTop) { const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop'; style[property] = sizes.spacingTop; @@ -450,12 +462,11 @@ const GridRow = React.forwardRef< const rowType = apiRef.current.getRowNode(rowId)!.type; const cells: JSX.Element[] = []; - const isAdditionalColumnAdded = renderedColumns.length < lastColumnToRender - firstColumnToRender; for (let i = 0; i < renderedColumns.length; i += 1) { const column = renderedColumns[i]; const indexRelativeToAllColumns = firstColumnToRender + i; - const isLastColumn = isAdditionalColumnAdded + const isLastColumn = isColumnWithFocusedCellRendered ? indexRelativeToAllColumns === visibleColumns.length : indexRelativeToAllColumns === visibleColumns.length - 1; const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY; @@ -469,9 +480,19 @@ const GridRow = React.forwardRef< ); if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) { + const cellWidth = + focusedCell && isColumnWithFocusedCellRendered && focusedCell.field === column.field + ? 0 + : null; + if (rowType !== 'skeletonRow') { const { colSpan, width } = cellColSpanInfo.cellProps; - const cellProps = { width, colSpan, showRightBorder, indexRelativeToAllColumns }; + const cellProps = { + width: cellWidth != null ? cellWidth : width, + colSpan, + showRightBorder, + indexRelativeToAllColumns, + }; cells.push(getCell(column, cellProps)); } else { const { width } = cellColSpanInfo.cellProps; diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index e212a7b7e6dc..2a67e774bf4d 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -175,13 +175,23 @@ function GridCell(props: GridCellProps) { [apiRef, field, rowId], ); - const style = { - minWidth: width, - maxWidth: width, - minHeight: height, - maxHeight: height === 'auto' ? 'none' : height, // max-height doesn't support "auto" - }; - + const style = React.useMemo(() => { + const styles = { + minWidth: width, + maxWidth: width, + minHeight: height, + maxHeight: height === 'auto' ? 'none' : height, // max-height doesn't support "auto" + }; + // + if (width === 0) { + return { + ...styles, + padding: 0, + opacity: 0, + }; + } + return styles; + }, [width, height]); React.useEffect(() => { if (!hasFocus || cellMode === GridCellModes.Edit) { return; diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 9fcb9c4312bc..5c1df1a38b84 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -418,7 +418,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0; const columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0; - let isFocusedCellRendered = false; + let isRowWithFocusedCellRendered = false; const { cell } = apiRef.current.state.focus; const [firstRowToRender, lastRowToRender] = getRenderableIndexes({ @@ -449,7 +449,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = firstRowToRender; i < lastRowToRender; i += 1) { const row = currentPage.rows[i]; if (cell && row.id === cell?.id) { - isFocusedCellRendered = true; + isRowWithFocusedCellRendered = true; } renderedRows.push(row); @@ -464,12 +464,13 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { // If the selected row is not within the current range of rows being displayed, // we need to render it at either the top or bottom of the rows, // depending on whether it is above or below the range. - if (!isFocusedCellRendered && cell && !disableVirtualization) { + if (!isRowWithFocusedCellRendered && cell && !disableVirtualization) { const rows = currentPage.rows.filter((row) => row.id === cell.id); const focusedRow = rows.length > 0 && rows[0]; if (focusedRow) { const index = currentPage.rows.indexOf(focusedRow); + if (index > firstRowToRender) { renderedRows.push(focusedRow); } else { @@ -508,16 +509,18 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { // depending on whether it is above or below the range. const isAllColumnRendered = maxLastColumn - minFirstColumn === lastColumnToRender - firstColumnToRender; - + let isColumnWithFocusedCellRendered = false; if (cell && !disableVirtualization && !isAllColumnRendered) { - const selectedColumns = visibleColumns.filter((column) => column.field === cell.field); - if (selectedColumns.length > 0) { - const focusedColumn = selectedColumns[0]; - const focusedColumnIndex = visibleColumns.indexOf(focusedColumn); + const focusedColumnIndex = visibleColumns.findIndex((column) => column.field === cell.field); + if (focusedColumnIndex > -1) { + const focusedColumn = visibleColumns[focusedColumnIndex]; + if (firstColumnToRender > focusedColumnIndex && focusedColumnIndex >= minFirstColumn) { renderedColumns.unshift(focusedColumn); + isColumnWithFocusedCellRendered = true; } else if (lastColumnToRender < focusedColumnIndex && focusedColumnIndex < maxLastColumn) { renderedColumns.push(focusedColumn); + isColumnWithFocusedCellRendered = true; } } } @@ -526,9 +529,9 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = 0; i < renderedRows.length; i += 1) { const { id, model } = renderedRows[i]; - + const isRowVisible = !isRowWithFocusedCellRendered && cell && cell.id === id; const lastVisibleRowIndex = - !isFocusedCellRendered && cell + !isRowWithFocusedCellRendered && cell ? firstRowToRender + i === currentPage.rows.length : firstRowToRender + i === currentPage.rows.length - 1; const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) @@ -547,6 +550,8 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { key={id} row={model} rowId={id} + isColumnWithFocusedCellRendered={isColumnWithFocusedCellRendered} + visible={!isRowVisible} rowHeight={baseRowHeight} cellFocus={cellFocus} // TODO move to inside the row cellTabIndex={cellTabIndex} // TODO move to inside the row From 65f342b41a0c49d7b063b134889cc3d3ad925311 Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sat, 31 Dec 2022 18:30:20 +0300 Subject: [PATCH 17/57] fix: focused row should always be rendered --- .../src/hooks/features/virtualization/useGridVirtualScroller.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 5c1df1a38b84..360d0e7d8c45 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -470,7 +470,6 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { if (focusedRow) { const index = currentPage.rows.indexOf(focusedRow); - if (index > firstRowToRender) { renderedRows.push(focusedRow); } else { From fe131efc0085aa9518541a154b9c9ce4e5db62fd Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Fri, 6 Jan 2023 21:35:55 +0300 Subject: [PATCH 18/57] fix: cell select horizontal virtualization added --- .../virtualization/useGridVirtualScroller.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 360d0e7d8c45..c5ede66b85f4 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -502,6 +502,18 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { }); const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender); + if (cell) { + const selectedColumns = visibleColumns.filter((column) => column.field === cell.field); + if (selectedColumns.length > 0) { + const focusedColumn = selectedColumns[0]; + const focusedColumnIndex = visibleColumns.indexOf(focusedColumn); + if (firstColumnToRender > focusedColumnIndex) { + renderedColumns.unshift(focusedColumn); + } else if (lastColumnToRender < focusedColumnIndex) { + renderedColumns.push(focusedColumn); + } + } + } // If the selected column is not within the current range of columns being displayed, // we need to render it at either the left or right of the columns, From 7ff3c50993f53ce33f9050502910a9c6361817cd Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sat, 7 Jan 2023 19:37:30 +0300 Subject: [PATCH 19/57] fix: pinned column fix --- .../virtualization/useGridVirtualScroller.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index c5ede66b85f4..360d0e7d8c45 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -502,18 +502,6 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { }); const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender); - if (cell) { - const selectedColumns = visibleColumns.filter((column) => column.field === cell.field); - if (selectedColumns.length > 0) { - const focusedColumn = selectedColumns[0]; - const focusedColumnIndex = visibleColumns.indexOf(focusedColumn); - if (firstColumnToRender > focusedColumnIndex) { - renderedColumns.unshift(focusedColumn); - } else if (lastColumnToRender < focusedColumnIndex) { - renderedColumns.push(focusedColumn); - } - } - } // If the selected column is not within the current range of columns being displayed, // we need to render it at either the left or right of the columns, From 915020e085c636c5b0e85b4a64784456b1f93321 Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sun, 15 Jan 2023 21:16:43 +0300 Subject: [PATCH 20/57] fix: hide added cell and row --- .../src/hooks/features/virtualization/useGridVirtualScroller.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 360d0e7d8c45..5c1df1a38b84 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -470,6 +470,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { if (focusedRow) { const index = currentPage.rows.indexOf(focusedRow); + if (index > firstRowToRender) { renderedRows.push(focusedRow); } else { From 6e61646cd4b2cd5830d15b21b4fe222b27c6e661 Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sun, 15 Jan 2023 22:10:03 +0300 Subject: [PATCH 21/57] fix: merge fix --- packages/grid/x-data-grid/src/components/GridRow.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index d0ac1bad2fc2..85819986aec4 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -462,16 +462,6 @@ const GridRow = React.forwardRef< const column = renderedColumns[i]; const indexRelativeToAllColumns = firstColumnToRender + i; - - const isLastColumn = isColumnWithFocusedCellRendered - ? indexRelativeToAllColumns === visibleColumns.length - : indexRelativeToAllColumns === visibleColumns.length - 1; - const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY; - const showRightBorder = !isLastColumn - ? rootProps.showCellVerticalBorder - : !removeLastBorderRight && rootProps.disableExtendRowFullWidth; - - const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo( rowId, indexRelativeToAllColumns, @@ -488,7 +478,7 @@ const GridRow = React.forwardRef< const cellProps = { width: cellWidth != null ? cellWidth : width, colSpan, - showRightBorder, + showRightBorder: rootProps.showCellVerticalBorder, indexRelativeToAllColumns, }; cells.push(getCell(column, cellProps)); From 6340a94f749a018d8d0c9202687ed39221636f36 Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Sun, 15 Jan 2023 22:19:17 +0300 Subject: [PATCH 22/57] fix: propTypes generated --- packages/grid/x-data-grid/src/components/GridRow.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 85819986aec4..5e8d07b214bd 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -414,7 +414,6 @@ const GridRow = React.forwardRef< const style = { ...styleProp, - maxHeight: rowHeight === 'auto' ? 'none' : rowHeight, // max-height doesn't support "auto" minHeight, }; @@ -544,6 +543,7 @@ GridRow.propTypes = { * If some rows above have expanded children, this index also take those children into account. */ index: PropTypes.number.isRequired, + isColumnWithFocusedCellRendered: PropTypes.bool, isLastVisible: PropTypes.bool, lastColumnToRender: PropTypes.number.isRequired, position: PropTypes.oneOf(['center', 'left', 'right']).isRequired, @@ -552,6 +552,7 @@ GridRow.propTypes = { rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, selected: PropTypes.bool.isRequired, + visible: PropTypes.bool, visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired, } as any; From 4af30fd94ec1d2e105bb143f790d6f9d37cd458b Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Thu, 19 Jan 2023 15:37:54 +0300 Subject: [PATCH 23/57] refa: code cleaned --- .../x-data-grid/src/components/GridRow.tsx | 81 +++++++------ .../src/components/cell/GridCell.tsx | 18 ++- .../virtualization/useGridVirtualScroller.tsx | 106 ++++++++++-------- 3 files changed, 115 insertions(+), 90 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 5e8d07b214bd..e2b2c6999879 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -55,8 +55,8 @@ export interface GridRowProps { position: 'left' | 'center' | 'right'; row?: GridRowModel; isLastVisible?: boolean; - isColumnWithFocusedCellRendered?: boolean; - visible?: boolean; + isColumnWithFocusedCellNotInRange?: boolean; + isNotVisible?: boolean; onClick?: React.MouseEventHandler; onDoubleClick?: React.MouseEventHandler; onMouseEnter?: React.MouseEventHandler; @@ -119,8 +119,8 @@ const GridRow = React.forwardRef< cellTabIndex, editRowsState, isLastVisible = false, - isColumnWithFocusedCellRendered = false, - visible = true, + isColumnWithFocusedCellNotInRange = false, + isNotVisible, onClick, onDoubleClick, onMouseEnter, @@ -266,9 +266,11 @@ const GridRow = React.forwardRef< column: GridStateColDef, cellProps: Pick< GridCellProps, - 'width' | 'colSpan' | 'showRightBorder' | 'indexRelativeToAllColumns' + 'width' | 'colSpan' | 'showRightBorder' | 'indexRelativeToAllColumns' | 'isNotVisible' >, ) => { + const focusedCell = gridFocusCellSelector(apiRef); + const cellParams = apiRef.current.getCellParams( rowId, column.field, @@ -286,6 +288,12 @@ const GridRow = React.forwardRef< treeDepth > 1 && Object.keys(editRowsState).length > 0); + let cellIsNotVisible = false; + if (isColumnWithFocusedCellNotInRange && focusedCell!.field === column.field) { + cellIsNotVisible = true; + } else { + cellIsNotVisible = false; + } if (column.cellClassName) { classNames.push( clsx( @@ -369,6 +377,7 @@ const GridRow = React.forwardRef< className={clsx(classNames)} colSpan={cellProps.colSpan} disableDragEvents={disableDragEvents} + isNotVisible={cellIsNotVisible} {...rootProps.componentsProps?.cell} > {content} @@ -386,11 +395,11 @@ const GridRow = React.forwardRef< rowId, treeDepth, sortModel.length, + isColumnWithFocusedCellNotInRange, ], ); const sizes = apiRef.current.unstable_getRowInternalSizes(rowId); - const focusedCell = gridFocusCellSelector(apiRef); let minHeight = rowHeight; if (minHeight === 'auto' && sizes) { @@ -412,32 +421,35 @@ const GridRow = React.forwardRef< } } - const style = { - ...styleProp, - maxHeight: rowHeight === 'auto' ? 'none' : rowHeight, // max-height doesn't support "auto" - minHeight, - }; - - if (!visible) { - style.opacity = 0; + const style = React.useMemo(() => { + const rowStyle = { + ...styleProp, + maxHeight: rowHeight === 'auto' ? 'none' : rowHeight, // max-height doesn't support "auto" + minHeight, + }; + if (isNotVisible) { + rowStyle.opacity = 0; + rowStyle.width = 0; + } - style.width = 0; - } - if (sizes?.spacingTop) { - const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop'; - style[property] = sizes.spacingTop; - } + if (sizes?.spacingTop) { + const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop'; + rowStyle[property] = sizes.spacingTop; + } - if (sizes?.spacingBottom) { - const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom'; - let propertyValue = style[property]; - // avoid overriding existing value - if (typeof propertyValue !== 'number') { - propertyValue = parseInt(propertyValue || '0', 10); + if (sizes?.spacingBottom) { + const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom'; + let propertyValue = rowStyle[property]; + // avoid overriding existing value + if (typeof propertyValue !== 'number') { + propertyValue = parseInt(propertyValue || '0', 10); + } + propertyValue += sizes.spacingBottom; + rowStyle[property] = propertyValue; } - propertyValue += sizes.spacingBottom; - style[property] = propertyValue; - } + + return rowStyle; + }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]); const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId); @@ -467,15 +479,10 @@ const GridRow = React.forwardRef< ); if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) { - const cellWidth = - focusedCell && isColumnWithFocusedCellRendered && focusedCell.field === column.field - ? 0 - : null; - if (rowType !== 'skeletonRow') { const { colSpan, width } = cellColSpanInfo.cellProps; const cellProps = { - width: cellWidth != null ? cellWidth : width, + width, colSpan, showRightBorder: rootProps.showCellVerticalBorder, indexRelativeToAllColumns, @@ -543,8 +550,9 @@ GridRow.propTypes = { * If some rows above have expanded children, this index also take those children into account. */ index: PropTypes.number.isRequired, - isColumnWithFocusedCellRendered: PropTypes.bool, + isColumnWithFocusedCellNotInRange: PropTypes.bool, isLastVisible: PropTypes.bool, + isNotVisible: PropTypes.bool, lastColumnToRender: PropTypes.number.isRequired, position: PropTypes.oneOf(['center', 'left', 'right']).isRequired, renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired, @@ -552,7 +560,6 @@ GridRow.propTypes = { rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, selected: PropTypes.bool.isRequired, - visible: PropTypes.bool, visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired, } as any; diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index 2a67e774bf4d..307942abc62c 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -41,6 +41,7 @@ export interface GridCellProps { tabIndex: 0 | -1; colSpan?: number; disableDragEvents?: boolean; + isNotVisible?: boolean; onClick?: React.MouseEventHandler; onDoubleClick?: React.MouseEventHandler; onMouseDown?: React.MouseEventHandler; @@ -112,6 +113,7 @@ function GridCell(props: GridCellProps) { row, colSpan, disableDragEvents, + isNotVisible, onClick, onDoubleClick, onMouseDown, @@ -176,22 +178,25 @@ function GridCell(props: GridCellProps) { ); const style = React.useMemo(() => { - const styles = { + const cellStyle = { minWidth: width, maxWidth: width, minHeight: height, maxHeight: height === 'auto' ? 'none' : height, // max-height doesn't support "auto" }; - // - if (width === 0) { + + if (isNotVisible) { return { - ...styles, + ...cellStyle, padding: 0, opacity: 0, + minWidth: 0, + maxWidth: 0, }; } - return styles; - }, [width, height]); + return cellStyle; + }, [width, height, isNotVisible]); + React.useEffect(() => { if (!hasFocus || cellMode === GridCellModes.Edit) { return; @@ -309,6 +314,7 @@ GridCell.propTypes = { hasFocus: PropTypes.bool, height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, isEditable: PropTypes.bool, + isNotVisible: PropTypes.bool, isSelected: PropTypes.bool, onClick: PropTypes.func, onDoubleClick: PropTypes.func, diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 5c1df1a38b84..5125ba8a48ca 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -391,6 +391,20 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event); }; + const indexOfColumnWithFocusedCell = React.useMemo(() => { + if (cellFocus !== null) { + return visibleColumns.findIndex((column) => column.field === cellFocus.field); + } + return -1; + }, [cellFocus, visibleColumns]); + + const indexOfRowWithFocusedCell = React.useMemo(() => { + if (cellFocus !== null) { + return currentPage.rows.findIndex((row) => row.id === cellFocus.id); + } + return -1; + }, [cellFocus, currentPage.rows]); + const getRows = ( params: { renderContext: GridRenderContext | null; @@ -418,9 +432,6 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0; const columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0; - let isRowWithFocusedCellRendered = false; - const { cell } = apiRef.current.state.focus; - const [firstRowToRender, lastRowToRender] = getRenderableIndexes({ firstIndex: nextRenderContext.firstRowIndex, lastIndex: nextRenderContext.lastRowIndex, @@ -448,10 +459,6 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = firstRowToRender; i < lastRowToRender; i += 1) { const row = currentPage.rows[i]; - if (cell && row.id === cell?.id) { - isRowWithFocusedCellRendered = true; - } - renderedRows.push(row); apiRef.current.calculateColSpan({ rowId: row.id, @@ -460,29 +467,31 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { columns: visibleColumns, }); } + } + // If the selected row is not within the current range of rows being displayed, + // we need to render it at either the top or bottom of the rows, + // depending on whether it is above or below the range. - // If the selected row is not within the current range of rows being displayed, - // we need to render it at either the top or bottom of the rows, - // depending on whether it is above or below the range. - if (!isRowWithFocusedCellRendered && cell && !disableVirtualization) { - const rows = currentPage.rows.filter((row) => row.id === cell.id); - const focusedRow = rows.length > 0 && rows[0]; - - if (focusedRow) { - const index = currentPage.rows.indexOf(focusedRow); - - if (index > firstRowToRender) { - renderedRows.push(focusedRow); - } else { - renderedRows.unshift(focusedRow); - } - apiRef.current.calculateColSpan({ - rowId: focusedRow.id, - minFirstColumn, - maxLastColumn, - columns: visibleColumns, - }); + let isRowWithFocusedCellNotInRange = false; + + if (indexOfRowWithFocusedCell > -1) { + const rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell]; + if ( + firstRowToRender > indexOfRowWithFocusedCell || + lastRowToRender < indexOfRowWithFocusedCell + ) { + isRowWithFocusedCellNotInRange = true; + if (indexOfRowWithFocusedCell > firstRowToRender) { + renderedRows.push(rowWithFocusedCell); + } else { + renderedRows.unshift(rowWithFocusedCell); } + apiRef.current.calculateColSpan({ + rowId: rowWithFocusedCell.id, + minFirstColumn, + maxLastColumn, + columns: visibleColumns, + }); } } @@ -507,20 +516,24 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { // If the selected column is not within the current range of columns being displayed, // we need to render it at either the left or right of the columns, // depending on whether it is above or below the range. - const isAllColumnRendered = - maxLastColumn - minFirstColumn === lastColumnToRender - firstColumnToRender; - let isColumnWithFocusedCellRendered = false; - if (cell && !disableVirtualization && !isAllColumnRendered) { - const focusedColumnIndex = visibleColumns.findIndex((column) => column.field === cell.field); - if (focusedColumnIndex > -1) { - const focusedColumn = visibleColumns[focusedColumnIndex]; - - if (firstColumnToRender > focusedColumnIndex && focusedColumnIndex >= minFirstColumn) { + let isColumnWithFocusedCellNotInRange = false; + if (indexOfColumnWithFocusedCell > -1) { + const focusedColumn = visibleColumns[indexOfColumnWithFocusedCell]; + if ( + firstColumnToRender > indexOfColumnWithFocusedCell || + lastColumnToRender < indexOfColumnWithFocusedCell + ) { + isColumnWithFocusedCellNotInRange = true; + if ( + firstColumnToRender > indexOfColumnWithFocusedCell && + indexOfColumnWithFocusedCell >= minFirstColumn + ) { renderedColumns.unshift(focusedColumn); - isColumnWithFocusedCellRendered = true; - } else if (lastColumnToRender < focusedColumnIndex && focusedColumnIndex < maxLastColumn) { + } else if ( + lastColumnToRender < indexOfColumnWithFocusedCell && + indexOfColumnWithFocusedCell < maxLastColumn + ) { renderedColumns.push(focusedColumn); - isColumnWithFocusedCellRendered = true; } } } @@ -529,11 +542,10 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = 0; i < renderedRows.length; i += 1) { const { id, model } = renderedRows[i]; - const isRowVisible = !isRowWithFocusedCellRendered && cell && cell.id === id; - const lastVisibleRowIndex = - !isRowWithFocusedCellRendered && cell - ? firstRowToRender + i === currentPage.rows.length - : firstRowToRender + i === currentPage.rows.length - 1; + const isRowVisible = isRowWithFocusedCellNotInRange && cellFocus!.id === id; + const lastVisibleRowIndex = isRowWithFocusedCellNotInRange + ? firstRowToRender + i === currentPage.rows.length + : firstRowToRender + i === currentPage.rows.length - 1; const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto'; @@ -550,8 +562,8 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { key={id} row={model} rowId={id} - isColumnWithFocusedCellRendered={isColumnWithFocusedCellRendered} - visible={!isRowVisible} + isColumnWithFocusedCellNotInRange={isColumnWithFocusedCellNotInRange} + isNotVisible={isRowVisible} rowHeight={baseRowHeight} cellFocus={cellFocus} // TODO move to inside the row cellTabIndex={cellTabIndex} // TODO move to inside the row From face9e2a4ddaf59cf75c54e4f1f25780998e65ed Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Wed, 15 Feb 2023 10:06:09 +0300 Subject: [PATCH 24/57] style: style refactored --- packages/grid/x-data-grid/src/components/GridRow.tsx | 6 ++++-- packages/grid/x-data-grid/src/components/cell/GridCell.tsx | 4 +--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 2fe5f4b56585..4fe7b980780f 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -423,8 +423,10 @@ const GridRow = React.forwardRef< minHeight, }; if (isNotVisible) { - rowStyle.opacity = 0; - rowStyle.width = 0; + return { + opacity: 0, + width: 0, + }; } if (sizes?.spacingTop) { diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index 194713e2d544..78a8980d3ddd 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -187,11 +187,9 @@ function GridCell(props: GridCellProps) { if (isNotVisible) { return { - ...cellStyle, padding: 0, opacity: 0, - minWidth: 0, - maxWidth: 0, + width: 0, }; } return cellStyle; From 4c6ad85138a758630696a75b1d08381588dd37b3 Mon Sep 17 00:00:00 2001 From: yared tsegaye Date: Wed, 15 Feb 2023 20:49:24 +0300 Subject: [PATCH 25/57] fix: row height set to zero --- packages/grid/x-data-grid/src/components/GridRow.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 4fe7b980780f..731a298959d8 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -426,6 +426,7 @@ const GridRow = React.forwardRef< return { opacity: 0, width: 0, + height: 0, }; } From 42917519b4d040fdff6d425639800100551f3cc5 Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Thu, 13 Apr 2023 00:53:24 +0300 Subject: [PATCH 26/57] fix: merge fix --- .../x-data-grid/src/components/GridRow.tsx | 7 +- .../virtualization/useGridVirtualScroller.tsx | 73 ++++++++++++------- 2 files changed, 47 insertions(+), 33 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index f8ccfc4bbb22..3ec1e31a1a7f 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -280,8 +280,6 @@ const GridRow = React.forwardRef(function GridRow( 'width' | 'colSpan' | 'showRightBorder' | 'indexRelativeToAllColumns' | 'isNotVisible' >, ) => { - const focusedCell = gridFocusCellSelector(apiRef); - const cellParams = apiRef.current.getCellParams( rowId, column.field, @@ -300,7 +298,7 @@ const GridRow = React.forwardRef(function GridRow( Object.keys(editRowsState).length > 0); let cellIsNotVisible = false; - if (isColumnWithFocusedCellNotInRange && focusedCell!.field === column.field) { + if (isColumnWithFocusedCellNotInRange && focusedCell === column.field) { cellIsNotVisible = true; } else { cellIsNotVisible = false; @@ -390,11 +388,11 @@ const GridRow = React.forwardRef(function GridRow( disableColumnReorder, rowReordering, sortModel.length, + focusedCell, isColumnWithFocusedCellNotInRange, treeDepth, editRowsState, getCellClassName, - focusedCell, tabbableCell, CellComponent, rowHeight, @@ -563,7 +561,6 @@ GridRow.propTypes = { isLastVisible: PropTypes.bool, isNotVisible: PropTypes.bool, index: PropTypes.number, - isLastVisible: PropTypes.bool, lastColumnToRender: PropTypes.number, onClick: PropTypes.func, onDoubleClick: PropTypes.func, diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index c55638c3f5cc..481165232326 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -146,8 +146,47 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const getRenderedColumnsRef = React.useRef( defaultMemoize( - (columns: GridStateColDef[], firstColumnToRender: number, lastColumnToRender: number) => { - return columns.slice(firstColumnToRender, lastColumnToRender); + ( + columns: GridStateColDef[], + firstColumnToRender: number, + lastColumnToRender: number, + minFirstColumn: number, + maxLastColumn: number, + indexOfColumnWithFocusedCell: number, + ) => { + // If the selected column is not within the current range of columns being displayed, + // we need to render it at either the left or right of the columns, + // depending on whether it is above or below the range. + let isColumnWithFocusedCellNotInRange = false; + + const renderedColumns = columns.slice(firstColumnToRender, lastColumnToRender); + + if (indexOfColumnWithFocusedCell > -1) { + const focusedColumn = visibleColumns[indexOfColumnWithFocusedCell]; + if ( + firstColumnToRender > indexOfColumnWithFocusedCell || + lastColumnToRender < indexOfColumnWithFocusedCell + ) { + isColumnWithFocusedCellNotInRange = true; + + if ( + firstColumnToRender > indexOfColumnWithFocusedCell && + indexOfColumnWithFocusedCell >= minFirstColumn + ) { + renderedColumns.unshift(focusedColumn); + } else if ( + lastColumnToRender < indexOfColumnWithFocusedCell && + indexOfColumnWithFocusedCell < maxLastColumn + ) { + renderedColumns.push(focusedColumn); + } + } + } + + return { + isColumnWithFocusedCellNotInRange, + renderedColumns, + }; }, ), ); @@ -560,10 +599,13 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { visibleRows: currentPage.rows, }); - const renderedColumns = getRenderedColumnsRef.current( + const { isColumnWithFocusedCellNotInRange, renderedColumns } = getRenderedColumnsRef.current( visibleColumns, firstColumnToRender, lastColumnToRender, + minFirstColumn, + maxLastColumn, + indexOfColumnWithFocusedCell, ); const { style: rootRowStyle, ...rootRowProps } = rootProps.slotProps?.row || {}; @@ -575,31 +617,6 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { rowStyleCache.current = {}; } - // If the selected column is not within the current range of columns being displayed, - // we need to render it at either the left or right of the columns, - // depending on whether it is above or below the range. - let isColumnWithFocusedCellNotInRange = false; - if (indexOfColumnWithFocusedCell > -1) { - const focusedColumn = visibleColumns[indexOfColumnWithFocusedCell]; - if ( - firstColumnToRender > indexOfColumnWithFocusedCell || - lastColumnToRender < indexOfColumnWithFocusedCell - ) { - isColumnWithFocusedCellNotInRange = true; - if ( - firstColumnToRender > indexOfColumnWithFocusedCell && - indexOfColumnWithFocusedCell >= minFirstColumn - ) { - renderedColumns.unshift(focusedColumn); - } else if ( - lastColumnToRender < indexOfColumnWithFocusedCell && - indexOfColumnWithFocusedCell < maxLastColumn - ) { - renderedColumns.push(focusedColumn); - } - } - } - const rows: JSX.Element[] = []; for (let i = 0; i < renderedRows.length; i += 1) { From d9b87ccd8c147645aa8b01589eccb7de9b6287a8 Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Thu, 13 Apr 2023 12:30:21 +0300 Subject: [PATCH 27/57] fix: proptypes added --- packages/grid/x-data-grid/src/components/GridRow.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 3ec1e31a1a7f..35da5c4adc18 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -556,11 +556,10 @@ GridRow.propTypes = { * Index of the row in the whole sorted and filtered dataset. * If some rows above have expanded children, this index also take those children into account. */ - + index: PropTypes.number, isColumnWithFocusedCellNotInRange: PropTypes.bool, isLastVisible: PropTypes.bool, isNotVisible: PropTypes.bool, - index: PropTypes.number, lastColumnToRender: PropTypes.number, onClick: PropTypes.func, onDoubleClick: PropTypes.func, From 9899329980134f051ce47513b914fea5d2e7209a Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Thu, 13 Apr 2023 23:47:15 +0300 Subject: [PATCH 28/57] refa: fix memoization --- .../x-data-grid/src/components/GridRow.tsx | 52 +++++++++++-- .../virtualization/useGridVirtualScroller.tsx | 73 ++++++++++--------- 2 files changed, 82 insertions(+), 43 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 35da5c4adc18..22c5514b8a59 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -56,7 +56,7 @@ export interface GridRowProps extends React.HTMLAttributes { tabbableCell: string | null; row?: GridRowModel; isLastVisible?: boolean; - isColumnWithFocusedCellNotInRange?: boolean; + indexOfColumnWithFocusedCellNotInRange?: number; isNotVisible?: boolean; onClick?: React.MouseEventHandler; onDoubleClick?: React.MouseEventHandler; @@ -115,7 +115,7 @@ const GridRow = React.forwardRef(function GridRow( firstColumnToRender, lastColumnToRender, isLastVisible = false, - isColumnWithFocusedCellNotInRange = false, + indexOfColumnWithFocusedCellNotInRange, isNotVisible, focusedCell, tabbableCell, @@ -298,7 +298,11 @@ const GridRow = React.forwardRef(function GridRow( Object.keys(editRowsState).length > 0); let cellIsNotVisible = false; - if (isColumnWithFocusedCellNotInRange && focusedCell === column.field) { + + if ( + indexOfColumnWithFocusedCellNotInRange && + visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field + ) { cellIsNotVisible = true; } else { cellIsNotVisible = false; @@ -389,7 +393,8 @@ const GridRow = React.forwardRef(function GridRow( rowReordering, sortModel.length, focusedCell, - isColumnWithFocusedCellNotInRange, + indexOfColumnWithFocusedCellNotInRange, + visibleColumns, treeDepth, editRowsState, getCellClassName, @@ -474,16 +479,48 @@ const GridRow = React.forwardRef(function GridRow( const rowType = apiRef.current.getRowNode(rowId)!.type; const cells: JSX.Element[] = []; + const focusedColumn = visibleColumns.find( + (column) => + indexOfColumnWithFocusedCellNotInRange && + visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field, + ); + + if (focusedColumn) { + if (!renderedColumns.includes(focusedColumn) && focusedCell) { + renderedColumns.unshift(focusedColumn); + } + if (renderedColumns.includes(focusedColumn) && !focusedCell) { + renderedColumns.shift(); + } + } + for (let i = 0; i < renderedColumns.length; i += 1) { const column = renderedColumns[i]; - const indexRelativeToAllColumns = firstColumnToRender + i; + + let indexRelativeToAllColumns = firstColumnToRender + i; + + if ( + indexOfColumnWithFocusedCellNotInRange && + visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field && + focusedCell + ) { + indexRelativeToAllColumns = indexOfColumnWithFocusedCellNotInRange; + } else if (indexOfColumnWithFocusedCellNotInRange && focusedCell) { + indexRelativeToAllColumns -= 1; + } const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo( rowId, indexRelativeToAllColumns, ); - if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) { + const shouldRenderColumn = + !indexOfColumnWithFocusedCellNotInRange || + (visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field && + focusedCell) || + visibleColumns[indexOfColumnWithFocusedCellNotInRange].field !== column.field; + + if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan && shouldRenderColumn) { if (rowType !== 'skeletonRow') { const { colSpan, width } = cellColSpanInfo.cellProps; const cellProps = { @@ -492,6 +529,7 @@ const GridRow = React.forwardRef(function GridRow( showRightBorder: rootProps.showCellVerticalBorder, indexRelativeToAllColumns, }; + cells.push(getCell(column, cellProps)); } else { const { width } = cellColSpanInfo.cellProps; @@ -557,7 +595,7 @@ GridRow.propTypes = { * If some rows above have expanded children, this index also take those children into account. */ index: PropTypes.number, - isColumnWithFocusedCellNotInRange: PropTypes.bool, + indexOfColumnWithFocusedCellNotInRange: PropTypes.number, isLastVisible: PropTypes.bool, isNotVisible: PropTypes.bool, lastColumnToRender: PropTypes.number, diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 481165232326..8e95c81c1d42 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -157,40 +157,38 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { // If the selected column is not within the current range of columns being displayed, // we need to render it at either the left or right of the columns, // depending on whether it is above or below the range. - let isColumnWithFocusedCellNotInRange = false; + let indexOfColumnWithFocusedCellNotInRange; const renderedColumns = columns.slice(firstColumnToRender, lastColumnToRender); if (indexOfColumnWithFocusedCell > -1) { - const focusedColumn = visibleColumns[indexOfColumnWithFocusedCell]; if ( - firstColumnToRender > indexOfColumnWithFocusedCell || - lastColumnToRender < indexOfColumnWithFocusedCell + firstColumnToRender > indexOfColumnWithFocusedCell && + indexOfColumnWithFocusedCell >= minFirstColumn ) { - isColumnWithFocusedCellNotInRange = true; - - if ( - firstColumnToRender > indexOfColumnWithFocusedCell && - indexOfColumnWithFocusedCell >= minFirstColumn - ) { - renderedColumns.unshift(focusedColumn); - } else if ( - lastColumnToRender < indexOfColumnWithFocusedCell && - indexOfColumnWithFocusedCell < maxLastColumn - ) { - renderedColumns.push(focusedColumn); - } + indexOfColumnWithFocusedCellNotInRange = indexOfColumnWithFocusedCell; + } else if ( + lastColumnToRender < indexOfColumnWithFocusedCell && + indexOfColumnWithFocusedCell < maxLastColumn + ) { + indexOfColumnWithFocusedCellNotInRange = indexOfColumnWithFocusedCell; } } return { - isColumnWithFocusedCellNotInRange, + indexOfColumnWithFocusedCellNotInRange, renderedColumns, }; }, ), ); + const indexOfColumnWithFocusedCell = React.useMemo(() => { + if (cellFocus !== null) { + return visibleColumns.findIndex((column) => column.field === cellFocus.field); + } + return -1; + }, [cellFocus, visibleColumns]); const getNearestIndexToRender = React.useCallback( (offset: number) => { const lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex(); @@ -479,13 +477,6 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event); }; - const indexOfColumnWithFocusedCell = React.useMemo(() => { - if (cellFocus !== null) { - return visibleColumns.findIndex((column) => column.field === cellFocus.field); - } - return -1; - }, [cellFocus, visibleColumns]); - const indexOfRowWithFocusedCell = React.useMemo(() => { if (cellFocus !== null) { return currentPage.rows.findIndex((row) => row.id === cellFocus.id); @@ -599,14 +590,23 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { visibleRows: currentPage.rows, }); - const { isColumnWithFocusedCellNotInRange, renderedColumns } = getRenderedColumnsRef.current( - visibleColumns, - firstColumnToRender, - lastColumnToRender, - minFirstColumn, - maxLastColumn, - indexOfColumnWithFocusedCell, - ); + let isColumnWihFocusedCellNotInRange = false; + if ( + firstColumnToRender > indexOfColumnWithFocusedCell || + lastColumnToRender < indexOfColumnWithFocusedCell + ) { + isColumnWihFocusedCellNotInRange = true; + } + + const { indexOfColumnWithFocusedCellNotInRange, renderedColumns } = + getRenderedColumnsRef.current( + visibleColumns, + firstColumnToRender, + lastColumnToRender, + minFirstColumn, + maxLastColumn, + isColumnWihFocusedCellNotInRange ? indexOfColumnWithFocusedCell : -1, + ); const { style: rootRowStyle, ...rootRowProps } = rootProps.slotProps?.row || {}; @@ -621,7 +621,8 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { for (let i = 0; i < renderedRows.length; i += 1) { const { id, model } = renderedRows[i]; - const isRowVisible = isRowWithFocusedCellNotInRange && cellFocus!.id === id; + const isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus!.id === id; + const lastVisibleRowIndex = isRowWithFocusedCellNotInRange ? firstRowToRender + i === currentPage.rows.length : firstRowToRender + i === currentPage.rows.length - 1; @@ -660,8 +661,8 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { key={id} row={model} rowId={id} - isColumnWithFocusedCellNotInRange={isColumnWithFocusedCellNotInRange} - isNotVisible={isRowVisible} + indexOfColumnWithFocusedCellNotInRange={indexOfColumnWithFocusedCellNotInRange} + isNotVisible={isRowNotVisible} rowHeight={baseRowHeight} focusedCell={focusedCell} tabbableCell={tabbableCell} From fd7f6368188b263d5c54541b7f33a2b073abd2aa Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Sat, 15 Apr 2023 20:35:18 +0300 Subject: [PATCH 29/57] refa: removed unnecessary if --- .../x-data-grid/src/components/GridRow.tsx | 28 +++++++------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 22c5514b8a59..53863fae4135 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -479,17 +479,15 @@ const GridRow = React.forwardRef(function GridRow( const rowType = apiRef.current.getRowNode(rowId)!.type; const cells: JSX.Element[] = []; - const focusedColumn = visibleColumns.find( - (column) => - indexOfColumnWithFocusedCellNotInRange && - visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field, - ); + const columnWithFocusedCellNotInRange = + indexOfColumnWithFocusedCellNotInRange && + visibleColumns[indexOfColumnWithFocusedCellNotInRange]; - if (focusedColumn) { - if (!renderedColumns.includes(focusedColumn) && focusedCell) { - renderedColumns.unshift(focusedColumn); + if (columnWithFocusedCellNotInRange) { + if (!renderedColumns.includes(columnWithFocusedCellNotInRange) && focusedCell) { + renderedColumns.unshift(columnWithFocusedCellNotInRange); } - if (renderedColumns.includes(focusedColumn) && !focusedCell) { + if (renderedColumns.includes(columnWithFocusedCellNotInRange) && !focusedCell) { renderedColumns.shift(); } } @@ -500,8 +498,8 @@ const GridRow = React.forwardRef(function GridRow( let indexRelativeToAllColumns = firstColumnToRender + i; if ( - indexOfColumnWithFocusedCellNotInRange && - visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field && + columnWithFocusedCellNotInRange && + columnWithFocusedCellNotInRange.field === column.field && focusedCell ) { indexRelativeToAllColumns = indexOfColumnWithFocusedCellNotInRange; @@ -514,13 +512,7 @@ const GridRow = React.forwardRef(function GridRow( indexRelativeToAllColumns, ); - const shouldRenderColumn = - !indexOfColumnWithFocusedCellNotInRange || - (visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field && - focusedCell) || - visibleColumns[indexOfColumnWithFocusedCellNotInRange].field !== column.field; - - if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan && shouldRenderColumn) { + if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) { if (rowType !== 'skeletonRow') { const { colSpan, width } = cellColSpanInfo.cellProps; const cellProps = { From 26e6c5f9fa23706379f35c75dd919613b22c735f Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Thu, 20 Apr 2023 12:45:49 +0300 Subject: [PATCH 30/57] test: failing test added --- .../virtualization/useGridVirtualScroller.tsx | 56 +++++++++---------- .../src/tests/cells.DataGrid.test.tsx | 33 ++++++++++- 2 files changed, 60 insertions(+), 29 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index f16dbcc02947..0d37fd4aa92d 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -479,12 +479,12 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event); }; - const indexOfRowWithFocusedCell = React.useMemo(() => { - if (cellFocus !== null) { - return currentPage.rows.findIndex((row) => row.id === cellFocus.id); - } - return -1; - }, [cellFocus, currentPage.rows]); + // const indexOfRowWithFocusedCell = React.useMemo(() => { + // if (cellFocus !== null) { + // return currentPage.rows.findIndex((row) => row.id === cellFocus.id); + // } + // return -1; + // }, [cellFocus, currentPage.rows]); const getRows = ( params: { @@ -555,28 +555,28 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { // we need to render it at either the top or bottom of the rows, // depending on whether it is above or below the range. - let isRowWithFocusedCellNotInRange = false; - - if (indexOfRowWithFocusedCell > -1) { - const rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell]; - if ( - firstRowToRender > indexOfRowWithFocusedCell || - lastRowToRender < indexOfRowWithFocusedCell - ) { - isRowWithFocusedCellNotInRange = true; - if (indexOfRowWithFocusedCell > firstRowToRender) { - renderedRows.push(rowWithFocusedCell); - } else { - renderedRows.unshift(rowWithFocusedCell); - } - apiRef.current.calculateColSpan({ - rowId: rowWithFocusedCell.id, - minFirstColumn, - maxLastColumn, - columns: visibleColumns, - }); - } - } + const isRowWithFocusedCellNotInRange = false; + + // if (indexOfRowWithFocusedCell > -1) { + // const rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell]; + // if ( + // firstRowToRender > indexOfRowWithFocusedCell || + // lastRowToRender < indexOfRowWithFocusedCell + // ) { + // isRowWithFocusedCellNotInRange = true; + // if (indexOfRowWithFocusedCell > firstRowToRender) { + // renderedRows.push(rowWithFocusedCell); + // } else { + // renderedRows.unshift(rowWithFocusedCell); + // } + // apiRef.current.calculateColSpan({ + // rowId: rowWithFocusedCell.id, + // minFirstColumn, + // maxLastColumn, + // columns: visibleColumns, + // }); + // } + // } const [initialFirstColumnToRender, lastColumnToRender] = getRenderableIndexes({ firstIndex: nextRenderContext.firstColumnIndex, diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index 6faa3c7270c8..4d8cdcb5e13a 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -3,7 +3,7 @@ import { spy } from 'sinon'; import { createRenderer, userEvent } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { DataGrid } from '@mui/x-data-grid'; -import { getCell } from 'test/utils/helperFn'; +import { getActiveCell, getCell } from 'test/utils/helperFn'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -218,4 +218,35 @@ describe(' - Cells', () => { virtualScroller.dispatchEvent(new Event('scroll')); expect(virtualScroller.scrollTop).to.equal(scrollTop); }); + + it('focused cell should always be in the dom even if it is not in the viewport', async function test() { + if (isJSDOM) { + this.skip(); // Needs layout + } + + const rowHeight = 50; + const columns = [{ field: 'id' }]; + const rows = []; + for (let i = 0; i < 20; i += 1) { + rows.push({ id: i }); + } + + render( +
+ +
, + ); + + const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; + + userEvent.mousePress(getCell(0, 0)); + + const scrollTop = 10 * rowHeight; + virtualScroller.scrollTop = scrollTop; + + virtualScroller.dispatchEvent(new Event('scroll')); + + expect(virtualScroller.scrollTop).to.equal(scrollTop + 1); + expect(getActiveCell()).to.equal('0-0'); + }); }); From 2341fa3726a489193a14a3abee5262795278f2ca Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Thu, 20 Apr 2023 12:59:09 +0300 Subject: [PATCH 31/57] fix: fix for failing test added --- .../virtualization/useGridVirtualScroller.tsx | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 0d37fd4aa92d..f16dbcc02947 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -479,12 +479,12 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event); }; - // const indexOfRowWithFocusedCell = React.useMemo(() => { - // if (cellFocus !== null) { - // return currentPage.rows.findIndex((row) => row.id === cellFocus.id); - // } - // return -1; - // }, [cellFocus, currentPage.rows]); + const indexOfRowWithFocusedCell = React.useMemo(() => { + if (cellFocus !== null) { + return currentPage.rows.findIndex((row) => row.id === cellFocus.id); + } + return -1; + }, [cellFocus, currentPage.rows]); const getRows = ( params: { @@ -555,28 +555,28 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { // we need to render it at either the top or bottom of the rows, // depending on whether it is above or below the range. - const isRowWithFocusedCellNotInRange = false; - - // if (indexOfRowWithFocusedCell > -1) { - // const rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell]; - // if ( - // firstRowToRender > indexOfRowWithFocusedCell || - // lastRowToRender < indexOfRowWithFocusedCell - // ) { - // isRowWithFocusedCellNotInRange = true; - // if (indexOfRowWithFocusedCell > firstRowToRender) { - // renderedRows.push(rowWithFocusedCell); - // } else { - // renderedRows.unshift(rowWithFocusedCell); - // } - // apiRef.current.calculateColSpan({ - // rowId: rowWithFocusedCell.id, - // minFirstColumn, - // maxLastColumn, - // columns: visibleColumns, - // }); - // } - // } + let isRowWithFocusedCellNotInRange = false; + + if (indexOfRowWithFocusedCell > -1) { + const rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell]; + if ( + firstRowToRender > indexOfRowWithFocusedCell || + lastRowToRender < indexOfRowWithFocusedCell + ) { + isRowWithFocusedCellNotInRange = true; + if (indexOfRowWithFocusedCell > firstRowToRender) { + renderedRows.push(rowWithFocusedCell); + } else { + renderedRows.unshift(rowWithFocusedCell); + } + apiRef.current.calculateColSpan({ + rowId: rowWithFocusedCell.id, + minFirstColumn, + maxLastColumn, + columns: visibleColumns, + }); + } + } const [initialFirstColumnToRender, lastColumnToRender] = getRenderableIndexes({ firstIndex: nextRenderContext.firstColumnIndex, From 1b6ca7013ac753e6c5048fad742e986173f9b9e1 Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Thu, 20 Apr 2023 13:12:49 +0300 Subject: [PATCH 32/57] fix: test fixed fix: test fixed test fix test fix test fix test fix --- .../x-data-grid/src/tests/cells.DataGrid.test.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index 4d8cdcb5e13a..f407e7f01ad7 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -233,20 +233,21 @@ describe(' - Cells', () => { render(
- +
, ); const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; - userEvent.mousePress(getCell(0, 0)); + userEvent.mousePress(getCell(1, 0)); + expect(getActiveCell(), 'getCell focus').to.equal('1-0'); - const scrollTop = 10 * rowHeight; + const scrollTop = 6 * rowHeight; virtualScroller.scrollTop = scrollTop; virtualScroller.dispatchEvent(new Event('scroll')); - expect(virtualScroller.scrollTop).to.equal(scrollTop + 1); - expect(getActiveCell()).to.equal('0-0'); + expect(virtualScroller.scrollTop, 'virtual should scroll').to.equal(scrollTop); + expect(getActiveCell()).to.equal('1-0'); }); }); From e612a3e1f9bc38113cf7399f59a1a45f48abfa8b Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Sat, 22 Apr 2023 12:39:55 +0300 Subject: [PATCH 33/57] refa: code cleanup --- .../x-data-grid/src/components/GridRow.tsx | 30 +++++------------ .../virtualization/useGridVirtualScroller.tsx | 18 +++++++++-- .../src/tests/cells.DataGrid.test.tsx | 32 ------------------- 3 files changed, 23 insertions(+), 57 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 53863fae4135..027f05305f63 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -56,7 +56,7 @@ export interface GridRowProps extends React.HTMLAttributes { tabbableCell: string | null; row?: GridRowModel; isLastVisible?: boolean; - indexOfColumnWithFocusedCellNotInRange?: number; + columnWithFocusedCellNotInRange?: GridStateColDef; isNotVisible?: boolean; onClick?: React.MouseEventHandler; onDoubleClick?: React.MouseEventHandler; @@ -115,7 +115,7 @@ const GridRow = React.forwardRef(function GridRow( firstColumnToRender, lastColumnToRender, isLastVisible = false, - indexOfColumnWithFocusedCellNotInRange, + columnWithFocusedCellNotInRange, isNotVisible, focusedCell, tabbableCell, @@ -300,8 +300,8 @@ const GridRow = React.forwardRef(function GridRow( let cellIsNotVisible = false; if ( - indexOfColumnWithFocusedCellNotInRange && - visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field + columnWithFocusedCellNotInRange && + columnWithFocusedCellNotInRange.field === column.field ) { cellIsNotVisible = true; } else { @@ -393,8 +393,7 @@ const GridRow = React.forwardRef(function GridRow( rowReordering, sortModel.length, focusedCell, - indexOfColumnWithFocusedCellNotInRange, - visibleColumns, + columnWithFocusedCellNotInRange, treeDepth, editRowsState, getCellClassName, @@ -479,19 +478,6 @@ const GridRow = React.forwardRef(function GridRow( const rowType = apiRef.current.getRowNode(rowId)!.type; const cells: JSX.Element[] = []; - const columnWithFocusedCellNotInRange = - indexOfColumnWithFocusedCellNotInRange && - visibleColumns[indexOfColumnWithFocusedCellNotInRange]; - - if (columnWithFocusedCellNotInRange) { - if (!renderedColumns.includes(columnWithFocusedCellNotInRange) && focusedCell) { - renderedColumns.unshift(columnWithFocusedCellNotInRange); - } - if (renderedColumns.includes(columnWithFocusedCellNotInRange) && !focusedCell) { - renderedColumns.shift(); - } - } - for (let i = 0; i < renderedColumns.length; i += 1) { const column = renderedColumns[i]; @@ -502,8 +488,8 @@ const GridRow = React.forwardRef(function GridRow( columnWithFocusedCellNotInRange.field === column.field && focusedCell ) { - indexRelativeToAllColumns = indexOfColumnWithFocusedCellNotInRange; - } else if (indexOfColumnWithFocusedCellNotInRange && focusedCell) { + indexRelativeToAllColumns = visibleColumns.indexOf(columnWithFocusedCellNotInRange); + } else if (columnWithFocusedCellNotInRange && focusedCell) { indexRelativeToAllColumns -= 1; } @@ -587,7 +573,7 @@ GridRow.propTypes = { * If some rows above have expanded children, this index also take those children into account. */ index: PropTypes.number, - indexOfColumnWithFocusedCellNotInRange: PropTypes.number, + columnWithFocusedCellNotInRange: PropTypes.arrayOf(PropTypes.object), isLastVisible: PropTypes.bool, isNotVisible: PropTypes.bool, lastColumnToRender: PropTypes.number, diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index f16dbcc02947..6ac8bc8665d3 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -162,12 +162,15 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const renderedColumns = columns.slice(firstColumnToRender, lastColumnToRender); if (indexOfColumnWithFocusedCell > -1) { + // check if it is not on the left pinned column. if ( firstColumnToRender > indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell >= minFirstColumn ) { indexOfColumnWithFocusedCellNotInRange = indexOfColumnWithFocusedCell; - } else if ( + } + // check if it is not on the right pinned column. + else if ( lastColumnToRender < indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell < maxLastColumn ) { @@ -646,6 +649,15 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null; + const columnWithFocusedCellNotInRange = + indexOfColumnWithFocusedCellNotInRange && + visibleColumns[indexOfColumnWithFocusedCellNotInRange]; + + const renderedColumnsWithFocusedCell = + columnWithFocusedCellNotInRange && focusedCell + ? [columnWithFocusedCellNotInRange, ...renderedColumns] + : renderedColumns; + let tabbableCell: GridRowProps['tabbableCell'] = null; if (cellTabIndex !== null && cellTabIndex.id === id) { const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field); @@ -668,12 +680,12 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { key={id} row={model} rowId={id} - indexOfColumnWithFocusedCellNotInRange={indexOfColumnWithFocusedCellNotInRange} + columnWithFocusedCellNotInRange={columnWithFocusedCellNotInRange} isNotVisible={isRowNotVisible} rowHeight={baseRowHeight} focusedCell={focusedCell} tabbableCell={tabbableCell} - renderedColumns={renderedColumns} + renderedColumns={renderedColumnsWithFocusedCell} visibleColumns={visibleColumns} firstColumnToRender={firstColumnToRender} lastColumnToRender={lastColumnToRender} diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index f407e7f01ad7..a414625d49a0 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -218,36 +218,4 @@ describe(' - Cells', () => { virtualScroller.dispatchEvent(new Event('scroll')); expect(virtualScroller.scrollTop).to.equal(scrollTop); }); - - it('focused cell should always be in the dom even if it is not in the viewport', async function test() { - if (isJSDOM) { - this.skip(); // Needs layout - } - - const rowHeight = 50; - const columns = [{ field: 'id' }]; - const rows = []; - for (let i = 0; i < 20; i += 1) { - rows.push({ id: i }); - } - - render( -
- -
, - ); - - const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; - - userEvent.mousePress(getCell(1, 0)); - expect(getActiveCell(), 'getCell focus').to.equal('1-0'); - - const scrollTop = 6 * rowHeight; - virtualScroller.scrollTop = scrollTop; - - virtualScroller.dispatchEvent(new Event('scroll')); - - expect(virtualScroller.scrollTop, 'virtual should scroll').to.equal(scrollTop); - expect(getActiveCell()).to.equal('1-0'); - }); }); From 9308a50af6604364f85904fdd928d98cdb937ccc Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Sat, 22 Apr 2023 14:10:18 +0300 Subject: [PATCH 34/57] refa: code cleaned --- .../x-data-grid/src/components/GridRow.tsx | 21 ++++++++++--------- .../virtualization/useGridVirtualScroller.tsx | 2 +- .../src/tests/cells.DataGrid.test.tsx | 2 +- 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 027f05305f63..d0f323eb5156 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -56,7 +56,7 @@ export interface GridRowProps extends React.HTMLAttributes { tabbableCell: string | null; row?: GridRowModel; isLastVisible?: boolean; - columnWithFocusedCellNotInRange?: GridStateColDef; + indexOfColumnWithFocusedCellNotInRange?: number; isNotVisible?: boolean; onClick?: React.MouseEventHandler; onDoubleClick?: React.MouseEventHandler; @@ -115,7 +115,7 @@ const GridRow = React.forwardRef(function GridRow( firstColumnToRender, lastColumnToRender, isLastVisible = false, - columnWithFocusedCellNotInRange, + indexOfColumnWithFocusedCellNotInRange, isNotVisible, focusedCell, tabbableCell, @@ -300,8 +300,8 @@ const GridRow = React.forwardRef(function GridRow( let cellIsNotVisible = false; if ( - columnWithFocusedCellNotInRange && - columnWithFocusedCellNotInRange.field === column.field + indexOfColumnWithFocusedCellNotInRange && + visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field ) { cellIsNotVisible = true; } else { @@ -393,7 +393,8 @@ const GridRow = React.forwardRef(function GridRow( rowReordering, sortModel.length, focusedCell, - columnWithFocusedCellNotInRange, + indexOfColumnWithFocusedCellNotInRange, + visibleColumns, treeDepth, editRowsState, getCellClassName, @@ -484,12 +485,12 @@ const GridRow = React.forwardRef(function GridRow( let indexRelativeToAllColumns = firstColumnToRender + i; if ( - columnWithFocusedCellNotInRange && - columnWithFocusedCellNotInRange.field === column.field && + indexOfColumnWithFocusedCellNotInRange && + visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field && focusedCell ) { - indexRelativeToAllColumns = visibleColumns.indexOf(columnWithFocusedCellNotInRange); - } else if (columnWithFocusedCellNotInRange && focusedCell) { + indexRelativeToAllColumns = indexOfColumnWithFocusedCellNotInRange; + } else if (indexOfColumnWithFocusedCellNotInRange && focusedCell) { indexRelativeToAllColumns -= 1; } @@ -573,7 +574,7 @@ GridRow.propTypes = { * If some rows above have expanded children, this index also take those children into account. */ index: PropTypes.number, - columnWithFocusedCellNotInRange: PropTypes.arrayOf(PropTypes.object), + indexOfColumnWithFocusedCellNotInRange: PropTypes.number, isLastVisible: PropTypes.bool, isNotVisible: PropTypes.bool, lastColumnToRender: PropTypes.number, diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 6ac8bc8665d3..257a7d03b69a 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -680,7 +680,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { key={id} row={model} rowId={id} - columnWithFocusedCellNotInRange={columnWithFocusedCellNotInRange} + indexOfColumnWithFocusedCellNotInRange={indexOfColumnWithFocusedCellNotInRange} isNotVisible={isRowNotVisible} rowHeight={baseRowHeight} focusedCell={focusedCell} diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index a414625d49a0..6faa3c7270c8 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -3,7 +3,7 @@ import { spy } from 'sinon'; import { createRenderer, userEvent } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { DataGrid } from '@mui/x-data-grid'; -import { getActiveCell, getCell } from 'test/utils/helperFn'; +import { getCell } from 'test/utils/helperFn'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); From b1fc96fe21eda0dd30a36f73298bcd9a491acea9 Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Wed, 14 Jun 2023 21:55:06 +0300 Subject: [PATCH 35/57] fix: merge clean up --- .../x-data-grid/src/components/GridRow.tsx | 21 ++++++++----------- .../src/components/cell/GridCell.tsx | 1 - 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 6b41d4a18ec8..0ba7057a5c0a 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -266,9 +266,6 @@ const GridRow = React.forwardRef(function GridRow( const rowReordering = (rootProps as any).rowReordering as boolean; - - const CellComponent = slots.cell; - const getCell = ( column: GridStateColDef, cellProps: Pick< @@ -284,16 +281,16 @@ const GridRow = React.forwardRef(function GridRow( Object.keys(editRowsState).length > 0); const editCellState = editRowsState[rowId]?.[column.field] ?? null; - let cellIsNotVisible = false; + let cellIsNotVisible = false; - if ( - indexOfColumnWithFocusedCellNotInRange && - visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field - ) { - cellIsNotVisible = true; - } else { - cellIsNotVisible = false; - } + if ( + indexOfColumnWithFocusedCellNotInRange && + visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field + ) { + cellIsNotVisible = true; + } else { + cellIsNotVisible = false; + } return ( Date: Wed, 14 Jun 2023 22:12:45 +0300 Subject: [PATCH 36/57] fix: proptypes fix --- packages/grid/x-data-grid/src/components/cell/GridCell.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index d77ab9505e48..985114b8e8c3 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -804,12 +804,6 @@ GridCellV7.propTypes = { colSpan: PropTypes.number, column: PropTypes.object, disableDragEvents: PropTypes.bool, - editCellState: PropTypes.shape({ - changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']), - isProcessingProps: PropTypes.bool, - isValidating: PropTypes.bool, - value: PropTypes.any, - }), height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), isNotVisible: PropTypes.bool, onClick: PropTypes.func, From 392f5cbfeb2ef89aa98cfcb44ff7b7f180ed8c3b Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Fri, 16 Jun 2023 02:30:00 +0300 Subject: [PATCH 37/57] fix: check for undefined fix --- packages/grid/x-data-grid/src/components/GridRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 0ba7057a5c0a..03a6c8f93af0 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -284,7 +284,7 @@ const GridRow = React.forwardRef(function GridRow( let cellIsNotVisible = false; if ( - indexOfColumnWithFocusedCellNotInRange && + indexOfColumnWithFocusedCellNotInRange !== undefined && visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field ) { cellIsNotVisible = true; From 3083648ebb0ad0e51d1b7fc184eadca44d5a24f2 Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Fri, 16 Jun 2023 02:33:09 +0300 Subject: [PATCH 38/57] refa: removed hardcode string --- .../src/hooks/features/rowReorder/useGridRowReorder.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx index aafcba870aa7..6cd1f1e84716 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx @@ -15,6 +15,7 @@ import { gridEditRowsStateSelector } from '@mui/x-data-grid/internals'; import { GridRowOrderChangeParams } from '../../../models/gridRowOrderChangeParams'; import { GridPrivateApiPro } from '../../../models/gridApiPro'; import { DataGridProProcessedProps } from '../../../models/dataGridProProps'; +import { GRID_REORDER_COL_DEF } from './gridRowReorderColDef'; type OwnerState = { classes: DataGridProProcessedProps['classes'] }; @@ -81,7 +82,7 @@ export const useGridRowReorder = ( }); originRowIndex.current = apiRef.current.getRowIndexRelativeToVisibleRows(params.id); - apiRef.current.setCellFocus(params.id, '__reorder__'); + apiRef.current.setCellFocus(params.id, GRID_REORDER_COL_DEF.field); }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef], ); From b72cdec516448258fb1d0be12217b97e0908d963 Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Fri, 16 Jun 2023 03:16:02 +0300 Subject: [PATCH 39/57] fix: undefined check fix --- .../hooks/features/virtualization/useGridVirtualScroller.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index fbbfae3e3481..b0323a139d5e 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -659,7 +659,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null; const columnWithFocusedCellNotInRange = - indexOfColumnWithFocusedCellNotInRange && + indexOfColumnWithFocusedCellNotInRange !== undefined && visibleColumns[indexOfColumnWithFocusedCellNotInRange]; const renderedColumnsWithFocusedCell = From 8d7d97ebd1277911d15a05e3df483b5d2bd02415 Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Fri, 16 Jun 2023 04:18:05 +0300 Subject: [PATCH 40/57] fix --- packages/grid/x-data-grid/src/components/cell/GridCell.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index 985114b8e8c3..98282532f9c2 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -403,6 +403,7 @@ const GridCell = React.forwardRef((props, ref) => let children: React.ReactNode = childrenProp; if (children === undefined) { const valueString = valueToRender?.toString(); + children = (
{valueString} From 47eab4e0e4cfcf7aa6aaf649dafa383b7794b3d2 Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Fri, 16 Jun 2023 09:05:47 +0300 Subject: [PATCH 41/57] refa: var name changed --- .../x-data-grid/src/components/GridRow.tsx | 18 +++++------ .../virtualization/useGridVirtualScroller.tsx | 31 +++++++++---------- 2 files changed, 24 insertions(+), 25 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 03a6c8f93af0..ffb99d6bbc4d 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -57,7 +57,7 @@ export interface GridRowProps extends React.HTMLAttributes { tabbableCell: string | null; row?: GridRowModel; isLastVisible?: boolean; - indexOfColumnWithFocusedCellNotInRange?: number; + focusedCellColumnIndexNotInRange?: number; isNotVisible?: boolean; onClick?: React.MouseEventHandler; onDoubleClick?: React.MouseEventHandler; @@ -116,7 +116,7 @@ const GridRow = React.forwardRef(function GridRow( firstColumnToRender, lastColumnToRender, isLastVisible = false, - indexOfColumnWithFocusedCellNotInRange, + focusedCellColumnIndexNotInRange, isNotVisible, focusedCell, tabbableCell, @@ -284,8 +284,8 @@ const GridRow = React.forwardRef(function GridRow( let cellIsNotVisible = false; if ( - indexOfColumnWithFocusedCellNotInRange !== undefined && - visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field + focusedCellColumnIndexNotInRange !== undefined && + visibleColumns[focusedCellColumnIndexNotInRange].field === column.field ) { cellIsNotVisible = true; } else { @@ -400,12 +400,12 @@ const GridRow = React.forwardRef(function GridRow( let indexRelativeToAllColumns = firstColumnToRender + i; if ( - indexOfColumnWithFocusedCellNotInRange && - visibleColumns[indexOfColumnWithFocusedCellNotInRange].field === column.field && + focusedCellColumnIndexNotInRange && + visibleColumns[focusedCellColumnIndexNotInRange].field === column.field && focusedCell ) { - indexRelativeToAllColumns = indexOfColumnWithFocusedCellNotInRange; - } else if (indexOfColumnWithFocusedCellNotInRange && focusedCell) { + indexRelativeToAllColumns = focusedCellColumnIndexNotInRange; + } else if (focusedCellColumnIndexNotInRange && focusedCell) { indexRelativeToAllColumns -= 1; } @@ -489,7 +489,7 @@ GridRow.propTypes = { * If some rows above have expanded children, this index also take those children into account. */ index: PropTypes.number, - indexOfColumnWithFocusedCellNotInRange: PropTypes.number, + focusedCellColumnIndexNotInRange: PropTypes.number, isLastVisible: PropTypes.bool, isNotVisible: PropTypes.bool, lastColumnToRender: PropTypes.number, diff --git a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index b0323a139d5e..09de704ee5b3 100644 --- a/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -165,7 +165,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { // If the selected column is not within the current range of columns being displayed, // we need to render it at either the left or right of the columns, // depending on whether it is above or below the range. - let indexOfColumnWithFocusedCellNotInRange; + let focusedCellColumnIndexNotInRange; const renderedColumns = columns.slice(firstColumnToRender, lastColumnToRender); @@ -175,19 +175,19 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { firstColumnToRender > indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell >= minFirstColumn ) { - indexOfColumnWithFocusedCellNotInRange = indexOfColumnWithFocusedCell; + focusedCellColumnIndexNotInRange = indexOfColumnWithFocusedCell; } // check if it is not on the right pinned column. else if ( lastColumnToRender < indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell < maxLastColumn ) { - indexOfColumnWithFocusedCellNotInRange = indexOfColumnWithFocusedCell; + focusedCellColumnIndexNotInRange = indexOfColumnWithFocusedCell; } } return { - indexOfColumnWithFocusedCellNotInRange, + focusedCellColumnIndexNotInRange, renderedColumns, }; }, @@ -614,15 +614,14 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { isColumnWihFocusedCellNotInRange = true; } - const { indexOfColumnWithFocusedCellNotInRange, renderedColumns } = - getRenderedColumnsRef.current( - visibleColumns, - firstColumnToRender, - lastColumnToRender, - minFirstColumn, - maxLastColumn, - isColumnWihFocusedCellNotInRange ? indexOfColumnWithFocusedCell : -1, - ); + const { focusedCellColumnIndexNotInRange, renderedColumns } = getRenderedColumnsRef.current( + visibleColumns, + firstColumnToRender, + lastColumnToRender, + minFirstColumn, + maxLastColumn, + isColumnWihFocusedCellNotInRange ? indexOfColumnWithFocusedCell : -1, + ); const { style: rootRowStyle, ...rootRowProps } = rootProps.slotProps?.row || {}; @@ -659,8 +658,8 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { const focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null; const columnWithFocusedCellNotInRange = - indexOfColumnWithFocusedCellNotInRange !== undefined && - visibleColumns[indexOfColumnWithFocusedCellNotInRange]; + focusedCellColumnIndexNotInRange !== undefined && + visibleColumns[focusedCellColumnIndexNotInRange]; const renderedColumnsWithFocusedCell = columnWithFocusedCellNotInRange && focusedCell @@ -689,7 +688,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => { key={id} row={model} rowId={id} - indexOfColumnWithFocusedCellNotInRange={indexOfColumnWithFocusedCellNotInRange} + focusedCellColumnIndexNotInRange={focusedCellColumnIndexNotInRange} isNotVisible={isRowNotVisible} rowHeight={baseRowHeight} focusedCell={focusedCell} From f25ccdce5eadeb25e1fb6ff5ae7012583db7ef2e Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Fri, 16 Jun 2023 09:46:41 +0300 Subject: [PATCH 42/57] fix: proptype --- packages/grid/x-data-grid/src/components/GridRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index ffb99d6bbc4d..ee259c2a3331 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -484,12 +484,12 @@ GridRow.propTypes = { * If `null`, no cell in this row has focus. */ focusedCell: PropTypes.string, + focusedCellColumnIndexNotInRange: PropTypes.number, /** * Index of the row in the whole sorted and filtered dataset. * If some rows above have expanded children, this index also take those children into account. */ index: PropTypes.number, - focusedCellColumnIndexNotInRange: PropTypes.number, isLastVisible: PropTypes.bool, isNotVisible: PropTypes.bool, lastColumnToRender: PropTypes.number, From 65cf4729e94131f46cbbe9f5f595baccd5ee567e Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Tue, 20 Jun 2023 18:53:33 +0300 Subject: [PATCH 43/57] fixes --- packages/grid/x-data-grid/src/components/GridRow.tsx | 4 +--- packages/grid/x-data-grid/src/components/cell/GridCell.tsx | 2 ++ 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 30e7309ef734..00d7746102bd 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -288,8 +288,6 @@ const GridRow = React.forwardRef(function GridRow( visibleColumns[focusedCellColumnIndexNotInRange].field === column.field ) { cellIsNotVisible = true; - } else { - cellIsNotVisible = false; } return ( @@ -400,7 +398,7 @@ const GridRow = React.forwardRef(function GridRow( let indexRelativeToAllColumns = firstColumnToRender + i; if ( - focusedCellColumnIndexNotInRange && + focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field && focusedCell ) { diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index 3631b1dd124f..7b77d13d26a6 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -18,6 +18,7 @@ import { GridCellModes, GridRowId, GridCellMode, + GridEditCellProps, } from '../../models'; import { GridRenderEditCellParams, @@ -45,6 +46,7 @@ type GridCellV7Props = { colSpan?: number; disableDragEvents?: boolean; isNotVisible?: boolean; + editCellState: GridEditCellProps | null; onClick?: React.MouseEventHandler; onDoubleClick?: React.MouseEventHandler; onMouseDown?: React.MouseEventHandler; From a6ec44e14e3038c9fe65073e6fd10f714600d1d2 Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Tue, 20 Jun 2023 19:12:20 +0300 Subject: [PATCH 44/57] proptypes --- .../x-data-grid/src/components/GridRow.tsx | 21 +++++++++---------- .../src/components/cell/GridCell.tsx | 14 ++++++------- .../src/components/cell/GridEditInputCell.tsx | 18 ++++++++-------- 3 files changed, 26 insertions(+), 27 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 00d7746102bd..91caed6cc95e 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -475,8 +475,8 @@ GridRow.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - containerWidth: PropTypes.number.isRequired, - firstColumnToRender: PropTypes.number.isRequired, + containerWidth: PropTypes.number, + firstColumnToRender: PropTypes.number, /** * Determines which cell has focus. * If `null`, no cell in this row has focus. @@ -487,27 +487,26 @@ GridRow.propTypes = { * Index of the row in the whole sorted and filtered dataset. * If some rows above have expanded children, this index also take those children into account. */ - index: PropTypes.number.isRequired, + index: PropTypes.number, isLastVisible: PropTypes.bool, isNotVisible: PropTypes.bool, - lastColumnToRender: PropTypes.number.isRequired, - + lastColumnToRender: PropTypes.number, onClick: PropTypes.func, onDoubleClick: PropTypes.func, onMouseEnter: PropTypes.func, onMouseLeave: PropTypes.func, - position: PropTypes.oneOf(['center', 'left', 'right']).isRequired, - renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired, + position: PropTypes.oneOf(['center', 'left', 'right']), + renderedColumns: PropTypes.arrayOf(PropTypes.object), row: PropTypes.object, - rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, - rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - selected: PropTypes.bool.isRequired, + rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), + rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + selected: PropTypes.bool, /** * Determines which cell should be tabbable by having tabIndex=0. * If `null`, no cell in this row is in the tab sequence. */ tabbableCell: PropTypes.string, - visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired, + visibleColumns: PropTypes.arrayOf(PropTypes.object), } as any; const MemoizedGridRow = fastMemo(GridRow); diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index 7b77d13d26a6..9900b5cdf18f 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -801,20 +801,20 @@ GridCellV7.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - align: PropTypes.oneOf(['center', 'left', 'right']).isRequired, + align: PropTypes.oneOf(['center', 'left', 'right']), className: PropTypes.string, - colIndex: PropTypes.number.isRequired, + colIndex: PropTypes.number, colSpan: PropTypes.number, - column: PropTypes.object.isRequired, + column: PropTypes.object, disableDragEvents: PropTypes.bool, - isNotVisible: PropTypes.bool, editCellState: PropTypes.shape({ changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']), isProcessingProps: PropTypes.bool, isValidating: PropTypes.bool, value: PropTypes.any, }), - height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, + height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), + isNotVisible: PropTypes.bool, onClick: PropTypes.func, onDoubleClick: PropTypes.func, onDragEnter: PropTypes.func, @@ -822,9 +822,9 @@ GridCellV7.propTypes = { onKeyDown: PropTypes.func, onMouseDown: PropTypes.func, onMouseUp: PropTypes.func, - rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), showRightBorder: PropTypes.bool, - width: PropTypes.number.isRequired, + width: PropTypes.number, } as any; const MemoizedGridCellV7 = fastMemo(GridCellV7); diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx index e1d1b6f51b88..5cc528ceb64f 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx @@ -151,21 +151,21 @@ GridEditInputCell.propTypes = { /** * GridApi that let you manipulate the grid. */ - api: PropTypes.object.isRequired, + api: PropTypes.object, /** * The mode of the cell. */ - cellMode: PropTypes.oneOf(['edit', 'view']).isRequired, + cellMode: PropTypes.oneOf(['edit', 'view']), changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']), /** * The column of the row that the current cell belongs to. */ - colDef: PropTypes.object.isRequired, + colDef: PropTypes.object, debounceMs: PropTypes.number, /** * The column field of the cell that triggered the event. */ - field: PropTypes.string.isRequired, + field: PropTypes.string, /** * The cell value formatted with the column valueFormatter. */ @@ -173,11 +173,11 @@ GridEditInputCell.propTypes = { /** * If true, the cell is the active element. */ - hasFocus: PropTypes.bool.isRequired, + hasFocus: PropTypes.bool, /** * The grid row id. */ - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * If true, the cell is editable. */ @@ -194,15 +194,15 @@ GridEditInputCell.propTypes = { /** * The row model of the row that the current cell belongs to. */ - row: PropTypes.any.isRequired, + row: PropTypes.any, /** * The node of the row that the current cell belongs to. */ - rowNode: PropTypes.object.isRequired, + rowNode: PropTypes.object, /** * the tabIndex value. */ - tabIndex: PropTypes.oneOf([-1, 0]).isRequired, + tabIndex: PropTypes.oneOf([-1, 0]), /** * The cell value. * If the column has `valueGetter`, use `params.row` to directly access the fields. From cf7659346a6adf5f7815fd91babcf3dc4318d611 Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Tue, 20 Jun 2023 23:22:15 +0300 Subject: [PATCH 45/57] fix: undefined check added --- packages/grid/x-data-grid/src/components/GridRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 91caed6cc95e..8a228ca630b7 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -403,7 +403,7 @@ const GridRow = React.forwardRef(function GridRow( focusedCell ) { indexRelativeToAllColumns = focusedCellColumnIndexNotInRange; - } else if (focusedCellColumnIndexNotInRange && focusedCell) { + } else if (focusedCellColumnIndexNotInRange !== undefined && focusedCell) { indexRelativeToAllColumns -= 1; } From bdcee3a88dab2b2ccc52df0d38456fdd1c8f6796 Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Fri, 23 Jun 2023 01:18:37 +0300 Subject: [PATCH 46/57] fix: yarn prop type fix --- .../x-data-grid/src/components/GridRow.tsx | 20 +++++++++---------- .../src/components/cell/GridCell.tsx | 12 +++++------ .../src/components/cell/GridEditInputCell.tsx | 18 ++++++++--------- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 8a228ca630b7..e4d1042bd740 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -475,8 +475,8 @@ GridRow.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - containerWidth: PropTypes.number, - firstColumnToRender: PropTypes.number, + containerWidth: PropTypes.number.isRequired, + firstColumnToRender: PropTypes.number.isRequired, /** * Determines which cell has focus. * If `null`, no cell in this row has focus. @@ -487,26 +487,26 @@ GridRow.propTypes = { * Index of the row in the whole sorted and filtered dataset. * If some rows above have expanded children, this index also take those children into account. */ - index: PropTypes.number, + index: PropTypes.number.isRequired, isLastVisible: PropTypes.bool, isNotVisible: PropTypes.bool, - lastColumnToRender: PropTypes.number, + lastColumnToRender: PropTypes.number.isRequired, onClick: PropTypes.func, onDoubleClick: PropTypes.func, onMouseEnter: PropTypes.func, onMouseLeave: PropTypes.func, - position: PropTypes.oneOf(['center', 'left', 'right']), - renderedColumns: PropTypes.arrayOf(PropTypes.object), + position: PropTypes.oneOf(['center', 'left', 'right']).isRequired, + renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired, row: PropTypes.object, - rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), - rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - selected: PropTypes.bool, + rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, + rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + selected: PropTypes.bool.isRequired, /** * Determines which cell should be tabbable by having tabIndex=0. * If `null`, no cell in this row is in the tab sequence. */ tabbableCell: PropTypes.string, - visibleColumns: PropTypes.arrayOf(PropTypes.object), + visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired, } as any; const MemoizedGridRow = fastMemo(GridRow); diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index 9900b5cdf18f..314bc5b71cc6 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -801,11 +801,11 @@ GridCellV7.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - align: PropTypes.oneOf(['center', 'left', 'right']), + align: PropTypes.oneOf(['center', 'left', 'right']).isRequired, className: PropTypes.string, - colIndex: PropTypes.number, + colIndex: PropTypes.number.isRequired, colSpan: PropTypes.number, - column: PropTypes.object, + column: PropTypes.object.isRequired, disableDragEvents: PropTypes.bool, editCellState: PropTypes.shape({ changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']), @@ -813,7 +813,7 @@ GridCellV7.propTypes = { isValidating: PropTypes.bool, value: PropTypes.any, }), - height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), + height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, isNotVisible: PropTypes.bool, onClick: PropTypes.func, onDoubleClick: PropTypes.func, @@ -822,9 +822,9 @@ GridCellV7.propTypes = { onKeyDown: PropTypes.func, onMouseDown: PropTypes.func, onMouseUp: PropTypes.func, - rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, showRightBorder: PropTypes.bool, - width: PropTypes.number, + width: PropTypes.number.isRequired, } as any; const MemoizedGridCellV7 = fastMemo(GridCellV7); diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx index 5cc528ceb64f..e1d1b6f51b88 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx @@ -151,21 +151,21 @@ GridEditInputCell.propTypes = { /** * GridApi that let you manipulate the grid. */ - api: PropTypes.object, + api: PropTypes.object.isRequired, /** * The mode of the cell. */ - cellMode: PropTypes.oneOf(['edit', 'view']), + cellMode: PropTypes.oneOf(['edit', 'view']).isRequired, changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']), /** * The column of the row that the current cell belongs to. */ - colDef: PropTypes.object, + colDef: PropTypes.object.isRequired, debounceMs: PropTypes.number, /** * The column field of the cell that triggered the event. */ - field: PropTypes.string, + field: PropTypes.string.isRequired, /** * The cell value formatted with the column valueFormatter. */ @@ -173,11 +173,11 @@ GridEditInputCell.propTypes = { /** * If true, the cell is the active element. */ - hasFocus: PropTypes.bool, + hasFocus: PropTypes.bool.isRequired, /** * The grid row id. */ - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, /** * If true, the cell is editable. */ @@ -194,15 +194,15 @@ GridEditInputCell.propTypes = { /** * The row model of the row that the current cell belongs to. */ - row: PropTypes.any, + row: PropTypes.any.isRequired, /** * The node of the row that the current cell belongs to. */ - rowNode: PropTypes.object, + rowNode: PropTypes.object.isRequired, /** * the tabIndex value. */ - tabIndex: PropTypes.oneOf([-1, 0]), + tabIndex: PropTypes.oneOf([-1, 0]).isRequired, /** * The cell value. * If the column has `valueGetter`, use `params.row` to directly access the fields. From 35830a7309a47317192540304ffd5416d02d0c5f Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Sat, 8 Jul 2023 21:11:08 +0300 Subject: [PATCH 47/57] test: test added --- .../src/tests/cells.DataGrid.test.tsx | 39 ++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index 6faa3c7270c8..647ad943e551 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -3,7 +3,8 @@ import { spy } from 'sinon'; import { createRenderer, userEvent } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { DataGrid } from '@mui/x-data-grid'; -import { getCell } from 'test/utils/helperFn'; +import { getCell,getActiveCell } from 'test/utils/helperFn'; +import { getBasicGridData } from '@mui/x-data-grid-generator'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -184,6 +185,42 @@ describe(' - Cells', () => { }).toWarnDev(['MUI: The cell with id=1 and field=brand received focus.']); }); + it('selected cell should alwys been in the dom,',function(){ + if(isJSDOM){ + this.skip() + } + const rowHeight = 50; + const defaultData = getBasicGridData(20, 20); + + render( +
+ +
, + ); + + const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; + + const thirdRowCell = getCell(1, 3); + userEvent.mousePress(thirdRowCell); + + const activeElementTextContent= document.activeElement?.textContent + const columnWidth = document.activeElement!.clientWidth + + // check for row virtualazition + let scrollTop = 10 * rowHeight; + virtualScroller.scrollTop = scrollTop; + virtualScroller.dispatchEvent(new Event('scroll')); + + expect(document.activeElement?.textContent).to.equal(activeElementTextContent) + + // check for column virtualization + let scrollLeft = 10 * columnWidth + virtualScroller.scrollLeft = scrollLeft + virtualScroller.dispatchEvent(new Event('scroll')); + + expect(document.activeElement?.textContent).to.equal(activeElementTextContent) + }) + // See https://github.com/mui/mui-x/issues/6378 it('should not cause scroll jump when focused cell mounts in the render zone', async function test() { if (isJSDOM) { From 8cba5432ee7728176c6b4a8dc54b3950572e93a9 Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Sun, 9 Jul 2023 21:03:34 +0300 Subject: [PATCH 48/57] eslint fix --- .../src/tests/cells.DataGrid.test.tsx | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index 647ad943e551..e17d338b8ec9 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -3,7 +3,7 @@ import { spy } from 'sinon'; import { createRenderer, userEvent } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { DataGrid } from '@mui/x-data-grid'; -import { getCell,getActiveCell } from 'test/utils/helperFn'; +import { getCell } from 'test/utils/helperFn'; import { getBasicGridData } from '@mui/x-data-grid-generator'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -185,9 +185,9 @@ describe(' - Cells', () => { }).toWarnDev(['MUI: The cell with id=1 and field=brand received focus.']); }); - it('selected cell should alwys been in the dom,',function(){ - if(isJSDOM){ - this.skip() + it('selected cell should alwys been in the dom,', function () { + if (isJSDOM) { + this.skip(); } const rowHeight = 50; const defaultData = getBasicGridData(20, 20); @@ -198,28 +198,28 @@ describe(' - Cells', () => {
, ); - const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; + const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; const thirdRowCell = getCell(1, 3); userEvent.mousePress(thirdRowCell); - const activeElementTextContent= document.activeElement?.textContent - const columnWidth = document.activeElement!.clientWidth + const activeElementTextContent = document.activeElement?.textContent; + const columnWidth = document.activeElement!.clientWidth; // check for row virtualazition - let scrollTop = 10 * rowHeight; + const scrollTop = 10 * rowHeight; virtualScroller.scrollTop = scrollTop; virtualScroller.dispatchEvent(new Event('scroll')); - expect(document.activeElement?.textContent).to.equal(activeElementTextContent) - + expect(document.activeElement?.textContent).to.equal(activeElementTextContent); + // check for column virtualization - let scrollLeft = 10 * columnWidth - virtualScroller.scrollLeft = scrollLeft + const scrollLeft = 10 * columnWidth; + virtualScroller.scrollLeft = scrollLeft; virtualScroller.dispatchEvent(new Event('scroll')); - expect(document.activeElement?.textContent).to.equal(activeElementTextContent) - }) + expect(document.activeElement?.textContent).to.equal(activeElementTextContent); + }); // See https://github.com/mui/mui-x/issues/6378 it('should not cause scroll jump when focused cell mounts in the render zone', async function test() { From bca5e68384ebceac57ceb0605d65ee0121b0a53b Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Sun, 9 Jul 2023 21:17:23 +0300 Subject: [PATCH 49/57] refa: code refactored --- .../x-data-grid/src/components/GridRow.tsx | 11 ++++---- .../src/components/cell/GridCell.tsx | 26 +++++++++---------- 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index e4d1042bd740..bb527755958b 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -336,11 +336,6 @@ const GridRow = React.forwardRef(function GridRow( } const style = React.useMemo(() => { - const rowStyle = { - ...styleProp, - maxHeight: rowHeight === 'auto' ? 'none' : rowHeight, // max-height doesn't support "auto" - minHeight, - }; if (isNotVisible) { return { opacity: 0, @@ -349,6 +344,12 @@ const GridRow = React.forwardRef(function GridRow( }; } + const rowStyle = { + ...styleProp, + maxHeight: rowHeight === 'auto' ? 'none' : rowHeight, // max-height doesn't support "auto" + minHeight, + }; + if (sizes?.spacingTop) { const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop'; rowStyle[property] = sizes.spacingTop; diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index 129292a2570b..20ebcdf25dff 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -333,13 +333,6 @@ const GridCell = React.forwardRef((props, ref) => ); const style = React.useMemo(() => { - const cellStyle = { - minWidth: width, - maxWidth: width, - minHeight: height, - maxHeight: height === 'auto' ? 'none' : height, // max-height doesn't support "auto" - }; - if (isNotVisible) { return { padding: 0, @@ -347,6 +340,12 @@ const GridCell = React.forwardRef((props, ref) => width: 0, }; } + const cellStyle = { + minWidth: width, + maxWidth: width, + minHeight: height, + maxHeight: height === 'auto' ? 'none' : height, // max-height doesn't support "auto" + }; return cellStyle; }, [width, height, isNotVisible]); @@ -654,13 +653,6 @@ const GridCellV7 = React.forwardRef((props, ref ); const style = React.useMemo(() => { - const cellStyle = { - minWidth: width, - maxWidth: width, - minHeight: height, - maxHeight: height === 'auto' ? 'none' : height, // max-height doesn't support "auto" - }; - if (isNotVisible) { return { padding: 0, @@ -668,6 +660,12 @@ const GridCellV7 = React.forwardRef((props, ref width: 0, }; } + const cellStyle = { + minWidth: width, + maxWidth: width, + minHeight: height, + maxHeight: height === 'auto' ? 'none' : height, // max-height doesn't support "auto" + }; return cellStyle; }, [width, height, isNotVisible]); From c325dc1baf579fd7353372e46a9b022131bc66cd Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Sun, 9 Jul 2023 21:27:24 +0300 Subject: [PATCH 50/57] fix: eslint fix --- packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index e17d338b8ec9..afdd10b9c3df 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -185,7 +185,7 @@ describe(' - Cells', () => { }).toWarnDev(['MUI: The cell with id=1 and field=brand received focus.']); }); - it('selected cell should alwys been in the dom,', function () { + it('selected cell should alwys been in the dom,', function test() { if (isJSDOM) { this.skip(); } From 59b37fc385cdeebd3a97643d1674c06fd1711cca Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Mon, 10 Jul 2023 08:25:51 +0300 Subject: [PATCH 51/57] test: fix typo --- packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index afdd10b9c3df..cdfa7c24fb7c 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -185,7 +185,7 @@ describe(' - Cells', () => { }).toWarnDev(['MUI: The cell with id=1 and field=brand received focus.']); }); - it('selected cell should alwys been in the dom,', function test() { + it('Should be in the DOM even if when the focused cell is out of viewport.', function test() { if (isJSDOM) { this.skip(); } From 9d68ff351aaaabcfbc7489c02be2e26f20febedb Mon Sep 17 00:00:00 2001 From: Yared Tsegaye Date: Mon, 10 Jul 2023 08:40:35 +0300 Subject: [PATCH 52/57] refa: fireEvent implemted --- .../grid/x-data-grid/src/tests/cells.DataGrid.test.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index cdfa7c24fb7c..7279552da6b6 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { spy } from 'sinon'; -import { createRenderer, userEvent } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, userEvent } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { DataGrid } from '@mui/x-data-grid'; import { getCell } from 'test/utils/helperFn'; @@ -208,15 +208,12 @@ describe(' - Cells', () => { // check for row virtualazition const scrollTop = 10 * rowHeight; - virtualScroller.scrollTop = scrollTop; - virtualScroller.dispatchEvent(new Event('scroll')); - + fireEvent.scroll(virtualScroller, { target: { scrollTop } }); expect(document.activeElement?.textContent).to.equal(activeElementTextContent); // check for column virtualization const scrollLeft = 10 * columnWidth; - virtualScroller.scrollLeft = scrollLeft; - virtualScroller.dispatchEvent(new Event('scroll')); + fireEvent.scroll(virtualScroller, { target: { scrollLeft } }); expect(document.activeElement?.textContent).to.equal(activeElementTextContent); }); From b0c3faa22d3aa28090393706a673985f61ff70a3 Mon Sep 17 00:00:00 2001 From: yaredtsyg <138383799+yaredtsyg@users.noreply.github.com> Date: Mon, 10 Jul 2023 16:06:00 +0300 Subject: [PATCH 53/57] removed unceary comments --- packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index 7279552da6b6..1118e396e5eb 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -206,12 +206,10 @@ describe(' - Cells', () => { const activeElementTextContent = document.activeElement?.textContent; const columnWidth = document.activeElement!.clientWidth; - // check for row virtualazition const scrollTop = 10 * rowHeight; fireEvent.scroll(virtualScroller, { target: { scrollTop } }); expect(document.activeElement?.textContent).to.equal(activeElementTextContent); - - // check for column virtualization + const scrollLeft = 10 * columnWidth; fireEvent.scroll(virtualScroller, { target: { scrollLeft } }); From 269f190058e3e34b57f28ed0ded019e016ef621a Mon Sep 17 00:00:00 2001 From: yaredtsyg Date: Mon, 10 Jul 2023 18:03:06 +0300 Subject: [PATCH 54/57] comment refactored --- packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index 1118e396e5eb..e969d4e60a7a 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -185,7 +185,7 @@ describe(' - Cells', () => { }).toWarnDev(['MUI: The cell with id=1 and field=brand received focus.']); }); - it('Should be in the DOM even if when the focused cell is out of viewport.', function test() { + it('should not change the active component when the active focused cell gets out of viewport', function test() { if (isJSDOM) { this.skip(); } From 32bc12d1cd56da392074fd4588e7da56541672ef Mon Sep 17 00:00:00 2001 From: yaredtsyg Date: Mon, 10 Jul 2023 18:04:10 +0300 Subject: [PATCH 55/57] prettier --- packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index e969d4e60a7a..29341eee409b 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -209,7 +209,7 @@ describe(' - Cells', () => { const scrollTop = 10 * rowHeight; fireEvent.scroll(virtualScroller, { target: { scrollTop } }); expect(document.activeElement?.textContent).to.equal(activeElementTextContent); - + const scrollLeft = 10 * columnWidth; fireEvent.scroll(virtualScroller, { target: { scrollLeft } }); From ef75b506dd2fee2069394a8bc0cba92473237380 Mon Sep 17 00:00:00 2001 From: yaredtsyg Date: Mon, 10 Jul 2023 18:52:02 +0300 Subject: [PATCH 56/57] refactored --- packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx index 29341eee409b..2e30f5644374 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -185,7 +185,7 @@ describe(' - Cells', () => { }).toWarnDev(['MUI: The cell with id=1 and field=brand received focus.']); }); - it('should not change the active component when the active focused cell gets out of viewport', function test() { + it('should keep the focused cell/row rendered in the DOM if it scrolls outside the viewport', function test() { if (isJSDOM) { this.skip(); } @@ -200,8 +200,8 @@ describe(' - Cells', () => { const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; - const thirdRowCell = getCell(1, 3); - userEvent.mousePress(thirdRowCell); + const cell = getCell(1, 3); + userEvent.mousePress(cell); const activeElementTextContent = document.activeElement?.textContent; const columnWidth = document.activeElement!.clientWidth; From 22ce1e5fcced33890ec513875cdd93931e59cca3 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Fri, 21 Jul 2023 15:39:03 -0400 Subject: [PATCH 57/57] Update packages/grid/x-data-grid/src/components/GridRow.tsx Co-authored-by: Andrew Cherniavskii Signed-off-by: Rom Grk --- .../grid/x-data-grid/src/components/GridRow.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index bb527755958b..194d14355f0e 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -398,14 +398,12 @@ const GridRow = React.forwardRef(function GridRow( let indexRelativeToAllColumns = firstColumnToRender + i; - if ( - focusedCellColumnIndexNotInRange !== undefined && - visibleColumns[focusedCellColumnIndexNotInRange].field === column.field && - focusedCell - ) { - indexRelativeToAllColumns = focusedCellColumnIndexNotInRange; - } else if (focusedCellColumnIndexNotInRange !== undefined && focusedCell) { - indexRelativeToAllColumns -= 1; + if (focusedCellColumnIndexNotInRange !== undefined && focusedCell) { + if (visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) { + indexRelativeToAllColumns = focusedCellColumnIndexNotInRange; + } else { + indexRelativeToAllColumns -= 1; + } } const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(