From 2dab86c994727f227a65da7db6a952ba44e930af Mon Sep 17 00:00:00 2001
From: Gido Manders <gido.manders@42.nl>
Date: Tue, 6 Aug 2024 19:49:35 +0200
Subject: [PATCH] fix: column width

When resizing a column, the header is not resized while the columns are.

Changed the minWidth of the header to only apply in the resizing of
columns to prevent headers not being resized while columns are.
---
 .../EpicTable/cells/EpicHeader/EpicHeader.tsx | 14 +++--------
 .../EpicHeader/EpicResize/EpicResize.tsx      | 25 +++++++++++--------
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/table/EpicTable/cells/EpicHeader/EpicHeader.tsx b/src/table/EpicTable/cells/EpicHeader/EpicHeader.tsx
index 3a3a248a..a338d096 100644
--- a/src/table/EpicTable/cells/EpicHeader/EpicHeader.tsx
+++ b/src/table/EpicTable/cells/EpicHeader/EpicHeader.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 
 import { EpicResize } from './EpicResize/EpicResize';
 
@@ -51,15 +51,11 @@ export function EpicHeader({
   height = 44,
   onResize
 }: Props) {
-  // Store the original width of when the EpicHeader was first rendered
-  // when minWidth is not specified to prevent resizing only allowing
-  // columns to grow.
-  const minimumWidth = useRef(minWidth ?? width);
   return (
     <div
       className="epic-table-header d-flex align-items-center justify-content-between p-1"
       style={{
-        minWidth: minimumWidth.current,
+        minWidth: width,
         width,
         height
       }}
@@ -67,11 +63,7 @@ export function EpicHeader({
       {children}
 
       {onResize ? (
-        <EpicResize
-          minWidth={minimumWidth.current}
-          width={width}
-          onResize={onResize}
-        />
+        <EpicResize minWidth={minWidth} width={width} onResize={onResize} />
       ) : null}
     </div>
   );
diff --git a/src/table/EpicTable/cells/EpicHeader/EpicResize/EpicResize.tsx b/src/table/EpicTable/cells/EpicHeader/EpicResize/EpicResize.tsx
index e03a8899..ab77bb85 100644
--- a/src/table/EpicTable/cells/EpicHeader/EpicResize/EpicResize.tsx
+++ b/src/table/EpicTable/cells/EpicHeader/EpicResize/EpicResize.tsx
@@ -21,8 +21,9 @@ type Props = {
   /**
    * The minimum width of the EpicHeader.
    * When resizing, the column is not allowed to become smaller than this.
+   * Defaults to the value of width.
    */
-  minWidth: number;
+  minWidth?: number;
 };
 
 /**
@@ -36,6 +37,11 @@ export function EpicResize({ width, onResize, minWidth }: Props) {
   // not throttle the resize will become very jarring / jittery.
   const throttledResize = useRef(throttle(onResize, 40));
 
+  // Store the original width of when the EpicHeader was first rendered
+  // when minWidth is not specified to prevent resizing only allowing
+  // columns to grow.
+  const minimumWidth = useRef(minWidth ?? width);
+
   // When the onResize changes re-init the throttle.
   useEffect(() => {
     throttledResize.current = throttle(onResize, 40);
@@ -47,20 +53,17 @@ export function EpicResize({ width, onResize, minWidth }: Props) {
   // Store the x position of the mouse when the resize first started.
   const mouseXOnResizeStart = useRef(0);
 
-  const resize = useCallback(
-    (event: MouseEvent) => {
-      const distance = event.clientX - mouseXOnResizeStart.current;
+  const resize = useCallback((event: MouseEvent) => {
+    const distance = event.clientX - mouseXOnResizeStart.current;
 
-      const nextWidth = widthOnResizeStart.current + distance;
+    const nextWidth = widthOnResizeStart.current + distance;
 
-      const boundedWidth = Math.max(minWidth, nextWidth);
+    const boundedWidth = Math.max(minimumWidth.current, nextWidth);
 
-      throttledResize.current(boundedWidth);
+    throttledResize.current(boundedWidth);
 
-      event.preventDefault();
-    },
-    [minWidth]
-  );
+    event.preventDefault();
+  }, []);
 
   const resizeEnd = useCallback(() => {
     // Reset the cursor back to default