material-react-table 1.6.3 → 1.6.5

package/dist/cjs/types/_locales/uk.d.ts

@@ -0,0 +1,2 @@
+import type { MRT_Localization } from '../MaterialReactTable';
+export declare const MRT_Localization_UK: MRT_Localization;

package/dist/cjs/types/column.utils.d.ts

@@ -106,6 +106,8 @@ export declare const getLeadingDisplayColumnIds: <TData extends Record<string, a
 export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => (string | false | undefined)[];
 export declare const getDefaultColumnOrderIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];
 export declare const getDefaultColumnFilterFn: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => MRT_FilterOption;
+export declare const getIsFirstColumn: (column: MRT_Column, table: MRT_TableInstance) => boolean;
+export declare const getIsLastColumn: (column: MRT_Column, table: MRT_TableInstance) => boolean;
 export declare const getIsLastLeftPinnedColumn: (table: MRT_TableInstance, column: MRT_Column) => boolean;
 export declare const getIsFirstRightPinnedColumn: (column: MRT_Column) => boolean;
 export declare const getTotalRight: (table: MRT_TableInstance, column: MRT_Column) => number;

package/dist/esm/material-react-table.esm.js

@@ -217,6 +217,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());
@@ -2203,7 +2210,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
     var _a, _b;
     const theme = 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;
@@ -2224,18 +2231,38 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
             : Math.round(Math.random() * (column.getSize() - column.getSize() / 3) +
                 column.getSize() / 3)
         : 100), []);
-    const draggingBorder = 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 = useMemo(() => draggingBorder
-        ? {
-            borderLeft: draggingBorder,
-            borderRight: draggingBorder,
-            borderBottom: rowIndex === numRows - 1 ? draggingBorder : undefined,
-        }
-        : undefined, [draggingBorder, numRows]);
+    const draggingBorders = 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 &&
@@ -2355,7 +2382,6 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, table, virtualRow, }) => {
 };
 
 const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
-    const theme = useTheme();
     const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
@@ -2367,23 +2393,13 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
         }
     };
     const rowRef = useRef(null);
-    const draggingBorder = 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.createElement(React.Fragment, null,
         React.createElement(TableRow, 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: 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: 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()
@@ -2393,7 +2409,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.createElement("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null,
             (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
                 const cell = columnVirtualizer