diff --git a/packages/eui/changelogs/upcoming/8086.md b/packages/eui/changelogs/upcoming/8086.md new file mode 100644 index 00000000000..3f2b32c547f --- /dev/null +++ b/packages/eui/changelogs/upcoming/8086.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Reverted an `EuiDataGrid` regression from [#8015](https://github.com/elastic/eui/pull/8015) which prevented overriding column widths via columns's `initialWidth`s diff --git a/packages/eui/src/components/datagrid/utils/col_widths.test.ts b/packages/eui/src/components/datagrid/utils/col_widths.test.ts index c98741d3ce1..5bc048af672 100644 --- a/packages/eui/src/components/datagrid/utils/col_widths.test.ts +++ b/packages/eui/src/components/datagrid/utils/col_widths.test.ts @@ -99,43 +99,16 @@ describe('useColumnWidths', () => { expect(columnWidths).toEqual({ b: 75 }); }); - describe('when `columns` updates', () => { - it('adds new `initialWidth`s', () => { - const { rerender, result } = renderHook(useColumnWidths, { - initialProps: args, - }); - rerender({ - ...args, - columns: [{ id: 'f', initialWidth: 100 }], - }); - - expect(result.current.columnWidths).toEqual({ b: 75, f: 100 }); + it('recomputes column widths on columns change', () => { + const { rerender, result } = renderHook(useColumnWidths, { + initialProps: args, }); - - it('does not remove column widths that have been hidden', () => { - const { rerender, result } = renderHook(useColumnWidths, { - initialProps: args, - }); - - rerender({ - ...args, - columns: [{ id: 'c' }], - }); - expect(result.current.columnWidths).toEqual({ b: 75 }); + rerender({ + ...args, + columns: [{ id: 'c', initialWidth: 125 }], }); - it('does not override column widths that have already been set by manual user resize', () => { - const { rerender, result } = renderHook(useColumnWidths, { - initialProps: args, - }); - - renderHookAct(() => result.current.setColumnWidth('b', 150)); - rerender({ - ...args, - columns: [...args.columns], - }); - expect(result.current.columnWidths).toEqual({ b: 150 }); - }); + expect(result.current.columnWidths).toEqual({ c: 125 }); }); }); diff --git a/packages/eui/src/components/datagrid/utils/col_widths.ts b/packages/eui/src/components/datagrid/utils/col_widths.ts index e919151143e..5c61871093c 100644 --- a/packages/eui/src/components/datagrid/utils/col_widths.ts +++ b/packages/eui/src/components/datagrid/utils/col_widths.ts @@ -79,29 +79,22 @@ export const useColumnWidths = ({ setColumnWidth: (columnId: string, width: number) => void; getColumnWidth: (index: number) => number; } => { - const getInitialWidths = useCallback( - (prevColumnWidths?: EuiDataGridColumnWidths) => { - const columnWidths = { ...prevColumnWidths }; - columns - .filter(doesColumnHaveAnInitialWidth) - .forEach(({ id, initialWidth }) => { - if (columnWidths[id] == null) { - columnWidths[id] = initialWidth!; - } - }); - return columnWidths; - }, - [columns] - ); + const computeColumnWidths = useCallback(() => { + return columns + .filter(doesColumnHaveAnInitialWidth) + .reduce((initialWidths, column) => { + return { ...initialWidths, [column.id]: column.initialWidth! }; + }, {}); + }, [columns]); // Passes initializer function for performance, so computing only runs once on init // @see https://react.dev/reference/react/useState#examples-initializer const [columnWidths, setColumnWidths] = - useState(getInitialWidths); + useState(computeColumnWidths); useUpdateEffect(() => { - setColumnWidths(getInitialWidths); - }, [columns]); + setColumnWidths(computeColumnWidths()); + }, [computeColumnWidths]); const setColumnWidth = useCallback( (columnId: string, width: number) => {