[EuiDataGrid] Revert column width changes (#8086)

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

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 });
     });
   });
 

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<EuiDataGridColumnWidths>((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<EuiDataGridColumnWidths>(getInitialWidths);
+    useState<EuiDataGridColumnWidths>(computeColumnWidths);
 
   useUpdateEffect(() => {
-    setColumnWidths(getInitialWidths);
-  }, [columns]);
+    setColumnWidths(computeColumnWidths());
+  }, [computeColumnWidths]);
 
   const setColumnWidth = useCallback(
     (columnId: string, width: number) => {