@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/grid/useAfColumns.tsx

@@ -28,8 +28,15 @@ 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";
+import {
+	dateTimeValueFormatter,
+	dateValueFormatter,
+	localDateTimeValueFormatter,
+	localDateValueFormatter,
+} from "./formatters.js";
 import { isNewItemRow } from "./useAfNewItemRow.js";
+import { parseUtcDate, parseUtcDateTime } from "./utcDate.js";
+import { renderUtcDateEditCell, renderUtcDateTimeEditCell } from "./utcDateEditing.js";
 import { getLocalizedString } from "../i18n.js";
 
 /** `auto-generated-group-footer-`, without spelling it out: every group's total row shares it. */
@@ -48,6 +55,12 @@ export type AfGridColDef = GridColDef & {
 	 * from server-side sort and filter operations.
 	 */
 	calculated?: boolean;
+	/**
+	 * Date and dateTime columns hold wall-clock values by default: stored without a time zone,
+	 * shown and edited as they are. Set this for columns holding real UTC instants (such as
+	 * Created/Updated in newer tables) to show and edit them in the user's local time.
+	 */
+	storedAsUtc?: boolean;
 };
 
 /**
@@ -133,10 +146,19 @@ export function afColumnsToMuiColumn({
 
 			let valueFormatter: (value: any) => string | number | boolean | object | null | undefined = (value) => value;
 
+			// Wall-clock dates are shown and edited in UTC (see utcDate); real UTC instants
+			// use local time and MUI's own editors
+			let storedAsUtc = typeof column !== "string" && !!column.storedAsUtc;
+			let dateEditing: Pick<GridColDef, "renderEditCell" | "valueParser"> = {};
+
 			if (type === "date") {
-				valueFormatter = dateValueFormatter;
+				valueFormatter = storedAsUtc ? localDateValueFormatter : dateValueFormatter;
+				if (!storedAsUtc) dateEditing = { renderEditCell: renderUtcDateEditCell, valueParser: parseUtcDate };
 			} else if (type === "dateTime") {
-				valueFormatter = dateTimeValueFormatter;
+				valueFormatter = storedAsUtc ? localDateTimeValueFormatter : dateTimeValueFormatter;
+				if (!storedAsUtc) {
+					dateEditing = { renderEditCell: renderUtcDateTimeEditCell, valueParser: parseUtcDateTime };
+				}
 			}
 
 			let editable = allowUpdate && !fieldDef?.ignored && !fieldDef?.computed && !fieldDef?.joined;
@@ -155,18 +177,20 @@ export function afColumnsToMuiColumn({
 					type: type as GridColType,
 					headerName: column,
 					valueFormatter,
+					...dateEditing,
 					editable,
 					align,
 					headerAlign: align,
 					width: currentWidth ?? 150,
 				};
 			} else {
-				let { hide, calculated, ...rest } = column;
+				let { hide, calculated, storedAsUtc: _storedAsUtc, ...rest } = column;
 				col = {
 					headerName: fieldDef?.caption ?? fieldName,
 					editable,
 					type: type as GridColType,
 					valueFormatter,
+					...dateEditing,
 					align,
 					headerAlign: align,
 					...rest,

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/grid/utcDate.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+
+import { fromUtcInputValue, parseUtcDate, parseUtcDateTime, toUtcInputValue } from "./utcDate.js";
+
+describe("UTC date editing in AfGrid", () => {
+	it("stores an entered date as UTC midnight of that date", () => {
+		expect(parseUtcDate("2026-10-10")?.toISOString()).toBe("2026-10-10T00:00:00.000Z");
+	});
+
+	it("stores an entered date and time as that wall-clock time in UTC", () => {
+		expect(parseUtcDateTime("2026-10-10T07:30")?.toISOString()).toBe("2026-10-10T07:30:00.000Z");
+	});
+
+	it("shows a stored date as its UTC date", () => {
+		let stored = new Date("2026-10-10T00:00:00Z");
+		expect(toUtcInputValue(stored, false)).toBe("2026-10-10");
+		expect(toUtcInputValue(stored, true)).toBe("2026-10-10T00:00");
+	});
+
+	it("treats empty and invalid values as no date", () => {
+		expect(fromUtcInputValue("", false)).toBeNull();
+		expect(fromUtcInputValue(null, true)).toBeNull();
+		expect(toUtcInputValue(new Date("invalid"), false)).toBe("");
+	});
+});

package/src/grid/utcDate.ts

@@ -0,0 +1,28 @@
+// Appframe dates are wall-clock values stored as UTC (the grid formats them with
+// timeZone "utc"). MUI's own date editors read and write local time, which shifts a date
+// entered in Norway to 22:00 the day before, so date columns are edited in UTC throughout.
+
+export function toUtcInputValue(value: unknown, withTime: boolean): string {
+	if (!(value instanceof Date) || Number.isNaN(value.getTime())) {
+		return "";
+	}
+
+	return value.toISOString().slice(0, withTime ? 16 : 10);
+}
+
+export function fromUtcInputValue(value: unknown, withTime: boolean): Date | null {
+	if (typeof value !== "string" || !value) {
+		return null;
+	}
+
+	let date = new Date(withTime ? `${value.slice(0, 16)}:00Z` : `${value.slice(0, 10)}T00:00:00Z`);
+	return Number.isNaN(date.getTime()) ? null : date;
+}
+
+export function parseUtcDate(value: unknown) {
+	return fromUtcInputValue(value, false);
+}
+
+export function parseUtcDateTime(value: unknown) {
+	return fromUtcInputValue(value, true);
+}

package/src/grid/utcDateEditing.tsx

@@ -0,0 +1,11 @@
+import { GridEditInputCell, type GridRenderEditCellParams } from "@mui/x-data-grid-premium";
+
+import { toUtcInputValue } from "./utcDate.js";
+
+export function renderUtcDateEditCell(params: GridRenderEditCellParams) {
+	return <GridEditInputCell {...params} type="date" value={toUtcInputValue(params.value, false)} />;
+}
+
+export function renderUtcDateTimeEditCell(params: GridRenderEditCellParams) {
+	return <GridEditInputCell {...params} type="datetime-local" value={toUtcInputValue(params.value, true)} />;
+}

package/src/i18n.ts

@@ -1,13 +1,13 @@
-/*
- * The package's strings live in their own globalization project, `appframe-ds`, so one
- * translation covers every app and the package can word a term its own way. The templates
- * render the dictionary as af.i18n["appframe-ds"]; on a page that does not (a legacy
- * template) the localizer falls back to the article's strings, exactly as before. See
- * `createLocalizer` in @olenbetong/appframe-core.
- */
-
-import { createLocalizer } from "@olenbetong/appframe-core";
-
-export const PROJECT = "appframe-ds";
-
-export const { getLocalizedString, localize } = createLocalizer(PROJECT);
+/*
+ * The package's strings live in their own globalization project, `appframe-ds`, so one
+ * translation covers every app and the package can word a term its own way. The templates
+ * render the dictionary as af.i18n["appframe-ds"]; on a page that does not (a legacy
+ * template) the localizer falls back to the article's strings, exactly as before. See
+ * `createLocalizer` in @olenbetong/appframe-core.
+ */
+
+import { createLocalizer } from "@olenbetong/appframe-core";
+
+export const PROJECT = "appframe-ds";
+
+export const { getLocalizedString, localize } = createLocalizer(PROJECT);

package/src/index.ts

@@ -1,14 +1,14 @@
-export * from "./AfLookup/index.js";
-export * from "./autocomplete/index.js";
-export * from "./binding/index.js";
-export * from "./container/index.js";
-export * from "./cutoff/index.js";
-export * from "./filter/index.js";
-export * from "./input/index.js";
-export * from "./layout/index.js";
-export * from "./link/index.js";
-export * from "./list/index.js";
-export * from "./page/index.js";
-export * from "./paper/index.js";
-export * from "./progress/index.js";
-export * from "./sortable/index.js";
+export * from "./AfLookup/index.js";
+export * from "./autocomplete/index.js";
+export * from "./binding/index.js";
+export * from "./container/index.js";
+export * from "./cutoff/index.js";
+export * from "./filter/index.js";
+export * from "./input/index.js";
+export * from "./layout/index.js";
+export * from "./link/index.js";
+export * from "./list/index.js";
+export * from "./page/index.js";
+export * from "./paper/index.js";
+export * from "./progress/index.js";
+export * from "./sortable/index.js";

package/src/input/InputAdornments.css

@@ -1,80 +1,80 @@
-/*
- * The wrapper is the visual input: it owns the border, background, hover and
- * focus styling, while the inner Designsystemet input is rendered bare so the
- * input and the adornments read as a single control.
- */
-.ObInputAdornments-root {
-	--obInputAdornments-padding: 0.25rem;
-	--obInputAdornments-gap: 0.25rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
-
-	display: flex;
-	align-items: center;
-	box-sizing: border-box;
-	gap: var(--obInputAdornments-gap);
-	padding: var(--obInputAdornments-padding);
-	inline-size: 100%;
-	color: var(--ds-color-neutral-text-default, #1e2b3c);
-	background-color: var(--ds-color-neutral-surface-default, #fff);
-	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
-	border-radius: var(--ds-border-radius-md, 0.375rem);
-}
-
-/* Designsystemet components come in sm, md and lg; xs and xl are typography-only sizes */
-.ObInputAdornments-root[data-size="sm"] {
-	--obInputAdornments-padding: 0.25rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-2, 0.875rem);
-}
-
-.ObInputAdornments-root[data-size="md"] {
-	--obInputAdornments-padding: 0.25rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
-}
-
-.ObInputAdornments-root[data-size="lg"] {
-	--obInputAdornments-padding: 0.375rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-4, 1.125rem);
-}
-
-/* The Designsystemet input hover (an inner outline doubling the border), drawn on the wrapper */
-.ObInputAdornments-root:hover:not(
-		:focus-within,
-		:has(.ObInputAdornments-field:disabled, .ObInputAdornments-field[readonly])
-	) {
-	outline: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
-	outline-offset: -0.1px;
-}
-
-.ObInputAdornments-root:has(.ObInputAdornments-field:focus-visible) {
-	box-shadow: var(--dsc-focus-boxShadow);
-	outline: var(--dsc-focus-outline);
-	outline-offset: var(--ds-border-width-focus, 3px);
-}
-
-.ObInputAdornments-root:has(.ObInputAdornments-field:disabled) {
-	cursor: not-allowed;
-	opacity: var(--ds-disabled-opacity, 0.3);
-}
-
-/* The bare input: all the visual styling lives on the wrapper instead */
-.ObInputAdornments-root .ObInputAdornments-field {
-	flex: 1;
-	min-inline-size: 0;
-	font-size: var(--obInputAdornments-fontSize);
-	background: transparent;
-	border: none;
-}
-
-.ObInputAdornments-root .ObInputAdornments-field:disabled {
-	opacity: 1;
-}
-
-.ObInputAdornments-root .ObInputAdornments-field:hover {
-	outline: none;
-}
-
-.ObInputAdornments-root .ObInputAdornments-field:focus-visible {
-	box-shadow: none;
-	outline: none;
-	outline-offset: 0;
-}
+/*
+ * The wrapper is the visual input: it owns the border, background, hover and
+ * focus styling, while the inner Designsystemet input is rendered bare so the
+ * input and the adornments read as a single control.
+ */
+.ObInputAdornments-root {
+	--obInputAdornments-padding: 0.25rem;
+	--obInputAdornments-gap: 0.25rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
+
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	gap: var(--obInputAdornments-gap);
+	padding: var(--obInputAdornments-padding);
+	inline-size: 100%;
+	color: var(--ds-color-neutral-text-default, #1e2b3c);
+	background-color: var(--ds-color-neutral-surface-default, #fff);
+	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
+	border-radius: var(--ds-border-radius-md, 0.375rem);
+}
+
+/* Designsystemet components come in sm, md and lg; xs and xl are typography-only sizes */
+.ObInputAdornments-root[data-size="sm"] {
+	--obInputAdornments-padding: 0.25rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-2, 0.875rem);
+}
+
+.ObInputAdornments-root[data-size="md"] {
+	--obInputAdornments-padding: 0.25rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
+}
+
+.ObInputAdornments-root[data-size="lg"] {
+	--obInputAdornments-padding: 0.375rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-4, 1.125rem);
+}
+
+/* The Designsystemet input hover (an inner outline doubling the border), drawn on the wrapper */
+.ObInputAdornments-root:hover:not(
+		:focus-within,
+		:has(.ObInputAdornments-field:disabled, .ObInputAdornments-field[readonly])
+	) {
+	outline: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
+	outline-offset: -0.1px;
+}
+
+.ObInputAdornments-root:has(.ObInputAdornments-field:focus-visible) {
+	box-shadow: var(--dsc-focus-boxShadow);
+	outline: var(--dsc-focus-outline);
+	outline-offset: var(--ds-border-width-focus, 3px);
+}
+
+.ObInputAdornments-root:has(.ObInputAdornments-field:disabled) {
+	cursor: not-allowed;
+	opacity: var(--ds-disabled-opacity, 0.3);
+}
+
+/* The bare input: all the visual styling lives on the wrapper instead */
+.ObInputAdornments-root .ObInputAdornments-field {
+	flex: 1;
+	min-inline-size: 0;
+	font-size: var(--obInputAdornments-fontSize);
+	background: transparent;
+	border: none;
+}
+
+.ObInputAdornments-root .ObInputAdornments-field:disabled {
+	opacity: 1;
+}
+
+.ObInputAdornments-root .ObInputAdornments-field:hover {
+	outline: none;
+}
+
+.ObInputAdornments-root .ObInputAdornments-field:focus-visible {
+	box-shadow: none;
+	outline: none;
+	outline-offset: 0;
+}

package/src/input/InputAdornments.tsx

@@ -1,102 +1,102 @@
-import "./InputAdornments.css";
-
-import { Input, type InputProps } from "@digdir/designsystemet-react";
-import clsx from "clsx";
-import { Children, isValidElement, type ReactElement, type ReactNode, type Ref } from "react";
-
-export type InputSlotProps = {
-	/**
-	 * Extra classes for the input rendered in this slot
-	 */
-	className?: string;
-};
-
-/**
- * Marks where the input should be rendered among the children of
- * `InputAdornments`. Renders nothing on its own; `InputAdornments` swaps it
- * for the actual input. When it is left out, the input is rendered before the
- * adornments.
- *
- * @example
- * ```jsx
- * <InputAdornments value={value} onChange={handleChange}>
- *   <SearchIcon aria-hidden />
- *   <InputSlot />
- *   <Button icon variant="tertiary"><XMarkIcon aria-hidden /></Button>
- * </InputAdornments>
- * ```
- */
-export function InputSlot(_props: InputSlotProps) {
-	return null;
-}
-
-export type InputAdornmentsProps = Omit<InputProps, "children"> & {
-	/**
-	 * Adornments rendered next to the input, e.g. icons or buttons. Include an
-	 * `InputSlot` to control where the input itself ends up.
-	 */
-	children?: ReactNode;
-	/**
-	 * Classes for the wrapper that carries the input styling
-	 */
-	className?: string;
-	/**
-	 * Classes for the bare input element itself
-	 */
-	inputClassName?: string;
-	/**
-	 * Ref to the input element. The wrapper is an implementation detail, so the
-	 * ref points at the input rather than at the element carrying the styling.
-	 */
-	ref?: Ref<HTMLInputElement>;
-};
-
-/**
- * Input with adornments, equivalent to a MUI `TextField` with
- * `InputProps.startAdornment` / `endAdornment`. Designsystemet has no
- * equivalent, so the border, background, hover and focus styling is moved from
- * the input onto a wrapper element, making the input and its adornments read
- * as a single control.
- *
- * All other props are forwarded to the Designsystemet `Input`, so `ref`,
- * `value`, `onChange`, `data-size` and `data-color` work as usual.
- *
- * @example
- * ```jsx
- * // Input first (default), adornments after
- * <InputAdornments aria-label="Search" value={value} onChange={handleChange}>
- *   <Button icon variant="tertiary"><MagnifyingGlassIcon aria-hidden /></Button>
- * </InputAdornments>
- *
- * // Explicit placement with InputSlot
- * <InputAdornments aria-label="Amount" data-size="lg">
- *   <span aria-hidden>kr</span>
- *   <InputSlot />
- *   <span aria-hidden>,-</span>
- * </InputAdornments>
- * ```
- */
-export function InputAdornments({ children, className, inputClassName, ...props }: InputAdornmentsProps) {
-	let size = props["data-size"];
-	let color = props["data-color"];
-	let childArray = Children.toArray(children);
-	let slot = childArray.find((child) => isValidElement(child) && child.type === InputSlot) as
-		| ReactElement<InputSlotProps>
-		| undefined;
-
-	let input = (
-		<Input
-			key="ObInputAdornments-input"
-			{...props}
-			className={clsx("ObInputAdornments-field", inputClassName, slot?.props.className)}
-		/>
-	);
-
-	let content = slot ? childArray.map((child) => (child === slot ? input : child)) : [input, ...childArray];
-
-	return (
-		<div className={clsx("ObInputAdornments-root", className)} data-size={size} data-color={color}>
-			{content}
-		</div>
-	);
-}
+import "./InputAdornments.css";
+
+import { Input, type InputProps } from "@digdir/designsystemet-react";
+import clsx from "clsx";
+import { Children, isValidElement, type ReactElement, type ReactNode, type Ref } from "react";
+
+export type InputSlotProps = {
+	/**
+	 * Extra classes for the input rendered in this slot
+	 */
+	className?: string;
+};
+
+/**
+ * Marks where the input should be rendered among the children of
+ * `InputAdornments`. Renders nothing on its own; `InputAdornments` swaps it
+ * for the actual input. When it is left out, the input is rendered before the
+ * adornments.
+ *
+ * @example
+ * ```jsx
+ * <InputAdornments value={value} onChange={handleChange}>
+ *   <SearchIcon aria-hidden />
+ *   <InputSlot />
+ *   <Button icon variant="tertiary"><XMarkIcon aria-hidden /></Button>
+ * </InputAdornments>
+ * ```
+ */
+export function InputSlot(_props: InputSlotProps) {
+	return null;
+}
+
+export type InputAdornmentsProps = Omit<InputProps, "children"> & {
+	/**
+	 * Adornments rendered next to the input, e.g. icons or buttons. Include an
+	 * `InputSlot` to control where the input itself ends up.
+	 */
+	children?: ReactNode;
+	/**
+	 * Classes for the wrapper that carries the input styling
+	 */
+	className?: string;
+	/**
+	 * Classes for the bare input element itself
+	 */
+	inputClassName?: string;
+	/**
+	 * Ref to the input element. The wrapper is an implementation detail, so the
+	 * ref points at the input rather than at the element carrying the styling.
+	 */
+	ref?: Ref<HTMLInputElement>;
+};
+
+/**
+ * Input with adornments, equivalent to a MUI `TextField` with
+ * `InputProps.startAdornment` / `endAdornment`. Designsystemet has no
+ * equivalent, so the border, background, hover and focus styling is moved from
+ * the input onto a wrapper element, making the input and its adornments read
+ * as a single control.
+ *
+ * All other props are forwarded to the Designsystemet `Input`, so `ref`,
+ * `value`, `onChange`, `data-size` and `data-color` work as usual.
+ *
+ * @example
+ * ```jsx
+ * // Input first (default), adornments after
+ * <InputAdornments aria-label="Search" value={value} onChange={handleChange}>
+ *   <Button icon variant="tertiary"><MagnifyingGlassIcon aria-hidden /></Button>
+ * </InputAdornments>
+ *
+ * // Explicit placement with InputSlot
+ * <InputAdornments aria-label="Amount" data-size="lg">
+ *   <span aria-hidden>kr</span>
+ *   <InputSlot />
+ *   <span aria-hidden>,-</span>
+ * </InputAdornments>
+ * ```
+ */
+export function InputAdornments({ children, className, inputClassName, ...props }: InputAdornmentsProps) {
+	let size = props["data-size"];
+	let color = props["data-color"];
+	let childArray = Children.toArray(children);
+	let slot = childArray.find((child) => isValidElement(child) && child.type === InputSlot) as
+		| ReactElement<InputSlotProps>
+		| undefined;
+
+	let input = (
+		<Input
+			key="ObInputAdornments-input"
+			{...props}
+			className={clsx("ObInputAdornments-field", inputClassName, slot?.props.className)}
+		/>
+	);
+
+	let content = slot ? childArray.map((child) => (child === slot ? input : child)) : [input, ...childArray];
+
+	return (
+		<div className={clsx("ObInputAdornments-root", className)} data-size={size} data-color={color}>
+			{content}
+		</div>
+	);
+}

package/src/input/NumberInput.css

@@ -1,9 +1,9 @@
-.ObNumberInput-root .ObInputAdornments-field {
-	/* Numbers read best right aligned, and the steppers sit at the end anyway */
-	text-align: end;
-	font-variant-numeric: tabular-nums;
-}
-
-.ObNumberInput-root .ObNumberInput-stepper {
-	flex-shrink: 0;
-}
+.ObNumberInput-root .ObInputAdornments-field {
+	/* Numbers read best right aligned, and the steppers sit at the end anyway */
+	text-align: end;
+	font-variant-numeric: tabular-nums;
+}
+
+.ObNumberInput-root .ObNumberInput-stepper {
+	flex-shrink: 0;
+}