@coldsmirk/ledger-mantine 0.2.0 → 0.3.1

package/dist/index.d.cts

@@ -986,6 +986,12 @@ interface DataTableBaseProps<TData extends RowData$1> extends BoxProps, StylesAp
   withTableBorder?: boolean;
   withColumnBorders?: boolean;
   withRowBorders?: boolean;
+  /**
+   * The closing line under the last row — and under a footer — for a table that stands alone
+   * without a frame. Mantine's `Table` leaves the last row open, so this is off by default; the
+   * `withTableBorder` frame closes the table itself and ignores it (docs/styling.md#borders).
+   */
+  withBottomBorder?: boolean;
   borderColor?: MantineColor;
   /**
    * Corner radius of the table box — header, body, and footer as one rounded, clipping box;

package/dist/index.d.ts

@@ -986,6 +986,12 @@ interface DataTableBaseProps<TData extends RowData$1> extends BoxProps, StylesAp
   withTableBorder?: boolean;
   withColumnBorders?: boolean;
   withRowBorders?: boolean;
+  /**
+   * The closing line under the last row — and under a footer — for a table that stands alone
+   * without a frame. Mantine's `Table` leaves the last row open, so this is off by default; the
+   * `withTableBorder` frame closes the table itself and ignores it (docs/styling.md#borders).
+   */
+  withBottomBorder?: boolean;
   borderColor?: MantineColor;
   /**
    * Corner radius of the table box — header, body, and footer as one rounded, clipping box;

package/dist/index.js

@@ -2438,7 +2438,7 @@ function InstantCell({ cell, render }) {
 		]
 	});
 }
-function DataCell({ cell, editing, rowEditing, isFirstDataCell, depth, rowSpan, colSpan, ariaColIndex }) {
+function DataCell({ cell, editing, rowEditing, isFirstDataCell, depth, rowSpan, colSpan, ariaColIndex, last }) {
 	const { getStyles } = useDataTableContext();
 	const { column, row } = cell;
 	const { table } = cell.getContext();
@@ -2494,6 +2494,7 @@ function DataCell({ cell, editing, rowEditing, isFirstDataCell, depth, rowSpan,
 		"data-align": meta?.align,
 		"data-editable": editable || void 0,
 		"data-editing": cellEditorActive || rowEditorActive || void 0,
+		"data-last": last || void 0,
 		"data-leading": column.getIsFirstColumn() || void 0,
 		"data-ledger-column-id": column.id,
 		"data-pinned": column.getIsPinned() || void 0,
@@ -2508,7 +2509,7 @@ function DataCell({ cell, editing, rowEditing, isFirstDataCell, depth, rowSpan,
 		children: content
 	});
 }
-function DataRowImpl({ row, dataIndex, editingColumnId, editingRow, dragging, dropSide, selected, active, expanded, depth, spanning, columnWindow, pinnedPosition, pinnedOffset, virtualIndex, measureRef, ariaRowIndex }) {
+function DataRowImpl({ row, dataIndex, last, rowsBelow, editingColumnId, editingRow, dragging, dropSide, selected, active, expanded, depth, spanning, columnWindow, pinnedPosition, pinnedOffset, virtualIndex, measureRef, ariaRowIndex }) {
 	const { getStyles, onRowClick, onRowActivate, onRowDoubleClick, onRowContextMenu, rowProps, activeRowEnabled, setActiveRow } = useDataTableContext();
 	const cells = row.getVisibleCells();
 	const firstDataCellIndex = cells.findIndex((cell) => !isInternalColumn(cell.column.id));
@@ -2532,6 +2533,7 @@ function DataRowImpl({ row, dataIndex, editingColumnId, editingRow, dragging, dr
 			"data-editing-row": editingRow || void 0,
 			"data-expanded": expanded || void 0,
 			"data-index": virtualIndex,
+			"data-last": last || void 0,
 			"data-parity": dataIndex >= 0 ? dataIndex % 2 === 0 ? "odd" : "even" : void 0,
 			"data-pinned-row": pinnedPosition,
 			"data-row-id": row.id,
@@ -2554,6 +2556,7 @@ function DataRowImpl({ row, dataIndex, editingColumnId, editingRow, dragging, dr
 				depth,
 				editing: editingColumnId === cell.column.id,
 				isFirstDataCell: displayIndex === firstDataCellIndex,
+				last: rowsBelow === void 0 ? last : cell.getRowSpan() - 1 === rowsBelow,
 				rowEditing: editingRow,
 				rowSpan: spanning ? cell.getRowSpan() : 1
 			}, cell.id);
@@ -2578,7 +2581,7 @@ function DataRowImpl({ row, dataIndex, editingColumnId, editingRow, dragging, dr
 	}
 }
 const DataRow = memo(DataRowImpl);
-function DetailRow({ row, renderDetailPanel, colSpan, dragging, dropSide, pinnedPosition, pinnedOffset, virtualIndex, measureRef, ariaRowIndex }) {
+function DetailRow({ row, renderDetailPanel, colSpan, dragging, dropSide, last, pinnedPosition, pinnedOffset, virtualIndex, measureRef, ariaRowIndex }) {
 	const { getStyles } = useDataTableContext();
 	const pinnedStyle = pinnedPosition === "top" ? { top: `${pinnedOffset ?? 0}px` } : pinnedPosition === "bottom" ? { bottom: `${pinnedOffset ?? 0}px` } : void 0;
 	return /* @__PURE__ */ jsx(Table.Tr, {
@@ -2588,6 +2591,7 @@ function DetailRow({ row, renderDetailPanel, colSpan, dragging, dropSide, pinned
 		"data-dragging": dragging || void 0,
 		"data-drop-side": dropSide ?? void 0,
 		"data-index": virtualIndex,
+		"data-last": last || void 0,
 		"data-pinned-row": pinnedPosition,
 		role: "row",
 		...getStyles("row", { style: pinnedStyle }),
@@ -2603,6 +2607,7 @@ function SkeletonRows({ rowCount, columnCount, ariaRowIndexStart }) {
 	const { getStyles } = useDataTableContext();
 	return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rowCount }, (_, rowIndex) => /* @__PURE__ */ jsx(Table.Tr, {
 		"aria-rowindex": ariaRowIndexStart === void 0 ? void 0 : ariaRowIndexStart + rowIndex,
+		"data-last": rowIndex === rowCount - 1 || void 0,
 		role: "row",
 		...getStyles("row"),
 		children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsx(Table.Td, {
@@ -2746,13 +2751,26 @@ function TableBody({ table, virtualization, columnWindow, viewportRef, loading,
 	const editingCell = ledger?.editing.cell ?? null;
 	const editingRowId = ledger?.editing.mode === "row" ? ledger.editing.row.id : null;
 	const activeRowId = ledger?.activeRow.enabled ? ledger.activeRow.id : null;
+	const trailingRowCount = loadMoreError || loadingMore ? 1 : 0;
+	const zoneRows = {
+		top: topDisplayRows,
+		center: centerDisplayRows,
+		bottom: bottomDisplayRows
+	};
+	const rowsBelowOf = (zone, displayIndex) => {
+		const laterZones = zone === "top" ? centerDisplayRows.length + bottomDisplayRows.length : zone === "center" ? bottomDisplayRows.length : 0;
+		return zoneRows[zone].length - 1 - displayIndex + laterZones + trailingRowCount;
+	};
 	const renderDisplayRow = (displayRow, options) => {
 		const zoneStart = options.pinnedPosition === "top" ? headerRowCount : options.pinnedPosition === "bottom" ? headerRowCount + topDisplayRows.length + centerDisplayRows.length : headerRowCount + topDisplayRows.length;
 		const ariaRowIndex = virtualEnabled ? zoneStart + options.displayIndex + 1 : void 0;
+		const rowsBelow = rowsBelowOf(options.pinnedPosition ?? "center", options.displayIndex);
+		const last = rowsBelow === 0;
 		if (displayRow.kind === "detail") return /* @__PURE__ */ jsx(DetailRow, {
 			ariaRowIndex,
 			colSpan: fullWidthColSpan,
 			dragging: reorderSourceId === displayRow.row.id,
+			last,
 			measureRef: options.measureRef,
 			pinnedOffset: options.pinnedOffset,
 			pinnedPosition: options.pinnedPosition,
@@ -2775,12 +2793,14 @@ function TableBody({ table, virtualization, columnWindow, viewportRef, loading,
 			dropSide,
 			editingRow: editingRowId === row.id && (ledger?.editing.row.active(row.id) ?? false),
 			expanded: row.getIsExpanded(),
+			last,
 			measureRef: options.measureRef,
 			pinKey,
 			pinnedOffset: options.pinnedOffset,
 			pinnedPosition: options.pinnedPosition,
 			renderVersion,
 			row,
+			rowsBelow: spanningActive ? rowsBelow : void 0,
 			selected: row.getIsSelected(),
 			spanKey,
 			spanning: spanningActive,
@@ -6366,6 +6386,7 @@ const defaultProps = {
 	withTableBorder: false,
 	withColumnBorders: false,
 	withRowBorders: true,
+	withBottomBorder: false,
 	verticalSpacing: "xs",
 	horizontalSpacing: "xs",
 	tabularNums: false,
@@ -6507,7 +6528,7 @@ function DataTableFromOptions({ props }) {
 	});
 }
 function DataTableCore({ presentation, stylesProps, table }) {
-	const { striped, stripedColor: _stripedColor, highlightOnHover, highlightOnHoverColor: _highlightOnHoverColor, withTableBorder, withColumnBorders, withRowBorders, borderColor: _borderColor, radius: _radius, verticalSpacing, horizontalSpacing, tabularNums, tableMinWidth, virtualizedRows, virtualizedColumns, onEndReached, endReachedOffset, loadingMore, loadMoreError, loading, emptyState, error, onRetry, withColumnHeaders, withPaginationBar, pageSizeOptions, onRowClick, onRowActivate, onRowDoubleClick, onRowContextMenu, rowProps, headerRowProps, footerRowProps, viewportProps, labels: labelsProp, icons: iconsProp, handleRef, ref: rootRef, classNames, styles, unstyled, vars, className, style, attributes, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...others } = presentation;
+	const { striped, stripedColor: _stripedColor, highlightOnHover, highlightOnHoverColor: _highlightOnHoverColor, withTableBorder, withColumnBorders, withRowBorders, withBottomBorder, borderColor: _borderColor, radius: _radius, verticalSpacing, horizontalSpacing, tabularNums, tableMinWidth, virtualizedRows, virtualizedColumns, onEndReached, endReachedOffset, loadingMore, loadMoreError, loading, emptyState, error, onRetry, withColumnHeaders, withPaginationBar, pageSizeOptions, onRowClick, onRowActivate, onRowDoubleClick, onRowContextMenu, rowProps, headerRowProps, footerRowProps, viewportProps, labels: labelsProp, icons: iconsProp, handleRef, ref: rootRef, classNames, styles, unstyled, vars, className, style, attributes, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...others } = presentation;
 	const getStyles = useStyles({
 		name: "DataTable",
 		classes,
@@ -7081,7 +7102,9 @@ function DataTableCore({ presentation, stylesProps, table }) {
 				"data-striped": stripedMode,
 				"data-virtualized-columns": columnWindow !== null || void 0,
 				"data-virtualized-rows": virtualEnabled || void 0,
+				"data-with-bottom-border": withBottomBorder || void 0,
 				"data-with-column-borders": withColumnBorders || void 0,
+				"data-with-footer": hasFooter || void 0,
 				"data-with-row-borders": withRowBorders || void 0,
 				"data-with-table-border": withTableBorder || void 0,
 				...getStyles("root", { style: columnVars }),