@coldsmirk/ledger-mantine 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -1087,6 +1087,10 @@ function resolveIcons(icons) {
 const defaultLabels = {
 	paginationSummary: (from, to, total) => `${from}–${to} of ${total}`,
 	rowsPerPage: "Rows per page",
+	firstPage: "First page",
+	previousPage: "Previous page",
+	nextPage: "Next page",
+	lastPage: "Last page",
 	selectAllRows: "Select all rows",
 	selectRow: "Select row",
 	selectedCount: (count) => `${count} selected`,
@@ -1115,6 +1119,12 @@ const defaultLabels = {
 	filterPlaceholder: "Filter…",
 	filterRangeMin: "Min",
 	filterRangeMax: "Max",
+	previousMonth: "Previous month",
+	nextMonth: "Next month",
+	previousYear: "Previous year",
+	nextYear: "Next year",
+	previousDecade: "Previous decade",
+	nextDecade: "Next decade",
 	searchPlaceholder: "Search…",
 	loading: "Loading",
 	empty: "No data",
@@ -1600,6 +1610,12 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [
 	50,
 	100
 ];
+const CONTROL_LABELS = {
+	first: "firstPage",
+	previous: "previousPage",
+	next: "nextPage",
+	last: "lastPage"
+};
 function PaginationBarCore({ table, labels, pageSizeOptions, size, className, style }) {
 	const pageSizeLabelId = (0, react.useId)();
 	const { pageIndex, pageSize } = table.atoms.pagination.get();
@@ -1615,7 +1631,7 @@ function PaginationBarCore({ table, labels, pageSizeOptions, size, className, st
 		style,
 		wrap: "wrap",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Text, {
-			c: "dimmed",
+			c: "var(--ledger-color-dimmed)",
 			size,
 			children: labels.paginationSummary(from, to, total)
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Group, {
@@ -1625,7 +1641,7 @@ function PaginationBarCore({ table, labels, pageSizeOptions, size, className, st
 				gap: "xs",
 				wrap: "nowrap",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Text, {
-					c: "dimmed",
+					c: "var(--ledger-color-dimmed)",
 					id: pageSizeLabelId,
 					size,
 					children: labels.rowsPerPage
@@ -1639,6 +1655,9 @@ function PaginationBarCore({ table, labels, pageSizeOptions, size, className, st
 					onChange: (value) => value !== null && table.setPageSize(Number(value))
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Pagination, {
+				getControlProps: (control) => {
+					return { "aria-label": labels[CONTROL_LABELS[control]] };
+				},
 				size: SIZES[size].control,
 				total: pageCount,
 				value: pageIndex + 1,
@@ -3060,6 +3079,14 @@ function autosizeColumn(setColumnSizing, { columnId, minSize, maxSize, hasFilter
 * a black box that may ship no clear of its own — keeps the popover-level fallback.
 */
 const FACETED_OPTIONS_CAP = 100;
+/**
+* The smallest pointer target WCAG 2.2 AA accepts without spacing around it, in px.
+*/
+const MIN_TARGET_SIZE = 24;
+/**
+* The calendar's weekend color, as the variable Mantine's day rule reads (see DateRangeFilter).
+*/
+const WEEKEND_COLOR = { "--mantine-color-red-6": "color-mix(in srgb, var(--mantine-color-red-text), var(--mantine-color-text) 30%)" };
 function FilterPopover({ column }) {
 	const { labels, icons, getStyles, filterMode, size } = useDataTableContext();
 	const filter = column.columnDef.meta?.filter;
@@ -3073,6 +3100,8 @@ function FilterPopover({ column }) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Popover.Target, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ActionIcon, {
 			"aria-label": name,
 			"data-active": active || void 0,
+			mih: MIN_TARGET_SIZE,
+			miw: MIN_TARGET_SIZE,
 			size: SIZES[size].control,
 			variant: active ? "light" : "subtle",
 			onClick: (event) => event.stopPropagation(),
@@ -3254,11 +3283,21 @@ function DateRangeFilter({ column, name }) {
 	const filterValue = column.getFilterValue();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_dates.DatePicker, {
 		allowSingleDateInRange: true,
+		hideOutsideDates: true,
 		highlightToday: true,
 		"aria-label": name,
 		size: "xs",
+		style: WEEKEND_COLOR,
 		type: "range",
 		value: filterValue ?? [null, null],
+		ariaLabels: {
+			previousMonth: labels.previousMonth,
+			nextMonth: labels.nextMonth,
+			previousYear: labels.previousYear,
+			nextYear: labels.nextYear,
+			previousDecade: labels.previousDecade,
+			nextDecade: labels.nextDecade
+		},
 		onChange: (next) => column.setFilterValue(!next[0] && !next[1] ? void 0 : next)
 	}), filterValue !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Group, {
 		justify: "flex-end",
@@ -3836,6 +3875,24 @@ const builtInFilterFns = {
 	startsWith: _tanstack_react_table.filterFn_startsWith,
 	weakEquals: _tanstack_react_table.filterFn_weakEquals
 };
+/**
+* Typed through the exported definitions on purpose: since 9.2 several of their value types
+* name an alias TanStack does not export, and an inferred registry would carry that alias into
+* ledger's declaration files, where no consumer can resolve it.
+*/
+const builtInAggregationFns = {
+	count: _tanstack_react_table.aggregationFn_count,
+	extent: _tanstack_react_table.aggregationFn_extent,
+	first: _tanstack_react_table.aggregationFn_first,
+	last: _tanstack_react_table.aggregationFn_last,
+	max: _tanstack_react_table.aggregationFn_max,
+	mean: _tanstack_react_table.aggregationFn_mean,
+	median: _tanstack_react_table.aggregationFn_median,
+	min: _tanstack_react_table.aggregationFn_min,
+	sum: _tanstack_react_table.aggregationFn_sum,
+	unique: _tanstack_react_table.aggregationFn_unique,
+	uniqueCount: _tanstack_react_table.aggregationFn_uniqueCount
+};
 const ledgerFeatures = (0, _tanstack_react_table.tableFeatures)({
 	cellSpanningFeature: _tanstack_react_table.cellSpanningFeature,
 	columnFacetingFeature: _tanstack_react_table.columnFacetingFeature,
@@ -3860,19 +3917,7 @@ const ledgerFeatures = (0, _tanstack_react_table.tableFeatures)({
 	groupedRowModel: (0, _tanstack_react_table.createGroupedRowModel)(),
 	paginatedRowModel: (0, _tanstack_react_table.createPaginatedRowModel)(),
 	sortedRowModel: (0, _tanstack_react_table.createSortedRowModel)(),
-	aggregationFns: {
-		count: _tanstack_react_table.aggregationFn_count,
-		extent: _tanstack_react_table.aggregationFn_extent,
-		first: _tanstack_react_table.aggregationFn_first,
-		last: _tanstack_react_table.aggregationFn_last,
-		max: _tanstack_react_table.aggregationFn_max,
-		mean: _tanstack_react_table.aggregationFn_mean,
-		median: _tanstack_react_table.aggregationFn_median,
-		min: _tanstack_react_table.aggregationFn_min,
-		sum: _tanstack_react_table.aggregationFn_sum,
-		unique: _tanstack_react_table.aggregationFn_unique,
-		uniqueCount: _tanstack_react_table.aggregationFn_uniqueCount
-	},
+	aggregationFns: builtInAggregationFns,
 	filterFns: {
 		...builtInFilterFns,
 		...ledgerFilterFns
@@ -6393,6 +6438,33 @@ function useStylesRevision(getStyles, selectors) {
 	return revision;
 }
 //#endregion
+//#region src/use-viewport-overflow.ts
+/**
+* Whether the body viewport scrolls on either axis. A scroll container has to be reachable by
+* keyboard to be scrolled by it (WCAG 2.1.1), while a focus stop over content that fits is a
+* Tab press spent on nothing — so the viewport's focus stop follows this.
+*
+* Measured whenever the viewport or its content resizes: rows arriving, columns widening, or
+* the host resizing the table each change the answer without a scroll event. A 1px tolerance
+* absorbs fractional layout rounding, which would otherwise flicker the stop on and off.
+*/
+function useViewportOverflow(viewport) {
+	const [overflowing, setOverflowing] = (0, react.useState)(false);
+	(0, react.useLayoutEffect)(() => {
+		if (!viewport) return;
+		const measure = () => {
+			const next = viewport.scrollHeight - viewport.clientHeight > 1 || viewport.scrollWidth - viewport.clientWidth > 1;
+			setOverflowing(next);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(viewport);
+		if (viewport.firstElementChild) observer.observe(viewport.firstElementChild);
+		return () => observer.disconnect();
+	}, [viewport]);
+	return overflowing;
+}
+//#endregion
 //#region src/data-table.tsx
 /**
 * The root component (docs/api.md): a generic Mantine factory with full Styles API,
@@ -6450,7 +6522,7 @@ const STYLE_SELECTORS = Object.keys(classes);
 */
 const NO_ARIA_ROWS = [];
 const EMPTY_STATE_STYLES = { title: {
-	color: "var(--mantine-color-dimmed)",
+	color: "var(--ledger-color-dimmed)",
 	fontWeight: 500
 } };
 const defaultProps = {
@@ -6642,6 +6714,7 @@ function DataTableCore({ presentation, stylesProps, table }) {
 		viewportRef.current = element;
 		setViewport(element);
 	}, []);
+	const viewportOverflows = useViewportOverflow(viewport);
 	const startLeafColumns = table.getStartVisibleLeafColumns();
 	const endLeafColumns = table.getEndVisibleLeafColumns();
 	const displayColumns = [
@@ -6857,7 +6930,7 @@ function DataTableCore({ presentation, stylesProps, table }) {
 		rowPinningActive,
 		withDetailPanels
 	]);
-	const bodyAriaRowCount = loading && logicalDisplayRowCount === 0 ? skeletonRowCount : logicalDisplayRowCount + (loadMoreError || loadingMore ? 1 : 0);
+	const bodyAriaRowCount = loading && logicalDisplayRowCount === 0 ? skeletonRowCount : logicalDisplayRowCount + (loadMoreError || loadingMore ? 1 : 0) + (isEmpty || errorActive ? 1 : 0);
 	const footerRowCount = visibleFooterGroups(table).length;
 	const ariaRowCount = headerRowCount + bodyAriaRowCount + footerRowCount;
 	const footerAriaRowIndexStart = headerRowCount + bodyAriaRowCount + 1;
@@ -7231,11 +7304,10 @@ function DataTableCore({ presentation, stylesProps, table }) {
 								},
 								viewportProps: mergeElementProps(viewportProps, {
 									style: { overscrollBehavior: "none" },
+									role: "rowgroup",
 									"aria-describedby": viewportDescribedBy,
-									...activeRowEnabled && {
-										tabIndex: 0,
-										onKeyDown: handleActiveRowKeyDown
-									}
+									tabIndex: activeRowEnabled || viewportOverflows ? 0 : void 0,
+									...activeRowEnabled && { onKeyDown: handleActiveRowKeyDown }
 								}),
 								onScrollPositionChange: handleScrollPositionChange,
 								children: [
@@ -7258,43 +7330,59 @@ function DataTableCore({ presentation, stylesProps, table }) {
 										})]
 									}),
 									isEmpty && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										...getStyles("empty"),
-										"data-variant": filtersActive ? "no-results" : "no-data",
-										role: "status",
-										children: emptyState ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.EmptyState, {
-											withIndicatorBackground: true,
-											size: "sm",
-											styles: EMPTY_STATE_STYLES,
-											title: filtersActive ? labels.noResults : labels.empty,
-											icon: filtersActive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.noResults, {
-												size: 40,
-												strokeWidth: 1.5
-											}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.empty, {
-												size: 40,
-												strokeWidth: 1.5
+										"aria-rowindex": virtualEnabled ? headerRowCount + bodyAriaRowCount : void 0,
+										role: "row",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											...getStyles("empty"),
+											"aria-colspan": visibleLeafColumns.length,
+											"data-variant": filtersActive ? "no-results" : "no-data",
+											role: "cell",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												role: "status",
+												children: emptyState ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.EmptyState, {
+													withIndicatorBackground: true,
+													size: "sm",
+													styles: EMPTY_STATE_STYLES,
+													title: filtersActive ? labels.noResults : labels.empty,
+													icon: filtersActive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.noResults, {
+														size: 40,
+														strokeWidth: 1.5
+													}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.empty, {
+														size: 40,
+														strokeWidth: 1.5
+													})
+												})
 											})
 										})
 									}),
 									errorActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										...getStyles("empty"),
-										"data-over-rows": rowsLength > 0 || void 0,
-										"data-variant": "error",
-										role: "alert",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.EmptyState, {
-											withIndicatorBackground: true,
-											icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.error, {
-												size: 40,
-												strokeWidth: 1.5
-											}),
-											size: "sm",
-											styles: EMPTY_STATE_STYLES,
-											title: error === true ? labels.error : error,
-											children: onRetry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Button, {
-												leftSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.retry, { size: 14 }),
-												size: "xs",
-												variant: "light",
-												onClick: onRetry,
-												children: labels.retry
+										"aria-rowindex": virtualEnabled ? headerRowCount + bodyAriaRowCount : void 0,
+										role: "row",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											...getStyles("empty"),
+											"aria-colspan": visibleLeafColumns.length,
+											"data-over-rows": rowsLength > 0 || void 0,
+											"data-variant": "error",
+											role: "cell",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												role: "alert",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.EmptyState, {
+													withIndicatorBackground: true,
+													icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.error, {
+														size: 40,
+														strokeWidth: 1.5
+													}),
+													size: "sm",
+													styles: EMPTY_STATE_STYLES,
+													title: error === true ? labels.error : error,
+													children: onRetry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Button, {
+														leftSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.retry, { size: 14 }),
+														size: "xs",
+														variant: "light",
+														onClick: onRetry,
+														children: labels.retry
+													})
+												})
 											})
 										})
 									})