fix column resizing and add global to density classes (#170)

Co-authored-by: Kevin Van Cott <kevinvandy656@gmail.com>

packages/mantine-react-table/src/buttons/MRT_ExpandAllButton.module.css

@@ -8,10 +8,10 @@
   &:hover {
     opacity: 1;
   }
-  &.xl {
+  &:global(.xl) {
     margin-left: -6px;
   }
-  &.md {
+  &:global(.md) {
     margin-left: 0;
   }
   .chevron {

packages/mantine-react-table/src/head/MRT_TableHeadCellResizeHandle.module.css

@@ -1,22 +1,23 @@
-.MRT_TableHeadCellResizeHandle {
+.root {
   cursor: col-resize;
-  margin-right: var(--margin-right);
   position: absolute;
-  right: 4px;
-  padding-left: 1px;
-  padding-right: 2px;
-  transform: var(--transform);
-  &:active > .mantine-Divider-vertical {
-    border-left-color: var(--mantine-color-default);
-  }
-}
-
-.MRT_TableHeadCellResizeHandleDivider {
   border-radius: 2px;
-  border-width: 4px;
+  right: 0px;
+  width: 3px;
   height: 24px;
-  touch-action: none;
-  transition: var(--transition);
-  user-select: none;
-  z-index: 4;
+  margin-right: -10px;
+  &:global(.md) {
+    margin-right: -16px;
+  }
+  &:global(.xl) {
+    margin-right: -22px;
+  }
+  background: var(--mantine-color-placeholder);
+  &:hover {
+    background: var(--mantine-primary-color-filled-hover);
+  }
+  &:active {
+    background: var(--mantine-primary-color-filled);
+  }
+  transform: var(--mrt-transform);
 }

packages/mantine-react-table/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -1,4 +1,5 @@
-import { Box, Divider } from '@mantine/core';
+import clsx from 'clsx';
+import { Box } from '@mantine/core';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 import classes from './MRT_TableHeadCellResizeHandle.module.css';
@@ -21,42 +22,31 @@ export const MRT_TableHeadCellResizeHandle = <
   } = table;
   const { density } = getState();
   const { column } = header;
+  const handler = header.getResizeHandler();
+
+  const offset =
+    columnResizeMode === 'onEnd' && column.getIsResizing()
+      ? `translateX(${getState().columnSizingInfo.deltaOffset ?? 0}px)`
+      : undefined;
 
   return (
     <Box
+      role="separator"
+      onMouseDown={handler}
+      onTouchStart={handler}
       onDoubleClick={() => {
         setColumnSizingInfo((old) => ({
           ...old,
           isResizingColumn: false,
         }));
         column.resetSize();
       }}
-      onMouseDown={header.getResizeHandler()}
-      onTouchStart={header.getResizeHandler()}
-      className={classes.MRT_TableHeadCellResizeHandle}
-      __vars={{
-        '--margin-right':
-          density === 'xl'
-            ? 'rem(-24px)'
-            : density === 'md'
-            ? 'rem(-20px)'
-            : 'rem(-14px)',
-        '--transform':
-          column.getIsResizing() && columnResizeMode === 'onEnd'
-            ? `translateX(${getState().columnSizingInfo.deltaOffset ?? 0}px)`
-            : undefined,
-      }}
-    >
-      <Divider
-        orientation="vertical"
-        size="lg"
-        className={classes.MRT_TableHeadCellResizeHandleDivider}
-        __vars={{
-          '--transition': column.getIsResizing()
-            ? undefined
-            : 'all 100ms ease-in-out',
-        }}
-      />
-    </Box>
+      className={clsx(
+        'mrt-table-head-cell-resize-handle',
+        classes.root,
+        density,
+      )}
+      __vars={{ '--mrt-transform': offset }}
+    ></Box>
   );
 };

packages/mantine-react-table/src/toolbar/MRT_ToolbarAlertBanner.module.css

@@ -27,10 +27,10 @@
   padding: 8px 16px;
   &.head-overlay {
     padding: 2px;
-    &.xl {
+    &:global(.xl) {
       padding: 16px;
     }
-    &.md {
+    &:global(.md) {
       padding: 8px;
     }
   }