@olenbetong/appframe-ds 1.2.0 → 1.3.0

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/container/Container.tsx

@@ -1,49 +1,49 @@
-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, using the same scale as MUI `Container`. Content is
-	 * horizontally centered.
-	 *
-	 * - `xs`/`sm`: 36rem (576px) — recommended line-length for running text
-	 * - `md`: 48rem (768px)
-	 * - `lg`: 64rem (1024px)
-	 * - `xl`: 80rem (1280px)
-	 * - `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, using the same scale as MUI `Container`. Content is
+	 * horizontally centered.
+	 *
+	 * - `xs`/`sm`: 36rem (576px) — recommended line-length for running text
+	 * - `md`: 48rem (768px)
+	 * - `lg`: 64rem (1024px)
+	 * - `xl`: 80rem (1280px)
+	 * - `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;
+	}
+}

package/src/cutoff/CutOffPicker.tsx

@@ -1,165 +1,165 @@
-import "./CutOffPicker.css";
-
-import { Select, Textfield } from "@digdir/designsystemet-react";
-import clsx from "clsx";
-import type { Temporal } from "temporal-polyfill";
-
-import { getLocalizedString } from "../i18n.js";
-import { useCutOff } from "./context.js";
-import { type PeriodType, plainDateToCutOff } from "./utils.js";
-
-export type CutOffPickerProps = {
-	className?: string;
-	disabled?: boolean;
-	/** Period types left out of the type select. */
-	disabledTypes?: PeriodType[];
-	max?: Temporal.PlainDate | string;
-	min?: Temporal.PlainDate | string;
-	/** Designsystemet size of both fields. */
-	"data-size"?: "sm" | "md" | "lg";
-	/**
-	 * Do not sync the `co` and `period` search parameters with the selection - for a form that
-	 * submits the period itself.
-	 */
-	disableSearchParams?: boolean;
-};
-
-function cutOffTypes(): [PeriodType, string][] {
-	return [
-		["AllDates", getLocalizedString("Day")],
-		["WS", getLocalizedString("Week")],
-		["MLD", getLocalizedString("Month")],
-		["MLS", `${getLocalizedString("Month")} (${getLocalizedString("Last sunday")})`],
-		["QLD", getLocalizedString("Quarter")],
-		["QLS", `${getLocalizedString("Quarter")} (${getLocalizedString("Last sunday")})`],
-		["YLD", getLocalizedString("Year")],
-	];
-}
-
-export function getCutOffTypes(disabledTypes: PeriodType[]): [PeriodType, string][] {
-	return cutOffTypes().filter((co) => !disabledTypes.includes(co[0]));
-}
-
-/**
- * Picks the app's cut-off period: a select for the period type (day, week, month, quarter,
- * year) and a field for the period itself, native date/week/month inputs where the browser
- * has them and a select for quarters and years. Reads and writes the period through
- * {@link useCutOff}, so it needs a `CutOffProvider` above it.
- */
-export function CutOffPicker({
-	className,
-	max,
-	min,
-	disabled,
-	disabledTypes,
-	"data-size": size,
-	disableSearchParams = false,
-}: CutOffPickerProps) {
-	let { cutOffType, periods, setPeriod, setCutOffType } = useCutOff({ disableSearchParams });
-
-	function handlePeriodChanged(evt: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
-		if (evt.target.value) {
-			setPeriod(cutOffType, evt.target.value);
-		}
-	}
-
-	let thisYear = new Date().getFullYear();
-	let quarters = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-		.flatMap((dy) => [4, 3, 2, 1].map((q) => `${thisYear - dy}-Q${q}`))
-		.filter((period) => {
-			if (max && period > plainDateToCutOff(max, "QLD")) return false;
-			if (min && period < plainDateToCutOff(min, "QLD")) return false;
-			return true;
-		});
-	let years = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-		.map((dy) => thisYear - dy)
-		.filter((year) => {
-			if (max && year > Number(plainDateToCutOff(max, "YLD"))) return false;
-			if (min && year < Number(plainDateToCutOff(min, "YLD"))) return false;
-			return true;
-		});
-
-	return (
-		<div className={clsx("ObCutOffPicker-root", className)} data-size={size}>
-			<Select
-				name="co"
-				aria-label={getLocalizedString("Period type")}
-				value={cutOffType}
-				onChange={(evt) => setCutOffType(evt.target.value as PeriodType)}
-				disabled={disabled}
-			>
-				{getCutOffTypes(disabledTypes ?? []).map(([type, label]) => (
-					<Select.Option value={type} key={type}>
-						{label}
-					</Select.Option>
-				))}
-			</Select>
-			{cutOffType === "AllDates" && (
-				<Textfield
-					name="period"
-					aria-label={getLocalizedString("Day")}
-					type="date"
-					value={periods.AllDates}
-					onChange={handlePeriodChanged}
-					disabled={disabled}
-					max={max ? plainDateToCutOff(max, "AllDates") : undefined}
-					min={min ? plainDateToCutOff(min, "AllDates") : undefined}
-				/>
-			)}
-			{cutOffType === "WS" && (
-				<Textfield
-					name="period"
-					aria-label={getLocalizedString("Week")}
-					type="week"
-					value={periods.WS.indexOf("W") === -1 ? periods.WS.replace("-", "-W") : periods.WS}
-					onChange={handlePeriodChanged}
-					disabled={disabled}
-					max={max ? plainDateToCutOff(max, "WS") : undefined}
-					min={min ? plainDateToCutOff(min, "WS") : undefined}
-				/>
-			)}
-			{(cutOffType === "MLD" || cutOffType === "MLS") && (
-				<Textfield
-					name="period"
-					aria-label={getLocalizedString("Month")}
-					type="month"
-					value={periods.MLD}
-					onChange={handlePeriodChanged}
-					disabled={disabled}
-					max={max ? plainDateToCutOff(max, "MLD") : undefined}
-					min={min ? plainDateToCutOff(min, "MLD") : undefined}
-				/>
-			)}
-			{(cutOffType === "QLD" || cutOffType === "QLS") && (
-				<Select
-					name="period"
-					aria-label={getLocalizedString("Quarter")}
-					value={periods.QLD}
-					onChange={handlePeriodChanged}
-					disabled={disabled}
-				>
-					{quarters.map((quarter) => (
-						<Select.Option key={quarter} value={quarter}>
-							{quarter}
-						</Select.Option>
-					))}
-				</Select>
-			)}
-			{cutOffType === "YLD" && (
-				<Select
-					name="period"
-					aria-label={getLocalizedString("Year")}
-					value={periods.YLD}
-					onChange={handlePeriodChanged}
-					disabled={disabled}
-				>
-					{years.map((year) => (
-						<Select.Option key={year} value={String(year)}>
-							{year}
-						</Select.Option>
-					))}
-				</Select>
-			)}
-		</div>
-	);
-}
+import "./CutOffPicker.css";
+
+import { Select, Textfield } from "@digdir/designsystemet-react";
+import clsx from "clsx";
+import type { Temporal } from "temporal-polyfill";
+
+import { getLocalizedString } from "../i18n.js";
+import { useCutOff } from "./context.js";
+import { type PeriodType, plainDateToCutOff } from "./utils.js";
+
+export type CutOffPickerProps = {
+	className?: string;
+	disabled?: boolean;
+	/** Period types left out of the type select. */
+	disabledTypes?: PeriodType[];
+	max?: Temporal.PlainDate | string;
+	min?: Temporal.PlainDate | string;
+	/** Designsystemet size of both fields. */
+	"data-size"?: "sm" | "md" | "lg";
+	/**
+	 * Do not sync the `co` and `period` search parameters with the selection - for a form that
+	 * submits the period itself.
+	 */
+	disableSearchParams?: boolean;
+};
+
+function cutOffTypes(): [PeriodType, string][] {
+	return [
+		["AllDates", getLocalizedString("Day")],
+		["WS", getLocalizedString("Week")],
+		["MLD", getLocalizedString("Month")],
+		["MLS", `${getLocalizedString("Month")} (${getLocalizedString("Last sunday")})`],
+		["QLD", getLocalizedString("Quarter")],
+		["QLS", `${getLocalizedString("Quarter")} (${getLocalizedString("Last sunday")})`],
+		["YLD", getLocalizedString("Year")],
+	];
+}
+
+export function getCutOffTypes(disabledTypes: PeriodType[]): [PeriodType, string][] {
+	return cutOffTypes().filter((co) => !disabledTypes.includes(co[0]));
+}
+
+/**
+ * Picks the app's cut-off period: a select for the period type (day, week, month, quarter,
+ * year) and a field for the period itself, native date/week/month inputs where the browser
+ * has them and a select for quarters and years. Reads and writes the period through
+ * {@link useCutOff}, so it needs a `CutOffProvider` above it.
+ */
+export function CutOffPicker({
+	className,
+	max,
+	min,
+	disabled,
+	disabledTypes,
+	"data-size": size,
+	disableSearchParams = false,
+}: CutOffPickerProps) {
+	let { cutOffType, periods, setPeriod, setCutOffType } = useCutOff({ disableSearchParams });
+
+	function handlePeriodChanged(evt: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
+		if (evt.target.value) {
+			setPeriod(cutOffType, evt.target.value);
+		}
+	}
+
+	let thisYear = new Date().getFullYear();
+	let quarters = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+		.flatMap((dy) => [4, 3, 2, 1].map((q) => `${thisYear - dy}-Q${q}`))
+		.filter((period) => {
+			if (max && period > plainDateToCutOff(max, "QLD")) return false;
+			if (min && period < plainDateToCutOff(min, "QLD")) return false;
+			return true;
+		});
+	let years = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+		.map((dy) => thisYear - dy)
+		.filter((year) => {
+			if (max && year > Number(plainDateToCutOff(max, "YLD"))) return false;
+			if (min && year < Number(plainDateToCutOff(min, "YLD"))) return false;
+			return true;
+		});
+
+	return (
+		<div className={clsx("ObCutOffPicker-root", className)} data-size={size}>
+			<Select
+				name="co"
+				aria-label={getLocalizedString("Period type")}
+				value={cutOffType}
+				onChange={(evt) => setCutOffType(evt.target.value as PeriodType)}
+				disabled={disabled}
+			>
+				{getCutOffTypes(disabledTypes ?? []).map(([type, label]) => (
+					<Select.Option value={type} key={type}>
+						{label}
+					</Select.Option>
+				))}
+			</Select>
+			{cutOffType === "AllDates" && (
+				<Textfield
+					name="period"
+					aria-label={getLocalizedString("Day")}
+					type="date"
+					value={periods.AllDates}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+					max={max ? plainDateToCutOff(max, "AllDates") : undefined}
+					min={min ? plainDateToCutOff(min, "AllDates") : undefined}
+				/>
+			)}
+			{cutOffType === "WS" && (
+				<Textfield
+					name="period"
+					aria-label={getLocalizedString("Week")}
+					type="week"
+					value={periods.WS.indexOf("W") === -1 ? periods.WS.replace("-", "-W") : periods.WS}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+					max={max ? plainDateToCutOff(max, "WS") : undefined}
+					min={min ? plainDateToCutOff(min, "WS") : undefined}
+				/>
+			)}
+			{(cutOffType === "MLD" || cutOffType === "MLS") && (
+				<Textfield
+					name="period"
+					aria-label={getLocalizedString("Month")}
+					type="month"
+					value={periods.MLD}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+					max={max ? plainDateToCutOff(max, "MLD") : undefined}
+					min={min ? plainDateToCutOff(min, "MLD") : undefined}
+				/>
+			)}
+			{(cutOffType === "QLD" || cutOffType === "QLS") && (
+				<Select
+					name="period"
+					aria-label={getLocalizedString("Quarter")}
+					value={periods.QLD}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+				>
+					{quarters.map((quarter) => (
+						<Select.Option key={quarter} value={quarter}>
+							{quarter}
+						</Select.Option>
+					))}
+				</Select>
+			)}
+			{cutOffType === "YLD" && (
+				<Select
+					name="period"
+					aria-label={getLocalizedString("Year")}
+					value={periods.YLD}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+				>
+					{years.map((year) => (
+						<Select.Option key={year} value={String(year)}>
+							{year}
+						</Select.Option>
+					))}
+				</Select>
+			)}
+		</div>
+	);
+}