@olenbetong/appframe-ds 1.3.5 → 1.3.7

package/src/layout/PageContainer.tsx

@@ -1,41 +1,41 @@
-import "./PageContainer.css";
-
-import clsx from "clsx";
-import type React from "react";
-
-export type PageContainerMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false;
-
-export type PageContainerProps = React.HTMLAttributes<HTMLDivElement> & {
-	fullHeight?: boolean;
-	/**
-	 * Predefined max-width of the content, on the MUI `Container` scale (`xs`/`sm` 36rem,
-	 * `md` 48rem, `lg` 64rem, `xl` 80rem, plus the gutters). The content stays against the
-	 * leading edge, as the MUI-era `PageContainer` did; `Page.Block`/`Container` centre it.
-	 * @default max-width: 100%
-	 */
-	maxWidth?: PageContainerMaxWidth;
-};
-
-const maxWidthClassName: Record<Exclude<PageContainerMaxWidth, false>, string> = {
-	xs: "ObPageContainer-text",
-	sm: "ObPageContainer-text",
-	md: "ObPageContainer-md",
-	lg: "ObPageContainer-lg",
-	xl: "ObPageContainer-xl",
-};
-
-/**
- * @deprecated Use `Page.Block` instead. `maxWidth` mapping: `xs`/`sm` →
- * `width="text"`, `md` → `"md"`, `lg` → `"lg"`, `xl` → `"xl"`, `false` → omit
- * `width`. Replace `fullHeight` with `<Page layout="app">` and
- * `<Page.Block grow overflow="auto">`.
- */
-export function PageContainer({ children, className, fullHeight, maxWidth, ...props }: PageContainerProps) {
-	return (
-		<div className={clsx("ObPageContainer-root", fullHeight && "ObPageContainer-fullHeight")}>
-			<div className={clsx("ObPageContainer-inner", maxWidth && maxWidthClassName[maxWidth], className)} {...props}>
-				{children}
-			</div>
-		</div>
-	);
-}
+import "./PageContainer.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+export type PageContainerMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false;
+
+export type PageContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+	fullHeight?: boolean;
+	/**
+	 * Predefined max-width of the content, on the MUI `Container` scale (`xs`/`sm` 36rem,
+	 * `md` 48rem, `lg` 64rem, `xl` 80rem, plus the gutters). The content stays against the
+	 * leading edge, as the MUI-era `PageContainer` did; `Page.Block`/`Container` centre it.
+	 * @default max-width: 100%
+	 */
+	maxWidth?: PageContainerMaxWidth;
+};
+
+const maxWidthClassName: Record<Exclude<PageContainerMaxWidth, false>, string> = {
+	xs: "ObPageContainer-text",
+	sm: "ObPageContainer-text",
+	md: "ObPageContainer-md",
+	lg: "ObPageContainer-lg",
+	xl: "ObPageContainer-xl",
+};
+
+/**
+ * @deprecated Use `Page.Block` instead. `maxWidth` mapping: `xs`/`sm` →
+ * `width="text"`, `md` → `"md"`, `lg` → `"lg"`, `xl` → `"xl"`, `false` → omit
+ * `width`. Replace `fullHeight` with `<Page layout="app">` and
+ * `<Page.Block grow overflow="auto">`.
+ */
+export function PageContainer({ children, className, fullHeight, maxWidth, ...props }: PageContainerProps) {
+	return (
+		<div className={clsx("ObPageContainer-root", fullHeight && "ObPageContainer-fullHeight")}>
+			<div className={clsx("ObPageContainer-inner", maxWidth && maxWidthClassName[maxWidth], className)} {...props}>
+				{children}
+			</div>
+		</div>
+	);
+}

package/src/layout/ResponsiveDialog.css

@@ -1,86 +1,86 @@
-/*
- * Width-limited on large screens, full-screen below the next MUI breakpoint up:
- * xs (444px) fills below 600px, sm (600px) below 900px, md (900px) below 1200px,
- * lg (1200px) below 1536px, xl (1536px) below 1920px, none always.
- */
-@layer ds {
-	.ObResponsiveDialog-root {
-		width: 100%;
-	}
-
-	.ObResponsiveDialog-root[data-max-width="xs"] {
-		max-width: 444px;
-	}
-	.ObResponsiveDialog-root[data-max-width="sm"] {
-		max-width: 600px;
-	}
-	.ObResponsiveDialog-root[data-max-width="md"] {
-		max-width: 900px;
-	}
-	.ObResponsiveDialog-root[data-max-width="lg"] {
-		max-width: 1200px;
-	}
-	.ObResponsiveDialog-root[data-max-width="xl"] {
-		max-width: 1536px;
-	}
-
-	.ObResponsiveDialog-root[data-max-width="none"] {
-		max-width: none;
-		width: 100vw;
-		height: 100dvh;
-		max-height: none;
-		margin: 0;
-		border-radius: 0;
-	}
-
-	@media (max-width: 599.98px) {
-		.ObResponsiveDialog-root[data-max-width="xs"] {
-			max-width: none;
-			width: 100vw;
-			height: 100dvh;
-			max-height: none;
-			margin: 0;
-			border-radius: 0;
-		}
-	}
-	@media (max-width: 899.98px) {
-		.ObResponsiveDialog-root[data-max-width="sm"] {
-			max-width: none;
-			width: 100vw;
-			height: 100dvh;
-			max-height: none;
-			margin: 0;
-			border-radius: 0;
-		}
-	}
-	@media (max-width: 1199.98px) {
-		.ObResponsiveDialog-root[data-max-width="md"] {
-			max-width: none;
-			width: 100vw;
-			height: 100dvh;
-			max-height: none;
-			margin: 0;
-			border-radius: 0;
-		}
-	}
-	@media (max-width: 1535.98px) {
-		.ObResponsiveDialog-root[data-max-width="lg"] {
-			max-width: none;
-			width: 100vw;
-			height: 100dvh;
-			max-height: none;
-			margin: 0;
-			border-radius: 0;
-		}
-	}
-	@media (max-width: 1919.98px) {
-		.ObResponsiveDialog-root[data-max-width="xl"] {
-			max-width: none;
-			width: 100vw;
-			height: 100dvh;
-			max-height: none;
-			margin: 0;
-			border-radius: 0;
-		}
-	}
-}
+/*
+ * Width-limited on large screens, full-screen below the next MUI breakpoint up:
+ * xs (444px) fills below 600px, sm (600px) below 900px, md (900px) below 1200px,
+ * lg (1200px) below 1536px, xl (1536px) below 1920px, none always.
+ */
+@layer ds {
+	.ObResponsiveDialog-root {
+		width: 100%;
+	}
+
+	.ObResponsiveDialog-root[data-max-width="xs"] {
+		max-width: 444px;
+	}
+	.ObResponsiveDialog-root[data-max-width="sm"] {
+		max-width: 600px;
+	}
+	.ObResponsiveDialog-root[data-max-width="md"] {
+		max-width: 900px;
+	}
+	.ObResponsiveDialog-root[data-max-width="lg"] {
+		max-width: 1200px;
+	}
+	.ObResponsiveDialog-root[data-max-width="xl"] {
+		max-width: 1536px;
+	}
+
+	.ObResponsiveDialog-root[data-max-width="none"] {
+		max-width: none;
+		width: 100vw;
+		height: 100dvh;
+		max-height: none;
+		margin: 0;
+		border-radius: 0;
+	}
+
+	@media (max-width: 599.98px) {
+		.ObResponsiveDialog-root[data-max-width="xs"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+	@media (max-width: 899.98px) {
+		.ObResponsiveDialog-root[data-max-width="sm"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+	@media (max-width: 1199.98px) {
+		.ObResponsiveDialog-root[data-max-width="md"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+	@media (max-width: 1535.98px) {
+		.ObResponsiveDialog-root[data-max-width="lg"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+	@media (max-width: 1919.98px) {
+		.ObResponsiveDialog-root[data-max-width="xl"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+}

package/src/layout/ResponsiveDialog.tsx

@@ -1,55 +1,55 @@
-import "./ResponsiveDialog.css";
-
-import { Dialog, type DialogProps, Heading } from "@digdir/designsystemet-react";
-import clsx from "clsx";
-
-export type ResponsiveDialogMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false;
-
-export type ResponsiveDialogProps = Omit<DialogProps, "title" | "open" | "onClose"> & {
-	open: boolean;
-	onClose?: () => void;
-	title?: React.ReactNode;
-	/**
-	 * Width of the dialog on screens wide enough for it, in MUI's breakpoint names (`sm` is
-	 * 600px, `md` 900px, `lg` 1200px, `xl` 1536px). Below the next breakpoint up the dialog
-	 * fills the screen. `false` fills the screen always.
-	 */
-	maxWidth?: ResponsiveDialogMaxWidth;
-};
-
-/**
- * A Designsystemet `Dialog` that is a centred, width-limited dialog on large screens and
- * full-screen on small ones - the MUI `Dialog fullScreen` behaviour, decided by CSS media
- * queries rather than a hook. The title goes in the first `Dialog.Block` with the dialog's own
- * close button; put the content and actions in further `Dialog.Block`s.
- *
- * Equivalent of `ResponsiveDialog` in `@olenbetong/appframe-mui`. `onClose` takes no
- * arguments: the dialog closes on the close button, the backdrop and Escape alike.
- */
-export function ResponsiveDialog({
-	children,
-	className,
-	maxWidth = "sm",
-	onClose,
-	open,
-	title,
-	...props
-}: ResponsiveDialogProps) {
-	return (
-		<Dialog
-			closedby="any"
-			{...props}
-			open={open}
-			onClose={onClose}
-			className={clsx("ObResponsiveDialog-root", className)}
-			data-max-width={maxWidth === false ? "none" : maxWidth}
-		>
-			{title && (
-				<Dialog.Block>
-					<Heading data-size="xs">{title}</Heading>
-				</Dialog.Block>
-			)}
-			{children}
-		</Dialog>
-	);
-}
+import "./ResponsiveDialog.css";
+
+import { Dialog, type DialogProps, Heading } from "@digdir/designsystemet-react";
+import clsx from "clsx";
+
+export type ResponsiveDialogMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false;
+
+export type ResponsiveDialogProps = Omit<DialogProps, "title" | "open" | "onClose"> & {
+	open: boolean;
+	onClose?: () => void;
+	title?: React.ReactNode;
+	/**
+	 * Width of the dialog on screens wide enough for it, in MUI's breakpoint names (`sm` is
+	 * 600px, `md` 900px, `lg` 1200px, `xl` 1536px). Below the next breakpoint up the dialog
+	 * fills the screen. `false` fills the screen always.
+	 */
+	maxWidth?: ResponsiveDialogMaxWidth;
+};
+
+/**
+ * A Designsystemet `Dialog` that is a centred, width-limited dialog on large screens and
+ * full-screen on small ones - the MUI `Dialog fullScreen` behaviour, decided by CSS media
+ * queries rather than a hook. The title goes in the first `Dialog.Block` with the dialog's own
+ * close button; put the content and actions in further `Dialog.Block`s.
+ *
+ * Equivalent of `ResponsiveDialog` in `@olenbetong/appframe-mui`. `onClose` takes no
+ * arguments: the dialog closes on the close button, the backdrop and Escape alike.
+ */
+export function ResponsiveDialog({
+	children,
+	className,
+	maxWidth = "sm",
+	onClose,
+	open,
+	title,
+	...props
+}: ResponsiveDialogProps) {
+	return (
+		<Dialog
+			closedby="any"
+			{...props}
+			open={open}
+			onClose={onClose}
+			className={clsx("ObResponsiveDialog-root", className)}
+			data-max-width={maxWidth === false ? "none" : maxWidth}
+		>
+			{title && (
+				<Dialog.Block>
+					<Heading data-size="xs">{title}</Heading>
+				</Dialog.Block>
+			)}
+			{children}
+		</Dialog>
+	);
+}

package/src/layout/index.tsx

@@ -1,69 +1,69 @@
-import "./index.css";
-
-import { useEffect, useState } from "react";
-import type React from "react";
-
-import { AppLayoutDesktop } from "./AppLayoutDesktop.js";
-import { AppLayoutMobile } from "./AppLayoutMobile.js";
-import type { AppMenuProps } from "./AppMenu.js";
-
-export type AppLayoutProps = {
-	AppMenuProps?: AppMenuProps;
-	children: React.ReactNode | React.ReactNode[];
-	menu?: React.ReactNode | React.ReactNode[];
-	/**
-	 * @deprecated The toolbar is now server-rendered. This prop has no effect.
-	 */
-	toolbar?: React.ReactNode | React.ReactNode[];
-	/**
-	 * @deprecated The title is now rendered in the server-rendered toolbar. This prop has no effect.
-	 */
-	title?: React.ReactNode;
-	/**
-	 * @deprecated The toolbar is now server-rendered. This prop has no effect.
-	 */
-	enableMenuToggle?: boolean;
-	/**
-	 * Enable partner mode (for partner.olenbetong.no applications).
-	 * Adds a toggle button to the existing partner header instead of the app bar.
-	 */
-	partner?: boolean;
-};
-
-function useIsMobile() {
-	let [isMobile, setIsMobile] = useState(() => {
-		if (typeof window === "undefined") return false;
-		return window.matchMedia("(max-width: 1199px)").matches;
-	});
-
-	useEffect(() => {
-		let mq = window.matchMedia("(max-width: 1199px)");
-		let handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
-		mq.addEventListener("change", handler);
-		return () => mq.removeEventListener("change", handler);
-	}, []);
-
-	return isMobile;
-}
-
-export * from "./AppMenu.js";
-export * from "./AppMenuDrawer.js";
-export * from "./AppMenuItem.js";
-export * from "./AppMenuSubheader.js";
-export * from "./constants.js";
-export * from "./ErrorBoundary.js";
-export * from "./PageContainer.js";
-export * from "./ResponsiveDialog.js";
-export * from "./PartnerToggle.js";
-
-/**
- * @deprecated Use the `Page` primitives instead (`Page`, `Page.Header`,
- * `Page.Block`). `<AppLayout menu={...} title={...}>` becomes
- * `<Page layout="app"><Page.Header title={...} menu={...} />...</Page>`.
- */
-export function AppLayout(props: AppLayoutProps) {
-	let isSmall = useIsMobile();
-	let Component = isSmall ? AppLayoutMobile : AppLayoutDesktop;
-
-	return <Component {...props} />;
-}
+import "./index.css";
+
+import { useEffect, useState } from "react";
+import type React from "react";
+
+import { AppLayoutDesktop } from "./AppLayoutDesktop.js";
+import { AppLayoutMobile } from "./AppLayoutMobile.js";
+import type { AppMenuProps } from "./AppMenu.js";
+
+export type AppLayoutProps = {
+	AppMenuProps?: AppMenuProps;
+	children: React.ReactNode | React.ReactNode[];
+	menu?: React.ReactNode | React.ReactNode[];
+	/**
+	 * @deprecated The toolbar is now server-rendered. This prop has no effect.
+	 */
+	toolbar?: React.ReactNode | React.ReactNode[];
+	/**
+	 * @deprecated The title is now rendered in the server-rendered toolbar. This prop has no effect.
+	 */
+	title?: React.ReactNode;
+	/**
+	 * @deprecated The toolbar is now server-rendered. This prop has no effect.
+	 */
+	enableMenuToggle?: boolean;
+	/**
+	 * Enable partner mode (for partner.olenbetong.no applications).
+	 * Adds a toggle button to the existing partner header instead of the app bar.
+	 */
+	partner?: boolean;
+};
+
+function useIsMobile() {
+	let [isMobile, setIsMobile] = useState(() => {
+		if (typeof window === "undefined") return false;
+		return window.matchMedia("(max-width: 1199px)").matches;
+	});
+
+	useEffect(() => {
+		let mq = window.matchMedia("(max-width: 1199px)");
+		let handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, []);
+
+	return isMobile;
+}
+
+export * from "./AppMenu.js";
+export * from "./AppMenuDrawer.js";
+export * from "./AppMenuItem.js";
+export * from "./AppMenuSubheader.js";
+export * from "./constants.js";
+export * from "./ErrorBoundary.js";
+export * from "./PageContainer.js";
+export * from "./ResponsiveDialog.js";
+export * from "./PartnerToggle.js";
+
+/**
+ * @deprecated Use the `Page` primitives instead (`Page`, `Page.Header`,
+ * `Page.Block`). `<AppLayout menu={...} title={...}>` becomes
+ * `<Page layout="app"><Page.Header title={...} menu={...} />...</Page>`.
+ */
+export function AppLayout(props: AppLayoutProps) {
+	let isSmall = useIsMobile();
+	let Component = isSmall ? AppLayoutMobile : AppLayoutDesktop;
+
+	return <Component {...props} />;
+}

package/src/link/Link.tsx

@@ -1,23 +1,23 @@
-import { Link as DsLink, type LinkProps as DsLinkProps } from "@digdir/designsystemet-react";
-import { forwardRef } from "react";
-import { Link as RouterLink, type LinkProps as RouterLinkProps } from "react-router";
-
-export type LinkProps = Omit<DsLinkProps, "href" | "asChild"> &
-	Omit<RouterLinkProps, "to" | "children"> & {
-		/** The in-app path, resolved by react-router. */
-		href: string;
-	};
-
-/**
- * A Designsystemet `Link` that navigates with react-router: `href` is the route, the
- * navigation is a view transition. Equivalent of `Link` in `@olenbetong/appframe-mui`.
- */
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link({ href, children, ...props }, ref) {
-	return (
-		<DsLink asChild>
-			<RouterLink viewTransition to={href} {...props} ref={ref}>
-				{children}
-			</RouterLink>
-		</DsLink>
-	);
-});
+import { Link as DsLink, type LinkProps as DsLinkProps } from "@digdir/designsystemet-react";
+import { forwardRef } from "react";
+import { Link as RouterLink, type LinkProps as RouterLinkProps } from "react-router";
+
+export type LinkProps = Omit<DsLinkProps, "href" | "asChild"> &
+	Omit<RouterLinkProps, "to" | "children"> & {
+		/** The in-app path, resolved by react-router. */
+		href: string;
+	};
+
+/**
+ * A Designsystemet `Link` that navigates with react-router: `href` is the route, the
+ * navigation is a view transition. Equivalent of `Link` in `@olenbetong/appframe-mui`.
+ */
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link({ href, children, ...props }, ref) {
+	return (
+		<DsLink asChild>
+			<RouterLink viewTransition to={href} {...props} ref={ref}>
+				{children}
+			</RouterLink>
+		</DsLink>
+	);
+});

package/src/link/index.ts

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