@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/binding/BoundTextField.tsx

@@ -1,49 +1,49 @@
-import { Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
-import { useField } from "@olenbetong/appframe-react";
-import { forwardRef } from "react";
-
-/*
- * `TextfieldProps` is a union of the input and the textarea variant. A plain `Omit` over it keeps
- * only the props both branches share, which silently drops the textarea-only ones (`rows`,
- * `cols`) — so `multiline` was accepted but `rows` was not. Distributing the `Omit` over the union
- * keeps each branch intact.
- */
-type OmitBoundProps<T> = T extends unknown ? Omit<T, "value" | "onChange" | "onKeyDown"> : never;
-
-export type BoundTextFieldProps = OmitBoundProps<TextfieldProps> & {
-	field: string;
-};
-
-export const BoundTextField = forwardRef<HTMLInputElement & HTMLTextAreaElement, BoundTextFieldProps>(
-	function BoundTextField({ field, ...props }, ref) {
-		let { error, value, onChange, onKeyDown } = useField<any, any>(field);
-
-		let inputValue = value;
-		if (props.type === "date" && value instanceof Date) {
-			inputValue = value.toISOString().split("T")[0];
-		} else if (["datetime", "datetime-local"].includes(props.type ?? "") && value instanceof Date) {
-			inputValue = value.toISOString().replace("Z", "");
-		}
-
-		return (
-			<Textfield
-				name={field}
-				error={error ?? undefined}
-				{...(props as any)}
-				value={inputValue ?? ""}
-				onChange={(evt) => {
-					if (["datetime", "datetime-local"].includes(props.type ?? "")) {
-						onChange(
-							evt as any,
-							(evt.target as HTMLInputElement).value ? `${(evt.target as HTMLInputElement).value}Z` : null,
-						);
-					} else {
-						onChange(evt as any);
-					}
-				}}
-				onKeyDown={(evt) => onKeyDown(evt as any)}
-				ref={ref}
-			/>
-		);
-	},
-);
+import { Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+
+/*
+ * `TextfieldProps` is a union of the input and the textarea variant. A plain `Omit` over it keeps
+ * only the props both branches share, which silently drops the textarea-only ones (`rows`,
+ * `cols`) — so `multiline` was accepted but `rows` was not. Distributing the `Omit` over the union
+ * keeps each branch intact.
+ */
+type OmitBoundProps<T> = T extends unknown ? Omit<T, "value" | "onChange" | "onKeyDown"> : never;
+
+export type BoundTextFieldProps = OmitBoundProps<TextfieldProps> & {
+	field: string;
+};
+
+export const BoundTextField = forwardRef<HTMLInputElement & HTMLTextAreaElement, BoundTextFieldProps>(
+	function BoundTextField({ field, ...props }, ref) {
+		let { error, value, onChange, onKeyDown } = useField<any, any>(field);
+
+		let inputValue = value;
+		if (props.type === "date" && value instanceof Date) {
+			inputValue = value.toISOString().split("T")[0];
+		} else if (["datetime", "datetime-local"].includes(props.type ?? "") && value instanceof Date) {
+			inputValue = value.toISOString().replace("Z", "");
+		}
+
+		return (
+			<Textfield
+				name={field}
+				error={error ?? undefined}
+				{...(props as any)}
+				value={inputValue ?? ""}
+				onChange={(evt) => {
+					if (["datetime", "datetime-local"].includes(props.type ?? "")) {
+						onChange(
+							evt as any,
+							(evt.target as HTMLInputElement).value ? `${(evt.target as HTMLInputElement).value}Z` : null,
+						);
+					} else {
+						onChange(evt as any);
+					}
+				}}
+				onKeyDown={(evt) => onKeyDown(evt as any)}
+				ref={ref}
+			/>
+		);
+	},
+);

package/src/binding/CancelButton.tsx

@@ -1,30 +1,30 @@
-import { Button, type ButtonProps } from "@digdir/designsystemet-react";
-import { ArrowUndoIcon } from "@navikt/aksel-icons";
-import { useCancelButton } from "@olenbetong/appframe-react";
-import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
-import { getLocalizedString } from "../i18n.js";
-
-export const CancelButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
-	HTMLButtonElement,
-	ButtonProps
->(function CancelButton({ onClick, children, loading, ...props }, ref) {
-	let { cancelEdit } = useCancelButton();
-
-	return (
-		<Button
-			loading={loading}
-			onClick={(evt) => {
-				onClick?.(evt);
-				if (!evt.defaultPrevented) {
-					cancelEdit();
-				}
-			}}
-			variant="secondary"
-			{...props}
-			ref={ref}
-		>
-			{!loading && <ArrowUndoIcon aria-hidden="true" />}
-			{children ?? getLocalizedString("Cancel")}
-		</Button>
-	);
-});
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { ArrowUndoIcon } from "@navikt/aksel-icons";
+import { useCancelButton } from "@olenbetong/appframe-react";
+import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
+import { getLocalizedString } from "../i18n.js";
+
+export const CancelButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
+	HTMLButtonElement,
+	ButtonProps
+>(function CancelButton({ onClick, children, loading, ...props }, ref) {
+	let { cancelEdit } = useCancelButton();
+
+	return (
+		<Button
+			loading={loading}
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					cancelEdit();
+				}
+			}}
+			variant="secondary"
+			{...props}
+			ref={ref}
+		>
+			{!loading && <ArrowUndoIcon aria-hidden="true" />}
+			{children ?? getLocalizedString("Cancel")}
+		</Button>
+	);
+});

package/src/binding/CancelIconButton.tsx

@@ -1,30 +1,30 @@
-import { Button, type ButtonProps } from "@digdir/designsystemet-react";
-import { ArrowUndoIcon } from "@navikt/aksel-icons";
-import { useCancelButton } from "@olenbetong/appframe-react";
-import { forwardRef } from "react";
-import { getLocalizedString } from "../i18n.js";
-
-export const CancelIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function CancelIconButton(
-	{ onClick, children, ...props },
-	ref,
-) {
-	let { cancelEdit } = useCancelButton();
-
-	return (
-		<Button
-			icon
-			aria-label={getLocalizedString("Revert unsaved changes")}
-			variant="tertiary"
-			onClick={(evt) => {
-				onClick?.(evt);
-				if (!evt.defaultPrevented) {
-					cancelEdit();
-				}
-			}}
-			{...props}
-			ref={ref}
-		>
-			{children ?? <ArrowUndoIcon />}
-		</Button>
-	);
-});
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { ArrowUndoIcon } from "@navikt/aksel-icons";
+import { useCancelButton } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+import { getLocalizedString } from "../i18n.js";
+
+export const CancelIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function CancelIconButton(
+	{ onClick, children, ...props },
+	ref,
+) {
+	let { cancelEdit } = useCancelButton();
+
+	return (
+		<Button
+			icon
+			aria-label={getLocalizedString("Revert unsaved changes")}
+			variant="tertiary"
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					cancelEdit();
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{children ?? <ArrowUndoIcon />}
+		</Button>
+	);
+});

package/src/binding/DataEditToolbar.css

@@ -1,23 +1,23 @@
-/*
- * A toolbar bar above a record form: tinted, so it reads as chrome rather than as part of the
- * form below it. Designsystemet buttons are `display: flex`, so every group of them must be a
- * flex row of its own or the buttons stack.
- */
-@layer ds {
-	.DataEditToolbar-root {
-		display: flex;
-		align-items: center;
-		gap: var(--ds-size-1);
-		min-height: 48px;
-		padding-inline: var(--ds-size-2);
-		background: var(--ds-color-neutral-background-tinted);
-		border-block-end: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
-	}
-
-	.DataEditToolbar-navigation {
-		display: flex;
-		align-items: center;
-		gap: var(--ds-size-1);
-		margin-inline-start: auto;
-	}
-}
+/*
+ * A toolbar bar above a record form: tinted, so it reads as chrome rather than as part of the
+ * form below it. Designsystemet buttons are `display: flex`, so every group of them must be a
+ * flex row of its own or the buttons stack.
+ */
+@layer ds {
+	.DataEditToolbar-root {
+		display: flex;
+		align-items: center;
+		gap: var(--ds-size-1);
+		min-height: 48px;
+		padding-inline: var(--ds-size-2);
+		background: var(--ds-color-neutral-background-tinted);
+		border-block-end: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
+	}
+
+	.DataEditToolbar-navigation {
+		display: flex;
+		align-items: center;
+		gap: var(--ds-size-1);
+		margin-inline-start: auto;
+	}
+}

package/src/binding/DataEditToolbar.tsx

@@ -1,84 +1,84 @@
-import "./DataEditToolbar.css";
-
-import { Button, Tooltip } from "@digdir/designsystemet-react";
-import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
-import type { DataObject } from "@olenbetong/appframe-data";
-import { useCurrentIndex, useDataLength, useDataObject } from "@olenbetong/appframe-react";
-import { CancelIconButton } from "./CancelIconButton.js";
-import { RefreshRowIconButton } from "./RefreshRowIconButton.js";
-import { SaveIconButton } from "./SaveIconButton.js";
-import { getLocalizedString } from "../i18n.js";
-
-function IndexNavigator({ dataObject }: { dataObject: DataObject<any> }) {
-	let count = useDataLength(dataObject);
-	let index = useCurrentIndex(dataObject);
-
-	if (count <= 1) {
-		return null;
-	}
-
-	return (
-		<>
-			<Button
-				icon
-				variant="tertiary"
-				aria-label={getLocalizedString("Previous")}
-				onClick={() => dataObject.setCurrentIndex(index - 1)}
-				disabled={index <= 0}
-			>
-				<ChevronLeftIcon />
-			</Button>
-			<Button
-				icon
-				variant="tertiary"
-				aria-label={getLocalizedString("Next")}
-				onClick={() => dataObject.setCurrentIndex(index + 1)}
-				disabled={index >= count - 1}
-			>
-				<ChevronRightIcon />
-			</Button>
-		</>
-	);
-}
-
-export type DataEditToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
-	/**
-	 * If different data objects are used for navigation and editing, you can set the data object
-	 * used for navigation with this property.
-	 */
-	navigationDataObject?: DataObject<any>;
-	/**
-	 * If true, will add buttons to move to the next/previous index in the data object.
-	 */
-	showNavigation?: boolean;
-};
-
-export function DataEditToolbar({
-	children,
-	navigationDataObject,
-	showNavigation,
-	className,
-	...props
-}: DataEditToolbarProps) {
-	let dataObject = useDataObject();
-
-	return (
-		<div className={className ? `DataEditToolbar-root ${className}` : "DataEditToolbar-root"} {...props}>
-			<Tooltip content={getLocalizedString("Save changes")}>
-				<SaveIconButton />
-			</Tooltip>
-			<Tooltip content={getLocalizedString("Revert unsaved changes")}>
-				<CancelIconButton />
-			</Tooltip>
-			<Tooltip content={getLocalizedString("Refresh record")}>
-				<RefreshRowIconButton />
-			</Tooltip>
-			{children}
-			{showNavigation && (
-				<div className="DataEditToolbar-navigation">
-					<IndexNavigator dataObject={navigationDataObject ?? dataObject} />
-				</div>
-			)}
-		</div>
-	);
-}
+import "./DataEditToolbar.css";
+
+import { Button, Tooltip } from "@digdir/designsystemet-react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { useCurrentIndex, useDataLength, useDataObject } from "@olenbetong/appframe-react";
+import { CancelIconButton } from "./CancelIconButton.js";
+import { RefreshRowIconButton } from "./RefreshRowIconButton.js";
+import { SaveIconButton } from "./SaveIconButton.js";
+import { getLocalizedString } from "../i18n.js";
+
+function IndexNavigator({ dataObject }: { dataObject: DataObject<any> }) {
+	let count = useDataLength(dataObject);
+	let index = useCurrentIndex(dataObject);
+
+	if (count <= 1) {
+		return null;
+	}
+
+	return (
+		<>
+			<Button
+				icon
+				variant="tertiary"
+				aria-label={getLocalizedString("Previous")}
+				onClick={() => dataObject.setCurrentIndex(index - 1)}
+				disabled={index <= 0}
+			>
+				<ChevronLeftIcon />
+			</Button>
+			<Button
+				icon
+				variant="tertiary"
+				aria-label={getLocalizedString("Next")}
+				onClick={() => dataObject.setCurrentIndex(index + 1)}
+				disabled={index >= count - 1}
+			>
+				<ChevronRightIcon />
+			</Button>
+		</>
+	);
+}
+
+export type DataEditToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
+	/**
+	 * If different data objects are used for navigation and editing, you can set the data object
+	 * used for navigation with this property.
+	 */
+	navigationDataObject?: DataObject<any>;
+	/**
+	 * If true, will add buttons to move to the next/previous index in the data object.
+	 */
+	showNavigation?: boolean;
+};
+
+export function DataEditToolbar({
+	children,
+	navigationDataObject,
+	showNavigation,
+	className,
+	...props
+}: DataEditToolbarProps) {
+	let dataObject = useDataObject();
+
+	return (
+		<div className={className ? `DataEditToolbar-root ${className}` : "DataEditToolbar-root"} {...props}>
+			<Tooltip content={getLocalizedString("Save changes")}>
+				<SaveIconButton />
+			</Tooltip>
+			<Tooltip content={getLocalizedString("Revert unsaved changes")}>
+				<CancelIconButton />
+			</Tooltip>
+			<Tooltip content={getLocalizedString("Refresh record")}>
+				<RefreshRowIconButton />
+			</Tooltip>
+			{children}
+			{showNavigation && (
+				<div className="DataEditToolbar-navigation">
+					<IndexNavigator dataObject={navigationDataObject ?? dataObject} />
+				</div>
+			)}
+		</div>
+	);
+}

package/src/binding/DeleteButton.tsx

@@ -1,35 +1,35 @@
-import { Button, type ButtonProps } from "@digdir/designsystemet-react";
-import { TrashIcon } from "@navikt/aksel-icons";
-import { type DeletePrompt, useDeleteButton } from "@olenbetong/appframe-react";
-import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
-import { getLocalizedString } from "../i18n.js";
-
-export type DeleteButtonProps = ButtonProps & { index?: number; prompt?: DeletePrompt };
-
-export const DeleteButton: ForwardRefExoticComponent<DeleteButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
-	HTMLButtonElement,
-	DeleteButtonProps
->(function DeleteButton({ prompt, onClick, index, children, loading, ...props }, ref) {
-	let { deleting, deleteRow } = useDeleteButton(prompt);
-	let isLoading = deleting || loading;
-
-	return (
-		<Button
-			loading={isLoading}
-			data-color="danger"
-			variant="secondary"
-			onClick={(evt) => {
-				onClick?.(evt);
-				if (!evt.defaultPrevented) {
-					deleteRow(index);
-				}
-			}}
-			{...props}
-			ref={ref}
-		>
-			{/* Icon is hidden while loading so the spinner takes its place instead of adding width */}
-			{!isLoading && <TrashIcon aria-hidden="true" />}
-			{children ?? getLocalizedString("Delete")}
-		</Button>
-	);
-});
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { TrashIcon } from "@navikt/aksel-icons";
+import { type DeletePrompt, useDeleteButton } from "@olenbetong/appframe-react";
+import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
+import { getLocalizedString } from "../i18n.js";
+
+export type DeleteButtonProps = ButtonProps & { index?: number; prompt?: DeletePrompt };
+
+export const DeleteButton: ForwardRefExoticComponent<DeleteButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
+	HTMLButtonElement,
+	DeleteButtonProps
+>(function DeleteButton({ prompt, onClick, index, children, loading, ...props }, ref) {
+	let { deleting, deleteRow } = useDeleteButton(prompt);
+	let isLoading = deleting || loading;
+
+	return (
+		<Button
+			loading={isLoading}
+			data-color="danger"
+			variant="secondary"
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					deleteRow(index);
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{/* Icon is hidden while loading so the spinner takes its place instead of adding width */}
+			{!isLoading && <TrashIcon aria-hidden="true" />}
+			{children ?? getLocalizedString("Delete")}
+		</Button>
+	);
+});

package/src/binding/DeleteIconButton.tsx

@@ -1,35 +1,35 @@
-import { Button, type ButtonProps } from "@digdir/designsystemet-react";
-import { TrashIcon } from "@navikt/aksel-icons";
-import { type DeletePrompt, useDeleteButton } from "@olenbetong/appframe-react";
-import { forwardRef } from "react";
-import { getLocalizedString } from "../i18n.js";
-
-export type DeleteIconButtonProps = Omit<ButtonProps, "icon"> & { index?: number; prompt?: DeletePrompt };
-
-export const DeleteIconButton = forwardRef<HTMLButtonElement, DeleteIconButtonProps>(function DeleteIconButton(
-	{ prompt, onClick, index, children, loading, ...props },
-	ref,
-) {
-	let { isDeleting, deleteRow } = useDeleteButton(prompt);
-	let isLoading = isDeleting || loading;
-
-	return (
-		<Button
-			icon
-			loading={isLoading}
-			data-color="danger"
-			aria-label={getLocalizedString("Delete")}
-			variant="tertiary"
-			onClick={(evt) => {
-				onClick?.(evt);
-				if (!evt.defaultPrevented) {
-					deleteRow(index);
-				}
-			}}
-			{...props}
-			ref={ref}
-		>
-			{children ?? <TrashIcon />}
-		</Button>
-	);
-});
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { TrashIcon } from "@navikt/aksel-icons";
+import { type DeletePrompt, useDeleteButton } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+import { getLocalizedString } from "../i18n.js";
+
+export type DeleteIconButtonProps = Omit<ButtonProps, "icon"> & { index?: number; prompt?: DeletePrompt };
+
+export const DeleteIconButton = forwardRef<HTMLButtonElement, DeleteIconButtonProps>(function DeleteIconButton(
+	{ prompt, onClick, index, children, loading, ...props },
+	ref,
+) {
+	let { isDeleting, deleteRow } = useDeleteButton(prompt);
+	let isLoading = isDeleting || loading;
+
+	return (
+		<Button
+			icon
+			loading={isLoading}
+			data-color="danger"
+			aria-label={getLocalizedString("Delete")}
+			variant="tertiary"
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					deleteRow(index);
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{children ?? <TrashIcon />}
+		</Button>
+	);
+});

package/src/binding/RefreshButton.tsx

@@ -1,31 +1,31 @@
-import { Button, type ButtonProps } from "@digdir/designsystemet-react";
-import { ArrowsCirclepathIcon } from "@navikt/aksel-icons";
-import { useRefreshButton } from "@olenbetong/appframe-react";
-import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
-import { getLocalizedString } from "../i18n.js";
-
-export const RefreshButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
-	HTMLButtonElement,
-	ButtonProps
->(function RefreshButton({ onClick, children, loading, ...props }, ref) {
-	let { loading: refreshing, refresh } = useRefreshButton();
-	let isLoading = refreshing || loading;
-
-	return (
-		<Button
-			loading={isLoading}
-			onClick={(evt) => {
-				onClick?.(evt);
-				if (!evt.defaultPrevented) {
-					refresh();
-				}
-			}}
-			{...props}
-			ref={ref}
-		>
-			{/* Icon is hidden while loading so the spinner takes its place instead of adding width */}
-			{!isLoading && <ArrowsCirclepathIcon aria-hidden="true" />}
-			{children ?? getLocalizedString("Refresh")}
-		</Button>
-	);
-});
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { ArrowsCirclepathIcon } from "@navikt/aksel-icons";
+import { useRefreshButton } from "@olenbetong/appframe-react";
+import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
+import { getLocalizedString } from "../i18n.js";
+
+export const RefreshButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
+	HTMLButtonElement,
+	ButtonProps
+>(function RefreshButton({ onClick, children, loading, ...props }, ref) {
+	let { loading: refreshing, refresh } = useRefreshButton();
+	let isLoading = refreshing || loading;
+
+	return (
+		<Button
+			loading={isLoading}
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					refresh();
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{/* Icon is hidden while loading so the spinner takes its place instead of adding width */}
+			{!isLoading && <ArrowsCirclepathIcon aria-hidden="true" />}
+			{children ?? getLocalizedString("Refresh")}
+		</Button>
+	);
+});