@olenbetong/appframe-ds 1.6.0 → 1.7.0

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>
+	);
+});

package/src/binding/RefreshRowIconButton.tsx

@@ -1,33 +1,33 @@
-import { Button, type ButtonProps } from "@digdir/designsystemet-react";
-import { ArrowsCirclepathIcon } from "@navikt/aksel-icons";
-import { useRefreshRowButton } from "@olenbetong/appframe-react";
-import { forwardRef } from "react";
-import { getLocalizedString } from "../i18n.js";
-
-export type RefreshRowIconButtonProps = Omit<ButtonProps, "icon"> & { index?: number };
-
-export const RefreshRowIconButton = forwardRef<HTMLButtonElement, RefreshRowIconButtonProps>(
-	function RefreshRowIconButton({ onClick, index, children, loading, ...props }, ref) {
-		let { loading: refreshing, refreshRow } = useRefreshRowButton();
-		let isLoading = refreshing || loading;
-
-		return (
-			<Button
-				icon
-				loading={isLoading}
-				aria-label={getLocalizedString("Refresh current row")}
-				variant="tertiary"
-				onClick={(evt) => {
-					onClick?.(evt);
-					if (!evt.defaultPrevented) {
-						refreshRow(index);
-					}
-				}}
-				{...props}
-				ref={ref}
-			>
-				{children ?? <ArrowsCirclepathIcon />}
-			</Button>
-		);
-	},
-);
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { ArrowsCirclepathIcon } from "@navikt/aksel-icons";
+import { useRefreshRowButton } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+import { getLocalizedString } from "../i18n.js";
+
+export type RefreshRowIconButtonProps = Omit<ButtonProps, "icon"> & { index?: number };
+
+export const RefreshRowIconButton = forwardRef<HTMLButtonElement, RefreshRowIconButtonProps>(
+	function RefreshRowIconButton({ onClick, index, children, loading, ...props }, ref) {
+		let { loading: refreshing, refreshRow } = useRefreshRowButton();
+		let isLoading = refreshing || loading;
+
+		return (
+			<Button
+				icon
+				loading={isLoading}
+				aria-label={getLocalizedString("Refresh current row")}
+				variant="tertiary"
+				onClick={(evt) => {
+					onClick?.(evt);
+					if (!evt.defaultPrevented) {
+						refreshRow(index);
+					}
+				}}
+				{...props}
+				ref={ref}
+			>
+				{children ?? <ArrowsCirclepathIcon />}
+			</Button>
+		);
+	},
+);

package/src/binding/SaveButton.tsx

@@ -1,37 +1,37 @@
-import { Badge, BadgePosition, Button, type ButtonProps } from "@digdir/designsystemet-react";
-import { FloppydiskIcon } from "@navikt/aksel-icons";
-import { useSaveButton } from "@olenbetong/appframe-react";
-import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
-import { getLocalizedString } from "../i18n.js";
-
-export const SaveButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
-	HTMLButtonElement,
-	ButtonProps
->(function SaveButton({ onClick, children, loading, ...props }, ref) {
-	let { dirty, saving, save } = useSaveButton();
-	let isLoading = saving || loading;
-
-	return (
-		<Button
-			loading={isLoading}
-			onClick={(evt) => {
-				onClick?.(evt);
-				if (!evt.defaultPrevented) {
-					save();
-				}
-			}}
-			{...props}
-			ref={ref}
-		>
-			{/* Icon is hidden while loading so the spinner takes its place instead of adding width */}
-			{!isLoading && (
-				<BadgePosition placement="top-right" overlap="circle">
-					<FloppydiskIcon aria-hidden="true" />
-					{/* Indicates unsaved changes on the current record */}
-					{dirty && <Badge data-color="warning" aria-hidden="true" />}
-				</BadgePosition>
-			)}
-			{children ?? getLocalizedString("Save")}
-		</Button>
-	);
-});
+import { Badge, BadgePosition, Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { FloppydiskIcon } from "@navikt/aksel-icons";
+import { useSaveButton } from "@olenbetong/appframe-react";
+import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
+import { getLocalizedString } from "../i18n.js";
+
+export const SaveButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
+	HTMLButtonElement,
+	ButtonProps
+>(function SaveButton({ onClick, children, loading, ...props }, ref) {
+	let { dirty, saving, save } = useSaveButton();
+	let isLoading = saving || loading;
+
+	return (
+		<Button
+			loading={isLoading}
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					save();
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{/* Icon is hidden while loading so the spinner takes its place instead of adding width */}
+			{!isLoading && (
+				<BadgePosition placement="top-right" overlap="circle">
+					<FloppydiskIcon aria-hidden="true" />
+					{/* Indicates unsaved changes on the current record */}
+					{dirty && <Badge data-color="warning" aria-hidden="true" />}
+				</BadgePosition>
+			)}
+			{children ?? getLocalizedString("Save")}
+		</Button>
+	);
+});

package/src/binding/SaveIconButton.tsx

@@ -1,38 +1,38 @@
-import { Badge, BadgePosition, Button, type ButtonProps } from "@digdir/designsystemet-react";
-import { FloppydiskIcon } from "@navikt/aksel-icons";
-import { useSaveButton } from "@olenbetong/appframe-react";
-import { forwardRef } from "react";
-import { getLocalizedString } from "../i18n.js";
-
-export const SaveIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function SaveIconButton(
-	{ onClick, children, loading, ...props },
-	ref,
-) {
-	let { dirty, saving, save } = useSaveButton();
-	let isLoading = saving || loading;
-
-	return (
-		<Button
-			icon
-			loading={isLoading}
-			aria-label={getLocalizedString("Save")}
-			variant="tertiary"
-			onClick={(evt) => {
-				onClick?.(evt);
-				if (!evt.defaultPrevented) {
-					save();
-				}
-			}}
-			{...props}
-			ref={ref}
-		>
-			{children ?? (
-				<BadgePosition placement="top-right" overlap="circle">
-					<FloppydiskIcon />
-					{/* Indicates unsaved changes on the current record */}
-					{dirty && <Badge data-color="warning" aria-hidden="true" />}
-				</BadgePosition>
-			)}
-		</Button>
-	);
-});
+import { Badge, BadgePosition, Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { FloppydiskIcon } from "@navikt/aksel-icons";
+import { useSaveButton } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+import { getLocalizedString } from "../i18n.js";
+
+export const SaveIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function SaveIconButton(
+	{ onClick, children, loading, ...props },
+	ref,
+) {
+	let { dirty, saving, save } = useSaveButton();
+	let isLoading = saving || loading;
+
+	return (
+		<Button
+			icon
+			loading={isLoading}
+			aria-label={getLocalizedString("Save")}
+			variant="tertiary"
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					save();
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{children ?? (
+				<BadgePosition placement="top-right" overlap="circle">
+					<FloppydiskIcon />
+					{/* Indicates unsaved changes on the current record */}
+					{dirty && <Badge data-color="warning" aria-hidden="true" />}
+				</BadgePosition>
+			)}
+		</Button>
+	);
+});

package/src/binding/index.ts

@@ -1,20 +1,20 @@
-export * from "./BoundCheckbox.js";
-export * from "./BoundDatePicker.js";
-export * from "./BoundDateTimePicker.js";
-export * from "./BoundInput.js";
-export * from "./BoundNumberInput.js";
-export * from "./BoundNumericTextField.js";
-export * from "./BoundSelect.js";
-export * from "./BoundSwitch.js";
-export * from "./BoundTextField.js";
-export * from "./CancelButton.js";
-export * from "./CancelIconButton.js";
-export * from "./DataEditToolbar.js";
-export * from "./DataObjectSelect.js";
-export * from "./DeleteButton.js";
-export * from "./DeleteIconButton.js";
-export * from "./RefreshButton.js";
-export * from "./RefreshIconButton.js";
-export * from "./RefreshRowIconButton.js";
-export * from "./SaveButton.js";
-export * from "./SaveIconButton.js";
+export * from "./BoundCheckbox.js";
+export * from "./BoundDatePicker.js";
+export * from "./BoundDateTimePicker.js";
+export * from "./BoundInput.js";
+export * from "./BoundNumberInput.js";
+export * from "./BoundNumericTextField.js";
+export * from "./BoundSelect.js";
+export * from "./BoundSwitch.js";
+export * from "./BoundTextField.js";
+export * from "./CancelButton.js";
+export * from "./CancelIconButton.js";
+export * from "./DataEditToolbar.js";
+export * from "./DataObjectSelect.js";
+export * from "./DeleteButton.js";
+export * from "./DeleteIconButton.js";
+export * from "./RefreshButton.js";
+export * from "./RefreshIconButton.js";
+export * from "./RefreshRowIconButton.js";
+export * from "./SaveButton.js";
+export * from "./SaveIconButton.js";

package/src/container/Container.tsx

@@ -1,50 +1,50 @@
-import { PageBlock, type PageBlockProps, type PageBlockWidth } from "../page/PageBlock.js";
-
-export const containerMaxWidths = ["xs", "sm", "md", "lg", "xl"] as const;
-
-export type ContainerMaxWidth = (typeof containerMaxWidths)[number];
-
-const maxWidthToBlockWidth: Record<ContainerMaxWidth, PageBlockWidth> = {
-	xs: "text",
-	sm: "text",
-	md: "md",
-	lg: "lg",
-	xl: "xl",
-};
-
-export type ContainerProps = Omit<PageBlockProps, "width"> & {
-	/**
-	 * Predefined max-width, with the MUI `Container` names on the `Page.Block` scale. Content is
-	 * horizontally centered. Pixel widths are at the 2026 site's 14px root font size; the
-	 * rem values follow the browser's font size setting.
-	 *
-	 * - `xs`/`sm`: 41rem (574px) — recommended line-length for running text
-	 * - `md`: 55rem (770px)
-	 * - `lg`: 73rem (1022px)
-	 * - `xl`: 110rem (1540px)
-	 * - `false`: no max-width
-	 *
-	 * @default "lg"
-	 */
-	maxWidth?: ContainerMaxWidth | false;
-};
-
-/**
- * Centered, max-width content wrapper — the MUI `Container` equivalent.
- *
- * A thin alias over `Page.Block` with gutters enabled by default, for the very
- * common case of "center this content and give it sensible side padding"
- * without having to reach for the full `Page` composition.
- *
- * @example
- * ```jsx
- * <Container maxWidth="sm">
- *   <Heading>Expenses</Heading>
- * </Container>
- * ```
- */
-export function Container({ gutters = true, maxWidth = "lg", ...props }: ContainerProps) {
-	let width = maxWidth === false ? undefined : maxWidthToBlockWidth[maxWidth];
-
-	return <PageBlock gutters={gutters} width={width} {...props} />;
-}
+import { PageBlock, type PageBlockProps, type PageBlockWidth } from "../page/PageBlock.js";
+
+export const containerMaxWidths = ["xs", "sm", "md", "lg", "xl"] as const;
+
+export type ContainerMaxWidth = (typeof containerMaxWidths)[number];
+
+const maxWidthToBlockWidth: Record<ContainerMaxWidth, PageBlockWidth> = {
+	xs: "text",
+	sm: "text",
+	md: "md",
+	lg: "lg",
+	xl: "xl",
+};
+
+export type ContainerProps = Omit<PageBlockProps, "width"> & {
+	/**
+	 * Predefined max-width, with the MUI `Container` names on the `Page.Block` scale. Content is
+	 * horizontally centered. Pixel widths are at the 2026 site's 14px root font size; the
+	 * rem values follow the browser's font size setting.
+	 *
+	 * - `xs`/`sm`: 41rem (574px) — recommended line-length for running text
+	 * - `md`: 55rem (770px)
+	 * - `lg`: 73rem (1022px)
+	 * - `xl`: 110rem (1540px)
+	 * - `false`: no max-width
+	 *
+	 * @default "lg"
+	 */
+	maxWidth?: ContainerMaxWidth | false;
+};
+
+/**
+ * Centered, max-width content wrapper — the MUI `Container` equivalent.
+ *
+ * A thin alias over `Page.Block` with gutters enabled by default, for the very
+ * common case of "center this content and give it sensible side padding"
+ * without having to reach for the full `Page` composition.
+ *
+ * @example
+ * ```jsx
+ * <Container maxWidth="sm">
+ *   <Heading>Expenses</Heading>
+ * </Container>
+ * ```
+ */
+export function Container({ gutters = true, maxWidth = "lg", ...props }: ContainerProps) {
+	let width = maxWidth === false ? undefined : maxWidthToBlockWidth[maxWidth];
+
+	return <PageBlock gutters={gutters} width={width} {...props} />;
+}

package/src/container/index.ts

@@ -1 +1 @@
-export * from "./Container.js";
+export * from "./Container.js";

package/src/cutoff/CutOffPicker.css

@@ -1,12 +1,12 @@
-@layer ds {
-	.ObCutOffPicker-root {
-		display: flex;
-		align-items: center;
-		gap: var(--ds-size-2);
-	}
-
-	.ObCutOffPicker-root > .ds-select,
-	.ObCutOffPicker-root > .ds-field {
-		flex: 0 1 auto;
-	}
-}
+@layer ds {
+	.ObCutOffPicker-root {
+		display: flex;
+		align-items: center;
+		gap: var(--ds-size-2);
+	}
+
+	.ObCutOffPicker-root > .ds-select,
+	.ObCutOffPicker-root > .ds-field {
+		flex: 0 1 auto;
+	}
+}