From af201ce344a0d24daaffd5cd0a809292922e5794 Mon Sep 17 00:00:00 2001
From: Kevin Van Cott <kevinvandy656@gmail.com>
Date: Thu, 13 Jun 2024 00:30:09 -0500
Subject: [PATCH] rename new option and tweak showing icons

---
 .../src/components/head/MRT_TableHeadCell.tsx | 43 ++++++------
 .../src/hooks/useMRT_TableOptions.ts          |  4 +-
 packages/mantine-react-table/src/types.ts     |  2 +-
 .../features/HeaderActions.stories.tsx        | 66 ++++++++++++++++++-
 4 files changed, 90 insertions(+), 25 deletions(-)

diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.tsx b/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.tsx
index c89cb01e3..24559650e 100644
--- a/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.tsx
+++ b/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.tsx
@@ -51,7 +51,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       enableColumnOrdering,
       enableColumnPinning,
       enableGrouping,
-      enableHeaderActionsWhenHovered,
+      enableHeaderActionsHoverReveal,
       enableMultiSort,
       layoutMode,
       mantineTableHeadCellProps,
@@ -101,18 +101,16 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
 
   const [isOpenedColumnActions, setIsOpenedColumnActions] = useState(false);
 
-  const showColumns =
-    !enableHeaderActionsWhenHovered ||
+  const columnActionsEnabled =
+    (enableColumnActions || columnDef.enableColumnActions) &&
+    columnDef.enableColumnActions !== false;
+
+  const showColumnButtons =
+    !enableHeaderActionsHoverReveal ||
+    isOpenedColumnActions ||
     (isHoveredHeadCell &&
       !table.getVisibleFlatColumns().find((column) => column.getIsResizing()));
 
-  const showCellSort = !!column.getIsSorted() || showColumns;
-
-  const showColumnActions =
-    (enableColumnActions || columnDef.enableColumnActions) &&
-    columnDef.enableColumnActions !== false &&
-    (isOpenedColumnActions || showColumns);
-
   const showDragHandle =
     enableColumnDragging !== false &&
     columnDef.enableColumnDragging !== false &&
@@ -121,15 +119,15 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       (enableGrouping &&
         columnDef.enableGrouping !== false &&
         !grouping.includes(column.id))) &&
-    showColumns;
+    showColumnButtons;
 
   const headerPL = useMemo(() => {
     let pl = 0;
     if (column.getCanSort()) pl++;
-    if (showColumnActions) pl += 1.75;
+    if (showColumnButtons) pl += 1.75;
     if (showDragHandle) pl += 1.25;
     return pl;
-  }, [showColumnActions, showDragHandle]);
+  }, [showColumnButtons, showDragHandle]);
 
   const handleDragEnter: DragEventHandler<HTMLTableCellElement> = (_e) => {
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
@@ -259,12 +257,17 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                 >
                   {headerElement}
                 </Flex>
-                {column.getCanFilter() && (
-                  <MRT_TableHeadCellFilterLabel header={header} table={table} />
-                )}
-                {column.getCanSort() && showCellSort && (
-                  <MRT_TableHeadCellSortLabel header={header} table={table} />
-                )}
+                {column.getCanFilter() &&
+                  (column.getIsFiltered() || showColumnButtons) && (
+                    <MRT_TableHeadCellFilterLabel
+                      header={header}
+                      table={table}
+                    />
+                  )}
+                {column.getCanSort() &&
+                  (column.getIsSorted() || showColumnButtons) && (
+                    <MRT_TableHeadCellSortLabel header={header} table={table} />
+                  )}
               </Flex>
               {columnDefType !== 'group' && (
                 <Flex
@@ -282,7 +285,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                       }}
                     />
                   )}
-                  {showColumnActions && (
+                  {columnActionsEnabled && showColumnButtons && (
                     <MRT_ColumnActionMenu
                       header={header}
                       table={table}
diff --git a/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts b/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts
index 39bc2b5c0..79cf2443c 100644
--- a/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts
+++ b/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts
@@ -74,7 +74,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enableGlobalFilter = true,
   enableGlobalFilterRankedResults = true,
   enableGrouping = false,
-  enableHeaderActionsWhenHovered = false,
+  enableHeaderActionsHoverReveal = false,
   enableHiding = true,
   enableMultiRowSelection = true,
   enableMultiSort = true,
@@ -200,7 +200,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enableGlobalFilter,
     enableGlobalFilterRankedResults,
     enableGrouping,
-    enableHeaderActionsWhenHovered,
+    enableHeaderActionsHoverReveal,
     enableHiding,
     enableMultiRowSelection,
     enableMultiSort,
diff --git a/packages/mantine-react-table/src/types.ts b/packages/mantine-react-table/src/types.ts
index 0c091bf3f..8d0c05042 100644
--- a/packages/mantine-react-table/src/types.ts
+++ b/packages/mantine-react-table/src/types.ts
@@ -839,7 +839,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   enableFullScreenToggle?: boolean;
   enableGlobalFilterModes?: boolean;
   enableGlobalFilterRankedResults?: boolean;
-  enableHeaderActionsWhenHovered?: boolean;
+  enableHeaderActionsHoverReveal?: boolean;
   enablePagination?: boolean;
   enableRowActions?: boolean;
   enableRowDragging?: boolean;
diff --git a/packages/mantine-react-table/stories/features/HeaderActions.stories.tsx b/packages/mantine-react-table/stories/features/HeaderActions.stories.tsx
index b300731c5..9f095271c 100644
--- a/packages/mantine-react-table/stories/features/HeaderActions.stories.tsx
+++ b/packages/mantine-react-table/stories/features/HeaderActions.stories.tsx
@@ -55,7 +55,33 @@ export const HeaderActionsEnabled = () => (
   <MantineReactTable
     columns={columns}
     data={data}
-    enableHeaderActionsWhenHovered
+    enableHeaderActionsHoverReveal
+  />
+);
+
+export const HeaderActionsEnabledCenterAlign = () => (
+  <MantineReactTable
+    columns={columns}
+    data={data}
+    defaultColumn={{
+      mantineTableHeadCellProps: {
+        align: 'center',
+      },
+    }}
+    enableHeaderActionsHoverReveal
+  />
+);
+
+export const HeaderActionsEnabledRightAlign = () => (
+  <MantineReactTable
+    columns={columns}
+    data={data}
+    defaultColumn={{
+      mantineTableHeadCellProps: {
+        align: 'right',
+      },
+    }}
+    enableHeaderActionsHoverReveal
   />
 );
 
@@ -75,7 +101,43 @@ export const HeaderActionsEnabledWithFeatures = () => (
   <MantineReactTable
     columns={columns}
     data={data}
-    enableHeaderActionsWhenHovered
+    enableHeaderActionsHoverReveal
+    enableColumnOrdering
+    enableColumnPinning
+    enableColumnResizing
+    enableRowNumbers
+    enableRowSelection
+  />
+);
+
+export const HeaderActionsEnabledWithFeaturesCenterAlign = () => (
+  <MantineReactTable
+    columns={columns}
+    data={data}
+    defaultColumn={{
+      mantineTableHeadCellProps: {
+        align: 'center',
+      },
+    }}
+    enableHeaderActionsHoverReveal
+    enableColumnOrdering
+    enableColumnPinning
+    enableColumnResizing
+    enableRowNumbers
+    enableRowSelection
+  />
+);
+
+export const HeaderActionsEnabledWithFeaturesRightAlign = () => (
+  <MantineReactTable
+    columns={columns}
+    data={data}
+    defaultColumn={{
+      mantineTableHeadCellProps: {
+        align: 'right',
+      },
+    }}
+    enableHeaderActionsHoverReveal
     enableColumnOrdering
     enableColumnPinning
     enableColumnResizing