@olenbetong/appframe-ds 1.3.1 → 1.3.4

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @olenbetong/appframe-ds
 
+## 1.3.4
+
+### Patch Changes
+
+- 9c2ba29: The data grid no longer freezes the page for seconds when it loads. Its loading overlay mounts one skeleton per visible cell, and Designsystemet's `Skeleton` calls `document.getAnimations()` on mount to synchronize its animation, so hundreds of skeletons scanned hundreds of animations each. The grid's skeleton slot now renders the same markup without that hook.
+
+## 1.3.3
+
+### Patch Changes
+
+- Updated dependencies [04ff05a]
+  - @olenbetong/appframe-core@2.15.1
+  - @olenbetong/appframe-data@1.7.4
+  - @olenbetong/appframe-react@2.2.4
+
+## 1.3.2
+
+### Patch Changes
+
+- 48e6ac8: The filter builder adds the seconds to datetime values, which the datetime input leaves out. SQL Server rejected the value without them with "Conversion failed when converting date and/or time from character string".
+- Updated dependencies [a63831a]
+  - @olenbetong/appframe-core@2.15.0
+  - @olenbetong/appframe-react@2.2.3
+  - @olenbetong/appframe-data@1.7.3
+
 ## 1.3.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.3.1",
+  "version": "1.3.4",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -63,9 +63,9 @@
     "@atlaskit/pragmatic-drag-and-drop": "3.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.2.2",
     "@base-ui/react": "1.8.0",
-    "@olenbetong/appframe-core": "2.14.0",
-    "@olenbetong/appframe-data": "1.7.2",
-    "@olenbetong/appframe-react": "2.2.2",
+    "@olenbetong/appframe-core": "2.15.1",
+    "@olenbetong/appframe-data": "1.7.4",
+    "@olenbetong/appframe-react": "2.2.4",
     "clsx": "^2.1.1",
     "dockview-react": "8.3.1",
     "localforage": "^1.10.0",
@@ -76,13 +76,13 @@
     "temporal-polyfill": "1.0.5"
   },
   "devDependencies": {
-    "@digdir/designsystemet-react": "1.22.0",
+    "@digdir/designsystemet-react": "1.23.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "9.4.0",
     "@mui/x-data-grid-premium": "8.29.3",
     "@mui/x-license": "8.29.3",
-    "@navikt/aksel-icons": "8.16.2",
+    "@navikt/aksel-icons": "8.17.2",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "16.3.3",

package/src/AfLookup/Lookup.tsx

@@ -5,7 +5,7 @@ import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { type DistributiveOmit, useLookupState } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
-import { useRef } from "react";
+import { useState } from "react";
 import { createPortal } from "react-dom";
 
 import { LookupCombobox, type LookupComboboxProps } from "./LookupCombobox.js";
@@ -63,7 +63,7 @@ export function useLookup<T extends Record<string, unknown>>({
 		getAnchorElement,
 		scrollParentSelector: "[data-virtualized-scroller]",
 	});
-	let initialSearchValueRef = useRef<string | undefined>(undefined);
+	let [initialSearchValue, setInitialSearchValue] = useState<string | undefined>(undefined);
 
 	function handleChange(item: T | null) {
 		props.onChange?.(item);
@@ -71,7 +71,9 @@ export function useLookup<T extends Record<string, unknown>>({
 	}
 
 	function handleOpenDialog(searchValue?: string) {
-		initialSearchValueRef.current = searchValue;
+		// openDialog renders synchronously (flushSync), which includes this update, so the combobox
+		// mounts with the search value already set.
+		setInitialSearchValue(searchValue);
 		openDialog();
 	}
 
@@ -93,7 +95,7 @@ export function useLookup<T extends Record<string, unknown>>({
 				{open && (
 					<LookupCombobox
 						{...props}
-						initialSearchValue={initialSearchValueRef.current}
+						initialSearchValue={initialSearchValue}
 						onClose={() => dialogRef.current?.close()}
 						onChange={handleChange}
 					/>

package/src/filter/FilterEditor.test.tsx

@@ -1,5 +1,5 @@
 import type { FieldMetadata, FilterExpression, FilterTree } from "@olenbetong/appframe-core";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 
@@ -131,6 +131,32 @@ describe("FilterEditor", () => {
 		expect(firstExpression(onChange)).toMatchObject({ value: "Yesterday", valueType: "special" });
 	});
 
+	it("adds the seconds a datetime input leaves out", () => {
+		let onChange = vi.fn();
+		render(
+			<FilterEditor fields={FIELDS} value={filterWith("Created", "equals", "", "datetime")} onChange={onChange} />,
+		);
+
+		fireEvent.change(screen.getByLabelText("Value"), { target: { value: "2026-09-25T00:00" } });
+
+		expect(firstExpression(onChange)).toMatchObject({ value: "2026-09-25T00:00:00" });
+	});
+
+	it("adds the seconds to both ends of a datetime range", () => {
+		let onChange = vi.fn();
+		render(
+			<FilterEditor
+				fields={FIELDS}
+				value={filterWith("Created", "between", ["2026-09-01T00:00:00", ""], "datetime")}
+				onChange={onChange}
+			/>,
+		);
+
+		fireEvent.change(screen.getByLabelText("To"), { target: { value: "2026-09-30T23:59" } });
+
+		expect(firstExpression(onChange)).toMatchObject({ value: ["2026-09-01T00:00:00", "2026-09-30T23:59:00"] });
+	});
+
 	it("does not offer relative values for numbers", () => {
 		render(<FilterEditor fields={FIELDS} value={filterWith("Age", "equals", "1", "number")} />);
 

package/src/filter/FilterValueEditor.tsx

@@ -47,6 +47,25 @@ function toStringValue(value: FilterExpression["value"]): string {
 	return String(value);
 }
 
+/**
+ * A `datetime-local` input reports `2026-09-25T00:00`, leaving out the seconds
+ * when they are zero. The value reaches SQL Server as a string, and SQL Server
+ * only accepts the ISO 8601 form with a `T` when the seconds are present, so
+ * the filter fails with "Conversion failed when converting date and/or time
+ * from character string" unless they are added.
+ */
+function withSeconds(value: string): string {
+	return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(value) ? `${value}:00` : value;
+}
+
+function toFilterValue(value: FilterExpression["value"], inputType: string): FilterExpression["value"] {
+	if (inputType !== "datetime-local") return value;
+	if (typeof value === "string") return withSeconds(value);
+	if (Array.isArray(value)) return value.map((item) => (typeof item === "string" ? withSeconds(item) : item));
+
+	return value;
+}
+
 function toArrayValue(value: FilterExpression["value"], length?: number): string[] {
 	let array = Array.isArray(value) ? value.map(toStringValue) : [];
 	if (length === undefined) return array;
@@ -75,7 +94,7 @@ export function FilterValueEditor({
 	let inputType = getInputType(field);
 
 	function setValue(value: FilterExpression["value"]) {
-		onChange({ ...expression, value });
+		onChange({ ...expression, value: isDynamic ? value : toFilterValue(value, inputType) });
 	}
 
 	function setDynamic(enabled: boolean) {

package/src/grid/slots/index.tsx

@@ -6,7 +6,6 @@ import {
 	Checkbox,
 	Divider,
 	Select,
-	Skeleton,
 	Spinner,
 	Switch,
 	Tag,
@@ -272,11 +271,39 @@ function BaseLinearProgress(props: GridSlotProps["baseLinearProgress"]) {
 	return <div {...(other as any)} role="progressbar" className={clsx("AfGrid-linearProgress", className)} />;
 }
 
+/**
+ * Renders Designsystemet's skeleton markup rather than its `Skeleton`
+ * component. The component synchronizes its animation with every other
+ * skeleton by calling `document.getAnimations()` when it mounts, and the grid's
+ * loading overlay mounts one per visible cell in the same commit - hundreds of
+ * scans over hundreds of animations, which froze the page for seconds on every
+ * load. Skeletons mounted together start their animation together anyway.
+ */
 function BaseSkeleton(props: GridSlotProps["baseSkeleton"]) {
-	let { variant, width, height, ...other } = props;
+	let { variant, width, height, className, style, ...other } = props;
+	let dsVariant = variant === "circular" ? "circle" : variant;
+
+	if (dsVariant === "text") {
+		return (
+			<span
+				{...(other as any)}
+				aria-hidden="true"
+				className={clsx("ds-skeleton", className)}
+				data-text={"-".repeat(Number(width) || 1)}
+				data-variant="text"
+				style={style}
+			/>
+		);
+	}
 
 	return (
-		<Skeleton {...(other as any)} variant={variant === "circular" ? "circle" : variant} width={width} height={height} />
+		<span
+			{...(other as any)}
+			aria-hidden="true"
+			className={clsx("ds-skeleton", className)}
+			data-variant={dsVariant}
+			style={{ width, height, ...style }}
+		/>
 	);
 }
 

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

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