@olenbetong/appframe-ds 1.2.0 → 1.3.1

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

@@ -0,0 +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;
+	}
+}

package/src/binding/DataEditToolbar.tsx

@@ -1,92 +1,84 @@
-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,
-	style,
-	...props
-}: DataEditToolbarProps) {
-	let dataObject = useDataObject();
-
-	return (
-		<div
-			style={{
-				display: "flex",
-				alignItems: "center",
-				minHeight: "48px",
-				borderBottom: "1px solid rgb(0 0 0 / 0.12)",
-				borderTop: "1px solid rgb(0 0 0 / 0.12)",
-				...style,
-			}}
-			{...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 style={{ marginLeft: "auto" }}>
-					<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>
+	);
+});

package/src/binding/RefreshIconButton.tsx

@@ -1,33 +1,33 @@
-import { Button, type ButtonProps } from "@digdir/designsystemet-react";
-import { ArrowsCirclepathIcon } from "@navikt/aksel-icons";
-import { useDataObject, useLoading } from "@olenbetong/appframe-react";
-import { forwardRef } from "react";
-import { getLocalizedString } from "../i18n.js";
-
-export const RefreshIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function RefreshIconButton(
-	{ onClick, children, loading, ...props },
-	ref,
-) {
-	let dataObject = useDataObject();
-	let refreshing = useLoading(dataObject);
-	let isLoading = refreshing || loading;
-
-	return (
-		<Button
-			icon
-			loading={isLoading}
-			aria-label={getLocalizedString("Refresh data")}
-			variant="tertiary"
-			onClick={(evt) => {
-				onClick?.(evt);
-				if (!evt.defaultPrevented) {
-					dataObject.refreshDataSource();
-				}
-			}}
-			{...props}
-			ref={ref}
-		>
-			{children ?? <ArrowsCirclepathIcon />}
-		</Button>
-	);
-});
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { ArrowsCirclepathIcon } from "@navikt/aksel-icons";
+import { useDataObject, useLoading } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+import { getLocalizedString } from "../i18n.js";
+
+export const RefreshIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function RefreshIconButton(
+	{ onClick, children, loading, ...props },
+	ref,
+) {
+	let dataObject = useDataObject();
+	let refreshing = useLoading(dataObject);
+	let isLoading = refreshing || loading;
+
+	return (
+		<Button
+			icon
+			loading={isLoading}
+			aria-label={getLocalizedString("Refresh data")}
+			variant="tertiary"
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					dataObject.refreshDataSource();
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{children ?? <ArrowsCirclepathIcon />}
+		</Button>
+	);
+});