@coldsmirk/ledger-mantine 0.1.0 → 0.2.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"> {
   /**
@@ -987,6 +987,12 @@ interface DataTableBaseProps<TData extends RowData$1> extends BoxProps, StylesAp
   withColumnBorders?: boolean;
   withRowBorders?: 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"> {
   /**
@@ -987,6 +987,12 @@ interface DataTableBaseProps<TData extends RowData$1> extends BoxProps, StylesAp
   withColumnBorders?: boolean;
   withRowBorders?: 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";
@@ -123,9 +123,10 @@ const dateRange = (row, columnId, filterValue) => {
 };
 dateRange.autoRemove = (value) => !value || !value[0] && !value[1];
 /**
-* Strict set membership for the multi-select variant. TanStack's `arrIncludesSome` expects an
-* array row value and degrades to substring matching on scalars ("active" would match
-* "inactive") — the variant's semantics are exact membership for scalar and array cells.
+* Strict set membership for the multi-select variant. No TanStack built-in covers both cell
+* shapes exactly: `arrIncludesSome` rejects non-array row values outright, `arrHas` rejects
+* array cells, and `arrIncludes` substring-matches strings ("active" would match "inactive") —
+* the variant's semantics are exact membership for scalar and array cells.
 */
 const oneOf = (row, columnId, filterValue) => {
 	const raw = row.getValue(columnId);
@@ -493,10 +494,12 @@ function RowReorderOverlay({ session }) {
 function RowDragCell({ row, table }) {
 	const { labels, icons, rowReorderKeyboard } = useDataTableContext();
 	const orderable = table.options.meta?.ledger?.rowOrdering.orderable === true;
+	const pinned = table.options.enableRowPinning === true && row.getIsPinned() !== false;
 	const { ref, isDragSource } = useDraggable({
 		id: row.id,
-		disabled: !orderable
+		disabled: !orderable || pinned
 	});
+	if (pinned) return null;
 	const lifted = rowReorderKeyboard?.active(row.id) === true;
 	const handleKeyDown = (event) => {
 		const keyboard = rowReorderKeyboard;
@@ -2844,8 +2847,9 @@ function TableBody({ table, virtualization, columnWindow, viewportRef, loading,
 //#endregion
 //#region src/table-footer.tsx
 /**
-* Column footers (totals row). Rendered only when at least one leaf column declares a `footer`;
-* pinned columns keep their sticky offsets so the totals track their columns.
+* Column footers (totals row). Rendered only when at least one column — leaf or group —
+* declares a `footer`; pinned columns keep their sticky offsets so the totals track their
+* columns.
 */
 /**
 * The footer rows that actually render. `getFooterGroups()` mirrors *every* header level, so a
@@ -3700,10 +3704,14 @@ function useColumnWidths(table, columns, viewport, tableMinWidth) {
 * object so `typeof ledgerFeatures` (`LedgerFeatures`) can pre-bind the `TFeatures` generic of
 * every re-exported type — consumers keep writing v8-shaped `ColumnDef<TData>` code.
 *
-* - Every stock feature is registered EXCEPT `columnResizingFeature`: ledger owns the resize
-* interaction end to end (`use-column-resize.ts`), so TanStack's drag machinery — and with it
-* the `columnResizing` state slice, `getIsResizing()`, and `getResizeHandler()` — is not
-* registered at all. Feature-gated APIs cannot lie about a pipeline that never runs.
+* - Every stock feature is registered EXCEPT the two below.
+* - `columnResizingFeature`: ledger owns the resize interaction end to end
+* (`use-column-resize.ts`), so TanStack's drag machinery — and with it the `columnResizing`
+* state slice, `getIsResizing()`, and `getResizeHandler()` — is not registered at all.
+* Feature-gated APIs cannot lie about a pipeline that never runs.
+* - `cellSelectionFeature`: cell selection is deferred until its own design round
+* (docs/DESIGN.md), so the `cellSelection` state slice, `enableCellSelection`, and
+* `cell.getIsSelected()` are likewise absent by the same rule.
 * - Row model factories are registered statically; the `manualX` translations decide at runtime
 * whether a model actually processes rows (client mode) or passes through (server mode).
 * - Every built-in fn ships registered under its conventional name. v9 resolves string ids —
@@ -6029,6 +6037,18 @@ function useDataTable(options) {
 		enableRowSelection,
 		withExpander
 	]);
+	const setPublicColumnPinning = useCallback((updater) => {
+		setColumnPinning((old) => {
+			const next = functionalUpdate(updater, old);
+			const start = next.start.filter((id) => !isInternalColumn(id));
+			const end = next.end.filter((id) => !isInternalColumn(id));
+			if (start.length === next.start.length && end.length === next.end.length) return next;
+			return start.length === old.start.length && end.length === old.end.length && start.every((id, index) => id === old.start[index]) && end.every((id, index) => id === old.end[index]) ? old : {
+				end,
+				start
+			};
+		});
+	}, [setColumnPinning]);
 	if (isDev && (enableRowSelection || withExpander) && !getRowId) warnOnce("missing-get-row-id", "Row selection/expansion is enabled without getRowId — index-based row ids corrupt state across refetches.");
 	const churn = useRef({
 		renders: 0,
@@ -6126,7 +6146,7 @@ function useDataTable(options) {
 		onRowSelectionChange: setRowSelection,
 		onExpandedChange: setExpanded,
 		onColumnVisibilityChange: setColumnVisibility,
-		onColumnPinningChange: setColumnPinning,
+		onColumnPinningChange: setPublicColumnPinning,
 		onColumnOrderChange: setColumnOrder,
 		onColumnSizingChange: setColumnSizing,
 		onGroupingChange: setGrouping,
@@ -6361,11 +6381,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([
@@ -6486,7 +6507,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, 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,