@coldsmirk/ledger-mantine 0.1.1 → 0.3.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 
 import { n as defaultLabels, t as DataTableLabels } from "./labels-ChBqD1II.cjs";
-import { BoxProps, ComboboxData, ElementProps, Factory, MantineBreakpoint, MantineColor, MantineSpacing, PopoverProps, StylesApiProps, TableTdProps, TableThProps, TableTrProps, TextInputProps } from "@mantine/core";
+import { BoxProps, ComboboxData, ElementProps, Factory, MantineBreakpoint, MantineColor, MantineRadius, MantineSpacing, PopoverProps, StylesApiProps, TableTdProps, TableThProps, TableTrProps, TextInputProps } from "@mantine/core";
 import { Cell as Cell$1, CellData, Column as Column$1, ColumnDef as ColumnDef$1, ColumnFiltersState, ColumnFiltersState as ColumnFiltersState$1, ColumnOrderState, ColumnOrderState as ColumnOrderState$1, ColumnPinningState, ColumnPinningState as ColumnPinningState$1, ColumnSizingState, ColumnSizingState as ColumnSizingState$1, ColumnVisibilityState, ColumnVisibilityState as ColumnVisibilityState$1, ExpandedState, ExpandedState as ExpandedState$1, FilterFn, FilterFnOption, GroupingState, GroupingState as GroupingState$1, Header as Header$1, HeaderGroup as HeaderGroup$1, PaginationState, PaginationState as PaginationState$1, ReactTable, Row as Row$1, RowData, RowData as RowData$1, RowPinningState, RowPinningState as RowPinningState$1, RowSelectionState, RowSelectionState as RowSelectionState$1, SortingState, SortingState as SortingState$1, TableFeatures, TableOptions, flexRender } from "@tanstack/react-table";
 import { CSSProperties, ComponentProps, ComponentType, JSX, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from "react";
 //#region src/icons.d.ts
@@ -972,7 +972,7 @@ declare function DataTableSelectionBar<TData extends RowData$1>(props: DataTable
 //#region src/data-table.d.ts
 type DataTableStylesNames = "root" | "main" | "header" | "scroller" | "footer" | "table" | "thead" | "tbody" | "tfoot" | "headerRow" | "headerCell" | "headerLabel" | "headerActions" | "sortIndicator" | "resizer" | "filterPopover" | "row" | "cell" | "selectionCell" | "expanderCell" | "detailPanel" | "cellEditor" | "instantCell" | "instantSpinner" | "rowDragCell" | "rowDragOverlay" | "footerRow" | "footerCell" | "empty" | "loaderRow" | "loaderRowContent" | "paginationBar";
 interface DataTableCssVariables {
-  root: "--ledger-striped-color" | "--ledger-hover-color" | "--ledger-border-color";
+  root: "--ledger-striped-color" | "--ledger-hover-color" | "--ledger-border-color" | "--ledger-radius";
 }
 interface DataTableBaseProps<TData extends RowData$1> extends BoxProps, StylesApiProps<DataTableFactory>, ElementProps<"div"> {
   /**
@@ -986,7 +986,19 @@ 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;
+   * the `withTableBorder` frame follows it, so a framed table can be its own card (host
+   * vocabulary: `Paper.radius`).
+   */
+  radius?: MantineRadius;
   verticalSpacing?: MantineSpacing;
   horizontalSpacing?: MantineSpacing;
   tabularNums?: boolean;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 
 import { n as defaultLabels, t as DataTableLabels } from "./labels-ChBqD1II.js";
-import { BoxProps, ComboboxData, ElementProps, Factory, MantineBreakpoint, MantineColor, MantineSpacing, PopoverProps, StylesApiProps, TableTdProps, TableThProps, TableTrProps, TextInputProps } from "@mantine/core";
+import { BoxProps, ComboboxData, ElementProps, Factory, MantineBreakpoint, MantineColor, MantineRadius, MantineSpacing, PopoverProps, StylesApiProps, TableTdProps, TableThProps, TableTrProps, TextInputProps } from "@mantine/core";
 import { CSSProperties, ComponentProps, ComponentType, JSX, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from "react";
 import { Cell as Cell$1, CellData, Column as Column$1, ColumnDef as ColumnDef$1, ColumnFiltersState, ColumnFiltersState as ColumnFiltersState$1, ColumnOrderState, ColumnOrderState as ColumnOrderState$1, ColumnPinningState, ColumnPinningState as ColumnPinningState$1, ColumnSizingState, ColumnSizingState as ColumnSizingState$1, ColumnVisibilityState, ColumnVisibilityState as ColumnVisibilityState$1, ExpandedState, ExpandedState as ExpandedState$1, FilterFn, FilterFnOption, GroupingState, GroupingState as GroupingState$1, Header as Header$1, HeaderGroup as HeaderGroup$1, PaginationState, PaginationState as PaginationState$1, ReactTable, Row as Row$1, RowData, RowData as RowData$1, RowPinningState, RowPinningState as RowPinningState$1, RowSelectionState, RowSelectionState as RowSelectionState$1, SortingState, SortingState as SortingState$1, TableFeatures, TableOptions, flexRender } from "@tanstack/react-table";
 //#region src/icons.d.ts
@@ -972,7 +972,7 @@ declare function DataTableSelectionBar<TData extends RowData$1>(props: DataTable
 //#region src/data-table.d.ts
 type DataTableStylesNames = "root" | "main" | "header" | "scroller" | "footer" | "table" | "thead" | "tbody" | "tfoot" | "headerRow" | "headerCell" | "headerLabel" | "headerActions" | "sortIndicator" | "resizer" | "filterPopover" | "row" | "cell" | "selectionCell" | "expanderCell" | "detailPanel" | "cellEditor" | "instantCell" | "instantSpinner" | "rowDragCell" | "rowDragOverlay" | "footerRow" | "footerCell" | "empty" | "loaderRow" | "loaderRowContent" | "paginationBar";
 interface DataTableCssVariables {
-  root: "--ledger-striped-color" | "--ledger-hover-color" | "--ledger-border-color";
+  root: "--ledger-striped-color" | "--ledger-hover-color" | "--ledger-border-color" | "--ledger-radius";
 }
 interface DataTableBaseProps<TData extends RowData$1> extends BoxProps, StylesApiProps<DataTableFactory>, ElementProps<"div"> {
   /**
@@ -986,7 +986,19 @@ 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;
+   * the `withTableBorder` frame follows it, so a framed table can be its own card (host
+   * vocabulary: `Paper.radius`).
+   */
+  radius?: MantineRadius;
   verticalSpacing?: MantineSpacing;
   horizontalSpacing?: MantineSpacing;
   tabularNums?: boolean;

package/dist/index.js

@@ -2,7 +2,7 @@
 import { move } from "@dnd-kit/helpers";
 import { DragDropProvider, PointerSensor, useDraggable } from "@dnd-kit/react";
 import { useSortable } from "@dnd-kit/react/sortable";
-import { ActionIcon, Box, Button, Center, Checkbox, CloseButton, EmptyState, Group, Loader, LoadingOverlay, MultiSelect, NumberInput, Pagination, Popover, Portal, Radio, ScrollArea, SegmentedControl, Select, Skeleton, Stack, Table, Text, TextInput, Tooltip, VisuallyHidden, createSafeContext, createVarsResolver, genericFactory, getThemeColor, useMantineClassNamesPrefix, useMantineIsHeadless, useMantineStylesTransform, useMantineTheme, useMantineWithStaticClasses, useProps, useStyles } from "@mantine/core";
+import { ActionIcon, Box, Button, Center, Checkbox, CloseButton, EmptyState, Group, Loader, LoadingOverlay, MultiSelect, NumberInput, Pagination, Popover, Portal, Radio, ScrollArea, SegmentedControl, Select, Skeleton, Stack, Table, Text, TextInput, Tooltip, VisuallyHidden, createSafeContext, createVarsResolver, genericFactory, getRadius, getThemeColor, useMantineClassNamesPrefix, useMantineIsHeadless, useMantineStylesTransform, useMantineTheme, useMantineWithStaticClasses, useProps, useStyles } from "@mantine/core";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AutoScroller, Cursor, PointerActivationConstraints, PreventSelection } from "@dnd-kit/dom";
@@ -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,
@@ -6381,11 +6402,12 @@ const defaultProps = {
 function leafCol(column) {
 	return /* @__PURE__ */ jsx("col", { style: { width: `var(${columnWidthVar(column.id)})` } }, column.id);
 }
-const varsResolver = createVarsResolver((theme, { stripedColor, highlightOnHoverColor, borderColor }) => {
+const varsResolver = createVarsResolver((theme, { stripedColor, highlightOnHoverColor, borderColor, radius }) => {
 	return { root: {
 		"--ledger-striped-color": stripedColor ? getThemeColor(stripedColor, theme) : void 0,
 		"--ledger-hover-color": highlightOnHoverColor ? getThemeColor(highlightOnHoverColor, theme) : void 0,
-		"--ledger-border-color": borderColor ? getThemeColor(borderColor, theme) : void 0
+		"--ledger-border-color": borderColor ? getThemeColor(borderColor, theme) : void 0,
+		"--ledger-radius": radius === void 0 ? void 0 : getRadius(radius)
 	} };
 });
 const OPTION_KEY_SET = /* @__PURE__ */ new Set([
@@ -6506,7 +6528,7 @@ function DataTableFromOptions({ props }) {
 	});
 }
 function DataTableCore({ presentation, stylesProps, table }) {
-	const { striped, stripedColor: _stripedColor, highlightOnHover, highlightOnHoverColor: _highlightOnHoverColor, withTableBorder, withColumnBorders, withRowBorders, borderColor: _borderColor, 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,
@@ -7080,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 }),