diff --git a/CHANGELOG.md b/CHANGELOG.md index 1bbc092b573..c014458e0c0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ ## [`main`](https://github.com/elastic/eui/tree/main) -No public interface changes since `46.1.0`. +**Bug fixes** + +- Fixed EuiDataGrid height issue when in full-screen mode and with scrolling content ([#5557](https://github.com/elastic/eui/pull/5557)) ## [`46.1.0`](https://github.com/elastic/eui/tree/v46.1.0) diff --git a/src/components/datagrid/body/data_grid_body.test.tsx b/src/components/datagrid/body/data_grid_body.test.tsx index a6fe83ddf1a..80ae06ffbc7 100644 --- a/src/components/datagrid/body/data_grid_body.test.tsx +++ b/src/components/datagrid/body/data_grid_body.test.tsx @@ -17,11 +17,9 @@ import { EuiDataGridBody, Cell } from './data_grid_body'; describe('EuiDataGridBody', () => { const requiredProps = { - isFullScreen: false, headerIsInteractive: true, rowCount: 1, visibleRows: { startRow: 0, endRow: 1, visibleRowCount: 1 }, - toolbarHeight: 10, columnWidths: { columnA: 20 }, columns: [ { id: 'columnA', schema: 'boolean' }, diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx index e6912ae358e..f4771e1bd1c 100644 --- a/src/components/datagrid/body/data_grid_body.tsx +++ b/src/components/datagrid/body/data_grid_body.tsx @@ -219,7 +219,6 @@ export const EuiDataGridBody: FunctionComponent = ( props ) => { const { - isFullScreen, leadingControlColumns, trailingControlColumns, columns, @@ -238,7 +237,6 @@ export const EuiDataGridBody: FunctionComponent = ( setVisibleColumns, switchColumnPos, onColumnResize, - toolbarHeight, rowHeightsOptions, virtualizationOptions, gridStyles, @@ -416,11 +414,7 @@ export const EuiDataGridBody: FunctionComponent = ( unconstrainedWidth: 0, // unable to determine this until the container's size is known wrapperDimensions, wrapperRef, - toolbarHeight, - headerRowHeight, - footerRowHeight, rowCount, - isFullScreen, }); /** diff --git a/src/components/datagrid/controls/data_grid_toolbar.test.tsx b/src/components/datagrid/controls/data_grid_toolbar.test.tsx index 6a5683220d5..c231b87aa4c 100644 --- a/src/components/datagrid/controls/data_grid_toolbar.test.tsx +++ b/src/components/datagrid/controls/data_grid_toolbar.test.tsx @@ -25,7 +25,6 @@ describe('EuiDataGridToolbar', () => { controlBtnClasses: '', columnSelector:
mock column selector
, columnSorting:
mock column sorting
, - setRef: jest.fn(), setIsFullScreen: jest.fn(), }; diff --git a/src/components/datagrid/controls/data_grid_toolbar.tsx b/src/components/datagrid/controls/data_grid_toolbar.tsx index cf66c9da15c..eeb3ab05049 100644 --- a/src/components/datagrid/controls/data_grid_toolbar.tsx +++ b/src/components/datagrid/controls/data_grid_toolbar.tsx @@ -34,7 +34,6 @@ export const EuiDataGridToolbar = ({ displaySelector, columnSelector, columnSorting, - setRef, setIsFullScreen, }: EuiDataGridToolbarProps) => { const [fullScreenButton, fullScreenButtonActive] = useEuiI18n( @@ -86,11 +85,7 @@ export const EuiDataGridToolbar = ({ ); return ( -
+
{hasRoomForGridControls && (
{renderAdditionalControls(toolbarVisibility, 'left.prepend')} diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 15f49ec113d..5eaeb66a69f 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -162,8 +162,10 @@ export const EuiDataGrid: FunctionComponent = (props) => { * Grid refs & observers */ // Outermost wrapper div - const resizeRef = useRef(null); - const { width: gridWidth } = useResizeObserver(resizeRef.current, 'width'); + // this ref needs to be managed by a state, to cause a re-render after mount + // and passing the mounted element to the resize observer + const [resizeRef, setResizeRef] = useState(null); + const { width: gridWidth } = useResizeObserver(resizeRef, 'width'); // Wrapper div around EuiDataGridBody const contentRef = useRef(null); @@ -270,8 +272,6 @@ export const EuiDataGrid: FunctionComponent = (props) => { * Toolbar & full-screen */ const showToolbar = !!toolbarVisibility; - const [toolbarRef, setToolbarRef] = useState(null); - const { height: toolbarHeight } = useResizeObserver(toolbarRef, 'height'); const [isFullScreen, setIsFullScreen] = useState(false); const handleGridKeyDown = (event: KeyboardEvent) => { @@ -368,12 +368,11 @@ export const EuiDataGrid: FunctionComponent = (props) => { className={classes} onKeyDown={handleGridKeyDown} style={isFullScreen ? undefined : { width, height }} - ref={resizeRef} + ref={setResizeRef} {...rest} > {showToolbar && ( = (props) => { {...gridAriaProps} > ; setIsFullScreen: Dispatch>; } + export interface EuiDataGridPaginationRendererProps extends EuiDataGridPaginationProps { rowCount: number; @@ -327,7 +327,6 @@ export interface EuiDataGridColumnSortingDraggableProps { display: string; } export interface EuiDataGridBodyProps { - isFullScreen: boolean; leadingControlColumns: EuiDataGridControlColumn[]; trailingControlColumns: EuiDataGridControlColumn[]; columns: EuiDataGridColumn[]; @@ -346,7 +345,6 @@ export interface EuiDataGridBodyProps { setVisibleColumns: EuiDataGridHeaderRowProps['setVisibleColumns']; switchColumnPos: EuiDataGridHeaderRowProps['switchColumnPos']; onColumnResize?: EuiDataGridOnColumnResizeHandler; - toolbarHeight: number; virtualizationOptions?: Partial; rowHeightsOptions?: EuiDataGridRowHeightsOptions; gridStyles: EuiDataGridStyle; diff --git a/src/components/datagrid/utils/grid_height_width.ts b/src/components/datagrid/utils/grid_height_width.ts index 948bf269efc..a5c37a116b0 100644 --- a/src/components/datagrid/utils/grid_height_width.ts +++ b/src/components/datagrid/utils/grid_height_width.ts @@ -19,21 +19,13 @@ export const useFinalGridDimensions = ({ unconstrainedWidth, wrapperDimensions, wrapperRef, - toolbarHeight, - headerRowHeight, - footerRowHeight, rowCount, - isFullScreen, }: { unconstrainedHeight: number; unconstrainedWidth: number; wrapperDimensions: { width: number; height: number }; wrapperRef: MutableRefObject; - toolbarHeight: number; - headerRowHeight: number; - footerRowHeight: number; rowCount: number; - isFullScreen: boolean; }) => { // Used if the grid needs to scroll const [height, setHeight] = useState(undefined); @@ -43,7 +35,7 @@ export const useFinalGridDimensions = ({ useEffect(() => { const boundingRect = wrapperRef.current!.getBoundingClientRect(); - if (boundingRect.height !== unconstrainedHeight && !isFullScreen) { + if (boundingRect.height !== unconstrainedHeight) { setHeight(boundingRect.height); } if (boundingRect.width !== unconstrainedWidth) { @@ -57,22 +49,15 @@ export const useFinalGridDimensions = ({ wrapperRef, unconstrainedHeight, unconstrainedWidth, - isFullScreen, ]); - let finalHeight = IS_JEST_ENVIRONMENT + const finalHeight = IS_JEST_ENVIRONMENT ? Number.MAX_SAFE_INTEGER : height || unconstrainedHeight; - let finalWidth = IS_JEST_ENVIRONMENT + const finalWidth = IS_JEST_ENVIRONMENT ? Number.MAX_SAFE_INTEGER : width || unconstrainedWidth; - if (isFullScreen) { - finalHeight = - window.innerHeight - toolbarHeight - headerRowHeight - footerRowHeight; - finalWidth = window.innerWidth; - } - return { finalHeight, finalWidth }; };