@olenbetong/appframe-ds 1.3.6 → 1.3.8

package/src/grid/slots/slots.css

@@ -1,64 +1,64 @@
-.AfGrid-checkbox {
-	display: inline-flex;
-	align-items: center;
-}
-
-.AfGrid-checkbox input {
-	cursor: pointer;
-}
-
-.AfGrid-textField,
-.AfGrid-select {
-	width: 100%;
-}
-
-/* Sort-order and filter-count badges on header icon buttons: a compact number
-   pinned to the button corner instead of Designsystemet's default 1.5rem badge. */
-.AfGrid-badge .ds-badge {
-	--dsc-badge-size--count: var(--ds-size-4, 1rem);
-	--dsc-badge-padding: 0 var(--ds-size-1, 0.25rem);
-
-	/* Pull the badge down from the default 14% so its top edge stays inside the
-	   header row instead of being cropped. */
-	--dsc-badge-top: 32%;
-}
-
-.AfGrid-badge .ds-badge::before {
-	font-size: var(--ds-font-size-1, 0.75rem);
-	line-height: 1;
-}
-
-.AfGrid-linearProgress {
-	position: relative;
-	width: 100%;
-	height: 4px;
-	overflow: hidden;
-	background: var(--ds-color-neutral-surface-tinted, rgb(0 0 0 / 10%));
-}
-
-.AfGrid-linearProgress::after {
-	position: absolute;
-	inset-block: 0;
-	inline-size: 40%;
-	background: var(--ds-color-brand-base-default, currentcolor);
-	animation: AfGrid-linearProgress 1.2s ease-in-out infinite;
-	content: "";
-}
-
-@keyframes AfGrid-linearProgress {
-	0% {
-		inset-inline-start: -40%;
-	}
-
-	100% {
-		inset-inline-start: 100%;
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.AfGrid-linearProgress::after {
-		animation: none;
-		inset-inline-start: 0;
-		inline-size: 100%;
-	}
-}
+.AfGrid-checkbox {
+	display: inline-flex;
+	align-items: center;
+}
+
+.AfGrid-checkbox input {
+	cursor: pointer;
+}
+
+.AfGrid-textField,
+.AfGrid-select {
+	width: 100%;
+}
+
+/* Sort-order and filter-count badges on header icon buttons: a compact number
+   pinned to the button corner instead of Designsystemet's default 1.5rem badge. */
+.AfGrid-badge .ds-badge {
+	--dsc-badge-size--count: var(--ds-size-4, 1rem);
+	--dsc-badge-padding: 0 var(--ds-size-1, 0.25rem);
+
+	/* Pull the badge down from the default 14% so its top edge stays inside the
+	   header row instead of being cropped. */
+	--dsc-badge-top: 32%;
+}
+
+.AfGrid-badge .ds-badge::before {
+	font-size: var(--ds-font-size-1, 0.75rem);
+	line-height: 1;
+}
+
+.AfGrid-linearProgress {
+	position: relative;
+	width: 100%;
+	height: 4px;
+	overflow: hidden;
+	background: var(--ds-color-neutral-surface-tinted, rgb(0 0 0 / 10%));
+}
+
+.AfGrid-linearProgress::after {
+	position: absolute;
+	inset-block: 0;
+	inline-size: 40%;
+	background: var(--ds-color-brand-base-default, currentcolor);
+	animation: AfGrid-linearProgress 1.2s ease-in-out infinite;
+	content: "";
+}
+
+@keyframes AfGrid-linearProgress {
+	0% {
+		inset-inline-start: -40%;
+	}
+
+	100% {
+		inset-inline-start: 100%;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.AfGrid-linearProgress::after {
+		animation: none;
+		inset-inline-start: 0;
+		inline-size: 100%;
+	}
+}

package/src/grid/slots/slots.test.tsx

@@ -1,39 +1,39 @@
-import { render } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import { dsBaseSlots } from "./index.js";
-
-const BaseSkeleton = dsBaseSlots.baseSkeleton as React.ComponentType<Record<string, unknown>>;
-
-describe("baseSkeleton", () => {
-	afterEach(() => {
-		vi.restoreAllMocks();
-	});
-
-	it("renders Designsystemet's skeleton markup", () => {
-		let { container } = render(<BaseSkeleton variant="rectangular" width={80} height={12} />);
-		let skeleton = container.firstElementChild as HTMLElement;
-
-		expect(skeleton).toHaveClass("ds-skeleton");
-		expect(skeleton).toHaveAttribute("data-variant", "rectangular");
-		expect(skeleton).toHaveAttribute("aria-hidden", "true");
-		expect(skeleton.style.width).toBe("80px");
-	});
-
-	it("does not scan the page's animations when many mount at once", () => {
-		// The loading overlay mounts one skeleton per visible cell. Designsystemet's
-		// Skeleton calls document.getAnimations() for each, which froze the page.
-		let getAnimations = vi.fn(() => []);
-		Object.defineProperty(document, "getAnimations", { value: getAnimations, configurable: true });
-
-		render(
-			<>
-				{Array.from({ length: 200 }, (_, index) => (
-					<BaseSkeleton key={index} variant="text" width={10} />
-				))}
-			</>,
-		);
-
-		expect(getAnimations).not.toHaveBeenCalled();
-	});
-});
+import { render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { dsBaseSlots } from "./index.js";
+
+const BaseSkeleton = dsBaseSlots.baseSkeleton as React.ComponentType<Record<string, unknown>>;
+
+describe("baseSkeleton", () => {
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	it("renders Designsystemet's skeleton markup", () => {
+		let { container } = render(<BaseSkeleton variant="rectangular" width={80} height={12} />);
+		let skeleton = container.firstElementChild as HTMLElement;
+
+		expect(skeleton).toHaveClass("ds-skeleton");
+		expect(skeleton).toHaveAttribute("data-variant", "rectangular");
+		expect(skeleton).toHaveAttribute("aria-hidden", "true");
+		expect(skeleton.style.width).toBe("80px");
+	});
+
+	it("does not scan the page's animations when many mount at once", () => {
+		// The loading overlay mounts one skeleton per visible cell. Designsystemet's
+		// Skeleton calls document.getAnimations() for each, which froze the page.
+		let getAnimations = vi.fn(() => []);
+		Object.defineProperty(document, "getAnimations", { value: getAnimations, configurable: true });
+
+		render(
+			<>
+				{Array.from({ length: 200 }, (_, index) => (
+					<BaseSkeleton key={index} variant="text" width={10} />
+				))}
+			</>,
+		);
+
+		expect(getAnimations).not.toHaveBeenCalled();
+	});
+});

package/src/grid/theme.tsx

@@ -1,138 +1,138 @@
-import { StyledEngineProvider, type Theme, ThemeProvider } from "@mui/material";
-import { createTheme as muiCreateTheme } from "@mui/material/styles";
-import { createContext, type ReactNode, use, useEffect, useState } from "react";
-
-import { useDsColorScheme } from "../theme/useDsColorScheme.js";
-
-// Lives in `../theme/` so MUI-free areas (the `mdi` subpath) can share it.
-export { useDsColorScheme };
-
-function buildTheme(mode: "light" | "dark", element?: Element | null) {
-	let styles = getComputedStyle(element ?? document.body);
-	let get = (variable: string) => styles.getPropertyValue(variable).trim();
-	let isDark = mode === "dark";
-
-	return muiCreateTheme({
-		palette: {
-			mode,
-			primary: {
-				main: get("--ds-color-brand-base-default") || "#116069",
-				dark: get("--ds-color-brand-base-hover") || "#0d4b52",
-				contrastText: get("--ds-color-brand-base-contrast-default") || "#ffffff",
-			},
-			secondary: {
-				main: get("--ds-color-brand-light-base-default") || "#1a95a2",
-			},
-			error: {
-				main: get("--ds-color-danger-base-default") || (isDark ? "#ff8a80" : "#b3221a"),
-			},
-			warning: {
-				main: get("--ds-color-warning-base-default") || "#b8860b",
-			},
-			success: {
-				main: get("--ds-color-success-base-default") || "#2e7d32",
-			},
-			background: {
-				default: get("--ds-color-neutral-background-default") || (isDark ? "#17181a" : "#ffffff"),
-				paper: get("--ds-color-neutral-background-default") || (isDark ? "#17181a" : "#ffffff"),
-			},
-			text: {
-				primary: get("--ds-color-neutral-text-default") || (isDark ? "#e5e6e7" : "#292c30"),
-				secondary: get("--ds-color-neutral-text-subtle") || (isDark ? "#b3b5b7" : "#5b5f64"),
-			},
-			divider: get("--ds-color-neutral-border-subtle") || (isDark ? "#4e5052" : "#bbbcbd"),
-		},
-		typography: {
-			fontFamily: "var(--ds-font-family, inherit)",
-		},
-		components: {
-			MuiButton: {
-				styleOverrides: {
-					root: { borderRadius: "var(--ds-border-radius-md, 2px)" },
-				},
-			},
-			MuiFormLabel: {
-				styleOverrides: {
-					root: { color: get("--ds-color-neutral-text-subtle") || "rgba(0, 0, 0, 0.72)" },
-				},
-			},
-		},
-	});
-}
-
-const themeCache: Partial<Record<"light" | "dark", Theme>> = {};
-
-/**
- * Returns the MUI theme built from the Designsystemet tokens currently in
- * effect. Pass `element` to read the tokens from a specific place in the DOM,
- * which matters when the color scheme is scoped to a subtree. The theme is
- * cached per color scheme at module level, so every grid on the page shares a
- * single theme instance.
- */
-export function getDsMuiTheme(mode: "light" | "dark", element?: Element | null) {
-	let theme = themeCache[mode];
-
-	if (!theme) {
-		theme = buildTheme(mode, element);
-		themeCache[mode] = theme;
-	}
-
-	return theme;
-}
-
-/**
- * Drops the cached themes, so they are rebuilt from the current token values the
- * next time a grid renders. Only needed if the tokens themselves change at
- * runtime (a brand switch, for example) — a color scheme change is handled by
- * the per-scheme cache.
- */
-export function resetDsMuiTheme() {
-	delete themeCache.light;
-	delete themeCache.dark;
-}
-
-const ThemeProvidedContext = createContext(false);
-
-export type AfGridThemeProviderProps = {
-	children: ReactNode;
-};
-
-/**
- * Bridges Designsystemet's colour tokens into a MUI theme, so the data grid
- * follows Designsystemet instead of the MUI defaults.
- *
- * `AfGrid` renders this itself, so apps only need it when they render other MUI
- * components alongside the grid, or want a single provider for many grids.
- * Nesting it is safe: the inner provider is a no-op.
- */
-export function AfGridThemeProvider({ children }: AfGridThemeProviderProps) {
-	let provided = use(ThemeProvidedContext);
-
-	// A display-less probe so the scheme and the tokens are read from this
-	// provider's position in the DOM rather than from `<body>`. Custom properties
-	// still resolve on a hidden element, and it takes part in no layout.
-	let [anchor, setAnchor] = useState<HTMLSpanElement | null>(null);
-	let colorScheme = useDsColorScheme(anchor);
-
-	// The stylesheets are imported from JS, so the custom properties aren't
-	// necessarily resolved during the first render. Rebuild after mount, and
-	// whenever the color scheme changes.
-	let [theme, setTheme] = useState(() => getDsMuiTheme(colorScheme, anchor));
-	useEffect(() => {
-		resetDsMuiTheme();
-		setTheme(getDsMuiTheme(colorScheme, anchor));
-	}, [colorScheme, anchor]);
-
-	if (provided) {
-		return children;
-	}
-
-	return (
-		<ThemeProvidedContext value={true}>
-			<span hidden ref={setAnchor} />
-			<StyledEngineProvider injectFirst>
-				<ThemeProvider theme={theme}>{children}</ThemeProvider>
-			</StyledEngineProvider>
-		</ThemeProvidedContext>
-	);
-}
+import { StyledEngineProvider, type Theme, ThemeProvider } from "@mui/material";
+import { createTheme as muiCreateTheme } from "@mui/material/styles";
+import { createContext, type ReactNode, use, useEffect, useState } from "react";
+
+import { useDsColorScheme } from "../theme/useDsColorScheme.js";
+
+// Lives in `../theme/` so MUI-free areas (the `mdi` subpath) can share it.
+export { useDsColorScheme };
+
+function buildTheme(mode: "light" | "dark", element?: Element | null) {
+	let styles = getComputedStyle(element ?? document.body);
+	let get = (variable: string) => styles.getPropertyValue(variable).trim();
+	let isDark = mode === "dark";
+
+	return muiCreateTheme({
+		palette: {
+			mode,
+			primary: {
+				main: get("--ds-color-brand-base-default") || "#116069",
+				dark: get("--ds-color-brand-base-hover") || "#0d4b52",
+				contrastText: get("--ds-color-brand-base-contrast-default") || "#ffffff",
+			},
+			secondary: {
+				main: get("--ds-color-brand-light-base-default") || "#1a95a2",
+			},
+			error: {
+				main: get("--ds-color-danger-base-default") || (isDark ? "#ff8a80" : "#b3221a"),
+			},
+			warning: {
+				main: get("--ds-color-warning-base-default") || "#b8860b",
+			},
+			success: {
+				main: get("--ds-color-success-base-default") || "#2e7d32",
+			},
+			background: {
+				default: get("--ds-color-neutral-background-default") || (isDark ? "#17181a" : "#ffffff"),
+				paper: get("--ds-color-neutral-background-default") || (isDark ? "#17181a" : "#ffffff"),
+			},
+			text: {
+				primary: get("--ds-color-neutral-text-default") || (isDark ? "#e5e6e7" : "#292c30"),
+				secondary: get("--ds-color-neutral-text-subtle") || (isDark ? "#b3b5b7" : "#5b5f64"),
+			},
+			divider: get("--ds-color-neutral-border-subtle") || (isDark ? "#4e5052" : "#bbbcbd"),
+		},
+		typography: {
+			fontFamily: "var(--ds-font-family, inherit)",
+		},
+		components: {
+			MuiButton: {
+				styleOverrides: {
+					root: { borderRadius: "var(--ds-border-radius-md, 2px)" },
+				},
+			},
+			MuiFormLabel: {
+				styleOverrides: {
+					root: { color: get("--ds-color-neutral-text-subtle") || "rgba(0, 0, 0, 0.72)" },
+				},
+			},
+		},
+	});
+}
+
+const themeCache: Partial<Record<"light" | "dark", Theme>> = {};
+
+/**
+ * Returns the MUI theme built from the Designsystemet tokens currently in
+ * effect. Pass `element` to read the tokens from a specific place in the DOM,
+ * which matters when the color scheme is scoped to a subtree. The theme is
+ * cached per color scheme at module level, so every grid on the page shares a
+ * single theme instance.
+ */
+export function getDsMuiTheme(mode: "light" | "dark", element?: Element | null) {
+	let theme = themeCache[mode];
+
+	if (!theme) {
+		theme = buildTheme(mode, element);
+		themeCache[mode] = theme;
+	}
+
+	return theme;
+}
+
+/**
+ * Drops the cached themes, so they are rebuilt from the current token values the
+ * next time a grid renders. Only needed if the tokens themselves change at
+ * runtime (a brand switch, for example) — a color scheme change is handled by
+ * the per-scheme cache.
+ */
+export function resetDsMuiTheme() {
+	delete themeCache.light;
+	delete themeCache.dark;
+}
+
+const ThemeProvidedContext = createContext(false);
+
+export type AfGridThemeProviderProps = {
+	children: ReactNode;
+};
+
+/**
+ * Bridges Designsystemet's colour tokens into a MUI theme, so the data grid
+ * follows Designsystemet instead of the MUI defaults.
+ *
+ * `AfGrid` renders this itself, so apps only need it when they render other MUI
+ * components alongside the grid, or want a single provider for many grids.
+ * Nesting it is safe: the inner provider is a no-op.
+ */
+export function AfGridThemeProvider({ children }: AfGridThemeProviderProps) {
+	let provided = use(ThemeProvidedContext);
+
+	// A display-less probe so the scheme and the tokens are read from this
+	// provider's position in the DOM rather than from `<body>`. Custom properties
+	// still resolve on a hidden element, and it takes part in no layout.
+	let [anchor, setAnchor] = useState<HTMLSpanElement | null>(null);
+	let colorScheme = useDsColorScheme(anchor);
+
+	// The stylesheets are imported from JS, so the custom properties aren't
+	// necessarily resolved during the first render. Rebuild after mount, and
+	// whenever the color scheme changes.
+	let [theme, setTheme] = useState(() => getDsMuiTheme(colorScheme, anchor));
+	useEffect(() => {
+		resetDsMuiTheme();
+		setTheme(getDsMuiTheme(colorScheme, anchor));
+	}, [colorScheme, anchor]);
+
+	if (provided) {
+		return children;
+	}
+
+	return (
+		<ThemeProvidedContext value={true}>
+			<span hidden ref={setAnchor} />
+			<StyledEngineProvider injectFirst>
+				<ThemeProvider theme={theme}>{children}</ThemeProvider>
+			</StyledEngineProvider>
+		</ThemeProvidedContext>
+	);
+}