rez-table-listing-mui 2.0.5 → 2.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

package/src/listing/components/table-body/table-body.styles.ts

@@ -48,8 +48,7 @@ export const TableBodyCell = styled("td", {
 }>(({ theme, compact, isDragging, wrap }) => ({
   fontSize: theme.typography.pxToRem(14),
   padding: compact ? theme.spacing(0.25, 0.5) : theme.spacing(0.5, 1),
-  // borderTop: `0.5px solid ${theme.palette.grey[100]}`,
-  borderBottom: `0.5px solid ${theme.palette.grey[100]}`,
+  borderBottom: `1px solid ${theme.palette.grey[200]}`,
 
   ...(wrap && {
     wordBreak: "break-all",

package/src/listing/components/table-head/table-head-dnd-cell.tsx

@@ -28,7 +28,9 @@ function DraggableTableHeader<T>({
   // Popover
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
-  const handleHover = (event: React.MouseEvent<HTMLElement>) => {
+  const handleMenuToggle = (event: React.MouseEvent<HTMLElement>) => {
+    if (header.column.getIsResizing()) return;
+
     setAnchorEl((prev) => (prev ? null : event.currentTarget));
   };
 
@@ -59,7 +61,7 @@ function DraggableTableHeader<T>({
       }}
     >
       {header.isPlaceholder ? null : (
-        <TableHeadContent onClick={handleHover}>
+        <TableHeadContent onClick={handleMenuToggle}>
           <TableHeadSort sortable={header.column.getCanSort()}>
             {flexRender(header.column.columnDef.header, header.getContext())}
           </TableHeadSort>

package/src/listing/components/table-head/table-head.styles.ts

@@ -97,7 +97,7 @@ export const TableHeadCell = styled("th", {
 }>(({ theme, compact, isDragging, isPinned, sticky }) => ({
   position: "relative",
   padding: compact ? theme.spacing(0.375, 0.675) : theme.spacing(0.75, 1),
-  border: `0.5px solid ${theme.palette.grey[100]}`,
+  border: `0.5px solid ${theme.palette.grey[200]}`,
   cursor: "pointer",
   backgroundColor: theme.palette.common.white,
   userSelect: "none",

package/src/listing/components/table-head/table-head.tsx

@@ -1,4 +1,9 @@
-import { ColumnOrderState, flexRender, Table } from "@tanstack/react-table";
+import {
+  ColumnOrderState,
+  flexRender,
+  Header,
+  Table,
+} from "@tanstack/react-table";
 import {
   CraftTableFeatureProps,
   craftTableFilterSettingsOptionsProps,
@@ -52,7 +57,12 @@ function TableHead<T>({
   // Popover
   const [, setAnchorEl] = useState<HTMLElement | null>(null);
 
-  const handleHover = (event: React.MouseEvent<HTMLElement>) => {
+  const handleMenuToggle = (
+    event: React.MouseEvent<HTMLElement>,
+    header: Header<T, unknown>
+  ) => {
+    if (header.column.getIsResizing()) return;
+
     setAnchorEl((prev) => (prev ? null : event.currentTarget));
   };
 
@@ -105,7 +115,9 @@ function TableHead<T>({
                 }}
               >
                 {header.isPlaceholder ? null : (
-                  <TableHeadContent onClick={handleHover}>
+                  <TableHeadContent
+                    onClick={(event) => handleMenuToggle(event, header)}
+                  >
                     <TableHeadSort sortable={header.column.getCanSort()}>
                       {flexRender(
                         header.column.columnDef.header,