@olenbetong/appframe-ds 0.7.0 → 0.9.0

package/src/grid/slots/slots.css

@@ -0,0 +1,53 @@
+.AfGrid-checkbox {
+	display: inline-flex;
+	align-items: center;
+}
+
+.AfGrid-checkbox input {
+	cursor: pointer;
+}
+
+.AfGrid-textField,
+.AfGrid-select {
+	width: 100%;
+}
+
+.AfGrid-badgeWrapper {
+	position: relative;
+	display: inline-flex;
+}
+
+.AfGrid-linearProgress {
+	position: relative;
+	width: 100%;
+	height: 4px;
+	overflow: hidden;
+	background: var(--ds-color-neutral-surface-tinted, rgb(0 0 0 / 10%));
+}
+
+.AfGrid-linearProgress::after {
+	position: absolute;
+	inset-block: 0;
+	inline-size: 40%;
+	background: var(--ds-color-brand-base-default, currentcolor);
+	animation: AfGrid-linearProgress 1.2s ease-in-out infinite;
+	content: "";
+}
+
+@keyframes AfGrid-linearProgress {
+	0% {
+		inset-inline-start: -40%;
+	}
+
+	100% {
+		inset-inline-start: 100%;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.AfGrid-linearProgress::after {
+		animation: none;
+		inset-inline-start: 0;
+		inline-size: 100%;
+	}
+}

package/src/grid/theme.tsx

@@ -0,0 +1,185 @@
+import { StyledEngineProvider, type Theme, ThemeProvider } from "@mui/material";
+import { createTheme as muiCreateTheme } from "@mui/material/styles";
+import { createContext, type ReactNode, use, useEffect, useState } from "react";
+
+function getColorScheme(element?: Element | null): "light" | "dark" {
+	let scoped = element?.closest<HTMLElement>("[data-color-scheme]");
+	let scheme =
+		scoped?.dataset.colorScheme ??
+		document.body?.dataset.colorScheme ??
+		document.documentElement?.dataset.colorScheme ??
+		"light";
+
+	if (scheme === "auto") {
+		return globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	}
+
+	return scheme === "dark" ? "dark" : "light";
+}
+
+/**
+ * Tracks the color scheme Designsystemet is rendering with. The article template
+ * sets `data-color-scheme` on `<body>`, but it may also be scoped to a subtree,
+ * so resolve it from `element` upwards when one is given. The OS preference is
+ * watched too, since it decides the result when the scheme is `auto`.
+ */
+export function useDsColorScheme(element?: Element | null) {
+	let [scheme, setScheme] = useState<"light" | "dark">(() => getColorScheme(element));
+
+	useEffect(() => {
+		function update() {
+			setScheme(getColorScheme(element));
+		}
+
+		update();
+
+		// `data-color-scheme` may sit on any ancestor, so watch the whole document
+		// for that one attribute rather than just `<html>` and `<body>`.
+		let observer = new MutationObserver(update);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-color-scheme"],
+			subtree: true,
+		});
+
+		let media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
+		media?.addEventListener("change", update);
+
+		return () => {
+			observer.disconnect();
+			media?.removeEventListener("change", update);
+		};
+	}, [element]);
+
+	return scheme;
+}
+
+function buildTheme(mode: "light" | "dark", element?: Element | null) {
+	let styles = getComputedStyle(element ?? document.body);
+	let get = (variable: string) => styles.getPropertyValue(variable).trim();
+	let isDark = mode === "dark";
+
+	return muiCreateTheme({
+		palette: {
+			mode,
+			primary: {
+				main: get("--ds-color-brand-base-default") || "#116069",
+				dark: get("--ds-color-brand-base-hover") || "#0d4b52",
+				contrastText: get("--ds-color-brand-base-contrast-default") || "#ffffff",
+			},
+			secondary: {
+				main: get("--ds-color-brand-light-base-default") || "#1a95a2",
+			},
+			error: {
+				main: get("--ds-color-danger-base-default") || (isDark ? "#ff8a80" : "#b3221a"),
+			},
+			warning: {
+				main: get("--ds-color-warning-base-default") || "#b8860b",
+			},
+			success: {
+				main: get("--ds-color-success-base-default") || "#2e7d32",
+			},
+			background: {
+				default: get("--ds-color-neutral-background-default") || (isDark ? "#17181a" : "#ffffff"),
+				paper: get("--ds-color-neutral-background-default") || (isDark ? "#17181a" : "#ffffff"),
+			},
+			text: {
+				primary: get("--ds-color-neutral-text-default") || (isDark ? "#e5e6e7" : "#292c30"),
+				secondary: get("--ds-color-neutral-text-subtle") || (isDark ? "#b3b5b7" : "#5b5f64"),
+			},
+			divider: get("--ds-color-neutral-border-subtle") || (isDark ? "#4e5052" : "#bbbcbd"),
+		},
+		typography: {
+			fontFamily: "var(--ds-font-family, inherit)",
+		},
+		components: {
+			MuiButton: {
+				styleOverrides: {
+					root: { borderRadius: "var(--ds-border-radius-md, 2px)" },
+				},
+			},
+			MuiFormLabel: {
+				styleOverrides: {
+					root: { color: get("--ds-color-neutral-text-subtle") || "rgba(0, 0, 0, 0.72)" },
+				},
+			},
+		},
+	});
+}
+
+const themeCache: Partial<Record<"light" | "dark", Theme>> = {};
+
+/**
+ * Returns the MUI theme built from the Designsystemet tokens currently in
+ * effect. Pass `element` to read the tokens from a specific place in the DOM,
+ * which matters when the color scheme is scoped to a subtree. The theme is
+ * cached per color scheme at module level, so every grid on the page shares a
+ * single theme instance.
+ */
+export function getDsMuiTheme(mode: "light" | "dark", element?: Element | null) {
+	let theme = themeCache[mode];
+
+	if (!theme) {
+		theme = buildTheme(mode, element);
+		themeCache[mode] = theme;
+	}
+
+	return theme;
+}
+
+/**
+ * Drops the cached themes, so they are rebuilt from the current token values the
+ * next time a grid renders. Only needed if the tokens themselves change at
+ * runtime (a brand switch, for example) — a color scheme change is handled by
+ * the per-scheme cache.
+ */
+export function resetDsMuiTheme() {
+	delete themeCache.light;
+	delete themeCache.dark;
+}
+
+const ThemeProvidedContext = createContext(false);
+
+export type AfGridThemeProviderProps = {
+	children: ReactNode;
+};
+
+/**
+ * Bridges Designsystemet's colour tokens into a MUI theme, so the data grid
+ * follows Designsystemet instead of the MUI defaults.
+ *
+ * `AfGrid` renders this itself, so apps only need it when they render other MUI
+ * components alongside the grid, or want a single provider for many grids.
+ * Nesting it is safe: the inner provider is a no-op.
+ */
+export function AfGridThemeProvider({ children }: AfGridThemeProviderProps) {
+	let provided = use(ThemeProvidedContext);
+
+	// A display-less probe so the scheme and the tokens are read from this
+	// provider's position in the DOM rather than from `<body>`. Custom properties
+	// still resolve on a hidden element, and it takes part in no layout.
+	let [anchor, setAnchor] = useState<HTMLSpanElement | null>(null);
+	let colorScheme = useDsColorScheme(anchor);
+
+	// The stylesheets are imported from JS, so the custom properties aren't
+	// necessarily resolved during the first render. Rebuild after mount, and
+	// whenever the color scheme changes.
+	let [theme, setTheme] = useState(() => getDsMuiTheme(colorScheme, anchor));
+	useEffect(() => {
+		resetDsMuiTheme();
+		setTheme(getDsMuiTheme(colorScheme, anchor));
+	}, [colorScheme, anchor]);
+
+	if (provided) {
+		return children;
+	}
+
+	return (
+		<ThemeProvidedContext value={true}>
+			<span hidden ref={setAnchor} />
+			<StyledEngineProvider injectFirst>
+				<ThemeProvider theme={theme}>{children}</ThemeProvider>
+			</StyledEngineProvider>
+		</ThemeProvidedContext>
+	);
+}

package/src/grid/useAfColumns.tsx

@@ -0,0 +1,313 @@
+import {
+	GRID_CHECKBOX_SELECTION_FIELD,
+	GRID_DETAIL_PANEL_TOGGLE_FIELD,
+	GRID_TREE_DATA_GROUPING_FIELD,
+	GridActionsCellItem,
+	type GridActionsCellItemProps,
+	type GridAlignment,
+	type GridApi,
+	type GridColDef,
+	type GridColType,
+	type GridColumnVisibilityModel,
+	type GridRowId,
+	GridRowModes,
+	type GridRowParams,
+	gridEditRowsStateSelector,
+	useGridApiContext,
+	useGridSelector,
+} from "@mui/x-data-grid-pro";
+import { FloppydiskIcon, PencilIcon, TrashIcon, XMarkIcon } from "@navikt/aksel-icons";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { usePermissions } from "@olenbetong/appframe-react";
+
+import React, { useMemo } from "react";
+
+import { AfHeaderFilterCell } from "./AfHeaderFilterCell.js";
+import { deleteRow } from "./editing.js";
+import { operators } from "./filter.js";
+import { dateTimeValueFormatter, dateValueFormatter } from "./formatters.js";
+
+export type AfGridColDef = GridColDef & {
+	sortColumn?: string;
+	filterColumn?: string;
+	/**
+	 * Whether the column should be hidden by default
+	 */
+	hide?: boolean;
+	/**
+	 * Mark this column as calculated/virtual — it does not correspond to a field in
+	 * the data object. Calculated columns are always non-editable and are excluded
+	 * from server-side sort and filter operations.
+	 */
+	calculated?: boolean;
+};
+
+export function getColumnVisibilityModel(columns: AfGridColumn[]): GridColumnVisibilityModel {
+	let visibility: GridColumnVisibilityModel = {};
+	for (let column of columns) {
+		if (typeof column !== "string" && column.hide) {
+			visibility[column.field] = false;
+		}
+	}
+	return visibility;
+}
+
+export function afColumnsToMuiColumn({
+	apiRef,
+	allowUpdate,
+	columnsProp,
+	dataObject,
+}: useAfColumnsOptions & { allowDelete: boolean; allowUpdate: boolean }) {
+	let columns = columnsProp;
+	if (columns.length === 0) {
+		columns = dataObject.getFields().map((field) => field.name);
+	}
+
+	let sysColumns = [GRID_CHECKBOX_SELECTION_FIELD, GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_TREE_DATA_GROUPING_FIELD];
+	let muiColumns: GridColDef[] = [];
+	let currentColumns = apiRef.current?.getAllColumns?.();
+
+	for (let column of columnsProp) {
+		let fieldName = typeof column === "string" ? column : column.field;
+
+		if (sysColumns.includes(fieldName)) {
+			muiColumns.push(typeof column === "string" ? { field: column } : column);
+		} else {
+			let fieldDef = dataObject.getFields(fieldName);
+			let type = "string";
+			if (typeof column !== "string" && column.type) {
+				type = column.type;
+			} else if (fieldDef?.type) {
+				type = fieldDef.type;
+			}
+
+			if (type === "datetime") {
+				type = "dateTime";
+			}
+
+			if (type === "bigint") {
+				type = "number";
+			}
+
+			if (!muiColumnTypes.includes(type)) {
+				type = "string";
+			}
+
+			let align: GridAlignment;
+			switch (type) {
+				case "number":
+					align = "right";
+					break;
+				case "date":
+				case "dateTime":
+					align = "center";
+					break;
+				default:
+					align = "left";
+					break;
+			}
+
+			let valueFormatter: (value: any) => string | number | boolean | object | null | undefined = (value) => value;
+
+			if (type === "date") {
+				valueFormatter = dateValueFormatter;
+			} else if (type === "dateTime") {
+				valueFormatter = dateTimeValueFormatter;
+			}
+
+			let editable = allowUpdate && !fieldDef?.ignored && !fieldDef?.computed && !fieldDef?.joined;
+
+			// Calculated columns are never editable regardless of data object permissions
+			if (typeof column !== "string" && column.calculated) {
+				editable = false;
+			}
+
+			let currentWidth = currentColumns?.find((c) => c.field === fieldName)?.width;
+
+			let col: GridColDef;
+			if (typeof column === "string") {
+				col = {
+					field: column,
+					type: type as GridColType,
+					headerName: column,
+					valueFormatter,
+					editable,
+					align,
+					headerAlign: align,
+					width: currentWidth ?? 150,
+				};
+			} else {
+				let { hide, calculated, ...rest } = column;
+				col = {
+					headerName: fieldDef?.caption ?? fieldName,
+					editable,
+					type: type as GridColType,
+					valueFormatter,
+					align,
+					headerAlign: align,
+					...rest,
+					width: currentWidth ?? rest.width ?? 150,
+				};
+			}
+
+			if ((operators as any)[type]) {
+				col.filterOperators = (operators as any)[type];
+			}
+
+			// The header filter cell is fully replaced by our own, which edits the
+			// shared filter tree instead of MUI's filter model.
+			if (col.filterable !== false && col.type !== "actions") {
+				col.renderHeaderFilter = (props) => <AfHeaderFilterCell {...props} dataObject={dataObject} />;
+			}
+
+			muiColumns.push(col);
+		}
+	}
+
+	return muiColumns;
+}
+
+const GridActionItem = React.forwardRef<
+	HTMLButtonElement,
+	GridActionsCellItemProps & {
+		rowId: GridRowId;
+		mode: GridRowModes;
+		dataObject: DataObject<any>;
+		requireUpdate?: boolean;
+		requireDelete?: boolean;
+	}
+>(function GridActionItem({ dataObject, mode, rowId, requireDelete = false, requireUpdate = false, ...props }, ref) {
+	let apiRef = useGridApiContext();
+	let rowModesModel = useGridSelector(apiRef, gridEditRowsStateSelector);
+	let { allowUpdate, allowDelete } = usePermissions(dataObject);
+
+	let currentMode = typeof rowModesModel[rowId] === "undefined" ? GridRowModes.View : GridRowModes.Edit;
+
+	if (currentMode !== mode) {
+		return null;
+	}
+
+	if (requireDelete && !allowDelete) {
+		return null;
+	}
+
+	if (requireUpdate && !allowUpdate) {
+		return null;
+	}
+
+	return <GridActionsCellItem ref={ref} {...props} />;
+});
+
+export type AfGridColumn = string | AfGridColDef;
+const muiColumnTypes = ["string", "number", "date", "dateTime", "boolean", "singleSelect", "actions"];
+
+export type useAfColumnsOptions = {
+	apiRef: React.RefObject<GridApi | null>;
+	disableDelete?: boolean;
+	disableEdit?: boolean;
+	dataObject: DataObject<any>;
+	columnsProp: AfGridColumn[];
+	idField: string;
+};
+
+export function useAfColumns({
+	apiRef,
+	dataObject,
+	disableEdit,
+	disableDelete,
+	columnsProp,
+	idField,
+}: useAfColumnsOptions): GridColDef[] {
+	let { allowUpdate, allowDelete } = usePermissions(dataObject);
+
+	return useMemo(() => {
+		let columns = afColumnsToMuiColumn({
+			allowDelete,
+			allowUpdate,
+			apiRef,
+			dataObject,
+			disableEdit,
+			disableDelete,
+			columnsProp,
+			idField,
+		});
+
+		const handleEditClick = (id: GridRowId) => (event: React.MouseEvent<any>) => {
+			event.stopPropagation();
+			apiRef.current?.startRowEditMode({ id });
+		};
+
+		const handleSaveClick = (id: GridRowId) => async (event: React.MouseEvent<any>) => {
+			event.stopPropagation();
+			apiRef.current?.stopRowEditMode({ id });
+		};
+
+		const handleDeleteClick = (id: GridRowId) => async (event: React.MouseEvent<any>) => {
+			event.stopPropagation();
+			await deleteRow({ apiRef, dataObject, id, idField });
+		};
+
+		const handleCancelClick = (id: GridRowId) => (event: React.MouseEvent<any>) => {
+			event.stopPropagation();
+			apiRef.current?.stopRowEditMode({ id, ignoreModifications: true });
+
+			const row = apiRef.current?.getRow(id);
+			if (row?.isNew) {
+				apiRef.current?.updateRows([{ [(af as any).data.uid]: id, id, _action: "delete" } as any]);
+			}
+		};
+
+		if (!columns.find((c) => c.type === "actions") && (allowDelete || allowUpdate)) {
+			columns.push({
+				field: "actions",
+				type: "actions",
+				headerName: getLocalizedString("Actions"),
+				getActions: ({ id }: GridRowParams) => [
+					<GridActionItem
+						key="edit"
+						icon={<PencilIcon aria-hidden />}
+						label={getLocalizedString("Edit")}
+						onClick={handleEditClick(id)}
+						mode={GridRowModes.View}
+						dataObject={dataObject}
+						rowId={id}
+						requireUpdate
+					/>,
+					<GridActionItem
+						key="delete"
+						icon={<TrashIcon aria-hidden />}
+						label={getLocalizedString("Delete")}
+						onClick={handleDeleteClick(id)}
+						mode={GridRowModes.View}
+						dataObject={dataObject}
+						rowId={id}
+						requireDelete
+					/>,
+					<GridActionItem
+						key="save"
+						icon={<FloppydiskIcon aria-hidden />}
+						label={getLocalizedString("Save")}
+						onClick={handleSaveClick(id)}
+						mode={GridRowModes.Edit}
+						dataObject={dataObject}
+						rowId={id}
+						requireUpdate
+					/>,
+					<GridActionItem
+						key="revert"
+						icon={<XMarkIcon aria-hidden />}
+						label={getLocalizedString("Cancel")}
+						onClick={handleCancelClick(id)}
+						mode={GridRowModes.Edit}
+						dataObject={dataObject}
+						rowId={id}
+						requireUpdate
+					/>,
+				],
+			});
+		}
+
+		return columns;
+	}, [columnsProp, disableDelete, disableEdit, allowUpdate, allowDelete, idField, dataObject, apiRef]);
+}

package/src/grid/useAfCurrentIndex.ts

@@ -0,0 +1,55 @@
+import type { GridApi, GridCellParams } from "@mui/x-data-grid-pro";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { useEvent } from "@olenbetong/appframe-react";
+
+import { useEffect, useRef } from "react";
+
+export type useAfCurrentIndexOptions = {
+	apiRef: React.RefObject<GridApi | null>;
+	dataObject: DataObject<any>;
+	enabled: boolean;
+	idField: string;
+};
+
+function getRowId(row: any, idField: string) {
+	if (!row) return row;
+	return row[af.data.uid] ?? row[idField];
+}
+
+export function useAfCurrentIndex({ apiRef, dataObject, idField, enabled }: useAfCurrentIndexOptions) {
+	let triggeredByFocusEvent = useRef(false);
+	let focusColumn = useRef<string>(null);
+
+	useEffect(() => {
+		function handleFocusChange(options: GridCellParams) {
+			focusColumn.current = options.field;
+
+			let currentId = getRowId(dataObject.currentRow(), idField);
+			if (currentId !== options.id) {
+				let newIndex = dataObject.findIndex((row) => getRowId(row, idField) === options.id);
+				if (newIndex >= 0) {
+					triggeredByFocusEvent.current = true;
+					dataObject.setCurrentIndex(newIndex);
+				}
+			}
+		}
+
+		if (enabled) {
+			if (!focusColumn.current) {
+				focusColumn.current = apiRef.current?.getVisibleColumns()[0]?.field ?? null;
+			}
+
+			return apiRef.current?.subscribeEvent("cellFocusIn", handleFocusChange);
+		}
+	}, [apiRef, dataObject, idField, enabled]);
+
+	useEvent(dataObject, "onCurrentIndexChanged", (event) => {
+		if (enabled && triggeredByFocusEvent.current === false) {
+			if (focusColumn.current && document.activeElement?.closest(".MuiDataGrid-cell")) {
+				apiRef.current?.setCellFocus(getRowId(dataObject.getData(event.detail), idField), focusColumn.current);
+			}
+		} else {
+			triggeredByFocusEvent.current = false;
+		}
+	});
+}

package/src/grid/useAfData.ts

@@ -0,0 +1,20 @@
+import type { DataObject } from "@olenbetong/appframe-data";
+import { useData } from "@olenbetong/appframe-react";
+
+import { useMemo } from "react";
+
+export function useAfData<T extends Record<string, unknown>, K = T[]>(
+	dataObject: DataObject<T>,
+	{ getData }: { getData?: (data: T[]) => K },
+): K {
+	let rawData = useData(dataObject);
+	let data = useMemo(() => {
+		if (getData) {
+			return getData(rawData as T[]) as K;
+		}
+
+		return rawData as K;
+	}, [rawData, getData]);
+
+	return data;
+}