@olenbetong/appframe-ds 1.6.1 → 1.7.0

package/src/grid/index.css

@@ -140,8 +140,8 @@
 
 /* The funnel is highlighted while the column has criteria, as in the toolbar */
 .AfGrid-headerFilterButton[data-active] {
-	--dsc-button-color: var(--ds-color-accent-base-default);
-	--dsc-button-color--hover: var(--ds-color-accent-base-hover);
+	--dsc-button-color: var(--ds-color-brand-base-default);
+	--dsc-button-color--hover: var(--ds-color-brand-base-hover);
 }
 
 .AfGrid-headerFilterEmpty {
@@ -243,3 +243,9 @@
 .AfGrid-root .MuiDataGrid-cell a.ds-button {
 	text-decoration: none;
 }
+
+/* Group rows (row grouping): tinted and bold, so the subtotals read apart from the data rows */
+.AfGrid-root .MuiDataGrid-row.AfGrid-groupRow {
+	background-color: var(--ds-color-neutral-background-tinted);
+	font-weight: 600;
+}

package/src/grid/index.tsx

@@ -9,6 +9,9 @@ import {
 	type GridAggregationFunction,
 	type GridApi,
 	type GridFilterModel,
+	type GridColSpanFn,
+	type GridGroupingColDefOverride,
+	type GridGroupingColDefOverrideParams,
 	type GridGroupNode,
 	type GridRowParams,
 	useGridApiRef,
@@ -17,9 +20,10 @@ import { type DataObject, uid } from "@olenbetong/appframe-data";
 import { DataObjectProvider, useLoading } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { FilterBuilder } from "../filter/index.js";
 import { AfGridColumnsPanel } from "./AfGridColumnsPanel.js";
+import { AfHeaderFilterCell } from "./AfHeaderFilterCell.js";
 import { type AfGridContextValue, AfGridContextProvider } from "./AfGridContext.js";
 import { AfGridError } from "./AfGridError.js";
 import { registerLicense } from "./license.js";
@@ -141,6 +145,58 @@ export {
 };
 
 /** MUI's own default: the grand total in the footer, group subtotals inline. */
+/**
+ * On a group row the grouping cell spans the following visible columns up to the first one that
+ * shows an aggregate, since those cells are empty there. Data rows span nothing.
+ */
+const spanGroupLabel: GridColSpanFn = (_value, row, column, apiRef) => {
+	// The callback is typed with the community API; this grid is premium, which has aggregation.
+	let api = apiRef.current as GridApi | null;
+	if (!api || api.getRowNode(api.getRowId(row))?.type !== "group") return 1;
+
+	let aggregated = api.state.aggregation?.model ?? {};
+	let columns = api.getVisibleColumns();
+	let index = columns.findIndex((c) => c.field === column.field);
+	let span = 1;
+
+	while (index + span < columns.length && !aggregated[columns[index + span].field]) {
+		span++;
+	}
+
+	return span;
+};
+
+/**
+ * MUI generates the grouping column itself, so it never passes through `useAfColumns` and got
+ * MUI's own header filter. It gets ours instead, filtering on the grouped field when the rows are
+ * grouped by a single field, and an empty cell like any unfilterable column otherwise.
+ *
+ * On group rows the column spans the empty cells after it, so the group label is readable in a
+ * column no wider than its expand toggle. A grid can still set its own `colSpan`.
+ */
+function getGroupingColDef(
+	params: GridGroupingColDefOverrideParams,
+	groupingColDef: DataGridProps["groupingColDef"],
+	dataObject: DataObject<any>,
+): GridGroupingColDefOverride {
+	let base = typeof groupingColDef === "function" ? groupingColDef(params) : groupingColDef;
+	let filterColumn = params.fields.length === 1 ? params.fields[0] : undefined;
+
+	return {
+		...base,
+		colSpan: base?.colSpan ?? spanGroupLabel,
+		renderHeaderFilter:
+			base?.renderHeaderFilter ??
+			((props) => (
+				<AfHeaderFilterCell
+					{...props}
+					colDef={{ ...props.colDef, filterColumn } as AfGridColDef}
+					dataObject={dataObject}
+				/>
+			)),
+	};
+}
+
 function getDefaultAggregationPosition(groupNode: GridGroupNode) {
 	return groupNode.depth === -1 ? "footer" : "inline";
 }
@@ -241,6 +297,12 @@ export type AfGridProps = {
 	 * where the client total is wrong.
 	 */
 	serverAggregation?: boolean;
+	/**
+	 * Leave out MUI's loading overlay while the data object loads. For a grid that refreshes on a
+	 * timer: the overlay covers the rows and blocks selecting text in them. The toolbar's refresh
+	 * button still shows that the grid is loading.
+	 */
+	disableLoadingOverlay?: boolean;
 } & Omit<
 	DataGridProps,
 	| "apiRef"
@@ -312,18 +374,25 @@ function AfGrid_(props: AfGridProps) {
 		pinnedRows,
 		getRowClassName,
 		serverAggregation = dataObject.options?.dynamicLoading === true,
+		disableLoadingOverlay = false,
 		...other
 	} = props;
 	let apiRefPriv = useGridApiRef();
 	let apiRef = apiRefProp ?? apiRefPriv;
 	useAfGridApi(props, apiRef);
+	// Group rows (row grouping) are marked so AfGrid's stylesheet can set them apart from the data rows.
+	let getRowClassNameWithGroups = useCallback<NonNullable<DataGridProps["getRowClassName"]>>(
+		(params) =>
+			clsx(getRowClassName?.(params), apiRef.current?.getRowNode(params.id)?.type === "group" && "AfGrid-groupRow"),
+		[getRowClassName, apiRef],
+	);
 	let newItemRow = useAfNewItemRow({
 		apiRef,
 		dataObject,
 		position: newItemRowPosition,
 		disableInsert,
 		pinnedRows,
-		getRowClassName,
+		getRowClassName: getRowClassNameWithGroups,
 	});
 	let initialState_ = useAfPersistedState({
 		apiRef,
@@ -431,7 +500,7 @@ function AfGrid_(props: AfGridProps) {
 						apiRef={apiRef}
 						rows={data}
 						columns={columns}
-						loading={loading}
+						loading={!disableLoadingOverlay && loading}
 						getRowId={(row) => row[uid] ?? row[idField]}
 						{...editProps}
 						{...newItemRow.gridProps}
@@ -463,6 +532,7 @@ function AfGrid_(props: AfGridProps) {
 						 * so the default position is passed explicitly.
 						 */
 						getAggregationPosition={other.getAggregationPosition ?? getDefaultAggregationPosition}
+						groupingColDef={(params) => getGroupingColDef(params, other.groupingColDef, dataObject)}
 						localeText={{ ...other.localeText, ...AF_GRID_LOCALE_TEXT }}
 						slots={{
 							...dsBaseSlots,

package/src/grid/useAfGridApi.ts

@@ -62,6 +62,9 @@ export function useAfGridApi(props: Partial<AfGridProps>, apiRef: React.RefObjec
 			);
 		}
 		apiRef.current?.setPinnedColumns(propsRef.current.initialState?.pinnedColumns ?? {});
+		// Grouping and aggregation are part of the layout too: back to what the grid declares.
+		apiRef.current?.setRowGroupingModel(propsRef.current.initialState?.rowGrouping?.model ?? []);
+		apiRef.current?.setAggregationModel(propsRef.current.initialState?.aggregation?.model ?? {});
 	}, [apiRef]);
 
 	if (apiRef.current) {

package/src/layout/AppMenuItem.css

@@ -47,8 +47,12 @@
 	flex-shrink: 0;
 }
 
+/*
+ * Hover and press tint the item with the text colour, so it darkens the item in light mode and
+ * lightens it in dark mode; a black overlay disappeared on the dark menu.
+ */
 .AppMenuItem-root::before {
-	background-color: #000;
+	background-color: var(--ds-color-neutral-text-default, #000);
 	opacity: 0;
 	transition:
 		opacity 30ms linear,
@@ -70,7 +74,7 @@
 }
 
 .AppMenuItem-root:hover::before {
-	opacity: 0.04;
+	opacity: 0.08;
 }
 
 .AppMenuItem-root:active::before {

package/src/mdi/Mdi.css

@@ -1,138 +1,138 @@
-.ObMdi-root {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	min-width: 0;
-	min-height: 0;
-}
-
-.ObMdi-root > .dv-dockview {
-	width: 100%;
-	height: 100%;
-}
-
-/*
- * The dockview variables mapped to Designsystemet tokens. The theme class is also
- * applied to the container in popout windows, so the mapping travels with them.
- */
-.ObMdi-theme {
-	--dv-paneview-active-outline-color: var(--ds-color-focus-outer, #1e2b3c);
-	--dv-tabs-and-actions-container-font-size: var(--ds-font-size-3, 0.875rem);
-	--dv-tabs-and-actions-container-height: 2.25rem;
-	--dv-tab-font-size: inherit;
-	--dv-tabs-and-actions-container-background-color: var(--ds-color-neutral-surface-default, #f3f4f5);
-	--dv-group-view-background-color: var(--ds-color-neutral-background-default, #fff);
-	--dv-activegroup-visiblepanel-tab-background-color: var(--ds-color-neutral-background-default, #fff);
-	--dv-activegroup-hiddenpanel-tab-background-color: var(--ds-color-neutral-surface-default, #f3f4f5);
-	--dv-inactivegroup-visiblepanel-tab-background-color: var(--ds-color-neutral-background-tinted, #f8f9fa);
-	--dv-inactivegroup-hiddenpanel-tab-background-color: var(--ds-color-neutral-surface-default, #f3f4f5);
-	--dv-activegroup-visiblepanel-tab-color: var(--ds-color-neutral-text-default, #292c30);
-	--dv-activegroup-hiddenpanel-tab-color: var(--ds-color-neutral-text-subtle, #5b5f64);
-	--dv-inactivegroup-visiblepanel-tab-color: var(--ds-color-neutral-text-subtle, #5b5f64);
-	--dv-inactivegroup-hiddenpanel-tab-color: var(--ds-color-neutral-text-subtle, #5b5f64);
-	--dv-tab-divider-color: var(--ds-color-neutral-border-subtle, #d5d7d9);
-	--dv-separator-border: var(--ds-color-neutral-border-subtle, #d5d7d9);
-	--dv-paneview-header-border-color: var(--ds-color-neutral-border-default, #a6a9ad);
-	--dv-sash-color: transparent;
-	--dv-active-sash-color: var(--ds-color-accent-base-default, #116069);
-	--dv-active-sash-transition-duration: 0.1s;
-	--dv-active-sash-transition-delay: 0.3s;
-	--dv-drag-over-background-color: color-mix(in srgb, var(--ds-color-accent-base-default, #116069) 20%, transparent);
-	--dv-drag-over-border-color: var(--ds-color-accent-base-default, #116069);
-	--dv-drag-over-border: none;
-	--dv-edge-dock-indicator-color: var(--ds-color-accent-base-default, #116069);
-	--dv-dnd-compass-color: var(--ds-color-neutral-border-default, #a6a9ad);
-	--dv-dnd-compass-cell-color: var(--ds-color-neutral-surface-default, #f3f4f5);
-	--dv-dnd-compass-edge-cell-color: var(--ds-color-neutral-surface-hover, #e6e8ea);
-	--dv-dnd-compass-active-cell-color: var(--ds-color-accent-surface-hover, #d1e5e7);
-	--dv-tabs-container-scrollbar-color: var(--ds-color-neutral-border-default, #a6a9ad);
-	--dv-scrollbar-background-color: var(--ds-color-neutral-border-default, #a6a9ad);
-	--dv-icon-hover-background-color: var(--ds-color-neutral-surface-hover, #e6e8ea);
-	--dv-context-menu-background-color: var(--ds-color-neutral-background-default, #fff);
-	--dv-context-menu-color: var(--ds-color-neutral-text-default, #292c30);
-	--dv-floating-box-shadow: var(--ds-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.12));
-	--dv-floating-border: 1px solid var(--ds-color-neutral-border-default, #a6a9ad);
-	--dv-floating-group-border: none;
-	--dv-floating-group-dragging-opacity: 0.5;
-	--dv-floating-titlebar-height: 22px;
-	--dv-floating-titlebar-background-color: var(--dv-tabs-and-actions-container-background-color);
-	--dv-floating-titlebar-border-bottom: var(--dv-floating-border);
-	--dv-overlay-z-index: 999;
-	--dv-border-radius: 0px;
-	--dv-tab-margin: 0;
-	--dv-spacing-padding: 0px;
-	--dv-tab-border-radius: 0px;
-	--dv-sash-border-radius: 0px;
-	--dv-dropdown-border-radius: var(--ds-border-radius-md, 0.25rem);
-	--dv-tab-close-icon-size: inherit;
-	--dv-smart-guides-color: var(--ds-color-accent-base-default, #116069);
-	--dv-smart-guides-preview-color: color-mix(in srgb, var(--ds-color-accent-base-default, #116069) 20%, transparent);
-	--dv-tab-group-color-grey: #5f6368;
-	--dv-tab-group-color-blue: #1a73e8;
-	--dv-tab-group-color-red: #d93025;
-	--dv-tab-group-color-yellow: #f9ab00;
-	--dv-tab-group-color-green: #188038;
-	--dv-tab-group-color-pink: #d01884;
-	--dv-tab-group-color-purple: #a142f4;
-	--dv-tab-group-color-cyan: #007b83;
-	--dv-tab-group-color-orange: #e8710a;
-	--dv-tab-group-chip-padding: 4px 8px;
-	--dv-tab-group-chip-border-radius: 6px;
-	--dv-tab-group-chip-font-size: 11px;
-	--dv-tab-group-line-height: 2px;
-	--dv-tab-group-line-opacity: 0.6;
-
-	font-family: var(--ds-font-family, inherit);
-	color: var(--ds-color-neutral-text-default, #292c30);
-}
-
-/* The active tab gets an accent line so it reads as selected without relying on background alone. */
-.ObMdi-theme .dv-tab.dv-active-tab {
-	box-shadow: inset 0 -2px 0 var(--ds-color-accent-base-default, #116069);
-}
-
-.ObMdi-theme .dv-tab:focus-visible {
-	outline: 2px solid var(--ds-color-focus-outer, #1e2b3c);
-	outline-offset: -2px;
-}
-
-/* Dirty marker: a dot after the title */
-.ObMdi-tab--dirty .dv-default-tab-content::after {
-	content: " \2022";
-	color: var(--ds-color-warning-base-default, #b8860b);
-}
-
-.ObMdi-error {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-2, 0.5rem);
-	padding: var(--ds-size-4, 1rem);
-	color: var(--ds-color-danger-text-default, #b3221a);
-}
-
-.ObMdi-error-title {
-	margin: 0;
-	font-weight: 600;
-}
-
-.ObMdi-error-message {
-	margin: 0;
-	white-space: pre-wrap;
-	font-size: var(--ds-font-size-2, 0.8125rem);
-	color: var(--ds-color-neutral-text-subtle, #5b5f64);
-}
-
-.ObMdi-watermark {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	height: 100%;
-	color: var(--ds-color-neutral-text-subtle, #5b5f64);
-}
-
-.ObMdi-confirmClose-actions {
-	display: flex;
-	gap: var(--ds-size-2, 0.5rem);
-	justify-content: flex-end;
-}
+.ObMdi-root {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	min-width: 0;
+	min-height: 0;
+}
+
+.ObMdi-root > .dv-dockview {
+	width: 100%;
+	height: 100%;
+}
+
+/*
+ * The dockview variables mapped to Designsystemet tokens. The theme class is also
+ * applied to the container in popout windows, so the mapping travels with them.
+ */
+.ObMdi-theme {
+	--dv-paneview-active-outline-color: var(--ds-color-focus-outer, #1e2b3c);
+	--dv-tabs-and-actions-container-font-size: var(--ds-font-size-3, 0.875rem);
+	--dv-tabs-and-actions-container-height: 2.25rem;
+	--dv-tab-font-size: inherit;
+	--dv-tabs-and-actions-container-background-color: var(--ds-color-neutral-surface-default, #f3f4f5);
+	--dv-group-view-background-color: var(--ds-color-neutral-background-default, #fff);
+	--dv-activegroup-visiblepanel-tab-background-color: var(--ds-color-neutral-background-default, #fff);
+	--dv-activegroup-hiddenpanel-tab-background-color: var(--ds-color-neutral-surface-default, #f3f4f5);
+	--dv-inactivegroup-visiblepanel-tab-background-color: var(--ds-color-neutral-background-tinted, #f8f9fa);
+	--dv-inactivegroup-hiddenpanel-tab-background-color: var(--ds-color-neutral-surface-default, #f3f4f5);
+	--dv-activegroup-visiblepanel-tab-color: var(--ds-color-neutral-text-default, #292c30);
+	--dv-activegroup-hiddenpanel-tab-color: var(--ds-color-neutral-text-subtle, #5b5f64);
+	--dv-inactivegroup-visiblepanel-tab-color: var(--ds-color-neutral-text-subtle, #5b5f64);
+	--dv-inactivegroup-hiddenpanel-tab-color: var(--ds-color-neutral-text-subtle, #5b5f64);
+	--dv-tab-divider-color: var(--ds-color-neutral-border-subtle, #d5d7d9);
+	--dv-separator-border: var(--ds-color-neutral-border-subtle, #d5d7d9);
+	--dv-paneview-header-border-color: var(--ds-color-neutral-border-default, #a6a9ad);
+	--dv-sash-color: transparent;
+	--dv-active-sash-color: var(--ds-color-brand-base-default, #116069);
+	--dv-active-sash-transition-duration: 0.1s;
+	--dv-active-sash-transition-delay: 0.3s;
+	--dv-drag-over-background-color: color-mix(in srgb, var(--ds-color-brand-base-default, #116069) 20%, transparent);
+	--dv-drag-over-border-color: var(--ds-color-brand-base-default, #116069);
+	--dv-drag-over-border: none;
+	--dv-edge-dock-indicator-color: var(--ds-color-brand-base-default, #116069);
+	--dv-dnd-compass-color: var(--ds-color-neutral-border-default, #a6a9ad);
+	--dv-dnd-compass-cell-color: var(--ds-color-neutral-surface-default, #f3f4f5);
+	--dv-dnd-compass-edge-cell-color: var(--ds-color-neutral-surface-hover, #e6e8ea);
+	--dv-dnd-compass-active-cell-color: var(--ds-color-brand-surface-hover, #d1e5e7);
+	--dv-tabs-container-scrollbar-color: var(--ds-color-neutral-border-default, #a6a9ad);
+	--dv-scrollbar-background-color: var(--ds-color-neutral-border-default, #a6a9ad);
+	--dv-icon-hover-background-color: var(--ds-color-neutral-surface-hover, #e6e8ea);
+	--dv-context-menu-background-color: var(--ds-color-neutral-background-default, #fff);
+	--dv-context-menu-color: var(--ds-color-neutral-text-default, #292c30);
+	--dv-floating-box-shadow: var(--ds-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.12));
+	--dv-floating-border: 1px solid var(--ds-color-neutral-border-default, #a6a9ad);
+	--dv-floating-group-border: none;
+	--dv-floating-group-dragging-opacity: 0.5;
+	--dv-floating-titlebar-height: 22px;
+	--dv-floating-titlebar-background-color: var(--dv-tabs-and-actions-container-background-color);
+	--dv-floating-titlebar-border-bottom: var(--dv-floating-border);
+	--dv-overlay-z-index: 999;
+	--dv-border-radius: 0px;
+	--dv-tab-margin: 0;
+	--dv-spacing-padding: 0px;
+	--dv-tab-border-radius: 0px;
+	--dv-sash-border-radius: 0px;
+	--dv-dropdown-border-radius: var(--ds-border-radius-md, 0.25rem);
+	--dv-tab-close-icon-size: inherit;
+	--dv-smart-guides-color: var(--ds-color-brand-base-default, #116069);
+	--dv-smart-guides-preview-color: color-mix(in srgb, var(--ds-color-brand-base-default, #116069) 20%, transparent);
+	--dv-tab-group-color-grey: #5f6368;
+	--dv-tab-group-color-blue: #1a73e8;
+	--dv-tab-group-color-red: #d93025;
+	--dv-tab-group-color-yellow: #f9ab00;
+	--dv-tab-group-color-green: #188038;
+	--dv-tab-group-color-pink: #d01884;
+	--dv-tab-group-color-purple: #a142f4;
+	--dv-tab-group-color-cyan: #007b83;
+	--dv-tab-group-color-orange: #e8710a;
+	--dv-tab-group-chip-padding: 4px 8px;
+	--dv-tab-group-chip-border-radius: 6px;
+	--dv-tab-group-chip-font-size: 11px;
+	--dv-tab-group-line-height: 2px;
+	--dv-tab-group-line-opacity: 0.6;
+
+	font-family: var(--ds-font-family, inherit);
+	color: var(--ds-color-neutral-text-default, #292c30);
+}
+
+/* The active tab gets an accent line so it reads as selected without relying on background alone. */
+.ObMdi-theme .dv-tab.dv-active-tab {
+	box-shadow: inset 0 -2px 0 var(--ds-color-brand-base-default, #116069);
+}
+
+.ObMdi-theme .dv-tab:focus-visible {
+	outline: 2px solid var(--ds-color-focus-outer, #1e2b3c);
+	outline-offset: -2px;
+}
+
+/* Dirty marker: a dot after the title */
+.ObMdi-tab--dirty .dv-default-tab-content::after {
+	content: " \2022";
+	color: var(--ds-color-warning-base-default, #b8860b);
+}
+
+.ObMdi-error {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-2, 0.5rem);
+	padding: var(--ds-size-4, 1rem);
+	color: var(--ds-color-danger-text-default, #b3221a);
+}
+
+.ObMdi-error-title {
+	margin: 0;
+	font-weight: 600;
+}
+
+.ObMdi-error-message {
+	margin: 0;
+	white-space: pre-wrap;
+	font-size: var(--ds-font-size-2, 0.8125rem);
+	color: var(--ds-color-neutral-text-subtle, #5b5f64);
+}
+
+.ObMdi-watermark {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	color: var(--ds-color-neutral-text-subtle, #5b5f64);
+}
+
+.ObMdi-confirmClose-actions {
+	display: flex;
+	gap: var(--ds-size-2, 0.5rem);
+	justify-content: flex-end;
+}