@olenbetong/appframe-ds 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @olenbetong/appframe-ds
 
+## 0.9.0
+
+### Minor Changes
+
+- cfc94c7: Rework the `AfGrid` header filter, and stop the toolbar refresh button from shifting while loading.
+
+  The header filters and the toolbar's filter builder now edit **one** filter tree in a single named
+  filter slot keyed on the grid `id`, instead of writing two slots that could not see each other. MUI's
+  `GridFilterModel` is no longer used as a transport — it cannot represent nested groups or the full
+  Appframe operator set. `useAfFilterModel` is replaced by `useAfFilter`, which exposes the tree plus
+  per-field helpers.
+
+  Each header filter cell is now an unlabelled input with a funnel button:
+  - one criterion taking a single value is edited straight from the input, debounced,
+  - anything else shows a read-only summary such as `In list (3)`, with a clear button,
+  - the funnel opens a per-column panel with a row per criterion, a `+ Criteria` button, and — for
+    string, number and uniqueidentifier columns — a searchable list of the column's distinct values
+    with row counts, checked to build an `in list` criterion.
+
+  The distinct list respects every other active filter but ignores the column's own criteria, so
+  unchecking a value does not make the remaining values disappear. Counts are best effort: views that
+  cannot be grouped fall back to a plain distinct list. Panel edits are staged and only applied on
+  `Apply`, so a half-built criterion never reaches the server.
+
+  `GridToolbarRefreshButton` now hides its icon while loading so the spinner replaces it instead of
+  being added next to it, and the columns panel has spacing between its search field and the column
+  list. `InputAdornments` accepts a `ref`, which is forwarded to the input element.
+
+  The panel body is exported on its own as **`FieldFilterPanel`**, a controlled component with no
+  dependency on the grid, so a single field can be filtered anywhere — a report parameter, a sidebar
+  facet, a mobile filter sheet. Its distinct value query is exported too, as `useDistinctValues`.
+
+  The header filter input no longer drives MUI's header filter edit mode from `onFocus`/`onBlur`. The
+  header filter cell refocuses itself whenever that state changes, so any mousedown leaving the input
+  pulled focus straight back in — inputs in the filter panel could not be focused, and starting a
+  column drag from a header cancelled the drag. Nothing is lost: MUI focuses the cell's focusable
+  element anyway, so typing and keyboard navigation still work.
+
+- cfc94c7: Add `@olenbetong/appframe-ds/grid`, a Designsystemet flavoured `AfGrid`.
+
+  The grid keeps MUI X Data Grid Pro as its engine — Designsystemet has no data grid — but replaces
+  the chrome:
+  - the base slots (checkbox, button, icon button, text field, select, switch, tooltip, chip, badge,
+    progress, skeleton, divider) render Designsystemet components,
+  - the toolbar and the column panel are rebuilt with Designsystemet components and Aksel icons,
+  - the filter panel is replaced by `FilterBuilder` in dialog mode,
+  - the MUI theme is derived from the `--ds-color-*` tokens and follows `data-color-scheme`, so the
+    grid works in light and dark mode without an app-level `ThemeProvider`,
+  - the MUI X license is registered by the grid itself, from a build-time injected
+    `__MUI_X_LICENSE_KEY__` (supplied by the `appframe()` Vite plugin) or
+    `import.meta.env.VITE_MUI_X_LICENSE_KEY`.
+
+  The API matches the `@olenbetong/appframe-mui` `AfGrid`, so migrating is an import path change plus
+  an optional `filterViewName` for saved filters. Layout persistence uses the same store, so users
+  keep their saved column layouts.
+
+  The filter builder (`FilterBuilder`, `FilterEditor`, `SavedFilterTree`, …) moved here from
+  `@olenbetong/synergi-react` and is exported from the package root.
+
+  `ReportDownloader` (`openDataObjectReportWithProgress`) is available from
+  `@olenbetong/appframe-ds/report-downloader`, built with Designsystemet components.
+
+### Patch Changes
+
+- Updated dependencies [62a0ad5]
+- Updated dependencies [5155cdb]
+  - @olenbetong/appframe-data@1.6.1
+  - @olenbetong/appframe-core@2.13.0
+  - @olenbetong/appframe-react@2.1.1
+
 ## 0.8.0
 
 ### Minor Changes

package/package.json

@@ -1,12 +1,21 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
   "exports": {
     ".": {
+      "types": "./es/index.d.ts",
       "import": "./es/index.js"
+    },
+    "./grid": {
+      "types": "./es/grid/index.d.ts",
+      "import": "./es/grid/index.js"
+    },
+    "./report-downloader": {
+      "types": "./es/report-downloader/index.d.ts",
+      "import": "./es/report-downloader/index.js"
     }
   },
   "sideEffects": [
@@ -16,29 +25,63 @@
   "license": "MIT",
   "peerDependencies": {
     "@digdir/designsystemet-react": ">=1.18.0",
+    "@emotion/react": ">=11.14.0",
+    "@emotion/styled": ">=11.14.1",
+    "@mui/material": ">=9.0.0",
+    "@mui/x-data-grid-pro": ">=8.0.0 <9.0.0",
+    "@mui/x-license": ">=8.0.0 <9.0.0",
     "@navikt/aksel-icons": ">=8.16.1",
     "react": ">=19.2.8",
     "react-dom": ">=19.2.8",
     "react-error-boundary": ">=6.1.2",
     "react-router": ">=8.3.0"
   },
+  "peerDependenciesMeta": {
+    "@emotion/react": {
+      "optional": true
+    },
+    "@emotion/styled": {
+      "optional": true
+    },
+    "@mui/material": {
+      "optional": true
+    },
+    "@mui/x-data-grid-pro": {
+      "optional": true
+    },
+    "@mui/x-license": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "2.0.2",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.0.0",
     "@base-ui/react": "1.7.0",
     "clsx": "^2.1.1",
+    "localforage": "^1.10.0",
+    "mitt": "^3.0.1",
     "react-virtualized-auto-sizer": "^1.0.26",
     "react-window": "^1.8.11",
-    "@olenbetong/appframe-data": "1.6.0",
-    "@olenbetong/appframe-core": "2.12.0",
-    "@olenbetong/appframe-react": "2.1.0"
+    "@olenbetong/appframe-core": "2.13.0",
+    "@olenbetong/appframe-react": "2.1.1",
+    "@olenbetong/appframe-data": "1.6.1"
   },
   "devDependencies": {
     "@digdir/designsystemet-react": "1.18.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "9.3.1",
+    "@mui/x-data-grid-pro": "8.29.2",
+    "@mui/x-license": "8.29.2",
     "@navikt/aksel-icons": "8.16.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "^14.6.3",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",
     "@types/react-window": "^1.8.8",
+    "happy-dom": "^20.11.1",
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "react-error-boundary": "6.1.2",
@@ -46,8 +89,9 @@
     "typescript": "7.0.2"
   },
   "scripts": {
-    "build": "pnpm run build:tsc && pnpm run build:css",
+    "build": "pnpm run build:tsc && pnpm test && pnpm run build:css",
     "build:tsc": "node --no-warnings ../../scripts/clean.ts ./es tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",
-    "build:css": "node scripts/copyAssets.mjs"
+    "build:css": "node scripts/copyAssets.mjs",
+    "test": "vitest run"
   }
 }

package/scripts/copyAssets.mjs

@@ -22,6 +22,15 @@ const files = [
 	["src/sortable/DropIndicator.css", "es/sortable/DropIndicator.css"],
 	["src/sortable/SortableItemList.css", "es/sortable/SortableItemList.css"],
 	["src/autocomplete/Autocomplete.css", "es/autocomplete/Autocomplete.css"],
+	["src/filter/FilterBuilder.css", "es/filter/FilterBuilder.css"],
+	["src/filter/FieldFilterPanel.css", "es/filter/FieldFilterPanel.css"],
+	["src/filter/FilterEditor.css", "es/filter/FilterEditor.css"],
+	["src/filter/FilterNameDialog.css", "es/filter/FilterNameDialog.css"],
+	["src/filter/FilterShareDialog.css", "es/filter/FilterShareDialog.css"],
+	["src/filter/SavedFilterTree.css", "es/filter/SavedFilterTree.css"],
+	["src/grid/index.css", "es/grid/index.css"],
+	["src/grid/slots/slots.css", "es/grid/slots/slots.css"],
+	["src/report-downloader/ReportDownloader.css", "es/report-downloader/ReportDownloader.css"],
 ];
 
 mkdirSync("es/layout", { recursive: true });
@@ -32,6 +41,10 @@ mkdirSync("es/paper", { recursive: true });
 mkdirSync("es/progress", { recursive: true });
 mkdirSync("es/sortable", { recursive: true });
 mkdirSync("es/autocomplete", { recursive: true });
+mkdirSync("es/filter", { recursive: true });
+mkdirSync("es/grid", { recursive: true });
+mkdirSync("es/grid/slots", { recursive: true });
+mkdirSync("es/report-downloader", { recursive: true });
 
 for (let [src, dest] of files) {
 	cpSync(src, dest);

package/src/AfLookup/LookupCombobox.tsx

@@ -39,7 +39,9 @@ export interface LookupComboboxGridProps<T extends Record<string, unknown>> exte
 	columns: LookupColumn<T>[];
 }
 
-export type LookupComboboxProps<T extends Record<string, unknown>> = LookupComboboxListProps<T> | LookupComboboxGridProps<T>;
+export type LookupComboboxProps<T extends Record<string, unknown>> =
+	| LookupComboboxListProps<T>
+	| LookupComboboxGridProps<T>;
 
 export function LookupCombobox<T extends Record<string, unknown>>(props: LookupComboboxProps<T>) {
 	let {

package/src/filter/ChipListInput.tsx

@@ -0,0 +1,79 @@
+import { ChipRemovable, Textfield } from "@digdir/designsystemet-react";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useState } from "react";
+
+export type ChipListInputProps = {
+	value: string[];
+	onChange: (value: string[]) => void;
+	readOnly?: boolean;
+	"aria-label": string;
+	"data-size"?: "sm" | "md" | "lg";
+	type?: "text" | "number" | "date" | "datetime-local";
+};
+
+/**
+ * Free text editor for the list operators. Values are added with Enter and
+ * rendered as removable chips.
+ */
+export function ChipListInput({
+	value,
+	onChange,
+	readOnly,
+	type = "text",
+	"aria-label": ariaLabel,
+	"data-size": size,
+}: ChipListInputProps) {
+	let [draft, setDraft] = useState("");
+
+	function commit() {
+		let trimmed = draft.trim();
+		if (!trimmed || value.includes(trimmed)) {
+			setDraft("");
+			return;
+		}
+
+		onChange([...value, trimmed]);
+		setDraft("");
+	}
+
+	function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+		if (event.key === "Enter") {
+			// The editor is often rendered inside a dialog; committing a value
+			// must not submit or close it.
+			event.preventDefault();
+			commit();
+		} else if (event.key === "Backspace" && draft === "" && value.length > 0) {
+			onChange(value.slice(0, -1));
+		}
+	}
+
+	return (
+		<div className="ObFilterEditor-chipList">
+			{value.map((item, index) => (
+				<ChipRemovable
+					// Values are deduplicated on add, so the value is a stable key.
+					key={item}
+					data-size={size}
+					disabled={readOnly}
+					aria-label={`${getLocalizedString("Remove")} ${item}`}
+					onClick={() => onChange(value.filter((_, i) => i !== index))}
+				>
+					{item}
+				</ChipRemovable>
+			))}
+			{!readOnly && (
+				<Textfield
+					className="ObFilterEditor-chipListInput"
+					aria-label={ariaLabel}
+					data-size={size}
+					type={type}
+					value={draft}
+					placeholder={getLocalizedString("Add value")}
+					onChange={(event) => setDraft(event.target.value)}
+					onKeyDown={handleKeyDown}
+					onBlur={commit}
+				/>
+			)}
+		</div>
+	);
+}

package/src/filter/FieldFilterPanel.css

@@ -0,0 +1,127 @@
+.ObFieldFilterPanel-root {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-3, 0.75rem);
+
+	/*
+	 * The panel is sized by whatever it is put in — a popover, a dialog, a
+	 * sidebar. It fills that container and lets the distinct list take up the
+	 * slack, so the list grows and shrinks with the container instead of
+	 * carrying a height of its own.
+	 */
+	block-size: 100%;
+	min-block-size: 0;
+}
+
+.ObFieldFilterPanel-heading {
+	font-weight: var(--ds-font-weight-medium, 500);
+	color: var(--ds-color-neutral-text-default);
+}
+
+.ObFieldFilterPanel-criteria {
+	display: flex;
+	flex-direction: column;
+	flex: 0 0 auto;
+	gap: var(--ds-size-2, 0.5rem);
+}
+
+.ObFieldFilterPanel-criterion {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-1, 0.25rem);
+}
+
+/*
+ * The filter editor's value cell is written for the filter builder's horizontal
+ * rows, where growing is what makes it fill the row. Stacked vertically that
+ * same `flex-grow` makes it stretch to fill the whole panel instead.
+ */
+.ObFieldFilterPanel-criterion > .ObFilterEditor-valueCell {
+	flex: 0 0 auto;
+}
+
+.ObFieldFilterPanel-distinct {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	gap: var(--ds-size-2, 0.5rem);
+	min-block-size: 0;
+	padding-block-start: var(--ds-size-2, 0.5rem);
+	border-block-start: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e7e7e7);
+}
+
+.ObFieldFilterPanel-distinctToolbar {
+	display: flex;
+	flex: 0 0 auto;
+	gap: var(--ds-size-1, 0.25rem);
+	align-items: center;
+}
+
+.ObFieldFilterPanel-distinctToolbar .ds-search {
+	flex: 1;
+	min-inline-size: 0;
+}
+
+/*
+ * The active sort is held down, so it is clear which of the two is in effect.
+ * Neutral tokens rather than accent ones: the accent scale is only defined
+ * inside a `data-color` scope, and the panel can be dropped anywhere.
+ */
+.ObFieldFilterPanel-distinctToolbar .ds-button[aria-pressed="true"] {
+	color: var(--ds-color-neutral-text-default, #292c30);
+	background: var(--ds-color-neutral-surface-active, #c9cacb);
+	box-shadow: inset 0 0 0 var(--ds-border-width-default, 1px) var(--ds-color-neutral-border-subtle, #e7e7e7);
+}
+
+/*
+ * Both the list and the spinner that replaces it while loading use this box, so
+ * the panel does not jump when the values arrive. It is the part that takes up
+ * whatever room the container has left, and it never collapses to nothing.
+ */
+.ObFieldFilterPanel-valuesBox {
+	flex: 1 1 auto;
+	min-block-size: 8rem;
+	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e7e7e7);
+	border-radius: var(--ds-border-radius-md, 0.25rem);
+	background: var(--ds-color-neutral-surface-tinted, rgb(0 0 0 / 2%));
+}
+
+.ObFieldFilterPanel-values {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-1, 0.25rem);
+	margin: 0;
+	padding: var(--ds-size-1, 0.25rem);
+	overflow-y: auto;
+	list-style: none;
+}
+
+.ObFieldFilterPanel-value {
+	padding-inline: var(--ds-size-1, 0.25rem);
+}
+
+.ObFieldFilterPanel-loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--ds-size-4, 1rem);
+}
+
+.ObFieldFilterPanel-error {
+	margin: 0;
+	color: var(--ds-color-danger-text-default);
+}
+
+.ObFieldFilterPanel-hint {
+	margin: 0;
+	flex: 0 0 auto;
+	font-size: var(--ds-font-size-1, 0.75rem);
+	color: var(--ds-color-neutral-text-subtle, #68707c);
+}
+
+.ObFieldFilterPanel-actions {
+	display: flex;
+	flex: 0 0 auto;
+	gap: var(--ds-size-2, 0.5rem);
+	justify-content: flex-end;
+}