@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/grid/AfGridColumnsPanel.tsx

@@ -1,118 +1,118 @@
-import { Button, Checkbox, Dialog, Heading, Search } from "@digdir/designsystemet-react";
-import {
-	type GridApi,
-	gridColumnDefinitionsSelector,
-	gridColumnVisibilityModelSelector,
-	useGridSelector,
-} from "@mui/x-data-grid-premium";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-
-import { useState } from "react";
-import { useAfGridContext } from "./AfGridContext.js";
-
-export type AfGridColumnsPanelProps = {
-	open: boolean;
-	onClose: () => void;
-};
-
-/**
- * Replacement for the grid's own column panel, built with Designsystemet
- * components. Columns can be searched, toggled and reordered by dragging.
- *
- * Rendered as a sibling of the grid rather than inside it, so it reads the grid
- * api from `AfGridContext` — `useGridApiContext` is only available inside the
- * `DataGrid` subtree. `AfGrid` mounts it only while it is open, so the grid
- * state is always initialized by the time the selectors run.
- */
-export function AfGridColumnsPanel({ open, onClose }: AfGridColumnsPanelProps) {
-	let { apiRef } = useAfGridContext();
-	let columns = useGridSelector(apiRef as React.RefObject<GridApi>, gridColumnDefinitionsSelector);
-	let visibilityModel = useGridSelector(apiRef as React.RefObject<GridApi>, gridColumnVisibilityModelSelector);
-	let [search, setSearch] = useState("");
-	let [dragField, setDragField] = useState<string | null>(null);
-
-	let togglable = columns.filter((column) => column.hideable !== false && column.type !== "actions");
-	let query = search.trim().toLowerCase();
-	let matching = query
-		? togglable.filter((column) => (column.headerName ?? column.field).toLowerCase().includes(query))
-		: togglable;
-
-	function setAll(isVisible: boolean) {
-		let model = { ...visibilityModel };
-
-		for (let column of matching) {
-			model[column.field] = isVisible;
-		}
-
-		apiRef.current?.setColumnVisibilityModel(model);
-	}
-
-	function handleDrop(targetField: string) {
-		if (!dragField || dragField === targetField) return;
-
-		let order = apiRef.current?.getAllColumns().map((column) => column.field) ?? [];
-		let targetIndex = order.indexOf(targetField);
-
-		if (targetIndex >= 0) {
-			apiRef.current?.setColumnIndex(dragField, targetIndex);
-		}
-
-		setDragField(null);
-	}
-
-	return (
-		<Dialog
-			open={open}
-			className="AfGrid-columnsPanel"
-			closedby="any"
-			onClose={onClose}
-			closeButton={getLocalizedString("Close")}
-		>
-			<Dialog.Block>
-				<Heading level={2} data-size="xs">
-					{getLocalizedString("Columns")}
-				</Heading>
-			</Dialog.Block>
-			<Dialog.Block className="AfGrid-columnsPanelSearch">
-				<Search data-size="sm">
-					<Search.Input
-						aria-label={getLocalizedString("Search")}
-						value={search}
-						onChange={(event) => setSearch(event.currentTarget.value)}
-					/>
-					<Search.Clear onClick={() => setSearch("")} />
-				</Search>
-				<ul className="AfGrid-columnsPanelList">
-					{matching.map((column) => (
-						<li
-							key={column.field}
-							className="AfGrid-columnsPanelItem"
-							draggable
-							onDragStart={() => setDragField(column.field)}
-							onDragOver={(event) => event.preventDefault()}
-							onDrop={() => handleDrop(column.field)}
-						>
-							<Checkbox
-								data-size="sm"
-								label={column.headerName ?? column.field}
-								checked={visibilityModel[column.field] !== false}
-								onChange={(event) => apiRef.current?.setColumnVisibility(column.field, event.currentTarget.checked)}
-							/>
-						</li>
-					))}
-				</ul>
-			</Dialog.Block>
-			<Dialog.Block className="AfGrid-columnsPanelActions">
-				<Button variant="tertiary" data-size="sm" onClick={() => setAll(false)}>
-					{getLocalizedString("Hide all")}
-				</Button>
-				<Button variant="tertiary" data-size="sm" onClick={() => setAll(true)}>
-					{getLocalizedString("Show all")}
-				</Button>
-				<Button data-size="sm" onClick={onClose}>
-					{getLocalizedString("Close")}
-				</Button>
-			</Dialog.Block>
-		</Dialog>
-	);
-}
+import { Button, Checkbox, Dialog, Heading, Search } from "@digdir/designsystemet-react";
+import {
+	type GridApi,
+	gridColumnDefinitionsSelector,
+	gridColumnVisibilityModelSelector,
+	useGridSelector,
+} from "@mui/x-data-grid-premium";
+
+import { useState } from "react";
+import { useAfGridContext } from "./AfGridContext.js";
+import { getLocalizedString } from "../i18n.js";
+
+export type AfGridColumnsPanelProps = {
+	open: boolean;
+	onClose: () => void;
+};
+
+/**
+ * Replacement for the grid's own column panel, built with Designsystemet
+ * components. Columns can be searched, toggled and reordered by dragging.
+ *
+ * Rendered as a sibling of the grid rather than inside it, so it reads the grid
+ * api from `AfGridContext` — `useGridApiContext` is only available inside the
+ * `DataGrid` subtree. `AfGrid` mounts it only while it is open, so the grid
+ * state is always initialized by the time the selectors run.
+ */
+export function AfGridColumnsPanel({ open, onClose }: AfGridColumnsPanelProps) {
+	let { apiRef } = useAfGridContext();
+	let columns = useGridSelector(apiRef as React.RefObject<GridApi>, gridColumnDefinitionsSelector);
+	let visibilityModel = useGridSelector(apiRef as React.RefObject<GridApi>, gridColumnVisibilityModelSelector);
+	let [search, setSearch] = useState("");
+	let [dragField, setDragField] = useState<string | null>(null);
+
+	let togglable = columns.filter((column) => column.hideable !== false && column.type !== "actions");
+	let query = search.trim().toLowerCase();
+	let matching = query
+		? togglable.filter((column) => (column.headerName ?? column.field).toLowerCase().includes(query))
+		: togglable;
+
+	function setAll(isVisible: boolean) {
+		let model = { ...visibilityModel };
+
+		for (let column of matching) {
+			model[column.field] = isVisible;
+		}
+
+		apiRef.current?.setColumnVisibilityModel(model);
+	}
+
+	function handleDrop(targetField: string) {
+		if (!dragField || dragField === targetField) return;
+
+		let order = apiRef.current?.getAllColumns().map((column) => column.field) ?? [];
+		let targetIndex = order.indexOf(targetField);
+
+		if (targetIndex >= 0) {
+			apiRef.current?.setColumnIndex(dragField, targetIndex);
+		}
+
+		setDragField(null);
+	}
+
+	return (
+		<Dialog
+			open={open}
+			className="AfGrid-columnsPanel"
+			closedby="any"
+			onClose={onClose}
+			closeButton={getLocalizedString("Close")}
+		>
+			<Dialog.Block>
+				<Heading level={2} data-size="xs">
+					{getLocalizedString("Columns")}
+				</Heading>
+			</Dialog.Block>
+			<Dialog.Block className="AfGrid-columnsPanelSearch">
+				<Search data-size="sm">
+					<Search.Input
+						aria-label={getLocalizedString("Search")}
+						value={search}
+						onChange={(event) => setSearch(event.currentTarget.value)}
+					/>
+					<Search.Clear onClick={() => setSearch("")} />
+				</Search>
+				<ul className="AfGrid-columnsPanelList">
+					{matching.map((column) => (
+						<li
+							key={column.field}
+							className="AfGrid-columnsPanelItem"
+							draggable
+							onDragStart={() => setDragField(column.field)}
+							onDragOver={(event) => event.preventDefault()}
+							onDrop={() => handleDrop(column.field)}
+						>
+							<Checkbox
+								data-size="sm"
+								label={column.headerName ?? column.field}
+								checked={visibilityModel[column.field] !== false}
+								onChange={(event) => apiRef.current?.setColumnVisibility(column.field, event.currentTarget.checked)}
+							/>
+						</li>
+					))}
+				</ul>
+			</Dialog.Block>
+			<Dialog.Block className="AfGrid-columnsPanelActions">
+				<Button variant="tertiary" data-size="sm" onClick={() => setAll(false)}>
+					{getLocalizedString("Hide all")}
+				</Button>
+				<Button variant="tertiary" data-size="sm" onClick={() => setAll(true)}>
+					{getLocalizedString("Show all")}
+				</Button>
+				<Button data-size="sm" onClick={onClose}>
+					{getLocalizedString("Close")}
+				</Button>
+			</Dialog.Block>
+		</Dialog>
+	);
+}

package/src/grid/AfGridContext.tsx

@@ -1,51 +1,51 @@
-import type { GridApi } from "@mui/x-data-grid-premium";
-import type { FieldMetadata, FilterExpression, FilterTree } from "@olenbetong/appframe-core";
-import { createContext, useContext } from "react";
-
-export type AfGridContextValue = {
-	/** The grid's `id` prop. Used to key the named filter slot. */
-	id: string;
-	apiRef: React.RefObject<GridApi | null>;
-	/** Fields the filter builder can filter on, derived from the data object and the columns. */
-	filterFields: FieldMetadata[];
-	/** Opens the filter builder dialog. */
-	openFilterBuilder: () => void;
-	/**
-	 * The grid's filter tree. The header filters and the filter builder edit the
-	 * same tree, so a criterion added in one shows up in the other.
-	 */
-	filter: FilterTree;
-	/** Replaces the whole filter tree. */
-	setFilter: (filter: FilterTree) => void;
-	/** The criteria a header filter owns for a field. See `getFieldExpressions`. */
-	getFieldCriteria: (field: string) => FilterExpression[];
-	/** Replaces the criteria a header filter owns for a field. */
-	setFieldCriteria: (field: string, expressions: FilterExpression[]) => void;
-	/** Number of criteria in the filter, shown on the toolbar button. */
-	filterCount: number;
-	/** Opens the column panel. */
-	openColumnsPanel: () => void;
-};
-
-const AfGridContext = createContext<AfGridContextValue | null>(null);
-
-export const AfGridContextProvider = AfGridContext.Provider;
-
-/**
- * The grid state shared with the toolbar, the header filters and the panels.
- * Only available inside an `AfGrid`.
- */
-export function useAfGridContext() {
-	let context = useContext(AfGridContext);
-
-	if (!context) {
-		throw new Error("useAfGridContext must be used inside an AfGrid");
-	}
-
-	return context;
-}
-
-/** Like `useAfGridContext`, but returns null outside an `AfGrid`. */
-export function useOptionalAfGridContext() {
-	return useContext(AfGridContext);
-}
+import type { GridApi } from "@mui/x-data-grid-premium";
+import type { FieldMetadata, FilterExpression, FilterTree } from "@olenbetong/appframe-core";
+import { createContext, useContext } from "react";
+
+export type AfGridContextValue = {
+	/** The grid's `id` prop. Used to key the named filter slot. */
+	id: string;
+	apiRef: React.RefObject<GridApi | null>;
+	/** Fields the filter builder can filter on, derived from the data object and the columns. */
+	filterFields: FieldMetadata[];
+	/** Opens the filter builder dialog. */
+	openFilterBuilder: () => void;
+	/**
+	 * The grid's filter tree. The header filters and the filter builder edit the
+	 * same tree, so a criterion added in one shows up in the other.
+	 */
+	filter: FilterTree;
+	/** Replaces the whole filter tree. */
+	setFilter: (filter: FilterTree) => void;
+	/** The criteria a header filter owns for a field. See `getFieldExpressions`. */
+	getFieldCriteria: (field: string) => FilterExpression[];
+	/** Replaces the criteria a header filter owns for a field. */
+	setFieldCriteria: (field: string, expressions: FilterExpression[]) => void;
+	/** Number of criteria in the filter, shown on the toolbar button. */
+	filterCount: number;
+	/** Opens the column panel. */
+	openColumnsPanel: () => void;
+};
+
+const AfGridContext = createContext<AfGridContextValue | null>(null);
+
+export const AfGridContextProvider = AfGridContext.Provider;
+
+/**
+ * The grid state shared with the toolbar, the header filters and the panels.
+ * Only available inside an `AfGrid`.
+ */
+export function useAfGridContext() {
+	let context = useContext(AfGridContext);
+
+	if (!context) {
+		throw new Error("useAfGridContext must be used inside an AfGrid");
+	}
+
+	return context;
+}
+
+/** Like `useAfGridContext`, but returns null outside an `AfGrid`. */
+export function useOptionalAfGridContext() {
+	return useContext(AfGridContext);
+}

package/src/grid/AfGridError.tsx

@@ -1,46 +1,46 @@
-import { Alert, Button } from "@digdir/designsystemet-react";
-import type { GridApi } from "@mui/x-data-grid-premium";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import type { DataObject } from "@olenbetong/appframe-data";
-import { useError } from "@olenbetong/appframe-react";
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
-type AfGridErrorProps = {
-	apiRef: React.RefObject<GridApi | null>;
-	dataObject: DataObject<any>;
-};
-
-export function AfGridError({ apiRef, dataObject }: AfGridErrorProps) {
-	let rawLoadError = useError(dataObject);
-	let [errorDismissed, setErrorDismissed] = useState(false);
-	let [gridRootEl, setGridRootEl] = useState<Element | null>(null);
-	let prevRawLoadErrorRef = useRef(rawLoadError);
-
-	if (prevRawLoadErrorRef.current !== rawLoadError) {
-		prevRawLoadErrorRef.current = rawLoadError;
-		if (rawLoadError) setErrorDismissed(false);
-	}
-
-	let loadError = errorDismissed ? null : rawLoadError;
-
-	// Capture the DataGrid root element after mount so we can portal into it.
-	// This lets us use --DataGrid-topContainerHeight to position below the headers.
-	useEffect(() => {
-		setGridRootEl(apiRef.current?.rootElementRef?.current ?? null);
-	}, [apiRef]);
-
-	if (!loadError || !gridRootEl) return null;
-
-	return createPortal(
-		<div className="AfGrid-errorOverlay">
-			<Alert data-color="danger" data-size="sm" className="AfGrid-errorAlert">
-				<span>{loadError}</span>
-				<Button variant="tertiary" data-size="sm" data-color="danger" onClick={() => setErrorDismissed(true)}>
-					{getLocalizedString("Dismiss")}
-				</Button>
-			</Alert>
-		</div>,
-		gridRootEl,
-	);
-}
+import { Alert, Button } from "@digdir/designsystemet-react";
+import type { GridApi } from "@mui/x-data-grid-premium";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { useError } from "@olenbetong/appframe-react";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { getLocalizedString } from "../i18n.js";
+
+type AfGridErrorProps = {
+	apiRef: React.RefObject<GridApi | null>;
+	dataObject: DataObject<any>;
+};
+
+export function AfGridError({ apiRef, dataObject }: AfGridErrorProps) {
+	let rawLoadError = useError(dataObject);
+	let [errorDismissed, setErrorDismissed] = useState(false);
+	let [gridRootEl, setGridRootEl] = useState<Element | null>(null);
+	let prevRawLoadErrorRef = useRef(rawLoadError);
+
+	if (prevRawLoadErrorRef.current !== rawLoadError) {
+		prevRawLoadErrorRef.current = rawLoadError;
+		if (rawLoadError) setErrorDismissed(false);
+	}
+
+	let loadError = errorDismissed ? null : rawLoadError;
+
+	// Capture the DataGrid root element after mount so we can portal into it.
+	// This lets us use --DataGrid-topContainerHeight to position below the headers.
+	useEffect(() => {
+		setGridRootEl(apiRef.current?.rootElementRef?.current ?? null);
+	}, [apiRef]);
+
+	if (!loadError || !gridRootEl) return null;
+
+	return createPortal(
+		<div className="AfGrid-errorOverlay">
+			<Alert data-color="danger" data-size="sm" className="AfGrid-errorAlert">
+				<span>{loadError}</span>
+				<Button variant="tertiary" data-size="sm" data-color="danger" onClick={() => setErrorDismissed(true)}>
+					{getLocalizedString("Dismiss")}
+				</Button>
+			</Alert>
+		</div>,
+		gridRootEl,
+	);
+}