material-react-table 1.6.3 → 1.6.5

package/dist/cjs/index.js

@@ -295,6 +295,13 @@ const getDefaultColumnFilterFn = (columnDef) => {
         return 'equals';
     return 'fuzzy';
 };
+const getIsFirstColumn = (column, table) => {
+    return table.getVisibleLeafColumns()[0].id === column.id;
+};
+const getIsLastColumn = (column, table) => {
+    const columns = table.getVisibleLeafColumns();
+    return columns[columns.length - 1].id === column.id;
+};
 const getIsLastLeftPinnedColumn = (table, column) => {
     return (column.getIsPinned() === 'left' &&
         table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex());
@@ -2281,7 +2288,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
     var _a, _b;
     const theme = styles.useTheme();
     const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
-    const { draggingColumn, editingCell, editingRow, hoveredColumn, density, isLoading, showSkeletons, } = getState();
+    const { draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, density, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -2302,18 +2309,38 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
             : Math.round(Math.random() * (column.getSize() - column.getSize() / 3) +
                 column.getSize() / 3)
         : 100), []);
-    const draggingBorder = React.useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-        ? `1px dashed ${theme.palette.text.secondary}`
-        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-            ? `2px dashed ${theme.palette.primary.main}`
-            : undefined, [draggingColumn, hoveredColumn]);
-    const draggingBorders = React.useMemo(() => draggingBorder
-        ? {
-            borderLeft: draggingBorder,
-            borderRight: draggingBorder,
-            borderBottom: rowIndex === numRows - 1 ? draggingBorder : undefined,
-        }
-        : undefined, [draggingBorder, numRows]);
+    const draggingBorders = React.useMemo(() => {
+        const isDraggingColumn = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id;
+        const isHoveredColumn = (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id;
+        const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
+        const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
+        const isFirstColumn = getIsFirstColumn(column, table);
+        const isLastColumn = getIsLastColumn(column, table);
+        const isLastRow = rowIndex === numRows - 1;
+        const borderStyle = isDraggingColumn || isDraggingRow
+            ? `1px dashed ${theme.palette.text.secondary} !important`
+            : isHoveredColumn || isHoveredRow
+                ? `2px dashed ${theme.palette.primary.main} !important`
+                : undefined;
+        return borderStyle
+            ? {
+                borderLeft: isDraggingColumn ||
+                    isHoveredColumn ||
+                    ((isDraggingRow || isHoveredRow) && isFirstColumn)
+                    ? borderStyle
+                    : undefined,
+                borderRight: isDraggingColumn ||
+                    isHoveredColumn ||
+                    ((isDraggingRow || isHoveredRow) && isLastColumn)
+                    ? borderStyle
+                    : undefined,
+                borderBottom: isDraggingRow || isHoveredRow || isLastRow
+                    ? borderStyle
+                    : undefined,
+                borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
+            }
+            : undefined;
+    }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
     const isEditable = (enableEditing || columnDef.enableEditing) &&
         columnDef.enableEditing !== false;
     const isEditing = isEditable &&
@@ -2433,7 +2460,6 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, table, virtualRow, }) => {
 };
 
 const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
-    const theme = styles.useTheme();
     const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
@@ -2445,23 +2471,13 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
         }
     };
     const rowRef = React.useRef(null);
-    const draggingBorder = React.useMemo(() => (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id
-        ? `1px dashed ${theme.palette.text.secondary}`
-        : (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id
-            ? `2px dashed ${theme.palette.primary.main}`
-            : undefined, [draggingRow, hoveredRow]);
-    const draggingBorders = draggingBorder
-        ? {
-            border: draggingBorder,
-        }
-        : undefined;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(TableRow__default["default"], Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, hover: true, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
                 if (node) {
                     rowRef.current = node;
                     measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
                 }
-            } }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, position: virtualRow ? 'absolute' : undefined, top: virtualRow ? 0 : undefined, transform: virtualRow
+            } }, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, position: virtualRow ? 'absolute' : undefined, top: virtualRow ? 0 : undefined, transform: virtualRow
                     ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
                     : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', '&:hover td': {
                     backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned()
@@ -2471,7 +2487,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
                         : undefined,
                 } }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
                 ? tableRowProps.sx(theme)
-                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)), draggingBorders)) }),
+                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }),
             virtualPaddingLeft ? (React__default["default"].createElement("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null,
             (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
                 const cell = columnVirtualizer