@olenbetong/appframe-ds 1.2.0 → 1.3.0

package/src/grid/Toolbar.tsx

@@ -1,233 +1,233 @@
-import { Button, Dropdown } from "@digdir/designsystemet-react";
-import {
-	type GridApi,
-	type GridExportMenuItemProps,
-	gridVisibleColumnDefinitionsSelector,
-	useGridApiContext,
-} from "@mui/x-data-grid-premium";
-import {
-	ArrowsCirclepathIcon,
-	Density1Icon,
-	Density2Icon,
-	Density3Icon,
-	FileCsvIcon,
-	FileExcelIcon,
-	FilterIcon,
-	MenuElipsisVerticalIcon,
-	PlusIcon,
-	TableIcon,
-} from "@navikt/aksel-icons";
-import { type DataObject, exportOptionsFromDataObject } from "@olenbetong/appframe-data";
-import { useDataObject, useLoading, usePermissions } from "@olenbetong/appframe-react";
-
-import { openDataObjectReportWithProgress } from "../report-downloader/index.js";
-import { useAfGridContext } from "./AfGridContext.js";
-import { addRow } from "./editing.js";
-import type { AfGridApi } from "./useAfGridApi.js";
-import { getLocalizedString } from "../i18n.js";
-
-export function GridToolbarAddButton({ onClick }: { onClick: () => void }) {
-	return (
-		<Button variant="tertiary" data-size="sm" onClick={onClick}>
-			<PlusIcon aria-hidden />
-			{getLocalizedString("Add")}
-		</Button>
-	);
-}
-
-export function GridToolbarAddIfAllowedButton({ disableInsert }: { disableInsert?: boolean }) {
-	let dataObject = useDataObject();
-	let apiRef = useGridApiContext();
-	let permissions = usePermissions(dataObject);
-
-	return permissions.allowInsert && !disableInsert ? (
-		<GridToolbarAddButton onClick={() => addRow({ apiRef, dataObject })} />
-	) : null;
-}
-
-export function GridToolbarRefreshButton() {
-	let dataObject = useDataObject();
-	let isLoading = useLoading(dataObject);
-
-	return (
-		<Button variant="tertiary" data-size="sm" loading={isLoading} onClick={() => dataObject.refreshDataSource()}>
-			{/* Designsystemet prepends the spinner rather than replacing the children, so
-			    the icon is hidden while loading to keep the button from changing width */}
-			{!isLoading && <ArrowsCirclepathIcon aria-hidden />}
-			{getLocalizedString("Refresh")}
-		</Button>
-	);
-}
-
-export function GridToolbarColumnsButton() {
-	let { openColumnsPanel } = useAfGridContext();
-
-	return (
-		<Button variant="tertiary" data-size="sm" onClick={openColumnsPanel}>
-			<TableIcon aria-hidden />
-			{getLocalizedString("Columns")}
-		</Button>
-	);
-}
-
-/**
- * Opens the filter builder instead of the grid's own filter panel. The count
- * reflects the conditions in the builder's filter, not the header filters.
- */
-export function GridToolbarFilterButton() {
-	let { openFilterBuilder, filterCount } = useAfGridContext();
-
-	return (
-		<Button variant="tertiary" data-size="sm" onClick={openFilterBuilder}>
-			<FilterIcon aria-hidden />
-			{getLocalizedString("Filter")}
-			{filterCount > 0 ? ` (${filterCount})` : ""}
-		</Button>
-	);
-}
-
-export function GridToolbarResetLayoutButton() {
-	let apiRef = useGridApiContext();
-
-	function handleReset() {
-		(apiRef.current as AfGridApi).resetLayout?.();
-	}
-
-	return (
-		<Button variant="tertiary" data-size="sm" onClick={handleReset}>
-			<ArrowsCirclepathIcon aria-hidden />
-			{getLocalizedString("Reset layout")}
-		</Button>
-	);
-}
-
-function handleExportToExcel(
-	apiRef: React.RefObject<GridApi>,
-	dataObject: DataObject<any>,
-	fileName?: string,
-	title?: string,
-) {
-	let visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
-	openDataObjectReportWithProgress({
-		dataObject: dataObject.getDataSourceId(),
-		exportUrl: dataObject.getExportURL("xlsx"),
-		fileName: fileName ?? dataObject.getDataSourceId(),
-		format: "xlsx",
-		options: exportOptionsFromDataObject(dataObject, {
-			columns: visibleColumns
-				.filter((c) => !!dataObject.getFieldDefinition(c.field))
-				.map((column) => ({
-					name: column.field,
-					caption: column.headerName ?? column.field,
-				})),
-			maxRecords: -1,
-		}),
-		title,
-	});
-}
-
-export type AfExcelExportOptions = { fileName?: string; title?: string };
-export type AfGridExcelExportOptions = GridExportMenuItemProps<AfExcelExportOptions>;
-
-export function AfGridExcelExportMenuItem({ options = {}, hideMenu }: AfGridExcelExportOptions) {
-	let apiRef = useGridApiContext();
-	let dataObject = useDataObject();
-
-	return (
-		<Dropdown.Item>
-			<Dropdown.Button
-				onClick={() => {
-					handleExportToExcel(apiRef, dataObject, options.fileName, options.title);
-					hideMenu?.();
-				}}
-			>
-				<FileExcelIcon aria-hidden />
-				{getLocalizedString("Download as Excel")}
-			</Dropdown.Button>
-		</Dropdown.Item>
-	);
-}
-
-export function AfGridToolbarExcelExportButton({ fileName, title }: { fileName?: string; title?: string }) {
-	let apiRef = useGridApiContext();
-	let dataObject = useDataObject();
-
-	return (
-		<Button variant="tertiary" data-size="sm" onClick={() => handleExportToExcel(apiRef, dataObject, fileName, title)}>
-			<FileExcelIcon aria-hidden />
-			{getLocalizedString("Export")}
-		</Button>
-	);
-}
-
-export function GridToolbarMoreOptionsButton() {
-	let apiRef = useGridApiContext();
-
-	return (
-		<Dropdown.TriggerContext>
-			<Dropdown.Trigger variant="tertiary" icon data-size="sm" aria-label={getLocalizedString("More options")}>
-				<MenuElipsisVerticalIcon aria-hidden />
-			</Dropdown.Trigger>
-			<Dropdown placement="bottom-end" data-size="sm">
-				<Dropdown.List>
-					<Dropdown.Item>
-						<Dropdown.Button onClick={() => apiRef.current.exportDataAsCsv()}>
-							<FileCsvIcon aria-hidden />
-							{getLocalizedString("Export as CSV")}
-						</Dropdown.Button>
-					</Dropdown.Item>
-					<AfGridExcelExportMenuItem />
-					<Dropdown.Item>
-						<Dropdown.Button onClick={() => apiRef.current.setDensity("compact")}>
-							<Density1Icon aria-hidden />
-							{getLocalizedString("Compact")}
-						</Dropdown.Button>
-					</Dropdown.Item>
-					<Dropdown.Item>
-						<Dropdown.Button onClick={() => apiRef.current.setDensity("standard")}>
-							<Density2Icon aria-hidden />
-							{getLocalizedString("Standard")}
-						</Dropdown.Button>
-					</Dropdown.Item>
-					<Dropdown.Item>
-						<Dropdown.Button onClick={() => apiRef.current.setDensity("comfortable")}>
-							<Density3Icon aria-hidden />
-							{getLocalizedString("Comfortable")}
-						</Dropdown.Button>
-					</Dropdown.Item>
-					<Dropdown.Item>
-						<Dropdown.Button onClick={() => (apiRef.current as AfGridApi).resetLayout?.()}>
-							<ArrowsCirclepathIcon aria-hidden />
-							{getLocalizedString("Reset layout")}
-						</Dropdown.Button>
-					</Dropdown.Item>
-				</Dropdown.List>
-			</Dropdown>
-		</Dropdown.TriggerContext>
-	);
-}
-
-export function AfGridToolbar({ children, disableInsert }: React.PropsWithChildren<{ disableInsert?: boolean }>) {
-	return (
-		<GridToolbarContainer>
-			<GridToolbarAddIfAllowedButton disableInsert={disableInsert} />
-			<GridToolbarColumnsButton />
-			<GridToolbarFilterButton />
-			<GridToolbarRefreshButton />
-			<GridToolbarMoreOptionsButton />
-			{children}
-		</GridToolbarContainer>
-	);
-}
-
-/**
- * The toolbar surface itself, for grids that compose their own set of buttons.
- * Replaces MUI's `DataGrid.Toolbar`.
- */
-export function GridToolbarContainer({ children, className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div {...props} className={className ? `AfGrid-toolbar ${className}` : "AfGrid-toolbar"}>
-			{children}
-		</div>
-	);
-}
+import { Button, Dropdown } from "@digdir/designsystemet-react";
+import {
+	type GridApi,
+	type GridExportMenuItemProps,
+	gridVisibleColumnDefinitionsSelector,
+	useGridApiContext,
+} from "@mui/x-data-grid-premium";
+import {
+	ArrowsCirclepathIcon,
+	Density1Icon,
+	Density2Icon,
+	Density3Icon,
+	FileCsvIcon,
+	FileExcelIcon,
+	FilterIcon,
+	MenuElipsisVerticalIcon,
+	PlusIcon,
+	TableIcon,
+} from "@navikt/aksel-icons";
+import { type DataObject, exportOptionsFromDataObject } from "@olenbetong/appframe-data";
+import { useDataObject, useLoading, usePermissions } from "@olenbetong/appframe-react";
+
+import { openDataObjectReportWithProgress } from "../report-downloader/index.js";
+import { useAfGridContext } from "./AfGridContext.js";
+import { addRow } from "./editing.js";
+import type { AfGridApi } from "./useAfGridApi.js";
+import { getLocalizedString } from "../i18n.js";
+
+export function GridToolbarAddButton({ onClick }: { onClick: () => void }) {
+	return (
+		<Button variant="tertiary" data-size="sm" onClick={onClick}>
+			<PlusIcon aria-hidden />
+			{getLocalizedString("Add")}
+		</Button>
+	);
+}
+
+export function GridToolbarAddIfAllowedButton({ disableInsert }: { disableInsert?: boolean }) {
+	let dataObject = useDataObject();
+	let apiRef = useGridApiContext();
+	let permissions = usePermissions(dataObject);
+
+	return permissions.allowInsert && !disableInsert ? (
+		<GridToolbarAddButton onClick={() => addRow({ apiRef, dataObject })} />
+	) : null;
+}
+
+export function GridToolbarRefreshButton() {
+	let dataObject = useDataObject();
+	let isLoading = useLoading(dataObject);
+
+	return (
+		<Button variant="tertiary" data-size="sm" loading={isLoading} onClick={() => dataObject.refreshDataSource()}>
+			{/* Designsystemet prepends the spinner rather than replacing the children, so
+			    the icon is hidden while loading to keep the button from changing width */}
+			{!isLoading && <ArrowsCirclepathIcon aria-hidden />}
+			{getLocalizedString("Refresh")}
+		</Button>
+	);
+}
+
+export function GridToolbarColumnsButton() {
+	let { openColumnsPanel } = useAfGridContext();
+
+	return (
+		<Button variant="tertiary" data-size="sm" onClick={openColumnsPanel}>
+			<TableIcon aria-hidden />
+			{getLocalizedString("Columns")}
+		</Button>
+	);
+}
+
+/**
+ * Opens the filter builder instead of the grid's own filter panel. The count
+ * reflects the conditions in the builder's filter, not the header filters.
+ */
+export function GridToolbarFilterButton() {
+	let { openFilterBuilder, filterCount } = useAfGridContext();
+
+	return (
+		<Button variant="tertiary" data-size="sm" onClick={openFilterBuilder}>
+			<FilterIcon aria-hidden />
+			{getLocalizedString("Filter")}
+			{filterCount > 0 ? ` (${filterCount})` : ""}
+		</Button>
+	);
+}
+
+export function GridToolbarResetLayoutButton() {
+	let apiRef = useGridApiContext();
+
+	function handleReset() {
+		(apiRef.current as AfGridApi).resetLayout?.();
+	}
+
+	return (
+		<Button variant="tertiary" data-size="sm" onClick={handleReset}>
+			<ArrowsCirclepathIcon aria-hidden />
+			{getLocalizedString("Reset layout")}
+		</Button>
+	);
+}
+
+function handleExportToExcel(
+	apiRef: React.RefObject<GridApi>,
+	dataObject: DataObject<any>,
+	fileName?: string,
+	title?: string,
+) {
+	let visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+	openDataObjectReportWithProgress({
+		dataObject: dataObject.getDataSourceId(),
+		exportUrl: dataObject.getExportURL("xlsx"),
+		fileName: fileName ?? dataObject.getDataSourceId(),
+		format: "xlsx",
+		options: exportOptionsFromDataObject(dataObject, {
+			columns: visibleColumns
+				.filter((c) => !!dataObject.getFieldDefinition(c.field))
+				.map((column) => ({
+					name: column.field,
+					caption: column.headerName ?? column.field,
+				})),
+			maxRecords: -1,
+		}),
+		title,
+	});
+}
+
+export type AfExcelExportOptions = { fileName?: string; title?: string };
+export type AfGridExcelExportOptions = GridExportMenuItemProps<AfExcelExportOptions>;
+
+export function AfGridExcelExportMenuItem({ options = {}, hideMenu }: AfGridExcelExportOptions) {
+	let apiRef = useGridApiContext();
+	let dataObject = useDataObject();
+
+	return (
+		<Dropdown.Item>
+			<Dropdown.Button
+				onClick={() => {
+					handleExportToExcel(apiRef, dataObject, options.fileName, options.title);
+					hideMenu?.();
+				}}
+			>
+				<FileExcelIcon aria-hidden />
+				{getLocalizedString("Download as Excel")}
+			</Dropdown.Button>
+		</Dropdown.Item>
+	);
+}
+
+export function AfGridToolbarExcelExportButton({ fileName, title }: { fileName?: string; title?: string }) {
+	let apiRef = useGridApiContext();
+	let dataObject = useDataObject();
+
+	return (
+		<Button variant="tertiary" data-size="sm" onClick={() => handleExportToExcel(apiRef, dataObject, fileName, title)}>
+			<FileExcelIcon aria-hidden />
+			{getLocalizedString("Export")}
+		</Button>
+	);
+}
+
+export function GridToolbarMoreOptionsButton() {
+	let apiRef = useGridApiContext();
+
+	return (
+		<Dropdown.TriggerContext>
+			<Dropdown.Trigger variant="tertiary" icon data-size="sm" aria-label={getLocalizedString("More options")}>
+				<MenuElipsisVerticalIcon aria-hidden />
+			</Dropdown.Trigger>
+			<Dropdown placement="bottom-end" data-size="sm">
+				<Dropdown.List>
+					<Dropdown.Item>
+						<Dropdown.Button onClick={() => apiRef.current.exportDataAsCsv()}>
+							<FileCsvIcon aria-hidden />
+							{getLocalizedString("Export as CSV")}
+						</Dropdown.Button>
+					</Dropdown.Item>
+					<AfGridExcelExportMenuItem />
+					<Dropdown.Item>
+						<Dropdown.Button onClick={() => apiRef.current.setDensity("compact")}>
+							<Density1Icon aria-hidden />
+							{getLocalizedString("Compact")}
+						</Dropdown.Button>
+					</Dropdown.Item>
+					<Dropdown.Item>
+						<Dropdown.Button onClick={() => apiRef.current.setDensity("standard")}>
+							<Density2Icon aria-hidden />
+							{getLocalizedString("Standard")}
+						</Dropdown.Button>
+					</Dropdown.Item>
+					<Dropdown.Item>
+						<Dropdown.Button onClick={() => apiRef.current.setDensity("comfortable")}>
+							<Density3Icon aria-hidden />
+							{getLocalizedString("Comfortable")}
+						</Dropdown.Button>
+					</Dropdown.Item>
+					<Dropdown.Item>
+						<Dropdown.Button onClick={() => (apiRef.current as AfGridApi).resetLayout?.()}>
+							<ArrowsCirclepathIcon aria-hidden />
+							{getLocalizedString("Reset layout")}
+						</Dropdown.Button>
+					</Dropdown.Item>
+				</Dropdown.List>
+			</Dropdown>
+		</Dropdown.TriggerContext>
+	);
+}
+
+export function AfGridToolbar({ children, disableInsert }: React.PropsWithChildren<{ disableInsert?: boolean }>) {
+	return (
+		<GridToolbarContainer>
+			<GridToolbarAddIfAllowedButton disableInsert={disableInsert} />
+			<GridToolbarColumnsButton />
+			<GridToolbarFilterButton />
+			<GridToolbarRefreshButton />
+			<GridToolbarMoreOptionsButton />
+			{children}
+		</GridToolbarContainer>
+	);
+}
+
+/**
+ * The toolbar surface itself, for grids that compose their own set of buttons.
+ * Replaces MUI's `DataGrid.Toolbar`.
+ */
+export function GridToolbarContainer({ children, className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div {...props} className={className ? `AfGrid-toolbar ${className}` : "AfGrid-toolbar"}>
+			{children}
+		</div>
+	);
+}

package/src/grid/editing.ts

@@ -1,100 +1,100 @@
-import { type GridApi, gridFocusCellSelector, gridVisibleColumnDefinitionsSelector } from "@mui/x-data-grid-premium";
-import { type DataObject, uid } from "@olenbetong/appframe-data";
-
-import type React from "react";
-
-import type { AfGridApi } from "./useAfGridApi.js";
-import { getLocalizedString } from "../i18n.js";
-
-/**
- * Starts a new row. With a new item row on the grid that row is focused and put
- * in edit mode; otherwise an unsaved row is appended to the data and edited there.
- */
-export function addRow<T extends { PrimKey: string }>({
-	apiRef,
-	dataObject,
-}: {
-	apiRef: React.RefObject<GridApi | null>;
-	dataObject: DataObject<T>;
-}) {
-	if ((apiRef.current as AfGridApi | null)?.startNewItemRow?.()) {
-		return;
-	}
-
-	let newRow = dataObject.newRow();
-	let id = (newRow as any)[uid];
-	apiRef.current?.updateRows([{ [uid]: id, id, isNew: true } as any]);
-	apiRef.current?.startRowEditMode({ id });
-
-	// Wait for the grid to render with the new row
-	setTimeout(() => {
-		apiRef.current?.scrollToIndexes({
-			rowIndex: apiRef.current?.getRowsCount() - 1,
-		});
-
-		let visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
-		let firstEditable = visibleColumns.find((c) => c.editable === true);
-
-		if (firstEditable) {
-			apiRef.current?.setCellFocus(id, firstEditable.field);
-		}
-	});
-}
-
-export async function deleteRow<T extends { PrimKey: string }>({
-	apiRef,
-	dataObject,
-	id,
-	idField,
-}: {
-	apiRef: React.RefObject<GridApi | null>;
-	dataObject: DataObject<T>;
-	id: string | number;
-	idField: string;
-}) {
-	try {
-		if (!window.confirm(getLocalizedString("Are you sure you want to delete the selected row?"))) {
-			return;
-		}
-
-		let focusBefore = gridFocusCellSelector(apiRef);
-		let index = dataObject.findIndex((r) => (r as any)[idField] === id || (r as any)[uid] === id);
-
-		if (index < 0) {
-			alert(getLocalizedString("Row not found"));
-			return;
-		}
-
-		await dataObject.deleteRow(index);
-
-		let focusAfter = gridFocusCellSelector(apiRef);
-
-		// Need to run this operation to prevent MUI errors
-		apiRef.current?.updateRows([{ [uid]: id, id, _action: "delete" }]);
-
-		if (!focusAfter || focusAfter.id === id) {
-			if (dataObject.getDataLength() > 0) {
-				let newIndex = Math.max(0, Math.min(dataObject.getDataLength() - 1, index - 1));
-				let newId = (dataObject.getData(newIndex) as any)[uid];
-				let newField = focusBefore?.field ?? gridVisibleColumnDefinitionsSelector(apiRef)[0]?.field;
-
-				if (newId && newField) {
-					apiRef.current?.setCellFocus(newId, newField);
-				}
-			}
-		}
-	} catch (error) {
-		alert((error as Error).message ?? error);
-	}
-}
-
-export function cancelEdit<T extends { PrimKey: string }>({
-	apiRef,
-	id,
-}: {
-	apiRef: React.RefObject<GridApi>;
-	dataObject: DataObject<T>;
-	id: string | number;
-}) {
-	apiRef.current.stopRowEditMode({ id, ignoreModifications: true });
-}
+import { type GridApi, gridFocusCellSelector, gridVisibleColumnDefinitionsSelector } from "@mui/x-data-grid-premium";
+import { type DataObject, uid } from "@olenbetong/appframe-data";
+
+import type React from "react";
+
+import type { AfGridApi } from "./useAfGridApi.js";
+import { getLocalizedString } from "../i18n.js";
+
+/**
+ * Starts a new row. With a new item row on the grid that row is focused and put
+ * in edit mode; otherwise an unsaved row is appended to the data and edited there.
+ */
+export function addRow<T extends { PrimKey: string }>({
+	apiRef,
+	dataObject,
+}: {
+	apiRef: React.RefObject<GridApi | null>;
+	dataObject: DataObject<T>;
+}) {
+	if ((apiRef.current as AfGridApi | null)?.startNewItemRow?.()) {
+		return;
+	}
+
+	let newRow = dataObject.newRow();
+	let id = (newRow as any)[uid];
+	apiRef.current?.updateRows([{ [uid]: id, id, isNew: true } as any]);
+	apiRef.current?.startRowEditMode({ id });
+
+	// Wait for the grid to render with the new row
+	setTimeout(() => {
+		apiRef.current?.scrollToIndexes({
+			rowIndex: apiRef.current?.getRowsCount() - 1,
+		});
+
+		let visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+		let firstEditable = visibleColumns.find((c) => c.editable === true);
+
+		if (firstEditable) {
+			apiRef.current?.setCellFocus(id, firstEditable.field);
+		}
+	});
+}
+
+export async function deleteRow<T extends { PrimKey: string }>({
+	apiRef,
+	dataObject,
+	id,
+	idField,
+}: {
+	apiRef: React.RefObject<GridApi | null>;
+	dataObject: DataObject<T>;
+	id: string | number;
+	idField: string;
+}) {
+	try {
+		if (!window.confirm(getLocalizedString("Are you sure you want to delete the selected row?"))) {
+			return;
+		}
+
+		let focusBefore = gridFocusCellSelector(apiRef);
+		let index = dataObject.findIndex((r) => (r as any)[idField] === id || (r as any)[uid] === id);
+
+		if (index < 0) {
+			alert(getLocalizedString("Row not found"));
+			return;
+		}
+
+		await dataObject.deleteRow(index);
+
+		let focusAfter = gridFocusCellSelector(apiRef);
+
+		// Need to run this operation to prevent MUI errors
+		apiRef.current?.updateRows([{ [uid]: id, id, _action: "delete" }]);
+
+		if (!focusAfter || focusAfter.id === id) {
+			if (dataObject.getDataLength() > 0) {
+				let newIndex = Math.max(0, Math.min(dataObject.getDataLength() - 1, index - 1));
+				let newId = (dataObject.getData(newIndex) as any)[uid];
+				let newField = focusBefore?.field ?? gridVisibleColumnDefinitionsSelector(apiRef)[0]?.field;
+
+				if (newId && newField) {
+					apiRef.current?.setCellFocus(newId, newField);
+				}
+			}
+		}
+	} catch (error) {
+		alert((error as Error).message ?? error);
+	}
+}
+
+export function cancelEdit<T extends { PrimKey: string }>({
+	apiRef,
+	id,
+}: {
+	apiRef: React.RefObject<GridApi>;
+	dataObject: DataObject<T>;
+	id: string | number;
+}) {
+	apiRef.current.stopRowEditMode({ id, ignoreModifications: true });
+}